fix: 更新 features 测试断言以匹配新增的 testDataGenerator

fix: 修复测试数据生成器多项代码问题
- useCallback 闭包问题：改用函数式 setFields 更新，避免依赖过时引用
- Worker 复用：复用已有 Worker 而非每次 generate 都销毁重建
- 导出复制反馈：复制操作完成后添加 toast 成功/失败提示
- 字段名校验：添加空值、非法字符、重复名称校验
- i18n 硬编码：GeneratorConfig 和 ruleStorage 统一使用 t() 函数

.gitignore

@@ -14,6 +14,11 @@ stats-*.json
 .wxt
 .vitest
 
+# Environment variables
+.env
+.env.local
+.env.*.local
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
@@ -30,5 +35,16 @@ stats-*.json
 .qoder/*
 dev/*
 
-docs/*
+# Build outputs
-!docs/VISUAL_STYLE_GUIDE.md
+dist/
+build/
+
+# Test coverage
+coverage/
+
+# IDE files
+*.code-workspace
+
+# Other
+*.tsbuildinfo
+*.tsxbuildinfo

.husky/pre-push

@@ -4,8 +4,10 @@ npx tsc --noEmit
 
 # ESLint 严格检查（仅检查本次推送的变更文件，不阻塞不相关的旧代码）
 # 新分支无 upstream 时，回退到与 origin/main 对比
-BASE=$(git rev-parse --verify @{upstream} 2>/dev/null && echo "@{upstream}" || echo "origin/main")
+MERGE_BASE=$(git merge-base HEAD @{upstream} 2>/dev/null || git merge-base HEAD origin/main 2>/dev/null)
-CHANGED_FILES=$(git diff --name-only --diff-filter=d "$BASE"...HEAD -- '*.ts' '*.tsx' '*.js' '*.jsx' '*.mjs')
+if [ -n "$MERGE_BASE" ]; then
-if [ -n "$CHANGED_FILES" ]; then
+  CHANGED_FILES=$(git diff --name-only --diff-filter=d "$MERGE_BASE" HEAD -- '*.ts' '*.tsx' '*.js' '*.jsx' '*.mjs')
-  echo "$CHANGED_FILES" | xargs npx eslint --max-warnings=0
+  if [ -n "$CHANGED_FILES" ]; then
+    echo "$CHANGED_FILES" | xargs npx eslint --max-warnings=0
+  fi
 fi

AGENTS.md

@@ -143,6 +143,7 @@ src/pages/FeatureName/
 - 图标: 使用 `lucide-react` 图标库
 - 格式: Prettier (`.prettierrc`: 100 字符宽, 单引号, 尾逗号 all, LF 换行)
 - ESLint 使用 `typescript-eslint` 的 `projectService: true`（无需手动维护 project 路径）
+- **Git Commit**: 必须使用中文描述，遵循 Conventional Commits 规范（如 `fix(组件名): 描述`、`feat(功能名): 描述`）
 
 ## 关键外部库（非显而易见的）
 

docs/test-data-generator/README.md

@@ -0,0 +1,21 @@
+# 测试数据生成器 - 功能设计文档
+
+> 版本: v1.0
+> 创建时间: 2024-01-20
+> 状态: 待 Review
+
+## 产品定位
+
+**轻量级可视化测试数据生成器**
+
+- 纯前端工具，无需后端
+- 可视化配置，无需编码
+- 本地生成，数据安全
+
+## 目录
+
+- [核心功能](./core-features.md)
+- [生成器库](./generators.md)
+- [规则管理](./rule-management.md)
+- [界面设计](./ui-design.md)
+- [技术实现](./technical-implementation.md)

docs/test-data-generator/TASKS.md

@@ -0,0 +1,384 @@
+# 测试数据生成器 - 实现任务列表
+
+> 创建时间: 2026-06-06
+> 状态: ✅ 已完成
+
+## 总体进度
+
+| 子功能                     | 状态      | 预估工时  |
+| -------------------------- | --------- | --------- |
+| 1. 类型定义与项目配置      | ✅ 已完成 | 0.5h      |
+| 2. 生成器库                | ✅ 已完成 | 4h        |
+| 3. Web Worker 数据生成引擎 | ✅ 已完成 | 2h        |
+| 4. 规则存储与管理          | ✅ 已完成 | 2h        |
+| 5. 数据导出功能            | ✅ 已完成 | 1h        |
+| 6. UI 组件开发             | ✅ 已完成 | 6h        |
+| 7. 页面集成与注册          | ✅ 已完成 | 1h        |
+| 8. 测试与优化              | ✅ 已完成 | 2h        |
+| **总计**                   |           | **18.5h** |
+
+---
+
+## 1. 类型定义与项目配置
+
+**目标**: 创建所有必要的类型定义文件，配置项目注册新功能
+
+### 任务清单
+
+- [x] 1.1 创建 `src/types/testDataGenerator.ts` 类型定义文件
+  - [x] 定义 `FieldConfig` 接口
+  - [x] 定义 `DataRule` 接口
+  - [x] 定义 `GeneratorDefinition` 接口
+  - [x] 定义 `GeneratorParam` 接口
+  - [x] 定义 `GenerateResult` 接口
+  - [x] 定义 `ExportFile` 接口
+
+- [x] 1.2 更新 `src/types/storage.d.ts`
+  - [x] 在 `PageType` 中添加 `'testDataGenerator'`
+  - [x] 在 `StorageSchema` 中添加测试数据生成器相关配置（如需要）
+
+- [x] 1.3 更新 `src/config/features.tsx`
+  - [x] 导入 TestDataGenerator 页面组件
+  - [x] 添加新功能配置到 `FEATURES` 数组
+  - [x] 选择合适的图标（如 `Database` 或 `FileSpreadsheet`）
+
+- [x] 1.4 更新国际化配置
+  - [x] 添加 `testDataGenerator_title` 翻译
+  - [x] 添加 `testDataGenerator_description` 翻译
+
+---
+
+## 2. 生成器库
+
+**目标**: 实现 21 个数据生成器，支持多种生成策略
+
+### 任务清单
+
+#### 2.1 生成器基础框架
+
+- [x] 2.1.1 创建 `src/lib/generators/types.ts`
+  - [x] 定义生成器内部类型（与 `testDataGenerator.ts` 分离）
+
+- [x] 2.1.2 创建 `src/lib/generators/index.ts`
+  - [x] 导出所有生成器
+  - [x] 导出 `generatorCategories` 配置
+
+#### 2.2 个人信息生成器 (6个)
+
+- [x] 2.2.1 创建 `src/lib/generators/personal.ts`
+  - [x] 实现 `chineseName` 生成器
+    - [x] `generate()` 方法
+    - [x] `generateAtIndex()` 方法
+  - [x] 实现 `email` 生成器
+    - [x] `generate()` 方法
+    - [x] `generateAtIndex()` 方法
+  - [x] 实现 `chinesePhone` 生成器
+    - [x] `generate()` 方法
+    - [x] `generateAtIndex()` 方法
+  - [x] 实现 `idCard` 生成器
+    - [x] `generate()` 方法
+    - [x] `generateAtIndex()` 方法
+  - [x] 实现 `chineseAddress` 生成器
+    - [x] `generate()` 方法
+    - [x] `generateAtIndex()` 方法
+  - [x] 实现 `age` 生成器
+    - [x] `generate()` 方法（支持 realistic/uniform/demographic 策略）
+    - [x] `generateAtIndex()` 方法
+    - [x] 实现 `normalRandom()` 辅助函数
+    - [x] 实现 `demographicRandom()` 辅助函数
+
+#### 2.3 业务数据生成器 (8个)
+
+- [x] 2.3.1 创建 `src/lib/generators/business.ts`
+  - [x] 实现 `orderId` 生成器
+  - [x] 实现 `price` 生成器
+    - [x] 实现 `generatePsychologicalPrice()` 辅助函数
+    - [x] 实现 `generateRealisticPrice()` 辅助函数
+  - [x] 实现 `date` 生成器
+    - [x] 实现 `formatDate()` 辅助函数
+  - [x] 实现 `status` 生成器
+  - [x] 实现 `quantity` 生成器
+    - [x] 实现 `poissonRandom()` 辅助函数
+  - [x] 实现 `rating` 生成器
+    - [x] 实现 `skewedRandom()` 辅助函数
+  - [x] 实现 `discount` 生成器
+    - [x] 实现 `generatePsychologicalDiscount()` 辅助函数
+  - [x] 实现 `stock` 生成器
+    - [x] 实现 `exponentialRandom()` 辅助函数
+
+#### 2.4 技术数据生成器 (3个)
+
+- [x] 2.4.1 创建 `src/lib/generators/technical.ts`
+  - [x] 实现 `uuid` 生成器
+  - [x] 实现 `ipv4` 生成器
+  - [x] 实现 `url` 生成器
+
+#### 2.5 基础类型生成器 (4个)
+
+- [x] 2.5.1 创建 `src/lib/generators/basic.ts`
+  - [x] 实现 `randomInt` 生成器
+  - [x] 实现 `randomFloat` 生成器
+  - [x] 实现 `randomString` 生成器
+  - [x] 实现 `fromList` 生成器
+
+---
+
+## 3. Web Worker 数据生成引擎
+
+**目标**: 实现后台数据生成，支持进度回调和取消
+
+### 任务清单
+
+- [x] 3.1 创建 `src/workers/generator.worker.ts`
+  - [x] 实现 `self.onmessage` 处理器
+  - [x] 验证生成器是否存在
+  - [x] 实现数据生成循环
+  - [x] 实现空值率控制逻辑
+  - [x] 实现唯一性约束逻辑
+    - [x] 小数据量：随机生成 + 重试（100次上限）
+    - [x] 大数据量：索引生成策略
+  - [x] 实现进度回调（每1000条）
+  - [x] 实现完成回调（包含统计数据）
+  - [x] 实现错误回调
+
+- [x] 3.2 创建 `src/pages/TestDataGenerator/hooks/useGenerator.ts`
+  - [x] 实现 Worker 创建和销毁
+  - [x] 实现 `generate()` 方法
+  - [x] 实现 `terminate()` 方法
+  - [x] 管理进度状态
+  - [x] 管理生成结果状态
+
+---
+
+## 4. 规则存储与管理
+
+**目标**: 实现规则的持久化存储和管理功能
+
+### 任务清单
+
+- [x] 4.1 创建 `src/utils/ruleStorage.ts`
+  - [x] 定义 `STORAGE_KEY` 常量
+  - [x] 定义 `MAX_RULES = 20` 常量
+  - [x] 实现 `getAll()` 方法
+  - [x] 实现 `getById()` 方法
+  - [x] 实现 `getCount()` 方法
+  - [x] 实现 `isMaxReached()` 方法
+  - [x] 实现 `save()` 方法（含数量限制检查）
+  - [x] 实现 `update()` 方法
+  - [x] 实现 `delete()` 方法
+  - [x] 实现 `duplicate()` 方法
+  - [x] 实现 `recordUse()` 方法
+  - [x] 实现 `search()` 方法
+  - [x] 实现 `getRecent()` 方法
+  - [x] 实现 `export()` 方法
+  - [x] 实现 `import()` 方法（含格式验证）
+  - [x] 实现 `clear()` 方法
+  - [x] 实现 `validateRule()` 私有方法
+
+---
+
+## 5. 数据导出功能
+
+**目标**: 实现 JSON 和 CSV 格式的数据导出
+
+### 任务清单
+
+- [x] 5.1 创建 `src/utils/dataExporter.ts`
+  - [x] 实现 `toJSON()` 静态方法
+  - [x] 实现 `toCSV()` 静态方法
+  - [x] 实现 `escapeCSV()` 私有方法
+  - [x] 实现 `exportByFormat()` 静态方法
+  - [x] 实现 `toMultipleFiles()` 静态方法
+  - [x] 实现 `toSingleFile()` 静态方法
+  - [x] 实现 `getMimeType()` 私有方法
+  - [x] 实现 `download()` 静态方法
+  - [x] 实现 `downloadMultiple()` 静态方法
+
+---
+
+## 6. UI 组件开发
+
+**目标**: 实现所有界面组件，遵循视觉规范
+
+### 任务清单
+
+#### 6.1 页面组件
+
+- [x] 6.1.1 创建 `src/pages/TestDataGenerator/index.tsx` 主页面
+  - [x] 实现左右分栏布局（60% / 40%）
+  - [x] 集成所有子组件
+  - [x] 管理页面状态
+
+#### 6.2 字段管理组件
+
+- [x] 6.2.1 创建 `src/pages/TestDataGenerator/components/FieldList.tsx`
+  - [x] 实现字段列表展示
+  - [x] 实现添加字段按钮
+  - [x] 实现字段拖拽排序（可选，使用上移/下移按钮）
+
+- [x] 6.2.2 创建 `src/pages/TestDataGenerator/components/FieldItem.tsx`
+  - [x] 实现单个字段项展示
+  - [x] 实现字段名编辑
+  - [x] 实现生成器切换下拉框
+  - [x] 实现配置按钮
+  - [x] 实现删除按钮
+  - [x] 实现上移/下移按钮
+
+- [x] 6.2.3 创建 `src/pages/TestDataGenerator/components/FieldEditor.tsx`
+  - [x] 实现基础配置区（字段名、描述）
+  - [x] 实现必填/选填切换
+  - [x] 实现空值率配置（仅选填时显示）
+    - [x] 滑块组件
+    - [x] 预设按钮（低/中/高）
+  - [x] 实现唯一性约束开关
+
+#### 6.3 生成器相关组件
+
+- [x] 6.3.1 创建 `src/pages/TestDataGenerator/components/GeneratorSelector.tsx`
+  - [x] 实现分类展示（个人信息/业务数据/技术数据/基础类型）
+  - [x] 实现搜索功能
+  - [x] 实现生成器选择
+
+- [x] 6.3.2 创建 `src/pages/TestDataGenerator/components/GeneratorConfig.tsx`
+  - [x] 实现参数配置表单
+  - [x] 支持不同参数类型（string/number/boolean/select/array）
+  - [x] 实时预览更新
+
+#### 6.4 数据预览组件
+
+- [x] 6.4.1 创建 `src/pages/TestDataGenerator/components/DataPreview.tsx`
+  - [x] 实现 JSON 格式预览
+  - [x] 实现 CSV 格式预览
+  - [x] 实现格式切换按钮
+  - [x] 实现数据分页
+  - [x] 实现复制功能
+
+#### 6.5 生成选项组件
+
+- [x] 6.5.1 创建 `src/pages/TestDataGenerator/components/GenerateOptions.tsx`
+  - [x] 实现生成数量配置（预设 + 自定义）
+  - [x] 实现数据格式选择（JSON/CSV）
+  - [x] 实现默认空值率配置
+
+- [x] 6.5.2 创建 `src/pages/TestDataGenerator/components/GenerateButton.tsx`
+  - [x] 实现生成按钮
+  - [x] 实现加载状态
+  - [x] 实现进度条显示
+
+#### 6.6 导出组件
+
+- [x] 6.6.1 创建 `src/pages/TestDataGenerator/components/ExportPanel.tsx`
+  - [x] 实现导出选项（复制/下载 JSON/下载 CSV）
+  - [x] 实现下载逻辑
+
+#### 6.7 结果展示组件
+
+- [x] 6.7.1 创建 `src/pages/TestDataGenerator/components/ResultPanel.tsx`
+  - [x] 实现成功状态展示
+  - [x] 实现警告状态展示（部分字段失败）
+  - [x] 实现错误状态展示
+  - [x] 实现数据统计展示
+
+#### 6.8 规则管理组件
+
+- [x] 6.8.1 创建 `src/pages/TestDataGenerator/components/RuleManager.tsx`
+  - [x] 实现规则列表展示
+  - [x] 实现搜索功能
+  - [x] 实现加载/编辑/删除/复制按钮
+  - [x] 实现导入/导出功能
+  - [x] 实现规则数量显示（已保存 X/20 条）
+
+---
+
+## 7. 页面集成与注册
+
+**目标**: 将新功能集成到应用中
+
+### 任务清单
+
+- [x] 7.1 更新路由配置
+  - [x] 确保 `RouterProvider` 支持新页面类型
+
+- [x] 7.2 更新功能注册
+  - [x] 验证 `features.tsx` 配置正确
+  - [x] 验证图标显示正常
+
+- [x] 7.3 更新仪表盘
+  - [x] 在 Dashboard 中显示新工具卡片
+
+---
+
+## 8. 测试与优化
+
+**目标**: 确保功能稳定性和性能
+
+### 任务清单
+
+#### 8.1 单元测试
+
+- [x] 8.1.1 创建生成器测试
+  - [x] `src/lib/generators/__tests__/personal.test.ts`
+  - [x] `src/lib/generators/__tests__/business.test.ts`
+  - [x] `src/lib/generators/__tests__/technical.test.ts`
+  - [x] `src/lib/generators/__tests__/basic.test.ts`
+
+- [x] 8.1.2 创建工具函数测试
+  - [x] `src/utils/__tests__/ruleStorage.test.ts`
+  - [x] `src/utils/__tests__/dataExporter.test.ts`
+
+#### 8.2 集成测试
+
+- [x] 8.2.1 创建页面测试
+  - [x] `src/pages/TestDataGenerator/__tests__/TestDataGenerator.test.tsx`
+
+#### 8.3 性能优化
+
+- [x] 8.3.1 验证 Web Worker 性能
+  - [x] 测试 10000+ 条数据生成
+  - [x] 验证 UI 不阻塞
+
+- [x] 8.3.2 验证内存使用
+  - [x] 检查大数据量时的内存占用
+  - [x] 确保无内存泄漏
+
+#### 8.4 代码质量
+
+- [x] 8.4.1 代码审查
+  - [x] 遵循项目代码规范
+  - [x] 遵循视觉规范文档
+
+- [x] 8.4.2 文档更新
+  - [x] 更新 AGENTS.md（如需要）
+
+---
+
+## 依赖关系
+
+```
+1. 类型定义与项目配置
+    ↓
+2. 生成器库
+    ↓
+3. Web Worker 数据生成引擎 (依赖 2)
+    ↓
+4. 规则存储与管理
+    ↓
+5. 数据导出功能
+    ↓
+6. UI 组件开发 (依赖 1, 2, 3, 4, 5)
+    ↓
+7. 页面集成与注册 (依赖 6)
+    ↓
+8. 测试与优化 (依赖 7)
+```
+
+---
+
+## 注意事项
+
+1. **遵循视觉规范**: 所有 UI 组件必须遵循 `docs/VISUAL_STYLE_GUIDE.md`
+2. **使用现有组件**: 优先使用 `src/components/ui/` 中的 shadcn/ui 组件
+3. **TypeScript 严格模式**: 确保类型安全
+4. **错误处理**: 使用 `sonner` 库进行 Toast 提示
+5. **性能考虑**: 大数据量生成必须使用 Web Worker
+6. **响应式设计**: 支持桌面端、平板端、移动端

docs/test-data-generator/core-features.md

@@ -0,0 +1,238 @@
+# 核心功能
+
+## 功能概览
+
+| 功能模块       | 功能点        | 说明               | 优先级 |
+| -------------- | ------------- | ------------------ | ------ |
+| **字段配置**   | 添加字段      | 可视化添加数据字段 | P0     |
+|                | 删除字段      | 删除不需要的字段   | P0     |
+|                | 字段排序      | 拖拽调整字段顺序   | P1     |
+|                | 字段命名      | 自定义字段名称     | P0     |
+|                | 必填/选填设置 | 控制字段是否必填   | P0     |
+|                | 空值率配置    | 选填字段空值概率   | P1     |
+| **生成器系统** | 生成器选择    | 从生成器库中选择   | P0     |
+|                | 参数配置      | 配置生成器参数     | P0     |
+|                | 实时预览      | 配置时查看生成结果 | P1     |
+| **数据生成**   | 批量生成      | 支持 10000+ 条数据 | P0     |
+|                | 唯一性约束    | 保证字段值唯一     | P1     |
+|                | 组合策略      | 自动选择生成策略   | P1     |
+|                | 数据预览      | 生成前预览数据     | P1     |
+| **数据导出**   | JSON 导出     | 导出为 JSON 格式   | P0     |
+|                | CSV 导出      | 导出为 CSV 格式    | P0     |
+
+## 功能详情
+
+### 1. 字段配置
+
+#### 添加字段
+
+- 用户点击"添加字段"按钮
+- 弹出生成器选择器
+- 选择生成器后，自动创建新字段
+- 字段默认名称为生成器名称
+
+#### 删除字段
+
+- 每个字段右侧有删除按钮
+- 点击后弹出确认对话框
+- 确认后删除该字段
+
+#### 字段排序
+
+- 支持拖拽排序
+- 支持上移/下移按钮
+- 排序后预览数据同步更新
+
+#### 字段命名
+
+- 字段名称可自定义
+- 支持中英文命名
+- 同一规则内字段名不可重复
+
+#### 必填/选填设置
+
+- 每个字段可设置为"必填"或"选填"
+- **必填字段**: 100% 生成数据
+- **选填字段**: 可配置空值概率（0-100%）
+- 默认所有字段为必填
+
+#### 空值率配置
+
+- 选填字段可单独设置空值率
+- 提供预设值：低（20%）、中（50%）、高（80%）
+- 支持滑块精细调节（0-100%）
+- 未单独设置的选填字段使用全局默认空值率
+
+---
+
+### 2. 生成器系统
+
+#### 生成器选择
+
+- 以分类方式展示生成器
+- 支持搜索生成器
+- 点击选择后添加到字段配置
+
+#### 价格生成器（业务数据）
+
+生成真实的价格数据，支持多种策略：
+
+| 策略     | 说明                           | 适用场景     |
+| -------- | ------------------------------ | ------------ |
+| 真实分布 | 对数正态分布，模拟真实商品价格 | 通用电商场景 |
+| 均匀随机 | 所有价格等概率                 | 测试数据     |
+| 心理定价 | .99/.98/.95 结尾               | 营销场景     |
+
+**参数配置**：
+
+- 最低价/最高价：控制价格区间
+- 小数位数：0（整数）、1、2 位
+- 生成策略：选择分布类型
+
+#### 年龄生成器（个人信息）
+
+生成真实分布的年龄数据：
+
+| 策略     | 说明                         | 适用场景     |
+| -------- | ---------------------------- | ------------ |
+| 真实分布 | 正态分布，均值 35，标准差 10 | 通用用户数据 |
+| 人口比例 | 按中国人口年龄比例分布       | 市场调研数据 |
+| 均匀随机 | 所有年龄等概率               | 测试数据     |
+
+**参数配置**：
+
+- 最小年龄/最大年龄：控制年龄区间
+- 生成策略：选择分布类型
+
+#### 数量生成器（业务数据）
+
+生成真实分布的数量数据：
+
+| 策略     | 说明                        | 适用场景 |
+| -------- | --------------------------- | -------- |
+| 真实分布 | 泊松分布，大多数购买 1-3 件 | 零售订单 |
+| 批发模式 | 10-100 之间均匀分布         | 批发订单 |
+| 均匀随机 | 所有数量等概率              | 测试数据 |
+
+**参数配置**：
+
+- 最小值/最大值：控制数量区间
+- 生成策略：选择分布类型
+
+#### 评分生成器（业务数据）
+
+生成真实分布的评分数据：
+
+| 策略     | 说明               | 适用场景 |
+| -------- | ------------------ | -------- |
+| 真实分布 | 偏态分布，偏向高分 | 电商平台 |
+| 严格评价 | 偏态分布，偏向低分 | 严格评审 |
+| 均匀随机 | 所有评分等概率     | 测试数据 |
+
+**参数配置**：
+
+- 最低分/最高分：控制评分区间
+- 小数位数：0、1 位
+- 生成策略：选择分布类型
+
+#### 折扣生成器（业务数据）
+
+生成真实分布的折扣数据：
+
+| 策略     | 说明                     | 适用场景 |
+| -------- | ------------------------ | -------- |
+| 心理定价 | 常见折扣点（8折、9折等） | 电商促销 |
+| 清仓模式 | 大折扣区间（3-7折）      | 清仓处理 |
+| 均匀随机 | 所有折扣等概率           | 测试数据 |
+
+**参数配置**：
+
+- 最低折扣/最高折扣：控制折扣区间（0.1-0.9）
+- 生成策略：选择分布类型
+
+#### 库存生成器（业务数据）
+
+生成真实分布的库存数据：
+
+| 策略     | 说明                     | 适用场景 |
+| -------- | ------------------------ | -------- |
+| 真实分布 | 指数分布，大多数库存较少 | 通用商品 |
+| 热销商品 | 低库存区间（0-50）       | 热销商品 |
+| 均匀随机 | 所有库存等概率           | 测试数据 |
+
+**参数配置**：
+
+- 最小库存/最大库存：控制库存区间
+- 生成策略：选择分布类型
+
+#### 参数配置
+
+- 每个生成器有对应的参数配置界面
+- 必填参数标记星号
+- 修改参数后实时预览更新
+
+#### 实时预览
+
+- 配置参数时，右侧预览区实时更新
+- 显示 5-10 条示例数据
+- 帮助用户确认配置是否正确
+
+---
+
+### 3. 数据生成
+
+#### 批量生成
+
+- 支持配置生成数量
+- 使用 Web Worker 后台生成
+- 支持 10000+ 条数据
+- 生成过程中显示进度条
+
+#### 唯一性约束
+
+- 每个字段可单独设置唯一性约束
+- 启用后，该字段生成的值不会重复
+- 如果无法生成唯一值，使用重试机制
+
+#### 组合策略（唯一性生成）
+
+系统根据数据量自动选择最优生成策略：
+
+| 数据量    | 策略            | 说明                   |
+| --------- | --------------- | ---------------------- |
+| ≤ 1000 条 | 随机生成 + 重试 | 保证随机性，性能可接受 |
+| > 1000 条 | 索引生成        | 高性能，保证唯一性     |
+
+**实现方式**：
+
+- 生成器提供两个方法：`generate()` 和 `generateAtIndex()`
+- `generate()`: 随机生成，用于小数据量或非唯一性字段
+- `generateAtIndex()`: 索引生成，用于大数据量唯一性字段
+- 系统根据配置自动选择合适的方法
+
+**示例**：
+
+- 手机号字段：`generateAtIndex(params, index)` 使用 index 生成唯一手机号
+- 姓名字段：`generateAtIndex(params, index)` 使用 index 组合姓和名
+
+#### 数据预览
+
+- 生成前可预览数据
+- 显示前 10 条数据
+- 支持分页查看更多数据
+
+---
+
+### 4. 数据导出
+
+#### JSON 导出
+
+- 导出为标准 JSON 格式
+- 支持压缩和格式化两种模式
+- 包含字段名和数据
+
+#### CSV 导出
+
+- 导出为 CSV 格式
+- 自动处理逗号转义
+- 支持中文编码 (UTF-8 with BOM)

docs/test-data-generator/generators.md

@@ -0,0 +1,702 @@
+# 生成器库
+
+## 分类概览
+
+| 分类     | 生成器数量 | 说明                                             |
+| -------- | ---------- | ------------------------------------------------ |
+| 个人信息 | 6 个       | 中文姓名、邮箱、手机号、年龄等                   |
+| 业务数据 | 8 个       | 订单号、价格、日期、状态、数量、评分、折扣、库存 |
+| 技术数据 | 3 个       | UUID、IP地址、URL                                |
+| 基础类型 | 4 个       | 整数、浮点数、字符串等                           |
+| **总计** | **21 个**  |                                                  |
+
+---
+
+## 个人信息生成器
+
+### 1. 中文姓名 (chineseName)
+
+**说明**: 生成中文姓名，如张三、李四
+
+**参数**:
+
+| 参数名          | 类型                         | 必填 | 默认值             | 说明         |
+| --------------- | ---------------------------- | ---- | ------------------ | ------------ |
+| surnamePool     | string \| string[]           | 否   | 百家姓前100个      | 姓氏池       |
+| givenNameLength | { min: number, max: number } | 否   | { min: 1, max: 2 } | 名字长度范围 |
+
+**示例**:
+
+```json
+{
+  "name": "name",
+  "generator": "chineseName",
+  "params": {
+    "surnamePool": ["张", "王", "李", "赵"],
+    "givenNameLength": { "min": 1, "max": 2 }
+  }
+}
+```
+
+**生成结果**: 张伟, 李娜, 王强, 赵敏
+
+---
+
+### 2. 邮箱地址 (email)
+
+**说明**: 生成邮箱地址
+
+**参数**:
+
+| 参数名    | 类型                 | 必填 | 默认值                                                       | 说明       |
+| --------- | -------------------- | ---- | ------------------------------------------------------------ | ---------- |
+| domains   | string[]             | 否   | ['qq.com', '163.com', '126.com', 'gmail.com', 'outlook.com'] | 域名列表   |
+| nameStyle | 'pinyin' \| 'random' | 否   | 'pinyin'                                                     | 用户名风格 |
+
+**示例**:
+
+```json
+{
+  "name": "email",
+  "generator": "email",
+  "params": {
+    "domains": ["qq.com", "163.com"],
+    "nameStyle": "pinyin"
+  }
+}
+```
+
+**生成结果**: zhangwei@qq.com, lina@163.com
+
+---
+
+### 3. 中国手机号 (chinesePhone)
+
+**说明**: 生成 11 位中国手机号
+
+**参数**:
+
+| 参数名 | 类型     | 必填 | 默认值         | 说明       |
+| ------ | -------- | ---- | -------------- | ---------- |
+| prefix | string[] | 否   | 常见手机号前缀 | 手机号前缀 |
+
+**示例**:
+
+```json
+{
+  "name": "phone",
+  "generator": "chinesePhone",
+  "params": {
+    "prefix": ["138", "139", "150", "151"]
+  }
+}
+```
+
+**生成结果**: 13812345678, 15087654321
+
+---
+
+### 4. 身份证号 (idCard)
+
+**说明**: 生成 18 位中国身份证号
+
+**参数**:
+
+| 参数名 | 类型   | 必填 | 默认值 | 说明   |
+| ------ | ------ | ---- | ------ | ------ |
+| region | string | 否   | 随机   | 地区码 |
+
+**示例**:
+
+```json
+{
+  "name": "idCard",
+  "generator": "idCard",
+  "params": {
+    "region": "110101"
+  }
+}
+```
+
+**生成结果**: 110101199001011234
+
+---
+
+### 5. 中文地址 (chineseAddress)
+
+**说明**: 生成中国地址
+
+**参数**:
+
+| 参数名 | 类型                           | 必填 | 默认值 | 说明     |
+| ------ | ------------------------------ | ---- | ------ | -------- |
+| level  | 'full' \| 'province' \| 'city' | 否   | 'full' | 详细程度 |
+
+**示例**:
+
+```json
+{
+  "name": "address",
+  "generator": "chineseAddress",
+  "params": {
+    "level": "full"
+  }
+}
+```
+
+**生成结果**: 北京市朝阳区建国路88号
+
+---
+
+### 6. 年龄 (age)
+
+**说明**: 生成真实分布的年龄数据
+
+**参数**:
+
+| 参数名   | 类型                                      | 必填 | 默认值      | 说明     |
+| -------- | ----------------------------------------- | ---- | ----------- | -------- |
+| min      | number                                    | 否   | 1           | 最小年龄 |
+| max      | number                                    | 否   | 100         | 最大年龄 |
+| strategy | 'realistic' \| 'demographic' \| 'uniform' | 否   | 'realistic' | 生成策略 |
+
+**策略说明**:
+
+| 策略        | 说明                         | 适用场景     |
+| ----------- | ---------------------------- | ------------ |
+| realistic   | 正态分布，均值 35，标准差 10 | 通用用户数据 |
+| demographic | 按中国人口年龄比例分布       | 市场调研数据 |
+| uniform     | 均匀随机                     | 测试数据     |
+
+**示例**:
+
+```json
+{
+  "name": "age",
+  "generator": "age",
+  "params": {
+    "min": 18,
+    "max": 65,
+    "strategy": "realistic"
+  }
+}
+```
+
+**生成结果**: 28, 42, 35, 51, 23
+
+---
+
+## 业务数据生成器
+
+### 1. 订单号 (orderId)
+
+**说明**: 生成订单号
+
+**参数**:
+
+| 参数名       | 类型    | 必填 | 默认值 | 说明         |
+| ------------ | ------- | ---- | ------ | ------------ |
+| prefix       | string  | 否   | 'ORD'  | 前缀         |
+| dateIncluded | boolean | 否   | true   | 是否包含日期 |
+
+**示例**:
+
+```json
+{
+  "name": "orderId",
+  "generator": "orderId",
+  "params": {
+    "prefix": "ORD",
+    "dateIncluded": true
+  }
+}
+```
+
+**生成结果**: ORD20240115001, ORD20240115002
+
+---
+
+### 2. 价格 (price)
+
+**说明**: 生成真实的价格数据，支持多种分布策略
+
+**参数**:
+
+| 参数名   | 类型                                        | 必填 | 默认值      | 说明     |
+| -------- | ------------------------------------------- | ---- | ----------- | -------- |
+| min      | number                                      | 是   | 1           | 最低价   |
+| max      | number                                      | 是   | 9999        | 最高价   |
+| decimals | 0 \| 1 \| 2                                 | 否   | 2           | 小数位数 |
+| strategy | 'realistic' \| 'uniform' \| 'psychological' | 否   | 'realistic' | 生成策略 |
+
+**生成策略说明**:
+
+| 策略          | 说明                           | 适用场景     |
+| ------------- | ------------------------------ | ------------ |
+| realistic     | 对数正态分布，模拟真实商品价格 | 通用电商场景 |
+| uniform       | 均匀随机，所有价格等概率       | 测试数据     |
+| psychological | 心理定价，.99/.98/.95 结尾     | 营销场景     |
+
+**示例**:
+
+```json
+{
+  "name": "price",
+  "generator": "price",
+  "params": {
+    "min": 10,
+    "max": 5000,
+    "decimals": 2,
+    "strategy": "realistic"
+  }
+}
+```
+
+**生成结果**:
+
+- 真实分布: 299.00, 1599.50, 49.99, 1299.00
+- 心理定价: 299.99, 1599.98, 49.95, 1299.99
+- 均匀随机: 1234.56, 5678.90, 890.12
+
+---
+
+### 3. 日期时间 (date)
+
+**说明**: 生成日期时间
+
+**参数**:
+
+| 参数名 | 类型   | 必填 | 默认值                | 说明     |
+| ------ | ------ | ---- | --------------------- | -------- |
+| format | string | 否   | 'YYYY-MM-DD HH:mm:ss' | 日期格式 |
+| min    | string | 否   | '2020-01-01'          | 最早日期 |
+| max    | string | 否   | 当前日期              | 最晚日期 |
+
+**示例**:
+
+```json
+{
+  "name": "createdAt",
+  "generator": "date",
+  "params": {
+    "format": "YYYY-MM-DD HH:mm:ss",
+    "min": "2024-01-01"
+  }
+}
+```
+
+**生成结果**: 2024-01-15 14:30:22
+
+---
+
+### 4. 状态 (status)
+
+**说明**: 从选项中随机选择
+
+**参数**:
+
+| 参数名  | 类型     | 必填 | 默认值   | 说明         |
+| ------- | -------- | ---- | -------- | ------------ |
+| options | string[] | 是   | -        | 状态选项列表 |
+| weights | number[] | 否   | 均匀分布 | 各选项权重   |
+
+**示例**:
+
+```json
+{
+  "name": "status",
+  "generator": "status",
+  "params": {
+    "options": ["pending", "paid", "shipped", "completed"],
+    "weights": [30, 40, 20, 10]
+  }
+}
+```
+
+**生成结果**: pending, paid, shipped, completed
+
+---
+
+### 5. 数量 (quantity)
+
+**说明**: 生成真实分布的数量数据
+
+**参数**:
+
+| 参数名   | 类型                               | 必填 | 默认值      | 说明     |
+| -------- | ---------------------------------- | ---- | ----------- | -------- |
+| min      | number                             | 否   | 1           | 最小值   |
+| max      | number                             | 否   | 100         | 最大值   |
+| strategy | 'realistic' \| 'bulk' \| 'uniform' | 否   | 'realistic' | 生成策略 |
+
+**策略说明**:
+
+| 策略      | 说明                        | 适用场景 |
+| --------- | --------------------------- | -------- |
+| realistic | 泊松分布，大多数购买 1-3 件 | 零售订单 |
+| bulk      | 10-100 之间均匀分布         | 批发订单 |
+| uniform   | 均匀随机                    | 测试数据 |
+
+**示例**:
+
+```json
+{
+  "name": "quantity",
+  "generator": "quantity",
+  "params": {
+    "min": 1,
+    "max": 50,
+    "strategy": "realistic"
+  }
+}
+```
+
+**生成结果**: 2, 1, 5, 3, 1
+
+---
+
+### 6. 评分 (rating)
+
+**说明**: 生成真实分布的评分数据
+
+**参数**:
+
+| 参数名   | 类型                                 | 必填 | 默认值      | 说明     |
+| -------- | ------------------------------------ | ---- | ----------- | -------- |
+| min      | number                               | 否   | 1           | 最低分   |
+| max      | number                               | 否   | 5           | 最高分   |
+| decimals | number                               | 否   | 1           | 小数位数 |
+| strategy | 'realistic' \| 'strict' \| 'uniform' | 否   | 'realistic' | 生成策略 |
+
+**策略说明**:
+
+| 策略      | 说明               | 适用场景 |
+| --------- | ------------------ | -------- |
+| realistic | 偏态分布，偏向高分 | 电商平台 |
+| strict    | 偏态分布，偏向低分 | 严格评审 |
+| uniform   | 均匀随机           | 测试数据 |
+
+**示例**:
+
+```json
+{
+  "name": "rating",
+  "generator": "rating",
+  "params": {
+    "min": 1,
+    "max": 5,
+    "decimals": 1,
+    "strategy": "realistic"
+  }
+}
+```
+
+**生成结果**: 4.5, 4.8, 3.9, 5.0, 4.2
+
+---
+
+### 7. 折扣 (discount)
+
+**说明**: 生成真实分布的折扣数据
+
+**参数**:
+
+| 参数名   | 类型                                        | 必填 | 默认值          | 说明     |
+| -------- | ------------------------------------------- | ---- | --------------- | -------- |
+| min      | number                                      | 否   | 0.1             | 最低折扣 |
+| max      | number                                      | 否   | 0.9             | 最高折扣 |
+| strategy | 'psychological' \| 'clearance' \| 'uniform' | 否   | 'psychological' | 生成策略 |
+
+**策略说明**:
+
+| 策略          | 说明                     | 适用场景 |
+| ------------- | ------------------------ | -------- |
+| psychological | 常见折扣点（8折、9折等） | 电商促销 |
+| clearance     | 大折扣区间（3-7折）      | 清仓处理 |
+| uniform       | 均匀随机                 | 测试数据 |
+
+**示例**:
+
+```json
+{
+  "name": "discount",
+  "generator": "discount",
+  "params": {
+    "min": 0.1,
+    "max": 0.9,
+    "strategy": "psychological"
+  }
+}
+```
+
+**生成结果**: 0.80, 0.90, 0.85, 0.95, 0.70
+
+---
+
+### 8. 库存 (stock)
+
+**说明**: 生成真实分布的库存数据
+
+**参数**:
+
+| 参数名   | 类型                              | 必填 | 默认值      | 说明     |
+| -------- | --------------------------------- | ---- | ----------- | -------- |
+| min      | number                            | 否   | 0           | 最小库存 |
+| max      | number                            | 否   | 1000        | 最大库存 |
+| strategy | 'realistic' \| 'hot' \| 'uniform' | 否   | 'realistic' | 生成策略 |
+
+**策略说明**:
+
+| 策略      | 说明                     | 适用场景 |
+| --------- | ------------------------ | -------- |
+| realistic | 指数分布，大多数库存较少 | 通用商品 |
+| hot       | 低库存区间（0-50）       | 热销商品 |
+| uniform   | 均匀随机                 | 测试数据 |
+
+**示例**:
+
+```json
+{
+  "name": "stock",
+  "generator": "stock",
+  "params": {
+    "min": 0,
+    "max": 500,
+    "strategy": "realistic"
+  }
+}
+```
+
+**生成结果**: 23, 8, 156, 45, 12
+
+---
+
+## 技术数据生成器
+
+### 1. UUID (uuid)
+
+**说明**: 生成 UUID
+
+**参数**:
+
+| 参数名  | 类型         | 必填 | 默认值 | 说明      |
+| ------- | ------------ | ---- | ------ | --------- |
+| version | 'v4' \| 'v1' | 否   | 'v4'   | UUID 版本 |
+
+**示例**:
+
+```json
+{
+  "name": "id",
+  "generator": "uuid",
+  "params": {
+    "version": "v4"
+  }
+}
+```
+
+**生成结果**: 550e8400-e29b-41d4-a716-446655440000
+
+---
+
+### 2. IPv4 地址 (ipv4)
+
+**说明**: 生成 IPv4 地址
+
+**参数**:
+
+| 参数名  | 类型    | 必填 | 默认值 | 说明         |
+| ------- | ------- | ---- | ------ | ------------ |
+| private | boolean | 否   | false  | 是否私有地址 |
+
+**示例**:
+
+```json
+{
+  "name": "ip",
+  "generator": "ipv4",
+  "params": {
+    "private": true
+  }
+}
+```
+
+**生成结果**: 192.168.1.1, 10.0.0.1
+
+---
+
+### 3. URL (url)
+
+**说明**: 生成 URL
+
+**参数**:
+
+| 参数名   | 类型              | 必填 | 默认值        | 说明 |
+| -------- | ----------------- | ---- | ------------- | ---- |
+| protocol | 'http' \| 'https' | 否   | 'https'       | 协议 |
+| domain   | string            | 否   | 'example.com' | 域名 |
+
+**示例**:
+
+```json
+{
+  "name": "website",
+  "generator": "url",
+  "params": {
+    "protocol": "https",
+    "domain": "shop.com"
+  }
+}
+```
+
+**生成结果**: https://shop.com/product/123
+
+---
+
+## 基础类型生成器
+
+### 1. 随机整数 (randomInt)
+
+**说明**: 生成指定范围的随机整数
+
+**参数**:
+
+| 参数名 | 类型   | 必填 | 默认值 | 说明   |
+| ------ | ------ | ---- | ------ | ------ |
+| min    | number | 是   | -      | 最小值 |
+| max    | number | 是   | -      | 最大值 |
+
+**示例**:
+
+```json
+{
+  "name": "age",
+  "generator": "randomInt",
+  "params": {
+    "min": 18,
+    "max": 60
+  }
+}
+```
+
+**生成结果**: 25, 42, 18, 60
+
+---
+
+### 2. 随机浮点数 (randomFloat)
+
+**说明**: 生成指定范围的随机浮点数
+
+**参数**:
+
+| 参数名   | 类型   | 必填 | 默认值 | 说明     |
+| -------- | ------ | ---- | ------ | -------- |
+| min      | number | 是   | -      | 最小值   |
+| max      | number | 是   | -      | 最大值   |
+| decimals | number | 否   | 2      | 小数位数 |
+
+**示例**:
+
+```json
+{
+  "name": "score",
+  "generator": "randomFloat",
+  "params": {
+    "min": 0,
+    "max": 100,
+    "decimals": 1
+  }
+}
+```
+
+**生成结果**: 85.3, 42.7, 99.9
+
+---
+
+### 3. 随机字符串 (randomString)
+
+**说明**: 生成指定长度的随机字符串
+
+**参数**:
+
+| 参数名  | 类型   | 必填 | 默认值         | 说明       |
+| ------- | ------ | ---- | -------------- | ---------- |
+| length  | number | 是   | -              | 字符串长度 |
+| charset | string | 否   | 'alphanumeric' | 字符集     |
+
+**示例**:
+
+```json
+{
+  "name": "code",
+  "generator": "randomString",
+  "params": {
+    "length": 8,
+    "charset": "alphanumeric"
+  }
+}
+```
+
+**生成结果**: aB3kL9mN, xY7zW2pQ
+
+---
+
+### 4. 从列表选择 (fromList)
+
+**说明**: 从选项列表中随机选择
+
+**参数**:
+
+| 参数名  | 类型     | 必填 | 默认值   | 说明     |
+| ------- | -------- | ---- | -------- | -------- |
+| options | any[]    | 是   | -        | 选项列表 |
+| weights | number[] | 否   | 均匀分布 | 权重     |
+
+**示例**:
+
+```json
+{
+  "name": "category",
+  "generator": "fromList",
+  "params": {
+    "options": ["电子产品", "服装", "食品", "图书"],
+    "weights": [40, 30, 20, 10]
+  }
+}
+```
+
+**生成结果**: 电子产品, 服装, 食品
+
+---
+
+## 生成器选择界面
+
+### 界面设计
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│  选择生成器                                                       │
+├─────────────────────────────────────────────────────────────────────┤
+│                                                                     │
+│  搜索: [搜索生成器...                                          ] │
+│                                                                     │
+│  分类筛选                                                        │
+│  ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐      │
+│  │ 全部    │ │ 个人信息 │ │ 业务数据 │ │ 技术数据 │ │ 基础类型 │      │
+│  └─────────┘ └─────────┘ └─────────┘ └─────────┘ └─────────┘      │
+│                                                                     │
+│  生成器列表                                                       │
+│  ┌───────────────────────────────────────────────────────────────┐ │
+│  │  个人信息                                                     │ │
+│  │  ┌─────────────────────────────────────────────────────────┐ │ │
+│  │  │ 中文姓名        生成中文姓名，如张三                     │ │ │
+│  │  │ 邮箱地址        生成邮箱地址                            │ │ │
+│  │  │ 中国手机号      生成11位手机号                          │ │ │
+│  │  │ 身份证号        生成18位身份证号                        │ │ │
+│  │  │ 中文地址        生成中国地址                            │ │ │
+│  │  └─────────────────────────────────────────────────────────┘ │ │
+│  │                                                               │ │
+│  └───────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+└─────────────────────────────────────────────────────────────────────┘
+```

docs/test-data-generator/rule-management.md

@@ -0,0 +1,481 @@
+# 规则管理
+
+## 功能概览
+
+| 功能     | 说明                 | 优先级 |
+| -------- | -------------------- | ------ |
+| 保存规则 | 将当前配置保存为模板 | P0     |
+| 规则列表 | 查看所有已保存的规则 | P0     |
+| 规则搜索 | 按关键词搜索规则     | P1     |
+| 规则编辑 | 修改已保存的规则     | P0     |
+| 规则删除 | 删除不需要的规则     | P0     |
+| 规则加载 | 一键加载规则配置     | P0     |
+| 规则复制 | 复制规则配置         | P1     |
+| 规则导出 | 导出为 JSON 文件     | P1     |
+| 规则导入 | 从 JSON 文件导入     | P1     |
+
+## 规则数量限制
+
+- **最大规则数量**: 20 条
+- **超出限制**: 当规则数量达到 20 条时，保存按钮置灰，提示"已达到最大规则数量"
+- **解决方式**: 用户需要删除已有规则后才能保存新规则
+
+---
+
+## 数据结构
+
+### 规则模板
+
+```typescript
+interface DataRule {
+  id: string; // 唯一标识
+  name: string; // 规则名称
+  description?: string; // 规则描述
+  fields: FieldConfig[]; // 字段配置
+  options: {
+    total: number; // 生成数量
+    format: 'json' | 'csv';
+    defaultEmptyRate: number; // 默认空值率（0-100）
+  };
+  metadata: {
+    createdAt: number; // 创建时间
+    updatedAt: number; // 更新时间
+    lastUsedAt?: number; // 最后使用时间
+    useCount: number; // 使用次数
+  };
+}
+```
+
+### 字段配置
+
+```typescript
+interface FieldConfig {
+  id: string; // 字段唯一标识
+  name: string; // 字段名
+  generator: string; // 生成器名称
+  params: Record<string, any>; // 生成器参数
+  unique: boolean; // 唯一性约束
+  required: boolean; // 是否必填
+  emptyRate?: number; // 选填字段的空值概率（0-100）
+}
+```
+
+---
+
+## 功能详情
+
+### 1. 保存规则
+
+**触发方式**: 用户点击"保存规则"按钮
+
+**界面设计**:
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│  保存规则                                                            │
+├─────────────────────────────────────────────────────────────────────┤
+│                                                                     │
+│  规则信息                                                            │
+│  ┌───────────────────────────────────────────────────────────────┐ │
+│  │  规则名称:                                                     │ │
+│  │  ┌─────────────────────────────────────────────────────────┐ │ │
+│  │  │ [电商用户数据 - 测试用                                  ]│ │ │
+│  │  └─────────────────────────────────────────────────────────┘ │ │
+│  │                                                               │ │
+│  │  规则描述 (可选):                                              │ │
+│  │  ┌─────────────────────────────────────────────────────────┐ │ │
+│  │  │ [用于测试用户注册功能，包含姓名、邮箱、手机号            ]│ │ │
+│  │  └─────────────────────────────────────────────────────────┘ │ │
+│  │                                                               │ │
+│  └───────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│  规则预览                                                            │
+│  ┌───────────────────────────────────────────────────────────────┐ │
+│  │ 字段数量: 4 个                                                 │ │
+│  │ • name (中文姓名)                                              │ │
+│  │ • email (邮箱地址)                                             │ │
+│  │ • phone (手机号)                                               │ │
+│  │ • age (年龄)                                                   │ │
+│  │                                                               │ │
+│  │ 生成数量: 100 条                                               │ │
+│  │ 数据格式: JSON                                                 │ │
+│  └───────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│  [保存]  [取消]                                                      │
+│                                                                     │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+**保存逻辑**:
+
+1. 验证规则名称不为空
+2. 检查规则数量是否达到上限（20 条）
+3. 如果达到上限，显示提示"已达到最大规则数量"
+4. 生成唯一 ID
+5. 设置创建时间和更新时间
+6. 初始化使用次数为 0
+7. 保存到 localStorage
+
+---
+
+### 2. 规则列表
+
+**界面设计**:
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│  规则管理                                                            │
+├─────────────────────────────────────────────────────────────────────┤
+│                                                                     │
+│  搜索: [搜索规则名称...                                            ] │
+│                                                                     │
+│  规则列表 (已保存 15/20 条)                                          │
+│  ┌───────────────────────────────────────────────────────────────┐ │
+│  │                                                               │ │
+│  │  ┌─────────────────────────────────────────────────────────┐ │ │
+│  │  │ 电商用户数据 - 测试用                                     │ │ │
+│  │  │ ─────────────────────────────────────────────────────── │ │ │
+│  │  │ 用于测试用户注册功能，包含姓名、邮箱、手机号              │ │ │
+│  │  │ 4 个字段 | 100 条 | JSON                                  │ │ │
+│  │  │ 2024-01-15 14:30 创建 | 2024-01-20 10:15 最后使用        │ │ │
+│  │  │                                                         │ │ │
+│  │  │ [加载]  [复制]  [导出]  [编辑]  [删除]                     │ │ │
+│  │  └─────────────────────────────────────────────────────────┘ │ │
+│  │                                                               │ │
+│  └───────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│  [导入规则]  [导出全部]  [清空全部]                                  │
+│                                                                     │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+**列表项信息**:
+
+- 规则名称
+- 规则描述
+- 字段数量、生成数量、数据格式
+- 创建时间、最后使用时间
+- 操作按钮
+
+---
+
+### 3. 规则搜索
+
+**搜索逻辑**:
+
+- 支持按规则名称搜索
+- 支持按规则描述搜索
+- 搜索为模糊匹配，不区分大小写
+
+**实现方式**:
+
+```typescript
+search(keyword: string): DataRule[] {
+  const rules = this.getAll();
+  const lowerKeyword = keyword.toLowerCase();
+
+  return rules.filter(r =>
+    r.name.toLowerCase().includes(lowerKeyword) ||
+    r.description?.toLowerCase().includes(lowerKeyword)
+  );
+}
+```
+
+---
+
+### 4. 规则编辑
+
+**界面设计**:
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│  编辑规则 - 电商用户数据                                             │
+├─────────────────────────────────────────────────────────────────────┤
+│                                                                     │
+│  基本信息                                                            │
+│  ┌───────────────────────────────────────────────────────────────┐ │
+│  │ 规则名称: [电商用户数据 - 测试用                              ]│ │
+│  │ 规则描述: [用于测试用户注册功能，包含姓名、邮箱、手机号        ]│ │
+│  └───────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│  字段配置 (可直接编辑)                                                │
+│  ┌───────────────────────────────────────────────────────────────┐ │
+│  │                                                               │ │
+│  │  1. name        [中文姓名 ▼]  [配置] [删除] [上移][下移]      │ │
+│  │  2. email       [邮箱地址 ▼]  [配置] [删除] [上移][下移]      │ │
+│  │  3. phone       [手机号   ▼]  [配置] [删除] [上移][下移]      │ │
+│  │  4. age         [年龄     ▼]  [配置] [删除] [上移][下移]      │ │
+│  │                                                               │ │
+│  │  [+ 添加字段]                                                 │ │
+│  │                                                               │ │
+│  └───────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│  生成选项                                                            │
+│  ┌───────────────────────────────────────────────────────────────┐ │
+│  │ 数量: [100]  格式: [JSON ▼]                                   │ │
+│  └───────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│  [保存修改]  [取消]                                                  │
+│                                                                     │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+**编辑逻辑**:
+
+1. 加载原规则配置到编辑器
+2. 用户修改配置
+3. 点击保存时更新规则
+4. 更新 metadata.updatedAt
+5. 保存到 localStorage
+
+---
+
+### 5. 规则删除
+
+**删除流程**:
+
+1. 点击删除按钮
+2. 弹出确认对话框
+3. 确认后删除规则
+4. 刷新规则列表
+
+**确认对话框**:
+
+```
+┌─────────────────────────────────────────┐
+│  确认删除                            │
+├─────────────────────────────────────────┤
+│                                         │
+│  确定要删除规则 "电商用户数据" 吗？      │
+│                                         │
+│  此操作不可撤销。                        │
+│                                         │
+│  [取消]  [删除]                     │
+│                                         │
+└─────────────────────────────────────────┘
+```
+
+---
+
+### 6. 规则加载
+
+**加载流程**:
+
+1. 点击"加载"按钮
+2. 将规则配置应用到当前编辑器
+3. 更新预览数据
+4. 记录使用时间和次数
+
+**实现方式**:
+
+```typescript
+loadRule(ruleId: string): void {
+  const rule = this.storage.getById(ruleId);
+
+  // 应用规则配置
+  this.setFields(rule.fields);
+  this.setOptions(rule.options);
+
+  // 记录使用
+  this.storage.recordUse(ruleId);
+
+  // 更新预览
+  this.updatePreview();
+}
+```
+
+---
+
+### 7. 规则复制
+
+**复制逻辑**:
+
+1. 点击"复制"按钮
+2. 创建规则的副本
+3. 名称添加"(副本)"后缀
+4. 生成新的 ID
+5. 保存为新规则
+
+---
+
+### 8. 规则导出
+
+**导出界面**:
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│  导出规则                                                            │
+├─────────────────────────────────────────────────────────────────────┤
+│                                                                     │
+│  选择要导出的规则:                                                    │
+│  ┌───────────────────────────────────────────────────────────────┐ │
+│  │ ☑ 电商用户数据 - 测试用 (4个字段, 100条)                       │ │
+│  │ ☑ 电商订单数据 - 测试用 (6个字段, 500条)                       │ │
+│  │ ☐ 用户登录数据 - 测试用 (3个字段, 50条)                       │ │
+│  │                                                               │ │
+│  │ [全选]  [全不选]                                               │ │
+│  └───────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│  导出格式:                                                            │
+│  ┌───────────────────────────────────────────────────────────────┐ │
+│  │ ○ 导出为单个 JSON 文件 (所有规则合并)                          │ │
+│  │ ● 导出为多个 JSON 文件 (每个规则一个文件)                      │ │
+│  └───────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│  [导出]  [取消]                                                      │
+│                                                                     │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+**导出格式**:
+
+```json
+{
+  "version": "1.0",
+  "exportedAt": "2024-01-20T10:15:45.000Z",
+  "rules": [
+    {
+      "id": "rule_123456",
+      "name": "电商用户数据 - 测试用",
+      "description": "用于测试用户注册功能",
+      "fields": [...],
+      "options": {...},
+      "metadata": {...}
+    }
+  ]
+}
+```
+
+---
+
+### 9. 规则导入
+
+**导入界面**:
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│  导入规则                                                            │
+├─────────────────────────────────────────────────────────────────────┤
+│                                                                     │
+│  选择导入方式:                                                        │
+│  ┌───────────────────────────────────────────────────────────────┐ │
+│  │                                                               │ │
+│  │  ○ 从文件导入                                                 │ │
+│  │    ┌─────────────────────────────────────────────────────┐   │ │
+│  │    │ 拖拽文件到这里，或 [点击选择文件]                      │   │ │
+│  │    │ 支持格式: .json                                      │   │ │
+│  │    └─────────────────────────────────────────────────────┘   │ │
+│  │                                                               │ │
+│  │  ○ 从剪贴板粘贴                                               │ │
+│  │    ┌─────────────────────────────────────────────────────┐   │ │
+│  │    │ 粘贴 JSON 规则内容...                                │   │ │
+│  │    └─────────────────────────────────────────────────────┘   │ │
+│  │                                                               │ │
+│  └───────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│  预览导入内容:                                                        │
+│  ┌───────────────────────────────────────────────────────────────┐ │
+│  │ 格式验证通过                                                   │ │
+│  │ 规则数量: 2 个                                                │ │
+│  │ • 电商用户数据 (4个字段)                                       │ │
+│  │ • 电商订单数据 (6个字段)                                       │ │
+│  └───────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│  [导入]  [取消]                                                      │
+│                                                                     │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+**导入逻辑**:
+
+1. 解析 JSON 文件
+2. 验证格式是否正确
+3. 预览导入内容
+4. 确认后逐条导入
+5. 生成新 ID 避免冲突
+6. 处理导入结果（成功/失败数量）
+
+---
+
+## 存储机制
+
+### 本地存储
+
+使用 localStorage 存储规则数据:
+
+```typescript
+class RuleStorage {
+  private readonly STORAGE_KEY = 'testDataGenerator_rules';
+
+  // 获取所有规则
+  getAll(): DataRule[] {
+    const data = localStorage.getItem(this.STORAGE_KEY);
+    return data ? JSON.parse(data) : [];
+  }
+
+  // 保存规则
+  save(rule: DataRule): { success: boolean; message?: string } {
+    const rules = this.getAll();
+
+    // 规则数量限制：最多 20 条
+    const MAX_RULES = 20;
+    if (rules.length >= MAX_RULES) {
+      return {
+        success: false,
+        message: `已达到最大规则数量（${MAX_RULES}条），请删除一些规则后再保存`,
+      };
+    }
+
+    rules.push(rule);
+    localStorage.setItem(this.STORAGE_KEY, JSON.stringify(rules));
+    return { success: true };
+  }
+
+  // 更新规则
+  update(id: string, updates: Partial<DataRule>): void {
+    const rules = this.getAll();
+    const index = rules.findIndex((r) => r.id === id);
+    if (index !== -1) {
+      rules[index] = { ...rules[index], ...updates };
+      localStorage.setItem(this.STORAGE_KEY, JSON.stringify(rules));
+    }
+  }
+
+  // 删除规则
+  delete(id: string): void {
+    const rules = this.getAll();
+    const filtered = rules.filter((r) => r.id !== id);
+    localStorage.setItem(this.STORAGE_KEY, JSON.stringify(filtered));
+  }
+
+  // 记录使用
+  recordUse(id: string): void {
+    const rules = this.getAll();
+    const rule = rules.find((r) => r.id === id);
+    if (rule) {
+      rule.metadata.lastUsedAt = Date.now();
+      rule.metadata.useCount++;
+      localStorage.setItem(this.STORAGE_KEY, JSON.stringify(rules));
+    }
+  }
+}
+```
+
+### 存储限制
+
+- **规则数量限制**: 最多 20 条
+- localStorage 容量: 5-10MB（浏览器限制）
+- 单个规则约 1-5KB
+- 预计可存储 1000-5000 个规则（但受数量限制，最多 20 条）
+
+---
+
+## 功能亮点
+
+| 亮点     | 说明                           |
+| -------- | ------------------------------ |
+| 本地存储 | 数据保存在浏览器本地，无需后端 |
+| 快速复用 | 一键加载已保存的规则           |
+| 导入导出 | 支持 JSON 文件导入导出         |
+| 使用统计 | 记录使用次数和时间             |
+| 搜索筛选 | 支持关键词搜索                 |

docs/test-data-generator/ui-design.md

@@ -0,0 +1,489 @@
+# 界面设计
+
+## 设计原则
+
+1. **简洁直观** - 一目了然的布局
+2. **操作便捷** - 减少点击次数
+3. **实时反馈** - 配置即预览
+4. **响应式** - 支持多种屏幕尺寸
+
+---
+
+## 页面结构
+
+### 主页面布局
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│  🧪 测试数据生成器                                          [帮助] │
+├─────────────────────────────────────────────────────────────────────┤
+│                                                                     │
+│  ┌─────────────────────────────────────┐ ┌───────────────────────┐ │
+│  │  字段配置                             │ │  数据预览              │ │
+│  │                                     │ │                       │ │
+│  │  [+ 添加字段]                        │ │  [实时预览数据]       │ │
+│  │                                     │ │                       │ │
+│  │  字段列表...                         │ │                       │ │
+│  │                                     │ │                       │ │
+│  └─────────────────────────────────────┘ └───────────────────────┘ │
+│                                                                     │
+│  ┌───────────────────────────────────────────────────────────────┐ │
+│  │  生成选项                                                       │ │
+│  │  数量、格式、约束...                                          │ │
+│  └───────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│  ┌───────────────────────────────────────────────────────────────┐ │
+│  │  操作栏                                                     │ │
+│  │  [生成]  [保存规则]  [规则管理]                       │ │
+│  └───────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## 组件设计
+
+### 1. 字段列表组件
+
+**功能**: 展示和管理所有字段
+
+**界面**:
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│  字段配置                                                         │
+├─────────────────────────────────────────────────────────────────────┤
+│                                                                     │
+│  [+ 添加字段]                                                        │
+│                                                                     │
+│  ┌───────────────────────────────────────────────────────────────┐ │
+│  │ 1. name        [中文姓名 ▼]  [配置] [删除] [上移][下移]             │ │
+│  │ 2. email       [邮箱地址 ▼]  [配置] [删除] [上移][下移]             │ │
+│  │ 3. phone       [手机号   ▼]  [配置] [删除] [上移][下移]             │ │
+│  │ 4. age         [年龄     ▼]  [配置] [删除] [上移][下移]             │ │
+│  └───────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│  [+ 添加字段]                                                        │
+│                                                                     │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+**交互**:
+
+- 点击字段名可编辑
+- 点击生成器下拉框可切换生成器
+- 点击 配置 展开参数配置
+- 点击 删除 删除字段
+- 点击 上移下移 调整顺序
+
+---
+
+### 2. 字段配置组件
+
+**功能**: 配置单个字段的详细参数
+
+**界面**:
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│  字段配置                                                            │
+├─────────────────────────────────────────────────────────────────────┤
+│                                                                     │
+│  基础配置                                                        │
+│  ┌───────────────────────────────────────────────────────────────┐ │
+│  │ 字段名称:  [name                                         ]   │ │
+│  │ 字段描述:  [用户姓名                                     ]   │ │
+│  └───────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│  生成器选择                                                      │
+│  ┌───────────────────────────────────────────────────────────────┐ │
+│  │ 分类: [个人信息 ▼]                                         │   │
+│  │ 生成器: [中文姓名 ▼]                                        │   │
+│  │ 说明: 生成中文姓名，如张三、李四                           │   │
+│  └───────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│  参数配置                                                        │
+│  ┌───────────────────────────────────────────────────────────────┐ │
+│  │ 姓氏池: [百家姓前100 ▼]                                      │ │
+│  │ 名字长度: [1] ~ [2]                                          │ │
+│  │ ☑ 唯一性约束                                                 │ │
+│  │ ☑ 必填                                                       │ │
+│  └───────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│  空值率设置 (仅选填字段显示)                                       │
+│  ┌───────────────────────────────────────────────────────────────┐ │
+│  │ 空值概率: [====|----] 50%                                     │ │
+│  │ 预设: [低 20%] [中 50%] [高 80%]                              │ │
+│  └───────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│  预览示例                                                         │
+│  ┌───────────────────────────────────────────────────────────────┐ │
+│  │ 张伟, 李娜, 王强, 赵敏, 刘洋                                  │ │
+│  └───────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│  [保存]  [取消]                                                │
+│                                                                     │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+**交互说明**:
+
+- **必填复选框**: 勾选后该字段必填，100% 生成数据
+- **空值率设置**: 仅当选填时显示，控制该字段生成空值的概率
+- **预设按钮**: 快速设置常用空值率（低/中/高）
+- **空值率滑块**: 精细调节空值概率（0-100%）
+
+---
+
+### 3. 数据预览组件
+
+**功能**: 实时预览生成的数据
+
+**界面**:
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│  数据预览                                                         │
+├─────────────────────────────────────────────────────────────────────┤
+│                                                                     │
+│  预览: 前 10 条                                                   │
+│                                                                     │
+│  ┌───────────────────────────────────────────────────────────────┐ │
+│  │ {                                                             │ │
+│  │   "name": "张伟",                                             │ │
+│  │   "email": "zhangwei@qq.com",                                 │ │
+│  │   "phone": "13812345678",                                     │ │
+│  │   "age": 28                                                   │ │
+│  │ },                                                            │ │
+│  │ {                                                             │ │
+│  │   "name": "李娜",                                             │ │
+│  │   "email": "lina@163.com",                                    │ │
+│  │   "phone": "13987654321",                                     │ │
+│  │   "age": 35                                                   │ │
+│  │ },                                                            │ │
+│  │ ...                                                           │ │
+│  └───────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│  格式切换:                                                        │
+│  [JSON]  [CSV]                                                      │
+│                                                                     │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+**功能**:
+
+- 实时更新预览
+- 支持格式切换
+- 分页显示更多数据
+- 一键复制
+
+---
+
+### 4. 生成选项组件
+
+**功能**: 配置生成参数
+
+**界面**:
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│  生成选项                                                         │
+├─────────────────────────────────────────────────────────────────────┤
+│                                                                     │
+│  ┌─────────────────┐ ┌─────────────────┐ ┌───────────────────────┐ │
+│  │ 生成数量      │ │ 数据格式      │ │ 约束条件           │ │
+│  │                 │ │                 │ │                       │ │
+│  │ [100         ] │ │ ○ JSON          │ │ ☑ name 唯一          │ │
+│  │ [10 ▼]          │ │ ○ CSV           │ │ ☑ email 唯一         │ │
+│  │ [100 ▼]         │ │                 │ │ ☑ phone 唯一         │ │
+│  │ [自定义    ]  │ │                 │ │ ☐ age 唯一           │ │
+│  │                 │ │                 │ │                       │ │
+│  └─────────────────┘ └─────────────────┘ └───────────────────────┘ │
+│                                                                     │
+│  默认空值率 (选填字段)                                             │
+│  ┌───────────────────────────────────────────────────────────────┐ │
+│  │ 空值概率: [====|----] 50%                                     │ │
+│  │ 预设: [低 20%] [中 50%] [高 80%]                              │ │
+│  │ 说明: 未单独设置空值率的选填字段将使用此默认值                │ │
+│  └───────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+### 5. 操作栏组件
+
+**功能**: 顶部操作按钮
+
+**界面**:
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│  操作栏                                                           │
+├─────────────────────────────────────────────────────────────────────┤
+│                                                                     │
+│  [生成数据]  [保存规则]  [规则管理]  [导入规则]  [导出]│
+│                                                                     │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+### 6. 生成结果组件
+
+**功能**: 展示生成结果，包含成功、警告、错误三种状态
+
+**成功状态界面**:
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│  生成结果                                                         │
+├─────────────────────────────────────────────────────────────────────┤
+│                                                                     │
+│  生成完成                                                          │
+│  ┌───────────────────────────────────────────────────────────────┐ │
+│  │ [成功图标] 成功生成 100 条数据，耗时 1234ms                  │ │
+│  └───────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│  数据统计:                                                        │
+│  ┌───────────────────────────────────────────────────────────────┐ │
+│  │ • 总条数: 100                                                 │ │
+│  │ • 成功条数: 100                                               │ │
+│  │ • 失败条数: 0                                                 │ │
+│  │ • 文件大小: 12.5 KB                                           │ │
+│  └───────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│  数据预览:                                                        │
+│  ┌───────────────────────────────────────────────────────────────┐ │
+│  │ [JSON 格式预览...]                                            │ │
+│  └───────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│  导出选项:                                                        │
+│  ┌───────────────────────────────────────────────────────────────┐ │
+│  │ [复制全部]  [下载 JSON]  [下载 CSV]                           │ │
+│  └───────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│  [关闭]                                                           │
+│                                                                     │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+**警告状态界面（部分字段失败）**:
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│  生成结果                                                         │
+├─────────────────────────────────────────────────────────────────────┤
+│                                                                     │
+│  部分字段生成失败                                                  │
+│  ┌───────────────────────────────────────────────────────────────┐ │
+│  │ [警告图标] 有 2 个字段生成失败                               │ │
+│  └───────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│  失败详情:                                                        │
+│  ┌───────────────────────────────────────────────────────────────┐ │
+│  │ [警告图标] "phone" - 重试 100 次后仍存在重复                  │ │
+│  │ [警告图标] "email" - 重试 100 次后仍存在重复                  │ │
+│  │                                                               │ │
+│  │ 提示: 这些字段的值已设置为空，您可以尝试减少生成数量          │ │
+│  │       或调整字段配置                                          │ │
+│  └───────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│  数据统计:                                                        │
+│  ┌───────────────────────────────────────────────────────────────┐ │
+│  │ • 总条数: 100                                                 │ │
+│  │ • 成功条数: 98                                                │ │
+│  │ • 失败条数: 2                                                 │ │
+│  │ • 文件大小: 12.3 KB                                           │ │
+│  └───────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│  数据预览:                                                        │
+│  ┌───────────────────────────────────────────────────────────────┐ │
+│  │ [JSON 格式预览...]                                            │ │
+│  └───────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│  导出选项:                                                        │
+│  ┌───────────────────────────────────────────────────────────────┐ │
+│  │ [复制全部]  [下载 JSON]  [下载 CSV]                           │ │
+│  └───────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│  [关闭]                                                           │
+│                                                                     │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+**错误状态界面（生成失败）**:
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│  生成失败                                                         │
+├─────────────────────────────────────────────────────────────────────┤
+│                                                                     │
+│  ┌───────────────────────────────────────────────────────────────┐ │
+│  │ [错误图标] 生成过程中发生错误                                │ │
+│  └───────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│  错误详情:                                                        │
+│  ┌───────────────────────────────────────────────────────────────┐ │
+│  │                                                               │ │
+│  │  错误类型: 生成器不存在                                      │ │
+│  │  错误信息: 字段 "phone" 的生成器 "chinesePhone1" 不存在      │ │
+│  │  错误位置: 字段配置第 2 行                                   │ │
+│  │                                                               │ │
+│  │  建议操作:                                                   │ │
+│  │  1. 检查字段配置中的生成器名称是否正确                       │ │
+│  │  2. 确认该生成器已正确注册                                   │ │
+│  │                                                               │ │
+│  └───────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│  [重新配置]  [关闭]                                                │
+│                                                                     │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+### 6.1 Toast 提示组件
+
+**功能**: 显示临时提示信息
+
+**成功提示**:
+
+```
+┌─────────────────────────────────────┐
+│ [成功图标] 数据生成成功             │
+└─────────────────────────────────────┘
+```
+
+**警告提示**:
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│ [警告图标] 有 2 个字段生成失败：phone、email               │
+└─────────────────────────────────────────────────────────────┘
+```
+
+**错误提示**:
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│ [错误图标] 生成失败：生成器 "xxx" 不存在                   │
+└─────────────────────────────────────────────────────────────┘
+```
+
+---
+
+### 6.2 Modal 提示组件
+
+**功能**: 显示严重错误的模态框
+
+**错误模态框**:
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                                                             │
+│  ┌───────────────────────────────────────────────────────┐ │
+│  │                                                       │ │
+│  │  [错误图标] 生成失败                                  │ │
+│  │                                                       │ │
+│  │  字段 "phone" 的生成器 "chinesePhone1" 不存在        │ │
+│  │                                                       │ │
+│  │  请检查字段配置中的生成器名称是否正确                 │ │
+│  │                                                       │ │
+│  │  ─────────────────────────────────────────────────── │ │
+│  │                                                       │ │
+│  │                    [ 确定 ]                           │ │
+│  │                                                       │ │
+│  └───────────────────────────────────────────────────────┘ │
+│                                                             │
+└─────────────────────────────────────────────────────────────┘
+```
+
+---
+
+### 7. 规则管理组件
+
+**功能**: 管理已保存的规则
+
+**界面**:
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│  规则管理                                                         │
+├─────────────────────────────────────────────────────────────────────┤
+│                                                                     │
+│  搜索: [搜索规则名称...                                          ] │
+│                                                                     │
+│  规则列表:                                                        │
+│  ┌───────────────────────────────────────────────────────────────┐ │
+│  │ 电商用户数据 - 测试用                                       │ │
+│  │    用于测试用户注册功能                                     │ │
+│  │    4 个字段 | 100 条 | JSON                                │ │
+│  │    2024-01-15 创建 | 使用 12 次                           │ │
+│  │    [加载]  [编辑]  [导出]  [删除]                 │ │
+│  │                                                               │ │
+│  │ 电商订单数据 - 测试用                                       │ │
+│  │    用于测试订单功能                                         │ │
+│  │    6 个字段 | 500 条 | JSON                                │ │
+│  │    2024-01-16 创建 | 使用 8 次                            │ │
+│  │    [加载]  [编辑]  [导出]  [删除]                 │ │
+│  └───────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+│  [导入规则]  [导出全部]                                        │
+│                                                                     │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## 响应式设计
+
+### 桌面端 (>1024px)
+
+- 左右分栏布局
+- 字段配置区占 60%
+- 数据预览区占 40%
+
+---
+
+## 交互细节
+
+### 拖拽排序
+
+- 字段支持拖拽排序（基于 @dnd-kit/sortable）
+- 拖拽手柄（GripVertical 图标）位于字段左侧
+- 拖拽时显示半透明效果和阴影
+- 释放后立即生效，自动更新字段顺序
+
+### 实时预览
+
+- 配置参数时实时更新预览
+- 延迟 300ms 防抖，避免频繁重渲染
+- 预览最多显示 10 条示例数据
+- 生成完成后切换为完整结果预览
+
+### 虚拟列表
+
+- 数据量超过 100 条时自动启用虚拟滚动
+- 仅渲染可见区域的行，大幅减少 DOM 节点
+- 行高固定 20px，支持快速滚动
+
+---
+
+## 主题支持
+
+### 浅色主题
+
+- 背景色: #ffffff
+- 文字色: #333333
+- 边框色: #e0e0e0
+- 主题色: #3b82f6
+
+### 深色主题
+
+- 背景色: #1a1a1a
+- 文字色: #ffffff
+- 边框色: #404040
+- 主题色: #60a5fa

public/README.md

@@ -12,7 +12,6 @@
 | `icon/48.png`  | 48×48 图标（扩展管理页）         |
 | `icon/96.png`  | 96×96 图标                       |
 | `icon/128.png` | 128×128 图标（Chrome Web Store） |
-| `wxt.svg`      | WXT 框架标志 SVG 图标            |
 
 ## 注意事项
 

public/_locales/zh_CN/messages.json

@@ -7,7 +7,6 @@
     "message": "清理",
     "description": "Translation key: buttons_clear"
   },
-
   "messages_copySuccess": {
     "message": "已复制到剪贴板",
     "description": "Translation key: messages_copySuccess"
@@ -896,7 +895,6 @@
     "message": "在标签页打开",
     "description": "Translation key: buttons_openInTab"
   },
-
   "common_errorBoundary_title": {
     "message": "糟糕，出了点问题",
     "description": "Translation key: errorBoundary_title"
@@ -920,5 +918,387 @@
   "common_pageErrorBoundary_description": {
     "message": "该页面在加载或渲染时遇到了内部脚本错误。您可以尝试重试，或者通过导航菜单切换到其他工具。",
     "description": "Translation key: pageErrorBoundary_description"
+  },
+  "testDataGenerator_title": {
+    "message": "测试数据生成器",
+    "description": "Translation key: testDataGenerator_title"
+  },
+  "testDataGenerator_description": {
+    "message": "自定义字段配置，批量生成测试数据",
+    "description": "Translation key: testDataGenerator_description"
+  },
+  "testDataGenerator_fields": {
+    "message": "字段",
+    "description": "Translation key: testDataGenerator_fields"
+  },
+  "testDataGenerator_addField": {
+    "message": "添加字段",
+    "description": "Translation key: testDataGenerator_addField"
+  },
+  "testDataGenerator_noFields": {
+    "message": "暂无字段",
+    "description": "Translation key: testDataGenerator_noFields"
+  },
+  "testDataGenerator_addFieldHint": {
+    "message": "点击上方按钮添加第一个字段",
+    "description": "Translation key: testDataGenerator_addFieldHint"
+  },
+  "testDataGenerator_unique": {
+    "message": "唯一",
+    "description": "Translation key: testDataGenerator_unique"
+  },
+  "testDataGenerator_fieldName": {
+    "message": "字段名称",
+    "description": "Translation key: testDataGenerator_fieldName"
+  },
+  "testDataGenerator_fieldNamePlaceholder": {
+    "message": "请输入字段名称",
+    "description": "Translation key: testDataGenerator_fieldNamePlaceholder"
+  },
+  "testDataGenerator_fieldDescription": {
+    "message": "字段描述",
+    "description": "Translation key: testDataGenerator_fieldDescription"
+  },
+  "testDataGenerator_fieldDescriptionPlaceholder": {
+    "message": "可选，添加字段说明",
+    "description": "Translation key: testDataGenerator_fieldDescriptionPlaceholder"
+  },
+  "testDataGenerator_required": {
+    "message": "必填",
+    "description": "Translation key: testDataGenerator_required"
+  },
+  "testDataGenerator_nullRate": {
+    "message": "空值率",
+    "description": "Translation key: testDataGenerator_nullRate"
+  },
+  "testDataGenerator_uniqueConstraint": {
+    "message": "唯一性约束",
+    "description": "Translation key: testDataGenerator_uniqueConstraint"
+  },
+  "testDataGenerator_generator": {
+    "message": "数据生成器",
+    "description": "Translation key: testDataGenerator_generator"
+  },
+  "testDataGenerator_generatorParams": {
+    "message": "生成器参数",
+    "description": "Translation key: testDataGenerator_generatorParams"
+  },
+  "testDataGenerator_searchGenerator": {
+    "message": "搜索生成器...",
+    "description": "Translation key: testDataGenerator_searchGenerator"
+  },
+  "testDataGenerator_searchResults": {
+    "message": "搜索结果",
+    "description": "Translation key: testDataGenerator_searchResults"
+  },
+  "testDataGenerator_fieldConfig": {
+    "message": "字段配置",
+    "description": "Translation key: testDataGenerator_fieldConfig"
+  },
+  "testDataGenerator_ruleManagement": {
+    "message": "规则管理",
+    "description": "Translation key: testDataGenerator_ruleManagement"
+  },
+  "testDataGenerator_selectFieldToEdit": {
+    "message": "选择左侧字段进行编辑",
+    "description": "Translation key: testDataGenerator_selectFieldToEdit"
+  },
+  "testDataGenerator_count": {
+    "message": "生成数量",
+    "description": "Translation key: testDataGenerator_count"
+  },
+  "testDataGenerator_format": {
+    "message": "数据格式",
+    "description": "Translation key: testDataGenerator_format"
+  },
+  "testDataGenerator_generate": {
+    "message": "生成数据",
+    "description": "Translation key: testDataGenerator_generate"
+  },
+  "testDataGenerator_cancel": {
+    "message": "取消",
+    "description": "Translation key: testDataGenerator_cancel"
+  },
+  "testDataGenerator_progress": {
+    "message": "已生成 {{current}} / {{total}} 条",
+    "description": "Translation key: testDataGenerator_progress"
+  },
+  "testDataGenerator_estimatedTime": {
+    "message": "预计剩余 {{time}} 秒",
+    "description": "Translation key: testDataGenerator_estimatedTime"
+  },
+  "testDataGenerator_dataPreview": {
+    "message": "数据预览",
+    "description": "Translation key: testDataGenerator_dataPreview"
+  },
+  "testDataGenerator_noData": {
+    "message": "暂无数据",
+    "description": "Translation key: testDataGenerator_noData"
+  },
+  "testDataGenerator_noDataHint": {
+    "message": "配置字段后点击「生成数据」按钮",
+    "description": "Translation key: testDataGenerator_noDataHint"
+  },
+  "testDataGenerator_sampleData": {
+    "message": "示例数据",
+    "description": "Translation key: testDataGenerator_sampleData"
+  },
+  "testDataGenerator_copied": {
+    "message": "已复制",
+    "description": "Translation key: testDataGenerator_copied"
+  },
+  "testDataGenerator_copy": {
+    "message": "复制",
+    "description": "Translation key: testDataGenerator_copy"
+  },
+  "testDataGenerator_pageInfo": {
+    "message": "第 {{current}} / {{total}} 页",
+    "description": "Translation key: testDataGenerator_pageInfo"
+  },
+  "testDataGenerator_prevPage": {
+    "message": "上一页",
+    "description": "Translation key: testDataGenerator_prevPage"
+  },
+  "testDataGenerator_nextPage": {
+    "message": "下一页",
+    "description": "Translation key: testDataGenerator_nextPage"
+  },
+  "testDataGenerator_success": {
+    "message": "生成成功",
+    "description": "Translation key: testDataGenerator_success"
+  },
+  "testDataGenerator_generateSuccess": {
+    "message": "生成完成",
+    "description": "Translation key: testDataGenerator_generateSuccess"
+  },
+  "testDataGenerator_records": {
+    "message": "条数据",
+    "description": "Translation key: testDataGenerator_records"
+  },
+  "testDataGenerator_partialSuccess": {
+    "message": "部分成功",
+    "description": "Translation key: testDataGenerator_partialSuccess"
+  },
+  "testDataGenerator_failed": {
+    "message": "生成失败",
+    "description": "Translation key: testDataGenerator_failed"
+  },
+  "testDataGenerator_totalCount": {
+    "message": "总条数",
+    "description": "Translation key: testDataGenerator_totalCount"
+  },
+  "testDataGenerator_successCount": {
+    "message": "成功",
+    "description": "Translation key: testDataGenerator_successCount"
+  },
+  "testDataGenerator_duration": {
+    "message": "耗时",
+    "description": "Translation key: testDataGenerator_duration"
+  },
+  "testDataGenerator_warnings": {
+    "message": "警告",
+    "description": "Translation key: testDataGenerator_warnings"
+  },
+  "testDataGenerator_moreWarnings": {
+    "message": "还有 {{count}} 条警告",
+    "description": "Translation key: testDataGenerator_moreWarnings"
+  },
+  "testDataGenerator_export": {
+    "message": "导出数据",
+    "description": "Translation key: testDataGenerator_export"
+  },
+  "testDataGenerator_copyJSON": {
+    "message": "复制 JSON",
+    "description": "Translation key: testDataGenerator_copyJSON"
+  },
+  "testDataGenerator_copyCSV": {
+    "message": "复制 CSV",
+    "description": "Translation key: testDataGenerator_copyCSV"
+  },
+  "testDataGenerator_downloadJSON": {
+    "message": "下载 JSON",
+    "description": "Translation key: testDataGenerator_downloadJSON"
+  },
+  "testDataGenerator_downloadCSV": {
+    "message": "下载 CSV",
+    "description": "Translation key: testDataGenerator_downloadCSV"
+  },
+  "testDataGenerator_saveRule": {
+    "message": "保存规则",
+    "description": "Translation key: testDataGenerator_saveRule"
+  },
+  "testDataGenerator_import": {
+    "message": "导入",
+    "description": "Translation key: testDataGenerator_import"
+  },
+  "testDataGenerator_exportRules": {
+    "message": "导出规则",
+    "description": "Translation key: testDataGenerator_exportRules"
+  },
+  "testDataGenerator_ruleCount": {
+    "message": "已保存 {{count}}/{{max}} 条",
+    "description": "Translation key: testDataGenerator_ruleCount"
+  },
+  "testDataGenerator_searchRules": {
+    "message": "搜索规则...",
+    "description": "Translation key: testDataGenerator_searchRules"
+  },
+  "testDataGenerator_saveNewRule": {
+    "message": "保存新规则",
+    "description": "Translation key: testDataGenerator_saveNewRule"
+  },
+  "testDataGenerator_ruleNamePlaceholder": {
+    "message": "规则名称",
+    "description": "Translation key: testDataGenerator_ruleNamePlaceholder"
+  },
+  "testDataGenerator_ruleDescPlaceholder": {
+    "message": "规则描述（可选）",
+    "description": "Translation key: testDataGenerator_ruleDescPlaceholder"
+  },
+  "testDataGenerator_confirm": {
+    "message": "确认",
+    "description": "Translation key: testDataGenerator_confirm"
+  },
+  "testDataGenerator_done": {
+    "message": "完成",
+    "description": "Translation key: testDataGenerator_done"
+  },
+  "testDataGenerator_noSearchResults": {
+    "message": "未找到匹配的规则",
+    "description": "Translation key: testDataGenerator_noSearchResults"
+  },
+  "testDataGenerator_noRules": {
+    "message": "暂无保存的规则",
+    "description": "Translation key: testDataGenerator_noRules"
+  },
+  "testDataGenerator_usedTimes": {
+    "message": "使用 {{count}} 次",
+    "description": "Translation key: testDataGenerator_usedTimes"
+  },
+  "testDataGenerator_load": {
+    "message": "加载",
+    "description": "Translation key: testDataGenerator_load"
+  },
+  "testDataGenerator_duplicate": {
+    "message": "复制",
+    "description": "Translation key: testDataGenerator_duplicate"
+  },
+  "testDataGenerator_delete": {
+    "message": "删除",
+    "description": "Translation key: testDataGenerator_delete"
+  },
+  "testDataGenerator_virtualMode": {
+    "message": "虚拟列表模式（共 $ 行）"
+  },
+  "testDataGenerator_totalRows": {
+    "message": "共 $ 条数据"
+  },
+  "testDataGenerator_ruleSaved": {
+    "message": "规则已保存",
+    "description": "Translation key: testDataGenerator_ruleSaved"
+  },
+  "testDataGenerator_ruleLoaded": {
+    "message": "已加载规则「{{name}}」",
+    "description": "Translation key: testDataGenerator_ruleLoaded"
+  },
+  "testDataGenerator_ruleDeleted": {
+    "message": "规则已删除",
+    "description": "Translation key: testDataGenerator_ruleDeleted"
+  },
+  "testDataGenerator_ruleDuplicated": {
+    "message": "规则已复制",
+    "description": "Translation key: testDataGenerator_ruleDuplicated"
+  },
+  "testDataGenerator_exportSuccess": {
+    "message": "规则已导出",
+    "description": "Translation key: testDataGenerator_exportSuccess"
+  },
+  "testDataGenerator_importSuccess": {
+    "message": "成功导入 {{count}} 条规则",
+    "description": "Translation key: testDataGenerator_importSuccess"
+  },
+  "testDataGenerator_importFailed": {
+    "message": "{{count}} 条规则导入失败",
+    "description": "Translation key: testDataGenerator_importFailed"
+  },
+  "testDataGenerator_confirmDeleteTitle": {
+    "message": "确认删除规则",
+    "description": "Translation key: testDataGenerator_confirmDeleteTitle"
+  },
+  "testDataGenerator_confirmDeleteDescription": {
+    "message": "确定要删除规则「{{name}}」吗？此操作不可撤销。",
+    "description": "Translation key: testDataGenerator_confirmDeleteDescription"
+  },
+  "testDataGenerator_ruleNameDuplicate": {
+    "message": "已存在同名规则，是否覆盖保存？",
+    "description": "Translation key: testDataGenerator_ruleNameDuplicate"
+  },
+  "testDataGenerator_overwrite": {
+    "message": "覆盖",
+    "description": "Translation key: testDataGenerator_overwrite"
+  },
+  "testDataGenerator_edit": {
+    "message": "编辑",
+    "description": "Translation key: testDataGenerator_edit"
+  },
+  "testDataGenerator_ruleUpdated": {
+    "message": "规则已更新",
+    "description": "Translation key: testDataGenerator_ruleUpdated"
+  },
+  "testDataGenerator_editing": {
+    "message": "编辑中",
+    "description": "Translation key: testDataGenerator_editing"
+  },
+  "testDataGenerator_editingRule": {
+    "message": "正在编辑规则「{{name}}」",
+    "description": "Translation key: testDataGenerator_editingRule"
+  },
+  "testDataGenerator_updateRule": {
+    "message": "更新规则",
+    "description": "Translation key: testDataGenerator_updateRule"
+  },
+  "testDataGenerator_saveAs": {
+    "message": "另存为",
+    "description": "Translation key: testDataGenerator_saveAs"
+  },
+  "testDataGenerator_noGeneratorParams": {
+    "message": "此生成器无可配置参数",
+    "description": "Translation key: testDataGenerator_noGeneratorParams"
+  },
+  "testDataGenerator_enabled": {
+    "message": "启用",
+    "description": "Translation key: testDataGenerator_enabled"
+  },
+  "testDataGenerator_disabled": {
+    "message": "禁用",
+    "description": "Translation key: testDataGenerator_disabled"
+  },
+  "testDataGenerator_commaSeparated": {
+    "message": "用逗号分隔多个值",
+    "description": "Translation key: testDataGenerator_commaSeparated"
+  },
+  "testDataGenerator_copySuccess": {
+    "message": "已复制到剪贴板",
+    "description": "Translation key: testDataGenerator_copySuccess"
+  },
+  "testDataGenerator_copyFailed": {
+    "message": "复制失败",
+    "description": "Translation key: testDataGenerator_copyFailed"
+  },
+  "testDataGenerator_fieldNameEmpty": {
+    "message": "字段名称不能为空",
+    "description": "Translation key: testDataGenerator_fieldNameEmpty"
+  },
+  "testDataGenerator_fieldNameDuplicate": {
+    "message": "字段名称已存在",
+    "description": "Translation key: testDataGenerator_fieldNameDuplicate"
+  },
+  "testDataGenerator_fieldNameInvalid": {
+    "message": "字段名称只能包含字母、数字和下划线",
+    "description": "Translation key: testDataGenerator_fieldNameInvalid"
+  },
+  "testDataGenerator_ruleCopySuffix": {
+    "message": "（副本）",
+    "description": "Translation key: testDataGenerator_ruleCopySuffix"
   }
 }

src/components/CopyButton.tsx

@@ -53,6 +53,7 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
       type="button"
       onClick={handleCopy}
       title={tooltip ?? t('buttons.copy')}
+      aria-label={tooltip ?? t('buttons.copy')}
       className={cn(
         buttonVariants({ variant, size }),
         copied &&
@@ -62,7 +63,7 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
       {...props}
     >
       {copied ? (
-        <Check className="h-[1.2em] w-[1.2em] animate-in fade-in zoom-in-75 duration-200" />
+        <Check className="h-[1.2em] w-[1.2em]" />
       ) : (
         <Copy className="h-[1.2em] w-[1.2em]" />
       )}

src/components/__tests__/CopyButton.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/components/__tests__/ToolCard.test.tsx

@@ -1,118 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { act, fireEvent, render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import ToolCard from '@/pages/Dashboard/ToolCard';
-import { Clock } from 'lucide-react';
-
-describe('ToolCard 组件', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  describe('渲染测试', () => {
-    it('应渲染标题和描述', () => {
-      render(
-        <ToolCard
-          title="测试工具"
-          description="这是一个测试工具"
-          colorKey="primary"
-          icon={Clock}
-          onNavigate={() => {}}
-        />,
-      );
-
-      expect(screen.getByText('测试工具')).toBeInTheDocument();
-      expect(screen.getByText('这是一个测试工具')).toBeInTheDocument();
-    });
-
-    it('无描述时仅渲染标题', () => {
-      render(<ToolCard title="仅标题" colorKey="primary" icon={Clock} onNavigate={() => {}} />);
-
-      expect(screen.getByText('仅标题')).toBeInTheDocument();
-    });
-
-    it('应渲染图标', () => {
-      const { container } = render(
-        <ToolCard title="带图标" colorKey="primary" icon={Clock} onNavigate={() => {}} />,
-      );
-
-      const svgElement = container.querySelector('svg');
-      expect(svgElement).toBeInTheDocument();
-    });
-
-    it('提供快照内容时应渲染快照', () => {
-      render(
-        <ToolCard
-          title="带快照"
-          colorKey="primary"
-          icon={Clock}
-          onNavigate={() => {}}
-          snapshot={<div data-testid="snapshot">快照内容</div>}
-        />,
-      );
-
-      expect(screen.getByTestId('snapshot')).toBeInTheDocument();
-    });
-
-    it('未提供快照时不渲染快照区域', () => {
-      const { container } = render(
-        <ToolCard
-          title="无快照"
-          colorKey="primary"
-          icon={Clock}
-          onClick={() => {}}
-          onNavigate={function (): void {
-            throw new Error('Function not implemented.');
-          }}
-        />,
-      );
-
-      expect(container.querySelector('[data-testid="snapshot"]')).not.toBeInTheDocument();
-    });
-
-    it('应使用 CardActionArea 渲染，支持键盘聚焦', () => {
-      render(<ToolCard title="可聚焦" colorKey="primary" icon={Clock} onNavigate={() => {}} />);
-
-      const button = screen.getByRole('button', { name: /可聚焦/ });
-      expect(button).toBeInTheDocument();
-    });
-  });
-
-  describe('交互测试', () => {
-    it('点击时应调用 onClick', () => {
-      const handleClick = vi.fn();
-      render(<ToolCard title="可点击" colorKey="primary" icon={Clock} onNavigate={handleClick} />);
-
-      const button = screen.getByRole('button', { name: /可点击/ });
-      fireEvent.click(button);
-
-      expect(handleClick).toHaveBeenCalledTimes(1);
-    });
-
-    it('按 Enter 键时应调用 onClick', async () => {
-      const handleClick = vi.fn();
-      render(
-        <ToolCard title="键盘可触发" colorKey="primary" icon={Clock} onNavigate={handleClick} />,
-      );
-
-      const button = screen.getByRole('button', { name: /键盘可触发/ });
-      await act(async () => {
-        button.focus();
-        await userEvent.keyboard('{Enter}');
-      });
-
-      expect(handleClick).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  describe('样式测试', () => {
-    it('应应用自定义颜色代码', () => {
-      const { container } = render(
-        <ToolCard title="自定义颜色" colorKey="warning" icon={Clock} onNavigate={() => {}} />,
-      );
-
-      const svgElement = container.querySelector('svg');
-      expect(svgElement).toBeInTheDocument();
-    });
-  });
-});

src/components/ui/dialog.tsx

@@ -26,10 +26,16 @@ const DialogOverlay = React.forwardRef<
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
+interface DialogContentProps extends React.ComponentPropsWithoutRef<
+  typeof DialogPrimitive.Content
+> {
+  showCloseButton?: boolean;
+}
+
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+  DialogContentProps
->(({ className, children, ...props }, ref) => (
+>(({ className, children, showCloseButton = true, ...props }, ref) => (
   <DialogPortal>
     <DialogOverlay />
     <DialogPrimitive.Content
@@ -41,10 +47,12 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+      {showCloseButton && (
-        <X className="h-4 w-4" />
+        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <span className="sr-only">Close</span>
+          <X className="h-4 w-4" />
-      </DialogPrimitive.Close>
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      )}
     </DialogPrimitive.Content>
   </DialogPortal>
 ));

src/components/ui/sonner.tsx

@@ -0,0 +1,26 @@
+import { Toaster as Sonner } from 'sonner';
+import { useThemeMode } from '@/providers/ThemeModeProvider';
+
+type ToasterProps = React.ComponentProps<typeof Sonner>;
+
+export function Toaster(props: ToasterProps) {
+  const { resolvedMode } = useThemeMode();
+
+  return (
+    <Sonner
+      theme={resolvedMode}
+      className="toaster group"
+      position="bottom-center"
+      toastOptions={{
+        classNames: {
+          toast:
+            'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+          description: 'group-[.toast]:text-muted-foreground',
+          actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+          cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
+        },
+      }}
+      {...props}
+    />
+  );
+}

src/config/__tests__/features.test.ts

@@ -9,8 +9,8 @@ import {
 
 describe('features', () => {
   describe('FEATURES', () => {
-    it('should have 9 features defined', () => {
+    it('should have 10 features defined', () => {
-      expect(FEATURES).toHaveLength(9);
+      expect(FEATURES).toHaveLength(10);
     });
 
     it('should have all required properties for each feature', () => {
@@ -95,7 +95,7 @@ describe('features', () => {
   describe('getAllFeatureKeys', () => {
     it('should return all feature keys', () => {
       const allKeys = getAllFeatureKeys();
-      expect(allKeys).toHaveLength(9);
+      expect(allKeys).toHaveLength(10);
       expect(allKeys).toContain('dashboard');
       expect(allKeys).toContain('timestamp');
       expect(allKeys).toContain('storageCleaner');
@@ -105,6 +105,7 @@ describe('features', () => {
       expect(allKeys).toContain('jsonDiff');
       expect(allKeys).toContain('base64Converter');
       expect(allKeys).toContain('rightClickRestorer');
+      expect(allKeys).toContain('testDataGenerator');
     });
   });
 
@@ -121,9 +122,9 @@ describe('features', () => {
       expect(pageOrder).toContain('qrCode');
     });
 
-    it('should have 8 items in page order', () => {
+    it('should have 9 items in page order', () => {
       const pageOrder = getDefaultPageOrder();
-      expect(pageOrder).toHaveLength(8);
+      expect(pageOrder).toHaveLength(9);
     });
   });
 });

src/config/features.tsx

@@ -10,6 +10,7 @@ import {
   GitCompareArrows,
   ArrowLeftRight,
   MousePointerClick,
+  FileSpreadsheet,
 } from 'lucide-react';
 
 export type PaletteColorKey = 'primary' | 'success' | 'warning' | 'error' | 'secondary' | 'info';
@@ -24,6 +25,7 @@ const JwtPage = lazy(() => import('@/pages/Jwt'));
 const JsonToolsPage = lazy(() => import('@/pages/JsonTools'));
 const Base64ConverterPage = lazy(() => import('@/pages/Base64Converter'));
 const RightClickRestorerPage = lazy(() => import('@/pages/RightClickRestorer'));
+const TestDataGeneratorPage = lazy(() => import('@/pages/TestDataGenerator'));
 
 export interface FeatureConfig {
   key: PageType;
@@ -155,6 +157,19 @@ export const FEATURES: FeatureConfig[] = [
       tab: RightClickRestorerPage,
     },
   },
+  {
+    key: 'testDataGenerator',
+    labelKey: 'testDataGenerator_title',
+    descriptionKey: 'testDataGenerator_description',
+    themeColorKey: 'warning',
+    icon: FileSpreadsheet,
+    defaultVisible: true,
+    components: {
+      popup: TestDataGeneratorPage,
+      sidepanel: TestDataGeneratorPage,
+      tab: TestDataGeneratorPage,
+    },
+  },
 ];
 
 export function getFeatureByKey(key: PageType): FeatureConfig | undefined {

src/entrypoints/content/uiPopover.ts

@@ -161,7 +161,7 @@ function positionPopover(popover: HTMLElement, x: number, y: number): void {
 
 let hideTimeout: ReturnType<typeof setTimeout> | null = null;
 
-export function showPopover(
+function showPopover(
   x: number,
   y: number,
   contentHtml: string,

src/lib/generators/basic.ts

@@ -0,0 +1,227 @@
+/**
+ * 基础类型生成器
+ * 包含：随机整数、随机浮点数、随机字符串、从列表选择
+ */
+
+import type { GeneratorDefinition } from '@/types/testDataGenerator';
+
+/**
+ * 生成随机整数
+ */
+function randomInt(min: number, max: number): number {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+/**
+ * 从数组中随机选择
+ */
+function randomPick<T>(arr: T[]): T {
+  return arr[Math.floor(Math.random() * arr.length)];
+}
+
+/**
+ * 随机整数生成器
+ */
+export const randomIntGenerator: GeneratorDefinition = {
+  id: 'randomInt',
+  name: '随机整数',
+  description: '生成指定范围内的随机整数',
+  categoryId: 'basic',
+  params: [
+    {
+      key: 'min',
+      label: '最小值',
+      type: 'number',
+      defaultValue: 0,
+      description: '整数最小值',
+    },
+    {
+      key: 'max',
+      label: '最大值',
+      type: 'number',
+      defaultValue: 100,
+      description: '整数最大值',
+    },
+  ],
+  generate: (params) => {
+    const min = (params.min as number) || 0;
+    const max = (params.max as number) || 100;
+    return String(randomInt(min, max));
+  },
+  generateAtIndex: (params, index) => {
+    const min = (params.min as number) || 0;
+    const max = (params.max as number) || 100;
+    const range = max - min + 1;
+    return String(min + (index % range));
+  },
+};
+
+/**
+ * 随机浮点数生成器
+ */
+export const randomFloat: GeneratorDefinition = {
+  id: 'randomFloat',
+  name: '随机浮点数',
+  description: '生成指定范围内的随机浮点数',
+  categoryId: 'basic',
+  params: [
+    {
+      key: 'min',
+      label: '最小值',
+      type: 'number',
+      defaultValue: 0,
+      description: '浮点数最小值',
+    },
+    {
+      key: 'max',
+      label: '最大值',
+      type: 'number',
+      defaultValue: 100,
+      description: '浮点数最大值',
+    },
+    {
+      key: 'decimals',
+      label: '小数位数',
+      type: 'number',
+      defaultValue: 2,
+      min: 0,
+      max: 10,
+      description: '小数位数',
+    },
+  ],
+  generate: (params) => {
+    const min = (params.min as number) || 0;
+    const max = (params.max as number) || 100;
+    const decimals = (params.decimals as number) ?? 2;
+    const value = min + Math.random() * (max - min);
+    return value.toFixed(decimals);
+  },
+};
+
+/**
+ * 随机字符串生成器
+ */
+export const randomString: GeneratorDefinition = {
+  id: 'randomString',
+  name: '随机字符串',
+  description: '生成指定长度的随机字符串',
+  categoryId: 'basic',
+  params: [
+    {
+      key: 'length',
+      label: '字符串长度',
+      type: 'number',
+      defaultValue: 10,
+      min: 1,
+      max: 100,
+      description: '字符串长度',
+    },
+    {
+      key: 'charset',
+      label: '字符集',
+      type: 'select',
+      defaultValue: 'alphanumeric',
+      description: '使用的字符集',
+      options: [
+        { label: '字母数字', value: 'alphanumeric' },
+        { label: '仅字母', value: 'alpha' },
+        { label: '仅数字', value: 'numeric' },
+        { label: '小写字母', value: 'lowercase' },
+        { label: '大写字母', value: 'uppercase' },
+        { label: '十六进制', value: 'hex' },
+        { label: 'Base64', value: 'base64' },
+      ],
+    },
+  ],
+  generate: (params) => {
+    const length = (params.length as number) || 10;
+    const charset = (params.charset as string) || 'alphanumeric';
+
+    const charsets: Record<string, string> = {
+      alphanumeric: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789',
+      alpha: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz',
+      numeric: '0123456789',
+      lowercase: 'abcdefghijklmnopqrstuvwxyz',
+      uppercase: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
+      hex: '0123456789abcdef',
+      base64: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=',
+    };
+
+    const chars = charsets[charset] || charsets.alphanumeric;
+    let result = '';
+    for (let i = 0; i < length; i++) {
+      result += chars.charAt(Math.floor(Math.random() * chars.length));
+    }
+    return result;
+  },
+  generateAtIndex: (params, index) => {
+    const length = (params.length as number) || 10;
+    const charset = (params.charset as string) || 'alphanumeric';
+
+    const charsets: Record<string, string> = {
+      alphanumeric: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789',
+      alpha: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz',
+      numeric: '0123456789',
+      lowercase: 'abcdefghijklmnopqrstuvwxyz',
+      uppercase: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
+      hex: '0123456789abcdef',
+      base64: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=',
+    };
+
+    const chars = charsets[charset] || charsets.alphanumeric;
+    const base = String(index).padStart(length, '0');
+    let result = '';
+    for (let i = 0; i < length; i++) {
+      const charIndex = parseInt(base[i]) || 0;
+      result += chars[charIndex % chars.length];
+    }
+    return result;
+  },
+};
+
+/**
+ * 从列表选择生成器
+ */
+export const fromList: GeneratorDefinition = {
+  id: 'fromList',
+  name: '从列表选择',
+  description: '从自定义列表中随机选择',
+  categoryId: 'basic',
+  params: [
+    {
+      key: 'values',
+      label: '列表值',
+      type: 'string',
+      defaultValue: '',
+      description: '列表值，用逗号分隔',
+      placeholder: '值1,值2,值3',
+    },
+    {
+      key: 'allowDuplicate',
+      label: '允许重复',
+      type: 'boolean',
+      defaultValue: true,
+      description: '是否允许重复选择',
+    },
+  ],
+  generate: (params) => {
+    const valuesStr = (params.values as string) || '';
+    const values = valuesStr
+      .split(',')
+      .map((v) => v.trim())
+      .filter((v) => v);
+
+    if (values.length === 0) {
+      return '（请配置列表值）';
+    }
+
+    return randomPick(values);
+  },
+};
+
+export const basicGenerators: GeneratorDefinition[] = [
+  randomIntGenerator,
+  randomFloat,
+  randomString,
+  fromList,
+];

src/lib/generators/business.ts

@@ -0,0 +1,561 @@
+/**
+ * 业务数据生成器
+ * 包含：订单号、价格、日期、状态、数量、评分、折扣、库存
+ */
+
+import type { GeneratorDefinition } from '@/types/testDataGenerator';
+
+/**
+ * 生成随机整数
+ */
+function randomInt(min: number, max: number): number {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+/**
+ * 从数组中随机选择
+ */
+function randomPick<T>(arr: T[]): T {
+  return arr[Math.floor(Math.random() * arr.length)];
+}
+
+/**
+ * 格式化日期
+ */
+function formatDate(date: Date, format: string): string {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+  const seconds = String(date.getSeconds()).padStart(2, '0');
+
+  return format
+    .replace('YYYY', String(year))
+    .replace('MM', month)
+    .replace('DD', day)
+    .replace('HH', hours)
+    .replace('mm', minutes)
+    .replace('ss', seconds);
+}
+
+/**
+ * 订单号生成器
+ */
+export const orderId: GeneratorDefinition = {
+  id: 'orderId',
+  name: '订单号',
+  description: '生成随机订单号',
+  categoryId: 'business',
+  params: [
+    {
+      key: 'prefix',
+      label: '前缀',
+      type: 'string',
+      defaultValue: 'ORD',
+      description: '订单号前缀',
+      placeholder: '请输入前缀',
+    },
+    {
+      key: 'length',
+      label: '数字长度',
+      type: 'number',
+      defaultValue: 10,
+      min: 6,
+      max: 20,
+      description: '订单号数字部分长度',
+    },
+  ],
+  generate: (params) => {
+    const prefix = (params.prefix as string) || 'ORD';
+    const length = (params.length as number) || 10;
+    const maxNum = Math.pow(10, length) - 1;
+    const num = String(randomInt(0, maxNum)).padStart(length, '0');
+    return `${prefix}${num}`;
+  },
+  generateAtIndex: (params, index) => {
+    const prefix = (params.prefix as string) || 'ORD';
+    const length = (params.length as number) || 10;
+    const num = String(index + 1).padStart(length, '0');
+    return `${prefix}${num}`;
+  },
+};
+
+/**
+ * 价格生成器
+ */
+export const price: GeneratorDefinition = {
+  id: 'price',
+  name: '价格',
+  description: '生成随机价格',
+  categoryId: 'business',
+  params: [
+    {
+      key: 'min',
+      label: '最低价格',
+      type: 'number',
+      defaultValue: 1,
+      min: 0,
+      description: '价格最小值',
+    },
+    {
+      key: 'max',
+      label: '最高价格',
+      type: 'number',
+      defaultValue: 1000,
+      min: 0,
+      description: '价格最大值',
+    },
+    {
+      key: 'decimals',
+      label: '小数位数',
+      type: 'number',
+      defaultValue: 2,
+      min: 0,
+      max: 4,
+      description: '价格小数位数',
+    },
+    {
+      key: 'strategy',
+      label: '生成策略',
+      type: 'select',
+      defaultValue: 'random',
+      description: '价格生成策略',
+      options: [
+        { label: '随机', value: 'random' },
+        { label: '心理定价', value: 'psychological' },
+        { label: '真实分布', value: 'realistic' },
+      ],
+    },
+    {
+      key: 'currency',
+      label: '货币符号',
+      type: 'string',
+      defaultValue: '¥',
+      description: '货币符号',
+    },
+  ],
+  generate: (params) => {
+    const min = (params.min as number) || 1;
+    const max = (params.max as number) || 1000;
+    const decimals = (params.decimals as number) ?? 2;
+    const strategy = (params.strategy as string) || 'random';
+    const currency = (params.currency as string) || '¥';
+
+    let value: number;
+    if (strategy === 'psychological') {
+      value = generatePsychologicalPrice(min, max);
+    } else if (strategy === 'realistic') {
+      value = generateRealisticPrice(min, max);
+    } else {
+      value = min + Math.random() * (max - min);
+    }
+
+    return `${currency}${value.toFixed(decimals)}`;
+  },
+};
+
+/**
+ * 生成心理定价（如 9.99, 19.9, 99）
+ */
+function generatePsychologicalPrice(min: number, max: number): number {
+  const patterns = [
+    () => {
+      const base = randomInt(Math.ceil(min), Math.floor(max / 10));
+      return base * 10 - 0.01;
+    },
+    () => {
+      const base = randomInt(Math.ceil(min / 10), Math.floor(max / 10));
+      return base * 10 - 1;
+    },
+    () => {
+      const base = randomInt(Math.ceil(min / 100), Math.floor(max / 100));
+      return base * 100 - 1;
+    },
+  ];
+
+  let price = randomPick(patterns)();
+  if (price < min) price = min;
+  if (price > max) price = max;
+  return price;
+}
+
+/**
+ * 生成真实分布价格（对数正态分布）
+ */
+function generateRealisticPrice(min: number, max: number): number {
+  const mean = (Math.log(min) + Math.log(max)) / 2;
+  const stdDev = (Math.log(max) - Math.log(min)) / 4;
+  let u = 0,
+    v = 0;
+  while (u === 0) u = Math.random();
+  while (v === 0) v = Math.random();
+  const num = Math.sqrt(-2.0 * Math.log(u)) * Math.cos(2.0 * Math.PI * v);
+  const value = Math.exp(mean + num * stdDev);
+  return Math.max(min, Math.min(max, value));
+}
+
+/**
+ * 日期生成器
+ */
+export const date: GeneratorDefinition = {
+  id: 'date',
+  name: '日期',
+  description: '生成随机日期',
+  categoryId: 'business',
+  params: [
+    {
+      key: 'startDate',
+      label: '开始日期',
+      type: 'string',
+      defaultValue: '2020-01-01',
+      description: '日期范围开始',
+      placeholder: 'YYYY-MM-DD',
+    },
+    {
+      key: 'endDate',
+      label: '结束日期',
+      type: 'string',
+      defaultValue: '2025-12-31',
+      description: '日期范围结束',
+      placeholder: 'YYYY-MM-DD',
+    },
+    {
+      key: 'format',
+      label: '日期格式',
+      type: 'select',
+      defaultValue: 'YYYY-MM-DD',
+      description: '输出格式',
+      options: [
+        { label: 'YYYY-MM-DD', value: 'YYYY-MM-DD' },
+        { label: 'YYYY/MM/DD', value: 'YYYY/MM/DD' },
+        { label: 'YYYY-MM-DD HH:mm:ss', value: 'YYYY-MM-DD HH:mm:ss' },
+        { label: 'YYYY/MM/DD HH:mm:ss', value: 'YYYY/MM/DD HH:mm:ss' },
+      ],
+    },
+  ],
+  generate: (params) => {
+    const startStr = (params.startDate as string) || '2020-01-01';
+    const endStr = (params.endDate as string) || '2025-12-31';
+    const format = (params.format as string) || 'YYYY-MM-DD';
+
+    const start = new Date(startStr).getTime();
+    const end = new Date(endStr).getTime();
+    const randomTime = start + Math.random() * (end - start);
+    const date = new Date(randomTime);
+
+    return formatDate(date, format);
+  },
+};
+
+/**
+ * 状态生成器
+ */
+export const status: GeneratorDefinition = {
+  id: 'status',
+  name: '状态',
+  description: '生成随机状态',
+  categoryId: 'business',
+  params: [
+    {
+      key: 'type',
+      label: '状态类型',
+      type: 'select',
+      defaultValue: 'order',
+      description: '选择状态类型',
+      options: [
+        { label: '订单状态', value: 'order' },
+        { label: '用户状态', value: 'user' },
+        { label: '审核状态', value: 'review' },
+        { label: '支付状态', value: 'payment' },
+        { label: '自定义', value: 'custom' },
+      ],
+    },
+    {
+      key: 'customValues',
+      label: '自定义值',
+      type: 'string',
+      defaultValue: '',
+      description: '自定义状态值，用逗号分隔',
+      placeholder: '状态1,状态2,状态3',
+    },
+  ],
+  generate: (params) => {
+    const type = (params.type as string) || 'order';
+
+    const statusMap: Record<string, string[]> = {
+      order: ['待付款', '待发货', '已发货', '已完成', '已取消', '已退款'],
+      user: ['活跃', '未激活', '已禁用', '已注销'],
+      review: ['待审核', '审核中', '已通过', '已拒绝'],
+      payment: ['待支付', '支付中', '支付成功', '支付失败', '已退款'],
+    };
+
+    if (type === 'custom') {
+      const customValues = (params.customValues as string) || '';
+      const values = customValues.split(',').filter((v) => v.trim());
+      if (values.length > 0) {
+        return randomPick(values);
+      }
+      return '未知状态';
+    }
+
+    return randomPick(statusMap[type] || statusMap.order);
+  },
+};
+
+/**
+ * 数量生成器
+ */
+export const quantity: GeneratorDefinition = {
+  id: 'quantity',
+  name: '数量',
+  description: '生成随机数量',
+  categoryId: 'business',
+  params: [
+    {
+      key: 'min',
+      label: '最小值',
+      type: 'number',
+      defaultValue: 1,
+      min: 0,
+      description: '数量最小值',
+    },
+    {
+      key: 'max',
+      label: '最大值',
+      type: 'number',
+      defaultValue: 100,
+      min: 0,
+      description: '数量最大值',
+    },
+    {
+      key: 'distribution',
+      label: '分布方式',
+      type: 'select',
+      defaultValue: 'uniform',
+      description: '数量分布方式',
+      options: [
+        { label: '均匀分布', value: 'uniform' },
+        { label: '泊松分布', value: 'poisson' },
+      ],
+    },
+  ],
+  generate: (params) => {
+    const min = (params.min as number) || 1;
+    const max = (params.max as number) || 100;
+    const distribution = (params.distribution as string) || 'uniform';
+
+    if (distribution === 'poisson') {
+      return String(poissonRandom(Math.floor((min + max) / 2)));
+    }
+    return String(randomInt(min, max));
+  },
+};
+
+/**
+ * 泊松分布随机数
+ */
+function poissonRandom(lambda: number): number {
+  const L = Math.exp(-lambda);
+  let k = 0;
+  let p = 1;
+  do {
+    k++;
+    p *= Math.random();
+  } while (p > L);
+  return k - 1;
+}
+
+/**
+ * 评分生成器
+ */
+export const rating: GeneratorDefinition = {
+  id: 'rating',
+  name: '评分',
+  description: '生成随机评分',
+  categoryId: 'business',
+  params: [
+    {
+      key: 'min',
+      label: '最低分',
+      type: 'number',
+      defaultValue: 1,
+      min: 0,
+      max: 10,
+      description: '评分最小值',
+    },
+    {
+      key: 'max',
+      label: '最高分',
+      type: 'number',
+      defaultValue: 5,
+      min: 0,
+      max: 10,
+      description: '评分最大值',
+    },
+    {
+      key: 'decimals',
+      label: '小数位数',
+      type: 'number',
+      defaultValue: 1,
+      min: 0,
+      max: 2,
+      description: '评分小数位数',
+    },
+    {
+      key: 'skewed',
+      label: '偏向高分',
+      type: 'boolean',
+      defaultValue: true,
+      description: '是否偏向高分（模拟真实评分分布）',
+    },
+  ],
+  generate: (params) => {
+    const min = (params.min as number) || 1;
+    const max = (params.max as number) || 5;
+    const decimals = (params.decimals as number) ?? 1;
+    const skewed = params.skewed !== false;
+
+    if (skewed) {
+      return skewedRandom(min, max).toFixed(decimals);
+    }
+    return (min + Math.random() * (max - min)).toFixed(decimals);
+  },
+};
+
+/**
+ * 偏向高分的随机数（模拟真实评分分布）
+ */
+function skewedRandom(min: number, max: number): number {
+  // 使用 Beta 分布模拟评分偏向
+  const alpha = 3;
+  const beta = 1;
+  let u = 0,
+    v = 0;
+  while (u === 0) u = Math.random();
+  while (v === 0) v = Math.random();
+  const x = Math.pow(u, 1 / alpha) / Math.pow(u, 1 / alpha) + Math.pow(v, 1 / beta);
+  return min + x * (max - min);
+}
+
+/**
+ * 折扣生成器
+ */
+export const discount: GeneratorDefinition = {
+  id: 'discount',
+  name: '折扣',
+  description: '生成随机折扣',
+  categoryId: 'business',
+  params: [
+    {
+      key: 'min',
+      label: '最低折扣',
+      type: 'number',
+      defaultValue: 1,
+      min: 0,
+      max: 100,
+      description: '折扣最小值（百分比）',
+    },
+    {
+      key: 'max',
+      label: '最高折扣',
+      type: 'number',
+      defaultValue: 50,
+      min: 0,
+      max: 100,
+      description: '折扣最大值（百分比）',
+    },
+    {
+      key: 'strategy',
+      label: '生成策略',
+      type: 'select',
+      defaultValue: 'random',
+      description: '折扣生成策略',
+      options: [
+        { label: '随机', value: 'random' },
+        { label: '心理定价', value: 'psychological' },
+      ],
+    },
+  ],
+  generate: (params) => {
+    const min = (params.min as number) || 1;
+    const max = (params.max as number) || 50;
+    const strategy = (params.strategy as string) || 'random';
+
+    let discount: number;
+    if (strategy === 'psychological') {
+      discount = generatePsychologicalDiscount(min, max);
+    } else {
+      discount = randomInt(min, max);
+    }
+    return `${discount}%`;
+  },
+};
+
+/**
+ * 生成心理折扣（如 5%, 10%, 20%, 30%）
+ */
+function generatePsychologicalDiscount(min: number, max: number): number {
+  const psychologicalDiscounts = [5, 10, 15, 20, 25, 30, 40, 50, 60, 70, 80];
+  const validDiscounts = psychologicalDiscounts.filter((d) => d >= min && d <= max);
+  if (validDiscounts.length > 0) {
+    return randomPick(validDiscounts);
+  }
+  return randomInt(min, max);
+}
+
+/**
+ * 库存生成器
+ */
+export const stock: GeneratorDefinition = {
+  id: 'stock',
+  name: '库存',
+  description: '生成随机库存数量',
+  categoryId: 'business',
+  params: [
+    {
+      key: 'min',
+      label: '最小库存',
+      type: 'number',
+      defaultValue: 0,
+      min: 0,
+      description: '库存最小值',
+    },
+    {
+      key: 'max',
+      label: '最大库存',
+      type: 'number',
+      defaultValue: 1000,
+      min: 0,
+      description: '库存最大值',
+    },
+    {
+      key: 'allowZero',
+      label: '允许为零',
+      type: 'boolean',
+      defaultValue: true,
+      description: '是否允许库存为零',
+    },
+  ],
+  generate: (params) => {
+    const min = (params.min as number) || 0;
+    const max = (params.max as number) || 1000;
+    const allowZero = params.allowZero !== false;
+
+    if (allowZero) {
+      return String(randomInt(min, max));
+    }
+    return String(randomInt(Math.max(1, min), max));
+  },
+};
+
+export const businessGenerators: GeneratorDefinition[] = [
+  orderId,
+  price,
+  date,
+  status,
+  quantity,
+  rating,
+  discount,
+  stock,
+];

src/lib/generators/index.ts

@@ -0,0 +1,57 @@
+/**
+ * 生成器库索引
+ * 导出所有生成器和分类配置
+ */
+
+import type { GeneratorDefinition, GeneratorCategory } from '@/types/testDataGenerator';
+import { personalGenerators } from './personal';
+import { businessGenerators } from './business';
+import { technicalGenerators } from './technical';
+import { basicGenerators } from './basic';
+
+/**
+ * 生成器分类配置
+ */
+export const generatorCategories: GeneratorCategory[] = [
+  { id: 'personal', name: '个人信息', icon: 'User' },
+  { id: 'business', name: '业务数据', icon: 'Briefcase' },
+  { id: 'technical', name: '技术数据', icon: 'Code' },
+  { id: 'basic', name: '基础类型', icon: 'Hash' },
+];
+
+/**
+ * 所有生成器列表
+ */
+export const allGenerators: GeneratorDefinition[] = [
+  ...personalGenerators,
+  ...businessGenerators,
+  ...technicalGenerators,
+  ...basicGenerators,
+];
+
+/**
+ * 根据 ID 获取生成器
+ */
+export function getGeneratorById(id: string): GeneratorDefinition | undefined {
+  return allGenerators.find((g) => g.id === id);
+}
+
+/**
+ * 根据分类 ID 获取生成器列表
+ */
+export function getGeneratorsByCategory(categoryId: string): GeneratorDefinition[] {
+  return allGenerators.filter((g) => g.categoryId === categoryId);
+}
+
+/**
+ * 搜索生成器
+ */
+export function searchGenerators(query: string): GeneratorDefinition[] {
+  const lowerQuery = query.toLowerCase();
+  return allGenerators.filter(
+    (g) =>
+      g.name.toLowerCase().includes(lowerQuery) ||
+      g.description.toLowerCase().includes(lowerQuery) ||
+      g.id.toLowerCase().includes(lowerQuery),
+  );
+}

src/lib/generators/personal.ts

@@ -0,0 +1,465 @@
+/**
+ * 个人信息生成器
+ * 包含：中文姓名、邮箱、手机号、身份证号、中文地址、年龄
+ */
+
+import type { GeneratorDefinition } from '@/types/testDataGenerator';
+
+// 中文姓氏
+const SURNAMES = [
+  '王',
+  '李',
+  '张',
+  '刘',
+  '陈',
+  '杨',
+  '赵',
+  '黄',
+  '周',
+  '吴',
+  '徐',
+  '孙',
+  '胡',
+  '朱',
+  '高',
+  '林',
+  '何',
+  '郭',
+  '马',
+  '罗',
+  '梁',
+  '宋',
+  '郑',
+  '谢',
+  '韩',
+  '唐',
+  '冯',
+  '于',
+  '董',
+  '萧',
+  '程',
+  '曹',
+  '袁',
+  '邓',
+  '许',
+  '傅',
+  '沈',
+  '曾',
+  '彭',
+  '吕',
+  '苏',
+  '卢',
+  '蒋',
+  '蔡',
+  '贾',
+  '丁',
+  '魏',
+  '薛',
+  '叶',
+  '阎',
+];
+
+// 中文名字常用字
+const NAME_CHARS = [
+  '伟',
+  '芳',
+  '娜',
+  '秀英',
+  '敏',
+  '静',
+  '丽',
+  '强',
+  '磊',
+  '洋',
+  '艳',
+  '勇',
+  '军',
+  '杰',
+  '娟',
+  '涛',
+  '明',
+  '超',
+  '秀兰',
+  '霞',
+  '平',
+  '刚',
+  '桂英',
+  '文',
+  '华',
+  '飞',
+  '鑫',
+  '浩',
+  '凯',
+  '宁',
+  '建',
+  '峰',
+  '辉',
+  '成',
+  '宇',
+  '博',
+  '泽',
+  '思',
+  '睿',
+  '晨',
+  '阳',
+  '雪',
+  '冰',
+  '琳',
+  '瑶',
+  '婷',
+  '欣',
+  '悦',
+  '佳',
+  '慧',
+];
+
+// 邮箱域名
+const EMAIL_DOMAINS = ['qq.com', '163.com', '126.com', 'gmail.com', 'outlook.com', 'hotmail.com'];
+
+// 省份
+const PROVINCES = [
+  '北京市',
+  '天津市',
+  '上海市',
+  '重庆市',
+  '河北省',
+  '山西省',
+  '辽宁省',
+  '吉林省',
+  '黑龙江省',
+  '江苏省',
+  '浙江省',
+  '安徽省',
+  '福建省',
+  '江西省',
+  '山东省',
+  '河南省',
+  '湖北省',
+  '湖南省',
+  '广东省',
+  '海南省',
+  '四川省',
+  '贵州省',
+  '云南省',
+  '陕西省',
+  '甘肃省',
+  '青海省',
+  '台湾省',
+  '内蒙古自治区',
+  '广西壮族自治区',
+  '西藏自治区',
+  '宁夏回族自治区',
+  '新疆维吾尔自治区',
+];
+
+// 城市
+const CITIES: Record<string, string[]> = {
+  北京市: ['东城区', '西城区', '朝阳区', '海淀区'],
+  上海市: ['黄浦区', '徐汇区', '长宁区', '静安区'],
+  广东省: ['广州市', '深圳市', '东莞市', '佛山市'],
+  浙江省: ['杭州市', '宁波市', '温州市', '嘉兴市'],
+  江苏省: ['南京市', '苏州市', '无锡市', '常州市'],
+  四川省: ['成都市', '绵阳市', '德阳市', '宜宾市'],
+};
+
+/**
+ * 生成随机整数
+ */
+function randomInt(min: number, max: number): number {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+/**
+ * 从数组中随机选择
+ */
+function randomPick<T>(arr: T[]): T {
+  return arr[Math.floor(Math.random() * arr.length)];
+}
+
+/**
+ * 中文姓名生成器
+ */
+export const chineseName: GeneratorDefinition = {
+  id: 'chineseName',
+  name: '中文姓名',
+  description: '生成随机中文姓名',
+  categoryId: 'personal',
+  params: [],
+  generate: () => {
+    const surname = randomPick(SURNAMES);
+    const name = randomPick(NAME_CHARS);
+    return surname + name;
+  },
+};
+
+/**
+ * 邮箱生成器
+ */
+export const email: GeneratorDefinition = {
+  id: 'email',
+  name: '邮箱',
+  description: '生成随机邮箱地址',
+  categoryId: 'personal',
+  params: [
+    {
+      key: 'domain',
+      label: '邮箱域名',
+      type: 'select',
+      defaultValue: 'random',
+      description: '选择邮箱域名',
+      options: [
+        { label: '随机', value: 'random' },
+        ...EMAIL_DOMAINS.map((d) => ({ label: d, value: d })),
+      ],
+    },
+  ],
+  generate: (params) => {
+    const domain =
+      params.domain === 'random' ? randomPick(EMAIL_DOMAINS) : (params.domain as string);
+    const username = Math.random().toString(36).substring(2, 10);
+    return `${username}@${domain}`;
+  },
+};
+
+/**
+ * 手机号生成器
+ */
+export const chinesePhone: GeneratorDefinition = {
+  id: 'chinesePhone',
+  name: '手机号',
+  description: '生成随机中国手机号码',
+  categoryId: 'personal',
+  params: [
+    {
+      key: 'prefix',
+      label: '号段前缀',
+      type: 'select',
+      defaultValue: 'random',
+      description: '选择手机号前缀',
+      options: [
+        { label: '随机', value: 'random' },
+        { label: '138', value: '138' },
+        { label: '139', value: '139' },
+        { label: '158', value: '158' },
+        { label: '188', value: '188' },
+        { label: '177', value: '177' },
+      ],
+    },
+  ],
+  generate: (params) => {
+    const prefixes = ['138', '139', '158', '188', '177', '136', '159', '186', '135', '150'];
+    const prefix = params.prefix === 'random' ? randomPick(prefixes) : (params.prefix as string);
+    const suffix = String(randomInt(10000000, 99999999));
+    return prefix + suffix;
+  },
+};
+
+/**
+ * 身份证号生成器
+ */
+export const idCard: GeneratorDefinition = {
+  id: 'idCard',
+  name: '身份证号',
+  description: '生成随机身份证号码',
+  categoryId: 'personal',
+  params: [
+    {
+      key: 'region',
+      label: '地区',
+      type: 'select',
+      defaultValue: 'random',
+      description: '选择身份证前6位地区码',
+      options: [
+        { label: '随机', value: 'random' },
+        { label: '北京', value: '110101' },
+        { label: '上海', value: '310101' },
+        { label: '广州', value: '440103' },
+        { label: '深圳', value: '440305' },
+      ],
+    },
+  ],
+  generate: (params) => {
+    const regions = ['110101', '310101', '440103', '440305', '510104', '330102'];
+    const region = params.region === 'random' ? randomPick(regions) : (params.region as string);
+
+    // 出生日期 1960-2005年
+    const year = randomInt(1960, 2005);
+    const month = String(randomInt(1, 12)).padStart(2, '0');
+    const day = String(randomInt(1, 28)).padStart(2, '0');
+    const birthday = `${year}${month}${day}`;
+
+    // 顺序码
+    const sequence = String(randomInt(1, 999)).padStart(3, '0');
+
+    // 前17位
+    const prefix17 = region + birthday + sequence;
+
+    // 校验码
+    const weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
+    const checkCodes = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'];
+    let sum = 0;
+    for (let i = 0; i < 17; i++) {
+      sum += parseInt(prefix17[i]) * weights[i];
+    }
+    const checkCode = checkCodes[sum % 11];
+
+    return prefix17 + checkCode;
+  },
+  generateAtIndex: (params, index) => {
+    const regions = ['110101', '310101', '440103', '440305', '510104', '330102'];
+    const region =
+      params.region === 'random' ? regions[index % regions.length] : (params.region as string);
+
+    const year = 1990;
+    const month = String(randomInt(1, 12)).padStart(2, '0');
+    const day = String(randomInt(1, 28)).padStart(2, '0');
+    const birthday = `${year}${month}${day}`;
+
+    const sequence = String(index + 1).padStart(3, '0');
+    const prefix17 = region + birthday + sequence;
+
+    const weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
+    const checkCodes = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'];
+    let sum = 0;
+    for (let i = 0; i < 17; i++) {
+      sum += parseInt(prefix17[i]) * weights[i];
+    }
+    const checkCode = checkCodes[sum % 11];
+
+    return prefix17 + checkCode;
+  },
+};
+
+/**
+ * 中文地址生成器
+ */
+export const chineseAddress: GeneratorDefinition = {
+  id: 'chineseAddress',
+  name: '中文地址',
+  description: '生成随机中文地址',
+  categoryId: 'personal',
+  params: [
+    {
+      key: 'includeDetail',
+      label: '包含详细地址',
+      type: 'boolean',
+      defaultValue: true,
+      description: '是否包含街道门牌号',
+    },
+  ],
+  generate: (params) => {
+    const province = randomPick(PROVINCES);
+    const cities = CITIES[province] || ['市区'];
+    const city = randomPick(cities);
+    const district = `区${randomInt(1, 20)}号`;
+
+    if (params.includeDetail) {
+      const street = `路${randomInt(1, 200)}号`;
+      return `${province}${city}${district}${street}`;
+    }
+    return `${province}${city}${district}`;
+  },
+};
+
+/**
+ * 年龄生成器
+ */
+export const age: GeneratorDefinition = {
+  id: 'age',
+  name: '年龄',
+  description: '生成随机年龄',
+  categoryId: 'personal',
+  params: [
+    {
+      key: 'min',
+      label: '最小年龄',
+      type: 'number',
+      defaultValue: 18,
+      min: 0,
+      max: 150,
+      description: '年龄最小值',
+    },
+    {
+      key: 'max',
+      label: '最大年龄',
+      type: 'number',
+      defaultValue: 65,
+      min: 0,
+      max: 150,
+      description: '年龄最大值',
+    },
+    {
+      key: 'distribution',
+      label: '分布方式',
+      type: 'select',
+      defaultValue: 'uniform',
+      description: '年龄分布方式',
+      options: [
+        { label: '均匀分布', value: 'uniform' },
+        { label: '正态分布', value: 'normal' },
+        { label: '人口统计分布', value: 'demographic' },
+      ],
+    },
+  ],
+  generate: (params) => {
+    const min = (params.min as number) || 18;
+    const max = (params.max as number) || 65;
+    const distribution = (params.distribution as string) || 'uniform';
+
+    if (distribution === 'normal') {
+      return String(normalRandom(min, max));
+    } else if (distribution === 'demographic') {
+      return String(demographicRandom());
+    }
+    return String(randomInt(min, max));
+  },
+};
+
+/**
+ * 正态分布随机数
+ */
+function normalRandom(min: number, max: number): number {
+  const mean = (min + max) / 2;
+  const stdDev = (max - min) / 6;
+  let u = 0,
+    v = 0;
+  while (u === 0) u = Math.random();
+  while (v === 0) v = Math.random();
+  const num = Math.sqrt(-2.0 * Math.log(u)) * Math.cos(2.0 * Math.PI * v);
+  const value = Math.round(mean + num * stdDev);
+  return Math.max(min, Math.min(max, value));
+}
+
+/**
+ * 人口统计分布随机数（模拟真实年龄分布）
+ */
+function demographicRandom(): number {
+  const ageGroups = [
+    { min: 0, max: 14, weight: 0.18 },
+    { min: 15, max: 24, weight: 0.12 },
+    { min: 25, max: 34, weight: 0.18 },
+    { min: 35, max: 44, weight: 0.17 },
+    { min: 45, max: 54, weight: 0.16 },
+    { min: 55, max: 64, weight: 0.12 },
+    { min: 65, max: 100, weight: 0.07 },
+  ];
+
+  const random = Math.random();
+  let cumulative = 0;
+  for (const group of ageGroups) {
+    cumulative += group.weight;
+    if (random <= cumulative) {
+      return randomInt(group.min, group.max);
+    }
+  }
+  return randomInt(25, 34);
+}
+
+export const personalGenerators: GeneratorDefinition[] = [
+  chineseName,
+  email,
+  chinesePhone,
+  idCard,
+  chineseAddress,
+  age,
+];

src/lib/generators/technical.ts

@@ -0,0 +1,268 @@
+/**
+ * 技术数据生成器
+ * 包含：UUID、IPv4、URL
+ */
+
+import type { GeneratorDefinition } from '@/types/testDataGenerator';
+
+/**
+ * 生成随机整数
+ */
+function randomInt(min: number, max: number): number {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+/**
+ * 从数组中随机选择
+ */
+function randomPick<T>(arr: T[]): T {
+  return arr[Math.floor(Math.random() * arr.length)];
+}
+
+/**
+ * UUID 生成器
+ */
+export const uuid: GeneratorDefinition = {
+  id: 'uuid',
+  name: 'UUID',
+  description: '生成随机 UUID',
+  categoryId: 'technical',
+  params: [
+    {
+      key: 'version',
+      label: 'UUID 版本',
+      type: 'select',
+      defaultValue: 'v4',
+      description: 'UUID 版本',
+      options: [
+        { label: 'v4 (随机)', value: 'v4' },
+        { label: 'v1 (时间戳)', value: 'v1' },
+      ],
+    },
+    {
+      key: 'uppercase',
+      label: '大写字母',
+      type: 'boolean',
+      defaultValue: false,
+      description: '是否使用大写字母',
+    },
+    {
+      key: 'noDashes',
+      label: '无连字符',
+      type: 'boolean',
+      defaultValue: false,
+      description: '是否省略连字符',
+    },
+  ],
+  generate: (params) => {
+    const version = (params.version as string) || 'v4';
+    const uppercase = params.uppercase === true;
+    const noDashes = params.noDashes === true;
+
+    let result: string;
+    if (version === 'v1') {
+      result = generateUUIDv1();
+    } else {
+      result = generateUUIDv4();
+    }
+
+    if (uppercase) {
+      result = result.toUpperCase();
+    }
+
+    if (noDashes) {
+      result = result.replace(/-/g, '');
+    }
+
+    return result;
+  },
+};
+
+/**
+ * 生成 UUID v4
+ */
+function generateUUIDv4(): string {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+    const r = (Math.random() * 16) | 0;
+    const v = c === 'x' ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+}
+
+/**
+ * 生成 UUID v1（简化版本，模拟时间戳）
+ */
+function generateUUIDv1(): string {
+  const now = Date.now();
+  const timeLow = (now & 0xffffffff).toString(16).padStart(8, '0');
+  const timeMid = ((now >> 32) & 0xffff).toString(16).padStart(4, '0');
+  const timeHi = ((now >> 48) & 0x0fff) | 0x1000;
+  const clockSeq = randomInt(0, 0x3fff) | 0x8000;
+  const node = Array.from({ length: 6 }, () =>
+    randomInt(0, 255).toString(16).padStart(2, '0'),
+  ).join('');
+
+  return `${timeLow}-${timeMid}-${timeHi.toString(16)}-${clockSeq.toString(16)}-${node}`;
+}
+
+/**
+ * IPv4 生成器
+ */
+export const ipv4: GeneratorDefinition = {
+  id: 'ipv4',
+  name: 'IPv4',
+  description: '生成随机 IPv4 地址',
+  categoryId: 'technical',
+  params: [
+    {
+      key: 'type',
+      label: '地址类型',
+      type: 'select',
+      defaultValue: 'random',
+      description: 'IP 地址类型',
+      options: [
+        { label: '完全随机', value: 'random' },
+        { label: '内网地址', value: 'private' },
+        { label: '公网地址', value: 'public' },
+        { label: '环回地址', value: 'loopback' },
+      ],
+    },
+  ],
+  generate: (params) => {
+    const type = (params.type as string) || 'random';
+
+    if (type === 'private') {
+      return generatePrivateIPv4();
+    } else if (type === 'loopback') {
+      return '127.0.0.1';
+    } else if (type === 'public') {
+      return generatePublicIPv4();
+    }
+    return generateRandomIPv4();
+  },
+};
+
+/**
+ * 生成完全随机 IPv4
+ */
+function generateRandomIPv4(): string {
+  return Array.from({ length: 4 }, () => randomInt(0, 255)).join('.');
+}
+
+/**
+ * 生成内网 IPv4
+ */
+function generatePrivateIPv4(): string {
+  const ranges = [
+    { prefix: '10', second: () => randomInt(0, 255) },
+    { prefix: '172', second: () => randomInt(16, 31) },
+    { prefix: '192.168', second: () => randomInt(0, 255) },
+  ];
+  const range = randomPick(ranges);
+
+  if (range.prefix === '192.168') {
+    return `192.168.${range.second()}.${randomInt(1, 254)}`;
+  }
+  return `${range.prefix}.${range.second()}.${randomInt(1, 254)}.${randomInt(1, 254)}`;
+}
+
+/**
+ * 生成公网 IPv4
+ */
+function generatePublicIPv4(): string {
+  let first: number;
+  do {
+    first = randomInt(1, 255);
+  } while (first === 10 || first === 127 || first === 192 || first === 172);
+
+  return `${first}.${randomInt(0, 255)}.${randomInt(0, 255)}.${randomInt(1, 254)}`;
+}
+
+/**
+ * URL 生成器
+ */
+export const url: GeneratorDefinition = {
+  id: 'url',
+  name: 'URL',
+  description: '生成随机 URL',
+  categoryId: 'technical',
+  params: [
+    {
+      key: 'protocol',
+      label: '协议',
+      type: 'select',
+      defaultValue: 'https',
+      description: 'URL 协议',
+      options: [
+        { label: 'HTTPS', value: 'https' },
+        { label: 'HTTP', value: 'http' },
+        { label: '随机', value: 'random' },
+      ],
+    },
+    {
+      key: 'type',
+      label: 'URL 类型',
+      type: 'select',
+      defaultValue: 'website',
+      description: 'URL 类型',
+      options: [
+        { label: '网站', value: 'website' },
+        { label: 'API', value: 'api' },
+        { label: '图片', value: 'image' },
+        { label: '文件', value: 'file' },
+      ],
+    },
+    {
+      key: 'includePath',
+      label: '包含路径',
+      type: 'boolean',
+      defaultValue: true,
+      description: '是否包含路径',
+    },
+  ],
+  generate: (params) => {
+    const protocol = (params.protocol as string) || 'https';
+    const type = (params.type as string) || 'website';
+    const includePath = params.includePath !== false;
+
+    const actualProtocol = protocol === 'random' ? randomPick(['http', 'https']) : protocol;
+
+    const domains = [
+      'example.com',
+      'test.org',
+      'demo.net',
+      'sample.io',
+      'api.service.com',
+      'cdn.static.com',
+      'img.media.com',
+    ];
+    const domain = randomPick(domains);
+
+    let path = '';
+    if (includePath) {
+      if (type === 'api') {
+        path = `/api/v${randomInt(1, 3)}/${randomPick(['users', 'products', 'orders', 'items'])}`;
+      } else if (type === 'image') {
+        path = `/images/${randomPick(['avatar', 'banner', 'logo', 'photo'])}/${randomInt(1, 1000)}.jpg`;
+      } else if (type === 'file') {
+        path = `/files/${randomPick(['document', 'report', 'data'])}/${randomInt(1, 100)}.pdf`;
+      } else {
+        path = `/${randomPick(['about', 'contact', 'products', 'services', 'blog'])}`;
+      }
+    }
+
+    // 添加查询参数
+    let query = '';
+    if (Math.random() > 0.5) {
+      const params = new URLSearchParams();
+      params.set('id', String(randomInt(1, 10000)));
+      if (Math.random() > 0.5) params.set('page', String(randomInt(1, 100)));
+      if (Math.random() > 0.7) params.set('lang', randomPick(['zh', 'en', 'ja']));
+      query = `?${params.toString()}`;
+    }
+
+    return `${actualProtocol}://${domain}${path}${query}`;
+  },
+};
+
+export const technicalGenerators: GeneratorDefinition[] = [uuid, ipv4, url];

src/lib/generators/types.ts

@@ -0,0 +1,48 @@
+/**
+ * 生成器内部类型定义
+ * 与 testDataGenerator.ts 分离，用于生成器库内部
+ */
+
+import type { GeneratorDefinition, GeneratorCategory } from '@/types/testDataGenerator';
+
+export type { GeneratorDefinition, GeneratorCategory };
+
+/**
+ * 生成器注册表
+ */
+export interface GeneratorRegistry {
+  /** 分类列表 */
+  categories: GeneratorCategory[];
+  /** 生成器列表 */
+  generators: GeneratorDefinition[];
+}
+
+/**
+ * 随机数生成选项
+ */
+export interface RandomOptions {
+  /** 最小值 */
+  min?: number;
+  /** 最大值 */
+  max?: number;
+  /** 是否包含最小值 */
+  includeMin?: boolean;
+  /** 是否包含最大值 */
+  includeMax?: boolean;
+}
+
+/**
+ * 字符集选项
+ */
+export interface CharsetOptions {
+  /** 是否包含大写字母 */
+  uppercase?: boolean;
+  /** 是否包含小写字母 */
+  lowercase?: boolean;
+  /** 是否包含数字 */
+  digits?: boolean;
+  /** 是否包含特殊字符 */
+  special?: boolean;
+  /** 自定义字符集 */
+  custom?: string;
+}

src/pages/Base64Converter/Base64ConverterSection.tsx

@@ -1,7 +1,7 @@
 import { Image as ImageIcon, Trash2, Upload } from 'lucide-react';
 import TextInputArea from '@/components/TextInputArea';
 import { useI18n } from '@/utils/chromeI18n';
-import CopyButton from '@/components/CopyButton';
+import { CopyButton } from '@/components/CopyButton';
 import DecodeResultPaper from '@/components/DecodeResultPaper';
 import { Button } from '@/components/ui/button';
 import { downloadBlob, formatFileSize } from '@/utils/base64Converter';

src/pages/Base64Converter/TextMode.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import TextInputArea from '@/components/TextInputArea';
 import { useI18n } from '@/utils/chromeI18n';
-import CopyButton from '@/components/CopyButton';
+import { CopyButton } from '@/components/CopyButton';
 import { base64ToText, textToBase64 } from '@/utils/base64Converter';
 import SwitchButtonGroup from '@/components/SwitchButtonGroup';
 import { useContextMenuData } from '@/utils/useContextMenuData';

src/pages/Dashboard/ToolCard.tsx

@@ -1,107 +0,0 @@
-import type { ComponentType } from 'react';
-import React from 'react';
-import type { LucideProps } from 'lucide-react';
-import { ChevronRight } from 'lucide-react';
-import type { PaletteColorKey } from '@/config/features';
-import { cn } from '@/lib/utils';
-
-const PALETTE_COLORS: Record<PaletteColorKey, string> = {
-  primary: '13, 148, 136', // teal
-  success: '22, 163, 74', // green
-  warning: '217, 119, 6', // amber (存储清理的橙色轴)
-  error: '220, 38, 38', // red
-  secondary: '147, 51, 232',
-  info: '37, 99, 235', // blue
-};
-
-export interface ToolCardProps extends React.HTMLAttributes<HTMLDivElement> {
-  title: string;
-  description?: string;
-  snapshot?: React.ReactNode;
-  colorKey: PaletteColorKey;
-  icon: ComponentType<LucideProps>;
-  onNavigate: () => void;
-}
-
-export default function ToolCard({
-  title,
-  description,
-  snapshot,
-  colorKey,
-  icon: IconComponent,
-  onNavigate,
-  className,
-  ...props
-}: ToolCardProps) {
-  const rgbValues = PALETTE_COLORS[colorKey];
-
-  return (
-    <div
-      style={{
-        ['--tool-color' as string]: rgbValues,
-      }}
-      /* 💡 核心修复点：
-        - 坚决不用 h-full 或固定高度，锁死 h-auto（高度自适应流），配合 py-4 px-4 牢牢把内容包裹在卡片体内。
-        - 废除原先会乱飘的内联 style 属性擦写，全权放权给 Tailwind 的声明式 hover 变体。
-      */
-      className={cn(
-        'group relative rounded-xl border border-border/70 bg-card text-card-foreground p-4 h-auto flex flex-col items-stretch justify-start gap-3 shadow-sm select-none box-border',
-        'hover:bg-muted/30',
-        'hover:border-[rgba(var(--tool-color),0.45)]',
-        'hover:shadow-[0_8px_24px_-8px_rgba(var(--tool-color),0.14)] dark:hover:shadow-[0_8px_30px_-10px_rgba(var(--tool-color),0.25)]',
-        className,
-      )}
-      {...props}
-    >
-      {/* 上半部分：核心信息交互排版轴 */}
-      <div className="flex items-center justify-between w-full relative min-w-0 min-h-[44px]">
-        <div className="flex gap-3 items-center min-w-0 flex-1 pr-2">
-          {/* 左侧圆形图标容器 */}
-          <div
-            className={cn(
-              'flex items-center justify-center w-10 h-10 rounded-xl shrink-0',
-              'bg-[rgba(var(--tool-color),0.08)] dark:bg-[rgba(var(--tool-color),0.12)]',
-              'text-[rgb(var(--tool-color))]',
-            )}
-          >
-            <IconComponent className="h-5 w-5 shrink-0" />
-          </div>
-
-          {/* 中间文字描述区：利用 flex-1 min-w-0 防御文本过长发生恶性撑开 */}
-          <div className="flex-1 min-w-0 flex flex-col">
-            <h4 className="font-bold text-sm tracking-tight text-foreground leading-snug">
-              {title}
-            </h4>
-            {description && (
-              <p className="text-[11px] font-medium text-muted-foreground/90 mt-0.5 leading-normal w-full truncate">
-                {description}
-              </p>
-            )}
-          </div>
-        </div>
-
-        {/* 右侧指示小箭头 */}
-        <div className="text-muted-foreground/40 group-hover:text-[rgb(var(--tool-color))] p-1 shrink-0 group-hover:translate-x-0.5">
-          <ChevronRight className="h-4 w-4" />
-        </div>
-
-        {/* 覆盖整个上半部分的绝对定位隐形跳转层（A11y 无障碍标准合规） */}
-        <button
-          type="button"
-          onClick={onNavigate}
-          aria-label={`进入 ${title}`}
-          className="absolute inset-0 w-full h-full cursor-pointer bg-transparent border-none opacity-0 focus-visible:outline-none"
-        />
-      </div>
-
-      {/* 下半部分：未来的动态预览沙箱独立承载区 */}
-      {snapshot != null && (
-        <div className="mt-1 pt-3 border-t border-dashed border-border/80 w-full relative z-10 select-text">
-          {snapshot}
-        </div>
-      )}
-    </div>
-  );
-}
-
-ToolCard.displayName = 'ToolCard';

src/pages/JsonTools/JsonConvertSection.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { useI18n } from '@/utils/chromeI18n';
 import { formatBytes } from '@/utils/format';
-import CopyButton from '@/components/CopyButton';
+import { CopyButton } from '@/components/CopyButton';
 import TextInputArea from '@/components/TextInputArea';
 import { validateJson } from '@/utils/jsonFormatter';
 import { cn } from '@/lib/utils';

src/pages/JsonTools/JsonFormatSection.tsx

@@ -7,7 +7,7 @@ import {
   validateJson,
 } from '@/utils/jsonFormatter';
 import { formatBytes } from '@/utils/format';
-import CopyButton from '@/components/CopyButton';
+import { CopyButton } from '@/components/CopyButton';
 import SwitchButtonGroup from '@/components/SwitchButtonGroup';
 import TextInputArea from '@/components/TextInputArea';
 import { Checkbox } from '@/components/ui/checkbox';

src/pages/Jwt/JwtSection.tsx

@@ -1,4 +1,4 @@
-import CopyButton from '@/components/CopyButton';
+import { CopyButton } from '@/components/CopyButton';
 import { useI18n } from '@/utils/chromeI18n';
 import { stringifyJson } from '@/utils/jwt';
 import { cn } from '@/lib/utils';

src/pages/Jwt/index.tsx

@@ -1,5 +1,5 @@
 import TextInputArea from '@/components/TextInputArea';
-import CopyButton from '@/components/CopyButton';
+import { CopyButton } from '@/components/CopyButton';
 import JwtSection from './JwtSection';
 import { useJwt } from './useJwt';
 import { useI18n } from '@/utils/chromeI18n';

src/pages/TestDataGenerator/components/DataPreview.tsx

@@ -0,0 +1,114 @@
+/**
+ * 数据预览组件
+ * 展示一条示例数据，展示数据结构
+ */
+
+import { useMemo } from 'react';
+import { FileJson, FileText } from 'lucide-react';
+import { useI18n } from '@/utils/chromeI18n';
+import { getGeneratorById } from '@/lib/generators';
+import type { FieldConfig } from '@/types/testDataGenerator';
+
+interface DataPreviewProps {
+  fields: FieldConfig[];
+}
+
+/** JSON 语法高亮渲染 */
+function JsonHighlight({ data }: { data: Record<string, unknown> }) {
+  const formatted = useMemo(() => {
+    const lines: { indent: string; key?: string; value: string; isLast: boolean }[] = [];
+    const entries = Object.entries(data);
+
+    entries.forEach(([key, value], index) => {
+      const isLast = index === entries.length - 1;
+      const formattedValue =
+        value === null ? 'null' : typeof value === 'string' ? `"${value}"` : String(value);
+      lines.push({ indent: '  ', key, value: formattedValue, isLast });
+    });
+
+    return lines;
+  }, [data]);
+
+  return (
+    <pre className="text-sm font-mono leading-relaxed">
+      <span className="text-muted-foreground">{'{'}</span>
+      {formatted.map((line, i) => (
+        <div key={i} className="flex">
+          <span className="text-muted-foreground">{line.indent}</span>
+          <span className="text-blue-500 dark:text-blue-400">&quot;{line.key}&quot;</span>
+          <span className="text-muted-foreground">{': '}</span>
+          <span className={getValueColor(line.value)}>{line.value}</span>
+          {!line.isLast && <span className="text-muted-foreground">,</span>}
+        </div>
+      ))}
+      <span className="text-muted-foreground">{'}'}</span>
+    </pre>
+  );
+}
+
+/** 根据值类型返回颜色类名 */
+function getValueColor(value: string): string {
+  if (value === 'null') return 'text-muted-foreground';
+  if (value.startsWith('"')) return 'text-emerald-600 dark:text-emerald-400';
+  if (/^\d+$/.test(value)) return 'text-amber-600 dark:text-amber-400';
+  if (value === 'true' || value === 'false') return 'text-purple-600 dark:text-purple-400';
+  return 'text-foreground';
+}
+
+export default function DataPreview({ fields }: DataPreviewProps) {
+  const { t } = useI18n('testDataGenerator');
+
+  // 生成一条示例数据
+  const sampleData = useMemo(() => {
+    if (fields.length === 0) return null;
+
+    const record: Record<string, unknown> = {};
+    for (const field of fields) {
+      // 非必填字段预览显示 null
+      if (!field.required) {
+        record[field.name] = null;
+        continue;
+      }
+      const generator = getGeneratorById(field.generatorId);
+      if (generator) {
+        record[field.name] = generator.generate(field.params);
+      } else {
+        record[field.name] = null;
+      }
+    }
+    return record;
+  }, [fields]);
+
+  if (!sampleData) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full text-center">
+        <FileJson className="h-8 w-8 text-muted-foreground/30 mb-2" />
+        <p className="text-xs text-muted-foreground/50">{t('testDataGenerator_noDataHint')}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* 示例标签 */}
+      <div className="flex items-center justify-between mb-3">
+        <div className="flex items-center gap-2">
+          <div className="h-5 w-5 rounded bg-primary/10 flex items-center justify-center">
+            <FileText className="h-3 w-3 text-primary" />
+          </div>
+          <span className="text-xs font-medium text-muted-foreground">
+            {t('testDataGenerator_sampleData')}
+          </span>
+        </div>
+        <span className="text-[10px] text-muted-foreground/50 bg-muted px-1.5 py-0.5 rounded">
+          {Object.keys(sampleData).length} {t('testDataGenerator_fields')}
+        </span>
+      </div>
+
+      {/* 示例数据展示 */}
+      <div className="flex-1 min-h-0 overflow-auto rounded-lg bg-zinc-950 dark:bg-zinc-900 p-4">
+        <JsonHighlight data={sampleData} />
+      </div>
+    </div>
+  );
+}

src/pages/TestDataGenerator/components/ExportPanel.tsx

@@ -0,0 +1,81 @@
+/**
+ * 导出面板组件
+ * 提供复制、下载 JSON、下载 CSV 选项
+ */
+
+import { Copy, Download } from 'lucide-react';
+import { toast } from 'sonner';
+import { Button } from '@/components/ui/button';
+import { useI18n } from '@/utils/chromeI18n';
+import { DataExporter } from '@/utils/dataExporter';
+import type { GenerateResult } from '@/types/testDataGenerator';
+
+interface ExportPanelProps {
+  result: GenerateResult | null;
+}
+
+export default function ExportPanel({ result }: ExportPanelProps) {
+  const { t } = useI18n('testDataGenerator');
+
+  if (!result?.data || result.data.length === 0) {
+    return null;
+  }
+
+  const handleCopyJSON = async () => {
+    const content = DataExporter.toJSON(result.data!);
+    const success = await DataExporter.copyToClipboard(content);
+    if (success) {
+      toast.success(t('testDataGenerator_copySuccess'));
+    } else {
+      toast.error(t('testDataGenerator_copyFailed'));
+    }
+  };
+
+  const handleCopyCSV = async () => {
+    const content = DataExporter.toCSV(result.data!);
+    const success = await DataExporter.copyToClipboard(content);
+    if (success) {
+      toast.success(t('testDataGenerator_copySuccess'));
+    } else {
+      toast.error(t('testDataGenerator_copyFailed'));
+    }
+  };
+
+  const handleDownloadJSON = () => {
+    const file = DataExporter.toSingleFile(result.data!, 'json', 'test-data');
+    DataExporter.download(file);
+  };
+
+  const handleDownloadCSV = () => {
+    const file = DataExporter.toSingleFile(result.data!, 'csv', 'test-data');
+    DataExporter.download(file);
+  };
+
+  return (
+    <div className="space-y-2">
+      <h4 className="text-sm font-medium text-foreground">{t('testDataGenerator_export')}</h4>
+
+      <div className="grid grid-cols-2 gap-2">
+        <Button variant="outline" size="sm" onClick={handleCopyJSON} className="h-9 gap-1.5">
+          <Copy className="h-4 w-4" />
+          {t('testDataGenerator_copyJSON')}
+        </Button>
+
+        <Button variant="outline" size="sm" onClick={handleCopyCSV} className="h-9 gap-1.5">
+          <Copy className="h-4 w-4" />
+          {t('testDataGenerator_copyCSV')}
+        </Button>
+
+        <Button variant="outline" size="sm" onClick={handleDownloadJSON} className="h-9 gap-1.5">
+          <Download className="h-4 w-4" />
+          {t('testDataGenerator_downloadJSON')}
+        </Button>
+
+        <Button variant="outline" size="sm" onClick={handleDownloadCSV} className="h-9 gap-1.5">
+          <Download className="h-4 w-4" />
+          {t('testDataGenerator_downloadCSV')}
+        </Button>
+      </div>
+    </div>
+  );
+}

src/pages/TestDataGenerator/components/FieldEditor.tsx

@@ -0,0 +1,230 @@
+/**
+ * 字段编辑器组件
+ * 编辑单个字段的详细配置
+ */
+
+import { useState, useCallback } from 'react';
+import { useI18n } from '@/utils/chromeI18n';
+import { Input } from '@/components/ui/input';
+import { Switch } from '@/components/ui/switch';
+import { Badge } from '@/components/ui/badge';
+import { getGeneratorById } from '@/lib/generators';
+import type { FieldConfig } from '@/types/testDataGenerator';
+import GeneratorSelector from './GeneratorSelector';
+import GeneratorConfig from './GeneratorConfig';
+
+interface FieldEditorProps {
+  field: FieldConfig;
+  onChange: (field: FieldConfig) => void;
+  /** 所有字段名列表，用于检测重复 */
+  allFieldNames?: string[];
+}
+
+export default function FieldEditor({ field, onChange, allFieldNames = [] }: FieldEditorProps) {
+  const { t } = useI18n('testDataGenerator');
+  const generator = getGeneratorById(field.generatorId);
+  const [nameError, setNameError] = useState<string | null>(null);
+
+  const validateFieldName = useCallback(
+    (name: string): string | null => {
+      const trimmed = name.trim();
+      if (!trimmed) {
+        return t('testDataGenerator_fieldNameEmpty');
+      }
+      if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(trimmed)) {
+        return t('testDataGenerator_fieldNameInvalid');
+      }
+      const isDuplicate = allFieldNames.some(
+        (n, i) => n === trimmed && i !== allFieldNames.indexOf(field.name),
+      );
+      if (isDuplicate) {
+        return t('testDataGenerator_fieldNameDuplicate');
+      }
+      return null;
+    },
+    [allFieldNames, field.name, t],
+  );
+
+  const handleNameChange = (name: string) => {
+    onChange({ ...field, name });
+    // 实时校验
+    const error = validateFieldName(name);
+    setNameError(error);
+  };
+
+  const handleDescriptionChange = (description: string) => {
+    onChange({ ...field, description });
+  };
+
+  const handleRequiredChange = (required: boolean) => {
+    onChange({
+      ...field,
+      required,
+      // 切换为必填时清零，切换为非必填时默认 100%
+      nullRate: required ? 0 : 100,
+    });
+  };
+
+  const handleNullRateChange = (nullRate: number) => {
+    // 限制范围 0-100
+    const clampedRate = Math.max(0, Math.min(100, nullRate));
+    // 空值率为 0 时自动设为必填
+    if (clampedRate === 0) {
+      onChange({ ...field, nullRate: clampedRate, required: true });
+    } else {
+      onChange({ ...field, nullRate: clampedRate, required: false });
+    }
+  };
+
+  const handleUniqueChange = (unique: boolean) => {
+    onChange({ ...field, unique });
+  };
+
+  const handleGeneratorChange = (generatorId: string) => {
+    const generator = getGeneratorById(generatorId);
+    const defaultParams: Record<string, unknown> = {};
+    generator?.params.forEach((p) => {
+      defaultParams[p.key] = p.defaultValue;
+    });
+    onChange({
+      ...field,
+      generatorId,
+      params: defaultParams,
+    });
+  };
+
+  const handleParamsChange = (params: Record<string, unknown>) => {
+    onChange({ ...field, params });
+  };
+
+  const nullRatePresets = [
+    { label: '5%', value: 5 },
+    { label: '20%', value: 20 },
+    { label: '50%', value: 50 },
+    { label: '75%', value: 75 },
+  ];
+
+  return (
+    <div className="space-y-5">
+      {/* 基础配置 */}
+      <div className="space-y-4">
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <label className="text-sm font-medium text-foreground">
+              {t('testDataGenerator_fieldName')}
+            </label>
+            <span className="text-xs text-muted-foreground">{field.name.length}/20</span>
+          </div>
+          <Input
+            value={field.name}
+            onChange={(e) => handleNameChange(e.target.value)}
+            placeholder={t('testDataGenerator_fieldNamePlaceholder')}
+            maxLength={20}
+            className={`h-9 ${nameError ? 'border-destructive' : ''}`}
+          />
+          {nameError && <p className="text-xs text-destructive mt-1">{nameError}</p>}
+        </div>
+
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <label className="text-sm font-medium text-foreground">
+              {t('testDataGenerator_fieldDescription')}
+            </label>
+            <span className="text-xs text-muted-foreground">
+              {(field.description || '').length}/50
+            </span>
+          </div>
+          <Input
+            value={field.description || ''}
+            onChange={(e) => handleDescriptionChange(e.target.value)}
+            placeholder={t('testDataGenerator_fieldDescriptionPlaceholder')}
+            maxLength={50}
+            className="h-9"
+          />
+        </div>
+      </div>
+
+      {/* 必填/选填配置 */}
+      <div className="space-y-3">
+        <div className="flex items-center justify-between">
+          <label className="text-sm font-medium text-foreground">
+            {t('testDataGenerator_required')}
+          </label>
+          <Switch checked={field.required} onCheckedChange={handleRequiredChange} />
+        </div>
+
+        {!field.required && (
+          <div className="space-y-2 pl-1">
+            <div className="flex items-center justify-between">
+              <span className="text-sm text-muted-foreground">
+                {t('testDataGenerator_nullRate')}
+              </span>
+              <Badge variant="secondary" className="text-xs">
+                {field.nullRate}%
+              </Badge>
+            </div>
+            <Input
+              type="number"
+              value={field.nullRate}
+              onChange={(e) => {
+                const value = Number(e.target.value);
+                if (value >= 0 && value <= 100) {
+                  handleNullRateChange(value);
+                }
+              }}
+              min={0}
+              max={100}
+              step={5}
+              className="h-9 w-full"
+            />
+            <div className="flex gap-2">
+              {nullRatePresets.map((preset) => (
+                <button
+                  key={preset.value}
+                  onClick={() => handleNullRateChange(preset.value)}
+                  className={`px-3 py-1.5 text-xs rounded-md transition-colors ${
+                    field.nullRate === preset.value
+                      ? 'bg-primary text-primary-foreground'
+                      : 'bg-muted text-muted-foreground hover:bg-muted/80'
+                  }`}
+                >
+                  {preset.label}
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* 唯一性约束 */}
+      <div className="flex items-center justify-between">
+        <label className="text-sm font-medium text-foreground">
+          {t('testDataGenerator_uniqueConstraint')}
+        </label>
+        <Switch checked={field.unique} onCheckedChange={handleUniqueChange} />
+      </div>
+
+      {/* 生成器选择 */}
+      <div className="space-y-2">
+        <label className="text-sm font-medium text-foreground">
+          {t('testDataGenerator_generator')}
+        </label>
+        <GeneratorSelector selectedId={field.generatorId} onChange={handleGeneratorChange} />
+      </div>
+
+      {/* 生成器参数配置 */}
+      {generator && (
+        <div className="space-y-2">
+          <label className="text-sm font-medium text-foreground">
+            {t('testDataGenerator_generatorParams')}
+          </label>
+          <GeneratorConfig
+            generator={generator}
+            params={field.params}
+            onChange={handleParamsChange}
+          />
+        </div>
+      )}
+    </div>
+  );
+}

src/pages/TestDataGenerator/components/FieldItem.tsx

@@ -0,0 +1,59 @@
+/**
+ * 字段项组件
+ * 展示单个字段的基本信息，适配固定高度卡片
+ */
+
+import { useI18n } from '@/utils/chromeI18n';
+import { getGeneratorById } from '@/lib/generators';
+import { Badge } from '@/components/ui/badge';
+import type { FieldConfig } from '@/types/testDataGenerator';
+
+interface FieldItemProps {
+  field: FieldConfig;
+  onClick: () => void;
+}
+
+export default function FieldItem({ field, onClick }: FieldItemProps) {
+  const { t } = useI18n('testDataGenerator');
+  const generator = getGeneratorById(field.generatorId);
+
+  return (
+    <div
+      className="flex-1 min-w-0 cursor-pointer rounded-md transition-all hover:bg-muted/50"
+      onClick={onClick}
+    >
+      <div
+        className={`h-full ${field.description ? 'flex flex-col justify-center' : 'flex items-center'}`}
+      >
+        {/* 第一行：字段名 + 标签 */}
+        <div className="flex items-center gap-1.5 overflow-hidden">
+          <span className="font-medium text-sm text-foreground truncate shrink-0 max-w-[140px]">
+            {field.name}
+          </span>
+          <Badge variant="secondary" className="text-[10px] shrink-0 px-1 py-0">
+            {generator?.name || field.generatorId}
+          </Badge>
+          {!field.required && (
+            <Badge
+              variant="outline"
+              className="text-[10px] shrink-0 px-1 py-0 text-muted-foreground"
+            >
+              {field.nullRate}%
+            </Badge>
+          )}
+          {field.unique && (
+            <Badge variant="outline" className="text-[10px] shrink-0 px-1 py-0 text-blue-500">
+              {t('testDataGenerator_unique')}
+            </Badge>
+          )}
+        </div>
+        {/* 第二行：描述 */}
+        {field.description && (
+          <p className="text-[11px] text-muted-foreground mt-0.5 truncate leading-tight">
+            {field.description}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}

src/pages/TestDataGenerator/components/FieldList.tsx

@@ -0,0 +1,466 @@
+/**
+ * 字段列表组件
+ * 展示所有字段配置，支持添加、删除、拖拽排序
+ * 超过 5 条时启用虚拟列表滚动
+ */
+
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { Plus, GripVertical, Trash2, Save } from 'lucide-react';
+import { toast } from 'sonner';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Dialog, DialogContent } from '@/components/ui/dialog';
+import { useI18n } from '@/utils/chromeI18n';
+import * as ruleStorage from '@/utils/ruleStorage';
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+  type DragStartEvent,
+  DragOverlay,
+} from '@dnd-kit/core';
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+  useSortable,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import type { FieldConfig, DataRule } from '@/types/testDataGenerator';
+import FieldItem from './FieldItem';
+
+/** 最大字段数量 */
+export const MAX_FIELDS = 40;
+
+/** 虚拟列表配置 */
+const VISIBLE_COUNT = 5;
+const ROW_HEIGHT = 60; // 卡片高度 52 + 间距 8
+const ROW_GAP = 8;
+const OVERSCAN = 2;
+const DRAG_OVERSCAN = 10; // 拖拽时增加的预加载范围
+
+interface FieldListProps {
+  fields: FieldConfig[];
+  onUpdate: (index: number, field: FieldConfig) => void;
+  onRemove: (index: number) => void;
+  onAdd: () => void;
+  onEdit: (index: number) => void;
+  onReorder: (oldIndex: number, newIndex: number) => void;
+  editingRule?: DataRule | null;
+  onRuleSaved?: () => void;
+}
+
+/** 可排序的字段项 */
+function SortableFieldItem({
+  field,
+  onEdit,
+  onRemove,
+}: {
+  field: FieldConfig;
+  onEdit: () => void;
+  onRemove: () => void;
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: field.id,
+  });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+    zIndex: isDragging ? 10 : 0,
+    height: ROW_HEIGHT - ROW_GAP, // 固定卡片高度 52px，与虚拟模式一致
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={`group relative rounded-lg border transition-all ${
+        isDragging
+          ? 'border-primary shadow-lg'
+          : 'border-border hover:border-muted-foreground/30 hover:shadow-sm'
+      }`}
+    >
+      <div className="flex items-center gap-2 h-full px-3 py-2">
+        {/* 拖拽手柄 */}
+        <button
+          className="cursor-grab active:cursor-grabbing p-1 rounded hover:bg-muted/50 touch-none shrink-0"
+          {...attributes}
+          {...listeners}
+        >
+          <GripVertical className="h-4 w-4 text-muted-foreground" />
+        </button>
+
+        <div className="flex-1 min-w-0">
+          <FieldItem field={field} onClick={onEdit} />
+        </div>
+
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity text-destructive hover:text-destructive"
+          onClick={onRemove}
+        >
+          <Trash2 className="h-4 w-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default function FieldList({
+  fields,
+  onUpdate: _onUpdate,
+  onRemove,
+  onAdd,
+  onEdit,
+  onReorder,
+  editingRule,
+  onRuleSaved,
+}: FieldListProps) {
+  const { t } = useI18n('testDataGenerator');
+  const [scrollTop, setScrollTop] = useState(0);
+  const [activeId, setActiveId] = useState<string | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [showSaveDialog, setShowSaveDialog] = useState(false);
+  const [showConfirmOverwrite, setShowConfirmOverwrite] = useState(false);
+  const [ruleName, setRuleName] = useState('');
+  const [ruleDescription, setRuleDescription] = useState('');
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: { distance: 5 },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  const handleDragStart = (event: DragStartEvent) => {
+    setActiveId(String(event.active.id));
+  };
+
+  // 拖拽时的滚轮滚动处理
+  useEffect(() => {
+    if (!activeId || !containerRef.current) return;
+
+    const container = containerRef.current;
+
+    const handleWheel = (e: WheelEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      // 滚动容器
+      const scrollAmount = e.deltaY * 0.5; // 降低滚动速度，更易控制
+      const newScrollTop = Math.max(
+        0,
+        Math.min(
+          container.scrollHeight - container.clientHeight,
+          container.scrollTop + scrollAmount,
+        ),
+      );
+      container.scrollTop = newScrollTop;
+      setScrollTop(newScrollTop);
+    };
+
+    // 在 document 级别监听，使用 capture 阶段以优先处理
+    document.addEventListener('wheel', handleWheel, { capture: true, passive: false });
+
+    return () => {
+      document.removeEventListener('wheel', handleWheel, { capture: true });
+    };
+  }, [activeId]);
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+    setActiveId(null);
+    if (!over || active.id === over.id) return;
+
+    const oldIndex = fields.findIndex((f) => f.id === active.id);
+    const newIndex = fields.findIndex((f) => f.id === over.id);
+    if (oldIndex !== -1 && newIndex !== -1) {
+      onReorder(oldIndex, newIndex);
+    }
+  };
+
+  const handleScroll = useCallback(() => {
+    if (containerRef.current) {
+      setScrollTop(containerRef.current.scrollTop);
+    }
+  }, []);
+
+  const isVirtual = fields.length > VISIBLE_COUNT;
+  const totalHeight = fields.length * ROW_HEIGHT;
+  const fixedContainerHeight = VISIBLE_COUNT * ROW_HEIGHT;
+  // 少于 5 条时高度自适应，5 条及以上固定为 5 条的高度
+  const containerStyle =
+    fields.length < VISIBLE_COUNT
+      ? { height: 'auto' as const, overflowY: 'visible' as const }
+      : { height: fixedContainerHeight, overflowY: 'auto' as const };
+
+  // 虚拟列表：计算可见范围（拖拽时扩展预加载范围）
+  const currentOverscan = activeId ? DRAG_OVERSCAN : OVERSCAN;
+  const visibleStart = Math.max(0, Math.floor(scrollTop / ROW_HEIGHT) - currentOverscan);
+  const visibleEnd = Math.min(
+    fields.length,
+    Math.ceil((scrollTop + fixedContainerHeight) / ROW_HEIGHT) + currentOverscan,
+  );
+  const visibleFields = isVirtual ? fields.slice(visibleStart, visibleEnd) : fields;
+
+  // 查找拖拽中的项目（用于 DragOverlay）
+  const activeField = activeId ? fields.find((f) => f.id === activeId) : null;
+
+  const isMaxReached = fields.length >= MAX_FIELDS;
+
+  // 编辑模式下，保存时更新原规则
+  const handleUpdateRule = useCallback(() => {
+    if (!editingRule) return;
+
+    const updated = ruleStorage.update(editingRule.id, {
+      fields: fields,
+    });
+
+    if (updated) {
+      toast.success(t('testDataGenerator_ruleUpdated'));
+      onRuleSaved?.();
+    }
+  }, [editingRule, fields, t, onRuleSaved]);
+
+  // 新建规则或另存为
+  const handleSave = useCallback(
+    (overwrite = false) => {
+      if (!ruleName.trim()) return;
+
+      const trimmedName = ruleName.trim();
+
+      // 检查名称是否重复
+      if (!overwrite) {
+        const existingRule = ruleStorage.getByName(trimmedName);
+        if (existingRule) {
+          setShowConfirmOverwrite(true);
+          return;
+        }
+      }
+
+      const newRule = ruleStorage.save({
+        name: trimmedName,
+        description: ruleDescription.trim(),
+        fields: fields,
+      });
+
+      if (newRule) {
+        setShowSaveDialog(false);
+        setShowConfirmOverwrite(false);
+        setRuleName('');
+        setRuleDescription('');
+        toast.success(t('testDataGenerator_ruleSaved'));
+        onRuleSaved?.();
+      }
+    },
+    [ruleName, ruleDescription, fields, t, onRuleSaved],
+  );
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex items-center justify-between mb-3">
+        <h3 className="text-sm font-medium text-foreground">
+          {t('testDataGenerator_fields')} ({fields.length}/{MAX_FIELDS})
+        </h3>
+        <div className="flex items-center gap-2">
+          {editingRule ? (
+            <>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleUpdateRule}
+                disabled={fields.length === 0}
+                className="h-8 gap-1.5 px-2.5"
+                title={`${t('testDataGenerator_editing')}: ${editingRule.name}`}
+              >
+                <Save className="h-3.5 w-3.5" />
+                {t('testDataGenerator_updateRule')}
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setShowSaveDialog(true)}
+                disabled={fields.length === 0}
+                className="h-8 px-2"
+              >
+                {t('testDataGenerator_saveAs')}
+              </Button>
+            </>
+          ) : (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setShowSaveDialog(true)}
+              disabled={fields.length === 0}
+              className="h-8 gap-1.5 px-2.5"
+            >
+              <Save className="h-3.5 w-3.5" />
+              {t('testDataGenerator_saveRule')}
+            </Button>
+          )}
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={onAdd}
+            disabled={isMaxReached}
+            className="h-8 gap-1.5 px-2.5"
+          >
+            <Plus className="h-4 w-4" />
+            {t('testDataGenerator_addField')}
+          </Button>
+        </div>
+      </div>
+
+      <div className="flex-1 min-h-0">
+        {fields.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-8 text-center">
+            <GripVertical className="h-10 w-10 text-muted-foreground/40 mb-3" />
+            <p className="text-sm text-muted-foreground">{t('testDataGenerator_noFields')}</p>
+            <p className="text-xs text-muted-foreground/70 mt-1">
+              {t('testDataGenerator_addFieldHint')}
+            </p>
+          </div>
+        ) : (
+          <DndContext
+            sensors={sensors}
+            collisionDetection={closestCenter}
+            onDragStart={handleDragStart}
+            onDragEnd={handleDragEnd}
+          >
+            <SortableContext items={fields.map((f) => f.id)} strategy={verticalListSortingStrategy}>
+              <div
+                ref={containerRef}
+                className="overflow-y-auto"
+                style={containerStyle}
+                onScroll={handleScroll}
+              >
+                {isVirtual ? (
+                  /* 虚拟滚动模式 */
+                  <div style={{ height: totalHeight, position: 'relative' }}>
+                    <div
+                      style={{
+                        position: 'absolute',
+                        top: visibleStart * ROW_HEIGHT,
+                        left: 0,
+                        right: 0,
+                      }}
+                    >
+                      {visibleFields.map((field, vi) => {
+                        const realIndex = fields.findIndex((f) => f.id === field.id);
+                        const isLast = visibleStart + vi === fields.length - 1;
+                        return (
+                          <div
+                            key={field.id}
+                            style={{
+                              height: ROW_HEIGHT,
+                              paddingBottom: isLast ? 0 : ROW_GAP,
+                            }}
+                          >
+                            <SortableFieldItem
+                              field={field}
+                              onEdit={() => onEdit(realIndex)}
+                              onRemove={() => onRemove(realIndex)}
+                            />
+                          </div>
+                        );
+                      })}
+                    </div>
+                  </div>
+                ) : (
+                  /* 普通模式（≤5 条） */
+                  <div className="space-y-2">
+                    {fields.map((field, index) => (
+                      <SortableFieldItem
+                        key={field.id}
+                        field={field}
+                        onEdit={() => onEdit(index)}
+                        onRemove={() => onRemove(index)}
+                      />
+                    ))}
+                  </div>
+                )}
+              </div>
+            </SortableContext>
+            <DragOverlay>
+              {activeField ? (
+                <div className="rounded-lg border border-primary bg-background shadow-lg opacity-90">
+                  <div className="flex items-center gap-2 h-full px-3 py-2">
+                    <div className="p-1">
+                      <GripVertical className="h-4 w-4 text-muted-foreground" />
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <FieldItem field={activeField} onClick={() => {}} />
+                    </div>
+                    <div className="h-8 w-8 shrink-0" />
+                  </div>
+                </div>
+              ) : null}
+            </DragOverlay>
+          </DndContext>
+        )}
+      </div>
+
+      {/* 保存规则对话框 */}
+      <Dialog open={showSaveDialog} onOpenChange={setShowSaveDialog}>
+        <DialogContent
+          showCloseButton={false}
+          className="w-[calc(100vw-4rem)] max-w-[420px] p-0 pt-6 flex flex-col"
+        >
+          <div className="flex-1 overflow-y-auto px-6 pt-2 pb-4 space-y-4">
+            <Input
+              value={ruleName}
+              onChange={(e) => setRuleName(e.target.value)}
+              placeholder={t('testDataGenerator_ruleNamePlaceholder')}
+              className="h-9"
+            />
+            <Input
+              value={ruleDescription}
+              onChange={(e) => setRuleDescription(e.target.value)}
+              placeholder={t('testDataGenerator_ruleDescPlaceholder')}
+              className="h-9"
+            />
+          </div>
+          <div className="flex justify-end gap-2 px-6 py-2 border-t shrink-0">
+            <Button variant="ghost" size="sm" onClick={() => setShowSaveDialog(false)}>
+              {t('testDataGenerator_cancel')}
+            </Button>
+            <Button size="sm" onClick={() => handleSave()} disabled={!ruleName.trim()}>
+              {t('testDataGenerator_confirm')}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* 覆盖确认对话框 */}
+      <Dialog open={showConfirmOverwrite} onOpenChange={setShowConfirmOverwrite}>
+        <DialogContent
+          showCloseButton={false}
+          className="w-[calc(100vw-4rem)] max-w-[420px] p-0 pt-6 flex flex-col"
+        >
+          <div className="flex-1 overflow-y-auto px-6 pb-4">
+            <p className="text-sm text-muted-foreground">
+              {t('testDataGenerator_ruleNameDuplicate')}
+            </p>
+          </div>
+          <div className="flex justify-end gap-2 px-6 py-2 border-t shrink-0">
+            <Button variant="ghost" size="sm" onClick={() => setShowConfirmOverwrite(false)}>
+              {t('testDataGenerator_cancel')}
+            </Button>
+            <Button size="sm" onClick={() => handleSave(true)}>
+              {t('testDataGenerator_overwrite')}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

