agentworkshop 0.7.44 → 0.7.46

package/app/pages/daq/index.vue

@@ -3,16 +3,24 @@
  * 数采中心(DAQ Console)—— server 驱动数采的总控面。
  * 后端能力自描述(tsdb/queue/驱动族 + 管线指标)、控制器全局启停/周期、
  * 节点清单(状态/实时值/周期/绑定/驱动),点进 /daq/[id] 进入单节点专业控制台。
+ *
+ * 页面只做编排:数据/动作在 composables,视图在 components,
+ * 样式在 daq-page.css(与原 <style scoped> 逐字一致的全局层)。
  */
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, watch } from 'vue'
 import { message } from 'ant-design-vue'
-import { useDaqStream, type DaqNodeLive } from '@/app/composables/workshop/useDaqStream'
+import { useDaqStream } 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 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'
+import { useDaqAddNode } from './composables/useDaqAddNode'
+import { useDaqDriverCatalog, useDaqControllerForm, useDaqFilters } from './composables/useDaqFilters'
+import { useDaqNodeWindow } from './composables/useDaqNodeWindow'
+import { useDaqOptimizations } from './composables/useDaqOptimizations'
+import { useDaqTemplateIconLabels, useDaqTemplates } from './composables/useDaqTemplates'
+import './daq-page.css'
 
 const { t: tt } = useI18n()
 
@@ -85,467 +93,33 @@ onBeforeUnmount(() => {
   unsub?.()
 })
 
-// ---------- 节点筛选(产线/设备绑定/产线运行态/节点状态 + 模板/驱动/数据时间/名称搜索;全部 AND 复合) ----------
-const filters = reactive({ lineId: '', deviceId: '', template: '', driver: '', lineRun: '', state: '', time: '', search: '' })
-const hasFilters = computed(() => !!(filters.lineId || filters.deviceId || filters.template || filters.driver || filters.lineRun || filters.state || filters.time || filters.search.trim()))
-function clearFilters(): void {
-  filters.lineId = ''
-  filters.deviceId = ''
-  filters.template = ''
-  filters.driver = ''
-  filters.lineRun = ''
-  filters.state = ''
-  filters.time = ''
-  filters.search = ''
-}
-
-/** 模板筛选选项:节点中出现过的 templateRef(计数),名称走 server 模板目录降级原文 */
-const templateOptions = computed(() => {
-  const used = new Map<string, number>()
-  for (const n of daq.nodes) used.set(n.templateRef, (used.get(n.templateRef) ?? 0) + 1)
-  return [...used.entries()].map(([ref, count]) => ({ ref, count, label: daqTemplateRefCh(ref) }))
-})
-
-/** 驱动筛选选项:节点中出现过的驱动(计数) */
-const driverOptions = computed(() => {
-  const used = new Map<string, number>()
-  for (const n of daq.nodes) used.set(n.driver, (used.get(n.driver) ?? 0) + 1)
-  return [...used.entries()].map(([kind, count]) => ({
-    kind,
-    count,
-    label: daq.meta.drivers.find(d => d.kind === kind)?.label ?? kind,
-  }))
-})
-
-/** 数据时间语义桶:最后采样距 now 的Fresh度(与行级 stale 判定同源的诚实时间观) */
-function timeBucketOf(n: DaqNodeView): 'live' | 'hour' | 'day' | 'old' | 'never' {
-  if (!n.lastAt) return 'never'
-  const age = Date.now() - Date.parse(n.lastAt)
-  if (age <= 5 * 60_000) return 'live'
-  if (age <= 3_600_000) return 'hour'
-  if (age <= 86_400_000) return 'day'
-  return 'old'
-}
-function timeMatch(n: DaqNodeView): boolean {
-  return !filters.time || timeBucketOf(n) === filters.time
-}
-function searchMatch(n: DaqNodeView): boolean {
-  const q = filters.search.trim().toLowerCase()
-  if (!q) return true
-  return n.name.toLowerCase().includes(q) || n.id.toLowerCase().includes(q)
-}
-
-// ---------- Agent 优化记录(调控闭环;数采中心视角) ----------
-const optOpen = ref(false)
-/** 首次展开后保持内容挂载(手风琴动画需要);收起态内容不再重渲染 */
-const optMounted = ref(false)
-const optFilterLine = ref('')
-const optFilterRecipe = ref('')
-const optSeriesOf = ref<Record<string, { channels: Array<{ nodeId: string, nodeName: string, ch: string, unit: string, points: Array<{ at: number, value?: number, avg?: number }> }> }>>({})
-const optSeriesLoading = ref('')
-
-/** Recipe 选项:选定产线时只列该线配方,否则全量(与产线筛选级联) */
-const optRecipeOptions = computed(() =>
-  dcw.recipes.filter(r => !optFilterLine.value || r.lineId === optFilterLine.value))
-
-function optStatusKey(s: string): string {
-  const map: Record<string, string> = { 'open': 'daq.k1optst001', 'judged': 'daq.k1optst008', 'judged-keep': 'daq.k1optst002', 'rolled-back': 'daq.k1optst003', 'superseded': 'daq.k1optst004', 'superseded-manual': 'daq.k1optst005', 'closed-line-stop': 'daq.k1optst006', 'failed': 'daq.k1optst007' }
-  return map[s] ?? 'daq.k1optst001'
-}
-
-async function toggleOptPanel(): Promise<void> {
-  optOpen.value = !optOpen.value
-  if (optOpen.value) {
-    optMounted.value = true
-    await filterOpts()
-  }
-}
-
-async function filterOpts(): Promise<void> {
-  await dcw.loadOptimizations({
-    lineId: optFilterLine.value || undefined,
-    recipeId: optFilterRecipe.value || undefined,
-  })
-}
-
-/** 产线筛选变化:Recipe 级联重置(所选 Recipe 不在新产线内时) */
-function onOptLineChange(): void {
-  if (optFilterRecipe.value && !optRecipeOptions.value.some(r => r.id === optFilterRecipe.value))
-    optFilterRecipe.value = ''
-  void filterOpts()
-}
-
-async function showOptSeries(id: string): Promise<void> {
-  optSeriesLoading.value = id
-  try {
-    const s = await dcw.optimizationSeries(id)
-    optSeriesOf.value = { ...optSeriesOf.value, [id]: s }
-  }
-  finally {
-    optSeriesLoading.value = ''
-  }
-}
-
-function seriesPath(points: Array<{ at: number, value?: number, avg?: number }>, w = 240, h = 36): string {
-  const vals = points.map(p => p.value ?? p.avg ?? 0).filter(Number.isFinite)
-  if (vals.length < 2) return ''
-  const min = Math.min(...vals)
-  const max = Math.max(...vals)
-  const span = max - min || 1
-  return vals.map((v, i) => `${(i / (vals.length - 1)) * w},${h - ((v - min) / span) * h}`).join(' ')
-}
-
-async function rollbackRecord(id: string): Promise<void> {
-  await dcw.rollbackOptimization(id)
-  await filterOpts()
-}
-
-/** 序列点换算的小数位(避免 sparkline 抖动) */
-function fmtPoint(v: number | null | undefined): string {
-  return v == null ? '--' : String(Number(v.toFixed(2)))
-}
-
-/** 筛选下拉的设备选项:仅列出至少绑定了一个节点的设备(空设备筛选无意义) */
-const boundDevices = computed<Array<{ id: string, name: string, count: number }>>(() => {
-  const used = new Map<string, number>()
-  for (const n of daq.nodes) {
-    for (const d of n.deviceIds ?? (n.deviceBindingId ? [n.deviceBindingId] : [])) {
-      used.set(d, (used.get(d) ?? 0) + 1)
-    }
-  }
-  return deviceTwins.twins
-    .filter(t => used.has(t.id))
-    .map(t => ({ id: t.id, name: nodeDevices.get(t.id) ?? t.name, count: used.get(t.id)! }))
-})
-
-/** 产线运行态筛选语义:on = 节点所属产线开跑中;off = 待机或未分配(均未采集) */
-function lineRunMatch(n: DaqNodeView): boolean {
-  if (!filters.lineRun) return true
-  const active = !!n.lineId && dcw.lineStateOf(n.lineId).active
-  return filters.lineRun === 'on' ? active : !active
-}
-
-// ---------- 筛选产线的上下文横幅(运行态/产品/Recipe;未筛选到具体产线时回退全局门控提示) ----------
-const filteredLine = computed(() => dcw.lines.find(l => l.id === filters.lineId) ?? null)
-const filteredLineState = computed(() =>
-  filteredLine.value ? dcw.lineStateOf(filteredLine.value.id) : null)
-
-// ---------- 行级展示状态(真实场景语义;筛选用,pill 呈现在 DaqNodeRow 行组件) ----------
-// 状态机:disabled(人为停用) → unassigned(未挂产线,永不采集) → idle(产线未开跑,采集门控)
-// → offline(网关暂停,或产线运行中却采不到新数据) → ok/warn/alarm(新鲜数据按量程/预警带/配方窗口派生)
-type RowState = DaqNodeState | 'idle' | 'disabled' | 'unassigned'
-
-/** 数据新鲜度:超过 max(4×有效周期, 12s) 无新样本视为「采不到数据」(容忍 5s REST 刷新拍与时钟偏差) */
-function staleOf(n: DaqNodeView): boolean {
-  if (!n.lastAt) return true
-  const iv = n.intervalMs ?? daq.controller.defaultIntervalMs
-  return Date.now() - Date.parse(n.lastAt) > Math.max(iv * 4, 12_000)
-}
-
-function rowStateOf(n: DaqNodeView): RowState {
-  if (!n.enabled) return 'disabled'
-  if (!n.lineId) return 'unassigned'
-  if (!dcw.lineStateOf(n.lineId).active) return 'idle'
-  if (!daq.controller.running || staleOf(n)) return 'offline'
-  return n.state
-}
-
-const filteredNodes = computed<DaqNodeLive[]>(() => daq.nodes.filter((n) => {
-  if (filters.lineId && (filters.lineId === 'none' ? !!n.lineId : (n.lineId ?? '') !== filters.lineId)) return false
-  const nodeDevIds = n.deviceIds ?? (n.deviceBindingId ? [n.deviceBindingId] : [])
-  if (filters.deviceId && (filters.deviceId === 'none' ? nodeDevIds.length > 0 : !nodeDevIds.includes(filters.deviceId))) return false
-  if (filters.template && n.templateRef !== filters.template) return false
-  if (filters.driver && n.driver !== filters.driver) return false
-  if (!lineRunMatch(n)) return false
-  if (filters.state && rowStateOf(n) !== filters.state) return false
-  if (!timeMatch(n)) return false
-  if (!searchMatch(n)) return false
-  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))
+// ---------- 节点筛选 + 行级展示状态(模板/驱动选项、绑定设备、窗口前全量过滤) ----------
+const { filters, hasFilters, clearFilters, templateOptions, driverOptions, boundDevices, filteredNodes, filteredLine, filteredLineState } = useDaqFilters()
+const deviceTwins = useDeviceTwins()
+const { driverCatalog, driverReady } = useDaqDriverCatalog()
+const { reconnecting, doReconnect } = useDaqControllerForm()
 
-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()
-  })
+/** 控制器周期下发(两个输入复用同一入口,参数与拆分前逐字一致) */
+function onControllerConfig(intervalMs: number, publishIntervalMs: number): void {
+  void daq.controllerAction('config', intervalMs, publishIntervalMs)
 }
 
