diff --git a/apps/web/src/features/gov-process/internal/panel.tsx b/apps/web/src/features/gov-process/internal/panel.tsx index 4894b06..b60acbe 100644 --- a/apps/web/src/features/gov-process/internal/panel.tsx +++ b/apps/web/src/features/gov-process/internal/panel.tsx @@ -748,7 +748,8 @@ function FlowLab({ n.kind === 'activity').map((n) => n.id)} /* diff --git a/apps/web/src/shared/gov/flow/FlowFigure.tsx b/apps/web/src/shared/gov/flow/FlowFigure.tsx index 979cd5e..5d0f4b2 100644 --- a/apps/web/src/shared/gov/flow/FlowFigure.tsx +++ b/apps/web/src/shared/gov/flow/FlowFigure.tsx @@ -3,7 +3,7 @@ * * `FlowFigureBlock` 自原型 `HostExample` 平移:区块小标题右侧「编辑」芯片进手绘编辑器 * (FlowEditor,画布内工具栏含 取消/保存绘图);展示态 hero/cap 框 + FlowDiagram - * (单击节点下钻/选中、双击活动就地改文字);图例贴在流程图正下方。 + * (单击节点下钻/选中、双击活动就地改文字);图例收在**图框下沿**(见 `Legend`)。 * 必须包在 `.process-desk > .process-doc` 纸面容器内(flow-canvas.css 规则 scoped 到它)。 * * `FlowFigure` 保留为只读便捷壳(任务页的流程图用它)。 @@ -78,12 +78,13 @@ export function FlowFigureBlock({ }} onCancel={() => setEditing(false)} /> + ) : (
FIG — {title}流程 - {oneLiner ?? '活动 · 网关 · 顺序流'} + {oneLiner ?? '活动点 · 审批点 · 顺序流'}
+
)} - - {/* 图例贴在流程图正下方,图标与绘图工具(元素盘)同款 SVG */} -
- - 图例 - - 起始 - 结束 - {/* 节点只分活动点/审批点 —— 标准/案例是实现方式,不进编排面的词汇表 */} - 活动点 - 审批点 - 顺序流 - | - - 责任 - - 右上角标 责任人 -
); } +/** + * 记号图例 —— 图框自己的**下沿**:与顶部图签(cap)对称的一条框内小字。 + * + * 工程图的图例本来就画在图框里,不另起一张纸;从前它是画布下方一个带边框的独立盒子, + * 读起来像图之外的第二块内容 —— 挪进框内,一眼看出它说的就是这张图上的记号。 + * 图标与绘图工具(元素盘)同款 SVG,蓝/琥珀由图标自己带,不必再写一遍「蓝 = …」。 + * + * 「责任」那两格删了:编排**不带岗位**(负责人是运营时分配的), + * 图上早已不画责任人角标 —— 图例里留着就是指着一件不存在的东西。 + */ +function Legend() { + return ( +
+ 图例 + 起始 + 结束 + {/* 节点只分活动点/审批点 —— 标准/案例是实现方式,不进编排面的词汇表 */} + 活动点 + 审批点 + 顺序流 · 线标即边号 +
+ ); +} + /** 只读壳:流程包 → 图 → 画(任务页 / 工作流实例页用) */ export function FlowFigure({ pkg, diff --git a/apps/web/src/shared/gov/flow/flow-canvas.css b/apps/web/src/shared/gov/flow/flow-canvas.css index a0274c8..71cb5da 100644 --- a/apps/web/src/shared/gov/flow/flow-canvas.css +++ b/apps/web/src/shared/gov/flow/flow-canvas.css @@ -62,26 +62,35 @@ color: var(--brass-deep); } -/* ---------- 记号图例 ---------- */ -.process-doc .legend { +/* ---------- 记号图例:图框的下沿 ---------- + 与顶部图签(.cap)对称的一条框内小字 —— 工程图的图例画在图框里,不另起一张纸。 + 细线横贯整个框宽(靠负外边距抵掉 .hero 的左右内距),读起来是这张图的一部分, + 而不是画布下面又摆了一个盒子。 */ +.process-doc .hero .legend { display: flex; flex-wrap: wrap; - gap: 5px 16px; + align-items: center; + gap: 4px 15px; + margin: 9px -12px 0; + /* 左右 16px = 图签的 12(框内距)+ 4(图签自留) —— 两条边沿的字对齐同一竖线 */ + padding: 7px 16px 2px; + border-top: 1px solid var(--grid); font-family: var(--mono); font-size: 9.5px; - color: var(--ink-soft); - border: 1px solid var(--line); - border-left: 3px solid var(--steel); - background: #f7f9fb; - padding: 9px 14px; - margin: 12px 0 2px; + line-height: 1.5; + color: var(--muted); } -.process-doc .legend b { - color: var(--ink); +/* 前导墨签「图例」:与图签同一记法(疏排小字),点明这一行说的是记号 */ +.process-doc .hero .legend b { font-weight: 600; + letter-spacing: 0.1em; + color: var(--steel); } -.process-doc .legend .sep { - color: var(--line); +.process-doc .hero .legend span { + display: inline-flex; + align-items: center; + gap: 2px; + white-space: nowrap; } /* ---------- 框图容器(hero/cap)+ 只读画布(flow-diagram) ---------- */ @@ -556,16 +565,14 @@ background-size: 14px 14px; } -/* 图例小图标:与元素盘同一套 SVG,缩排进文字行(全局垂直居中契约)。 */ +/* 图例小图标:与元素盘同一套 SVG,缩排进文字行(行内由 flex 居中,不必再手抬 1px)。 */ .process-doc .legend .lg-i { - display: inline-block; + flex: none; width: 20px; height: 14px; background-repeat: no-repeat; background-position: center; background-size: auto 12px; - vertical-align: middle; - transform: translateY(-1px); } .process-doc .legend .lg-i.fe-pi-sop, .process-doc .legend .lg-i.fe-pi-case,