refactor(scroll): remove KeepAlive mode and simplify restore logic

- Remove KeepAlive wrapping from AppLayout
- Replace ResizeObserver with requestAnimationFrame loop
- Remove useActivate/useUnactivate lifecycle hooks
- Simplify useScrollRestore options (remove useKeepAlive,
  stabilityDelay)
- Add 3xl/4xl responsive breakpoints for ultra-wide screens
- Adjust Cards grid container structure

Author: huoshen80

package.json

@@ -52,7 +52,6 @@
 		"pathe": "^2.0.3",
 		"pinyin-pro": "^3.28.1",
 		"react": "^18.3.1",
-		"react-activation": "^0.13.4",
 		"react-dom": "^18.3.1",
 		"react-i18next": "^17.0.4",
 		"react-router-dom": "^7.14.2",

pnpm-lock.yaml

@@ -1,7 +1,6 @@
 import "./App.css";
 import "@/utils/i18n";
 import { SnackbarProvider } from "notistack";
-import { AliveScope } from "react-activation";
 import { useTranslation } from "react-i18next";
 import { Outlet } from "react-router-dom";
 import WindowsHandler from "@/components/Windows";
@@ -31,9 +30,7 @@ const App: React.FC = () => {
 			<SnackbarUtilsConfigurator />
 			<ToolpadReactRouterAppProvider navigation={Navigation}>
 				<WindowsHandler />
-				<AliveScope>
-					<Outlet />
-				</AliveScope>
+				<Outlet />
 			</ToolpadReactRouterAppProvider>
 		</SnackbarProvider>
 	);

src/App.tsx

@@ -9,7 +9,6 @@ import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
 import { DashboardLayout } from "@toolpad/core/DashboardLayout";
 import { PageContainer } from "@toolpad/core/PageContainer";
-import { KeepAlive } from "react-activation";
 import { useTranslation } from "react-i18next";
 import { Outlet, useLocation, useNavigate } from "react-router-dom";
 import AddModal from "@/components/AddModal";
@@ -153,13 +152,7 @@ export const Layout: React.FC = () => {
 							},
 						}}
 					>
-						<KeepAlive
-							name="libraries"
-							cacheKey="libraries"
-							saveScrollPosition={false}
-						>
-							<Outlet />
-						</KeepAlive>
+						<Outlet />
 					</PageContainer>
 				) : (
 					<Outlet />

src/components/AppLayout.tsx

@@ -368,7 +368,7 @@ export const CardItem = memo(
 			return (
 				<Card
 					ref={ref}
-					className={`group relative min-w-24 max-w-full transition-transform [content-visibility:auto] [contain-intrinsic-size:auto_280px] ${isActive ? "scale-y-105" : "scale-y-100"}`}
+					className={`group relative min-w-24 max-w-full transition-transform ${isActive ? "scale-y-105" : "scale-y-100"}`}
 					onContextMenu={onContextMenu}
 					{...props}
 				>
@@ -754,11 +754,7 @@ const Cards: React.FC<CardsProps> = ({ gamesData, categoryId }) => {
 					onRemoveFromCategory={handleRemoveFromCategory}
 				/>
 			)}
-			<div
-				className={
-					"text-center grid lg:grid-cols-6 xl:grid-cols-7 2xl:grid-cols-8 gap-4"
-				}
-			>
+			<div className="flex-1 min-h-0">
 				<RightMenu
 					id={menuPosition?.cardId}
 					isopen={Boolean(menuPosition)}
@@ -772,14 +768,20 @@ const Cards: React.FC<CardsProps> = ({ gamesData, categoryId }) => {
 					}}
 				/>
 
-				{games.map((card) => {
-					const props = getCardProps(card);
-					return isSortable ? (
-						<SortableCardItem key={card.id} {...props} />
-					) : (
-						<CardItem key={card.id} {...props} />
-					);
-				})}
+				<div
+					className={
+						"text-center grid lg:grid-cols-6 xl:grid-cols-7 2xl:grid-cols-8 3xl:grid-cols-10 4xl:grid-cols-12 gap-4"
+					}
+				>
+					{games.map((card) => {
+						const props = getCardProps(card);
+						return isSortable ? (
+							<SortableCardItem key={card.id} {...props} />
+						) : (
+							<CardItem key={card.id} {...props} />
+						);
+					})}
+				</div>
 			</div>
 		</>
 	);

