fix(测试数据生成器): 修复 Worker 取消失效与规则存储静默失败

- 为生成任务引入 generationId，忽略过期 Worker 响应，避免取消后展示错误数据
- Worker 每 100 行让出事件循环，使 cancel 消息能被及时处理
- ruleStorage.setAll 返回写入结果，save/update/delete 在 QuotaExceeded 时返回失败
- 补充 useGenerator 与 ruleStorage 单元测试

AGENTS.md

@@ -1,6 +1,6 @@
 # AGENTS.md
 
-WXT 浏览器扩展项目 (React 19 + TypeScript)。提供时间戳转换、存储清理、JWT 解析、JSON 工具、二维码、Base64、Markdown 等测试效率工具。
+WXT 浏览器扩展项目 (React 19 + TypeScript)。提供时间戳转换、存储清理、JWT 解析、JSON 工具、二维码、Base64、Markdown、测试数据生成器等测试效率工具。
 
 ## 核心命令
 
@@ -54,6 +54,7 @@ src/                   # 源代码根目录
   utils/                 # 工具函数与服务抽象
   types/                 # TypeScript 类型声明
   lib/                   # 通用工具函数（cn、utils）
+  workers/               # Web Worker（数据生成等耗时任务）
 public/                # 静态资源（图标、_locales 等）
 ```
 
@@ -76,6 +77,37 @@ src/pages/FeatureName/
 - 当 `index.tsx` 超过 150 行时，必须拆分为 UI + Hook 模式
 - 复杂页面可增加 `contexts/`、`hooks/`、`components/` 子目录
 
+### 测试数据生成器模块
+
+```
+src/pages/TestDataGenerator/
+├── index.tsx                    # 主页面（字段配置 + 标签页切换）
+├── hooks/useGenerator.ts        # Web Worker 管理 Hook（创建、复用、通信、销毁）
+└── components/
+    ├── FieldList.tsx            # 字段列表（虚拟滚动 + @dnd-kit 拖拽排序 + 规则保存）
+    ├── FieldItem.tsx            # 字段卡片展示
+    ├── FieldEditor.tsx          # 字段编辑器（名称校验、生成器选择、参数配置）
+    ├── GeneratorSelector.tsx    # 生成器选择器（分类 + 搜索）
+    ├── GeneratorConfig.tsx      # 生成器参数表单（动态渲染 string/number/boolean/select/array）
+    ├── GenerateOptions.tsx      # 生成选项（数量、格式）
+    ├── GenerateButton.tsx       # 生成按钮 + 进度条
+    ├── DataPreview.tsx          # 示例数据预览（JSON 语法高亮）
+    ├── ResultPanel.tsx          # 生成结果状态面板
+    ├── ExportPanel.tsx          # 导出面板（复制/下载 JSON/CSV）
+    └── RuleManager.tsx          # 规则管理（CRUD、搜索、导入/导出）
+
+src/utils/
+├── ruleStorage.ts               # 规则持久化存储（localStorage）
+├── dataExporter.ts              # 数据导出工具（JSON/CSV 转换、下载、剪贴板）
+└── generators/                  # 内置生成器定义（个人信息、企业、技术、基础类型）
+
+src/workers/
+└── generator.worker.ts          # 数据生成 Web Worker
+
+src/types/
+└── testDataGenerator.ts         # 类型定义（FieldConfig, DataRule, GeneratorDefinition 等）
+```
+
 ## 关键架构决策
 
 **路由**: 不使用 React Router。通过 `src/config/features.tsx` 的 `FEATURES` 数组管理，`RouterProvider` 根据 `PageType`
@@ -148,7 +180,8 @@ src/pages/FeatureName/
 ## 关键外部库（非显而易见的）
 
 - `@webext-core/messaging` — 扩展消息通信
-- `@dnd-kit` — 拖拽排序（用于页面顺序管理）
+- `@dnd-kit` — 拖拽排序（用于页面顺序管理和字段列表排序）
 - `qrious` + `qr-scanner` — 二维码生成与解析
 - `dayjs` — 日期处理（时间戳转换）
 - `sonner` — Toast 通知（替代传统 snackbar）
+- Web Worker — 批量数据生成（`src/workers/generator.worker.ts`），避免阻塞 UI 线程

README.md

@@ -8,61 +8,72 @@
 
 ## 功能特性
 
-### 🚀 Dashboard 首页
+### Dashboard 首页
 
 - **工具导航**: 快速访问所有可用工具.
 - **个性化定制**: 支持自定义工具的排序和可见性.
 - **实时预览**: 在卡片上直接查看实时数据（如当前时间戳）.
 
-### ⏰ 时间戳转换工具
+### 时间戳转换工具
 
 - **实时显示**: 毫秒级精度显示当前系统时间.
 - **双向转换**: 日期字符串与 Unix 时间戳（秒/毫秒）之间的无缝转换.
 - **多时区支持**: 预设常用时区（亚洲/上海、美洲/纽约、欧洲/伦敦），支持快速切换.
 - **快捷操作**: 一键复制转换结果，支持多种格式.
 
-### 🧹 存储清理工具
+### 存储清理工具
 
 - **智能识别**: 自动检测并显示当前活动标签页的域名.
 - **全面清理**: 支持一键清理 localStorage、sessionStorage、IndexedDB、Cookies、Cache Storage 和 Service Workers.
 - **细粒度控制**: 可根据需要选择特定的清理项.
 - **自动刷新**: 提供清理后自动刷新页面的选项，确保状态同步.
 
-### 📝 文本统计工具
+### 文本统计工具
 
 - **实时分析**: 键入即统计，无需额外操作.
 - **多维指标**: 统计字符数、单词数、行数以及精确的字节大小.
 - **性能优化**: 采用高性能分词算法，支持大文本处理.
 
-### 🔑 JWT 解析工具
+### JWT 解析工具
 
 - **快速解码**: 自动解析 JSON Web Token 的 Header 和 Payload.
 - **格式化显示**: 以着色和格式化的 JSON 视图展示数据，方便阅读.
 - **安全检查**: 自动去除 `Bearer` 前缀，处理异常输入并提供友好提示.
 - **签名查看**: 展示 JWT 签名部分，辅助验证令牌完整性.
 
-### 🖱️ 右键恢复工具
+### 右键恢复工具
 
 - **当前页面检测**: 自动识别当前活动标签页的域名.
 - **一键恢复**: 解除网站对右键菜单的限制，恢复复制、粘贴等基础操作.
 - **状态可视化**: 通过 Badge 组件直观展示当前页面的锁定/解锁状态.
 
-### 🖼️ 二维码工具
+### 二维码工具
 
 - **生成器**: 将当前 URL 或自定义文本快速转换为二维码，支持下载.
 - **解析器**: 支持通过上传图片或粘贴图片来解析二维码内容.
 
-### 🔄 JSON 工具
+### JSON 工具
 
 - **差异比较**: 对比两段 JSON 数据，高亮展示差异.
 - **格式化**: 支持 JSON 美化、压缩、转 YAML / TOML.
 
-### 🧰 Base64 转换器
+### Base64 转换器
 
 - **文本编解码**: 支持文本内容的 Base64 编码与解码.
 - **文件转换**: 支持文件与 Base64 字符串互转.
 - **图像预览**: 支持图片 Base64 编码与实时预览.
 
+### 测试数据生成器
+
+- **可视化字段配置**: 通过 UI 界面定义数据字段，支持拖拽排序、最多 40 个字段.
+- **丰富的内置生成器**: 涵盖个人信息（姓名、手机、邮箱）、企业数据（公司名、职位）、技术数据（IP、MAC 地址、UUID）、基础类型（数字、日期、枚举）等多个分类.
+- **灵活的参数配置**: 每个生成器支持自定义参数（如数字范围、日期格式、枚举值列表等）.
+- **空值率与唯一性**: 可为非必填字段设置空值率，支持字段唯一性约束.
+- **规则管理**: 保存、加载、编辑、复制、导入/导出字段配置规则，方便复用.
+- **批量生成**: 支持 1 ~ 100,000 条数据生成，通过 Web Worker 异步处理避免阻塞 UI.
+- **实时预览**: 配置字段后即时预览示例数据结构.
+- **多格式导出**: 支持 JSON 和 CSV 格式，提供复制到剪贴板和下载文件两种导出方式.
+
 ## 技术栈
 
 - **框架**: [WXT (Web Extension Toolkit)](https://wxt.dev/)
@@ -75,6 +86,8 @@
 - **存储**: Chrome Storage API (类型安全封装)
 - **解析引擎**: qr-scanner (二维码解析), qrious (二维码生成)
 - **测试**: Vitest + Testing Library
+- **拖拽排序**: @dnd-kit/core + @dnd-kit/sortable
+- **异步生成**: Web Worker (批量数据生成)
 
 ## 项目结构
 
@@ -89,6 +102,7 @@
 │   │   ├── background.ts  # 后台 Service Worker
 │   │   └── content.ts     # 网页注入脚本
 │   ├── pages/             # 各功能模块的页面组件
+│   ├── workers/           # Web Worker (数据生成等耗时任务)
 │   ├── providers/         # 全局状态提供者 (Router, Theme 等)
 │   ├── hooks/             # 自定义 React Hooks
 │   ├── utils/             # 工具函数与服务抽象

src/components/CopyButton/__tests__/index.test.tsx

@@ -0,0 +1,194 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { act, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+// unmock the globally-mocked component so we test the real implementation
+vi.unmock('@/components/CopyButton');
+
+vi.mock('@/utils/clipboard', () => ({
+  copyTextToClipboard: vi.fn(),
+}));
+
+vi.mock('sonner', () => ({
+  toast: {
+    success: vi.fn(),
+    error: vi.fn(),
+  },
+}));
+
+import { CopyButton } from '@/components/CopyButton';
+import { copyTextToClipboard } from '@/utils/clipboard';
+import { toast } from 'sonner';
+
+const mockedCopy = vi.mocked(copyTextToClipboard);
+const mockedToast = vi.mocked(toast);
+
+describe('CopyButton', () => {
+  beforeEach(() => {
+    vi.useFakeTimers({ shouldAdvanceTime: true });
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('复制成功时调用 copyTextToClipboard 并传入正确 text', async () => {
+    mockedCopy.mockResolvedValue(true);
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+
+    render(<CopyButton text="hello world" />);
+
+    await user.click(screen.getByRole('button'));
+
+    expect(mockedCopy).toHaveBeenCalledWith('hello world');
+    expect(mockedToast.success).toHaveBeenCalled();
+  });
+
+  it('复制成功后图标切换为 Check，1.5 秒后恢复', async () => {
+    mockedCopy.mockResolvedValue(true);
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+
+    render(<CopyButton text="test" />);
+
+    // 点击后复制成功，按钮获得 emerald 样式（说明切到了 Check 状态）
+    await user.click(screen.getByRole('button'));
+
+    await waitFor(() => {
+      expect(screen.getByRole('button').className).toContain('text-emerald');
+    });
+
+    // 1.5 秒后样式恢复
+    act(() => {
+      vi.advanceTimersByTime(1500);
+    });
+
+    await waitFor(() => {
+      expect(screen.getByRole('button').className).not.toContain('text-emerald');
+    });
+  });
+
+  it('复制空文本时弹出 error toast', async () => {
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+
+    render(<CopyButton text="" />);
+
+    await user.click(screen.getByRole('button'));
+
+    expect(mockedCopy).not.toHaveBeenCalled();
+    expect(mockedToast.error).toHaveBeenCalled();
+  });
+
+  it('复制失败时弹出 error toast', async () => {
+    mockedCopy.mockResolvedValue(false);
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+
+    render(<CopyButton text="something" />);
+
+    await user.click(screen.getByRole('button'));
+
+    expect(mockedCopy).toHaveBeenCalledWith('something');
+    expect(mockedToast.error).toHaveBeenCalled();
+  });
+
+  // ==================== 新增测试 ====================
+
+  it('初始渲染时显示 Copy 图标且无 emerald 样式', () => {
+    render(<CopyButton text="initial" />);
+
+    const button = screen.getByRole('button');
+    expect(button.className).not.toContain('text-emerald');
+    // 通过 aria-label 确认按钮存在，图标由 lucide 渲染为 svg
+    expect(button).toHaveAttribute('aria-label');
+  });
+
+  it('自定义 tooltip 会覆盖默认 title 和 aria-label', () => {
+    render(<CopyButton text="tooltip-test" tooltip="自定义提示" />);
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveAttribute('title', '自定义提示');
+    expect(button).toHaveAttribute('aria-label', '自定义提示');
+  });
+
+  it('className 被正确透传到按钮', () => {
+    render(<CopyButton text="class-test" className="my-custom-class" />);
+
+    const button = screen.getByRole('button');
+    expect(button.className).toContain('my-custom-class');
+  });
+
+  it('点击事件阻止冒泡', async () => {
+    mockedCopy.mockResolvedValue(true);
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+    const parentClick = vi.fn();
+
+    render(
+      <div onClick={parentClick}>
+        <CopyButton text="stop-propagation" />
+      </div>,
+    );
+
+    await user.click(screen.getByRole('button'));
+
+    expect(mockedCopy).toHaveBeenCalled();
+    expect(parentClick).not.toHaveBeenCalled();
+  });
+
+  it('组件卸载时清除定时器，不触发状态更新警告', async () => {
+    mockedCopy.mockResolvedValue(true);
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+
+    const { unmount } = render(<CopyButton text="unmount-test" />);
+
+    await user.click(screen.getByRole('button'));
+
+    // 在 1.5 秒超时到期前卸载组件
+    act(() => {
+      vi.advanceTimersByTime(500);
+    });
+
+    // 卸载不应抛出 "Can't perform a React state update on an unmounted component" 警告
+    expect(() => unmount()).not.toThrow();
+
+    // 前进剩余时间，确认没有异常
+    act(() => {
+      vi.advanceTimersByTime(2000);
+    });
+  });
+
+  it('快速连续点击不会创建多个重叠定时器', async () => {
+    mockedCopy.mockResolvedValue(true);
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+
+    render(<CopyButton text="rapid-click" />);
+
+    const button = screen.getByRole('button');
+
+    // 快速点击 3 次
+    await user.click(button);
+    await user.click(button);
+    await user.click(button);
+
+    // copyTextToClipboard 应该被调用 3 次（每次点击都执行）
+    expect(mockedCopy).toHaveBeenCalledTimes(3);
+
+    // 但 setTimeout 相关的 clearTimeout + setTimeout 组合应正常工作
+    //  advance 1.5 秒后，copied 状态应恢复为 false
+    act(() => {
+      vi.advanceTimersByTime(1500);
+    });
+
+    await waitFor(() => {
+      expect(button.className).not.toContain('text-emerald');
+    });
+  });
+
+  it('其他 button props 通过 ...props 透传', () => {
+    render(<CopyButton text="props-test" data-testid="copy-btn" disabled id="copy-button-id" />);
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveAttribute('data-testid', 'copy-btn');
+    expect(button).toBeDisabled();
+    expect(button).toHaveAttribute('id', 'copy-button-id');
+  });
+});

src/pages/TestDataGenerator/hooks/__tests__/useGenerator.test.ts

@@ -0,0 +1,117 @@
+import { act, renderHook, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { useGenerator } from '@/pages/TestDataGenerator/hooks/useGenerator';
+import type { FieldConfig, WorkerResponseMessage } from '@/types/testDataGenerator';
+
+const mockField: FieldConfig = {
+  id: 'field-1',
+  name: 'username',
+  generatorId: 'string',
+  params: {},
+  required: true,
+  nullRate: 0,
+  unique: false,
+};
+
+type WorkerListener = (event: MessageEvent<WorkerResponseMessage>) => void;
+
+class MockWorker {
+  static instances: MockWorker[] = [];
+  onmessage: WorkerListener | null = null;
+  onerror: ((event: ErrorEvent) => void) | null = null;
+  postedMessages: unknown[] = [];
+
+  constructor(_url: URL, _options?: WorkerOptions) {
+    MockWorker.instances.push(this);
+  }
+
+  postMessage(message: unknown) {
+    this.postedMessages.push(message);
+  }
+
+  terminate() {
+    const index = MockWorker.instances.indexOf(this);
+    if (index >= 0) {
+      MockWorker.instances.splice(index, 1);
+    }
+  }
+
+  emit(message: WorkerResponseMessage) {
+    this.onmessage?.({ data: message } as MessageEvent<WorkerResponseMessage>);
+  }
+}
+
+describe('useGenerator', () => {
+  beforeEach(() => {
+    MockWorker.instances = [];
+    vi.stubGlobal('Worker', MockWorker);
+  });
+
+  it('应忽略过期 generationId 的 complete 消息', async () => {
+    const { result } = renderHook(() => useGenerator());
+
+    act(() => {
+      result.current.generate([mockField], 10);
+    });
+
+    const worker = MockWorker.instances[0];
+    expect(worker).toBeDefined();
+
+    act(() => {
+      result.current.cancel();
+    });
+
+    act(() => {
+      result.current.generate([mockField], 5);
+    });
+
+    act(() => {
+      worker.emit({
+        type: 'complete',
+        generationId: 1,
+        payload: {
+          success: true,
+          data: [{ username: 'stale' }],
+          stats: { total: 10, success: 10, failed: 0, duration: 1 },
+        },
+      });
+    });
+
+    expect(result.current.result).toBeNull();
+    expect(result.current.isGenerating).toBe(true);
+
+    act(() => {
+      worker.emit({
+        type: 'complete',
+        generationId: 3,
+        payload: {
+          success: true,
+          data: [{ username: 'fresh' }],
+          stats: { total: 5, success: 5, failed: 0, duration: 1 },
+        },
+      });
+    });
+
+    await waitFor(() => {
+      expect(result.current.isGenerating).toBe(false);
+    });
+    expect(result.current.result?.data?.[0]).toEqual({ username: 'fresh' });
+  });
+
+  it('cancel 后应发送 cancel 消息并使 generationId 失效', () => {
+    const { result } = renderHook(() => useGenerator());
+
+    act(() => {
+      result.current.generate([mockField], 100);
+    });
+
+    const worker = MockWorker.instances[0];
+
+    act(() => {
+      result.current.cancel();
+    });
+
+    expect(result.current.isGenerating).toBe(false);
+    expect(worker.postedMessages).toEqual(expect.arrayContaining([{ type: 'cancel' }]));
+  });
+});

src/pages/TestDataGenerator/hooks/useGenerator.ts

@@ -8,7 +8,8 @@ import type {
   FieldConfig,
   GenerateResult,
   GenerateProgress,
-  WorkerMessage,
+  WorkerRequestMessage,
+  WorkerResponseMessage,
 } from '@/types/testDataGenerator';
 
 export interface UseGeneratorReturn {
@@ -35,6 +36,7 @@ export function useGenerator(): UseGeneratorReturn {
   const [error, setError] = useState<string | null>(null);
 
   const workerRef = useRef<Worker | null>(null);
+  const generationIdRef = useRef(0);
 
   // 清理 Worker
   useEffect(() => {
@@ -58,22 +60,30 @@ export function useGenerator(): UseGeneratorReturn {
       type: 'module',
     });
 
-    worker.onmessage = (e: MessageEvent<WorkerMessage>) => {
+    worker.onmessage = (e: MessageEvent<WorkerResponseMessage>) => {
       const data = e.data;
       const { type } = data;
 
+      if (data.generationId !== generationIdRef.current) {
+        return;
+      }
+
       switch (type) {
         case 'progress':
-          setProgress(data.payload as GenerateProgress);
+          setProgress(data.payload);
           break;
         case 'complete':
           setIsGenerating(false);
-          setResult(data.payload as GenerateResult);
+          if (data.payload.success) {
+            setResult(data.payload);
+          } else if (data.payload.error && data.payload.error !== '生成已取消') {
+            setError(data.payload.error);
+          }
           setProgress(null);
           break;
         case 'error':
           setIsGenerating(false);
-          setError((data.payload as { error: string }).error);
+          setError(data.payload.error);
           setProgress(null);
           break;
       }
@@ -100,15 +110,17 @@ export function useGenerator(): UseGeneratorReturn {
     (fields: FieldConfig[], count: number, csvMode = false) => {
       if (isGenerating) return;
 
+      const generationId = ++generationIdRef.current;
+
       setIsGenerating(true);
       setProgress(null);
       setResult(null);
       setError(null);
 
       const worker = getWorker();
-      const message: WorkerMessage = {
+      const message: WorkerRequestMessage = {
         type: 'start',
-        payload: { fields, count, csvMode },
+        payload: { generationId, fields, count, csvMode },
       };
       worker.postMessage(message);
     },
@@ -120,7 +132,8 @@ export function useGenerator(): UseGeneratorReturn {
    */
   const cancel = useCallback(() => {
     if (workerRef.current && isGenerating) {
-      const message: WorkerMessage = { type: 'cancel' };
+      ++generationIdRef.current;
+      const message: WorkerRequestMessage = { type: 'cancel' };
       workerRef.current.postMessage(message);
       setIsGenerating(false);
       setProgress(null);

src/types/testDataGenerator.ts

@@ -156,19 +156,29 @@ export interface GenerateProgress {
 }
 
 /**
- * Worker 消息类型
+ * Worker 请求消息类型
  */
-export type WorkerMessage =
+export type WorkerRequestMessage =
   | { type: 'start'; payload: WorkerStartPayload }
-  | { type: 'progress'; payload: GenerateProgress }
-  | { type: 'complete'; payload: GenerateResult }
-  | { type: 'error'; payload: { error: string } }
   | { type: 'cancel' };
 
+/**
+ * Worker 响应消息类型
+ */
+export type WorkerResponseMessage =
+  | { type: 'progress'; generationId: number; payload: GenerateProgress }
+  | { type: 'complete'; generationId: number; payload: GenerateResult }
+  | { type: 'error'; generationId: number; payload: { error: string } };
+
+/** @deprecated 使用 WorkerRequestMessage | WorkerResponseMessage */
+export type WorkerMessage = WorkerRequestMessage | WorkerResponseMessage;
+
 /**
  * Worker 启动参数
  */
 export interface WorkerStartPayload {
+  /** 生成任务 ID，用于忽略过期 Worker 响应 */
+  generationId: number;
   /** 字段配置列表 */
   fields: FieldConfig[];
   /** 生成数量 */

src/utils/__tests__/ruleStorage.test.ts

@@ -0,0 +1,65 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import * as ruleStorage from '../ruleStorage';
+
+const STORAGE_KEY = 'testDataGenerator_rules';
+
+const mockField = {
+  id: 'field-1',
+  name: 'username',
+  generatorId: 'string',
+  params: {},
+  required: true,
+  nullRate: 0,
+  unique: false,
+};
+
+describe('ruleStorage', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    vi.restoreAllMocks();
+  });
+
+  it('save 在 localStorage 写入失败时应返回 null', () => {
+    vi.spyOn(Storage.prototype, 'setItem').mockImplementation(() => {
+      throw new DOMException('QuotaExceededError');
+    });
+
+    const result = ruleStorage.save({
+      name: 'Test Rule',
+      fields: [mockField],
+    });
+
+    expect(result).toBeNull();
+    expect(localStorage.getItem(STORAGE_KEY)).toBeNull();
+  });
+
+  it('update 在 localStorage 写入失败时应返回 null', () => {
+    const saved = ruleStorage.save({
+      name: 'Test Rule',
+      fields: [mockField],
+    });
+    expect(saved).not.toBeNull();
+
+    vi.spyOn(Storage.prototype, 'setItem').mockImplementation(() => {
+      throw new DOMException('QuotaExceededError');
+    });
+
+    const updated = ruleStorage.update(saved!.id, { name: 'Updated Rule' });
+    expect(updated).toBeNull();
+  });
+
+  it('deleteRule 在 localStorage 写入失败时应返回 false', () => {
+    const saved = ruleStorage.save({
+      name: 'Test Rule',
+      fields: [mockField],
+    });
+    expect(saved).not.toBeNull();
+
+    vi.spyOn(Storage.prototype, 'setItem').mockImplementation(() => {
+      throw new DOMException('QuotaExceededError');
+    });
+
+    expect(ruleStorage.deleteRule(saved!.id)).toBe(false);
+    expect(ruleStorage.getById(saved!.id)).toBeDefined();
+  });
+});

src/utils/ruleStorage.ts

@@ -78,7 +78,9 @@ export function save(
       useCount: 0,
     };
     rules.unshift(newRule);
-    setAll(rules);
+    if (!setAll(rules)) {
+      return null;
+    }
     return newRule;
   }
 
@@ -95,7 +97,9 @@ export function save(
     updatedAt: now,
   };
   rules[index] = updatedRule;
-  setAll(rules);
+  if (!setAll(rules)) {
+    return null;
+  }
   return updatedRule;
 }
 
@@ -117,7 +121,9 @@ export function update(id: string, updates: Partial<DataRule>): DataRule | null
     updatedAt: Date.now(),
   };
   rules[index] = updatedRule;
-  setAll(rules);
+  if (!setAll(rules)) {
+    return null;
+  }
   return updatedRule;
 }
 
@@ -132,8 +138,7 @@ export function deleteRule(id: string): boolean {
     return false;
   }
   rules.splice(index, 1);
-  setAll(rules);
+  return setAll(rules);
-  return true;
 }
 
 /**
@@ -165,7 +170,9 @@ export function duplicate(id: string, copySuffix = '（副本）'): DataRule | n
 
   const rules = getAll();
   rules.unshift(newRule);
-  setAll(rules);
+  if (!setAll(rules)) {
+    return null;
+  }
   return newRule;
 }
 
@@ -267,11 +274,13 @@ export function clear(): void {
 /**
  * 保存所有规则到存储
  */
-function setAll(rules: DataRule[]): void {
+function setAll(rules: DataRule[]): boolean {
   try {
     localStorage.setItem(STORAGE_KEY, JSON.stringify(rules));
+    return true;
   } catch (error) {
     console.error('[ruleStorage] 保存规则失败:', error);
+    return false;
   }
 }
 

src/workers/generator.worker.ts

@@ -6,11 +6,14 @@
 import { getGeneratorById } from '@/lib/generators';
 import type {
   FieldConfig,
-  WorkerMessage,
+  WorkerRequestMessage,
   GenerateResult,
   GenerateProgress,
 } from '@/types/testDataGenerator';
 
+/** 每生成 N 行让出一次事件循环，以便处理 cancel 消息 */
+const YIELD_EVERY = 100;
+
 // 生成结果缓存
 let generatedData: Record<string, unknown>[] = [];
 let isCancelled = false;
@@ -18,7 +21,7 @@ let isCancelled = false;
 /**
  * Worker 消息处理器
  */
-self.onmessage = async (e: MessageEvent<WorkerMessage>) => {
+self.onmessage = async (e: MessageEvent<WorkerRequestMessage>) => {
   const data = e.data;
   const { type } = data;
 
@@ -37,11 +40,12 @@ self.onmessage = async (e: MessageEvent<WorkerMessage>) => {
  * 处理开始生成消息
  */
 async function handleStart(payload: {
+  generationId: number;
   fields: FieldConfig[];
   count: number;
   csvMode: boolean;
 }): Promise<void> {
-  const { fields, count } = payload;
+  const { generationId, fields, count } = payload;
   generatedData = [];
 
   try {
@@ -51,6 +55,7 @@ async function handleStart(payload: {
       if (!generator) {
         self.postMessage({
           type: 'error',
+          generationId,
           payload: { error: `生成器 "${field.generatorId}" 不存在` },
         });
         return;
@@ -65,6 +70,7 @@ async function handleStart(payload: {
       if (isCancelled) {
         self.postMessage({
           type: 'complete',
+          generationId,
           payload: {
             success: false,
             error: '生成已取消',
@@ -136,7 +142,23 @@ async function handleStart(payload: {
           total: count,
           estimatedTimeLeft: Math.round(((Date.now() - startTime) / (i + 1)) * (count - i - 1)),
         };
-        self.postMessage({ type: 'progress', payload: progress });
+        self.postMessage({ type: 'progress', generationId, payload: progress });
+      }
+
+      // 定期让出事件循环，使 cancel 消息能被处理
+      if ((i + 1) % YIELD_EVERY === 0) {
+        await new Promise<void>((resolve) => setTimeout(resolve, 0));
+        if (isCancelled) {
+          self.postMessage({
+            type: 'complete',
+            generationId,
+            payload: {
+              success: false,
+              error: '生成已取消',
+            },
+          });
+          return;
+        }
       }
     }
 
@@ -155,10 +177,11 @@ async function handleStart(payload: {
       },
     };
 
-    self.postMessage({ type: 'complete', payload: result });
+    self.postMessage({ type: 'complete', generationId, payload: result });
   } catch (error) {
     self.postMessage({
       type: 'error',
+      generationId,
       payload: { error: `生成失败: ${error}` },
     });
   }