Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 LingandRX
|
a5d86a92c2 | ||
|
LingandRX
|
c992986789 | ||
|
LingandRX
|
70b799aa2d | ||
|
LingandRX
|
58af2af37b |
+2
-18
@@ -14,11 +14,6 @@ stats-*.json
|
|||||||
.wxt
|
.wxt
|
||||||
.vitest
|
.vitest
|
||||||
|
|
||||||
# Environment variables
|
|
||||||
.env
|
|
||||||
.env.local
|
|
||||||
.env.*.local
|
|
||||||
|
|
||||||
# Editor directories and files
|
# Editor directories and files
|
||||||
.vscode/*
|
.vscode/*
|
||||||
!.vscode/extensions.json
|
!.vscode/extensions.json
|
||||||
@@ -35,16 +30,5 @@ stats-*.json
|
|||||||
.qoder/*
|
.qoder/*
|
||||||
dev/*
|
dev/*
|
||||||
|
|
||||||
# Build outputs
|
docs/*
|
||||||
dist/
|
!docs/VISUAL_STYLE_GUIDE.md
|
||||||
build/
|
|
||||||
|
|
||||||
# Test coverage
|
|
||||||
coverage/
|
|
||||||
|
|
||||||
# IDE files
|
|
||||||
*.code-workspace
|
|
||||||
|
|
||||||
# Other
|
|
||||||
*.tsbuildinfo
|
|
||||||
*.tsxbuildinfo
|
|
||||||
|
|||||||
@@ -1,21 +0,0 @@
|
|||||||
# 测试数据生成器 - 功能设计文档
|
|
||||||
|
|
||||||
> 版本: v1.0
|
|
||||||
> 创建时间: 2024-01-20
|
|
||||||
> 状态: 待 Review
|
|
||||||
|
|
||||||
## 产品定位
|
|
||||||
|
|
||||||
**轻量级可视化测试数据生成器**
|
|
||||||
|
|
||||||
- 纯前端工具，无需后端
|
|
||||||
- 可视化配置，无需编码
|
|
||||||
- 本地生成，数据安全
|
|
||||||
|
|
||||||
## 目录
|
|
||||||
|
|
||||||
- [核心功能](./core-features.md)
|
|
||||||
- [生成器库](./generators.md)
|
|
||||||
- [规则管理](./rule-management.md)
|
|
||||||
- [界面设计](./ui-design.md)
|
|
||||||
- [技术实现](./technical-implementation.md)
|
|
||||||
@@ -1,384 +0,0 @@
|
|||||||
# 测试数据生成器 - 实现任务列表
|
|
||||||
|
|
||||||
> 创建时间: 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. **响应式设计**: 支持桌面端、平板端、移动端
|
|
||||||
@@ -1,238 +0,0 @@
|
|||||||
# 核心功能
|
|
||||||
|
|
||||||
## 功能概览
|
|
||||||
|
|
||||||
| 功能模块 | 功能点 | 说明 | 优先级 |
|
|
||||||
| -------------- | ------------- | ------------------ | ------ |
|
|
||||||
| **字段配置** | 添加字段 | 可视化添加数据字段 | P0 |
|
|
||||||
| | 删除字段 | 删除不需要的字段 | P0 |
|
|
||||||
| | 字段排序 | 拖拽调整字段顺序 | P1 |
|
|
||||||
| | 字段命名 | 自定义字段名称 | P0 |
|
|
||||||
| | 必填/选填设置 | 控制字段是否必填 | P0 |
|
|
||||||
| | 空值率配置 | 选填字段空值概率 | P1 |
|
|
||||||
| **生成器系统** | 生成器选择 | 从生成器库中选择 | P0 |
|
|
||||||
| | 参数配置 | 配置生成器参数 | P0 |
|
|
||||||
| | 实时预览 | 配置时查看生成结果 | P1 |
|
|
||||||
| **数据生成** | 批量生成 | 支持 10000+ 条数据 | P0 |
|
|
||||||
| | 唯一性约束 | 保证字段值唯一 | P1 |
|
|
||||||
| | 组合策略 | 自动选择生成策略 | P1 |
|
|
||||||
| | 数据预览 | 生成前预览数据 | P1 |
|
|
||||||
| **数据导出** | JSON 导出 | 导出为 JSON 格式 | P0 |
|
|
||||||
| | CSV 导出 | 导出为 CSV 格式 | P0 |
|
|
||||||
|
|
||||||
## 功能详情
|
|
||||||
|
|
||||||
### 1. 字段配置
|
|
||||||
|
|
||||||
#### 添加字段
|
|
||||||
|
|
||||||
- 用户点击"添加字段"按钮
|
|
||||||
- 弹出生成器选择器
|
|
||||||
- 选择生成器后，自动创建新字段
|
|
||||||
- 字段默认名称为生成器名称
|
|
||||||
|
|
||||||
#### 删除字段
|
|
||||||
|
|
||||||
- 每个字段右侧有删除按钮
|
|
||||||
- 点击后弹出确认对话框
|
|
||||||
- 确认后删除该字段
|
|
||||||
|
|
||||||
#### 字段排序
|
|
||||||
|
|
||||||
- 支持拖拽排序
|
|
||||||
- 支持上移/下移按钮
|
|
||||||
- 排序后预览数据同步更新
|
|
||||||
|
|
||||||
#### 字段命名
|
|
||||||
|
|
||||||
- 字段名称可自定义
|
|
||||||
- 支持中英文命名
|
|
||||||
- 同一规则内字段名不可重复
|
|
||||||
|
|
||||||
#### 必填/选填设置
|
|
||||||
|
|
||||||
- 每个字段可设置为"必填"或"选填"
|
|
||||||
- **必填字段**: 100% 生成数据
|
|
||||||
- **选填字段**: 可配置空值概率（0-100%）
|
|
||||||
- 默认所有字段为必填
|
|
||||||
|
|
||||||
#### 空值率配置
|
|
||||||
|
|
||||||
- 选填字段可单独设置空值率
|
|
||||||
- 提供预设值：低（20%）、中（50%）、高（80%）
|
|
||||||
- 支持滑块精细调节（0-100%）
|
|
||||||
- 未单独设置的选填字段使用全局默认空值率
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 2. 生成器系统
|
|
||||||
|
|
||||||
#### 生成器选择
|
|
||||||
|
|
||||||
- 以分类方式展示生成器
|
|
||||||
- 支持搜索生成器
|
|
||||||
- 点击选择后添加到字段配置
|
|
||||||
|
|
||||||
#### 价格生成器（业务数据）
|
|
||||||
|
|
||||||
生成真实的价格数据，支持多种策略：
|
|
||||||
|
|
||||||
| 策略 | 说明 | 适用场景 |
|
|
||||||
| -------- | ------------------------------ | ------------ |
|
|
||||||
| 真实分布 | 对数正态分布，模拟真实商品价格 | 通用电商场景 |
|
|
||||||
| 均匀随机 | 所有价格等概率 | 测试数据 |
|
|
||||||
| 心理定价 | .99/.98/.95 结尾 | 营销场景 |
|
|
||||||
|
|
||||||
**参数配置**：
|
|
||||||
|
|
||||||
- 最低价/最高价：控制价格区间
|
|
||||||
- 小数位数：0（整数）、1、2 位
|
|
||||||
- 生成策略：选择分布类型
|
|
||||||
|
|
||||||
#### 年龄生成器（个人信息）
|
|
||||||
|
|
||||||
生成真实分布的年龄数据：
|
|
||||||
|
|
||||||
| 策略 | 说明 | 适用场景 |
|
|
||||||
| -------- | ---------------------------- | ------------ |
|
|
||||||
| 真实分布 | 正态分布，均值 35，标准差 10 | 通用用户数据 |
|
|
||||||
| 人口比例 | 按中国人口年龄比例分布 | 市场调研数据 |
|
|
||||||
| 均匀随机 | 所有年龄等概率 | 测试数据 |
|
|
||||||
|
|
||||||
**参数配置**：
|
|
||||||
|
|
||||||
- 最小年龄/最大年龄：控制年龄区间
|
|
||||||
- 生成策略：选择分布类型
|
|
||||||
|
|
||||||
#### 数量生成器（业务数据）
|
|
||||||
|
|
||||||
生成真实分布的数量数据：
|
|
||||||
|
|
||||||
| 策略 | 说明 | 适用场景 |
|
|
||||||
| -------- | --------------------------- | -------- |
|
|
||||||
| 真实分布 | 泊松分布，大多数购买 1-3 件 | 零售订单 |
|
|
||||||
| 批发模式 | 10-100 之间均匀分布 | 批发订单 |
|
|
||||||
| 均匀随机 | 所有数量等概率 | 测试数据 |
|
|
||||||
|
|
||||||
**参数配置**：
|
|
||||||
|
|
||||||
- 最小值/最大值：控制数量区间
|
|
||||||
- 生成策略：选择分布类型
|
|
||||||
|
|
||||||
#### 评分生成器（业务数据）
|
|
||||||
|
|
||||||
生成真实分布的评分数据：
|
|
||||||
|
|
||||||
| 策略 | 说明 | 适用场景 |
|
|
||||||
| -------- | ------------------ | -------- |
|
|
||||||
| 真实分布 | 偏态分布，偏向高分 | 电商平台 |
|
|
||||||
| 严格评价 | 偏态分布，偏向低分 | 严格评审 |
|
|
||||||
| 均匀随机 | 所有评分等概率 | 测试数据 |
|
|
||||||
|
|
||||||
**参数配置**：
|
|
||||||
|
|
||||||
- 最低分/最高分：控制评分区间
|
|
||||||
- 小数位数：0、1 位
|
|
||||||
- 生成策略：选择分布类型
|
|
||||||
|
|
||||||
#### 折扣生成器（业务数据）
|
|
||||||
|
|
||||||
生成真实分布的折扣数据：
|
|
||||||
|
|
||||||
| 策略 | 说明 | 适用场景 |
|
|
||||||
| -------- | ------------------------ | -------- |
|
|
||||||
| 心理定价 | 常见折扣点（8折、9折等） | 电商促销 |
|
|
||||||
| 清仓模式 | 大折扣区间（3-7折） | 清仓处理 |
|
|
||||||
| 均匀随机 | 所有折扣等概率 | 测试数据 |
|
|
||||||
|
|
||||||
**参数配置**：
|
|
||||||
|
|
||||||
- 最低折扣/最高折扣：控制折扣区间（0.1-0.9）
|
|
||||||
- 生成策略：选择分布类型
|
|
||||||
|
|
||||||
#### 库存生成器（业务数据）
|
|
||||||
|
|
||||||
生成真实分布的库存数据：
|
|
||||||
|
|
||||||
| 策略 | 说明 | 适用场景 |
|
|
||||||
| -------- | ------------------------ | -------- |
|
|
||||||
| 真实分布 | 指数分布，大多数库存较少 | 通用商品 |
|
|
||||||
| 热销商品 | 低库存区间（0-50） | 热销商品 |
|
|
||||||
| 均匀随机 | 所有库存等概率 | 测试数据 |
|
|
||||||
|
|
||||||
**参数配置**：
|
|
||||||
|
|
||||||
- 最小库存/最大库存：控制库存区间
|
|
||||||
- 生成策略：选择分布类型
|
|
||||||
|
|
||||||
#### 参数配置
|
|
||||||
|
|
||||||
- 每个生成器有对应的参数配置界面
|
|
||||||
- 必填参数标记星号
|
|
||||||
- 修改参数后实时预览更新
|
|
||||||
|
|
||||||
#### 实时预览
|
|
||||||
|
|
||||||
- 配置参数时，右侧预览区实时更新
|
|
||||||
- 显示 5-10 条示例数据
|
|
||||||
- 帮助用户确认配置是否正确
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 3. 数据生成
|
|
||||||
|
|
||||||
#### 批量生成
|
|
||||||
|
|
||||||
- 支持配置生成数量
|
|
||||||
- 使用 Web Worker 后台生成
|
|
||||||
- 支持 10000+ 条数据
|
|
||||||
- 生成过程中显示进度条
|
|
||||||
|
|
||||||
#### 唯一性约束
|
|
||||||
|
|
||||||
- 每个字段可单独设置唯一性约束
|
|
||||||
- 启用后，该字段生成的值不会重复
|
|
||||||
- 如果无法生成唯一值，使用重试机制
|
|
||||||
|
|
||||||
#### 组合策略（唯一性生成）
|
|
||||||
|
|
||||||
系统根据数据量自动选择最优生成策略：
|
|
||||||
|
|
||||||
| 数据量 | 策略 | 说明 |
|
|
||||||
| --------- | --------------- | ---------------------- |
|
|
||||||
| ≤ 1000 条 | 随机生成 + 重试 | 保证随机性，性能可接受 |
|
|
||||||
| > 1000 条 | 索引生成 | 高性能，保证唯一性 |
|
|
||||||
|
|
||||||
**实现方式**：
|
|
||||||
|
|
||||||
- 生成器提供两个方法：`generate()` 和 `generateAtIndex()`
|
|
||||||
- `generate()`: 随机生成，用于小数据量或非唯一性字段
|
|
||||||
- `generateAtIndex()`: 索引生成，用于大数据量唯一性字段
|
|
||||||
- 系统根据配置自动选择合适的方法
|
|
||||||
|
|
||||||
**示例**：
|
|
||||||
|
|
||||||
- 手机号字段：`generateAtIndex(params, index)` 使用 index 生成唯一手机号
|
|
||||||
- 姓名字段：`generateAtIndex(params, index)` 使用 index 组合姓和名
|
|
||||||
|
|
||||||
#### 数据预览
|
|
||||||
|
|
||||||
- 生成前可预览数据
|
|
||||||
- 显示前 10 条数据
|
|
||||||
- 支持分页查看更多数据
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 4. 数据导出
|
|
||||||
|
|
||||||
#### JSON 导出
|
|
||||||
|
|
||||||
- 导出为标准 JSON 格式
|
|
||||||
- 支持压缩和格式化两种模式
|
|
||||||
- 包含字段名和数据
|
|
||||||
|
|
||||||
#### CSV 导出
|
|
||||||
|
|
||||||
- 导出为 CSV 格式
|
|
||||||
- 自动处理逗号转义
|
|
||||||
- 支持中文编码 (UTF-8 with BOM)
|
|
||||||
@@ -1,702 +0,0 @@
|
|||||||
# 生成器库
|
|
||||||
|
|
||||||
## 分类概览
|
|
||||||
|
|
||||||
| 分类 | 生成器数量 | 说明 |
|
|
||||||
| -------- | ---------- | ------------------------------------------------ |
|
|
||||||
| 个人信息 | 6 个 | 中文姓名、邮箱、手机号、年龄等 |
|
|
||||||
| 业务数据 | 8 个 | 订单号、价格、日期、状态、数量、评分、折扣、库存 |
|
|
||||||
| 技术数据 | 3 个 | UUID、IP地址、URL |
|
|
||||||
| 基础类型 | 4 个 | 整数、浮点数、字符串等 |
|
|
||||||
| **总计** | **21 个** | |
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 个人信息生成器
|
|
||||||
|
|
||||||
### 1. 中文姓名 (chineseName)
|
|
||||||
|
|
||||||
**说明**: 生成中文姓名，如张三、李四
|
|
||||||
|
|
||||||
**参数**:
|
|
||||||
|
|
||||||
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|
|
||||||
| --------------- | ---------------------------- | ---- | ------------------ | ------------ |
|
|
||||||
| surnamePool | string \| string[] | 否 | 百家姓前100个 | 姓氏池 |
|
|
||||||
| givenNameLength | { min: number, max: number } | 否 | { min: 1, max: 2 } | 名字长度范围 |
|
|
||||||
|
|
||||||
**示例**:
|
|
||||||
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"name": "name",
|
|
||||||
"generator": "chineseName",
|
|
||||||
"params": {
|
|
||||||
"surnamePool": ["张", "王", "李", "赵"],
|
|
||||||
"givenNameLength": { "min": 1, "max": 2 }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
**生成结果**: 张伟, 李娜, 王强, 赵敏
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 2. 邮箱地址 (email)
|
|
||||||
|
|
||||||
**说明**: 生成邮箱地址
|
|
||||||
|
|
||||||
**参数**:
|
|
||||||
|
|
||||||
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|
|
||||||
| --------- | -------------------- | ---- | ------------------------------------------------------------ | ---------- |
|
|
||||||
| domains | string[] | 否 | ['qq.com', '163.com', '126.com', 'gmail.com', 'outlook.com'] | 域名列表 |
|
|
||||||
| nameStyle | 'pinyin' \| 'random' | 否 | 'pinyin' | 用户名风格 |
|
|
||||||
|
|
||||||
**示例**:
|
|
||||||
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"name": "email",
|
|
||||||
"generator": "email",
|
|
||||||
"params": {
|
|
||||||
"domains": ["qq.com", "163.com"],
|
|
||||||
"nameStyle": "pinyin"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
**生成结果**: zhangwei@qq.com, lina@163.com
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 3. 中国手机号 (chinesePhone)
|
|
||||||
|
|
||||||
**说明**: 生成 11 位中国手机号
|
|
||||||
|
|
||||||
**参数**:
|
|
||||||
|
|
||||||
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|
|
||||||
| ------ | -------- | ---- | -------------- | ---------- |
|
|
||||||
| prefix | string[] | 否 | 常见手机号前缀 | 手机号前缀 |
|
|
||||||
|
|
||||||
**示例**:
|
|
||||||
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"name": "phone",
|
|
||||||
"generator": "chinesePhone",
|
|
||||||
"params": {
|
|
||||||
"prefix": ["138", "139", "150", "151"]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
**生成结果**: 13812345678, 15087654321
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 4. 身份证号 (idCard)
|
|
||||||
|
|
||||||
**说明**: 生成 18 位中国身份证号
|
|
||||||
|
|
||||||
**参数**:
|
|
||||||
|
|
||||||
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|
|
||||||
| ------ | ------ | ---- | ------ | ------ |
|
|
||||||
| region | string | 否 | 随机 | 地区码 |
|
|
||||||
|
|
||||||
**示例**:
|
|
||||||
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"name": "idCard",
|
|
||||||
"generator": "idCard",
|
|
||||||
"params": {
|
|
||||||
"region": "110101"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
**生成结果**: 110101199001011234
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 5. 中文地址 (chineseAddress)
|
|
||||||
|
|
||||||
**说明**: 生成中国地址
|
|
||||||
|
|
||||||
**参数**:
|
|
||||||
|
|
||||||
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|
|
||||||
| ------ | ------------------------------ | ---- | ------ | -------- |
|
|
||||||
| level | 'full' \| 'province' \| 'city' | 否 | 'full' | 详细程度 |
|
|
||||||
|
|
||||||
**示例**:
|
|
||||||
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"name": "address",
|
|
||||||
"generator": "chineseAddress",
|
|
||||||
"params": {
|
|
||||||
"level": "full"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
**生成结果**: 北京市朝阳区建国路88号
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 6. 年龄 (age)
|
|
||||||
|
|
||||||
**说明**: 生成真实分布的年龄数据
|
|
||||||
|
|
||||||
**参数**:
|
|
||||||
|
|
||||||
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|
|
||||||
| -------- | ----------------------------------------- | ---- | ----------- | -------- |
|
|
||||||
| min | number | 否 | 1 | 最小年龄 |
|
|
||||||
| max | number | 否 | 100 | 最大年龄 |
|
|
||||||
| strategy | 'realistic' \| 'demographic' \| 'uniform' | 否 | 'realistic' | 生成策略 |
|
|
||||||
|
|
||||||
**策略说明**:
|
|
||||||
|
|
||||||
| 策略 | 说明 | 适用场景 |
|
|
||||||
| ----------- | ---------------------------- | ------------ |
|
|
||||||
| realistic | 正态分布，均值 35，标准差 10 | 通用用户数据 |
|
|
||||||
| demographic | 按中国人口年龄比例分布 | 市场调研数据 |
|
|
||||||
| uniform | 均匀随机 | 测试数据 |
|
|
||||||
|
|
||||||
**示例**:
|
|
||||||
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"name": "age",
|
|
||||||
"generator": "age",
|
|
||||||
"params": {
|
|
||||||
"min": 18,
|
|
||||||
"max": 65,
|
|
||||||
"strategy": "realistic"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
**生成结果**: 28, 42, 35, 51, 23
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 业务数据生成器
|
|
||||||
|
|
||||||
### 1. 订单号 (orderId)
|
|
||||||
|
|
||||||
**说明**: 生成订单号
|
|
||||||
|
|
||||||
**参数**:
|
|
||||||
|
|
||||||
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|
|
||||||
| ------------ | ------- | ---- | ------ | ------------ |
|
|
||||||
| prefix | string | 否 | 'ORD' | 前缀 |
|
|
||||||
| dateIncluded | boolean | 否 | true | 是否包含日期 |
|
|
||||||
|
|
||||||
**示例**:
|
|
||||||
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"name": "orderId",
|
|
||||||
"generator": "orderId",
|
|
||||||
"params": {
|
|
||||||
"prefix": "ORD",
|
|
||||||
"dateIncluded": true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
**生成结果**: ORD20240115001, ORD20240115002
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 2. 价格 (price)
|
|
||||||
|
|
||||||
**说明**: 生成真实的价格数据，支持多种分布策略
|
|
||||||
|
|
||||||
**参数**:
|
|
||||||
|
|
||||||
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|
|
||||||
| -------- | ------------------------------------------- | ---- | ----------- | -------- |
|
|
||||||
| min | number | 是 | 1 | 最低价 |
|
|
||||||
| max | number | 是 | 9999 | 最高价 |
|
|
||||||
| decimals | 0 \| 1 \| 2 | 否 | 2 | 小数位数 |
|
|
||||||
| strategy | 'realistic' \| 'uniform' \| 'psychological' | 否 | 'realistic' | 生成策略 |
|
|
||||||
|
|
||||||
**生成策略说明**:
|
|
||||||
|
|
||||||
| 策略 | 说明 | 适用场景 |
|
|
||||||
| ------------- | ------------------------------ | ------------ |
|
|
||||||
| realistic | 对数正态分布，模拟真实商品价格 | 通用电商场景 |
|
|
||||||
| uniform | 均匀随机，所有价格等概率 | 测试数据 |
|
|
||||||
| psychological | 心理定价，.99/.98/.95 结尾 | 营销场景 |
|
|
||||||
|
|
||||||
**示例**:
|
|
||||||
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"name": "price",
|
|
||||||
"generator": "price",
|
|
||||||
"params": {
|
|
||||||
"min": 10,
|
|
||||||
"max": 5000,
|
|
||||||
"decimals": 2,
|
|
||||||
"strategy": "realistic"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
**生成结果**:
|
|
||||||
|
|
||||||
- 真实分布: 299.00, 1599.50, 49.99, 1299.00
|
|
||||||
- 心理定价: 299.99, 1599.98, 49.95, 1299.99
|
|
||||||
- 均匀随机: 1234.56, 5678.90, 890.12
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 3. 日期时间 (date)
|
|
||||||
|
|
||||||
**说明**: 生成日期时间
|
|
||||||
|
|
||||||
**参数**:
|
|
||||||
|
|
||||||
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|
|
||||||
| ------ | ------ | ---- | --------------------- | -------- |
|
|
||||||
| format | string | 否 | 'YYYY-MM-DD HH:mm:ss' | 日期格式 |
|
|
||||||
| min | string | 否 | '2020-01-01' | 最早日期 |
|
|
||||||
| max | string | 否 | 当前日期 | 最晚日期 |
|
|
||||||
|
|
||||||
**示例**:
|
|
||||||
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"name": "createdAt",
|
|
||||||
"generator": "date",
|
|
||||||
"params": {
|
|
||||||
"format": "YYYY-MM-DD HH:mm:ss",
|
|
||||||
"min": "2024-01-01"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
**生成结果**: 2024-01-15 14:30:22
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 4. 状态 (status)
|
|
||||||
|
|
||||||
**说明**: 从选项中随机选择
|
|
||||||
|
|
||||||
**参数**:
|
|
||||||
|
|
||||||
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|
|
||||||
| ------- | -------- | ---- | -------- | ------------ |
|
|
||||||
| options | string[] | 是 | - | 状态选项列表 |
|
|
||||||
| weights | number[] | 否 | 均匀分布 | 各选项权重 |
|
|
||||||
|
|
||||||
**示例**:
|
|
||||||
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"name": "status",
|
|
||||||
"generator": "status",
|
|
||||||
"params": {
|
|
||||||
"options": ["pending", "paid", "shipped", "completed"],
|
|
||||||
"weights": [30, 40, 20, 10]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
**生成结果**: pending, paid, shipped, completed
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 5. 数量 (quantity)
|
|
||||||
|
|
||||||
**说明**: 生成真实分布的数量数据
|
|
||||||
|
|
||||||
**参数**:
|
|
||||||
|
|
||||||
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|
|
||||||
| -------- | ---------------------------------- | ---- | ----------- | -------- |
|
|
||||||
| min | number | 否 | 1 | 最小值 |
|
|
||||||
| max | number | 否 | 100 | 最大值 |
|
|
||||||
| strategy | 'realistic' \| 'bulk' \| 'uniform' | 否 | 'realistic' | 生成策略 |
|
|
||||||
|
|
||||||
**策略说明**:
|
|
||||||
|
|
||||||
| 策略 | 说明 | 适用场景 |
|
|
||||||
| --------- | --------------------------- | -------- |
|
|
||||||
| realistic | 泊松分布，大多数购买 1-3 件 | 零售订单 |
|
|
||||||
| bulk | 10-100 之间均匀分布 | 批发订单 |
|
|
||||||
| uniform | 均匀随机 | 测试数据 |
|
|
||||||
|
|
||||||
**示例**:
|
|
||||||
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"name": "quantity",
|
|
||||||
"generator": "quantity",
|
|
||||||
"params": {
|
|
||||||
"min": 1,
|
|
||||||
"max": 50,
|
|
||||||
"strategy": "realistic"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
**生成结果**: 2, 1, 5, 3, 1
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 6. 评分 (rating)
|
|
||||||
|
|
||||||
**说明**: 生成真实分布的评分数据
|
|
||||||
|
|
||||||
**参数**:
|
|
||||||
|
|
||||||
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|
|
||||||
| -------- | ------------------------------------ | ---- | ----------- | -------- |
|
|
||||||
| min | number | 否 | 1 | 最低分 |
|
|
||||||
| max | number | 否 | 5 | 最高分 |
|
|
||||||
| decimals | number | 否 | 1 | 小数位数 |
|
|
||||||
| strategy | 'realistic' \| 'strict' \| 'uniform' | 否 | 'realistic' | 生成策略 |
|
|
||||||
|
|
||||||
**策略说明**:
|
|
||||||
|
|
||||||
| 策略 | 说明 | 适用场景 |
|
|
||||||
| --------- | ------------------ | -------- |
|
|
||||||
| realistic | 偏态分布，偏向高分 | 电商平台 |
|
|
||||||
| strict | 偏态分布，偏向低分 | 严格评审 |
|
|
||||||
| uniform | 均匀随机 | 测试数据 |
|
|
||||||
|
|
||||||
**示例**:
|
|
||||||
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"name": "rating",
|
|
||||||
"generator": "rating",
|
|
||||||
"params": {
|
|
||||||
"min": 1,
|
|
||||||
"max": 5,
|
|
||||||
"decimals": 1,
|
|
||||||
"strategy": "realistic"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
**生成结果**: 4.5, 4.8, 3.9, 5.0, 4.2
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 7. 折扣 (discount)
|
|
||||||
|
|
||||||
**说明**: 生成真实分布的折扣数据
|
|
||||||
|
|
||||||
**参数**:
|
|
||||||
|
|
||||||
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|
|
||||||
| -------- | ------------------------------------------- | ---- | --------------- | -------- |
|
|
||||||
| min | number | 否 | 0.1 | 最低折扣 |
|
|
||||||
| max | number | 否 | 0.9 | 最高折扣 |
|
|
||||||
| strategy | 'psychological' \| 'clearance' \| 'uniform' | 否 | 'psychological' | 生成策略 |
|
|
||||||
|
|
||||||
**策略说明**:
|
|
||||||
|
|
||||||
| 策略 | 说明 | 适用场景 |
|
|
||||||
| ------------- | ------------------------ | -------- |
|
|
||||||
| psychological | 常见折扣点（8折、9折等） | 电商促销 |
|
|
||||||
| clearance | 大折扣区间（3-7折） | 清仓处理 |
|
|
||||||
| uniform | 均匀随机 | 测试数据 |
|
|
||||||
|
|
||||||
**示例**:
|
|
||||||
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"name": "discount",
|
|
||||||
"generator": "discount",
|
|
||||||
"params": {
|
|
||||||
"min": 0.1,
|
|
||||||
"max": 0.9,
|
|
||||||
"strategy": "psychological"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
**生成结果**: 0.80, 0.90, 0.85, 0.95, 0.70
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 8. 库存 (stock)
|
|
||||||
|
|
||||||
**说明**: 生成真实分布的库存数据
|
|
||||||
|
|
||||||
**参数**:
|
|
||||||
|
|
||||||
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|
|
||||||
| -------- | --------------------------------- | ---- | ----------- | -------- |
|
|
||||||
| min | number | 否 | 0 | 最小库存 |
|
|
||||||
| max | number | 否 | 1000 | 最大库存 |
|
|
||||||
| strategy | 'realistic' \| 'hot' \| 'uniform' | 否 | 'realistic' | 生成策略 |
|
|
||||||
|
|
||||||
**策略说明**:
|
|
||||||
|
|
||||||
| 策略 | 说明 | 适用场景 |
|
|
||||||
| --------- | ------------------------ | -------- |
|
|
||||||
| realistic | 指数分布，大多数库存较少 | 通用商品 |
|
|
||||||
| hot | 低库存区间（0-50） | 热销商品 |
|
|
||||||
| uniform | 均匀随机 | 测试数据 |
|
|
||||||
|
|
||||||
**示例**:
|
|
||||||
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"name": "stock",
|
|
||||||
"generator": "stock",
|
|
||||||
"params": {
|
|
||||||
"min": 0,
|
|
||||||
"max": 500,
|
|
||||||
"strategy": "realistic"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
**生成结果**: 23, 8, 156, 45, 12
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 技术数据生成器
|
|
||||||
|
|
||||||
### 1. UUID (uuid)
|
|
||||||
|
|
||||||
**说明**: 生成 UUID
|
|
||||||
|
|
||||||
**参数**:
|
|
||||||
|
|
||||||
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|
|
||||||
| ------- | ------------ | ---- | ------ | --------- |
|
|
||||||
| version | 'v4' \| 'v1' | 否 | 'v4' | UUID 版本 |
|
|
||||||
|
|
||||||
**示例**:
|
|
||||||
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"name": "id",
|
|
||||||
"generator": "uuid",
|
|
||||||
"params": {
|
|
||||||
"version": "v4"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
**生成结果**: 550e8400-e29b-41d4-a716-446655440000
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 2. IPv4 地址 (ipv4)
|
|
||||||
|
|
||||||
**说明**: 生成 IPv4 地址
|
|
||||||
|
|
||||||
**参数**:
|
|
||||||
|
|
||||||
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|
|
||||||
| ------- | ------- | ---- | ------ | ------------ |
|
|
||||||
| private | boolean | 否 | false | 是否私有地址 |
|
|
||||||
|
|
||||||
**示例**:
|
|
||||||
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"name": "ip",
|
|
||||||
"generator": "ipv4",
|
|
||||||
"params": {
|
|
||||||
"private": true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
**生成结果**: 192.168.1.1, 10.0.0.1
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 3. URL (url)
|
|
||||||
|
|
||||||
**说明**: 生成 URL
|
|
||||||
|
|
||||||
**参数**:
|
|
||||||
|
|
||||||
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|
|
||||||
| -------- | ----------------- | ---- | ------------- | ---- |
|
|
||||||
| protocol | 'http' \| 'https' | 否 | 'https' | 协议 |
|
|
||||||
| domain | string | 否 | 'example.com' | 域名 |
|
|
||||||
|
|
||||||
**示例**:
|
|
||||||
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"name": "website",
|
|
||||||
"generator": "url",
|
|
||||||
"params": {
|
|
||||||
"protocol": "https",
|
|
||||||
"domain": "shop.com"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
**生成结果**: https://shop.com/product/123
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 基础类型生成器
|
|
||||||
|
|
||||||
### 1. 随机整数 (randomInt)
|
|
||||||
|
|
||||||
**说明**: 生成指定范围的随机整数
|
|
||||||
|
|
||||||
**参数**:
|
|
||||||
|
|
||||||
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|
|
||||||
| ------ | ------ | ---- | ------ | ------ |
|
|
||||||
| min | number | 是 | - | 最小值 |
|
|
||||||
| max | number | 是 | - | 最大值 |
|
|
||||||
|
|
||||||
**示例**:
|
|
||||||
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"name": "age",
|
|
||||||
"generator": "randomInt",
|
|
||||||
"params": {
|
|
||||||
"min": 18,
|
|
||||||
"max": 60
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
**生成结果**: 25, 42, 18, 60
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 2. 随机浮点数 (randomFloat)
|
|
||||||
|
|
||||||
**说明**: 生成指定范围的随机浮点数
|
|
||||||
|
|
||||||
**参数**:
|
|
||||||
|
|
||||||
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|
|
||||||
| -------- | ------ | ---- | ------ | -------- |
|
|
||||||
| min | number | 是 | - | 最小值 |
|
|
||||||
| max | number | 是 | - | 最大值 |
|
|
||||||
| decimals | number | 否 | 2 | 小数位数 |
|
|
||||||
|
|
||||||
**示例**:
|
|
||||||
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"name": "score",
|
|
||||||
"generator": "randomFloat",
|
|
||||||
"params": {
|
|
||||||
"min": 0,
|
|
||||||
"max": 100,
|
|
||||||
"decimals": 1
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
**生成结果**: 85.3, 42.7, 99.9
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 3. 随机字符串 (randomString)
|
|
||||||
|
|
||||||
**说明**: 生成指定长度的随机字符串
|
|
||||||
|
|
||||||
**参数**:
|
|
||||||
|
|
||||||
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|
|
||||||
| ------- | ------ | ---- | -------------- | ---------- |
|
|
||||||
| length | number | 是 | - | 字符串长度 |
|
|
||||||
| charset | string | 否 | 'alphanumeric' | 字符集 |
|
|
||||||
|
|
||||||
**示例**:
|
|
||||||
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"name": "code",
|
|
||||||
"generator": "randomString",
|
|
||||||
"params": {
|
|
||||||
"length": 8,
|
|
||||||
"charset": "alphanumeric"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
**生成结果**: aB3kL9mN, xY7zW2pQ
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 4. 从列表选择 (fromList)
|
|
||||||
|
|
||||||
**说明**: 从选项列表中随机选择
|
|
||||||
|
|
||||||
**参数**:
|
|
||||||
|
|
||||||
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|
|
||||||
| ------- | -------- | ---- | -------- | -------- |
|
|
||||||
| options | any[] | 是 | - | 选项列表 |
|
|
||||||
| weights | number[] | 否 | 均匀分布 | 权重 |
|
|
||||||
|
|
||||||
**示例**:
|
|
||||||
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"name": "category",
|
|
||||||
"generator": "fromList",
|
|
||||||
"params": {
|
|
||||||
"options": ["电子产品", "服装", "食品", "图书"],
|
|
||||||
"weights": [40, 30, 20, 10]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
**生成结果**: 电子产品, 服装, 食品
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 生成器选择界面
|
|
||||||
|
|
||||||
### 界面设计
|
|
||||||
|
|
||||||
```
|
|
||||||
┌─────────────────────────────────────────────────────────────────────┐
|
|
||||||
│ 选择生成器 │
|
|
||||||
├─────────────────────────────────────────────────────────────────────┤
|
|
||||||
│ │
|
|
||||||
│ 搜索: [搜索生成器... ] │
|
|
||||||
│ │
|
|
||||||
│ 分类筛选 │
|
|
||||||
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
|
|
||||||
│ │ 全部 │ │ 个人信息 │ │ 业务数据 │ │ 技术数据 │ │ 基础类型 │ │
|
|
||||||
│ └─────────┘ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │
|
|
||||||
│ │
|
|
||||||
│ 生成器列表 │
|
|
||||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
|
||||||
│ │ 个人信息 │ │
|
|
||||||
│ │ ┌─────────────────────────────────────────────────────────┐ │ │
|
|
||||||
│ │ │ 中文姓名 生成中文姓名，如张三 │ │ │
|
|
||||||
│ │ │ 邮箱地址 生成邮箱地址 │ │ │
|
|
||||||
│ │ │ 中国手机号 生成11位手机号 │ │ │
|
|
||||||
│ │ │ 身份证号 生成18位身份证号 │ │ │
|
|
||||||
│ │ │ 中文地址 生成中国地址 │ │ │
|
|
||||||
│ │ └─────────────────────────────────────────────────────────┘ │ │
|
|
||||||
│ │ │ │
|
|
||||||
│ └───────────────────────────────────────────────────────────────┘ │
|
|
||||||
│ │
|
|
||||||
└─────────────────────────────────────────────────────────────────────┘
|
|
||||||
```
|
|
||||||
@@ -1,481 +0,0 @@
|
|||||||
# 规则管理
|
|
||||||
|
|
||||||
## 功能概览
|
|
||||||
|
|
||||||
| 功能 | 说明 | 优先级 |
|
|
||||||
| -------- | -------------------- | ------ |
|
|
||||||
| 保存规则 | 将当前配置保存为模板 | P0 |
|
|
||||||
| 规则列表 | 查看所有已保存的规则 | P0 |
|
|
||||||
| 规则搜索 | 按关键词搜索规则 | P1 |
|
|
||||||
| 规则编辑 | 修改已保存的规则 | P0 |
|
|
||||||
| 规则删除 | 删除不需要的规则 | P0 |
|
|
||||||
| 规则加载 | 一键加载规则配置 | P0 |
|
|
||||||
| 规则复制 | 复制规则配置 | P1 |
|
|
||||||
| 规则导出 | 导出为 JSON 文件 | P1 |
|
|
||||||
| 规则导入 | 从 JSON 文件导入 | P1 |
|
|
||||||
|
|
||||||
## 规则数量限制
|
|
||||||
|
|
||||||
- **最大规则数量**: 20 条
|
|
||||||
- **超出限制**: 当规则数量达到 20 条时，保存按钮置灰，提示"已达到最大规则数量"
|
|
||||||
- **解决方式**: 用户需要删除已有规则后才能保存新规则
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 数据结构
|
|
||||||
|
|
||||||
### 规则模板
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
interface DataRule {
|
|
||||||
id: string; // 唯一标识
|
|
||||||
name: string; // 规则名称
|
|
||||||
description?: string; // 规则描述
|
|
||||||
fields: FieldConfig[]; // 字段配置
|
|
||||||
options: {
|
|
||||||
total: number; // 生成数量
|
|
||||||
format: 'json' | 'csv';
|
|
||||||
defaultEmptyRate: number; // 默认空值率（0-100）
|
|
||||||
};
|
|
||||||
metadata: {
|
|
||||||
createdAt: number; // 创建时间
|
|
||||||
updatedAt: number; // 更新时间
|
|
||||||
lastUsedAt?: number; // 最后使用时间
|
|
||||||
useCount: number; // 使用次数
|
|
||||||
};
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### 字段配置
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
interface FieldConfig {
|
|
||||||
id: string; // 字段唯一标识
|
|
||||||
name: string; // 字段名
|
|
||||||
generator: string; // 生成器名称
|
|
||||||
params: Record<string, any>; // 生成器参数
|
|
||||||
unique: boolean; // 唯一性约束
|
|
||||||
required: boolean; // 是否必填
|
|
||||||
emptyRate?: number; // 选填字段的空值概率（0-100）
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 功能详情
|
|
||||||
|
|
||||||
### 1. 保存规则
|
|
||||||
|
|
||||||
**触发方式**: 用户点击"保存规则"按钮
|
|
||||||
|
|
||||||
**界面设计**:
|
|
||||||
|
|
||||||
```
|
|
||||||
┌─────────────────────────────────────────────────────────────────────┐
|
|
||||||
│ 保存规则 │
|
|
||||||
├─────────────────────────────────────────────────────────────────────┤
|
|
||||||
│ │
|
|
||||||
│ 规则信息 │
|
|
||||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
|
||||||
│ │ 规则名称: │ │
|
|
||||||
│ │ ┌─────────────────────────────────────────────────────────┐ │ │
|
|
||||||
│ │ │ [电商用户数据 - 测试用 ]│ │ │
|
|
||||||
│ │ └─────────────────────────────────────────────────────────┘ │ │
|
|
||||||
│ │ │ │
|
|
||||||
│ │ 规则描述 (可选): │ │
|
|
||||||
│ │ ┌─────────────────────────────────────────────────────────┐ │ │
|
|
||||||
│ │ │ [用于测试用户注册功能，包含姓名、邮箱、手机号 ]│ │ │
|
|
||||||
│ │ └─────────────────────────────────────────────────────────┘ │ │
|
|
||||||
│ │ │ │
|
|
||||||
│ └───────────────────────────────────────────────────────────────┘ │
|
|
||||||
│ │
|
|
||||||
│ 规则预览 │
|
|
||||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
|
||||||
│ │ 字段数量: 4 个 │ │
|
|
||||||
│ │ • name (中文姓名) │ │
|
|
||||||
│ │ • email (邮箱地址) │ │
|
|
||||||
│ │ • phone (手机号) │ │
|
|
||||||
│ │ • age (年龄) │ │
|
|
||||||
│ │ │ │
|
|
||||||
│ │ 生成数量: 100 条 │ │
|
|
||||||
│ │ 数据格式: JSON │ │
|
|
||||||
│ └───────────────────────────────────────────────────────────────┘ │
|
|
||||||
│ │
|
|
||||||
│ [保存] [取消] │
|
|
||||||
│ │
|
|
||||||
└─────────────────────────────────────────────────────────────────────┘
|
|
||||||
```
|
|
||||||
|
|
||||||
**保存逻辑**:
|
|
||||||
|
|
||||||
1. 验证规则名称不为空
|
|
||||||
2. 检查规则数量是否达到上限（20 条）
|
|
||||||
3. 如果达到上限，显示提示"已达到最大规则数量"
|
|
||||||
4. 生成唯一 ID
|
|
||||||
5. 设置创建时间和更新时间
|
|
||||||
6. 初始化使用次数为 0
|
|
||||||
7. 保存到 localStorage
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 2. 规则列表
|
|
||||||
|
|
||||||
**界面设计**:
|
|
||||||
|
|
||||||
```
|
|
||||||
┌─────────────────────────────────────────────────────────────────────┐
|
|
||||||
│ 规则管理 │
|
|
||||||
├─────────────────────────────────────────────────────────────────────┤
|
|
||||||
│ │
|
|
||||||
│ 搜索: [搜索规则名称... ] │
|
|
||||||
│ │
|
|
||||||
│ 规则列表 (已保存 15/20 条) │
|
|
||||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
|
||||||
│ │ │ │
|
|
||||||
│ │ ┌─────────────────────────────────────────────────────────┐ │ │
|
|
||||||
│ │ │ 电商用户数据 - 测试用 │ │ │
|
|
||||||
│ │ │ ─────────────────────────────────────────────────────── │ │ │
|
|
||||||
│ │ │ 用于测试用户注册功能，包含姓名、邮箱、手机号 │ │ │
|
|
||||||
│ │ │ 4 个字段 | 100 条 | JSON │ │ │
|
|
||||||
│ │ │ 2024-01-15 14:30 创建 | 2024-01-20 10:15 最后使用 │ │ │
|
|
||||||
│ │ │ │ │ │
|
|
||||||
│ │ │ [加载] [复制] [导出] [编辑] [删除] │ │ │
|
|
||||||
│ │ └─────────────────────────────────────────────────────────┘ │ │
|
|
||||||
│ │ │ │
|
|
||||||
│ └───────────────────────────────────────────────────────────────┘ │
|
|
||||||
│ │
|
|
||||||
│ [导入规则] [导出全部] [清空全部] │
|
|
||||||
│ │
|
|
||||||
└─────────────────────────────────────────────────────────────────────┘
|
|
||||||
```
|
|
||||||
|
|
||||||
**列表项信息**:
|
|
||||||
|
|
||||||
- 规则名称
|
|
||||||
- 规则描述
|
|
||||||
- 字段数量、生成数量、数据格式
|
|
||||||
- 创建时间、最后使用时间
|
|
||||||
- 操作按钮
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 3. 规则搜索
|
|
||||||
|
|
||||||
**搜索逻辑**:
|
|
||||||
|
|
||||||
- 支持按规则名称搜索
|
|
||||||
- 支持按规则描述搜索
|
|
||||||
- 搜索为模糊匹配，不区分大小写
|
|
||||||
|
|
||||||
**实现方式**:
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
search(keyword: string): DataRule[] {
|
|
||||||
const rules = this.getAll();
|
|
||||||
const lowerKeyword = keyword.toLowerCase();
|
|
||||||
|
|
||||||
return rules.filter(r =>
|
|
||||||
r.name.toLowerCase().includes(lowerKeyword) ||
|
|
||||||
r.description?.toLowerCase().includes(lowerKeyword)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 4. 规则编辑
|
|
||||||
|
|
||||||
**界面设计**:
|
|
||||||
|
|
||||||
```
|
|
||||||
┌─────────────────────────────────────────────────────────────────────┐
|
|
||||||
│ 编辑规则 - 电商用户数据 │
|
|
||||||
├─────────────────────────────────────────────────────────────────────┤
|
|
||||||
│ │
|
|
||||||
│ 基本信息 │
|
|
||||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
|
||||||
│ │ 规则名称: [电商用户数据 - 测试用 ]│ │
|
|
||||||
│ │ 规则描述: [用于测试用户注册功能，包含姓名、邮箱、手机号 ]│ │
|
|
||||||
│ └───────────────────────────────────────────────────────────────┘ │
|
|
||||||
│ │
|
|
||||||
│ 字段配置 (可直接编辑) │
|
|
||||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
|
||||||
│ │ │ │
|
|
||||||
│ │ 1. name [中文姓名 ▼] [配置] [删除] [上移][下移] │ │
|
|
||||||
│ │ 2. email [邮箱地址 ▼] [配置] [删除] [上移][下移] │ │
|
|
||||||
│ │ 3. phone [手机号 ▼] [配置] [删除] [上移][下移] │ │
|
|
||||||
│ │ 4. age [年龄 ▼] [配置] [删除] [上移][下移] │ │
|
|
||||||
│ │ │ │
|
|
||||||
│ │ [+ 添加字段] │ │
|
|
||||||
│ │ │ │
|
|
||||||
│ └───────────────────────────────────────────────────────────────┘ │
|
|
||||||
│ │
|
|
||||||
│ 生成选项 │
|
|
||||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
|
||||||
│ │ 数量: [100] 格式: [JSON ▼] │ │
|
|
||||||
│ └───────────────────────────────────────────────────────────────┘ │
|
|
||||||
│ │
|
|
||||||
│ [保存修改] [取消] │
|
|
||||||
│ │
|
|
||||||
└─────────────────────────────────────────────────────────────────────┘
|
|
||||||
```
|
|
||||||
|
|
||||||
**编辑逻辑**:
|
|
||||||
|
|
||||||
1. 加载原规则配置到编辑器
|
|
||||||
2. 用户修改配置
|
|
||||||
3. 点击保存时更新规则
|
|
||||||
4. 更新 metadata.updatedAt
|
|
||||||
5. 保存到 localStorage
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 5. 规则删除
|
|
||||||
|
|
||||||
**删除流程**:
|
|
||||||
|
|
||||||
1. 点击删除按钮
|
|
||||||
2. 弹出确认对话框
|
|
||||||
3. 确认后删除规则
|
|
||||||
4. 刷新规则列表
|
|
||||||
|
|
||||||
**确认对话框**:
|
|
||||||
|
|
||||||
```
|
|
||||||
┌─────────────────────────────────────────┐
|
|
||||||
│ 确认删除 │
|
|
||||||
├─────────────────────────────────────────┤
|
|
||||||
│ │
|
|
||||||
│ 确定要删除规则 "电商用户数据" 吗？ │
|
|
||||||
│ │
|
|
||||||
│ 此操作不可撤销。 │
|
|
||||||
│ │
|
|
||||||
│ [取消] [删除] │
|
|
||||||
│ │
|
|
||||||
└─────────────────────────────────────────┘
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 6. 规则加载
|
|
||||||
|
|
||||||
**加载流程**:
|
|
||||||
|
|
||||||
1. 点击"加载"按钮
|
|
||||||
2. 将规则配置应用到当前编辑器
|
|
||||||
3. 更新预览数据
|
|
||||||
4. 记录使用时间和次数
|
|
||||||
|
|
||||||
**实现方式**:
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
loadRule(ruleId: string): void {
|
|
||||||
const rule = this.storage.getById(ruleId);
|
|
||||||
|
|
||||||
// 应用规则配置
|
|
||||||
this.setFields(rule.fields);
|
|
||||||
this.setOptions(rule.options);
|
|
||||||
|
|
||||||
// 记录使用
|
|
||||||
this.storage.recordUse(ruleId);
|
|
||||||
|
|
||||||
// 更新预览
|
|
||||||
this.updatePreview();
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 7. 规则复制
|
|
||||||
|
|
||||||
**复制逻辑**:
|
|
||||||
|
|
||||||
1. 点击"复制"按钮
|
|
||||||
2. 创建规则的副本
|
|
||||||
3. 名称添加"(副本)"后缀
|
|
||||||
4. 生成新的 ID
|
|
||||||
5. 保存为新规则
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 8. 规则导出
|
|
||||||
|
|
||||||
**导出界面**:
|
|
||||||
|
|
||||||
```
|
|
||||||
┌─────────────────────────────────────────────────────────────────────┐
|
|
||||||
│ 导出规则 │
|
|
||||||
├─────────────────────────────────────────────────────────────────────┤
|
|
||||||
│ │
|
|
||||||
│ 选择要导出的规则: │
|
|
||||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
|
||||||
│ │ ☑ 电商用户数据 - 测试用 (4个字段, 100条) │ │
|
|
||||||
│ │ ☑ 电商订单数据 - 测试用 (6个字段, 500条) │ │
|
|
||||||
│ │ ☐ 用户登录数据 - 测试用 (3个字段, 50条) │ │
|
|
||||||
│ │ │ │
|
|
||||||
│ │ [全选] [全不选] │ │
|
|
||||||
│ └───────────────────────────────────────────────────────────────┘ │
|
|
||||||
│ │
|
|
||||||
│ 导出格式: │
|
|
||||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
|
||||||
│ │ ○ 导出为单个 JSON 文件 (所有规则合并) │ │
|
|
||||||
│ │ ● 导出为多个 JSON 文件 (每个规则一个文件) │ │
|
|
||||||
│ └───────────────────────────────────────────────────────────────┘ │
|
|
||||||
│ │
|
|
||||||
│ [导出] [取消] │
|
|
||||||
│ │
|
|
||||||
└─────────────────────────────────────────────────────────────────────┘
|
|
||||||
```
|
|
||||||
|
|
||||||
**导出格式**:
|
|
||||||
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"version": "1.0",
|
|
||||||
"exportedAt": "2024-01-20T10:15:45.000Z",
|
|
||||||
"rules": [
|
|
||||||
{
|
|
||||||
"id": "rule_123456",
|
|
||||||
"name": "电商用户数据 - 测试用",
|
|
||||||
"description": "用于测试用户注册功能",
|
|
||||||
"fields": [...],
|
|
||||||
"options": {...},
|
|
||||||
"metadata": {...}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 9. 规则导入
|
|
||||||
|
|
||||||
**导入界面**:
|
|
||||||
|
|
||||||
```
|
|
||||||
┌─────────────────────────────────────────────────────────────────────┐
|
|
||||||
│ 导入规则 │
|
|
||||||
├─────────────────────────────────────────────────────────────────────┤
|
|
||||||
│ │
|
|
||||||
│ 选择导入方式: │
|
|
||||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
|
||||||
│ │ │ │
|
|
||||||
│ │ ○ 从文件导入 │ │
|
|
||||||
│ │ ┌─────────────────────────────────────────────────────┐ │ │
|
|
||||||
│ │ │ 拖拽文件到这里，或 [点击选择文件] │ │ │
|
|
||||||
│ │ │ 支持格式: .json │ │ │
|
|
||||||
│ │ └─────────────────────────────────────────────────────┘ │ │
|
|
||||||
│ │ │ │
|
|
||||||
│ │ ○ 从剪贴板粘贴 │ │
|
|
||||||
│ │ ┌─────────────────────────────────────────────────────┐ │ │
|
|
||||||
│ │ │ 粘贴 JSON 规则内容... │ │ │
|
|
||||||
│ │ └─────────────────────────────────────────────────────┘ │ │
|
|
||||||
│ │ │ │
|
|
||||||
│ └───────────────────────────────────────────────────────────────┘ │
|
|
||||||
│ │
|
|
||||||
│ 预览导入内容: │
|
|
||||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
|
||||||
│ │ 格式验证通过 │ │
|
|
||||||
│ │ 规则数量: 2 个 │ │
|
|
||||||
│ │ • 电商用户数据 (4个字段) │ │
|
|
||||||
│ │ • 电商订单数据 (6个字段) │ │
|
|
||||||
│ └───────────────────────────────────────────────────────────────┘ │
|
|
||||||
│ │
|
|
||||||
│ [导入] [取消] │
|
|
||||||
│ │
|
|
||||||
└─────────────────────────────────────────────────────────────────────┘
|
|
||||||
```
|
|
||||||
|
|
||||||
**导入逻辑**:
|
|
||||||
|
|
||||||
1. 解析 JSON 文件
|
|
||||||
2. 验证格式是否正确
|
|
||||||
3. 预览导入内容
|
|
||||||
4. 确认后逐条导入
|
|
||||||
5. 生成新 ID 避免冲突
|
|
||||||
6. 处理导入结果（成功/失败数量）
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 存储机制
|
|
||||||
|
|
||||||
### 本地存储
|
|
||||||
|
|
||||||
使用 localStorage 存储规则数据:
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
class RuleStorage {
|
|
||||||
private readonly STORAGE_KEY = 'testDataGenerator_rules';
|
|
||||||
|
|
||||||
// 获取所有规则
|
|
||||||
getAll(): DataRule[] {
|
|
||||||
const data = localStorage.getItem(this.STORAGE_KEY);
|
|
||||||
return data ? JSON.parse(data) : [];
|
|
||||||
}
|
|
||||||
|
|
||||||
// 保存规则
|
|
||||||
save(rule: DataRule): { success: boolean; message?: string } {
|
|
||||||
const rules = this.getAll();
|
|
||||||
|
|
||||||
// 规则数量限制：最多 20 条
|
|
||||||
const MAX_RULES = 20;
|
|
||||||
if (rules.length >= MAX_RULES) {
|
|
||||||
return {
|
|
||||||
success: false,
|
|
||||||
message: `已达到最大规则数量（${MAX_RULES}条），请删除一些规则后再保存`,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
rules.push(rule);
|
|
||||||
localStorage.setItem(this.STORAGE_KEY, JSON.stringify(rules));
|
|
||||||
return { success: true };
|
|
||||||
}
|
|
||||||
|
|
||||||
// 更新规则
|
|
||||||
update(id: string, updates: Partial<DataRule>): void {
|
|
||||||
const rules = this.getAll();
|
|
||||||
const index = rules.findIndex((r) => r.id === id);
|
|
||||||
if (index !== -1) {
|
|
||||||
rules[index] = { ...rules[index], ...updates };
|
|
||||||
localStorage.setItem(this.STORAGE_KEY, JSON.stringify(rules));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 删除规则
|
|
||||||
delete(id: string): void {
|
|
||||||
const rules = this.getAll();
|
|
||||||
const filtered = rules.filter((r) => r.id !== id);
|
|
||||||
localStorage.setItem(this.STORAGE_KEY, JSON.stringify(filtered));
|
|
||||||
}
|
|
||||||
|
|
||||||
// 记录使用
|
|
||||||
recordUse(id: string): void {
|
|
||||||
const rules = this.getAll();
|
|
||||||
const rule = rules.find((r) => r.id === id);
|
|
||||||
if (rule) {
|
|
||||||
rule.metadata.lastUsedAt = Date.now();
|
|
||||||
rule.metadata.useCount++;
|
|
||||||
localStorage.setItem(this.STORAGE_KEY, JSON.stringify(rules));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### 存储限制
|
|
||||||
|
|
||||||
- **规则数量限制**: 最多 20 条
|
|
||||||
- localStorage 容量: 5-10MB（浏览器限制）
|
|
||||||
- 单个规则约 1-5KB
|
|
||||||
- 预计可存储 1000-5000 个规则（但受数量限制，最多 20 条）
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 功能亮点
|
|
||||||
|
|
||||||
| 亮点 | 说明 |
|
|
||||||
| -------- | ------------------------------ |
|
|
||||||
| 本地存储 | 数据保存在浏览器本地，无需后端 |
|
|
||||||
| 快速复用 | 一键加载已保存的规则 |
|
|
||||||
| 导入导出 | 支持 JSON 文件导入导出 |
|
|
||||||
| 使用统计 | 记录使用次数和时间 |
|
|
||||||
| 搜索筛选 | 支持关键词搜索 |
|
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -1,489 +0,0 @@
|
|||||||
# 界面设计
|
|
||||||
|
|
||||||
## 设计原则
|
|
||||||
|
|
||||||
1. **简洁直观** - 一目了然的布局
|
|
||||||
2. **操作便捷** - 减少点击次数
|
|
||||||
3. **实时反馈** - 配置即预览
|
|
||||||
4. **响应式** - 支持多种屏幕尺寸
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 页面结构
|
|
||||||
|
|
||||||
### 主页面布局
|
|
||||||
|
|
||||||
```
|
|
||||||
┌─────────────────────────────────────────────────────────────────────┐
|
|
||||||
│ 🧪 测试数据生成器 [帮助] │
|
|
||||||
├─────────────────────────────────────────────────────────────────────┤
|
|
||||||
│ │
|
|
||||||
│ ┌─────────────────────────────────────┐ ┌───────────────────────┐ │
|
|
||||||
│ │ 字段配置 │ │ 数据预览 │ │
|
|
||||||
│ │ │ │ │ │
|
|
||||||
│ │ [+ 添加字段] │ │ [实时预览数据] │ │
|
|
||||||
│ │ │ │ │ │
|
|
||||||
│ │ 字段列表... │ │ │ │
|
|
||||||
│ │ │ │ │ │
|
|
||||||
│ └─────────────────────────────────────┘ └───────────────────────┘ │
|
|
||||||
│ │
|
|
||||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
|
||||||
│ │ 生成选项 │ │
|
|
||||||
│ │ 数量、格式、约束... │ │
|
|
||||||
│ └───────────────────────────────────────────────────────────────┘ │
|
|
||||||
│ │
|
|
||||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
|
||||||
│ │ 操作栏 │ │
|
|
||||||
│ │ [生成] [保存规则] [规则管理] │ │
|
|
||||||
│ └───────────────────────────────────────────────────────────────┘ │
|
|
||||||
│ │
|
|
||||||
└─────────────────────────────────────────────────────────────────────┘
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 组件设计
|
|
||||||
|
|
||||||
### 1. 字段列表组件
|
|
||||||
|
|
||||||
**功能**: 展示和管理所有字段
|
|
||||||
|
|
||||||
**界面**:
|
|
||||||
|
|
||||||
```
|
|
||||||
┌─────────────────────────────────────────────────────────────────────┐
|
|
||||||
│ 字段配置 │
|
|
||||||
├─────────────────────────────────────────────────────────────────────┤
|
|
||||||
│ │
|
|
||||||
│ [+ 添加字段] │
|
|
||||||
│ │
|
|
||||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
|
||||||
│ │ 1. name [中文姓名 ▼] [配置] [删除] [上移][下移] │ │
|
|
||||||
│ │ 2. email [邮箱地址 ▼] [配置] [删除] [上移][下移] │ │
|
|
||||||
│ │ 3. phone [手机号 ▼] [配置] [删除] [上移][下移] │ │
|
|
||||||
│ │ 4. age [年龄 ▼] [配置] [删除] [上移][下移] │ │
|
|
||||||
│ └───────────────────────────────────────────────────────────────┘ │
|
|
||||||
│ │
|
|
||||||
│ [+ 添加字段] │
|
|
||||||
│ │
|
|
||||||
└─────────────────────────────────────────────────────────────────────┘
|
|
||||||
```
|
|
||||||
|
|
||||||
**交互**:
|
|
||||||
|
|
||||||
- 点击字段名可编辑
|
|
||||||
- 点击生成器下拉框可切换生成器
|
|
||||||
- 点击 配置 展开参数配置
|
|
||||||
- 点击 删除 删除字段
|
|
||||||
- 点击 上移下移 调整顺序
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 2. 字段配置组件
|
|
||||||
|
|
||||||
**功能**: 配置单个字段的详细参数
|
|
||||||
|
|
||||||
**界面**:
|
|
||||||
|
|
||||||
```
|
|
||||||
┌─────────────────────────────────────────────────────────────────────┐
|
|
||||||
│ 字段配置 │
|
|
||||||
├─────────────────────────────────────────────────────────────────────┤
|
|
||||||
│ │
|
|
||||||
│ 基础配置 │
|
|
||||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
|
||||||
│ │ 字段名称: [name ] │ │
|
|
||||||
│ │ 字段描述: [用户姓名 ] │ │
|
|
||||||
│ └───────────────────────────────────────────────────────────────┘ │
|
|
||||||
│ │
|
|
||||||
│ 生成器选择 │
|
|
||||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
|
||||||
│ │ 分类: [个人信息 ▼] │ │
|
|
||||||
│ │ 生成器: [中文姓名 ▼] │ │
|
|
||||||
│ │ 说明: 生成中文姓名，如张三、李四 │ │
|
|
||||||
│ └───────────────────────────────────────────────────────────────┘ │
|
|
||||||
│ │
|
|
||||||
│ 参数配置 │
|
|
||||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
|
||||||
│ │ 姓氏池: [百家姓前100 ▼] │ │
|
|
||||||
│ │ 名字长度: [1] ~ [2] │ │
|
|
||||||
│ │ ☑ 唯一性约束 │ │
|
|
||||||
│ │ ☑ 必填 │ │
|
|
||||||
│ └───────────────────────────────────────────────────────────────┘ │
|
|
||||||
│ │
|
|
||||||
│ 空值率设置 (仅选填字段显示) │
|
|
||||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
|
||||||
│ │ 空值概率: [====|----] 50% │ │
|
|
||||||
│ │ 预设: [低 20%] [中 50%] [高 80%] │ │
|
|
||||||
│ └───────────────────────────────────────────────────────────────┘ │
|
|
||||||
│ │
|
|
||||||
│ 预览示例 │
|
|
||||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
|
||||||
│ │ 张伟, 李娜, 王强, 赵敏, 刘洋 │ │
|
|
||||||
│ └───────────────────────────────────────────────────────────────┘ │
|
|
||||||
│ │
|
|
||||||
│ [保存] [取消] │
|
|
||||||
│ │
|
|
||||||
└─────────────────────────────────────────────────────────────────────┘
|
|
||||||
```
|
|
||||||
|
|
||||||
**交互说明**:
|
|
||||||
|
|
||||||
- **必填复选框**: 勾选后该字段必填，100% 生成数据
|
|
||||||
- **空值率设置**: 仅当选填时显示，控制该字段生成空值的概率
|
|
||||||
- **预设按钮**: 快速设置常用空值率（低/中/高）
|
|
||||||
- **空值率滑块**: 精细调节空值概率（0-100%）
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 3. 数据预览组件
|
|
||||||
|
|
||||||
**功能**: 实时预览生成的数据
|
|
||||||
|
|
||||||
**界面**:
|
|
||||||
|
|
||||||
```
|
|
||||||
┌─────────────────────────────────────────────────────────────────────┐
|
|
||||||
│ 数据预览 │
|
|
||||||
├─────────────────────────────────────────────────────────────────────┤
|
|
||||||
│ │
|
|
||||||
│ 预览: 前 10 条 │
|
|
||||||
│ │
|
|
||||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
|
||||||
│ │ { │ │
|
|
||||||
│ │ "name": "张伟", │ │
|
|
||||||
│ │ "email": "zhangwei@qq.com", │ │
|
|
||||||
│ │ "phone": "13812345678", │ │
|
|
||||||
│ │ "age": 28 │ │
|
|
||||||
│ │ }, │ │
|
|
||||||
│ │ { │ │
|
|
||||||
│ │ "name": "李娜", │ │
|
|
||||||
│ │ "email": "lina@163.com", │ │
|
|
||||||
│ │ "phone": "13987654321", │ │
|
|
||||||
│ │ "age": 35 │ │
|
|
||||||
│ │ }, │ │
|
|
||||||
│ │ ... │ │
|
|
||||||
│ └───────────────────────────────────────────────────────────────┘ │
|
|
||||||
│ │
|
|
||||||
│ 格式切换: │
|
|
||||||
│ [JSON] [CSV] │
|
|
||||||
│ │
|
|
||||||
└─────────────────────────────────────────────────────────────────────┘
|
|
||||||
```
|
|
||||||
|
|
||||||
**功能**:
|
|
||||||
|
|
||||||
- 实时更新预览
|
|
||||||
- 支持格式切换
|
|
||||||
- 分页显示更多数据
|
|
||||||
- 一键复制
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 4. 生成选项组件
|
|
||||||
|
|
||||||
**功能**: 配置生成参数
|
|
||||||
|
|
||||||
**界面**:
|
|
||||||
|
|
||||||
```
|
|
||||||
┌─────────────────────────────────────────────────────────────────────┐
|
|
||||||
│ 生成选项 │
|
|
||||||
├─────────────────────────────────────────────────────────────────────┤
|
|
||||||
│ │
|
|
||||||
│ ┌─────────────────┐ ┌─────────────────┐ ┌───────────────────────┐ │
|
|
||||||
│ │ 生成数量 │ │ 数据格式 │ │ 约束条件 │ │
|
|
||||||
│ │ │ │ │ │ │ │
|
|
||||||
│ │ [100 ] │ │ ○ JSON │ │ ☑ name 唯一 │ │
|
|
||||||
│ │ [10 ▼] │ │ ○ CSV │ │ ☑ email 唯一 │ │
|
|
||||||
│ │ [100 ▼] │ │ │ │ ☑ phone 唯一 │ │
|
|
||||||
│ │ [自定义 ] │ │ │ │ ☐ age 唯一 │ │
|
|
||||||
│ │ │ │ │ │ │ │
|
|
||||||
│ └─────────────────┘ └─────────────────┘ └───────────────────────┘ │
|
|
||||||
│ │
|
|
||||||
│ 默认空值率 (选填字段) │
|
|
||||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
|
||||||
│ │ 空值概率: [====|----] 50% │ │
|
|
||||||
│ │ 预设: [低 20%] [中 50%] [高 80%] │ │
|
|
||||||
│ │ 说明: 未单独设置空值率的选填字段将使用此默认值 │ │
|
|
||||||
│ └───────────────────────────────────────────────────────────────┘ │
|
|
||||||
│ │
|
|
||||||
└─────────────────────────────────────────────────────────────────────┘
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 5. 操作栏组件
|
|
||||||
|
|
||||||
**功能**: 顶部操作按钮
|
|
||||||
|
|
||||||
**界面**:
|
|
||||||
|
|
||||||
```
|
|
||||||
┌─────────────────────────────────────────────────────────────────────┐
|
|
||||||
│ 操作栏 │
|
|
||||||
├─────────────────────────────────────────────────────────────────────┤
|
|
||||||
│ │
|
|
||||||
│ [生成数据] [保存规则] [规则管理] [导入规则] [导出]│
|
|
||||||
│ │
|
|
||||||
└─────────────────────────────────────────────────────────────────────┘
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 6. 生成结果组件
|
|
||||||
|
|
||||||
**功能**: 展示生成结果，包含成功、警告、错误三种状态
|
|
||||||
|
|
||||||
**成功状态界面**:
|
|
||||||
|
|
||||||
```
|
|
||||||
┌─────────────────────────────────────────────────────────────────────┐
|
|
||||||
│ 生成结果 │
|
|
||||||
├─────────────────────────────────────────────────────────────────────┤
|
|
||||||
│ │
|
|
||||||
│ 生成完成 │
|
|
||||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
|
||||||
│ │ [成功图标] 成功生成 100 条数据，耗时 1234ms │ │
|
|
||||||
│ └───────────────────────────────────────────────────────────────┘ │
|
|
||||||
│ │
|
|
||||||
│ 数据统计: │
|
|
||||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
|
||||||
│ │ • 总条数: 100 │ │
|
|
||||||
│ │ • 成功条数: 100 │ │
|
|
||||||
│ │ • 失败条数: 0 │ │
|
|
||||||
│ │ • 文件大小: 12.5 KB │ │
|
|
||||||
│ └───────────────────────────────────────────────────────────────┘ │
|
|
||||||
│ │
|
|
||||||
│ 数据预览: │
|
|
||||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
|
||||||
│ │ [JSON 格式预览...] │ │
|
|
||||||
│ └───────────────────────────────────────────────────────────────┘ │
|
|
||||||
│ │
|
|
||||||
│ 导出选项: │
|
|
||||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
|
||||||
│ │ [复制全部] [下载 JSON] [下载 CSV] │ │
|
|
||||||
│ └───────────────────────────────────────────────────────────────┘ │
|
|
||||||
│ │
|
|
||||||
│ [关闭] │
|
|
||||||
│ │
|
|
||||||
└─────────────────────────────────────────────────────────────────────┘
|
|
||||||
```
|
|
||||||
|
|
||||||
**警告状态界面（部分字段失败）**:
|
|
||||||
|
|
||||||
```
|
|
||||||
┌─────────────────────────────────────────────────────────────────────┐
|
|
||||||
│ 生成结果 │
|
|
||||||
├─────────────────────────────────────────────────────────────────────┤
|
|
||||||
│ │
|
|
||||||
│ 部分字段生成失败 │
|
|
||||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
|
||||||
│ │ [警告图标] 有 2 个字段生成失败 │ │
|
|
||||||
│ └───────────────────────────────────────────────────────────────┘ │
|
|
||||||
│ │
|
|
||||||
│ 失败详情: │
|
|
||||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
|
||||||
│ │ [警告图标] "phone" - 重试 100 次后仍存在重复 │ │
|
|
||||||
│ │ [警告图标] "email" - 重试 100 次后仍存在重复 │ │
|
|
||||||
│ │ │ │
|
|
||||||
│ │ 提示: 这些字段的值已设置为空，您可以尝试减少生成数量 │ │
|
|
||||||
│ │ 或调整字段配置 │ │
|
|
||||||
│ └───────────────────────────────────────────────────────────────┘ │
|
|
||||||
│ │
|
|
||||||
│ 数据统计: │
|
|
||||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
|
||||||
│ │ • 总条数: 100 │ │
|
|
||||||
│ │ • 成功条数: 98 │ │
|
|
||||||
│ │ • 失败条数: 2 │ │
|
|
||||||
│ │ • 文件大小: 12.3 KB │ │
|
|
||||||
│ └───────────────────────────────────────────────────────────────┘ │
|
|
||||||
│ │
|
|
||||||
│ 数据预览: │
|
|
||||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
|
||||||
│ │ [JSON 格式预览...] │ │
|
|
||||||
│ └───────────────────────────────────────────────────────────────┘ │
|
|
||||||
│ │
|
|
||||||
│ 导出选项: │
|
|
||||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
|
||||||
│ │ [复制全部] [下载 JSON] [下载 CSV] │ │
|
|
||||||
│ └───────────────────────────────────────────────────────────────┘ │
|
|
||||||
│ │
|
|
||||||
│ [关闭] │
|
|
||||||
│ │
|
|
||||||
└─────────────────────────────────────────────────────────────────────┘
|
|
||||||
```
|
|
||||||
|
|
||||||
**错误状态界面（生成失败）**:
|
|
||||||
|
|
||||||
```
|
|
||||||
┌─────────────────────────────────────────────────────────────────────┐
|
|
||||||
│ 生成失败 │
|
|
||||||
├─────────────────────────────────────────────────────────────────────┤
|
|
||||||
│ │
|
|
||||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
|
||||||
│ │ [错误图标] 生成过程中发生错误 │ │
|
|
||||||
│ └───────────────────────────────────────────────────────────────┘ │
|
|
||||||
│ │
|
|
||||||
│ 错误详情: │
|
|
||||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
|
||||||
│ │ │ │
|
|
||||||
│ │ 错误类型: 生成器不存在 │ │
|
|
||||||
│ │ 错误信息: 字段 "phone" 的生成器 "chinesePhone1" 不存在 │ │
|
|
||||||
│ │ 错误位置: 字段配置第 2 行 │ │
|
|
||||||
│ │ │ │
|
|
||||||
│ │ 建议操作: │ │
|
|
||||||
│ │ 1. 检查字段配置中的生成器名称是否正确 │ │
|
|
||||||
│ │ 2. 确认该生成器已正确注册 │ │
|
|
||||||
│ │ │ │
|
|
||||||
│ └───────────────────────────────────────────────────────────────┘ │
|
|
||||||
│ │
|
|
||||||
│ [重新配置] [关闭] │
|
|
||||||
│ │
|
|
||||||
└─────────────────────────────────────────────────────────────────────┘
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 6.1 Toast 提示组件
|
|
||||||
|
|
||||||
**功能**: 显示临时提示信息
|
|
||||||
|
|
||||||
**成功提示**:
|
|
||||||
|
|
||||||
```
|
|
||||||
┌─────────────────────────────────────┐
|
|
||||||
│ [成功图标] 数据生成成功 │
|
|
||||||
└─────────────────────────────────────┘
|
|
||||||
```
|
|
||||||
|
|
||||||
**警告提示**:
|
|
||||||
|
|
||||||
```
|
|
||||||
┌─────────────────────────────────────────────────────────────┐
|
|
||||||
│ [警告图标] 有 2 个字段生成失败：phone、email │
|
|
||||||
└─────────────────────────────────────────────────────────────┘
|
|
||||||
```
|
|
||||||
|
|
||||||
**错误提示**:
|
|
||||||
|
|
||||||
```
|
|
||||||
┌─────────────────────────────────────────────────────────────┐
|
|
||||||
│ [错误图标] 生成失败：生成器 "xxx" 不存在 │
|
|
||||||
└─────────────────────────────────────────────────────────────┘
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 6.2 Modal 提示组件
|
|
||||||
|
|
||||||
**功能**: 显示严重错误的模态框
|
|
||||||
|
|
||||||
**错误模态框**:
|
|
||||||
|
|
||||||
```
|
|
||||||
┌─────────────────────────────────────────────────────────────┐
|
|
||||||
│ │
|
|
||||||
│ ┌───────────────────────────────────────────────────────┐ │
|
|
||||||
│ │ │ │
|
|
||||||
│ │ [错误图标] 生成失败 │ │
|
|
||||||
│ │ │ │
|
|
||||||
│ │ 字段 "phone" 的生成器 "chinesePhone1" 不存在 │ │
|
|
||||||
│ │ │ │
|
|
||||||
│ │ 请检查字段配置中的生成器名称是否正确 │ │
|
|
||||||
│ │ │ │
|
|
||||||
│ │ ─────────────────────────────────────────────────── │ │
|
|
||||||
│ │ │ │
|
|
||||||
│ │ [ 确定 ] │ │
|
|
||||||
│ │ │ │
|
|
||||||
│ └───────────────────────────────────────────────────────┘ │
|
|
||||||
│ │
|
|
||||||
└─────────────────────────────────────────────────────────────┘
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 7. 规则管理组件
|
|
||||||
|
|
||||||
**功能**: 管理已保存的规则
|
|
||||||
|
|
||||||
**界面**:
|
|
||||||
|
|
||||||
```
|
|
||||||
┌─────────────────────────────────────────────────────────────────────┐
|
|
||||||
│ 规则管理 │
|
|
||||||
├─────────────────────────────────────────────────────────────────────┤
|
|
||||||
│ │
|
|
||||||
│ 搜索: [搜索规则名称... ] │
|
|
||||||
│ │
|
|
||||||
│ 规则列表: │
|
|
||||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
|
||||||
│ │ 电商用户数据 - 测试用 │ │
|
|
||||||
│ │ 用于测试用户注册功能 │ │
|
|
||||||
│ │ 4 个字段 | 100 条 | JSON │ │
|
|
||||||
│ │ 2024-01-15 创建 | 使用 12 次 │ │
|
|
||||||
│ │ [加载] [编辑] [导出] [删除] │ │
|
|
||||||
│ │ │ │
|
|
||||||
│ │ 电商订单数据 - 测试用 │ │
|
|
||||||
│ │ 用于测试订单功能 │ │
|
|
||||||
│ │ 6 个字段 | 500 条 | JSON │ │
|
|
||||||
│ │ 2024-01-16 创建 | 使用 8 次 │ │
|
|
||||||
│ │ [加载] [编辑] [导出] [删除] │ │
|
|
||||||
│ └───────────────────────────────────────────────────────────────┘ │
|
|
||||||
│ │
|
|
||||||
│ [导入规则] [导出全部] │
|
|
||||||
│ │
|
|
||||||
└─────────────────────────────────────────────────────────────────────┘
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 响应式设计
|
|
||||||
|
|
||||||
### 桌面端 (>1024px)
|
|
||||||
|
|
||||||
- 左右分栏布局
|
|
||||||
- 字段配置区占 60%
|
|
||||||
- 数据预览区占 40%
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 交互细节
|
|
||||||
|
|
||||||
### 拖拽排序
|
|
||||||
|
|
||||||
- 字段支持拖拽排序（基于 @dnd-kit/sortable）
|
|
||||||
- 拖拽手柄（GripVertical 图标）位于字段左侧
|
|
||||||
- 拖拽时显示半透明效果和阴影
|
|
||||||
- 释放后立即生效，自动更新字段顺序
|
|
||||||
|
|
||||||
### 实时预览
|
|
||||||
|
|
||||||
- 配置参数时实时更新预览
|
|
||||||
- 延迟 300ms 防抖，避免频繁重渲染
|
|
||||||
- 预览最多显示 10 条示例数据
|
|
||||||
- 生成完成后切换为完整结果预览
|
|
||||||
|
|
||||||
### 虚拟列表
|
|
||||||
|
|
||||||
- 数据量超过 100 条时自动启用虚拟滚动
|
|
||||||
- 仅渲染可见区域的行，大幅减少 DOM 节点
|
|
||||||
- 行高固定 20px，支持快速滚动
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 主题支持
|
|
||||||
|
|
||||||
### 浅色主题
|
|
||||||
|
|
||||||
- 背景色: #ffffff
|
|
||||||
- 文字色: #333333
|
|
||||||
- 边框色: #e0e0e0
|
|
||||||
- 主题色: #3b82f6
|
|
||||||
|
|
||||||
### 深色主题
|
|
||||||
|
|
||||||
- 背景色: #1a1a1a
|
|
||||||
- 文字色: #ffffff
|
|
||||||
- 边框色: #404040
|
|
||||||
- 主题色: #60a5fa
|
|
||||||
@@ -7,6 +7,7 @@
|
|||||||
"message": "清理",
|
"message": "清理",
|
||||||
"description": "Translation key: buttons_clear"
|
"description": "Translation key: buttons_clear"
|
||||||
},
|
},
|
||||||
|
|
||||||
"messages_copySuccess": {
|
"messages_copySuccess": {
|
||||||
"message": "已复制到剪贴板",
|
"message": "已复制到剪贴板",
|
||||||
"description": "Translation key: messages_copySuccess"
|
"description": "Translation key: messages_copySuccess"
|
||||||
@@ -895,6 +896,7 @@
|
|||||||
"message": "在标签页打开",
|
"message": "在标签页打开",
|
||||||
"description": "Translation key: buttons_openInTab"
|
"description": "Translation key: buttons_openInTab"
|
||||||
},
|
},
|
||||||
|
|
||||||
"common_errorBoundary_title": {
|
"common_errorBoundary_title": {
|
||||||
"message": "糟糕，出了点问题",
|
"message": "糟糕，出了点问题",
|
||||||
"description": "Translation key: errorBoundary_title"
|
"description": "Translation key: errorBoundary_title"
|
||||||
@@ -918,387 +920,5 @@
|
|||||||
"common_pageErrorBoundary_description": {
|
"common_pageErrorBoundary_description": {
|
||||||
"message": "该页面在加载或渲染时遇到了内部脚本错误。您可以尝试重试，或者通过导航菜单切换到其他工具。",
|
"message": "该页面在加载或渲染时遇到了内部脚本错误。您可以尝试重试，或者通过导航菜单切换到其他工具。",
|
||||||
"description": "Translation key: pageErrorBoundary_description"
|
"description": "Translation key: pageErrorBoundary_description"
|
||||||
},
|
|
||||||
"testDataGenerator_title": {
|
|
||||||
"message": "测试数据生成器",
|
|
||||||
"description": "Translation key: testDataGenerator_title"
|
|
||||||
},
|
|
||||||
"testDataGenerator_description": {
|
|
||||||
"message": "自定义字段配置，批量生成测试数据",
|
|
||||||
"description": "Translation key: testDataGenerator_description"
|
|
||||||
},
|
|
||||||
"testDataGenerator_fields": {
|
|
||||||
"message": "字段",
|
|
||||||
"description": "Translation key: testDataGenerator_fields"
|
|
||||||
},
|
|
||||||
"testDataGenerator_addField": {
|
|
||||||
"message": "添加字段",
|
|
||||||
"description": "Translation key: testDataGenerator_addField"
|
|
||||||
},
|
|
||||||
"testDataGenerator_noFields": {
|
|
||||||
"message": "暂无字段",
|
|
||||||
"description": "Translation key: testDataGenerator_noFields"
|
|
||||||
},
|
|
||||||
"testDataGenerator_addFieldHint": {
|
|
||||||
"message": "点击上方按钮添加第一个字段",
|
|
||||||
"description": "Translation key: testDataGenerator_addFieldHint"
|
|
||||||
},
|
|
||||||
"testDataGenerator_unique": {
|
|
||||||
"message": "唯一",
|
|
||||||
"description": "Translation key: testDataGenerator_unique"
|
|
||||||
},
|
|
||||||
"testDataGenerator_fieldName": {
|
|
||||||
"message": "字段名称",
|
|
||||||
"description": "Translation key: testDataGenerator_fieldName"
|
|
||||||
},
|
|
||||||
"testDataGenerator_fieldNamePlaceholder": {
|
|
||||||
"message": "请输入字段名称",
|
|
||||||
"description": "Translation key: testDataGenerator_fieldNamePlaceholder"
|
|
||||||
},
|
|
||||||
"testDataGenerator_fieldDescription": {
|
|
||||||
"message": "字段描述",
|
|
||||||
"description": "Translation key: testDataGenerator_fieldDescription"
|
|
||||||
},
|
|
||||||
"testDataGenerator_fieldDescriptionPlaceholder": {
|
|
||||||
"message": "可选，添加字段说明",
|
|
||||||
"description": "Translation key: testDataGenerator_fieldDescriptionPlaceholder"
|
|
||||||
},
|
|
||||||
"testDataGenerator_required": {
|
|
||||||
"message": "必填",
|
|
||||||
"description": "Translation key: testDataGenerator_required"
|
|
||||||
},
|
|
||||||
"testDataGenerator_nullRate": {
|
|
||||||
"message": "空值率",
|
|
||||||
"description": "Translation key: testDataGenerator_nullRate"
|
|
||||||
},
|
|
||||||
"testDataGenerator_uniqueConstraint": {
|
|
||||||
"message": "唯一性约束",
|
|
||||||
"description": "Translation key: testDataGenerator_uniqueConstraint"
|
|
||||||
},
|
|
||||||
"testDataGenerator_generator": {
|
|
||||||
"message": "数据生成器",
|
|
||||||
"description": "Translation key: testDataGenerator_generator"
|
|
||||||
},
|
|
||||||
"testDataGenerator_generatorParams": {
|
|
||||||
"message": "生成器参数",
|
|
||||||
"description": "Translation key: testDataGenerator_generatorParams"
|
|
||||||
},
|
|
||||||
"testDataGenerator_searchGenerator": {
|
|
||||||
"message": "搜索生成器...",
|
|
||||||
"description": "Translation key: testDataGenerator_searchGenerator"
|
|
||||||
},
|
|
||||||
"testDataGenerator_searchResults": {
|
|
||||||
"message": "搜索结果",
|
|
||||||
"description": "Translation key: testDataGenerator_searchResults"
|
|
||||||
},
|
|
||||||
"testDataGenerator_fieldConfig": {
|
|
||||||
"message": "字段配置",
|
|
||||||
"description": "Translation key: testDataGenerator_fieldConfig"
|
|
||||||
},
|
|
||||||
"testDataGenerator_ruleManagement": {
|
|
||||||
"message": "规则管理",
|
|
||||||
"description": "Translation key: testDataGenerator_ruleManagement"
|
|
||||||
},
|
|
||||||
"testDataGenerator_selectFieldToEdit": {
|
|
||||||
"message": "选择左侧字段进行编辑",
|
|
||||||
"description": "Translation key: testDataGenerator_selectFieldToEdit"
|
|
||||||
},
|
|
||||||
"testDataGenerator_count": {
|
|
||||||
"message": "生成数量",
|
|
||||||
"description": "Translation key: testDataGenerator_count"
|
|
||||||
},
|
|
||||||
"testDataGenerator_format": {
|
|
||||||
"message": "数据格式",
|
|
||||||
"description": "Translation key: testDataGenerator_format"
|
|
||||||
},
|
|
||||||
"testDataGenerator_generate": {
|
|
||||||
"message": "生成数据",
|
|
||||||
"description": "Translation key: testDataGenerator_generate"
|
|
||||||
},
|
|
||||||
"testDataGenerator_cancel": {
|
|
||||||
"message": "取消",
|
|
||||||
"description": "Translation key: testDataGenerator_cancel"
|
|
||||||
},
|
|
||||||
"testDataGenerator_progress": {
|
|
||||||
"message": "已生成 {{current}} / {{total}} 条",
|
|
||||||
"description": "Translation key: testDataGenerator_progress"
|
|
||||||
},
|
|
||||||
"testDataGenerator_estimatedTime": {
|
|
||||||
"message": "预计剩余 {{time}} 秒",
|
|
||||||
"description": "Translation key: testDataGenerator_estimatedTime"
|
|
||||||
},
|
|
||||||
"testDataGenerator_dataPreview": {
|
|
||||||
"message": "数据预览",
|
|
||||||
"description": "Translation key: testDataGenerator_dataPreview"
|
|
||||||
},
|
|
||||||
"testDataGenerator_noData": {
|
|
||||||
"message": "暂无数据",
|
|
||||||
"description": "Translation key: testDataGenerator_noData"
|
|
||||||
},
|
|
||||||
"testDataGenerator_noDataHint": {
|
|
||||||
"message": "配置字段后点击「生成数据」按钮",
|
|
||||||
"description": "Translation key: testDataGenerator_noDataHint"
|
|
||||||
},
|
|
||||||
"testDataGenerator_sampleData": {
|
|
||||||
"message": "示例数据",
|
|
||||||
"description": "Translation key: testDataGenerator_sampleData"
|
|
||||||
},
|
|
||||||
"testDataGenerator_copied": {
|
|
||||||
"message": "已复制",
|
|
||||||
"description": "Translation key: testDataGenerator_copied"
|
|
||||||
},
|
|
||||||
"testDataGenerator_copy": {
|
|
||||||
"message": "复制",
|
|
||||||
"description": "Translation key: testDataGenerator_copy"
|
|
||||||
},
|
|
||||||
"testDataGenerator_pageInfo": {
|
|
||||||
"message": "第 {{current}} / {{total}} 页",
|
|
||||||
"description": "Translation key: testDataGenerator_pageInfo"
|
|
||||||
},
|
|
||||||
"testDataGenerator_prevPage": {
|
|
||||||
"message": "上一页",
|
|
||||||
"description": "Translation key: testDataGenerator_prevPage"
|
|
||||||
},
|
|
||||||
"testDataGenerator_nextPage": {
|
|
||||||
"message": "下一页",
|
|
||||||
"description": "Translation key: testDataGenerator_nextPage"
|
|
||||||
},
|
|
||||||
"testDataGenerator_success": {
|
|
||||||
"message": "生成成功",
|
|
||||||
"description": "Translation key: testDataGenerator_success"
|
|
||||||
},
|
|
||||||
"testDataGenerator_generateSuccess": {
|
|
||||||
"message": "生成完成",
|
|
||||||
"description": "Translation key: testDataGenerator_generateSuccess"
|
|
||||||
},
|
|
||||||
"testDataGenerator_records": {
|
|
||||||
"message": "条数据",
|
|
||||||
"description": "Translation key: testDataGenerator_records"
|
|
||||||
},
|
|
||||||
"testDataGenerator_partialSuccess": {
|
|
||||||
"message": "部分成功",
|
|
||||||
"description": "Translation key: testDataGenerator_partialSuccess"
|
|
||||||
},
|
|
||||||
"testDataGenerator_failed": {
|
|
||||||
"message": "生成失败",
|
|
||||||
"description": "Translation key: testDataGenerator_failed"
|
|
||||||
},
|
|
||||||
"testDataGenerator_totalCount": {
|
|
||||||
"message": "总条数",
|
|
||||||
"description": "Translation key: testDataGenerator_totalCount"
|
|
||||||
},
|
|
||||||
"testDataGenerator_successCount": {
|
|
||||||
"message": "成功",
|
|
||||||
"description": "Translation key: testDataGenerator_successCount"
|
|
||||||
},
|
|
||||||
"testDataGenerator_duration": {
|
|
||||||
"message": "耗时",
|
|
||||||
"description": "Translation key: testDataGenerator_duration"
|
|
||||||
},
|
|
||||||
"testDataGenerator_warnings": {
|
|
||||||
"message": "警告",
|
|
||||||
"description": "Translation key: testDataGenerator_warnings"
|
|
||||||
},
|
|
||||||
"testDataGenerator_moreWarnings": {
|
|
||||||
"message": "还有 {{count}} 条警告",
|
|
||||||
"description": "Translation key: testDataGenerator_moreWarnings"
|
|
||||||
},
|
|
||||||
"testDataGenerator_export": {
|
|
||||||
"message": "导出数据",
|
|
||||||
"description": "Translation key: testDataGenerator_export"
|
|
||||||
},
|
|
||||||
"testDataGenerator_copyJSON": {
|
|
||||||
"message": "复制 JSON",
|
|
||||||
"description": "Translation key: testDataGenerator_copyJSON"
|
|
||||||
},
|
|
||||||
"testDataGenerator_copyCSV": {
|
|
||||||
"message": "复制 CSV",
|
|
||||||
"description": "Translation key: testDataGenerator_copyCSV"
|
|
||||||
},
|
|
||||||
"testDataGenerator_downloadJSON": {
|
|
||||||
"message": "下载 JSON",
|
|
||||||
"description": "Translation key: testDataGenerator_downloadJSON"
|
|
||||||
},
|
|
||||||
"testDataGenerator_downloadCSV": {
|
|
||||||
"message": "下载 CSV",
|
|
||||||
"description": "Translation key: testDataGenerator_downloadCSV"
|
|
||||||
},
|
|
||||||
"testDataGenerator_saveRule": {
|
|
||||||
"message": "保存规则",
|
|
||||||
"description": "Translation key: testDataGenerator_saveRule"
|
|
||||||
},
|
|
||||||
"testDataGenerator_import": {
|
|
||||||
"message": "导入",
|
|
||||||
"description": "Translation key: testDataGenerator_import"
|
|
||||||
},
|
|
||||||
"testDataGenerator_exportRules": {
|
|
||||||
"message": "导出规则",
|
|
||||||
"description": "Translation key: testDataGenerator_exportRules"
|
|
||||||
},
|
|
||||||
"testDataGenerator_ruleCount": {
|
|
||||||
"message": "已保存 {{count}}/{{max}} 条",
|
|
||||||
"description": "Translation key: testDataGenerator_ruleCount"
|
|
||||||
},
|
|
||||||
"testDataGenerator_searchRules": {
|
|
||||||
"message": "搜索规则...",
|
|
||||||
"description": "Translation key: testDataGenerator_searchRules"
|
|
||||||
},
|
|
||||||
"testDataGenerator_saveNewRule": {
|
|
||||||
"message": "保存新规则",
|
|
||||||
"description": "Translation key: testDataGenerator_saveNewRule"
|
|
||||||
},
|
|
||||||
"testDataGenerator_ruleNamePlaceholder": {
|
|
||||||
"message": "规则名称",
|
|
||||||
"description": "Translation key: testDataGenerator_ruleNamePlaceholder"
|
|
||||||
},
|
|
||||||
"testDataGenerator_ruleDescPlaceholder": {
|
|
||||||
"message": "规则描述（可选）",
|
|
||||||
"description": "Translation key: testDataGenerator_ruleDescPlaceholder"
|
|
||||||
},
|
|
||||||
"testDataGenerator_confirm": {
|
|
||||||
"message": "确认",
|
|
||||||
"description": "Translation key: testDataGenerator_confirm"
|
|
||||||
},
|
|
||||||
"testDataGenerator_done": {
|
|
||||||
"message": "完成",
|
|
||||||
"description": "Translation key: testDataGenerator_done"
|
|
||||||
},
|
|
||||||
"testDataGenerator_noSearchResults": {
|
|
||||||
"message": "未找到匹配的规则",
|
|
||||||
"description": "Translation key: testDataGenerator_noSearchResults"
|
|
||||||
},
|
|
||||||
"testDataGenerator_noRules": {
|
|
||||||
"message": "暂无保存的规则",
|
|
||||||
"description": "Translation key: testDataGenerator_noRules"
|
|
||||||
},
|
|
||||||
"testDataGenerator_usedTimes": {
|
|
||||||
"message": "使用 {{count}} 次",
|
|
||||||
"description": "Translation key: testDataGenerator_usedTimes"
|
|
||||||
},
|
|
||||||
"testDataGenerator_load": {
|
|
||||||
"message": "加载",
|
|
||||||
"description": "Translation key: testDataGenerator_load"
|
|
||||||
},
|
|
||||||
"testDataGenerator_duplicate": {
|
|
||||||
"message": "复制",
|
|
||||||
"description": "Translation key: testDataGenerator_duplicate"
|
|
||||||
},
|
|
||||||
"testDataGenerator_delete": {
|
|
||||||
"message": "删除",
|
|
||||||
"description": "Translation key: testDataGenerator_delete"
|
|
||||||
},
|
|
||||||
"testDataGenerator_virtualMode": {
|
|
||||||
"message": "虚拟列表模式（共 $ 行）"
|
|
||||||
},
|
|
||||||
"testDataGenerator_totalRows": {
|
|
||||||
"message": "共 $ 条数据"
|
|
||||||
},
|
|
||||||
"testDataGenerator_ruleSaved": {
|
|
||||||
"message": "规则已保存",
|
|
||||||
"description": "Translation key: testDataGenerator_ruleSaved"
|
|
||||||
},
|
|
||||||
"testDataGenerator_ruleLoaded": {
|
|
||||||
"message": "已加载规则「{{name}}」",
|
|
||||||
"description": "Translation key: testDataGenerator_ruleLoaded"
|
|
||||||
},
|
|
||||||
"testDataGenerator_ruleDeleted": {
|
|
||||||
"message": "规则已删除",
|
|
||||||
"description": "Translation key: testDataGenerator_ruleDeleted"
|
|
||||||
},
|
|
||||||
"testDataGenerator_ruleDuplicated": {
|
|
||||||
"message": "规则已复制",
|
|
||||||
"description": "Translation key: testDataGenerator_ruleDuplicated"
|
|
||||||
},
|
|
||||||
"testDataGenerator_exportSuccess": {
|
|
||||||
"message": "规则已导出",
|
|
||||||
"description": "Translation key: testDataGenerator_exportSuccess"
|
|
||||||
},
|
|
||||||
"testDataGenerator_importSuccess": {
|
|
||||||
"message": "成功导入 {{count}} 条规则",
|
|
||||||
"description": "Translation key: testDataGenerator_importSuccess"
|
|
||||||
},
|
|
||||||
"testDataGenerator_importFailed": {
|
|
||||||
"message": "{{count}} 条规则导入失败",
|
|
||||||
"description": "Translation key: testDataGenerator_importFailed"
|
|
||||||
},
|
|
||||||
"testDataGenerator_confirmDeleteTitle": {
|
|
||||||
"message": "确认删除规则",
|
|
||||||
"description": "Translation key: testDataGenerator_confirmDeleteTitle"
|
|
||||||
},
|
|
||||||
"testDataGenerator_confirmDeleteDescription": {
|
|
||||||
"message": "确定要删除规则「{{name}}」吗？此操作不可撤销。",
|
|
||||||
"description": "Translation key: testDataGenerator_confirmDeleteDescription"
|
|
||||||
},
|
|
||||||
"testDataGenerator_ruleNameDuplicate": {
|
|
||||||
"message": "已存在同名规则，是否覆盖保存？",
|
|
||||||
"description": "Translation key: testDataGenerator_ruleNameDuplicate"
|
|
||||||
},
|
|
||||||
"testDataGenerator_overwrite": {
|
|
||||||
"message": "覆盖",
|
|
||||||
"description": "Translation key: testDataGenerator_overwrite"
|
|
||||||
},
|
|
||||||
"testDataGenerator_edit": {
|
|
||||||
"message": "编辑",
|
|
||||||
"description": "Translation key: testDataGenerator_edit"
|
|
||||||
},
|
|
||||||
"testDataGenerator_ruleUpdated": {
|
|
||||||
"message": "规则已更新",
|
|
||||||
"description": "Translation key: testDataGenerator_ruleUpdated"
|
|
||||||
},
|
|
||||||
"testDataGenerator_editing": {
|
|
||||||
"message": "编辑中",
|
|
||||||
"description": "Translation key: testDataGenerator_editing"
|
|
||||||
},
|
|
||||||
"testDataGenerator_editingRule": {
|
|
||||||
"message": "正在编辑规则「{{name}}」",
|
|
||||||
"description": "Translation key: testDataGenerator_editingRule"
|
|
||||||
},
|
|
||||||
"testDataGenerator_updateRule": {
|
|
||||||
"message": "更新规则",
|
|
||||||
"description": "Translation key: testDataGenerator_updateRule"
|
|
||||||
},
|
|
||||||
"testDataGenerator_saveAs": {
|
|
||||||
"message": "另存为",
|
|
||||||
"description": "Translation key: testDataGenerator_saveAs"
|
|
||||||
},
|
|
||||||
"testDataGenerator_noGeneratorParams": {
|
|
||||||
"message": "此生成器无可配置参数",
|
|
||||||
"description": "Translation key: testDataGenerator_noGeneratorParams"
|
|
||||||
},
|
|
||||||
"testDataGenerator_enabled": {
|
|
||||||
"message": "启用",
|
|
||||||
"description": "Translation key: testDataGenerator_enabled"
|
|
||||||
},
|
|
||||||
"testDataGenerator_disabled": {
|
|
||||||
"message": "禁用",
|
|
||||||
"description": "Translation key: testDataGenerator_disabled"
|
|
||||||
},
|
|
||||||
"testDataGenerator_commaSeparated": {
|
|
||||||
"message": "用逗号分隔多个值",
|
|
||||||
"description": "Translation key: testDataGenerator_commaSeparated"
|
|
||||||
},
|
|
||||||
"testDataGenerator_copySuccess": {
|
|
||||||
"message": "已复制到剪贴板",
|
|
||||||
"description": "Translation key: testDataGenerator_copySuccess"
|
|
||||||
},
|
|
||||||
"testDataGenerator_copyFailed": {
|
|
||||||
"message": "复制失败",
|
|
||||||
"description": "Translation key: testDataGenerator_copyFailed"
|
|
||||||
},
|
|
||||||
"testDataGenerator_fieldNameEmpty": {
|
|
||||||
"message": "字段名称不能为空",
|
|
||||||
"description": "Translation key: testDataGenerator_fieldNameEmpty"
|
|
||||||
},
|
|
||||||
"testDataGenerator_fieldNameDuplicate": {
|
|
||||||
"message": "字段名称已存在",
|
|
||||||
"description": "Translation key: testDataGenerator_fieldNameDuplicate"
|
|
||||||
},
|
|
||||||
"testDataGenerator_fieldNameInvalid": {
|
|
||||||
"message": "字段名称只能包含字母、数字和下划线",
|
|
||||||
"description": "Translation key: testDataGenerator_fieldNameInvalid"
|
|
||||||
},
|
|
||||||
"testDataGenerator_ruleCopySuffix": {
|
|
||||||
"message": "（副本）",
|
|
||||||
"description": "Translation key: testDataGenerator_ruleCopySuffix"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,194 @@
|
|||||||
|
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||||
|
import { act, render, screen, waitFor } from '@testing-library/react';
|
||||||
|
import userEvent from '@testing-library/user-event';
|
||||||
|
|
||||||
|
// unmock the globally-mocked component so we test the real implementation
|
||||||
|
vi.unmock('@/components/CopyButton');
|
||||||
|
|
||||||
|
vi.mock('@/utils/clipboard', () => ({
|
||||||
|
copyTextToClipboard: vi.fn(),
|
||||||
|
}));
|
||||||
|
|
||||||
|
vi.mock('sonner', () => ({
|
||||||
|
toast: {
|
||||||
|
success: vi.fn(),
|
||||||
|
error: vi.fn(),
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
|
import { CopyButton } from '@/components/CopyButton';
|
||||||
|
import { copyTextToClipboard } from '@/utils/clipboard';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
|
||||||
|
const mockedCopy = vi.mocked(copyTextToClipboard);
|
||||||
|
const mockedToast = vi.mocked(toast);
|
||||||
|
|
||||||
|
describe('CopyButton', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
vi.useFakeTimers({ shouldAdvanceTime: true });
|
||||||
|
vi.clearAllMocks();
|
||||||
|
});
|
||||||
|
|
||||||
|
afterEach(() => {
|
||||||
|
vi.useRealTimers();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('复制成功时调用 copyTextToClipboard 并传入正确 text', async () => {
|
||||||
|
mockedCopy.mockResolvedValue(true);
|
||||||
|
const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
|
||||||
|
|
||||||
|
render(<CopyButton text="hello world" />);
|
||||||
|
|
||||||
|
await user.click(screen.getByRole('button'));
|
||||||
|
|
||||||
|
expect(mockedCopy).toHaveBeenCalledWith('hello world');
|
||||||
|
expect(mockedToast.success).toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('复制成功后图标切换为 Check，1.5 秒后恢复', async () => {
|
||||||
|
mockedCopy.mockResolvedValue(true);
|
||||||
|
const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
|
||||||
|
|
||||||
|
render(<CopyButton text="test" />);
|
||||||
|
|
||||||
|
// 点击后复制成功，按钮获得 emerald 样式（说明切到了 Check 状态）
|
||||||
|
await user.click(screen.getByRole('button'));
|
||||||
|
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(screen.getByRole('button').className).toContain('text-emerald');
|
||||||
|
});
|
||||||
|
|
||||||
|
// 1.5 秒后样式恢复
|
||||||
|
act(() => {
|
||||||
|
vi.advanceTimersByTime(1500);
|
||||||
|
});
|
||||||
|
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(screen.getByRole('button').className).not.toContain('text-emerald');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('复制空文本时弹出 error toast', async () => {
|
||||||
|
const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
|
||||||
|
|
||||||
|
render(<CopyButton text="" />);
|
||||||
|
|
||||||
|
await user.click(screen.getByRole('button'));
|
||||||
|
|
||||||
|
expect(mockedCopy).not.toHaveBeenCalled();
|
||||||
|
expect(mockedToast.error).toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('复制失败时弹出 error toast', async () => {
|
||||||
|
mockedCopy.mockResolvedValue(false);
|
||||||
|
const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
|
||||||
|
|
||||||
|
render(<CopyButton text="something" />);
|
||||||
|
|
||||||
|
await user.click(screen.getByRole('button'));
|
||||||
|
|
||||||
|
expect(mockedCopy).toHaveBeenCalledWith('something');
|
||||||
|
expect(mockedToast.error).toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
|
||||||
|
// ==================== 新增测试 ====================
|
||||||
|
|
||||||
|
it('初始渲染时显示 Copy 图标且无 emerald 样式', () => {
|
||||||
|
render(<CopyButton text="initial" />);
|
||||||
|
|
||||||
|
const button = screen.getByRole('button');
|
||||||
|
expect(button.className).not.toContain('text-emerald');
|
||||||
|
// 通过 aria-label 确认按钮存在，图标由 lucide 渲染为 svg
|
||||||
|
expect(button).toHaveAttribute('aria-label');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('自定义 tooltip 会覆盖默认 title 和 aria-label', () => {
|
||||||
|
render(<CopyButton text="tooltip-test" tooltip="自定义提示" />);
|
||||||
|
|
||||||
|
const button = screen.getByRole('button');
|
||||||
|
expect(button).toHaveAttribute('title', '自定义提示');
|
||||||
|
expect(button).toHaveAttribute('aria-label', '自定义提示');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('className 被正确透传到按钮', () => {
|
||||||
|
render(<CopyButton text="class-test" className="my-custom-class" />);
|
||||||
|
|
||||||
|
const button = screen.getByRole('button');
|
||||||
|
expect(button.className).toContain('my-custom-class');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('点击事件阻止冒泡', async () => {
|
||||||
|
mockedCopy.mockResolvedValue(true);
|
||||||
|
const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
|
||||||
|
const parentClick = vi.fn();
|
||||||
|
|
||||||
|
render(
|
||||||
|
<div onClick={parentClick}>
|
||||||
|
<CopyButton text="stop-propagation" />
|
||||||
|
</div>,
|
||||||
|
);
|
||||||
|
|
||||||
|
await user.click(screen.getByRole('button'));
|
||||||
|
|
||||||
|
expect(mockedCopy).toHaveBeenCalled();
|
||||||
|
expect(parentClick).not.toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('组件卸载时清除定时器，不触发状态更新警告', async () => {
|
||||||
|
mockedCopy.mockResolvedValue(true);
|
||||||
|
const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
|
||||||
|
|
||||||
|
const { unmount } = render(<CopyButton text="unmount-test" />);
|
||||||
|
|
||||||
|
await user.click(screen.getByRole('button'));
|
||||||
|
|
||||||
|
// 在 1.5 秒超时到期前卸载组件
|
||||||
|
act(() => {
|
||||||
|
vi.advanceTimersByTime(500);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 卸载不应抛出 "Can't perform a React state update on an unmounted component" 警告
|
||||||
|
expect(() => unmount()).not.toThrow();
|
||||||
|
|
||||||
|
// 前进剩余时间，确认没有异常
|
||||||
|
act(() => {
|
||||||
|
vi.advanceTimersByTime(2000);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('快速连续点击不会创建多个重叠定时器', async () => {
|
||||||
|
mockedCopy.mockResolvedValue(true);
|
||||||
|
const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
|
||||||
|
|
||||||
|
render(<CopyButton text="rapid-click" />);
|
||||||
|
|
||||||
|
const button = screen.getByRole('button');
|
||||||
|
|
||||||
|
// 快速点击 3 次
|
||||||
|
await user.click(button);
|
||||||
|
await user.click(button);
|
||||||
|
await user.click(button);
|
||||||
|
|
||||||
|
// copyTextToClipboard 应该被调用 3 次（每次点击都执行）
|
||||||
|
expect(mockedCopy).toHaveBeenCalledTimes(3);
|
||||||
|
|
||||||
|
// 但 setTimeout 相关的 clearTimeout + setTimeout 组合应正常工作
|
||||||
|
// advance 1.5 秒后，copied 状态应恢复为 false
|
||||||
|
act(() => {
|
||||||
|
vi.advanceTimersByTime(1500);
|
||||||
|
});
|
||||||
|
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(button.className).not.toContain('text-emerald');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('其他 button props 通过 ...props 透传', () => {
|
||||||
|
render(<CopyButton text="props-test" data-testid="copy-btn" disabled id="copy-button-id" />);
|
||||||
|
|
||||||
|
const button = screen.getByRole('button');
|
||||||
|
expect(button).toHaveAttribute('data-testid', 'copy-btn');
|
||||||
|
expect(button).toBeDisabled();
|
||||||
|
expect(button).toHaveAttribute('id', 'copy-button-id');
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -26,16 +26,10 @@ const DialogOverlay = React.forwardRef<
|
|||||||
));
|
));
|
||||||
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
|
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
|
||||||
|
|
||||||
interface DialogContentProps extends React.ComponentPropsWithoutRef<
|
|
||||||
typeof DialogPrimitive.Content
|
|
||||||
> {
|
|
||||||
showCloseButton?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
const DialogContent = React.forwardRef<
|
const DialogContent = React.forwardRef<
|
||||||
React.ElementRef<typeof DialogPrimitive.Content>,
|
React.ElementRef<typeof DialogPrimitive.Content>,
|
||||||
DialogContentProps
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
|
||||||
>(({ className, children, showCloseButton = true, ...props }, ref) => (
|
>(({ className, children, ...props }, ref) => (
|
||||||
<DialogPortal>
|
<DialogPortal>
|
||||||
<DialogOverlay />
|
<DialogOverlay />
|
||||||
<DialogPrimitive.Content
|
<DialogPrimitive.Content
|
||||||
@@ -47,12 +41,10 @@ const DialogContent = React.forwardRef<
|
|||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
{showCloseButton && (
|
|
||||||
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
|
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
|
||||||
<X className="h-4 w-4" />
|
<X className="h-4 w-4" />
|
||||||
<span className="sr-only">Close</span>
|
<span className="sr-only">Close</span>
|
||||||
</DialogPrimitive.Close>
|
</DialogPrimitive.Close>
|
||||||
)}
|
|
||||||
</DialogPrimitive.Content>
|
</DialogPrimitive.Content>
|
||||||
</DialogPortal>
|
</DialogPortal>
|
||||||
));
|
));
|
||||||
|
|||||||
@@ -9,8 +9,8 @@ import {
|
|||||||
|
|
||||||
describe('features', () => {
|
describe('features', () => {
|
||||||
describe('FEATURES', () => {
|
describe('FEATURES', () => {
|
||||||
it('should have 10 features defined', () => {
|
it('should have 9 features defined', () => {
|
||||||
expect(FEATURES).toHaveLength(10);
|
expect(FEATURES).toHaveLength(9);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should have all required properties for each feature', () => {
|
it('should have all required properties for each feature', () => {
|
||||||
@@ -95,7 +95,7 @@ describe('features', () => {
|
|||||||
describe('getAllFeatureKeys', () => {
|
describe('getAllFeatureKeys', () => {
|
||||||
it('should return all feature keys', () => {
|
it('should return all feature keys', () => {
|
||||||
const allKeys = getAllFeatureKeys();
|
const allKeys = getAllFeatureKeys();
|
||||||
expect(allKeys).toHaveLength(10);
|
expect(allKeys).toHaveLength(9);
|
||||||
expect(allKeys).toContain('dashboard');
|
expect(allKeys).toContain('dashboard');
|
||||||
expect(allKeys).toContain('timestamp');
|
expect(allKeys).toContain('timestamp');
|
||||||
expect(allKeys).toContain('storageCleaner');
|
expect(allKeys).toContain('storageCleaner');
|
||||||
@@ -105,7 +105,6 @@ describe('features', () => {
|
|||||||
expect(allKeys).toContain('jsonDiff');
|
expect(allKeys).toContain('jsonDiff');
|
||||||
expect(allKeys).toContain('base64Converter');
|
expect(allKeys).toContain('base64Converter');
|
||||||
expect(allKeys).toContain('rightClickRestorer');
|
expect(allKeys).toContain('rightClickRestorer');
|
||||||
expect(allKeys).toContain('testDataGenerator');
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -122,9 +121,9 @@ describe('features', () => {
|
|||||||
expect(pageOrder).toContain('qrCode');
|
expect(pageOrder).toContain('qrCode');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should have 9 items in page order', () => {
|
it('should have 8 items in page order', () => {
|
||||||
const pageOrder = getDefaultPageOrder();
|
const pageOrder = getDefaultPageOrder();
|
||||||
expect(pageOrder).toHaveLength(9);
|
expect(pageOrder).toHaveLength(8);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -10,7 +10,6 @@ import {
|
|||||||
GitCompareArrows,
|
GitCompareArrows,
|
||||||
ArrowLeftRight,
|
ArrowLeftRight,
|
||||||
MousePointerClick,
|
MousePointerClick,
|
||||||
FileSpreadsheet,
|
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
|
|
||||||
export type PaletteColorKey = 'primary' | 'success' | 'warning' | 'error' | 'secondary' | 'info';
|
export type PaletteColorKey = 'primary' | 'success' | 'warning' | 'error' | 'secondary' | 'info';
|
||||||
@@ -25,7 +24,6 @@ const JwtPage = lazy(() => import('@/pages/Jwt'));
|
|||||||
const JsonToolsPage = lazy(() => import('@/pages/JsonTools'));
|
const JsonToolsPage = lazy(() => import('@/pages/JsonTools'));
|
||||||
const Base64ConverterPage = lazy(() => import('@/pages/Base64Converter'));
|
const Base64ConverterPage = lazy(() => import('@/pages/Base64Converter'));
|
||||||
const RightClickRestorerPage = lazy(() => import('@/pages/RightClickRestorer'));
|
const RightClickRestorerPage = lazy(() => import('@/pages/RightClickRestorer'));
|
||||||
const TestDataGeneratorPage = lazy(() => import('@/pages/TestDataGenerator'));
|
|
||||||
|
|
||||||
export interface FeatureConfig {
|
export interface FeatureConfig {
|
||||||
key: PageType;
|
key: PageType;
|
||||||
@@ -157,19 +155,6 @@ export const FEATURES: FeatureConfig[] = [
|
|||||||
tab: RightClickRestorerPage,
|
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 {
|
export function getFeatureByKey(key: PageType): FeatureConfig | undefined {
|
||||||
|
|||||||
@@ -1,227 +0,0 @@
|
|||||||
/**
|
|
||||||
* 基础类型生成器
|
|
||||||
* 包含：随机整数、随机浮点数、随机字符串、从列表选择
|
|
||||||
*/
|
|
||||||
|
|
||||||
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,
|
|
||||||
];
|
|
||||||
@@ -1,561 +0,0 @@
|
|||||||
/**
|
|
||||||
* 业务数据生成器
|
|
||||||
* 包含：订单号、价格、日期、状态、数量、评分、折扣、库存
|
|
||||||
*/
|
|
||||||
|
|
||||||
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,
|
|
||||||
];
|
|
||||||
@@ -1,57 +0,0 @@
|
|||||||
/**
|
|
||||||
* 生成器库索引
|
|
||||||
* 导出所有生成器和分类配置
|
|
||||||
*/
|
|
||||||
|
|
||||||
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),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,465 +0,0 @@
|
|||||||
/**
|
|
||||||
* 个人信息生成器
|
|
||||||
* 包含：中文姓名、邮箱、手机号、身份证号、中文地址、年龄
|
|
||||||
*/
|
|
||||||
|
|
||||||
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,
|
|
||||||
];
|
|
||||||
@@ -1,268 +0,0 @@
|
|||||||
/**
|
|
||||||
* 技术数据生成器
|
|
||||||
* 包含：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];
|
|
||||||
@@ -1,48 +0,0 @@
|
|||||||
/**
|
|
||||||
* 生成器内部类型定义
|
|
||||||
* 与 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;
|
|
||||||
}
|
|
||||||
@@ -1,114 +0,0 @@
|
|||||||
/**
|
|
||||||
* 数据预览组件
|
|
||||||
* 展示一条示例数据，展示数据结构
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { useMemo } from 'react';
|
|
||||||
import { FileJson, FileText } from 'lucide-react';
|
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
import { getGeneratorById } from '@/lib/generators';
|
|
||||||
import type { FieldConfig } from '@/types/testDataGenerator';
|
|
||||||
|
|
||||||
interface DataPreviewProps {
|
|
||||||
fields: FieldConfig[];
|
|
||||||
}
|
|
||||||
|
|
||||||
/** JSON 语法高亮渲染 */
|
|
||||||
function JsonHighlight({ data }: { data: Record<string, unknown> }) {
|
|
||||||
const formatted = useMemo(() => {
|
|
||||||
const lines: { indent: string; key?: string; value: string; isLast: boolean }[] = [];
|
|
||||||
const entries = Object.entries(data);
|
|
||||||
|
|
||||||
entries.forEach(([key, value], index) => {
|
|
||||||
const isLast = index === entries.length - 1;
|
|
||||||
const formattedValue =
|
|
||||||
value === null ? 'null' : typeof value === 'string' ? `"${value}"` : String(value);
|
|
||||||
lines.push({ indent: ' ', key, value: formattedValue, isLast });
|
|
||||||
});
|
|
||||||
|
|
||||||
return lines;
|
|
||||||
}, [data]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<pre className="text-sm font-mono leading-relaxed">
|
|
||||||
<span className="text-muted-foreground">{'{'}</span>
|
|
||||||
{formatted.map((line, i) => (
|
|
||||||
<div key={i} className="flex">
|
|
||||||
<span className="text-muted-foreground">{line.indent}</span>
|
|
||||||
<span className="text-blue-500 dark:text-blue-400">"{line.key}"</span>
|
|
||||||
<span className="text-muted-foreground">{': '}</span>
|
|
||||||
<span className={getValueColor(line.value)}>{line.value}</span>
|
|
||||||
{!line.isLast && <span className="text-muted-foreground">,</span>}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
<span className="text-muted-foreground">{'}'}</span>
|
|
||||||
</pre>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 根据值类型返回颜色类名 */
|
|
||||||
function getValueColor(value: string): string {
|
|
||||||
if (value === 'null') return 'text-muted-foreground';
|
|
||||||
if (value.startsWith('"')) return 'text-emerald-600 dark:text-emerald-400';
|
|
||||||
if (/^\d+$/.test(value)) return 'text-amber-600 dark:text-amber-400';
|
|
||||||
if (value === 'true' || value === 'false') return 'text-purple-600 dark:text-purple-400';
|
|
||||||
return 'text-foreground';
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function DataPreview({ fields }: DataPreviewProps) {
|
|
||||||
const { t } = useI18n('testDataGenerator');
|
|
||||||
|
|
||||||
// 生成一条示例数据
|
|
||||||
const sampleData = useMemo(() => {
|
|
||||||
if (fields.length === 0) return null;
|
|
||||||
|
|
||||||
const record: Record<string, unknown> = {};
|
|
||||||
for (const field of fields) {
|
|
||||||
// 非必填字段预览显示 null
|
|
||||||
if (!field.required) {
|
|
||||||
record[field.name] = null;
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
const generator = getGeneratorById(field.generatorId);
|
|
||||||
if (generator) {
|
|
||||||
record[field.name] = generator.generate(field.params);
|
|
||||||
} else {
|
|
||||||
record[field.name] = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return record;
|
|
||||||
}, [fields]);
|
|
||||||
|
|
||||||
if (!sampleData) {
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col items-center justify-center h-full text-center">
|
|
||||||
<FileJson className="h-8 w-8 text-muted-foreground/30 mb-2" />
|
|
||||||
<p className="text-xs text-muted-foreground/50">{t('testDataGenerator_noDataHint')}</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col h-full">
|
|
||||||
{/* 示例标签 */}
|
|
||||||
<div className="flex items-center justify-between mb-3">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<div className="h-5 w-5 rounded bg-primary/10 flex items-center justify-center">
|
|
||||||
<FileText className="h-3 w-3 text-primary" />
|
|
||||||
</div>
|
|
||||||
<span className="text-xs font-medium text-muted-foreground">
|
|
||||||
{t('testDataGenerator_sampleData')}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<span className="text-[10px] text-muted-foreground/50 bg-muted px-1.5 py-0.5 rounded">
|
|
||||||
{Object.keys(sampleData).length} {t('testDataGenerator_fields')}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 示例数据展示 */}
|
|
||||||
<div className="flex-1 min-h-0 overflow-auto rounded-lg bg-zinc-950 dark:bg-zinc-900 p-4">
|
|
||||||
<JsonHighlight data={sampleData} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,81 +0,0 @@
|
|||||||
/**
|
|
||||||
* 导出面板组件
|
|
||||||
* 提供复制、下载 JSON、下载 CSV 选项
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { Copy, Download } from 'lucide-react';
|
|
||||||
import { toast } from 'sonner';
|
|
||||||
import { Button } from '@/components/ui/button';
|
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
import { DataExporter } from '@/utils/dataExporter';
|
|
||||||
import type { GenerateResult } from '@/types/testDataGenerator';
|
|
||||||
|
|
||||||
interface ExportPanelProps {
|
|
||||||
result: GenerateResult | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function ExportPanel({ result }: ExportPanelProps) {
|
|
||||||
const { t } = useI18n('testDataGenerator');
|
|
||||||
|
|
||||||
if (!result?.data || result.data.length === 0) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleCopyJSON = async () => {
|
|
||||||
const content = DataExporter.toJSON(result.data!);
|
|
||||||
const success = await DataExporter.copyToClipboard(content);
|
|
||||||
if (success) {
|
|
||||||
toast.success(t('testDataGenerator_copySuccess'));
|
|
||||||
} else {
|
|
||||||
toast.error(t('testDataGenerator_copyFailed'));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCopyCSV = async () => {
|
|
||||||
const content = DataExporter.toCSV(result.data!);
|
|
||||||
const success = await DataExporter.copyToClipboard(content);
|
|
||||||
if (success) {
|
|
||||||
toast.success(t('testDataGenerator_copySuccess'));
|
|
||||||
} else {
|
|
||||||
toast.error(t('testDataGenerator_copyFailed'));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDownloadJSON = () => {
|
|
||||||
const file = DataExporter.toSingleFile(result.data!, 'json', 'test-data');
|
|
||||||
DataExporter.download(file);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDownloadCSV = () => {
|
|
||||||
const file = DataExporter.toSingleFile(result.data!, 'csv', 'test-data');
|
|
||||||
DataExporter.download(file);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-2">
|
|
||||||
<h4 className="text-sm font-medium text-foreground">{t('testDataGenerator_export')}</h4>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-2 gap-2">
|
|
||||||
<Button variant="outline" size="sm" onClick={handleCopyJSON} className="h-9 gap-1.5">
|
|
||||||
<Copy className="h-4 w-4" />
|
|
||||||
{t('testDataGenerator_copyJSON')}
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
<Button variant="outline" size="sm" onClick={handleCopyCSV} className="h-9 gap-1.5">
|
|
||||||
<Copy className="h-4 w-4" />
|
|
||||||
{t('testDataGenerator_copyCSV')}
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
<Button variant="outline" size="sm" onClick={handleDownloadJSON} className="h-9 gap-1.5">
|
|
||||||
<Download className="h-4 w-4" />
|
|
||||||
{t('testDataGenerator_downloadJSON')}
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
<Button variant="outline" size="sm" onClick={handleDownloadCSV} className="h-9 gap-1.5">
|
|
||||||
<Download className="h-4 w-4" />
|
|
||||||
{t('testDataGenerator_downloadCSV')}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,230 +0,0 @@
|
|||||||
/**
|
|
||||||
* 字段编辑器组件
|
|
||||||
* 编辑单个字段的详细配置
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { useState, useCallback } from 'react';
|
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
import { Input } from '@/components/ui/input';
|
|
||||||
import { Switch } from '@/components/ui/switch';
|
|
||||||
import { Badge } from '@/components/ui/badge';
|
|
||||||
import { getGeneratorById } from '@/lib/generators';
|
|
||||||
import type { FieldConfig } from '@/types/testDataGenerator';
|
|
||||||
import GeneratorSelector from './GeneratorSelector';
|
|
||||||
import GeneratorConfig from './GeneratorConfig';
|
|
||||||
|
|
||||||
interface FieldEditorProps {
|
|
||||||
field: FieldConfig;
|
|
||||||
onChange: (field: FieldConfig) => void;
|
|
||||||
/** 所有字段名列表，用于检测重复 */
|
|
||||||
allFieldNames?: string[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function FieldEditor({ field, onChange, allFieldNames = [] }: FieldEditorProps) {
|
|
||||||
const { t } = useI18n('testDataGenerator');
|
|
||||||
const generator = getGeneratorById(field.generatorId);
|
|
||||||
const [nameError, setNameError] = useState<string | null>(null);
|
|
||||||
|
|
||||||
const validateFieldName = useCallback(
|
|
||||||
(name: string): string | null => {
|
|
||||||
const trimmed = name.trim();
|
|
||||||
if (!trimmed) {
|
|
||||||
return t('testDataGenerator_fieldNameEmpty');
|
|
||||||
}
|
|
||||||
if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(trimmed)) {
|
|
||||||
return t('testDataGenerator_fieldNameInvalid');
|
|
||||||
}
|
|
||||||
const isDuplicate = allFieldNames.some(
|
|
||||||
(n, i) => n === trimmed && i !== allFieldNames.indexOf(field.name),
|
|
||||||
);
|
|
||||||
if (isDuplicate) {
|
|
||||||
return t('testDataGenerator_fieldNameDuplicate');
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
},
|
|
||||||
[allFieldNames, field.name, t],
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleNameChange = (name: string) => {
|
|
||||||
onChange({ ...field, name });
|
|
||||||
// 实时校验
|
|
||||||
const error = validateFieldName(name);
|
|
||||||
setNameError(error);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDescriptionChange = (description: string) => {
|
|
||||||
onChange({ ...field, description });
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleRequiredChange = (required: boolean) => {
|
|
||||||
onChange({
|
|
||||||
...field,
|
|
||||||
required,
|
|
||||||
// 切换为必填时清零，切换为非必填时默认 100%
|
|
||||||
nullRate: required ? 0 : 100,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleNullRateChange = (nullRate: number) => {
|
|
||||||
// 限制范围 0-100
|
|
||||||
const clampedRate = Math.max(0, Math.min(100, nullRate));
|
|
||||||
// 空值率为 0 时自动设为必填
|
|
||||||
if (clampedRate === 0) {
|
|
||||||
onChange({ ...field, nullRate: clampedRate, required: true });
|
|
||||||
} else {
|
|
||||||
onChange({ ...field, nullRate: clampedRate, required: false });
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleUniqueChange = (unique: boolean) => {
|
|
||||||
onChange({ ...field, unique });
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleGeneratorChange = (generatorId: string) => {
|
|
||||||
const generator = getGeneratorById(generatorId);
|
|
||||||
const defaultParams: Record<string, unknown> = {};
|
|
||||||
generator?.params.forEach((p) => {
|
|
||||||
defaultParams[p.key] = p.defaultValue;
|
|
||||||
});
|
|
||||||
onChange({
|
|
||||||
...field,
|
|
||||||
generatorId,
|
|
||||||
params: defaultParams,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleParamsChange = (params: Record<string, unknown>) => {
|
|
||||||
onChange({ ...field, params });
|
|
||||||
};
|
|
||||||
|
|
||||||
const nullRatePresets = [
|
|
||||||
{ label: '5%', value: 5 },
|
|
||||||
{ label: '20%', value: 20 },
|
|
||||||
{ label: '50%', value: 50 },
|
|
||||||
{ label: '75%', value: 75 },
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-5">
|
|
||||||
{/* 基础配置 */}
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div className="space-y-2">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<label className="text-sm font-medium text-foreground">
|
|
||||||
{t('testDataGenerator_fieldName')}
|
|
||||||
</label>
|
|
||||||
<span className="text-xs text-muted-foreground">{field.name.length}/20</span>
|
|
||||||
</div>
|
|
||||||
<Input
|
|
||||||
value={field.name}
|
|
||||||
onChange={(e) => handleNameChange(e.target.value)}
|
|
||||||
placeholder={t('testDataGenerator_fieldNamePlaceholder')}
|
|
||||||
maxLength={20}
|
|
||||||
className={`h-9 ${nameError ? 'border-destructive' : ''}`}
|
|
||||||
/>
|
|
||||||
{nameError && <p className="text-xs text-destructive mt-1">{nameError}</p>}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<label className="text-sm font-medium text-foreground">
|
|
||||||
{t('testDataGenerator_fieldDescription')}
|
|
||||||
</label>
|
|
||||||
<span className="text-xs text-muted-foreground">
|
|
||||||
{(field.description || '').length}/50
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<Input
|
|
||||||
value={field.description || ''}
|
|
||||||
onChange={(e) => handleDescriptionChange(e.target.value)}
|
|
||||||
placeholder={t('testDataGenerator_fieldDescriptionPlaceholder')}
|
|
||||||
maxLength={50}
|
|
||||||
className="h-9"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 必填/选填配置 */}
|
|
||||||
<div className="space-y-3">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<label className="text-sm font-medium text-foreground">
|
|
||||||
{t('testDataGenerator_required')}
|
|
||||||
</label>
|
|
||||||
<Switch checked={field.required} onCheckedChange={handleRequiredChange} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{!field.required && (
|
|
||||||
<div className="space-y-2 pl-1">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<span className="text-sm text-muted-foreground">
|
|
||||||
{t('testDataGenerator_nullRate')}
|
|
||||||
</span>
|
|
||||||
<Badge variant="secondary" className="text-xs">
|
|
||||||
{field.nullRate}%
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
<Input
|
|
||||||
type="number"
|
|
||||||
value={field.nullRate}
|
|
||||||
onChange={(e) => {
|
|
||||||
const value = Number(e.target.value);
|
|
||||||
if (value >= 0 && value <= 100) {
|
|
||||||
handleNullRateChange(value);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
min={0}
|
|
||||||
max={100}
|
|
||||||
step={5}
|
|
||||||
className="h-9 w-full"
|
|
||||||
/>
|
|
||||||
<div className="flex gap-2">
|
|
||||||
{nullRatePresets.map((preset) => (
|
|
||||||
<button
|
|
||||||
key={preset.value}
|
|
||||||
onClick={() => handleNullRateChange(preset.value)}
|
|
||||||
className={`px-3 py-1.5 text-xs rounded-md transition-colors ${
|
|
||||||
field.nullRate === preset.value
|
|
||||||
? 'bg-primary text-primary-foreground'
|
|
||||||
: 'bg-muted text-muted-foreground hover:bg-muted/80'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{preset.label}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 唯一性约束 */}
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<label className="text-sm font-medium text-foreground">
|
|
||||||
{t('testDataGenerator_uniqueConstraint')}
|
|
||||||
</label>
|
|
||||||
<Switch checked={field.unique} onCheckedChange={handleUniqueChange} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 生成器选择 */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<label className="text-sm font-medium text-foreground">
|
|
||||||
{t('testDataGenerator_generator')}
|
|
||||||
</label>
|
|
||||||
<GeneratorSelector selectedId={field.generatorId} onChange={handleGeneratorChange} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 生成器参数配置 */}
|
|
||||||
{generator && (
|
|
||||||
<div className="space-y-2">
|
|
||||||
<label className="text-sm font-medium text-foreground">
|
|
||||||
{t('testDataGenerator_generatorParams')}
|
|
||||||
</label>
|
|
||||||
<GeneratorConfig
|
|
||||||
generator={generator}
|
|
||||||
params={field.params}
|
|
||||||
onChange={handleParamsChange}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,59 +0,0 @@
|
|||||||
/**
|
|
||||||
* 字段项组件
|
|
||||||
* 展示单个字段的基本信息，适配固定高度卡片
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
import { getGeneratorById } from '@/lib/generators';
|
|
||||||
import { Badge } from '@/components/ui/badge';
|
|
||||||
import type { FieldConfig } from '@/types/testDataGenerator';
|
|
||||||
|
|
||||||
interface FieldItemProps {
|
|
||||||
field: FieldConfig;
|
|
||||||
onClick: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function FieldItem({ field, onClick }: FieldItemProps) {
|
|
||||||
const { t } = useI18n('testDataGenerator');
|
|
||||||
const generator = getGeneratorById(field.generatorId);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className="flex-1 min-w-0 cursor-pointer rounded-md transition-all hover:bg-muted/50"
|
|
||||||
onClick={onClick}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className={`h-full ${field.description ? 'flex flex-col justify-center' : 'flex items-center'}`}
|
|
||||||
>
|
|
||||||
{/* 第一行：字段名 + 标签 */}
|
|
||||||
<div className="flex items-center gap-1.5 overflow-hidden">
|
|
||||||
<span className="font-medium text-sm text-foreground truncate shrink-0 max-w-[140px]">
|
|
||||||
{field.name}
|
|
||||||
</span>
|
|
||||||
<Badge variant="secondary" className="text-[10px] shrink-0 px-1 py-0">
|
|
||||||
{generator?.name || field.generatorId}
|
|
||||||
</Badge>
|
|
||||||
{!field.required && (
|
|
||||||
<Badge
|
|
||||||
variant="outline"
|
|
||||||
className="text-[10px] shrink-0 px-1 py-0 text-muted-foreground"
|
|
||||||
>
|
|
||||||
{field.nullRate}%
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
{field.unique && (
|
|
||||||
<Badge variant="outline" className="text-[10px] shrink-0 px-1 py-0 text-blue-500">
|
|
||||||
{t('testDataGenerator_unique')}
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
{/* 第二行：描述 */}
|
|
||||||
{field.description && (
|
|
||||||
<p className="text-[11px] text-muted-foreground mt-0.5 truncate leading-tight">
|
|
||||||
{field.description}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,466 +0,0 @@
|
|||||||
/**
|
|
||||||
* 字段列表组件
|
|
||||||
* 展示所有字段配置，支持添加、删除、拖拽排序
|
|
||||||
* 超过 5 条时启用虚拟列表滚动
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { useState, useRef, useCallback, useEffect } from 'react';
|
|
||||||
import { Plus, GripVertical, Trash2, Save } from 'lucide-react';
|
|
||||||
import { toast } from 'sonner';
|
|
||||||
import { Button } from '@/components/ui/button';
|
|
||||||
import { Input } from '@/components/ui/input';
|
|
||||||
import { Dialog, DialogContent } from '@/components/ui/dialog';
|
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
import * as ruleStorage from '@/utils/ruleStorage';
|
|
||||||
import {
|
|
||||||
DndContext,
|
|
||||||
closestCenter,
|
|
||||||
KeyboardSensor,
|
|
||||||
PointerSensor,
|
|
||||||
useSensor,
|
|
||||||
useSensors,
|
|
||||||
type DragEndEvent,
|
|
||||||
type DragStartEvent,
|
|
||||||
DragOverlay,
|
|
||||||
} from '@dnd-kit/core';
|
|
||||||
import {
|
|
||||||
SortableContext,
|
|
||||||
sortableKeyboardCoordinates,
|
|
||||||
verticalListSortingStrategy,
|
|
||||||
useSortable,
|
|
||||||
} from '@dnd-kit/sortable';
|
|
||||||
import { CSS } from '@dnd-kit/utilities';
|
|
||||||
import type { FieldConfig, DataRule } from '@/types/testDataGenerator';
|
|
||||||
import FieldItem from './FieldItem';
|
|
||||||
|
|
||||||
/** 最大字段数量 */
|
|
||||||
export const MAX_FIELDS = 40;
|
|
||||||
|
|
||||||
/** 虚拟列表配置 */
|
|
||||||
const VISIBLE_COUNT = 5;
|
|
||||||
const ROW_HEIGHT = 60; // 卡片高度 52 + 间距 8
|
|
||||||
const ROW_GAP = 8;
|
|
||||||
const OVERSCAN = 2;
|
|
||||||
const DRAG_OVERSCAN = 10; // 拖拽时增加的预加载范围
|
|
||||||
|
|
||||||
interface FieldListProps {
|
|
||||||
fields: FieldConfig[];
|
|
||||||
onUpdate: (index: number, field: FieldConfig) => void;
|
|
||||||
onRemove: (index: number) => void;
|
|
||||||
onAdd: () => void;
|
|
||||||
onEdit: (index: number) => void;
|
|
||||||
onReorder: (oldIndex: number, newIndex: number) => void;
|
|
||||||
editingRule?: DataRule | null;
|
|
||||||
onRuleSaved?: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 可排序的字段项 */
|
|
||||||
function SortableFieldItem({
|
|
||||||
field,
|
|
||||||
onEdit,
|
|
||||||
onRemove,
|
|
||||||
}: {
|
|
||||||
field: FieldConfig;
|
|
||||||
onEdit: () => void;
|
|
||||||
onRemove: () => void;
|
|
||||||
}) {
|
|
||||||
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
|
|
||||||
id: field.id,
|
|
||||||
});
|
|
||||||
|
|
||||||
const style = {
|
|
||||||
transform: CSS.Transform.toString(transform),
|
|
||||||
transition,
|
|
||||||
opacity: isDragging ? 0.5 : 1,
|
|
||||||
zIndex: isDragging ? 10 : 0,
|
|
||||||
height: ROW_HEIGHT - ROW_GAP, // 固定卡片高度 52px，与虚拟模式一致
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
ref={setNodeRef}
|
|
||||||
style={style}
|
|
||||||
className={`group relative rounded-lg border transition-all ${
|
|
||||||
isDragging
|
|
||||||
? 'border-primary shadow-lg'
|
|
||||||
: 'border-border hover:border-muted-foreground/30 hover:shadow-sm'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<div className="flex items-center gap-2 h-full px-3 py-2">
|
|
||||||
{/* 拖拽手柄 */}
|
|
||||||
<button
|
|
||||||
className="cursor-grab active:cursor-grabbing p-1 rounded hover:bg-muted/50 touch-none shrink-0"
|
|
||||||
{...attributes}
|
|
||||||
{...listeners}
|
|
||||||
>
|
|
||||||
<GripVertical className="h-4 w-4 text-muted-foreground" />
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<FieldItem field={field} onClick={onEdit} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="icon"
|
|
||||||
className="h-8 w-8 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity text-destructive hover:text-destructive"
|
|
||||||
onClick={onRemove}
|
|
||||||
>
|
|
||||||
<Trash2 className="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function FieldList({
|
|
||||||
fields,
|
|
||||||
onUpdate: _onUpdate,
|
|
||||||
onRemove,
|
|
||||||
onAdd,
|
|
||||||
onEdit,
|
|
||||||
onReorder,
|
|
||||||
editingRule,
|
|
||||||
onRuleSaved,
|
|
||||||
}: FieldListProps) {
|
|
||||||
const { t } = useI18n('testDataGenerator');
|
|
||||||
const [scrollTop, setScrollTop] = useState(0);
|
|
||||||
const [activeId, setActiveId] = useState<string | null>(null);
|
|
||||||
const containerRef = useRef<HTMLDivElement>(null);
|
|
||||||
const [showSaveDialog, setShowSaveDialog] = useState(false);
|
|
||||||
const [showConfirmOverwrite, setShowConfirmOverwrite] = useState(false);
|
|
||||||
const [ruleName, setRuleName] = useState('');
|
|
||||||
const [ruleDescription, setRuleDescription] = useState('');
|
|
||||||
|
|
||||||
const sensors = useSensors(
|
|
||||||
useSensor(PointerSensor, {
|
|
||||||
activationConstraint: { distance: 5 },
|
|
||||||
}),
|
|
||||||
useSensor(KeyboardSensor, {
|
|
||||||
coordinateGetter: sortableKeyboardCoordinates,
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleDragStart = (event: DragStartEvent) => {
|
|
||||||
setActiveId(String(event.active.id));
|
|
||||||
};
|
|
||||||
|
|
||||||
// 拖拽时的滚轮滚动处理
|
|
||||||
useEffect(() => {
|
|
||||||
if (!activeId || !containerRef.current) return;
|
|
||||||
|
|
||||||
const container = containerRef.current;
|
|
||||||
|
|
||||||
const handleWheel = (e: WheelEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
|
|
||||||
// 滚动容器
|
|
||||||
const scrollAmount = e.deltaY * 0.5; // 降低滚动速度，更易控制
|
|
||||||
const newScrollTop = Math.max(
|
|
||||||
0,
|
|
||||||
Math.min(
|
|
||||||
container.scrollHeight - container.clientHeight,
|
|
||||||
container.scrollTop + scrollAmount,
|
|
||||||
),
|
|
||||||
);
|
|
||||||
container.scrollTop = newScrollTop;
|
|
||||||
setScrollTop(newScrollTop);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 在 document 级别监听，使用 capture 阶段以优先处理
|
|
||||||
document.addEventListener('wheel', handleWheel, { capture: true, passive: false });
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
document.removeEventListener('wheel', handleWheel, { capture: true });
|
|
||||||
};
|
|
||||||
}, [activeId]);
|
|
||||||
|
|
||||||
const handleDragEnd = (event: DragEndEvent) => {
|
|
||||||
const { active, over } = event;
|
|
||||||
setActiveId(null);
|
|
||||||
if (!over || active.id === over.id) return;
|
|
||||||
|
|
||||||
const oldIndex = fields.findIndex((f) => f.id === active.id);
|
|
||||||
const newIndex = fields.findIndex((f) => f.id === over.id);
|
|
||||||
if (oldIndex !== -1 && newIndex !== -1) {
|
|
||||||
onReorder(oldIndex, newIndex);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleScroll = useCallback(() => {
|
|
||||||
if (containerRef.current) {
|
|
||||||
setScrollTop(containerRef.current.scrollTop);
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const isVirtual = fields.length > VISIBLE_COUNT;
|
|
||||||
const totalHeight = fields.length * ROW_HEIGHT;
|
|
||||||
const fixedContainerHeight = VISIBLE_COUNT * ROW_HEIGHT;
|
|
||||||
// 少于 5 条时高度自适应，5 条及以上固定为 5 条的高度
|
|
||||||
const containerStyle =
|
|
||||||
fields.length < VISIBLE_COUNT
|
|
||||||
? { height: 'auto' as const, overflowY: 'visible' as const }
|
|
||||||
: { height: fixedContainerHeight, overflowY: 'auto' as const };
|
|
||||||
|
|
||||||
// 虚拟列表：计算可见范围（拖拽时扩展预加载范围）
|
|
||||||
const currentOverscan = activeId ? DRAG_OVERSCAN : OVERSCAN;
|
|
||||||
const visibleStart = Math.max(0, Math.floor(scrollTop / ROW_HEIGHT) - currentOverscan);
|
|
||||||
const visibleEnd = Math.min(
|
|
||||||
fields.length,
|
|
||||||
Math.ceil((scrollTop + fixedContainerHeight) / ROW_HEIGHT) + currentOverscan,
|
|
||||||
);
|
|
||||||
const visibleFields = isVirtual ? fields.slice(visibleStart, visibleEnd) : fields;
|
|
||||||
|
|
||||||
// 查找拖拽中的项目（用于 DragOverlay）
|
|
||||||
const activeField = activeId ? fields.find((f) => f.id === activeId) : null;
|
|
||||||
|
|
||||||
const isMaxReached = fields.length >= MAX_FIELDS;
|
|
||||||
|
|
||||||
// 编辑模式下，保存时更新原规则
|
|
||||||
const handleUpdateRule = useCallback(() => {
|
|
||||||
if (!editingRule) return;
|
|
||||||
|
|
||||||
const updated = ruleStorage.update(editingRule.id, {
|
|
||||||
fields: fields,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (updated) {
|
|
||||||
toast.success(t('testDataGenerator_ruleUpdated'));
|
|
||||||
onRuleSaved?.();
|
|
||||||
}
|
|
||||||
}, [editingRule, fields, t, onRuleSaved]);
|
|
||||||
|
|
||||||
// 新建规则或另存为
|
|
||||||
const handleSave = useCallback(
|
|
||||||
(overwrite = false) => {
|
|
||||||
if (!ruleName.trim()) return;
|
|
||||||
|
|
||||||
const trimmedName = ruleName.trim();
|
|
||||||
|
|
||||||
// 检查名称是否重复
|
|
||||||
if (!overwrite) {
|
|
||||||
const existingRule = ruleStorage.getByName(trimmedName);
|
|
||||||
if (existingRule) {
|
|
||||||
setShowConfirmOverwrite(true);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const newRule = ruleStorage.save({
|
|
||||||
name: trimmedName,
|
|
||||||
description: ruleDescription.trim(),
|
|
||||||
fields: fields,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (newRule) {
|
|
||||||
setShowSaveDialog(false);
|
|
||||||
setShowConfirmOverwrite(false);
|
|
||||||
setRuleName('');
|
|
||||||
setRuleDescription('');
|
|
||||||
toast.success(t('testDataGenerator_ruleSaved'));
|
|
||||||
onRuleSaved?.();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[ruleName, ruleDescription, fields, t, onRuleSaved],
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col h-full">
|
|
||||||
<div className="flex items-center justify-between mb-3">
|
|
||||||
<h3 className="text-sm font-medium text-foreground">
|
|
||||||
{t('testDataGenerator_fields')} ({fields.length}/{MAX_FIELDS})
|
|
||||||
</h3>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
{editingRule ? (
|
|
||||||
<>
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={handleUpdateRule}
|
|
||||||
disabled={fields.length === 0}
|
|
||||||
className="h-8 gap-1.5 px-2.5"
|
|
||||||
title={`${t('testDataGenerator_editing')}: ${editingRule.name}`}
|
|
||||||
>
|
|
||||||
<Save className="h-3.5 w-3.5" />
|
|
||||||
{t('testDataGenerator_updateRule')}
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => setShowSaveDialog(true)}
|
|
||||||
disabled={fields.length === 0}
|
|
||||||
className="h-8 px-2"
|
|
||||||
>
|
|
||||||
{t('testDataGenerator_saveAs')}
|
|
||||||
</Button>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => setShowSaveDialog(true)}
|
|
||||||
disabled={fields.length === 0}
|
|
||||||
className="h-8 gap-1.5 px-2.5"
|
|
||||||
>
|
|
||||||
<Save className="h-3.5 w-3.5" />
|
|
||||||
{t('testDataGenerator_saveRule')}
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={onAdd}
|
|
||||||
disabled={isMaxReached}
|
|
||||||
className="h-8 gap-1.5 px-2.5"
|
|
||||||
>
|
|
||||||
<Plus className="h-4 w-4" />
|
|
||||||
{t('testDataGenerator_addField')}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex-1 min-h-0">
|
|
||||||
{fields.length === 0 ? (
|
|
||||||
<div className="flex flex-col items-center justify-center py-8 text-center">
|
|
||||||
<GripVertical className="h-10 w-10 text-muted-foreground/40 mb-3" />
|
|
||||||
<p className="text-sm text-muted-foreground">{t('testDataGenerator_noFields')}</p>
|
|
||||||
<p className="text-xs text-muted-foreground/70 mt-1">
|
|
||||||
{t('testDataGenerator_addFieldHint')}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<DndContext
|
|
||||||
sensors={sensors}
|
|
||||||
collisionDetection={closestCenter}
|
|
||||||
onDragStart={handleDragStart}
|
|
||||||
onDragEnd={handleDragEnd}
|
|
||||||
>
|
|
||||||
<SortableContext items={fields.map((f) => f.id)} strategy={verticalListSortingStrategy}>
|
|
||||||
<div
|
|
||||||
ref={containerRef}
|
|
||||||
className="overflow-y-auto"
|
|
||||||
style={containerStyle}
|
|
||||||
onScroll={handleScroll}
|
|
||||||
>
|
|
||||||
{isVirtual ? (
|
|
||||||
/* 虚拟滚动模式 */
|
|
||||||
<div style={{ height: totalHeight, position: 'relative' }}>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
position: 'absolute',
|
|
||||||
top: visibleStart * ROW_HEIGHT,
|
|
||||||
left: 0,
|
|
||||||
right: 0,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{visibleFields.map((field, vi) => {
|
|
||||||
const realIndex = fields.findIndex((f) => f.id === field.id);
|
|
||||||
const isLast = visibleStart + vi === fields.length - 1;
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={field.id}
|
|
||||||
style={{
|
|
||||||
height: ROW_HEIGHT,
|
|
||||||
paddingBottom: isLast ? 0 : ROW_GAP,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<SortableFieldItem
|
|
||||||
field={field}
|
|
||||||
onEdit={() => onEdit(realIndex)}
|
|
||||||
onRemove={() => onRemove(realIndex)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
/* 普通模式（≤5 条） */
|
|
||||||
<div className="space-y-2">
|
|
||||||
{fields.map((field, index) => (
|
|
||||||
<SortableFieldItem
|
|
||||||
key={field.id}
|
|
||||||
field={field}
|
|
||||||
onEdit={() => onEdit(index)}
|
|
||||||
onRemove={() => onRemove(index)}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</SortableContext>
|
|
||||||
<DragOverlay>
|
|
||||||
{activeField ? (
|
|
||||||
<div className="rounded-lg border border-primary bg-background shadow-lg opacity-90">
|
|
||||||
<div className="flex items-center gap-2 h-full px-3 py-2">
|
|
||||||
<div className="p-1">
|
|
||||||
<GripVertical className="h-4 w-4 text-muted-foreground" />
|
|
||||||
</div>
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<FieldItem field={activeField} onClick={() => {}} />
|
|
||||||
</div>
|
|
||||||
<div className="h-8 w-8 shrink-0" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
</DragOverlay>
|
|
||||||
</DndContext>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 保存规则对话框 */}
|
|
||||||
<Dialog open={showSaveDialog} onOpenChange={setShowSaveDialog}>
|
|
||||||
<DialogContent
|
|
||||||
showCloseButton={false}
|
|
||||||
className="w-[calc(100vw-4rem)] max-w-[420px] p-0 pt-6 flex flex-col"
|
|
||||||
>
|
|
||||||
<div className="flex-1 overflow-y-auto px-6 pt-2 pb-4 space-y-4">
|
|
||||||
<Input
|
|
||||||
value={ruleName}
|
|
||||||
onChange={(e) => setRuleName(e.target.value)}
|
|
||||||
placeholder={t('testDataGenerator_ruleNamePlaceholder')}
|
|
||||||
className="h-9"
|
|
||||||
/>
|
|
||||||
<Input
|
|
||||||
value={ruleDescription}
|
|
||||||
onChange={(e) => setRuleDescription(e.target.value)}
|
|
||||||
placeholder={t('testDataGenerator_ruleDescPlaceholder')}
|
|
||||||
className="h-9"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-end gap-2 px-6 py-2 border-t shrink-0">
|
|
||||||
<Button variant="ghost" size="sm" onClick={() => setShowSaveDialog(false)}>
|
|
||||||
{t('testDataGenerator_cancel')}
|
|
||||||
</Button>
|
|
||||||
<Button size="sm" onClick={() => handleSave()} disabled={!ruleName.trim()}>
|
|
||||||
{t('testDataGenerator_confirm')}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
|
|
||||||
{/* 覆盖确认对话框 */}
|
|
||||||
<Dialog open={showConfirmOverwrite} onOpenChange={setShowConfirmOverwrite}>
|
|
||||||
<DialogContent
|
|
||||||
showCloseButton={false}
|
|
||||||
className="w-[calc(100vw-4rem)] max-w-[420px] p-0 pt-6 flex flex-col"
|
|
||||||
>
|
|
||||||
<div className="flex-1 overflow-y-auto px-6 pb-4">
|
|
||||||
<p className="text-sm text-muted-foreground">
|
|
||||||
{t('testDataGenerator_ruleNameDuplicate')}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-end gap-2 px-6 py-2 border-t shrink-0">
|
|
||||||
<Button variant="ghost" size="sm" onClick={() => setShowConfirmOverwrite(false)}>
|
|
||||||
{t('testDataGenerator_cancel')}
|
|
||||||
</Button>
|
|
||||||
<Button size="sm" onClick={() => handleSave(true)}>
|
|
||||||
{t('testDataGenerator_overwrite')}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,73 +0,0 @@
|
|||||||
/**
|
|
||||||
* 生成按钮组件
|
|
||||||
* 显示生成按钮、加载状态和进度条
|
|
||||||
*/
|
|
||||||
|
|
||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,91 +0,0 @@
|
|||||||
/**
|
|
||||||
* 生成选项组件
|
|
||||||
* 配置生成数量、数据格式等选项
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
import { Input } from '@/components/ui/input';
|
|
||||||
|
|
||||||
interface GenerateOptionsProps {
|
|
||||||
count: number;
|
|
||||||
onCountChange: (count: number) => void;
|
|
||||||
format: 'json' | 'csv';
|
|
||||||
onFormatChange: (format: 'json' | 'csv') => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
const COUNT_PRESETS = [50, 100, 1000, 5000, 10000];
|
|
||||||
|
|
||||||
const FORMAT_OPTIONS = [
|
|
||||||
{ value: 'json' as const, label: 'JSON' },
|
|
||||||
{ value: 'csv' as const, label: 'CSV' },
|
|
||||||
];
|
|
||||||
|
|
||||||
export default function GenerateOptions({
|
|
||||||
count,
|
|
||||||
onCountChange,
|
|
||||||
format,
|
|
||||||
onFormatChange,
|
|
||||||
}: GenerateOptionsProps) {
|
|
||||||
const { t } = useI18n('testDataGenerator');
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-4">
|
|
||||||
{/* 生成数量 */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<label className="text-sm font-medium text-foreground">
|
|
||||||
{t('testDataGenerator_count')}
|
|
||||||
</label>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
{COUNT_PRESETS.map((preset) => (
|
|
||||||
<button
|
|
||||||
key={preset}
|
|
||||||
onClick={() => onCountChange(preset)}
|
|
||||||
className={`px-3 py-1.5 text-xs font-medium rounded-md transition-colors ${
|
|
||||||
count === preset
|
|
||||||
? 'bg-primary text-primary-foreground'
|
|
||||||
: 'bg-muted text-muted-foreground hover:bg-muted/80'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{preset.toLocaleString()}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<Input
|
|
||||||
type="number"
|
|
||||||
value={count}
|
|
||||||
onChange={(e) => {
|
|
||||||
const value = Number(e.target.value);
|
|
||||||
if (value > 0 && value <= 100000) {
|
|
||||||
onCountChange(value);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
min={1}
|
|
||||||
max={100000}
|
|
||||||
className="h-9"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 数据格式 */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<label className="text-sm font-medium text-foreground">
|
|
||||||
{t('testDataGenerator_format')}
|
|
||||||
</label>
|
|
||||||
<div className="flex gap-2">
|
|
||||||
{FORMAT_OPTIONS.map((option) => (
|
|
||||||
<button
|
|
||||||
key={option.value}
|
|
||||||
onClick={() => onFormatChange(option.value)}
|
|
||||||
className={`flex-1 px-3 py-1.5 text-xs font-medium rounded-md transition-colors ${
|
|
||||||
format === option.value
|
|
||||||
? 'bg-primary text-primary-foreground'
|
|
||||||
: 'bg-muted text-muted-foreground hover:bg-muted/80'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{option.label}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,126 +0,0 @@
|
|||||||
/**
|
|
||||||
* 生成器配置组件
|
|
||||||
* 根据生成器参数定义动态渲染配置表单
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { Input } from '@/components/ui/input';
|
|
||||||
import { Switch } from '@/components/ui/switch';
|
|
||||||
import {
|
|
||||||
Select,
|
|
||||||
SelectContent,
|
|
||||||
SelectItem,
|
|
||||||
SelectTrigger,
|
|
||||||
SelectValue,
|
|
||||||
} from '@/components/ui/select';
|
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
import type { GeneratorDefinition } from '@/types/testDataGenerator';
|
|
||||||
|
|
||||||
interface GeneratorConfigProps {
|
|
||||||
generator: GeneratorDefinition;
|
|
||||||
params: Record<string, unknown>;
|
|
||||||
onChange: (params: Record<string, unknown>) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function GeneratorConfig({ generator, params, onChange }: GeneratorConfigProps) {
|
|
||||||
const { t } = useI18n('testDataGenerator');
|
|
||||||
const handleParamChange = (key: string, value: unknown) => {
|
|
||||||
onChange({ ...params, [key]: value });
|
|
||||||
};
|
|
||||||
|
|
||||||
if (generator.params.length === 0) {
|
|
||||||
return (
|
|
||||||
<p className="text-sm text-muted-foreground py-2">
|
|
||||||
{t('testDataGenerator_noGeneratorParams')}
|
|
||||||
</p>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-4 p-3 rounded-lg bg-muted/30">
|
|
||||||
{generator.params.map((param) => (
|
|
||||||
<div key={param.key} className="space-y-2">
|
|
||||||
<label className="text-sm font-medium text-foreground">
|
|
||||||
{param.label}
|
|
||||||
{param.required && <span className="text-destructive ml-1">*</span>}
|
|
||||||
</label>
|
|
||||||
{param.description && (
|
|
||||||
<p className="text-xs text-muted-foreground">{param.description}</p>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{param.type === 'string' && (
|
|
||||||
<Input
|
|
||||||
value={String(params[param.key] ?? param.defaultValue)}
|
|
||||||
onChange={(e) => handleParamChange(param.key, e.target.value)}
|
|
||||||
placeholder={param.placeholder}
|
|
||||||
className="h-9"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{param.type === 'number' && (
|
|
||||||
<Input
|
|
||||||
type="number"
|
|
||||||
value={Number(params[param.key] ?? param.defaultValue)}
|
|
||||||
onChange={(e) => handleParamChange(param.key, Number(e.target.value))}
|
|
||||||
min={param.min}
|
|
||||||
max={param.max}
|
|
||||||
className="h-9"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{param.type === 'boolean' && (
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<span className="text-sm text-muted-foreground">
|
|
||||||
{params[param.key] !== false
|
|
||||||
? t('testDataGenerator_enabled')
|
|
||||||
: t('testDataGenerator_disabled')}
|
|
||||||
</span>
|
|
||||||
<Switch
|
|
||||||
checked={params[param.key] !== false}
|
|
||||||
onCheckedChange={(checked) => handleParamChange(param.key, checked)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{param.type === 'select' && (
|
|
||||||
<Select
|
|
||||||
value={String(params[param.key] ?? param.defaultValue)}
|
|
||||||
onValueChange={(value) => handleParamChange(param.key, value)}
|
|
||||||
>
|
|
||||||
<SelectTrigger className="h-9">
|
|
||||||
<SelectValue />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
{param.options?.map((option) => (
|
|
||||||
<SelectItem key={String(option.value)} value={String(option.value)}>
|
|
||||||
{option.label}
|
|
||||||
</SelectItem>
|
|
||||||
))}
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{param.type === 'array' && (
|
|
||||||
<Input
|
|
||||||
value={
|
|
||||||
Array.isArray(params[param.key])
|
|
||||||
? (params[param.key] as string[]).join(', ')
|
|
||||||
: String(param.defaultValue || '')
|
|
||||||
}
|
|
||||||
onChange={(e) =>
|
|
||||||
handleParamChange(
|
|
||||||
param.key,
|
|
||||||
e.target.value
|
|
||||||
.split(',')
|
|
||||||
.map((s) => s.trim())
|
|
||||||
.filter(Boolean),
|
|
||||||
)
|
|
||||||
}
|
|
||||||
placeholder={t('testDataGenerator_commaSeparated')}
|
|
||||||
className="h-9"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,90 +0,0 @@
|
|||||||
/**
|
|
||||||
* 生成器选择器组件
|
|
||||||
* 以分类形式展示所有可用生成器
|
|
||||||
*/
|
|
||||||
|
|
||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,115 +0,0 @@
|
|||||||
/**
|
|
||||||
* 结果面板组件
|
|
||||||
* 展示生成结果的状态和统计信息
|
|
||||||
*/
|
|
||||||
|
|
||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,324 +0,0 @@
|
|||||||
/**
|
|
||||||
* 规则管理器组件
|
|
||||||
* 管理测试数据生成规则的加载、删除等操作
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { useState, useEffect, useCallback, useMemo } from 'react';
|
|
||||||
import {
|
|
||||||
Search,
|
|
||||||
Upload,
|
|
||||||
Download,
|
|
||||||
Trash2,
|
|
||||||
Copy,
|
|
||||||
Edit,
|
|
||||||
Clock,
|
|
||||||
Tag,
|
|
||||||
Loader2,
|
|
||||||
FolderOpen,
|
|
||||||
} from 'lucide-react';
|
|
||||||
import { toast } from 'sonner';
|
|
||||||
import { Button } from '@/components/ui/button';
|
|
||||||
import { Input } from '@/components/ui/input';
|
|
||||||
import { Dialog, DialogContent } from '@/components/ui/dialog';
|
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
import * as ruleStorage from '@/utils/ruleStorage';
|
|
||||||
import type { DataRule, FieldConfig } from '@/types/testDataGenerator';
|
|
||||||
|
|
||||||
interface RuleManagerProps {
|
|
||||||
onLoad: (fields: FieldConfig[]) => void;
|
|
||||||
onEdit?: (rule: DataRule) => void;
|
|
||||||
onRulesChanged?: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleManagerProps) {
|
|
||||||
const { t, i18n } = useI18n('testDataGenerator');
|
|
||||||
const [rules, setRules] = useState<DataRule[]>(() => ruleStorage.getAll());
|
|
||||||
const [searchQuery, setSearchQuery] = useState('');
|
|
||||||
const [debouncedSearchQuery, setDebouncedSearchQuery] = useState('');
|
|
||||||
const [ruleToDelete, setRuleToDelete] = useState<DataRule | null>(null);
|
|
||||||
const [isImporting, setIsImporting] = useState(false);
|
|
||||||
const [isExporting, setIsExporting] = useState(false);
|
|
||||||
|
|
||||||
const loadRules = useCallback(() => {
|
|
||||||
setRules(ruleStorage.getAll());
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const timer = setTimeout(() => {
|
|
||||||
setDebouncedSearchQuery(searchQuery);
|
|
||||||
}, 250);
|
|
||||||
return () => clearTimeout(timer);
|
|
||||||
}, [searchQuery]);
|
|
||||||
|
|
||||||
const filteredRules = useMemo(() => {
|
|
||||||
if (!debouncedSearchQuery) return rules;
|
|
||||||
const query = debouncedSearchQuery.toLowerCase();
|
|
||||||
return rules.filter(
|
|
||||||
(rule) =>
|
|
||||||
rule.name.toLowerCase().includes(query) || rule.description?.toLowerCase().includes(query),
|
|
||||||
);
|
|
||||||
}, [rules, debouncedSearchQuery]);
|
|
||||||
|
|
||||||
const handleLoad = useCallback(
|
|
||||||
(rule: DataRule) => {
|
|
||||||
onLoad(rule.fields);
|
|
||||||
ruleStorage.recordUse(rule.id);
|
|
||||||
loadRules();
|
|
||||||
toast.success(t('testDataGenerator_ruleLoaded', { name: rule.name }));
|
|
||||||
},
|
|
||||||
[onLoad, loadRules, t],
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleDelete = useCallback(() => {
|
|
||||||
if (!ruleToDelete) return;
|
|
||||||
ruleStorage.deleteRule(ruleToDelete.id);
|
|
||||||
loadRules();
|
|
||||||
setRuleToDelete(null);
|
|
||||||
toast.success(t('testDataGenerator_ruleDeleted'));
|
|
||||||
onRulesChanged?.();
|
|
||||||
}, [ruleToDelete, loadRules, t, onRulesChanged]);
|
|
||||||
|
|
||||||
const handleDuplicate = useCallback(
|
|
||||||
(id: string) => {
|
|
||||||
const result = ruleStorage.duplicate(id, t('testDataGenerator_ruleCopySuffix'));
|
|
||||||
if (result) {
|
|
||||||
loadRules();
|
|
||||||
toast.success(t('testDataGenerator_ruleDuplicated'));
|
|
||||||
onRulesChanged?.();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[loadRules, t, onRulesChanged],
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleEdit = useCallback(
|
|
||||||
(rule: DataRule) => {
|
|
||||||
onEdit?.(rule);
|
|
||||||
},
|
|
||||||
[onEdit],
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleExport = useCallback(() => {
|
|
||||||
try {
|
|
||||||
setIsExporting(true);
|
|
||||||
const json = ruleStorage.exportRules();
|
|
||||||
const blob = new Blob([json], { type: 'application/json' });
|
|
||||||
const url = URL.createObjectURL(blob);
|
|
||||||
try {
|
|
||||||
const link = document.createElement('a');
|
|
||||||
link.href = url;
|
|
||||||
link.download = 'test-data-rules.json';
|
|
||||||
document.body.appendChild(link);
|
|
||||||
link.click();
|
|
||||||
document.body.removeChild(link);
|
|
||||||
} finally {
|
|
||||||
URL.revokeObjectURL(url);
|
|
||||||
}
|
|
||||||
toast.success(t('testDataGenerator_exportSuccess'));
|
|
||||||
} catch (error) {
|
|
||||||
console.error('[RuleManager] 导出失败:', error);
|
|
||||||
toast.error(t('testDataGenerator_exportFailed'));
|
|
||||||
} finally {
|
|
||||||
setIsExporting(false);
|
|
||||||
}
|
|
||||||
}, [t]);
|
|
||||||
|
|
||||||
const handleImport = useCallback(() => {
|
|
||||||
const input = document.createElement('input');
|
|
||||||
input.type = 'file';
|
|
||||||
input.accept = '.json';
|
|
||||||
input.onchange = async (e) => {
|
|
||||||
try {
|
|
||||||
setIsImporting(true);
|
|
||||||
const file = (e.target as HTMLInputElement).files?.[0];
|
|
||||||
if (!file) return;
|
|
||||||
|
|
||||||
const text = await file.text();
|
|
||||||
const result = ruleStorage.importRules(text);
|
|
||||||
|
|
||||||
if (result.success > 0) {
|
|
||||||
toast.success(t('testDataGenerator_importSuccess', { count: result.success }));
|
|
||||||
}
|
|
||||||
|
|
||||||
if (result.failed > 0) {
|
|
||||||
toast.error(t('testDataGenerator_importFailed', { count: result.failed }));
|
|
||||||
console.warn('[RuleManager] 导入警告:', result.errors);
|
|
||||||
}
|
|
||||||
|
|
||||||
loadRules();
|
|
||||||
onRulesChanged?.();
|
|
||||||
} catch (error) {
|
|
||||||
console.error('[RuleManager] 导入失败:', error);
|
|
||||||
toast.error(t('testDataGenerator_importFailed'));
|
|
||||||
} finally {
|
|
||||||
setIsImporting(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
input.click();
|
|
||||||
}, [loadRules, t, onRulesChanged]);
|
|
||||||
|
|
||||||
const formatDate = useCallback(
|
|
||||||
(timestamp: number) => {
|
|
||||||
return new Date(timestamp).toLocaleDateString(i18n.language || 'zh-CN', {
|
|
||||||
month: 'short',
|
|
||||||
day: 'numeric',
|
|
||||||
hour: '2-digit',
|
|
||||||
minute: '2-digit',
|
|
||||||
});
|
|
||||||
},
|
|
||||||
[i18n.language],
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-4">
|
|
||||||
{/* 删除确认对话框 */}
|
|
||||||
<Dialog open={!!ruleToDelete} onOpenChange={() => setRuleToDelete(null)}>
|
|
||||||
<DialogContent
|
|
||||||
showCloseButton={false}
|
|
||||||
className="w-[calc(100vw-4rem)] max-w-[420px] p-0 pt-6 flex flex-col"
|
|
||||||
>
|
|
||||||
<div className="flex-1 overflow-y-auto px-6 pb-4">
|
|
||||||
<p className="text-sm text-muted-foreground">
|
|
||||||
{t('testDataGenerator_confirmDeleteDescription', { name: ruleToDelete?.name ?? '' })}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-end gap-2 px-6 py-2 border-t shrink-0">
|
|
||||||
<Button variant="ghost" size="sm" onClick={() => setRuleToDelete(null)}>
|
|
||||||
{t('testDataGenerator_cancel')}
|
|
||||||
</Button>
|
|
||||||
<Button variant="destructive" size="sm" onClick={handleDelete}>
|
|
||||||
{t('testDataGenerator_confirm')}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
|
|
||||||
{/* 工具栏 */}
|
|
||||||
<div className="flex items-center gap-2 flex-wrap">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={handleImport}
|
|
||||||
disabled={isImporting}
|
|
||||||
className="h-8 gap-1.5"
|
|
||||||
>
|
|
||||||
{isImporting ? (
|
|
||||||
<Loader2 className="h-4 w-4 animate-spin" />
|
|
||||||
) : (
|
|
||||||
<Upload className="h-4 w-4" />
|
|
||||||
)}
|
|
||||||
{t('testDataGenerator_import')}
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={handleExport}
|
|
||||||
disabled={isExporting || rules.length === 0}
|
|
||||||
className="h-8 gap-1.5"
|
|
||||||
>
|
|
||||||
{isExporting ? (
|
|
||||||
<Loader2 className="h-4 w-4 animate-spin" />
|
|
||||||
) : (
|
|
||||||
<Download className="h-4 w-4" />
|
|
||||||
)}
|
|
||||||
{t('testDataGenerator_export')}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 搜索框 */}
|
|
||||||
<div className="relative">
|
|
||||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
|
||||||
<Input
|
|
||||||
value={searchQuery}
|
|
||||||
onChange={(e) => setSearchQuery(e.target.value.slice(0, 20))}
|
|
||||||
placeholder={t('testDataGenerator_searchRules')}
|
|
||||||
className="pl-9 pr-24 h-9"
|
|
||||||
maxLength={20}
|
|
||||||
/>
|
|
||||||
<span className="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-muted-foreground pointer-events-none">
|
|
||||||
{t('testDataGenerator_ruleCount', { count: rules.length, max: 20 })}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 规则列表 */}
|
|
||||||
<div className="space-y-2 max-h-64 overflow-y-auto">
|
|
||||||
{filteredRules.length === 0 ? (
|
|
||||||
<div className="text-center py-6">
|
|
||||||
<Tag className="h-8 w-8 text-muted-foreground/40 mx-auto mb-2" />
|
|
||||||
<p className="text-sm text-muted-foreground">
|
|
||||||
{debouncedSearchQuery
|
|
||||||
? t('testDataGenerator_noSearchResults')
|
|
||||||
: t('testDataGenerator_noRules')}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
filteredRules.map((rule) => (
|
|
||||||
<div
|
|
||||||
key={rule.id}
|
|
||||||
className="flex items-center gap-3 p-2 rounded-lg border hover:bg-muted/30 transition-colors"
|
|
||||||
>
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<span className="font-medium text-sm text-foreground truncate">{rule.name}</span>
|
|
||||||
<span className="text-xs text-muted-foreground">
|
|
||||||
{rule.fields.length} {t('testDataGenerator_fields')}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
{rule.description && (
|
|
||||||
<p className="text-xs text-muted-foreground truncate mt-0.5">
|
|
||||||
{rule.description}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
<div className="flex items-center gap-3 mt-1 text-xs text-muted-foreground">
|
|
||||||
<span className="flex items-center gap-1">
|
|
||||||
<Clock className="h-3 w-3" />
|
|
||||||
{formatDate(rule.updatedAt)}
|
|
||||||
</span>
|
|
||||||
<span>{t('testDataGenerator_usedTimes', { count: rule.useCount })}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center gap-1">
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="icon"
|
|
||||||
className="h-7 w-7"
|
|
||||||
onClick={() => handleLoad(rule)}
|
|
||||||
title={t('testDataGenerator_load')}
|
|
||||||
>
|
|
||||||
<FolderOpen className="h-3.5 w-3.5" />
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="icon"
|
|
||||||
className="h-7 w-7"
|
|
||||||
onClick={() => handleEdit(rule)}
|
|
||||||
title={t('testDataGenerator_edit')}
|
|
||||||
>
|
|
||||||
<Edit className="h-3.5 w-3.5" />
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="icon"
|
|
||||||
className="h-7 w-7"
|
|
||||||
onClick={() => handleDuplicate(rule.id)}
|
|
||||||
title={t('testDataGenerator_duplicate')}
|
|
||||||
>
|
|
||||||
<Copy className="h-3.5 w-3.5" />
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="icon"
|
|
||||||
className="h-7 w-7 text-destructive hover:text-destructive"
|
|
||||||
onClick={() => setRuleToDelete(rule)}
|
|
||||||
title={t('testDataGenerator_delete')}
|
|
||||||
>
|
|
||||||
<Trash2 className="h-3.5 w-3.5" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,189 +0,0 @@
|
|||||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
|
||||||
import { render, screen } from '@testing-library/react';
|
|
||||||
import userEvent from '@testing-library/user-event';
|
|
||||||
|
|
||||||
// Mock dependencies
|
|
||||||
vi.mock('@/utils/ruleStorage', () => ({
|
|
||||||
getAll: vi.fn(() => []),
|
|
||||||
save: vi.fn(),
|
|
||||||
deleteRule: vi.fn(),
|
|
||||||
duplicate: vi.fn(),
|
|
||||||
recordUse: vi.fn(),
|
|
||||||
search: vi.fn(() => []),
|
|
||||||
exportRules: vi.fn(() => '[]'),
|
|
||||||
importRules: vi.fn(() => ({ success: 0, failed: 0, errors: [] })),
|
|
||||||
}));
|
|
||||||
|
|
||||||
vi.mock('sonner', () => ({
|
|
||||||
toast: {
|
|
||||||
success: vi.fn(),
|
|
||||||
error: vi.fn(),
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
|
|
||||||
import RuleManager from '../RuleManager';
|
|
||||||
import * as ruleStorage from '@/utils/ruleStorage';
|
|
||||||
import { toast } from 'sonner';
|
|
||||||
import type { DataRule, FieldConfig } from '@/types/testDataGenerator';
|
|
||||||
|
|
||||||
const mockedRuleStorage = vi.mocked(ruleStorage);
|
|
||||||
const mockedToast = vi.mocked(toast);
|
|
||||||
|
|
||||||
const mockFields: FieldConfig[] = [
|
|
||||||
{
|
|
||||||
id: 'field-1',
|
|
||||||
name: 'name',
|
|
||||||
generatorId: 'string',
|
|
||||||
params: {},
|
|
||||||
required: true,
|
|
||||||
nullRate: 0,
|
|
||||||
unique: false,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const mockRule: DataRule = {
|
|
||||||
id: 'rule-1',
|
|
||||||
name: 'Test Rule',
|
|
||||||
description: 'Test description',
|
|
||||||
fields: mockFields,
|
|
||||||
createdAt: Date.now(),
|
|
||||||
updatedAt: Date.now(),
|
|
||||||
useCount: 0,
|
|
||||||
};
|
|
||||||
|
|
||||||
describe('RuleManager', () => {
|
|
||||||
const defaultProps = {
|
|
||||||
onLoad: vi.fn(),
|
|
||||||
};
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
vi.clearAllMocks();
|
|
||||||
mockedRuleStorage.getAll.mockReturnValue([]);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should render empty state when no rules', () => {
|
|
||||||
render(<RuleManager {...defaultProps} />);
|
|
||||||
|
|
||||||
expect(screen.getByText('暂无保存的规则')).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should render rule list when rules exist', () => {
|
|
||||||
mockedRuleStorage.getAll.mockReturnValue([mockRule]);
|
|
||||||
|
|
||||||
render(<RuleManager {...defaultProps} />);
|
|
||||||
|
|
||||||
expect(screen.getByText('Test Rule')).toBeInTheDocument();
|
|
||||||
expect(screen.getByText('Test description')).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should load rule when load button clicked', async () => {
|
|
||||||
const user = userEvent.setup();
|
|
||||||
mockedRuleStorage.getAll.mockReturnValue([mockRule]);
|
|
||||||
|
|
||||||
render(<RuleManager {...defaultProps} />);
|
|
||||||
|
|
||||||
const loadButton = screen.getByTitle('加载');
|
|
||||||
await user.click(loadButton);
|
|
||||||
|
|
||||||
expect(defaultProps.onLoad).toHaveBeenCalledWith(mockFields);
|
|
||||||
expect(mockedRuleStorage.recordUse).toHaveBeenCalledWith('rule-1');
|
|
||||||
// Note: t() mock doesn't handle placeholders, so we just check it was called
|
|
||||||
expect(mockedToast.success).toHaveBeenCalled();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should show delete confirmation dialog', async () => {
|
|
||||||
const user = userEvent.setup();
|
|
||||||
mockedRuleStorage.getAll.mockReturnValue([mockRule]);
|
|
||||||
|
|
||||||
render(<RuleManager {...defaultProps} />);
|
|
||||||
|
|
||||||
const deleteButton = screen.getByTitle('删除');
|
|
||||||
await user.click(deleteButton);
|
|
||||||
|
|
||||||
expect(screen.getByText(/确定要删除规则/)).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should delete rule after confirmation', async () => {
|
|
||||||
const user = userEvent.setup();
|
|
||||||
mockedRuleStorage.getAll.mockReturnValue([mockRule]);
|
|
||||||
|
|
||||||
render(<RuleManager {...defaultProps} />);
|
|
||||||
|
|
||||||
// Open delete dialog
|
|
||||||
await user.click(screen.getByTitle('删除'));
|
|
||||||
|
|
||||||
// Confirm delete
|
|
||||||
await user.click(screen.getByText('确认'));
|
|
||||||
|
|
||||||
expect(mockedRuleStorage.deleteRule).toHaveBeenCalledWith('rule-1');
|
|
||||||
expect(mockedToast.success).toHaveBeenCalledWith('规则已删除');
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should duplicate rule when duplicate button clicked', async () => {
|
|
||||||
const user = userEvent.setup();
|
|
||||||
mockedRuleStorage.getAll.mockReturnValue([mockRule]);
|
|
||||||
mockedRuleStorage.duplicate.mockReturnValue({
|
|
||||||
...mockRule,
|
|
||||||
id: 'rule-2',
|
|
||||||
name: 'Test Rule（副本）',
|
|
||||||
});
|
|
||||||
|
|
||||||
render(<RuleManager {...defaultProps} />);
|
|
||||||
|
|
||||||
await user.click(screen.getByTitle('复制'));
|
|
||||||
|
|
||||||
expect(mockedRuleStorage.duplicate).toHaveBeenCalledWith('rule-1', '（副本）');
|
|
||||||
expect(mockedToast.success).toHaveBeenCalled();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should update search input value', async () => {
|
|
||||||
const rules = [mockRule, { ...mockRule, id: 'rule-2', name: 'Another Rule' }];
|
|
||||||
mockedRuleStorage.getAll.mockReturnValue(rules);
|
|
||||||
|
|
||||||
render(<RuleManager {...defaultProps} />);
|
|
||||||
|
|
||||||
// Initially both rules should be visible
|
|
||||||
expect(screen.getByText('Test Rule')).toBeInTheDocument();
|
|
||||||
expect(screen.getByText('Another Rule')).toBeInTheDocument();
|
|
||||||
|
|
||||||
// Verify search input exists and is interactive
|
|
||||||
const searchInput = screen.getByPlaceholderText('搜索规则...');
|
|
||||||
expect(searchInput).toBeInTheDocument();
|
|
||||||
expect(searchInput).toHaveValue('');
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should call exportRules when export button clicked', async () => {
|
|
||||||
const user = userEvent.setup();
|
|
||||||
mockedRuleStorage.getAll.mockReturnValue([mockRule]);
|
|
||||||
|
|
||||||
render(<RuleManager {...defaultProps} />);
|
|
||||||
|
|
||||||
// Mock URL methods and body methods after render to avoid interfering with createRoot
|
|
||||||
const mockCreateObjectURL = vi.fn(() => 'blob:mock');
|
|
||||||
const mockRevokeObjectURL = vi.fn();
|
|
||||||
vi.spyOn(URL, 'createObjectURL').mockImplementation(mockCreateObjectURL);
|
|
||||||
vi.spyOn(URL, 'revokeObjectURL').mockImplementation(mockRevokeObjectURL);
|
|
||||||
vi.spyOn(document.body, 'appendChild').mockImplementation(() => null as unknown as Node);
|
|
||||||
vi.spyOn(document.body, 'removeChild').mockImplementation(() => null as unknown as Node);
|
|
||||||
|
|
||||||
const buttons = screen.getAllByRole('button');
|
|
||||||
const exportButton = buttons.find((btn) => btn.textContent?.includes('导出'));
|
|
||||||
expect(exportButton).toBeDefined();
|
|
||||||
|
|
||||||
await user.click(exportButton!);
|
|
||||||
|
|
||||||
expect(mockedRuleStorage.exportRules).toHaveBeenCalled();
|
|
||||||
expect(mockCreateObjectURL).toHaveBeenCalled();
|
|
||||||
|
|
||||||
vi.restoreAllMocks();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should show field count for each rule', () => {
|
|
||||||
mockedRuleStorage.getAll.mockReturnValue([mockRule]);
|
|
||||||
|
|
||||||
render(<RuleManager {...defaultProps} />);
|
|
||||||
|
|
||||||
// The component shows "{count} 字段" format
|
|
||||||
expect(screen.getByText(/字段/)).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,148 +0,0 @@
|
|||||||
/**
|
|
||||||
* 数据生成器 Hook
|
|
||||||
* 管理 Web Worker 的创建、销毁和通信
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { useState, useRef, useCallback, useEffect } from 'react';
|
|
||||||
import type {
|
|
||||||
FieldConfig,
|
|
||||||
GenerateResult,
|
|
||||||
GenerateProgress,
|
|
||||||
WorkerMessage,
|
|
||||||
} from '@/types/testDataGenerator';
|
|
||||||
|
|
||||||
export interface UseGeneratorReturn {
|
|
||||||
/** 是否正在生成 */
|
|
||||||
isGenerating: boolean;
|
|
||||||
/** 生成进度 */
|
|
||||||
progress: GenerateProgress | null;
|
|
||||||
/** 生成结果 */
|
|
||||||
result: GenerateResult | null;
|
|
||||||
/** 错误信息 */
|
|
||||||
error: string | null;
|
|
||||||
/** 开始生成 */
|
|
||||||
generate: (fields: FieldConfig[], count: number, csvMode?: boolean) => void;
|
|
||||||
/** 取消生成 */
|
|
||||||
cancel: () => void;
|
|
||||||
/** 清除结果 */
|
|
||||||
clearResult: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function useGenerator(): UseGeneratorReturn {
|
|
||||||
const [isGenerating, setIsGenerating] = useState(false);
|
|
||||||
const [progress, setProgress] = useState<GenerateProgress | null>(null);
|
|
||||||
const [result, setResult] = useState<GenerateResult | null>(null);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
|
|
||||||
const workerRef = useRef<Worker | null>(null);
|
|
||||||
|
|
||||||
// 清理 Worker
|
|
||||||
useEffect(() => {
|
|
||||||
return () => {
|
|
||||||
if (workerRef.current) {
|
|
||||||
workerRef.current.terminate();
|
|
||||||
workerRef.current = null;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 创建或复用 Worker
|
|
||||||
*/
|
|
||||||
const getWorker = useCallback((): Worker => {
|
|
||||||
if (workerRef.current) {
|
|
||||||
return workerRef.current;
|
|
||||||
}
|
|
||||||
|
|
||||||
const worker = new Worker(new URL('@/workers/generator.worker.ts', import.meta.url), {
|
|
||||||
type: 'module',
|
|
||||||
});
|
|
||||||
|
|
||||||
worker.onmessage = (e: MessageEvent<WorkerMessage>) => {
|
|
||||||
const data = e.data;
|
|
||||||
const { type } = data;
|
|
||||||
|
|
||||||
switch (type) {
|
|
||||||
case 'progress':
|
|
||||||
setProgress(data.payload as GenerateProgress);
|
|
||||||
break;
|
|
||||||
case 'complete':
|
|
||||||
setIsGenerating(false);
|
|
||||||
setResult(data.payload as GenerateResult);
|
|
||||||
setProgress(null);
|
|
||||||
break;
|
|
||||||
case 'error':
|
|
||||||
setIsGenerating(false);
|
|
||||||
setError((data.payload as { error: string }).error);
|
|
||||||
setProgress(null);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
worker.onerror = (err) => {
|
|
||||||
console.error('[useGenerator] Worker 错误:', err);
|
|
||||||
setIsGenerating(false);
|
|
||||||
setError(err.message || 'Worker 运行错误');
|
|
||||||
setProgress(null);
|
|
||||||
// Worker 出错后销毁，下次重新创建
|
|
||||||
workerRef.current?.terminate();
|
|
||||||
workerRef.current = null;
|
|
||||||
};
|
|
||||||
|
|
||||||
workerRef.current = worker;
|
|
||||||
return worker;
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 开始生成
|
|
||||||
*/
|
|
||||||
const generate = useCallback(
|
|
||||||
(fields: FieldConfig[], count: number, csvMode = false) => {
|
|
||||||
if (isGenerating) return;
|
|
||||||
|
|
||||||
setIsGenerating(true);
|
|
||||||
setProgress(null);
|
|
||||||
setResult(null);
|
|
||||||
setError(null);
|
|
||||||
|
|
||||||
const worker = getWorker();
|
|
||||||
const message: WorkerMessage = {
|
|
||||||
type: 'start',
|
|
||||||
payload: { fields, count, csvMode },
|
|
||||||
};
|
|
||||||
worker.postMessage(message);
|
|
||||||
},
|
|
||||||
[isGenerating, getWorker],
|
|
||||||
);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 取消生成
|
|
||||||
*/
|
|
||||||
const cancel = useCallback(() => {
|
|
||||||
if (workerRef.current && isGenerating) {
|
|
||||||
const message: WorkerMessage = { type: 'cancel' };
|
|
||||||
workerRef.current.postMessage(message);
|
|
||||||
setIsGenerating(false);
|
|
||||||
setProgress(null);
|
|
||||||
}
|
|
||||||
}, [isGenerating]);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 清除结果
|
|
||||||
*/
|
|
||||||
const clearResult = useCallback(() => {
|
|
||||||
setResult(null);
|
|
||||||
setProgress(null);
|
|
||||||
setError(null);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return {
|
|
||||||
isGenerating,
|
|
||||||
progress,
|
|
||||||
result,
|
|
||||||
error,
|
|
||||||
generate,
|
|
||||||
cancel,
|
|
||||||
clearResult,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@@ -1,306 +0,0 @@
|
|||||||
/**
|
|
||||||
* 测试数据生成器主页面
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { useState, useCallback, useRef, useEffect } from 'react';
|
|
||||||
import { Settings, Database, Tag } from 'lucide-react';
|
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
import { cn } from '@/lib/utils';
|
|
||||||
import { useGenerator } from './hooks/useGenerator';
|
|
||||||
import type { FieldConfig, GenerateResult, DataRule } from '@/types/testDataGenerator';
|
|
||||||
import { Dialog, DialogContent } from '@/components/ui/dialog';
|
|
||||||
import { Button } from '@/components/ui/button';
|
|
||||||
import { toast } from 'sonner';
|
|
||||||
|
|
||||||
// 生成唯一 ID 的辅助函数
|
|
||||||
function generateId(): string {
|
|
||||||
return `field_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
import FieldList, { MAX_FIELDS } from './components/FieldList';
|
|
||||||
import FieldEditor from './components/FieldEditor';
|
|
||||||
import GenerateOptions from './components/GenerateOptions';
|
|
||||||
import GenerateButton from './components/GenerateButton';
|
|
||||||
import DataPreview from './components/DataPreview';
|
|
||||||
import ResultPanel from './components/ResultPanel';
|
|
||||||
import ExportPanel from './components/ExportPanel';
|
|
||||||
import RuleManager from './components/RuleManager';
|
|
||||||
|
|
||||||
type TabType = 'fields' | 'rules';
|
|
||||||
|
|
||||||
export default function TestDataGeneratorPage() {
|
|
||||||
const { t } = useI18n('testDataGenerator');
|
|
||||||
const { isGenerating, progress, result, error, generate, cancel, clearResult } = useGenerator();
|
|
||||||
|
|
||||||
// 字段配置
|
|
||||||
const [fields, setFields] = useState<FieldConfig[]>([]);
|
|
||||||
const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
|
|
||||||
const [isEditorOpen, setIsEditorOpen] = useState(false);
|
|
||||||
const [editingRule, setEditingRule] = useState<DataRule | null>(null);
|
|
||||||
|
|
||||||
// 生成选项
|
|
||||||
const [count, setCount] = useState(100);
|
|
||||||
const [format, setFormat] = useState<'json' | 'csv'>('json');
|
|
||||||
|
|
||||||
// 当前标签页
|
|
||||||
const [activeTab, setActiveTab] = useState<TabType>('fields');
|
|
||||||
|
|
||||||
// 生成完成时显示 toast 提示（避免重复触发）
|
|
||||||
const lastToastResultRef = useRef<GenerateResult | null>(null);
|
|
||||||
|
|
||||||
// 生成完成时显示 toast 提示（避免重复触发）
|
|
||||||
useEffect(() => {
|
|
||||||
if (result?.success && result.stats && result !== lastToastResultRef.current) {
|
|
||||||
lastToastResultRef.current = result;
|
|
||||||
toast.success(t('testDataGenerator_generateSuccess'), {
|
|
||||||
description: `${result.stats.total} ${t('testDataGenerator_records')}`,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}, [result, t]);
|
|
||||||
|
|
||||||
// 添加新字段
|
|
||||||
const handleAddField = useCallback(() => {
|
|
||||||
setFields((prev) => {
|
|
||||||
if (prev.length >= MAX_FIELDS) return prev;
|
|
||||||
const newField: FieldConfig = {
|
|
||||||
id: generateId(),
|
|
||||||
name: `field${prev.length + 1}`,
|
|
||||||
generatorId: 'chineseName',
|
|
||||||
params: {},
|
|
||||||
required: true,
|
|
||||||
nullRate: 0,
|
|
||||||
unique: false,
|
|
||||||
};
|
|
||||||
setSelectedIndex(prev.length);
|
|
||||||
return [...prev, newField];
|
|
||||||
});
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// 更新字段
|
|
||||||
const handleUpdateField = useCallback((index: number, field: FieldConfig) => {
|
|
||||||
setFields((prev) => {
|
|
||||||
const newFields = [...prev];
|
|
||||||
newFields[index] = field;
|
|
||||||
return newFields;
|
|
||||||
});
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// 删除字段
|
|
||||||
const handleRemoveField = useCallback((index: number) => {
|
|
||||||
setFields((prev) => prev.filter((_, i) => i !== index));
|
|
||||||
setSelectedIndex((prev) => {
|
|
||||||
if (prev === index) return null;
|
|
||||||
if (prev !== null && prev > index) return prev - 1;
|
|
||||||
return prev;
|
|
||||||
});
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// 拖拽排序
|
|
||||||
const handleReorder = useCallback((oldIndex: number, newIndex: number) => {
|
|
||||||
setFields((prev) => {
|
|
||||||
const newFields = [...prev];
|
|
||||||
const [moved] = newFields.splice(oldIndex, 1);
|
|
||||||
newFields.splice(newIndex, 0, moved);
|
|
||||||
return newFields;
|
|
||||||
});
|
|
||||||
setSelectedIndex((prev) => {
|
|
||||||
if (prev === oldIndex) return newIndex;
|
|
||||||
if (prev !== null) {
|
|
||||||
if (oldIndex < prev && newIndex >= prev) return prev - 1;
|
|
||||||
if (oldIndex > prev && newIndex <= prev) return prev + 1;
|
|
||||||
}
|
|
||||||
return prev;
|
|
||||||
});
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// 加载规则
|
|
||||||
const handleLoadRule = useCallback(
|
|
||||||
(loadedFields: FieldConfig[]) => {
|
|
||||||
setFields(loadedFields);
|
|
||||||
setSelectedIndex(null);
|
|
||||||
setEditingRule(null);
|
|
||||||
clearResult();
|
|
||||||
},
|
|
||||||
[clearResult],
|
|
||||||
);
|
|
||||||
|
|
||||||
// 编辑规则
|
|
||||||
const handleEditRule = useCallback(
|
|
||||||
(rule: DataRule) => {
|
|
||||||
setFields(rule.fields);
|
|
||||||
setSelectedIndex(null);
|
|
||||||
setEditingRule(rule);
|
|
||||||
setActiveTab('fields');
|
|
||||||
clearResult();
|
|
||||||
toast.success(t('testDataGenerator_editingRule', { name: rule.name }));
|
|
||||||
},
|
|
||||||
[clearResult, t],
|
|
||||||
);
|
|
||||||
|
|
||||||
// 保存规则成功后清除编辑状态
|
|
||||||
const handleRuleSaved = useCallback(() => {
|
|
||||||
setEditingRule(null);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// 开始生成
|
|
||||||
const handleGenerate = useCallback(() => {
|
|
||||||
if (fields.length === 0) return;
|
|
||||||
generate(fields, count, format === 'csv');
|
|
||||||
}, [fields, count, format, generate]);
|
|
||||||
|
|
||||||
// 获取选中的字段（-1 或 null 表示未选中）
|
|
||||||
const selectedField = selectedIndex !== null && selectedIndex >= 0 ? fields[selectedIndex] : null;
|
|
||||||
|
|
||||||
// 打开字段编辑器
|
|
||||||
const handleOpenEditor = useCallback((index: number) => {
|
|
||||||
setSelectedIndex(index);
|
|
||||||
setIsEditorOpen(true);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="min-h-screen bg-background text-foreground antialiased selection:bg-primary/20">
|
|
||||||
<div className="max-w-7xl mx-auto p-4 sm:p-6">
|
|
||||||
{/* 主要内容区域 - 左右分栏 */}
|
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-5 gap-4 items-start">
|
|
||||||
{/* 左侧面板 - 字段配置 */}
|
|
||||||
<div className="lg:col-span-3 space-y-4">
|
|
||||||
{/* 标签页切换 */}
|
|
||||||
<div className="flex gap-1 p-1 bg-muted rounded-lg">
|
|
||||||
<button
|
|
||||||
onClick={() => setActiveTab('fields')}
|
|
||||||
className={cn(
|
|
||||||
'flex-1 flex items-center justify-center gap-2 py-2 px-3 text-sm font-medium rounded-md transition-colors',
|
|
||||||
activeTab === 'fields'
|
|
||||||
? 'bg-background text-foreground shadow-sm'
|
|
||||||
: 'text-muted-foreground hover:text-foreground',
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<Settings className="h-4 w-4" />
|
|
||||||
{t('testDataGenerator_fieldConfig')}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => setActiveTab('rules')}
|
|
||||||
className={cn(
|
|
||||||
'flex-1 flex items-center justify-center gap-2 py-2 px-3 text-sm font-medium rounded-md transition-colors',
|
|
||||||
activeTab === 'rules'
|
|
||||||
? 'bg-background text-foreground shadow-sm'
|
|
||||||
: 'text-muted-foreground hover:text-foreground',
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<Tag className="h-4 w-4" />
|
|
||||||
{t('testDataGenerator_ruleManagement')}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 字段配置标签页 */}
|
|
||||||
{activeTab === 'fields' && (
|
|
||||||
<div className="p-4 rounded-xl border border-border bg-card shadow-sm">
|
|
||||||
<FieldList
|
|
||||||
fields={fields}
|
|
||||||
onUpdate={handleUpdateField}
|
|
||||||
onRemove={handleRemoveField}
|
|
||||||
onAdd={handleAddField}
|
|
||||||
onEdit={handleOpenEditor}
|
|
||||||
onReorder={handleReorder}
|
|
||||||
editingRule={editingRule}
|
|
||||||
onRuleSaved={handleRuleSaved}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 规则管理标签页 */}
|
|
||||||
{activeTab === 'rules' && (
|
|
||||||
<div className="p-4 rounded-xl border border-border bg-card shadow-sm">
|
|
||||||
<RuleManager onLoad={handleLoadRule} onEdit={handleEditRule} />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 生成选项 */}
|
|
||||||
<div className="p-4 rounded-xl border border-border bg-card shadow-sm">
|
|
||||||
<GenerateOptions
|
|
||||||
count={count}
|
|
||||||
onCountChange={setCount}
|
|
||||||
format={format}
|
|
||||||
onFormatChange={setFormat}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 生成按钮 */}
|
|
||||||
<div className="p-4 rounded-xl border border-border bg-card shadow-sm">
|
|
||||||
<GenerateButton
|
|
||||||
onClick={handleGenerate}
|
|
||||||
onCancel={cancel}
|
|
||||||
isGenerating={isGenerating}
|
|
||||||
progress={progress}
|
|
||||||
disabled={fields.length === 0}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 右侧面板 - 数据预览和结果 */}
|
|
||||||
<div className="lg:col-span-2 space-y-4">
|
|
||||||
{/* 结果状态 */}
|
|
||||||
{/* 仅在失败或有警告时显示结果面板 */}
|
|
||||||
{((result && !result.success) ||
|
|
||||||
(result?.warnings && result.warnings.length > 0) ||
|
|
||||||
error) && (
|
|
||||||
<div className="p-4 rounded-xl border border-border bg-card shadow-sm">
|
|
||||||
{error ? (
|
|
||||||
<div className="flex items-center gap-2 text-destructive">
|
|
||||||
<span className="text-sm">{error}</span>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<ResultPanel result={result} />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 数据预览 */}
|
|
||||||
<div className="p-4 rounded-xl border border-border bg-card shadow-sm">
|
|
||||||
<h3 className="text-sm font-medium text-foreground mb-3 flex items-center gap-2">
|
|
||||||
<Database className="h-4 w-4" />
|
|
||||||
{t('testDataGenerator_dataPreview')}
|
|
||||||
</h3>
|
|
||||||
<div className="h-[280px]">
|
|
||||||
<DataPreview fields={fields} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 导出面板 */}
|
|
||||||
{result?.data && result.data.length > 0 && (
|
|
||||||
<div className="p-4 rounded-xl border border-border bg-card shadow-sm">
|
|
||||||
<ExportPanel result={result} />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 字段编辑弹窗 */}
|
|
||||||
<Dialog open={isEditorOpen} onOpenChange={setIsEditorOpen}>
|
|
||||||
<DialogContent
|
|
||||||
showCloseButton={false}
|
|
||||||
className="w-[calc(100vw-2rem)] max-w-[520px] max-h-[calc(100vh-2rem)] p-0 pt-6 flex flex-col"
|
|
||||||
>
|
|
||||||
<div className="flex-1 overflow-y-auto px-6 pb-4">
|
|
||||||
{selectedField && selectedIndex !== null && (
|
|
||||||
<FieldEditor
|
|
||||||
field={selectedField}
|
|
||||||
onChange={(updatedField) => handleUpdateField(selectedIndex, updatedField)}
|
|
||||||
allFieldNames={fields.map((f) => f.name)}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-end gap-2 px-6 py-2 border-t shrink-0">
|
|
||||||
<Button variant="ghost" size="sm" onClick={() => setIsEditorOpen(false)}>
|
|
||||||
{t('testDataGenerator_cancel')}
|
|
||||||
</Button>
|
|
||||||
<Button size="sm" onClick={() => setIsEditorOpen(false)}>
|
|
||||||
{t('testDataGenerator_done')}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
Vendored
+1
-2
@@ -10,8 +10,7 @@ export type PageType =
|
|||||||
| 'jwt' // JWT 解析工具
|
| 'jwt' // JWT 解析工具
|
||||||
| 'jsonDiff' // JSON 差异比较工具
|
| 'jsonDiff' // JSON 差异比较工具
|
||||||
| 'base64Converter' // Base64 转换器工具
|
| 'base64Converter' // Base64 转换器工具
|
||||||
| 'rightClickRestorer' // 右键菜单恢复工具
|
| 'rightClickRestorer'; // 右键菜单恢复工具
|
||||||
| 'testDataGenerator'; // 测试数据生成器工具
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* JSON 工具页面子模式类型定义
|
* JSON 工具页面子模式类型定义
|
||||||
|
|||||||
@@ -1,178 +0,0 @@
|
|||||||
/**
|
|
||||||
* 测试数据生成器类型定义
|
|
||||||
*/
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 字段配置
|
|
||||||
*/
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
@@ -1,133 +0,0 @@
|
|||||||
/**
|
|
||||||
* 数据导出工具
|
|
||||||
* 实现 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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,339 +0,0 @@
|
|||||||
/**
|
|
||||||
* 规则存储工具
|
|
||||||
* 实现测试数据生成器规则的持久化存储和管理
|
|
||||||
*/
|
|
||||||
|
|
||||||
import type { DataRule, FieldConfig } from '@/types/testDataGenerator';
|
|
||||||
|
|
||||||
/** 存储键名 */
|
|
||||||
const STORAGE_KEY = 'testDataGenerator_rules';
|
|
||||||
|
|
||||||
/** 最大规则数量 */
|
|
||||||
const MAX_RULES = 20;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 获取所有规则
|
|
||||||
*/
|
|
||||||
export function getAll(): DataRule[] {
|
|
||||||
try {
|
|
||||||
const data = localStorage.getItem(STORAGE_KEY);
|
|
||||||
if (!data) return [];
|
|
||||||
return JSON.parse(data) as DataRule[];
|
|
||||||
} catch (error) {
|
|
||||||
console.error('[ruleStorage] 获取规则列表失败:', error);
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 根据 ID 获取规则
|
|
||||||
*/
|
|
||||||
export function getById(id: string): DataRule | undefined {
|
|
||||||
const rules = getAll();
|
|
||||||
return rules.find((rule) => rule.id === id);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 根据名称获取规则
|
|
||||||
*/
|
|
||||||
export function getByName(name: string): DataRule | undefined {
|
|
||||||
const rules = getAll();
|
|
||||||
return rules.find((rule) => rule.name === name);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 获取规则数量
|
|
||||||
*/
|
|
||||||
export function getCount(): number {
|
|
||||||
return getAll().length;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 是否达到最大数量限制
|
|
||||||
*/
|
|
||||||
export function isMaxReached(): boolean {
|
|
||||||
return getCount() >= MAX_RULES;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 保存规则（新增或更新）
|
|
||||||
*/
|
|
||||||
export function save(
|
|
||||||
rule: Omit<DataRule, 'id' | 'createdAt' | 'updatedAt' | 'useCount'> & { id?: string },
|
|
||||||
): DataRule | null {
|
|
||||||
const rules = getAll();
|
|
||||||
const now = Date.now();
|
|
||||||
|
|
||||||
// 新增规则
|
|
||||||
if (!rule.id) {
|
|
||||||
if (isMaxReached()) {
|
|
||||||
console.warn('[ruleStorage] 规则数量已达上限');
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
const newRule: DataRule = {
|
|
||||||
...rule,
|
|
||||||
id: generateId(),
|
|
||||||
createdAt: now,
|
|
||||||
updatedAt: now,
|
|
||||||
useCount: 0,
|
|
||||||
};
|
|
||||||
rules.unshift(newRule);
|
|
||||||
setAll(rules);
|
|
||||||
return newRule;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 更新规则
|
|
||||||
const index = rules.findIndex((r) => r.id === rule.id);
|
|
||||||
if (index === -1) {
|
|
||||||
console.warn('[ruleStorage] 规则不存在:', rule.id);
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
const updatedRule: DataRule = {
|
|
||||||
...rules[index],
|
|
||||||
...rule,
|
|
||||||
id: rule.id,
|
|
||||||
updatedAt: now,
|
|
||||||
};
|
|
||||||
rules[index] = updatedRule;
|
|
||||||
setAll(rules);
|
|
||||||
return updatedRule;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 更新规则
|
|
||||||
*/
|
|
||||||
export function update(id: string, updates: Partial<DataRule>): DataRule | null {
|
|
||||||
const rules = getAll();
|
|
||||||
const index = rules.findIndex((r) => r.id === id);
|
|
||||||
if (index === -1) {
|
|
||||||
console.warn('[ruleStorage] 规则不存在:', id);
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
const updatedRule: DataRule = {
|
|
||||||
...rules[index],
|
|
||||||
...updates,
|
|
||||||
id: rules[index].id, // 确保 ID 不被覆盖
|
|
||||||
updatedAt: Date.now(),
|
|
||||||
};
|
|
||||||
rules[index] = updatedRule;
|
|
||||||
setAll(rules);
|
|
||||||
return updatedRule;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 删除规则
|
|
||||||
*/
|
|
||||||
export function deleteRule(id: string): boolean {
|
|
||||||
const rules = getAll();
|
|
||||||
const index = rules.findIndex((r) => r.id === id);
|
|
||||||
if (index === -1) {
|
|
||||||
console.warn('[ruleStorage] 规则不存在:', id);
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
rules.splice(index, 1);
|
|
||||||
setAll(rules);
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 复制规则
|
|
||||||
* @param id 规则 ID
|
|
||||||
* @param copySuffix 复制后缀，默认为中文「（副本）」，可通过 i18n 传入
|
|
||||||
*/
|
|
||||||
export function duplicate(id: string, copySuffix = '（副本）'): DataRule | null {
|
|
||||||
const rule = getById(id);
|
|
||||||
if (!rule) {
|
|
||||||
console.warn('[ruleStorage] 规则不存在:', id);
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isMaxReached()) {
|
|
||||||
console.warn('[ruleStorage] 规则数量已达上限');
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
const now = Date.now();
|
|
||||||
const newRule: DataRule = {
|
|
||||||
...rule,
|
|
||||||
id: generateId(),
|
|
||||||
name: `${rule.name}${copySuffix}`,
|
|
||||||
createdAt: now,
|
|
||||||
updatedAt: now,
|
|
||||||
useCount: 0,
|
|
||||||
};
|
|
||||||
|
|
||||||
const rules = getAll();
|
|
||||||
rules.unshift(newRule);
|
|
||||||
setAll(rules);
|
|
||||||
return newRule;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 记录规则使用
|
|
||||||
*/
|
|
||||||
export function recordUse(id: string): void {
|
|
||||||
const rules = getAll();
|
|
||||||
const index = rules.findIndex((r) => r.id === id);
|
|
||||||
if (index === -1) return;
|
|
||||||
|
|
||||||
rules[index].useCount += 1;
|
|
||||||
rules[index].lastUsedAt = Date.now();
|
|
||||||
setAll(rules);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 搜索规则
|
|
||||||
*/
|
|
||||||
export function search(query: string): DataRule[] {
|
|
||||||
const rules = getAll();
|
|
||||||
const lowerQuery = query.toLowerCase();
|
|
||||||
return rules.filter(
|
|
||||||
(rule) =>
|
|
||||||
rule.name.toLowerCase().includes(lowerQuery) ||
|
|
||||||
rule.description?.toLowerCase().includes(lowerQuery),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 获取最近使用的规则
|
|
||||||
*/
|
|
||||||
export function getRecent(count = 5): DataRule[] {
|
|
||||||
const rules = getAll();
|
|
||||||
return [...rules]
|
|
||||||
.filter((rule) => rule.lastUsedAt)
|
|
||||||
.sort((a, b) => (b.lastUsedAt || 0) - (a.lastUsedAt || 0))
|
|
||||||
.slice(0, count);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 导出规则（JSON 字符串）
|
|
||||||
*/
|
|
||||||
export function exportRules(ids?: string[]): string {
|
|
||||||
const rules = getAll();
|
|
||||||
const exportData = ids ? rules.filter((r) => ids.includes(r.id)) : rules;
|
|
||||||
return JSON.stringify(exportData, null, 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 导入规则
|
|
||||||
*/
|
|
||||||
export function importRules(jsonString: string): {
|
|
||||||
success: number;
|
|
||||||
failed: number;
|
|
||||||
errors: string[];
|
|
||||||
} {
|
|
||||||
const result = { success: 0, failed: 0, errors: [] as string[] };
|
|
||||||
|
|
||||||
try {
|
|
||||||
const data = JSON.parse(jsonString);
|
|
||||||
if (!Array.isArray(data)) {
|
|
||||||
result.failed = 1;
|
|
||||||
result.errors.push('导入数据格式错误：不是数组');
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
|
|
||||||
for (const item of data) {
|
|
||||||
const validation = validateRule(item);
|
|
||||||
if (!validation.valid) {
|
|
||||||
result.failed++;
|
|
||||||
result.errors.push(`规则 "${item.name || '未知'}": ${validation.error}`);
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
const saved = save(item as Omit<DataRule, 'id' | 'createdAt' | 'updatedAt' | 'useCount'>);
|
|
||||||
if (saved) {
|
|
||||||
result.success++;
|
|
||||||
} else {
|
|
||||||
result.failed++;
|
|
||||||
result.errors.push(`规则 "${item.name}" 保存失败`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
result.failed = 1;
|
|
||||||
result.errors.push(`导入失败: ${error}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 清空所有规则
|
|
||||||
*/
|
|
||||||
export function clear(): void {
|
|
||||||
localStorage.removeItem(STORAGE_KEY);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 保存所有规则到存储
|
|
||||||
*/
|
|
||||||
function setAll(rules: DataRule[]): void {
|
|
||||||
try {
|
|
||||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(rules));
|
|
||||||
} catch (error) {
|
|
||||||
console.error('[ruleStorage] 保存规则失败:', error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 生成唯一 ID
|
|
||||||
*/
|
|
||||||
export function generateId(): string {
|
|
||||||
return `rule_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 验证规则格式
|
|
||||||
*/
|
|
||||||
function validateRule(rule: unknown): { valid: boolean; error?: string } {
|
|
||||||
if (!rule || typeof rule !== 'object') {
|
|
||||||
return { valid: false, error: '规则格式无效' };
|
|
||||||
}
|
|
||||||
|
|
||||||
const obj = rule as Record<string, unknown>;
|
|
||||||
|
|
||||||
if (!obj.name || typeof obj.name !== 'string') {
|
|
||||||
return { valid: false, error: '缺少规则名称' };
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!obj.fields || !Array.isArray(obj.fields)) {
|
|
||||||
return { valid: false, error: '缺少字段配置' };
|
|
||||||
}
|
|
||||||
|
|
||||||
for (const field of obj.fields) {
|
|
||||||
const fieldValidation = validateField(field);
|
|
||||||
if (!fieldValidation.valid) {
|
|
||||||
return {
|
|
||||||
valid: false,
|
|
||||||
error: `字段 "${(field as FieldConfig).name || '未知'}": ${fieldValidation.error}`,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return { valid: true };
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 验证字段配置
|
|
||||||
*/
|
|
||||||
function validateField(field: unknown): { valid: boolean; error?: string } {
|
|
||||||
if (!field || typeof field !== 'object') {
|
|
||||||
return { valid: false, error: '字段格式无效' };
|
|
||||||
}
|
|
||||||
|
|
||||||
const obj = field as Record<string, unknown>;
|
|
||||||
|
|
||||||
if (!obj.name || typeof obj.name !== 'string') {
|
|
||||||
return { valid: false, error: '缺少字段名称' };
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!obj.generatorId || typeof obj.generatorId !== 'string') {
|
|
||||||
return { valid: false, error: '缺少生成器 ID' };
|
|
||||||
}
|
|
||||||
|
|
||||||
if (typeof obj.required !== 'boolean') {
|
|
||||||
return { valid: false, error: '缺少必填标识' };
|
|
||||||
}
|
|
||||||
|
|
||||||
return { valid: true };
|
|
||||||
}
|
|
||||||
@@ -1,165 +0,0 @@
|
|||||||
/**
|
|
||||||
* 测试数据生成器 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