Compare commits

..

35 Commits

Author SHA1 Message Date
雨霖铃 9a0c8ba850 fix: 更新 features 测试断言以匹配新增的 testDataGenerator
fix: 修复测试数据生成器多项代码问题
- useCallback 闭包问题:改用函数式 setFields 更新,避免依赖过时引用
- Worker 复用:复用已有 Worker 而非每次 generate 都销毁重建
- 导出复制反馈:复制操作完成后添加 toast 成功/失败提示
- 字段名校验:添加空值、非法字符、重复名称校验
- i18n 硬编码:GeneratorConfig 和 ruleStorage 统一使用 t() 函数
2026-06-06 23:40:36 +08:00
雨霖铃 6c7b7294b4 feat: 优化规则管理功能
- 移动保存按钮到字段配置区域
- 添加规则编辑功能,支持更新和另存为
- 编辑模式下显示编辑状态标识
- 保存时检查规则名称重复,支持覆盖保存
- 优化弹窗样式,统一风格
- 更换加载图标为 FolderOpen
- 添加搜索防抖和错误处理
- 添加国际化文本
2026-06-06 23:08:05 +08:00
雨霖铃 a2e07a9115 refactor: 删除未使用的 defaultNullRate 功能
- 移除 GenerateOptions 中的 defaultNullRate 相关 props 和 UI
- 移除 messages.json 中的 testDataGenerator_defaultNullRate 翻译 key
2026-06-06 20:08:06 +08:00
雨霖铃 2464a5fea6 feat: 字段编辑弹窗添加「完成」按钮 去除关闭按钮,添加取消按钮
- 弹窗底部添加「完成」按钮,点击关闭弹窗
- DialogContent 支持 showCloseButton prop 控制关闭按钮显示
- 底部添加取消和完成两个按钮
2026-06-06 20:06:48 +08:00
雨霖铃 78f5292b00 fix: 切换为非必填时默认空值率 100%
- 必填 → 非必填:默认空值率 100%(始终生成 null)
- 非必填 → 必填:空值率清零
2026-06-06 19:42:55 +08:00
雨霖铃 5a2589cc57 fix: 修复空值率与必填状态的逻辑
- 空值率 0% 时自动设为必填(始终生成数据)
- 空值率 > 0% 时设为非必填(按概率生成 null)
- 移除空值率 100% 自动变为必填的错误逻辑
2026-06-06 19:41:42 +08:00
雨霖铃 64db60d75e fix: 非必填字段预览显示 null
- 预览示例数据中,非必填字段显示 null 值
- 保持与实际生成逻辑一致
2026-06-06 19:36:41 +08:00
雨霖铃 7090ba3251 refactor: 数据预览改为显示示例数据,简化组件逻辑
- DataPreview 改为接收字段配置,显示一条示例数据
- 移除虚拟列表、格式切换等复杂功能
- 添加 JSON 语法高亮(键名蓝色、字符串绿色、数字琥珀色、布尔紫色)
- 优化空状态样式,垂直居中显示
- 缩短预览区域高度 (400px → 280px)
- 添加 testDataGenerator_sampleData 翻译 key
2026-06-06 19:29:27 +08:00
雨霖铃 31b6edf06b feat: 生成成功改为 toast 提示
- 使用 sonner toast 显示成功提示
- 简化提示:生成完成 + 数据条数
- 仅在失败或有警告时显示结果面板
- 使用 useRef 记录已触发的 result
- 仅在新 result 时触发 toast
2026-06-06 11:05:42 +08:00
雨霖铃 a374bf456d feat: 数据格式改为按钮组选择
- 移除 Select 下拉框
- 改为 JSON/CSV 按钮组
- 选中状态与生成数量按钮样式统一

feat: 优化空值率设置

- 增加 75% 预设选项
- 设置 100% 时自动设为必填
- 限制输入范围 0-100

fix: 空值率预设改为纯数字显示

