agentworkshop 0.7.39 → 0.7.41

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

@@ -7,9 +7,9 @@
 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'
+import { daqKeyFromRef, DAQ_DRIVERS, type DaqDriverCatalogEntry, type DaqDriverKind, type DaqNodeState, type DriverConfigField, type DriverTestResult as DaqDriverTestResult } from '#shared/daq-protocol'
 
 const { t } = useI18n()
 
@@ -129,9 +129,13 @@ watch(node, (n) => {
 }, { immediate: true })
 
 // 驱动连接参数编辑(真实协议:host/register/endpoint...;schema 驱动渲染)
+// 驱动目录:server 权威(内置 + 协议插件自描述;REST 未返回时回落静态目录)
+const driverCatalog = computed<DaqDriverCatalogEntry[]>(() => daq.meta.drivers.length
+  ? daq.meta.drivers
+  : DAQ_DRIVERS.map(d => ({ ...d })))
 const driverCfg = ref<Record<string, string | number>>({})
 const driverFields = computed<DriverConfigField[]>(() =>
-  DAQ_DRIVERS.find(d => d.kind === form.driver)?.configFields ?? [])
+  driverCatalog.value.find(d => d.kind === form.driver)?.configFields ?? [])
 watch(node, (n) => {
   if (n) driverCfg.value = { ...(n.driverConfig as Record<string, string | number>) }
 }, { immediate: true })
@@ -210,7 +214,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)
@@ -507,12 +512,12 @@ watch(effectiveRefreshMs, () => armHistTimer())
               class="input"
             >
               <option
-                v-for="d in DAQ_DRIVERS"
+                v-for="d in driverCatalog"
                 :key="d.kind"
                 :value="d.kind"
                 :disabled="d.status === 'planned'"
               >
-                {{ d.label }}{{ d.status === 'planned' ? $t('daqDetail.kz8zr9v035') : '' }}
+                {{ d.label }}{{ d.plugin ? ' ⌁' : '' }}{{ d.status === 'planned' ? $t('daqDetail.kz8zr9v035') : '' }}
               </option>
             </select>
           </label>
@@ -654,7 +659,7 @@ watch(effectiveRefreshMs, () => armHistTimer())
         <!-- 驱动连接参数(mock 空;真实协议 schema 动态表单 + 测试连接) -->
         <template v-if="driverFields.length">
           <h3 class="sec mt">
-            {{ $t('daqDetail.k1p9gioa033') }} {{ DAQ_DRIVERS.find(d => d.kind === form.driver)?.label }}
+            {{ $t('daqDetail.k1p9gioa033') }} {{ driverCatalog.find(d => d.kind === form.driver)?.label }}
           </h3>
           <div class="driver-grid">
             <label

package/app/pages/daq/index.vue

@@ -9,7 +9,7 @@ import { message } from 'ant-design-vue'
 import { useDaqStream, type DaqNodeLive } from '@/app/composables/workshop/useDaqStream'
 import { useDcwStream } from '@/app/composables/workshop/useDcwStream'
 import { useWorkshopWs } from '@/app/composables/workshop/useWorkshopWs'
-import { DAQ_TEMPLATES, DAQ_DRIVERS, DAQ_TEMPLATE_ICONS, daqKeyFromRef, type DaqNodeView, type DaqNodeState, type DriverConfigField, type DriverTestResult as DaqDriverTestResult, type DaqTemplateDef, type DaqTemplateIcon } from '#shared/daq-protocol'
+import { DAQ_TEMPLATES, DAQ_DRIVERS, DAQ_TEMPLATE_ICONS, daqKeyFromRef, type DaqDriverCatalogEntry, type DaqNodeView, type DaqNodeState, type DriverConfigField, type DriverTestResult as DaqDriverTestResult, type DaqTemplateDef, type DaqTemplateIcon } from '#shared/daq-protocol'
 import { useDeviceTwins } from '@/app/composables/workshop/useDeviceTwins'
 import { useOpsLog } from '@/app/composables/workshop/useOpsLog'
 import { useVisibleInterval } from '@/app/composables/workshop/useVisibleInterval'
@@ -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>()
@@ -284,7 +353,10 @@ const addTest = ref<DaqDriverTestResult | null>(null)
 const addSaving = ref(false)
 const addError = ref('')
 
-const addDriverMeta = computed(() => DAQ_DRIVERS.find(d => d.kind === addDriver.value))
+// 驱动目录:server 权威(内置 + 协议插件自描述;REST 未返回时回落静态目录)
+const driverCatalog = computed<DaqDriverCatalogEntry[]>(() =>
+  daq.meta.drivers.length ? daq.meta.drivers : DAQ_DRIVERS.map(d => ({ ...d })))
+const addDriverMeta = computed(() => driverCatalog.value.find(d => d.kind === addDriver.value))
 const addFields = computed<DriverConfigField[]>(() => addDriverMeta.value?.configFields ?? [])
 const driverReady = (kind: string): boolean =>
   daq.meta.drivers.find(d => d.kind === kind)?.status !== 'planned' && (daq.meta.driverAvailable?.[kind] !== false)
@@ -772,11 +844,11 @@ async function doReconnect(): Promise<void> {
                 class="inp"
               >
                 <option
-                  v-for="d in DAQ_DRIVERS.filter(x => x.status !== 'planned')"
+                  v-for="d in driverCatalog.filter(x => x.status !== 'planned')"
                   :key="d.kind"
                   :value="d.kind"
                 >
-                  {{ d.label }}{{ driverReady(d.kind) ? '' : $t('daq.kjbqphp098') }}
+                  {{ d.label }}{{ d.plugin ? ' ⌁' : '' }}{{ driverReady(d.kind) ? '' : $t('daq.kjbqphp098') }}
                 </option>
               </select>
             </label>
@@ -1187,7 +1259,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 +1273,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 +1544,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 +1571,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 +1667,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 +1684,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 +1765,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 +1922,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 +1985,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 +2218,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>