三面拆分⑭:纯编排第三轮 —— 活动卸岗位、卡点废除全真边、边号 E1–En 图上可选

活动契约不带负责人岗位(用户定):
- schema:活动节点删 owner(审批点的 approver 是「卡到人的工位」的功能语义,保留)
- 运行时:活动任务默认**全员轮值**(在岗候选并集、最闲者先、staffId 稳定排序,
  owner-resolved 事件岗位记「(全员轮值)」);运营分派机制落地后让位 —— 债已记
- closure:活动点不核岗位,missing-owner-position 只出自审批点
- 员工面链条:活动点报**实际承接人**(实例→任务→人),没起的如实报「轮值待派」;
  NodeInstance 公开 taskId/approvalId(店面读回,与端口型合流)
- 画布/导出依赖文件/属性卡全线摘岗位;属性卡活动点明说「分派归运营」

卡点画法废除,顺序流一律真边(用户定):
- 种子图重画:四条回跳/直达(E4 直接定价、E6 选型后定价、E10 不通过、E12 有异议)
  全部画成折线真边,车道分层零交叉(顶 y30 / y190 / y230 / 缝隙对开 / 底 y380);
  卡点节点删净,图=恰 10 语义节点 + 14 真边一一对应(测试守着)
- graph-to-pkg 卡点认亲机制删除;pkg-to-graph 直接按 from→to 认亲
- 元素盘删卡点件;图例、属性卡卡点分支、kindLabel/kindTone 随删

边号 E1、E2…(用户定):
- 语义边 id 即边号:种子 E1–E14;合并器铸号(旧边保号、新边取下一空号,回归测试守着)
- 画布线标带号(`E3 直接寻源`,无注记的边也标 `E1`);拣选条以边号立牌,
  **条件不再上按钮** —— 条件/映射只住属性面
- 边在图上可选中:FlowDiagram 连线加宽透明命中垫(边可点时注解层提到形状层上),
  点线即切属性卡到该边(实测 E4 命中)

