From 9d67f237a2b23bf63061888d4a228c32c11becd7 Mon Sep 17 00:00:00 2001
From: Yaojia Wang <yaojia.wang@billo.life>
Date: Tue, 30 Jun 2026 08:56:23 +0200
Subject: [PATCH] =?UTF-8?q?feat(web):=20=E7=94=9F=E6=88=90=E5=99=A8=20Thin?=
 =?UTF-8?q?kingIndicator/=E7=A9=BA=E7=BB=93=E6=9E=9C=E6=80=81/=E6=95=B0?=
 =?UTF-8?q?=E9=87=8F=E6=A0=A1=E9=AA=8C=20+=20=E6=96=87=E9=A3=8E=E9=A1=B5?=
 =?UTF-8?q?=20PageHeader=20+=20Codex=20=E5=88=86=E6=AE=B5=E6=8E=A7?=
 =?UTF-8?q?=E4=BB=B6=20+=20RefineView=20role=20=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/components/codex/CodexPage.tsx       | 28 ++++-------
 .../generation/CharacterGenerator.tsx         | 25 ++++++++--
 .../generation/ConflictAdjudication.tsx       |  6 +++
 .../components/generation/WorldGenerator.tsx  | 47 ++++++++++++++++++-
 apps/web/components/style/RefineView.tsx      | 26 ++++++----
 apps/web/components/style/StylePage.tsx       | 38 ++++++++++-----
 apps/web/components/style/StylePanel.tsx      |  2 +-
 7 files changed, 126 insertions(+), 46 deletions(-)

diff --git a/apps/web/components/codex/CodexPage.tsx b/apps/web/components/codex/CodexPage.tsx
index 050e36a..6124627 100644
--- a/apps/web/components/codex/CodexPage.tsx
+++ b/apps/web/components/codex/CodexPage.tsx
@@ -11,6 +11,7 @@ import { Button } from "@/components/ui/Button";
 import { Card } from "@/components/ui/Card";
 import { EmptyState } from "@/components/ui/EmptyState";
 import { PageHeader } from "@/components/ui/PageHeader";
