feat: 流程编辑器 bpmn-js 画布模式 + 引擎多出口/退回/移交/或签前端接线

- def-editor 新增画布模式（默认）：bpmn-js 内存画布（精简 palette/汉化/撤销重做/缩放/出口命名/导出 BPMN），
  toBpmn/fromBpmn 双向序列化，contentJson 仍为持久格式（+layout 坐标）；卡片模式保留回退
- 新增 utils/flowLayout.ts 分层布局（设计器与查看器共用）
- TaskHandle：多出口节点出口选择下拉；退回/移交按钮与弹窗；轨迹显示已退回/已移交及所选出口
- FlowDiagram：优先使用保存坐标；边画出口名标签；办件状态着色/当前节点高亮
- api/flow：approve 带 edgeName，新增 returnBack/transfer

src/views/flow/FlowDiagram.vue

@@ -14,73 +14,57 @@ const svgRef = ref<SVGSVGElement | null>(null);
 
 const DEF_STATUS: Record<number, string> = { 0: "草稿", 1: "已发布", 2: "停用" };
 
-// ==================== 布局常量（方案 §4.2/§4.3） ====================
-const SLOT_W = 200; // 节点槽位宽
-const SLOT_H = 88; // 节点槽位高
-const COL_GAP = 72; // 列间距（留给正交折线走线）
-const ROW_GAP = 24; // 行间距
-const PAD = 24;
+// 布局常量与拓扑分层算法在 src/utils/flowLayout.ts（与设计器画布共用）
+import { layout as autoLayout, NODE_BOX, SLOT_W, SLOT_H, COL_GAP, ROW_GAP, PAD, Pos } from "@/utils/flowLayout";
 
