agentworkshop 0.7.38 → 0.7.40

package/app/pages/daq/[id].vue

@@ -7,7 +7,7 @@
 import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { useDcwStream } from '@/app/composables/workshop/useDcwStream'
-import { useDaqStream, type DaqFrameLive } from '@/app/composables/workshop/useDaqStream'
+import { useDaqStream, type DaqFrameLive, type DaqTsdbPoint } from '@/app/composables/workshop/useDaqStream'
 import { useDeviceTwins } from '@/app/composables/workshop/useDeviceTwins'
 import { daqKeyFromRef, DAQ_DRIVERS, type DaqDriverKind, type DaqNodeState, type DriverConfigField, type DriverTestResult as DaqDriverTestResult } from '#shared/daq-protocol'
 
@@ -210,7 +210,8 @@ const availableDevices = computed(() =>
 )
 
 // ---------- 历史(时序库) ----------
-type ChartRow = { at: number, value?: number, avg?: number, min?: number, max?: number }
+/** 历史点 = 数采时序点(直接用 DaqTsdbPoint:手写副本漏了 state/cnt,模板取值即报错) */
+type ChartRow = DaqTsdbPoint
 const historyPoints = ref<ChartRow[]>([])
 const bucketMs = ref<number>(15000)
 const histLoading = ref(false)

package/app/pages/daq/index.vue

@@ -263,6 +263,75 @@ const filteredNodes = computed<DaqNodeLive[]>(() => daq.nodes.filter((n) => {
   return true
 }))
 
+/* ── 节点表窗口化渲染(virtual window) ────────────────────────────────────────
+ * 为什么必须做:节点表是**全量**渲染的,而每一行都带实时读数 + sparkline,
+ * 每次读数合批(500ms)都会点亮所有行。实测 498 个节点时:
+ *   · DOM 节点 13.5 万
+ *   · 主线程每秒 ≈3.8 万次 DOM 变更(其中 99.6% 来自这张表)
+ *   · 帧率掉到 24 FPS、92% 的帧超时、单帧最大间隔 361ms、长任务阻塞 936ms
+ * 也就是说"数据刷新太频繁导致卡顿"的根因不是刷新频率,而是**离屏行也在被补丁**。
+ *
+ * 做法:按页面滚动窗口只挂载可见行 + 上下各 OVERSCAN 行,用两条占位 <tr> 撑起
+ * 滚动高度。行的实际高度由 contain-intrinsic-size 固定为 42px(见样式),所以
+ * 窗口计算不需要测量 DOM。
+ *
+ * 为什么用**页面滚动**而不是容器滚动:这张表的滚动条是页面的(.table-card 只负责
+ * 横向),所以窗口要跟着 window.scrollY 走。
+ */
+const VS_ROW_H = 42
+const VS_OVERSCAN = 8
+const nodesTableRef = ref<HTMLTableElement | null>(null)
+const winStart = ref(0)
+const winEnd = ref(60)
+
+const visibleNodes = computed<DaqNodeLive[]>(() => {
+  const list = filteredNodes.value
+  const s = Math.min(winStart.value, Math.max(0, list.length - 1))
+  return list.slice(s, winEnd.value)
+})
+const padTopPx = computed(() => winStart.value * VS_ROW_H)
+const padBottomPx = computed(() => Math.max(0, (filteredNodes.value.length - winEnd.value) * VS_ROW_H))
+
+let winRaf = 0
+function updateNodeWindow(): void {
+  const el = nodesTableRef.value
+  if (!el) return
+  const total = filteredNodes.value.length
+  const vh = window.innerHeight || 800
+  // 表格顶部相对文档的坐标(表头 40px 也算进"还没到第一行")
+  const tableTop = el.getBoundingClientRect().top + window.scrollY + 40
+  const firstVisible = Math.floor((window.scrollY - tableTop) / VS_ROW_H)
+  const count = Math.ceil(vh / VS_ROW_H) + VS_OVERSCAN * 2
+  const s = Math.max(0, Math.min(firstVisible - VS_OVERSCAN, Math.max(0, total - 1)))
+  const e = Math.max(s, Math.min(total, s + count))
+  if (s !== winStart.value) winStart.value = s
+  if (e !== winEnd.value) winEnd.value = e
+}
+function scheduleNodeWindow(): void {
+  if (winRaf) return
+  winRaf = requestAnimationFrame(() => {
+    winRaf = 0
+    updateNodeWindow()
+  })
+}
+
+onMounted(() => {
+  updateNodeWindow()
+  window.addEventListener('scroll', scheduleNodeWindow, { passive: true })
+  window.addEventListener('resize', scheduleNodeWindow, { passive: true })
+})
+onBeforeUnmount(() => {
+  window.removeEventListener('scroll', scheduleNodeWindow)
+  window.removeEventListener('resize', scheduleNodeWindow)
+  if (winRaf) cancelAnimationFrame(winRaf)
+})
+// 筛选/搜索改变行数后窗口必须重算(否则会停在旧的切片上,看起来"表空了")
+watch(() => filteredNodes.value.length, () => {
+  winStart.value = 0
+  winEnd.value = Math.min(filteredNodes.value.length, winEnd.value || 60)
+  scheduleNodeWindow()
+})
+
 // 设备名映射(device-twins 注册表;绑定筛选下拉展示用)
 const deviceTwins = useDeviceTwins()
 const nodeDevices = new Map<string, string>()