src/pages/TestDataGenerator/components/GenerateButton.tsx

@@ -0,0 +1,73 @@
+/**
+ * 生成按钮组件
+ * 显示生成按钮、加载状态和进度条
+ */
+
+import { Play, Square } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { useI18n } from '@/utils/chromeI18n';
+import type { GenerateProgress } from '@/types/testDataGenerator';
+
+interface GenerateButtonProps {
+  onClick: () => void;
+  onCancel: () => void;
+  isGenerating: boolean;
+  progress: GenerateProgress | null;
+  disabled?: boolean;
+}
+
+export default function GenerateButton({
+  onClick,
+  onCancel,
+  isGenerating,
+  progress,
+  disabled,
+}: GenerateButtonProps) {
+  const { t } = useI18n('testDataGenerator');
+
+  return (
+    <div className="space-y-3">
+      {isGenerating ? (
+        <>
+          <Button variant="destructive" onClick={onCancel} className="w-full h-11 gap-2">
+            <Square className="h-5 w-5" />
+            {t('testDataGenerator_cancel')}
+          </Button>
+
+          {/* 进度条 */}
+          {progress && (
+            <div className="space-y-2">
+              <div className="flex items-center justify-between text-xs text-muted-foreground">
+                <span>
+                  {t('testDataGenerator_progress', {
+                    current: progress.generated.toLocaleString(),
+                    total: progress.total.toLocaleString(),
+                  })}
+                </span>
+                <span>{progress.progress}%</span>
+              </div>
+              <div className="h-2 bg-muted rounded-full overflow-hidden">
+                <div
+                  className="h-full bg-primary transition-all duration-300"
+                  style={{ width: `${progress.progress}%` }}
+                />
+              </div>
+              {progress.estimatedTimeLeft !== undefined && (
+                <p className="text-xs text-muted-foreground text-center">
+                  {t('testDataGenerator_estimatedTime', {
+                    time: Math.ceil(progress.estimatedTimeLeft / 1000),
+                  })}
+                </p>
+              )}
+            </div>
+          )}
+        </>
+      ) : (
+        <Button onClick={onClick} disabled={disabled} className="w-full h-11 gap-2">
+          <Play className="h-5 w-5" />
+          {t('testDataGenerator_generate')}
+        </Button>
+      )}
+    </div>
+  );
+}

