fix(RouterProvider): 将 goBack 重命名为 goHome,修复跨窗同步 merge 不一致

API 命名与实际行为(返回 dashboard)对齐;storage.onChanged 同步 visiblePages/pageOrder 时应用 mergeWithDefaults,与初始化逻辑保持一致。

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
雨霖铃
2026-06-19 00:38:01 +08:00
parent aa63723b80
commit 8f9ff27034
6 changed files with 68 additions and 15 deletions
+3 -3
View File
@@ -11,7 +11,7 @@ const SEARCH_HISTORY_LIMIT = 10;
const SEARCH_HISTORY_DISPLAY = 5; const SEARCH_HISTORY_DISPLAY = 5;
export default function TopBar() { export default function TopBar() {
const { currentPage, goBack, navigateTo } = useRouter(); const { currentPage, goHome, navigateTo } = useRouter();
const { mode, setMode } = useThemeMode(); const { mode, setMode } = useThemeMode();
const [searchQuery, setSearchQuery] = useState(''); const [searchQuery, setSearchQuery] = useState('');
@@ -138,8 +138,8 @@ export default function TopBar() {
{!isDashboard && ( {!isDashboard && (
<button <button
type="button" type="button"
onClick={goBack} onClick={goHome}
aria-label={'返回'} aria-label={'返回首页'}
className="flex h-8 w-8 items-center justify-center rounded-md border border-input bg-background text-muted-foreground shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground" className="flex h-8 w-8 items-center justify-center rounded-md border border-input bg-background text-muted-foreground shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground"
> >
<ArrowLeft className="h-4 w-4" /> <ArrowLeft className="h-4 w-4" />
@@ -12,7 +12,7 @@ const mockRouterValue = {
isLoaded: true, isLoaded: true,
navigateTo: vi.fn(), navigateTo: vi.fn(),
syncNavigation: vi.fn(), syncNavigation: vi.fn(),
goBack: vi.fn(), goHome: vi.fn(),
setVisiblePages: vi.fn(), setVisiblePages: vi.fn(),
setPageOrder: vi.fn(), setPageOrder: vi.fn(),
}; };
+5 -5
View File
@@ -27,7 +27,7 @@ const mockRouterValue = {
isLoaded: true, isLoaded: true,
navigateTo: vi.fn(), navigateTo: vi.fn(),
syncNavigation: vi.fn(), syncNavigation: vi.fn(),
goBack: vi.fn(), goHome: vi.fn(),
setVisiblePages: vi.fn(), setVisiblePages: vi.fn(),
setPageOrder: vi.fn(), setPageOrder: vi.fn(),
}; };
@@ -54,7 +54,7 @@ describe('TopBar 组件', () => {
it('不在 dashboard 时应渲染返回按钮', () => { it('不在 dashboard 时应渲染返回按钮', () => {
mockRouterValue.currentPage = 'timestamp'; mockRouterValue.currentPage = 'timestamp';
renderWithProvider(<TopBar />); renderWithProvider(<TopBar />);
expect(screen.getByLabelText('返回')).toBeInTheDocument(); expect(screen.getByLabelText('返回首页')).toBeInTheDocument();
}); });
it('在 dashboard 上不应渲染返回按钮', () => { it('在 dashboard 上不应渲染返回按钮', () => {
@@ -65,12 +65,12 @@ describe('TopBar 组件', () => {
}); });
describe('交互测试', () => { describe('交互测试', () => {
it('点击返回按钮时应调用 goBack', () => { it('点击返回按钮时应调用 goHome', () => {
mockRouterValue.currentPage = 'timestamp'; mockRouterValue.currentPage = 'timestamp';
renderWithProvider(<TopBar />); renderWithProvider(<TopBar />);
fireEvent.click(screen.getByLabelText('返回')); fireEvent.click(screen.getByLabelText('返回首页'));
expect(mockRouterValue.goBack).toHaveBeenCalledTimes(1); expect(mockRouterValue.goHome).toHaveBeenCalledTimes(1);
}); });
}); });
}); });
+1 -1
View File
@@ -41,7 +41,7 @@ React.StrictMode
导出: 导出:
- `RouterProvider` 组件 - `RouterProvider` 组件
- `useRouter()` Hook — 获取 `currentPage``visiblePages``pageOrder``navigateTo``goBack` - `useRouter()` Hook — 获取 `currentPage``visiblePages``pageOrder``navigateTo``goHome`
## ThemeModeProvider.tsx ## ThemeModeProvider.tsx
+5 -5
View File
@@ -53,7 +53,7 @@ interface RouterContextType {
recentlyUsedTools: PageType[]; recentlyUsedTools: PageType[];
isLoaded: boolean; isLoaded: boolean;
navigateTo: (page: PageType) => void; navigateTo: (page: PageType) => void;
goBack: () => void; goHome: () => void;
setVisiblePages: (pages: PageType[]) => void; setVisiblePages: (pages: PageType[]) => void;
setPageOrder: (pages: PageType[]) => void; setPageOrder: (pages: PageType[]) => void;
} }
@@ -274,13 +274,13 @@ export function RouterProvider({
if (changes[visiblePagesKey as string]) { if (changes[visiblePagesKey as string]) {
const newPages = changes[visiblePagesKey as string].newValue; const newPages = changes[visiblePagesKey as string].newValue;
if (isValidPageList(newPages)) { if (isValidPageList(newPages)) {
setVisiblePages(newPages); setVisiblePages(mergeWithDefaults(newPages, getDefaultVisibleFeatureKeys()));
} }
} }
if (changes[pageOrderKey as string]) { if (changes[pageOrderKey as string]) {
const newOrder = changes[pageOrderKey as string].newValue; const newOrder = changes[pageOrderKey as string].newValue;
if (isValidPageList(newOrder)) { if (isValidPageList(newOrder)) {
setPageOrder(newOrder); setPageOrder(mergeWithDefaults(newOrder, getDefaultPageOrder()));
} }
} }
if (changes['app/recentlyUsedTools']) { if (changes['app/recentlyUsedTools']) {
@@ -316,7 +316,7 @@ export function RouterProvider({
}); });
}; };
const goBack = () => { const goHome = () => {
setCurrentPage('dashboard'); setCurrentPage('dashboard');
}; };
@@ -329,7 +329,7 @@ export function RouterProvider({
recentlyUsedTools, recentlyUsedTools,
isLoaded, isLoaded,
navigateTo, navigateTo,
goBack, goHome,
setVisiblePages, setVisiblePages,
setPageOrder, setPageOrder,
}} }}
@@ -1,5 +1,6 @@
import { beforeEach, describe, expect, it, vi } from 'vitest'; import { beforeEach, describe, expect, it, vi } from 'vitest';
import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'; import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
import { browser } from 'wxt/browser';
import { RouterProvider, useRouter } from '@/providers/RouterProvider'; import { RouterProvider, useRouter } from '@/providers/RouterProvider';
import { storageUtil } from '@/utils/chromeStorage'; import { storageUtil } from '@/utils/chromeStorage';
@@ -224,6 +225,58 @@ describe('RouterProvider', () => {
expect(pageOrder).toBeDefined(); expect(pageOrder).toBeDefined();
}); });
it('storage.onChanged 同步 visiblePages 时应合并缺失的新功能', async () => {
(storageUtil.get as any).mockImplementation((_key: string, defaultValue: unknown) =>
Promise.resolve(defaultValue),
);
render(
<RouterProvider visiblePagesKey="app/popupVisiblePages" pageOrderKey="app/popupPageOrder">
<TestComponent />
</RouterProvider>,
);
await waitFor(() => {
expect(browser.storage.onChanged.addListener).toHaveBeenCalled();
});
const storageChangeHandler = vi.mocked(browser.storage.onChanged.addListener).mock
.calls[0][0] as (changes: Record<string, { newValue?: unknown }>) => void;
const oldVisiblePages = [
'dashboard',
'timestamp',
'storageCleaner',
'qrCode',
'textStatistics',
'jwt',
'jsonDiff',
];
const oldPageOrder = [
'timestamp',
'storageCleaner',
'qrCode',
'textStatistics',
'jwt',
'jsonDiff',
];
await act(async () => {
storageChangeHandler({
'app/popupVisiblePages': { newValue: oldVisiblePages },
'app/popupPageOrder': { newValue: oldPageOrder },
});
});
await waitFor(() => {
const visiblePages = screen.getByTestId('visible-pages').textContent!;
const pageOrder = screen.getByTestId('page-order').textContent!;
expect(visiblePages.startsWith('dashboard,timestamp')).toBe(true);
expect(pageOrder.startsWith('timestamp,storageCleaner')).toBe(true);
});
});
it('组件卸载时不应设置 isLoaded 状态(竞态条件防护)', async () => { it('组件卸载时不应设置 isLoaded 状态(竞态条件防护)', async () => {
let resolveStorage: (value: unknown) => void; let resolveStorage: (value: unknown) => void;
const storagePromise = new Promise((resolve) => { const storagePromise = new Promise((resolve) => {