refactor: 移除 Dashboard 页面及相关功能，更新路由和组件逻辑
- 移除 Dashboard 相关的组件、特性和测试代码，简化项目结构。 - 更新 PageSkeleton 组件，默认渲染工具页面骨架。 - 修改 RouterContainer 和 RouterProvider 以适应新的默认路由策略，确保用户直接访问 timestamp 页面。 - 更新测试用例，确保在新结构下的功能正常。
This commit is contained in:
@@ -1,49 +0,0 @@
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import * as featureConfig from '@/config/features';
|
||||
import { resolveDashboardFeatures } from '../dashboardFeatures';
|
||||
|
||||
describe('resolveDashboardFeatures', () => {
|
||||
beforeEach(() => {
|
||||
vi.restoreAllMocks();
|
||||
});
|
||||
|
||||
it('应按 keys 顺序返回可见工具，并排除 dashboard', () => {
|
||||
const items = resolveDashboardFeatures(['jwt', 'timestamp'], ['dashboard', 'timestamp', 'jwt']);
|
||||
|
||||
expect(items.map((item) => item.key)).toEqual(['jwt', 'timestamp']);
|
||||
expect(items.map((item) => item.feature.label)).toEqual(['JWT 解析', '时间戳']);
|
||||
});
|
||||
|
||||
it('缺少 themeColorKey 但有 icon 的工具仍应显示', () => {
|
||||
const originalGetFeatureByKey = featureConfig.getFeatureByKey;
|
||||
vi.spyOn(featureConfig, 'getFeatureByKey').mockImplementation((key) => {
|
||||
const feature = originalGetFeatureByKey(key);
|
||||
if (key === 'timestamp' && feature) {
|
||||
return { ...feature, themeColorKey: undefined };
|
||||
}
|
||||
return feature;
|
||||
});
|
||||
|
||||
const items = resolveDashboardFeatures(['timestamp'], ['dashboard', 'timestamp']);
|
||||
|
||||
expect(items.map((item) => item.key)).toEqual(['timestamp']);
|
||||
});
|
||||
|
||||
it('应过滤不在 visiblePages 中的工具', () => {
|
||||
const items = resolveDashboardFeatures(['jwt', 'timestamp'], ['dashboard', 'timestamp']);
|
||||
|
||||
expect(items.map((item) => item.key)).toEqual(['timestamp']);
|
||||
});
|
||||
|
||||
it('visiblePages 无匹配工具时应返回空列表', () => {
|
||||
const items = resolveDashboardFeatures(['jwt', 'timestamp'], ['dashboard']);
|
||||
|
||||
expect(items).toEqual([]);
|
||||
});
|
||||
|
||||
it('应过滤缺少 icon 的工具', () => {
|
||||
const items = resolveDashboardFeatures(['dashboard', 'timestamp'], ['dashboard', 'timestamp']);
|
||||
|
||||
expect(items.map((item) => item.key)).toEqual(['timestamp']);
|
||||
});
|
||||
});
|
||||
@@ -1,95 +0,0 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import { resolveDashboardFeatures, type DashboardFeatureItem } from '../dashboardFeatures';
|
||||
import Index from '../index';
|
||||
|
||||
const mockNavigateTo = vi.fn();
|
||||
const mockUseDashboard = vi.fn();
|
||||
|
||||
vi.mock('../useDashboard', () => ({
|
||||
useDashboard: () => mockUseDashboard(),
|
||||
}));
|
||||
|
||||
function buildFeatureItem(key: 'timestamp' | 'jwt'): DashboardFeatureItem {
|
||||
return resolveDashboardFeatures([key], [key])[0]!;
|
||||
}
|
||||
|
||||
describe('Dashboard 页面', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
mockUseDashboard.mockReturnValue({
|
||||
visibleFeatures: [buildFeatureItem('timestamp'), buildFeatureItem('jwt')],
|
||||
recentFeatures: [],
|
||||
showRecent: false,
|
||||
navigateTo: mockNavigateTo,
|
||||
});
|
||||
});
|
||||
|
||||
it('应渲染全部工具网格', () => {
|
||||
render(<Index />);
|
||||
|
||||
expect(screen.getByText('全部工具')).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: '时间戳' })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: 'JWT 解析' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('点击工具卡片应触发 navigateTo', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<Index />);
|
||||
|
||||
await user.click(screen.getByRole('button', { name: '时间戳' }));
|
||||
|
||||
expect(mockNavigateTo).toHaveBeenCalledTimes(1);
|
||||
expect(mockNavigateTo).toHaveBeenCalledWith('timestamp');
|
||||
});
|
||||
|
||||
it('有最近使用数据时应显示最近使用区块', () => {
|
||||
mockUseDashboard.mockReturnValue({
|
||||
visibleFeatures: [buildFeatureItem('timestamp')],
|
||||
recentFeatures: [buildFeatureItem('jwt')],
|
||||
showRecent: true,
|
||||
navigateTo: mockNavigateTo,
|
||||
});
|
||||
|
||||
render(<Index />);
|
||||
|
||||
expect(screen.getByText('最近使用')).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: 'JWT 解析' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('无最近使用数据时不应显示最近使用区块', () => {
|
||||
render(<Index />);
|
||||
|
||||
expect(screen.queryByText('最近使用')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('点击最近使用按钮应触发 navigateTo', async () => {
|
||||
const user = userEvent.setup();
|
||||
mockUseDashboard.mockReturnValue({
|
||||
visibleFeatures: [buildFeatureItem('timestamp')],
|
||||
recentFeatures: [buildFeatureItem('jwt')],
|
||||
showRecent: true,
|
||||
navigateTo: mockNavigateTo,
|
||||
});
|
||||
|
||||
render(<Index />);
|
||||
|
||||
await user.click(screen.getByRole('button', { name: 'JWT 解析' }));
|
||||
|
||||
expect(mockNavigateTo).toHaveBeenCalledWith('jwt');
|
||||
});
|
||||
|
||||
it('无可见工具时应显示空状态', () => {
|
||||
mockUseDashboard.mockReturnValue({
|
||||
visibleFeatures: [],
|
||||
recentFeatures: [],
|
||||
showRecent: false,
|
||||
navigateTo: mockNavigateTo,
|
||||
});
|
||||
|
||||
render(<Index />);
|
||||
|
||||
expect(screen.getByText('没有可用的工具')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -1,78 +0,0 @@
|
||||
import { renderHook } from '@testing-library/react';
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import { useRouter } from '@/providers/RouterProvider';
|
||||
import { useDashboard } from '../useDashboard';
|
||||
import type { PageType } from '@/types/storage';
|
||||
|
||||
vi.mock('@/providers/RouterProvider', () => ({
|
||||
useRouter: vi.fn(),
|
||||
}));
|
||||
|
||||
const mockNavigateTo = vi.fn();
|
||||
|
||||
function mockRouterState(
|
||||
overrides: {
|
||||
visiblePages?: PageType[];
|
||||
pageOrder?: PageType[];
|
||||
recentlyUsedTools?: PageType[];
|
||||
} = {},
|
||||
) {
|
||||
vi.mocked(useRouter).mockReturnValue({
|
||||
currentPage: 'dashboard',
|
||||
visiblePages: overrides.visiblePages ?? ['dashboard', 'timestamp', 'jwt'],
|
||||
pageOrder: overrides.pageOrder ?? ['jwt', 'timestamp'],
|
||||
recentlyUsedTools: overrides.recentlyUsedTools ?? [],
|
||||
isLoaded: true,
|
||||
navigateTo: mockNavigateTo,
|
||||
goHome: vi.fn(),
|
||||
setVisiblePages: vi.fn(),
|
||||
setPageOrder: vi.fn(),
|
||||
});
|
||||
}
|
||||
|
||||
describe('useDashboard', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
it('应透传 router 中的 navigateTo', () => {
|
||||
mockRouterState();
|
||||
|
||||
const { result } = renderHook(() => useDashboard());
|
||||
|
||||
expect(result.current.navigateTo).toBe(mockNavigateTo);
|
||||
});
|
||||
|
||||
it('recentlyUsedTools 有可见工具时应显示最近使用', () => {
|
||||
mockRouterState({
|
||||
visiblePages: ['dashboard', 'timestamp', 'jwt'],
|
||||
recentlyUsedTools: ['timestamp', 'jwt'],
|
||||
});
|
||||
|
||||
const { result } = renderHook(() => useDashboard());
|
||||
|
||||
expect(result.current.showRecent).toBe(true);
|
||||
expect(result.current.recentFeatures.map((item) => item.key)).toEqual(['timestamp', 'jwt']);
|
||||
});
|
||||
|
||||
it('recentlyUsedTools 为空时不应显示最近使用', () => {
|
||||
mockRouterState({ recentlyUsedTools: [] });
|
||||
|
||||
const { result } = renderHook(() => useDashboard());
|
||||
|
||||
expect(result.current.showRecent).toBe(false);
|
||||
expect(result.current.recentFeatures).toEqual([]);
|
||||
});
|
||||
|
||||
it('最近使用中的不可见工具应被过滤', () => {
|
||||
mockRouterState({
|
||||
visiblePages: ['dashboard', 'timestamp'],
|
||||
recentlyUsedTools: ['jwt', 'timestamp'],
|
||||
});
|
||||
|
||||
const { result } = renderHook(() => useDashboard());
|
||||
|
||||
expect(result.current.showRecent).toBe(true);
|
||||
expect(result.current.recentFeatures.map((item) => item.key)).toEqual(['timestamp']);
|
||||
});
|
||||
});
|
||||
@@ -1,34 +0,0 @@
|
||||
import { getFeatureByKey, type FeatureConfig } from '@/config/features';
|
||||
import type { PageType } from '@/types/storage';
|
||||
|
||||
export type DashboardFeature = FeatureConfig & {
|
||||
icon: NonNullable<FeatureConfig['icon']>;
|
||||
};
|
||||
|
||||
export interface DashboardFeatureItem {
|
||||
key: PageType;
|
||||
feature: DashboardFeature;
|
||||
}
|
||||
|
||||
function isDashboardFeature(feature: FeatureConfig): feature is DashboardFeature {
|
||||
return feature.icon != null;
|
||||
}
|
||||
|
||||
export function resolveDashboardFeatures(
|
||||
keys: PageType[],
|
||||
visiblePages: PageType[],
|
||||
): DashboardFeatureItem[] {
|
||||
const visibleSet = new Set(visiblePages);
|
||||
const items: DashboardFeatureItem[] = [];
|
||||
|
||||
for (const key of keys) {
|
||||
if (!visibleSet.has(key)) continue;
|
||||
|
||||
const feature = getFeatureByKey(key);
|
||||
if (!feature || !isDashboardFeature(feature)) continue;
|
||||
|
||||
items.push({ key, feature });
|
||||
}
|
||||
|
||||
return items;
|
||||
}
|
||||
@@ -1,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>
|
||||
);
|
||||
}
|
||||
@@ -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 };
|
||||
}
|
||||
Reference in New Issue
Block a user