@yss123/cage-cli 0.2.0 → 0.3.1

package/graph-ui/approval-flow.js

@@ -0,0 +1,185 @@
+import { layoutStructuredApproval } from './approval-parallel.js';
+/**
+ * 按中英文近似字宽换行，返回完整文字行；不是浏览器字体精确测量。
+ */
+export function wrapApprovalText(text, limit) {
+    const lines = [];
+    let line = '', length = 0;
+    for (const char of text) {
+        const width = /[\u0000-\u00ff]/.test(char) ? 0.55 : 1;
+        if (length + width > limit && line) {
+            lines.push(line);
+            line = '';
+            length = 0;
+        }
+        line += char;
+        length += width;
+    }
+    if (line)
+        lines.push(line);
+    return lines;
+}
+/** 结构化条件或并行需要递归布局；只有原始平面顺序组时沿用既有紧凑图。 */
+export function hasStructuredApproval(groups) {
+    return groups.some(group => !!group.parallel || !!group.groups);
+}
+/** 标题只在存在真实 AND 容器时说明同时启动，嵌套 when 本身仍是条件顺序而非并行。 */
+function hasParallel(groups) {
+    return groups.some(group => !!group.parallel || (group.groups && hasParallel(group.groups)));
+}
+/** 审批始终在容器内纵向阅读，外部主流程可以横排。先测量再参与全图布局，
+ * 条件与审批步骤都不会越出容器，跳过线在侧边汇合后才进入下一条条件。 */
+/**
+ * 测量审批标题、条件与步骤，侧边跳过分支在进入后续组之前汇合。
+ * @param flow 静态审批阅读投影。
+ * @param name 容器中文标题。
+ * @returns 相对坐标、文本行与连线；不读取具体审批任务。
+ */
+export function layoutApprovalFlow(flow, name) {
+    if (hasStructuredApproval(flow.groups))
+        return layoutStructuredApproval(flow, name);
+    const title = wrapApprovalText(name, 18);
+    const boxes = [];
+    const paths = [];
+    const merges = [];
+    const axis = 174, left = 50, width = 248, bypass = 352;
+    let y = 54 + title.length * 20;
+    let previous;
+    /**
+     * 从上一个框的出口连接到目标 y，首个框没有前驱时不产生空悬连线。
+     */
+    const connect = (to, label) => {
+        if (previous !== undefined)
+            paths.push({ d: `M${axis},${previous} V${to}`, label, x: axis + 17, y: (previous + to) / 2 + 4 });
+    };
+    /**
+     * 测量任务标题、选人与规则，推进纵向游标并连接前驱；条件组首任务可标记“是”分支。
+     */
+    const addTask = (task, firstLabel) => {
+        const title = wrapApprovalText(task.title, 14), actor = wrapApprovalText(`审批人：${task.actor}`, 19), rule = wrapApprovalText(task.rule, 18);
+        const height = 18 + title.length * 18 + actor.length * 16 + rule.length * 16;
+        connect(y, firstLabel);
+        boxes.push({ kind: 'task', x: left, y, width, height, title, actor, rule, task });
+        previous = y + height;
+        y = previous + 24;
+    };
+    for (const group of flow.groups) {
+        if (!group.condition) {
+            group.tasks.forEach((task) => addTask(task));
+            continue;
+        }
+        const title = wrapApprovalText(`${group.condition}？`, 13);
+        const height = Math.max(64, title.length * 36);
+        connect(y);
+        const top = y;
+        boxes.push({ kind: 'condition', x: left, y, width, height, title, actor: [], rule: [] });
+        previous = y + height;
+        y = previous + 28;
+        group.tasks.forEach((task, index) => addTask(task, index === 0 ? '是' : undefined));
+        const merge = y - 4;
+        paths.push({
+            d: `M${left + width},${top + height / 2} H${bypass} V${merge} H${axis}`,
+            label: '否 · 跳过',
+            x: bypass,
+            y: (top + height / 2 + merge) / 2,
+            skip: true,
+        });
+        connect(merge);
+        merges.push({ x: axis, y: merge });
+        previous = merge;
+        y = merge + 24;
+    }
+    if (previous !== undefined)
+        connect(y + 2);
+    const footer = y + 20;
+    return { flow, title, width: 400, height: footer + (flow.route ? 52 : 60), boxes, paths, merges, footer };
+}
+/**
+ * 按预先测量结果创建 SVG 子图。
+ * @param layout layoutApprovalFlow 的结果。
+ * @returns 未挂载 g 元素；文本使用 textContent，不执行审批或请求数据。
+ */
+export function renderApprovalFlow(layout) {
+    const vector = (tag, attrs, text = '') => {
+        const node = document.createElementNS('http://www.w3.org/2000/svg', tag);
+        for (const [key, value] of Object.entries(attrs))
+            node.setAttribute(key, String(value));
+        node.textContent = text;
+        return node;
+    };
+    const content = vector('g', { class: 'approval-flow-content' });
+    const text = (x, y, value, className, anchor = 'middle') => vector('text', { x, y, class: className, 'text-anchor': anchor }, value);
+    layout.title.forEach((line, index) => content.append(text(24, 31 + index * 20, line, 'approval-flow-title', 'start')));
+    content.append(text(24, 32 + layout.title.length * 20, !layout.flow.route
+        ? '审批步骤待补充 · 点击查看声明'
+        : hasParallel(layout.flow.groups)
+            ? '分支同时启动 · 全部分支完成后汇合'
+            : layout.flow.groups.some((group) => group.condition)
+                ? '按顺序审批 · 条件满足时加审'
+                : '按顺序审批 · 每一步通过后继续', 'approval-flow-subtitle', 'start'));
+    for (const path of layout.paths) {
+        content.append(vector('path', {
+            d: path.d,
+            class: `approval-flow-line${path.skip ? ' skip' : ''}`,
+            'marker-end': 'url(#flow-arrow)',
+        }));
+        if (path.label) {
+            if (path.skip)
+                content.append(vector('rect', {
+                    x: path.x - 33,
+                    y: path.y - 12,
+                    width: 66,
+                    height: 23,
+                    rx: 4,
+                    class: 'approval-flow-label-box',
+                }));
+            content.append(text(path.x, path.y + (path.skip ? 4 : 0), path.label, 'approval-flow-branch'));
+        }
+    }
+    for (const box of layout.boxes) {
+        const item = vector('g', { class: `approval-flow-${box.kind}`, 'data-approval-kind': box.kind });
+        if (box.kind === 'condition') {
+            item.append(vector('path', {
+                d: `M${box.x + box.width / 2},${box.y} L${box.x + box.width},${box.y + box.height / 2} L${box.x + box.width / 2},${box.y + box.height} L${box.x},${box.y + box.height / 2}Z`,
+                class: 'approval-condition-shape',
+            }));
+            box.title.forEach((line, index) => item.append(text(box.x + box.width / 2, box.y + box.height / 2 + 4 + (index - (box.title.length - 1) / 2) * 16, line, 'approval-condition-title')));
+        }
+        else if (box.kind === 'task') {
+            item.append(vector('rect', {
+                x: box.x,
+                y: box.y,
+                width: box.width,
+                height: box.height,
+                rx: 6,
+                class: 'approval-task-shape',
+            }));
+            item.append(vector('circle', { cx: box.x - 19, cy: box.y + 20, r: 11, class: 'approval-task-number-shape' }));
+            item.append(text(box.x - 19, box.y + 24, String(box.task.number).padStart(2, '0'), 'approval-task-number'));
+            const center = box.x + box.width / 2;
+            box.title.forEach((line, index) => item.append(text(center, box.y + 23 + index * 18, line, 'approval-task-title')));
+            box.actor.forEach((line, index) => item.append(text(center, box.y + 24 + box.title.length * 18 + index * 16, line, 'approval-task-actor')));
+            box.rule.forEach((line, index) => item.append(text(center, box.y + 24 + box.title.length * 18 + box.actor.length * 16 + index * 16, line, 'approval-task-rule')));
+        }
+        else {
+            // 网关与分支标题不冒充可审批任务，也不显示全局序号；AND 的两条入口/出口由真实布局路径表达。
+            const gateway = box.kind === 'fork' || box.kind === 'join';
+            item.append(vector('rect', { x: box.x, y: box.y, width: box.width, height: box.height,
+                rx: gateway ? 3 : 8, class: gateway ? 'approval-gateway-shape' : 'approval-branch-shape' }));
+            box.title.forEach((line, index) => item.append(text(box.x + box.width / 2, box.y + (box.height - box.title.length * 17) / 2 + 13 + index * 17, line, gateway ? 'approval-gateway-title' : 'approval-task-title')));
+        }
+        content.append(item);
+    }
+    for (const merge of layout.merges)
+        content.append(vector('circle', { cx: merge.x, cy: merge.y, r: 3, class: 'approval-flow-merge' }));
+    if (layout.flow.route) {
+        content.append(text(layout.width / 2, layout.footer, '所需步骤全部通过 → 继续后续业务', 'approval-flow-outcome'));
+        content.append(text(layout.width / 2, layout.footer + 21, '任一步骤驳回 → 结束本轮审批', 'approval-flow-rejection'));
+        content.append(text(layout.width / 2, layout.footer + 40, '点击查看审批规则与实现代码', 'approval-flow-hint'));
+    }
+    else {
+        content.append(text(layout.width / 2, layout.footer, '未抽取到绑定的审批步骤', 'approval-flow-outcome'));
+        content.append(text(layout.width / 2, layout.footer + 22, '点击查看审批声明或外部流程配置', 'approval-flow-hint'));
+    }
+    return content;
+}

