From 98ea0696917b6585163acd1e8feaea8dec0da49c Mon Sep 17 00:00:00 2001
From: chenxing <chenxing@bestsch.com>
Date: Thu, 15 Oct 2026 15:50:08 +0800
Subject: [PATCH] =?UTF-8?q?feat(onboarding):=20=E6=8E=A5=E5=85=A5=E5=90=91?=
 =?UTF-8?q?=E5=AF=BC=E4=BA=94=E6=AD=A5=E9=A1=B5=20+=20=E9=85=8D=E7=BD=AE?=
 =?UTF-8?q?=E7=94=9F=E6=88=90=E5=99=A8=EF=BC=88=E8=AE=AE=E9=A2=98=E4=BA=8C?=
 =?UTF-8?q?=20P1=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

把子应用接入从「人背文档 + 逐字对齐字符串」变成「向导引导 + 机器生成正确配置 + 每步可自检」。

- Onboarding.vue：五步（应用档案 / 工程接入 / 回调注册 / 流程编排 / 联调验收），步骤条可任意跳转不强制线性
- STEP② 配置生成器为核心：按「端点形态（平台验签式/X-Flw 式）× 接入场景（新接入/存量升级）× ① 的 context-path/bizType」实时生成 yh.flow-callback 块、Maven 依赖、FlowCallbackHandler 骨架。X-Flw 式追加「端点第二段非 oapi、必须显式 callback-url 直连」警示；无 ctx 时 base-path 整行注释。对齐规范 §7.2 推导式
- 前置条件清单把散落文档里的前置变成可勾选待办；Redis 公共组件与 trust-registry 两条高危静默断点红底强调
- STEP③ 登记检查：私网/开发机地址、base_path 漏填、与声明的 target 不一致逐条判定给修复建议；「发一条 flow.ping」复用 callbackProbe
- STEP④ 变量契约显性化：解析 contentJson 取 CONDITION 节点出边表达式，与已知变量（近 50 条办件 formData 聚合 + 内置 8 个，口径同编辑器）核对，引用从未出现的键即警示「运行时会挂起」
- STEP⑤ 六项自检 + 一键生成 markdown 自检报告（纯前端拼装不落库）

数据源全部复用已有接口（appList/regList/callbackProbe/defList/defGet/callbackLogs/adminInstances），零新增表、零新增写接口。路由 /admin/onboarding（modId 108，需 UserBase 配 app_module）。vite build 通过，产物已构建进 front/dist/。
---
 src/router/routes.ts                |   9 +
 src/views/flow/admin/Onboarding.vue | 741 ++++++++++++++++++++++++++++
 2 files changed, 750 insertions(+)
 create mode 100644 src/views/flow/admin/Onboarding.vue

diff --git a/src/router/routes.ts b/src/router/routes.ts
index d716782..360195a 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -81,6 +81,15 @@ const routes: RouteRecordRaw[] = [
         component: () => import("@/views/flow/admin/AppSetting.vue"),
         meta: { title: "应用设置", modId: 107 },
     },
