feat(frontend): P3+P4 创始人端增强 + 企业战情室集成
P3 创始人端: - 经营驾驶舱: 6 KPI 卡片 + 风险提示 - 投资人沟通准备中心: 会议列表 + 准备清单 + AI 建议 - 里程碑自填: 进度滑块 + 新增表单 - OKR 对齐视图: 投资人期望对齐度 + KR 进度 - BML 认知追踪: 信念/心智模型/学习追踪 - 通知页面 + 个人中心页面 P4 企业战情室集成: - HighlightsPanel: 顶部 KPI 摘要栏 - WorkModeSwitcher: 4 种工作模式切换 - InsightRail: 右侧 AI 面板(默认风险预警 Agent) Admin: - 商业秘密保护配置: 密级/留痕/导出管控/审计日志
This commit is contained in:
@@ -0,0 +1,83 @@
|
||||
/** 创始人端 OKR 对齐视图 — 查看公司 OKR 与投资人期望的对齐情况。 */
|
||||
|
||||
"use client";
|
||||
|
||||
import { Target, CheckCircle2, Circle, AlertTriangle } from "lucide-react";
|
||||
|
||||
/** OKR 数据。 */
|
||||
interface OKR {
|
||||
objective: string;
|
||||
keyResults: { title: string; progress: number; aligned: boolean }[];
|
||||
}
|
||||
|
||||
/** OKR 对齐视图页面。 */
|
||||
export default function OKRAlignPage() {
|
||||
const okrs: OKR[] = [
|
||||
{
|
||||
objective: "加速 AI 商业化落地",
|
||||
keyResults: [
|
||||
{ title: "完成 3 个 PoC 签约", progress: 67, aligned: true },
|
||||
{ title: "AI 产品月营收达 100 万", progress: 45, aligned: true },
|
||||
{ title: "客户满意度 NPS > 50", progress: 80, aligned: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
objective: "提升组织效能",
|
||||
keyResults: [
|
||||
{ title: "核心团队扩招 5 人", progress: 100, aligned: true },
|
||||
{ title: "建立 OKR 季度复盘机制", progress: 100, aligned: true },
|
||||
{ title: "人均产出提升 20%", progress: 60, aligned: true },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<Target className="text-[var(--founder-primary)]" size={24} />
|
||||
<h1 className="text-2xl font-bold">OKR 对齐视图</h1>
|
||||
</div>
|
||||
|
||||
{/* 对齐度摘要 */}
|
||||
<div className="rounded-xl border bg-white p-4 shadow-sm">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-muted-foreground">投资人期望对齐度</span>
|
||||
<span className="text-2xl font-bold text-emerald-600">85%</span>
|
||||
</div>
|
||||
<div className="mt-2 h-2 overflow-hidden rounded-full bg-gray-100">
|
||||
<div className="h-full rounded-full bg-emerald-500" style={{ width: "85%" }} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* OKR 列表 */}
|
||||
<div className="space-y-4">
|
||||
{okrs.map((okr, i) => (
|
||||
<div key={i} className="rounded-xl border bg-white p-4 shadow-sm">
|
||||
<h2 className="mb-3 font-medium">{okr.objective}</h2>
|
||||
<div className="space-y-2">
|
||||
{okr.keyResults.map((kr, j) => (
|
||||
<div key={j} className="flex items-center gap-2 text-sm">
|
||||
{kr.progress >= 100 ? (
|
||||
<CheckCircle2 className="text-emerald-500" size={16} aria-hidden="true" />
|
||||
) : (
|
||||
<Circle className="text-gray-300" size={16} aria-hidden="true" />
|
||||
)}
|
||||
<span className="flex-1">{kr.title}</span>
|
||||
{kr.aligned ? (
|
||||
<span className="text-xs text-emerald-600">已对齐</span>
|
||||
) : (
|
||||
<span className="flex items-center gap-0.5 text-xs text-amber-600">
|
||||
<AlertTriangle size={10} aria-hidden="true" />
|
||||
未对齐
|
||||
</span>
|
||||
)}
|
||||
<span className="font-medium">{kr.progress}%</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user