package/graph-ui/approval-parallel.js

@@ -0,0 +1,110 @@
+import { wrapApprovalText } from './approval-flow.js';
+/** 创建空容器；空条件分支仍有一条可连接直线，不假造审批节点或已经运行的票。 */
+function fragment(width = 348, height = 0) {
+    return { width, height, axis: width / 2, boxes: [], paths: [], merges: [] };
+}
+/**
+ * 把已测量子图复制平移到父图，路径坐标只由本模块产生的 M/L/H/V 绝对指令转换。
+ * 不改源片段，递归兄弟分支共享文本对象也不会互相污染；标题与输入不拼入 SVG path。
+ */
+function append(parent, child, dx, dy) {
+    parent.boxes.push(...child.boxes.map(box => ({ ...box, x: box.x + dx, y: box.y + dy })));
+    for (const path of child.paths)
+        parent.paths.push({ ...path,
+            d: path.d.replace(/([ML])(-?[\d.]+),(-?[\d.]+)|([HV])(-?[\d.]+)/g, (_match, point, x, y, axis, value) => point ? `${point}${Number(x) + dx},${Number(y) + dy}` : `${axis}${Number(value) + (axis === 'H' ? dx : dy)}`),
+            ...(path.x === undefined ? {} : { x: path.x + dx }), ...(path.y === undefined ? {} : { y: path.y + dy }) });
+    parent.merges.push(...child.merges.map(point => ({ x: point.x + dx, y: point.y + dy })));
+}
+/** 把一个审批叶节点测量成普通任务框；编号只是声明定位，不决定并行分支的实际运行顺序。 */
+function taskFragment(task) {
+    const title = wrapApprovalText(task.title, 14), actor = wrapApprovalText(`审批人：${task.actor}`, 19), rule = wrapApprovalText(task.rule, 18);
+    const height = 18 + title.length * 18 + actor.length * 16 + rule.length * 16, result = fragment(348, height);
+    result.boxes.push({ kind: 'task', x: 50, y: 0, width: 248, height, title, actor, rule, task });
+    return result;
+}
+/** 各顺序子片段在最大宽度中心对齐，连接只经过相邻片段之间的空隙。 */
+function sequence(parts) {
+    // 条件旁路使子图左右不对称，按中心轴两侧的最大占用测量，不能只取原始 width 后居中导致右侧越界。
+    const result = fragment(Math.max(348, ...parts.map(part => 2 * Math.max(part.axis, part.width - part.axis))));
+    if (!parts.length) {
+        result.height = 20;
+        result.paths.push({ d: `M${result.axis},0 V20` });
+        return result;
+    }
+    for (const [index, part] of parts.entries()) {
+        if (index) {
+            result.paths.push({ d: `M${result.axis},${result.height} V${result.height + 28}` });
+            result.height += 28;
+        }
+        append(result, part, result.axis - part.axis, result.height);
+        result.height += part.height;
+    }
+    return result;
+}
+/**
+ * 条件未满足的路径在整个子树外侧绕行并汇合，包含并行网关时也不能跳过一半后进入内部支路。
+ * 中心轴保持子树入口，额外宽度只用于右侧旁路；祖先会按 axis 平移，避免嵌套时斜穿节点。
+ */
+function conditional(body, condition) {
+    const result = fragment(body.width + 76), title = wrapApprovalText(`${condition}？`, 13), height = Math.max(64, title.length * 36);
+    result.axis = body.axis;
+    result.boxes.push({ kind: 'condition', x: result.axis - 124, y: 0, width: 248, height, title, actor: [], rule: [] });
+    const top = height + 30, merge = top + body.height + 26;
+    append(result, body, 0, top);
+    result.paths.push({ d: `M${result.axis},${height} V${top}`, label: '是', x: result.axis + 16, y: height + 18 }, { d: `M${result.axis},${top + body.height} V${merge}` }, { d: `M${result.axis + 124},${height / 2} H${body.width + 38} V${merge} H${result.axis}`,
+        label: '否 · 跳过', x: body.width + 38, y: (height / 2 + merge) / 2, skip: true });
+    result.merges.push({ x: result.axis, y: merge });
+    result.height = merge;
+    return result;
+}
+/**
+ * 并行分支分别测量，入口共享同一 fork，出口统一接 join；短分支等待线停留在自己通道内。
+ * 分支内部可以有条件或嵌套并行，所有子树完成后才绘制后续出口，不把任一分支画成可独自通过。
+ */
+function parallelFragment(parallel) {
+    const branches = parallel.branches.map(branch => ({ title: wrapApprovalText(branch.title, 14), body: groupsFragment(branch.groups) }));
+    const gap = 30, width = branches.reduce((sum, branch) => sum + branch.body.width, 0) + gap * (branches.length - 1);
+    const result = fragment(Math.max(348, width)), title = wrapApprovalText(`${parallel.title} · AND 分叉`, 24), forkHeight = 20 + title.length * 17;
+    result.boxes.push({ kind: 'fork', x: result.axis - 150, y: 0, width: 300, height: forkHeight, title, actor: [], rule: [] });
+    const splitY = forkHeight + 20, branchTop = splitY + 20;
+    let dx = 0, bottom = branchTop;
+    const ends = [];
+    for (const branch of branches) {
+        const axis = dx + branch.body.axis, labelHeight = 16 + branch.title.length * 17;
+        result.boxes.push({ kind: 'branch', x: axis - 124, y: branchTop, width: 248, height: labelHeight,
+            title: branch.title, actor: [], rule: [] });
+        const bodyTop = branchTop + labelHeight + 24;
+        result.paths.push({ d: `M${result.axis},${forkHeight} V${splitY} H${axis} V${branchTop}` }, { d: `M${axis},${branchTop + labelHeight} V${bodyTop}` });
+        append(result, branch.body, dx, bodyTop);
+        const end = bodyTop + branch.body.height;
+        ends.push({ x: axis, y: end });
+        bottom = Math.max(bottom, end);
+        dx += branch.body.width + gap;
+    }
+    const mergeY = bottom + 24, joinY = mergeY + 20, joinHeight = 40;
+    for (const end of ends)
+        result.paths.push({ d: `M${end.x},${end.y} V${mergeY} H${result.axis} V${joinY}` });
+    result.boxes.push({ kind: 'join', x: result.axis - 150, y: joinY, width: 300, height: joinHeight,
+        title: ['AND 汇合 · 等待全部活动分支'], actor: [], rule: [] });
+    result.height = joinY + joinHeight;
+    return result;
+}
+/** 将保留的声明组递归转换为几何，条件包裹整个子树，parallel 和普通 tasks 不混为串行。 */
+function groupsFragment(groups) {
+    return sequence(groups.map(group => {
+        const body = group.parallel ? parallelFragment(group.parallel) : group.groups ? groupsFragment(group.groups) : sequence(group.tasks.map(taskFragment));
+        return group.condition ? conditional(body, group.condition) : body;
+    }));
+}
+/**
+ * 为带嵌套容器的审批投影生成完整布局；外层主流程使用返回宽高避免与邻接业务节点重叠。
+ * 结构输入由已校验声明派生；此处不重新执行条件，也不猜测当前实例哪些分支已跳过。
+ */
+export function layoutStructuredApproval(flow, name) {
+    const title = wrapApprovalText(name, 18), body = groupsFragment(flow.groups), top = 64 + title.length * 20;
+    const framed = fragment(body.width + 52);
+    append(framed, body, 26, top);
+    const footer = top + body.height + 42;
+    framed.paths.push({ d: `M${26 + body.axis},${top + body.height} V${footer - 16}` });
+    return { flow, title, width: framed.width, height: footer + 60, boxes: framed.boxes, paths: framed.paths, merges: framed.merges, footer };
+}