+    {
+        // 接入向导（2026-10-15 议题二 P1）：五步引导 + 配置生成器（源头消灭配置形态静默断点）。
+        // 与「应用设置-对接健康度」互补：向导管接入时一次引导，健康度管对接后持续体检。
+        // 菜单需在 UserBase 侧配置同 path 的 app_module（custom_id=108）
+        path: "/admin/onboarding",
+        name: "flow_admin_onboarding",
+        component: () => import("@/views/flow/admin/Onboarding.vue"),
+        meta: { title: "接入向导", modId: 108 },
+    },
     {
         // 办件进度嵌入页（iframe 免签嵌入，App.vue 对 /embed/* 前缀旁路 CAS 与 layout）：
         // 不挂菜单、无 parentId（子应用 Drawer 内打开，非管理面导航）；query.token 必填
diff --git a/src/views/flow/admin/Onboarding.vue b/src/views/flow/admin/Onboarding.vue
new file mode 100644
index 0000000..5517697
--- /dev/null
+++ b/src/views/flow/admin/Onboarding.vue
@@ -0,0 +1,741 @@
+<script setup lang="ts">
+// 接入向导（2026-10-15 议题二 P1）：把子应用接入流程中心从「人背文档 + 逐字对齐字符串」变成
+// 「向导引导 + 机器生成正确配置 + 每步可自检」。五步：应用档案 → 工程接入 → 回调注册 → 流程编排 → 联调验收。
+// 数据源全部复用已有接口（appList / regList / callbackProbe / defList / defGet / callbackLogs / adminInstances），
+// 零新增表、零新增写接口。配置生成器对齐《子应用接入流程中心规范.md》§7.2/§7.5。
+// 方案文档：docs/流程中心接入向导与配置生成器-实施方案-20261015.md
+import { ref, computed, onMounted } from "vue";
+import { Message, Tag } from "view-ui-plus";
+import { flowApi } from "@/api/module/flow";
+import Utils from "@/utils";
+import { extractExprVars, EXPR_BUILTIN_VARS } from "@/views/flow/admin/def-editor/model";
+
+// ==================== 步骤骨架 ====================
+const STEPS = [
+    { title: "应用档案", hint: "我是谁：appKey / target / context-path / bizType" },
+    { title: "工程接入", hint: "生成正确形态的 yh.flow-callback 配置" },
+    { title: "回调注册", hint: "登记行存在且地址合规 + 探测" },
+    { title: "流程编排", hint: "流程定义 → 变量契约显性化" },
+    { title: "联调验收", hint: "六项自检 + 自检报告" },
+];
+const step = ref(0);
+
+// ==================== STEP① 应用档案 ====================
+const apps = ref<any[]>([]);
+const appMap = ref<Record<string, string>>({});
+const s1 = ref({
+    appKey: "",
+    target: "",
+    ctx: "",
+    bizTypes: "",
+    bindLevel: "app",
+});
+const BIND_LEVELS = [
+    { value: "app", label: "应用级", desc: "整个应用一种审批流（一校一行绑定表）" },
+    { value: "object", label: "对象级", desc: "每个业务对象各走各的流（对象行加 flow_guid 列）" },
+    { value: "form", label: "表单级", desc: "自定义表单统一审批路径，事项零配置继承" },
+];
+
+// ==================== STEP② 工程接入（配置生成器） ====================
+const s2 = ref({
+    // 端点形态：platform=平台验签式（式 A，推荐）｜xflw=注册级 X-Flw 式（式 B）
+    endpointMode: "platform" as "platform" | "xflw",
+    // 接入场景：new=新接入｜upgrade=存量升级（已接回调，升 starter 版本即可）
+    scenario: "new" as "new" | "upgrade",
+    configDone: false,
+});
+// 前置条件清单（规范 §7.1 + work-leave 四个静默断点）；后两条高危，红底强调
+const PREREQS = [
+    { key: "openapi", label: "已配 yh-openapi-spring-boot-starter", danger: false, tip: "Registrar 自注册用" },
+    { key: "appauth", label: "平台验签式：已配 yh.app-auth.server.enforce-patterns: [/oapi/*]", danger: false, tip: "式 A 的验签过滤器" },
+    { key: "datasource", label: "应用有 JDBC DataSource", danger: false, tip: "幂等表/事件表落地" },
+    { key: "redis", label: "projman 已勾选 Redis 公共组件", danger: true, tip: "断点 3：缺 Redis 验签链无密钥，编译启动都不报错，直到验签 401" },
+    { key: "trust", label: "trust-registry: true 已配", danger: true, tip: "断点 4：缺失 = 验签不过，症状与「收不到回调」同构" },
+    { key: "endpoint", label: "接收端点已部署且可访问", danger: false, tip: "注册接口会探活，端点必须先上线" },
+];
+const prereqChecked = ref<Record<string, boolean>>({});
+const prereqAllDone = computed(() => PREREQS.every((p) => prereqChecked.value[p.key]));
+
+/** 生成的 yh.flow-callback 配置块（技术核心，对齐规范 §7.2 推导式） */
+const generatedYaml = computed(() => {
+    const ctx = s1.value.ctx.trim();
+    const bizTypes = s1.value.bizTypes
+        .split(",")
+        .map((s: string) => s.trim())
+        .filter(Boolean);
+    const isXflw = s2.value.endpointMode === "xflw";
+    const L: string[] = ["yh:", "  flow-callback:", "    enabled: true"];
+    L.push(ctx
+        ? `    base-path: ${ctx}        # 接收方 servlet context-path；§4.2：填错/漏填 ⇒ 推送全 401 无限重试`
+        : "    # base-path:              # 本地无 context-path 就不填（填了反而 401）");
+    L.push(`    biz-types: [${bizTypes.join(", ")}]   # 本应用 bizType 白名单；空=不过滤全交 Handler`);
+    L.push(`    verify-flw-signature: ${isXflw}${isXflw ? "        # 式 B：注册级 X-Flw 签名" : "      # 式 A：平台应用签名（AppAuthFilter）"}`);
+    if (isXflw) {
+        L.push("    path: /callback/flow");
+        L.push("    # ⚠ 端点第二段非 oapi → 网关 TargetRouter 裸 404，必须显式配 callback-url 直连：");
+        L.push("    # callback-url: http://<host>:<port>/callback/flow");
+    } else {
+        L.push("    # path: /oapi/flow/callback   # 平台验签式用 starter 默认值，不必写");
+    }
+    L.push("    store:");
+    L.push("      auto-create-table: true      # 首次使用自动 CREATE TABLE IF NOT EXISTS");
+    return L.join("\n");
+});
+
+/** 生成的依赖块（存量升级场景不生成，改提示升版本） */
+const generatedPom = computed(() => {
+    if (s2.value.scenario === "upgrade") {
+        return "<!-- 存量升级：无需新增依赖，升级 yh-flow-callback-spring-boot-starter 版本即可。\n     回调接收与条件路由判断由同一个 jar 提供。 -->";
+    }
+    const extra = s2.value.endpointMode === "platform"
+        ? "\n<!-- 平台验签式额外需要：应用已配 yh-app-auth-spring-boot-starter -->"
+        : "";
+    return "<dependency>\n    <groupId>com.yunhai.platform</groupId>\n    <artifactId>yh-flow-callback-spring-boot-starter</artifactId>\n</dependency>" + extra;
+});
+
+/** 生成的 Handler 骨架（规范 §7.3） */
+const generatedHandler = computed(() =>
+    "@Bean\npublic FlowCallbackHandler flowCallbackHandler(YourRepository repo) {\n    return event -> {\n        // 走到这里已验签、已过幂等/乱序门/bizType 过滤，且与业务推进同一事务\n        switch (event.getEvent()) {\n            case \"flow.submitted\":      /* 在途 */ break;\n            case \"flow.task.created\":   /* 建待办 */ break;\n            case \"flow.task.handled\":   /* 记录办理 */ break;\n            case \"flow.completed\":      /* 终态·通过（终态不可逆！） */ break;\n            case \"flow.rejected\":       /* 终态·驳回 */ break;\n            case \"flow.withdrawn\":      /* 终态·撤回 */ break;\n            default: /* 未知事件码 → 记日志后正常返回，200 吞掉（向前兼容） */ break;\n        }\n    };\n}");
+
+// ==================== STEP③ 回调注册 ====================
+const regs = ref<any[]>([]);
+const regLoading = ref(false);
+/** 当前 appKey 的登记行（同一应用多个 flowGuid 各一行） */
+const appRegs = computed(() =>
+    regs.value.filter((r: any) => String(r.appKey) === String(s1.value.appKey)));
+const regCheck = ref<{ level: "ok" | "warn" | "bad"; text: string; advice?: string }[]>([]);
+const regCheckedAt = ref("");
+const probeResult = ref<any>(null);
+const probing = ref(false);
+
+async function loadRegs() {
+    regLoading.value = true;
+    try {
+        regs.value = ((await flowApi.regList().send()) as any[]) || [];
+    } catch (e: any) {
+        Message.error(e?.message || "登记列表加载失败");
+        regs.value = [];
+    } finally {
+        regLoading.value = false;
+    }
+}
+
+/** 登记行检查（调研 §3.3 痛点② 的直接兜底） */
+async function checkRegs() {
+    if (!s1.value.appKey) {
+        Message.warning("请先在第 ① 步选择应用");
+        step.value = 0;
+        return;
+    }
+    await loadRegs();
+    const mine = appRegs.value;
+    const out: { level: "ok" | "warn" | "bad"; text: string; advice?: string }[] = [];
+    if (!mine.length) {
+        out.push({ level: "bad", text: "该应用没有任何回调登记行", advice: "在管理端保存绑定时调 ensureRegistered(schId, flowGuid)（规范 §7.4）；不要在发起时才注册" });
+    } else {
+        // 地址形态：私网/开发机地址必然拒连无限重试（断点 1）
+        const PRIVATE = /:\/\/(localhost|127\.0\.0\.1|0\.0\.0\.0|10\.[0-9.]+|192\.168\.[0-9.]+|172\.(1[6-9]|2[0-9]|3[01])\.[0-9.]+)/;
+        const bad = mine.filter((r: any) => r.callbackUrl && PRIVATE.test(r.callbackUrl));
+        if (bad.length) {
+            out.push({ level: "bad", text: bad.length + " 条登记地址是私网/开发机地址（" + bad[0].callbackUrl + "）", advice: "推送必然拒连并无限重试：删掉本地镜像行 → 管理端重新保存绑定，走 starter 自注册" });
+        }
+        // basePath：有 ctx 却漏填 ⇒ 推送全 401（§4.2 高频事故）
+        const emptyBase = mine.filter((r: any) => !r.basePath);
+        if (emptyBase.length && s1.value.ctx.trim()) {
+            out.push({ level: "bad", text: emptyBase.length + " 条登记未填 base_path，而你在第 ① 步声明了 context-path", advice: "漏填 base_path → 推送全 401 → 无限重试；症状表现为「收不到回调」" });
+        } else if (emptyBase.length) {
+            out.push({ level: "warn", text: emptyBase.length + " 条登记未填 base_path（你声明了无 context-path，需确认）", advice: "本地无 ctx 才留空；生产有 ctx 必须填" });
+        }
+        // 登记地址与第 ① 步声明的 target 一致性
+        const target = s1.value.target.trim();
+        if (target) {
+            const mismatch = mine.filter((r: any) => r.callbackUrl && !String(r.callbackUrl).includes("/" + target));
+            if (mismatch.length) {
+                out.push({ level: "warn", text: mismatch.length + " 条登记地址不含声明的 target「" + target + "」", advice: "确认是旧登记残留，还是登记地址推导有误" });
+            }
+        }
+        if (!out.length) {
+            out.push({ level: "ok", text: mine.length + " 条登记全部合规（地址为网关形态、base_path 一致）" });
+        }
+    }
+    regCheck.value = out;
+    regCheckedAt.value = new Date().toLocaleTimeString();
+}
+
+/** 探测：同步发一条 flow.ping 走真实管道（复用管理端 callbackProbe） */
+async function probeFirst() {
+    const first = appRegs.value[0];
+    if (!first) {
+        Message.warning("该应用没有可探测的登记行");
+        return;
+    }
+    probing.value = true;
+    probeResult.value = null;
+    try {
+        probeResult.value = (await flowApi.callbackProbe(first.id).send()) || null;
+    } catch (e: any) {
+        Message.error(e?.message || "探测失败");
+    } finally {
+        probing.value = false;
+    }
+}
+
+// ==================== STEP④ 流程编排 ====================
+const defs = ref<any[]>([]);
+const defLoading = ref(false);
+const selectedDefId = ref<number | null>(null);
+/** 选中流程的 CONDITION 节点清单 + 变量契约核对 */
+const condNodes = ref<{ name: string; judgeMode: string; routerKey: string; outlets: { name: string; expr: string; unknown: string[] }[] }[]>([]);
+const knownVars = ref<string[]>([]);
+const DEF_STATUS: Record<number, string> = { 0: "草稿", 1: "已发布", 2: "停用" };
+
+async function loadDefs() {
+    if (!s1.value.appKey) return;
+    defLoading.value = true;
+    try {
+        defs.value = ((await flowApi.defList({ appKey: s1.value.appKey }).send()) as any[]) || [];
+        if (!selectedDefId.value && defs.value.length) selectedDefId.value = defs.value[0].id;
+    } catch (e: any) {
+        Message.error(e?.message || "流程定义加载失败");
+        defs.value = [];
+    } finally {
+        defLoading.value = false;
+    }
+}
+
+/** 已知变量 = 近期 50 条办件 formData 顶层键（去重截 40）+ 内置 8 个；口径同编辑器与调试弹窗 */
+async function loadKnownVars() {
+    const keys = new Set<string>();
+    try {
+        const rows: any[] = (await flowApi.adminInstances({ page: 1, size: 50 }).send())?.content || [];
+        rows.forEach((r: any) => {
+            try {
+                const v = JSON.parse(r.formDataJson || "{}");
+                if (v && typeof v === "object" && !Array.isArray(v)) Object.keys(v).forEach((k: string) => keys.add(k));
+            } catch { /* 脏 formData 跳过 */ }
+        });
+    } catch { /* 办件拉取失败：退化为仅内置，不阻塞 */ }
+    knownVars.value = Array.from(new Set([...Array.from(keys).slice(0, 40), ...EXPR_BUILTIN_VARS]));
+}
+
+const hasPublished = computed(() => defs.value.some((d: any) => d.status === 1));
+
+/** 解析选中流程的 CONDITION 节点，把表达式变量与已知键核对（发布期 warn 校验的可视化复述） */
+async function inspectDef(id: number) {
+    selectedDefId.value = id;
+    condNodes.value = [];
+    try {
+        const d: any = await flowApi.defGet(id).send();
+        const content = typeof d?.contentJson === "string" ? JSON.parse(d.contentJson || "{}") : (d?.contentJson || {});
+        const nodes: any[] = content.nodes || [];
+        const edges: any[] = content.edges || [];
+        condNodes.value = nodes
+            .filter((n: any) => n.type === "CONDITION")
+            .map((n: any) => ({
+                name: n.name || n.id,
+                judgeMode: n.judgeMode || "SERVICE",
+                routerKey: n.routerKey || "",
+                outlets: edges
+                    .filter((e: any) => e.from === n.id)
+                    .map((e: any) => {
+                        const expr = e.condition || "";
+                        return { name: e.name || "(未命名出口)", expr, unknown: expr ? extractExprVars(expr).filter((v: string) => !knownVars.value.includes(v)) : [] };
+                    }),
+            }));
+    } catch (e: any) {
+        Message.error(e?.message || "流程详情加载失败");
+    }
+}
+
+// ==================== STEP⑤ 联调验收 ====================
+const accept = ref<{ no: number; name: string; level: "ok" | "warn" | "bad" | "none"; detail: string; advice?: string }[]>([]);
+const acceptDone = ref(false);
+const acceptLoading = ref(false);
+
+/** 六项自检：把「手册的诊断命令集」变成按钮 */
+async function runAcceptance() {
+    acceptLoading.value = true;
+    try {
+    const R: typeof accept.value = [];
+    const app = apps.value.find((a: any) => String(a.appKey) === String(s1.value.appKey));
+    // 1 应用白名单启用（必须通过）
+    R.push(app && app.enabled === 1
+        ? { no: 1, name: "应用白名单启用", level: "ok", detail: app.appName + "（" + app.appKey + "）已开通且启用" }
+        : { no: 1, name: "应用白名单启用", level: "bad", detail: app ? "应用已停用" : "应用不在白名单", advice: "请先在用户中心开通/启用该应用" });
+    // 2 前置条件全勾选（黄色可带病通过）
+    const missed = PREREQS.filter((p) => !prereqChecked.value[p.key]);
+    R.push(missed.length
+        ? { no: 2, name: "前置条件全勾选", level: "warn", detail: "尚有 " + missed.length + " 项未勾选：" + missed.map((m) => m.label).join("；"), advice: "回到第 ② 步补勾，优先 Redis 公共组件与 trust-registry" }
+        : { no: 2, name: "前置条件全勾选", level: "ok", detail: PREREQS.length + " 项前置条件已确认" });
+    // 3 登记行存在且地址合规（必须通过）
+    const regBad = regCheck.value.filter((c) => c.level === "bad");
+    const regWarn = regCheck.value.filter((c) => c.level === "warn");
+    if (!regCheckedAt.value) {
+        R.push({ no: 3, name: "登记行存在且地址合规", level: "warn", detail: "尚未在第 ③ 步执行「检查注册」", advice: "回第 ③ 步点「检查注册」" });
+    } else if (regBad.length) {
+        R.push({ no: 3, name: "登记行存在且地址合规", level: "bad", detail: regBad.map((c) => c.text).join("；"), advice: regBad[0].advice });
+    } else {
+        R.push({ no: 3, name: "登记行存在且地址合规", level: regWarn.length ? "warn" : "ok", detail: regWarn.length ? "地址合规，但有 " + regWarn.length + " 条告警：" + regWarn.map((c) => c.text).join("；") : appRegs.value.length + " 条登记全部合规", advice: regWarn[0]?.advice });
+    }
+    // 4 探测可达且验签通过（黄色可带病通过）
+    if (!probeResult.value) {
+        R.push({ no: 4, name: "探测可达且验签通过", level: "warn", detail: "尚未执行探测", advice: "回第 ③ 步点「发一条 flow.ping」" });
+    } else if (probeResult.value.success) {
+        R.push({ no: 4, name: "探测可达且验签通过", level: "ok", detail: "HTTP " + probeResult.value.httpStatus + " · 耗时 " + probeResult.value.elapsedMs + "ms" });
+    } else {
+        R.push({ no: 4, name: "探测可达且验签通过", level: "warn", detail: "探测失败：" + (probeResult.value.error || "HTTP " + (probeResult.value.httpStatus ?? "?")), advice: "401 → 查 base-path / trust-registry；拒连 → 查登记地址" });
+    }
+    // 5 有已发布流程（必须通过）
+    R.push(hasPublished.value
+        ? { no: 5, name: "有已发布流程", level: "ok", detail: defs.value.filter((d: any) => d.status === 1).length + " 个已发布流程" }
+        : { no: 5, name: "有已发布流程", level: "bad", detail: defs.value.length ? "仅有草稿/停用流程" : "该应用无任何流程定义", advice: "回第 ④ 步：发布流程后再回填绑定" });
+    // 6 近 7 日推送有成功记录（无数据不扣分）
+    try {
+        const page: any = await flowApi.callbackLogs({ status: 1, size: 1 }).send();
+        const total = page?.totalCount ?? page?.total ?? 0;
+        R.push(total > 0
+            ? { no: 6, name: "近 7 日推送有成功记录", level: "ok", detail: "累计成功推送 " + total + " 条" }
+            : { no: 6, name: "近 7 日推送有成功记录", level: "warn", detail: "暂无成功推送记录（可能还没发起过办件，可跳过）" });
+    } catch {
+        R.push({ no: 6, name: "近 7 日推送有成功记录", level: "warn", detail: "推送日志拉取失败，跳过该项" });
+    }
+    accept.value = R;
+    acceptDone.value = true;
+    } finally {
+        acceptLoading.value = false;
+    }
+}
+/** 一键生成接入自检报告（纯前端拼装，不落库；可直接复制进工单） */
+const reportVisible = ref(false);
+const reportText = computed(() => {
+    const app = apps.value.find((a: any) => String(a.appKey) === String(s1.value.appKey));
+    const L: string[] = [];
+    L.push("# 子应用接入流程中心 · 自检报告");
+    L.push("");
+    L.push("- 生成时间：" + new Date().toLocaleString());
+    L.push("- 应用：" + (app ? app.appName + "（" + app.appKey + "）" : s1.value.appKey || "未选择"));
+    L.push("- 网关 target：" + (s1.value.target || "未填（缺省取 base-path）"));
+    L.push("- context-path：" + (s1.value.ctx || "无"));
+    L.push("- bizType：" + (s1.value.bizTypes || "未填"));
+    L.push("- 绑定档位：" + (BIND_LEVELS.find((b) => b.value === s1.value.bindLevel)?.label || "-"));
+    L.push("- 接入口径：" + (s2.value.endpointMode === "xflw" ? "注册级 X-Flw 式（式 B）" : "平台验签式（式 A）"));
+    L.push("");
+    L.push("## 六项自检结果");
+    L.push("");
+    if (!acceptDone.value) {
+        L.push("_尚未执行自检，请先点「执行六项自检」。_");
+    } else {
+        const icon = { ok: "✅", warn: "⚠️", bad: "❌", none: "➖" };
+        accept.value.forEach((r) => {
+            L.push(icon[r.level] + " **" + r.no + ". " + r.name + "** —— " + r.detail);
+            if (r.advice) L.push("   - 建议：" + r.advice);
+        });
+    }
+    L.push("");
+    L.push("## 生成的配置块");
+    L.push("");
+    L.push("```yaml");
+    L.push(generatedYaml.value);
+    L.push("```");
+    L.push("");
+    L.push("## 前置条件确认");
+    L.push("");
+    PREREQS.forEach((p) => L.push((prereqChecked.value[p.key] ? "- [x]" : "- [ ]") + " " + p.label + (p.danger ? "（高危断点）" : "")));
+    L.push("");
+    L.push("## 登记行");
+    L.push("");
+    if (!appRegs.value.length) L.push("_无登记行_");
+    else {
+        L.push("| 流程 GUID | 回调地址 | base_path | 状态 |");
+        L.push("|---|---|---|---|");
+        appRegs.value.forEach((r: any) => L.push("| " + (r.flowGuid || "-") + " | " + (r.callbackUrl || "-") + " | " + (r.basePath || "-") + " | " + (r.status === 0 ? "启用" : "停用") + " |"));
+    }
+    L.push("");
+    L.push("## 条件路由变量契约");
+    L.push("");
+    if (!condNodes.value.length) L.push("_所选流程无 CONDITION 节点_");
+    else {
+        condNodes.value.forEach((n) => {
+            L.push("### " + n.name + "（" + (n.judgeMode === "EXPRESSION" ? "表达式" : "外部判断服务") + (n.routerKey ? " · routerKey=" + n.routerKey : "") + "）");
+            n.outlets.forEach((o) => {
+                L.push("- 出口「" + o.name + "」：" + (o.expr || "（无表达式）"));
+                if (o.unknown.length) L.push("  - ⚠️ 引用了未在已知变量中的：" + o.unknown.join("、") + "（疑似拼错，运行时会挂起）");
+            });
+        });
+    }
+    return L.join("\n");
+});
+
+async function copyText(t: string, ok = "已复制") {
+    try {
+        if (navigator.clipboard?.writeText) {
+            await navigator.clipboard.writeText(t);
+            Message.success(ok);
+            return;
+        }
+        await Utils.copyToClipboard(t);
+        Message.success(ok);
+    } catch {
+        Message.error("复制失败，请手动选择文本复制");
+    }
+}
+
+// ==================== 生命周期 ====================
+onMounted(async () => {
+    try {
+        apps.value = ((await flowApi.appList().send()) as any[]) || [];
+        appMap.value = {};
+        apps.value.forEach((a: any) => { if (a.appKey) appMap.value[a.appKey] = a.appName; });
+    } catch { /* 应用列表拉取失败：第 ① 步会给红字提示 */ }
+    await loadKnownVars();
+});
+
+/** 进入某步时的按需装载 */
+async function goto(n: number) {
+    step.value = n;
+    if (n === 2) await loadRegs();
+    if (n === 3) await loadDefs();
+}
+</script>
+
+<template>
+    <div class="page-wrapper yh-fill">
+        <div class="main-container ob-wrap">
+            <!-- 顶栏 -->
+            <div class="ob-head fix">
+                <span class="fl ob-title">接入向导</span>
+                <span class="fl ob-sub">把「子应用接入流程中心」从人背文档变成向导引导 + 机器生成正确配置</span>
+                <Button class="fr" type="primary" size="large" @click="reportVisible = true">生成接入自检报告</Button>
+            </div>
+
+            <!-- 步骤条（可任意跳转，不强制线性） -->
+            <div class="ob-steps">
+                <div v-for="(s, i) in STEPS" :key="i" class="ob-step" :class="{ 'is-cur': step === i, 'is-done': i < step }" @click="goto(i)">
+                    <span class="ob-num">{{ i + 1 }}</span>
+                    <span class="ob-st">
+                        <b>{{ s.title }}</b>
+                        <em>{{ s.hint }}</em>
+                    </span>
+                </div>
+            </div>
+
+            <!-- ============ STEP① 应用档案 ============ -->
+            <div v-show="step === 0" class="ob-body">
+                <div class="ob-card">
+                    <h3>我是谁</h3>
+                    <p class="ob-desc">这四个值是后续所有生成器的输入；context-path 是 §4.2 高频事故点，请如实填写。</p>
+                    <div class="ob-form">
+                        <div class="ob-row">
+                            <label class="ob-lab">应用<i>*</i></label>
+                            <Select v-model="s1.appKey" style="width: 320px" placeholder="选择已开通的应用" @on-change="loadDefs">
+                                <Option v-for="a in apps" :key="a.appKey" :value="a.appKey" :label="a.appName + '（' + a.appKey + '）'" />
+                            </Select>
+                            <span v-if="!apps.length" class="ob-err">应用清单拉取失败或尚未开通 —— 请先在用户中心开通该应用</span>
+                        </div>
+                        <div class="ob-row">
+                            <label class="ob-lab">网关 target</label>
+                            <Input v-model="s1.target" style="width: 320px" placeholder="如 notice；可留空，缺省取 base-path" />
+                            <span class="ob-tip">网关路由首段；契约上与 base-path 恒等，通常留空即可</span>
+                        </div>
+                        <div class="ob-row">
+                            <label class="ob-lab">context-path（base-path）</label>
+                            <Input v-model="s1.ctx" style="width: 320px" placeholder="如 /notice；本地无 ctx 留空" />
+                            <span class="ob-warn-txt">⚠ 填错/漏填 ⇒ 推送全 401 无限重试，症状表现为「收不到回调」</span>
+                        </div>
+                        <div class="ob-row">
+                            <label class="ob-lab">bizType</label>
+                            <Input v-model="s1.bizTypes" style="width: 320px" placeholder="如 notice；多个用逗号分隔" />
+                            <span class="ob-tip">发起时声明的业务关联对；回调按它路由到单据行</span>
+                        </div>
+                        <div class="ob-row">
+                            <label class="ob-lab">绑定档位</label>
+                            <RadioGroup v-model="s1.bindLevel" type="button">
+                                <Radio v-for="b in BIND_LEVELS" :key="b.value" :label="b.value">{{ b.label }}</Radio>
+                            </RadioGroup>
+                            <span class="ob-tip">{{ (BIND_LEVELS.find((b) => b.value === s1.bindLevel) || {}).desc }}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- ============ STEP② 工程接入（配置生成器） ============ -->
+            <div v-show="step === 1" class="ob-body">
+                <div class="ob-card">
+                    <h3>端点形态与接入场景</h3>
+                    <div class="ob-form">
+                        <div class="ob-row">
+                            <label class="ob-lab">端点形态<i>*</i></label>
+                            <RadioGroup v-model="s2.endpointMode">
+                                <Radio label="platform">平台验签式（式 A，推荐）</Radio>
+                                <Radio label="xflw">注册级 X-Flw 式（式 B）</Radio>
+                            </RadioGroup>
+                        </div>
+                        <div class="ob-row">
+                            <label class="ob-lab">接入场景<i>*</i></label>
+                            <RadioGroup v-model="s2.scenario">
+                                <Radio label="new">新接入</Radio>
+                                <Radio label="upgrade">存量升级（已接回调）</Radio>
+                            </RadioGroup>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="ob-card">
+                    <h3>A · Maven 依赖</h3>
+                    <pre class="ob-code" :class="{ 'is-warn': s2.scenario === 'upgrade' }">{{ generatedPom }}</pre>
+                    <Button size="small" class="ob-copy" @click="copyText(generatedPom, '依赖块已复制')">复制</Button>
+                </div>
+
+                <div class="ob-card">
+                    <h3>B · yh.flow-callback 配置块（自动生成）</h3>
+                    <p class="ob-desc">按上方选择 + 第 ① 步输入实时生成，形态对齐规范 §7.2 推导式。</p>
+                    <pre class="ob-code">{{ generatedYaml }}</pre>
+                    <Button size="small" class="ob-copy" @click="copyText(generatedYaml, '配置块已复制')">复制</Button>
+                    <div v-if="s2.endpointMode === 'xflw'" class="ob-alert">
+                        ⚠ X-Flw 式端点第二段非 <code>oapi</code>，网关 TargetRouter 裸 404，<b>必须显式配 callback-url 直连</b>（规范 §7.5）
+                    </div>
+                </div>
+
+                <div class="ob-card">
+                    <h3>C · FlowCallbackHandler 骨架</h3>
+                    <pre class="ob-code">{{ generatedHandler }}</pre>
+                    <Button size="small" class="ob-copy" @click="copyText(generatedHandler, 'Handler 骨架已复制')">复制</Button>
+                </div>
+
+                <div class="ob-card">
+                    <h3>D · 前置条件清单</h3>
+                    <p class="ob-desc">把散落文档里的前置条件变成可勾选待办；红底两项是 work-leave 复盘出的高危静默断点。</p>
+                    <div class="ob-prereqs">
+                        <label v-for="p in PREREQS" :key="p.key" class="ob-prereq" :class="{ 'is-danger': p.danger }">
+                            <Checkbox v-model="prereqChecked[p.key]" />
+                            <span class="ob-prereq-t">{{ p.label }}</span>
+                            <span class="ob-prereq-tip">{{ p.tip }}</span>
+                        </label>
+                    </div>
+                    <div class="ob-row" style="margin-top: 14px">
+                        <Checkbox v-model="s2.configDone" />
+                        <span style="margin-left: 8px">我已完成上述配置部署</span>
+                        <span class="ob-tip" style="margin-left: 12px">计入第 ⑤ 步判分</span>
+                    </div>
+                </div>
+
+                <div class="ob-card">
+                    <h3>E · 避坑速查（规范 §10）</h3>
+                    <Collapse class="ob-pit">
+                        <Panel name="1">
+                            接入前必读的 10 条坑
+                            <template #content>
+                                <ol class="ob-pit-list">
+                                    <li><b>basePath 401</b>：填错/漏填 ⇒ 推送必 401 无限重试。</li>
+                                    <li><b>重复注册轮换 secret</b>：本地镜像行有效就别再 reg。</li>
+                                    <li><b>注册探活</b>：接收端点必须先上线再注册。</li>
+                                    <li><b>4xx 也无限重试</b>：流程中心只认 2xx，脏消息必须 200 吞掉。</li>
+                                    <li><b>验签用原始字节</b>：先反序列化再序列化会验签失败。</li>
+                                    <li><b>事件行与业务同事务</b>：拆开会导致重推被幂等吞掉丢单。</li>
+                                    <li><b>乱序是常态</b>：靠 instanceVersion 门 + 终态不可逆守卫。</li>
+                                    <li><b>bizId 是字符串</b>：无论数值与否都用字符串处理。</li>
+                                    <li><b>地址推导与漂移</b>：callback-url 可省略；reconcile-on-register 默认关。</li>
+                                    <li><b>待办在流程中心</b>：子应用不维护待办表，用 progress/instance 接口拉。</li>
+                                </ol>
+                            </template>
+                        </Panel>
+                    </Collapse>
+                </div>
+            </div>
+
+            <!-- ============ STEP③ 回调注册 ============ -->
+            <div v-show="step === 2" class="ob-body">
+                <div class="ob-card">
+                    <div class="fix">
+                        <h3 class="fl">登记行（{{ appRegs.length }} 条）</h3>
+                        <span class="fr">
+                            <Button size="small" :loading="regLoading" @click="loadRegs">刷新</Button>
+                            <Button size="small" type="primary" style="margin-left: 8px" @click="checkRegs">检查注册</Button>
+                            <Button size="small" style="margin-left: 8px" :loading="probing" @click="probeFirst">发一条 flow.ping</Button>
+                        </span>
+                    </div>
+                    <p class="ob-desc">
+                        登记由子应用在「管理端保存绑定」时调 <code>ensureRegistered</code> 完成，向导只检查不代注册。
+                        <span v-if="regCheckedAt">上次检查：{{ regCheckedAt }}</span>
+                    </p>
+                    <Table :columns="[
+                        { title: '流程 GUID', key: 'flowGuid', minWidth: 200 },
+                        { title: '回调地址', key: 'callbackUrl', minWidth: 240 },
+                        { title: 'base_path', key: 'basePath', width: 110, render: (h: any, p: any) => h('span', p.row.basePath || '（空）') },
+                        { title: '状态', width: 80, align: 'center', render: (h: any, p: any) => h(Tag, { color: p.row.status === 0 ? 'green' : 'gray' }, () => p.row.status === 0 ? '启用' : '停用') },
+                    ]" :data="appRegs" :loading="regLoading" size="small" max-height="260"
+                        no-data-text="该应用暂无登记行（未接入：回第②步配置后，在管理端保存绑定触发注册）" />
+                    <div v-if="regCheck.length" class="ob-results">
+                        <div v-for="(c, i) in regCheck" :key="i" class="ob-result" :class="'is-' + c.level">
+                            <b>{{ c.level === 'ok' ? '✓ 通过' : c.level === 'warn' ? '⚠ 告警' : '✗ 失败' }}</b>
+                            <span>{{ c.text }}</span>
+                            <em v-if="c.advice">建议：{{ c.advice }}</em>
+                        </div>
+                    </div>
+                    <div v-if="probeResult" class="ob-result" :class="probeResult.success ? 'is-ok' : 'is-warn'">
+                        <b>{{ probeResult.success ? '✓ 探测成功' : '⚠ 探测失败' }}</b>
+                        <span>HTTP {{ probeResult.httpStatus ?? '?' }} · 耗时 {{ probeResult.elapsedMs ?? '?' }} ms<span v-if="probeResult.respSnippet"> · 响应片段：{{ probeResult.respSnippet }}</span><span v-if="probeResult.error"> · {{ probeResult.error }}</span></span>
+                        <em v-if="!probeResult.success">401 → 查 base-path 与 trust-registry；拒连/未知主机 → 查登记地址是否网关形态</em>
+                    </div>
+                </div>
+            </div>
+
+            <!-- ============ STEP④ 流程编排 ============ -->
+            <div v-show="step === 3" class="ob-body">
+                <div class="ob-card">
+                    <h3>流程定义</h3>
+                    <p class="ob-desc">至少需要一个「已发布」流程；发起时用它的 flowGuid。</p>
+                    <Table :columns="[
+                        { title: '流程', key: 'name', minWidth: 180 },
+                        { title: 'flowGuid', key: 'flowGuid', minWidth: 200 },
+                        { title: '状态', width: 90, align: 'center', render: (h: any, p: any) => h(Tag, { color: p.row.status === 1 ? 'green' : p.row.status === 0 ? 'orange' : 'gray' }, () => DEF_STATUS[p.row.status] || p.row.status) },
+                        { title: '操作', width: 90, align: 'center', render: (h: any, p: any) => h(Button, { props: { type: 'text', size: 'small' }, on: { click: () => inspectDef(p.row.id) } }, () => '查看条件') },
+                    ]" :data="defs" :loading="defLoading" size="small" max-height="220"
+                        no-data-text="该应用无流程定义（先回第①步确认应用，或去流程定义页新建）" />
+                </div>
+
+                <div class="ob-card" v-if="condNodes.length">
+                    <h3>条件路由变量契约</h3>
+                    <p class="ob-desc">
+                        EXPRESSION 模式的判断依据就是子应用 apply 时 <code>formData</code> 的顶层键。这里把表达式引用的变量与
+                        已知键（近 50 条办件 formData 聚合 + 内置 8 个）核对 —— 引用了从未出现的键，运行时会<b>挂起</b>。
+                    </p>
+                    <div v-for="(n, i) in condNodes" :key="i" class="ob-cond">
+                        <div class="ob-cond-h">
+                            <b>{{ n.name }}</b>
+                            <Tag :color="n.judgeMode === 'EXPRESSION' ? 'blue' : 'purple'" style="margin-left: 8px">
+                                {{ n.judgeMode === 'EXPRESSION' ? '表达式' : '外部判断服务' }}
+                            </Tag>
+                            <span v-if="n.routerKey" class="ob-cond-k">routerKey = {{ n.routerKey }}</span>
+                        </div>
+                        <div v-for="(o, j) in n.outlets" :key="j" class="ob-cond-o">
+                            <span class="ob-cond-on">出口「{{ o.name }}」</span>
+                            <code class="ob-cond-e">{{ o.expr || '（无表达式）' }}</code>
+                            <span v-if="o.unknown.length" class="ob-cond-u">⚠ 引用了未在已知变量中的：<b>{{ o.unknown.join('、') }}</b> —— 疑似拼错，运行时会挂起</span>
+                            <span v-else-if="o.expr" class="ob-cond-ok">✓ 变量均在已知集合内</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="ob-card" v-else-if="selectedDefId">
+                    <p class="ob-desc">所选流程没有 CONDITION 节点（无需变量契约核对）。</p>
+                </div>
+            </div>
+
+            <!-- ============ STEP⑤ 联调验收 ============ -->
+            <div v-show="step === 4" class="ob-body">
+                <div class="ob-card">
+                    <div class="fix">
+                        <h3 class="fl">六项自检</h3>
+                        <Button class="fr" size="small" type="primary" :loading="acceptLoading" @click="runAcceptance">执行六项自检</Button>
+                    </div>
+                    <p class="ob-desc">把「手册的诊断命令集」变成按钮。1/3/5 必须通过；2/4 黄色可带病通过；6 无数据不扣分。</p>
+                    <div v-if="!acceptDone" class="ob-empty">尚未执行自检</div>
+                    <div v-else class="ob-results">
+                        <div v-for="r in accept" :key="r.no" class="ob-result" :class="'is-' + r.level">
+                            <b>{{ r.no }}. {{ r.name }} —— {{ r.level === 'ok' ? '✓ 通过' : r.level === 'warn' ? '⚠ 关注' : '✗ 失败' }}</b>
+                            <span>{{ r.detail }}</span>
+                            <em v-if="r.advice">建议：{{ r.advice }}</em>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 底部操作条 -->
+            <div class="ob-foot">
+                <Button size="large" :disabled="step === 0" @click="step > 0 && step--">上一步</Button>
+                <span class="ob-foot-r">
+                    <span v-if="step === 1 && !prereqAllDone" class="ob-foot-hint">尚有前置条件未勾选，仍可继续</span>
+                    <span v-if="step === 3 && !hasPublished" class="ob-foot-hint">尚无已发布流程，联调验收第 5 项会失败</span>
+                    <Button size="large" v-if="step < 4" type="primary" @click="goto(step + 1)">下一步</Button>
+                </span>
+            </div>
+        </div>
+
+        <!-- 接入自检报告 -->
+        <Drawer v-model="reportVisible" title="接入自检报告" :width="720" :mask-closable="false">
+            <p class="ob-desc" style="margin-bottom: 10px">纯前端拼装、不落库。可直接复制进工单或群。</p>
+            <pre class="ob-code ob-report">{{ reportText }}</pre>
+            <template #footer>
+                <Button @click="reportVisible = false">关闭</Button>
+                <Button type="primary" @click="copyText(reportText.value, '报告已复制')">复制报告</Button>
+            </template>
+        </Drawer>
+    </div>
+</template>
+
+<style scoped>
+.ob-wrap { display: flex; flex-direction: column; padding: 16px 20px; overflow: auto; }
+.ob-head { margin-bottom: 4px; }
+.ob-title { font-size: 18px; font-weight: 600; color: #17233d; }
+.ob-sub { margin-left: 14px; color: #808695; font-size: 12px; line-height: 34px; }
+
+/* 步骤条 */
+.ob-steps { display: flex; gap: 8px; margin: 14px 0 18px; }
+.ob-step { flex: 1; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #e5e6eb; border-radius: 4px; cursor: pointer; background: #fff; transition: all .15s; }
+.ob-step:hover { border-color: #2d8cf0; }
+.ob-step.is-cur { border-color: #2d8cf0; background: #f0f7ff; }
+.ob-step.is-done { opacity: .75; }
+.ob-num { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #e5e6eb; color: #515a6e; text-align: center; line-height: 24px; font-weight: 600; font-size: 13px; }
+.ob-step.is-cur .ob-num { background: #2d8cf0; color: #fff; }
+.ob-step.is-done .ob-num { background: #19a35a; color: #fff; }
+.ob-st { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
+.ob-st b { font-size: 13px; color: #17233d; }
+.ob-st em { font-style: normal; font-size: 11px; color: #98a1b3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+.ob-body { overflow: auto; }
+.ob-card { background: #fff; border: 1px solid #e5e6eb; border-radius: 4px; padding: 16px 18px; margin-bottom: 14px; }
+.ob-card h3 { font-size: 14px; color: #17233d; margin-bottom: 4px; }
+.ob-desc { color: #808695; font-size: 12px; line-height: 1.7; margin-bottom: 12px; }
+.ob-desc code { background: #f4f6f9; padding: 1px 4px; border-radius: 3px; font-family: Consolas, Menlo, monospace; }
+
+.ob-form { display: flex; flex-direction: column; gap: 14px; }
+.ob-row { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
+.ob-lab { flex: none; width: 168px; text-align: right; line-height: 32px; color: #515a6e; font-size: 13px; }
+.ob-lab i { color: #e03e3e; font-style: normal; margin-left: 2px; }
+.ob-tip { line-height: 32px; color: #98a1b3; font-size: 12px; }
+.ob-warn-txt { line-height: 32px; color: #d98106; font-size: 12px; }
+.ob-err { line-height: 32px; color: #e03e3e; font-size: 12px; }
+
+.ob-code { position: relative; background: #f7f8fa; border: 1px solid #e5e6eb; border-radius: 4px; padding: 12px 14px; font-family: Consolas, Menlo, monospace; font-size: 12px; line-height: 1.6; color: #314659; white-space: pre-wrap; word-break: break-all; margin: 0; }
+.ob-code.is-warn { background: #fff8e6; border-color: #f0d9a0; }
+.ob-copy { margin-top: 8px; }
+.ob-report { max-height: 60vh; overflow: auto; }
+.ob-alert { margin-top: 10px; background: #fff5e6; border: 1px solid #f0d9a0; border-radius: 4px; padding: 8px 12px; color: #b26a00; font-size: 12px; line-height: 1.6; }
+.ob-alert code { background: rgba(0,0,0,.06); padding: 1px 4px; border-radius: 3px; }
+
+.ob-prereqs { display: flex; flex-direction: column; gap: 10px; }
+.ob-prereq { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border: 1px solid #e5e6eb; border-radius: 4px; }
+.ob-prereq.is-danger { border-color: #f5c2c2; background: #fff5f5; }
+.ob-prereq-t { font-size: 13px; color: #314659; line-height: 20px; }
+.ob-prereq-tip { font-size: 11px; color: #98a1b3; line-height: 20px; margin-left: auto; text-align: right; max-width: 46%; }
+.ob-pit-list { padding-left: 20px; color: #515a6e; font-size: 12px; line-height: 1.9; }
+.ob-pit-list b { color: #314659; }
+
+/* 检查结果 */
+.ob-results { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
+.ob-result { border-radius: 4px; padding: 10px 12px; font-size: 12px; line-height: 1.7; border: 1px solid #e5e6eb; background: #f7f8fa; }
+.ob-result b { display: block; margin-bottom: 2px; }
+.ob-result em { display: block; font-style: normal; color: #808695; margin-top: 2px; }
+.ob-result.is-ok { background: #eefaf2; border-color: #b7e4c7; }
+.ob-result.is-ok b { color: #19a35a; }
+.ob-result.is-warn { background: #fff8e6; border-color: #f0d9a0; }
+.ob-result.is-warn b { color: #d98106; }
+.ob-result.is-bad { background: #fdecec; border-color: #f5c2c2; }
+.ob-result.is-bad b { color: #e03e3e; }
+.ob-empty { color: #98a1b3; font-size: 12px; text-align: center; padding: 30px 0; }
+
+/* 条件契约 */
+.ob-cond { border: 1px solid #e5e6eb; border-radius: 4px; padding: 12px 14px; margin-bottom: 10px; }
+.ob-cond-h { display: flex; align-items: center; margin-bottom: 8px; }
+.ob-cond-h b { font-size: 13px; color: #17233d; }
+.ob-cond-k { margin-left: auto; color: #98a1b3; font-size: 11px; font-family: Consolas, Menlo, monospace; }
+.ob-cond-o { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 0; font-size: 12px; }
+.ob-cond-on { color: #515a6e; flex: none; }
+.ob-cond-e { background: #f4f6f9; padding: 2px 6px; border-radius: 3px; font-family: Consolas, Menlo, monospace; color: #314659; }
+.ob-cond-u { color: #d98106; }
+.ob-cond-ok { color: #19a35a; }
+
+.ob-foot { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 4px; border-top: 1px solid #e5e6eb; margin-top: auto; }
+.ob-foot-r { display: flex; align-items: center; gap: 12px; }
+.ob-foot-hint { color: #d98106; font-size: 12px; }
+</style>