feat: improve app ui and project metadata

apps/web/components/outline/OutlineChapterRow.tsx

@@ -1,12 +1,15 @@
 "use client";
 
 import Link from "next/link";
+import { PenLine } from "lucide-react";
 
+import { Badge } from "@/components/ui/Badge";
 import type { OutlineChapterView } from "@/lib/api/types";
 import {
   isCloseWindow,
   windowBadgeLabel,
 } from "@/lib/outline/outline";
+import { buttonClass } from "@/lib/ui/variants";
 
 interface OutlineChapterRowProps {
   chapter: OutlineChapterView;
@@ -25,31 +28,28 @@ export function OutlineChapterRow({ chapter, projectId }: OutlineChapterRowProps
         </span>
         <Link
           href={`/projects/${projectId}/write?chapter=${chapter.no}`}
-          className="rounded border border-line px-1.5 py-0.5 text-xs text-ink-soft hover:border-cinnabar hover:text-cinnabar"
+          className={buttonClass({ variant: "secondary", size: "sm" })}
         >
-          ✍ 写此章
+          <PenLine className="h-3.5 w-3.5" aria-hidden="true" />
+          写此章
         </Link>
         {windows.map((w) => {
           const close = isCloseWindow(chapter, w);
           return (
-            <span
+            <Badge
               key={w.code}
+              variant={close ? "warning" : "accent"}
               title={close ? "进入回收窗口，建议本章安排回收" : undefined}
-              className={`rounded px-1.5 py-0.5 text-xs ${
-                close
-                  ? "bg-overdue/15 text-overdue"
-                  : "bg-[var(--color-cinnabar-wash)] text-cinnabar"
-              }`}
             >
               {windowBadgeLabel(w)}
               {close ? " · 可回收" : ""}
-            </span>
+            </Badge>
           );
         })}
       </div>
       {chapter.beats && chapter.beats.length > 0 ? (
         <p className="mt-1 text-sm text-ink">
-          <span className="text-ink-soft">beats: </span>
+          <span className="text-ink-soft">节拍：</span>
           {chapter.beats.join(" / ")}
         </p>
       ) : (

apps/web/components/outline/OutlineEditor.tsx

@@ -1,8 +1,14 @@
 "use client";
 
 import { useMemo, useState } from "react";
+import { ListTree, Sparkles } from "lucide-react";
 
 import { AppShell } from "@/components/AppShell";
+import { Button } from "@/components/ui/Button";
+import { EmptyState } from "@/components/ui/EmptyState";
+import { PageHeader } from "@/components/ui/PageHeader";
+import { Select } from "@/components/ui/Select";
+import { TextInput } from "@/components/ui/TextInput";
 import type { OutlineChapterView, ProjectResponse } from "@/lib/api/types";
 import {
   distinctVolumes,
@@ -43,52 +49,66 @@ export function OutlineEditor({
       activeNav="outline"
     >
       <div className="flex h-[calc(100vh-var(--chrome,4rem))] flex-col p-6">
-        <div className="mb-4 flex items-center gap-3">
-          <h1 className="font-serif text-lg text-ink">大纲</h1>
-          {availableVolumes.length > 0 ? (
-            <label htmlFor="view-vol" className="ml-auto text-xs text-ink-soft">
-              查看
-              <select
-                id="view-vol"
-                value={viewVolume === "all" ? "all" : String(viewVolume)}
-                onChange={(e) =>
-                  setViewVolume(
-                    e.target.value === "all" ? "all" : Number(e.target.value),
-                  )
-                }
-                className="ml-1 rounded border border-line bg-bg px-2 py-1 text-sm text-ink focus:border-cinnabar focus:outline-none"
+        <PageHeader
+          title="大纲"
+          description="按卷组织章节节拍，写作台会把当前章节拍注入生成上下文。"
+          actions={
+            <>
+              {availableVolumes.length > 0 ? (
+                <label
+                  htmlFor="view-vol"
+                  className="ml-auto text-xs text-ink-soft"
+                >
+                  查看
+                  <Select
+                    id="view-vol"
+                    value={viewVolume === "all" ? "all" : String(viewVolume)}
+                    onChange={(e) =>
+                      setViewVolume(
+                        e.target.value === "all"
+                          ? "all"
+                          : Number(e.target.value),
+                      )
+                    }
+                    controlSize="sm"
+                    className="ml-1"
+                  >
+                    <option value="all">全部</option>
+                    {availableVolumes.map((v) => (
+                      <option key={v} value={String(v)}>
+                        卷 {v}
+                      </option>
+                    ))}
+                  </Select>
+                </label>
+              ) : null}
+              <label
+                htmlFor="vol"
+                className={`text-xs text-ink-soft${availableVolumes.length > 0 ? "" : " ml-auto"}`}
               >
-                <option value="all">全部</option>
-                {availableVolumes.map((v) => (
-                  <option key={v} value={String(v)}>
-                    卷 {v}
-                  </option>
-                ))}
-              </select>
-            </label>
-          ) : null}
-          <label
-            htmlFor="vol"
-            className={`text-xs text-ink-soft${availableVolumes.length > 0 ? "" : " ml-auto"}`}
-          >
-            卷号
-          </label>
-          <input
-            id="vol"
-            inputMode="numeric"
-            value={volume}
-            onChange={(e) => setVolume(Math.max(1, Number(e.target.value) || 1))}
-            className="w-16 rounded border border-line bg-bg px-2 py-1 text-sm text-ink focus:border-cinnabar focus:outline-none"
-          />
-          <button
-            type="button"
-            disabled={generating}
-            onClick={() => void generate(project.id, volume)}
-            className="rounded bg-cinnabar px-3 py-1.5 text-sm text-panel hover:opacity-90 disabled:opacity-40"
-          >
-            {generating ? "排大纲中…" : "✦ AI 排大纲"}
-          </button>
-        </div>
+                卷号
+              </label>
+              <TextInput
+                id="vol"
+                inputMode="numeric"
+                value={volume}
+                onChange={(e) =>
+                  setVolume(Math.max(1, Number(e.target.value) || 1))
+                }
+                controlSize="sm"
+                className="w-16"
+              />
+              <Button
+                disabled={generating}
+                onClick={() => void generate(project.id, volume)}
+                variant="primary"
+              >
+                <Sparkles className="h-4 w-4" aria-hidden="true" />
+                {generating ? "排大纲中…" : "AI 排大纲"}
+              </Button>
+            </>
+          }
+        />
 
         {error ? (
           <p className="mb-4 text-sm text-conflict">
@@ -109,11 +129,30 @@ export function OutlineEditor({
 
         <div className="min-h-0 flex-1 overflow-auto">
           {volumes.length === 0 ? (
-            <p className="rounded border border-dashed border-line p-6 text-sm text-ink-soft">
-              {chapters.length > 0 && viewVolume !== "all"
-                ? `卷 ${viewVolume} 暂无大纲。切到「全部」查看其它卷，或点「✦ AI 排大纲」为本卷生成。`
-                : "暂无大纲。点「✦ AI 排大纲」生成逐章节拍与伏笔窗口。"}
-            </p>
+            <EmptyState
+              icon={ListTree}
+              title={
+                chapters.length > 0 && viewVolume !== "all"
+                  ? `卷 ${viewVolume} 暂无大纲`
+                  : "暂无大纲"
+              }
+              description={
+                chapters.length > 0 && viewVolume !== "all"
+                  ? "切到「全部」查看其它卷，或为当前卷生成章节节拍。"
+                  : "点击「AI 排大纲」生成逐章节拍与伏笔窗口，再回到写作台逐章推进。"
+              }
+              action={
+                <Button
+                  disabled={generating}
+                  onClick={() => void generate(project.id, volume)}
+                  variant="primary"
+                  size="sm"
+                >
+                  <Sparkles className="h-4 w-4" aria-hidden="true" />
+                  {generating ? "排大纲中…" : "AI 排大纲"}
+                </Button>
+              }
+            />
           ) : (
             volumes.map((group) => (
               <section key={group.volume} className="mb-6">