feat(web): 生成器 ThinkingIndicator/空结果态/数量校验 + 文风页 PageHeader + Codex 分段控件 + RefineView role 修正

2026-06-30 08:56:23 +02:00
parent 68606b84dc
commit 9d67f237a2
7 changed files with 126 additions and 46 deletions
--- 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}
--- 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">
--- 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>
  );
 }
--- 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">
--- 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" ? (
+      ) : (
+        <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 ? (
-        <div className="space-y-2">
+            <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">
--- 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,12 +29,21 @@ 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]">
+      <div className="flex min-h-[calc(100vh-var(--chrome,4rem))] flex-col">
+        <div className="px-6 pt-6">
+          <PageHeader
+            title="文风指纹"
+            description="上传你的代表作样本，让 AI 学出十六维文风指纹，作为后续写作与第四审的对照标尺。"
+          />
+        </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">
-          <h1 className="mb-3 font-serif text-lg text-ink">学习文风</h1>
+            <SectionHeader title="学习文风" className="mb-3" />
            <StyleUpload
              busy={learn.busy}
-            pollStatus={learn.pollStatus === "idle" ? "idle" : learn.pollStatus}
+              pollStatus={
+                learn.pollStatus === "idle" ? "idle" : learn.pollStatus
+              }
              progress={learn.progress}
              hasFingerprint={learn.fingerprint !== null}
              onLearn={onLearn}
@@ -43,6 +54,7 @@ export function StylePage({ project, initialFingerprint }: StylePageProps) {
            <FingerprintView fingerprint={learn.fingerprint} />
          </section>
        </div>
+      </div>
    </AppShell>
  );
 }
--- 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">