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

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>

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>

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;

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>

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>
               }
             />