版本栏与节点属性再调:比例 · 四钮同款同排 · 「实现」改成看得出能点的真选择器

· 比例:左栏 196–224 → 228–268(版本行整行排满),右栏 320–1.25fr → 264–1fr(节点属性收窄)。 · 四枚按键(新建 · 激活/停用 · 改名 · 删除)**同款同排**收进顶部动作条 —— 新建不再另作一枚蓝芯片挂在头上;白字不换行,右端 v 号去掉(选中行自己亮着)。右栏头顺带收掉闲置提示「点节点就地填写」(空态文案已交代),只留脏态。 · 「实现」下拉从无框文字改成**真控件**:有边、有底、有箭头、焦点有落点 —— 无框下拉在窄轨里读成一行普通文字,人不知道能点,这是可用性缺陷不是审美偏好。实测:7 个选项、换选即入脏态,保存路径原样。五闸绿。 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KeDBx2PHLavbURXB8LJJ7m
2026-07-29 19:05:16 +08:00
parent 541b1c816e
commit 4cd14d7849
2 changed files with 19 additions and 14 deletions
@@ -521,7 +521,7 @@
   属性区从右侧窄栏挪到图下整行(g-wide),声明式契约细节再往下。 */
 /* 三栏(2026-07-30):左**窄**版本条 · 中流程图 · 右节点属性。
   右栏用包壳绝对定位 —— 行高由中栏的图定,属性长了在卡内滚,不把图拉长。 */
-.g-flowlab { display: grid; grid-template-columns: minmax(196px, 224px) minmax(0, 2.5fr) minmax(320px, 1.25fr); gap: 12px; align-items: stretch; }
+.g-flowlab { display: grid; grid-template-columns: minmax(228px, 268px) minmax(0, 2.8fr) minmax(264px, 1fr); gap: 12px; align-items: stretch; }
 .g-nodewrap { position: relative; min-height: 0; }
 .g-nodewrap > .g-nodecard { position: absolute; inset: 0; height: auto; }
 /* 版本卡:与右侧的图**等高**(grid stretch),版本多了在卡内滚,不把页面撑长。
@@ -548,9 +548,11 @@
 /* ── 版本条:**动作统一住顶部**(作用于正看的这一版),行里只放事实、单行排满 ── */
 .g-verslim .g-vercard-h { padding: 30px 14px 16px; gap: 4px; }
 .g-verslim .g-vercard-list { padding: 10px 12px; gap: 6px; }
-/* 动作条:一排小钮 + 右端注明作用对象(v几)—— 换版看,条上的钮跟着换语义 */
-.g-veracts { flex: none; display: flex; align-items: center; gap: 5px; padding: 9px 14px; border-bottom: 1px solid var(--sh-line); background: #f9fafc; }
-.g-veracts .g-ver-act { padding: 4px 10px; letter-spacing: .06em; }
+/* 动作条:**四枚同款同排**(新建 · 激活/停用 · 改名 · 删除),右端注明作用对象(v几)——
+   换版看,条上的钮跟着换语义;新建不再另作一枚蓝芯片挂在头上 */
+.g-veracts { flex: none; display: flex; align-items: center; gap: 6px; padding: 9px 14px; border-bottom: 1px solid var(--sh-line); background: #f9fafc; }
+.g-veracts { flex-wrap: nowrap; }
+.g-veracts .g-ver-act { flex: none; display: inline-flex; align-items: center; gap: 3px; padding: 5px 9px; letter-spacing: .02em; white-space: nowrap; }
 .g-veracts .who { margin-left: auto; font: 600 9.5px/1 var(--sh-mono); letter-spacing: .1em; color: var(--sh-muted); }
 .g-verrow { display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 9px 11px; border: 1px solid var(--sh-line); border-left: 3px solid var(--sh-steel); background: #fff; font-family: var(--sh-mono); font-size: 10px; color: #3a4452; text-align: left; cursor: pointer; transition: border-color var(--t-fast); }
 .g-verrow:hover { border-color: #aeb9c6; }
@@ -662,6 +664,12 @@
 .g-tbin:focus { outline: 0; }
 .g-tbrow:focus-within, .g-tbedge:focus-within { border-bottom-color: #4e7daf; }
 .g-tbin.sel { appearance: none; padding-right: 18px; background: transparent url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" fill="none" stroke="%2346586A" stroke-width="1.5"/></svg>') no-repeat right 2px center; cursor: pointer; }
+/* 「实现」选择器:**真控件** —— 无框下拉在窄轨里读成一行普通文字,人不知道能点。
+   有边有底有箭头,一眼是个选择框;这是节点属性里唯一要「选东西」的控件,就它带框。 */
+.g-tbsel { width: 100%; box-sizing: border-box; height: 32px; padding: 0 26px 0 10px; border: 1px solid #b9c4d2; border-radius: 6px; background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" fill="none" stroke="%2346586A" stroke-width="1.5"/></svg>') no-repeat right 9px center; appearance: none; color: var(--sh-ink); font: inherit; font-size: 12.5px; cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
+.g-tbsel:hover { border-color: #8fa3b8; }
+.g-tbsel:focus-visible { outline: 0; border-color: #4e7daf; box-shadow: 0 0 0 2px rgba(78, 125, 175, .18); }
+
 .g-tblink { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; padding: 0; font-size: 11px; color: #23507e; cursor: pointer; }
 .g-tblink:hover { text-decoration: underline; }
 .g-tbrow .g-seg { align-self: center; }
@@ -666,14 +666,12 @@ function FlowLab({
           * (v几 · 状态 · 点边计数)—— 完整显示,不在行内再展开一排小钮。
           */}
          <aside className="g-vercard g-verslim">
-            <div className="g-vercard-h">
-              版本
-              <button className="g-ver-new" onClick={askClone} disabled={cloneVersion.isPending} title="以当前版为底克隆一版">
-                <Ico name="plus" s={11} /> 新建
-              </button>
-            </div>
-            {/* 动作条:激活/停用 · 改名 · 删除 —— 全部作用于下面列表里选中的那一版 */}
+            <div className="g-vercard-h">版本</div>
+            {/* 动作条:四枚同款同排 —— 新建 · 激活/停用 · 改名 · 删除,作用于正看的那一版 */}
            <div className="g-veracts">
+              <button className="g-ver-act" onClick={askClone} disabled={cloneVersion.isPending} title="以当前版为底克隆一版">
+                <Ico name="plus" s={10} /> 新建
+              </button>
              {pkg.version === activeVersion ? (
                <button className="g-ver-act" onClick={() => askRetire(pkg)}>
                  停用
@@ -700,7 +698,6 @@ function FlowLab({
              >
                删除
              </button>
-              <span className="who">v{pkg.version}</span>
            </div>
            {renaming && (
              <div className="g-verrename">
@@ -782,7 +779,7 @@ function FlowLab({
          <div className="g-vercard g-nodecard">
            <div className="g-vercard-h">
              节点 · 属性
-              <span className={'n' + (dirty ? ' dirty' : '')}>{dirty ? '有改动待保存' : '点节点就地填写'}</span>
+              {dirty && <span className="n dirty">有改动待保存</span>}
              <button
                className="g-ver-new"
                disabled={!dirty || save.isPending}
@@ -905,7 +902,7 @@ function FlowLab({
                  <em>实现 · 链接自活动库</em>
                  <span className="v col">
                    <select
-                      className="g-tbin sel"
+                      className="g-tbsel"
                      value={refAct?.activityId ?? ''}
                      onChange={(e) => patch((n) => ({ ...n, act: e.target.value === '' ? undefined : e.target.value }))}
                    >