-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)
-})
+// ---------- 节点表窗口化渲染(滚动窗口 + 计数变化重算) ----------
+const { nodesTableRef, visibleNodes, padTopPx, padBottomPx, resetToTop } = useDaqNodeWindow(filteredNodes)
 // 筛选/搜索改变行数后窗口必须重算(否则会停在旧的切片上,看起来"表空了")
 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>()
-watch(() => deviceTwins.twins, (list) => {
-  for (const t of list) nodeDevices.set(t.id, t.name)
-}, { immediate: true, deep: true })
-
-// ---------- 添加节点向导(mock / 真实场景 + 动态参数表单 + 测试连接) ----------
-const addOpen = ref(false)
-const addScenario = ref<'mock' | 'real'>('mock')
-const addTemplate = ref(DAQ_TEMPLATES[0]?.key ?? 'temp-tc')
-const addDriver = ref('modbus-tcp')
-const addName = ref('')
-const addInterval = ref<number | null>(null)
-const addCfg = ref<Record<string, string | number>>({})
-const addTransform = reactive({ kind: 'none' as 'none' | 'linear', scale: 1, offset: 0 })
-const addTesting = ref(false)
-const addTest = ref<DaqDriverTestResult | null>(null)
-const addSaving = ref(false)
-const addError = ref('')
-
-// 驱动目录: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)
-
-watch(addDriver, () => {
-  // 切协议:表单重置为 schema 缺省值
-  const cfg: Record<string, string | number> = {}
-  for (const f of addFields.value) {
-    if (f.default !== undefined) cfg[f.key] = f.default as string | number
-  }
-  addCfg.value = cfg
-  addTest.value = null
-}, { immediate: true })
-
-async function doTestConnection(): Promise<void> {
-  addTesting.value = true
-  addTest.value = null
-  try {
-    addTest.value = await daq.testDriver(addDriver.value, addCfg.value)
-  }
-  catch (err) {
-    addTest.value = { ok: false, message: apiErrorMessage(err) }
-  }
-  finally {
-    addTesting.value = false
-  }
-}
-
-async function doAddNode(): Promise<void> {
-  addSaving.value = true
-  addError.value = ''
-  try {
-    const transform = addTransform.kind === 'linear'
-      ? { kind: 'linear' as const, scale: Number(addTransform.scale), offset: Number(addTransform.offset) }
-      : undefined
-    if (addScenario.value === 'mock') {
-      await daq.createFromTemplate(`daq-${addTemplate.value}`, {
-        name: addName.value ? { name: addName.value }.name : undefined,
-        transform,
-      })
-    }
-    else {
-      // 校验必填
-      for (const f of addFields.value) {
-        if (f.required && !addCfg.value[f.key] && addCfg.value[f.key] !== 0) {
-          throw new Error(tt('daq.kyuadl0125', { p0: f.label }))
-        }
-      }
-      const tpl = daq.templates.find(t => t.key === addTemplate.value)
-      await daq.createFromTemplate(`daq-${addTemplate.value}`, {
-        name: addName.value || undefined,
-        driver: addDriver.value as never,
-        driverConfig: { ...addCfg.value },
-        transform,
-        intervalMs: addInterval.value,
-        unit: tpl?.unit,
-        min: tpl?.min,
-        max: tpl?.max,
-        decimals: tpl?.decimals,
-      } as never)
-    }
-    addOpen.value = false
-    addName.value = ''
-    addTest.value = null
-  }
-  catch (err) {
-    addError.value = apiErrorMessage(err)
-  }
-  finally {
-    addSaving.value = false
-  }
-}
-
-/** 模板通道语义(server 目录为唯一事实源;模板已删除 → 显示 templateRef 原文降级) */
-function daqTemplateRefCh(templateRef: string): string {
-  const tpl = daq.templates.find(t => t.key === daqKeyFromRef(templateRef))
-  return tpl ? `${catalogTplName(tt, tpl)} · ${tpl.ch}` : templateRef || '-'
-}
-
-// ---------- 自定义信号模板管理(server 权威 CRUD;内置只读可复制) ----------
-const tplOpen = ref(false)
-const tplEditing = ref<string | null>(null)
-const tplSaving = ref(false)
-const tplError = ref('')
-const confirmingDel = ref('')
-const tplForm = reactive({
-  name: '', ch: '', code: '', unit: '',
-  min: 0, max: 100, base: 50, amp: 2,
-  decimals: 2, icon: 'thermo' as DaqTemplateIcon,
+  resetToTop()
 })
-const ICON_LABEL: Record<DaqTemplateIcon, string> = {
-  thermo: tt('daq.k422b8079'), pressure: tt('daq.k3x6ff080'), tension: tt('daq.k3z9xc081'), encoder: tt('daq.k3subk4082'), camera: tt('daq.k47atw083'), gateway: tt('daq.kz7yhbj084'),
-}
-
-const customTpls = computed<DaqTemplateDef[]>(() => daq.templates.filter(t => !t.builtin))
-const builtinTpls = computed<DaqTemplateDef[]>(() => daq.templates.filter(t => t.builtin))
-
-function fillTplForm(t: DaqTemplateDef, asCopy = false): void {
-  tplForm.name = asCopy ? tt('daq.k2hbo3c126', { p0: catalogTplName(tt, t) }) : catalogTplName(tt, t)
-  tplForm.ch = t.ch
-  tplForm.code = t.code
-  tplForm.unit = t.unit
-  tplForm.min = t.min
-  tplForm.max = t.max
-  tplForm.base = t.base
-  tplForm.amp = t.amp
-  tplForm.decimals = t.decimals
-  tplForm.icon = t.icon
-}
-
-function resetTplForm(): void {
-  tplEditing.value = null
-  tplError.value = ''
-  confirmingDel.value = ''
-  fillTplForm({ key: '', name: '', code: '', ch: '', unit: '', base: 50, amp: 2, min: 0, max: 100, decimals: 2, icon: 'thermo' })
-}
-
-function editTpl(t: DaqTemplateDef): void {
-  tplEditing.value = t.key
-  tplError.value = ''
-  fillTplForm(t)
-}
 
-function copyTpl(t: DaqTemplateDef): void {
-  tplEditing.value = null
-  tplError.value = ''
-  fillTplForm(t, true)
-}
+// ---------- 添加节点向导(目录与缺省字段由页面注入) ----------
+const addNode = useDaqAddNode(driverCatalog, tt)
 
-async function saveTpl(): Promise<void> {
-  tplSaving.value = true
-  tplError.value = ''
-  try {
-    const num = (v: number | string): number | undefined => {
-      const n = Number(v)
-      return v === '' || v == null || !Number.isFinite(n) ? undefined : n
-    }
-    const input = {
-      name: tplForm.name.trim(),
-      ch: tplForm.ch.trim() || undefined,
-      code: tplForm.code.trim() || undefined,
-      unit: tplForm.unit.trim(),
-      min: num(tplForm.min)!,
-      max: num(tplForm.max)!,
-      base: num(tplForm.base),
-      amp: num(tplForm.amp),
-      decimals: num(tplForm.decimals),
-      icon: tplForm.icon,
-    }
-    if (tplEditing.value) await daq.updateTemplate(tplEditing.value, input)
-    else await daq.createTemplate(input)
-    resetTplForm()
-  }
-  catch (err) {
-    tplError.value = apiErrorMessage(err)
-  }
-  finally {
-    tplSaving.value = false
-  }
-}
+// ---------- 自定义信号模板管理 ----------
+const tpl = useDaqTemplates(tt)
+const iconLabels = useDaqTemplateIconLabels(tt)
 
