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

- TOCVisualization: 约束理论瓶颈节点识别可视化
- BMLDashboard: 信念/心智模型/学习认知追踪仪表盘
- AI+ 专项看板: 商业化/模型成本/数据合规三维 + Agent 运行状态

frontend/src/app/(investor)/ai-plus/page.tsx

@@ -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>
+    );
+  }
+}
+