fix(web): 大纲生成只替换目标卷+重排确认+窗口徽标用lucide + 伏笔看板中文化/单一登记入口/Field表单

2026-06-30 08:56:23 +02:00
parent f0f925b195
commit 68606b84dc
9 changed files with 214 additions and 142 deletions
--- a/apps/web/components/foreshadow/ForeshadowBoard.tsx
+++ b/apps/web/components/foreshadow/ForeshadowBoard.tsx
@@ -62,15 +62,17 @@ export function ForeshadowBoard({
          title="伏笔看板"
          description="跟踪每条伏笔从埋设、推进到回收的状态，逾期项会单独提醒。"
          actions={
-            <Button
-              onClick={() => setRegisterOpen(true)}
-              disabled={registerOpen}
-              variant="primary"
-              size="sm"
-            >
-              <Plus className="h-4 w-4" aria-hidden="true" />
-              登记伏笔
-            </Button>
+            // registerOpen 时隐藏头部入口，避免与展开的表单重复（全局只一个 RegisterForm）。
+            registerOpen ? undefined : (
+              <Button
+                onClick={() => setRegisterOpen(true)}
+                variant="primary"
+                size="sm"
+              >
+                <Plus className="h-4 w-4" aria-hidden="true" />
+                登记伏笔
+              </Button>
+            )
          }
        />
        {registerOpen ? (
@@ -90,11 +92,16 @@ export function ForeshadowBoard({
            title="还没有伏笔"
            description="登记第一条伏笔后，这里会按待推进、推进中、已回收、已逾期四种状态自动分栏。"
            action={
-              <RegisterForm
-                projectId={project.id}
-                busy={busy}
-                onRegister={register}
-              />
+              registerOpen ? undefined : (
+                <Button
+                  onClick={() => setRegisterOpen(true)}
+                  variant="primary"
+                  size="sm"
+                >
+                  <Plus className="h-4 w-4" aria-hidden="true" />
+                  登记伏笔
+                </Button>
+              )
            }
            className="mt-6"
          />
@@ -138,16 +145,15 @@ function ForeshadowBoardSummary({
      className="mb-3 grid grid-cols-2 gap-2 sm:grid-cols-4"
    >
      {LANES.map((status) => (
-        <Card key={status} className="px-3 py-2">
+        <Card key={status} data-status={status} className="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>
-            {" · "}
+          <p className="mt-1 text-2xs text-ink-soft">
+            占比{" "}
            {total > 0 ? `${Math.round((counts[status] / total) * 100)}%` : "0%"}
          </p>
        </Card>
--- a/apps/web/components/foreshadow/KanbanColumn.tsx
+++ b/apps/web/components/foreshadow/KanbanColumn.tsx
@@ -26,8 +26,9 @@ export function KanbanColumn({
  const overdue = status === "OVERDUE";
  return (
    <section
+      data-status={status}
      className="flex min-w-0 flex-col rounded border border-line bg-bg"
-      aria-label={`${status} 泳道`}
+      aria-label={`${LANE_LABELS[status]} 泳道`}
    >
      <header
        className={`flex items-center justify-between rounded-t border-b px-3 py-2 ${
@@ -44,7 +45,6 @@ export function KanbanColumn({
              {LANE_LABELS[status]}
            </span>
          )}
-          <span className="font-mono text-[10px] text-ink-soft">{status}</span>
        </span>
        <span className="font-mono text-xs">{items.length}</span>
      </header>
--- a/apps/web/components/foreshadow/RegisterForm.tsx
+++ b/apps/web/components/foreshadow/RegisterForm.tsx
@@ -1,9 +1,11 @@
 "use client";

-import { useState, type ReactNode } from "react";
+import { useState } from "react";
 import { Plus } from "lucide-react";

 import { Button } from "@/components/ui/Button";
+import { Field } from "@/components/ui/Field";
+import { TextArea } from "@/components/ui/TextArea";
 import { TextInput } from "@/components/ui/TextInput";
 import { cardClass } from "@/lib/ui/variants";
 import type { RegisterInput } from "@/lib/foreshadow/board";
@@ -71,8 +73,9 @@ export function RegisterForm({
    );
  }

-  const canSubmit =
-    form.code.trim().length > 0 && form.title.trim().length > 0 && !busy;
+  const missingRequired =
+    form.code.trim().length === 0 || form.title.trim().length === 0;
+  const canSubmit = !missingRequired && !busy;

  return (
    <form
@@ -83,59 +86,53 @@ export function RegisterForm({
      className={cardClass("p-4")}
    >
      <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
-        <FormSlot label="代号 *" id="f-code">
+        <Field label="代号" required>
          <TextInput
-            id="f-code"
            value={form.code}
            onChange={(e) => set("code", e.target.value)}
          />
-        </FormSlot>
-        <FormSlot label="标题 *" id="f-title" span2>
+        </Field>
+        <Field label="标题" required className="col-span-2">
          <TextInput
-            id="f-title"
            value={form.title}
            onChange={(e) => set("title", e.target.value)}
          />
-        </FormSlot>
-        <FormSlot label="埋设章" id="f-planted">
+        </Field>
+        <Field label="埋设章">
          <TextInput
-            id="f-planted"
            inputMode="numeric"
            value={form.plantedAt}
            onChange={(e) => set("plantedAt", e.target.value)}
          />
-        </FormSlot>
-        <FormSlot label="回收窗口起" id="f-from">
+        </Field>
+        <Field label="回收窗口起">
          <TextInput
-            id="f-from"
            inputMode="numeric"
            value={form.expectedCloseFrom}
            onChange={(e) => set("expectedCloseFrom", e.target.value)}
          />
-        </FormSlot>
-        <FormSlot label="回收窗口止" id="f-to">
+        </Field>
+        <Field label="回收窗口止">
          <TextInput
-            id="f-to"
            inputMode="numeric"
            value={form.expectedCloseTo}
            onChange={(e) => set("expectedCloseTo", e.target.value)}
          />
-        </FormSlot>
-        <FormSlot label="重要度" id="f-imp">
+        </Field>
+        <Field label="重要度">
          <TextInput
-            id="f-imp"
            value={form.importance}
            onChange={(e) => set("importance", e.target.value)}
            placeholder="主线/支线"
          />
-        </FormSlot>
-        <FormSlot label="线索内容" id="f-content" span3>
-          <TextInput
-            id="f-content"
+        </Field>
+        <Field label="线索内容" className="col-span-2 sm:col-span-3">
+          <TextArea
+            rows={2}
            value={form.content}
            onChange={(e) => set("content", e.target.value)}
          />
-        </FormSlot>
+        </Field>
      </div>
      <div className="mt-3 flex items-center gap-2">
        <Button
@@ -146,38 +143,17 @@ export function RegisterForm({
        >
          {busy ? "登记中…" : "登记"}
        </Button>
-        <Button
-          onClick={() => setOpen(false)}
-          variant="secondary"
-          size="sm"
-        >
+        <Button onClick={() => setOpen(false)} variant="secondary" size="sm">
          取消
        </Button>
+        {missingRequired && !busy ? (
+          <span className="text-xs text-ink-soft">先填代号与标题</span>
+        ) : null}
      </div>
    </form>
  );
 }

-interface FormSlotProps {
-  label: string;
-  id: string;
-  span2?: boolean;
-  span3?: boolean;
-  children: ReactNode;
-}
-
-function FormSlot({ label, id, span2, span3, children }: FormSlotProps) {
-  const span = span3 ? "col-span-2 sm:col-span-3" : span2 ? "col-span-2" : "";
-  return (
-    <div className={span}>
-      <label htmlFor={id} className="block text-xs text-ink-soft">
-        {label}
-      </label>
-      <div className="mt-0.5">{children}</div>
-    </div>
-  );
-}
-
 function toInt(raw: string): number | null {
  const trimmed = raw.trim();
  if (trimmed.length === 0) return null;
--- a/apps/web/components/outline/OutlineChapterRow.tsx
+++ b/apps/web/components/outline/OutlineChapterRow.tsx
@@ -1,7 +1,7 @@
 "use client";

 import Link from "next/link";
-import { PenLine } from "lucide-react";
+import { Flag, PenLine } from "lucide-react";

 import { Badge } from "@/components/ui/Badge";
 import type { OutlineChapterView } from "@/lib/api/types";
@@ -16,7 +16,7 @@ interface OutlineChapterRowProps {
  projectId: string;
 }

-// 单章大纲行（UX §6.7）：章号 + beats + 伏笔窗口徽标（⚑）+ 「写此章」入口。
+// 单章大纲行（UX §6.7）：章号 + beats + 伏笔窗口徽标（lucide Flag 图标）+ 「写此章」入口。
 // 接近回收窗口的徽标用琥珀 + 「可回收」提示（a11y：图标 + 文案，不单靠色）。
 export function OutlineChapterRow({ chapter, projectId }: OutlineChapterRowProps) {
  const windows = chapter.foreshadow_windows ?? [];
@@ -41,6 +41,7 @@ export function OutlineChapterRow({ chapter, projectId }: OutlineChapterRowProps
              variant={close ? "warning" : "accent"}
              title={close ? "进入回收窗口，建议本章安排回收" : undefined}
            >
+              <Flag className="h-4 w-4" aria-hidden="true" />
              {windowBadgeLabel(w)}
              {close ? " · 可回收" : ""}
            </Badge>
--- a/apps/web/components/outline/OutlineEditor.tsx
+++ b/apps/web/components/outline/OutlineEditor.tsx
@@ -32,15 +32,52 @@ export function OutlineEditor({
  initialChapters,
 }: OutlineEditorProps) {
  const { chapters, status, error, generate } = useOutline(initialChapters);
+  // 生成目标卷与「正在看的卷」共用一个心智：选具体卷即把生成目标设为该卷。
  const [volume, setVolume] = useState(1);
-  // 视图卷过滤（"全部" 或某卷）——只影响展示，与生成的目标卷 `volume` 解耦。
  const [viewVolume, setViewVolume] = useState<ViewVolume>("all");
+  // 「重新排大纲」破坏性覆盖的两段式确认（仅目标卷已有章节时出现）。
+  const [confirming, setConfirming] = useState(false);
  const availableVolumes = useMemo(() => distinctVolumes(chapters), [chapters]);
  const volumes = useMemo(
    () => groupByVolume(filterByViewVolume(chapters, viewVolume)),
    [chapters, viewVolume],
  );
  const generating = status === "generating";
+  // 目标卷已有章节 → 生成是破坏性替换，文案/确认都要变。
+  const targetHasChapters = useMemo(
+    () => filterByViewVolume(chapters, volume).length > 0,
+    [chapters, volume],
+  );
+
+  // 选具体卷时把生成目标对齐到所看卷，消除「看卷 A、却生成卷 B」的易混。
+  const onViewVolumeChange = (next: ViewVolume): void => {
+    setViewVolume(next);
+    setConfirming(false);
+    if (next !== "all") setVolume(next);
+  };
+
+  const onVolumeChange = (next: number): void => {
+    setVolume(Math.max(1, next || 1));
+    setConfirming(false);
+  };
+
+  const runGenerate = (): void => {
+    setConfirming(false);
+    void generate(project.id, volume);
+  };
+
+  // 安全卷直接生成；破坏性卷先进入两段式确认。
+  const onGenerateClick = (): void => {
+    if (targetHasChapters) {
+      setConfirming(true);
+      return;
+    }
+    runGenerate();
+  };
+
+  const generateLabel = generating
+    ? "排大纲中…"
+    : `${targetHasChapters ? "重新排大纲" : "AI 排大纲"} · 卷 ${volume}`;

  return (
    <AppShell
@@ -53,63 +90,86 @@ export function OutlineEditor({
        <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"}`}
-              >
-                卷号
-              </label>
-              <TextInput
-                id="vol"
-                inputMode="numeric"
-                value={volume}
+        />
+
+        {/* 卷/视图/生成控件独立成全宽工具栏行（窄屏自动换行，不用脆弱的 ml-auto）。 */}
+        <div className="mb-4 flex flex-wrap items-center gap-2">
+          {availableVolumes.length > 0 ? (
+            <label
+              htmlFor="view-vol"
+              className="flex items-center gap-1 text-xs text-ink-soft"
+            >
+              查看
+              <Select
+                id="view-vol"
+                value={viewVolume === "all" ? "all" : String(viewVolume)}
                onChange={(e) =>
-                  setVolume(Math.max(1, Number(e.target.value) || 1))
+                  onViewVolumeChange(
+                    e.target.value === "all" ? "all" : Number(e.target.value),
+                  )
                }
                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 排大纲"}
+                <option value="all">全部</option>
+                {availableVolumes.map((v) => (
+                  <option key={v} value={String(v)}>
+                    卷 {v}
+                  </option>
+                ))}
+              </Select>
+            </label>
+          ) : null}
+
+          {availableVolumes.length > 0 ? (
+            <span className="ml-1 h-4 w-px bg-line" aria-hidden="true" />
+          ) : null}
+
+          <label
+            htmlFor="vol"
+            className="flex items-center gap-1 text-xs text-ink-soft"
+          >
+            生成到 卷
+            <TextInput
+              id="vol"
+              inputMode="numeric"
+              value={volume}
+              onChange={(e) => onVolumeChange(Number(e.target.value))}
+              controlSize="sm"
+              className="w-16"
+            />
+          </label>
+
+          <Button
+            disabled={generating}
+            onClick={onGenerateClick}
+            variant="primary"
+          >
+            <Sparkles className="h-4 w-4" aria-hidden="true" />
+            {generateLabel}
+          </Button>
+        </div>
+
+        {confirming ? (
+          <StatusNote
+            variant="warning"
+            title={`卷 ${volume} 已有章节`}
+            className="mb-4"
+          >
+            <p>重新排大纲会替换卷 {volume} 的全部条目（其它卷不受影响）。</p>
+            <div className="mt-2 flex flex-wrap gap-2">
+              <Button onClick={runGenerate} variant="danger" size="sm">
+                确认替换卷 {volume}
              </Button>
-            </>
-          }
-        />
+              <Button
+                onClick={() => setConfirming(false)}
+                variant="secondary"
+                size="sm"
+              >
+                取消
+              </Button>
+            </div>
+          </StatusNote>
+        ) : null}

        {error ? (
          <StatusNote variant="danger" title="大纲生成失败" className="mb-4">
@@ -145,12 +205,12 @@ export function OutlineEditor({
              action={
                <Button
                  disabled={generating}
-                  onClick={() => void generate(project.id, volume)}
+                  onClick={onGenerateClick}
                  variant="primary"
                  size="sm"
                >
                  <Sparkles className="h-4 w-4" aria-hidden="true" />
-                  {generating ? "排大纲中…" : "AI 排大纲"}
+                  {generateLabel}
                </Button>
              }
            />
--- a/apps/web/lib/outline/outline.test.ts
+++ b/apps/web/lib/outline/outline.test.ts
@@ -83,17 +83,21 @@ describe("filterByViewVolume", () => {
 });

 describe("windowBadgeLabel", () => {
-  it("renders a range, half-open, or bare badge", () => {
+  it("renders a range, half-open, or bare badge without any glyph", () => {
    expect(
      windowBadgeLabel(win({ expected_close_from: 40, expected_close_to: 60 })),
-    ).toBe("⚑ F-012 (40-60)");
-    expect(windowBadgeLabel(win({ expected_close_to: 60 }))).toBe(
-      "⚑ F-012 (≤60)",
-    );
+    ).toBe("F-012 (40-60)");
+    expect(windowBadgeLabel(win({ expected_close_to: 60 }))).toBe("F-012 (≤60)");
    expect(windowBadgeLabel(win({ expected_close_from: 40 }))).toBe(
-      "⚑ F-012 (≥40)",
+      "F-012 (≥40)",
    );
-    expect(windowBadgeLabel(win({}))).toBe("⚑ F-012");
+    expect(windowBadgeLabel(win({}))).toBe("F-012");
+  });
+
+  it("never embeds the raw ⚑ glyph (icon comes from the render layer)", () => {
+    expect(
+      windowBadgeLabel(win({ expected_close_from: 40, expected_close_to: 60 })),
+    ).not.toContain("⚑");
  });
 });

--- a/apps/web/lib/outline/outline.ts
+++ b/apps/web/lib/outline/outline.ts
@@ -47,16 +47,17 @@ export function filterByViewVolume(
  return all.filter((ch) => ch.volume === view);
 }

-// 伏笔窗口徽标文案：`⚑ F-012 (40-60)` / `⚑ F-012 (≤60)` / `⚑ F-012`。
+// 伏笔窗口徽标文案（纯文本，旗标图标由渲染层的 lucide Flag 承载，不掺字形）：
+// `F-012 (40-60)` / `F-012 (≤60)` / `F-012 (≥40)` / `F-012`。
 export function windowBadgeLabel(window: ForeshadowWindowView): string {
  const from = window.expected_close_from;
  const to = window.expected_close_to;
  if (typeof from === "number" && typeof to === "number") {
-    return `⚑ ${window.code} (${from}-${to})`;
+    return `${window.code} (${from}-${to})`;
  }
-  if (typeof to === "number") return `⚑ ${window.code} (≤${to})`;
-  if (typeof from === "number") return `⚑ ${window.code} (≥${from})`;
-  return `⚑ ${window.code}`;
+  if (typeof to === "number") return `${window.code} (≤${to})`;
+  if (typeof from === "number") return `${window.code} (≥${from})`;
+  return window.code;
 }

 // 接近回收：本章号落在窗口 [from,to] 内（提示「本章可回收」，UX §6.7 ⚑ 可回收）。
--- a/apps/web/lib/outline/useOutline.test.ts
+++ b/apps/web/lib/outline/useOutline.test.ts
@@ -11,8 +11,8 @@ const toast = vi.fn();
 vi.mock("@/lib/api/client", () => ({ api: { POST: (...a: unknown[]) => post(...a) } }));
 vi.mock("@/components/Toast", () => ({ useToast: () => toast }));

-function makeChapter(no: number): OutlineChapterView {
-  return { no, volume: 1 };
+function makeChapter(no: number, volume = 1): OutlineChapterView {
+  return { no, volume };
 }

 describe("useOutline", () => {
@@ -51,6 +51,25 @@ describe("useOutline", () => {
    expect(toast).toHaveBeenCalledWith("大纲已生成", "success");
  });

+  it("生成只替换目标卷，保留其它卷的已存章节", async () => {
+    const initial = [makeChapter(1, 1), makeChapter(2, 1), makeChapter(80, 2)];
+    const regenerated = [makeChapter(1, 1), makeChapter(2, 1), makeChapter(3, 1)];
+    post.mockResolvedValue({ data: { chapters: regenerated }, error: null });
+
+    const { result } = renderHook(() => useOutline(initial));
+    await act(async () => {
+      await result.current.generate("p1", 1);
+    });
+
+    // 卷 2 的第 80 章不被整列覆盖；卷 1 替换为新生成的三章。
+    expect(result.current.chapters).toEqual([
+      makeChapter(80, 2),
+      makeChapter(1, 1),
+      makeChapter(2, 1),
+      makeChapter(3, 1),
+    ]);
+  });
+
  it("data.chapters 为空时章节回退为空数组", async () => {
    post.mockResolvedValue({ data: { chapters: null }, error: null });
    const { result } = renderHook(() => useOutline([]));
--- a/apps/web/lib/outline/useOutline.ts
+++ b/apps/web/lib/outline/useOutline.ts
@@ -52,7 +52,12 @@ export function useOutline(initial: OutlineChapterView[]): UseOutline {
        toast(friendly.text, "error");
        return;
      }
-      setChapters(data.chapters ?? []);
+      // 只替换目标卷的条目，保留其它卷（「AI 排大纲」是单卷操作，整列覆盖会误删别卷）。
+      const generated = data.chapters ?? [];
+      setChapters((prev) => [
+        ...prev.filter((ch) => ch.volume !== volume),
+        ...generated,
+      ]);
      setStatus("ready");
      toast("大纲已生成", "success");
    },