- 5%/20%/50%/75% 统一样式

fix: 移除空值率低/中/高 i18n 翻译键

fix: 精简生成数量预设选项

- 移除 10、500
- 保留 50、100、1000、5000、10000
2026-06-06 10:52:56 +08:00
雨霖铃 ea10b27c14 feat: 简化字段卡片交互 - 点击直接打开编辑弹窗
- 移除字段卡片选中样式
- 点击字段直接打开编辑弹窗
- 简化 FieldItem 组件,移除 isSelected 属性
- 简化 FieldList 接口,onSelect 改为 onEdit

fix: 优化字段编辑弹窗

- 去除弹窗描述文字
- 字段名称增加字符计数 (x/20)
- 字段描述增加字符计数 (x/50)
- 保持 placeholder 提示

fix: 修复弹窗顶部间距问题

- DialogContent 添加 pt-6 避开关闭按钮
- 内容区域移除顶部 padding,改为 pb-6

fix: 增加弹窗顶部间距 (pt-6 → pt-8)

fix: 优化弹窗尺寸和按钮间距

- 弹窗最大宽度 360→420px 适配标签页
- 增加按钮 padding (px-2→px-3, py-1→py-1.5)
- 添加按钮增加 padding (h-8→h-9, px-3)
2026-06-06 10:43:35 +08:00
雨霖铃 40443c8fc5 fix: 优化字段编辑弹窗样式
- 去除弹窗标题
- 描述文字显示选择字段提示
- 关闭按钮置顶,不随内容滚动
- 内容区域独立滚动
2026-06-06 10:32:19 +08:00
雨霖铃 ee4a45630e fix: 限制弹窗尺寸适配 popup 显示
- 最大宽度 360px
- 最大高度 calc(100vh - 4rem)
- 内容超出时支持滚动
- 宽度自适应 viewport
2026-06-06 10:31:07 +08:00
雨霖铃 4a423889d9 feat: 字段编辑改为弹窗显示
- 添加 Dialog 组件包裹 FieldEditor
- 点击字段卡片打开编辑弹窗
- 简化布局,移除右侧字段编辑面板
- 支持点击遮罩或关闭按钮关闭弹窗
2026-06-06 10:29:44 +08:00
雨霖铃 ee78e314d3 fix: 修复拖拽时滚轮滚动不生效问题
- 改为在 document 级别监听 wheel 事件
- 使用 capture 阶段优先处理事件
- 确保在 PointerSensor 拦截前捕获滚轮事件
2026-06-06 10:20:59 +08:00
雨霖铃 ee77c97b56 feat: 拖拽时支持鼠标滚轮滚动列表
- 拖拽状态下监听 wheel 事件
- 使用 preventDefault 阻止默认滚动
- 降低滚动速度 (0.5x) 提供更精确的控制
- 自动更新虚拟列表渲染范围
2026-06-06 10:18:13 +08:00
雨霖铃 aa8b84af50 fix: 修复虚拟列表拖拽时显示空白问题
- 添加 DragOverlay 独立渲染拖拽中的项目
- 拖拽时扩展预加载范围 (OVERSCAN 2→10)
- 添加 activeId 状态跟踪拖拽项目
- 拖拽中的卡片以半透明效果独立显示
2026-06-06 10:17:16 +08:00
雨霖铃 707f17ac84 feat: 字段列表优化 - 输入限制、选中样式、取消选中
- FieldEditor: 字段名称maxLength=20,描述maxLength=50
- FieldItem: 统一有无描述时的垂直居中布局,选中左侧竖线+背景高亮
- FieldList: 点击已选中字段可取消选中,选中态加shadow和ring效果
- index: 支持selectedIndex=-1取消选中
2026-06-06 10:09:48 +08:00
雨霖铃 af0b2d8ed1 fix: 统一字段列表卡片高度,最大字段数改为40
- MAX_FIELDS: 20 → 40
- 固定卡片高度52px,无论虚拟/非虚拟模式视觉一致
- 5条以上容器高度固定,启用虚拟滚动
- 主页面添加字段时检查MAX_FIELDS限制
2026-06-06 09:58:57 +08:00
雨霖铃 49e7f1ea55 feat: 实现虚拟列表、拖拽排序、实时预览防抖,更新文档
- DataPreview: 大数据量(>100条)自动启用虚拟滚动,仅渲染可见区域
- FieldList: 基于 @dnd-kit/sortable 实现拖拽排序
- index.tsx: 配置变更时300ms防抖生成预览数据
- ui-design.md: 去除平板/移动端响应式、快捷键,更新交互说明
- technical-implementation.md: 去除downloadAsZip,更新虚拟列表说明
2026-06-06 09:42:58 +08:00
雨霖铃 1a92e88934 feat: 实现测试数据生成器完整功能
- 添加类型定义 (FieldConfig, DataRule, GeneratorDefinition 等)
- 实现 21 个数据生成器 (个人信息/业务数据/技术数据/基础类型)
- 实现 Web Worker 后台数据生成引擎
- 实现规则存储与管理功能
- 实现 JSON/CSV 数据导出功能
- 开发完整 UI 组件 (字段管理/生成器选择/数据预览/导出面板等)
- 集成到应用功能配置,添加国际化支持

