Merge branch 'dev': 番茄钟预设自定义、目标跳过修复与仪表盘卡片跳转

Author: Aparencia

client/src/features/dashboard/components/KnowledgePreviewCard.tsx

@@ -7,8 +7,9 @@
  * @ai-context: 通用组件：KnowledgePreviewCard。
  */
 import { useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { motion, useMotionValue, useTransform, useSpring } from 'framer-motion';
-import { FileText, Layers, Timer, Lightbulb } from 'lucide-react';
+import { FileText, Layers, Timer, Lightbulb, ArrowUpRight } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { SPRING } from '@/lib/animation/springConfig';
 
@@ -20,6 +21,8 @@ interface KnowledgeCard {
   title: string;
   excerpt?: string;
   time: string;
+  /** 点击跳转目标路径 */
+  targetPath?: string;
 }
 
 interface KnowledgePreviewCardProps {
@@ -70,9 +73,19 @@ const asymmetricRadius = [
 
 export default function KnowledgePreviewCard({ card, index }: KnowledgePreviewCardProps) {
   const ref = useRef<HTMLDivElement>(null);
+  const navigate = useNavigate();
   const mouseX = useMotionValue(0);
   const mouseY = useMotionValue(0);
 
+  const clickable = !!card.targetPath;
+  const handleClick = () => { if (card.targetPath) navigate(card.targetPath); };
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if ((e.key === 'Enter' || e.key === ' ') && card.targetPath) {
+      e.preventDefault();
+      navigate(card.targetPath);
+    }
+  };
+
   const rotateX = useSpring(
     useTransform(mouseY, [-0.5, 0.5], [8, -8]),
     { stiffness: SPRING.default.stiffness, damping: SPRING.default.damping }
@@ -101,8 +114,12 @@ export default function KnowledgePreviewCard({ card, index }: KnowledgePreviewCa
   return (
     <motion.div
       ref={ref}
+      role={clickable ? 'link' : undefined}
+      tabIndex={clickable ? 0 : undefined}
+      aria-label={clickable ? `打开${config.label}：${card.title}` : undefined}
       className={cn(
-        'relative overflow-hidden cursor-default group',
+        'relative overflow-hidden group focus-visible:outline-2 focus-visible:outline-brand-500',
+        clickable ? 'cursor-pointer' : 'cursor-default',
         'border border-border/20 backdrop-blur-sm',
         'bg-bg-elevated/40 hover:bg-bg-elevated/60',
         'transition-colors duration-beat-x3',
@@ -116,7 +133,10 @@ export default function KnowledgePreviewCard({ card, index }: KnowledgePreviewCa
       }}
       onMouseMove={handleMouseMove}
       onMouseLeave={handleMouseLeave}
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
       whileHover={{ y: -4, scale: 1.02 }}
+      whileTap={clickable ? { scale: 0.97 } : undefined}
       transition={SPRING.default}
     >
       {/* 交融渐变遮罩 */}
@@ -142,7 +162,12 @@ export default function KnowledgePreviewCard({ card, index }: KnowledgePreviewCa
         <div className="flex items-center gap-1.5">
           <Icon className={cn('w-3.5 h-3.5', config.accentColor)} strokeWidth={1.5} />
           <span className={cn('text-c2 font-medium', config.accentColor)}>{config.label}</span>
-          <span className="text-c2 text-text-tertiary ml-auto">{card.time}</span>
+          <span className="text-c2 text-text-tertiary ml-auto flex items-center gap-1">
+            {card.time}
+            {clickable && (
+              <ArrowUpRight className="w-3 h-3 opacity-0 group-hover:opacity-70 transition-opacity duration-beat-x2" />
+            )}
+          </span>
         </div>
 
         {/* 标题 */}

client/src/features/dashboard/pages/DashboardPage.tsx

@@ -309,10 +309,10 @@ export default function DashboardPage() {
   }, [showRitual, lastSession]);
 
   const heroStats = [
-    { label: '今日专注', value: todayPomodoroCount, unit: '次', accent: 'pomodoro', icon: Timer },
-    { label: '笔记总数', value: noteTotal, unit: '篇', accent: 'note', icon: FileText },
-    { label: '待复习', value: dueFlashcardCount, unit: '张', accent: 'flashcard', icon: Layers },
-    { label: '费曼进行中', value: feynmanInProgressCount, unit: '个', accent: 'feynman', icon: Lightbulb },
+    { label: '今日专注', value: todayPomodoroCount, unit: '次', accent: 'pomodoro', icon: Timer, path: '/pomodoro' },
+    { label: '笔记总数', value: noteTotal, unit: '篇', accent: 'note', icon: FileText, path: '/notes' },
+    { label: '待复习', value: dueFlashcardCount, unit: '张', accent: 'flashcard', icon: Layers, path: '/flashcards' },
+    { label: '费曼进行中', value: feynmanInProgressCount, unit: '个', accent: 'feynman', icon: Lightbulb, path: '/feynman' },
   ];
 
   /* ── 学习分析 ── */
@@ -332,6 +332,7 @@ export default function DashboardPage() {
         type: 'note',
         title: n.title || '无标题笔记',
         time: formatRelativeTime(new Date(n.updatedAt)),
+        targetPath: `/notes/${n.id}`,
       });
     });
 
@@ -347,6 +348,7 @@ export default function DashboardPage() {
         type: 'flashcard',
         title: card ? card.front.replace(/<[^>]*>/g, '').slice(0, 40) : '复习闪卡',
         time: formatRelativeTime(new Date(latestReview.reviewedAt)),
+        targetPath: '/flashcards',
       });
     }
 
@@ -361,6 +363,7 @@ export default function DashboardPage() {
         type: 'pomodoro',
         title: `${Math.round(latest.actualDuration / 60)} 分钟专注`,
         time: formatRelativeTime(new Date(latest.completedAt)),
+        targetPath: '/pomodoro',
       });
     }
 
