mirror of
https://github.com/farion1231/cc-switch.git
synced 2026-06-16 13:34:04 +08:00
fix(settings): reset scroll on tab switch (#4165)
This commit is contained in:
committed by
GitHub
Unverified
parent
c548e7fcba
commit
12567b3229
@@ -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
|
||||
|
||||
@@ -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();
|
||||
|
||||
|
||||
Reference in New Issue
Block a user