重构导航逻辑，去除dashboard页面相关功能，增加侧边栏导航功能

* feat: 生成成功改为 toast 提示
* refactor: 数据预览改为显示示例数据，简化组件逻辑
* fix: 非必填字段预览显示 null
* fix: 修复空值率与必填状态的逻辑
* fix: 切换为非必填时默认空值率 100%
* feat: 字段编辑弹窗添加「完成」按钮 去除关闭按钮，添加取消按钮
* refactor: 删除未使用的 defaultNullRate 功能
* feat: 优化规则管理功能
* fix: 更新 features 测试断言以匹配新增的 testDataGenerator
* refactor: 将 formatFileSize 重命名为 formatBytes 并移至通用工具模块
* refactor: 使用 Label 组件替换原生 label 元素，并在 DecodeResultPaper 中引入 Input 组件
* refactor: 规范化页面组件目录结构
* refactor(JsonTools): 规范化页面组件目录结构
* refactor(StorageCleaner): 规范化页面组件目录结构
* refactor(Timestamp): 规范化页面组件目录结构
* refactor(i18n): 移除 chrome.i18n 国际化，统一使用中文硬编码
* refactor(AppRoot): 移除 RouterProvider 组件，直接渲染子组件
* fix(RouterProvider): 将 goBack 重命名为 goHome，修复跨窗同步 merge 不一致
* fix(ThemeModeProvider): 修复主题快照同步与首屏闪烁问题
* refactor: 将 UI 文案改为中文并优化相关逻辑
* refactor: 清理代码注释并优化组件结构
* feat(Dashboard): 重构仪表板功能组件和逻辑
* refactor: 更新功能键名称并移除 README 文件
* refactor: 重构 TopBar 组件并更新项目结构
* feat(TopBar): 添加搜索功能组件并优化结构
* refactor: 统一使用 Button 组件替换原有 button 元素
* feat: 添加 EmptyPlaceholder 组件并更新相关页面
* feat(TextStatistics): 引入 StatCard 组件以优化统计信息展示
* feat(Timestamp): 重构时间戳转换功能，新增 ConverterForm 组件
* feat(Jwt): 重构 JWT 组件，新增常量和结果视图
* refactor(RightClickRestorer): 用状态配置表简化页面 UI 结构
* fix(business): 修复 skewedRandom 函数中的数学计算错误
* refactor(ImageUploader): 移除预览 URL 相关逻辑并简化粘贴事件处理
* feat(TestDataGenerator): 更新规则编辑提示和警告显示逻辑
* refactor(CopyButton.test): 移除冗余测试用例
* refactor(RouterProvider, chromeStorage, useContextMenuData): 更新存储获取逻辑以移除默认值参数
* refactor(代码重复): 抽取共享工具函数与 UI 组件，消除多处重复实现
* fix(RouterProvider): 修复初始加载状态逻辑，确保在加载前不覆盖 chrome.storage
* feat(TopBar): 添加搜索框快捷键提示功能及相关测试
* refactor(StorageCleaner): 移动 isRestrictedUrl 函数到独立模块并更新相关引用
* fix(StorageCleaner): 修复 IndexedDB 清理竞态、部分成功计数与刷新后状态同步
* fix: 修复路由初始化竞态、存储状态静默覆盖与存储清理误删
* refactor: 统一中文文案并简化组件结构，提升代码可读性
* refactor: 更新 Worker 消息类型以支持生成任务 ID
* fix: 修复 ruleStorage 写入失败处理与 CopyButton 成功态样式

.github/CODING_STANDARDS.md

@@ -669,7 +669,7 @@ src/pages/StorageCleaner/useStorageCleaner.ts  — 页面级 Hook
 
 ### 9.1 功能元数据
 
-功能名称与描述在 `config/features.tsx` 的 `FEATURES` 数组中定义：
+功能名称与描述在 `config/featureMeta.ts` 的 `FEATURES` 数组中定义：
 
 ```typescript
 {
@@ -677,10 +677,11 @@ src/pages/StorageCleaner/useStorageCleaner.ts  — 页面级 Hook
   label: '时间戳转换',
   description: '日期与时间戳互转',
   defaultVisible: true,
-  component: TimestampPage,
 }
 ```
 
+页面组件通过 `config/pageLoaders/` 按需加载，不在 `FEATURES` 中引用。
+
 Dashboard 卡片、TopBar 搜索等功能从此处读取 `label` / `description`。
 
 ### 9.2 页面与组件文案

docs/test-data-generator/rule-management.md

