selfrelease
44cbdc9d62
P3 创始人端： - 经营驾驶舱: 6 KPI 卡片 + 风险提示 - 投资人沟通准备中心: 会议列表 + 准备清单 + AI 建议 - 里程碑自填: 进度滑块 + 新增表单 - OKR 对齐视图: 投资人期望对齐度 + KR 进度 - BML 认知追踪: 信念/心智模型/学习追踪 - 通知页面 + 个人中心页面 P4 企业战情室集成： - HighlightsPanel: 顶部 KPI 摘要栏 - WorkModeSwitcher: 4 种工作模式切换 - InsightRail: 右侧 AI 面板（默认风险预警 Agent） Admin： - 商业秘密保护配置: 密级/留痕/导出管控/审计日志
57 lines
2.7 KiB
TypeScript
57 lines
2.7 KiB
TypeScript
/** 经营驾驶舱页面 — 创始人端核心经营指标可视化。 */
|
||
|
||
"use client";
|
||
|
||
import { Gauge, TrendingUp, TrendingDown, Wallet, Users, Target, Cpu, AlertTriangle } from "lucide-react";
|
||
|
||
/** 经营驾驶舱页面。 */
|
||
export default function OperationsPage() {
|
||
const kpis = [
|
||
{ label: "月营收", value: "800万", trend: "up", trendValue: "+15%", icon: Wallet, color: "text-emerald-600" },
|
||
{ label: "毛利率", value: "42%", trend: "up", trendValue: "+3%", icon: TrendingUp, color: "text-emerald-600" },
|
||
{ label: "客户数", value: "156", trend: "up", trendValue: "+12", icon: Users, color: "text-emerald-600" },
|
||
{ label: "Runway", value: "18 月", trend: "stable", trendValue: "持平", icon: Gauge, color: "text-blue-600" },
|
||
{ label: "OKR 进度", value: "68%", trend: "up", trendValue: "+8%", icon: Target, color: "text-indigo-600" },
|
||
{ label: "AI PoC", value: "3 个", trend: "up", trendValue: "+1", icon: Cpu, color: "text-indigo-600" },
|
||
];
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
<div className="flex items-center gap-2">
|
||
<Gauge className="text-[var(--founder-primary)]" size={24} />
|
||
<h1 className="text-2xl font-bold">经营驾驶舱</h1>
|
||
</div>
|
||
|
||
{/* KPI 卡片网格 */}
|
||
<div className="grid grid-cols-2 gap-4 md:grid-cols-3">
|
||
{kpis.map((kpi) => (
|
||
<div key={kpi.label} className="rounded-xl border bg-white p-4 shadow-sm">
|
||
<div className="mb-2 flex items-center justify-between">
|
||
<kpi.icon className={kpi.color} size={20} aria-hidden="true" />
|
||
<span className={`text-xs ${kpi.trend === "up" ? "text-emerald-500" : kpi.trend === "down" ? "text-rose-500" : "text-gray-400"}`}>
|
||
{kpi.trend === "up" && <TrendingUp size={10} className="inline" aria-hidden="true" />}
|
||
{kpi.trend === "down" && <TrendingDown size={10} className="inline" aria-hidden="true" />}
|
||
{kpi.trendValue}
|
||
</span>
|
||
</div>
|
||
<div className="text-2xl font-bold">{kpi.value}</div>
|
||
<div className="text-xs text-muted-foreground">{kpi.label}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* 风险提示 */}
|
||
<div className="rounded-xl border border-amber-200 bg-amber-50 p-4">
|
||
<div className="mb-2 flex items-center gap-2">
|
||
<AlertTriangle className="text-amber-500" size={18} aria-hidden="true" />
|
||
<h2 className="font-medium text-amber-700">需要关注</h2>
|
||
</div>
|
||
<ul className="space-y-1.5 text-sm text-amber-800">
|
||
<li>• 客户流失率连续 2 月上升，建议制定回访计划</li>
|
||
<li>• 竞品发布类似产品，需加速差异化功能上线</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|