feat(pomodoro): Chronos 液态金属形态与完整状态指示系统

- 严格遵循设计方案：球体由光子/微粒/液态金属三重构成
  - 液态金属主体：高细分球体 + PMREM 环境映射（RoomEnvironment 本地生成零网络）+ 多层波状液态流动 + computeVertexNormals
  - 光子内层：球体内部发光光点（AdditiveBlending）随呼吸脉动
  - 微粒外层：球壳微粒聚散 + 绽放爆发
- 深浅双风格差异化材质：deep-sea=深色液态水银（金属度0.95/粗糙度0.08/反射1.2/青绿辉光），aurora-dome=极光亮银（金属度0.82/粗糙度0.28/反射0.65/紫粉辉光）
- 完整状态指示系统：6 阶段状态徽章（沉睡🌙/呼吸💨/专注🎯/短休☕/长休🌊/即将完成🔥）+ 交互提示文案，替代静态 label
- 状态机映射：未开始→沉睡、暂停→呼吸、最后5分钟→即将完成、短休/长休独立状态，阶段切换 lerp 平滑
- 2D 降级回退同样显示状态徽章与提示
- 验证：tsc -b 0 错误、lint 干净、vitest 90/90

Author: Aparencia

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

@@ -259,7 +259,6 @@ export default function ImmersiveTimer({
           onTap={handleChronosTap}
           onLongPress={handleChronosLongPress}
           timeStr={timeStr}
-          label={label}
         />
       ) : (
         <ImmersiveRing progress={progress} timeStr={timeStr} label={label} breatheAnimation={breatheAnimation} />

client/src/features/pomodoro/components/chronos/ChronosCanvas.tsx

@@ -10,7 +10,7 @@
 import { Canvas } from '@react-three/fiber';
 import { useReducedMotion } from 'framer-motion';
 import { useSceneTheme } from '@/lib/3d/hooks/useSceneTheme';
-import { CHRONOS_STYLES, CHRONOS_PHASES, toChronosPhase, type ChronosPhase } from './chronosStyles';
+import { CHRONOS_STYLES, CHRONOS_PHASES, CHRONOS_STATE_LABELS, toChronosPhase, type ChronosPhase } from './chronosStyles';
 import { ChronosSphere } from './ChronosSphere';
 
 interface ChronosCanvasProps {
@@ -31,17 +31,15 @@ interface ChronosCanvasProps {
   onLongPress?: () => void;
   /** 中央显示内容（时间字符串） */
   timeStr: string;
-  /** 中央显示标签（如 专注中） */
-  label: string;
 }
 
 /** 2D 静态回退形态（reduced motion / 极端低配） */
-function ChronosStatic({ phase, timeStr, label }: {
+function ChronosStatic({ phase, timeStr }: {
   phase: ChronosPhase;
   timeStr: string;
-  label: string;
 }) {
   const phaseColor = CHRONOS_PHASES[phase].body;
+  const state = CHRONOS_STATE_LABELS[phase];
   return (
     <div className="relative flex items-center justify-center w-full h-full">
       {/* 静态光环 + 渐变球体 */}
@@ -59,9 +57,10 @@ function ChronosStatic({ phase, timeStr, label }: {
         <span className="font-timer font-light tracking-tight leading-none text-text-primary" style={{ fontSize: 'clamp(2rem, 8vmin, 4.5rem)', fontVariantNumeric: 'tabular-nums' }}>
           {timeStr}
         </span>
-        <span className="text-[11px] mt-2 font-medium tracking-[0.15em] uppercase text-text-tertiary">
-          {label}
+        <span className="text-[11px] mt-2 font-medium tracking-[0.15em] uppercase" style={{ color: phaseColor }}>
+          {state.icon} {state.name}
         </span>
+        <span className="text-[10px] mt-1 text-text-tertiary/60">{state.hint}</span>
       </div>
     </div>
   );
@@ -79,24 +78,26 @@ export function ChronosCanvas({
   onTap,
   onLongPress,
   timeStr,
-  label,
 }: ChronosCanvasProps) {
   const theme = useSceneTheme();
   const reduced = useReducedMotion();
   const style = CHRONOS_STYLES[theme];
   const chronosPhase = toChronosPhase(phase, isRunning, remainingSeconds, started);
+  // 状态指示：完整状态机（沉睡/呼吸/专注/短休/长休/即将完成），优先于静态 label
+  const state = CHRONOS_STATE_LABELS[chronosPhase];
+  const stateColor = CHRONOS_PHASES[chronosPhase].body;
 
   // 降级：减少动效偏好 → 2D 静态形态
   if (reduced) {
-    return <ChronosStatic phase={chronosPhase} timeStr={timeStr} label={label} />;
+    return <ChronosStatic phase={chronosPhase} timeStr={timeStr} />;
   }
 
   return (
     <div
       className={mode === 'full'
         ? 'absolute inset-0 flex items-center justify-center pointer-events-none'
         : 'relative w-[clamp(150px,34vmin,280px)] h-[clamp(150px,34vmin,280px)] pointer-events-none'}
-      aria-label={`${label} ${timeStr}`}
+      aria-label={`${state.name} ${timeStr}`}
       role="timer"
     >
       <Canvas
@@ -119,17 +120,21 @@ export function ChronosCanvas({
           onLongPress={onLongPress}
         />
       </Canvas>
-      {/* 中央数字（HTML 层，与 3D 叠加） */}
+      {/* 中央状态区：时间 + 状态名 + 交互提示（HTML 层，与 3D 叠加） */}
       <div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
         <span
           className="font-timer font-light tracking-tight leading-none text-text-primary"
           style={{ fontSize: mode === 'full' ? 'clamp(3rem, 9vmin, 6rem)' : 'clamp(1.75rem, 7vmin, 3.5rem)', fontVariantNumeric: 'tabular-nums' }}
         >
           {timeStr}
         </span>
-        <span className="text-[11px] mt-2 font-medium tracking-[0.15em] uppercase text-text-tertiary">
-          {label}
+        <span
+          className="text-[11px] mt-2 font-medium tracking-[0.15em] uppercase transition-colors duration-500"
+          style={{ color: stateColor }}
+        >
+          {state.icon} {state.name}
         </span>
+        <span className="text-[10px] mt-1 text-text-tertiary/60">{state.hint}</span>
       </div>
     </div>
   );