From 12567b3229806c74469a69979e56fa4b2ec2daaf Mon Sep 17 00:00:00 2001
From: muleizh <muleizh@outlook.com>
Date: Tue, 16 Jun 2026 08:29:36 +0800
Subject: [PATCH] fix(settings): reset scroll on tab switch (#4165)

---
 src/components/settings/SettingsPage.tsx | 21 +++++++++++++++++++--
 tests/components/SettingsDialog.test.tsx | 18 +++++++++++++++---
 2 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/src/components/settings/SettingsPage.tsx b/src/components/settings/SettingsPage.tsx
index 748c926ad..49cf0dc79 100644
--- a/src/components/settings/SettingsPage.tsx
+++ b/src/components/settings/SettingsPage.tsx
@@ -1,4 +1,11 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { motion } from "framer-motion";
 import {
   Loader2,
@@ -102,6 +109,7 @@ export function SettingsPage({
 
   const [activeTab, setActiveTab] = useState<string>("general");
   const [showRestartPrompt, setShowRestartPrompt] = useState(false);
+  const tabScrollContainerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (open) {
@@ -116,6 +124,12 @@ export function SettingsPage({
     }
   }, [requiresRestart]);
 
+  useLayoutEffect(() => {
+    if (tabScrollContainerRef.current) {
+      tabScrollContainerRef.current.scrollTop = 0;
+    }
+  }, [activeTab]);
+
   const closeAfterSave = useCallback(() => {
     // 保存成功后关闭：不再重置语言，避免需要“保存两次”才生效
     acknowledgeRestart();
@@ -226,7 +240,10 @@ export function SettingsPage({
           </TabsList>
 
           <div className="flex-1 min-h-0 flex flex-col">
-            <div className="flex-1 overflow-y-auto overflow-x-hidden pr-2">
+            <div
+              ref={tabScrollContainerRef}
+              className="flex-1 overflow-y-auto overflow-x-hidden pr-2"
+            >
               <TabsContent value="general" className="space-y-6 mt-0">
                 {settings ? (
                   <motion.div
diff --git a/tests/components/SettingsDialog.test.tsx b/tests/components/SettingsDialog.test.tsx
index 54c27aece..f8fcdc631 100644
--- a/tests/components/SettingsDialog.test.tsx
+++ b/tests/components/SettingsDialog.test.tsx
@@ -344,9 +344,7 @@ describe("SettingsPage Component", () => {
     fireEvent.click(screen.getByText("settings.advanced.data.title"));
 
     // 有文件时，点击导入按钮执行 importConfig
-    fireEvent.click(
-      screen.getByRole("button", { name: /settings\.import/ }),
-    );
+    fireEvent.click(screen.getByRole("button", { name: /settings\.import/ }));
     expect(importExportMock.importConfig).toHaveBeenCalled();
 
     fireEvent.click(
@@ -359,6 +357,20 @@ describe("SettingsPage Component", () => {
     expect(importExportMock.clearSelection).toHaveBeenCalled();
   });
 
+  it("should reset tab content scroll position when switching settings tabs", () => {
+    const { container } = renderSettingsPage();
+    const scrollContainer = container.querySelector(
+      ".overflow-y-auto",
+    ) as HTMLDivElement | null;
+
+    expect(scrollContainer).not.toBeNull();
+
+    scrollContainer!.scrollTop = 640;
+    fireEvent.click(screen.getByText("settings.tabAdvanced"));
+
+    expect(scrollContainer!.scrollTop).toBe(0);
+  });
+
   it("should pass onImportSuccess callback to useImportExport hook", async () => {
     const onImportSuccess = vi.fn();