雨霖铃
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>
components/
通用业务组件目录，存放跨页面复用的 UI 组件，与具体工具页面解耦。
组件列表
| 组件 | 用途 |
|---|---|
TopBar.tsx |
顶部导航栏，集成搜索（含历史记录）、主题切换、语言切换、返回导航 |
RouterContainer.tsx |
路由容器，根据当前路由动态渲染对应页面组件，集成错误边界和骨架屏 |
SwitchButtonGroup.tsx |
通用切换按钮组，支持 small/medium/large 三种尺寸，用于页面子模式切换 |
TextInputArea.tsx |
增强文本输入区域，支持校验规则、工具栏操作、字符计数、清空 |
CopyButton.tsx |
一键复制按钮，支持复制成功状态动画，封装 copyTextToClipboard 和 toast 反馈 |
ImageUploader.tsx |
图片上传组件，支持拖拽上传、文件选择和预览 |
QrCodePreview.tsx |
二维码预览组件，展示生成的二维码图片，提供复制和下载操作 |
DecodeResultPaper.tsx |
Base64 解码结果展示面板，显示 MIME 类型、文件大小、文件名输入和下载按钮 |
GlobalSnackbar.tsx |
全局消息提示组件 + Context Provider，支持受控/Hook/全局单例三种使用方式 |
ErrorBoundary.tsx |
全局错误边界（类组件），捕获子组件树 JS 错误并展示友好错误页面 |
PageErrorBoundary.tsx |
页面级错误边界，适配 shadcn 暗黑模式，支持 resetKey 自动恢复 |
PageSkeleton.tsx |
页面骨架屏，提供 dashboard 和 tool 两种变体，用于 Suspense fallback |
使用约定
- 优先使用
components/ui/下的 shadcn/ui 基础组件 - 组件使用
cn()合并 Tailwind 类名，支持className透传 - 需要 memo 优化的组件使用
React.memo+displayName - 需要 ref 转发的组件使用
React.forwardRef+displayName