refactor: 更新 RouterProvider 以过滤非法页面并合并配置

refactor: 移除 Dashboard 页面及相关功能，更新路由和组件逻辑
- 移除 Dashboard 相关的组件、特性和测试代码，简化项目结构。 - 更新 PageSkeleton 组件，默认渲染工具页面骨架。 - 修改 RouterContainer 和 RouterProvider 以适应新的默认路由策略，确保用户直接访问 timestamp 页面。 - 更新测试用例，确保在新结构下的功能正常。
2026-07-05 22:20:04 +08:00 · 2026-07-05 22:02:25 +08:00 · 2026-07-05 21:55:22 +08:00 · 2026-07-05 21:47:35 +08:00 · 2026-07-05 21:34:41 +08:00 · 2026-06-30 23:15:35 +08:00
96 changed files with 1632 additions and 1299 deletions
@@ -677,7 +677,7 @@ src/pages/StorageCleaner/useStorageCleaner.ts  — 页面级 Hook
  label: '时间戳转换',
  description: '日期与时间戳互转',
  defaultVisible: true,
-  components: { popup: TimestampPage, sidepanel: TimestampPage, tab: TimestampPage },
+  component: TimestampPage,
 }
 ```

@@ -764,7 +764,7 @@ const [themeMode, setThemeMode, isInitialized] = useStorageState(
 Chrome Storage 读取是异步的。项目通过 `localStorage` 快照（键名 `snapshot/{storageKey}`）提供同步初始值，消除首屏闪烁。

 | 模块                | 快照工具           | 防覆盖机制                                                                                |
-| ---- | -------- | ---------- |
+| ------------------- | ------------------ | ----------------------------------------------------------------------------------------- |
 | `RouterProvider`    | `syncSnapshot.ts`  | `canPersistRef`（加载成功后才写入）、`hasUserNavigatedRef`（用户导航后不被 storage 覆盖） |
 | `useStorageState`   | `syncSnapshot.ts`  | `loadSucceededRef` 或 `userModifiedRef` 为 true 时才写入                                  |
 | `ThemeModeProvider` | `themeSnapshot.ts` | `hasUserSetMode`（用户切换主题后不被 storage 覆盖）                                       |
@@ -5,7 +5,7 @@
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
-    "css": "src/index.css",
+    "css": "src/styles/shell.css",
    "baseColor": "slate",
    "cssVariables": true,
    "prefix": ""
@@ -5,3 +5,4 @@
 | 文档                                                                             | 状态              | 说明                                                 |
 | -------------------------------------------------------------------------------- | ----------------- | ---------------------------------------------------- |
 | [storage-cleaner/indexeddb-fix-plan.md](./storage-cleaner/indexeddb-fix-plan.md) | ✅ Phase 3 已完成 | Storage Cleaner IndexedDB 清理逻辑修复方案与验收标准 |
+| [popup-layout/feature-nav-layout.md](./popup-layout/feature-nav-layout.md)       | 待实施            | Popup 右侧图标导航、移除 Dashboard、默认 timestamp   |
@@ -0,0 +1,356 @@
+# Popup 布局重构 — 功能导航与 Dashboard 移除
+
+> 创建时间: 2026-07-05
+> 状态: 待实施
+> 关联模块: `src/entrypoints/popup/`、`src/layout/FeatureNav/`、`src/providers/RouterProvider.tsx`
+> 影响范围: 仅 popup 入口（tab / sidepanel 不在本次布局范围）
+
+## 背景与目标
+
+当前 popup 采用 **Dashboard 首页 + TopBar 搜索跳转** 模式：用户打开扩展后先看到仪表盘卡片网格，再点击进入具体工具。布局为固定 400×600（见 `src/entrypoints/popup/App.tsx` 与 `src/entrypoints/popup/index.html`），TopBar 在非 dashboard 页面显示「返回首页」按钮。
+
+该模式增加了一步选工具操作。本次重构将 popup 改为 **工具直达 + 右侧常驻导航**，并移除 Dashboard 页面。
+
+| 维度       | 现状                          | 目标                                      |
+| ---------- | ----------------------------- | ----------------------------------------- |
+| 默认页     | `dashboard`                   | 新用户默认 `timestamp`                    |
+| 导航       | Dashboard 卡片网格 + 搜索跳转 | 右侧常驻纯图标导航栏                      |
+| 首页       | Dashboard 独立页              | 移除                                      |
+| Popup 宽度 | 400px                         | 450px（内容区 ~402px + 导航栏 48px）      |
+| 作用范围   | —                             | 仅 popup 改布局；tab / sidepanel 不加导航 |
+
+---
+
+## 布局设计
+
+### 结构示意
+
+```mermaid
+flowchart LR
+  subgraph popup ["Popup 450x600"]
+    subgraph mainCol ["主列 flex-1"]
+      TopBar["TopBar"]
+      Content["RouterContainer"]
+      TopBar --> Content
+    end
+    NavCol["FeatureNav 48px"]
+  end
+  mainCol --- NavCol
+```
+
+### 尺寸约束
+
+| 属性     | 值     | 说明                                           |
+| -------- | ------ | ---------------------------------------------- |
+| 总宽度   | 450px  | `App.tsx` 容器 + `index.html` 内联样式同步修改 |
+| 总高度   | 600px  | 不变                                           |
+| 主内容列 | flex-1 | 约 402px，需 `min-w-0` 防止 flex 子项溢出      |
+| 导航栏   | 48px   | Tailwind `w-12`，固定宽度，不参与 flex 收缩    |
+
+### 视觉规范
+
+- 导航栏：左侧 `border-l border-border`，垂直排列图标按钮
+- 图标按钮：`h-9 w-9` 或 `h-10 w-10`，纯图标
+- Tooltip：使用原生 `title` 属性 + `aria-label={feature.label}`，不引入 Tooltip 组件
+- Active 态：背景 `bg-muted` + 左侧 `border-l-2 border-primary`
+- 导航列表超出高度时：`overflow-y-auto`（600px 高度下 9 个工具通常无需滚动）
+
+---
+
+## FeatureNav 组件规格
+
+新建 `src/layout/FeatureNav/`，遵循 UI + Hook 分离模式（见 `.github/CODING_STANDARDS.md` §11）。
+
+### 文件结构
+
+```
+src/layout/FeatureNav/
+├── index.tsx              # 垂直图标按钮列表、active 高亮、无障碍属性
+├── useFeatureNav.ts       # 读路由状态，暴露 navItems / navigateTo / currentPage
+├── resolveNavFeatures.ts  # 从 Dashboard 迁出的功能列表解析逻辑
+└── __tests__/
+    ├── index.test.tsx
+    └── resolveNavFeatures.test.ts
+```
+
+### resolveNavFeatures.ts
+
+从 `src/pages/Dashboard/dashboardFeatures.ts` 迁出并重命名：
+
+```typescript
+export interface NavFeatureItem {
+  key: PageType;
+  feature: FeatureConfig & { icon: NonNullable<FeatureConfig['icon']> };
+}
+
+export function resolveNavFeatures(keys: PageType[], visiblePages: PageType[]): NavFeatureItem[];
+```
+
+逻辑与旧 `resolveDashboardFeatures` 一致：
+
+- 按 `keys`（即 `pageOrder`）顺序遍历
+- 跳过不在 `visiblePages` 中的项
+- 跳过无 `icon` 的 feature（dashboard 移除后不应出现）
+
+### useFeatureNav.ts
+
+```typescript
+export interface UseFeatureNavReturn {
+  navItems: NavFeatureItem[];
+  currentPage: PageType;
+  navigateTo: (page: PageType) => void;
+}
+```
+
+- 从 `useRouter()` 读取 `currentPage`、`pageOrder`、`visiblePages`、`navigateTo`
+- 用 `useMemo` 调用 `resolveNavFeatures(pageOrder, visiblePages)` 生成 `navItems`
+
+### index.tsx
+
+- 渲染 `<nav aria-label="功能导航">` 包裹垂直按钮列表
+- 每项为 `<button type="button">`，内含 Lucide 图标
+- 点击调用 `navigateTo(item.key)`
+- 当前项添加 active 样式与 `aria-current="page"`
+
+### 引用范围
+
+**仅** `src/entrypoints/popup/App.tsx` 引用 `FeatureNav`。sidepanel / tab 入口不引入该组件。
+
+---
+
+## popup/App.tsx 目标结构
+
+```tsx
+import RouterProvider from '@/providers/RouterProvider';
+import TopBar from '@/layout/TopBar';
+import FeatureNav from '@/layout/FeatureNav';
+import RouterContainer from '@/components/RouterContainer';
+import ErrorBoundary from '@/components/ErrorBoundary';
+
+export default function App() {
+  return (
+    <RouterProvider
+      defaultRoute="timestamp"
+      syncKey="app/popupRoute"
+      visiblePagesKey="app/popupVisiblePages"
+      pageOrderKey="app/popupPageOrder"
+    >
+      <div className="flex w-[450px] max-w-[450px] min-w-[450px] h-[600px] min-h-[600px] overflow-hidden bg-background">
+        <div className="flex flex-col flex-1 min-w-0">
+          <TopBar />
+          <ErrorBoundary>
+            <RouterContainer />
+          </ErrorBoundary>
+        </div>
+        <FeatureNav />
+      </div>
+    </RouterProvider>
+  );
+}
+```
+
+`src/entrypoints/popup/index.html` 内联样式中 `width: 400px` 改为 `width: 450px`。
+
+---
+
+## 移除 Dashboard（全局类型变更）
+
+布局仅改 popup，但 `dashboard` 从 `PageType` 移除会影响全项目类型与路由校验。
+
+### 删除文件
+
+| 路径                                  | 说明             |
+| ------------------------------------- | ---------------- |
+| `src/pages/Dashboard/`                | 整目录（含测试） |
+| `src/config/pageLoaders/dashboard.ts` | Dashboard 懒加载 |
+
+### 修改文件
+
+| 文件                                 | 改动                                                        |
+| ------------------------------------ | ----------------------------------------------------------- |
+| `src/types/storage.d.ts`             | 从 `PageType` 联合类型删除 `'dashboard'`                    |
+| `src/config/featureMeta.ts`          | 删除 dashboard 条目                                         |
+| `src/config/pageLoaders/index.ts`    | 删除 `case 'dashboard'`                                     |
+| `src/components/RouterContainer.tsx` | 去掉 dashboard 骨架屏分支；统一使用 `page-transition-enter` |
+| `src/components/PageSkeleton.tsx`    | 删除 `variant: 'dashboard'` 及对应 UI                       |
+| `src/styles/shell.css`               | 删除 `.page-transition-dashboard`                           |
+
+### TopBar 精简
+
+`src/layout/TopBar/index.tsx` 与 `useTopBar.ts`：
+
+- 删除「返回首页」按钮（`ArrowLeft` + `goHome`）
+- 删除 `isDashboard` 状态及相关导出
+- 搜索过滤中 `f.key === 'dashboard'` 的特殊排除逻辑可删除
+
+### RouterProvider 变更
+
+`src/providers/RouterProvider.tsx`：
+
+- 删除 `goHome()` 方法及 Context 中的 `goHome` 字段
+- 全局 `defaultRoute` 默认值由 `'dashboard'` 改为 `'timestamp'`
+- popup 显式传入 `defaultRoute="timestamp"`（与全局默认一致，便于阅读）
+
+### Sidepanel 最小修复
+
+`src/entrypoints/sidepanel/App.tsx` 若仍存在：
+
+- `defaultRoute="dashboard"` 改为 `defaultRoute="timestamp"`
+- 不添加 FeatureNav 布局
+
+---
+
+## 默认路由策略（仅新用户）
+
+利用现有 `RouterProvider` 机制，**无需额外迁移代码**。
+
+```typescript
+// 首屏（localStorage 快照，消除闪烁）
+const [currentPage] = useState(() => getSyncSnapshot(syncKey, defaultRoute, isValidPage));
+
+// 异步加载 chrome.storage
+const savedRoute = (stored[syncKey] ?? defaultRoute) as PageType;
+if (isValidPage(savedRoute) && syncRoute && !hasUserNavigatedRef.current) {
+  setCurrentPage(savedRoute);
+}
+```
+
+| 场景                                       | 行为                                                             |
+| ------------------------------------------ | ---------------------------------------------------------------- |
+| 新用户（无 `app/popupRoute`）              | 首屏 + 持久化均为 `timestamp`                                    |
+| 老用户（如 `app/popupRoute: 'jsonTools'`） | 恢复上次路由                                                     |
+| 老用户曾存 `dashboard`                     | `isValidPage('dashboard')` 为 false → 回退 `timestamp`（软迁移） |
+| 右键菜单 deep link                         | `?feature=&payload=` 优先级不变，高于默认路由                    |
+| 用户主动切换                               | `navigateTo` 后 `hasUserNavigatedRef` 阻止异步覆盖               |
+
+`visiblePages` / `pageOrder` 中残留的 `dashboard` 由 `mergeWithDefaults` 自动滤除（不在新默认列表中）。
+
+### 边界说明
+
+`recentlyUsedTools` 若含已移除的 `dashboard` 等非法项，当前 `isValidPageList` 校验要求数组**全部**合法，失败时整表回退为 `[]`。影响：TopBar 搜索历史中的「最近使用」可能被清空。此为已知低影响边界；实现时可选优化为「过滤非法项保留合法项」，**非必须**。
+
+---
+
+## 实施顺序
+
+```
+1. 迁出 resolveNavFeatures + 新建 FeatureNav 组件与测试
+2. 修改 popup/App.tsx 布局 + popup/index.html 宽度
+3. 全局移除 dashboard（PageType → FEATURES → pageLoader → 删页面目录）
+4. 精简 TopBar / RouterProvider / RouterContainer / PageSkeleton
+5. 批量更新测试 → npm run typecheck && npm run test && npm run lint
+```
+
+---
+
+## 验收标准
+
+### A. 布局与导航（手动）
+
+| 编号 | 步骤                                 | 期望                                           |
+| ---- | ------------------------------------ | ---------------------------------------------- |
+| A-1  | 首次安装（或清空 storage）打开 popup | 默认显示时间戳页，右侧导航 timestamp 项高亮    |
+| A-2  | 依次点击各导航图标                   | 切换到对应工具页，active 态跟随当前页          |
+| A-3  | hover 各导航图标                     | 显示中文功能名 tooltip（`title` 属性）         |
+| A-4  | 使用过某工具后关闭再打开 popup       | 恢复上次路由（非 dashboard）                   |
+| A-5  | 检查 popup 尺寸                      | 宽度 450px，高度 600px，内容区不被导航挤压溢出 |
+
+### B. Dashboard 移除
+
+| 编号 | 期望                                                                 |
+| ---- | -------------------------------------------------------------------- |
+| B-1  | TopBar 搜索下拉无 dashboard 项                                       |
+| B-2  | TopBar 无「返回首页」按钮                                            |
+| B-3  | `PageType`、`FEATURES`、`loadPage` 中无 dashboard                    |
+| B-4  | storage 中 `app/popupRoute: 'dashboard'` 时打开 popup 落到 timestamp |
+| B-5  | `visiblePages` 含 dashboard 时自动滤除，导航正常显示工具列表         |
+
+### C. 单元测试
+
+| 编号 | 覆盖                                                                       |
+| ---- | -------------------------------------------------------------------------- |
+| C-1  | `FeatureNav` 渲染全部可见工具图标                                          |
+| C-2  | `FeatureNav` 点击图标调用 `navigateTo`                                     |
+| C-3  | `FeatureNav` 当前页对应项有 active 样式 / `aria-current`                   |
+| C-4  | `resolveNavFeatures` 按 pageOrder 排序、respect visiblePages               |
+| C-5  | 更新 `RouterProvider` / `TopBar` / `RouterContainer` / `features` 相关测试 |
+| C-6  | 删除 `src/pages/Dashboard/__tests__/` 下全部测试                           |
+
+### D. CI
+
+| 编号 | 标准                     |
+| ---- | ------------------------ |
+| D-1  | `npm run typecheck` 通过 |
+| D-2  | `npm run test` 通过      |
+| D-3  | `npm run lint` 通过      |
+
+---
+
+## 不在范围
+
+- tab / sidepanel 布局改造（不加 FeatureNav）
+- `visiblePages` / `pageOrder` 可视化配置 UI
+- Popup 高度变更（保持 600px）
+- 修改 `AGENTS.md` 中 spec 目录引用（实际 spec 位于 `docs/spec/`）
+
+---
+
+## PR 检查清单
+
+```markdown
+## 功能
+
+- [ ] 新建 FeatureNav 组件（index / useFeatureNav / resolveNavFeatures）
+- [ ] popup 布局改为双列（主内容 + 右侧导航）
+- [ ] popup 宽度 450px（App.tsx + index.html）
+- [ ] popup defaultRoute="timestamp"
+- [ ] 全局移除 dashboard（PageType、FEATURES、pageLoader、页面目录）
+- [ ] TopBar 移除返回按钮与 goHome 相关逻辑
+- [ ] RouterProvider 移除 goHome，defaultRoute 改为 timestamp
+- [ ] sidepanel defaultRoute 最小修复（若文件存在）
+
+## 测试
+
+- [ ] FeatureNav / resolveNavFeatures 单元测试
+- [ ] 更新 RouterProvider / TopBar / RouterContainer / features 测试
+- [ ] 删除 Dashboard 相关测试
+
+## 验收
+
+- [ ] npm run typecheck / test / lint 通过
+- [ ] 手动 A-1 ~ A-5、B-1 ~ B-4 通过
+```
+
+---
+
+## 风险与边界说明
+
+1. **Dashboard 移除为全局变更**：虽 FeatureNav 仅 popup 使用，但 `PageType` 删除 `dashboard` 会影响所有入口的类型校验与路由合法性。
+2. **老用户 dashboard 路由软迁移**：依赖 `isValidPage` 回退到 `defaultRoute`，不会 crash，但用户会察觉「首页消失、默认变为时间戳」——符合预期。
+3. **450px 宽度**：Chrome popup 允许扩展较默认更宽；若未来 Firefox 有差异需在 Firefox 构建中手动验证。
+4. **recentlyUsedTools 整表校验**：见「默认路由策略 → 边界说明」，可选后续优化。
+
+---
+
+## 相关文件索引
+
+| 文件                                  | 说明                            |
+| ------------------------------------- | ------------------------------- |
+| `src/entrypoints/popup/App.tsx`       | popup 布局入口，引用 FeatureNav |
+| `src/entrypoints/popup/index.html`    | popup 初始尺寸 450px            |
+| `src/layout/FeatureNav/`              | 新建：右侧图标导航              |
+| `src/layout/TopBar/`                  | 精简：移除返回按钮              |
+| `src/providers/RouterProvider.tsx`    | 默认路由、移除 goHome           |
+| `src/config/featureMeta.ts`           | FEATURES 定义，删除 dashboard   |
+| `src/types/storage.d.ts`              | PageType 定义                   |
+| `src/config/pageLoaders/index.ts`     | 页面懒加载路由                  |
+| `src/components/RouterContainer.tsx`  | 页面渲染容器                    |
+| `src/components/PageSkeleton.tsx`     | 加载骨架屏                      |
+| `src/styles/shell.css`                | 页面过渡动画                    |
+| `src/pages/Dashboard/`                | **删除**                        |
+| `src/config/pageLoaders/dashboard.ts` | **删除**                        |
+| `src/entrypoints/sidepanel/App.tsx`   | 最小修复 defaultRoute           |
+
+---
+
+> **注**：项目 spec 文档实际目录为 `docs/spec/`。`AGENTS.md` 中引用的根目录 `spec/README.md` 尚未建立，以本目录 [`README.md`](../README.md) 为索引。
@@ -29,3 +29,20 @@
 - 导出工具：`src/utils/dataExporter.ts`

 实现约束与任务完成状态记录在 [TASKS.md](./TASKS.md)。
+
+## 开发者注意事项（与源码同步）
+
+以下行为以 `src/` 源码为准；设计文档中的旧版 class API、`metadata`/`options` 嵌套结构已废弃。
+
+### Worker 任务 ID（`generationId`）
+
+`useGenerator` 每次调用 `generate()` 递增 `generationIdRef`，经 `start` 消息传入 Worker。Worker 所有响应（`progress` / `complete` / `error`）均携带同一 `generationId`。
+
+- **取消**：`cancel()` 先递增 ID 再发送 `cancel`，使进行中的 Worker 响应被主线程忽略；Worker 每生成 100 行让出事件循环以处理 cancel。
+- **快速重试**：新任务 ID 大于旧响应时，旧消息被丢弃，避免 UI 状态错乱。
+
+类型见 `WorkerRequestMessage` / `WorkerResponseMessage`（`src/types/testDataGenerator.ts`）。
+
+### 规则存储写入失败
+
+`ruleStorage.save()` / `update()` 在 `localStorage.setItem` 失败时返回 `null`（不部分提交）。页面层（如 `FieldList.tsx`）仅在返回值非空时 Toast 成功。详见 [rule-management.md § 存储机制](./rule-management.md#存储机制) 与 `src/utils/README.md`。
@@ -24,25 +24,20 @@

 ## 数据结构

+> **与源码对齐**：类型定义见 `src/types/testDataGenerator.ts`。规则**不**持久化生成数量与导出格式（由页面 `GenerateOptions` 状态管理）。
+
 ### 规则模板

 ```typescript
 interface DataRule {
-  id: string; // 唯一标识
-  name: string; // 规则名称
-  description?: string; // 规则描述
-  fields: FieldConfig[]; // 字段配置
-  options: {
-    total: number; // 生成数量
-    format: 'json' | 'csv';
-    defaultEmptyRate: number; // 默认空值率（0-100）
-  };
-  metadata: {
-    createdAt: number; // 创建时间
-    updatedAt: number; // 更新时间
-    lastUsedAt?: number; // 最后使用时间
-    useCount: number; // 使用次数
-  };
+  id: string;
+  name: string;
+  description?: string;
+  fields: FieldConfig[];
+  createdAt: number;
+  updatedAt: number;
+  lastUsedAt?: number;
+  useCount: number;
 }
 ```

@@ -50,13 +45,14 @@ interface DataRule {

 ```typescript
 interface FieldConfig {
-  id: string; // 字段唯一标识
-  name: string; // 字段名
-  generator: string; // 生成器名称
-  params: Record<string, any>; // 生成器参数
-  unique: boolean; // 唯一性约束
-  required: boolean; // 是否必填
-  emptyRate?: number; // 选填字段的空值概率（0-100）
+  id: string;
+  name: string;
+  description?: string;
+  generatorId: string; // 生成器 ID，对应 lib/generators 中的 id
+  params: Record<string, unknown>;
+  required: boolean;
+  nullRate: number; // 空值率 0-100，仅 required=false 时生效
+  unique: boolean;
 }
 ```

@@ -110,11 +106,9 @@ interface FieldConfig {

 1. 验证规则名称不为空
 2. 检查规则数量是否达到上限（20 条）
-3. 如果达到上限，显示提示"已达到最大规则数量"
-4. 生成唯一 ID
-5. 设置创建时间和更新时间
-6. 初始化使用次数为 0
-7. 保存到 localStorage
+3. 若达上限，`save()` 返回 `null`，UI 应阻止或提示
+4. 生成唯一 ID，写入 `createdAt`/`updatedAt`，`useCount` 初始为 0
+5. 调用 `ruleStorage.save()`；仅当返回值非 `null` 时视为成功（`localStorage` 写入失败同样返回 `null`）

 ---

@@ -167,17 +161,13 @@ interface FieldConfig {
 - 支持按规则描述搜索
 - 搜索为模糊匹配，不区分大小写

-**实现方式**:
+**实现方式**（`src/utils/ruleStorage.ts`）:

 ```typescript