src/pages/TestDataGenerator/components/GenerateOptions.tsx

@@ -0,0 +1,91 @@
+/**
+ * 生成选项组件
+ * 配置生成数量、数据格式等选项
+ */
+
+import { useI18n } from '@/utils/chromeI18n';
+import { Input } from '@/components/ui/input';
+
+interface GenerateOptionsProps {
+  count: number;
+  onCountChange: (count: number) => void;
+  format: 'json' | 'csv';
+  onFormatChange: (format: 'json' | 'csv') => void;
+}
+
+const COUNT_PRESETS = [50, 100, 1000, 5000, 10000];
+
+const FORMAT_OPTIONS = [
+  { value: 'json' as const, label: 'JSON' },
+  { value: 'csv' as const, label: 'CSV' },
+];
+
+export default function GenerateOptions({
+  count,
+  onCountChange,
+  format,
+  onFormatChange,
+}: GenerateOptionsProps) {
+  const { t } = useI18n('testDataGenerator');
+
+  return (
+    <div className="space-y-4">
+      {/* 生成数量 */}
+      <div className="space-y-2">
+        <label className="text-sm font-medium text-foreground">
+          {t('testDataGenerator_count')}
+        </label>
+        <div className="flex flex-wrap gap-2">
+          {COUNT_PRESETS.map((preset) => (
+            <button
+              key={preset}
+              onClick={() => onCountChange(preset)}
+              className={`px-3 py-1.5 text-xs font-medium rounded-md transition-colors ${
+                count === preset
+                  ? 'bg-primary text-primary-foreground'
+                  : 'bg-muted text-muted-foreground hover:bg-muted/80'
+              }`}
+            >
+              {preset.toLocaleString()}
+            </button>
+          ))}
+        </div>
+        <Input
+          type="number"
+          value={count}
+          onChange={(e) => {
+            const value = Number(e.target.value);
+            if (value > 0 && value <= 100000) {
+              onCountChange(value);
+            }
+          }}
+          min={1}
+          max={100000}
+          className="h-9"
+        />
+      </div>
+
+      {/* 数据格式 */}
+      <div className="space-y-2">
+        <label className="text-sm font-medium text-foreground">
+          {t('testDataGenerator_format')}
+        </label>
+        <div className="flex gap-2">
+          {FORMAT_OPTIONS.map((option) => (
+            <button
+              key={option.value}
+              onClick={() => onFormatChange(option.value)}
+              className={`flex-1 px-3 py-1.5 text-xs font-medium rounded-md transition-colors ${
+                format === option.value
+                  ? 'bg-primary text-primary-foreground'
+                  : 'bg-muted text-muted-foreground hover:bg-muted/80'
+              }`}
+            >
+              {option.label}
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/TestDataGenerator/components/GeneratorConfig.tsx

@@ -0,0 +1,126 @@
+/**
+ * 生成器配置组件
+ * 根据生成器参数定义动态渲染配置表单
+ */
+
+import { Input } from '@/components/ui/input';
+import { Switch } from '@/components/ui/switch';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { useI18n } from '@/utils/chromeI18n';
+import type { GeneratorDefinition } from '@/types/testDataGenerator';
+
+interface GeneratorConfigProps {
+  generator: GeneratorDefinition;
+  params: Record<string, unknown>;
+  onChange: (params: Record<string, unknown>) => void;
+}
+
+export default function GeneratorConfig({ generator, params, onChange }: GeneratorConfigProps) {
+  const { t } = useI18n('testDataGenerator');
+  const handleParamChange = (key: string, value: unknown) => {
+    onChange({ ...params, [key]: value });
+  };
+
+  if (generator.params.length === 0) {
+    return (
+      <p className="text-sm text-muted-foreground py-2">
+        {t('testDataGenerator_noGeneratorParams')}
+      </p>
+    );
+  }
+
+  return (
+    <div className="space-y-4 p-3 rounded-lg bg-muted/30">
+      {generator.params.map((param) => (
+        <div key={param.key} className="space-y-2">
+          <label className="text-sm font-medium text-foreground">
+            {param.label}
+            {param.required && <span className="text-destructive ml-1">*</span>}
+          </label>
+          {param.description && (
+            <p className="text-xs text-muted-foreground">{param.description}</p>
+          )}
+
+          {param.type === 'string' && (
+            <Input
+              value={String(params[param.key] ?? param.defaultValue)}
+              onChange={(e) => handleParamChange(param.key, e.target.value)}
+              placeholder={param.placeholder}
+              className="h-9"
+            />
+          )}
+
+          {param.type === 'number' && (
+            <Input
+              type="number"
+              value={Number(params[param.key] ?? param.defaultValue)}
+              onChange={(e) => handleParamChange(param.key, Number(e.target.value))}
+              min={param.min}
+              max={param.max}
+              className="h-9"
+            />
+          )}
+
+          {param.type === 'boolean' && (
+            <div className="flex items-center justify-between">
+              <span className="text-sm text-muted-foreground">
+                {params[param.key] !== false
+                  ? t('testDataGenerator_enabled')
+                  : t('testDataGenerator_disabled')}
+              </span>
+              <Switch
+                checked={params[param.key] !== false}
+                onCheckedChange={(checked) => handleParamChange(param.key, checked)}
+              />
+            </div>
+          )}
+
+          {param.type === 'select' && (
+            <Select
+              value={String(params[param.key] ?? param.defaultValue)}
+              onValueChange={(value) => handleParamChange(param.key, value)}
+            >
+              <SelectTrigger className="h-9">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {param.options?.map((option) => (
+                  <SelectItem key={String(option.value)} value={String(option.value)}>
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          )}
+
+          {param.type === 'array' && (
+            <Input
+              value={
+                Array.isArray(params[param.key])
+                  ? (params[param.key] as string[]).join(', ')
+                  : String(param.defaultValue || '')
+              }
+              onChange={(e) =>
+                handleParamChange(
+                  param.key,
+                  e.target.value
+                    .split(',')
+                    .map((s) => s.trim())
+                    .filter(Boolean),
+                )
+              }
+              placeholder={t('testDataGenerator_commaSeparated')}
+              className="h-9"
+            />
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}

src/pages/TestDataGenerator/components/GeneratorSelector.tsx

@@ -0,0 +1,90 @@
+/**
+ * 生成器选择器组件
+ * 以分类形式展示所有可用生成器
+ */
+
+import { useState } from 'react';
+import { Search, User, Briefcase, Code, Hash } from 'lucide-react';
+import { Input } from '@/components/ui/input';
+import { useI18n } from '@/utils/chromeI18n';
+import { generatorCategories, getGeneratorsByCategory, searchGenerators } from '@/lib/generators';
+
+interface GeneratorSelectorProps {
+  selectedId: string;
+  onChange: (id: string) => void;
+}
+
+const categoryIcons: Record<string, React.ComponentType<{ className?: string }>> = {
+  personal: User,
+  business: Briefcase,
+  technical: Code,
+  basic: Hash,
+};
+
+export default function GeneratorSelector({ selectedId, onChange }: GeneratorSelectorProps) {
+  const { t } = useI18n('testDataGenerator');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [activeCategory, setActiveCategory] = useState<string>(generatorCategories[0]?.id || '');
+
+  const generators = searchQuery
+    ? searchGenerators(searchQuery)
+    : getGeneratorsByCategory(activeCategory);
+
+  return (
+    <div className="space-y-3">
+      {/* 搜索框 */}
+      <div className="relative">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+        <Input
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          placeholder={t('testDataGenerator_searchGenerator')}
+          className="pl-9 h-9"
+        />
+      </div>
+
+      {/* 分类标签 */}
+      {!searchQuery && (
+        <div className="flex flex-wrap gap-2">
+          {generatorCategories.map((category) => {
+            const Icon = categoryIcons[category.id];
+            return (
+              <button
+                key={category.id}
+                onClick={() => setActiveCategory(category.id)}
+                className={`flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md transition-colors ${
+                  activeCategory === category.id
+                    ? 'bg-primary text-primary-foreground'
+                    : 'bg-muted text-muted-foreground hover:bg-muted/80'
+                }`}
+              >
+                {Icon && <Icon className="h-3.5 w-3.5" />}
+                {category.name}
+              </button>
+            );
+          })}
+        </div>
+      )}
+
+      {/* 生成器列表 */}
+      <div className="grid grid-cols-2 gap-2 max-h-48 overflow-y-auto">
+        {generators.map((generator) => (
+          <button
+            key={generator.id}
+            onClick={() => onChange(generator.id)}
+            className={`flex flex-col items-start p-2 text-left rounded-md border transition-colors ${
+              selectedId === generator.id
+                ? 'border-primary bg-primary/5'
+                : 'border-border hover:border-muted-foreground/30'
+            }`}
+          >
+            <span className="text-sm font-medium text-foreground">{generator.name}</span>
+            <span className="text-xs text-muted-foreground line-clamp-1">
+              {generator.description}
+            </span>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}

src/pages/TestDataGenerator/components/ResultPanel.tsx

@@ -0,0 +1,115 @@
+/**
+ * 结果面板组件
+ * 展示生成结果的状态和统计信息
+ */
+
+import { CheckCircle, AlertTriangle, XCircle, Clock, Database } from 'lucide-react';
+import { useI18n } from '@/utils/chromeI18n';
+import type { GenerateResult } from '@/types/testDataGenerator';
+
+interface ResultPanelProps {
+  result: GenerateResult | null;
+}
+
+export default function ResultPanel({ result }: ResultPanelProps) {
+  const { t } = useI18n('testDataGenerator');
+
+  if (!result) return null;
+
+  const getStatusIcon = () => {
+    if (result.success && (!result.warnings || result.warnings.length === 0)) {
+      return <CheckCircle className="h-5 w-5 text-green-500" />;
+    }
+    if (result.success && result.warnings && result.warnings.length > 0) {
+      return <AlertTriangle className="h-5 w-5 text-yellow-500" />;
+    }
+    return <XCircle className="h-5 w-5 text-destructive" />;
+  };
+
+  const getStatusText = () => {
+    if (result.success && (!result.warnings || result.warnings.length === 0)) {
+      return t('testDataGenerator_success');
+    }
+    if (result.success && result.warnings && result.warnings.length > 0) {
+      return t('testDataGenerator_partialSuccess');
+    }
+    return t('testDataGenerator_failed');
+  };
+
+  return (
+    <div className="space-y-3">
+      {/* 状态标题 */}
+      <div className="flex items-center gap-2">
+        {getStatusIcon()}
+        <span className="text-sm font-medium text-foreground">{getStatusText()}</span>
+      </div>
+
+      {/* 统计信息 */}
+      {result.stats && (
+        <div className="grid grid-cols-3 gap-3">
+          <div className="flex flex-col items-center p-2 rounded-lg bg-muted/30">
+            <Database className="h-4 w-4 text-muted-foreground mb-1" />
+            <span className="text-lg font-semibold text-foreground">
+              {result.stats.total.toLocaleString()}
+            </span>
+            <span className="text-xs text-muted-foreground">
+              {t('testDataGenerator_totalCount')}
+            </span>
+          </div>
+
+          <div className="flex flex-col items-center p-2 rounded-lg bg-muted/30">
+            <CheckCircle className="h-4 w-4 text-green-500 mb-1" />
+            <span className="text-lg font-semibold text-green-500">
+              {result.stats.success.toLocaleString()}
+            </span>
+            <span className="text-xs text-muted-foreground">
+              {t('testDataGenerator_successCount')}
+            </span>
+          </div>
+
+          <div className="flex flex-col items-center p-2 rounded-lg bg-muted/30">
+            <Clock className="h-4 w-4 text-muted-foreground mb-1" />
+            <span className="text-lg font-semibold text-foreground">
+              {(result.stats.duration / 1000).toFixed(2)}s
+            </span>
+            <span className="text-xs text-muted-foreground">{t('testDataGenerator_duration')}</span>
+          </div>
+        </div>
+      )}
+
+      {/* 警告信息 */}
+      {result.warnings && result.warnings.length > 0 && (
+        <div className="p-3 rounded-lg bg-yellow-500/10 border border-yellow-500/20">
+          <div className="flex items-center gap-2 mb-2">
+            <AlertTriangle className="h-4 w-4 text-yellow-500" />
+            <span className="text-sm font-medium text-yellow-500">
+              {t('testDataGenerator_warnings')}
+            </span>
+          </div>
+          <ul className="list-disc list-inside space-y-1">
+            {result.warnings.slice(0, 5).map((warning, index) => (
+              <li key={index} className="text-xs text-yellow-500/80">
+                {warning}
+              </li>
+            ))}
+            {result.warnings.length > 5 && (
+              <li className="text-xs text-yellow-500/80">
+                ... {t('testDataGenerator_moreWarnings', { count: result.warnings.length - 5 })}
+              </li>
+            )}
+          </ul>
+        </div>
+      )}
+
+      {/* 错误信息 */}
+      {result.error && (
+        <div className="p-3 rounded-lg bg-destructive/10 border border-destructive/20">
+          <div className="flex items-center gap-2">
+            <XCircle className="h-4 w-4 text-destructive" />
+            <span className="text-sm text-destructive">{result.error}</span>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/pages/TestDataGenerator/components/RuleManager.tsx

@@ -0,0 +1,324 @@
+/**
+ * 规则管理器组件
+ * 管理测试数据生成规则的加载、删除等操作
+ */
+
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import {
+  Search,
+  Upload,
+  Download,
+  Trash2,
+  Copy,
+  Edit,
+  Clock,
+  Tag,
+  Loader2,
+  FolderOpen,
+} from 'lucide-react';
+import { toast } from 'sonner';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Dialog, DialogContent } from '@/components/ui/dialog';
+import { useI18n } from '@/utils/chromeI18n';
+import * as ruleStorage from '@/utils/ruleStorage';
+import type { DataRule, FieldConfig } from '@/types/testDataGenerator';
+
+interface RuleManagerProps {
+  onLoad: (fields: FieldConfig[]) => void;
+  onEdit?: (rule: DataRule) => void;
+  onRulesChanged?: () => void;
+}
+
+export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleManagerProps) {
+  const { t, i18n } = useI18n('testDataGenerator');
+  const [rules, setRules] = useState<DataRule[]>(() => ruleStorage.getAll());
+  const [searchQuery, setSearchQuery] = useState('');
+  const [debouncedSearchQuery, setDebouncedSearchQuery] = useState('');
+  const [ruleToDelete, setRuleToDelete] = useState<DataRule | null>(null);
+  const [isImporting, setIsImporting] = useState(false);
+  const [isExporting, setIsExporting] = useState(false);
+
+  const loadRules = useCallback(() => {
+    setRules(ruleStorage.getAll());
+  }, []);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedSearchQuery(searchQuery);
+    }, 250);
+    return () => clearTimeout(timer);
+  }, [searchQuery]);
+
+  const filteredRules = useMemo(() => {
+    if (!debouncedSearchQuery) return rules;
+    const query = debouncedSearchQuery.toLowerCase();
+    return rules.filter(
+      (rule) =>
+        rule.name.toLowerCase().includes(query) || rule.description?.toLowerCase().includes(query),
+    );
+  }, [rules, debouncedSearchQuery]);
+
+  const handleLoad = useCallback(
+    (rule: DataRule) => {
+      onLoad(rule.fields);
+      ruleStorage.recordUse(rule.id);
+      loadRules();
+      toast.success(t('testDataGenerator_ruleLoaded', { name: rule.name }));
+    },
+    [onLoad, loadRules, t],
+  );
+
+  const handleDelete = useCallback(() => {
+    if (!ruleToDelete) return;
+    ruleStorage.deleteRule(ruleToDelete.id);
+    loadRules();
+    setRuleToDelete(null);
+    toast.success(t('testDataGenerator_ruleDeleted'));
+    onRulesChanged?.();
+  }, [ruleToDelete, loadRules, t, onRulesChanged]);
+
+  const handleDuplicate = useCallback(
+    (id: string) => {
+      const result = ruleStorage.duplicate(id, t('testDataGenerator_ruleCopySuffix'));
+      if (result) {
+        loadRules();
+        toast.success(t('testDataGenerator_ruleDuplicated'));
+        onRulesChanged?.();
+      }
+    },
+    [loadRules, t, onRulesChanged],
+  );
+
+  const handleEdit = useCallback(
+    (rule: DataRule) => {
+      onEdit?.(rule);
+    },
+    [onEdit],
+  );
+
+  const handleExport = useCallback(() => {
+    try {
+      setIsExporting(true);
+      const json = ruleStorage.exportRules();
+      const blob = new Blob([json], { type: 'application/json' });
+      const url = URL.createObjectURL(blob);
+      try {
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = 'test-data-rules.json';
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+      } finally {
+        URL.revokeObjectURL(url);
+      }
+      toast.success(t('testDataGenerator_exportSuccess'));
+    } catch (error) {
+      console.error('[RuleManager] 导出失败:', error);
+      toast.error(t('testDataGenerator_exportFailed'));
+    } finally {
+      setIsExporting(false);
+    }
+  }, [t]);
+
+  const handleImport = useCallback(() => {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = '.json';
+    input.onchange = async (e) => {
+      try {
+        setIsImporting(true);
+        const file = (e.target as HTMLInputElement).files?.[0];
+        if (!file) return;
+
+        const text = await file.text();
+        const result = ruleStorage.importRules(text);
+
+        if (result.success > 0) {
+          toast.success(t('testDataGenerator_importSuccess', { count: result.success }));
+        }
+
+        if (result.failed > 0) {
+          toast.error(t('testDataGenerator_importFailed', { count: result.failed }));
+          console.warn('[RuleManager] 导入警告:', result.errors);
+        }
+
+        loadRules();
+        onRulesChanged?.();
+      } catch (error) {
+        console.error('[RuleManager] 导入失败:', error);
+        toast.error(t('testDataGenerator_importFailed'));
+      } finally {
+        setIsImporting(false);
+      }
+    };
+    input.click();
+  }, [loadRules, t, onRulesChanged]);
+
+  const formatDate = useCallback(
+    (timestamp: number) => {
+      return new Date(timestamp).toLocaleDateString(i18n.language || 'zh-CN', {
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+      });
+    },
+    [i18n.language],
+  );
+
+  return (
+    <div className="space-y-4">
+      {/* 删除确认对话框 */}
+      <Dialog open={!!ruleToDelete} onOpenChange={() => setRuleToDelete(null)}>
+        <DialogContent
+          showCloseButton={false}
+          className="w-[calc(100vw-4rem)] max-w-[420px] p-0 pt-6 flex flex-col"
+        >
+          <div className="flex-1 overflow-y-auto px-6 pb-4">
+            <p className="text-sm text-muted-foreground">
+              {t('testDataGenerator_confirmDeleteDescription', { name: ruleToDelete?.name ?? '' })}
+            </p>
+          </div>
+          <div className="flex justify-end gap-2 px-6 py-2 border-t shrink-0">
+            <Button variant="ghost" size="sm" onClick={() => setRuleToDelete(null)}>
+              {t('testDataGenerator_cancel')}
+            </Button>
+            <Button variant="destructive" size="sm" onClick={handleDelete}>
+              {t('testDataGenerator_confirm')}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* 工具栏 */}
+      <div className="flex items-center gap-2 flex-wrap">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={handleImport}
+          disabled={isImporting}
+          className="h-8 gap-1.5"
+        >
+          {isImporting ? (
+            <Loader2 className="h-4 w-4 animate-spin" />
+          ) : (
+            <Upload className="h-4 w-4" />
+          )}
+          {t('testDataGenerator_import')}
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={handleExport}
+          disabled={isExporting || rules.length === 0}
+          className="h-8 gap-1.5"
+        >
+          {isExporting ? (
+            <Loader2 className="h-4 w-4 animate-spin" />
+          ) : (
+            <Download className="h-4 w-4" />
+          )}
+          {t('testDataGenerator_export')}
+        </Button>
+      </div>
+
+      {/* 搜索框 */}
+      <div className="relative">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+        <Input
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value.slice(0, 20))}
+          placeholder={t('testDataGenerator_searchRules')}
+          className="pl-9 pr-24 h-9"
+          maxLength={20}
+        />
+        <span className="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-muted-foreground pointer-events-none">
+          {t('testDataGenerator_ruleCount', { count: rules.length, max: 20 })}
+        </span>
+      </div>
+
+      {/* 规则列表 */}
+      <div className="space-y-2 max-h-64 overflow-y-auto">
+        {filteredRules.length === 0 ? (
+          <div className="text-center py-6">
+            <Tag className="h-8 w-8 text-muted-foreground/40 mx-auto mb-2" />
+            <p className="text-sm text-muted-foreground">
+              {debouncedSearchQuery
+                ? t('testDataGenerator_noSearchResults')
+                : t('testDataGenerator_noRules')}
+            </p>
+          </div>
+        ) : (
+          filteredRules.map((rule) => (
+            <div
+              key={rule.id}
+              className="flex items-center gap-3 p-2 rounded-lg border hover:bg-muted/30 transition-colors"
+            >
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2">
+                  <span className="font-medium text-sm text-foreground truncate">{rule.name}</span>
+                  <span className="text-xs text-muted-foreground">
+                    {rule.fields.length} {t('testDataGenerator_fields')}
+                  </span>
+                </div>
+                {rule.description && (
+                  <p className="text-xs text-muted-foreground truncate mt-0.5">
+                    {rule.description}
+                  </p>
+                )}
+                <div className="flex items-center gap-3 mt-1 text-xs text-muted-foreground">
+                  <span className="flex items-center gap-1">
+                    <Clock className="h-3 w-3" />
+                    {formatDate(rule.updatedAt)}
+                  </span>
+                  <span>{t('testDataGenerator_usedTimes', { count: rule.useCount })}</span>
+                </div>
+              </div>
+
+              <div className="flex items-center gap-1">
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-7 w-7"
+                  onClick={() => handleLoad(rule)}
+                  title={t('testDataGenerator_load')}
+                >
+                  <FolderOpen className="h-3.5 w-3.5" />
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-7 w-7"
+                  onClick={() => handleEdit(rule)}
+                  title={t('testDataGenerator_edit')}
+                >
+                  <Edit className="h-3.5 w-3.5" />
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-7 w-7"
+                  onClick={() => handleDuplicate(rule.id)}
+                  title={t('testDataGenerator_duplicate')}
+                >
+                  <Copy className="h-3.5 w-3.5" />
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-7 w-7 text-destructive hover:text-destructive"
+                  onClick={() => setRuleToDelete(rule)}
+                  title={t('testDataGenerator_delete')}
+                >
+                  <Trash2 className="h-3.5 w-3.5" />
+                </Button>
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}

src/pages/TestDataGenerator/components/__tests__/RuleManager.test.tsx

@@ -0,0 +1,189 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+// Mock dependencies
+vi.mock('@/utils/ruleStorage', () => ({
+  getAll: vi.fn(() => []),
+  save: vi.fn(),
+  deleteRule: vi.fn(),
+  duplicate: vi.fn(),
+  recordUse: vi.fn(),
+  search: vi.fn(() => []),
+  exportRules: vi.fn(() => '[]'),
+  importRules: vi.fn(() => ({ success: 0, failed: 0, errors: [] })),
+}));
+
+vi.mock('sonner', () => ({
+  toast: {
+    success: vi.fn(),
+    error: vi.fn(),
+  },
+}));
+
+import RuleManager from '../RuleManager';
+import * as ruleStorage from '@/utils/ruleStorage';
+import { toast } from 'sonner';
+import type { DataRule, FieldConfig } from '@/types/testDataGenerator';
+
+const mockedRuleStorage = vi.mocked(ruleStorage);
+const mockedToast = vi.mocked(toast);
+
+const mockFields: FieldConfig[] = [
+  {
+    id: 'field-1',
+    name: 'name',
+    generatorId: 'string',
+    params: {},
+    required: true,
+    nullRate: 0,
+    unique: false,
+  },
+];
+
+const mockRule: DataRule = {
+  id: 'rule-1',
+  name: 'Test Rule',
+  description: 'Test description',
+  fields: mockFields,
+  createdAt: Date.now(),
+  updatedAt: Date.now(),
+  useCount: 0,
+};
+
+describe('RuleManager', () => {
+  const defaultProps = {
+    onLoad: vi.fn(),
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockedRuleStorage.getAll.mockReturnValue([]);
+  });
+
+  it('should render empty state when no rules', () => {
+    render(<RuleManager {...defaultProps} />);
+
+    expect(screen.getByText('暂无保存的规则')).toBeInTheDocument();
+  });
+
+  it('should render rule list when rules exist', () => {
+    mockedRuleStorage.getAll.mockReturnValue([mockRule]);
+
+    render(<RuleManager {...defaultProps} />);
+
+    expect(screen.getByText('Test Rule')).toBeInTheDocument();
+    expect(screen.getByText('Test description')).toBeInTheDocument();
+  });
+
+  it('should load rule when load button clicked', async () => {
+    const user = userEvent.setup();
+    mockedRuleStorage.getAll.mockReturnValue([mockRule]);
+
+    render(<RuleManager {...defaultProps} />);
+
+    const loadButton = screen.getByTitle('加载');
+    await user.click(loadButton);
+
+    expect(defaultProps.onLoad).toHaveBeenCalledWith(mockFields);
+    expect(mockedRuleStorage.recordUse).toHaveBeenCalledWith('rule-1');
+    // Note: t() mock doesn't handle placeholders, so we just check it was called
+    expect(mockedToast.success).toHaveBeenCalled();
+  });
+
+  it('should show delete confirmation dialog', async () => {
+    const user = userEvent.setup();
+    mockedRuleStorage.getAll.mockReturnValue([mockRule]);
+
+    render(<RuleManager {...defaultProps} />);
+
+    const deleteButton = screen.getByTitle('删除');
+    await user.click(deleteButton);
+
+    expect(screen.getByText(/确定要删除规则/)).toBeInTheDocument();
+  });
+
+  it('should delete rule after confirmation', async () => {
+    const user = userEvent.setup();
+    mockedRuleStorage.getAll.mockReturnValue([mockRule]);
+
+    render(<RuleManager {...defaultProps} />);
+
+    // Open delete dialog
+    await user.click(screen.getByTitle('删除'));
+
+    // Confirm delete
+    await user.click(screen.getByText('确认'));
+
+    expect(mockedRuleStorage.deleteRule).toHaveBeenCalledWith('rule-1');
+    expect(mockedToast.success).toHaveBeenCalledWith('规则已删除');
+  });
+
+  it('should duplicate rule when duplicate button clicked', async () => {
+    const user = userEvent.setup();
+    mockedRuleStorage.getAll.mockReturnValue([mockRule]);
+    mockedRuleStorage.duplicate.mockReturnValue({
+      ...mockRule,
+      id: 'rule-2',
+      name: 'Test Rule（副本）',
+    });
+
+    render(<RuleManager {...defaultProps} />);
+
+    await user.click(screen.getByTitle('复制'));
+
+    expect(mockedRuleStorage.duplicate).toHaveBeenCalledWith('rule-1', '（副本）');
+    expect(mockedToast.success).toHaveBeenCalled();
+  });
+
+  it('should update search input value', async () => {
+    const rules = [mockRule, { ...mockRule, id: 'rule-2', name: 'Another Rule' }];
+    mockedRuleStorage.getAll.mockReturnValue(rules);
+
+    render(<RuleManager {...defaultProps} />);
+
+    // Initially both rules should be visible
+    expect(screen.getByText('Test Rule')).toBeInTheDocument();
+    expect(screen.getByText('Another Rule')).toBeInTheDocument();
+
+    // Verify search input exists and is interactive
+    const searchInput = screen.getByPlaceholderText('搜索规则...');
+    expect(searchInput).toBeInTheDocument();
+    expect(searchInput).toHaveValue('');
+  });
+
+  it('should call exportRules when export button clicked', async () => {
+    const user = userEvent.setup();
+    mockedRuleStorage.getAll.mockReturnValue([mockRule]);
+
+    render(<RuleManager {...defaultProps} />);
+
+    // Mock URL methods and body methods after render to avoid interfering with createRoot
+    const mockCreateObjectURL = vi.fn(() => 'blob:mock');
+    const mockRevokeObjectURL = vi.fn();
+    vi.spyOn(URL, 'createObjectURL').mockImplementation(mockCreateObjectURL);
+    vi.spyOn(URL, 'revokeObjectURL').mockImplementation(mockRevokeObjectURL);
+    vi.spyOn(document.body, 'appendChild').mockImplementation(() => null as unknown as Node);
+    vi.spyOn(document.body, 'removeChild').mockImplementation(() => null as unknown as Node);
+
+    const buttons = screen.getAllByRole('button');
+    const exportButton = buttons.find((btn) => btn.textContent?.includes('导出'));
+    expect(exportButton).toBeDefined();
+
+    await user.click(exportButton!);
+
+    expect(mockedRuleStorage.exportRules).toHaveBeenCalled();
+    expect(mockCreateObjectURL).toHaveBeenCalled();
+
+    vi.restoreAllMocks();
+  });
+
+  it('should show field count for each rule', () => {
+    mockedRuleStorage.getAll.mockReturnValue([mockRule]);
+
+    render(<RuleManager {...defaultProps} />);
+
+    // The component shows "{count} 字段" format
+    expect(screen.getByText(/字段/)).toBeInTheDocument();
+  });
+});

src/pages/TestDataGenerator/hooks/useGenerator.ts

@@ -0,0 +1,148 @@
+/**
+ * 数据生成器 Hook
+ * 管理 Web Worker 的创建、销毁和通信
+ */
+
+import { useState, useRef, useCallback, useEffect } from 'react';
+import type {
+  FieldConfig,
+  GenerateResult,
+  GenerateProgress,
+  WorkerMessage,
+} from '@/types/testDataGenerator';
+
+export interface UseGeneratorReturn {
+  /** 是否正在生成 */
+  isGenerating: boolean;
+  /** 生成进度 */
+  progress: GenerateProgress | null;
+  /** 生成结果 */
+  result: GenerateResult | null;
+  /** 错误信息 */
+  error: string | null;
+  /** 开始生成 */
+  generate: (fields: FieldConfig[], count: number, csvMode?: boolean) => void;
+  /** 取消生成 */
+  cancel: () => void;
+  /** 清除结果 */
+  clearResult: () => void;
+}
+
+export function useGenerator(): UseGeneratorReturn {
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [progress, setProgress] = useState<GenerateProgress | null>(null);
+  const [result, setResult] = useState<GenerateResult | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const workerRef = useRef<Worker | null>(null);
+
+  // 清理 Worker
+  useEffect(() => {
+    return () => {
+      if (workerRef.current) {
+        workerRef.current.terminate();
+        workerRef.current = null;
+      }
+    };
+  }, []);
+
+  /**
+   * 创建或复用 Worker
+   */
+  const getWorker = useCallback((): Worker => {
+    if (workerRef.current) {
+      return workerRef.current;
+    }
+
+    const worker = new Worker(new URL('@/workers/generator.worker.ts', import.meta.url), {
+      type: 'module',
+    });
+
+    worker.onmessage = (e: MessageEvent<WorkerMessage>) => {
+      const data = e.data;
+      const { type } = data;
+
+      switch (type) {
+        case 'progress':
+          setProgress(data.payload as GenerateProgress);
+          break;
+        case 'complete':
+          setIsGenerating(false);
+          setResult(data.payload as GenerateResult);
+          setProgress(null);
+          break;
+        case 'error':
+          setIsGenerating(false);
+          setError((data.payload as { error: string }).error);
+          setProgress(null);
+          break;
+      }
+    };
+
+    worker.onerror = (err) => {
+      console.error('[useGenerator] Worker 错误:', err);
+      setIsGenerating(false);
+      setError(err.message || 'Worker 运行错误');
+      setProgress(null);
+      // Worker 出错后销毁，下次重新创建
+      workerRef.current?.terminate();
+      workerRef.current = null;
+    };
+
+    workerRef.current = worker;
+    return worker;
+  }, []);
+
+  /**
+   * 开始生成
+   */
+  const generate = useCallback(
+    (fields: FieldConfig[], count: number, csvMode = false) => {
+      if (isGenerating) return;
+
+      setIsGenerating(true);
+      setProgress(null);
+      setResult(null);
+      setError(null);
+
+      const worker = getWorker();
+      const message: WorkerMessage = {
+        type: 'start',
+        payload: { fields, count, csvMode },
+      };
+      worker.postMessage(message);
+    },
+    [isGenerating, getWorker],
+  );
+
+  /**
+   * 取消生成
+   */
+  const cancel = useCallback(() => {
+    if (workerRef.current && isGenerating) {
+      const message: WorkerMessage = { type: 'cancel' };
+      workerRef.current.postMessage(message);
+      setIsGenerating(false);
+      setProgress(null);
+    }
+  }, [isGenerating]);
+
+  /**
+   * 清除结果
+   */
+  const clearResult = useCallback(() => {
+    setResult(null);
+    setProgress(null);
+    setError(null);
+  }, []);
+
+  return {
+    isGenerating,
+    progress,
+    result,
+    error,
+    generate,
+    cancel,
+    clearResult,
+  };
+}

src/pages/TestDataGenerator/index.tsx

@@ -0,0 +1,306 @@
+/**
+ * 测试数据生成器主页面
+ */
+
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { Settings, Database, Tag } from 'lucide-react';
+import { useI18n } from '@/utils/chromeI18n';
+import { cn } from '@/lib/utils';
+import { useGenerator } from './hooks/useGenerator';
+import type { FieldConfig, GenerateResult, DataRule } from '@/types/testDataGenerator';
+import { Dialog, DialogContent } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { toast } from 'sonner';
+
+// 生成唯一 ID 的辅助函数
+function generateId(): string {
+  return `field_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
+}
+
+import FieldList, { MAX_FIELDS } from './components/FieldList';
+import FieldEditor from './components/FieldEditor';
+import GenerateOptions from './components/GenerateOptions';
+import GenerateButton from './components/GenerateButton';
+import DataPreview from './components/DataPreview';
+import ResultPanel from './components/ResultPanel';
+import ExportPanel from './components/ExportPanel';
+import RuleManager from './components/RuleManager';
+
+type TabType = 'fields' | 'rules';
+
+export default function TestDataGeneratorPage() {
+  const { t } = useI18n('testDataGenerator');
+  const { isGenerating, progress, result, error, generate, cancel, clearResult } = useGenerator();
+
+  // 字段配置
+  const [fields, setFields] = useState<FieldConfig[]>([]);
+  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
+  const [isEditorOpen, setIsEditorOpen] = useState(false);
+  const [editingRule, setEditingRule] = useState<DataRule | null>(null);
+
+  // 生成选项
+  const [count, setCount] = useState(100);
+  const [format, setFormat] = useState<'json' | 'csv'>('json');
+
+  // 当前标签页
+  const [activeTab, setActiveTab] = useState<TabType>('fields');
+
+  // 生成完成时显示 toast 提示（避免重复触发）
+  const lastToastResultRef = useRef<GenerateResult | null>(null);
+
+  // 生成完成时显示 toast 提示（避免重复触发）
+  useEffect(() => {
+    if (result?.success && result.stats && result !== lastToastResultRef.current) {
+      lastToastResultRef.current = result;
+      toast.success(t('testDataGenerator_generateSuccess'), {
+        description: `${result.stats.total} ${t('testDataGenerator_records')}`,
+      });
+    }
+  }, [result, t]);
+
+  // 添加新字段
+  const handleAddField = useCallback(() => {
+    setFields((prev) => {
+      if (prev.length >= MAX_FIELDS) return prev;
+      const newField: FieldConfig = {
+        id: generateId(),
+        name: `field${prev.length + 1}`,
+        generatorId: 'chineseName',
+        params: {},
+        required: true,
+        nullRate: 0,
+        unique: false,
+      };
+      setSelectedIndex(prev.length);
+      return [...prev, newField];
+    });
+  }, []);
+
+  // 更新字段
+  const handleUpdateField = useCallback((index: number, field: FieldConfig) => {
+    setFields((prev) => {
+      const newFields = [...prev];
+      newFields[index] = field;
+      return newFields;
+    });
+  }, []);
+
+  // 删除字段
+  const handleRemoveField = useCallback((index: number) => {
+    setFields((prev) => prev.filter((_, i) => i !== index));
+    setSelectedIndex((prev) => {
+      if (prev === index) return null;
+      if (prev !== null && prev > index) return prev - 1;
+      return prev;
+    });
+  }, []);
+
+  // 拖拽排序
+  const handleReorder = useCallback((oldIndex: number, newIndex: number) => {
+    setFields((prev) => {
+      const newFields = [...prev];
+      const [moved] = newFields.splice(oldIndex, 1);
+      newFields.splice(newIndex, 0, moved);
+      return newFields;
+    });
+    setSelectedIndex((prev) => {
+      if (prev === oldIndex) return newIndex;
+      if (prev !== null) {
+        if (oldIndex < prev && newIndex >= prev) return prev - 1;
+        if (oldIndex > prev && newIndex <= prev) return prev + 1;
+      }
+      return prev;
+    });
+  }, []);
+
+  // 加载规则
+  const handleLoadRule = useCallback(
+    (loadedFields: FieldConfig[]) => {
+      setFields(loadedFields);
+      setSelectedIndex(null);
+      setEditingRule(null);
+      clearResult();
+    },
+    [clearResult],
+  );
+
+  // 编辑规则
+  const handleEditRule = useCallback(
+    (rule: DataRule) => {
+      setFields(rule.fields);
+      setSelectedIndex(null);
+      setEditingRule(rule);
+      setActiveTab('fields');
+      clearResult();
+      toast.success(t('testDataGenerator_editingRule', { name: rule.name }));
+    },
+    [clearResult, t],
+  );
+
+  // 保存规则成功后清除编辑状态
+  const handleRuleSaved = useCallback(() => {
+    setEditingRule(null);
+  }, []);
+
+  // 开始生成
+  const handleGenerate = useCallback(() => {
+    if (fields.length === 0) return;
+    generate(fields, count, format === 'csv');
+  }, [fields, count, format, generate]);
+
+  // 获取选中的字段（-1 或 null 表示未选中）
+  const selectedField = selectedIndex !== null && selectedIndex >= 0 ? fields[selectedIndex] : null;
+
+  // 打开字段编辑器
+  const handleOpenEditor = useCallback((index: number) => {
+    setSelectedIndex(index);
+    setIsEditorOpen(true);
+  }, []);
+
+  return (
+    <div className="min-h-screen bg-background text-foreground antialiased selection:bg-primary/20">
+      <div className="max-w-7xl mx-auto p-4 sm:p-6">
+        {/* 主要内容区域 - 左右分栏 */}
+        <div className="grid grid-cols-1 lg:grid-cols-5 gap-4 items-start">
+          {/* 左侧面板 - 字段配置 */}
+          <div className="lg:col-span-3 space-y-4">
+            {/* 标签页切换 */}
+            <div className="flex gap-1 p-1 bg-muted rounded-lg">
+              <button
+                onClick={() => setActiveTab('fields')}
+                className={cn(
+                  'flex-1 flex items-center justify-center gap-2 py-2 px-3 text-sm font-medium rounded-md transition-colors',
+                  activeTab === 'fields'
+                    ? 'bg-background text-foreground shadow-sm'
+                    : 'text-muted-foreground hover:text-foreground',
+                )}
+              >
+                <Settings className="h-4 w-4" />
+                {t('testDataGenerator_fieldConfig')}
+              </button>
+              <button
+                onClick={() => setActiveTab('rules')}
+                className={cn(
+                  'flex-1 flex items-center justify-center gap-2 py-2 px-3 text-sm font-medium rounded-md transition-colors',
+                  activeTab === 'rules'
+                    ? 'bg-background text-foreground shadow-sm'
+                    : 'text-muted-foreground hover:text-foreground',
+                )}
+              >
+                <Tag className="h-4 w-4" />
+                {t('testDataGenerator_ruleManagement')}
+              </button>
+            </div>
+
+            {/* 字段配置标签页 */}
+            {activeTab === 'fields' && (
+              <div className="p-4 rounded-xl border border-border bg-card shadow-sm">
+                <FieldList
+                  fields={fields}
+                  onUpdate={handleUpdateField}
+                  onRemove={handleRemoveField}
+                  onAdd={handleAddField}
+                  onEdit={handleOpenEditor}
+                  onReorder={handleReorder}
+                  editingRule={editingRule}
+                  onRuleSaved={handleRuleSaved}
+                />
+              </div>
+            )}
+
+            {/* 规则管理标签页 */}
+            {activeTab === 'rules' && (
+              <div className="p-4 rounded-xl border border-border bg-card shadow-sm">
+                <RuleManager onLoad={handleLoadRule} onEdit={handleEditRule} />
+              </div>
+            )}
+
+            {/* 生成选项 */}
+            <div className="p-4 rounded-xl border border-border bg-card shadow-sm">
+              <GenerateOptions
+                count={count}
+                onCountChange={setCount}
+                format={format}
+                onFormatChange={setFormat}
+              />
+            </div>
+
+            {/* 生成按钮 */}
+            <div className="p-4 rounded-xl border border-border bg-card shadow-sm">
+              <GenerateButton
+                onClick={handleGenerate}
+                onCancel={cancel}
+                isGenerating={isGenerating}
+                progress={progress}
+                disabled={fields.length === 0}
+              />
+            </div>
+          </div>
+
+          {/* 右侧面板 - 数据预览和结果 */}
+          <div className="lg:col-span-2 space-y-4">
+            {/* 结果状态 */}
+            {/* 仅在失败或有警告时显示结果面板 */}
+            {((result && !result.success) ||
+              (result?.warnings && result.warnings.length > 0) ||
+              error) && (
+              <div className="p-4 rounded-xl border border-border bg-card shadow-sm">
+                {error ? (
+                  <div className="flex items-center gap-2 text-destructive">
+                    <span className="text-sm">{error}</span>
+                  </div>
+                ) : (
+                  <ResultPanel result={result} />
+                )}
+              </div>
+            )}
+
+            {/* 数据预览 */}
+            <div className="p-4 rounded-xl border border-border bg-card shadow-sm">
+              <h3 className="text-sm font-medium text-foreground mb-3 flex items-center gap-2">
+                <Database className="h-4 w-4" />
+                {t('testDataGenerator_dataPreview')}
+              </h3>
+              <div className="h-[280px]">
+                <DataPreview fields={fields} />
+              </div>
+            </div>
+
+            {/* 导出面板 */}
+            {result?.data && result.data.length > 0 && (
+              <div className="p-4 rounded-xl border border-border bg-card shadow-sm">
+                <ExportPanel result={result} />
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* 字段编辑弹窗 */}
+      <Dialog open={isEditorOpen} onOpenChange={setIsEditorOpen}>
+        <DialogContent
+          showCloseButton={false}
+          className="w-[calc(100vw-2rem)] max-w-[520px] max-h-[calc(100vh-2rem)] p-0 pt-6 flex flex-col"
+        >
+          <div className="flex-1 overflow-y-auto px-6 pb-4">
+            {selectedField && selectedIndex !== null && (
+              <FieldEditor
+                field={selectedField}
+                onChange={(updatedField) => handleUpdateField(selectedIndex, updatedField)}
+                allFieldNames={fields.map((f) => f.name)}
+              />
+            )}
+          </div>
+          <div className="flex justify-end gap-2 px-6 py-2 border-t shrink-0">
+            <Button variant="ghost" size="sm" onClick={() => setIsEditorOpen(false)}>
+              {t('testDataGenerator_cancel')}
+            </Button>
+            <Button size="sm" onClick={() => setIsEditorOpen(false)}>
+              {t('testDataGenerator_done')}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

src/pages/Timestamp/LiveClock.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { Clock } from 'lucide-react';
 import { toast } from 'sonner';
-import CopyButton from '@/components/CopyButton';
+import { CopyButton } from '@/components/CopyButton';
 import type { UnitType } from './constants';
 import { msToUnit } from './constants';
 import { useI18n } from '@/utils/chromeI18n';

src/pages/Timestamp/ResultView.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import CopyButton from '@/components/CopyButton';
+import { CopyButton } from '@/components/CopyButton';
 import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';
 

src/providers/AppRoot.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ThemeModeProvider } from './ThemeModeProvider';
 import { RouterProvider } from './RouterProvider';
+import { Toaster } from '@/components/ui/sonner';
 
 interface AppRootProps {
   children: React.ReactNode;
@@ -11,6 +12,7 @@ export default function AppRoot({ children }: AppRootProps) {
     <React.StrictMode>
       <ThemeModeProvider>
         <RouterProvider>{children}</RouterProvider>
+        <Toaster />
       </ThemeModeProvider>
     </React.StrictMode>
   );

src/types/storage.d.ts

@@ -10,7 +10,8 @@ export type PageType =
   | 'jwt' // JWT 解析工具
   | 'jsonDiff' // JSON 差异比较工具
   | 'base64Converter' // Base64 转换器工具
-  | 'rightClickRestorer'; // 右键菜单恢复工具
+  | 'rightClickRestorer' // 右键菜单恢复工具
+  | 'testDataGenerator'; // 测试数据生成器工具
 
 /**
  * JSON 工具页面子模式类型定义

src/types/testDataGenerator.ts

@@ -0,0 +1,178 @@
+/**
+ * 测试数据生成器类型定义
+ */
+
+/**
+ * 字段配置
+ */
+export interface FieldConfig {
+  /** 字段唯一 ID */
+  id: string;
+  /** 字段名称 */
+  name: string;
+  /** 字段描述（可选） */
+  description?: string;
+  /** 使用的生成器 ID */
+  generatorId: string;
+  /** 生成器参数 */
+  params: Record<string, unknown>;
+  /** 是否必填 */
+  required: boolean;
+  /** 空值率（0-100），仅在 required=false 时生效 */
+  nullRate: number;
+  /** 是否唯一约束 */
+  unique: boolean;
+}
+
+/**
+ * 数据规则
+ */
+export interface DataRule {
+  /** 规则唯一 ID */
+  id: string;
+  /** 规则名称 */
+  name: string;
+  /** 规则描述 */
+  description?: string;
+  /** 字段配置列表 */
+  fields: FieldConfig[];
+  /** 创建时间 */
+  createdAt: number;
+  /** 更新时间 */
+  updatedAt: number;
+  /** 最后使用时间 */
+  lastUsedAt?: number;
+  /** 使用次数 */
+  useCount: number;
+}
+
+/**
+ * 生成器参数定义
+ */
+export interface GeneratorParam {
+  /** 参数键名 */
+  key: string;
+  /** 参数显示名称 */
+  label: string;
+  /** 参数类型 */
+  type: 'string' | 'number' | 'boolean' | 'select' | 'array';
+  /** 默认值 */
+  defaultValue: unknown;
+  /** 是否必填 */
+  required?: boolean;
+  /** 参数描述 */
+  description?: string;
+  /** 仅当 type=select 时，可选值列表 */
+  options?: { label: string; value: unknown }[];
+  /** 最小值（仅当 type=number 时） */
+  min?: number;
+  /** 最大值（仅当 type=number 时） */
+  max?: number;
+  /** 占位符文本（仅当 type=string 时） */
+  placeholder?: string;
+}
+
+/**
+ * 生成器定义
+ */
+export interface GeneratorDefinition {
+  /** 生成器唯一 ID */
+  id: string;
+  /** 生成器显示名称 */
+  name: string;
+  /** 生成器描述 */
+  description: string;
+  /** 分类 ID */
+  categoryId: string;
+  /** 参数定义列表 */
+  params: GeneratorParam[];
+  /** 生成函数 */
+  generate: (params: Record<string, unknown>) => string;
+  /** 在指定索引生成（用于保证唯一性时的确定性生成） */
+  generateAtIndex?: (params: Record<string, unknown>, index: number) => string;
+}
+
+/**
+ * 生成器分类
+ */
+export interface GeneratorCategory {
+  /** 分类 ID */
+  id: string;
+  /** 分类名称 */
+  name: string;
+  /** 分类图标 */
+  icon: string;
+}
+
+/**
+ * 数据生成结果
+ */
+export interface GenerateResult {
+  /** 是否成功 */
+  success: boolean;
+  /** 生成的数据（JSON 格式） */
+  data?: Record<string, unknown>[];
+  /** 错误信息 */
+  error?: string;
+  /** 警告信息（如某些字段生成失败） */
+  warnings?: string[];
+  /** 生成统计 */
+  stats?: {
+    /** 总条数 */
+    total: number;
+    /** 成功条数 */
+    success: number;
+    /** 失败条数 */
+    failed: number;
+    /** 生成耗时（毫秒） */
+    duration: number;
+  };
+}
+
+/**
+ * 导出文件配置
+ */
+export interface ExportFile {
+  /** 文件名（不含扩展名） */
+  filename: string;
+  /** 文件内容 */
+  content: string;
+  /** MIME 类型 */
+  mimeType: string;
+}
+
+/**
+ * 生成进度信息
+ */
+export interface GenerateProgress {
+  /** 当前进度（0-100） */
+  progress: number;
+  /** 已生成条数 */
+  generated: number;
+  /** 总条数 */
+  total: number;
+  /** 预计剩余时间（毫秒） */
+  estimatedTimeLeft?: number;
+}
+
+/**
+ * Worker 消息类型
+ */
+export type WorkerMessage =
+  | { type: 'start'; payload: WorkerStartPayload }
+  | { type: 'progress'; payload: GenerateProgress }
+  | { type: 'complete'; payload: GenerateResult }
+  | { type: 'error'; payload: { error: string } }
+  | { type: 'cancel' };
+
+/**
+ * Worker 启动参数
+ */
+export interface WorkerStartPayload {
+  /** 字段配置列表 */
+  fields: FieldConfig[];
+  /** 生成数量 */
+  count: number;
+  /** 是否生成 CSV 格式 */
+  csvMode: boolean;
+}

src/utils/__tests__/chromeTabs.test.ts

@@ -1,101 +1,7 @@
 import { describe, expect, it, vi } from 'vitest';
-import {
+import { openExtensionPage } from '@/utils/chromeTabs';
-  getActiveTab,
-  getActiveTabDomain,
-  openExtensionPage,
-  ensureContentScriptInjected,
-} from '@/utils/chromeTabs';
 
 describe('chromeTabs', () => {
-  describe('getActiveTab', () => {
-    it('应该返回当前活动标签页', async () => {
-      const mockTab = { id: 1, url: 'https://example.com', title: 'Example' } as chrome.tabs.Tab;
-      (chrome.tabs.query as any).mockResolvedValue([mockTab]);
-
-      const result = await getActiveTab();
-
-      expect(result).toEqual(mockTab);
-      expect(chrome.tabs.query).toHaveBeenCalledWith({ active: true, currentWindow: true });
-    });
-
-    it('当没有活动标签页时应返回 null', async () => {
-      (chrome.tabs.query as any).mockResolvedValue([]);
-
-      const result = await getActiveTab();
-
-      expect(result).toBeNull();
-    });
-
-    it('当查询失败时应返回 null 并记录错误', async () => {
-      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
-      (chrome.tabs.query as any).mockRejectedValue(new Error('Permission denied'));
-
-      const result = await getActiveTab();
-
-      expect(result).toBeNull();
-      expect(consoleSpy).toHaveBeenCalledWith('获取活动标签页失败:', expect.any(Error));
-      consoleSpy.mockRestore();
-    });
-  });
-
-  describe('getActiveTabDomain', () => {
-    it('应该返回当前活动标签页的域名', async () => {
-      const mockTab = { id: 1, url: 'https://example.com/path?query=1' } as chrome.tabs.Tab;
-      (chrome.tabs.query as any).mockResolvedValue([mockTab]);
-
-      const result = await getActiveTabDomain();
-
-      expect(result).toBe('example.com');
-    });
-
-    it('应该处理带有端口的 URL', async () => {
-      const mockTab = { id: 1, url: 'https://example.com:8080/path' } as chrome.tabs.Tab;
-      (chrome.tabs.query as any).mockResolvedValue([mockTab]);
-
-      const result = await getActiveTabDomain();
-
-      expect(result).toBe('example.com');
-    });
-
-    it('当标签页没有 URL 时应返回空字符串', async () => {
-      const mockTab = { id: 1 } as chrome.tabs.Tab;
-      (chrome.tabs.query as any).mockResolvedValue([mockTab]);
-
-      const result = await getActiveTabDomain();
-
-      expect(result).toBe('');
-    });
-
-    it('当没有活动标签页时应返回空字符串', async () => {
-      (chrome.tabs.query as any).mockResolvedValue([]);
-
-      const result = await getActiveTabDomain();
-
-      expect(result).toBe('');
-    });
-
-    it('当 URL 解析失败时应返回空字符串并记录错误', async () => {
-      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
-      const mockTab = { id: 1, url: 'not-a-valid-url' } as chrome.tabs.Tab;
-      (chrome.tabs.query as any).mockResolvedValue([mockTab]);
-
-      const result = await getActiveTabDomain();
-
-      expect(result).toBe('');
-      expect(consoleSpy).toHaveBeenCalledWith('解析域名失败:', expect.any(Error));
-      consoleSpy.mockRestore();
-    });
-
-    it('应该处理 chrome-extension URL', async () => {
-      const mockTab = { id: 1, url: 'chrome-extension://abc123/popup.html' } as chrome.tabs.Tab;
-      (chrome.tabs.query as any).mockResolvedValue([mockTab]);
-
-      const result = await getActiveTabDomain();
-
-      expect(result).toBe('abc123');
-    });
-  });
-
   describe('openExtensionPage', () => {
     it('应该在新标签页中打开扩展页面', async () => {
       await openExtensionPage('popup.html');
@@ -116,44 +22,4 @@ describe('chromeTabs', () => {
       consoleSpy.mockRestore();
     });
   });
-
-  describe('ensureContentScriptInjected', () => {
-    it('当存在活动标签页时应返回 true', async () => {
-      const mockTab = { id: 123, url: 'https://example.com' } as chrome.tabs.Tab;
-      (chrome.tabs.query as any).mockResolvedValue([mockTab]);
-
-      const result = await ensureContentScriptInjected();
-
-      expect(result).toBe(true);
-    });
-
-    it('当没有活动标签页时应返回 false', async () => {
-      (chrome.tabs.query as any).mockResolvedValue([]);
-
-      const result = await ensureContentScriptInjected();
-
-      expect(result).toBe(false);
-    });
-
-    it('当标签页没有 id 时应返回 false', async () => {
-      const mockTab = { url: 'https://example.com' } as chrome.tabs.Tab;
-      (chrome.tabs.query as any).mockResolvedValue([mockTab]);
-
-      const result = await ensureContentScriptInjected();
-
-      expect(result).toBe(false);
-    });
-
-    it('当整体操作失败时应返回 false 并记录错误', async () => {
-      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
-      (chrome.tabs.query as any).mockRejectedValue(new Error('Query failed'));
-
-      const result = await ensureContentScriptInjected();
-
-      expect(result).toBe(false);
-      // getActiveTab catches the error and logs "获取活动标签页失败"
-      expect(consoleSpy).toHaveBeenCalledWith('获取活动标签页失败:', expect.any(Error));
-      consoleSpy.mockRestore();
-    });
-  });
 });

src/utils/__tests__/clipboard.test.ts

@@ -1,14 +1,5 @@
-import { describe, expect, it, vi, beforeAll } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
-import { copyTextToClipboard, copyImageToClipboard } from '@/utils/clipboard';
+import { copyTextToClipboard } from '@/utils/clipboard';
-
-// Mock ClipboardItem for test environment
-class MockClipboardItem {
-  constructor(public items: Record<string, Blob>) {}
-}
-
-beforeAll(() => {
-  (globalThis as any).ClipboardItem = MockClipboardItem;
-});
 
 describe('clipboard', () => {
   describe('copyTextToClipboard', () => {
@@ -31,27 +22,4 @@ describe('clipboard', () => {
       expect(result).toBe(false);
     });
   });
-
-  describe('copyImageToClipboard', () => {
-    it('复制成功时应返回 true', async () => {
-      const write = vi.fn().mockResolvedValue(undefined);
-      Object.assign(navigator, { clipboard: { write } });
-
-      const blob = new Blob(['png data'], { type: 'image/png' });
-      const result = await copyImageToClipboard(blob);
-
-      expect(result).toBe(true);
-      expect(write).toHaveBeenCalledTimes(1);
-    });
-
-    it('复制失败时应返回 false', async () => {
-      const write = vi.fn().mockRejectedValue(new Error('Permission denied'));
-      Object.assign(navigator, { clipboard: { write } });
-
-      const blob = new Blob(['png data'], { type: 'image/png' });
-      const result = await copyImageToClipboard(blob);
-
-      expect(result).toBe(false);
-    });
-  });
 });

src/utils/__tests__/useContextMenuData.test.ts

@@ -1,10 +1,6 @@
 import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest';
 import { renderHook, act } from '@testing-library/react';
-import {
+import { useContextMenuData, saveContextMenuData } from '@/utils/useContextMenuData';
-  useContextMenuData,
-  saveContextMenuData,
-  clearContextMenuData,
-} from '@/utils/useContextMenuData';
 
 describe('useContextMenuData', () => {
   beforeEach(() => {
@@ -48,14 +44,6 @@ describe('useContextMenuData', () => {
     });
   });
 
-  describe('clearContextMenuData', () => {
-    it('应该从 storage 中删除数据', async () => {
-      await clearContextMenuData();
-
-      expect(chrome.storage.local.remove).toHaveBeenCalledWith(['contextMenu/pendingData']);
-    });
-  });
-
   describe('useContextMenuData Hook', () => {
     it('当 storage 中有匹配数据时应调用 onData 回调', async () => {
       const mockData = {

src/utils/base64Converter.ts

@@ -8,7 +8,7 @@ import { formatBytes } from './format';
 export const MAX_FILE_SIZE = 10 * 1024 * 1024;
 
 /** 支持的图像 MIME 类型 */
-export const SUPPORTED_IMAGE_TYPES = [
+const SUPPORTED_IMAGE_TYPES = [
   'image/png',
   'image/jpeg',
   'image/jpg',
@@ -20,7 +20,7 @@ export const SUPPORTED_IMAGE_TYPES = [
 ] as const;
 
 /** 支持的图像文件扩展名 */
-export const SUPPORTED_IMAGE_EXTENSIONS = [
+const SUPPORTED_IMAGE_EXTENSIONS = [
   '.png',
   '.jpg',
   '.jpeg',
@@ -34,7 +34,7 @@ export const SUPPORTED_IMAGE_EXTENSIONS = [
 /**
  * 文本转 Base64 编码结果
  */
-export interface TextToBase64Result {
+interface TextToBase64Result {
   /** Base64 编码结果 */
   output: string;
   /** 原始字节数 */
@@ -226,7 +226,7 @@ export function formatFileSize(bytes: number): string {
 /**
  * Base64 解码为二进制后的产物
  */
-export interface Base64ToBlobResult {
+interface Base64ToBlobResult {
   /** 解码后的 Blob */
   blob: Blob;
   /** 推断出的 MIME 类型 */

src/utils/chromeI18n.ts

@@ -26,12 +26,8 @@ export function useI18n(namespace?: string | string[]) {
   const namespaces = Array.isArray(namespace) ? namespace : namespace ? [namespace] : [];
 
   const t = (key: string, options?: Record<string, unknown>): string => {
-    let msgId = key;
+    // 统一将分隔符转换为下划线，兼容 'namespace:key.path' 和 'key.path' 两种写法
-
+    const msgId = key.replace(':', '_').replace(/\./g, '_');
-    // 处理 namespace:key 格式（兼容原 i18next 用法）
-    if (key.includes(':')) {
-      msgId = key.replace(':', '_').replace(/\./g, '_');
-    }
 
     // 先尝试直接查找 key
     let message = getMessage(msgId);
@@ -70,11 +66,3 @@ export function useI18n(namespace?: string | string[]) {
     isLoaded: true,
   };
 }
-
-/**
- * 预加载命名空间（无操作，兼容 useLazyTranslation）
- */
-export async function preloadNamespaces(_namespaces: string[]): Promise<void> {
-  // chrome.i18n 是同步的，无需预加载
-  return Promise.resolve();
-}

src/utils/chromeTabs.ts

@@ -2,35 +2,6 @@
  * Chrome 标签页相关工具函数
  */
 
-/**
- * 获取当前活动的标签页
- */
-export async function getActiveTab(): Promise<chrome.tabs.Tab | null> {
-  try {
-    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
-    return tab || null;
-  } catch (error) {
-    console.error('获取活动标签页失败:', error);
-    return null;
-  }
-}
-
-/**
- * 获取当前活动的标签页域名
- */
-export async function getActiveTabDomain(): Promise<string> {
-  const tab = await getActiveTab();
-  if (tab?.url) {
-    try {
-      const url = new URL(tab.url);
-      return url.hostname;
-    } catch (e) {
-      console.error('解析域名失败:', e);
-    }
-  }
-  return '';
-}
-
 /**
  * 在新标签页中打开扩展页面
  * @param page - 扩展页面路径（如 'popup.html'）
@@ -50,28 +21,3 @@ export async function openExtensionPage(
     console.error('打开扩展页面失败:', error);
   }
 }
-
-/**
- * 确保内容脚本已注入
- */
-export async function ensureContentScriptInjected(): Promise<boolean> {
-  try {
-    const tab = await getActiveTab();
-    if (!tab?.id) return false;
-
-    try {
-      return true;
-    } catch (e) {
-      console.log('内容脚本未注入，尝试注入...');
-      console.error('注入内容脚本失败:', e);
-      await chrome.scripting.executeScript({
-        target: { tabId: tab.id },
-        files: ['/content-scripts/content.js'],
-      });
-      return true;
-    }
-  } catch (error) {
-    console.error('注入内容脚本失败:', error);
-    return false;
-  }
-}

src/utils/clipboard.ts

@@ -11,21 +11,3 @@ export async function copyTextToClipboard(text: string): Promise<boolean> {
     return false;
   }
 }
-
-/**
- * 复制图片到剪贴板
- * @param blob 要复制的图片
- * @returns Promise<boolean> 是否复制成功
- */
-export async function copyImageToClipboard(blob: Blob): Promise<boolean> {
-  try {
-    await navigator.clipboard.write([
-      new ClipboardItem({
-        'image/png': blob,
-      }),
-    ]);
-    return true;
-  } catch {
-    return false;
-  }
-}

src/utils/contextMenu.ts

@@ -1,18 +1,18 @@
 import type { PageType } from '@/types/storage';
 
-export interface ContextMenuItemConfig {
+interface ContextMenuItemConfig {
   id: string;
   title: string;
   contexts: [`${chrome.contextMenus.ContextType}`, ...`${chrome.contextMenus.ContextType}`[]];
   parentId?: string;
 }
 
-export interface ContextMenuClickedInfo {
+interface ContextMenuClickedInfo {
   featureKey: PageType;
   payload: string;
 }
 
-export interface ParseResult {
+interface ParseResult {
   success: boolean;
   data?: ContextMenuClickedInfo;
   error?: string;

src/utils/dataExporter.ts

@@ -0,0 +1,133 @@
+/**
+ * 数据导出工具
+ * 实现 JSON 和 CSV 格式的数据导出
+ */
+
+import type { ExportFile } from '@/types/testDataGenerator';
+
+/**
+ * 数据导出器
+ */
+export class DataExporter {
+  /**
+   * 将数据转换为 JSON 字符串
+   */
+  static toJSON(data: Record<string, unknown>[], pretty = true): string {
+    return JSON.stringify(data, null, pretty ? 2 : undefined);
+  }
+
+  /**
+   * 将数据转换为 CSV 字符串
+   */
+  static toCSV(data: Record<string, unknown>[]): string {
+    if (data.length === 0) return '';
+
+    // 获取所有列名
+    const headers = Array.from(new Set(data.flatMap((row) => Object.keys(row))));
+
+    // 构建 CSV 内容
+    const rows = [
+      headers.map((h) => this.escapeCSV(h)).join(','),
+      ...data.map((row) => headers.map((h) => this.escapeCSV(String(row[h] ?? ''))).join(',')),
+    ];
+
+    return rows.join('\n');
+  }
+
+  /**
+   * 转义 CSV 字段
+   */
+  private static escapeCSV(value: string): string {
+    // 如果包含逗号、引号、换行符，需要用引号包裹
+    if (value.includes(',') || value.includes('"') || value.includes('\n')) {
+      return `"${value.replace(/"/g, '""')}"`;
+    }
+    return value;
+  }
+
+  /**
+   * 根据格式导出数据
+   */
+  static exportByFormat(data: Record<string, unknown>[], format: 'json' | 'csv'): string {
+    if (format === 'csv') {
+      return this.toCSV(data);
+    }
+    return this.toJSON(data);
+  }
+
+  /**
+   * 导出为多个文件
+   */
+  static toMultipleFiles(
+    data: Record<string, unknown>[],
+    formats: ('json' | 'csv')[],
+    filename = 'test-data',
+  ): ExportFile[] {
+    return formats.map((format) => ({
+      filename,
+      content: this.exportByFormat(data, format),
+      mimeType: this.getMimeType(format),
+    }));
+  }
+
+  /**
+   * 导出为单个文件
+   */
+  static toSingleFile(
+    data: Record<string, unknown>[],
+    format: 'json' | 'csv',
+    filename = 'test-data',
+  ): ExportFile {
+    return {
+      filename,
+      content: this.exportByFormat(data, format),
+      mimeType: this.getMimeType(format),
+    };
+  }
+
+  /**
+   * 获取 MIME 类型
+   */
+  private static getMimeType(format: string): string {
+    const mimeTypes: Record<string, string> = {
+      json: 'application/json',
+      csv: 'text/csv',
+    };
+    return mimeTypes[format] || 'application/octet-stream';
+  }
+
+  /**
+   * 下载文件
+   */
+  static download(file: ExportFile): void {
+    const blob = new Blob([file.content], { type: file.mimeType });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `${file.filename}.${file.mimeType === 'application/json' ? 'json' : 'csv'}`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  }
+
+  /**
+   * 下载多个文件
+   */
+  static downloadMultiple(files: ExportFile[]): void {
+    files.forEach((file) => this.download(file));
+  }
+
+  /**
+   * 复制到剪贴板
+   */
+  static async copyToClipboard(content: string): Promise<boolean> {
+    try {
+      await navigator.clipboard.writeText(content);
+      return true;
+    } catch (error) {
+      console.error('[DataExporter] 复制失败:', error);
+      return false;
+    }
+  }
+}

src/utils/jsonFormatter.ts

@@ -71,7 +71,7 @@ export function formatJson(text: string, options: JsonFormatOptions): JsonFormat
 /**
  * JSON 压缩结果
  */
-export interface JsonMinifyResult {
+interface JsonMinifyResult {
   /** 压缩后的 JSON 字符串 */
   minified: string;
   /** 原始输入的字节大小 */

src/utils/jsonToToml.ts

@@ -1,7 +1,7 @@
 /**
  * JSON 转 TOML 转换结果
  */
-export interface JsonToTomlResult {
+interface JsonToTomlResult {
   /** 转换后的 TOML 字符串 */
   output: string;
   /** 原始输入的字节大小 */

src/utils/jsonToYaml.ts

@@ -1,7 +1,7 @@
 /**
  * JSON 转 YAML 转换结果
  */
-export interface JsonToYamlResult {
+interface JsonToYamlResult {
   /** 转换后的 YAML 字符串 */
   output: string;
   /** 原始输入的字节大小 */

src/utils/jwt.ts

@@ -4,13 +4,13 @@
 
 import { getMessage } from '@/utils/chromeI18n';
 
-export interface JwtHeader {
+interface JwtHeader {
   alg: string;
   typ?: string;
   [key: string]: unknown;
 }
 
-export interface JwtPayload {
+interface JwtPayload {
   iss?: string;
   sub?: string;
   aud?: string | string[];

src/utils/qrCodeParser.ts

@@ -1,6 +1,6 @@
 import QrScanner from 'qr-scanner';
 
-export interface QrCodeParseResult {
+interface QrCodeParseResult {
   success: boolean;
   data?: string;
   error?: string;

src/utils/ruleStorage.ts

@@ -0,0 +1,339 @@
+/**
+ * 规则存储工具
+ * 实现测试数据生成器规则的持久化存储和管理
+ */
+
+import type { DataRule, FieldConfig } from '@/types/testDataGenerator';
+
+/** 存储键名 */
+const STORAGE_KEY = 'testDataGenerator_rules';
+
+/** 最大规则数量 */
+const MAX_RULES = 20;
+
+/**
+ * 获取所有规则
+ */
+export function getAll(): DataRule[] {
+  try {
+    const data = localStorage.getItem(STORAGE_KEY);
+    if (!data) return [];
+    return JSON.parse(data) as DataRule[];
+  } catch (error) {
+    console.error('[ruleStorage] 获取规则列表失败:', error);
+    return [];
+  }
+}
+
+/**
+ * 根据 ID 获取规则
+ */
+export function getById(id: string): DataRule | undefined {
+  const rules = getAll();
+  return rules.find((rule) => rule.id === id);
+}
+
+/**
+ * 根据名称获取规则
+ */
+export function getByName(name: string): DataRule | undefined {
+  const rules = getAll();
+  return rules.find((rule) => rule.name === name);
+}
+
+/**
+ * 获取规则数量
+ */
+export function getCount(): number {
+  return getAll().length;
+}
+
+/**
+ * 是否达到最大数量限制
+ */
+export function isMaxReached(): boolean {
+  return getCount() >= MAX_RULES;
+}
+
+/**
+ * 保存规则（新增或更新）
+ */
+export function save(
+  rule: Omit<DataRule, 'id' | 'createdAt' | 'updatedAt' | 'useCount'> & { id?: string },
+): DataRule | null {
+  const rules = getAll();
+  const now = Date.now();
+
+  // 新增规则
+  if (!rule.id) {
+    if (isMaxReached()) {
+      console.warn('[ruleStorage] 规则数量已达上限');
+      return null;
+    }
+    const newRule: DataRule = {
+      ...rule,
+      id: generateId(),
+      createdAt: now,
+      updatedAt: now,
+      useCount: 0,
+    };
+    rules.unshift(newRule);
+    setAll(rules);
+    return newRule;
+  }
+
+  // 更新规则
+  const index = rules.findIndex((r) => r.id === rule.id);
+  if (index === -1) {
+    console.warn('[ruleStorage] 规则不存在:', rule.id);
+    return null;
+  }
+  const updatedRule: DataRule = {
+    ...rules[index],
+    ...rule,
+    id: rule.id,
+    updatedAt: now,
+  };
+  rules[index] = updatedRule;
+  setAll(rules);
+  return updatedRule;
+}
+
+/**
+ * 更新规则
+ */
+export function update(id: string, updates: Partial<DataRule>): DataRule | null {
+  const rules = getAll();
+  const index = rules.findIndex((r) => r.id === id);
+  if (index === -1) {
+    console.warn('[ruleStorage] 规则不存在:', id);
+    return null;
+  }
+
+  const updatedRule: DataRule = {
+    ...rules[index],
+    ...updates,
+    id: rules[index].id, // 确保 ID 不被覆盖
+    updatedAt: Date.now(),
+  };
+  rules[index] = updatedRule;
+  setAll(rules);
+  return updatedRule;
+}
+
+/**
+ * 删除规则
+ */
+export function deleteRule(id: string): boolean {
+  const rules = getAll();
+  const index = rules.findIndex((r) => r.id === id);
+  if (index === -1) {
+    console.warn('[ruleStorage] 规则不存在:', id);
+    return false;
+  }
+  rules.splice(index, 1);
+  setAll(rules);
+  return true;
+}
+
+/**
+ * 复制规则
+ * @param id 规则 ID
+ * @param copySuffix 复制后缀，默认为中文「（副本）」，可通过 i18n 传入
+ */
+export function duplicate(id: string, copySuffix = '（副本）'): DataRule | null {
+  const rule = getById(id);
+  if (!rule) {
+    console.warn('[ruleStorage] 规则不存在:', id);
+    return null;
+  }
+
+  if (isMaxReached()) {
+    console.warn('[ruleStorage] 规则数量已达上限');
+    return null;
+  }
+
+  const now = Date.now();
+  const newRule: DataRule = {
+    ...rule,
+    id: generateId(),
+    name: `${rule.name}${copySuffix}`,
+    createdAt: now,
+    updatedAt: now,
+    useCount: 0,
+  };
+
+  const rules = getAll();
+  rules.unshift(newRule);
+  setAll(rules);
+  return newRule;
+}
+
+/**
+ * 记录规则使用
+ */
+export function recordUse(id: string): void {
+  const rules = getAll();
+  const index = rules.findIndex((r) => r.id === id);
+  if (index === -1) return;
+
+  rules[index].useCount += 1;
+  rules[index].lastUsedAt = Date.now();
+  setAll(rules);
+}
+
+/**
+ * 搜索规则
+ */
+export function search(query: string): DataRule[] {
+  const rules = getAll();
+  const lowerQuery = query.toLowerCase();
+  return rules.filter(
+    (rule) =>
+      rule.name.toLowerCase().includes(lowerQuery) ||
+      rule.description?.toLowerCase().includes(lowerQuery),
+  );
+}
+
+/**
+ * 获取最近使用的规则
+ */
+export function getRecent(count = 5): DataRule[] {
+  const rules = getAll();
+  return [...rules]
+    .filter((rule) => rule.lastUsedAt)
+    .sort((a, b) => (b.lastUsedAt || 0) - (a.lastUsedAt || 0))
+    .slice(0, count);
+}
+
+/**
+ * 导出规则（JSON 字符串）
+ */
+export function exportRules(ids?: string[]): string {
+  const rules = getAll();
+  const exportData = ids ? rules.filter((r) => ids.includes(r.id)) : rules;
+  return JSON.stringify(exportData, null, 2);
+}
+
+/**
+ * 导入规则
+ */
+export function importRules(jsonString: string): {
+  success: number;
+  failed: number;
+  errors: string[];
+} {
+  const result = { success: 0, failed: 0, errors: [] as string[] };
+
+  try {
+    const data = JSON.parse(jsonString);
+    if (!Array.isArray(data)) {
+      result.failed = 1;
+      result.errors.push('导入数据格式错误：不是数组');
+      return result;
+    }
+
+    for (const item of data) {
+      const validation = validateRule(item);
+      if (!validation.valid) {
+        result.failed++;
+        result.errors.push(`规则 "${item.name || '未知'}": ${validation.error}`);
+        continue;
+      }
+
+      const saved = save(item as Omit<DataRule, 'id' | 'createdAt' | 'updatedAt' | 'useCount'>);
+      if (saved) {
+        result.success++;
+      } else {
+        result.failed++;
+        result.errors.push(`规则 "${item.name}" 保存失败`);
+      }
+    }
+  } catch (error) {
+    result.failed = 1;
+    result.errors.push(`导入失败: ${error}`);
+  }
+
+  return result;
+}
+
+/**
+ * 清空所有规则
+ */
+export function clear(): void {
+  localStorage.removeItem(STORAGE_KEY);
+}
+
+/**
+ * 保存所有规则到存储
+ */
+function setAll(rules: DataRule[]): void {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(rules));
+  } catch (error) {
+    console.error('[ruleStorage] 保存规则失败:', error);
+  }
+}
+
+/**
+ * 生成唯一 ID
+ */
+export function generateId(): string {
+  return `rule_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
+}
+
+/**
+ * 验证规则格式
+ */
+function validateRule(rule: unknown): { valid: boolean; error?: string } {
+  if (!rule || typeof rule !== 'object') {
+    return { valid: false, error: '规则格式无效' };
+  }
+
+  const obj = rule as Record<string, unknown>;
+
+  if (!obj.name || typeof obj.name !== 'string') {
+    return { valid: false, error: '缺少规则名称' };
+  }
+
+  if (!obj.fields || !Array.isArray(obj.fields)) {
+    return { valid: false, error: '缺少字段配置' };
+  }
+
+  for (const field of obj.fields) {
+    const fieldValidation = validateField(field);
+    if (!fieldValidation.valid) {
+      return {
+        valid: false,
+        error: `字段 "${(field as FieldConfig).name || '未知'}": ${fieldValidation.error}`,
+      };
+    }
+  }
+
+  return { valid: true };
+}
+
+/**
+ * 验证字段配置
+ */
+function validateField(field: unknown): { valid: boolean; error?: string } {
+  if (!field || typeof field !== 'object') {
+    return { valid: false, error: '字段格式无效' };
+  }
+
+  const obj = field as Record<string, unknown>;
+
+  if (!obj.name || typeof obj.name !== 'string') {
+    return { valid: false, error: '缺少字段名称' };
+  }
+
+  if (!obj.generatorId || typeof obj.generatorId !== 'string') {
+    return { valid: false, error: '缺少生成器 ID' };
+  }
+
+  if (typeof obj.required !== 'boolean') {
+    return { valid: false, error: '缺少必填标识' };
+  }
+
+  return { valid: true };
+}

src/utils/storageCleaner.ts

@@ -224,7 +224,7 @@ async function runCleanScript(
   return { success: false, error: 'No result returned' };
 }
 
-export async function injectClearLocalStorage(tabId: number): Promise<StorageCleanResult> {
+async function injectClearLocalStorage(tabId: number): Promise<StorageCleanResult> {
   return runCleanScript(
     tabId,
     () => {
@@ -236,7 +236,7 @@ export async function injectClearLocalStorage(tabId: number): Promise<StorageCle
   );
 }
 
-export async function injectClearSessionStorage(tabId: number): Promise<StorageCleanResult> {
+async function injectClearSessionStorage(tabId: number): Promise<StorageCleanResult> {
   return runCleanScript(
     tabId,
     () => {
@@ -248,7 +248,7 @@ export async function injectClearSessionStorage(tabId: number): Promise<StorageC
   );
 }
 
-export async function injectClearIndexedDB(tabId: number): Promise<StorageCleanResult> {
+async function injectClearIndexedDB(tabId: number): Promise<StorageCleanResult> {
   return runCleanScript(
     tabId,
     async () => {
@@ -292,7 +292,7 @@ export async function injectClearIndexedDB(tabId: number): Promise<StorageCleanR
   );
 }
 
-export async function injectClearCacheStorage(tabId: number): Promise<StorageCleanResult> {
+async function injectClearCacheStorage(tabId: number): Promise<StorageCleanResult> {
   return runCleanScript(
     tabId,
     async () => {
@@ -309,7 +309,7 @@ export async function injectClearCacheStorage(tabId: number): Promise<StorageCle
   );
 }
 
-export async function injectUnregisterServiceWorkers(tabId: number): Promise<StorageCleanResult> {
+async function injectUnregisterServiceWorkers(tabId: number): Promise<StorageCleanResult> {
   return runCleanScript(
     tabId,
     async () => {
@@ -381,10 +381,3 @@ export function formatCleaningResult(
 
   return t('storageCleaner:cleanedSummary', { items: parts.join(', ') });
 }
-
-export function isEmptyResult(result: CleaningResult): boolean {
-  const values = Object.values(result).filter(
-    (r): r is StorageCleanResult => r?.success === true && r.count > 0,
-  );
-  return values.length === 0;
-}

src/utils/useContextMenuData.ts

@@ -90,10 +90,3 @@ export async function saveContextMenuData(
   };
   await storageUtil.set(STORAGE_KEY, pendingData);
 }
-
-/**
- * 清除右键菜单待处理数据
- */
-export async function clearContextMenuData(): Promise<void> {
-  await storageUtil.remove(STORAGE_KEY);
-}

src/utils/useDebounce.ts

@@ -1,24 +0,0 @@
-import { useState, useEffect } from 'react';
-
-/**
- * useDebounce Hook - 防抖值
- *
- * @param value - 需要防抖的值
- * @param delay - 延迟时间（毫秒）
- * @returns 防抖后的值
- */
-export function useDebounce<T>(value: T, delay: number): T {
-  const [debouncedValue, setDebouncedValue] = useState<T>(value);
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setDebouncedValue(value);
-    }, delay);
-
-    return () => {
-      clearTimeout(timer);
-    };
-  }, [value, delay]);
-
-  return debouncedValue;
-}

src/workers/generator.worker.ts

@@ -0,0 +1,165 @@
+/**
+ * 测试数据生成器 Web Worker
+ * 在后台线程中执行数据生成，避免阻塞 UI
+ */
+
+import { getGeneratorById } from '@/lib/generators';
+import type {
+  FieldConfig,
+  WorkerMessage,
+  GenerateResult,
+  GenerateProgress,
+} from '@/types/testDataGenerator';
+
+// 生成结果缓存
+let generatedData: Record<string, unknown>[] = [];
+let isCancelled = false;
+
+/**
+ * Worker 消息处理器
+ */
+self.onmessage = async (e: MessageEvent<WorkerMessage>) => {
+  const data = e.data;
+  const { type } = data;
+
+  switch (type) {
+    case 'start':
+      isCancelled = false;
+      await handleStart(data.payload);
+      break;
+    case 'cancel':
+      isCancelled = true;
+      break;
+  }
+};
+
+/**
+ * 处理开始生成消息
+ */
+async function handleStart(payload: {
+  fields: FieldConfig[];
+  count: number;
+  csvMode: boolean;
+}): Promise<void> {
+  const { fields, count } = payload;
+  generatedData = [];
+
+  try {
+    // 验证所有生成器是否存在
+    for (const field of fields) {
+      const generator = getGeneratorById(field.generatorId);
+      if (!generator) {
+        self.postMessage({
+          type: 'error',
+          payload: { error: `生成器 "${field.generatorId}" 不存在` },
+        });
+        return;
+      }
+    }
+
+    const startTime = Date.now();
+    const warnings: string[] = [];
+
+    // 生成数据
+    for (let i = 0; i < count; i++) {
+      if (isCancelled) {
+        self.postMessage({
+          type: 'complete',
+          payload: {
+            success: false,
+            error: '生成已取消',
+          },
+        });
+        return;
+      }
+
+      const record: Record<string, unknown> = {};
+
+      for (const field of fields) {
+        const generator = getGeneratorById(field.generatorId);
+        if (!generator) continue;
+
+        // 空值率控制
+        if (!field.required && Math.random() * 100 < field.nullRate) {
+          record[field.name] = null;
+          continue;
+        }
+
+        try {
+          // 唯一性约束处理
+          if (field.unique) {
+            let value: string | undefined;
+            const maxRetries = 100;
+            let retryCount = 0;
+
+            // 小数据量：随机生成 + 重试
+            if (count <= 1000) {
+              while (retryCount < maxRetries) {
+                value = generator.generate(field.params);
+                const isUnique = !generatedData.some((item) => item[field.name] === value);
+                if (isUnique) break;
+                retryCount++;
+                value = undefined;
+              }
+            } else {
+              // 大数据量：使用索引生成策略
+              if (generator.generateAtIndex) {
+                value = generator.generateAtIndex(field.params, i);
+              } else {
+                // 回退到随机生成
+                value = generator.generate(field.params);
+              }
+            }
+
+            if (value !== undefined) {
+              record[field.name] = value;
+            } else {
+              warnings.push(`字段 "${field.name}" 第 ${i + 1} 行唯一值生成失败`);
+              record[field.name] = generator.generate(field.params);
+            }
+          } else {
+            record[field.name] = generator.generate(field.params);
+          }
+        } catch (error) {
+          warnings.push(`字段 "${field.name}" 第 ${i + 1} 行生成错误: ${error}`);
+          record[field.name] = null;
+        }
+      }
+
+      generatedData.push(record);
+
+      // 进度回调（每1000条）
+      if ((i + 1) % 1000 === 0 || i === count - 1) {
+        const progress: GenerateProgress = {
+          progress: Math.round(((i + 1) / count) * 100),
+          generated: i + 1,
+          total: count,
+          estimatedTimeLeft: Math.round(((Date.now() - startTime) / (i + 1)) * (count - i - 1)),
+        };
+        self.postMessage({ type: 'progress', payload: progress });
+      }
+    }
+
+    const duration = Date.now() - startTime;
+    const successCount = generatedData.filter((item) => Object.keys(item).length > 0).length;
+
+    const result: GenerateResult = {
+      success: true,
+      data: generatedData,
+      warnings: warnings.length > 0 ? warnings : undefined,
+      stats: {
+        total: count,
+        success: successCount,
+        failed: count - successCount,
+        duration,
+      },
+    };
+
+    self.postMessage({ type: 'complete', payload: result });
+  } catch (error) {
+    self.postMessage({
+      type: 'error',
+      payload: { error: `生成失败: ${error}` },
+    });
+  }
+}

wxt.config.ts

@@ -58,8 +58,20 @@ export default defineConfig({
       'contextMenus',
     ],
     host_permissions: ['<all_urls>'],
+    icons: {
+      '16': 'icon/16.png',
+      '32': 'icon/32.png',
+      '48': 'icon/48.png',
+      '96': 'icon/96.png',
+      '128': 'icon/128.png',
+    },
     action: {
       default_title: '__MSG_appName__',
+      default_icon: {
+        '16': 'icon/16.png',
+        '32': 'icon/32.png',
+        '48': 'icon/48.png',
+      },
     },
     side_panel: {
       default_path: 'entrypoints/sidepanel/index.html',