feat: improve app ui and project metadata

apps/web/components/foreshadow/ForeshadowBoard.tsx

@@ -1,14 +1,22 @@
 "use client";
 
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
+import { Flag, Plus } from "lucide-react";
 
 import { AppShell } from "@/components/AppShell";
+import { Badge } from "@/components/ui/Badge";
+import { Button } from "@/components/ui/Button";
+import { EmptyState } from "@/components/ui/EmptyState";
+import { PageHeader } from "@/components/ui/PageHeader";
 import type { ForeshadowView, ProjectResponse } from "@/lib/api/types";
 import {
   LANES,
+  LANE_LABELS,
+  countByStatus,
   groupByStatus,
   type ForeshadowStatus,
 } from "@/lib/foreshadow/board";
+import type { BadgeVariant } from "@/lib/ui/variants";
 import { useForeshadow } from "@/lib/foreshadow/useForeshadow";
 import { KanbanColumn } from "./KanbanColumn";
 import { RegisterForm } from "./RegisterForm";
@@ -25,7 +33,9 @@ export function ForeshadowBoard({
   initialItems,
 }: ForeshadowBoardProps) {
   const { items, busy, register, transition } = useForeshadow(initialItems);
+  const [registerOpen, setRegisterOpen] = useState(false);
   const lanes = useMemo(() => groupByStatus(items), [items]);
+  const counts = useMemo(() => countByStatus(items), [items]);
 
   const onTransition = (
     code: string,
@@ -46,27 +56,104 @@ export function ForeshadowBoard({
       projectId={project.id}
       activeNav="foreshadow"
     >
-      <div className="flex h-[calc(100vh-var(--chrome,4rem))] flex-col p-4">
-        <div className="mb-4 flex items-start justify-between gap-4">
-          <h1 className="font-serif text-lg text-ink">伏笔看板</h1>
-          <RegisterForm
-            projectId={project.id}
-            busy={busy}
-            onRegister={register}
-          />
-        </div>
-        <div className="grid min-h-0 flex-1 grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-4">
-          {LANES.map((status) => (
-            <KanbanColumn
-              key={status}
-              status={status}
-              items={lanes[status]}
+      <div className="flex min-h-[calc(100vh-var(--chrome,4rem))] flex-col p-4 xl:h-[calc(100vh-var(--chrome,4rem))] xl:min-h-0">
+        <PageHeader
+          title="伏笔看板"
+          description="跟踪每条伏笔从埋设、推进到回收的状态，逾期项会单独提醒。"
+          actions={
+            <Button
+              onClick={() => setRegisterOpen(true)}
+              disabled={registerOpen}
+              variant="primary"
+              size="sm"
+            >
+              <Plus className="h-4 w-4" aria-hidden="true" />
+              登记伏笔
+            </Button>
+          }
+        />
+        {registerOpen ? (
+          <div className="mb-4">
+            <RegisterForm
+              projectId={project.id}
               busy={busy}
-              onTransition={onTransition}
+              onRegister={register}
+              open={registerOpen}
+              onOpenChange={setRegisterOpen}
             />
-          ))}
-        </div>
+          </div>
+        ) : null}
+        {items.length === 0 ? (
+          <EmptyState
+            icon={Flag}
+            title="还没有伏笔"
+            description="登记第一条伏笔后，这里会按待推进、推进中、已回收、已逾期四种状态自动分栏。"
+            action={
+              <RegisterForm
+                projectId={project.id}
+                busy={busy}
+                onRegister={register}
+              />
+            }
+            className="mt-6"
+          />
+        ) : (
+          <>
+            <ForeshadowBoardSummary counts={counts} />
+            <div className="grid flex-none grid-cols-1 gap-3 md:grid-cols-2 xl:min-h-0 xl:flex-1 xl:grid-cols-4">
+              {LANES.map((status) => (
+                <KanbanColumn
+                  key={status}
+                  status={status}
+                  items={lanes[status]}
+                  busy={busy}
+                  onTransition={onTransition}
+                />
+              ))}
+            </div>
+          </>
+        )}
       </div>
     </AppShell>
   );
 }
+
+const SUMMARY_VARIANTS: Record<ForeshadowStatus, BadgeVariant> = {
+  OPEN: "accent",
+  PARTIAL: "info",
+  CLOSED: "success",
+  OVERDUE: "warning",
+};
+
+function ForeshadowBoardSummary({
+  counts,
+}: {
+  counts: Record<ForeshadowStatus, number>;
+}) {
+  const total = LANES.reduce((sum, lane) => sum + counts[lane], 0);
+  return (
+    <section
+      aria-label="伏笔状态概览"
+      className="mb-3 grid grid-cols-2 gap-2 sm:grid-cols-4"
+    >
+      {LANES.map((status) => (
+        <div
+          key={status}
+          className="rounded border border-line bg-panel px-3 py-2"
+        >
+          <div className="flex items-center justify-between gap-2">
+            <Badge variant={SUMMARY_VARIANTS[status]}>
+              {LANE_LABELS[status]}
+            </Badge>
+            <span className="font-mono text-sm text-ink">{counts[status]}</span>
+          </div>
+          <p className="mt-1 text-[11px] text-ink-soft">
+            <span className="font-mono">{status}</span>
+            {" · "}
+            {total > 0 ? `${Math.round((counts[status] / total) * 100)}%` : "0%"}
+          </p>
+        </div>
+      ))}
+    </section>
+  );
+}