流程包详情整页 UI 梳理:一套图纸语言,贴边清零
量了一遍页面,问题四处,全修: ① **属性卡是混进来的第二种风格**(治理台圆角卡),同格栅其它三块都是图纸风。 改为图纸卡:外壳同纸同影同角,题头入族 —— 「流程包 · 版本」「流程图 · 顺序」「异常 · 看板」「节点 · 属性」四张两字·两字对仗; 题头右侧 = 状态字 + 保存芯片(与「新建」「编辑」同款); 内部小卡与节点条也入图纸语言(方角细线、mono 小字距题头),等高 250、超高内滚。 ② **属性卡内部三处贴死**(题头↕0节点条↕0属性格↕0按钮): 内容区统一 12px 呼吸;保存从底部挪进题头,不用滚到底找按钮。 ③ **异常板被 stretch 拉到 916px**,三条异常配一片空白:改为高度随内容 (实测 916 → 150),行顶仍与属性卡对齐。 ④ 2px 的 margin hack 删了,row2 两卡顶严格同线(840 = 840)。 typecheck ✓ lint ✓ depcruise ✓ api:check ✓ 498 测试 ✓ Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KeDBx2PHLavbURXB8LJJ7m
This commit is contained in:
@@ -761,13 +761,28 @@ function FlowLab({
|
||||
<div className="g-vercard-f">点一条异常,定位到它的节点属性;清零后才可激活。</div>
|
||||
</aside>
|
||||
|
||||
{/* 右下:节点属性卡 —— 与流程图同宽;闭环(岗位/判据/映射)在这里决定 */}
|
||||
<div className="g-nodecard">
|
||||
<Card
|
||||
ico="sliders-horizontal"
|
||||
title="节点属性"
|
||||
extra={dirty ? '有改动待保存' : '点节点就地填写 —— 闭环(岗位/判据/映射)在这里决定'}
|
||||
>
|
||||
{/* 右下:节点属性(图纸卡,与流程图同宽)—— 闭环(岗位/判据/映射)在这里决定 */}
|
||||
<div className="g-vercard g-nodecard">
|
||||
<div className="g-vercard-h">
|
||||
节点 · 属性
|
||||
<span className="n">{dirty ? '有改动待保存' : '点节点就地填写'}</span>
|
||||
<button
|
||||
className="g-ver-new"
|
||||
disabled={!dirty || save.isPending}
|
||||
onClick={() => {
|
||||
if (graph !== null) save.mutate({ graph, idMap: {} });
|
||||
}}
|
||||
>
|
||||
<Ico name="send" s={11} /> {save.isPending ? '保存中…' : `保存为 v${nextVersion}`}
|
||||
</button>
|
||||
</div>
|
||||
<div className="g-nodecard-b">
|
||||
{saveErr !== undefined && (
|
||||
<Note tone="warn">
|
||||
<b>保存失败:</b>
|
||||
{saveErr}
|
||||
</Note>
|
||||
)}
|
||||
<div className="g-picker">
|
||||
{nodes
|
||||
.filter((n) => n.kind !== 'start' && n.kind !== 'end' && n.kind !== 'end-bad')
|
||||
@@ -968,30 +983,9 @@ function FlowLab({
|
||||
</Prop>
|
||||
)}
|
||||
</div>
|
||||
<Acts
|
||||
align="end"
|
||||
items={[
|
||||
{
|
||||
label: save.isPending ? '保存中…' : dirty ? `保存为 v${nextVersion}` : '编排无改动',
|
||||
ico: 'send',
|
||||
primary: dirty,
|
||||
disabled: !dirty || save.isPending,
|
||||
// 保存不设闸也不设确认:存下来的是未生效的新版,谁也伤不着;异常看板会说还缺什么
|
||||
onClick: () => {
|
||||
if (graph !== null) save.mutate({ graph, idMap: {} });
|
||||
},
|
||||
},
|
||||
]}
|
||||
/>
|
||||
{saveErr !== undefined && (
|
||||
<Note tone="warn">
|
||||
<b>保存失败:</b>
|
||||
{saveErr}
|
||||
</Note>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Sec>
|
||||
|
||||
Reference in New Issue
Block a user