-/** 两段式删除确认(避免误删;空目录风格与节点表一致) */
-async function askDelTpl(t: DaqTemplateDef): Promise<void> {
-  if (confirmingDel.value !== t.key) {
-    confirmingDel.value = t.key
-    return
-  }
-  try {
-    await daq.removeTemplate(t.key)
-  }
-  catch (err) {
-    tplError.value = apiErrorMessage(err)
-  }
-  finally {
-    confirmingDel.value = ''
-  }
-}
-
-const reconnecting = ref(false)
-async function doReconnect(): Promise<void> {
-  reconnecting.value = true
-  try {
-    await daq.reconnectInfra()
-  }
-  catch { /* 横幅仍在,30s 后台也会自动重试 */ }
-  finally {
-    reconnecting.value = false
-  }
-}
+// ---------- Agent 优化记录面板 ----------
+const opt = useDaqOptimizations()
 </script>
 
 <template>
@@ -572,1060 +146,109 @@ async function doReconnect(): Promise<void> {
       </div>
     </div>
 
-    <!-- 产线门控横幅:筛选到具体产线 → 展示该产线运行态/产品/Recipe(待机可直达产线管理);
-         未筛选具体产线 → 全局门控提示 -->
-    <div
-      v-if="daq.loaded && filteredLine && filteredLineState"
-      class="infra-banner"
-      :class="{ good: filteredLineState.active }"
-    >
-      <span :class="filteredLineState.active ? 'i-tabler-circle-check' : 'i-tabler-info-circle'" />
-      <span class="txt">
-        <template v-if="filteredLineState.active">
-          {{ $t('daq.k3ktxbr085') }}{{ filteredLine.name }}」{{ $t('daq.k15lvw0o105') }}<b>{{ filteredLineState.productName }}</b> · Recipe:<b>{{ filteredLineState.recipeName }}</b>
-          <small class="mono">{{ $t('daq.k400lb086') }} {{ filteredLineState.runId?.slice(0, 8) }} · {{ $t('daq.k3zkt2106') }} {{ filteredLineState.startedAt?.slice(11, 19) }} {{ $t('daq.k69vag8108') }} {{ filteredLineState.taggedSamples }} {{ $t('daq.k4118o092') }}</small>
-        </template>
-        <template v-else>
-          {{ $t('daq.k3ktxbr085') }}{{ filteredLine.name }}」{{ $t('daq.k12uge2o107') }}</template>
-      </span>
-      <NuxtLink
-        class="pill-btn"
-        :to="`/dcw/${filteredLine.id}`"
-      >
-        {{ filteredLineState.active ? $t('daq.k1ukoy0v093') : $t('daq.k1cg78i8109') }}
-      </NuxtLink>
-    </div>
-    <div
-      v-else-if="daq.loaded && !anyLineActive"
-      class="infra-banner"
-    >
-      <span class="i-tabler-info-circle" />
-      <span class="txt">{{ $t('daq.k19onw5w013') }}<NuxtLink to="/dcw">{{ $t('daq.k1b2tk5c014') }}</NuxtLink>{{ $t('daq.k1u9wnlg015') }}</span>
-    </div>
-
-    <!-- 基础设施降级横幅(MQTT/Timescale 不可达:在线采集停用 + 一键重连) -->
-    <div
-      v-if="daq.meta.infra?.degraded"
-      class="infra-banner"
-    >
-      <span class="i-tabler-alert-triangle" />
-      <span class="txt">{{ daq.meta.infra.warning }}</span>
-      <button
-        class="pill-btn"
-        :disabled="reconnecting"
-        @click="doReconnect"
-      >
-        {{ reconnecting ? $t('daq.k1ld43ur094') : $t('daq.kzg9805110') }}
-      </button>
-    </div>
-
-    <!-- 未确认报警条(S5):边缘触发产生 / 轮询收敛,确认后立即消失 -->
-    <div
-      v-if="daq.alarms.length"
-      class="alarm-bar"
-    >
-      <span class="bar-label">
-        <span class="i-tabler-bell-ringing bell" />
-        {{ $t('daq.k1alarm141') }}
-        <b class="mono">{{ daq.alarms.length }}</b>
-      </span>
-      <div class="alarm-scroll">
-        <span
-          v-for="a in daq.alarms"
-          :key="a.id"
-          class="alarm-item"
-          :title="$t('daq.k1esc143', { p0: a.escalation })"
-        >
-          <b>{{ a.nodeName }}</b>
-          <span class="mono dim">{{ a.metric }}</span>
-          <span class="mono">{{ a.value }} {{ a.rule === 'lt-min' ? '<' : '>' }} {{ a.threshold }}</span>
-          <small
-            v-if="a.escalation > 0"
-            class="esc mono"
-          >+{{ a.escalation }}</small>
-          <button
-            class="mini-btn ack"
-            @click="ackOne(a.id)"
-          >
-            {{ $t('daq.k1ack142') }}
-          </button>
-        </span>
-      </div>
-    </div>
-
-    <!-- 控制器总控条:第一行 控制/指标/操作,第二行 产线状态带 -->
-    <section class="aw-tile ctrl-card">
-      <div class="ctrl-row">
-        <div class="ctrl-left">
-          <button
-            class="aw-pill"
-            :class="{ running: daq.controller.running }"
-            :title="$t('daq.k1snap145')"
-            @click="daq.controllerAction(daq.controller.running ? 'pause' : 'resume')"
-          >
-            <span :class="daq.controller.running ? 'i-tabler-player-pause' : 'i-tabler-player-play'" />
-            {{ daq.controller.running ? $t('daq.kpui00095') : $t('daq.knxpdpt111') }}
-          </button>
-          <label class="cycle mono">
-            {{ $t('daq.k1ifahxj016') }}
-            <input
-              v-model.number="daq.controller.defaultIntervalMs"
-              type="number"
-              min="200"
-              max="60000"
-              step="100"
-              @change="daq.controllerAction('config', daq.controller.defaultIntervalMs)"
-            >ms
-          </label>
-          <label
-            class="cycle mono"
-            :title="$t('daq.k1e8lcoo001')"
-          >
-            {{ $t('daq.k1if98n0017') }}
-            <input
-              v-model.number="daq.controller.defaultPublishIntervalMs"
-              type="number"
-              min="0"
-              max="60000"
-              step="100"
-              @change="daq.controllerAction('config', daq.controller.defaultIntervalMs, daq.controller.defaultPublishIntervalMs)"
-            >ms
-          </label>
-        </div>
-        <div class="ctrl-right">
-          <span class="ctrl-metrics mono">
-            <span>{{ $t('daq.k45uio067') }} {{ daq.controller.nodesOnline }}/{{ daq.controller.nodesTotal }}</span>
-            <span class="sep">·</span>
-            <span :title="$t('daq.k1yztsu4002')">{{ $t('daq.k3xagp087') }} {{ daq.meta.produced }}</span>
-            <span class="sep">·</span>
-            <span :title="$t('daq.ko09iha003')">{{ $t('daq.k427eu088') }} {{ daq.meta.consumed }}</span>
-            <span class="sep">·</span>
-            <span
-              :class="{ warn: (daq.meta.dropped ?? 0) > 0 }"
-              :title="$t('daq.k1droptip135')"
-            >{{ $t('daq.k3w8go089') }} {{ daq.meta.dropped }}</span>
-            <span class="sep">·</span>
-            <span :title="$t('daq.kj1jbmw004')">{{ $t('daq.k3wusd090') }} {{ daq.meta.samplesStored }}</span>
-          </span>
-          <button
-            class="aw-pill outline add-btn"
-            @click="tplOpen = true; resetTplForm()"
-          >
-            <span class="i-tabler-adjustments-horizontal" />
-            {{ $t('daq.k1f5cv0s018') }}
-          </button>
-          <button
-            class="aw-pill add-btn"
-            @click="addOpen = true"
-          >
-            <span class="i-tabler-plus" />
-            {{ $t('daq.k1fn0ukb019') }}
-          </button>
-        </div>
-      </div>
-      <!-- 产线状态带:单行横向滚动,每产线一枚 pill(空心点=待机 / 实心呼吸点=运行中) -->
-      <div class="line-strip">
-        <span class="strip-label">
-          <span class="i-tabler-route" />
-          {{ $t('daq.k1b2o3b6020') }}<small class="mono">{{ dcw.lines.length }}</small>
-        </span>
-        <div class="strip-scroll">
-          <NuxtLink
-            v-for="l in dcw.lines"
-            :key="l.id"
-            class="line-pill"
-            :class="{ on: dcw.lineStateOf(l.id).active }"
-            :style="{ '--lc': l.color }"
-            :to="`/dcw/${l.id}`"
-            :title="dcw.lineStateOf(l.id).active
-              ? $t('daq.k3v957u120', { p0: l.name, p1: dcw.lineStateOf(l.id).productName, p2: dcw.lineStateOf(l.id).recipeName })
-              : $t('daq.k1x7jnru121', { p0: l.name })"
-          >
-            <span class="lp-dot" />
-            <b>{{ l.name }}</b>
-            <small
-              v-if="dcw.lineStateOf(l.id).active"
-              class="lp-run"
-            >{{ dcw.lineStateOf(l.id).recipeName ?? $t('daq.k3vp67i096') }}</small>
-            <small
-              v-else
-              class="lp-idle"
-            >{{ $t('daq.k3zgkk021') }}</small>
-          </NuxtLink>
-          <NuxtLink
-            v-if="dcw.lines.length === 0"
-            class="line-pill"
-            to="/dcw"
-          >
-            <span class="lp-dot" />
-            <b>{{ $t('daq.k1el12b1022') }}</b>
-            <small class="lp-idle">{{ $t('daq.k8jxxe8023') }}</small>
-          </NuxtLink>
-        </div>
-      </div>
-    </section>
-
-    <!-- 添加节点向导:mock 模拟 / 真实设备(协议参数 + 测试连接) -->
-    <div
-      v-if="addOpen"
-      class="modal-mask"
-      @click.self="addOpen = false"
-    >
-      <div class="modal">
-        <h3 class="m-title">
-          {{ $t('daq.k19rioqa024') }}
-        </h3>
-
-        <div class="seg-row">
-          <button
-            class="seg"
-            :class="{ on: addScenario === 'mock' }"
-            @click="addScenario = 'mock'"
-          >
-            {{ $t('daq.k1p5c1un025') }}
-          </button>
-          <button
-            class="seg"
-            :class="{ on: addScenario === 'real' }"
-            @click="addScenario = 'real'"
-          >
-            {{ $t('daq.k1cbcp3o026') }}
-          </button>
-        </div>
-
-        <div class="f-grid">
-          <label class="f">
-            <span>{{ $t('daq.k1fsgerc027') }}</span>
-            <select
-              v-model="addTemplate"
-              class="inp"
-            >
-              <option
-                v-for="t in daq.templates"
-                :key="t.key"
-                :value="t.key"
-              >
-                {{ t.name }} · {{ t.ch }}({{ t.min }}~{{ t.max }} {{ t.unit }}){{ t.builtin ? '' : $t('daq.kr45rk9097') }}
-              </option>
-            </select>
-          </label>
-          <label class="f">
-            <span>{{ $t('daq.k1ce2k1y028') }}</span>
-            <input
-              v-model="addName"
-              class="inp"
-              :placeholder="$t('daq.kgpxzy3005')"
-            >
-          </label>
-          <label
-            v-if="addScenario === 'real'"
-            class="f"
-          >
-            <span>{{ $t('daq.k13mfsfc029') }}</span>
-            <input
-              v-model.number="addInterval"
-              type="number"
-              min="1000"
-              max="60000"
-              step="500"
-              class="inp"
-              :placeholder="$t('daq.k1eg1000a136')"
-            >
-          </label>
-        </div>
-
-        <!-- 真实场景:协议选择 + 动态参数表单 + 测试连接 -->
-        <template v-if="addScenario === 'real'">
-          <div class="f-grid">
-            <label class="f">
-              <span>{{ $t('daq.k1kt87rx030') }}</span>
-              <select
-                v-model="addDriver"
-                class="inp"
-              >
-                <option
-                  v-for="d in driverCatalog.filter(x => x.status !== 'planned')"
-                  :key="d.kind"
-                  :value="d.kind"
-                >
-                  {{ d.label }}{{ d.plugin ? ' ⌁' : '' }}{{ driverReady(d.kind) ? '' : $t('daq.kjbqphp098') }}
-                </option>
-              </select>
-            </label>
-          </div>
-
-          <div
-            v-if="addFields.length"
-            class="f-grid driver-form"
-          >
-            <label
-              v-for="f in addFields"
-              :key="f.key"
-              class="f"
-            >
-              <span>{{ f.label }}<em v-if="f.required">*</em></span>
-              <select
-                v-if="f.type === 'select'"
-                v-model="addCfg[f.key]"
-                class="inp"
-              >
-                <option
-                  v-for="o in f.options"
-                  :key="o.value"
-                  :value="o.value"
-                >
-                  {{ o.label }}
-                </option>
-              </select>
-              <input
-                v-else
-                v-model="addCfg[f.key]"
-                :type="f.type === 'number' ? 'number' : 'text'"
-                :placeholder="f.placeholder"
-                class="inp"
-              >
-              <small
-                v-if="f.hint"
-                class="hint"
-              >{{ f.hint }}</small>
-            </label>
-          </div>
-
-          <div class="test-row">
-            <button
-              class="pill-btn"
-              :disabled="addTesting"
-              @click="doTestConnection"
-            >
-              {{ addTesting ? $t('daq.k1fsh720099') : $t('daq.k1fstglk112') }}
-            </button>
-            <span
-              v-if="addTest"
-              class="test-result"
-              :class="addTest.ok ? 'ok' : 'bad'"
-            >{{ addTest.ok ? '✓' : '✗' }} {{ addTest.message }}<template v-if="addTest.latencyMs != null">({{ addTest.latencyMs }}ms)</template></span>
-          </div>
-        </template>
-
-        <p
-          v-if="addError"
-          class="m-err"
-        >
-          {{ addError }}
-        </p>
-
-        <div class="m-actions">
-          <button
-            class="aw-pill outline"
-            @click="addOpen = false"
-          >
-            {{ $t('daq.k3xdnn031') }}
-          </button>
-          <button
-            class="aw-pill"
-            :disabled="addSaving || (addScenario === 'real' && addTest != null && !addTest.ok)"
-            :title="addScenario === 'real' && !(addTest && addTest.ok) ? $t('daq.k1needtst137') : ''"
-            @click="doAddNode"
-          >
-            {{ addSaving ? $t('daq.k1bg4759100') : (addScenario === 'real' ? $t('daq.k7pxjxo113') : $t('daq.k1bge46t118')) }}
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <!-- 模板管理:自定义模板增删改 + 内置模板复制 -->
-    <div
-      v-if="tplOpen"
-      class="modal-mask"
-      @click.self="tplOpen = false"
-    >
-      <div class="modal">
-        <h3 class="m-title">
-          {{ $t('daq.k11mv96s032') }}
-        </h3>
-
-        <p class="sec-label">
-          {{ $t('daq.ktji4ky033') }}
-        </p>
-        <table class="tpl-table">
-          <tbody>
-            <tr
-              v-for="t in customTpls"
-              :key="t.key"
-            >
-              <td>
-                <b>{{ t.name }}</b>
-                <small class="mono dim">{{ t.code }}</small>
-              </td>
-              <td class="mono range">
-                {{ t.min }}~{{ t.max }} {{ t.unit }} · {{ t.decimals }} {{ $t('daq.k48oi091') }}
-              </td>
-              <td class="right actions">
-                <button
-                  class="mini-btn"
-                  @click="editTpl(t)"
-                >
-                  {{ $t('daq.k45eb0034') }}
-                </button>
-                <button
-                  class="mini-btn danger"
-                  @click="askDelTpl(t)"
-                >
-                  {{ confirmingDel === t.key ? $t('daq.k1hhheu3101') : $t('daq.k3xakp114') }}
-                </button>
-              </td>
-            </tr>
-            <tr v-if="!customTpls.length">
-              <td
-                colspan="3"
-                class="empty"
-              >
-                {{ $t('daq.kztvzbo035') }}
-              </td>
-            </tr>
-          </tbody>
-        </table>
-
-        <p class="sec-label">
-          {{ tplEditing ? $t('daq.k1iiph0s102') : $t('daq.k1efixrj115') }}
-        </p>
-        <div class="f-grid">
-          <label class="f">
-            <span>{{ $t('daq.k3xhia036') }}<em>*</em></span>
-            <input
-              v-model="tplForm.name"
-              class="inp"
-              :placeholder="$t('daq.k5opd2t006')"
-            >
-          </label>
-          <label class="f">
-            <span>{{ $t('daq.k3x4ef037') }}<em>*</em></span>
-            <input
-              v-model="tplForm.unit"
-              class="inp"
-              :placeholder="$t('daq.unitPh')"
-            >
-          </label>
-          <label class="f">
-            <span>{{ $t('daq.k1l477m0038') }}</span>
-            <input
-              v-model="tplForm.ch"
-              class="inp"
-              :placeholder="$t('daq.kk8o4tl007')"
-            >
-          </label>
-          <label class="f">
-            <span>{{ $t('daq.k1ayxrqb039') }}</span>
-            <input
-              v-model="tplForm.code"
-              class="inp"
-              :placeholder="$t('daq.kzn3l7l008')"
-            >
-          </label>
-          <label class="f">
-            <span>{{ $t('daq.k1l9jv5m040') }}<em>*</em></span>
-            <input
-              v-model.number="tplForm.min"
-              type="number"
-              class="inp"
-            >
-          </label>
-          <label class="f">
-            <span>{{ $t('daq.k1l9jv4p041') }}<em>*</em></span>
-            <input
-              v-model.number="tplForm.max"
-              type="number"
-              class="inp"
-            >
-          </label>
-          <label class="f">
-            <span>{{ $t('daq.k3mxmcx042') }}</span>
-            <input
-              v-model.number="tplForm.decimals"
-              type="number"
-              min="0"
-              max="4"
-              class="inp"
-            >
-          </label>
-          <label class="f">
-            <span>{{ $t('daq.k3xx56043') }}</span>
-            <select
-              v-model="tplForm.icon"
-              class="inp"
-            >
-              <option
-                v-for="ic in DAQ_TEMPLATE_ICONS"
-                :key="ic"
-                :value="ic"
-              >
-                {{ ICON_LABEL[ic] }}
-              </option>
-            </select>
-          </label>
-          <label class="f">
-            <span>{{ $t('daq.k1f4eknv044') }}</span>
-            <input
-              v-model.number="tplForm.base"
-              type="number"
-              class="inp"
-            >
-            <small class="hint">{{ $t('daq.kytd15s045') }}</small>
-          </label>
-          <label class="f">
-            <span>{{ $t('daq.k1f4ifpo046') }}</span>
-            <input
-              v-model.number="tplForm.amp"
-              type="number"
-              class="inp"
-            >
-            <small class="hint">{{ $t('daq.ksp2aji047') }}</small>
-          </label>
-        </div>
-        <p
-          v-if="tplError"
-          class="m-err"
-        >
-          {{ tplError }}
-        </p>
-        <div class="m-actions">
-          <button
-            class="aw-pill outline"
-            @click="resetTplForm"
-          >
-            {{ $t('daq.k48p40048') }}
-          </button>
-          <button
-            class="pill-btn"
-            :disabled="tplSaving"
-            @click="saveTpl"
-          >
-            {{ tplSaving ? $t('daq.k1b38d59103') : (tplEditing ? $t('daq.k1b39281116') : $t('daq.k1b3dtga119')) }}
-          </button>
-        </div>
-
-        <p class="sec-label">
-          {{ $t('daq.k1w8s84s049') }}
-        </p>
-        <table class="tpl-table">
-          <tbody>
-            <tr
-              v-for="t in builtinTpls"
-              :key="t.key"
-            >
-              <td>
-                <b>{{ t.name }}</b>
-                <small class="mono dim">{{ t.code }}</small>
-              </td>
-              <td class="mono range">
-                {{ t.min }}~{{ t.max }} {{ t.unit }} · {{ t.decimals }} {{ $t('daq.k48oi091') }}
-              </td>
-              <td class="right actions">
-                <button
-                  class="mini-btn"
-                  @click="copyTpl(t)"
-                >
-                  {{ $t('daq.k3y694050') }}
-                </button>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-
-    <!-- Agent 优化记录(调控闭环:设定历史 / 判定 / 窗口数采;序列为客户端渲染) -->
-    <section class="aw-tile opt-card">
-      <button
-        class="opt-head"
-        @click="toggleOptPanel"
-      >
-        <span class="i-tabler-flask" />
-        <b>{{ $t('daq.k1optt001') }}</b>
-        <span class="opt-count mono">{{ dcw.optimizations.length }}</span>
-        <span
-          class="opt-chevron"
-          :class="{ open: optOpen }"
-        />
-      </button>
-      <div
-        class="opt-body"
-        :class="{ open: optOpen }"
-      >
-        <template v-if="optMounted">
-          <div class="opt-filters">
-            <select
-              v-model="optFilterLine"
-              class="inp-sel"
-              @change="onOptLineChange"
-            >
-              <option value="">
-                {{ $t('daq.k1optf001') }}
-              </option>
-              <option
-                v-for="l in dcw.lines"
-                :key="l.id"
-                :value="l.id"
-              >
-                {{ l.name }}
-              </option>
-            </select>
-            <select
-              v-model="optFilterRecipe"
-              class="inp-sel"
-              @change="filterOpts"
-            >
-              <option value="">
-                {{ $t('daq.k1optf004') }}
-              </option>
-              <option
-                v-for="r in optRecipeOptions"
-                :key="r.id"
-                :value="r.id"
-              >
-                {{ r.name }}
-              </option>
-            </select>
-            <button
-              class="mini-act"
-              @click="filterOpts"
-            >
-              {{ $t('daq.k1optf002') }}
-            </button>
-          </div>
-          <p
-            v-if="dcw.optimizations.length === 0"
-            class="opt-empty"
-          >
-            {{ $t('daq.k1opte001') }}
-          </p>
-          <ul class="opt-list">
-            <li
-              v-for="r in dcw.optimizations.slice(0, 30)"
-              :key="r.id"
-              class="opt-row"
-              :class="r.status"
-            >
-              <div class="opt-line1">
-                <span
-                  class="opt-status"
-                  :class="r.status"
-                >{{ $t(optStatusKey(r.status)) }}</span>
-                <b class="opt-node">{{ r.nodeName }}</b>
-                <span class="mono opt-params">{{ r.params[0]?.from ?? '?' }} → {{ r.params[0]?.to }}</span>
-                <span class="mono opt-time">{{ r.setAt.slice(5, 16).replace('T', ' ') }}</span>
-                <button
-                  v-if="!optSeriesOf[r.id]"
-                  class="mini-act"
-                  :disabled="optSeriesLoading === r.id"
-                  @click="showOptSeries(r.id)"
-                >
-                  {{ $t('daq.k1opta001') }}
-                </button>
-                <button
-                  v-if="r.status === 'open'"
-                  class="mini-act danger"
-                  @click="rollbackRecord(r.id)"
-                >
-                  {{ $t('daq.k1opta002') }}
-                </button>
-              </div>
-              <div class="opt-line2 mono">
-                <span
-                  v-if="r.judge"
-                  class="opt-judge"
-                  :class="r.judge.verdict"
-                >{{ r.judge.verdict }}({{ r.judge.by }}): {{ r.judge.reason.slice(0, 70) }}</span>
-                <span
-                  v-else-if="r.status === 'open'"
-                  class="opt-open-hint"
-                >{{ $t('daq.k1opto001') }}</span>
-                <span
-                  v-if="r.aggPending"
-                  class="opt-agg"
-                >{{ $t('daq.k1optw001') }}</span>
-                <span
-                  v-else-if="r.windowAgg && r.windowAgg.channels.length"
-                  class="opt-agg"
-                >
-                  <template
-                    v-for="c in r.windowAgg.channels"
-                    :key="c.daqNodeId"
-                  >{{ c.ch }} {{ fmtPoint(c.min) }}~{{ fmtPoint(c.max) }}({{ $t('daq.k1optw002') }}{{ c.breaches < 0 ? '-' : c.breaches }}) </template>
-                </span>
-              </div>
-              <div
-                v-if="optSeriesOf[r.id]"
-                class="opt-series"
-              >
-                <div
-                  v-for="ch in (optSeriesOf[r.id]?.channels ?? [])"
-                  :key="ch.nodeId"
-                  class="opt-ch"
-                >
-                  <svg
-                    class="opt-spark"
-                    viewBox="0 0 240 36"
-                    preserveAspectRatio="none"
-                  >
-                    <polyline :points="seriesPath(ch.points)" />
-                  </svg>
-                  <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) === 0"
-                  class="opt-empty"
-                >
-                  {{ $t('daq.k1opte002') }}
-                </p>
-              </div>
-            </li>
-          </ul>
-        </template>
-      </div>
-    </section>
-
-    <!-- 节点清单:筛选工具条(产线/设备/产线运行/状态) + 节点表 -->
-    <a-spin :spinning="!daq.loaded && !daq.error">
-      <section class="aw-tile table-card">
-        <div class="tbl-toolbar">
-          <div class="filters">
-            <label class="flt">
-              <span>{{ $t('daq.k3wj9n051') }}</span>
-              <select
-                v-model="filters.lineId"
-                class="inp-sel"
-              >
-                <option value="">
-                  {{ $t('daq.k1bkl9uj052') }}
-                </option>
-                <option
-                  v-for="l in dcw.lines"
-                  :key="l.id"
-                  :value="l.id"
-                >
-                  {{ l.name }}
-                </option>
-                <option value="none">
-                  {{ $t('daq.k3ootr6053') }}
-                </option>
-              </select>
-            </label>
-            <label class="flt">
-              <span>{{ $t('daq.k1i8rtqt054') }}</span>
-              <select
-                v-model="filters.deviceId"
-                class="inp-sel"
-              >
-                <option value="">
-                  {{ $t('daq.k1bkw4m2055') }}
-                </option>
-                <option
-                  v-for="d in boundDevices"
-                  :key="d.id"
-                  :value="d.id"
-                >
-                  {{ d.name }}({{ d.count }})
-                </option>
-                <option value="none">
-                  {{ $t('daq.k3own4q056') }}
-                </option>
-              </select>
-            </label>
-            <label
-              class="flt"
-              :title="$t('daq.khb8mru009')"
-            >
-              <span>{{ $t('daq.k1b2tkyv057') }}</span>
-              <select
-                v-model="filters.lineRun"
-                class="inp-sel"
-              >
-                <option value="">
-                  {{ $t('daq.k3x4t1058') }}
-                </option>
-                <option value="on">
-                  {{ $t('daq.k1nxm3p7059') }}
-                </option>
-                <option value="off">
-                  {{ $t('daq.k1ulx34e060') }}
-                </option>
-              </select>
-            </label>
-            <label class="flt">
-              <span>{{ $t('daq.k1iwdfef061') }}</span>
-              <select
-                v-model="filters.state"
-                class="inp-sel"
-              >
-                <option value="">
-                  {{ $t('daq.k3x4t1058') }}
-                </option>
-                <option value="ok">
-                  {{ $t('daq.k41k5c062') }}
-                </option>
-                <option value="warn">
-                  {{ $t('daq.k49z8v063') }}
-                </option>
-                <option value="alarm">
-                  {{ $t('daq.k3xmid064') }}
-                </option>
-                <option value="offline">
-                  {{ $t('daq.k44c2n065') }}
-                </option>
-              </select>
-            </label>
-            <label class="flt">
-              <span>{{ $t('daq.k1flttpl010') }}</span>
-              <select
-                v-model="filters.template"
-                class="inp-sel"
-              >
-                <option value="">
-                  {{ $t('daq.k1flttpl011') }}
-                </option>
-                <option
-                  v-for="t in templateOptions"
-                  :key="t.ref"
-                  :value="t.ref"
-                >
-                  {{ t.label }}({{ t.count }})
-                </option>
-              </select>
-            </label>
-            <label class="flt">
-              <span>{{ $t('daq.k1fltdrv012') }}</span>
-              <select
-                v-model="filters.driver"
-                class="inp-sel"
-              >
-                <option value="">
-                  {{ $t('daq.k1fltdrv013') }}
-                </option>
-                <option
-                  v-for="d in driverOptions"
-                  :key="d.kind"
-                  :value="d.kind"
-                >
-                  {{ d.label }}({{ d.count }})
-                </option>
-              </select>
-            </label>
-            <label
-              class="flt"
-              :title="$t('daq.k1flttim014')"
-            >
-              <span>{{ $t('daq.k1flttim015') }}</span>
-              <select
-                v-model="filters.time"
-                class="inp-sel"
-              >
-                <option value="">
-                  {{ $t('daq.k1flttim016') }}
-                </option>
-                <option value="live">
-                  {{ $t('daq.k1timlv017') }}
-                </option>
-                <option value="hour">
-                  {{ $t('daq.k1timhr018') }}
-                </option>
-                <option value="day">
-                  {{ $t('daq.k1timdy019') }}
-                </option>
-                <option value="old">
-                  {{ $t('daq.k1timld020') }}
-                </option>
-                <option value="never">
-                  {{ $t('daq.k1timnv021') }}
-                </option>
-              </select>
-            </label>
-            <label class="flt">
-              <span>{{ $t('daq.k1fltsrc022') }}</span>
-              <input
-                v-model="filters.search"
-                class="inp-sel flt-search"
-                type="search"
-                :placeholder="$t('daq.k1fltsph023')"
-              >
-            </label>
-            <button
-              v-if="hasFilters"
-              class="mini-btn clear-btn"
-              @click="clearFilters"
-            >
-              {{ $t('daq.k1fygck2066') }}
-            </button>
-          </div>
-          <span class="count mono">{{ filteredNodes.length }} / {{ daq.nodes.length }} {{ $t('daq.k45uio067') }}</span>
-        </div>
-        <!-- 实时告警 + 实时事件:告警 = server 权威未确认报警(WS 直推/可确认);事件 = 全操作摘要轨(详情在日志管理) -->
-        <div class="ops-panels">
-          <div
-            class="ops-panel alarm-panel"
-            :class="{ live: daq.alarms.length > 0 }"
-          >
-            <div class="panel-head">
-              <span class="i-tabler-bell-ringing bell" />
-              <b>{{ $t('daq.k1alarm141') }}</b>
-              <span
-                class="mono cnt"
-                :class="{ hot: daq.alarms.length > 0 }"
-              >{{ daq.alarms.length }}</span>
-            </div>
-            <div class="panel-body">
-              <p
-                v-if="daq.alarms.length === 0"
-                class="panel-empty"
-              >
-                {{ $t('daq.k1evt001') }}
-              </p>
-              <div
-                v-for="a in daq.alarms"
-                v-else
-                :key="a.id"
-                class="alarm-row"
-              >
-                <span class="i-tabler-alert-triangle tri" />
-                <b>{{ a.nodeName }}</b>
-                <span class="mono dim">{{ a.metric }}</span>
-                <span class="mono">{{ a.value }} {{ a.rule === 'lt-min' ? '<' : '>' }} {{ a.threshold }}</span>
-                <small
-                  v-if="a.escalation > 0"
-                  class="esc mono"
-                >+{{ a.escalation }}</small>
-                <button
-                  class="mini-btn ack"
-                  @click="ackOne(a.id)"
-                >
-                  {{ $t('daq.k1ack142') }}
-                </button>
-              </div>
-            </div>
-          </div>
-          <div class="ops-panel event-panel">
-            <div class="panel-head">
-              <span class="i-tabler-activity" />
-              <b>{{ $t('daq.k1evt002') }}</b>
-              <NuxtLink
-                class="panel-link"
-                to="/logs"
-              >
-                {{ $t('daq.k1evt003') }}<span class="i-tabler-arrow-right" />
-              </NuxtLink>
-            </div>
-            <div class="panel-body">
-              <p
-                v-if="opsLog.recent.length === 0"
-                class="panel-empty"
-              >
-                {{ $t('daq.k1evt004') }}
-              </p>
-              <div
-                v-for="(r, i) in opsLog.recent"
-                v-else
-                :key="`${r.at}:${r.actor}:${r.action}:${i}`"
-                class="evt-row"
-              >
-                <span class="mono dim t">{{ opsTime(r.at) }}</span>
-                <span
-                  class="src-badge"
-                  :class="r.actorKind"
-                >{{ r.actorKind === 'agent' ? 'Agent' : r.actorKind === 'user' ? $t('logs.src.user') : $t('logs.src.system') }}</span>
-                <span
-                  class="kind-chip"
-                  :class="r.kind"
-                >{{ opsKindLabel(r.kind) }}</span>
-                <span
-                  class="txt"
-                  :title="r.summary"
-                >{{ r.summary }}</span>
-              </div>
-            </div>
-          </div>
-        </div>
-        <table
-          ref="nodesTableRef"
-          class="nodes-table"
-        >
-          <thead>
-            <tr>
-              <th>{{ $t('daq.k45uio067') }}</th>
-              <th>{{ $t('daq.k42w8s068') }}</th>
-              <th>{{ $t('daq.k3mv305069') }}</th>
-              <th>{{ $t('daq.k1trnd001') }}</th>
-              <th>{{ $t('daq.k1l6g2ga070') }}</th>
-              <th>{{ $t('daq.k3zi0nf071') }}</th>
-              <th>{{ $t('daq.k4a0la072') }}</th>
-              <th>{{ $t('daq.k3wj9n051') }}</th>
-              <th :title="$t('daq.k1runtipc131')">
-                {{ $t('daq.k1b2tkyv057') }}
-              </th>
-              <th :title="$t('daq.k1prdrtip132')">
-                {{ $t('daq.k1prodrc128') }}
-              </th>
-              <th>{{ $t('daq.k1i8rtqt054') }}</th>
-              <th class="right">
-                {{ $t('daq.k40aa6073') }}
-              </th>
-            </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 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
-                  class="pane-empty"
-                  style="min-height: 120px;"
-                >
-                  <p class="pe-sub">
-                    {{ $t('daq.kvhjyc3075') }}
-                  </p>
-                </div>
-              </td>
-            </tr>
-            <tr v-else-if="daq.loaded && filteredNodes.length === 0">
-              <td colspan="11">
-                <div
-                  class="pane-empty"
-                  style="min-height: 90px;"
-                >
-                  <p class="pe-sub">
-                    {{ $t('daq.k1w20qew076') }}
-                  </p>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </section>
-    </a-spin>
+    <DaqLineBanner
+      :loaded="daq.loaded"
+      :filtered-line="filteredLine"
+      :filtered-line-state="filteredLineState"
+      :any-line-active="anyLineActive"
+    />
+
+    <DaqInfraBanner
+      :infra="daq.meta.infra"
+      :reconnecting="reconnecting"
+      @reconnect="doReconnect"
+    />
+
+    <DaqAlarmBar
+      :alarms="daq.alarms"
+      @ack="ackOne"
+    />
+
+    <DaqControlCard
+      v-model:controller="daq.controller"
+      :meta="daq.meta"
+      :lines="dcw.lines"
+      :line-state-of="(id: string) => dcw.lineStateOf(id)"
+      @action="(a: 'start' | 'stop' | 'pause' | 'resume') => daq.controllerAction(a)"
+      @config="onControllerConfig"
+      @open-add="addNode.open.value = true"
+      @open-templates="tpl.tplOpen.value = true; tpl.resetTplForm()"
+    />
+
+    <DaqAddNodeModal
+      v-model:open="addNode.open.value"
+      v-model:form="addNode.form"
+      :templates="daq.templates"
+      :driver-catalog="driverCatalog"
+      :driver-ready="driverReady"
+      @test="addNode.doTestConnection"
+      @submit="addNode.doAddNode"
+      @close="addNode.open.value = false"
+    />
+
+    <DaqTemplateModal
+      v-model:open="tpl.tplOpen.value"
+      v-model:form="tpl.tplForm.value"
+      :custom-tpls="tpl.customTpls.value"
+      :builtin-tpls="tpl.builtinTpls.value"
+      :icon-choices="tpl.iconChoices"
+      :icon-labels="iconLabels"
+      :editing="tpl.tplEditing.value"
+      :saving="tpl.tplSaving.value"
+      :error="tpl.tplError.value"
+      :confirming-del="tpl.confirmingDel.value"
+      @edit="tpl.editTpl"
+      @copy="tpl.copyTpl"
+      @remove="tpl.askDelTpl"
+      @reset="tpl.resetTplForm"
+      @save="tpl.saveTpl"
+    />
+
+    <DaqOptPanel
+      :optimizations="dcw.optimizations"
+      :lines="dcw.lines"
+      :open="opt.optOpen.value"
+      :mounted="opt.optMounted.value"
+      :filter-line="opt.optFilterLine.value"
+      :filter-recipe="opt.optFilterRecipe.value"
+      :recipe-options="opt.optRecipeOptions.value"
+      :series-of="opt.optSeriesOf.value"
+      :series-loading="opt.optSeriesLoading.value"
+      :status-key="opt.optStatusKey"
+      :series-path="opt.seriesPath"
+      :fmt-point="opt.fmtPoint"
+      @toggle="opt.toggleOptPanel"
+      @select-line="(v: string) => opt.optFilterLine.value = v"
+      @select-recipe="(v: string) => opt.optFilterRecipe.value = v"
+      @line-change="opt.onOptLineChange"
+      @filter="opt.filterOpts"
+      @series="opt.showOptSeries"
+      @rollback="opt.rollbackRecord"
+    />
+
+    <DaqNodePanel
+      v-model:table-el="nodesTableRef"
+      v-model:filters="filters"
+      :has-filters="hasFilters"
+      :lines="dcw.lines"
+      :bound-devices="boundDevices"
+      :template-options="templateOptions"
+      :driver-options="driverOptions"
+      :filtered-count="filteredNodes.length"
+      :total-count="daq.nodes.length"
+      :ops-recent="opsLog.recent"
+      :ops-kind-label="opsKindLabel"
+      :ops-time="opsTime"
+      :alarms="daq.alarms"
+      :visible-nodes="visibleNodes"
+      :pad-top-px="padTopPx"
+      :pad-bottom-px="padBottomPx"
+      :loading="!daq.loaded && !daq.error"
+      :loaded="daq.loaded"
+      :error="daq.error"
+      @clear-filters="clearFilters"
+      @ack="ackOne"
+    />
 
     <p
       v-if="daq.error"
