雨霖铃
aa23a263fe
- 移除 react-i18next、i18next 及相关依赖
- 删除旧的 i18n/ 目录和 useLazyTranslation 工具
- 新增 utils/chromeI18n.ts 类型安全 wrapper（useI18n Hook + getMessage）
- 生成 public/_locales/{zh,en}/messages.json（298 个翻译 key）
- 批量更新 39+ 组件文件的导入和翻译调用
- 转换翻译键格式：namespace:key → namespace_key
- 修复 ErrorBoundary/PageErrorBoundary 从 withTranslation HOC 改为直接调用 getMessage
- 更新 vitest.setup.ts mock 加载实际翻译文本
- 修复 11 个测试文件的断言以匹配中文翻译
- TypeScript、ESLint、547 项测试全部通过
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
pages/
功能页面组件目录，每个子目录对应一个工具页面。
目录结构约定
典型页面遵循 UI + Hook 分离 模式：
pages/FeatureName/
├── index.tsx # 页面 UI（纯展示，使用 shadcn/ui 组件）
├── useFeatureName.ts # 业务逻辑 Hook（状态管理 + 转换逻辑）
├── constants.ts # 常量定义（可选）
├── SubComponent.tsx # 子组件（可选）
└── __tests__/ # 测试文件
└── index.test.tsx
页面列表
Dashboard/
仪表盘首页，以卡片网格展示所有可见工具，支持点击导航。
| 文件 | 用途 |
|---|---|
index.tsx |
页面组件，渲染工具卡片网格 |
ToolCard.tsx |
工具卡片组件，展示图标、标题、描述和实时数据 |
Timestamp/
时间戳转换工具，支持秒/毫秒级互转、多时区选择、实时时钟。
| 文件 | 用途 |
|---|---|
index.tsx |
页面 UI |
useTimestampConverter.ts |
业务逻辑 Hook，包含转换模式、输入、单位、时区状态和响应式计算管线 |
LiveClock.tsx |
实时时钟子组件，React.memo 优化 |
ResultView.tsx |
转换结果展示子组件 |
constants.ts |
时区列表等常量 |
StorageCleaner/
浏览器存储清理工具，支持 Cookie/LocalStorage/SessionStorage/IndexedDB/Cache/SW 清理。
| 文件 | 用途 |
|---|---|
index.tsx |
页面 UI |
useStorageCleaner.ts |
业务逻辑 Hook |
StorageOptionsGrid.tsx |
清理选项网格 |
StorageCleanerConfirm.tsx |
清理确认对话框 |
AutoRefreshToggle.tsx |
自动刷新开关 |
ErrorDisplay.tsx |
错误展示组件 |
CleaningResult.tsx |
清理结果展示 |
OptionItem.tsx |
单个选项组件 |
QrCode/
二维码工具，支持生成（URL→QR）和解析（QR→URL）。
| 文件/目录 | 用途 |
|---|---|
index.tsx |
页面 UI |
types.ts |
类型定义 |
contexts/ |
Context Provider |
hooks/ |
业务逻辑 Hooks |
components/ |
子组件 |
TextStatistics/
文本统计工具，实时计算字符数、单词数、行数、字节大小。
| 文件 | 用途 |
|---|---|
index.tsx |
页面组件，集成 TextInputArea 和统计结果展示 |
Jwt/
JWT 解析工具，解码 Header/Payload/Signature。
| 文件/目录 | 用途 |
|---|---|
index.tsx |
页面 UI |
types.ts |
类型定义 |
contexts/ |
Context Provider |
hooks/ |
业务逻辑 Hooks |
components/ |
子组件 |
JsonTools/
JSON 工具集：差异比较、格式化、YAML/TOML/Minify 转换。
| 文件 | 用途 |
|---|---|
index.tsx |
页面入口，子模式切换 |
types.ts |
类型定义 |
diffEngine.ts |
差异比较引擎 |
JsonDiffInput.tsx |
JSON 输入组件 |
DiffResult.tsx |
差异结果展示 |
DiffNavigator.tsx |
差异导航器 |
JsonFormatSection.tsx |
格式化区域 |
JsonConvertSection.tsx |
转换区域（YAML/TOML/Minify） |
JsonTree.tsx |
JSON 树形展示 |
Base64Converter/
Base64 编解码工具，支持文本/文件/图片三种模式。
| 文件 | 用途 |
|---|---|
index.tsx |
页面入口，子模式切换 |
useBase64Converter.ts |
业务逻辑 Hook |
TextMode.tsx |
文本模式 |
Base64ConverterSection.tsx |
文件/图片通用转换区域 |
MarkdownToHtml/
Markdown 转 HTML 工具，支持分栏/预览/源码三种视图模式。
HtmlToMarkdown/
HTML 转 Markdown 工具，支持分栏/预览/Markdown 三种视图模式。
RightClickRestorer/
右键菜单恢复工具，解除网站对右键的限制。
| 文件 | 用途 |
|---|---|
index.tsx |
页面 UI |
useRightClickRestorer.ts |
业务逻辑 Hook |
新增页面
- 在
types/storage.d.ts添加PageType联合类型成员 - 在
config/features.tsx的FEATURES数组添加配置 - 在
pages/创建页面目录（遵循上述结构） - 在
i18n/locales/{zh,en}/features.json添加翻译 - 如需新权限，更新
wxt.config.ts - 添加对应的单元测试