perf(pomodoro): P3-19 memo 化（CycleMarkers + 预设标签栏抽取，避免每秒重渲染）

Author: Aparencia

client/src/features/pomodoro/components/CycleMarkers.tsx

@@ -7,7 +7,10 @@
  * @ai-context: 从 PomodoroPage 内联 JSX 抽取为独立组件，
  * 供 PresetEditor 预览和 ImmersiveTimer 复用。
  * @ai-context: Extracted energy-bar markers; count driven by preset.longBreakInterval.
+ * @ai-context: P3-19 React.memo 包裹——props（total/filled/className）仅在完成数或
+ * 预设变化时改变，避免番茄钟每秒 tick 引发的父组件重渲染连带本组件空转。
  */
+import { memo } from 'react';
 import { motion } from 'framer-motion';
 import { cn } from '@/lib/utils';
 import { SPRING, BEAT } from '@/lib/animation/springConfig';
@@ -20,7 +23,7 @@ interface CycleMarkersProps {
   className?: string;
 }
 
-export default function CycleMarkers({ total, filled, className }: CycleMarkersProps) {
+export default memo(function CycleMarkers({ total, filled, className }: CycleMarkersProps) {
   if (total <= 0) return null;
 
   return (
@@ -49,4 +52,4 @@ export default function CycleMarkers({ total, filled, className }: CycleMarkersP
       </span>
     </div>
   );
-}
+});

client/src/features/pomodoro/components/PresetTabs.tsx

@@ -0,0 +1,83 @@
+/**
+ * PresetTabs — 番茄钟预设横向标签栏
+ *
+ * 从 PomodoroPage 内联 JSX 抽取并 React.memo 化（P3-19）：番茄钟每秒 tick
+ * 会触发父组件重渲染，但标签栏仅依赖 presets/activePresetId，与倒计时无关，
+ * memo 后避免每秒重建 motion.button 列表。
+ *
+ * @ai-context: 设置页/番茄钟组件：PresetTabs。纯展示 + 回调上抛，无内部状态。
+ */
+import { memo } from 'react';
+import { motion } from 'framer-motion';
+import { BookOpen, PenLine, BookMarked, Brain, Timer, Moon, Coffee, Dumbbell, Music, Languages, Calculator, Microscope, GraduationCap, Plus } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { SPRING } from '@/lib/animation/springConfig';
+import type { PomodoroPreset } from '@/types/models';
+
+/** 预设图标映射（lucide 图标名 → 组件） */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const PRESET_ICONS: Record<string, React.ComponentType<any>> = {
+  GraduationCap, BookOpen, PenLine, BookMarked, Brain, Timer,
+  Moon, Coffee, Dumbbell, Music, Languages, Calculator, Microscope,
+};
+
+interface PresetTabsProps {
+  presets: PomodoroPreset[];
+  activePresetId?: string;
+  canCreate: boolean;
+  onSelect: (id: string) => void;
+  onCreate: () => void;
+}
+
+export default memo(function PresetTabs({ presets, activePresetId, canCreate, onSelect, onCreate }: PresetTabsProps) {
+  return (
+    <motion.div
+      className="flex items-center gap-0.5 p-1 bg-bg-secondary/60 backdrop-blur-sm rounded-full border border-border/20 max-w-full overflow-x-auto"
+      initial={{ opacity: 0, y: -10 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ delay: 0.1, ...SPRING.gentle }}
+    >
+      {presets.map((preset) => {
+        const Icon = PRESET_ICONS[preset.icon] ?? BookOpen;
+        const isActive = activePresetId === preset.id;
+        return (
+          <motion.button
+            key={preset.id}
+            onClick={() => onSelect(preset.id)}
+            whileTap={{ scale: 0.97 }}
+            className={cn(
+              'relative flex items-center gap-1.5 px-4 py-2 rounded-full text-[13px] font-medium transition-all duration-300 whitespace-nowrap',
+              isActive
+                ? 'text-white shadow-[0_2px_12px_rgba(91,138,114,0.3)]'
+                : 'text-text-secondary hover:text-text-primary',
+            )}
+          >
+            {isActive && (
+              <motion.div
+                layoutId="pomo-mode-bg"
+                className="absolute inset-0 rounded-full bg-brand-500"
+                transition={SPRING.default}
+              />
+            )}
+            <span className="relative flex items-center gap-1.5">
+              <Icon className="w-4 h-4" strokeWidth={1.5} />
+              {preset.name}
+              <span className={cn('text-[10px] opacity-60', isActive && 'opacity-80')}>· {preset.workDuration}min</span>
+            </span>
+          </motion.button>
+        );
+      })}
+      {/* "+" 快捷创建预设入口（达上限时隐藏） */}
+      {canCreate && (
+        <motion.button
+          onClick={onCreate}
+          whileTap={{ scale: 0.9 }}
+          className="flex items-center justify-center w-8 h-8 rounded-full text-text-tertiary hover:text-text-primary hover:bg-bg-tertiary/60 transition-all duration-200 flex-shrink-0"
+          aria-label="新建预设"
+        >
+          <Plus className="w-4 h-4" strokeWidth={1.5} />
+        </motion.button>
+      )}
+    </motion.div>
+  );
+});

client/src/features/pomodoro/pages/PomodoroPage.tsx

@@ -1,10 +1,10 @@
 /**
  * @ai-context: pomodoro 功能模块页面：PomodoroPage。
  */
-import { useEffect, useRef, useState, useMemo } from 'react';
+import { useEffect, useRef, useState, useMemo, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { AnimatePresence, motion } from 'framer-motion';
-import { Play, Pause, RotateCcw, SkipForward, Clock, Volume2, VolumeX, Focus, Plus, GraduationCap, BookOpen, PenLine, BookMarked, Brain, Timer, Moon, Coffee, Dumbbell, Music, Languages, Calculator, Microscope } from 'lucide-react';
+import { Play, Pause, RotateCcw, SkipForward, Clock, Volume2, VolumeX, Focus } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { db } from '@/lib/storage';
 import TimerRing from '../components/TimerRing';
@@ -13,6 +13,8 @@ import ImmersiveTimer from '../components/ImmersiveTimer';
 import SlideToExit from '../components/SlideToExit';
 import CycleMarkers from '../components/CycleMarkers';
 import PresetEditor from '../components/PresetEditor';
+import PresetTabs from '../components/PresetTabs';
+import { CompletionCelebration } from '../components/CompletionCelebration';
 import { usePomodoroStore } from '../store/usePomodoroStore';
 import { useShallow } from 'zustand/react/shallow';
 import { useAudioPlayer } from '@/lib/audio/useAudioPlayer';
@@ -27,20 +29,14 @@ const WHITE_NOISE_FADE_MS = 1000;
 const WHITE_NOISE_FADE_OUT_MS = 1500;
 const TIMER_TICK_INTERVAL_MS = 1000;
 
-/** 预设图标映射（lucide 图标名 → 组件） */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const PRESET_ICONS: Record<string, React.ComponentType<any>> = {
-  GraduationCap, BookOpen, PenLine, BookMarked, Brain, Timer,
-  Moon, Coffee, Dumbbell, Music, Languages, Calculator, Microscope,
-};
-
 export default function PomodoroPage() {
   const {
     phase, isRunning, isPaused, remainingSeconds, totalSeconds,
     completedCount, settings, currentGoal, isImmersive,
     activePreset, presets,
     start, pause, resume, reset, skip, setPreset, setCurrentGoal,
     enterImmersive, exitImmersive, tick, createPreset,
+    showCompletionOverlay, dismissCompletionOverlay, lastSessionActualDuration,
   } = usePomodoroStore(useShallow(s => s));
 
   usePomodoroEffects();
@@ -106,6 +102,9 @@ export default function PomodoroPage() {
     else setGoalModalOpen(true);
   };
 
+  // P3-19 稳定回调引用，供 memo 化的 PresetTabs 避免每秒重渲染
+  const openPresetEditor = useCallback(() => setPresetEditorOpen(true), []);
+
   /**
    * 提交目标并开始番茄。goal 为空字符串时表示“跳过目标”：
    * 仍然启动计时，但不记录目标（currentGoal 置 null，也不写目标记忆库）。
@@ -180,55 +179,14 @@ export default function PomodoroPage() {
         >
           {/* 背景环境光 — 由3D场景提供，已移除 */}
 
-          {/* Preset tabs — 横向滚动预设列表 */}
-          <motion.div
-            className="flex items-center gap-0.5 p-1 bg-bg-secondary/60 backdrop-blur-sm rounded-full border border-border/20 max-w-full overflow-x-auto"
-            initial={{ opacity: 0, y: -10 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: 0.1, ...SPRING.gentle }}
-          >
-            {presets.map((preset) => {
-              const Icon = PRESET_ICONS[preset.icon] ?? BookOpen;
-              const isActive = activePreset?.id === preset.id;
-              return (
-                <motion.button
-                  key={preset.id}
-                  onClick={() => setPreset(preset.id)}
-                  whileTap={{ scale: 0.97 }}
-                  className={cn(
-                    'relative flex items-center gap-1.5 px-4 py-2 rounded-full text-[13px] font-medium transition-all duration-300 whitespace-nowrap',
-                    isActive
-                      ? 'text-white shadow-[0_2px_12px_rgba(91,138,114,0.3)]'
-                      : 'text-text-secondary hover:text-text-primary',
-                  )}
-                >
-                  {isActive && (
-                    <motion.div
-                      layoutId="pomo-mode-bg"
-                      className="absolute inset-0 rounded-full bg-brand-500"
-                      transition={SPRING.default}
-                    />
-                  )}
-                  <span className="relative flex items-center gap-1.5">
-                    <Icon className="w-4 h-4" strokeWidth={1.5} />
-                    {preset.name}
-                    <span className={cn('text-[10px] opacity-60', isActive && 'opacity-80')}>· {preset.workDuration}min</span>
-                  </span>
-                </motion.button>
-              );
-            })}
-            {/* "+" 快捷创建预设入口（达上限时隐藏） */}
-            {presets.length < MAX_PRESETS && (
-              <motion.button
-                onClick={() => setPresetEditorOpen(true)}
-                whileTap={{ scale: 0.9 }}
-                className="flex items-center justify-center w-8 h-8 rounded-full text-text-tertiary hover:text-text-primary hover:bg-bg-tertiary/60 transition-all duration-200 flex-shrink-0"
-                aria-label="新建预设"
-              >
-                <Plus className="w-4 h-4" strokeWidth={1.5} />
-              </motion.button>
-            )}
-          </motion.div>
+          {/* Preset tabs — 横向滚动预设列表（P3-19 memo 化） */}
+          <PresetTabs
+            presets={presets}
+            activePresetId={activePreset?.id}
+            canCreate={presets.length < MAX_PRESETS}
+            onSelect={setPreset}
+            onCreate={openPresetEditor}
+          />
 
           {/* 预设提示 */}
           <motion.div
@@ -383,6 +341,18 @@ export default function PomodoroPage() {
         </motion.div>
       )}
       </AnimatePresence>
+
+      {/* v0.29: 深潜完成庆祝覆盖层 */}
+      <CompletionCelebration
+        visible={showCompletionOverlay}
+        durationSeconds={lastSessionActualDuration ?? (activePreset?.workDuration ?? settings.workDuration) * 60}
+        goal={currentGoal}
+        presetName={activePreset?.name ?? null}
+        totalDepth={((completedCount + 1) * (activePreset?.workDuration ?? 25)) * 4}
+        depthGained={(lastSessionActualDuration ?? (activePreset?.workDuration ?? 25) * 60) / 60 * 4}
+        onClose={dismissCompletionOverlay}
+        onContinue={() => { dismissCompletionOverlay(); setGoalModalOpen(true); }}
+      />
     </>
   );
 }