agentworkshop 0.7.44 → 0.7.46

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

@@ -0,0 +1,248 @@
+<script setup lang="ts">
+/**
+ * 小镇视图 · 右轨检查器 · 变换模式(Blender G/R/S + 缩放 + 删除)
+ *
+ * 自 TownView.vue 抽出(纯结构搬移,模板与样式逐字保持):
+ * 数据经 props 传入、动作回调亦经 props 传入(父组件仍是共享状态的唯一持有者,
+ * 子组件不新建任何响应式副本);样式为本组件模板专属规则,随模板一并搬移。
+ */
+defineProps<{
+  mode: 'browse' | 'edit'
+  selected: { kind: 'agent' | 'device', id: string, scale: number, rotation: number }
+  tMode: 'translate' | 'rotate' | 'scale'
+  deviceDeleteArmed: string
+  setTMode: (m: 'translate' | 'rotate' | 'scale') => void
+  onScaleInput: (v: number) => void
+  onScaleCommit: (v: number) => void
+  removeSelectedDevice: () => void
+}>()
+</script>
+
+<template>
+  <!-- 变换模式(Blender G/R/S;仅编辑模式) -->
+  <template v-if="mode === 'edit'">
+    <div class="sect-hd">
+      {{ $t('townView.transformBlender') }}
+    </div>
+    <div class="xz-seg">
+      <button
+        class="seg-btn"
+        :class="{ on: tMode === 'translate' }"
+        @click="setTMode('translate')"
+      >
+        {{ $t('townView.k1hg3167089') }}
+      </button>
+      <button
+        class="seg-btn"
+        :class="{ on: tMode === 'rotate' }"
+        @click="setTMode('rotate')"
+      >
+        {{ $t('townView.k1enlg7i090') }}
+      </button>
+      <button
+        class="seg-btn"
+        :class="{ on: tMode === 'scale' }"
+        @click="setTMode('scale')"
+      >
+        {{ $t('townView.k1ibjg3j091') }}
+      </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 ? $t('townView.k1w10xa5152') : $t('townView.k121kfef182') }}
+      </button>
+    </div>
+  </template>
+  <div
+    v-else
+    class="ins-empty"
+  >
+    {{ $t('townView.kt0i3y2092') }}
+  </div>
+</template>
+
+<style scoped>
+.ctl-btns { display: flex; gap: 8px; margin-top: auto; }
+.btn {
+  background: transparent;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 32px;
+  padding: 0 10px;
+  border-radius: var(--hud-r-sm);
+  font-size: 12px;
+  font-weight: 600;
+  flex: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: filter 0.15s var(--hud-ease), background 0.15s var(--hud-ease), border-color 0.15s var(--hud-ease);
+}
+.btn-primary { background: var(--hud-accent-dim); color: #04120c; }
+.btn-primary:hover { background: #25b57e; }
+.btn-ghost { border: 1px solid #27395c; color: var(--hud-text); }
+.btn-ghost:hover { background: #14203a; border-color: #33507c; }
+.btn-danger { background: #b3273a; color: #fff; }
+.btn-danger:hover { background: #d1304a; }
+.btn:not(:disabled):active { transform: translateY(1px); }
+/* 只读态:禁用控件降透明度 + 禁止光标(运行模式视觉语言) */
+.btn:disabled, .nav-action:disabled, .obj-input:disabled, .obj-select:disabled,
+.bind-select:disabled, .obj-mini:disabled {
+  opacity: 0.38;
+  cursor: not-allowed;
+  filter: saturate(0.4);
+}
+.btn:disabled:hover, .nav-action:disabled:hover { background: inherit; }
+.sect-hd {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 10px;
+  color: var(--hud-faint);
+  letter-spacing: 0.16em;
+  font-weight: 700;
+  margin: 10px 0 7px;
+}
+/* 分区头刻度线:与面板左缘数据条同 motif,建立分区节奏 */
+.sect-hd::before {
+  content: '';
+  width: 3px;
+  height: 9px;
+  background: var(--hud-accent);
+  border-radius: 1px;
+  opacity: 0.55;
+}
+.obj-mini {
+  flex: none;
+  padding: 4px 10px;
+  font-size: 10.5px;
+  font-weight: 600;
+  color: var(--hud-dim);
+  background: var(--hud-input);
+  border: 1px solid var(--hud-line);
+  border-radius: 7px;
+  cursor: pointer;
+}
+.obj-mini.on { color: #04120c; background: var(--hud-accent); border-color: var(--hud-accent); }
+.obj-mini.danger { color: var(--hud-danger); margin-top: 4px; width: 100%; }
+.obj-range { flex: 1; accent-color: var(--hud-accent); }
+.bp-seg { display: flex; gap: 4px; }
+.seg-btn {
+  padding: 4px 12px;
+  font-size: 10.5px;
+  font-weight: 600;
+  color: var(--hud-dim);
+  background: var(--hud-input);
+  border: 1px solid var(--hud-line);
+  border-radius: 7px;
+  cursor: pointer;
+  transition: border-color 0.14s var(--hud-ease), color 0.14s var(--hud-ease), background 0.14s var(--hud-ease);
+}
+.seg-btn:hover { border-color: var(--hud-line-hi); color: var(--hud-text); }
+.seg-btn.on { color: #04120c; background: var(--hud-accent); border-color: var(--hud-accent); }
+.xz-seg { display: flex; gap: 6px; margin-bottom: 8px; }
+.xz-seg .seg-btn { flex: 1; }
+.scale-row { display: flex; gap: 8px; align-items: center; }
+.scale-min, .scale-max { font-family: var(--font-mono); font-size: 10px; color: var(--hud-faint); }
+.scale-range { flex: 1; accent-color: var(--hud-accent); }
+.scale-val {
+  text-align: center;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--hud-text);
+  font-variant-numeric: tabular-nums;
+  margin-bottom: 4px;
+}
+.ins-foot { display: flex; gap: 8px; margin-top: 12px; }
+.ins-del { border: 0; background: rgba(255, 107, 107, 0.1); color: var(--hud-danger); border: 1px solid rgba(255, 107, 107, 0.4); }
+.ins-del.armed { background: var(--hud-danger); color: #fff; }
+.ins-empty { color: var(--hud-faint); font-size: 11px; text-align: center; padding: 8px 0 6px; }
+/* ===== 滑块全自绘:细轨 + 白芯绿环 thumb(场景控制/变换缩放等) ===== */
+.obj-range, .scale-range {
+  -webkit-appearance: none;
+  appearance: none;
+  height: 4px;
+  background: #1a2740;
+  border-radius: 999px;
+  outline: none;
+  cursor: pointer;
+}
+.obj-range::-webkit-slider-thumb, .scale-range::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 13px;
+  height: 13px;
+  background: #e8f6ef;
+  border: 2px solid var(--hud-accent);
+  border-radius: 50%;
+  box-shadow: 0 0 0 3px rgba(53, 224, 160, 0.15), 0 2px 6px rgba(3, 7, 14, 0.5);
+  transition: transform 0.15s var(--hud-ease), box-shadow 0.15s var(--hud-ease);
+}
+.obj-range::-webkit-slider-thumb:hover, .scale-range::-webkit-slider-thumb:hover {
+  transform: scale(1.18);
+  box-shadow: 0 0 0 5px rgba(53, 224, 160, 0.2), 0 2px 8px rgba(3, 7, 14, 0.55);
+}
+.obj-range::-moz-range-thumb, .scale-range::-moz-range-thumb {
+  width: 13px;
+  height: 13px;
+  background: #e8f6ef;
+  border: 2px solid var(--hud-accent);
+  border-radius: 50%;
+  box-shadow: 0 0 0 3px rgba(53, 224, 160, 0.15);
+}
+.obj-range::-moz-range-track, .scale-range::-moz-range-track {
+  height: 4px;
+  background: #1a2740;
+  border-radius: 999px;
+}
+@keyframes estop-pulse { 50% { filter: brightness(1.35); } }
+.btn-danger.armed { animation: estop-pulse 1s ease-in-out infinite; }
+/* 按压态:轻微下沉,松手回弹(自 TownView.vue 同源规则搬移) */
+.btn:active, .obj-mini:active {
+  transform: scale(0.96);
+}
+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 规则同效) */
+.obj-range:focus-visible,
+.scale-range:focus-visible,
+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;
+}
+/* ── 触摸目标:窄屏所有可点元件 ≥40px 高(与 .town-view button 同效) ── */
+@media (max-width: 1023px) {
+  button { min-height: 40px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .btn-danger.armed { animation: none; }
+}
+</style>

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

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+/**
+ * 小镇视图 · 右轨实时事件列表(时间 / 角色 / 文本 + 空态)
+ *
+ * 自 TownView.vue 抽出(纯结构搬移,模板与样式逐字保持):
+ * 数据经 props 传入、动作回调亦经 props 传入(父组件仍是共享状态的唯一持有者,
+ * 子组件不新建任何响应式副本);样式为本组件模板专属规则,随模板一并搬移。
+ */
+defineProps<{
+  ticker: Array<{ channelId: string, agentName: string, text: string, at?: number }>
+  fmtTime: (at?: number) => string
+}>()
+</script>
+
+<template>
+  <div class="event-list">
+    <div
+      v-for="(ev, i) in [...ticker].reverse()"
+      :key="`${ev.at}-${i}`"
+      class="event-row"
+    >
+      <span class="ev-time">{{ fmtTime(ev.at) }}</span>
+      <span
+        class="ev-name"
+        :title="ev.agentName"
+      >{{ ev.agentName }}</span>
+      <span
+        class="ev-text"
+        :title="ev.text"
+      >{{ ev.text }}</span>
+    </div>
+    <div
+      v-if="!ticker.length"
+      class="rail-empty"
+    >
+      <svg
+        class="re-ico"
+        viewBox="0 0 24 24"
+      ><path d="M3 12h3l2.5-6 4 12L15 12h6" /></svg>
+      <span>{{ $t('townView.k2uk6ua121') }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* 实时事件 */
+.event-list {
+  flex: 1;
+  min-height: 0;
+  max-height: 200px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden auto;
+}
+.event-row {
+  display: flex;
+  gap: 7px;
+  align-items: center;
+  padding: 4px 6px;
+  border-radius: 7px;
+  transition: background 0.13s var(--hud-ease);
+}
+.event-row:hover { background: rgba(53, 224, 160, 0.05); }
+.ev-time { flex: none; font-family: var(--font-mono); font-size: 10px; font-variant-numeric: tabular-nums; color: var(--hud-faint); }
+.ev-name {
+  flex: none;
+  max-width: 70px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--hud-text);
+}
+.ev-text {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 10.5px;
+  color: var(--hud-dim);
+}
+.event-empty { padding: 12px; font-family: var(--font-mono); font-size: 9.5px; color: var(--hud-faint); text-align: center; }
+.rail-empty {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+  align-items: center;
+  padding: 16px 10px 13px;
+  font-family: var(--font-mono);
+  font-size: 9.5px;
+  letter-spacing: 0.06em;
+  color: var(--hud-faint);
+  text-align: center;
+}
+.rail-empty .re-ico {
+  width: 19px;
+  height: 19px;
+  fill: none;
+  stroke: var(--hud-faint);
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  opacity: 0.85;
+}
+/* 键盘可达:焦点环(设计稿 --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;
+}
+/* ── 触摸目标:窄屏所有可点元件 ≥40px 高(与 .town-view button 同效) ── */
+@media (max-width: 1023px) {
+  button { min-height: 40px; }
+}
+</style>

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

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+/**
+ * 小镇视图 · 右轨设备健康环(环图 + 状态图例)
+ *
+ * 自 TownView.vue 抽出(纯结构搬移,模板与样式逐字保持):
+ * 数据经 props 传入、动作回调亦经 props 传入(父组件仍是共享状态的唯一持有者,
+ * 子组件不新建任何响应式副本);样式为本组件模板专属规则,随模板一并搬移。
+ */
+defineProps<{
+  healthPct: number
+  healthTone: string
+  idleCount: number
+  alarmCount: number
+  offlineCount: number
+  runningCount: number
+  setCanvas: (el: Element | ComponentPublicInstance | null) => void
+}>()
+</script>
+
+<template>
+  <div class="health-body">
+    <div class="donut-wrap">
+      <canvas
+        :ref="setCanvas"
+        width="118"
+        height="118"
+      />
+      <div class="donut-center">
+        <b :style="{ color: healthTone }">{{ healthPct }}%</b>
+        <span>{{ $t('townView.k7h1nxo113') }}</span>
+      </div>
+    </div>
+    <div class="health-legend">
+      <div class="hl-row">
+        <span
+          class="hl-dot"
+          :style="{ background: 'var(--hud-accent)' }"
+        />
+        {{ $t('townView.k3vp67i114') }}
+        <span class="n">{{ runningCount }}</span>
+      </div>
+      <div class="hl-row">
+        <span
+          class="hl-dot"
+          :style="{ background: 'var(--hud-amber)' }"
+        />
+        {{ $t('townView.k3zcvb115') }}
+        <span class="n">{{ idleCount }}</span>
+      </div>
+      <div class="hl-row">
+        <span
+          class="hl-dot"
+          :style="{ background: 'var(--hud-danger)' }"
+        />
+        {{ $t('townView.k3xmid116') }}
+        <span class="n">{{ alarmCount }}</span>
+      </div>
+      <div class="hl-row">
+        <span
+          class="hl-dot"
+          :style="{ background: '#3a4a63' }"
+        />
+        {{ $t('townView.statesOffline') }}
+        <span class="n">{{ offlineCount }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* 设备健康环 */
+.health-body { display: flex; align-items: center; gap: 14px; }
+.donut-wrap { position: relative; width: 118px; height: 118px; flex: none; }
+.donut-wrap canvas { width: 118px; height: 118px; }
+.donut-center {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-content: center;
+  text-align: center;
+}
+.donut-center b { font-family: var(--font-mono); font-size: 21px; font-weight: 700; color: var(--hud-accent); }
+.donut-center span { font-size: 9.5px; color: var(--hud-faint); }
+.health-legend { flex: 1; display: flex; flex-direction: column; gap: 8px; }
+.hl-row { display: flex; align-items: center; gap: 7px; font-size: 11.5px; }
+.hl-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
+.hl-row .n { margin-left: auto; font-family: var(--font-mono); font-weight: 700; font-size: 13px; color: var(--hud-text); }
+/* 键盘可达:焦点环(设计稿 --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;
+}
+/* ── 触摸目标:窄屏所有可点元件 ≥40px 高(与 .town-view button 同效) ── */
+@media (max-width: 1023px) {
+  button { min-height: 40px; }
+}
+</style>

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

@@ -0,0 +1,207 @@
+<script setup lang="ts">
+/**
+ * 小镇视图 · 舞台 KPI 条(设备 / 运行 / 告警 / 数采通道 / 健康度)
+ *
+ * 自 TownView.vue 抽出(纯结构搬移,模板与样式逐字保持):
+ * 数据经 props 传入、动作回调亦经 props 传入(父组件仍是共享状态的唯一持有者,
+ * 子组件不新建任何响应式副本);样式为本组件模板专属规则,随模板一并搬移。
+ */
+defineProps<{
+  deviceCount: number
+  runningCount: number
+  activeAlarmCount: number
+  channelCount: number
+  healthPct: number
+}>()
+</script>
+
+<template>
+  <!-- KPI 条(设计稿五项:设备/运行/告警/数采通道/健康度) -->
+  <div class="kpi-strip">
+    <div class="kpi">
+      <span class="kpi-ico c1">
+        <svg
+          class="kpi-svg"
+          viewBox="0 0 24 24"
+        ><path d="M4 8.5 12 4l8 4.5v7L12 20l-8-4.5v-7Z" /><path d="M4 8.5l8 4.5 8-4.5M12 13v7" /></svg>
+      </span>
+      <div class="kpi-meta">
+        <div class="kpi-label">
+          {{ $t('townView.k1k6xemt037') }}
+        </div>
+        <div class="kpi-val">
+          {{ deviceCount }}<small>{{ $t('townView.k49lh038') }}</small>
+        </div>
+      </div>
+    </div>
+    <div class="kpi">
+      <span class="kpi-ico c2">
+        <svg
+          class="kpi-svg"
+          viewBox="0 0 24 24"
+        ><path d="m5 12.5 4.5 4.5L19 7.5" /></svg>
+      </span>
+      <div class="kpi-meta">
+        <div class="kpi-label">
+          {{ $t('townView.k1l1a9t2039') }}
+        </div>
+        <div class="kpi-val">
+          {{ runningCount }}<small>{{ $t('townView.k49lh038') }}</small>
+        </div>
+      </div>
+    </div>
+    <div class="kpi">
+      <span class="kpi-ico c3">
+        <svg
+          class="kpi-svg"
+          viewBox="0 0 24 24"
+        ><path d="M12 3 22 20H2L12 3Z" /><path d="M12 10v4M12 17v.2" /></svg>
+      </span>
+      <div class="kpi-meta">
+        <div class="kpi-label">
+          {{ $t('townView.k1fsi3ir002') }}
+        </div>
+        <div class="kpi-val">
+          {{ activeAlarmCount }}<small>{{ $t('townView.k4dfq040') }}</small>
+        </div>
+      </div>
+    </div>
+    <div class="kpi">
+      <span class="kpi-ico c4">
+        <svg
+          class="kpi-svg"
+          viewBox="0 0 24 24"
+        ><path d="M9.5 14.5 14.5 9.5" /><path d="M11 6.5 12.8 4.7a4 4 0 0 1 5.6 5.6L16.5 12" /><path d="m13 17.5-1.8 1.8a4 4 0 0 1-5.6-5.6L7.5 12" /></svg>
+      </span>
+      <div class="kpi-meta">
+        <div class="kpi-label">
+          {{ $t('townView.k1emsai1041') }}
+        </div>
+        <div class="kpi-val">
+          {{ channelCount }}<small>{{ $t('townView.k4l1w042') }}</small>
+        </div>
+      </div>
+    </div>
+    <div class="kpi">
+      <span class="kpi-ico c5">
+        <svg
+          class="kpi-svg"
+          viewBox="0 0 24 24"
+        ><path d="M5 19a9 9 0 1 1 14 0" /><path d="M12 13l3.5-3.5" /><circle
+          cx="12"
+          cy="13"
+          r="1.4"
+        /></svg>
+      </span>
+      <div class="kpi-meta">
+        <div class="kpi-label">
+          {{ $t('townView.kbrxdq1043') }}
+        </div>
+        <div class="kpi-val">
+          {{ healthPct }}<small>%</small>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* KPI 条 */
+.kpi-strip {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 12px;
+  z-index: 6;
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+  padding: 0 16px;
+  pointer-events: none;
+  flex-wrap: wrap;
+}
+.kpi {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 14px;
+  pointer-events: auto;
+  background: linear-gradient(180deg, rgba(20, 30, 48, 0.92) 0%, rgba(12, 19, 32, 0.9) 100%);
+  border: 1px solid #1e2c46;
+  border-radius: var(--hud-r-md);
+  backdrop-filter: blur(8px);
+  /* 玻璃光泽:上缘内高光 + 悬浮投影,与 .panel 同族 */
+  box-shadow:
+    inset 0 1px 0 rgba(143, 176, 220, 0.08),
+    0 8px 20px rgba(3, 7, 14, 0.4);
+  transition: border-color 0.2s var(--hud-ease), transform 0.2s var(--hud-ease), box-shadow 0.2s var(--hud-ease);
+}
+.kpi:hover {
+  border-color: #2c4568;
+  transform: translateY(-1px);
+  box-shadow:
+    inset 0 1px 0 rgba(143, 176, 220, 0.1),
+    0 12px 26px rgba(3, 7, 14, 0.5);
+}
+.kpi-ico {
+  width: 30px;
+  height: 30px;
+  border-radius: 8px;
+  display: grid;
+  place-items: center;
+  flex: none;
+  font-size: 12px;
+  font-weight: 700;
+}
+.kpi-ico.c1 { background: rgba(65, 200, 244, 0.12); color: var(--hud-cyan); }
+.kpi-ico.c2 { background: rgba(53, 224, 160, 0.12); color: var(--hud-accent); }
+.kpi-ico.c3 { background: rgba(246, 196, 83, 0.12); color: var(--hud-amber); }
+.kpi-ico.c4 { background: rgba(167, 139, 250, 0.14); color: #a78bfa; }
+.kpi-ico.c5 { background: rgba(255, 107, 107, 0.12); color: var(--hud-danger); }
+.kpi-svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
+.kpi-meta { line-height: 1.25; }
+.kpi-label { font-size: 10px; color: var(--hud-dim); letter-spacing: 0.08em; text-transform: uppercase; }
+.kpi-val {
+  font-family: var(--font-mono);
+  font-size: 19px;
+  font-weight: 700;
+  color: var(--hud-text);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.01em;
+}
+.kpi-val small { font-size: 10px; color: var(--hud-faint); font-weight: 500; margin-left: 2px; }
+/* 键盘可达:焦点环(设计稿 --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;
+}
+/* ── 触摸目标:窄屏所有可点元件 ≥40px 高(与 .town-view button 同效) ── */
+@media (max-width: 1023px) {
+  button { min-height: 40px; }
+}
+@media (max-width: 1023px) {
+    /* KPI 条:一行横滑,不再折成多行压住场景 */
+    .kpi-strip {
+      bottom: 10px;
+      gap: 8px;
+      padding: 0 12px;
+      justify-content: flex-start;
+      flex-wrap: nowrap;
+      overflow-x: auto;
+      overscroll-behavior-x: contain;
+      scrollbar-width: none;
+    }
+    .kpi-strip::-webkit-scrollbar { display: none; }
+    .kpi { flex: none; padding: 6px 10px; gap: 8px; }
+    .kpi-ico { width: 28px; height: 28px; }
+    .kpi-label { font-size: 11.5px; }
+    .kpi-val { font-size: 13px; }
+    .kpi-val small { font-size: 11.5px; }
+}
+@media (max-width: 639px) {
+    .kpi-strip { padding: 0 10px; }
+}
+</style>