+import { SegmentedControl } from "@/components/ui/SegmentedControl";
 import type {
   CharacterCardView,
   ProjectResponse,
@@ -70,24 +71,13 @@ export function CodexPage({
           title="设定库"
           description="人物、世界观与时间线共同构成写作时的真相源。AI 生成内容也要先预览、再确认入库。"
         />
-        <div className="mb-4 flex items-center gap-2" role="tablist">
-          {TABS.map((t) => (
-            <button
-              key={t.key}
-              type="button"
-              role="tab"
-              aria-selected={tab === t.key}
-              onClick={() => setTab(t.key)}
-              className={`rounded px-3 py-1.5 text-sm ${
-                tab === t.key
-                  ? "border-b-2 border-cinnabar text-cinnabar"
-                  : "text-ink-soft hover:text-ink"
-              }`}
-            >
-              {t.label}
-            </button>
-          ))}
-        </div>
+        <SegmentedControl
+          className="mb-4 w-fit"
+          ariaLabel="设定库分区"
+          value={tab}
+          onChange={setTab}
+          options={TABS.map((t) => ({ value: t.key, label: t.label }))}
+        />
 
         <div className="min-h-0 flex-1 overflow-auto">
           {tab === "characters" ? (
@@ -119,7 +109,7 @@ export function CodexPage({
                             {c.relations.map((r, j) => (
                               <li
                                 key={`${r.name}-${r.kind}-${j}`}
-                                className="rounded bg-panel px-1.5 py-0.5 text-[11px]"
+                                className="rounded bg-panel px-1.5 py-0.5 text-2xs"
                                 title={r.note ?? undefined}
                               >
                                 {r.kind} · {r.name}
diff --git a/apps/web/components/generation/CharacterGenerator.tsx b/apps/web/components/generation/CharacterGenerator.tsx
index 06af9e8..ae978d5 100644
--- a/apps/web/components/generation/CharacterGenerator.tsx
+++ b/apps/web/components/generation/CharacterGenerator.tsx
@@ -3,6 +3,7 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { Database, Sparkles } from "lucide-react";
 
+import { ThinkingIndicator } from "@/components/ThinkingIndicator";
 import { Button } from "@/components/ui/Button";
 import { Field } from "@/components/ui/Field";
 import { SectionHeader } from "@/components/ui/SectionHeader";
@@ -10,6 +11,7 @@ import { StatusNote } from "@/components/ui/StatusNote";
 import { TextInput } from "@/components/ui/TextInput";
 import type { CharacterCardView } from "@/lib/api/types";
 import {
+  clampCharacterCount,
   MAX_CHARACTER_COUNT,
   MIN_CHARACTER_COUNT,
   updateCard,
@@ -95,13 +97,19 @@ export function CharacterGenerator({
           />
         </Field>
         <div className="flex flex-wrap items-end gap-3">
-          <Field label="数量" className="w-24">
+          <Field
+            label="数量"
+            className="w-28"
+            help={`${MIN_CHARACTER_COUNT}–${MAX_CHARACTER_COUNT} 张`}
+          >
             <TextInput
               type="number"
               min={MIN_CHARACTER_COUNT}
               max={MAX_CHARACTER_COUNT}
               value={count}
-              onChange={(e) => setCount(Number(e.target.value))}
+              onChange={(e) =>
+                setCount(clampCharacterCount(Number(e.target.value)))
+              }
             />
           </Field>
           <Field label="定位（可选）" className="min-w-[12rem] flex-1">
@@ -113,7 +121,12 @@ export function CharacterGenerator({
           </Field>
           <Button
             onClick={() => void onGenerate()}
-            disabled={generating || brief.trim().length === 0}
+            disabled={
+              generating ||
+              brief.trim().length === 0 ||
+              count < MIN_CHARACTER_COUNT ||
+              count > MAX_CHARACTER_COUNT
+            }
             variant="primary"
           >
             <Sparkles className="h-4 w-4" aria-hidden="true" />
@@ -122,6 +135,12 @@ export function CharacterGenerator({
         </div>
       </div>
 
+      {generating ? (
+        <div className="rounded border border-line bg-panel/50 p-4 text-cinnabar">
+          <ThinkingIndicator label="生成中" />
+        </div>
+      ) : null}
+
       {gen.genStatus === "preview" && drafts.length > 0 ? (
         <div className="flex flex-col gap-3">
           <p className="text-xs text-ink-soft">
diff --git a/apps/web/components/generation/ConflictAdjudication.tsx b/apps/web/components/generation/ConflictAdjudication.tsx
index 908fab5..a34250e 100644
--- a/apps/web/components/generation/ConflictAdjudication.tsx
+++ b/apps/web/components/generation/ConflictAdjudication.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { ThinkingIndicator } from "@/components/ThinkingIndicator";
 import { Button } from "@/components/ui/Button";
 import type { IngestConflicts } from "@/lib/generation/cards";
 
@@ -74,6 +75,11 @@ export function ConflictAdjudication({
           取消，回去改卡
         </Button>
       </div>
+      {busy ? (
+        <div className="mt-3 text-cinnabar">
+          <ThinkingIndicator label="入库中" />
+        </div>
+      ) : null}
     </div>
   );
 }
diff --git a/apps/web/components/generation/WorldGenerator.tsx b/apps/web/components/generation/WorldGenerator.tsx
index 677cea4..3cb27dc 100644
--- a/apps/web/components/generation/WorldGenerator.tsx
+++ b/apps/web/components/generation/WorldGenerator.tsx
@@ -1,10 +1,12 @@
 "use client";
 
 import { useCallback, useState } from "react";
-import { Copy, Sparkles } from "lucide-react";
+import { Copy, Globe2, RotateCcw, Sparkles } from "lucide-react";
 
 import { useToast } from "@/components/Toast";
+import { ThinkingIndicator } from "@/components/ThinkingIndicator";
 import { Button } from "@/components/ui/Button";
+import { EmptyState } from "@/components/ui/EmptyState";
 import { Field } from "@/components/ui/Field";
 import { SectionHeader } from "@/components/ui/SectionHeader";
 import { StatusNote } from "@/components/ui/StatusNote";
@@ -72,6 +74,49 @@ export function WorldGenerator({ projectId }: WorldGeneratorProps) {
         </Button>
       </div>
 
+      {generating ? (
+        <div className="rounded border border-line bg-panel/50 p-4 text-cinnabar">
+          <ThinkingIndicator label="生成中" />
+        </div>
+      ) : null}
+
+      {gen.status === "error" ? (
+        <StatusNote variant="danger">
+          <span className="flex flex-wrap items-center gap-3">
+            <span>生成失败，请稍后重试。</span>
+            <Button
+              type="button"
+              variant="secondary"
+              size="sm"
+              onClick={() => void onGenerate()}
+            >
+              <RotateCcw className="h-4 w-4" aria-hidden="true" />
+              重试
+            </Button>
+          </span>
+        </StatusNote>
+      ) : null}
+
+      {gen.status === "done" && gen.entities.length === 0 ? (
+        <EmptyState
+          icon={Globe2}
+          title="本次未生成可用实体"
+          description="可换一个更具体的设定方向，或补充世界的硬规则与边界后再试。"
+          action={
+            <Button
+              type="button"
+              variant="primary"
+              size="sm"
+              onClick={() => void onGenerate()}
+              disabled={brief.trim().length === 0}
+            >
+              <Sparkles className="h-4 w-4" aria-hidden="true" />
+              重新生成
+            </Button>
+          }
+        />
+      ) : null}
+
       {gen.status === "done" && gen.entities.length > 0 ? (
         <div className="flex flex-col gap-3">
           <StatusNote variant="info">
diff --git a/apps/web/components/style/RefineView.tsx b/apps/web/components/style/RefineView.tsx
index 66ae8a0..b4c0d62 100644
--- a/apps/web/components/style/RefineView.tsx
+++ b/apps/web/components/style/RefineView.tsx
@@ -41,7 +41,7 @@ export function RefineView({
   return (
     <div
       className="rounded border border-cinnabar bg-panel p-3 text-xs"
-      role="dialog"
+      role="region"
       aria-label="回炉对比"
     >
       <div className="mb-2 flex items-center justify-between">
@@ -61,14 +61,22 @@ export function RefineView({
         <Badge variant="warning">
           该段在终稿中为空，请先在终稿中保留该段正文。
         </Badge>
-      ) : refiner.status === "refining" ? (
-        <p className="text-info">
-          <ThinkingIndicator label="回炉中" />
-        </p>
-      ) : refiner.status === "error" ? (
-        <p className="text-conflict">回炉失败，请稍后重试。</p>
-      ) : refiner.result ? (
-        <div className="space-y-2">
+      ) : (
+        <div role="status" aria-live="polite">
+          {refiner.status === "refining" ? (
+            <p className="text-info">
+              <ThinkingIndicator label="回炉中" />
+            </p>
+          ) : refiner.status === "error" ? (
+            <p className="text-conflict">回炉失败，请稍后重试。</p>
+          ) : refiner.result ? (
+            <span className="sr-only">回炉完成，可对比后采纳。</span>
+          ) : null}
+        </div>
+      )}
+
+      {segment.trim().length > 0 && refiner.result ? (
+        <div className="mt-2 space-y-2">
           <div>
             <p className="mb-1 text-ink-soft">原段</p>
             <p className="whitespace-pre-wrap rounded border border-line bg-bg p-2 text-ink-soft line-through">
diff --git a/apps/web/components/style/StylePage.tsx b/apps/web/components/style/StylePage.tsx
index d9cc986..863202e 100644
--- a/apps/web/components/style/StylePage.tsx
+++ b/apps/web/components/style/StylePage.tsx
@@ -1,6 +1,8 @@
 "use client";
 
 import { AppShell } from "@/components/AppShell";
+import { PageHeader } from "@/components/ui/PageHeader";
+import { SectionHeader } from "@/components/ui/SectionHeader";
 import type { ProjectResponse } from "@/lib/api/types";
 import { useStyleLearn } from "@/lib/style/useStyleLearn";
 import type { Fingerprint, StyleLearnMode } from "@/lib/style/style";
@@ -27,21 +29,31 @@ export function StylePage({ project, initialFingerprint }: StylePageProps) {
       projectId={project.id}
       activeNav="style"
     >
-      <div className="flex min-h-[calc(100vh-var(--chrome,4rem))] flex-col lg:grid lg:h-[calc(100vh-var(--chrome,4rem))] lg:min-h-0 lg:grid-cols-[28rem_1fr]">
-        <section className="flex flex-col border-line bg-panel px-6 py-6 lg:overflow-auto lg:border-r">
-          <h1 className="mb-3 font-serif text-lg text-ink">学习文风</h1>
-          <StyleUpload
-            busy={learn.busy}
-            pollStatus={learn.pollStatus === "idle" ? "idle" : learn.pollStatus}
-            progress={learn.progress}
-            hasFingerprint={learn.fingerprint !== null}
-            onLearn={onLearn}
+      <div className="flex min-h-[calc(100vh-var(--chrome,4rem))] flex-col">
+        <div className="px-6 pt-6">
+          <PageHeader
+            title="文风指纹"
+            description="上传你的代表作样本，让 AI 学出十六维文风指纹，作为后续写作与第四审的对照标尺。"
           />
-        </section>
+        </div>
+        <div className="flex flex-1 flex-col lg:grid lg:min-h-0 lg:grid-cols-[28rem_1fr]">
+          <section className="flex flex-col border-line bg-panel px-6 py-6 lg:overflow-auto lg:border-r">
+            <SectionHeader title="学习文风" className="mb-3" />
+            <StyleUpload
+              busy={learn.busy}
+              pollStatus={
+                learn.pollStatus === "idle" ? "idle" : learn.pollStatus
+              }
+              progress={learn.progress}
+              hasFingerprint={learn.fingerprint !== null}
+              onLearn={onLearn}
+            />
+          </section>
 
-        <section className="bg-bg px-6 py-6 lg:overflow-auto">
-          <FingerprintView fingerprint={learn.fingerprint} />
-        </section>
+          <section className="bg-bg px-6 py-6 lg:overflow-auto">
+            <FingerprintView fingerprint={learn.fingerprint} />
+          </section>
+        </div>
       </div>
     </AppShell>
   );
diff --git a/apps/web/components/style/StylePanel.tsx b/apps/web/components/style/StylePanel.tsx
index 7af5e7a..b3e1b6a 100644
--- a/apps/web/components/style/StylePanel.tsx
+++ b/apps/web/components/style/StylePanel.tsx
@@ -28,7 +28,7 @@ export function StylePanel({ style, incomplete, onRefine }: StylePanelProps) {
   return (
     <section className="mb-4">
       <h2 className="text-xs font-semibold uppercase tracking-wide text-ink-soft">
-        文风 (style-auditor)
+        文风
       </h2>
       {incomplete ? (
         <Badge variant="warning" className="mt-1">