diff --git a/apps/web/src/app/styles/console.css b/apps/web/src/app/styles/console.css index a727844..882559d 100644 --- a/apps/web/src/app/styles/console.css +++ b/apps/web/src/app/styles/console.css @@ -630,16 +630,13 @@ /* 两面都齐:一枚小检验章,别再占一整张卡 */ .g-okstamp { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 5px 11px; border: 1px solid rgba(46, 125, 79, .45); font: 600 10px/1 var(--sh-mono); letter-spacing: .08em; color: #2e7d4f; } -/* 属性小卡:三栏改版后右栏是**窄轨**(≈335),两列摊不开 —— 改单列竖排, - 顺序即阅读次序:身份 → 数据接口 → 类型与责任 → 装载 → 出边。长了在明细区自己滚。 */ -.g-nodecard .g-props { display: flex; flex-direction: column; align-items: stretch; gap: 12px; } -.g-propcol { min-width: 0; display: flex; flex-direction: column; gap: 12px; } -.g-nodecard .g-props.g-eprops { display: flex; flex-direction: column; align-items: stretch; gap: 12px; } -.g-nodecard .g-prop { border: 1px solid var(--sh-line); border-radius: 0; box-shadow: none; } -.g-nodecard .g-prop-h { padding: 8px 12px; background: #fff; font: 600 9px/1.5 var(--sh-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sh-steel); border-bottom: 1px solid var(--sh-line); } -.g-nodecard .g-prop-h svg { color: var(--sh-steel); opacity: .6; } -.g-nodecard .g-prop-h .x { font-size: 8.5px; font-weight: 600; letter-spacing: .04em; color: var(--sh-muted); text-align: right; } -.g-nodecard .g-prop-b { padding: 11px 12px 13px; gap: 11px; } +/* 节点属性**平铺**(2026-07-30):节点只决定几件事 —— 分类卡把四五个字段摊成半屏, + 撤掉;一列字段直排,字段之间一条细线断句就够。 */ +.g-nodeform { display: flex; flex-direction: column; gap: 0; } +.g-nodeform > .g-field { padding: 11px 2px; border-bottom: 1px dashed var(--line-soft); } +.g-nodeform > .g-field:last-child { border-bottom: 0; } +.g-nodeform > .g-note { margin: 11px 0 0; } +.g-nodeform > .g-btn { align-self: flex-start; margin-top: 11px; } /* 字段 = 图签小格:微墨签(mono 大写)+ 纸上填线(输入只留底线,聚焦底线转钢蓝) */ .g-nodecard .g-field { gap: 3px; } @@ -675,19 +672,6 @@ .g-maprow > .g-btn { grid-column: 6; justify-self: stretch; padding: 4px 0; display: inline-flex; align-items: center; justify-content: center; } .g-maparr { color: var(--sh-steel, #46586a); font-weight: 700; text-align: center; } -/* ── 节点属性 · 数据接口:契约即管道 —— 输入字段(名/型/来源)+ 输出口 ── */ -.g-dif { display: flex; flex-direction: column; gap: 2px; } -.g-dif + .g-dif { margin-top: 8px; } -.g-dif > em { font: 600 9px/1.6 var(--mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); padding-bottom: 3px; border-bottom: 1px solid var(--line-soft); } -.g-dif-r { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding: 4px 0; border-bottom: 1px dashed var(--line-soft); font-size: 11.5px; } -.g-dif-r:last-child { border-bottom: 0; } -.g-dif-r .k { font-family: var(--mono); font-weight: 700; color: var(--ink); } -.g-dif-r .k i { font-style: normal; font-family: var(--mono); font-size: 8.5px; font-weight: 600; letter-spacing: .06em; color: #8a5f1c; margin-left: 5px; padding: 1px 4px; border: 1px solid #e3d1a8; border-radius: 3px; } -.g-dif-r .t { font-family: var(--mono); font-size: 10px; color: var(--ink-4); } -.g-dif-r .s { margin-left: auto; font-size: 11px; color: var(--ink-3); } -.g-dif-r .s.ask { color: #8a5f1c; } -.g-dif-r .f { min-width: 0; font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); overflow-wrap: anywhere; } - /* ── 运营中心 · 工作流 · 运行配置:一包一卡,里面两节(触发器 / 节点负责人)── */ .g-runconf { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px 12px; } .g-runconf + .g-runconf { border-top: 1px dashed var(--line-soft); } diff --git a/apps/web/src/features/gov-process/internal/panel.tsx b/apps/web/src/features/gov-process/internal/panel.tsx index 1b1decc..88a6201 100644 --- a/apps/web/src/features/gov-process/internal/panel.tsx +++ b/apps/web/src/features/gov-process/internal/panel.tsx @@ -3,7 +3,9 @@ * * 一区一内容:三枚计数摆在货架顶端,底下就是包货架(触发器已独立成区)。 * 货架一流程一卡(不按版本平铺);进详情是**三栏**:左窄轨=版本(选中那版才出动作: - * 激活/停用 · 改名 · 删除)、中=流程图、右=节点属性(点图选节点,内容长了卡内滚,不拉长图)。 + * 激活/停用 · 改名 · 删除)、中=流程图、右=节点属性 —— **平铺一列字段,不分类**: + * 节点只决定 ID/名称/说明 · 类型 · 链接哪个活动 · 出边条件;数据契约归活动自己, + * 这里不写声明,要看去活动库看(点图选节点,内容长了卡内滚,不拉长图)。 * 「激活判据」不再单占一卡 —— 没选节点时,属性栏就地列出还差哪几条,点一条定位过去。 * * 版本是**运行时开关**,不是发布流程: @@ -35,7 +37,6 @@ import { Kpi, Note, PageHead, - Prop, QueryGate, Sec, Seg, @@ -401,8 +402,6 @@ function FlowLab({ setDirty(true); }; - const kindLabel = (n: FlowNode) => - n.kind === 'activity' ? (n.flavor === 'approval' ? '审批点' : '活动点') : n.kind === 'start' ? '调用接口' : '显式终点'; // 画布上的选中态:diagram-js 给每个形状挂了 data-element-id,外挂一个类,不改画布件 useEffect(() => { @@ -847,202 +846,103 @@ function FlowLab({ )} ) : ( - <> - {/* 两列手排(不用自动砌体):左列 = 身份与数据口,右列 = 类型与装载 —— - 卡数随节点种类变(审批点无装载卡),手排保证两列始终语义成组、高度可控 */} -