agentworkshop 0.2.1

package/scripts/_townview_template.html

@@ -0,0 +1,1215 @@
+<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>