From b487f715125df7e7d57d9bf7c74cf037914d736c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <2712495353@qq.com> Date: Sun, 5 Jul 2026 22:30:13 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E7=A7=BB=E9=99=A4=20TopBar=20?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E9=87=8D=E6=9E=84=E5=8A=9F=E8=83=BD?= =?UTF-8?q?=E5=AF=BC=E8=88=AA=E5=B9=B6=E5=BC=95=E5=85=A5=E4=B8=BB=E9=A2=98?= =?UTF-8?q?=E5=88=87=E6=8D=A2=E6=8C=89=E9=92=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 删除 TopBar 及其相关组件和逻辑，简化布局结构。 - 新增 FeatureNav 组件，包含功能导航和主题切换按钮。 - 更新 README.md，反映新的组件结构和功能。 - 修改测试用例，确保新结构下的功能正常。 --- src/entrypoints/popup/App.tsx | 4 +- src/layout/FeatureNav/ThemeToggleButton.tsx | 20 +++ .../FeatureNav/__tests__/index.test.tsx | 34 +++- src/layout/FeatureNav/index.tsx | 52 +++--- src/layout/FeatureNav/useThemeToggle.ts | 24 +++ src/layout/README.md | 20 +-- src/layout/TopBar/SearchDropdown.tsx | 45 ----- src/layout/TopBar/SearchInput.tsx | 55 ------ src/layout/TopBar/SearchResultItem.tsx | 30 ---- src/layout/TopBar/TopBarActions.tsx | 34 ---- src/layout/TopBar/__tests__/constants.test.ts | 37 ---- src/layout/TopBar/__tests__/index.test.tsx | 63 ------- src/layout/TopBar/constants.ts | 9 - src/layout/TopBar/index.tsx | 52 ------ src/layout/TopBar/useTopBar.ts | 169 ------------------ src/types/storage.d.ts | 2 - src/utils/__tests__/useStorageState.test.ts | 6 +- 17 files changed, 115 insertions(+), 541 deletions(-) create mode 100644 src/layout/FeatureNav/ThemeToggleButton.tsx create mode 100644 src/layout/FeatureNav/useThemeToggle.ts delete mode 100644 src/layout/TopBar/SearchDropdown.tsx delete mode 100644 src/layout/TopBar/SearchInput.tsx delete mode 100644 src/layout/TopBar/SearchResultItem.tsx delete mode 100644 src/layout/TopBar/TopBarActions.tsx delete mode 100644 src/layout/TopBar/__tests__/constants.test.ts delete mode 100644 src/layout/TopBar/__tests__/index.test.tsx delete mode 100644 src/layout/TopBar/constants.ts delete mode 100644 src/layout/TopBar/index.tsx delete mode 100644 src/layout/TopBar/useTopBar.ts diff --git a/src/entrypoints/popup/App.tsx b/src/entrypoints/popup/App.tsx index c7b3915..3110456 100644 --- a/src/entrypoints/popup/App.tsx +++ b/src/entrypoints/popup/App.tsx @@ -1,5 +1,4 @@ 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'; @@ -13,8 +12,7 @@ export default function App() { pageOrderKey="app/popupPageOrder" >
-
- +
diff --git a/src/layout/FeatureNav/ThemeToggleButton.tsx b/src/layout/FeatureNav/ThemeToggleButton.tsx new file mode 100644 index 0000000..aebcb22 --- /dev/null +++ b/src/layout/FeatureNav/ThemeToggleButton.tsx @@ -0,0 +1,20 @@ +import { Button } from '@/components/ui/button'; +import { useThemeToggle } from './useThemeToggle'; + +export default function ThemeToggleButton() { + const { ThemeIcon, themeTitle, cycleThemeMode } = useThemeToggle(); + + return ( + + ); +} diff --git a/src/layout/FeatureNav/__tests__/index.test.tsx b/src/layout/FeatureNav/__tests__/index.test.tsx index b05ed70..be5d4d2 100644 --- a/src/layout/FeatureNav/__tests__/index.test.tsx +++ b/src/layout/FeatureNav/__tests__/index.test.tsx @@ -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( + + + , + ); + it('应渲染全部可见工具图标', () => { - render(); + renderFeatureNav(); expect(screen.getByLabelText('JWT 解析')).toBeInTheDocument(); expect(screen.getByLabelText('时间戳')).toBeInTheDocument(); @@ -37,18 +59,24 @@ describe('FeatureNav 组件', () => { }); it('点击图标应调用 navigateTo', () => { - render(); + renderFeatureNav(); fireEvent.click(screen.getByLabelText('JWT 解析')); expect(mockNavigateTo).toHaveBeenCalledWith('jwt'); }); it('当前页对应项应有 active 样式与 aria-current', () => { - render(); + 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(); + }); }); diff --git a/src/layout/FeatureNav/index.tsx b/src/layout/FeatureNav/index.tsx index f2cd436..0206bff 100644 --- a/src/layout/FeatureNav/index.tsx +++ b/src/layout/FeatureNav/index.tsx @@ -1,35 +1,39 @@ import { cn } from '@/lib/utils'; +import ThemeToggleButton from './ThemeToggleButton'; import { useFeatureNav } from './useFeatureNav'; export default function FeatureNav() { const { navItems, currentPage, navigateTo } = useFeatureNav(); return ( -