From 778c2e8c5cf6b9a40b4929d61ea670dcdc6296cf Mon Sep 17 00:00:00 2001 From: selfrelease Date: Sun, 19 Jul 2026 19:08:59 +0800 Subject: [PATCH] =?UTF-8?q?feat(frontend):=20P4=20#38-41=20Focus=20TOC/BML?= =?UTF-8?q?=20=E5=8F=AF=E8=A7=86=E5=8C=96=20+=20AI+=20=E7=9C=8B=E6=9D=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - TOCVisualization: 约束理论瓶颈节点识别可视化 - BMLDashboard: 信念/心智模型/学习认知追踪仪表盘 - AI+ 专项看板: 商业化/模型成本/数据合规三维 + Agent 运行状态 --- frontend/src/app/(investor)/ai-plus/page.tsx | 107 ++++++++++++++++ .../src/components/workbench/BMLDashboard.tsx | 117 ++++++++++++++++++ .../components/workbench/TOCVisualization.tsx | 84 +++++++++++++ 3 files changed, 308 insertions(+) create mode 100644 frontend/src/app/(investor)/ai-plus/page.tsx create mode 100644 frontend/src/components/workbench/BMLDashboard.tsx create mode 100644 frontend/src/components/workbench/TOCVisualization.tsx diff --git a/frontend/src/app/(investor)/ai-plus/page.tsx b/frontend/src/app/(investor)/ai-plus/page.tsx new file mode 100644 index 0000000..a97d811 --- /dev/null +++ b/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 ( +
+
+ +

AI+ 专项看板

+
+ + {/* 三维看板 */} +
+ {metrics.map((section) => ( +
+
+
+
+ {section.items.map((item) => ( +
+ {item.label} +
+ {item.value} + + {item.trend === "up" && +
+
+ ))} +
+
+ ))} +
+ + {/* AI Agent 监控 */} +
+

Agent 运行状态

+
+ {[ + { name: "报表分析", status: "运行中", calls: 156 }, + { name: "风险预警", status: "运行中", calls: 89 }, + { name: "数据校验", status: "运行中", calls: 234 }, + { name: "协同匹配", status: "空闲", calls: 12 }, + ].map((agent) => ( +
+
{agent.name}
+
+ {agent.status} +
+
{agent.calls} 次调用
+
+ ))} +
+
+
+ ); + } +} + diff --git a/frontend/src/components/workbench/BMLDashboard.tsx b/frontend/src/components/workbench/BMLDashboard.tsx new file mode 100644 index 0000000..83831fc --- /dev/null +++ b/frontend/src/components/workbench/BMLDashboard.tsx @@ -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 = { + 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 = { + 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 ( +
+
+
+ + {/* 类型摘要 */} +
+ {(Object.keys(TYPE_CONFIG) as BMLType[]).map((type) => { + const cfg = TYPE_CONFIG[type]; + return ( +
+
+ ); + })} +
+ + {/* BML 列表 */} +
+ {items.map((item) => { + const typeCfg = TYPE_CONFIG[item.type]; + const statusCfg = STATUS_CONFIG[item.status]; + return ( +
+
+
+ + {typeCfg.label} + + {item.title} +
+ + +
+
+ 置信度：{Math.round(item.confidence * 100)}% + 证据：{item.evidence} + 更新：{item.lastUpdated} +
+ {item.confidence < 0.6 && ( +
+ ⚠ 置信度低于 0.6，建议人工核对 +
+ )} +
+ ); + })} +
+
+ ); +} diff --git a/frontend/src/components/workbench/TOCVisualization.tsx b/frontend/src/components/workbench/TOCVisualization.tsx new file mode 100644 index 0000000..bd228e7 --- /dev/null +++ b/frontend/src/components/workbench/TOCVisualization.tsx @@ -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 ( +
+
+
+ + {/* 约束链 */} +
+ {nodes.map((node, i) => { + const cfg = TYPE_CONFIG[node.type]; + return ( +
+
+
+ {i < nodes.length - 1 && ( + → + )} +
+ ); + })} +
+ + {/* 瓶颈详情 */} +
+
+
+

+ 获客渠道依赖单一来源，建议拓展 2-3 个新渠道。突破后预计整体吞吐提升 40%。 +

+
+
+ ); +}