-search(keyword: string): DataRule[] {
-  const rules = this.getAll();
-  const lowerKeyword = keyword.toLowerCase();
+import * as ruleStorage from '@/utils/ruleStorage';

-  return rules.filter(r =>
-    r.name.toLowerCase().includes(lowerKeyword) ||
-    r.description?.toLowerCase().includes(lowerKeyword)
-  );
+function searchRules(query: string): DataRule[] {
+  return ruleStorage.search(query);
 }
 ```

@@ -224,9 +214,7 @@ search(keyword: string): DataRule[] {

 1. 加载原规则配置到编辑器
 2. 用户修改配置
-3. 点击保存时更新规则
-4. 更新 metadata.updatedAt
-5. 保存到 localStorage
+3. 点击保存时调用 `ruleStorage.update()`；返回非 `null` 才更新 `updatedAt` 并提示成功

 ---

@@ -269,18 +257,12 @@ search(keyword: string): DataRule[] {
 **实现方式**:

 ```typescript
-loadRule(ruleId: string): void {
-  const rule = this.storage.getById(ruleId);
+function loadRule(ruleId: string): void {
+  const rule = ruleStorage.getById(ruleId);
+  if (!rule) return;

-  // 应用规则配置
-  this.setFields(rule.fields);
-  this.setOptions(rule.options);
-
-  // 记录使用
-  this.storage.recordUse(ruleId);
-
-  // 更新预览
-  this.updatePreview();
+  setFields(rule.fields);
+  ruleStorage.recordUse(ruleId);
 }
 ```

@@ -292,7 +274,7 @@ loadRule(ruleId: string): void {

 1. 点击"复制"按钮
 2. 创建规则的副本
-3. 名称添加"(副本)"后缀
+3. 名称添加「（副本）」后缀（默认 `duplicate(id, '（副本）')`）
 4. 生成新的 ID
 5. 保存为新规则

@@ -327,23 +309,20 @@ loadRule(ruleId: string): void {
 └─────────────────────────────────────────────────────────────────────┘
 ```

-**导出格式**:
+**导出格式**（`exportRules()` 返回 `DataRule[]` 的 JSON 字符串，无外层包装）:

 ```json
-{
-  "version": "1.0",
-  "exportedAt": "2024-01-20T10:15:45.000Z",
-  "rules": [
+[
  {
    "id": "rule_123456",
    "name": "电商用户数据 - 测试用",
    "description": "用于测试用户注册功能",
-      "fields": [...],
-      "options": {...},
-      "metadata": {...}
+    "fields": [],
+    "createdAt": 1704067200000,
+    "updatedAt": 1704067200000,
+    "useCount": 0
  }
-  ]
-}
+]
 ```

 ---
@@ -401,63 +380,25 @@ loadRule(ruleId: string): void {

 ### 本地存储

-使用 localStorage 存储规则数据:
+使用 `localStorage`，键名 `testDataGenerator_rules`。API 为**命名导出函数**（见 `src/utils/ruleStorage.ts`）：
+
+| 函数 | 说明 |
+| ---- | ---- |
+| `getAll()` / `getById()` / `getByName()` | 读取 |
+| `save()` / `update()` / `deleteRule()` / `duplicate()` | 写入；失败时返回 `null` 或 `false` |
+| `recordUse()` | 递增 `useCount`、更新 `lastUsedAt` |
+| `search()` / `getRecent()` | 搜索与最近使用 |
+| `exportRules()` / `importRules()` | 导入导出 JSON 数组 |
+| `clear()` | 清空全部规则 |
+
+写入失败（如 `QuotaExceededError`）时，内部 `setAll()` 返回 `false`，`save`/`update` 返回 `null`，`deleteRule` 返回 `false`，并在控制台输出 `[ruleStorage] 保存规则失败`。调用方须检查返回值，避免误报成功。

 ```typescript
-class RuleStorage {
-  private readonly STORAGE_KEY = 'testDataGenerator_rules';
+import * as ruleStorage from '@/utils/ruleStorage';

-  // 获取所有规则
-  getAll(): DataRule[] {
-    const data = localStorage.getItem(this.STORAGE_KEY);
-    return data ? JSON.parse(data) : [];
-  }
-
-  // 保存规则
-  save(rule: DataRule): { success: boolean; message?: string } {
-    const rules = this.getAll();
-
-    // 规则数量限制：最多 20 条
-    const MAX_RULES = 20;
-    if (rules.length >= MAX_RULES) {
-      return {
-        success: false,
-        message: `已达到最大规则数量（${MAX_RULES}条），请删除一些规则后再保存`,
-      };
-    }
-
-    rules.push(rule);
-    localStorage.setItem(this.STORAGE_KEY, JSON.stringify(rules));
-    return { success: true };
-  }
-
-  // 更新规则
-  update(id: string, updates: Partial<DataRule>): void {
-    const rules = this.getAll();
-    const index = rules.findIndex((r) => r.id === id);
-    if (index !== -1) {
-      rules[index] = { ...rules[index], ...updates };
-      localStorage.setItem(this.STORAGE_KEY, JSON.stringify(rules));
-    }
-  }
-
-  // 删除规则
-  delete(id: string): void {
-    const rules = this.getAll();
-    const filtered = rules.filter((r) => r.id !== id);
-    localStorage.setItem(this.STORAGE_KEY, JSON.stringify(filtered));
-  }
-
-  // 记录使用
-  recordUse(id: string): void {
-    const rules = this.getAll();
-    const rule = rules.find((r) => r.id === id);
-    if (rule) {
-      rule.metadata.lastUsedAt = Date.now();
-      rule.metadata.useCount++;
-      localStorage.setItem(this.STORAGE_KEY, JSON.stringify(rules));
-    }
-  }
+const saved = ruleStorage.save({ name: '示例', fields });
+if (!saved) {
+  // 达上限或 localStorage 不可用
 }
 ```

@@ -1,5 +1,7 @@
 # 技术实现

+> **文档同步说明**：本文档含早期设计稿代码示例，部分类型/API 已与实现偏离。开发时请以 `src/types/testDataGenerator.ts`、`src/workers/generator.worker.ts`、`src/pages/TestDataGenerator/hooks/useGenerator.ts`、`src/utils/ruleStorage.ts` 为准。近期变更摘要见 [README § 开发者注意事项](./README.md#开发者注意事项与源码同步)。
+
 ## 技术栈

 | 技术         | 用途     | 版本 |
@@ -1498,6 +1500,69 @@ export class DataExporter {

 ## Web Worker 使用

+### 消息协议
+
+```typescript
+// src/types/testDataGenerator.ts
+
+type WorkerRequestMessage =
+  | { type: 'start'; payload: WorkerStartPayload }
+  | { type: 'cancel' };
+
+type WorkerResponseMessage =
+  | { type: 'progress'; generationId: number; payload: GenerateProgress }
+  | { type: 'complete'; generationId: number; payload: GenerateResult }
+  | { type: 'error'; generationId: number; payload: { error: string } };
+
+interface WorkerStartPayload {
+  generationId: number; // 任务 ID，用于忽略过期响应
+  fields: FieldConfig[];
+  count: number;
+  csvMode: boolean;
+}
+```
+
+### useGenerator Hook
+
+`src/pages/TestDataGenerator/hooks/useGenerator.ts` 负责 Worker 生命周期与 `generationId` 管理：
+
+- Worker **复用**：同一 Hook 实例内只创建一次，出错后 `terminate` 并在下次重建
+- **开始生成**：`generate(fields, count, csvMode?)` 递增 `generationId` 并 post `start`
+- **取消**：`cancel()` 递增 ID（使旧响应失效）并 post `cancel`；取消完成的 `complete` 不写入 `error` 状态
+- **响应过滤**：`onmessage` 中若 `data.generationId !== generationIdRef.current` 则忽略
+
+```typescript
+const generate = (fields: FieldConfig[], count: number, csvMode = false) => {
+  if (isGenerating) return;
+  const generationId = ++generationIdRef.current;
+  worker.postMessage({ type: 'start', payload: { generationId, fields, count, csvMode } });
+};
+
+const cancel = () => {
+  if (workerRef.current && isGenerating) {
+    ++generationIdRef.current;
+    worker.postMessage({ type: 'cancel' });
+    setIsGenerating(false);
+  }
+};
+```
+
+### Worker 实现要点
+
+`src/workers/generator.worker.ts`：
+
+- 按 `field.generatorId` 查找生成器；选填字段按 `nullRate` 随机置 `null`
+- 唯一性：≤1000 条随机+重试；>1000 条优先 `generateAtIndex`
+- 每 `YIELD_EVERY`（100）行 `await setTimeout(0)`，以便处理 `cancel`
+- 进度：每 1000 条或最后一行 post `progress`
+
+---
+
+## Web Worker 使用（历史设计稿，仅供参考）
+
+<details>
+<summary>展开查看旧版设计示例（与当前实现不一致）</summary>
+
 ### 创建 Worker

 ```typescript
@@ -1593,7 +1658,7 @@ export function useGenerator() {
 }
 ```

-### 错误处理
+### 错误处理（设计稿，`useErrorHandler.ts` 未实现）

 ```typescript
 // src/pages/TestDataGenerator/hooks/useErrorHandler.ts
@@ -1636,8 +1701,12 @@ export function useErrorHandler(options: ErrorHandlerOptions = {}) {

 ---

+</details>
+
 ## 错误提示机制

+> 当前实现：`TestDataGenerator/index.tsx` 直接使用 `useGenerator` 的 `error`/`result` 与 `ResultPanel` 展示警告；下方示例引用未实现的 `useErrorHandler`，仅供对照。
+
 ### 错误类型分类

 | 错误类型        | 严重程度 | 触发场景                 | 提示方式      |
@@ -57,11 +57,7 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
      className={cn(className, copied && 'text-emerald-500')}
      {...props}
    >
-      {copied ? (
-        <Check className="h-[1.2em] w-[1.2em]" />
-      ) : (
-        <Copy className="h-[1.2em] w-[1.2em]" />
-      )}
+      {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
    </Button>
  );
 };
@@ -30,9 +30,7 @@ export function ErrorFallback({
    <div
      className={cn(
        'flex flex-col items-center justify-center',
-        isApp
-          ? 'mt-16 mx-auto max-w-md'
-          : 'flex-1 p-6 min-h-[300px] animate-in fade-in zoom-in-95 duration-200',
+        isApp ? 'mt-16 mx-auto max-w-md' : 'flex-1 p-6 min-h-[300px] fade-in-zoom-95',
        className,
      )}
    >
@@ -57,7 +55,11 @@ export function ErrorFallback({
          <h3 className="text-base font-semibold text-foreground mb-1.5">{title}</h3>
        )}

-        <p className={cn('text-muted-foreground', isApp ? 'text-sm mb-6' : 'text-xs mb-5')}>
+        <p
+          className={
+            isApp ? 'text-sm text-muted-foreground mb-6' : 'text-xs text-muted-foreground mb-5'
+          }
+        >
          {description}
        </p>

@@ -83,7 +85,7 @@ export function ErrorFallback({
          variant="destructive"
          size={isApp ? 'default' : 'sm'}
          onClick={onAction}
-          className={cn(isApp ? 'rounded-lg font-bold shadow-sm' : 'font-medium shadow-sm')}
+          className={isApp ? 'rounded-lg font-bold shadow-sm' : 'font-medium shadow-sm'}
        >
          <RefreshCw className={isApp ? 'mr-2 h-4 w-4' : 'mr-1.5 h-3.5 w-3.5'} />
          {actionLabel}
@@ -4,30 +4,6 @@
 * 用于 Suspense fallback 和初始加载状态，提供平滑的视觉过渡
 * 避免白屏闪烁，减少布局偏移
 */
-interface PageSkeletonProps {
-  /** 骨架屏类型 */
-  variant?: 'dashboard' | 'tool';
-}
-
-/**
- * 仪表盘卡片骨架屏
- */
-function DashboardCardSkeleton() {
-  return (
-    <div className="rounded-xl border border-border p-5 h-[100px]">
-      <div className="flex justify-between items-start">
-        <div className="flex gap-3 items-center">
-          <div className="w-10 h-10 rounded-lg bg-muted animate-pulse" />
-          <div>
-            <div className="w-24 h-5 bg-muted rounded animate-pulse" />
-            <div className="w-32 h-3.5 bg-muted rounded animate-pulse mt-1.5" />
-          </div>
-        </div>
-        <div className="w-3 h-3 rounded-full bg-muted animate-pulse" />
-      </div>
-    </div>
-  );
-}

 /**
 * 工具页面骨架屏
@@ -46,7 +22,7 @@ function ToolPageSkeleton() {
        <div className="w-24 h-9 bg-muted rounded-lg animate-pulse" />
        <div className="w-20 h-9 bg-muted rounded-lg animate-pulse" />
        <div className="flex-1" />
-        <div className="w-22 h-9 bg-muted rounded-lg animate-pulse" />
+        <div className="w-24 h-9 bg-muted rounded-lg animate-pulse" />
      </div>

      {/* 结果区域 */}
@@ -57,22 +33,9 @@ function ToolPageSkeleton() {

 /**
 * 页面加载骨架屏
- *
- * @param props - PageSkeletonProps
- * @returns 骨架屏 JSX 元素
 */
-export default function PageSkeleton({ variant = 'dashboard' }: PageSkeletonProps) {
-  if (variant === 'tool') {
+export default function PageSkeleton() {
  return <ToolPageSkeleton />;
-  }
-
-  return (
-    <div className="grid grid-cols-1 sm:grid-cols-[repeat(auto-fill,minmax(300px,1fr))] auto-rows-fr gap-4 p-4">
-      {Array.from({ length: 6 }).map((_, index) => (
-        <DashboardCardSkeleton key={index} />
-      ))}
-    </div>
-  );
 }

 PageSkeleton.displayName = 'PageSkeleton';
@@ -10,7 +10,7 @@
 | `SwitchButtonGroup.tsx` | 通用切换按钮组，支持 `small/medium/large` 三种尺寸，用于页面子模式切换         |
 | `EmptyPlaceholder.tsx`  | 虚线边框空状态占位，统一工具页「暂无结果」提示样式                             |
 | `TextInputArea.tsx`     | 增强文本输入区域，支持校验规则、工具栏操作、字符计数、清空                     |
-| `CopyButton.tsx`        | 一键复制按钮，支持复制成功状态动画，封装 `copyTextToClipboard` 和 `toast` 反馈 |
+| `CopyButton.tsx`        | 一键复制按钮：复制成功后 1.5s 内切换为 Check 图标并应用 `text-emerald-500`；空内容/失败时 `toast` 提示 |
 | `ImageUploader.tsx`     | 图片上传组件，支持拖拽上传、文件选择和预览                                     |
 | `QrCodePreview.tsx`     | 二维码预览组件，展示生成的二维码图片，提供复制和下载操作                       |
 | `DecodeResultPaper.tsx` | Base64 解码结果展示面板，显示 MIME 类型、文件大小、文件名输入和下载按钮        |
@@ -1,54 +1,69 @@
-import { FEATURES, getEntryPointType } from '@/config/features';
+import { getFeatureByKey } from '@/config/features';
+import { loadPage } from '@/config/pageLoaders/index';
 import { useRouter } from '@/providers/RouterProvider';
-import { Suspense } from 'react';
+import type { PageType } from '@/types/storage';
+import { type ComponentType, useEffect, useState } from 'react';
 import PageErrorBoundary from '@/components/PageErrorBoundary';
 import PageSkeleton from '@/components/PageSkeleton';
 import { cn } from '@/lib/utils';
 import { AlertTriangle } from 'lucide-react';

-const entryPointType = getEntryPointType();
+function LoadedPage({ pageKey }: { pageKey: PageType }) {
+  const [Page, setPage] = useState<ComponentType | null>(null);

-export default function RouterContainer() {
-  const { currentPage, isLoaded } = useRouter();
+  useEffect(() => {
+    let cancelled = false;

-  const animationClass =
-    currentPage === 'dashboard' ? 'page-transition-dashboard' : 'page-transition-enter';
+    loadPage(pageKey)
+      .then((mod) => {
+        if (!cancelled) {
+          setPage(() => mod.default);
+        }
+      })
+      .catch((err) => {
+        console.error('[Router Page Load Error]', err);
+      });

-  if (!isLoaded) {
-    return <PageSkeleton variant={currentPage === 'dashboard' ? 'dashboard' : 'tool'} />;
+    return () => {
+      cancelled = true;
+    };
+  }, [pageKey]);
+
+  if (!Page) {
+    return <PageSkeleton />;
  }

-  const currentFeature = FEATURES.find((f) => f.key === currentPage);
-  const MatchedComponent = currentFeature?.components?.[entryPointType];
+  return <Page />;
+}
+
+export default function RouterContainer() {
+  const { currentPage } = useRouter();
+
+  const currentFeature = getFeatureByKey(currentPage);

  return (
    <div
      key={currentPage}
      className={cn(
        'flex-1 flex flex-col overflow-x-hidden overflow-y-auto',
-        'scrollbar-gutter-stable motion-reduce:transition-none',
-        animationClass,
+        'motion-reduce:transition-none page-transition-enter',
      )}
-    >
-      <Suspense
-        fallback={<PageSkeleton variant={currentPage === 'dashboard' ? 'dashboard' : 'tool'} />}
    >
      <PageErrorBoundary resetKey={currentPage}>
-          {MatchedComponent ? (
-            <MatchedComponent />
+        {currentFeature ? (
+          <LoadedPage key={currentPage} pageKey={currentPage} />
        ) : (
-            <div className="flex-1 flex flex-col items-center justify-center p-8 text-center animate-in fade-in duration-300">
+          <div className="flex-1 flex flex-col items-center justify-center p-8 text-center fade-in-300">
            <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-destructive/10 text-destructive mb-4">
              <AlertTriangle className="h-6 w-6" />
            </div>
            <h3 className="text-sm font-semibold text-foreground">页面未找到</h3>
            <p className="text-xs text-muted-foreground mt-1 max-w-[240px]">
-                {`该功能在当前运行环境（${entryPointType}）下不可用或已被移除。`}
+              该功能不存在或已被移除。
            </p>
          </div>
        )}
      </PageErrorBoundary>
-      </Suspense>
    </div>
  );
 }
@@ -24,8 +24,7 @@ const SIZE_CLASSES = {
  large: 'text-base h-11 px-4 py-2 rounded-lg',
 } as const;

-const SELECTED_CLASSES =
-  'bg-background text-foreground shadow-sm font-semibold animate-in fade-in-50 zoom-in-95 duration-150';
+const SELECTED_CLASSES = 'bg-background text-foreground shadow-sm font-semibold fade-in-zoom-95';
 const UNSELECTED_CLASSES = 'hover:bg-background/50 hover:text-foreground/80';

 export default function SwitchButtonGroup<T extends string | number = string>({
@@ -267,7 +267,13 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props

            <div className="flex items-center gap-1.5 ml-auto shrink-0">
              {allowCopy && value && (
-                <CopyButton text={value} tooltip="复制内容" size="sm" className="h-7 w-7 p-1" />
+                <CopyButton
+                  text={value}
+                  tooltip="复制内容"
+                  variant="ghost"
+                  size="iconSm"
+                  className="text-muted-foreground hover:text-foreground"
+                />
              )}
              {showClear && value && !disabled && !readOnly && (
                <Button
@@ -275,8 +281,8 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
                  onClick={handleClear}
                  aria-label="清空"
                  variant="ghost"
-                  size="icon"
-                  className="h-7 w-7 text-muted-foreground hover:text-destructive hover:bg-destructive/10"
+                  size="iconSm"
+                  className="text-muted-foreground hover:text-destructive hover:bg-destructive/10"
                >
                  <X className="h-4 w-4" />
                </Button>
@@ -287,7 +293,7 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
      </div>

      {displayError && (
-        <p className="text-xs font-medium text-destructive px-0.5 animate-in fade-in slide-in-from-top-1 duration-150">
+        <p className="text-xs font-medium text-destructive px-0.5 fade-in-slide-top-1">
          {displayError}
        </p>
      )}
@@ -4,41 +4,17 @@ import PageSkeleton from '@/components/PageSkeleton';

 describe('PageSkeleton 组件', () => {
  describe('渲染测试', () => {
-    it('默认应渲染 dashboard 骨架屏', () => {
+    it('应渲染工具页面骨架', () => {
      const { container } = render(<PageSkeleton />);

-      // dashboard 骨架屏包含 6 个卡片
-      const cards = container.querySelectorAll('.rounded-xl');
-      expect(cards.length).toBe(6);
-    });
-
-    it('variant 为 dashboard 时应渲染仪表盘卡片骨架', () => {
-      const { container } = render(<PageSkeleton variant="dashboard" />);
-
-      // 每个卡片有 2 个骨架元素（图标、文本），6 个卡片共 12 个
-      const cards = container.querySelectorAll('.rounded-xl');
-      expect(cards.length).toBe(6);
-    });
-
-    it('variant 为 tool 时应渲染工具页面骨架', () => {
-      const { container } = render(<PageSkeleton variant="tool" />);
-
-      // tool 骨架屏包含标题、输入区、控制栏 3 个按钮、结果区
      const skeletons = container.querySelectorAll('.animate-pulse');
      expect(skeletons.length).toBeGreaterThan(0);
    });
  });

  describe('布局结构测试', () => {
-    it('dashboard 骨架屏应使用 grid 布局', () => {
-      const { container } = render(<PageSkeleton variant="dashboard" />);
-      const gridContainer = container.firstChild as HTMLElement;
-
-      expect(gridContainer).toHaveClass('grid');
-    });
-
-    it('tool 骨架屏应有内边距', () => {
-      const { container } = render(<PageSkeleton variant="tool" />);
+    it('工具骨架屏应有内边距', () => {
+      const { container } = render(<PageSkeleton />);
      const toolContainer = container.firstChild as HTMLElement;

      expect(toolContainer).toHaveClass('p-5');
@@ -46,16 +22,8 @@ describe('PageSkeleton 组件', () => {
  });

  describe('骨架屏元素测试', () => {
-    it('dashboard 骨架屏应包含圆角和边框样式', () => {
-      const { container } = render(<PageSkeleton variant="dashboard" />);
-
-      // 获取第一个卡片容器
-      const card = container.querySelector('.rounded-xl.border');
-      expect(card).toBeInTheDocument();
-    });
-
-    it('tool 骨架屏应包含动画脉冲效果', () => {
-      const { container } = render(<PageSkeleton variant="tool" />);
+    it('工具骨架屏应包含动画脉冲效果', () => {
+      const { container } = render(<PageSkeleton />);

      const skeletons = container.querySelectorAll('.animate-pulse');
      expect(skeletons.length).toBeGreaterThan(0);
@@ -6,15 +6,14 @@ import type { PageType } from '@/types/storage';
 import React from 'react';

 const mockRouterValue = {
-  currentPage: 'dashboard' as PageType,
-  visiblePages: ['dashboard', 'timestamp'] as PageType[],
+  currentPage: 'timestamp' as PageType,
+  visiblePages: ['timestamp', 'jwt'] as PageType[],
  pageOrder: ['timestamp'] as PageType[],
-  isLoaded: true,
  navigateTo: vi.fn(),
-  syncNavigation: vi.fn(),
-  goHome: vi.fn(),
  setVisiblePages: vi.fn(),
  setPageOrder: vi.fn(),
+  recentlyUsedTools: [] as PageType[],
+  isLoaded: true,
 };

 vi.mock('@/providers/RouterProvider', () => ({
@@ -32,31 +31,15 @@ describe('RouterContainer 组件', () => {
  };

  describe('渲染测试', () => {
-    it('isLoaded 为 false 时应渲染骨架屏', () => {
-      mockRouterValue.isLoaded = false;
+    it('mount 后应直接渲染页面结构（不等待 storage 加载）', () => {
+      mockRouterValue.currentPage = 'timestamp';
      const { container } = renderWithProvider(<RouterContainer />);
-      // 骨架屏使用 animate-pulse 类
-      const skeletons = container.querySelectorAll('.animate-pulse');
-      expect(skeletons.length).toBeGreaterThan(0);
-    });
-
-    it('isLoaded 为 true 时应渲染页面内容', () => {
-      mockRouterValue.isLoaded = true;
-      mockRouterValue.currentPage = 'dashboard';
-      const { container } = renderWithProvider(<RouterContainer />);
-      expect(container.querySelector('.page-transition-dashboard')).toBeInTheDocument();
+      expect(container.querySelector('.page-transition-enter')).toBeInTheDocument();
    });
  });

  describe('动画类测试', () => {
-    it('在 dashboard 页面应应用 dashboard 动画类', () => {
-      mockRouterValue.currentPage = 'dashboard';
-      renderWithProvider(<RouterContainer />);
-      const box = document.querySelector('.page-transition-dashboard');
-      expect(box).toBeInTheDocument();
-    });
-
-    it('在非 dashboard 页面应应用 enter 动画类', () => {
+    it('应应用 enter 动画类', () => {
      mockRouterValue.currentPage = 'timestamp';
      renderWithProvider(<RouterContainer />);
      const box = document.querySelector('.page-transition-enter');
@@ -68,7 +51,7 @@ describe('RouterContainer 组件', () => {
    it('currentPage 变化时应更新', () => {
      const { rerender } = renderWithProvider(<RouterContainer />);

-      mockRouterValue.currentPage = 'timestamp';
+      mockRouterValue.currentPage = 'jwt';
      rerender(<RouterProvider>{<RouterContainer />}</RouterProvider>);

      const box = document.querySelector('.page-transition-enter');
@@ -77,13 +60,11 @@ describe('RouterContainer 组件', () => {
  });

  describe('页面级错误隔离', () => {
-    it('PageErrorBoundary 应包裹在 Suspense 内层', () => {
-      mockRouterValue.isLoaded = true;
-      mockRouterValue.currentPage = 'dashboard';
+    it('PageErrorBoundary 应包裹页面内容', () => {
+      mockRouterValue.currentPage = 'timestamp';
      const { container } = renderWithProvider(<RouterContainer />);

-      // 验证 RouterContainer 的 Box 结构存在
-      const routerBox = container.querySelector('.page-transition-dashboard');
+      const routerBox = container.querySelector('.page-transition-enter');
      expect(routerBox).toBeInTheDocument();
    });
  });
@@ -21,6 +21,7 @@ const buttonVariants = cva(
        sm: 'h-9 rounded-md px-3',
        lg: 'h-11 rounded-md px-8',
        icon: 'h-10 w-10',
+        iconSm: 'h-7 w-7',
      },
    },
    defaultVariants: {
@@ -16,7 +16,7 @@ const Checkbox = React.forwardRef<
    )}
    {...props}
  >
-    <CheckboxPrimitive.Indicator className={cn('grid place-content-center text-current')}>
+    <CheckboxPrimitive.Indicator className="grid place-content-center text-current">
      <Check className="h-4 w-4" />
    </CheckboxPrimitive.Indicator>
  </CheckboxPrimitive.Root>
@@ -18,7 +18,7 @@ const DialogOverlay = React.forwardRef<
  <DialogPrimitive.Overlay
    ref={ref}
    className={cn(
-      'fixed inset-0 z-50 bg-black/80 dark:bg-black/60 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      'fixed inset-0 z-50 bg-black/80 dark:bg-black/60 transition-opacity duration-200 data-[state=closed]:opacity-0 data-[state=open]:opacity-100',
      className,
    )}
    {...props}
@@ -41,7 +41,7 @@ const DialogContent = React.forwardRef<
    <DialogPrimitive.Content
      ref={ref}
      className={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-white dark:bg-gray-900 p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-white dark:bg-gray-900 p-6 shadow-lg transition-all duration-200 data-[state=closed]:scale-95 data-[state=open]:scale-100 data-[state=closed]:opacity-0 data-[state=open]:opacity-100 sm:rounded-lg',
        className,
      )}
      {...props}
@@ -65,7 +65,7 @@ const SelectContent = React.forwardRef<
    <SelectPrimitive.Content
      ref={ref}
      className={cn(
-        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md transition-all duration-200 data-[state=closed]:scale-95 data-[state=open]:scale-100 data-[state=closed]:opacity-0 data-[state=open]:opacity-100',
        position === 'popper' &&
          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
        className,
@@ -4,10 +4,6 @@ const pageLoadTracker = vi.hoisted(() => ({
  loaded: [] as string[],
 }));

-vi.mock('@/pages/Dashboard', () => {
-  pageLoadTracker.loaded.push('Dashboard');
-  return { default: () => null };
-});
 vi.mock('@/pages/Timestamp', () => {
  pageLoadTracker.loaded.push('Timestamp');
  return { default: () => null };
@@ -63,23 +59,25 @@ describe('features 懒加载', () => {
  it('访问 FEATURES 元数据时不应加载任何页面模块', async () => {
    const { FEATURES } = await import('@/config/features');

-    expect(FEATURES).toHaveLength(10);
+    expect(FEATURES).toHaveLength(9);
    expect(pageLoadTracker.loaded).toEqual([]);
  });

-  it('渲染 lazy 组件时才应加载对应页面模块', async () => {
-    const React = await import('react');
-    const { render, waitFor } = await import('@testing-library/react');
-    const { FEATURES } = await import('@/config/features');
+  it('loadPage 应仅加载对应页面模块', async () => {
+    const { loadPage } = await import('@/config/pageLoaders/index');

-    const DashboardPage = FEATURES.find((f) => f.key === 'dashboard')!.components.popup;
+    await loadPage('timestamp');

-    render(
-      React.createElement(React.Suspense, { fallback: null }, React.createElement(DashboardPage)),
-    );
-
-    await waitFor(() => {
-      expect(pageLoadTracker.loaded).toEqual(['Dashboard']);
+    expect(pageLoadTracker.loaded).toEqual(['Timestamp']);
  });
+
+  it('loadPage 切换页面时不应加载无关页面模块', async () => {
+    const { loadPage } = await import('@/config/pageLoaders/index');
+
+    await loadPage('jwt');
+
+    expect(pageLoadTracker.loaded).toEqual(['Jwt']);
+    expect(pageLoadTracker.loaded).not.toContain('QrCode');
+    expect(pageLoadTracker.loaded).not.toContain('TestDataGenerator');
  });
 });
@@ -9,8 +9,8 @@ import {

 describe('features', () => {
  describe('FEATURES', () => {
-    it('应该有10个功能定义', () => {
-      expect(FEATURES).toHaveLength(10);
+    it('应该有9个功能定义', () => {
+      expect(FEATURES).toHaveLength(9);
    });

    it('应该有每个功能的所有必需属性', () => {
@@ -19,21 +19,14 @@ describe('features', () => {
        expect(feature).toHaveProperty('label');
        expect(feature).toHaveProperty('description');
        expect(feature).toHaveProperty('defaultVisible');
-        expect(feature).toHaveProperty('components');
+        expect(feature).not.toHaveProperty('component');
        expect(typeof feature.key).toBe('string');
        expect(typeof feature.label).toBe('string');
        expect(typeof feature.description).toBe('string');
        expect(typeof feature.defaultVisible).toBe('boolean');
-        expect(typeof feature.components).toBe('object');
-        expect(feature.components).toHaveProperty('popup');
-        expect(feature.components).toHaveProperty('sidepanel');
-        expect(feature.components).toHaveProperty('tab');
-
-        if (feature.key !== 'dashboard') {
        expect(feature).toHaveProperty('icon');
        expect(feature).toHaveProperty('themeColorKey');
        expect(typeof feature.themeColorKey).toBe('string');
-        }
      });
    });

@@ -45,13 +38,6 @@ describe('features', () => {
  });

  describe('getFeatureByKey', () => {
-    it('应该返回dashboard功能', () => {
-      const feature = getFeatureByKey('dashboard');
-      expect(feature).toBeDefined();
-      expect(feature?.key).toBe('dashboard');
-      expect(feature?.label).toBe('仪表盘');
-    });
-
    it('应该返回时间戳功能', () => {
      const feature = getFeatureByKey('timestamp');
      expect(feature).toBeDefined();
@@ -82,9 +68,8 @@ describe('features', () => {
      });
    });

-    it('应该包含仪表盘、时间戳、存储清理、二维码', () => {
+    it('应该包含时间戳、存储清理、二维码', () => {
      const visibleKeys = getDefaultVisibleFeatureKeys();
-      expect(visibleKeys).toContain('dashboard');
      expect(visibleKeys).toContain('timestamp');
      expect(visibleKeys).toContain('storageCleaner');
      expect(visibleKeys).toContain('qrCode');
@@ -94,8 +79,7 @@ describe('features', () => {
  describe('getAllFeatureKeys', () => {
    it('应该返回所有功能key', () => {
      const allKeys = getAllFeatureKeys();
-      expect(allKeys).toHaveLength(10);
-      expect(allKeys).toContain('dashboard');
+      expect(allKeys).toHaveLength(9);
      expect(allKeys).toContain('timestamp');
      expect(allKeys).toContain('storageCleaner');
      expect(allKeys).toContain('qrCode');
@@ -109,9 +93,9 @@ describe('features', () => {
  });

  describe('getDefaultPageOrder', () => {
-    it('应该排除仪表盘从页面顺序', () => {
+    it('应该包含所有工具页面', () => {
      const pageOrder = getDefaultPageOrder();
-      expect(pageOrder).not.toContain('dashboard');
+      expect(pageOrder).toHaveLength(9);
    });

    it('应该包含时间戳、存储清理、二维码在页面顺序', () => {
@@ -120,10 +104,5 @@ describe('features', () => {
      expect(pageOrder).toContain('storageCleaner');
      expect(pageOrder).toContain('qrCode');
    });
-
-    it('应该有9个项目在页面顺序', () => {
-      const pageOrder = getDefaultPageOrder();
-      expect(pageOrder).toHaveLength(9);
-    });
  });
 });
@@ -1,4 +1,4 @@
-import { type ComponentType, lazy } from 'react';
+import type { ComponentType } from 'react';
 import type { LucideProps } from 'lucide-react';
 import type { PageType } from '@/types/storage';
 import {
@@ -15,18 +15,6 @@ import {

 export type PaletteColorKey = 'primary' | 'success' | 'warning' | 'error' | 'secondary' | 'info';

-// 懒加载页面组件
-const DashboardPage = lazy(() => import('@/pages/Dashboard'));
-const TimestampPage = lazy(() => import('@/pages/Timestamp'));
-const StorageCleanerPage = lazy(() => import('@/pages/StorageCleaner'));
-const QrCodePage = lazy(() => import('@/pages/QrCode'));
-const TextStatisticsPage = lazy(() => import('@/pages/TextStatistics'));
-const JwtPage = lazy(() => import('@/pages/Jwt'));
-const JsonToolsPage = lazy(() => import('@/pages/JsonTools'));
-const Base64ConverterPage = lazy(() => import('@/pages/Base64Converter'));
-const RightClickRestorerPage = lazy(() => import('@/pages/RightClickRestorer'));
-const TestDataGeneratorPage = lazy(() => import('@/pages/TestDataGenerator'));
-
 export interface FeatureConfig {
  key: PageType;
  label: string;
@@ -34,25 +22,9 @@ export interface FeatureConfig {
  themeColorKey?: PaletteColorKey;
  icon?: ComponentType<LucideProps>;
  defaultVisible: boolean;
-  components: {
-    popup: ComponentType;
-    sidepanel: ComponentType;
-    tab: ComponentType;
-  };
 }

 export const FEATURES: FeatureConfig[] = [
-  {
-    key: 'dashboard',
-    label: '仪表盘',
-    description: '',
-    defaultVisible: true,
-    components: {
-      popup: DashboardPage,
-      sidepanel: DashboardPage,
-      tab: DashboardPage,
-    },
-  },
  {
    key: 'timestamp',
    label: '时间戳',
@@ -60,11 +32,6 @@ export const FEATURES: FeatureConfig[] = [
    themeColorKey: 'primary',
    icon: Clock,
    defaultVisible: true,
-    components: {
-      popup: TimestampPage,
-      sidepanel: TimestampPage,
-      tab: TimestampPage,
-    },
  },
  {
    key: 'storageCleaner',
@@ -73,11 +40,6 @@ export const FEATURES: FeatureConfig[] = [
    themeColorKey: 'warning',
    icon: Database,
    defaultVisible: true,
-    components: {
-      popup: StorageCleanerPage,
-      sidepanel: StorageCleanerPage,
-      tab: StorageCleanerPage,
-    },
  },
  {
    key: 'qrCode',
@@ -86,11 +48,6 @@ export const FEATURES: FeatureConfig[] = [
    themeColorKey: 'success',
    icon: QrCode,
    defaultVisible: true,
-    components: {
-      popup: QrCodePage,
-      sidepanel: QrCodePage,
-      tab: QrCodePage,
-    },
  },
  {
    key: 'textStatistics',
@@ -99,11 +56,6 @@ export const FEATURES: FeatureConfig[] = [
    themeColorKey: 'secondary',
    icon: FileText,
    defaultVisible: true,
-    components: {
-      popup: TextStatisticsPage,
-      sidepanel: TextStatisticsPage,
-      tab: TextStatisticsPage,
-    },
  },
  {
    key: 'jwt',
@@ -112,11 +64,6 @@ export const FEATURES: FeatureConfig[] = [
    themeColorKey: 'info',
    icon: Key,
    defaultVisible: true,
-    components: {
-      popup: JwtPage,
-      sidepanel: JwtPage,
-      tab: JwtPage,
-    },
  },
  {
    key: 'jsonTools',
@@ -125,11 +72,6 @@ export const FEATURES: FeatureConfig[] = [
    themeColorKey: 'primary',
    icon: GitCompareArrows,
    defaultVisible: true,
-    components: {
-      popup: JsonToolsPage,
-      sidepanel: JsonToolsPage,
-      tab: JsonToolsPage,
-    },
  },
  {
    key: 'base64Converter',
@@ -138,11 +80,6 @@ export const FEATURES: FeatureConfig[] = [
    themeColorKey: 'info',
    icon: ArrowLeftRight,
    defaultVisible: true,
-    components: {
-      popup: Base64ConverterPage,
-      sidepanel: Base64ConverterPage,
-      tab: Base64ConverterPage,
-    },
  },
  {
    key: 'rightClickRestorer',
@@ -151,11 +88,6 @@ export const FEATURES: FeatureConfig[] = [
    themeColorKey: 'success',
    icon: MousePointerClick,
    defaultVisible: true,
-    components: {
-      popup: RightClickRestorerPage,
-      sidepanel: RightClickRestorerPage,
-      tab: RightClickRestorerPage,
-    },
  },
  {
    key: 'testDataGenerator',
@@ -164,11 +96,6 @@ export const FEATURES: FeatureConfig[] = [
    themeColorKey: 'warning',
    icon: FileSpreadsheet,
    defaultVisible: true,
-    components: {
-      popup: TestDataGeneratorPage,
-      sidepanel: TestDataGeneratorPage,
-      tab: TestDataGeneratorPage,
-    },
  },
 ];

@@ -185,16 +112,5 @@ export function getAllFeatureKeys(): PageType[] {
 }

 export function getDefaultPageOrder(): PageType[] {
-  return FEATURES.filter((f) => f.key !== 'dashboard').map((f) => f.key);
-}
-
-export function getEntryPointType(): 'popup' | 'sidepanel' | 'tab' {
-  const pathname = window.location.pathname;
-  if (pathname.includes('sidepanel')) {
-    return 'sidepanel';
-  }
-  if (new URLSearchParams(window.location.search).get('mode') === 'tab') {
-    return 'tab';
-  }
-  return 'popup';
+  return FEATURES.map((f) => f.key);
 }
@@ -0,0 +1,8 @@
+export type { FeatureConfig, PaletteColorKey } from '@/config/featureMeta';
+export {
+  FEATURES,
+  getAllFeatureKeys,
+  getDefaultPageOrder,
+  getDefaultVisibleFeatureKeys,
+  getFeatureByKey,
+} from '@/config/featureMeta';
@@ -0,0 +1,5 @@
+import type { ComponentType } from 'react';
+
+export default function loadBase64Converter(): Promise<{ default: ComponentType }> {
+  return import('@/pages/Base64Converter');
+}
@@ -0,0 +1,43 @@
+import type { ComponentType } from 'react';
+import type { PageType } from '@/types/storage';
+
+type PageModule = { default: ComponentType };
+
+let pagesStylesLoaded = false;
+
+function ensurePagesStyles(): Promise<unknown> {
+  if (pagesStylesLoaded) {
+    return Promise.resolve();
+  }
+  pagesStylesLoaded = true;
+  return import('@/styles/pages.css');
+}
+
+export function loadPage(key: PageType): Promise<PageModule> {
+  return ensurePagesStyles().then(() => {
+    switch (key) {
+      case 'timestamp':
+        return import('@/config/pageLoaders/timestamp').then((m) => m.default());
+      case 'storageCleaner':
+        return import('@/config/pageLoaders/storageCleaner').then((m) => m.default());
+      case 'qrCode':
+        return import('@/config/pageLoaders/qrCode').then((m) => m.default());
+      case 'textStatistics':
+        return import('@/config/pageLoaders/textStatistics').then((m) => m.default());
+      case 'jwt':
+        return import('@/config/pageLoaders/jwt').then((m) => m.default());
+      case 'jsonTools':
+        return import('@/config/pageLoaders/jsonTools').then((m) => m.default());
+      case 'base64Converter':
+        return import('@/config/pageLoaders/base64Converter').then((m) => m.default());
+      case 'rightClickRestorer':
+        return import('@/config/pageLoaders/rightClickRestorer').then((m) => m.default());
+      case 'testDataGenerator':
+        return import('@/config/pageLoaders/testDataGenerator').then((m) => m.default());
+      default: {
+        const _exhaustive: never = key;
+        return Promise.reject(new Error(`Unknown page: ${String(_exhaustive)}`));
+      }
+    }
+  });
+}
@@ -0,0 +1,5 @@
+import type { ComponentType } from 'react';
+
+export default function loadJsonTools(): Promise<{ default: ComponentType }> {
+  return import('@/pages/JsonTools');
+}
@@ -0,0 +1,5 @@
+import type { ComponentType } from 'react';
+
+export default function loadJwt(): Promise<{ default: ComponentType }> {
+  return import('@/pages/Jwt');
+}
@@ -0,0 +1,5 @@
+import type { ComponentType } from 'react';
+
+export default function loadQrCode(): Promise<{ default: ComponentType }> {
+  return import('@/pages/QrCode');
+}
@@ -0,0 +1,5 @@
+import type { ComponentType } from 'react';
+
+export default function loadRightClickRestorer(): Promise<{ default: ComponentType }> {
+  return import('@/pages/RightClickRestorer');
+}
@@ -0,0 +1,5 @@
+import type { ComponentType } from 'react';
+
+export default function loadStorageCleaner(): Promise<{ default: ComponentType }> {
+  return import('@/pages/StorageCleaner');
+}
@@ -0,0 +1,5 @@
+import type { ComponentType } from 'react';
+
+export default function loadTestDataGenerator(): Promise<{ default: ComponentType }> {
+  return import('@/pages/TestDataGenerator');
+}
@@ -0,0 +1,5 @@
+import type { ComponentType } from 'react';
+
+export default function loadTextStatistics(): Promise<{ default: ComponentType }> {
+  return import('@/pages/TextStatistics');
+}
@@ -0,0 +1,5 @@
+import type { ComponentType } from 'react';
+
+export default function loadTimestamp(): Promise<{ default: ComponentType }> {
+  return import('@/pages/Timestamp');
+}
@@ -1,6 +1,6 @@
 import '../../.wxt/types/imports.d.ts';
 import { browser } from 'wxt/browser';
-import { MessageAction, onMessage, sendMessage } from '@/utils/messages';
+import { MessageAction, onMessage } from '@/utils/messages';
 import { createAllContextMenus, parseContextMenuClick } from '@/utils/contextMenu';
 import { saveContextMenuData } from '@/utils/useContextMenuData';
 import { mainWorldInjectionScript } from '@/utils/rightClickInjection';
@@ -24,18 +24,6 @@ export default defineBackground(() => {

    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 {
@@ -45,17 +33,6 @@ export default defineBackground(() => {
    }
  });

-  // 扩展图标点击时打开侧边栏
-  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;
@@ -1,36 +1,26 @@
 import RouterProvider from '@/providers/RouterProvider';
 import TopBar from '@/layout/TopBar';
+import FeatureNav from '@/layout/FeatureNav';
 import RouterContainer from '@/components/RouterContainer';
 import ErrorBoundary from '@/components/ErrorBoundary';
-import { getEntryPointType } from '@/config/features';
+
 export default function App() {
-  const entryType = getEntryPointType();
-
-  const routerConfig =
-    entryType === 'tab'
-      ? {
-          syncKey: 'app/tabRoute' as const,
-          visiblePagesKey: 'app/tabVisiblePages' as const,
-          pageOrderKey: 'app/tabPageOrder' as const,
-        }
-      : {
-          syncKey: 'app/popupRoute' as const,
-          visiblePagesKey: 'app/popupVisiblePages' as const,
-          pageOrderKey: 'app/popupPageOrder' as const,
-        };
-
  return (
    <RouterProvider
-      syncKey={routerConfig.syncKey}
-      visiblePagesKey={routerConfig.visiblePagesKey}
-      pageOrderKey={routerConfig.pageOrderKey}
+      defaultRoute="timestamp"
+      syncKey="app/popupRoute"
+      visiblePagesKey="app/popupVisiblePages"
+      pageOrderKey="app/popupPageOrder"
    >
-      <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">
+      <div className="flex w-[450px] max-w-[450px] min-w-[450px] h-[600px] min-h-[600px] overflow-hidden bg-background">
+        <div className="flex flex-col flex-1 min-w-0">
          <TopBar />
          <ErrorBoundary>
            <RouterContainer />
          </ErrorBoundary>
        </div>
+        <FeatureNav />
+      </div>
    </RouterProvider>
  );
 }
@@ -3,7 +3,7 @@
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Testing Tools - 标签页</title>
+    <title>Testing Tools</title>
    <meta name="manifest.type" content="browser_action" />
    <script>
      (function () {
@@ -21,7 +21,7 @@
    <style>
      /* Force initial popup size before React hydration */
      html, body {
-        width: 400px;
+        width: 450px;
        height: 600px;
        margin: 0;
        padding: 0;
@@ -33,13 +33,6 @@
        width: 100%;
        height: 100%;
      }
-      /* If opened in a tab (mode=tab), reset the fixed size */
-      @media screen and (min-width: 600px) {
-        html, body {
-          width: 100%;
-          height: 100%;
-        }
-      }
    </style>
  </head>
  <body>
@@ -1,6 +1,6 @@
 import ReactDOM from 'react-dom/client';
 import AppRoot from '@/providers/AppRoot';
-import '@/index.css';
+import '@/styles/shell.css';
 import App from './App.tsx';

 ReactDOM.createRoot(document.getElementById('root')!).render(
@@ -1,26 +0,0 @@
-import { useEffect } from 'react';
-import RouterProvider from '@/providers/RouterProvider';
-import TopBar from '@/layout/TopBar';
-import RouterContainer from '@/components/RouterContainer';
-import ErrorBoundary from '@/components/ErrorBoundary';
-import { MessageAction, sendMessage } from '@/utils/messages';
-
-export default function App() {
-  useEffect(() => {
-    sendMessage(MessageAction.SIDE_PANEL_STATE_CHANGED, { isOpen: true });
-    return () => {
-      sendMessage(MessageAction.SIDE_PANEL_STATE_CHANGED, { isOpen: false });
-    };
-  }, []);
-
-  return (
-    <RouterProvider defaultRoute="dashboard" syncKey="app/sidepanelRoute">
-      <div className="app flex flex-col h-screen w-full overflow-hidden">
-        <TopBar />
-        <ErrorBoundary>
-          <RouterContainer />
-        </ErrorBoundary>
-      </div>
-    </RouterProvider>
-  );
-}
@@ -1,25 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Testing Tools - Side Panel</title>
-    <script>
-      (function () {
-        try {
-          var raw = localStorage.getItem('snapshot/app/themeMode');
-          var mode = raw ? JSON.parse(raw) : 'system';
-          if (mode !== 'light' && mode !== 'dark' && mode !== 'system') mode = 'system';
-          var isDark =
-            mode === 'dark' ||
-            (mode === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
-          if (isDark) document.documentElement.classList.add('dark');
-        } catch (_error) {}
-      })();
-    </script>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="./main.tsx"></script>
-  </body>
-</html>
@@ -1,10 +0,0 @@
-import ReactDOM from 'react-dom/client';
-import AppRoot from '@/providers/AppRoot';
-import '@/index.css';
-import App from './App.tsx';
-
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <AppRoot>
-    <App />
-  </AppRoot>,
-);
@@ -0,0 +1,54 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+import type { PageType } from '@/types/storage';
+import FeatureNav from '@/layout/FeatureNav';
+
+const mockNavigateTo = vi.fn();
+
+const mockRouterValue = {
+  currentPage: 'timestamp' as PageType,
+  visiblePages: ['timestamp', 'jwt', 'storageCleaner'] as PageType[],
+  pageOrder: ['jwt', 'timestamp', 'storageCleaner'] as PageType[],
+  recentlyUsedTools: [] as PageType[],
+  isLoaded: true,
+  navigateTo: mockNavigateTo,
+  setVisiblePages: vi.fn(),
+  setPageOrder: vi.fn(),
+};
+
+vi.mock('@/providers/RouterProvider', () => ({
+  useRouter: () => mockRouterValue,
+}));
+
+describe('FeatureNav 组件', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockRouterValue.currentPage = 'timestamp';
+    mockRouterValue.pageOrder = ['jwt', 'timestamp', 'storageCleaner'];
+    mockRouterValue.visiblePages = ['timestamp', 'jwt', 'storageCleaner'];
+  });
+
+  it('应渲染全部可见工具图标', () => {
+    render(<FeatureNav />);
+
+    expect(screen.getByLabelText('JWT 解析')).toBeInTheDocument();
+    expect(screen.getByLabelText('时间戳')).toBeInTheDocument();
+    expect(screen.getByLabelText('存储清理')).toBeInTheDocument();
+  });
+
+  it('点击图标应调用 navigateTo', () => {
+    render(<FeatureNav />);
+
+    fireEvent.click(screen.getByLabelText('JWT 解析'));
+    expect(mockNavigateTo).toHaveBeenCalledWith('jwt');
+  });
+
+  it('当前页对应项应有 active 样式与 aria-current', () => {
+    render(<FeatureNav />);
+
+    const activeButton = screen.getByLabelText('时间戳');
+    expect(activeButton).toHaveAttribute('aria-current', 'page');
+    expect(activeButton).toHaveClass('bg-muted');
+    expect(activeButton).toHaveClass('border-primary');
+  });
+});
@@ -1,14 +1,14 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import * as featureConfig from '@/config/features';
-import { resolveDashboardFeatures } from '../dashboardFeatures';
+import { resolveNavFeatures } from '../resolveNavFeatures';

-describe('resolveDashboardFeatures', () => {
+describe('resolveNavFeatures', () => {
  beforeEach(() => {
    vi.restoreAllMocks();
  });

-  it('应按 keys 顺序返回可见工具，并排除 dashboard', () => {
-    const items = resolveDashboardFeatures(['jwt', 'timestamp'], ['dashboard', 'timestamp', 'jwt']);
+  it('应按 keys 顺序返回可见工具', () => {
+    const items = resolveNavFeatures(['jwt', 'timestamp'], ['timestamp', 'jwt']);

    expect(items.map((item) => item.key)).toEqual(['jwt', 'timestamp']);
    expect(items.map((item) => item.feature.label)).toEqual(['JWT 解析', '时间戳']);
@@ -24,25 +24,34 @@ describe('resolveDashboardFeatures', () => {
      return feature;
    });

-    const items = resolveDashboardFeatures(['timestamp'], ['dashboard', 'timestamp']);
+    const items = resolveNavFeatures(['timestamp'], ['timestamp']);

    expect(items.map((item) => item.key)).toEqual(['timestamp']);
  });

  it('应过滤不在 visiblePages 中的工具', () => {
-    const items = resolveDashboardFeatures(['jwt', 'timestamp'], ['dashboard', 'timestamp']);
+    const items = resolveNavFeatures(['jwt', 'timestamp'], ['timestamp']);

    expect(items.map((item) => item.key)).toEqual(['timestamp']);
  });

  it('visiblePages 无匹配工具时应返回空列表', () => {
-    const items = resolveDashboardFeatures(['jwt', 'timestamp'], ['dashboard']);
+    const items = resolveNavFeatures(['jwt', 'timestamp'], []);

    expect(items).toEqual([]);
  });

  it('应过滤缺少 icon 的工具', () => {
-    const items = resolveDashboardFeatures(['dashboard', 'timestamp'], ['dashboard', 'timestamp']);
+    const originalGetFeatureByKey = featureConfig.getFeatureByKey;
+    vi.spyOn(featureConfig, 'getFeatureByKey').mockImplementation((key) => {
+      const feature = originalGetFeatureByKey(key);
+      if (key === 'jwt' && feature) {
+        return { ...feature, icon: undefined };
+      }
+      return feature;
+    });
+
+    const items = resolveNavFeatures(['jwt', 'timestamp'], ['jwt', 'timestamp']);

    expect(items.map((item) => item.key)).toEqual(['timestamp']);
  });
@@ -0,0 +1,35 @@
+import { cn } from '@/lib/utils';
+import { useFeatureNav } from './useFeatureNav';
+
+export default function FeatureNav() {
+  const { navItems, currentPage, navigateTo } = useFeatureNav();
+
+  return (
+    <nav
+      aria-label="功能导航"
+      className="flex w-12 shrink-0 flex-col items-center gap-1 overflow-y-auto border-l border-border py-2"
+    >
+      {navItems.map(({ key, feature }) => {
+        const Icon = feature.icon;
+        const isActive = currentPage === key;
+
+        return (
+          <button
+            key={key}
+            type="button"
+            title={feature.label}
+            aria-label={feature.label}
+            aria-current={isActive ? 'page' : undefined}
+            onClick={() => navigateTo(key)}
+            className={cn(
+              'flex h-9 w-9 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground',
+              isActive && 'border-l-2 border-primary bg-muted text-foreground',
+            )}
+          >
+            <Icon className="h-4 w-4" aria-hidden="true" />
+          </button>
+        );
+      })}
+    </nav>
+  );
+}
@@ -0,0 +1,27 @@
+import { getFeatureByKey, type FeatureConfig } from '@/config/features';
+import type { PageType } from '@/types/storage';
+
+export interface NavFeatureItem {
+  key: PageType;
+  feature: FeatureConfig & { icon: NonNullable<FeatureConfig['icon']> };
+}
+
+function isNavFeature(feature: FeatureConfig): feature is NavFeatureItem['feature'] {
+  return feature.icon != null;
+}
+
+export function resolveNavFeatures(keys: PageType[], visiblePages: PageType[]): NavFeatureItem[] {
+  const visibleSet = new Set(visiblePages);
+  const items: NavFeatureItem[] = [];
+
+  for (const key of keys) {
+    if (!visibleSet.has(key)) continue;
+
+    const feature = getFeatureByKey(key);
+    if (!feature || !isNavFeature(feature)) continue;
+
+    items.push({ key, feature });
+  }
+
+  return items;
+}
@@ -0,0 +1,21 @@
+import { useMemo } from 'react';
+import { useRouter } from '@/providers/RouterProvider';
+import type { PageType } from '@/types/storage';
+import { resolveNavFeatures, type NavFeatureItem } from './resolveNavFeatures';
+
+export interface UseFeatureNavReturn {
+  navItems: NavFeatureItem[];
+  currentPage: PageType;
+  navigateTo: (page: PageType) => void;
+}
+
+export function useFeatureNav(): UseFeatureNavReturn {
+  const { currentPage, pageOrder, visiblePages, navigateTo } = useRouter();
+
+  const navItems = useMemo(
+    () => resolveNavFeatures(pageOrder, visiblePages),
+    [pageOrder, visiblePages],
+  );
+
+  return { navItems, currentPage, navigateTo };
+}
@@ -16,16 +16,16 @@ export default function SearchDropdown({
  selectedIndex,
  onSelect,
 }: SearchDropdownProps) {
-  const isSearching = searchQuery.trim().length > 0;
+  const isSearching = !!searchQuery.trim();
  const items = isSearching ? searchResults : recentFeatures;

  return (
-    <div className="absolute left-0 right-0 top-full z-50 mt-1.5 max-h-80 overflow-y-auto rounded-lg border border-border bg-popover text-popover-foreground shadow-lg animate-in fade-in slide-in-from-top-2 duration-150">
+    <div className="absolute left-0 right-0 top-full z-50 mt-1.5 max-h-80 overflow-y-auto rounded-lg border border-border bg-popover text-popover-foreground shadow-lg fade-in-slide-top-2">
      <ul role="listbox" className="p-1.5">
        {!isSearching && items.length > 0 && (
-          <div className="px-3 py-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60">
+          <li className="px-3 py-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60">
            最近搜索
-          </div>
+          </li>
        )}
        {isSearching && items.length === 0 ? (
          <li className="px-4 py-6 text-center text-sm text-muted-foreground">未找到相关工具</li>
@@ -1,4 +1,4 @@
-import { type RefObject } from 'react';
+import { type KeyboardEvent, type RefObject } from 'react';
 import { Search, X } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -9,7 +9,7 @@ interface SearchInputProps {
  searchQuery: string;
  onSearchQueryChange: (value: string) => void;
  onFocus: () => void;
-  onKeyDown: (e: React.KeyboardEvent) => void;
+  onKeyDown: (e: KeyboardEvent) => void;
  onClear: () => void;
 }

@@ -26,7 +26,6 @@ export default function SearchInput({
      <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground/60 transition-colors group-focus-within:text-muted-foreground" />
      <Input
        ref={inputRef}
-        type="text"
        placeholder="搜索工具..."
        value={searchQuery}
        onChange={(e) => onSearchQueryChange(e.target.value)}
@@ -35,12 +34,7 @@ export default function SearchInput({
        aria-label="搜索工具..."
        className="h-9 rounded-lg border-border/60 bg-muted/40 pl-9 pr-16 shadow-none focus-visible:ring-1 focus-visible:ring-offset-0 placeholder:text-muted-foreground/50"
      />
-      {!searchQuery && (
-        <kbd className="pointer-events-none absolute right-3 top-1/2 hidden h-5 -translate-y-1/2 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 sm:inline-flex">
-          {getSearchShortcutLabel()}
-        </kbd>
-      )}
-      {searchQuery && (
+      {searchQuery ? (
        <Button
          type="button"
          variant="ghost"
@@ -51,6 +45,10 @@ export default function SearchInput({
        >
          <X className="h-3 w-3" />
        </Button>
+      ) : (
+        <kbd className="pointer-events-none absolute right-3 top-1/2 hidden h-5 -translate-y-1/2 items-center rounded border border-border/60 bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground/60 sm:inline-flex">
+          {getSearchShortcutLabel()}
+        </kbd>
      )}
    </div>
  );
@@ -1,5 +1,5 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import type { PageType } from '@/types/storage';
 import React from 'react';
 import TopBar from '@/layout/TopBar';
@@ -21,13 +21,12 @@ Object.defineProperty(window, 'matchMedia', {
 });

 const mockRouterValue = {
-  currentPage: 'dashboard' as PageType,
-  visiblePages: ['dashboard', 'timestamp'] as PageType[],
+  currentPage: 'timestamp' as PageType,
+  visiblePages: ['timestamp', 'jwt'] as PageType[],
  pageOrder: ['timestamp'] as PageType[],
+  recentlyUsedTools: [] as PageType[],
  isLoaded: true,
  navigateTo: vi.fn(),
-  syncNavigation: vi.fn(),
-  goHome: vi.fn(),
  setVisiblePages: vi.fn(),
  setPageOrder: vi.fn(),
 };
@@ -51,26 +50,14 @@ describe('TopBar 组件', () => {
  };

  describe('渲染测试', () => {
-    it('不在 dashboard 时应渲染返回按钮', () => {
-      mockRouterValue.currentPage = 'timestamp';
-      renderWithProvider(<TopBar />);
-      expect(screen.getByLabelText('返回首页')).toBeInTheDocument();
-    });
-
-    it('在 dashboard 上不应渲染返回按钮', () => {
-      mockRouterValue.currentPage = 'dashboard';
+    it('不应渲染返回首页按钮', () => {
      renderWithProvider(<TopBar />);
      expect(screen.queryByLabelText('返回首页')).not.toBeInTheDocument();
    });
-  });

-  describe('交互测试', () => {
-    it('点击返回按钮时应调用 goHome', () => {
-      mockRouterValue.currentPage = 'timestamp';
+    it('应渲染搜索输入框', () => {
      renderWithProvider(<TopBar />);
-
-      fireEvent.click(screen.getByLabelText('返回首页'));
-      expect(mockRouterValue.goHome).toHaveBeenCalledTimes(1);
+      expect(screen.getByRole('textbox')).toBeInTheDocument();
    });
  });
 });
@@ -1,5 +1,3 @@
-import { ArrowLeft, ExternalLink } from 'lucide-react';
-import { Button } from '@/components/ui/button';
 import SearchDropdown from './SearchDropdown';
 import SearchInput from './SearchInput';
 import TopBarActions from './TopBarActions';
@@ -11,7 +9,6 @@ export default function TopBar() {
    searchResults,
    recentFeatures,
    selectedIndex,
-    isDashboard,
    ThemeIcon,
    themeTitle,
    showDropdown,
@@ -22,40 +19,13 @@ export default function TopBar() {
    handleSelectFeature,
    handleKeyDown,
    cycleThemeMode,
-    handleOpenInTab,
-    goHome,
    clearSearch,
  } = useTopBar();

-  const actions = [
-    { id: 'theme', icon: ThemeIcon, title: themeTitle, onClick: cycleThemeMode },
-    {
-      id: 'open-in-tab',
-      icon: ExternalLink,
-      title: '在标签页打开',
-      onClick: () => {
-        void handleOpenInTab();
-      },
-    },
-  ];
+  const actions = [{ id: 'theme', icon: ThemeIcon, title: themeTitle, onClick: cycleThemeMode }];

  return (
    <header className="relative z-50 flex h-14 items-center justify-between border-b border-border bg-background px-4">
-      <div className="flex w-10 items-center justify-start">
-        {!isDashboard && (
-          <Button
-            type="button"
-            variant="outline"
-            size="icon"
-            onClick={goHome}
-            aria-label="返回首页"
-            className="h-8 w-8 shadow-sm text-muted-foreground"
-          >
-            <ArrowLeft className="h-4 w-4" />
-          </Button>
-        )}
-      </div>
-
      <div ref={containerRef} className="relative mx-4 max-w-md flex-1">
        <SearchInput
          inputRef={inputRef}
@@ -1,10 +1,16 @@
-import { useEffect, useMemo, useRef, useState, type RefObject } from 'react';
+import {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type KeyboardEvent as ReactKeyboardEvent,
+  type RefObject,
+} from 'react';
 import { Monitor, Moon, Sun } from 'lucide-react';
 import { useRouter } from '@/providers/RouterProvider';
 import { useThemeMode } from '@/providers/ThemeModeProvider';
 import { type FeatureConfig, FEATURES } from '@/config/features';
 import { useStorageState } from '@/utils/useStorageState';
-import { openExtensionPage } from '@/utils/chromeTabs';
 import { isSearchHistory, SEARCH_HISTORY_DISPLAY, SEARCH_HISTORY_LIMIT } from './constants';

 export interface UseTopBarReturn {
@@ -12,7 +18,6 @@ export interface UseTopBarReturn {
  searchResults: FeatureConfig[];
  recentFeatures: FeatureConfig[];
  selectedIndex: number;
-  isDashboard: boolean;
  ThemeIcon: typeof Sun;
  themeTitle: string;
  showDropdown: boolean;
@@ -21,15 +26,13 @@ export interface UseTopBarReturn {
  handleSearchQueryChange: (value: string) => void;
  handleSearchFocus: () => void;
  handleSelectFeature: (feature: FeatureConfig) => void;
-  handleKeyDown: (e: React.KeyboardEvent) => void;
+  handleKeyDown: (e: ReactKeyboardEvent) => void;
  cycleThemeMode: () => void;
-  handleOpenInTab: () => Promise<void>;
-  goHome: () => void;
  clearSearch: () => void;
 }

 export function useTopBar(): UseTopBarReturn {
-  const { currentPage, goHome, navigateTo } = useRouter();
+  const { navigateTo } = useRouter();
  const { mode, setMode } = useThemeMode();

  const [searchQuery, setSearchQuery] = useState('');
@@ -44,11 +47,6 @@ export function useTopBar(): UseTopBarReturn {
  const containerRef = useRef<HTMLDivElement>(null);
  const inputRef = useRef<HTMLInputElement>(null);

-  const handleOpenInTab = async () => {
-    await openExtensionPage('popup.html', { mode: 'tab' });
-    window.close();
-  };
-
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
@@ -75,17 +73,16 @@ export function useTopBar(): UseTopBarReturn {
    const query = searchQuery.trim().toLowerCase();
    if (!query) return [];
    return FEATURES.filter((f) => {
-      if (f.key === 'dashboard') return false;
      return f.label.toLowerCase().includes(query) || f.description.toLowerCase().includes(query);
    });
  }, [searchQuery]);

-  const displayedHistory = useMemo(() => {
+  const recentFeatures = useMemo(() => {
    if (searchQuery.trim()) return [];
    return searchHistory
      .slice(0, SEARCH_HISTORY_DISPLAY)
      .map((key) => FEATURES.find((f) => f.key === key))
-      .filter((feature): feature is FeatureConfig => !!feature && feature.key !== 'dashboard');
+      .filter((feature): feature is FeatureConfig => !!feature);
  }, [searchHistory, searchQuery]);

  const saveToHistory = (featureKey: string) => {
@@ -111,8 +108,10 @@ export function useTopBar(): UseTopBarReturn {
  const themeTitle =
    mode === 'light' ? '切换到深色模式' : mode === 'dark' ? '切换到系统模式' : '切换到浅色模式';

-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    const totalItems = searchQuery.trim() ? searchResults.length : displayedHistory.length;
+  const handleKeyDown = (e: ReactKeyboardEvent) => {
+    const isSearching = !!searchQuery.trim();
+    const items = isSearching ? searchResults : recentFeatures;
+    const totalItems = items.length;

    if (e.key === 'ArrowDown') {
      e.preventDefault();
@@ -122,13 +121,12 @@ export function useTopBar(): UseTopBarReturn {
      setSelectedIndex((prev) => (prev > 0 ? prev - 1 : prev));
    } else if (e.key === 'Enter') {
      e.preventDefault();
-      const items = searchQuery.trim() ? searchResults : displayedHistory;
-      const feature =
-        selectedIndex >= 0 && selectedIndex < totalItems
-          ? items[selectedIndex]
-          : searchQuery.trim() && searchResults.length > 0
-            ? searchResults[0]
-            : undefined;
+      let feature: FeatureConfig | undefined;
+      if (selectedIndex >= 0 && selectedIndex < totalItems) {
+        feature = items[selectedIndex];
+      } else if (isSearching && searchResults.length > 0) {
+        feature = searchResults[0];
+      }
      if (feature) handleSelectFeature(feature);
    } else if (e.key === 'Escape') {
      setShowResults(false);
@@ -149,16 +147,14 @@ export function useTopBar(): UseTopBarReturn {

  const handleSearchFocus = () => setShowResults(true);

-  const showDropdown =
-    showResults && (searchQuery.trim().length > 0 || displayedHistory.length > 0);
+  const showDropdown = showResults && (!!searchQuery.trim() || recentFeatures.length > 0);

  return {
    searchQuery,
    searchResults,
-    recentFeatures: displayedHistory,
+    recentFeatures,
    selectedIndex,
    showDropdown,
-    isDashboard: currentPage === 'dashboard',
    ThemeIcon,
    themeTitle,
    containerRef,
@@ -168,8 +164,6 @@ export function useTopBar(): UseTopBarReturn {
    handleSelectFeature,
    handleKeyDown,
    cycleThemeMode,
-    handleOpenInTab,
-    goHome,
    clearSearch,
  };
 }
@@ -1,6 +1,5 @@
 import { type ClassValue, clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';

 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
+  return clsx(inputs);
 }
@@ -2,15 +2,6 @@ import { describe, expect, it, vi } from 'vitest';
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
 import Base64ConverterPage from '../index';

-// Mock getEntryPointType
-vi.mock('@/config/features', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@/config/features')>();
-  return {
-    ...actual,
-    getEntryPointType: () => 'sidepanel',
-  };
-});
-
 // Mock 子组件
 vi.mock('../components/TextMode', () => ({
  default: ({ onSwitchToImageMode }: { onSwitchToImageMode?: () => void }) => (
@@ -22,7 +13,9 @@ vi.mock('../components/TextMode', () => ({
 }));

 vi.mock('../components/Base64ConverterSection', () => ({
-  default: ({ mode }: { mode: string }) => <div data-testid={`${mode}-mode`}>{mode}</div>,
+  default: ({ mode }: { mode: 'file' | 'image' }) => (
+    <div data-testid={`${mode}-mode`}>{mode.toUpperCase()} Mode</div>
+  ),
 }));

 const waitForStorageInit = () =>
@@ -50,10 +50,6 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
    setDirection(next);
  };

-  const handleDownload = () => {
-    if (decoded) downloadBlob(decoded.blob, decodedFileName);
-  };
-
  return (
    <div className="w-full flex flex-col space-y-4 px-2">
      <div className="flex h-11 items-center px-1.5 bg-secondary/40 rounded-xl border border-border/60 w-fit">
@@ -115,7 +111,7 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
                    />
                  </div>
                )}
-                <Upload className={cn('w-8 h-8 text-primary')} />
+                <Upload className="w-8 h-8 text-primary" />
                <span className="text-sm font-bold text-foreground/90 max-w-[280px] truncate">
                  {info.name}
                </span>
@@ -137,11 +133,11 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
                  {mode === 'image' ? '点击或拖拽图像到此处' : '点击或拖拽文件到此处'}
                </span>
                <span className="text-[10px] font-medium text-muted-foreground/60">
-                  {`最大文件大小：${maxFileSizeStr}`}
+                  最大文件大小：{maxFileSizeStr}
                </span>
                {mode === 'image' && (
                  <span className="text-[10px] font-medium text-muted-foreground/50">
-                    {'支持 PNG、JPG、WEBP、GIF、BMP、SVG 等格式'}
+                    支持 PNG、JPG、WEBP、GIF、BMP、SVG 等格式
                  </span>
                )}
              </div>
@@ -231,7 +227,7 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
              blobSize={decoded.blob.size}
              fileName={decodedFileName}
              onFileNameChange={setCustomFileName}
-              onDownload={handleDownload}
+              onDownload={() => downloadBlob(decoded.blob, decodedFileName)}
            >
              {mode === 'image' && (
                <div className="relative p-1.5 border border-border bg-background dark:bg-muted/10 rounded-xl max-w-[220px] mb-3 overflow-hidden shadow-sm">
@@ -1,95 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { resolveDashboardFeatures, type DashboardFeatureItem } from '../dashboardFeatures';
-import Index from '../index';
-
-const mockNavigateTo = vi.fn();
-const mockUseDashboard = vi.fn();
-
-vi.mock('../useDashboard', () => ({
-  useDashboard: () => mockUseDashboard(),
-}));
-
-function buildFeatureItem(key: 'timestamp' | 'jwt'): DashboardFeatureItem {
-  return resolveDashboardFeatures([key], [key])[0]!;
-}
-
-describe('Dashboard 页面', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    mockUseDashboard.mockReturnValue({
-      visibleFeatures: [buildFeatureItem('timestamp'), buildFeatureItem('jwt')],
-      recentFeatures: [],
-      showRecent: false,
-      navigateTo: mockNavigateTo,
-    });
-  });
-
-  it('应渲染全部工具网格', () => {
-    render(<Index />);
-
-    expect(screen.getByText('全部工具')).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: '时间戳' })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'JWT 解析' })).toBeInTheDocument();
-  });
-
-  it('点击工具卡片应触发 navigateTo', async () => {
-    const user = userEvent.setup();
-    render(<Index />);
-
-    await user.click(screen.getByRole('button', { name: '时间戳' }));
-
-    expect(mockNavigateTo).toHaveBeenCalledTimes(1);
-    expect(mockNavigateTo).toHaveBeenCalledWith('timestamp');
-  });
-
-  it('有最近使用数据时应显示最近使用区块', () => {
-    mockUseDashboard.mockReturnValue({
-      visibleFeatures: [buildFeatureItem('timestamp')],
-      recentFeatures: [buildFeatureItem('jwt')],
-      showRecent: true,
-      navigateTo: mockNavigateTo,
-    });
-
-    render(<Index />);
-
-    expect(screen.getByText('最近使用')).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'JWT 解析' })).toBeInTheDocument();
-  });
-
-  it('无最近使用数据时不应显示最近使用区块', () => {
-    render(<Index />);
-
-    expect(screen.queryByText('最近使用')).not.toBeInTheDocument();
-  });
-
-  it('点击最近使用按钮应触发 navigateTo', async () => {
-    const user = userEvent.setup();
-    mockUseDashboard.mockReturnValue({
-      visibleFeatures: [buildFeatureItem('timestamp')],
-      recentFeatures: [buildFeatureItem('jwt')],
-      showRecent: true,
-      navigateTo: mockNavigateTo,
-    });
-
-    render(<Index />);
-
-    await user.click(screen.getByRole('button', { name: 'JWT 解析' }));
-
-    expect(mockNavigateTo).toHaveBeenCalledWith('jwt');
-  });
-
-  it('无可见工具时应显示空状态', () => {
-    mockUseDashboard.mockReturnValue({
-      visibleFeatures: [],
-      recentFeatures: [],
-      showRecent: false,
-      navigateTo: mockNavigateTo,
-    });
-
-    render(<Index />);
-
-    expect(screen.getByText('没有可用的工具')).toBeInTheDocument();
-  });
-});
@@ -1,78 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { useRouter } from '@/providers/RouterProvider';
-import { useDashboard } from '../useDashboard';
-import type { PageType } from '@/types/storage';
-
-vi.mock('@/providers/RouterProvider', () => ({
-  useRouter: vi.fn(),
-}));
-
-const mockNavigateTo = vi.fn();
-
-function mockRouterState(
-  overrides: {
-    visiblePages?: PageType[];
-    pageOrder?: PageType[];
-    recentlyUsedTools?: PageType[];
-  } = {},
-) {
-  vi.mocked(useRouter).mockReturnValue({
-    currentPage: 'dashboard',
-    visiblePages: overrides.visiblePages ?? ['dashboard', 'timestamp', 'jwt'],
-    pageOrder: overrides.pageOrder ?? ['jwt', 'timestamp'],
-    recentlyUsedTools: overrides.recentlyUsedTools ?? [],
-    isLoaded: true,
-    navigateTo: mockNavigateTo,
-    goHome: vi.fn(),
-    setVisiblePages: vi.fn(),
-    setPageOrder: vi.fn(),
-  });
-}
-
-describe('useDashboard', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it('应透传 router 中的 navigateTo', () => {
-    mockRouterState();
-
-    const { result } = renderHook(() => useDashboard());
-
-    expect(result.current.navigateTo).toBe(mockNavigateTo);
-  });
-
-  it('recentlyUsedTools 有可见工具时应显示最近使用', () => {
-    mockRouterState({
-      visiblePages: ['dashboard', 'timestamp', 'jwt'],
-      recentlyUsedTools: ['timestamp', 'jwt'],
-    });
-
-    const { result } = renderHook(() => useDashboard());
-
-    expect(result.current.showRecent).toBe(true);
-    expect(result.current.recentFeatures.map((item) => item.key)).toEqual(['timestamp', 'jwt']);
-  });
-
-  it('recentlyUsedTools 为空时不应显示最近使用', () => {
-    mockRouterState({ recentlyUsedTools: [] });
-
-    const { result } = renderHook(() => useDashboard());
-
-    expect(result.current.showRecent).toBe(false);
-    expect(result.current.recentFeatures).toEqual([]);
-  });
-
-  it('最近使用中的不可见工具应被过滤', () => {
-    mockRouterState({
-      visiblePages: ['dashboard', 'timestamp'],
-      recentlyUsedTools: ['jwt', 'timestamp'],
-    });
-
-    const { result } = renderHook(() => useDashboard());
-
-    expect(result.current.showRecent).toBe(true);
-    expect(result.current.recentFeatures.map((item) => item.key)).toEqual(['timestamp']);
-  });
-});
@@ -1,34 +0,0 @@
-import { getFeatureByKey, type FeatureConfig } from '@/config/features';
-import type { PageType } from '@/types/storage';
-
-export type DashboardFeature = FeatureConfig & {
-  icon: NonNullable<FeatureConfig['icon']>;
-};
-
-export interface DashboardFeatureItem {
-  key: PageType;
-  feature: DashboardFeature;
-}
-
-function isDashboardFeature(feature: FeatureConfig): feature is DashboardFeature {
-  return feature.icon != null;
-}
-
-export function resolveDashboardFeatures(
-  keys: PageType[],
-  visiblePages: PageType[],
-): DashboardFeatureItem[] {
-  const visibleSet = new Set(visiblePages);
-  const items: DashboardFeatureItem[] = [];
-
-  for (const key of keys) {
-    if (!visibleSet.has(key)) continue;
-
-    const feature = getFeatureByKey(key);
-    if (!feature || !isDashboardFeature(feature)) continue;
-
-    items.push({ key, feature });
-  }
-
-  return items;
-}
@@ -1,80 +0,0 @@
-import { cn } from '@/lib/utils';
-import { useDashboard } from './useDashboard';
-
-export default function Index() {
-  const { visibleFeatures, recentFeatures, showRecent, navigateTo } = useDashboard();
-
-  return (
-    <div className={cn('flex flex-col gap-4 p-3.5 w-full h-auto select-none')}>
-      {showRecent && (
-        <div className="flex flex-col gap-2">
-          <h3 className="text-xs font-semibold text-muted-foreground/80 uppercase tracking-wider">
-            最近使用
-          </h3>
-          <div className="flex flex-wrap gap-2">
-            {recentFeatures.map(({ key, feature }) => {
-              const IconComponent = feature.icon;
-              return (
-                <button
-                  key={key}
-                  type="button"
-                  onClick={() => navigateTo(key)}
-                  className={cn(
-                    'inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium',
-                    'border border-border/60 bg-card text-card-foreground',
-                    'hover:bg-muted/40 hover:border-primary/30',
-                    'transition-colors cursor-pointer',
-                  )}
-                >
-                  <IconComponent className="h-3.5 w-3.5 text-muted-foreground/70" />
-                  {feature.label}
-                </button>
-              );
-            })}
-          </div>
-        </div>
-      )}
-
-      <div className="flex flex-col gap-2">
-        <h3 className="text-xs font-semibold text-muted-foreground/80 uppercase tracking-wider">
-          全部工具
-        </h3>
-        {visibleFeatures.length === 0 ? (
-          <p className="text-sm text-muted-foreground py-4 text-center">没有可用的工具</p>
-        ) : (
-          <div
-            className={cn('grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-2')}
-          >
-            {visibleFeatures.map(({ key, feature }) => {
-              const IconComponent = feature.icon;
-              return (
-                <button
-                  key={key}
-                  type="button"
-                  onClick={() => navigateTo(key)}
-                  className={cn(
-                    'group flex flex-col items-center justify-center gap-1.5',
-                    'py-3 px-2 rounded-xl border border-border/50 bg-card',
-                    'hover:bg-muted/40 hover:border-primary/30',
-                    'transition-colors cursor-pointer',
-                  )}
-                >
-                  <IconComponent
-                    className={cn(
-                      'h-5 w-5 text-muted-foreground/70',
-                      'group-hover:text-foreground',
-                      'transition-colors',
-                    )}
-                  />
-                  <span className="text-[11px] font-medium text-muted-foreground/80 group-hover:text-foreground leading-tight text-center truncate w-full transition-colors">
-                    {feature.label}
-                  </span>
-                </button>
-              );
-            })}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
@@ -1,29 +0,0 @@
-import { useMemo } from 'react';
-import { useRouter } from '@/providers/RouterProvider';
-import type { PageType } from '@/types/storage';
-import { resolveDashboardFeatures, type DashboardFeatureItem } from './dashboardFeatures';
-
-export interface UseDashboardReturn {
-  visibleFeatures: DashboardFeatureItem[];
-  recentFeatures: DashboardFeatureItem[];
-  showRecent: boolean;
-  navigateTo: (page: PageType) => void;
-}
-
-export function useDashboard(): UseDashboardReturn {
-  const { navigateTo, visiblePages, pageOrder, recentlyUsedTools } = useRouter();
-
-  const visibleFeatures = useMemo(
-    () => resolveDashboardFeatures(pageOrder, visiblePages),
-    [pageOrder, visiblePages],
-  );
-
-  const recentFeatures = useMemo(
-    () => resolveDashboardFeatures(recentlyUsedTools, visiblePages),
-    [recentlyUsedTools, visiblePages],
-  );
-
-  const showRecent = recentFeatures.length > 0;
-
-  return { visibleFeatures, recentFeatures, showRecent, navigateTo };
-}
@@ -18,14 +18,6 @@ vi.mock('@/components/GlobalSnackbar', () => ({
  }),
 }));

-vi.mock('@/config/features', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@/config/features')>();
-  return {
-    ...actual,
-    getEntryPointType: () => 'sidepanel',
-  };
-});
-
 vi.mock('../components/QrCodePreview', () => ({
  default: () => <div data-testid="qr-code-preview">QrCodePreview</div>,
 }));
@@ -44,7 +44,7 @@ const QrCodePreview = ({
          <img
            src={qrCodeDataUrl}
            alt="QR Code Preview"
-            className="w-48 h-48 max-w-full object-contain block animate-in fade-in duration-300"
+            className="w-48 h-48 max-w-full object-contain block fade-in-300"
          />
        </div>

@@ -234,29 +234,38 @@ export default function FieldList({
      if (!ruleName.trim()) return;

      const trimmedName = ruleName.trim();
+      const existingRule = ruleStorage.getByName(trimmedName);

      // 检查名称是否重复
-      if (!overwrite) {
-        const existingRule = ruleStorage.getByName(trimmedName);
-        if (existingRule) {
+      if (!overwrite && existingRule) {
        setShowConfirmOverwrite(true);
        return;
      }
-      }

-      const newRule = ruleStorage.save({
+      const savedRule = ruleStorage.save(
+        overwrite && existingRule
+          ? {
+              id: existingRule.id,
              name: trimmedName,
              description: ruleDescription.trim(),
              fields: fields,
-      });
+            }
+          : {
+              name: trimmedName,
+              description: ruleDescription.trim(),
+              fields: fields,
+            },
+      );

-      if (newRule) {
+      if (savedRule) {
        setShowSaveDialog(false);
        setShowConfirmOverwrite(false);
        setRuleName('');
        setRuleDescription('');
-        toast.success('规则已保存');
+        toast.success(overwrite ? '规则已覆盖' : '规则已保存');
        onRuleSaved?.();
+      } else {
+        toast.error('规则保存失败');
      }
    },
    [ruleName, ruleDescription, fields, onRuleSaved],
@@ -277,7 +286,7 @@ export default function FieldList({
                onClick={handleUpdateRule}
                disabled={fields.length === 0}
                className="h-8 gap-1.5 px-2.5"
-                title={`编辑中: ${editingRule.name}`}
+                title={editingRule ? `编辑中: ${editingRule.name}` : ''}
              >
                <Save className="h-3.5 w-3.5" />
                更新规则
@@ -33,7 +33,10 @@ export default function GenerateButton({
          {progress && (
            <div className="space-y-2">
              <div className="flex items-center justify-between text-xs text-muted-foreground">
-                <span>{`已生成 ${progress.generated.toLocaleString()} / ${progress.total.toLocaleString()} 条`}</span>
+                <span>
+                  已生成 {progress.generated.toLocaleString()} / {progress.total.toLocaleString()}{' '}
+                  条
+                </span>
                <span>{progress.progress}%</span>
              </div>
              <div className="h-2 bg-muted rounded-full overflow-hidden">
@@ -44,7 +47,7 @@ export default function GenerateButton({
              </div>
              {progress.estimatedTimeLeft !== undefined && (
                <p className="text-xs text-muted-foreground text-center">
-                  {`预计剩余 ${Math.ceil(progress.estimatedTimeLeft / 1000)} 秒`}
+                  预计剩余 {Math.ceil(progress.estimatedTimeLeft / 1000)} 秒
                </p>
              )}
            </div>
@@ -82,7 +82,7 @@ export default function ResultPanel({ result }: ResultPanelProps) {
            ))}
            {result.warnings.length > 5 && (
              <li className="text-xs text-yellow-500/80">
-                {`... 还有 ${result.warnings.length - 5} 条警告`}
+                ... 还有 {result.warnings.length - 5} 条警告
              </li>
            )}
          </ul>
@@ -227,7 +227,7 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
          maxLength={20}
        />
        <span className="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-muted-foreground pointer-events-none tabular-nums">
-          {`已保存 ${rules.length}/${ruleStorage.MAX_RULES} 条`}
+          已保存 {rules.length}/{ruleStorage.MAX_RULES} 条
        </span>
      </div>

@@ -260,7 +260,7 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
                    <Clock className="h-3 w-3" />
                    {formatDate(rule.updatedAt)}
                  </span>
-                  <span>{`使用 ${rule.useCount} 次`}</span>
+                  <span>使用 {rule.useCount} 次</span>
                </div>
              </div>

@@ -0,0 +1,92 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import type { FieldConfig } from '@/types/testDataGenerator';
+
+vi.mock('@/utils/ruleStorage', () => ({
+  getByName: vi.fn(),
+  save: vi.fn(),
+  update: vi.fn(),
+}));
+
+vi.mock('sonner', () => ({
+  toast: {
+    success: vi.fn(),
+    error: vi.fn(),
+  },
+}));
+
+import FieldList from '../FieldList';
+import * as ruleStorage from '@/utils/ruleStorage';
+import { toast } from 'sonner';
+
+const mockedRuleStorage = vi.mocked(ruleStorage);
+const mockedToast = vi.mocked(toast);
+
+const mockFields: FieldConfig[] = [
+  {
+    id: 'field-1',
+    name: 'username',
+    generatorId: 'string',
+    params: {},
+    required: true,
+    nullRate: 0,
+    unique: false,
+  },
+];
+
+const defaultProps = {
+  fields: mockFields,
+  onUpdate: vi.fn(),
+  onRemove: vi.fn(),
+  onAdd: vi.fn(),
+  onEdit: vi.fn(),
+  onReorder: vi.fn(),
+};
+
+describe('FieldList 规则保存', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockedRuleStorage.getByName.mockReturnValue(undefined);
+    mockedRuleStorage.save.mockReturnValue({
+      id: 'rule-1',
+      name: 'My Rule',
+      fields: mockFields,
+      createdAt: Date.now(),
+      updatedAt: Date.now(),
+      useCount: 0,
+    });
+  });
+
+  it('覆盖同名规则时应更新已有规则而非新建', async () => {
+    const user = userEvent.setup();
+    const existingRule = {
+      id: 'existing-rule-id',
+      name: 'My Rule',
+      fields: mockFields,
+      createdAt: Date.now(),
+      updatedAt: Date.now(),
+      useCount: 0,
+    };
+
+    mockedRuleStorage.getByName.mockReturnValue(existingRule);
+
+    render(<FieldList {...defaultProps} />);
+
+    await user.click(screen.getByRole('button', { name: /保存规则/ }));
+    await user.type(screen.getByPlaceholderText('规则名称'), 'My Rule');
+    await user.click(screen.getByRole('button', { name: '确认' }));
+
+    expect(screen.getByText('已存在同名规则，是否覆盖保存？')).toBeInTheDocument();
+
+    await user.click(screen.getByRole('button', { name: '覆盖' }));
+
+    expect(mockedRuleStorage.save).toHaveBeenCalledWith({
+      id: 'existing-rule-id',
+      name: 'My Rule',
+      description: '',
+      fields: mockFields,
+    });
+    expect(mockedToast.success).toHaveBeenCalledWith('规则已覆盖');
+  });
+});
@@ -114,4 +114,25 @@ describe('useGenerator', () => {
    expect(result.current.isGenerating).toBe(false);
    expect(worker.postedMessages).toEqual(expect.arrayContaining([{ type: 'cancel' }]));
  });
+
+  it('正在生成时不应重复发送 start 消息', () => {
+    const { result } = renderHook(() => useGenerator());
+
+    act(() => {
+      result.current.generate([mockField], 10);
+      result.current.generate([mockField], 20);
+    });
+
+    const worker = MockWorker.instances[0];
+    const startMessages = worker.postedMessages.filter(
+      (message): message is { type: 'start'; payload: { count: number } } =>
+        typeof message === 'object' &&
+        message !== null &&
+        'type' in message &&
+        message.type === 'start',
+    );
+
+    expect(startMessages).toHaveLength(1);
+    expect(startMessages[0]?.payload.count).toBe(10);
+  });
 });
@@ -37,6 +37,12 @@ export function useGenerator(): UseGeneratorReturn {

  const workerRef = useRef<Worker | null>(null);
  const generationIdRef = useRef(0);
+  const isGeneratingRef = useRef(false);
+
+  const finishGenerating = useCallback(() => {
+    isGeneratingRef.current = false;
+    setIsGenerating(false);
+  }, []);

  // 清理 Worker
  useEffect(() => {
@@ -73,7 +79,7 @@ export function useGenerator(): UseGeneratorReturn {
          setProgress(data.payload);
          break;
        case 'complete':
-          setIsGenerating(false);
+          finishGenerating();
          if (data.payload.success) {
            setResult(data.payload);
          } else if (data.payload.error && data.payload.error !== '生成已取消') {
@@ -82,7 +88,7 @@ export function useGenerator(): UseGeneratorReturn {
          setProgress(null);
          break;
        case 'error':
-          setIsGenerating(false);
+          finishGenerating();
          setError(data.payload.error);
          setProgress(null);
          break;
@@ -91,7 +97,7 @@ export function useGenerator(): UseGeneratorReturn {

    worker.onerror = (err) => {
      console.error('[useGenerator] Worker 错误:', err);
-      setIsGenerating(false);
+      finishGenerating();
      setError(err.message || 'Worker 运行错误');
      setProgress(null);
      // Worker 出错后销毁，下次重新创建
@@ -101,16 +107,17 @@ export function useGenerator(): UseGeneratorReturn {

    workerRef.current = worker;
    return worker;
-  }, []);
+  }, [finishGenerating]);

  /**
   * 开始生成
   */
  const generate = useCallback(
    (fields: FieldConfig[], count: number, csvMode = false) => {
-      if (isGenerating) return;
+      if (isGeneratingRef.current) return;

      const generationId = ++generationIdRef.current;
+      isGeneratingRef.current = true;

      setIsGenerating(true);
      setProgress(null);
@@ -124,21 +131,22 @@ export function useGenerator(): UseGeneratorReturn {
      };
      worker.postMessage(message);
    },
-    [isGenerating, getWorker],
+    [getWorker],
  );

  /**
   * 取消生成
   */
  const cancel = useCallback(() => {
-    if (workerRef.current && isGenerating) {
+    if (workerRef.current && isGeneratingRef.current) {
      ++generationIdRef.current;
      const message: WorkerRequestMessage = { type: 'cancel' };
      workerRef.current.postMessage(message);
+      isGeneratingRef.current = false;
      setIsGenerating(false);
      setProgress(null);
    }
-  }, [isGenerating]);
+  }, []);

  /**
   * 清除结果
@@ -28,10 +28,11 @@ const isValidPage = (page: unknown): page is PageType => {
 };

 /**
- * 校验页面列表是否合法
+ * 从页面列表中过滤非法项（如已移除的 dashboard），保留合法 PageType
 */
-const isValidPageList = (pages: unknown): pages is PageType[] => {
-  return Array.isArray(pages) && pages.every(isValidPage);
+const sanitizePageList = (pages: unknown): PageType[] | null => {
+  if (!Array.isArray(pages)) return null;
+  return pages.filter(isValidPage);
 };

 /**
@@ -47,6 +48,15 @@ const mergeWithDefaults = (saved: PageType[], defaults: PageType[]): PageType[]
  return [...preserved, ...newItems];
 };

+/**
+ * 解析并合并页面列表：过滤非法项后与默认列表合并
+ */
+const resolvePageList = (pages: unknown, defaults: PageType[]): PageType[] => {
+  const sanitized = sanitizePageList(pages);
+  if (sanitized === null) return defaults;
+  return mergeWithDefaults(sanitized, defaults);
+};
+
 interface RouterContextType {
  currentPage: PageType;
  visiblePages: PageType[];
@@ -54,7 +64,6 @@ interface RouterContextType {
  recentlyUsedTools: PageType[];
  isLoaded: boolean;
  navigateTo: (page: PageType) => void;
-  goHome: () => void;
  setVisiblePages: (pages: PageType[]) => void;
  setPageOrder: (pages: PageType[]) => void;
 }
@@ -72,7 +81,7 @@ interface RouterProviderProps {

 export function RouterProvider({
  children,
-  defaultRoute = 'dashboard',
+  defaultRoute = 'timestamp',
  syncRoute = true,
  syncKey = 'app/currentRoute',
  visiblePagesKey = 'app/visiblePages',
@@ -82,26 +91,19 @@ export function RouterProvider({
    getSyncSnapshot(syncKey as string, defaultRoute, isValidPage),
  );

-  const [visiblePages, setVisiblePages] = useState<PageType[]>(() => {
-    const snapshot = getSyncSnapshot(
-      visiblePagesKey as string,
+  const [visiblePages, setVisiblePages] = useState<PageType[]>(() =>
+    resolvePageList(
+      getSyncSnapshot(visiblePagesKey as string, null),
      getDefaultVisibleFeatureKeys(),
-      isValidPageList,
+    ),
  );
-    return mergeWithDefaults(snapshot, getDefaultVisibleFeatureKeys());
-  });

-  const [pageOrder, setPageOrder] = useState<PageType[]>(() => {
-    const snapshot = getSyncSnapshot(
-      pageOrderKey as string,
-      getDefaultPageOrder(),
-      isValidPageList,
+  const [pageOrder, setPageOrder] = useState<PageType[]>(() =>
+    resolvePageList(getSyncSnapshot(pageOrderKey as string, null), getDefaultPageOrder()),
  );
-    return mergeWithDefaults(snapshot, getDefaultPageOrder());
-  });

-  const [recentlyUsedTools, setRecentlyUsedTools] = useState<PageType[]>(() =>
-    getSyncSnapshot('app/recentlyUsedTools', [], isValidPageList),
+  const [recentlyUsedTools, setRecentlyUsedTools] = useState<PageType[]>(
+    () => sanitizePageList(getSyncSnapshot('app/recentlyUsedTools', null)) ?? [],
  );

  const [isLoaded, setIsLoaded] = useState(false);
@@ -110,29 +112,39 @@ export function RouterProvider({

  const loadInitialData = useCallback(async () => {
    try {
-      const savedRoute = await storageUtil.get(syncKey, defaultRoute);
-      const savedVisiblePages = await storageUtil.get(
+      const stored = await storageUtil.getMany([
+        syncKey,
        visiblePagesKey,
-        getDefaultVisibleFeatureKeys(),
-      );
-      const savedPageOrder = await storageUtil.get(pageOrderKey, getDefaultPageOrder());
-      const savedRecentTools = await storageUtil.get('app/recentlyUsedTools', []);
+        pageOrderKey,
+        'app/recentlyUsedTools',
+        'contextMenu/pendingData',
+      ]);
+
+      const savedRoute = (stored[syncKey] ?? defaultRoute) as PageType;
+      const savedVisiblePages = (stored[visiblePagesKey] ??
+        getDefaultVisibleFeatureKeys()) as PageType[];
+      const savedPageOrder = (stored[pageOrderKey] ?? getDefaultPageOrder()) as PageType[];
+      const savedRecentTools = (stored['app/recentlyUsedTools'] ?? []) as PageType[];

      if (isValidPage(savedRoute) && syncRoute && !hasUserNavigatedRef.current) {
        setCurrentPage(savedRoute);
      }
-      if (isValidPageList(savedVisiblePages)) {
-        setVisiblePages(mergeWithDefaults(savedVisiblePages, getDefaultVisibleFeatureKeys()));
+      if (sanitizePageList(savedVisiblePages) !== null) {
+        setVisiblePages(resolvePageList(savedVisiblePages, getDefaultVisibleFeatureKeys()));
      }
-      if (isValidPageList(savedPageOrder) && savedPageOrder.length > 0) {
-        setPageOrder(mergeWithDefaults(savedPageOrder, getDefaultPageOrder()));
+      if (sanitizePageList(savedPageOrder) !== null) {
+        setPageOrder(resolvePageList(savedPageOrder, getDefaultPageOrder()));
      }
-      if (isValidPageList(savedRecentTools)) {
-        setRecentlyUsedTools(savedRecentTools);
+      const sanitizedRecentTools = sanitizePageList(savedRecentTools);
+      if (sanitizedRecentTools !== null) {
+        setRecentlyUsedTools(sanitizedRecentTools);
      }
      canPersistRef.current = true;
+
+      return stored['contextMenu/pendingData'];
    } catch (error) {
      console.error('[Router Init Error] Core data fetch failed:', error);
+      return undefined;
    } finally {
      setIsLoaded(true);
    }
@@ -143,7 +155,7 @@ export function RouterProvider({

    // eslint-disable-next-line react-hooks/set-state-in-effect -- Valid async data loading pattern on mount
    loadInitialData()
-      .then(() => {
+      .then((pendingData) => {
        if (cancelled) return;

        if (typeof window !== 'undefined') {
@@ -165,9 +177,6 @@ export function RouterProvider({
          }
        }

-        storageUtil
-          .get('contextMenu/pendingData')
-          .then((pendingData) => {
        if (
          pendingData &&
          isValidPage(pendingData.featureKey) &&
@@ -177,8 +186,6 @@ export function RouterProvider({
        }
      })
      .catch(console.error);
-      })
-      .catch(console.error);

    return () => {
      cancelled = true;
@@ -246,20 +253,21 @@ export function RouterProvider({
      }
      if (changes[visiblePagesKey as string]) {
        const newPages = changes[visiblePagesKey as string].newValue;
-        if (isValidPageList(newPages)) {
-          setVisiblePages(mergeWithDefaults(newPages, getDefaultVisibleFeatureKeys()));
+        if (sanitizePageList(newPages) !== null) {
+          setVisiblePages(resolvePageList(newPages, getDefaultVisibleFeatureKeys()));
        }
      }
      if (changes[pageOrderKey as string]) {
        const newOrder = changes[pageOrderKey as string].newValue;
-        if (isValidPageList(newOrder)) {
-          setPageOrder(mergeWithDefaults(newOrder, getDefaultPageOrder()));
+        if (sanitizePageList(newOrder) !== null) {
+          setPageOrder(resolvePageList(newOrder, getDefaultPageOrder()));
        }
      }
      if (changes['app/recentlyUsedTools']) {
        const newRecent = changes['app/recentlyUsedTools'].newValue;
-        if (isValidPageList(newRecent)) {
-          setRecentlyUsedTools(newRecent);
+        const sanitizedRecent = sanitizePageList(newRecent);
+        if (sanitizedRecent !== null) {
+          setRecentlyUsedTools(sanitizedRecent);
        }
      }
      if (changes['contextMenu/pendingData']) {
@@ -291,12 +299,6 @@ export function RouterProvider({
    });
  };

-  const goHome = () => {
-    hasUserNavigatedRef.current = true;
-    canPersistRef.current = true;
-    setCurrentPage('dashboard');
-  };
-
  return (
    <RouterContext.Provider
      value={{
@@ -306,7 +308,6 @@ export function RouterProvider({
        recentlyUsedTools,
        isLoaded,
        navigateTo,
-        goHome,
        setVisiblePages,
        setPageOrder,
      }}
@@ -13,6 +13,7 @@ import { storageUtil } from '@/utils/chromeStorage';
 import {
  applyResolvedThemeClass,
  getThemeSyncSnapshot,
+  hasThemeSyncSnapshot,
  isValidThemeMode,
  persistThemeModeSnapshot,
  resolveThemeMode,
@@ -68,6 +69,10 @@ export function ThemeModeProvider({ children }: ThemeModeProviderProps) {
  );

  useEffect(() => {
+    if (hasThemeSyncSnapshot()) {
+      return;
+    }
+
    let cancelled = false;

    storageUtil
@@ -7,10 +7,24 @@ import { storageUtil } from '@/utils/chromeStorage';
 vi.mock('@/utils/chromeStorage', () => ({
  storageUtil: {
    get: vi.fn(),
+    getMany: vi.fn(),
    set: vi.fn(() => Promise.resolve()),
  },
 }));

+/** 模拟批量 storage 读取，未指定的键由 Router 侧使用默认值 */
+function mockStorageBatch(map: Record<string, unknown> = {}) {
+  (storageUtil.getMany as ReturnType<typeof vi.fn>).mockImplementation((keys: string[]) => {
+    const result: Record<string, unknown> = {};
+    for (const key of keys) {
+      if (key in map) {
+        result[key] = map[key];
+      }
+    }
+    return Promise.resolve(result);
+  });
+}
+
 const TestComponent = () => {
  const { currentPage, navigateTo, visiblePages, pageOrder } = useRouter();
  return (
@@ -46,29 +60,10 @@ describe('RouterProvider', () => {
  });

  it('应该使用默认值初始化路由', async () => {
-    (storageUtil.get as any).mockImplementation((_key: string, defaultValue: any) =>
-      Promise.resolve(defaultValue),
-    );
+    mockStorageBatch();

    render(
-      <RouterProvider defaultRoute="dashboard">
-        <TestComponent />
-      </RouterProvider>,
-    );
-
-    await waitFor(() => {
-      expect(screen.getByTestId('current-page')).toHaveTextContent('dashboard');
-    });
-  });
-
-  it('应该从指定的 syncKey 加载路由', async () => {
-    (storageUtil.get as any).mockImplementation((key: string, defaultValue: any) => {
-      if (key === 'app/sidepanelRoute') return Promise.resolve('timestamp');
-      return Promise.resolve(defaultValue);
-    });
-
-    render(
-      <RouterProvider syncKey="app/sidepanelRoute">
+      <RouterProvider defaultRoute="timestamp">
        <TestComponent />
      </RouterProvider>,
    );
@@ -76,12 +71,18 @@ describe('RouterProvider', () => {
    await waitFor(() => {
      expect(screen.getByTestId('current-page')).toHaveTextContent('timestamp');
    });
+
+    expect(storageUtil.getMany).toHaveBeenCalledWith([
+      'app/currentRoute',
+      'app/visiblePages',
+      'app/pageOrder',
+      'app/recentlyUsedTools',
+      'contextMenu/pendingData',
+    ]);
  });

-  it('导航时应该更新指定的 syncKey', async () => {
-    (storageUtil.get as any).mockImplementation((_key: string, defaultValue: any) =>
-      Promise.resolve(defaultValue),
-    );
+  it('应该从指定的 syncKey 加载路由', async () => {
+    mockStorageBatch({ 'app/popupRoute': 'jwt' });

    render(
      <RouterProvider syncKey="app/popupRoute">
@@ -90,7 +91,21 @@ describe('RouterProvider', () => {
    );

    await waitFor(() => {
-      expect(screen.getByTestId('current-page')).toHaveTextContent('dashboard');
+      expect(screen.getByTestId('current-page')).toHaveTextContent('jwt');
+    });
+  });
+
+  it('导航时应该更新指定的 syncKey', async () => {
+    mockStorageBatch();
+
+    render(
+      <RouterProvider syncKey="app/popupRoute">
+        <TestComponent />
+      </RouterProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('current-page')).toHaveTextContent('timestamp');
    });

    const btn = screen.getByTestId('navigate-btn');
@@ -103,36 +118,14 @@ describe('RouterProvider', () => {
    expect(storageUtil.set).toHaveBeenCalledWith('app/popupRoute', 'timestamp');
  });

-  it('应该支持独立的标签页路由同步', async () => {
-    (storageUtil.get as any).mockImplementation((key: string, defaultValue: any) => {
-      if (key === 'app/tabRoute') return Promise.resolve('qrCode');
-      return Promise.resolve(defaultValue);
-    });
-
-    render(
-      <RouterProvider syncKey="app/tabRoute">
-        <TestComponent />
-      </RouterProvider>,
-    );
-
-    await waitFor(() => {
-      expect(screen.getByTestId('current-page')).toHaveTextContent('qrCode');
-    });
-  });
-
  it('应该独立支持 visiblePagesKey 和 pageOrderKey，并合并缺失的新功能', async () => {
-    (storageUtil.get as any).mockImplementation((key: string, defaultValue: any) => {
-      if (key === 'app/sidepanelVisiblePages')
-        return Promise.resolve(['timestamp', 'storageCleaner']);
-      if (key === 'app/sidepanelPageOrder') return Promise.resolve(['storageCleaner', 'timestamp']);
-      return Promise.resolve(defaultValue);
+    mockStorageBatch({
+      'app/popupVisiblePages': ['timestamp', 'storageCleaner'],
+      'app/popupPageOrder': ['storageCleaner', 'timestamp'],
    });

    render(
-      <RouterProvider
-        visiblePagesKey="app/sidepanelVisiblePages"
-        pageOrderKey="app/sidepanelPageOrder"
-      >
+      <RouterProvider visiblePagesKey="app/popupVisiblePages" pageOrderKey="app/popupPageOrder">
        <TestComponent />
      </RouterProvider>,
    );
@@ -150,7 +143,6 @@ describe('RouterProvider', () => {

  it('应该将旧存储中缺失的新功能自动合并到 visiblePages 和 pageOrder', async () => {
    const oldVisiblePages = [
-      'dashboard',
      'timestamp',
      'storageCleaner',
      'qrCode',
@@ -167,10 +159,9 @@ describe('RouterProvider', () => {
      'jsonTools',
    ];

-    (storageUtil.get as any).mockImplementation((key: string, defaultValue: any) => {
-      if (key === 'app/popupVisiblePages') return Promise.resolve(oldVisiblePages);
-      if (key === 'app/popupPageOrder') return Promise.resolve(oldPageOrder);
-      return Promise.resolve(defaultValue);
+    mockStorageBatch({
+      'app/popupVisiblePages': oldVisiblePages,
+      'app/popupPageOrder': oldPageOrder,
    });

    render(
@@ -183,14 +174,78 @@ describe('RouterProvider', () => {
      const visiblePages = screen.getByTestId('visible-pages').textContent!;
      const pageOrder = screen.getByTestId('page-order').textContent!;

-      expect(visiblePages.startsWith('dashboard,timestamp')).toBe(true);
+      expect(visiblePages.startsWith('timestamp,storageCleaner')).toBe(true);
      expect(pageOrder.startsWith('timestamp,storageCleaner')).toBe(true);
    });
  });

+  it('storage 中 dashboard 路由无效时应回退到 timestamp', async () => {
+    mockStorageBatch({ 'app/popupRoute': 'dashboard' });
+
+    render(
+      <RouterProvider syncKey="app/popupRoute" defaultRoute="timestamp">
+        <TestComponent />
+      </RouterProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('current-page')).toHaveTextContent('timestamp');
+    });
+  });
+
+  it('storage 列表含 dashboard 时应过滤并保留其余自定义配置', async () => {
+    mockStorageBatch({
+      'app/popupVisiblePages': ['dashboard', 'jwt', 'timestamp'],
+      'app/popupPageOrder': ['jwt', 'dashboard', 'timestamp'],
+      'app/recentlyUsedTools': ['dashboard', 'jwt'],
+    });
+
+    render(
+      <RouterProvider visiblePagesKey="app/popupVisiblePages" pageOrderKey="app/popupPageOrder">
+        <TestComponent />
+      </RouterProvider>,
+    );
+
+    await waitFor(() => {
+      const visiblePages = screen.getByTestId('visible-pages').textContent!;
+      const pageOrder = screen.getByTestId('page-order').textContent!;
+
+      expect(visiblePages.startsWith('jwt,timestamp')).toBe(true);
+      expect(pageOrder.startsWith('jwt,timestamp')).toBe(true);
+      expect(visiblePages).not.toContain('dashboard');
+      expect(pageOrder).not.toContain('dashboard');
+    });
+  });
+
+  it('localStorage 快照含 dashboard 时应过滤并保留其余配置', async () => {
+    localStorage.setItem(
+      'snapshot/app/popupVisiblePages',
+      JSON.stringify(['dashboard', 'jwt', 'timestamp']),
+    );
+    localStorage.setItem(
+      'snapshot/app/popupPageOrder',
+      JSON.stringify(['jwt', 'dashboard', 'timestamp']),
+    );
+
+    mockStorageBatch();
+
+    render(
+      <RouterProvider visiblePagesKey="app/popupVisiblePages" pageOrderKey="app/popupPageOrder">
+        <TestComponent />
+      </RouterProvider>,
+    );
+
+    const visiblePages = screen.getByTestId('visible-pages').textContent!;
+    const pageOrder = screen.getByTestId('page-order').textContent!;
+
+    expect(visiblePages.startsWith('jwt,timestamp')).toBe(true);
+    expect(pageOrder.startsWith('jwt,timestamp')).toBe(true);
+    expect(visiblePages).not.toContain('dashboard');
+    expect(pageOrder).not.toContain('dashboard');
+  });
+
  it('应该从 localStorage 快照合并缺失的新功能', async () => {
    const oldVisiblePages = [
-      'dashboard',
      'timestamp',
      'storageCleaner',
      'qrCode',
@@ -209,9 +264,7 @@ describe('RouterProvider', () => {
    localStorage.setItem('snapshot/app/visiblePages', JSON.stringify(oldVisiblePages));
    localStorage.setItem('snapshot/app/pageOrder', JSON.stringify(oldPageOrder));

-    (storageUtil.get as any).mockImplementation((_key: string, defaultValue: any) =>
-      Promise.resolve(defaultValue),
-    );
+    mockStorageBatch();

    render(
      <RouterProvider>
@@ -226,9 +279,7 @@ describe('RouterProvider', () => {
  });

  it('storage.onChanged 同步 visiblePages 时应合并缺失的新功能', async () => {
-    (storageUtil.get as any).mockImplementation((_key: string, defaultValue: unknown) =>
-      Promise.resolve(defaultValue),
-    );
+    mockStorageBatch();

    render(
      <RouterProvider visiblePagesKey="app/popupVisiblePages" pageOrderKey="app/popupPageOrder">
@@ -244,7 +295,6 @@ describe('RouterProvider', () => {
      .calls[0][0] as (changes: Record<string, { newValue?: unknown }>) => void;

    const oldVisiblePages = [
-      'dashboard',
      'timestamp',
      'storageCleaner',
      'qrCode',
@@ -272,7 +322,7 @@ describe('RouterProvider', () => {
      const visiblePages = screen.getByTestId('visible-pages').textContent!;
      const pageOrder = screen.getByTestId('page-order').textContent!;

-      expect(visiblePages.startsWith('dashboard,timestamp')).toBe(true);
+      expect(visiblePages.startsWith('timestamp,storageCleaner')).toBe(true);
      expect(pageOrder.startsWith('timestamp,storageCleaner')).toBe(true);
    });
  });
@@ -280,7 +330,7 @@ describe('RouterProvider', () => {
  it('localStorage 快照过期时，loadInitialData 完成前不应覆盖 chrome.storage', async () => {
    const staleRoute = 'timestamp';
    const correctRoute = 'jsonTools';
-    const defaultVisible = ['dashboard', 'timestamp', 'storageCleaner'];
+    const defaultVisible = ['timestamp', 'storageCleaner'];
    const defaultOrder = ['timestamp', 'storageCleaner'];

    localStorage.setItem('snapshot/app/currentRoute', JSON.stringify(staleRoute));
@@ -299,9 +349,9 @@ describe('RouterProvider', () => {
      resolveGet = resolve;
    });

-    (storageUtil.get as any).mockImplementation(async (key: string, defaultValue: unknown) => {
+    (storageUtil.getMany as ReturnType<typeof vi.fn>).mockImplementation(async () => {
      await getBlocked;
-      return storage.get(key) ?? defaultValue;
+      return Object.fromEntries(storage.entries());
    });
    (storageUtil.set as any).mockImplementation(async (key: string, value: unknown) => {
      storage.set(key, value);
@@ -324,7 +374,9 @@ describe('RouterProvider', () => {
  });

  it('初始化失败时仍应解除加载状态以便渲染页面', async () => {
-    (storageUtil.get as any).mockRejectedValue(new Error('Storage unavailable'));
+    (storageUtil.getMany as ReturnType<typeof vi.fn>).mockRejectedValue(
+      new Error('Storage unavailable'),
+    );

    render(
      <RouterProvider>
@@ -333,7 +385,7 @@ describe('RouterProvider', () => {
    );

    await waitFor(() => {
-      expect(screen.getByTestId('current-page')).toHaveTextContent('dashboard');
+      expect(screen.getByTestId('current-page')).toHaveTextContent('timestamp');
    });
    expect(storageUtil.set).not.toHaveBeenCalled();
  });
@@ -344,10 +396,9 @@ describe('RouterProvider', () => {
      resolveGet = resolve;
    });

-    (storageUtil.get as any).mockImplementation(async (key: string, defaultValue: unknown) => {
+    (storageUtil.getMany as ReturnType<typeof vi.fn>).mockImplementation(async () => {
      await getBlocked;
-      if (key === 'app/currentRoute') return 'dashboard';
-      return defaultValue;
+      return { 'app/currentRoute': 'jwt' };
    });

    render(
@@ -374,7 +425,7 @@ describe('RouterProvider', () => {
      resolveStorage = resolve;
    });

-    (storageUtil.get as any).mockImplementation(() => storagePromise);
+    (storageUtil.getMany as ReturnType<typeof vi.fn>).mockImplementation(() => storagePromise);

    const { unmount } = render(
      <RouterProvider>
@@ -383,7 +434,7 @@ describe('RouterProvider', () => {
    );

    unmount();
-    resolveStorage!('dashboard');
+    resolveStorage!({});

    await act(async () => {
      await new Promise((resolve) => setTimeout(resolve, 50));
@@ -46,6 +46,7 @@ describe('ThemeModeProvider', () => {
    expect(screen.getByTestId('mode')).toHaveTextContent('dark');
    expect(screen.getByTestId('resolved-mode')).toHaveTextContent('dark');
    expect(document.documentElement.classList.contains('dark')).toBe(true);
+    expect(storageUtil.get).not.toHaveBeenCalled();
  });

  it('异步恢复 storage 后应写回 snapshot', async () => {
@@ -0,0 +1,3 @@
+@config "../../tailwind.pages.config.js";
+
+@tailwind utilities;
@@ -1,3 +1,5 @@
+@config "../../tailwind.shell.config.js";
+
@tailwind base;
@tailwind components;
@tailwind utilities;
@@ -90,3 +92,87 @@
 ::-webkit-scrollbar {
  display: none;
 }
+
+@layer components {
+  .page-transition-enter {
+    @apply motion-reduce:transition-none;
+    animation: tt-page-enter 200ms ease-out;
+  }
+}
+
+@layer utilities {
+  .fade-in-150 {
+    animation: tt-fade-in 150ms ease-out forwards;
+  }
+
+  .fade-in-200 {
+    animation: tt-fade-in 200ms ease-out forwards;
+  }
+
+  .fade-in-300 {
+    animation: tt-fade-in 300ms ease-out forwards;
+  }
+
+  .fade-in-zoom-95 {
+    animation: tt-fade-in-zoom-95 150ms ease-out forwards;
+  }
+
+  .fade-in-slide-top-1 {
+    animation: tt-fade-in-slide-top-1 150ms ease-out forwards;
+  }
+
+  .fade-in-slide-top-2 {
+    animation: tt-fade-in-slide-top-2 150ms ease-out forwards;
+  }
+}
+
+@keyframes tt-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes tt-fade-in-zoom-95 {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes tt-fade-in-slide-top-1 {
+  from {
+    opacity: 0;
+    transform: translateY(-0.25rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes tt-fade-in-slide-top-2 {
+  from {
+    opacity: 0;
+    transform: translateY(-0.5rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes tt-page-enter {
+  from {
+    opacity: 0.92;
+  }
+  to {
+    opacity: 1;
+  }
+}
@@ -39,7 +39,9 @@
 - `FieldConfig` — 字段配置（字段名、生成器、参数、必填、空值率、唯一性）
 - `DataRule` — 可保存/导入/导出的字段规则
 - `GeneratorDefinition` / `GeneratorParam` — 内置生成器定义和参数 Schema
- `GenerateResult` / `GenerateProgress` / `WorkerMessage` — Worker 生成结果、进度和消息协议
+- `GenerateResult` / `GenerateProgress` — Worker 生成结果与进度
+- `WorkerRequestMessage` / `WorkerResponseMessage` — Worker 消息协议；每条响应携带 `generationId`，用于忽略过期任务（取消或快速重试时）
+- `WorkerMessage` — 已废弃，请使用上述两种消息类型
 - `ExportFile` — JSON/CSV 导出文件描述

 ## 修改 StorageSchema 的注意事项
@@ -0,0 +1,4 @@
+declare module '*.css' {
+  const css: string;
+  export default css;
+}
@@ -2,7 +2,6 @@
 * 应用页面类型定义
 */
 export type PageType =
-  | 'dashboard' // 仪表盘/首页
  | 'timestamp' // 时间戳转换工具
  | 'storageCleaner' // 存储清理工具
  | 'qrCode' // 二维码工具
@@ -66,14 +65,10 @@ export interface FormMapEntry {
 * 定义了所有持久化在客户端的数据结构
 */
 export interface StorageSchema {
-  /** RouterProvider 的默认路由键，仅当未显式传入 syncKey 时使用（popup/sidepanel/tab 入口已各自覆盖） */
+  /** RouterProvider 的默认路由键，仅当未显式传入 syncKey 时使用（popup 入口已覆盖） */
  'app/currentRoute': PageType;
  /** Popup 窗口的当前路由 */
  'app/popupRoute': PageType;
-  /** 侧边栏的当前路由 */
-  'app/sidepanelRoute': PageType;
-  /** 标签页的当前路由 */
-  'app/tabRoute': PageType;
  /** RouterProvider 的默认可见页面列表键，仅当未显式传入 visiblePagesKey 时使用 */
  'app/visiblePages': PageType[];
  /** RouterProvider 的默认页面排序键，仅当未显式传入 pageOrderKey 时使用 */
@@ -82,14 +77,6 @@ export interface StorageSchema {
  'app/popupVisiblePages': PageType[];
  /** Popup 窗口页面的显示顺序 */
  'app/popupPageOrder': PageType[];
-  /** 侧边栏可见的页面列表 */
-  'app/sidepanelVisiblePages': PageType[];
-  /** 侧边栏页面的显示顺序 */
-  'app/sidepanelPageOrder': PageType[];
-  /** 标签页可见的页面列表 */
-  'app/tabVisiblePages': PageType[];
-  /** 标签页页面的显示顺序 */
-  'app/tabPageOrder': PageType[];
  /** 应用主题配置 */
  'app/theme': string;
  /** 主题模式偏好（light/dark/system） */
@@ -24,7 +24,7 @@
 | `textStatistics.ts`      | 文本统计：使用 `Intl.Segmenter` 计算字符数/单词数/行数/字节大小                                     |
 | `format.ts`              | 通用格式化：`formatBytes` 将字节转为可读字符串（B/KB/MB/GB/TB）                                     |
 | `dayjs.ts`               | Day.js 初始化：扩展 UTC、Timezone、RelativeTime 插件，加载中文本地化                                |
-| `ruleStorage.ts`         | 测试数据生成器规则存储：基于 `localStorage` 的 CRUD、搜索、导入/导出和数量限制                      |
+| `ruleStorage.ts`         | 测试数据生成器规则存储：基于 `localStorage` 的 CRUD、搜索、导入/导出和数量限制（见下方说明）        |
 | `dataExporter.ts`        | 测试数据导出：JSON/CSV 转换、文件下载和复制到剪贴板                                                 |
 | `rightClickInjection.ts` | 右键恢复注入脚本：在页面上下文恢复 contextmenu/copy/paste 等事件默认行为                            |

@@ -36,6 +36,23 @@
 | `useContextMenuData.ts` | 右键菜单数据 Hook：从 storage 读取待处理数据，匹配 featureKey 后消费并触发回调                                 |
 | `useDebounce.ts`        | 防抖 Hook：对值进行延迟更新，避免频繁触发                                                                      |

+### ruleStorage 写入失败处理
+
+`ruleStorage.ts` 使用函数式导出（非 class），存储键为 `testDataGenerator_rules`，最多 `MAX_RULES = 20` 条。
+
+写入经内部 `setAll()` 完成；`localStorage.setItem` 抛错（如配额超限）时返回 `false`，并 `console.error`，**不会部分提交**：
+
+| 方法 | 写入失败返回值 | 常见失败原因 |
+| ---- | -------------- | ------------ |
+| `save()` | `null` | 达上限、规则不存在（更新时）、`setItem` 异常 |
+| `update()` | `null` | 规则不存在、`setItem` 异常 |
+| `deleteRule()` | `false` | 规则不存在、`setItem` 异常 |
+| `duplicate()` | 仍可能返回对象但数据未持久化 | 见源码：`duplicate` 未检查 `setAll` 返回值（已知缺口） |
+
+调用方应检查返回值后再展示成功 Toast。页面层参考 `FieldList.tsx`：`save`/`update` 返回非空才提示「规则已保存/已更新」。
+
+规则仅持久化 `name`、`description`、`fields` 及时间戳/使用统计；生成数量与导出格式由页面状态管理，不写入规则。
+
 ### useStorageState 初始化防覆盖

 `useStorageState` 在挂载时从 storage 异步加载。写入 storage 需满足以下任一条件：
@@ -37,7 +37,7 @@ describe('chromeStorage', () => {
    });

    it('应该支持数组类型值', async () => {
-      const pages = ['dashboard', 'timestamp'] as const;
+      const pages = ['timestamp', 'jwt'] as const;
      (chrome.storage.local.get as any).mockResolvedValue({ 'app/visiblePages': pages });

      const result = await storageUtil.get('app/visiblePages');
@@ -75,6 +75,27 @@ describe('chromeStorage', () => {
    });
  });

+  describe('getMany', () => {
+    it('应该一次读取多个键', async () => {
+      (chrome.storage.local.get as any).mockResolvedValue({
+        'app/theme': 'dark',
+        'app/popupRoute': 'timestamp',
+      });
+
+      const result = await storageUtil.getMany(['app/theme', 'app/popupRoute']);
+
+      expect(result).toEqual({ 'app/theme': 'dark', 'app/popupRoute': 'timestamp' });
+      expect(chrome.storage.local.get).toHaveBeenCalledWith(['app/theme', 'app/popupRoute']);
+    });
+
+    it('空键数组应直接返回空对象', async () => {
+      const result = await storageUtil.getMany([]);
+
+      expect(result).toEqual({});
+      expect(chrome.storage.local.get).not.toHaveBeenCalled();
+    });
+  });
+
  describe('get 类型签名', () => {
    it('无默认值时应推断为可选返回类型', () => {
      const _getWithoutDefault = () => storageUtil.get('app/theme');
@@ -105,7 +126,7 @@ describe('chromeStorage', () => {
    });

    it('应该成功设置数组值', async () => {
-      const pages: Array<'dashboard' | 'timestamp'> = ['dashboard', 'timestamp'];
+      const pages: Array<'timestamp' | 'jwt'> = ['timestamp', 'jwt'];
      await storageUtil.set('app/visiblePages', pages);

      expect(chrome.storage.local.set).toHaveBeenCalledWith({ 'app/visiblePages': pages });
@@ -1,25 +0,0 @@
-import { describe, expect, it, vi } from 'vitest';
-import { openExtensionPage } from '@/utils/chromeTabs';
-
-describe('chromeTabs', () => {
-  describe('openExtensionPage', () => {
-    it('应该在新标签页中打开扩展页面', async () => {
-      await openExtensionPage('popup.html');
-
-      expect(chrome.runtime.getURL).toHaveBeenCalledWith('popup.html');
-      expect(chrome.tabs.create).toHaveBeenCalledWith({
-        url: 'chrome-extension://test-extension-id/popup.html',
-      });
-    });
-
-    it('当创建标签页失败时应记录错误', async () => {
-      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
-      (chrome.tabs.create as any).mockRejectedValue(new Error('Tab creation failed'));
-
-      await openExtensionPage('popup.html');
-
-      expect(consoleSpy).toHaveBeenCalledWith('打开扩展页面失败:', expect.any(Error));
-      consoleSpy.mockRestore();
-    });
-  });
-});
@@ -44,18 +44,21 @@ describe('messages', () => {
      );
    });

-    it('应该支持不带数据的消息发送', async () => {
+    it('应该支持带数据的消息发送', async () => {
      const mockSendMessage = await getMockSendMessage();
      mockSendMessage.mockResolvedValue(undefined);

      const mockTab = { id: 456, url: 'https://example.com' };
      (chrome.tabs.query as any).mockResolvedValue([mockTab]);

-      await sendMessageToContent(MessageAction.SIDE_PANEL_STATE_CHANGED, { isOpen: true });
+      await sendMessageToContent(MessageAction.CONTEXT_MENU_CLICKED, {
+        featureKey: 'timestamp',
+        payload: '1234567890',
+      });

      expect(mockSendMessage).toHaveBeenCalledWith(
-        MessageAction.SIDE_PANEL_STATE_CHANGED,
-        { isOpen: true },
+        MessageAction.CONTEXT_MENU_CLICKED,
+        { featureKey: 'timestamp', payload: '1234567890' },
        456,
      );
    });
@@ -48,6 +48,27 @@ describe('ruleStorage', () => {
    expect(updated).toBeNull();
  });

+  it('save 带 id 时应更新已有规则而非新建', () => {
+    const first = ruleStorage.save({
+      name: 'Test Rule',
+      fields: [mockField],
+    });
+    expect(first).not.toBeNull();
+
+    const updatedField = { ...mockField, name: 'email' };
+    const updated = ruleStorage.save({
+      id: first!.id,
+      name: 'Test Rule',
+      description: 'Updated',
+      fields: [updatedField],
+    });
+
+    expect(updated).not.toBeNull();
+    expect(ruleStorage.getCount()).toBe(1);
+    expect(ruleStorage.getById(first!.id)?.fields[0].name).toBe('email');
+    expect(ruleStorage.getById(first!.id)?.description).toBe('Updated');
+  });
+
  it('deleteRule 在 localStorage 写入失败时应返回 false', () => {
    const saved = ruleStorage.save({
      name: 'Test Rule',
@@ -40,6 +40,7 @@ describe('useStorageState', () => {

    // 初始值应从快照恢复，而非默认值
    expect(result.current[0]).toBe(false);
+    expect(storageUtil.get).not.toHaveBeenCalled();
  });

  it('应该从 Chrome Storage 异步加载并覆盖初始值', async () => {
@@ -179,5 +180,6 @@ describe('useStorageState', () => {
    await waitFor(() => {
      expect(storageUtil.set).not.toHaveBeenCalled();
    });
+    expect(storageUtil.get).not.toHaveBeenCalled();
  });
 });
@@ -18,13 +18,26 @@ class StorageUtils {
    key: K,
    defaultValue?: StorageSchema[K],
  ): Promise<StorageSchema[K] | undefined> {
-    const result = await chrome.storage.local.get([key]);
+    const result = await this.getMany([key]);
    if (defaultValue !== undefined) {
      return (result[key] ?? defaultValue) as StorageSchema[K];
    }
    return result[key] as StorageSchema[K] | undefined;
  }

+  /**
+   * 批量获取多个键（单次 IPC）
+   */
+  async getMany<K extends keyof StorageSchema>(
+    keys: readonly K[],
+  ): Promise<Partial<Pick<StorageSchema, K>>> {
+    if (keys.length === 0) {
+      return {};
+    }
+    const result = await chrome.storage.local.get([...keys]);
+    return result as Partial<Pick<StorageSchema, K>>;
+  }
+
  /**
   * 设置值
   * @param key
@@ -1,23 +0,0 @@
-/**
- * Chrome 标签页相关工具函数
- */
-
-/**
- * 在新标签页中打开扩展页面
- * @param page - 扩展页面路径（如 'popup.html'）
- * @param params - 可选的查询参数
- */
-export async function openExtensionPage(
-  page: string,
-  params?: Record<string, string>,
-): Promise<void> {
-  try {
-    const url = new URL(chrome.runtime.getURL(page));
-    if (params) {
-      Object.entries(params).forEach(([key, value]) => url.searchParams.set(key, value));
-    }
-    await chrome.tabs.create({ url: url.toString() });
-  } catch (error) {
-    console.error('打开扩展页面失败:', error);
-  }
-}
@@ -1,7 +1,6 @@
 import { defineExtensionMessaging } from '@webext-core/messaging';

 export enum MessageAction {
-  SIDE_PANEL_STATE_CHANGED = 'sidePanelStateChanged',
  CONTEXT_MENU_CLICKED = 'contextMenuClicked',
  RESTORE_RIGHT_CLICK = 'restoreRightClick',
  QUERY_RIGHT_CLICK_STATUS = 'queryRightClickStatus',
@@ -20,7 +19,6 @@ export interface ContextMenuClickedPayload {
 }

 export interface ProtocolMap {
-  [MessageAction.SIDE_PANEL_STATE_CHANGED](data: { isOpen: boolean }): void;
  [MessageAction.CONTEXT_MENU_CLICKED](data: ContextMenuClickedPayload): void;
  [MessageAction.RESTORE_RIGHT_CLICK](data: undefined): MessageResponse & { restored: boolean };
  [MessageAction.QUERY_RIGHT_CLICK_STATUS](
@@ -1,3 +1,14 @@
+/**
+ * 检查 localStorage 中是否存在指定键的快照
+ */
+export function hasSyncSnapshot(key: string): boolean {
+  try {
+    return localStorage.getItem(`snapshot/${key}`) !== null;
+  } catch {
+    return false;
+  }
+}
+
 /**
 * 从 localStorage 获取同步快照（用于消除异步加载产生的首屏闪烁）
 */
@@ -9,6 +9,15 @@ const VALID_MODES: ThemeMode[] = ['light', 'dark', 'system'];
 export const isValidThemeMode = (value: unknown): value is ThemeMode =>
  VALID_MODES.includes(value as ThemeMode);

+/** 检查 localStorage 中是否存在主题快照 */
+export const hasThemeSyncSnapshot = (): boolean => {
+  try {
+    return localStorage.getItem(THEME_MODE_SNAPSHOT_KEY) !== null;
+  } catch {
+    return false;
+  }
+};
+
 /**
 * 同步读取 localStorage 快照（首屏防闪烁）
 */
@@ -7,7 +7,7 @@ import {
  type SetStateAction,
 } from 'react';
 import { storageUtil } from '@/utils/chromeStorage';
-import { getSyncSnapshot } from '@/utils/syncSnapshot';
+import { getSyncSnapshot, hasSyncSnapshot } from '@/utils/syncSnapshot';
 import type { StorageSchema } from '@/types/storage';

 export const useStorageState = <K extends keyof StorageSchema>(
@@ -34,6 +34,14 @@ export const useStorageState = <K extends keyof StorageSchema>(
    let cancelled = false;

    const loadState = async () => {
+      if (hasSyncSnapshot(key as string)) {
+        if (!cancelled) {
+          setIsInitialized(true);
+          hasLoadedFromStorage.current = true;
+        }
+        return;
+      }
+
      try {
        const savedValue = await storageUtil.get(key, defaultValue);
        if (cancelled) return;
@@ -14,10 +14,14 @@ import type {
 /** 每生成 N 行让出一次事件循环，以便处理 cancel 消息 */
 const YIELD_EVERY = 100;

-// 生成结果缓存
-let generatedData: Record<string, unknown>[] = [];
+/** 当前活跃生成任务 ID；新 start 会 supersede 旧任务 */
+let activeGenerationId: number | null = null;
 let isCancelled = false;

+function shouldAbort(generationId: number): boolean {
+  return isCancelled || generationId !== activeGenerationId;
+}
+
 /**
 * Worker 消息处理器
 */
@@ -27,12 +31,17 @@ self.onmessage = async (e: MessageEvent<WorkerRequestMessage>) => {

  switch (type) {
    case 'start':
+      activeGenerationId = data.payload.generationId;
      isCancelled = false;
      await handleStart(data.payload);
      break;
    case 'cancel':
      isCancelled = true;
      break;
+    default: {
+      const _exhaustive: never = type;
+      return _exhaustive;
+    }
  }
 };

@@ -46,7 +55,7 @@ async function handleStart(payload: {
  csvMode: boolean;
 }): Promise<void> {
  const { generationId, fields, count } = payload;
-  generatedData = [];
+  const generatedData: Record<string, unknown>[] = [];

  try {
    // 验证所有生成器是否存在
@@ -67,7 +76,8 @@ async function handleStart(payload: {

    // 生成数据
    for (let i = 0; i < count; i++) {
-      if (isCancelled) {
+      if (shouldAbort(generationId)) {
+        if (generationId === activeGenerationId) {
          self.postMessage({
            type: 'complete',
            generationId,
@@ -76,6 +86,7 @@ async function handleStart(payload: {
              error: '生成已取消',
            },
          });
+        }
        return;
      }

@@ -148,7 +159,8 @@ async function handleStart(payload: {
      // 定期让出事件循环，使 cancel 消息能被处理
      if ((i + 1) % YIELD_EVERY === 0) {
        await new Promise<void>((resolve) => setTimeout(resolve, 0));
-        if (isCancelled) {
+        if (shouldAbort(generationId)) {
+          if (generationId === activeGenerationId) {
            self.postMessage({
              type: 'complete',
              generationId,
@@ -157,11 +169,16 @@ async function handleStart(payload: {
                error: '生成已取消',
              },
            });
+          }
          return;
        }
      }
    }

+    if (shouldAbort(generationId)) {
+      return;
+    }
+
    const duration = Date.now() - startTime;
    const successCount = generatedData.filter((item) => Object.keys(item).length > 0).length;

@@ -1,34 +1 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  darkMode: 'class',
-  content: ['./entrypoints/**/*.{js,ts,jsx,tsx}', './src/**/*.{js,ts,jsx,tsx}'],
-  theme: {
-    extend: {
-      colors: {
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
-        card: 'hsl(var(--card))',
-        'card-foreground': 'hsl(var(--card-foreground))',
-        popover: 'hsl(var(--popover))',
-        'popover-foreground': 'hsl(var(--popover-foreground))',
-        primary: 'hsl(var(--primary))',
-        'primary-foreground': 'hsl(var(--primary-foreground))',
-        secondary: 'hsl(var(--secondary))',
-        'secondary-foreground': 'hsl(var(--secondary-foreground))',
-        muted: 'hsl(var(--muted))',
-        'muted-foreground': 'hsl(var(--muted-foreground))',
-        accent: 'hsl(var(--accent))',
-        'accent-foreground': 'hsl(var(--accent-foreground))',
-        destructive: 'hsl(var(--destructive))',
-        'destructive-foreground': 'hsl(var(--destructive-foreground))',
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-      },
-      borderRadius: {
-        DEFAULT: 'var(--radius)',
-      },
-    },
-  },
-  plugins: [],
-};
+export { default } from './tailwind.shell.config.js';
@@ -0,0 +1,22 @@
+import { sharedTheme } from './tailwind.shared.js';
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: 'class',
+  content: [
+    './src/pages/**/*.{js,ts,jsx,tsx}',
+    './src/components/CopyButton.tsx',
+    './src/components/TextInputArea.tsx',
+    './src/components/SwitchButtonGroup.tsx',
+    './src/components/EmptyPlaceholder.tsx',
+    './src/components/ui/badge.tsx',
+    './src/components/ui/checkbox.tsx',
+    './src/components/ui/dialog.tsx',
+    './src/components/ui/label.tsx',
+    './src/components/ui/select.tsx',
+    './src/components/ui/switch.tsx',
+    './src/styles/pages.css',
+  ],
+  theme: sharedTheme,
+  plugins: [],
+};
@@ -0,0 +1,29 @@
+/** @type {import('tailwindcss').Config['theme']} */
+export const sharedTheme = {
+  extend: {
+    colors: {
+      background: 'hsl(var(--background))',
+      foreground: 'hsl(var(--foreground))',
+      card: 'hsl(var(--card))',
+      'card-foreground': 'hsl(var(--card-foreground))',
+      popover: 'hsl(var(--popover))',
+      'popover-foreground': 'hsl(var(--popover-foreground))',
+      primary: 'hsl(var(--primary))',
+      'primary-foreground': 'hsl(var(--primary-foreground))',
+      secondary: 'hsl(var(--secondary))',
+      'secondary-foreground': 'hsl(var(--secondary-foreground))',
+      muted: 'hsl(var(--muted))',
+      'muted-foreground': 'hsl(var(--muted-foreground))',
+      accent: 'hsl(var(--accent))',
+      'accent-foreground': 'hsl(var(--accent-foreground))',
+      destructive: 'hsl(var(--destructive))',
+      'destructive-foreground': 'hsl(var(--destructive-foreground))',
+      border: 'hsl(var(--border))',
+      input: 'hsl(var(--input))',
+      ring: 'hsl(var(--ring))',
+    },
+    borderRadius: {
+      DEFAULT: 'var(--radius)',
+    },
+  },
+};
@@ -0,0 +1,22 @@
+import { sharedTheme } from './tailwind.shared.js';
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: 'class',
+  content: [
+    './src/entrypoints/**/*.{js,ts,jsx,tsx}',
+    './src/layout/**/*.{js,ts,jsx,tsx}',
+    './src/providers/**/*.{js,ts,jsx,tsx}',
+    './src/components/RouterContainer.tsx',
+    './src/components/ErrorBoundary.tsx',
+    './src/components/ErrorFallback.tsx',
+    './src/components/PageErrorBoundary.tsx',
+    './src/components/PageSkeleton.tsx',
+    './src/components/ui/button.tsx',
+    './src/components/ui/input.tsx',
+    './src/components/ui/sonner.tsx',
+    './src/styles/shell.css',
+  ],
+  theme: sharedTheme,
+  plugins: [],
+};
@@ -22,14 +22,10 @@ function manualChunksForHtmlOnly(): Plugin {
          ) {
            return 'vendor-react';
          }
-          // 二维码活态感知依赖分流
-          if (id.includes('qr-scanner') || id.includes('qrious')) {
-            return 'vendor-qr';
-          }
-          // 拖拽排序高级组件分流
-          if (id.includes('@dnd-kit')) {
-            return 'vendor-dnd';
-          }
+
+          // qrious / qr-scanner / @dnd-kit 不单独拆 vendor chunk：
+          // 独立 vendor 会与 Vite preload 辅助函数共 chunk，被 App Shell 静态拉取。
+          // 这些依赖随各自页面 async chunk 加载即可。

          return undefined;
        },
@@ -45,15 +41,7 @@ export default defineConfig({
    name: 'Testing Tool',
    description: 'A tool for testing web applications.',
    version_name: undefined,
-    permissions: [
-      'storage',
-      'clipboardWrite',
-      'scripting',
-      'tabs',
-      'cookies',
-      'sidePanel',
-      'contextMenus',
-    ],
+    permissions: ['storage', 'clipboardWrite', 'scripting', 'tabs', 'cookies', 'contextMenus'],
    host_permissions: ['<all_urls>'],
    icons: {
      '16': 'icon/16.png',
@@ -70,13 +58,11 @@ export default defineConfig({
        '48': 'icon/48.png',
      },
    },
-    side_panel: {
-      default_path: 'entrypoints/sidepanel/index.html',
-    },
  },
  vite: () => ({
    plugins: [manualChunksForHtmlOnly()],
    build: {
+      modulePreload: false,
      minify: 'terser',
      terserOptions: {
        format: { ascii_only: true, comments: false },
Author	SHA1	Message	Date
rsgltzyd	43038c5edb	refactor: 更新 RouterProvider 以过滤非法页面并合并配置	2026-07-05 22:20:04 +08:00
rsgltzyd	9aa7a51f0b	refactor: 移除 Dashboard 页面及相关功能，更新路由和组件逻辑 - 移除 Dashboard 相关的组件、特性和测试代码，简化项目结构。 - 更新 PageSkeleton 组件，默认渲染工具页面骨架。 - 修改 RouterContainer 和 RouterProvider 以适应新的默认路由策略，确保用户直接访问 timestamp 页面。 - 更新测试用例，确保在新结构下的功能正常。	2026-07-05 22:02:25 +08:00
rsgltzyd	d21e970f56	feat: 重构 Popup 布局，移除 Dashboard 页面并引入功能导航 - 更新 README.md，添加 Popup 功能导航文档链接。 - 新建 feature-nav-layout.md，详细描述 Popup 布局重构的背景、目标及设计。 - 移除 Dashboard 相关代码，更新 RouterProvider 和 TopBar 以适应新布局。 - 修改默认路由策略，确保新用户直接访问 timestamp 页面。	2026-07-05 21:55:22 +08:00
rsgltzyd	6589ea3858	refactor: 移除侧边栏相关功能和代码	2026-07-05 21:47:35 +08:00
rsgltzyd	6be9b31ca2	docs: 将spec目录移动到docs目录中	2026-07-05 21:34:41 +08:00
rsgltzyd	6975e38f79	refactor: 重构 Tailwind 配置以支持模块化和共享主题 - 更新 components.json，修改 CSS 文件路径为 src/styles/shell.css。 - 移除 tailwind.config.js 中的冗余配置，改为导入 tailwind.shell.config.js。 - 新增 tailwind.pages.config.js 和 tailwind.shared.js，集中管理主题和样式配置。 - 更新多个组件以使用新的样式类和配置，提升代码一致性和可维护性。	2026-06-30 23:15:35 +08:00
rsgltzyd	17a4dbd8a7	refactor: 优化 RouterProvider 组件的数据加载逻辑 - 使用批量获取方法 `getMany` 替代多个单独的 `get` 调用，简化数据加载过程。 - 更新 `loadInitialData` 函数，确保从存储中获取的默认值更为一致。 - 修改测试用例以验证批量获取的功能，确保组件在不同情况下的正确性。	2026-06-30 22:56:31 +08:00
rsgltzyd	27e03ae038	refactor: 移除 RouterContainer 组件中的 isLoaded 状态检查 - 简化 RouterContainer 组件逻辑，直接渲染页面内容，无需等待加载状态。 - 更新测试用例，确保在组件挂载后直接渲染页面结构。	2026-06-30 22:51:38 +08:00
rsgltzyd	c7f4305fc3	refactor: 重构 RouterContainer 组件以支持懒加载页面模块 - 移除不必要的 Suspense 组件，改为使用 LoadedPage 组件进行懒加载。 - 更新特性获取逻辑，使用 getFeatureByKey 函数替代直接查找。 - 新增 featureMeta.ts 文件，集中管理功能配置和相关方法。 - 实现 pageLoaders 以支持按需加载页面模块，提升性能和用户体验。	2026-06-30 22:45:32 +08:00
rsgltzyd	d18ae5d41c	refactor: 移除 twMerge 以简化 cn() 函数实现	2026-06-30 22:00:08 +08:00
rsgltzyd	47e08f80b3	refactor: 统一功能组件结构，简化特性配置	2026-06-30 21:18:28 +08:00
rsgltzyd	ece5c6135e	fix: 更新中文提示信息格式以提升可读性在多个组件中移除模板字符串，直接使用普通字符串格式化中文提示信息，增强了代码的可读性和一致性。	2026-06-30 21:06:39 +08:00
rsgltzyd	d0825c5ec0	refactor: 移除无意义的 cn() 包装对仅含静态类名或单一三元表达式的 className 改用普通字符串，保留有条件合并或 prop 覆盖场景下的 cn() 用法。 Co-authored-by: Cursor <cursoragent@cursor.com>	2026-06-30 21:05:10 +08:00
Cursor Agent	149883565d	docs: 同步测试数据生成器 Worker 任务 ID 与 ruleStorage 写入失败说明 Co-authored-by: LingandRX <LingandRX@users.noreply.github.com>	2026-06-30 20:43:38 +08:00
Cursor Agent	ff3c66531c	fix(测试数据生成器): 修复规则覆盖保存误创建重复规则覆盖同名规则时 handleSave(true) 未传入已有规则 id，save() 走新建分支导致旧规则保留且产生同名重复项，getByName 仍返回旧数据。	2026-06-30 20:43:33 +08:00
Cursor Agent	4084dafc29	fix(测试数据生成器): 修复 Worker 并发生成导致的数据污染 Co-authored-by: LingandRX <LingandRX@users.noreply.github.com>	2026-06-30 20:43:26 +08:00
Cursor Agent	647e3dd308	fix(StorageCleaner): 同一标签页 URL 变更时阻止误清理 handleClean 原先仅校验 tab id，未校验 url。用户在页面内导航后、存储信息刷新完成前确认清理，会按旧页面展示的数据清理新页面存储。	2026-06-30 20:40:57 +08:00