功能特性:
- 实时预览生成的数据
- 字段配置 (名称/描述/必填/空值率/唯一性约束)
- 规则管理 (保存/加载/搜索/导入导出)
- Web Worker 后台生成,支持进度显示和取消
- 响应式布局,支持多种设备

docs: 更新 TASKS.md 所有子任务复选框为已完成状态
2026-06-06 09:29:12 +08:00
雨霖铃 2b84eda24f docs: 统一测试数据生成器文档,移除 SQL/TypeScript 导出,修复接口命名不一致
- 移除所有文档中的 SQL 和 TypeScript 导出格式引用
- 统一数据导出格式为 JSON 和 CSV
- 移除 GeneratorDefinition 中的 icon 字段
- 更新 generatorCategories 配置,包含所有 21 个生成器
- 统一 rule-management.md 和 technical-implementation.md 中的接口名称为 DataRule
- 更新 ui-design.md 中的界面设计,移除 SQL/TypeScript 相关元素
2026-06-06 09:04:53 +08:00
雨霖铃 7f22b95aa2 refactor: 移除不必要的 export 关键字
中优先级任务:将仅内部使用的函数和类型移除 export 关键字

移除 export 的函数:
- uiPopover: showPopover
- storageCleaner: injectClearLocalStorage, injectClearSessionStorage,
  injectClearIndexedDB, injectClearCacheStorage, injectUnregisterServiceWorkers

移除 export 的类型和常量:
- base64Converter: SUPPORTED_IMAGE_TYPES, SUPPORTED_IMAGE_EXTENSIONS,
  TextToBase64Result, Base64ToBlobResult
- contextMenu: ContextMenuItemConfig, ContextMenuClickedInfo, ParseResult
- jsonFormatter: JsonMinifyResult
- jsonToToml: JsonToTomlResult
- jsonToYaml: JsonToYamlResult
- jwt: JwtHeader, JwtPayload
- qrCodeParser: QrCodeParseResult

所有 473 个测试通过,类型检查通过
2026-06-06 01:00:10 +08:00
雨霖铃 9990d86270 refactor: 删除高优先级死代码
删除未使用的代码以提高代码质量和可维护性:

删除的文件:
- src/pages/Dashboard/ToolCard.tsx:未被使用的组件
- src/utils/useDebounce.ts:未被使用的 hook
- src/components/__tests__/ToolCard.test.tsx:对应组件的测试文件

删除的导出函数:
- chromeTabs: getActiveTab, getActiveTabDomain, ensureContentScriptInjected
- clipboard: copyImageToClipboard
- storageCleaner: isEmptyResult
- chromeI18n: preloadNamespaces
- useContextMenuData: clearContextMenuData

