selfrelease
44cbdc9d62
P3 创始人端： - 经营驾驶舱: 6 KPI 卡片 + 风险提示 - 投资人沟通准备中心: 会议列表 + 准备清单 + AI 建议 - 里程碑自填: 进度滑块 + 新增表单 - OKR 对齐视图: 投资人期望对齐度 + KR 进度 - BML 认知追踪: 信念/心智模型/学习追踪 - 通知页面 + 个人中心页面 P4 企业战情室集成： - HighlightsPanel: 顶部 KPI 摘要栏 - WorkModeSwitcher: 4 种工作模式切换 - InsightRail: 右侧 AI 面板（默认风险预警 Agent） Admin： - 商业秘密保护配置: 密级/留痕/导出管控/审计日志
84 lines
3.0 KiB
TypeScript
84 lines
3.0 KiB
TypeScript
/** 创始人端 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>
|
|
);
|
|
}
|