From 8f9ff270343b854669e278675c709110dc35056f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Fri, 19 Jun 2026 00:38:01 +0800
Subject: [PATCH] =?UTF-8?q?fix(RouterProvider):=20=E5=B0=86=20goBack=20?=
 =?UTF-8?q?=E9=87=8D=E5=91=BD=E5=90=8D=E4=B8=BA=20goHome=EF=BC=8C=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E8=B7=A8=E7=AA=97=E5=90=8C=E6=AD=A5=20merge=20?=
 =?UTF-8?q?=E4=B8=8D=E4=B8=80=E8=87=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/components/TopBar.tsx                     |  6 +--
 .../__tests__/RouterContainer.test.tsx        |  2 +-
 src/components/__tests__/TopBar.test.tsx      | 10 ++--
 src/providers/README.md                       |  2 +-
 src/providers/RouterProvider.tsx              | 10 ++--
 .../__tests__/RouterProvider.test.tsx         | 53 +++++++++++++++++++
 6 files changed, 68 insertions(+), 15 deletions(-)

diff --git a/src/components/TopBar.tsx b/src/components/TopBar.tsx
index 3cca6f3..a943e48 100644
--- a/src/components/TopBar.tsx
+++ b/src/components/TopBar.tsx
@@ -11,7 +11,7 @@ const SEARCH_HISTORY_LIMIT = 10;
 const SEARCH_HISTORY_DISPLAY = 5;
 
 export default function TopBar() {
-  const { currentPage, goBack, navigateTo } = useRouter();
+  const { currentPage, goHome, navigateTo } = useRouter();
   const { mode, setMode } = useThemeMode();
 
   const [searchQuery, setSearchQuery] = useState('');
@@ -138,8 +138,8 @@ export default function TopBar() {
         {!isDashboard && (
           <button
             type="button"
-            onClick={goBack}
-            aria-label={'返回'}
+            onClick={goHome}
+            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"
           >
             <ArrowLeft className="h-4 w-4" />
diff --git a/src/components/__tests__/RouterContainer.test.tsx b/src/components/__tests__/RouterContainer.test.tsx
index 4ab1e39..a913afd 100644
--- a/src/components/__tests__/RouterContainer.test.tsx
+++ b/src/components/__tests__/RouterContainer.test.tsx
@@ -12,7 +12,7 @@ const mockRouterValue = {
   isLoaded: true,
   navigateTo: vi.fn(),
   syncNavigation: vi.fn(),
-  goBack: vi.fn(),
+  goHome: vi.fn(),
   setVisiblePages: vi.fn(),
   setPageOrder: vi.fn(),
 };
diff --git a/src/components/__tests__/TopBar.test.tsx b/src/components/__tests__/TopBar.test.tsx
index 28366cc..f1625b0 100644
--- a/src/components/__tests__/TopBar.test.tsx
+++ b/src/components/__tests__/TopBar.test.tsx
@@ -27,7 +27,7 @@ const mockRouterValue = {
   isLoaded: true,
   navigateTo: vi.fn(),
   syncNavigation: vi.fn(),
-  goBack: vi.fn(),
+  goHome: vi.fn(),
   setVisiblePages: vi.fn(),
   setPageOrder: vi.fn(),
 };
@@ -54,7 +54,7 @@ describe('TopBar 组件', () => {
     it('不在 dashboard 时应渲染返回按钮', () => {
       mockRouterValue.currentPage = 'timestamp';
       renderWithProvider(<TopBar />);
-      expect(screen.getByLabelText('返回')).toBeInTheDocument();
+      expect(screen.getByLabelText('返回首页')).toBeInTheDocument();
     });
 
     it('在 dashboard 上不应渲染返回按钮', () => {
@@ -65,12 +65,12 @@ describe('TopBar 组件', () => {
   });
 
   describe('交互测试', () => {
-    it('点击返回按钮时应调用 goBack', () => {
+    it('点击返回按钮时应调用 goHome', () => {
       mockRouterValue.currentPage = 'timestamp';
       renderWithProvider(<TopBar />);
 
-      fireEvent.click(screen.getByLabelText('返回'));
-      expect(mockRouterValue.goBack).toHaveBeenCalledTimes(1);
+      fireEvent.click(screen.getByLabelText('返回首页'));
+      expect(mockRouterValue.goHome).toHaveBeenCalledTimes(1);
     });
   });
 });
diff --git a/src/providers/README.md b/src/providers/README.md
index 22d2209..5bb97ce 100644
--- a/src/providers/README.md
+++ b/src/providers/README.md
@@ -41,7 +41,7 @@ React.StrictMode
 导出：
 
 - `RouterProvider` 组件
-- `useRouter()` Hook — 获取 `currentPage`、`visiblePages`、`pageOrder`、`navigateTo`、`goBack` 等
+- `useRouter()` Hook — 获取 `currentPage`、`visiblePages`、`pageOrder`、`navigateTo`、`goHome` 等
 
 ## ThemeModeProvider.tsx
 
diff --git a/src/providers/RouterProvider.tsx b/src/providers/RouterProvider.tsx
index 6c90a41..109d971 100644
--- a/src/providers/RouterProvider.tsx
+++ b/src/providers/RouterProvider.tsx
@@ -53,7 +53,7 @@ interface RouterContextType {
   recentlyUsedTools: PageType[];
   isLoaded: boolean;
   navigateTo: (page: PageType) => void;
-  goBack: () => void;
+  goHome: () => void;
   setVisiblePages: (pages: PageType[]) => void;
   setPageOrder: (pages: PageType[]) => void;
 }
@@ -274,13 +274,13 @@ export function RouterProvider({
       if (changes[visiblePagesKey as string]) {
         const newPages = changes[visiblePagesKey as string].newValue;
         if (isValidPageList(newPages)) {
-          setVisiblePages(newPages);
+          setVisiblePages(mergeWithDefaults(newPages, getDefaultVisibleFeatureKeys()));
         }
       }
       if (changes[pageOrderKey as string]) {
         const newOrder = changes[pageOrderKey as string].newValue;
         if (isValidPageList(newOrder)) {
-          setPageOrder(newOrder);
+          setPageOrder(mergeWithDefaults(newOrder, getDefaultPageOrder()));
         }
       }
       if (changes['app/recentlyUsedTools']) {
@@ -316,7 +316,7 @@ export function RouterProvider({
     });
   };
 
-  const goBack = () => {
+  const goHome = () => {
     setCurrentPage('dashboard');
   };
 
@@ -329,7 +329,7 @@ export function RouterProvider({
         recentlyUsedTools,
         isLoaded,
         navigateTo,
-        goBack,
+        goHome,
         setVisiblePages,
         setPageOrder,
       }}
diff --git a/src/providers/__tests__/RouterProvider.test.tsx b/src/providers/__tests__/RouterProvider.test.tsx
index 9f55b9d..7550582 100644
--- a/src/providers/__tests__/RouterProvider.test.tsx
+++ b/src/providers/__tests__/RouterProvider.test.tsx
@@ -1,5 +1,6 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { browser } from 'wxt/browser';
 import { RouterProvider, useRouter } from '@/providers/RouterProvider';
 import { storageUtil } from '@/utils/chromeStorage';
 
@@ -224,6 +225,58 @@ describe('RouterProvider', () => {
     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 () => {
     let resolveStorage: (value: unknown) => void;
     const storagePromise = new Promise((resolve) => {