agentworkshop 0.8.2 → 0.8.4

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

@@ -1,543 +1,543 @@
-<script setup lang="ts">
-/**
- * 小镇视图 · 右轨(检查器 / 设备运行状态 / 关键设备 / 实时事件 / 导航)。
- *
- * 自 TownView.vue 抽出(纯结构搬移,模板与样式逐字保持):
- * 数据经 props 传入、动作回调亦经 props 传入(父组件仍是共享状态的唯一持有者,
- * 子组件不新建任何响应式副本);画布/滚动容器仍由父组件持有并经 setter 回填;
- * 样式为本组件模板专属规则,随模板一并搬移。
- */
-import TownDcwNodeInspector from './TownDcwNodeInspector.vue'
-import TownDaqNodeInspector from './TownDaqNodeInspector.vue'
-import TownDeviceBindings from './TownDeviceBindings.vue'
-import TownDcwBindSection from './TownDcwBindSection.vue'
-import TownDeviceTransform from './TownDeviceTransform.vue'
-import TownAgentInspector from './TownAgentInspector.vue'
-import TownHealthBody from './TownHealthBody.vue'
-import TownAlarmList from './TownAlarmList.vue'
-import TownEventList from './TownEventList.vue'
-import TownNavMap from './TownNavMap.vue'
-import WorkshopDeviceTwinPanel from '@/app/components/workshop/DeviceTwinPanel.vue'
-
-import type { TownRightRailProps } from '@/app/composables/workshop/town/town-relay-props'
-
-const objNameDraft = defineModel<string>('objNameDraft', { required: true })
-const bindPick = defineModel<string>('bindPick', { required: true })
-const daqIntervalDraft = defineModel<number | null>('daqIntervalDraft', { required: true })
-const dcwWriteDrafts = defineModel<Record<string, number | ''>>('dcwWriteDrafts', { required: true })
-const dcwBindPick = defineModel<string>('dcwBindPick', { required: true })
-const agentRangeDraft = defineModel<{ radiusX: number, radiusZ: number, shape: 'ellipse' | 'rect' } | null>('agentRangeDraft', { required: true })
-const agentBindKind = defineModel<'dcw' | 'daq'>('agentBindKind', { required: true })
-const agentBindNodeId = defineModel<string>('agentBindNodeId', { required: true })
-const agentBindMode = defineModel<'auto' | 'manual'>('agentBindMode', { required: true })
-const approvalComments = defineModel<Record<string, string>>('approvalComments', { required: true })
-
-defineProps<TownRightRailProps>()
-</script>
-
-<template>
-  <aside
-    id="town-rail-right"
-    class="rail rail-right"
-    :class="{ 'sheet-open': sheetOpen === 'right' }"
-  >
-    <!-- 窄屏抽屉头(桌面档 CSS 隐藏) -->
-    <div class="sheet-hd">
-      <span
-        class="sheet-grip"
-        aria-hidden="true"
-      />
-      <span class="sheet-hd-t">{{ $t('townView.k17dkhgd112') }}</span>
-      <button
-        type="button"
-        class="sheet-x"
-        :aria-label="$t('common.close')"
-        @click="closeSheet"
-      >
-        ✕
-      </button>
-    </div>
-    <Transition name="ins">
-      <section
-        v-if="selected"
-        class="panel inspector"
-      >
-        <div class="panel-hd">
-          <h3>{{ selected.kind === 'device' ? (selectedIsDcw ? $t('townView.k1ekqxlt146') : selectedIsDaq ? $t('townView.k1empnnb178') : $t('townView.k1k6wg8j185')) : selectedAgentRoleLabel }}</h3>
-          <button
-            class="mini-btn"
-            :title="$t('townView.k1bsckft013')"
-            @click="closeScale"
-          >
-            ✕
-          </button>
-        </div>
-
-        <div class="ins-chip-row">
-          <span class="ins-chip mono">{{ selected.id.slice(0, 8) }}</span>
-          <span
-            v-if="selected.kind === 'device' && selectedIsDaq"
-            class="ins-chip accent"
-          >DAQ</span>
-          <span
-            v-else-if="selected.kind === 'device' && selectedIsDcw"
-            class="ins-chip accent"
-          >DCW</span>
-        </div>
-
-        <template v-if="selected.kind === 'device'">
-          <TownDcwNodeInspector
-            v-if="selectedIsDcw"
-            v-model:dcw-write-drafts="dcwWriteDrafts"
-            v-model:dcw-bind-pick="dcwBindPick"
-            :mode="mode"
-            :selected="selected"
-            :device-twins="deviceTwins"
-            :dcw="dcw"
-            :selected-dcw-node="selectedDcwNode"
-            :selected-dcw-window="selectedDcwWindow"
-            :selected-dcw-device-name="selectedDcwDeviceName"
-            :dcw-write-errs="dcwWriteErrs"
-            :dcw-win-label="dcwWinLabel"
-            :dcw-win-input-ph="dcwWinInputPh"
-            :is-legacy-daq-twin="isLegacyDaqTwin"
-            :do-write-selected-dcw="doWriteSelectedDcw"
-            :bind-selected-dcw="bindSelectedDcw"
-            :unbind-selected-dcw="unbindSelectedDcw"
-          />
-          <TownDaqNodeInspector
-            v-else-if="selectedIsDaq"
-            v-model:bind-pick="bindPick"
-            v-model:daq-interval-draft="daqIntervalDraft"
-            :mode="mode"
-            :selected="selected"
-            :device-twins="deviceTwins"
-            :daq="daq"
-            :daq-bound-device-name="daqBoundDeviceName"
-            :selected-daq-node="selectedDaqNode"
-            :selected-daq-sim="selectedDaqSim"
-            :fmt-daq="fmtDaq"
-            :is-legacy-daq-twin="isLegacyDaqTwin"
-            :on-daq-interval-commit="onDaqIntervalCommit"
-            :on-daq-threshold-commit="onDaqThresholdCommit"
-            :remove-selected-device="removeSelectedDevice"
-            :unbind-daq="unbindDaq"
-            :bind-daq="bindDaq"
-          />
-          <template v-else>
-            <TownDeviceBindings
-              v-model:obj-name-draft="objNameDraft"
-              :mode="mode"
-              :selected="selected"
-              :scene-3d-ref="scene3dRef"
-              :device-models="deviceModels"
-              :bound-daq-rows="boundDaqRows"
-              :daq-templates="daqTemplates"
-              :daq-bind-choices="daqBindChoices"
-              :daq-bind-choice-count="daqBindChoiceCount"
-              :bind-pop-open="bindPopOpen"
-              :bind-pop-max-h="bindPopMaxH"
-              :toggle-bind-pop="toggleBindPop"
-              :bind-daq-choice="bindDaqChoice"
-              :unbind-daq="unbindDaq"
-              :set-spark-ref="setSparkRef"
-              :on-obj-name-commit="onObjNameCommit"
-              :bind-device-model="bindDeviceModel"
-            />
-            <TownDcwBindSection
-              v-model:dcw-write-drafts="dcwWriteDrafts"
-              :mode="mode"
-              :dcw="dcw"
-              :bound-dcw-rows="boundDcwRows"
-              :dcw-templates="dcwTemplates"
-              :dcw-bind-choices="dcwBindChoices"
-              :dcw-bind-choice-count="dcwBindChoiceCount"
-              :dcw-bind-pop-open="dcwBindPopOpen"
-              :bind-pop-max-h="bindPopMaxH"
-              :dcw-write-errs="dcwWriteErrs"
-              :dcw-mark-pct="dcwMarkPct"
-              :do-dcw-write="doDcwWrite"
-              :unbind-dcw="unbindDcw"
-              :toggle-bind-pop="toggleBindPop"
-              :bind-dcw-choice="bindDcwChoice"
-            />
-            <TownDeviceTransform
-              :mode="mode"
-              :selected="selected"
-              :t-mode="tMode"
-              :device-delete-armed="deviceDeleteArmed"
-              :set-t-mode="setTMode"
-              :on-scale-input="onScaleInput"
-              :on-scale-commit="onScaleCommit"
-              :remove-selected-device="removeSelectedDevice"
-            />
-          </template>
-        </template>
-
-        <TownAgentInspector
-          v-else-if="selected.kind === 'agent'"
-          v-model:agent-range-draft="agentRangeDraft"
-          v-model:agent-bind-kind="agentBindKind"
-          v-model:agent-bind-node-id="agentBindNodeId"
-          v-model:agent-bind-mode="agentBindMode"
-          v-model:approval-comments="approvalComments"
-          :mode="mode"
-          :selected="selected"
-          :scene-3d-ref="scene3dRef"
-          :agent-models="agentModels"
-          :agent-role="selectedAgentMeta?.role ?? null"
-          :agent-state="selectedAgentMeta?.state ?? null"
-          :agent-harness="selectedAgentMeta?.harness ?? null"
-          :agent-chat-title="agentChatTitle"
-          :agent-chat-color="agentChatColor"
-          :agent-chat-state-label="agentChatStateLabel"
-          :selected-agent-role-tag="selectedAgentRoleTag"
-          :agent-drawing-range="agentDrawingRange"
-          :agent-range-status-text="agentRangeStatusText"
-          :agent-history="agentHistory"
-          :agent-chat-rows="agentChatRows"
-          :history-loading="historyLoading"
-          :fmt-time="fmtTime"
-          :chat-kind-label="chatKindLabel"
-          :on-refresh-history="onRefreshHistory"
-          :on-toggle-range-draw="onToggleRangeDraw"
-          :apply-agent-range-draft="applyAgentRangeDraft"
-          :on-agent-range-commit="onAgentRangeCommit"
-          :on-clear-agent-range="onClearAgentRange"
-          :bind-agent-model="bindAgentModel"
-          :set-chat-scroll="setChatScroll"
-          :agent-bindings="agentBindings"
-          :pending-approvals="pendingApprovals"
-          :approval-remaining-sec="approvalRemainingSec"
-          :binding-node-name="bindingNodeName"
-          :request-binding-mode="requestBindingMode"
-          :auto-confirm-state="autoConfirmState"
-          :confirm-auto-switch="confirmAutoSwitch"
-          :cancel-auto-switch="cancelAutoSwitch"
-          :unbind-agent-node="unbindAgentNode"
-          :bind-agent-node="bindAgentNode"
-          :decide-approval="decideApproval"
-          :daq="daq"
-          :dcw="dcw"
-        />
-      </section>
-    </Transition>
-
-    <section class="panel">
-      <div class="panel-hd">
-        <h3>{{ $t('townView.k17dkhgd112') }}</h3>
-      </div>
-      <TownHealthBody
-        :health-pct="healthPct"
-        :health-tone="healthTone"
-        :idle-count="idleCount"
-        :alarm-count="alarmCount"
-        :offline-count="offlineCount"
-        :running-count="runningCount"
-        :set-canvas="setDonutCanvas"
-      />
-    </section>
-
-    <section class="panel">
-      <div class="panel-hd">
-        <h3>{{ $t('townView.k1q247fn117') }}</h3>
-        <span class="panel-tag">{{ deviceTwins.twins.length }}</span>
-      </div>
-      <WorkshopDeviceTwinPanel
-        class="kd-embed"
-        :daq-live="daqLive"
-        :dcw-live="dcwLive"
-        @focus-device="onFocusDevice"
-      />
-    </section>
-
-    <section class="panel">
-      <div class="panel-hd">
-        <h3>{{ $t('townView.k1cxf749118') }}</h3>
-        <span class="panel-tag">{{ activeAlarmCount }} {{ $t('townView.k4dfq040') }}</span>
-        <button
-          class="mini-btn"
-          :title="$t('townView.k1bkswpz022')"
-          @click="clearAlarms"
-        >
-          ✓
-        </button>
-      </div>
-      <TownAlarmList
-        :alarms="alarms"
-        :alarm-states="alarmStates"
-        :advance-alarm="advanceAlarm"
-      />
-    </section>
-
-    <section class="panel">
-      <div class="panel-hd">
-        <h3>{{ $t('townView.k1cxdtq2120') }}</h3>
-        <span class="panel-tag">{{ ticker.length }}</span>
-      </div>
-      <TownEventList
-        :ticker="ticker"
-        :fmt-time="fmtTime"
-      />
-    </section>
-
-    <section class="panel">
-      <div class="panel-hd">
-        <h3>{{ $t('townView.kjug2jq122') }}</h3>
-      </div>
-      <TownNavMap
-        :minimap="minimap"
-        :nav-scale="navScale"
-        :scene-3d-ref="scene3dRef"
-        :set-canvas="setNavCanvas"
-        :on-nav-down="onNavDown"
-        :on-nav-move="onNavMove"
-        :on-nav-up="onNavUp"
-        :on-nav-wheel="onNavWheel"
-        :on-reset-view="onResetView"
-      />
-    </section>
-  </aside>
-</template>
-
-<style scoped>
-.rail {
-  min-height: 0;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: 10px;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  /* 轨道微渐变:与场景天穹同族的纵深(左轨亮→右轨暗,视线向舞台聚焦) */
-  background: linear-gradient(180deg, #0a101c 0%, #080d16 100%);
-}
-.rail-right { border-left: 1px solid var(--hud-line-soft); }
-.rail::-webkit-scrollbar { width: 8px; }
-.rail::-webkit-scrollbar-thumb { background: #1c2942; border-radius: 4px; border: 2px solid #080d16; }
-.rail::-webkit-scrollbar-track { background: transparent; }
-/* Inspector 入场(occasional;空间一致性 = 面板属于右轨,自右缘滑入;
- * 退场对称快出;reduced-motion 全局收敛) */
-.ins-enter-active {
-  transition:
-    opacity 200ms var(--hud-ease),
-    transform 200ms var(--hud-ease);
-}
-.ins-leave-active { transition: opacity 120ms ease; }
-.ins-enter-from { opacity: 0; transform: translateX(12px); }
-.ins-leave-to { opacity: 0; }
-.panel {
-  position: relative;
-  background: linear-gradient(180deg, #101827 0%, #0d1420 100%);
-  border: 1px solid var(--hud-line);  border-radius: var(--hud-r-lg);
-  padding: 12px;
-  flex: none;
-  /* 玻璃光泽:顶部内高光(面板上缘受光)+ 深色外投影(悬浮层次) */
-  box-shadow:
-    inset 0 1px 0 rgba(143, 176, 220, 0.07),
-    0 10px 28px rgba(3, 7, 14, 0.45);
-}
-/* 面板顶部光泽扫光:与 topnav 呼吸光同 motif,让面板像仪表台玻璃 */
-.panel::before {
-  content: '';
-  position: absolute;
-  inset: 0 0 auto;
-  height: 44px;
-  border-radius: var(--hud-r-lg) var(--hud-r-lg) 0 0;
-  background: linear-gradient(180deg, rgba(120, 165, 220, 0.055), transparent);
-  pointer-events: none;
-}
-.panel-hd {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 10px;
-}
-.panel-hd h3 {
-  position: relative;
-  margin: 0;
-  padding-left: 11px;
-  font-size: 12.5px;
-  font-weight: 700;
-  letter-spacing: 0.02em;
-  flex: 1;
-}
-/* 左缘数据条:与 3D 场景名牌(makeLabel)同一 motif,双端一致 */
-.panel-hd h3::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 50%;
-  width: 3px;
-  height: 12px;
-  transform: translateY(-50%);
-  background: var(--hud-accent);
-  border-radius: 2px;
-  box-shadow: 0 0 8px color-mix(in srgb, var(--hud-accent) 45%, transparent);
-}
-.panel-tag {
-  font-family: var(--font-mono);
-  font-size: 9.5px;
-  color: var(--hud-cyan);
-  background: rgba(65, 200, 244, 0.1);
-  border: 1px solid rgba(65, 200, 244, 0.25);
-  padding: 0 6px;
-  border-radius: 6px;
-  line-height: 15px;
-}
-
-/* ── HUD 上电进场(夜航仪 Boot 序列):左轨 → 右轨 → 底部坞 依次浮现,
- *    一次编排好的 page load,而非散落微交互;reduced-motion 全收敛。── */
-@media (prefers-reduced-motion: no-preference) {
-  .rail-left,
-  .rail-right,
-  .dock {
-    animation: hud-boot 0.52s cubic-bezier(0.22, 0.68, 0.36, 1) backwards;
-  }
-  .rail-left { animation-delay: 0.04s; }
-  .rail-right { animation-delay: 0.15s; }
-  .dock { animation-delay: 0.26s; }
-}
-
-@keyframes hud-boot {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-/* ===== 右轨 ===== */
-.inspector { animation: rise 0.18s var(--hud-ease); }
-@keyframes rise {
-  from { opacity: 0; transform: translateY(6px); }
-  to { opacity: 1; transform: none; }
-}
-
-/* ============================================================
- * 微交互抛光(丝滑:统一曲线 + 按压反馈 + 键盘焦点环 + 降级动画)
- * ============================================================ */
-/* 按压态:轻微下沉,松手回弹(所有可点元件统一手感) */
-.btn:active, .vp-tool:active, .mini-btn:active, .snap-toggle:active,
-.lg-chip:active, .bind-add:active, .bind-x:active, .al-state:active,
-.bp-btn:active, .obj-mini:active {
-  transform: scale(0.96);
-}
-.btn, .vp-tool, .mini-btn, .snap-toggle, .lg-chip, .bind-add, .al-state, .bp-btn, .obj-mini {
-  transition-property: filter, background, border-color, color, transform, opacity;
-  transition-duration: 0.15s;
-  transition-timing-function: var(--hud-ease);
-}
-
-/* 键盘可达:焦点环(设计稿 --focus-ring;补回 scoped 属性选择器降低的一档特异性,与 .town-view 规则同效) */
-button:focus-visible,
-input:focus-visible,
-select:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 2px var(--hud-bg), 0 0 0 4px rgba(65, 200, 244, 0.45);
-  border-radius: 6px;
-}
-
-/* 视口标题明确亮色(避免继承发灰) */
-/* E-STOP armed 呼吸(设计稿 estop keyframes) */
-/* 减少动态偏好:关停入场/呼吸动画 */
-@media (prefers-reduced-motion: reduce) {
-  .inspector, .callout { animation: none; }
-}
-
-/* ============================================================
- * 窄屏形态零件(≥1024 桌面一律不出现:形态由下面的媒体查询切换)
- * ============================================================ */
-.sheet-btn,
-.dock-toggle,
-.sheet-hd { display: none; }
-
-/* ═══════════════════════════════════════════════════════════════
- * 窄屏(≤1023)= 手持巡检终端,而不是"缩小的控制室":
- *   · 3D 舞台占满视口宽度,纵向吃满顶栏/状态栏之间的全部高度;
- *   · 左右轨从固定侧栏改为底部抽屉页(sheet),顶栏两个按钮开合
- *     (遮罩 / Esc / 点空白关闭,协议与 AppSidebar 抽屉一致);
- *   · 底部坞折成可收起的横条,默认收起,不再压舞台;
- *   · 刻度字号地板:标签 ≥11.5px、正文 ≥13px;可点目标 ≥40px。
- * 断点与 useResponsive(≥1024 桌面)同源;形态全部由 CSS 决定。
- * ═══════════════════════════════════════════════════════════════ */
-@media (max-width: 1023px) {
-  /* ── 左右轨 → 底部抽屉页(sheet) ── */
-  .rail {
-    position: fixed;
-    left: 0;
-    right: 0;
-    top: auto;
-    bottom: 0;
-    z-index: 70;
-    width: auto;
-    max-height: min(76dvh, 640px);
-    padding: 0 10px 12px;
-    gap: 8px;
-    overflow-y: auto;
-    overscroll-behavior: contain;
-    border: 0;
-    border-top: 1px solid var(--hud-line-hi);
-    border-radius: 16px 16px 0 0;
-    background: linear-gradient(180deg, #0c1420 0%, #080d16 46%);
-    box-shadow: 0 -18px 46px rgba(0, 0, 0, 0.6);
-    transform: translateY(103%);
-    visibility: hidden;
-    /* 关门:位移走完再隐藏(离散属性用延时);开门:立即可见 */
-    transition: transform 0.26s var(--hud-ease), visibility 0s linear 0.26s;
-  }
-  .rail.sheet-open {
-    transform: none;
-    visibility: visible;
-    transition: transform 0.26s var(--hud-ease), visibility 0s;
-  }
-  .rail-left,
-  .rail-right { border-right: 0; border-left: 0; }
-  .rail .panel { flex: none; }
-  .sheet-hd {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    position: sticky;
-    top: 0;
-    z-index: 2;
-    margin: 0 -10px 2px;
-    padding: 13px 12px 9px;
-    background: linear-gradient(180deg, #0e1725, #0c1420);
-    border-bottom: 1px solid var(--hud-line-soft);
-  }
-  .sheet-grip {
-    position: absolute;
-    left: 50%;
-    top: 6px;
-    width: 40px;
-    height: 3px;
-    margin-left: -20px;
-    border-radius: 2px;
-    background: #2c4568;
-  }
-  .sheet-hd-t { font-size: 13px; font-weight: 700; color: var(--hud-text); letter-spacing: 0.04em; }
-  .sheet-x {
-    margin-left: auto;
-    width: 40px;
-    height: 40px;
-    flex: none;
-    border-radius: 8px;
-    border: 1px solid var(--hud-line);
-    background: #101a2b;
-    color: var(--hud-dim);
-    font-size: 15px;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .rail { transition: none; }
-}
-
-/* ── 触摸目标:窄屏所有可点元件 ≥40px 高(与 .town-view button 同效) ── */
-@media (max-width: 1023px) {
-  button { min-height: 40px; }
-}
-</style>
+<script setup lang="ts">
+/**
+ * 小镇视图 · 右轨(检查器 / 设备运行状态 / 关键设备 / 实时事件 / 导航)。
+ *
+ * 自 TownView.vue 抽出(纯结构搬移,模板与样式逐字保持):
+ * 数据经 props 传入、动作回调亦经 props 传入(父组件仍是共享状态的唯一持有者,
+ * 子组件不新建任何响应式副本);画布/滚动容器仍由父组件持有并经 setter 回填;
+ * 样式为本组件模板专属规则,随模板一并搬移。
+ */
+import TownDcwNodeInspector from './TownDcwNodeInspector.vue'
+import TownDaqNodeInspector from './TownDaqNodeInspector.vue'
+import TownDeviceBindings from './TownDeviceBindings.vue'
+import TownDcwBindSection from './TownDcwBindSection.vue'
+import TownDeviceTransform from './TownDeviceTransform.vue'
+import TownAgentInspector from './TownAgentInspector.vue'
+import TownHealthBody from './TownHealthBody.vue'
+import TownAlarmList from './TownAlarmList.vue'
+import TownEventList from './TownEventList.vue'
+import TownNavMap from './TownNavMap.vue'
+import WorkshopDeviceTwinPanel from '@/app/components/workshop/DeviceTwinPanel.vue'
+
+import type { TownRightRailProps } from '@/app/composables/workshop/town/town-relay-props'
+
+const objNameDraft = defineModel<string>('objNameDraft', { required: true })
+const bindPick = defineModel<string>('bindPick', { required: true })
+const daqIntervalDraft = defineModel<number | null>('daqIntervalDraft', { required: true })
+const dcwWriteDrafts = defineModel<Record<string, number | ''>>('dcwWriteDrafts', { required: true })
+const dcwBindPick = defineModel<string>('dcwBindPick', { required: true })
+const agentRangeDraft = defineModel<{ radiusX: number, radiusZ: number, shape: 'ellipse' | 'rect' } | null>('agentRangeDraft', { required: true })
+const agentBindKind = defineModel<'dcw' | 'daq'>('agentBindKind', { required: true })
+const agentBindNodeId = defineModel<string>('agentBindNodeId', { required: true })
+const agentBindMode = defineModel<'auto' | 'manual'>('agentBindMode', { required: true })
+const approvalComments = defineModel<Record<string, string>>('approvalComments', { required: true })
+
+defineProps<TownRightRailProps>()
+</script>
+
+<template>
+  <aside
+    id="town-rail-right"
+    class="rail rail-right"
+    :class="{ 'sheet-open': sheetOpen === 'right' }"
+  >
+    <!-- 窄屏抽屉头(桌面档 CSS 隐藏) -->
+    <div class="sheet-hd">
+      <span
+        class="sheet-grip"
+        aria-hidden="true"
+      />
+      <span class="sheet-hd-t">{{ $t('townView.k17dkhgd112') }}</span>
+      <button
+        type="button"
+        class="sheet-x"
+        :aria-label="$t('common.close')"
+        @click="closeSheet"
+      >
+        ✕
+      </button>
+    </div>
+    <Transition name="ins">
+      <section
+        v-if="selected"
+        class="panel inspector"
+      >
+        <div class="panel-hd">
+          <h3>{{ selected.kind === 'device' ? (selectedIsDcw ? $t('townView.k1ekqxlt146') : selectedIsDaq ? $t('townView.k1empnnb178') : $t('townView.k1k6wg8j185')) : selectedAgentRoleLabel }}</h3>
+          <button
+            class="mini-btn"
+            :title="$t('townView.k1bsckft013')"
+            @click="closeScale"
+          >
+            ✕
+          </button>
+        </div>
+
+        <div class="ins-chip-row">
+          <span class="ins-chip mono">{{ selected.id.slice(0, 8) }}</span>
+          <span
+            v-if="selected.kind === 'device' && selectedIsDaq"
+            class="ins-chip accent"
+          >DAQ</span>
+          <span
+            v-else-if="selected.kind === 'device' && selectedIsDcw"
+            class="ins-chip accent"
+          >DCW</span>
+        </div>
+
+        <template v-if="selected.kind === 'device'">
+          <TownDcwNodeInspector
+            v-if="selectedIsDcw"
+            v-model:dcw-write-drafts="dcwWriteDrafts"
+            v-model:dcw-bind-pick="dcwBindPick"
+            :mode="mode"
+            :selected="selected"
+            :device-twins="deviceTwins"
+            :dcw="dcw"
+            :selected-dcw-node="selectedDcwNode"
+            :selected-dcw-window="selectedDcwWindow"
+            :selected-dcw-device-name="selectedDcwDeviceName"
+            :dcw-write-errs="dcwWriteErrs"
+            :dcw-win-label="dcwWinLabel"
+            :dcw-win-input-ph="dcwWinInputPh"
+            :is-legacy-daq-twin="isLegacyDaqTwin"
+            :do-write-selected-dcw="doWriteSelectedDcw"
+            :bind-selected-dcw="bindSelectedDcw"
+            :unbind-selected-dcw="unbindSelectedDcw"
+          />
+          <TownDaqNodeInspector
+            v-else-if="selectedIsDaq"
+            v-model:bind-pick="bindPick"
+            v-model:daq-interval-draft="daqIntervalDraft"
+            :mode="mode"
+            :selected="selected"
+            :device-twins="deviceTwins"
+            :daq="daq"
+            :daq-bound-device-name="daqBoundDeviceName"
+            :selected-daq-node="selectedDaqNode"
+            :selected-daq-sim="selectedDaqSim"
+            :fmt-daq="fmtDaq"
+            :is-legacy-daq-twin="isLegacyDaqTwin"
+            :on-daq-interval-commit="onDaqIntervalCommit"
+            :on-daq-threshold-commit="onDaqThresholdCommit"
+            :remove-selected-device="removeSelectedDevice"
+            :unbind-daq="unbindDaq"
+            :bind-daq="bindDaq"
+          />
+          <template v-else>
+            <TownDeviceBindings
+              v-model:obj-name-draft="objNameDraft"
+              :mode="mode"
+              :selected="selected"
+              :scene-3d-ref="scene3dRef"
+              :device-models="deviceModels"
+              :bound-daq-rows="boundDaqRows"
+              :daq-templates="daqTemplates"
+              :daq-bind-choices="daqBindChoices"
+              :daq-bind-choice-count="daqBindChoiceCount"
+              :bind-pop-open="bindPopOpen"
+              :bind-pop-max-h="bindPopMaxH"
+              :toggle-bind-pop="toggleBindPop"
+              :bind-daq-choice="bindDaqChoice"
+              :unbind-daq="unbindDaq"
+              :set-spark-ref="setSparkRef"
+              :on-obj-name-commit="onObjNameCommit"
+              :bind-device-model="bindDeviceModel"
+            />
+            <TownDcwBindSection
+              v-model:dcw-write-drafts="dcwWriteDrafts"
+              :mode="mode"
+              :dcw="dcw"
+              :bound-dcw-rows="boundDcwRows"
+              :dcw-templates="dcwTemplates"
+              :dcw-bind-choices="dcwBindChoices"
+              :dcw-bind-choice-count="dcwBindChoiceCount"
+              :dcw-bind-pop-open="dcwBindPopOpen"
+              :bind-pop-max-h="bindPopMaxH"
+              :dcw-write-errs="dcwWriteErrs"
+              :dcw-mark-pct="dcwMarkPct"
+              :do-dcw-write="doDcwWrite"
+              :unbind-dcw="unbindDcw"
+              :toggle-bind-pop="toggleBindPop"
+              :bind-dcw-choice="bindDcwChoice"
+            />
+            <TownDeviceTransform
+              :mode="mode"
+              :selected="selected"
+              :t-mode="tMode"
+              :device-delete-armed="deviceDeleteArmed"
+              :set-t-mode="setTMode"
+              :on-scale-input="onScaleInput"
+              :on-scale-commit="onScaleCommit"
+              :remove-selected-device="removeSelectedDevice"
+            />
+          </template>
+        </template>
+
+        <TownAgentInspector
+          v-else-if="selected.kind === 'agent'"
+          v-model:agent-range-draft="agentRangeDraft"
+          v-model:agent-bind-kind="agentBindKind"
+          v-model:agent-bind-node-id="agentBindNodeId"
+          v-model:agent-bind-mode="agentBindMode"
+          v-model:approval-comments="approvalComments"
+          :mode="mode"
+          :selected="selected"
+          :scene-3d-ref="scene3dRef"
+          :agent-models="agentModels"
+          :agent-role="selectedAgentMeta?.role ?? null"
+          :agent-state="selectedAgentMeta?.state ?? null"
+          :agent-harness="selectedAgentMeta?.harness ?? null"
+          :agent-chat-title="agentChatTitle"
+          :agent-chat-color="agentChatColor"
+          :agent-chat-state-label="agentChatStateLabel"
+          :selected-agent-role-tag="selectedAgentRoleTag"
+          :agent-drawing-range="agentDrawingRange"
+          :agent-range-status-text="agentRangeStatusText"
+          :agent-history="agentHistory"
+          :agent-chat-rows="agentChatRows"
+          :history-loading="historyLoading"
+          :fmt-time="fmtTime"
+          :chat-kind-label="chatKindLabel"
+          :on-refresh-history="onRefreshHistory"
+          :on-toggle-range-draw="onToggleRangeDraw"
+          :apply-agent-range-draft="applyAgentRangeDraft"
+          :on-agent-range-commit="onAgentRangeCommit"
+          :on-clear-agent-range="onClearAgentRange"
+          :bind-agent-model="bindAgentModel"
+          :set-chat-scroll="setChatScroll"
+          :agent-bindings="agentBindings"
+          :pending-approvals="pendingApprovals"
+          :approval-remaining-sec="approvalRemainingSec"
+          :binding-node-name="bindingNodeName"
+          :request-binding-mode="requestBindingMode"
+          :auto-confirm-state="autoConfirmState"
+          :confirm-auto-switch="confirmAutoSwitch"
+          :cancel-auto-switch="cancelAutoSwitch"
+          :unbind-agent-node="unbindAgentNode"
+          :bind-agent-node="bindAgentNode"
+          :decide-approval="decideApproval"
+          :daq="daq"
+          :dcw="dcw"
+        />
+      </section>
+    </Transition>
+
+    <section class="panel">
+      <div class="panel-hd">
+        <h3>{{ $t('townView.k17dkhgd112') }}</h3>
+      </div>
+      <TownHealthBody
+        :health-pct="healthPct"
+        :health-tone="healthTone"
+        :idle-count="idleCount"
+        :alarm-count="alarmCount"
+        :offline-count="offlineCount"
+        :running-count="runningCount"
+        :set-canvas="setDonutCanvas"
+      />
+    </section>
+
+    <section class="panel">
+      <div class="panel-hd">
+        <h3>{{ $t('townView.k1q247fn117') }}</h3>
+        <span class="panel-tag">{{ deviceTwins.twins.length }}</span>
+      </div>
+      <WorkshopDeviceTwinPanel
+        class="kd-embed"
+        :daq-live="daqLive"
+        :dcw-live="dcwLive"
+        @focus-device="onFocusDevice"
+      />
+    </section>
+
+    <section class="panel">
+      <div class="panel-hd">
+        <h3>{{ $t('townView.k1cxf749118') }}</h3>
+        <span class="panel-tag">{{ activeAlarmCount }} {{ $t('townView.k4dfq040') }}</span>
+        <button
+          class="mini-btn"
+          :title="$t('townView.k1bkswpz022')"
+          @click="clearAlarms"
+        >
+          ✓
+        </button>
+      </div>
+      <TownAlarmList
+        :alarms="alarms"
+        :alarm-states="alarmStates"
+        :advance-alarm="advanceAlarm"
+      />
+    </section>
+
+    <section class="panel">
+      <div class="panel-hd">
+        <h3>{{ $t('townView.k1cxdtq2120') }}</h3>
+        <span class="panel-tag">{{ ticker.length }}</span>
+      </div>
+      <TownEventList
+        :ticker="ticker"
+        :fmt-time="fmtTime"
+      />
+    </section>
+
+    <section class="panel">
+      <div class="panel-hd">
+        <h3>{{ $t('townView.kjug2jq122') }}</h3>
+      </div>
+      <TownNavMap
+        :minimap="minimap"
+        :nav-scale="navScale"
+        :scene-3d-ref="scene3dRef"
+        :set-canvas="setNavCanvas"
+        :on-nav-down="onNavDown"
+        :on-nav-move="onNavMove"
+        :on-nav-up="onNavUp"
+        :on-nav-wheel="onNavWheel"
+        :on-reset-view="onResetView"
+      />
+    </section>
+  </aside>
+</template>
+
+<style scoped>
+.rail {
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  /* 轨道微渐变:与场景天穹同族的纵深(左轨亮→右轨暗,视线向舞台聚焦) */
+  background: linear-gradient(180deg, #0a101c 0%, #080d16 100%);
+}
+.rail-right { border-left: 1px solid var(--hud-line-soft); }
+.rail::-webkit-scrollbar { width: 8px; }
+.rail::-webkit-scrollbar-thumb { background: #1c2942; border-radius: 4px; border: 2px solid #080d16; }
+.rail::-webkit-scrollbar-track { background: transparent; }
+/* Inspector 入场(occasional;空间一致性 = 面板属于右轨,自右缘滑入;
+ * 退场对称快出;reduced-motion 全局收敛) */
+.ins-enter-active {
+  transition:
+    opacity 200ms var(--hud-ease),
+    transform 200ms var(--hud-ease);
+}
+.ins-leave-active { transition: opacity 120ms ease; }
+.ins-enter-from { opacity: 0; transform: translateX(12px); }
+.ins-leave-to { opacity: 0; }
+.panel {
+  position: relative;
+  background: linear-gradient(180deg, #101827 0%, #0d1420 100%);
+  border: 1px solid var(--hud-line);  border-radius: var(--hud-r-lg);
+  padding: 12px;
+  flex: none;
+  /* 玻璃光泽:顶部内高光(面板上缘受光)+ 深色外投影(悬浮层次) */
+  box-shadow:
+    inset 0 1px 0 rgba(143, 176, 220, 0.07),
+    0 10px 28px rgba(3, 7, 14, 0.45);
+}
+/* 面板顶部光泽扫光:与 topnav 呼吸光同 motif,让面板像仪表台玻璃 */
+.panel::before {
+  content: '';
+  position: absolute;
+  inset: 0 0 auto;
+  height: 44px;
+  border-radius: var(--hud-r-lg) var(--hud-r-lg) 0 0;
+  background: linear-gradient(180deg, rgba(120, 165, 220, 0.055), transparent);
+  pointer-events: none;
+}
+.panel-hd {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+.panel-hd h3 {
+  position: relative;
+  margin: 0;
+  padding-left: 11px;
+  font-size: 12.5px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  flex: 1;
+}
+/* 左缘数据条:与 3D 场景名牌(makeLabel)同一 motif,双端一致 */
+.panel-hd h3::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  width: 3px;
+  height: 12px;
+  transform: translateY(-50%);
+  background: var(--hud-accent);
+  border-radius: 2px;
+  box-shadow: 0 0 8px color-mix(in srgb, var(--hud-accent) 45%, transparent);
+}
+.panel-tag {
+  font-family: var(--font-mono);
+  font-size: 9.5px;
+  color: var(--hud-cyan);
+  background: rgba(65, 200, 244, 0.1);
+  border: 1px solid rgba(65, 200, 244, 0.25);
+  padding: 0 6px;
+  border-radius: 6px;
+  line-height: 15px;
+}
+
+/* ── HUD 上电进场(夜航仪 Boot 序列):左轨 → 右轨 → 底部坞 依次浮现,
+ *    一次编排好的 page load,而非散落微交互;reduced-motion 全收敛。── */
+@media (prefers-reduced-motion: no-preference) {
+  .rail-left,
+  .rail-right,
+  .dock {
+    animation: hud-boot 0.52s cubic-bezier(0.22, 0.68, 0.36, 1) backwards;
+  }
+  .rail-left { animation-delay: 0.04s; }
+  .rail-right { animation-delay: 0.15s; }
+  .dock { animation-delay: 0.26s; }
+}
+
+@keyframes hud-boot {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+/* ===== 右轨 ===== */
+.inspector { animation: rise 0.18s var(--hud-ease); }
+@keyframes rise {
+  from { opacity: 0; transform: translateY(6px); }
+  to { opacity: 1; transform: none; }
+}
+
+/* ============================================================
+ * 微交互抛光(丝滑:统一曲线 + 按压反馈 + 键盘焦点环 + 降级动画)
+ * ============================================================ */
+/* 按压态:轻微下沉,松手回弹(所有可点元件统一手感) */
+.btn:active, .vp-tool:active, .mini-btn:active, .snap-toggle:active,
+.lg-chip:active, .bind-add:active, .bind-x:active, .al-state:active,
+.bp-btn:active, .obj-mini:active {
+  transform: scale(0.96);
+}
+.btn, .vp-tool, .mini-btn, .snap-toggle, .lg-chip, .bind-add, .al-state, .bp-btn, .obj-mini {
+  transition-property: filter, background, border-color, color, transform, opacity;
+  transition-duration: 0.15s;
+  transition-timing-function: var(--hud-ease);
+}
+
+/* 键盘可达:焦点环(设计稿 --focus-ring;补回 scoped 属性选择器降低的一档特异性,与 .town-view 规则同效) */
+button:focus-visible,
+input:focus-visible,
+select:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--hud-bg), 0 0 0 4px rgba(65, 200, 244, 0.45);
+  border-radius: 6px;
+}
+
+/* 视口标题明确亮色(避免继承发灰) */
+/* E-STOP armed 呼吸(设计稿 estop keyframes) */
+/* 减少动态偏好:关停入场/呼吸动画 */
+@media (prefers-reduced-motion: reduce) {
+  .inspector, .callout { animation: none; }
+}
+
+/* ============================================================
+ * 窄屏形态零件(≥1024 桌面一律不出现:形态由下面的媒体查询切换)
+ * ============================================================ */
+.sheet-btn,
+.dock-toggle,
+.sheet-hd { display: none; }
+
+/* ═══════════════════════════════════════════════════════════════
+ * 窄屏(≤1023)= 手持巡检终端,而不是"缩小的控制室":
+ *   · 3D 舞台占满视口宽度,纵向吃满顶栏/状态栏之间的全部高度;
+ *   · 左右轨从固定侧栏改为底部抽屉页(sheet),顶栏两个按钮开合
+ *     (遮罩 / Esc / 点空白关闭,协议与 AppSidebar 抽屉一致);
+ *   · 底部坞折成可收起的横条,默认收起,不再压舞台;
+ *   · 刻度字号地板:标签 ≥11.5px、正文 ≥13px;可点目标 ≥40px。
+ * 断点与 useResponsive(≥1024 桌面)同源;形态全部由 CSS 决定。
+ * ═══════════════════════════════════════════════════════════════ */
+@media (max-width: 1023px) {
+  /* ── 左右轨 → 底部抽屉页(sheet) ── */
+  .rail {
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: auto;
+    bottom: 0;
+    z-index: 70;
+    width: auto;
+    max-height: min(76dvh, 640px);
+    padding: 0 10px 12px;
+    gap: 8px;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    border: 0;
+    border-top: 1px solid var(--hud-line-hi);
+    border-radius: 16px 16px 0 0;
+    background: linear-gradient(180deg, #0c1420 0%, #080d16 46%);
+    box-shadow: 0 -18px 46px rgba(0, 0, 0, 0.6);
+    transform: translateY(103%);
+    visibility: hidden;
+    /* 关门:位移走完再隐藏(离散属性用延时);开门:立即可见 */
+    transition: transform 0.26s var(--hud-ease), visibility 0s linear 0.26s;
+  }
+  .rail.sheet-open {
+    transform: none;
+    visibility: visible;
+    transition: transform 0.26s var(--hud-ease), visibility 0s;
+  }
+  .rail-left,
+  .rail-right { border-right: 0; border-left: 0; }
+  .rail .panel { flex: none; }
+  .sheet-hd {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    margin: 0 -10px 2px;
+    padding: 13px 12px 9px;
+    background: linear-gradient(180deg, #0e1725, #0c1420);
+    border-bottom: 1px solid var(--hud-line-soft);
+  }
+  .sheet-grip {
+    position: absolute;
+    left: 50%;
+    top: 6px;
+    width: 40px;
+    height: 3px;
+    margin-left: -20px;
+    border-radius: 2px;
+    background: #2c4568;
+  }
+  .sheet-hd-t { font-size: 13px; font-weight: 700; color: var(--hud-text); letter-spacing: 0.04em; }
+  .sheet-x {
+    margin-left: auto;
+    width: 40px;
+    height: 40px;
+    flex: none;
+    border-radius: 8px;
+    border: 1px solid var(--hud-line);
+    background: #101a2b;
+    color: var(--hud-dim);
+    font-size: 15px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .rail { transition: none; }
+}
+
+/* ── 触摸目标:窄屏所有可点元件 ≥40px 高(与 .town-view button 同效) ── */
+@media (max-width: 1023px) {
+  button { min-height: 40px; }
+}
+</style>