agentworkshop 0.7.24 → 0.7.33

package/app/components/workshop/town/ModelPreview3D.vue

@@ -38,6 +38,9 @@ interface Slot {
   w: number
   h: number
   speed: number
+  /** 可见性门控:面板收起/滚出视口/已卸载的槽位零渲染(IntersectionObserver 维护) */
+  visible: boolean
+  io: IntersectionObserver | null
 }
 
 interface SharedRig {
@@ -57,13 +60,19 @@ function acquireRig(): SharedRig {
   renderer.toneMapping = THREE.ACESFilmicToneMapping
   renderer.toneMappingExposure = 1.15
   const rig: SharedRig = { renderer, slots: new Set(), raf: 0, clock: new THREE.Clock() }
+  let acc = 0
   const tick = (): void => {
     rig.raf = requestAnimationFrame(tick)
     const dt = rig.clock.getDelta()
-    // 逐槽渲染(76px 卡 × ~20 槽 = 极小开销);槽画布不在文档中(卸载竞态)则跳过
+    // 30fps 封顶:预览旋转 30fps 与满帧视觉无差,渲染+blit 开销按比例下降
+    acc += dt * 1000
+    if (acc < 1000 / 30) return
+    const step = acc / 1000
+    acc = 0
+    // 逐槽渲染;不可见/已卸载槽位跳过(原实现仅跳过「断连且零尺寸」,面板收起照烧)
     for (const s of rig.slots) {
-      if (!s.canvas.isConnected && s.canvas.width === 0) continue
-      if (s.group) s.group.rotation.y += dt * s.speed
+      if (!s.canvas.isConnected || !s.visible) continue
+      if (s.group) s.group.rotation.y += step * s.speed
       rig.renderer.setSize(s.w, s.h, false)
       rig.renderer.render(s.scene, s.camera)
       s.ctx.clearRect(0, 0, s.w, s.h)
@@ -145,7 +154,19 @@ function mountScene(source: string): void {
   const group = new THREE.Group()
   scene.add(group)
 
-  slot = { canvas, ctx, scene, camera, group, w: canvas.width, h: canvas.height, speed: 0.6 }
+  slot = { canvas, ctx, scene, camera, group, w: canvas.width, h: canvas.height, speed: 0.6, visible: false, io: null }
+  // 可见性门控:视口外(含面板收起/滚动)不渲染;重新入屏自动恢复
+  if (typeof IntersectionObserver !== 'undefined') {
+    slot.io = new IntersectionObserver((entries) => {
+      for (const e of entries) {
+        if (slot) slot.visible = e.isIntersecting
+      }
+    })
+    slot.io.observe(canvas)
+  }
+  else {
+    slot.visible = true
+  }
   rig.slots.add(slot)
 
   loading.value = true
@@ -174,6 +195,7 @@ function dispose(): void {
   objectUrl = ''
   if (slot) {
     const rig = rigGlobal.__modelPreviewRig
+    slot.io?.disconnect()
     rig?.slots.delete(slot)
     // 显存释放:几何/材质/纹理逐项 dispose(场景小,遍历即可)
     slot.scene.traverse((c) => {

package/app/components/workshop/town/TownScene3D.ts

@@ -523,8 +523,8 @@ class Agent3D {
       this.animState = next
       this.host.notifyMotion(this)
     }
-    if (this.clips.length === 0) {
-      // 无动画 clip → 程序化动作绑定(model 局部,色环/名牌保持贴地稳定):
+    const bob = () => {
+      // 程序化动作绑定(model 局部,色环/名牌保持贴地稳定):
       //  待机呼吸浮动 + 行走跳跃颠簸 + 行走左右微摆
       const t = performance.now()
       const breathe = 1.2 + Math.sin(t * 0.0016) * 1.6
@@ -532,13 +532,27 @@ class Agent3D {
       this.model.position.y = moving ? hop : breathe
       const swayTarget = moving ? Math.sin(t * 0.006) * 0.07 : 0
       this.model.rotation.z += (swayTarget - this.model.rotation.z) * 0.12
+    }
+    if (this.clips.length === 0) {
+      bob()
       return
     }
-    // 有动画 clip:按移动状态切换 idle/walk,crossfade 平滑过渡(避免双 action 叠加)
+    // 有动画 clip:名字感知选择(剪辑命名各异:WALK/Walk、idle/stand/breath...),
+    // 先按语义匹配,找不到回退索引(idle→0,walk→1);仅含走路剪辑的模型待机时
+    // 回退程序化 bob,避免原地播放走路。crossfade 平滑过渡(避免双 action 叠加)。
     if (!this.mixer) return
-    const idx = moving ? (this.clips.length > 1 ? 1 : 0) : 0
-    const clip = this.clips[idx]
-    if (!clip) return
+    const lower = (c: THREE.AnimationClip) => c.name.toLowerCase()
+    const clip = moving
+      ? (this.clips.find(c => /walk|run|move/.test(lower(c))) ?? this.clips[Math.min(1, this.clips.length - 1)])
+      : (this.clips.find(c => /idle|stand|breath/.test(lower(c))) ?? (this.clips.length > 1 ? this.clips[0] : null))
+    if (!clip) {
+      if (this.activeAction) {
+        this.activeAction.fadeOut(0.15)
+        this.activeAction = null
+      }
+      bob()
+      return
+    }
     const nextAction = this.mixer.clipAction(clip)
     if (this.activeAction === nextAction) {
       nextAction.timeScale = moving ? 1.3 : 0.9
@@ -763,6 +777,9 @@ export class TownScene3D {
   private clock = new THREE.Clock()
   private frameCount = 0
   private fpsAccum = 0
+  /** 墙钟 FPS 窗口起点与 rAF 回调计数(徽标/自适应质量的真实输入;原 dt 累计会漂移) */
+  private fpsWinT0 = 0
+  private rafCount = 0
   /** 帧预算(ms):渲染节流上限;0 = 不限制。数据消费不走此门控(帧到达即入实时缓冲) */
   private frameBudgetMs = 1000 / 40
 
@@ -875,6 +892,9 @@ export class TownScene3D {
     // 电影级色调映射:高光滚降 + 中间调层次,GLB 材质不再"平板曝光"
     this.renderer.toneMapping = THREE.ACESFilmicToneMapping
     this.renderer.toneMappingExposure = 1.12
+    // 统计跨 pass 累计(composer 多 pass 直渲染时 info 每次自动清零,只会读到末 pass 的 1 次调用):
+    // 每帧渲染前手动 reset,render() 累加,__townStats 拿到的才是整帧真实 drawCalls/triangles
+    this.renderer.info.autoReset = false
     this.el.appendChild(this.renderer.domElement)
     // 舞台尺寸跟随宿主(网格布局/抽屉/全屏切换都会改变宿主尺寸)
     this.resizeOb = new ResizeObserver(() => {
@@ -2783,6 +2803,14 @@ export class TownScene3D {
         if ((o as THREE.Mesh).isMesh) o.castShadow = true
       })
       this.enhancePbrMaterials(gltf.scene, 'device')
+      // 静态子树矩阵冻结:设备模型加载后局部变换恒定,子孙 matrixAutoUpdate=false +
+      // 一次性 updateMatrix,免每帧全树 updateMatrix 合成(拖拽/缩放只改祖先链,
+      // world 矩阵经 force 传播仍正确;设备无动画,mixer 仅角色路径使用)
+      gltf.scene.traverse((o) => {
+        if (o === gltf.scene) return
+        o.matrixAutoUpdate = false
+        o.updateMatrix()
+      })
       group.add(gltf.scene)
     }
     catch {
@@ -4156,6 +4184,7 @@ export class TownScene3D {
     const animate = () => {
       if (this.disposed) return
       this.raf = requestAnimationFrame(animate)
+      this.rafCount += 1
       const rawDt = this.clock.getDelta()
       // 帧预算门控:数据消费与帧率解耦 —— WS 帧直写实时缓冲(消费层,不受此门控),
       // 渲染循环每帧只取「当前最新值」上屏(展示层);budget 0 = 不限制(用户可选 60/120/∞)。
@@ -4317,16 +4346,35 @@ export class TownScene3D {
       }
       this.renderer.shadowMap.needsUpdate = this.dirty || shadowAnimated
       // 后处理管线出图(RenderPass → Bloom → OutputPass;替代直渲染)
+      this.renderer.info.reset()
       this.composer.render(dt)
       this.dirty = false
-      // FPS
+      // FPS(墙钟 1000ms 窗口:performance.now 真实时钟;原 dt 累计在长任务饿死 rAF 时虚高)
       this.frameCount += 1
-      this.fpsAccum += dt * 1000
-      if (this.fpsAccum >= 1000) {
-        this.emit('fps', this.frameCount)
-        this.adaptQuality(this.frameCount)
+      const wallNow = performance.now()
+      if (this.fpsWinT0 === 0) this.fpsWinT0 = wallNow
+      if (wallNow - this.fpsWinT0 >= 1000) {
+        const fps = Math.round((this.frameCount * 1000) / (wallNow - this.fpsWinT0))
+        this.emit('fps', fps)
+        this.adaptQuality(fps)
+        // 仪表化快照(1Hz;e2e/性能回归经 window.__townStats 读取,免再猜渲染真相)
+        const info = this.renderer.info
+        ;(globalThis as typeof globalThis & { __townStats?: Record<string, number> }).__townStats = {
+          fps,
+          rafHz: this.rafCount,
+          drawCalls: info.render.calls,
+          triangles: info.render.triangles,
+          geometries: info.memory.geometries,
+          textures: info.memory.textures,
+          tier: this.qTier,
+          dpr: +this.renderer.getPixelRatio().toFixed(2),
+          frameBudgetMs: +this.frameBudgetMs.toFixed(2),
+          agents: this.agents.size,
+          devices: this.deviceNodes.size,
+        }
         this.frameCount = 0
-        this.fpsAccum = 0
+        this.rafCount = 0
+        this.fpsWinT0 = wallNow
       }
     }
     animate()

package/app/components/workshop/town/TownView.vue

@@ -1574,15 +1574,16 @@ const liveTick = ref(0)
 const rtcVals = new Map<string, RtcPoint>()
 const rtcHist = new Map<string, number[]>()
 let unsubLiveVals: (() => void) | null = null
-/** 帧计数合批:高频帧流只按渲染帧节拍失效一次(展示层一帧一拍;缓冲仍逐帧入账) */
+/** 帧计数合批:高频帧流按 200ms 定时节拍失效(原 rAF 合批在 60-220Hz rAF 下每秒
+ *  重建 60-220 次 227 条目的 daqSim Map,是实测长任务主源;200ms 展示延迟不可感知) */
 let tickQueued = false
 function bumpLiveTick(): void {
   if (tickQueued) return
   tickQueued = true
-  requestAnimationFrame(() => {
+  setTimeout(() => {
     tickQueued = false
     liveTick.value++
-  })
+  }, 200)
 }
 
 /** 读数帧消费:实时缓冲直写 + 状态边沿即时告警(与批量 watch 共享 prevDaqState 去重) */

package/app/composables/workshop/useAmlStream.ts

@@ -0,0 +1,136 @@
+/**
+ * useAmlStream —— AML 自动建模实时流的前端单一消费口(与 useDcwStream/useOpsLog 对称)。
+ *
+ * 数据权威在 server:REST 快照(GET /api/workshop/aml/*)+ WS 实时帧增量收敛
+ * (aml.job 训练进度 / aml.dataset 数据集构建 / aml.model 模型晋升,均经 townBus 旁路)。
+ * townBus 单例挂 globalThis,subscribe 返回退订函数;ensure() 幂等建订阅,dispose() 释放。
+ */
+import { ref } from 'vue'
+import { useTownBus } from './useTownBus'
+import type { AepEnvelope } from '#shared/workshop-protocol'
+
+/** aml.job 帧 payload(server/services/workshop/aml/job-orchestrator broadcastSceneEvent) */
+export interface AmlJobFrame {
+  jobId: string
+  datasetId: string
+  lineId?: string
+  status: string
+  stage: string
+  progress: number
+  purpose?: string
+  note?: string
+}
+
+/** aml.dataset 帧 payload(数据集快照构建完成) */
+export interface AmlDatasetFrame {
+  op: 'built'
+  datasetId: string
+  lineId?: string
+  rowCount: number
+}
+
+/** aml.model 帧 payload(模型阶段晋升/退役) */
+export interface AmlModelFrame {
+  op: 'promoted'
+  modelId: string
+  stage: string
+}
+
+/** 作业实时投影(REST 快照行 + WS 增量收敛) */
+export interface AmlJobLive {
+  jobId: string
+  datasetId: string
+  lineId: string
+  status: string
+  stage: string
+  progress: number
+  purpose?: string
+  note?: string
+  at: string
+}
+
+function createStore() {
+  /** jobId → 实时投影(整表替换触发响应;帧频低,拷贝成本可忽略) */
+  const jobs = ref(new Map<string, AmlJobLive>())
+  const lastJob = ref<AmlJobFrame | null>(null)
+  const lastDataset = ref<AmlDatasetFrame | null>(null)
+  const lastModel = ref<AmlModelFrame | null>(null)
+
+  function applyJob(p: AmlJobFrame): void {
+    const prev = jobs.value.get(p.jobId)
+    const next = new Map(jobs.value)
+    next.set(p.jobId, {
+      jobId: p.jobId,
+      datasetId: p.datasetId || prev?.datasetId || '',
+      lineId: p.lineId ?? prev?.lineId ?? '',
+      status: p.status,
+      stage: p.stage,
+      progress: p.progress,
+      purpose: p.purpose ?? prev?.purpose,
+      note: p.note,
+      at: new Date().toISOString(),
+    })
+    jobs.value = next
+  }
+
+  function handler(e: AepEnvelope): void {
+    // aml.* 帧类型尚未并入 AepEvent 联合(e.type 只作为 string 分派),payload 经 unknown 桥接
+    if (e.type === 'aml.job') {
+      const p = e.payload as unknown as AmlJobFrame
+      if (!p?.jobId) return
+      lastJob.value = p
+      applyJob(p)
+    }
+    else if (e.type === 'aml.dataset') {
+      const p = e.payload as unknown as AmlDatasetFrame
+      if (!p?.datasetId) return
+      lastDataset.value = p
+    }
+    else if (e.type === 'aml.model') {
+      const p = e.payload as unknown as AmlModelFrame
+      if (!p?.modelId) return
+      lastModel.value = p
+    }
+  }
+
+  /** 引用计数订阅(同 useDcwStream):首个调用建订阅,归零才退订 */
+  let feedConsumers = 0
+  let feedUnsub: (() => void) | null = null
+
+  function release(): void {
+    feedConsumers = Math.max(0, feedConsumers - 1)
+    if (feedConsumers === 0 && feedUnsub) {
+      feedUnsub()
+      feedUnsub = null
+    }
+  }
+
+  /** 建立订阅(幂等);返回本次消费的退订函数 */
+  function ensure(): () => void {
+    feedConsumers++
+    if (!feedUnsub) feedUnsub = useTownBus().subscribe(handler)
+    let done = false
+    return () => {
+      if (done) return
+      done = true
+      release()
+    }
+  }
+
+  /** 释放一次消费(与 ensure 配对;幂等到归零) */
+  function dispose(): void {
+    release()
+  }
+
+  return { jobs, lastJob, lastDataset, lastModel, ensure, dispose }
+}
+
+type AmlStreamStore = ReturnType<typeof createStore>
+
+const GLOBAL_KEY = '__amlStream'
+
+export function useAmlStream(): AmlStreamStore {
+  const g = globalThis as typeof globalThis & Record<string, unknown>
+  if (!g[GLOBAL_KEY]) g[GLOBAL_KEY] = createStore()
+  return g[GLOBAL_KEY] as AmlStreamStore
+}

package/app/composables/workshop/useCharacterAssets.ts

@@ -78,6 +78,7 @@ function createStore(): CharacterAssetStore {
     { id: 'mage', name: '紫晶法师', file: '/assets/game/character/mage.png', frames: 4, frameWidth: 48, frameHeight: 88, kind: 'sheet', builtin: true, applied: false },
     { id: 'bot', name: '青枢机械', file: '/assets/game/character/bot.png', frames: 4, frameWidth: 48, frameHeight: 88, kind: 'sheet', builtin: true, applied: false },
     { id: 'hero-3d', name: '标准员工模型', file: '/assets/game/character/hero-3d.glb', frames: 1, frameWidth: 0, frameHeight: 0, kind: 'glb', builtin: true, applied: false, hint: '默认员工 3D 模型' },
+    { id: 'yangyang-walk', name: '杨杨(走路)', file: '/assets/game/character/yangyang-walk.glb', frames: 1, frameWidth: 0, frameHeight: 0, kind: 'glb', builtin: true, applied: false, hint: '自定义角色:骨骼走路动画(剪辑 WALK;文件较大,建议少量绑定)' },
     { id: 'device-3d', name: '工业泵设备', file: '/assets/game/character/device-3d.glb', frames: 1, frameWidth: 0, frameHeight: 0, kind: 'dev', builtin: true, applied: false, hint: '数字孪生实体模型(拖入场景生成设备)' },
   ]
 

package/app/composables/workshop/useDaqStream.ts

@@ -38,6 +38,13 @@ interface DaqControllerState {
   defaultIntervalMs: number
   /** 全局缺省 WS 下发间隔(节点 null 跟随;0=随采样节拍) */
   defaultPublishIntervalMs: number
+  /** WS 下发节拍下限(节点 publishIntervalMs 钳制;0=允许每帧) */
+  minPublishIntervalMs?: number
+  /** 全局缺省采集下限(节点 intervalMs 钳制) */
+  minIntervalMs?: number
+  /** 趋势图自动拉取(时序库查询+重绘)间隔默认值/下限 */
+  queryDisplayIntervalMs?: number
+  minQueryDisplayIntervalMs?: number
   nodesTotal: number
   nodesOnline: number
   produced?: number
@@ -97,8 +104,11 @@ const api = <T>(path: string, init?: RequestInit): Promise<T> =>
 
 const createStore = () => {
   const nodes = reactive<DaqNodeLive[]>([])
+  // id→节点 O(1) 索引(存 reactive 代理,消费方走索引读取仍被依赖追踪);
+  // 身份仅在 push/splice/load 时变化,故仅在这些点维护,热路径(读数合批/帧入账)免全表 find
+  const nodeIndex = new Map<string, DaqNodeLive>()
   const alarms = reactive<DaqAlarmRow[]>([]) // S5:未确认报警(轮询 + ack 后刷新)
-  const controller = reactive<DaqControllerState>({ running: true, defaultIntervalMs: 1000, defaultPublishIntervalMs: 0, nodesTotal: 0, nodesOnline: 0 })
+  const controller = reactive<DaqControllerState>({ running: true, defaultIntervalMs: 1000, defaultPublishIntervalMs: 0, queryDisplayIntervalMs: 5000, nodesTotal: 0, nodesOnline: 0 })
   const meta = reactive<DaqBackendMeta>({
     tsdb: '…', queue: '…', drivers: [], driverAvailable: {},
     infra: undefined,
@@ -109,6 +119,12 @@ const createStore = () => {
   // 帧缓冲(v2 多形态信号:nodeId → 最近 FRAMES_CAP 帧,新帧头插)
   const frames = reactive<Record<string, DaqFrameLive[]>>({})
 
+  /** 重建 O(1) 索引(load 级联重建;push/splice 单键维护) */
+  function rebuildIndex(): void {
+    nodeIndex.clear()
+    for (const n of nodes) nodeIndex.set(n.id, n)
+  }
+
   function upsert(node: DaqNodeView): void {
     const i = nodes.findIndex(x => x.id === node.id)
     if (i >= 0) {
@@ -117,6 +133,7 @@ const createStore = () => {
     }
     else {
       nodes.push({ ...node, hist: [] })
+      nodeIndex.set(node.id, nodes[nodes.length - 1]!)
     }
   }
 
@@ -134,13 +151,13 @@ const createStore = () => {
     const latest = new Map<string, AepDaqReading>()
     for (const r of batch) {
       latest.set(r.nodeId, r)
-      const n = nodes.find(x => x.id === r.nodeId)
+      const n = nodeIndex.get(r.nodeId)
       if (!n) continue
       n.hist.push(r.value)
       if (n.hist.length > HIST_CAP) n.hist.splice(0, n.hist.length - HIST_CAP)
     }
     for (const r of latest.values()) {
-      const n = nodes.find(x => x.id === r.nodeId)
+      const n = nodeIndex.get(r.nodeId)
       if (!n) continue
       n.value = r.value
       n.state = r.state
@@ -158,6 +175,9 @@ const createStore = () => {
       if (p.op === 'removed') {
         const i = nodes.findIndex(x => x.id === p.node!.id)
         if (i >= 0) nodes.splice(i, 1)
+        nodeIndex.delete(p.node.id)
+        // 孤儿帧缓冲同步清理(每节点 ≤30 帧 × 预览点;不清理则常驻内存)
+        Reflect.deleteProperty(frames, p.node.id)
         return
       }
       upsert(p.node)
@@ -196,7 +216,7 @@ const createStore = () => {
       })
       if (list.length > FRAMES_CAP) list.splice(FRAMES_CAP)
     }
-    const n = nodes.find(x => x.id === p.nodeId)
+    const n = nodeIndex.get(p.nodeId)
     if (n) {
       n.value = p.metrics?.avg ?? n.value
       if (p.state) n.state = p.state
@@ -262,8 +282,12 @@ const createStore = () => {
           next.push({ ...raw, hist: [] })
         }
       }
-      // 服务端权威:本轮未出现的节点移除(其 hist 随之丢弃,与原语义一致)
+      // 服务端权威:本轮未出现的节点移除(其 hist 随之丢弃,与原语义一致);孤儿帧缓冲同拍清理
       nodes.splice(0, nodes.length, ...next)
+      rebuildIndex()
+      for (const k of Object.keys(frames)) {
+        if (!nodeIndex.has(k)) Reflect.deleteProperty(frames, k)
+      }
       Object.assign(controller, data.controller)
       Object.assign(meta, data.meta ?? {})
       meta.driverAvailable = data.driverAvailable ?? {}
@@ -298,6 +322,8 @@ const createStore = () => {
     await api(`/${id}`, { method: 'DELETE' })
     const i = nodes.findIndex(x => x.id === id)
     if (i >= 0) nodes.splice(i, 1)
+    nodeIndex.delete(id)
+    Reflect.deleteProperty(frames, id)
   }
 
   async function bindNode(id: string, deviceId: string | null): Promise<void> {
@@ -436,7 +462,7 @@ const createStore = () => {
     alarms,
     fetchAlarms,
     ackAlarm,
-    nodeById: (id: string): DaqNodeLive | undefined => nodes.find(n => n.id === id),
+    nodeById: (id: string): DaqNodeLive | undefined => nodeIndex.get(id) ?? nodes.find(n => n.id === id),
     samplesOf,
     fetchFrames,
     frames,

package/app/composables/workshop/useDcwStream.ts

@@ -22,6 +22,8 @@ export interface DcwWriteHistoryEntry { id: string, nodeId: string, nodeName: st
 
 function createStore() {
   const nodes = reactive<DcwNodeView[]>([])
+  // id→节点 O(1) 索引(存 reactive 代理;仅在 push/splice/load 身份变化点维护,读帧热路径免全表 find)
+  const nodeIndex = new Map<string, DcwNodeView>()
   const controller = reactive<AepDcwControllerState>({ running: true, nodesTotal: 0, nodesOnline: 0, writesTotal: 0, writesFailed: 0 })
   const templates = reactive<DcwTemplateDef[]>(DCW_TEMPLATES.map(t => ({ ...t })))
   const recipes = reactive<RecipeView[]>([])
@@ -37,7 +39,10 @@ function createStore() {
   function upsert(node: DcwNodeView): void {
     const i = nodes.findIndex(x => x.id === node.id)
     if (i >= 0) nodes[i] = Object.assign(nodes[i]!, node)
-    else nodes.push(node)
+    else {
+      nodes.push(node)
+      nodeIndex.set(node.id, nodes[nodes.length - 1]!)
+    }
   }
 
   function applyChange(p: AepDcwNodeChange): void {
@@ -45,6 +50,7 @@ function createStore() {
     if (p.op === 'removed') {
       const i = nodes.findIndex(x => x.id === p.node!.id)
       if (i >= 0) nodes.splice(i, 1)
+      nodeIndex.delete(p.node.id)
       return
     }
     upsert(p.node)
@@ -73,7 +79,7 @@ function createStore() {
     {
       if (e.type === 'dcw.written') {
         const p = e.payload as AepDcwWritten
-        const n = nodes.find(x => x.id === p.nodeId)
+        const n = nodeIndex.get(p.nodeId)
         if (n) {
           n.value = p.value
           n.state = p.ok ? 'ok' : 'error'
@@ -85,7 +91,7 @@ function createStore() {
       }
       else if (e.type === 'dcw.read') {
         const p = e.payload as AepDcwRead
-        const n = nodes.find(x => x.id === p.nodeId)
+        const n = nodeIndex.get(p.nodeId)
         if (n) {
           if (p.ok) n.readValue = p.value
           n.lastReadAt = p.at
@@ -108,6 +114,8 @@ function createStore() {
     try {
       const data = await api<{ controller: AepDcwControllerState, nodes: DcwNodeView[], templates?: DcwTemplateDef[], recipes?: RecipeView[], runs?: RecipeRunView[], history?: DcwWriteHistoryEntry[], products?: ProductView[], lines?: LineView[], lineStates?: LineRunState[] }>('')
       nodes.splice(0, nodes.length, ...data.nodes)
+      nodeIndex.clear()
+      for (const n of nodes) nodeIndex.set(n.id, n)
       Object.assign(controller, data.controller)
       if (data.templates?.length) templates.splice(0, templates.length, ...data.templates.map(t => ({ ...t })))
       recipes.splice(0, recipes.length, ...(data.recipes ?? []))
@@ -190,6 +198,7 @@ function createStore() {
       await api(`/${id}`, { method: 'DELETE' })
       const i = nodes.findIndex(x => x.id === id)
       if (i >= 0) nodes.splice(i, 1)
+      nodeIndex.delete(id)
     },
     bindNode: async (id: string, deviceId: string | null): Promise<void> => {
       const data = await api<{ node: DcwNodeView }>(`/${id}/bind`, { method: 'POST', body: JSON.stringify({ deviceId }) })
@@ -258,7 +267,7 @@ function createStore() {
       return data.run
     },
     runData: (id: string): Promise<RecipeRunData> => api(`/runs/${id}/data`),
-    nodeById: (id: string): DcwNodeView | undefined => nodes.find(n => n.id === id),
+    nodeById: (id: string): DcwNodeView | undefined => nodeIndex.get(id) ?? nodes.find(n => n.id === id),
     // ---------- 产品 ----------
     createProduct: async (input: ProductInput): Promise<ProductView> => {
       const data = await api<{ product: ProductView }>('/products', { method: 'POST', body: JSON.stringify(input) })

package/app/composables/workshop/usePluginPanels.ts

@@ -0,0 +1,72 @@
+/**
+ * 插件 UI 面板注册表(客户端单例)。
+ *
+ * 插件 client 脚本经 ctx.ui.registerPanel({ slot, name, title?, titleKey?, order?, mount })
+ * 向命名插槽注入自渲染面板;宿主页面在对应位置放 <PluginSlot slot-name="..." /> 即接收注入。
+ * 生命周期:注册随插件 ctx.dispose 自动回收(unregisterPlugin);插槽组件卸载时逐面板
+ * 调用 mount 返回的清理函数 —— 全生命周期无残留。
+ */
+import { computed, reactive } from 'vue'
+
+export interface PluginPanelEntry {
+  /** 注入目标插槽名(如 'plugins.page' / 'settings.plugins' / 'dashboard.widgets') */
+  slot: string
+  /** 宿主插件名(自动填充) */
+  plugin: string
+  /** 面板名(同插件内唯一) */
+  name: string
+  /** 静态标题(titleKey 优先) */
+  title?: string
+  /** i18n 键(命名空间 plugin.<plugin> 下) */
+  titleKey?: string
+  /** 排序权重(小者在前;缺省 100) */
+  order?: number
+  /**
+   * 渲染函数:把面板内容挂到给定容器(纯 DOM 或自带框架)。
+   * 可返回清理函数(卸载时调用);抛错由插槽隔离,不影响其他面板。
+   */
+  mount: (el: HTMLElement) => undefined | (() => void) | Promise<void> | Promise<undefined | (() => void)>
+}
+
+const state = reactive({
+  /** slot → entries(按 order 升序) */
+  slots: {} as Record<string, PluginPanelEntry[]>,
+})
+
+function sortedInsert(list: PluginPanelEntry[], entry: PluginPanelEntry): void {
+  const idx = list.findIndex(e => e.plugin === entry.plugin && e.name === entry.name)
+  if (idx >= 0) list.splice(idx, 1)
+  list.push(entry)
+  list.sort((a, b) => (a.order ?? 100) - (b.order ?? 100) || a.plugin.localeCompare(b.plugin) || a.name.localeCompare(b.name))
+}
+
+export function usePluginPanels() {
+  function registerPanel(entry: PluginPanelEntry): () => void {
+    const slot = entry.slot || 'plugins.page'
+    const list = (state.slots[slot] ??= [])
+    sortedInsert(list, { ...entry, slot })
+    return () => unregisterPanel(slot, entry.plugin, entry.name)
+  }
+
+  function unregisterPanel(slot: string, plugin: string, name: string): void {
+    const list = state.slots[slot]
+    if (!list) return
+    const idx = list.findIndex(e => e.plugin === plugin && e.name === name)
+    if (idx >= 0) list.splice(idx, 1)
+  }
+
+  /** 插件卸载:回收其注册的全部面板(热重载/停用路径) */
+  function unregisterPlugin(plugin: string): void {
+    for (const list of Object.values(state.slots)) {
+      for (let i = list.length - 1; i >= 0; i--) {
+        if (list[i]!.plugin === plugin) list.splice(i, 1)
+      }
+    }
+  }
+
+  function panelsOf(slot: string) {
+    return computed(() => state.slots[slot] ?? [])
+  }
+
+  return { registerPanel, unregisterPanel, unregisterPlugin, panelsOf }
+}