develop (#68)

* docs(AGENTS.md): 添加 Git Commit 必须使用中文描述的规范 * docs: 更新测试数据生成器功能设计文档 * refactor: 删除死代码 * docs: 统一测试数据生成器文档，移除 SQL/TypeScript 导出，修复接口命名不一致 * feat: 实现测试数据生成器功能 * docs: 更新 README 和 AGENTS 文档，补充测试数据生成器模块说明
2026-06-07 00:04:53 +08:00
parent a5d86a92c2
commit a163297de4
39 changed files with 9572 additions and 27 deletions
@@ -0,0 +1,21 @@
+# 测试数据生成器 - 功能设计文档
+
+> 版本: v1.0
+> 创建时间: 2024-01-20
+> 状态: 待 Review
+
+## 产品定位
+
+**轻量级可视化测试数据生成器**
+
+- 纯前端工具，无需后端
+- 可视化配置，无需编码
+- 本地生成，数据安全
+
+## 目录
+
+- [核心功能](./core-features.md)
+- [生成器库](./generators.md)
+- [规则管理](./rule-management.md)
+- [界面设计](./ui-design.md)
+- [技术实现](./technical-implementation.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. **响应式设计**: 支持桌面端、平板端、移动端
@@ -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)
@@ -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位身份证号                        │ │ │
+│  │  │ 中文地址        生成中国地址                            │ │ │
+│  │  └─────────────────────────────────────────────────────────┘ │ │
+│  │                                                               │ │
+│  └───────────────────────────────────────────────────────────────┘ │
+│                                                                     │
+└─────────────────────────────────────────────────────────────────────┘
+```
@@ -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 文件导入导出         |
+| 使用统计 | 记录使用次数和时间             |
+| 搜索筛选 | 支持关键词搜索                 |
@@ -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