package/graph-ui/approval-tree.js

@@ -0,0 +1,17 @@
+/**
+ * 审批声明 JSON 的只读结构与遍历工具，供本体抽取、字段关系说明和静态流程图共同消费。
+ * 仅遍历 when、parallel 和 branch 保留的声明树，不执行条件、选人、审批引擎或实际实例状态。
+ * 浏览器可引用这些类型和纯函数，不引入 approval 运行时；标题和依赖始终来自抽取快照。
+ */
+/**
+ * 按声明的深度优先次序遍历全部节点，保留容器供条件解释使用，分支本身不是可执行步骤。
+ * 本函数不排序或改写源树；声明深度/数量由注册器限制，序号只能作为静态定位，不能当执行先后。
+ */
+export function approvalRouteNodes(nodes) {
+    return nodes.flatMap(node => [node, ...(node.kind === 'when' ? approvalRouteNodes(node.steps) :
+            node.kind === 'parallel' ? node.branches.flatMap(branch => approvalRouteNodes(branch.nodes)) : [])]);
+}
+/** 收集全部人工/AI 叶节点，用于取证与选人依赖；并行结构仍需由调用方从原树单独保留。 */
+export function approvalRouteSteps(nodes) {
+    return approvalRouteNodes(nodes).filter((node) => node.kind === 'step' || node.kind === 'ai');
+}