fix(settings): 重置设置页切换滚动位置

Author: Licoy

src/pages/SettingsPage.tsx

@@ -1,3 +1,4 @@
+import { useLayoutEffect, useRef } from 'react';
 import { theme } from 'antd';
 import { useUIStore } from '@/stores';
 import {
@@ -38,6 +39,15 @@ export function SettingsPage() {
   const { token } = theme.useToken();
   const settingsSection = useUIStore((s) => s.settingsSection);
   const ContentComponent = SECTION_COMPONENTS[settingsSection];
+  const contentScrollRef = useRef<HTMLDivElement>(null);
+
+  useLayoutEffect(() => {
+    const contentScroller = contentScrollRef.current;
+    if (!contentScroller) return;
+
+    contentScroller.scrollTop = 0;
+    contentScroller.scrollLeft = 0;
+  }, [settingsSection]);
 
   return (
     <div className="flex h-full">
@@ -47,7 +57,11 @@ export function SettingsPage() {
       >
         <SettingsSidebar />
       </div>
-      <div className="min-w-0 flex-1 overflow-y-auto" style={{ backgroundColor: token.colorBgElevated }}>
+      <div
+        ref={contentScrollRef}
+        className="min-w-0 flex-1 overflow-y-auto"
+        style={{ backgroundColor: token.colorBgElevated }}
+      >
         <ContentComponent />
       </div>
     </div>

src/pages/__tests__/SettingsPage.test.tsx

@@ -0,0 +1,65 @@
+import { act, render, screen } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { useUIStore } from '@/stores';
+import { SettingsPage } from '../SettingsPage';
+
+vi.mock('antd', () => ({
+  theme: {
+    useToken: () => ({
+      token: {
+        colorBgContainer: '#ffffff',
+        colorBgElevated: '#f8f8f8',
+      },
+    }),
+  },
+}));
+
+vi.mock('@/components/settings', () => ({
+  SettingsSidebar: () => <nav>settings-sidebar</nav>,
+  ProviderSettings: () => <div>providers-content</div>,
+  GeneralSettings: () => <div>general-content</div>,
+  DisplaySettings: () => <div>display-content</div>,
+  ProxySettings: () => <div>proxy-content</div>,
+  ShortcutSettings: () => <div>shortcuts-content</div>,
+  DataManager: () => <div>data-content</div>,
+  AboutPage: () => <div>about-content</div>,
+  SearchProviderSettings: () => <div>search-providers-content</div>,
+  McpServerSettings: () => <div>mcp-servers-content</div>,
+  BackupCenter: () => <div>backup-content</div>,
+  StorageSpaceManager: () => <div>storage-content</div>,
+}));
+
+vi.mock('@/components/settings/DefaultModelSettings', () => ({
+  DefaultModelSettings: () => <div>default-model-content</div>,
+}));
+
+vi.mock('@/components/settings/ConversationSettings', () => ({
+  ConversationSettings: () => <div>conversation-settings-content</div>,
+}));
+
+describe('SettingsPage', () => {
+  beforeEach(() => {
+    act(() => {
+      useUIStore.setState({
+        activePage: 'settings',
+        previousPage: 'chat',
+        settingsSection: 'general',
+        selectedProviderId: null,
+      });
+    });
+  });
+
+  it('resets the content scroll position when switching settings sections', () => {
+    render(<SettingsPage />);
+
+    const contentScroller = screen.getByText('general-content').parentElement as HTMLElement;
+    contentScroller.scrollTop = 480;
+
+    act(() => {
+      useUIStore.getState().setSettingsSection('display');
+    });
+
+    expect(screen.getByText('display-content')).toBeInTheDocument();
+    expect(contentScroller.scrollTop).toBe(0);
+  });
+});