@@ -383,7 +383,7 @@ function loadRule(ruleId: string): void {
 使用 `localStorage`，键名 `testDataGenerator_rules`。API 为**命名导出函数**（见 `src/utils/ruleStorage.ts`）：
 
 | 函数                                                   | 说明                               |
-| ---- | ---- |
+| ------------------------------------------------------ | ---------------------------------- |
 | `getAll()` / `getById()` / `getByName()`               | 读取                               |
 | `save()` / `update()` / `deleteRule()` / `duplicate()` | 写入；失败时返回 `null` 或 `false` |
 | `recordUse()`                                          | 递增 `useCount`、更新 `lastUsedAt` |

docs/test-data-generator/technical-implementation.md

@@ -1505,9 +1505,7 @@ export class DataExporter {
 ```typescript
 // src/types/testDataGenerator.ts
 
-type WorkerRequestMessage =
-  | { type: 'start'; payload: WorkerStartPayload }
-  | { type: 'cancel' };
+type WorkerRequestMessage = { type: 'start'; payload: WorkerStartPayload } | { type: 'cancel' };
 
 type WorkerResponseMessage =
   | { type: 'progress'; generationId: number; payload: GenerateProgress }

src/components/PageSkeleton.tsx

@@ -0,0 +1,41 @@
+/**
+ * PageSkeleton 组件 - 页面加载骨架屏
+ *
+ * 用于 Suspense fallback 和初始加载状态，提供平滑的视觉过渡
+ * 避免白屏闪烁，减少布局偏移
+ */
+
+/**
+ * 工具页面骨架屏
+ */
+function ToolPageSkeleton() {
+  return (
+    <div className="p-5">
+      {/* 标题区域 */}
+      <div className="w-44 h-7 bg-muted rounded animate-pulse mb-4" />
+
+      {/* 输入区域 */}
+      <div className="w-full h-[120px] bg-muted rounded-xl animate-pulse mb-4" />
+
+      {/* 控制栏 */}
+      <div className="flex gap-2 mb-4">
+        <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-24 h-9 bg-muted rounded-lg animate-pulse" />
+      </div>
+
+      {/* 结果区域 */}
+      <div className="w-full h-[160px] bg-muted rounded-xl animate-pulse" />
+    </div>
+  );
+}
+
+/**
+ * 页面加载骨架屏
+ */
+export default function PageSkeleton() {
+  return <ToolPageSkeleton />;
+}
+
+PageSkeleton.displayName = 'PageSkeleton';

src/components/README.md

@@ -6,7 +6,7 @@
 
 | 组件                    | 用途                                                                                                   |
 | ----------------------- | ------------------------------------------------------------------------------------------------------ |
-| `RouterContainer.tsx`   | 路由容器，根据当前路由动态渲染对应页面组件，集成错误边界                                               |
+| `RouterContainer.tsx`   | 路由容器，根据当前路由动态渲染对应页面组件，集成错误边界和骨架屏                                       |
 | `SwitchButtonGroup.tsx` | 通用切换按钮组，支持 `small/medium/large` 三种尺寸，用于页面子模式切换                                 |
 | `EmptyPlaceholder.tsx`  | 虚线边框空状态占位，统一工具页「暂无结果」提示样式                                                     |
 | `TextInputArea.tsx`     | 增强文本输入区域，支持校验规则、工具栏操作、字符计数、清空                                             |
@@ -17,6 +17,7 @@
 | `GlobalSnackbar.tsx`    | 全局消息提示组件 + Context Provider，支持受控/Hook/全局单例三种使用方式                                |
 | `ErrorBoundary.tsx`     | 全局错误边界（类组件），捕获子组件树 JS 错误并展示友好错误页面                                         |
 | `PageErrorBoundary.tsx` | 页面级错误边界，适配 shadcn 暗黑模式，支持 `resetKey` 自动恢复                                         |
+| `PageSkeleton.tsx`      | 页面骨架屏，提供 `dashboard` 和 `tool` 两种变体，用于 Suspense fallback                                |
 
 ## 使用约定
 

src/components/RouterContainer.tsx

@@ -4,6 +4,7 @@ import { useRouter } from '@/providers/RouterProvider';
 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';
 
@@ -29,7 +30,7 @@ function LoadedPage({ pageKey }: { pageKey: PageType }) {
   }, [pageKey]);
 
   if (!Page) {
-    return <div className="flex-1" aria-hidden="true" />;
+    return <PageSkeleton />;
   }
 
   return <Page />;

src/components/__tests__/PageSkeleton.test.tsx

@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'vitest';
+import { render } from '@testing-library/react';
+import PageSkeleton from '@/components/PageSkeleton';
+
+describe('PageSkeleton 组件', () => {
+  describe('渲染测试', () => {
+    it('应渲染工具页面骨架', () => {
+      const { container } = render(<PageSkeleton />);
+
+      const skeletons = container.querySelectorAll('.animate-pulse');
+      expect(skeletons.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('布局结构测试', () => {
+    it('工具骨架屏应有内边距', () => {
+      const { container } = render(<PageSkeleton />);
+      const toolContainer = container.firstChild as HTMLElement;
+
+      expect(toolContainer).toHaveClass('p-5');
+    });
+  });
+
+  describe('骨架屏元素测试', () => {
+    it('工具骨架屏应包含动画脉冲效果', () => {
+      const { container } = render(<PageSkeleton />);
+
+      const skeletons = container.querySelectorAll('.animate-pulse');
+      expect(skeletons.length).toBeGreaterThan(0);
+    });
+  });
+});

src/lib/utils.ts

@@ -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);
 }

src/pages/Timestamp/components/ConverterForm.tsx

@@ -41,7 +41,10 @@ export default function ConverterForm({
           placeholder={INPUT_PLACEHOLDERS[mode]}
           value={input}
           onChange={(e) => setInput(e.target.value)}
-          className={cn('h-10', error && 'border-destructive')}
+          className={cn(
+            'font-mono font-semibold h-10 shadow-sm placeholder:text-muted-foreground/60 focus:bg-background',
+            error && 'border-destructive focus-visible:ring-destructive',
+          )}
         />
 
         {error && <p className="text-destructive text-xs font-medium px-0.5">{error}</p>}
@@ -57,13 +60,16 @@ export default function ConverterForm({
         />
 
         <Select value={zone} onValueChange={(v: string) => setZone(v as ZoneType)}>
-          <SelectTrigger>
+          <SelectTrigger className="flex-1 font-mono font-semibold h-9 shadow-sm bg-background">
             <SelectValue placeholder="选择时区" />
           </SelectTrigger>
-
-          <SelectContent className="max-h-64">
+          <SelectContent className="max-h-64 font-mono">
             {ZONES.map((z) => (
-              <SelectItem key={z} value={z} className="cursor-pointer">
+              <SelectItem
+                key={z}
+                value={z}
+                className="text-xs font-semibold focus:bg-accent cursor-pointer"
+              >
                 {z}
               </SelectItem>
             ))}

src/pages/Timestamp/components/LiveClock.tsx

@@ -1,5 +1,4 @@
-import type { HTMLAttributes } from 'react';
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Clock } from 'lucide-react';
 import { toast } from 'sonner';
 import { CopyButton } from '@/components/CopyButton';
@@ -8,7 +7,7 @@ import { msToUnit } from '../constants';
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
 
-interface LiveClockProps extends HTMLAttributes<HTMLDivElement> {
+interface LiveClockProps extends React.HTMLAttributes<HTMLDivElement> {
   unit: UnitType;
   onUseNow: (val: number) => void;
 }
@@ -29,14 +28,18 @@ export default function LiveClock({ unit, onUseNow, className, ...props }: LiveC
   return (
     <div
       className={cn(
-        'flex items-center gap-3 px-3 h-10 rounded-lg font-bold text-[12px] border px-[20px]',
+        'flex items-center gap-3 px-3 h-10 rounded-lg border border-border/80 bg-secondary/50',
         className,
       )}
       {...props}
     >
-      <span>当前时间戳</span>
+      <span className="text-muted-foreground font-bold text-[10px] uppercase tracking-wider whitespace-nowrap shrink-0 selection:bg-transparent select-none">
+        当前时间戳
+      </span>
 
-      <span className="flex-1 text-sm ">{text}</span>
+      <span className="flex-1 font-mono font-bold text-foreground text-sm tracking-tight leading-none truncate tabular-nums">
+        {text}
+      </span>
 
       <Button
         type="button"
@@ -47,12 +50,12 @@ export default function LiveClock({ unit, onUseNow, className, ...props }: LiveC
         title="填充到下方"
         variant="ghost"
         size="icon"
-        className="h-7 w-7"
+        className="h-7 w-7 text-muted-foreground hover:text-foreground"
       >
         <Clock className="w-3.5 h-3.5" />
       </Button>
 
-      <CopyButton text={text} tooltip="复制时间戳" className="h-7 w-7" />
+      <CopyButton text={text} tooltip="复制时间戳" className="h-7 w-7 rounded-md border" />
     </div>
   );
 }

src/pages/Timestamp/components/ResultView.tsx

@@ -34,15 +34,16 @@ export default function ResultView({
         转换结果
       </span>
 
-      <div className="bg-card border p-4 rounded-lg flex items-center gap-3 justify-between">
-        <span className="break-all text-lg select-all flex-1">{result}</span>
-
+      <div className="bg-card text-card-foreground border border-border p-4 sm:p-5 rounded-xl relative shadow-sm flex justify-between items-center gap-4 focus-within:ring-1 focus-within:ring-ring">
+        <span className="font-mono font-extrabold text-foreground break-all text-xl sm:text-2xl tracking-tight leading-tight select-all tabular-nums">
+          {result}
+        </span>
         <CopyButton
           text={result}
           tooltip="复制结果"
           variant="ghost"
           size="icon"
-          className="h-7 w-7"
+          className="h-7 w-7 text-muted-foreground hover:text-foreground"
         />
       </div>
     </div>

src/utils/README.md

@@ -43,7 +43,7 @@
 写入经内部 `setAll()` 完成；`localStorage.setItem` 抛错（如配额超限）时返回 `false`，并 `console.error`，**不会部分提交**：
 
 | 方法           | 写入失败返回值               | 常见失败原因                                           |
-| ---- | -------------- | ------------ |
+| -------------- | ---------------------------- | ------------------------------------------------------ |
 | `save()`       | `null`                       | 达上限、规则不存在（更新时）、`setItem` 异常           |
 | `update()`     | `null`                       | 规则不存在、`setItem` 异常                             |
 | `deleteRule()` | `false`                      | 规则不存在、`setItem` 异常                             |

tailwind.shell.config.js

@@ -11,6 +11,7 @@ export default {
     './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',