feat(平台): 补齐服务端持久化和AI拆解契约

apps/web/components/version/AiDecomposeButton.tsx

@@ -0,0 +1,206 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { Sparkles, Loader2, AlertCircle, RotateCw } from 'lucide-react';
+import type { VersionPlan } from '@/lib/version-plan';
+import type { VersionWithContext } from '@/lib/derive';
+import { useVersionPlanStore } from '@/stores/useVersionPlanStore';
+import { useRequirementStore } from '@/stores/useRequirementStore';
+import { useAuthStore } from '@/stores/useAuthStore';
+import { api } from '@/lib/api';
+import { DecomposeReportModal } from './DecomposeReportModal';
+import type {
+  AgentDecomposeRequest,
+  AgentDecomposeResponse,
+  AgentDecomposeError,
+} from '@ftb/shared';
+
+interface Props {
+  plan: VersionPlan;
+  version: VersionWithContext;
+}
+
+/** in_progress 视为"卡死"的阈值（秒）— 超过这个时间，按钮允许重新点击 */
+const STUCK_THRESHOLD_SEC = 240;
+
+function formatElapsed(sec: number): string {
+  if (sec < 60) return `${sec}s`;
+  const m = Math.floor(sec / 60);
+  const s = sec % 60;
+  return `${m}m${s}s`;
+}
+
+export function AiDecomposeButton({ plan, version }: Props) {
+  const { updatePlan } = useVersionPlanStore();
+  const { requirements } = useRequirementStore();
+  const user = useAuthStore((s) => s.user);
+
+  const [loading, setLoading] = useState(false);
+  const [result, setResult] = useState<AgentDecomposeResponse | null>(null);
+  const [tick, setTick] = useState(0);
+  const startedAtRef = useRef<number | null>(null);
+
+  // plan 上的状态（持久化在 localStorage）
+  const persistStatus = plan.aiDecomposeStatus;
+  const persistError = plan.aiDecomposeError;
+  const persistAt = plan.aiDecomposeAt;
+
+  // 计算"已用时"
+  const elapsedSec = (() => {
+    if (loading && startedAtRef.current) {
+      return Math.floor((tick - startedAtRef.current) / 1000);
+    }
+    if (persistStatus === 'in_progress' && persistAt) {
+      const start = new Date(persistAt).getTime();
+      return Math.max(0, Math.floor((Date.now() - start) / 1000));
+    }
+    return 0;
+  })();
+
+  const isStaleInProgress = persistStatus === 'in_progress' && elapsedSec > STUCK_THRESHOLD_SEC;
+  const isInProgress = (loading || persistStatus === 'in_progress') && !isStaleInProgress;
+  const isError = persistStatus === 'error' && !loading;
+  const wasCompleted = persistStatus === 'completed' && !loading;
+
+  // tick 每秒更新一次，让"已用时"实时跳
+  useEffect(() => {
+    if (!isInProgress) return;
+    const id = setInterval(() => setTick(Date.now()), 1000);
+    return () => clearInterval(id);
+  }, [isInProgress]);
+
+  const linkedReqs = requirements
+    .filter((r) => r.versionId === version.id)
+    .map((r) => ({
+      id: r.id,
+      code: r.code,
+      title: r.title,
+      description: r.description,
+    }));
+
+  const handleClick = async () => {
+    if (loading) return;
+    // 即便 persistStatus 是 in_progress，只要超过阈值就允许重新点
+    if (persistStatus === 'in_progress' && !isStaleInProgress) return;
+
+    startedAtRef.current = Date.now();
+    setTick(Date.now());
+    setLoading(true);
+
+    updatePlan(plan.id, {
+      aiDecomposeStatus: 'in_progress',
+      aiDecomposeBy: user?.name,
+      aiDecomposeAt: new Date().toISOString(),
+      aiDecomposeError: undefined,
+    });
+
+    const members = (version.members ?? []).map((m) => ({
+      name: m.name,
+      role: m.role,
+    }));
+
+    const payload: AgentDecomposeRequest = {
+      prototypeUrl: plan.resultUrl || '',
+      requirements: linkedReqs,
+      members,
+      versionId: version.id,
+      planId: plan.id,
+    };
+
+    try {
+      const resp = await api.postRaw<AgentDecomposeResponse | AgentDecomposeError>(
+        '/ai/decompose',
+        payload,
+        300000,
+      );
+      if (!resp.ok) {
+        updatePlan(plan.id, {
+          aiDecomposeStatus: 'error',
+          aiDecomposeError: resp.error,
+        });
+      } else {
+        setResult(resp);
+        updatePlan(plan.id, {
+          aiDecomposeStatus: 'completed',
+          aiDecomposeError: undefined,
+        });
+      }
+    } catch (e: any) {
+      const msg = e?.message || '调用 AI 服务失败';
+      updatePlan(plan.id, {
+        aiDecomposeStatus: 'error',
+        aiDecomposeError: msg,
+      });
+    } finally {
+      setLoading(false);
+      startedAtRef.current = null;
+    }
+  };
+
+  if (plan.type !== 'product' || plan.status !== 'completed' || !plan.resultUrl) {
+    return null;
+  }
+
+  return (
+    <>
+      <button
+        onClick={handleClick}
+        disabled={isInProgress}
+        className={`inline-flex items-center gap-1 rounded-md border px-2 py-1 text-[11px] font-medium disabled:cursor-not-allowed disabled:opacity-70 ${
+          isError
+            ? 'border-red-200 bg-red-50 text-red-700 hover:bg-red-100'
+            : 'border-purple-200 bg-purple-50 text-purple-700 hover:bg-purple-100'
+        }`}
+        title={
+          isError
+            ? `上次失败：${persistError || '未知错误'}（点击重试）`
+            : wasCompleted
+              ? '此前已拆解过，再次点击会重新拆解'
+              : '使用 AI 把原型 + 关联需求拆解成开发任务和测试用例'
+        }
+      >
+        {isInProgress ? (
+          <>
+            <Loader2 className="h-3 w-3 animate-spin" />
+            拆解中 {formatElapsed(elapsedSec)}
+          </>
+        ) : isError ? (
+          <>
+            <RotateCw className="h-3 w-3" />
+            重试
+          </>
+        ) : (
+          <>
+            <Sparkles className="h-3 w-3" />
+            {wasCompleted ? '重新 AI 拆解' : 'AI 拆解'}
+          </>
+        )}
+      </button>
+
+      {/* 错误信息：在按钮旁悬浮显示 */}
+      {isError && persistError && (
+        <span className="ml-1 inline-flex items-center gap-1 text-[11px] text-red-600 max-w-[260px]" title={persistError}>
+          <AlertCircle className="h-3 w-3 shrink-0" />
+          <span className="truncate">{persistError}</span>
+        </span>
+      )}
+
+      {/* 卡死提示：persistStatus 是 in_progress 但已超时 */}
+      {isStaleInProgress && (
+        <span className="ml-1 text-[11px] text-amber-600" title="上次拆解记录残留，点击按钮重新拆解">
+          上次未完成（{formatElapsed(elapsedSec)}）
+        </span>
+      )}
+
+      {result && (
+        <DecomposeReportModal
+          result={result}
+          version={version}
+          plan={plan}
+          requirements={linkedReqs}
+          onClose={() => setResult(null)}
+        />
+      )}
+    </>
+  );
+}