develop (#67)

feat: 升级项目 Logo、完善 toast 提示及优化工程化配置

### Features
- **logo**: 替换全套项目图标，更新 wxt.config.ts 浏览器扩展图标配置。

### Bug Fixes
- **ui/toast**: 引入 <Toaster> 组件修复 toast 无法显示问题，并调整位置为正下方。
- **i18n**: 统一将 t() 函数中的 `.` 和 `:` 转换为 `_`，修复国际化文案读取失败问题。
- **context-menu**: 限制 srcUrl 检查仅在二维码图片菜单项生效，避免误判。
- **hooks**: 修复 pre-push 钩子，仅对变更文件进行 eslint 检查，并支持无 upstream 时的回退对比。
- **components**: 修复 CopyButton 动画与组件导入方式，并补齐无障碍属性与测试。
- **async**: 延迟生成二维码以正确渲染 loading 状态，并适配相关异步测试。

### Refactor & Cleans
- **clean**: 清理未使用的组件（ToolCard）、Hook（useDebounce）及多个未使用的工具函数导出。
- **structure**: 统一移动测试文件至 __tests__ 目录，移除不必要的类型导出。

### Documentation
- **docs**: 在 AGENTS.md 中明确规范 Git Commit 必须使用中文描述。

.github/CODING_STANDARDS.md

@@ -79,12 +79,12 @@ export function isSupportedImageType(mimeType: string): boolean {
 
 | 场景        | 导出方式                                         | 示例                              |
 | ----------- | ------------------------------------------------ | --------------------------------- |
-| 页面组件    | `export default function ComponentName()`        | `pages/Timestamp/index.tsx`       |
+| 页面组件    | `export default function ComponentName()`        | `src/pages/Timestamp/index.tsx`   |
 | 业务组件    | `const X = React.memo(...)` + `export default X` | `LiveClock.tsx`, `ResultView.tsx` |
-| UI 原子组件 | `React.forwardRef(...)` + `export { X }`         | `components/ui/button.tsx`        |
-| 工具函数    | `export function xxx()`                          | `utils/clipboard.ts`              |
-| 自定义 Hook | `export function useXxx()`                       | `utils/useStorageState.ts`        |
-| 类型/接口   | `export interface` / `export type`               | `types/storage.d.ts`              |
+| UI 原子组件 | `React.forwardRef(...)` + `export { X }`         | `src/components/ui/button.tsx`    |
+| 工具函数    | `export function xxx()`                          | `src/utils/clipboard.ts`          |
+| 自定义 Hook | `export function useXxx()`                       | `src/utils/useStorageState.ts`    |
+| 类型/接口   | `export interface` / `export type`               | `src/types/storage.d.ts`          |
 
 ```typescript
 // ✅ 页面组件 — default export
@@ -473,7 +473,7 @@ import ErrorBoundary from '@/components/ErrorBoundary';
 | 类型        | 命名模式                   | 示例                                                     |
 | ----------- | -------------------------- | -------------------------------------------------------- |
 | 页面目录    | PascalCase                 | `Timestamp/`, `Base64Converter/`, `StorageCleaner/`      |
-| 页面入口    | `index.tsx`                | `pages/Timestamp/index.tsx`                              |
+| 页面入口    | `index.tsx`                | `src/pages/Timestamp/index.tsx`                          |
 | 组件文件    | PascalCase `.tsx`          | `TopBar.tsx`, `LiveClock.tsx`, `ResultView.tsx`          |
 | 自定义 Hook | camelCase `.ts`            | `useTimestampConverter.ts`, `useStorageCleaner.ts`       |
 | 工具函数    | camelCase `.ts`            | `chromeStorage.ts`, `base64Converter.ts`, `clipboard.ts` |
@@ -527,12 +527,12 @@ const handleClean = useCallback(async () => { ... }, []);
 测试文件放在源代码同级的 `__tests__/` 目录下：
 
 ```
-utils/__tests__/jwt.test.ts
-utils/__tests__/base64Converter.test.ts
-utils/__tests__/useStorageState.test.ts
-components/__tests__/SwitchButtonGroup.test.tsx
-components/__tests__/ErrorBoundary.test.tsx
-pages/Timestamp/__tests__/index.test.tsx
+src/utils/__tests__/jwt.test.ts
+src/utils/__tests__/base64Converter.test.ts
+src/utils/__tests__/useStorageState.test.ts
+src/components/__tests__/SwitchButtonGroup.test.tsx
+src/components/__tests__/ErrorBoundary.test.tsx
+src/pages/Timestamp/__tests__/index.test.tsx
 ```
 
 ### 7.2 describe / it 命名
@@ -653,16 +653,16 @@ export function useTimestampConverter(): UseTimestampConverterReturn { ... }
 
 ### 8.2 Hook 存放位置
 
-- **全局通用 Hook**：放在 `utils/` 目录下
+- **全局通用 Hook**：放在 `src/utils/` 目录下
 - **页面专属 Hook**：与页面组件同目录
 
 ```
-utils/useStorageState.ts          — Chrome Storage 状态持久化
-utils/useLazyTranslation.ts       — i18n 懒加载
-utils/useContextMenuData.ts       — 右键菜单数据
-utils/useDebounce.ts              — 防抖
-pages/Timestamp/useTimestampConverter.ts    — 页面级 Hook
-pages/StorageCleaner/useStorageCleaner.ts  — 页面级 Hook
+src/utils/useStorageState.ts          — Chrome Storage 状态持久化
+src/utils/useLazyTranslation.ts       — i18n 懒加载
+src/utils/useContextMenuData.ts       — 右键菜单数据
+src/utils/useDebounce.ts              — 防抖
+src/pages/Timestamp/useTimestampConverter.ts    — 页面级 Hook
+src/pages/StorageCleaner/useStorageCleaner.ts  — 页面级 Hook
 ```
 
 ---
@@ -762,36 +762,348 @@ const [themeMode, setThemeMode, isInitialized] = useStorageState(
 
 ---
 
-## 11. 文件组织
+## 11. 页面开发规范
 
-### 11.1 页面组件结构
+### 11.1 目录结构（按复杂度分级）
+
+#### 简单页面（单一功能，无子模式）
+
+适用于 Timestamp、Jwt、TextStatistics、RightClickRestorer 等：
 
 ```
-pages/FeatureName/
-├── index.tsx              # 页面 UI（纯展示，使用 shadcn/ui 组件）
-├── useFeatureName.ts      # 业务逻辑 Hook（状态管理 + 转换逻辑）
-├── constants.ts           # 常量定义（可选）
-├── LiveClock.tsx          # 子组件（可选）
-├── ResultView.tsx         # 子组件（可选）
-└── __tests__/             # 测试文件
-    └── index.test.tsx
+src/pages/FeatureName/
+├── index.tsx              # 页面入口组件（default export）
+├── useFeatureName.ts      # 业务逻辑 Hook（命名导出）
+├── constants.ts           # 常量定义（可选，命名导出）
+├── SubComponent.tsx       # 子组件（可选，default export）
+└── __tests__/
+    └── index.test.tsx     # 页面集成测试
 ```
 
-### 11.2 目录职责
+#### 中等页面（含多个子模式/标签页切换）
+
+适用于 Base64Converter、StorageCleaner 等：
+
+```
+src/pages/FeatureName/
+├── index.tsx              # 页面入口（模式路由 + 顶层布局）
+├── useFeatureName.ts      # 业务逻辑 Hook（命名导出）
+├── SubModeA.tsx           # 子模式组件
+├── SubModeB.tsx           # 子模式组件
+├── SubComponent.tsx       # 可复用子组件
+└── __tests__/
+    ├── index.test.tsx
+    └── SubModeA.test.tsx
+```
+
+#### 复杂页面（Context + 多组件协作）
+
+适用于 QrCode、JsonTools 等：
+
+```
+src/pages/FeatureName/
+├── index.tsx              # 页面入口（Provider + 布局）
+├── types.ts               # 页面专属类型定义
+├── constants.ts           # 常量（可选）
+├── contexts/              # React Context 定义
+│   └── FeatureContext.ts
+├── hooks/                 # 页面专属 Hooks
+│   └── useFeature.ts
+├── components/            # 页面专属子组件
+│   ├── PanelA.tsx
+│   └── PanelB.tsx
+└── __tests__/
+    ├── index.test.tsx
+    └── useFeature.test.ts
+```
+
+#### 特殊情况（单个文件即可）
+
+功能极简的页面（如 Dashboard），仅需 `index.tsx` 一个文件。当 `index.tsx` 超过 **150 行**时，应拆分为 UI + Hook 模式。
+
+---
+
+### 11.2 页面入口组件（`index.tsx`）规范
+
+#### 组件命名
+
+- 页面入口组件**统一使用 `Index` 作为函数名**，通过 `export default` 导出
+- 使用 `export default function Index()` 而非匿名默认导出
+- **禁止**混用 `XxxPage` 命名（当前 `RightClickRestorerPage`、`DashboardPage` 不合规范，应统一为 `Index`）
+
+```typescript
+// ✅ 正确
+export default function Index() { ... }
+
+// ❌ 错误 — 命名不一致
+export default function RightClickRestorerPage() { ... }
+export default function DashboardPage() { ... }
+```
+
+#### 组件职责
+
+`index.tsx` 只负责三件事：
+
+1. **获取翻译函数**（`useI18n`）
+2. **调用业务 Hook** 获取状态和操作方法
+3. **渲染 UI 布局**（纯展示，无业务逻辑）
+
+```typescript
+// ✅ 标准页面入口模板
+import { useI18n } from '@/utils/chromeI18n';
+import { useFeatureName } from './useFeatureName';
+
+export default function Index() {
+  const { t } = useI18n('featureName');
+  const { state, actions } = useFeatureName();
+
+  return (
+    <div className="p-4 w-full flex flex-col space-y-4 select-none">
+      {/* 纯 UI 渲染 */}
+    </div>
+  );
+}
+```
+
+#### 禁止在 `index.tsx` 中编写的内容
+
+- ❌ `useState` / `useMemo` / `useCallback`（应放在 Hook 中）
+- ❌ 数据转换/格式化逻辑
+- ❌ 异步请求/副作用
+- ❌ 超过 3 行的条件判断逻辑
+
+---
+
+### 11.3 业务 Hook 规范（`useFeatureName.ts`）
+
+#### 命名
+
+- 文件名：`useXxx.ts`（驼峰命名）
+- Hook 函数名：`useXxx()`
+- 返回值接口：`UseXxxReturn`
+
+```typescript
+// ✅ 标准 Hook 结构
+export interface UseTimestampConverterReturn {
+  mode: 'ts2dt' | 'dt2ts';
+  input: string;
+  result: string;
+  error: string;
+  setMode: (mode: 'ts2dt' | 'dt2ts') => void;
+  setInput: (value: string) => void;
+  handleUseNow: (now: number) => void;
+}
+
+export function useTimestampConverter(): UseTimestampConverterReturn {
+  // 所有业务逻辑在此
+}
+```
+
+#### Hook 内部结构（推荐顺序）
+
+```typescript
+export function useFeatureName(): UseFeatureNameReturn {
+  // 1. i18n
+  const { t } = useI18n('featureName');
+
+  // 2. 基础 state（useState）
+  const [mode, setMode] = useState<Mode>('default');
+  const [input, setInput] = useState('');
+
+  // 3. 持久化 state（useStorageState）
+  const [pageMode, setPageMode] = useStorageState('feature/pageMode', 'default', isValidMode);
+
+  // 4. 衍生数据（useMemo）— 响应式计算管线
+  const result = useMemo(() => {
+    // 自动计算，无需手动点击"转换"按钮
+  }, [input, mode]);
+
+  // 5. 事件处理（useCallback）
+  const handleAction = useCallback(() => { ... }, [deps]);
+
+  // 6. 副作用（useEffect）— 防抖、初始化、清理
+  useEffect(() => { ... }, [deps]);
+
+  // 7. 右键菜单数据（页面需要时）
+  useContextMenuData({ featureKey: 'featureName', onData: handleContextMenuData });
+
+  // 8. 返回
+  return { mode, input, result, setMode, setInput, handleAction };
+}
+```
+
+#### 防抖模式
+
+当输入框需要防抖时，在 Hook 中实现：
+
+```typescript
+// ✅ 防抖管道 — 在 useMemo 前定义
+const [input, setInput] = useState('');
+const [debouncedInput, setDebouncedInput] = useState('');
+
+useEffect(() => {
+  const handle = setTimeout(() => setDebouncedInput(input), 250);
+  return () => clearTimeout(handle);
+}, [input]);
+
+// 后续 useMemo 使用 debouncedInput 而非 input
+const result = useMemo(() => compute(debouncedInput), [debouncedInput]);
+```
+
+---
+
+### 11.4 常量文件规范（`constants.ts`）
+
+- 仅在常量超过 **3 个**或需要**导出类型**时创建
+- 使用 `as const` 确保字面量类型
+- 从 `as const` 数组派生联合类型
+
+```typescript
+// ✅ 标准常量文件
+export const DATE_FORMAT = 'YYYY/MM/DD HH:mm:ss';
+
+export const ZONES = ['Asia/Shanghai', 'America/New_York', 'Europe/London'] as const;
+
+export type UnitType = 'ms' | 's';
+export type ZoneType = (typeof ZONES)[number];
+```
+
+---
+
+### 11.5 子组件规范
+
+#### 何时拆分子组件
+
+- `index.tsx` 超过 **150 行**
+- 存在可复用的 UI 片段（如卡片、面板、结果展示区）
+- 需要 `React.memo` 优化的高频渲染区域
+
+#### 子组件 Props 模式
+
+```typescript
+// ✅ 继承 HTML 属性 + 业务 Props
+interface ResultViewProps extends React.HTMLAttributes<HTMLDivElement> {
+  result: string;
+  mode: 'ts2dt' | 'dt2ts';
+  showEmptyPlaceholder?: boolean;
+}
+
+// ✅ 使用 React.memo + displayName
+const ResultView = React.memo(
+  ({ result, mode, showEmptyPlaceholder = false, className, ...props }: ResultViewProps) => {
+    const { t } = useI18n('featureName');
+    // ...
+  },
+);
+ResultView.displayName = 'ResultView';
+export default ResultView;
+```
+
+#### 子组件内可以使用 Hook
+
+子组件可以独立调用 `useI18n`、`useSnackbar` 等全局 Hook，**不需要**通过 props 从父组件传递翻译函数或 toast 方法。
+
+---
+
+### 11.6 存储键命名规范
+
+页面使用的 Storage 键必须遵循 kebab-case 格式：`{功能名}/{用途}`。
+
+```typescript
+// ✅ 正确
+'base64Converter/pageMode';
+'base64Converter/fileMode/direction';
+'jsonTools/pageMode';
+'qrCode/urlExpanded';
+
+// ❌ 错误
+'base64ConverterPageMode';
+'json_tools_page_mode';
+```
+
+在 `types/storage.d.ts` 的 `StorageSchema` 中声明所有键。
+
+---
+
+### 11.7 模式切换通用模式
+
+当页面有多个子模式（标签页切换），统一使用以下模式：
+
+```typescript
+// ✅ 标准模式切换
+const VALID_MODES = ['modeA', 'modeB'] as const;
+type PageMode = (typeof VALID_MODES)[number];
+
+const isValidMode = (val: unknown): val is PageMode =>
+  typeof val === 'string' && (VALID_MODES as readonly string[]).includes(val);
+
+export default function Index() {
+  const { t } = useI18n('featureName');
+  const [pageMode, setPageMode] = useStorageState('feature/pageMode', 'modeA', isValidMode);
+
+  return (
+    <div className="p-4 w-full flex flex-col space-y-4 select-none">
+      <SwitchButtonGroup
+        value={pageMode}
+        options={[
+          { value: 'modeA', label: t('feature:modeA') },
+          { value: 'modeB', label: t('feature:modeB') },
+        ]}
+        onChange={(v: PageMode) => setPageMode(v)}
+        size="small"
+      />
+      {pageMode === 'modeA' ? <PanelA /> : <PanelB />}
+    </div>
+  );
+}
+```
+
+---
+
+### 11.8 页面布局约定
+
+- 所有页面根元素使用统一的外层容器：
+  ```
+  <div className="p-4 w-full flex flex-col space-y-4 select-none">
+  ```
+- 不需要 `<div className="min-h-screen bg-background ...">` — 该样式已由 `AppRoot` 提供
+- 不需要 `min-h-[500px]` 或固定高度（除非确有必要）
+- 卡片容器：`rounded-xl border border-border bg-card text-card-foreground shadow-sm`
+- 使用 `space-y-4` 管理纵向间距，不要手动 `mb-4`
+
+---
+
+### 11.9 页面开发检查清单
+
+新增功能页面时，逐项确认：
+
+1. ✅ 在 `types/storage.d.ts` 添加 `PageType` 联合类型
+2. ✅ 在 `config/features.tsx` 注册 `FEATURES` 配置（key、labelKey、icon、三种渲染模式组件）
+3. ✅ 创建页面目录，使用 `Index` 作为组件名
+4. ✅ 业务逻辑提取到 `useXxx.ts` Hook（index.tsx 不超过 150 行）
+5. ✅ 需要持久化的 UI 状态使用 `useStorageState`
+6. ✅ 常量 ≥3 个时提取到 `constants.ts`
+7. ✅ 在 `i18n/locales/{zh,en}/` 添加翻译
+8. ✅ 创建 `__tests__/index.test.tsx` 测试文件
+9. ✅ 如需新权限，更新 `wxt.config.ts` 的 `manifest.permissions`
+10. ✅ 运行 `npm run lint && npm run typecheck && npm run test` 全部通过
+
+---
+
+### 11.10 目录职责总览
 
 | 目录                 | 职责                                                         |
-| ---------------- | ------------------------------------------------------------ |
-| `config/`        | 应用配置（功能定义、路由映射）                               |
-| `entrypoints/`   | 扩展入口点（popup、options、sidepanel、background、content） |
-| `pages/`         | 功能页面组件（懒加载）                                       |
-| `components/`    | 可复用 UI 组件                                               |
-| `components/ui/` | shadcn/ui 基础组件（button、dialog、select 等）              |
-| `providers/`     | React Context（Router、Theme 等）                            |
-| `hooks/`         | 自定义 React Hooks                                           |
-| `utils/`         | 工具函数与服务抽象                                           |
-| `types/`         | TypeScript 类型声明                                          |
-| `lib/`           | 通用工具函数（cn、utils）                                    |
-| `i18n/`          | 国际化资源                                                   |
+| -------------------- | ------------------------------------------------------------ |
+| `src/config/`        | 应用配置（功能定义、路由映射）                               |
+| `src/entrypoints/`   | 扩展入口点（popup、options、sidepanel、background、content） |
+| `src/pages/`         | 功能页面组件（懒加载）                                       |
+| `src/components/`    | 可复用 UI 组件                                               |
+| `src/components/ui/` | shadcn/ui 基础组件（button、dialog、select 等）              |
+| `src/providers/`     | React Context（Router、Theme 等）                            |
+| `src/hooks/`         | 自定义 React Hooks                                           |
+| `src/utils/`         | 工具函数与服务抽象                                           |
+| `src/types/`         | TypeScript 类型声明                                          |
+| `src/lib/`           | 通用工具函数（cn、utils）                                    |
 | `public/`            | 静态资源                                                     |
 
 ---

.github/copilot-instructions.md

@@ -56,7 +56,7 @@ Router 同时使用 `chrome.storage.local` 持久化和 `localStorage` 快照来
 
 ### 页面组件模式
 
-功能页面遵循 **UI + Hook 分离** 模式：
+功能页面遵循 **UI + Hook 分离** 模式，详见 [CODING_STANDARDS.md § 11](./CODING_STANDARDS.md#11-页面开发规范)：
 
 ```
 pages/FeatureName/
@@ -65,7 +65,7 @@ pages/FeatureName/
 └── constants.ts           # 常量定义（可选）
 ```
 
-- 页面组件调用 `useLazyTranslation('featureName')` 获取翻译函数
+- 页面组件调用 `useI18n('featureName')` 获取翻译函数
 - Hook 负责所有状态管理，通过返回值暴露给页面
 - 子组件可进一步拆分（如 `LiveClock.tsx`、`ResultView.tsx`）
 
@@ -102,7 +102,7 @@ pages/FeatureName/
 
 ### 代码分割
 
-`wxt.config.ts` 通过 `manualChunksForHtmlOnly()` 自动分组 vendor 依赖（vendor-react、vendor-i18n、vendor-qr、vendor-dnd、vendor-markdown），无需手动配置。
+`wxt.config.ts` 通过 `manualChunksForHtmlOnly()` 自动分组 vendor 依赖（vendor-react、vendor-i18n、vendor-qr、vendor-dnd），无需手动配置。
 
 ### 代码风格
 

.github/workflows/ci.yml

@@ -13,8 +13,6 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
-  # 💡 1. 提速核心：前置基建节点（Infrastructure Initialization）
-  # 专门负责锁死环境、同步下载并缓存 node_modules，下游节点直接满血复用！
   setup:
     name: Prepare Dependencies
     runs-on: ubuntu-latest
@@ -29,7 +27,6 @@ jobs:
         with:
           node-version: '22'
 
-      # 建立基于 package-lock.json 唯一哈希的缓存大闸
       - name: Cache Node Modules
         id: cache-nodemodules
         uses: actions/cache@v4
@@ -47,7 +44,6 @@ jobs:
         id: cache-info
         run: echo "key=${{ runner.os }}-node-v22-${{ hashFiles('**/package-lock.json') }}" >> $GITHUB_OUTPUT
 
-  # 💡 2. 静态语法质检节点（依赖前置节点完成）
   lint:
     name: Lint
     runs-on: ubuntu-latest
@@ -70,7 +66,6 @@ jobs:
       - name: Run ESLint
         run: npm run lint
 
-  # 💡 3. 强类型守卫节点（2秒瞬时恢复，开箱即查）
   typecheck:
     name: TypeScript Check
     runs-on: ubuntu-latest
@@ -96,7 +91,6 @@ jobs:
       - name: Run TypeScript type check
         run: npm run typecheck
 
-  # 💡 4. 单元测试节点（无缝运行你刚刚修复完的 setupTests.ts 套件）
   test:
     name: Unit Tests
     runs-on: ubuntu-latest
@@ -122,16 +116,12 @@ jobs:
       - name: Run tests
         run: npm run test
 
-  # 💡 5. 多端分布式最终编译节点（Production Matrix Compliance）
   build:
     name: Build (${{ matrix.browser }})
     runs-on: ubuntu-latest
-    # 只有当 Linter、类型大闸、Vitest 单元测试全数满分通过，才放行最终打包编译
     needs: [ lint, typecheck, test ]
     strategy:
       matrix:
-        # 💡 完美对齐 WXT 跨端架构：将 firefox 同步纳入生产编译大矩阵，
-        # 如果 firefox 编译因任何多端不兼容挂掉，CI 会立刻拉起警报，防护力拉满！
         browser: [ chrome, firefox ]
       fail-fast: false
     steps:
@@ -149,7 +139,6 @@ jobs:
           path: node_modules
           key: ${{ runner.os }}-node-v22-${{ hashFiles('**/package-lock.json') }}
 
-      # 💡 动态代理编译指令：完美匹配 WXT / 各类多端打包器的标准构建命令
       - name: Generate WXT types
         run: npx wxt prepare
 

.gitignore

@@ -31,3 +31,4 @@ stats-*.json
 dev/*
 
 docs/*
+!docs/VISUAL_STYLE_GUIDE.md

.husky/pre-commit

@@ -1 +1,5 @@
+# 后台运行类型检查，结果输出到 stderr 但不阻塞提交
+npx tsc --noEmit &
+
+# 前台运行 lint-staged（自动修复 + 格式化）
 npx lint-staged

.husky/pre-push

@@ -0,0 +1,13 @@
+# pre-push: 严格检查，阻塞有问题的代码推送到远程
+# 类型检查（全项目，因为类型错误可能跨文件传播）
+npx tsc --noEmit
+
+# ESLint 严格检查（仅检查本次推送的变更文件，不阻塞不相关的旧代码）
+# 新分支无 upstream 时，回退到与 origin/main 对比
+MERGE_BASE=$(git merge-base HEAD @{upstream} 2>/dev/null || git merge-base HEAD origin/main 2>/dev/null)
+if [ -n "$MERGE_BASE" ]; then
+  CHANGED_FILES=$(git diff --name-only --diff-filter=d "$MERGE_BASE" HEAD -- '*.ts' '*.tsx' '*.js' '*.jsx' '*.mjs')
+  if [ -n "$CHANGED_FILES" ]; then
+    echo "$CHANGED_FILES" | xargs npx eslint --max-warnings=0
+  fi
+fi

AGENTS.md

@@ -43,8 +43,9 @@ Pre-commit hook（`.husky/pre-commit` 调用 `lint-staged`，任一步骤返回
 ## 项目结构
 
 ```
+src/                   # 源代码根目录
   config/features.tsx    # 功能定义（路由 + 元数据的单一事实来源）
-entrypoints/           # 扩展入口点 (popup/, options/, sidepanel/, background.ts, content.ts)
+  entrypoints/           # 扩展入口点 (popup/, sidepanel/, background.ts, content.ts)
   pages/                 # 功能页面组件 (懒加载)
   components/            # 可复用 UI 组件
   components/ui/         # shadcn/ui 基础组件 (button, dialog, select 等)
@@ -52,41 +53,46 @@ providers/             # React Context (Router, Theme 等)
   hooks/                 # 自定义 React Hooks
   utils/                 # 工具函数与服务抽象
   types/                 # TypeScript 类型声明
-i18n/locales/{zh,en}/  # 国际化资源 (common.json, features.json 及各功能独立 JSON)
+  lib/                   # 通用工具函数（cn、utils）
+public/                # 静态资源（图标、_locales 等）
 ```
 
 ### 页面组件模式
 
-典型功能页面遵循 **UI + Hook 分离** 模式：
+典型功能页面遵循 **UI + Hook 分离** 模式。详见 [CODING_STANDARDS.md § 11](./.github/CODING_STANDARDS.md#11-页面开发规范)。
 
 ```
-pages/FeatureName/
-├── index.tsx              # 页面 UI（纯展示，使用 shadcn/ui 组件）
+src/pages/FeatureName/
+├── index.tsx              # 页面 UI（纯展示，仅负责渲染布局）
 ├── useFeatureName.ts      # 业务逻辑 Hook（状态管理 + 转换逻辑）
-└── constants.ts           # 常量定义
+├── constants.ts           # 常量定义（可选，≥3 个常量时创建）
+└── __tests__/
+    └── index.test.tsx
 ```
 
-- 页面组件调用 `useLazyTranslation('featureName')` 获取翻译函数
+- 页面入口组件统一命名为 `Index`，通过 `export default function Index()` 导出
 - Hook 负责所有状态管理和业务逻辑，通过返回值暴露给页面
-- 子组件可进一步拆分（如 `LiveClock.tsx`、`ResultView.tsx`）
+- 子组件可以独立调用 `useI18n` 等全局 Hook
+- 当 `index.tsx` 超过 150 行时，必须拆分为 UI + Hook 模式
+- 复杂页面可增加 `contexts/`、`hooks/`、`components/` 子目录
 
 ## 关键架构决策
 
-**路由**: 不使用 React Router。通过 `config/features.tsx` 的 `FEATURES` 数组管理，`RouterProvider` 根据 `PageType`
+**路由**: 不使用 React Router。通过 `src/config/features.tsx` 的 `FEATURES` 数组管理，`RouterProvider` 根据 `PageType`
 渲染对应组件。支持三种渲染模式：popup（弹窗）、sidepanel（侧边栏）和 browser-tab（浏览器新标签页，通过 `open_in_tab` 打开）。
 每种模式有独立的路由和可见页面配置（`app/popupRoute`、`app/sidepanelRoute`、`app/tabRoute` 等）。
 
-**存储**: 所有 Chrome Storage 键必须在 `types/storage.d.ts` 的 `StorageSchema` 中定义，键名使用 kebab-case 格式（如 `app/currentRoute`）。
-使用 `utils/chromeStorage.ts` 及其 Hook。Router 同时使用 `chrome.storage.local` 和 `localStorage` 做快照以消除首屏闪烁。
-修改 StorageSchema 时，必须在 `utils/chromeStorage.ts` 添加版本迁移函数，并在测试中覆盖迁移场景。
+**存储**: 所有 Chrome Storage 键必须在 `src/types/storage.d.ts` 的 `StorageSchema` 中定义，键名使用 kebab-case 格式（如 `app/currentRoute`）。
+使用 `src/utils/chromeStorage.ts` 及其 Hook。Router 同时使用 `chrome.storage.local` 和 `localStorage` 做快照以消除首屏闪烁。
+修改 StorageSchema 时，必须在 `src/utils/chromeStorage.ts` 添加版本迁移函数，并在测试中覆盖迁移场景。
 
-**通信**: 使用 `@webext-core/messaging`，协议定义在 `utils/messages.ts`。
+**通信**: 使用 `@webext-core/messaging`，协议定义在 `src/utils/messages.ts`。
 
 **路径别名**: `@/` 映射到项目根目录 (已在 tsconfig 和 vitest.config 中配置)。
 
 **浏览器兼容**: 优先使用 `wxt/browser` 导出的 `browser` 对象，而非原生 `chrome` API。
 
-**代码分割**: `wxt.config.ts` 通过 `manualChunksForHtmlOnly()` 自动分组依赖（vendor-react、vendor-i18n、vendor-qr 等），无需手动配置。
+**代码分割**: `wxt.config.ts` 通过 `manualChunksForHtmlOnly()` 自动分组依赖（vendor-react、vendor-qr、vendor-dnd 等），无需手动配置。
 
 ## 测试环境
 
@@ -94,35 +100,37 @@ pages/FeatureName/
 - 全局变量: `vitest/globals` (describe, it, expect 等无需导入)
 - Setup 文件: `vitest.setup.ts` 自动 mock:
   - `chrome.*` / `browser.*` API (storage, tabs, runtime, cookies 等)
-  - `react-i18next` (返回 key 作为翻译)
-  - `@/utils/useLazyTranslation` (返回 `ns:key` 格式翻译)
+  - `@/utils/chromeI18n` (从 `public/_locales/zh/messages.json` 加载真实翻译)
   - `window.matchMedia`
 - 测试文件命名: `__tests__/*.test.{ts,tsx}` 或 `*.test.{ts,tsx}`
 - Mock 模式: 使用 `vi.mock()` 进行模块级 mock，避免在测试文件中重复 mock 代码
 - 测试工具: `@testing-library/react` + `@testing-library/user-event` 进行组件测试
 
-## i18n
+## i18n (chrome.i18n)
 
-- 命名空间: `common` (默认), `features`
-- 翻译键格式: `namespace:key` (如 `features:timestamp.title`)
-- 语言: `zh` (默认), `en`
-- 翻译文件结构:
-  - `i18n/locales/{zh,en}/common.json` - 全局通用翻译
-  - `i18n/locales/{zh,en}/features.json` - 功能模块标题和描述
-  - `i18n/locales/{zh,en}/{功能名}.json` - 各功能独立翻译（如 timestamp.json, storageCleaner.json 等）
-- 添加新翻译: 编辑 `i18n/locales/{zh,en}/{common,features}.json` 及对应功能独立 JSON
-- 使用 `useLazyTranslation` hook 加载功能独立翻译，返回 `ns:key` 格式
-- 回退策略: 当翻译 key 在目标语言缺失时，回退到默认语言 `zh`；若默认语言也缺失，返回占位格式 `namespace:key` 并在开发模式下记录 warning
+项目使用 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. 在 `types/storage.d.ts` 添加 `PageType` 联合类型
-2. 在 `config/features.tsx` 的 `FEATURES` 数组添加配置（指定 key、翻译键、图标、三种渲染模式的组件）
-3. 在 `pages/` 创建页面组件 (懒加载)：
-   - `index.tsx` — UI 组件，使用 `useLazyTranslation` 获取翻译
+1. 在 `src/types/storage.d.ts` 添加 `PageType` 联合类型
+2. 在 `src/config/features.tsx` 的 `FEATURES` 数组添加配置（指定 key、翻译键、图标、三种渲染模式的组件）
+3. 在 `src/pages/` 创建页面组件 (懒加载)：
+   - `index.tsx` — UI 组件，使用 `useI18n` 获取翻译
    - `useFeatureName.ts` — 业务逻辑 Hook
    - `constants.ts` — 常量（可选）
-4. 在 `i18n/locales/{zh,en}/features.json` 添加翻译（复杂功能可新建独立 JSON）
+4. 在 `public/_locales/zh/messages.json`（及 `en/messages.json`）添加翻译
 5. 如需新权限，更新 `wxt.config.ts` 的 `manifest.permissions`
 6. 添加对应的单元测试
 
@@ -131,16 +139,16 @@ pages/FeatureName/
 - 禁止使用 `any` (测试文件除外)
 - 未使用变量/参数: 使用 `_` 前缀 (如 `_unused`)
 - 样式: 使用 Tailwind CSS + shadcn/ui (通过 `className` 和 `cn()` 工具)
-- UI 组件: 优先使用 `components/ui/` 下的 shadcn/ui 组件 (button, dialog, select 等)
+- UI 组件: 优先使用 `src/components/ui/` 下的 shadcn/ui 组件 (button, dialog, select 等)
 - 图标: 使用 `lucide-react` 图标库
 - 格式: Prettier (`.prettierrc`: 100 字符宽, 单引号, 尾逗号 all, LF 换行)
 - ESLint 使用 `typescript-eslint` 的 `projectService: true`（无需手动维护 project 路径）
+- **Git Commit**: 必须使用中文描述，遵循 Conventional Commits 规范（如 `fix(组件名): 描述`、`feat(功能名): 描述`）
 
 ## 关键外部库（非显而易见的）
 
 - `@webext-core/messaging` — 扩展消息通信
 - `@dnd-kit` — 拖拽排序（用于页面顺序管理）
-- `marked` — Markdown 解析
 - `qrious` + `qr-scanner` — 二维码生成与解析
 - `dayjs` — 日期处理（时间戳转换）
 - `sonner` — Toast 通知（替代传统 snackbar）

CLAUDE.md

@@ -0,0 +1 @@
+@AGENT.md

README.md

@@ -63,11 +63,6 @@
 - **文件转换**: 支持文件与 Base64 字符串互转.
 - **图像预览**: 支持图片 Base64 编码与实时预览.
 
-### 📝 Markdown ↔ HTML 转换
-
-- **Markdown 转 HTML**: 实时预览 Markdown 渲染结果，支持导出 HTML 源码.
-- **HTML 转 Markdown**: 将 HTML 内容转换为 Markdown 格式.
-
 ## 技术栈
 
 - **框架**: [WXT (Web Extension Toolkit)](https://wxt.dev/)
@@ -84,22 +79,21 @@
 ## 项目结构
 
 ```text
-├── components/           # 可复用 React 组件
-├── config/              # 应用配置
-│   └── features.tsx     # 功能定义与路由映射
-├── entrypoints/         # 扩展程序入口点
-│   ├── popup/           # 点击图标弹出的主界面
-│   ├── options/         # 扩展程序设置页面
-│   ├── sidepanel/       # 浏览器侧边栏集成
-│   ├── background.ts    # 后台 Service Worker
-│   └── content.ts       # 网页注入脚本
-├── pages/               # 各功能模块的页面组件
-├── providers/           # 全局状态提供者 (Router, Theme 等)
-├── hooks/               # 自定义 React Hooks
-├── utils/               # 工具函数与服务抽象
-├── types/               # TypeScript 类型声明
-├── lib/                 # 通用工具函数 (cn, utils 等)
-├── i18n/                # 国际化资源
+├── src/                   # 源代码根目录
+│   ├── components/        # 可复用 React 组件
+│   ├── config/            # 应用配置
+│   │   └── features.tsx   # 功能定义与路由映射
+│   ├── entrypoints/       # 扩展程序入口点
+│   │   ├── popup/         # 点击图标弹出的主界面
+│   │   ├── sidepanel/     # 浏览器侧边栏集成
+│   │   ├── background.ts  # 后台 Service Worker
+│   │   └── content.ts     # 网页注入脚本
+│   ├── pages/             # 各功能模块的页面组件
+│   ├── providers/         # 全局状态提供者 (Router, Theme 等)
+│   ├── hooks/             # 自定义 React Hooks
+│   ├── utils/             # 工具函数与服务抽象
+│   ├── types/             # TypeScript 类型声明
+│   └── lib/               # 通用工具函数 (cn, utils 等)
 ├── public/                # 静态资源 (图标、manifest 资源等)
 ├── wxt.config.ts          # WXT 框架核心配置
 └── package.json           # 项目元数据与依赖管理

components/GlobalSnackbar.tsx

@@ -1,372 +0,0 @@
-/**
- * GlobalSnackbar - 全局 Snackbar 消息提示组件及 Provider
- *
- * 提供可复用的 Toast 消息提示功能，支持三种使用方式：
- * 1. 作为受控组件使用：通过 props 控制显示状态
- * 2. 通过 useSnackbarState Hook 使用：在组件内部自动管理状态
- * 3. 通过 SnackbarProvider 和 useSnackbar Hook 使用：全局单例模式
- *
- * NOTE: 项目同时使用 sonner 的 toast 进行简单的一次性提示。
- * 本组件适用于需要 severity 级别、Provider 上下文、自定义定位等高级场景。
- * 简单场景（如复制成功、操作提示）优先使用 `import { toast } from 'sonner'`。
- *
- * @module GlobalSnackbar
- * @version 1.1.0
- *
- * @example
- * ```tsx
- * // 方式一：受控组件
- * <GlobalSnackbar
- *   message="操作成功"
- *   open={isOpen}
- *   onClose={() => setIsOpen(false)}
- *   severity="success"
- * />
- *
- * // 方式二：Hook 方式 (局部状态)
- * const { snackbarProps, showMessage } = useSnackbarState();
- * showMessage('Hello!', { severity: 'info' });
- *
- * // 方式三：Context 方式 (全局状态)
- * // 在根组件包裹 Provider
- * <SnackbarProvider>
- *   <App />
- * </SnackbarProvider>
- *
- * // 在子组件中使用
- * const { showMessage } = useSnackbar();
- * showMessage('Global Message');
- * ```
- */
-
-import {
-  JSX,
-  useState,
-  useRef,
-  createContext,
-  useContext,
-  useEffect,
-  type ReactNode,
-  type SyntheticEvent,
-} from 'react';
-import { CheckCircle, Info, AlertTriangle, XCircle } from 'lucide-react';
-
-/**
- * Snackbar 消息严重程度类型
- * @description 决定 Alert 组件的颜色和图标
- * - success: 绿色，成功提示
- * - info: 蓝色，信息提示
- * - warning: 橙色，警告提示
- * - error: 红色，错误提示
- */
-export type SnackbarSeverity = 'success' | 'info' | 'warning' | 'error';
-
-/**
- * GlobalSnackbar 组件的属性接口
- * @interface GlobalSnackbarProps
- */
-export interface GlobalSnackbarProps {
-  /** 消息内容，要显示的提示文本 */
-  message: string;
-  /** 是否显示 Snackbar */
-  open: boolean;
-  /** 关闭回调函数 */
-  onClose: () => void;
-  /** 消息级别，影响颜色和图标样式，默认 'info' */
-  severity?: SnackbarSeverity;
-  /** 自动隐藏时间（毫秒），设为 0 则不自动关闭，默认 2000 */
-  autoHideDuration?: number;
-  /** Snackbar 弹出位置，默认 { vertical: 'bottom', horizontal: 'center' } */
-  anchorOrigin?: {
-    vertical: 'top' | 'bottom';
-    horizontal: 'left' | 'center' | 'right';
-  };
-  /** 是否使用 Alert 组件包裹，false 则使用原生 Snackbar message，默认 true */
-  showAlert?: boolean;
-  /** 是否隐藏 Alert 图标，默认 false */
-  hideIcon?: boolean;
-  /** 自定义样式，透传给外层 Snackbar 组件 */
-  sx?: React.CSSProperties;
-  /** 自定义样式，透传给内层 Alert 组件（仅 showAlert=true 时生效） */
-  alertSx?: React.CSSProperties;
-}
-
-/**
- * showMessage 方法的选项配置
- * @interface SnackbarOptions
- */
-export interface SnackbarOptions {
-  /** 消息级别：success | info | warning | error */
-  severity?: SnackbarSeverity;
-  /** 自动隐藏时间（毫秒），设为 0 则不自动关闭 */
-  autoHideDuration?: number;
-  /** 是否隐藏 Alert 图标 */
-  hideIcon?: boolean;
-  /** 是否使用 Alert 组件包裹 */
-  showAlert?: boolean;
-}
-
-/**
- * useSnackbarState Hook 的返回值类型
- * @interface UseSnackbarStateResult
- */
-export interface UseSnackbarStateResult {
-  /** 传递给 GlobalSnackbar 组件的属性对象 */
-  snackbarProps: GlobalSnackbarProps;
-  /** 显示消息的方法 */
-  showMessage: (message: string, options?: SnackbarOptions) => void;
-  /** 关闭消息的方法 */
-  closeMessage: () => void;
-}
-
-/**
- * GlobalSnackbar 组件的默认属性配置
- * @description 提供类型安全的默认值选择
- */
-const defaultProps: Required<
-  Pick<
-    GlobalSnackbarProps,
-    'severity' | 'autoHideDuration' | 'anchorOrigin' | 'showAlert' | 'hideIcon'
-  >
-> = {
-  severity: 'info',
-  autoHideDuration: 2000,
-  anchorOrigin: { vertical: 'bottom', horizontal: 'center' },
-  showAlert: true,
-  hideIcon: false,
-};
-
-const severityConfig: Record<
-  SnackbarSeverity,
-  { icon: React.ElementType; bgClass: string; textClass: string }
-> = {
-  success: { icon: CheckCircle, bgClass: 'bg-green-500', textClass: 'text-white' },
-  info: { icon: Info, bgClass: 'bg-primary/100', textClass: 'text-white' },
-  warning: { icon: AlertTriangle, bgClass: 'bg-amber-500', textClass: 'text-white' },
-  error: { icon: XCircle, bgClass: 'bg-red-500', textClass: 'text-white' },
-};
-
-/**
- * GlobalSnackbar 组件
- *
- * 全局消息提示的展示组件，支持受控和非受控两种使用模式。
- *
- * @param {GlobalSnackbarProps} props - 组件属性
- * @returns {JSX.Element}
- */
-export function GlobalSnackbar({
-  message,
-  open,
-  onClose,
-  severity = defaultProps.severity,
-  autoHideDuration = defaultProps.autoHideDuration,
-  showAlert = defaultProps.showAlert,
-  hideIcon = defaultProps.hideIcon,
-}: GlobalSnackbarProps): JSX.Element | null {
-  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  useEffect(() => {
-    if (open && autoHideDuration > 0) {
-      timerRef.current = setTimeout(() => {
-        onClose();
-      }, autoHideDuration);
-      return () => {
-        if (timerRef.current) clearTimeout(timerRef.current);
-      };
-    }
-    return undefined;
-  }, [open, autoHideDuration, onClose]);
-
-  if (!open) return null;
-
-  const config = severityConfig[severity];
-  const IconComponent = config.icon;
-
-  return (
-    <div className="fixed z-[999999] bottom-6 left-1/2 -translate-x-1/2 animate-in fade-in slide-in-from-bottom-2 duration-300">
-      {showAlert ? (
-        <div
-          className={`flex items-center gap-2 px-5 py-1.5 rounded-full shadow-lg ${config.bgClass} ${config.textClass}`}
-          style={{ minWidth: '140px' }}
-        >
-          {!hideIcon && <IconComponent className="h-4 w-4 flex-shrink-0" />}
-          <span className="text-xs font-bold">{message}</span>
-        </div>
-      ) : (
-        <div className="px-4 py-2 rounded-lg bg-gray-800 text-white text-sm">{message}</div>
-      )}
-    </div>
-  );
-}
-
-/**
- * useSnackbarState - 消息提示的 Hook 方式
- *
- * 提供状态管理的 Snackbar 功能，自动处理 open、message 等状态。
- * 适合在组件内部使用，无需额外的状态管理代码。
- *
- * @param {SnackbarOptions} [initialOptions] - 初始配置选项
- * @returns {UseSnackbarStateResult} 包含 snackbarProps 和操作方法的对象
- *
- * @description
- * - 自动管理 Snackbar 的显示/隐藏状态
- * - 支持链式调用 showMessage
- * - 合并初始选项和调用时选项
- *
- * @example
- * ```tsx
- * function MyComponent() {
- *   const { snackbarProps, showMessage, closeMessage } = useSnackbarState({
- *     severity: 'info',
- *     autoHideDuration: 3000,
- *   });
- *
- *   const handleSave = () => {
- *     // 业务逻辑...
- *     showMessage('保存成功！', { severity: 'success' });
- *   };
- *
- *   return (
- *     <>
- *       <button onClick={handleSave}>保存</button>
- *       <GlobalSnackbar {...snackbarProps} />
- *     </>
- *   );
- * }
- * ```
- */
-export function useSnackbarState(initialOptions?: SnackbarOptions): UseSnackbarStateResult {
-  // Snackbar 显示状态
-  const [open, setOpen] = useState(false);
-  // 当前显示的消息内容
-  const [message, setMessage] = useState('');
-  // 消息配置选项
-  const [options, setOptions] = useState<SnackbarOptions>(initialOptions || {});
-
-  /**
-   * 显示消息
-   *
-   * @param {string} newMessage - 要显示的消息文本
-   * @param {SnackbarOptions} [newOptions={}] - 新的配置选项
-   *
-   * @description
-   * - 合并初始选项和新的调用选项
-   * - 新选项会覆盖初始选项
-   */
-  const showMessage = (newMessage: string, newOptions: SnackbarOptions = {}) => {
-    setMessage(newMessage);
-    setOptions({ ...initialOptions, ...newOptions });
-    setOpen(true);
-  };
-
-  /**
-   * 关闭消息
-   *
-   * @description
-   * - 直接将 open 状态设置为 false
-   */
-  const closeMessage = () => {
-    setOpen(false);
-  };
-
-  const handleClose = (_event?: SyntheticEvent | Event, reason?: string) => {
-    if (reason === 'clickaway') return;
-    closeMessage();
-  };
-
-  /**
-   * 传递给 GlobalSnackbar 组件的属性
-   *
-   * @description
-   * - 组合当前状态和选项为完整的组件 props
-   * - onClose 使用 handleClose 包装后的版本
-   */
-  const snackbarProps: GlobalSnackbarProps = {
-    message,
-    open,
-    onClose: handleClose,
-    severity: options.severity,
-    autoHideDuration: options.autoHideDuration,
-    hideIcon: options.hideIcon,
-  };
-
-  return {
-    snackbarProps,
-    showMessage,
-    closeMessage,
-  };
-}
-
-// --- Context & Provider ---
-
-/**
- * Snackbar Context 的值类型定义
- */
-interface SnackbarContextValue {
-  showMessage: (message: string, options?: SnackbarOptions) => void;
-  closeMessage: () => void;
-}
-
-const SnackbarContext = createContext<SnackbarContextValue | null>(null);
-
-/**
- * SnackbarProvider 组件的 props 类型
- */
-interface SnackbarProviderProps {
-  children: ReactNode;
-  initialOptions?: SnackbarOptions;
-}
-
-/**
- * SnackbarProvider 组件
- *
- * 全局消息提示的 Provider 组件，需要包裹在应用根组件外层。
- */
-export function SnackbarProvider({ children, initialOptions }: SnackbarProviderProps): JSX.Element {
-  const { snackbarProps, showMessage, closeMessage } = useSnackbarState(initialOptions);
-
-  return (
-    <SnackbarContext.Provider value={{ showMessage, closeMessage }}>
-      {children}
-      <GlobalSnackbar {...snackbarProps} />
-    </SnackbarContext.Provider>
-  );
-}
-
-/**
- * useSnackbar - 在子组件中获取 Snackbar 上下文的 Hook
- *
- * @param {SnackbarOptions} [options] - 钩子级别的默认配置（如 autoHideDuration）
- * @returns {SnackbarContextValue} - 包含 showMessage 和 closeMessage 的对象
- * @throws {Error} - 如果不在 SnackbarProvider 内部调用，抛出错误
- *
- * @description
- * 选项合并策略：
- * 1. 调用 showMessage 时传入的 callOptions 优先级最高
- * 2. useSnackbar(options) 传入的 Hook 级别配置次之
- * 3. SnackbarProvider(initialOptions) 传入的全局配置优先级最低
- */
-export function useSnackbar(options?: SnackbarOptions): SnackbarContextValue {
-  const context = useContext(SnackbarContext);
-  if (!context) {
-    throw new Error('useSnackbar must be used within SnackbarProvider');
-  }
-
-  // 包装 showMessage 以支持 Hook 级别的 initialOptions
-  const wrappedShowMessage = (message: string, callOptions?: SnackbarOptions) => {
-    // 采用防御性编程，确保 options 和 callOptions 为空时也能正常工作
-    // 优先级：callOptions > options
-    const mergedOptions: SnackbarOptions = {
-      ...(options || {}),
-      ...(callOptions || {}),
-    };
-    context.showMessage(message, mergedOptions);
-  };
-
-  return {
-    ...context,
-    showMessage: wrappedShowMessage,
-  };
-}
-
-export default GlobalSnackbar;

components/__tests__/GlobalSnackbar.test.tsx

@@ -1,117 +0,0 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { act, render, renderHook, screen } from '@testing-library/react';
-import React from 'react';
-import {
-  GlobalSnackbar,
-  type GlobalSnackbarProps,
-  SnackbarProvider,
-  useSnackbar,
-  useSnackbarState,
-} from '@/components/GlobalSnackbar';
-
-describe('GlobalSnackbar 组件系统', () => {
-  const mockOnClose = vi.fn();
-
-  beforeEach(() => {
-    vi.useFakeTimers();
-    vi.clearAllMocks();
-  });
-
-  afterEach(() => {
-    vi.restoreAllMocks();
-    vi.useRealTimers();
-  });
-
-  const defaultProps: GlobalSnackbarProps = {
-    message: '测试消息',
-    open: true,
-    onClose: mockOnClose,
-  };
-
-  describe('GlobalSnackbar UI 渲染', () => {
-    it('应渲染消息内容', () => {
-      render(<GlobalSnackbar {...defaultProps} />);
-      expect(screen.getByText('测试消息')).toBeInTheDocument();
-    });
-
-    it('当 showAlert 为 true 时应渲染带样式的提示', () => {
-      render(<GlobalSnackbar {...defaultProps} showAlert={true} />);
-      // 验证是否包含消息文本
-      const alertElement = screen.getByText('测试消息');
-      expect(alertElement).toBeInTheDocument();
-      // 验证父元素有正确的样式类
-      const parent = alertElement.parentElement;
-      expect(parent).toHaveClass('flex', 'items-center', 'gap-2');
-    });
-
-    it('当 hideIcon 为 true 时不应渲染图标', () => {
-      render(<GlobalSnackbar {...defaultProps} hideIcon={true} />);
-      // 图标使用 lucide-react 的 svg 元素
-      const icon = document.querySelector('svg');
-      expect(icon).not.toBeInTheDocument();
-    });
-
-    it('应根据 severity 应用不同的样式', () => {
-      render(<GlobalSnackbar {...defaultProps} severity="error" />);
-      const message = screen.getByText('测试消息');
-      const parent = message.parentElement;
-      expect(parent).toHaveClass('bg-red-500');
-    });
-  });
-
-  describe('useSnackbarState Hook 逻辑', () => {
-    it('应返回初始状态', () => {
-      const { result } = renderHook(() => useSnackbarState());
-      expect(result.current.snackbarProps.open).toBe(false);
-      expect(result.current.snackbarProps.message).toBe('');
-    });
-
-    it('showMessage 应更新状态', () => {
-      const { result } = renderHook(() => useSnackbarState());
-
-      act(() => {
-        result.current.showMessage('新消息');
-      });
-
-      expect(result.current.snackbarProps.open).toBe(true);
-      expect(result.current.snackbarProps.message).toBe('新消息');
-    });
-
-    it('closeMessage 应关闭消息', () => {
-      const { result } = renderHook(() => useSnackbarState());
-
-      act(() => {
-        result.current.showMessage('消息');
-      });
-      act(() => {
-        result.current.closeMessage();
-      });
-
-      expect(result.current.snackbarProps.open).toBe(false);
-    });
-  });
-
-  describe('useSnackbar Context Hook 优先级', () => {
-    it('优先级验证: Call Options > Hook Options > Provider Options', () => {
-      const wrapper = ({ children }: { children: React.ReactNode }) => (
-        <SnackbarProvider initialOptions={{ severity: 'info' }}>{children}</SnackbarProvider>
-      );
-
-      const { result } = renderHook(() => useSnackbar({ severity: 'warning' }), { wrapper });
-
-      // 1. 测试 Hook Options 覆盖 Provider Options
-      act(() => {
-        result.current.showMessage('消息 1');
-      });
-
-      expect(screen.getByText('消息 1')).toBeInTheDocument();
-
-      // 2. 测试 Call Options 覆盖 Hook Options
-      act(() => {
-        result.current.showMessage('消息 2', { severity: 'error' });
-      });
-
-      expect(screen.getByText('消息 2')).toBeInTheDocument();
-    });
-  });
-});

components/__tests__/ToolCard.test.tsx

@@ -1,118 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { act, fireEvent, render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import ToolCard from '@/pages/Dashboard/ToolCard';
-import { Clock } from 'lucide-react';
-
-describe('ToolCard 组件', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  describe('渲染测试', () => {
-    it('应渲染标题和描述', () => {
-      render(
-        <ToolCard
-          title="测试工具"
-          description="这是一个测试工具"
-          colorKey="primary"
-          icon={Clock}
-          onNavigate={() => {}}
-        />,
-      );
-
-      expect(screen.getByText('测试工具')).toBeInTheDocument();
-      expect(screen.getByText('这是一个测试工具')).toBeInTheDocument();
-    });
-
-    it('无描述时仅渲染标题', () => {
-      render(<ToolCard title="仅标题" colorKey="primary" icon={Clock} onNavigate={() => {}} />);
-
-      expect(screen.getByText('仅标题')).toBeInTheDocument();
-    });
-
-    it('应渲染图标', () => {
-      const { container } = render(
-        <ToolCard title="带图标" colorKey="primary" icon={Clock} onNavigate={() => {}} />,
-      );
-
-      const svgElement = container.querySelector('svg');
-      expect(svgElement).toBeInTheDocument();
-    });
-
-    it('提供快照内容时应渲染快照', () => {
-      render(
-        <ToolCard
-          title="带快照"
-          colorKey="primary"
-          icon={Clock}
-          onNavigate={() => {}}
-          snapshot={<div data-testid="snapshot">快照内容</div>}
-        />,
-      );
-
-      expect(screen.getByTestId('snapshot')).toBeInTheDocument();
-    });
-
-    it('未提供快照时不渲染快照区域', () => {
-      const { container } = render(
-        <ToolCard
-          title="无快照"
-          colorKey="primary"
-          icon={Clock}
-          onClick={() => {}}
-          onNavigate={function (): void {
-            throw new Error('Function not implemented.');
-          }}
-        />,
-      );
-
-      expect(container.querySelector('[data-testid="snapshot"]')).not.toBeInTheDocument();
-    });
-
-    it('应使用 CardActionArea 渲染，支持键盘聚焦', () => {
-      render(<ToolCard title="可聚焦" colorKey="primary" icon={Clock} onNavigate={() => {}} />);
-
-      const button = screen.getByRole('button', { name: /可聚焦/ });
-      expect(button).toBeInTheDocument();
-    });
-  });
-
-  describe('交互测试', () => {
-    it('点击时应调用 onClick', () => {
-      const handleClick = vi.fn();
-      render(<ToolCard title="可点击" colorKey="primary" icon={Clock} onNavigate={handleClick} />);
-
-      const button = screen.getByRole('button', { name: /可点击/ });
-      fireEvent.click(button);
-
-      expect(handleClick).toHaveBeenCalledTimes(1);
-    });
-
-    it('按 Enter 键时应调用 onClick', async () => {
-      const handleClick = vi.fn();
-      render(
-        <ToolCard title="键盘可触发" colorKey="primary" icon={Clock} onNavigate={handleClick} />,
-      );
-
-      const button = screen.getByRole('button', { name: /键盘可触发/ });
-      await act(async () => {
-        button.focus();
-        await userEvent.keyboard('{Enter}');
-      });
-
-      expect(handleClick).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  describe('样式测试', () => {
-    it('应应用自定义颜色代码', () => {
-      const { container } = render(
-        <ToolCard title="自定义颜色" colorKey="warning" icon={Clock} onNavigate={() => {}} />,
-      );
-
-      const svgElement = container.querySelector('svg');
-      expect(svgElement).toBeInTheDocument();
-    });
-  });
-});

docs/VISUAL_STYLE_GUIDE.md

@@ -0,0 +1,871 @@
+# Testing Tools — 视觉规范文档
+
+> **版本**: 1.0.0  
+> **日期**: 2026-05-29  
+> **适用范围**: 所有新页面、新组件、UI 修改  
+> **设计系统**: 基于 [shadcn/ui](https://ui.shadcn.com/) + Tailwind CSS
+
+---
+
+## 目录
+
+1. [设计原则](#1-设计原则)
+2. [色彩系统](#2-色彩系统)
+3. [排版规范](#3-排版规范)
+4. [间距与布局](#4-间距与布局)
+5. [圆角与阴影](#5-圆角与阴影)
+6. [组件规范](#6-组件规范)
+7. [交互与动效](#7-交互与动效)
+8. [暗色模式](#8-暗色模式)
+9. [工具色彩标识](#9-工具色彩标识)
+10. [代码规范](#10-代码规范)
+11. [反模式清单](#11-反模式清单)
+
+---
+
+## 1. 设计原则
+
+### 1.1 核心定位
+
+Testing Tools 是一款**浏览器扩展开发者工具集**，视觉风格遵循：
+
+- **专业克制** — 低饱和度色彩，避免视觉噪音
+- **信息密度优先** — 紧凑布局，在 400×600px 的 popup 空间内高效展示
+- **开发者友好** — 等宽字体用于代码/数据，清晰的信息层级
+- **一致性至上** — 所有页面、组件遵循同一套视觉语言
+
+### 1.2 设计关键词
+
+```
+简洁 · 现代 · 功能导向 · 低对比度 · 微圆角 · 微妙阴影
+```
+
+### 1.3 与 shadcn/ui 的关系
+
+本项目以 shadcn/ui 为底座，所有基础组件（Button、Input、Select 等）均来自或对齐 shadcn/ui 的默认样式。业务组件在此基础上扩展，**不得破坏底层设计语言的统一性**。
+
+---
+
+## 2. 色彩系统
+
+### 2.1 CSS 变量定义
+
+所有色彩通过 CSS 自定义属性（HSL 格式）管理，定义于 `src/index.css`：
+
+#### 亮色模式 (`:root`)
+
+| 变量名                     | HSL 值              | 用途          | 近似色    |
+| -------------------------- | ------------------- | ------------- | --------- |
+| `--background`             | `0 0% 100%`         | 页面背景      | `#ffffff` |
+| `--foreground`             | `222.2 84% 4.9%`    | 主文字        | `#020617` |
+| `--card`                   | `0 0% 100%`         | 卡片背景      | `#ffffff` |
+| `--card-foreground`        | `222.2 84% 4.9%`    | 卡片文字      | `#020617` |
+| `--popover`                | `0 0% 100%`         | 浮层背景      | `#ffffff` |
+| `--popover-foreground`     | `222.2 84% 4.9%`    | 浮层文字      | `#020617` |
+| `--primary`                | `222.2 47.4% 11.2%` | 主按钮/强调   | `#0f172a` |
+| `--primary-foreground`     | `210 40% 98%`       | 主按钮文字    | `#f8fafc` |
+| `--secondary`              | `210 40% 96.1%`     | 次级背景      | `#f1f5f9` |
+| `--secondary-foreground`   | `222.2 47.4% 11.2%` | 次级文字      | `#0f172a` |
+| `--muted`                  | `210 40% 96.1%`     | 静音/禁用背景 | `#f1f5f9` |
+| `--muted-foreground`       | `215.4 16.3% 46.9%` | 次要文字      | `#64748b` |
+| `--accent`                 | `210 40% 96.1%`     | 悬停高亮      | `#f1f5f9` |
+| `--accent-foreground`      | `222.2 47.4% 11.2%` | 悬停文字      | `#0f172a` |
+| `--destructive`            | `0 84.2% 60.2%`     | 错误/删除     | `#ef4444` |
+| `--destructive-foreground` | `210 40% 98%`       | 错误文字      | `#f8fafc` |
+| `--border`                 | `214.3 31.8% 91.4%` | 边框          | `#e2e8f0` |
+| `--input`                  | `214.3 31.8% 91.4%` | 输入框边框    | `#e2e8f0` |
+| `--ring`                   | `222.2 84% 4.9%`    | 焦点环        | `#020617` |
+| `--radius`                 | `0.5rem`            | 全局圆角      | `8px`     |
+
+#### 暗色模式 (`.dark`)
+
+暗色模式下所有变量自动反转，保持对比度关系：
+
+| 变量名                 | HSL 值              | 近似色    |
+| ---------------------- | ------------------- | --------- |
+| `--background`         | `222.2 84% 4.9%`    | `#020617` |
+| `--foreground`         | `210 40% 98%`       | `#f8fafc` |
+| `--primary`            | `210 40% 98%`       | `#f8fafc` |
+| `--primary-foreground` | `222.2 47.4% 11.2%` | `#0f172a` |
+| `--secondary`          | `217.2 32.6% 17.5%` | `#1e293b` |
+| `--muted`              | `217.2 32.6% 17.5%` | `#1e293b` |
+| `--border`             | `217.2 32.6% 17.5%` | `#1e293b` |
+
+### 2.2 使用规范
+
+```tsx
+// ✅ 正确：使用 CSS 变量
+<div className="bg-background text-foreground border-border">
+
+// ✅ 正确：使用语义化色彩名
+<Button className="bg-primary text-primary-foreground">
+<span className="text-muted-foreground">
+
+// ❌ 错误：硬编码颜色值
+<div className="bg-white text-black">
+<div className="bg-[#f1f5f9]">
+```
+
+### 2.3 语义化色彩使用场景
+
+| 色彩                       | 场景                             |
+| -------------------------- | -------------------------------- |
+| `background`               | 页面根背景                       |
+| `foreground`               | 主标题、正文                     |
+| `muted-foreground`         | 描述文字、占位符、次级标签       |
+| `border`                   | 卡片边框、分割线、输入框边框     |
+| `card` + `card-foreground` | 卡片容器及其内容                 |
+| `primary`                  | 主按钮、选中状态、关键操作       |
+| `secondary`                | 次级按钮、工具栏背景、标签页背景 |
+| `destructive`              | 错误提示、删除操作、验证失败     |
+| `accent`                   | 悬停背景、下拉选中项             |
+
+---
+
+## 3. 排版规范
+
+### 3.1 字体栈
+
+项目使用系统默认字体栈（Tailwind 默认），**不引入自定义字体**。
+
+```css
+/* Tailwind 默认 sans-serif */
+font-family:
+  ui-sans-serif,
+  system-ui,
+  -apple-system,
+  BlinkMacSystemFont,
+  'Segoe UI',
+  Roboto,
+  'Helvetica Neue',
+  Arial,
+  sans-serif;
+
+/* 等宽字体用于代码/数据 */
+font-family:
+  ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+```
+
+### 3.2 字号层级
+
+| 层级      | 类名                                             | 大小 | 字重    | 用途                   |
+| --------- | ------------------------------------------------ | ---- | ------- | ---------------------- |
+| 页面标题  | `text-base font-bold`                            | 16px | 700     | 页面主标题（极少使用） |
+| 卡片标题  | `text-sm font-bold tracking-tight`               | 14px | 700     | 卡片/区块标题          |
+| 正文      | `text-sm`                                        | 14px | 400     | 普通正文               |
+| 次级文字  | `text-xs`                                        | 12px | 400/500 | 描述、标签             |
+| 微标签    | `text-[10px] font-bold uppercase tracking-wider` | 10px | 700     | 区域标签、分类标题     |
+| 数据/代码 | `font-mono text-sm`                              | 14px | 400     | 时间戳、JSON、代码     |
+
+### 3.3 排版模式
+
+```tsx
+// 区域标签（Section Label）— 最常用
+<span className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider">
+  输出结果
+</span>
+
+// 卡片标题
+<h4 className="font-bold text-sm tracking-tight text-foreground leading-snug">
+  标题文字
+</h4>
+
+// 描述文字
+<p className="text-[11px] font-medium text-muted-foreground/90 leading-normal">
+  描述内容
+</p>
+
+// 数据展示
+<span className="font-mono font-bold text-foreground text-sm tracking-tight tabular-nums">
+  1716950400000
+</span>
+```
+
+### 3.4 行高与字间距
+
+| 属性              | 值       | 场景               |
+| ----------------- | -------- | ------------------ |
+| `leading-none`    | 1        | 单行数据、紧凑布局 |
+| `leading-snug`    | 1.375    | 标题、短文本       |
+| `leading-relaxed` | 1.625    | 长文本、代码块     |
+| `tracking-tight`  | -0.025em | 标题、数据         |
+| `tracking-wider`  | 0.05em   | 大写标签           |
+
+---
+
+## 4. 间距与布局
+
+### 4.1 容器尺寸
+
+```tsx
+// Popup 模式（默认）
+<div className="w-[400px] max-w-[400px] min-w-[400px] h-[600px] min-h-[600px]">
+
+// Tab 模式（全屏自适应）
+<div className="sm:w-screen sm:max-w-none sm:min-w-0 sm:h-screen sm:min-h-0">
+```
+
+### 4.2 间距节奏
+
+| Token           | 值          | 使用场景           |
+| --------------- | ----------- | ------------------ |
+| `p-3` / `p-3.5` | 12px / 14px | 页面内边距（紧凑） |
+| `p-4`           | 16px        | 标准页面内边距     |
+| `p-5`           | 20px        | 卡片内部填充       |
+| `gap-2`         | 8px         | 紧凑元素间距       |
+| `gap-3`         | 12px        | 标准元素间距       |
+| `gap-4`         | 16px        | 区块间距           |
+| `gap-6`         | 24px        | 大区块间距         |
+
+### 4.3 布局模式
+
+#### 页面布局
+
+```tsx
+// 标准页面结构
+<div className="p-4 w-full flex flex-col space-y-4 min-h-[500px] select-none">{/* 页面内容 */}</div>
+```
+
+#### 卡片布局
+
+```tsx
+// 标准卡片
+<div className="p-5 rounded-xl border border-border bg-card text-card-foreground shadow-sm">
+  {/* 卡片内容 */}
+</div>
+
+// 可聚焦卡片（含焦点环）
+<div className="border border-border rounded-xl bg-card ... focus-within:ring-1 focus-within:ring-ring focus-within:border-ring">
+```
+
+#### 双栏网格
+
+```tsx
+// 响应式双栏
+<div className="grid grid-cols-1 md:grid-cols-2 gap-4 items-stretch">
+```
+
+#### 工具卡片网格（Dashboard）
+
+```tsx
+// Dashboard 紧凑网格
+<div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-2">
+```
+
+---
+
+## 5. 圆角与阴影
+
+### 5.1 圆角体系
+
+| Token          | 值     | 使用元素               |
+| -------------- | ------ | ---------------------- |
+| `rounded-sm`   | 2px    | Checkbox、小标签       |
+| `rounded-md`   | 6px    | 按钮、输入框、Select   |
+| `rounded-lg`   | 8px    | 搜索框、小卡片         |
+| `rounded-xl`   | 12px   | 大卡片、面板、图标容器 |
+| `rounded-full` | 9999px | 标签、Avatar           |
+
+### 5.2 阴影体系
+
+| 级别 | 类名                  | 用途                   |
+| ---- | --------------------- | ---------------------- |
+| 无   | —                     | 静态元素               |
+| 低   | `shadow-sm`           | 卡片、输入框、按钮     |
+| 中   | `shadow-lg`           | 下拉菜单、浮层、Dialog |
+| 动态 | 自定义 `shadow-[...]` | 卡片悬停时的彩色阴影   |
+
+### 5.3 彩色阴影规范（工具卡片专用）
+
+```tsx
+// 工具卡片悬停阴影 — 必须使用 rgba 格式配合 CSS 变量
+className="hover:shadow-[0_8px_24px_-8px_rgba(var(--tool-color),0.14)]
+           dark:hover:shadow-[0_8px_30px_-10px_rgba(var(--tool-color),0.25)]"
+```
+
+---
+
+## 6. 组件规范
+
+### 6.1 Button
+
+来源：`src/components/ui/button.tsx`
+
+#### 变体
+
+| 变体          | 类名                                         | 场景               |
+| ------------- | -------------------------------------------- | ------------------ |
+| `default`     | `bg-primary text-primary-foreground`         | 主操作             |
+| `destructive` | `bg-destructive text-destructive-foreground` | 删除、危险操作     |
+| `outline`     | `border border-input bg-background`          | 次级操作、取消     |
+| `secondary`   | `bg-secondary text-secondary-foreground`     | 次要操作           |
+| `ghost`       | 仅悬停背景                                   | 图标按钮、低优先级 |
+| `link`        | 下划线文字                                   | 跳转链接           |
+
+#### 尺寸
+
+| 尺寸      | 高度    | 内边距      | 场景     |
+| --------- | ------- | ----------- | -------- |
+| `default` | 40px    | `px-4 py-2` | 标准按钮 |
+| `sm`      | 36px    | `px-3`      | 紧凑按钮 |
+| `lg`      | 44px    | `px-8`      | 突出按钮 |
+| `icon`    | 40×40px | —           | 图标按钮 |
+
+#### 使用示例
+
+```tsx
+// 主操作
+<Button>确认</Button>
+
+// 图标按钮
+<Button variant="ghost" size="icon">
+  <Copy className="h-4 w-4" />
+</Button>
+
+// 危险操作
+<Button variant="destructive" size="sm">删除</Button>
+```
+
+### 6.2 Input
+
+来源：`src/components/ui/input.tsx`
+
+```tsx
+// 标准输入框
+<Input
+  className="font-mono font-semibold h-10 shadow-sm placeholder:text-muted-foreground/60 focus:bg-background"
+/>
+
+// 错误状态
+<Input
+  className="border-destructive focus-visible:ring-destructive"
+/>
+```
+
+**规范要点**：
+
+- 高度统一为 `h-10`（40px）
+- 等宽字体用于数据输入
+- 占位符使用 `text-muted-foreground/60`
+- 错误时边框变红并调整焦点环
+
+### 6.3 SwitchButtonGroup
+
+来源：`src/components/ui/switch.tsx`
+
+```tsx
+// 分段控制器
+<SwitchButtonGroup
+  value={mode}
+  options={[
+    { value: 'ts2dt', label: '转日期' },
+    { value: 'dt2ts', label: '转时间戳' },
+  ]}
+  onChange={setMode}
+  size="small"
+/>
+```
+
+**规范要点**：
+
+- 容器：`rounded-lg bg-muted p-1`
+- 选中项：`bg-background text-foreground shadow-sm font-semibold`
+- 未选中项：`hover:bg-background/50 hover:text-foreground/80`
+- 尺寸：`small`（32px）用于工具页，`medium`（36px）标准
+
+### 6.4 Card（工具卡片）
+
+来源：`src/pages/Dashboard/ToolCard.tsx`
+
+```tsx
+// 标准工具卡片结构
+<div className="group relative rounded-xl border border-border/70 bg-card p-4 h-auto flex flex-col gap-3 shadow-sm">
+  {/* 上半部分：图标 + 标题 + 箭头 */}
+  <div className="flex items-center justify-between">
+    <div className="flex gap-3 items-center">
+      {/* 图标容器 */}
+      <div className="flex items-center justify-center w-10 h-10 rounded-xl bg-[rgba(var(--tool-color),0.08)] text-[rgb(var(--tool-color))]">
+        <Icon className="h-5 w-5" />
+      </div>
+      {/* 文字 */}
+      <div>
+        <h4 className="font-bold text-sm">标题</h4>
+        <p className="text-[11px] text-muted-foreground/90">描述</p>
+      </div>
+    </div>
+    <ChevronRight className="h-4 w-4" />
+  </div>
+  {/* 下半部分：预览区（可选） */}
+  <div className="mt-1 pt-3 border-t border-dashed border-border/80">{snapshot}</div>
+</div>
+```
+
+### 6.5 TextInputArea
+
+来源：`src/components/TextInputArea.tsx`
+
+```tsx
+// 多行文本输入区
+<TextInputArea
+  value={input}
+  onChange={setInput}
+  placeholder="输入内容..."
+  showCount={true}
+  showClear={true}
+  allowCopy={true}
+  minRows={6}
+  maxRows={12}
+/>
+```
+
+**规范要点**：
+
+- 外容器：`rounded-md border border-input bg-background shadow-sm`
+- 焦点状态：`focus-within:ring-1 focus-within:ring-ring`
+- 错误状态：`border-destructive focus-within:ring-destructive`
+- 底部工具栏：`h-10 bg-muted/30 border-t border-border/50`
+- 字体：`font-mono text-sm`
+
+### 6.6 Dialog
+
+来源：`src/components/ui/dialog.tsx`
+
+```tsx
+// 对话框内容
+<DialogContent className="sm:rounded-lg">
+  <DialogHeader>
+    <DialogTitle>标题</DialogTitle>
+    <DialogDescription>描述文字</DialogDescription>
+  </DialogHeader>
+  {/* 内容 */}
+  <DialogFooter>
+    <Button variant="outline">取消</Button>
+    <Button>确认</Button>
+  </DialogFooter>
+</DialogContent>
+```
+
+### 6.7 Select
+
+来源：`src/components/ui/select.tsx`
+
+```tsx
+<Select>
+  <SelectTrigger className="h-9 shadow-sm bg-background">
+    <SelectValue />
+  </SelectTrigger>
+  <SelectContent className="max-h-64">
+    <SelectItem className="text-xs font-semibold focus:bg-accent cursor-pointer">选项</SelectItem>
+  </SelectContent>
+</Select>
+```
+
+### 6.8 Checkbox
+
+来源：`src/components/ui/checkbox.tsx`
+
+```tsx
+// 标准复选框
+<Checkbox className="h-4 w-4 rounded-sm border-primary data-[state=checked]:bg-primary" />
+
+// 小型复选框（工具栏内）
+<Checkbox className="h-3.5 w-3.5 rounded border-input data-[state=checked]:bg-primary shadow-sm" />
+```
+
+### 6.9 Badge
+
+来源：`src/components/ui/badge.tsx`
+
+| 变体          | 场景               |
+| ------------- | ------------------ |
+| `default`     | 状态标签、分类     |
+| `secondary`   | 次要标签           |
+| `destructive` | 错误标签           |
+| `outline`     | 可点击标签、筛选器 |
+
+### 6.10 CopyButton
+
+来源：`src/components/CopyButton.tsx`
+
+```tsx
+// 标准复制按钮
+<CopyButton text={content} />
+
+// 小型复制按钮
+<CopyButton text={content} size="sm" className="h-7 w-7 rounded-md border" />
+```
+
+**规范要点**：
+
+- 默认 `variant="ghost" size="icon"`
+- 复制成功后变为绿色背景 + 对勾图标
+- 使用 `sonner` toast 提示复制结果
+
+---
+
+## 7. 交互与动效
+
+### 7.1 过渡规范
+
+| 属性                | 值         | 场景                          |
+| ------------------- | ---------- | ----------------------------- |
+| `transition-colors` | 150ms ease | 色彩变化（悬停、焦点）        |
+| `transition-all`    | 150ms ease | 综合变化（SwitchButtonGroup） |
+| `duration-200`      | 200ms      | 复制按钮状态切换              |
+
+### 7.2 焦点状态
+
+所有可交互元素必须有可见的焦点指示器：
+
+```tsx
+// 标准焦点环
+focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
+
+// 紧凑焦点环（图标按钮）
+focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring
+
+// 输入框焦点
+focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
+```
+
+### 7.3 悬停状态
+
+```tsx
+// 按钮悬停
+hover:bg-accent hover:text-accent-foreground
+
+// 卡片悬停
+hover:bg-muted/30 hover:border-[rgba(var(--tool-color),0.45)]
+
+// 链接/文字悬停
+hover:text-foreground hover:underline
+```
+
+### 7.4 动画规范
+
+使用 `tailwindcss-animate` 提供的动画：
+
+```tsx
+// 淡入
+animate-in fade-in duration-150
+
+// 淡入 + 缩放（SwitchButtonGroup 选中项）
+animate-in fade-in-50 zoom-in-95 duration-150
+
+// 从顶部滑入（下拉菜单）
+animate-in fade-in slide-in-from-top-2 duration-150
+
+// 错误提示出现
+animate-in fade-in slide-in-from-top-1 duration-150
+
+// 骨架屏脉冲
+animate-pulse
+```
+
+### 7.5 禁用状态
+
+```tsx
+// 统一禁用样式
+disabled:pointer-events-none disabled:opacity-50
+```
+
+---
+
+## 8. 暗色模式
+
+### 8.1 实现方式
+
+通过 `darkMode: 'class'`（Tailwind 配置）+ `.dark` 类切换：
+
+```tsx
+// ThemeModeProvider 自动处理
+document.documentElement.classList.toggle('dark', resolvedMode === 'dark');
+```
+
+### 8.2 暗色模式下的特殊处理
+
+```tsx
+// 彩色阴影增强（暗色模式下阴影需要更高透明度）
+shadow-[0_8px_24px_-8px_rgba(var(--tool-color),0.14)]
+dark:shadow-[0_8px_30px_-10px_rgba(var(--tool-color),0.25)]
+
+// 图标容器背景增强
+bg-[rgba(var(--tool-color),0.08)]
+dark:bg-[rgba(var(--tool-color),0.12)]
+
+// 成功状态文字调整
+text-emerald-600 dark:text-emerald-400
+```
+
+### 8.3 暗色模式色彩映射原则
+
+| 亮色             | 暗色             | 说明                            |
+| ---------------- | ---------------- | ------------------------------- |
+| 纯白背景         | 深蓝黑背景       | 避免纯黑 `#000`，使用 `#020617` |
+| 浅灰背景         | 深灰背景         | 保持层次关系                    |
+| 深文字           | 浅文字           | 反转对比度                      |
+| 彩色阴影低透明度 | 彩色阴影高透明度 | 暗色需要更强视觉反馈            |
+
+---
+
+## 9. 工具色彩标识
+
+### 9.1 色板定义
+
+每个工具分配一个主题色，定义于 `src/config/features.tsx`：
+
+```ts
+const PALETTE_COLORS: Record<PaletteColorKey, string> = {
+  primary: '13, 148, 136', // teal (#0d9488)
+  success: '22, 163, 74', // green (#16a34a)
+  warning: '217, 119, 6', // amber (#d97706)
+  error: '220, 38, 38', // red (#dc2626)
+  secondary: '147, 51, 232', // purple (#9333e8)
+  info: '37, 99, 235', // blue (#2563eb)
+};
+```
+
+### 9.2 工具色彩分配
+
+| 工具        | 色彩键      | 色值   |
+| ----------- | ----------- | ------ |
+| 时间戳转换  | `primary`   | Teal   |
+| 存储清理    | `warning`   | Amber  |
+| 二维码工具  | `success`   | Green  |
+| 文本统计    | `secondary` | Purple |
+| JWT 解析    | `info`      | Blue   |
+| JSON 对比   | `primary`   | Teal   |
+| Base64 转换 | `info`      | Blue   |
+| 右键还原    | `success`   | Green  |
+
+### 9.3 工具色彩使用规范
+
+```tsx
+// 1. 通过 style 注入 CSS 变量
+<div style={{ ['--tool-color' as string]: rgbValues }}>
+
+// 2. 图标容器背景（低透明度）
+bg-[rgba(var(--tool-color),0.08)]
+dark:bg-[rgba(var(--tool-color),0.12)]
+
+// 3. 图标颜色
+ text-[rgb(var(--tool-color))]
+
+// 4. 悬停边框
+hover:border-[rgba(var(--tool-color),0.45)]
+
+// 5. 悬停阴影
+hover:shadow-[0_8px_24px_-8px_rgba(var(--tool-color),0.14)]
+
+// 6. 箭头悬停色
+group-hover:text-[rgb(var(--tool-color))]
+```
+
+**注意**：工具色彩仅用于**标识和装饰**，不得用于功能性色彩（如成功/错误状态）。
+
+---
+
+## 10. 代码规范
+
+### 10.1 Tailwind 类名组织顺序
+
+使用 `cn()` 工具函数（`clsx` + `tailwind-merge`）组合类名，按以下顺序排列：
+
+```tsx
+className={cn(
+  // 1. 布局（display, position, flex, grid）
+  'flex items-center justify-between',
+  // 2. 尺寸（width, height, padding, margin）
+  'w-full h-10 px-4',
+  // 3. 外观（background, border, shadow, rounded）
+  'rounded-md border border-input bg-background shadow-sm',
+  // 4. 文字（color, font, text-align）
+  'text-sm font-medium text-foreground',
+  // 5. 交互（hover, focus, disabled, cursor）
+  'hover:bg-accent focus-visible:ring-2 disabled:opacity-50',
+  // 6. 动画（transition, animate）
+  'transition-colors duration-150',
+  // 7. 条件类
+  isActive && 'bg-primary text-primary-foreground',
+  // 8. 外部传入
+  className,
+)}
+```
+
+### 10.2 颜色使用检查清单
+
+- [ ] 所有颜色使用 CSS 变量（`bg-background` 而非 `bg-white`）
+- [ ] 边框使用 `border-border` 及其透明度变体
+- [ ] 文字层级使用 `foreground` → `muted-foreground` → `muted-foreground/60`
+- [ ] 错误状态使用 `destructive` 系列
+- [ ] 工具色彩仅用于装饰性元素
+
+### 10.3 组件文件组织
+
+```
+src/
+├── components/ui/          # shadcn 基础组件（只读，不修改）
+├── components/             # 业务组件
+│   ├── CopyButton.tsx
+│   ├── SwitchButtonGroup.tsx
+│   ├── TextInputArea.tsx
+│   └── ...
+├── pages/                  # 页面组件
+│   ├── <ToolName>/
+│   │   ├── index.tsx       # 页面入口
+│   │   ├── use<ToolName>.ts # 业务逻辑 Hook
+│   │   └── components/     # 页面私有组件
+│   └── ...
+└── providers/              # Context Providers
+```
+
+### 10.4 新增页面模板
+
+```tsx
+// src/pages/NewTool/index.tsx
+import SwitchButtonGroup from '@/components/SwitchButtonGroup';
+import { useI18n } from '@/utils/chromeI18n';
+import { cn } from '@/lib/utils';
+
+export default function Index() {
+  const { t } = useI18n('newTool');
+
+  return (
+    <div className="p-4 w-full flex flex-col space-y-4 min-h-[500px] select-none">
+      {/* 页面内容 */}
+      <div className="p-5 rounded-xl border border-border bg-card text-card-foreground shadow-sm">
+        <h4 className="font-bold text-sm tracking-tight">{t('newTool:title')}</h4>
+      </div>
+    </div>
+  );
+}
+```
+
+---
+
+## 11. 反模式清单
+
+以下模式**禁止**在项目中使用：
+
+### 11.1 色彩反模式
+
+```tsx
+// ❌ 硬编码颜色
+<div className="bg-white text-black">
+<div className="bg-gray-100">
+<div className="text-gray-500">
+
+// ❌ 使用非语义化 Tailwind 颜色
+<div className="bg-slate-50">
+<div className="text-zinc-400">
+
+// ✅ 使用 CSS 变量
+<div className="bg-background text-foreground">
+<div className="bg-muted text-muted-foreground">
+```
+
+### 11.2 布局反模式
+
+```tsx
+// ❌ 固定高度导致内容截断
+<div className="h-[200px]">
+
+// ✅ 使用 min-height 或自适应
+<div className="min-h-[200px]">
+<div className="h-auto">
+
+// ❌ 使用 margin 做组件间距
+<div className="mb-4">
+
+// ✅ 使用 gap
+<div className="flex flex-col gap-4">
+```
+
+### 11.3 组件反模式
+
+```tsx
+// ❌ 修改 shadcn/ui 基础组件样式
+// 如需修改，通过 className 覆盖或创建包装组件
+
+// ❌ 内联样式用于颜色（工具色彩除外）
+<div style={{ backgroundColor: '#f1f5f9' }}>
+
+// ❌ 混合使用不同圆角体系
+<Button className="rounded-lg">  // Button 应为 rounded-md
+
+// ❌ 忽略焦点状态
+<button className="...">  // 缺少 focus-visible 样式
+```
+
+### 11.4 暗色模式反模式
+
+```tsx
+// ❌ 仅适配部分元素
+<div className="bg-white text-black dark:bg-gray-900 dark:text-white">
+
+// ✅ 使用 CSS 变量自动适配
+<div className="bg-background text-foreground">
+
+// ❌ 暗色模式下使用不合适的透明度
+<div className="bg-black/5 dark:bg-white/5">  // 对比度不足
+
+// ✅ 使用语义化变量
+<div className="bg-muted">
+```
+
+---
+
+## 12. 附录
+
+### 12.1 常用类名速查
+
+```
+// 页面容器
+p-4 w-full flex flex-col space-y-4 min-h-[500px] select-none
+
+// 标准卡片
+p-5 rounded-xl border border-border bg-card text-card-foreground shadow-sm
+
+// 工具栏
+flex h-10 items-center justify-between px-1.5 bg-secondary/40 rounded-xl border border-border/60
+
+// 区域标签
+text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider
+
+// 数据展示
+font-mono font-semibold text-foreground text-sm
+
+// 错误提示
+text-xs font-medium text-destructive
+
+// 空状态
+p-8 rounded-xl bg-muted/30 border border-dashed border-border/80 text-center
+
+// 图标按钮容器
+flex h-8 w-8 items-center justify-center rounded-md border border-input bg-background shadow-sm
+
+// 焦点环
+focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
+```
+
+### 12.2 相关文件
+
+| 文件                                  | 说明                    |
+| ------------------------------------- | ----------------------- |
+| `src/index.css`                       | CSS 变量定义、全局样式  |
+| `tailwind.config.js`                  | Tailwind 配置、色彩映射 |
+| `src/lib/utils.ts`                    | `cn()` 工具函数         |
+| `src/components/ui/*.tsx`             | shadcn/ui 基础组件      |
+| `src/config/features.tsx`             | 工具配置、色彩分配      |
+| `src/providers/ThemeModeProvider.tsx` | 主题模式管理            |
+
+### 12.3 参考资源
+
+- [shadcn/ui 文档](https://ui.shadcn.com/docs)
+- [Tailwind CSS 文档](https://tailwindcss.com/docs)
+- [Radix UI 文档](https://www.radix-ui.com/)
+- [Lucide Icons](https://lucide.dev/)
+
+---
+
+_本文档随项目迭代更新。新增组件或修改视觉风格时，请同步更新此文档。_

entrypoints/background.ts

@@ -1,189 +0,0 @@
-import '../.wxt/types/imports.d.ts';
-import { browser } from 'wxt/browser';
-import { MessageAction, onMessage, sendMessage } from '@/utils/messages';
-import { createAllContextMenus, parseContextMenuClick } from '@/utils/contextMenu';
-import { saveContextMenuData } from '@/utils/useContextMenuData';
-
-export default defineBackground(() => {
-  // 1. 扩展初次安装或更新时，注册右键上下文菜单
-  browser.runtime.onInstalled.addListener(() => {
-    createAllContextMenus();
-  });
-
-  // 2. 右键点击路由
-  browser.contextMenus.onClicked.addListener(async (info, _tab) => {
-    const result = parseContextMenuClick(info.menuItemId as string, info);
-
-    if (!result.success || !result.data) {
-      if (result.error) {
-        console.warn('[Context Menu Warning]', result.error);
-      }
-      return;
-    }
-
-    const { featureKey, payload } = result.data;
-
-    try {
-      const sidePanelState = await browser.storage.local.get('sidePanelOpen');
-      const isSidePanelOpen = sidePanelState.sidePanelOpen === true;
-
-      if (isSidePanelOpen) {
-        await sendMessage(MessageAction.CONTEXT_MENU_CLICKED, { featureKey, payload });
-        return;
-      }
-    } catch (err) {
-      console.debug('[Context Menu] Side panel pipeline is not available:', err);
-    }
-
-    await saveContextMenuData({ featureKey, payload });
-
-    try {
-      await browser.action.openPopup();
-    } catch (err) {
-      console.warn(
-        '[Context Menu] 自动打开 popup 失败，请手动点击扩展图标，暂存数据已安全保留:',
-        err,
-      );
-    }
-  });
-
-  // 监听扩展图标点击事件，安全激活侧边栏
-  browser.action.onClicked.addListener(async (tab) => {
-    if (tab.id) {
-      try {
-        await browser.sidePanel.open({ tabId: tab.id });
-      } catch (err) {
-        console.error('Failed to open side panel via extension action clicked:', err);
-      }
-    }
-  });
-
-  // 3. 注入主环境脚本（content script 无权访问 chrome.tabs/scripting，委托 background 执行）
-  onMessage(MessageAction.INJECT_MAIN_WORLD_SCRIPT, async (message) => {
-    const sender = message.sender as chrome.runtime.MessageSender | undefined;
-    const tabId = sender?.tab?.id;
-
-    if (!tabId) {
-      console.warn('[RightClickRestorer] Injection request missing tabId');
-      return { success: false, message: 'Missing tabId' };
-    }
-
-    try {
-      await browser.scripting.executeScript({
-        target: { tabId },
-        func: () => {
-          'use strict';
-          const w = window as unknown as Record<string, unknown>;
-          if (w.__testingToolsRightClickPatched) return;
-          w.__testingToolsRightClickPatched = true;
-
-          const PROTECTED = ['contextmenu', 'copy', 'paste', 'cut', 'selectstart'];
-
-          /* 1. 屏蔽 MouseEvent.prototype.preventDefault（含 mousedown 右键） */
-          const _origPreventDefault = MouseEvent.prototype.preventDefault;
-          Object.defineProperty(MouseEvent.prototype, 'preventDefault', {
-            value: function (this: MouseEvent) {
-              const t = this.type;
-              if (PROTECTED.includes(t) || (t === 'mousedown' && this.button === 2)) {
-                return;
-              }
-              return _origPreventDefault.call(this);
-            },
-            writable: true,
-            configurable: true,
-          });
-
-          /* 2. 屏蔽 Event.prototype.stopPropagation / stopImmediatePropagation */
-          const _origStopPropagation = Event.prototype.stopPropagation;
-          Object.defineProperty(Event.prototype, 'stopPropagation', {
-            value: function (this: Event) {
-              if (PROTECTED.includes(this.type)) return;
-              return _origStopPropagation.call(this);
-            },
-            writable: true,
-            configurable: true,
-          });
-
-          const _origStopImmediatePropagation = Event.prototype.stopImmediatePropagation;
-          Object.defineProperty(Event.prototype, 'stopImmediatePropagation', {
-            value: function (this: Event) {
-              if (PROTECTED.includes(this.type)) return;
-              return _origStopImmediatePropagation.call(this);
-            },
-            writable: true,
-            configurable: true,
-          });
-
-          /* 3. 拦截 document.oncontextmenu（处理 return false 方式） */
-          let _docOnContextMenu: unknown = null;
-          Object.defineProperty(document, 'oncontextmenu', {
-            get() {
-              return _docOnContextMenu;
-            },
-            set(fn: unknown) {
-              if (typeof fn === 'function') {
-                _docOnContextMenu = function (this: GlobalEventHandlers, e: MouseEvent) {
-                  const r = (fn as (this: GlobalEventHandlers, ev: MouseEvent) => unknown).call(
-                    this,
-                    e,
-                  );
-                  return r === false ? true : r;
-                };
-              } else {
-                _docOnContextMenu = fn;
-              }
-            },
-            configurable: true,
-          });
-        },
-        world: 'MAIN',
-      });
-
-      return { success: true };
-    } catch (err) {
-      const errorMsg = err instanceof Error ? err.message : String(err);
-      console.error('[RightClickRestorer] executeScript failed:', errorMsg);
-      return { success: false, message: errorMsg };
-    }
-  });
-
-  // 4. 异步刷新请求监听（统一使用 alarms API，避免 MV3 Service Worker 被销毁导致任务丢失）
-  onMessage(MessageAction.RELOAD_TAB, async (message) => {
-    const { tabId, delay = 0 } = message.data;
-
-    const executeReload = () => {
-      browser.tabs.reload(tabId).catch((err) => {
-        console.error('Failed to execute tab reload operation:', err);
-      });
-    };
-
-    if (delay <= 0) {
-      executeReload();
-      return { success: true };
-    }
-
-    const alarmName = `reload-tab-${tabId}-${Date.now()}`;
-
-    // 创建一次性 Alarm，由浏览器内核保障触发（不受 Service Worker 生命周期影响）
-    await browser.alarms.create(alarmName, { when: Date.now() + delay });
-
-    // 兜底清理：若 alarm 因异常未触发，delay 后 5 秒强制移除监听器并清理 alarm
-    const cleanupTimeout = setTimeout(() => {
-      browser.alarms.onAlarm.removeListener(alarmListener);
-      browser.alarms.clear(alarmName).catch(() => {});
-    }, delay + 5000);
-
-    const alarmListener = (alarm: { name: string }) => {
-      if (alarm.name !== alarmName) return;
-
-      clearTimeout(cleanupTimeout);
-      executeReload();
-      browser.alarms.onAlarm.removeListener(alarmListener);
-      browser.alarms.clear(alarmName).catch(() => {});
-    };
-
-    browser.alarms.onAlarm.addListener(alarmListener);
-
-    return { success: true };
-  });
-});

entrypoints/content.ts

@@ -1,10 +0,0 @@
-import '../.wxt/types/imports.d.ts';
-import { initMessageHandler } from './content/messageHandler';
-
-export default defineContentScript({
-  matches: ['<all_urls>'],
-  runAt: 'document_end',
-  main() {
-    initMessageHandler();
-  },
-});

entrypoints/content/messageHandler.ts

@@ -1,5 +0,0 @@
-import { initContextMenuHandler } from './contextMenuHandler';
-
-export function initMessageHandler(): void {
-  initContextMenuHandler();
-}

entrypoints/options/App.tsx

@@ -1,383 +0,0 @@
-import { SyntheticEvent, useEffect, useMemo, useState } from 'react';
-import { GripVertical, RefreshCw } from 'lucide-react';
-import {
-  closestCenter,
-  DndContext,
-  type DragEndEvent,
-  KeyboardSensor,
-  PointerSensor,
-  useSensor,
-  useSensors,
-} from '@dnd-kit/core';
-import {
-  arrayMove,
-  SortableContext,
-  sortableKeyboardCoordinates,
-  useSortable,
-  verticalListSortingStrategy,
-} from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import type { PageType, StorageSchema } from '@/types/storage';
-import { storageUtil } from '@/utils/chromeStorage';
-import type { PaletteColorKey } from '@/config/features';
-import {
-  getAllFeatureKeys,
-  getDefaultPageOrder,
-  getDefaultVisibleFeatureKeys,
-  getFeatureByKey,
-} from '@/config/features';
-import GlobalSnackbar, { useSnackbarState } from '@/components/GlobalSnackbar';
-import PageErrorBoundary from '@/components/PageErrorBoundary';
-import { useTranslation } from 'react-i18next';
-
-const PALETTE_COLORS: Record<PaletteColorKey, string> = {
-  primary: '#1976d2',
-  success: '#2e7d32',
-  warning: '#e65100',
-  error: '#c62828',
-  secondary: '#9c27b0',
-  info: '#0288d1',
-};
-
-const getColorCode = (key: PaletteColorKey): string => PALETTE_COLORS[key];
-
-const isValidPage = (page: unknown): page is PageType => {
-  return typeof page === 'string' && (getAllFeatureKeys() as string[]).includes(page);
-};
-
-const isValidPageList = (pages: unknown): pages is PageType[] => {
-  return Array.isArray(pages) && pages.every(isValidPage);
-};
-
-type WindowType = 'popup' | 'sidepanel' | 'tab';
-
-interface SortableFeatureRowProps {
-  pageKey: PageType;
-  isLast: boolean;
-  isChecked: boolean;
-  isDisabled: boolean;
-  onToggle: (key: PageType) => void;
-}
-
-function SortableFeatureRow({
-  pageKey,
-  isLast,
-  isChecked,
-  isDisabled,
-  onToggle,
-}: SortableFeatureRowProps) {
-  const { t } = useTranslation(['features']);
-  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
-    id: pageKey,
-  });
-
-  const feature = getFeatureByKey(pageKey);
-  if (!feature) return null;
-
-  const colorKey = feature.themeColorKey ?? 'primary';
-  const colorCode = getColorCode(colorKey);
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    zIndex: isDragging ? 1 : 'auto',
-    position: 'relative' as const,
-    backgroundColor: isDragging ? `${colorCode}0a` : 'transparent',
-    boxShadow: isDragging ? '0 8px 20px rgba(0,0,0,0.08)' : 'none',
-  };
-
-  return (
-    <div
-      ref={setNodeRef}
-      style={style}
-      className={`flex items-center justify-between p-4 sm:p-5 transition-all duration-200 hover:bg-muted ${
-        isLast ? '' : 'border-b border-border'
-      }`}
-    >
-      <div className="flex items-center gap-3 sm:gap-4 flex-1 min-w-0">
-        {/* 拖拽手柄 */}
-        <div
-          className="drag-handle text-muted-foreground cursor-grab touch-none transition-colors duration-200 hover:text-foreground active:cursor-grabbing"
-          {...attributes}
-          {...listeners}
-          aria-label={`拖拽以调整 ${t(feature.labelKey)} 的位置`}
-        >
-          <GripVertical size={16} />
-        </div>
-
-        {/* 功能图标 */}
-        <div
-          className="flex items-center justify-center w-9 h-9 rounded-xl flex-shrink-0"
-          style={{
-            backgroundColor: `${colorCode}1a`,
-            color: colorCode,
-          }}
-        >
-          {feature.icon && <feature.icon size={20} />}
-        </div>
-
-        {/* 文本信息 */}
-        <div className="min-w-0 flex-1">
-          <div className="font-bold text-[0.95rem] leading-tight text-foreground">
-            {t(feature.labelKey)}
-          </div>
-          {feature.descriptionKey && (
-            <div
-              className="text-xs text-muted-foreground font-medium mt-0.5 overflow-hidden text-ellipsis whitespace-nowrap"
-              title={t(feature.descriptionKey)}
-            >
-              {t(feature.descriptionKey)}
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* 开关 */}
-      <button
-        type="button"
-        role="switch"
-        aria-checked={isChecked}
-        disabled={isDisabled}
-        onClick={() => onToggle(pageKey)}
-        className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 ${
-          isChecked ? 'bg-primary' : 'bg-muted'
-        } ${isDisabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
-      >
-        <span
-          className={`inline-block h-4 w-4 transform rounded-full bg-background transition-transform duration-200 ${
-            isChecked ? 'translate-x-6' : 'translate-x-1'
-          }`}
-        />
-      </button>
-    </div>
-  );
-}
-
-export default function App() {
-  const { t } = useTranslation(['features', 'common']);
-
-  const initialWindowType = useMemo(() => {
-    if (typeof window === 'undefined') return 'popup';
-    const params = new URLSearchParams(window.location.search);
-    const tab = params.get('tab');
-    if (tab === 'popup' || tab === 'sidepanel' || tab === 'tab') {
-      return tab as WindowType;
-    }
-    return 'popup';
-  }, []);
-
-  const [windowType, setWindowType] = useState<WindowType>(initialWindowType);
-  const [visiblePages, setVisiblePages] = useState<PageType[]>([]);
-  const [pageOrder, setPageOrder] = useState<PageType[]>([]);
-  const [isLoaded, setIsLoaded] = useState(false);
-  const { snackbarProps, showMessage } = useSnackbarState();
-
-  const sensors = useSensors(
-    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
-    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
-  );
-
-  const configKeys = useMemo(() => {
-    switch (windowType) {
-      case 'sidepanel':
-        return {
-          visible: 'app/sidepanelVisiblePages' as keyof StorageSchema,
-          order: 'app/sidepanelPageOrder' as keyof StorageSchema,
-        };
-      case 'tab':
-        return {
-          visible: 'app/tabVisiblePages' as keyof StorageSchema,
-          order: 'app/tabPageOrder' as keyof StorageSchema,
-        };
-      case 'popup':
-      default:
-        return {
-          visible: 'app/popupVisiblePages' as keyof StorageSchema,
-          order: 'app/popupPageOrder' as keyof StorageSchema,
-        };
-    }
-  }, [windowType]);
-
-  useEffect(() => {
-    const url = new URL(window.location.href);
-    url.searchParams.set('tab', windowType);
-    window.history.replaceState({}, '', url.toString());
-  }, [windowType]);
-
-  useEffect(() => {
-    const loadConfig = async () => {
-      setIsLoaded(false);
-      try {
-        const [savedVisible, savedOrder] = await Promise.all([
-          storageUtil.get(configKeys.visible, getDefaultVisibleFeatureKeys()),
-          storageUtil.get(configKeys.order, getDefaultPageOrder()),
-        ]);
-        setVisiblePages(
-          isValidPageList(savedVisible) ? savedVisible : getDefaultVisibleFeatureKeys(),
-        );
-        setPageOrder(isValidPageList(savedOrder) ? savedOrder : getDefaultPageOrder());
-      } catch (error) {
-        console.error('Failed to load config:', error);
-        setVisiblePages(getDefaultVisibleFeatureKeys());
-        setPageOrder(getDefaultPageOrder());
-      } finally {
-        setIsLoaded(true);
-      }
-    };
-
-    loadConfig().catch(console.error);
-  }, [configKeys]);
-
-  const showToast = (message: string, severity: 'success' | 'info' | 'warning') => {
-    showMessage(message, { severity });
-  };
-
-  const handlePageToggle = async (page: PageType) => {
-    const isCurrentlyVisible = visiblePages.includes(page);
-    let newPages: PageType[];
-
-    if (isCurrentlyVisible) {
-      if (visiblePages.length <= 1) {
-        showToast('至少需要保留一个可见页面', 'warning');
-        return;
-      }
-      newPages = visiblePages.filter((p) => p !== page);
-    } else {
-      newPages = [...visiblePages, page];
-    }
-
-    try {
-      await storageUtil.set(configKeys.visible, newPages);
-      setVisiblePages(newPages);
-      const feature = getFeatureByKey(page);
-      const label = feature ? t(feature.labelKey) : page;
-      showToast(`已${isCurrentlyVisible ? '隐藏' : '显示'} ${label}`, 'success');
-    } catch (error) {
-      console.error('Failed to save config:', error);
-      showToast('保存失败', 'warning');
-    }
-  };
-
-  const handleDragEnd = async (event: DragEndEvent) => {
-    const { active, over } = event;
-    if (!over || active.id === over.id) return;
-
-    const oldIndex = pageOrder.indexOf(active.id as PageType);
-    const newIndex = pageOrder.indexOf(over.id as PageType);
-    if (oldIndex < 0 || newIndex < 0) return;
-
-    const newOrder = arrayMove(pageOrder, oldIndex, newIndex);
-    setPageOrder(newOrder);
-
-    try {
-      await storageUtil.set(configKeys.order, newOrder);
-    } catch (error) {
-      console.error('Failed to save order:', error);
-      showToast('排序保存失败', 'warning');
-    }
-  };
-
-  const handleRestoreDefaults = async () => {
-    try {
-      const defaults = getDefaultVisibleFeatureKeys();
-      const defaultOrder = getDefaultPageOrder();
-
-      await Promise.all([
-        storageUtil.set(configKeys.visible, defaults),
-        storageUtil.set(configKeys.order, defaultOrder),
-      ]);
-
-      setVisiblePages(defaults);
-      setPageOrder(defaultOrder);
-      showToast('已恢复当前模式默认设置', 'success');
-    } catch (error) {
-      console.error('Failed to restore defaults:', error);
-      showToast('恢复失败', 'warning');
-    }
-  };
-
-  const handleWindowTypeChange = (_event: SyntheticEvent, newType: WindowType) => {
-    if (newType !== null) {
-      setWindowType(newType);
-    }
-  };
-
-  if (!isLoaded) {
-    return (
-      <div className="flex justify-center items-center min-h-screen">
-        <div className="w-6 h-6 border-2 border-primary border-t-transparent rounded-full animate-spin" />
-      </div>
-    );
-  }
-
-  return (
-    <div className="app min-h-screen bg-background flex flex-col">
-      <PageErrorBoundary>
-        {/* 顶部标题与导航栏 */}
-        <div className="w-full bg-background border-b border-border pt-8 sm:pt-12 pb-0 px-4 sm:px-8">
-          <div className="max-w-3xl mx-auto">
-            {/* Tab 与恢复按钮同行 */}
-            <div className="flex items-end justify-between border-b-0">
-              <div className="flex-1 flex">
-                {(['popup', 'sidepanel', 'tab'] as WindowType[]).map((type) => (
-                  <button
-                    key={type}
-                    onClick={(e) => handleWindowTypeChange(e, type)}
-                    className={`px-4 sm:px-6 py-2 text-[0.9rem] font-bold transition-colors duration-200 ${
-                      windowType === type
-                        ? 'text-primary border-b-2 border-primary'
-                        : 'text-muted-foreground hover:text-foreground'
-                    }`}
-                  >
-                    {type === 'popup' ? 'Popup 窗口' : type === 'sidepanel' ? '侧边栏' : '标签页'}
-                  </button>
-                ))}
-              </div>
-              <button
-                onClick={handleRestoreDefaults}
-                className="mb-1 ml-2 p-1.5 text-muted-foreground hover:text-primary hover:bg-primary/10 rounded-lg transition-colors duration-200"
-                title="恢复当前模式默认"
-              >
-                <RefreshCw size={16} />
-              </button>
-            </div>
-          </div>
-        </div>
-
-        {/* 主内容区域 */}
-        <div className="flex-1 p-4 sm:p-8">
-          <div className="max-w-3xl mx-auto">
-            <div className="rounded-2xl border border-border overflow-hidden bg-card shadow-sm">
-              <DndContext
-                sensors={sensors}
-                collisionDetection={closestCenter}
-                onDragEnd={handleDragEnd}
-              >
-                <SortableContext items={pageOrder} strategy={verticalListSortingStrategy}>
-                  <div className="flex flex-col">
-                    {pageOrder.map((key, index, array) => {
-                      const isChecked = visiblePages.includes(key);
-                      const isDisabled = isChecked && visiblePages.length === 1;
-                      return (
-                        <SortableFeatureRow
-                          key={key}
-                          pageKey={key}
-                          isLast={index === array.length - 1}
-                          isChecked={isChecked}
-                          isDisabled={isDisabled}
-                          onToggle={handlePageToggle}
-                        />
-                      );
-                    })}
-                  </div>
-                </SortableContext>
-              </DndContext>
-            </div>
-          </div>
-        </div>
-      </PageErrorBoundary>
-
-      <GlobalSnackbar {...snackbarProps} />
-    </div>
-  );
-}

entrypoints/options/__tests__/App.test.tsx

@@ -1,132 +0,0 @@
-import { describe, expect, it, vi, beforeEach } from 'vitest';
-import { render, screen, waitFor } from '@testing-library/react';
-import App from '../App';
-import { storageUtil } from '@/utils/chromeStorage';
-import {
-  getDefaultVisibleFeatureKeys,
-  getDefaultPageOrder,
-  getFeatureByKey,
-} from '@/config/features';
-
-// Mock storageUtil
-vi.mock('@/utils/chromeStorage', () => ({
-  storageUtil: {
-    get: vi.fn(),
-    set: vi.fn(() => Promise.resolve()),
-  },
-}));
-
-// Mock i18next
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-  withTranslation: () => (Component: any) => Component,
-}));
-
-describe('Options App', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    localStorage.clear();
-  });
-
-  it('合法数据应正常加载并显示正确的功能列表', async () => {
-    const defaultOrder = getDefaultPageOrder();
-
-    (storageUtil.get as any).mockImplementation((_key: string, defaultValue: any) =>
-      Promise.resolve(defaultValue),
-    );
-
-    render(<App />);
-
-    await waitFor(() => {
-      expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
-    });
-
-    // 验证默认可见的功能都被渲染出来了
-    for (const key of defaultOrder) {
-      const feature = getFeatureByKey(key);
-      if (feature) {
-        expect(screen.getByText(feature.labelKey)).toBeInTheDocument();
-      }
-    }
-  });
-
-  it('非法 visiblePages 数据应回退到默认值', async () => {
-    const defaultVisible = getDefaultVisibleFeatureKeys();
-
-    (storageUtil.get as any).mockImplementation((key: string, defaultValue: any) => {
-      if (key.includes('VisiblePages')) {
-        return Promise.resolve(['invalidPage', 'anotherInvalid']);
-      }
-      return Promise.resolve(defaultValue);
-    });
-
-    render(<App />);
-
-    await waitFor(() => {
-      expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
-    });
-
-    // 验证默认值的功能仍然被渲染（非法数据被回退）
-    for (const key of defaultVisible) {
-      const feature = getFeatureByKey(key);
-      if (feature && key !== 'dashboard') {
-        expect(screen.getByText(feature.labelKey)).toBeInTheDocument();
-      }
-    }
-  });
-
-  it('非法 pageOrder 数据应回退到默认值', async () => {
-    const defaultOrder = getDefaultPageOrder();
-
-    (storageUtil.get as any).mockImplementation((key: string, defaultValue: any) => {
-      if (key.includes('PageOrder')) {
-        return Promise.resolve(['notARealPage', 123, null]);
-      }
-      return Promise.resolve(defaultValue);
-    });
-
-    render(<App />);
-
-    await waitFor(() => {
-      expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
-    });
-
-    // 验证默认顺序的功能都被渲染
-    for (const key of defaultOrder) {
-      const feature = getFeatureByKey(key);
-      if (feature) {
-        expect(screen.getByText(feature.labelKey)).toBeInTheDocument();
-      }
-    }
-  });
-
-  it('非数组数据应回退到默认值', async () => {
-    const defaultOrder = getDefaultPageOrder();
-
-    (storageUtil.get as any).mockImplementation((key: string, defaultValue: any) => {
-      if (key.includes('VisiblePages')) {
-        return Promise.resolve('not-an-array');
-      }
-      if (key.includes('PageOrder')) {
-        return Promise.resolve({ foo: 'bar' });
-      }
-      return Promise.resolve(defaultValue);
-    });
-
-    render(<App />);
-
-    await waitFor(() => {
-      expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
-    });
-
-    // 验证默认功能都被渲染
-    for (const key of defaultOrder) {
-      const feature = getFeatureByKey(key);
-      if (feature) {
-        expect(screen.getByText(feature.labelKey)).toBeInTheDocument();
-      }
-    }
-  });
-});

entrypoints/options/index.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>扩展设置 - Testing Tools</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="./main.tsx"></script>
-  </body>
-</html>

entrypoints/options/main.tsx

@@ -1,11 +0,0 @@
-import ReactDOM from 'react-dom/client';
-import AppRoot from '@/providers/AppRoot';
-import '@/i18n';
-import '@/src/index.css';
-import App from './App';
-
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <AppRoot>
-    <App />
-  </AppRoot>,
-);

entrypoints/popup/App.tsx

@@ -1,47 +0,0 @@
-import RouterProvider from '@/providers/RouterProvider';
-import TopBar from '@/components/TopBar';
-import RouterContainer from '@/components/RouterContainer';
-import ErrorBoundary from '@/components/ErrorBoundary';
-import { SnackbarProvider } from '@/components/GlobalSnackbar';
-import { getEntryPointType } from '@/config/features';
-import { useMemo } from 'react';
-
-export default function App() {
-  const handleOpenOptions = () => {
-    chrome.runtime.openOptionsPage().catch(console.error);
-  };
-
-  const entryType = useMemo(() => getEntryPointType(), []);
-
-  const routerConfig = useMemo(() => {
-    if (entryType === 'tab') {
-      return {
-        syncKey: 'app/tabRoute' as const,
-        visiblePagesKey: 'app/tabVisiblePages' as const,
-        pageOrderKey: 'app/tabPageOrder' as const,
-      };
-    }
-    return {
-      syncKey: 'app/popupRoute' as const,
-      visiblePagesKey: 'app/popupVisiblePages' as const,
-      pageOrderKey: 'app/popupPageOrder' as const,
-    };
-  }, [entryType]);
-
-  return (
-    <RouterProvider
-      syncKey={routerConfig.syncKey}
-      visiblePagesKey={routerConfig.visiblePagesKey}
-      pageOrderKey={routerConfig.pageOrderKey}
-    >
-      <SnackbarProvider initialOptions={{ autoHideDuration: 1500 }}>
-        <div className="app flex flex-col w-[400px] max-w-[400px] min-w-[400px] h-[600px] min-h-[600px] overflow-hidden bg-background sm:w-screen sm:max-w-none sm:min-w-0 sm:h-screen sm:min-h-0">
-          <TopBar onOpenOptions={handleOpenOptions} />
-          <ErrorBoundary>
-            <RouterContainer />
-          </ErrorBoundary>
-        </div>
-      </SnackbarProvider>
-    </RouterProvider>
-  );
-}

entrypoints/rightClickRestorer.content.ts

@@ -1,194 +0,0 @@
-import { MessageAction, onMessage, sendMessage } from '@/utils/messages';
-
-const BADGE_ID = 'testing-tools-right-click-restorer-badge';
-const BADGE_STYLE_ID = 'testing-tools-right-click-restorer-badge-style';
-
-let isRestored = false;
-
-function updateBadge(): void {
-  const badge = document.getElementById(BADGE_ID);
-  if (badge) {
-    badge.style.opacity = isRestored ? '1' : '0';
-  }
-}
-
-function createBadge(): void {
-  if (document.getElementById(BADGE_ID)) return;
-
-  if (!document.getElementById(BADGE_STYLE_ID)) {
-    const style = document.createElement('style');
-    style.id = BADGE_STYLE_ID;
-    style.textContent = `
-      #${BADGE_ID} {
-        position: fixed;
-        bottom: 16px;
-        right: 16px;
-        z-index: 2147483646;
-        padding: 6px 12px;
-        background: #2e7d32;
-        color: #ffffff;
-        border-radius: 20px;
-        font-size: 12px;
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
-        opacity: 0;
-        transition: opacity 0.2s ease-out;
-        pointer-events: none;
-        user-select: none;
-      }
-      @media (prefers-color-scheme: dark) {
-        #${BADGE_ID} {
-          background: #4caf50;
-          box-shadow: 0 2px 8px rgba(0,0,0,0.4);
-        }
-      }
-    `;
-    document.head.appendChild(style);
-  }
-
-  const badge = document.createElement('div');
-  badge.id = BADGE_ID;
-  badge.textContent = '\u53f3\u952e\u5df2\u89e3\u9501';
-  document.body.appendChild(badge);
-}
-
-/* ======================== Main World 注入 ======================== */
-
-async function injectMainWorldScript(): Promise<void> {
-  try {
-    const response = await sendMessage(MessageAction.INJECT_MAIN_WORLD_SCRIPT);
-    if (!response.success) {
-      console.error('[RightClickRestorer] Background injection failed:', response.message);
-    }
-  } catch (err) {
-    console.error('[RightClickRestorer] Failed to request main world injection:', err);
-  }
-}
-
-/* ======================== Isolated World 事件拦截 ======================== */
-
-function installEventIntercepts(): void {
-  window.addEventListener(
-    'contextmenu',
-    (e) => {
-      if (!isRestored) return;
-      e.stopPropagation();
-    },
-    true,
-  );
-
-  // 部分网站在 mousedown 阶段阻止 contextmenu
-  window.addEventListener(
-    'mousedown',
-    (e) => {
-      if (!isRestored) return;
-      if (e.button === 2 || (e.buttons & 2) !== 0) {
-        e.stopPropagation();
-      }
-    },
-    true,
-  );
-}
-
-/* ======================== 遮罩层穿透 ======================== */
-
-const MEDIA_TAGS = new Set(['IMG', 'VIDEO', 'CANVAS', 'SVG']);
-
-function initMousePenetration(): void {
-  window.addEventListener(
-    'mousedown',
-    (e) => {
-      if (!isRestored || e.button !== 2) return;
-
-      const elements = document.elementsFromPoint(e.clientX, e.clientY);
-      if (!elements.length) return;
-
-      let targetMedia: HTMLElement | null = null;
-      for (const el of elements) {
-        if (MEDIA_TAGS.has(el.tagName)) {
-          targetMedia = el as HTMLElement;
-          break;
-        }
-      }
-
-      if (!targetMedia) return;
-
-      const modified: Array<{ el: HTMLElement; original: string | null }> = [];
-      let foundMedia = false;
-
-      for (const el of elements) {
-        const htmlEl = el as HTMLElement;
-
-        if (el === targetMedia) {
-          foundMedia = true;
-          const original = htmlEl.style.pointerEvents || null;
-          htmlEl.style.setProperty('pointer-events', 'all', 'important');
-          modified.push({ el: htmlEl, original });
-          continue;
-        }
-
-        if (!foundMedia) {
-          const original = htmlEl.style.pointerEvents || null;
-          htmlEl.style.setProperty('pointer-events', 'none', 'important');
-          modified.push({ el: htmlEl, original });
-        }
-      }
-
-      setTimeout(() => {
-        for (const { el, original } of modified) {
-          if (original === null || original === '') {
-            el.style.removeProperty('pointer-events');
-          } else {
-            el.style.pointerEvents = original;
-          }
-        }
-      }, 300);
-    },
-    true,
-  );
-}
-
-/* ======================== 激活保护 ======================== */
-
-async function activateProtection(): Promise<void> {
-  if (isRestored) return;
-
-  await injectMainWorldScript();
-
-  // 再次检查，防止并发调用导致重复注册
-  if (isRestored) return;
-
-  installEventIntercepts();
-  initMousePenetration();
-
-  isRestored = true;
-  updateBadge();
-}
-
-/* ======================== 消息通信 ======================== */
-
-function initMessaging(): void {
-  onMessage(MessageAction.RESTORE_RIGHT_CLICK, async () => {
-    await activateProtection();
-    return { success: true, restored: isRestored };
-  });
-
-  onMessage(MessageAction.QUERY_RIGHT_CLICK_STATUS, () => {
-    return { success: true, restored: isRestored };
-  });
-}
-
-/* ======================== 入口 ======================== */
-
-export default defineContentScript({
-  matches: ['<all_urls>'],
-  runAt: 'document_start',
-  main() {
-    if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', createBadge, { once: true });
-    } else {
-      createBadge();
-    }
-    initMessaging();
-  },
-});

eslint.config.ts

@@ -5,16 +5,13 @@ import reactPlugin from 'eslint-plugin-react';
 import globals from 'globals';
 
 export default tseslint.config(
-  // 1. 全局物理隔离：彻底掐灭对构建产物与配置本身的干扰
   {
     ignores: ['dist', '.output', '.wxt', 'node_modules', 'eslint.config.ts', 'eslint.config.js'],
   },
 
-  // 2. 注入 JavaScript 与 TypeScript 的官方大师级推荐规则集
   js.configs.recommended,
   ...tseslint.configs.recommended,
 
-  // 3. 针对测试文件专属沙箱：解耦强类型死锁，放行 any，容忍未消费变量
   {
     files: ['**/__tests__/**', '**/*.test.{ts,tsx}', '**/*.spec.{ts,tsx}', 'setupTests.ts'],
     rules: {
@@ -26,16 +23,8 @@ export default tseslint.config(
     },
   },
 
-  // 4. 核心业务全受控大管线（Hooks, Entrypoints, Components 统一护航）
   {
-    files: [
-      'hooks/**/*.{ts,tsx}',
-      'entrypoints/**/*.{ts,tsx}',
-      'pages/**/*.{ts,tsx}',
-      'utils/**/*.{ts,tsx}',
-      'components/**/*.{ts,tsx}',
-      'services/**/*.{ts,tsx}',
-    ],
+    files: ['src/**/*.{ts,tsx}'],
     ignores: ['**/__tests__/**', '**/*.test.{ts,tsx}', '**/*.spec.{ts,tsx}'],
 
     languageOptions: {
@@ -44,17 +33,13 @@ export default tseslint.config(
         ...globals.browser,
         ...globals.node,
       },
-      // 💡 修复点 1（史诗级治愈）：废除脆弱的 project 硬编码路径！
-      // 拥抱 typescript-eslint 官方推荐的 projectService 常驻动态类型调度中枢。
-      // 它会在内存中全自动、流式为所有新建、悬空或暂存文件分配编译上下文，
-      // 彻底终结 "file is not included in any tsconfig" 的全量崩溃黑洞！
+
       parserOptions: {
         projectService: true,
         tsconfigRootDir: import.meta.dirname,
       },
     },
 
-    // 挂载插件沙箱
     plugins: {
       react: reactPlugin,
       'react-hooks': reactHooks,
@@ -66,24 +51,19 @@ export default tseslint.config(
       },
     },
 
-    // 💡 修复点 2：高精对齐 React 19 / JSX Runtime 的全量生产质检规则大闸
     rules: {
-      // 激活 react-hooks 官方推荐规则
       ...reactHooks.configs.recommended.rules,
-      // 激活 react 官方精选规则（排除旧版 React 必须手动 import 的历史包袱）
       ...reactPlugin.configs.recommended.rules,
       ...reactPlugin.configs['jsx-runtime'].rules,
 
       'react/prop-types': 'off',
 
-      // 清洗原生未消费变量冲突，统一交由 TS 高阶哨兵接管
       'no-unused-vars': 'off',
       '@typescript-eslint/no-unused-vars': [
         'warn',
         { argsIgnorePattern: '^_', varsIgnorePattern: '^_' },
       ],
 
-      // 彻底关闭老旧的 JSX 作用域检查，全面契合 React 19 核心美学
       'react/react-in-jsx-scope': 'off',
     },
   },

i18n/README.md

@@ -1,61 +0,0 @@
-# i18n/
-
-国际化资源目录，管理多语言翻译和 i18next 初始化配置。
-
-## 目录结构
-
-```
-i18n/
-├── index.ts                    # i18next 初始化配置
-└── locales/
-    ├── zh/                     # 中文翻译（默认语言）
-    │   ├── common.json         # 通用文案
-    │   ├── features.json       # 功能模块标题和描述
-    │   ├── timestamp.json      # 时间戳工具翻译
-    │   ├── storageCleaner.json # 存储清理工具翻译
-    │   ├── qrCode.json         # 二维码工具翻译
-    │   ├── textStatistics.json # 文本统计工具翻译
-    │   ├── jwt.json            # JWT 工具翻译
-    │   ├── jsonDiff.json       # JSON 差异工具翻译
-    │   ├── jsonFormat.json     # JSON 格式化工具翻译
-    │   ├── base64Converter.json
-    │   ├── markdownToHtml.json
-    │   ├── htmlToMarkdown.json
-    │   └── rightClickRestorer.json
-    └── en/                     # 英文翻译（结构同上）
-        └── ...
-```
-
-## index.ts
-
-i18next 初始化配置：
-
-- 同步加载 `common` 和 `features` 核心命名空间
-- 自定义 `chromeStorage` 语言检测器，从 Chrome Storage 读取语言偏好
-- `normalizeLanguage()` 将任意语言标识归一化为 `zh` 或 `en`
-- 语言变更时同步更新 Day.js 本地化和 localStorage 快照
-
-## 翻译键格式
-
-- 命名空间：`common`（默认）、`features`、各功能独立命名空间
-- 键格式：`namespace:key`（如 `features:timestamp.title`、`timestamp:unitMs`）
-
-## 使用方式
-
-```tsx
-// 页面组件 — 懒加载翻译
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
-const { t } = useLazyTranslation('timestamp');
-t('timestamp:title');
-
-// 全局组件 — 直接使用
-import { useTranslation } from 'react-i18next';
-const { t } = useTranslation(['common', 'features']);
-t('common:settings');
-```
-
-## 添加新翻译
-
-1. 在 `locales/{zh,en}/features.json` 添加功能标题和描述
-2. 创建 `locales/{zh,en}/{功能名}.json` 添加功能专属翻译
-3. 在 `utils/useLazyTranslation.ts` 的 `localeModules` 中注册新命名空间

i18n/index.ts

@@ -1,144 +0,0 @@
-import i18n from 'i18next';
-import { initReactI18next } from 'react-i18next';
-import type { CustomDetector } from 'i18next-browser-languagedetector'; // 💡 1. 引入官方强类型探测器接口
-import LanguageDetector from 'i18next-browser-languagedetector';
-import { storageUtil } from '@/utils/chromeStorage';
-import dayjs from 'dayjs';
-
-// 导入 Day.js 本地化语言包
-import 'dayjs/locale/zh-cn';
-
-// 同步加载全局核心命名空间
-import commonZh from './locales/zh/common.json';
-import featuresZh from './locales/zh/features.json';
-import commonEn from './locales/en/common.json';
-import featuresEn from './locales/en/features.json';
-
-const resources = {
-  zh: {
-    common: commonZh,
-    features: featuresZh,
-  },
-  en: {
-    common: commonEn,
-    features: featuresEn,
-  },
-};
-
-export const SUPPORTED_LANGUAGES = ['zh', 'en'] as const;
-export type SupportedLanguage = (typeof SUPPORTED_LANGUAGES)[number];
-
-const LANGUAGE_STORAGE_KEY = 'app/language';
-const LANGUAGE_SNAPSHOT_KEY = 'snapshot/app/language';
-
-/**
- * 将任意语言标识归一化为受支持的核心代码
- */
-export const normalizeLanguage = (lng: string): SupportedLanguage => {
-  if (!lng) return 'en';
-  return lng.toLowerCase().startsWith('zh') ? 'zh' : 'en';
-};
-
-/**
- * 严格校验语言安全边界
- */
-const isValidLanguage = (lng: unknown): lng is SupportedLanguage => {
-  return typeof lng === 'string' && (SUPPORTED_LANGUAGES as readonly string[]).includes(lng);
-};
-
-/**
- * 同步从 localStorage 获取语言快照（消除异步闪烁）
- */
-const getSyncLanguageSnapshot = (): SupportedLanguage | null => {
-  try {
-    const val = localStorage.getItem(LANGUAGE_SNAPSHOT_KEY);
-    if (!val) return null;
-    const parsed = JSON.parse(val) as unknown;
-    return isValidLanguage(parsed) ? parsed : null;
-  } catch (error) {
-    console.error('[i18n] Failed to parse sync language snapshot from localStorage:', error);
-    return null;
-  }
-};
-
-// 💡 2. 强类型接口重塑：显式绑定 CustomDetector 类型，
-// 告诉 TS 编译器这些方法将被全局 Languagedetector 框架隐式调用，彻底治愈“未使用函数”报错！
-const chromeStorageDetector: CustomDetector = {
-  name: 'chromeStorage',
-  lookup() {
-    return undefined;
-  },
-  cacheUserLanguage(lng: string) {
-    const target = normalizeLanguage(lng);
-    // 💡 修复点：对异步写盘操作追加 void 算子或 catch，吞掉 Promise 被忽略警告
-    storageUtil.set(LANGUAGE_STORAGE_KEY, target).catch((err) => {
-      console.error('[i18n Detector Error] Failed to write back language state:', err);
-    });
-  },
-};
-
-const detector = new LanguageDetector();
-detector.addDetector(chromeStorageDetector);
-
-const syncLng = getSyncLanguageSnapshot();
-
-// 💡 3. 修复点：对 i18n.init() 返回的异步 Promise 前方追加 void 斩断依赖链，放行编译
-void i18n
-  .use(detector)
-  .use(initReactI18next)
-  .init({
-    resources,
-    fallbackLng: 'en',
-    lng: syncLng || undefined,
-    ns: ['common', 'features'],
-    defaultNS: 'common',
-    debug: false,
-    interpolation: {
-      escapeValue: false,
-    },
-    detection: {
-      order: ['chromeStorage', 'navigator'],
-      caches: ['chromeStorage'],
-    },
-  });
-
-// 监听语言变更
-i18n.on('languageChanged', (lng) => {
-  const normalizedLng = normalizeLanguage(lng);
-  dayjs.locale(normalizedLng === 'zh' ? 'zh-cn' : 'en');
-  localStorage.setItem(LANGUAGE_SNAPSHOT_KEY, JSON.stringify(normalizedLng));
-});
-
-// 初始化时从长期异步存储中恢复校准
-storageUtil
-  .get(LANGUAGE_STORAGE_KEY)
-  .then((lng) => {
-    const rawTargetLng = lng || syncLng;
-
-    if (!rawTargetLng) {
-      const initialLng = normalizeLanguage(i18n.language);
-
-      // 💡 修复点：对初始化同步写盘追加安全的 Promise .catch() 异常隔离防护罩
-      storageUtil.set(LANGUAGE_STORAGE_KEY, initialLng).catch((err) => {
-        console.error('[i18n Init Error] Persistent sync collapsed:', err);
-      });
-
-      if (initialLng !== normalizeLanguage(i18n.language)) {
-        // 💡 修复点：对 changeLanguage 异步微任务进行显式 void 断链安全隔离
-        void i18n.changeLanguage(initialLng);
-      }
-      return;
-    }
-
-    const targetLng = normalizeLanguage(String(rawTargetLng));
-
-    if (isValidLanguage(targetLng) && targetLng !== normalizeLanguage(i18n.language)) {
-      // 💡 修复点：对 changeLanguage 异步微任务进行显式 void 断链安全隔离
-      void i18n.changeLanguage(targetLng);
-    }
-  })
-  .catch((err) => {
-    console.error('[i18n Context Error] Async local storage lookup collapsed:', err);
-  });
-
-export default i18n;

i18n/locales/en/base64Converter.json

@@ -1,37 +0,0 @@
-{
-  "pageTitle": "Base64 Converter",
-  "pageSubtitle": "Encode and decode text, files, and images with Base64",
-  "textMode": "Text",
-  "fileMode": "File",
-  "imageMode": "Image",
-  "encode": "Encode",
-  "decode": "Decode",
-  "clear": "Clear",
-  "textInputPlaceholder": "Enter text to encode to Base64...",
-  "base64InputPlaceholder": "Enter Base64 string to decode...",
-  "base64Output": "Base64 Output",
-  "textOutput": "Decoded Text Output",
-  "copyRaw": "Copy Raw Base64",
-  "copyDataUri": "Copy Data URI",
-  "clickOrDropToFile": "Click or drop a file here",
-  "clickOrDropToImage": "Click or drop an image here",
-  "clickOrDropToReplace": "Click or drop to replace the file",
-  "maxFileSize": "Maximum file size: {{max}}",
-  "supportedFormats": "Supports PNG, JPG, WEBP, GIF, BMP, SVG, etc.",
-  "fileSizeExceeded": "File size exceeds the limit (max {{max}})",
-  "unsupportedImageType": "Unsupported image format",
-  "conversionFailed": "Conversion failed",
-  "originalSize": "Original Size",
-  "encodedSize": "Encoded Size",
-  "invalidBase64": "Invalid Base64 string",
-  "binaryDataDetected": "Input appears to be binary data (e.g. an image). Please switch to the Image tab.",
-  "imageDataUriHint": "Detected an image data URI — please use the Image tab to decode it.",
-  "switchToImageMode": "Switch to Image mode",
-  "download": "Download",
-  "decodedFileName": "Decoded file name",
-  "decodeBase64Placeholder": "Enter Base64 or data URI to decode...",
-  "decodedFileOutput": "Decoded File",
-  "decodedImageOutput": "Decoded Image",
-  "inferredMimeType": "Inferred MIME type",
-  "decodedSize": "Decoded size"
-}

i18n/locales/en/common.json

@@ -1,50 +0,0 @@
-{
-  "appName": "Testing Tools",
-  "buttons": {
-    "save": "Save",
-    "cancel": "Cancel",
-    "confirm": "Confirm",
-    "copy": "Copy",
-    "clear": "Clear",
-    "refresh": "Refresh",
-    "toggleLanguage": "Switch Language",
-    "toggleTheme": "Toggle theme",
-    "themeMode": {
-      "light": "Switch to dark mode",
-      "dark": "Switch to system mode",
-      "system": "Switch to light mode"
-    },
-    "search": "Search tools...",
-    "back": "Back",
-    "clearSearch": "Clear search",
-    "recentSearch": "Recent search",
-    "noResults": "No tools found",
-    "openInTab": "Open in tab",
-    "settings": "Settings"
-  },
-  "messages": {
-    "copySuccess": "Copied to clipboard",
-    "copyError": "Copy failed",
-    "copyEmpty": "Nothing to copy"
-  },
-  "errorBoundary": {
-    "title": "Oops, something went wrong",
-    "description": "The app encountered an unexpected error. You can try refreshing the page or resetting the app.",
-    "refresh": "Refresh App",
-    "retry": "Retry"
-  },
-  "pageErrorBoundary": {
-    "title": "This feature has encountered an error",
-    "description": "An internal script error occurred while loading or rendering this page. You can try again or switch to another tool from the navigation menu."
-  },
-  "router": {
-    "notFound": "Page Not Found",
-    "notFoundDescription": "This feature is not available or has been removed in the current runtime ({{entryPointType}})."
-  },
-  "textInputArea": {
-    "clear": "Clear",
-    "copyContent": "Copy content",
-    "cleared": "Cleared",
-    "placeholder": "placeholder text"
-  }
-}

i18n/locales/en/features.json

@@ -1,45 +0,0 @@
-{
-  "dashboard": {
-    "title": "Dashboard"
-  },
-  "timestamp": {
-    "title": "Timestamp",
-    "description": "Unix millisecond conversion and formatting"
-  },
-  "storageCleaner": {
-    "title": "Storage Cleaner",
-    "description": "Clean cache, cookies, and local storage"
-  },
-  "qrCode": {
-    "title": "QR Code Tools",
-    "description": "Generate QR code for the selected URL"
-  },
-  "textStatistics": {
-    "title": "Text Statistics",
-    "description": "Real-time analysis of text characters, words, and bytes"
-  },
-  "jwt": {
-    "title": "JWT Parser",
-    "description": "JSON Web Token decoding and viewing"
-  },
-  "jsonDiff": {
-    "title": "JSON Tools",
-    "description": "Diff, format, YAML/TOML conversion, and minify"
-  },
-  "base64Converter": {
-    "title": "Base64 Converter",
-    "description": "Encode text, files, and images to Base64"
-  },
-  "markdownToHtml": {
-    "title": "Markdown to HTML",
-    "description": "Real-time Markdown conversion and HTML preview"
-  },
-  "htmlToMarkdown": {
-    "title": "HTML to Markdown",
-    "description": "Real-time HTML conversion and Markdown preview"
-  },
-  "rightClickRestorer": {
-    "title": "Right Click Restorer",
-    "description": "Detect and restore disabled browser right-click menus"
-  }
-}

i18n/locales/en/htmlToMarkdown.json

@@ -1,16 +0,0 @@
-{
-  "pageTitle": "HTML to Markdown",
-  "pageSubtitle": "Convert HTML to Markdown in real-time",
-  "splitMode": "Split",
-  "previewMode": "Preview",
-  "markdownMode": "Markdown",
-  "clear": "Clear",
-  "inputLabel": "HTML Input",
-  "previewLabel": "Markdown Preview",
-  "markdownOutputLabel": "Markdown Output",
-  "inputPlaceholder": "Enter your HTML content here...",
-  "charCount": "{{count}} chars",
-  "copyMarkdown": "Copy Markdown",
-  "download": "Download",
-  "emptyHint": "Enter HTML content to see the conversion result"
-}

i18n/locales/en/jsonDiff.json

@@ -1,22 +0,0 @@
-{
-  "pageTitle": "JSON Diff",
-  "pageSubtitle": "Compare differences between two JSON values",
-  "leftPlaceholder": "Enter the original JSON...",
-  "rightPlaceholder": "Enter the target JSON...",
-  "leftLabel": "Original JSON",
-  "rightLabel": "Target JSON",
-  "compareButton": "Compare",
-  "clearButton": "Clear",
-  "sideBySideMode": "Side by side",
-  "unifiedMode": "Unified",
-  "previousDiff": "Previous",
-  "nextDiff": "Next",
-  "noDiffs": "No differences",
-  "diffCount": "{{count}} differences",
-  "invalidJson": "Invalid JSON format",
-  "emptyHint": "Enter JSON on both sides and click Compare",
-  "fixErrorHint": "Fix the JSON syntax errors above to enable live comparison",
-  "added": "Added",
-  "removed": "Removed",
-  "modified": "Modified"
-}

i18n/locales/en/jsonFormat.json

@@ -1,42 +0,0 @@
-{
-  "formatTitle": "JSON Formatter",
-  "formatSubtitle": "Beautify and format JSON data",
-  "inputPlaceholder": "Enter JSON to format...",
-  "formatButton": "Format",
-  "clearButton": "Clear",
-  "sortKeys": "Sort Keys",
-  "sortKeysTooltip": "Sort JSON object keys in alphabetical order",
-  "indentSize": "Indent",
-  "indentSpaces": "{{count}} spaces",
-  "outputLabel": "Formatted Result",
-  "copySuccess": "Copied",
-  "copyFail": "Copy failed",
-  "noContent": "Nothing to copy",
-  "invalidJson": "Invalid JSON format",
-  "emptyHint": "Enter JSON and click Format",
-  "fixErrorHint": "Fix the JSON syntax errors above to enable live formatting",
-  "originalSize": "Original size",
-  "formattedSize": "Formatted size",
-  "diffMode": "Diff",
-  "formatMode": "Format",
-  "yamlMode": "YAML",
-  "tomlMode": "TOML",
-  "minifyMode": "Minify",
-  "yamlTitle": "JSON to YAML",
-  "yamlSubtitle": "Convert JSON data to YAML format",
-  "yamlModeInputPlaceholder": "Enter JSON to convert...",
-  "yamlModeOutputLabel": "YAML Result",
-  "yamlModeEmptyHint": "Enter JSON and click Convert",
-  "convertButton": "Convert",
-  "tomlTitle": "JSON to TOML",
-  "tomlSubtitle": "Convert JSON data to TOML format",
-  "tomlModeInputPlaceholder": "Enter JSON to convert...",
-  "tomlModeOutputLabel": "TOML Result",
-  "tomlModeEmptyHint": "Enter JSON and click Convert",
-  "minifyTitle": "JSON Minifier",
-  "minifySubtitle": "Compress JSON into a compact single-line format",
-  "minifyModeInputPlaceholder": "Enter JSON to minify...",
-  "minifyModeOutputLabel": "Minified Result",
-  "minifyModeEmptyHint": "Enter JSON and click Minify",
-  "minifyButton": "Minify"
-}

i18n/locales/en/jwt.json

@@ -1,17 +0,0 @@
-{
-  "pageTitle": "JWT Parser",
-  "pageSubtitle": "JSON Web Token decoding and viewing",
-  "placeholder": "Paste Encoded JWT here...",
-  "headerTitle": "HEADER: Algorithm & Token Type",
-  "payloadTitle": "PAYLOAD: Data",
-  "signatureTitle": "Signature",
-  "noSignature": "No Signature",
-  "invalidFormat": "Unable to parse",
-  "errors": {
-    "invalidBase64String": "Invalid base64url string",
-    "failedToDecode": "Failed to decode base64url: ",
-    "invalidFormat": "Invalid JWT format: expected 3 parts separated by .",
-    "parseHeaderFailed": "Failed to parse Header: ",
-    "parsePayloadFailed": "Failed to parse Payload: "
-  }
-}

i18n/locales/en/markdownToHtml.json

@@ -1,18 +0,0 @@
-{
-  "pageTitle": "Markdown to HTML",
-  "pageSubtitle": "Convert Markdown to HTML in real-time with preview",
-  "splitMode": "Split",
-  "previewMode": "Preview",
-  "htmlMode": "HTML",
-  "clear": "Clear",
-  "print": "Print",
-  "download": "Download",
-  "inputLabel": "Markdown Input",
-  "previewLabel": "Live Preview",
-  "htmlOutputLabel": "HTML Output",
-  "inputPlaceholder": "Enter your Markdown content here...",
-  "charCount": "{{count}} chars",
-  "copyHtml": "Copy HTML",
-  "downloadSuccess": "File downloaded successfully",
-  "printSuccess": "Print window opened"
-}

i18n/locales/en/qrCode.json

@@ -1,48 +0,0 @@
-{
-  "pageTitle": "QR Code Tools",
-  "pageSubtitle": "Generate and parse QR codes",
-
-  "generateMode": "Generate QR Code",
-  "parseMode": "Parse QR Code",
-
-  "urlToQr": "Text to QR Code",
-  "qrToUrl": "QR Code to Text",
-
-  "urlInputLabel": "Enter URL or Text",
-  "urlInputPlaceholder": "Enter URL or text content, QR code will be generated automatically",
-  "generateButton": "Generate QR Code",
-  "generating": "Generating...",
-
-  "qrCodeWillShow": "QR code will be shown here",
-  "downloadButton": "Download QR Code",
-  "copyQrButton": "Copy QR Code Image",
-
-  "qrCodeSuccess": "QR code generated successfully",
-  "qrCodeDownloadSuccess": "QR code downloaded successfully",
-  "qrCodeCopySuccess": "QR code copied to clipboard",
-
-  "selectImage": "Please select a QR code image",
-  "parseSuccess": "QR code parsed successfully",
-  "noQrDetected": "No QR code detected, please ensure the image is clear and contains a QR code",
-  "parseError": "Failed to parse QR code, please try again",
-  "generateError": "Failed to generate QR code, please check the input",
-  "copyError": "Copy failed, please try again",
-
-  "imagePasted": "Image pasted, parsing...",
-  "imagePasteError": "Failed to paste image, please try again",
-  "imageCleared": "Image cleared",
-  "clickToUpload": "Click, drag, or paste to upload QR code image",
-  "supportFormats": "Supports PNG, JPG, WEBP, Base64 formats",
-
-  "parseButton": "Parse QR Code",
-  "parsing": "Parsing...",
-  "resultLabel": "Parsing Result",
-  "copyTooltip": "Copy",
-
-  "enterUrlError": "Please enter URL or text",
-  "clickToChange": "Click to change image",
-
-  "pasteHint": "Supports Ctrl+V to paste images or Base64 strings",
-  "autoGenerateHint": "QR code will be generated automatically after input",
-  "autoParseHint": "QR code will be parsed automatically after upload"
-}

i18n/locales/en/rightClickRestorer.json

@@ -1,13 +0,0 @@
-{
-  "title": "Right Click Restorer",
-  "description": "Detect and restore disabled browser right-click menus",
-  "loading": "Loading...",
-  "currentDomain": "Current Domain",
-  "statusLocked": "Locked",
-  "statusUnlocked": "Unlocked",
-  "unsupported": "Unsupported",
-  "unsupportedDesc": "The current page is a browser internal or extension page. Right-click unlock is not available. Please switch to a regular webpage.",
-  "unlockDesc": "Click the button below to temporarily unlock the right-click menu for the current website. You will need to unlock again after refreshing the page.",
-  "unlockBtn": "Unlock Right Click",
-  "alreadyUnlocked": "Right Click Unlocked"
-}

i18n/locales/en/storageCleaner.json

@@ -1,34 +0,0 @@
-{
-  "pageTitle": "Storage Cleaner",
-  "pageSubtitle": "Clear cache, cookies, and local storage",
-  "loading": "Loading...",
-  "initializing": "Reading site data...",
-  "occupied": "Occupied {{size}}",
-  "cleaning": "Cleaning...",
-  "cleanNow": "Clean Now",
-  "autoRefresh": "Auto refresh page after cleaning",
-  "selectAll": "Select all items",
-  "cleanSuccess": "Cleaning complete",
-  "cleanError": "Cleaning failed",
-  "noData": "No data",
-  "countUnit": "items",
-  "errorNoTab": "Unable to get current tab",
-  "errorRestricted": "Storage cleaning is not supported on this page",
-  "cleanSuccessReload": "Cleaning successful, reloading page...",
-  "errorStandardOnly": "Storage cleaning only works on standard web pages",
-  "confirmTitle": "Confirm Clear Data?",
-  "confirmDesc": "You are about to permanently delete the following selected storage items from the current page.",
-  "irreversible": "This action is irreversible",
-  "confirmAction": "Confirm Clear",
-  "cleanedSummary": "Cleaned {{items}}",
-  "noDataToClean": "No storage data found to clean",
-  "partialFailure": "Some items failed to clean",
-  "options": {
-    "localStorage": "Local Storage",
-    "sessionStorage": "Session Storage",
-    "indexedDB": "IndexedDB",
-    "cookies": "Cookies",
-    "cacheStorage": "Cache Storage",
-    "serviceWorkers": "Service Workers"
-  }
-}

i18n/locales/en/textStatistics.json

@@ -1,9 +0,0 @@
-{
-  "pageTitle": "Text Statistics",
-  "pageSubtitle": "Real-time analysis of characters, words, lines, and byte size",
-  "placeholder": "Type or paste text here...",
-  "characters": "Characters",
-  "words": "Words",
-  "lines": "Lines",
-  "bytes": "Byte Size"
-}

i18n/locales/en/timestamp.json

@@ -1,27 +0,0 @@
-{
-  "pageTitle": "Timestamp Conversion",
-  "pageSubtitle": "Unix millisecond conversion and formatting",
-  "tsToDate": "Timestamp → Date",
-  "dateToTs": "Date → Timestamp",
-  "placeholderTs": "Enter timestamp...",
-  "placeholderDate": "YYYY-MM-DD HH:mm:ss",
-  "unitMs": "Millisecond (ms)",
-  "unitS": "Second (s)",
-  "convertButton": "Convert Now",
-  "currentTs": "Current Timestamp",
-  "useNowTooltip": "Use this value",
-  "copyTsTooltip": "Copy timestamp",
-  "usedSuccess": "Using current timestamp",
-  "resultLabel": "Conversion Result",
-  "copyResultTooltip": "Copy result",
-  "relativeTime": "Relative Time",
-  "iso8601": "ISO 8601",
-  "utcTime": "UTC Time",
-  "copyTooltip": "Copy",
-  "resultEmpty": "Enter a value and click convert",
-  "errors": {
-    "invalidNumber": "Invalid number",
-    "invalidTimestamp": "Invalid timestamp",
-    "invalidFormat": "Format error"
-  }
-}

i18n/locales/zh/base64Converter.json

@@ -1,37 +0,0 @@
-{
-  "pageTitle": "Base64 转换器",
-  "pageSubtitle": "文本、文件与图像的 Base64 编码与解码",
-  "textMode": "文本",
-  "fileMode": "文件",
-  "imageMode": "图像",
-  "encode": "编码",
-  "decode": "解码",
-  "clear": "清空",
-  "textInputPlaceholder": "输入需要编码为 Base64 的文本...",
-  "base64InputPlaceholder": "输入需要解码的 Base64 字符串...",
-  "base64Output": "Base64 编码结果",
-  "textOutput": "解码文本结果",
-  "copyRaw": "复制纯 Base64",
-  "copyDataUri": "复制 Data URI",
-  "clickOrDropToFile": "点击或拖拽文件到此处",
-  "clickOrDropToImage": "点击或拖拽图像到此处",
-  "clickOrDropToReplace": "点击或拖拽以替换文件",
-  "maxFileSize": "最大文件大小：{{max}}",
-  "supportedFormats": "支持 PNG、JPG、WEBP、GIF、BMP、SVG 等格式",
-  "fileSizeExceeded": "文件大小超出限制（最大 {{max}}）",
-  "unsupportedImageType": "不支持的图像格式",
-  "conversionFailed": "转换失败",
-  "originalSize": "原始大小",
-  "encodedSize": "编码大小",
-  "invalidBase64": "Base64 字符串无效",
-  "binaryDataDetected": "输入似乎是二进制数据（如图片）。请切换到「图像」选项卡。",
-  "imageDataUriHint": "检测到图片的 data URI，请使用「图像」选项卡进行解码。",
-  "switchToImageMode": "切换到图像模式",
-  "download": "下载",
-  "decodedFileName": "解码后文件名",
-  "decodeBase64Placeholder": "输入需要解码的 Base64 或 data URI...",
-  "decodedFileOutput": "解码文件",
-  "decodedImageOutput": "解码图像",
-  "inferredMimeType": "推断的 MIME 类型",
-  "decodedSize": "解码大小"
-}

i18n/locales/zh/common.json

@@ -1,50 +0,0 @@
-{
-  "appName": "测试工具",
-  "buttons": {
-    "save": "保存",
-    "cancel": "取消",
-    "confirm": "确认",
-    "copy": "复制",
-    "clear": "清理",
-    "refresh": "刷新",
-    "toggleLanguage": "切换语言",
-    "toggleTheme": "切换主题",
-    "themeMode": {
-      "light": "切换到深色模式",
-      "dark": "切换到系统模式",
-      "system": "切换到浅色模式"
-    },
-    "search": "搜索工具...",
-    "back": "返回",
-    "clearSearch": "清除搜索",
-    "recentSearch": "最近搜索",
-    "noResults": "未找到相关工具",
-    "openInTab": "在标签页打开",
-    "settings": "设置"
-  },
-  "messages": {
-    "copySuccess": "已复制到剪贴板",
-    "copyError": "复制失败",
-    "copyEmpty": "无内容可复制"
-  },
-  "errorBoundary": {
-    "title": "糟糕，出了点问题",
-    "description": "应用遇到了一些意外错误。您可以尝试刷新页面或重置应用。",
-    "refresh": "刷新应用",
-    "retry": "重新尝试"
-  },
-  "pageErrorBoundary": {
-    "title": "该功能运行异常",
-    "description": "该页面在加载或渲染时遇到了内部脚本错误。您可以尝试重试，或者通过导航菜单切换到其他工具。"
-  },
-  "router": {
-    "notFound": "页面未找到",
-    "notFoundDescription": "该功能在当前运行环境（{{entryPointType}}）下不可用或已被移除。"
-  },
-  "textInputArea": {
-    "clear": "清空",
-    "copyContent": "复制内容",
-    "cleared": "已清空",
-    "placeholder": "请输入文本"
-  }
-}

i18n/locales/zh/features.json

@@ -1,45 +0,0 @@
-{
-  "dashboard": {
-    "title": "仪表盘"
-  },
-  "timestamp": {
-    "title": "时间戳",
-    "description": "Unix 毫秒数转换与格式化"
-  },
-  "storageCleaner": {
-    "title": "存储清理",
-    "description": "清理缓存、Cookies 及本地存储"
-  },
-  "qrCode": {
-    "title": "二维码工具",
-    "description": "生成当前选中的 URL 的二维码"
-  },
-  "textStatistics": {
-    "title": "文本统计",
-    "description": "实时分析文本字符、单词及字节"
-  },
-  "jwt": {
-    "title": "JWT 解析",
-    "description": "JSON Web Token 解码与查看"
-  },
-  "jsonDiff": {
-    "title": "JSON 工具",
-    "description": "差异比较、格式化、YAML/TOML 转换及压缩"
-  },
-  "base64Converter": {
-    "title": "Base64 转换器",
-    "description": "文本、文件与图像的 Base64 编码转换"
-  },
-  "markdownToHtml": {
-    "title": "Markdown 转 HTML",
-    "description": "实时 Markdown 转换与 HTML 预览"
-  },
-  "htmlToMarkdown": {
-    "title": "HTML 转 Markdown",
-    "description": "实时 HTML 转换与 Markdown 预览"
-  },
-  "rightClickRestorer": {
-    "title": "右键恢复",
-    "description": "检测并恢复被网站禁用的浏览器右键菜单"
-  }
-}

i18n/locales/zh/htmlToMarkdown.json

@@ -1,16 +0,0 @@
-{
-  "pageTitle": "HTML 转 Markdown",
-  "pageSubtitle": "实时将 HTML 转换为 Markdown 格式",
-  "splitMode": "分屏",
-  "previewMode": "预览",
-  "markdownMode": "Markdown",
-  "clear": "清空",
-  "inputLabel": "HTML 输入",
-  "previewLabel": "Markdown 预览",
-  "markdownOutputLabel": "Markdown 输出",
-  "inputPlaceholder": "在此输入 HTML 内容...",
-  "charCount": "{{count}} 字符",
-  "copyMarkdown": "复制 Markdown",
-  "download": "下载",
-  "emptyHint": "输入 HTML 内容以查看转换结果"
-}

i18n/locales/zh/jsonDiff.json

@@ -1,22 +0,0 @@
-{
-  "pageTitle": "JSON 差异比较",
-  "pageSubtitle": "对比两个 JSON 数据的差异",
-  "leftPlaceholder": "输入原始 JSON...",
-  "rightPlaceholder": "输入目标 JSON...",
-  "leftLabel": "原始 JSON",
-  "rightLabel": "目标 JSON",
-  "compareButton": "比较",
-  "clearButton": "清空",
-  "sideBySideMode": "并排",
-  "unifiedMode": "统一",
-  "previousDiff": "上一个",
-  "nextDiff": "下一个",
-  "noDiffs": "无差异",
-  "diffCount": "{{count}} 处差异",
-  "invalidJson": "无效的 JSON 格式",
-  "emptyHint": "输入两侧 JSON 后点击比较",
-  "fixErrorHint": "请修正上方 JSON 的语法错误以开启实时流式比对",
-  "added": "新增",
-  "removed": "删除",
-  "modified": "修改"
-}

i18n/locales/zh/jsonFormat.json

@@ -1,42 +0,0 @@
-{
-  "formatTitle": "JSON 格式化",
-  "formatSubtitle": "美化和格式化 JSON 数据",
-  "inputPlaceholder": "输入需要格式化的 JSON...",
-  "formatButton": "格式化",
-  "clearButton": "清空",
-  "sortKeys": "键名排序",
-  "sortKeysTooltip": "按字母顺序对 JSON 对象键进行排序",
-  "indentSize": "缩进",
-  "indentSpaces": "{{count}} 个空格",
-  "outputLabel": "格式化结果",
-  "copySuccess": "复制成功",
-  "copyFail": "复制失败",
-  "noContent": "无内容可复制",
-  "invalidJson": "无效的 JSON 格式",
-  "emptyHint": "输入 JSON 后点击格式化",
-  "fixErrorHint": "请修正上方 JSON 的语法错误以开启实时流式格式化",
-  "originalSize": "原始大小",
-  "formattedSize": "格式化后大小",
-  "diffMode": "差异比较",
-  "formatMode": "格式化",
-  "yamlMode": "YAML",
-  "tomlMode": "TOML",
-  "minifyMode": "压缩",
-  "yamlTitle": "JSON 转 YAML",
-  "yamlSubtitle": "将 JSON 数据转换为 YAML 格式",
-  "yamlModeInputPlaceholder": "输入需要转换的 JSON...",
-  "yamlModeOutputLabel": "YAML 结果",
-  "yamlModeEmptyHint": "输入 JSON 后点击转换",
-  "convertButton": "转换",
-  "tomlTitle": "JSON 转 TOML",
-  "tomlSubtitle": "将 JSON 数据转换为 TOML 格式",
-  "tomlModeInputPlaceholder": "输入需要转换的 JSON...",
-  "tomlModeOutputLabel": "TOML 结果",
-  "tomlModeEmptyHint": "输入 JSON 后点击转换",
-  "minifyTitle": "JSON 压缩",
-  "minifySubtitle": "将 JSON 压缩为紧凑的单行格式",
-  "minifyModeInputPlaceholder": "输入需要压缩的 JSON...",
-  "minifyModeOutputLabel": "压缩结果",
-  "minifyModeEmptyHint": "输入 JSON 后点击压缩",
-  "minifyButton": "压缩"
-}

i18n/locales/zh/jwt.json

@@ -1,17 +0,0 @@
-{
-  "pageTitle": "JWT 解析",
-  "pageSubtitle": "JSON Web Token 解码与查看",
-  "placeholder": "在此粘贴 JWT 令牌 (Encoded JWT)...",
-  "headerTitle": "HEADER: 算法 & 令牌类型",
-  "payloadTitle": "PAYLOAD: 数据",
-  "signatureTitle": "签名",
-  "noSignature": "无签名",
-  "invalidFormat": "无法解析",
-  "errors": {
-    "invalidBase64String": "无效的 Base64URL 字符串",
-    "failedToDecode": "Base64URL 解码失败：",
-    "invalidFormat": "JWT 格式错误：必须包含三个由 . 分隔的部分",
-    "parseHeaderFailed": "解析 Header 失败：",
-    "parsePayloadFailed": "解析 Payload 失败："
-  }
-}

i18n/locales/zh/markdownToHtml.json

@@ -1,18 +0,0 @@
-{
-  "pageTitle": "Markdown 转 HTML",
-  "pageSubtitle": "实时将 Markdown 转换为 HTML 并预览",
-  "splitMode": "分屏",
-  "previewMode": "预览",
-  "htmlMode": "HTML",
-  "clear": "清空",
-  "print": "打印",
-  "download": "下载",
-  "inputLabel": "Markdown 输入",
-  "previewLabel": "实时预览",
-  "htmlOutputLabel": "HTML 输出",
-  "inputPlaceholder": "在此输入 Markdown 内容...",
-  "charCount": "{{count}} 字符",
-  "copyHtml": "复制 HTML",
-  "downloadSuccess": "文件下载成功",
-  "printSuccess": "打印窗口已打开"
-}

i18n/locales/zh/qrCode.json

@@ -1,48 +0,0 @@
-{
-  "pageTitle": "二维码工具",
-  "pageSubtitle": "生成和解析二维码",
-
-  "generateMode": "生成二维码",
-  "parseMode": "解析二维码",
-
-  "urlToQr": "文本转二维码",
-  "qrToUrl": "二维码转文本",
-
-  "urlInputLabel": "输入 URL 或文本",
-  "urlInputPlaceholder": "请输入 URL 或文本内容，将自动生成二维码",
-  "generateButton": "生成二维码",
-  "generating": "生成中...",
-
-  "qrCodeWillShow": "二维码将显示在这里",
-  "downloadButton": "下载二维码",
-  "copyQrButton": "复制二维码",
-
-  "qrCodeSuccess": "二维码生成成功",
-  "qrCodeDownloadSuccess": "二维码下载成功",
-  "qrCodeCopySuccess": "二维码已复制到剪贴板",
-
-  "selectImage": "请选择二维码图片",
-  "parseSuccess": "二维码解析成功",
-  "noQrDetected": "未检测到二维码，请确保图片清晰且包含二维码",
-  "parseError": "解析二维码失败，请重试",
-  "generateError": "生成二维码失败，请检查输入内容",
-  "copyError": "复制失败，请重试",
-
-  "imagePasted": "图片粘贴成功，正在解析...",
-  "imagePasteError": "粘贴图片失败，请重试",
-  "imageCleared": "图片已清除",
-  "clickToUpload": "点击、拖拽或粘贴上传二维码图片",
-  "supportFormats": "支持 PNG、JPG、WEBP、Base64 格式",
-
-  "parseButton": "解析二维码",
-  "parsing": "解析中...",
-  "resultLabel": "解析结果",
-  "copyTooltip": "复制",
-
-  "enterUrlError": "请输入 URL 或文本",
-  "clickToChange": "点击更换图片",
-
-  "pasteHint": "支持 Ctrl+V 粘贴图片或 Base64 字符串",
-  "autoGenerateHint": "输入内容后将自动生成二维码",
-  "autoParseHint": "上传图片后将自动解析二维码"
-}

i18n/locales/zh/rightClickRestorer.json

@@ -1,13 +0,0 @@
-{
-  "title": "右键恢复",
-  "description": "检测并恢复被网站禁用的浏览器右键菜单",
-  "loading": "正在加载...",
-  "currentDomain": "当前域名",
-  "statusLocked": "未解锁",
-  "statusUnlocked": "已解锁",
-  "unsupported": "不支持",
-  "unsupportedDesc": "当前页面为浏览器内部页面或扩展页面，无法解锁右键功能。请切换到普通网页后重试。",
-  "unlockDesc": "点击下方按钮，为当前网站临时解锁右键菜单。刷新页面后需要重新解锁。",
-  "unlockBtn": "解锁当前网站右键",
-  "alreadyUnlocked": "右键已解锁"
-}

i18n/locales/zh/storageCleaner.json

@@ -1,34 +0,0 @@
-{
-  "pageTitle": "存储清理",
-  "pageSubtitle": "清理缓存、Cookies 及本地存储",
-  "loading": "加载中...",
-  "initializing": "正在读取站点数据...",
-  "occupied": "已占用 {{size}}",
-  "cleaning": "正在清理...",
-  "cleanNow": "立即清理",
-  "autoRefresh": "清理后自动刷新页面",
-  "selectAll": "全选所有项",
-  "cleanSuccess": "清理完成",
-  "cleanError": "清理失败",
-  "noData": "无数据",
-  "countUnit": "个",
-  "errorNoTab": "无法获取当前标签页",
-  "errorRestricted": "存储清理功能不支持此页面",
-  "cleanSuccessReload": "清理成功，即将刷新页面",
-  "errorStandardOnly": "存储清理功能仅适用于标准网页",
-  "confirmTitle": "确认清理数据？",
-  "confirmDesc": "您将永久删除当前页面的以下选定存储项。",
-  "irreversible": "此操作不可撤销",
-  "confirmAction": "确认清理",
-  "cleanedSummary": "清理了 {{items}}",
-  "noDataToClean": "该页面没有可清理的存储数据",
-  "partialFailure": "部分清理失败",
-  "options": {
-    "localStorage": "Local Storage",
-    "sessionStorage": "Session Storage",
-    "indexedDB": "IndexedDB",
-    "cookies": "Cookies",
-    "cacheStorage": "Cache Storage",
-    "serviceWorkers": "Service Workers"
-  }
-}

i18n/locales/zh/textStatistics.json

@@ -1,9 +0,0 @@
-{
-  "pageTitle": "文本统计",
-  "pageSubtitle": "实时分析文本的字符、单词、行数及字节大小",
-  "placeholder": "在此输入或粘贴文本...",
-  "characters": "字符数",
-  "words": "单词数",
-  "lines": "行数",
-  "bytes": "字节大小"
-}

i18n/locales/zh/timestamp.json

@@ -1,27 +0,0 @@
-{
-  "pageTitle": "时间戳转换",
-  "pageSubtitle": "Unix 毫秒数转换与格式化",
-  "tsToDate": "时间戳 → 日期",
-  "dateToTs": "日期 → 时间戳",
-  "placeholderTs": "输入时间戳...",
-  "placeholderDate": "YYYY-MM-DD HH:mm:ss",
-  "unitMs": "毫秒 (ms)",
-  "unitS": "秒 (s)",
-  "convertButton": "立即转换",
-  "currentTs": "当前时间戳",
-  "useNowTooltip": "填充到下方",
-  "copyTsTooltip": "复制时间戳",
-  "usedSuccess": "已使用当前时间戳",
-  "resultLabel": "转换结果",
-  "copyResultTooltip": "复制结果",
-  "relativeTime": "相对时间",
-  "iso8601": "ISO 8601",
-  "utcTime": "UTC 时间",
-  "copyTooltip": "复制",
-  "resultEmpty": "请输入并点击转换",
-  "errors": {
-    "invalidNumber": "无效数字",
-    "invalidTimestamp": "无效时间戳",
-    "invalidFormat": "格式错误"
-  }
-}

lint-staged.config.mjs

@@ -1,4 +1,12 @@
+/* global process */
+
+const isCI = process.env.CI === 'true';
+
 export default {
-  '*.{ts,tsx,js,jsx,mjs}': ['eslint --fix --max-warnings=0 --no-warn-ignored', 'prettier --write'],
+  '*.{ts,tsx,js,jsx,mjs}': [
+    'eslint --fix --no-warn-ignored',
+    ...(isCI ? ['eslint --max-warnings=0'] : []),
+    'prettier --write',
+  ],
   '*.{json,css,scss,md}': ['prettier --write'],
 };

package.json

@@ -36,15 +36,11 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.20",
-    "i18next": "^26.2.0",
-    "i18next-browser-languagedetector": "^8.2.1",
     "lucide-react": "^1.16.0",
-    "marked": "^18.0.4",
     "qr-scanner": "^1.4.2",
     "qrious": "^4.0.2",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
-    "react-i18next": "^17.0.8",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.6.0"
   },

pages/Dashboard/ToolCard.tsx

@@ -1,107 +0,0 @@
-import type { ComponentType } from 'react';
-import React from 'react';
-import type { LucideProps } from 'lucide-react';
-import { ChevronRight } from 'lucide-react';
-import type { PaletteColorKey } from '@/config/features';
-import { cn } from '@/lib/utils';
-
-const PALETTE_COLORS: Record<PaletteColorKey, string> = {
-  primary: '13, 148, 136', // teal
-  success: '22, 163, 74', // green
-  warning: '217, 119, 6', // amber (存储清理的橙色轴)
-  error: '220, 38, 38', // red
-  secondary: '147, 51, 232',
-  info: '37, 99, 235', // blue
-};
-
-export interface ToolCardProps extends React.HTMLAttributes<HTMLDivElement> {
-  title: string;
-  description?: string;
-  snapshot?: React.ReactNode;
-  colorKey: PaletteColorKey;
-  icon: ComponentType<LucideProps>;
-  onNavigate: () => void;
-}
-
-export default function ToolCard({
-  title,
-  description,
-  snapshot,
-  colorKey,
-  icon: IconComponent,
-  onNavigate,
-  className,
-  ...props
-}: ToolCardProps) {
-  const rgbValues = PALETTE_COLORS[colorKey];
-
-  return (
-    <div
-      style={{
-        ['--tool-color' as string]: rgbValues,
-      }}
-      /* 💡 核心修复点：
-        - 坚决不用 h-full 或固定高度，锁死 h-auto（高度自适应流），配合 py-4 px-4 牢牢把内容包裹在卡片体内。
-        - 废除原先会乱飘的内联 style 属性擦写，全权放权给 Tailwind 的声明式 hover 变体。
-      */
-      className={cn(
-        'group relative rounded-xl border border-border/70 bg-card text-card-foreground p-4 h-auto flex flex-col items-stretch justify-start gap-3 shadow-sm select-none box-border',
-        'hover:bg-muted/30',
-        'hover:border-[rgba(var(--tool-color),0.45)]',
-        'hover:shadow-[0_8px_24px_-8px_rgba(var(--tool-color),0.14)] dark:hover:shadow-[0_8px_30px_-10px_rgba(var(--tool-color),0.25)]',
-        className,
-      )}
-      {...props}
-    >
-      {/* 上半部分：核心信息交互排版轴 */}
-      <div className="flex items-center justify-between w-full relative min-w-0 min-h-[44px]">
-        <div className="flex gap-3 items-center min-w-0 flex-1 pr-2">
-          {/* 左侧圆形图标容器 */}
-          <div
-            className={cn(
-              'flex items-center justify-center w-10 h-10 rounded-xl shrink-0',
-              'bg-[rgba(var(--tool-color),0.08)] dark:bg-[rgba(var(--tool-color),0.12)]',
-              'text-[rgb(var(--tool-color))]',
-            )}
-          >
-            <IconComponent className="h-5 w-5 shrink-0" />
-          </div>
-
-          {/* 中间文字描述区：利用 flex-1 min-w-0 防御文本过长发生恶性撑开 */}
-          <div className="flex-1 min-w-0 flex flex-col">
-            <h4 className="font-bold text-sm tracking-tight text-foreground leading-snug">
-              {title}
-            </h4>
-            {description && (
-              <p className="text-[11px] font-medium text-muted-foreground/90 mt-0.5 leading-normal w-full truncate">
-                {description}
-              </p>
-            )}
-          </div>
-        </div>
-
-        {/* 右侧指示小箭头 */}
-        <div className="text-muted-foreground/40 group-hover:text-[rgb(var(--tool-color))] p-1 shrink-0 group-hover:translate-x-0.5">
-          <ChevronRight className="h-4 w-4" />
-        </div>
-
-        {/* 覆盖整个上半部分的绝对定位隐形跳转层（A11y 无障碍标准合规） */}
-        <button
-          type="button"
-          onClick={onNavigate}
-          aria-label={`进入 ${title}`}
-          className="absolute inset-0 w-full h-full cursor-pointer bg-transparent border-none opacity-0 focus-visible:outline-none"
-        />
-      </div>
-
-      {/* 下半部分：未来的动态预览沙箱独立承载区 */}
-      {snapshot != null && (
-        <div className="mt-1 pt-3 border-t border-dashed border-border/80 w-full relative z-10 select-text">
-          {snapshot}
-        </div>
-      )}
-    </div>
-  );
-}
-
-ToolCard.displayName = 'ToolCard';

pages/Dashboard/index.tsx

@@ -1,41 +0,0 @@
-import { useRouter } from '@/providers/RouterProvider';
-import ToolCard from '@/pages/Dashboard/ToolCard';
-import { getFeatureByKey } from '@/config/features';
-import type { PageType } from '@/types/storage';
-import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { cn } from '@/lib/utils';
-
-export default function DashboardPage() {
-  const { navigateTo, visiblePages, pageOrder } = useRouter();
-  const { t } = useTranslation(['features']);
-
-  const visibleSet = useMemo(() => new Set<string>(visiblePages), [visiblePages]);
-
-  return (
-    <div
-      className={cn(
-        'grid grid-cols-1 sm:grid-cols-[repeat(auto-fill,minmax(290px,1fr))] auto-rows-auto gap-3.5 p-3.5 w-full h-auto',
-        'select-none',
-      )}
-    >
-      {pageOrder.map((key) => {
-        if (!visibleSet.has(key)) return null;
-
-        const feature = getFeatureByKey(key);
-        if (!feature?.themeColorKey || feature.icon == null) return null;
-
-        return (
-          <ToolCard
-            key={key}
-            title={t(feature.labelKey)}
-            description={t(feature.descriptionKey)}
-            colorKey={feature.themeColorKey}
-            icon={feature.icon}
-            onNavigate={() => navigateTo(key as PageType)}
-          />
-        );
-      })}
-    </div>
-  );
-}

pages/HtmlToMarkdown/index.tsx

@@ -1,177 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-import { Download, Trash2 } from 'lucide-react';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
-import CopyButton from '@/components/CopyButton';
-import SwitchButtonGroup from '@/components/SwitchButtonGroup';
-import { Button } from '@/components/ui/button'; // 💡 1. 全面回归规范：引入原生的 shadcn 原子 Button
-import { useStorageState } from '@/utils/useStorageState';
-import type { HtmlToMarkdownPreviewMode } from '@/types/storage';
-import { downloadMarkdownFile, htmlToMarkdown, SAMPLE_HTML } from '@/utils/htmlToMarkdown';
-import { cn } from '@/lib/utils';
-
-const isValidPreviewMode = (val: unknown): val is HtmlToMarkdownPreviewMode =>
-  typeof val === 'string' && ['split', 'preview', 'markdown'].includes(val);
-
-export default function HtmlToMarkdownPage() {
-  const { t } = useLazyTranslation('htmlToMarkdown');
-  const [previewMode, setPreviewMode] = useStorageState(
-    'htmlToMarkdown/previewMode',
-    'split' as HtmlToMarkdownPreviewMode,
-    isValidPreviewMode,
-  );
-  const [html, setHtml] = useState(SAMPLE_HTML);
-
-  const result = useMemo(() => htmlToMarkdown(html), [html]);
-  const error = result.hasError ? (result.error ?? null) : null;
-
-  const handleModeChange = useCallback(
-    (newMode: HtmlToMarkdownPreviewMode) => {
-      setPreviewMode(newMode);
-    },
-    [setPreviewMode],
-  );
-
-  const handleClear = useCallback(() => {
-    setHtml('');
-  }, []);
-
-  const handleDownload = useCallback(() => {
-    if (result.markdown) {
-      downloadMarkdownFile(result.markdown, 'converted.md');
-    }
-  }, [result.markdown]);
-
-  const showInput = previewMode !== 'preview';
-  const showOutput = previewMode !== 'markdown';
-
-  return (
-    /* 💡 统一间距尺寸：
-      - 彻底清除多余的 container max-w-7xl 这种网页大边距，
-      - 统一收拢为我们先前在 Dashboard 页、JSON 工具箱制定的 p-4 space-y-4 标准极客桌面规格。
-    */
-    <div className="p-4 w-full flex flex-col space-y-4 select-none">
-      <div className="flex flex-col gap-4">
-        {/* 工具栏集成区 */}
-        <div className="flex flex-col sm:flex-row gap-3 justify-between items-stretch sm:items-center bg-secondary/40 rounded-xl border border-border/60 px-1.5 py-1.5 sm:h-12">
-          <SwitchButtonGroup
-            value={previewMode}
-            options={[
-              { value: 'split', label: t('splitMode') },
-              { value: 'preview', label: t('previewMode') },
-              { value: 'markdown', label: t('markdownMode') },
-            ]}
-            onChange={handleModeChange}
-            size="small"
-            className="w-full sm:w-auto"
-          />
-
-          <div className="flex gap-2 shrink-0">
-            {/* 2. 重塑下载按钮：接入受控 Button，追加 active 物理微缩放动效 */}
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={handleDownload}
-              disabled={!result.markdown}
-              className="h-8 rounded-md font-medium text-xs gap-1.5 shadow-sm"
-            >
-              <Download className="h-3.5 w-3.5" />
-              {t('download')}
-            </Button>
-
-            {/* 重塑清空按钮 */}
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={handleClear}
-              className="h-8 rounded-md font-medium text-xs gap-1.5 shadow-sm text-destructive hover:text-destructive hover:bg-destructive/5 dark:hover:bg-destructive/10 border-input/60"
-            >
-              <Trash2 className="h-3.5 w-3.5" />
-              {t('clear')}
-            </Button>
-          </div>
-        </div>
-
-        {/* 错误提示：
-          - 💡 核心修复点：将硬编码的 bg-red-50 实色，完美超进化为系统的全自适应透明色变体
-        */}
-        {error && (
-          <div className="p-3.5 bg-destructive/10 border border-destructive/20 rounded-xl text-destructive text-xs font-semibold tracking-wide">
-            {error}
-          </div>
-        )}
-
-        {/* 双翼/单栏联动面板展示区 */}
-        <div
-          className={cn(
-            'grid gap-4 min-h-[460px] w-full',
-            showInput && showOutput ? 'grid-cols-1 md:grid-cols-2' : 'grid-cols-1',
-          )}
-        >
-          {/* HTML 输入端卡片面板 */}
-          {showInput && (
-            /* 3. 智能聚焦框联动（Focus Ring Clamping）：
-              - 外层容器追加 focus-within 变量追踪大闸。
-              - 只要用户用鼠标点击了内部的 textarea，外层整块精巧的圆角大边框会一帧内亮起 primary 系统的深色呼吸发光环，
-              - 这种“全外包裹层框聚焦”的体验极大模仿了本地原生 IDE 的硬核专业体验！
-            */
-            <div className="border border-border rounded-xl bg-card text-card-foreground shadow-sm overflow-hidden flex flex-col focus-within:ring-1 focus-within:ring-ring focus-within:border-ring">
-              {/* 卡片头部：改用标准的灰色 bg-muted/50 */}
-              <div className="flex h-9 items-center justify-between px-4 bg-muted/50 border-b border-border select-none">
-                <span className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider">
-                  {t('inputLabel')}
-                </span>
-                <span className="text-[10px] font-mono text-muted-foreground/60 tabular-nums">
-                  {t('charCount', { count: html.length })}
-                </span>
-              </div>
-              <textarea
-                value={html}
-                onChange={(e) => setHtml(e.target.value)}
-                placeholder={t('inputPlaceholder')}
-                className="flex-1 min-h-[380px] p-4 bg-transparent font-mono text-xs leading-relaxed resize-none focus:outline-none text-foreground/90 select-text"
-              />
-            </div>
-          )}
-
-          {/* Markdown 输出端卡片面板 */}
-          {showOutput && (
-            <div className="border border-border rounded-xl bg-card text-card-foreground shadow-sm overflow-hidden flex flex-col">
-              <div className="flex h-9 items-center justify-between px-4 bg-muted/50 border-b border-border select-none">
-                <span className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider">
-                  {(previewMode as string) === 'markdown'
-                    ? t('markdownOutputLabel')
-                    : t('previewLabel')}
-                </span>
-                <div className="flex items-center gap-2">
-                  <span className="text-[10px] font-mono text-muted-foreground/60 tabular-nums">
-                    {t('charCount', { count: result.markdownLength })}
-                  </span>
-                  <CopyButton
-                    text={result.markdown}
-                    className="h-6 w-6 rounded-md border text-muted-foreground"
-                  />
-                </div>
-              </div>
-
-              {(previewMode as string) === 'markdown' ? (
-                <textarea
-                  value={result.markdown}
-                  readOnly
-                  className="flex-1 min-h-[380px] p-4 font-mono text-xs leading-relaxed resize-none focus:outline-none bg-muted/30 dark:bg-muted/10 text-foreground/80 select-text"
-                />
-              ) : (
-                <div className="flex-1 p-4 min-h-[380px] overflow-auto bg-transparent font-mono text-xs leading-relaxed whitespace-pre-wrap break-all text-foreground/90 select-text">
-                  {result.markdown || (
-                    <span className="text-muted-foreground/70 italic text-[11px] font-sans">
-                      {t('emptyHint')}
-                    </span>
-                  )}
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}

pages/JsonTools/index.tsx

@@ -1,201 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
-import JsonDiffInput from './JsonDiffInput';
-import DiffResult from './DiffResult';
-import DiffNavigator from './DiffNavigator';
-import JsonFormatSection from './JsonFormatSection';
-import type { ConvertFunction } from './JsonConvertSection';
-import JsonConvertSection from './JsonConvertSection';
-import { diffJson } from './diffEngine';
-import { jsonToYaml } from '@/utils/jsonToYaml';
-import { jsonToToml } from '@/utils/jsonToToml';
-import { minifyJson } from '@/utils/jsonFormatter';
-import { useStorageState } from '@/utils/useStorageState';
-import type { JsonToolsPageMode } from '@/types/storage';
-import SwitchButtonGroup from '@/components/SwitchButtonGroup';
-import type { ViewMode } from './types';
-
-interface ParseState {
-  value: unknown;
-  error: string | null;
-}
-
-const tryParse = (raw: string, invalidMsg: string): ParseState => {
-  const trimmed = raw.trim();
-  if (!trimmed) return { value: undefined, error: null };
-  try {
-    return { value: JSON.parse(trimmed), error: null };
-  } catch {
-    return { value: undefined, error: invalidMsg };
-  }
-};
-
-const VALID_PAGE_MODES: readonly JsonToolsPageMode[] = ['diff', 'format', 'yaml', 'toml', 'minify'];
-const isValidPageMode = (val: unknown): val is JsonToolsPageMode =>
-  typeof val === 'string' && (VALID_PAGE_MODES as readonly string[]).includes(val);
-
-type PageMode = JsonToolsPageMode;
-
-export default function Index() {
-  const { t } = useLazyTranslation(['jsonDiff', 'jsonFormat']);
-  const [pageMode, setPageMode] = useStorageState('jsonTools/pageMode', 'diff', isValidPageMode);
-
-  // 1. 受控原始输入源
-  const [leftInput, setLeftInput] = useState('');
-  const [rightInput, setRightInput] = useState('');
-
-  // 2. 纯净的异步防抖管道：仅负责切断高频打字开销
-  const [debouncedLeft, setDebouncedLeft] = useState('');
-  const [debouncedRight, setDebouncedRight] = useState('');
-
-  useEffect(() => {
-    const handle = setTimeout(() => {
-      setDebouncedLeft(leftInput);
-      setDebouncedRight(rightInput);
-    }, 250);
-    return () => clearTimeout(handle);
-  }, [leftInput, rightInput]);
-
-  // 3. 贯彻方案A：利用 useMemo 将防抖文本同步转化为解析树和错误提示
-  const parseState = useMemo(() => {
-    const invalidMsg = t('jsonDiff:invalidJson');
-    return {
-      left: tryParse(debouncedLeft, invalidMsg),
-      right: tryParse(debouncedRight, invalidMsg),
-    };
-  }, [debouncedLeft, debouncedRight, t]);
-
-  const leftError = parseState.left.error;
-  const rightError = parseState.right.error;
-
-  const [viewMode, setViewMode] = useState<ViewMode>('sideBySide');
-  const [currentDiffIndex, setCurrentDiffIndex] = useState(0);
-
-  // 4. 实时比对流式计算
-  const diffResult = useMemo(() => {
-    const { left, right } = parseState;
-    if (left.error || right.error || debouncedLeft.trim() === '' || debouncedRight.trim() === '') {
-      return null;
-    }
-    return diffJson(left.value, right.value);
-  }, [parseState, debouncedLeft, debouncedRight]);
-
-  // 💡 彻底删除了原本在此处的侦听 [diffResult] 的 useEffect。
-  // 状态重置已完全委托给事件源头，级联更新警告从根源上永久自愈！
-
-  const total = diffResult?.diffPaths.length ?? 0;
-
-  const handlePrev = useCallback(() => {
-    if (total === 0) return;
-    setCurrentDiffIndex((idx) => (idx - 1 + total) % total);
-  }, [total]);
-
-  const handleNext = useCallback(() => {
-    if (total === 0) return;
-    setCurrentDiffIndex((idx) => (idx + 1) % total);
-  }, [total]);
-
-  const activePath = diffResult && total > 0 ? diffResult.diffPaths[currentDiffIndex] : undefined;
-
-  const yamlConvert: ConvertFunction = useCallback((text: string) => {
-    const r = jsonToYaml(text);
-    return { output: r.output, originalBytes: r.originalBytes, outputBytes: r.outputBytes };
-  }, []);
-
-  const tomlConvert: ConvertFunction = useCallback((text: string) => {
-    const r = jsonToToml(text);
-    return { output: r.output, originalBytes: r.originalBytes, outputBytes: r.outputBytes };
-  }, []);
-
-  const minifyConvert: ConvertFunction = useCallback((text: string) => {
-    const r = minifyJson(text);
-    return { output: r.minified, originalBytes: r.originalBytes, outputBytes: r.minifiedBytes };
-  }, []);
-
-  return (
-    <div className="p-4 w-full flex flex-col space-y-4 min-h-[500px] select-none">
-      <SwitchButtonGroup
-        value={pageMode}
-        onChange={(v: PageMode) => setPageMode(v)}
-        options={[
-          { value: 'diff', label: t('jsonFormat:diffMode') },
-          { value: 'format', label: t('jsonFormat:formatMode') },
-          { value: 'yaml', label: t('jsonFormat:yamlMode') },
-          { value: 'toml', label: t('jsonFormat:tomlMode') },
-          { value: 'minify', label: t('jsonFormat:minifyMode') },
-        ]}
-        size="small"
-        className="w-full sm:w-auto"
-      />
-
-      {pageMode === 'diff' ? (
-        <div className="flex flex-col space-y-4">
-          <div className="flex h-10 items-center justify-between px-1.5 bg-secondary/40 rounded-xl border border-border/60">
-            <SwitchButtonGroup
-              value={viewMode}
-              onChange={(v: ViewMode) => setViewMode(v)}
-              options={[
-                { value: 'sideBySide', label: t('jsonDiff:sideBySideMode') },
-                { value: 'unified', label: t('jsonDiff:unifiedMode') },
-              ]}
-              size="small"
-            />
-          </div>
-
-          <div className="flex flex-col md:flex-row gap-4 w-full items-stretch">
-            <JsonDiffInput
-              label={t('jsonDiff:leftLabel')}
-              placeholder={t('jsonDiff:leftPlaceholder')}
-              value={leftInput}
-              onChange={(val) => {
-                setLeftInput(val);
-                setCurrentDiffIndex(0); // 💡 在同一个用户键盘事件中打包批处理，0 副作用开销
-              }}
-              error={leftError}
-              minRows={9}
-            />
-            <JsonDiffInput
-              label={t('jsonDiff:rightLabel')}
-              placeholder={t('jsonDiff:rightPlaceholder')}
-              value={rightInput}
-              onChange={(val) => {
-                setRightInput(val);
-                setCurrentDiffIndex(0); // 💡 在同一个用户键盘事件中打包批处理，0 副作用开销
-              }}
-              error={rightError}
-              minRows={9}
-            />
-          </div>
-
-          {diffResult ? (
-            <div className="flex flex-col space-y-3.5 w-full pt-1">
-              <div className="flex justify-center w-full">
-                <DiffNavigator
-                  total={total}
-                  currentIndex={currentDiffIndex}
-                  onPrev={handlePrev}
-                  onNext={handleNext}
-                />
-              </div>
-              <DiffResult result={diffResult} viewMode={viewMode} activePath={activePath} />
-            </div>
-          ) : (
-            <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">
-                {leftError || rightError ? t('jsonDiff:fixErrorHint') : t('jsonDiff:emptyHint')}
-              </p>
-            </div>
-          )}
-        </div>
-      ) : pageMode === 'format' ? (
-        <JsonFormatSection />
-      ) : pageMode === 'yaml' ? (
-        <JsonConvertSection translationPrefix="yaml" convertFunction={yamlConvert} />
-      ) : pageMode === 'toml' ? (
-        <JsonConvertSection translationPrefix="toml" convertFunction={tomlConvert} />
-      ) : (
-        <JsonConvertSection translationPrefix="minify" convertFunction={minifyConvert} />
-      )}
-    </div>
-  );
-}

pages/Jwt/index.tsx

@@ -1,139 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { parseJwt, stringifyJson } from '@/utils/jwt';
-import CopyButton from '@/components/CopyButton';
-import TextInputArea from '@/components/TextInputArea';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
-import { useContextMenuData } from '@/utils/useContextMenuData';
-import { cn } from '@/lib/utils';
-
-interface SectionProps {
-  title: string;
-  content: unknown;
-  colorClass: string; // 💡 1. 废除硬编码十六进制色值，改用语义化的 Tailwind 类名
-  bgClass: string;
-  borderClass: string;
-}
-
-const Section = ({ title, content, colorClass, bgClass, borderClass }: SectionProps) => {
-  const { t } = useLazyTranslation('jwt');
-  return (
-    <div className={cn('p-4 rounded-xl border border-solid', bgClass, borderClass)}>
-      <div className="flex justify-between items-center mb-2 select-none">
-        <span className={cn('text-xs font-bold tracking-wider uppercase', colorClass)}>
-          {title}
-        </span>
-        <CopyButton
-          text={JSON.stringify(content)}
-          className="h-6 w-6 rounded-md border text-muted-foreground"
-        />
-      </div>
-      {/* 💡 排版微距精雕：
-        - 彻底移除 border-black/5 这种非暗黑模式友好的硬隔离。
-        - 统一收拢为标准的 bg-muted/40 配合 font-mono text-xs
-      */}
-      <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')}
-      </pre>
-    </div>
-  );
-};
-
-export default function Index() {
-  const { t } = useLazyTranslation(['jwt', 'jsonFormat']);
-  const [jwtInput, setJwtInput] = useState('');
-
-  // 2. 防抖中转管道：切断高频键盘敲击时的红色语法闪烁
-  const [debouncedInput, setDebouncedInput] = useState('');
-
-  useEffect(() => {
-    const handle = setTimeout(() => {
-      setDebouncedInput(jwtInput);
-    }, 200);
-    return () => clearTimeout(handle);
-  }, [jwtInput]);
-
-  const handleContextMenuData = useCallback((payload: string) => {
-    const cleaned = payload.replace(/^Bearer\s*/i, '').trim();
-    setJwtInput(cleaned);
-  }, []);
-
-  useContextMenuData({ featureKey: 'jwt', onData: handleContextMenuData });
-
-  // 3. 贯彻方案 A：衍生变量流。直接消费防抖后的文本
-  const result = useMemo(() => {
-    if (!debouncedInput.trim()) {
-      return null;
-    }
-    return parseJwt(debouncedInput);
-  }, [debouncedInput]);
-
-  return (
-    <div className="p-4 w-full flex flex-col space-y-4 select-none">
-      <div className="flex flex-col gap-4">
-        {/* 输入终端 */}
-        <TextInputArea
-          minRows={5}
-          maxRows={10}
-          placeholder={t('jwt:placeholder')}
-          value={jwtInput}
-          onChange={(val) => {
-            const cleaned = val.replace(/^Bearer\s*/i, '').trim();
-            setJwtInput(cleaned);
-          }}
-          allowCopy={true}
-          showClear={true}
-          externalError={result?.error || undefined}
-          onClear={() => setJwtInput('')}
-        />
-
-        {/* 解码看板结果展现 */}
-        {result && !result.error && (
-          <div className="flex flex-col gap-4">
-            {/* Header 分区：完美致敬 JWT.io 的鲜艳色彩，同时实现黑夜暗化自适应 */}
-            <Section
-              title={t('jwt:headerTitle')}
-              content={result.header}
-              colorClass="text-[#fb015b] dark:text-rose-400"
-              borderClass="border-[#fb015b]/20 dark:border-rose-500/20"
-              bgClass="bg-[#fb015b]/5 dark:bg-rose-500/5"
-            />
-
-            {/* Payload 分区 */}
-            <Section
-              title={t('jwt:payloadTitle')}
-              content={result.payload}
-              colorClass="text-[#a03aff] dark:text-purple-400" // 针对暗黑模式略微调高对比度
-              borderClass="border-[#a03aff]/20 dark:border-purple-500/20"
-              bgClass="bg-[#a03aff]/5 dark:bg-purple-500/5"
-            />
-
-            {/* Signature 签名区：完全对齐标准的 shadcn 骨架阶度 */}
-            <div className="p-4 rounded-xl border border-border bg-secondary/40 shadow-sm">
-              <div className="flex justify-between items-center mb-2">
-                <span className="text-xs font-bold tracking-wider text-muted-foreground/90 uppercase">
-                  {t('jwt:signatureTitle')}
-                </span>
-                <CopyButton
-                  text={result.signature || ''}
-                  className="h-6 w-6 rounded-md border text-muted-foreground"
-                />
-              </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">
-                {result.signature || t('jwt:noSignature')}
-              </span>
-            </div>
-          </div>
-        )}
-
-        {/* 当解析错误时的干净中性引导拦截 */}
-        {result?.error && (
-          <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">
-              {t('jsonFormat:invalidJson')}
-            </p>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

pages/MarkdownToHtml/index.tsx

@@ -1,305 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Download, Printer, Trash2 } from 'lucide-react';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
-import CopyButton from '@/components/CopyButton';
-import SwitchButtonGroup from '@/components/SwitchButtonGroup';
-import { Button } from '@/components/ui/button';
-import { useStorageState } from '@/utils/useStorageState';
-import type { MarkdownToHtmlPreviewMode } from '@/types/storage';
-import {
-  downloadHtmlFile,
-  markdownToHtml,
-  printHtml,
-  SAMPLE_MARKDOWN,
-  wrapHtmlDocument,
-} from '@/utils/markdownToHtml';
-import { cn } from '@/lib/utils';
-
-const isValidPreviewMode = (val: unknown): val is MarkdownToHtmlPreviewMode =>
-  typeof val === 'string' && ['split', 'preview', 'html'].includes(val);
-
-// 💡 规范回归：保持最纯净的通用选择器集合，内部变量全部交由全局 :root 驱动
-const PREVIEW_STYLES = `
-  .markdown-body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    line-height: 1.6;
-    color: var(--md-foreground);
-    background-color: transparent;
-    font-size: 14px;
-  }
-  .markdown-body h1, .markdown-body h2, .markdown-body h3 {
-    margin-top: 24px;
-    margin-bottom: 16px;
-    font-weight: 600;
-    line-height: 1.25;
-    color: var(--md-foreground);
-  }
-  .markdown-body h1 { border-bottom: 1px solid var(--md-border); padding-bottom: 0.3em; font-size: 1.6em; }
-  .markdown-body h2 { border-bottom: 1px solid var(--md-border); padding-bottom: 0.3em; font-size: 1.35em; }
-  .markdown-body p { margin-top: 0; margin-bottom: 16px; }
-  .markdown-body a { color: var(--md-link-color); text-decoration: none; }
-  .markdown-body a:hover { text-decoration: underline; }
-  .markdown-body code {
-    background-color: var(--md-code-bg);
-    border-radius: 4px;
-    font-size: 85%;
-    padding: 0.2em 0.4em;
-    font-family: Menlo, Consolas, monospace;
-  }
-  .markdown-body pre {
-    background-color: var(--md-pre-bg);
-    border-radius: 8px;
-    font-size: 85%;
-    line-height: 1.45;
-    overflow: auto;
-    padding: 16px;
-    margin: 0 0 16px;
-    border: 1px solid var(--md-border);
-  }
-  .markdown-body pre code {
-    background-color: transparent;
-    border: 0;
-    padding: 0;
-  }
-  .markdown-body blockquote {
-    border-left: 0.25em solid var(--md-quote-line);
-    color: var(--md-muted);
-    margin: 0 0 16px;
-    padding: 0 1em;
-  }
-  .markdown-body table {
-    border-collapse: collapse;
-    width: 100%;
-    margin-bottom: 16px;
-    font-size: 13px;
-  }
-  .markdown-body table th, .markdown-body table td {
-    border: 1px solid var(--md-border);
-    padding: 6px 13px;
-  }
-  .markdown-body table tr:nth-child(2n) { background-color: var(--md-code-bg); }
-  .markdown-body table th { font-weight: 600; background-color: var(--md-code-bg); }
-`;
-
-export default function MarkdownToHtmlPage() {
-  const { t } = useLazyTranslation('markdownToHtml');
-  const [previewMode, setPreviewMode] = useStorageState(
-    'markdownToHtml/previewMode',
-    'split' as MarkdownToHtmlPreviewMode,
-    isValidPreviewMode,
-  );
-  const [markdown, setMarkdown] = useState(SAMPLE_MARKDOWN);
-  const iframeRef = useRef<HTMLIFrameElement>(null);
-
-  const result = useMemo(() => markdownToHtml(markdown), [markdown]);
-  const error = result.hasError ? (result.error ?? null) : null;
-
-  // 💡 自适应大总管：以极高严谨度拼装明暗大闸，用标准换行切断粘连风险
-  useEffect(() => {
-    const iframe = iframeRef.current;
-    if (!iframe) return;
-
-    const isDarkMode = document.documentElement.classList.contains('dark');
-
-    const themeVariables = isDarkMode
-      ? `:root { 
-          --md-bg: #090d16;
-          --md-foreground: #e6edf3; 
-          --md-border: rgba(255,255,255,0.15); 
-          --md-code-bg: rgba(255,255,255,0.12); 
-          --md-pre-bg: rgba(255,255,255,0.04); 
-          --md-muted: #8b949e;
-          --md-quote-line: rgba(255,255,255,0.25);
-          --md-link-color: #58a6ff;
-        }`
-      : `:root { 
-          --md-bg: #ffffff;
-          --md-foreground: #1f2328; 
-          --md-border: rgba(128,128,128,0.2); 
-          --md-code-bg: rgba(128,128,128,0.08); 
-          --md-pre-bg: rgba(128,128,128,0.03); 
-          --md-muted: #4b5563;
-          --md-quote-line: rgba(128,128,128,0.3);
-          --md-link-color: #3b82f6;
-        }`;
-
-    // 💡 3. 核心大清洗：将全局基础树（html, body）与派生样式完全独立硬编码，杜绝任何语法踩踏
-    const baseGlobalStyles = `
-      html, body { 
-        margin: 0; 
-        padding: 0;
-        width: 100%;
-        height: 100%;
-        background-color: var(--md-bg);
-        color: var(--md-foreground);
-      }
-      body {
-        padding: 16px;
-        box-sizing: border-box;
-      }
-    `;
-
-    iframe.srcdoc = `<!DOCTYPE html>
-<html lang="zh" style="background-color: ${isDarkMode ? '#090d16' : '#ffffff'};">
-<head>
-<meta charset="UTF-8">
-<style>
-  ${themeVariables}
-  ${PREVIEW_STYLES}
-  ${baseGlobalStyles}
-</style>
-</head>
-<body class="markdown-body">${result.html}</body>
-</html>`;
-  }, [result.html, previewMode]);
-
-  const handleModeChange = useCallback(
-    (newMode: MarkdownToHtmlPreviewMode) => {
-      setPreviewMode(newMode);
-    },
-    [setPreviewMode],
-  );
-
-  const handleClear = useCallback(() => {
-    setMarkdown('');
-  }, []);
-
-  const handlePrint = useCallback(() => {
-    printHtml(result.html, t('pageTitle'));
-  }, [result.html, t]);
-
-  const handleDownload = useCallback(() => {
-    const doc = wrapHtmlDocument(result.html, t('pageTitle'));
-    downloadHtmlFile(doc, 'markdown-export.html');
-  }, [result.html, t]);
-
-  const showInput = previewMode !== 'preview';
-  const showPreview = previewMode !== 'html';
-
-  return (
-    <div className="p-4 w-full flex flex-col space-y-4 select-none">
-      <div className="flex flex-col space-y-4">
-        {/* 工具集成控制中枢 */}
-        <div className="flex flex-col sm:flex-row gap-3 justify-between items-stretch sm:items-center bg-secondary/40 rounded-xl border border-border/60 px-1.5 py-1.5 sm:h-12">
-          <SwitchButtonGroup
-            value={previewMode}
-            options={[
-              { value: 'split', label: t('splitMode') },
-              { value: 'preview', label: t('previewMode') },
-              { value: 'html', label: t('htmlMode') },
-            ]}
-            onChange={handleModeChange}
-            size="small"
-            className="w-full sm:w-auto"
-          />
-
-          <div className="flex gap-2 shrink-0">
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={handleClear}
-              className="h-8 rounded-md font-medium text-xs gap-1.5 shadow-sm text-destructive hover:text-destructive hover:bg-destructive/5 dark:hover:bg-destructive/10 border-input/60"
-            >
-              <Trash2 className="h-3.5 w-3.5" />
-              {t('clear')}
-            </Button>
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={handlePrint}
-              disabled={!result.html}
-              className="h-8 rounded-md font-medium text-xs gap-1.5 shadow-sm"
-            >
-              <Printer className="h-3.5 w-3.5" />
-              {t('print')}
-            </Button>
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={handleDownload}
-              disabled={!result.html}
-              className="h-8 rounded-md font-medium text-xs gap-1.5 shadow-sm"
-            >
-              <Download className="h-3.5 w-3.5" />
-              {t('download')}
-            </Button>
-          </div>
-        </div>
-
-        {/* 错误拦截提示框 */}
-        {error && (
-          <div
-            role="alert"
-            className="p-3.5 bg-destructive/10 border border-destructive/20 rounded-xl text-destructive text-xs font-semibold tracking-wide"
-          >
-            {error}
-          </div>
-        )}
-
-        {/* 主框架多栏联动排版轴 */}
-        <div
-          className={cn(
-            'grid gap-4 min-h-[480px] w-full',
-            showInput && showPreview ? 'grid-cols-1 md:grid-cols-2' : 'grid-cols-1',
-          )}
-        >
-          {/* Markdown 输入翼终端 */}
-          {showInput && (
-            <div className="border border-border rounded-xl bg-card text-card-foreground shadow-sm overflow-hidden flex flex-col focus-within:ring-1 focus-within:ring-ring focus-within:border-ring">
-              <div className="flex h-9 items-center justify-between px-4 bg-muted/50 border-b border-border select-none">
-                <span className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider">
-                  {t('inputLabel')}
-                </span>
-                <span className="text-[10px] font-mono text-muted-foreground/60 tabular-nums">
-                  {t('charCount', { count: markdown.length })}
-                </span>
-              </div>
-              <textarea
-                value={markdown}
-                onChange={(e) => setMarkdown(e.target.value)}
-                placeholder={t('inputPlaceholder')}
-                className="flex-1 min-h-[390px] p-4 bg-transparent font-mono text-xs leading-relaxed resize-none focus:outline-none text-foreground/90 select-text"
-              />
-            </div>
-          )}
-
-          {/* 实时 HTML/Iframe 预览翼终端 */}
-          {showPreview && (
-            <div className="border border-border rounded-xl bg-card text-card-foreground shadow-sm overflow-hidden flex flex-col">
-              <div className="flex h-9 items-center justify-between px-4 bg-muted/50 border-b border-border select-none">
-                <span className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider">
-                  {(previewMode as string) === 'html' ? t('htmlOutputLabel') : t('previewLabel')}
-                </span>
-                <div className="flex items-center gap-2">
-                  <span className="text-[10px] font-mono text-muted-foreground/60 tabular-nums">
-                    {t('charCount', { count: result.htmlLength })}
-                  </span>
-                  <CopyButton
-                    text={result.html}
-                    className="h-6 w-6 rounded-md border text-muted-foreground"
-                  />
-                </div>
-              </div>
-
-              {(previewMode as string) === 'html' ? (
-                <textarea
-                  value={result.html}
-                  readOnly
-                  className="flex-1 min-h-[390px] p-4 font-mono text-xs leading-relaxed resize-none focus:outline-none bg-muted/30 dark:bg-muted/10 text-foreground/80 select-text"
-                />
-              ) : (
-                <div className="flex-1 min-h-[390px] overflow-hidden bg-transparent">
-                  <iframe
-                    ref={iframeRef}
-                    title="markdown-preview"
-                    className="w-full h-full min-h-[360px] border-none bg-transparent"
-                  />
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}

pages/QrCode/__tests__/index.test.tsx

@@ -1,98 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { fireEvent, render, screen } from '@testing-library/react';
-import QrCodePage from '../index';
-
-vi.mock('lucide-react', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('lucide-react')>();
-  return {
-    ...actual,
-    // 增量伪造需要高精嗅探的 QrCode 核心定位图标
-    QrCode: () => <div data-testid="mock-lucide-qrcode">Icon</div>,
-  };
-});
-
-// Mock useLazyTranslation
-vi.mock('@/utils/useLazyTranslation', () => ({
-  useLazyTranslation: () => ({
-    t: (key: string) => key,
-    i18n: { changeLanguage: vi.fn(), language: 'zh-CN' },
-    isLoaded: true,
-  }),
-}));
-
-// Mock useSnackbar
-vi.mock('@/components/GlobalSnackbar', () => ({
-  useSnackbar: () => ({
-    showMessage: vi.fn(),
-  }),
-}));
-
-// Mock getEntryPointType（保留原厂其他特征配置，仅模拟入口路由环境）
-vi.mock('@/config/features', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@/config/features')>();
-  return {
-    ...actual,
-    getEntryPointType: () => 'sidepanel',
-  };
-});
-
-// Mock 高频变化的子组件，收拢断言边界
-vi.mock('@/components/QrCodePreview', () => ({
-  default: () => <div data-testid="qr-code-preview">QrCodePreview</div>,
-}));
-
-vi.mock('@/components/ImageUploader', () => ({
-  default: () => <div data-testid="image-uploader">ImageUploader</div>,
-}));
-
-// Mock QRious 动态图像离屏生成引擎
-vi.mock('qrious', () => ({
-  default: vi.fn().mockImplementation(() => ({
-    toDataURL: () => 'data:image/png;base64,mock',
-  })),
-}));
-
-describe('QrCodePage', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it('应该默认渲染生成模式', () => {
-    render(<QrCodePage />);
-    expect(screen.getByTestId('qr-code-preview')).toBeInTheDocument();
-  });
-
-  it('应该渲染模式切换按钮', () => {
-    render(<QrCodePage />);
-    expect(screen.getByText('qrCode:urlToQr')).toBeInTheDocument();
-    expect(screen.getByText('qrCode:qrToUrl')).toBeInTheDocument();
-  });
-
-  it('切换到解析模式应该渲染 ImageUploader', () => {
-    render(<QrCodePage />);
-    fireEvent.click(screen.getByText('qrCode:qrToUrl'));
-    expect(screen.getByTestId('image-uploader')).toBeInTheDocument();
-    expect(screen.queryByTestId('qr-code-preview')).not.toBeInTheDocument();
-  });
-
-  it('切换回生成模式应该渲染 QrCodePreview', () => {
-    render(<QrCodePage />);
-    // 先切换到解析模式
-    fireEvent.click(screen.getByText('qrCode:qrToUrl'));
-    expect(screen.getByTestId('image-uploader')).toBeInTheDocument();
-    // 再切换回生成模式
-    fireEvent.click(screen.getByText('qrCode:urlToQr'));
-    expect(screen.getByTestId('qr-code-preview')).toBeInTheDocument();
-  });
-
-  it('应该渲染输入区域的系统标签（对齐新版 Label 机制）', () => {
-    render(<QrCodePage />);
-    expect(screen.getByText('qrCode:urlInputLabel')).toBeInTheDocument();
-  });
-
-  it('应该渲染双翼响应式卡片网格布局', () => {
-    const { container } = render(<QrCodePage />);
-    const gridContainer = container.querySelector('.grid');
-    expect(gridContainer).toBeInTheDocument();
-  });
-});

pages/QrCode/components/GeneratePanel.tsx

@@ -1,57 +0,0 @@
-import TextInputArea from '@/components/TextInputArea';
-import QrCodePreview from '@/components/QrCodePreview';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
-import { useQrCodeContext } from '../contexts/QrCodeContext';
-import { Label } from '@/components/ui/label';
-import { cn } from '@/lib/utils';
-
-export default function GeneratePanel() {
-  const { t } = useLazyTranslation('qrCode');
-  const { generatorState, setTextToEncode, downloadQrCode, copyQrCode } = useQrCodeContext();
-
-  return (
-    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full items-stretch select-none p-0.5">
-      {/* 左翼：高性能受控输入翼终端 */}
-      <div
-        className={cn(
-          'border border-border rounded-xl bg-card text-card-foreground shadow-sm flex flex-col p-4',
-          'focus-within:ring-1 focus-within:ring-ring focus-within:border-ring',
-        )}
-      >
-        {/* 💡 2. 独立外置标签架（A11y 无障碍对齐）：
-           - 彻底删掉 TextInputArea 上引发崩溃的违规属性。
-           - 改用正统的 <Label />，并注入标准的高度无障碍样式，间距比例极度平滑。
-        */}
-        <div className="flex flex-col space-y-2.5 h-full">
-          <Label className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider select-none pl-0.5">
-            {t('qrCode:urlInputLabel')}
-          </Label>
-
-          <div className="flex-1 min-h-0">
-            <TextInputArea
-              value={generatorState.textToEncode}
-              onChange={setTextToEncode}
-              placeholder={t('qrCode:urlInputPlaceholder')}
-              showCount={true}
-              showClear={true}
-              allowCopy={true}
-              minRows={6}
-              maxRows={12}
-              externalError={generatorState.inputError || undefined}
-              onClear={() => setTextToEncode('')}
-            />
-          </div>
-        </div>
-      </div>
-
-      {/* 右翼：活态二维码高精生成区 */}
-      <div className="flex flex-col h-full">
-        <QrCodePreview
-          qrCodeDataUrl={generatorState.qrCodeDataUrl}
-          onDownload={downloadQrCode}
-          onCopy={copyQrCode}
-        />
-      </div>
-    </div>
-  );
-}

pages/QrCode/hooks/useQrCode.ts

@@ -1,207 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-import QRious from 'qrious';
-import { useSnackbar } from '@/components/GlobalSnackbar';
-import { parseQrCodeFromFile } from '@/utils/qrCodeParser';
-import { useContextMenuData } from '@/utils/useContextMenuData';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
-import { useDebounce } from '@/utils/useDebounce';
-import type { QrCodeContextValue } from '../contexts/QrCodeContext';
-import type { QrCodeGeneratorState, QrCodeMode, QrCodeParserState } from '../types';
-
-export function useQrCode(): QrCodeContextValue {
-  const { t } = useLazyTranslation('qrCode');
-  const { showMessage } = useSnackbar();
-
-  // 核心路由视图模式
-  const [mode, setMode] = useState<QrCodeMode>('generate');
-
-  // 1. 生成器状态流（大幅瘦身：剔除 generating 状态）
-  const [generatorState, setGeneratorState] = useState<
-    Omit<QrCodeGeneratorState, 'generating' | 'qrCodeDataUrl'>
-  >({
-    textToEncode: '',
-    inputError: '',
-  });
-
-  // 2. 解析器状态流
-  const [parserState, setParserState] = useState<QrCodeParserState>({
-    decodedResult: '',
-    parsing: false,
-    parseError: '',
-    selectedFile: null,
-    previewUrl: '',
-    dragging: false,
-  });
-
-  // 3. 高频打字极速防抖
-  const debouncedTextToEncode = useDebounce(generatorState.textToEncode, 200);
-
-  // 💡 4. 贯彻方案 A（无副作用超导管线）：
-  // 彻底删除原有的 generateQrCodeRef、3个 useEffect、1个 useRef 以及相关的复杂状态机。
-  // 二维码画布纯粹作为防抖文本的派生变量同步算出，0重绘死循环风险，体验平滑如镜！
-  const qrCodeDataUrl = useMemo(() => {
-    const text = debouncedTextToEncode.trim();
-    if (!text) return '';
-
-    try {
-      let url = text;
-      if (!url.startsWith('http://') && !url.startsWith('https://')) {
-        url = 'https://' + url;
-      }
-
-      // 💡 暗黑模式自适应大闸：实时嗅探系统 DOM 阶度
-      const isDark = document.documentElement.classList.contains('dark');
-
-      const qr = new QRious({
-        value: url,
-        size: 260,
-        level: 'H',
-        // 暗黑模式下使用透明底、月白前景色；白天模式下使用标准现代黑白配
-        foreground: isDark ? '#f3f4f6' : '#0f172a',
-        background: isDark ? 'transparent' : '#ffffff',
-      });
-
-      return qr.toDataURL();
-    } catch (error) {
-      console.error('QR code generation sync task failed:', error);
-      return '';
-    }
-  }, [debouncedTextToEncode]);
-
-  // 融合派生数据至完整状态体，满足外部组件强类型契合
-  const fullGeneratorState = useMemo<QrCodeGeneratorState>(
-    () => ({
-      ...generatorState,
-      qrCodeDataUrl,
-      generating: false,
-    }),
-    [generatorState, qrCodeDataUrl],
-  );
-
-  // 设置输入文本
-  const setTextToEncode = useCallback((text: string) => {
-    setGeneratorState((prev) => ({ ...prev, textToEncode: text, inputError: '' }));
-  }, []);
-
-  // 处理右键菜单数据上下文
-  const handleContextMenuData = useCallback((payload: string) => {
-    setMode('generate');
-    setGeneratorState((prev) => ({ ...prev, textToEncode: payload, inputError: '' }));
-  }, []);
-
-  useContextMenuData({ featureKey: 'qrCode', onData: handleContextMenuData });
-
-  // 反向活态解析二维码算法
-  const parseQrCode = useCallback(
-    async (file: File) => {
-      try {
-        setParserState((prev) => ({ ...prev, parsing: true, parseError: '', decodedResult: '' }));
-
-        const result = await parseQrCodeFromFile(file);
-
-        if (result.success && result.data) {
-          setParserState((prev) => ({ ...prev, decodedResult: result.data! }));
-          showMessage(t('qrCode:parseSuccess'), { severity: 'success', autoHideDuration: 1000 });
-        } else {
-          const errorMsg = result.error || t('qrCode:noQrDetected');
-          setParserState((prev) => ({ ...prev, parseError: errorMsg }));
-          showMessage(errorMsg, { severity: 'error', autoHideDuration: 3000 });
-        }
-      } catch (error) {
-        console.error('解析二维码失败:', error);
-        const errorMsg = error instanceof Error ? error.message : t('qrCode:parseError');
-        setParserState((prev) => ({ ...prev, parseError: errorMsg }));
-        showMessage(errorMsg, { severity: 'error', autoHideDuration: 3000 });
-      } finally {
-        setParserState((prev) => ({ ...prev, parsing: false }));
-      }
-    },
-    [t, showMessage],
-  );
-
-  // 下载二维码
-  const downloadQrCode = useCallback(() => {
-    if (!qrCodeDataUrl) return;
-
-    const link = document.createElement('a');
-    link.href = qrCodeDataUrl;
-    link.download = 'qrcode.png';
-    link.click();
-    showMessage(t('qrCode:qrCodeDownloadSuccess'), { severity: 'success', autoHideDuration: 1000 });
-  }, [qrCodeDataUrl, showMessage, t]);
-
-  // 复制二维码至剪贴板
-  const copyQrCode = useCallback(async () => {
-    if (!qrCodeDataUrl) return;
-
-    try {
-      const response = await fetch(qrCodeDataUrl);
-      const blob = await response.blob();
-
-      await navigator.clipboard.write([
-        new ClipboardItem({
-          'image/png': blob,
-        }),
-      ]);
-
-      showMessage(t('qrCode:qrCodeCopySuccess'), { severity: 'success', autoHideDuration: 1000 });
-    } catch (error) {
-      console.error('复制二维码失败:', error);
-      showMessage(t('qrCode:copyError'), { severity: 'error', autoHideDuration: 3000 });
-    }
-  }, [qrCodeDataUrl, showMessage, t]);
-
-  // 处理文件选择
-  const handleFileChange = useCallback(
-    (file: File) => {
-      setParserState((prev) => {
-        if (prev.previewUrl) {
-          URL.revokeObjectURL(prev.previewUrl);
-        }
-        return {
-          ...prev,
-          selectedFile: file,
-          previewUrl: URL.createObjectURL(file),
-          decodedResult: '',
-          parseError: '',
-        };
-      });
-
-      // 触发解析安全的后台 Promise
-      parseQrCode(file).catch((err) => {
-        console.error('Parser standalone task thread exploded:', err);
-      });
-    },
-    [parseQrCode],
-  );
-
-  // 清除解析受控文件
-  const handleClearFile = useCallback(() => {
-    setParserState((prev) => {
-      if (prev.previewUrl) {
-        URL.revokeObjectURL(prev.previewUrl);
-      }
-      return {
-        ...prev,
-        selectedFile: null,
-        previewUrl: '',
-        decodedResult: '',
-        parseError: '',
-      };
-    });
-  }, []);
-
-  return {
-    mode,
-    setMode,
-    generatorState: fullGeneratorState,
-    setTextToEncode,
-    parseQrCode,
-    downloadQrCode,
-    copyQrCode,
-    parserState,
-    setParserState,
-    handleFileChange,
-    handleClearFile,
-  };
-}

pages/StorageCleaner/OptionItem.tsx

@@ -1,81 +0,0 @@
-import React from 'react';
-import { formatSize } from '@/utils/storageCleaner';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
-import { cn } from '@/lib/utils';
-// 引入官方的 Checkbox 原子组件
-import { Checkbox } from '@/components/ui/checkbox';
-
-interface OptionItemProps extends React.HTMLAttributes<HTMLDivElement> {
-  labelKey: string;
-  checked: boolean;
-  size?: number;
-  isCount?: boolean;
-  onChange: () => void;
-}
-
-export default function OptionItem({
-  labelKey,
-  checked,
-  size,
-  isCount = false,
-  onChange,
-  className,
-  ...props
-}: OptionItemProps) {
-  const { t } = useLazyTranslation('storageCleaner');
-
-  return (
-    <div
-      // 3. 跨越级交互升级：将外部容器升级为一个高度敏感的可点击 Tab 热区
-      onClick={onChange}
-      className={cn(
-        'flex justify-between items-center py-2.5 px-3.5 rounded-xl border cursor-pointer select-none',
-        // 4. 彻底抛弃硬编码黄底：
-        // - 选中时：使用 bg-primary/5 (系统主色超淡叠加) 配合标准 border-primary/30。
-        // - 未选中时：保持透明 border-transparent，悬停呈现 bg-muted。
-        // 这样在暗黑模式下会自动无缝混色，极为深邃、高级。
-        checked
-          ? 'bg-primary/5 border-primary/30 shadow-sm'
-          : 'bg-transparent border-transparent hover:bg-muted/70',
-        className,
-      )}
-      {...props}
-    >
-      {/* 左侧数据区域 */}
-      <div className="flex-1 min-w-0 mr-4">
-        <span
-          className={cn(
-            'block text-xs font-semibold leading-tight truncate',
-            checked ? 'text-foreground font-bold' : 'text-foreground/80',
-          )}
-        >
-          {t(labelKey)}
-        </span>
-
-        {/* 底部容量大小或计数标识 */}
-        {size !== undefined && size > 0 ? (
-          <span className="block text-[10px] font-mono font-medium text-muted-foreground/80 mt-0.5 tabular-nums">
-            {isCount ? `${size} ${t('storageCleaner:countUnit')}` : formatSize(size)}
-          </span>
-        ) : (
-          <span className="block text-[10px] font-medium text-muted-foreground/60 mt-0.5 italic">
-            {t('storageCleaner:noData')}
-          </span>
-        )}
-      </div>
-
-      {/* 5. 超进化：全面替换原生 input 标签
-        完美调用 shadcn 的 Checkbox 组件。它自带全站统一的主色（Primary）、
-        打钩选中时的平滑微放大缩放动效（Scale Animation），
-        并且阻止冒泡，防范与外层的全局覆盖点击事件产生双重冲突。
-      */}
-      <Checkbox
-        checked={checked}
-        // 阻止 Checkbox 自身的点击事件冒泡，因为外层 div 已经代理了点击逻辑
-        onClick={(e) => e.stopPropagation()}
-        onCheckedChange={onChange}
-        className="h-4 w-4 shrink-0 rounded border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
-      />
-    </div>
-  );
-}

pages/StorageCleaner/StorageOptionsGrid.tsx

@@ -1,98 +0,0 @@
-import React from 'react';
-import type { StorageCleanerOptions } from '@/types/storage';
-import OptionItem from './OptionItem';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
-import { cn } from '@/lib/utils';
-// 1. 引入官方标准的 Checkbox 原子组件
-import { Checkbox } from '@/components/ui/checkbox';
-import { Label } from '@/components/ui/label';
-
-interface StorageOptionsGridProps extends React.HTMLAttributes<HTMLDivElement> {
-  options: StorageCleanerOptions;
-  sizes: Record<string, number>;
-  allSelected: boolean;
-  someSelected: boolean; // 重新激活半选状态
-  onOptionChange: (key: keyof StorageCleanerOptions) => void;
-  onSelectAll: (checked: boolean) => void;
-}
-
-export default function StorageOptionsGrid({
-  options,
-  sizes,
-  allSelected,
-  someSelected,
-  onOptionChange,
-  onSelectAll,
-  className,
-  ...props
-}: StorageOptionsGridProps) {
-  const { t } = useLazyTranslation('storageCleaner');
-
-  const optionKeys: { key: keyof StorageCleanerOptions; isCount?: boolean }[] = [
-    { key: 'localStorage' },
-    { key: 'sessionStorage' },
-    { key: 'indexedDB' },
-    { key: 'cookies' },
-    { key: 'cacheStorage', isCount: true },
-    { key: 'serviceWorkers', isCount: true },
-  ];
-
-  // 2. 处理全选栏点击事件：包裹整个栏变成超级热区
-  const handleToggleAll = () => {
-    // 如果当前已经是全选，点击则取消全选；否则，点击就是全选
-    onSelectAll(!allSelected);
-  };
-
-  return (
-    <div
-      className={cn(
-        'w-full rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden',
-        className,
-      )}
-      {...props}
-    >
-      {/* 核心网格区 */}
-      <div className="p-3">
-        {/* 💡 优化点：加入 items-stretch，确保左右卡片高度绝对对齐 */}
-        <div className="grid grid-cols-2 gap-2.5 items-stretch">
-          {optionKeys.map(({ key, isCount }) => (
-            /* 💡 终极修复：直接把 key 挂在 OptionItem 上，移除了无意义的包裹 div */
-            <OptionItem
-              key={key}
-              labelKey={`storageCleaner:options.${key}`}
-              checked={options[key]}
-              size={sizes[key]}
-              isCount={isCount}
-              onChange={() => onOptionChange(key)}
-            />
-          ))}
-        </div>
-      </div>
-
-      {/* 3. 全选功能底护栏超进化：
-        - 整体赋予 cursor-pointer 和 onClick，点击一整行都能触发全选。
-        - 悬停时自动变色提示可点击 (hover:bg-muted/50)。
-      */}
-      <div
-        onClick={handleToggleAll}
-        className="border-t border-border flex justify-between items-center px-4 py-2.5 bg-muted/20 hover:bg-muted/50 cursor-pointer select-none"
-      >
-        <Label className="text-xs font-bold text-muted-foreground/90 cursor-pointer">
-          {t('storageCleaner:selectAll')}
-        </Label>
-
-        {/* 4. 降维打击：调用标准的 shadcn/ui Checkbox
-          - 阻止冒泡：防止事件重复触发。
-          - 完美注入半选逻辑：当 allSelected 为 false 但 someSelected 为 true 时，
-            组件会自动呈现优雅的 "—" (减号) 半选视觉状态，向主流系统控制台高标准看齐！
-        */}
-        <Checkbox
-          checked={allSelected ? true : someSelected ? 'indeterminate' : false}
-          onClick={(e) => e.stopPropagation()}
-          onCheckedChange={(checked) => onSelectAll(checked === true)}
-          className="h-4 w-4 shrink-0 rounded border-input data-[state=checked]:bg-primary data-[state=indeterminate]:bg-primary"
-        />
-      </div>
-    </div>
-  );
-}

pages/StorageCleaner/index.tsx

@@ -1,92 +0,0 @@
-import { Loader2 } from 'lucide-react'; // 引入标准的高级阻尼 Spinner 图标
-import { Button } from '@/components/ui/button';
-import StorageCleanerConfirm from '@/pages/StorageCleaner/StorageCleanerConfirm';
-import { useStorageCleaner } from './useStorageCleaner';
-import StorageOptionsGrid from './StorageOptionsGrid';
-import AutoRefreshToggle from './AutoRefreshToggle';
-import ErrorDisplay from './ErrorDisplay';
-import CleaningResult from './CleaningResult';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
-
-export default function Index() {
-  const { t } = useLazyTranslation('storageCleaner');
-
-  const {
-    error,
-    isInitializing,
-    options,
-    sizes,
-    reloadAfterClean,
-    loading,
-    result,
-    showConfirm,
-    setShowConfirm,
-    allSelected,
-    someSelected,
-    handleReloadAfterCleanChange,
-    handleOptionChange,
-    handleSelectAll,
-    handleClean,
-  } = useStorageCleaner();
-
-  const isButtonDisabled = !(someSelected || allSelected) || loading;
-
-  if (isInitializing) {
-    return (
-      <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" />
-        <span className="text-xs text-muted-foreground mt-2 font-medium tracking-wide">
-          {t('storageCleaner:initializing')}
-        </span>
-      </div>
-    );
-  }
-
-  if (error) {
-    return <ErrorDisplay error={error} />;
-  }
-
-  return (
-    <div className="p-4 w-full flex flex-col space-y-3.5">
-      <StorageOptionsGrid
-        options={options}
-        sizes={sizes}
-        allSelected={allSelected}
-        someSelected={someSelected}
-        onOptionChange={handleOptionChange}
-        onSelectAll={handleSelectAll}
-      />
-
-      <AutoRefreshToggle
-        reloadAfterClean={reloadAfterClean}
-        onChange={handleReloadAfterCleanChange}
-      />
-
-      <Button
-        variant="destructive"
-        size="default"
-        onClick={() => setShowConfirm(true)}
-        disabled={isButtonDisabled}
-        className="w-full h-10 font-bold shadow-sm text-sm tracking-wide"
-      >
-        {loading ? (
-          <>
-            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-            {t('storageCleaner:cleaning')}
-          </>
-        ) : (
-          t('storageCleaner:cleanNow')
-        )}
-      </Button>
-
-      <CleaningResult result={result} />
-
-      <StorageCleanerConfirm
-        open={showConfirm}
-        onClose={() => setShowConfirm(false)}
-        onConfirm={handleClean}
-        options={options}
-      />
-    </div>
-  );
-}

pages/Timestamp/LiveClock.tsx

@@ -1,99 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { Clock } from 'lucide-react';
-import CopyButton from '@/components/CopyButton';
-import { useSnackbar } from '@/components/GlobalSnackbar';
-import type { UnitType } from './constants';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
-import { cn } from '@/lib/utils'; // 引入标准的 shadcn 工具函数
-
-interface LiveClockProps extends React.HTMLAttributes<HTMLDivElement> {
-  unit: UnitType;
-  onUseNow: (val: number) => void;
-}
-
-const LiveClock = React.memo(({ unit, onUseNow, className, ...props }: LiveClockProps) => {
-  const { t } = useLazyTranslation('timestamp');
-  const { showMessage } = useSnackbar();
-  const onUseNowRef = useRef(onUseNow);
-
-  // 1. 采用毫秒/秒的双态原子计数，避免无意义的重绘
-  const [currentDisplay, setCurrentDisplay] = useState(() => {
-    const initNow = Date.now();
-    return {
-      rawTime: initNow,
-      text: String(Math.floor(initNow / (unit === 'ms' ? 1 : 1000))),
-    };
-  });
-
-  // 始终保持外部回调指针最新
-  useEffect(() => {
-    onUseNowRef.current = onUseNow;
-  }, [onUseNow]);
-
-  // 2. 高频高灵敏度计时器 (200ms 刷新率)
-  useEffect(() => {
-    const tick = () => {
-      const rightNow = Date.now();
-      const nextText = String(Math.floor(rightNow / (unit === 'ms' ? 1 : 1000)));
-
-      // 性能核心：只有当生成的文本内容发生变化时，才触发 React 的 State 更新。
-      // 在“秒(s)”单位下，这可以让组件的渲染频率暴跌 90%，做到极度省电和高性能。
-      setCurrentDisplay((prev) => {
-        if (prev.text === nextText) return prev;
-        return { rawTime: rightNow, text: nextText };
-      });
-    };
-
-    // 200ms 的高速低延迟轮询，比 1000ms 更具响应灵敏度，且因为上面有过滤，完全不用担心引发性能损耗
-    const tickId = setInterval(tick, 200);
-    return () => clearInterval(tickId);
-  }, [unit]);
-
-  const handleUseNow = useCallback(() => {
-    // 捕获真实极其精准的绝对时间戳
-    onUseNowRef.current(currentDisplay.rawTime);
-    showMessage?.(t('timestamp:usedSuccess'), { severity: 'success' });
-  }, [currentDisplay.rawTime, showMessage, t]);
-
-  return (
-    <div
-      className={cn(
-        // 3. 完美适配 shadcn 暗黑模式：
-        // 不再写死 bg-primary/10，改用更高级的 bg-secondary/50 和中性边框，
-        // 在任何主题色下都能表现得低调且极具质感。
-        'flex items-center gap-3 px-3 h-10 rounded-lg border border-border/80 bg-secondary/50',
-        className,
-      )}
-      {...props}
-    >
-      <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>
-
-      {/* 4. tabular-nums 强制使用等宽数字布局，彻底消灭数字跳动时字符宽度不同带来的抖动颤噪感 */}
-      <span className="flex-1 font-mono font-bold text-foreground text-sm tracking-tight leading-none truncate tabular-nums">
-        {currentDisplay.text}
-      </span>
-
-      {/* 5. 按钮重构成精巧的 shadcn 原子微动效风格 */}
-      <button
-        type="button"
-        onClick={handleUseNow}
-        title={t('timestamp:useNowTooltip')}
-        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" />
-      </button>
-
-      <CopyButton
-        text={currentDisplay.text}
-        tooltip={t('timestamp:copyTsTooltip')}
-        className="h-7 w-7 rounded-md border"
-      />
-    </div>
-  );
-});
-
-LiveClock.displayName = 'LiveClock';
-
-export default LiveClock;

pages/Timestamp/ResultView.tsx

@@ -1,131 +0,0 @@
-import React, { useMemo } from 'react';
-import dayjs from '@/utils/dayjs';
-import CopyButton from '@/components/CopyButton';
-import type { UnitType } from './constants';
-import { DATE_FORMAT } from './constants';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
-import { cn } from '@/lib/utils'; // shadcn 核心类名合并工具
-
-interface ResultViewProps extends React.HTMLAttributes<HTMLDivElement> {
-  result: string;
-  mode: 'ts2dt' | 'dt2ts';
-  unit: UnitType;
-  zone: string;
-  /** 无结果时是否渲染占位（桌面端右栏使用），默认 false */
-  showEmptyPlaceholder?: boolean;
-}
-
-const ResultView = React.memo(
-  ({
-    result,
-    mode,
-    unit,
-    zone,
-    showEmptyPlaceholder = false,
-    className,
-    ...props
-  }: ResultViewProps) => {
-    const { t } = useLazyTranslation('timestamp');
-
-    // 严谨计算时间衍生的附加时区/相对时间状态
-    const extraInfo = useMemo(() => {
-      if (!result) return null;
-      const d =
-        mode === 'ts2dt'
-          ? dayjs(result, DATE_FORMAT).tz(zone)
-          : unit === 'ms'
-            ? dayjs(Number(result))
-            : dayjs.unix(Number(result));
-
-      return {
-        relative: d.fromNow(),
-        iso: d.toISOString(),
-        utc: d.utc().format(DATE_FORMAT) + ' UTC',
-      };
-    }, [result, mode, zone, unit]);
-
-    // 1. 空状态骨架面板：优雅匹配 shadcn 的中性灰色居中占位
-    if (!result) {
-      if (!showEmptyPlaceholder) return null;
-      return (
-        <div
-          className={cn(
-            'flex-1 flex items-center justify-center text-sm font-medium border border-dashed border-border/60 rounded-xl py-12 px-4 text-center text-muted-foreground bg-muted/20 min-h-[320px]',
-            className,
-          )}
-          {...props}
-        >
-          {t('timestamp:resultEmpty')}
-        </div>
-      );
-    }
-
-    return (
-      <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">
-          {t('timestamp:resultLabel')}
-        </span>
-
-        {/*
-          2. 核心结果大卡片：
-          对齐 shadcn 官方卡片风格，使用 bg-card、border-border 构筑多层级阴影。
-          核心数值直接拉粗为 text-foreground (在黑夜模式下会自动转为大气的纯白，完美避开刺眼强光)
-        */}
-        <div className="bg-card text-card-foreground border border-border p-4 sm:p-5 rounded-xl relative mb-3.5 shadow-sm flex justify-between items-center gap-4 focus-within:ring-1 focus-within:ring-ring">
-          <span className="font-mono font-extrabold text-foreground break-all text-xl sm:text-2xl tracking-tight leading-tight select-all tabular-nums">
-            {result}
-          </span>
-          <CopyButton
-            text={result}
-            tooltip={t('timestamp:copyResultTooltip')}
-            className="h-8 w-8 rounded-md shrink-0 border"
-          />
-        </div>
-
-        {/*
-          3. 衍生的附加参考数据区：
-          背景改为低饱和度的 bg-muted/40 隔离带。
-          内部数值降级为 text-muted-foreground，建立教科书般的完美“视觉权重层级”。
-        */}
-        <div className="bg-muted/40 p-4 rounded-xl border border-border/50 flex flex-col gap-3">
-          {[
-            { label: t('timestamp:relativeTime'), value: extraInfo?.relative },
-            { label: t('timestamp:iso8601'), value: extraInfo?.iso, isMono: true },
-            { label: t('timestamp:utcTime'), value: extraInfo?.utc, isMono: true },
-          ].map((item) => (
-            <div
-              key={item.label}
-              className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-1.5 py-0.5 border-b border-border/30 last:border-0 pb-2 sm:pb-0 last:pb-0"
-            >
-              <span className="text-muted-foreground font-semibold text-xs shrink-0 select-none">
-                {item.label}
-              </span>
-              <div className="flex items-center justify-between sm:justify-end gap-2 min-w-0 w-full sm:w-auto">
-                <span
-                  className={cn(
-                    'text-xs text-foreground/90 font-medium break-all text-left sm:text-right tabular-nums',
-                    item.isMono && 'font-mono text-[11px]', // ISO/UTC 等机器时间使用精细化等宽代码体
-                  )}
-                >
-                  {item.value}
-                </span>
-                {item.value && (
-                  <CopyButton
-                    text={item.value}
-                    tooltip={t('timestamp:copyTooltip')}
-                    className="h-6 w-6 rounded-md border shrink-0 text-muted-foreground"
-                  />
-                )}
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    );
-  },
-);
-
-ResultView.displayName = 'ResultView';
-
-export default ResultView;

pages/Timestamp/constants.ts

@@ -1,6 +0,0 @@
-export const DATE_FORMAT = 'YYYY/MM/DD HH:mm:ss';
-
-export const ZONES = ['Asia/Shanghai', 'America/New_York', 'Europe/London'] as const;
-
-export type UnitType = 'ms' | 's';
-export type ZoneType = (typeof ZONES)[number];

pages/Timestamp/useTimestampConverter.ts

@@ -1,124 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-import dayjs from '@/utils/dayjs';
-import type { UnitType, ZoneType } from './constants';
-import { DATE_FORMAT } from './constants';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
-import { useContextMenuData } from '@/utils/useContextMenuData';
-
-export interface UseTimestampConverterReturn {
-  mode: 'ts2dt' | 'dt2ts';
-  input: string; // 统一为单一受控输入源
-  unit: UnitType;
-  zone: ZoneType;
-  result: string;
-  error: string;
-
-  setMode: (mode: 'ts2dt' | 'dt2ts') => void;
-  setInput: (value: string) => void;
-  setUnit: (unit: UnitType) => void;
-  setZone: (zone: ZoneType) => void;
-  handleUseNow: (now: number) => void;
-}
-
-function isTimestampLike(input: string): boolean {
-  const trimmed = input.trim();
-  return /^\d+$/.test(trimmed) && trimmed.length >= 10;
-}
-
-export function useTimestampConverter(): UseTimestampConverterReturn {
-  const { t } = useLazyTranslation('timestamp');
-  const [mode, setMode] = useState<'ts2dt' | 'dt2ts'>('ts2dt');
-  const [unit, setUnit] = useState<UnitType>('ms');
-  const [zone, setZone] = useState<ZoneType>('Asia/Shanghai');
-
-  // 1. 唯一受控源：不再区分 ts/dt，输入框在当前模式下展现的就是它的值
-  const [input, setInput] = useState(() => String(Date.now()));
-
-  // 2. 核心魔法：利用 useMemo 达成 0 延迟响应式转换 (Reactive Pipeline)
-  // 只要 input, mode, unit, zone 任何一个发生改变，结果和错误信息自动流出，废除 convert 按钮
-  const conversionPipeline = useMemo(() => {
-    const rawInput = input.trim();
-    if (!rawInput) return { result: '', error: '' };
-
-    if (mode === 'ts2dt') {
-      const num = Number(rawInput);
-      if (isNaN(num)) {
-        return { result: '', error: t('timestamp:errors.invalidNumber') };
-      }
-      const d = unit === 'ms' ? dayjs(num) : dayjs.unix(num);
-      if (!d.isValid()) {
-        return { result: '', error: t('timestamp:errors.invalidTimestamp') };
-      }
-      return { result: d.tz(zone).format(DATE_FORMAT), error: '' };
-    } else {
-      const d = dayjs.tz(rawInput, DATE_FORMAT, zone);
-      if (!d.isValid()) {
-        return { result: '', error: t('timestamp:errors.invalidFormat') };
-      }
-      const ms = d.valueOf();
-      const outputTs = unit === 'ms' ? String(ms) : String(Math.floor(ms / 1000));
-      return { result: outputTs, error: '' };
-    }
-  }, [input, mode, unit, zone, t]);
-
-  const { result, error } = conversionPipeline;
-
-  // 3. 处理右键菜单联动（直接修改唯一的 input，衍生转换自动触发）
-  const handleContextMenuData = useCallback((payload: string) => {
-    const trimmed = payload.trim();
-    if (isTimestampLike(trimmed)) {
-      setMode('ts2dt');
-      const detectedUnit: UnitType = trimmed.length >= 13 ? 'ms' : 's';
-      setUnit(detectedUnit);
-      setInput(trimmed);
-    } else {
-      const d = dayjs(trimmed);
-      if (d.isValid()) {
-        setMode('dt2ts');
-        setInput(d.format(DATE_FORMAT));
-      } else {
-        setMode('ts2dt');
-        setInput(trimmed);
-      }
-    }
-  }, []);
-
-  useContextMenuData({ featureKey: 'timestamp', onData: handleContextMenuData });
-
-  const handleUseNow = useCallback(
-    (now: number) => {
-      if (mode === 'ts2dt') {
-        setInput(String(unit === 'ms' ? now : Math.floor(now / 1000)));
-      } else {
-        setInput(dayjs(now).tz(zone).format(DATE_FORMAT));
-      }
-    },
-    [mode, unit, zone],
-  );
-
-  // 4. 尊享级连贯交互：切换 Mode 时，自动把上一个模式计算出的结果喂进输入框
-  // 比如：输入时间戳 -> 得到日期 -> 切换模式 -> 日期直接进入输入框，方便用户进行微调反向转换
-  const handleSetMode = useCallback(
-    (newMode: 'ts2dt' | 'dt2ts') => {
-      setMode(newMode);
-      if (result && !error) {
-        setInput(result);
-      }
-    },
-    [result, error],
-  );
-
-  return {
-    mode,
-    input,
-    unit,
-    zone,
-    result,
-    error,
-    setMode: handleSetMode,
-    setInput,
-    setUnit,
-    setZone,
-    handleUseNow,
-  };
-}

public/README.md

@@ -12,7 +12,6 @@
 | `icon/48.png`  | 48×48 图标（扩展管理页）         |
 | `icon/96.png`  | 96×96 图标                       |
 | `icon/128.png` | 128×128 图标（Chrome Web Store） |
-| `wxt.svg`      | WXT 框架标志 SVG 图标            |
 
 ## 注意事项
 

public/_locales/zh_CN/messages.json

@@ -0,0 +1,924 @@
+{
+  "buttons_copy": {
+    "message": "复制",
+    "description": "Translation key: buttons_copy"
+  },
+  "buttons_clear": {
+    "message": "清理",
+    "description": "Translation key: buttons_clear"
+  },
+
+  "messages_copySuccess": {
+    "message": "已复制到剪贴板",
+    "description": "Translation key: messages_copySuccess"
+  },
+  "messages_copyError": {
+    "message": "复制失败",
+    "description": "Translation key: messages_copyError"
+  },
+  "messages_copyEmpty": {
+    "message": "无内容可复制",
+    "description": "Translation key: messages_copyEmpty"
+  },
+  "errorBoundary_title": {
+    "message": "糟糕，出了点问题",
+    "description": "Translation key: errorBoundary_title"
+  },
+  "errorBoundary_description": {
+    "message": "应用遇到了一些意外错误。您可以尝试刷新页面或重置应用。",
+    "description": "Translation key: errorBoundary_description"
+  },
+  "errorBoundary_refresh": {
+    "message": "刷新应用",
+    "description": "Translation key: errorBoundary_refresh"
+  },
+  "errorBoundary_retry": {
+    "message": "重新尝试",
+    "description": "Translation key: errorBoundary_retry"
+  },
+  "pageErrorBoundary_title": {
+    "message": "该功能运行异常",
+    "description": "Translation key: pageErrorBoundary_title"
+  },
+  "pageErrorBoundary_description": {
+    "message": "该页面在加载或渲染时遇到了内部脚本错误。您可以尝试重试，或者通过导航菜单切换到其他工具。",
+    "description": "Translation key: pageErrorBoundary_description"
+  },
+  "router_notFound": {
+    "message": "页面未找到",
+    "description": "Translation key: router_notFound"
+  },
+  "router_notFoundDescription": {
+    "message": "该功能在当前运行环境（{{entryPointType}}）下不可用或已被移除。",
+    "description": "Translation key: router_notFoundDescription"
+  },
+  "textInputArea_clear": {
+    "message": "清空",
+    "description": "Translation key: textInputArea_clear"
+  },
+  "textInputArea_copyContent": {
+    "message": "复制内容",
+    "description": "Translation key: textInputArea_copyContent"
+  },
+  "textInputArea_cleared": {
+    "message": "已清空",
+    "description": "Translation key: textInputArea_cleared"
+  },
+  "textInputArea_placeholder": {
+    "message": "请输入文本",
+    "description": "Translation key: textInputArea_placeholder"
+  },
+  "dashboard_title": {
+    "message": "仪表盘",
+    "description": "Translation key: dashboard_title"
+  },
+  "dashboard_searchPlaceholder": {
+    "message": "搜索工具...",
+    "description": "Translation key: dashboard_searchPlaceholder"
+  },
+  "dashboard_recentlyUsed": {
+    "message": "最近使用",
+    "description": "Translation key: dashboard_recentlyUsed"
+  },
+  "dashboard_allTools": {
+    "message": "全部工具",
+    "description": "Translation key: dashboard_allTools"
+  },
+  "timestamp_title": {
+    "message": "时间戳",
+    "description": "Translation key: timestamp_title"
+  },
+  "timestamp_description": {
+    "message": "Unix 毫秒数转换与格式化",
+    "description": "Translation key: timestamp_description"
+  },
+  "storageCleaner_title": {
+    "message": "存储清理",
+    "description": "Translation key: storageCleaner_title"
+  },
+  "storageCleaner_description": {
+    "message": "清理缓存、Cookies 及本地存储",
+    "description": "Translation key: storageCleaner_description"
+  },
+  "qrCode_title": {
+    "message": "二维码工具",
+    "description": "Translation key: qrCode_title"
+  },
+  "qrCode_description": {
+    "message": "生成当前选中的 URL 的二维码",
+    "description": "Translation key: qrCode_description"
+  },
+  "textStatistics_title": {
+    "message": "文本统计",
+    "description": "Translation key: textStatistics_title"
+  },
+  "textStatistics_description": {
+    "message": "实时分析文本字符、单词及字节",
+    "description": "Translation key: textStatistics_description"
+  },
+  "jwt_title": {
+    "message": "JWT 解析",
+    "description": "Translation key: jwt_title"
+  },
+  "jwt_description": {
+    "message": "JSON Web Token 解码与查看",
+    "description": "Translation key: jwt_description"
+  },
+  "jsonDiff_title": {
+    "message": "JSON 工具",
+    "description": "Translation key: jsonDiff_title"
+  },
+  "jsonDiff_description": {
+    "message": "差异比较、格式化、YAML/TOML 转换及压缩",
+    "description": "Translation key: jsonDiff_description"
+  },
+  "base64Converter_title": {
+    "message": "Base64 转换器",
+    "description": "Translation key: base64Converter_title"
+  },
+  "base64Converter_description": {
+    "message": "文本、文件与图像的 Base64 编码转换",
+    "description": "Translation key: base64Converter_description"
+  },
+  "rightClickRestorer_title": {
+    "message": "右键恢复",
+    "description": "Translation key: rightClickRestorer_title"
+  },
+  "rightClickRestorer_description": {
+    "message": "检测并恢复被网站禁用的浏览器右键菜单",
+    "description": "Translation key: rightClickRestorer_description"
+  },
+  "base64Converter_pageTitle": {
+    "message": "Base64 转换器",
+    "description": "Translation key: base64Converter_pageTitle"
+  },
+  "base64Converter_textMode": {
+    "message": "文本",
+    "description": "Translation key: base64Converter_textMode"
+  },
+  "base64Converter_fileMode": {
+    "message": "文件",
+    "description": "Translation key: base64Converter_fileMode"
+  },
+  "base64Converter_imageMode": {
+    "message": "图像",
+    "description": "Translation key: base64Converter_imageMode"
+  },
+  "base64Converter_encode": {
+    "message": "编码",
+    "description": "Translation key: base64Converter_encode"
+  },
+  "base64Converter_decode": {
+    "message": "解码",
+    "description": "Translation key: base64Converter_decode"
+  },
+  "base64Converter_clear": {
+    "message": "清空",
+    "description": "Translation key: base64Converter_clear"
+  },
+  "base64Converter_textInputPlaceholder": {
+    "message": "输入需要编码为 Base64 的文本...",
+    "description": "Translation key: base64Converter_textInputPlaceholder"
+  },
+  "base64Converter_base64InputPlaceholder": {
+    "message": "输入需要解码的 Base64 字符串...",
+    "description": "Translation key: base64Converter_base64InputPlaceholder"
+  },
+  "base64Converter_base64Output": {
+    "message": "Base64 编码结果",
+    "description": "Translation key: base64Converter_base64Output"
+  },
+  "base64Converter_textOutput": {
+    "message": "解码文本结果",
+    "description": "Translation key: base64Converter_textOutput"
+  },
+  "base64Converter_copyRaw": {
+    "message": "复制纯 Base64",
+    "description": "Translation key: base64Converter_copyRaw"
+  },
+  "base64Converter_copyDataUri": {
+    "message": "复制 Data URI",
+    "description": "Translation key: base64Converter_copyDataUri"
+  },
+  "base64Converter_clickOrDropToFile": {
+    "message": "点击或拖拽文件到此处",
+    "description": "Translation key: base64Converter_clickOrDropToFile"
+  },
+  "base64Converter_clickOrDropToImage": {
+    "message": "点击或拖拽图像到此处",
+    "description": "Translation key: base64Converter_clickOrDropToImage"
+  },
+  "base64Converter_clickOrDropToReplace": {
+    "message": "点击或拖拽以替换文件",
+    "description": "Translation key: base64Converter_clickOrDropToReplace"
+  },
+  "base64Converter_maxFileSize": {
+    "message": "最大文件大小：{{max}}",
+    "description": "Translation key: base64Converter_maxFileSize"
+  },
+  "base64Converter_supportedFormats": {
+    "message": "支持 PNG、JPG、WEBP、GIF、BMP、SVG 等格式",
+    "description": "Translation key: base64Converter_supportedFormats"
+  },
+  "base64Converter_fileSizeExceeded": {
+    "message": "文件大小超出限制（最大 {{max}}）",
+    "description": "Translation key: base64Converter_fileSizeExceeded"
+  },
+  "base64Converter_unsupportedImageType": {
+    "message": "不支持的图像格式",
+    "description": "Translation key: base64Converter_unsupportedImageType"
+  },
+  "base64Converter_conversionFailed": {
+    "message": "转换失败",
+    "description": "Translation key: base64Converter_conversionFailed"
+  },
+  "base64Converter_originalSize": {
+    "message": "原始大小",
+    "description": "Translation key: base64Converter_originalSize"
+  },
+  "base64Converter_encodedSize": {
+    "message": "编码大小",
+    "description": "Translation key: base64Converter_encodedSize"
+  },
+  "base64Converter_invalidBase64": {
+    "message": "Base64 字符串无效",
+    "description": "Translation key: base64Converter_invalidBase64"
+  },
+  "base64Converter_binaryDataDetected": {
+    "message": "输入似乎是二进制数据（如图片）。请切换到「图像」选项卡。",
+    "description": "Translation key: base64Converter_binaryDataDetected"
+  },
+  "base64Converter_imageDataUriHint": {
+    "message": "检测到图片的 data URI，请使用「图像」选项卡进行解码。",
+    "description": "Translation key: base64Converter_imageDataUriHint"
+  },
+  "base64Converter_switchToImageMode": {
+    "message": "切换到图像模式",
+    "description": "Translation key: base64Converter_switchToImageMode"
+  },
+  "base64Converter_download": {
+    "message": "下载",
+    "description": "Translation key: base64Converter_download"
+  },
+  "base64Converter_decodedFileName": {
+    "message": "解码后文件名",
+    "description": "Translation key: base64Converter_decodedFileName"
+  },
+  "base64Converter_decodeBase64Placeholder": {
+    "message": "输入需要解码的 Base64 或 data URI...",
+    "description": "Translation key: base64Converter_decodeBase64Placeholder"
+  },
+  "base64Converter_decodedFileOutput": {
+    "message": "解码文件",
+    "description": "Translation key: base64Converter_decodedFileOutput"
+  },
+  "base64Converter_decodedImageOutput": {
+    "message": "解码图像",
+    "description": "Translation key: base64Converter_decodedImageOutput"
+  },
+  "base64Converter_inferredMimeType": {
+    "message": "推断的 MIME 类型",
+    "description": "Translation key: base64Converter_inferredMimeType"
+  },
+  "base64Converter_decodedSize": {
+    "message": "解码大小",
+    "description": "Translation key: base64Converter_decodedSize"
+  },
+  "jsonDiff_pageTitle": {
+    "message": "JSON 差异比较",
+    "description": "Translation key: jsonDiff_pageTitle"
+  },
+  "jsonDiff_leftPlaceholder": {
+    "message": "输入原始 JSON...",
+    "description": "Translation key: jsonDiff_leftPlaceholder"
+  },
+  "jsonDiff_rightPlaceholder": {
+    "message": "输入目标 JSON...",
+    "description": "Translation key: jsonDiff_rightPlaceholder"
+  },
+  "jsonDiff_leftLabel": {
+    "message": "原始 JSON",
+    "description": "Translation key: jsonDiff_leftLabel"
+  },
+  "jsonDiff_rightLabel": {
+    "message": "目标 JSON",
+    "description": "Translation key: jsonDiff_rightLabel"
+  },
+  "jsonDiff_sideBySideMode": {
+    "message": "并排",
+    "description": "Translation key: jsonDiff_sideBySideMode"
+  },
+  "jsonDiff_unifiedMode": {
+    "message": "统一",
+    "description": "Translation key: jsonDiff_unifiedMode"
+  },
+  "jsonDiff_previousDiff": {
+    "message": "上一个",
+    "description": "Translation key: jsonDiff_previousDiff"
+  },
+  "jsonDiff_nextDiff": {
+    "message": "下一个",
+    "description": "Translation key: jsonDiff_nextDiff"
+  },
+  "jsonDiff_noDiffs": {
+    "message": "无差异",
+    "description": "Translation key: jsonDiff_noDiffs"
+  },
+  "jsonDiff_invalidJson": {
+    "message": "无效的 JSON 格式",
+    "description": "Translation key: jsonDiff_invalidJson"
+  },
+  "jsonDiff_emptyHint": {
+    "message": "输入两侧 JSON 后点击比较",
+    "description": "Translation key: jsonDiff_emptyHint"
+  },
+  "jsonDiff_fixErrorHint": {
+    "message": "请修正上方 JSON 的语法错误以开启实时流式比对",
+    "description": "Translation key: jsonDiff_fixErrorHint"
+  },
+  "jsonDiff_added": {
+    "message": "新增",
+    "description": "Translation key: jsonDiff_added"
+  },
+  "jsonDiff_removed": {
+    "message": "删除",
+    "description": "Translation key: jsonDiff_removed"
+  },
+  "jsonDiff_modified": {
+    "message": "修改",
+    "description": "Translation key: jsonDiff_modified"
+  },
+  "jsonFormat_inputPlaceholder": {
+    "message": "输入需要格式化的 JSON...",
+    "description": "Translation key: jsonFormat_inputPlaceholder"
+  },
+  "jsonFormat_sortKeys": {
+    "message": "键名排序",
+    "description": "Translation key: jsonFormat_sortKeys"
+  },
+  "jsonFormat_indentSize": {
+    "message": "缩进",
+    "description": "Translation key: jsonFormat_indentSize"
+  },
+  "jsonFormat_outputLabel": {
+    "message": "格式化结果",
+    "description": "Translation key: jsonFormat_outputLabel"
+  },
+  "jsonFormat_invalidJson": {
+    "message": "无效的 JSON 格式",
+    "description": "Translation key: jsonFormat_invalidJson"
+  },
+  "jsonFormat_emptyHint": {
+    "message": "输入 JSON 后点击格式化",
+    "description": "Translation key: jsonFormat_emptyHint"
+  },
+  "jsonFormat_fixErrorHint": {
+    "message": "请修正上方 JSON 的语法错误以开启实时流式格式化",
+    "description": "Translation key: jsonFormat_fixErrorHint"
+  },
+  "jsonFormat_originalSize": {
+    "message": "原始大小",
+    "description": "Translation key: jsonFormat_originalSize"
+  },
+  "jsonFormat_formattedSize": {
+    "message": "格式化后大小",
+    "description": "Translation key: jsonFormat_formattedSize"
+  },
+  "jsonFormat_diffMode": {
+    "message": "差异比较",
+    "description": "Translation key: jsonFormat_diffMode"
+  },
+  "jsonFormat_formatMode": {
+    "message": "格式化",
+    "description": "Translation key: jsonFormat_formatMode"
+  },
+  "jsonFormat_yamlMode": {
+    "message": "YAML",
+    "description": "Translation key: jsonFormat_yamlMode"
+  },
+  "jsonFormat_tomlMode": {
+    "message": "TOML",
+    "description": "Translation key: jsonFormat_tomlMode"
+  },
+  "jsonFormat_minifyMode": {
+    "message": "压缩",
+    "description": "Translation key: jsonFormat_minifyMode"
+  },
+  "jsonFormat_yamlModeInputPlaceholder": {
+    "message": "输入需要转换的 JSON...",
+    "description": "Translation key: jsonFormat_yamlModeInputPlaceholder"
+  },
+  "jsonFormat_yamlModeOutputLabel": {
+    "message": "YAML 结果",
+    "description": "Translation key: jsonFormat_yamlModeOutputLabel"
+  },
+  "jsonFormat_yamlModeEmptyHint": {
+    "message": "输入 JSON 后点击转换",
+    "description": "Translation key: jsonFormat_yamlModeEmptyHint"
+  },
+  "jsonFormat_tomlModeInputPlaceholder": {
+    "message": "输入需要转换的 JSON...",
+    "description": "Translation key: jsonFormat_tomlModeInputPlaceholder"
+  },
+  "jsonFormat_tomlModeOutputLabel": {
+    "message": "TOML 结果",
+    "description": "Translation key: jsonFormat_tomlModeOutputLabel"
+  },
+  "jsonFormat_tomlModeEmptyHint": {
+    "message": "输入 JSON 后点击转换",
+    "description": "Translation key: jsonFormat_tomlModeEmptyHint"
+  },
+  "jsonFormat_minifyModeInputPlaceholder": {
+    "message": "输入需要压缩的 JSON...",
+    "description": "Translation key: jsonFormat_minifyModeInputPlaceholder"
+  },
+  "jsonFormat_minifyModeOutputLabel": {
+    "message": "压缩结果",
+    "description": "Translation key: jsonFormat_minifyModeOutputLabel"
+  },
+  "jsonFormat_minifyModeEmptyHint": {
+    "message": "输入 JSON 后点击压缩",
+    "description": "Translation key: jsonFormat_minifyModeEmptyHint"
+  },
+  "jwt_pageTitle": {
+    "message": "JWT 解析",
+    "description": "Translation key: jwt_pageTitle"
+  },
+  "jwt_placeholder": {
+    "message": "在此粘贴 JWT 令牌 (Encoded JWT)...",
+    "description": "Translation key: jwt_placeholder"
+  },
+  "jwt_headerTitle": {
+    "message": "HEADER: 算法 & 令牌类型",
+    "description": "Translation key: jwt_headerTitle"
+  },
+  "jwt_payloadTitle": {
+    "message": "PAYLOAD: 数据",
+    "description": "Translation key: jwt_payloadTitle"
+  },
+  "jwt_signatureTitle": {
+    "message": "签名",
+    "description": "Translation key: jwt_signatureTitle"
+  },
+  "jwt_noSignature": {
+    "message": "无签名",
+    "description": "Translation key: jwt_noSignature"
+  },
+  "jwt_invalidFormat": {
+    "message": "无法解析",
+    "description": "Translation key: jwt_invalidFormat"
+  },
+  "jwt_errors_invalidBase64String": {
+    "message": "无效的 Base64URL 字符串",
+    "description": "Translation key: jwt_errors_invalidBase64String"
+  },
+  "jwt_errors_failedToDecode": {
+    "message": "Base64URL 解码失败：",
+    "description": "Translation key: jwt_errors_failedToDecode"
+  },
+  "jwt_errors_invalidFormat": {
+    "message": "JWT 格式错误：必须包含三个由 . 分隔的部分",
+    "description": "Translation key: jwt_errors_invalidFormat"
+  },
+  "jwt_errors_parseHeaderFailed": {
+    "message": "解析 Header 失败：",
+    "description": "Translation key: jwt_errors_parseHeaderFailed"
+  },
+  "jwt_errors_parsePayloadFailed": {
+    "message": "解析 Payload 失败：",
+    "description": "Translation key: jwt_errors_parsePayloadFailed"
+  },
+  "qrCode_pageTitle": {
+    "message": "二维码工具",
+    "description": "Translation key: qrCode_pageTitle"
+  },
+  "qrCode_urlToQr": {
+    "message": "文本转二维码",
+    "description": "Translation key: qrCode_urlToQr"
+  },
+  "qrCode_qrToUrl": {
+    "message": "二维码转文本",
+    "description": "Translation key: qrCode_qrToUrl"
+  },
+  "qrCode_urlInputLabel": {
+    "message": "输入 URL 或文本",
+    "description": "Translation key: qrCode_urlInputLabel"
+  },
+  "qrCode_urlInputPlaceholder": {
+    "message": "请输入 URL 或文本内容，将自动生成二维码",
+    "description": "Translation key: qrCode_urlInputPlaceholder"
+  },
+  "qrCode_generating": {
+    "message": "生成中...",
+    "description": "Translation key: qrCode_generating"
+  },
+  "qrCode_qrCodeWillShow": {
+    "message": "二维码将显示在这里",
+    "description": "Translation key: qrCode_qrCodeWillShow"
+  },
+  "qrCode_downloadButton": {
+    "message": "下载二维码",
+    "description": "Translation key: qrCode_downloadButton"
+  },
+  "qrCode_copyQrButton": {
+    "message": "复制二维码",
+    "description": "Translation key: qrCode_copyQrButton"
+  },
+  "qrCode_qrCodeDownloadSuccess": {
+    "message": "二维码下载成功",
+    "description": "Translation key: qrCode_qrCodeDownloadSuccess"
+  },
+  "qrCode_qrCodeCopySuccess": {
+    "message": "二维码已复制到剪贴板",
+    "description": "Translation key: qrCode_qrCodeCopySuccess"
+  },
+  "qrCode_parseSuccess": {
+    "message": "二维码解析成功",
+    "description": "Translation key: qrCode_parseSuccess"
+  },
+  "qrCode_noQrDetected": {
+    "message": "未检测到二维码，请确保图片清晰且包含二维码",
+    "description": "Translation key: qrCode_noQrDetected"
+  },
+  "qrCode_parseError": {
+    "message": "解析二维码失败，请重试",
+    "description": "Translation key: qrCode_parseError"
+  },
+  "qrCode_copyError": {
+    "message": "复制失败，请重试",
+    "description": "Translation key: qrCode_copyError"
+  },
+  "qrCode_imagePasted": {
+    "message": "图片粘贴成功，正在解析...",
+    "description": "Translation key: qrCode_imagePasted"
+  },
+  "qrCode_imagePasteError": {
+    "message": "粘贴图片失败，请重试",
+    "description": "Translation key: qrCode_imagePasteError"
+  },
+  "qrCode_imageCleared": {
+    "message": "图片已清除",
+    "description": "Translation key: qrCode_imageCleared"
+  },
+  "qrCode_clickToUpload": {
+    "message": "点击、拖拽或粘贴上传二维码图片",
+    "description": "Translation key: qrCode_clickToUpload"
+  },
+  "qrCode_supportFormats": {
+    "message": "支持 PNG、JPG、WEBP、Base64 格式",
+    "description": "Translation key: qrCode_supportFormats"
+  },
+  "qrCode_resultLabel": {
+    "message": "解析结果",
+    "description": "Translation key: qrCode_resultLabel"
+  },
+  "qrCode_clickToChange": {
+    "message": "点击更换图片",
+    "description": "Translation key: qrCode_clickToChange"
+  },
+  "qrCode_generateButton": {
+    "message": "生成二维码",
+    "description": "Translation key: qrCode_generateButton"
+  },
+  "qrCode_editButton": {
+    "message": "编辑",
+    "description": "Translation key: qrCode_editButton"
+  },
+  "qrCode_textPreviewLabel": {
+    "message": "原始文本",
+    "description": "Translation key: qrCode_textPreviewLabel"
+  },
+  "qrCode_generateFirstHint": {
+    "message": "输入文本后点击「生成二维码」按钮",
+    "description": "Translation key: qrCode_generateFirstHint"
+  },
+  "qrCode_inputRequired": {
+    "message": "请输入内容",
+    "description": "Translation key: qrCode_inputRequired"
+  },
+  "qrCode_generateError": {
+    "message": "生成二维码失败，请重试",
+    "description": "Translation key: qrCode_generateError"
+  },
+  "qrCode_uploadedImage": {
+    "message": "已上传图片",
+    "description": "Translation key: qrCode_uploadedImage"
+  },
+  "qrCode_reuploadButton": {
+    "message": "重新上传",
+    "description": "Translation key: qrCode_reuploadButton"
+  },
+  "qrCode_parsing": {
+    "message": "解析中...",
+    "description": "Translation key: qrCode_parsing"
+  },
+  "qrCode_resultPlaceholder": {
+    "message": "解析结果将显示在此处",
+    "description": "Translation key: qrCode_resultPlaceholder"
+  },
+  "qrCode_imageToQr": {
+    "message": "解析图片二维码",
+    "description": "Translation key: qrCode_imageToQr"
+  },
+  "rightClickRestorer_loading": {
+    "message": "正在加载...",
+    "description": "Translation key: rightClickRestorer_loading"
+  },
+  "rightClickRestorer_currentDomain": {
+    "message": "当前域名",
+    "description": "Translation key: rightClickRestorer_currentDomain"
+  },
+  "rightClickRestorer_statusLocked": {
+    "message": "未解锁",
+    "description": "Translation key: rightClickRestorer_statusLocked"
+  },
+  "rightClickRestorer_statusUnlocked": {
+    "message": "已解锁",
+    "description": "Translation key: rightClickRestorer_statusUnlocked"
+  },
+  "rightClickRestorer_unsupported": {
+    "message": "不支持",
+    "description": "Translation key: rightClickRestorer_unsupported"
+  },
+  "rightClickRestorer_unsupportedDesc": {
+    "message": "当前页面为浏览器内部页面或扩展页面，无法解锁右键功能。请切换到普通网页后重试。",
+    "description": "Translation key: rightClickRestorer_unsupportedDesc"
+  },
+  "rightClickRestorer_unlockDesc": {
+    "message": "点击下方按钮，为当前网站临时解锁右键菜单。刷新页面后需要重新解锁。",
+    "description": "Translation key: rightClickRestorer_unlockDesc"
+  },
+  "rightClickRestorer_unlockBtn": {
+    "message": "解锁当前网站右键",
+    "description": "Translation key: rightClickRestorer_unlockBtn"
+  },
+  "rightClickRestorer_alreadyUnlocked": {
+    "message": "右键已解锁",
+    "description": "Translation key: rightClickRestorer_alreadyUnlocked"
+  },
+  "storageCleaner_pageTitle": {
+    "message": "存储清理",
+    "description": "Translation key: storageCleaner_pageTitle"
+  },
+  "storageCleaner_loading": {
+    "message": "加载中...",
+    "description": "Translation key: storageCleaner_loading"
+  },
+  "storageCleaner_initializing": {
+    "message": "正在读取站点数据...",
+    "description": "Translation key: storageCleaner_initializing"
+  },
+  "storageCleaner_cleaning": {
+    "message": "正在清理...",
+    "description": "Translation key: storageCleaner_cleaning"
+  },
+  "storageCleaner_cleanNow": {
+    "message": "立即清理",
+    "description": "Translation key: storageCleaner_cleanNow"
+  },
+  "storageCleaner_autoRefresh": {
+    "message": "清理后自动刷新页面",
+    "description": "Translation key: storageCleaner_autoRefresh"
+  },
+  "storageCleaner_selectAll": {
+    "message": "全选所有项",
+    "description": "Translation key: storageCleaner_selectAll"
+  },
+  "storageCleaner_noData": {
+    "message": "无数据",
+    "description": "Translation key: storageCleaner_noData"
+  },
+  "storageCleaner_errorNoTab": {
+    "message": "无法获取当前标签页",
+    "description": "Translation key: storageCleaner_errorNoTab"
+  },
+  "storageCleaner_errorRestricted": {
+    "message": "存储清理功能不支持此页面",
+    "description": "Translation key: storageCleaner_errorRestricted"
+  },
+  "storageCleaner_cleanSuccessReload": {
+    "message": "清理成功，即将刷新页面",
+    "description": "Translation key: storageCleaner_cleanSuccessReload"
+  },
+  "storageCleaner_errorStandardOnly": {
+    "message": "存储清理功能仅适用于标准网页",
+    "description": "Translation key: storageCleaner_errorStandardOnly"
+  },
+  "storageCleaner_confirmTitle": {
+    "message": "确认清理数据？",
+    "description": "Translation key: storageCleaner_confirmTitle"
+  },
+  "storageCleaner_confirmDesc": {
+    "message": "您将永久删除当前页面的以下选定存储项。",
+    "description": "Translation key: storageCleaner_confirmDesc"
+  },
+  "storageCleaner_irreversible": {
+    "message": "此操作不可撤销",
+    "description": "Translation key: storageCleaner_irreversible"
+  },
+  "storageCleaner_confirmAction": {
+    "message": "确认清理",
+    "description": "Translation key: storageCleaner_confirmAction"
+  },
+  "storageCleaner_cleanedSummary": {
+    "message": "清理了 {{items}}",
+    "description": "Translation key: storageCleaner_cleanedSummary"
+  },
+  "storageCleaner_noDataToClean": {
+    "message": "该页面没有可清理的存储数据",
+    "description": "Translation key: storageCleaner_noDataToClean"
+  },
+  "storageCleaner_partialFailure": {
+    "message": "部分清理失败",
+    "description": "Translation key: storageCleaner_partialFailure"
+  },
+  "storageCleaner_options_localStorage": {
+    "message": "Local Storage",
+    "description": "Translation key: storageCleaner_options_localStorage"
+  },
+  "storageCleaner_options_sessionStorage": {
+    "message": "Session Storage",
+    "description": "Translation key: storageCleaner_options_sessionStorage"
+  },
+  "storageCleaner_options_indexedDB": {
+    "message": "站点存储",
+    "description": "Translation key: storageCleaner_options_indexedDB"
+  },
+  "storageCleaner_options_cookies": {
+    "message": "Cookies",
+    "description": "Translation key: storageCleaner_options_cookies"
+  },
+  "storageCleaner_options_cacheStorage": {
+    "message": "Cache Storage",
+    "description": "Translation key: storageCleaner_options_cacheStorage"
+  },
+  "storageCleaner_options_serviceWorkers": {
+    "message": "Service Workers",
+    "description": "Translation key: storageCleaner_options_serviceWorkers"
+  },
+  "textStatistics_pageTitle": {
+    "message": "文本统计",
+    "description": "Translation key: textStatistics_pageTitle"
+  },
+  "textStatistics_placeholder": {
+    "message": "在此输入或粘贴文本...",
+    "description": "Translation key: textStatistics_placeholder"
+  },
+  "textStatistics_characters": {
+    "message": "字符数",
+    "description": "Translation key: textStatistics_characters"
+  },
+  "textStatistics_words": {
+    "message": "单词数",
+    "description": "Translation key: textStatistics_words"
+  },
+  "textStatistics_lines": {
+    "message": "行数",
+    "description": "Translation key: textStatistics_lines"
+  },
+  "textStatistics_bytes": {
+    "message": "字节大小",
+    "description": "Translation key: textStatistics_bytes"
+  },
+  "timestamp_pageTitle": {
+    "message": "时间戳转换",
+    "description": "Translation key: timestamp_pageTitle"
+  },
+  "timestamp_tsToDate": {
+    "message": "时间戳 → 日期",
+    "description": "Translation key: timestamp_tsToDate"
+  },
+  "timestamp_dateToTs": {
+    "message": "日期 → 时间戳",
+    "description": "Translation key: timestamp_dateToTs"
+  },
+  "timestamp_placeholderTs": {
+    "message": "输入时间戳...",
+    "description": "Translation key: timestamp_placeholderTs"
+  },
+  "timestamp_placeholderDate": {
+    "message": "YYYY-MM-DD HH:mm:ss",
+    "description": "Translation key: timestamp_placeholderDate"
+  },
+  "timestamp_unitMs": {
+    "message": "毫秒 (ms)",
+    "description": "Translation key: timestamp_unitMs"
+  },
+  "timestamp_unitS": {
+    "message": "秒 (s)",
+    "description": "Translation key: timestamp_unitS"
+  },
+  "timestamp_currentTs": {
+    "message": "当前时间戳",
+    "description": "Translation key: timestamp_currentTs"
+  },
+  "timestamp_useNowTooltip": {
+    "message": "填充到下方",
+    "description": "Translation key: timestamp_useNowTooltip"
+  },
+  "timestamp_copyTsTooltip": {
+    "message": "复制时间戳",
+    "description": "Translation key: timestamp_copyTsTooltip"
+  },
+  "timestamp_usedSuccess": {
+    "message": "已使用当前时间戳",
+    "description": "Translation key: timestamp_usedSuccess"
+  },
+  "timestamp_resultLabel": {
+    "message": "转换结果",
+    "description": "Translation key: timestamp_resultLabel"
+  },
+  "timestamp_copyResultTooltip": {
+    "message": "复制结果",
+    "description": "Translation key: timestamp_copyResultTooltip"
+  },
+  "timestamp_relativeTime": {
+    "message": "相对时间",
+    "description": "Translation key: timestamp_relativeTime"
+  },
+  "timestamp_iso8601": {
+    "message": "ISO 8601",
+    "description": "Translation key: timestamp_iso8601"
+  },
+  "timestamp_utcTime": {
+    "message": "UTC 时间",
+    "description": "Translation key: timestamp_utcTime"
+  },
+  "timestamp_copyTooltip": {
+    "message": "复制",
+    "description": "Translation key: timestamp_copyTooltip"
+  },
+  "timestamp_resultEmpty": {
+    "message": "请输入并点击转换",
+    "description": "Translation key: timestamp_resultEmpty"
+  },
+  "common_buttons_cancel": {
+    "message": "取消",
+    "description": "Translation key: buttons_cancel"
+  },
+  "common_buttons_copy": {
+    "message": "复制",
+    "description": "Translation key: buttons_copy"
+  },
+  "common_buttons_themeMode_light": {
+    "message": "切换到深色模式",
+    "description": "Translation key: buttons_themeMode_light"
+  },
+  "common_buttons_themeMode_dark": {
+    "message": "切换到系统模式",
+    "description": "Translation key: buttons_themeMode_dark"
+  },
+  "common_buttons_themeMode_system": {
+    "message": "切换到浅色模式",
+    "description": "Translation key: buttons_themeMode_system"
+  },
+  "common_buttons_search": {
+    "message": "搜索工具...",
+    "description": "Translation key: buttons_search"
+  },
+  "common_buttons_back": {
+    "message": "返回",
+    "description": "Translation key: buttons_back"
+  },
+  "common_buttons_clearSearch": {
+    "message": "清除搜索",
+    "description": "Translation key: buttons_clearSearch"
+  },
+  "common_buttons_recentSearch": {
+    "message": "最近搜索",
+    "description": "Translation key: buttons_recentSearch"
+  },
+  "common_buttons_noResults": {
+    "message": "未找到相关工具",
+    "description": "Translation key: buttons_noResults"
+  },
+  "common_buttons_openInTab": {
+    "message": "在标签页打开",
+    "description": "Translation key: buttons_openInTab"
+  },
+
+  "common_errorBoundary_title": {
+    "message": "糟糕，出了点问题",
+    "description": "Translation key: errorBoundary_title"
+  },
+  "common_errorBoundary_description": {
+    "message": "应用遇到了一些意外错误。您可以尝试刷新页面或重置应用。",
+    "description": "Translation key: errorBoundary_description"
+  },
+  "common_errorBoundary_refresh": {
+    "message": "刷新应用",
+    "description": "Translation key: errorBoundary_refresh"
+  },
+  "common_errorBoundary_retry": {
+    "message": "重新尝试",
+    "description": "Translation key: errorBoundary_retry"
+  },
+  "common_pageErrorBoundary_title": {
+    "message": "该功能运行异常",
+    "description": "Translation key: pageErrorBoundary_title"
+  },
+  "common_pageErrorBoundary_description": {
+    "message": "该页面在加载或渲染时遇到了内部脚本错误。您可以尝试重试，或者通过导航菜单切换到其他工具。",
+    "description": "Translation key: pageErrorBoundary_description"
+  }
+}

src/components/CopyButton.tsx

@@ -4,7 +4,7 @@ import { copyTextToClipboard } from '@/utils/clipboard';
 import { cn } from '@/lib/utils';
 import { buttonVariants, type ButtonProps } from '@/components/ui/button';
 import { toast } from 'sonner';
-import { useTranslation } from 'react-i18next';
+import { useI18n } from '@/utils/chromeI18n';
 
 interface CopyButtonProps extends Omit<ButtonProps, 'children' | 'onClick'> {
   text: string;
@@ -19,7 +19,7 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
   className,
   ...props
 }) => {
-  const { t } = useTranslation('common');
+  const { t } = useI18n('common');
   const [copied, setCopied] = useState(false);
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
@@ -53,6 +53,7 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
       type="button"
       onClick={handleCopy}
       title={tooltip ?? t('buttons.copy')}
+      aria-label={tooltip ?? t('buttons.copy')}
       className={cn(
         buttonVariants({ variant, size }),
         copied &&
@@ -62,7 +63,7 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
       {...props}
     >
       {copied ? (
-        <Check className="h-[1.2em] w-[1.2em] animate-in fade-in zoom-in-75 duration-200" />
+        <Check className="h-[1.2em] w-[1.2em]" />
       ) : (
         <Copy className="h-[1.2em] w-[1.2em]" />
       )}

src/components/CopyButton/__tests__/index.test.tsx

@@ -0,0 +1,194 @@
+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');
+  });
+});

src/components/DecodeResultPaper.tsx

@@ -10,7 +10,7 @@
 import { Download } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { formatFileSize } from '@/utils/base64Converter';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 
 interface DecodeResultPaperProps {
   /** 标题文案，由调用方传入 i18n key 对应的值（如 decodedFileOutput / decodedImageOutput） */
@@ -38,7 +38,7 @@ export default function DecodeResultPaper({
   onDownload,
   children,
 }: DecodeResultPaperProps) {
-  const { t } = useLazyTranslation('base64Converter');
+  const { t } = useI18n('base64Converter');
 
   return (
     <div className="p-4 rounded-xl bg-primary/10 border border-primary/30">

src/components/ErrorBoundary.tsx

@@ -1,9 +1,9 @@
 import { Component, ErrorInfo, ReactNode } from 'react';
-import { withTranslation, type WithTranslation } from 'react-i18next';
 import { AlertCircle, RefreshCw } from 'lucide-react';
 import { Button } from '@/components/ui/button';
+import { getMessage } from '@/utils/chromeI18n';
 
-interface Props extends WithTranslation {
+interface Props {
   children: ReactNode;
 }
 
@@ -12,7 +12,7 @@ interface State {
   error: Error | null;
 }
 
-class ErrorBoundaryBase extends Component<Props, State> {
+class ErrorBoundary extends Component<Props, State> {
   state: State = {
     hasError: false,
     error: null,
@@ -37,7 +37,6 @@ class ErrorBoundaryBase extends Component<Props, State> {
   };
 
   render() {
-    const { t } = this.props;
     if (this.state.hasError) {
       return (
         <div className="flex flex-col items-center justify-center mt-16 mx-auto max-w-md">
@@ -46,9 +45,11 @@ class ErrorBoundaryBase extends Component<Props, State> {
               <AlertCircle className="h-8 w-8" />
             </div>
             <h2 className="text-xl font-extrabold text-destructive mb-2">
-              {t('errorBoundary.title')}
+              {getMessage('errorBoundary_title')}
             </h2>
-            <p className="text-sm text-muted-foreground mb-6">{t('errorBoundary.description')}</p>
+            <p className="text-sm text-muted-foreground mb-6">
+              {getMessage('errorBoundary_description')}
+            </p>
             {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">
                 <pre className="font-mono text-xs whitespace-pre-wrap break-all text-zinc-200 selection:bg-zinc-700">
@@ -62,7 +63,7 @@ class ErrorBoundaryBase extends Component<Props, State> {
               className="rounded-lg font-bold shadow-sm"
             >
               <RefreshCw className="mr-2 h-4 w-4" />
-              {t('errorBoundary.refresh')}
+              {getMessage('errorBoundary_refresh')}
             </Button>
           </div>
         </div>
@@ -73,5 +74,5 @@ class ErrorBoundaryBase extends Component<Props, State> {
   }
 }
 
-export const ErrorBoundary = withTranslation('common')(ErrorBoundaryBase);
+export { ErrorBoundary };
 export default ErrorBoundary;

src/components/ImageUploader.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef } from 'react';
 import { Image, X } from 'lucide-react';
-import { useSnackbar } from '@/components/GlobalSnackbar';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { toast } from 'sonner';
+import { useI18n } from '@/utils/chromeI18n';
 
 interface ImageUploaderProps {
   /** 选中的文件 */
@@ -29,8 +29,7 @@ const ImageUploader = ({
   dragging,
   onDraggingChange,
 }: ImageUploaderProps) => {
-  const { t } = useLazyTranslation('qrCode');
-  const { showMessage } = useSnackbar();
+  const { t } = useI18n('qrCode');
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   const handleFileChange = useCallback(
@@ -46,11 +45,8 @@ const ImageUploader = ({
       URL.revokeObjectURL(previewUrl);
     }
     onClearFile();
-    showMessage(t('qrCode:imageCleared'), {
-      severity: 'success',
-      autoHideDuration: 1000,
-    });
-  }, [previewUrl, onClearFile, showMessage, t]);
+    toast.success(t('qrCode:imageCleared'));
+  }, [previewUrl, onClearFile, t]);
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.files && e.target.files.length > 0) {
@@ -90,13 +86,10 @@ const ImageUploader = ({
           if (file) {
             try {
               handleFileChange(file);
-              showMessage(t('qrCode:imagePasted'), { severity: 'success', autoHideDuration: 1000 });
+              toast.success(t('qrCode:imagePasted'));
             } catch (error) {
               console.error('处理粘贴图片失败:', error);
-              showMessage(t('qrCode:imagePasteError'), {
-                severity: 'error',
-                autoHideDuration: 3000,
-              });
+              toast.error(t('qrCode:imagePasteError'));
             }
           }
           break;
@@ -109,7 +102,7 @@ const ImageUploader = ({
     return () => {
       document.removeEventListener('paste', handlePaste);
     };
-  }, [showMessage, handleFileChange, t]);
+  }, [handleFileChange, t]);
 
   return (
     <div

src/components/PageErrorBoundary.tsx

@@ -1,9 +1,9 @@
 import { Component, ErrorInfo, ReactNode } from 'react';
-import { withTranslation, type WithTranslation } from 'react-i18next';
 import { AlertCircle, RefreshCw } from 'lucide-react';
 import { Button } from '@/components/ui/button';
+import { getMessage } from '@/utils/chromeI18n';
 
-interface Props extends WithTranslation {
+interface Props {
   children: ReactNode;
   resetKey?: string | number;
 }
@@ -13,7 +13,7 @@ interface State {
   error: Error | null;
 }
 
-class PageErrorBoundaryBase extends Component<Props, State> {
+class PageErrorBoundary extends Component<Props, State> {
   state: State = {
     hasError: false,
     error: null,
@@ -38,7 +38,6 @@ class PageErrorBoundaryBase extends Component<Props, State> {
   };
 
   render() {
-    const { t } = this.props;
     if (this.state.hasError) {
       return (
         <div className="flex flex-col items-center justify-center flex-1 p-6 min-h-[300px] animate-in fade-in zoom-in-95 duration-200">
@@ -48,10 +47,10 @@ class PageErrorBoundaryBase extends Component<Props, State> {
             </div>
 
             <h3 className="text-base font-semibold text-foreground mb-1.5">
-              {t('pageErrorBoundary.title')}
+              {getMessage('pageErrorBoundary_title')}
             </h3>
             <p className="text-xs text-muted-foreground mb-5">
-              {t('pageErrorBoundary.description')}
+              {getMessage('pageErrorBoundary_description')}
             </p>
 
             {this.state.error && (
@@ -69,7 +68,7 @@ class PageErrorBoundaryBase extends Component<Props, State> {
               className="font-medium shadow-sm"
             >
               <RefreshCw className="mr-1.5 h-3.5 w-3.5" />
-              {t('errorBoundary.retry')}
+              {getMessage('errorBoundary_retry')}
             </Button>
           </div>
         </div>
@@ -80,5 +79,5 @@ class PageErrorBoundaryBase extends Component<Props, State> {
   }
 }
 
-export const PageErrorBoundary = withTranslation('common')(PageErrorBoundaryBase);
+export { PageErrorBoundary };
 export default PageErrorBoundary;

src/components/QrCodePreview.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Copy, Download } from 'lucide-react';
-import { useLazyTranslation } from '@/utils/useLazyTranslation';
+import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
 
@@ -12,16 +12,19 @@ interface QrCodePreviewProps extends React.HTMLAttributes<HTMLDivElement> {
   onDownload: () => void;
   /** 复制回调 */
   onCopy: () => void;
+  /** 自定义占位文本，用于空状态提示 */
+  placeholderText?: string;
 }
 
 const QrCodePreview = ({
   qrCodeDataUrl,
   onDownload,
   onCopy,
+  placeholderText,
   className,
   ...props
 }: QrCodePreviewProps) => {
-  const { t } = useLazyTranslation('qrCode');
+  const { t } = useI18n('qrCode');
 
   // 空状态下的虚线骨架屏
   if (!qrCodeDataUrl) {
@@ -33,7 +36,9 @@ const QrCodePreview = ({
         )}
         {...props}
       >
-        <p className="text-sm text-muted-foreground text-center">{t('qrCode:qrCodeWillShow')}</p>
+        <p className="text-sm text-muted-foreground text-center">
+          {placeholderText || t('qrCode:qrCodeWillShow')}
+        </p>
       </div>
     );
   }
@@ -41,34 +46,34 @@ const QrCodePreview = ({
   return (
     <div
       className={cn(
-        'flex flex-col justify-center items-center min-h-[200px] border border-input rounded-xl p-6 bg-muted/40',
+        'flex flex-col justify-center items-center border border-input rounded-xl p-4 bg-muted/40',
         className,
       )}
       {...props}
     >
       <div className="flex flex-col items-center w-full max-w-xs">
         {/*
-          2. 二维码容器适配：
+          二维码容器适配：
           在暗黑模式下，纯黑白的二维码如果直接暴露在暗色背景下，会导致手机摄像头极难识别。
-          通过裹一层 bg-white 和 p-3，确保黑白对比度绝对安全，同时加入 shadow 增强卡片感。
+          通过裹一层 bg-white 和 p-2，确保黑白对比度绝对安全，同时加入 shadow 增强卡片感。
         */}
-        <div className="p-3 bg-white rounded-lg shadow-sm border border-border/40">
+        <div className="p-2 bg-white rounded-lg shadow-sm border border-border/40">
           <img
             src={qrCodeDataUrl}
             alt="QR Code Preview"
-            className="w-56 h-56 max-w-full object-contain block animate-in fade-in duration-300"
+            className="w-48 h-48 max-w-full object-contain block animate-in fade-in duration-300"
           />
         </div>
 
-        <div className="flex w-full gap-2 mt-5">
-          <Button variant="outline" size="sm" onClick={onDownload} className="flex-1">
-            <Download className="w-4 h-4 text-muted-foreground" />
-            <span className="truncate">{t('qrCode:downloadButton')}</span>
+        <div className="flex w-full gap-2 mt-3">
+          <Button variant="outline" size="sm" onClick={onDownload} className="flex-1 h-8">
+            <Download className="w-3.5 h-3.5 text-muted-foreground" />
+            <span className="truncate text-xs">{t('qrCode:downloadButton')}</span>
           </Button>
 
-          <Button variant="default" size="sm" onClick={onCopy} className="flex-1">
-            <Copy className="w-4 h-4" />
-            <span className="truncate">{t('qrCode:copyQrButton')}</span>
+          <Button variant="default" size="sm" onClick={onCopy} className="flex-1 h-8">
+            <Copy className="w-3.5 h-3.5" />
+            <span className="truncate text-xs">{t('qrCode:copyQrButton')}</span>
           </Button>
         </div>
       </div>

src/components/RouterContainer.tsx

@@ -1,38 +1,34 @@
 import { FEATURES, getEntryPointType } from '@/config/features';
 import { useRouter } from '@/providers/RouterProvider';
-import { Suspense, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
+import { Suspense } from 'react';
+import { useI18n } from '@/utils/chromeI18n';
 import PageErrorBoundary from '@/components/PageErrorBoundary';
 import PageSkeleton from '@/components/PageSkeleton';
-import { cn } from '@/lib/utils'; // 1. 引入标准的 shadcn 工具函数
-import { AlertTriangle } from 'lucide-react'; // 用于标准的 404 异常展示
-
-export default function RouterContainer() {
-  const { currentPage, isLoaded } = useRouter();
-  const { t } = useTranslation('common');
-
-  // 2. 稳定的动态动画类名映射
-  const animationClass = useMemo(() => {
-    return currentPage === 'dashboard' ? 'page-transition-dashboard' : 'page-transition-enter';
-  }, [currentPage]);
+import { cn } from '@/lib/utils';
+import { AlertTriangle } from 'lucide-react';
 
 const entryPointType = getEntryPointType();
 
-  // 骨架屏加载状态守卫
+export default function RouterContainer() {
+  const { currentPage, isLoaded } = useRouter();
+  const { t } = useI18n('common');
+
+  const animationClass =
+    currentPage === 'dashboard' ? 'page-transition-dashboard' : 'page-transition-enter';
+
   if (!isLoaded) {
     return <PageSkeleton variant={currentPage === 'dashboard' ? 'dashboard' : 'tool'} />;
   }
 
-  // 3. 严格的路由查找与类型安全的组件分发
   const currentFeature = FEATURES.find((f) => f.key === currentPage);
   const MatchedComponent = currentFeature?.components?.[entryPointType];
 
   return (
     <div
-      key={currentPage} // 保持原有通过重新挂载触发动画的精简特性
+      key={currentPage}
       className={cn(
         'flex-1 flex flex-col overflow-x-hidden overflow-y-auto',
-        'scrollbar-gutter-stable motion-reduce:transition-none', // 当系统开启“减弱动态效果”时，自动优雅降级，防止眩晕
+        'scrollbar-gutter-stable motion-reduce:transition-none',
         animationClass,
       )}
     >
@@ -40,11 +36,6 @@ export default function RouterContainer() {
         fallback={<PageSkeleton variant={currentPage === 'dashboard' ? 'dashboard' : 'tool'} />}
       >
         <PageErrorBoundary resetKey={currentPage}>
-          {/*
-            4. 路由防御拦截：
-            如果组件存在则正常流式渲染，如果由于版本更迭或非法路径导致找不到对应组件，
-            渲染一个优雅且符合 shadcn 风格的中性 404 提示页，而不是死白屏。
-          */}
           {MatchedComponent ? (
             <MatchedComponent />
           ) : (

src/components/SwitchButtonGroup.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
-import { cn } from '@/lib/utils'; // 1. 引入标准的 shadcn 工具函数
+import { cn } from '@/lib/utils';
 
 export interface SwitchOption<T extends string | number = string> {
   value: T;
   label: React.ReactNode;
 }
 
-// 2. 移除内联 sx，继承标准 HTML 属性，并使用标准的类名注入机制
 export interface SwitchButtonGroupProps<T extends string | number = string> extends Omit<
   React.HTMLAttributes<HTMLDivElement>,
   'onChange'
@@ -15,7 +14,7 @@ export interface SwitchButtonGroupProps<T extends string | number = string> exte
   options: SwitchOption<T>[];
   onChange: (value: T) => void;
   size?: 'small' | 'medium' | 'large';
-  buttonClassName?: string; // 替换原有的 buttonSx
+  buttonClassName?: string;
 }
 
 export default function SwitchButtonGroup<T extends string | number = string>({
@@ -27,7 +26,6 @@ export default function SwitchButtonGroup<T extends string | number = string>({
   buttonClassName,
   ...props
 }: SwitchButtonGroupProps<T>) {
-  // 3. 将尺寸和高度、内边距等整体对齐，保证按钮和背景容器成比例缩放
   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',
@@ -51,7 +49,6 @@ export default function SwitchButtonGroup<T extends string | number = string>({
             type="button"
             onClick={() => onChange(option.value)}
             className={cn(
-              // 4. 完美继承 shadcn 的 Tabs 交互和动效微调
               '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',
               'disabled:pointer-events-none disabled:opacity-50',

src/components/TextInputArea.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react';
 import { X } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
+import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';
 import { toast } from 'sonner'; // 推荐使用 shadcn 的默认 Toast
 import { CopyButton } from '@/components/CopyButton';
@@ -114,17 +114,15 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
   const [internalValue, setInternalValue] = useState(defaultValue);
   const [error, setError] = useState<string>('');
 
-  const { t } = useTranslation('common');
+  const { t } = useI18n('common');
   const placeholder = placeholderProp ?? t('textInputArea.placeholder');
 
   const isControlled = controlledValue !== undefined;
   const value = isControlled ? controlledValue : internalValue;
   const displayError = externalError ?? error;
 
-  // 双向合并 ref 指针
   useImperativeHandle(ref, () => internalRef.current as HTMLTextAreaElement);
 
-  // 1. 高性能的动态高度自适应计算
   const adjustHeight = useCallback(() => {
     const textArea = internalRef.current;
     if (!textArea) return;
@@ -132,14 +130,13 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
     // 重置高度计算
     textArea.style.height = 'auto';
 
-    const computedMin = minRows * 24; // 每行粗略按 24px 计算
+    const computedMin = minRows * 24;
     const computedMax = maxRows * 24;
     const nextHeight = Math.max(textArea.scrollHeight, computedMin);
 
     textArea.style.height = `${Math.min(nextHeight, computedMax)}px`;
   }, [minRows, maxRows]);
 
-  // 当数值改变时自适应扩展
   React.useEffect(() => {
     adjustHeight();
   }, [value, adjustHeight]);

src/components/TopBar.tsx

@@ -1,33 +1,20 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import {
-  ArrowLeft,
-  ExternalLink,
-  Globe,
-  History,
-  Monitor,
-  Moon,
-  Search,
-  Settings,
-  Sun,
-  X,
-} from 'lucide-react';
+import { ArrowLeft, ExternalLink, Monitor, Moon, Search, Sun, X } from 'lucide-react';
 import { useRouter } from '@/providers/RouterProvider';
 import { useThemeMode } from '@/providers/ThemeModeProvider';
 import { FeatureConfig, FEATURES } from '@/config/features';
 import { storageUtil } from '@/utils/chromeStorage';
 import { openExtensionPage } from '@/utils/chromeTabs';
-import { useTranslation } from 'react-i18next';
-import { normalizeLanguage, SUPPORTED_LANGUAGES } from '@/i18n';
-import { cn } from '@/lib/utils'; // 1. 引入 shadcn 核心工具函数
+import { useI18n } from '@/utils/chromeI18n';
+import { cn } from '@/lib/utils';
 
-// 常量配置抽取（无需写在全局变量或 styles 对象里）
 const SEARCH_HISTORY_LIMIT = 10;
 const SEARCH_HISTORY_DISPLAY = 5;
 
-export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void }) {
+export default function TopBar() {
   const { currentPage, goBack, navigateTo } = useRouter();
   const { mode, setMode } = useThemeMode();
-  const { t, i18n } = useTranslation(['common', 'features']);
+  const { t } = useI18n(['common', 'features']);
 
   const [searchQuery, setSearchQuery] = useState('');
   const [showResults, setShowResults] = useState(false);
@@ -42,7 +29,6 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
     window.close();
   };
 
-  // 2. 健壮的 Click Outside 逻辑：点击空白处收起搜索框
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
@@ -53,7 +39,19 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
     return () => document.removeEventListener('mousedown', handleClickOutside);
   }, []);
 
-  // 从 Chrome Storage 异步初始化历史记录
+  // Cmd/Ctrl+K 快捷键聚焦搜索框
+  useEffect(() => {
+    const handleGlobalKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault();
+        inputRef.current?.focus();
+        setShowResults(true);
+      }
+    };
+    document.addEventListener('keydown', handleGlobalKeyDown);
+    return () => document.removeEventListener('keydown', handleGlobalKeyDown);
+  }, []);
+
   useEffect(() => {
     storageUtil
       .get('app/searchHistory', [])
@@ -63,7 +61,6 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
       .catch((err) => console.error('加载搜索历史失败:', err));
   }, []);
 
-  // 3. 模糊搜索匹配（移除了无意义的 dashboard 干扰项）
   const searchResults = useMemo(() => {
     const query = searchQuery.trim().toLowerCase();
     if (!query) return [];
@@ -78,13 +75,15 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
 
   const displayedHistory = useMemo(() => {
     if (searchQuery.trim()) return [];
-    return searchHistory.slice(0, SEARCH_HISTORY_DISPLAY);
+    return searchHistory
+      .slice(0, SEARCH_HISTORY_DISPLAY)
+      .map((key) => ({ key, feature: FEATURES.find((f) => f.key === key) }))
+      .filter((item) => item.feature && item.feature.key !== 'dashboard');
   }, [searchHistory, searchQuery]);
 
-  // 新增/持久化历史记录
-  const saveToHistory = async (query: string) => {
-    if (!query.trim()) return;
-    const nextHistory = [query, ...searchHistory.filter((h) => h !== query)].slice(
+  const saveToHistory = async (featureKey: string) => {
+    if (!featureKey.trim()) return;
+    const nextHistory = [featureKey, ...searchHistory.filter((h) => h !== featureKey)].slice(
       0,
       SEARCH_HISTORY_LIMIT,
     );
@@ -94,19 +93,11 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
 
   const handleSelectFeature = (feature: FeatureConfig) => {
     navigateTo(feature.key);
-    saveToHistory(t(feature.labelKey));
+    saveToHistory(feature.key);
     setSearchQuery('');
     setShowResults(false);
   };
 
-  const toggleLanguage = async () => {
-    const currentLng = normalizeLanguage(i18n.language);
-    const currentIndex = SUPPORTED_LANGUAGES.indexOf(currentLng);
-    const nextLng = SUPPORTED_LANGUAGES[(currentIndex + 1) % SUPPORTED_LANGUAGES.length];
-    await i18n.changeLanguage(nextLng);
-    await storageUtil.set('app/language', nextLng);
-  };
-
   const cycleThemeMode = () => {
     const nextMap = { light: 'dark', dark: 'system', system: 'light' } as const;
     setMode(nextMap[mode]);
@@ -114,7 +105,6 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
 
   const ThemeIcon = mode === 'light' ? Sun : mode === 'dark' ? Moon : Monitor;
 
-  // 4. 健壮的键盘导航交互
   const handleKeyDown = (e: React.KeyboardEvent) => {
     const totalItems = searchQuery.trim() ? searchResults.length : displayedHistory.length;
 
@@ -130,14 +120,9 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
         if (searchQuery.trim()) {
           handleSelectFeature(searchResults[selectedIndex]);
         } else {
-          const selectedQuery = displayedHistory[selectedIndex];
-          if (selectedQuery) {
-            setSearchQuery(selectedQuery);
-            setSelectedIndex(-1);
-            const matched = FEATURES.find(
-              (f) => f.key !== 'dashboard' && t(f.labelKey) === selectedQuery,
-            );
-            if (matched) handleSelectFeature(matched);
+          const selected = displayedHistory[selectedIndex];
+          if (selected?.feature) {
+            handleSelectFeature(selected.feature);
           }
         }
       } else if (searchQuery.trim() && searchResults.length > 0) {
@@ -159,7 +144,7 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
           <button
             type="button"
             onClick={goBack}
-            aria-label={t('common:buttons.back')}
+            aria-label={t('common_buttons_back')}
             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" />
@@ -169,12 +154,12 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
 
       {/* 中间：搜索容器 */}
       <div ref={containerRef} className="flex-1 mx-4 max-w-md relative">
-        <div className="relative">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
+        <div className="relative group">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground/60 group-focus-within:text-muted-foreground transition-colors pointer-events-none" />
           <input
             ref={inputRef}
             type="text"
-            placeholder={t('common:buttons.search')}
+            placeholder={t('common_buttons_search')}
             value={searchQuery}
             onChange={(e) => {
               setSearchQuery(e.target.value);
@@ -183,9 +168,14 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
             }}
             onFocus={() => setShowResults(true)}
             onKeyDown={handleKeyDown}
-            aria-label={t('common:buttons.search')}
-            className="w-full h-9 pl-9 pr-8 text-sm rounded-md border border-input bg-muted/50 transition-all placeholder:text-muted-foreground focus:bg-background focus:outline-none focus:ring-1 focus:ring-ring focus:border-input"
+            aria-label={t('common_buttons_search')}
+            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 && (
+            <kbd className="absolute right-3 top-1/2 -translate-y-1/2 hidden sm:inline-flex h-5 items-center gap-0.5 rounded border border-border/60 bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground/60 pointer-events-none">
+              ⌘K
+            </kbd>
+          )}
           {searchQuery && (
             <button
               type="button"
@@ -203,8 +193,8 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
 
         {/* 动态联想结果卡片 */}
         {showResults && (searchQuery.trim() || displayedHistory.length > 0) && (
-          <div className="absolute top-full left-0 right-0 mt-1 bg-popover text-popover-foreground rounded-md shadow-md border border-border max-h-80 overflow-y-auto z-50 animate-in fade-in slide-in-from-top-1 duration-150">
-            <ul role="listbox" className="p-1">
+          <div className="absolute top-full left-0 right-0 mt-1.5 bg-popover text-popover-foreground rounded-lg shadow-lg border border-border max-h-80 overflow-y-auto z-50 animate-in fade-in slide-in-from-top-2 duration-150">
+            <ul role="listbox" className="p-1.5">
               {searchQuery.trim() ? (
                 searchResults.length > 0 ? (
                   searchResults.map((feature, index) => (
@@ -214,20 +204,25 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
                       aria-selected={selectedIndex === index}
                       onClick={() => handleSelectFeature(feature)}
                       className={cn(
-                        'flex items-center gap-3 px-2.5 py-2 rounded-sm cursor-pointer text-sm transition-colors',
+                        'flex items-center gap-3 px-3 py-2.5 rounded-md cursor-pointer text-sm transition-colors',
                         selectedIndex === index
                           ? 'bg-accent text-accent-foreground'
                           : 'hover:bg-muted/60',
                       )}
                     >
-                      <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-sm bg-muted text-muted-foreground">
+                      <div
+                        className={cn(
+                          'flex h-8 w-8 shrink-0 items-center justify-center rounded-lg',
+                          'bg-muted/80 text-muted-foreground',
+                        )}
+                      >
                         {feature.icon && <feature.icon className="h-4 w-4" />}
                       </div>
                       <div className="flex-1 min-w-0">
                         <p className="font-medium text-foreground truncate">
                           {t(feature.labelKey)}
                         </p>
-                        <p className="text-xs text-muted-foreground truncate">
+                        <p className="text-xs text-muted-foreground truncate mt-0.5">
                           {t(feature.descriptionKey)}
                         </p>
                       </div>
@@ -240,27 +235,38 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
                 )
               ) : (
                 <>
-                  <div className="px-2.5 py-1.5 text-xs font-semibold tracking-wider text-muted-foreground/80">
+                  <div className="px-3 py-1.5 text-[11px] font-semibold tracking-wider text-muted-foreground/60 uppercase">
                     {t('common:buttons.recentSearch')}
                   </div>
                   {displayedHistory.map((item, index) => (
                     <li
-                      key={item}
+                      key={item.key}
                       role="option"
                       aria-selected={selectedIndex === index}
-                      onClick={() => {
-                        setSearchQuery(item);
-                        setSelectedIndex(-1);
-                      }}
+                      onClick={() => item.feature && handleSelectFeature(item.feature)}
                       className={cn(
-                        'flex items-center gap-3 px-2.5 py-2 rounded-sm cursor-pointer text-sm transition-colors',
+                        'flex items-center gap-3 px-3 py-2 rounded-md cursor-pointer text-sm transition-colors',
                         selectedIndex === index
                           ? 'bg-accent text-accent-foreground'
                           : 'hover:bg-muted/60',
                       )}
                     >
-                      <History className="h-4 w-4 text-muted-foreground shrink-0" />
-                      <span className="truncate">{item}</span>
+                      <div
+                        className={cn(
+                          'flex h-8 w-8 shrink-0 items-center justify-center rounded-lg',
+                          'bg-muted/80 text-muted-foreground',
+                        )}
+                      >
+                        {item.feature?.icon && <item.feature.icon className="h-4 w-4" />}
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <p className="font-medium text-foreground truncate">
+                          {item.feature && t(item.feature.labelKey)}
+                        </p>
+                        <p className="text-xs text-muted-foreground truncate mt-0.5">
+                          {item.feature && t(item.feature.descriptionKey)}
+                        </p>
+                      </div>
                     </li>
                   ))}
                 </>
@@ -272,18 +278,12 @@ export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void })
 
       {/* 右侧：操作区 */}
       <div className="flex items-center gap-1 shrink-0">
-        <IconButton onClick={toggleLanguage} title={t('common:buttons.toggleLanguage')}>
-          <Globe className="h-4 w-4" />
-        </IconButton>
         <IconButton onClick={cycleThemeMode} title={t(`common:buttons.themeMode.${mode}`)}>
           <ThemeIcon className="h-4 w-4" />
         </IconButton>
         <IconButton onClick={handleOpenInTab} title={t('common:buttons.openInTab')}>
           <ExternalLink className="h-4 w-4" />
         </IconButton>
-        <IconButton onClick={onOpenOptions} title={t('common:buttons.settings')}>
-          <Settings className="h-4 w-4" />
-        </IconButton>
       </div>
     </header>
   );

src/components/__tests__/CopyButton.test.tsx

@@ -0,0 +1,194 @@
+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');
+  });
+});

src/components/__tests__/DecodeResultPaper.test.tsx

@@ -40,7 +40,7 @@ describe('DecodeResultPaper 组件', () => {
 
     it('应渲染下载按钮', () => {
       render(<DecodeResultPaper {...defaultProps} />);
-      expect(screen.getByRole('button', { name: 'base64Converter:download' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: '下载' })).toBeInTheDocument();
     });
 
     it('应渲染 children 内容', () => {
@@ -64,7 +64,7 @@ describe('DecodeResultPaper 组件', () => {
 
     it('点击下载按钮时应调用 onDownload', () => {
       render(<DecodeResultPaper {...defaultProps} />);
-      fireEvent.click(screen.getByRole('button', { name: 'base64Converter:download' }));
+      fireEvent.click(screen.getByRole('button', { name: '下载' }));
       expect(defaultProps.onDownload).toHaveBeenCalledTimes(1);
     });
   });
@@ -72,12 +72,12 @@ describe('DecodeResultPaper 组件', () => {
   describe('按钮状态', () => {
     it('文件名为空时下载按钮应禁用', () => {
       render(<DecodeResultPaper {...{ ...defaultProps, fileName: '' }} />);
-      expect(screen.getByRole('button', { name: 'base64Converter:download' })).toBeDisabled();
+      expect(screen.getByRole('button', { name: '下载' })).toBeDisabled();
     });
 
     it('文件名不为空时下载按钮应启用', () => {
       render(<DecodeResultPaper {...defaultProps} />);
-      expect(screen.getByRole('button', { name: 'base64Converter:download' })).toBeEnabled();
+      expect(screen.getByRole('button', { name: '下载' })).toBeEnabled();
     });
   });
 });

src/components/__tests__/ImageUploader.test.tsx

@@ -7,29 +7,17 @@ const storageOnChangedMock = { addListener: vi.fn(), removeListener: vi.fn() };
 (globalThis as any).chrome = { storage: { onChanged: storageOnChangedMock } };
 (globalThis as any).browser = { storage: { onChanged: storageOnChangedMock } };
 
-// 💡 1. 规范对齐：挂载标准的 react-i18next 统一桩函数，防止多进程前缀破产
-vi.mock('react-i18next', () => ({
-  useTranslation: vi.fn((ns: string | string[]) => {
-    const nsArray = Array.isArray(ns) ? ns : [ns];
-    return {
-      t: (key: string) => `${nsArray.join(',')}:${key}`,
-      i18n: { language: 'en' },
-      ready: true,
-    };
-  }),
-}));
-
 // 模拟 URL API
 const mockCreateObjectURL = vi.fn();
 const mockRevokeObjectURL = vi.fn();
 Object.defineProperty(window.URL, 'createObjectURL', { value: mockCreateObjectURL });
 Object.defineProperty(window.URL, 'revokeObjectURL', { value: mockRevokeObjectURL });
 
-// 模拟 showMessage
-vi.mock('@/components/GlobalSnackbar', () => ({
-  useSnackbar: () => ({
-    showMessage: vi.fn(),
-  }),
+vi.mock('sonner', () => ({
+  toast: {
+    success: vi.fn(),
+    error: vi.fn(),
+  },
 }));
 
 describe('ImageUploader 组件', () => {
@@ -61,9 +49,8 @@ describe('ImageUploader 组件', () => {
   describe('渲染测试', () => {
     it('当没有选中文件时应显示上传提示', () => {
       render(<ImageUploader {...defaultProps} />);
-      // 💡 修复点 2：全面切换为高弹性正则，斩断双重命名空间死锁！
-      expect(screen.getByText(/clickToUpload/)).toBeInTheDocument();
-      expect(screen.getByText(/supportFormats/)).toBeInTheDocument();
+      expect(screen.getByText(/点击.*拖拽/)).toBeInTheDocument();
+      expect(screen.getByText(/格式/)).toBeInTheDocument();
     });
 
     it('当没有选中文件时应显示 ImageIcon', () => {
@@ -77,8 +64,7 @@ describe('ImageUploader 组件', () => {
         <ImageUploader {...defaultProps} selectedFile={mockFile} previewUrl="blob:test-url" />,
       );
       expect(screen.getByText('test.png')).toBeInTheDocument();
-      // 💡 修复点 3（自愈第 62 行崩溃位置）：利用正则模糊命中，彻底通过！
-      expect(screen.getByText(/clickToChange/)).toBeInTheDocument();
+      expect(screen.getByText(/点击更换/)).toBeInTheDocument();
     });
 
     it('当选中文件时应显示预览图片', () => {

src/components/__tests__/QrCodePreview.test.tsx

@@ -2,19 +2,6 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { fireEvent, render, screen } from '@testing-library/react';
 import QrCodePreview from '@/components/QrCodePreview';
 
-// 💡 1. 规范对齐：在这个测试文件的头部同样挂载统一的 react-i18next 桩函数，
-// 与你整个工程的国际化解耦架构完美闭环。
-vi.mock('react-i18next', () => ({
-  useTranslation: vi.fn((ns: string | string[]) => {
-    const nsArray = Array.isArray(ns) ? ns : [ns];
-    return {
-      t: (key: string) => `${nsArray.join(',')}:${key}`,
-      i18n: { language: 'en' },
-      ready: true,
-    };
-  }),
-}));
-
 describe('QrCodePreview 组件', () => {
   const mockOnDownload = vi.fn();
   const mockOnCopy = vi.fn();
@@ -31,8 +18,7 @@ describe('QrCodePreview 组件', () => {
   describe('渲染测试', () => {
     it('当 qrCodeDataUrl 为空时应显示占位文本', () => {
       render(<QrCodePreview qrCodeDataUrl="" onDownload={mockOnDownload} onCopy={mockOnCopy} />);
-      // 💡 修复点 2：全面拥抱柔性正则匹配，直接终结多层 'qrCode:qrCode:' 前缀踩踏！
-      expect(screen.getByText(/qrCodeWillShow/)).toBeInTheDocument();
+      expect(screen.getByText(/二维码将显示/)).toBeInTheDocument();
     });
 
     it('当 qrCodeDataUrl 有值时应显示二维码图片', () => {
@@ -57,8 +43,7 @@ describe('QrCodePreview 组件', () => {
           onCopy={mockOnCopy}
         />,
       );
-      // 💡 修复点 3：切换为正则，无缝过检
-      expect(screen.getByText(/downloadButton/)).toBeInTheDocument();
+      expect(screen.getByText(/下载二维码/)).toBeInTheDocument();
     });
 
     it('当 qrCodeDataUrl 有值时应显示复制按钮', () => {
@@ -69,14 +54,13 @@ describe('QrCodePreview 组件', () => {
           onCopy={mockOnCopy}
         />,
       );
-      // 💡 修复点 4：切换为正则，无缝过检
-      expect(screen.getByText(/copyQrButton/)).toBeInTheDocument();
+      expect(screen.getByText(/复制二维码/)).toBeInTheDocument();
     });
 
     it('当 qrCodeDataUrl 为空时不应显示操作按钮', () => {
       render(<QrCodePreview qrCodeDataUrl="" onDownload={mockOnDownload} onCopy={mockOnCopy} />);
-      expect(screen.queryByText(/downloadButton/)).not.toBeInTheDocument();
-      expect(screen.queryByText(/copyQrButton/)).not.toBeInTheDocument();
+      expect(screen.queryByText(/下载二维码/)).not.toBeInTheDocument();
+      expect(screen.queryByText(/复制二维码/)).not.toBeInTheDocument();
     });
   });
 
@@ -89,8 +73,7 @@ describe('QrCodePreview 组件', () => {
           onCopy={mockOnCopy}
         />,
       );
-      // 💡 修复点 5：点击行为同步更改为正则匹配定位，保障状态修改流一帧直达
-      fireEvent.click(screen.getByText(/downloadButton/));
+      fireEvent.click(screen.getByText(/下载二维码/));
       expect(mockOnDownload).toHaveBeenCalledTimes(1);
     });
 
@@ -102,8 +85,7 @@ describe('QrCodePreview 组件', () => {
           onCopy={mockOnCopy}
         />,
       );
-      // 💡 修复点 6：彻底修复第 88 行报错位置，改用正则解开死锁！
-      fireEvent.click(screen.getByText(/copyQrButton/));
+      fireEvent.click(screen.getByText(/复制二维码/));
       expect(mockOnCopy).toHaveBeenCalledTimes(1);
     });
   });

src/components/__tests__/RouterContainer.test.tsx

@@ -2,7 +2,6 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { render } from '@testing-library/react';
 import RouterContainer from '@/components/RouterContainer';
 import { RouterProvider } from '@/providers/RouterProvider';
-import { SnackbarProvider } from '@/components/GlobalSnackbar';
 import type { PageType } from '@/types/storage';
 import React from 'react';
 
@@ -29,11 +28,7 @@ describe('RouterContainer 组件', () => {
   });
 
   const renderWithProvider = (ui: React.ReactElement) => {
-    return render(
-      <SnackbarProvider>
-        <RouterProvider>{ui}</RouterProvider>
-      </SnackbarProvider>,
-    );
+    return render(<RouterProvider>{ui}</RouterProvider>);
   };
 
   describe('渲染测试', () => {
@@ -74,11 +69,7 @@ describe('RouterContainer 组件', () => {
       const { rerender } = renderWithProvider(<RouterContainer />);
 
       mockRouterValue.currentPage = 'timestamp';
-      rerender(
-        <SnackbarProvider>
-          <RouterProvider>{<RouterContainer />}</RouterProvider>
-        </SnackbarProvider>,
-      );
+      rerender(<RouterProvider>{<RouterContainer />}</RouterProvider>);
 
       const box = document.querySelector('.page-transition-enter');
       expect(box).toBeInTheDocument();