perf(transition): replace spring with CSS transition for page entrance and preload all chunks

- Replace Framer Motion spring animations in FunctionalOverlay with
  CSS transitions (opacity 300ms ease-out, transform 300ms ease-out).
  CSS transitions run on the GPU compositor thread with zero JS overhead,
  eliminating spring's per-frame differential equation computation.
- Defer backdrop-blur-2xl by 300ms (setTimeout in useEffect) to prevent
  the GPU compositing layer creation from competing with the entrance
  transition animation. Blur appears smoothly after the panel settles.
- Preload ALL 19 page chunks immediately at idle time (requestIdleCallback)
  instead of staggered 7-page prefetch with 2s delay. Eliminates chunk
  loading wait during page transitions.

Framer Motion spring is retained for gesture interactions (drag, layoutId)
where its physics model is genuinely needed.

Author: Aparencia

client/src/components/overlay/FunctionalOverlay.tsx

@@ -6,10 +6,12 @@
  * 透明度与交互性（而非卸载），使页面状态跨 Esc/重入周期保留，避免动画重播。
  * 隐藏时设置 inert 防止焦点落入不可见页面（React 18 不支持 inert prop，直接操作 DOM）。
  *
+ * 动画策略：页面切换的 opacity/transform 入场出场使用 CSS transition
+ * （零 JS 开销，运行在 GPU 合成线程），手势/布局动画保留 Framer Motion。
+ *
  * @ai-context: 浮层/弹窗组件：FunctionalOverlay。
  */
