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

- 移除 Dashboard 相关的组件、特性和测试代码,简化项目结构。
- 更新 PageSkeleton 组件,默认渲染工具页面骨架。
- 修改 RouterContainer 和 RouterProvider 以适应新的默认路由策略,确保用户直接访问 timestamp 页面。
- 更新测试用例,确保在新结构下的功能正常。
This commit is contained in:
2026-07-05 22:02:25 +08:00
parent d21e970f56
commit 9aa7a51f0b
29 changed files with 233 additions and 535 deletions
+1 -38
View File
@@ -4,30 +4,6 @@
* 用于 Suspense fallback 和初始加载状态,提供平滑的视觉过渡 * 用于 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) { export default function PageSkeleton() {
if (variant === 'tool') {
return <ToolPageSkeleton />; 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'; PageSkeleton.displayName = 'PageSkeleton';
+2 -6
View File
@@ -30,7 +30,7 @@ function LoadedPage({ pageKey }: { pageKey: PageType }) {
}, [pageKey]); }, [pageKey]);
if (!Page) { if (!Page) {
return <PageSkeleton variant={pageKey === 'dashboard' ? 'dashboard' : 'tool'} />; return <PageSkeleton />;
} }
return <Page />; return <Page />;
@@ -39,9 +39,6 @@ function LoadedPage({ pageKey }: { pageKey: PageType }) {
export default function RouterContainer() { export default function RouterContainer() {
const { currentPage } = useRouter(); const { currentPage } = useRouter();
const animationClass =
currentPage === 'dashboard' ? 'page-transition-dashboard' : 'page-transition-enter';
const currentFeature = getFeatureByKey(currentPage); const currentFeature = getFeatureByKey(currentPage);
return ( return (
@@ -49,8 +46,7 @@ export default function RouterContainer() {
key={currentPage} key={currentPage}
className={cn( className={cn(
'flex-1 flex flex-col overflow-x-hidden overflow-y-auto', 'flex-1 flex flex-col overflow-x-hidden overflow-y-auto',
'motion-reduce:transition-none', 'motion-reduce:transition-none page-transition-enter',
animationClass,
)} )}
> >
<PageErrorBoundary resetKey={currentPage}> <PageErrorBoundary resetKey={currentPage}>
+5 -37
View File
@@ -4,41 +4,17 @@ import PageSkeleton from '@/components/PageSkeleton';
describe('PageSkeleton 组件', () => { describe('PageSkeleton 组件', () => {
describe('渲染测试', () => { describe('渲染测试', () => {
it('默认应渲染 dashboard 骨架', () => { it('应渲染工具页面骨架', () => {
const { container } = render(<PageSkeleton />); 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'); const skeletons = container.querySelectorAll('.animate-pulse');
expect(skeletons.length).toBeGreaterThan(0); expect(skeletons.length).toBeGreaterThan(0);
}); });
}); });
describe('布局结构测试', () => { describe('布局结构测试', () => {
it('dashboard 骨架屏应使用 grid 布局', () => { it('工具骨架屏应有内边距', () => {
const { container } = render(<PageSkeleton variant="dashboard" />); const { container } = render(<PageSkeleton />);
const gridContainer = container.firstChild as HTMLElement;
expect(gridContainer).toHaveClass('grid');
});
it('tool 骨架屏应有内边距', () => {
const { container } = render(<PageSkeleton variant="tool" />);
const toolContainer = container.firstChild as HTMLElement; const toolContainer = container.firstChild as HTMLElement;
expect(toolContainer).toHaveClass('p-5'); expect(toolContainer).toHaveClass('p-5');
@@ -46,16 +22,8 @@ describe('PageSkeleton 组件', () => {
}); });
describe('骨架屏元素测试', () => { describe('骨架屏元素测试', () => {
it('dashboard 骨架屏应包含圆角和边框样式', () => { it('工具骨架屏应包含动画脉冲效果', () => {
const { container } = render(<PageSkeleton variant="dashboard" />); const { container } = render(<PageSkeleton />);
// 获取第一个卡片容器
const card = container.querySelector('.rounded-xl.border');
expect(card).toBeInTheDocument();
});
it('tool 骨架屏应包含动画脉冲效果', () => {
const { container } = render(<PageSkeleton variant="tool" />);
const skeletons = container.querySelectorAll('.animate-pulse'); const skeletons = container.querySelectorAll('.animate-pulse');
expect(skeletons.length).toBeGreaterThan(0); expect(skeletons.length).toBeGreaterThan(0);
@@ -6,12 +6,10 @@ import type { PageType } from '@/types/storage';
import React from 'react'; import React from 'react';
const mockRouterValue = { const mockRouterValue = {
currentPage: 'dashboard' as PageType, currentPage: 'timestamp' as PageType,
visiblePages: ['dashboard', 'timestamp'] as PageType[], visiblePages: ['timestamp', 'jwt'] as PageType[],
pageOrder: ['timestamp'] as PageType[], pageOrder: ['timestamp'] as PageType[],
navigateTo: vi.fn(), navigateTo: vi.fn(),
syncNavigation: vi.fn(),
goHome: vi.fn(),
setVisiblePages: vi.fn(), setVisiblePages: vi.fn(),
setPageOrder: vi.fn(), setPageOrder: vi.fn(),
recentlyUsedTools: [] as PageType[], recentlyUsedTools: [] as PageType[],
@@ -34,21 +32,14 @@ describe('RouterContainer 组件', () => {
describe('渲染测试', () => { describe('渲染测试', () => {
it('mount 后应直接渲染页面结构(不等待 storage 加载)', () => { it('mount 后应直接渲染页面结构(不等待 storage 加载)', () => {
mockRouterValue.currentPage = 'dashboard'; mockRouterValue.currentPage = 'timestamp';
const { container } = renderWithProvider(<RouterContainer />); const { container } = renderWithProvider(<RouterContainer />);
expect(container.querySelector('.page-transition-dashboard')).toBeInTheDocument(); expect(container.querySelector('.page-transition-enter')).toBeInTheDocument();
}); });
}); });
describe('动画类测试', () => { describe('动画类测试', () => {
it('在 dashboard 页面应应用 dashboard 动画类', () => { it('应应用 enter 动画类', () => {
mockRouterValue.currentPage = 'dashboard';
renderWithProvider(<RouterContainer />);
const box = document.querySelector('.page-transition-dashboard');
expect(box).toBeInTheDocument();
});
it('在非 dashboard 页面应应用 enter 动画类', () => {
mockRouterValue.currentPage = 'timestamp'; mockRouterValue.currentPage = 'timestamp';
renderWithProvider(<RouterContainer />); renderWithProvider(<RouterContainer />);
const box = document.querySelector('.page-transition-enter'); const box = document.querySelector('.page-transition-enter');
@@ -60,7 +51,7 @@ describe('RouterContainer 组件', () => {
it('currentPage 变化时应更新', () => { it('currentPage 变化时应更新', () => {
const { rerender } = renderWithProvider(<RouterContainer />); const { rerender } = renderWithProvider(<RouterContainer />);
mockRouterValue.currentPage = 'timestamp'; mockRouterValue.currentPage = 'jwt';
rerender(<RouterProvider>{<RouterContainer />}</RouterProvider>); rerender(<RouterProvider>{<RouterContainer />}</RouterProvider>);
const box = document.querySelector('.page-transition-enter'); const box = document.querySelector('.page-transition-enter');
@@ -70,11 +61,10 @@ describe('RouterContainer 组件', () => {
describe('页面级错误隔离', () => { describe('页面级错误隔离', () => {
it('PageErrorBoundary 应包裹页面内容', () => { it('PageErrorBoundary 应包裹页面内容', () => {
mockRouterValue.currentPage = 'dashboard'; mockRouterValue.currentPage = 'timestamp';
const { container } = renderWithProvider(<RouterContainer />); const { container } = renderWithProvider(<RouterContainer />);
// 验证 RouterContainer 的 Box 结构存在 const routerBox = container.querySelector('.page-transition-enter');
const routerBox = container.querySelector('.page-transition-dashboard');
expect(routerBox).toBeInTheDocument(); expect(routerBox).toBeInTheDocument();
}); });
}); });
+5 -9
View File
@@ -4,10 +4,6 @@ const pageLoadTracker = vi.hoisted(() => ({
loaded: [] as string[], loaded: [] as string[],
})); }));
vi.mock('@/pages/Dashboard', () => {
pageLoadTracker.loaded.push('Dashboard');
return { default: () => null };
});
vi.mock('@/pages/Timestamp', () => { vi.mock('@/pages/Timestamp', () => {
pageLoadTracker.loaded.push('Timestamp'); pageLoadTracker.loaded.push('Timestamp');
return { default: () => null }; return { default: () => null };
@@ -63,24 +59,24 @@ describe('features 懒加载', () => {
it('访问 FEATURES 元数据时不应加载任何页面模块', async () => { it('访问 FEATURES 元数据时不应加载任何页面模块', async () => {
const { FEATURES } = await import('@/config/features'); const { FEATURES } = await import('@/config/features');
expect(FEATURES).toHaveLength(10); expect(FEATURES).toHaveLength(9);
expect(pageLoadTracker.loaded).toEqual([]); expect(pageLoadTracker.loaded).toEqual([]);
}); });
it('loadPage 应仅加载对应页面模块', async () => { it('loadPage 应仅加载对应页面模块', async () => {
const { loadPage } = await import('@/config/pageLoaders/index'); 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 () => { it('loadPage 切换页面时不应加载无关页面模块', async () => {
const { loadPage } = await import('@/config/pageLoaders/index'); 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('QrCode');
expect(pageLoadTracker.loaded).not.toContain('TestDataGenerator'); expect(pageLoadTracker.loaded).not.toContain('TestDataGenerator');
}); });
+6 -23
View File
@@ -9,8 +9,8 @@ import {
describe('features', () => { describe('features', () => {
describe('FEATURES', () => { describe('FEATURES', () => {
it('应该有10个功能定义', () => { it('应该有9个功能定义', () => {
expect(FEATURES).toHaveLength(10); expect(FEATURES).toHaveLength(9);
}); });
it('应该有每个功能的所有必需属性', () => { it('应该有每个功能的所有必需属性', () => {
@@ -24,12 +24,9 @@ describe('features', () => {
expect(typeof feature.label).toBe('string'); expect(typeof feature.label).toBe('string');
expect(typeof feature.description).toBe('string'); expect(typeof feature.description).toBe('string');
expect(typeof feature.defaultVisible).toBe('boolean'); expect(typeof feature.defaultVisible).toBe('boolean');
if (feature.key !== 'dashboard') {
expect(feature).toHaveProperty('icon'); expect(feature).toHaveProperty('icon');
expect(feature).toHaveProperty('themeColorKey'); expect(feature).toHaveProperty('themeColorKey');
expect(typeof feature.themeColorKey).toBe('string'); expect(typeof feature.themeColorKey).toBe('string');
}
}); });
}); });
@@ -41,13 +38,6 @@ describe('features', () => {
}); });
describe('getFeatureByKey', () => { describe('getFeatureByKey', () => {
it('应该返回dashboard功能', () => {
const feature = getFeatureByKey('dashboard');
expect(feature).toBeDefined();
expect(feature?.key).toBe('dashboard');
expect(feature?.label).toBe('仪表盘');
});
it('应该返回时间戳功能', () => { it('应该返回时间戳功能', () => {
const feature = getFeatureByKey('timestamp'); const feature = getFeatureByKey('timestamp');
expect(feature).toBeDefined(); expect(feature).toBeDefined();
@@ -78,9 +68,8 @@ describe('features', () => {
}); });
}); });
it('应该包含仪表盘、时间戳、存储清理、二维码', () => { it('应该包含时间戳、存储清理、二维码', () => {
const visibleKeys = getDefaultVisibleFeatureKeys(); const visibleKeys = getDefaultVisibleFeatureKeys();
expect(visibleKeys).toContain('dashboard');
expect(visibleKeys).toContain('timestamp'); expect(visibleKeys).toContain('timestamp');
expect(visibleKeys).toContain('storageCleaner'); expect(visibleKeys).toContain('storageCleaner');
expect(visibleKeys).toContain('qrCode'); expect(visibleKeys).toContain('qrCode');
@@ -90,8 +79,7 @@ describe('features', () => {
describe('getAllFeatureKeys', () => { describe('getAllFeatureKeys', () => {
it('应该返回所有功能key', () => { it('应该返回所有功能key', () => {
const allKeys = getAllFeatureKeys(); const allKeys = getAllFeatureKeys();
expect(allKeys).toHaveLength(10); expect(allKeys).toHaveLength(9);
expect(allKeys).toContain('dashboard');
expect(allKeys).toContain('timestamp'); expect(allKeys).toContain('timestamp');
expect(allKeys).toContain('storageCleaner'); expect(allKeys).toContain('storageCleaner');
expect(allKeys).toContain('qrCode'); expect(allKeys).toContain('qrCode');
@@ -105,9 +93,9 @@ describe('features', () => {
}); });
describe('getDefaultPageOrder', () => { describe('getDefaultPageOrder', () => {
it('应该排除仪表盘从页面顺序', () => { it('应该包含所有工具页面', () => {
const pageOrder = getDefaultPageOrder(); const pageOrder = getDefaultPageOrder();
expect(pageOrder).not.toContain('dashboard'); expect(pageOrder).toHaveLength(9);
}); });
it('应该包含时间戳、存储清理、二维码在页面顺序', () => { it('应该包含时间戳、存储清理、二维码在页面顺序', () => {
@@ -116,10 +104,5 @@ describe('features', () => {
expect(pageOrder).toContain('storageCleaner'); expect(pageOrder).toContain('storageCleaner');
expect(pageOrder).toContain('qrCode'); expect(pageOrder).toContain('qrCode');
}); });
it('应该有9个项目在页面顺序', () => {
const pageOrder = getDefaultPageOrder();
expect(pageOrder).toHaveLength(9);
});
}); });
}); });
+1 -7
View File
@@ -25,12 +25,6 @@ export interface FeatureConfig {
} }
export const FEATURES: FeatureConfig[] = [ export const FEATURES: FeatureConfig[] = [
{
key: 'dashboard',
label: '仪表盘',
description: '',
defaultVisible: true,
},
{ {
key: 'timestamp', key: 'timestamp',
label: '时间戳', label: '时间戳',
@@ -118,5 +112,5 @@ export function getAllFeatureKeys(): PageType[] {
} }
export function getDefaultPageOrder(): PageType[] { export function getDefaultPageOrder(): PageType[] {
return FEATURES.filter((f) => f.key !== 'dashboard').map((f) => f.key); return FEATURES.map((f) => f.key);
} }
-5
View File
@@ -1,5 +0,0 @@
import type { ComponentType } from 'react';
export default function loadDashboard(): Promise<{ default: ComponentType }> {
return import('@/pages/Dashboard');
}
-2
View File
@@ -16,8 +16,6 @@ function ensurePagesStyles(): Promise<unknown> {
export function loadPage(key: PageType): Promise<PageModule> { export function loadPage(key: PageType): Promise<PageModule> {
return ensurePagesStyles().then(() => { return ensurePagesStyles().then(() => {
switch (key) { switch (key) {
case 'dashboard':
return import('@/config/pageLoaders/dashboard').then((m) => m.default());
case 'timestamp': case 'timestamp':
return import('@/config/pageLoaders/timestamp').then((m) => m.default()); return import('@/config/pageLoaders/timestamp').then((m) => m.default());
case 'storageCleaner': case 'storageCleaner':
+6 -1
View File
@@ -1,21 +1,26 @@
import RouterProvider from '@/providers/RouterProvider'; import RouterProvider from '@/providers/RouterProvider';
import TopBar from '@/layout/TopBar'; import TopBar from '@/layout/TopBar';
import FeatureNav from '@/layout/FeatureNav';
import RouterContainer from '@/components/RouterContainer'; import RouterContainer from '@/components/RouterContainer';
import ErrorBoundary from '@/components/ErrorBoundary'; import ErrorBoundary from '@/components/ErrorBoundary';
export default function App() { export default function App() {
return ( return (
<RouterProvider <RouterProvider
defaultRoute="timestamp"
syncKey="app/popupRoute" syncKey="app/popupRoute"
visiblePagesKey="app/popupVisiblePages" visiblePagesKey="app/popupVisiblePages"
pageOrderKey="app/popupPageOrder" 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 /> <TopBar />
<ErrorBoundary> <ErrorBoundary>
<RouterContainer /> <RouterContainer />
</ErrorBoundary> </ErrorBoundary>
</div> </div>
<FeatureNav />
</div>
</RouterProvider> </RouterProvider>
); );
} }
+1 -1
View File
@@ -21,7 +21,7 @@
<style> <style>
/* Force initial popup size before React hydration */ /* Force initial popup size before React hydration */
html, body { html, body {
width: 400px; width: 450px;
height: 600px; height: 600px;
margin: 0; margin: 0;
padding: 0; padding: 0;
@@ -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 { describe, it, expect, vi, beforeEach } from 'vitest';
import * as featureConfig from '@/config/features'; import * as featureConfig from '@/config/features';
import { resolveDashboardFeatures } from '../dashboardFeatures'; import { resolveNavFeatures } from '../resolveNavFeatures';
describe('resolveDashboardFeatures', () => { describe('resolveNavFeatures', () => {
beforeEach(() => { beforeEach(() => {
vi.restoreAllMocks(); vi.restoreAllMocks();
}); });
it('应按 keys 顺序返回可见工具,并排除 dashboard', () => { it('应按 keys 顺序返回可见工具', () => {
const items = resolveDashboardFeatures(['jwt', 'timestamp'], ['dashboard', 'timestamp', 'jwt']); const items = resolveNavFeatures(['jwt', 'timestamp'], ['timestamp', 'jwt']);
expect(items.map((item) => item.key)).toEqual(['jwt', 'timestamp']); expect(items.map((item) => item.key)).toEqual(['jwt', 'timestamp']);
expect(items.map((item) => item.feature.label)).toEqual(['JWT 解析', '时间戳']); expect(items.map((item) => item.feature.label)).toEqual(['JWT 解析', '时间戳']);
@@ -24,25 +24,34 @@ describe('resolveDashboardFeatures', () => {
return feature; return feature;
}); });
const items = resolveDashboardFeatures(['timestamp'], ['dashboard', 'timestamp']); const items = resolveNavFeatures(['timestamp'], ['timestamp']);
expect(items.map((item) => item.key)).toEqual(['timestamp']); expect(items.map((item) => item.key)).toEqual(['timestamp']);
}); });
it('应过滤不在 visiblePages 中的工具', () => { it('应过滤不在 visiblePages 中的工具', () => {
const items = resolveDashboardFeatures(['jwt', 'timestamp'], ['dashboard', 'timestamp']); const items = resolveNavFeatures(['jwt', 'timestamp'], ['timestamp']);
expect(items.map((item) => item.key)).toEqual(['timestamp']); expect(items.map((item) => item.key)).toEqual(['timestamp']);
}); });
it('visiblePages 无匹配工具时应返回空列表', () => { it('visiblePages 无匹配工具时应返回空列表', () => {
const items = resolveDashboardFeatures(['jwt', 'timestamp'], ['dashboard']); const items = resolveNavFeatures(['jwt', 'timestamp'], []);
expect(items).toEqual([]); expect(items).toEqual([]);
}); });
it('应过滤缺少 icon 的工具', () => { 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']); expect(items.map((item) => item.key)).toEqual(['timestamp']);
}); });
+35
View File
@@ -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;
}
+21
View File
@@ -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 };
}
+7 -20
View File
@@ -1,5 +1,5 @@
import { beforeEach, describe, expect, it, vi } from 'vitest'; 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 type { PageType } from '@/types/storage';
import React from 'react'; import React from 'react';
import TopBar from '@/layout/TopBar'; import TopBar from '@/layout/TopBar';
@@ -21,13 +21,12 @@ Object.defineProperty(window, 'matchMedia', {
}); });
const mockRouterValue = { const mockRouterValue = {
currentPage: 'dashboard' as PageType, currentPage: 'timestamp' as PageType,
visiblePages: ['dashboard', 'timestamp'] as PageType[], visiblePages: ['timestamp', 'jwt'] as PageType[],
pageOrder: ['timestamp'] as PageType[], pageOrder: ['timestamp'] as PageType[],
recentlyUsedTools: [] as PageType[],
isLoaded: true, isLoaded: true,
navigateTo: vi.fn(), navigateTo: vi.fn(),
syncNavigation: vi.fn(),
goHome: vi.fn(),
setVisiblePages: vi.fn(), setVisiblePages: vi.fn(),
setPageOrder: vi.fn(), setPageOrder: vi.fn(),
}; };
@@ -51,26 +50,14 @@ describe('TopBar 组件', () => {
}; };
describe('渲染测试', () => { describe('渲染测试', () => {
it('不在 dashboard 时应渲染返回按钮', () => { it('不应渲染返回首页按钮', () => {
mockRouterValue.currentPage = 'timestamp';
renderWithProvider(<TopBar />);
expect(screen.getByLabelText('返回首页')).toBeInTheDocument();
});
it('在 dashboard 上不应渲染返回按钮', () => {
mockRouterValue.currentPage = 'dashboard';
renderWithProvider(<TopBar />); renderWithProvider(<TopBar />);
expect(screen.queryByLabelText('返回首页')).not.toBeInTheDocument(); expect(screen.queryByLabelText('返回首页')).not.toBeInTheDocument();
}); });
});
describe('交互测试', () => { it('应渲染搜索输入框', () => {
it('点击返回按钮时应调用 goHome', () => {
mockRouterValue.currentPage = 'timestamp';
renderWithProvider(<TopBar />); renderWithProvider(<TopBar />);
expect(screen.getByRole('textbox')).toBeInTheDocument();
fireEvent.click(screen.getByLabelText('返回首页'));
expect(mockRouterValue.goHome).toHaveBeenCalledTimes(1);
}); });
}); });
}); });
-19
View File
@@ -1,5 +1,3 @@
import { ArrowLeft } from 'lucide-react';
import { Button } from '@/components/ui/button';
import SearchDropdown from './SearchDropdown'; import SearchDropdown from './SearchDropdown';
import SearchInput from './SearchInput'; import SearchInput from './SearchInput';
import TopBarActions from './TopBarActions'; import TopBarActions from './TopBarActions';
@@ -11,7 +9,6 @@ export default function TopBar() {
searchResults, searchResults,
recentFeatures, recentFeatures,
selectedIndex, selectedIndex,
isDashboard,
ThemeIcon, ThemeIcon,
themeTitle, themeTitle,
showDropdown, showDropdown,
@@ -22,7 +19,6 @@ export default function TopBar() {
handleSelectFeature, handleSelectFeature,
handleKeyDown, handleKeyDown,
cycleThemeMode, cycleThemeMode,
goHome,
clearSearch, clearSearch,
} = useTopBar(); } = useTopBar();
@@ -30,21 +26,6 @@ export default function TopBar() {
return ( return (
<header className="relative z-50 flex h-14 items-center justify-between border-b border-border bg-background px-4"> <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"> <div ref={containerRef} className="relative mx-4 max-w-md flex-1">
<SearchInput <SearchInput
inputRef={inputRef} inputRef={inputRef}
+2 -7
View File
@@ -18,7 +18,6 @@ export interface UseTopBarReturn {
searchResults: FeatureConfig[]; searchResults: FeatureConfig[];
recentFeatures: FeatureConfig[]; recentFeatures: FeatureConfig[];
selectedIndex: number; selectedIndex: number;
isDashboard: boolean;
ThemeIcon: typeof Sun; ThemeIcon: typeof Sun;
themeTitle: string; themeTitle: string;
showDropdown: boolean; showDropdown: boolean;
@@ -29,12 +28,11 @@ export interface UseTopBarReturn {
handleSelectFeature: (feature: FeatureConfig) => void; handleSelectFeature: (feature: FeatureConfig) => void;
handleKeyDown: (e: ReactKeyboardEvent) => void; handleKeyDown: (e: ReactKeyboardEvent) => void;
cycleThemeMode: () => void; cycleThemeMode: () => void;
goHome: () => void;
clearSearch: () => void; clearSearch: () => void;
} }
export function useTopBar(): UseTopBarReturn { export function useTopBar(): UseTopBarReturn {
const { currentPage, goHome, navigateTo } = useRouter(); const { navigateTo } = useRouter();
const { mode, setMode } = useThemeMode(); const { mode, setMode } = useThemeMode();
const [searchQuery, setSearchQuery] = useState(''); const [searchQuery, setSearchQuery] = useState('');
@@ -75,7 +73,6 @@ export function useTopBar(): UseTopBarReturn {
const query = searchQuery.trim().toLowerCase(); const query = searchQuery.trim().toLowerCase();
if (!query) return []; if (!query) return [];
return FEATURES.filter((f) => { return FEATURES.filter((f) => {
if (f.key === 'dashboard') return false;
return f.label.toLowerCase().includes(query) || f.description.toLowerCase().includes(query); return f.label.toLowerCase().includes(query) || f.description.toLowerCase().includes(query);
}); });
}, [searchQuery]); }, [searchQuery]);
@@ -85,7 +82,7 @@ export function useTopBar(): UseTopBarReturn {
return searchHistory return searchHistory
.slice(0, SEARCH_HISTORY_DISPLAY) .slice(0, SEARCH_HISTORY_DISPLAY)
.map((key) => FEATURES.find((f) => f.key === key)) .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]); }, [searchHistory, searchQuery]);
const saveToHistory = (featureKey: string) => { const saveToHistory = (featureKey: string) => {
@@ -158,7 +155,6 @@ export function useTopBar(): UseTopBarReturn {
recentFeatures, recentFeatures,
selectedIndex, selectedIndex,
showDropdown, showDropdown,
isDashboard: currentPage === 'dashboard',
ThemeIcon, ThemeIcon,
themeTitle, themeTitle,
containerRef, containerRef,
@@ -168,7 +164,6 @@ export function useTopBar(): UseTopBarReturn {
handleSelectFeature, handleSelectFeature,
handleKeyDown, handleKeyDown,
cycleThemeMode, cycleThemeMode,
goHome,
clearSearch, clearSearch,
}; };
} }
@@ -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']);
});
});
-34
View File
@@ -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;
}
-61
View File
@@ -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>
);
}
-29
View File
@@ -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 };
}
+1 -9
View File
@@ -54,7 +54,6 @@ interface RouterContextType {
recentlyUsedTools: PageType[]; recentlyUsedTools: PageType[];
isLoaded: boolean; isLoaded: boolean;
navigateTo: (page: PageType) => void; navigateTo: (page: PageType) => void;
goHome: () => void;
setVisiblePages: (pages: PageType[]) => void; setVisiblePages: (pages: PageType[]) => void;
setPageOrder: (pages: PageType[]) => void; setPageOrder: (pages: PageType[]) => void;
} }
@@ -72,7 +71,7 @@ interface RouterProviderProps {
export function RouterProvider({ export function RouterProvider({
children, children,
defaultRoute = 'dashboard', defaultRoute = 'timestamp',
syncRoute = true, syncRoute = true,
syncKey = 'app/currentRoute', syncKey = 'app/currentRoute',
visiblePagesKey = 'app/visiblePages', visiblePagesKey = 'app/visiblePages',
@@ -295,12 +294,6 @@ export function RouterProvider({
}); });
}; };
const goHome = () => {
hasUserNavigatedRef.current = true;
canPersistRef.current = true;
setCurrentPage('dashboard');
};
return ( return (
<RouterContext.Provider <RouterContext.Provider
value={{ value={{
@@ -310,7 +303,6 @@ export function RouterProvider({
recentlyUsedTools, recentlyUsedTools,
isLoaded, isLoaded,
navigateTo, navigateTo,
goHome,
setVisiblePages, setVisiblePages,
setPageOrder, setPageOrder,
}} }}
+24 -13
View File
@@ -63,13 +63,13 @@ describe('RouterProvider', () => {
mockStorageBatch(); mockStorageBatch();
render( render(
<RouterProvider defaultRoute="dashboard"> <RouterProvider defaultRoute="timestamp">
<TestComponent /> <TestComponent />
</RouterProvider>, </RouterProvider>,
); );
await waitFor(() => { await waitFor(() => {
expect(screen.getByTestId('current-page')).toHaveTextContent('dashboard'); expect(screen.getByTestId('current-page')).toHaveTextContent('timestamp');
}); });
expect(storageUtil.getMany).toHaveBeenCalledWith([ expect(storageUtil.getMany).toHaveBeenCalledWith([
@@ -82,7 +82,7 @@ describe('RouterProvider', () => {
}); });
it('应该从指定的 syncKey 加载路由', async () => { it('应该从指定的 syncKey 加载路由', async () => {
mockStorageBatch({ 'app/popupRoute': 'timestamp' }); mockStorageBatch({ 'app/popupRoute': 'jwt' });
render( render(
<RouterProvider syncKey="app/popupRoute"> <RouterProvider syncKey="app/popupRoute">
@@ -91,7 +91,7 @@ describe('RouterProvider', () => {
); );
await waitFor(() => { await waitFor(() => {
expect(screen.getByTestId('current-page')).toHaveTextContent('timestamp'); expect(screen.getByTestId('current-page')).toHaveTextContent('jwt');
}); });
}); });
@@ -105,7 +105,7 @@ describe('RouterProvider', () => {
); );
await waitFor(() => { await waitFor(() => {
expect(screen.getByTestId('current-page')).toHaveTextContent('dashboard'); expect(screen.getByTestId('current-page')).toHaveTextContent('timestamp');
}); });
const btn = screen.getByTestId('navigate-btn'); const btn = screen.getByTestId('navigate-btn');
@@ -143,7 +143,6 @@ describe('RouterProvider', () => {
it('应该将旧存储中缺失的新功能自动合并到 visiblePages 和 pageOrder', async () => { it('应该将旧存储中缺失的新功能自动合并到 visiblePages 和 pageOrder', async () => {
const oldVisiblePages = [ const oldVisiblePages = [
'dashboard',
'timestamp', 'timestamp',
'storageCleaner', 'storageCleaner',
'qrCode', 'qrCode',
@@ -175,14 +174,27 @@ describe('RouterProvider', () => {
const visiblePages = screen.getByTestId('visible-pages').textContent!; const visiblePages = screen.getByTestId('visible-pages').textContent!;
const pageOrder = screen.getByTestId('page-order').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); 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 () => { it('应该从 localStorage 快照合并缺失的新功能', async () => {
const oldVisiblePages = [ const oldVisiblePages = [
'dashboard',
'timestamp', 'timestamp',
'storageCleaner', 'storageCleaner',
'qrCode', 'qrCode',
@@ -232,7 +244,6 @@ describe('RouterProvider', () => {
.calls[0][0] as (changes: Record<string, { newValue?: unknown }>) => void; .calls[0][0] as (changes: Record<string, { newValue?: unknown }>) => void;
const oldVisiblePages = [ const oldVisiblePages = [
'dashboard',
'timestamp', 'timestamp',
'storageCleaner', 'storageCleaner',
'qrCode', 'qrCode',
@@ -260,7 +271,7 @@ describe('RouterProvider', () => {
const visiblePages = screen.getByTestId('visible-pages').textContent!; const visiblePages = screen.getByTestId('visible-pages').textContent!;
const pageOrder = screen.getByTestId('page-order').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); expect(pageOrder.startsWith('timestamp,storageCleaner')).toBe(true);
}); });
}); });
@@ -268,7 +279,7 @@ describe('RouterProvider', () => {
it('localStorage 快照过期时,loadInitialData 完成前不应覆盖 chrome.storage', async () => { it('localStorage 快照过期时,loadInitialData 完成前不应覆盖 chrome.storage', async () => {
const staleRoute = 'timestamp'; const staleRoute = 'timestamp';
const correctRoute = 'jsonTools'; const correctRoute = 'jsonTools';
const defaultVisible = ['dashboard', 'timestamp', 'storageCleaner']; const defaultVisible = ['timestamp', 'storageCleaner'];
const defaultOrder = ['timestamp', 'storageCleaner']; const defaultOrder = ['timestamp', 'storageCleaner'];
localStorage.setItem('snapshot/app/currentRoute', JSON.stringify(staleRoute)); localStorage.setItem('snapshot/app/currentRoute', JSON.stringify(staleRoute));
@@ -323,7 +334,7 @@ describe('RouterProvider', () => {
); );
await waitFor(() => { await waitFor(() => {
expect(screen.getByTestId('current-page')).toHaveTextContent('dashboard'); expect(screen.getByTestId('current-page')).toHaveTextContent('timestamp');
}); });
expect(storageUtil.set).not.toHaveBeenCalled(); expect(storageUtil.set).not.toHaveBeenCalled();
}); });
@@ -336,7 +347,7 @@ describe('RouterProvider', () => {
(storageUtil.getMany as ReturnType<typeof vi.fn>).mockImplementation(async () => { (storageUtil.getMany as ReturnType<typeof vi.fn>).mockImplementation(async () => {
await getBlocked; await getBlocked;
return { 'app/currentRoute': 'dashboard' }; return { 'app/currentRoute': 'jwt' };
}); });
render( render(
-4
View File
@@ -94,10 +94,6 @@
} }
@layer components { @layer components {
.page-transition-dashboard {
@apply motion-reduce:transition-none;
}
.page-transition-enter { .page-transition-enter {
@apply motion-reduce:transition-none; @apply motion-reduce:transition-none;
animation: tt-page-enter 200ms ease-out; animation: tt-page-enter 200ms ease-out;
-1
View File
@@ -2,7 +2,6 @@
* 应用页面类型定义 * 应用页面类型定义
*/ */
export type PageType = export type PageType =
| 'dashboard' // 仪表盘/首页
| 'timestamp' // 时间戳转换工具 | 'timestamp' // 时间戳转换工具
| 'storageCleaner' // 存储清理工具 | 'storageCleaner' // 存储清理工具
| 'qrCode' // 二维码工具 | 'qrCode' // 二维码工具
+2 -2
View File
@@ -37,7 +37,7 @@ describe('chromeStorage', () => {
}); });
it('应该支持数组类型值', async () => { it('应该支持数组类型值', async () => {
const pages = ['dashboard', 'timestamp'] as const; const pages = ['timestamp', 'jwt'] as const;
(chrome.storage.local.get as any).mockResolvedValue({ 'app/visiblePages': pages }); (chrome.storage.local.get as any).mockResolvedValue({ 'app/visiblePages': pages });
const result = await storageUtil.get('app/visiblePages'); const result = await storageUtil.get('app/visiblePages');
@@ -126,7 +126,7 @@ describe('chromeStorage', () => {
}); });
it('应该成功设置数组值', async () => { it('应该成功设置数组值', async () => {
const pages: Array<'dashboard' | 'timestamp'> = ['dashboard', 'timestamp']; const pages: Array<'timestamp' | 'jwt'> = ['timestamp', 'jwt'];
await storageUtil.set('app/visiblePages', pages); await storageUtil.set('app/visiblePages', pages);
expect(chrome.storage.local.set).toHaveBeenCalledWith({ 'app/visiblePages': pages }); expect(chrome.storage.local.set).toHaveBeenCalledWith({ 'app/visiblePages': pages });