docs(uiux): UIUX 设计方案大改 + 5 份作业指导书对齐 + 开发任务文档

- UIUX 文档：填充 19 个缺口（多主体画像/健康度/AI+看板/增长域/洞察域/创始人端/OODA/助推/商密） - UIUX 文档：插入 6 个新章节（十四~十九），旧章节重编号为二十~三十一，更新目录和交叉引用 - 作业指导书 x5：导航改为 6 域分组，新增 Context Bar/工作模式/Insight Rail/决策线程/多工作区等 UI 概念 - 新建 docs/2-task-uiux.md：50 个代码落地开发任务，按 P0-P6 分优先级 + 8 Sprint 规划 - 后端/前端：大量新增模型、路由、组件（来自之前 Phase 开发）
2026-07-19 11:53:38 +08:00
parent 734a16a7f3
commit fad458b2a7
243 changed files with 19898 additions and 658 deletions
@@ -0,0 +1,70 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Target, Plus } from "lucide-react";
+import { listOKRs } from "@/lib/api-v2";
+import { PageContainer, Badge, Card } from "@/components/shared/PageContainer";
+import { LoadingSpinner } from "@/components/shared/LoadingSpinner";
+import { EmptyState } from "@/components/shared/EmptyState";
+
+export default function OKRsPage() {
+  const [items, setItems] = useState<Record<string, any>[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    listOKRs()
+      .then((resp) => setItems((resp.data as Record<string, any>[]) ?? []))
+      .catch(() => setItems([]))
+      .finally(() => setIsLoading(false));
+  }, []);
+
+  return (
+    <PageContainer
+      title="OKR 管理"
+      description="投资人与创始人共同制定 OKR + AI 对齐度评分 + 偏差预警"
+      actions={
+        <button className="flex items-center gap-1 rounded-md bg-gray-900 px-3 py-1.5 text-sm text-white hover:bg-gray-700">
+          <Plus size={16} /> 新建 OKR
+        </button>
+      }
+    >
+      {isLoading ? (
+        <LoadingSpinner />
+      ) : items.length === 0 ? (
+        <EmptyState description="暂无 OKR" />
+      ) : (
+        <div className="space-y-3">
+          {items.map((item, i) => (
+            <Card key={i}>
+              <div className="flex items-center justify-between">
+                <div>
+                  <Badge color="blue">{item.quarter as string}</Badge>
+                  <h3 className="mt-1 font-medium text-gray-900">{item.objective as string}</h3>
+                </div>
+                <div className="flex items-center gap-2">
+                  {item.alignment_score != null && (
+                    <Badge color={(item.alignment_score as number) >= 75 ? "green" : "amber"}>
+                      对齐度 {item.alignment_score}
+                    </Badge>
+                  )}
+                  <Badge color={item.status === "active" ? "green" : "gray"}>{item.status as string}</Badge>
+                </div>
+              </div>
+              {Array.isArray(item.key_results) && (
+                <div className="mt-2 space-y-1">
+                  {(item.key_results as Record<string, any>[]).map((kr, ki) => (
+                    <div key={ki} className="flex items-center gap-2 text-sm text-gray-600">
+                      <span className="h-1.5 w-1.5 rounded-full bg-gray-400" />
+                      {String(kr.title ?? kr.objective ?? kr)}
+                      {kr.progress != null && <span className="text-gray-400">({kr.progress}%)</span>}
+                    </div>
+                  ))}
+                </div>
+              )}
+            </Card>
+          ))}
+        </div>
+      )}
+    </PageContainer>
+  );
+}