Archived
测试台与节点属性三改:拆盒 · 收色 · 让三件实物说话
上一轮的病根认下来:暗侧是「盒子摞盒子」—— bed/panel/panel2 三层深蓝几乎同色,
每节各带一条填色题头栏,纸信缩在盒子里像张明信片;磷光、琥珀、青蓝、暖纸四个
色温体系打架。节点属性那条竖格线逐行断裂,类型切换是个外来的灰块。
**测试台 · 拆盒**:台面上只留三件「实物」——纸信(暖白)、抽键读数屏(纯黑凹屏)、
起单钮(磷光);其余全部退成台面排版:
· 左右两栏不再是描边圆角盒,一道竖细线分栏;节题从填色横栏改成
疏排大写 + 底缘细线 —— 是标题,不是盒盖。
· 被测流选中态只亮一道磷光左棱 + 提亮文字,撤掉整块青染 —— 色彩留给读数屏。
· 读数屏撑满栏宽、值放大;「必填」从描框小徽退成缀在键名后的小字 ——
屏上的字越少越像屏。
· 纸信撑满右栏成为主角:内距 22px、主题 14px 半粗、正文行高 2;
纸上聚焦一律墨色加深 —— 琥珀与磷光都留给机器侧,纸只有纸的颜色。
· 起单条撤掉渐变毛玻璃,平铺台面 + 一道细线。
**节点属性**:335px 窄轨里逐行断裂的竖格线比没有更乱 —— 改标签在上、值在下的
叠排,行距放足,图签味交给 mono 大写与行线;类型切换从灰色分段控件改成
**两枚迷你节点皮肤**:选活动点就是一小块画布蓝,选审批点就是一小块琥珀 ——
切换器长成它代表的东西。
教训一并修:上一轮一段 CSS 替换因原文不匹配**静默没吃上**(没加 assert),
截图看着旧样还以为改了 —— 这轮逐条 grep 验证每段都落了。
五闸绿。
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KeDBx2PHLavbURXB8LJJ7m
This commit is contained in:
@@ -644,15 +644,16 @@
|
||||
.g-nchip.apr { border-color: #b98432; background: #fbf0dc; }
|
||||
.g-nchip.apr > em { color: #b98432; }
|
||||
|
||||
/* 图签行:76px 标签格(右缘细线即「格线」)+ 值格;行间细实线 —— 表格,不是表单 */
|
||||
.g-tbrow { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 0 12px; padding: 9px 0; border-bottom: 1px solid var(--sh-grid, #edf1f5); }
|
||||
.g-tbrow > em { align-self: start; padding-top: 2px; border-right: 1px solid var(--sh-line); font: 600 9px/1.7 var(--sh-mono); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--sh-steel); }
|
||||
.g-tbrow > .v { min-width: 0; font-size: 12.5px; color: var(--sh-ink); }
|
||||
.g-tbrow > .v.mono { font-family: var(--sh-mono); font-weight: 700; font-size: 12px; }
|
||||
.g-tbrow > .v.col { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
|
||||
/* 图签行:标签在上(mono 大写小字)、值在下 —— 窄轨里逐行断裂的竖格线比没有更乱,
|
||||
图签味交给字与行线;行距放足,一行一件事。 */
|
||||
.g-tbrow { display: flex; flex-direction: column; align-items: stretch; gap: 5px; padding: 12px 2px; border-bottom: 1px solid var(--sh-grid, #edf1f5); }
|
||||
.g-tbrow > em { font: 600 8.5px/1 var(--sh-mono); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--sh-muted); }
|
||||
.g-tbrow > .v { min-width: 0; font-size: 13px; color: var(--sh-ink); }
|
||||
.g-tbrow > .v.mono { font-family: var(--sh-mono); font-weight: 700; font-size: 12.5px; }
|
||||
.g-tbrow > .v.col { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
|
||||
.g-tbrow > .v small.warn { font-size: 10px; color: var(--sh-brass); }
|
||||
/* 值格输入:无框,聚焦时行底线转钢蓝 —— 格子本身就是边界,不再套一层输入框 */
|
||||
.g-tbin { width: 100%; box-sizing: border-box; border: 0; background: transparent; padding: 1px 0; color: var(--sh-ink); font: inherit; font-size: 12.5px; }
|
||||
.g-tbin { width: 100%; box-sizing: border-box; border: 0; background: transparent; padding: 1px 0; color: var(--sh-ink); font: inherit; font-size: 13px; }
|
||||
.g-tbin.mono { font-family: var(--sh-mono); font-size: 11.5px; }
|
||||
.g-tbin::placeholder { color: #a8b2be; }
|
||||
.g-tbin:focus { outline: 0; }
|
||||
@@ -662,10 +663,19 @@
|
||||
.g-tblink:hover { text-decoration: underline; }
|
||||
.g-tbrow .g-seg { align-self: center; }
|
||||
|
||||
/* 类型切换 = 两枚**迷你节点皮肤**:选活动点就是一小块画布蓝,选审批点就是一小块琥珀 ——
|
||||
切换器自己长成它代表的东西,不是一个外来的灰色分段控件。 */
|
||||
.g-ntype { display: flex; gap: 8px; }
|
||||
.g-ntype button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; border: 1.5px solid var(--sh-line); border-radius: 6px; background: #fff; color: var(--sh-muted); font: 600 11.5px/1 var(--sans); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast); }
|
||||
.g-ntype button:hover { border-color: #aeb9c6; }
|
||||
.g-ntype button.on.act { border-color: #4e7daf; background: #e8f1fb; color: #23507e; }
|
||||
.g-ntype button.on.apr { border-color: #b98432; background: #fbf0dc; color: #8a5f1c; }
|
||||
.g-ntype button:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
|
||||
|
||||
/* 出边带 + 路由行:E号 → 去向(名),条件在下一行的值位 —— 一条共用提示住带右角 */
|
||||
.g-tbband { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; padding: 7px 0 6px; border-bottom: 1px solid var(--sh-line); font: 600 9.5px/1 var(--sh-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sh-steel); }
|
||||
.g-tbband { display: flex; align-items: baseline; gap: 8px; margin-top: 18px; padding: 0 2px 7px; border-bottom: 1px solid var(--sh-line); font: 600 9.5px/1 var(--sh-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sh-steel); }
|
||||
.g-tbband .x { margin-left: auto; font-size: 8.5px; letter-spacing: .04em; text-transform: none; color: var(--sh-muted); }
|
||||
.g-tbedge { display: flex; flex-direction: column; gap: 3px; padding: 8px 0 9px; border-bottom: 1px solid var(--sh-grid, #edf1f5); }
|
||||
.g-tbedge { display: flex; flex-direction: column; gap: 5px; padding: 11px 2px; border-bottom: 1px solid var(--sh-grid, #edf1f5); }
|
||||
.g-tbedge .rt { display: flex; align-items: baseline; gap: 6px; font-family: var(--sh-mono); font-size: 10px; color: var(--sh-muted); }
|
||||
.g-tbedge .rt b { font-size: 11px; font-weight: 700; color: var(--sh-ink); }
|
||||
.g-tbedge .rt svg { align-self: center; color: var(--sh-muted); }
|
||||
@@ -745,7 +755,7 @@
|
||||
}
|
||||
|
||||
/* ── 仪器顶条:一盏灯 + 状态词 —— 装配态与观测态共用同一根 ── */
|
||||
.tb-strip { display: flex; align-items: center; gap: 10px; min-height: 26px; padding: 1px 4px 3px; }
|
||||
.tb-strip { display: flex; align-items: center; gap: 11px; min-height: 30px; padding: 2px 2px 10px; border-bottom: 1px solid #1b2a44; margin-bottom: 2px; }
|
||||
.tb-lamp { flex: none; width: 9px; height: 9px; border-radius: 50%; background: currentColor; box-shadow: 0 0 9px currentColor; }
|
||||
.tb-lamp.idle { color: var(--sh-muted); background: transparent; border: 1.5px solid currentColor; box-shadow: none; }
|
||||
.tb-lamp.live { color: var(--sh-live); }
|
||||
@@ -754,7 +764,7 @@
|
||||
.tb-lamp.bad { color: var(--sh-alarm); }
|
||||
.tb-lamp.breathe { animation: tbPulse 2.4s ease-in-out infinite; }
|
||||
@keyframes tbPulse { 50% { opacity: .4; box-shadow: 0 0 2px currentColor; } }
|
||||
.tb-strip .word { font: 700 11px/1 var(--sh-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--sh-ink); }
|
||||
.tb-strip .word { font: 700 12px/1 var(--sh-mono); letter-spacing: .26em; text-transform: uppercase; color: var(--sh-ink); }
|
||||
.tb-strip .det { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--sh-steel); }
|
||||
.tb-strip .det .auto { font: 500 9.5px/1 var(--sh-mono); font-style: normal; color: var(--sh-muted); }
|
||||
.tb-strip .x { margin-left: auto; flex: none; display: flex; align-items: center; gap: 8px; font: 600 9.5px/1 var(--sh-mono); letter-spacing: .1em; color: var(--sh-muted); }
|
||||
@@ -765,13 +775,15 @@
|
||||
.tb-stop:disabled { opacity: .5; cursor: default; }
|
||||
.tb-stop:focus-visible { outline: 2px solid var(--sh-alarm); outline-offset: 1px; }
|
||||
|
||||
/* ── 装配台:左被测流,右两节 ── */
|
||||
.g-rig { display: grid; grid-template-columns: minmax(236px, .78fr) minmax(0, 2fr); gap: 10px; align-items: start; }
|
||||
.g-rig-l, .g-rig-r { display: flex; flex-direction: column; min-width: 0; background: var(--sh-panel); border: 1px solid var(--sh-line); border-radius: 10px; overflow: clip; }
|
||||
/* ── 装配台:**拆盒**(2026-07-30 三改)—— 台面上只有三件「实物」:纸信、黑读数屏、
|
||||
起单钮;其余全是台面排版。两栏之间一道竖细线,不再是两只描边盒子摞题头栏。 */
|
||||
.g-rig { display: grid; grid-template-columns: minmax(232px, 280px) minmax(0, 1fr); gap: 0; align-items: stretch; }
|
||||
.g-rig-l { display: flex; flex-direction: column; min-width: 0; padding-right: 16px; border-right: 1px solid #16233c; }
|
||||
.g-rig-r { display: flex; flex-direction: column; min-width: 0; padding-left: 18px; }
|
||||
|
||||
/* 节题:mono 小号 + 序号章 */
|
||||
.g-rig-h { display: flex; align-items: center; gap: 8px; padding: 10px 13px 9px; border-bottom: 1px solid var(--sh-line); background: var(--sh-panel-2); font-family: var(--sh-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--sh-steel); }
|
||||
.g-rig-l > * + .g-rig-h, .g-rig-r > * + .g-rig-h { border-top: 1px solid var(--sh-line); }
|
||||
/* 节题:不再是填色横栏 —— 一行疏排大写 + 底缘细线,是**标题**不是盒盖 */
|
||||
.g-rig-h { display: flex; align-items: center; gap: 8px; padding: 12px 0 8px; border-bottom: 1px solid #1d2c48; font-family: var(--sh-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--sh-steel); }
|
||||
.g-rig-l > * + .g-rig-h, .g-rig-r > * + .g-rig-h { margin-top: 14px; }
|
||||
.g-rig-h svg { color: var(--sh-steel); opacity: .7; }
|
||||
.g-rig-h .n { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 15px; border: 1px solid var(--sh-live); border-radius: 3px; color: var(--sh-live); font-size: 9px; letter-spacing: .06em; }
|
||||
.g-rig-h .x { margin-left: auto; display: flex; align-items: center; gap: 6px; letter-spacing: .04em; text-transform: none; color: var(--sh-muted); }
|
||||
@@ -781,52 +793,54 @@
|
||||
.tb-ghost:hover { border-color: var(--sh-lineb); background: var(--sh-panel); color: var(--sh-ink); }
|
||||
.tb-ghost:focus-visible { outline: 2px solid var(--sh-live); outline-offset: 1px; }
|
||||
|
||||
/* 左栏:一包一条 —— 选中的那条亮磷光左线(机器活了) */
|
||||
.tb-pks { display: flex; flex-direction: column; gap: 2px; padding: 7px; }
|
||||
.g-pk { display: flex; flex-direction: column; gap: 4px; padding: 9px 11px; border: 1px solid transparent; border-left: 2px solid var(--sh-line); border-radius: 0 7px 7px 0; background: transparent; text-align: left; font: inherit; color: var(--sh-ink); cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast); }
|
||||
.g-pk:hover { background: var(--sh-panel-2); border-left-color: var(--sh-steel); }
|
||||
.g-pk.on { background: var(--sh-live-dim); border-left-color: var(--sh-live); }
|
||||
/* 左栏:一包一行 —— 选中只亮一道磷光左棱 + 提亮文字;不整块染色,色彩留给读数屏 */
|
||||
.tb-pks { display: flex; flex-direction: column; padding: 4px 0 2px; }
|
||||
.g-pk { display: flex; flex-direction: column; gap: 3px; padding: 9px 10px 9px 12px; border: 0; border-left: 2px solid transparent; background: transparent; text-align: left; font: inherit; color: var(--sh-steel); cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast); }
|
||||
.g-pk:hover { color: var(--sh-ink); background: rgba(255, 255, 255, .025); }
|
||||
.g-pk.on { border-left-color: var(--sh-live); color: var(--sh-ink); background: rgba(255, 255, 255, .03); }
|
||||
.g-pk:focus-visible { outline: 2px solid var(--sh-live); outline-offset: -2px; }
|
||||
.g-pk b { font-size: 12.5px; font-weight: 700; }
|
||||
.g-pk b { font-size: 13px; font-weight: 700; }
|
||||
.g-pk .id { font-family: var(--sh-mono); font-size: 10px; color: var(--sh-muted); overflow-wrap: anywhere; }
|
||||
.g-pk .cnt { display: flex; gap: 10px; font-family: var(--sh-mono); font-size: 9.5px; color: var(--sh-steel); }
|
||||
.g-pk .cnt { display: flex; gap: 10px; font-family: var(--sh-mono); font-size: 9.5px; color: var(--sh-muted); }
|
||||
.g-pk .cnt i { font-style: normal; }
|
||||
|
||||
/* ── 抽键预检读数屏(戏眼):黑色凹槽 + 一键一灯,值走磷光 ── */
|
||||
.tb-well { margin: 8px 8px 6px; padding: 3px 0; background: var(--sh-well); border: 1px solid #182742; border-radius: 8px; box-shadow: inset 0 2px 8px rgba(0, 0, 0, .45); }
|
||||
.tb-well-r { display: grid; grid-template-columns: 16px minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 7px; padding: 6px 11px 6px 9px; font-family: var(--sh-mono); }
|
||||
/* ── 抽键预检读数屏(戏眼):左栏唯一的「实物」—— 黑色凹屏,一键一灯,值走磷光 ── */
|
||||
.tb-well { margin: 12px 0 8px; padding: 5px 0; background: var(--sh-well); border: 1px solid #1a2946; border-radius: 9px; box-shadow: inset 0 2px 10px rgba(0, 0, 0, .5); }
|
||||
.tb-well-r { display: grid; grid-template-columns: 16px minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 7px; padding: 8px 12px 8px 10px; font-family: var(--sh-mono); }
|
||||
.tb-well-r + .tb-well-r { border-top: 1px dashed #14213a; }
|
||||
.tb-well-r > i { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--sh-muted); background: transparent; justify-self: center; transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast); }
|
||||
.tb-well-r.hit > i { border-color: var(--sh-live); background: var(--sh-live); box-shadow: 0 0 7px var(--sh-live); }
|
||||
.tb-well-r.dead > i { border-color: var(--sh-alarm); }
|
||||
.tb-well-r .k { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; color: var(--sh-steel); }
|
||||
.tb-well-r .k em { flex: none; font: 600 8px/1 var(--sh-mono); font-style: normal; letter-spacing: .1em; padding: 2px 4px; border: 1px solid rgba(242, 180, 92, .5); border-radius: 3px; color: var(--sh-brass); }
|
||||
.tb-well-r .v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; font-size: 11px; font-weight: 700; color: var(--sh-muted); }
|
||||
/* 必填不描框:一枚小字缀在键名后就够 —— 屏上的字越少越像屏 */
|
||||
.tb-well-r .k em { flex: none; font: 600 8.5px/1 var(--sh-mono); font-style: normal; color: var(--sh-muted); }
|
||||
.tb-well-r .v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; font-size: 12px; font-weight: 700; color: var(--sh-muted); }
|
||||
.tb-well-r.hit .v { color: var(--sh-live); text-shadow: 0 0 8px rgba(69, 220, 178, .35); }
|
||||
.tb-well-r.dead .v { color: var(--sh-alarm); font-weight: 600; }
|
||||
.tb-well-none { margin: 0; padding: 10px 12px; font-size: 11px; line-height: 1.8; color: var(--sh-muted); }
|
||||
.tb-well-t { margin: 0; padding: 0 12px 11px; font-size: 10px; line-height: 1.7; color: var(--sh-muted); }
|
||||
.tb-well-t { margin: 0; padding: 6px 2px 0; font-size: 10px; line-height: 1.7; color: var(--sh-muted); }
|
||||
|
||||
/* ── ① 一封信 = 一张**纸**压在暗台面上:整台仪器里唯一的浅色面 ──
|
||||
「机器说 mono、信是外界」推到视觉结论 —— 外界伸进仪器的那件东西,长得像张纸。
|
||||
暖白纸面、纸边细线、投影浮起;信上全是无衬线,只有标签是小号暖灰。 */
|
||||
.tb-paper { margin: 12px 14px 14px; border: 1px solid #d9d3c4; border-radius: 5px; background: #fbfaf6; box-shadow: 0 2px 10px rgba(0, 0, 0, .38), 0 8px 26px -10px rgba(0, 0, 0, .5); }
|
||||
.tb-pp-h { padding: 4px 16px 0; }
|
||||
.tb-pp-r { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 0 7px; border-bottom: 1px solid #ece7da; }
|
||||
.tb-paper { margin: 14px 0 0; border: 1px solid #d9d3c4; border-radius: 6px; background: #fbfaf6; box-shadow: 0 3px 14px rgba(0, 0, 0, .42), 0 14px 38px -12px rgba(0, 0, 0, .55); }
|
||||
.tb-pp-h { padding: 8px 22px 0; }
|
||||
.tb-pp-r { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 12px; padding: 9px 0 8px; border-bottom: 1px solid #ece7da; }
|
||||
.tb-pp-r > em { font: 600 10px/1.6 var(--sans); font-style: normal; color: #8b8674; }
|
||||
.tb-pp-i { width: 100%; box-sizing: border-box; border: 0; background: transparent; padding: 0; color: #2b3040; font: 400 13px/1.7 var(--sans); }
|
||||
.tb-pp-i.strong { font-weight: 600; }
|
||||
.tb-pp-i.strong { font-weight: 650; font-size: 14px; }
|
||||
.tb-pp-i::placeholder { color: #b3ad9c; }
|
||||
.tb-pp-i:focus { outline: 0; }
|
||||
.tb-pp-r:focus-within { border-bottom-color: #b98432; }
|
||||
/* 纸上的聚焦是**墨色**加深 —— 纸是暖的,琥珀与磷光都留给机器侧 */
|
||||
.tb-pp-r:focus-within { border-bottom-color: #8b8674; }
|
||||
.tb-pp-i.sel { appearance: none; padding-right: 20px; 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="%238b8674" stroke-width="1.5"/></svg>') no-repeat right 4px center; cursor: pointer; }
|
||||
.tb-pp-i.sel option { background: #fbfaf6; color: #2b3040; }
|
||||
/* 正文:纸上的一片空,不描边不描线 —— 写信不是填表 */
|
||||
.tb-pp-body { display: block; width: 100%; box-sizing: border-box; border: 0; background: transparent; padding: 12px 16px 6px; color: #2b3040; font: 400 13px/1.9 var(--sans); resize: none; min-height: 110px; }
|
||||
.tb-pp-body { display: block; width: 100%; box-sizing: border-box; border: 0; background: transparent; padding: 14px 22px 8px; color: #2b3040; font: 400 13.5px/2 var(--sans); resize: none; min-height: 118px; }
|
||||
.tb-pp-body::placeholder { color: #b3ad9c; }
|
||||
.tb-pp-body:focus { outline: 0; }
|
||||
/* 附件签条:纸的下沿,一条虚线隔开 —— 夹在信末的东西 */
|
||||
.tb-pp-att { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 9px 16px 12px; border-top: 1px dashed #ddd7c8; }
|
||||
.tb-pp-att { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 22px 14px; border-top: 1px dashed #ddd7c8; }
|
||||
.tb-att { display: inline-flex; align-items: center; gap: 5px; padding: 3px 6px 3px 8px; border: 1px solid #ddd7c8; border-radius: 4px; background: #f4f1e8; font: 500 11px/1.5 var(--sans); color: #4a4536; }
|
||||
.tb-att svg { color: #8b8674; }
|
||||
.tb-att i { font-style: normal; font-family: var(--sh-mono); font-size: 9px; color: #8b8674; }
|
||||
@@ -834,10 +848,10 @@
|
||||
.tb-att button:hover { color: #b0413e; }
|
||||
.tb-att-add { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border: 1px dashed #c9c2ae; border-radius: 4px; background: transparent; color: #8b8674; font: 500 11px/1.5 var(--sans); cursor: pointer; }
|
||||
.tb-att-add:hover { border-color: #8b8674; color: #4a4536; }
|
||||
.tb-att-add:focus-visible, .tb-att button:focus-visible, .tb-pp-i:focus-visible { outline: 2px solid #b98432; outline-offset: 1px; }
|
||||
.tb-att-add:focus-visible, .tb-att button:focus-visible { outline: 2px solid #8b8674; outline-offset: 1px; }
|
||||
|
||||
/* ── ② 节点指派:一条竖轨挂着所有节点,右端是插座 —— 插了人点琥珀 ── */
|
||||
.tb-asn { display: flex; flex-direction: column; padding: 6px 14px 10px; }
|
||||
.tb-asn { display: flex; flex-direction: column; padding: 4px 0 10px; }
|
||||
.tb-asn-r { display: grid; grid-template-columns: 20px 34px minmax(0, 1fr) 40px minmax(150px, 190px); align-items: center; gap: 9px; padding: 6px 0; }
|
||||
.tb-asn-r .rail { position: relative; align-self: stretch; }
|
||||
.tb-asn-r .rail::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1px solid var(--sh-line); }
|
||||
@@ -858,7 +872,7 @@
|
||||
.tb-socket option { background: var(--sh-panel); color: var(--sh-ink); }
|
||||
|
||||
/* ── 起单条:仪器的前面板边缘 —— 全屏唯一的动作钮,灯全亮才上膛 ── */
|
||||
.tb-fire { position: sticky; bottom: -1px; z-index: 3; display: flex; align-items: center; gap: 14px; margin-top: auto; padding: 11px 14px; border-top: 1px solid var(--sh-line); border-radius: 0 0 10px 10px; background: linear-gradient(to bottom, rgba(16, 26, 44, .92), var(--sh-panel-2)); backdrop-filter: blur(4px); }
|
||||
.tb-fire { position: sticky; bottom: -1px; z-index: 3; display: flex; align-items: center; gap: 14px; margin-top: auto; padding: 12px 0; border-top: 1px solid #1d2c48; background: var(--sh-bed); }
|
||||
.tb-fire .say { min-width: 0; font-size: 11px; line-height: 1.6; color: var(--sh-muted); }
|
||||
.tb-fire .say .bad { font-weight: 600; color: var(--sh-alarm); }
|
||||
.tb-go { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 22px; border: 1px solid var(--sh-lineb); border-radius: 8px; background: var(--sh-panel); color: var(--sh-steel); font: 700 12.5px/1 var(--sh-mono); letter-spacing: .12em; cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast); }
|
||||
|
||||
@@ -39,7 +39,6 @@ import {
|
||||
PageHead,
|
||||
QueryGate,
|
||||
Sec,
|
||||
Seg,
|
||||
St,
|
||||
} from '@web-shared/gov/primitives.tsx';
|
||||
import type { Nav } from '@web-shared/gov/gov-route.ts';
|
||||
@@ -879,14 +878,21 @@ function FlowLab({
|
||||
{node.kind === 'activity' && (
|
||||
<div className="g-tbrow">
|
||||
<em>类型</em>
|
||||
<Seg
|
||||
value={node.flavor === 'approval' ? 'approval' : 'act'}
|
||||
options={[
|
||||
{ k: 'act', label: '活动点' },
|
||||
{ k: 'approval', label: '审批点' },
|
||||
]}
|
||||
onPick={(k) => patch((n) => ({ ...n, flavor: k === 'approval' ? ('approval' as const) : undefined }))}
|
||||
/>
|
||||
{/* 切换器长成它代表的东西:两枚迷你节点皮肤(画布蓝 / 琥珀) */}
|
||||
<div className="g-ntype">
|
||||
<button
|
||||
className={'act' + (node.flavor !== 'approval' ? ' on' : '')}
|
||||
onClick={() => patch((n) => ({ ...n, flavor: undefined }))}
|
||||
>
|
||||
活动点
|
||||
</button>
|
||||
<button
|
||||
className={'apr' + (node.flavor === 'approval' ? ' on' : '')}
|
||||
onClick={() => patch((n) => ({ ...n, flavor: 'approval' as const }))}
|
||||
>
|
||||
审批点
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{node.kind === 'activity' && node.flavor !== 'approval' && (
|
||||
|
||||
Reference in New Issue
Block a user