@@ -374,6 +377,7 @@ export default function DashboardPage() {
         type: 'feynman',
         title: sortedFeynman[0].concept,
         time: formatRelativeTime(new Date(sortedFeynman[0].updatedAt)),
+        targetPath: `/feynman/${sortedFeynman[0].id}`,
       });
     }
 
@@ -420,14 +424,21 @@ export default function DashboardPage() {
               return (
                 <motion.div
                   key={stat.label}
+                  role="link"
+                  tabIndex={0}
+                  aria-label={`进入${stat.label}模块`}
+                  onClick={() => navigate(stat.path)}
+                  onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); navigate(stat.path); } }}
                   className={cn(
-                    'relative p-5 rounded-kb-xl',
+                    'relative p-5 rounded-kb-xl cursor-pointer',
                     'border border-border/15 backdrop-blur-sm',
                     'bg-bg-elevated/30 hover:bg-bg-elevated/50',
                     'transition-all duration-beat-x3 group',
+                    'focus-visible:outline-2 focus-visible:outline-brand-500',
                   )}
                   variants={heroStatVariant}
                   whileHover={{ y: -2, scale: 1.02 }}
+                  whileTap={{ scale: 0.97 }}
                   transition={SPRING.default}
                 >
                   <div className="flex items-center gap-2 mb-3">

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

@@ -0,0 +1,52 @@
+/**
+ * CycleMarkers — 番茄循环标记（能量条）
+ *
+ * 显示当前预设的长休间隔进度：filled 个已完成的番茄 + 剩余空位。
+ * 数量由预设的 longBreakInterval 驱动，切换预设时自动变化。
+ *
+ * @ai-context: 从 PomodoroPage 内联 JSX 抽取为独立组件，
+ * 供 PresetEditor 预览和 ImmersiveTimer 复用。
+ * @ai-context: Extracted energy-bar markers; count driven by preset.longBreakInterval.
+ */
+import { motion } from 'framer-motion';
+import { cn } from '@/lib/utils';
+import { SPRING, BEAT } from '@/lib/animation/springConfig';
+
+interface CycleMarkersProps {
+  /** 总标记数（预设的 longBreakInterval） */
+  total: number;
+  /** 已填充数（completedCount） */
+  filled: number;
+  className?: string;
+}
+
+export default function CycleMarkers({ total, filled, className }: CycleMarkersProps) {
+  if (total <= 0) return null;
+
+  return (
+    <div className={cn('flex items-center gap-1.5', className)}>
+      {Array.from({ length: total }, (_, i) => {
+        const isFilled = i < filled;
+        return (
+          <motion.div
+            key={i}
+            className={cn(
+              'h-2 rounded-full transition-all',
+              `duration-[${BEAT.x2}ms]`,
+              isFilled
+                ? 'bg-brand-500 shadow-[0_0_8px_rgba(91,138,114,0.4)]'
+                : 'bg-border/30',
+            )}
+            style={{ width: isFilled ? '24px' : '16px' }}
+            initial={{ scaleX: 0 }}
+            animate={{ scaleX: 1 }}
+            transition={{ delay: 0.3 + i * 0.05, ...SPRING.bouncy }}
+          />
+        );
+      })}
+      <span className="text-[11px] text-text-tertiary/60 ml-2 font-mono tabular-nums">
+        {filled}/{total}
+      </span>
+    </div>
+  );
+}

client/src/features/pomodoro/components/GoalInput.test.tsx

