Compare commits
50 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| ec92afa294 | |||
| 618f3c36f2 | |||
| 24c83de56d | |||
| 9c5f5c8cfe | |||
| 016173a9c5 | |||
| 30d3561726 | |||
| 1f9288f780 | |||
| 355a94d116 | |||
| 3f73adc015 | |||
| 86870864a9 | |||
| 1a285fc4c1 | |||
| 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 | |||
| 97098c3abe | |||
| 7afce94d93 | |||
| e2b76a5f86 | |||
| 1ab79785b6 | |||
| c40b66b703 | |||
| f55fd4338d | |||
| 27c1cf37e3 | |||
| 2520d72eb1 | |||
| 4d038203a7 | |||
| 2c45ddada9 | |||
| a0b1ade662 | |||
| d964e27c9d | |||
| 10644fae95 | |||
| 77f722b575 |
@@ -0,0 +1,17 @@
|
|||||||
|
# CI/CD 配置
|
||||||
|
|
||||||
|
## CI 步骤
|
||||||
|
|
||||||
|
严格顺序,任一步骤失败则停止并标记 CI 失败:
|
||||||
|
|
||||||
|
1. `setup`(安装依赖、`wxt prepare`)
|
||||||
|
2. 并行运行 `lint`、`typecheck`、`test`(三者全部通过才继续)
|
||||||
|
3. `build`(仅当步骤 2 全部成功时执行)
|
||||||
|
|
||||||
|
## Pre-commit Hook
|
||||||
|
|
||||||
|
`.husky/pre-commit` 调用 `lint-staged`,任一步骤返回非零则终止提交:
|
||||||
|
|
||||||
|
1. 代码文件 (`*.{ts,tsx,js,jsx,mjs}`):运行 `eslint --fix --max-warnings=0 --no-warn-ignored`;若失败则终止并报告错误
|
||||||
|
2. 同一代码文件:运行 `prettier --write`
|
||||||
|
3. 其他文件 (`*.{json,css,scss,md}`):运行 `prettier --write`
|
||||||
@@ -18,27 +18,9 @@ npm run test:watch # vitest 监视模式
|
|||||||
npm run test:coverage # 带覆盖率的测试
|
npm run test:coverage # 带覆盖率的测试
|
||||||
```
|
```
|
||||||
|
|
||||||
运行单个测试: `npx vitest run path/to/file.test.ts`
|
|
||||||
|
|
||||||
## 验证流程
|
## 验证流程
|
||||||
|
|
||||||
CI 步骤(严格顺序,任一步骤失败则停止并标记 CI 失败):
|
详见 [CI 配置](./.github/CI.md)
|
||||||
|
|
||||||
1. `setup`(安装依赖、`wxt prepare`)
|
|
||||||
2. 并行运行 `lint`、`typecheck`、`test`(三者全部通过才继续)
|
|
||||||
3. `build`(仅当步骤 2 全部成功时执行)
|
|
||||||
|
|
||||||
Pre-commit hook(`.husky/pre-commit` 调用 `lint-staged`,任一步骤返回非零则终止提交):
|
|
||||||
|
|
||||||
1. 代码文件 (`*.{ts,tsx,js,jsx,mjs}`):运行 `eslint --fix --max-warnings=0 --no-warn-ignored`;若失败则终止并报告错误
|
|
||||||
2. 同一代码文件:运行 `prettier --write`
|
|
||||||
3. 其他文件 (`*.{json,css,scss,md}`):运行 `prettier --write`
|
|
||||||
|
|
||||||
## WXT 生成文件
|
|
||||||
|
|
||||||
- `.wxt/` 目录由 `postinstall` 自动执行 `wxt prepare` 生成,包含 TypeScript 类型声明和扩展的 tsconfig。
|
|
||||||
- 生产构建输出到 `.output/` 目录。
|
|
||||||
- `tsconfig.json` 继承自 `./.wxt/tsconfig.json`。
|
|
||||||
|
|
||||||
## 项目结构
|
## 项目结构
|
||||||
|
|
||||||
@@ -73,41 +55,10 @@ src/pages/FeatureName/
|
|||||||
|
|
||||||
- 页面入口组件统一命名为 `Index`,通过 `export default function Index()` 导出
|
- 页面入口组件统一命名为 `Index`,通过 `export default function Index()` 导出
|
||||||
- Hook 负责所有状态管理和业务逻辑,通过返回值暴露给页面
|
- Hook 负责所有状态管理和业务逻辑,通过返回值暴露给页面
|
||||||
- 子组件可以独立调用 `useI18n` 等全局 Hook
|
- 子组件可以独立调用全局 Hook
|
||||||
- 当 `index.tsx` 超过 150 行时,必须拆分为 UI + Hook 模式
|
- 当 `index.tsx` 超过 150 行时,必须拆分为 UI + Hook 模式
|
||||||
- 复杂页面可增加 `contexts/`、`hooks/`、`components/` 子目录
|
- 复杂页面可增加 `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`
|
**路由**: 不使用 React Router。通过 `src/config/features.tsx` 的 `FEATURES` 数组管理,`RouterProvider` 根据 `PageType`
|
||||||
@@ -116,7 +67,6 @@ src/types/
|
|||||||
|
|
||||||
**存储**: 所有 Chrome Storage 键必须在 `src/types/storage.d.ts` 的 `StorageSchema` 中定义,键名使用 kebab-case 格式(如 `app/currentRoute`)。
|
**存储**: 所有 Chrome Storage 键必须在 `src/types/storage.d.ts` 的 `StorageSchema` 中定义,键名使用 kebab-case 格式(如 `app/currentRoute`)。
|
||||||
使用 `src/utils/chromeStorage.ts` 及其 Hook。Router 同时使用 `chrome.storage.local` 和 `localStorage` 做快照以消除首屏闪烁。
|
使用 `src/utils/chromeStorage.ts` 及其 Hook。Router 同时使用 `chrome.storage.local` 和 `localStorage` 做快照以消除首屏闪烁。
|
||||||
修改 StorageSchema 时,必须在 `src/utils/chromeStorage.ts` 添加版本迁移函数,并在测试中覆盖迁移场景。
|
|
||||||
|
|
||||||
**通信**: 使用 `@webext-core/messaging`,协议定义在 `src/utils/messages.ts`。
|
**通信**: 使用 `@webext-core/messaging`,协议定义在 `src/utils/messages.ts`。
|
||||||
|
|
||||||
@@ -132,39 +82,21 @@ src/types/
|
|||||||
- 全局变量: `vitest/globals` (describe, it, expect 等无需导入)
|
- 全局变量: `vitest/globals` (describe, it, expect 等无需导入)
|
||||||
- Setup 文件: `vitest.setup.ts` 自动 mock:
|
- Setup 文件: `vitest.setup.ts` 自动 mock:
|
||||||
- `chrome.*` / `browser.*` API (storage, tabs, runtime, cookies 等)
|
- `chrome.*` / `browser.*` API (storage, tabs, runtime, cookies 等)
|
||||||
- `@/utils/chromeI18n` (从 `public/_locales/zh/messages.json` 加载真实翻译)
|
|
||||||
- `window.matchMedia`
|
- `window.matchMedia`
|
||||||
- 测试文件命名: `__tests__/*.test.{ts,tsx}` 或 `*.test.{ts,tsx}`
|
- 测试文件命名: `__tests__/*.test.{ts,tsx}` 或 `*.test.{ts,tsx}`
|
||||||
- Mock 模式: 使用 `vi.mock()` 进行模块级 mock,避免在测试文件中重复 mock 代码
|
- Mock 模式: 使用 `vi.mock()` 进行模块级 mock,避免在测试文件中重复 mock 代码
|
||||||
- 测试工具: `@testing-library/react` + `@testing-library/user-event` 进行组件测试
|
- 测试工具: `@testing-library/react` + `@testing-library/user-event` 进行组件测试
|
||||||
|
|
||||||
## i18n (chrome.i18n)
|
|
||||||
|
|
||||||
项目使用 Chrome 扩展标准的 `chrome.i18n` API 进行本地化,通过 `src/utils/chromeI18n.ts` 提供类型安全的 React Hook 包装。
|
|
||||||
|
|
||||||
- **翻译文件**: `public/_locales/{zh,en}/messages.json`(Chrome 扩展标准格式)
|
|
||||||
- **默认语言**: `zh`(在 `wxt.config.ts` 的 `manifest.default_locale` 中配置)
|
|
||||||
- **使用方式**: `import { useI18n } from '@/utils/chromeI18n'`
|
|
||||||
- **翻译键格式**:
|
|
||||||
- 直接 key: `t('dashboard_title')` → 查找 `dashboard_title`
|
|
||||||
- 命名空间格式(兼容旧用法): `t('common:buttons.search')` → 查找 `common_buttons_search`
|
|
||||||
- 带命名空间参数: `useI18n(['common', 'features'])`,会自动尝试 `common_key`、`features_key`
|
|
||||||
- **占位符支持**: `t('router_notFoundDescription', { entryPointType: 'popup' })`
|
|
||||||
- **Hook 返回值**: `{ t, i18n: { language, changeLanguage }, isLoaded }`
|
|
||||||
- **回退策略**: 当翻译 key 未命中时,返回 key 本身(开发模式下在控制台记录 warning)
|
|
||||||
- **限制**: `chrome.i18n` 无法动态切换语言,语言跟随浏览器设置,切换后需刷新页面
|
|
||||||
|
|
||||||
## 新功能开发清单
|
## 新功能开发清单
|
||||||
|
|
||||||
1. 在 `src/types/storage.d.ts` 添加 `PageType` 联合类型
|
1. 在 `src/types/storage.d.ts` 添加 `PageType` 联合类型
|
||||||
2. 在 `src/config/features.tsx` 的 `FEATURES` 数组添加配置(指定 key、翻译键、图标、三种渲染模式的组件)
|
2. 在 `src/config/features.tsx` 的 `FEATURES` 数组添加配置(指定 key、翻译键、图标、三种渲染模式的组件)
|
||||||
3. 在 `src/pages/` 创建页面组件 (懒加载):
|
3. 在 `src/pages/` 创建页面组件 (懒加载):
|
||||||
- `index.tsx` — UI 组件,使用 `useI18n` 获取翻译
|
- `index.tsx` — UI 组件
|
||||||
- `useFeatureName.ts` — 业务逻辑 Hook
|
- `use{FeatureName}.ts` — 业务逻辑 Hook
|
||||||
- `constants.ts` — 常量(可选)
|
- `constants.ts` — 常量(可选)
|
||||||
4. 在 `public/_locales/zh/messages.json`(及 `en/messages.json`)添加翻译
|
4. 如需新权限,更新 `wxt.config.ts` 的 `manifest.permissions`;如有不使用的权限,需移除
|
||||||
5. 如需新权限,更新 `wxt.config.ts` 的 `manifest.permissions`
|
5. 添加对应的单元测试
|
||||||
6. 添加对应的单元测试
|
|
||||||
|
|
||||||
## 代码规范
|
## 代码规范
|
||||||
|
|
||||||
@@ -176,6 +108,7 @@ src/types/
|
|||||||
- 格式: Prettier (`.prettierrc`: 100 字符宽, 单引号, 尾逗号 all, LF 换行)
|
- 格式: Prettier (`.prettierrc`: 100 字符宽, 单引号, 尾逗号 all, LF 换行)
|
||||||
- ESLint 使用 `typescript-eslint` 的 `projectService: true`(无需手动维护 project 路径)
|
- ESLint 使用 `typescript-eslint` 的 `projectService: true`(无需手动维护 project 路径)
|
||||||
- **Git Commit**: 必须使用中文描述,遵循 Conventional Commits 规范(如 `fix(组件名): 描述`、`feat(功能名): 描述`)
|
- **Git Commit**: 必须使用中文描述,遵循 Conventional Commits 规范(如 `fix(组件名): 描述`、`feat(功能名): 描述`)
|
||||||
|
- **测试维护**: 新增/编辑已有功能/组件时,需要针对相关的测试进行更新
|
||||||
|
|
||||||
## 关键外部库(非显而易见的)
|
## 关键外部库(非显而易见的)
|
||||||
|
|
||||||
@@ -184,4 +117,3 @@ src/types/
|
|||||||
- `qrious` + `qr-scanner` — 二维码生成与解析
|
- `qrious` + `qr-scanner` — 二维码生成与解析
|
||||||
- `dayjs` — 日期处理(时间戳转换)
|
- `dayjs` — 日期处理(时间戳转换)
|
||||||
- `sonner` — Toast 通知(替代传统 snackbar)
|
- `sonner` — Toast 通知(替代传统 snackbar)
|
||||||
- Web Worker — 批量数据生成(`src/workers/generator.worker.ts`),避免阻塞 UI 线程
|
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
|
||||||
|
Before Width: | Height: | Size: 4.0 KiB |
@@ -4,7 +4,6 @@ import { copyTextToClipboard } from '@/utils/clipboard';
|
|||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
import { buttonVariants, type ButtonProps } from '@/components/ui/button';
|
import { buttonVariants, type ButtonProps } from '@/components/ui/button';
|
||||||
import { toast } from 'sonner';
|
import { toast } from 'sonner';
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
|
|
||||||
interface CopyButtonProps extends Omit<ButtonProps, 'children' | 'onClick'> {
|
interface CopyButtonProps extends Omit<ButtonProps, 'children' | 'onClick'> {
|
||||||
text: string;
|
text: string;
|
||||||
@@ -19,7 +18,6 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
|
|||||||
className,
|
className,
|
||||||
...props
|
...props
|
||||||
}) => {
|
}) => {
|
||||||
const { t } = useI18n('common');
|
|
||||||
const [copied, setCopied] = useState(false);
|
const [copied, setCopied] = useState(false);
|
||||||
const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||||
|
|
||||||
@@ -33,18 +31,18 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
|
|||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
|
|
||||||
if (!text) {
|
if (!text) {
|
||||||
toast.error(t('messages.copyEmpty'));
|
toast.error('无内容可复制');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const success = await copyTextToClipboard(text);
|
const success = await copyTextToClipboard(text);
|
||||||
if (success) {
|
if (success) {
|
||||||
toast.success(t('messages.copySuccess'));
|
toast.success('已复制到剪贴板');
|
||||||
setCopied(true);
|
setCopied(true);
|
||||||
if (timerRef.current) clearTimeout(timerRef.current);
|
if (timerRef.current) clearTimeout(timerRef.current);
|
||||||
timerRef.current = setTimeout(() => setCopied(false), 1500);
|
timerRef.current = setTimeout(() => setCopied(false), 1500);
|
||||||
} else {
|
} else {
|
||||||
toast.error(t('messages.copyError'));
|
toast.error('复制失败');
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -52,8 +50,8 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={handleCopy}
|
onClick={handleCopy}
|
||||||
title={tooltip ?? t('buttons.copy')}
|
title={tooltip ?? '复制'}
|
||||||
aria-label={tooltip ?? t('buttons.copy')}
|
aria-label={tooltip ?? '复制'}
|
||||||
className={cn(
|
className={cn(
|
||||||
buttonVariants({ variant, size }),
|
buttonVariants({ variant, size }),
|
||||||
copied &&
|
copied &&
|
||||||
|
|||||||
@@ -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,7 +1,6 @@
|
|||||||
import { Component, ErrorInfo, ReactNode } from 'react';
|
import { Component, ErrorInfo, ReactNode } from 'react';
|
||||||
import { AlertCircle, RefreshCw } from 'lucide-react';
|
import { AlertCircle, RefreshCw } from 'lucide-react';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { getMessage } from '@/utils/chromeI18n';
|
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
children: ReactNode;
|
children: ReactNode;
|
||||||
@@ -44,11 +43,9 @@ class ErrorBoundary extends Component<Props, State> {
|
|||||||
<div className="flex h-16 w-16 items-center justify-center rounded-full bg-destructive/10 text-destructive mx-auto mb-4">
|
<div className="flex h-16 w-16 items-center justify-center rounded-full bg-destructive/10 text-destructive mx-auto mb-4">
|
||||||
<AlertCircle className="h-8 w-8" />
|
<AlertCircle className="h-8 w-8" />
|
||||||
</div>
|
</div>
|
||||||
<h2 className="text-xl font-extrabold text-destructive mb-2">
|
<h2 className="text-xl font-extrabold text-destructive mb-2">糟糕,出了点问题</h2>
|
||||||
{getMessage('errorBoundary_title')}
|
|
||||||
</h2>
|
|
||||||
<p className="text-sm text-muted-foreground mb-6">
|
<p className="text-sm text-muted-foreground mb-6">
|
||||||
{getMessage('errorBoundary_description')}
|
应用遇到了一些意外错误。您可以尝试刷新页面或重置应用。
|
||||||
</p>
|
</p>
|
||||||
{this.state.error && (
|
{this.state.error && (
|
||||||
<div className="mb-6 p-4 rounded-lg bg-zinc-950 dark:bg-zinc-900 text-left max-h-[200px] overflow-auto border border-border/40">
|
<div className="mb-6 p-4 rounded-lg bg-zinc-950 dark:bg-zinc-900 text-left max-h-[200px] overflow-auto border border-border/40">
|
||||||
@@ -63,7 +60,7 @@ class ErrorBoundary extends Component<Props, State> {
|
|||||||
className="rounded-lg font-bold shadow-sm"
|
className="rounded-lg font-bold shadow-sm"
|
||||||
>
|
>
|
||||||
<RefreshCw className="mr-2 h-4 w-4" />
|
<RefreshCw className="mr-2 h-4 w-4" />
|
||||||
{getMessage('errorBoundary_refresh')}
|
刷新应用
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,7 +1,6 @@
|
|||||||
import { Component, ErrorInfo, ReactNode } from 'react';
|
import { Component, ErrorInfo, ReactNode } from 'react';
|
||||||
import { AlertCircle, RefreshCw } from 'lucide-react';
|
import { AlertCircle, RefreshCw } from 'lucide-react';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { getMessage } from '@/utils/chromeI18n';
|
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
children: ReactNode;
|
children: ReactNode;
|
||||||
@@ -46,11 +45,9 @@ class PageErrorBoundary extends Component<Props, State> {
|
|||||||
<AlertCircle className="h-6 w-6" />
|
<AlertCircle className="h-6 w-6" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3 className="text-base font-semibold text-foreground mb-1.5">
|
<h3 className="text-base font-semibold text-foreground mb-1.5">该功能运行异常</h3>
|
||||||
{getMessage('pageErrorBoundary_title')}
|
|
||||||
</h3>
|
|
||||||
<p className="text-xs text-muted-foreground mb-5">
|
<p className="text-xs text-muted-foreground mb-5">
|
||||||
{getMessage('pageErrorBoundary_description')}
|
该页面在加载或渲染时遇到了内部脚本错误。您可以尝试重试,或者通过导航菜单切换到其他工具。
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
{this.state.error && (
|
{this.state.error && (
|
||||||
@@ -68,7 +65,7 @@ class PageErrorBoundary extends Component<Props, State> {
|
|||||||
className="font-medium shadow-sm"
|
className="font-medium shadow-sm"
|
||||||
>
|
>
|
||||||
<RefreshCw className="mr-1.5 h-3.5 w-3.5" />
|
<RefreshCw className="mr-1.5 h-3.5 w-3.5" />
|
||||||
{getMessage('errorBoundary_retry')}
|
重新尝试
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,7 +1,6 @@
|
|||||||
import { FEATURES, getEntryPointType } from '@/config/features';
|
import { FEATURES, getEntryPointType } from '@/config/features';
|
||||||
import { useRouter } from '@/providers/RouterProvider';
|
import { useRouter } from '@/providers/RouterProvider';
|
||||||
import { Suspense } from 'react';
|
import { Suspense } from 'react';
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
import PageErrorBoundary from '@/components/PageErrorBoundary';
|
import PageErrorBoundary from '@/components/PageErrorBoundary';
|
||||||
import PageSkeleton from '@/components/PageSkeleton';
|
import PageSkeleton from '@/components/PageSkeleton';
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
@@ -11,7 +10,6 @@ const entryPointType = getEntryPointType();
|
|||||||
|
|
||||||
export default function RouterContainer() {
|
export default function RouterContainer() {
|
||||||
const { currentPage, isLoaded } = useRouter();
|
const { currentPage, isLoaded } = useRouter();
|
||||||
const { t } = useI18n('common');
|
|
||||||
|
|
||||||
const animationClass =
|
const animationClass =
|
||||||
currentPage === 'dashboard' ? 'page-transition-dashboard' : 'page-transition-enter';
|
currentPage === 'dashboard' ? 'page-transition-dashboard' : 'page-transition-enter';
|
||||||
@@ -43,9 +41,9 @@ export default function RouterContainer() {
|
|||||||
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-destructive/10 text-destructive mb-4">
|
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-destructive/10 text-destructive mb-4">
|
||||||
<AlertTriangle className="h-6 w-6" />
|
<AlertTriangle className="h-6 w-6" />
|
||||||
</div>
|
</div>
|
||||||
<h3 className="text-sm font-semibold text-foreground">{t('router.notFound')}</h3>
|
<h3 className="text-sm font-semibold text-foreground">{'页面未找到'}</h3>
|
||||||
<p className="text-xs text-muted-foreground mt-1 max-w-[240px]">
|
<p className="text-xs text-muted-foreground mt-1 max-w-[240px]">
|
||||||
{t('router.notFoundDescription', { entryPointType })}
|
{`该功能在当前运行环境(${entryPointType})下不可用或已被移除。`}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -17,6 +17,16 @@ export interface SwitchButtonGroupProps<T extends string | number = string> exte
|
|||||||
buttonClassName?: string;
|
buttonClassName?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const SIZE_CLASSES = {
|
||||||
|
small: 'text-xs h-8 px-2 py-1 rounded-md',
|
||||||
|
medium: 'text-sm h-9 px-3 py-1.5 rounded-md',
|
||||||
|
large: 'text-base h-11 px-4 py-2 rounded-lg',
|
||||||
|
} as const;
|
||||||
|
|
||||||
|
const SELECTED_CLASSES =
|
||||||
|
'bg-background text-foreground shadow-sm font-semibold animate-in fade-in-50 zoom-in-95 duration-150';
|
||||||
|
const UNSELECTED_CLASSES = 'hover:bg-background/50 hover:text-foreground/80';
|
||||||
|
|
||||||
export default function SwitchButtonGroup<T extends string | number = string>({
|
export default function SwitchButtonGroup<T extends string | number = string>({
|
||||||
value,
|
value,
|
||||||
options,
|
options,
|
||||||
@@ -26,12 +36,6 @@ export default function SwitchButtonGroup<T extends string | number = string>({
|
|||||||
buttonClassName,
|
buttonClassName,
|
||||||
...props
|
...props
|
||||||
}: SwitchButtonGroupProps<T>) {
|
}: SwitchButtonGroupProps<T>) {
|
||||||
const sizeClasses = {
|
|
||||||
small: 'text-xs h-8 px-2 py-1 rounded-md',
|
|
||||||
medium: 'text-sm h-9 px-3 py-1.5 rounded-md',
|
|
||||||
large: 'text-base h-11 px-4 py-2 rounded-lg',
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={cn(
|
className={cn(
|
||||||
@@ -40,10 +44,7 @@ export default function SwitchButtonGroup<T extends string | number = string>({
|
|||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
{options.map((option) => {
|
{options.map((option) => (
|
||||||
const isSelected = value === option.value;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<button
|
<button
|
||||||
key={option.value}
|
key={option.value}
|
||||||
type="button"
|
type="button"
|
||||||
@@ -52,17 +53,14 @@ export default function SwitchButtonGroup<T extends string | number = string>({
|
|||||||
'flex-1 inline-flex items-center justify-center font-medium whitespace-nowrap transition-all',
|
'flex-1 inline-flex items-center justify-center font-medium whitespace-nowrap transition-all',
|
||||||
'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2',
|
'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2',
|
||||||
'disabled:pointer-events-none disabled:opacity-50',
|
'disabled:pointer-events-none disabled:opacity-50',
|
||||||
sizeClasses[size],
|
SIZE_CLASSES[size],
|
||||||
isSelected
|
value === option.value ? SELECTED_CLASSES : UNSELECTED_CLASSES,
|
||||||
? 'bg-background text-foreground shadow-sm font-semibold animate-in fade-in-50 zoom-in-95 duration-150'
|
|
||||||
: 'hover:bg-background/50 hover:text-foreground/80',
|
|
||||||
buttonClassName,
|
buttonClassName,
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{option.label}
|
{option.label}
|
||||||
</button>
|
</button>
|
||||||
);
|
))}
|
||||||
})}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
import React, { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react';
|
import React, { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react';
|
||||||
import { X } from 'lucide-react';
|
import { X } from 'lucide-react';
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
import { toast } from 'sonner'; // 推荐使用 shadcn 的默认 Toast
|
import { toast } from 'sonner'; // 推荐使用 shadcn 的默认 Toast
|
||||||
import { CopyButton } from '@/components/CopyButton';
|
import { CopyButton } from '@/components/CopyButton';
|
||||||
@@ -114,8 +113,7 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
|
|||||||
const [internalValue, setInternalValue] = useState(defaultValue);
|
const [internalValue, setInternalValue] = useState(defaultValue);
|
||||||
const [error, setError] = useState<string>('');
|
const [error, setError] = useState<string>('');
|
||||||
|
|
||||||
const { t } = useI18n('common');
|
const placeholder = placeholderProp ?? '请输入文本';
|
||||||
const placeholder = placeholderProp ?? t('textInputArea.placeholder');
|
|
||||||
|
|
||||||
const isControlled = controlledValue !== undefined;
|
const isControlled = controlledValue !== undefined;
|
||||||
const value = isControlled ? controlledValue : internalValue;
|
const value = isControlled ? controlledValue : internalValue;
|
||||||
@@ -159,7 +157,7 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
|
|||||||
const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||||
const newVal = e.target.value;
|
const newVal = e.target.value;
|
||||||
if (maxLength && newVal.length > maxLength) {
|
if (maxLength && newVal.length > maxLength) {
|
||||||
const msg = t('charCount', { count: maxLength });
|
const msg = `内容不能超过 ${maxLength} 个字符`;
|
||||||
setError(msg);
|
setError(msg);
|
||||||
toast.warning(msg);
|
toast.warning(msg);
|
||||||
return;
|
return;
|
||||||
@@ -181,9 +179,9 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
|
|||||||
onChange?.('');
|
onChange?.('');
|
||||||
setError('');
|
setError('');
|
||||||
internalRef.current?.focus();
|
internalRef.current?.focus();
|
||||||
toast.success(t('textInputArea.cleared'));
|
toast.success('已清空');
|
||||||
onClear?.();
|
onClear?.();
|
||||||
}, [isControlled, onChange, onClear, t]);
|
}, [isControlled, onChange, onClear]);
|
||||||
|
|
||||||
const handleAction = useCallback(
|
const handleAction = useCallback(
|
||||||
(action: ToolbarAction) => {
|
(action: ToolbarAction) => {
|
||||||
@@ -272,18 +270,13 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
|
|||||||
{/* 右侧系统按钮组 */}
|
{/* 右侧系统按钮组 */}
|
||||||
<div className="flex items-center gap-1.5 ml-auto shrink-0">
|
<div className="flex items-center gap-1.5 ml-auto shrink-0">
|
||||||
{allowCopy && value && (
|
{allowCopy && value && (
|
||||||
<CopyButton
|
<CopyButton text={value} tooltip={'复制内容'} size="sm" className="h-7 w-7 p-1" />
|
||||||
text={value}
|
|
||||||
tooltip={t('textInputArea.copyContent')}
|
|
||||||
size="sm"
|
|
||||||
className="h-7 w-7 p-1"
|
|
||||||
/>
|
|
||||||
)}
|
)}
|
||||||
{showClear && value && !disabled && !readOnly && (
|
{showClear && value && !disabled && !readOnly && (
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={handleClear}
|
onClick={handleClear}
|
||||||
aria-label={t('textInputArea.clear')}
|
aria-label={'清空'}
|
||||||
className="p-1 h-7 w-7 flex items-center justify-center rounded-md text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
className="p-1 h-7 w-7 flex items-center justify-center rounded-md text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||||
>
|
>
|
||||||
<X className="h-4 w-4" />
|
<X className="h-4 w-4" />
|
||||||
|
|||||||
+23
-21
@@ -5,7 +5,6 @@ import { useThemeMode } from '@/providers/ThemeModeProvider';
|
|||||||
import { FeatureConfig, FEATURES } from '@/config/features';
|
import { FeatureConfig, FEATURES } from '@/config/features';
|
||||||
import { storageUtil } from '@/utils/chromeStorage';
|
import { storageUtil } from '@/utils/chromeStorage';
|
||||||
import { openExtensionPage } from '@/utils/chromeTabs';
|
import { openExtensionPage } from '@/utils/chromeTabs';
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
const SEARCH_HISTORY_LIMIT = 10;
|
const SEARCH_HISTORY_LIMIT = 10;
|
||||||
@@ -14,7 +13,6 @@ const SEARCH_HISTORY_DISPLAY = 5;
|
|||||||
export default function TopBar() {
|
export default function TopBar() {
|
||||||
const { currentPage, goBack, navigateTo } = useRouter();
|
const { currentPage, goBack, navigateTo } = useRouter();
|
||||||
const { mode, setMode } = useThemeMode();
|
const { mode, setMode } = useThemeMode();
|
||||||
const { t } = useI18n(['common', 'features']);
|
|
||||||
|
|
||||||
const [searchQuery, setSearchQuery] = useState('');
|
const [searchQuery, setSearchQuery] = useState('');
|
||||||
const [showResults, setShowResults] = useState(false);
|
const [showResults, setShowResults] = useState(false);
|
||||||
@@ -66,12 +64,9 @@ export default function TopBar() {
|
|||||||
if (!query) return [];
|
if (!query) return [];
|
||||||
return FEATURES.filter((f) => {
|
return FEATURES.filter((f) => {
|
||||||
if (f.key === 'dashboard') return false;
|
if (f.key === 'dashboard') return false;
|
||||||
return (
|
return f.label.toLowerCase().includes(query) || f.description.toLowerCase().includes(query);
|
||||||
t(f.labelKey).toLowerCase().includes(query) ||
|
|
||||||
t(f.descriptionKey).toLowerCase().includes(query)
|
|
||||||
);
|
|
||||||
});
|
});
|
||||||
}, [searchQuery, t]);
|
}, [searchQuery]);
|
||||||
|
|
||||||
const displayedHistory = useMemo(() => {
|
const displayedHistory = useMemo(() => {
|
||||||
if (searchQuery.trim()) return [];
|
if (searchQuery.trim()) return [];
|
||||||
@@ -144,7 +139,7 @@ export default function TopBar() {
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={goBack}
|
onClick={goBack}
|
||||||
aria-label={t('common_buttons_back')}
|
aria-label={'返回'}
|
||||||
className="flex h-8 w-8 items-center justify-center rounded-md border border-input bg-background text-muted-foreground shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground"
|
className="flex h-8 w-8 items-center justify-center rounded-md border border-input bg-background text-muted-foreground shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground"
|
||||||
>
|
>
|
||||||
<ArrowLeft className="h-4 w-4" />
|
<ArrowLeft className="h-4 w-4" />
|
||||||
@@ -159,7 +154,7 @@ export default function TopBar() {
|
|||||||
<input
|
<input
|
||||||
ref={inputRef}
|
ref={inputRef}
|
||||||
type="text"
|
type="text"
|
||||||
placeholder={t('common_buttons_search')}
|
placeholder={'搜索工具...'}
|
||||||
value={searchQuery}
|
value={searchQuery}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
setSearchQuery(e.target.value);
|
setSearchQuery(e.target.value);
|
||||||
@@ -168,7 +163,7 @@ export default function TopBar() {
|
|||||||
}}
|
}}
|
||||||
onFocus={() => setShowResults(true)}
|
onFocus={() => setShowResults(true)}
|
||||||
onKeyDown={handleKeyDown}
|
onKeyDown={handleKeyDown}
|
||||||
aria-label={t('common_buttons_search')}
|
aria-label={'搜索工具...'}
|
||||||
className="w-full h-9 pl-9 pr-16 text-sm rounded-lg border border-border/60 bg-muted/40 transition-all placeholder:text-muted-foreground/50 focus:bg-background focus:outline-none focus:ring-1 focus:ring-ring focus:border-input"
|
className="w-full h-9 pl-9 pr-16 text-sm rounded-lg border border-border/60 bg-muted/40 transition-all placeholder:text-muted-foreground/50 focus:bg-background focus:outline-none focus:ring-1 focus:ring-ring focus:border-input"
|
||||||
/>
|
/>
|
||||||
{!searchQuery && (
|
{!searchQuery && (
|
||||||
@@ -183,7 +178,7 @@ export default function TopBar() {
|
|||||||
setSearchQuery('');
|
setSearchQuery('');
|
||||||
setSelectedIndex(-1);
|
setSelectedIndex(-1);
|
||||||
}}
|
}}
|
||||||
aria-label={t('common:buttons.clearSearch')}
|
aria-label={'清除搜索'}
|
||||||
className="absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded-md text-muted-foreground hover:text-foreground transition-colors"
|
className="absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded-md text-muted-foreground hover:text-foreground transition-colors"
|
||||||
>
|
>
|
||||||
<X className="h-3 w-3" />
|
<X className="h-3 w-3" />
|
||||||
@@ -219,24 +214,22 @@ export default function TopBar() {
|
|||||||
{feature.icon && <feature.icon className="h-4 w-4" />}
|
{feature.icon && <feature.icon className="h-4 w-4" />}
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-1 min-w-0">
|
<div className="flex-1 min-w-0">
|
||||||
<p className="font-medium text-foreground truncate">
|
<p className="font-medium text-foreground truncate">{feature.label}</p>
|
||||||
{t(feature.labelKey)}
|
|
||||||
</p>
|
|
||||||
<p className="text-xs text-muted-foreground truncate mt-0.5">
|
<p className="text-xs text-muted-foreground truncate mt-0.5">
|
||||||
{t(feature.descriptionKey)}
|
{feature.description}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
))
|
))
|
||||||
) : (
|
) : (
|
||||||
<li className="px-4 py-6 text-center text-sm text-muted-foreground">
|
<li className="px-4 py-6 text-center text-sm text-muted-foreground">
|
||||||
{t('common:buttons.noResults')}
|
{'未找到相关工具'}
|
||||||
</li>
|
</li>
|
||||||
)
|
)
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<div className="px-3 py-1.5 text-[11px] font-semibold tracking-wider text-muted-foreground/60 uppercase">
|
<div className="px-3 py-1.5 text-[11px] font-semibold tracking-wider text-muted-foreground/60 uppercase">
|
||||||
{t('common:buttons.recentSearch')}
|
{'最近搜索'}
|
||||||
</div>
|
</div>
|
||||||
{displayedHistory.map((item, index) => (
|
{displayedHistory.map((item, index) => (
|
||||||
<li
|
<li
|
||||||
@@ -261,10 +254,10 @@ export default function TopBar() {
|
|||||||
</div>
|
</div>
|
||||||
<div className="flex-1 min-w-0">
|
<div className="flex-1 min-w-0">
|
||||||
<p className="font-medium text-foreground truncate">
|
<p className="font-medium text-foreground truncate">
|
||||||
{item.feature && t(item.feature.labelKey)}
|
{item.feature?.label}
|
||||||
</p>
|
</p>
|
||||||
<p className="text-xs text-muted-foreground truncate mt-0.5">
|
<p className="text-xs text-muted-foreground truncate mt-0.5">
|
||||||
{item.feature && t(item.feature.descriptionKey)}
|
{item.feature?.description}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
@@ -278,10 +271,19 @@ export default function TopBar() {
|
|||||||
|
|
||||||
{/* 右侧:操作区 */}
|
{/* 右侧:操作区 */}
|
||||||
<div className="flex items-center gap-1 shrink-0">
|
<div className="flex items-center gap-1 shrink-0">
|
||||||
<IconButton onClick={cycleThemeMode} title={t(`common:buttons.themeMode.${mode}`)}>
|
<IconButton
|
||||||
|
onClick={cycleThemeMode}
|
||||||
|
title={
|
||||||
|
mode === 'light'
|
||||||
|
? '切换到深色模式'
|
||||||
|
: mode === 'dark'
|
||||||
|
? '切换到系统模式'
|
||||||
|
: '切换到浅色模式'
|
||||||
|
}
|
||||||
|
>
|
||||||
<ThemeIcon className="h-4 w-4" />
|
<ThemeIcon className="h-4 w-4" />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
<IconButton onClick={handleOpenInTab} title={t('common:buttons.openInTab')}>
|
<IconButton onClick={handleOpenInTab} title={'在标签页打开'}>
|
||||||
<ExternalLink className="h-4 w-4" />
|
<ExternalLink className="h-4 w-4" />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||||
import { fireEvent, render, screen } from '@testing-library/react';
|
import { fireEvent, render, screen } from '@testing-library/react';
|
||||||
import { StorageCleanerConfirm } from '@/pages/StorageCleaner/StorageCleanerConfirm';
|
import { StorageCleanerConfirm } from '@/pages/StorageCleaner/components/StorageCleanerConfirm';
|
||||||
import type { StorageCleanerOptions } from '@/types/storage';
|
import type { StorageCleanerOptions } from '@/types/storage';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
|
|||||||
@@ -18,12 +18,12 @@ describe('TextInputArea 组件', () => {
|
|||||||
|
|
||||||
it('默认显示清空按钮', () => {
|
it('默认显示清空按钮', () => {
|
||||||
render(<TextInputArea value="有内容" onChange={() => {}} />);
|
render(<TextInputArea value="有内容" onChange={() => {}} />);
|
||||||
expect(screen.getByRole('button', { name: 'textInputArea.clear' })).toBeInTheDocument();
|
expect(screen.getByRole('button', { name: '清空' })).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('无内容时清空按钮应隐藏', () => {
|
it('无内容时清空按钮应隐藏', () => {
|
||||||
render(<TextInputArea value="" onChange={() => {}} />);
|
render(<TextInputArea value="" onChange={() => {}} />);
|
||||||
expect(screen.queryByRole('button', { name: 'textInputArea.clear' })).not.toBeInTheDocument();
|
expect(screen.queryByRole('button', { name: '清空' })).not.toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('disabled 时清空按钮应隐藏', () => {
|
it('disabled 时清空按钮应隐藏', () => {
|
||||||
@@ -57,7 +57,7 @@ describe('TextInputArea 组件', () => {
|
|||||||
const handleChange = vi.fn();
|
const handleChange = vi.fn();
|
||||||
render(<TextInputArea value="内容" onChange={handleChange} />);
|
render(<TextInputArea value="内容" onChange={handleChange} />);
|
||||||
|
|
||||||
fireEvent.click(screen.getByRole('button', { name: 'textInputArea.clear' }));
|
fireEvent.click(screen.getByRole('button', { name: '清空' }));
|
||||||
|
|
||||||
expect(handleChange).toHaveBeenCalledWith('');
|
expect(handleChange).toHaveBeenCalledWith('');
|
||||||
});
|
});
|
||||||
@@ -81,7 +81,7 @@ describe('TextInputArea 组件', () => {
|
|||||||
it('清空按钮应清空内容', () => {
|
it('清空按钮应清空内容', () => {
|
||||||
render(<TextInputArea defaultValue="内容" />);
|
render(<TextInputArea defaultValue="内容" />);
|
||||||
|
|
||||||
fireEvent.click(screen.getByRole('button', { name: 'textInputArea.clear' }));
|
fireEvent.click(screen.getByRole('button', { name: '清空' }));
|
||||||
|
|
||||||
expect(screen.getByRole('textbox')).toHaveValue('');
|
expect(screen.getByRole('textbox')).toHaveValue('');
|
||||||
});
|
});
|
||||||
@@ -90,14 +90,12 @@ describe('TextInputArea 组件', () => {
|
|||||||
describe('allowCopy 复制功能', () => {
|
describe('allowCopy 复制功能', () => {
|
||||||
it('allowCopy 且有内容时显示复制按钮', () => {
|
it('allowCopy 且有内容时显示复制按钮', () => {
|
||||||
render(<TextInputArea value="可复制的内容" onChange={() => {}} allowCopy />);
|
render(<TextInputArea value="可复制的内容" onChange={() => {}} allowCopy />);
|
||||||
expect(screen.getByRole('button', { name: 'textInputArea.copyContent' })).toBeInTheDocument();
|
expect(screen.getByRole('button', { name: '复制内容' })).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('allowCopy 但无内容时隐藏复制按钮', () => {
|
it('allowCopy 但无内容时隐藏复制按钮', () => {
|
||||||
render(<TextInputArea value="" onChange={() => {}} allowCopy />);
|
render(<TextInputArea value="" onChange={() => {}} allowCopy />);
|
||||||
expect(
|
expect(screen.queryByRole('button', { name: '复制内容' })).not.toBeInTheDocument();
|
||||||
screen.queryByRole('button', { name: 'textInputArea.copyContent' }),
|
|
||||||
).not.toBeInTheDocument();
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('allowCopy=false 时不显示复制按钮', () => {
|
it('allowCopy=false 时不显示复制按钮', () => {
|
||||||
@@ -113,7 +111,7 @@ describe('TextInputArea 组件', () => {
|
|||||||
|
|
||||||
render(<TextInputArea value="测试" onChange={() => {}} allowCopy />);
|
render(<TextInputArea value="测试" onChange={() => {}} allowCopy />);
|
||||||
|
|
||||||
await user.click(screen.getByRole('button', { name: 'textInputArea.copyContent' }));
|
await user.click(screen.getByRole('button', { name: '复制内容' }));
|
||||||
|
|
||||||
expect(writeTextSpy).toHaveBeenCalledWith('测试');
|
expect(writeTextSpy).toHaveBeenCalledWith('测试');
|
||||||
});
|
});
|
||||||
@@ -126,7 +124,7 @@ describe('TextInputArea 组件', () => {
|
|||||||
|
|
||||||
render(<TextInputArea value="测试" onChange={() => {}} allowCopy />);
|
render(<TextInputArea value="测试" onChange={() => {}} allowCopy />);
|
||||||
|
|
||||||
await user.click(screen.getByRole('button', { name: 'textInputArea.copyContent' }));
|
await user.click(screen.getByRole('button', { name: '复制内容' }));
|
||||||
|
|
||||||
expect(writeTextSpy).toHaveBeenCalledWith('测试');
|
expect(writeTextSpy).toHaveBeenCalledWith('测试');
|
||||||
});
|
});
|
||||||
@@ -158,6 +156,7 @@ describe('TextInputArea 组件', () => {
|
|||||||
fireEvent.change(textarea, { target: { value: '123456' } });
|
fireEvent.change(textarea, { target: { value: '123456' } });
|
||||||
|
|
||||||
expect(handleChange).not.toHaveBeenCalledWith('123456');
|
expect(handleChange).not.toHaveBeenCalledWith('123456');
|
||||||
|
expect(screen.getByText('内容不能超过 5 个字符')).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('未超出 maxLength 的输入应正常触发', () => {
|
it('未超出 maxLength 的输入应正常触发', () => {
|
||||||
@@ -370,7 +369,7 @@ describe('TextInputArea 组件', () => {
|
|||||||
const writeTextSpy = vi.spyOn(navigator.clipboard, 'writeText').mockResolvedValue(undefined);
|
const writeTextSpy = vi.spyOn(navigator.clipboard, 'writeText').mockResolvedValue(undefined);
|
||||||
|
|
||||||
render(<TextInputArea value="测试" onChange={() => {}} allowCopy />);
|
render(<TextInputArea value="测试" onChange={() => {}} allowCopy />);
|
||||||
await user.click(screen.getByRole('button', { name: 'textInputArea.copyContent' }));
|
await user.click(screen.getByRole('button', { name: '复制内容' }));
|
||||||
|
|
||||||
expect(writeTextSpy).toHaveBeenCalledWith('测试');
|
expect(writeTextSpy).toHaveBeenCalledWith('测试');
|
||||||
});
|
});
|
||||||
@@ -381,7 +380,7 @@ describe('TextInputArea 组件', () => {
|
|||||||
const handleClear = vi.fn();
|
const handleClear = vi.fn();
|
||||||
render(<TextInputArea value="内容" onChange={() => {}} onClear={handleClear} />);
|
render(<TextInputArea value="内容" onChange={() => {}} onClear={handleClear} />);
|
||||||
|
|
||||||
fireEvent.click(screen.getByRole('button', { name: 'textInputArea.clear' }));
|
fireEvent.click(screen.getByRole('button', { name: '清空' }));
|
||||||
|
|
||||||
expect(handleClear).toHaveBeenCalledOnce();
|
expect(handleClear).toHaveBeenCalledOnce();
|
||||||
});
|
});
|
||||||
@@ -389,7 +388,7 @@ describe('TextInputArea 组件', () => {
|
|||||||
it('不传 onClear 时清空按钮应正常工作', () => {
|
it('不传 onClear 时清空按钮应正常工作', () => {
|
||||||
render(<TextInputArea defaultValue="内容" />);
|
render(<TextInputArea defaultValue="内容" />);
|
||||||
|
|
||||||
fireEvent.click(screen.getByRole('button', { name: 'textInputArea.clear' }));
|
fireEvent.click(screen.getByRole('button', { name: '清空' }));
|
||||||
|
|
||||||
expect(screen.getByRole('textbox')).toHaveValue('');
|
expect(screen.getByRole('textbox')).toHaveValue('');
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -16,13 +16,13 @@ describe('features', () => {
|
|||||||
it('should have all required properties for each feature', () => {
|
it('should have all required properties for each feature', () => {
|
||||||
FEATURES.forEach((feature) => {
|
FEATURES.forEach((feature) => {
|
||||||
expect(feature).toHaveProperty('key');
|
expect(feature).toHaveProperty('key');
|
||||||
expect(feature).toHaveProperty('labelKey');
|
expect(feature).toHaveProperty('label');
|
||||||
expect(feature).toHaveProperty('descriptionKey');
|
expect(feature).toHaveProperty('description');
|
||||||
expect(feature).toHaveProperty('defaultVisible');
|
expect(feature).toHaveProperty('defaultVisible');
|
||||||
expect(feature).toHaveProperty('components');
|
expect(feature).toHaveProperty('components');
|
||||||
expect(typeof feature.key).toBe('string');
|
expect(typeof feature.key).toBe('string');
|
||||||
expect(typeof feature.labelKey).toBe('string');
|
expect(typeof feature.label).toBe('string');
|
||||||
expect(typeof feature.descriptionKey).toBe('string');
|
expect(typeof feature.description).toBe('string');
|
||||||
expect(typeof feature.defaultVisible).toBe('boolean');
|
expect(typeof feature.defaultVisible).toBe('boolean');
|
||||||
expect(typeof feature.components).toBe('object');
|
expect(typeof feature.components).toBe('object');
|
||||||
expect(feature.components).toHaveProperty('popup');
|
expect(feature.components).toHaveProperty('popup');
|
||||||
@@ -50,14 +50,14 @@ describe('features', () => {
|
|||||||
const feature = getFeatureByKey('dashboard');
|
const feature = getFeatureByKey('dashboard');
|
||||||
expect(feature).toBeDefined();
|
expect(feature).toBeDefined();
|
||||||
expect(feature?.key).toBe('dashboard');
|
expect(feature?.key).toBe('dashboard');
|
||||||
expect(feature?.labelKey).toBe('dashboard_title');
|
expect(feature?.label).toBe('仪表盘');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should return timestamp feature', () => {
|
it('should return timestamp feature', () => {
|
||||||
const feature = getFeatureByKey('timestamp');
|
const feature = getFeatureByKey('timestamp');
|
||||||
expect(feature).toBeDefined();
|
expect(feature).toBeDefined();
|
||||||
expect(feature?.key).toBe('timestamp');
|
expect(feature?.key).toBe('timestamp');
|
||||||
expect(feature?.labelKey).toBe('timestamp_title');
|
expect(feature?.label).toBe('时间戳');
|
||||||
expect(feature?.themeColorKey).toBeDefined();
|
expect(feature?.themeColorKey).toBeDefined();
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -65,7 +65,7 @@ describe('features', () => {
|
|||||||
const feature = getFeatureByKey('storageCleaner');
|
const feature = getFeatureByKey('storageCleaner');
|
||||||
expect(feature).toBeDefined();
|
expect(feature).toBeDefined();
|
||||||
expect(feature?.key).toBe('storageCleaner');
|
expect(feature?.key).toBe('storageCleaner');
|
||||||
expect(feature?.labelKey).toBe('storageCleaner_title');
|
expect(feature?.label).toBe('存储清理');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should return undefined for invalid key', () => {
|
it('should return undefined for invalid key', () => {
|
||||||
|
|||||||
+22
-22
@@ -29,8 +29,8 @@ const TestDataGeneratorPage = lazy(() => import('@/pages/TestDataGenerator'));
|
|||||||
|
|
||||||
export interface FeatureConfig {
|
export interface FeatureConfig {
|
||||||
key: PageType;
|
key: PageType;
|
||||||
labelKey: string;
|
label: string;
|
||||||
descriptionKey: string;
|
description: string;
|
||||||
themeColorKey?: PaletteColorKey;
|
themeColorKey?: PaletteColorKey;
|
||||||
icon?: ComponentType<LucideProps>;
|
icon?: ComponentType<LucideProps>;
|
||||||
defaultVisible: boolean;
|
defaultVisible: boolean;
|
||||||
@@ -44,8 +44,8 @@ export interface FeatureConfig {
|
|||||||
export const FEATURES: FeatureConfig[] = [
|
export const FEATURES: FeatureConfig[] = [
|
||||||
{
|
{
|
||||||
key: 'dashboard',
|
key: 'dashboard',
|
||||||
labelKey: 'dashboard_title',
|
label: '仪表盘',
|
||||||
descriptionKey: '',
|
description: '',
|
||||||
defaultVisible: true,
|
defaultVisible: true,
|
||||||
components: {
|
components: {
|
||||||
popup: DashboardPage,
|
popup: DashboardPage,
|
||||||
@@ -55,8 +55,8 @@ export const FEATURES: FeatureConfig[] = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'timestamp',
|
key: 'timestamp',
|
||||||
labelKey: 'timestamp_title',
|
label: '时间戳',
|
||||||
descriptionKey: 'timestamp_description',
|
description: 'Unix 毫秒数转换与格式化',
|
||||||
themeColorKey: 'primary',
|
themeColorKey: 'primary',
|
||||||
icon: Clock,
|
icon: Clock,
|
||||||
defaultVisible: true,
|
defaultVisible: true,
|
||||||
@@ -68,8 +68,8 @@ export const FEATURES: FeatureConfig[] = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'storageCleaner',
|
key: 'storageCleaner',
|
||||||
labelKey: 'storageCleaner_title',
|
label: '存储清理',
|
||||||
descriptionKey: 'storageCleaner_description',
|
description: '清理缓存、Cookies 及本地存储',
|
||||||
themeColorKey: 'warning',
|
themeColorKey: 'warning',
|
||||||
icon: Database,
|
icon: Database,
|
||||||
defaultVisible: true,
|
defaultVisible: true,
|
||||||
@@ -81,8 +81,8 @@ export const FEATURES: FeatureConfig[] = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'qrCode',
|
key: 'qrCode',
|
||||||
labelKey: 'qrCode_title',
|
label: '二维码工具',
|
||||||
descriptionKey: 'qrCode_description',
|
description: '生成当前选中的 URL 的二维码',
|
||||||
themeColorKey: 'success',
|
themeColorKey: 'success',
|
||||||
icon: QrCode,
|
icon: QrCode,
|
||||||
defaultVisible: true,
|
defaultVisible: true,
|
||||||
@@ -94,8 +94,8 @@ export const FEATURES: FeatureConfig[] = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'textStatistics',
|
key: 'textStatistics',
|
||||||
labelKey: 'textStatistics_title',
|
label: '文本统计',
|
||||||
descriptionKey: 'textStatistics_description',
|
description: '实时分析文本字符、单词及字节',
|
||||||
themeColorKey: 'secondary',
|
themeColorKey: 'secondary',
|
||||||
icon: FileText,
|
icon: FileText,
|
||||||
defaultVisible: true,
|
defaultVisible: true,
|
||||||
@@ -107,8 +107,8 @@ export const FEATURES: FeatureConfig[] = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'jwt',
|
key: 'jwt',
|
||||||
labelKey: 'jwt_title',
|
label: 'JWT 解析',
|
||||||
descriptionKey: 'jwt_description',
|
description: 'JSON Web Token 解码与查看',
|
||||||
themeColorKey: 'info',
|
themeColorKey: 'info',
|
||||||
icon: Key,
|
icon: Key,
|
||||||
defaultVisible: true,
|
defaultVisible: true,
|
||||||
@@ -120,8 +120,8 @@ export const FEATURES: FeatureConfig[] = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'jsonDiff',
|
key: 'jsonDiff',
|
||||||
labelKey: 'jsonDiff_title',
|
label: 'JSON 工具',
|
||||||
descriptionKey: 'jsonDiff_description',
|
description: '差异比较、格式化、YAML/TOML 转换及压缩',
|
||||||
themeColorKey: 'primary',
|
themeColorKey: 'primary',
|
||||||
icon: GitCompareArrows,
|
icon: GitCompareArrows,
|
||||||
defaultVisible: true,
|
defaultVisible: true,
|
||||||
@@ -133,8 +133,8 @@ export const FEATURES: FeatureConfig[] = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'base64Converter',
|
key: 'base64Converter',
|
||||||
labelKey: 'base64Converter_title',
|
label: 'Base64 转换器',
|
||||||
descriptionKey: 'base64Converter_description',
|
description: '文本、文件与图像的 Base64 编码转换',
|
||||||
themeColorKey: 'info',
|
themeColorKey: 'info',
|
||||||
icon: ArrowLeftRight,
|
icon: ArrowLeftRight,
|
||||||
defaultVisible: true,
|
defaultVisible: true,
|
||||||
@@ -146,8 +146,8 @@ export const FEATURES: FeatureConfig[] = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'rightClickRestorer',
|
key: 'rightClickRestorer',
|
||||||
labelKey: 'rightClickRestorer_title',
|
label: '右键恢复',
|
||||||
descriptionKey: 'rightClickRestorer_description',
|
description: '检测并恢复被网站禁用的浏览器右键菜单',
|
||||||
themeColorKey: 'success',
|
themeColorKey: 'success',
|
||||||
icon: MousePointerClick,
|
icon: MousePointerClick,
|
||||||
defaultVisible: true,
|
defaultVisible: true,
|
||||||
@@ -159,8 +159,8 @@ export const FEATURES: FeatureConfig[] = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'testDataGenerator',
|
key: 'testDataGenerator',
|
||||||
labelKey: 'testDataGenerator_title',
|
label: '测试数据生成器',
|
||||||
descriptionKey: 'testDataGenerator_description',
|
description: '自定义规则批量生成测试数据',
|
||||||
themeColorKey: 'warning',
|
themeColorKey: 'warning',
|
||||||
icon: FileSpreadsheet,
|
icon: FileSpreadsheet,
|
||||||
defaultVisible: true,
|
defaultVisible: true,
|
||||||
|
|||||||
@@ -36,7 +36,7 @@ describe('background 菜单注册与分流', () => {
|
|||||||
expect(chrome.contextMenus.create).toHaveBeenCalledWith(
|
expect(chrome.contextMenus.create).toHaveBeenCalledWith(
|
||||||
expect.objectContaining({
|
expect.objectContaining({
|
||||||
id: 'jwt',
|
id: 'jwt',
|
||||||
title: '🔑 解析 JWT',
|
title: '解析 JWT',
|
||||||
parentId: 'testing-tools-parent',
|
parentId: 'testing-tools-parent',
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
@@ -48,7 +48,7 @@ describe('background 菜单注册与分流', () => {
|
|||||||
expect(chrome.contextMenus.create).toHaveBeenCalledWith(
|
expect(chrome.contextMenus.create).toHaveBeenCalledWith(
|
||||||
expect.objectContaining({
|
expect.objectContaining({
|
||||||
id: 'qrCode-page',
|
id: 'qrCode-page',
|
||||||
title: '🔗 网页链接转二维码',
|
title: '网页链接转二维码',
|
||||||
contexts: ['page'],
|
contexts: ['page'],
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,11 +1,10 @@
|
|||||||
import type { ContextMenuClickedPayload } from '@/utils/messages';
|
import type { ContextMenuClickedPayload } from '@/utils/messages';
|
||||||
import { MessageAction, onMessage } from '@/utils/messages';
|
import { MessageAction, onMessage } from '@/utils/messages';
|
||||||
import { getTextStats } from '@/utils/textStatistics';
|
import { getTextStats } from '@/utils/textStatistics';
|
||||||
import { getMessage } from '@/utils/chromeI18n';
|
|
||||||
import { hidePopover, showTextStatsResult, showTimestampResult } from './uiPopover';
|
import { hidePopover, showTextStatsResult, showTimestampResult } from './uiPopover';
|
||||||
|
|
||||||
function convertTimestamp(input: string): string {
|
function convertTimestamp(input: string): string {
|
||||||
const invalidText = getMessage('invalidTimestamp') || 'Invalid Timestamp';
|
const invalidText = '无效时间戳';
|
||||||
const num = Number(input.trim());
|
const num = Number(input.trim());
|
||||||
|
|
||||||
if (isNaN(num)) {
|
if (isNaN(num)) {
|
||||||
|
|||||||
@@ -1,162 +0,0 @@
|
|||||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
|
||||||
import TextInputArea from '@/components/TextInputArea';
|
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
import { CopyButton } from '@/components/CopyButton';
|
|
||||||
import { base64ToText, textToBase64 } from '@/utils/base64Converter';
|
|
||||||
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
|
|
||||||
import { useContextMenuData } from '@/utils/useContextMenuData';
|
|
||||||
import { Button } from '@/components/ui/button';
|
|
||||||
|
|
||||||
const IMAGE_DATA_URI_PATTERN = /^\s*data:image\//i;
|
|
||||||
|
|
||||||
const ERROR_MESSAGE_TO_I18N: Record<string, string> = {
|
|
||||||
'Invalid Base64 string': 'invalidBase64',
|
|
||||||
'Input appears to be binary data (e.g. an image). Please use the Image tab instead.':
|
|
||||||
'binaryDataDetected',
|
|
||||||
};
|
|
||||||
|
|
||||||
interface TextModeProps {
|
|
||||||
onSwitchToImageMode?: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function TextMode({ onSwitchToImageMode }: TextModeProps = {}) {
|
|
||||||
const { t } = useI18n('base64Converter');
|
|
||||||
|
|
||||||
const [input, setInput] = useState('');
|
|
||||||
const [debouncedInput, setDebouncedInput] = useState('');
|
|
||||||
const [direction, setDirection] = useState<'encode' | 'decode'>('encode');
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const handle = setTimeout(() => {
|
|
||||||
setDebouncedInput(input);
|
|
||||||
}, 200);
|
|
||||||
return () => clearTimeout(handle);
|
|
||||||
}, [input]);
|
|
||||||
|
|
||||||
const handleContextMenuData = useCallback((payload: string) => {
|
|
||||||
setInput(payload);
|
|
||||||
setDebouncedInput(payload);
|
|
||||||
setDirection('decode');
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useContextMenuData({ featureKey: 'base64Converter', onData: handleContextMenuData });
|
|
||||||
|
|
||||||
const conversionPipeline = useMemo(() => {
|
|
||||||
const trimmed = debouncedInput.trim();
|
|
||||||
if (!trimmed) return { output: '', error: null };
|
|
||||||
|
|
||||||
try {
|
|
||||||
if (direction === 'encode') {
|
|
||||||
const result = textToBase64(debouncedInput);
|
|
||||||
return { output: result.output, error: null };
|
|
||||||
} else {
|
|
||||||
const decoded = base64ToText(trimmed);
|
|
||||||
return { output: decoded, error: null };
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
const message = e instanceof Error ? e.message : '';
|
|
||||||
const i18nKey = ERROR_MESSAGE_TO_I18N[message];
|
|
||||||
return {
|
|
||||||
output: '',
|
|
||||||
error: i18nKey ? t(i18nKey) : message || t('conversionFailed'),
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}, [debouncedInput, direction, t]);
|
|
||||||
|
|
||||||
const output = conversionPipeline.output;
|
|
||||||
const error = conversionPipeline.error;
|
|
||||||
|
|
||||||
const placeholder =
|
|
||||||
direction === 'encode' ? t('textInputPlaceholder') : t('base64InputPlaceholder');
|
|
||||||
const outputLabel = direction === 'encode' ? t('base64Output') : t('textOutput');
|
|
||||||
|
|
||||||
const showImageHint = useMemo(
|
|
||||||
() => direction === 'decode' && IMAGE_DATA_URI_PATTERN.test(input),
|
|
||||||
[direction, input],
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleDirectionChange = (value: 'encode' | 'decode') => {
|
|
||||||
if (value === direction) return;
|
|
||||||
setDirection(value);
|
|
||||||
setInput('');
|
|
||||||
setDebouncedInput('');
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleClear = () => {
|
|
||||||
setInput('');
|
|
||||||
setDebouncedInput('');
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="w-full flex flex-col space-y-4 px-2">
|
|
||||||
{/* 受控方向切流中枢 */}
|
|
||||||
<div className="flex h-11 items-center px-1.5 bg-secondary/40 rounded-xl border border-border/60 w-fit">
|
|
||||||
<SwitchButtonGroup
|
|
||||||
value={direction}
|
|
||||||
options={[
|
|
||||||
{ value: 'encode', label: t('encode') },
|
|
||||||
{ value: 'decode', label: t('decode') },
|
|
||||||
]}
|
|
||||||
onChange={handleDirectionChange}
|
|
||||||
size="small"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 高性能受控文本输入端 */}
|
|
||||||
<TextInputArea
|
|
||||||
placeholder={placeholder}
|
|
||||||
value={input}
|
|
||||||
onChange={setInput}
|
|
||||||
externalError={error || undefined}
|
|
||||||
showClear={true}
|
|
||||||
allowCopy={true}
|
|
||||||
minRows={5}
|
|
||||||
maxRows={10}
|
|
||||||
onClear={handleClear}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* 图片 URI 类型劫持警告引导区:
|
|
||||||
- 💡 修复点:彻底废除原生亮色硬编码 hover:bg-blue-100 类名,
|
|
||||||
- 完美向全站 shadcn 暗黑生态看齐,采用标准的 bg-primary/10 混合变体。
|
|
||||||
*/}
|
|
||||||
{showImageHint && (
|
|
||||||
<div className="flex items-center justify-between p-3.5 rounded-xl bg-primary/10 border border-primary/20">
|
|
||||||
<span className="text-xs font-semibold text-primary tracking-tight">
|
|
||||||
{t('imageDataUriHint')}
|
|
||||||
</span>
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={onSwitchToImageMode}
|
|
||||||
className="h-7 rounded-md text-xs font-bold text-primary hover:text-primary hover:bg-primary/20 dark:hover:bg-primary/10 px-2.5"
|
|
||||||
>
|
|
||||||
{t('switchToImageMode')}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 5. 编码/解码核心数据承载流卡片 */}
|
|
||||||
{output && (
|
|
||||||
<div className="p-4 rounded-2xl bg-card border border-border shadow-sm flex flex-col space-y-3">
|
|
||||||
<div className="flex justify-between items-center select-none">
|
|
||||||
<span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/90">
|
|
||||||
{outputLabel}
|
|
||||||
</span>
|
|
||||||
<CopyButton
|
|
||||||
text={output}
|
|
||||||
className="h-6 px-2 rounded-md border text-[10px] font-bold"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<TextInputArea
|
|
||||||
readOnly
|
|
||||||
value={output.length > 2000 ? `${output.substring(0, 2000)}...` : output}
|
|
||||||
showClear={false}
|
|
||||||
minRows={4}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
+2
-2
@@ -1,6 +1,6 @@
|
|||||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||||
import { fireEvent, render, screen } from '@testing-library/react';
|
import { fireEvent, render, screen } from '@testing-library/react';
|
||||||
import DecodeResultPaper from '@/components/DecodeResultPaper';
|
import DecodeResultPaper from '../components/DecodeResultPaper';
|
||||||
|
|
||||||
describe('DecodeResultPaper 组件', () => {
|
describe('DecodeResultPaper 组件', () => {
|
||||||
const defaultProps = {
|
const defaultProps = {
|
||||||
@@ -27,7 +27,7 @@ describe('DecodeResultPaper 组件', () => {
|
|||||||
expect(screen.getByText(/image\/png/)).toBeInTheDocument();
|
expect(screen.getByText(/image\/png/)).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('应通过 formatFileSize 渲染文件大小', () => {
|
it('应通过 formatBytes 渲染文件大小', () => {
|
||||||
render(<DecodeResultPaper {...{ ...defaultProps, blobSize: 1536 }} />);
|
render(<DecodeResultPaper {...{ ...defaultProps, blobSize: 1536 }} />);
|
||||||
expect(screen.getByText(/1\.5 KB/)).toBeInTheDocument();
|
expect(screen.getByText(/1\.5 KB/)).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
|
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
|
||||||
import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
|
import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
|
||||||
import TextMode from '../TextMode';
|
import TextMode from '../components/TextMode';
|
||||||
|
|
||||||
// Mock CopyButton
|
// Mock CopyButton
|
||||||
vi.mock('@/components/CopyButton', () => ({
|
vi.mock('@/components/CopyButton', () => ({
|
||||||
@@ -76,7 +76,7 @@ describe('TextMode', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
await waitFor(() => {
|
await waitFor(() => {
|
||||||
expect(screen.getByText('Base64 字符串无效')).toBeInTheDocument();
|
expect(screen.getByText('无效的 Base64 字符串')).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -118,7 +118,7 @@ describe('TextMode', () => {
|
|||||||
expect(screen.getByRole('button', { name: 'SGVsbG8=' })).toBeInTheDocument();
|
expect(screen.getByRole('button', { name: 'SGVsbG8=' })).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
fireEvent.click(screen.getByRole('button', { name: 'textInputArea.clear' }));
|
fireEvent.click(screen.getByRole('button', { name: '清空' }));
|
||||||
|
|
||||||
await waitFor(() => {
|
await waitFor(() => {
|
||||||
expect(screen.queryByRole('button', { name: 'SGVsbG8=' })).not.toBeInTheDocument();
|
expect(screen.queryByRole('button', { name: 'SGVsbG8=' })).not.toBeInTheDocument();
|
||||||
@@ -182,9 +182,7 @@ describe('TextMode', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
await waitFor(() => {
|
await waitFor(() => {
|
||||||
expect(
|
expect(screen.getByText('检测到二进制数据(如图像),请使用图像选项卡')).toBeInTheDocument();
|
||||||
screen.getByText('输入似乎是二进制数据(如图片)。请切换到「图像」选项卡。'),
|
|
||||||
).toBeInTheDocument();
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -12,7 +12,7 @@ vi.mock('@/config/features', async (importOriginal) => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
// Mock 子组件
|
// Mock 子组件
|
||||||
vi.mock('../TextMode', () => ({
|
vi.mock('../components/TextMode', () => ({
|
||||||
default: ({ onSwitchToImageMode }: { onSwitchToImageMode?: () => void }) => (
|
default: ({ onSwitchToImageMode }: { onSwitchToImageMode?: () => void }) => (
|
||||||
<div data-testid="text-mode">
|
<div data-testid="text-mode">
|
||||||
TextMode
|
TextMode
|
||||||
@@ -21,7 +21,7 @@ vi.mock('../TextMode', () => ({
|
|||||||
),
|
),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
vi.mock('../Base64ConverterSection', () => ({
|
vi.mock('../components/Base64ConverterSection', () => ({
|
||||||
default: ({ mode }: { mode: string }) => <div data-testid={`${mode}-mode`}>{mode}</div>,
|
default: ({ mode }: { mode: string }) => <div data-testid={`${mode}-mode`}>{mode}</div>,
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
|||||||
+21
-24
@@ -1,14 +1,14 @@
|
|||||||
import { Image as ImageIcon, Trash2, Upload } from 'lucide-react';
|
import { Image as ImageIcon, Trash2, Upload } from 'lucide-react';
|
||||||
import TextInputArea from '@/components/TextInputArea';
|
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 DecodeResultPaper from './DecodeResultPaper';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { downloadBlob, formatFileSize } from '@/utils/base64Converter';
|
import { downloadBlob } from '@/utils/base64Converter';
|
||||||
|
import { formatBytes } from '@/utils/format';
|
||||||
import { useStorageState } from '@/utils/useStorageState';
|
import { useStorageState } from '@/utils/useStorageState';
|
||||||
import type { Base64ConvertDirection } from '@/types/storage';
|
import type { Base64ConvertDirection } from '@/types/storage';
|
||||||
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
|
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
|
||||||
import { useBase64Converter } from './useBase64Converter';
|
import { useBase64Converter } from '../useBase64Converter';
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
const isValidDirection = (val: unknown): val is Base64ConvertDirection =>
|
const isValidDirection = (val: unknown): val is Base64ConvertDirection =>
|
||||||
@@ -19,8 +19,6 @@ interface Base64ConverterSectionProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default function Base64ConverterSection({ mode }: Base64ConverterSectionProps) {
|
export default function Base64ConverterSection({ mode }: Base64ConverterSectionProps) {
|
||||||
const { t } = useI18n('base64Converter');
|
|
||||||
|
|
||||||
const [direction, setDirection] = useStorageState(
|
const [direction, setDirection] = useStorageState(
|
||||||
`base64Converter/${mode}Mode/direction`,
|
`base64Converter/${mode}Mode/direction`,
|
||||||
'encode',
|
'encode',
|
||||||
@@ -43,7 +41,6 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
|
|||||||
setCustomFileName,
|
setCustomFileName,
|
||||||
resetAll,
|
resetAll,
|
||||||
safeFileSelect,
|
safeFileSelect,
|
||||||
maxFileSizeStr,
|
|
||||||
} = useBase64Converter({ mode });
|
} = useBase64Converter({ mode });
|
||||||
|
|
||||||
const handleDirectionChange = (next: Base64ConvertDirection) => {
|
const handleDirectionChange = (next: Base64ConvertDirection) => {
|
||||||
@@ -62,8 +59,8 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
|
|||||||
<SwitchButtonGroup
|
<SwitchButtonGroup
|
||||||
value={direction}
|
value={direction}
|
||||||
options={[
|
options={[
|
||||||
{ value: 'encode', label: t('encode') },
|
{ value: 'encode', label: '编码' },
|
||||||
{ value: 'decode', label: t('decode') },
|
{ value: 'decode', label: '解码' },
|
||||||
]}
|
]}
|
||||||
onChange={handleDirectionChange}
|
onChange={handleDirectionChange}
|
||||||
size="small"
|
size="small"
|
||||||
@@ -122,10 +119,10 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
|
|||||||
{info.name}
|
{info.name}
|
||||||
</span>
|
</span>
|
||||||
<span className="text-xs text-muted-foreground/80 font-mono tabular-nums">
|
<span className="text-xs text-muted-foreground/80 font-mono tabular-nums">
|
||||||
{formatFileSize(info.size)} · {info.type}
|
{formatBytes(info.size)} · {info.type}
|
||||||
</span>
|
</span>
|
||||||
<span className="text-[11px] font-medium text-primary/80 mt-1">
|
<span className="text-[11px] font-medium text-primary/80 mt-1">
|
||||||
{t('clickOrDropToReplace')}
|
{'点击或拖拽以替换文件'}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
@@ -136,14 +133,14 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
|
|||||||
<Upload className="w-8 h-8 text-muted-foreground/60" />
|
<Upload className="w-8 h-8 text-muted-foreground/60" />
|
||||||
)}
|
)}
|
||||||
<span className="text-xs font-bold text-foreground/80">
|
<span className="text-xs font-bold text-foreground/80">
|
||||||
{mode === 'image' ? t('clickOrDropToImage') : t('clickOrDropToFile')}
|
{mode === 'image' ? '点击或拖拽图像到此处' : '点击或拖拽文件到此处'}
|
||||||
</span>
|
</span>
|
||||||
<span className="text-[10px] font-medium text-muted-foreground/60">
|
<span className="text-[10px] font-medium text-muted-foreground/60">
|
||||||
{t('maxFileSize', { max: maxFileSizeStr })}
|
{'最大文件大小:{{max}}'}
|
||||||
</span>
|
</span>
|
||||||
{mode === 'image' && (
|
{mode === 'image' && (
|
||||||
<span className="text-[10px] font-medium text-muted-foreground/50">
|
<span className="text-[10px] font-medium text-muted-foreground/50">
|
||||||
{t('supportedFormats')}
|
{'支持 PNG、JPG、WEBP、GIF、BMP、SVG 等格式'}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
@@ -160,17 +157,17 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
|
|||||||
<div className="p-4 rounded-2xl bg-card border border-border shadow-sm flex flex-col space-y-3">
|
<div className="p-4 rounded-2xl bg-card border border-border shadow-sm flex flex-col space-y-3">
|
||||||
<div className="flex justify-between items-center select-none">
|
<div className="flex justify-between items-center select-none">
|
||||||
<span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/90">
|
<span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/90">
|
||||||
{t('base64Output')}
|
{'Base64 编码结果'}
|
||||||
</span>
|
</span>
|
||||||
<div className="flex gap-2">
|
<div className="flex gap-2">
|
||||||
<CopyButton
|
<CopyButton
|
||||||
text={result.rawBase64}
|
text={result.rawBase64}
|
||||||
tooltip={t('copyRaw')}
|
tooltip={'复制纯 Base64'}
|
||||||
className="h-6 px-2 rounded-md border text-[10px] font-bold"
|
className="h-6 px-2 rounded-md border text-[10px] font-bold"
|
||||||
/>
|
/>
|
||||||
<CopyButton
|
<CopyButton
|
||||||
text={result.output}
|
text={result.output}
|
||||||
tooltip={t('copyDataUri')}
|
tooltip={'复制 Data URI'}
|
||||||
className="h-6 px-2 rounded-md border text-[10px] font-bold"
|
className="h-6 px-2 rounded-md border text-[10px] font-bold"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@@ -188,16 +185,16 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
|
|||||||
<div className="flex items-center justify-between font-mono text-[10px] text-muted-foreground/70 select-none pt-1">
|
<div className="flex items-center justify-between font-mono text-[10px] text-muted-foreground/70 select-none pt-1">
|
||||||
<div className="flex gap-4 items-center tabular-nums">
|
<div className="flex gap-4 items-center tabular-nums">
|
||||||
<span>
|
<span>
|
||||||
{t('originalSize')}:{' '}
|
{'原始大小'}:{' '}
|
||||||
<span className="font-semibold text-foreground/80">
|
<span className="font-semibold text-foreground/80">
|
||||||
{formatFileSize(result.originalBytes)}
|
{formatBytes(result.originalBytes)}
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
<span className="text-border/60">|</span>
|
<span className="text-border/60">|</span>
|
||||||
<span>
|
<span>
|
||||||
{t('encodedSize')}:{' '}
|
{'编码大小'}:{' '}
|
||||||
<span className="font-semibold text-foreground/80">
|
<span className="font-semibold text-foreground/80">
|
||||||
{formatFileSize(result.outputBytes)}
|
{formatBytes(result.outputBytes)}
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -208,7 +205,7 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
|
|||||||
className="h-7 rounded-md text-muted-foreground hover:text-destructive text-[11px] gap-1 px-2"
|
className="h-7 rounded-md text-muted-foreground hover:text-destructive text-[11px] gap-1 px-2"
|
||||||
>
|
>
|
||||||
<Trash2 className="w-3.5 h-3.5" />
|
<Trash2 className="w-3.5 h-3.5" />
|
||||||
{t('clear')}
|
{'清空'}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -217,7 +214,7 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
|
|||||||
) : (
|
) : (
|
||||||
<div className="flex flex-col space-y-4">
|
<div className="flex flex-col space-y-4">
|
||||||
<TextInputArea
|
<TextInputArea
|
||||||
placeholder={t('decodeBase64Placeholder')}
|
placeholder={'输入需要解码的 Base64 或 data URI...'}
|
||||||
value={decodeInput}
|
value={decodeInput}
|
||||||
onChange={setDecodeInput}
|
onChange={setDecodeInput}
|
||||||
externalError={decodeError || undefined}
|
externalError={decodeError || undefined}
|
||||||
@@ -228,7 +225,7 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
|
|||||||
/>
|
/>
|
||||||
{decoded && (
|
{decoded && (
|
||||||
<DecodeResultPaper
|
<DecodeResultPaper
|
||||||
title={mode === 'image' ? t('decodedImageOutput') : t('decodedFileOutput')}
|
title={mode === 'image' ? '解码图像' : '解码文件'}
|
||||||
mimeType={decoded.mimeType}
|
mimeType={decoded.mimeType}
|
||||||
blobSize={decoded.blob.size}
|
blobSize={decoded.blob.size}
|
||||||
fileName={decodedFileName}
|
fileName={decodedFileName}
|
||||||
+10
-16
@@ -9,8 +9,9 @@
|
|||||||
*/
|
*/
|
||||||
import { Download } from 'lucide-react';
|
import { Download } from 'lucide-react';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { formatFileSize } from '@/utils/base64Converter';
|
import { Input } from '@/components/ui/input';
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
import { Label } from '@/components/ui/label';
|
||||||
|
import { formatBytes } from '@/utils/format';
|
||||||
|
|
||||||
interface DecodeResultPaperProps {
|
interface DecodeResultPaperProps {
|
||||||
/** 标题文案,由调用方传入 i18n key 对应的值(如 decodedFileOutput / decodedImageOutput) */
|
/** 标题文案,由调用方传入 i18n key 对应的值(如 decodedFileOutput / decodedImageOutput) */
|
||||||
@@ -38,8 +39,6 @@ export default function DecodeResultPaper({
|
|||||||
onDownload,
|
onDownload,
|
||||||
children,
|
children,
|
||||||
}: DecodeResultPaperProps) {
|
}: DecodeResultPaperProps) {
|
||||||
const { t } = useI18n('base64Converter');
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="p-4 rounded-xl bg-primary/10 border border-primary/30">
|
<div className="p-4 rounded-xl bg-primary/10 border border-primary/30">
|
||||||
{/* 标题 */}
|
{/* 标题 */}
|
||||||
@@ -51,24 +50,19 @@ export default function DecodeResultPaper({
|
|||||||
{/* 文件信息 */}
|
{/* 文件信息 */}
|
||||||
<div className="flex gap-4 mb-3">
|
<div className="flex gap-4 mb-3">
|
||||||
<span className="text-xs text-muted-foreground">
|
<span className="text-xs text-muted-foreground">
|
||||||
{t('inferredMimeType')}: {mimeType}
|
{'推断的 MIME 类型'}: {mimeType}
|
||||||
</span>
|
</span>
|
||||||
<span className="text-xs text-muted-foreground">
|
<span className="text-xs text-muted-foreground">
|
||||||
{t('decodedSize')}: {formatFileSize(blobSize)}
|
{'解码大小'}: {formatBytes(blobSize)}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 文件名输入 */}
|
{/* 文件名输入 */}
|
||||||
<div className="mb-3">
|
<div className="mb-3">
|
||||||
<label className="block text-xs font-medium text-muted-foreground mb-1">
|
<Label className="block text-xs font-medium text-muted-foreground mb-1">
|
||||||
{t('decodedFileName')}
|
{'解码后文件名'}
|
||||||
</label>
|
</Label>
|
||||||
<input
|
<Input value={fileName} onChange={(e) => onFileNameChange(e.target.value)} />
|
||||||
type="text"
|
|
||||||
value={fileName}
|
|
||||||
onChange={(e) => onFileNameChange(e.target.value)}
|
|
||||||
className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 下载按钮 */}
|
{/* 下载按钮 */}
|
||||||
@@ -79,7 +73,7 @@ export default function DecodeResultPaper({
|
|||||||
className="w-full rounded-lg font-bold"
|
className="w-full rounded-lg font-bold"
|
||||||
>
|
>
|
||||||
<Download className="mr-2 h-4 w-4" />
|
<Download className="mr-2 h-4 w-4" />
|
||||||
{t('download')}
|
{'下载'}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@@ -0,0 +1,90 @@
|
|||||||
|
import TextInputArea from '@/components/TextInputArea';
|
||||||
|
import { CopyButton } from '@/components/CopyButton';
|
||||||
|
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { useTextMode } from '../useTextMode';
|
||||||
|
|
||||||
|
interface TextModeProps {
|
||||||
|
onSwitchToImageMode?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function TextMode({ onSwitchToImageMode }: TextModeProps = {}) {
|
||||||
|
const {
|
||||||
|
input,
|
||||||
|
setInput,
|
||||||
|
direction,
|
||||||
|
handleDirectionChange,
|
||||||
|
placeholder,
|
||||||
|
output,
|
||||||
|
outputLabel,
|
||||||
|
error,
|
||||||
|
showImageHint,
|
||||||
|
handleClear,
|
||||||
|
} = useTextMode();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full flex flex-col space-y-4 px-2">
|
||||||
|
<div className="flex h-11 items-center px-1.5 bg-secondary/40 rounded-xl border border-border/60 w-fit">
|
||||||
|
<SwitchButtonGroup
|
||||||
|
value={direction}
|
||||||
|
options={[
|
||||||
|
{ value: 'encode', label: '编码' },
|
||||||
|
{ value: 'decode', label: '解码' },
|
||||||
|
]}
|
||||||
|
onChange={handleDirectionChange}
|
||||||
|
size="small"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<TextInputArea
|
||||||
|
placeholder={placeholder}
|
||||||
|
value={input}
|
||||||
|
onChange={setInput}
|
||||||
|
externalError={error || undefined}
|
||||||
|
showClear={true}
|
||||||
|
allowCopy={true}
|
||||||
|
minRows={5}
|
||||||
|
maxRows={10}
|
||||||
|
onClear={handleClear}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{showImageHint && (
|
||||||
|
<div className="flex items-center justify-between p-3.5 rounded-xl bg-primary/10 border border-primary/20">
|
||||||
|
<span className="text-xs font-semibold text-primary tracking-tight">
|
||||||
|
检测到图片的 data URI,请使用「图像」选项卡进行解码。
|
||||||
|
</span>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={onSwitchToImageMode}
|
||||||
|
className="h-7 rounded-md text-xs font-bold text-primary hover:text-primary hover:bg-primary/20 dark:hover:bg-primary/10 px-2.5"
|
||||||
|
>
|
||||||
|
切换到图像模式
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{output && (
|
||||||
|
<div className="p-4 rounded-2xl bg-card border border-border shadow-sm flex flex-col space-y-3">
|
||||||
|
<div className="flex justify-between items-center select-none">
|
||||||
|
<span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/90">
|
||||||
|
{outputLabel}
|
||||||
|
</span>
|
||||||
|
<CopyButton
|
||||||
|
text={output}
|
||||||
|
className="h-6 px-2 rounded-md border text-[10px] font-bold"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<TextInputArea
|
||||||
|
readOnly
|
||||||
|
value={output.length > 2000 ? `${output.substring(0, 2000)}...` : output}
|
||||||
|
showClear={false}
|
||||||
|
minRows={4}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,8 +1,7 @@
|
|||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
import { useStorageState } from '@/utils/useStorageState';
|
import { useStorageState } from '@/utils/useStorageState';
|
||||||
import type { Base64ConverterPageMode } from '@/types/storage';
|
import type { Base64ConverterPageMode } from '@/types/storage';
|
||||||
import TextMode from './TextMode';
|
import TextMode from './components/TextMode';
|
||||||
import Base64ConverterSection from './Base64ConverterSection';
|
import Base64ConverterSection from './components/Base64ConverterSection';
|
||||||
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
|
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
|
||||||
|
|
||||||
const VALID_PAGE_MODES: readonly Base64ConverterPageMode[] = ['text', 'file', 'image'];
|
const VALID_PAGE_MODES: readonly Base64ConverterPageMode[] = ['text', 'file', 'image'];
|
||||||
@@ -12,7 +11,6 @@ const isValidPageMode = (val: unknown): val is Base64ConverterPageMode =>
|
|||||||
type PageMode = Base64ConverterPageMode;
|
type PageMode = Base64ConverterPageMode;
|
||||||
|
|
||||||
export default function Index() {
|
export default function Index() {
|
||||||
const { t } = useI18n('base64Converter');
|
|
||||||
const [pageMode, setPageMode] = useStorageState(
|
const [pageMode, setPageMode] = useStorageState(
|
||||||
'base64Converter/pageMode',
|
'base64Converter/pageMode',
|
||||||
'text',
|
'text',
|
||||||
@@ -24,9 +22,9 @@ export default function Index() {
|
|||||||
<SwitchButtonGroup
|
<SwitchButtonGroup
|
||||||
value={pageMode}
|
value={pageMode}
|
||||||
options={[
|
options={[
|
||||||
{ value: 'text', label: t('base64Converter:textMode') },
|
{ value: 'text', label: '文本' },
|
||||||
{ value: 'file', label: t('base64Converter:fileMode') },
|
{ value: 'file', label: '文件' },
|
||||||
{ value: 'image', label: t('base64Converter:imageMode') },
|
{ value: 'image', label: '图像' },
|
||||||
]}
|
]}
|
||||||
onChange={(value: PageMode) => setPageMode(value)}
|
onChange={(value: PageMode) => setPageMode(value)}
|
||||||
size="small"
|
size="small"
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
import type { FileToBase64Result } from '@/utils/base64Converter';
|
import type { FileToBase64Result } from '@/utils/base64Converter';
|
||||||
import {
|
import {
|
||||||
base64ToBlob,
|
base64ToBlob,
|
||||||
@@ -21,8 +20,6 @@ interface UseBase64ConverterProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function useBase64Converter({ mode }: UseBase64ConverterProps) {
|
export function useBase64Converter({ mode }: UseBase64ConverterProps) {
|
||||||
const { t } = useI18n('base64Converter');
|
|
||||||
|
|
||||||
const [result, setResult] = useState<FileToBase64Result | null>(null);
|
const [result, setResult] = useState<FileToBase64Result | null>(null);
|
||||||
const [info, setInfo] = useState<FileInfo | null>(null);
|
const [info, setInfo] = useState<FileInfo | null>(null);
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
@@ -62,7 +59,7 @@ export function useBase64Converter({ mode }: UseBase64ConverterProps) {
|
|||||||
setInfo(null);
|
setInfo(null);
|
||||||
|
|
||||||
if (!isFileSizeValid(file.size)) {
|
if (!isFileSizeValid(file.size)) {
|
||||||
setEncodeError(t('fileSizeExceeded', { max: `${MAX_FILE_SIZE / 1024 / 1024} MB` }));
|
setEncodeError(`文件大小超出限制(最大 ${MAX_FILE_SIZE / 1024 / 1024} MB)`);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -71,7 +68,7 @@ export function useBase64Converter({ mode }: UseBase64ConverterProps) {
|
|||||||
!isSupportedImageType(file.type) &&
|
!isSupportedImageType(file.type) &&
|
||||||
!isSupportedImageExtension(file.name)
|
!isSupportedImageExtension(file.name)
|
||||||
) {
|
) {
|
||||||
setEncodeError(t('unsupportedImageType'));
|
setEncodeError('不支持的图像格式');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -87,13 +84,13 @@ export function useBase64Converter({ mode }: UseBase64ConverterProps) {
|
|||||||
if (!cancelRef.current) setResult(res);
|
if (!cancelRef.current) setResult(res);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
if (!cancelRef.current) {
|
if (!cancelRef.current) {
|
||||||
setEncodeError(e instanceof Error ? e.message : t('conversionFailed'));
|
setEncodeError(e instanceof Error ? e.message : '转换失败');
|
||||||
}
|
}
|
||||||
} finally {
|
} finally {
|
||||||
if (!cancelRef.current) setIsLoading(false);
|
if (!cancelRef.current) setIsLoading(false);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[mode, t],
|
[mode],
|
||||||
);
|
);
|
||||||
|
|
||||||
const safeFileSelect = useCallback(
|
const safeFileSelect = useCallback(
|
||||||
@@ -116,10 +113,10 @@ export function useBase64Converter({ mode }: UseBase64ConverterProps) {
|
|||||||
const message = e instanceof Error ? e.message : '';
|
const message = e instanceof Error ? e.message : '';
|
||||||
return {
|
return {
|
||||||
decoded: null,
|
decoded: null,
|
||||||
error: message === 'Invalid Base64 string' ? t('invalidBase64') : t('conversionFailed'),
|
error: message === 'Invalid Base64 string' ? 'Base64 字符串无效' : '转换失败',
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
}, [debouncedDecodeInput, t]);
|
}, [debouncedDecodeInput]);
|
||||||
|
|
||||||
const decoded = decodePipeline.decoded;
|
const decoded = decodePipeline.decoded;
|
||||||
const decodeError = decodePipeline.error;
|
const decodeError = decodePipeline.error;
|
||||||
|
|||||||
@@ -0,0 +1,91 @@
|
|||||||
|
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||||
|
import { base64ToText, textToBase64 } from '@/utils/base64Converter';
|
||||||
|
import { useContextMenuData } from '@/utils/useContextMenuData';
|
||||||
|
|
||||||
|
const IMAGE_DATA_URI_PATTERN = /^\s*data:image\//i;
|
||||||
|
|
||||||
|
const ERROR_MESSAGE_TO_I18N: Record<string, string> = {
|
||||||
|
'Invalid Base64 string': '无效的 Base64 字符串',
|
||||||
|
'Input appears to be binary data (e.g. an image). Please use the Image tab instead.':
|
||||||
|
'检测到二进制数据(如图像),请使用图像选项卡',
|
||||||
|
};
|
||||||
|
|
||||||
|
export function useTextMode() {
|
||||||
|
const [input, setInput] = useState('');
|
||||||
|
const [debouncedInput, setDebouncedInput] = useState('');
|
||||||
|
const [direction, setDirection] = useState<'encode' | 'decode'>('encode');
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handle = setTimeout(() => {
|
||||||
|
setDebouncedInput(input);
|
||||||
|
}, 200);
|
||||||
|
return () => clearTimeout(handle);
|
||||||
|
}, [input]);
|
||||||
|
|
||||||
|
const handleContextMenuData = useCallback((payload: string) => {
|
||||||
|
setInput(payload);
|
||||||
|
setDebouncedInput(payload);
|
||||||
|
setDirection('decode');
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useContextMenuData({ featureKey: 'base64Converter', onData: handleContextMenuData });
|
||||||
|
|
||||||
|
const conversionPipeline = useMemo(() => {
|
||||||
|
const trimmed = debouncedInput.trim();
|
||||||
|
if (!trimmed) return { output: '', error: null };
|
||||||
|
|
||||||
|
try {
|
||||||
|
if (direction === 'encode') {
|
||||||
|
const result = textToBase64(debouncedInput);
|
||||||
|
return { output: result.output, error: null };
|
||||||
|
} else {
|
||||||
|
const decoded = base64ToText(trimmed);
|
||||||
|
return { output: decoded, error: null };
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
const message = e instanceof Error ? e.message : '';
|
||||||
|
const i18nKey = ERROR_MESSAGE_TO_I18N[message];
|
||||||
|
return {
|
||||||
|
output: '',
|
||||||
|
error: i18nKey || message || '转换失败',
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}, [debouncedInput, direction]);
|
||||||
|
|
||||||
|
const output = conversionPipeline.output;
|
||||||
|
const error = conversionPipeline.error;
|
||||||
|
|
||||||
|
const placeholder =
|
||||||
|
direction === 'encode' ? '输入需要编码为 Base64 的文本...' : '输入需要解码的 Base64 字符串...';
|
||||||
|
const outputLabel = direction === 'encode' ? 'Base64 编码结果' : '解码文本结果';
|
||||||
|
|
||||||
|
const showImageHint = useMemo(
|
||||||
|
() => direction === 'decode' && IMAGE_DATA_URI_PATTERN.test(input),
|
||||||
|
[direction, input],
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleDirectionChange = (value: 'encode' | 'decode') => {
|
||||||
|
if (value === direction) return;
|
||||||
|
setDirection(value);
|
||||||
|
setInput('');
|
||||||
|
setDebouncedInput('');
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClear = () => {
|
||||||
|
setInput('');
|
||||||
|
setDebouncedInput('');
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
input,
|
||||||
|
setInput,
|
||||||
|
direction,
|
||||||
|
handleDirectionChange,
|
||||||
|
placeholder,
|
||||||
|
output,
|
||||||
|
outputLabel,
|
||||||
|
error,
|
||||||
|
showImageHint,
|
||||||
|
handleClear,
|
||||||
|
};
|
||||||
|
}
|
||||||
@@ -1,12 +1,10 @@
|
|||||||
import { useRouter } from '@/providers/RouterProvider';
|
import { useRouter } from '@/providers/RouterProvider';
|
||||||
import { getFeatureByKey } from '@/config/features';
|
import { getFeatureByKey } from '@/config/features';
|
||||||
import type { PageType } from '@/types/storage';
|
import type { PageType } from '@/types/storage';
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
export default function Index() {
|
export default function Index() {
|
||||||
const { navigateTo, visiblePages, pageOrder, recentlyUsedTools } = useRouter();
|
const { navigateTo, visiblePages, pageOrder, recentlyUsedTools } = useRouter();
|
||||||
const { t } = useI18n(['features']);
|
|
||||||
|
|
||||||
const visibleSet = new Set<string>(visiblePages);
|
const visibleSet = new Set<string>(visiblePages);
|
||||||
|
|
||||||
@@ -28,7 +26,7 @@ export default function Index() {
|
|||||||
{showRecent && (
|
{showRecent && (
|
||||||
<div className="flex flex-col gap-2">
|
<div className="flex flex-col gap-2">
|
||||||
<h3 className="text-xs font-semibold text-muted-foreground/80 uppercase tracking-wider">
|
<h3 className="text-xs font-semibold text-muted-foreground/80 uppercase tracking-wider">
|
||||||
{t('dashboard_recentlyUsed')}
|
{'最近使用'}
|
||||||
</h3>
|
</h3>
|
||||||
<div className="flex flex-wrap gap-2">
|
<div className="flex flex-wrap gap-2">
|
||||||
{recentFeatures.map(({ key, feature }) => {
|
{recentFeatures.map(({ key, feature }) => {
|
||||||
@@ -46,7 +44,7 @@ export default function Index() {
|
|||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<IconComponent className="h-3.5 w-3.5 text-muted-foreground/70" />
|
<IconComponent className="h-3.5 w-3.5 text-muted-foreground/70" />
|
||||||
{t(feature!.labelKey)}
|
{feature!.label}
|
||||||
</button>
|
</button>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
@@ -57,7 +55,7 @@ export default function Index() {
|
|||||||
{/* 全部工具 — 紧凑 Grid */}
|
{/* 全部工具 — 紧凑 Grid */}
|
||||||
<div className="flex flex-col gap-2">
|
<div className="flex flex-col gap-2">
|
||||||
<h3 className="text-xs font-semibold text-muted-foreground/80 uppercase tracking-wider">
|
<h3 className="text-xs font-semibold text-muted-foreground/80 uppercase tracking-wider">
|
||||||
{t('dashboard_allTools')}
|
{'全部工具'}
|
||||||
</h3>
|
</h3>
|
||||||
<div className={cn('grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-2')}>
|
<div className={cn('grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-2')}>
|
||||||
{visibleFeatures.map(({ key, feature }) => {
|
{visibleFeatures.map(({ key, feature }) => {
|
||||||
@@ -82,7 +80,7 @@ export default function Index() {
|
|||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
<span className="text-[11px] font-medium text-muted-foreground/80 group-hover:text-foreground leading-tight text-center truncate w-full transition-colors">
|
<span className="text-[11px] font-medium text-muted-foreground/80 group-hover:text-foreground leading-tight text-center truncate w-full transition-colors">
|
||||||
{t(feature!.labelKey)}
|
{feature!.label}
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -0,0 +1,11 @@
|
|||||||
|
import { render, screen } from '@testing-library/react';
|
||||||
|
import { describe, it, expect } from 'vitest';
|
||||||
|
import Index from '../index';
|
||||||
|
|
||||||
|
describe('JsonTools 页面', () => {
|
||||||
|
it('应该渲染模式切换按钮', () => {
|
||||||
|
render(<Index />);
|
||||||
|
// 基本渲染测试:页面含多个模式切换按钮,应至少渲染一个
|
||||||
|
expect(screen.getAllByRole('button').length).toBeGreaterThan(0);
|
||||||
|
});
|
||||||
|
});
|
||||||
+3
-8
@@ -1,6 +1,5 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
export interface DiffNavigatorProps extends React.HTMLAttributes<HTMLDivElement> {
|
export interface DiffNavigatorProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||||
@@ -19,8 +18,6 @@ export default function DiffNavigator({
|
|||||||
className,
|
className,
|
||||||
...props
|
...props
|
||||||
}: DiffNavigatorProps) {
|
}: DiffNavigatorProps) {
|
||||||
const { t } = useI18n('jsonDiff');
|
|
||||||
|
|
||||||
const isFirst = currentIndex <= 0;
|
const isFirst = currentIndex <= 0;
|
||||||
const isLast = currentIndex >= total - 1;
|
const isLast = currentIndex >= total - 1;
|
||||||
|
|
||||||
@@ -33,9 +30,7 @@ export default function DiffNavigator({
|
|||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
<span className="text-xs font-semibold text-muted-foreground/90">
|
<span className="text-xs font-semibold text-muted-foreground/90">{'无差异'}</span>
|
||||||
{t('jsonDiff:noDiffs')}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -52,7 +47,7 @@ export default function DiffNavigator({
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
disabled={isFirst}
|
disabled={isFirst}
|
||||||
aria-label={t('jsonDiff:previousDiff')}
|
aria-label={'上一个'}
|
||||||
onClick={onPrev}
|
onClick={onPrev}
|
||||||
className={cn(
|
className={cn(
|
||||||
'p-1 rounded-md text-muted-foreground hover:bg-accent hover:text-foreground',
|
'p-1 rounded-md text-muted-foreground hover:bg-accent hover:text-foreground',
|
||||||
@@ -72,7 +67,7 @@ export default function DiffNavigator({
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
disabled={isLast}
|
disabled={isLast}
|
||||||
aria-label={t('jsonDiff:nextDiff')}
|
aria-label={'下一个'}
|
||||||
onClick={onNext}
|
onClick={onNext}
|
||||||
className={cn(
|
className={cn(
|
||||||
'p-1 rounded-md text-muted-foreground hover:bg-accent hover:text-foreground',
|
'p-1 rounded-md text-muted-foreground hover:bg-accent hover:text-foreground',
|
||||||
@@ -1,8 +1,7 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
import JsonTree from './JsonTree';
|
import JsonTree from './JsonTree';
|
||||||
import type { DiffNode, DiffResult as DiffResultType, DiffType, ViewMode } from './types';
|
import type { DiffNode, DiffResult as DiffResultType, DiffType, ViewMode } from '../types';
|
||||||
|
|
||||||
export interface DiffResultProps extends React.HTMLAttributes<HTMLDivElement> {
|
export interface DiffResultProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||||
result: DiffResultType;
|
result: DiffResultType;
|
||||||
@@ -17,8 +16,6 @@ export default function DiffResult({
|
|||||||
className,
|
className,
|
||||||
...props
|
...props
|
||||||
}: DiffResultProps) {
|
}: DiffResultProps) {
|
||||||
const { t } = useI18n('jsonDiff');
|
|
||||||
|
|
||||||
if (viewMode === 'sideBySide') {
|
if (viewMode === 'sideBySide') {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
@@ -26,11 +23,11 @@ export default function DiffResult({
|
|||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
<div className="flex-1 min-w-0">
|
<div className="flex-1 min-w-0">
|
||||||
<SectionLabel text={t('jsonDiff:leftLabel')} />
|
<SectionLabel text={'原始 JSON'} />
|
||||||
<JsonTree node={result.root} side="left" activePath={activePath} />
|
<JsonTree node={result.root} side="left" activePath={activePath} />
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-1 min-w-0">
|
<div className="flex-1 min-w-0">
|
||||||
<SectionLabel text={t('jsonDiff:rightLabel')} />
|
<SectionLabel text={'目标 JSON'} />
|
||||||
<JsonTree node={result.root} side="right" activePath={activePath} />
|
<JsonTree node={result.root} side="right" activePath={activePath} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
+27
-15
@@ -1,18 +1,31 @@
|
|||||||
import React, { useEffect, useMemo, useState } from 'react';
|
import React, { useEffect, useMemo, useState } from 'react';
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
import { formatBytes } from '@/utils/format';
|
import { formatBytes } from '@/utils/format';
|
||||||
import { CopyButton } from '@/components/CopyButton';
|
import { CopyButton } from '@/components/CopyButton';
|
||||||
import TextInputArea from '@/components/TextInputArea';
|
import TextInputArea from '@/components/TextInputArea';
|
||||||
import { validateJson } from '@/utils/jsonFormatter';
|
import { validateJson } from '@/utils/jsonFormatter';
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
|
import type { ConvertFunction, ConvertResult } from '../types';
|
||||||
|
|
||||||
export interface ConvertResult {
|
const CONVERT_LABELS: Record<
|
||||||
output: string;
|
string,
|
||||||
originalBytes: number;
|
{ inputPlaceholder: string; outputLabel: string; emptyHint: string }
|
||||||
outputBytes: number;
|
> = {
|
||||||
}
|
yaml: {
|
||||||
|
inputPlaceholder: '输入需要转换的 JSON...',
|
||||||
export type ConvertFunction = (text: string) => ConvertResult;
|
outputLabel: 'YAML 结果',
|
||||||
|
emptyHint: '输入 JSON 后点击转换',
|
||||||
|
},
|
||||||
|
toml: {
|
||||||
|
inputPlaceholder: '输入需要转换的 JSON...',
|
||||||
|
outputLabel: 'TOML 结果',
|
||||||
|
emptyHint: '输入 JSON 后点击转换',
|
||||||
|
},
|
||||||
|
minify: {
|
||||||
|
inputPlaceholder: '输入需要压缩的 JSON...',
|
||||||
|
outputLabel: '压缩结果',
|
||||||
|
emptyHint: '输入 JSON 后点击压缩',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
interface JsonConvertSectionProps extends React.HTMLAttributes<HTMLDivElement> {
|
interface JsonConvertSectionProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||||
translationPrefix: string;
|
translationPrefix: string;
|
||||||
@@ -25,12 +38,11 @@ export default function JsonConvertSection({
|
|||||||
className,
|
className,
|
||||||
...props
|
...props
|
||||||
}: JsonConvertSectionProps) {
|
}: JsonConvertSectionProps) {
|
||||||
const { t } = useI18n('jsonFormat');
|
|
||||||
|
|
||||||
const [input, setInput] = useState('');
|
const [input, setInput] = useState('');
|
||||||
const [debouncedInput, setDebouncedInput] = useState('');
|
const [debouncedInput, setDebouncedInput] = useState('');
|
||||||
|
|
||||||
const pk = translationPrefix;
|
const pk = translationPrefix;
|
||||||
|
const labels = CONVERT_LABELS[pk] || CONVERT_LABELS.yaml;
|
||||||
|
|
||||||
// Debounce input
|
// Debounce input
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -72,7 +84,7 @@ export default function JsonConvertSection({
|
|||||||
<div className={cn('w-full flex flex-col gap-4', className)} {...props}>
|
<div className={cn('w-full flex flex-col gap-4', className)} {...props}>
|
||||||
{/* 输入区 */}
|
{/* 输入区 */}
|
||||||
<TextInputArea
|
<TextInputArea
|
||||||
placeholder={t(`jsonFormat:${pk}InputPlaceholder`)}
|
placeholder={labels.inputPlaceholder}
|
||||||
value={input}
|
value={input}
|
||||||
onChange={setInput}
|
onChange={setInput}
|
||||||
externalError={error || runtimeError || undefined}
|
externalError={error || runtimeError || undefined}
|
||||||
@@ -89,19 +101,19 @@ export default function JsonConvertSection({
|
|||||||
<div className="flex h-9 items-center justify-between px-4 border-b border-border bg-muted/50 select-none">
|
<div className="flex h-9 items-center justify-between px-4 border-b border-border bg-muted/50 select-none">
|
||||||
<div className="flex gap-4 items-center">
|
<div className="flex gap-4 items-center">
|
||||||
<span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/90">
|
<span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/90">
|
||||||
{t(`jsonFormat:${pk}OutputLabel`)}
|
{labels.outputLabel}
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<div className="hidden sm:flex gap-3 items-center font-mono text-[10px] text-muted-foreground/70 tabular-nums">
|
<div className="hidden sm:flex gap-3 items-center font-mono text-[10px] text-muted-foreground/70 tabular-nums">
|
||||||
<span>
|
<span>
|
||||||
{t('jsonFormat:originalSize')}:{' '}
|
{'原始大小'}:{' '}
|
||||||
<span className="font-semibold text-foreground/80">
|
<span className="font-semibold text-foreground/80">
|
||||||
{formatBytes(result.originalBytes)}
|
{formatBytes(result.originalBytes)}
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
<span className="text-border/60">|</span>
|
<span className="text-border/60">|</span>
|
||||||
<span>
|
<span>
|
||||||
{t('jsonFormat:formattedSize')}:{' '}
|
{'格式化后大小'}:{' '}
|
||||||
<span className="font-semibold text-foreground/80">
|
<span className="font-semibold text-foreground/80">
|
||||||
{formatBytes(result.outputBytes)}
|
{formatBytes(result.outputBytes)}
|
||||||
</span>
|
</span>
|
||||||
@@ -122,7 +134,7 @@ export default function JsonConvertSection({
|
|||||||
) : (
|
) : (
|
||||||
<div className="p-8 rounded-xl bg-muted/30 border border-dashed border-border/80 text-center flex flex-col items-center justify-center min-h-[120px] select-none">
|
<div className="p-8 rounded-xl bg-muted/30 border border-dashed border-border/80 text-center flex flex-col items-center justify-center min-h-[120px] select-none">
|
||||||
<p className="text-xs font-semibold text-muted-foreground/80 tracking-wide max-w-[240px] leading-relaxed">
|
<p className="text-xs font-semibold text-muted-foreground/80 tracking-wide max-w-[240px] leading-relaxed">
|
||||||
{error ? t('jsonFormat:fixErrorHint') : t(`jsonFormat:${pk}EmptyHint`)}
|
{error ? '请修正上方 JSON 的语法错误以开启实时流式格式化' : labels.emptyHint}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
+7
-10
@@ -1,5 +1,4 @@
|
|||||||
import { useEffect, useMemo, useState } from 'react';
|
import { useEffect, useMemo, useState } from 'react';
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
import {
|
import {
|
||||||
formatJson,
|
formatJson,
|
||||||
type JsonFormatOptions,
|
type JsonFormatOptions,
|
||||||
@@ -14,8 +13,6 @@ import { Checkbox } from '@/components/ui/checkbox';
|
|||||||
import { Label } from '@/components/ui/label';
|
import { Label } from '@/components/ui/label';
|
||||||
|
|
||||||
export default function JsonFormatSection() {
|
export default function JsonFormatSection() {
|
||||||
const { t } = useI18n('jsonFormat');
|
|
||||||
|
|
||||||
const [input, setInput] = useState('');
|
const [input, setInput] = useState('');
|
||||||
const [debouncedInput, setDebouncedInput] = useState('');
|
const [debouncedInput, setDebouncedInput] = useState('');
|
||||||
const [indentSize, setIndentSize] = useState<number>(2);
|
const [indentSize, setIndentSize] = useState<number>(2);
|
||||||
@@ -66,7 +63,7 @@ export default function JsonFormatSection() {
|
|||||||
{/* 缩进配置区 */}
|
{/* 缩进配置区 */}
|
||||||
<div className="flex gap-2 items-center shrink-0 select-none">
|
<div className="flex gap-2 items-center shrink-0 select-none">
|
||||||
<span className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider">
|
<span className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider">
|
||||||
{t('jsonFormat:indentSize')}
|
{'缩进'}
|
||||||
</span>
|
</span>
|
||||||
<SwitchButtonGroup
|
<SwitchButtonGroup
|
||||||
value={indentSize}
|
value={indentSize}
|
||||||
@@ -94,7 +91,7 @@ export default function JsonFormatSection() {
|
|||||||
htmlFor="sort-keys-checkbox"
|
htmlFor="sort-keys-checkbox"
|
||||||
className="text-xs font-bold text-foreground/80 cursor-pointer tracking-tight group-hover:text-foreground"
|
className="text-xs font-bold text-foreground/80 cursor-pointer tracking-tight group-hover:text-foreground"
|
||||||
>
|
>
|
||||||
{t('jsonFormat:sortKeys')}
|
{'键名排序'}
|
||||||
</Label>
|
</Label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -102,7 +99,7 @@ export default function JsonFormatSection() {
|
|||||||
|
|
||||||
{/* 满血版输入终端 */}
|
{/* 满血版输入终端 */}
|
||||||
<TextInputArea
|
<TextInputArea
|
||||||
placeholder={t('jsonFormat:inputPlaceholder')}
|
placeholder={'输入需要格式化的 JSON...'}
|
||||||
value={input}
|
value={input}
|
||||||
onChange={setInput}
|
onChange={setInput}
|
||||||
externalError={error || runtimeError || undefined}
|
externalError={error || runtimeError || undefined}
|
||||||
@@ -120,19 +117,19 @@ export default function JsonFormatSection() {
|
|||||||
<div className="flex h-9 items-center justify-between px-4 border-b border-border bg-muted/50 select-none">
|
<div className="flex h-9 items-center justify-between px-4 border-b border-border bg-muted/50 select-none">
|
||||||
<div className="flex gap-4 items-center">
|
<div className="flex gap-4 items-center">
|
||||||
<span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/90">
|
<span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/90">
|
||||||
{t('jsonFormat:outputLabel')}
|
{'格式化结果'}
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<div className="hidden sm:flex gap-3 items-center font-mono text-[10px] text-muted-foreground/70 tabular-nums">
|
<div className="hidden sm:flex gap-3 items-center font-mono text-[10px] text-muted-foreground/70 tabular-nums">
|
||||||
<span>
|
<span>
|
||||||
{t('jsonFormat:originalSize')}:{' '}
|
{'原始大小'}:{' '}
|
||||||
<span className="font-semibold text-foreground/80">
|
<span className="font-semibold text-foreground/80">
|
||||||
{formatBytes(result.originalBytes)}
|
{formatBytes(result.originalBytes)}
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
<span className="text-border/60">|</span>
|
<span className="text-border/60">|</span>
|
||||||
<span>
|
<span>
|
||||||
{t('jsonFormat:formattedSize')}:{' '}
|
{'格式化后大小'}:{' '}
|
||||||
<span className="font-semibold text-foreground/80">
|
<span className="font-semibold text-foreground/80">
|
||||||
{formatBytes(result.formattedBytes)}
|
{formatBytes(result.formattedBytes)}
|
||||||
</span>
|
</span>
|
||||||
@@ -154,7 +151,7 @@ export default function JsonFormatSection() {
|
|||||||
/* 空状态指示引导区 */
|
/* 空状态指示引导区 */
|
||||||
<div className="p-8 rounded-xl bg-muted/30 border border-dashed border-border/80 text-center flex flex-col items-center justify-center min-h-[120px] select-none">
|
<div className="p-8 rounded-xl bg-muted/30 border border-dashed border-border/80 text-center flex flex-col items-center justify-center min-h-[120px] select-none">
|
||||||
<p className="text-xs font-semibold text-muted-foreground/80 tracking-wide max-w-[240px] leading-relaxed">
|
<p className="text-xs font-semibold text-muted-foreground/80 tracking-wide max-w-[240px] leading-relaxed">
|
||||||
{error ? t('jsonFormat:fixErrorHint') : t('jsonFormat:emptyHint')}
|
{error ? '请修正上方 JSON 的语法错误以开启实时流式格式化' : '输入 JSON 后点击格式化'}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
||||||
import { ChevronDown, ChevronRight } from 'lucide-react'; // 用正统的矢量箭头平替原生的字符 '▾' '▸'
|
import { ChevronDown, ChevronRight } from 'lucide-react'; // 用正统的矢量箭头平替原生的字符 '▾' '▸'
|
||||||
import type { DiffNode, DiffType } from './types';
|
import type { DiffNode, DiffType } from '../types';
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
export type TreeSide = 'left' | 'right';
|
export type TreeSide = 'left' | 'right';
|
||||||
@@ -1,9 +1,8 @@
|
|||||||
import { useI18n } from '@/utils/chromeI18n';
|
import JsonDiffInput from './components/JsonDiffInput';
|
||||||
import JsonDiffInput from './JsonDiffInput';
|
import DiffResult from './components/DiffResult';
|
||||||
import DiffResult from './DiffResult';
|
import DiffNavigator from './components/DiffNavigator';
|
||||||
import DiffNavigator from './DiffNavigator';
|
import JsonFormatSection from './components/JsonFormatSection';
|
||||||
import JsonFormatSection from './JsonFormatSection';
|
import JsonConvertSection from './components/JsonConvertSection';
|
||||||
import JsonConvertSection from './JsonConvertSection';
|
|
||||||
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
|
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
|
||||||
import { useJsonTools } from './useJsonTools';
|
import { useJsonTools } from './useJsonTools';
|
||||||
import type { JsonToolsPageMode } from '@/types/storage';
|
import type { JsonToolsPageMode } from '@/types/storage';
|
||||||
@@ -12,7 +11,6 @@ import type { ViewMode } from './types';
|
|||||||
type PageMode = JsonToolsPageMode;
|
type PageMode = JsonToolsPageMode;
|
||||||
|
|
||||||
export default function Index() {
|
export default function Index() {
|
||||||
const { t } = useI18n(['jsonDiff', 'jsonFormat']);
|
|
||||||
const {
|
const {
|
||||||
pageMode,
|
pageMode,
|
||||||
setPageMode,
|
setPageMode,
|
||||||
@@ -41,11 +39,11 @@ export default function Index() {
|
|||||||
value={pageMode}
|
value={pageMode}
|
||||||
onChange={(v: PageMode) => setPageMode(v)}
|
onChange={(v: PageMode) => setPageMode(v)}
|
||||||
options={[
|
options={[
|
||||||
{ value: 'diff', label: t('jsonFormat:diffMode') },
|
{ value: 'diff', label: '差异比较' },
|
||||||
{ value: 'format', label: t('jsonFormat:formatMode') },
|
{ value: 'format', label: '格式化' },
|
||||||
{ value: 'yaml', label: t('jsonFormat:yamlMode') },
|
{ value: 'yaml', label: 'YAML' },
|
||||||
{ value: 'toml', label: t('jsonFormat:tomlMode') },
|
{ value: 'toml', label: 'TOML' },
|
||||||
{ value: 'minify', label: t('jsonFormat:minifyMode') },
|
{ value: 'minify', label: '压缩' },
|
||||||
]}
|
]}
|
||||||
size="small"
|
size="small"
|
||||||
className="w-full sm:w-auto"
|
className="w-full sm:w-auto"
|
||||||
@@ -58,8 +56,8 @@ export default function Index() {
|
|||||||
value={viewMode}
|
value={viewMode}
|
||||||
onChange={(v: ViewMode) => setViewMode(v)}
|
onChange={(v: ViewMode) => setViewMode(v)}
|
||||||
options={[
|
options={[
|
||||||
{ value: 'sideBySide', label: t('jsonDiff:sideBySideMode') },
|
{ value: 'sideBySide', label: '并排' },
|
||||||
{ value: 'unified', label: t('jsonDiff:unifiedMode') },
|
{ value: 'unified', label: '统一' },
|
||||||
]}
|
]}
|
||||||
size="small"
|
size="small"
|
||||||
/>
|
/>
|
||||||
@@ -67,16 +65,16 @@ export default function Index() {
|
|||||||
|
|
||||||
<div className="flex flex-col md:flex-row gap-4 w-full items-stretch">
|
<div className="flex flex-col md:flex-row gap-4 w-full items-stretch">
|
||||||
<JsonDiffInput
|
<JsonDiffInput
|
||||||
label={t('jsonDiff:leftLabel')}
|
label={'原始 JSON'}
|
||||||
placeholder={t('jsonDiff:leftPlaceholder')}
|
placeholder={'输入原始 JSON...'}
|
||||||
value={leftInput}
|
value={leftInput}
|
||||||
onChange={setLeftInput}
|
onChange={setLeftInput}
|
||||||
error={leftError}
|
error={leftError}
|
||||||
minRows={9}
|
minRows={9}
|
||||||
/>
|
/>
|
||||||
<JsonDiffInput
|
<JsonDiffInput
|
||||||
label={t('jsonDiff:rightLabel')}
|
label={'目标 JSON'}
|
||||||
placeholder={t('jsonDiff:rightPlaceholder')}
|
placeholder={'输入目标 JSON...'}
|
||||||
value={rightInput}
|
value={rightInput}
|
||||||
onChange={setRightInput}
|
onChange={setRightInput}
|
||||||
error={rightError}
|
error={rightError}
|
||||||
@@ -99,7 +97,9 @@ export default function Index() {
|
|||||||
) : (
|
) : (
|
||||||
<div className="p-8 rounded-xl bg-muted/30 border border-dashed border-border/80 text-center flex flex-col items-center justify-center min-h-[140px]">
|
<div className="p-8 rounded-xl bg-muted/30 border border-dashed border-border/80 text-center flex flex-col items-center justify-center min-h-[140px]">
|
||||||
<p className="text-xs font-semibold text-muted-foreground/80 tracking-wide max-w-[260px] leading-relaxed">
|
<p className="text-xs font-semibold text-muted-foreground/80 tracking-wide max-w-[260px] leading-relaxed">
|
||||||
{leftError || rightError ? t('jsonDiff:fixErrorHint') : t('jsonDiff:emptyHint')}
|
{leftError || rightError
|
||||||
|
? '请修正上方 JSON 的语法错误以开启实时流式比对'
|
||||||
|
: '输入两侧 JSON 后点击比较'}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -53,3 +53,13 @@ export interface DiffResult {
|
|||||||
/** 差异核心总计数(等价于 diffPaths.length),注入 tabular-nums 配合渲染 */
|
/** 差异核心总计数(等价于 diffPaths.length),注入 tabular-nums 配合渲染 */
|
||||||
diffCount: number;
|
diffCount: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** JSON 转换结果 */
|
||||||
|
export interface ConvertResult {
|
||||||
|
output: string;
|
||||||
|
originalBytes: number;
|
||||||
|
outputBytes: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** JSON 转换函数类型 */
|
||||||
|
export type ConvertFunction = (text: string) => ConvertResult;
|
||||||
|
|||||||
@@ -1,14 +1,12 @@
|
|||||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
import { useStorageState } from '@/utils/useStorageState';
|
import { useStorageState } from '@/utils/useStorageState';
|
||||||
import { diffJson } from './diffEngine';
|
import { diffJson } from '@/utils/diffEngine';
|
||||||
import { jsonToYaml } from '@/utils/jsonToYaml';
|
import { jsonToYaml } from '@/utils/jsonToYaml';
|
||||||
import { jsonToToml } from '@/utils/jsonToToml';
|
import { jsonToToml } from '@/utils/jsonToToml';
|
||||||
import { minifyJson } from '@/utils/jsonFormatter';
|
import { minifyJson } from '@/utils/jsonFormatter';
|
||||||
import { isValidPageMode, tryParse } from './constants';
|
import { isValidPageMode, tryParse } from './constants';
|
||||||
import type { JsonToolsPageMode } from '@/types/storage';
|
import type { JsonToolsPageMode } from '@/types/storage';
|
||||||
import type { ConvertFunction } from './JsonConvertSection';
|
import type { ConvertFunction, ViewMode } from './types';
|
||||||
import type { ViewMode } from './types';
|
|
||||||
|
|
||||||
export interface UseJsonToolsReturn {
|
export interface UseJsonToolsReturn {
|
||||||
pageMode: JsonToolsPageMode;
|
pageMode: JsonToolsPageMode;
|
||||||
@@ -35,7 +33,6 @@ export interface UseJsonToolsReturn {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function useJsonTools(): UseJsonToolsReturn {
|
export function useJsonTools(): UseJsonToolsReturn {
|
||||||
const { t } = useI18n(['jsonDiff', 'jsonFormat']);
|
|
||||||
const [pageMode, setPageMode] = useStorageState('jsonTools/pageMode', 'diff', isValidPageMode);
|
const [pageMode, setPageMode] = useStorageState('jsonTools/pageMode', 'diff', isValidPageMode);
|
||||||
|
|
||||||
// Diff inputs
|
// Diff inputs
|
||||||
@@ -55,12 +52,12 @@ export function useJsonTools(): UseJsonToolsReturn {
|
|||||||
|
|
||||||
// Parse debounced inputs
|
// Parse debounced inputs
|
||||||
const parseState = useMemo(() => {
|
const parseState = useMemo(() => {
|
||||||
const invalidMsg = t('jsonDiff:invalidJson');
|
const invalidMsg = '无效的 JSON 格式';
|
||||||
return {
|
return {
|
||||||
left: tryParse(debouncedLeft, invalidMsg),
|
left: tryParse(debouncedLeft, invalidMsg),
|
||||||
right: tryParse(debouncedRight, invalidMsg),
|
right: tryParse(debouncedRight, invalidMsg),
|
||||||
};
|
};
|
||||||
}, [debouncedLeft, debouncedRight, t]);
|
}, [debouncedLeft, debouncedRight]);
|
||||||
|
|
||||||
const leftError = parseState.left.error;
|
const leftError = parseState.left.error;
|
||||||
const rightError = parseState.right.error;
|
const rightError = parseState.right.error;
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
import { CopyButton } from '@/components/CopyButton';
|
import { CopyButton } from '@/components/CopyButton';
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
import { stringifyJson } from '@/utils/jwt';
|
import { stringifyJson } from '@/utils/jwt';
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
@@ -18,7 +17,6 @@ export default function JwtSection({
|
|||||||
bgClass,
|
bgClass,
|
||||||
borderClass,
|
borderClass,
|
||||||
}: JwtSectionProps) {
|
}: JwtSectionProps) {
|
||||||
const { t } = useI18n('jwt');
|
|
||||||
return (
|
return (
|
||||||
<div className={cn('p-4 rounded-xl border border-solid', bgClass, borderClass)}>
|
<div className={cn('p-4 rounded-xl border border-solid', bgClass, borderClass)}>
|
||||||
<div className="flex justify-between items-center mb-2 select-none">
|
<div className="flex justify-between items-center mb-2 select-none">
|
||||||
@@ -31,7 +29,7 @@ export default function JwtSection({
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<pre className="m-0 p-3 bg-muted/30 dark:bg-muted/10 rounded-lg text-xs font-mono overflow-x-auto whitespace-pre-wrap break-all border border-border/50 text-foreground/90 leading-relaxed select-text">
|
<pre className="m-0 p-3 bg-muted/30 dark:bg-muted/10 rounded-lg text-xs font-mono overflow-x-auto whitespace-pre-wrap break-all border border-border/50 text-foreground/90 leading-relaxed select-text">
|
||||||
{content ? stringifyJson(content) : t('jwt:invalidFormat')}
|
{content ? stringifyJson(content) : '无法解析'}
|
||||||
</pre>
|
</pre>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
+6
-10
@@ -2,10 +2,8 @@ import TextInputArea from '@/components/TextInputArea';
|
|||||||
import { CopyButton } from '@/components/CopyButton';
|
import { CopyButton } from '@/components/CopyButton';
|
||||||
import JwtSection from './JwtSection';
|
import JwtSection from './JwtSection';
|
||||||
import { useJwt } from './useJwt';
|
import { useJwt } from './useJwt';
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
|
|
||||||
export default function Index() {
|
export default function Index() {
|
||||||
const { t } = useI18n(['jwt', 'jsonFormat']);
|
|
||||||
const { jwtInput, result, handleChange, handleClear } = useJwt();
|
const { jwtInput, result, handleChange, handleClear } = useJwt();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -14,7 +12,7 @@ export default function Index() {
|
|||||||
<TextInputArea
|
<TextInputArea
|
||||||
minRows={5}
|
minRows={5}
|
||||||
maxRows={10}
|
maxRows={10}
|
||||||
placeholder={t('jwt_placeholder')}
|
placeholder={'在此粘贴 JWT 令牌 (Encoded JWT)...'}
|
||||||
value={jwtInput}
|
value={jwtInput}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
allowCopy={true}
|
allowCopy={true}
|
||||||
@@ -26,7 +24,7 @@ export default function Index() {
|
|||||||
{result && !result.error && (
|
{result && !result.error && (
|
||||||
<div className="flex flex-col gap-4">
|
<div className="flex flex-col gap-4">
|
||||||
<JwtSection
|
<JwtSection
|
||||||
title={t('jwt:headerTitle')}
|
title={'HEADER: 算法 & 令牌类型'}
|
||||||
content={result.header}
|
content={result.header}
|
||||||
colorClass="text-[#fb015b] dark:text-rose-400"
|
colorClass="text-[#fb015b] dark:text-rose-400"
|
||||||
borderClass="border-[#fb015b]/20 dark:border-rose-500/20"
|
borderClass="border-[#fb015b]/20 dark:border-rose-500/20"
|
||||||
@@ -34,7 +32,7 @@ export default function Index() {
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<JwtSection
|
<JwtSection
|
||||||
title={t('jwt:payloadTitle')}
|
title={'PAYLOAD: 数据'}
|
||||||
content={result.payload}
|
content={result.payload}
|
||||||
colorClass="text-[#a03aff] dark:text-purple-400"
|
colorClass="text-[#a03aff] dark:text-purple-400"
|
||||||
borderClass="border-[#a03aff]/20 dark:border-purple-500/20"
|
borderClass="border-[#a03aff]/20 dark:border-purple-500/20"
|
||||||
@@ -44,7 +42,7 @@ export default function Index() {
|
|||||||
<div className="p-4 rounded-xl border border-border bg-secondary/40 shadow-sm">
|
<div className="p-4 rounded-xl border border-border bg-secondary/40 shadow-sm">
|
||||||
<div className="flex justify-between items-center mb-2">
|
<div className="flex justify-between items-center mb-2">
|
||||||
<span className="text-xs font-bold tracking-wider text-muted-foreground/90 uppercase">
|
<span className="text-xs font-bold tracking-wider text-muted-foreground/90 uppercase">
|
||||||
{t('jwt:signatureTitle')}
|
{'签名'}
|
||||||
</span>
|
</span>
|
||||||
<CopyButton
|
<CopyButton
|
||||||
text={result.signature || ''}
|
text={result.signature || ''}
|
||||||
@@ -52,7 +50,7 @@ export default function Index() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<span className="block text-xs font-mono break-all text-foreground/80 bg-muted/30 dark:bg-muted/10 p-3 rounded-lg border border-border/50 leading-relaxed select-text">
|
<span className="block text-xs font-mono break-all text-foreground/80 bg-muted/30 dark:bg-muted/10 p-3 rounded-lg border border-border/50 leading-relaxed select-text">
|
||||||
{result.signature || t('jwt:noSignature')}
|
{result.signature || '无签名'}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -60,9 +58,7 @@ export default function Index() {
|
|||||||
|
|
||||||
{result?.error && (
|
{result?.error && (
|
||||||
<div className="p-6 rounded-xl bg-muted/30 border border-dashed border-border text-center">
|
<div className="p-6 rounded-xl bg-muted/30 border border-dashed border-border text-center">
|
||||||
<p className="text-xs font-semibold text-muted-foreground/80">
|
<p className="text-xs font-semibold text-muted-foreground/80">{'无效的 JSON 格式'}</p>
|
||||||
{t('jsonFormat:invalidJson')}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
+1
-1
@@ -1,6 +1,6 @@
|
|||||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
|
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
|
||||||
import { act, fireEvent, render, screen } from '@testing-library/react';
|
import { act, fireEvent, render, screen } from '@testing-library/react';
|
||||||
import ImageUploader from '@/components/ImageUploader';
|
import ImageUploader from '../components/ImageUploader';
|
||||||
|
|
||||||
// 配置多端一致性常驻桩(WXT 规范)
|
// 配置多端一致性常驻桩(WXT 规范)
|
||||||
const storageOnChangedMock = { addListener: vi.fn(), removeListener: vi.fn() };
|
const storageOnChangedMock = { addListener: vi.fn(), removeListener: vi.fn() };
|
||||||
+1
-1
@@ -1,6 +1,6 @@
|
|||||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
|
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
|
||||||
import { fireEvent, render, screen } from '@testing-library/react';
|
import { fireEvent, render, screen } from '@testing-library/react';
|
||||||
import QrCodePreview from '@/components/QrCodePreview';
|
import QrCodePreview from '../components/QrCodePreview';
|
||||||
|
|
||||||
describe('QrCodePreview 组件', () => {
|
describe('QrCodePreview 组件', () => {
|
||||||
const mockOnDownload = vi.fn();
|
const mockOnDownload = vi.fn();
|
||||||
@@ -26,11 +26,11 @@ vi.mock('@/config/features', async (importOriginal) => {
|
|||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
vi.mock('@/components/QrCodePreview', () => ({
|
vi.mock('../components/QrCodePreview', () => ({
|
||||||
default: () => <div data-testid="qr-code-preview">QrCodePreview</div>,
|
default: () => <div data-testid="qr-code-preview">QrCodePreview</div>,
|
||||||
}));
|
}));
|
||||||
|
|
||||||
vi.mock('@/components/ImageUploader', () => ({
|
vi.mock('../components/ImageUploader', () => ({
|
||||||
default: () => <div data-testid="image-uploader">ImageUploader</div>,
|
default: () => <div data-testid="image-uploader">ImageUploader</div>,
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
|||||||
@@ -1,7 +1,6 @@
|
|||||||
import { Loader2, Pencil, QrCode } from 'lucide-react';
|
import { Loader2, Pencil, QrCode } from 'lucide-react';
|
||||||
import TextInputArea from '@/components/TextInputArea';
|
import TextInputArea from '@/components/TextInputArea';
|
||||||
import QrCodePreview from '@/components/QrCodePreview';
|
import QrCodePreview from './QrCodePreview';
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
import { useQrCodeContext } from '../contexts/QrCodeContext';
|
import { useQrCodeContext } from '../contexts/QrCodeContext';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Label } from '@/components/ui/label';
|
import { Label } from '@/components/ui/label';
|
||||||
@@ -11,7 +10,6 @@ import { cn } from '@/lib/utils';
|
|||||||
const TEXT_PREVIEW_MAX_LENGTH = 80;
|
const TEXT_PREVIEW_MAX_LENGTH = 80;
|
||||||
|
|
||||||
export default function GeneratePanel() {
|
export default function GeneratePanel() {
|
||||||
const { t } = useI18n('qrCode');
|
|
||||||
const {
|
const {
|
||||||
generatorState,
|
generatorState,
|
||||||
setTextToEncode,
|
setTextToEncode,
|
||||||
@@ -42,13 +40,13 @@ export default function GeneratePanel() {
|
|||||||
>
|
>
|
||||||
<div className="flex flex-col space-y-2.5">
|
<div className="flex flex-col space-y-2.5">
|
||||||
<Label className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider select-none pl-0.5">
|
<Label className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider select-none pl-0.5">
|
||||||
{t('qrCode:urlInputLabel')}
|
{'输入 URL 或文本'}
|
||||||
</Label>
|
</Label>
|
||||||
|
|
||||||
<TextInputArea
|
<TextInputArea
|
||||||
value={generatorState.textToEncode}
|
value={generatorState.textToEncode}
|
||||||
onChange={setTextToEncode}
|
onChange={setTextToEncode}
|
||||||
placeholder={t('qrCode:urlInputPlaceholder')}
|
placeholder={'请输入 URL 或文本内容,将自动生成二维码'}
|
||||||
showCount={true}
|
showCount={true}
|
||||||
showClear={true}
|
showClear={true}
|
||||||
allowCopy={false}
|
allowCopy={false}
|
||||||
@@ -66,12 +64,12 @@ export default function GeneratePanel() {
|
|||||||
{generatorState.generating ? (
|
{generatorState.generating ? (
|
||||||
<>
|
<>
|
||||||
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||||
{t('qrCode:generating')}
|
{'生成中...'}
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<QrCode className="w-4 h-4 mr-2" />
|
<QrCode className="w-4 h-4 mr-2" />
|
||||||
{t('qrCode:generateButton')}
|
{'生成二维码'}
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</Button>
|
</Button>
|
||||||
@@ -88,11 +86,11 @@ export default function GeneratePanel() {
|
|||||||
<div className="border border-border rounded-xl bg-card text-card-foreground shadow-sm p-3 mb-3">
|
<div className="border border-border rounded-xl bg-card text-card-foreground shadow-sm p-3 mb-3">
|
||||||
<div className="flex items-center justify-between mb-1.5">
|
<div className="flex items-center justify-between mb-1.5">
|
||||||
<Label className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider select-none pl-0.5">
|
<Label className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider select-none pl-0.5">
|
||||||
{t('qrCode:textPreviewLabel')}
|
{'原始文本'}
|
||||||
</Label>
|
</Label>
|
||||||
<Button variant="ghost" size="sm" onClick={backToEdit} className="h-6 px-2 text-xs">
|
<Button variant="ghost" size="sm" onClick={backToEdit} className="h-6 px-2 text-xs">
|
||||||
<Pencil className="w-3 h-3 mr-1" />
|
<Pencil className="w-3 h-3 mr-1" />
|
||||||
{t('qrCode:editButton')}
|
{'编辑'}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
|
|||||||
@@ -1,7 +1,8 @@
|
|||||||
import { useCallback, useEffect, useRef } from 'react';
|
import { useCallback, useEffect, useRef } from 'react';
|
||||||
import { Image, X } from 'lucide-react';
|
import { Image, X } from 'lucide-react';
|
||||||
import { toast } from 'sonner';
|
import { toast } from 'sonner';
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Label } from '@/components/ui/label';
|
||||||
|
|
||||||
interface ImageUploaderProps {
|
interface ImageUploaderProps {
|
||||||
/** 选中的文件 */
|
/** 选中的文件 */
|
||||||
@@ -29,7 +30,6 @@ const ImageUploader = ({
|
|||||||
dragging,
|
dragging,
|
||||||
onDraggingChange,
|
onDraggingChange,
|
||||||
}: ImageUploaderProps) => {
|
}: ImageUploaderProps) => {
|
||||||
const { t } = useI18n('qrCode');
|
|
||||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||||
|
|
||||||
const handleFileChange = useCallback(
|
const handleFileChange = useCallback(
|
||||||
@@ -45,8 +45,8 @@ const ImageUploader = ({
|
|||||||
URL.revokeObjectURL(previewUrl);
|
URL.revokeObjectURL(previewUrl);
|
||||||
}
|
}
|
||||||
onClearFile();
|
onClearFile();
|
||||||
toast.success(t('qrCode:imageCleared'));
|
toast.success('图片已清除');
|
||||||
}, [previewUrl, onClearFile, t]);
|
}, [previewUrl, onClearFile]);
|
||||||
|
|
||||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
if (e.target.files && e.target.files.length > 0) {
|
if (e.target.files && e.target.files.length > 0) {
|
||||||
@@ -86,10 +86,10 @@ const ImageUploader = ({
|
|||||||
if (file) {
|
if (file) {
|
||||||
try {
|
try {
|
||||||
handleFileChange(file);
|
handleFileChange(file);
|
||||||
toast.success(t('qrCode:imagePasted'));
|
toast.success('图片粘贴成功,正在解析...');
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('处理粘贴图片失败:', error);
|
console.error('处理粘贴图片失败:', error);
|
||||||
toast.error(t('qrCode:imagePasteError'));
|
toast.error('粘贴图片失败,请重试');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
@@ -102,7 +102,7 @@ const ImageUploader = ({
|
|||||||
return () => {
|
return () => {
|
||||||
document.removeEventListener('paste', handlePaste);
|
document.removeEventListener('paste', handlePaste);
|
||||||
};
|
};
|
||||||
}, [handleFileChange, t]);
|
}, [handleFileChange]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
@@ -111,7 +111,7 @@ const ImageUploader = ({
|
|||||||
? 'border-green-600 bg-green-50'
|
? 'border-green-600 bg-green-50'
|
||||||
: selectedFile
|
: selectedFile
|
||||||
? 'border-green-600 bg-green-50/50'
|
? 'border-green-600 bg-green-50/50'
|
||||||
: 'border-input bg-muted hover:border-green-600 hover:bg-green-500/10/50'
|
: 'border-input bg-muted hover:border-green-600 hover:bg-green-500/10'
|
||||||
}`}
|
}`}
|
||||||
onDragOver={handleDragOver}
|
onDragOver={handleDragOver}
|
||||||
onDragLeave={handleDragLeave}
|
onDragLeave={handleDragLeave}
|
||||||
@@ -125,7 +125,7 @@ const ImageUploader = ({
|
|||||||
className="hidden"
|
className="hidden"
|
||||||
id="qr-code-upload"
|
id="qr-code-upload"
|
||||||
/>
|
/>
|
||||||
<label htmlFor="qr-code-upload" className="cursor-pointer text-center w-full">
|
<Label htmlFor="qr-code-upload" className="cursor-pointer text-center w-full">
|
||||||
{selectedFile ? (
|
{selectedFile ? (
|
||||||
<div className="text-center w-full relative">
|
<div className="text-center w-full relative">
|
||||||
<div className="relative inline-block">
|
<div className="relative inline-block">
|
||||||
@@ -134,20 +134,22 @@ const ImageUploader = ({
|
|||||||
alt="QR Code Preview"
|
alt="QR Code Preview"
|
||||||
className="max-w-full max-h-40 rounded-lg object-contain"
|
className="max-w-full max-h-40 rounded-lg object-contain"
|
||||||
/>
|
/>
|
||||||
<button
|
<Button
|
||||||
type="button"
|
type="button"
|
||||||
|
variant="destructive"
|
||||||
|
size="icon"
|
||||||
data-testid="ClearIcon"
|
data-testid="ClearIcon"
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
handleClearFile();
|
handleClearFile();
|
||||||
}}
|
}}
|
||||||
className="absolute -top-2 -right-2 w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center hover:bg-red-600 transition-colors"
|
className="absolute -top-2 -right-2 h-6 w-6 rounded-full"
|
||||||
>
|
>
|
||||||
<X className="w-3 h-3" />
|
<X className="w-3 h-3" />
|
||||||
</button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<span className="block text-sm text-muted-foreground mt-2">{selectedFile.name}</span>
|
<span className="block text-sm text-muted-foreground mt-2">{selectedFile.name}</span>
|
||||||
<span className="block text-xs text-muted-foreground">{t('qrCode:clickToChange')}</span>
|
<span className="block text-xs text-muted-foreground">{'点击更换图片'}</span>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
@@ -156,14 +158,14 @@ const ImageUploader = ({
|
|||||||
className="w-12 h-12 text-muted-foreground mx-auto mb-2"
|
className="w-12 h-12 text-muted-foreground mx-auto mb-2"
|
||||||
/>
|
/>
|
||||||
<span className="block text-sm text-muted-foreground mb-1">
|
<span className="block text-sm text-muted-foreground mb-1">
|
||||||
{t('qrCode:clickToUpload')}
|
{'点击、拖拽或粘贴上传二维码图片'}
|
||||||
</span>
|
</span>
|
||||||
<span className="block text-xs text-muted-foreground">
|
<span className="block text-xs text-muted-foreground">
|
||||||
{t('qrCode:supportFormats')}
|
{'支持 PNG、JPG、WEBP、Base64 格式'}
|
||||||
</span>
|
</span>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</label>
|
</Label>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
@@ -2,15 +2,13 @@ import { useCallback, useEffect } from 'react';
|
|||||||
import { RefreshCw } from 'lucide-react';
|
import { RefreshCw } from 'lucide-react';
|
||||||
import { toast } from 'sonner';
|
import { toast } from 'sonner';
|
||||||
import TextInputArea from '@/components/TextInputArea';
|
import TextInputArea from '@/components/TextInputArea';
|
||||||
import ImageUploader from '@/components/ImageUploader';
|
import ImageUploader from './ImageUploader';
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
import { useQrCodeContext } from '../contexts/QrCodeContext';
|
import { useQrCodeContext } from '../contexts/QrCodeContext';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Label } from '@/components/ui/label';
|
import { Label } from '@/components/ui/label';
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
export default function ParsePanel() {
|
export default function ParsePanel() {
|
||||||
const { t } = useI18n('qrCode');
|
|
||||||
const { parserState, setParserState, handleFileChange, handleClearFile } = useQrCodeContext();
|
const { parserState, setParserState, handleFileChange, handleClearFile } = useQrCodeContext();
|
||||||
|
|
||||||
const hasFile = parserState.selectedFile !== null;
|
const hasFile = parserState.selectedFile !== null;
|
||||||
@@ -27,7 +25,7 @@ export default function ParsePanel() {
|
|||||||
const file = items[i].getAsFile();
|
const file = items[i].getAsFile();
|
||||||
if (file) {
|
if (file) {
|
||||||
handleFileChange(file);
|
handleFileChange(file);
|
||||||
toast.success(t('qrCode:imagePasted'));
|
toast.success('图片粘贴成功,正在解析...');
|
||||||
}
|
}
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -41,14 +39,14 @@ export default function ParsePanel() {
|
|||||||
const blob = await response.blob();
|
const blob = await response.blob();
|
||||||
const file = new File([blob], 'pasted-image.png', { type: blob.type });
|
const file = new File([blob], 'pasted-image.png', { type: blob.type });
|
||||||
handleFileChange(file);
|
handleFileChange(file);
|
||||||
toast.success(t('qrCode:imagePasted'));
|
toast.success('图片粘贴成功,正在解析...');
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('处理 Base64 图片失败:', error);
|
console.error('处理 Base64 图片失败:', error);
|
||||||
toast.error(t('qrCode:imagePasteError'));
|
toast.error('粘贴图片失败,请重试');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[handleFileChange, t],
|
[handleFileChange],
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -82,11 +80,11 @@ export default function ParsePanel() {
|
|||||||
<div className="border border-border rounded-xl bg-card text-card-foreground shadow-sm p-3 mb-3">
|
<div className="border border-border rounded-xl bg-card text-card-foreground shadow-sm p-3 mb-3">
|
||||||
<div className="flex items-center justify-between mb-1.5">
|
<div className="flex items-center justify-between mb-1.5">
|
||||||
<Label className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider select-none pl-0.5">
|
<Label className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider select-none pl-0.5">
|
||||||
{t('qrCode:uploadedImage')}
|
{'已上传图片'}
|
||||||
</Label>
|
</Label>
|
||||||
<Button variant="ghost" size="sm" onClick={handleClearFile} className="h-6 px-2 text-xs">
|
<Button variant="ghost" size="sm" onClick={handleClearFile} className="h-6 px-2 text-xs">
|
||||||
<RefreshCw className="w-3 h-3 mr-1" />
|
<RefreshCw className="w-3 h-3 mr-1" />
|
||||||
{t('qrCode:reuploadButton')}
|
{'重新上传'}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-3 bg-muted/50 rounded-md p-2">
|
<div className="flex items-center gap-3 bg-muted/50 rounded-md p-2">
|
||||||
@@ -98,7 +96,7 @@ export default function ParsePanel() {
|
|||||||
<div className="flex-1 min-w-0">
|
<div className="flex-1 min-w-0">
|
||||||
<p className="text-sm text-foreground truncate">{parserState.selectedFile?.name}</p>
|
<p className="text-sm text-foreground truncate">{parserState.selectedFile?.name}</p>
|
||||||
{parserState.parsing && (
|
{parserState.parsing && (
|
||||||
<p className="text-xs text-primary animate-pulse mt-1">{t('qrCode:parsing')}</p>
|
<p className="text-xs text-primary animate-pulse mt-1">{'解析中...'}</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -113,7 +111,7 @@ export default function ParsePanel() {
|
|||||||
>
|
>
|
||||||
<div className="flex flex-col space-y-2.5">
|
<div className="flex flex-col space-y-2.5">
|
||||||
<Label className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider pl-0.5">
|
<Label className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider pl-0.5">
|
||||||
{t('qrCode:resultLabel')}
|
{'解析结果'}
|
||||||
</Label>
|
</Label>
|
||||||
|
|
||||||
<TextInputArea
|
<TextInputArea
|
||||||
@@ -121,7 +119,7 @@ export default function ParsePanel() {
|
|||||||
readOnly={true}
|
readOnly={true}
|
||||||
showClear={false}
|
showClear={false}
|
||||||
allowCopy={true}
|
allowCopy={true}
|
||||||
placeholder={parserState.parsing ? '' : t('qrCode:resultPlaceholder')}
|
placeholder={parserState.parsing ? '' : '解析结果将显示在此处'}
|
||||||
minRows={4}
|
minRows={4}
|
||||||
maxRows={8}
|
maxRows={8}
|
||||||
externalError={parserState.parseError || undefined}
|
externalError={parserState.parseError || undefined}
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Copy, Download } from 'lucide-react';
|
import { Copy, Download } from 'lucide-react';
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
|
|
||||||
@@ -24,8 +23,6 @@ const QrCodePreview = ({
|
|||||||
className,
|
className,
|
||||||
...props
|
...props
|
||||||
}: QrCodePreviewProps) => {
|
}: QrCodePreviewProps) => {
|
||||||
const { t } = useI18n('qrCode');
|
|
||||||
|
|
||||||
// 空状态下的虚线骨架屏
|
// 空状态下的虚线骨架屏
|
||||||
if (!qrCodeDataUrl) {
|
if (!qrCodeDataUrl) {
|
||||||
return (
|
return (
|
||||||
@@ -37,7 +34,7 @@ const QrCodePreview = ({
|
|||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
<p className="text-sm text-muted-foreground text-center">
|
<p className="text-sm text-muted-foreground text-center">
|
||||||
{placeholderText || t('qrCode:qrCodeWillShow')}
|
{placeholderText || '二维码将显示在这里'}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@@ -68,12 +65,12 @@ const QrCodePreview = ({
|
|||||||
<div className="flex w-full gap-2 mt-3">
|
<div className="flex w-full gap-2 mt-3">
|
||||||
<Button variant="outline" size="sm" onClick={onDownload} className="flex-1 h-8">
|
<Button variant="outline" size="sm" onClick={onDownload} className="flex-1 h-8">
|
||||||
<Download className="w-3.5 h-3.5 text-muted-foreground" />
|
<Download className="w-3.5 h-3.5 text-muted-foreground" />
|
||||||
<span className="truncate text-xs">{t('qrCode:downloadButton')}</span>
|
<span className="truncate text-xs">{'下载二维码'}</span>
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
<Button variant="default" size="sm" onClick={onCopy} className="flex-1 h-8">
|
<Button variant="default" size="sm" onClick={onCopy} className="flex-1 h-8">
|
||||||
<Copy className="w-3.5 h-3.5" />
|
<Copy className="w-3.5 h-3.5" />
|
||||||
<span className="truncate text-xs">{t('qrCode:copyQrButton')}</span>
|
<span className="truncate text-xs">{'复制二维码'}</span>
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -3,7 +3,6 @@ import QRious from 'qrious';
|
|||||||
import { toast } from 'sonner';
|
import { toast } from 'sonner';
|
||||||
import { parseQrCodeFromFile } from '@/utils/qrCodeParser';
|
import { parseQrCodeFromFile } from '@/utils/qrCodeParser';
|
||||||
import { useContextMenuData } from '@/utils/useContextMenuData';
|
import { useContextMenuData } from '@/utils/useContextMenuData';
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
import type { QrCodeContextValue } from '../contexts/QrCodeContext';
|
import type { QrCodeContextValue } from '../contexts/QrCodeContext';
|
||||||
import type { QrCodeGeneratorState, QrCodeMode, QrCodeParserState } from '../types';
|
import type { QrCodeGeneratorState, QrCodeMode, QrCodeParserState } from '../types';
|
||||||
|
|
||||||
@@ -78,8 +77,6 @@ function generateQrCodeDataUrl(text: string): string {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function useQrCode(): QrCodeContextValue {
|
export function useQrCode(): QrCodeContextValue {
|
||||||
const { t } = useI18n('qrCode');
|
|
||||||
|
|
||||||
const [mode, setMode] = useState<QrCodeMode>('generate');
|
const [mode, setMode] = useState<QrCodeMode>('generate');
|
||||||
|
|
||||||
const [generatorState, setGeneratorState] = useState<QrCodeGeneratorState>({
|
const [generatorState, setGeneratorState] = useState<QrCodeGeneratorState>({
|
||||||
@@ -112,8 +109,7 @@ export function useQrCode(): QrCodeContextValue {
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
/** 自动检测URL并生成二维码 */
|
/** 自动检测URL并生成二维码 */
|
||||||
const autoGenerateIfUrl = useCallback(
|
const autoGenerateIfUrl = useCallback((text: string) => {
|
||||||
(text: string) => {
|
|
||||||
if (debounceTimerRef.current) {
|
if (debounceTimerRef.current) {
|
||||||
clearTimeout(debounceTimerRef.current);
|
clearTimeout(debounceTimerRef.current);
|
||||||
}
|
}
|
||||||
@@ -139,13 +135,11 @@ export function useQrCode(): QrCodeContextValue {
|
|||||||
setGeneratorState((prev) => ({
|
setGeneratorState((prev) => ({
|
||||||
...prev,
|
...prev,
|
||||||
generating: false,
|
generating: false,
|
||||||
inputError: t('qrCode:generateError'),
|
inputError: '生成二维码失败,请重试',
|
||||||
}));
|
}));
|
||||||
}
|
}
|
||||||
}, DEBOUNCE_DELAY);
|
}, DEBOUNCE_DELAY);
|
||||||
},
|
}, []);
|
||||||
[t],
|
|
||||||
);
|
|
||||||
|
|
||||||
const setTextToEncode = useCallback(
|
const setTextToEncode = useCallback(
|
||||||
(text: string) => {
|
(text: string) => {
|
||||||
@@ -160,8 +154,8 @@ export function useQrCode(): QrCodeContextValue {
|
|||||||
const text = generatorState.textToEncode.trim();
|
const text = generatorState.textToEncode.trim();
|
||||||
|
|
||||||
if (!text) {
|
if (!text) {
|
||||||
setGeneratorState((prev) => ({ ...prev, inputError: t('qrCode:inputRequired') }));
|
setGeneratorState((prev) => ({ ...prev, inputError: '请输入内容' }));
|
||||||
toast.error(t('qrCode:inputRequired'));
|
toast.error('请输入内容');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -176,9 +170,9 @@ export function useQrCode(): QrCodeContextValue {
|
|||||||
setGeneratorState((prev) => ({
|
setGeneratorState((prev) => ({
|
||||||
...prev,
|
...prev,
|
||||||
generating: false,
|
generating: false,
|
||||||
inputError: t('qrCode:generateError'),
|
inputError: '生成二维码失败,请重试',
|
||||||
}));
|
}));
|
||||||
toast.error(t('qrCode:generateError'));
|
toast.error('生成二维码失败,请重试');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -190,7 +184,7 @@ export function useQrCode(): QrCodeContextValue {
|
|||||||
generating: false,
|
generating: false,
|
||||||
}));
|
}));
|
||||||
}, 0);
|
}, 0);
|
||||||
}, [generatorState.textToEncode, t]);
|
}, [generatorState.textToEncode]);
|
||||||
|
|
||||||
/** 返回编辑态,保留上次输入内容 */
|
/** 返回编辑态,保留上次输入内容 */
|
||||||
const backToEdit = useCallback(() => {
|
const backToEdit = useCallback(() => {
|
||||||
@@ -207,8 +201,7 @@ export function useQrCode(): QrCodeContextValue {
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
/** 从图片URL解析二维码 */
|
/** 从图片URL解析二维码 */
|
||||||
const parseQrCodeFromUrl = useCallback(
|
const parseQrCodeFromUrl = useCallback(async (imageUrl: string) => {
|
||||||
async (imageUrl: string) => {
|
|
||||||
try {
|
try {
|
||||||
setParserState((prev) => ({
|
setParserState((prev) => ({
|
||||||
...prev,
|
...prev,
|
||||||
@@ -230,23 +223,21 @@ export function useQrCode(): QrCodeContextValue {
|
|||||||
|
|
||||||
if (result.success && result.data) {
|
if (result.success && result.data) {
|
||||||
setParserState((prev) => ({ ...prev, decodedResult: result.data! }));
|
setParserState((prev) => ({ ...prev, decodedResult: result.data! }));
|
||||||
toast.success(t('qrCode:parseSuccess'));
|
toast.success('二维码解析成功');
|
||||||
} else {
|
} else {
|
||||||
const errorMsg = result.error || t('qrCode:noQrDetected');
|
const errorMsg = result.error || '未检测到二维码,请确保图片清晰且包含二维码';
|
||||||
setParserState((prev) => ({ ...prev, parseError: errorMsg }));
|
setParserState((prev) => ({ ...prev, parseError: errorMsg }));
|
||||||
toast.error(errorMsg);
|
toast.error(errorMsg);
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('解析图片二维码失败:', error);
|
console.error('解析图片二维码失败:', error);
|
||||||
const errorMsg = error instanceof Error ? error.message : t('qrCode:parseError');
|
const errorMsg = error instanceof Error ? error.message : '解析二维码失败,请重试';
|
||||||
setParserState((prev) => ({ ...prev, parseError: errorMsg }));
|
setParserState((prev) => ({ ...prev, parseError: errorMsg }));
|
||||||
toast.error(errorMsg);
|
toast.error(errorMsg);
|
||||||
} finally {
|
} finally {
|
||||||
setParserState((prev) => ({ ...prev, parsing: false }));
|
setParserState((prev) => ({ ...prev, parsing: false }));
|
||||||
}
|
}
|
||||||
},
|
}, []);
|
||||||
[t],
|
|
||||||
);
|
|
||||||
|
|
||||||
/** 右键菜单传入URL时,自动生成二维码或解析图片 */
|
/** 右键菜单传入URL时,自动生成二维码或解析图片 */
|
||||||
const handleContextMenuData = useCallback(
|
const handleContextMenuData = useCallback(
|
||||||
@@ -294,8 +285,7 @@ export function useQrCode(): QrCodeContextValue {
|
|||||||
useContextMenuData({ featureKey: 'qrCode', onData: handleContextMenuData });
|
useContextMenuData({ featureKey: 'qrCode', onData: handleContextMenuData });
|
||||||
|
|
||||||
// 反向活态解析二维码算法
|
// 反向活态解析二维码算法
|
||||||
const parseQrCode = useCallback(
|
const parseQrCode = useCallback(async (file: File) => {
|
||||||
async (file: File) => {
|
|
||||||
try {
|
try {
|
||||||
setParserState((prev) => ({ ...prev, parsing: true, parseError: '', decodedResult: '' }));
|
setParserState((prev) => ({ ...prev, parsing: true, parseError: '', decodedResult: '' }));
|
||||||
|
|
||||||
@@ -303,23 +293,21 @@ export function useQrCode(): QrCodeContextValue {
|
|||||||
|
|
||||||
if (result.success && result.data) {
|
if (result.success && result.data) {
|
||||||
setParserState((prev) => ({ ...prev, decodedResult: result.data! }));
|
setParserState((prev) => ({ ...prev, decodedResult: result.data! }));
|
||||||
toast.success(t('qrCode:parseSuccess'));
|
toast.success('二维码解析成功');
|
||||||
} else {
|
} else {
|
||||||
const errorMsg = result.error || t('qrCode:noQrDetected');
|
const errorMsg = result.error || '未检测到二维码,请确保图片清晰且包含二维码';
|
||||||
setParserState((prev) => ({ ...prev, parseError: errorMsg }));
|
setParserState((prev) => ({ ...prev, parseError: errorMsg }));
|
||||||
toast.error(errorMsg);
|
toast.error(errorMsg);
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('解析二维码失败:', error);
|
console.error('解析二维码失败:', error);
|
||||||
const errorMsg = error instanceof Error ? error.message : t('qrCode:parseError');
|
const errorMsg = error instanceof Error ? error.message : '解析二维码失败,请重试';
|
||||||
setParserState((prev) => ({ ...prev, parseError: errorMsg }));
|
setParserState((prev) => ({ ...prev, parseError: errorMsg }));
|
||||||
toast.error(errorMsg);
|
toast.error(errorMsg);
|
||||||
} finally {
|
} finally {
|
||||||
setParserState((prev) => ({ ...prev, parsing: false }));
|
setParserState((prev) => ({ ...prev, parsing: false }));
|
||||||
}
|
}
|
||||||
},
|
}, []);
|
||||||
[t],
|
|
||||||
);
|
|
||||||
|
|
||||||
const downloadQrCode = useCallback(() => {
|
const downloadQrCode = useCallback(() => {
|
||||||
if (!generatorState.qrCodeDataUrl) return;
|
if (!generatorState.qrCodeDataUrl) return;
|
||||||
@@ -328,8 +316,8 @@ export function useQrCode(): QrCodeContextValue {
|
|||||||
link.href = generatorState.qrCodeDataUrl;
|
link.href = generatorState.qrCodeDataUrl;
|
||||||
link.download = 'qrcode.png';
|
link.download = 'qrcode.png';
|
||||||
link.click();
|
link.click();
|
||||||
toast.success(t('qrCode:qrCodeDownloadSuccess'));
|
toast.success('二维码下载成功');
|
||||||
}, [generatorState.qrCodeDataUrl, t]);
|
}, [generatorState.qrCodeDataUrl]);
|
||||||
|
|
||||||
const copyQrCode = useCallback(async () => {
|
const copyQrCode = useCallback(async () => {
|
||||||
if (!generatorState.qrCodeDataUrl) return;
|
if (!generatorState.qrCodeDataUrl) return;
|
||||||
@@ -344,12 +332,12 @@ export function useQrCode(): QrCodeContextValue {
|
|||||||
}),
|
}),
|
||||||
]);
|
]);
|
||||||
|
|
||||||
toast.success(t('qrCode:qrCodeCopySuccess'));
|
toast.success('二维码已复制到剪贴板');
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('复制二维码失败:', error);
|
console.error('复制二维码失败:', error);
|
||||||
toast.error(t('qrCode:copyError'));
|
toast.error('复制失败,请重试');
|
||||||
}
|
}
|
||||||
}, [generatorState.qrCodeDataUrl, t]);
|
}, [generatorState.qrCodeDataUrl]);
|
||||||
|
|
||||||
const handleFileChange = useCallback(
|
const handleFileChange = useCallback(
|
||||||
(file: File) => {
|
(file: File) => {
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
|
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
|
||||||
|
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
import { QrCodeContext } from './contexts/QrCodeContext';
|
import { QrCodeContext } from './contexts/QrCodeContext';
|
||||||
import { useQrCode } from './hooks/useQrCode';
|
import { useQrCode } from './hooks/useQrCode';
|
||||||
import GeneratePanel from './components/GeneratePanel';
|
import GeneratePanel from './components/GeneratePanel';
|
||||||
@@ -8,13 +7,12 @@ import ParsePanel from './components/ParsePanel';
|
|||||||
import type { QrCodeMode } from './types';
|
import type { QrCodeMode } from './types';
|
||||||
|
|
||||||
export default function Index() {
|
export default function Index() {
|
||||||
const { t } = useI18n('qrCode');
|
|
||||||
const qrCode = useQrCode();
|
const qrCode = useQrCode();
|
||||||
|
|
||||||
// 模式选项驱动骨架
|
// 模式选项驱动骨架
|
||||||
const modeOptions = [
|
const modeOptions = [
|
||||||
{ value: 'generate' as QrCodeMode, label: t('qrCode:urlToQr') },
|
{ value: 'generate' as QrCodeMode, label: '文本转二维码' },
|
||||||
{ value: 'parse' as QrCodeMode, label: t('qrCode:qrToUrl') },
|
{ value: 'parse' as QrCodeMode, label: '二维码转文本' },
|
||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|||||||
@@ -3,17 +3,15 @@ import { Label } from '@/components/ui/label';
|
|||||||
import { Badge } from '@/components/ui/badge';
|
import { Badge } from '@/components/ui/badge';
|
||||||
import { Shield, ShieldCheck, MousePointerClick, AlertTriangle } from 'lucide-react';
|
import { Shield, ShieldCheck, MousePointerClick, AlertTriangle } from 'lucide-react';
|
||||||
import { useRightClickRestorer } from './useRightClickRestorer';
|
import { useRightClickRestorer } from './useRightClickRestorer';
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
|
|
||||||
export default function Index() {
|
export default function Index() {
|
||||||
const { t } = useI18n('rightClickRestorer');
|
|
||||||
const { domain, isLoading, isUnlocked, isUnsupported, unlock } = useRightClickRestorer();
|
const { domain, isLoading, isUnlocked, isUnsupported, unlock } = useRightClickRestorer();
|
||||||
|
|
||||||
if (isLoading) {
|
if (isLoading) {
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col items-center justify-center py-12 min-h-[280px] w-full">
|
<div className="flex flex-col items-center justify-center py-12 min-h-[280px] w-full">
|
||||||
<span className="text-xs text-muted-foreground mt-2 font-medium tracking-wide">
|
<span className="text-xs text-muted-foreground mt-2 font-medium tracking-wide">
|
||||||
{t('rightClickRestorer:loading')}
|
{'正在加载...'}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@@ -24,7 +22,7 @@ export default function Index() {
|
|||||||
{/* Current Domain */}
|
{/* Current Domain */}
|
||||||
<div className="w-full rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden">
|
<div className="w-full rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden">
|
||||||
<div className="p-4">
|
<div className="p-4">
|
||||||
<Label className="text-sm font-medium">{t('rightClickRestorer:currentDomain')}</Label>
|
<Label className="text-sm font-medium">{'当前域名'}</Label>
|
||||||
<div className="mt-2 flex items-center justify-between gap-2">
|
<div className="mt-2 flex items-center justify-between gap-2">
|
||||||
<code className="text-sm bg-muted px-2 py-1 rounded truncate min-w-0 flex-1">
|
<code className="text-sm bg-muted px-2 py-1 rounded truncate min-w-0 flex-1">
|
||||||
{domain || '—'}
|
{domain || '—'}
|
||||||
@@ -32,17 +30,17 @@ export default function Index() {
|
|||||||
{isUnsupported ? (
|
{isUnsupported ? (
|
||||||
<Badge variant="destructive" className="gap-1 shrink-0">
|
<Badge variant="destructive" className="gap-1 shrink-0">
|
||||||
<AlertTriangle className="h-3 w-3" />
|
<AlertTriangle className="h-3 w-3" />
|
||||||
{t('rightClickRestorer:unsupported')}
|
{'不支持'}
|
||||||
</Badge>
|
</Badge>
|
||||||
) : isUnlocked ? (
|
) : isUnlocked ? (
|
||||||
<Badge variant="default" className="gap-1 bg-green-600 hover:bg-green-700 shrink-0">
|
<Badge variant="default" className="gap-1 bg-green-600 hover:bg-green-700 shrink-0">
|
||||||
<ShieldCheck className="h-3 w-3" />
|
<ShieldCheck className="h-3 w-3" />
|
||||||
{t('rightClickRestorer:statusUnlocked')}
|
{'已解锁'}
|
||||||
</Badge>
|
</Badge>
|
||||||
) : (
|
) : (
|
||||||
<Badge variant="secondary" className="gap-1 shrink-0">
|
<Badge variant="secondary" className="gap-1 shrink-0">
|
||||||
<Shield className="h-3 w-3" />
|
<Shield className="h-3 w-3" />
|
||||||
{t('rightClickRestorer:statusLocked')}
|
{'未解锁'}
|
||||||
</Badge>
|
</Badge>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
@@ -55,16 +53,18 @@ export default function Index() {
|
|||||||
{isUnsupported ? (
|
{isUnsupported ? (
|
||||||
<>
|
<>
|
||||||
<p className="text-xs text-muted-foreground">
|
<p className="text-xs text-muted-foreground">
|
||||||
{t('rightClickRestorer:unsupportedDesc')}
|
{'当前页面为浏览器内部页面或扩展页面,无法解锁右键功能。请切换到普通网页后重试。'}
|
||||||
</p>
|
</p>
|
||||||
<Button className="w-full gap-2" disabled variant="secondary">
|
<Button className="w-full gap-2" disabled variant="secondary">
|
||||||
<AlertTriangle className="h-4 w-4" />
|
<AlertTriangle className="h-4 w-4" />
|
||||||
{t('rightClickRestorer:unsupported')}
|
{'不支持'}
|
||||||
</Button>
|
</Button>
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<p className="text-xs text-muted-foreground">{t('rightClickRestorer:unlockDesc')}</p>
|
<p className="text-xs text-muted-foreground">
|
||||||
|
{'点击下方按钮,为当前网站临时解锁右键菜单。刷新页面后需要重新解锁。'}
|
||||||
|
</p>
|
||||||
<Button
|
<Button
|
||||||
className="w-full gap-2"
|
className="w-full gap-2"
|
||||||
onClick={() => void unlock()}
|
onClick={() => void unlock()}
|
||||||
@@ -72,9 +72,7 @@ export default function Index() {
|
|||||||
variant={isUnlocked ? 'secondary' : 'default'}
|
variant={isUnlocked ? 'secondary' : 'default'}
|
||||||
>
|
>
|
||||||
<MousePointerClick className="h-4 w-4" />
|
<MousePointerClick className="h-4 w-4" />
|
||||||
{isUnlocked
|
{isUnlocked ? '右键已解锁' : '解锁当前网站右键'}
|
||||||
? t('rightClickRestorer:alreadyUnlocked')
|
|
||||||
: t('rightClickRestorer:unlockBtn')}
|
|
||||||
</Button>
|
</Button>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -0,0 +1,32 @@
|
|||||||
|
import { render, screen } from '@testing-library/react';
|
||||||
|
import { describe, it, expect, vi } from 'vitest';
|
||||||
|
import Index from '../index';
|
||||||
|
|
||||||
|
// Mock the chrome APIs
|
||||||
|
vi.mock('@/utils/chromeStorage', () => ({
|
||||||
|
storageUtil: {
|
||||||
|
get: vi.fn().mockResolvedValue(null),
|
||||||
|
set: vi.fn().mockResolvedValue(undefined),
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
|
vi.mock('@/utils/storageCleaner', () => ({
|
||||||
|
getCurrentTab: vi.fn().mockResolvedValue({ id: 1, url: 'https://example.com' }),
|
||||||
|
isRestrictedUrl: vi.fn().mockReturnValue(false),
|
||||||
|
getCookieSize: vi.fn().mockResolvedValue(0),
|
||||||
|
getLocalStorageSize: vi.fn().mockResolvedValue(0),
|
||||||
|
getSessionStorageSize: vi.fn().mockResolvedValue(0),
|
||||||
|
getOriginStorageEstimate: vi.fn().mockResolvedValue(0),
|
||||||
|
getCacheStorageSize: vi.fn().mockResolvedValue(0),
|
||||||
|
getServiceWorkerCount: vi.fn().mockResolvedValue(0),
|
||||||
|
clearStorage: vi.fn().mockResolvedValue({ overallSuccess: true }),
|
||||||
|
formatCleaningResult: vi.fn().mockReturnValue('Cleaned successfully'),
|
||||||
|
}));
|
||||||
|
|
||||||
|
describe('StorageCleaner 页面', () => {
|
||||||
|
it('应该渲染初始化加载状态', () => {
|
||||||
|
// storageCleaner:initializing 的中文文案为「正在读取站点数据...」
|
||||||
|
render(<Index />);
|
||||||
|
expect(screen.getByText(/正在读取站点数据/)).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
||||||
+1
-4
@@ -14,7 +14,6 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
import { Switch } from '@/components/ui/switch';
|
import { Switch } from '@/components/ui/switch';
|
||||||
import { Label } from '@/components/ui/label';
|
import { Label } from '@/components/ui/label';
|
||||||
@@ -43,8 +42,6 @@ export default function AutoRefreshToggle({
|
|||||||
className,
|
className,
|
||||||
...props
|
...props
|
||||||
}: AutoRefreshToggleProps) {
|
}: AutoRefreshToggleProps) {
|
||||||
const { t } = useI18n('storageCleaner');
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={cn(
|
className={cn(
|
||||||
@@ -57,7 +54,7 @@ export default function AutoRefreshToggle({
|
|||||||
htmlFor="auto-refresh-switch"
|
htmlFor="auto-refresh-switch"
|
||||||
className="text-xs font-bold text-muted-foreground/90 cursor-pointer select-none tracking-wide uppercase"
|
className="text-xs font-bold text-muted-foreground/90 cursor-pointer select-none tracking-wide uppercase"
|
||||||
>
|
>
|
||||||
{t('storageCleaner:autoRefresh')}
|
{'清理后自动刷新页面'}
|
||||||
</Label>
|
</Label>
|
||||||
|
|
||||||
<Switch id="auto-refresh-switch" checked={reloadAfterClean} onCheckedChange={onChange} />
|
<Switch id="auto-refresh-switch" checked={reloadAfterClean} onCheckedChange={onChange} />
|
||||||
+1
-6
@@ -2,7 +2,6 @@ import React from 'react';
|
|||||||
import { CheckCircle, XCircle } from 'lucide-react';
|
import { CheckCircle, XCircle } from 'lucide-react';
|
||||||
import type { CleaningResult as CleaningResultType } from '@/types/storage';
|
import type { CleaningResult as CleaningResultType } from '@/types/storage';
|
||||||
import { formatCleaningResult } from '@/utils/storageCleaner';
|
import { formatCleaningResult } from '@/utils/storageCleaner';
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
interface CleaningResultProps extends React.HTMLAttributes<HTMLDivElement> {
|
interface CleaningResultProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||||
@@ -10,8 +9,6 @@ interface CleaningResultProps extends React.HTMLAttributes<HTMLDivElement> {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default function CleaningResult({ result, className, ...props }: CleaningResultProps) {
|
export default function CleaningResult({ result, className, ...props }: CleaningResultProps) {
|
||||||
const { t } = useI18n('storageCleaner');
|
|
||||||
|
|
||||||
if (!result) return null;
|
if (!result) return null;
|
||||||
|
|
||||||
const isSuccess = result.overallSuccess;
|
const isSuccess = result.overallSuccess;
|
||||||
@@ -33,9 +30,7 @@ export default function CleaningResult({ result, className, ...props }: Cleaning
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
<span className="text-xs sm:text-sm font-semibold leading-relaxed break-all">
|
<span className="text-xs sm:text-sm font-semibold leading-relaxed break-all">
|
||||||
{isSuccess
|
{isSuccess ? formatCleaningResult(result) : result.error || '部分清理失败'}
|
||||||
? formatCleaningResult(result, t)
|
|
||||||
: result.error || t('storageCleaner:partialFailure')}
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
+1
-4
@@ -1,5 +1,4 @@
|
|||||||
import { AlertCircle } from 'lucide-react';
|
import { AlertCircle } from 'lucide-react';
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
interface ErrorDisplayProps extends React.HTMLAttributes<HTMLDivElement> {
|
interface ErrorDisplayProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||||
@@ -7,8 +6,6 @@ interface ErrorDisplayProps extends React.HTMLAttributes<HTMLDivElement> {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default function ErrorDisplay({ error, className, ...props }: ErrorDisplayProps) {
|
export default function ErrorDisplay({ error, className, ...props }: ErrorDisplayProps) {
|
||||||
const { t } = useI18n('storageCleaner');
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={cn(
|
className={cn(
|
||||||
@@ -27,7 +24,7 @@ export default function ErrorDisplay({ error, className, ...props }: ErrorDispla
|
|||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p className="text-xs font-medium leading-relaxed text-muted-foreground/90 px-2">
|
<p className="text-xs font-medium leading-relaxed text-muted-foreground/90 px-2">
|
||||||
{t('storageCleaner:errorStandardOnly')}
|
{'存储清理功能仅适用于标准网页'}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
+14
-7
@@ -1,10 +1,18 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { formatBytes } from '@/utils/format';
|
import { formatBytes } from '@/utils/format';
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
import type { StorageSizeInfo } from './useStorageCleaner';
|
import type { StorageSizeInfo } from '../useStorageCleaner';
|
||||||
import { Checkbox } from '@/components/ui/checkbox';
|
import { Checkbox } from '@/components/ui/checkbox';
|
||||||
|
|
||||||
|
const OPTION_LABELS: Record<string, string> = {
|
||||||
|
localStorage: 'Local Storage',
|
||||||
|
sessionStorage: 'Session Storage',
|
||||||
|
indexedDB: '站点存储',
|
||||||
|
cookies: 'Cookies',
|
||||||
|
cacheStorage: 'Cache Storage',
|
||||||
|
serviceWorkers: 'Service Workers',
|
||||||
|
};
|
||||||
|
|
||||||
interface OptionItemProps extends React.HTMLAttributes<HTMLDivElement> {
|
interface OptionItemProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||||
labelKey: string;
|
labelKey: string;
|
||||||
checked: boolean;
|
checked: boolean;
|
||||||
@@ -20,10 +28,9 @@ export default function OptionItem({
|
|||||||
className,
|
className,
|
||||||
...props
|
...props
|
||||||
}: OptionItemProps) {
|
}: OptionItemProps) {
|
||||||
const { t } = useI18n('storageCleaner');
|
|
||||||
|
|
||||||
const sizeValue = sizeInfo?.value;
|
const sizeValue = sizeInfo?.value;
|
||||||
const isCount = sizeInfo?.displayType === 'count';
|
const isCount = sizeInfo?.displayType === 'count';
|
||||||
|
const label = OPTION_LABELS[labelKey] || labelKey;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
@@ -44,7 +51,7 @@ export default function OptionItem({
|
|||||||
checked ? 'text-foreground' : 'text-foreground/75',
|
checked ? 'text-foreground' : 'text-foreground/75',
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{t(labelKey)}
|
{label}
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
{sizeValue !== undefined && sizeValue > 0 ? (
|
{sizeValue !== undefined && sizeValue > 0 ? (
|
||||||
@@ -54,11 +61,11 @@ export default function OptionItem({
|
|||||||
checked ? 'text-primary/70' : 'text-muted-foreground/70',
|
checked ? 'text-primary/70' : 'text-muted-foreground/70',
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{isCount ? `${sizeValue} ${t('storageCleaner:countUnit')}` : formatBytes(sizeValue)}
|
{isCount ? `${sizeValue} 项` : formatBytes(sizeValue)}
|
||||||
</span>
|
</span>
|
||||||
) : (
|
) : (
|
||||||
<span className="block text-[10px] font-medium text-muted-foreground/50 mt-0.5 italic">
|
<span className="block text-[10px] font-medium text-muted-foreground/50 mt-0.5 italic">
|
||||||
{t('storageCleaner:noData')}
|
{'无数据'}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
+15
-9
@@ -10,7 +10,6 @@ import {
|
|||||||
import { Badge } from '@/components/ui/badge';
|
import { Badge } from '@/components/ui/badge';
|
||||||
import { AlertTriangle } from 'lucide-react';
|
import { AlertTriangle } from 'lucide-react';
|
||||||
import type { StorageCleanerOptions } from '@/types/storage';
|
import type { StorageCleanerOptions } from '@/types/storage';
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
export interface StorageCleanerConfirmProps {
|
export interface StorageCleanerConfirmProps {
|
||||||
@@ -20,17 +19,24 @@ export interface StorageCleanerConfirmProps {
|
|||||||
options: StorageCleanerOptions;
|
options: StorageCleanerOptions;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const OPTION_LABELS: Record<string, string> = {
|
||||||
|
localStorage: 'Local Storage',
|
||||||
|
sessionStorage: 'Session Storage',
|
||||||
|
indexedDB: '站点存储',
|
||||||
|
cookies: 'Cookies',
|
||||||
|
cacheStorage: 'Cache Storage',
|
||||||
|
serviceWorkers: 'Service Workers',
|
||||||
|
};
|
||||||
|
|
||||||
export function StorageCleanerConfirm({
|
export function StorageCleanerConfirm({
|
||||||
open,
|
open,
|
||||||
onClose,
|
onClose,
|
||||||
onConfirm,
|
onConfirm,
|
||||||
options,
|
options,
|
||||||
}: StorageCleanerConfirmProps) {
|
}: StorageCleanerConfirmProps) {
|
||||||
const { t } = useI18n('storageCleaner');
|
|
||||||
|
|
||||||
const selectedOptions = Object.entries(options)
|
const selectedOptions = Object.entries(options)
|
||||||
.filter(([_, value]) => value)
|
.filter(([_, value]) => value)
|
||||||
.map(([key, _]) => t(`storageCleaner:options.${key as keyof StorageCleanerOptions}`));
|
.map(([key, _]) => OPTION_LABELS[key] || key);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
|
<Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
|
||||||
@@ -42,14 +48,14 @@ export function StorageCleanerConfirm({
|
|||||||
{/* 头部标题区域 */}
|
{/* 头部标题区域 */}
|
||||||
<DialogHeader className="pt-1">
|
<DialogHeader className="pt-1">
|
||||||
<DialogTitle className="text-center text-lg font-bold tracking-tight text-foreground">
|
<DialogTitle className="text-center text-lg font-bold tracking-tight text-foreground">
|
||||||
{t('storageCleaner:confirmTitle')}
|
{'确认清理数据?'}
|
||||||
</DialogTitle>
|
</DialogTitle>
|
||||||
</DialogHeader>
|
</DialogHeader>
|
||||||
|
|
||||||
{/* 内容主体:限制最大宽度,防止内部元素在大分辨率下被横向拉得太松散 */}
|
{/* 内容主体:限制最大宽度,防止内部元素在大分辨率下被横向拉得太松散 */}
|
||||||
<div className="text-center py-4 flex flex-col items-center w-full max-w-[280px] mx-auto">
|
<div className="text-center py-4 flex flex-col items-center w-full max-w-[280px] mx-auto">
|
||||||
<DialogDescription className="mb-4 text-xs font-medium text-muted-foreground/90 leading-relaxed">
|
<DialogDescription className="mb-4 text-xs font-medium text-muted-foreground/90 leading-relaxed">
|
||||||
{t('storageCleaner:confirmDesc')}
|
{'您将永久删除当前页面的以下选定存储项。'}
|
||||||
</DialogDescription>
|
</DialogDescription>
|
||||||
|
|
||||||
{/* 待清理项目徽章群 */}
|
{/* 待清理项目徽章群 */}
|
||||||
@@ -69,7 +75,7 @@ export function StorageCleanerConfirm({
|
|||||||
<div className="inline-flex items-center justify-center gap-1.5 px-3.5 py-2 rounded-lg bg-destructive/5 border border-dashed border-destructive/20 w-full max-w-[240px]">
|
<div className="inline-flex items-center justify-center gap-1.5 px-3.5 py-2 rounded-lg bg-destructive/5 border border-dashed border-destructive/20 w-full max-w-[240px]">
|
||||||
<AlertTriangle className="h-3.5 w-3.5 text-destructive shrink-0" />
|
<AlertTriangle className="h-3.5 w-3.5 text-destructive shrink-0" />
|
||||||
<span className="text-[11px] font-bold text-destructive leading-none tracking-tight">
|
<span className="text-[11px] font-bold text-destructive leading-none tracking-tight">
|
||||||
{t('storageCleaner:irreversible')}
|
{'此操作不可撤销'}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -81,7 +87,7 @@ export function StorageCleanerConfirm({
|
|||||||
onClick={onConfirm}
|
onClick={onConfirm}
|
||||||
className="w-full text-xs font-bold shadow-sm h-9"
|
className="w-full text-xs font-bold shadow-sm h-9"
|
||||||
>
|
>
|
||||||
{t('storageCleaner:confirmAction')}
|
{'确认清理'}
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
@@ -89,7 +95,7 @@ export function StorageCleanerConfirm({
|
|||||||
onClick={onClose}
|
onClick={onClose}
|
||||||
className="w-full text-xs font-semibold shadow-sm h-9 text-muted-foreground hover:text-foreground"
|
className="w-full text-xs font-semibold shadow-sm h-9 text-muted-foreground hover:text-foreground"
|
||||||
>
|
>
|
||||||
{t('common_buttons_cancel')}
|
{'取消'}
|
||||||
</Button>
|
</Button>
|
||||||
</DialogFooter>
|
</DialogFooter>
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
+3
-6
@@ -1,8 +1,7 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import type { StorageCleanerOptions } from '@/types/storage';
|
import type { StorageCleanerOptions } from '@/types/storage';
|
||||||
import type { StorageSizeInfo } from './useStorageCleaner';
|
import type { StorageSizeInfo } from '../useStorageCleaner';
|
||||||
import OptionItem from './OptionItem';
|
import OptionItem from './OptionItem';
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
import { Checkbox } from '@/components/ui/checkbox';
|
import { Checkbox } from '@/components/ui/checkbox';
|
||||||
import { Label } from '@/components/ui/label';
|
import { Label } from '@/components/ui/label';
|
||||||
@@ -26,8 +25,6 @@ export default function StorageOptionsGrid({
|
|||||||
className,
|
className,
|
||||||
...props
|
...props
|
||||||
}: StorageOptionsGridProps) {
|
}: StorageOptionsGridProps) {
|
||||||
const { t } = useI18n('storageCleaner');
|
|
||||||
|
|
||||||
const optionKeys: (keyof StorageCleanerOptions)[] = [
|
const optionKeys: (keyof StorageCleanerOptions)[] = [
|
||||||
'localStorage',
|
'localStorage',
|
||||||
'sessionStorage',
|
'sessionStorage',
|
||||||
@@ -48,7 +45,7 @@ export default function StorageOptionsGrid({
|
|||||||
{optionKeys.map((key) => (
|
{optionKeys.map((key) => (
|
||||||
<OptionItem
|
<OptionItem
|
||||||
key={key}
|
key={key}
|
||||||
labelKey={`storageCleaner:options.${key}`}
|
labelKey={key}
|
||||||
checked={options[key]}
|
checked={options[key]}
|
||||||
sizeInfo={sizes[key]}
|
sizeInfo={sizes[key]}
|
||||||
onChange={() => onOptionChange(key)}
|
onChange={() => onOptionChange(key)}
|
||||||
@@ -62,7 +59,7 @@ export default function StorageOptionsGrid({
|
|||||||
className="border-t border-border flex justify-between items-center pl-3.5 pr-7 py-2.5 bg-muted/20 hover:bg-muted/40 cursor-pointer select-none transition-colors"
|
className="border-t border-border flex justify-between items-center pl-3.5 pr-7 py-2.5 bg-muted/20 hover:bg-muted/40 cursor-pointer select-none transition-colors"
|
||||||
>
|
>
|
||||||
<Label className="text-xs font-bold text-muted-foreground/90 cursor-pointer tracking-wide uppercase">
|
<Label className="text-xs font-bold text-muted-foreground/90 cursor-pointer tracking-wide uppercase">
|
||||||
{t('storageCleaner:selectAll')}
|
{'全选所有项'}
|
||||||
</Label>
|
</Label>
|
||||||
|
|
||||||
<Checkbox
|
<Checkbox
|
||||||
@@ -1,16 +1,13 @@
|
|||||||
import { Loader2 } from 'lucide-react';
|
import { Loader2 } from 'lucide-react';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import StorageCleanerConfirm from './StorageCleanerConfirm';
|
import StorageCleanerConfirm from './components/StorageCleanerConfirm';
|
||||||
import { useStorageCleaner } from './useStorageCleaner';
|
import { useStorageCleaner } from './useStorageCleaner';
|
||||||
import StorageOptionsGrid from './StorageOptionsGrid';
|
import StorageOptionsGrid from './components/StorageOptionsGrid';
|
||||||
import AutoRefreshToggle from './AutoRefreshToggle';
|
import AutoRefreshToggle from './components/AutoRefreshToggle';
|
||||||
import ErrorDisplay from './ErrorDisplay';
|
import ErrorDisplay from './components/ErrorDisplay';
|
||||||
import CleaningResult from './CleaningResult';
|
import CleaningResult from './components/CleaningResult';
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
|
|
||||||
export default function Index() {
|
export default function Index() {
|
||||||
const { t } = useI18n('storageCleaner');
|
|
||||||
|
|
||||||
const {
|
const {
|
||||||
error,
|
error,
|
||||||
isInitializing,
|
isInitializing,
|
||||||
@@ -36,7 +33,7 @@ export default function Index() {
|
|||||||
<div className="flex flex-col items-center justify-center py-12 min-h-[280px] w-full">
|
<div className="flex flex-col items-center justify-center py-12 min-h-[280px] w-full">
|
||||||
<Loader2 className="h-6 w-6 text-muted-foreground/80" />
|
<Loader2 className="h-6 w-6 text-muted-foreground/80" />
|
||||||
<span className="text-xs text-muted-foreground mt-2 font-medium tracking-wide">
|
<span className="text-xs text-muted-foreground mt-2 font-medium tracking-wide">
|
||||||
{t('storageCleaner:initializing')}
|
{'正在读取站点数据...'}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@@ -75,10 +72,10 @@ export default function Index() {
|
|||||||
{loading ? (
|
{loading ? (
|
||||||
<>
|
<>
|
||||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||||
{t('storageCleaner:cleaning')}
|
{'正在清理...'}
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
t('storageCleaner:cleanNow')
|
'立即清理'
|
||||||
)}
|
)}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -16,7 +16,6 @@ import {
|
|||||||
getSessionStorageSize,
|
getSessionStorageSize,
|
||||||
isRestrictedUrl,
|
isRestrictedUrl,
|
||||||
} from '@/utils/storageCleaner';
|
} from '@/utils/storageCleaner';
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
import { toast } from 'sonner';
|
import { toast } from 'sonner';
|
||||||
|
|
||||||
const DEFAULT_OPTIONS: StorageCleanerOptions = {
|
const DEFAULT_OPTIONS: StorageCleanerOptions = {
|
||||||
@@ -59,7 +58,6 @@ export interface UseStorageCleanerReturn {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function useStorageCleaner(): UseStorageCleanerReturn {
|
export function useStorageCleaner(): UseStorageCleanerReturn {
|
||||||
const { t } = useI18n(['storageCleaner', 'common']);
|
|
||||||
const [error, setError] = useState<string>('');
|
const [error, setError] = useState<string>('');
|
||||||
const [isInitializing, setIsInitializing] = useState<boolean>(true);
|
const [isInitializing, setIsInitializing] = useState<boolean>(true);
|
||||||
const [options, setOptions] = useState<StorageCleanerOptions>(DEFAULT_OPTIONS);
|
const [options, setOptions] = useState<StorageCleanerOptions>(DEFAULT_OPTIONS);
|
||||||
@@ -93,11 +91,11 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
|
|||||||
if (currentRequestId !== requestIdRef.current) return;
|
if (currentRequestId !== requestIdRef.current) return;
|
||||||
|
|
||||||
if (!tab || !tab.url) {
|
if (!tab || !tab.url) {
|
||||||
setError(t('storageCleaner:errorNoTab'));
|
setError('无法获取当前标签页');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (isRestrictedUrl(tab.url)) {
|
if (isRestrictedUrl(tab.url)) {
|
||||||
setError(t('storageCleaner:errorRestricted'));
|
setError('存储清理功能不支持此页面');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -135,7 +133,7 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
|
|||||||
setIsInitializing(false);
|
setIsInitializing(false);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}, [t]);
|
}, []);
|
||||||
|
|
||||||
const loadInfoRef = useRef(loadInfo);
|
const loadInfoRef = useRef(loadInfo);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -177,10 +175,7 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
|
|||||||
if (storageTimerRef.current) clearTimeout(storageTimerRef.current);
|
if (storageTimerRef.current) clearTimeout(storageTimerRef.current);
|
||||||
storageTimerRef.current = setTimeout(async () => {
|
storageTimerRef.current = setTimeout(async () => {
|
||||||
await storageUtil
|
await storageUtil
|
||||||
.set('storageCleaner/preferences', {
|
.set('storageCleaner/preferences', { reloadAfterClean, selectedTypes: options })
|
||||||
reloadAfterClean,
|
|
||||||
selectedTypes: options,
|
|
||||||
})
|
|
||||||
.catch(console.error);
|
.catch(console.error);
|
||||||
}, 500);
|
}, 500);
|
||||||
}, [options, reloadAfterClean, isInitializing]);
|
}, [options, reloadAfterClean, isInitializing]);
|
||||||
@@ -209,7 +204,7 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
|
|||||||
|
|
||||||
const tab = await getCurrentTab();
|
const tab = await getCurrentTab();
|
||||||
if (!tab || !tab.id || !tab.url) {
|
if (!tab || !tab.id || !tab.url) {
|
||||||
toast.warning(t('storageCleaner:errorNoTab'));
|
toast.warning('无法获取当前标签页');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -219,18 +214,18 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
|
|||||||
setResult(cleaningResult);
|
setResult(cleaningResult);
|
||||||
|
|
||||||
if (reloadAfterClean && cleaningResult.overallSuccess) {
|
if (reloadAfterClean && cleaningResult.overallSuccess) {
|
||||||
toast.success(t('storageCleaner:cleanSuccessReload'));
|
toast.success('清理成功,即将刷新页面');
|
||||||
await chrome.tabs.reload(tab.id);
|
await chrome.tabs.reload(tab.id);
|
||||||
} else {
|
} else {
|
||||||
await loadInfo();
|
await loadInfo();
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
toast.error(`${t('storageCleaner:cleanError')}: ${String(err)}`);
|
toast.error(`清理失败: ${String(err)}`);
|
||||||
} finally {
|
} finally {
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
setShowConfirm(false);
|
setShowConfirm(false);
|
||||||
}
|
}
|
||||||
}, [options, reloadAfterClean, loadInfo, t]);
|
}, [options, reloadAfterClean, loadInfo]);
|
||||||
|
|
||||||
const totalBytes = useMemo(() => {
|
const totalBytes = useMemo(() => {
|
||||||
return Object.values(sizes).reduce((acc, s) => {
|
return Object.values(sizes).reduce((acc, s) => {
|
||||||
|
|||||||
@@ -5,7 +5,6 @@
|
|||||||
|
|
||||||
import { useMemo } from 'react';
|
import { useMemo } from 'react';
|
||||||
import { FileJson, FileText } from 'lucide-react';
|
import { FileJson, FileText } from 'lucide-react';
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
import { getGeneratorById } from '@/lib/generators';
|
import { getGeneratorById } from '@/lib/generators';
|
||||||
import type { FieldConfig } from '@/types/testDataGenerator';
|
import type { FieldConfig } from '@/types/testDataGenerator';
|
||||||
|
|
||||||
@@ -56,8 +55,6 @@ function getValueColor(value: string): string {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default function DataPreview({ fields }: DataPreviewProps) {
|
export default function DataPreview({ fields }: DataPreviewProps) {
|
||||||
const { t } = useI18n('testDataGenerator');
|
|
||||||
|
|
||||||
// 生成一条示例数据
|
// 生成一条示例数据
|
||||||
const sampleData = useMemo(() => {
|
const sampleData = useMemo(() => {
|
||||||
if (fields.length === 0) return null;
|
if (fields.length === 0) return null;
|
||||||
@@ -83,7 +80,7 @@ export default function DataPreview({ fields }: DataPreviewProps) {
|
|||||||
return (
|
return (
|
||||||
<div className="flex flex-col items-center justify-center h-full text-center">
|
<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" />
|
<FileJson className="h-8 w-8 text-muted-foreground/30 mb-2" />
|
||||||
<p className="text-xs text-muted-foreground/50">{t('testDataGenerator_noDataHint')}</p>
|
<p className="text-xs text-muted-foreground/50">{'配置字段后点击「生成数据」按钮'}</p>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -96,12 +93,10 @@ export default function DataPreview({ fields }: DataPreviewProps) {
|
|||||||
<div className="h-5 w-5 rounded bg-primary/10 flex items-center justify-center">
|
<div className="h-5 w-5 rounded bg-primary/10 flex items-center justify-center">
|
||||||
<FileText className="h-3 w-3 text-primary" />
|
<FileText className="h-3 w-3 text-primary" />
|
||||||
</div>
|
</div>
|
||||||
<span className="text-xs font-medium text-muted-foreground">
|
<span className="text-xs font-medium text-muted-foreground">{'示例数据'}</span>
|
||||||
{t('testDataGenerator_sampleData')}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
<span className="text-[10px] text-muted-foreground/50 bg-muted px-1.5 py-0.5 rounded">
|
<span className="text-[10px] text-muted-foreground/50 bg-muted px-1.5 py-0.5 rounded">
|
||||||
{Object.keys(sampleData).length} {t('testDataGenerator_fields')}
|
{Object.keys(sampleData).length} {'字段'}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -6,7 +6,6 @@
|
|||||||
import { Copy, Download } from 'lucide-react';
|
import { Copy, Download } from 'lucide-react';
|
||||||
import { toast } from 'sonner';
|
import { toast } from 'sonner';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
import { DataExporter } from '@/utils/dataExporter';
|
import { DataExporter } from '@/utils/dataExporter';
|
||||||
import type { GenerateResult } from '@/types/testDataGenerator';
|
import type { GenerateResult } from '@/types/testDataGenerator';
|
||||||
|
|
||||||
@@ -15,8 +14,6 @@ interface ExportPanelProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default function ExportPanel({ result }: ExportPanelProps) {
|
export default function ExportPanel({ result }: ExportPanelProps) {
|
||||||
const { t } = useI18n('testDataGenerator');
|
|
||||||
|
|
||||||
if (!result?.data || result.data.length === 0) {
|
if (!result?.data || result.data.length === 0) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
@@ -25,9 +22,9 @@ export default function ExportPanel({ result }: ExportPanelProps) {
|
|||||||
const content = DataExporter.toJSON(result.data!);
|
const content = DataExporter.toJSON(result.data!);
|
||||||
const success = await DataExporter.copyToClipboard(content);
|
const success = await DataExporter.copyToClipboard(content);
|
||||||
if (success) {
|
if (success) {
|
||||||
toast.success(t('testDataGenerator_copySuccess'));
|
toast.success('已复制到剪贴板');
|
||||||
} else {
|
} else {
|
||||||
toast.error(t('testDataGenerator_copyFailed'));
|
toast.error('复制失败');
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -35,9 +32,9 @@ export default function ExportPanel({ result }: ExportPanelProps) {
|
|||||||
const content = DataExporter.toCSV(result.data!);
|
const content = DataExporter.toCSV(result.data!);
|
||||||
const success = await DataExporter.copyToClipboard(content);
|
const success = await DataExporter.copyToClipboard(content);
|
||||||
if (success) {
|
if (success) {
|
||||||
toast.success(t('testDataGenerator_copySuccess'));
|
toast.success('已复制到剪贴板');
|
||||||
} else {
|
} else {
|
||||||
toast.error(t('testDataGenerator_copyFailed'));
|
toast.error('复制失败');
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -53,27 +50,27 @@ export default function ExportPanel({ result }: ExportPanelProps) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<h4 className="text-sm font-medium text-foreground">{t('testDataGenerator_export')}</h4>
|
<h4 className="text-sm font-medium text-foreground">{'导出数据'}</h4>
|
||||||
|
|
||||||
<div className="grid grid-cols-2 gap-2">
|
<div className="grid grid-cols-2 gap-2">
|
||||||
<Button variant="outline" size="sm" onClick={handleCopyJSON} className="h-9 gap-1.5">
|
<Button variant="outline" size="sm" onClick={handleCopyJSON} className="h-9 gap-1.5">
|
||||||
<Copy className="h-4 w-4" />
|
<Copy className="h-4 w-4" />
|
||||||
{t('testDataGenerator_copyJSON')}
|
{'复制 JSON'}
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
<Button variant="outline" size="sm" onClick={handleCopyCSV} className="h-9 gap-1.5">
|
<Button variant="outline" size="sm" onClick={handleCopyCSV} className="h-9 gap-1.5">
|
||||||
<Copy className="h-4 w-4" />
|
<Copy className="h-4 w-4" />
|
||||||
{t('testDataGenerator_copyCSV')}
|
{'复制 CSV'}
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
<Button variant="outline" size="sm" onClick={handleDownloadJSON} className="h-9 gap-1.5">
|
<Button variant="outline" size="sm" onClick={handleDownloadJSON} className="h-9 gap-1.5">
|
||||||
<Download className="h-4 w-4" />
|
<Download className="h-4 w-4" />
|
||||||
{t('testDataGenerator_downloadJSON')}
|
{'下载 JSON'}
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
<Button variant="outline" size="sm" onClick={handleDownloadCSV} className="h-9 gap-1.5">
|
<Button variant="outline" size="sm" onClick={handleDownloadCSV} className="h-9 gap-1.5">
|
||||||
<Download className="h-4 w-4" />
|
<Download className="h-4 w-4" />
|
||||||
{t('testDataGenerator_downloadCSV')}
|
{'下载 CSV'}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -4,8 +4,8 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import { useState, useCallback } from 'react';
|
import { useState, useCallback } from 'react';
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Label } from '@/components/ui/label';
|
||||||
import { Switch } from '@/components/ui/switch';
|
import { Switch } from '@/components/ui/switch';
|
||||||
import { Badge } from '@/components/ui/badge';
|
import { Badge } from '@/components/ui/badge';
|
||||||
import { getGeneratorById } from '@/lib/generators';
|
import { getGeneratorById } from '@/lib/generators';
|
||||||
@@ -21,7 +21,6 @@ interface FieldEditorProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default function FieldEditor({ field, onChange, allFieldNames = [] }: FieldEditorProps) {
|
export default function FieldEditor({ field, onChange, allFieldNames = [] }: FieldEditorProps) {
|
||||||
const { t } = useI18n('testDataGenerator');
|
|
||||||
const generator = getGeneratorById(field.generatorId);
|
const generator = getGeneratorById(field.generatorId);
|
||||||
const [nameError, setNameError] = useState<string | null>(null);
|
const [nameError, setNameError] = useState<string | null>(null);
|
||||||
|
|
||||||
@@ -29,20 +28,20 @@ export default function FieldEditor({ field, onChange, allFieldNames = [] }: Fie
|
|||||||
(name: string): string | null => {
|
(name: string): string | null => {
|
||||||
const trimmed = name.trim();
|
const trimmed = name.trim();
|
||||||
if (!trimmed) {
|
if (!trimmed) {
|
||||||
return t('testDataGenerator_fieldNameEmpty');
|
return '字段名称不能为空';
|
||||||
}
|
}
|
||||||
if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(trimmed)) {
|
if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(trimmed)) {
|
||||||
return t('testDataGenerator_fieldNameInvalid');
|
return '字段名称只能包含字母、数字和下划线';
|
||||||
}
|
}
|
||||||
const isDuplicate = allFieldNames.some(
|
const isDuplicate = allFieldNames.some(
|
||||||
(n, i) => n === trimmed && i !== allFieldNames.indexOf(field.name),
|
(n, i) => n === trimmed && i !== allFieldNames.indexOf(field.name),
|
||||||
);
|
);
|
||||||
if (isDuplicate) {
|
if (isDuplicate) {
|
||||||
return t('testDataGenerator_fieldNameDuplicate');
|
return '字段名称已存在';
|
||||||
}
|
}
|
||||||
return null;
|
return null;
|
||||||
},
|
},
|
||||||
[allFieldNames, field.name, t],
|
[allFieldNames, field.name],
|
||||||
);
|
);
|
||||||
|
|
||||||
const handleNameChange = (name: string) => {
|
const handleNameChange = (name: string) => {
|
||||||
@@ -110,15 +109,13 @@ export default function FieldEditor({ field, onChange, allFieldNames = [] }: Fie
|
|||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<label className="text-sm font-medium text-foreground">
|
<Label className="text-sm font-medium text-foreground">{'字段名称'}</Label>
|
||||||
{t('testDataGenerator_fieldName')}
|
|
||||||
</label>
|
|
||||||
<span className="text-xs text-muted-foreground">{field.name.length}/20</span>
|
<span className="text-xs text-muted-foreground">{field.name.length}/20</span>
|
||||||
</div>
|
</div>
|
||||||
<Input
|
<Input
|
||||||
value={field.name}
|
value={field.name}
|
||||||
onChange={(e) => handleNameChange(e.target.value)}
|
onChange={(e) => handleNameChange(e.target.value)}
|
||||||
placeholder={t('testDataGenerator_fieldNamePlaceholder')}
|
placeholder={'请输入字段名称'}
|
||||||
maxLength={20}
|
maxLength={20}
|
||||||
className={`h-9 ${nameError ? 'border-destructive' : ''}`}
|
className={`h-9 ${nameError ? 'border-destructive' : ''}`}
|
||||||
/>
|
/>
|
||||||
@@ -127,9 +124,7 @@ export default function FieldEditor({ field, onChange, allFieldNames = [] }: Fie
|
|||||||
|
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<label className="text-sm font-medium text-foreground">
|
<Label className="text-sm font-medium text-foreground">{'字段描述'}</Label>
|
||||||
{t('testDataGenerator_fieldDescription')}
|
|
||||||
</label>
|
|
||||||
<span className="text-xs text-muted-foreground">
|
<span className="text-xs text-muted-foreground">
|
||||||
{(field.description || '').length}/50
|
{(field.description || '').length}/50
|
||||||
</span>
|
</span>
|
||||||
@@ -137,7 +132,7 @@ export default function FieldEditor({ field, onChange, allFieldNames = [] }: Fie
|
|||||||
<Input
|
<Input
|
||||||
value={field.description || ''}
|
value={field.description || ''}
|
||||||
onChange={(e) => handleDescriptionChange(e.target.value)}
|
onChange={(e) => handleDescriptionChange(e.target.value)}
|
||||||
placeholder={t('testDataGenerator_fieldDescriptionPlaceholder')}
|
placeholder={'可选,添加字段说明'}
|
||||||
maxLength={50}
|
maxLength={50}
|
||||||
className="h-9"
|
className="h-9"
|
||||||
/>
|
/>
|
||||||
@@ -147,18 +142,14 @@ export default function FieldEditor({ field, onChange, allFieldNames = [] }: Fie
|
|||||||
{/* 必填/选填配置 */}
|
{/* 必填/选填配置 */}
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<label className="text-sm font-medium text-foreground">
|
<Label className="text-sm font-medium text-foreground">{'必填'}</Label>
|
||||||
{t('testDataGenerator_required')}
|
|
||||||
</label>
|
|
||||||
<Switch checked={field.required} onCheckedChange={handleRequiredChange} />
|
<Switch checked={field.required} onCheckedChange={handleRequiredChange} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{!field.required && (
|
{!field.required && (
|
||||||
<div className="space-y-2 pl-1">
|
<div className="space-y-2 pl-1">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<span className="text-sm text-muted-foreground">
|
<span className="text-sm text-muted-foreground">{'空值率'}</span>
|
||||||
{t('testDataGenerator_nullRate')}
|
|
||||||
</span>
|
|
||||||
<Badge variant="secondary" className="text-xs">
|
<Badge variant="secondary" className="text-xs">
|
||||||
{field.nullRate}%
|
{field.nullRate}%
|
||||||
</Badge>
|
</Badge>
|
||||||
@@ -198,26 +189,20 @@ export default function FieldEditor({ field, onChange, allFieldNames = [] }: Fie
|
|||||||
|
|
||||||
{/* 唯一性约束 */}
|
{/* 唯一性约束 */}
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<label className="text-sm font-medium text-foreground">
|
<Label className="text-sm font-medium text-foreground">{'唯一性约束'}</Label>
|
||||||
{t('testDataGenerator_uniqueConstraint')}
|
|
||||||
</label>
|
|
||||||
<Switch checked={field.unique} onCheckedChange={handleUniqueChange} />
|
<Switch checked={field.unique} onCheckedChange={handleUniqueChange} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 生成器选择 */}
|
{/* 生成器选择 */}
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<label className="text-sm font-medium text-foreground">
|
<Label className="text-sm font-medium text-foreground">{'数据生成器'}</Label>
|
||||||
{t('testDataGenerator_generator')}
|
|
||||||
</label>
|
|
||||||
<GeneratorSelector selectedId={field.generatorId} onChange={handleGeneratorChange} />
|
<GeneratorSelector selectedId={field.generatorId} onChange={handleGeneratorChange} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 生成器参数配置 */}
|
{/* 生成器参数配置 */}
|
||||||
{generator && (
|
{generator && (
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<label className="text-sm font-medium text-foreground">
|
<Label className="text-sm font-medium text-foreground">{'生成器参数'}</Label>
|
||||||
{t('testDataGenerator_generatorParams')}
|
|
||||||
</label>
|
|
||||||
<GeneratorConfig
|
<GeneratorConfig
|
||||||
generator={generator}
|
generator={generator}
|
||||||
params={field.params}
|
params={field.params}
|
||||||
|
|||||||
@@ -3,7 +3,6 @@
|
|||||||
* 展示单个字段的基本信息,适配固定高度卡片
|
* 展示单个字段的基本信息,适配固定高度卡片
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
import { getGeneratorById } from '@/lib/generators';
|
import { getGeneratorById } from '@/lib/generators';
|
||||||
import { Badge } from '@/components/ui/badge';
|
import { Badge } from '@/components/ui/badge';
|
||||||
import type { FieldConfig } from '@/types/testDataGenerator';
|
import type { FieldConfig } from '@/types/testDataGenerator';
|
||||||
@@ -14,7 +13,6 @@ interface FieldItemProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default function FieldItem({ field, onClick }: FieldItemProps) {
|
export default function FieldItem({ field, onClick }: FieldItemProps) {
|
||||||
const { t } = useI18n('testDataGenerator');
|
|
||||||
const generator = getGeneratorById(field.generatorId);
|
const generator = getGeneratorById(field.generatorId);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -43,7 +41,7 @@ export default function FieldItem({ field, onClick }: FieldItemProps) {
|
|||||||
)}
|
)}
|
||||||
{field.unique && (
|
{field.unique && (
|
||||||
<Badge variant="outline" className="text-[10px] shrink-0 px-1 py-0 text-blue-500">
|
<Badge variant="outline" className="text-[10px] shrink-0 px-1 py-0 text-blue-500">
|
||||||
{t('testDataGenerator_unique')}
|
{'唯一'}
|
||||||
</Badge>
|
</Badge>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -10,7 +10,6 @@ import { toast } from 'sonner';
|
|||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
import { Dialog, DialogContent } from '@/components/ui/dialog';
|
import { Dialog, DialogContent } from '@/components/ui/dialog';
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
import * as ruleStorage from '@/utils/ruleStorage';
|
import * as ruleStorage from '@/utils/ruleStorage';
|
||||||
import {
|
import {
|
||||||
DndContext,
|
DndContext,
|
||||||
@@ -123,7 +122,6 @@ export default function FieldList({
|
|||||||
editingRule,
|
editingRule,
|
||||||
onRuleSaved,
|
onRuleSaved,
|
||||||
}: FieldListProps) {
|
}: FieldListProps) {
|
||||||
const { t } = useI18n('testDataGenerator');
|
|
||||||
const [scrollTop, setScrollTop] = useState(0);
|
const [scrollTop, setScrollTop] = useState(0);
|
||||||
const [activeId, setActiveId] = useState<string | null>(null);
|
const [activeId, setActiveId] = useState<string | null>(null);
|
||||||
const containerRef = useRef<HTMLDivElement>(null);
|
const containerRef = useRef<HTMLDivElement>(null);
|
||||||
@@ -226,10 +224,10 @@ export default function FieldList({
|
|||||||
});
|
});
|
||||||
|
|
||||||
if (updated) {
|
if (updated) {
|
||||||
toast.success(t('testDataGenerator_ruleUpdated'));
|
toast.success('规则已更新');
|
||||||
onRuleSaved?.();
|
onRuleSaved?.();
|
||||||
}
|
}
|
||||||
}, [editingRule, fields, t, onRuleSaved]);
|
}, [editingRule, fields, onRuleSaved]);
|
||||||
|
|
||||||
// 新建规则或另存为
|
// 新建规则或另存为
|
||||||
const handleSave = useCallback(
|
const handleSave = useCallback(
|
||||||
@@ -258,18 +256,18 @@ export default function FieldList({
|
|||||||
setShowConfirmOverwrite(false);
|
setShowConfirmOverwrite(false);
|
||||||
setRuleName('');
|
setRuleName('');
|
||||||
setRuleDescription('');
|
setRuleDescription('');
|
||||||
toast.success(t('testDataGenerator_ruleSaved'));
|
toast.success('规则已保存');
|
||||||
onRuleSaved?.();
|
onRuleSaved?.();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[ruleName, ruleDescription, fields, t, onRuleSaved],
|
[ruleName, ruleDescription, fields, onRuleSaved],
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col h-full">
|
<div className="flex flex-col h-full">
|
||||||
<div className="flex items-center justify-between mb-3">
|
<div className="flex items-center justify-between mb-3">
|
||||||
<h3 className="text-sm font-medium text-foreground">
|
<h3 className="text-sm font-medium text-foreground">
|
||||||
{t('testDataGenerator_fields')} ({fields.length}/{MAX_FIELDS})
|
{'字段'} ({fields.length}/{MAX_FIELDS})
|
||||||
</h3>
|
</h3>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
{editingRule ? (
|
{editingRule ? (
|
||||||
@@ -280,10 +278,10 @@ export default function FieldList({
|
|||||||
onClick={handleUpdateRule}
|
onClick={handleUpdateRule}
|
||||||
disabled={fields.length === 0}
|
disabled={fields.length === 0}
|
||||||
className="h-8 gap-1.5 px-2.5"
|
className="h-8 gap-1.5 px-2.5"
|
||||||
title={`${t('testDataGenerator_editing')}: ${editingRule.name}`}
|
title={`${'编辑中'}: ${editingRule.name}`}
|
||||||
>
|
>
|
||||||
<Save className="h-3.5 w-3.5" />
|
<Save className="h-3.5 w-3.5" />
|
||||||
{t('testDataGenerator_updateRule')}
|
{'更新规则'}
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
@@ -292,7 +290,7 @@ export default function FieldList({
|
|||||||
disabled={fields.length === 0}
|
disabled={fields.length === 0}
|
||||||
className="h-8 px-2"
|
className="h-8 px-2"
|
||||||
>
|
>
|
||||||
{t('testDataGenerator_saveAs')}
|
{'另存为'}
|
||||||
</Button>
|
</Button>
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
@@ -304,7 +302,7 @@ export default function FieldList({
|
|||||||
className="h-8 gap-1.5 px-2.5"
|
className="h-8 gap-1.5 px-2.5"
|
||||||
>
|
>
|
||||||
<Save className="h-3.5 w-3.5" />
|
<Save className="h-3.5 w-3.5" />
|
||||||
{t('testDataGenerator_saveRule')}
|
{'保存规则'}
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
<Button
|
<Button
|
||||||
@@ -315,7 +313,7 @@ export default function FieldList({
|
|||||||
className="h-8 gap-1.5 px-2.5"
|
className="h-8 gap-1.5 px-2.5"
|
||||||
>
|
>
|
||||||
<Plus className="h-4 w-4" />
|
<Plus className="h-4 w-4" />
|
||||||
{t('testDataGenerator_addField')}
|
{'添加字段'}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -324,10 +322,8 @@ export default function FieldList({
|
|||||||
{fields.length === 0 ? (
|
{fields.length === 0 ? (
|
||||||
<div className="flex flex-col items-center justify-center py-8 text-center">
|
<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" />
|
<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-sm text-muted-foreground">{'暂无字段'}</p>
|
||||||
<p className="text-xs text-muted-foreground/70 mt-1">
|
<p className="text-xs text-muted-foreground/70 mt-1">{'点击上方按钮添加第一个字段'}</p>
|
||||||
{t('testDataGenerator_addFieldHint')}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<DndContext
|
<DndContext
|
||||||
@@ -419,22 +415,22 @@ export default function FieldList({
|
|||||||
<Input
|
<Input
|
||||||
value={ruleName}
|
value={ruleName}
|
||||||
onChange={(e) => setRuleName(e.target.value)}
|
onChange={(e) => setRuleName(e.target.value)}
|
||||||
placeholder={t('testDataGenerator_ruleNamePlaceholder')}
|
placeholder={'规则名称'}
|
||||||
className="h-9"
|
className="h-9"
|
||||||
/>
|
/>
|
||||||
<Input
|
<Input
|
||||||
value={ruleDescription}
|
value={ruleDescription}
|
||||||
onChange={(e) => setRuleDescription(e.target.value)}
|
onChange={(e) => setRuleDescription(e.target.value)}
|
||||||
placeholder={t('testDataGenerator_ruleDescPlaceholder')}
|
placeholder={'规则描述(可选)'}
|
||||||
className="h-9"
|
className="h-9"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-end gap-2 px-6 py-2 border-t shrink-0">
|
<div className="flex justify-end gap-2 px-6 py-2 border-t shrink-0">
|
||||||
<Button variant="ghost" size="sm" onClick={() => setShowSaveDialog(false)}>
|
<Button variant="ghost" size="sm" onClick={() => setShowSaveDialog(false)}>
|
||||||
{t('testDataGenerator_cancel')}
|
{'取消'}
|
||||||
</Button>
|
</Button>
|
||||||
<Button size="sm" onClick={() => handleSave()} disabled={!ruleName.trim()}>
|
<Button size="sm" onClick={() => handleSave()} disabled={!ruleName.trim()}>
|
||||||
{t('testDataGenerator_confirm')}
|
{'确认'}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
@@ -447,16 +443,14 @@ export default function FieldList({
|
|||||||
className="w-[calc(100vw-4rem)] max-w-[420px] p-0 pt-6 flex flex-col"
|
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">
|
<div className="flex-1 overflow-y-auto px-6 pb-4">
|
||||||
<p className="text-sm text-muted-foreground">
|
<p className="text-sm text-muted-foreground">{'已存在同名规则,是否覆盖保存?'}</p>
|
||||||
{t('testDataGenerator_ruleNameDuplicate')}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-end gap-2 px-6 py-2 border-t shrink-0">
|
<div className="flex justify-end gap-2 px-6 py-2 border-t shrink-0">
|
||||||
<Button variant="ghost" size="sm" onClick={() => setShowConfirmOverwrite(false)}>
|
<Button variant="ghost" size="sm" onClick={() => setShowConfirmOverwrite(false)}>
|
||||||
{t('testDataGenerator_cancel')}
|
{'取消'}
|
||||||
</Button>
|
</Button>
|
||||||
<Button size="sm" onClick={() => handleSave(true)}>
|
<Button size="sm" onClick={() => handleSave(true)}>
|
||||||
{t('testDataGenerator_overwrite')}
|
{'覆盖'}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
|
|||||||
@@ -5,7 +5,6 @@
|
|||||||
|
|
||||||
import { Play, Square } from 'lucide-react';
|
import { Play, Square } from 'lucide-react';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
import type { GenerateProgress } from '@/types/testDataGenerator';
|
import type { GenerateProgress } from '@/types/testDataGenerator';
|
||||||
|
|
||||||
interface GenerateButtonProps {
|
interface GenerateButtonProps {
|
||||||
@@ -23,27 +22,20 @@ export default function GenerateButton({
|
|||||||
progress,
|
progress,
|
||||||
disabled,
|
disabled,
|
||||||
}: GenerateButtonProps) {
|
}: GenerateButtonProps) {
|
||||||
const { t } = useI18n('testDataGenerator');
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
{isGenerating ? (
|
{isGenerating ? (
|
||||||
<>
|
<>
|
||||||
<Button variant="destructive" onClick={onCancel} className="w-full h-11 gap-2">
|
<Button variant="destructive" onClick={onCancel} className="w-full h-11 gap-2">
|
||||||
<Square className="h-5 w-5" />
|
<Square className="h-5 w-5" />
|
||||||
{t('testDataGenerator_cancel')}
|
{'取消'}
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
{/* 进度条 */}
|
{/* 进度条 */}
|
||||||
{progress && (
|
{progress && (
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<div className="flex items-center justify-between text-xs text-muted-foreground">
|
<div className="flex items-center justify-between text-xs text-muted-foreground">
|
||||||
<span>
|
<span>{'已生成 {{current}} / {{total}} 条'}</span>
|
||||||
{t('testDataGenerator_progress', {
|
|
||||||
current: progress.generated.toLocaleString(),
|
|
||||||
total: progress.total.toLocaleString(),
|
|
||||||
})}
|
|
||||||
</span>
|
|
||||||
<span>{progress.progress}%</span>
|
<span>{progress.progress}%</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="h-2 bg-muted rounded-full overflow-hidden">
|
<div className="h-2 bg-muted rounded-full overflow-hidden">
|
||||||
@@ -54,9 +46,7 @@ export default function GenerateButton({
|
|||||||
</div>
|
</div>
|
||||||
{progress.estimatedTimeLeft !== undefined && (
|
{progress.estimatedTimeLeft !== undefined && (
|
||||||
<p className="text-xs text-muted-foreground text-center">
|
<p className="text-xs text-muted-foreground text-center">
|
||||||
{t('testDataGenerator_estimatedTime', {
|
{'预计剩余 {{time}} 秒'}
|
||||||
time: Math.ceil(progress.estimatedTimeLeft / 1000),
|
|
||||||
})}
|
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
@@ -65,7 +55,7 @@ export default function GenerateButton({
|
|||||||
) : (
|
) : (
|
||||||
<Button onClick={onClick} disabled={disabled} className="w-full h-11 gap-2">
|
<Button onClick={onClick} disabled={disabled} className="w-full h-11 gap-2">
|
||||||
<Play className="h-5 w-5" />
|
<Play className="h-5 w-5" />
|
||||||
{t('testDataGenerator_generate')}
|
{'生成数据'}
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -3,8 +3,8 @@
|
|||||||
* 配置生成数量、数据格式等选项
|
* 配置生成数量、数据格式等选项
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Label } from '@/components/ui/label';
|
||||||
|
|
||||||
interface GenerateOptionsProps {
|
interface GenerateOptionsProps {
|
||||||
count: number;
|
count: number;
|
||||||
@@ -26,15 +26,11 @@ export default function GenerateOptions({
|
|||||||
format,
|
format,
|
||||||
onFormatChange,
|
onFormatChange,
|
||||||
}: GenerateOptionsProps) {
|
}: GenerateOptionsProps) {
|
||||||
const { t } = useI18n('testDataGenerator');
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
{/* 生成数量 */}
|
{/* 生成数量 */}
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<label className="text-sm font-medium text-foreground">
|
<Label className="text-sm font-medium text-foreground">{'生成数量'}</Label>
|
||||||
{t('testDataGenerator_count')}
|
|
||||||
</label>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
<div className="flex flex-wrap gap-2">
|
||||||
{COUNT_PRESETS.map((preset) => (
|
{COUNT_PRESETS.map((preset) => (
|
||||||
<button
|
<button
|
||||||
@@ -67,9 +63,7 @@ export default function GenerateOptions({
|
|||||||
|
|
||||||
{/* 数据格式 */}
|
{/* 数据格式 */}
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<label className="text-sm font-medium text-foreground">
|
<Label className="text-sm font-medium text-foreground">{'数据格式'}</Label>
|
||||||
{t('testDataGenerator_format')}
|
|
||||||
</label>
|
|
||||||
<div className="flex gap-2">
|
<div className="flex gap-2">
|
||||||
{FORMAT_OPTIONS.map((option) => (
|
{FORMAT_OPTIONS.map((option) => (
|
||||||
<button
|
<button
|
||||||
|
|||||||
@@ -4,6 +4,7 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Label } from '@/components/ui/label';
|
||||||
import { Switch } from '@/components/ui/switch';
|
import { Switch } from '@/components/ui/switch';
|
||||||
import {
|
import {
|
||||||
Select,
|
Select,
|
||||||
@@ -12,7 +13,6 @@ import {
|
|||||||
SelectTrigger,
|
SelectTrigger,
|
||||||
SelectValue,
|
SelectValue,
|
||||||
} from '@/components/ui/select';
|
} from '@/components/ui/select';
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
import type { GeneratorDefinition } from '@/types/testDataGenerator';
|
import type { GeneratorDefinition } from '@/types/testDataGenerator';
|
||||||
|
|
||||||
interface GeneratorConfigProps {
|
interface GeneratorConfigProps {
|
||||||
@@ -22,27 +22,22 @@ interface GeneratorConfigProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default function GeneratorConfig({ generator, params, onChange }: GeneratorConfigProps) {
|
export default function GeneratorConfig({ generator, params, onChange }: GeneratorConfigProps) {
|
||||||
const { t } = useI18n('testDataGenerator');
|
|
||||||
const handleParamChange = (key: string, value: unknown) => {
|
const handleParamChange = (key: string, value: unknown) => {
|
||||||
onChange({ ...params, [key]: value });
|
onChange({ ...params, [key]: value });
|
||||||
};
|
};
|
||||||
|
|
||||||
if (generator.params.length === 0) {
|
if (generator.params.length === 0) {
|
||||||
return (
|
return <p className="text-sm text-muted-foreground py-2">{'此生成器无可配置参数'}</p>;
|
||||||
<p className="text-sm text-muted-foreground py-2">
|
|
||||||
{t('testDataGenerator_noGeneratorParams')}
|
|
||||||
</p>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-4 p-3 rounded-lg bg-muted/30">
|
<div className="space-y-4 p-3 rounded-lg bg-muted/30">
|
||||||
{generator.params.map((param) => (
|
{generator.params.map((param) => (
|
||||||
<div key={param.key} className="space-y-2">
|
<div key={param.key} className="space-y-2">
|
||||||
<label className="text-sm font-medium text-foreground">
|
<Label className="text-sm font-medium text-foreground">
|
||||||
{param.label}
|
{param.label}
|
||||||
{param.required && <span className="text-destructive ml-1">*</span>}
|
{param.required && <span className="text-destructive ml-1">*</span>}
|
||||||
</label>
|
</Label>
|
||||||
{param.description && (
|
{param.description && (
|
||||||
<p className="text-xs text-muted-foreground">{param.description}</p>
|
<p className="text-xs text-muted-foreground">{param.description}</p>
|
||||||
)}
|
)}
|
||||||
@@ -70,9 +65,7 @@ export default function GeneratorConfig({ generator, params, onChange }: Generat
|
|||||||
{param.type === 'boolean' && (
|
{param.type === 'boolean' && (
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<span className="text-sm text-muted-foreground">
|
<span className="text-sm text-muted-foreground">
|
||||||
{params[param.key] !== false
|
{params[param.key] !== false ? '启用' : '禁用'}
|
||||||
? t('testDataGenerator_enabled')
|
|
||||||
: t('testDataGenerator_disabled')}
|
|
||||||
</span>
|
</span>
|
||||||
<Switch
|
<Switch
|
||||||
checked={params[param.key] !== false}
|
checked={params[param.key] !== false}
|
||||||
@@ -115,7 +108,7 @@ export default function GeneratorConfig({ generator, params, onChange }: Generat
|
|||||||
.filter(Boolean),
|
.filter(Boolean),
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
placeholder={t('testDataGenerator_commaSeparated')}
|
placeholder={'用逗号分隔多个值'}
|
||||||
className="h-9"
|
className="h-9"
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -6,7 +6,6 @@
|
|||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import { Search, User, Briefcase, Code, Hash } from 'lucide-react';
|
import { Search, User, Briefcase, Code, Hash } from 'lucide-react';
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
import { generatorCategories, getGeneratorsByCategory, searchGenerators } from '@/lib/generators';
|
import { generatorCategories, getGeneratorsByCategory, searchGenerators } from '@/lib/generators';
|
||||||
|
|
||||||
interface GeneratorSelectorProps {
|
interface GeneratorSelectorProps {
|
||||||
@@ -22,7 +21,6 @@ const categoryIcons: Record<string, React.ComponentType<{ className?: string }>>
|
|||||||
};
|
};
|
||||||
|
|
||||||
export default function GeneratorSelector({ selectedId, onChange }: GeneratorSelectorProps) {
|
export default function GeneratorSelector({ selectedId, onChange }: GeneratorSelectorProps) {
|
||||||
const { t } = useI18n('testDataGenerator');
|
|
||||||
const [searchQuery, setSearchQuery] = useState('');
|
const [searchQuery, setSearchQuery] = useState('');
|
||||||
const [activeCategory, setActiveCategory] = useState<string>(generatorCategories[0]?.id || '');
|
const [activeCategory, setActiveCategory] = useState<string>(generatorCategories[0]?.id || '');
|
||||||
|
|
||||||
@@ -38,7 +36,7 @@ export default function GeneratorSelector({ selectedId, onChange }: GeneratorSel
|
|||||||
<Input
|
<Input
|
||||||
value={searchQuery}
|
value={searchQuery}
|
||||||
onChange={(e) => setSearchQuery(e.target.value)}
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
placeholder={t('testDataGenerator_searchGenerator')}
|
placeholder={'搜索生成器...'}
|
||||||
className="pl-9 h-9"
|
className="pl-9 h-9"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -4,7 +4,6 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import { CheckCircle, AlertTriangle, XCircle, Clock, Database } from 'lucide-react';
|
import { CheckCircle, AlertTriangle, XCircle, Clock, Database } from 'lucide-react';
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
import type { GenerateResult } from '@/types/testDataGenerator';
|
import type { GenerateResult } from '@/types/testDataGenerator';
|
||||||
|
|
||||||
interface ResultPanelProps {
|
interface ResultPanelProps {
|
||||||
@@ -12,8 +11,6 @@ interface ResultPanelProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default function ResultPanel({ result }: ResultPanelProps) {
|
export default function ResultPanel({ result }: ResultPanelProps) {
|
||||||
const { t } = useI18n('testDataGenerator');
|
|
||||||
|
|
||||||
if (!result) return null;
|
if (!result) return null;
|
||||||
|
|
||||||
const getStatusIcon = () => {
|
const getStatusIcon = () => {
|
||||||
@@ -28,12 +25,12 @@ export default function ResultPanel({ result }: ResultPanelProps) {
|
|||||||
|
|
||||||
const getStatusText = () => {
|
const getStatusText = () => {
|
||||||
if (result.success && (!result.warnings || result.warnings.length === 0)) {
|
if (result.success && (!result.warnings || result.warnings.length === 0)) {
|
||||||
return t('testDataGenerator_success');
|
return '生成成功';
|
||||||
}
|
}
|
||||||
if (result.success && result.warnings && result.warnings.length > 0) {
|
if (result.success && result.warnings && result.warnings.length > 0) {
|
||||||
return t('testDataGenerator_partialSuccess');
|
return '部分成功';
|
||||||
}
|
}
|
||||||
return t('testDataGenerator_failed');
|
return '生成失败';
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -52,9 +49,7 @@ export default function ResultPanel({ result }: ResultPanelProps) {
|
|||||||
<span className="text-lg font-semibold text-foreground">
|
<span className="text-lg font-semibold text-foreground">
|
||||||
{result.stats.total.toLocaleString()}
|
{result.stats.total.toLocaleString()}
|
||||||
</span>
|
</span>
|
||||||
<span className="text-xs text-muted-foreground">
|
<span className="text-xs text-muted-foreground">{'总条数'}</span>
|
||||||
{t('testDataGenerator_totalCount')}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex flex-col items-center p-2 rounded-lg bg-muted/30">
|
<div className="flex flex-col items-center p-2 rounded-lg bg-muted/30">
|
||||||
@@ -62,9 +57,7 @@ export default function ResultPanel({ result }: ResultPanelProps) {
|
|||||||
<span className="text-lg font-semibold text-green-500">
|
<span className="text-lg font-semibold text-green-500">
|
||||||
{result.stats.success.toLocaleString()}
|
{result.stats.success.toLocaleString()}
|
||||||
</span>
|
</span>
|
||||||
<span className="text-xs text-muted-foreground">
|
<span className="text-xs text-muted-foreground">{'成功'}</span>
|
||||||
{t('testDataGenerator_successCount')}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex flex-col items-center p-2 rounded-lg bg-muted/30">
|
<div className="flex flex-col items-center p-2 rounded-lg bg-muted/30">
|
||||||
@@ -72,7 +65,7 @@ export default function ResultPanel({ result }: ResultPanelProps) {
|
|||||||
<span className="text-lg font-semibold text-foreground">
|
<span className="text-lg font-semibold text-foreground">
|
||||||
{(result.stats.duration / 1000).toFixed(2)}s
|
{(result.stats.duration / 1000).toFixed(2)}s
|
||||||
</span>
|
</span>
|
||||||
<span className="text-xs text-muted-foreground">{t('testDataGenerator_duration')}</span>
|
<span className="text-xs text-muted-foreground">{'耗时'}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
@@ -82,9 +75,7 @@ export default function ResultPanel({ result }: ResultPanelProps) {
|
|||||||
<div className="p-3 rounded-lg bg-yellow-500/10 border border-yellow-500/20">
|
<div className="p-3 rounded-lg bg-yellow-500/10 border border-yellow-500/20">
|
||||||
<div className="flex items-center gap-2 mb-2">
|
<div className="flex items-center gap-2 mb-2">
|
||||||
<AlertTriangle className="h-4 w-4 text-yellow-500" />
|
<AlertTriangle className="h-4 w-4 text-yellow-500" />
|
||||||
<span className="text-sm font-medium text-yellow-500">
|
<span className="text-sm font-medium text-yellow-500">{'警告'}</span>
|
||||||
{t('testDataGenerator_warnings')}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
<ul className="list-disc list-inside space-y-1">
|
<ul className="list-disc list-inside space-y-1">
|
||||||
{result.warnings.slice(0, 5).map((warning, index) => (
|
{result.warnings.slice(0, 5).map((warning, index) => (
|
||||||
@@ -93,9 +84,7 @@ export default function ResultPanel({ result }: ResultPanelProps) {
|
|||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
{result.warnings.length > 5 && (
|
{result.warnings.length > 5 && (
|
||||||
<li className="text-xs text-yellow-500/80">
|
<li className="text-xs text-yellow-500/80">... {'还有 {{count}} 条警告'}</li>
|
||||||
... {t('testDataGenerator_moreWarnings', { count: result.warnings.length - 5 })}
|
|
||||||
</li>
|
|
||||||
)}
|
)}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -20,7 +20,6 @@ import { toast } from 'sonner';
|
|||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
import { Dialog, DialogContent } from '@/components/ui/dialog';
|
import { Dialog, DialogContent } from '@/components/ui/dialog';
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
import * as ruleStorage from '@/utils/ruleStorage';
|
import * as ruleStorage from '@/utils/ruleStorage';
|
||||||
import type { DataRule, FieldConfig } from '@/types/testDataGenerator';
|
import type { DataRule, FieldConfig } from '@/types/testDataGenerator';
|
||||||
|
|
||||||
@@ -31,7 +30,6 @@ interface RuleManagerProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleManagerProps) {
|
export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleManagerProps) {
|
||||||
const { t, i18n } = useI18n('testDataGenerator');
|
|
||||||
const [rules, setRules] = useState<DataRule[]>(() => ruleStorage.getAll());
|
const [rules, setRules] = useState<DataRule[]>(() => ruleStorage.getAll());
|
||||||
const [searchQuery, setSearchQuery] = useState('');
|
const [searchQuery, setSearchQuery] = useState('');
|
||||||
const [debouncedSearchQuery, setDebouncedSearchQuery] = useState('');
|
const [debouncedSearchQuery, setDebouncedSearchQuery] = useState('');
|
||||||
@@ -64,9 +62,9 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
|
|||||||
onLoad(rule.fields);
|
onLoad(rule.fields);
|
||||||
ruleStorage.recordUse(rule.id);
|
ruleStorage.recordUse(rule.id);
|
||||||
loadRules();
|
loadRules();
|
||||||
toast.success(t('testDataGenerator_ruleLoaded', { name: rule.name }));
|
toast.success(`已加载规则「${rule.name}」`);
|
||||||
},
|
},
|
||||||
[onLoad, loadRules, t],
|
[onLoad, loadRules],
|
||||||
);
|
);
|
||||||
|
|
||||||
const handleDelete = useCallback(() => {
|
const handleDelete = useCallback(() => {
|
||||||
@@ -74,20 +72,20 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
|
|||||||
ruleStorage.deleteRule(ruleToDelete.id);
|
ruleStorage.deleteRule(ruleToDelete.id);
|
||||||
loadRules();
|
loadRules();
|
||||||
setRuleToDelete(null);
|
setRuleToDelete(null);
|
||||||
toast.success(t('testDataGenerator_ruleDeleted'));
|
toast.success('规则已删除');
|
||||||
onRulesChanged?.();
|
onRulesChanged?.();
|
||||||
}, [ruleToDelete, loadRules, t, onRulesChanged]);
|
}, [ruleToDelete, loadRules, onRulesChanged]);
|
||||||
|
|
||||||
const handleDuplicate = useCallback(
|
const handleDuplicate = useCallback(
|
||||||
(id: string) => {
|
(id: string) => {
|
||||||
const result = ruleStorage.duplicate(id, t('testDataGenerator_ruleCopySuffix'));
|
const result = ruleStorage.duplicate(id, '(副本)');
|
||||||
if (result) {
|
if (result) {
|
||||||
loadRules();
|
loadRules();
|
||||||
toast.success(t('testDataGenerator_ruleDuplicated'));
|
toast.success('规则已复制');
|
||||||
onRulesChanged?.();
|
onRulesChanged?.();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[loadRules, t, onRulesChanged],
|
[loadRules, onRulesChanged],
|
||||||
);
|
);
|
||||||
|
|
||||||
const handleEdit = useCallback(
|
const handleEdit = useCallback(
|
||||||
@@ -113,14 +111,14 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
|
|||||||
} finally {
|
} finally {
|
||||||
URL.revokeObjectURL(url);
|
URL.revokeObjectURL(url);
|
||||||
}
|
}
|
||||||
toast.success(t('testDataGenerator_exportSuccess'));
|
toast.success('规则已导出');
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('[RuleManager] 导出失败:', error);
|
console.error('[RuleManager] 导出失败:', error);
|
||||||
toast.error(t('testDataGenerator_exportFailed'));
|
toast.error('导出失败');
|
||||||
} finally {
|
} finally {
|
||||||
setIsExporting(false);
|
setIsExporting(false);
|
||||||
}
|
}
|
||||||
}, [t]);
|
}, []);
|
||||||
|
|
||||||
const handleImport = useCallback(() => {
|
const handleImport = useCallback(() => {
|
||||||
const input = document.createElement('input');
|
const input = document.createElement('input');
|
||||||
@@ -136,11 +134,11 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
|
|||||||
const result = ruleStorage.importRules(text);
|
const result = ruleStorage.importRules(text);
|
||||||
|
|
||||||
if (result.success > 0) {
|
if (result.success > 0) {
|
||||||
toast.success(t('testDataGenerator_importSuccess', { count: result.success }));
|
toast.success(`成功导入 ${result.success} 条规则`);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (result.failed > 0) {
|
if (result.failed > 0) {
|
||||||
toast.error(t('testDataGenerator_importFailed', { count: result.failed }));
|
toast.error(`${result.failed} 条规则导入失败`);
|
||||||
console.warn('[RuleManager] 导入警告:', result.errors);
|
console.warn('[RuleManager] 导入警告:', result.errors);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -148,25 +146,22 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
|
|||||||
onRulesChanged?.();
|
onRulesChanged?.();
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('[RuleManager] 导入失败:', error);
|
console.error('[RuleManager] 导入失败:', error);
|
||||||
toast.error(t('testDataGenerator_importFailed'));
|
toast.error('规则导入失败');
|
||||||
} finally {
|
} finally {
|
||||||
setIsImporting(false);
|
setIsImporting(false);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
input.click();
|
input.click();
|
||||||
}, [loadRules, t, onRulesChanged]);
|
}, [loadRules, onRulesChanged]);
|
||||||
|
|
||||||
const formatDate = useCallback(
|
const formatDate = useCallback((timestamp: number) => {
|
||||||
(timestamp: number) => {
|
return new Date(timestamp).toLocaleDateString('zh-CN', {
|
||||||
return new Date(timestamp).toLocaleDateString(i18n.language || 'zh-CN', {
|
|
||||||
month: 'short',
|
month: 'short',
|
||||||
day: 'numeric',
|
day: 'numeric',
|
||||||
hour: '2-digit',
|
hour: '2-digit',
|
||||||
minute: '2-digit',
|
minute: '2-digit',
|
||||||
});
|
});
|
||||||
},
|
}, []);
|
||||||
[i18n.language],
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
@@ -178,15 +173,15 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
|
|||||||
>
|
>
|
||||||
<div className="flex-1 overflow-y-auto px-6 pb-4">
|
<div className="flex-1 overflow-y-auto px-6 pb-4">
|
||||||
<p className="text-sm text-muted-foreground">
|
<p className="text-sm text-muted-foreground">
|
||||||
{t('testDataGenerator_confirmDeleteDescription', { name: ruleToDelete?.name ?? '' })}
|
{ruleToDelete && `确定要删除规则「${ruleToDelete.name}」吗?此操作不可撤销。`}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-end gap-2 px-6 py-2 border-t shrink-0">
|
<div className="flex justify-end gap-2 px-6 py-2 border-t shrink-0">
|
||||||
<Button variant="ghost" size="sm" onClick={() => setRuleToDelete(null)}>
|
<Button variant="ghost" size="sm" onClick={() => setRuleToDelete(null)}>
|
||||||
{t('testDataGenerator_cancel')}
|
{'取消'}
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="destructive" size="sm" onClick={handleDelete}>
|
<Button variant="destructive" size="sm" onClick={handleDelete}>
|
||||||
{t('testDataGenerator_confirm')}
|
{'确认'}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
@@ -206,7 +201,7 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
|
|||||||
) : (
|
) : (
|
||||||
<Upload className="h-4 w-4" />
|
<Upload className="h-4 w-4" />
|
||||||
)}
|
)}
|
||||||
{t('testDataGenerator_import')}
|
{'导入'}
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
@@ -220,7 +215,7 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
|
|||||||
) : (
|
) : (
|
||||||
<Download className="h-4 w-4" />
|
<Download className="h-4 w-4" />
|
||||||
)}
|
)}
|
||||||
{t('testDataGenerator_export')}
|
{'导出数据'}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -230,12 +225,12 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
|
|||||||
<Input
|
<Input
|
||||||
value={searchQuery}
|
value={searchQuery}
|
||||||
onChange={(e) => setSearchQuery(e.target.value.slice(0, 20))}
|
onChange={(e) => setSearchQuery(e.target.value.slice(0, 20))}
|
||||||
placeholder={t('testDataGenerator_searchRules')}
|
placeholder={'搜索规则...'}
|
||||||
className="pl-9 pr-24 h-9"
|
className="pl-9 pr-24 h-9"
|
||||||
maxLength={20}
|
maxLength={20}
|
||||||
/>
|
/>
|
||||||
<span className="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-muted-foreground pointer-events-none">
|
<span className="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-muted-foreground pointer-events-none tabular-nums">
|
||||||
{t('testDataGenerator_ruleCount', { count: rules.length, max: 20 })}
|
{`已保存 ${rules.length}/${ruleStorage.MAX_RULES} 条`}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -245,9 +240,7 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
|
|||||||
<div className="text-center py-6">
|
<div className="text-center py-6">
|
||||||
<Tag className="h-8 w-8 text-muted-foreground/40 mx-auto mb-2" />
|
<Tag className="h-8 w-8 text-muted-foreground/40 mx-auto mb-2" />
|
||||||
<p className="text-sm text-muted-foreground">
|
<p className="text-sm text-muted-foreground">
|
||||||
{debouncedSearchQuery
|
{debouncedSearchQuery ? '未找到匹配的规则' : '暂无保存的规则'}
|
||||||
? t('testDataGenerator_noSearchResults')
|
|
||||||
: t('testDataGenerator_noRules')}
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
@@ -260,7 +253,7 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
|
|||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<span className="font-medium text-sm text-foreground truncate">{rule.name}</span>
|
<span className="font-medium text-sm text-foreground truncate">{rule.name}</span>
|
||||||
<span className="text-xs text-muted-foreground">
|
<span className="text-xs text-muted-foreground">
|
||||||
{rule.fields.length} {t('testDataGenerator_fields')}
|
{rule.fields.length} {'字段'}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
{rule.description && (
|
{rule.description && (
|
||||||
@@ -273,7 +266,7 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
|
|||||||
<Clock className="h-3 w-3" />
|
<Clock className="h-3 w-3" />
|
||||||
{formatDate(rule.updatedAt)}
|
{formatDate(rule.updatedAt)}
|
||||||
</span>
|
</span>
|
||||||
<span>{t('testDataGenerator_usedTimes', { count: rule.useCount })}</span>
|
<span>{`使用 ${rule.useCount} 次`}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -283,7 +276,7 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
|
|||||||
size="icon"
|
size="icon"
|
||||||
className="h-7 w-7"
|
className="h-7 w-7"
|
||||||
onClick={() => handleLoad(rule)}
|
onClick={() => handleLoad(rule)}
|
||||||
title={t('testDataGenerator_load')}
|
title={'加载'}
|
||||||
>
|
>
|
||||||
<FolderOpen className="h-3.5 w-3.5" />
|
<FolderOpen className="h-3.5 w-3.5" />
|
||||||
</Button>
|
</Button>
|
||||||
@@ -292,7 +285,7 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
|
|||||||
size="icon"
|
size="icon"
|
||||||
className="h-7 w-7"
|
className="h-7 w-7"
|
||||||
onClick={() => handleEdit(rule)}
|
onClick={() => handleEdit(rule)}
|
||||||
title={t('testDataGenerator_edit')}
|
title={'编辑'}
|
||||||
>
|
>
|
||||||
<Edit className="h-3.5 w-3.5" />
|
<Edit className="h-3.5 w-3.5" />
|
||||||
</Button>
|
</Button>
|
||||||
@@ -301,7 +294,7 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
|
|||||||
size="icon"
|
size="icon"
|
||||||
className="h-7 w-7"
|
className="h-7 w-7"
|
||||||
onClick={() => handleDuplicate(rule.id)}
|
onClick={() => handleDuplicate(rule.id)}
|
||||||
title={t('testDataGenerator_duplicate')}
|
title={'复制'}
|
||||||
>
|
>
|
||||||
<Copy className="h-3.5 w-3.5" />
|
<Copy className="h-3.5 w-3.5" />
|
||||||
</Button>
|
</Button>
|
||||||
@@ -310,7 +303,7 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
|
|||||||
size="icon"
|
size="icon"
|
||||||
className="h-7 w-7 text-destructive hover:text-destructive"
|
className="h-7 w-7 text-destructive hover:text-destructive"
|
||||||
onClick={() => setRuleToDelete(rule)}
|
onClick={() => setRuleToDelete(rule)}
|
||||||
title={t('testDataGenerator_delete')}
|
title={'删除'}
|
||||||
>
|
>
|
||||||
<Trash2 className="h-3.5 w-3.5" />
|
<Trash2 className="h-3.5 w-3.5" />
|
||||||
</Button>
|
</Button>
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ import userEvent from '@testing-library/user-event';
|
|||||||
|
|
||||||
// Mock dependencies
|
// Mock dependencies
|
||||||
vi.mock('@/utils/ruleStorage', () => ({
|
vi.mock('@/utils/ruleStorage', () => ({
|
||||||
|
MAX_RULES: 20,
|
||||||
getAll: vi.fn(() => []),
|
getAll: vi.fn(() => []),
|
||||||
save: vi.fn(),
|
save: vi.fn(),
|
||||||
deleteRule: vi.fn(),
|
deleteRule: vi.fn(),
|
||||||
@@ -87,8 +88,7 @@ describe('RuleManager', () => {
|
|||||||
|
|
||||||
expect(defaultProps.onLoad).toHaveBeenCalledWith(mockFields);
|
expect(defaultProps.onLoad).toHaveBeenCalledWith(mockFields);
|
||||||
expect(mockedRuleStorage.recordUse).toHaveBeenCalledWith('rule-1');
|
expect(mockedRuleStorage.recordUse).toHaveBeenCalledWith('rule-1');
|
||||||
// Note: t() mock doesn't handle placeholders, so we just check it was called
|
expect(mockedToast.success).toHaveBeenCalledWith('已加载规则「Test Rule」');
|
||||||
expect(mockedToast.success).toHaveBeenCalled();
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should show delete confirmation dialog', async () => {
|
it('should show delete confirmation dialog', async () => {
|
||||||
@@ -100,7 +100,7 @@ describe('RuleManager', () => {
|
|||||||
const deleteButton = screen.getByTitle('删除');
|
const deleteButton = screen.getByTitle('删除');
|
||||||
await user.click(deleteButton);
|
await user.click(deleteButton);
|
||||||
|
|
||||||
expect(screen.getByText(/确定要删除规则/)).toBeInTheDocument();
|
expect(screen.getByText('确定要删除规则「Test Rule」吗?此操作不可撤销。')).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should delete rule after confirmation', async () => {
|
it('should delete rule after confirmation', async () => {
|
||||||
@@ -178,6 +178,14 @@ describe('RuleManager', () => {
|
|||||||
vi.restoreAllMocks();
|
vi.restoreAllMocks();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('should show saved rule count', () => {
|
||||||
|
mockedRuleStorage.getAll.mockReturnValue([mockRule]);
|
||||||
|
|
||||||
|
render(<RuleManager {...defaultProps} />);
|
||||||
|
|
||||||
|
expect(screen.getByText('已保存 1/20 条')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
it('should show field count for each rule', () => {
|
it('should show field count for each rule', () => {
|
||||||
mockedRuleStorage.getAll.mockReturnValue([mockRule]);
|
mockedRuleStorage.getAll.mockReturnValue([mockRule]);
|
||||||
|
|
||||||
|
|||||||
@@ -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,
|
FieldConfig,
|
||||||
GenerateResult,
|
GenerateResult,
|
||||||
GenerateProgress,
|
GenerateProgress,
|
||||||
WorkerRequestMessage,
|
WorkerMessage,
|
||||||
WorkerResponseMessage,
|
|
||||||
} from '@/types/testDataGenerator';
|
} from '@/types/testDataGenerator';
|
||||||
|
|
||||||
export interface UseGeneratorReturn {
|
export interface UseGeneratorReturn {
|
||||||
@@ -36,7 +35,6 @@ export function useGenerator(): UseGeneratorReturn {
|
|||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
const workerRef = useRef<Worker | null>(null);
|
const workerRef = useRef<Worker | null>(null);
|
||||||
const generationIdRef = useRef(0);
|
|
||||||
|
|
||||||
// 清理 Worker
|
// 清理 Worker
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -60,30 +58,22 @@ export function useGenerator(): UseGeneratorReturn {
|
|||||||
type: 'module',
|
type: 'module',
|
||||||
});
|
});
|
||||||
|
|
||||||
worker.onmessage = (e: MessageEvent<WorkerResponseMessage>) => {
|
worker.onmessage = (e: MessageEvent<WorkerMessage>) => {
|
||||||
const data = e.data;
|
const data = e.data;
|
||||||
const { type } = data;
|
const { type } = data;
|
||||||
|
|
||||||
if (data.generationId !== generationIdRef.current) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
switch (type) {
|
switch (type) {
|
||||||
case 'progress':
|
case 'progress':
|
||||||
setProgress(data.payload);
|
setProgress(data.payload as GenerateProgress);
|
||||||
break;
|
break;
|
||||||
case 'complete':
|
case 'complete':
|
||||||
setIsGenerating(false);
|
setIsGenerating(false);
|
||||||
if (data.payload.success) {
|
setResult(data.payload as GenerateResult);
|
||||||
setResult(data.payload);
|
|
||||||
} else if (data.payload.error && data.payload.error !== '生成已取消') {
|
|
||||||
setError(data.payload.error);
|
|
||||||
}
|
|
||||||
setProgress(null);
|
setProgress(null);
|
||||||
break;
|
break;
|
||||||
case 'error':
|
case 'error':
|
||||||
setIsGenerating(false);
|
setIsGenerating(false);
|
||||||
setError(data.payload.error);
|
setError((data.payload as { error: string }).error);
|
||||||
setProgress(null);
|
setProgress(null);
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
@@ -110,17 +100,15 @@ export function useGenerator(): UseGeneratorReturn {
|
|||||||
(fields: FieldConfig[], count: number, csvMode = false) => {
|
(fields: FieldConfig[], count: number, csvMode = false) => {
|
||||||
if (isGenerating) return;
|
if (isGenerating) return;
|
||||||
|
|
||||||
const generationId = ++generationIdRef.current;
|
|
||||||
|
|
||||||
setIsGenerating(true);
|
setIsGenerating(true);
|
||||||
setProgress(null);
|
setProgress(null);
|
||||||
setResult(null);
|
setResult(null);
|
||||||
setError(null);
|
setError(null);
|
||||||
|
|
||||||
const worker = getWorker();
|
const worker = getWorker();
|
||||||
const message: WorkerRequestMessage = {
|
const message: WorkerMessage = {
|
||||||
type: 'start',
|
type: 'start',
|
||||||
payload: { generationId, fields, count, csvMode },
|
payload: { fields, count, csvMode },
|
||||||
};
|
};
|
||||||
worker.postMessage(message);
|
worker.postMessage(message);
|
||||||
},
|
},
|
||||||
@@ -132,8 +120,7 @@ export function useGenerator(): UseGeneratorReturn {
|
|||||||
*/
|
*/
|
||||||
const cancel = useCallback(() => {
|
const cancel = useCallback(() => {
|
||||||
if (workerRef.current && isGenerating) {
|
if (workerRef.current && isGenerating) {
|
||||||
++generationIdRef.current;
|
const message: WorkerMessage = { type: 'cancel' };
|
||||||
const message: WorkerRequestMessage = { type: 'cancel' };
|
|
||||||
workerRef.current.postMessage(message);
|
workerRef.current.postMessage(message);
|
||||||
setIsGenerating(false);
|
setIsGenerating(false);
|
||||||
setProgress(null);
|
setProgress(null);
|
||||||
|
|||||||
@@ -4,7 +4,6 @@
|
|||||||
|
|
||||||
import { useState, useCallback, useRef, useEffect } from 'react';
|
import { useState, useCallback, useRef, useEffect } from 'react';
|
||||||
import { Settings, Database, Tag } from 'lucide-react';
|
import { Settings, Database, Tag } from 'lucide-react';
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
import { useGenerator } from './hooks/useGenerator';
|
import { useGenerator } from './hooks/useGenerator';
|
||||||
import type { FieldConfig, GenerateResult, DataRule } from '@/types/testDataGenerator';
|
import type { FieldConfig, GenerateResult, DataRule } from '@/types/testDataGenerator';
|
||||||
@@ -29,7 +28,6 @@ import RuleManager from './components/RuleManager';
|
|||||||
type TabType = 'fields' | 'rules';
|
type TabType = 'fields' | 'rules';
|
||||||
|
|
||||||
export default function TestDataGeneratorPage() {
|
export default function TestDataGeneratorPage() {
|
||||||
const { t } = useI18n('testDataGenerator');
|
|
||||||
const { isGenerating, progress, result, error, generate, cancel, clearResult } = useGenerator();
|
const { isGenerating, progress, result, error, generate, cancel, clearResult } = useGenerator();
|
||||||
|
|
||||||
// 字段配置
|
// 字段配置
|
||||||
@@ -52,11 +50,11 @@ export default function TestDataGeneratorPage() {
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (result?.success && result.stats && result !== lastToastResultRef.current) {
|
if (result?.success && result.stats && result !== lastToastResultRef.current) {
|
||||||
lastToastResultRef.current = result;
|
lastToastResultRef.current = result;
|
||||||
toast.success(t('testDataGenerator_generateSuccess'), {
|
toast.success('生成完成', {
|
||||||
description: `${result.stats.total} ${t('testDataGenerator_records')}`,
|
description: `${result.stats.total} ${'条数据'}`,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}, [result, t]);
|
}, [result]);
|
||||||
|
|
||||||
// 添加新字段
|
// 添加新字段
|
||||||
const handleAddField = useCallback(() => {
|
const handleAddField = useCallback(() => {
|
||||||
@@ -132,9 +130,9 @@ export default function TestDataGeneratorPage() {
|
|||||||
setEditingRule(rule);
|
setEditingRule(rule);
|
||||||
setActiveTab('fields');
|
setActiveTab('fields');
|
||||||
clearResult();
|
clearResult();
|
||||||
toast.success(t('testDataGenerator_editingRule', { name: rule.name }));
|
toast.success('正在编辑规则「{{name}}」');
|
||||||
},
|
},
|
||||||
[clearResult, t],
|
[clearResult],
|
||||||
);
|
);
|
||||||
|
|
||||||
// 保存规则成功后清除编辑状态
|
// 保存规则成功后清除编辑状态
|
||||||
@@ -176,7 +174,7 @@ export default function TestDataGeneratorPage() {
|
|||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<Settings className="h-4 w-4" />
|
<Settings className="h-4 w-4" />
|
||||||
{t('testDataGenerator_fieldConfig')}
|
{'字段配置'}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={() => setActiveTab('rules')}
|
onClick={() => setActiveTab('rules')}
|
||||||
@@ -188,7 +186,7 @@ export default function TestDataGeneratorPage() {
|
|||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<Tag className="h-4 w-4" />
|
<Tag className="h-4 w-4" />
|
||||||
{t('testDataGenerator_ruleManagement')}
|
{'规则管理'}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -259,7 +257,7 @@ export default function TestDataGeneratorPage() {
|
|||||||
<div className="p-4 rounded-xl border border-border bg-card shadow-sm">
|
<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">
|
<h3 className="text-sm font-medium text-foreground mb-3 flex items-center gap-2">
|
||||||
<Database className="h-4 w-4" />
|
<Database className="h-4 w-4" />
|
||||||
{t('testDataGenerator_dataPreview')}
|
{'数据预览'}
|
||||||
</h3>
|
</h3>
|
||||||
<div className="h-[280px]">
|
<div className="h-[280px]">
|
||||||
<DataPreview fields={fields} />
|
<DataPreview fields={fields} />
|
||||||
@@ -293,10 +291,10 @@ export default function TestDataGeneratorPage() {
|
|||||||
</div>
|
</div>
|
||||||
<div className="flex justify-end gap-2 px-6 py-2 border-t shrink-0">
|
<div className="flex justify-end gap-2 px-6 py-2 border-t shrink-0">
|
||||||
<Button variant="ghost" size="sm" onClick={() => setIsEditorOpen(false)}>
|
<Button variant="ghost" size="sm" onClick={() => setIsEditorOpen(false)}>
|
||||||
{t('testDataGenerator_cancel')}
|
{'取消'}
|
||||||
</Button>
|
</Button>
|
||||||
<Button size="sm" onClick={() => setIsEditorOpen(false)}>
|
<Button size="sm" onClick={() => setIsEditorOpen(false)}>
|
||||||
{t('testDataGenerator_done')}
|
{'完成'}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
|
|||||||
@@ -1,18 +1,16 @@
|
|||||||
import TextInputArea from '@/components/TextInputArea';
|
import TextInputArea from '@/components/TextInputArea';
|
||||||
import { formatBytes } from '@/utils/format';
|
import { formatBytes } from '@/utils/format';
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
import { useTextStatistics } from './useTextStatistics';
|
import { useTextStatistics } from './useTextStatistics';
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
export default function Index() {
|
export default function Index() {
|
||||||
const { t } = useI18n('textStatistics');
|
|
||||||
const { text, stats, setText } = useTextStatistics();
|
const { text, stats, setText } = useTextStatistics();
|
||||||
|
|
||||||
const statItems = [
|
const statItems = [
|
||||||
{ label: t('textStatistics:characters'), value: stats.characters },
|
{ label: '字符数', value: stats.characters },
|
||||||
{ label: t('textStatistics:words'), value: stats.words },
|
{ label: '单词数', value: stats.words },
|
||||||
{ label: t('textStatistics:lines'), value: stats.lines },
|
{ label: '行数', value: stats.lines },
|
||||||
{ label: t('textStatistics:bytes'), value: formatBytes(stats.bytes) },
|
{ label: '字节大小', value: formatBytes(stats.bytes) },
|
||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -20,7 +18,7 @@ export default function Index() {
|
|||||||
<TextInputArea
|
<TextInputArea
|
||||||
value={text}
|
value={text}
|
||||||
onChange={setText}
|
onChange={setText}
|
||||||
placeholder={t('textStatistics:placeholder')}
|
placeholder={'在此输入或粘贴文本...'}
|
||||||
minRows={10}
|
minRows={10}
|
||||||
maxRows={18}
|
maxRows={18}
|
||||||
showClear={true}
|
showClear={true}
|
||||||
|
|||||||
@@ -0,0 +1,11 @@
|
|||||||
|
import { render, screen } from '@testing-library/react';
|
||||||
|
import { describe, it, expect } from 'vitest';
|
||||||
|
import Index from '../index';
|
||||||
|
|
||||||
|
describe('Timestamp 页面', () => {
|
||||||
|
it('应该渲染模式切换按钮', () => {
|
||||||
|
render(<Index />);
|
||||||
|
// 基本渲染测试:页面含多个模式切换按钮,应至少渲染一个
|
||||||
|
expect(screen.getAllByRole('button').length).toBeGreaterThan(0);
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -2,9 +2,8 @@ import React, { useEffect, useState } from 'react';
|
|||||||
import { Clock } from 'lucide-react';
|
import { Clock } from 'lucide-react';
|
||||||
import { toast } from 'sonner';
|
import { toast } from 'sonner';
|
||||||
import { CopyButton } from '@/components/CopyButton';
|
import { CopyButton } from '@/components/CopyButton';
|
||||||
import type { UnitType } from './constants';
|
import type { UnitType } from '../constants';
|
||||||
import { msToUnit } from './constants';
|
import { msToUnit } from '../constants';
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
interface LiveClockProps extends React.HTMLAttributes<HTMLDivElement> {
|
interface LiveClockProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||||
@@ -13,8 +12,6 @@ interface LiveClockProps extends React.HTMLAttributes<HTMLDivElement> {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default function LiveClock({ unit, onUseNow, className, ...props }: LiveClockProps) {
|
export default function LiveClock({ unit, onUseNow, className, ...props }: LiveClockProps) {
|
||||||
const { t } = useI18n('timestamp');
|
|
||||||
|
|
||||||
const [rawTime, setRawTime] = useState(() => Date.now());
|
const [rawTime, setRawTime] = useState(() => Date.now());
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -36,7 +33,7 @@ export default function LiveClock({ unit, onUseNow, className, ...props }: LiveC
|
|||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
<span className="text-muted-foreground font-bold text-[10px] uppercase tracking-wider whitespace-nowrap shrink-0 selection:bg-transparent select-none">
|
<span className="text-muted-foreground font-bold text-[10px] uppercase tracking-wider whitespace-nowrap shrink-0 selection:bg-transparent select-none">
|
||||||
{t('timestamp:currentTs')}
|
{'当前时间戳'}
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<span className="flex-1 font-mono font-bold text-foreground text-sm tracking-tight leading-none truncate tabular-nums">
|
<span className="flex-1 font-mono font-bold text-foreground text-sm tracking-tight leading-none truncate tabular-nums">
|
||||||
@@ -47,19 +44,15 @@ export default function LiveClock({ unit, onUseNow, className, ...props }: LiveC
|
|||||||
type="button"
|
type="button"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
onUseNow(rawTime);
|
onUseNow(rawTime);
|
||||||
toast.success(t('timestamp:usedSuccess'));
|
toast.success('已使用当前时间戳');
|
||||||
}}
|
}}
|
||||||
title={t('timestamp:useNowTooltip')}
|
title={'填充到下方'}
|
||||||
className="flex h-7 w-7 items-center justify-center rounded-md border border-input bg-background text-muted-foreground shadow-sm hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
className="flex h-7 w-7 items-center justify-center rounded-md border border-input bg-background text-muted-foreground shadow-sm hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||||
>
|
>
|
||||||
<Clock className="w-3.5 h-3.5" />
|
<Clock className="w-3.5 h-3.5" />
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<CopyButton
|
<CopyButton text={text} tooltip={'复制时间戳'} className="h-7 w-7 rounded-md border" />
|
||||||
text={text}
|
|
||||||
tooltip={t('timestamp:copyTsTooltip')}
|
|
||||||
className="h-7 w-7 rounded-md border"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -1,6 +1,5 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { CopyButton } from '@/components/CopyButton';
|
import { CopyButton } from '@/components/CopyButton';
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
interface ResultViewProps extends React.HTMLAttributes<HTMLDivElement> {
|
interface ResultViewProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||||
@@ -14,8 +13,6 @@ export default function ResultView({
|
|||||||
className,
|
className,
|
||||||
...props
|
...props
|
||||||
}: ResultViewProps) {
|
}: ResultViewProps) {
|
||||||
const { t } = useI18n('timestamp');
|
|
||||||
|
|
||||||
if (!result) {
|
if (!result) {
|
||||||
if (!showEmptyPlaceholder) return null;
|
if (!showEmptyPlaceholder) return null;
|
||||||
return (
|
return (
|
||||||
@@ -26,7 +23,7 @@ export default function ResultView({
|
|||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
{t('timestamp:resultEmpty')}
|
{'请输入并点击转换'}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -34,7 +31,7 @@ export default function ResultView({
|
|||||||
return (
|
return (
|
||||||
<div className={cn('flex flex-col w-full', className)} {...props}>
|
<div className={cn('flex flex-col w-full', className)} {...props}>
|
||||||
<span className="block text-muted-foreground/90 mb-2.5 text-xs font-semibold tracking-wider uppercase">
|
<span className="block text-muted-foreground/90 mb-2.5 text-xs font-semibold tracking-wider uppercase">
|
||||||
{t('timestamp:resultLabel')}
|
{'转换结果'}
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<div className="bg-card text-card-foreground border border-border p-4 sm:p-5 rounded-xl relative shadow-sm flex justify-between items-center gap-4 focus-within:ring-1 focus-within:ring-ring">
|
<div className="bg-card text-card-foreground border border-border p-4 sm:p-5 rounded-xl relative shadow-sm flex justify-between items-center gap-4 focus-within:ring-1 focus-within:ring-ring">
|
||||||
@@ -43,7 +40,7 @@ export default function ResultView({
|
|||||||
</span>
|
</span>
|
||||||
<CopyButton
|
<CopyButton
|
||||||
text={result}
|
text={result}
|
||||||
tooltip={t('timestamp:copyResultTooltip')}
|
tooltip={'复制结果'}
|
||||||
className="h-8 w-8 rounded-md shrink-0 border"
|
className="h-8 w-8 rounded-md shrink-0 border"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@@ -1,10 +1,9 @@
|
|||||||
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
|
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
|
||||||
import { ZONES } from './constants';
|
import { ZONES } from './constants';
|
||||||
import type { ModeType, UnitType, ZoneType } from './constants';
|
import type { ModeType, UnitType, ZoneType } from './constants';
|
||||||
import LiveClock from './LiveClock';
|
import LiveClock from './components/LiveClock';
|
||||||
import ResultView from './ResultView';
|
import ResultView from './components/ResultView';
|
||||||
import { useTimestampConverter } from './useTimestampConverter';
|
import { useTimestampConverter } from './useTimestampConverter';
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
@@ -17,18 +16,16 @@ import {
|
|||||||
} from '@/components/ui/select';
|
} from '@/components/ui/select';
|
||||||
|
|
||||||
const MODE_OPTIONS: { value: ModeType; label: string }[] = [
|
const MODE_OPTIONS: { value: ModeType; label: string }[] = [
|
||||||
{ value: 'ts2dt', label: 'timestamp:tsToDate' },
|
{ value: 'ts2dt', label: '时间戳转日期' },
|
||||||
{ value: 'dt2ts', label: 'timestamp:dateToTs' },
|
{ value: 'dt2ts', label: '日期转时间戳' },
|
||||||
];
|
];
|
||||||
|
|
||||||
const UNIT_OPTIONS: { value: UnitType; label: string }[] = [
|
const UNIT_OPTIONS: { value: UnitType; label: string }[] = [
|
||||||
{ value: 'ms', label: 'timestamp:unitMs' },
|
{ value: 'ms', label: '毫秒' },
|
||||||
{ value: 's', label: 'timestamp:unitS' },
|
{ value: 's', label: '秒' },
|
||||||
];
|
];
|
||||||
|
|
||||||
export default function Index() {
|
export default function Index() {
|
||||||
const { t } = useI18n('timestamp');
|
|
||||||
|
|
||||||
const {
|
const {
|
||||||
mode,
|
mode,
|
||||||
input,
|
input,
|
||||||
@@ -53,7 +50,7 @@ export default function Index() {
|
|||||||
<div className="flex flex-col gap-4">
|
<div className="flex flex-col gap-4">
|
||||||
<SwitchButtonGroup
|
<SwitchButtonGroup
|
||||||
value={mode}
|
value={mode}
|
||||||
options={MODE_OPTIONS.map((o) => ({ ...o, label: t(o.label) }))}
|
options={MODE_OPTIONS}
|
||||||
onChange={setMode}
|
onChange={setMode}
|
||||||
size="small"
|
size="small"
|
||||||
/>
|
/>
|
||||||
@@ -61,9 +58,7 @@ export default function Index() {
|
|||||||
<div className="flex flex-col gap-1.5">
|
<div className="flex flex-col gap-1.5">
|
||||||
<Input
|
<Input
|
||||||
type="text"
|
type="text"
|
||||||
placeholder={
|
placeholder={mode === 'ts2dt' ? '输入时间戳...' : 'YYYY-MM-DD HH:mm:ss'}
|
||||||
mode === 'ts2dt' ? t('timestamp:placeholderTs') : t('timestamp:placeholderDate')
|
|
||||||
}
|
|
||||||
value={input}
|
value={input}
|
||||||
onChange={(e) => setInput(e.target.value)}
|
onChange={(e) => setInput(e.target.value)}
|
||||||
className={cn(
|
className={cn(
|
||||||
@@ -78,7 +73,7 @@ export default function Index() {
|
|||||||
<div className="flex flex-col sm:flex-row items-stretch gap-3 w-full">
|
<div className="flex flex-col sm:flex-row items-stretch gap-3 w-full">
|
||||||
<SwitchButtonGroup
|
<SwitchButtonGroup
|
||||||
value={unit}
|
value={unit}
|
||||||
options={UNIT_OPTIONS.map((o) => ({ ...o, label: t(o.label) }))}
|
options={UNIT_OPTIONS}
|
||||||
onChange={setUnit}
|
onChange={setUnit}
|
||||||
size="small"
|
size="small"
|
||||||
className="sm:w-auto shrink-0"
|
className="sm:w-auto shrink-0"
|
||||||
|
|||||||
@@ -2,7 +2,6 @@ import { useMemo, useState } from 'react';
|
|||||||
import dayjs from '@/utils/dayjs';
|
import dayjs from '@/utils/dayjs';
|
||||||
import type { UnitType, ZoneType, ModeType } from './constants';
|
import type { UnitType, ZoneType, ModeType } from './constants';
|
||||||
import { DATE_FORMAT, msToUnit, dayjsFromTimestamp } from './constants';
|
import { DATE_FORMAT, msToUnit, dayjsFromTimestamp } from './constants';
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
|
||||||
import { useContextMenuData } from '@/utils/useContextMenuData';
|
import { useContextMenuData } from '@/utils/useContextMenuData';
|
||||||
|
|
||||||
export interface UseTimestampConverterReturn {
|
export interface UseTimestampConverterReturn {
|
||||||
@@ -29,7 +28,6 @@ function isTimestampLike(input: string): boolean {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function useTimestampConverter(): UseTimestampConverterReturn {
|
export function useTimestampConverter(): UseTimestampConverterReturn {
|
||||||
const { t } = useI18n('timestamp');
|
|
||||||
const [mode, setMode] = useState<ModeType>('ts2dt');
|
const [mode, setMode] = useState<ModeType>('ts2dt');
|
||||||
const [unit, setUnit] = useState<UnitType>('ms');
|
const [unit, setUnit] = useState<UnitType>('ms');
|
||||||
const [zone, setZone] = useState<ZoneType>('Asia/Shanghai');
|
const [zone, setZone] = useState<ZoneType>('Asia/Shanghai');
|
||||||
@@ -43,22 +41,22 @@ export function useTimestampConverter(): UseTimestampConverterReturn {
|
|||||||
if (mode === 'ts2dt') {
|
if (mode === 'ts2dt') {
|
||||||
const num = Number(rawInput);
|
const num = Number(rawInput);
|
||||||
if (isNaN(num)) {
|
if (isNaN(num)) {
|
||||||
return { result: '', error: t('timestamp:errors.invalidNumber') };
|
return { result: '', error: '请输入有效数字' };
|
||||||
}
|
}
|
||||||
const d = dayjsFromTimestamp(num, unit);
|
const d = dayjsFromTimestamp(num, unit);
|
||||||
if (!d.isValid()) {
|
if (!d.isValid()) {
|
||||||
return { result: '', error: t('timestamp:errors.invalidTimestamp') };
|
return { result: '', error: '无效时间戳' };
|
||||||
}
|
}
|
||||||
return { result: d.tz(zone).format(DATE_FORMAT), error: '' };
|
return { result: d.tz(zone).format(DATE_FORMAT), error: '' };
|
||||||
} else {
|
} else {
|
||||||
const d = dayjs.tz(rawInput, DATE_FORMAT, zone);
|
const d = dayjs.tz(rawInput, DATE_FORMAT, zone);
|
||||||
if (!d.isValid()) {
|
if (!d.isValid()) {
|
||||||
return { result: '', error: t('timestamp:errors.invalidFormat') };
|
return { result: '', error: '无效的日期格式' };
|
||||||
}
|
}
|
||||||
const ms = d.valueOf();
|
const ms = d.valueOf();
|
||||||
return { result: String(msToUnit(ms, unit)), error: '' };
|
return { result: String(msToUnit(ms, unit)), error: '' };
|
||||||
}
|
}
|
||||||
}, [input, mode, unit, zone, t]);
|
}, [input, mode, unit, zone]);
|
||||||
|
|
||||||
const handleContextMenuData = (payload: string) => {
|
const handleContextMenuData = (payload: string) => {
|
||||||
const trimmed = payload.trim();
|
const trimmed = payload.trim();
|
||||||
|
|||||||
@@ -156,29 +156,19 @@ export interface GenerateProgress {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Worker 请求消息类型
|
* Worker 消息类型
|
||||||
*/
|
*/
|
||||||
export type WorkerRequestMessage =
|
export type WorkerMessage =
|
||||||
| { type: 'start'; payload: WorkerStartPayload }
|
| { type: 'start'; payload: WorkerStartPayload }
|
||||||
|
| { type: 'progress'; payload: GenerateProgress }
|
||||||
|
| { type: 'complete'; payload: GenerateResult }
|
||||||
|
| { type: 'error'; payload: { error: string } }
|
||||||
| { type: 'cancel' };
|
| { 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 启动参数
|
* Worker 启动参数
|
||||||
*/
|
*/
|
||||||
export interface WorkerStartPayload {
|
export interface WorkerStartPayload {
|
||||||
/** 生成任务 ID,用于忽略过期 Worker 响应 */
|
|
||||||
generationId: number;
|
|
||||||
/** 字段配置列表 */
|
/** 字段配置列表 */
|
||||||
fields: FieldConfig[];
|
fields: FieldConfig[];
|
||||||
/** 生成数量 */
|
/** 生成数量 */
|
||||||
|
|||||||
@@ -7,7 +7,6 @@ import {
|
|||||||
isSupportedImageType,
|
isSupportedImageType,
|
||||||
isSupportedImageExtension,
|
isSupportedImageExtension,
|
||||||
extractMimeTypeFromDataUri,
|
extractMimeTypeFromDataUri,
|
||||||
formatFileSize,
|
|
||||||
base64ToBytes,
|
base64ToBytes,
|
||||||
sniffMimeFromBytes,
|
sniffMimeFromBytes,
|
||||||
base64ToBlob,
|
base64ToBlob,
|
||||||
@@ -185,26 +184,6 @@ describe('extractMimeTypeFromDataUri', () => {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('formatFileSize', () => {
|
|
||||||
it('应该格式化字节', () => {
|
|
||||||
expect(formatFileSize(0)).toBe('0 B');
|
|
||||||
expect(formatFileSize(512)).toBe('512 B');
|
|
||||||
});
|
|
||||||
|
|
||||||
it('应该格式化 KB', () => {
|
|
||||||
expect(formatFileSize(1024)).toBe('1.0 KB');
|
|
||||||
expect(formatFileSize(1536)).toBe('1.5 KB');
|
|
||||||
});
|
|
||||||
|
|
||||||
it('应该格式化 MB', () => {
|
|
||||||
expect(formatFileSize(1048576)).toBe('1.00 MB');
|
|
||||||
});
|
|
||||||
|
|
||||||
it('应该格式化 GB', () => {
|
|
||||||
expect(formatFileSize(1073741824)).toBe('1.00 GB');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('base64ToBytes', () => {
|
describe('base64ToBytes', () => {
|
||||||
it('应该解码标准 ASCII Base64 为字节序列', () => {
|
it('应该解码标准 ASCII Base64 为字节序列', () => {
|
||||||
const bytes = base64ToBytes('aGVsbG8=');
|
const bytes = base64ToBytes('aGVsbG8=');
|
||||||
|
|||||||
@@ -50,7 +50,7 @@ describe('contextMenu', () => {
|
|||||||
);
|
);
|
||||||
expect(imageMenus).toHaveLength(1);
|
expect(imageMenus).toHaveLength(1);
|
||||||
expect(imageMenus[0].id).toBe('qrCode-image');
|
expect(imageMenus[0].id).toBe('qrCode-image');
|
||||||
expect(imageMenus[0].title).toBe('🖼️ 解析图片二维码');
|
expect(imageMenus[0].title).toBe('解析图片二维码');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -73,7 +73,7 @@ describe('contextMenu', () => {
|
|||||||
|
|
||||||
expect(chrome.contextMenus.create).toHaveBeenCalledWith({
|
expect(chrome.contextMenus.create).toHaveBeenCalledWith({
|
||||||
id: 'jwt',
|
id: 'jwt',
|
||||||
title: '🔑 解析 JWT',
|
title: '解析 JWT',
|
||||||
contexts: ['selection'],
|
contexts: ['selection'],
|
||||||
parentId: 'testing-tools-parent',
|
parentId: 'testing-tools-parent',
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { describe, it, expect } from 'vitest';
|
import { describe, it, expect } from 'vitest';
|
||||||
import { diffJson } from '../../pages/JsonTools/diffEngine';
|
import { diffJson } from '../diffEngine';
|
||||||
|
|
||||||
describe('diffJson', () => {
|
describe('diffJson', () => {
|
||||||
it('should detect added property', () => {
|
it('should detect added property', () => {
|
||||||
|
|||||||
@@ -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();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -2,8 +2,6 @@
|
|||||||
* Base64 转换器工具函数
|
* Base64 转换器工具函数
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { formatBytes } from './format';
|
|
||||||
|
|
||||||
/** 最大文件大小限制(10 MB) */
|
/** 最大文件大小限制(10 MB) */
|
||||||
export const MAX_FILE_SIZE = 10 * 1024 * 1024;
|
export const MAX_FILE_SIZE = 10 * 1024 * 1024;
|
||||||
|
|
||||||
@@ -212,17 +210,6 @@ export function extractMimeTypeFromDataUri(dataUri: string): string {
|
|||||||
return match ? match[1] : 'application/octet-stream';
|
return match ? match[1] : 'application/octet-stream';
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* 格式化文件大小显示
|
|
||||||
*
|
|
||||||
* @deprecated 直接使用 {@link formatBytes} 代替
|
|
||||||
* @param bytes 字节数
|
|
||||||
* @returns 格式化后的字符串
|
|
||||||
*/
|
|
||||||
export function formatFileSize(bytes: number): string {
|
|
||||||
return formatBytes(bytes);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Base64 解码为二进制后的产物
|
* Base64 解码为二进制后的产物
|
||||||
*/
|
*/
|
||||||
|
|||||||
@@ -1,68 +0,0 @@
|
|||||||
/**
|
|
||||||
* chrome.i18n 类型安全 wrapper
|
|
||||||
* 提供与 react-i18next 兼容的接口
|
|
||||||
*/
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 获取翻译文本
|
|
||||||
* @param msgId 翻译 key(如 'timestamp_pageTitle')
|
|
||||||
* @param substitutions 占位符替换值(可选)
|
|
||||||
* @returns 翻译后的文本
|
|
||||||
*/
|
|
||||||
export function getMessage(msgId: string, substitutions?: string[]): string {
|
|
||||||
try {
|
|
||||||
return chrome.i18n.getMessage(msgId, substitutions);
|
|
||||||
} catch (error) {
|
|
||||||
console.warn(`[chrome.i18n] 无法获取翻译: ${msgId}`, error);
|
|
||||||
return msgId; // 回退到 key 本身
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* react-i18next 兼容的 Hook
|
|
||||||
* 返回 t 函数和相关信息
|
|
||||||
*/
|
|
||||||
export function useI18n(namespace?: string | string[]) {
|
|
||||||
const namespaces = Array.isArray(namespace) ? namespace : namespace ? [namespace] : [];
|
|
||||||
|
|
||||||
const t = (key: string, options?: Record<string, unknown>): string => {
|
|
||||||
// 统一将分隔符转换为下划线,兼容 'namespace:key.path' 和 'key.path' 两种写法
|
|
||||||
const msgId = key.replace(':', '_').replace(/\./g, '_');
|
|
||||||
|
|
||||||
// 先尝试直接查找 key
|
|
||||||
let message = getMessage(msgId);
|
|
||||||
|
|
||||||
// 如果直接查找未命中(空字符串或返回 key 本身),尝试命名空间前缀(使用转换后的 msgId)
|
|
||||||
if ((!message || message === msgId) && namespaces.length > 0) {
|
|
||||||
for (const ns of namespaces) {
|
|
||||||
const candidate = `${ns}_${msgId}`;
|
|
||||||
const result = getMessage(candidate);
|
|
||||||
if (result !== candidate) {
|
|
||||||
message = result;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (options) {
|
|
||||||
for (const [placeholder, value] of Object.entries(options)) {
|
|
||||||
message = message.replace(`{{${placeholder}}}`, String(value));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return message;
|
|
||||||
};
|
|
||||||
|
|
||||||
return {
|
|
||||||
t,
|
|
||||||
i18n: {
|
|
||||||
language: 'zh',
|
|
||||||
changeLanguage: (_lng?: string) => {
|
|
||||||
// chrome.i18n 无法动态切换语言,需要刷新页面
|
|
||||||
console.warn('[chrome.i18n] 无法动态切换语言,需要刷新页面');
|
|
||||||
return Promise.resolve();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
isLoaded: true,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@@ -44,43 +44,43 @@ export const CONTEXT_MENU_CONFIGS: ContextMenuItemConfig[] = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'jwt',
|
id: 'jwt',
|
||||||
title: '🔑 解析 JWT',
|
title: '解析 JWT',
|
||||||
contexts: [chrome.contextMenus.ContextType.SELECTION],
|
contexts: [chrome.contextMenus.ContextType.SELECTION],
|
||||||
parentId: PARENT_MENU_ID,
|
parentId: PARENT_MENU_ID,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'base64Converter',
|
id: 'base64Converter',
|
||||||
title: '🔄 Base64 解码',
|
title: 'Base64 解码',
|
||||||
contexts: [chrome.contextMenus.ContextType.SELECTION],
|
contexts: [chrome.contextMenus.ContextType.SELECTION],
|
||||||
parentId: PARENT_MENU_ID,
|
parentId: PARENT_MENU_ID,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'textStatistics',
|
id: 'textStatistics',
|
||||||
title: '📊 统计选中文本',
|
title: '统计选中文本',
|
||||||
contexts: [chrome.contextMenus.ContextType.SELECTION],
|
contexts: [chrome.contextMenus.ContextType.SELECTION],
|
||||||
parentId: PARENT_MENU_ID,
|
parentId: PARENT_MENU_ID,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'timestamp',
|
id: 'timestamp',
|
||||||
title: '⏰ 转换时间戳',
|
title: '转换时间戳',
|
||||||
contexts: [chrome.contextMenus.ContextType.SELECTION],
|
contexts: [chrome.contextMenus.ContextType.SELECTION],
|
||||||
parentId: PARENT_MENU_ID,
|
parentId: PARENT_MENU_ID,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'storageCleaner',
|
id: 'storageCleaner',
|
||||||
title: '🧹 清理当前网站存储',
|
title: '清理当前网站存储',
|
||||||
contexts: [chrome.contextMenus.ContextType.PAGE],
|
contexts: [chrome.contextMenus.ContextType.PAGE],
|
||||||
parentId: PARENT_MENU_ID,
|
parentId: PARENT_MENU_ID,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'qrCode-page',
|
id: 'qrCode-page',
|
||||||
title: '🔗 网页链接转二维码',
|
title: '网页链接转二维码',
|
||||||
contexts: [chrome.contextMenus.ContextType.PAGE],
|
contexts: [chrome.contextMenus.ContextType.PAGE],
|
||||||
parentId: PARENT_MENU_ID,
|
parentId: PARENT_MENU_ID,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'qrCode-image',
|
id: 'qrCode-image',
|
||||||
title: '🖼️ 解析图片二维码',
|
title: '解析图片二维码',
|
||||||
contexts: [chrome.contextMenus.ContextType.IMAGE],
|
contexts: [chrome.contextMenus.ContextType.IMAGE],
|
||||||
parentId: PARENT_MENU_ID,
|
parentId: PARENT_MENU_ID,
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import type { DiffNode, DiffResult, DiffType } from './types';
|
import type { DiffNode, DiffResult, DiffType } from '@/pages/JsonTools/types';
|
||||||
|
|
||||||
const ROOT_PATH = '$';
|
const ROOT_PATH = '$';
|
||||||
const SENTINEL = Symbol('missing');
|
const SENTINEL = Symbol('missing');
|
||||||
+7
-12
@@ -2,8 +2,6 @@
|
|||||||
* JWT 解析工具
|
* JWT 解析工具
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { getMessage } from '@/utils/chromeI18n';
|
|
||||||
|
|
||||||
interface JwtHeader {
|
interface JwtHeader {
|
||||||
alg: string;
|
alg: string;
|
||||||
typ?: string;
|
typ?: string;
|
||||||
@@ -43,7 +41,7 @@ export function decodeBase64Url(str: string): string {
|
|||||||
const pad = base64.length % 4;
|
const pad = base64.length % 4;
|
||||||
if (pad) {
|
if (pad) {
|
||||||
if (pad === 1) {
|
if (pad === 1) {
|
||||||
throw new Error(getMessage('jwt_errors_invalidBase64String'));
|
throw new Error('无效的 Base64URL 字符串');
|
||||||
}
|
}
|
||||||
base64 += new Array(5 - pad).join('=');
|
base64 += new Array(5 - pad).join('=');
|
||||||
}
|
}
|
||||||
@@ -58,10 +56,9 @@ export function decodeBase64Url(str: string): string {
|
|||||||
const decoder = new TextDecoder('utf-8');
|
const decoder = new TextDecoder('utf-8');
|
||||||
return decoder.decode(bytes);
|
return decoder.decode(bytes);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
throw new Error(
|
throw new Error('Base64 解码失败: ' + (e instanceof Error ? e.message : String(e)), {
|
||||||
getMessage('jwt_errors_failedToDecode') + (e instanceof Error ? e.message : String(e)),
|
cause: e,
|
||||||
{ cause: e },
|
});
|
||||||
);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -78,7 +75,7 @@ export function parseJwt(token: string): JwtResult {
|
|||||||
payload: null,
|
payload: null,
|
||||||
signature: '',
|
signature: '',
|
||||||
raw: { header: '', payload: '', signature: '' },
|
raw: { header: '', payload: '', signature: '' },
|
||||||
error: getMessage('jwt_errors_invalidFormat'),
|
error: 'JWT 格式无效:应包含 3 个部分(header.payload.signature)',
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -98,8 +95,7 @@ export function parseJwt(token: string): JwtResult {
|
|||||||
const headerJson = decodeBase64Url(headerB64);
|
const headerJson = decodeBase64Url(headerB64);
|
||||||
result.header = JSON.parse(headerJson);
|
result.header = JSON.parse(headerJson);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
result.error =
|
result.error = 'JWT Header 解析失败: ' + (e instanceof Error ? e.message : String(e));
|
||||||
getMessage('jwt_errors_parseHeaderFailed') + (e instanceof Error ? e.message : String(e));
|
|
||||||
return result;
|
return result;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -107,8 +103,7 @@ export function parseJwt(token: string): JwtResult {
|
|||||||
const payloadJson = decodeBase64Url(payloadB64);
|
const payloadJson = decodeBase64Url(payloadB64);
|
||||||
result.payload = JSON.parse(payloadJson);
|
result.payload = JSON.parse(payloadJson);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
result.error =
|
result.error = 'JWT Payload 解析失败: ' + (e instanceof Error ? e.message : String(e));
|
||||||
getMessage('jwt_errors_parsePayloadFailed') + (e instanceof Error ? e.message : String(e));
|
|
||||||
return result;
|
return result;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ import type { DataRule, FieldConfig } from '@/types/testDataGenerator';
|
|||||||
const STORAGE_KEY = 'testDataGenerator_rules';
|
const STORAGE_KEY = 'testDataGenerator_rules';
|
||||||
|
|
||||||
/** 最大规则数量 */
|
/** 最大规则数量 */
|
||||||
const MAX_RULES = 20;
|
export const MAX_RULES = 20;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 获取所有规则
|
* 获取所有规则
|
||||||
@@ -78,9 +78,7 @@ export function save(
|
|||||||
useCount: 0,
|
useCount: 0,
|
||||||
};
|
};
|
||||||
rules.unshift(newRule);
|
rules.unshift(newRule);
|
||||||
if (!setAll(rules)) {
|
setAll(rules);
|
||||||
return null;
|
|
||||||
}
|
|
||||||
return newRule;
|
return newRule;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -97,9 +95,7 @@ export function save(
|
|||||||
updatedAt: now,
|
updatedAt: now,
|
||||||
};
|
};
|
||||||
rules[index] = updatedRule;
|
rules[index] = updatedRule;
|
||||||
if (!setAll(rules)) {
|
setAll(rules);
|
||||||
return null;
|
|
||||||
}
|
|
||||||
return updatedRule;
|
return updatedRule;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -121,9 +117,7 @@ export function update(id: string, updates: Partial<DataRule>): DataRule | null
|
|||||||
updatedAt: Date.now(),
|
updatedAt: Date.now(),
|
||||||
};
|
};
|
||||||
rules[index] = updatedRule;
|
rules[index] = updatedRule;
|
||||||
if (!setAll(rules)) {
|
setAll(rules);
|
||||||
return null;
|
|
||||||
}
|
|
||||||
return updatedRule;
|
return updatedRule;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -138,7 +132,8 @@ export function deleteRule(id: string): boolean {
|
|||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
rules.splice(index, 1);
|
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();
|
const rules = getAll();
|
||||||
rules.unshift(newRule);
|
rules.unshift(newRule);
|
||||||
if (!setAll(rules)) {
|
setAll(rules);
|
||||||
return null;
|
|
||||||
}
|
|
||||||
return newRule;
|
return newRule;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -274,13 +267,11 @@ export function clear(): void {
|
|||||||
/**
|
/**
|
||||||
* 保存所有规则到存储
|
* 保存所有规则到存储
|
||||||
*/
|
*/
|
||||||
function setAll(rules: DataRule[]): boolean {
|
function setAll(rules: DataRule[]): void {
|
||||||
try {
|
try {
|
||||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(rules));
|
localStorage.setItem(STORAGE_KEY, JSON.stringify(rules));
|
||||||
return true;
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('[ruleStorage] 保存规则失败:', error);
|
console.error('[ruleStorage] 保存规则失败:', error);
|
||||||
return false;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -20,6 +20,15 @@ const CLEAN_OPTION_KEYS: (keyof StorageCleanerOptions)[] = [
|
|||||||
'serviceWorkers',
|
'serviceWorkers',
|
||||||
];
|
];
|
||||||
|
|
||||||
|
const OPTION_LABELS: Record<string, string> = {
|
||||||
|
localStorage: 'Local Storage',
|
||||||
|
sessionStorage: 'Session Storage',
|
||||||
|
indexedDB: '站点存储',
|
||||||
|
cookies: 'Cookies',
|
||||||
|
cacheStorage: 'Cache Storage',
|
||||||
|
serviceWorkers: 'Service Workers',
|
||||||
|
};
|
||||||
|
|
||||||
export async function getCurrentTab() {
|
export async function getCurrentTab() {
|
||||||
// For popup pages, we need to get the active tab from the browser window that triggered the popup.
|
// For popup pages, we need to get the active tab from the browser window that triggered the popup.
|
||||||
// We should ONLY care about the currently active tab in the last focused window.
|
// We should ONLY care about the currently active tab in the last focused window.
|
||||||
@@ -362,22 +371,19 @@ export async function clearStorage(
|
|||||||
return result;
|
return result;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function formatCleaningResult(
|
export function formatCleaningResult(result: CleaningResult): string {
|
||||||
result: CleaningResult,
|
|
||||||
t: (key: string, options?: Record<string, unknown>) => string,
|
|
||||||
): string {
|
|
||||||
const parts: string[] = [];
|
const parts: string[] = [];
|
||||||
|
|
||||||
for (const key of CLEAN_OPTION_KEYS) {
|
for (const key of CLEAN_OPTION_KEYS) {
|
||||||
const r = result[key];
|
const r = result[key];
|
||||||
if (r?.success && r.count > 0) {
|
if (r?.success && r.count > 0) {
|
||||||
parts.push(`${r.count} ${t(`storageCleaner:options.${key}`)}`);
|
parts.push(`${r.count} ${OPTION_LABELS[key] || key}`);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (parts.length === 0) {
|
if (parts.length === 0) {
|
||||||
return t('storageCleaner:noDataToClean');
|
return '该页面没有可清理的存储数据';
|
||||||
}
|
}
|
||||||
|
|
||||||
return t('storageCleaner:cleanedSummary', { items: parts.join(', ') });
|
return `清理了 ${parts.join(', ')}`;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -6,14 +6,11 @@
|
|||||||
import { getGeneratorById } from '@/lib/generators';
|
import { getGeneratorById } from '@/lib/generators';
|
||||||
import type {
|
import type {
|
||||||
FieldConfig,
|
FieldConfig,
|
||||||
WorkerRequestMessage,
|
WorkerMessage,
|
||||||
GenerateResult,
|
GenerateResult,
|
||||||
GenerateProgress,
|
GenerateProgress,
|
||||||
} from '@/types/testDataGenerator';
|
} from '@/types/testDataGenerator';
|
||||||
|
|
||||||
/** 每生成 N 行让出一次事件循环,以便处理 cancel 消息 */
|
|
||||||
const YIELD_EVERY = 100;
|
|
||||||
|
|
||||||
// 生成结果缓存
|
// 生成结果缓存
|
||||||
let generatedData: Record<string, unknown>[] = [];
|
let generatedData: Record<string, unknown>[] = [];
|
||||||
let isCancelled = false;
|
let isCancelled = false;
|
||||||
@@ -21,7 +18,7 @@ let isCancelled = false;
|
|||||||
/**
|
/**
|
||||||
* Worker 消息处理器
|
* Worker 消息处理器
|
||||||
*/
|
*/
|
||||||
self.onmessage = async (e: MessageEvent<WorkerRequestMessage>) => {
|
self.onmessage = async (e: MessageEvent<WorkerMessage>) => {
|
||||||
const data = e.data;
|
const data = e.data;
|
||||||
const { type } = data;
|
const { type } = data;
|
||||||
|
|
||||||
@@ -40,12 +37,11 @@ self.onmessage = async (e: MessageEvent<WorkerRequestMessage>) => {
|
|||||||
* 处理开始生成消息
|
* 处理开始生成消息
|
||||||
*/
|
*/
|
||||||
async function handleStart(payload: {
|
async function handleStart(payload: {
|
||||||
generationId: number;
|
|
||||||
fields: FieldConfig[];
|
fields: FieldConfig[];
|
||||||
count: number;
|
count: number;
|
||||||
csvMode: boolean;
|
csvMode: boolean;
|
||||||
}): Promise<void> {
|
}): Promise<void> {
|
||||||
const { generationId, fields, count } = payload;
|
const { fields, count } = payload;
|
||||||
generatedData = [];
|
generatedData = [];
|
||||||
|
|
||||||
try {
|
try {
|
||||||
@@ -55,7 +51,6 @@ async function handleStart(payload: {
|
|||||||
if (!generator) {
|
if (!generator) {
|
||||||
self.postMessage({
|
self.postMessage({
|
||||||
type: 'error',
|
type: 'error',
|
||||||
generationId,
|
|
||||||
payload: { error: `生成器 "${field.generatorId}" 不存在` },
|
payload: { error: `生成器 "${field.generatorId}" 不存在` },
|
||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
@@ -70,7 +65,6 @@ async function handleStart(payload: {
|
|||||||
if (isCancelled) {
|
if (isCancelled) {
|
||||||
self.postMessage({
|
self.postMessage({
|
||||||
type: 'complete',
|
type: 'complete',
|
||||||
generationId,
|
|
||||||
payload: {
|
payload: {
|
||||||
success: false,
|
success: false,
|
||||||
error: '生成已取消',
|
error: '生成已取消',
|
||||||
@@ -142,23 +136,7 @@ async function handleStart(payload: {
|
|||||||
total: count,
|
total: count,
|
||||||
estimatedTimeLeft: Math.round(((Date.now() - startTime) / (i + 1)) * (count - i - 1)),
|
estimatedTimeLeft: Math.round(((Date.now() - startTime) / (i + 1)) * (count - i - 1)),
|
||||||
};
|
};
|
||||||
self.postMessage({ type: 'progress', generationId, payload: progress });
|
self.postMessage({ type: 'progress', 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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -177,11 +155,10 @@ async function handleStart(payload: {
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
self.postMessage({ type: 'complete', generationId, payload: result });
|
self.postMessage({ type: 'complete', payload: result });
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
self.postMessage({
|
self.postMessage({
|
||||||
type: 'error',
|
type: 'error',
|
||||||
generationId,
|
|
||||||
payload: { error: `生成失败: ${error}` },
|
payload: { error: `生成失败: ${error}` },
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
+14
-35
@@ -1,41 +1,6 @@
|
|||||||
import '@testing-library/jest-dom';
|
import '@testing-library/jest-dom';
|
||||||
import { afterEach, beforeEach, vi } from 'vitest';
|
import { afterEach, beforeEach, vi } from 'vitest';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import zhMessages from './public/_locales/zh_CN/messages.json';
|
|
||||||
|
|
||||||
// Type assertion to allow string indexing
|
|
||||||
const zhMessagesMap = zhMessages as Record<string, { message: string }>;
|
|
||||||
|
|
||||||
vi.mock('@/utils/chromeI18n', () => ({
|
|
||||||
useI18n: (ns?: string | string[]) => ({
|
|
||||||
t: (key: string) => {
|
|
||||||
let msgId = key;
|
|
||||||
// Handle namespace:key format
|
|
||||||
if (key.includes(':')) {
|
|
||||||
msgId = key.replace(':', '_').replace(/\./g, '_');
|
|
||||||
}
|
|
||||||
// Try direct key first
|
|
||||||
if (zhMessagesMap[msgId]) return zhMessagesMap[msgId].message;
|
|
||||||
// Try namespace prefix (using converted msgId)
|
|
||||||
if (ns) {
|
|
||||||
const namespaces = Array.isArray(ns) ? ns : [ns];
|
|
||||||
for (const n of namespaces) {
|
|
||||||
const candidate = `${n}_${msgId}`;
|
|
||||||
if (zhMessagesMap[candidate]) return zhMessagesMap[candidate].message;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return msgId;
|
|
||||||
},
|
|
||||||
i18n: {
|
|
||||||
changeLanguage: vi.fn().mockResolvedValue(undefined),
|
|
||||||
language: 'zh',
|
|
||||||
},
|
|
||||||
isLoaded: true,
|
|
||||||
}),
|
|
||||||
getMessage: (msgId: string) => zhMessagesMap[msgId]?.message ?? msgId,
|
|
||||||
getLanguage: () => 'zh',
|
|
||||||
preloadNamespaces: vi.fn().mockResolvedValue(undefined),
|
|
||||||
}));
|
|
||||||
|
|
||||||
vi.mock('@/components/CopyButton', () => ({
|
vi.mock('@/components/CopyButton', () => ({
|
||||||
CopyButton: ({
|
CopyButton: ({
|
||||||
@@ -125,6 +90,20 @@ const webExtensionMock = {
|
|||||||
sendMessage: vi.fn().mockResolvedValue(undefined),
|
sendMessage: vi.fn().mockResolvedValue(undefined),
|
||||||
create: vi.fn().mockResolvedValue({}),
|
create: vi.fn().mockResolvedValue({}),
|
||||||
reload: vi.fn().mockResolvedValue(undefined),
|
reload: vi.fn().mockResolvedValue(undefined),
|
||||||
|
onActivated: {
|
||||||
|
addListener: vi.fn(),
|
||||||
|
removeListener: vi.fn(),
|
||||||
|
},
|
||||||
|
onUpdated: {
|
||||||
|
addListener: vi.fn(),
|
||||||
|
removeListener: vi.fn(),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
windows: {
|
||||||
|
onFocusChanged: {
|
||||||
|
addListener: vi.fn(),
|
||||||
|
removeListener: vi.fn(),
|
||||||
|
},
|
||||||
},
|
},
|
||||||
runtime: {
|
runtime: {
|
||||||
id: 'test-extension-id',
|
id: 'test-extension-id',
|
||||||
|
|||||||
+1
-4
@@ -45,12 +45,9 @@ export default defineConfig({
|
|||||||
name: 'Testing Tool',
|
name: 'Testing Tool',
|
||||||
description: 'A tool for testing web applications.',
|
description: 'A tool for testing web applications.',
|
||||||
version_name: undefined,
|
version_name: undefined,
|
||||||
default_locale: 'zh_CN',
|
|
||||||
permissions: [
|
permissions: [
|
||||||
'storage',
|
'storage',
|
||||||
'unlimitedStorage',
|
|
||||||
'clipboardWrite',
|
'clipboardWrite',
|
||||||
'activeTab',
|
|
||||||
'scripting',
|
'scripting',
|
||||||
'tabs',
|
'tabs',
|
||||||
'cookies',
|
'cookies',
|
||||||
@@ -66,7 +63,7 @@ export default defineConfig({
|
|||||||
'128': 'icon/128.png',
|
'128': 'icon/128.png',
|
||||||
},
|
},
|
||||||
action: {
|
action: {
|
||||||
default_title: '__MSG_appName__',
|
default_title: 'Testing Tool',
|
||||||
default_icon: {
|
default_icon: {
|
||||||
'16': 'icon/16.png',
|
'16': 'icon/16.png',
|
||||||
'32': 'icon/32.png',
|
'32': 'icon/32.png',
|
||||||
|
|||||||
Reference in New Issue
Block a user