test(primitives): pin the twenty dialog set

Author: Aparencia

app/src/components/PracticeQuestionsOverlays.tsx

@@ -5,9 +5,13 @@
  *              练习=内建习得行动（打点入完成史 practice_tick，宽容缺勤）；
  *              问题=Me 问题化（open/answered/archived + 答沉淀回链——供输出创作
  *              前翻看与复盘）。
+ * @ai-context: 批 4 T8 迁移：自建遮罩/居中几何（原 560 px 面板 → `Modal` 的 `l` 档）与自绘
+ *              头部（标题 + 关闭钮）交给 `Modal`（barrel 导入，B5）——遮罩、ESC、焦点陷阱、
+ *              层级、body 滚动锁都是它的独占职责（ADR-033 §7）。开合态仍由父层持有
+ *              （`ActionCenterPanel` 的条件挂载）⇒ `open` 恒为 `true`，160ms 退场相位不触发。
  */
 import { useCallback, useEffect, useState } from "react";
-import { zIndex } from "../ui/zIndex";
+import { Modal } from "../ui/primitives";
 import { invoke } from "@tauri-apps/api/core";
 
 /** 响应结构（PracticeItem/QuestionItem 均 serde camelCase——字段须 camel 读取） */
@@ -32,41 +36,20 @@ interface QuestionView {
   answerRef: string | null;
 }
 
-const overlayStyle: React.CSSProperties = {
-  position: "fixed",
-  inset: 0,
-  background: "rgba(0,0,0,.45)",
-  zIndex: zIndex("modal"),
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-};
-const cardStyle: React.CSSProperties = {
-  background: "#fff",
-  borderRadius: 12,
-  width: 560,
-  maxWidth: "92vw",
-  maxHeight: "80vh",
-  overflow: "auto",
-  padding: 16,
-  fontSize: 13,
-};
 const btn: React.CSSProperties = { padding: "4px 10px", cursor: "pointer", fontSize: 12, borderRadius: 6 };
 const okBtn: React.CSSProperties = { ...btn, background: "#0d9488", color: "#fff", border: "none" };
 const ghostBtn: React.CSSProperties = { ...btn, background: "#fff", border: "1px solid #e5e7eb", color: "#374151" };
 
