feat(frontend): P2 页面开发 — 今日行动中心 + 对比 + 决策线程 + OODA + 助推追踪 + 密级标签

- 今日行动中心: 6 区块结构（AI早报/必须处理/建议关注/增长机会/等待他人/已完成） - 多企业对比: 集成 CompareMode 组件 + 企业选择器 - 决策线程列表/详情: 集成 ThreadList/ThreadDetail 组件 - OODA 决策循环: 四阶段可视化 + 决策延迟追踪 - 助推效果追踪: 采纳率/行动率/疲劳度指标面板 - 信息分级标识: 4 级密级标签组件（公开/内部/机密/绝密）
2026-07-19 19:02:32 +08:00
parent 129210405d
commit a4044baa31
8 changed files with 442 additions and 185 deletions
@@ -0,0 +1,104 @@
+/** OODA 决策循环可视化页面 — Observe/Orient/Decide/Act 循环图 + 决策延迟追踪。 */
+
+"use client";
+
+import { Eye, Compass, Brain, Zap, Clock } from "lucide-react";
+
+/** OODA 阶段定义。 */
+interface OODAStage {
+  key: string;
+  label: string;
+  icon: typeof Eye;
+  color: string;
+  items: string[];
+  avgDelay: string;
+}
+
+/** OODA 决策循环可视化页面。 */
+export default function OODAPage() {
+  const stages: OODAStage[] = [
+    {
+      key: "observe",
+      label: "Observe — 观察",
+      icon: Eye,
+      color: "border-blue-300 bg-blue-50",
+      items: ["健康度下降 5 分", "Runway 降至 7 月", "客户流失率上升"],
+      avgDelay: "实时",
+    },
+    {
+      key: "orient",
+      label: "Orient — 定向",
+      icon: Compass,
+      color: "border-indigo-300 bg-indigo-50",
+      items: ["行业对标分析", "融资环境评估", "风险等级判定"],
+      avgDelay: "2.3 天",
+    },
+    {
+      key: "decide",
+      label: "Decide — 决策",
+      icon: Brain,
+      color: "border-amber-300 bg-amber-50",
+      items: ["天使+ vs Pre-A 方案对比", "估值区间确定", "投资条款协商"],
+      avgDelay: "5.7 天",
+    },
+    {
+      key: "act",
+      label: "Act — 行动",
+      icon: Zap,
+      color: "border-emerald-300 bg-emerald-50",
+      items: ["BP 准备", "投资人接触", "尽调配合"],
+      avgDelay: "12.4 天",
+    },
+  ];
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center gap-2">
+        <Compass className="text-[var(--investor-primary)]" size={24} />
+        <h1 className="text-2xl font-bold">OODA 决策循环</h1>
+      </div>
+
+      {/* 决策延迟摘要 */}
+      <div className="rounded-lg border bg-white p-4 shadow-sm">
+        <div className="mb-3 flex items-center gap-2">
+          <Clock className="text-amber-500" size={18} aria-hidden="true" />
+          <h2 className="font-medium">决策延迟追踪</h2>
+        </div>
+        <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
+          {stages.map((stage) => (
+            <div key={stage.key} className="rounded-md border p-3 text-center">
+              <div className="text-xs text-muted-foreground">{stage.label.split(" — ")[0]}</div>
+              <div className="mt-1 text-lg font-bold text-indigo-600">{stage.avgDelay}</div>
+            </div>
+          ))}
+        </div>
+        <p className="mt-3 text-xs text-muted-foreground">
+          全循环平均耗时 20.4 天，较上季度缩短 3.2 天。定向阶段延迟最长，建议加强弱信号自动化分析。
+        </p>
+      </div>
+
+      {/* OODA 循环图 */}
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-4">
+        {stages.map((stage, i) => (
+          <div key={stage.key} className={`rounded-lg border-2 p-4 ${stage.color}`}>
+            <div className="mb-3 flex items-center gap-2">
+              <stage.icon size={18} aria-hidden="true" />
+              <h3 className="text-sm font-medium">{stage.label}</h3>
+            </div>
+            <ul className="space-y-1.5 text-xs text-gray-600">
+              {stage.items.map((item, j) => (
+                <li key={j} className="flex items-center gap-1.5">
+                  <span className="h-1.5 w-1.5 rounded-full bg-current opacity-40" />
+                  {item}
+                </li>
+              ))}
+            </ul>
+            {i < stages.length - 1 && (
+              <div className="mt-3 text-center text-gray-300">→</div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}