@@ -1635,682 +258,3 @@ async function doReconnect(): Promise<void> {
     </p>
   </div>
 </template>
-
-<style scoped>
-.page { padding: 4px; }
-h1 { margin: 2px 0 4px; font-size: 30px; font-weight: 400; letter-spacing: -0.015em; }
-.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);
-}
-
-.ctrl-card {
-  display: flex;
-  flex-direction: column;
-  gap: 11px;
-  padding: 12px 18px 11px;
-  margin-bottom: 14px;
-}
-.ctrl-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 14px;
-  align-items: center;
-  justify-content: space-between;
-}
-/* 窄屏前先写死「不可压缩」:药丸/周期项被 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; 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;
-  color: var(--ink);
-  background: var(--paper-deep);
-  border: 1px solid var(--line-strong);
-  border-radius: var(--radius-chip);
-}
-.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); }
-
-/* 产线状态带:label 固定 + 单行横向滚动(任意产线数量恒定一行高) */
-.line-strip {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-  padding-top: 10px;
-  border-top: 1px solid var(--divider-hair);
-}
-.strip-label {
-  display: inline-flex;
-  flex: 0 0 auto;
-  gap: 6px;
-  align-items: center;
-  font-size: 10.5px;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--ink-faint);
-}
-.strip-label small { font-size: 10px; color: var(--ink-faint); }
-.strip-scroll {
-  display: flex;
-  gap: 8px;
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow-x: auto;
-  padding-bottom: 2px;
-  scrollbar-width: thin;
-  scrollbar-color: var(--line-strong) transparent;
-}
-.strip-scroll::-webkit-scrollbar { height: 4px; }
-.strip-scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 2px; }
-.strip-scroll::-webkit-scrollbar-track { background: transparent; }
-.line-pill {
-  display: inline-flex;
-  flex: 0 0 auto;
-  gap: 7px;
-  align-items: center;
-  padding: 4px 12px;
-  font-size: 11.5px;
-  color: var(--ink-soft);
-  background: var(--paper-deep);
-  border: 1px solid var(--line-strong);
-  border-radius: var(--radius-pill);
-  transition: color 0.15s, border-color 0.15s, background 0.15s;
-}
-/* 空心点 = 待机;实心呼吸点 = 运行(状态语义承载体,非装饰) */
-.line-pill .lp-dot {
-  width: 7px;
-  height: 7px;
-  border: 1.5px solid var(--lc, var(--ink-fainter));
-  border-radius: 50%;
-  opacity: 0.55;
-}
-.line-pill b { font-weight: 600; }
-.line-pill small { font-size: 10.5px; color: var(--ink-faint); }
-.line-pill:hover { border-color: var(--lc, var(--accent)); color: var(--ink); }
-.line-pill.on {
-  color: var(--ink);
-  background: color-mix(in srgb, var(--lc) 10%, transparent);
-  border-color: color-mix(in srgb, var(--lc) 50%, transparent);
-}
-.line-pill.on .lp-dot {
-  border-color: transparent;
-  background: var(--lc);
-  opacity: 1;
-}
-.line-pill.on .lp-run { color: color-mix(in srgb, var(--lc) 75%, var(--ink)); }
-@media (prefers-reduced-motion: no-preference) {
-  .line-pill.on .lp-dot { box-shadow: 0 0 7px color-mix(in srgb, var(--lc) 75%, transparent); animation: lpPulse 1.8s ease-in-out infinite; }
-}
-@keyframes lpPulse {
-  0%, 100% { box-shadow: 0 0 3px color-mix(in srgb, var(--lc) 55%, transparent); }
-  50% { box-shadow: 0 0 9px color-mix(in srgb, var(--lc) 85%, transparent); }
-}
-
-.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; }
-/* 单元格规则须穿透行组件(:deep):行组件是渲染隔离单元,其内部 td 只带子作用域,
-   父页 scoped 选择器不命中 —— 行内一切样式见 DaqNodeRow.vue 的 scoped 块。 */
-.nodes-table th, .nodes-table :deep(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 :deep(td b) { margin-left: 8px; }
-.right, .nodes-table :deep(.right) { text-align: right; }
-
-/* ── 实时告警 + 实时事件双面板(server 权威;玻璃面板语言) ── */
-.ops-panels {
-  display: grid;
-  grid-template-columns: minmax(320px, 5fr) minmax(320px, 7fr);
-  gap: 10px;
-  margin: 0 0 10px;
-}
-@media (max-width: 1100px) {
-  .ops-panels { grid-template-columns: 1fr; }
-}
-.ops-panel {
-  min-width: 0;
-  background: var(--surface-glass);
-  border: 1px solid var(--glass-line);
-  border-radius: 10px;
-  backdrop-filter: var(--aurora-blur) saturate(1.15);
-}
-.ops-panel.alarm-panel.live { border-color: color-mix(in srgb, var(--tone-danger-dot) 40%, var(--glass-line)); }
-.panel-head {
-  display: flex;
-  gap: 7px;
-  align-items: center;
-  padding: 8px 12px;
-  font-size: 12.5px;
-  color: var(--ink-soft);
-  border-bottom: 1px solid var(--glass-line);
-}
-.panel-head .bell { color: var(--tone-danger-dot); }
-.panel-head .cnt { margin-left: auto; font-size: 11px; color: var(--ink-faint); }
-.panel-head .cnt.hot { color: var(--tone-danger-dot); font-weight: 700; }
-.panel-link {
-  display: inline-flex;
-  gap: 3px;
-  align-items: center;
-  margin-left: auto;
-  font-size: 11.5px;
-  color: var(--tone-info-dot);
-  text-decoration: none;
-}
-.panel-head .cnt + .panel-link { margin-left: 12px; }
-.panel-body {
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-  max-height: 168px;
-  padding: 8px 12px;
-  overflow-y: auto;
-}
-.panel-empty { margin: 4px 0; font-size: 12px; color: var(--ink-faint); }
-.alarm-row {
-  display: flex;
-  gap: 7px;
-  align-items: center;
-  padding: 5px 8px;
-  font-size: 12px;
-  color: var(--tone-danger-dot);
-  background: var(--tone-danger-bg);
-  border: 1px solid color-mix(in srgb, var(--tone-danger-dot) 35%, transparent);
-  border-radius: 7px;
-}
-.alarm-row .tri { flex: none; }
-.alarm-row b { color: var(--ink); }
-.alarm-row .esc { color: var(--tone-danger-dot); }
-.alarm-row .ack { margin-left: auto; }
-.evt-row {
-  display: flex;
-  gap: 7px;
-  align-items: center;
-  padding: 4px 6px;
-  font-size: 12px;
-  border-radius: 6px;
-}
-.evt-row:hover { background: var(--frost-bg); }
-.evt-row .t { flex: none; font-size: 11px; }
-.evt-row .txt {
-  min-width: 0;
-  overflow: hidden;
-  color: var(--ink-soft);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.src-badge {
-  flex: none;
-  padding: 1px 6px;
-  font-size: 10px;
-  border: 1px solid var(--glass-line);
-  border-radius: 99px;
-  color: var(--ink-faint);
-}
-.src-badge.agent { color: var(--tone-info-dot); border-color: color-mix(in srgb, var(--tone-info-dot) 40%, transparent); }
-.src-badge.user { color: var(--tone-success-dot); border-color: color-mix(in srgb, var(--tone-success-dot) 40%, transparent); }
-.src-badge.system { color: var(--ink-faint); }
-.kind-chip {
-  flex: none;
-  padding: 1px 6px;
-  font-size: 10px;
-  color: var(--ink-soft);
-  background: var(--frost-bg);
-  border-radius: 5px;
-}
-.kind-chip.alarm { color: var(--tone-danger-dot); background: var(--tone-danger-bg); }
-.kind-chip.write { color: var(--tone-info-dot); }
-.kind-chip.rollback { color: var(--tone-warning-dot); }
-
-/* ── 行内单元格样式(状态 pill/实时值/趋势/驱动/产线/绑定/操作)见行组件 ── */
-
-.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); }
-}
-
-.infra-banner {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-  padding: 10px 14px;
-  margin-bottom: 14px;
-  color: var(--tone-warning-dot);
-  background: var(--tone-warning-bg);
-  border: 1px solid color-mix(in srgb, var(--tone-warning-dot) 40%, transparent);
-  border-radius: var(--radius-chip);
-}
-/* 筛选产线运行中:绿色语义变体 */
-.infra-banner.good {
-  color: var(--tone-success-dot);
-  background: var(--tone-success-bg);
-  border-color: color-mix(in srgb, var(--tone-success-dot) 40%, transparent);
-}
-.infra-banner .txt { flex: 1 1 auto; font-size: 12.5px; line-height: 1.5; }
-.infra-banner .txt a { color: var(--accent); text-decoration: underline; }
-.infra-banner .txt b { font-weight: 600; }
-.infra-banner .txt small { margin-left: 8px; font-size: 10.5px; opacity: 0.75; }
-.infra-banner .pill-btn { flex: 0 0 auto; }
-
-/* ---------- 未确认报警条(S5) ---------- */
-.alarm-bar {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-  align-items: center;
-  padding: 8px 14px;
-  margin-bottom: 14px;
-  color: var(--tone-danger-dot);
-  background: var(--tone-danger-bg);
-  border: 1px solid color-mix(in srgb, var(--tone-danger-dot) 40%, transparent);
-  border-radius: var(--radius-chip);
-}
-.bar-label {
-  display: inline-flex;
-  flex: 0 0 auto;
-  gap: 6px;
-  align-items: center;
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-}
-.bar-label .bell { animation: bellShake 1.6s ease-in-out infinite; }
-@media (prefers-reduced-motion: reduce) {
-  .bar-label .bell { animation: none; }
-}
-@keyframes bellShake {
-  0%, 80%, 100% { transform: rotate(0deg); }
-  85% { transform: rotate(12deg); }
-  90% { transform: rotate(-10deg); }
-  95% { transform: rotate(6deg); }
-}
-.alarm-scroll {
-  display: flex;
-  flex: 1 1 auto;
-  gap: 8px;
-  min-width: 0;
-  overflow-x: auto;
-  scrollbar-width: thin;
-  scrollbar-color: var(--line-strong) transparent;
-}
-.alarm-item {
-  display: inline-flex;
-  flex: 0 0 auto;
-  gap: 8px;
-  align-items: center;
-  padding: 4px 10px;
-  font-size: 11.5px;
-  color: var(--ink-soft);
-  background: var(--paper-deep);
-  border: 1px solid color-mix(in srgb, var(--tone-danger-dot) 30%, transparent);
-  border-radius: var(--radius-pill);
-}
-.alarm-item b { font-weight: 600; }
-.alarm-item .dim { opacity: 0.6; }
-.alarm-item .esc { color: var(--tone-warning-dot); }
-.alarm-item .ack {
-  padding: 2px 9px;
-  color: var(--paper-raised);
-  background: var(--tone-danger-dot);
-  border-color: transparent;
-}
-.alarm-item .ack:hover { opacity: 0.85; border-color: transparent; color: var(--paper-raised); }
-
-/* ---------- 添加节点向导 ---------- */
-.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;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--scrim);
-  backdrop-filter: blur(2px);
-}
-.modal {
-  width: 640px;
-  max-width: 94vw;
-  max-height: 88vh;
-  overflow-y: auto;
-  padding: 22px 24px;
-  background: var(--surface-glass-strong);
-  backdrop-filter: var(--aurora-blur);
-  border: 1px solid var(--glass-line);
-  border-radius: var(--radius-panel);
-  box-shadow: var(--glass-edge), var(--shadow-float);
-}
-.m-title { margin: 0 0 14px; font-size: 17px; }
-.seg-row { display: flex; gap: 8px; margin-bottom: 14px; }
-.seg {
-  flex: 1;
-  padding: 8px 0;
-  font-size: 13px;
-  cursor: pointer;
-  color: var(--ink-faint);
-  background: var(--paper-deep);
-  border: 1px solid var(--line);
-  border-radius: var(--radius-chip);
-}
-.seg.on {
-  font-weight: 600;
-  color: var(--on-accent);
-  background: var(--accent);
-  border-color: var(--accent);
-}
-.f-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
-.driver-form { grid-template-columns: repeat(3, 1fr); }
-.cal-form { grid-template-columns: 2fr 1fr; align-items: end; }
-.f { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--ink-faint); }
-.f em { margin-left: 3px; font-style: normal; color: var(--tone-danger-dot); }
-.inp {
-  width: 100%;
-  padding: 6px 9px;
-  font-size: 12.5px;
-  color: var(--ink);
-  background: var(--paper-deep);
-  border: 1px solid var(--line-strong);
-  border-radius: var(--radius-chip);
-}
-.hint { font-size: 10px; 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.ok { color: var(--tone-success-dot); }
-.test-result.bad { color: var(--tone-danger-dot); }
-.m-err { margin: 8px 0 0; font-size: 12px; color: var(--tone-danger-dot); }
-.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); }
-
-/* ---------- 模板管理 ---------- */
-.sec-label {
-  margin: 14px 0 6px;
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--ink-faint);
-}
-.tpl-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
-.tpl-table td { padding: 7px 8px; border-bottom: 1px solid var(--divider-hair); }
-.tpl-table td b { margin-right: 8px; }
-.tpl-table .range { font-size: 11.5px; color: var(--ink-soft); }
-.tpl-table .empty { color: var(--ink-faint); font-size: 12px; text-align: center; padding: 14px 0; }
-.tpl-table .actions { white-space: nowrap; }
-
-/* ---------- 节点筛选工具条 ---------- */
-.tbl-toolbar {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-  align-items: flex-end;
-  justify-content: space-between;
-  padding: 11px 14px;
-  border-bottom: 1px solid var(--divider-hair);
-}
-.filters { display: flex; flex-wrap: wrap; gap: 9px; align-items: flex-end; }
-.flt {
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-  font-size: 10px;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-  color: var(--ink-faint);
-}
-.inp-sel {
-  min-width: 112px;
-  padding: 4px 8px;
-  font-size: 11.5px;
-  color: var(--ink);
-  background: var(--paper-deep);
-  border: 1px solid var(--line-strong);
-  border-radius: var(--radius-chip);
-  transition: border-color 0.15s;
-}
-.inp-sel:focus { outline: none; border-color: var(--accent); }
-.clear-btn { margin-bottom: 1px; }
-/* 名称/ID 搜索:与下拉同族,宽度独立(复合筛选的最后一个自由维度) */
-.flt-search {
-  width: 168px;
-  min-width: 0;
-}
-.flt-search::placeholder { color: var(--ink-faint); }
-.count { padding-bottom: 4px; font-size: 11px; color: var(--ink-faint); }
-
-/* ── 行内产线/绑定/运行态样式见 DaqNodeRow.vue scoped 块 ── */
-
-/* ── Agent 优化记录面板(调控闭环;与全站玻璃语言同族) ── */
-.opt-card { padding: 0; }
-.opt-head {
-  display: flex;
-  gap: 9px;
-  align-items: center;
-  width: 100%;
-  padding: 12px 16px;
-  font-size: 13.5px;
-  color: var(--ink);
-  background: transparent;
-  border: 0;
-  cursor: pointer;
-}
-.opt-head > .i-tabler-flask { font-size: 16px; color: var(--tone-info-dot); }
-.opt-count {
-  padding: 1px 8px;
-  font-size: 10.5px;
-  color: var(--tone-info-dot);
-  background: var(--tone-info-bg);
-  border-radius: 999px;
-}
-.opt-chevron {
-  width: 7px;
-  height: 7px;
-  margin-left: auto;
-  border-right: 1.5px solid var(--ink-faint);
-  border-bottom: 1.5px solid var(--ink-faint);
-  transform: rotate(45deg);
-  transition: transform var(--transition-base);
-}
-.opt-chevron.open { transform: rotate(225deg); }
-/* 手风琴展开/收起(occasional 频次;状态指示;height 豁免 = 手风琴;进出对称 260ms;
- * 收起态 visibility 联动,内部链接/按钮不可聚焦) */
-.opt-body {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  max-height: 0;
-  padding: 0 16px;
-  overflow: hidden;
-  visibility: hidden;
-  opacity: 0;
-  transition:
-    max-height 260ms cubic-bezier(0.22, 0.68, 0.36, 1),
-    opacity 200ms ease,
-    visibility 260ms;
-}
-.opt-body.open {
-  max-height: 64vh;
-  padding-bottom: 14px;
-  overflow-y: auto;
-  visibility: visible;
-  opacity: 1;
-}
-.opt-filters { display: flex; gap: 8px; align-items: center; }
-.opt-empty { font-size: 11.5px; color: var(--ink-faint); }
-.opt-list { display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; list-style: none; }
-.opt-row {
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-  padding: 9px 12px;
-  background: var(--frost-bg);
-  border: 1px solid var(--glass-line);
-  border-radius: 10px;
-}
-.opt-row.open { border-color: color-mix(in srgb, var(--tone-warning-dot) 36%, var(--glass-line)); }
-.opt-row.rolled-back { border-color: color-mix(in srgb, var(--tone-danger-dot) 30%, var(--glass-line)); }
-.opt-line1 { display: flex; gap: 9px; align-items: center; min-width: 0; }
-.opt-status {
-  flex: none;
-  padding: 1px 8px;
-  font-family: var(--font-mono);
-  font-size: 9.5px;
-  color: var(--ink-faint);
-  border: 1px solid var(--line-strong);
-  border-radius: 5px;
-}
-.opt-status.open { color: var(--tone-warning-dot); border-color: color-mix(in srgb, var(--tone-warning-dot) 45%, transparent); }
-.opt-status.judged-keep { color: var(--tone-success-dot); border-color: color-mix(in srgb, var(--tone-success-dot) 45%, transparent); }
-.opt-status.rolled-back { color: var(--tone-danger-dot); border-color: color-mix(in srgb, var(--tone-danger-dot) 45%, transparent); }
-.opt-node { overflow: hidden; font-size: 12.5px; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
-.opt-params { flex: none; font-size: 11px; color: var(--tone-info-dot); }
-.opt-time { flex: none; margin-left: auto; font-size: 10px; color: var(--ink-faint); }
-.mini-act {
-  flex: none;
-  padding: 2px 9px;
-  font-size: 10.5px;
-  color: var(--tone-info-dot);
-  background: var(--tone-info-bg);
-  border: 0;
-  border-radius: 6px;
-  cursor: pointer;
-}
-.mini-act.danger { color: var(--tone-danger-dot); background: var(--tone-danger-bg); }
-.mini-act:disabled { opacity: 0.5; cursor: default; }
-.opt-line2 { display: flex; flex-wrap: wrap; gap: 8px; font-size: 10.5px; color: var(--ink-faint); }
-.opt-judge.rollback, .opt-judge.keep, .opt-judge.uncertain { color: var(--ink-soft); }
-.opt-judge b { font-weight: 600; }
-.opt-open-hint { color: var(--tone-warning-dot); }
-.opt-agg { color: var(--ink-faint); }
-.opt-series { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; }
-.opt-ch { display: flex; flex: 1 1 180px; gap: 8px; align-items: center; min-width: 160px; }
-.opt-spark { width: 120px; height: 30px; }
-.opt-spark polyline {
-  fill: none;
-  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>