-function shell(title: string, subtitle: string, onClose: () => void, children: React.ReactNode) {
+/**
+ * 两个弹层共用的壳。标题（去纯装饰 emoji）与关闭钮归 `Modal` 的 head，`subtitle` 逐字保留为
+ * 正文首行（原为标题右侧的 `<span>`；字号/色值原样 ⇒ 只是换行位置变了）。
+ */
+function shell(testId: string, title: string, subtitle: string, onClose: () => void, children: React.ReactNode) {
   return (
-    <div style={overlayStyle} onClick={onClose}>
-      <div style={cardStyle} onClick={(e) => e.stopPropagation()}>
-        <div style={{ display: "flex", alignItems: "center", marginBottom: 10, gap: 8 }}>
-          <h3 style={{ margin: 0, fontSize: 15 }}>{title}</h3>
-          <span style={{ fontSize: 11, color: "#9ca3af" }}>{subtitle}</span>
-          <button style={{ ...ghostBtn, marginLeft: "auto" }} onClick={onClose}>关闭</button>
-        </div>
-        {children}
-      </div>
-    </div>
+    <Modal open onClose={onClose} title={title} size="l" testId={testId}>
+      <div style={{ fontSize: 11, color: "#9ca3af", marginBottom: 10 }}>{subtitle}</div>
+      {children}
+    </Modal>
   );
 }
 
@@ -113,7 +96,7 @@ export function PracticeOverlay({ onClose }: { onClose: () => void }) {
 
   const dueCount = items.filter((i) => i.nextDue != null && i.nextDue <= Math.floor(Date.now() / 1000)).length;
 
-  return shell("🎯 练习条目", `该练了 ${dueCount} · 闪卡之外第二条复利曲线（宽容缺勤只记史）`, onClose, (
+  return shell("practice-overlays", "练习条目", `该练了 ${dueCount} · 闪卡之外第二条复利曲线（宽容缺勤只记史）`, onClose, (
     <>
       {msg && <div style={{ fontSize: 11, color: "#047857", marginBottom: 6 }}>{msg}</div>}
       {err && <div style={{ fontSize: 11, color: "#dc2626", marginBottom: 6 }}>{err}</div>}
@@ -204,7 +187,7 @@ export function QuestionsOverlay({ onClose }: { onClose: () => void }) {
   const open = items.filter((q) => q.status === "open");
   const answered = items.filter((q) => q.status === "answered");
 
-  return shell("❓ 问题清单", "Me 洞见问题化——open/answered/archived（输出创作前翻看/复盘原料）", onClose, (
+  return shell("questions-overlays", "问题清单", "Me 洞见问题化——open/answered/archived（输出创作前翻看/复盘原料）", onClose, (
     <>
       {msg && <div style={{ fontSize: 11, color: "#047857", marginBottom: 6 }}>{msg}</div>}
       {err && <div style={{ fontSize: 11, color: "#dc2626", marginBottom: 6 }}>{err}</div>}

app/src/components/SopRunOverlay.tsx

@@ -7,9 +7,13 @@
  *              轨迹统计 + 保鲜 diff（"笔记有出入？"）+ 修订建议（纯本地聚合）。
  *              证据=可选相对路径输入（notes-images/ 前缀白名单——命令层校验；
  *              图片三入口落盘的完整上传流登记后置）。
+ * @ai-context: 批 4 T8 迁移：自建遮罩/居中几何（原 640 px 面板 → `Modal` 的 `l` 档）与自绘头部
+ *              （标题 + 关闭钮）交给 `Modal`（barrel 导入，B5）——遮罩、ESC、焦点陷阱、层级、
+ *              body 滚动锁都是它的独占职责（ADR-033 §7）。开合态仍由父层持有
+ *              （`ActionCenterPanel` 的条件挂载）⇒ `open` 恒为 `true`，160ms 退场相位不触发。
  */
 import { useEffect, useState } from "react";
-import { zIndex } from "../ui/zIndex";
+import { Modal } from "../ui/primitives";
 import { invoke } from "@tauri-apps/api/core";
 
 /** 响应结构（SopTemplate/SopRunStep/SopRun/SopRunDetail 均 serde camelCase——字段须 camel 读取） */
@@ -56,25 +60,6 @@ interface Props {
   onChanged?: () => void;
 }
 
-const overlayStyle: React.CSSProperties = {
-  position: "fixed",
-  inset: 0,
-  background: "rgba(0,0,0,.45)",
-  zIndex: zIndex("modal"),
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-};
-const cardStyle: React.CSSProperties = {
-  background: "#fff",
-  borderRadius: 12,
-  width: 640,
-  maxWidth: "92vw",
-  maxHeight: "84vh",
-  overflow: "auto",
-  padding: 16,
-  fontSize: 13,
-};
 const btn: React.CSSProperties = { padding: "4px 10px", cursor: "pointer", fontSize: 12, borderRadius: 6 };
 const okBtn: React.CSSProperties = { ...btn, background: "#0d9488", color: "#fff", border: "none" };
 const ghostBtn: React.CSSProperties = { ...btn, background: "#fff", border: "1px solid #e5e7eb", color: "#374151" };
@@ -181,111 +166,107 @@ export default function SopRunOverlay({ template, onClose, onChanged }: Props) {
   const modeLabel = confirmMode ? "总览核对（DO-CONFIRM）" : "逐步引导（READ-DO）";
 
   return (
-    <div style={overlayStyle} onClick={onClose}>
-      <div style={cardStyle} onClick={(e) => e.stopPropagation()}>
-        <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 10 }}>
-          <h3 style={{ margin: 0, fontSize: 15 }}>🧭 {template.name}</h3>
-          <span style={{ fontSize: 11, color: "#6b7280" }}>@{template.noteTitle}</span>
-          <span style={{ fontSize: 11, color: "#0f766e", background: "#f0fdfa", border: "1px solid #99f6e4", borderRadius: 10, padding: "1px 8px" }}>
-            {modeLabel}
-          </span>
-          <button style={{ ...ghostBtn, marginLeft: "auto" }} onClick={onClose}>
-            关闭
-          </button>
+    <Modal open onClose={onClose} title={template.name} size="l" testId="sop-run-overlay">
+      {/* 自绘头部已删：标题（去纯装饰 emoji 🧭）与关闭钮归 `Modal` 的 head；备注名与模式徽标
+          逐字保留为正文首行（字号/色值/边框原样） */}
+      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 10 }}>
+        <span style={{ fontSize: 11, color: "#6b7280" }}>@{template.noteTitle}</span>
+        <span style={{ fontSize: 11, color: "#0f766e", background: "#f0fdfa", border: "1px solid #99f6e4", borderRadius: 10, padding: "1px 8px" }}>
+          {modeLabel}
+        </span>
+      </div>
+
+      {err && <div style={{ fontSize: 12, color: "#dc2626", background: "#fef2f2", border: "1px solid #fca5a5", borderRadius: 6, padding: "6px 10px", marginBottom: 8 }}>{err}</div>}
+      {detail?.freshnessChanged && stage === "run" && (
+        <div style={{ fontSize: 12, color: "#b45309", background: "#fffbeb", border: "1px solid #f59e0b", borderRadius: 6, padding: "6px 10px", marginBottom: 8 }}>
+          ⚠ 笔记正文与启动快照已有出入——结算时请对比修订模板（执行即保鲜）
         </div>
+      )}
 
-        {err && <div style={{ fontSize: 12, color: "#dc2626", background: "#fef2f2", border: "1px solid #fca5a5", borderRadius: 6, padding: "6px 10px", marginBottom: 8 }}>{err}</div>}
-        {detail?.freshnessChanged && stage === "run" && (
-          <div style={{ fontSize: 12, color: "#b45309", background: "#fffbeb", border: "1px solid #f59e0b", borderRadius: 6, padding: "6px 10px", marginBottom: 8 }}>
-            ⚠ 笔记正文与启动快照已有出入——结算时请对比修订模板（执行即保鲜）
+      {stage === "run" && detail && (
+        <>
+          <div style={{ display: "flex", gap: 6, alignItems: "center", marginBottom: 8 }}>
+            <button style={ghostBtn} onClick={() => setConfirmMode((m) => !m)} title="两种执行模式可随时切换">
+              {confirmMode ? "切到逐步引导" : "切到总览核对"}
+            </button>
+            <span style={{ fontSize: 11, color: "#9ca3af", marginLeft: "auto" }}>
+              进行中 {detail.stats.done + detail.stats.failed + detail.stats.skipped}/{detail.stats.total} · 待办 {pending}
+            </span>
           </div>
-        )}
-
-        {stage === "run" && detail && (
-          <>
-            <div style={{ display: "flex", gap: 6, alignItems: "center", marginBottom: 8 }}>
-              <button style={ghostBtn} onClick={() => setConfirmMode((m) => !m)} title="两种执行模式可随时切换">
-                {confirmMode ? "切到逐步引导" : "切到总览核对"}
-              </button>
-              <span style={{ fontSize: 11, color: "#9ca3af", marginLeft: "auto" }}>
-                进行中 {detail.stats.done + detail.stats.failed + detail.stats.skipped}/{detail.stats.total} · 待办 {pending}
-              </span>
-            </div>
-            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
-              {detail.steps.map((s) => {
-                const done = s.status === "done";
-                const failed = s.status === "failed";
-                const skipped = s.status === "skipped";
-                return (
-                  <div key={s.id} style={{ border: "1px solid #e5e7eb", borderRadius: 8, padding: "8px 10px", background: done ? "#ecfdf5" : failed ? "#fef2f2" : "#fff" }}>
-                    <div style={{ display: "flex", gap: 6 }}>
-                      <span style={{ fontSize: 11, color: "#9ca3af", flexShrink: 0 }}>步骤 {s.stepNo}</span>
-                      <span style={{ fontSize: 13, color: "#111827", flex: 1 }}>{s.textSnapshot}</span>
-                      <span style={{ fontSize: 11, color: "#9ca3af", flexShrink: 0 }}>
-                        {done ? "✓" : failed ? "✗" : skipped ? "⏭" : s.status}
-                      </span>
-                    </div>
-                    {!done && !failed && !skipped && (
-                      <>
-                        <div style={{ display: "flex", gap: 4, marginTop: 6, flexWrap: "wrap" }}>
-                          <button style={okBtn} disabled={busy} onClick={() => void stepAction(s.stepNo, "done")}>✓ 完成</button>
-                          <button style={ghostBtn} disabled={busy} onClick={() => void stepAction(s.stepNo, "skipped")}>⏭ 跳过</button>
-                          <button style={{ ...ghostBtn, color: "#dc2626" }} disabled={busy} onClick={() => { setFailOpen(failOpen === s.stepNo ? null : s.stepNo); setFailNote(""); }}>✗ 失败</button>
-                        </div>
-                        {failOpen === s.stepNo && (
-                          <div style={{ display: "flex", gap: 4, marginTop: 6 }}>
-                            <input autoFocus placeholder="失败原因（建议记录可观测信号差在哪）" value={failNote} onChange={(e) => setFailNote(e.target.value)} style={{ flex: 1, fontSize: 12, border: "1px solid #e5e7eb", borderRadius: 4, padding: "2px 6px" }} />
-                            <button style={okBtn} disabled={busy} onClick={() => void stepAction(s.stepNo, "failed")}>记录失败</button>
-                          </div>
-                        )}
-                        {s.status === "todo" && (
-                          <div style={{ display: "flex", gap: 4, marginTop: 4, alignItems: "center" }}>
-                            <span style={{ fontSize: 11, color: "#9ca3af" }}>证据路径（notes-images/…，可选）：</span>
-                            <input
-                              value={evidenceByStep[s.stepNo] ?? ""}
-                              onChange={(e) => setEvidenceByStep((m) => ({ ...m, [s.stepNo]: e.target.value }))}
-                              placeholder="notes-images/xxx.png"
-                              style={{ flex: 1, fontSize: 12, border: "1px solid #e5e7eb", borderRadius: 4, padding: "2px 6px" }}
-                            />
-                          </div>
-                        )}
-                      </>
-                    )}
+          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+            {detail.steps.map((s) => {
+              const done = s.status === "done";
+              const failed = s.status === "failed";
+              const skipped = s.status === "skipped";
+              return (
+                <div key={s.id} style={{ border: "1px solid #e5e7eb", borderRadius: 8, padding: "8px 10px", background: done ? "#ecfdf5" : failed ? "#fef2f2" : "#fff" }}>
+                  <div style={{ display: "flex", gap: 6 }}>
+                    <span style={{ fontSize: 11, color: "#9ca3af", flexShrink: 0 }}>步骤 {s.stepNo}</span>
+                    <span style={{ fontSize: 13, color: "#111827", flex: 1 }}>{s.textSnapshot}</span>
+                    <span style={{ fontSize: 11, color: "#9ca3af", flexShrink: 0 }}>
+                      {done ? "✓" : failed ? "✗" : skipped ? "⏭" : s.status}
+                    </span>
                   </div>
-                );
-              })}
-            </div>
-            <div style={{ display: "flex", gap: 6, marginTop: 10 }}>
-              <button style={okBtn} disabled={busy || pending > 0} onClick={() => void finish("done")}>
-                ✅ 结算（完成）
-              </button>
-              <button style={{ ...ghostBtn, color: "#b45309" }} disabled={busy} onClick={() => void finish("aborted")}>
-                ⏹ 中止并归档
-              </button>
-              {pending > 0 && <span style={{ fontSize: 11, color: "#b45309" }}>还有 {pending} 步未处理（可先处理或中止）</span>}
-            </div>
-          </>
-        )}
+                  {!done && !failed && !skipped && (
+                    <>
+                      <div style={{ display: "flex", gap: 4, marginTop: 6, flexWrap: "wrap" }}>
+                        <button style={okBtn} disabled={busy} onClick={() => void stepAction(s.stepNo, "done")}>✓ 完成</button>
+                        <button style={ghostBtn} disabled={busy} onClick={() => void stepAction(s.stepNo, "skipped")}>⏭ 跳过</button>
+                        <button style={{ ...ghostBtn, color: "#dc2626" }} disabled={busy} onClick={() => { setFailOpen(failOpen === s.stepNo ? null : s.stepNo); setFailNote(""); }}>✗ 失败</button>
+                      </div>
+                      {failOpen === s.stepNo && (
+                        <div style={{ display: "flex", gap: 4, marginTop: 6 }}>
+                          <input autoFocus placeholder="失败原因（建议记录可观测信号差在哪）" value={failNote} onChange={(e) => setFailNote(e.target.value)} style={{ flex: 1, fontSize: 12, border: "1px solid #e5e7eb", borderRadius: 4, padding: "2px 6px" }} />
+                          <button style={okBtn} disabled={busy} onClick={() => void stepAction(s.stepNo, "failed")}>记录失败</button>
+                        </div>
+                      )}
+                      {s.status === "todo" && (
+                        <div style={{ display: "flex", gap: 4, marginTop: 4, alignItems: "center" }}>
+                          <span style={{ fontSize: 11, color: "#9ca3af" }}>证据路径（notes-images/…，可选）：</span>
+                          <input
+                            value={evidenceByStep[s.stepNo] ?? ""}
+                            onChange={(e) => setEvidenceByStep((m) => ({ ...m, [s.stepNo]: e.target.value }))}
+                            placeholder="notes-images/xxx.png"
+                            style={{ flex: 1, fontSize: 12, border: "1px solid #e5e7eb", borderRadius: 4, padding: "2px 6px" }}
+                          />
+                        </div>
+                      )}
+                    </>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+          <div style={{ display: "flex", gap: 6, marginTop: 10 }}>
+            <button style={okBtn} disabled={busy || pending > 0} onClick={() => void finish("done")}>
+              ✅ 结算（完成）
+            </button>
+            <button style={{ ...ghostBtn, color: "#b45309" }} disabled={busy} onClick={() => void finish("aborted")}>
+              ⏹ 中止并归档
+            </button>
+            {pending > 0 && <span style={{ fontSize: 11, color: "#b45309" }}>还有 {pending} 步未处理（可先处理或中止）</span>}
+          </div>
+        </>
+      )}
 
-        {stage === "settle" && detail && (
-          <div>
-            <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 8 }}>
-              {detail.run.status === "done" ? "✅ run 已完成并归档入史" : "⏹ run 已中止归档"}
-            </div>
-            <div style={{ fontSize: 12, color: "#374151", marginBottom: 6 }}>
-              轨迹：✓完成 {detail.stats.done} · ⏭跳过 {detail.stats.skipped} · ✗失败 {detail.stats.failed}（共 {detail.stats.total} 步）
-            </div>
-            {detail.freshnessChanged && (
-              <div style={{ fontSize: 12, color: "#b45309", marginBottom: 6 }}>
-                📝 笔记正文有出入——可对比快照修订模板段落（编辑即模板，无双写）
-              </div>
-            )}
-            <div style={{ display: "flex", gap: 6, marginTop: 8 }}>
-              <button style={okBtn} onClick={onClose}>返回</button>
+      {stage === "settle" && detail && (
+        <div>
+          <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 8 }}>
+            {detail.run.status === "done" ? "✅ run 已完成并归档入史" : "⏹ run 已中止归档"}
+          </div>
+          <div style={{ fontSize: 12, color: "#374151", marginBottom: 6 }}>
+            轨迹：✓完成 {detail.stats.done} · ⏭跳过 {detail.stats.skipped} · ✗失败 {detail.stats.failed}（共 {detail.stats.total} 步）
+          </div>
+          {detail.freshnessChanged && (
+            <div style={{ fontSize: 12, color: "#b45309", marginBottom: 6 }}>
+              📝 笔记正文有出入——可对比快照修订模板段落（编辑即模板，无双写）
             </div>
+          )}
+          <div style={{ display: "flex", gap: 6, marginTop: 8 }}>
+            <button style={okBtn} onClick={onClose}>返回</button>
           </div>
-        )}
-      </div>
-    </div>
+        </div>
+      )}
+    </Modal>
   );
 }