feat: 实现测试数据生成器完整功能
- 添加类型定义 (FieldConfig, DataRule, GeneratorDefinition 等) - 实现 21 个数据生成器 (个人信息/业务数据/技术数据/基础类型) - 实现 Web Worker 后台数据生成引擎 - 实现规则存储与管理功能 - 实现 JSON/CSV 数据导出功能 - 开发完整 UI 组件 (字段管理/生成器选择/数据预览/导出面板等) - 集成到应用功能配置，添加国际化支持 功能特性: - 实时预览生成的数据 - 字段配置 (名称/描述/必填/空值率/唯一性约束) - 规则管理 (保存/加载/搜索/导入导出) - Web Worker 后台生成，支持进度显示和取消 - 响应式布局，支持多种设备 docs: 更新 TASKS.md 所有子任务复选框为已完成状态
This commit is contained in:
雨霖铃
@@ -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. **响应式设计**: 支持桌面端、平板端、移动端
|
||||
@@ -920,5 +920,273 @@
|
||||
"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_nullRateLow": {
|
||||
"message": "低 (5%)",
|
||||
"description": "Translation key: testDataGenerator_nullRateLow"
|
||||
},
|
||||
"testDataGenerator_nullRateMedium": {
|
||||
"message": "中 (20%)",
|
||||
"description": "Translation key: testDataGenerator_nullRateMedium"
|
||||
},
|
||||
"testDataGenerator_nullRateHigh": {
|
||||
"message": "高 (50%)",
|
||||
"description": "Translation key: testDataGenerator_nullRateHigh"
|
||||
},
|
||||
"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_defaultNullRate": {
|
||||
"message": "默认空值率",
|
||||
"description": "Translation key: testDataGenerator_defaultNullRate"
|
||||
},
|
||||
"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_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_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_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"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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,
|
||||
];
|
||||
@@ -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,
|
||||
];
|
||||
@@ -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),
|
||||
);
|
||||
}
|
||||
@@ -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,
|
||||
];
|
||||
@@ -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];
|
||||
@@ -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;
|
||||
}
|
||||
@@ -0,0 +1,125 @@
|
||||
/**
|
||||
* 数据预览组件
|
||||
* 展示生成的数据，支持 JSON 和 CSV 格式切换
|
||||
*/
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Copy, Check, FileJson, FileText } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { DataExporter } from '@/utils/dataExporter';
|
||||
import type { GenerateResult } from '@/types/testDataGenerator';
|
||||
|
||||
interface DataPreviewProps {
|
||||
result: GenerateResult | null;
|
||||
pageSize?: number;
|
||||
}
|
||||
|
||||
type PreviewFormat = 'json' | 'csv';
|
||||
|
||||
export default function DataPreview({ result, pageSize = 20 }: DataPreviewProps) {
|
||||
const { t } = useI18n('testDataGenerator');
|
||||
const [format, setFormat] = useState<PreviewFormat>('json');
|
||||
const [currentPage, setCurrentPage] = useState(0);
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
if (!result?.data || result.data.length === 0) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-center">
|
||||
<FileJson className="h-12 w-12 text-muted-foreground/40 mb-3" />
|
||||
<p className="text-sm text-muted-foreground">{t('testDataGenerator_noData')}</p>
|
||||
<p className="text-xs text-muted-foreground/70 mt-1">{t('testDataGenerator_noDataHint')}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const data = result.data;
|
||||
const totalPages = Math.ceil(data.length / pageSize);
|
||||
const startIndex = currentPage * pageSize;
|
||||
const endIndex = Math.min(startIndex + pageSize, data.length);
|
||||
const currentPageData = data.slice(startIndex, endIndex);
|
||||
|
||||
const content =
|
||||
format === 'json' ? DataExporter.toJSON(currentPageData) : DataExporter.toCSV(currentPageData);
|
||||
|
||||
const handleCopy = async () => {
|
||||
const fullContent = format === 'json' ? DataExporter.toJSON(data) : DataExporter.toCSV(data);
|
||||
const success = await DataExporter.copyToClipboard(fullContent);
|
||||
if (success) {
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
{/* 工具栏 */}
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant={format === 'json' ? 'default' : 'ghost'}
|
||||
size="sm"
|
||||
onClick={() => setFormat('json')}
|
||||
className="h-8 gap-1.5"
|
||||
>
|
||||
<FileJson className="h-4 w-4" />
|
||||
JSON
|
||||
</Button>
|
||||
<Button
|
||||
variant={format === 'csv' ? 'default' : 'ghost'}
|
||||
size="sm"
|
||||
onClick={() => setFormat('csv')}
|
||||
className="h-8 gap-1.5"
|
||||
>
|
||||
<FileText className="h-4 w-4" />
|
||||
CSV
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Button variant="ghost" size="sm" onClick={handleCopy} className="h-8 gap-1.5">
|
||||
{copied ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
|
||||
{copied ? t('testDataGenerator_copied') : t('testDataGenerator_copy')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 代码预览 */}
|
||||
<div className="flex-1 min-h-0 overflow-hidden">
|
||||
<pre className="h-full overflow-auto p-4 rounded-lg bg-muted/50 text-sm font-mono text-foreground whitespace-pre-wrap break-all">
|
||||
{content}
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
{/* 分页 */}
|
||||
{totalPages > 1 && (
|
||||
<div className="flex items-center justify-between mt-3 pt-3 border-t">
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{t('testDataGenerator_pageInfo', {
|
||||
current: currentPage + 1,
|
||||
total: totalPages,
|
||||
})}
|
||||
</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setCurrentPage((p) => Math.max(0, p - 1))}
|
||||
disabled={currentPage === 0}
|
||||
className="h-7"
|
||||
>
|
||||
{t('testDataGenerator_prevPage')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setCurrentPage((p) => Math.min(totalPages - 1, p + 1))}
|
||||
disabled={currentPage === totalPages - 1}
|
||||
className="h-7"
|
||||
>
|
||||
{t('testDataGenerator_nextPage')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
/**
|
||||
* 导出面板组件
|
||||
* 提供复制、下载 JSON、下载 CSV 选项
|
||||
*/
|
||||
|
||||
import { Copy, Download } from 'lucide-react';
|
||||
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!);
|
||||
await DataExporter.copyToClipboard(content);
|
||||
};
|
||||
|
||||
const handleCopyCSV = async () => {
|
||||
const content = DataExporter.toCSV(result.data!);
|
||||
await DataExporter.copyToClipboard(content);
|
||||
};
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,178 @@
|
||||
/**
|
||||
* 字段编辑器组件
|
||||
* 编辑单个字段的详细配置
|
||||
*/
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
export default function FieldEditor({ field, onChange }: FieldEditorProps) {
|
||||
const { t } = useI18n('testDataGenerator');
|
||||
const generator = getGeneratorById(field.generatorId);
|
||||
|
||||
const handleNameChange = (name: string) => {
|
||||
onChange({ ...field, name });
|
||||
};
|
||||
|
||||
const handleDescriptionChange = (description: string) => {
|
||||
onChange({ ...field, description });
|
||||
};
|
||||
|
||||
const handleRequiredChange = (required: boolean) => {
|
||||
onChange({
|
||||
...field,
|
||||
required,
|
||||
nullRate: required ? 0 : field.nullRate,
|
||||
});
|
||||
};
|
||||
|
||||
const handleNullRateChange = (nullRate: number) => {
|
||||
onChange({ ...field, nullRate });
|
||||
};
|
||||
|
||||
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: t('testDataGenerator_nullRateLow'), value: 5 },
|
||||
{ label: t('testDataGenerator_nullRateMedium'), value: 20 },
|
||||
{ label: t('testDataGenerator_nullRateHigh'), value: 50 },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
{/* 基础配置 */}
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-foreground">
|
||||
{t('testDataGenerator_fieldName')}
|
||||
</label>
|
||||
<Input
|
||||
value={field.name}
|
||||
onChange={(e) => handleNameChange(e.target.value)}
|
||||
placeholder={t('testDataGenerator_fieldNamePlaceholder')}
|
||||
className="h-9"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-foreground">
|
||||
{t('testDataGenerator_fieldDescription')}
|
||||
</label>
|
||||
<Input
|
||||
value={field.description || ''}
|
||||
onChange={(e) => handleDescriptionChange(e.target.value)}
|
||||
placeholder={t('testDataGenerator_fieldDescriptionPlaceholder')}
|
||||
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) => handleNullRateChange(Number(e.target.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-2 py-1 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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
/**
|
||||
* 字段项组件
|
||||
* 展示单个字段的基本信息
|
||||
*/
|
||||
|
||||
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;
|
||||
isSelected: boolean;
|
||||
}
|
||||
|
||||
export default function FieldItem({ field, onClick, isSelected }: FieldItemProps) {
|
||||
const { t } = useI18n('testDataGenerator');
|
||||
const generator = getGeneratorById(field.generatorId);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`flex-1 cursor-pointer p-2 rounded-md transition-colors ${
|
||||
isSelected ? 'bg-primary/10' : 'hover:bg-muted/50'
|
||||
}`}
|
||||
onClick={onClick}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium text-sm text-foreground truncate">{field.name}</span>
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{generator?.name || field.generatorId}
|
||||
</Badge>
|
||||
{!field.required && (
|
||||
<Badge variant="outline" className="text-xs text-muted-foreground">
|
||||
{field.nullRate}%
|
||||
</Badge>
|
||||
)}
|
||||
{field.unique && (
|
||||
<Badge variant="outline" className="text-xs text-blue-500">
|
||||
{t('testDataGenerator_unique')}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
{field.description && (
|
||||
<p className="text-xs text-muted-foreground mt-1 truncate">{field.description}</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,121 @@
|
||||
/**
|
||||
* 字段列表组件
|
||||
* 展示所有字段配置，支持添加、删除、排序
|
||||
*/
|
||||
|
||||
import { Plus, GripVertical, Trash2, ChevronUp, ChevronDown } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import type { FieldConfig } from '@/types/testDataGenerator';
|
||||
import FieldItem from './FieldItem';
|
||||
|
||||
interface FieldListProps {
|
||||
fields: FieldConfig[];
|
||||
onUpdate: (index: number, field: FieldConfig) => void;
|
||||
onRemove: (index: number) => void;
|
||||
onAdd: () => void;
|
||||
onSelect: (index: number) => void;
|
||||
selectedIndex: number | null;
|
||||
}
|
||||
|
||||
export default function FieldList({
|
||||
fields,
|
||||
onUpdate,
|
||||
onRemove,
|
||||
onAdd,
|
||||
onSelect,
|
||||
selectedIndex,
|
||||
}: FieldListProps) {
|
||||
const { t } = useI18n('testDataGenerator');
|
||||
|
||||
const handleMoveUp = (index: number) => {
|
||||
if (index === 0) return;
|
||||
const newFields = [...fields];
|
||||
[newFields[index - 1], newFields[index]] = [newFields[index], newFields[index - 1]];
|
||||
onUpdate(index - 1, newFields[index - 1]);
|
||||
onUpdate(index, newFields[index]);
|
||||
};
|
||||
|
||||
const handleMoveDown = (index: number) => {
|
||||
if (index === fields.length - 1) return;
|
||||
const newFields = [...fields];
|
||||
[newFields[index], newFields[index + 1]] = [newFields[index + 1], newFields[index]];
|
||||
onUpdate(index, newFields[index]);
|
||||
onUpdate(index + 1, newFields[index + 1]);
|
||||
};
|
||||
|
||||
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})
|
||||
</h3>
|
||||
<Button variant="outline" size="sm" onClick={onAdd} className="h-8 gap-1.5">
|
||||
<Plus className="h-4 w-4" />
|
||||
{t('testDataGenerator_addField')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto space-y-2 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>
|
||||
) : (
|
||||
fields.map((field, index) => (
|
||||
<div
|
||||
key={field.id}
|
||||
className={`group relative rounded-lg border transition-colors ${
|
||||
selectedIndex === index
|
||||
? 'border-primary bg-primary/5'
|
||||
: 'border-border hover:border-muted-foreground/30'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-2 p-3">
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-5 w-5 opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
onClick={() => handleMoveUp(index)}
|
||||
disabled={index === 0}
|
||||
>
|
||||
<ChevronUp className="h-3 w-3" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-5 w-5 opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
onClick={() => handleMoveDown(index)}
|
||||
disabled={index === fields.length - 1}
|
||||
>
|
||||
<ChevronDown className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<FieldItem
|
||||
field={field}
|
||||
onClick={() => onSelect(index)}
|
||||
isSelected={selectedIndex === index}
|
||||
/>
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 opacity-0 group-hover:opacity-100 transition-opacity text-destructive hover:text-destructive"
|
||||
onClick={() => onRemove(index)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
/**
|
||||
* 生成选项组件
|
||||
* 配置生成数量、数据格式等选项
|
||||
*/
|
||||
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
|
||||
interface GenerateOptionsProps {
|
||||
count: number;
|
||||
onCountChange: (count: number) => void;
|
||||
format: 'json' | 'csv';
|
||||
onFormatChange: (format: 'json' | 'csv') => void;
|
||||
defaultNullRate: number;
|
||||
onDefaultNullRateChange: (rate: number) => void;
|
||||
}
|
||||
|
||||
const COUNT_PRESETS = [10, 50, 100, 500, 1000, 5000, 10000];
|
||||
|
||||
export default function GenerateOptions({
|
||||
count,
|
||||
onCountChange,
|
||||
format,
|
||||
onFormatChange,
|
||||
defaultNullRate,
|
||||
onDefaultNullRateChange,
|
||||
}: 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>
|
||||
<Select value={format} onValueChange={(v) => onFormatChange(v as 'json' | 'csv')}>
|
||||
<SelectTrigger className="h-9">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="json">JSON</SelectItem>
|
||||
<SelectItem value="csv">CSV</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* 默认空值率 */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="text-sm font-medium text-foreground">
|
||||
{t('testDataGenerator_defaultNullRate')}
|
||||
</label>
|
||||
<span className="text-sm text-muted-foreground">{defaultNullRate}%</span>
|
||||
</div>
|
||||
<Input
|
||||
type="number"
|
||||
value={defaultNullRate}
|
||||
onChange={(e) => onDefaultNullRateChange(Number(e.target.value))}
|
||||
min={0}
|
||||
max={50}
|
||||
step={5}
|
||||
className="h-9 w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,118 @@
|
||||
/**
|
||||
* 生成器配置组件
|
||||
* 根据生成器参数定义动态渲染配置表单
|
||||
*/
|
||||
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
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 handleParamChange = (key: string, value: unknown) => {
|
||||
onChange({ ...params, [key]: value });
|
||||
};
|
||||
|
||||
if (generator.params.length === 0) {
|
||||
return <p className="text-sm text-muted-foreground py-2">此生成器无可配置参数</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 ? '启用' : '禁用'}
|
||||
</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="用逗号分隔多个值"
|
||||
className="h-9"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,256 @@
|
||||
/**
|
||||
* 规则管理器组件
|
||||
* 管理测试数据生成规则的保存、加载、删除等操作
|
||||
*/
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Search, Save, Upload, Download, Trash2, Copy, Edit, Clock, Tag } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import * as ruleStorage from '@/utils/ruleStorage';
|
||||
import type { DataRule, FieldConfig } from '@/types/testDataGenerator';
|
||||
|
||||
interface RuleManagerProps {
|
||||
currentFields: FieldConfig[];
|
||||
onLoad: (fields: FieldConfig[]) => void;
|
||||
}
|
||||
|
||||
export default function RuleManager({ currentFields, onLoad }: RuleManagerProps) {
|
||||
const { t } = useI18n('testDataGenerator');
|
||||
const [rules, setRules] = useState<DataRule[]>(() => ruleStorage.getAll());
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [showSaveDialog, setShowSaveDialog] = useState(false);
|
||||
const [ruleName, setRuleName] = useState('');
|
||||
const [ruleDescription, setRuleDescription] = useState('');
|
||||
|
||||
const loadRules = () => {
|
||||
setRules(ruleStorage.getAll());
|
||||
};
|
||||
|
||||
const filteredRules = searchQuery ? ruleStorage.search(searchQuery) : rules;
|
||||
|
||||
const handleSave = () => {
|
||||
if (!ruleName.trim()) return;
|
||||
|
||||
const newRule = ruleStorage.save({
|
||||
name: ruleName.trim(),
|
||||
description: ruleDescription.trim(),
|
||||
fields: currentFields,
|
||||
});
|
||||
|
||||
if (newRule) {
|
||||
loadRules();
|
||||
setShowSaveDialog(false);
|
||||
setRuleName('');
|
||||
setRuleDescription('');
|
||||
}
|
||||
};
|
||||
|
||||
const handleLoad = (rule: DataRule) => {
|
||||
onLoad(rule.fields);
|
||||
ruleStorage.recordUse(rule.id);
|
||||
loadRules();
|
||||
};
|
||||
|
||||
const handleDelete = (id: string) => {
|
||||
ruleStorage.deleteRule(id);
|
||||
loadRules();
|
||||
};
|
||||
|
||||
const handleDuplicate = (id: string) => {
|
||||
ruleStorage.duplicate(id);
|
||||
loadRules();
|
||||
};
|
||||
|
||||
const handleExport = () => {
|
||||
const json = ruleStorage.exportRules();
|
||||
const blob = new Blob([json], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = 'test-data-rules.json';
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
const handleImport = async () => {
|
||||
const input = document.createElement('input');
|
||||
input.type = 'file';
|
||||
input.accept = '.json';
|
||||
input.onchange = async (e) => {
|
||||
const file = (e.target as HTMLInputElement).files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
const text = await file.text();
|
||||
const result = ruleStorage.importRules(text);
|
||||
|
||||
if (result.errors.length > 0) {
|
||||
console.warn('[RuleManager] 导入警告:', result.errors);
|
||||
}
|
||||
|
||||
loadRules();
|
||||
};
|
||||
input.click();
|
||||
};
|
||||
|
||||
const formatDate = (timestamp: number) => {
|
||||
return new Date(timestamp).toLocaleDateString('zh-CN', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* 工具栏 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setShowSaveDialog(true)}
|
||||
disabled={currentFields.length === 0}
|
||||
className="h-8 gap-1.5"
|
||||
>
|
||||
<Save className="h-4 w-4" />
|
||||
{t('testDataGenerator_saveRule')}
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={handleImport} className="h-8 gap-1.5">
|
||||
<Upload className="h-4 w-4" />
|
||||
{t('testDataGenerator_import')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleExport}
|
||||
disabled={rules.length === 0}
|
||||
className="h-8 gap-1.5"
|
||||
>
|
||||
<Download className="h-4 w-4" />
|
||||
{t('testDataGenerator_export')}
|
||||
</Button>
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{t('testDataGenerator_ruleCount', { count: rules.length, max: 20 })}
|
||||
</span>
|
||||
</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)}
|
||||
placeholder={t('testDataGenerator_searchRules')}
|
||||
className="pl-9 h-9"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 保存对话框 */}
|
||||
{showSaveDialog && (
|
||||
<div className="p-3 rounded-lg border bg-card space-y-3">
|
||||
<h4 className="text-sm font-medium text-foreground">
|
||||
{t('testDataGenerator_saveNewRule')}
|
||||
</h4>
|
||||
<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 className="flex justify-end gap-2">
|
||||
<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>
|
||||
</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">
|
||||
{searchQuery
|
||||
? 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')}
|
||||
>
|
||||
<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={() => handleDelete(rule.id)}
|
||||
title={t('testDataGenerator_delete')}
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,145 @@
|
||||
/**
|
||||
* 数据生成器 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) {
|
||||
workerRef.current.terminate();
|
||||
}
|
||||
|
||||
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('Worker 运行错误');
|
||||
setProgress(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,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,245 @@
|
||||
/**
|
||||
* 测试数据生成器主页面
|
||||
*/
|
||||
|
||||
import { useState, useCallback } 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 } from '@/types/testDataGenerator';
|
||||
|
||||
// 生成唯一 ID 的辅助函数
|
||||
function generateId(): string {
|
||||
return `field_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
|
||||
}
|
||||
|
||||
import FieldList 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 [count, setCount] = useState(100);
|
||||
const [format, setFormat] = useState<'json' | 'csv'>('json');
|
||||
const [defaultNullRate, setDefaultNullRate] = useState(10);
|
||||
|
||||
// 当前标签页
|
||||
const [activeTab, setActiveTab] = useState<TabType>('fields');
|
||||
|
||||
// 添加新字段
|
||||
const handleAddField = useCallback(() => {
|
||||
const newField: FieldConfig = {
|
||||
id: generateId(),
|
||||
name: `field${fields.length + 1}`,
|
||||
generatorId: 'chineseName',
|
||||
params: {},
|
||||
required: true,
|
||||
nullRate: 0,
|
||||
unique: false,
|
||||
};
|
||||
setFields([...fields, newField]);
|
||||
setSelectedIndex(fields.length);
|
||||
}, [fields]);
|
||||
|
||||
// 更新字段
|
||||
const handleUpdateField = useCallback(
|
||||
(index: number, field: FieldConfig) => {
|
||||
const newFields = [...fields];
|
||||
newFields[index] = field;
|
||||
setFields(newFields);
|
||||
},
|
||||
[fields],
|
||||
);
|
||||
|
||||
// 删除字段
|
||||
const handleRemoveField = useCallback(
|
||||
(index: number) => {
|
||||
const newFields = fields.filter((_, i) => i !== index);
|
||||
setFields(newFields);
|
||||
if (selectedIndex === index) {
|
||||
setSelectedIndex(null);
|
||||
} else if (selectedIndex !== null && selectedIndex > index) {
|
||||
setSelectedIndex(selectedIndex - 1);
|
||||
}
|
||||
},
|
||||
[fields, selectedIndex],
|
||||
);
|
||||
|
||||
// 加载规则
|
||||
const handleLoadRule = useCallback(
|
||||
(loadedFields: FieldConfig[]) => {
|
||||
setFields(loadedFields);
|
||||
setSelectedIndex(null);
|
||||
clearResult();
|
||||
},
|
||||
[clearResult],
|
||||
);
|
||||
|
||||
// 开始生成
|
||||
const handleGenerate = useCallback(() => {
|
||||
if (fields.length === 0) return;
|
||||
generate(fields, count, format === 'csv');
|
||||
}, [fields, count, format, generate]);
|
||||
|
||||
// 获取选中的字段
|
||||
const selectedField = selectedIndex !== null ? fields[selectedIndex] : null;
|
||||
|
||||
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="mb-6">
|
||||
<h1 className="text-xl font-semibold text-foreground">{t('testDataGenerator_title')}</h1>
|
||||
<p className="text-sm text-muted-foreground mt-1">{t('testDataGenerator_description')}</p>
|
||||
</div>
|
||||
|
||||
{/* 主要内容区域 - 左右分栏 */}
|
||||
<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="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{/* 字段列表 */}
|
||||
<div className="p-4 rounded-xl border border-border bg-card shadow-sm">
|
||||
<FieldList
|
||||
fields={fields}
|
||||
onUpdate={handleUpdateField}
|
||||
onRemove={handleRemoveField}
|
||||
onAdd={handleAddField}
|
||||
onSelect={setSelectedIndex}
|
||||
selectedIndex={selectedIndex}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 字段编辑器 */}
|
||||
<div className="p-4 rounded-xl border border-border bg-card shadow-sm">
|
||||
{selectedField ? (
|
||||
<FieldEditor
|
||||
field={selectedField}
|
||||
onChange={(updatedField) => handleUpdateField(selectedIndex!, updatedField)}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-center">
|
||||
<Settings className="h-10 w-10 text-muted-foreground/40 mb-3" />
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t('testDataGenerator_selectFieldToEdit')}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 规则管理标签页 */}
|
||||
{activeTab === 'rules' && (
|
||||
<div className="p-4 rounded-xl border border-border bg-card shadow-sm">
|
||||
<RuleManager currentFields={fields} onLoad={handleLoadRule} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 生成选项 */}
|
||||
<div className="p-4 rounded-xl border border-border bg-card shadow-sm">
|
||||
<GenerateOptions
|
||||
count={count}
|
||||
onCountChange={setCount}
|
||||
format={format}
|
||||
onFormatChange={setFormat}
|
||||
defaultNullRate={defaultNullRate}
|
||||
onDefaultNullRateChange={setDefaultNullRate}
|
||||
/>
|
||||
</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 || 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-[400px]">
|
||||
<DataPreview result={result} />
|
||||
</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>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Vendored
+2
-1
@@ -10,7 +10,8 @@ export type PageType =
|
||||
| 'jwt' // JWT 解析工具
|
||||
| 'jsonDiff' // JSON 差异比较工具
|
||||
| 'base64Converter' // Base64 转换器工具
|
||||
| 'rightClickRestorer'; // 右键菜单恢复工具
|
||||
| 'rightClickRestorer' // 右键菜单恢复工具
|
||||
| 'testDataGenerator'; // 测试数据生成器工具
|
||||
|
||||
/**
|
||||
* JSON 工具页面子模式类型定义
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,329 @@
|
||||
/**
|
||||
* 规则存储工具
|
||||
* 实现测试数据生成器规则的持久化存储和管理
|
||||
*/
|
||||
|
||||
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 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;
|
||||
}
|
||||
|
||||
/**
|
||||
* 复制规则
|
||||
*/
|
||||
export function duplicate(id: string): 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}（副本）`,
|
||||
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 };
|
||||
}
|
||||
@@ -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}` },
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user