-import { useEffect, useRef } from 'react';
-import { motion } from 'framer-motion';
+import { useEffect, useRef, useState } from 'react';
 import { cn } from '@/lib/utils';
 
 interface FunctionalOverlayProps {
@@ -25,6 +27,16 @@ interface FunctionalOverlayProps {
 
 export function FunctionalOverlay({ children, visible, className, panelClassName, maskClassName }: FunctionalOverlayProps) {
   const rootRef = useRef<HTMLDivElement>(null);
+  // 延迟 backdrop-blur：动画期间（前 300ms）不加 blur，避免合成层与过渡动画竞争
+  const [showBlur, setShowBlur] = useState(false);
+
+  useEffect(() => {
+    if (visible) {
+      const timer = setTimeout(() => setShowBlur(true), 300);
+      return () => clearTimeout(timer);
+    }
+    setShowBlur(false);
+  }, [visible]);
 
   // 隐藏时设置 inert：阻断指针事件、焦点与辅助技术访问（React 18 无 inert prop）
   useEffect(() => {
@@ -37,59 +49,59 @@ export function FunctionalOverlay({ children, visible, className, panelClassName
     }
   }, [visible]);
 
-  // 已移除 aria-hidden：inert 属性已完整覆盖其语义（阻断辅助技术+焦点），
-  // 同时避免 aria-hidden 同步生效而 inert 异步生效导致的焦点竞态警告
   return (
-    <motion.div
+    <div
       ref={rootRef}
       className={cn(
         "fixed inset-0 z-10 flex items-center justify-center",
         "p-2 sm:p-4 md:p-8",
-        "pb-16 sm:pb-8 md:pb-8", // 移动端底部预留 BottomNav 空间
+        "pb-16 sm:pb-8 md:pb-8",
+        // CSS transition: opacity 300ms ease-out（合成器线程，零 JS 开销）
+        "transition-opacity duration-300 ease-out",
+        visible ? "opacity-100" : "opacity-0",
         className
       )}
-      initial={{ opacity: 0 }}
-      animate={{ opacity: visible ? 1 : 0 }}
-      /* 修复：外层过渡统一为 spring 类型，与内层面板保持一致，避免 ease 与 spring 混用导致动画节奏不协调 */
-      transition={{ type: 'spring', stiffness: 300, damping: 30 }}
       style={{ pointerEvents: visible ? 'auto' : 'none' }}
     >
-      {/* 半透明背景遮罩 — 隐藏时移除 backdrop-blur，避免 Electron 中 backdrop-filter 合成层遮挡下方 canvas */}
+      {/* 半透明背景遮罩 — 延迟 backdrop-blur 避免动画期间合成层竞争 */}
       <div className={cn(
         "absolute inset-0 bg-black/20",
-        visible && "backdrop-blur-sm",
+        "transition-[backdrop-filter] duration-300 ease-out",
+        showBlur && visible && "backdrop-blur-sm",
         maskClassName,
         visible ? "pointer-events-auto" : "pointer-events-none"
       )} />
 
-      {/* 功能面板 — 隐藏时移除 backdrop-blur，避免 backdrop-filter 合成层遮挡 canvas */}
-      <motion.div
+      {/* 功能面板 — CSS transition 处理 scale/y/opacity 入场出场 */}
+      <div
         data-work-area="module-content"
         className={cn(
           "relative z-10 w-full",
           "max-w-5xl",
-          "max-h-[calc(100vh-5rem)] sm:max-h-[85vh]", // 移动端适配底部导航
+          "max-h-[calc(100vh-5rem)] sm:max-h-[85vh]",
           "overflow-y-auto",
-          "rounded-2xl sm:rounded-[24px_12px_20px_16px]", // 移动端统一圆角
+          "rounded-2xl sm:rounded-[24px_12px_20px_16px]",
           "bg-transparent",
-          visible && "backdrop-blur-2xl",
+          // CSS transition: 面板从 scale(0.9) + y(30px) 缩放入场
+          "transition-all duration-300 ease-out",
+          visible
+            ? "opacity-100 scale-100 translate-y-0"
+            : "opacity-0 scale-90 translate-y-[30px]",
+          // backdrop-blur 延迟 300ms 后生效，避免与入场动画竞争
+          showBlur && visible && "backdrop-blur-2xl",
           "border border-white/20 dark:border-white/10",
           "shadow-[0_8px_40px_rgba(0,0,0,0.3)]",
           panelClassName,
           visible ? "pointer-events-auto" : "pointer-events-none",
           "p-3 sm:p-5 md:p-8"
         )}
-        /* 修复：提示浏览器提前创建合成层，避免动画时触发重绘/重排，提升动画流畅度 */
         style={{
           willChange: 'transform, opacity',
           background: 'linear-gradient(180deg, var(--kb-dive-top) 0%, var(--kb-dive-mid) 42%, var(--kb-dive-bot) 100%)',
         }}
-        initial={{ scale: 0.9, y: 30 }}
-        animate={visible ? { scale: 1, y: 0 } : { scale: 0.9, y: 30 }}
-        transition={{ type: 'spring', stiffness: 300, damping: 30 }}
       >
         {children}
-      </motion.div>
-    </motion.div>
+      </div>
+    </div>
   );
-}
+}

client/src/routes/index.tsx

@@ -8,27 +8,35 @@ import AppLayout from '@/components/layout/AppLayout';
 import { AuthGuard } from '@/lib/auth/AuthGuard';
 import { prefetchRoute } from '@/utils/scheduler';
 
-// 在应用启动后空闲期预加载核心模块
-// P1-6 prefetch 错峰：7 个高频页面 chunk 每 300ms 拉取一个（而非一次性突发），
-// 避免启动 2s 后的网络/磁盘峰值影响首次交互帧
+// 应用启动后空闲期预加载所有页面 chunk，消除页面切换时的加载等待
+// 使用 requestIdleCallback 错峰，避免影响首屏交互帧
 if (typeof window !== 'undefined') {
-  const HIGH_FREQUENCY_PAGES = [
+  const ALL_PAGES = [
     () => import('@/features/dashboard/pages/DashboardPage'),
     () => import('@/features/notes/pages/NoteEditPage'),
     () => import('@/features/pomodoro/pages/PomodoroPage'),
-    // 修复：增加高频页面预加载，减少模块切换时的加载等待与视觉跳变
     () => import('@/features/notes/pages/NotesPage'),
     () => import('@/features/flashcards/pages/FlashcardsPage'),
     () => import('@/features/feynman/pages/FeynmanPage'),
     () => import('@/pages/SettingsPage'),
+    () => import('@/features/dashboard/pages/AnalyticsPage'),
+    () => import('@/features/inspiration/pages/InspirationPage'),
+    () => import('@/features/classroom/pages/ClassroomPage'),
+    () => import('@/features/pomodoro/pages/PomodoroStatsPage'),
+    () => import('@/features/pomodoro/pages/PomodoroSettingsPage'),
+    () => import('@/features/notes/pages/NotesGraphPage'),
+    () => import('@/features/flashcards/pages/DeckDetailPage'),
+    () => import('@/features/flashcards/pages/StudySessionPage'),
+    () => import('@/features/flashcards/pages/GenerativeReviewPage'),
+    () => import('@/features/feynman/pages/FeynmanSessionPage'),
+    () => import('@/features/feynman/pages/FeynmanGraphPage'),
+    () => import('@/features/feynman/pages/SocraticSessionPage'),
   ];
-  const PREFETCH_STAGGER_MS = 300;
+  const idle = window.requestIdleCallback ?? ((cb: () => void) => setTimeout(cb, 1000));
   window.addEventListener('load', () => {
-    setTimeout(() => {
-      HIGH_FREQUENCY_PAGES.forEach((loader, i) => {
-        setTimeout(() => prefetchRoute(loader), i * PREFETCH_STAGGER_MS);
-      });
-    }, 2000); // 启动2秒后开始预加载
+    idle(() => {
+      ALL_PAGES.forEach((loader) => prefetchRoute(loader));
+    });
   });
 }