feat(frontend): P4 #38-41 Focus TOC/BML 可视化 + AI+ 看板

- TOCVisualization: 约束理论瓶颈节点识别可视化 - BMLDashboard: 信念/心智模型/学习认知追踪仪表盘 - AI+ 专项看板: 商业化/模型成本/数据合规三维 + Agent 运行状态
2026-07-19 19:08:59 +08:00
parent 44cbdc9d62
commit 778c2e8c5c
3 changed files with 308 additions and 0 deletions
@@ -0,0 +1,107 @@
+/** AI+ 专项看板 — AI 商业化/模型成本/数据合规三维看板。 */
+
+"use client";
+
+import React from "react";
+import { Cpu, DollarSign, ShieldCheck, TrendingUp, TrendingDown } from "lucide-react";
+
+/** AI+ 专项看板页面。 */
+export default class AIPlusDashboardPage extends React.Component {
+  render() {
+    const metrics = [
+      {
+        category: "AI 商业化",
+        icon: Cpu,
+        color: "text-indigo-600",
+        items: [
+          { label: "PoC 数量", value: "3", trend: "up", trendValue: "+1" },
+          { label: "转化率", value: "45%", trend: "up", trendValue: "+8%" },
+          { label: "AI 月营收", value: "80万", trend: "up", trendValue: "+20%" },
+          { label: "客户满意度", value: "NPS 52", trend: "stable", trendValue: "持平" },
+        ],
+      },
+      {
+        category: "模型成本",
+        icon: DollarSign,
+        color: "text-amber-600",
+        items: [
+          { label: "月推理成本", value: "12万", trend: "down", trendValue: "-8%" },
+          { label: "单次调用成本", value: "0.03元", trend: "down", trendValue: "-15%" },
+          { label: "毛利率", value: "58%", trend: "up", trendValue: "+3%" },
+          { label: "成本/营收比", value: "15%", trend: "down", trendValue: "-2%" },
+        ],
+      },
+      {
+        category: "数据合规",
+        icon: ShieldCheck,
+        color: "text-emerald-600",
+        items: [
+          { label: "合规评分", value: "92", trend: "up", trendValue: "+5" },
+          { label: "数据泄露事件", value: "0", trend: "stable", trendValue: "无" },
+          { label: "审计通过率", value: "100%", trend: "stable", trendValue: "持平" },
+          { label: "整改项", value: "2", trend: "down", trendValue: "-3" },
+        ],
+      },
+    ];
+
+    return (
+      <div className="space-y-6">
+        <div className="flex items-center gap-2">
+          <Cpu className="text-[var(--investor-primary)]" size={24} />
+          <h1 className="text-2xl font-bold">AI+ 专项看板</h1>
+        </div>
+
+        {/* 三维看板 */}
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+          {metrics.map((section) => (
+            <div key={section.category} className="rounded-lg border bg-white p-4 shadow-sm">
+              <div className="mb-3 flex items-center gap-2">
+                <section.icon className={section.color} size={18} aria-hidden="true" />
+                <h2 className="font-medium">{section.category}</h2>
+              </div>
+              <div className="space-y-2">
+                {section.items.map((item) => (
+                  <div key={item.label} className="flex items-center justify-between text-sm">
+                    <span className="text-muted-foreground">{item.label}</span>
+                    <div className="flex items-center gap-2">
+                      <span className="font-medium">{item.value}</span>
+                      <span className={`text-xs ${
+                        item.trend === "up" ? "text-emerald-500" : item.trend === "down" ? "text-rose-500" : "text-gray-400"
+                      }`}>
+                        {item.trend === "up" && <TrendingUp size={10} className="inline" aria-hidden="true" />}
+                        {item.trend === "down" && <TrendingDown size={10} className="inline" aria-hidden="true" />}
+                        {item.trendValue}
+                      </span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* AI Agent 监控 */}
+        <div className="rounded-lg border bg-white p-4 shadow-sm">
+          <h2 className="mb-3 font-medium">Agent 运行状态</h2>
+          <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
+            {[
+              { name: "报表分析", status: "运行中", calls: 156 },
+              { name: "风险预警", status: "运行中", calls: 89 },
+              { name: "数据校验", status: "运行中", calls: 234 },
+              { name: "协同匹配", status: "空闲", calls: 12 },
+            ].map((agent) => (
+              <div key={agent.name} className="rounded-md border p-3 text-center">
+                <div className="text-sm font-medium">{agent.name}</div>
+                <div className={`mt-1 text-xs ${agent.status === "运行中" ? "text-emerald-600" : "text-gray-400"}`}>
+                  {agent.status}
+                </div>
+                <div className="mt-1 text-xs text-muted-foreground">{agent.calls} 次调用</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
@@ -0,0 +1,117 @@
+/** Focus 模式 BML 认知追踪仪表盘 — 信念/心智模型/学习可视化。 */
+
+"use client";
+
+import { Brain, Lightbulb, BookOpen, TrendingUp, XCircle, Clock } from "lucide-react";
+
+/** BML 条目类型。 */
+type BMLType = "belief" | "mental_model" | "learning";
+type BMLStatus = "validating" | "validated" | "invalidated" | "learning";
+
+/** BML 条目定义。 */
+interface BMLItem {
+  id: string;
+  type: BMLType;
+  title: string;
+  status: BMLStatus;
+  confidence: number;
+  evidence: string;
+  lastUpdated: string;
+}
+
+/** BML 仪表盘 Props。 */
+interface BMLDashboardProps {
+  items?: BMLItem[];
+}
+
+/** 类型配置。 */
+const TYPE_CONFIG: Record<BMLType, { label: string; icon: typeof Brain; color: string }> = {
+  belief: { label: "信念", icon: Lightbulb, color: "text-amber-600 bg-amber-50" },
+  mental_model: { label: "心智模型", icon: Brain, color: "text-indigo-600 bg-indigo-50" },
+  learning: { label: "学习", icon: BookOpen, color: "text-emerald-600 bg-emerald-50" },
+};
+
+/** 状态配置。 */
+const STATUS_CONFIG: Record<BMLStatus, { label: string; icon: typeof Clock; color: string }> = {
+  validating: { label: "验证中", icon: Clock, color: "text-amber-600" },
+  validated: { label: "已验证", icon: TrendingUp, color: "text-emerald-600" },
+  invalidated: { label: "已证伪", icon: XCircle, color: "text-rose-600" },
+  learning: { label: "学习中", icon: BookOpen, color: "text-blue-600" },
+};
+
+const DEFAULT_ITEMS: BMLItem[] = [
+  { id: "b1", type: "belief", title: "企业客户更看重数据安全而非价格", status: "validated", confidence: 0.92, evidence: "5 个 PoC 反馈一致", lastUpdated: "2026-07-10" },
+  { id: "b2", type: "belief", title: "AI 模型成本会持续下降", status: "validating", confidence: 0.75, evidence: "推理成本月降 8%", lastUpdated: "2026-07-12" },
+  { id: "m1", type: "mental_model", title: "PLG 不适用于企业级 AI 产品", status: "validated", confidence: 0.88, evidence: "3 次免费试用转化率 <5%", lastUpdated: "2026-06-28" },
+  { id: "l1", type: "learning", title: "董事会关注 AI 伦理风险", status: "learning", confidence: 0.60, evidence: "上次董事会提问方向", lastUpdated: "2026-07-05" },
+];
+
+/**
+ * Focus 模式 BML 认知追踪仪表盘组件。
+ *
+ * 可视化创始人的信念(Belief)、心智模型(Mental Model)和学习(Learning)状态。
+ */
+export function BMLDashboard({ items = DEFAULT_ITEMS }: BMLDashboardProps) {
+  const counts = {
+    belief: items.filter((i) => i.type === "belief").length,
+    mental_model: items.filter((i) => i.type === "mental_model").length,
+    learning: items.filter((i) => i.type === "learning").length,
+  };
+
+  return (
+    <div className="rounded-lg border bg-white p-4 shadow-sm">
+      <div className="mb-3 flex items-center gap-2">
+        <Brain className="text-indigo-500" size={18} aria-hidden="true" />
+        <h2 className="font-medium">BML 认知追踪</h2>
+      </div>
+
+      {/* 类型摘要 */}
+      <div className="mb-4 grid grid-cols-3 gap-2">
+        {(Object.keys(TYPE_CONFIG) as BMLType[]).map((type) => {
+          const cfg = TYPE_CONFIG[type];
+          return (
+            <div key={type} className={`rounded-md p-2 text-center ${cfg.color}`}>
+              <cfg.icon size={16} className="mx-auto" aria-hidden="true" />
+              <div className="mt-1 text-lg font-bold">{counts[type]}</div>
+              <div className="text-xs">{cfg.label}</div>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* BML 列表 */}
+      <div className="space-y-2">
+        {items.map((item) => {
+          const typeCfg = TYPE_CONFIG[item.type];
+          const statusCfg = STATUS_CONFIG[item.status];
+          return (
+            <div key={item.id} className="rounded-md border p-3">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <span className={`rounded px-1.5 py-0.5 text-xs ${typeCfg.color}`}>
+                    {typeCfg.label}
+                  </span>
+                  <span className="text-sm font-medium">{item.title}</span>
+                </div>
+                <span className={`flex items-center gap-1 text-xs ${statusCfg.color}`}>
+                  <statusCfg.icon size={10} aria-hidden="true" />
+                  {statusCfg.label}
+                </span>
+              </div>
+              <div className="mt-1.5 flex items-center gap-3 text-xs text-muted-foreground">
+                <span>置信度：{Math.round(item.confidence * 100)}%</span>
+                <span>证据：{item.evidence}</span>
+                <span>更新：{item.lastUpdated}</span>
+              </div>
+              {item.confidence < 0.6 && (
+                <div className="mt-1.5 text-xs text-amber-600">
+                  ⚠ 置信度低于 0.6，建议人工核对
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,84 @@
+/** Focus 模式 TOC 约束点识别可视化 — 约束理论瓶颈节点高亮。 */
+
+"use client";
+
+import { Target, AlertCircle, CheckCircle2 } from "lucide-react";
+
+/** 约束点定义。 */
+interface ConstraintNode {
+  id: string;
+  label: string;
+  type: "bottleneck" | "constraint" | "non_constraint";
+  impact: "high" | "medium" | "low";
+  description: string;
+}
+
+/** TOC 可视化 Props。 */
+interface TOCVisualizationProps {
+  nodes?: ConstraintNode[];
+}
+
+/** 默认约束点数据。 */
+const DEFAULT_NODES: ConstraintNode[] = [
+  { id: "n1", label: "客户获取", type: "bottleneck", impact: "high", description: "当前最大瓶颈：获客渠道单一" },
+  { id: "n2", label: "产品交付", type: "constraint", impact: "medium", description: "交付周期偏长，影响客户满意度" },
+  { id: "n3", label: "技术架构", type: "non_constraint", impact: "low", description: "架构弹性充足，非瓶颈" },
+  { id: "n4", label: "团队产能", type: "constraint", impact: "medium", description: "核心团队 8 人，产能接近上限" },
+  { id: "n5", label: "资金储备", type: "non_constraint", impact: "low", description: "Runway 18 月，非当前约束" },
+];
+
+/** 类型配置。 */
+const TYPE_CONFIG = {
+  bottleneck: { label: "瓶颈", icon: AlertCircle, color: "text-rose-600 bg-rose-50 border-rose-200" },
+  constraint: { label: "约束", icon: Target, color: "text-amber-600 bg-amber-50 border-amber-200" },
+  non_constraint: { label: "非约束", icon: CheckCircle2, color: "text-emerald-600 bg-emerald-50 border-emerald-200" },
+} as const;
+
+/**
+ * Focus 模式 TOC 约束点识别可视化组件。
+ *
+ * 基于约束理论（Theory of Constraints）识别企业瓶颈节点。
+ */
+export function TOCVisualization({ nodes = DEFAULT_NODES }: TOCVisualizationProps) {
+  return (
+    <div className="rounded-lg border bg-white p-4 shadow-sm">
+      <div className="mb-3 flex items-center gap-2">
+        <Target className="text-indigo-500" size={18} aria-hidden="true" />
+        <h2 className="font-medium">TOC 约束点识别</h2>
+      </div>
+
+      {/* 约束链 */}
+      <div className="flex items-center gap-2 overflow-x-auto pb-2">
+        {nodes.map((node, i) => {
+          const cfg = TYPE_CONFIG[node.type];
+          return (
+            <div key={node.id} className="flex items-center gap-2">
+              <div
+                className={`flex min-w-[120px] flex-col items-center rounded-lg border-2 p-3 ${cfg.color}`}
+                title={node.description}
+              >
+                <cfg.icon size={20} aria-hidden="true" />
+                <span className="mt-1 text-sm font-medium">{node.label}</span>
+                <span className="text-xs opacity-70">{cfg.label}</span>
+              </div>
+              {i < nodes.length - 1 && (
+                <span className="text-gray-300">→</span>
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      {/* 瓶颈详情 */}
+      <div className="mt-3 rounded-md bg-rose-50 p-3 text-sm">
+        <div className="flex items-center gap-2 text-rose-700">
+          <AlertCircle size={14} aria-hidden="true" />
+          <span className="font-medium">当前瓶颈：客户获取</span>
+        </div>
+        <p className="mt-1 text-xs text-rose-600">
+          获客渠道依赖单一来源，建议拓展 2-3 个新渠道。突破后预计整体吞吐提升 40%。
+        </p>
+      </div>
+    </div>
+  );
+}