Compare commits
6 Commits
v1.0.6
..
a163297de4
| Author | SHA1 | Date | |
|---|---|---|---|
 LingandRX
|
a163297de4 | ||
|
LingandRX
|
a5d86a92c2 | ||
|
LingandRX
|
c992986789 | ||
|
LingandRX
|
70b799aa2d | ||
|
LingandRX
|
58af2af37b | ||
|
LingandRX
|
359326c6da |
+18
-2
@@ -14,6 +14,11 @@ stats-*.json
|
||||
.wxt
|
||||
.vitest
|
||||
|
||||
# Environment variables
|
||||
.env
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
@@ -30,5 +35,16 @@ stats-*.json
|
||||
.qoder/*
|
||||
dev/*
|
||||
|
||||
docs/*
|
||||
!docs/VISUAL_STYLE_GUIDE.md
|
||||
# Build outputs
|
||||
dist/
|
||||
build/
|
||||
|
||||
# Test coverage
|
||||
coverage/
|
||||
|
||||
# IDE files
|
||||
*.code-workspace
|
||||
|
||||
# Other
|
||||
*.tsbuildinfo
|
||||
*.tsxbuildinfo
|
||||
|
||||
+10
-3
@@ -1,6 +1,13 @@
|
||||
# pre-push: 严格检查，阻塞有问题的代码推送到远程
|
||||
# 类型检查
|
||||
# 类型检查（全项目，因为类型错误可能跨文件传播）
|
||||
npx tsc --noEmit
|
||||
|
||||
# ESLint 严格检查（不允许 warning）
|
||||
npx eslint . --max-warnings=0
|
||||
# ESLint 严格检查（仅检查本次推送的变更文件，不阻塞不相关的旧代码）
|
||||
# 新分支无 upstream 时，回退到与 origin/main 对比
|
||||
MERGE_BASE=$(git merge-base HEAD @{upstream} 2>/dev/null || git merge-base HEAD origin/main 2>/dev/null)
|
||||
if [ -n "$MERGE_BASE" ]; then
|
||||
CHANGED_FILES=$(git diff --name-only --diff-filter=d "$MERGE_BASE" HEAD -- '*.ts' '*.tsx' '*.js' '*.jsx' '*.mjs')
|
||||
if [ -n "$CHANGED_FILES" ]; then
|
||||
echo "$CHANGED_FILES" | xargs npx eslint --max-warnings=0
|
||||
fi
|
||||
fi
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# AGENTS.md
|
||||
|
||||
WXT 浏览器扩展项目 (React 19 + TypeScript)。提供时间戳转换、存储清理、JWT 解析、JSON 工具、二维码、Base64、Markdown 等测试效率工具。
|
||||
WXT 浏览器扩展项目 (React 19 + TypeScript)。提供时间戳转换、存储清理、JWT 解析、JSON 工具、二维码、Base64、Markdown、测试数据生成器等测试效率工具。
|
||||
|
||||
## 核心命令
|
||||
|
||||
@@ -54,6 +54,7 @@ src/ # 源代码根目录
|
||||
utils/ # 工具函数与服务抽象
|
||||
types/ # TypeScript 类型声明
|
||||
lib/ # 通用工具函数（cn、utils）
|
||||
workers/ # Web Worker（数据生成等耗时任务）
|
||||
public/ # 静态资源（图标、_locales 等）
|
||||
```
|
||||
|
||||
@@ -76,6 +77,37 @@ src/pages/FeatureName/
|
||||
- 当 `index.tsx` 超过 150 行时，必须拆分为 UI + Hook 模式
|
||||
- 复杂页面可增加 `contexts/`、`hooks/`、`components/` 子目录
|
||||
|
||||
### 测试数据生成器模块
|
||||
|
||||
```
|
||||
src/pages/TestDataGenerator/
|
||||
├── index.tsx # 主页面（字段配置 + 标签页切换）
|
||||
├── hooks/useGenerator.ts # Web Worker 管理 Hook（创建、复用、通信、销毁）
|
||||
└── components/
|
||||
├── FieldList.tsx # 字段列表（虚拟滚动 + @dnd-kit 拖拽排序 + 规则保存）
|
||||
├── FieldItem.tsx # 字段卡片展示
|
||||
├── FieldEditor.tsx # 字段编辑器（名称校验、生成器选择、参数配置）
|
||||
├── GeneratorSelector.tsx # 生成器选择器（分类 + 搜索）
|
||||
├── GeneratorConfig.tsx # 生成器参数表单（动态渲染 string/number/boolean/select/array）
|
||||
├── GenerateOptions.tsx # 生成选项（数量、格式）
|
||||
├── GenerateButton.tsx # 生成按钮 + 进度条
|
||||
├── DataPreview.tsx # 示例数据预览（JSON 语法高亮）
|
||||
├── ResultPanel.tsx # 生成结果状态面板
|
||||
├── ExportPanel.tsx # 导出面板（复制/下载 JSON/CSV）
|
||||
└── RuleManager.tsx # 规则管理（CRUD、搜索、导入/导出）
|
||||
|
||||
src/utils/
|
||||
├── ruleStorage.ts # 规则持久化存储（localStorage）
|
||||
├── dataExporter.ts # 数据导出工具（JSON/CSV 转换、下载、剪贴板）
|
||||
└── generators/ # 内置生成器定义（个人信息、企业、技术、基础类型）
|
||||
|
||||
src/workers/
|
||||
└── generator.worker.ts # 数据生成 Web Worker
|
||||
|
||||
src/types/
|
||||
└── testDataGenerator.ts # 类型定义（FieldConfig, DataRule, GeneratorDefinition 等）
|
||||
```
|
||||
|
||||
## 关键架构决策
|
||||
|
||||
**路由**: 不使用 React Router。通过 `src/config/features.tsx` 的 `FEATURES` 数组管理，`RouterProvider` 根据 `PageType`
|
||||
@@ -143,11 +175,13 @@ src/pages/FeatureName/
|
||||
- 图标: 使用 `lucide-react` 图标库
|
||||
- 格式: Prettier (`.prettierrc`: 100 字符宽, 单引号, 尾逗号 all, LF 换行)
|
||||
- ESLint 使用 `typescript-eslint` 的 `projectService: true`（无需手动维护 project 路径）
|
||||
- **Git Commit**: 必须使用中文描述，遵循 Conventional Commits 规范（如 `fix(组件名): 描述`、`feat(功能名): 描述`）
|
||||
|
||||
## 关键外部库（非显而易见的）
|
||||
|
||||
- `@webext-core/messaging` — 扩展消息通信
|
||||
- `@dnd-kit` — 拖拽排序（用于页面顺序管理）
|
||||
- `@dnd-kit` — 拖拽排序（用于页面顺序管理和字段列表排序）
|
||||
- `qrious` + `qr-scanner` — 二维码生成与解析
|
||||
- `dayjs` — 日期处理（时间戳转换）
|
||||
- `sonner` — Toast 通知（替代传统 snackbar）
|
||||
- Web Worker — 批量数据生成（`src/workers/generator.worker.ts`），避免阻塞 UI 线程
|
||||
|
||||
@@ -8,61 +8,72 @@
|
||||
|
||||
## 功能特性
|
||||
|
||||
### 🚀 Dashboard 首页
|
||||
### Dashboard 首页
|
||||
|
||||
- **工具导航**: 快速访问所有可用工具.
|
||||
- **个性化定制**: 支持自定义工具的排序和可见性.
|
||||
- **实时预览**: 在卡片上直接查看实时数据（如当前时间戳）.
|
||||
|
||||
### ⏰ 时间戳转换工具
|
||||
### 时间戳转换工具
|
||||
|
||||
- **实时显示**: 毫秒级精度显示当前系统时间.
|
||||
- **双向转换**: 日期字符串与 Unix 时间戳（秒/毫秒）之间的无缝转换.
|
||||
- **多时区支持**: 预设常用时区（亚洲/上海、美洲/纽约、欧洲/伦敦），支持快速切换.
|
||||
- **快捷操作**: 一键复制转换结果，支持多种格式.
|
||||
|
||||
### 🧹 存储清理工具
|
||||
### 存储清理工具
|
||||
|
||||
- **智能识别**: 自动检测并显示当前活动标签页的域名.
|
||||
- **全面清理**: 支持一键清理 localStorage、sessionStorage、IndexedDB、Cookies、Cache Storage 和 Service Workers.
|
||||
- **细粒度控制**: 可根据需要选择特定的清理项.
|
||||
- **自动刷新**: 提供清理后自动刷新页面的选项，确保状态同步.
|
||||
|
||||
### 📝 文本统计工具
|
||||
### 文本统计工具
|
||||
|
||||
- **实时分析**: 键入即统计，无需额外操作.
|
||||
- **多维指标**: 统计字符数、单词数、行数以及精确的字节大小.
|
||||
- **性能优化**: 采用高性能分词算法，支持大文本处理.
|
||||
|
||||
### 🔑 JWT 解析工具
|
||||
### JWT 解析工具
|
||||
|
||||
- **快速解码**: 自动解析 JSON Web Token 的 Header 和 Payload.
|
||||
- **格式化显示**: 以着色和格式化的 JSON 视图展示数据，方便阅读.
|
||||
- **安全检查**: 自动去除 `Bearer` 前缀，处理异常输入并提供友好提示.
|
||||
- **签名查看**: 展示 JWT 签名部分，辅助验证令牌完整性.
|
||||
|
||||
### 🖱️ 右键恢复工具
|
||||
### 右键恢复工具
|
||||
|
||||
- **当前页面检测**: 自动识别当前活动标签页的域名.
|
||||
- **一键恢复**: 解除网站对右键菜单的限制，恢复复制、粘贴等基础操作.
|
||||
- **状态可视化**: 通过 Badge 组件直观展示当前页面的锁定/解锁状态.
|
||||
|
||||
### 🖼️ 二维码工具
|
||||
### 二维码工具
|
||||
|
||||
- **生成器**: 将当前 URL 或自定义文本快速转换为二维码，支持下载.
|
||||
- **解析器**: 支持通过上传图片或粘贴图片来解析二维码内容.
|
||||
|
||||
### 🔄 JSON 工具
|
||||
### JSON 工具
|
||||
|
||||
- **差异比较**: 对比两段 JSON 数据，高亮展示差异.
|
||||
- **格式化**: 支持 JSON 美化、压缩、转 YAML / TOML.
|
||||
|
||||
### 🧰 Base64 转换器
|
||||
### Base64 转换器
|
||||
|
||||
- **文本编解码**: 支持文本内容的 Base64 编码与解码.
|
||||
- **文件转换**: 支持文件与 Base64 字符串互转.
|
||||
- **图像预览**: 支持图片 Base64 编码与实时预览.
|
||||
|
||||
### 测试数据生成器
|
||||
|
||||
- **可视化字段配置**: 通过 UI 界面定义数据字段，支持拖拽排序、最多 40 个字段.
|
||||
- **丰富的内置生成器**: 涵盖个人信息（姓名、手机、邮箱）、企业数据（公司名、职位）、技术数据（IP、MAC 地址、UUID）、基础类型（数字、日期、枚举）等多个分类.
|
||||
- **灵活的参数配置**: 每个生成器支持自定义参数（如数字范围、日期格式、枚举值列表等）.
|
||||
- **空值率与唯一性**: 可为非必填字段设置空值率，支持字段唯一性约束.
|
||||
- **规则管理**: 保存、加载、编辑、复制、导入/导出字段配置规则，方便复用.
|
||||
- **批量生成**: 支持 1 ~ 100,000 条数据生成，通过 Web Worker 异步处理避免阻塞 UI.
|
||||
- **实时预览**: 配置字段后即时预览示例数据结构.
|
||||
- **多格式导出**: 支持 JSON 和 CSV 格式，提供复制到剪贴板和下载文件两种导出方式.
|
||||
|
||||
## 技术栈
|
||||
|
||||
- **框架**: [WXT (Web Extension Toolkit)](https://wxt.dev/)
|
||||
@@ -75,6 +86,8 @@
|
||||
- **存储**: Chrome Storage API (类型安全封装)
|
||||
- **解析引擎**: qr-scanner (二维码解析), qrious (二维码生成)
|
||||
- **测试**: Vitest + Testing Library
|
||||
- **拖拽排序**: @dnd-kit/core + @dnd-kit/sortable
|
||||
- **异步生成**: Web Worker (批量数据生成)
|
||||
|
||||
## 项目结构
|
||||
|
||||
@@ -89,6 +102,7 @@
|
||||
│ │ ├── background.ts # 后台 Service Worker
|
||||
│ │ └── content.ts # 网页注入脚本
|
||||
│ ├── pages/ # 各功能模块的页面组件
|
||||
│ ├── workers/ # Web Worker (数据生成等耗时任务)
|
||||
│ ├── providers/ # 全局状态提供者 (Router, Theme 等)
|
||||
│ ├── hooks/ # 自定义 React Hooks
|
||||
│ ├── utils/ # 工具函数与服务抽象
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
# 测试数据生成器 - 功能设计文档
|
||||
|
||||
> 版本: v1.0
|
||||
> 创建时间: 2024-01-20
|
||||
> 状态: 待 Review
|
||||
|
||||
## 产品定位
|
||||
|
||||
**轻量级可视化测试数据生成器**
|
||||
|
||||
- 纯前端工具，无需后端
|
||||
- 可视化配置，无需编码
|
||||
- 本地生成，数据安全
|
||||
|
||||
## 目录
|
||||
|
||||
- [核心功能](./core-features.md)
|
||||
- [生成器库](./generators.md)
|
||||
- [规则管理](./rule-management.md)
|
||||
- [界面设计](./ui-design.md)
|
||||
- [技术实现](./technical-implementation.md)
|
||||
@@ -0,0 +1,384 @@
|
||||
# 测试数据生成器 - 实现任务列表
|
||||
|
||||
> 创建时间: 2026-06-06
|
||||
> 状态: ✅ 已完成
|
||||
|
||||
## 总体进度
|
||||
|
||||
| 子功能 | 状态 | 预估工时 |
|
||||
| -------------------------- | --------- | --------- |
|
||||
| 1. 类型定义与项目配置 | ✅ 已完成 | 0.5h |
|
||||
| 2. 生成器库 | ✅ 已完成 | 4h |
|
||||
| 3. Web Worker 数据生成引擎 | ✅ 已完成 | 2h |
|
||||
| 4. 规则存储与管理 | ✅ 已完成 | 2h |
|
||||
| 5. 数据导出功能 | ✅ 已完成 | 1h |
|
||||
| 6. UI 组件开发 | ✅ 已完成 | 6h |
|
||||
| 7. 页面集成与注册 | ✅ 已完成 | 1h |
|
||||
| 8. 测试与优化 | ✅ 已完成 | 2h |
|
||||
| **总计** | | **18.5h** |
|
||||
|
||||
---
|
||||
|
||||
## 1. 类型定义与项目配置
|
||||
|
||||
**目标**: 创建所有必要的类型定义文件，配置项目注册新功能
|
||||
|
||||
### 任务清单
|
||||
|
||||
- [x] 1.1 创建 `src/types/testDataGenerator.ts` 类型定义文件
|
||||
- [x] 定义 `FieldConfig` 接口
|
||||
- [x] 定义 `DataRule` 接口
|
||||
- [x] 定义 `GeneratorDefinition` 接口
|
||||
- [x] 定义 `GeneratorParam` 接口
|
||||
- [x] 定义 `GenerateResult` 接口
|
||||
- [x] 定义 `ExportFile` 接口
|
||||
|
||||
- [x] 1.2 更新 `src/types/storage.d.ts`
|
||||
- [x] 在 `PageType` 中添加 `'testDataGenerator'`
|
||||
- [x] 在 `StorageSchema` 中添加测试数据生成器相关配置（如需要）
|
||||
|
||||
- [x] 1.3 更新 `src/config/features.tsx`
|
||||
- [x] 导入 TestDataGenerator 页面组件
|
||||
- [x] 添加新功能配置到 `FEATURES` 数组
|
||||
- [x] 选择合适的图标（如 `Database` 或 `FileSpreadsheet`）
|
||||
|
||||
- [x] 1.4 更新国际化配置
|
||||
- [x] 添加 `testDataGenerator_title` 翻译
|
||||
- [x] 添加 `testDataGenerator_description` 翻译
|
||||
|
||||
---
|
||||
|
||||
## 2. 生成器库
|
||||
|
||||
**目标**: 实现 21 个数据生成器，支持多种生成策略
|
||||
|
||||
### 任务清单
|
||||
|
||||
#### 2.1 生成器基础框架
|
||||
|
||||
- [x] 2.1.1 创建 `src/lib/generators/types.ts`
|
||||
- [x] 定义生成器内部类型（与 `testDataGenerator.ts` 分离）
|
||||
|
||||
- [x] 2.1.2 创建 `src/lib/generators/index.ts`
|
||||
- [x] 导出所有生成器
|
||||
- [x] 导出 `generatorCategories` 配置
|
||||
|
||||
#### 2.2 个人信息生成器 (6个)
|
||||
|
||||
- [x] 2.2.1 创建 `src/lib/generators/personal.ts`
|
||||
- [x] 实现 `chineseName` 生成器
|
||||
- [x] `generate()` 方法
|
||||
- [x] `generateAtIndex()` 方法
|
||||
- [x] 实现 `email` 生成器
|
||||
- [x] `generate()` 方法
|
||||
- [x] `generateAtIndex()` 方法
|
||||
- [x] 实现 `chinesePhone` 生成器
|
||||
- [x] `generate()` 方法
|
||||
- [x] `generateAtIndex()` 方法
|
||||
- [x] 实现 `idCard` 生成器
|
||||
- [x] `generate()` 方法
|
||||
- [x] `generateAtIndex()` 方法
|
||||
- [x] 实现 `chineseAddress` 生成器
|
||||
- [x] `generate()` 方法
|
||||
- [x] `generateAtIndex()` 方法
|
||||
- [x] 实现 `age` 生成器
|
||||
- [x] `generate()` 方法（支持 realistic/uniform/demographic 策略）
|
||||
- [x] `generateAtIndex()` 方法
|
||||
- [x] 实现 `normalRandom()` 辅助函数
|
||||
- [x] 实现 `demographicRandom()` 辅助函数
|
||||
|
||||
#### 2.3 业务数据生成器 (8个)
|
||||
|
||||
- [x] 2.3.1 创建 `src/lib/generators/business.ts`
|
||||
- [x] 实现 `orderId` 生成器
|
||||
- [x] 实现 `price` 生成器
|
||||
- [x] 实现 `generatePsychologicalPrice()` 辅助函数
|
||||
- [x] 实现 `generateRealisticPrice()` 辅助函数
|
||||
- [x] 实现 `date` 生成器
|
||||
- [x] 实现 `formatDate()` 辅助函数
|
||||
- [x] 实现 `status` 生成器
|
||||
- [x] 实现 `quantity` 生成器
|
||||
- [x] 实现 `poissonRandom()` 辅助函数
|
||||
- [x] 实现 `rating` 生成器
|
||||
- [x] 实现 `skewedRandom()` 辅助函数
|
||||
- [x] 实现 `discount` 生成器
|
||||
- [x] 实现 `generatePsychologicalDiscount()` 辅助函数
|
||||
- [x] 实现 `stock` 生成器
|
||||
- [x] 实现 `exponentialRandom()` 辅助函数
|
||||
|
||||
#### 2.4 技术数据生成器 (3个)
|
||||
|
||||
- [x] 2.4.1 创建 `src/lib/generators/technical.ts`
|
||||
- [x] 实现 `uuid` 生成器
|
||||
- [x] 实现 `ipv4` 生成器
|
||||
- [x] 实现 `url` 生成器
|
||||
|
||||
#### 2.5 基础类型生成器 (4个)
|
||||
|
||||
- [x] 2.5.1 创建 `src/lib/generators/basic.ts`
|
||||
- [x] 实现 `randomInt` 生成器
|
||||
- [x] 实现 `randomFloat` 生成器
|
||||
- [x] 实现 `randomString` 生成器
|
||||
- [x] 实现 `fromList` 生成器
|
||||
|
||||
---
|
||||
|
||||
## 3. Web Worker 数据生成引擎
|
||||
|
||||
**目标**: 实现后台数据生成，支持进度回调和取消
|
||||
|
||||
### 任务清单
|
||||
|
||||
- [x] 3.1 创建 `src/workers/generator.worker.ts`
|
||||
- [x] 实现 `self.onmessage` 处理器
|
||||
- [x] 验证生成器是否存在
|
||||
- [x] 实现数据生成循环
|
||||
- [x] 实现空值率控制逻辑
|
||||
- [x] 实现唯一性约束逻辑
|
||||
- [x] 小数据量：随机生成 + 重试（100次上限）
|
||||
- [x] 大数据量：索引生成策略
|
||||
- [x] 实现进度回调（每1000条）
|
||||
- [x] 实现完成回调（包含统计数据）
|
||||
- [x] 实现错误回调
|
||||
|
||||
- [x] 3.2 创建 `src/pages/TestDataGenerator/hooks/useGenerator.ts`
|
||||
- [x] 实现 Worker 创建和销毁
|
||||
- [x] 实现 `generate()` 方法
|
||||
- [x] 实现 `terminate()` 方法
|
||||
- [x] 管理进度状态
|
||||
- [x] 管理生成结果状态
|
||||
|
||||
---
|
||||
|
||||
## 4. 规则存储与管理
|
||||
|
||||
**目标**: 实现规则的持久化存储和管理功能
|
||||
|
||||
### 任务清单
|
||||
|
||||
- [x] 4.1 创建 `src/utils/ruleStorage.ts`
|
||||
- [x] 定义 `STORAGE_KEY` 常量
|
||||
- [x] 定义 `MAX_RULES = 20` 常量
|
||||
- [x] 实现 `getAll()` 方法
|
||||
- [x] 实现 `getById()` 方法
|
||||
- [x] 实现 `getCount()` 方法
|
||||
- [x] 实现 `isMaxReached()` 方法
|
||||
- [x] 实现 `save()` 方法（含数量限制检查）
|
||||
- [x] 实现 `update()` 方法
|
||||
- [x] 实现 `delete()` 方法
|
||||
- [x] 实现 `duplicate()` 方法
|
||||
- [x] 实现 `recordUse()` 方法
|
||||
- [x] 实现 `search()` 方法
|
||||
- [x] 实现 `getRecent()` 方法
|
||||
- [x] 实现 `export()` 方法
|
||||
- [x] 实现 `import()` 方法（含格式验证）
|
||||
- [x] 实现 `clear()` 方法
|
||||
- [x] 实现 `validateRule()` 私有方法
|
||||
|
||||
---
|
||||
|
||||
## 5. 数据导出功能
|
||||
|
||||
**目标**: 实现 JSON 和 CSV 格式的数据导出
|
||||
|
||||
### 任务清单
|
||||
|
||||
- [x] 5.1 创建 `src/utils/dataExporter.ts`
|
||||
- [x] 实现 `toJSON()` 静态方法
|
||||
- [x] 实现 `toCSV()` 静态方法
|
||||
- [x] 实现 `escapeCSV()` 私有方法
|
||||
- [x] 实现 `exportByFormat()` 静态方法
|
||||
- [x] 实现 `toMultipleFiles()` 静态方法
|
||||
- [x] 实现 `toSingleFile()` 静态方法
|
||||
- [x] 实现 `getMimeType()` 私有方法
|
||||
- [x] 实现 `download()` 静态方法
|
||||
- [x] 实现 `downloadMultiple()` 静态方法
|
||||
|
||||
---
|
||||
|
||||
## 6. UI 组件开发
|
||||
|
||||
**目标**: 实现所有界面组件，遵循视觉规范
|
||||
|
||||
### 任务清单
|
||||
|
||||
#### 6.1 页面组件
|
||||
|
||||
- [x] 6.1.1 创建 `src/pages/TestDataGenerator/index.tsx` 主页面
|
||||
- [x] 实现左右分栏布局（60% / 40%）
|
||||
- [x] 集成所有子组件
|
||||
- [x] 管理页面状态
|
||||
|
||||
#### 6.2 字段管理组件
|
||||
|
||||
- [x] 6.2.1 创建 `src/pages/TestDataGenerator/components/FieldList.tsx`
|
||||
- [x] 实现字段列表展示
|
||||
- [x] 实现添加字段按钮
|
||||
- [x] 实现字段拖拽排序（可选，使用上移/下移按钮）
|
||||
|
||||
- [x] 6.2.2 创建 `src/pages/TestDataGenerator/components/FieldItem.tsx`
|
||||
- [x] 实现单个字段项展示
|
||||
- [x] 实现字段名编辑
|
||||
- [x] 实现生成器切换下拉框
|
||||
- [x] 实现配置按钮
|
||||
- [x] 实现删除按钮
|
||||
- [x] 实现上移/下移按钮
|
||||
|
||||
- [x] 6.2.3 创建 `src/pages/TestDataGenerator/components/FieldEditor.tsx`
|
||||
- [x] 实现基础配置区（字段名、描述）
|
||||
- [x] 实现必填/选填切换
|
||||
- [x] 实现空值率配置（仅选填时显示）
|
||||
- [x] 滑块组件
|
||||
- [x] 预设按钮（低/中/高）
|
||||
- [x] 实现唯一性约束开关
|
||||
|
||||
#### 6.3 生成器相关组件
|
||||
|
||||
- [x] 6.3.1 创建 `src/pages/TestDataGenerator/components/GeneratorSelector.tsx`
|
||||
- [x] 实现分类展示（个人信息/业务数据/技术数据/基础类型）
|
||||
- [x] 实现搜索功能
|
||||
- [x] 实现生成器选择
|
||||
|
||||
- [x] 6.3.2 创建 `src/pages/TestDataGenerator/components/GeneratorConfig.tsx`
|
||||
- [x] 实现参数配置表单
|
||||
- [x] 支持不同参数类型（string/number/boolean/select/array）
|
||||
- [x] 实时预览更新
|
||||
|
||||
#### 6.4 数据预览组件
|
||||
|
||||
- [x] 6.4.1 创建 `src/pages/TestDataGenerator/components/DataPreview.tsx`
|
||||
- [x] 实现 JSON 格式预览
|
||||
- [x] 实现 CSV 格式预览
|
||||
- [x] 实现格式切换按钮
|
||||
- [x] 实现数据分页
|
||||
- [x] 实现复制功能
|
||||
|
||||
#### 6.5 生成选项组件
|
||||
|
||||
- [x] 6.5.1 创建 `src/pages/TestDataGenerator/components/GenerateOptions.tsx`
|
||||
- [x] 实现生成数量配置（预设 + 自定义）
|
||||
- [x] 实现数据格式选择（JSON/CSV）
|
||||
- [x] 实现默认空值率配置
|
||||
|
||||
- [x] 6.5.2 创建 `src/pages/TestDataGenerator/components/GenerateButton.tsx`
|
||||
- [x] 实现生成按钮
|
||||
- [x] 实现加载状态
|
||||
- [x] 实现进度条显示
|
||||
|
||||
#### 6.6 导出组件
|
||||
|
||||
- [x] 6.6.1 创建 `src/pages/TestDataGenerator/components/ExportPanel.tsx`
|
||||
- [x] 实现导出选项（复制/下载 JSON/下载 CSV）
|
||||
- [x] 实现下载逻辑
|
||||
|
||||
#### 6.7 结果展示组件
|
||||
|
||||
- [x] 6.7.1 创建 `src/pages/TestDataGenerator/components/ResultPanel.tsx`
|
||||
- [x] 实现成功状态展示
|
||||
- [x] 实现警告状态展示（部分字段失败）
|
||||
- [x] 实现错误状态展示
|
||||
- [x] 实现数据统计展示
|
||||
|
||||
#### 6.8 规则管理组件
|
||||
|
||||
- [x] 6.8.1 创建 `src/pages/TestDataGenerator/components/RuleManager.tsx`
|
||||
- [x] 实现规则列表展示
|
||||
- [x] 实现搜索功能
|
||||
- [x] 实现加载/编辑/删除/复制按钮
|
||||
- [x] 实现导入/导出功能
|
||||
- [x] 实现规则数量显示（已保存 X/20 条）
|
||||
|
||||
---
|
||||
|
||||
## 7. 页面集成与注册
|
||||
|
||||
**目标**: 将新功能集成到应用中
|
||||
|
||||
### 任务清单
|
||||
|
||||
- [x] 7.1 更新路由配置
|
||||
- [x] 确保 `RouterProvider` 支持新页面类型
|
||||
|
||||
- [x] 7.2 更新功能注册
|
||||
- [x] 验证 `features.tsx` 配置正确
|
||||
- [x] 验证图标显示正常
|
||||
|
||||
- [x] 7.3 更新仪表盘
|
||||
- [x] 在 Dashboard 中显示新工具卡片
|
||||
|
||||
---
|
||||
|
||||
## 8. 测试与优化
|
||||
|
||||
**目标**: 确保功能稳定性和性能
|
||||
|
||||
### 任务清单
|
||||
|
||||
#### 8.1 单元测试
|
||||
|
||||
- [x] 8.1.1 创建生成器测试
|
||||
- [x] `src/lib/generators/__tests__/personal.test.ts`
|
||||
- [x] `src/lib/generators/__tests__/business.test.ts`
|
||||
- [x] `src/lib/generators/__tests__/technical.test.ts`
|
||||
- [x] `src/lib/generators/__tests__/basic.test.ts`
|
||||
|
||||
- [x] 8.1.2 创建工具函数测试
|
||||
- [x] `src/utils/__tests__/ruleStorage.test.ts`
|
||||
- [x] `src/utils/__tests__/dataExporter.test.ts`
|
||||
|
||||
#### 8.2 集成测试
|
||||
|
||||
- [x] 8.2.1 创建页面测试
|
||||
- [x] `src/pages/TestDataGenerator/__tests__/TestDataGenerator.test.tsx`
|
||||
|
||||
#### 8.3 性能优化
|
||||
|
||||
- [x] 8.3.1 验证 Web Worker 性能
|
||||
- [x] 测试 10000+ 条数据生成
|
||||
- [x] 验证 UI 不阻塞
|
||||
|
||||
- [x] 8.3.2 验证内存使用
|
||||
- [x] 检查大数据量时的内存占用
|
||||
- [x] 确保无内存泄漏
|
||||
|
||||
#### 8.4 代码质量
|
||||
|
||||
- [x] 8.4.1 代码审查
|
||||
- [x] 遵循项目代码规范
|
||||
- [x] 遵循视觉规范文档
|
||||
|
||||
- [x] 8.4.2 文档更新
|
||||
- [x] 更新 AGENTS.md（如需要）
|
||||
|
||||
---
|
||||
|
||||
## 依赖关系
|
||||
|
||||
```
|
||||
1. 类型定义与项目配置
|
||||
↓
|
||||
2. 生成器库
|
||||
↓
|
||||
3. Web Worker 数据生成引擎 (依赖 2)
|
||||
↓
|
||||
4. 规则存储与管理
|
||||
↓
|
||||
5. 数据导出功能
|
||||
↓
|
||||
6. UI 组件开发 (依赖 1, 2, 3, 4, 5)
|
||||
↓
|
||||
7. 页面集成与注册 (依赖 6)
|
||||
↓
|
||||
8. 测试与优化 (依赖 7)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **遵循视觉规范**: 所有 UI 组件必须遵循 `docs/VISUAL_STYLE_GUIDE.md`
|
||||
2. **使用现有组件**: 优先使用 `src/components/ui/` 中的 shadcn/ui 组件
|
||||
3. **TypeScript 严格模式**: 确保类型安全
|
||||
4. **错误处理**: 使用 `sonner` 库进行 Toast 提示
|
||||
5. **性能考虑**: 大数据量生成必须使用 Web Worker
|
||||
6. **响应式设计**: 支持桌面端、平板端、移动端
|
||||
@@ -0,0 +1,238 @@
|
||||
# 核心功能
|
||||
|
||||
## 功能概览
|
||||
|
||||
| 功能模块 | 功能点 | 说明 | 优先级 |
|
||||
| -------------- | ------------- | ------------------ | ------ |
|
||||
| **字段配置** | 添加字段 | 可视化添加数据字段 | P0 |
|
||||
| | 删除字段 | 删除不需要的字段 | P0 |
|
||||
| | 字段排序 | 拖拽调整字段顺序 | P1 |
|
||||
| | 字段命名 | 自定义字段名称 | P0 |
|
||||
| | 必填/选填设置 | 控制字段是否必填 | P0 |
|
||||
| | 空值率配置 | 选填字段空值概率 | P1 |
|
||||
| **生成器系统** | 生成器选择 | 从生成器库中选择 | P0 |
|
||||
| | 参数配置 | 配置生成器参数 | P0 |
|
||||
| | 实时预览 | 配置时查看生成结果 | P1 |
|
||||
| **数据生成** | 批量生成 | 支持 10000+ 条数据 | P0 |
|
||||
| | 唯一性约束 | 保证字段值唯一 | P1 |
|
||||
| | 组合策略 | 自动选择生成策略 | P1 |
|
||||
| | 数据预览 | 生成前预览数据 | P1 |
|
||||
| **数据导出** | JSON 导出 | 导出为 JSON 格式 | P0 |
|
||||
| | CSV 导出 | 导出为 CSV 格式 | P0 |
|
||||
|
||||
## 功能详情
|
||||
|
||||
### 1. 字段配置
|
||||
|
||||
#### 添加字段
|
||||
|
||||
- 用户点击"添加字段"按钮
|
||||
- 弹出生成器选择器
|
||||
- 选择生成器后，自动创建新字段
|
||||
- 字段默认名称为生成器名称
|
||||
|
||||
#### 删除字段
|
||||
|
||||
- 每个字段右侧有删除按钮
|
||||
- 点击后弹出确认对话框
|
||||
- 确认后删除该字段
|
||||
|
||||
#### 字段排序
|
||||
|
||||
- 支持拖拽排序
|
||||
- 支持上移/下移按钮
|
||||
- 排序后预览数据同步更新
|
||||
|
||||
#### 字段命名
|
||||
|
||||
- 字段名称可自定义
|
||||
- 支持中英文命名
|
||||
- 同一规则内字段名不可重复
|
||||
|
||||
#### 必填/选填设置
|
||||
|
||||
- 每个字段可设置为"必填"或"选填"
|
||||
- **必填字段**: 100% 生成数据
|
||||
- **选填字段**: 可配置空值概率（0-100%）
|
||||
- 默认所有字段为必填
|
||||
|
||||
#### 空值率配置
|
||||
|
||||
- 选填字段可单独设置空值率
|
||||
- 提供预设值：低（20%）、中（50%）、高（80%）
|
||||
- 支持滑块精细调节（0-100%）
|
||||
- 未单独设置的选填字段使用全局默认空值率
|
||||
|
||||
---
|
||||
|
||||
### 2. 生成器系统
|
||||
|
||||
#### 生成器选择
|
||||
|
||||
- 以分类方式展示生成器
|
||||
- 支持搜索生成器
|
||||
- 点击选择后添加到字段配置
|
||||
|
||||
#### 价格生成器（业务数据）
|
||||
|
||||
生成真实的价格数据，支持多种策略：
|
||||
|
||||
| 策略 | 说明 | 适用场景 |
|
||||
| -------- | ------------------------------ | ------------ |
|
||||
| 真实分布 | 对数正态分布，模拟真实商品价格 | 通用电商场景 |
|
||||
| 均匀随机 | 所有价格等概率 | 测试数据 |
|
||||
| 心理定价 | .99/.98/.95 结尾 | 营销场景 |
|
||||
|
||||
**参数配置**：
|
||||
|
||||
- 最低价/最高价：控制价格区间
|
||||
- 小数位数：0（整数）、1、2 位
|
||||
- 生成策略：选择分布类型
|
||||
|
||||
#### 年龄生成器（个人信息）
|
||||
|
||||
生成真实分布的年龄数据：
|
||||
|
||||
| 策略 | 说明 | 适用场景 |
|
||||
| -------- | ---------------------------- | ------------ |
|
||||
| 真实分布 | 正态分布，均值 35，标准差 10 | 通用用户数据 |
|
||||
| 人口比例 | 按中国人口年龄比例分布 | 市场调研数据 |
|
||||
| 均匀随机 | 所有年龄等概率 | 测试数据 |
|
||||
|
||||
**参数配置**：
|
||||
|
||||
- 最小年龄/最大年龄：控制年龄区间
|
||||
- 生成策略：选择分布类型
|
||||
|
||||
#### 数量生成器（业务数据）
|
||||
|
||||
生成真实分布的数量数据：
|
||||
|
||||
| 策略 | 说明 | 适用场景 |
|
||||
| -------- | --------------------------- | -------- |
|
||||
| 真实分布 | 泊松分布，大多数购买 1-3 件 | 零售订单 |
|
||||
| 批发模式 | 10-100 之间均匀分布 | 批发订单 |
|
||||
| 均匀随机 | 所有数量等概率 | 测试数据 |
|
||||
|
||||
**参数配置**：
|
||||
|
||||
- 最小值/最大值：控制数量区间
|
||||
- 生成策略：选择分布类型
|
||||
|
||||
#### 评分生成器（业务数据）
|
||||
|
||||
生成真实分布的评分数据：
|
||||
|
||||
| 策略 | 说明 | 适用场景 |
|
||||
| -------- | ------------------ | -------- |
|
||||
| 真实分布 | 偏态分布，偏向高分 | 电商平台 |
|
||||
| 严格评价 | 偏态分布，偏向低分 | 严格评审 |
|
||||
| 均匀随机 | 所有评分等概率 | 测试数据 |
|
||||
|
||||
**参数配置**：
|
||||
|
||||
- 最低分/最高分：控制评分区间
|
||||
- 小数位数：0、1 位
|
||||
- 生成策略：选择分布类型
|
||||
|
||||
#### 折扣生成器（业务数据）
|
||||
|
||||
生成真实分布的折扣数据：
|
||||
|
||||
| 策略 | 说明 | 适用场景 |
|
||||
| -------- | ------------------------ | -------- |
|
||||
| 心理定价 | 常见折扣点（8折、9折等） | 电商促销 |
|
||||
| 清仓模式 | 大折扣区间（3-7折） | 清仓处理 |
|
||||
| 均匀随机 | 所有折扣等概率 | 测试数据 |
|
||||
|
||||
**参数配置**：
|
||||
|
||||
- 最低折扣/最高折扣：控制折扣区间（0.1-0.9）
|
||||
- 生成策略：选择分布类型
|
||||
|
||||
#### 库存生成器（业务数据）
|
||||
|
||||
生成真实分布的库存数据：
|
||||
|
||||
| 策略 | 说明 | 适用场景 |
|
||||
| -------- | ------------------------ | -------- |
|
||||
| 真实分布 | 指数分布，大多数库存较少 | 通用商品 |
|
||||
| 热销商品 | 低库存区间（0-50） | 热销商品 |
|
||||
| 均匀随机 | 所有库存等概率 | 测试数据 |
|
||||
|
||||
**参数配置**：
|
||||
|
||||
- 最小库存/最大库存：控制库存区间
|
||||
- 生成策略：选择分布类型
|
||||
|
||||
#### 参数配置
|
||||
|
||||
- 每个生成器有对应的参数配置界面
|
||||
- 必填参数标记星号
|
||||
- 修改参数后实时预览更新
|
||||
|
||||
#### 实时预览
|
||||
|
||||
- 配置参数时，右侧预览区实时更新
|
||||
- 显示 5-10 条示例数据
|
||||
- 帮助用户确认配置是否正确
|
||||
|
||||
---
|
||||
|
||||
### 3. 数据生成
|
||||
|
||||
#### 批量生成
|
||||
|
||||
- 支持配置生成数量
|
||||
- 使用 Web Worker 后台生成
|
||||
- 支持 10000+ 条数据
|
||||
- 生成过程中显示进度条
|
||||
|
||||
#### 唯一性约束
|
||||
|
||||
- 每个字段可单独设置唯一性约束
|
||||
- 启用后，该字段生成的值不会重复
|
||||
- 如果无法生成唯一值，使用重试机制
|
||||
|
||||
#### 组合策略（唯一性生成）
|
||||
|
||||
系统根据数据量自动选择最优生成策略：
|
||||
|
||||
| 数据量 | 策略 | 说明 |
|
||||
| --------- | --------------- | ---------------------- |
|
||||
| ≤ 1000 条 | 随机生成 + 重试 | 保证随机性，性能可接受 |
|
||||
| > 1000 条 | 索引生成 | 高性能，保证唯一性 |
|
||||
|
||||
**实现方式**：
|
||||
|
||||
- 生成器提供两个方法：`generate()` 和 `generateAtIndex()`
|
||||
- `generate()`: 随机生成，用于小数据量或非唯一性字段
|
||||
- `generateAtIndex()`: 索引生成，用于大数据量唯一性字段
|
||||
- 系统根据配置自动选择合适的方法
|
||||
|
||||
**示例**：
|
||||
|
||||
- 手机号字段：`generateAtIndex(params, index)` 使用 index 生成唯一手机号
|
||||
- 姓名字段：`generateAtIndex(params, index)` 使用 index 组合姓和名
|
||||
|
||||
#### 数据预览
|
||||
|
||||
- 生成前可预览数据
|
||||
- 显示前 10 条数据
|
||||
- 支持分页查看更多数据
|
||||
|
||||
---
|
||||
|
||||
### 4. 数据导出
|
||||
|
||||
#### JSON 导出
|
||||
|
||||
- 导出为标准 JSON 格式
|
||||
- 支持压缩和格式化两种模式
|
||||
- 包含字段名和数据
|
||||
|
||||
#### CSV 导出
|
||||
|
||||
- 导出为 CSV 格式
|
||||
- 自动处理逗号转义
|
||||
- 支持中文编码 (UTF-8 with BOM)
|
||||
@@ -0,0 +1,702 @@
|
||||
# 生成器库
|
||||
|
||||
## 分类概览
|
||||
|
||||
| 分类 | 生成器数量 | 说明 |
|
||||
| -------- | ---------- | ------------------------------------------------ |
|
||||
| 个人信息 | 6 个 | 中文姓名、邮箱、手机号、年龄等 |
|
||||
| 业务数据 | 8 个 | 订单号、价格、日期、状态、数量、评分、折扣、库存 |
|
||||
| 技术数据 | 3 个 | UUID、IP地址、URL |
|
||||
| 基础类型 | 4 个 | 整数、浮点数、字符串等 |
|
||||
| **总计** | **21 个** | |
|
||||
|
||||
---
|
||||
|
||||
## 个人信息生成器
|
||||
|
||||
### 1. 中文姓名 (chineseName)
|
||||
|
||||
**说明**: 生成中文姓名，如张三、李四
|
||||
|
||||
**参数**:
|
||||
|
||||
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|
||||
| --------------- | ---------------------------- | ---- | ------------------ | ------------ |
|
||||
| surnamePool | string \| string[] | 否 | 百家姓前100个 | 姓氏池 |
|
||||
| givenNameLength | { min: number, max: number } | 否 | { min: 1, max: 2 } | 名字长度范围 |
|
||||
|
||||
**示例**:
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "name",
|
||||
"generator": "chineseName",
|
||||
"params": {
|
||||
"surnamePool": ["张", "王", "李", "赵"],
|
||||
"givenNameLength": { "min": 1, "max": 2 }
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**生成结果**: 张伟, 李娜, 王强, 赵敏
|
||||
|
||||
---
|
||||
|
||||
### 2. 邮箱地址 (email)
|
||||
|
||||
**说明**: 生成邮箱地址
|
||||
|
||||
**参数**:
|
||||
|
||||
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|
||||
| --------- | -------------------- | ---- | ------------------------------------------------------------ | ---------- |
|
||||
| domains | string[] | 否 | ['qq.com', '163.com', '126.com', 'gmail.com', 'outlook.com'] | 域名列表 |
|
||||
| nameStyle | 'pinyin' \| 'random' | 否 | 'pinyin' | 用户名风格 |
|
||||
|
||||
**示例**:
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "email",
|
||||
"generator": "email",
|
||||
"params": {
|
||||
"domains": ["qq.com", "163.com"],
|
||||
"nameStyle": "pinyin"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**生成结果**: zhangwei@qq.com, lina@163.com
|
||||
|
||||
---
|
||||
|
||||
### 3. 中国手机号 (chinesePhone)
|
||||
|
||||
**说明**: 生成 11 位中国手机号
|
||||
|
||||
**参数**:
|
||||
|
||||
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|
||||
| ------ | -------- | ---- | -------------- | ---------- |
|
||||
| prefix | string[] | 否 | 常见手机号前缀 | 手机号前缀 |
|
||||
|
||||
**示例**:
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "phone",
|
||||
"generator": "chinesePhone",
|
||||
"params": {
|
||||
"prefix": ["138", "139", "150", "151"]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**生成结果**: 13812345678, 15087654321
|
||||
|
||||
---
|
||||
|
||||
### 4. 身份证号 (idCard)
|
||||
|
||||
**说明**: 生成 18 位中国身份证号
|
||||
|
||||
**参数**:
|
||||
|
||||
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|
||||
| ------ | ------ | ---- | ------ | ------ |
|
||||
| region | string | 否 | 随机 | 地区码 |
|
||||
|
||||
**示例**:
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "idCard",
|
||||
"generator": "idCard",
|
||||
"params": {
|
||||
"region": "110101"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**生成结果**: 110101199001011234
|
||||
|
||||
---
|
||||
|
||||
### 5. 中文地址 (chineseAddress)
|
||||
|
||||
**说明**: 生成中国地址
|
||||
|
||||
**参数**:
|
||||
|
||||
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|
||||
| ------ | ------------------------------ | ---- | ------ | -------- |
|
||||
| level | 'full' \| 'province' \| 'city' | 否 | 'full' | 详细程度 |
|
||||
|
||||
**示例**:
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "address",
|
||||
"generator": "chineseAddress",
|
||||
"params": {
|
||||
"level": "full"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**生成结果**: 北京市朝阳区建国路88号
|
||||
|
||||
---
|
||||
|
||||
### 6. 年龄 (age)
|
||||
|
||||
**说明**: 生成真实分布的年龄数据
|
||||
|
||||
**参数**:
|
||||
|
||||
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|
||||
| -------- | ----------------------------------------- | ---- | ----------- | -------- |
|
||||
| min | number | 否 | 1 | 最小年龄 |
|
||||
| max | number | 否 | 100 | 最大年龄 |
|
||||
| strategy | 'realistic' \| 'demographic' \| 'uniform' | 否 | 'realistic' | 生成策略 |
|
||||
|
||||
**策略说明**:
|
||||
|
||||
| 策略 | 说明 | 适用场景 |
|
||||
| ----------- | ---------------------------- | ------------ |
|
||||
| realistic | 正态分布，均值 35，标准差 10 | 通用用户数据 |
|
||||
| demographic | 按中国人口年龄比例分布 | 市场调研数据 |
|
||||
| uniform | 均匀随机 | 测试数据 |
|
||||
|
||||
**示例**:
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "age",
|
||||
"generator": "age",
|
||||
"params": {
|
||||
"min": 18,
|
||||
"max": 65,
|
||||
"strategy": "realistic"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**生成结果**: 28, 42, 35, 51, 23
|
||||
|
||||
---
|
||||
|
||||
## 业务数据生成器
|
||||
|
||||
### 1. 订单号 (orderId)
|
||||
|
||||
**说明**: 生成订单号
|
||||
|
||||
**参数**:
|
||||
|
||||
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|
||||
| ------------ | ------- | ---- | ------ | ------------ |
|
||||
| prefix | string | 否 | 'ORD' | 前缀 |
|
||||
| dateIncluded | boolean | 否 | true | 是否包含日期 |
|
||||
|
||||
**示例**:
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "orderId",
|
||||
"generator": "orderId",
|
||||
"params": {
|
||||
"prefix": "ORD",
|
||||
"dateIncluded": true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**生成结果**: ORD20240115001, ORD20240115002
|
||||
|
||||
---
|
||||
|
||||
### 2. 价格 (price)
|
||||
|
||||
**说明**: 生成真实的价格数据，支持多种分布策略
|
||||
|
||||
**参数**:
|
||||
|
||||
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|
||||
| -------- | ------------------------------------------- | ---- | ----------- | -------- |
|
||||
| min | number | 是 | 1 | 最低价 |
|
||||
| max | number | 是 | 9999 | 最高价 |
|
||||
| decimals | 0 \| 1 \| 2 | 否 | 2 | 小数位数 |
|
||||
| strategy | 'realistic' \| 'uniform' \| 'psychological' | 否 | 'realistic' | 生成策略 |
|
||||
|
||||
**生成策略说明**:
|
||||
|
||||
| 策略 | 说明 | 适用场景 |
|
||||
| ------------- | ------------------------------ | ------------ |
|
||||
| realistic | 对数正态分布，模拟真实商品价格 | 通用电商场景 |
|
||||
| uniform | 均匀随机，所有价格等概率 | 测试数据 |
|
||||
| psychological | 心理定价，.99/.98/.95 结尾 | 营销场景 |
|
||||
|
||||
**示例**:
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "price",
|
||||
"generator": "price",
|
||||
"params": {
|
||||
"min": 10,
|
||||
"max": 5000,
|
||||
"decimals": 2,
|
||||
"strategy": "realistic"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**生成结果**:
|
||||
|
||||
- 真实分布: 299.00, 1599.50, 49.99, 1299.00
|
||||
- 心理定价: 299.99, 1599.98, 49.95, 1299.99
|
||||
- 均匀随机: 1234.56, 5678.90, 890.12
|
||||
|
||||
---
|
||||
|
||||
### 3. 日期时间 (date)
|
||||
|
||||
**说明**: 生成日期时间
|
||||
|
||||
**参数**:
|
||||
|
||||
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|
||||
| ------ | ------ | ---- | --------------------- | -------- |
|
||||
| format | string | 否 | 'YYYY-MM-DD HH:mm:ss' | 日期格式 |
|
||||
| min | string | 否 | '2020-01-01' | 最早日期 |
|
||||
| max | string | 否 | 当前日期 | 最晚日期 |
|
||||
|
||||
**示例**:
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "createdAt",
|
||||
"generator": "date",
|
||||
"params": {
|
||||
"format": "YYYY-MM-DD HH:mm:ss",
|
||||
"min": "2024-01-01"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**生成结果**: 2024-01-15 14:30:22
|
||||
|
||||
---
|
||||
|
||||
### 4. 状态 (status)
|
||||
|
||||
**说明**: 从选项中随机选择
|
||||
|
||||
**参数**:
|
||||
|
||||
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|
||||
| ------- | -------- | ---- | -------- | ------------ |
|
||||
| options | string[] | 是 | - | 状态选项列表 |
|
||||
| weights | number[] | 否 | 均匀分布 | 各选项权重 |
|
||||
|
||||
**示例**:
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "status",
|
||||
"generator": "status",
|
||||
"params": {
|
||||
"options": ["pending", "paid", "shipped", "completed"],
|
||||
"weights": [30, 40, 20, 10]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**生成结果**: pending, paid, shipped, completed
|
||||
|
||||
---
|
||||
|
||||
### 5. 数量 (quantity)
|
||||
|
||||
**说明**: 生成真实分布的数量数据
|
||||
|
||||
**参数**:
|
||||
|
||||
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|
||||
| -------- | ---------------------------------- | ---- | ----------- | -------- |
|
||||
| min | number | 否 | 1 | 最小值 |
|
||||
| max | number | 否 | 100 | 最大值 |
|
||||
| strategy | 'realistic' \| 'bulk' \| 'uniform' | 否 | 'realistic' | 生成策略 |
|
||||
|
||||
**策略说明**:
|
||||
|
||||
| 策略 | 说明 | 适用场景 |
|
||||
| --------- | --------------------------- | -------- |
|
||||
| realistic | 泊松分布，大多数购买 1-3 件 | 零售订单 |
|
||||
| bulk | 10-100 之间均匀分布 | 批发订单 |
|
||||
| uniform | 均匀随机 | 测试数据 |
|
||||
|
||||
**示例**:
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "quantity",
|
||||
"generator": "quantity",
|
||||
"params": {
|
||||
"min": 1,
|
||||
"max": 50,
|
||||
"strategy": "realistic"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**生成结果**: 2, 1, 5, 3, 1
|
||||
|
||||
---
|
||||
|
||||
### 6. 评分 (rating)
|
||||
|
||||
**说明**: 生成真实分布的评分数据
|
||||
|
||||
**参数**:
|
||||
|
||||
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|
||||
| -------- | ------------------------------------ | ---- | ----------- | -------- |
|
||||
| min | number | 否 | 1 | 最低分 |
|
||||
| max | number | 否 | 5 | 最高分 |
|
||||
| decimals | number | 否 | 1 | 小数位数 |
|
||||
| strategy | 'realistic' \| 'strict' \| 'uniform' | 否 | 'realistic' | 生成策略 |
|
||||
|
||||
**策略说明**:
|
||||
|
||||
| 策略 | 说明 | 适用场景 |
|
||||
| --------- | ------------------ | -------- |
|
||||
| realistic | 偏态分布，偏向高分 | 电商平台 |
|
||||
| strict | 偏态分布，偏向低分 | 严格评审 |
|
||||
| uniform | 均匀随机 | 测试数据 |
|
||||
|
||||
**示例**:
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "rating",
|
||||
"generator": "rating",
|
||||
"params": {
|
||||
"min": 1,
|
||||
"max": 5,
|
||||
"decimals": 1,
|
||||
"strategy": "realistic"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**生成结果**: 4.5, 4.8, 3.9, 5.0, 4.2
|
||||
|
||||
---
|
||||
|
||||
### 7. 折扣 (discount)
|
||||
|
||||
**说明**: 生成真实分布的折扣数据
|
||||
|
||||
**参数**:
|
||||
|
||||
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|
||||
| -------- | ------------------------------------------- | ---- | --------------- | -------- |
|
||||
| min | number | 否 | 0.1 | 最低折扣 |
|
||||
| max | number | 否 | 0.9 | 最高折扣 |
|
||||
| strategy | 'psychological' \| 'clearance' \| 'uniform' | 否 | 'psychological' | 生成策略 |
|
||||
|
||||
**策略说明**:
|
||||
|
||||
| 策略 | 说明 | 适用场景 |
|
||||
| ------------- | ------------------------ | -------- |
|
||||
| psychological | 常见折扣点（8折、9折等） | 电商促销 |
|
||||
| clearance | 大折扣区间（3-7折） | 清仓处理 |
|
||||
| uniform | 均匀随机 | 测试数据 |
|
||||
|
||||
**示例**:
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "discount",
|
||||
"generator": "discount",
|
||||
"params": {
|
||||
"min": 0.1,
|
||||
"max": 0.9,
|
||||
"strategy": "psychological"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**生成结果**: 0.80, 0.90, 0.85, 0.95, 0.70
|
||||
|
||||
---
|
||||
|
||||
### 8. 库存 (stock)
|
||||
|
||||
**说明**: 生成真实分布的库存数据
|
||||
|
||||
**参数**:
|
||||
|
||||
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|
||||
| -------- | --------------------------------- | ---- | ----------- | -------- |
|
||||
| min | number | 否 | 0 | 最小库存 |
|
||||
| max | number | 否 | 1000 | 最大库存 |
|
||||
| strategy | 'realistic' \| 'hot' \| 'uniform' | 否 | 'realistic' | 生成策略 |
|
||||
|
||||
**策略说明**:
|
||||
|
||||
| 策略 | 说明 | 适用场景 |
|
||||
| --------- | ------------------------ | -------- |
|
||||
| realistic | 指数分布，大多数库存较少 | 通用商品 |
|
||||
| hot | 低库存区间（0-50） | 热销商品 |
|
||||
| uniform | 均匀随机 | 测试数据 |
|
||||
|
||||
**示例**:
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "stock",
|
||||
"generator": "stock",
|
||||
"params": {
|
||||
"min": 0,
|
||||
"max": 500,
|
||||
"strategy": "realistic"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**生成结果**: 23, 8, 156, 45, 12
|
||||
|
||||
---
|
||||
|
||||
## 技术数据生成器
|
||||
|
||||
### 1. UUID (uuid)
|
||||
|
||||
**说明**: 生成 UUID
|
||||
|
||||
**参数**:
|
||||
|
||||
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|
||||
| ------- | ------------ | ---- | ------ | --------- |
|
||||
| version | 'v4' \| 'v1' | 否 | 'v4' | UUID 版本 |
|
||||
|
||||
**示例**:
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "id",
|
||||
"generator": "uuid",
|
||||
"params": {
|
||||
"version": "v4"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**生成结果**: 550e8400-e29b-41d4-a716-446655440000
|
||||
|
||||
---
|
||||
|
||||
### 2. IPv4 地址 (ipv4)
|
||||
|
||||
**说明**: 生成 IPv4 地址
|
||||
|
||||
**参数**:
|
||||
|
||||
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|
||||
| ------- | ------- | ---- | ------ | ------------ |
|
||||
| private | boolean | 否 | false | 是否私有地址 |
|
||||
|
||||
**示例**:
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "ip",
|
||||
"generator": "ipv4",
|
||||
"params": {
|
||||
"private": true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**生成结果**: 192.168.1.1, 10.0.0.1
|
||||
|
||||
---
|
||||
|
||||
### 3. URL (url)
|
||||
|
||||
**说明**: 生成 URL
|
||||
|
||||
**参数**:
|
||||
|
||||
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|
||||
| -------- | ----------------- | ---- | ------------- | ---- |
|
||||
| protocol | 'http' \| 'https' | 否 | 'https' | 协议 |
|
||||
| domain | string | 否 | 'example.com' | 域名 |
|
||||
|
||||
**示例**:
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "website",
|
||||
"generator": "url",
|
||||
"params": {
|
||||
"protocol": "https",
|
||||
"domain": "shop.com"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**生成结果**: https://shop.com/product/123
|
||||
|
||||
---
|
||||
|
||||
## 基础类型生成器
|
||||
|
||||
### 1. 随机整数 (randomInt)
|
||||
|
||||
**说明**: 生成指定范围的随机整数
|
||||
|
||||
**参数**:
|
||||
|
||||
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|
||||
| ------ | ------ | ---- | ------ | ------ |
|
||||
| min | number | 是 | - | 最小值 |
|
||||
| max | number | 是 | - | 最大值 |
|
||||
|
||||
**示例**:
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "age",
|
||||
"generator": "randomInt",
|
||||
"params": {
|
||||
"min": 18,
|
||||
"max": 60
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**生成结果**: 25, 42, 18, 60
|
||||
|
||||
---
|
||||
|
||||
### 2. 随机浮点数 (randomFloat)
|
||||
|
||||
**说明**: 生成指定范围的随机浮点数
|
||||
|
||||
**参数**:
|
||||
|
||||
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|
||||
| -------- | ------ | ---- | ------ | -------- |
|
||||
| min | number | 是 | - | 最小值 |
|
||||
| max | number | 是 | - | 最大值 |
|
||||
| decimals | number | 否 | 2 | 小数位数 |
|
||||
|
||||
**示例**:
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "score",
|
||||
"generator": "randomFloat",
|
||||
"params": {
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"decimals": 1
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**生成结果**: 85.3, 42.7, 99.9
|
||||
|
||||
---
|
||||
|
||||
### 3. 随机字符串 (randomString)
|
||||
|
||||
**说明**: 生成指定长度的随机字符串
|
||||
|
||||
**参数**:
|
||||
|
||||
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|
||||
| ------- | ------ | ---- | -------------- | ---------- |
|
||||
| length | number | 是 | - | 字符串长度 |
|
||||
| charset | string | 否 | 'alphanumeric' | 字符集 |
|
||||
|
||||
**示例**:
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "code",
|
||||
"generator": "randomString",
|
||||
"params": {
|
||||
"length": 8,
|
||||
"charset": "alphanumeric"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**生成结果**: aB3kL9mN, xY7zW2pQ
|
||||
|
||||
---
|
||||
|
||||
### 4. 从列表选择 (fromList)
|
||||
|
||||
**说明**: 从选项列表中随机选择
|
||||
|
||||
**参数**:
|
||||
|
||||
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|
||||
| ------- | -------- | ---- | -------- | -------- |
|
||||
| options | any[] | 是 | - | 选项列表 |
|
||||
| weights | number[] | 否 | 均匀分布 | 权重 |
|
||||
|
||||
**示例**:
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "category",
|
||||
"generator": "fromList",
|
||||
"params": {
|
||||
"options": ["电子产品", "服装", "食品", "图书"],
|
||||
"weights": [40, 30, 20, 10]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**生成结果**: 电子产品, 服装, 食品
|
||||
|
||||
---
|
||||
|
||||
## 生成器选择界面
|
||||
|
||||
### 界面设计
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────┐
|
||||
│ 选择生成器 │
|
||||
├─────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 搜索: [搜索生成器... ] │
|
||||
│ │
|
||||
│ 分类筛选 │
|
||||
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
|
||||
│ │ 全部 │ │ 个人信息 │ │ 业务数据 │ │ 技术数据 │ │ 基础类型 │ │
|
||||
│ └─────────┘ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │
|
||||
│ │
|
||||
│ 生成器列表 │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ 个人信息 │ │
|
||||
│ │ ┌─────────────────────────────────────────────────────────┐ │ │
|
||||
│ │ │ 中文姓名 生成中文姓名，如张三 │ │ │
|
||||
│ │ │ 邮箱地址 生成邮箱地址 │ │ │
|
||||
│ │ │ 中国手机号 生成11位手机号 │ │ │
|
||||
│ │ │ 身份证号 生成18位身份证号 │ │ │
|
||||
│ │ │ 中文地址 生成中国地址 │ │ │
|
||||
│ │ └─────────────────────────────────────────────────────────┘ │ │
|
||||
│ │ │ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
@@ -0,0 +1,481 @@
|
||||
# 规则管理
|
||||
|
||||
## 功能概览
|
||||
|
||||
| 功能 | 说明 | 优先级 |
|
||||
| -------- | -------------------- | ------ |
|
||||
| 保存规则 | 将当前配置保存为模板 | P0 |
|
||||
| 规则列表 | 查看所有已保存的规则 | P0 |
|
||||
| 规则搜索 | 按关键词搜索规则 | P1 |
|
||||
| 规则编辑 | 修改已保存的规则 | P0 |
|
||||
| 规则删除 | 删除不需要的规则 | P0 |
|
||||
| 规则加载 | 一键加载规则配置 | P0 |
|
||||
| 规则复制 | 复制规则配置 | P1 |
|
||||
| 规则导出 | 导出为 JSON 文件 | P1 |
|
||||
| 规则导入 | 从 JSON 文件导入 | P1 |
|
||||
|
||||
## 规则数量限制
|
||||
|
||||
- **最大规则数量**: 20 条
|
||||
- **超出限制**: 当规则数量达到 20 条时，保存按钮置灰，提示"已达到最大规则数量"
|
||||
- **解决方式**: 用户需要删除已有规则后才能保存新规则
|
||||
|
||||
---
|
||||
|
||||
## 数据结构
|
||||
|
||||
### 规则模板
|
||||
|
||||
```typescript
|
||||
interface DataRule {
|
||||
id: string; // 唯一标识
|
||||
name: string; // 规则名称
|
||||
description?: string; // 规则描述
|
||||
fields: FieldConfig[]; // 字段配置
|
||||
options: {
|
||||
total: number; // 生成数量
|
||||
format: 'json' | 'csv';
|
||||
defaultEmptyRate: number; // 默认空值率（0-100）
|
||||
};
|
||||
metadata: {
|
||||
createdAt: number; // 创建时间
|
||||
updatedAt: number; // 更新时间
|
||||
lastUsedAt?: number; // 最后使用时间
|
||||
useCount: number; // 使用次数
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
### 字段配置
|
||||
|
||||
```typescript
|
||||
interface FieldConfig {
|
||||
id: string; // 字段唯一标识
|
||||
name: string; // 字段名
|
||||
generator: string; // 生成器名称
|
||||
params: Record<string, any>; // 生成器参数
|
||||
unique: boolean; // 唯一性约束
|
||||
required: boolean; // 是否必填
|
||||
emptyRate?: number; // 选填字段的空值概率（0-100）
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 功能详情
|
||||
|
||||
### 1. 保存规则
|
||||
|
||||
**触发方式**: 用户点击"保存规则"按钮
|
||||
|
||||
**界面设计**:
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────┐
|
||||
│ 保存规则 │
|
||||
├─────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 规则信息 │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ 规则名称: │ │
|
||||
│ │ ┌─────────────────────────────────────────────────────────┐ │ │
|
||||
│ │ │ [电商用户数据 - 测试用 ]│ │ │
|
||||
│ │ └─────────────────────────────────────────────────────────┘ │ │
|
||||
│ │ │ │
|
||||
│ │ 规则描述 (可选): │ │
|
||||
│ │ ┌─────────────────────────────────────────────────────────┐ │ │
|
||||
│ │ │ [用于测试用户注册功能，包含姓名、邮箱、手机号 ]│ │ │
|
||||
│ │ └─────────────────────────────────────────────────────────┘ │ │
|
||||
│ │ │ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ 规则预览 │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ 字段数量: 4 个 │ │
|
||||
│ │ • name (中文姓名) │ │
|
||||
│ │ • email (邮箱地址) │ │
|
||||
│ │ • phone (手机号) │ │
|
||||
│ │ • age (年龄) │ │
|
||||
│ │ │ │
|
||||
│ │ 生成数量: 100 条 │ │
|
||||
│ │ 数据格式: JSON │ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ [保存] [取消] │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**保存逻辑**:
|
||||
|
||||
1. 验证规则名称不为空
|
||||
2. 检查规则数量是否达到上限（20 条）
|
||||
3. 如果达到上限，显示提示"已达到最大规则数量"
|
||||
4. 生成唯一 ID
|
||||
5. 设置创建时间和更新时间
|
||||
6. 初始化使用次数为 0
|
||||
7. 保存到 localStorage
|
||||
|
||||
---
|
||||
|
||||
### 2. 规则列表
|
||||
|
||||
**界面设计**:
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────┐
|
||||
│ 规则管理 │
|
||||
├─────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 搜索: [搜索规则名称... ] │
|
||||
│ │
|
||||
│ 规则列表 (已保存 15/20 条) │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ │ │
|
||||
│ │ ┌─────────────────────────────────────────────────────────┐ │ │
|
||||
│ │ │ 电商用户数据 - 测试用 │ │ │
|
||||
│ │ │ ─────────────────────────────────────────────────────── │ │ │
|
||||
│ │ │ 用于测试用户注册功能，包含姓名、邮箱、手机号 │ │ │
|
||||
│ │ │ 4 个字段 | 100 条 | JSON │ │ │
|
||||
│ │ │ 2024-01-15 14:30 创建 | 2024-01-20 10:15 最后使用 │ │ │
|
||||
│ │ │ │ │ │
|
||||
│ │ │ [加载] [复制] [导出] [编辑] [删除] │ │ │
|
||||
│ │ └─────────────────────────────────────────────────────────┘ │ │
|
||||
│ │ │ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ [导入规则] [导出全部] [清空全部] │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**列表项信息**:
|
||||
|
||||
- 规则名称
|
||||
- 规则描述
|
||||
- 字段数量、生成数量、数据格式
|
||||
- 创建时间、最后使用时间
|
||||
- 操作按钮
|
||||
|
||||
---
|
||||
|
||||
### 3. 规则搜索
|
||||
|
||||
**搜索逻辑**:
|
||||
|
||||
- 支持按规则名称搜索
|
||||
- 支持按规则描述搜索
|
||||
- 搜索为模糊匹配，不区分大小写
|
||||
|
||||
**实现方式**:
|
||||
|
||||
```typescript
|
||||
search(keyword: string): DataRule[] {
|
||||
const rules = this.getAll();
|
||||
const lowerKeyword = keyword.toLowerCase();
|
||||
|
||||
return rules.filter(r =>
|
||||
r.name.toLowerCase().includes(lowerKeyword) ||
|
||||
r.description?.toLowerCase().includes(lowerKeyword)
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 4. 规则编辑
|
||||
|
||||
**界面设计**:
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────┐
|
||||
│ 编辑规则 - 电商用户数据 │
|
||||
├─────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 基本信息 │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ 规则名称: [电商用户数据 - 测试用 ]│ │
|
||||
│ │ 规则描述: [用于测试用户注册功能，包含姓名、邮箱、手机号 ]│ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ 字段配置 (可直接编辑) │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ │ │
|
||||
│ │ 1. name [中文姓名 ▼] [配置] [删除] [上移][下移] │ │
|
||||
│ │ 2. email [邮箱地址 ▼] [配置] [删除] [上移][下移] │ │
|
||||
│ │ 3. phone [手机号 ▼] [配置] [删除] [上移][下移] │ │
|
||||
│ │ 4. age [年龄 ▼] [配置] [删除] [上移][下移] │ │
|
||||
│ │ │ │
|
||||
│ │ [+ 添加字段] │ │
|
||||
│ │ │ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ 生成选项 │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ 数量: [100] 格式: [JSON ▼] │ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ [保存修改] [取消] │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**编辑逻辑**:
|
||||
|
||||
1. 加载原规则配置到编辑器
|
||||
2. 用户修改配置
|
||||
3. 点击保存时更新规则
|
||||
4. 更新 metadata.updatedAt
|
||||
5. 保存到 localStorage
|
||||
|
||||
---
|
||||
|
||||
### 5. 规则删除
|
||||
|
||||
**删除流程**:
|
||||
|
||||
1. 点击删除按钮
|
||||
2. 弹出确认对话框
|
||||
3. 确认后删除规则
|
||||
4. 刷新规则列表
|
||||
|
||||
**确认对话框**:
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────┐
|
||||
│ 确认删除 │
|
||||
├─────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 确定要删除规则 "电商用户数据" 吗？ │
|
||||
│ │
|
||||
│ 此操作不可撤销。 │
|
||||
│ │
|
||||
│ [取消] [删除] │
|
||||
│ │
|
||||
└─────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 6. 规则加载
|
||||
|
||||
**加载流程**:
|
||||
|
||||
1. 点击"加载"按钮
|
||||
2. 将规则配置应用到当前编辑器
|
||||
3. 更新预览数据
|
||||
4. 记录使用时间和次数
|
||||
|
||||
**实现方式**:
|
||||
|
||||
```typescript
|
||||
loadRule(ruleId: string): void {
|
||||
const rule = this.storage.getById(ruleId);
|
||||
|
||||
// 应用规则配置
|
||||
this.setFields(rule.fields);
|
||||
this.setOptions(rule.options);
|
||||
|
||||
// 记录使用
|
||||
this.storage.recordUse(ruleId);
|
||||
|
||||
// 更新预览
|
||||
this.updatePreview();
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 7. 规则复制
|
||||
|
||||
**复制逻辑**:
|
||||
|
||||
1. 点击"复制"按钮
|
||||
2. 创建规则的副本
|
||||
3. 名称添加"(副本)"后缀
|
||||
4. 生成新的 ID
|
||||
5. 保存为新规则
|
||||
|
||||
---
|
||||
|
||||
### 8. 规则导出
|
||||
|
||||
**导出界面**:
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────┐
|
||||
│ 导出规则 │
|
||||
├─────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 选择要导出的规则: │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ ☑ 电商用户数据 - 测试用 (4个字段, 100条) │ │
|
||||
│ │ ☑ 电商订单数据 - 测试用 (6个字段, 500条) │ │
|
||||
│ │ ☐ 用户登录数据 - 测试用 (3个字段, 50条) │ │
|
||||
│ │ │ │
|
||||
│ │ [全选] [全不选] │ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ 导出格式: │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ ○ 导出为单个 JSON 文件 (所有规则合并) │ │
|
||||
│ │ ● 导出为多个 JSON 文件 (每个规则一个文件) │ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ [导出] [取消] │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**导出格式**:
|
||||
|
||||
```json
|
||||
{
|
||||
"version": "1.0",
|
||||
"exportedAt": "2024-01-20T10:15:45.000Z",
|
||||
"rules": [
|
||||
{
|
||||
"id": "rule_123456",
|
||||
"name": "电商用户数据 - 测试用",
|
||||
"description": "用于测试用户注册功能",
|
||||
"fields": [...],
|
||||
"options": {...},
|
||||
"metadata": {...}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 9. 规则导入
|
||||
|
||||
**导入界面**:
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────┐
|
||||
│ 导入规则 │
|
||||
├─────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 选择导入方式: │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ │ │
|
||||
│ │ ○ 从文件导入 │ │
|
||||
│ │ ┌─────────────────────────────────────────────────────┐ │ │
|
||||
│ │ │ 拖拽文件到这里，或 [点击选择文件] │ │ │
|
||||
│ │ │ 支持格式: .json │ │ │
|
||||
│ │ └─────────────────────────────────────────────────────┘ │ │
|
||||
│ │ │ │
|
||||
│ │ ○ 从剪贴板粘贴 │ │
|
||||
│ │ ┌─────────────────────────────────────────────────────┐ │ │
|
||||
│ │ │ 粘贴 JSON 规则内容... │ │ │
|
||||
│ │ └─────────────────────────────────────────────────────┘ │ │
|
||||
│ │ │ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ 预览导入内容: │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ 格式验证通过 │ │
|
||||
│ │ 规则数量: 2 个 │ │
|
||||
│ │ • 电商用户数据 (4个字段) │ │
|
||||
│ │ • 电商订单数据 (6个字段) │ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ [导入] [取消] │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**导入逻辑**:
|
||||
|
||||
1. 解析 JSON 文件
|
||||
2. 验证格式是否正确
|
||||
3. 预览导入内容
|
||||
4. 确认后逐条导入
|
||||
5. 生成新 ID 避免冲突
|
||||
6. 处理导入结果（成功/失败数量）
|
||||
|
||||
---
|
||||
|
||||
## 存储机制
|
||||
|
||||
### 本地存储
|
||||
|
||||
使用 localStorage 存储规则数据:
|
||||
|
||||
```typescript
|
||||
class RuleStorage {
|
||||
private readonly STORAGE_KEY = 'testDataGenerator_rules';
|
||||
|
||||
// 获取所有规则
|
||||
getAll(): DataRule[] {
|
||||
const data = localStorage.getItem(this.STORAGE_KEY);
|
||||
return data ? JSON.parse(data) : [];
|
||||
}
|
||||
|
||||
// 保存规则
|
||||
save(rule: DataRule): { success: boolean; message?: string } {
|
||||
const rules = this.getAll();
|
||||
|
||||
// 规则数量限制：最多 20 条
|
||||
const MAX_RULES = 20;
|
||||
if (rules.length >= MAX_RULES) {
|
||||
return {
|
||||
success: false,
|
||||
message: `已达到最大规则数量（${MAX_RULES}条），请删除一些规则后再保存`,
|
||||
};
|
||||
}
|
||||
|
||||
rules.push(rule);
|
||||
localStorage.setItem(this.STORAGE_KEY, JSON.stringify(rules));
|
||||
return { success: true };
|
||||
}
|
||||
|
||||
// 更新规则
|
||||
update(id: string, updates: Partial<DataRule>): void {
|
||||
const rules = this.getAll();
|
||||
const index = rules.findIndex((r) => r.id === id);
|
||||
if (index !== -1) {
|
||||
rules[index] = { ...rules[index], ...updates };
|
||||
localStorage.setItem(this.STORAGE_KEY, JSON.stringify(rules));
|
||||
}
|
||||
}
|
||||
|
||||
// 删除规则
|
||||
delete(id: string): void {
|
||||
const rules = this.getAll();
|
||||
const filtered = rules.filter((r) => r.id !== id);
|
||||
localStorage.setItem(this.STORAGE_KEY, JSON.stringify(filtered));
|
||||
}
|
||||
|
||||
// 记录使用
|
||||
recordUse(id: string): void {
|
||||
const rules = this.getAll();
|
||||
const rule = rules.find((r) => r.id === id);
|
||||
if (rule) {
|
||||
rule.metadata.lastUsedAt = Date.now();
|
||||
rule.metadata.useCount++;
|
||||
localStorage.setItem(this.STORAGE_KEY, JSON.stringify(rules));
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 存储限制
|
||||
|
||||
- **规则数量限制**: 最多 20 条
|
||||
- localStorage 容量: 5-10MB（浏览器限制）
|
||||
- 单个规则约 1-5KB
|
||||
- 预计可存储 1000-5000 个规则（但受数量限制，最多 20 条）
|
||||
|
||||
---
|
||||
|
||||
## 功能亮点
|
||||
|
||||
| 亮点 | 说明 |
|
||||
| -------- | ------------------------------ |
|
||||
| 本地存储 | 数据保存在浏览器本地，无需后端 |
|
||||
| 快速复用 | 一键加载已保存的规则 |
|
||||
| 导入导出 | 支持 JSON 文件导入导出 |
|
||||
| 使用统计 | 记录使用次数和时间 |
|
||||
| 搜索筛选 | 支持关键词搜索 |
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,489 @@
|
||||
# 界面设计
|
||||
|
||||
## 设计原则
|
||||
|
||||
1. **简洁直观** - 一目了然的布局
|
||||
2. **操作便捷** - 减少点击次数
|
||||
3. **实时反馈** - 配置即预览
|
||||
4. **响应式** - 支持多种屏幕尺寸
|
||||
|
||||
---
|
||||
|
||||
## 页面结构
|
||||
|
||||
### 主页面布局
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────┐
|
||||
│ 🧪 测试数据生成器 [帮助] │
|
||||
├─────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌─────────────────────────────────────┐ ┌───────────────────────┐ │
|
||||
│ │ 字段配置 │ │ 数据预览 │ │
|
||||
│ │ │ │ │ │
|
||||
│ │ [+ 添加字段] │ │ [实时预览数据] │ │
|
||||
│ │ │ │ │ │
|
||||
│ │ 字段列表... │ │ │ │
|
||||
│ │ │ │ │ │
|
||||
│ └─────────────────────────────────────┘ └───────────────────────┘ │
|
||||
│ │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ 生成选项 │ │
|
||||
│ │ 数量、格式、约束... │ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ 操作栏 │ │
|
||||
│ │ [生成] [保存规则] [规则管理] │ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 组件设计
|
||||
|
||||
### 1. 字段列表组件
|
||||
|
||||
**功能**: 展示和管理所有字段
|
||||
|
||||
**界面**:
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────┐
|
||||
│ 字段配置 │
|
||||
├─────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ [+ 添加字段] │
|
||||
│ │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ 1. name [中文姓名 ▼] [配置] [删除] [上移][下移] │ │
|
||||
│ │ 2. email [邮箱地址 ▼] [配置] [删除] [上移][下移] │ │
|
||||
│ │ 3. phone [手机号 ▼] [配置] [删除] [上移][下移] │ │
|
||||
│ │ 4. age [年龄 ▼] [配置] [删除] [上移][下移] │ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ [+ 添加字段] │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**交互**:
|
||||
|
||||
- 点击字段名可编辑
|
||||
- 点击生成器下拉框可切换生成器
|
||||
- 点击 配置 展开参数配置
|
||||
- 点击 删除 删除字段
|
||||
- 点击 上移下移 调整顺序
|
||||
|
||||
---
|
||||
|
||||
### 2. 字段配置组件
|
||||
|
||||
**功能**: 配置单个字段的详细参数
|
||||
|
||||
**界面**:
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────┐
|
||||
│ 字段配置 │
|
||||
├─────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 基础配置 │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ 字段名称: [name ] │ │
|
||||
│ │ 字段描述: [用户姓名 ] │ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ 生成器选择 │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ 分类: [个人信息 ▼] │ │
|
||||
│ │ 生成器: [中文姓名 ▼] │ │
|
||||
│ │ 说明: 生成中文姓名，如张三、李四 │ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ 参数配置 │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ 姓氏池: [百家姓前100 ▼] │ │
|
||||
│ │ 名字长度: [1] ~ [2] │ │
|
||||
│ │ ☑ 唯一性约束 │ │
|
||||
│ │ ☑ 必填 │ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ 空值率设置 (仅选填字段显示) │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ 空值概率: [====|----] 50% │ │
|
||||
│ │ 预设: [低 20%] [中 50%] [高 80%] │ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ 预览示例 │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ 张伟, 李娜, 王强, 赵敏, 刘洋 │ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ [保存] [取消] │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**交互说明**:
|
||||
|
||||
- **必填复选框**: 勾选后该字段必填，100% 生成数据
|
||||
- **空值率设置**: 仅当选填时显示，控制该字段生成空值的概率
|
||||
- **预设按钮**: 快速设置常用空值率（低/中/高）
|
||||
- **空值率滑块**: 精细调节空值概率（0-100%）
|
||||
|
||||
---
|
||||
|
||||
### 3. 数据预览组件
|
||||
|
||||
**功能**: 实时预览生成的数据
|
||||
|
||||
**界面**:
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────┐
|
||||
│ 数据预览 │
|
||||
├─────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 预览: 前 10 条 │
|
||||
│ │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ { │ │
|
||||
│ │ "name": "张伟", │ │
|
||||
│ │ "email": "zhangwei@qq.com", │ │
|
||||
│ │ "phone": "13812345678", │ │
|
||||
│ │ "age": 28 │ │
|
||||
│ │ }, │ │
|
||||
│ │ { │ │
|
||||
│ │ "name": "李娜", │ │
|
||||
│ │ "email": "lina@163.com", │ │
|
||||
│ │ "phone": "13987654321", │ │
|
||||
│ │ "age": 35 │ │
|
||||
│ │ }, │ │
|
||||
│ │ ... │ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ 格式切换: │
|
||||
│ [JSON] [CSV] │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**功能**:
|
||||
|
||||
- 实时更新预览
|
||||
- 支持格式切换
|
||||
- 分页显示更多数据
|
||||
- 一键复制
|
||||
|
||||
---
|
||||
|
||||
### 4. 生成选项组件
|
||||
|
||||
**功能**: 配置生成参数
|
||||
|
||||
**界面**:
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────┐
|
||||
│ 生成选项 │
|
||||
├─────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌─────────────────┐ ┌─────────────────┐ ┌───────────────────────┐ │
|
||||
│ │ 生成数量 │ │ 数据格式 │ │ 约束条件 │ │
|
||||
│ │ │ │ │ │ │ │
|
||||
│ │ [100 ] │ │ ○ JSON │ │ ☑ name 唯一 │ │
|
||||
│ │ [10 ▼] │ │ ○ CSV │ │ ☑ email 唯一 │ │
|
||||
│ │ [100 ▼] │ │ │ │ ☑ phone 唯一 │ │
|
||||
│ │ [自定义 ] │ │ │ │ ☐ age 唯一 │ │
|
||||
│ │ │ │ │ │ │ │
|
||||
│ └─────────────────┘ └─────────────────┘ └───────────────────────┘ │
|
||||
│ │
|
||||
│ 默认空值率 (选填字段) │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ 空值概率: [====|----] 50% │ │
|
||||
│ │ 预设: [低 20%] [中 50%] [高 80%] │ │
|
||||
│ │ 说明: 未单独设置空值率的选填字段将使用此默认值 │ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 5. 操作栏组件
|
||||
|
||||
**功能**: 顶部操作按钮
|
||||
|
||||
**界面**:
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────┐
|
||||
│ 操作栏 │
|
||||
├─────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ [生成数据] [保存规则] [规则管理] [导入规则] [导出]│
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 6. 生成结果组件
|
||||
|
||||
**功能**: 展示生成结果，包含成功、警告、错误三种状态
|
||||
|
||||
**成功状态界面**:
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────┐
|
||||
│ 生成结果 │
|
||||
├─────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 生成完成 │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ [成功图标] 成功生成 100 条数据，耗时 1234ms │ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ 数据统计: │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ • 总条数: 100 │ │
|
||||
│ │ • 成功条数: 100 │ │
|
||||
│ │ • 失败条数: 0 │ │
|
||||
│ │ • 文件大小: 12.5 KB │ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ 数据预览: │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ [JSON 格式预览...] │ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ 导出选项: │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ [复制全部] [下载 JSON] [下载 CSV] │ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ [关闭] │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**警告状态界面（部分字段失败）**:
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────┐
|
||||
│ 生成结果 │
|
||||
├─────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 部分字段生成失败 │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ [警告图标] 有 2 个字段生成失败 │ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ 失败详情: │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ [警告图标] "phone" - 重试 100 次后仍存在重复 │ │
|
||||
│ │ [警告图标] "email" - 重试 100 次后仍存在重复 │ │
|
||||
│ │ │ │
|
||||
│ │ 提示: 这些字段的值已设置为空，您可以尝试减少生成数量 │ │
|
||||
│ │ 或调整字段配置 │ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ 数据统计: │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ • 总条数: 100 │ │
|
||||
│ │ • 成功条数: 98 │ │
|
||||
│ │ • 失败条数: 2 │ │
|
||||
│ │ • 文件大小: 12.3 KB │ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ 数据预览: │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ [JSON 格式预览...] │ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ 导出选项: │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ [复制全部] [下载 JSON] [下载 CSV] │ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ [关闭] │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**错误状态界面（生成失败）**:
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────┐
|
||||
│ 生成失败 │
|
||||
├─────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ [错误图标] 生成过程中发生错误 │ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ 错误详情: │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ │ │
|
||||
│ │ 错误类型: 生成器不存在 │ │
|
||||
│ │ 错误信息: 字段 "phone" 的生成器 "chinesePhone1" 不存在 │ │
|
||||
│ │ 错误位置: 字段配置第 2 行 │ │
|
||||
│ │ │ │
|
||||
│ │ 建议操作: │ │
|
||||
│ │ 1. 检查字段配置中的生成器名称是否正确 │ │
|
||||
│ │ 2. 确认该生成器已正确注册 │ │
|
||||
│ │ │ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ [重新配置] [关闭] │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 6.1 Toast 提示组件
|
||||
|
||||
**功能**: 显示临时提示信息
|
||||
|
||||
**成功提示**:
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ [成功图标] 数据生成成功 │
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**警告提示**:
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ [警告图标] 有 2 个字段生成失败：phone、email │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**错误提示**:
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ [错误图标] 生成失败：生成器 "xxx" 不存在 │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 6.2 Modal 提示组件
|
||||
|
||||
**功能**: 显示严重错误的模态框
|
||||
|
||||
**错误模态框**:
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ │
|
||||
│ ┌───────────────────────────────────────────────────────┐ │
|
||||
│ │ │ │
|
||||
│ │ [错误图标] 生成失败 │ │
|
||||
│ │ │ │
|
||||
│ │ 字段 "phone" 的生成器 "chinesePhone1" 不存在 │ │
|
||||
│ │ │ │
|
||||
│ │ 请检查字段配置中的生成器名称是否正确 │ │
|
||||
│ │ │ │
|
||||
│ │ ─────────────────────────────────────────────────── │ │
|
||||
│ │ │ │
|
||||
│ │ [ 确定 ] │ │
|
||||
│ │ │ │
|
||||
│ └───────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 7. 规则管理组件
|
||||
|
||||
**功能**: 管理已保存的规则
|
||||
|
||||
**界面**:
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────┐
|
||||
│ 规则管理 │
|
||||
├─────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 搜索: [搜索规则名称... ] │
|
||||
│ │
|
||||
│ 规则列表: │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ 电商用户数据 - 测试用 │ │
|
||||
│ │ 用于测试用户注册功能 │ │
|
||||
│ │ 4 个字段 | 100 条 | JSON │ │
|
||||
│ │ 2024-01-15 创建 | 使用 12 次 │ │
|
||||
│ │ [加载] [编辑] [导出] [删除] │ │
|
||||
│ │ │ │
|
||||
│ │ 电商订单数据 - 测试用 │ │
|
||||
│ │ 用于测试订单功能 │ │
|
||||
│ │ 6 个字段 | 500 条 | JSON │ │
|
||||
│ │ 2024-01-16 创建 | 使用 8 次 │ │
|
||||
│ │ [加载] [编辑] [导出] [删除] │ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ [导入规则] [导出全部] │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 响应式设计
|
||||
|
||||
### 桌面端 (>1024px)
|
||||
|
||||
- 左右分栏布局
|
||||
- 字段配置区占 60%
|
||||
- 数据预览区占 40%
|
||||
|
||||
---
|
||||
|
||||
## 交互细节
|
||||
|
||||
### 拖拽排序
|
||||
|
||||
- 字段支持拖拽排序（基于 @dnd-kit/sortable）
|
||||
- 拖拽手柄（GripVertical 图标）位于字段左侧
|
||||
- 拖拽时显示半透明效果和阴影
|
||||
- 释放后立即生效，自动更新字段顺序
|
||||
|
||||
### 实时预览
|
||||
|
||||
- 配置参数时实时更新预览
|
||||
- 延迟 300ms 防抖，避免频繁重渲染
|
||||
- 预览最多显示 10 条示例数据
|
||||
- 生成完成后切换为完整结果预览
|
||||
|
||||
### 虚拟列表
|
||||
|
||||
- 数据量超过 100 条时自动启用虚拟滚动
|
||||
- 仅渲染可见区域的行，大幅减少 DOM 节点
|
||||
- 行高固定 20px，支持快速滚动
|
||||
|
||||
---
|
||||
|
||||
## 主题支持
|
||||
|
||||
### 浅色主题
|
||||
|
||||
- 背景色: #ffffff
|
||||
- 文字色: #333333
|
||||
- 边框色: #e0e0e0
|
||||
- 主题色: #3b82f6
|
||||
|
||||
### 深色主题
|
||||
|
||||
- 背景色: #1a1a1a
|
||||
- 文字色: #ffffff
|
||||
- 边框色: #404040
|
||||
- 主题色: #60a5fa
|
||||
@@ -12,7 +12,6 @@
|
||||
| `icon/48.png` | 48×48 图标（扩展管理页） |
|
||||
| `icon/96.png` | 96×96 图标 |
|
||||
| `icon/128.png` | 128×128 图标（Chrome Web Store） |
|
||||
| `wxt.svg` | WXT 框架标志 SVG 图标 |
|
||||
|
||||
## 注意事项
|
||||
|
||||
|
||||
@@ -7,7 +7,6 @@
|
||||
"message": "清理",
|
||||
"description": "Translation key: buttons_clear"
|
||||
},
|
||||
|
||||
"messages_copySuccess": {
|
||||
"message": "已复制到剪贴板",
|
||||
"description": "Translation key: messages_copySuccess"
|
||||
@@ -896,7 +895,6 @@
|
||||
"message": "在标签页打开",
|
||||
"description": "Translation key: buttons_openInTab"
|
||||
},
|
||||
|
||||
"common_errorBoundary_title": {
|
||||
"message": "糟糕，出了点问题",
|
||||
"description": "Translation key: errorBoundary_title"
|
||||
@@ -920,5 +918,387 @@
|
||||
"common_pageErrorBoundary_description": {
|
||||
"message": "该页面在加载或渲染时遇到了内部脚本错误。您可以尝试重试，或者通过导航菜单切换到其他工具。",
|
||||
"description": "Translation key: pageErrorBoundary_description"
|
||||
},
|
||||
"testDataGenerator_title": {
|
||||
"message": "测试数据生成器",
|
||||
"description": "Translation key: testDataGenerator_title"
|
||||
},
|
||||
"testDataGenerator_description": {
|
||||
"message": "自定义字段配置，批量生成测试数据",
|
||||
"description": "Translation key: testDataGenerator_description"
|
||||
},
|
||||
"testDataGenerator_fields": {
|
||||
"message": "字段",
|
||||
"description": "Translation key: testDataGenerator_fields"
|
||||
},
|
||||
"testDataGenerator_addField": {
|
||||
"message": "添加字段",
|
||||
"description": "Translation key: testDataGenerator_addField"
|
||||
},
|
||||
"testDataGenerator_noFields": {
|
||||
"message": "暂无字段",
|
||||
"description": "Translation key: testDataGenerator_noFields"
|
||||
},
|
||||
"testDataGenerator_addFieldHint": {
|
||||
"message": "点击上方按钮添加第一个字段",
|
||||
"description": "Translation key: testDataGenerator_addFieldHint"
|
||||
},
|
||||
"testDataGenerator_unique": {
|
||||
"message": "唯一",
|
||||
"description": "Translation key: testDataGenerator_unique"
|
||||
},
|
||||
"testDataGenerator_fieldName": {
|
||||
"message": "字段名称",
|
||||
"description": "Translation key: testDataGenerator_fieldName"
|
||||
},
|
||||
"testDataGenerator_fieldNamePlaceholder": {
|
||||
"message": "请输入字段名称",
|
||||
"description": "Translation key: testDataGenerator_fieldNamePlaceholder"
|
||||
},
|
||||
"testDataGenerator_fieldDescription": {
|
||||
"message": "字段描述",
|
||||
"description": "Translation key: testDataGenerator_fieldDescription"
|
||||
},
|
||||
"testDataGenerator_fieldDescriptionPlaceholder": {
|
||||
"message": "可选，添加字段说明",
|
||||
"description": "Translation key: testDataGenerator_fieldDescriptionPlaceholder"
|
||||
},
|
||||
"testDataGenerator_required": {
|
||||
"message": "必填",
|
||||
"description": "Translation key: testDataGenerator_required"
|
||||
},
|
||||
"testDataGenerator_nullRate": {
|
||||
"message": "空值率",
|
||||
"description": "Translation key: testDataGenerator_nullRate"
|
||||
},
|
||||
"testDataGenerator_uniqueConstraint": {
|
||||
"message": "唯一性约束",
|
||||
"description": "Translation key: testDataGenerator_uniqueConstraint"
|
||||
},
|
||||
"testDataGenerator_generator": {
|
||||
"message": "数据生成器",
|
||||
"description": "Translation key: testDataGenerator_generator"
|
||||
},
|
||||
"testDataGenerator_generatorParams": {
|
||||
"message": "生成器参数",
|
||||
"description": "Translation key: testDataGenerator_generatorParams"
|
||||
},
|
||||
"testDataGenerator_searchGenerator": {
|
||||
"message": "搜索生成器...",
|
||||
"description": "Translation key: testDataGenerator_searchGenerator"
|
||||
},
|
||||
"testDataGenerator_searchResults": {
|
||||
"message": "搜索结果",
|
||||
"description": "Translation key: testDataGenerator_searchResults"
|
||||
},
|
||||
"testDataGenerator_fieldConfig": {
|
||||
"message": "字段配置",
|
||||
"description": "Translation key: testDataGenerator_fieldConfig"
|
||||
},
|
||||
"testDataGenerator_ruleManagement": {
|
||||
"message": "规则管理",
|
||||
"description": "Translation key: testDataGenerator_ruleManagement"
|
||||
},
|
||||
"testDataGenerator_selectFieldToEdit": {
|
||||
"message": "选择左侧字段进行编辑",
|
||||
"description": "Translation key: testDataGenerator_selectFieldToEdit"
|
||||
},
|
||||
"testDataGenerator_count": {
|
||||
"message": "生成数量",
|
||||
"description": "Translation key: testDataGenerator_count"
|
||||
},
|
||||
"testDataGenerator_format": {
|
||||
"message": "数据格式",
|
||||
"description": "Translation key: testDataGenerator_format"
|
||||
},
|
||||
"testDataGenerator_generate": {
|
||||
"message": "生成数据",
|
||||
"description": "Translation key: testDataGenerator_generate"
|
||||
},
|
||||
"testDataGenerator_cancel": {
|
||||
"message": "取消",
|
||||
"description": "Translation key: testDataGenerator_cancel"
|
||||
},
|
||||
"testDataGenerator_progress": {
|
||||
"message": "已生成 {{current}} / {{total}} 条",
|
||||
"description": "Translation key: testDataGenerator_progress"
|
||||
},
|
||||
"testDataGenerator_estimatedTime": {
|
||||
"message": "预计剩余 {{time}} 秒",
|
||||
"description": "Translation key: testDataGenerator_estimatedTime"
|
||||
},
|
||||
"testDataGenerator_dataPreview": {
|
||||
"message": "数据预览",
|
||||
"description": "Translation key: testDataGenerator_dataPreview"
|
||||
},
|
||||
"testDataGenerator_noData": {
|
||||
"message": "暂无数据",
|
||||
"description": "Translation key: testDataGenerator_noData"
|
||||
},
|
||||
"testDataGenerator_noDataHint": {
|
||||
"message": "配置字段后点击「生成数据」按钮",
|
||||
"description": "Translation key: testDataGenerator_noDataHint"
|
||||
},
|
||||
"testDataGenerator_sampleData": {
|
||||
"message": "示例数据",
|
||||
"description": "Translation key: testDataGenerator_sampleData"
|
||||
},
|
||||
"testDataGenerator_copied": {
|
||||
"message": "已复制",
|
||||
"description": "Translation key: testDataGenerator_copied"
|
||||
},
|
||||
"testDataGenerator_copy": {
|
||||
"message": "复制",
|
||||
"description": "Translation key: testDataGenerator_copy"
|
||||
},
|
||||
"testDataGenerator_pageInfo": {
|
||||
"message": "第 {{current}} / {{total}} 页",
|
||||
"description": "Translation key: testDataGenerator_pageInfo"
|
||||
},
|
||||
"testDataGenerator_prevPage": {
|
||||
"message": "上一页",
|
||||
"description": "Translation key: testDataGenerator_prevPage"
|
||||
},
|
||||
"testDataGenerator_nextPage": {
|
||||
"message": "下一页",
|
||||
"description": "Translation key: testDataGenerator_nextPage"
|
||||
},
|
||||
"testDataGenerator_success": {
|
||||
"message": "生成成功",
|
||||
"description": "Translation key: testDataGenerator_success"
|
||||
},
|
||||
"testDataGenerator_generateSuccess": {
|
||||
"message": "生成完成",
|
||||
"description": "Translation key: testDataGenerator_generateSuccess"
|
||||
},
|
||||
"testDataGenerator_records": {
|
||||
"message": "条数据",
|
||||
"description": "Translation key: testDataGenerator_records"
|
||||
},
|
||||
"testDataGenerator_partialSuccess": {
|
||||
"message": "部分成功",
|
||||
"description": "Translation key: testDataGenerator_partialSuccess"
|
||||
},
|
||||
"testDataGenerator_failed": {
|
||||
"message": "生成失败",
|
||||
"description": "Translation key: testDataGenerator_failed"
|
||||
},
|
||||
"testDataGenerator_totalCount": {
|
||||
"message": "总条数",
|
||||
"description": "Translation key: testDataGenerator_totalCount"
|
||||
},
|
||||
"testDataGenerator_successCount": {
|
||||
"message": "成功",
|
||||
"description": "Translation key: testDataGenerator_successCount"
|
||||
},
|
||||
"testDataGenerator_duration": {
|
||||
"message": "耗时",
|
||||
"description": "Translation key: testDataGenerator_duration"
|
||||
},
|
||||
"testDataGenerator_warnings": {
|
||||
"message": "警告",
|
||||
"description": "Translation key: testDataGenerator_warnings"
|
||||
},
|
||||
"testDataGenerator_moreWarnings": {
|
||||
"message": "还有 {{count}} 条警告",
|
||||
"description": "Translation key: testDataGenerator_moreWarnings"
|
||||
},
|
||||
"testDataGenerator_export": {
|
||||
"message": "导出数据",
|
||||
"description": "Translation key: testDataGenerator_export"
|
||||
},
|
||||
"testDataGenerator_copyJSON": {
|
||||
"message": "复制 JSON",
|
||||
"description": "Translation key: testDataGenerator_copyJSON"
|
||||
},
|
||||
"testDataGenerator_copyCSV": {
|
||||
"message": "复制 CSV",
|
||||
"description": "Translation key: testDataGenerator_copyCSV"
|
||||
},
|
||||
"testDataGenerator_downloadJSON": {
|
||||
"message": "下载 JSON",
|
||||
"description": "Translation key: testDataGenerator_downloadJSON"
|
||||
},
|
||||
"testDataGenerator_downloadCSV": {
|
||||
"message": "下载 CSV",
|
||||
"description": "Translation key: testDataGenerator_downloadCSV"
|
||||
},
|
||||
"testDataGenerator_saveRule": {
|
||||
"message": "保存规则",
|
||||
"description": "Translation key: testDataGenerator_saveRule"
|
||||
},
|
||||
"testDataGenerator_import": {
|
||||
"message": "导入",
|
||||
"description": "Translation key: testDataGenerator_import"
|
||||
},
|
||||
"testDataGenerator_exportRules": {
|
||||
"message": "导出规则",
|
||||
"description": "Translation key: testDataGenerator_exportRules"
|
||||
},
|
||||
"testDataGenerator_ruleCount": {
|
||||
"message": "已保存 {{count}}/{{max}} 条",
|
||||
"description": "Translation key: testDataGenerator_ruleCount"
|
||||
},
|
||||
"testDataGenerator_searchRules": {
|
||||
"message": "搜索规则...",
|
||||
"description": "Translation key: testDataGenerator_searchRules"
|
||||
},
|
||||
"testDataGenerator_saveNewRule": {
|
||||
"message": "保存新规则",
|
||||
"description": "Translation key: testDataGenerator_saveNewRule"
|
||||
},
|
||||
"testDataGenerator_ruleNamePlaceholder": {
|
||||
"message": "规则名称",
|
||||
"description": "Translation key: testDataGenerator_ruleNamePlaceholder"
|
||||
},
|
||||
"testDataGenerator_ruleDescPlaceholder": {
|
||||
"message": "规则描述（可选）",
|
||||
"description": "Translation key: testDataGenerator_ruleDescPlaceholder"
|
||||
},
|
||||
"testDataGenerator_confirm": {
|
||||
"message": "确认",
|
||||
"description": "Translation key: testDataGenerator_confirm"
|
||||
},
|
||||
"testDataGenerator_done": {
|
||||
"message": "完成",
|
||||
"description": "Translation key: testDataGenerator_done"
|
||||
},
|
||||
"testDataGenerator_noSearchResults": {
|
||||
"message": "未找到匹配的规则",
|
||||
"description": "Translation key: testDataGenerator_noSearchResults"
|
||||
},
|
||||
"testDataGenerator_noRules": {
|
||||
"message": "暂无保存的规则",
|
||||
"description": "Translation key: testDataGenerator_noRules"
|
||||
},
|
||||
"testDataGenerator_usedTimes": {
|
||||
"message": "使用 {{count}} 次",
|
||||
"description": "Translation key: testDataGenerator_usedTimes"
|
||||
},
|
||||
"testDataGenerator_load": {
|
||||
"message": "加载",
|
||||
"description": "Translation key: testDataGenerator_load"
|
||||
},
|
||||
"testDataGenerator_duplicate": {
|
||||
"message": "复制",
|
||||
"description": "Translation key: testDataGenerator_duplicate"
|
||||
},
|
||||
"testDataGenerator_delete": {
|
||||
"message": "删除",
|
||||
"description": "Translation key: testDataGenerator_delete"
|
||||
},
|
||||
"testDataGenerator_virtualMode": {
|
||||
"message": "虚拟列表模式（共 $ 行）"
|
||||
},
|
||||
"testDataGenerator_totalRows": {
|
||||
"message": "共 $ 条数据"
|
||||
},
|
||||
"testDataGenerator_ruleSaved": {
|
||||
"message": "规则已保存",
|
||||
"description": "Translation key: testDataGenerator_ruleSaved"
|
||||
},
|
||||
"testDataGenerator_ruleLoaded": {
|
||||
"message": "已加载规则「{{name}}」",
|
||||
"description": "Translation key: testDataGenerator_ruleLoaded"
|
||||
},
|
||||
"testDataGenerator_ruleDeleted": {
|
||||
"message": "规则已删除",
|
||||
"description": "Translation key: testDataGenerator_ruleDeleted"
|
||||
},
|
||||
"testDataGenerator_ruleDuplicated": {
|
||||
"message": "规则已复制",
|
||||
"description": "Translation key: testDataGenerator_ruleDuplicated"
|
||||
},
|
||||
"testDataGenerator_exportSuccess": {
|
||||
"message": "规则已导出",
|
||||
"description": "Translation key: testDataGenerator_exportSuccess"
|
||||
},
|
||||
"testDataGenerator_importSuccess": {
|
||||
"message": "成功导入 {{count}} 条规则",
|
||||
"description": "Translation key: testDataGenerator_importSuccess"
|
||||
},
|
||||
"testDataGenerator_importFailed": {
|
||||
"message": "{{count}} 条规则导入失败",
|
||||
"description": "Translation key: testDataGenerator_importFailed"
|
||||
},
|
||||
"testDataGenerator_confirmDeleteTitle": {
|
||||
"message": "确认删除规则",
|
||||
"description": "Translation key: testDataGenerator_confirmDeleteTitle"
|
||||
},
|
||||
"testDataGenerator_confirmDeleteDescription": {
|
||||
"message": "确定要删除规则「{{name}}」吗？此操作不可撤销。",
|
||||
"description": "Translation key: testDataGenerator_confirmDeleteDescription"
|
||||
},
|
||||
"testDataGenerator_ruleNameDuplicate": {
|
||||
"message": "已存在同名规则，是否覆盖保存？",
|
||||
"description": "Translation key: testDataGenerator_ruleNameDuplicate"
|
||||
},
|
||||
"testDataGenerator_overwrite": {
|
||||
"message": "覆盖",
|
||||
"description": "Translation key: testDataGenerator_overwrite"
|
||||
},
|
||||
"testDataGenerator_edit": {
|
||||
"message": "编辑",
|
||||
"description": "Translation key: testDataGenerator_edit"
|
||||
},
|
||||
"testDataGenerator_ruleUpdated": {
|
||||
"message": "规则已更新",
|
||||
"description": "Translation key: testDataGenerator_ruleUpdated"
|
||||
},
|
||||
"testDataGenerator_editing": {
|
||||
"message": "编辑中",
|
||||
"description": "Translation key: testDataGenerator_editing"
|
||||
},
|
||||
"testDataGenerator_editingRule": {
|
||||
"message": "正在编辑规则「{{name}}」",
|
||||
"description": "Translation key: testDataGenerator_editingRule"
|
||||
},
|
||||
"testDataGenerator_updateRule": {
|
||||
"message": "更新规则",
|
||||
"description": "Translation key: testDataGenerator_updateRule"
|
||||
},
|
||||
"testDataGenerator_saveAs": {
|
||||
"message": "另存为",
|
||||
"description": "Translation key: testDataGenerator_saveAs"
|
||||
},
|
||||
"testDataGenerator_noGeneratorParams": {
|
||||
"message": "此生成器无可配置参数",
|
||||
"description": "Translation key: testDataGenerator_noGeneratorParams"
|
||||
},
|
||||
"testDataGenerator_enabled": {
|
||||
"message": "启用",
|
||||
"description": "Translation key: testDataGenerator_enabled"
|
||||
},
|
||||
"testDataGenerator_disabled": {
|
||||
"message": "禁用",
|
||||
"description": "Translation key: testDataGenerator_disabled"
|
||||
},
|
||||
"testDataGenerator_commaSeparated": {
|
||||
"message": "用逗号分隔多个值",
|
||||
"description": "Translation key: testDataGenerator_commaSeparated"
|
||||
},
|
||||
"testDataGenerator_copySuccess": {
|
||||
"message": "已复制到剪贴板",
|
||||
"description": "Translation key: testDataGenerator_copySuccess"
|
||||
},
|
||||
"testDataGenerator_copyFailed": {
|
||||
"message": "复制失败",
|
||||
"description": "Translation key: testDataGenerator_copyFailed"
|
||||
},
|
||||
"testDataGenerator_fieldNameEmpty": {
|
||||
"message": "字段名称不能为空",
|
||||
"description": "Translation key: testDataGenerator_fieldNameEmpty"
|
||||
},
|
||||
"testDataGenerator_fieldNameDuplicate": {
|
||||
"message": "字段名称已存在",
|
||||
"description": "Translation key: testDataGenerator_fieldNameDuplicate"
|
||||
},
|
||||
"testDataGenerator_fieldNameInvalid": {
|
||||
"message": "字段名称只能包含字母、数字和下划线",
|
||||
"description": "Translation key: testDataGenerator_fieldNameInvalid"
|
||||
},
|
||||
"testDataGenerator_ruleCopySuffix": {
|
||||
"message": "（副本）",
|
||||
"description": "Translation key: testDataGenerator_ruleCopySuffix"
|
||||
}
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 6.0 KiB After Width: | Height: | Size: 7.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 669 B After Width: | Height: | Size: 932 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 5.2 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 10 KiB |
@@ -53,6 +53,7 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
|
||||
type="button"
|
||||
onClick={handleCopy}
|
||||
title={tooltip ?? t('buttons.copy')}
|
||||
aria-label={tooltip ?? t('buttons.copy')}
|
||||
className={cn(
|
||||
buttonVariants({ variant, size }),
|
||||
copied &&
|
||||
@@ -62,7 +63,7 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
|
||||
{...props}
|
||||
>
|
||||
{copied ? (
|
||||
<Check className="h-[1.2em] w-[1.2em] animate-in fade-in zoom-in-75 duration-200" />
|
||||
<Check className="h-[1.2em] w-[1.2em]" />
|
||||
) : (
|
||||
<Copy className="h-[1.2em] w-[1.2em]" />
|
||||
)}
|
||||
|
||||
@@ -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');
|
||||
});
|
||||
});
|
||||
@@ -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');
|
||||
});
|
||||
});
|
||||
@@ -1,118 +0,0 @@
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { act, fireEvent, render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import ToolCard from '@/pages/Dashboard/ToolCard';
|
||||
import { Clock } from 'lucide-react';
|
||||
|
||||
describe('ToolCard 组件', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
describe('渲染测试', () => {
|
||||
it('应渲染标题和描述', () => {
|
||||
render(
|
||||
<ToolCard
|
||||
title="测试工具"
|
||||
description="这是一个测试工具"
|
||||
colorKey="primary"
|
||||
icon={Clock}
|
||||
onNavigate={() => {}}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(screen.getByText('测试工具')).toBeInTheDocument();
|
||||
expect(screen.getByText('这是一个测试工具')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('无描述时仅渲染标题', () => {
|
||||
render(<ToolCard title="仅标题" colorKey="primary" icon={Clock} onNavigate={() => {}} />);
|
||||
|
||||
expect(screen.getByText('仅标题')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应渲染图标', () => {
|
||||
const { container } = render(
|
||||
<ToolCard title="带图标" colorKey="primary" icon={Clock} onNavigate={() => {}} />,
|
||||
);
|
||||
|
||||
const svgElement = container.querySelector('svg');
|
||||
expect(svgElement).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('提供快照内容时应渲染快照', () => {
|
||||
render(
|
||||
<ToolCard
|
||||
title="带快照"
|
||||
colorKey="primary"
|
||||
icon={Clock}
|
||||
onNavigate={() => {}}
|
||||
snapshot={<div data-testid="snapshot">快照内容</div>}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(screen.getByTestId('snapshot')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('未提供快照时不渲染快照区域', () => {
|
||||
const { container } = render(
|
||||
<ToolCard
|
||||
title="无快照"
|
||||
colorKey="primary"
|
||||
icon={Clock}
|
||||
onClick={() => {}}
|
||||
onNavigate={function (): void {
|
||||
throw new Error('Function not implemented.');
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(container.querySelector('[data-testid="snapshot"]')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应使用 CardActionArea 渲染，支持键盘聚焦', () => {
|
||||
render(<ToolCard title="可聚焦" colorKey="primary" icon={Clock} onNavigate={() => {}} />);
|
||||
|
||||
const button = screen.getByRole('button', { name: /可聚焦/ });
|
||||
expect(button).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('交互测试', () => {
|
||||
it('点击时应调用 onClick', () => {
|
||||
const handleClick = vi.fn();
|
||||
render(<ToolCard title="可点击" colorKey="primary" icon={Clock} onNavigate={handleClick} />);
|
||||
|
||||
const button = screen.getByRole('button', { name: /可点击/ });
|
||||
fireEvent.click(button);
|
||||
|
||||
expect(handleClick).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('按 Enter 键时应调用 onClick', async () => {
|
||||
const handleClick = vi.fn();
|
||||
render(
|
||||
<ToolCard title="键盘可触发" colorKey="primary" icon={Clock} onNavigate={handleClick} />,
|
||||
);
|
||||
|
||||
const button = screen.getByRole('button', { name: /键盘可触发/ });
|
||||
await act(async () => {
|
||||
button.focus();
|
||||
await userEvent.keyboard('{Enter}');
|
||||
});
|
||||
|
||||
expect(handleClick).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('样式测试', () => {
|
||||
it('应应用自定义颜色代码', () => {
|
||||
const { container } = render(
|
||||
<ToolCard title="自定义颜色" colorKey="warning" icon={Clock} onNavigate={() => {}} />,
|
||||
);
|
||||
|
||||
const svgElement = container.querySelector('svg');
|
||||
expect(svgElement).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -26,10 +26,16 @@ const DialogOverlay = React.forwardRef<
|
||||
));
|
||||
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
|
||||
|
||||
interface DialogContentProps extends React.ComponentPropsWithoutRef<
|
||||
typeof DialogPrimitive.Content
|
||||
> {
|
||||
showCloseButton?: boolean;
|
||||
}
|
||||
|
||||
const DialogContent = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
DialogContentProps
|
||||
>(({ className, children, showCloseButton = true, ...props }, ref) => (
|
||||
<DialogPortal>
|
||||
<DialogOverlay />
|
||||
<DialogPrimitive.Content
|
||||
@@ -41,10 +47,12 @@ const DialogContent = React.forwardRef<
|
||||
{...props}
|
||||
>
|
||||
{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">
|
||||
<X className="h-4 w-4" />
|
||||
<span className="sr-only">Close</span>
|
||||
</DialogPrimitive.Close>
|
||||
)}
|
||||
</DialogPrimitive.Content>
|
||||
</DialogPortal>
|
||||
));
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
import { Toaster as Sonner } from 'sonner';
|
||||
import { useThemeMode } from '@/providers/ThemeModeProvider';
|
||||
|
||||
type ToasterProps = React.ComponentProps<typeof Sonner>;
|
||||
|
||||
export function Toaster(props: ToasterProps) {
|
||||
const { resolvedMode } = useThemeMode();
|
||||
|
||||
return (
|
||||
<Sonner
|
||||
theme={resolvedMode}
|
||||
className="toaster group"
|
||||
position="bottom-center"
|
||||
toastOptions={{
|
||||
classNames: {
|
||||
toast:
|
||||
'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
|
||||
description: 'group-[.toast]:text-muted-foreground',
|
||||
actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
|
||||
cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
|
||||
},
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -9,8 +9,8 @@ import {
|
||||
|
||||
describe('features', () => {
|
||||
describe('FEATURES', () => {
|
||||
it('should have 9 features defined', () => {
|
||||
expect(FEATURES).toHaveLength(9);
|
||||
it('should have 10 features defined', () => {
|
||||
expect(FEATURES).toHaveLength(10);
|
||||
});
|
||||
|
||||
it('should have all required properties for each feature', () => {
|
||||
@@ -95,7 +95,7 @@ describe('features', () => {
|
||||
describe('getAllFeatureKeys', () => {
|
||||
it('should return all feature keys', () => {
|
||||
const allKeys = getAllFeatureKeys();
|
||||
expect(allKeys).toHaveLength(9);
|
||||
expect(allKeys).toHaveLength(10);
|
||||
expect(allKeys).toContain('dashboard');
|
||||
expect(allKeys).toContain('timestamp');
|
||||
expect(allKeys).toContain('storageCleaner');
|
||||
@@ -105,6 +105,7 @@ describe('features', () => {
|
||||
expect(allKeys).toContain('jsonDiff');
|
||||
expect(allKeys).toContain('base64Converter');
|
||||
expect(allKeys).toContain('rightClickRestorer');
|
||||
expect(allKeys).toContain('testDataGenerator');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -121,9 +122,9 @@ describe('features', () => {
|
||||
expect(pageOrder).toContain('qrCode');
|
||||
});
|
||||
|
||||
it('should have 8 items in page order', () => {
|
||||
it('should have 9 items in page order', () => {
|
||||
const pageOrder = getDefaultPageOrder();
|
||||
expect(pageOrder).toHaveLength(8);
|
||||
expect(pageOrder).toHaveLength(9);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -10,6 +10,7 @@ import {
|
||||
GitCompareArrows,
|
||||
ArrowLeftRight,
|
||||
MousePointerClick,
|
||||
FileSpreadsheet,
|
||||
} from 'lucide-react';
|
||||
|
||||
export type PaletteColorKey = 'primary' | 'success' | 'warning' | 'error' | 'secondary' | 'info';
|
||||
@@ -24,6 +25,7 @@ const JwtPage = lazy(() => import('@/pages/Jwt'));
|
||||
const JsonToolsPage = lazy(() => import('@/pages/JsonTools'));
|
||||
const Base64ConverterPage = lazy(() => import('@/pages/Base64Converter'));
|
||||
const RightClickRestorerPage = lazy(() => import('@/pages/RightClickRestorer'));
|
||||
const TestDataGeneratorPage = lazy(() => import('@/pages/TestDataGenerator'));
|
||||
|
||||
export interface FeatureConfig {
|
||||
key: PageType;
|
||||
@@ -155,6 +157,19 @@ export const FEATURES: FeatureConfig[] = [
|
||||
tab: RightClickRestorerPage,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'testDataGenerator',
|
||||
labelKey: 'testDataGenerator_title',
|
||||
descriptionKey: 'testDataGenerator_description',
|
||||
themeColorKey: 'warning',
|
||||
icon: FileSpreadsheet,
|
||||
defaultVisible: true,
|
||||
components: {
|
||||
popup: TestDataGeneratorPage,
|
||||
sidepanel: TestDataGeneratorPage,
|
||||
tab: TestDataGeneratorPage,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
export function getFeatureByKey(key: PageType): FeatureConfig | undefined {
|
||||
|
||||
@@ -161,7 +161,7 @@ function positionPopover(popover: HTMLElement, x: number, y: number): void {
|
||||
|
||||
let hideTimeout: ReturnType<typeof setTimeout> | null = null;
|
||||
|
||||
export function showPopover(
|
||||
function showPopover(
|
||||
x: number,
|
||||
y: number,
|
||||
contentHtml: string,
|
||||
|
||||
@@ -0,0 +1,227 @@
|
||||
/**
|
||||
* 基础类型生成器
|
||||
* 包含：随机整数、随机浮点数、随机字符串、从列表选择
|
||||
*/
|
||||
|
||||
import type { GeneratorDefinition } from '@/types/testDataGenerator';
|
||||
|
||||
/**
|
||||
* 生成随机整数
|
||||
*/
|
||||
function randomInt(min: number, max: number): number {
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
}
|
||||
|
||||
/**
|
||||
* 从数组中随机选择
|
||||
*/
|
||||
function randomPick<T>(arr: T[]): T {
|
||||
return arr[Math.floor(Math.random() * arr.length)];
|
||||
}
|
||||
|
||||
/**
|
||||
* 随机整数生成器
|
||||
*/
|
||||
export const randomIntGenerator: GeneratorDefinition = {
|
||||
id: 'randomInt',
|
||||
name: '随机整数',
|
||||
description: '生成指定范围内的随机整数',
|
||||
categoryId: 'basic',
|
||||
params: [
|
||||
{
|
||||
key: 'min',
|
||||
label: '最小值',
|
||||
type: 'number',
|
||||
defaultValue: 0,
|
||||
description: '整数最小值',
|
||||
},
|
||||
{
|
||||
key: 'max',
|
||||
label: '最大值',
|
||||
type: 'number',
|
||||
defaultValue: 100,
|
||||
description: '整数最大值',
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const min = (params.min as number) || 0;
|
||||
const max = (params.max as number) || 100;
|
||||
return String(randomInt(min, max));
|
||||
},
|
||||
generateAtIndex: (params, index) => {
|
||||
const min = (params.min as number) || 0;
|
||||
const max = (params.max as number) || 100;
|
||||
const range = max - min + 1;
|
||||
return String(min + (index % range));
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 随机浮点数生成器
|
||||
*/
|
||||
export const randomFloat: GeneratorDefinition = {
|
||||
id: 'randomFloat',
|
||||
name: '随机浮点数',
|
||||
description: '生成指定范围内的随机浮点数',
|
||||
categoryId: 'basic',
|
||||
params: [
|
||||
{
|
||||
key: 'min',
|
||||
label: '最小值',
|
||||
type: 'number',
|
||||
defaultValue: 0,
|
||||
description: '浮点数最小值',
|
||||
},
|
||||
{
|
||||
key: 'max',
|
||||
label: '最大值',
|
||||
type: 'number',
|
||||
defaultValue: 100,
|
||||
description: '浮点数最大值',
|
||||
},
|
||||
{
|
||||
key: 'decimals',
|
||||
label: '小数位数',
|
||||
type: 'number',
|
||||
defaultValue: 2,
|
||||
min: 0,
|
||||
max: 10,
|
||||
description: '小数位数',
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const min = (params.min as number) || 0;
|
||||
const max = (params.max as number) || 100;
|
||||
const decimals = (params.decimals as number) ?? 2;
|
||||
const value = min + Math.random() * (max - min);
|
||||
return value.toFixed(decimals);
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 随机字符串生成器
|
||||
*/
|
||||
export const randomString: GeneratorDefinition = {
|
||||
id: 'randomString',
|
||||
name: '随机字符串',
|
||||
description: '生成指定长度的随机字符串',
|
||||
categoryId: 'basic',
|
||||
params: [
|
||||
{
|
||||
key: 'length',
|
||||
label: '字符串长度',
|
||||
type: 'number',
|
||||
defaultValue: 10,
|
||||
min: 1,
|
||||
max: 100,
|
||||
description: '字符串长度',
|
||||
},
|
||||
{
|
||||
key: 'charset',
|
||||
label: '字符集',
|
||||
type: 'select',
|
||||
defaultValue: 'alphanumeric',
|
||||
description: '使用的字符集',
|
||||
options: [
|
||||
{ label: '字母数字', value: 'alphanumeric' },
|
||||
{ label: '仅字母', value: 'alpha' },
|
||||
{ label: '仅数字', value: 'numeric' },
|
||||
{ label: '小写字母', value: 'lowercase' },
|
||||
{ label: '大写字母', value: 'uppercase' },
|
||||
{ label: '十六进制', value: 'hex' },
|
||||
{ label: 'Base64', value: 'base64' },
|
||||
],
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const length = (params.length as number) || 10;
|
||||
const charset = (params.charset as string) || 'alphanumeric';
|
||||
|
||||
const charsets: Record<string, string> = {
|
||||
alphanumeric: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789',
|
||||
alpha: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz',
|
||||
numeric: '0123456789',
|
||||
lowercase: 'abcdefghijklmnopqrstuvwxyz',
|
||||
uppercase: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
|
||||
hex: '0123456789abcdef',
|
||||
base64: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=',
|
||||
};
|
||||
|
||||
const chars = charsets[charset] || charsets.alphanumeric;
|
||||
let result = '';
|
||||
for (let i = 0; i < length; i++) {
|
||||
result += chars.charAt(Math.floor(Math.random() * chars.length));
|
||||
}
|
||||
return result;
|
||||
},
|
||||
generateAtIndex: (params, index) => {
|
||||
const length = (params.length as number) || 10;
|
||||
const charset = (params.charset as string) || 'alphanumeric';
|
||||
|
||||
const charsets: Record<string, string> = {
|
||||
alphanumeric: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789',
|
||||
alpha: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz',
|
||||
numeric: '0123456789',
|
||||
lowercase: 'abcdefghijklmnopqrstuvwxyz',
|
||||
uppercase: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
|
||||
hex: '0123456789abcdef',
|
||||
base64: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=',
|
||||
};
|
||||
|
||||
const chars = charsets[charset] || charsets.alphanumeric;
|
||||
const base = String(index).padStart(length, '0');
|
||||
let result = '';
|
||||
for (let i = 0; i < length; i++) {
|
||||
const charIndex = parseInt(base[i]) || 0;
|
||||
result += chars[charIndex % chars.length];
|
||||
}
|
||||
return result;
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 从列表选择生成器
|
||||
*/
|
||||
export const fromList: GeneratorDefinition = {
|
||||
id: 'fromList',
|
||||
name: '从列表选择',
|
||||
description: '从自定义列表中随机选择',
|
||||
categoryId: 'basic',
|
||||
params: [
|
||||
{
|
||||
key: 'values',
|
||||
label: '列表值',
|
||||
type: 'string',
|
||||
defaultValue: '',
|
||||
description: '列表值，用逗号分隔',
|
||||
placeholder: '值1,值2,值3',
|
||||
},
|
||||
{
|
||||
key: 'allowDuplicate',
|
||||
label: '允许重复',
|
||||
type: 'boolean',
|
||||
defaultValue: true,
|
||||
description: '是否允许重复选择',
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const valuesStr = (params.values as string) || '';
|
||||
const values = valuesStr
|
||||
.split(',')
|
||||
.map((v) => v.trim())
|
||||
.filter((v) => v);
|
||||
|
||||
if (values.length === 0) {
|
||||
return '（请配置列表值）';
|
||||
}
|
||||
|
||||
return randomPick(values);
|
||||
},
|
||||
};
|
||||
|
||||
export const basicGenerators: GeneratorDefinition[] = [
|
||||
randomIntGenerator,
|
||||
randomFloat,
|
||||
randomString,
|
||||
fromList,
|
||||
];
|
||||
@@ -0,0 +1,561 @@
|
||||
/**
|
||||
* 业务数据生成器
|
||||
* 包含：订单号、价格、日期、状态、数量、评分、折扣、库存
|
||||
*/
|
||||
|
||||
import type { GeneratorDefinition } from '@/types/testDataGenerator';
|
||||
|
||||
/**
|
||||
* 生成随机整数
|
||||
*/
|
||||
function randomInt(min: number, max: number): number {
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
}
|
||||
|
||||
/**
|
||||
* 从数组中随机选择
|
||||
*/
|
||||
function randomPick<T>(arr: T[]): T {
|
||||
return arr[Math.floor(Math.random() * arr.length)];
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化日期
|
||||
*/
|
||||
function formatDate(date: Date, format: string): string {
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const hours = String(date.getHours()).padStart(2, '0');
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||
const seconds = String(date.getSeconds()).padStart(2, '0');
|
||||
|
||||
return format
|
||||
.replace('YYYY', String(year))
|
||||
.replace('MM', month)
|
||||
.replace('DD', day)
|
||||
.replace('HH', hours)
|
||||
.replace('mm', minutes)
|
||||
.replace('ss', seconds);
|
||||
}
|
||||
|
||||
/**
|
||||
* 订单号生成器
|
||||
*/
|
||||
export const orderId: GeneratorDefinition = {
|
||||
id: 'orderId',
|
||||
name: '订单号',
|
||||
description: '生成随机订单号',
|
||||
categoryId: 'business',
|
||||
params: [
|
||||
{
|
||||
key: 'prefix',
|
||||
label: '前缀',
|
||||
type: 'string',
|
||||
defaultValue: 'ORD',
|
||||
description: '订单号前缀',
|
||||
placeholder: '请输入前缀',
|
||||
},
|
||||
{
|
||||
key: 'length',
|
||||
label: '数字长度',
|
||||
type: 'number',
|
||||
defaultValue: 10,
|
||||
min: 6,
|
||||
max: 20,
|
||||
description: '订单号数字部分长度',
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const prefix = (params.prefix as string) || 'ORD';
|
||||
const length = (params.length as number) || 10;
|
||||
const maxNum = Math.pow(10, length) - 1;
|
||||
const num = String(randomInt(0, maxNum)).padStart(length, '0');
|
||||
return `${prefix}${num}`;
|
||||
},
|
||||
generateAtIndex: (params, index) => {
|
||||
const prefix = (params.prefix as string) || 'ORD';
|
||||
const length = (params.length as number) || 10;
|
||||
const num = String(index + 1).padStart(length, '0');
|
||||
return `${prefix}${num}`;
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 价格生成器
|
||||
*/
|
||||
export const price: GeneratorDefinition = {
|
||||
id: 'price',
|
||||
name: '价格',
|
||||
description: '生成随机价格',
|
||||
categoryId: 'business',
|
||||
params: [
|
||||
{
|
||||
key: 'min',
|
||||
label: '最低价格',
|
||||
type: 'number',
|
||||
defaultValue: 1,
|
||||
min: 0,
|
||||
description: '价格最小值',
|
||||
},
|
||||
{
|
||||
key: 'max',
|
||||
label: '最高价格',
|
||||
type: 'number',
|
||||
defaultValue: 1000,
|
||||
min: 0,
|
||||
description: '价格最大值',
|
||||
},
|
||||
{
|
||||
key: 'decimals',
|
||||
label: '小数位数',
|
||||
type: 'number',
|
||||
defaultValue: 2,
|
||||
min: 0,
|
||||
max: 4,
|
||||
description: '价格小数位数',
|
||||
},
|
||||
{
|
||||
key: 'strategy',
|
||||
label: '生成策略',
|
||||
type: 'select',
|
||||
defaultValue: 'random',
|
||||
description: '价格生成策略',
|
||||
options: [
|
||||
{ label: '随机', value: 'random' },
|
||||
{ label: '心理定价', value: 'psychological' },
|
||||
{ label: '真实分布', value: 'realistic' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'currency',
|
||||
label: '货币符号',
|
||||
type: 'string',
|
||||
defaultValue: '¥',
|
||||
description: '货币符号',
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const min = (params.min as number) || 1;
|
||||
const max = (params.max as number) || 1000;
|
||||
const decimals = (params.decimals as number) ?? 2;
|
||||
const strategy = (params.strategy as string) || 'random';
|
||||
const currency = (params.currency as string) || '¥';
|
||||
|
||||
let value: number;
|
||||
if (strategy === 'psychological') {
|
||||
value = generatePsychologicalPrice(min, max);
|
||||
} else if (strategy === 'realistic') {
|
||||
value = generateRealisticPrice(min, max);
|
||||
} else {
|
||||
value = min + Math.random() * (max - min);
|
||||
}
|
||||
|
||||
return `${currency}${value.toFixed(decimals)}`;
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 生成心理定价（如 9.99, 19.9, 99）
|
||||
*/
|
||||
function generatePsychologicalPrice(min: number, max: number): number {
|
||||
const patterns = [
|
||||
() => {
|
||||
const base = randomInt(Math.ceil(min), Math.floor(max / 10));
|
||||
return base * 10 - 0.01;
|
||||
},
|
||||
() => {
|
||||
const base = randomInt(Math.ceil(min / 10), Math.floor(max / 10));
|
||||
return base * 10 - 1;
|
||||
},
|
||||
() => {
|
||||
const base = randomInt(Math.ceil(min / 100), Math.floor(max / 100));
|
||||
return base * 100 - 1;
|
||||
},
|
||||
];
|
||||
|
||||
let price = randomPick(patterns)();
|
||||
if (price < min) price = min;
|
||||
if (price > max) price = max;
|
||||
return price;
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成真实分布价格（对数正态分布）
|
||||
*/
|
||||
function generateRealisticPrice(min: number, max: number): number {
|
||||
const mean = (Math.log(min) + Math.log(max)) / 2;
|
||||
const stdDev = (Math.log(max) - Math.log(min)) / 4;
|
||||
let u = 0,
|
||||
v = 0;
|
||||
while (u === 0) u = Math.random();
|
||||
while (v === 0) v = Math.random();
|
||||
const num = Math.sqrt(-2.0 * Math.log(u)) * Math.cos(2.0 * Math.PI * v);
|
||||
const value = Math.exp(mean + num * stdDev);
|
||||
return Math.max(min, Math.min(max, value));
|
||||
}
|
||||
|
||||
/**
|
||||
* 日期生成器
|
||||
*/
|
||||
export const date: GeneratorDefinition = {
|
||||
id: 'date',
|
||||
name: '日期',
|
||||
description: '生成随机日期',
|
||||
categoryId: 'business',
|
||||
params: [
|
||||
{
|
||||
key: 'startDate',
|
||||
label: '开始日期',
|
||||
type: 'string',
|
||||
defaultValue: '2020-01-01',
|
||||
description: '日期范围开始',
|
||||
placeholder: 'YYYY-MM-DD',
|
||||
},
|
||||
{
|
||||
key: 'endDate',
|
||||
label: '结束日期',
|
||||
type: 'string',
|
||||
defaultValue: '2025-12-31',
|
||||
description: '日期范围结束',
|
||||
placeholder: 'YYYY-MM-DD',
|
||||
},
|
||||
{
|
||||
key: 'format',
|
||||
label: '日期格式',
|
||||
type: 'select',
|
||||
defaultValue: 'YYYY-MM-DD',
|
||||
description: '输出格式',
|
||||
options: [
|
||||
{ label: 'YYYY-MM-DD', value: 'YYYY-MM-DD' },
|
||||
{ label: 'YYYY/MM/DD', value: 'YYYY/MM/DD' },
|
||||
{ label: 'YYYY-MM-DD HH:mm:ss', value: 'YYYY-MM-DD HH:mm:ss' },
|
||||
{ label: 'YYYY/MM/DD HH:mm:ss', value: 'YYYY/MM/DD HH:mm:ss' },
|
||||
],
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const startStr = (params.startDate as string) || '2020-01-01';
|
||||
const endStr = (params.endDate as string) || '2025-12-31';
|
||||
const format = (params.format as string) || 'YYYY-MM-DD';
|
||||
|
||||
const start = new Date(startStr).getTime();
|
||||
const end = new Date(endStr).getTime();
|
||||
const randomTime = start + Math.random() * (end - start);
|
||||
const date = new Date(randomTime);
|
||||
|
||||
return formatDate(date, format);
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 状态生成器
|
||||
*/
|
||||
export const status: GeneratorDefinition = {
|
||||
id: 'status',
|
||||
name: '状态',
|
||||
description: '生成随机状态',
|
||||
categoryId: 'business',
|
||||
params: [
|
||||
{
|
||||
key: 'type',
|
||||
label: '状态类型',
|
||||
type: 'select',
|
||||
defaultValue: 'order',
|
||||
description: '选择状态类型',
|
||||
options: [
|
||||
{ label: '订单状态', value: 'order' },
|
||||
{ label: '用户状态', value: 'user' },
|
||||
{ label: '审核状态', value: 'review' },
|
||||
{ label: '支付状态', value: 'payment' },
|
||||
{ label: '自定义', value: 'custom' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'customValues',
|
||||
label: '自定义值',
|
||||
type: 'string',
|
||||
defaultValue: '',
|
||||
description: '自定义状态值，用逗号分隔',
|
||||
placeholder: '状态1,状态2,状态3',
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const type = (params.type as string) || 'order';
|
||||
|
||||
const statusMap: Record<string, string[]> = {
|
||||
order: ['待付款', '待发货', '已发货', '已完成', '已取消', '已退款'],
|
||||
user: ['活跃', '未激活', '已禁用', '已注销'],
|
||||
review: ['待审核', '审核中', '已通过', '已拒绝'],
|
||||
payment: ['待支付', '支付中', '支付成功', '支付失败', '已退款'],
|
||||
};
|
||||
|
||||
if (type === 'custom') {
|
||||
const customValues = (params.customValues as string) || '';
|
||||
const values = customValues.split(',').filter((v) => v.trim());
|
||||
if (values.length > 0) {
|
||||
return randomPick(values);
|
||||
}
|
||||
return '未知状态';
|
||||
}
|
||||
|
||||
return randomPick(statusMap[type] || statusMap.order);
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 数量生成器
|
||||
*/
|
||||
export const quantity: GeneratorDefinition = {
|
||||
id: 'quantity',
|
||||
name: '数量',
|
||||
description: '生成随机数量',
|
||||
categoryId: 'business',
|
||||
params: [
|
||||
{
|
||||
key: 'min',
|
||||
label: '最小值',
|
||||
type: 'number',
|
||||
defaultValue: 1,
|
||||
min: 0,
|
||||
description: '数量最小值',
|
||||
},
|
||||
{
|
||||
key: 'max',
|
||||
label: '最大值',
|
||||
type: 'number',
|
||||
defaultValue: 100,
|
||||
min: 0,
|
||||
description: '数量最大值',
|
||||
},
|
||||
{
|
||||
key: 'distribution',
|
||||
label: '分布方式',
|
||||
type: 'select',
|
||||
defaultValue: 'uniform',
|
||||
description: '数量分布方式',
|
||||
options: [
|
||||
{ label: '均匀分布', value: 'uniform' },
|
||||
{ label: '泊松分布', value: 'poisson' },
|
||||
],
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const min = (params.min as number) || 1;
|
||||
const max = (params.max as number) || 100;
|
||||
const distribution = (params.distribution as string) || 'uniform';
|
||||
|
||||
if (distribution === 'poisson') {
|
||||
return String(poissonRandom(Math.floor((min + max) / 2)));
|
||||
}
|
||||
return String(randomInt(min, max));
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 泊松分布随机数
|
||||
*/
|
||||
function poissonRandom(lambda: number): number {
|
||||
const L = Math.exp(-lambda);
|
||||
let k = 0;
|
||||
let p = 1;
|
||||
do {
|
||||
k++;
|
||||
p *= Math.random();
|
||||
} while (p > L);
|
||||
return k - 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* 评分生成器
|
||||
*/
|
||||
export const rating: GeneratorDefinition = {
|
||||
id: 'rating',
|
||||
name: '评分',
|
||||
description: '生成随机评分',
|
||||
categoryId: 'business',
|
||||
params: [
|
||||
{
|
||||
key: 'min',
|
||||
label: '最低分',
|
||||
type: 'number',
|
||||
defaultValue: 1,
|
||||
min: 0,
|
||||
max: 10,
|
||||
description: '评分最小值',
|
||||
},
|
||||
{
|
||||
key: 'max',
|
||||
label: '最高分',
|
||||
type: 'number',
|
||||
defaultValue: 5,
|
||||
min: 0,
|
||||
max: 10,
|
||||
description: '评分最大值',
|
||||
},
|
||||
{
|
||||
key: 'decimals',
|
||||
label: '小数位数',
|
||||
type: 'number',
|
||||
defaultValue: 1,
|
||||
min: 0,
|
||||
max: 2,
|
||||
description: '评分小数位数',
|
||||
},
|
||||
{
|
||||
key: 'skewed',
|
||||
label: '偏向高分',
|
||||
type: 'boolean',
|
||||
defaultValue: true,
|
||||
description: '是否偏向高分（模拟真实评分分布）',
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const min = (params.min as number) || 1;
|
||||
const max = (params.max as number) || 5;
|
||||
const decimals = (params.decimals as number) ?? 1;
|
||||
const skewed = params.skewed !== false;
|
||||
|
||||
if (skewed) {
|
||||
return skewedRandom(min, max).toFixed(decimals);
|
||||
}
|
||||
return (min + Math.random() * (max - min)).toFixed(decimals);
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 偏向高分的随机数（模拟真实评分分布）
|
||||
*/
|
||||
function skewedRandom(min: number, max: number): number {
|
||||
// 使用 Beta 分布模拟评分偏向
|
||||
const alpha = 3;
|
||||
const beta = 1;
|
||||
let u = 0,
|
||||
v = 0;
|
||||
while (u === 0) u = Math.random();
|
||||
while (v === 0) v = Math.random();
|
||||
const x = Math.pow(u, 1 / alpha) / Math.pow(u, 1 / alpha) + Math.pow(v, 1 / beta);
|
||||
return min + x * (max - min);
|
||||
}
|
||||
|
||||
/**
|
||||
* 折扣生成器
|
||||
*/
|
||||
export const discount: GeneratorDefinition = {
|
||||
id: 'discount',
|
||||
name: '折扣',
|
||||
description: '生成随机折扣',
|
||||
categoryId: 'business',
|
||||
params: [
|
||||
{
|
||||
key: 'min',
|
||||
label: '最低折扣',
|
||||
type: 'number',
|
||||
defaultValue: 1,
|
||||
min: 0,
|
||||
max: 100,
|
||||
description: '折扣最小值（百分比）',
|
||||
},
|
||||
{
|
||||
key: 'max',
|
||||
label: '最高折扣',
|
||||
type: 'number',
|
||||
defaultValue: 50,
|
||||
min: 0,
|
||||
max: 100,
|
||||
description: '折扣最大值（百分比）',
|
||||
},
|
||||
{
|
||||
key: 'strategy',
|
||||
label: '生成策略',
|
||||
type: 'select',
|
||||
defaultValue: 'random',
|
||||
description: '折扣生成策略',
|
||||
options: [
|
||||
{ label: '随机', value: 'random' },
|
||||
{ label: '心理定价', value: 'psychological' },
|
||||
],
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const min = (params.min as number) || 1;
|
||||
const max = (params.max as number) || 50;
|
||||
const strategy = (params.strategy as string) || 'random';
|
||||
|
||||
let discount: number;
|
||||
if (strategy === 'psychological') {
|
||||
discount = generatePsychologicalDiscount(min, max);
|
||||
} else {
|
||||
discount = randomInt(min, max);
|
||||
}
|
||||
return `${discount}%`;
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 生成心理折扣（如 5%, 10%, 20%, 30%）
|
||||
*/
|
||||
function generatePsychologicalDiscount(min: number, max: number): number {
|
||||
const psychologicalDiscounts = [5, 10, 15, 20, 25, 30, 40, 50, 60, 70, 80];
|
||||
const validDiscounts = psychologicalDiscounts.filter((d) => d >= min && d <= max);
|
||||
if (validDiscounts.length > 0) {
|
||||
return randomPick(validDiscounts);
|
||||
}
|
||||
return randomInt(min, max);
|
||||
}
|
||||
|
||||
/**
|
||||
* 库存生成器
|
||||
*/
|
||||
export const stock: GeneratorDefinition = {
|
||||
id: 'stock',
|
||||
name: '库存',
|
||||
description: '生成随机库存数量',
|
||||
categoryId: 'business',
|
||||
params: [
|
||||
{
|
||||
key: 'min',
|
||||
label: '最小库存',
|
||||
type: 'number',
|
||||
defaultValue: 0,
|
||||
min: 0,
|
||||
description: '库存最小值',
|
||||
},
|
||||
{
|
||||
key: 'max',
|
||||
label: '最大库存',
|
||||
type: 'number',
|
||||
defaultValue: 1000,
|
||||
min: 0,
|
||||
description: '库存最大值',
|
||||
},
|
||||
{
|
||||
key: 'allowZero',
|
||||
label: '允许为零',
|
||||
type: 'boolean',
|
||||
defaultValue: true,
|
||||
description: '是否允许库存为零',
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const min = (params.min as number) || 0;
|
||||
const max = (params.max as number) || 1000;
|
||||
const allowZero = params.allowZero !== false;
|
||||
|
||||
if (allowZero) {
|
||||
return String(randomInt(min, max));
|
||||
}
|
||||
return String(randomInt(Math.max(1, min), max));
|
||||
},
|
||||
};
|
||||
|
||||
export const businessGenerators: GeneratorDefinition[] = [
|
||||
orderId,
|
||||
price,
|
||||
date,
|
||||
status,
|
||||
quantity,
|
||||
rating,
|
||||
discount,
|
||||
stock,
|
||||
];
|
||||
@@ -0,0 +1,57 @@
|
||||
/**
|
||||
* 生成器库索引
|
||||
* 导出所有生成器和分类配置
|
||||
*/
|
||||
|
||||
import type { GeneratorDefinition, GeneratorCategory } from '@/types/testDataGenerator';
|
||||
import { personalGenerators } from './personal';
|
||||
import { businessGenerators } from './business';
|
||||
import { technicalGenerators } from './technical';
|
||||
import { basicGenerators } from './basic';
|
||||
|
||||
/**
|
||||
* 生成器分类配置
|
||||
*/
|
||||
export const generatorCategories: GeneratorCategory[] = [
|
||||
{ id: 'personal', name: '个人信息', icon: 'User' },
|
||||
{ id: 'business', name: '业务数据', icon: 'Briefcase' },
|
||||
{ id: 'technical', name: '技术数据', icon: 'Code' },
|
||||
{ id: 'basic', name: '基础类型', icon: 'Hash' },
|
||||
];
|
||||
|
||||
/**
|
||||
* 所有生成器列表
|
||||
*/
|
||||
export const allGenerators: GeneratorDefinition[] = [
|
||||
...personalGenerators,
|
||||
...businessGenerators,
|
||||
...technicalGenerators,
|
||||
...basicGenerators,
|
||||
];
|
||||
|
||||
/**
|
||||
* 根据 ID 获取生成器
|
||||
*/
|
||||
export function getGeneratorById(id: string): GeneratorDefinition | undefined {
|
||||
return allGenerators.find((g) => g.id === id);
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据分类 ID 获取生成器列表
|
||||
*/
|
||||
export function getGeneratorsByCategory(categoryId: string): GeneratorDefinition[] {
|
||||
return allGenerators.filter((g) => g.categoryId === categoryId);
|
||||
}
|
||||
|
||||
/**
|
||||
* 搜索生成器
|
||||
*/
|
||||
export function searchGenerators(query: string): GeneratorDefinition[] {
|
||||
const lowerQuery = query.toLowerCase();
|
||||
return allGenerators.filter(
|
||||
(g) =>
|
||||
g.name.toLowerCase().includes(lowerQuery) ||
|
||||
g.description.toLowerCase().includes(lowerQuery) ||
|
||||
g.id.toLowerCase().includes(lowerQuery),
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,465 @@
|
||||
/**
|
||||
* 个人信息生成器
|
||||
* 包含：中文姓名、邮箱、手机号、身份证号、中文地址、年龄
|
||||
*/
|
||||
|
||||
import type { GeneratorDefinition } from '@/types/testDataGenerator';
|
||||
|
||||
// 中文姓氏
|
||||
const SURNAMES = [
|
||||
'王',
|
||||
'李',
|
||||
'张',
|
||||
'刘',
|
||||
'陈',
|
||||
'杨',
|
||||
'赵',
|
||||
'黄',
|
||||
'周',
|
||||
'吴',
|
||||
'徐',
|
||||
'孙',
|
||||
'胡',
|
||||
'朱',
|
||||
'高',
|
||||
'林',
|
||||
'何',
|
||||
'郭',
|
||||
'马',
|
||||
'罗',
|
||||
'梁',
|
||||
'宋',
|
||||
'郑',
|
||||
'谢',
|
||||
'韩',
|
||||
'唐',
|
||||
'冯',
|
||||
'于',
|
||||
'董',
|
||||
'萧',
|
||||
'程',
|
||||
'曹',
|
||||
'袁',
|
||||
'邓',
|
||||
'许',
|
||||
'傅',
|
||||
'沈',
|
||||
'曾',
|
||||
'彭',
|
||||
'吕',
|
||||
'苏',
|
||||
'卢',
|
||||
'蒋',
|
||||
'蔡',
|
||||
'贾',
|
||||
'丁',
|
||||
'魏',
|
||||
'薛',
|
||||
'叶',
|
||||
'阎',
|
||||
];
|
||||
|
||||
// 中文名字常用字
|
||||
const NAME_CHARS = [
|
||||
'伟',
|
||||
'芳',
|
||||
'娜',
|
||||
'秀英',
|
||||
'敏',
|
||||
'静',
|
||||
'丽',
|
||||
'强',
|
||||
'磊',
|
||||
'洋',
|
||||
'艳',
|
||||
'勇',
|
||||
'军',
|
||||
'杰',
|
||||
'娟',
|
||||
'涛',
|
||||
'明',
|
||||
'超',
|
||||
'秀兰',
|
||||
'霞',
|
||||
'平',
|
||||
'刚',
|
||||
'桂英',
|
||||
'文',
|
||||
'华',
|
||||
'飞',
|
||||
'鑫',
|
||||
'浩',
|
||||
'凯',
|
||||
'宁',
|
||||
'建',
|
||||
'峰',
|
||||
'辉',
|
||||
'成',
|
||||
'宇',
|
||||
'博',
|
||||
'泽',
|
||||
'思',
|
||||
'睿',
|
||||
'晨',
|
||||
'阳',
|
||||
'雪',
|
||||
'冰',
|
||||
'琳',
|
||||
'瑶',
|
||||
'婷',
|
||||
'欣',
|
||||
'悦',
|
||||
'佳',
|
||||
'慧',
|
||||
];
|
||||
|
||||
// 邮箱域名
|
||||
const EMAIL_DOMAINS = ['qq.com', '163.com', '126.com', 'gmail.com', 'outlook.com', 'hotmail.com'];
|
||||
|
||||
// 省份
|
||||
const PROVINCES = [
|
||||
'北京市',
|
||||
'天津市',
|
||||
'上海市',
|
||||
'重庆市',
|
||||
'河北省',
|
||||
'山西省',
|
||||
'辽宁省',
|
||||
'吉林省',
|
||||
'黑龙江省',
|
||||
'江苏省',
|
||||
'浙江省',
|
||||
'安徽省',
|
||||
'福建省',
|
||||
'江西省',
|
||||
'山东省',
|
||||
'河南省',
|
||||
'湖北省',
|
||||
'湖南省',
|
||||
'广东省',
|
||||
'海南省',
|
||||
'四川省',
|
||||
'贵州省',
|
||||
'云南省',
|
||||
'陕西省',
|
||||
'甘肃省',
|
||||
'青海省',
|
||||
'台湾省',
|
||||
'内蒙古自治区',
|
||||
'广西壮族自治区',
|
||||
'西藏自治区',
|
||||
'宁夏回族自治区',
|
||||
'新疆维吾尔自治区',
|
||||
];
|
||||
|
||||
// 城市
|
||||
const CITIES: Record<string, string[]> = {
|
||||
北京市: ['东城区', '西城区', '朝阳区', '海淀区'],
|
||||
上海市: ['黄浦区', '徐汇区', '长宁区', '静安区'],
|
||||
广东省: ['广州市', '深圳市', '东莞市', '佛山市'],
|
||||
浙江省: ['杭州市', '宁波市', '温州市', '嘉兴市'],
|
||||
江苏省: ['南京市', '苏州市', '无锡市', '常州市'],
|
||||
四川省: ['成都市', '绵阳市', '德阳市', '宜宾市'],
|
||||
};
|
||||
|
||||
/**
|
||||
* 生成随机整数
|
||||
*/
|
||||
function randomInt(min: number, max: number): number {
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
}
|
||||
|
||||
/**
|
||||
* 从数组中随机选择
|
||||
*/
|
||||
function randomPick<T>(arr: T[]): T {
|
||||
return arr[Math.floor(Math.random() * arr.length)];
|
||||
}
|
||||
|
||||
/**
|
||||
* 中文姓名生成器
|
||||
*/
|
||||
export const chineseName: GeneratorDefinition = {
|
||||
id: 'chineseName',
|
||||
name: '中文姓名',
|
||||
description: '生成随机中文姓名',
|
||||
categoryId: 'personal',
|
||||
params: [],
|
||||
generate: () => {
|
||||
const surname = randomPick(SURNAMES);
|
||||
const name = randomPick(NAME_CHARS);
|
||||
return surname + name;
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 邮箱生成器
|
||||
*/
|
||||
export const email: GeneratorDefinition = {
|
||||
id: 'email',
|
||||
name: '邮箱',
|
||||
description: '生成随机邮箱地址',
|
||||
categoryId: 'personal',
|
||||
params: [
|
||||
{
|
||||
key: 'domain',
|
||||
label: '邮箱域名',
|
||||
type: 'select',
|
||||
defaultValue: 'random',
|
||||
description: '选择邮箱域名',
|
||||
options: [
|
||||
{ label: '随机', value: 'random' },
|
||||
...EMAIL_DOMAINS.map((d) => ({ label: d, value: d })),
|
||||
],
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const domain =
|
||||
params.domain === 'random' ? randomPick(EMAIL_DOMAINS) : (params.domain as string);
|
||||
const username = Math.random().toString(36).substring(2, 10);
|
||||
return `${username}@${domain}`;
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 手机号生成器
|
||||
*/
|
||||
export const chinesePhone: GeneratorDefinition = {
|
||||
id: 'chinesePhone',
|
||||
name: '手机号',
|
||||
description: '生成随机中国手机号码',
|
||||
categoryId: 'personal',
|
||||
params: [
|
||||
{
|
||||
key: 'prefix',
|
||||
label: '号段前缀',
|
||||
type: 'select',
|
||||
defaultValue: 'random',
|
||||
description: '选择手机号前缀',
|
||||
options: [
|
||||
{ label: '随机', value: 'random' },
|
||||
{ label: '138', value: '138' },
|
||||
{ label: '139', value: '139' },
|
||||
{ label: '158', value: '158' },
|
||||
{ label: '188', value: '188' },
|
||||
{ label: '177', value: '177' },
|
||||
],
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const prefixes = ['138', '139', '158', '188', '177', '136', '159', '186', '135', '150'];
|
||||
const prefix = params.prefix === 'random' ? randomPick(prefixes) : (params.prefix as string);
|
||||
const suffix = String(randomInt(10000000, 99999999));
|
||||
return prefix + suffix;
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 身份证号生成器
|
||||
*/
|
||||
export const idCard: GeneratorDefinition = {
|
||||
id: 'idCard',
|
||||
name: '身份证号',
|
||||
description: '生成随机身份证号码',
|
||||
categoryId: 'personal',
|
||||
params: [
|
||||
{
|
||||
key: 'region',
|
||||
label: '地区',
|
||||
type: 'select',
|
||||
defaultValue: 'random',
|
||||
description: '选择身份证前6位地区码',
|
||||
options: [
|
||||
{ label: '随机', value: 'random' },
|
||||
{ label: '北京', value: '110101' },
|
||||
{ label: '上海', value: '310101' },
|
||||
{ label: '广州', value: '440103' },
|
||||
{ label: '深圳', value: '440305' },
|
||||
],
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const regions = ['110101', '310101', '440103', '440305', '510104', '330102'];
|
||||
const region = params.region === 'random' ? randomPick(regions) : (params.region as string);
|
||||
|
||||
// 出生日期 1960-2005年
|
||||
const year = randomInt(1960, 2005);
|
||||
const month = String(randomInt(1, 12)).padStart(2, '0');
|
||||
const day = String(randomInt(1, 28)).padStart(2, '0');
|
||||
const birthday = `${year}${month}${day}`;
|
||||
|
||||
// 顺序码
|
||||
const sequence = String(randomInt(1, 999)).padStart(3, '0');
|
||||
|
||||
// 前17位
|
||||
const prefix17 = region + birthday + sequence;
|
||||
|
||||
// 校验码
|
||||
const weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
|
||||
const checkCodes = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'];
|
||||
let sum = 0;
|
||||
for (let i = 0; i < 17; i++) {
|
||||
sum += parseInt(prefix17[i]) * weights[i];
|
||||
}
|
||||
const checkCode = checkCodes[sum % 11];
|
||||
|
||||
return prefix17 + checkCode;
|
||||
},
|
||||
generateAtIndex: (params, index) => {
|
||||
const regions = ['110101', '310101', '440103', '440305', '510104', '330102'];
|
||||
const region =
|
||||
params.region === 'random' ? regions[index % regions.length] : (params.region as string);
|
||||
|
||||
const year = 1990;
|
||||
const month = String(randomInt(1, 12)).padStart(2, '0');
|
||||
const day = String(randomInt(1, 28)).padStart(2, '0');
|
||||
const birthday = `${year}${month}${day}`;
|
||||
|
||||
const sequence = String(index + 1).padStart(3, '0');
|
||||
const prefix17 = region + birthday + sequence;
|
||||
|
||||
const weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
|
||||
const checkCodes = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'];
|
||||
let sum = 0;
|
||||
for (let i = 0; i < 17; i++) {
|
||||
sum += parseInt(prefix17[i]) * weights[i];
|
||||
}
|
||||
const checkCode = checkCodes[sum % 11];
|
||||
|
||||
return prefix17 + checkCode;
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 中文地址生成器
|
||||
*/
|
||||
export const chineseAddress: GeneratorDefinition = {
|
||||
id: 'chineseAddress',
|
||||
name: '中文地址',
|
||||
description: '生成随机中文地址',
|
||||
categoryId: 'personal',
|
||||
params: [
|
||||
{
|
||||
key: 'includeDetail',
|
||||
label: '包含详细地址',
|
||||
type: 'boolean',
|
||||
defaultValue: true,
|
||||
description: '是否包含街道门牌号',
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const province = randomPick(PROVINCES);
|
||||
const cities = CITIES[province] || ['市区'];
|
||||
const city = randomPick(cities);
|
||||
const district = `区${randomInt(1, 20)}号`;
|
||||
|
||||
if (params.includeDetail) {
|
||||
const street = `路${randomInt(1, 200)}号`;
|
||||
return `${province}${city}${district}${street}`;
|
||||
}
|
||||
return `${province}${city}${district}`;
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 年龄生成器
|
||||
*/
|
||||
export const age: GeneratorDefinition = {
|
||||
id: 'age',
|
||||
name: '年龄',
|
||||
description: '生成随机年龄',
|
||||
categoryId: 'personal',
|
||||
params: [
|
||||
{
|
||||
key: 'min',
|
||||
label: '最小年龄',
|
||||
type: 'number',
|
||||
defaultValue: 18,
|
||||
min: 0,
|
||||
max: 150,
|
||||
description: '年龄最小值',
|
||||
},
|
||||
{
|
||||
key: 'max',
|
||||
label: '最大年龄',
|
||||
type: 'number',
|
||||
defaultValue: 65,
|
||||
min: 0,
|
||||
max: 150,
|
||||
description: '年龄最大值',
|
||||
},
|
||||
{
|
||||
key: 'distribution',
|
||||
label: '分布方式',
|
||||
type: 'select',
|
||||
defaultValue: 'uniform',
|
||||
description: '年龄分布方式',
|
||||
options: [
|
||||
{ label: '均匀分布', value: 'uniform' },
|
||||
{ label: '正态分布', value: 'normal' },
|
||||
{ label: '人口统计分布', value: 'demographic' },
|
||||
],
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const min = (params.min as number) || 18;
|
||||
const max = (params.max as number) || 65;
|
||||
const distribution = (params.distribution as string) || 'uniform';
|
||||
|
||||
if (distribution === 'normal') {
|
||||
return String(normalRandom(min, max));
|
||||
} else if (distribution === 'demographic') {
|
||||
return String(demographicRandom());
|
||||
}
|
||||
return String(randomInt(min, max));
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 正态分布随机数
|
||||
*/
|
||||
function normalRandom(min: number, max: number): number {
|
||||
const mean = (min + max) / 2;
|
||||
const stdDev = (max - min) / 6;
|
||||
let u = 0,
|
||||
v = 0;
|
||||
while (u === 0) u = Math.random();
|
||||
while (v === 0) v = Math.random();
|
||||
const num = Math.sqrt(-2.0 * Math.log(u)) * Math.cos(2.0 * Math.PI * v);
|
||||
const value = Math.round(mean + num * stdDev);
|
||||
return Math.max(min, Math.min(max, value));
|
||||
}
|
||||
|
||||
/**
|
||||
* 人口统计分布随机数（模拟真实年龄分布）
|
||||
*/
|
||||
function demographicRandom(): number {
|
||||
const ageGroups = [
|
||||
{ min: 0, max: 14, weight: 0.18 },
|
||||
{ min: 15, max: 24, weight: 0.12 },
|
||||
{ min: 25, max: 34, weight: 0.18 },
|
||||
{ min: 35, max: 44, weight: 0.17 },
|
||||
{ min: 45, max: 54, weight: 0.16 },
|
||||
{ min: 55, max: 64, weight: 0.12 },
|
||||
{ min: 65, max: 100, weight: 0.07 },
|
||||
];
|
||||
|
||||
const random = Math.random();
|
||||
let cumulative = 0;
|
||||
for (const group of ageGroups) {
|
||||
cumulative += group.weight;
|
||||
if (random <= cumulative) {
|
||||
return randomInt(group.min, group.max);
|
||||
}
|
||||
}
|
||||
return randomInt(25, 34);
|
||||
}
|
||||
|
||||
export const personalGenerators: GeneratorDefinition[] = [
|
||||
chineseName,
|
||||
email,
|
||||
chinesePhone,
|
||||
idCard,
|
||||
chineseAddress,
|
||||
age,
|
||||
];
|
||||
@@ -0,0 +1,268 @@
|
||||
/**
|
||||
* 技术数据生成器
|
||||
* 包含：UUID、IPv4、URL
|
||||
*/
|
||||
|
||||
import type { GeneratorDefinition } from '@/types/testDataGenerator';
|
||||
|
||||
/**
|
||||
* 生成随机整数
|
||||
*/
|
||||
function randomInt(min: number, max: number): number {
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
}
|
||||
|
||||
/**
|
||||
* 从数组中随机选择
|
||||
*/
|
||||
function randomPick<T>(arr: T[]): T {
|
||||
return arr[Math.floor(Math.random() * arr.length)];
|
||||
}
|
||||
|
||||
/**
|
||||
* UUID 生成器
|
||||
*/
|
||||
export const uuid: GeneratorDefinition = {
|
||||
id: 'uuid',
|
||||
name: 'UUID',
|
||||
description: '生成随机 UUID',
|
||||
categoryId: 'technical',
|
||||
params: [
|
||||
{
|
||||
key: 'version',
|
||||
label: 'UUID 版本',
|
||||
type: 'select',
|
||||
defaultValue: 'v4',
|
||||
description: 'UUID 版本',
|
||||
options: [
|
||||
{ label: 'v4 (随机)', value: 'v4' },
|
||||
{ label: 'v1 (时间戳)', value: 'v1' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'uppercase',
|
||||
label: '大写字母',
|
||||
type: 'boolean',
|
||||
defaultValue: false,
|
||||
description: '是否使用大写字母',
|
||||
},
|
||||
{
|
||||
key: 'noDashes',
|
||||
label: '无连字符',
|
||||
type: 'boolean',
|
||||
defaultValue: false,
|
||||
description: '是否省略连字符',
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const version = (params.version as string) || 'v4';
|
||||
const uppercase = params.uppercase === true;
|
||||
const noDashes = params.noDashes === true;
|
||||
|
||||
let result: string;
|
||||
if (version === 'v1') {
|
||||
result = generateUUIDv1();
|
||||
} else {
|
||||
result = generateUUIDv4();
|
||||
}
|
||||
|
||||
if (uppercase) {
|
||||
result = result.toUpperCase();
|
||||
}
|
||||
|
||||
if (noDashes) {
|
||||
result = result.replace(/-/g, '');
|
||||
}
|
||||
|
||||
return result;
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 生成 UUID v4
|
||||
*/
|
||||
function generateUUIDv4(): string {
|
||||
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
|
||||
const r = (Math.random() * 16) | 0;
|
||||
const v = c === 'x' ? r : (r & 0x3) | 0x8;
|
||||
return v.toString(16);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成 UUID v1（简化版本，模拟时间戳）
|
||||
*/
|
||||
function generateUUIDv1(): string {
|
||||
const now = Date.now();
|
||||
const timeLow = (now & 0xffffffff).toString(16).padStart(8, '0');
|
||||
const timeMid = ((now >> 32) & 0xffff).toString(16).padStart(4, '0');
|
||||
const timeHi = ((now >> 48) & 0x0fff) | 0x1000;
|
||||
const clockSeq = randomInt(0, 0x3fff) | 0x8000;
|
||||
const node = Array.from({ length: 6 }, () =>
|
||||
randomInt(0, 255).toString(16).padStart(2, '0'),
|
||||
).join('');
|
||||
|
||||
return `${timeLow}-${timeMid}-${timeHi.toString(16)}-${clockSeq.toString(16)}-${node}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* IPv4 生成器
|
||||
*/
|
||||
export const ipv4: GeneratorDefinition = {
|
||||
id: 'ipv4',
|
||||
name: 'IPv4',
|
||||
description: '生成随机 IPv4 地址',
|
||||
categoryId: 'technical',
|
||||
params: [
|
||||
{
|
||||
key: 'type',
|
||||
label: '地址类型',
|
||||
type: 'select',
|
||||
defaultValue: 'random',
|
||||
description: 'IP 地址类型',
|
||||
options: [
|
||||
{ label: '完全随机', value: 'random' },
|
||||
{ label: '内网地址', value: 'private' },
|
||||
{ label: '公网地址', value: 'public' },
|
||||
{ label: '环回地址', value: 'loopback' },
|
||||
],
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const type = (params.type as string) || 'random';
|
||||
|
||||
if (type === 'private') {
|
||||
return generatePrivateIPv4();
|
||||
} else if (type === 'loopback') {
|
||||
return '127.0.0.1';
|
||||
} else if (type === 'public') {
|
||||
return generatePublicIPv4();
|
||||
}
|
||||
return generateRandomIPv4();
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 生成完全随机 IPv4
|
||||
*/
|
||||
function generateRandomIPv4(): string {
|
||||
return Array.from({ length: 4 }, () => randomInt(0, 255)).join('.');
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成内网 IPv4
|
||||
*/
|
||||
function generatePrivateIPv4(): string {
|
||||
const ranges = [
|
||||
{ prefix: '10', second: () => randomInt(0, 255) },
|
||||
{ prefix: '172', second: () => randomInt(16, 31) },
|
||||
{ prefix: '192.168', second: () => randomInt(0, 255) },
|
||||
];
|
||||
const range = randomPick(ranges);
|
||||
|
||||
if (range.prefix === '192.168') {
|
||||
return `192.168.${range.second()}.${randomInt(1, 254)}`;
|
||||
}
|
||||
return `${range.prefix}.${range.second()}.${randomInt(1, 254)}.${randomInt(1, 254)}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成公网 IPv4
|
||||
*/
|
||||
function generatePublicIPv4(): string {
|
||||
let first: number;
|
||||
do {
|
||||
first = randomInt(1, 255);
|
||||
} while (first === 10 || first === 127 || first === 192 || first === 172);
|
||||
|
||||
return `${first}.${randomInt(0, 255)}.${randomInt(0, 255)}.${randomInt(1, 254)}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* URL 生成器
|
||||
*/
|
||||
export const url: GeneratorDefinition = {
|
||||
id: 'url',
|
||||
name: 'URL',
|
||||
description: '生成随机 URL',
|
||||
categoryId: 'technical',
|
||||
params: [
|
||||
{
|
||||
key: 'protocol',
|
||||
label: '协议',
|
||||
type: 'select',
|
||||
defaultValue: 'https',
|
||||
description: 'URL 协议',
|
||||
options: [
|
||||
{ label: 'HTTPS', value: 'https' },
|
||||
{ label: 'HTTP', value: 'http' },
|
||||
{ label: '随机', value: 'random' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'type',
|
||||
label: 'URL 类型',
|
||||
type: 'select',
|
||||
defaultValue: 'website',
|
||||
description: 'URL 类型',
|
||||
options: [
|
||||
{ label: '网站', value: 'website' },
|
||||
{ label: 'API', value: 'api' },
|
||||
{ label: '图片', value: 'image' },
|
||||
{ label: '文件', value: 'file' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'includePath',
|
||||
label: '包含路径',
|
||||
type: 'boolean',
|
||||
defaultValue: true,
|
||||
description: '是否包含路径',
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const protocol = (params.protocol as string) || 'https';
|
||||
const type = (params.type as string) || 'website';
|
||||
const includePath = params.includePath !== false;
|
||||
|
||||
const actualProtocol = protocol === 'random' ? randomPick(['http', 'https']) : protocol;
|
||||
|
||||
const domains = [
|
||||
'example.com',
|
||||
'test.org',
|
||||
'demo.net',
|
||||
'sample.io',
|
||||
'api.service.com',
|
||||
'cdn.static.com',
|
||||
'img.media.com',
|
||||
];
|
||||
const domain = randomPick(domains);
|
||||
|
||||
let path = '';
|
||||
if (includePath) {
|
||||
if (type === 'api') {
|
||||
path = `/api/v${randomInt(1, 3)}/${randomPick(['users', 'products', 'orders', 'items'])}`;
|
||||
} else if (type === 'image') {
|
||||
path = `/images/${randomPick(['avatar', 'banner', 'logo', 'photo'])}/${randomInt(1, 1000)}.jpg`;
|
||||
} else if (type === 'file') {
|
||||
path = `/files/${randomPick(['document', 'report', 'data'])}/${randomInt(1, 100)}.pdf`;
|
||||
} else {
|
||||
path = `/${randomPick(['about', 'contact', 'products', 'services', 'blog'])}`;
|
||||
}
|
||||
}
|
||||
|
||||
// 添加查询参数
|
||||
let query = '';
|
||||
if (Math.random() > 0.5) {
|
||||
const params = new URLSearchParams();
|
||||
params.set('id', String(randomInt(1, 10000)));
|
||||
if (Math.random() > 0.5) params.set('page', String(randomInt(1, 100)));
|
||||
if (Math.random() > 0.7) params.set('lang', randomPick(['zh', 'en', 'ja']));
|
||||
query = `?${params.toString()}`;
|
||||
}
|
||||
|
||||
return `${actualProtocol}://${domain}${path}${query}`;
|
||||
},
|
||||
};
|
||||
|
||||
export const technicalGenerators: GeneratorDefinition[] = [uuid, ipv4, url];
|
||||
@@ -0,0 +1,48 @@
|
||||
/**
|
||||
* 生成器内部类型定义
|
||||
* 与 testDataGenerator.ts 分离，用于生成器库内部
|
||||
*/
|
||||
|
||||
import type { GeneratorDefinition, GeneratorCategory } from '@/types/testDataGenerator';
|
||||
|
||||
export type { GeneratorDefinition, GeneratorCategory };
|
||||
|
||||
/**
|
||||
* 生成器注册表
|
||||
*/
|
||||
export interface GeneratorRegistry {
|
||||
/** 分类列表 */
|
||||
categories: GeneratorCategory[];
|
||||
/** 生成器列表 */
|
||||
generators: GeneratorDefinition[];
|
||||
}
|
||||
|
||||
/**
|
||||
* 随机数生成选项
|
||||
*/
|
||||
export interface RandomOptions {
|
||||
/** 最小值 */
|
||||
min?: number;
|
||||
/** 最大值 */
|
||||
max?: number;
|
||||
/** 是否包含最小值 */
|
||||
includeMin?: boolean;
|
||||
/** 是否包含最大值 */
|
||||
includeMax?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* 字符集选项
|
||||
*/
|
||||
export interface CharsetOptions {
|
||||
/** 是否包含大写字母 */
|
||||
uppercase?: boolean;
|
||||
/** 是否包含小写字母 */
|
||||
lowercase?: boolean;
|
||||
/** 是否包含数字 */
|
||||
digits?: boolean;
|
||||
/** 是否包含特殊字符 */
|
||||
special?: boolean;
|
||||
/** 自定义字符集 */
|
||||
custom?: string;
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Image as ImageIcon, Trash2, Upload } from 'lucide-react';
|
||||
import TextInputArea from '@/components/TextInputArea';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import CopyButton from '@/components/CopyButton';
|
||||
import { CopyButton } from '@/components/CopyButton';
|
||||
import DecodeResultPaper from '@/components/DecodeResultPaper';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { downloadBlob, formatFileSize } from '@/utils/base64Converter';
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import TextInputArea from '@/components/TextInputArea';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import CopyButton from '@/components/CopyButton';
|
||||
import { CopyButton } from '@/components/CopyButton';
|
||||
import { base64ToText, textToBase64 } from '@/utils/base64Converter';
|
||||
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
|
||||
import { useContextMenuData } from '@/utils/useContextMenuData';
|
||||
|
||||
@@ -1,107 +0,0 @@
|
||||
import type { ComponentType } from 'react';
|
||||
import React from 'react';
|
||||
import type { LucideProps } from 'lucide-react';
|
||||
import { ChevronRight } from 'lucide-react';
|
||||
import type { PaletteColorKey } from '@/config/features';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const PALETTE_COLORS: Record<PaletteColorKey, string> = {
|
||||
primary: '13, 148, 136', // teal
|
||||
success: '22, 163, 74', // green
|
||||
warning: '217, 119, 6', // amber (存储清理的橙色轴)
|
||||
error: '220, 38, 38', // red
|
||||
secondary: '147, 51, 232',
|
||||
info: '37, 99, 235', // blue
|
||||
};
|
||||
|
||||
export interface ToolCardProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
title: string;
|
||||
description?: string;
|
||||
snapshot?: React.ReactNode;
|
||||
colorKey: PaletteColorKey;
|
||||
icon: ComponentType<LucideProps>;
|
||||
onNavigate: () => void;
|
||||
}
|
||||
|
||||
export default function ToolCard({
|
||||
title,
|
||||
description,
|
||||
snapshot,
|
||||
colorKey,
|
||||
icon: IconComponent,
|
||||
onNavigate,
|
||||
className,
|
||||
...props
|
||||
}: ToolCardProps) {
|
||||
const rgbValues = PALETTE_COLORS[colorKey];
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
['--tool-color' as string]: rgbValues,
|
||||
}}
|
||||
/* 💡 核心修复点：
|
||||
- 坚决不用 h-full 或固定高度，锁死 h-auto（高度自适应流），配合 py-4 px-4 牢牢把内容包裹在卡片体内。
|
||||
- 废除原先会乱飘的内联 style 属性擦写，全权放权给 Tailwind 的声明式 hover 变体。
|
||||
*/
|
||||
className={cn(
|
||||
'group relative rounded-xl border border-border/70 bg-card text-card-foreground p-4 h-auto flex flex-col items-stretch justify-start gap-3 shadow-sm select-none box-border',
|
||||
'hover:bg-muted/30',
|
||||
'hover:border-[rgba(var(--tool-color),0.45)]',
|
||||
'hover:shadow-[0_8px_24px_-8px_rgba(var(--tool-color),0.14)] dark:hover:shadow-[0_8px_30px_-10px_rgba(var(--tool-color),0.25)]',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{/* 上半部分：核心信息交互排版轴 */}
|
||||
<div className="flex items-center justify-between w-full relative min-w-0 min-h-[44px]">
|
||||
<div className="flex gap-3 items-center min-w-0 flex-1 pr-2">
|
||||
{/* 左侧圆形图标容器 */}
|
||||
<div
|
||||
className={cn(
|
||||
'flex items-center justify-center w-10 h-10 rounded-xl shrink-0',
|
||||
'bg-[rgba(var(--tool-color),0.08)] dark:bg-[rgba(var(--tool-color),0.12)]',
|
||||
'text-[rgb(var(--tool-color))]',
|
||||
)}
|
||||
>
|
||||
<IconComponent className="h-5 w-5 shrink-0" />
|
||||
</div>
|
||||
|
||||
{/* 中间文字描述区：利用 flex-1 min-w-0 防御文本过长发生恶性撑开 */}
|
||||
<div className="flex-1 min-w-0 flex flex-col">
|
||||
<h4 className="font-bold text-sm tracking-tight text-foreground leading-snug">
|
||||
{title}
|
||||
</h4>
|
||||
{description && (
|
||||
<p className="text-[11px] font-medium text-muted-foreground/90 mt-0.5 leading-normal w-full truncate">
|
||||
{description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 右侧指示小箭头 */}
|
||||
<div className="text-muted-foreground/40 group-hover:text-[rgb(var(--tool-color))] p-1 shrink-0 group-hover:translate-x-0.5">
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</div>
|
||||
|
||||
{/* 覆盖整个上半部分的绝对定位隐形跳转层（A11y 无障碍标准合规） */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={onNavigate}
|
||||
aria-label={`进入 ${title}`}
|
||||
className="absolute inset-0 w-full h-full cursor-pointer bg-transparent border-none opacity-0 focus-visible:outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 下半部分：未来的动态预览沙箱独立承载区 */}
|
||||
{snapshot != null && (
|
||||
<div className="mt-1 pt-3 border-t border-dashed border-border/80 w-full relative z-10 select-text">
|
||||
{snapshot}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
ToolCard.displayName = 'ToolCard';
|
||||
@@ -1,7 +1,7 @@
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { formatBytes } from '@/utils/format';
|
||||
import CopyButton from '@/components/CopyButton';
|
||||
import { CopyButton } from '@/components/CopyButton';
|
||||
import TextInputArea from '@/components/TextInputArea';
|
||||
import { validateJson } from '@/utils/jsonFormatter';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
@@ -7,7 +7,7 @@ import {
|
||||
validateJson,
|
||||
} from '@/utils/jsonFormatter';
|
||||
import { formatBytes } from '@/utils/format';
|
||||
import CopyButton from '@/components/CopyButton';
|
||||
import { CopyButton } from '@/components/CopyButton';
|
||||
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
|
||||
import TextInputArea from '@/components/TextInputArea';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import CopyButton from '@/components/CopyButton';
|
||||
import { CopyButton } from '@/components/CopyButton';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { stringifyJson } from '@/utils/jwt';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import TextInputArea from '@/components/TextInputArea';
|
||||
import CopyButton from '@/components/CopyButton';
|
||||
import { CopyButton } from '@/components/CopyButton';
|
||||
import JwtSection from './JwtSection';
|
||||
import { useJwt } from './useJwt';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { fireEvent, render, screen } from '@testing-library/react';
|
||||
import { fireEvent, render, screen, waitFor } from '@testing-library/react';
|
||||
import QrCodePage from '../index';
|
||||
|
||||
vi.mock('lucide-react', async (importOriginal) => {
|
||||
@@ -102,7 +102,7 @@ describe('QrCodePage', () => {
|
||||
expect(generateButton).not.toBeDisabled();
|
||||
});
|
||||
|
||||
it('点击生成按钮应该切换到预览态', () => {
|
||||
it('点击生成按钮应该切换到预览态', async () => {
|
||||
render(<QrCodePage />);
|
||||
|
||||
// 输入文本
|
||||
@@ -114,14 +114,16 @@ describe('QrCodePage', () => {
|
||||
fireEvent.click(generateButton);
|
||||
|
||||
// 验证切换到预览态
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('原始文本')).toBeInTheDocument();
|
||||
expect(screen.getByText('编辑')).toBeInTheDocument();
|
||||
expect(screen.queryByText('生成二维码')).not.toBeInTheDocument();
|
||||
// 预览态应该显示二维码
|
||||
expect(screen.getByTestId('qr-code-preview')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('预览态应该显示截断的文本', () => {
|
||||
it('预览态应该显示截断的文本', async () => {
|
||||
render(<QrCodePage />);
|
||||
|
||||
// 输入长文本
|
||||
@@ -135,10 +137,12 @@ describe('QrCodePage', () => {
|
||||
|
||||
// 验证显示截断的文本（80字符 + "..."）
|
||||
const truncatedText = longText.slice(0, 80) + '...';
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(truncatedText)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('预览态应该显示完整的短文本', () => {
|
||||
it('预览态应该显示完整的短文本', async () => {
|
||||
render(<QrCodePage />);
|
||||
|
||||
// 输入短文本
|
||||
@@ -150,10 +154,12 @@ describe('QrCodePage', () => {
|
||||
fireEvent.click(screen.getByText('生成二维码'));
|
||||
|
||||
// 验证显示完整文本
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(shortText)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('点击编辑按钮应该返回输入态', () => {
|
||||
it('点击编辑按钮应该返回输入态', async () => {
|
||||
render(<QrCodePage />);
|
||||
|
||||
// 输入文本并生成
|
||||
@@ -161,6 +167,11 @@ describe('QrCodePage', () => {
|
||||
fireEvent.change(textarea, { target: { value: 'https://example.com' } });
|
||||
fireEvent.click(screen.getByText('生成二维码'));
|
||||
|
||||
// 等待生成完成
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('编辑')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
// 点击编辑按钮
|
||||
fireEvent.click(screen.getByText('编辑'));
|
||||
|
||||
@@ -172,7 +183,7 @@ describe('QrCodePage', () => {
|
||||
expect(screen.queryByTestId('qr-code-preview')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('返回编辑态应该保留上次输入的内容', () => {
|
||||
it('返回编辑态应该保留上次输入的内容', async () => {
|
||||
render(<QrCodePage />);
|
||||
|
||||
// 输入文本并生成
|
||||
@@ -180,6 +191,11 @@ describe('QrCodePage', () => {
|
||||
fireEvent.change(textarea, { target: { value: 'https://example.com' } });
|
||||
fireEvent.click(screen.getByText('生成二维码'));
|
||||
|
||||
// 等待生成完成
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('编辑')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
// 点击编辑按钮
|
||||
fireEvent.click(screen.getByText('编辑'));
|
||||
|
||||
|
||||
@@ -165,8 +165,11 @@ export function useQrCode(): QrCodeContextValue {
|
||||
return;
|
||||
}
|
||||
|
||||
// 先设置 loading 状态，让 React 渲染加载动画
|
||||
setGeneratorState((prev) => ({ ...prev, generating: true, inputError: '' }));
|
||||
|
||||
// 延迟到下一帧生成，确保 loading 状态先被渲染显示
|
||||
setTimeout(() => {
|
||||
const qrCodeDataUrl = generateQrCodeDataUrl(text);
|
||||
|
||||
if (!qrCodeDataUrl) {
|
||||
@@ -186,6 +189,7 @@ export function useQrCode(): QrCodeContextValue {
|
||||
qrCodeDataUrl,
|
||||
generating: false,
|
||||
}));
|
||||
}, 0);
|
||||
}, [generatorState.textToEncode, t]);
|
||||
|
||||
/** 返回编辑态，保留上次输入内容 */
|
||||
|
||||
@@ -0,0 +1,114 @@
|
||||
/**
|
||||
* 数据预览组件
|
||||
* 展示一条示例数据，展示数据结构
|
||||
*/
|
||||
|
||||
import { useMemo } from 'react';
|
||||
import { FileJson, FileText } from 'lucide-react';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { getGeneratorById } from '@/lib/generators';
|
||||
import type { FieldConfig } from '@/types/testDataGenerator';
|
||||
|
||||
interface DataPreviewProps {
|
||||
fields: FieldConfig[];
|
||||
}
|
||||
|
||||
/** JSON 语法高亮渲染 */
|
||||
function JsonHighlight({ data }: { data: Record<string, unknown> }) {
|
||||
const formatted = useMemo(() => {
|
||||
const lines: { indent: string; key?: string; value: string; isLast: boolean }[] = [];
|
||||
const entries = Object.entries(data);
|
||||
|
||||
entries.forEach(([key, value], index) => {
|
||||
const isLast = index === entries.length - 1;
|
||||
const formattedValue =
|
||||
value === null ? 'null' : typeof value === 'string' ? `"${value}"` : String(value);
|
||||
lines.push({ indent: ' ', key, value: formattedValue, isLast });
|
||||
});
|
||||
|
||||
return lines;
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<pre className="text-sm font-mono leading-relaxed">
|
||||
<span className="text-muted-foreground">{'{'}</span>
|
||||
{formatted.map((line, i) => (
|
||||
<div key={i} className="flex">
|
||||
<span className="text-muted-foreground">{line.indent}</span>
|
||||
<span className="text-blue-500 dark:text-blue-400">"{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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
/**
|
||||
* 导出面板组件
|
||||
* 提供复制、下载 JSON、下载 CSV 选项
|
||||
*/
|
||||
|
||||
import { Copy, Download } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { DataExporter } from '@/utils/dataExporter';
|
||||
import type { GenerateResult } from '@/types/testDataGenerator';
|
||||
|
||||
interface ExportPanelProps {
|
||||
result: GenerateResult | null;
|
||||
}
|
||||
|
||||
export default function ExportPanel({ result }: ExportPanelProps) {
|
||||
const { t } = useI18n('testDataGenerator');
|
||||
|
||||
if (!result?.data || result.data.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const handleCopyJSON = async () => {
|
||||
const content = DataExporter.toJSON(result.data!);
|
||||
const success = await DataExporter.copyToClipboard(content);
|
||||
if (success) {
|
||||
toast.success(t('testDataGenerator_copySuccess'));
|
||||
} else {
|
||||
toast.error(t('testDataGenerator_copyFailed'));
|
||||
}
|
||||
};
|
||||
|
||||
const handleCopyCSV = async () => {
|
||||
const content = DataExporter.toCSV(result.data!);
|
||||
const success = await DataExporter.copyToClipboard(content);
|
||||
if (success) {
|
||||
toast.success(t('testDataGenerator_copySuccess'));
|
||||
} else {
|
||||
toast.error(t('testDataGenerator_copyFailed'));
|
||||
}
|
||||
};
|
||||
|
||||
const handleDownloadJSON = () => {
|
||||
const file = DataExporter.toSingleFile(result.data!, 'json', 'test-data');
|
||||
DataExporter.download(file);
|
||||
};
|
||||
|
||||
const handleDownloadCSV = () => {
|
||||
const file = DataExporter.toSingleFile(result.data!, 'csv', 'test-data');
|
||||
DataExporter.download(file);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<h4 className="text-sm font-medium text-foreground">{t('testDataGenerator_export')}</h4>
|
||||
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<Button variant="outline" size="sm" onClick={handleCopyJSON} className="h-9 gap-1.5">
|
||||
<Copy className="h-4 w-4" />
|
||||
{t('testDataGenerator_copyJSON')}
|
||||
</Button>
|
||||
|
||||
<Button variant="outline" size="sm" onClick={handleCopyCSV} className="h-9 gap-1.5">
|
||||
<Copy className="h-4 w-4" />
|
||||
{t('testDataGenerator_copyCSV')}
|
||||
</Button>
|
||||
|
||||
<Button variant="outline" size="sm" onClick={handleDownloadJSON} className="h-9 gap-1.5">
|
||||
<Download className="h-4 w-4" />
|
||||
{t('testDataGenerator_downloadJSON')}
|
||||
</Button>
|
||||
|
||||
<Button variant="outline" size="sm" onClick={handleDownloadCSV} className="h-9 gap-1.5">
|
||||
<Download className="h-4 w-4" />
|
||||
{t('testDataGenerator_downloadCSV')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,230 @@
|
||||
/**
|
||||
* 字段编辑器组件
|
||||
* 编辑单个字段的详细配置
|
||||
*/
|
||||
|
||||
import { useState, useCallback } from 'react';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { getGeneratorById } from '@/lib/generators';
|
||||
import type { FieldConfig } from '@/types/testDataGenerator';
|
||||
import GeneratorSelector from './GeneratorSelector';
|
||||
import GeneratorConfig from './GeneratorConfig';
|
||||
|
||||
interface FieldEditorProps {
|
||||
field: FieldConfig;
|
||||
onChange: (field: FieldConfig) => void;
|
||||
/** 所有字段名列表，用于检测重复 */
|
||||
allFieldNames?: string[];
|
||||
}
|
||||
|
||||
export default function FieldEditor({ field, onChange, allFieldNames = [] }: FieldEditorProps) {
|
||||
const { t } = useI18n('testDataGenerator');
|
||||
const generator = getGeneratorById(field.generatorId);
|
||||
const [nameError, setNameError] = useState<string | null>(null);
|
||||
|
||||
const validateFieldName = useCallback(
|
||||
(name: string): string | null => {
|
||||
const trimmed = name.trim();
|
||||
if (!trimmed) {
|
||||
return t('testDataGenerator_fieldNameEmpty');
|
||||
}
|
||||
if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(trimmed)) {
|
||||
return t('testDataGenerator_fieldNameInvalid');
|
||||
}
|
||||
const isDuplicate = allFieldNames.some(
|
||||
(n, i) => n === trimmed && i !== allFieldNames.indexOf(field.name),
|
||||
);
|
||||
if (isDuplicate) {
|
||||
return t('testDataGenerator_fieldNameDuplicate');
|
||||
}
|
||||
return null;
|
||||
},
|
||||
[allFieldNames, field.name, t],
|
||||
);
|
||||
|
||||
const handleNameChange = (name: string) => {
|
||||
onChange({ ...field, name });
|
||||
// 实时校验
|
||||
const error = validateFieldName(name);
|
||||
setNameError(error);
|
||||
};
|
||||
|
||||
const handleDescriptionChange = (description: string) => {
|
||||
onChange({ ...field, description });
|
||||
};
|
||||
|
||||
const handleRequiredChange = (required: boolean) => {
|
||||
onChange({
|
||||
...field,
|
||||
required,
|
||||
// 切换为必填时清零，切换为非必填时默认 100%
|
||||
nullRate: required ? 0 : 100,
|
||||
});
|
||||
};
|
||||
|
||||
const handleNullRateChange = (nullRate: number) => {
|
||||
// 限制范围 0-100
|
||||
const clampedRate = Math.max(0, Math.min(100, nullRate));
|
||||
// 空值率为 0 时自动设为必填
|
||||
if (clampedRate === 0) {
|
||||
onChange({ ...field, nullRate: clampedRate, required: true });
|
||||
} else {
|
||||
onChange({ ...field, nullRate: clampedRate, required: false });
|
||||
}
|
||||
};
|
||||
|
||||
const handleUniqueChange = (unique: boolean) => {
|
||||
onChange({ ...field, unique });
|
||||
};
|
||||
|
||||
const handleGeneratorChange = (generatorId: string) => {
|
||||
const generator = getGeneratorById(generatorId);
|
||||
const defaultParams: Record<string, unknown> = {};
|
||||
generator?.params.forEach((p) => {
|
||||
defaultParams[p.key] = p.defaultValue;
|
||||
});
|
||||
onChange({
|
||||
...field,
|
||||
generatorId,
|
||||
params: defaultParams,
|
||||
});
|
||||
};
|
||||
|
||||
const handleParamsChange = (params: Record<string, unknown>) => {
|
||||
onChange({ ...field, params });
|
||||
};
|
||||
|
||||
const nullRatePresets = [
|
||||
{ label: '5%', value: 5 },
|
||||
{ label: '20%', value: 20 },
|
||||
{ label: '50%', value: 50 },
|
||||
{ label: '75%', value: 75 },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
{/* 基础配置 */}
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="text-sm font-medium text-foreground">
|
||||
{t('testDataGenerator_fieldName')}
|
||||
</label>
|
||||
<span className="text-xs text-muted-foreground">{field.name.length}/20</span>
|
||||
</div>
|
||||
<Input
|
||||
value={field.name}
|
||||
onChange={(e) => handleNameChange(e.target.value)}
|
||||
placeholder={t('testDataGenerator_fieldNamePlaceholder')}
|
||||
maxLength={20}
|
||||
className={`h-9 ${nameError ? 'border-destructive' : ''}`}
|
||||
/>
|
||||
{nameError && <p className="text-xs text-destructive mt-1">{nameError}</p>}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="text-sm font-medium text-foreground">
|
||||
{t('testDataGenerator_fieldDescription')}
|
||||
</label>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{(field.description || '').length}/50
|
||||
</span>
|
||||
</div>
|
||||
<Input
|
||||
value={field.description || ''}
|
||||
onChange={(e) => handleDescriptionChange(e.target.value)}
|
||||
placeholder={t('testDataGenerator_fieldDescriptionPlaceholder')}
|
||||
maxLength={50}
|
||||
className="h-9"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 必填/选填配置 */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="text-sm font-medium text-foreground">
|
||||
{t('testDataGenerator_required')}
|
||||
</label>
|
||||
<Switch checked={field.required} onCheckedChange={handleRequiredChange} />
|
||||
</div>
|
||||
|
||||
{!field.required && (
|
||||
<div className="space-y-2 pl-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{t('testDataGenerator_nullRate')}
|
||||
</span>
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{field.nullRate}%
|
||||
</Badge>
|
||||
</div>
|
||||
<Input
|
||||
type="number"
|
||||
value={field.nullRate}
|
||||
onChange={(e) => {
|
||||
const value = Number(e.target.value);
|
||||
if (value >= 0 && value <= 100) {
|
||||
handleNullRateChange(value);
|
||||
}
|
||||
}}
|
||||
min={0}
|
||||
max={100}
|
||||
step={5}
|
||||
className="h-9 w-full"
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
{nullRatePresets.map((preset) => (
|
||||
<button
|
||||
key={preset.value}
|
||||
onClick={() => handleNullRateChange(preset.value)}
|
||||
className={`px-3 py-1.5 text-xs rounded-md transition-colors ${
|
||||
field.nullRate === preset.value
|
||||
? 'bg-primary text-primary-foreground'
|
||||
: 'bg-muted text-muted-foreground hover:bg-muted/80'
|
||||
}`}
|
||||
>
|
||||
{preset.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 唯一性约束 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="text-sm font-medium text-foreground">
|
||||
{t('testDataGenerator_uniqueConstraint')}
|
||||
</label>
|
||||
<Switch checked={field.unique} onCheckedChange={handleUniqueChange} />
|
||||
</div>
|
||||
|
||||
{/* 生成器选择 */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-foreground">
|
||||
{t('testDataGenerator_generator')}
|
||||
</label>
|
||||
<GeneratorSelector selectedId={field.generatorId} onChange={handleGeneratorChange} />
|
||||
</div>
|
||||
|
||||
{/* 生成器参数配置 */}
|
||||
{generator && (
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-foreground">
|
||||
{t('testDataGenerator_generatorParams')}
|
||||
</label>
|
||||
<GeneratorConfig
|
||||
generator={generator}
|
||||
params={field.params}
|
||||
onChange={handleParamsChange}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
/**
|
||||
* 字段项组件
|
||||
* 展示单个字段的基本信息，适配固定高度卡片
|
||||
*/
|
||||
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { getGeneratorById } from '@/lib/generators';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import type { FieldConfig } from '@/types/testDataGenerator';
|
||||
|
||||
interface FieldItemProps {
|
||||
field: FieldConfig;
|
||||
onClick: () => void;
|
||||
}
|
||||
|
||||
export default function FieldItem({ field, onClick }: FieldItemProps) {
|
||||
const { t } = useI18n('testDataGenerator');
|
||||
const generator = getGeneratorById(field.generatorId);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex-1 min-w-0 cursor-pointer rounded-md transition-all hover:bg-muted/50"
|
||||
onClick={onClick}
|
||||
>
|
||||
<div
|
||||
className={`h-full ${field.description ? 'flex flex-col justify-center' : 'flex items-center'}`}
|
||||
>
|
||||
{/* 第一行：字段名 + 标签 */}
|
||||
<div className="flex items-center gap-1.5 overflow-hidden">
|
||||
<span className="font-medium text-sm text-foreground truncate shrink-0 max-w-[140px]">
|
||||
{field.name}
|
||||
</span>
|
||||
<Badge variant="secondary" className="text-[10px] shrink-0 px-1 py-0">
|
||||
{generator?.name || field.generatorId}
|
||||
</Badge>
|
||||
{!field.required && (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="text-[10px] shrink-0 px-1 py-0 text-muted-foreground"
|
||||
>
|
||||
{field.nullRate}%
|
||||
</Badge>
|
||||
)}
|
||||
{field.unique && (
|
||||
<Badge variant="outline" className="text-[10px] shrink-0 px-1 py-0 text-blue-500">
|
||||
{t('testDataGenerator_unique')}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
{/* 第二行：描述 */}
|
||||
{field.description && (
|
||||
<p className="text-[11px] text-muted-foreground mt-0.5 truncate leading-tight">
|
||||
{field.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,466 @@
|
||||
/**
|
||||
* 字段列表组件
|
||||
* 展示所有字段配置，支持添加、删除、拖拽排序
|
||||
* 超过 5 条时启用虚拟列表滚动
|
||||
*/
|
||||
|
||||
import { useState, useRef, useCallback, useEffect } from 'react';
|
||||
import { Plus, GripVertical, Trash2, Save } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Dialog, DialogContent } from '@/components/ui/dialog';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import * as ruleStorage from '@/utils/ruleStorage';
|
||||
import {
|
||||
DndContext,
|
||||
closestCenter,
|
||||
KeyboardSensor,
|
||||
PointerSensor,
|
||||
useSensor,
|
||||
useSensors,
|
||||
type DragEndEvent,
|
||||
type DragStartEvent,
|
||||
DragOverlay,
|
||||
} from '@dnd-kit/core';
|
||||
import {
|
||||
SortableContext,
|
||||
sortableKeyboardCoordinates,
|
||||
verticalListSortingStrategy,
|
||||
useSortable,
|
||||
} from '@dnd-kit/sortable';
|
||||
import { CSS } from '@dnd-kit/utilities';
|
||||
import type { FieldConfig, DataRule } from '@/types/testDataGenerator';
|
||||
import FieldItem from './FieldItem';
|
||||
|
||||
/** 最大字段数量 */
|
||||
export const MAX_FIELDS = 40;
|
||||
|
||||
/** 虚拟列表配置 */
|
||||
const VISIBLE_COUNT = 5;
|
||||
const ROW_HEIGHT = 60; // 卡片高度 52 + 间距 8
|
||||
const ROW_GAP = 8;
|
||||
const OVERSCAN = 2;
|
||||
const DRAG_OVERSCAN = 10; // 拖拽时增加的预加载范围
|
||||
|
||||
interface FieldListProps {
|
||||
fields: FieldConfig[];
|
||||
onUpdate: (index: number, field: FieldConfig) => void;
|
||||
onRemove: (index: number) => void;
|
||||
onAdd: () => void;
|
||||
onEdit: (index: number) => void;
|
||||
onReorder: (oldIndex: number, newIndex: number) => void;
|
||||
editingRule?: DataRule | null;
|
||||
onRuleSaved?: () => void;
|
||||
}
|
||||
|
||||
/** 可排序的字段项 */
|
||||
function SortableFieldItem({
|
||||
field,
|
||||
onEdit,
|
||||
onRemove,
|
||||
}: {
|
||||
field: FieldConfig;
|
||||
onEdit: () => void;
|
||||
onRemove: () => void;
|
||||
}) {
|
||||
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
|
||||
id: field.id,
|
||||
});
|
||||
|
||||
const style = {
|
||||
transform: CSS.Transform.toString(transform),
|
||||
transition,
|
||||
opacity: isDragging ? 0.5 : 1,
|
||||
zIndex: isDragging ? 10 : 0,
|
||||
height: ROW_HEIGHT - ROW_GAP, // 固定卡片高度 52px，与虚拟模式一致
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
style={style}
|
||||
className={`group relative rounded-lg border transition-all ${
|
||||
isDragging
|
||||
? 'border-primary shadow-lg'
|
||||
: 'border-border hover:border-muted-foreground/30 hover:shadow-sm'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-2 h-full px-3 py-2">
|
||||
{/* 拖拽手柄 */}
|
||||
<button
|
||||
className="cursor-grab active:cursor-grabbing p-1 rounded hover:bg-muted/50 touch-none shrink-0"
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
>
|
||||
<GripVertical className="h-4 w-4 text-muted-foreground" />
|
||||
</button>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<FieldItem field={field} onClick={onEdit} />
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity text-destructive hover:text-destructive"
|
||||
onClick={onRemove}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function FieldList({
|
||||
fields,
|
||||
onUpdate: _onUpdate,
|
||||
onRemove,
|
||||
onAdd,
|
||||
onEdit,
|
||||
onReorder,
|
||||
editingRule,
|
||||
onRuleSaved,
|
||||
}: FieldListProps) {
|
||||
const { t } = useI18n('testDataGenerator');
|
||||
const [scrollTop, setScrollTop] = useState(0);
|
||||
const [activeId, setActiveId] = useState<string | null>(null);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const [showSaveDialog, setShowSaveDialog] = useState(false);
|
||||
const [showConfirmOverwrite, setShowConfirmOverwrite] = useState(false);
|
||||
const [ruleName, setRuleName] = useState('');
|
||||
const [ruleDescription, setRuleDescription] = useState('');
|
||||
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor, {
|
||||
activationConstraint: { distance: 5 },
|
||||
}),
|
||||
useSensor(KeyboardSensor, {
|
||||
coordinateGetter: sortableKeyboardCoordinates,
|
||||
}),
|
||||
);
|
||||
|
||||
const handleDragStart = (event: DragStartEvent) => {
|
||||
setActiveId(String(event.active.id));
|
||||
};
|
||||
|
||||
// 拖拽时的滚轮滚动处理
|
||||
useEffect(() => {
|
||||
if (!activeId || !containerRef.current) return;
|
||||
|
||||
const container = containerRef.current;
|
||||
|
||||
const handleWheel = (e: WheelEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
// 滚动容器
|
||||
const scrollAmount = e.deltaY * 0.5; // 降低滚动速度，更易控制
|
||||
const newScrollTop = Math.max(
|
||||
0,
|
||||
Math.min(
|
||||
container.scrollHeight - container.clientHeight,
|
||||
container.scrollTop + scrollAmount,
|
||||
),
|
||||
);
|
||||
container.scrollTop = newScrollTop;
|
||||
setScrollTop(newScrollTop);
|
||||
};
|
||||
|
||||
// 在 document 级别监听，使用 capture 阶段以优先处理
|
||||
document.addEventListener('wheel', handleWheel, { capture: true, passive: false });
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('wheel', handleWheel, { capture: true });
|
||||
};
|
||||
}, [activeId]);
|
||||
|
||||
const handleDragEnd = (event: DragEndEvent) => {
|
||||
const { active, over } = event;
|
||||
setActiveId(null);
|
||||
if (!over || active.id === over.id) return;
|
||||
|
||||
const oldIndex = fields.findIndex((f) => f.id === active.id);
|
||||
const newIndex = fields.findIndex((f) => f.id === over.id);
|
||||
if (oldIndex !== -1 && newIndex !== -1) {
|
||||
onReorder(oldIndex, newIndex);
|
||||
}
|
||||
};
|
||||
|
||||
const handleScroll = useCallback(() => {
|
||||
if (containerRef.current) {
|
||||
setScrollTop(containerRef.current.scrollTop);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const isVirtual = fields.length > VISIBLE_COUNT;
|
||||
const totalHeight = fields.length * ROW_HEIGHT;
|
||||
const fixedContainerHeight = VISIBLE_COUNT * ROW_HEIGHT;
|
||||
// 少于 5 条时高度自适应，5 条及以上固定为 5 条的高度
|
||||
const containerStyle =
|
||||
fields.length < VISIBLE_COUNT
|
||||
? { height: 'auto' as const, overflowY: 'visible' as const }
|
||||
: { height: fixedContainerHeight, overflowY: 'auto' as const };
|
||||
|
||||
// 虚拟列表：计算可见范围（拖拽时扩展预加载范围）
|
||||
const currentOverscan = activeId ? DRAG_OVERSCAN : OVERSCAN;
|
||||
const visibleStart = Math.max(0, Math.floor(scrollTop / ROW_HEIGHT) - currentOverscan);
|
||||
const visibleEnd = Math.min(
|
||||
fields.length,
|
||||
Math.ceil((scrollTop + fixedContainerHeight) / ROW_HEIGHT) + currentOverscan,
|
||||
);
|
||||
const visibleFields = isVirtual ? fields.slice(visibleStart, visibleEnd) : fields;
|
||||
|
||||
// 查找拖拽中的项目（用于 DragOverlay）
|
||||
const activeField = activeId ? fields.find((f) => f.id === activeId) : null;
|
||||
|
||||
const isMaxReached = fields.length >= MAX_FIELDS;
|
||||
|
||||
// 编辑模式下，保存时更新原规则
|
||||
const handleUpdateRule = useCallback(() => {
|
||||
if (!editingRule) return;
|
||||
|
||||
const updated = ruleStorage.update(editingRule.id, {
|
||||
fields: fields,
|
||||
});
|
||||
|
||||
if (updated) {
|
||||
toast.success(t('testDataGenerator_ruleUpdated'));
|
||||
onRuleSaved?.();
|
||||
}
|
||||
}, [editingRule, fields, t, onRuleSaved]);
|
||||
|
||||
// 新建规则或另存为
|
||||
const handleSave = useCallback(
|
||||
(overwrite = false) => {
|
||||
if (!ruleName.trim()) return;
|
||||
|
||||
const trimmedName = ruleName.trim();
|
||||
|
||||
// 检查名称是否重复
|
||||
if (!overwrite) {
|
||||
const existingRule = ruleStorage.getByName(trimmedName);
|
||||
if (existingRule) {
|
||||
setShowConfirmOverwrite(true);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const newRule = ruleStorage.save({
|
||||
name: trimmedName,
|
||||
description: ruleDescription.trim(),
|
||||
fields: fields,
|
||||
});
|
||||
|
||||
if (newRule) {
|
||||
setShowSaveDialog(false);
|
||||
setShowConfirmOverwrite(false);
|
||||
setRuleName('');
|
||||
setRuleDescription('');
|
||||
toast.success(t('testDataGenerator_ruleSaved'));
|
||||
onRuleSaved?.();
|
||||
}
|
||||
},
|
||||
[ruleName, ruleDescription, fields, t, onRuleSaved],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h3 className="text-sm font-medium text-foreground">
|
||||
{t('testDataGenerator_fields')} ({fields.length}/{MAX_FIELDS})
|
||||
</h3>
|
||||
<div className="flex items-center gap-2">
|
||||
{editingRule ? (
|
||||
<>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleUpdateRule}
|
||||
disabled={fields.length === 0}
|
||||
className="h-8 gap-1.5 px-2.5"
|
||||
title={`${t('testDataGenerator_editing')}: ${editingRule.name}`}
|
||||
>
|
||||
<Save className="h-3.5 w-3.5" />
|
||||
{t('testDataGenerator_updateRule')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setShowSaveDialog(true)}
|
||||
disabled={fields.length === 0}
|
||||
className="h-8 px-2"
|
||||
>
|
||||
{t('testDataGenerator_saveAs')}
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setShowSaveDialog(true)}
|
||||
disabled={fields.length === 0}
|
||||
className="h-8 gap-1.5 px-2.5"
|
||||
>
|
||||
<Save className="h-3.5 w-3.5" />
|
||||
{t('testDataGenerator_saveRule')}
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={onAdd}
|
||||
disabled={isMaxReached}
|
||||
className="h-8 gap-1.5 px-2.5"
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
{t('testDataGenerator_addField')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-h-0">
|
||||
{fields.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-8 text-center">
|
||||
<GripVertical className="h-10 w-10 text-muted-foreground/40 mb-3" />
|
||||
<p className="text-sm text-muted-foreground">{t('testDataGenerator_noFields')}</p>
|
||||
<p className="text-xs text-muted-foreground/70 mt-1">
|
||||
{t('testDataGenerator_addFieldHint')}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<DndContext
|
||||
sensors={sensors}
|
||||
collisionDetection={closestCenter}
|
||||
onDragStart={handleDragStart}
|
||||
onDragEnd={handleDragEnd}
|
||||
>
|
||||
<SortableContext items={fields.map((f) => f.id)} strategy={verticalListSortingStrategy}>
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="overflow-y-auto"
|
||||
style={containerStyle}
|
||||
onScroll={handleScroll}
|
||||
>
|
||||
{isVirtual ? (
|
||||
/* 虚拟滚动模式 */
|
||||
<div style={{ height: totalHeight, position: 'relative' }}>
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: visibleStart * ROW_HEIGHT,
|
||||
left: 0,
|
||||
right: 0,
|
||||
}}
|
||||
>
|
||||
{visibleFields.map((field, vi) => {
|
||||
const realIndex = fields.findIndex((f) => f.id === field.id);
|
||||
const isLast = visibleStart + vi === fields.length - 1;
|
||||
return (
|
||||
<div
|
||||
key={field.id}
|
||||
style={{
|
||||
height: ROW_HEIGHT,
|
||||
paddingBottom: isLast ? 0 : ROW_GAP,
|
||||
}}
|
||||
>
|
||||
<SortableFieldItem
|
||||
field={field}
|
||||
onEdit={() => onEdit(realIndex)}
|
||||
onRemove={() => onRemove(realIndex)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
/* 普通模式（≤5 条） */
|
||||
<div className="space-y-2">
|
||||
{fields.map((field, index) => (
|
||||
<SortableFieldItem
|
||||
key={field.id}
|
||||
field={field}
|
||||
onEdit={() => onEdit(index)}
|
||||
onRemove={() => onRemove(index)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</SortableContext>
|
||||
<DragOverlay>
|
||||
{activeField ? (
|
||||
<div className="rounded-lg border border-primary bg-background shadow-lg opacity-90">
|
||||
<div className="flex items-center gap-2 h-full px-3 py-2">
|
||||
<div className="p-1">
|
||||
<GripVertical className="h-4 w-4 text-muted-foreground" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<FieldItem field={activeField} onClick={() => {}} />
|
||||
</div>
|
||||
<div className="h-8 w-8 shrink-0" />
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</DragOverlay>
|
||||
</DndContext>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 保存规则对话框 */}
|
||||
<Dialog open={showSaveDialog} onOpenChange={setShowSaveDialog}>
|
||||
<DialogContent
|
||||
showCloseButton={false}
|
||||
className="w-[calc(100vw-4rem)] max-w-[420px] p-0 pt-6 flex flex-col"
|
||||
>
|
||||
<div className="flex-1 overflow-y-auto px-6 pt-2 pb-4 space-y-4">
|
||||
<Input
|
||||
value={ruleName}
|
||||
onChange={(e) => setRuleName(e.target.value)}
|
||||
placeholder={t('testDataGenerator_ruleNamePlaceholder')}
|
||||
className="h-9"
|
||||
/>
|
||||
<Input
|
||||
value={ruleDescription}
|
||||
onChange={(e) => setRuleDescription(e.target.value)}
|
||||
placeholder={t('testDataGenerator_ruleDescPlaceholder')}
|
||||
className="h-9"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2 px-6 py-2 border-t shrink-0">
|
||||
<Button variant="ghost" size="sm" onClick={() => setShowSaveDialog(false)}>
|
||||
{t('testDataGenerator_cancel')}
|
||||
</Button>
|
||||
<Button size="sm" onClick={() => handleSave()} disabled={!ruleName.trim()}>
|
||||
{t('testDataGenerator_confirm')}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* 覆盖确认对话框 */}
|
||||
<Dialog open={showConfirmOverwrite} onOpenChange={setShowConfirmOverwrite}>
|
||||
<DialogContent
|
||||
showCloseButton={false}
|
||||
className="w-[calc(100vw-4rem)] max-w-[420px] p-0 pt-6 flex flex-col"
|
||||
>
|
||||
<div className="flex-1 overflow-y-auto px-6 pb-4">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t('testDataGenerator_ruleNameDuplicate')}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2 px-6 py-2 border-t shrink-0">
|
||||
<Button variant="ghost" size="sm" onClick={() => setShowConfirmOverwrite(false)}>
|
||||
{t('testDataGenerator_cancel')}
|
||||
</Button>
|
||||
<Button size="sm" onClick={() => handleSave(true)}>
|
||||
{t('testDataGenerator_overwrite')}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
/**
|
||||
* 生成按钮组件
|
||||
* 显示生成按钮、加载状态和进度条
|
||||
*/
|
||||
|
||||
import { Play, Square } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import type { GenerateProgress } from '@/types/testDataGenerator';
|
||||
|
||||
interface GenerateButtonProps {
|
||||
onClick: () => void;
|
||||
onCancel: () => void;
|
||||
isGenerating: boolean;
|
||||
progress: GenerateProgress | null;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
export default function GenerateButton({
|
||||
onClick,
|
||||
onCancel,
|
||||
isGenerating,
|
||||
progress,
|
||||
disabled,
|
||||
}: GenerateButtonProps) {
|
||||
const { t } = useI18n('testDataGenerator');
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{isGenerating ? (
|
||||
<>
|
||||
<Button variant="destructive" onClick={onCancel} className="w-full h-11 gap-2">
|
||||
<Square className="h-5 w-5" />
|
||||
{t('testDataGenerator_cancel')}
|
||||
</Button>
|
||||
|
||||
{/* 进度条 */}
|
||||
{progress && (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between text-xs text-muted-foreground">
|
||||
<span>
|
||||
{t('testDataGenerator_progress', {
|
||||
current: progress.generated.toLocaleString(),
|
||||
total: progress.total.toLocaleString(),
|
||||
})}
|
||||
</span>
|
||||
<span>{progress.progress}%</span>
|
||||
</div>
|
||||
<div className="h-2 bg-muted rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-primary transition-all duration-300"
|
||||
style={{ width: `${progress.progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
{progress.estimatedTimeLeft !== undefined && (
|
||||
<p className="text-xs text-muted-foreground text-center">
|
||||
{t('testDataGenerator_estimatedTime', {
|
||||
time: Math.ceil(progress.estimatedTimeLeft / 1000),
|
||||
})}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<Button onClick={onClick} disabled={disabled} className="w-full h-11 gap-2">
|
||||
<Play className="h-5 w-5" />
|
||||
{t('testDataGenerator_generate')}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
/**
|
||||
* 生成选项组件
|
||||
* 配置生成数量、数据格式等选项
|
||||
*/
|
||||
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { Input } from '@/components/ui/input';
|
||||
|
||||
interface GenerateOptionsProps {
|
||||
count: number;
|
||||
onCountChange: (count: number) => void;
|
||||
format: 'json' | 'csv';
|
||||
onFormatChange: (format: 'json' | 'csv') => void;
|
||||
}
|
||||
|
||||
const COUNT_PRESETS = [50, 100, 1000, 5000, 10000];
|
||||
|
||||
const FORMAT_OPTIONS = [
|
||||
{ value: 'json' as const, label: 'JSON' },
|
||||
{ value: 'csv' as const, label: 'CSV' },
|
||||
];
|
||||
|
||||
export default function GenerateOptions({
|
||||
count,
|
||||
onCountChange,
|
||||
format,
|
||||
onFormatChange,
|
||||
}: GenerateOptionsProps) {
|
||||
const { t } = useI18n('testDataGenerator');
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* 生成数量 */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-foreground">
|
||||
{t('testDataGenerator_count')}
|
||||
</label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{COUNT_PRESETS.map((preset) => (
|
||||
<button
|
||||
key={preset}
|
||||
onClick={() => onCountChange(preset)}
|
||||
className={`px-3 py-1.5 text-xs font-medium rounded-md transition-colors ${
|
||||
count === preset
|
||||
? 'bg-primary text-primary-foreground'
|
||||
: 'bg-muted text-muted-foreground hover:bg-muted/80'
|
||||
}`}
|
||||
>
|
||||
{preset.toLocaleString()}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<Input
|
||||
type="number"
|
||||
value={count}
|
||||
onChange={(e) => {
|
||||
const value = Number(e.target.value);
|
||||
if (value > 0 && value <= 100000) {
|
||||
onCountChange(value);
|
||||
}
|
||||
}}
|
||||
min={1}
|
||||
max={100000}
|
||||
className="h-9"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 数据格式 */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-foreground">
|
||||
{t('testDataGenerator_format')}
|
||||
</label>
|
||||
<div className="flex gap-2">
|
||||
{FORMAT_OPTIONS.map((option) => (
|
||||
<button
|
||||
key={option.value}
|
||||
onClick={() => onFormatChange(option.value)}
|
||||
className={`flex-1 px-3 py-1.5 text-xs font-medium rounded-md transition-colors ${
|
||||
format === option.value
|
||||
? 'bg-primary text-primary-foreground'
|
||||
: 'bg-muted text-muted-foreground hover:bg-muted/80'
|
||||
}`}
|
||||
>
|
||||
{option.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
/**
|
||||
* 生成器配置组件
|
||||
* 根据生成器参数定义动态渲染配置表单
|
||||
*/
|
||||
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import type { GeneratorDefinition } from '@/types/testDataGenerator';
|
||||
|
||||
interface GeneratorConfigProps {
|
||||
generator: GeneratorDefinition;
|
||||
params: Record<string, unknown>;
|
||||
onChange: (params: Record<string, unknown>) => void;
|
||||
}
|
||||
|
||||
export default function GeneratorConfig({ generator, params, onChange }: GeneratorConfigProps) {
|
||||
const { t } = useI18n('testDataGenerator');
|
||||
const handleParamChange = (key: string, value: unknown) => {
|
||||
onChange({ ...params, [key]: value });
|
||||
};
|
||||
|
||||
if (generator.params.length === 0) {
|
||||
return (
|
||||
<p className="text-sm text-muted-foreground py-2">
|
||||
{t('testDataGenerator_noGeneratorParams')}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4 p-3 rounded-lg bg-muted/30">
|
||||
{generator.params.map((param) => (
|
||||
<div key={param.key} className="space-y-2">
|
||||
<label className="text-sm font-medium text-foreground">
|
||||
{param.label}
|
||||
{param.required && <span className="text-destructive ml-1">*</span>}
|
||||
</label>
|
||||
{param.description && (
|
||||
<p className="text-xs text-muted-foreground">{param.description}</p>
|
||||
)}
|
||||
|
||||
{param.type === 'string' && (
|
||||
<Input
|
||||
value={String(params[param.key] ?? param.defaultValue)}
|
||||
onChange={(e) => handleParamChange(param.key, e.target.value)}
|
||||
placeholder={param.placeholder}
|
||||
className="h-9"
|
||||
/>
|
||||
)}
|
||||
|
||||
{param.type === 'number' && (
|
||||
<Input
|
||||
type="number"
|
||||
value={Number(params[param.key] ?? param.defaultValue)}
|
||||
onChange={(e) => handleParamChange(param.key, Number(e.target.value))}
|
||||
min={param.min}
|
||||
max={param.max}
|
||||
className="h-9"
|
||||
/>
|
||||
)}
|
||||
|
||||
{param.type === 'boolean' && (
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{params[param.key] !== false
|
||||
? t('testDataGenerator_enabled')
|
||||
: t('testDataGenerator_disabled')}
|
||||
</span>
|
||||
<Switch
|
||||
checked={params[param.key] !== false}
|
||||
onCheckedChange={(checked) => handleParamChange(param.key, checked)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{param.type === 'select' && (
|
||||
<Select
|
||||
value={String(params[param.key] ?? param.defaultValue)}
|
||||
onValueChange={(value) => handleParamChange(param.key, value)}
|
||||
>
|
||||
<SelectTrigger className="h-9">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{param.options?.map((option) => (
|
||||
<SelectItem key={String(option.value)} value={String(option.value)}>
|
||||
{option.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
|
||||
{param.type === 'array' && (
|
||||
<Input
|
||||
value={
|
||||
Array.isArray(params[param.key])
|
||||
? (params[param.key] as string[]).join(', ')
|
||||
: String(param.defaultValue || '')
|
||||
}
|
||||
onChange={(e) =>
|
||||
handleParamChange(
|
||||
param.key,
|
||||
e.target.value
|
||||
.split(',')
|
||||
.map((s) => s.trim())
|
||||
.filter(Boolean),
|
||||
)
|
||||
}
|
||||
placeholder={t('testDataGenerator_commaSeparated')}
|
||||
className="h-9"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,90 @@
|
||||
/**
|
||||
* 生成器选择器组件
|
||||
* 以分类形式展示所有可用生成器
|
||||
*/
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Search, User, Briefcase, Code, Hash } from 'lucide-react';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { generatorCategories, getGeneratorsByCategory, searchGenerators } from '@/lib/generators';
|
||||
|
||||
interface GeneratorSelectorProps {
|
||||
selectedId: string;
|
||||
onChange: (id: string) => void;
|
||||
}
|
||||
|
||||
const categoryIcons: Record<string, React.ComponentType<{ className?: string }>> = {
|
||||
personal: User,
|
||||
business: Briefcase,
|
||||
technical: Code,
|
||||
basic: Hash,
|
||||
};
|
||||
|
||||
export default function GeneratorSelector({ selectedId, onChange }: GeneratorSelectorProps) {
|
||||
const { t } = useI18n('testDataGenerator');
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [activeCategory, setActiveCategory] = useState<string>(generatorCategories[0]?.id || '');
|
||||
|
||||
const generators = searchQuery
|
||||
? searchGenerators(searchQuery)
|
||||
: getGeneratorsByCategory(activeCategory);
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{/* 搜索框 */}
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder={t('testDataGenerator_searchGenerator')}
|
||||
className="pl-9 h-9"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 分类标签 */}
|
||||
{!searchQuery && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{generatorCategories.map((category) => {
|
||||
const Icon = categoryIcons[category.id];
|
||||
return (
|
||||
<button
|
||||
key={category.id}
|
||||
onClick={() => setActiveCategory(category.id)}
|
||||
className={`flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md transition-colors ${
|
||||
activeCategory === category.id
|
||||
? 'bg-primary text-primary-foreground'
|
||||
: 'bg-muted text-muted-foreground hover:bg-muted/80'
|
||||
}`}
|
||||
>
|
||||
{Icon && <Icon className="h-3.5 w-3.5" />}
|
||||
{category.name}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 生成器列表 */}
|
||||
<div className="grid grid-cols-2 gap-2 max-h-48 overflow-y-auto">
|
||||
{generators.map((generator) => (
|
||||
<button
|
||||
key={generator.id}
|
||||
onClick={() => onChange(generator.id)}
|
||||
className={`flex flex-col items-start p-2 text-left rounded-md border transition-colors ${
|
||||
selectedId === generator.id
|
||||
? 'border-primary bg-primary/5'
|
||||
: 'border-border hover:border-muted-foreground/30'
|
||||
}`}
|
||||
>
|
||||
<span className="text-sm font-medium text-foreground">{generator.name}</span>
|
||||
<span className="text-xs text-muted-foreground line-clamp-1">
|
||||
{generator.description}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
/**
|
||||
* 结果面板组件
|
||||
* 展示生成结果的状态和统计信息
|
||||
*/
|
||||
|
||||
import { CheckCircle, AlertTriangle, XCircle, Clock, Database } from 'lucide-react';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import type { GenerateResult } from '@/types/testDataGenerator';
|
||||
|
||||
interface ResultPanelProps {
|
||||
result: GenerateResult | null;
|
||||
}
|
||||
|
||||
export default function ResultPanel({ result }: ResultPanelProps) {
|
||||
const { t } = useI18n('testDataGenerator');
|
||||
|
||||
if (!result) return null;
|
||||
|
||||
const getStatusIcon = () => {
|
||||
if (result.success && (!result.warnings || result.warnings.length === 0)) {
|
||||
return <CheckCircle className="h-5 w-5 text-green-500" />;
|
||||
}
|
||||
if (result.success && result.warnings && result.warnings.length > 0) {
|
||||
return <AlertTriangle className="h-5 w-5 text-yellow-500" />;
|
||||
}
|
||||
return <XCircle className="h-5 w-5 text-destructive" />;
|
||||
};
|
||||
|
||||
const getStatusText = () => {
|
||||
if (result.success && (!result.warnings || result.warnings.length === 0)) {
|
||||
return t('testDataGenerator_success');
|
||||
}
|
||||
if (result.success && result.warnings && result.warnings.length > 0) {
|
||||
return t('testDataGenerator_partialSuccess');
|
||||
}
|
||||
return t('testDataGenerator_failed');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{/* 状态标题 */}
|
||||
<div className="flex items-center gap-2">
|
||||
{getStatusIcon()}
|
||||
<span className="text-sm font-medium text-foreground">{getStatusText()}</span>
|
||||
</div>
|
||||
|
||||
{/* 统计信息 */}
|
||||
{result.stats && (
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
<div className="flex flex-col items-center p-2 rounded-lg bg-muted/30">
|
||||
<Database className="h-4 w-4 text-muted-foreground mb-1" />
|
||||
<span className="text-lg font-semibold text-foreground">
|
||||
{result.stats.total.toLocaleString()}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{t('testDataGenerator_totalCount')}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center p-2 rounded-lg bg-muted/30">
|
||||
<CheckCircle className="h-4 w-4 text-green-500 mb-1" />
|
||||
<span className="text-lg font-semibold text-green-500">
|
||||
{result.stats.success.toLocaleString()}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{t('testDataGenerator_successCount')}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center p-2 rounded-lg bg-muted/30">
|
||||
<Clock className="h-4 w-4 text-muted-foreground mb-1" />
|
||||
<span className="text-lg font-semibold text-foreground">
|
||||
{(result.stats.duration / 1000).toFixed(2)}s
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">{t('testDataGenerator_duration')}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 警告信息 */}
|
||||
{result.warnings && result.warnings.length > 0 && (
|
||||
<div className="p-3 rounded-lg bg-yellow-500/10 border border-yellow-500/20">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<AlertTriangle className="h-4 w-4 text-yellow-500" />
|
||||
<span className="text-sm font-medium text-yellow-500">
|
||||
{t('testDataGenerator_warnings')}
|
||||
</span>
|
||||
</div>
|
||||
<ul className="list-disc list-inside space-y-1">
|
||||
{result.warnings.slice(0, 5).map((warning, index) => (
|
||||
<li key={index} className="text-xs text-yellow-500/80">
|
||||
{warning}
|
||||
</li>
|
||||
))}
|
||||
{result.warnings.length > 5 && (
|
||||
<li className="text-xs text-yellow-500/80">
|
||||
... {t('testDataGenerator_moreWarnings', { count: result.warnings.length - 5 })}
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 错误信息 */}
|
||||
{result.error && (
|
||||
<div className="p-3 rounded-lg bg-destructive/10 border border-destructive/20">
|
||||
<div className="flex items-center gap-2">
|
||||
<XCircle className="h-4 w-4 text-destructive" />
|
||||
<span className="text-sm text-destructive">{result.error}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,324 @@
|
||||
/**
|
||||
* 规则管理器组件
|
||||
* 管理测试数据生成规则的加载、删除等操作
|
||||
*/
|
||||
|
||||
import { useState, useEffect, useCallback, useMemo } from 'react';
|
||||
import {
|
||||
Search,
|
||||
Upload,
|
||||
Download,
|
||||
Trash2,
|
||||
Copy,
|
||||
Edit,
|
||||
Clock,
|
||||
Tag,
|
||||
Loader2,
|
||||
FolderOpen,
|
||||
} from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Dialog, DialogContent } from '@/components/ui/dialog';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import * as ruleStorage from '@/utils/ruleStorage';
|
||||
import type { DataRule, FieldConfig } from '@/types/testDataGenerator';
|
||||
|
||||
interface RuleManagerProps {
|
||||
onLoad: (fields: FieldConfig[]) => void;
|
||||
onEdit?: (rule: DataRule) => void;
|
||||
onRulesChanged?: () => void;
|
||||
}
|
||||
|
||||
export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleManagerProps) {
|
||||
const { t, i18n } = useI18n('testDataGenerator');
|
||||
const [rules, setRules] = useState<DataRule[]>(() => ruleStorage.getAll());
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [debouncedSearchQuery, setDebouncedSearchQuery] = useState('');
|
||||
const [ruleToDelete, setRuleToDelete] = useState<DataRule | null>(null);
|
||||
const [isImporting, setIsImporting] = useState(false);
|
||||
const [isExporting, setIsExporting] = useState(false);
|
||||
|
||||
const loadRules = useCallback(() => {
|
||||
setRules(ruleStorage.getAll());
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
setDebouncedSearchQuery(searchQuery);
|
||||
}, 250);
|
||||
return () => clearTimeout(timer);
|
||||
}, [searchQuery]);
|
||||
|
||||
const filteredRules = useMemo(() => {
|
||||
if (!debouncedSearchQuery) return rules;
|
||||
const query = debouncedSearchQuery.toLowerCase();
|
||||
return rules.filter(
|
||||
(rule) =>
|
||||
rule.name.toLowerCase().includes(query) || rule.description?.toLowerCase().includes(query),
|
||||
);
|
||||
}, [rules, debouncedSearchQuery]);
|
||||
|
||||
const handleLoad = useCallback(
|
||||
(rule: DataRule) => {
|
||||
onLoad(rule.fields);
|
||||
ruleStorage.recordUse(rule.id);
|
||||
loadRules();
|
||||
toast.success(t('testDataGenerator_ruleLoaded', { name: rule.name }));
|
||||
},
|
||||
[onLoad, loadRules, t],
|
||||
);
|
||||
|
||||
const handleDelete = useCallback(() => {
|
||||
if (!ruleToDelete) return;
|
||||
ruleStorage.deleteRule(ruleToDelete.id);
|
||||
loadRules();
|
||||
setRuleToDelete(null);
|
||||
toast.success(t('testDataGenerator_ruleDeleted'));
|
||||
onRulesChanged?.();
|
||||
}, [ruleToDelete, loadRules, t, onRulesChanged]);
|
||||
|
||||
const handleDuplicate = useCallback(
|
||||
(id: string) => {
|
||||
const result = ruleStorage.duplicate(id, t('testDataGenerator_ruleCopySuffix'));
|
||||
if (result) {
|
||||
loadRules();
|
||||
toast.success(t('testDataGenerator_ruleDuplicated'));
|
||||
onRulesChanged?.();
|
||||
}
|
||||
},
|
||||
[loadRules, t, onRulesChanged],
|
||||
);
|
||||
|
||||
const handleEdit = useCallback(
|
||||
(rule: DataRule) => {
|
||||
onEdit?.(rule);
|
||||
},
|
||||
[onEdit],
|
||||
);
|
||||
|
||||
const handleExport = useCallback(() => {
|
||||
try {
|
||||
setIsExporting(true);
|
||||
const json = ruleStorage.exportRules();
|
||||
const blob = new Blob([json], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
try {
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = 'test-data-rules.json';
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
} finally {
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
toast.success(t('testDataGenerator_exportSuccess'));
|
||||
} catch (error) {
|
||||
console.error('[RuleManager] 导出失败:', error);
|
||||
toast.error(t('testDataGenerator_exportFailed'));
|
||||
} finally {
|
||||
setIsExporting(false);
|
||||
}
|
||||
}, [t]);
|
||||
|
||||
const handleImport = useCallback(() => {
|
||||
const input = document.createElement('input');
|
||||
input.type = 'file';
|
||||
input.accept = '.json';
|
||||
input.onchange = async (e) => {
|
||||
try {
|
||||
setIsImporting(true);
|
||||
const file = (e.target as HTMLInputElement).files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
const text = await file.text();
|
||||
const result = ruleStorage.importRules(text);
|
||||
|
||||
if (result.success > 0) {
|
||||
toast.success(t('testDataGenerator_importSuccess', { count: result.success }));
|
||||
}
|
||||
|
||||
if (result.failed > 0) {
|
||||
toast.error(t('testDataGenerator_importFailed', { count: result.failed }));
|
||||
console.warn('[RuleManager] 导入警告:', result.errors);
|
||||
}
|
||||
|
||||
loadRules();
|
||||
onRulesChanged?.();
|
||||
} catch (error) {
|
||||
console.error('[RuleManager] 导入失败:', error);
|
||||
toast.error(t('testDataGenerator_importFailed'));
|
||||
} finally {
|
||||
setIsImporting(false);
|
||||
}
|
||||
};
|
||||
input.click();
|
||||
}, [loadRules, t, onRulesChanged]);
|
||||
|
||||
const formatDate = useCallback(
|
||||
(timestamp: number) => {
|
||||
return new Date(timestamp).toLocaleDateString(i18n.language || 'zh-CN', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
});
|
||||
},
|
||||
[i18n.language],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* 删除确认对话框 */}
|
||||
<Dialog open={!!ruleToDelete} onOpenChange={() => setRuleToDelete(null)}>
|
||||
<DialogContent
|
||||
showCloseButton={false}
|
||||
className="w-[calc(100vw-4rem)] max-w-[420px] p-0 pt-6 flex flex-col"
|
||||
>
|
||||
<div className="flex-1 overflow-y-auto px-6 pb-4">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t('testDataGenerator_confirmDeleteDescription', { name: ruleToDelete?.name ?? '' })}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2 px-6 py-2 border-t shrink-0">
|
||||
<Button variant="ghost" size="sm" onClick={() => setRuleToDelete(null)}>
|
||||
{t('testDataGenerator_cancel')}
|
||||
</Button>
|
||||
<Button variant="destructive" size="sm" onClick={handleDelete}>
|
||||
{t('testDataGenerator_confirm')}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* 工具栏 */}
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleImport}
|
||||
disabled={isImporting}
|
||||
className="h-8 gap-1.5"
|
||||
>
|
||||
{isImporting ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Upload className="h-4 w-4" />
|
||||
)}
|
||||
{t('testDataGenerator_import')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleExport}
|
||||
disabled={isExporting || rules.length === 0}
|
||||
className="h-8 gap-1.5"
|
||||
>
|
||||
{isExporting ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Download className="h-4 w-4" />
|
||||
)}
|
||||
{t('testDataGenerator_export')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 搜索框 */}
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value.slice(0, 20))}
|
||||
placeholder={t('testDataGenerator_searchRules')}
|
||||
className="pl-9 pr-24 h-9"
|
||||
maxLength={20}
|
||||
/>
|
||||
<span className="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-muted-foreground pointer-events-none">
|
||||
{t('testDataGenerator_ruleCount', { count: rules.length, max: 20 })}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 规则列表 */}
|
||||
<div className="space-y-2 max-h-64 overflow-y-auto">
|
||||
{filteredRules.length === 0 ? (
|
||||
<div className="text-center py-6">
|
||||
<Tag className="h-8 w-8 text-muted-foreground/40 mx-auto mb-2" />
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{debouncedSearchQuery
|
||||
? t('testDataGenerator_noSearchResults')
|
||||
: t('testDataGenerator_noRules')}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
filteredRules.map((rule) => (
|
||||
<div
|
||||
key={rule.id}
|
||||
className="flex items-center gap-3 p-2 rounded-lg border hover:bg-muted/30 transition-colors"
|
||||
>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium text-sm text-foreground truncate">{rule.name}</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{rule.fields.length} {t('testDataGenerator_fields')}
|
||||
</span>
|
||||
</div>
|
||||
{rule.description && (
|
||||
<p className="text-xs text-muted-foreground truncate mt-0.5">
|
||||
{rule.description}
|
||||
</p>
|
||||
)}
|
||||
<div className="flex items-center gap-3 mt-1 text-xs text-muted-foreground">
|
||||
<span className="flex items-center gap-1">
|
||||
<Clock className="h-3 w-3" />
|
||||
{formatDate(rule.updatedAt)}
|
||||
</span>
|
||||
<span>{t('testDataGenerator_usedTimes', { count: rule.useCount })}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7"
|
||||
onClick={() => handleLoad(rule)}
|
||||
title={t('testDataGenerator_load')}
|
||||
>
|
||||
<FolderOpen className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7"
|
||||
onClick={() => handleEdit(rule)}
|
||||
title={t('testDataGenerator_edit')}
|
||||
>
|
||||
<Edit className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7"
|
||||
onClick={() => handleDuplicate(rule.id)}
|
||||
title={t('testDataGenerator_duplicate')}
|
||||
>
|
||||
<Copy className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7 text-destructive hover:text-destructive"
|
||||
onClick={() => setRuleToDelete(rule)}
|
||||
title={t('testDataGenerator_delete')}
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,189 @@
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
|
||||
// Mock dependencies
|
||||
vi.mock('@/utils/ruleStorage', () => ({
|
||||
getAll: vi.fn(() => []),
|
||||
save: vi.fn(),
|
||||
deleteRule: vi.fn(),
|
||||
duplicate: vi.fn(),
|
||||
recordUse: vi.fn(),
|
||||
search: vi.fn(() => []),
|
||||
exportRules: vi.fn(() => '[]'),
|
||||
importRules: vi.fn(() => ({ success: 0, failed: 0, errors: [] })),
|
||||
}));
|
||||
|
||||
vi.mock('sonner', () => ({
|
||||
toast: {
|
||||
success: vi.fn(),
|
||||
error: vi.fn(),
|
||||
},
|
||||
}));
|
||||
|
||||
import RuleManager from '../RuleManager';
|
||||
import * as ruleStorage from '@/utils/ruleStorage';
|
||||
import { toast } from 'sonner';
|
||||
import type { DataRule, FieldConfig } from '@/types/testDataGenerator';
|
||||
|
||||
const mockedRuleStorage = vi.mocked(ruleStorage);
|
||||
const mockedToast = vi.mocked(toast);
|
||||
|
||||
const mockFields: FieldConfig[] = [
|
||||
{
|
||||
id: 'field-1',
|
||||
name: 'name',
|
||||
generatorId: 'string',
|
||||
params: {},
|
||||
required: true,
|
||||
nullRate: 0,
|
||||
unique: false,
|
||||
},
|
||||
];
|
||||
|
||||
const mockRule: DataRule = {
|
||||
id: 'rule-1',
|
||||
name: 'Test Rule',
|
||||
description: 'Test description',
|
||||
fields: mockFields,
|
||||
createdAt: Date.now(),
|
||||
updatedAt: Date.now(),
|
||||
useCount: 0,
|
||||
};
|
||||
|
||||
describe('RuleManager', () => {
|
||||
const defaultProps = {
|
||||
onLoad: vi.fn(),
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
mockedRuleStorage.getAll.mockReturnValue([]);
|
||||
});
|
||||
|
||||
it('should render empty state when no rules', () => {
|
||||
render(<RuleManager {...defaultProps} />);
|
||||
|
||||
expect(screen.getByText('暂无保存的规则')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render rule list when rules exist', () => {
|
||||
mockedRuleStorage.getAll.mockReturnValue([mockRule]);
|
||||
|
||||
render(<RuleManager {...defaultProps} />);
|
||||
|
||||
expect(screen.getByText('Test Rule')).toBeInTheDocument();
|
||||
expect(screen.getByText('Test description')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should load rule when load button clicked', async () => {
|
||||
const user = userEvent.setup();
|
||||
mockedRuleStorage.getAll.mockReturnValue([mockRule]);
|
||||
|
||||
render(<RuleManager {...defaultProps} />);
|
||||
|
||||
const loadButton = screen.getByTitle('加载');
|
||||
await user.click(loadButton);
|
||||
|
||||
expect(defaultProps.onLoad).toHaveBeenCalledWith(mockFields);
|
||||
expect(mockedRuleStorage.recordUse).toHaveBeenCalledWith('rule-1');
|
||||
// Note: t() mock doesn't handle placeholders, so we just check it was called
|
||||
expect(mockedToast.success).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should show delete confirmation dialog', async () => {
|
||||
const user = userEvent.setup();
|
||||
mockedRuleStorage.getAll.mockReturnValue([mockRule]);
|
||||
|
||||
render(<RuleManager {...defaultProps} />);
|
||||
|
||||
const deleteButton = screen.getByTitle('删除');
|
||||
await user.click(deleteButton);
|
||||
|
||||
expect(screen.getByText(/确定要删除规则/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should delete rule after confirmation', async () => {
|
||||
const user = userEvent.setup();
|
||||
mockedRuleStorage.getAll.mockReturnValue([mockRule]);
|
||||
|
||||
render(<RuleManager {...defaultProps} />);
|
||||
|
||||
// Open delete dialog
|
||||
await user.click(screen.getByTitle('删除'));
|
||||
|
||||
// Confirm delete
|
||||
await user.click(screen.getByText('确认'));
|
||||
|
||||
expect(mockedRuleStorage.deleteRule).toHaveBeenCalledWith('rule-1');
|
||||
expect(mockedToast.success).toHaveBeenCalledWith('规则已删除');
|
||||
});
|
||||
|
||||
it('should duplicate rule when duplicate button clicked', async () => {
|
||||
const user = userEvent.setup();
|
||||
mockedRuleStorage.getAll.mockReturnValue([mockRule]);
|
||||
mockedRuleStorage.duplicate.mockReturnValue({
|
||||
...mockRule,
|
||||
id: 'rule-2',
|
||||
name: 'Test Rule（副本）',
|
||||
});
|
||||
|
||||
render(<RuleManager {...defaultProps} />);
|
||||
|
||||
await user.click(screen.getByTitle('复制'));
|
||||
|
||||
expect(mockedRuleStorage.duplicate).toHaveBeenCalledWith('rule-1', '（副本）');
|
||||
expect(mockedToast.success).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should update search input value', async () => {
|
||||
const rules = [mockRule, { ...mockRule, id: 'rule-2', name: 'Another Rule' }];
|
||||
mockedRuleStorage.getAll.mockReturnValue(rules);
|
||||
|
||||
render(<RuleManager {...defaultProps} />);
|
||||
|
||||
// Initially both rules should be visible
|
||||
expect(screen.getByText('Test Rule')).toBeInTheDocument();
|
||||
expect(screen.getByText('Another Rule')).toBeInTheDocument();
|
||||
|
||||
// Verify search input exists and is interactive
|
||||
const searchInput = screen.getByPlaceholderText('搜索规则...');
|
||||
expect(searchInput).toBeInTheDocument();
|
||||
expect(searchInput).toHaveValue('');
|
||||
});
|
||||
|
||||
it('should call exportRules when export button clicked', async () => {
|
||||
const user = userEvent.setup();
|
||||
mockedRuleStorage.getAll.mockReturnValue([mockRule]);
|
||||
|
||||
render(<RuleManager {...defaultProps} />);
|
||||
|
||||
// Mock URL methods and body methods after render to avoid interfering with createRoot
|
||||
const mockCreateObjectURL = vi.fn(() => 'blob:mock');
|
||||
const mockRevokeObjectURL = vi.fn();
|
||||
vi.spyOn(URL, 'createObjectURL').mockImplementation(mockCreateObjectURL);
|
||||
vi.spyOn(URL, 'revokeObjectURL').mockImplementation(mockRevokeObjectURL);
|
||||
vi.spyOn(document.body, 'appendChild').mockImplementation(() => null as unknown as Node);
|
||||
vi.spyOn(document.body, 'removeChild').mockImplementation(() => null as unknown as Node);
|
||||
|
||||
const buttons = screen.getAllByRole('button');
|
||||
const exportButton = buttons.find((btn) => btn.textContent?.includes('导出'));
|
||||
expect(exportButton).toBeDefined();
|
||||
|
||||
await user.click(exportButton!);
|
||||
|
||||
expect(mockedRuleStorage.exportRules).toHaveBeenCalled();
|
||||
expect(mockCreateObjectURL).toHaveBeenCalled();
|
||||
|
||||
vi.restoreAllMocks();
|
||||
});
|
||||
|
||||
it('should show field count for each rule', () => {
|
||||
mockedRuleStorage.getAll.mockReturnValue([mockRule]);
|
||||
|
||||
render(<RuleManager {...defaultProps} />);
|
||||
|
||||
// The component shows "{count} 字段" format
|
||||
expect(screen.getByText(/字段/)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,148 @@
|
||||
/**
|
||||
* 数据生成器 Hook
|
||||
* 管理 Web Worker 的创建、销毁和通信
|
||||
*/
|
||||
|
||||
import { useState, useRef, useCallback, useEffect } from 'react';
|
||||
import type {
|
||||
FieldConfig,
|
||||
GenerateResult,
|
||||
GenerateProgress,
|
||||
WorkerMessage,
|
||||
} from '@/types/testDataGenerator';
|
||||
|
||||
export interface UseGeneratorReturn {
|
||||
/** 是否正在生成 */
|
||||
isGenerating: boolean;
|
||||
/** 生成进度 */
|
||||
progress: GenerateProgress | null;
|
||||
/** 生成结果 */
|
||||
result: GenerateResult | null;
|
||||
/** 错误信息 */
|
||||
error: string | null;
|
||||
/** 开始生成 */
|
||||
generate: (fields: FieldConfig[], count: number, csvMode?: boolean) => void;
|
||||
/** 取消生成 */
|
||||
cancel: () => void;
|
||||
/** 清除结果 */
|
||||
clearResult: () => void;
|
||||
}
|
||||
|
||||
export function useGenerator(): UseGeneratorReturn {
|
||||
const [isGenerating, setIsGenerating] = useState(false);
|
||||
const [progress, setProgress] = useState<GenerateProgress | null>(null);
|
||||
const [result, setResult] = useState<GenerateResult | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const workerRef = useRef<Worker | null>(null);
|
||||
|
||||
// 清理 Worker
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (workerRef.current) {
|
||||
workerRef.current.terminate();
|
||||
workerRef.current = null;
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* 创建或复用 Worker
|
||||
*/
|
||||
const getWorker = useCallback((): Worker => {
|
||||
if (workerRef.current) {
|
||||
return workerRef.current;
|
||||
}
|
||||
|
||||
const worker = new Worker(new URL('@/workers/generator.worker.ts', import.meta.url), {
|
||||
type: 'module',
|
||||
});
|
||||
|
||||
worker.onmessage = (e: MessageEvent<WorkerMessage>) => {
|
||||
const data = e.data;
|
||||
const { type } = data;
|
||||
|
||||
switch (type) {
|
||||
case 'progress':
|
||||
setProgress(data.payload as GenerateProgress);
|
||||
break;
|
||||
case 'complete':
|
||||
setIsGenerating(false);
|
||||
setResult(data.payload as GenerateResult);
|
||||
setProgress(null);
|
||||
break;
|
||||
case 'error':
|
||||
setIsGenerating(false);
|
||||
setError((data.payload as { error: string }).error);
|
||||
setProgress(null);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
worker.onerror = (err) => {
|
||||
console.error('[useGenerator] Worker 错误:', err);
|
||||
setIsGenerating(false);
|
||||
setError(err.message || 'Worker 运行错误');
|
||||
setProgress(null);
|
||||
// Worker 出错后销毁，下次重新创建
|
||||
workerRef.current?.terminate();
|
||||
workerRef.current = null;
|
||||
};
|
||||
|
||||
workerRef.current = worker;
|
||||
return worker;
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* 开始生成
|
||||
*/
|
||||
const generate = useCallback(
|
||||
(fields: FieldConfig[], count: number, csvMode = false) => {
|
||||
if (isGenerating) return;
|
||||
|
||||
setIsGenerating(true);
|
||||
setProgress(null);
|
||||
setResult(null);
|
||||
setError(null);
|
||||
|
||||
const worker = getWorker();
|
||||
const message: WorkerMessage = {
|
||||
type: 'start',
|
||||
payload: { fields, count, csvMode },
|
||||
};
|
||||
worker.postMessage(message);
|
||||
},
|
||||
[isGenerating, getWorker],
|
||||
);
|
||||
|
||||
/**
|
||||
* 取消生成
|
||||
*/
|
||||
const cancel = useCallback(() => {
|
||||
if (workerRef.current && isGenerating) {
|
||||
const message: WorkerMessage = { type: 'cancel' };
|
||||
workerRef.current.postMessage(message);
|
||||
setIsGenerating(false);
|
||||
setProgress(null);
|
||||
}
|
||||
}, [isGenerating]);
|
||||
|
||||
/**
|
||||
* 清除结果
|
||||
*/
|
||||
const clearResult = useCallback(() => {
|
||||
setResult(null);
|
||||
setProgress(null);
|
||||
setError(null);
|
||||
}, []);
|
||||
|
||||
return {
|
||||
isGenerating,
|
||||
progress,
|
||||
result,
|
||||
error,
|
||||
generate,
|
||||
cancel,
|
||||
clearResult,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,306 @@
|
||||
/**
|
||||
* 测试数据生成器主页面
|
||||
*/
|
||||
|
||||
import { useState, useCallback, useRef, useEffect } from 'react';
|
||||
import { Settings, Database, Tag } from 'lucide-react';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { useGenerator } from './hooks/useGenerator';
|
||||
import type { FieldConfig, GenerateResult, DataRule } from '@/types/testDataGenerator';
|
||||
import { Dialog, DialogContent } from '@/components/ui/dialog';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
// 生成唯一 ID 的辅助函数
|
||||
function generateId(): string {
|
||||
return `field_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
|
||||
}
|
||||
|
||||
import FieldList, { MAX_FIELDS } from './components/FieldList';
|
||||
import FieldEditor from './components/FieldEditor';
|
||||
import GenerateOptions from './components/GenerateOptions';
|
||||
import GenerateButton from './components/GenerateButton';
|
||||
import DataPreview from './components/DataPreview';
|
||||
import ResultPanel from './components/ResultPanel';
|
||||
import ExportPanel from './components/ExportPanel';
|
||||
import RuleManager from './components/RuleManager';
|
||||
|
||||
type TabType = 'fields' | 'rules';
|
||||
|
||||
export default function TestDataGeneratorPage() {
|
||||
const { t } = useI18n('testDataGenerator');
|
||||
const { isGenerating, progress, result, error, generate, cancel, clearResult } = useGenerator();
|
||||
|
||||
// 字段配置
|
||||
const [fields, setFields] = useState<FieldConfig[]>([]);
|
||||
const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
|
||||
const [isEditorOpen, setIsEditorOpen] = useState(false);
|
||||
const [editingRule, setEditingRule] = useState<DataRule | null>(null);
|
||||
|
||||
// 生成选项
|
||||
const [count, setCount] = useState(100);
|
||||
const [format, setFormat] = useState<'json' | 'csv'>('json');
|
||||
|
||||
// 当前标签页
|
||||
const [activeTab, setActiveTab] = useState<TabType>('fields');
|
||||
|
||||
// 生成完成时显示 toast 提示（避免重复触发）
|
||||
const lastToastResultRef = useRef<GenerateResult | null>(null);
|
||||
|
||||
// 生成完成时显示 toast 提示（避免重复触发）
|
||||
useEffect(() => {
|
||||
if (result?.success && result.stats && result !== lastToastResultRef.current) {
|
||||
lastToastResultRef.current = result;
|
||||
toast.success(t('testDataGenerator_generateSuccess'), {
|
||||
description: `${result.stats.total} ${t('testDataGenerator_records')}`,
|
||||
});
|
||||
}
|
||||
}, [result, t]);
|
||||
|
||||
// 添加新字段
|
||||
const handleAddField = useCallback(() => {
|
||||
setFields((prev) => {
|
||||
if (prev.length >= MAX_FIELDS) return prev;
|
||||
const newField: FieldConfig = {
|
||||
id: generateId(),
|
||||
name: `field${prev.length + 1}`,
|
||||
generatorId: 'chineseName',
|
||||
params: {},
|
||||
required: true,
|
||||
nullRate: 0,
|
||||
unique: false,
|
||||
};
|
||||
setSelectedIndex(prev.length);
|
||||
return [...prev, newField];
|
||||
});
|
||||
}, []);
|
||||
|
||||
// 更新字段
|
||||
const handleUpdateField = useCallback((index: number, field: FieldConfig) => {
|
||||
setFields((prev) => {
|
||||
const newFields = [...prev];
|
||||
newFields[index] = field;
|
||||
return newFields;
|
||||
});
|
||||
}, []);
|
||||
|
||||
// 删除字段
|
||||
const handleRemoveField = useCallback((index: number) => {
|
||||
setFields((prev) => prev.filter((_, i) => i !== index));
|
||||
setSelectedIndex((prev) => {
|
||||
if (prev === index) return null;
|
||||
if (prev !== null && prev > index) return prev - 1;
|
||||
return prev;
|
||||
});
|
||||
}, []);
|
||||
|
||||
// 拖拽排序
|
||||
const handleReorder = useCallback((oldIndex: number, newIndex: number) => {
|
||||
setFields((prev) => {
|
||||
const newFields = [...prev];
|
||||
const [moved] = newFields.splice(oldIndex, 1);
|
||||
newFields.splice(newIndex, 0, moved);
|
||||
return newFields;
|
||||
});
|
||||
setSelectedIndex((prev) => {
|
||||
if (prev === oldIndex) return newIndex;
|
||||
if (prev !== null) {
|
||||
if (oldIndex < prev && newIndex >= prev) return prev - 1;
|
||||
if (oldIndex > prev && newIndex <= prev) return prev + 1;
|
||||
}
|
||||
return prev;
|
||||
});
|
||||
}, []);
|
||||
|
||||
// 加载规则
|
||||
const handleLoadRule = useCallback(
|
||||
(loadedFields: FieldConfig[]) => {
|
||||
setFields(loadedFields);
|
||||
setSelectedIndex(null);
|
||||
setEditingRule(null);
|
||||
clearResult();
|
||||
},
|
||||
[clearResult],
|
||||
);
|
||||
|
||||
// 编辑规则
|
||||
const handleEditRule = useCallback(
|
||||
(rule: DataRule) => {
|
||||
setFields(rule.fields);
|
||||
setSelectedIndex(null);
|
||||
setEditingRule(rule);
|
||||
setActiveTab('fields');
|
||||
clearResult();
|
||||
toast.success(t('testDataGenerator_editingRule', { name: rule.name }));
|
||||
},
|
||||
[clearResult, t],
|
||||
);
|
||||
|
||||
// 保存规则成功后清除编辑状态
|
||||
const handleRuleSaved = useCallback(() => {
|
||||
setEditingRule(null);
|
||||
}, []);
|
||||
|
||||
// 开始生成
|
||||
const handleGenerate = useCallback(() => {
|
||||
if (fields.length === 0) return;
|
||||
generate(fields, count, format === 'csv');
|
||||
}, [fields, count, format, generate]);
|
||||
|
||||
// 获取选中的字段（-1 或 null 表示未选中）
|
||||
const selectedField = selectedIndex !== null && selectedIndex >= 0 ? fields[selectedIndex] : null;
|
||||
|
||||
// 打开字段编辑器
|
||||
const handleOpenEditor = useCallback((index: number) => {
|
||||
setSelectedIndex(index);
|
||||
setIsEditorOpen(true);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background text-foreground antialiased selection:bg-primary/20">
|
||||
<div className="max-w-7xl mx-auto p-4 sm:p-6">
|
||||
{/* 主要内容区域 - 左右分栏 */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-5 gap-4 items-start">
|
||||
{/* 左侧面板 - 字段配置 */}
|
||||
<div className="lg:col-span-3 space-y-4">
|
||||
{/* 标签页切换 */}
|
||||
<div className="flex gap-1 p-1 bg-muted rounded-lg">
|
||||
<button
|
||||
onClick={() => setActiveTab('fields')}
|
||||
className={cn(
|
||||
'flex-1 flex items-center justify-center gap-2 py-2 px-3 text-sm font-medium rounded-md transition-colors',
|
||||
activeTab === 'fields'
|
||||
? 'bg-background text-foreground shadow-sm'
|
||||
: 'text-muted-foreground hover:text-foreground',
|
||||
)}
|
||||
>
|
||||
<Settings className="h-4 w-4" />
|
||||
{t('testDataGenerator_fieldConfig')}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('rules')}
|
||||
className={cn(
|
||||
'flex-1 flex items-center justify-center gap-2 py-2 px-3 text-sm font-medium rounded-md transition-colors',
|
||||
activeTab === 'rules'
|
||||
? 'bg-background text-foreground shadow-sm'
|
||||
: 'text-muted-foreground hover:text-foreground',
|
||||
)}
|
||||
>
|
||||
<Tag className="h-4 w-4" />
|
||||
{t('testDataGenerator_ruleManagement')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 字段配置标签页 */}
|
||||
{activeTab === 'fields' && (
|
||||
<div className="p-4 rounded-xl border border-border bg-card shadow-sm">
|
||||
<FieldList
|
||||
fields={fields}
|
||||
onUpdate={handleUpdateField}
|
||||
onRemove={handleRemoveField}
|
||||
onAdd={handleAddField}
|
||||
onEdit={handleOpenEditor}
|
||||
onReorder={handleReorder}
|
||||
editingRule={editingRule}
|
||||
onRuleSaved={handleRuleSaved}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 规则管理标签页 */}
|
||||
{activeTab === 'rules' && (
|
||||
<div className="p-4 rounded-xl border border-border bg-card shadow-sm">
|
||||
<RuleManager onLoad={handleLoadRule} onEdit={handleEditRule} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 生成选项 */}
|
||||
<div className="p-4 rounded-xl border border-border bg-card shadow-sm">
|
||||
<GenerateOptions
|
||||
count={count}
|
||||
onCountChange={setCount}
|
||||
format={format}
|
||||
onFormatChange={setFormat}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 生成按钮 */}
|
||||
<div className="p-4 rounded-xl border border-border bg-card shadow-sm">
|
||||
<GenerateButton
|
||||
onClick={handleGenerate}
|
||||
onCancel={cancel}
|
||||
isGenerating={isGenerating}
|
||||
progress={progress}
|
||||
disabled={fields.length === 0}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 右侧面板 - 数据预览和结果 */}
|
||||
<div className="lg:col-span-2 space-y-4">
|
||||
{/* 结果状态 */}
|
||||
{/* 仅在失败或有警告时显示结果面板 */}
|
||||
{((result && !result.success) ||
|
||||
(result?.warnings && result.warnings.length > 0) ||
|
||||
error) && (
|
||||
<div className="p-4 rounded-xl border border-border bg-card shadow-sm">
|
||||
{error ? (
|
||||
<div className="flex items-center gap-2 text-destructive">
|
||||
<span className="text-sm">{error}</span>
|
||||
</div>
|
||||
) : (
|
||||
<ResultPanel result={result} />
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 数据预览 */}
|
||||
<div className="p-4 rounded-xl border border-border bg-card shadow-sm">
|
||||
<h3 className="text-sm font-medium text-foreground mb-3 flex items-center gap-2">
|
||||
<Database className="h-4 w-4" />
|
||||
{t('testDataGenerator_dataPreview')}
|
||||
</h3>
|
||||
<div className="h-[280px]">
|
||||
<DataPreview fields={fields} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 导出面板 */}
|
||||
{result?.data && result.data.length > 0 && (
|
||||
<div className="p-4 rounded-xl border border-border bg-card shadow-sm">
|
||||
<ExportPanel result={result} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 字段编辑弹窗 */}
|
||||
<Dialog open={isEditorOpen} onOpenChange={setIsEditorOpen}>
|
||||
<DialogContent
|
||||
showCloseButton={false}
|
||||
className="w-[calc(100vw-2rem)] max-w-[520px] max-h-[calc(100vh-2rem)] p-0 pt-6 flex flex-col"
|
||||
>
|
||||
<div className="flex-1 overflow-y-auto px-6 pb-4">
|
||||
{selectedField && selectedIndex !== null && (
|
||||
<FieldEditor
|
||||
field={selectedField}
|
||||
onChange={(updatedField) => handleUpdateField(selectedIndex, updatedField)}
|
||||
allFieldNames={fields.map((f) => f.name)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex justify-end gap-2 px-6 py-2 border-t shrink-0">
|
||||
<Button variant="ghost" size="sm" onClick={() => setIsEditorOpen(false)}>
|
||||
{t('testDataGenerator_cancel')}
|
||||
</Button>
|
||||
<Button size="sm" onClick={() => setIsEditorOpen(false)}>
|
||||
{t('testDataGenerator_done')}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Clock } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import CopyButton from '@/components/CopyButton';
|
||||
import { CopyButton } from '@/components/CopyButton';
|
||||
import type { UnitType } from './constants';
|
||||
import { msToUnit } from './constants';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import CopyButton from '@/components/CopyButton';
|
||||
import { CopyButton } from '@/components/CopyButton';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import React from 'react';
|
||||
import { ThemeModeProvider } from './ThemeModeProvider';
|
||||
import { RouterProvider } from './RouterProvider';
|
||||
import { Toaster } from '@/components/ui/sonner';
|
||||
|
||||
interface AppRootProps {
|
||||
children: React.ReactNode;
|
||||
@@ -11,6 +12,7 @@ export default function AppRoot({ children }: AppRootProps) {
|
||||
<React.StrictMode>
|
||||
<ThemeModeProvider>
|
||||
<RouterProvider>{children}</RouterProvider>
|
||||
<Toaster />
|
||||
</ThemeModeProvider>
|
||||
</React.StrictMode>
|
||||
);
|
||||
|
||||
Vendored
+2
-1
@@ -10,7 +10,8 @@ export type PageType =
|
||||
| 'jwt' // JWT 解析工具
|
||||
| 'jsonDiff' // JSON 差异比较工具
|
||||
| 'base64Converter' // Base64 转换器工具
|
||||
| 'rightClickRestorer'; // 右键菜单恢复工具
|
||||
| 'rightClickRestorer' // 右键菜单恢复工具
|
||||
| 'testDataGenerator'; // 测试数据生成器工具
|
||||
|
||||
/**
|
||||
* JSON 工具页面子模式类型定义
|
||||
|
||||
@@ -0,0 +1,178 @@
|
||||
/**
|
||||
* 测试数据生成器类型定义
|
||||
*/
|
||||
|
||||
/**
|
||||
* 字段配置
|
||||
*/
|
||||
export interface FieldConfig {
|
||||
/** 字段唯一 ID */
|
||||
id: string;
|
||||
/** 字段名称 */
|
||||
name: string;
|
||||
/** 字段描述（可选） */
|
||||
description?: string;
|
||||
/** 使用的生成器 ID */
|
||||
generatorId: string;
|
||||
/** 生成器参数 */
|
||||
params: Record<string, unknown>;
|
||||
/** 是否必填 */
|
||||
required: boolean;
|
||||
/** 空值率（0-100），仅在 required=false 时生效 */
|
||||
nullRate: number;
|
||||
/** 是否唯一约束 */
|
||||
unique: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* 数据规则
|
||||
*/
|
||||
export interface DataRule {
|
||||
/** 规则唯一 ID */
|
||||
id: string;
|
||||
/** 规则名称 */
|
||||
name: string;
|
||||
/** 规则描述 */
|
||||
description?: string;
|
||||
/** 字段配置列表 */
|
||||
fields: FieldConfig[];
|
||||
/** 创建时间 */
|
||||
createdAt: number;
|
||||
/** 更新时间 */
|
||||
updatedAt: number;
|
||||
/** 最后使用时间 */
|
||||
lastUsedAt?: number;
|
||||
/** 使用次数 */
|
||||
useCount: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成器参数定义
|
||||
*/
|
||||
export interface GeneratorParam {
|
||||
/** 参数键名 */
|
||||
key: string;
|
||||
/** 参数显示名称 */
|
||||
label: string;
|
||||
/** 参数类型 */
|
||||
type: 'string' | 'number' | 'boolean' | 'select' | 'array';
|
||||
/** 默认值 */
|
||||
defaultValue: unknown;
|
||||
/** 是否必填 */
|
||||
required?: boolean;
|
||||
/** 参数描述 */
|
||||
description?: string;
|
||||
/** 仅当 type=select 时，可选值列表 */
|
||||
options?: { label: string; value: unknown }[];
|
||||
/** 最小值（仅当 type=number 时） */
|
||||
min?: number;
|
||||
/** 最大值（仅当 type=number 时） */
|
||||
max?: number;
|
||||
/** 占位符文本（仅当 type=string 时） */
|
||||
placeholder?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成器定义
|
||||
*/
|
||||
export interface GeneratorDefinition {
|
||||
/** 生成器唯一 ID */
|
||||
id: string;
|
||||
/** 生成器显示名称 */
|
||||
name: string;
|
||||
/** 生成器描述 */
|
||||
description: string;
|
||||
/** 分类 ID */
|
||||
categoryId: string;
|
||||
/** 参数定义列表 */
|
||||
params: GeneratorParam[];
|
||||
/** 生成函数 */
|
||||
generate: (params: Record<string, unknown>) => string;
|
||||
/** 在指定索引生成（用于保证唯一性时的确定性生成） */
|
||||
generateAtIndex?: (params: Record<string, unknown>, index: number) => string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成器分类
|
||||
*/
|
||||
export interface GeneratorCategory {
|
||||
/** 分类 ID */
|
||||
id: string;
|
||||
/** 分类名称 */
|
||||
name: string;
|
||||
/** 分类图标 */
|
||||
icon: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 数据生成结果
|
||||
*/
|
||||
export interface GenerateResult {
|
||||
/** 是否成功 */
|
||||
success: boolean;
|
||||
/** 生成的数据（JSON 格式） */
|
||||
data?: Record<string, unknown>[];
|
||||
/** 错误信息 */
|
||||
error?: string;
|
||||
/** 警告信息（如某些字段生成失败） */
|
||||
warnings?: string[];
|
||||
/** 生成统计 */
|
||||
stats?: {
|
||||
/** 总条数 */
|
||||
total: number;
|
||||
/** 成功条数 */
|
||||
success: number;
|
||||
/** 失败条数 */
|
||||
failed: number;
|
||||
/** 生成耗时（毫秒） */
|
||||
duration: number;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 导出文件配置
|
||||
*/
|
||||
export interface ExportFile {
|
||||
/** 文件名（不含扩展名） */
|
||||
filename: string;
|
||||
/** 文件内容 */
|
||||
content: string;
|
||||
/** MIME 类型 */
|
||||
mimeType: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成进度信息
|
||||
*/
|
||||
export interface GenerateProgress {
|
||||
/** 当前进度（0-100） */
|
||||
progress: number;
|
||||
/** 已生成条数 */
|
||||
generated: number;
|
||||
/** 总条数 */
|
||||
total: number;
|
||||
/** 预计剩余时间（毫秒） */
|
||||
estimatedTimeLeft?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Worker 消息类型
|
||||
*/
|
||||
export type WorkerMessage =
|
||||
| { type: 'start'; payload: WorkerStartPayload }
|
||||
| { type: 'progress'; payload: GenerateProgress }
|
||||
| { type: 'complete'; payload: GenerateResult }
|
||||
| { type: 'error'; payload: { error: string } }
|
||||
| { type: 'cancel' };
|
||||
|
||||
/**
|
||||
* Worker 启动参数
|
||||
*/
|
||||
export interface WorkerStartPayload {
|
||||
/** 字段配置列表 */
|
||||
fields: FieldConfig[];
|
||||
/** 生成数量 */
|
||||
count: number;
|
||||
/** 是否生成 CSV 格式 */
|
||||
csvMode: boolean;
|
||||
}
|
||||
@@ -1,101 +1,7 @@
|
||||
import { describe, expect, it, vi } from 'vitest';
|
||||
import {
|
||||
getActiveTab,
|
||||
getActiveTabDomain,
|
||||
openExtensionPage,
|
||||
ensureContentScriptInjected,
|
||||
} from '@/utils/chromeTabs';
|
||||
import { openExtensionPage } from '@/utils/chromeTabs';
|
||||
|
||||
describe('chromeTabs', () => {
|
||||
describe('getActiveTab', () => {
|
||||
it('应该返回当前活动标签页', async () => {
|
||||
const mockTab = { id: 1, url: 'https://example.com', title: 'Example' } as chrome.tabs.Tab;
|
||||
(chrome.tabs.query as any).mockResolvedValue([mockTab]);
|
||||
|
||||
const result = await getActiveTab();
|
||||
|
||||
expect(result).toEqual(mockTab);
|
||||
expect(chrome.tabs.query).toHaveBeenCalledWith({ active: true, currentWindow: true });
|
||||
});
|
||||
|
||||
it('当没有活动标签页时应返回 null', async () => {
|
||||
(chrome.tabs.query as any).mockResolvedValue([]);
|
||||
|
||||
const result = await getActiveTab();
|
||||
|
||||
expect(result).toBeNull();
|
||||
});
|
||||
|
||||
it('当查询失败时应返回 null 并记录错误', async () => {
|
||||
const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
|
||||
(chrome.tabs.query as any).mockRejectedValue(new Error('Permission denied'));
|
||||
|
||||
const result = await getActiveTab();
|
||||
|
||||
expect(result).toBeNull();
|
||||
expect(consoleSpy).toHaveBeenCalledWith('获取活动标签页失败:', expect.any(Error));
|
||||
consoleSpy.mockRestore();
|
||||
});
|
||||
});
|
||||
|
||||
describe('getActiveTabDomain', () => {
|
||||
it('应该返回当前活动标签页的域名', async () => {
|
||||
const mockTab = { id: 1, url: 'https://example.com/path?query=1' } as chrome.tabs.Tab;
|
||||
(chrome.tabs.query as any).mockResolvedValue([mockTab]);
|
||||
|
||||
const result = await getActiveTabDomain();
|
||||
|
||||
expect(result).toBe('example.com');
|
||||
});
|
||||
|
||||
it('应该处理带有端口的 URL', async () => {
|
||||
const mockTab = { id: 1, url: 'https://example.com:8080/path' } as chrome.tabs.Tab;
|
||||
(chrome.tabs.query as any).mockResolvedValue([mockTab]);
|
||||
|
||||
const result = await getActiveTabDomain();
|
||||
|
||||
expect(result).toBe('example.com');
|
||||
});
|
||||
|
||||
it('当标签页没有 URL 时应返回空字符串', async () => {
|
||||
const mockTab = { id: 1 } as chrome.tabs.Tab;
|
||||
(chrome.tabs.query as any).mockResolvedValue([mockTab]);
|
||||
|
||||
const result = await getActiveTabDomain();
|
||||
|
||||
expect(result).toBe('');
|
||||
});
|
||||
|
||||
it('当没有活动标签页时应返回空字符串', async () => {
|
||||
(chrome.tabs.query as any).mockResolvedValue([]);
|
||||
|
||||
const result = await getActiveTabDomain();
|
||||
|
||||
expect(result).toBe('');
|
||||
});
|
||||
|
||||
it('当 URL 解析失败时应返回空字符串并记录错误', async () => {
|
||||
const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
|
||||
const mockTab = { id: 1, url: 'not-a-valid-url' } as chrome.tabs.Tab;
|
||||
(chrome.tabs.query as any).mockResolvedValue([mockTab]);
|
||||
|
||||
const result = await getActiveTabDomain();
|
||||
|
||||
expect(result).toBe('');
|
||||
expect(consoleSpy).toHaveBeenCalledWith('解析域名失败:', expect.any(Error));
|
||||
consoleSpy.mockRestore();
|
||||
});
|
||||
|
||||
it('应该处理 chrome-extension URL', async () => {
|
||||
const mockTab = { id: 1, url: 'chrome-extension://abc123/popup.html' } as chrome.tabs.Tab;
|
||||
(chrome.tabs.query as any).mockResolvedValue([mockTab]);
|
||||
|
||||
const result = await getActiveTabDomain();
|
||||
|
||||
expect(result).toBe('abc123');
|
||||
});
|
||||
});
|
||||
|
||||
describe('openExtensionPage', () => {
|
||||
it('应该在新标签页中打开扩展页面', async () => {
|
||||
await openExtensionPage('popup.html');
|
||||
@@ -116,44 +22,4 @@ describe('chromeTabs', () => {
|
||||
consoleSpy.mockRestore();
|
||||
});
|
||||
});
|
||||
|
||||
describe('ensureContentScriptInjected', () => {
|
||||
it('当存在活动标签页时应返回 true', async () => {
|
||||
const mockTab = { id: 123, url: 'https://example.com' } as chrome.tabs.Tab;
|
||||
(chrome.tabs.query as any).mockResolvedValue([mockTab]);
|
||||
|
||||
const result = await ensureContentScriptInjected();
|
||||
|
||||
expect(result).toBe(true);
|
||||
});
|
||||
|
||||
it('当没有活动标签页时应返回 false', async () => {
|
||||
(chrome.tabs.query as any).mockResolvedValue([]);
|
||||
|
||||
const result = await ensureContentScriptInjected();
|
||||
|
||||
expect(result).toBe(false);
|
||||
});
|
||||
|
||||
it('当标签页没有 id 时应返回 false', async () => {
|
||||
const mockTab = { url: 'https://example.com' } as chrome.tabs.Tab;
|
||||
(chrome.tabs.query as any).mockResolvedValue([mockTab]);
|
||||
|
||||
const result = await ensureContentScriptInjected();
|
||||
|
||||
expect(result).toBe(false);
|
||||
});
|
||||
|
||||
it('当整体操作失败时应返回 false 并记录错误', async () => {
|
||||
const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
|
||||
(chrome.tabs.query as any).mockRejectedValue(new Error('Query failed'));
|
||||
|
||||
const result = await ensureContentScriptInjected();
|
||||
|
||||
expect(result).toBe(false);
|
||||
// getActiveTab catches the error and logs "获取活动标签页失败"
|
||||
expect(consoleSpy).toHaveBeenCalledWith('获取活动标签页失败:', expect.any(Error));
|
||||
consoleSpy.mockRestore();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,14 +1,5 @@
|
||||
import { describe, expect, it, vi, beforeAll } from 'vitest';
|
||||
import { copyTextToClipboard, copyImageToClipboard } from '@/utils/clipboard';
|
||||
|
||||
// Mock ClipboardItem for test environment
|
||||
class MockClipboardItem {
|
||||
constructor(public items: Record<string, Blob>) {}
|
||||
}
|
||||
|
||||
beforeAll(() => {
|
||||
(globalThis as any).ClipboardItem = MockClipboardItem;
|
||||
});
|
||||
import { describe, expect, it, vi } from 'vitest';
|
||||
import { copyTextToClipboard } from '@/utils/clipboard';
|
||||
|
||||
describe('clipboard', () => {
|
||||
describe('copyTextToClipboard', () => {
|
||||
@@ -31,27 +22,4 @@ describe('clipboard', () => {
|
||||
expect(result).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('copyImageToClipboard', () => {
|
||||
it('复制成功时应返回 true', async () => {
|
||||
const write = vi.fn().mockResolvedValue(undefined);
|
||||
Object.assign(navigator, { clipboard: { write } });
|
||||
|
||||
const blob = new Blob(['png data'], { type: 'image/png' });
|
||||
const result = await copyImageToClipboard(blob);
|
||||
|
||||
expect(result).toBe(true);
|
||||
expect(write).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('复制失败时应返回 false', async () => {
|
||||
const write = vi.fn().mockRejectedValue(new Error('Permission denied'));
|
||||
Object.assign(navigator, { clipboard: { write } });
|
||||
|
||||
const blob = new Blob(['png data'], { type: 'image/png' });
|
||||
const result = await copyImageToClipboard(blob);
|
||||
|
||||
expect(result).toBe(false);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,10 +1,6 @@
|
||||
import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest';
|
||||
import { renderHook, act } from '@testing-library/react';
|
||||
import {
|
||||
useContextMenuData,
|
||||
saveContextMenuData,
|
||||
clearContextMenuData,
|
||||
} from '@/utils/useContextMenuData';
|
||||
import { useContextMenuData, saveContextMenuData } from '@/utils/useContextMenuData';
|
||||
|
||||
describe('useContextMenuData', () => {
|
||||
beforeEach(() => {
|
||||
@@ -48,14 +44,6 @@ describe('useContextMenuData', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('clearContextMenuData', () => {
|
||||
it('应该从 storage 中删除数据', async () => {
|
||||
await clearContextMenuData();
|
||||
|
||||
expect(chrome.storage.local.remove).toHaveBeenCalledWith(['contextMenu/pendingData']);
|
||||
});
|
||||
});
|
||||
|
||||
describe('useContextMenuData Hook', () => {
|
||||
it('当 storage 中有匹配数据时应调用 onData 回调', async () => {
|
||||
const mockData = {
|
||||
|
||||
@@ -8,7 +8,7 @@ import { formatBytes } from './format';
|
||||
export const MAX_FILE_SIZE = 10 * 1024 * 1024;
|
||||
|
||||
/** 支持的图像 MIME 类型 */
|
||||
export const SUPPORTED_IMAGE_TYPES = [
|
||||
const SUPPORTED_IMAGE_TYPES = [
|
||||
'image/png',
|
||||
'image/jpeg',
|
||||
'image/jpg',
|
||||
@@ -20,7 +20,7 @@ export const SUPPORTED_IMAGE_TYPES = [
|
||||
] as const;
|
||||
|
||||
/** 支持的图像文件扩展名 */
|
||||
export const SUPPORTED_IMAGE_EXTENSIONS = [
|
||||
const SUPPORTED_IMAGE_EXTENSIONS = [
|
||||
'.png',
|
||||
'.jpg',
|
||||
'.jpeg',
|
||||
@@ -34,7 +34,7 @@ export const SUPPORTED_IMAGE_EXTENSIONS = [
|
||||
/**
|
||||
* 文本转 Base64 编码结果
|
||||
*/
|
||||
export interface TextToBase64Result {
|
||||
interface TextToBase64Result {
|
||||
/** Base64 编码结果 */
|
||||
output: string;
|
||||
/** 原始字节数 */
|
||||
@@ -226,7 +226,7 @@ export function formatFileSize(bytes: number): string {
|
||||
/**
|
||||
* Base64 解码为二进制后的产物
|
||||
*/
|
||||
export interface Base64ToBlobResult {
|
||||
interface Base64ToBlobResult {
|
||||
/** 解码后的 Blob */
|
||||
blob: Blob;
|
||||
/** 推断出的 MIME 类型 */
|
||||
|
||||
+2
-14
@@ -26,12 +26,8 @@ export function useI18n(namespace?: string | string[]) {
|
||||
const namespaces = Array.isArray(namespace) ? namespace : namespace ? [namespace] : [];
|
||||
|
||||
const t = (key: string, options?: Record<string, unknown>): string => {
|
||||
let msgId = key;
|
||||
|
||||
// 处理 namespace:key 格式（兼容原 i18next 用法）
|
||||
if (key.includes(':')) {
|
||||
msgId = key.replace(':', '_').replace(/\./g, '_');
|
||||
}
|
||||
// 统一将分隔符转换为下划线，兼容 'namespace:key.path' 和 'key.path' 两种写法
|
||||
const msgId = key.replace(':', '_').replace(/\./g, '_');
|
||||
|
||||
// 先尝试直接查找 key
|
||||
let message = getMessage(msgId);
|
||||
@@ -70,11 +66,3 @@ export function useI18n(namespace?: string | string[]) {
|
||||
isLoaded: true,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 预加载命名空间（无操作，兼容 useLazyTranslation）
|
||||
*/
|
||||
export async function preloadNamespaces(_namespaces: string[]): Promise<void> {
|
||||
// chrome.i18n 是同步的，无需预加载
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
@@ -2,35 +2,6 @@
|
||||
* Chrome 标签页相关工具函数
|
||||
*/
|
||||
|
||||
/**
|
||||
* 获取当前活动的标签页
|
||||
*/
|
||||
export async function getActiveTab(): Promise<chrome.tabs.Tab | null> {
|
||||
try {
|
||||
const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
|
||||
return tab || null;
|
||||
} catch (error) {
|
||||
console.error('获取活动标签页失败:', error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取当前活动的标签页域名
|
||||
*/
|
||||
export async function getActiveTabDomain(): Promise<string> {
|
||||
const tab = await getActiveTab();
|
||||
if (tab?.url) {
|
||||
try {
|
||||
const url = new URL(tab.url);
|
||||
return url.hostname;
|
||||
} catch (e) {
|
||||
console.error('解析域名失败:', e);
|
||||
}
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
/**
|
||||
* 在新标签页中打开扩展页面
|
||||
* @param page - 扩展页面路径（如 'popup.html'）
|
||||
@@ -50,28 +21,3 @@ export async function openExtensionPage(
|
||||
console.error('打开扩展页面失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 确保内容脚本已注入
|
||||
*/
|
||||
export async function ensureContentScriptInjected(): Promise<boolean> {
|
||||
try {
|
||||
const tab = await getActiveTab();
|
||||
if (!tab?.id) return false;
|
||||
|
||||
try {
|
||||
return true;
|
||||
} catch (e) {
|
||||
console.log('内容脚本未注入，尝试注入...');
|
||||
console.error('注入内容脚本失败:', e);
|
||||
await chrome.scripting.executeScript({
|
||||
target: { tabId: tab.id },
|
||||
files: ['/content-scripts/content.js'],
|
||||
});
|
||||
return true;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('注入内容脚本失败:', error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,21 +11,3 @@ export async function copyTextToClipboard(text: string): Promise<boolean> {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 复制图片到剪贴板
|
||||
* @param blob 要复制的图片
|
||||
* @returns Promise<boolean> 是否复制成功
|
||||
*/
|
||||
export async function copyImageToClipboard(blob: Blob): Promise<boolean> {
|
||||
try {
|
||||
await navigator.clipboard.write([
|
||||
new ClipboardItem({
|
||||
'image/png': blob,
|
||||
}),
|
||||
]);
|
||||
return true;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
import type { PageType } from '@/types/storage';
|
||||
|
||||
export interface ContextMenuItemConfig {
|
||||
interface ContextMenuItemConfig {
|
||||
id: string;
|
||||
title: string;
|
||||
contexts: [`${chrome.contextMenus.ContextType}`, ...`${chrome.contextMenus.ContextType}`[]];
|
||||
parentId?: string;
|
||||
}
|
||||
|
||||
export interface ContextMenuClickedInfo {
|
||||
interface ContextMenuClickedInfo {
|
||||
featureKey: PageType;
|
||||
payload: string;
|
||||
}
|
||||
|
||||
export interface ParseResult {
|
||||
interface ParseResult {
|
||||
success: boolean;
|
||||
data?: ContextMenuClickedInfo;
|
||||
error?: string;
|
||||
@@ -103,8 +103,8 @@ export function parseContextMenuClick(
|
||||
): ParseResult {
|
||||
const featureKey = getMenuPageType(menuItemId);
|
||||
|
||||
// 处理图片 URL（右键点击图片时）
|
||||
if (info.srcUrl) {
|
||||
// 处理图片 URL（仅 qrCode-image 菜单项，右键点击图片时）
|
||||
if (menuItemId === 'qrCode-image' && info.srcUrl) {
|
||||
return {
|
||||
success: true,
|
||||
data: { featureKey, payload: info.srcUrl },
|
||||
|
||||
@@ -0,0 +1,133 @@
|
||||
/**
|
||||
* 数据导出工具
|
||||
* 实现 JSON 和 CSV 格式的数据导出
|
||||
*/
|
||||
|
||||
import type { ExportFile } from '@/types/testDataGenerator';
|
||||
|
||||
/**
|
||||
* 数据导出器
|
||||
*/
|
||||
export class DataExporter {
|
||||
/**
|
||||
* 将数据转换为 JSON 字符串
|
||||
*/
|
||||
static toJSON(data: Record<string, unknown>[], pretty = true): string {
|
||||
return JSON.stringify(data, null, pretty ? 2 : undefined);
|
||||
}
|
||||
|
||||
/**
|
||||
* 将数据转换为 CSV 字符串
|
||||
*/
|
||||
static toCSV(data: Record<string, unknown>[]): string {
|
||||
if (data.length === 0) return '';
|
||||
|
||||
// 获取所有列名
|
||||
const headers = Array.from(new Set(data.flatMap((row) => Object.keys(row))));
|
||||
|
||||
// 构建 CSV 内容
|
||||
const rows = [
|
||||
headers.map((h) => this.escapeCSV(h)).join(','),
|
||||
...data.map((row) => headers.map((h) => this.escapeCSV(String(row[h] ?? ''))).join(',')),
|
||||
];
|
||||
|
||||
return rows.join('\n');
|
||||
}
|
||||
|
||||
/**
|
||||
* 转义 CSV 字段
|
||||
*/
|
||||
private static escapeCSV(value: string): string {
|
||||
// 如果包含逗号、引号、换行符，需要用引号包裹
|
||||
if (value.includes(',') || value.includes('"') || value.includes('\n')) {
|
||||
return `"${value.replace(/"/g, '""')}"`;
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据格式导出数据
|
||||
*/
|
||||
static exportByFormat(data: Record<string, unknown>[], format: 'json' | 'csv'): string {
|
||||
if (format === 'csv') {
|
||||
return this.toCSV(data);
|
||||
}
|
||||
return this.toJSON(data);
|
||||
}
|
||||
|
||||
/**
|
||||
* 导出为多个文件
|
||||
*/
|
||||
static toMultipleFiles(
|
||||
data: Record<string, unknown>[],
|
||||
formats: ('json' | 'csv')[],
|
||||
filename = 'test-data',
|
||||
): ExportFile[] {
|
||||
return formats.map((format) => ({
|
||||
filename,
|
||||
content: this.exportByFormat(data, format),
|
||||
mimeType: this.getMimeType(format),
|
||||
}));
|
||||
}
|
||||
|
||||
/**
|
||||
* 导出为单个文件
|
||||
*/
|
||||
static toSingleFile(
|
||||
data: Record<string, unknown>[],
|
||||
format: 'json' | 'csv',
|
||||
filename = 'test-data',
|
||||
): ExportFile {
|
||||
return {
|
||||
filename,
|
||||
content: this.exportByFormat(data, format),
|
||||
mimeType: this.getMimeType(format),
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取 MIME 类型
|
||||
*/
|
||||
private static getMimeType(format: string): string {
|
||||
const mimeTypes: Record<string, string> = {
|
||||
json: 'application/json',
|
||||
csv: 'text/csv',
|
||||
};
|
||||
return mimeTypes[format] || 'application/octet-stream';
|
||||
}
|
||||
|
||||
/**
|
||||
* 下载文件
|
||||
*/
|
||||
static download(file: ExportFile): void {
|
||||
const blob = new Blob([file.content], { type: file.mimeType });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = `${file.filename}.${file.mimeType === 'application/json' ? 'json' : 'csv'}`;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
/**
|
||||
* 下载多个文件
|
||||
*/
|
||||
static downloadMultiple(files: ExportFile[]): void {
|
||||
files.forEach((file) => this.download(file));
|
||||
}
|
||||
|
||||
/**
|
||||
* 复制到剪贴板
|
||||
*/
|
||||
static async copyToClipboard(content: string): Promise<boolean> {
|
||||
try {
|
||||
await navigator.clipboard.writeText(content);
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.error('[DataExporter] 复制失败:', error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -71,7 +71,7 @@ export function formatJson(text: string, options: JsonFormatOptions): JsonFormat
|
||||
/**
|
||||
* JSON 压缩结果
|
||||
*/
|
||||
export interface JsonMinifyResult {
|
||||
interface JsonMinifyResult {
|
||||
/** 压缩后的 JSON 字符串 */
|
||||
minified: string;
|
||||
/** 原始输入的字节大小 */
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
/**
|
||||
* JSON 转 TOML 转换结果
|
||||
*/
|
||||
export interface JsonToTomlResult {
|
||||
interface JsonToTomlResult {
|
||||
/** 转换后的 TOML 字符串 */
|
||||
output: string;
|
||||
/** 原始输入的字节大小 */
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
/**
|
||||
* JSON 转 YAML 转换结果
|
||||
*/
|
||||
export interface JsonToYamlResult {
|
||||
interface JsonToYamlResult {
|
||||
/** 转换后的 YAML 字符串 */
|
||||
output: string;
|
||||
/** 原始输入的字节大小 */
|
||||
|
||||
+2
-2
@@ -4,13 +4,13 @@
|
||||
|
||||
import { getMessage } from '@/utils/chromeI18n';
|
||||
|
||||
export interface JwtHeader {
|
||||
interface JwtHeader {
|
||||
alg: string;
|
||||
typ?: string;
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
export interface JwtPayload {
|
||||
interface JwtPayload {
|
||||
iss?: string;
|
||||
sub?: string;
|
||||
aud?: string | string[];
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import QrScanner from 'qr-scanner';
|
||||
|
||||
export interface QrCodeParseResult {
|
||||
interface QrCodeParseResult {
|
||||
success: boolean;
|
||||
data?: string;
|
||||
error?: string;
|
||||
|
||||
@@ -0,0 +1,339 @@
|
||||
/**
|
||||
* 规则存储工具
|
||||
* 实现测试数据生成器规则的持久化存储和管理
|
||||
*/
|
||||
|
||||
import type { DataRule, FieldConfig } from '@/types/testDataGenerator';
|
||||
|
||||
/** 存储键名 */
|
||||
const STORAGE_KEY = 'testDataGenerator_rules';
|
||||
|
||||
/** 最大规则数量 */
|
||||
const MAX_RULES = 20;
|
||||
|
||||
/**
|
||||
* 获取所有规则
|
||||
*/
|
||||
export function getAll(): DataRule[] {
|
||||
try {
|
||||
const data = localStorage.getItem(STORAGE_KEY);
|
||||
if (!data) return [];
|
||||
return JSON.parse(data) as DataRule[];
|
||||
} catch (error) {
|
||||
console.error('[ruleStorage] 获取规则列表失败:', error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据 ID 获取规则
|
||||
*/
|
||||
export function getById(id: string): DataRule | undefined {
|
||||
const rules = getAll();
|
||||
return rules.find((rule) => rule.id === id);
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据名称获取规则
|
||||
*/
|
||||
export function getByName(name: string): DataRule | undefined {
|
||||
const rules = getAll();
|
||||
return rules.find((rule) => rule.name === name);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取规则数量
|
||||
*/
|
||||
export function getCount(): number {
|
||||
return getAll().length;
|
||||
}
|
||||
|
||||
/**
|
||||
* 是否达到最大数量限制
|
||||
*/
|
||||
export function isMaxReached(): boolean {
|
||||
return getCount() >= MAX_RULES;
|
||||
}
|
||||
|
||||
/**
|
||||
* 保存规则（新增或更新）
|
||||
*/
|
||||
export function save(
|
||||
rule: Omit<DataRule, 'id' | 'createdAt' | 'updatedAt' | 'useCount'> & { id?: string },
|
||||
): DataRule | null {
|
||||
const rules = getAll();
|
||||
const now = Date.now();
|
||||
|
||||
// 新增规则
|
||||
if (!rule.id) {
|
||||
if (isMaxReached()) {
|
||||
console.warn('[ruleStorage] 规则数量已达上限');
|
||||
return null;
|
||||
}
|
||||
const newRule: DataRule = {
|
||||
...rule,
|
||||
id: generateId(),
|
||||
createdAt: now,
|
||||
updatedAt: now,
|
||||
useCount: 0,
|
||||
};
|
||||
rules.unshift(newRule);
|
||||
setAll(rules);
|
||||
return newRule;
|
||||
}
|
||||
|
||||
// 更新规则
|
||||
const index = rules.findIndex((r) => r.id === rule.id);
|
||||
if (index === -1) {
|
||||
console.warn('[ruleStorage] 规则不存在:', rule.id);
|
||||
return null;
|
||||
}
|
||||
const updatedRule: DataRule = {
|
||||
...rules[index],
|
||||
...rule,
|
||||
id: rule.id,
|
||||
updatedAt: now,
|
||||
};
|
||||
rules[index] = updatedRule;
|
||||
setAll(rules);
|
||||
return updatedRule;
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新规则
|
||||
*/
|
||||
export function update(id: string, updates: Partial<DataRule>): DataRule | null {
|
||||
const rules = getAll();
|
||||
const index = rules.findIndex((r) => r.id === id);
|
||||
if (index === -1) {
|
||||
console.warn('[ruleStorage] 规则不存在:', id);
|
||||
return null;
|
||||
}
|
||||
|
||||
const updatedRule: DataRule = {
|
||||
...rules[index],
|
||||
...updates,
|
||||
id: rules[index].id, // 确保 ID 不被覆盖
|
||||
updatedAt: Date.now(),
|
||||
};
|
||||
rules[index] = updatedRule;
|
||||
setAll(rules);
|
||||
return updatedRule;
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除规则
|
||||
*/
|
||||
export function deleteRule(id: string): boolean {
|
||||
const rules = getAll();
|
||||
const index = rules.findIndex((r) => r.id === id);
|
||||
if (index === -1) {
|
||||
console.warn('[ruleStorage] 规则不存在:', id);
|
||||
return false;
|
||||
}
|
||||
rules.splice(index, 1);
|
||||
setAll(rules);
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* 复制规则
|
||||
* @param id 规则 ID
|
||||
* @param copySuffix 复制后缀，默认为中文「（副本）」，可通过 i18n 传入
|
||||
*/
|
||||
export function duplicate(id: string, copySuffix = '（副本）'): DataRule | null {
|
||||
const rule = getById(id);
|
||||
if (!rule) {
|
||||
console.warn('[ruleStorage] 规则不存在:', id);
|
||||
return null;
|
||||
}
|
||||
|
||||
if (isMaxReached()) {
|
||||
console.warn('[ruleStorage] 规则数量已达上限');
|
||||
return null;
|
||||
}
|
||||
|
||||
const now = Date.now();
|
||||
const newRule: DataRule = {
|
||||
...rule,
|
||||
id: generateId(),
|
||||
name: `${rule.name}${copySuffix}`,
|
||||
createdAt: now,
|
||||
updatedAt: now,
|
||||
useCount: 0,
|
||||
};
|
||||
|
||||
const rules = getAll();
|
||||
rules.unshift(newRule);
|
||||
setAll(rules);
|
||||
return newRule;
|
||||
}
|
||||
|
||||
/**
|
||||
* 记录规则使用
|
||||
*/
|
||||
export function recordUse(id: string): void {
|
||||
const rules = getAll();
|
||||
const index = rules.findIndex((r) => r.id === id);
|
||||
if (index === -1) return;
|
||||
|
||||
rules[index].useCount += 1;
|
||||
rules[index].lastUsedAt = Date.now();
|
||||
setAll(rules);
|
||||
}
|
||||
|
||||
/**
|
||||
* 搜索规则
|
||||
*/
|
||||
export function search(query: string): DataRule[] {
|
||||
const rules = getAll();
|
||||
const lowerQuery = query.toLowerCase();
|
||||
return rules.filter(
|
||||
(rule) =>
|
||||
rule.name.toLowerCase().includes(lowerQuery) ||
|
||||
rule.description?.toLowerCase().includes(lowerQuery),
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取最近使用的规则
|
||||
*/
|
||||
export function getRecent(count = 5): DataRule[] {
|
||||
const rules = getAll();
|
||||
return [...rules]
|
||||
.filter((rule) => rule.lastUsedAt)
|
||||
.sort((a, b) => (b.lastUsedAt || 0) - (a.lastUsedAt || 0))
|
||||
.slice(0, count);
|
||||
}
|
||||
|
||||
/**
|
||||
* 导出规则（JSON 字符串）
|
||||
*/
|
||||
export function exportRules(ids?: string[]): string {
|
||||
const rules = getAll();
|
||||
const exportData = ids ? rules.filter((r) => ids.includes(r.id)) : rules;
|
||||
return JSON.stringify(exportData, null, 2);
|
||||
}
|
||||
|
||||
/**
|
||||
* 导入规则
|
||||
*/
|
||||
export function importRules(jsonString: string): {
|
||||
success: number;
|
||||
failed: number;
|
||||
errors: string[];
|
||||
} {
|
||||
const result = { success: 0, failed: 0, errors: [] as string[] };
|
||||
|
||||
try {
|
||||
const data = JSON.parse(jsonString);
|
||||
if (!Array.isArray(data)) {
|
||||
result.failed = 1;
|
||||
result.errors.push('导入数据格式错误：不是数组');
|
||||
return result;
|
||||
}
|
||||
|
||||
for (const item of data) {
|
||||
const validation = validateRule(item);
|
||||
if (!validation.valid) {
|
||||
result.failed++;
|
||||
result.errors.push(`规则 "${item.name || '未知'}": ${validation.error}`);
|
||||
continue;
|
||||
}
|
||||
|
||||
const saved = save(item as Omit<DataRule, 'id' | 'createdAt' | 'updatedAt' | 'useCount'>);
|
||||
if (saved) {
|
||||
result.success++;
|
||||
} else {
|
||||
result.failed++;
|
||||
result.errors.push(`规则 "${item.name}" 保存失败`);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
result.failed = 1;
|
||||
result.errors.push(`导入失败: ${error}`);
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* 清空所有规则
|
||||
*/
|
||||
export function clear(): void {
|
||||
localStorage.removeItem(STORAGE_KEY);
|
||||
}
|
||||
|
||||
/**
|
||||
* 保存所有规则到存储
|
||||
*/
|
||||
function setAll(rules: DataRule[]): void {
|
||||
try {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(rules));
|
||||
} catch (error) {
|
||||
console.error('[ruleStorage] 保存规则失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成唯一 ID
|
||||
*/
|
||||
export function generateId(): string {
|
||||
return `rule_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 验证规则格式
|
||||
*/
|
||||
function validateRule(rule: unknown): { valid: boolean; error?: string } {
|
||||
if (!rule || typeof rule !== 'object') {
|
||||
return { valid: false, error: '规则格式无效' };
|
||||
}
|
||||
|
||||
const obj = rule as Record<string, unknown>;
|
||||
|
||||
if (!obj.name || typeof obj.name !== 'string') {
|
||||
return { valid: false, error: '缺少规则名称' };
|
||||
}
|
||||
|
||||
if (!obj.fields || !Array.isArray(obj.fields)) {
|
||||
return { valid: false, error: '缺少字段配置' };
|
||||
}
|
||||
|
||||
for (const field of obj.fields) {
|
||||
const fieldValidation = validateField(field);
|
||||
if (!fieldValidation.valid) {
|
||||
return {
|
||||
valid: false,
|
||||
error: `字段 "${(field as FieldConfig).name || '未知'}": ${fieldValidation.error}`,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return { valid: true };
|
||||
}
|
||||
|
||||
/**
|
||||
* 验证字段配置
|
||||
*/
|
||||
function validateField(field: unknown): { valid: boolean; error?: string } {
|
||||
if (!field || typeof field !== 'object') {
|
||||
return { valid: false, error: '字段格式无效' };
|
||||
}
|
||||
|
||||
const obj = field as Record<string, unknown>;
|
||||
|
||||
if (!obj.name || typeof obj.name !== 'string') {
|
||||
return { valid: false, error: '缺少字段名称' };
|
||||
}
|
||||
|
||||
if (!obj.generatorId || typeof obj.generatorId !== 'string') {
|
||||
return { valid: false, error: '缺少生成器 ID' };
|
||||
}
|
||||
|
||||
if (typeof obj.required !== 'boolean') {
|
||||
return { valid: false, error: '缺少必填标识' };
|
||||
}
|
||||
|
||||
return { valid: true };
|
||||
}
|
||||
@@ -224,7 +224,7 @@ async function runCleanScript(
|
||||
return { success: false, error: 'No result returned' };
|
||||
}
|
||||
|
||||
export async function injectClearLocalStorage(tabId: number): Promise<StorageCleanResult> {
|
||||
async function injectClearLocalStorage(tabId: number): Promise<StorageCleanResult> {
|
||||
return runCleanScript(
|
||||
tabId,
|
||||
() => {
|
||||
@@ -236,7 +236,7 @@ export async function injectClearLocalStorage(tabId: number): Promise<StorageCle
|
||||
);
|
||||
}
|
||||
|
||||
export async function injectClearSessionStorage(tabId: number): Promise<StorageCleanResult> {
|
||||
async function injectClearSessionStorage(tabId: number): Promise<StorageCleanResult> {
|
||||
return runCleanScript(
|
||||
tabId,
|
||||
() => {
|
||||
@@ -248,7 +248,7 @@ export async function injectClearSessionStorage(tabId: number): Promise<StorageC
|
||||
);
|
||||
}
|
||||
|
||||
export async function injectClearIndexedDB(tabId: number): Promise<StorageCleanResult> {
|
||||
async function injectClearIndexedDB(tabId: number): Promise<StorageCleanResult> {
|
||||
return runCleanScript(
|
||||
tabId,
|
||||
async () => {
|
||||
@@ -292,7 +292,7 @@ export async function injectClearIndexedDB(tabId: number): Promise<StorageCleanR
|
||||
);
|
||||
}
|
||||
|
||||
export async function injectClearCacheStorage(tabId: number): Promise<StorageCleanResult> {
|
||||
async function injectClearCacheStorage(tabId: number): Promise<StorageCleanResult> {
|
||||
return runCleanScript(
|
||||
tabId,
|
||||
async () => {
|
||||
@@ -309,7 +309,7 @@ export async function injectClearCacheStorage(tabId: number): Promise<StorageCle
|
||||
);
|
||||
}
|
||||
|
||||
export async function injectUnregisterServiceWorkers(tabId: number): Promise<StorageCleanResult> {
|
||||
async function injectUnregisterServiceWorkers(tabId: number): Promise<StorageCleanResult> {
|
||||
return runCleanScript(
|
||||
tabId,
|
||||
async () => {
|
||||
@@ -381,10 +381,3 @@ export function formatCleaningResult(
|
||||
|
||||
return t('storageCleaner:cleanedSummary', { items: parts.join(', ') });
|
||||
}
|
||||
|
||||
export function isEmptyResult(result: CleaningResult): boolean {
|
||||
const values = Object.values(result).filter(
|
||||
(r): r is StorageCleanResult => r?.success === true && r.count > 0,
|
||||
);
|
||||
return values.length === 0;
|
||||
}
|
||||
|
||||
@@ -90,10 +90,3 @@ export async function saveContextMenuData(
|
||||
};
|
||||
await storageUtil.set(STORAGE_KEY, pendingData);
|
||||
}
|
||||
|
||||
/**
|
||||
* 清除右键菜单待处理数据
|
||||
*/
|
||||
export async function clearContextMenuData(): Promise<void> {
|
||||
await storageUtil.remove(STORAGE_KEY);
|
||||
}
|
||||
|
||||
@@ -1,24 +0,0 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
/**
|
||||
* useDebounce Hook - 防抖值
|
||||
*
|
||||
* @param value - 需要防抖的值
|
||||
* @param delay - 延迟时间（毫秒）
|
||||
* @returns 防抖后的值
|
||||
*/
|
||||
export function useDebounce<T>(value: T, delay: number): T {
|
||||
const [debouncedValue, setDebouncedValue] = useState<T>(value);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
setDebouncedValue(value);
|
||||
}, delay);
|
||||
|
||||
return () => {
|
||||
clearTimeout(timer);
|
||||
};
|
||||
}, [value, delay]);
|
||||
|
||||
return debouncedValue;
|
||||
}
|
||||
@@ -0,0 +1,165 @@
|
||||
/**
|
||||
* 测试数据生成器 Web Worker
|
||||
* 在后台线程中执行数据生成，避免阻塞 UI
|
||||
*/
|
||||
|
||||
import { getGeneratorById } from '@/lib/generators';
|
||||
import type {
|
||||
FieldConfig,
|
||||
WorkerMessage,
|
||||
GenerateResult,
|
||||
GenerateProgress,
|
||||
} from '@/types/testDataGenerator';
|
||||
|
||||
// 生成结果缓存
|
||||
let generatedData: Record<string, unknown>[] = [];
|
||||
let isCancelled = false;
|
||||
|
||||
/**
|
||||
* Worker 消息处理器
|
||||
*/
|
||||
self.onmessage = async (e: MessageEvent<WorkerMessage>) => {
|
||||
const data = e.data;
|
||||
const { type } = data;
|
||||
|
||||
switch (type) {
|
||||
case 'start':
|
||||
isCancelled = false;
|
||||
await handleStart(data.payload);
|
||||
break;
|
||||
case 'cancel':
|
||||
isCancelled = true;
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 处理开始生成消息
|
||||
*/
|
||||
async function handleStart(payload: {
|
||||
fields: FieldConfig[];
|
||||
count: number;
|
||||
csvMode: boolean;
|
||||
}): Promise<void> {
|
||||
const { fields, count } = payload;
|
||||
generatedData = [];
|
||||
|
||||
try {
|
||||
// 验证所有生成器是否存在
|
||||
for (const field of fields) {
|
||||
const generator = getGeneratorById(field.generatorId);
|
||||
if (!generator) {
|
||||
self.postMessage({
|
||||
type: 'error',
|
||||
payload: { error: `生成器 "${field.generatorId}" 不存在` },
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const startTime = Date.now();
|
||||
const warnings: string[] = [];
|
||||
|
||||
// 生成数据
|
||||
for (let i = 0; i < count; i++) {
|
||||
if (isCancelled) {
|
||||
self.postMessage({
|
||||
type: 'complete',
|
||||
payload: {
|
||||
success: false,
|
||||
error: '生成已取消',
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const record: Record<string, unknown> = {};
|
||||
|
||||
for (const field of fields) {
|
||||
const generator = getGeneratorById(field.generatorId);
|
||||
if (!generator) continue;
|
||||
|
||||
// 空值率控制
|
||||
if (!field.required && Math.random() * 100 < field.nullRate) {
|
||||
record[field.name] = null;
|
||||
continue;
|
||||
}
|
||||
|
||||
try {
|
||||
// 唯一性约束处理
|
||||
if (field.unique) {
|
||||
let value: string | undefined;
|
||||
const maxRetries = 100;
|
||||
let retryCount = 0;
|
||||
|
||||
// 小数据量：随机生成 + 重试
|
||||
if (count <= 1000) {
|
||||
while (retryCount < maxRetries) {
|
||||
value = generator.generate(field.params);
|
||||
const isUnique = !generatedData.some((item) => item[field.name] === value);
|
||||
if (isUnique) break;
|
||||
retryCount++;
|
||||
value = undefined;
|
||||
}
|
||||
} else {
|
||||
// 大数据量：使用索引生成策略
|
||||
if (generator.generateAtIndex) {
|
||||
value = generator.generateAtIndex(field.params, i);
|
||||
} else {
|
||||
// 回退到随机生成
|
||||
value = generator.generate(field.params);
|
||||
}
|
||||
}
|
||||
|
||||
if (value !== undefined) {
|
||||
record[field.name] = value;
|
||||
} else {
|
||||
warnings.push(`字段 "${field.name}" 第 ${i + 1} 行唯一值生成失败`);
|
||||
record[field.name] = generator.generate(field.params);
|
||||
}
|
||||
} else {
|
||||
record[field.name] = generator.generate(field.params);
|
||||
}
|
||||
} catch (error) {
|
||||
warnings.push(`字段 "${field.name}" 第 ${i + 1} 行生成错误: ${error}`);
|
||||
record[field.name] = null;
|
||||
}
|
||||
}
|
||||
|
||||
generatedData.push(record);
|
||||
|
||||
// 进度回调（每1000条）
|
||||
if ((i + 1) % 1000 === 0 || i === count - 1) {
|
||||
const progress: GenerateProgress = {
|
||||
progress: Math.round(((i + 1) / count) * 100),
|
||||
generated: i + 1,
|
||||
total: count,
|
||||
estimatedTimeLeft: Math.round(((Date.now() - startTime) / (i + 1)) * (count - i - 1)),
|
||||
};
|
||||
self.postMessage({ type: 'progress', payload: progress });
|
||||
}
|
||||
}
|
||||
|
||||
const duration = Date.now() - startTime;
|
||||
const successCount = generatedData.filter((item) => Object.keys(item).length > 0).length;
|
||||
|
||||
const result: GenerateResult = {
|
||||
success: true,
|
||||
data: generatedData,
|
||||
warnings: warnings.length > 0 ? warnings : undefined,
|
||||
stats: {
|
||||
total: count,
|
||||
success: successCount,
|
||||
failed: count - successCount,
|
||||
duration,
|
||||
},
|
||||
};
|
||||
|
||||
self.postMessage({ type: 'complete', payload: result });
|
||||
} catch (error) {
|
||||
self.postMessage({
|
||||
type: 'error',
|
||||
payload: { error: `生成失败: ${error}` },
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -58,8 +58,20 @@ export default defineConfig({
|
||||
'contextMenus',
|
||||
],
|
||||
host_permissions: ['<all_urls>'],
|
||||
icons: {
|
||||
'16': 'icon/16.png',
|
||||
'32': 'icon/32.png',
|
||||
'48': 'icon/48.png',
|
||||
'96': 'icon/96.png',
|
||||
'128': 'icon/128.png',
|
||||
},
|
||||
action: {
|
||||
default_title: '__MSG_appName__',
|
||||
default_icon: {
|
||||
'16': 'icon/16.png',
|
||||
'32': 'icon/32.png',
|
||||
'48': 'icon/48.png',
|
||||
},
|
||||
},
|
||||
side_panel: {
|
||||
default_path: 'entrypoints/sidepanel/index.html',
|
||||
|
||||
Reference in New Issue
Block a user