fix(ui): ConfirmDialog 退场期禁用交互并补断言

Author: Aparencia

app/src/ui/primitives/ConfirmDialog.test.tsx

@@ -2,14 +2,14 @@
 /**
  * @ai-context ConfirmDialog.test.tsx —— 危险确认的**语义契约**测试（批 0-D Task 8；规格 §5.3）。
  *
- * Why jsdom：弹层经 `Modal` 走 portal 且带焦点陷阱 ⇒ 要真容器与 `document.activeElement`。
- * 本文件钉住四件事：① §5.3 的硬要求「框内必须列明级联影响与保留项」；② **危险语义用色**
- * （控制方 2026-09-11 裁决③ · §4.1「绝不用于按钮」）—— 确认按钮保持中性，`--ed-stamp` 绝不出现在
- * 任何 `background*` 声明里（与 Task 14 Step 1 第 4 条的批次守卫**同向**）；③ **复用 Modal 内核**：
- * 直接扫 `ConfirmDialog.tsx` 的源码作机器证据（含 `from "./Modal"`、不含 Portal 与层级标尺的符号），
- * 并断言本原语 CSS 无层级、无定位；④ 「可中断 / 可反向 / 重复触发」的确定行为（§8.6.1 第 3 条）。
+ * Why jsdom：弹层经 `Modal` 走 portal 且带焦点陷阱 ⇒ 要真容器与 `document.activeElement`（同理，
+ * 样式判据只能读文本：`vitest.config.ts` 的 `css` 为 false ⇒ 测试环境不加载样式表，范式 C）。
+ * 本文件钉住五件事：① §5.3「框内必须列明级联影响与保留项」；② **危险语义用色**：确认按钮保持中性、
+ * `--ed-stamp` 绝不出现在任何 `background*` 声明里（裁决③ · 与 Task 14 第 4 条守卫**同向**）；③ **复用
+ * Modal 内核**（扫源码作证据：含 `from "./Modal"`、不含 Portal 与层级标尺符号，且本原语 CSS 无层级无定位）；
+ * ④ 可中断 / 可反向 / 重复触发」的确定行为（§8.6.1 第 3 条）；⑤ 退场相位（`open=false` 仍在淡出的 160ms）
+ * 内整个对话框失活 —— 点击即时、退场异步 ⇒ 第二次点击会落到按钮上（评审 I-1，见该 describe 的用例）。
  *
- * 样式判据读文本：`vitest.config.ts` 的 `css` 为 false（测试环境不加载样式表）⇒ 范式 C（同 Modal.test.tsx）。
  * 副作用：无（只挂 React 树 + 读三个文本文件）；假计时器只用在推进 presence 计时的那个 describe。
  * 边界：不用 jest-dom（本仓未装）—— 一律 `getAttribute` / `textContent` / `document.activeElement`。
  */
@@ -36,10 +36,9 @@ const IMPACTS: readonly ConfirmImpact[] = [
   { text: "笔记 7 篇保留", keep: true },
 ];
 
-/** 宿主 props：派生自原语契约（每个用例只关心其中几项 ⇒ `Partial` + 必需的 `open`） */
+/** 宿主 props：派生自原语契约（`Partial` + 必需的 `open`）；受控形态，`open` 由测试 rerender 驱动 */
 type HostProps = Partial<ConfirmDialogProps> & { open: boolean };
 
-/** 宿主：受控形态（与真实调用点一致，`open` 由测试 rerender 驱动） */
 function Host({ open, title = "删除「高数」？", onConfirm = noop, onCancel = noop, ...rest }: HostProps) {
   return <ConfirmDialog open={open} title={title} onConfirm={onConfirm} onCancel={onCancel} testId="cd" {...rest} />;
 }
@@ -271,4 +270,28 @@ describe("⑦ 进出场时机（presence 由 Modal 承载）", () => {
     expect(onCancel).not.toHaveBeenCalled();
     expect(onConfirm).not.toHaveBeenCalled();
   });
+
+  it("反例守门：退场相位（open=false 且仍挂载）内点确认 / 取消 / 遮罩 **一个回调都不产生**", () => {
+    const onConfirm = vi.fn();
+    const onCancel = vi.fn();
+    const { rerender } = render(<Host open onConfirm={onConfirm} onCancel={onCancel} />);
+    tick(0);
+    rerender(<Host open={false} onConfirm={onConfirm} onCancel={onCancel} />);
+    expect(panel().getAttribute("data-phase")).toBe("exit");
+    fireEvent.click(confirmBtn()); // 批 4 的误触面：点了删除、弹层在淡出、手一抖又点到确认
+    fireEvent.click(cancelBtn());
+    fireEvent.mouseDown(screen.getByTestId("cd-overlay"));
+    expect([onConfirm.mock.calls.length, onCancel.mock.calls.length], "退场期不得再接受任何交互").toEqual([0, 0]);
+  });
+
+  it("对照组：**打开态**下三条路径各仍触发一次（防「把功能一起关掉」）", () => {
+    const onConfirm = vi.fn();
+    const onCancel = vi.fn();
+    render(<Host open onConfirm={onConfirm} onCancel={onCancel} />);
+    fireEvent.click(confirmBtn());
+    fireEvent.click(cancelBtn());
+    fireEvent.mouseDown(screen.getByTestId("cd-overlay"));
+    // confirm 1 次；cancel 2 次 = 取消钮 1 + 遮罩 1
+    expect([onConfirm.mock.calls.length, onCancel.mock.calls.length], "confirm/cancel 次数").toEqual([1, 2]);
+  });
 });