@@ -0,0 +1,103 @@
+/**
+ * @ai-context: GoalInput 回归测试——"跳过"与空输入点"开始"都必须启动计时
+ * （提交空目标），只有真正取消（Modal 关闭按钮）才不启动。
+ * @ai-context: Regression test — "skip" and empty-input "start" must both
+ * launch the timer with an empty goal; only an explicit close cancels.
+ */
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import GoalInput from './GoalInput';
+
+// GoalMemory 读取 Dexie，测试中隔离掉真实数据库
+vi.mock('@/lib/storage', () => ({
+  db: {
+    pomodoroGoals: {
+      orderBy: () => ({
+        reverse: () => ({
+          limit: () => ({ toArray: () => Promise.resolve([]) }),
+        }),
+      }),
+    },
+  },
+}));
+
+// Modal 播放开关音效，测试中无需真实音频
+vi.mock('@/lib/audio/SoundPlayer', () => ({
+  soundPlayer: { play: vi.fn() },
+}));
+
+describe('GoalInput - 空目标番茄钟', () => {
+  const onSubmit = vi.fn();
+  const onClose = vi.fn();
+
+  function renderGoalInput() {
+    return render(
+      <GoalInput
+        open
+        onClose={onClose}
+        onSubmit={onSubmit}
+        rememberGoal={false}
+        onRememberChange={vi.fn()}
+      />,
+    );
+  }
+
+  beforeEach(() => {
+    onSubmit.mockClear();
+    onClose.mockClear();
+  });
+
+  it('点击"跳过"应提交空目标以启动计时，而非仅关闭弹窗', () => {
+    renderGoalInput();
+
+    fireEvent.click(screen.getByRole('button', { name: '跳过' }));
+
+    // 核心断言：跳过 = 无目标但开始计时
+    expect(onSubmit).toHaveBeenCalledWith('');
+  });
+
+  it('输入为空时点击"开始"也应启动计时', () => {
+    renderGoalInput();
+
+    fireEvent.click(screen.getByRole('button', { name: '开始' }));
+
+    expect(onSubmit).toHaveBeenCalledWith('');
+  });
+
+  it('输入为空时按 Enter 也应启动计时', () => {
+    renderGoalInput();
+
+    fireEvent.keyDown(screen.getByPlaceholderText('这个番茄要做什么？'), { key: 'Enter' });
+
+    expect(onSubmit).toHaveBeenCalledWith('');
+  });
+
+  it('有目标时点击"开始"提交去空格后的目标', () => {
+    renderGoalInput();
+
+    fireEvent.change(screen.getByPlaceholderText('这个番茄要做什么？'), {
+      target: { value: '  背单词  ' },
+    });
+    fireEvent.click(screen.getByRole('button', { name: '开始' }));
+
+    expect(onSubmit).toHaveBeenCalledWith('背单词');
+  });
+
+  it('点击"取消"不提交、不启动计时', () => {
+    renderGoalInput();
+
+    fireEvent.click(screen.getByRole('button', { name: '取消' }));
+
+    expect(onSubmit).not.toHaveBeenCalled();
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('点击关闭按钮也是取消：不提交、不启动计时', () => {
+    renderGoalInput();
+
+    fireEvent.click(screen.getByRole('button', { name: '关闭' }));
+
+    expect(onSubmit).not.toHaveBeenCalled();
+    expect(onClose).toHaveBeenCalled();
+  });
+});

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

@@ -1,5 +1,10 @@
 /**
  * @ai-context: 通用组件：GoalInput。
+ * @ai-context: “跳过”与“取消”是两种意图：跳过 = 不设目标但开始计时
+ * （onSubmit('')），取消 = 关闭弹窗不开始（onClose，仅 Modal 关闭按钮）。
+ * 两者共用同一回调会使空目标番茄钟无法启动（内测反馈 bug）。
+ * @ai-context: "Skip" and "cancel" are distinct intents: skip starts the timer
+ * with an empty goal; cancel closes the dialog without starting.
  */
 import { useState, useRef, useEffect } from 'react';
 import { Modal } from '@/components/ui/Modal';
@@ -8,7 +13,9 @@ import GoalMemory from './GoalMemory';
 
 interface GoalInputProps {
   open: boolean;
+  /** 取消：关闭弹窗且不开始计时 */
   onClose: () => void;
+  /** 提交并开始计时；空字符串表示本次番茄不设目标 */
   onSubmit: (goal: string) => void;
   rememberGoal: boolean;
   onRememberChange: (v: boolean) => void;
@@ -32,14 +39,9 @@ export default function GoalInput({
     }
   }, [open]);
 
+  /** 提交目标并开始；输入为空时等同于“跳过”（无目标但仍然开始计时） */
   const handleSubmit = () => {
-    const trimmed = text.trim();
-    if (trimmed) {
-      onSubmit(trimmed);
-    } else {
-      // 空内容时等同于跳过
-      onClose();
-    }
+    onSubmit(text.trim());
   };
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
@@ -63,7 +65,12 @@ export default function GoalInput({
       size="sm"
       footer={
         <>
+          {/* 取消：关闭弹窗，不开始番茄 */}
           <Button variant="ghost" size="md" onClick={onClose}>
+            取消
+          </Button>
+          {/* 跳过：不设目标，但仍然开始计时（用 secondary 与“取消”在视觉上拉开差异） */}
+          <Button variant="secondary" size="md" onClick={() => onSubmit('')}>
             跳过
           </Button>
           <Button variant="primary" size="md" onClick={handleSubmit}>