feat(pomodoro): 表盘与预设标签 UI 增强

- PresetTabs 横排胶囊改 4 列网格布局（生物基座能量轨道）
- TimerFace 表盘细节增强；PresetEditor 精简冗余代码
- PomodoroControls 控制区优化；PomodoroPage 布局适配
- timerSlice/StoreTypes 适配新交互，同步更新单测

Author: Aparencia

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

@@ -4,11 +4,14 @@
  * 引力场布局：控件围绕生物下缘的固定半圆弧轨道排布，位置由固定角度槽位
  * 三角函数静态计算（不随悬停漂移），平时低透明度（0.6）常驻可见，悬停浮现至 1。
  *
+ * 定位根治：轨道半径使用容器尺寸百分比（ORBIT_RATIO），不依赖 px 测量——
+ * 容器尺寸任何变化（视口 vmin 波动等）按钮平滑跟随而非跳变，零测量零跳动。
+ *
  * 交互收敛（主交互 = 点击时间生物）：
  * - 主按钮已清除：开始/暂停/继续由生物点击承担（热启动直接迈步、专注态暂停/恢复）
- * - 四颗卫星：重置 / 跳过 / 沉浸 / 白噪音（弧端小图标下拉）
+ * - 四颗卫星：重置 / 跳过（统一 skipStage）/ 沉浸 / 白噪音（弧端小图标下拉）
  *
- * @ai-context: 状态取自 store；唯一外部依赖是 orbitRadius（父组件按生物尺寸传入）。
+ * @ai-context: 状态取自 store；定位由百分比驱动，无外部尺寸依赖。
  */
 import { useState, useRef, useEffect } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
@@ -20,25 +23,23 @@ import { useAudioPrefsStore } from '@/lib/audio/audioPrefsStore';
 import { audioTracks } from '@/lib/audio/audioConfig';
 import { useEstimatedVolume } from '../hooks/useEstimatedVolume';
 
-interface PomodoroControlsProps {
-  /** 卫星轨道半径（px）= 生物半径 × 1.45，父组件按生物尺寸计算 */
-  orbitRadius: number;
-}
-
 /** 固定角度槽位（度）：弧顶 90° 让位给生物主交互，四卫星对称分布于两侧弧 */
 const SAT = {
   reset: 135, skip: 45, immersive: 165, noise: 15,
 } as const;
 
+/** 轨道半径比例：容器尺寸的 72.5%（= 半宽 × 1.45），百分比定位随容器平滑跟随 */
+const ORBIT_RATIO = 0.725;
+
 /** 卫星平时透明度（常驻可见，悬停浮现至 1） */
 const SAT_IDLE_OPACITY = 0.6;
 