src/components/Cards.tsx

@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useRef } from "react";
-import { useActivate, useUnactivate } from "react-activation";
 import { useLocation } from "react-router-dom";
 
 const scrollPositions: Record<string, number> = {};
@@ -21,41 +20,23 @@ interface UseScrollRestoreOptions {
 	timeout?: number;
 	/** 是否启用调试日志 */
 	debug?: boolean;
-	/** 内容稳定检测的等待时间（ms），默认 150 */
-	stabilityDelay?: number;
-	/** 是否在 KeepAlive 中使用 */
-	useKeepAlive?: boolean;
 }
 
 const DEFAULT_OPTIONS: Required<Omit<UseScrollRestoreOptions, "isLoading">> = {
 	containerSelector: "main",
 	timeout: 1500,
 	debug: false,
-	stabilityDelay: 0,
-	useKeepAlive: false,
 };
 
 /**
- * 滚动位置还原 Hook (优化版)
- *
- * 特性：
- * - 智能检测内容是否渲染完成（高度稳定检测）
- * - 支持滚动到底部的场景
- * - 避免滚动抖动和跳跃
- * - 自动清理资源，防止内存泄漏
+ * 滚动位置还原 Hook
+ * 等页面数据加载完成后，用 requestAnimationFrame 等待内容高度足够再恢复。
  */
 export function useScrollRestore(
 	scrollPath: string,
 	options: UseScrollRestoreOptions = {},
 ) {
-	const {
-		containerSelector,
-		isLoading,
-		timeout,
-		debug,
-		stabilityDelay,
-		useKeepAlive,
-	} = {
+	const { containerSelector, isLoading, timeout, debug } = {
 		...DEFAULT_OPTIONS,
 		...options,
 	};
@@ -65,8 +46,6 @@ export function useScrollRestore(
 	const cleanupRef = useRef<(() => void) | null>(null);
 	const settledRef = useRef(false);
 	const lastPathRef = useRef<string>("");
-	const lastHeightRef = useRef(0);
-	const stabilityTimerRef = useRef<number | null>(null);
 
 	const log = useCallback(
 		(...args: Parameters<Console["log"]>) => {
@@ -87,7 +66,6 @@ export function useScrollRestore(
 		if (lastPathRef.current !== location.pathname) {
 			settledRef.current = false;
 			lastPathRef.current = location.pathname;
-			lastHeightRef.current = 0;
 		}
 
 		// 清理上一次的副作用
@@ -126,28 +104,26 @@ export function useScrollRestore(
 			return;
 		}
 
-		let ro: ResizeObserver | null = null;
+		let frameId: number | null = null;
 		let fallbackTimer: number | null = null;
+		let cancelled = false;
 
 		// 清理函数（先定义，避免在 performRestore 中引用未定义的变量）
 		const cleanup = () => {
-			if (ro) {
-				ro.disconnect();
-				ro = null;
+			cancelled = true;
+			if (frameId !== null) {
+				window.cancelAnimationFrame(frameId);
+				frameId = null;
 			}
 			if (fallbackTimer !== null) {
 				window.clearTimeout(fallbackTimer);
 				fallbackTimer = null;
 			}
-			if (stabilityTimerRef.current !== null) {
-				window.clearTimeout(stabilityTimerRef.current);
-				stabilityTimerRef.current = null;
-			}
 		};
 
 		// 执行滚动恢复
 		const performRestore = (reason: string) => {
-			if (settledRef.current) return;
+			if (settledRef.current || cancelled) return;
 
 			const maxScroll = Math.max(
 				0,
@@ -172,67 +148,24 @@ export function useScrollRestore(
 			cleanup();
 		};
 
-		// 检查内容高度是否稳定
-		const checkStability = () => {
-			const currentHeight = container.scrollHeight;
-			const maxScroll = currentHeight - container.clientHeight;
+		const tryRestore = () => {
+			if (settledRef.current || cancelled) return;
 
-			log("Height check:", {
-				current: currentHeight,
-				last: lastHeightRef.current,
-				maxScroll,
-				target,
-			});
+			const maxScroll = Math.max(
+				0,
+				container.scrollHeight - container.clientHeight,
+			);
 
-			// 情况1: 内容已经足够高，可以直接恢复
 			if (maxScroll >= target) {
 				performRestore("content sufficient");
 				return;
 			}
 
-			// 情况2: 高度稳定（不再增长）
-			if (
-				lastHeightRef.current > 0 &&
-				currentHeight === lastHeightRef.current
-			) {
-				// 高度不再变化，说明内容已渲染完成
-				// 即使 maxScroll < target，也恢复到最大可滚动位置
-				performRestore("content stable");
-				return;
-			}
-
-			// 更新上次高度
-			lastHeightRef.current = currentHeight;
-
-			// 清除旧的稳定性计时器
-			if (stabilityTimerRef.current !== null) {
-				window.clearTimeout(stabilityTimerRef.current);
-			}
-
-			// 设置新的稳定性计时器
-			// 如果在 stabilityDelay 时间内高度没有变化，认为内容已稳定
-			stabilityTimerRef.current = window.setTimeout(() => {
-				if (!settledRef.current) {
-					checkStability();
-				}
-			}, stabilityDelay);
+			log("Content not high enough yet:", { maxScroll, target });
+			frameId = window.requestAnimationFrame(tryRestore);
 		};
 
-		// 立即检查一次
-		checkStability();
-
-		// 使用 ResizeObserver 监听容器尺寸变化
-		try {
-			ro = new ResizeObserver(() => {
-				if (!settledRef.current) {
-					checkStability();
-				}
-			});
-			ro.observe(container);
-			log("ResizeObserver attached");
-		} catch (err) {
-			log("ResizeObserver not available", err);
-		}
+		frameId = window.requestAnimationFrame(tryRestore);
 
 		// 超时保护
 		fallbackTimer = window.setTimeout(() => {
@@ -250,41 +183,11 @@ export function useScrollRestore(
 		isLoading,
 		containerSelector,
 		timeout,
-		stabilityDelay,
 		log,
 	]);
 
 	// 普通模式：使用 useEffect
 	useEffect(() => {
-		if (!useKeepAlive) {
-			performScrollRestore();
-		}
-	}, [useKeepAlive, performScrollRestore]);
-
-	// KeepAlive 模式：使用 useActivate
-	useActivate(() => {
-		if (useKeepAlive) {
-			log("[KeepAlive] 组件激活，触发滚动恢复");
-			// 重置状态，因为可能是从其他页面返回
-			settledRef.current = false;
-			lastHeightRef.current = 0;
-			performScrollRestore();
-		}
-	});
-
-	// KeepAlive 失活时清理
-	useUnactivate(() => {
-		if (!useKeepAlive) return;
-
-		if (cleanupRef.current) {
-			cleanupRef.current();
-			cleanupRef.current = null;
-		}
-
-		// KeepAlive 页面失活时将共享滚动容器归零，避免下一页继承旧滚动位置。
-		const container = document.querySelector<HTMLElement>(containerSelector);
-		if (container) {
-			container.scrollTop = 0;
-		}
-	});
+		performScrollRestore();
+	}, [performScrollRestore]);
 }

src/hooks/common/useScrollRestore.ts

@@ -3,7 +3,7 @@ import { useScrollRestore } from "@/hooks/common/useScrollRestore";
 import { useGameListFacade } from "@/hooks/features/games/useGameListFacade";
 
 export const Libraries: React.FC = () => {
-	useScrollRestore("/libraries", { useKeepAlive: true });
-	const { games } = useGameListFacade();
+	const { games, isLoading } = useGameListFacade();
+	useScrollRestore("/libraries", { isLoading });
 	return <Cards gamesData={games} />;
 };

src/pages/LibrariesPage.tsx

@@ -1,5 +1,15 @@
 import { defineConfig } from "unocss";
 
 export default defineConfig({
-	// ...UnoCSS options
+	theme: {
+		breakpoints: {
+			sm: "640px",
+			md: "768px",
+			lg: "1024px",
+			xl: "1280px",
+			"2xl": "1536px",
+			"3xl": "1920px",
+			"4xl": "2560px",
+		},
+	},
 });