Compare commits
35 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 9a0c8ba850 | |||
| 6c7b7294b4 | |||
| a2e07a9115 | |||
| 2464a5fea6 | |||
| 78f5292b00 | |||
| 5a2589cc57 | |||
| 64db60d75e | |||
| 7090ba3251 | |||
| 31b6edf06b | |||
| a374bf456d | |||
| ea10b27c14 | |||
| 40443c8fc5 | |||
| ee4a45630e | |||
| 4a423889d9 | |||
| ee78e314d3 | |||
| ee77c97b56 | |||
| aa8b84af50 | |||
| 707f17ac84 | |||
| af0b2d8ed1 | |||
| 49e7f1ea55 | |||
| 1a92e88934 | |||
| 2b84eda24f | |||
| 7f22b95aa2 | |||
| 9990d86270 | |||
| ea0552e8aa | |||
| c40b66b703 | |||
| f55fd4338d | |||
| 27c1cf37e3 | |||
| 2520d72eb1 | |||
| 4d038203a7 | |||
| 2c45ddada9 | |||
| a0b1ade662 | |||
| d964e27c9d | |||
| 10644fae95 | |||
| 77f722b575 |
@@ -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 线程
|
||||
|
||||
@@ -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('复制成功后图标切换为 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,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);
|
||||
|
||||
@@ -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[];
|
||||
/** 生成数量 */
|
||||
|
||||
@@ -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();
|
||||
});
|
||||
});
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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}` },
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user