测试:closure 28、advance-order 6、graph-to-pkg 5(新增铸号例)、seed 8、
端到端八例真库全绿(全员轮值下照跑);五闸退出码验过。
库:purge 后重种,唯一 unified-quote@v1 生效(双面判据齐)。

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KeDBx2PHLavbURXB8LJJ7m
This commit is contained in:
2026-07-28 19:02:07 +08:00
co-authored by Claude Fable 5
parent 281f4ef084
commit 7f0d25c337
21 changed files with 361 additions and 436 deletions
@@ -68,14 +68,6 @@ function flowsOf(packages: readonly ProcessPackage[]) {
/* ── 边属性:传递契约(条件 + 映射)──────────────────────────────────── */
/** 卡点 id → 去向节点 id(边属性按语义对端认亲:A5→c_reject 即 A5→A4) */
function calloutToOf(graph: FlowGraph | null): Map<string, string> | undefined {
if (graph === null) return undefined;
return new Map(
graph.nodes.filter((n) => n.kind === 'callout' && n.to !== undefined).map((n) => [n.id, n.to!]),
);
}
/** 映射行的工作形状 —— 语义边 mapping 的元素;设计者只见三种来源,其余是系统隐性上下文 */
type MapRow = { target: string; source: Record<string, unknown> & { from: string } };
const SOURCE_KINDS = [
@@ -84,21 +76,13 @@ const SOURCE_KINDS = [
{ k: 'constant', label: '常量' },
] as const;
function EdgeProps({
edge,
toSem,
onPatch,
}: {
edge: FlowEdge;
toSem: string;
onPatch: (f: (e: FlowEdge) => FlowEdge) => void;
}) {
function EdgeProps({ edge, onPatch }: { edge: FlowEdge; onPatch: (f: (e: FlowEdge) => FlowEdge) => void }) {
const rows = (edge.mapping ?? []) as MapRow[];
const setRows = (next: MapRow[]) => onPatch((e) => ({ ...e, mapping: next }));
const patchRow = (i: number, f: (r: MapRow) => MapRow) => setRows(rows.map((r, j) => (j === i ? f(r) : r)));
return (
<div className="g-props">
<Prop ico="git-branch" title={`条件 · ${edge.from} → ${toSem}`} extra="多出边异或:命中即走;留空 = 默认兜底">
<Prop ico="git-branch" title={`${edge.code ?? '边'} · ${edge.from} → ${edge.to}`} extra="多出边异或:命中即走;条件留空 = 默认兜底">
<Field k="S-FEEL 条件" hint="如 needSourcing = true;可用 and / or 连接。留空即无条件(默认边,至多一条)">
<input
className="g-input mono"
@@ -272,7 +256,7 @@ function minimalFlow(id: string, name: string): ProcessPackage {
{ id: 'start', kind: 'start', label: '开始', layout: { row: 0, col: 0, x: 30, y: 70 } },
{ id: 'end', kind: 'end', label: '结束', layout: { row: 0, col: 1, x: 150, y: 70 } },
],
edges: [{ id: 'e-start-end', from: 'start', to: 'end', mapping: [], reopen: false }],
edges: [{ id: 'E1', from: 'start', to: 'end', mapping: [], reopen: false }],
variables: [],
});
}
@@ -532,17 +516,8 @@ function FlowLab({
};
const kindLabel = (n: FlowNode) =>
n.kind === 'activity'
? n.flavor === 'approval'
? '审批点'
: '活动点'
: n.kind === 'callout'
? '卡点'
: n.kind === 'start'
? '调用接口'
: '显式终点';
const kindTone = (n: FlowNode) =>
n.kind === 'activity' ? (n.flavor === 'approval' ? 'warn' : 'auto') : n.kind === 'callout' ? 'danger' : 'mute';
n.kind === 'activity' ? (n.flavor === 'approval' ? '审批点' : '活动点') : n.kind === 'start' ? '调用接口' : '显式终点';
const kindTone = (n: FlowNode) => (n.kind === 'activity' ? (n.flavor === 'approval' ? 'warn' : 'auto') : 'mute');
// 画布上的选中态:diagram-js 给每个形状挂了 data-element-id,外挂一个类,不改画布件
useEffect(() => {
@@ -680,7 +655,7 @@ function FlowLab({
nodeId: n.id,
label: n.label,
activityId: n.activityId,
owner: n.owner,
// 契约不带负责人岗位 —— 分派归运营,依赖文件只描述干什么
// 编排上手写的注记(给人读)
declaredIn: n.in ?? [],
declaredOut: n.out ?? [],
@@ -825,7 +800,7 @@ function FlowLab({
<FlowFigureBlock
key={`${pkg.id}@${pkg.version}`}
title={`${pkg.name} v${pkg.version}`}
oneLiner={`蓝 = 活动点 · 琥珀 = 审批点 · 红 = 卡点`}
oneLiner={`蓝 = 活动点 · 琥珀 = 审批点 · 线标 = 边号`}
graph={graph}
drilledIds={nodes.filter((n) => n.kind === 'activity').map((n) => n.id)}
/*
@@ -835,6 +810,12 @@ function FlowLab({
*/
canEdit
onNodeClick={(nid) => { setSel(nid); setSelEdge(null); }}
onEdgeClick={(edge) => {
const i = (graph?.edges ?? []).findIndex(
(x) => x.from === edge.from && x.to === edge.to && x.code === edge.code,
);
if (i >= 0) { setSelEdge(i); setSel(null); }
}}
onEditNodeText={async (nid, p2) => {
setGraph((g) =>
g === null
@@ -949,22 +930,18 @@ function FlowLab({
</button>
))}
</div>
{/* 边拣选条:边属性 = 传递契约(条件 + 映射)—— 图只定顺序,契约在这儿填 */}
{/* 边拣选条:边号立牌(E1、E2…),条件住属性面不上按钮 —— 图只定顺序,契约在属性里填 */}
<div className="g-picker">
{(graph?.edges ?? []).map((e, i) => {
const toSem = calloutToOf(graph)?.get(e.to) ?? e.to;
const brief = e.condition !== undefined && e.condition !== '' ? ` [${e.condition}]` : '';
return (
<button
key={`${e.from}→${e.to}-${i}`}
className={'g-pick t-mute' + (selEdge === i ? ' on' : '')}
onClick={() => { setSelEdge(selEdge === i ? null : i); setSel(null); }}
>
<b className="g-mono">{e.from}→{toSem}</b>
{(e.label ?? '') + brief}
</button>
);
})}
{(graph?.edges ?? []).map((e, i) => (
<button
key={`${e.from}→${e.to}-${i}`}
className={'g-pick t-mute' + (selEdge === i ? ' on' : '')}
onClick={() => { setSelEdge(selEdge === i ? null : i); setSel(null); }}
>
<b className="g-mono">{e.code ?? `边${i + 1}`}</b>
{e.from}→{e.to}
</button>
))}
</div>
{node === null && selEdge === null ? (
<Note>
@@ -974,7 +951,6 @@ function FlowLab({
) : node === null && selEdge !== null && graph !== null ? (
<EdgeProps
edge={graph.edges[selEdge]!}
toSem={calloutToOf(graph)?.get(graph.edges[selEdge]!.to) ?? graph.edges[selEdge]!.to}
onPatch={(f) => {
setGraph((g) =>
g === null ? g : { ...g, edges: g.edges.map((e, i) => (i === selEdge ? f(e) : e)) },
@@ -1036,25 +1012,29 @@ function FlowLab({
/>
</Field>
)}
<Field
k={node.flavor === 'approval' ? '审批岗位' : '责任岗位'}
hint={node.flavor === 'approval' ? '审批单派给它' : '任务的负责人由它解析而来'}
>
<select
className="g-select"
value={node.owner ?? ''}
onChange={(e) =>
patch((n) => ({ ...n, owner: e.target.value === '' ? undefined : e.target.value }))
}
>
<option value="">未指定 —— 保存前选一个岗位</option>
{positions.map((q2) => (
<option key={q2.id} value={q2.abbr}>
{q2.abbr} · {q2.name}
</option>
))}
</select>
</Field>
{node.flavor === 'approval' && (
<Field k="审批岗位" hint="「卡到人的工位」是审批点的功能语义,审批单派给它">
<select
className="g-select"
value={node.owner ?? ''}
onChange={(e) =>
patch((n) => ({ ...n, owner: e.target.value === '' ? undefined : e.target.value }))
}
>
<option value="">未指定 —— 激活前选一个岗位</option>
{positions.map((q2) => (
<option key={q2.id} value={q2.abbr}>
{q2.abbr} · {q2.name}
</option>
))}
</select>
</Field>
)}
{node.flavor !== 'approval' && (
<Note>
活动点<b>不带岗位</b> —— 谁来干是运营的事(分派机制未建前,运行时全员轮值、最闲者先)。
</Note>
)}
{node.kind === 'activity' && node.flavor === 'approval' && (
<Note>
<b>审批点是系统内置要素</b>,不是活动 —— 声明即用、零开发、不进活动库(一个流程包里需要开发的
@@ -1062,11 +1042,8 @@ function FlowLab({
(声明式:回指定节点重开新实例 / 终止)· 催办阶梯。运行时它产出<b>审批单</b>而非任务。
</Note>
)}
{node.owner === undefined && (
<Note tone="warn">
这个节点还没指定岗位 —— 不指定,起单时就不知道
{node.flavor === 'approval' ? '审批单' : '任务'}该派给谁。
</Note>
{node.flavor === 'approval' && node.owner === undefined && (
<Note tone="warn">这个审批点还没指定岗位 —— 不指定,起单时就不知道审批单该派给谁。</Note>
)}
</Prop>
@@ -1088,28 +1065,6 @@ function FlowLab({
/>
</Prop>
)}
{node.kind === 'callout' && (
<Prop ico="rotate-ccw" title="去向" extra="失败走向 / 驳回去向">
<Field k="回到节点">
<select
className="g-select"
value={node.to ?? ''}
onChange={(e) =>
patch((n) => ({ ...n, to: e.target.value === '' ? undefined : e.target.value }))
}
>
<option value="">未指定</option>
{nodes
.filter((n) => n.kind === 'activity')
.map((n) => (
<option key={n.id} value={n.id}>
{n.id} · {n.label}
</option>
))}
</select>
</Field>
</Prop>
)}
{node.kind === 'activity' && node.flavor !== 'approval' && (
<Prop ico="boxes" title="链接活动实现" extra="装载面:编排不含实现,链接决定可运行">
<Field k="实现" hint="活动住库;链好了这节点才算装载(激活判据之二)">
+32 -9
View File
@@ -9,6 +9,7 @@ import { useEffect, useMemo, useRef, useState } from "react";
import {
layoutFlow,
type ConnectionLayout,
type FlowEdge,
type FlowGraph,
type FlowLayoutResult,
type FlowNode,
@@ -68,13 +69,25 @@ const rendererModule = {
};
/** 连线 + 箭头 + 线上标签,画进注解图层(几何全部来自布局引擎)。 */
function drawConnection(layer: SVGElement, connection: ConnectionLayout, variant: FlowVariant): void {
function drawConnection(
layer: SVGElement,
connection: ConnectionLayout,
variant: FlowVariant,
onEdgeClick?: (edge: FlowEdge) => void,
): void {
const color = TONE_COLOR[connection.tone];
const [first, ...rest] = connection.waypoints;
if (first === undefined) return;
const d = `M${first.x},${first.y} ${rest.map((p) => `L${p.x},${p.y}`).join(" ")}`;
layer.append(svg("path", { d, fill: "none", stroke: color, "stroke-width": 1.4 }));
layer.append(svg("polygon", { points: arrowHeadPoints(connection.waypoints), fill: color }));
if (onEdgeClick !== undefined) {
// 加宽透明命中垫:线太细点不着 —— 边在图上可选中,属性(条件/映射)去属性卡改
const hit = svg("path", { d, fill: "none", stroke: "transparent", "stroke-width": 12, cursor: "pointer" });
(hit as SVGElement & { style: CSSStyleDeclaration }).style.pointerEvents = "stroke";
hit.addEventListener("click", () => onEdgeClick(connection.edge));
layer.append(hit);
}
layer.append(svg("path", { d, fill: "none", stroke: color, "stroke-width": 1.4, "pointer-events": "none" }));
layer.append(svg("polygon", { points: arrowHeadPoints(connection.waypoints), fill: color, "pointer-events": "none" }));
if (connection.label) {
layer.append(
@@ -94,8 +107,13 @@ function drawConnection(layer: SVGElement, connection: ConnectionLayout, variant
}
}
function drawAnnotations(layer: SVGElement, layout: FlowLayoutResult, variant: FlowVariant): void {
for (const connection of layout.connections) drawConnection(layer, connection, variant);
function drawAnnotations(
layer: SVGElement,
layout: FlowLayoutResult,
variant: FlowVariant,
onEdgeClick?: (edge: FlowEdge) => void,
): void {
for (const connection of layout.connections) drawConnection(layer, connection, variant, onEdgeClick);
for (const caption of layout.captions) {
const style = CAPTION_STYLE[caption.role];
// 严格索引:未知 role 不画注记,而不是画一个半成品
@@ -124,6 +142,8 @@ export interface FlowDiagramProps {
variant: FlowVariant;
/** 点击活动节点(下钻);不传则节点不可点。 */
onNodeClick?: (nodeId: string) => void;
/** 点击连线(选中边,按边号/两端认);不传则边不可点。 */
onEdgeClick?: ((edge: FlowEdge) => void) | undefined;
/** 双击活动节点就地改文字(标题/小字/主办);不传则不可改。 */
onEditNode?: ((nodeId: string, patch: { label: string; owner?: string }) => Promise<void>) | undefined;
/** 执行人候选(L1 业务能力)——传了则执行字段只能下拉选缩写,不开自由填。 */
@@ -137,11 +157,13 @@ interface NodeEdit {
top: number;
}
export function FlowDiagram({ graph, variant, onNodeClick, onEditNode, ownerOptions, ariaLabel }: FlowDiagramProps) {
export function FlowDiagram({ graph, variant, onNodeClick, onEdgeClick, onEditNode, ownerOptions, ariaLabel }: FlowDiagramProps) {
const containerRef = useRef<HTMLDivElement>(null);
const editRef = useRef<HTMLDivElement>(null);
const clickRef = useRef(onNodeClick);
clickRef.current = onNodeClick;
const edgeClickRef = useRef(onEdgeClick);
edgeClickRef.current = onEdgeClick;
const editNodeRef = useRef(onEditNode);
editNodeRef.current = onEditNode;
// 单击下钻延时:等一拍看是否双击(双击=改文字,取消下钻)。
@@ -189,9 +211,10 @@ export function FlowDiagram({ graph, variant, onNodeClick, onEditNode, ownerOpti
);
}
// 连线与标注画在形状之下的图层(层序号小于默认元素层)。
const annotationLayer = canvas.getLayer("flow-annotations", -1);
drawAnnotations(annotationLayer as SVGElement, layout, variant);
// 连线与标注画在形状之下的图层(层序号小于默认元素层);
// 边可点时提到形状层之上(层序 1),命中垫才接得到点击 —— 线避框走,不遮节点
const annotationLayer = canvas.getLayer("flow-annotations", edgeClickRef.current === undefined ? -1 : 1);
drawAnnotations(annotationLayer as SVGElement, layout, variant, (edge) => edgeClickRef.current?.(edge));
if (layout.ghost) {
(canvas.getContainer().querySelector(".djs-container svg, svg") as SVGElement | null)?.setAttribute(
"opacity",
+6 -3
View File
@@ -13,7 +13,7 @@ import type { ProcessPackage } from '@contracts';
import { Ico } from '@ui';
import { FlowDiagram } from './FlowDiagram.tsx';
import { FlowEditor } from './FlowEditor.tsx';
import type { FlowGraph } from './flow-layout.ts';
import type { FlowEdge, FlowGraph } from './flow-layout.ts';
import type { SpPosition } from './support.tsx';
import { packageToGraph } from './pkg-to-graph.ts';
import type { InstanceMark } from './pkg-to-graph.ts';
@@ -27,6 +27,7 @@ export function FlowFigureBlock({
positions,
canEdit,
onNodeClick,
onEdgeClick,
onEditNodeText,
onSaveFlowGraph,
}: {
@@ -38,6 +39,8 @@ export function FlowFigureBlock({
positions?: SpPosition[] | undefined;
canEdit: boolean;
onNodeClick: (nodeId: string) => void;
/** 点击连线选中边(属性卡随之切到该边);不传则边不可点 */
onEdgeClick?: ((edge: FlowEdge) => void) | undefined;
/** 双击流程图活动就地改文字(标题 / 主办) */
onEditNodeText?: ((nodeId: string, patch: { label: string; owner?: string }) => Promise<void>) | undefined;
/** 手工绘图:整图保存(idMap = 本次编辑会话 原id→现id,宿主用它重键下钻内容) */
@@ -52,7 +55,7 @@ export function FlowFigureBlock({
<button
type="button"
className="dc2-addbtn"
title="手工绘图(珊格正交:活动/网关/起止/卡点,拖拽连线);画布内工具栏有 取消/保存绘图"
title="手工绘图(珊格正交:活动点/审批点/起止,拖拽连线);画布内工具栏有 取消/保存绘图"
onClick={() => setEditing(true)}
>
<Ico name="pen-line" s={11} /> 编辑
@@ -87,6 +90,7 @@ export function FlowFigureBlock({
graph={graph}
variant="business"
onNodeClick={onNodeClick}
onEdgeClick={onEdgeClick}
onEditNode={canEdit ? onEditNodeText : undefined}
ownerOptions={positions}
ariaLabel={`${title}业务流程图`}
@@ -105,7 +109,6 @@ export function FlowFigureBlock({
{/* 节点只分活动点/审批点 —— 标准/案例是实现方式,不进编排面的词汇表 */}
<span><i className="lg-i fe-pi-sop" aria-hidden /> 活动点</span>
<span><i className="lg-i fe-pi-approval" aria-hidden /> 审批点</span>
<span><i className="lg-i fe-pi-callout" aria-hidden /> 卡点</span>
<span><i className="lg-i lg-flow" aria-hidden /> 顺序流</span>
<span className="sep">|</span>
<span>
@@ -2,9 +2,9 @@
* 画布图 → 流程包:**合并**,不是重建。
*
* 这里守三条容易丢东西的路:
* ① 画布装不下的声明(驳回走向、负责人策略)保存后必须还在;
* ② 回边以**卡点**呈现(MVP 的画法)—— 存盘要还原成语义边,不能连边一起丢;
* ③ 属性卡的工作副本(节点的链接实现 act、边的条件/映射)保存时要合并为语义。
* ① 画布装不下的声明(驳回走向、失败走向)保存后必须还在;
* ② 属性卡的工作副本(节点的链接实现 act、边的条件/映射)保存时要合并为语义;
* ③ 边号 E1、E2… 是语义边的编号身份 —— 旧边保号,新画的边铸下一个空号。
*/
import { describe, expect, it } from 'vitest';
import { processPackageSchema } from '@contracts';
@@ -20,93 +20,67 @@ const basePkg: ProcessPackage = processPackageSchema.parse({
callInterface: { input: { type: 'object' }, output: { type: 'object' } },
nodes: [
{ id: 'S', kind: 'start', label: '起' },
{
id: 'A',
kind: 'activity',
label: '甲',
activityId: 'act-a',
owner: { position: 'BD', strategy: 'rotation' },
failure: { kind: 'terminate' },
},
{
id: 'B',
kind: 'activity',
label: '乙',
activityId: 'act-b',
owner: { position: 'PM', strategy: 'sole' },
failure: { kind: 'terminate' },
},
{ id: 'A', kind: 'activity', label: '甲', activityId: 'act-a', failure: { kind: 'terminate' } },
{ id: 'B', kind: 'activity', label: '乙', activityId: 'act-b', failure: { kind: 'terminate' } },
{ id: 'E', kind: 'end', label: '终' },
],
edges: [
{ id: 'e-s-a', from: 'S', to: 'A', mapping: [{ target: 'x', source: { from: 'initiation', path: 'x' } }] },
{ id: 'e-a-b', from: 'A', to: 'B', mapping: [] },
{ id: 'E1', from: 'S', to: 'A', mapping: [{ target: 'x', source: { from: 'initiation', path: 'x' } }] },
{ id: 'E2', from: 'A', to: 'B', mapping: [] },
// 乙的两条互斥出边:通过 → 终点;有异议 → 回甲重开(无网关:分支就在节点身上)
{ id: 'e-b-e', from: 'B', to: 'E', condition: 'ok = true', mapping: [] },
{ id: 'e-b-a', from: 'B', to: 'A', condition: 'ok = false', mapping: [], reopen: true },
{ id: 'E3', from: 'B', to: 'E', condition: 'ok = true', mapping: [] },
{ id: 'E4', from: 'B', to: 'A', condition: 'ok = false', mapping: [], reopen: true },
],
variables: [],
});
/** 画布的样子:回边不画长线,画一枚卡点 */
/** 画布的样子:顺序流全是真边(卡点画法已废),回边照画 */
const graph: FlowGraph = {
manual: true,
rows: [],
anchors: [],
nodes: [
{ id: 'S', kind: 'start', label: '起' },
{ id: 'A', kind: 'activity', label: '甲', owner: 'BD' },
{ id: 'B', kind: 'activity', label: '乙', owner: 'PM' },
{ id: 'A', kind: 'activity', label: '甲' },
{ id: 'B', kind: 'activity', label: '乙' },
{ id: 'E', kind: 'end', label: '终' },
{ id: 'c1', kind: 'callout', label: '返回调整', to: 'A' },
],
edges: [
{ from: 'S', to: 'A' },
{ from: 'A', to: 'B' },
{ from: 'B', to: 'E', label: '通过', tone: 'ok' },
{ from: 'B', to: 'c1', label: '有异议', tone: 'bad' },
{ from: 'B', to: 'A', label: '有异议', tone: 'bad' },
],
};
describe('mergeGraphIntoPackage', () => {
it('卡点还原成语义边 —— 回边不因「画成卡点」而消失', () => {
it('回边按 from→to 认亲 —— 旧边的号、reopen 与条件都保留', () => {
const merged = mergeGraphIntoPackage(basePkg, graph);
const back = merged.edges.find((e) => e.from === 'B' && e.to === 'A');
expect(back).toBeDefined();
// 旧边的 id 与 reopen 标记跟着保留:合并按 from→to 认亲
expect(back?.id).toBe('e-b-a');
expect(back?.id).toBe('E4');
expect(back?.reopen).toBe(true);
expect(back?.condition).toBe('ok = false');
});
it('卡点本身不入语义节点,但整张图存进 diagram', () => {
const merged = mergeGraphIntoPackage(basePkg, graph);
expect(merged.nodes.map((n) => n.id)).toEqual(['S', 'A', 'B', 'E']);
const diagram = merged.diagram as { nodes: { id: string }[] };
expect(diagram.nodes.map((n) => n.id)).toContain('c1');
});
it('卡点只认亲、不新建 —— 审批点的驳回牌子不该被当成一条边', () => {
// 「审批点 → 退回卡点(to: A)」在旧包里没有对应的边:它是 reject 声明的呈现
const withReject: FlowGraph = {
it('新画的边铸下一个空号 —— E5,不与旧号相撞', () => {
const withNew: FlowGraph = {
...graph,
nodes: [...graph.nodes, { id: 'AP', kind: 'activity', label: '审批', flavor: 'approval' }],
edges: [...graph.edges, { from: 'AP', to: 'c1', label: '不通过' }],
nodes: [...graph.nodes, { id: 'C', kind: 'activity', label: '丙' }],
edges: [...graph.edges, { from: 'A', to: 'C' }, { from: 'C', to: 'B' }],
};
const merged = mergeGraphIntoPackage(basePkg, withReject);
expect(merged.edges.some((e) => e.from === 'AP' && e.to === 'A')).toBe(false);
// 旧包里有的回边照旧认得出来
expect(merged.edges.some((e) => e.from === 'B' && e.to === 'A')).toBe(true);
const merged = mergeGraphIntoPackage(basePkg, withNew);
const minted = merged.edges.filter((e) => e.from === 'C' || e.to === 'C').map((e) => e.id);
expect(minted.sort()).toEqual(['E5', 'E6']);
});
it('画布装不下的声明原样保留:边映射与负责人策略', () => {
it('画布装不下的声明原样保留:边映射与失败走向', () => {
const merged = mergeGraphIntoPackage(basePkg, graph);
expect(merged.edges.find((e) => e.id === 'e-s-a')?.mapping).toHaveLength(1);
expect(merged.edges.find((e) => e.id === 'E1')?.mapping).toHaveLength(1);
const a = merged.nodes.find((n) => n.id === 'A');
expect(a?.kind === 'activity' && a.owner.strategy).toBe('rotation');
expect(a?.kind === 'activity' && a.failure.kind).toBe('terminate');
});
/* ── 属性卡工作副本的合并(2026-07-28 第二轮:节点链接实现、边传递契约) ── */
/* ── 属性卡工作副本的合并(节点链接实现、边传递契约) ── */
it('节点的 act(链接的活动实现)优先于旧声明成为 activityId', () => {
const linked: FlowGraph = {
@@ -127,18 +101,18 @@ describe('mergeGraphIntoPackage', () => {
edges: graph.edges.map((e) =>
e.from === 'B' && e.to === 'E'
? { ...e, condition: 'ok = true and sum > 3', mapping: [{ target: 'y', source: { from: 'initiation', path: 'y' } }] }
: e.from === 'B' && e.to === 'c1'
: e.from === 'B' && e.to === 'A'
? { ...e, condition: '' } // 设计者把条件清空:这条边成了默认兜底
: e,
),
};
const merged = mergeGraphIntoPackage(basePkg, edited);
const pass = merged.edges.find((e) => e.id === 'e-b-e');
const pass = merged.edges.find((e) => e.id === 'E3');
expect(pass?.condition).toBe('ok = true and sum > 3');
expect(pass?.mapping).toHaveLength(1);
const back = merged.edges.find((e) => e.id === 'e-b-a');
const back = merged.edges.find((e) => e.id === 'E4');
expect(back?.condition).toBeUndefined();
// 没动过的边沿用旧声明
expect(merged.edges.find((e) => e.id === 'e-s-a')?.mapping).toHaveLength(1);
expect(merged.edges.find((e) => e.id === 'E1')?.mapping).toHaveLength(1);
});
});
@@ -432,14 +432,13 @@ const modelingModule = {
/*
* 节点只分**活动点**与**审批点**(2026-07-28 第二轮):
* 编排面不选实现方式(标准/案例是活动库的事,链接哪个实现在属性卡决定);
* 网关不存在(分支 = 条件出边);起止与卡点是结构件与呈现件。
* 网关与卡点都不存在(分支 = 条件出边,顺序流一律画成真边);起止是结构件。
*/
export const PALETTE_SPECS: Array<{ key: string; label: string; className: string; spec: NewNodeSpec }> = [
{ key: "create.act", label: "活动点(蓝 · 链接活动实现后可运行)", className: "fe-pi fe-pi-sop", spec: { kind: "activity" } },
{ key: "create.approval", label: "审批点(琥珀 · 人裁节点)", className: "fe-pi fe-pi-approval", spec: { kind: "activity", flavor: "approval" } },
{ key: "create.start", label: "起始事件", className: "fe-pi fe-pi-start", spec: { kind: "start" } },
{ key: "create.end", label: "结束事件", className: "fe-pi fe-pi-end", spec: { kind: "end" } },
{ key: "create.callout", label: "卡点(红 · 标去向)", className: "fe-pi fe-pi-callout", spec: { kind: "callout" } },
];
class FlowPalette {
+8 -4
View File
@@ -72,6 +72,8 @@ export interface FlowAnchor {
export interface FlowEdge {
from: string;
to: string;
/** 边号(E1、E2…)—— 语义边的编号身份,画在线标前;拣选与选中按它认 */
code?: string | undefined;
label?: string;
tone?: FlowTone;
/** 边属性(传递契约)的工作副本:S-FEEL 条件。属性卡填写,保存时合并为语义边的 condition。 */
@@ -309,10 +311,12 @@ export function manualEdgeLabel(
edge: FlowEdge,
points: Array<{ x: number; y: number }>,
): ConnectionLayout["label"] {
if (!edge.label) return undefined;
// 边号进线标:`E3 需要选型`;没有注记的边也标出编号 —— 图上能认出这是哪条边
const text = [edge.code, edge.label].filter((t) => t !== undefined && t !== '').join(' ');
if (text === '') return undefined;
// 手工摆放过的标签位(中心点)优先。
if (edge.lx !== undefined && edge.ly !== undefined) {
return { text: edge.label, x: edge.lx, y: edge.ly + 3.5, anchor: "middle" };
return { text, x: edge.lx, y: edge.ly + 3.5, anchor: "middle" };
}
let best = 0;
let bestLen = -1;
@@ -327,9 +331,9 @@ export function manualEdgeLabel(
const b = points[best];
if (a === undefined || b === undefined) return undefined;
if (a.y === b.y) {
return { text: edge.label, x: (a.x + b.x) / 2, y: a.y - 5, anchor: "middle" };
return { text, x: (a.x + b.x) / 2, y: a.y - 5, anchor: "middle" };
}
return { text: edge.label, x: a.x + 6, y: (a.y + b.y) / 2 + 3, anchor: "start" };
return { text, x: a.x + 6, y: (a.y + b.y) / 2 + 3, anchor: "start" };
}
/** 手绘图直排:节点按存储坐标放置,连线按存储折线画,起止/网关的名字作旁注。 */
+14 -29
View File
@@ -6,8 +6,8 @@
* 负责人策略、调用接口 —— 一律**从旧包按 id 保留**;id 变过号的经 idMap 跟过去。
* 所以保存永远不会把「画布上看不见的声明」抹掉。
*
* 卡点(callout)与行分组/锚定/折线点属于画布事实,语义 schema 不收:
* 整张手绘图原样存进 `pkg.diagram`(手绘几何即呈现真相),流转判断不读它。
* 顺序流一律画成**真边**(卡点画法已废除,2026-07-28 第三轮);行分组/锚定/折线点
* 属于画布事实,整张手绘图原样存进 `pkg.diagram`(手绘几何即呈现真相),流转判断不读它。
*/
import type { Edge, ProcessNode, ProcessPackage } from '@contracts';
import { activityIdSchema, nodeIdSchema } from '@contracts';
@@ -32,7 +32,7 @@ export function mergeGraphIntoPackage(
priorEdge.set(`${from}→${to}`, e);
}
// 画布节点里只有活动点/审批点/起终点入语义;卡点(callout)留在 diagram
// 画布节点里只有活动点/审批点/起终点入语义(卡点画法已废,滤除只为容错旧数据)
const semantic = graph.nodes.filter((n) => n.kind !== 'callout');
const nodes: ProcessNode[] = semantic.map((n) => {
@@ -82,11 +82,7 @@ export function mergeGraphIntoPackage(
kind: 'activity' as const,
// 链接优先级:属性卡刚选的(act)> 旧声明 > 占位软引用(闭合校验标「未装载」)
activityId: n.act !== undefined && n.act !== '' ? activityIdSchema.parse(n.act) : (priorAct?.activityId ?? placeholderActivityId(n.label)),
owner: {
position: n.owner ?? priorAct?.owner.position ?? '未声明',
strategy: priorAct?.owner.strategy ?? ('sole' as const),
...(priorAct?.owner.staffId === undefined ? {} : { staffId: priorAct.owner.staffId }),
},
// 契约不带负责人岗位:分派归运营(运行时默认全员轮值;审批点的 approver 是功能语义,另算)
failure: priorAct?.failure ?? { kind: 'terminate' as const },
...(priorAct?.message === undefined ? {} : { message: priorAct.message }),
...(n.in === undefined || n.in.length === 0 ? {} : { in: [...n.in] }),
@@ -97,34 +93,23 @@ export function mergeGraphIntoPackage(
const semanticIds = new Set(semantic.map((n) => n.id));
/*
* 卡点是**回跳的呈现**:图上不画长线,画一枚「返回调整→A4」的小牌子。
* 「X → 卡点(to: Y)」要还原成语义边 X→Y,否则一存盘回边就没了
* (卡点不入语义,这条边有一端不在 semanticIds 里,会被滤掉)。
*
* 但还原只用于**认亲**,不用于**新建**:只有旧包里确有 X→Y 这条边才认。
* 不设这道闸,审批点的「退回调整→A4」卡点(它是 `reject` 声明的呈现、不是边)
* 会被当成 A5→A4 凭空造出一条边来 —— 实测就多出过一条 `e-A5-A4`。
* 真要新连一条边,画一条线;卡点只是牌子。
* 边号 E1、E2… —— 服务端语义边的**编号身份**:图上标它、拣选条按它认。
* 旧边保号(按 from→to 认亲),新画的边铸下一个空号;非 E 系的历史号不续用。
*/
const calloutTarget = new Map(
graph.nodes
.filter((n) => n.kind === 'callout' && n.to !== undefined && semanticIds.has(n.to))
.map((n) => [n.id, n.to!]),
);
const resolved = graph.edges.map((e) => {
const via = calloutTarget.get(e.to);
if (via === undefined) return e;
return priorEdge.has(`${e.from}→${via}`) ? { ...e, to: via } : e;
});
let nextEdgeNo =
pkg.edges.reduce((max, e) => {
const m = /^E(\d+)$/.exec(e.id);
return m === null ? max : Math.max(max, Number(m[1]));
}, 0) + 1;
const edges: Edge[] = resolved
const edges: Edge[] = graph.edges
.filter((e) => semanticIds.has(e.from) && semanticIds.has(e.to))
.map((e) => {
const prior = priorEdge.get(`${e.from}→${e.to}`);
// 边属性(传递契约)以属性卡的工作副本优先;没动过的沿用旧声明
const condition = e.condition !== undefined ? (e.condition.trim() === '' ? undefined : e.condition) : prior?.condition;
return {
id: prior?.id ?? `e-${e.from}-${e.to}`,
id: prior?.id ?? `E${nextEdgeNo++}`,
from: nodeIdSchema.parse(e.from),
to: nodeIdSchema.parse(e.to),
mapping: (e.mapping as Edge['mapping'] | undefined) ?? prior?.mapping ?? [],
@@ -139,7 +124,7 @@ export function mergeGraphIntoPackage(
...pkg,
nodes,
edges,
// 手绘图原样存证:卡点/行分组/锚定/折线点都在这里,呈现以它为真相
// 手绘图原样存证:行分组/锚定/折线点都在这里,呈现以它为真相
diagram: JSON.parse(JSON.stringify(graph)) as Record<string, unknown>,
};
}
+7 -8
View File
@@ -44,7 +44,7 @@ export function packageToGraph(pkg: ProcessPackage, marks: readonly InstanceMark
kind: n.kind === 'start' ? ('start' as const) : n.kind === 'end' ? ('end' as const) : ('activity' as const),
label: n.label,
...(n.kind === 'approval' ? { flavor: 'approval' as const, owner: n.approver.position } : {}),
...(n.kind === 'activity' ? { code: n.id, owner: n.owner.position, act: n.activityId } : {}),
...(n.kind === 'activity' ? { code: n.id, act: n.activityId } : {}),
x: 30 + (i % 6) * 160,
y: bottom + Math.floor(i / 6) * 60,
}));
@@ -59,19 +59,17 @@ export function packageToGraph(pkg: ProcessPackage, marks: readonly InstanceMark
return state === undefined ? base : { ...base, note: state };
});
/*
* 边属性(条件/映射)从语义边回填到画布边:属性卡编辑的是画布工作副本,
* 边属性(编号/条件/映射)从语义边回填到画布边:属性卡编辑的是画布工作副本,
* 保存时 graph-to-pkg 又以它为准 —— 回填缺席的话,打开即保存会把契约冲掉。
* 经卡点的边按卡点 `to` 认亲(A5→c_reject 即 A5→A4)。
* 顺序流全是真边(卡点画法已废),按 from→to 直接认亲;code 即边号 E1、E2…
*/
const calloutTo = new Map(
stored.nodes.filter((n) => n.kind === 'callout' && n.to !== undefined).map((n) => [n.id, n.to!]),
);
const semEdge = new Map(pkg.edges.map((e) => [`${e.from}→${e.to}`, e]));
const edges = stored.edges.map((e) => {
const sem = semEdge.get(`${e.from}→${calloutTo.get(e.to) ?? e.to}`);
const sem = semEdge.get(`${e.from}→${e.to}`);
if (sem === undefined) return e;
return {
...e,
code: sem.id as string,
...(sem.condition === undefined ? {} : { condition: sem.condition }),
mapping: sem.mapping as unknown[],
};
@@ -99,7 +97,7 @@ export function packageToGraph(pkg: ProcessPackage, marks: readonly InstanceMark
}
return {
...base,
owner: n.owner.position,
// 契约不带负责人岗位 —— 角标不再标岗位,链接的实现(装载面)以 act 携带
act: n.activityId,
...(n.in === undefined ? {} : { in: [...n.in] }),
...(n.out === undefined ? {} : { out: [...n.out] }),
@@ -114,6 +112,7 @@ export function packageToGraph(pkg: ProcessPackage, marks: readonly InstanceMark
const edges: FlowEdge[] = pkg.edges.map((e) => ({
from: e.from,
to: e.to,
code: e.id as string,
// 回边按声明走「回 A4 重开新实例」,视觉上标红以区分正向流转
...(e.tone !== undefined ? { tone: e.tone } : e.reopen ? { tone: 'bad' as const } : {}),
...(e.label === undefined ? (e.condition === undefined ? {} : { label: e.condition }) : { label: e.label }),