fix(settings): reset scroll on tab switch (#4165)

This commit is contained in:
muleizh
2026-06-16 08:29:36 +08:00
committed by GitHub
Unverified
parent c548e7fcba
commit 12567b3229
2 changed files with 34 additions and 5 deletions
+19 -2
View File
@@ -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 { motion } from "framer-motion";
import { import {
Loader2, Loader2,
@@ -102,6 +109,7 @@ export function SettingsPage({
const [activeTab, setActiveTab] = useState<string>("general"); const [activeTab, setActiveTab] = useState<string>("general");
const [showRestartPrompt, setShowRestartPrompt] = useState(false); const [showRestartPrompt, setShowRestartPrompt] = useState(false);
const tabScrollContainerRef = useRef<HTMLDivElement>(null);
useEffect(() => { useEffect(() => {
if (open) { if (open) {
@@ -116,6 +124,12 @@ export function SettingsPage({
} }
}, [requiresRestart]); }, [requiresRestart]);
useLayoutEffect(() => {
if (tabScrollContainerRef.current) {
tabScrollContainerRef.current.scrollTop = 0;
}
}, [activeTab]);
const closeAfterSave = useCallback(() => { const closeAfterSave = useCallback(() => {
// 保存成功后关闭:不再重置语言,避免需要“保存两次”才生效 // 保存成功后关闭:不再重置语言,避免需要“保存两次”才生效
acknowledgeRestart(); acknowledgeRestart();
@@ -226,7 +240,10 @@ export function SettingsPage({
</TabsList> </TabsList>
<div className="flex-1 min-h-0 flex flex-col"> <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"> <TabsContent value="general" className="space-y-6 mt-0">
{settings ? ( {settings ? (
<motion.div <motion.div
+15 -3
View File
@@ -344,9 +344,7 @@ describe("SettingsPage Component", () => {
fireEvent.click(screen.getByText("settings.advanced.data.title")); fireEvent.click(screen.getByText("settings.advanced.data.title"));
// 有文件时,点击导入按钮执行 importConfig // 有文件时,点击导入按钮执行 importConfig
fireEvent.click( fireEvent.click(screen.getByRole("button", { name: /settings\.import/ }));
screen.getByRole("button", { name: /settings\.import/ }),
);
expect(importExportMock.importConfig).toHaveBeenCalled(); expect(importExportMock.importConfig).toHaveBeenCalled();
fireEvent.click( fireEvent.click(
@@ -359,6 +357,20 @@ describe("SettingsPage Component", () => {
expect(importExportMock.clearSelection).toHaveBeenCalled(); 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 () => { it("should pass onImportSuccess callback to useImportExport hook", async () => {
const onImportSuccess = vi.fn(); const onImportSuccess = vi.fn();