更新了对应的测试文件以保持一致性

总计删除 525 行代码,所有 473 个测试通过
2026-06-06 01:00:10 +08:00
雨霖铃 ea0552e8aa feat: 替换项目图标为自定义 logo
- 替换 public/icon/ 目录下所有 PNG 图标文件为新 logo
- 删除 public/wxt.svg(不再需要)
- 在 wxt.config.ts 中添加 icons 和 default_icon 配置
- 更新 public/README.md 文档
2026-06-06 01:00:10 +08:00
雨霖铃 c40b66b703 docs: 更新测试数据生成器功能设计文档
主要更新:
- 添加字段必填/选填设置和空值率配置
- 移除标签管理系统(20条规则无需标签)
- 添加组合策略保证唯一性生成
- 添加价格生成器(真实分布/心理定价)
- 添加场景化生成器(年龄/数量/评分/折扣/库存)
- 更新所有文档移除emoji,使用纯文字
- 更新类型定义和生成逻辑
2026-06-05 23:40:36 +08:00
雨霖铃 f55fd4338d docs(AGENTS.md): 添加 Git Commit 必须使用中文描述的规范 2026-06-05 22:54:29 +08:00
雨霖铃 27c1cf37e3 chore: update .gitignore with common ignore patterns
- Add environment variable files (.env, .env.local, .env.*.local)
- Add build output directories (dist/, build/)
- Add test coverage directory (coverage/)
- Add IDE workspace files (*.code-workspace)
- Add TypeScript build info files (*.tsbuildinfo, *.tsxbuildinfo)
- Remove docs/* to track documentation files
2026-06-05 22:53:39 +08:00
雨霖铃 2520d72eb1 refactor: 移动 CopyButton 测试文件到统一 __tests__ 目录 2026-06-05 21:57:19 +08:00
LingandRX 4d038203a7 fix(CopyButton): 修复 review 反馈并补充测试 (#66)
* fix: remove non-functional animation classes from CopyButton
* test(CopyButton): 补充单元测试覆盖边界场景
* fix: unify CopyButton imports to named export across all consumers
* fix(CopyButton): add aria-label for screen reader accessibility
2026-06-05 21:16:12 +08:00
LingandRX 2c45ddada9 fix: add missing Toaster component to enable toast display (#65)
The project was calling toast.success/error/warning from sonner in 7 files,
but the <Toaster> component was never rendered in the React tree. This meant
sonner stored toast data internally but no UI was ever displayed to users.

Changes:
- Create src/components/ui/sonner.tsx with shadcn/ui-style Toaster wrapper
  that integrates with ThemeModeProvider for light/dark theme support
- Add <Toaster /> to AppRoot.tsx so it works across all entry points
  (popup, sidepanel, browser-tab)

fix: always convert dots to underscores in i18n t() key lookup

The t() function only converted dots to underscores when the key contained
a colon (namespace:key format). Keys using dot notation like
'messages.copySuccess' were passed directly to chrome.i18n.getMessage()
without dot-to-underscore conversion, causing lookups to fail silently and
return empty strings - resulting in toast notifications with no text.

Now all separators (both ':' and '.') are consistently converted to '_'
regardless of format, matching the messages.json key convention.

fix: position toast at bottom-center instead of bottom-right
2026-06-05 19:34:09 +08:00
LingandRX a0b1ade662 Merge branch 'main' into develop 2026-06-05 13:10:34 +08:00
雨霖铃 d964e27c9d fix(hooks): 用 merge-base 替代 rev-parse 修复 pre-push 变更文件检测 2026-06-05 13:02:30 +08:00
雨霖铃 10644fae95 fix(hooks): pre-push 无 upstream 时回退到 origin/main 对比 2026-06-05 12:50:55 +08:00
雨霖铃 77f722b575 fix: 修复右键菜单 srcUrl 误判、pre-push 全量扫描、generating 状态不可见问题
- contextMenu: srcUrl 检查限定为 qrCode-image 菜单项,避免其他菜单误返回图片 URL
- pre-push: eslint 改为只检查变更文件(git diff 过滤),tsc 保留全项目检查
- useQrCode: confirmGenerate 用 setTimeout 延迟生成,让 loading 状态先被 React 渲染
- tests: 生成相关测试改为 async + waitFor 适配异步 confirmGenerate
2026-06-05 12:49:43 +08:00
9 changed files with 36 additions and 514 deletions
+2 -35
View File
@@ -1,6 +1,6 @@
# AGENTS.md
WXT 浏览器扩展项目 (React 19 + TypeScript)。提供时间戳转换、存储清理、JWT 解析、JSON 工具、二维码、Base64、Markdown、测试数据生成器等测试效率工具。
WXT 浏览器扩展项目 (React 19 + TypeScript)。提供时间戳转换、存储清理、JWT 解析、JSON 工具、二维码、Base64、Markdown 等测试效率工具。
## 核心命令
@@ -54,7 +54,6 @@ src/ # 源代码根目录
utils/ # 工具函数与服务抽象
types/ # TypeScript 类型声明
lib/ # 通用工具函数(cn、utils)
workers/ # Web Worker(数据生成等耗时任务)
public/ # 静态资源(图标、_locales 等)
```
@@ -77,37 +76,6 @@ 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`
@@ -180,8 +148,7 @@ src/types/
## 关键外部库(非显而易见的)
- `@webext-core/messaging` — 扩展消息通信
- `@dnd-kit` — 拖拽排序(用于页面顺序管理和字段列表排序
- `@dnd-kit` — 拖拽排序(用于页面顺序管理)
- `qrious` + `qr-scanner` — 二维码生成与解析
- `dayjs` — 日期处理(时间戳转换)
- `sonner` — Toast 通知(替代传统 snackbar
- Web Worker — 批量数据生成(`src/workers/generator.worker.ts`),避免阻塞 UI 线程
+9 -23
View File
@@ -8,72 +8,61 @@
## 功能特性
### 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/)
@@ -86,8 +75,6 @@
- **存储**: Chrome Storage API (类型安全封装)
- **解析引擎**: qr-scanner (二维码解析), qrious (二维码生成)
- **测试**: Vitest + Testing Library
- **拖拽排序**: @dnd-kit/core + @dnd-kit/sortable
- **异步生成**: Web Worker (批量数据生成)
## 项目结构
@@ -102,7 +89,6 @@
│ │ ├── background.ts # 后台 Service Worker
│ │ └── content.ts # 网页注入脚本
│ ├── pages/ # 各功能模块的页面组件
│ ├── workers/ # Web Worker (数据生成等耗时任务)
│ ├── providers/ # 全局状态提供者 (Router, Theme 等)
│ ├── hooks/ # 自定义 React Hooks
│ ├── utils/ # 工具函数与服务抽象
@@ -1,194 +0,0 @@
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('复制成功后图标切换为 Check1.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,117 +0,0 @@
import { act, renderHook, waitFor } from '@testing-library/react';
import { beforeEach, describe, expect, it, vi } from 'vitest';
import { useGenerator } from '@/pages/TestDataGenerator/hooks/useGenerator';
import type { FieldConfig, WorkerResponseMessage } from '@/types/testDataGenerator';
const mockField: FieldConfig = {
id: 'field-1',
name: 'username',
generatorId: 'string',
params: {},
required: true,
nullRate: 0,
unique: false,
};
type WorkerListener = (event: MessageEvent<WorkerResponseMessage>) => void;
class MockWorker {
static instances: MockWorker[] = [];
onmessage: WorkerListener | null = null;
onerror: ((event: ErrorEvent) => void) | null = null;
postedMessages: unknown[] = [];
constructor(_url: URL, _options?: WorkerOptions) {
MockWorker.instances.push(this);
}
postMessage(message: unknown) {
this.postedMessages.push(message);
}
terminate() {
const index = MockWorker.instances.indexOf(this);
if (index >= 0) {
MockWorker.instances.splice(index, 1);
}
}
emit(message: WorkerResponseMessage) {
this.onmessage?.({ data: message } as MessageEvent<WorkerResponseMessage>);
}
}
describe('useGenerator', () => {
beforeEach(() => {
MockWorker.instances = [];
vi.stubGlobal('Worker', MockWorker);
});
it('应忽略过期 generationId 的 complete 消息', async () => {
const { result } = renderHook(() => useGenerator());
act(() => {
result.current.generate([mockField], 10);
});
const worker = MockWorker.instances[0];
expect(worker).toBeDefined();
act(() => {
result.current.cancel();
});
act(() => {
result.current.generate([mockField], 5);
});
act(() => {
worker.emit({
type: 'complete',
generationId: 1,
payload: {
success: true,
data: [{ username: 'stale' }],
stats: { total: 10, success: 10, failed: 0, duration: 1 },
},
});
});
expect(result.current.result).toBeNull();
expect(result.current.isGenerating).toBe(true);
act(() => {
worker.emit({
type: 'complete',
generationId: 3,
payload: {
success: true,
data: [{ username: 'fresh' }],
stats: { total: 5, success: 5, failed: 0, duration: 1 },
},
});
});
await waitFor(() => {
expect(result.current.isGenerating).toBe(false);
});
expect(result.current.result?.data?.[0]).toEqual({ username: 'fresh' });
});
it('cancel 后应发送 cancel 消息并使 generationId 失效', () => {
const { result } = renderHook(() => useGenerator());
act(() => {
result.current.generate([mockField], 100);
});
const worker = MockWorker.instances[0];
act(() => {
result.current.cancel();
});
expect(result.current.isGenerating).toBe(false);
expect(worker.postedMessages).toEqual(expect.arrayContaining([{ type: 'cancel' }]));
});
});
@@ -8,8 +8,7 @@ import type {
FieldConfig,
GenerateResult,
GenerateProgress,
WorkerRequestMessage,
WorkerResponseMessage,
WorkerMessage,
} from '@/types/testDataGenerator';
export interface UseGeneratorReturn {
@@ -36,7 +35,6 @@ export function useGenerator(): UseGeneratorReturn {
const [error, setError] = useState<string | null>(null);
const workerRef = useRef<Worker | null>(null);
const generationIdRef = useRef(0);
// 清理 Worker
useEffect(() => {
@@ -60,30 +58,22 @@ export function useGenerator(): UseGeneratorReturn {
type: 'module',
});
worker.onmessage = (e: MessageEvent<WorkerResponseMessage>) => {
worker.onmessage = (e: MessageEvent<WorkerMessage>) => {
const data = e.data;
const { type } = data;
if (data.generationId !== generationIdRef.current) {
return;
}
switch (type) {
case 'progress':
setProgress(data.payload);
setProgress(data.payload as GenerateProgress);
break;
case 'complete':
setIsGenerating(false);
if (data.payload.success) {
setResult(data.payload);
} else if (data.payload.error && data.payload.error !== '生成已取消') {
setError(data.payload.error);
}
setResult(data.payload as GenerateResult);
setProgress(null);
break;
case 'error':
setIsGenerating(false);
setError(data.payload.error);
setError((data.payload as { error: string }).error);
setProgress(null);
break;
}
@@ -110,17 +100,15 @@ export function useGenerator(): UseGeneratorReturn {
(fields: FieldConfig[], count: number, csvMode = false) => {
if (isGenerating) return;
const generationId = ++generationIdRef.current;
setIsGenerating(true);
setProgress(null);
setResult(null);
setError(null);
const worker = getWorker();
const message: WorkerRequestMessage = {
const message: WorkerMessage = {
type: 'start',
payload: { generationId, fields, count, csvMode },
payload: { fields, count, csvMode },
};
worker.postMessage(message);
},
@@ -132,8 +120,7 @@ export function useGenerator(): UseGeneratorReturn {
*/
const cancel = useCallback(() => {
if (workerRef.current && isGenerating) {
++generationIdRef.current;
const message: WorkerRequestMessage = { type: 'cancel' };
const message: WorkerMessage = { type: 'cancel' };
workerRef.current.postMessage(message);
setIsGenerating(false);
setProgress(null);
+5 -15
View File
@@ -156,29 +156,19 @@ export interface GenerateProgress {
}
/**
* Worker 请求消息类型
* Worker 消息类型
*/
export type WorkerRequestMessage =
export type WorkerMessage =
| { type: 'start'; payload: WorkerStartPayload }
| { type: 'progress'; payload: GenerateProgress }
| { type: 'complete'; payload: GenerateResult }
| { type: 'error'; payload: { error: string } }
| { type: 'cancel' };
/**
* Worker 响应消息类型
*/
export type WorkerResponseMessage =
| { type: 'progress'; generationId: number; payload: GenerateProgress }
| { type: 'complete'; generationId: number; payload: GenerateResult }
| { type: 'error'; generationId: number; payload: { error: string } };
/** @deprecated 使用 WorkerRequestMessage | WorkerResponseMessage */
export type WorkerMessage = WorkerRequestMessage | WorkerResponseMessage;
/**
* Worker 启动参数
*/
export interface WorkerStartPayload {
/** 生成任务 ID,用于忽略过期 Worker 响应 */
generationId: number;
/** 字段配置列表 */
fields: FieldConfig[];
/** 生成数量 */
-65
View File
@@ -1,65 +0,0 @@
import { beforeEach, describe, expect, it, vi } from 'vitest';
import * as ruleStorage from '../ruleStorage';
const STORAGE_KEY = 'testDataGenerator_rules';
const mockField = {
id: 'field-1',
name: 'username',
generatorId: 'string',
params: {},
required: true,
nullRate: 0,
unique: false,
};
describe('ruleStorage', () => {
beforeEach(() => {
localStorage.clear();
vi.restoreAllMocks();
});
it('save 在 localStorage 写入失败时应返回 null', () => {
vi.spyOn(Storage.prototype, 'setItem').mockImplementation(() => {
throw new DOMException('QuotaExceededError');
});
const result = ruleStorage.save({
name: 'Test Rule',
fields: [mockField],
});
expect(result).toBeNull();
expect(localStorage.getItem(STORAGE_KEY)).toBeNull();
});
it('update 在 localStorage 写入失败时应返回 null', () => {
const saved = ruleStorage.save({
name: 'Test Rule',
fields: [mockField],
});
expect(saved).not.toBeNull();
vi.spyOn(Storage.prototype, 'setItem').mockImplementation(() => {
throw new DOMException('QuotaExceededError');
});
const updated = ruleStorage.update(saved!.id, { name: 'Updated Rule' });
expect(updated).toBeNull();
});
it('deleteRule 在 localStorage 写入失败时应返回 false', () => {
const saved = ruleStorage.save({
name: 'Test Rule',
fields: [mockField],
});
expect(saved).not.toBeNull();
vi.spyOn(Storage.prototype, 'setItem').mockImplementation(() => {
throw new DOMException('QuotaExceededError');
});
expect(ruleStorage.deleteRule(saved!.id)).toBe(false);
expect(ruleStorage.getById(saved!.id)).toBeDefined();
});
});
+7 -16
View File
@@ -78,9 +78,7 @@ export function save(
useCount: 0,
};
rules.unshift(newRule);
if (!setAll(rules)) {
return null;
}
setAll(rules);
return newRule;
}
@@ -97,9 +95,7 @@ export function save(
updatedAt: now,
};
rules[index] = updatedRule;
if (!setAll(rules)) {
return null;
}
setAll(rules);
return updatedRule;
}
@@ -121,9 +117,7 @@ export function update(id: string, updates: Partial<DataRule>): DataRule | null
updatedAt: Date.now(),
};
rules[index] = updatedRule;
if (!setAll(rules)) {
return null;
}
setAll(rules);
return updatedRule;
}
@@ -138,7 +132,8 @@ export function deleteRule(id: string): boolean {
return false;
}
rules.splice(index, 1);
return setAll(rules);
setAll(rules);
return true;
}
/**
@@ -170,9 +165,7 @@ export function duplicate(id: string, copySuffix = '(副本)'): DataRule | n
const rules = getAll();
rules.unshift(newRule);
if (!setAll(rules)) {
return null;
}
setAll(rules);
return newRule;
}
@@ -274,13 +267,11 @@ export function clear(): void {
/**
* 保存所有规则到存储
*/
function setAll(rules: DataRule[]): boolean {
function setAll(rules: DataRule[]): void {
try {
localStorage.setItem(STORAGE_KEY, JSON.stringify(rules));
return true;
} catch (error) {
console.error('[ruleStorage] 保存规则失败:', error);
return false;
}
}
+5 -28
View File
@@ -6,14 +6,11 @@
import { getGeneratorById } from '@/lib/generators';
import type {
FieldConfig,
WorkerRequestMessage,
WorkerMessage,
GenerateResult,
GenerateProgress,
} from '@/types/testDataGenerator';
/** 每生成 N 行让出一次事件循环,以便处理 cancel 消息 */
const YIELD_EVERY = 100;
// 生成结果缓存
let generatedData: Record<string, unknown>[] = [];
let isCancelled = false;
@@ -21,7 +18,7 @@ let isCancelled = false;
/**
* Worker 消息处理器
*/
self.onmessage = async (e: MessageEvent<WorkerRequestMessage>) => {
self.onmessage = async (e: MessageEvent<WorkerMessage>) => {
const data = e.data;
const { type } = data;
@@ -40,12 +37,11 @@ self.onmessage = async (e: MessageEvent<WorkerRequestMessage>) => {
* 处理开始生成消息
*/
async function handleStart(payload: {
generationId: number;
fields: FieldConfig[];
count: number;
csvMode: boolean;
}): Promise<void> {
const { generationId, fields, count } = payload;
const { fields, count } = payload;
generatedData = [];
try {
@@ -55,7 +51,6 @@ async function handleStart(payload: {
if (!generator) {
self.postMessage({
type: 'error',
generationId,
payload: { error: `生成器 "${field.generatorId}" 不存在` },
});
return;
@@ -70,7 +65,6 @@ async function handleStart(payload: {
if (isCancelled) {
self.postMessage({
type: 'complete',
generationId,
payload: {
success: false,
error: '生成已取消',
@@ -142,23 +136,7 @@ async function handleStart(payload: {
total: count,
estimatedTimeLeft: Math.round(((Date.now() - startTime) / (i + 1)) * (count - i - 1)),
};
self.postMessage({ type: 'progress', generationId, payload: progress });
}
// 定期让出事件循环,使 cancel 消息能被处理
if ((i + 1) % YIELD_EVERY === 0) {
await new Promise<void>((resolve) => setTimeout(resolve, 0));
if (isCancelled) {
self.postMessage({
type: 'complete',
generationId,
payload: {
success: false,
error: '生成已取消',
},
});
return;
}
self.postMessage({ type: 'progress', payload: progress });
}
}
@@ -177,11 +155,10 @@ async function handleStart(payload: {
},
};
self.postMessage({ type: 'complete', generationId, payload: result });
self.postMessage({ type: 'complete', payload: result });
} catch (error) {
self.postMessage({
type: 'error',
generationId,
payload: { error: `生成失败: ${error}` },
});
}