-const NODE_BOX: Record<string, { w: number; h: number }> = {
-    START: { w: 104, h: 40 },
-    END: { w: 104, h: 40 },
-    APPROVAL: { w: 184, h: 64 },
-    PARALLEL_SPLIT: { w: 128, h: 72 },
-    PARALLEL_JOIN: { w: 128, h: 72 },
-};
-
-interface Pos {
-    x: number;
-    y: number;
-    w: number;
-    h: number;
-    depth: number;
-    row: number;
-}
-
-/** 拓扑分层布局：Kahn 消融入边，depth(to)=max(depth(from))+1；同列按定义顺序纵排 */
-function layout(data: any): Record<string, Pos> {
-    const nodes: any[] = data?.nodes || [];
-    const edges: any[] = data?.edges || [];
-    if (!nodes.length) return {};
-    const inDeg: Record<string, number> = {};
-    nodes.forEach((n) => { inDeg[n.id] = 0; });
-    edges.forEach((e) => { if (inDeg[e.to] !== undefined) inDeg[e.to]++; });
-    const depth: Record<string, number> = {};
-    const queue = nodes.filter((n) => !inDeg[n.id]).map((n) => n.id);
-    queue.forEach((id) => { depth[id] = 0; });
-    const order = [...queue];
-    while (order.length) {
-        const id = order.shift()!;
-        edges.forEach((e) => {
-            if (e.from !== id || inDeg[e.to] === undefined) return;
-            depth[e.to] = Math.max(depth[e.to] ?? 0, (depth[id] ?? 0) + 1);
-            if (--inDeg[e.to] === 0) order.push(e.to);
+/** 位置计算：优先用设计器保存的画布坐标（vo.layout，bpmn 画布 x/y），缺坐标回退自动布局 */
+const positions = computed<Record<string, Pos>>(() => {
+    const nodes: any[] = vo.value?.nodes || [];
+    const edges: any[] = vo.value?.edges || [];
+    const saved = vo.value?.layout as Record<string, { x: number; y: number }> | undefined;
+    if (saved && Object.keys(saved).length) {
+        const pos: Record<string, Pos> = {};
+        let complete = true;
+        nodes.forEach((n, i) => {
+            const p = saved[n.id];
+            const box = NODE_BOX[n.type] || NODE_BOX.APPROVAL;
+            if (!p) {
+                complete = false;
+                return;
+            }
+            // depth 供 vbSize 估算列号（x 换算）；row 仅占位
+            pos[n.id] = { x: p.x, y: p.y, w: box.w, h: box.h, depth: 0, row: i };
         });
+        if (complete) {
+            let minX = Infinity;
+            let minY = Infinity;
+            let maxX = -Infinity;
+            let maxY = -Infinity;
+            Object.values(pos).forEach((p) => {
+                minX = Math.min(minX, p.x); minY = Math.min(minY, p.y);
+                maxX = Math.max(maxX, p.x + p.w); maxY = Math.max(maxY, p.y + p.h);
+            });
+            // 平移到与自动布局一致的留白（防设计器负坐标/超边界出血）
+            const dx = PAD - minX;
+            const dy = PAD - minY;
+            Object.values(pos).forEach((p) => { p.x += dx; p.y += dy; });
+            vbExtent.w = maxX - minX + PAD + COL_GAP + SLOT_W;
+            vbExtent.h = maxY - minY + PAD + ROW_GAP + SLOT_H;
+            return pos;
+        }
     }
-    const rowsIn: Record<number, number> = {};
-    const pos: Record<string, Pos> = {};
-    nodes.forEach((n) => {
-        const d = depth[n.id] ?? 0;
-        depth[n.id] = d;
-        const row = rowsIn[d] ?? 0;
-        rowsIn[d] = row + 1;
-        const box = NODE_BOX[n.type] || NODE_BOX.APPROVAL;
-        pos[n.id] = {
-            x: PAD + d * (SLOT_W + COL_GAP) + (SLOT_W - box.w) / 2,
-            y: PAD + row * (SLOT_H + ROW_GAP) + (SLOT_H - box.h) / 2,
-            w: box.w,
-            h: box.h,
-            depth: d,
-            row,
-        };
-    });
-    return pos;
-}
+    vbExtent.w = 0;
+    vbExtent.h = 0;
+    return autoLayout({ nodes, edges });
+});
 
-const positions = computed<Record<string, Pos>>(() => layout(vo.value));
+/** 保存坐标模式的画布总尺寸（0=未启用，回退自动布局的行列估算） */
+const vbExtent = ref({ w: 0, h: 0 });
 
 const vbSize = computed(() => {
+    if (vbExtent.value.w > 0) {
+        return { w: vbExtent.value.w, h: vbExtent.value.h };
+    }
     const ps = Object.values(positions.value);
     if (!ps.length) return { w: 480, h: 160 };
     let maxD = 0;
@@ -116,6 +100,25 @@ function diamondPoints(n: any): string {
     return `${cx},${p.y} ${p.x + p.w},${cy} ${cx},${p.y + p.h} ${p.x},${cy}`;
 }
 
+/** 节点运行时状态（instance 口径才有 state 字段） */
+function nodeState(n: any): string | null {
+    return (n.state as string) || null;
+}
+
+const STATE_STROKE: Record<string, string> = {
+    done: "#19be6b",
+    active: "#ed4014",
+    pending: "#dcdee2",
+    rejected: "#ed4014",
+};
+
+function edgeLabelAnchor(e: any) {
+    const a = positions.value[e.from];
+    const b = positions.value[e.to];
+    if (!a || !b) return null;
+    return { x: (a.x + a.w + b.x) / 2, y: (a.y + a.h / 2 + b.y + b.h / 2) / 2 };
+}
+
 function trunc(s: string | null, n: number): string {
     if (!s) return "";
     return s.length > n ? s.slice(0, n) + "…" : s;
@@ -230,18 +233,37 @@ watch(() => route.query, () => load());
                 <path v-for="(e, i) in vo.edges" :key="'edge-' + i" :d="edgePath(e)"
                       fill="none" stroke="#515a6e" stroke-width="1.5" marker-end="url(#flow-arrow)" />
 
+                <!-- 多出口连线标签（白底保证折线上可读） -->
+                <template v-for="(e, i) in vo.edges" :key="'edge-label-' + i">
+                    <template v-if="e.name && edgeLabelAnchor(e)">
+                        <g>
+                            <rect :x="edgeLabelAnchor(e)!.x - e.name.length * 6 - 6"
+                                  :y="edgeLabelAnchor(e).y - 9"
+                                  :width="e.name.length * 12 + 12" height="18"
+                                  rx="4" fill="#fff" stroke="#e8eaec" />
+                            <text :x="edgeLabelAnchor(e).x" :y="edgeLabelAnchor(e).y + 4"
+                                  text-anchor="middle" fill="#515a6e" font-size="11">{{ e.name }}</text>
+                        </g>
+                    </template>
+                </template>
+
                 <template v-for="n in vo.nodes" :key="n.id">
                     <!-- START/END：胶囊 -->
                     <g v-if="n.type === 'START' || n.type === 'END'">
                         <rect :x="pos(n).x" :y="pos(n).y" :width="pos(n).w" :height="pos(n).h"
-                              :rx="pos(n).h / 2" :fill="n.type === 'START' ? '#19be6b' : '#808695'" />
+                              :rx="pos(n).h / 2"
+                              :fill="nodeState(n) === 'active' ? '#808695'
+                                    : n.type === 'START' ? '#19be6b' : '#808695'" />
                         <text :x="pos(n).x + pos(n).w / 2" :y="pos(n).y + pos(n).h / 2 + 5"
                               text-anchor="middle" fill="#fff" font-size="13">{{ n.label }}</text>
                     </g>
                     <!-- SPLIT/JOIN：菱形 -->
                     <g v-else-if="n.type === 'PARALLEL_SPLIT' || n.type === 'PARALLEL_JOIN'">
                         <title>{{ n.subLabel || n.label }}</title>
-                        <polygon :points="diamondPoints(n)" fill="#fff8f0" stroke="#ff9900" stroke-width="1.5" />
+                        <polygon :points="diamondPoints(n)"
+                                 :fill="STATE_STROKE[nodeState(n) || ''] ? '#fff8f0' : '#fff8f0'"
+                                 :stroke="nodeState(n) === 'active' ? '#ed4014' : '#ff9900'"
+                                 stroke-width="1.5" />
                         <text :x="pos(n).x + pos(n).w / 2" :y="pos(n).y + pos(n).h / 2 + 5"
                               text-anchor="middle" fill="#e46a0a" font-size="12">{{ n.label }}</text>
                     </g>
@@ -249,7 +271,11 @@ watch(() => route.query, () => load());
                     <g v-else>
                         <title>{{ n.label }}{{ n.subLabel ? '\n' + n.subLabel : '' }}</title>
                         <rect :x="pos(n).x" :y="pos(n).y" :width="pos(n).w" :height="pos(n).h"
-                              rx="8" fill="#fff" stroke="#2d8cf0" stroke-width="1.5" />
+                              rx="8"
+                              :class="{ 'node-active': nodeState(n) === 'active' }"
+                              :fill="nodeState(n) === 'rejected' ? '#fff1f0' : '#fff'"
+                              :stroke="STATE_STROKE[nodeState(n) || ''] || '#2d8cf0'"
+                              :stroke-width="nodeState(n) === 'active' ? 2.5 : 1.5" />
                         <text :x="pos(n).x + pos(n).w / 2" :y="pos(n).y + 27"
                               text-anchor="middle" fill="#17233d" font-size="13" font-weight="600">
                             {{ trunc(n.label, 10) }}
@@ -273,4 +299,10 @@ watch(() => route.query, () => load());
 .muted { color: #999; font-size: 12px; }
 .canvas { overflow-x: auto; background: #fafafa; border: 1px solid #e8eaec; border-radius: 6px; }
 .empty { padding: 40px; text-align: center; }
+/* 当前在办节点呼吸高亮 */
+.node-active { animation: nodePulse 1.6s ease-in-out infinite; }
+@keyframes nodePulse {
+    0%, 100% { filter: none; }
+    50% { filter: drop-shadow(0 0 6px rgba(237, 64, 20, 0.8)); }
+}
 </style>

src/views/flow/TaskHandle.vue

@@ -18,6 +18,16 @@ const myTask = ref<any>(null);
 const opinion = ref("");
 const submitting = ref(false);
 
+// ===== 去向/退回/移交（本轮新增能力） =====
+/** 多出口节点可选项（detail.outlets，后端按本人待办节点的出边解析；单出口为空数组） */
+const outlets = computed<any[]>(() => detail.value?.outlets || []);
+const chosenEdge = ref("");
+const showReturn = ref(false);
+const returnTarget = ref("");
+const showTransfer = ref(false);
+const transferUser = ref("");
+const transferName = ref("");
+
 const snapshotRows = computed(() => {
     const raw = detail.value?.bizSnapshot;
     if (!raw) return [];
@@ -85,7 +95,14 @@ async function submit(approved: boolean) {
     submitting.value = true;
     try {
         if (approved) {
-            await flowApi.approve(myTaskId.value, opinion.value.trim() || undefined).send();
+            // 多出口节点必须带所选出口
+            const edgeName = outlets.value.length > 1 ? chosenEdge.value : undefined;
+            if (outlets.value.length > 1 && !edgeName) {
+                Message.warning("该节点有多个办理去向，请先选择");
+                submitting.value = false;
+                return;
+            }
+            await flowApi.approve(myTaskId.value, opinion.value.trim() || undefined, edgeName).send();
             Message.success("已同意");
         } else {
             await flowApi.reject(myTaskId.value, opinion.value.trim()).send();
@@ -98,12 +115,57 @@ async function submit(approved: boolean) {
 }
 
 function confirmApprove() {
+    if (outlets.value.length > 1 && !chosenEdge.value) {
+        Message.warning("该节点有多个办理去向，请先选择");
+        return;
+    }
     Modal.confirm({
         title: "同意该任务？",
         onOk: () => submit(true),
     });
 }
 
+// ===== 退回 =====
+function openReturn() {
+    const targets = detail.value?.returnTargets || [];
+    returnTarget.value = targets.length ? String(targets[targets.length - 1]?.nodeId || "") : "";
+    showReturn.value = true;
+}
+
+function doReturn() {
+    submitting.value = true;
+    const targets = detail.value?.returnTargets || [];
+    const known = targets.find((t: any) => String(t.nodeId) === returnTarget.value) ||
+        targets[targets.length - 1] || null;
+    flowApi.returnBack(myTaskId.value, known ? String(known.nodeId) : undefined, opinion.value.trim() || undefined)
+        .send()
+        .then(() => {
+            Message.success("已退回");
+            showReturn.value = false;
+            router.push("/workbench");
+        })
+        .finally(() => { submitting.value = false; });
+}
+
+// ===== 移交 =====
+async function doTransfer() {
+    const uid = Number(transferUser.value);
+    if (!uid || uid <= 0) {
+        Message.warning("请输入有效的移交对象工号");
+        return;
+    }
+    submitting.value = true;
+    try {
+        // 姓名由后端 AssigneeResolver 严格解析（查不到会拒绝，前端不信任输入）
+        await flowApi.transfer(myTaskId.value, uid, opinion.value.trim() || undefined).send();
+        Message.success("已移交");
+        showTransfer.value = false;
+        router.push("/workbench");
+    } finally {
+        submitting.value = false;
+    }
+}
+
 onMounted(load);
 </script>
 
@@ -147,10 +209,20 @@ onMounted(load);
         <!-- 办理区 -->
         <Card class="block" :bordered="false" dis-hover>
             <template #title>办理意见</template>
+            <div class="outlet" v-if="myTaskId && outlets.length > 1">
+                <span class="outlet-label">办理去向：</span>
+                <Select v-model="chosenEdge" size="small" style="width: 220px" placeholder="请选择办理去向">
+                    <Option v-for="o in outlets" :key="o.name" :value="o.name" :label="o.name">
+                        {{ o.name }}（{{ o.toNodeName }}）
+                    </Option>
+                </Select>
+            </div>
             <Input v-model="opinion" type="textarea" :rows="3" maxlength="500" show-word-limit
                    placeholder="同意可选填意见；拒绝必须填写意见" />
             <div class="actions" v-if="myTaskId">
                 <Button type="primary" :loading="submitting" @click="confirmApprove">同意</Button>
+                <Button :loading="submitting" @click="openReturn">退回</Button>
+                <Button :loading="submitting" @click="showTransfer = true">移交</Button>
                 <Button type="error" :loading="submitting" @click="submit(false)">拒绝</Button>
             </div>
             <div v-else class="muted">当前任务不可办理（不存在/非本人/已办理）</div>
@@ -161,14 +233,50 @@ onMounted(load);
             <template #title>流程轨迹</template>
             <Timeline>
                 <TimelineItem v-for="t in detail.trace" :key="t.taskId"
-                              :color="t.status === 1 ? 'green' : t.status === 2 ? 'red' : t.status === 0 ? 'blue' : 'gray'">
+                              :color="t.status === 1 ? 'green' : t.status === 2 ? 'red' : t.status === 0 ? 'blue' : t.status === 4 ? 'orange' : t.status === 5 ? 'cyan' : 'gray'">
                     <span class="node">{{ t.nodeName || t.nodeId }}</span>
                     <Tag size="small">{{ t.assigneeName || t.assigneeId }}</Tag>
+                    <Tag size="small" v-if="t.status === 4" color="orange">已退回</Tag>
+                    <Tag size="small" v-if="t.status === 5" color="cyan">已移交</Tag>
                     <span class="opinion" v-if="t.opinion">「{{ t.opinion }}」</span>
+                    <span class="opinion" v-if="t.edgeName">去向：{{ t.edgeName }}</span>
                     <div class="time">{{ (t.handleTime || t.arriveTime || "").replace("T", " ") }}</div>
                 </TimelineItem>
             </Timeline>
+            <Button size="small" ghost type="primary"
+                    @click="router.push(`/diagram?instanceId=${detail.instanceId}`)">查看流程图</Button>
         </Card>
+
+        <!-- 退回弹窗 -->
+        <Modal v-model="showReturn" title="退回" :width="480">
+            <div class="modal-row">
+                <span class="modal-label">退回至：</span>
+                <Select v-model="returnTarget" size="small" style="width: 240px"
+                        placeholder="缺省=最近一个已办节点">
+                    <Option value="">（最近一个已办节点）</Option>
+                    <Option v-for="t in detail.returnTargets || []" :key="t.nodeId" :value="t.nodeId"
+                            :label="t.nodeName || t.nodeId" />
+                </Select>
+            </div>
+            <div class="muted modal-tip">退回后目标节点重新生成待办；并行分支内节点不可作为退回目标。</div>
+            <template #footer>
+                <Button @click="showReturn = false">取消</Button>
+                <Button type="primary" :loading="submitting" @click="doReturn">确认退回</Button>
+            </template>
+        </Modal>
+
+        <!-- 移交弹窗 -->
+        <Modal v-model="showTransfer" title="移交" :width="480">
+            <div class="modal-row">
+                <span class="modal-label">移交对象工号：</span>
+                <Input v-model="transferUser" size="small" style="width: 200px" placeholder="对方工号（数字）" />
+            </div>
+            <div class="muted modal-tip">移交后由对方接手本任务办理；意见可在下方填写交接说明。</div>
+            <template #footer>
+                <Button @click="showTransfer = false">取消</Button>
+                <Button type="primary" :loading="submitting" @click="doTransfer">确认移交</Button>
+            </template>
+        </Modal>
     </div>
     <div v-else class="page muted">加载中…</div>
 </template>
@@ -184,6 +292,11 @@ onMounted(load);
 .biz-link { margin-top: 8px; }
 .actions { margin-top: 10px; display: flex; gap: 8px; }
 .muted { color: #999; }
+.outlet { margin-bottom: 8px; display: flex; align-items: center; }
+.outlet-label { color: #515a6e; margin-right: 6px; font-size: 13px; }
+.modal-row { display: flex; align-items: center; margin-bottom: 8px; }
+.modal-label { width: 110px; color: #515a6e; font-size: 13px; flex-shrink: 0; }
+.modal-tip { font-size: 12px; }
 .node { font-weight: 600; margin-right: 6px; }
 .opinion { color: #666; }
 .time { color: #aaa; font-size: 12px; }

src/views/flow/admin/def-editor/bpmn/custom.ts

@@ -0,0 +1,101 @@
+/**
+ * bpmn-js 定制模块：调色板/上下文垫收敛为 4 类业务节点 + 汉化。
+ * 拖拽/多选/撤销重做/缩放平移均为 bpmn-js 内建能力，此处无需实现。
+ * 调色板与上下文垫只暴露业务语义的 5 类元素（开始/结束/审批/并行分发/并行合并用同一 ParallelGateway，
+ * split/join 由 serialize.ts 以扩展属性 flowNodeType 显式标记），其余 BPMN 形状对管理员隐藏。
+ * bpmn.io 水印为协议要求，不做隐藏。
+ */
+import Modeler from "bpmn-js/lib/Modeler";
+import PaletteProvider from "bpmn-js/lib/features/palette/PaletteProvider";
+
+/** 汉化词表（palette/contextPad/常用按钮；未命中键原样透回） */
+const TRANSLATIONS: Record<string, string> = {
+    "Create StartEvent": "创建开始",
+    "Create EndEvent": "创建结束",
+    "Create Task": "创建审批节点",
+    "Create User Task": "创建审批节点",
+    "Create Gateway": "创建并行分支",
+    "Create Gateways": "创建并行分支",
+    "Create ParallelGateway": "创建并行分支",
+    "Create expanded ParallelGateway": "创建并行分支",
+    "Append anything": "追加",
+    "Change type": "变更类型",
+    "Remove element": "删除",
+    Connect: "连线",
+    "Connect to other element": "连线到其他元素",
+    "Connect using Association/Sequence/DataAssociation": "连线",
+    "Activate the global connect tool": "激活全局连线工具",
+    "Activate the create/remove space tool": "激活空间调整工具",
+    "Activate the lasso tool": "激活套索选择",
+    "Activate the hand tool": "激活平移",
+    "Activate the direct editing tool": "激活文本编辑",
+    undo: "撤销",
+    redo: "重做",
+};
+
+function createTranslateModule() {
+    return {
+        translate: [
+            "value",
+            (template: string, replacements?: Record<string, string>) => {
+                let t = TRANSLATIONS[template] || template;
+                if (replacements) {
+                    for (const [k, v] of Object.entries(replacements)) {
+                        t = t.replace(`{${k}}`, v);
+                    }
+                }
+                return t;
+            },
+        ],
+    };
+}
+
+/** 调色板收敛：仅连线工具 + 4 类节点 */
+function createPaletteModule() {
+    function CustomPaletteProvider(this: unknown, palette: unknown, create: unknown, elementFactory: unknown,
+                                   globalConnect: unknown, translate: unknown) {
+        // @ts-expect-error 继承自 bpmn-js 内部父类（js 库，无类型面板）
+        PaletteProvider.call(this, palette, create, elementFactory, globalConnect, translate);
+        this.create = create;
+        this.elementFactory = elementFactory;
+        this.globalConnect = globalConnect;
+        this.translate = translate;
+    }
+    CustomPaletteProvider.$inject = ["palette", "create", "elementFactory", "globalConnect", "translate"];
+    CustomPaletteProvider.prototype = Object.create(PaletteProvider.prototype);
+    CustomPaletteProvider.prototype.getPaletteEntries = function (this: { elementFactory: unknown } & Record<string, unknown>) {
+        const { create, elementFactory, translate, globalConnect } = this as Record<string, any>;
+        const action = (type: string, label: string, className: string) => ({
+            group: "flow",
+            className,
+            title: translate(label),
+            action: {
+                dragstart: (evt: unknown) => create.start(evt, elementFactory.createShape({ type })),
+                click: (evt: unknown) => create.start(evt, elementFactory.createShape({ type })),
+            },
+        });
+        return {
+            "lc-connect": {
+                group: "tools",
+                className: "bpmn-icon-connection-multi",
+                title: translate("连线"),
+                action: { click: (evt: unknown) => globalConnect.toggle(evt) },
+            },
+            "lc-sep": { group: "tools", separator: true },
+            "lc-start": action("bpmn:StartEvent", "创建开始", "bpmn-icon-start-event-none"),
+            "lc-end": action("bpmn:EndEvent", "创建结束", "bpmn-icon-end-event-none"),
+            "lc-task": action("bpmn:UserTask", "创建审批节点", "bpmn-icon-user-task"),
+            "lc-gateway": action("bpmn:ParallelGateway", "创建并行分支", "bpmn-icon-gateway-parallel"),
+        };
+    };
+    return { __init__: ["paletteProvider"], paletteProvider: ["type", CustomPaletteProvider] };
+}
+
+/** 创建设计器实例（调色板收敛 + 汉化；快捷键绑定 window：Ctrl+Z 撤销等） */
+export function createDesigner(container: HTMLElement): Modeler {
+    return new Modeler({
+        container,
+        keyboard: { bindTo: window },
+        additionalModules: [createPaletteModule(), createTranslateModule()],
+    });
+}

src/views/flow/admin/def-editor/bpmn/serialize.ts

@@ -0,0 +1,164 @@
+/**
+ * contentJson(+layout) ⇄ bpmn-js 内存图 双向转换（画布模式数据通道）。
+ *
+ * 设计决策（方案 §二）：BPMN XML 不作为持久化格式——contentJson 仍是唯一运行时格式，
+ * bpmn-js 仅作内存画布。节点映射：START→StartEvent / END→EndEvent / APPROVAL→UserTask /
+ * PARALLEL_SPLIT|JOIN→ParallelGateway，用扩展属性 flowNodeType 显式区分 split/join
+ * （不靠出入度推断，用户编辑连线后语义不漂移）；出边 name 即多出口按钮文案。
+ * 坐标缺失（旧定义无 layout）时用共享 flowLayout 算初始坐标。
+ */
+import { layout as autoLayout } from "@/utils/flowLayout";
+
+/** bpmn 画布尺寸（与 flowLayout 的槽位框不同——bpmn 内建元素有自己尺寸，就不指定 shape 尺寸） */
+const CANVAS_GAP_X = 96;
+const CANVAS_ROW_H = 96;
+const CANVAS_START = { x: 160, y: 160 };
+
+/** 画布模式读写接口（与后端 contentJson 同构，另含可选 layout 坐标） */
+export interface CanvasJson {
+    code: string;
+    name: string;
+    start: string;
+    nodes: Array<Record<string, unknown>>;
+    edges: Array<Record<string, unknown>>;
+    settings: Record<string, unknown>;
+    layout?: Record<string, { x: number; y: number }>;
+}
+
+const BPMN_TYPE: Record<string, string> = {
+    START: "bpmn:StartEvent",
+    END: "bpmn:EndEvent",
+    APPROVAL: "bpmn:UserTask",
+    PARALLEL_SPLIT: "bpmn:ParallelGateway",
+    PARALLEL_JOIN: "bpmn:ParallelGateway",
+};
+
+/** 把 contentJson 画到画布上（缺 layout 时自动布局） */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function toBpmn(modeler: any, def: CanvasJson): void {
+    const nodes = def.nodes || [];
+    const edges = def.edges || [];
+    // 自动布局：有保存坐标用保存坐标，否则 Kahn 分层换算为 bpmn 网格
+    let pos: Record<string, { x: number; y: number }> = def.layout || (undefined as never);
+    if (!pos || !Object.keys(pos).length) {
+        const auto = autoLayout({ nodes, edges });
+        pos = {};
+        Object.entries(auto).forEach(([id, p]) => {
+            pos![id] = { x: CANVAS_START.x + p.x + p.w / 2, y: CANVAS_START.y + p.y + p.h / 2 };
+        });
+    }
+    const modeling = modeler.get("modeling");
+    const canvas = modeler.get("canvas");
+    const root = canvas.getRootElement();
+    const byId: Record<string, unknown> = {};
+    nodes.forEach((n) => {
+        const type = BPMN_TYPE[String(n.type)];
+        if (!type) return; // 未知类型不渲染（local validate 会提示）
+        const p = pos[String(n.id)] || CANVAS_START;
+        const shape = modeling.createShape({ type }, { x: p.x, y: p.y }, root);
+        // id 必须显式落 businessObject：配置回填与跨会话稳定绑定都按 contentJson 的节点 id 走
+        // （若不设，bpmn-js 生成 Task_xxx 随机 id，二次载入时审批人/会签等配置将失配丢失）
+        // 节点名（直编可改）；split/join 语义由「载入显式类型 / 读出按出入度」两段规则维持，存储在 contentJson
+        modeling.updateProperties(shape, { id: String(n.id), name: String(n.name || "") });
+        byId[String(n.id)] = shape;
+    });
+    edges.forEach((e) => {
+        const src = byId[String(e.from)];
+        const tgt = byId[String(e.to)];
+        if (!src || !tgt) return;
+        // connect(source, target) 按规则自动建 SequenceFlow
+        const conn = modeling.connect(src, tgt);
+        if (e.name) {
+            modeling.updateProperties(conn, { name: String(e.name) });
+        }
+    });
+}
+
+/** bpmn 内存图 → {nodes,edges,layout}：遍历 elementRegistry 序列化回 contentJson 主体 */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function fromBpmn(modeler: any, base: CanvasJson, code: string, name: string): CanvasJson {
+    const registry = modeler.get("elementRegistry");
+    const all = registry.getAll();
+    const nodes: Array<Record<string, unknown>> = [];
+    const edges: Array<Record<string, unknown>> = [];
+    const layoutOut: Record<string, { x: number; y: number }> = {};
+    let startId = "";
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const nodeTypeOf = (n: any): string | null => {
+        switch (n.type) {
+            case "bpmn:StartEvent": {
+                return "START";
+            }
+            case "bpmn:EndEvent": {
+                return "END";
+            }
+            case "bpmn:UserTask": {
+                return "APPROVAL";
+            }
+            case "bpmn:ParallelGateway": {
+                // 读出推断：>1 入 = 汇聚；否则分发（存储在 contentJson，故多数载入已在 JSON 有显式类型）
+                return (n.incoming || []).length > 1 ? "PARALLEL_JOIN" : "PARALLEL_SPLIT";
+            }
+            default:
+                return null;
+        }
+    };
+    // 节点业务配置（审批人等）以 base 内容继承，这里只做几何/连线
+    all.forEach((n: any) => {
+        const type = nodeTypeOf(n);
+        if (!type) return;
+        const biz = n.businessObject || {};
+        const node: Record<string, unknown> = {
+            id: String(biz.id || n.id),
+            type,
+        };
+        if (biz.name) node.name = biz.name;
+        if (type === "APPROVAL" && base) {
+            // 审批人等业务属性：从 base 中同 id 继承（编辑连线不影响已有配置）
+            const prev = base.nodes.find((x) => String(x.id) === String(node.id));
+            if (prev) {
+                ["assignee", "countersign", "deadlineHours"].forEach((k) => {
+                    if (prev[k] !== undefined) node[k] = prev[k];
+                });
+                if (!node.name && prev.name) node.name = prev.name;
+            }
+        }
+        nodes.push(node);
+        layoutOut[String(node.id)] = { x: Math.round(n.x), y: Math.round(n.y) };
+        if (type === "START") startId = String(node.id);
+    });
+    all.forEach((n: any) => {
+        (n.outgoing || []).forEach((c: any) => {
+            if (c.type !== "bpmn:SequenceFlow") return;
+            const target = c.target;
+            if (!target) return;
+            const edge: Record<string, unknown> = {
+                from: String(n.businessObject.id || n.id),
+                to: String(target.businessObject.id || target.id),
+            };
+            if (c.businessObject?.name) edge.name = c.businessObject.name;
+            edges.push(edge);
+        });
+    });
+    if (!startId && nodes.length) {
+        throw new Error("画布缺少开始节点");
+    }
+    // 已有定义继承 settings/审批配置由 base 传入
+    return {
+        code,
+        name,
+        start: startId,
+        nodes,
+        edges,
+        settings: base?.settings || { rejectPolicy: "END_REJECTED" },
+        layout: layoutOut,
+    };
+}
+
+/** contentJson → CanvasJson（对既有 struct 直接加 layout） */
+export function toCanvasJson(contentJson: string | CanvasJson): CanvasJson {
+    if (typeof contentJson === "string") {
+        return JSON.parse(contentJson) as CanvasJson;
+    }
+    return contentJson;
+}

src/views/flow/admin/def-editor/components/ApprovalDrawer.vue

@@ -188,10 +188,7 @@ function onRemove(): void {
                     <Radio label="ANY">或签（一人同意）</Radio>
                 </RadioGroup>
                 <div class="hint">
-                    会签：每名办理人都收到任务，全部同意才通过；或签：任一人办理即通过
-                </div>
-                <div v-if="form.countersign === 'ANY'" class="hint warn">
-                    ⚠ 当前引擎尚未实现「或签」放行：节点仍会等全部办理人同意后才推进（该语义待后续版本生效）
+                    会签：每名办理人都收到任务，全部同意才通过；或签：任一人办理即通过，其余待办自动失效
                 </div>
             </div>
 

src/views/flow/admin/def-editor/components/BpmnCanvas.vue

@@ -0,0 +1,223 @@
+<script setup lang="ts">
+// bpmn-js 画布（方案 §C）：拖拽建模器，仅暴露业务 5 类元素；contentJson 为唯一持久化格式，
+// 本组件负责画布初始化、按名路由的出口命名、以及 fromBpmn 序列化。
+// bpmn.io 水印为协议要求（左下角 "Powered by bpmn.io"），勿删。
+import { onMounted, onUnmounted, ref, watch } from "vue";
+import { Message } from "view-ui-plus";
+import { createDesigner } from "../bpmn/custom";
+import { toBpmn, fromBpmn, CanvasJson } from "../bpmn/serialize";
+
+const props = defineProps<{
+    /** contentJson 字符串；空 = 新建骨架 */
+    source: string;
+}>();
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const emit = defineEmits<{ dirty: []; nodeConfig: [any, any]; edgeBusy: [] }>();
+
+const wrap = ref<HTMLDivElement | null>(null);
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let modeler: any = null;
+
+/** 选中元素（审批节点弹配置抽屉 / 连线弹命名） */
+const selected = ref<any>(null);
+
+onMounted(() => {
+    if (!wrap.value) return;
+    modeler = createDesigner(wrap.value);
+    // 选中级联：parent emit 让外层判断（APPROVAL → 打开配置抽屉；连线 → 预留命名按钮）
+    modeler.on("selection.changed", (_e: unknown) => {
+        const sel = modeler.get("selection").get();
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        selected.value = sel.length === 1 ? sel[0] : null;
+        emit("nodeConfig", selected.value, null);
+    });
+    modeler.on("connectivity-rule-violation", (evt: any) => Message.warning(String(evt?.message || "连线规则不允许")));
+    init();
+});
+
+onUnmounted(() => modeler?.destroy());
+
+async function init() {
+    try {
+        if (props.source && props.source.trim().startsWith("{")) {
+            const def = JSON.parse(props.source) as CanvasJson;
+            if (def.nodes?.length) {
+                // 已有定义：先导入最小骨架再程序化布点连线
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                await modeler.importXML(minimalXml());
+                toBpmn(modeler, { ...def, code: def.code || "", name: def.name || "" });
+                return;
+            }
+        }
+        // 新建：画默认骨架 start → 审批 → end
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        await modeler.importXML(minimalXml());
+        toBpmn(modeler, skeleton());
+    } catch (e: any) {
+        Message.error(`流程图载入失败：${e?.message || e}`);
+    }
+}
+
+/** 新建骨架（含默认审批节点，审批人可见在外层点开抽屉配置） */
+function skeleton(): CanvasJson {
+    return {
+        code: "",
+        name: "",
+        start: "start",
+        nodes: [
+            { id: "start", type: "START" },
+            { id: "n1", type: "APPROVAL", name: "步骤 1" },
+            { id: "end", type: "END" },
+        ],
+        edges: [
+            { from: "start", to: "n1" },
+            { from: "n1", to: "end" },
+        ],
+        settings: { rejectPolicy: "END_REJECTED" },
+    };
+}
+
+/** 最小合法 BPMN XML（空 process）：程序化布点用 */
+function minimalXml(): string {
+    return `<?xml version="1.0" encoding="UTF-8"?>
+<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL"
+    xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
+    xmlns:dc="http://www.omg.org/spec/DD/20100524/DC"
+    targetNamespace="http://bpmn.io/schema/bpmn">
+  <bpmn:process id="lc_process" isExecutable="true" />
+</bpmn:definitions>`;
+}
+
+watch(
+    () => props.source,
+    () => {
+        if (modeler) void init();
+    }
+);
+
+// ==================== 工具栏 ====================
+
+function zoom(delta: number) {
+    const canvas = modeler.get("canvas");
+    canvas.zoom(canvas.zoom() + delta);
+}
+
+function resetZoom() {
+    modeler.get("canvas").zoom("fit-viewport", "auto");
+}
+
+function undo() {
+    modeler.get("commandStack").undo();
+}
+
+function redo() {
+    modeler.get("commandStack").redo();
+}
+
+/** 选中连线命名（出口按钮文案）：弹 Vue 端 prompt（用 window.prompt 保实现简单） */
+function renameEdge() {
+    const sel = modeler.get("selection").get();
+    if (sel.length !== 1 || sel[0].type !== "bpmn:SequenceFlow") {
+        Message.warning("请先点击选中一条连线");
+        return;
+    }
+    const conn = sel[0];
+    const cur = conn.businessObject?.name || "";
+    const name = window.prompt("出口名称（即办理按钮文案；单出口可留空，多出口必须命名）", cur);
+    if (name === null) return;
+    modeler.get("modeling").updateProperties(conn, { name: name.trim() });
+}
+
+function exportBpmn() {
+    modeler.saveXML({ format: true }).then(({ xml }: { xml: string }) => {
+        const blob = new Blob([xml], { type: "application/xml" });
+        const a = document.createElement("a");
+        a.href = URL.createObjectURL(blob);
+        a.download = "flow.bpmn";
+        a.click();
+        setTimeout(() => URL.revokeObjectURL(a.href), 3000);
+        Message.success("已导出 BPMN 文件（不参与保存，仅备档）");
+    });
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+defineExpose({
+    /** 序列化当前画布（外层合并 code/name/settings 与审批配置） */
+    serialize: (base: CanvasJson | null, code: string, name: string): CanvasJson => {
+        return fromBpmn(modeler, base || ({} as CanvasJson), code, name);
+    },
+    /** 按 contentJson 节点 id 删除元素（卡片抽屉删除回调） */
+    removeNode: (nodeId: string) => {
+        const el = modeler.get("elementRegistry").get(nodeId);
+        if (el) modeler.get("modeling").removeElements([el]);
+    },
+    /** 更新节点名（配置抽屉确定后回写画布） */
+    renameNode: (nodeId: string, name: string) => {
+        const el = modeler.get("elementRegistry").get(nodeId);
+        if (el) modeler.get("modeling").updateProperties(el, { name });
+    },
+    commandStack: () => modeler?.get("commandStack"),
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    elementRegistry: () => (modeler ? modeler.get("elementRegistry") : null),
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    markClean: () => modeler?.get("commandStack").clear(),
+    selected: () => modeler?.get("selection").get(),
+});
+</script>
+
+<template>
+    <div class="bpmn-wrap">
+        <div class="bpmn-toolbar">
+            <Button size="small" @click="undo">撤销</Button>
+            <Button size="small" @click="redo">重做</Button>
+            <span class="sep" />
+            <Button size="small" @click="zoom(-0.1)">−</Button>
+            <Button size="small" @click="resetZoom">复位</Button>
+            <Button size="small" @click="zoom(0.1)">＋</Button>
+            <span class="sep" />
+            <Button size="small" @click="renameEdge">出口命名</Button>
+            <Button size="small" @click="exportBpmn">导出 BPMN</Button>
+            <span class="tip">左侧工具栏拖入节点 · 选中审批节点配置 · 选中连线命名出口（多出口必填）</span>
+        </div>
+        <div ref="wrap" class="bpmn-container" />
+    </div>
+</template>
+
+<style scoped>
+.bpmn-wrap {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    background: #fafafa;
+}
+.bpmn-toolbar {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 12px;
+    background: #fff;
+    border-bottom: 1px solid #e8eaec;
+    z-index: 5;
+}
+.sep {
+    width: 1px;
+    height: 20px;
+    background: #e8eaec;
+    margin: 0 4px;
+}
+.tip {
+    color: #a5abb8;
+    font-size: 12px;
+    margin-left: auto;
+}
+.bpmn-container {
+    flex: 1;
+    min-height: 380px;
+}
+/* bpmn.io 水印按协议保留 */
+.bpmn-container :deep(.bjs-powered-by) {
+    display: block;
+}
+</style>

src/views/flow/admin/def-editor/index.vue

@@ -31,6 +31,7 @@ import NodeList from "./components/NodeList.vue";
 import ApprovalDrawer from "./components/ApprovalDrawer.vue";
 import SettingsDrawer from "./components/SettingsDrawer.vue";
 import JsonDrawer from "./components/JsonDrawer.vue";
+import BpmnCanvas from "./components/BpmnCanvas.vue";
 
 const route = useRoute();
 const router = useRouter();
@@ -53,6 +54,64 @@ const depts = reactive<DeptOption[]>([]);
 /** userId → 姓名快照（mapLookupUser 检索补全，失败降级 #id） */
 const userNames = reactive<Record<number, string>>({});
 
+// ==================== 画布模式（默认）：bpmn-js 建模任意 DAG ====================
+/** 编辑形态：canvas=bpmn-js 画布（支持多出口/跨段连线），cards=卡片流（保留回退） */
+const editMode = ref<"canvas" | "cards">("canvas");
+const bpmnWrap = ref<InstanceType<typeof BpmnCanvas> | null>(null);
+/** 画布数据基准（载入时的 contentJson，供配置按 id 继承） */
+const canvasBase = ref<any>(null);
+/** 画布上审批节点的配置快照（element id → ApprovalNode 配置），点卡片写入，保存时并入 nodes */
+const canvasConfigs = reactive<Record<string, any>>({});
+/** 原始 contentJson 快照（画布脏检查基准） */
+const sourceJson = ref("");
+
+function onCanvasNode(_el: any): void {
+    // selection.changed 自画布 emit：选中审批节点 → 打开配置抽屉
+    if (!_el || _el.type !== "bpmn:UserTask") return;
+    const id = String(_el.businessObject.id || _el.id);
+    const baseNode = (canvasBase.value?.nodes || []).find((n: any) => n.id === id) || {};
+    if (!canvasConfigs[id]) {
+        canvasConfigs[id] = {
+            uid: id,
+            kind: "approval",
+            name: _el.businessObject.name || baseNode.name || "审批",
+            assignee: baseNode.assignee || null,
+            countersign: baseNode.countersign || "ALL",
+            deadlineHours: baseNode.deadlineHours || null,
+        };
+    }
+    editingUid.value = id;
+    nodeDrawer.value = true;
+}
+
+function canvasRemoveNode(uid: string): void {
+    bpmnWrap.value?.removeNode(uid);
+    delete canvasConfigs[uid];
+}
+
+/** 画布模式序列化：画布 → contentJson（叠加 code/name/settings 与审批配置） */
+function serializeCanvas(): string {
+    const canvasJson = bpmnWrap.value?.serialize(
+        canvasBase.value,
+        model.code.trim(),
+        model.name.trim()
+    );
+    if (!canvasJson) return "";
+    // 配置并入：canvasConfigs 以 element id 为键覆盖审批节点业务属性
+    canvasJson.nodes.forEach((n: any) => {
+        const cfg = canvasConfigs[String(n.id)];
+        if (cfg && n.type === "APPROVAL") {
+            n.name = cfg.name || n.name;
+            if (cfg.assignee) n.assignee = cfg.assignee;
+            if (cfg.countersign && cfg.countersign !== "ALL") n.countersign = cfg.countersign;
+            if (cfg.deadlineHours) n.deadlineHours = cfg.deadlineHours;
+        }
+    });
+    canvasJson.settings = { rejectPolicy: "END_REJECTED" };
+    void model.settings; // 设置抽屉暂绑定卡模型（画布模式直接采用卡模型设置）
+    return JSON.stringify(canvasJson);
+}
+
 const issues = computed<Issue[]>(() => validateModel(model, depts));
 const defJson = computed(() => toContentJson(model));
 
@@ -67,6 +126,9 @@ const jsonDrawer = ref(false);
 const editingUid = ref("");
 
 const editingNode = computed<ApprovalNode | null>(() => {
+    if (editMode.value === "canvas") {
+        return canvasConfigs[editingUid.value] || null;
+    }
     const item = editingUid.value ? findItem(model, editingUid.value) : null;
     return item && item.kind === "approval" ? item : null;
 });
@@ -137,10 +199,20 @@ async function load(): Promise<void> {
         sourceVersion.value = d?.version ?? 0;
         model.code = d?.code || "";
         model.name = d?.name || "";
+        sourceJson.value = d?.contentJson || "{}";
+        try {
+            canvasBase.value = fromContentJson(JSON.parse(d?.contentJson || "{}")) as any;
+        } catch {
+            // 解析失败仍保留原始 JSON 供画布直接读取（fromContentJson 卡片树可能不支持）
+            canvasBase.value = JSON.parse(d?.contentJson || "{}");
+        }
         try {
             applyParsed(fromContentJson(JSON.parse(d?.contentJson || "{}")));
         } catch (e: any) {
-            Message.error(`既有定义无法还原为卡片视图：${e?.message || e}。请改用源码模式编辑。`);
+            // 画布模式可编辑管线不支持的结构（多出口等），不再强制卡片树还原
+            if (editMode.value === "cards") {
+                Message.error(`既有定义无法还原为卡片视图：${e?.message || e}。请切换画布模式编辑。`);
+            }
         }
         await resolveUserNames();
         savedSnapshot.value = currentSnapshot.value;
@@ -171,6 +243,10 @@ function openNode(uid: string): void {
 }
 
 function removeNode(uid: string): void {
+    if (editMode.value === "canvas") {
+        canvasRemoveNode(uid);
+        return;
+    }
     const siblings = containerOfItem(uid);
     if (siblings && siblings.length <= 1) {
         Message.warning("每个流程/分支至少保留一个节点");
@@ -236,10 +312,25 @@ async function onSave(): Promise<void> {
         return;
     }
     const errors = countErrors(issues.value);
-    if (errors.length) {
+    if (errors.length && editMode.value === "cards") {
         Message.error(`校验未通过：${errors[0].text}`);
         return;
     }
+    let content: string;
+    if (editMode.value === "canvas") {
+        content = serializeCanvas();
+        const problems = checkCanvas(content);
+        if (problems.length) {
+            Message.error(problems[0]);
+            return;
+        }
+        if (!content || content === "{}") {
+            Message.warning("画布为空，无法保存");
+            return;
+        }
+    } else {
+        content = JSON.stringify(toContentJson(model));
+    }
     saving.value = true;
     try {
         // code/name 同时出现在 body 与 contentJson 且取值同源，规避 contentJson 静默覆盖行字段的既有坑
@@ -247,7 +338,7 @@ async function onSave(): Promise<void> {
             id: editId.value || undefined,
             code: model.code.trim(),
             name: model.name.trim(),
-            contentJson: JSON.stringify(toContentJson(model)),
+            contentJson: content,
             baseGuid: baseGuid.value || undefined,
         }).send();
         savedSnapshot.value = currentSnapshot.value;
@@ -258,6 +349,72 @@ async function onSave(): Promise<void> {
     }
 }
 
+/** 画布产物轻校验（保存前拦截；结构完整校验仍以发布期 DefValidator 为准） */
+function checkCanvas(content: string): string[] {
+    const problems: string[] = [];
+    let def: any;
+    try {
+        def = JSON.parse(content);
+    } catch {
+        return ["画布数据序列化失败，请重试"];
+    }
+    const nodes = def.nodes || [];
+    const edges = def.edges || [];
+    const nodeIds = new Set(nodes.map((n: any) => n.id));
+    if (nodes.filter((n: any) => n.type === "START").length !== 1) {
+        problems.push("画布必须有且仅有 1 个开始节点");
+    }
+    if (nodes.filter((n: any) => n.type === "END").length !== 1) {
+        problems.push("画布必须有且仅有 1 个结束节点");
+    }
+    nodes.forEach((n: any) => {
+        if (n.type === "APPROVAL") {
+            if (!n.name) problems.push("审批节点未命名");
+            if (!n.assignee) problems.push("审批节点「" + (n.name || n.id) + "」缺少审批人配置");
+        }
+    });
+    edges.forEach((e: any) => {
+        if (!nodeIds.has(e.to) || !nodeIds.has(e.from)) {
+            problems.push("存在指向缺失节点的连线，请放置后重画");
+        }
+    });
+    // 多出口命名（镜像后端 DefValidator.validateOutlets 口径）
+    const outNames: Record<string, Set<string>> = {};
+    edges.forEach((e: any) => {
+        (outNames[e.from] = outNames[e.from] || new Set()).add(e.name || "");
+    });
+    nodes.forEach((n: any) => {
+        const outs = edges.filter((e: any) => e.from === n.id);
+        if (n.type === "APPROVAL" && outs.length > 1) {
+            outs.forEach((e: any) => {
+                if (!e.name?.trim()) problems.push(`多出口节点「${n.name || n.id}」每个出口必须命名（按钮文案）`);
+            });
+            outNames[n.id]?.forEach((x) => {
+                // 重复名展示一次即可
+            });
+        }
+    });
+    // 可达性（simple BFS from start，无孤儿）
+    const start = def.start;
+    if (start) {
+        const seen = new Set([start]);
+        const queue = [start];
+        while (queue.length) {
+            const cur = queue.shift()!;
+            edges.forEach((e: any) => {
+                if (e.from === cur && nodeIds.has(e.to) && !seen.has(e.to)) {
+                    seen.add(e.to);
+                    queue.push(e.to);
+                }
+            });
+        }
+        nodes.forEach((n: any) => {
+            if (!seen.has(n.id)) problems.push(`从开始不可达的节点：${n.name || n.id}`);
+        });
+    }
+    return [...new Set(problems)];
+}
+
 function onOpenDiagram(): void {
     if (!editId.value) return;
     const href = router.resolve({ path: "/diagram", query: { defId: String(editId.value), mode: "auto" } }).href;
@@ -332,6 +489,10 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
                 </label>
             </div>
             <div class="hd-right">
+                <RadioGroup v-model="editMode" size="small" type="button">
+                    <Radio label="canvas">画布</Radio>
+                    <Radio label="cards">卡片</Radio>
+                </RadioGroup>
                 <Button @click="settingsDrawer = true">流程设置</Button>
                 <Button @click="jsonDrawer = true">源码</Button>
                 <Button :disabled="!editId" @click="onOpenDiagram">图示预览</Button>
@@ -339,7 +500,11 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
             </div>
         </header>
 
-        <main v-if="!loading" class="ed-canvas">
+        <!-- 画布模式：bpmn-js 建模（多出口/并联/退回环路均可画） -->
+        <BpmnCanvas v-if="!loading && editMode === 'canvas'" ref="bpmnWrap"
+                    :source="sourceJson" @node-config="onCanvasNode" />
+
+        <main v-if="!loading && editMode === 'cards'" class="ed-canvas">
             <div class="ed-hint">点击卡片配置节点 · 悬停虚线处 ＋ 插入节点（审批 / 并行分支）</div>
             <div class="ed-flow">
                 <div class="capsule start">发起开始</div>
@@ -347,7 +512,7 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
                 <div class="capsule end">流程结束</div>
             </div>
         </main>
-        <main v-else class="ed-canvas loading">
+        <main v-else-if="loading" class="ed-canvas loading">
             <Spin size="large" fix />
         </main>