refactor: 移除 TopBar 组件,重构功能导航并引入主题切换按钮

- 删除 TopBar 及其相关组件和逻辑,简化布局结构。
- 新增 FeatureNav 组件,包含功能导航和主题切换按钮。
- 更新 README.md,反映新的组件结构和功能。
- 修改测试用例,确保新结构下的功能正常。
This commit is contained in:
2026-07-05 22:30:13 +08:00
parent 43038c5edb
commit b487f71512
17 changed files with 115 additions and 541 deletions
+31 -3
View File
@@ -2,6 +2,21 @@ 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';
import { ThemeModeProvider } from '@/providers/ThemeModeProvider';
Object.defineProperty(window, 'matchMedia', {
writable: true,
value: vi.fn().mockImplementation((query: string) => ({
matches: false,
media: query,
onchange: null,
addListener: vi.fn(),
removeListener: vi.fn(),
addEventListener: vi.fn(),
removeEventListener: vi.fn(),
dispatchEvent: vi.fn(),
})),
});
const mockNavigateTo = vi.fn();
@@ -28,8 +43,15 @@ describe('FeatureNav 组件', () => {
mockRouterValue.visiblePages = ['timestamp', 'jwt', 'storageCleaner'];
});
const renderFeatureNav = () =>
render(
<ThemeModeProvider>
<FeatureNav />
</ThemeModeProvider>,
);
it('应渲染全部可见工具图标', () => {
render(<FeatureNav />);
renderFeatureNav();
expect(screen.getByLabelText('JWT 解析')).toBeInTheDocument();
expect(screen.getByLabelText('时间戳')).toBeInTheDocument();
@@ -37,18 +59,24 @@ describe('FeatureNav 组件', () => {
});
it('点击图标应调用 navigateTo', () => {
render(<FeatureNav />);
renderFeatureNav();
fireEvent.click(screen.getByLabelText('JWT 解析'));
expect(mockNavigateTo).toHaveBeenCalledWith('jwt');
});
it('当前页对应项应有 active 样式与 aria-current', () => {
render(<FeatureNav />);
renderFeatureNav();
const activeButton = screen.getByLabelText('时间戳');
expect(activeButton).toHaveAttribute('aria-current', 'page');
expect(activeButton).toHaveClass('bg-muted');
expect(activeButton).toHaveClass('border-primary');
});
it('应渲染主题切换按钮', () => {
renderFeatureNav();
expect(screen.getByLabelText(/切换到/)).toBeInTheDocument();
});
});