-/** 角度 → 绝对定位（圆心 = 容器中心，混合 calc 保持响应式） */
-function satPos(angleDeg: number, radius: number): React.CSSProperties {
+/** 角度 → 百分比定位（圆心 = 容器中心；百分比相对容器，任何尺寸变化平滑跟随） */
+function satPos(angleDeg: number): React.CSSProperties {
   const rad = (angleDeg * Math.PI) / 180;
   return {
-    left: `calc(50% + ${Math.cos(rad) * radius}px)`,
-    top: `calc(50% + ${Math.sin(rad) * radius}px)`,
+    left: `calc(50% + ${(Math.cos(rad) * ORBIT_RATIO * 100).toFixed(3)}%)`,
+    top: `calc(50% + ${(Math.sin(rad) * ORBIT_RATIO * 100).toFixed(3)}%)`,
   };
 }
 
@@ -47,14 +48,14 @@ function satClass(...classes: string[]): string {
   return cn('absolute -translate-x-1/2 -translate-y-1/2 flex items-center justify-center', ...classes);
 }
 
-export function PomodoroControls({ orbitRadius }: PomodoroControlsProps) {
+export function PomodoroControls() {
   // P0-1 细粒度订阅：整 store 订阅会在任何字段变化时重渲染卫星控制区
   const isRunning = usePomodoroStore((s) => s.isRunning);
   const isPaused = usePomodoroStore((s) => s.isPaused);
   const isArmed = usePomodoroStore((s) => s.isArmed);
   // 动作（稳定引用）
   const reset = usePomodoroStore((s) => s.reset);
-  const skip = usePomodoroStore((s) => s.skip);
+  const skipStage = usePomodoroStore((s) => s.skipStage);
   const enterImmersive = usePomodoroStore((s) => s.enterImmersive);
   // 沉睡态（未激活未运行）：沉浸入口常驻但禁用（先开始专注才能进入沉浸）
   const isAsleep = !isRunning && !isPaused && !isArmed;
@@ -85,9 +86,9 @@ export function PomodoroControls({ orbitRadius }: PomodoroControlsProps) {
   }, [trackPickerOpen]);
 
   return (
-    <div className="pointer-events-none">
+    <>
       {/* ── 白噪音卫星（弧右下）── */}
-      <div ref={pickerRef} className="pointer-events-auto absolute z-10" style={satPos(SAT.noise, orbitRadius)}>
+      <div ref={pickerRef} className="pointer-events-auto absolute z-10" style={satPos(SAT.noise)}>
         <Tip text={whiteNoiseEnabled ? '关闭背景音' : '开启背景音'}>
         <motion.button
           whileTap={{ scale: 0.9 }}
@@ -148,10 +149,10 @@ export function PomodoroControls({ orbitRadius }: PomodoroControlsProps) {
       </div>
 
       {/* ── 重置卫星（弧左下）── */}
-      <div className="pointer-events-auto absolute z-10" style={satPos(SAT.reset, orbitRadius)}>
+      <div className="pointer-events-auto absolute z-10" style={satPos(SAT.reset)}>
         <Tip text="重置计时器（回沉睡）">
         <motion.button
-          whileTap={{ scale: 0.9, rotate: -180 }}
+          whileTap={{ scale: 0.9 }}
           onClick={reset}
           className={satClass('w-9 h-9 rounded-full border border-border/30 bg-bg-elevated/60 backdrop-blur-sm text-text-tertiary hover:text-text-secondary transition-colors')}
           animate={{ opacity: SAT_IDLE_OPACITY }}
@@ -162,12 +163,12 @@ export function PomodoroControls({ orbitRadius }: PomodoroControlsProps) {
         </Tip>
       </div>
 
-      {/* ── 跳过卫星（弧右下）── */}
-      <div className="pointer-events-auto absolute z-10" style={satPos(SAT.skip, orbitRadius)}>
+      {/* ── 跳过卫星（弧右下）：统一 skipStage（呼吸态→跳过呼吸进专注，其他→常规跳过）── */}
+      <div className="pointer-events-auto absolute z-10" style={satPos(SAT.skip)}>
         <Tip text="跳过当前阶段">
         <motion.button
-          whileTap={{ scale: 0.9, x: 3 }}
-          onClick={skip}
+          whileTap={{ scale: 0.9 }}
+          onClick={skipStage}
           className={satClass('w-9 h-9 rounded-full border border-border/30 bg-bg-elevated/60 backdrop-blur-sm text-text-tertiary hover:text-text-secondary transition-colors')}
           animate={{ opacity: SAT_IDLE_OPACITY }}
           whileHover={{ opacity: 1 }}
@@ -178,7 +179,7 @@ export function PomodoroControls({ orbitRadius }: PomodoroControlsProps) {
       </div>
 
       {/* ── 沉浸卫星（弧更左下，常驻显示；沉睡态禁用，先开始专注才能进入沉浸）── */}
-      <div className="pointer-events-auto absolute z-10" style={satPos(SAT.immersive, orbitRadius)}>
+      <div className="pointer-events-auto absolute z-10" style={satPos(SAT.immersive)}>
         <Tip text={isAsleep ? '先开始专注（点击时间生物）' : '进入专注模式'}>
         <motion.button
           whileTap={isAsleep ? undefined : { scale: 0.9 }}
@@ -197,6 +198,6 @@ export function PomodoroControls({ orbitRadius }: PomodoroControlsProps) {
         </motion.button>
         </Tip>
       </div>
-    </div>
+    </>
   );
 }

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

@@ -14,7 +14,6 @@ import { X, GraduationCap, BookOpen, PenLine, BookMarked, Brain, Timer, Moon, Co
 import { cn } from '@/lib/utils';
 import { Tip } from '@/components/ui/Tip';
 import { Button, Input } from '@/components/ui';
-import CycleMarkers from './CycleMarkers';
 import { MOOD_LABELS, type Mood } from './chronos/particleMorphs';
 import type { PomodoroPreset } from '@/types/models';
 
@@ -231,11 +230,6 @@ export default function PresetEditor({ open, onClose, onSave, initial }: PresetE
                 <p className="text-c1 text-text-tertiary mt-1">决定时间生物粒子的外形与运动风格（上课/自习内置预设已预置）</p>
               </div>
 
-              {/* 循环标记预览 */}
-              <div className="pt-2 border-t border-border/20">
-                <p className="text-c1 text-text-tertiary mb-2">循环标记预览</p>
-                <CycleMarkers total={interval > 0 ? interval : 4} filled={1} />
-              </div>
             </div>
 
             {/* 操作按钮 */}

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

@@ -51,67 +51,72 @@ export default memo(function PresetTabs({ presets, activePresetId, canCreate, on
   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"
+      className="flex flex-col items-center gap-1 p-1.5 bg-bg-secondary/60 backdrop-blur-sm rounded-xl border border-border/20 max-w-full"
       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)}
-            onContextMenu={(e) => handleContextMenu(e, preset)}
-            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>
-        );
-      })}
-      {/* "+" 快捷创建预设入口，带 tooltip（达上限时隐藏） */}
-      {canCreate && (
-        <Tip text="新建预设">
-        <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>
-        </Tip>
-      )}
-      {/* 预设管理入口（删除/排序/编辑在深潜设置页），带 tooltip */}
-      {onManage && (
-        <Tip text="预设管理（删除 / 排序）">
-        <motion.button
-          onClick={onManage}
-          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="预设管理"
-        >
-          <SlidersHorizontal className="w-4 h-4" strokeWidth={1.5} />
-        </motion.button>
-        </Tip>
+      <div className="grid grid-cols-4 gap-1 w-full max-w-[480px]">
+        {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)}
+              onContextMenu={(e) => handleContextMenu(e, preset)}
+              whileTap={{ scale: 0.97 }}
+              className={cn(
+                'relative flex items-center justify-center gap-1 px-1.5 py-1.5 rounded-full text-[11px] font-medium transition-all duration-300 whitespace-nowrap min-w-0',
+                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 truncate">
+                <Icon className="w-3.5 h-3.5 shrink-0" strokeWidth={1.5} />
+                <span className="truncate">{preset.name}</span>
+                <span className={cn('text-[9px] opacity-60 shrink-0', isActive && 'opacity-80')}>{preset.workDuration}min</span>
+              </span>
+            </motion.button>
+          );
+        })}
+      </div>
+      {/* 操作按钮行 */}
+      {(canCreate || onManage) && (
+        <div className="flex items-center gap-1.5">
+          {canCreate && (
+            <Tip text="新建预设">
+            <motion.button
+              onClick={onCreate}
+              whileTap={{ scale: 0.9 }}
+              className="flex items-center justify-center w-7 h-7 rounded-full text-text-tertiary hover:text-text-primary hover:bg-bg-tertiary/60 transition-all duration-200"
+              aria-label="新建预设"
+            >
+              <Plus className="w-3.5 h-3.5" strokeWidth={1.5} />
+            </motion.button>
+            </Tip>
+          )}
+          {onManage && (
+            <Tip text="预设管理（删除 / 排序）">
+            <motion.button
+              onClick={onManage}
+              whileTap={{ scale: 0.9 }}
+              className="flex items-center justify-center w-7 h-7 rounded-full text-text-tertiary hover:text-text-primary hover:bg-bg-tertiary/60 transition-all duration-200"
+              aria-label="预设管理"
+            >
+              <SlidersHorizontal className="w-3.5 h-3.5" strokeWidth={1.5} />
+            </motion.button>
+            </Tip>
+          )}
+        </div>
       )}
     </motion.div>
       {/* 右键菜单 */}