refactor: 胶囊条改为纯进度展示，去掉"当前阶段"和"阶段耗时"

胶囊条 CapsuleStages 重构：
- 去掉 currentStage/progress 旧 props
- 每段只显示进度百分比 + 状态颜色（idle/active/done）
- 支持并行阶段（多个可同时 active）
- 数据由实际 PlanTask/DevTask/TestCase 状态驱动

进度数据来源：
- 调研：任务完成数 / 总数
- 产品/UI：需求完成数 / 关联数
- 开发：DevTask 进度（STATUS_PROGRESS 加权）
- 测试：已执行用例 / 总用例

版本列表页：
- 去掉"当前阶段"和"阶段进度"两列
- 替换为"状态"列（显示版本状态标签）

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/web/app/projects/[id]/page.tsx

@@ -78,7 +78,7 @@ function VersionCard({ version, onNavigate }: { version: VersionWithContext; onN
         </button>
         {expanded && (
           <div className="px-4 pb-4 pt-2 border-t border-[var(--line-soft)] space-y-3">
-            <CapsuleStages currentStage={version.currentStage} progress={version.progress} />
+            <CapsuleStages />
             <MemberChips members={version.members ?? []} />
           </div>
         )}
@@ -92,7 +92,7 @@ function VersionCard({ version, onNavigate }: { version: VersionWithContext; onN
         <span onClick={() => onNavigate(version.id)} className="text-sm font-medium text-[var(--ink)] cursor-pointer hover:text-[var(--accent)]">{version.name}</span>
         <span className={`text-[11px] px-2 py-0.5 rounded-full ${displayBg}`}>{displayStatus}</span>
       </div>
-      <div className="mb-3"><CapsuleStages currentStage={version.currentStage} progress={version.progress} /></div>
+      <div className="mb-3"><CapsuleStages /></div>
       <div className="flex items-center justify-between text-[11px] text-[var(--ink-muted)] mb-3 pb-3 border-b border-[var(--line-soft)]">
         <span className="flex items-center gap-1">
           <Calendar className="h-3 w-3" />

apps/web/app/versions/[id]/page.tsx

@@ -314,38 +314,38 @@ export default function VersionDetailPage() {
                     return totals.total > 0 ? Math.round((totals.done / totals.total) * 100) : 0;
                   };
 
-                  const today = new Date().toISOString().slice(0, 10);
-                  const calcDays = (group: typeof vPlans) => {
-                    if (group.length === 0) return 0;
-                    const starts = group.map((p) => p.startTime).sort();
-                    const startDate = starts[0];
-                    if (startDate > today) return 0;
-                    const diff = Math.ceil((new Date(today).getTime() - new Date(startDate).getTime()) / (1000 * 60 * 60 * 24));
-                    return Math.max(1, diff); // 当天开始至少算1天
+                  const getPlanStatus = (group: typeof vPlans): 'idle' | 'active' | 'done' => {
+                    if (group.length === 0) return 'idle';
+                    if (group.every((p) => p.status === 'completed')) return 'done';
+                    if (group.some((p) => p.status === 'in_progress')) return 'active';
+                    return 'idle';
                   };
 
-                  const stageProgress: Record<string, { percent: number; daysSpent: number }> = {};
-                  if (researchPlans.length > 0) stageProgress['requirement'] = { percent: calcGroupProgress(researchPlans, 'research'), daysSpent: calcDays(researchPlans) };
-                  if (productPlans.length > 0) stageProgress['product_design'] = { percent: calcGroupProgress(productPlans, 'product'), daysSpent: calcDays(productPlans) };
-                  if (uiPlans.length > 0) stageProgress['ui_design'] = { percent: calcGroupProgress(uiPlans, 'ui'), daysSpent: calcDays(uiPlans) };
+                  type StageProgressItem = { percent: number; status: 'idle' | 'active' | 'done' };
+                  const stageProgress: Partial<Record<string, StageProgressItem>> = {};
 
-                  // 开发阶段进度由 DevTask 驱动
+                  if (researchPlans.length > 0) stageProgress['requirement'] = { percent: calcGroupProgress(researchPlans, 'research'), status: getPlanStatus(researchPlans) };
+                  if (productPlans.length > 0) stageProgress['product_design'] = { percent: calcGroupProgress(productPlans, 'product'), status: getPlanStatus(productPlans) };
+                  if (uiPlans.length > 0) stageProgress['ui_design'] = { percent: calcGroupProgress(uiPlans, 'ui'), status: getPlanStatus(uiPlans) };
+
+                  // 开发阶段
                   if (versionDevTasks.length > 0) {
                     const devProgress = calcDevTaskProgress(versionDevTasks);
-                    const devStart = versionDevTasks.reduce((min, t) => t.startDate && t.startDate < min ? t.startDate : min, today);
-                    const devDays = devStart <= today ? Math.max(1, Math.ceil((new Date(today).getTime() - new Date(devStart).getTime()) / (1000 * 60 * 60 * 24))) : 0;
-                    stageProgress['dev'] = { percent: devProgress, daysSpent: devDays };
+                    const allSubmitted = versionDevTasks.every((t) => t.status === 'submitted');
+                    const hasActive = versionDevTasks.some((t) => t.status === 'in_progress' || t.status === 'testing');
+                    stageProgress['dev'] = { percent: devProgress, status: allSubmitted ? 'done' : hasActive ? 'active' : 'idle' };
                   }
 
-                  // 测试阶段进度由 TestCase 完成率驱动
-                  const versionTestCases = testCases.filter((c) => c.versionId === version.id);
-                  if (versionTestCases.length > 0) {
-                    const executed = versionTestCases.filter((c) => c.status === 'passed' || c.status === 'failed' || c.status === 'blocked').length;
-                    const testPercent = Math.round((executed / versionTestCases.length) * 100);
-                    stageProgress['testing'] = { percent: testPercent, daysSpent: 0 };
+                  // 测试阶段
+                  if (versionTCs.length > 0) {
+                    const executed = versionTCs.filter((c) => c.status === 'passed' || c.status === 'failed' || c.status === 'blocked').length;
+                    const testPercent = Math.round((executed / versionTCs.length) * 100);
+                    const allPassed = versionTCs.every((c) => c.status === 'passed');
+                    const hasRunning = versionTCs.some((c) => c.status === 'running');
+                    stageProgress['testing'] = { percent: testPercent, status: allPassed ? 'done' : (hasRunning || executed > 0) ? 'active' : 'idle' };
                   }
 
-                  return <CapsuleStages currentStage={version.currentStage} progress={version.progress} stageProgress={stageProgress} />;
+                  return <CapsuleStages stageProgress={stageProgress as any} />;
                 })()}
 
                 {/* 双栏：加班排名 + 原因占比 */}

apps/web/app/versions/page.tsx

@@ -7,7 +7,7 @@ import { useProductStore } from '@/stores/useProductStore';
 import { useRequirementStore } from '@/stores/useRequirementStore';
 import { flattenVersions, flattenProjects } from '@/lib/derive';
 import type { VersionWithContext } from '@/lib/derive';
-import { VersionStatus, VERSION_STATUS_LABEL, VERSION_STATUS_DOT, getVersionDisplayStatus } from '@/lib/version-status';
+import { VersionStatus, VERSION_STATUS_LABEL, VERSION_STATUS_DOT, VERSION_STATUS_BG, getVersionDisplayStatus } from '@/lib/version-status';
 import { STAGES } from '@/lib/stage';
 import { ROLE_LABEL } from '@/lib/stage';
 import { calcOverallProgress } from '@/lib/risk';
@@ -250,8 +250,7 @@ export default function VersionsPage() {
                   <tr className="border-b border-[var(--line)] bg-[var(--bg-subtle)]">
                     <th className="px-4 py-2.5 text-[11px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">版本号</th>
                     <th className="px-4 py-2.5 text-[11px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">优先级</th>
-                    <th className="px-4 py-2.5 text-[11px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">当前阶段</th>
-                    <th className="px-4 py-2.5 text-[11px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">阶段进度</th>
+                    <th className="px-4 py-2.5 text-[11px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">状态</th>
                     <th className="px-4 py-2.5 text-[11px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">整体进度</th>
                     <th className="px-4 py-2.5 text-[11px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">健康度</th>
                     <th className="px-4 py-2.5 text-[11px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">风险标签</th>
@@ -323,23 +322,11 @@ function VersionRow({ version, openMenuId, setOpenMenuId, onNavigate, onAction }
         </span>
       </td>
 
-      {/* 当前阶段 */}
-      <td className="px-4 py-3 text-[12px] text-[var(--ink-soft)]">
-        {getStageLabel(version)}
-      </td>
-
-      {/* 阶段进度 */}
+      {/* 状态 */}
       <td className="px-4 py-3">
-        {version.status === 'developing' && version.currentStage ? (
-          <div className="flex items-center gap-2">
-            <div className="h-1.5 w-16 rounded-full bg-zinc-100">
-              <div className="h-1.5 rounded-full bg-blue-500 transition-all" style={{ width: `${getStageProgress(version)}%` }} />
-            </div>
-            <span className="text-[11px] tabular-nums text-[var(--ink-muted)]">{getStageProgress(version)}%</span>
-          </div>
-        ) : (
-          <span className="text-[12px] text-[var(--ink-muted)]">-</span>
-        )}
+        <span className={`inline-flex items-center rounded-md px-2 py-0.5 text-[11px] font-medium ${VERSION_STATUS_BG[version.status as VersionStatus] || 'bg-zinc-100 text-zinc-600'}`}>
+          {getVersionDisplayStatus(version.status as VersionStatus, version.currentStage)}
+        </span>
       </td>
 
       {/* 整体进度 */}

apps/web/components/version/CapsuleStages.tsx

@@ -1,55 +1,20 @@
-import { Stage, Role, STAGES, STAGE_INDEX } from '@/lib/stage';
-import type { RoleProgress } from '@/lib/derive';
+import type { Stage } from '@/lib/stage';
+import { STAGES } from '@/lib/stage';
 
 export interface StageProgressItem {
   percent: number;
-  daysSpent: number;
+  status: 'idle' | 'active' | 'done';
 }
 
-export function CapsuleStages({ currentStage, progress, stageProgress }: {
-  currentStage?: Stage;
-  progress?: RoleProgress[];
+export function CapsuleStages({ stageProgress }: {
   stageProgress?: Partial<Record<Stage, StageProgressItem>>;
 }) {
-  const currentIdx = currentStage !== undefined
-    ? (currentStage === 'released' ? STAGES.length : STAGE_INDEX[currentStage])
-    : -1;
-  const progressMap = (progress ?? []).reduce<Record<Role, { percent: number; daysSpent: number }>>((acc, p) => {
-    acc[p.role] = { percent: p.percent, daysSpent: p.daysSpent };
-    return acc;
-  }, {} as Record<Role, { percent: number; daysSpent: number }>);
-
-  const stageRoleMap: Record<Stage, Role[]> = {
-    requirement: ['product'],
-    product_design: ['product'],
-    ui_design: ['ui'],
-    dev: ['frontend', 'backend'],
-    integration: ['frontend', 'backend'],
-    testing: ['testing'],
-    released: [],
-  };
-
-  function getStageInfo(stage: Stage) {
-    // 优先使用 stageProgress
-    if (stageProgress && stageProgress[stage]) {
-      const sp = stageProgress[stage]!;
-      return { percent: sp.percent, days: sp.daysSpent, hasData: true };
-    }
-    const roles = stageRoleMap[stage];
-    if (roles.length === 0) return { percent: 0, days: 0, hasData: false };
-    const items = roles.map((r) => progressMap[r]).filter(Boolean);
-    if (items.length === 0) return { percent: 0, days: 0, hasData: false };
-    const percent = Math.round(items.reduce((s, i) => s + i.percent, 0) / items.length);
-    const days = Math.max(...items.map((i) => i.daysSpent));
-    return { percent, days, hasData: true };
-  }
-
   return (
     <div className="flex rounded-lg border border-[var(--line)] overflow-hidden bg-[var(--bg-card)]">
       {STAGES.map((stage, idx) => {
-        const isCompleted = idx < currentIdx;
-        const isCurrent = idx === currentIdx;
-        const info = getStageInfo(stage.key);
+        const info = stageProgress?.[stage.key];
+        const status = info?.status || 'idle';
+        const percent = info?.percent ?? 0;
 
         return (
           <div
@@ -57,18 +22,20 @@ export function CapsuleStages({ currentStage, progress, stageProgress }: {
             className={`flex-1 flex flex-col ${idx < STAGES.length - 1 ? 'border-r border-[var(--line-soft)]' : ''}`}
           >
             <div className="flex items-center justify-between px-2 py-1.5 min-h-[28px]">
-              <span className={`text-[10px] font-medium leading-tight ${isCurrent ? 'text-[var(--ink)]' : isCompleted ? 'text-[var(--ink-soft)]' : 'text-[var(--ink-muted)]'}`}>
+              <span className={`text-[10px] font-medium leading-tight ${status === 'active' ? 'text-[var(--ink)]' : status === 'done' ? 'text-[var(--ink-soft)]' : 'text-[var(--ink-muted)]'}`}>
                 {stage.label}
               </span>
-              <span className={`text-[10px] leading-tight ${isCompleted ? 'text-emerald-600' : isCurrent ? 'text-blue-600 font-medium' : 'text-[var(--ink-muted)]'}`}>
-                {isCompleted ? (info.hasData ? `${info.percent}% · ${info.days}天` : '-') : isCurrent ? (info.hasData ? `${info.percent}% · ${info.days}天` : '-') : ''}
-              </span>
+              {status !== 'idle' && (
+                <span className={`text-[10px] font-medium leading-tight tabular-nums ${status === 'done' ? 'text-emerald-600' : 'text-blue-600'}`}>
+                  {percent}%
+                </span>
+              )}
             </div>
             <div className="h-[3px] w-full bg-zinc-50">
-              {isCompleted && <div className="h-full bg-zinc-700 w-full" />}
-              {isCurrent && info.hasData && (
+              {status === 'done' && <div className="h-full bg-emerald-500 w-full" />}
+              {status === 'active' && (
                 <div className="h-full bg-blue-100 w-full">
-                  <div className="h-full bg-blue-500 transition-all" style={{ width: `${info.percent}%` }} />
+                  <div className="h-full bg-blue-500 transition-all" style={{ width: `${percent}%` }} />
                 </div>
               )}
             </div>