@@ -1187,7 +1256,7 @@ async function doReconnect(): Promise<void> {
                 class="opt-series"
               >
                 <div
-                  v-for="ch in optSeriesOf[r.id].channels"
+                  v-for="ch in (optSeriesOf[r.id]?.channels ?? [])"
                   :key="ch.nodeId"
                   class="opt-ch"
                 >
@@ -1201,7 +1270,7 @@ async function doReconnect(): Promise<void> {
                   <span class="mono">{{ ch.ch }} {{ fmtPoint(ch.points.at(-1)?.value ?? ch.points.at(-1)?.avg) }}{{ ch.unit }}</span>
                 </div>
                 <p
-                  v-if="optSeriesOf[r.id].channels.length === 0"
+                  v-if="(optSeriesOf[r.id]?.channels.length ?? 0) === 0"
                   class="opt-empty"
                 >
                   {{ $t('daq.k1opte002') }}
@@ -1472,7 +1541,10 @@ async function doReconnect(): Promise<void> {
             </div>
           </div>
         </div>
-        <table class="nodes-table">
+        <table
+          ref="nodesTableRef"
+          class="nodes-table"
+        >
           <thead>
             <tr>
               <th>{{ $t('daq.k45uio067') }}</th>
@@ -1496,11 +1568,33 @@ async function doReconnect(): Promise<void> {
             </tr>
           </thead>
           <tbody>
+            <!-- 上占位行:撑起"已滚过"的高度,让滚动条与真实全量列表一致 -->
+            <tr
+              v-if="padTopPx > 0"
+              class="vs-pad"
+              aria-hidden="true"
+            >
+              <td
+                :colspan="11"
+                :style="{ height: padTopPx + 'px' }"
+              />
+            </tr>
             <WorkshopDaqNodeRow
-              v-for="n in filteredNodes"
+              v-for="n in visibleNodes"
               :key="n.id"
               :n="n"
             />
+            <!-- 下占位行 -->
+            <tr
+              v-if="padBottomPx > 0"
+              class="vs-pad"
+              aria-hidden="true"
+            >
+              <td
+                :colspan="11"
+                :style="{ height: padBottomPx + 'px' }"
+              />
+            </tr>
             <tr v-if="daq.loaded && daq.nodes.length === 0">
               <td colspan="11">
                 <div
@@ -1570,9 +1664,15 @@ h1 { margin: 2px 0 4px; font-size: 30px; font-weight: 400; letter-spacing: -0.01
   align-items: center;
   justify-content: space-between;
 }
-.ctrl-left { display: flex; gap: 14px; align-items: center; }
+/* 窄屏前先写死「不可压缩」:药丸/周期项被 flex 收缩到 min-content → 中文退化成单列竖排。
+   保持自然宽度,由外层 flex-wrap 决定换行位置。 */
+.ctrl-left { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; min-width: 0; }
+.ctrl-left > *, .ctrl-right > * { flex: 0 0 auto; }
+.aw-pill { flex: 0 0 auto; white-space: nowrap; }
+/* 行内小按钮(确认/筛选/回滚…)同族:窄屏禁止中文折成两行 */
+.mini-btn, .mini-act, .pill-btn, .node-toggle { white-space: nowrap; }
 .aw-pill.running { background: var(--accent); }
-.cycle { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; color: var(--ink-faint); }
+.cycle { display: inline-flex; flex: 0 0 auto; gap: 6px; align-items: center; font-size: 12px; white-space: nowrap; color: var(--ink-faint); }
 .cycle input {
   width: 84px;
   padding: 4px 8px;
@@ -1581,7 +1681,8 @@ h1 { margin: 2px 0 4px; font-size: 30px; font-weight: 400; letter-spacing: -0.01
   border: 1px solid var(--line-strong);
   border-radius: var(--radius-chip);
 }
-.ctrl-metrics { display: flex; gap: 8px; align-items: center; font-size: 11.5px; color: var(--ink-soft); }
+.ctrl-metrics { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; font-size: 11.5px; color: var(--ink-soft); }
+.ctrl-metrics > span { white-space: nowrap; }
 .ctrl-metrics .sep { opacity: 0.4; }
 .ctrl-metrics .warn { color: var(--tone-warning-dot); }
 
@@ -1661,6 +1762,9 @@ h1 { margin: 2px 0 4px; font-size: 30px; font-weight: 400; letter-spacing: -0.01
 }
 
 .table-card { overflow-x: auto; }
+/* 窗口化占位行:只提供高度,不参与绘制/命中,也不继承单元格内距与下边框
+   (否则占位行会自带一条分割线和一个 9px 内距,滚动高度算不准) */
+.vs-pad td { padding: 0 !important; border: 0 !important; }
 .nodes-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
 /* 离屏行跳过布局/绘制(102 行长表;contain-intrinsic-size 给出占位高度防滚动条跳动) */
 .nodes-table tbody tr { content-visibility: auto; contain-intrinsic-size: auto 42px; }
@@ -1815,6 +1919,7 @@ h1 { margin: 2px 0 4px; font-size: 30px; font-weight: 400; letter-spacing: -0.01
 /* ---------- 未确认报警条(S5) ---------- */
 .alarm-bar {
   display: flex;
+  flex-wrap: wrap;
   gap: 12px;
   align-items: center;
   padding: 8px 14px;
@@ -1877,8 +1982,8 @@ h1 { margin: 2px 0 4px; font-size: 30px; font-weight: 400; letter-spacing: -0.01
 .alarm-item .ack:hover { opacity: 0.85; border-color: transparent; color: var(--paper-raised); }
 
 /* ---------- 添加节点向导 ---------- */
-.ctrl-right { display: flex; gap: 12px; align-items: center; }
-.add-btn { padding: 8px 16px; font-size: 13px; }
+.ctrl-right { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; min-width: 0; }
+.add-btn { padding: 8px 16px; font-size: 13px; white-space: nowrap; }
 .modal-mask {
   position: fixed;
   z-index: 50;
@@ -2110,4 +2215,99 @@ h1 { margin: 2px 0 4px; font-size: 30px; font-weight: 400; letter-spacing: -0.01
   stroke: var(--tone-info-dot);
   stroke-width: 1.5;
 }
+
+/* ══════════════════════════════════════════════════════════════════════════
+   页面级自适应加固(375 / 768 / 1440 三档)
+   根因统一:flex 子项被压缩到 min-content → 中文按钮退化成「单列竖排」,
+   左右两组控件抢同一行 → 右边缘越界。策略:先禁止压缩(nowrap),
+   再在窄屏把控制条改成「整行 / 两列」分层排布;筛选区单列堆叠 → 两列网格。
+   ══════════════════════════════════════════════════════════════════════════ */
+/* —— 标签字号地板(全档位,不只是窄屏)——
+   本页所有自有小标签原为 9.5–11px,低于「标签 ≥11.5px」验收线;统一抬到 11.5px。
+   注:节点表行内 10/10.5px 徽标在 app/components/workshop/DaqNodeRow.vue,不在本页职责内。 —— */
+.badge, .sec-label, .flt, .hint, .strip-label, .strip-label small,
+.line-pill small, .opt-status, .opt-time, .opt-line2, .mini-act,
+.src-badge, .kind-chip, .evt-row .t, .opt-count,
+.infra-banner .txt small { font-size: 11.5px; }
+.sub { font-size: 13px; }
+.alarm-item small, .alarm-row small { font-size: 11.5px; }
+
+@media (max-width: 900px) {
+  /* —— 兜底字号地板:本页任何 small/mono 小字在手持档不得低于 11.5px ——
+     逐类点名容易漏(实测 infra-banner 的配方名、line-pill 的 mono 小字都漏过),
+     这里用元素级兜底把整页收口;它放在本媒体块的**最后面**,
+     同特异度时后写者胜,所以不会破坏上面更细的排版意图。 */
+  .page small,
+  .page small.mono,
+  .page small.mono b {
+    font-size: 11.5px;
+  }
+
+  /* —— 触摸目标:报警「确认」在窄屏只有 44×22,手指点不中 —— */
+  .alarm-item { padding: 6px 10px; }
+  .alarm-item .ack, .mini-btn.ack { min-height: 32px; padding: 4px 12px; white-space: nowrap; }
+  .alarm-row { flex-wrap: wrap; }
+
+  /* —— 窄屏字号地板(正文 ≥12.5px / 标签 ≥11.5px)——
+     注:侧栏 8.5px/9.5px 属全局层(main.css / AppSidebar.vue),不在本页职责内 —— */
+  .flt, .sec-label, .hint { font-size: 11.5px; }
+  .inp-sel { font-size: 12.5px; }
+  .badge, .strip-label, .line-pill small { font-size: 11.5px; }
+  .ctrl-metrics { font-size: 12px; }
+  .evt-row { font-size: 12.5px; }
+  .evt-row .t, .src-badge, .kind-chip { font-size: 11.5px; }
+  .panel-head { font-size: 13px; }
+  .alarm-item, .alarm-item small, .alarm-row small, .opt-status, .mini-act,
+  .opt-time, .opt-line2, .clear-btn, .opt-count, .strip-label small { font-size: 11.5px; }
+  .tpl-table .range, .opt-empty, .panel-empty { font-size: 12px; }
+  .infra-banner .txt small { font-size: 11.5px; }
+  .m-title { font-size: 16px; }
+  .sub { font-size: 13px; }
+}
+
+@media (max-width: 700px) {
+  /* —— 控制器总控条:暂停全部采集 整行;两个周期项两列;两个 CTA 两列 —— */
+  .ctrl-card { padding: 12px 14px 11px; }
+  .ctrl-row { flex-direction: column; align-items: stretch; gap: 12px; }
+  .ctrl-left { gap: 10px; }
+  .ctrl-left > .aw-pill { flex: 1 1 100%; }
+  .ctrl-left > .cycle { flex: 1 1 calc(50% - 5px); justify-content: space-between; }
+  .cycle input { width: 62px; }
+  .ctrl-right { gap: 10px; }
+  .ctrl-metrics { flex: 1 1 100%; }
+  .ctrl-right > .add-btn { flex: 1 1 calc(50% - 5px); }
+
+  /* —— 未确认报警横条:标题独占一行,滚动轨吃满整宽(右侧内容不再被挤掉) —— */
+  .alarm-bar { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px; }
+  .bar-label { justify-content: flex-start; }
+  .alarm-scroll { width: 100%; padding-bottom: 3px; }
+  .alarm-item { max-width: 100%; }
+
+  /* —— 节点筛选工具条:单列下拉堆叠 → 两列网格 —— */
+  .tbl-toolbar { flex-direction: column; align-items: stretch; gap: 8px; padding: 11px 12px; }
+  .filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
+  .filters > .flt { min-width: 0; }
+  .inp-sel { width: 100%; min-width: 0; }
+  .flt-search { width: 100%; }
+  .clear-btn { grid-column: 1 / -1; min-height: 34px; }
+  .count { padding-bottom: 0; }
+
+  /* —— Agent 优化记录:筛选区两列网格;记录行允许换行,长节点名不再被切 —— */
+  .opt-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+  .opt-filters > .mini-act { grid-column: 1 / -1; min-height: 34px; }
+  .opt-line1 { flex-wrap: wrap; }
+  .opt-node { flex: 1 1 100%; overflow: visible; white-space: normal; }
+  .opt-time { margin-left: 0; }
+  .opt-ch { flex: 1 1 100%; }
+  .opt-spark { flex: 1 1 auto; width: auto; min-width: 96px; }
+
+  /* —— 主表:压缩单元格内边距,缩短横向滚动距离(表格横滚 + 首列 sticky 是全局层设计) —— */
+  .nodes-table th, .nodes-table :deep(td) { padding: 7px 8px; }
+  .table-card { -webkit-overflow-scrolling: touch; }
+  .opt-body.open { max-height: 70vh; }
+
+  /* —— 实时事件行:摘要原来只剩 141px 被省略号切掉 → 换行后独占整宽 —— */
+  .evt-row { flex-wrap: wrap; }
+  .evt-row .txt { flex: 1 1 100%; white-space: normal; overflow: visible; }
+}
 </style>

package/app/pages/dcw/[id].vue

@@ -872,16 +872,16 @@ function fmtPoint(p: { value?: number, avg?: number } | undefined): string {
 
         <div class="tpl-chips">
           <span
-            v-for="t in dcw.templates"
-            :key="t.key"
+            v-for="tpl in dcw.templates"
+            :key="tpl.key"
             class="tpl-chip"
-            :title="`${t.code} · ${t.min}~${t.max} ${t.unit}${t.semantics ? ` · ${t.semantics}` : ''}`"
+            :title="`${tpl.code} · ${tpl.min}~${tpl.max} ${tpl.unit}${tpl.semantics ? ` · ${tpl.semantics}` : ''}`"
           >
-            {{ t.name }} <small class="mono">{{ t.min }}~{{ t.max }}{{ t.unit }}</small>
+            {{ tpl.name }} <small class="mono">{{ tpl.min }}~{{ tpl.max }}{{ tpl.unit }}</small>
             <em
               class="tpl-tag"
-              :class="{ builtin: t.builtin }"
-            >{{ t.builtin ? $t('dcwDetail.k3x23c141') : $t('dcwDetail.k3t616a142') }}</em>
+              :class="{ builtin: tpl.builtin }"
+            >{{ tpl.builtin ? $t('dcwDetail.k3x23c141') : $t('dcwDetail.k3t616a142') }}</em>
           </span>
         </div>
 
@@ -1042,11 +1042,11 @@ function fmtPoint(p: { value?: number, avg?: number } | undefined): string {
               class="inp"
             >
               <option
-                v-for="t in dcw.templates"
-                :key="t.key"
-                :value="t.key"
+                v-for="tpl in dcw.templates"
+                :key="tpl.key"
+                :value="tpl.key"
               >
-                {{ t.name }} · {{ t.ch }}({{ t.min }}~{{ t.max }} {{ t.unit }}){{ t.builtin ? '' : $t('dcwDetail.kr45rk9157') }}
+                {{ tpl.name }} · {{ tpl.ch }}({{ tpl.min }}~{{ tpl.max }} {{ tpl.unit }}){{ tpl.builtin ? '' : $t('dcwDetail.kr45rk9157') }}
               </option>
             </select>
           </label>
@@ -2339,10 +2339,11 @@ function fmtPoint(p: { value?: number, avg?: number } | undefined): string {
 .adopt-list { display: flex; gap: 8px; flex-wrap: wrap; }
 .adopt-chip {
   display: inline-flex;
+  flex-wrap: wrap;
   gap: 6px;
   align-items: center;
   padding: 4px 8px;
-  font-size: 11px;
+  font-size: 11.5px;
   color: #e8eef8;
   background: rgba(13, 20, 32, 0.7);
   border: 1px solid rgba(60, 80, 110, 0.5);
@@ -2366,35 +2367,36 @@ h1 { margin: 2px 0 4px; font-size: 30px; font-weight: 400; letter-spacing: -0.01
   border: 1px solid var(--line-strong);
   border-radius: var(--radius-chip);
 }
-.tri-cell small { font-size: 10px; color: var(--ink-faint); }
+.tri-cell small { font-size: 11.5px; color: var(--ink-faint); }
 .tri-cell b { font-size: 17px; color: var(--ink); }
 .ledger-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; }
-.sec-t { display: block; margin-bottom: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; color: var(--ink-faint); }
-.ledger-list { display: flex; flex-direction: column; gap: 3px; max-height: 200px; margin: 0; padding: 0; overflow: auto; font-size: 11px; color: var(--ink-soft); list-style: none; }
+.sec-t { display: block; margin-bottom: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; color: var(--ink-faint); }
+.ledger-list { display: flex; flex-direction: column; gap: 3px; max-height: 200px; margin: 0; padding: 0; overflow: auto; font-size: 11.5px; color: var(--ink-soft); list-style: none; }
 .ledger-rec { display: flex; gap: 8px; align-items: center; }
 .rec-st {
   flex: none;
   padding: 0 6px;
   font-family: var(--font-mono);
-  font-size: 9px;
+  font-size: 11.5px;
   color: var(--ink-faint);
   border: 1px solid var(--line-strong);
   border-radius: 4px;
 }
 .rec-st.open { color: var(--tone-warning-dot); border-color: var(--tone-warning-dot); }
+.tri-cell b { overflow-wrap: anywhere; }
 .rec-st.judged { color: var(--tone-warning-dot); border-color: var(--tone-warning-dot); opacity: 0.85; }
 .rec-st.rolled-back, .rec-st.judged-keep { color: var(--tone-success-dot); border-color: var(--tone-success-dot); }
 .sub { margin: 0; font-size: 12.5px; opacity: 0.6; }
 .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
 .dim { opacity: 0.55; }
 .badges { display: flex; gap: 8px; }
-.badge { padding: 3px 10px; font-size: 11px; letter-spacing: 0.05em; color: var(--ink-soft); border: 1px solid var(--line-strong); border-radius: var(--radius-chip); }
+.badge { padding: 3px 10px; font-size: 11.5px; letter-spacing: 0.05em; color: var(--ink-soft); border: 1px solid var(--line-strong); border-radius: var(--radius-chip); }
 
 .ctrl-card { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding: 14px 18px; margin-bottom: 14px; }
 .ctrl-left { display: flex; gap: 14px; align-items: center; }
 .aw-pill.running { background: var(--accent); }
 .ctrl-right { display: flex; gap: 12px; align-items: center; }
-.ctrl-metrics { display: flex; gap: 8px; align-items: center; font-size: 11.5px; color: var(--ink-soft); }
+.ctrl-metrics { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-size: 11.5px; color: var(--ink-soft); }
 .ctrl-metrics .sep { opacity: 0.4; }
 .ctrl-metrics .warn { color: var(--tone-warning-dot); }
 .add-btn { padding: 8px 16px; font-size: 13px; }
@@ -2408,14 +2410,14 @@ h1 { margin: 2px 0 4px; font-size: 30px; font-weight: 400; letter-spacing: -0.01
 .nodes-table th, .nodes-table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--divider-hair); }
 .nodes-table th { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); border-bottom: 1px solid var(--line-strong); }
 .nodes-table td b { margin-left: 8px; }
-.ch { display: block; margin-top: 2px; font-size: 10px; color: var(--ink-faint); }
+.ch { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ink-faint); }
 .right { text-align: right; }
 .val { font-size: 13px; }
 .val small { margin-left: 3px; color: var(--ink-faint); }
 .read-stale { color: var(--tone-danger-dot, #e05a5a); text-decoration: underline dotted; text-underline-offset: 3px; }
 .read-btn { margin-left: 8px; }
 
-.st-pill { display: inline-block; padding: 2px 9px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; border-radius: var(--radius-pill); }
+.st-pill { display: inline-block; padding: 3px 9px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em; border-radius: var(--radius-pill); }
 .st-pill.ok { color: var(--tone-success-dot); background: var(--tone-success-bg); }
 .st-pill.writing { color: var(--ink); background: var(--hover-tint); }
 .st-pill.error, .st-pill.alarm { color: var(--tone-danger-dot); background: var(--tone-danger-bg); }
@@ -2434,10 +2436,12 @@ h1 { margin: 2px 0 4px; font-size: 30px; font-weight: 400; letter-spacing: -0.01
 
 /* 模板弹窗 */
 .tpl-hint { margin: 0 0 10px; font-size: 12px; }
+.recipe-hd { flex-wrap: wrap; }
+.recipe-actions { flex-wrap: wrap; }
 .tpl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
-.tpl-chip { display: inline-flex; gap: 6px; align-items: center; padding: 3px 9px; font-size: 11.5px; color: var(--ink-soft); background: var(--paper-deep); border: 1px solid var(--line); border-radius: var(--radius-chip); }
+.tpl-chip { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 3px 9px; font-size: 11.5px; color: var(--ink-soft); background: var(--paper-deep); border: 1px solid var(--line); border-radius: var(--radius-chip); }
 .tpl-chip small { color: var(--ink-faint); }
-.tpl-tag { padding: 1px 6px; font-size: 10px; font-style: normal; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: var(--radius-pill); }
+.tpl-tag { padding: 1px 6px; font-size: 11.5px; font-style: normal; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: var(--radius-pill); }
 .tpl-tag.builtin { color: var(--ink-faint); border-color: var(--line-strong); }
 
 .write-row { display: flex; gap: 6px; align-items: center; }
@@ -2455,9 +2459,11 @@ h1 { margin: 2px 0 4px; font-size: 30px; font-weight: 400; letter-spacing: -0.01
 @keyframes linePulse { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone-success-dot) 25%, transparent); } 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--tone-success-dot) 8%, transparent); } }
 .line-info b { font-size: 14px; }
 .line-info small { display: block; margin-top: 2px; font-size: 11px; }
-.line-ctl { display: flex; gap: 10px; align-items: flex-end; }
+.line-ctl { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
 .ctl-sel { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--ink-faint); }
 .ctl-sel .inp { min-width: 150px; }
+/* 配方参数行:窄屏不再按 5 列硬分,否则数值列被压成竖排字 */
+.param-chip { overflow-wrap: anywhere; }
 .pill-btn.stop { background: var(--tone-danger-dot); border-color: var(--tone-danger-dot); }
 .product-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
 .prod-chip { display: inline-flex; gap: 6px; align-items: center; padding: 4px 12px; font-size: 12px; cursor: pointer; color: var(--ink-soft); background: var(--paper-deep); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); }
@@ -2465,6 +2471,8 @@ h1 { margin: 2px 0 4px; font-size: 30px; font-weight: 400; letter-spacing: -0.01
 .prod-del { color: var(--tone-danger-dot); font-weight: 700; }
 .query-card { padding: 14px 18px; margin-bottom: 14px; }
 .q-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; align-items: end; }
+/* 配方网格:minmax(320px) 在 355px 画布(减去卡片内边距)里会溢出 1px,用 min() 兜住 */
+.recipe-grid { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
 .q-grid .f { font-size: 11px; color: var(--ink-faint); }
 .q-actions { justify-content: flex-end; }
 .q-result { margin-top: 12px; overflow-x: auto; }
@@ -2472,7 +2480,7 @@ h1 { margin: 2px 0 4px; font-size: 30px; font-weight: 400; letter-spacing: -0.01
 .recipe-card { padding: 16px 18px; margin-bottom: 14px; }
 .recipe-hd { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
 .recipe-hd h3 { margin: 0; font-size: 16px; }
-.panel-tag { padding: 2px 8px; font-size: 11px; color: var(--ink-soft); border: 1px solid var(--line-strong); border-radius: var(--radius-chip); }
+.panel-tag { padding: 2px 8px; font-size: 11.5px; color: var(--ink-soft); border: 1px solid var(--line-strong); border-radius: var(--radius-chip); }
 .recipe-sub { margin: 0 0 14px; font-size: 12px; color: var(--ink-faint); }
 .recipe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
 .recipe-item { padding: 12px 14px; background: var(--paper-deep); border: 1px solid var(--line); border-radius: var(--radius-chip); }
@@ -2480,14 +2488,14 @@ h1 { margin: 2px 0 4px; font-size: 30px; font-weight: 400; letter-spacing: -0.01
 .recipe-name small { margin-left: 8px; }
 .desc { margin: 4px 0; font-size: 12px; }
 .recipe-params { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
-.param-chip { padding: 2px 8px; font-size: 11px; color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: var(--radius-chip); }
+.param-chip { padding: 2px 8px; font-size: 11.5px; color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: var(--radius-chip); }
 .recipe-actions { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
 /* ---------- 配方版本历史 ---------- */
 .ver-row { padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--divider-hair); border-radius: 10px; }
 .ver-row.cur { background: color-mix(in srgb, var(--accent) 6%, transparent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
 .ver-head { display: flex; gap: 10px; align-items: center; }
 .ver-v { font-weight: 700; font-size: 13px; }
-.ver-src { padding: 1px 8px; font-size: 10.5px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); }
+.ver-src { padding: 1px 8px; font-size: 11.5px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); }
 .ver-src.agent { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
 .ver-src.user { color: var(--ink-soft); }
 .ver-src.system { color: var(--ink-faint); }
@@ -2511,7 +2519,7 @@ h1 { margin: 2px 0 4px; font-size: 30px; font-weight: 400; letter-spacing: -0.01
 .param-del { margin-bottom: 2px; }
 .f { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--ink-faint); }
 .f em { margin-left: 3px; font-style: normal; }
-.hint { font-size: 10px; color: var(--ink-faint); }
+.hint { font-size: 11.5px; color: var(--ink-faint); }
 .test-row { display: flex; gap: 10px; align-items: center; margin: 6px 0 4px; }
 .test-result { font-family: var(--font-mono); font-size: 11px; }
 .test-result.good { color: var(--tone-success-dot); }
@@ -2520,12 +2528,85 @@ h1 { margin: 2px 0 4px; font-size: 30px; font-weight: 400; letter-spacing: -0.01
 .m-note { margin: 8px 0 0; font-size: 12px; color: var(--ink-faint); }
 /* 失效配方参数:灰化 + 徽标 */
 .param-chip.stale { color: var(--ink-faint); background: color-mix(in srgb, var(--ink) 5%, transparent); border-color: var(--divider-hair); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink-faint) 60%, transparent); }
-.chip-stale-tag { margin-left: 5px; padding: 0 5px; font-size: 9.5px; font-style: normal; color: var(--tone-danger-dot); background: color-mix(in srgb, var(--tone-danger-dot) 8%, transparent); border: 1px solid color-mix(in srgb, var(--tone-danger-dot) 30%, transparent); border-radius: var(--radius-chip); text-decoration: none; }
-.row-stale { flex: none; padding: 1px 7px; font-size: 10.5px; color: var(--tone-danger-dot); border: 1px solid color-mix(in srgb, var(--tone-danger-dot) 30%, transparent); border-radius: var(--radius-chip); }
+.chip-stale-tag { margin-left: 5px; padding: 0 5px; font-size: 11.5px; font-style: normal; color: var(--tone-danger-dot); background: color-mix(in srgb, var(--tone-danger-dot) 8%, transparent); border: 1px solid color-mix(in srgb, var(--tone-danger-dot) 30%, transparent); border-radius: var(--radius-chip); text-decoration: none; }
+.row-stale { flex: none; padding: 1px 7px; font-size: 11.5px; color: var(--tone-danger-dot); border: 1px solid color-mix(in srgb, var(--tone-danger-dot) 30%, transparent); border-radius: var(--radius-chip); }
 .m-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
 .aw-pill.outline { color: var(--ink); background: var(--paper-raised); border-color: var(--line-strong); }
 .err { margin-top: 14px; font-size: 13px; color: var(--tone-danger-dot); }
 @media (prefers-reduced-motion: no-preference) {
   .nodes-table tbody tr:hover { background: var(--hover-tint); }
 }
+
+/* ══ 窄屏自适应层(≤900 手持/平板竖,≤640 单列)════════════════════════════
+   375px 下本页的三类实测缺陷:网关总控条右侧三件套不换行(整块顶出画布)、
+   运行控制行的两个 150px 选择器 + 按钮并排超宽、微标签 9~10.5px。 */
+@media (max-width: 900px) {
+  .ctrl-card { gap: 12px; padding: 12px; }
+  .ctrl-right { flex-wrap: wrap; gap: 8px 10px; width: 100%; }
+  .ctrl-metrics { width: 100%; }
+  .line-card { gap: 12px; padding: 12px; }
+  .line-status { min-width: 0; }
+  .line-ctl { width: 100%; }
+  .ctl-sel { flex: 1 1 140px; min-width: 0; }
+  .ctl-sel .inp { min-width: 0; width: 100%; }
+  .line-ctl .pill-btn { flex: 1 1 120px; }
+
+  /* 控制节点表:保留列语义,给一条可横扫的卷轴 + 首列钉住 */
+  .table-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
+  .nodes-table { min-width: 1080px; }
+  .nodes-table th,
+  .nodes-table td { white-space: nowrap; }
+  .nodes-table thead > tr > th:first-child,
+  .nodes-table tbody > tr > td:first-child {
+    position: sticky;
+    left: 0;
+    z-index: 2;
+    background: var(--paper-raised);
+    box-shadow: 1px 0 0 var(--line);
+  }
+
+  .adopt-card { padding: 12px; }
+  .ledger-card,
+  .recipe-card,
+  .query-card { padding: 12px; }
+  .ledger-cols { grid-template-columns: 1fr; }
+  .ledger-tri { flex-wrap: wrap; }
+
+  /* 触摸目标:手持命中区 ≥40px(main.css 只在 pointer:coarse 下兜底) */
+  .mini-btn,
+  .pill-btn,
+  .aw-pill,
+  .ctrl-toggle,
+  .inp,
+  .write-inp,
+  .prod-chip,
+  .tpl-chip {
+    min-height: 40px;
+  }
+
+  .write-inp { width: 100%; min-width: 90px; }
+  .write-row { flex-wrap: wrap; }
+
+  /* 弹窗表单:两列/三列在窄屏一律落成一列,否则标签被压成竖排字 */
+  .f-grid,
+  .driver-form,
+  .cal-form { grid-template-columns: 1fr; }
+  .q-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .param-row { grid-template-columns: 1fr 1fr; }
+  .modal {
+    width: calc(100vw - 20px);
+    max-width: calc(100vw - 20px);
+    padding: 16px 14px;
+  }
+  .seg { padding: 10px 0; min-height: 40px; }
+  .m-actions { flex-wrap: wrap; }
+  .m-actions > * { flex: 1 1 auto; }
+  .recipe-hd .pill-btn,
+  .recipe-hd .mini-btn { min-height: 40px; }
+}
+
+@media (max-width: 640px) {
+  h1 { font-size: 22px; }
+  .q-grid { grid-template-columns: 1fr; }
+}
 </style>