app/src/ui/primitives/ConfirmDialog.tsx

@@ -29,6 +29,17 @@
  * ③ **退出路径永不产生确认**：ESC / 点遮罩一律走 `onCancel`（`Modal` 的关闭意图）——「破坏性动作
  *    不得因误点遮罩而被确认」；本原语不区分退出路径，也不因 `busy` 改变退出语义（确定行为）。
  * ④ 不迁移任何现有 `confirm` 调用点（那 23 处是批 4 的迁移面；本批只交付被迁移的靶子）。
+ * ⑤ **退场相位（`open=false` 而面板仍在淡出的 160ms）内整个对话框失活**（评审 I-1 的修复）：
+ *    点击是**即时**的，而退场是**异步**的 —— 那 160ms 里面板还挂在屏上，用户「手一抖」的第二次点击
+ *    会真的落到按钮上（批 4 迁移后正是删除 / 级联删除的**误触面**）。两条落点：
+ *    ① 两颗按钮 `busy={busy || !open}`（`Button` 的 `busy` 已实测拦下 click，且不设原生 `disabled`
+ *       ⇒ 焦点与 Tab 序在退场期保持稳定，不会因卸载前的属性抖动打断读屏）；
+ *    ② `Modal` 的关闭意图（遮罩 / 头部「关闭」钮）经 `handleCloseIntent` **按 `open` 门控** ——
+ *       这条 `busy` 到不了（那是 `Modal` 自己的处理器），故在本文件补一道守卫；ESC 无需处理
+ *       （`Modal` 的 ESC 监听本就以 `open` 为门控，实测退场期不响应）。
+ *    ⚠️ **系统级修法建议（登记给 T7 的 `Modal`，本任务不改它的文件）**：在
+ *    `Modal.css` 给 `[data-phase="exit"]` 的面板与遮罩加 `pointer-events: none` —— 那能一次性
+ *    覆盖**所有** Modal 消费者（含批 4 迁移的 28 个手写弹层），而本原语这两行只是**文件内缓解**。
  */
 import { useCallback, useEffect, useRef, useState } from "react";
 import type { ReactElement, ReactNode } from "react";
@@ -105,6 +116,19 @@ export function ConfirmDialog({
     setCancelSlot(node);
   }, []);
 
+  /**
+   * 退场相位内按钮**必须失活**（见 @ai-context 边界⑤）：复用 `Button` 的 `busy`（它拦 click、不设原生
+   * `disabled`）而不是 `disabled` —— 退场只有 160ms，`disabled` 会把焦点踢出 Tab 序再被卸载，读屏会读成
+   * 「按钮被禁用」这种无意义的状态抖动。
+   */
+  const buttonsInert = busy || !open;
+
+  /** `Modal` 的关闭意图守卫（遮罩 / 头部「关闭」钮）：`open=false` 的那一瞬起就不再接受退出意图 */
+  const handleCloseIntent = useCallback((): void => {
+    if (!open) return;
+    onCancel();
+  }, [open, onCancel]);
+
   useEffect(() => {
     if (!open) {
       redirectedRef.current = false; // 关闭即复位：下一次打开重新定向
@@ -123,18 +147,25 @@ export function ConfirmDialog({
   const footer = (
     <>
       <span ref={attachCancelSlot}>
-        <Button variant="secondary" onClick={onCancel} busy={busy} testId={testId ? `${testId}-cancel` : undefined}>
+        <Button variant="secondary" onClick={onCancel} busy={buttonsInert} testId={testId ? `${testId}-cancel` : undefined}>
           {cancelLabel}
         </Button>
       </span>
-      <Button variant="secondary" onClick={onConfirm} busy={busy} testId={testId ? `${testId}-confirm` : undefined}>
+      <Button variant="secondary" onClick={onConfirm} busy={buttonsInert} testId={testId ? `${testId}-confirm` : undefined}>
         {confirmLabel}
       </Button>
     </>
   );
 
   return (
-    <Modal open={open} onClose={onCancel} title={title} size={CONFIRM_SIZE} testId={testId} footer={footer}>
+    <Modal
+      open={open}
+      onClose={handleCloseIntent}
+      title={title}
+      size={CONFIRM_SIZE}
+      testId={testId}
+      footer={footer}
+    >
       <div className="ed-confirm">
         <span className="ed-confirm-seal" aria-hidden="true">
           {SEAL_TEXT}