agentworkshop 0.7.40 → 0.7.44

package/scripts/_townview_template.html

@@ -1,1215 +0,0 @@
-<template>
-  <div class="town-view">
-    <!-- ================= 顶部导航 ================= -->
-    <header class="topnav">
-      <div class="brand">
-        <svg
-          class="brand-glyph"
-          viewBox="0 0 32 32"
-          fill="none"
-          aria-hidden="true"
-        >
-          <path
-            d="M16 2.5 27.5 9v14L16 29.5 4.5 23V9L16 2.5Z"
-            stroke="#35e0a0"
-            stroke-width="1.6"
-          />
-          <path
-            d="M16 8.2 22.5 12v8L16 23.8 9.5 20v-8L16 8.2Z"
-            stroke="#41c8f4"
-            stroke-width="1.3"
-            opacity=".85"
-          />
-          <circle
-            cx="16"
-            cy="16"
-            r="2.4"
-            fill="#35e0a0"
-          />
-          <circle
-            cx="25.5"
-            cy="7.5"
-            r="1.6"
-            fill="#41c8f4"
-          />
-        </svg>
-        <div>
-          <div class="brand-name">
-            DIGITAL <em>TWIN</em>
-          </div>
-          <div class="brand-sub">
-            AGENT 数字孪生空间
-          </div>
-        </div>
-      </div>
-      <nav
-        class="nav-tabs"
-        aria-label="场景模式"
-      >
-        <div class="seg">
-          <button
-            :class="{ on: mode === 'browse' }"
-            @click="mode === 'edit' && toggleMode()"
-          >
-            运行
-          </button>
-          <button
-            :class="{ on: mode === 'edit' }"
-            @click="mode === 'browse' && toggleMode()"
-          >
-            编辑
-          </button>
-        </div>
-        <button
-          class="nav-action"
-          title="把全部设备的位置/朝向/缩放写入数据库"
-          @click="saveLayout"
-        >
-          保存布局
-        </button>
-        <span
-          v-if="saveState && saveState.state !== 'idle'"
-          class="save-chip"
-          :class="`s-${saveState.state}`"
-        >{{ saveStateLabel }}</span>
-      </nav>
-      <div class="nav-right">
-        <span class="nav-chip mono">{{ fps }} FPS</span>
-        <div
-          class="avatar-chip"
-          title="当前用户"
-        >
-          <div class="avatar-fallback">
-            {{ (userStore.name ?? 'OP').slice(0, 2).toUpperCase() }}
-          </div>
-          <span>{{ userStore.name || '产线管理员' }}</span>
-        </div>
-      </div>
-    </header>
-
-    <!-- ================= 三栏应用区 ================= -->
-    <div class="app">
-      <!-- 左轨:设备资源 / 数采节点 / 场景管理 -->
-      <aside class="rail rail-left">
-        <section class="panel">
-          <div class="panel-hd">
-            <h3>设备资源</h3>
-            <span class="panel-tag">{{ deviceModels.length }}</span>
-          </div>
-          <WorkshopAssetLibrary class="lib-embed" />
-        </section>
-
-        <section class="panel">
-          <div class="panel-hd">
-            <h3>数采节点 · DAQ</h3>
-            <span class="panel-tag">{{ daqTwins.length }}</span>
-          </div>
-          <div class="daq-list">
-            <div
-              v-for="tpl in daqTemplates"
-              :key="tpl.id"
-              class="daq-card"
-              draggable="true"
-              :title="`${tpl.name} · 拖到场景实例化,量程 ${tpl.min} ~ ${tpl.max} ${tpl.unit}`"
-              @dragstart="onDaqDragStart($event, tpl)"
-            >
-              <span class="daq-ico" />
-              <div class="daq-meta">
-                <span class="daq-name">{{ tpl.name }}</span>
-                <span class="daq-code">{{ tpl.code }}</span>
-              </div>
-              <span class="daq-count">×{{ daqCount(tpl.id) }}</span>
-            </div>
-          </div>
-        </section>
-
-        <section class="panel">
-          <div class="panel-hd">
-            <h3>场景管理</h3>
-            <span class="panel-tag">{{ dockChannels.length }}</span>
-          </div>
-          <div class="scene-list">
-            <div
-              v-for="ch in dockChannels"
-              :key="ch.channelId"
-              class="scene-row"
-              :class="{ active: ch.placed }"
-              :draggable="!ch.placed"
-              :data-channel-id="ch.channelId"
-              :title="ch.placed ? '已在场景中,点击定位' : '拖拽到场景放置'"
-              @dragstart="ch.placed ? undefined : onChannelDragStart($event, ch.channelId)"
-              @click="onDockCardClick(ch)"
-            >
-              <span
-                class="scene-ico"
-                :style="{ '--ch': ch.color }"
-              />
-              <div class="scene-meta-wrap">
-                <span class="scene-name">{{ ch.name }}</span>
-                <span class="scene-meta">{{ ch.agentCount }} 精魂 · {{ ch.placed ? '已放置' : '未放置' }}</span>
-              </div>
-              <span
-                v-if="ch.placed"
-                class="scene-cur"
-              >✓</span>
-              <span
-                v-else
-                class="scene-add"
-              >＋</span>
-            </div>
-            <div
-              v-if="dockHint"
-              class="scene-hint"
-            >
-              {{ dockHint }}
-            </div>
-          </div>
-        </section>
-      </aside>
-
-      <!-- 中栏:舞台 + 底部坞 -->
-      <main class="stage-col">
-        <div
-          ref="stageRef"
-          class="stage"
-        >
-          <div
-            id="town-host"
-            ref="hostRef"
-            class="town-host"
-          />
-          <div class="stage-vignette" />
-
-          <div class="stage-top">
-            <div class="vp-title">
-              <h2>产线孪生总览</h2>
-              <span class="vp-id">CH · {{ activeChannelName || '加载中' }}</span>
-            </div>
-            <div class="vp-tools">
-              <button
-                class="vp-tool"
-                :class="{ on: showCallouts }"
-                title="数据标注显隐"
-                @click="showCallouts = !showCallouts"
-              >
-                标
-              </button>
-              <button
-                class="vp-tool"
-                title="定位选中实体"
-                @click="locateSelected"
-              >
-                定
-              </button>
-              <button
-                class="vp-tool"
-                title="全屏舞台"
-                @click="fullscreenStage"
-              >
-                全
-              </button>
-            </div>
-          </div>
-
-          <div class="angle-chip">
-            <select
-              :value="viewPreset"
-              aria-label="视角预设"
-              @change="onViewPreset($event)"
-            >
-              <option value="std">
-                3D 视角 · 标准
-              </option>
-              <option value="top">
-                俯视 · TOP
-              </option>
-              <option value="front">
-                前视 · FRONT
-              </option>
-              <option value="side">
-                侧视 · SIDE
-              </option>
-            </select>
-          </div>
-
-          <!-- 数据标注层 -->
-          <div
-            v-if="showCallouts"
-            class="callout-layer"
-          >
-            <div
-              v-for="c in callouts"
-              :key="c.id"
-              class="callout"
-              :class="{ warn: c.warn }"
-              :style="{ left: c.x + 'px', top: c.y + 'px' }"
-            >
-              <div class="co-label">
-                <span class="co-dot" />{{ c.label }}
-              </div>
-              <div class="co-val">
-                {{ c.value }}<small>{{ c.unit }}</small>
-              </div>
-              <div class="co-range">
-                正常范围 {{ c.min }} ~ {{ c.max }}
-              </div>
-            </div>
-          </div>
-
-          <!-- KPI 条 -->
-          <div class="kpi-strip">
-            <div class="kpi">
-              <span class="kpi-ico c1">设</span>
-              <div class="kpi-meta">
-                <div class="kpi-label">
-                  设备总数
-                </div>
-                <div class="kpi-val">
-                  {{ deviceCount }}<small>台</small>
-                </div>
-              </div>
-            </div>
-            <div class="kpi">
-              <span class="kpi-ico c2">运</span>
-              <div class="kpi-meta">
-                <div class="kpi-label">
-                  运行设备
-                </div>
-                <div class="kpi-val">
-                  {{ runningCount }}<small>台</small>
-                </div>
-              </div>
-            </div>
-            <div class="kpi">
-              <span class="kpi-ico c3">领</span>
-              <div class="kpi-meta">
-                <div class="kpi-label">
-                  领地
-                </div>
-                <div class="kpi-val">
-                  {{ blockCount }}
-                </div>
-              </div>
-            </div>
-            <div class="kpi">
-              <span class="kpi-ico c4">魂</span>
-              <div class="kpi-meta">
-                <div class="kpi-label">
-                  精魂
-                </div>
-                <div class="kpi-val">
-                  {{ agentCount }}
-                </div>
-              </div>
-            </div>
-            <div class="kpi">
-              <span class="kpi-ico c5">帧</span>
-              <div class="kpi-meta">
-                <div class="kpi-label">
-                  FPS
-                </div>
-                <div class="kpi-val">
-                  {{ fps }}
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div
-            v-if="blockCount === 0 && ready"
-            class="empty-hint"
-          >
-            <b>空场景</b>
-            <span>从左侧「设备资源 / 数采节点」拖入实体,开始搭建数字孪生空间</span>
-          </div>
-
-          <!-- 精魂会话台(选中角色;浮动) -->
-          <div
-            v-if="selected?.kind === 'agent'"
-            class="agent-chat drag-panel"
-            :data-agent-id="selected.id"
-            :style="panelPos['agent-chat'] ? { left: panelPos['agent-chat'].x + 'px', top: panelPos['agent-chat'].y + 'px', bottom: 'auto', transform: 'none' } : undefined"
-          >
-            <div
-              class="agent-chat-head drag-grip"
-              title="拖动移动面板"
-              @pointerdown="onPanelGripDown($event, 'agent-chat')"
-            >
-              <span
-                class="chat-badge"
-                :style="{ '--p-acc': agentChatColor }"
-              >{{ agentChatTitle.slice(0, 1).toUpperCase() }}</span>
-              <div class="chat-nameplate">
-                <span class="chat-name">{{ agentChatTitle }}</span>
-                <span class="chat-meta">
-                  <span
-                    class="chat-state"
-                    :class="`s-${selectedAgentMeta?.state ?? 'idle'}`"
-                  >{{ agentChatStateLabel }}</span>
-                  <span
-                    v-if="selectedAgentMeta?.harness"
-                    class="chat-harness"
-                  >{{ selectedAgentMeta.harness.toUpperCase() }}</span>
-                  <span class="chat-count">{{ agentHistory.length + agentChatRows.length }} 条</span>
-                </span>
-              </div>
-              <button
-                class="chat-refresh"
-                title="重新拉取该角色的历史对话"
-                @click="onRefreshHistory"
-              >
-                {{ historyLoading ? '…' : '↻' }}
-              </button>
-            </div>
-            <div
-              ref="chatScroll"
-              class="rpg-lines"
-            >
-              <div
-                v-if="historyLoading"
-                class="rpg-note"
-              >
-                正在读取历史对话…
-              </div>
-              <template v-if="agentHistory.length">
-                <div class="rpg-divider">
-                  历史记录 · {{ agentHistory.length }}
-                </div>
-                <div
-                  v-for="r in agentHistory"
-                  :key="r.id"
-                  class="rpg-line hist"
-                >
-                  <span class="rpg-time">{{ fmtTime(r.at) }}</span>
-                  <div class="rpg-bubble">
-                    <span
-                      v-if="chatKindLabel(r.kind)"
-                      class="rpg-kind"
-                      :class="`k-${r.kind}`"
-                    >{{ chatKindLabel(r.kind) }}</span>
-                    <span class="rpg-text">{{ r.text }}</span>
-                  </div>
-                </div>
-              </template>
-              <div
-                v-if="agentChatRows.length"
-                class="rpg-divider live"
-              >
-                实时 · {{ agentChatRows.length }}
-              </div>
-              <div
-                v-for="r in agentChatRows"
-                :key="r.id"
-                class="rpg-line live"
-              >
-                <span class="rpg-time">{{ fmtTime(r.at) }}</span>
-                <div class="rpg-bubble">
-                  <span class="rpg-text">{{ r.text }}</span>
-                </div>
-              </div>
-              <div
-                v-if="selectedAgentMeta?.state === 'busy'"
-                class="rpg-typing"
-              >
-                <span class="ty-dot" /><span class="ty-dot" /><span class="ty-dot" />
-                <span class="ty-label">执行中</span>
-              </div>
-              <div
-                v-if="!historyLoading && !agentHistory.length && !agentChatRows.length"
-                class="rpg-note"
-              >
-                暂无对话 · 该精魂尚未开口
-              </div>
-            </div>
-          </div>
-
-          <!-- 频道边界编辑(浮动) -->
-          <div
-            v-if="selectedChannel && boundaryDraft"
-            class="boundary-panel drag-panel"
-            :style="panelPos.boundary ? { left: panelPos.boundary.x + 'px', top: panelPos.boundary.y + 'px', bottom: 'auto', transform: 'none' } : undefined"
-          >
-            <div
-              class="bp-title drag-grip"
-              title="拖动移动面板"
-              @pointerdown="onPanelGripDown($event, 'boundary')"
-            >
-              <span class="bp-name">{{ entities.channels[selectedChannel]?.name ?? selectedChannel.slice(0, 8) }}</span>
-              <span class="bp-sub">频道管理</span>
-              <div class="bp-tabs">
-                <button
-                  class="bp-tab"
-                  :class="{ on: channelPanelTab === 'boundary' }"
-                  @click="openChannelTab('boundary')"
-                >
-                  边界
-                </button>
-                <button
-                  class="bp-tab"
-                  :class="{ on: channelPanelTab === 'members' }"
-                  @click="openChannelTab('members')"
-                >
-                  成员 {{ channelMembers.length }}
-                </button>
-              </div>
-            </div>
-            <template v-if="channelPanelTab === 'boundary'">
-              <div class="bp-row">
-                <span class="bp-label">形状</span>
-                <div class="bp-seg">
-                  <button
-                    class="seg-btn"
-                    :class="{ on: boundaryDraft.shape === 'ellipse' }"
-                    @click="boundaryDraft.shape = 'ellipse'; applyBoundaryDraft()"
-                  >
-                    椭圆
-                  </button>
-                  <button
-                    class="seg-btn"
-                    :class="{ on: boundaryDraft.shape === 'rect' }"
-                    @click="boundaryDraft.shape = 'rect'; applyBoundaryDraft()"
-                  >
-                    矩形
-                  </button>
-                </div>
-              </div>
-              <div class="bp-row">
-                <span class="bp-label">横轴半径</span>
-                <input
-                  v-model.number="boundaryDraft.radiusX"
-                  class="bp-range"
-                  type="range"
-                  min="80"
-                  max="4000"
-                  step="8"
-                  @change="applyBoundaryDraft"
-                >
-                <span class="bp-val">{{ Math.round(boundaryDraft.radiusX) }}</span>
-              </div>
-              <div class="bp-row">
-                <span class="bp-label">纵轴半径</span>
-                <input
-                  v-model.number="boundaryDraft.radiusZ"
-                  class="bp-range"
-                  type="range"
-                  min="60"
-                  max="4000"
-                  step="8"
-                  @change="applyBoundaryDraft"
-                >
-                <span class="bp-val">{{ Math.round(boundaryDraft.radiusZ) }}</span>
-              </div>
-              <div class="bp-row">
-                <span class="bp-label">朝向</span>
-                <input
-                  v-model.number="boundaryDraft.rotationY"
-                  class="bp-range"
-                  type="range"
-                  min="0"
-                  max="360"
-                  step="5"
-                  @change="applyBoundaryDraft"
-                >
-                <span class="bp-val">{{ Math.round(boundaryDraft.rotationY ?? 0) }}°</span>
-              </div>
-            </template>
-            <template v-else>
-              <div class="bp-hint">
-                为频道成员选择 3D 角色模型(实时换装并持久化)
-              </div>
-              <div class="member-list">
-                <div
-                  v-for="m in channelMembers"
-                  :key="m.agentId"
-                  class="member-row"
-                >
-                  <span
-                    class="member-ava"
-                    :style="{ color: hashColor(selectedChannel) }"
-                  >{{ m.name.charAt(0).toUpperCase() }}</span>
-                  <div class="member-info">
-                    <span class="member-name">{{ m.name }}</span>
-                    <span class="member-role">{{ m.role === 'lead' ? '领队' : '成员' }}</span>
-                  </div>
-                  <select
-                    class="member-select"
-                    :value="(m.modelRef ?? '') || 'hero-3d'"
-                    @change="bindMemberModel(m.agentId, ($event.target as HTMLSelectElement).value)"
-                  >
-                    <option
-                      v-for="model in agentModels"
-                      :key="model.id"
-                      :value="model.id"
-                    >
-                      {{ model.name }}
-                    </option>
-                  </select>
-                </div>
-                <div
-                  v-if="channelMembers.length === 0"
-                  class="bp-hint"
-                >
-                  该频道暂无成员
-                </div>
-              </div>
-            </template>
-            <div class="bp-actions">
-              <button
-                v-if="channelPanelTab === 'boundary'"
-                class="bp-btn save"
-                @click="saveChannelLayout"
-              >
-                保存边界
-              </button>
-              <button
-                class="bp-btn danger"
-                @click="removeChannelFromScene"
-              >
-                移除频道
-              </button>
-              <button
-                class="bp-btn"
-                @click="onSelectChannel(null)"
-              >
-                关闭
-              </button>
-            </div>
-          </div>
-
-          <!-- 反馈芯片 -->
-          <div
-            v-if="lastDropText"
-            class="drop-chip"
-          >
-            {{ lastDropText }}
-          </div>
-          <div
-            v-if="errorText"
-            class="error-chip"
-          >
-            {{ errorText }}
-          </div>
-
-          <!-- 加载遮罩 -->
-          <div
-            v-if="!ready"
-            data-hud="town-loading"
-            class="loading-mask"
-          >
-            <div class="loading-spinner" />
-            <span class="loading-text">正在铺设数字孪生空间…</span>
-          </div>
-        </div>
-
-        <!-- 底部坞:场景控制 + 趋势分析 -->
-        <div class="dock">
-          <section class="dock-card">
-            <div class="dock-hd">
-              <h3>场景控制</h3>
-              <span class="dock-mode">{{ mode === 'edit' ? '编辑模式' : '运行模式' }}</span>
-            </div>
-            <div class="ctl-row">
-              <span class="ctl-name">环境光照</span>
-              <input
-                class="ctl-range"
-                type="range"
-                min="30"
-                max="220"
-                :value="Math.round(exposure * 100)"
-                @input="onExposureInput($event)"
-              >
-              <span class="ctl-val">{{ Math.round(exposure * 100) }}%</span>
-            </div>
-            <div class="ctl-row">
-              <span class="ctl-name">领地染色</span>
-              <input
-                class="ctl-range"
-                type="range"
-                min="10"
-                max="100"
-                :value="Math.round(tintOpacity * 100)"
-                @input="onTintInput($event)"
-              >
-              <span class="ctl-val">{{ Math.round(tintOpacity * 100) }}%</span>
-            </div>
-            <div class="ctl-row">
-              <span class="ctl-name">网格吸附</span>
-              <button
-                class="snap-toggle"
-                :class="{ on: snap }"
-                @click="toggleSnap"
-              >
-                {{ snap ? '开' : '关' }}
-              </button>
-              <span class="ctl-val" />
-            </div>
-            <div class="ctl-btns">
-              <button
-                class="btn btn-primary"
-                @click="onResetView"
-              >
-                重置视角
-              </button>
-              <button
-                class="btn btn-ghost"
-                @click="saveLayout"
-              >
-                保存布局
-              </button>
-            </div>
-          </section>
-
-          <section class="dock-card">
-            <div class="dock-hd">
-              <h3>趋势分析</h3>
-              <div class="trend-legend">
-                <button
-                  v-for="t in daqTwins"
-                  :key="t.id"
-                  class="lg-chip"
-                  :class="{ off: hiddenTrends[t.id] }"
-                  @click="toggleTrend(t.id)"
-                >
-                  <span
-                    class="lg-dot"
-                    :style="{ background: trendColor(t.id) }"
-                  />{{ t.name }}
-                </button>
-              </div>
-            </div>
-            <div class="trend-wrap">
-              <canvas
-                ref="trendCanvas"
-                class="trend-cv"
-              />
-              <span
-                v-if="!daqTwins.length"
-                class="trend-empty"
-              >从左侧拖入数采节点,实时趋势将在此绘制</span>
-            </div>
-          </section>
-        </div>
-      </main>
-
-      <!-- 右轨:Inspector / 设备运行状态 / 关键设备 / 实时事件 / 导航 -->
-      <aside class="rail rail-right">
-        <section
-          v-if="selected"
-          class="panel inspector"
-        >
-          <div class="panel-hd">
-            <h3>{{ selected.kind === 'device' ? (selectedIsDaq ? '数采节点' : '设备实例') : '精魂' }}</h3>
-            <button
-              class="mini-btn"
-              title="取消选中"
-              @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>
-          </div>
-
-          <template v-if="selected.kind === 'device'">
-            <div
-              v-if="selectedIsDaq"
-              class="daq-info"
-            >
-              <div class="daq-info-row">
-                <span>实时值</span>
-                <b class="cy">{{ selectedDaqSim ? fmtDaq(selectedDaqSim) : '--' }} {{ selectedDaqSim?.tpl.unit }}</b>
-              </div>
-              <div class="daq-info-row">
-                <span>正常范围</span>
-                <b>{{ selectedDaqSim?.tpl.min }} ~ {{ selectedDaqSim?.tpl.max }}</b>
-              </div>
-              <div class="daq-info-row">
-                <span>绑定设备</span>
-                <b>{{ daqBoundDeviceName || '未绑定' }}</b>
-              </div>
-              <div class="bind-add">
-                <select
-                  v-model="bindPick"
-                  class="bind-select"
-                >
-                  <option value="">
-                    选择设备实例…
-                  </option>
-                  <option
-                    v-for="dv in deviceTwins.twins.filter(x => x.kind !== 'daq' && x.id !== selected.id)"
-                    :key="dv.id"
-                    :value="dv.id"
-                  >
-                    {{ dv.name }}
-                  </option>
-                </select>
-                <button
-                  class="bind-add-btn"
-                  :disabled="!bindPick"
-                  @click="daqBoundDeviceName ? unbindDaq(selected.id) : bindDaq(selected.id, bindPick); bindPick = ''"
-                >
-                  {{ daqBoundDeviceName ? '解绑' : '绑定' }}
-                </button>
-              </div>
-            </div>
-            <template v-else>
-              <div class="obj-row">
-                <span class="obj-label">名称</span>
-                <input
-                  v-model="objNameDraft"
-                  class="obj-input"
-                  placeholder="设备名称"
-                  @change="onObjNameCommit"
-                  @keydown.enter="onObjNameCommit"
-                >
-              </div>
-              <div class="obj-row">
-                <span class="obj-label">模型</span>
-                <select
-                  class="obj-select"
-                  :value="scene3dRef?.getDeviceModelRef?.(selected.id) ?? ''"
-                  @change="bindDeviceModel(($event.target as HTMLSelectElement).value)"
-                >
-                  <option
-                    v-for="m in deviceModels"
-                    :key="m.id"
-                    :value="m.id"
-                  >
-                    {{ m.name }}
-                  </option>
-                </select>
-              </div>
-
-              <!-- 数采绑定 -->
-              <div class="sect-hd">
-                数采绑定
-              </div>
-              <div
-                v-for="r in boundDaqRows"
-                :key="r.daqId"
-                class="bind-row-item"
-              >
-                <span
-                  class="bind-dot"
-                  :style="{ background: r.color }"
-                />
-                <span class="bind-name">{{ r.name }}</span>
-                <span class="bind-val">{{ r.value }} {{ r.unit }}</span>
-                <button
-                  class="bind-x"
-                  title="解除绑定"
-                  @click="unbindDaq(r.daqId)"
-                >
-                  ✕
-                </button>
-              </div>
-              <div
-                v-if="!boundDaqRows.length"
-                class="ins-empty"
-              >
-                暂无绑定 · 可拖入数采节点后绑定
-              </div>
-              <div class="bind-add">
-                <select
-                  v-model="bindPick"
-                  class="bind-select"
-                >
-                  <option value="">
-                    选择数采节点…
-                  </option>
-                  <option
-                    v-for="dq in daqTwins"
-                    :key="dq.id"
-                    :value="dq.id"
-                  >
-                    {{ dq.name }}
-                  </option>
-                </select>
-                <button
-                  class="bind-add-btn"
-                  :disabled="!bindPick"
-                  @click="bindDaq(bindPick, selected.id); bindPick = ''"
-                >
-                  绑定
-                </button>
-              </div>
-
-              <!-- 变换模式(Blender G/R/S) -->
-              <div class="sect-hd">
-                变换 · BLENDER
-              </div>
-              <div class="xz-seg">
-                <button
-                  class="seg-btn"
-                  :class="{ on: tMode === 'translate' }"
-                  @click="setTMode('translate')"
-                >
-                  移动 G
-                </button>
-                <button
-                  class="seg-btn"
-                  :class="{ on: tMode === 'rotate' }"
-                  @click="setTMode('rotate')"
-                >
-                  旋转 R
-                </button>
-                <button
-                  class="seg-btn"
-                  :class="{ on: tMode === 'scale' }"
-                  @click="setTMode('scale')"
-                >
-                  缩放 S
-                </button>
-              </div>
-              <div class="scale-row">
-                <span class="scale-min">0.2×</span>
-                <input
-                  class="scale-range"
-                  type="range"
-                  min="0.2"
-                  max="5"
-                  step="0.05"
-                  :value="selected.scale"
-                  @input="onScaleInput(Number(($event.target as HTMLInputElement).value))"
-                  @change="onScaleCommit(Number(($event.target as HTMLInputElement).value))"
-                >
-                <span class="scale-max">5×</span>
-              </div>
-              <div class="scale-val">
-                {{ Math.round(selected.scale * 100) }}%
-              </div>
-
-              <div class="ins-foot">
-                <button
-                  class="btn btn-danger ins-del"
-                  :class="{ armed: deviceDeleteArmed === selected.id }"
-                  @click="removeSelectedDevice"
-                >
-                  {{ deviceDeleteArmed === selected.id ? '再次点击确认删除' : '删除设备实例' }}
-                </button>
-              </div>
-            </template>
-          </template>
-
-          <template v-else-if="selected.kind === 'agent'">
-            <div class="obj-row">
-              <span class="obj-label">模型</span>
-              <select
-                class="obj-select"
-                :value="(scene3dRef?.getAgentModel?.(selected.id) ?? '') || 'hero-3d'"
-                @change="bindAgentModel(($event.target as HTMLSelectElement).value)"
-              >
-                <option
-                  v-for="m in agentModels"
-                  :key="m.id"
-                  :value="m.id"
-                >
-                  {{ m.name }}
-                </option>
-              </select>
-            </div>
-            <div class="obj-sep" />
-            <div class="obj-row">
-              <span class="obj-label">活动范围</span>
-              <span class="range-status">{{ agentRangeStatusText }}</span>
-              <button
-                class="obj-mini"
-                :class="{ on: agentDrawingRange }"
-                title="在场景中拖动框选,确定该角色的移动范围"
-                @click="onToggleRangeDraw"
-              >
-                {{ agentDrawingRange ? '绘制中' : '框选绘制' }}
-              </button>
-            </div>
-            <template v-if="agentRangeDraft">
-              <div class="obj-row">
-                <span class="obj-label">形状</span>
-                <div class="bp-seg">
-                  <button
-                    class="seg-btn"
-                    :class="{ on: agentRangeDraft.shape === 'ellipse' }"
-                    @click="agentRangeDraft.shape = 'ellipse'; applyAgentRangeDraft()"
-                  >
-                    椭圆
-                  </button>
-                  <button
-                    class="seg-btn"
-                    :class="{ on: agentRangeDraft.shape === 'rect' }"
-                    @click="agentRangeDraft.shape = 'rect'; applyAgentRangeDraft()"
-                  >
-                    矩形
-                  </button>
-                </div>
-              </div>
-              <div class="obj-row">
-                <span class="obj-label">横轴</span>
-                <input
-                  v-model.number="agentRangeDraft.radiusX"
-                  class="obj-range"
-                  type="range"
-                  min="40"
-                  max="4000"
-                  step="8"
-                  @input="applyAgentRangeDraft"
-                  @change="onAgentRangeCommit"
-                >
-                <span class="bp-val">{{ Math.round(agentRangeDraft.radiusX) }}</span>
-              </div>
-              <div class="obj-row">
-                <span class="obj-label">纵轴</span>
-                <input
-                  v-model.number="agentRangeDraft.radiusZ"
-                  class="obj-range"
-                  type="range"
-                  min="40"
-                  max="4000"
-                  step="8"
-                  @input="applyAgentRangeDraft"
-                  @change="onAgentRangeCommit"
-                >
-                <span class="bp-val">{{ Math.round(agentRangeDraft.radiusZ) }}</span>
-              </div>
-              <button
-                class="obj-mini danger"
-                @click="onClearAgentRange"
-              >
-                清除范围(回退频道)
-              </button>
-            </template>
-            <div
-              v-else
-              class="ins-empty"
-            >
-              未设置:沿用频道领地活动;点「框选绘制」定制
-            </div>
-          </template>
-        </section>
-
-        <section class="panel">
-          <div class="panel-hd">
-            <h3>设备运行状态</h3>
-          </div>
-          <div class="health-body">
-            <div class="donut-wrap">
-              <canvas
-                ref="donutCanvas"
-                width="118"
-                height="118"
-              />
-              <div class="donut-center">
-                <b>{{ healthPct }}%</b>
-                <span>设备健康度</span>
-              </div>
-            </div>
-            <div class="health-legend">
-              <div class="hl-row">
-                <span
-                  class="hl-dot"
-                  :style="{ background: 'var(--hud-accent)' }"
-                />
-                运行中
-                <span class="n">{{ runningCount }}</span>
-              </div>
-              <div class="hl-row">
-                <span
-                  class="hl-dot"
-                  :style="{ background: 'var(--hud-amber)' }"
-                />
-                待命
-                <span class="n">{{ idleCount }}</span>
-              </div>
-              <div class="hl-row">
-                <span
-                  class="hl-dot"
-                  :style="{ background: 'var(--hud-danger)' }"
-                />
-                告警
-                <span class="n">{{ alarmCount }}</span>
-              </div>
-            </div>
-          </div>
-        </section>
-
-        <section class="panel">
-          <div class="panel-hd">
-            <h3>关键设备监控</h3>
-            <span class="panel-tag">{{ deviceTwins.twins.length }}</span>
-          </div>
-          <WorkshopDeviceTwinPanel
-            class="kd-embed"
-            @focus-device="onFocusDevice"
-          />
-        </section>
-
-        <section class="panel">
-          <div class="panel-hd">
-            <h3>实时事件</h3>
-            <span class="panel-tag">{{ ticker.length }}</span>
-          </div>
-          <div class="event-list">
-            <div
-              v-for="(t, i) in [...ticker].reverse()"
-              :key="`${t.at}-${i}`"
-              class="event-row"
-            >
-              <span class="ev-time">{{ fmtTime(t.at) }}</span>
-              <span
-                class="ev-name"
-                :title="t.agentName"
-              >{{ t.agentName }}</span>
-              <span
-                class="ev-text"
-                :title="t.text"
-              >{{ t.text }}</span>
-            </div>
-            <div
-              v-if="!ticker.length"
-              class="event-empty"
-            >
-              事件总线待命
-            </div>
-          </div>
-        </section>
-
-        <section class="panel">
-          <div class="panel-hd">
-            <h3>3D 视图导航</h3>
-          </div>
-          <div
-            v-if="minimap && miniView"
-            class="mm-body"
-          >
-            <div class="mm-wrap">
-              <svg
-                :viewBox="`${miniView.ox} ${miniView.oy} ${miniView.winW} ${miniView.winH}`"
-                class="mini-svg"
-                role="img"
-                aria-label="镜头居中导航图,点击跳转,拖动平移镜头"
-                @click="onMinimapClick"
-                @pointerdown="onMinimapDown"
-                @pointermove="onMinimapMove"
-                @pointerup="onMinimapUp"
-                @pointercancel="onMinimapUp"
-                @pointerleave="onMinimapUp"
-              >
-                <rect
-                  :x="miniView.ox"
-                  :y="miniView.oy"
-                  :width="miniView.winW"
-                  :height="miniView.winH"
-                  fill="#060b13"
-                />
-                <circle
-                  v-for="b in minimap.blocks"
-                  :key="`b-${b.name}`"
-                  :cx="b.x * minimap.world.w"
-                  :cy="b.y * minimap.world.h"
-                  :rx="(b.rx ?? 0.04) * minimap.world.w"
-                  :ry="(b.rz ?? 0.03) * minimap.world.h"
-                  :fill="toHex(b.color)"
-                  fill-opacity="0.12"
-                  :stroke="toHex(b.color)"
-                  stroke-opacity="0.6"
-                  stroke-width="3"
-                />
-                <rect
-                  v-for="d in minimap.devices"
-                  :key="`d-${d.x.toFixed(4)}-${d.y.toFixed(4)}`"
-                  :x="d.x * minimap.world.w - 23"
-                  :y="d.y * minimap.world.h - 23"
-                  width="46"
-                  height="46"
-                  rx="6"
-                  :fill="toHex(d.color)"
-                  opacity="0.95"
-                />
-                <circle
-                  v-for="a in minimap.agents"
-                  :key="`a-${a.x.toFixed(4)}-${a.y.toFixed(4)}`"
-                  :cx="a.x * minimap.world.w"
-                  :cy="a.y * minimap.world.h"
-                  r="27"
-                  :fill="toHex(a.color)"
-                  stroke="rgba(6,10,16,0.7)"
-                  stroke-width="6"
-                />
-                <g class="mini-reticle">
-                  <rect
-                    :x="miniView.ox + miniView.winW / 2 - 8"
-                    :y="miniView.oy + miniView.winH / 2 - 8"
-                    width="16"
-                    height="16"
-                    fill="none"
-                    stroke="#35e0a0"
-                    stroke-width="4"
-                  />
-                </g>
-              </svg>
-            </div>
-            <div class="mm-col">
-              <button
-                class="vp-tool"
-                title="重置视角"
-                @click="onResetView"
-              >
-                重
-              </button>
-              <button
-                class="vp-tool"
-                title="缩小"
-                @click="scene3dRef?.zoomBy(0.25)"
-              >
-                −
-              </button>
-              <button
-                class="vp-tool"
-                title="放大"
-                @click="scene3dRef?.zoomBy(-0.25)"
-              >
-                ＋
-              </button>
-            </div>
-          </div>
-          <div class="mm-meta mono">
-            {{ blockCount }} 领地 · {{ minimap.devices?.length ?? 0 }} 设备
-          </div>
-        </section>
-      </aside>
-    </div>
-
-    <!-- ================= 状态栏 ================= -->
-    <footer class="statusbar">
-      <span>
-        <span
-          class="sb-dot"
-          :class="{ red: conn.state !== 'open' }"
-        />系统状态 <b>{{ conn.state === 'open' ? '正常' : syncing ? '同步中' : '离线' }}</b>
-      </span>
-      <span>
-        领地 {{ blockCount }} · 精魂 {{ agentCount }} · 设备 {{ deviceCount }}
-      </span>
-      <span class="sb-lat mono">
-        {{ fps }} FPS
-      </span>
-      <span class="copy">
-        © 2026 ABO · DIGITAL TWIN · 演示数据为模拟信号
-      </span>
-    </footer>
-
-    <!-- 加载遮罩(全页) -->
-    <div
-      v-if="!ready"
-      data-hud="town-loading"
-      class="loading-mask"
-    >
-      <div class="loading-spinner" />
-      <span class="loading-text">正在铺设数字孪生空间…</span>
-    </div>
-  </div>
-</template>