refactor: 移除 Dashboard 页面及相关功能，更新路由和组件逻辑

- 移除 Dashboard 相关的组件、特性和测试代码，简化项目结构。
- 更新 PageSkeleton 组件，默认渲染工具页面骨架。
- 修改 RouterContainer 和 RouterProvider 以适应新的默认路由策略，确保用户直接访问 timestamp 页面。
- 更新测试用例，确保在新结构下的功能正常。

src/components/PageSkeleton.tsx

@@ -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>
-  );
-}
 
 /**
  * 工具页面骨架屏
@@ -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';

src/components/RouterContainer.tsx

@@ -30,7 +30,7 @@ function LoadedPage({ pageKey }: { pageKey: PageType }) {
   }, [pageKey]);
 
   if (!Page) {
-    return <PageSkeleton variant={pageKey === 'dashboard' ? 'dashboard' : 'tool'} />;
+    return <PageSkeleton />;
   }
 
   return <Page />;
@@ -39,9 +39,6 @@ function LoadedPage({ pageKey }: { pageKey: PageType }) {
 export default function RouterContainer() {
   const { currentPage } = useRouter();
 
-  const animationClass =
-    currentPage === 'dashboard' ? 'page-transition-dashboard' : 'page-transition-enter';
-
   const currentFeature = getFeatureByKey(currentPage);
 
   return (
@@ -49,8 +46,7 @@ export default function RouterContainer() {
       key={currentPage}
       className={cn(
         'flex-1 flex flex-col overflow-x-hidden overflow-y-auto',
-        'motion-reduce:transition-none',
-        animationClass,
+        'motion-reduce:transition-none page-transition-enter',
       )}
     >
       <PageErrorBoundary resetKey={currentPage}>

src/components/__tests__/PageSkeleton.test.tsx

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

src/components/__tests__/RouterContainer.test.tsx

@@ -6,12 +6,10 @@ 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[],
   navigateTo: vi.fn(),
-  syncNavigation: vi.fn(),
-  goHome: vi.fn(),
   setVisiblePages: vi.fn(),
   setPageOrder: vi.fn(),
   recentlyUsedTools: [] as PageType[],
@@ -34,21 +32,14 @@ describe('RouterContainer 组件', () => {
 
   describe('渲染测试', () => {
     it('mount 后应直接渲染页面结构（不等待 storage 加载）', () => {
-      mockRouterValue.currentPage = 'dashboard';
+      mockRouterValue.currentPage = 'timestamp';
       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');
@@ -60,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');
@@ -70,11 +61,10 @@ describe('RouterContainer 组件', () => {
 
   describe('页面级错误隔离', () => {
     it('PageErrorBoundary 应包裹页面内容', () => {
-      mockRouterValue.currentPage = 'dashboard';
+      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();
     });
   });

src/config/__tests__/features.lazy.test.ts

@@ -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,24 +59,24 @@ describe('features 懒加载', () => {
   it('访问 FEATURES 元数据时不应加载任何页面模块', async () => {
     const { FEATURES } = await import('@/config/features');
 
-    expect(FEATURES).toHaveLength(10);
+    expect(FEATURES).toHaveLength(9);
     expect(pageLoadTracker.loaded).toEqual([]);
   });
 
   it('loadPage 应仅加载对应页面模块', async () => {
     const { loadPage } = await import('@/config/pageLoaders/index');
 
-    await loadPage('dashboard');
+    await loadPage('timestamp');
 
-    expect(pageLoadTracker.loaded).toEqual(['Dashboard']);
+    expect(pageLoadTracker.loaded).toEqual(['Timestamp']);
   });
 
   it('loadPage 切换页面时不应加载无关页面模块', async () => {
     const { loadPage } = await import('@/config/pageLoaders/index');
 
-    await loadPage('timestamp');
+    await loadPage('jwt');
 
-    expect(pageLoadTracker.loaded).toEqual(['Timestamp']);
+    expect(pageLoadTracker.loaded).toEqual(['Jwt']);
     expect(pageLoadTracker.loaded).not.toContain('QrCode');
     expect(pageLoadTracker.loaded).not.toContain('TestDataGenerator');
   });

src/config/__tests__/features.test.ts

@@ -9,8 +9,8 @@ import {
 
 describe('features', () => {
   describe('FEATURES', () => {
-    it('应该有10个功能定义', () => {
-      expect(FEATURES).toHaveLength(10);
+    it('应该有9个功能定义', () => {
+      expect(FEATURES).toHaveLength(9);
     });
 
     it('应该有每个功能的所有必需属性', () => {
@@ -24,12 +24,9 @@ describe('features', () => {
         expect(typeof feature.label).toBe('string');
         expect(typeof feature.description).toBe('string');
         expect(typeof feature.defaultVisible).toBe('boolean');
-
-        if (feature.key !== 'dashboard') {
         expect(feature).toHaveProperty('icon');
         expect(feature).toHaveProperty('themeColorKey');
         expect(typeof feature.themeColorKey).toBe('string');
-        }
       });
     });
 
@@ -41,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();
@@ -78,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');
@@ -90,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');
@@ -105,9 +93,9 @@ describe('features', () => {
   });
 
   describe('getDefaultPageOrder', () => {
-    it('应该排除仪表盘从页面顺序', () => {
+    it('应该包含所有工具页面', () => {
       const pageOrder = getDefaultPageOrder();
-      expect(pageOrder).not.toContain('dashboard');
+      expect(pageOrder).toHaveLength(9);
     });
 
     it('应该包含时间戳、存储清理、二维码在页面顺序', () => {
@@ -116,10 +104,5 @@ describe('features', () => {
       expect(pageOrder).toContain('storageCleaner');
       expect(pageOrder).toContain('qrCode');
     });
-
-    it('应该有9个项目在页面顺序', () => {
-      const pageOrder = getDefaultPageOrder();
-      expect(pageOrder).toHaveLength(9);
-    });
   });
 });

src/config/featureMeta.ts

@@ -25,12 +25,6 @@ export interface FeatureConfig {
 }
 
 export const FEATURES: FeatureConfig[] = [
-  {
-    key: 'dashboard',
-    label: '仪表盘',
-    description: '',
-    defaultVisible: true,
-  },
   {
     key: 'timestamp',
     label: '时间戳',
@@ -118,5 +112,5 @@ export function getAllFeatureKeys(): PageType[] {
 }
 
 export function getDefaultPageOrder(): PageType[] {
-  return FEATURES.filter((f) => f.key !== 'dashboard').map((f) => f.key);
+  return FEATURES.map((f) => f.key);
 }

src/config/pageLoaders/dashboard.ts

@@ -1,5 +0,0 @@
-import type { ComponentType } from 'react';
-
-export default function loadDashboard(): Promise<{ default: ComponentType }> {
-  return import('@/pages/Dashboard');
-}

src/config/pageLoaders/index.ts

@@ -16,8 +16,6 @@ function ensurePagesStyles(): Promise<unknown> {
 export function loadPage(key: PageType): Promise<PageModule> {
   return ensurePagesStyles().then(() => {
     switch (key) {
-      case 'dashboard':
-        return import('@/config/pageLoaders/dashboard').then((m) => m.default());
       case 'timestamp':
         return import('@/config/pageLoaders/timestamp').then((m) => m.default());
       case 'storageCleaner':

src/entrypoints/popup/App.tsx

@@ -1,21 +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';
 
 export default function App() {
   return (
     <RouterProvider
+      defaultRoute="timestamp"
       syncKey="app/popupRoute"
       visiblePagesKey="app/popupVisiblePages"
       pageOrderKey="app/popupPageOrder"
     >
-      <div className="flex flex-col w-[400px] max-w-[400px] min-w-[400px] h-[600px] min-h-[600px] overflow-hidden bg-background">
+      <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

@@ -21,7 +21,7 @@
     <style>
       /* Force initial popup size before React hydration */
       html, body {
-        width: 400px;
+        width: 450px;
         height: 600px;
         margin: 0;
         padding: 0;

src/layout/FeatureNav/__tests__/index.test.tsx

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

src/layout/FeatureNav/__tests__/resolveNavFeatures.test.ts

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

src/layout/FeatureNav/index.tsx

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

src/layout/FeatureNav/resolveNavFeatures.ts

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

src/layout/FeatureNav/useFeatureNav.ts

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

src/layout/TopBar/__tests__/index.test.tsx

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

src/layout/TopBar/index.tsx

@@ -1,5 +1,3 @@
-import { ArrowLeft } 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,7 +19,6 @@ export default function TopBar() {
     handleSelectFeature,
     handleKeyDown,
     cycleThemeMode,
-    goHome,
     clearSearch,
   } = useTopBar();
 
@@ -30,21 +26,6 @@ export default function TopBar() {
 
   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}

src/layout/TopBar/useTopBar.ts

@@ -18,7 +18,6 @@ export interface UseTopBarReturn {
   searchResults: FeatureConfig[];
   recentFeatures: FeatureConfig[];
   selectedIndex: number;
-  isDashboard: boolean;
   ThemeIcon: typeof Sun;
   themeTitle: string;
   showDropdown: boolean;
@@ -29,12 +28,11 @@ export interface UseTopBarReturn {
   handleSelectFeature: (feature: FeatureConfig) => void;
   handleKeyDown: (e: ReactKeyboardEvent) => void;
   cycleThemeMode: () => 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('');
@@ -75,7 +73,6 @@ 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]);
@@ -85,7 +82,7 @@ export function useTopBar(): UseTopBarReturn {
     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) => {
@@ -158,7 +155,6 @@ export function useTopBar(): UseTopBarReturn {
     recentFeatures,
     selectedIndex,
     showDropdown,
-    isDashboard: currentPage === 'dashboard',
     ThemeIcon,
     themeTitle,
     containerRef,
@@ -168,7 +164,6 @@ export function useTopBar(): UseTopBarReturn {
     handleSelectFeature,
     handleKeyDown,
     cycleThemeMode,
-    goHome,
     clearSearch,
   };
 }

src/pages/Dashboard/__tests__/index.test.tsx

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

src/pages/Dashboard/__tests__/useDashboard.test.ts

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

src/pages/Dashboard/dashboardFeatures.ts

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

src/pages/Dashboard/index.tsx

@@ -1,61 +0,0 @@
-import { useDashboard } from './useDashboard';
-
-export default function Index() {
-  const { visibleFeatures, recentFeatures, showRecent, navigateTo } = useDashboard();
-
-  return (
-    <div className="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="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="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="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="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>
-  );
-}

src/pages/Dashboard/useDashboard.ts

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

src/providers/RouterProvider.tsx

@@ -54,7 +54,6 @@ interface RouterContextType {
   recentlyUsedTools: PageType[];
   isLoaded: boolean;
   navigateTo: (page: PageType) => void;
-  goHome: () => void;
   setVisiblePages: (pages: PageType[]) => void;
   setPageOrder: (pages: PageType[]) => void;
 }
@@ -72,7 +71,7 @@ interface RouterProviderProps {
 
 export function RouterProvider({
   children,
-  defaultRoute = 'dashboard',
+  defaultRoute = 'timestamp',
   syncRoute = true,
   syncKey = 'app/currentRoute',
   visiblePagesKey = 'app/visiblePages',
@@ -295,12 +294,6 @@ export function RouterProvider({
     });
   };
 
-  const goHome = () => {
-    hasUserNavigatedRef.current = true;
-    canPersistRef.current = true;
-    setCurrentPage('dashboard');
-  };
-
   return (
     <RouterContext.Provider
       value={{
@@ -310,7 +303,6 @@ export function RouterProvider({
         recentlyUsedTools,
         isLoaded,
         navigateTo,
-        goHome,
         setVisiblePages,
         setPageOrder,
       }}

src/providers/__tests__/RouterProvider.test.tsx

@@ -63,13 +63,13 @@ describe('RouterProvider', () => {
     mockStorageBatch();
 
     render(
-      <RouterProvider defaultRoute="dashboard">
+      <RouterProvider defaultRoute="timestamp">
         <TestComponent />
       </RouterProvider>,
     );
 
     await waitFor(() => {
-      expect(screen.getByTestId('current-page')).toHaveTextContent('dashboard');
+      expect(screen.getByTestId('current-page')).toHaveTextContent('timestamp');
     });
 
     expect(storageUtil.getMany).toHaveBeenCalledWith([
@@ -82,7 +82,7 @@ describe('RouterProvider', () => {
   });
 
   it('应该从指定的 syncKey 加载路由', async () => {
-    mockStorageBatch({ 'app/popupRoute': 'timestamp' });
+    mockStorageBatch({ 'app/popupRoute': 'jwt' });
 
     render(
       <RouterProvider syncKey="app/popupRoute">
@@ -91,7 +91,7 @@ describe('RouterProvider', () => {
     );
 
     await waitFor(() => {
-      expect(screen.getByTestId('current-page')).toHaveTextContent('timestamp');
+      expect(screen.getByTestId('current-page')).toHaveTextContent('jwt');
     });
   });
 
@@ -105,7 +105,7 @@ describe('RouterProvider', () => {
     );
 
     await waitFor(() => {
-      expect(screen.getByTestId('current-page')).toHaveTextContent('dashboard');
+      expect(screen.getByTestId('current-page')).toHaveTextContent('timestamp');
     });
 
     const btn = screen.getByTestId('navigate-btn');
@@ -143,7 +143,6 @@ describe('RouterProvider', () => {
 
   it('应该将旧存储中缺失的新功能自动合并到 visiblePages 和 pageOrder', async () => {
     const oldVisiblePages = [
-      'dashboard',
       'timestamp',
       'storageCleaner',
       'qrCode',
@@ -175,14 +174,27 @@ 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('应该从 localStorage 快照合并缺失的新功能', async () => {
     const oldVisiblePages = [
-      'dashboard',
       'timestamp',
       'storageCleaner',
       'qrCode',
@@ -232,7 +244,6 @@ describe('RouterProvider', () => {
       .calls[0][0] as (changes: Record<string, { newValue?: unknown }>) => void;
 
     const oldVisiblePages = [
-      'dashboard',
       'timestamp',
       'storageCleaner',
       'qrCode',
@@ -260,7 +271,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);
     });
   });
@@ -268,7 +279,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));
@@ -323,7 +334,7 @@ describe('RouterProvider', () => {
     );
 
     await waitFor(() => {
-      expect(screen.getByTestId('current-page')).toHaveTextContent('dashboard');
+      expect(screen.getByTestId('current-page')).toHaveTextContent('timestamp');
     });
     expect(storageUtil.set).not.toHaveBeenCalled();
   });
@@ -336,7 +347,7 @@ describe('RouterProvider', () => {
 
     (storageUtil.getMany as ReturnType<typeof vi.fn>).mockImplementation(async () => {
       await getBlocked;
-      return { 'app/currentRoute': 'dashboard' };
+      return { 'app/currentRoute': 'jwt' };
     });
 
     render(

src/styles/shell.css

@@ -94,10 +94,6 @@
 }
 
 @layer components {
-  .page-transition-dashboard {
-    @apply motion-reduce:transition-none;
-  }
-
   .page-transition-enter {
     @apply motion-reduce:transition-none;
     animation: tt-page-enter 200ms ease-out;

src/types/storage.d.ts

@@ -2,7 +2,6 @@
  * 应用页面类型定义
  */
 export type PageType =
-  | 'dashboard' // 仪表盘/首页
   | 'timestamp' // 时间戳转换工具
   | 'storageCleaner' // 存储清理工具
   | 'qrCode' // 二维码工具

src/utils/__tests__/chromeStorage.test.ts

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