diff --git a/src/components/DockEditModal.vue b/src/components/DockEditModal.vue
index f6e420a..c7f8efe 100644
--- a/src/components/DockEditModal.vue
+++ b/src/components/DockEditModal.vue
@@ -1,114 +1,113 @@
-<template>
-  <t-dialog
-    :visible="visible"
-    header="编辑机巢"
-    width="520px"
-    destroy-on-close
-    dialog-class-name="add-dock-dialog"
-    placement="center"
-    :close-on-overlay-click="!saving"
-    :close-on-esc-keydown="!saving"
-    :close-btn="!saving"
-    @update:visible="onVisibleUpdate"
-    @close="close"
-  >
-    <form novalidate @submit.prevent="submit">
-      <label><span>机巢名称<b>*</b></span><t-input v-model="form.name" :maxlength="64" placeholder="例如：青山湖 03 号机巢" /></label>
-      <label><span>机巢 SN</span><t-input :model-value="dock?.sn || ''" readonly /></label>
-      <label><span>通信卡 ICCID</span><t-input :model-value="dock?.iccid || ''" readonly /></label>
-      <div class="form-row">
-        <label><span>经度<b>*</b></span><t-input-number v-model="form.longitude" theme="normal" :min="-180" :max="180" :step="0.000001" placeholder="例如：120.219375" style="width: 100%" /></label>
-        <label><span>纬度<b>*</b></span><t-input-number v-model="form.latitude" theme="normal" :min="-90" :max="90" :step="0.000001" placeholder="例如：30.259244" style="width: 100%" /></label>
-      </div>
-      <label><span>设备位置<em>选填</em></span><t-input v-model="form.location" :maxlength="128" placeholder="例如：青山湖科技城 C 区" /></label>
-      <div class="form-error">{{ error }}</div>
-    </form>
-    <template #footer>
-      <t-button variant="outline" type="button" :disabled="saving" @click="close">取消</t-button>
-      <t-button theme="primary" type="button" :disabled="saving" :loading="saving" @click="submit">{{ saving ? '保存中…' : '保存修改' }}</t-button>
-    </template>
-  </t-dialog>
-</template>
-
-<script setup>
-import { reactive, ref, watch } from 'vue'
-import request from '@/utils/http'
-import * as urls from '@/config/urls'
-
-const props = defineProps({
-  visible: Boolean,
-  dock: { type: Object, default: null }
-})
-const emit = defineEmits(['close', 'saved'])
-
-const form = reactive({ name: '', longitude: undefined, latitude: undefined, location: '' })
-const error = ref('')
-const saving = ref(false)
-
-watch(() => props.visible, (visible) => {
-  if (!visible || !props.dock) return
-  Object.assign(form, {
-    name: props.dock.name || '',
-    longitude: props.dock.longitude == null || props.dock.longitude === '' ? undefined : Number(props.dock.longitude),
-    latitude: props.dock.latitude == null || props.dock.latitude === '' ? undefined : Number(props.dock.latitude),
-    location: props.dock.location === '--' ? '' : props.dock.location || ''
-  })
-  error.value = ''
-})
-
-function close() {
-  if (!saving.value) emit('close')
-}
-
-function onVisibleUpdate(next) {
-  if (!next) close()
-}
-
-async function submit() {
-  const name = form.name.trim()
-  const longitude = Number(form.longitude)
-  const latitude = Number(form.latitude)
-
-  error.value = ''
-  if (!name || form.longitude === '' || form.longitude == null || form.latitude === '' || form.latitude == null) {
-    error.value = '请填写机巢名称、经度和纬度。'
-    return
-  }
-  if (!Number.isFinite(longitude) || longitude < -180 || longitude > 180) {
-    error.value = '经度应在 -180～180 之间。'
-    return
-  }
-  if (!Number.isFinite(latitude) || latitude < -90 || latitude > 90) {
-    error.value = '纬度应在 -90～90 之间。'
-    return
-  }
-  if (!props.dock?.id) return
-
-  saving.value = true
-  try {
-    await request.put(urls.DOCK(props.dock.id), {
-      name,
-      longitude,
-      latitude,
-      location: form.location.trim()
-    })
-    emit('saved')
-  } catch (e) {
-    error.value = e.message || '保存失败'
-  } finally {
-    saving.value = false
-  }
-}
-</script>
-
-<style>
-.add-dock-dialog .t-input,
-.add-dock-dialog .t-input-number {
-  width: 100%;
-}
-.add-dock-dialog .t-dialog__footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-}
-</style>
+<template>
+  <t-dialog
+    :visible="visible"
+    header="编辑机巢"
+    width="520px"
+    destroy-on-close
+    dialog-class-name="add-dock-dialog"
+    placement="center"
+    :close-on-overlay-click="!saving"
+    :close-on-esc-keydown="!saving"
+    :close-btn="!saving"
+    @update:visible="onVisibleUpdate"
+    @close="close"
+  >
+    <form novalidate @submit.prevent="submit">
+      <label><span>机巢名称<b>*</b></span><t-input v-model="form.name" :maxlength="64" placeholder="例如：青山湖 03 号机巢" /></label>
+      <label><span>机巢 SN</span><t-input :model-value="dock?.sn || ''" readonly /></label>
+      <div class="form-row">
+        <label><span>经度<b>*</b></span><t-input-number v-model="form.longitude" theme="normal" :min="-180" :max="180" :step="0.000001" placeholder="例如：120.219375" style="width: 100%" /></label>
+        <label><span>纬度<b>*</b></span><t-input-number v-model="form.latitude" theme="normal" :min="-90" :max="90" :step="0.000001" placeholder="例如：30.259244" style="width: 100%" /></label>
+      </div>
+      <label><span>设备位置<em>选填</em></span><t-input v-model="form.location" :maxlength="128" placeholder="例如：青山湖科技城 C 区" /></label>
+      <div class="form-error">{{ error }}</div>
+    </form>
+    <template #footer>
+      <t-button variant="outline" type="button" :disabled="saving" @click="close">取消</t-button>
+      <t-button theme="primary" type="button" :disabled="saving" :loading="saving" @click="submit">{{ saving ? '保存中…' : '保存修改' }}</t-button>
+    </template>
+  </t-dialog>
+</template>
+
+<script setup>
+import { reactive, ref, watch } from 'vue'
+import request from '@/utils/http'
+import * as urls from '@/config/urls'
+
+const props = defineProps({
+  visible: Boolean,
+  dock: { type: Object, default: null }
+})
+const emit = defineEmits(['close', 'saved'])
+
+const form = reactive({ name: '', longitude: undefined, latitude: undefined, location: '' })
+const error = ref('')
+const saving = ref(false)
+
+watch(() => props.visible, (visible) => {
+  if (!visible || !props.dock) return
+  Object.assign(form, {
+    name: props.dock.name || '',
+    longitude: props.dock.longitude == null || props.dock.longitude === '' ? undefined : Number(props.dock.longitude),
+    latitude: props.dock.latitude == null || props.dock.latitude === '' ? undefined : Number(props.dock.latitude),
+    location: props.dock.location === '--' ? '' : props.dock.location || ''
+  })
+  error.value = ''
+})
+
+function close() {
+  if (!saving.value) emit('close')
+}
+
+function onVisibleUpdate(next) {
+  if (!next) close()
+}
+
+async function submit() {
+  const name = form.name.trim()
+  const longitude = Number(form.longitude)
+  const latitude = Number(form.latitude)
+
+  error.value = ''
+  if (!name || form.longitude === '' || form.longitude == null || form.latitude === '' || form.latitude == null) {
+    error.value = '请填写机巢名称、经度和纬度。'
+    return
+  }
+  if (!Number.isFinite(longitude) || longitude < -180 || longitude > 180) {
+    error.value = '经度应在 -180～180 之间。'
+    return
+  }
+  if (!Number.isFinite(latitude) || latitude < -90 || latitude > 90) {
+    error.value = '纬度应在 -90～90 之间。'
+    return
+  }
+  if (!props.dock?.id) return
+
+  saving.value = true
+  try {
+    await request.put(urls.DOCK(props.dock.id), {
+      name,
+      longitude,
+      latitude,
+      location: form.location.trim()
+    })
+    emit('saved')
+  } catch (e) {
+    error.value = e.message || '保存失败'
+  } finally {
+    saving.value = false
+  }
+}
+</script>
+
+<style>
+.add-dock-dialog .t-input,
+.add-dock-dialog .t-input-number {
+  width: 100%;
+}
+.add-dock-dialog .t-dialog__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+</style>
diff --git a/src/config/urls.js b/src/config/urls.js
index 789ea5c..54999a2 100644
--- a/src/config/urls.js
+++ b/src/config/urls.js
@@ -1,96 +1,101 @@
-/** API 路径集中配置。axios baseURL 已是 /api，此处用相对路径。 */
-export const BASE_URL = '/api'
-
-// Auth
-export const AUTH_CAPTCHA = '/v1/auth/captcha'
-export const AUTH_LOGIN = '/v1/auth/login'
-export const AUTH_REGISTER = '/v1/auth/register'
-export const AUTH_SMS_CODE = '/v1/auth/sms-code'
-export const AUTH_RESET_PASSWORD = '/v1/auth/reset-password'
-export const AUTH_REFRESH = '/v1/auth/refresh'
-export const AUTH_LOGOUT = '/v1/auth/logout'
-
-// Docks
-export const DOCKS = '/v1/docks'
-export const DOCK = (id) => `/v1/docks/${id}`
-export const DOCK_COMMAND = (id) => `/v1/docks/${id}/command`
-export const DOCK_FIRMWARE_UPGRADE = (id) => `/v1/docks/${id}/firmware/upgrade`
-
-// Drones
-export const DRONES = '/v1/drones'
-export const DRONE = (id) => `/v1/drones/${id}`
-
-// Tasks
-export const TASKS = '/v1/tasks'
-export const TASK = (id) => `/v1/tasks/${id}`
-export const TASK_EXECUTE = (id) => `/v1/tasks/${id}/execute`
-// Executions
-export const EXECUTIONS = '/v1/executions'
-export const EXECUTION = (key) => `/v1/executions/${key}`
-export const EXECUTION_TRAJECTORY = (key) => `/v1/executions/${key}/trajectory`
-
-// Routes
-export const ROUTES = '/v1/routes'
-export const ROUTE = (id) => `/v1/routes/${id}`
-
-// Live / Videos
-export const LIVE = '/v1/live'
-export const LIVE_SESSIONS = (dockId) => `/v1/live/${dockId}/sessions`
-export const LIVE_PLAY_URL = (dockId) => `/v1/live/${dockId}/play-url`
-export const LIVE_HEARTBEAT = (dockId, sessionId) => `/v1/live/${dockId}/sessions/${sessionId}/heartbeat`
-export const LIVE_LEAVE = (dockId, sessionId) => `/v1/live/${dockId}/sessions/${sessionId}/viewers/me`
-export const LIVE_SESSION = (dockId, sessionId) => `/v1/live/${dockId}/sessions/${sessionId}`
-export const LIVE_STOP = (dockId) => `/v1/live/${dockId}/stop`
-export const VIDEOS = '/v1/videos'
-export const VIDEO_DOWNLOAD = (id) => `/v1/videos/${id}/download`
-
-// Alarms
-export const ALARMS = '/v1/alarms'
-export const ALARM_RESOLVE = (id) => `/v1/alarms/${id}/resolve`
-
-// Commands
-export const COMMANDS = '/v1/commands'
-export const COMMAND = (id) => `/v1/commands/${id}`
-
-// Account
-export const ACCOUNT_PROFILE = '/v1/account/profile'
-export const TRAFFIC_BALANCE = '/v1/account/traffic/balance'
-export const TRAFFIC_PACKAGES = '/v1/account/traffic-packages'
-export const TRAFFIC_ORDERS = '/v1/account/traffic/orders'
-export const TRAFFIC_ORDER = (id) => `/v1/account/traffic/orders/${id}`
-export const TRAFFIC_USAGE = '/v1/account/traffic/usage'
-export const ACCOUNT_RESOURCE_SUMMARY = '/v1/account/resource-summary'
-export const ACCOUNT_DOWNLOADS = '/v1/account/downloads'
-export const ACCOUNT_CHANGE_PASSWORD = '/v1/account/security/change-password'
-export const ACCOUNT_SESSIONS = '/v1/account/security/sessions'
-export const INVOICE_PROFILES = '/v1/account/invoice-profiles'
-export const INVOICE_PROFILE = (id) => `/v1/account/invoice-profiles/${id}`
-export const INVOICE_ORDERS = '/v1/account/invoice-orders'
-export const INVOICE_REQUESTS = '/v1/account/invoice-requests'
-export const PAYMENTS = '/v1/account/payments'
-export const PAYMENT = (id) => `/v1/account/payments/${id}`
-export const SIM_CARDS = '/v1/account/sim-cards'
-export const SIM_CARD = (id) => `/v1/account/sim-cards/${id}`
-export const SIM_PACKAGES = '/v1/account/sim-packages'
-export const SIM_CARD_RECHARGE_ORDERS = (id) => `/v1/account/sim-cards/${id}/recharge-orders`
-export const SIM_RECHARGE_ORDER = (id) => `/v1/account/sim-recharge-orders/${id}`
-export const SIM_RECHARGE_LOGS = '/v1/account/sim-recharge-logs'
-
-// Admin traffic ops
-export const ADMIN_TRAFFIC_POOL = '/v1/admin/traffic/pool'
-export const ADMIN_TRAFFIC_PURCHASES = '/v1/admin/traffic/purchases'
-export const ADMIN_TRAFFIC_PACKAGES = '/v1/admin/traffic/packages'
-export const ADMIN_TRAFFIC_PACKAGE = (id) => `/v1/admin/traffic/packages/${id}`
-export const ADMIN_TRAFFIC_LEDGER = '/v1/admin/traffic/ledger'
-export const ADMIN_TRAFFIC_TEST_GRANTS = '/v1/admin/traffic/test-grants'
-
-// Users
-export const USERS = '/v1/users'
-
-// Firmwares
-export const FIRMWARES = '/v1/firmwares'
-export const FIRMWARES_RELEASED = '/v1/firmwares/released'
-export const FIRMWARE = (id) => `/v1/firmwares/${id}`
-
-// Health
-export const HEALTH = '/health'
+/** API 路径集中配置。axios baseURL 已是 /api，此处用相对路径。 */
+export const BASE_URL = '/api'
+
+// Auth
+export const AUTH_CAPTCHA = '/v1/auth/captcha'
+export const AUTH_LOGIN = '/v1/auth/login'
+export const AUTH_REGISTER = '/v1/auth/register'
+export const AUTH_SMS_CODE = '/v1/auth/sms-code'
+export const AUTH_RESET_PASSWORD = '/v1/auth/reset-password'
+export const AUTH_REFRESH = '/v1/auth/refresh'
+export const AUTH_LOGOUT = '/v1/auth/logout'
+
+// Docks
+export const DOCKS = '/v1/docks'
+export const DOCK = (id) => `/v1/docks/${id}`
+export const DOCK_COMMAND = (id) => `/v1/docks/${id}/command`
+export const DOCK_FIRMWARE_UPGRADE = (id) => `/v1/docks/${id}/firmware/upgrade`
+
+// Drones
+export const DRONES = '/v1/drones'
+export const DRONE = (id) => `/v1/drones/${id}`
+
+// Tasks
+export const TASKS = '/v1/tasks'
+export const TASK = (id) => `/v1/tasks/${id}`
+export const TASK_EXECUTE = (id) => `/v1/tasks/${id}/execute`
+// Executions
+export const EXECUTIONS = '/v1/executions'
+export const EXECUTION = (key) => `/v1/executions/${key}`
+export const EXECUTION_TRAJECTORY = (key) => `/v1/executions/${key}/trajectory`
+
+// Routes
+export const ROUTES = '/v1/routes'
+export const ROUTE = (id) => `/v1/routes/${id}`
+
+// Live / Videos
+export const LIVE = '/v1/live'
+export const LIVE_SESSIONS = (dockId) => `/v1/live/${dockId}/sessions`
+export const LIVE_PLAY_URL = (dockId) => `/v1/live/${dockId}/play-url`
+export const LIVE_HEARTBEAT = (dockId, sessionId) => `/v1/live/${dockId}/sessions/${sessionId}/heartbeat`
+export const LIVE_LEAVE = (dockId, sessionId) => `/v1/live/${dockId}/sessions/${sessionId}/viewers/me`
+export const LIVE_SESSION = (dockId, sessionId) => `/v1/live/${dockId}/sessions/${sessionId}`
+export const LIVE_STOP = (dockId) => `/v1/live/${dockId}/stop`
+export const VIDEOS = '/v1/videos'
+export const VIDEO_DOWNLOAD = (id) => `/v1/videos/${id}/download`
+
+// Alarms
+export const ALARMS = '/v1/alarms'
+export const ALARM_RESOLVE = (id) => `/v1/alarms/${id}/resolve`
+
+// Commands
+export const COMMANDS = '/v1/commands'
+export const COMMAND = (id) => `/v1/commands/${id}`
+
+// Account
+export const ACCOUNT_PROFILE = '/v1/account/profile'
+export const TRAFFIC_BALANCE = '/v1/account/traffic/balance'
+export const TRAFFIC_PACKAGES = '/v1/account/traffic-packages'
+export const TRAFFIC_ORDERS = '/v1/account/traffic/orders'
+export const TRAFFIC_ORDER = (id) => `/v1/account/traffic/orders/${id}`
+export const TRAFFIC_USAGE = '/v1/account/traffic/usage'
+export const ACCOUNT_RESOURCE_SUMMARY = '/v1/account/resource-summary'
+export const ACCOUNT_DOWNLOADS = '/v1/account/downloads'
+export const ACCOUNT_CHANGE_PASSWORD = '/v1/account/security/change-password'
+export const ACCOUNT_SESSIONS = '/v1/account/security/sessions'
+export const INVOICE_PROFILES = '/v1/account/invoice-profiles'
+export const INVOICE_PROFILE = (id) => `/v1/account/invoice-profiles/${id}`
+export const INVOICE_ORDERS = '/v1/account/invoice-orders'
+export const INVOICE_REQUESTS = '/v1/account/invoice-requests'
+export const PAYMENTS = '/v1/account/payments'
+export const PAYMENT = (id) => `/v1/account/payments/${id}`
+export const SIM_CARDS = '/v1/account/sim-cards'
+export const SIM_CARD_CREATE = '/v1/account/sim-cards'
+export const SIM_CARD = (id) => `/v1/account/sim-cards/${id}`
+export const SIM_PACKAGES = '/v1/account/sim-packages'
+export const SIM_CARD_RECHARGE_ORDERS = (id) => `/v1/account/sim-cards/${id}/recharge-orders`
+export const SIM_RECHARGE_ORDER = (id) => `/v1/account/sim-recharge-orders/${id}`
+export const SIM_RECHARGE_LOGS = '/v1/account/sim-recharge-logs'
+
+// Admin traffic ops
+export const ADMIN_TRAFFIC_POOL = '/v1/admin/traffic/pool'
+export const ADMIN_TRAFFIC_PURCHASES = '/v1/admin/traffic/purchases'
+export const ADMIN_TRAFFIC_PACKAGES = '/v1/admin/traffic/packages'
+export const ADMIN_TRAFFIC_PACKAGE = (id) => `/v1/admin/traffic/packages/${id}`
+export const ADMIN_TRAFFIC_LEDGER = '/v1/admin/traffic/ledger'
+export const ADMIN_TRAFFIC_TEST_GRANTS = '/v1/admin/traffic/test-grants'
+
+// Sim 通信卡套餐管理
+export const ADMIN_SIM_PACKAGES = '/v1/admin/sim-packages'
+export const ADMIN_SIM_PROVIDER_PLANS = '/v1/admin/sim-packages/provider-plans'
+export const ADMIN_SIM_PACKAGE = (id) => `/v1/admin/sim-packages/${id}`
+
+export const USERS = '/v1/users'
+
+// Firmwares
+export const FIRMWARES = '/v1/firmwares'
+export const FIRMWARES_RELEASED = '/v1/firmwares/released'
+export const FIRMWARE = (id) => `/v1/firmwares/${id}`
+
+// Health
+export const HEALTH = '/health'
diff --git a/src/stores/modules/devicesStore.js b/src/stores/modules/devicesStore.js
index 29d4ee4..ac4c210 100644
--- a/src/stores/modules/devicesStore.js
+++ b/src/stores/modules/devicesStore.js
@@ -1,420 +1,420 @@
-import { defineStore } from 'pinia'
-import { reactive, ref } from 'vue'
-import request from '@/utils/http'
-import * as urls from '@/config/urls'
-
-// 后端 status 值 → 展示文案 + 状态样式
-const DOCK_STATUS = {
-  online: { status: '在线', statusClass: 'online' },
-  offline: { status: '离线', statusClass: 'offline' }
-}
-
-function fmtTime(t) {
-  if (!t) return '--'
-  const d = new Date(t)
-  if (Number.isNaN(d.getTime())) return '--'
-  return d.toLocaleString('zh-CN', { hour12: false })
-}
-
-function gpsText(q) {
-  const key = String(q || '').toUpperCase().replace(/-/g, '_')
-  switch (key) {
-    case 'RTK_FIX':
-    case 'RTK_FIXED': return 'RTK 固定解'
-    case 'RTK_FLOAT': return 'RTK 浮点解'
-    case '3D_FIX': return '3D 定位'
-    case '2D_FIX': return '2D 定位'
-    default: return q ? String(q) : '无定位'
-  }
-}
-
-function modeText(m) {
-  const key = String(m || '').toUpperCase()
-  switch (key) {
-    case 'STANDBY': return '待命'
-    case 'AUTO': return 'AUTO'
-    case 'GUIDED': return 'GUIDED'
-    case 'LOITER': return '悬停'
-    case 'RTL': return '返航'
-    default: return m || '--'
-  }
-}
-
-function controlModeText(m) {
-  const key = String(m || '').toLowerCase()
-  if (key === 'auto' || key === 'automatic') return '自动'
-  if (key === 'manual') return '手动'
-  return m || '--'
-}
-
-function parseJson(value, fallback = null) {
-  if (!value) return fallback
-  if (typeof value === 'object') return value
-  try { return JSON.parse(value) } catch { return fallback }
-}
-
-function environmentValues(realtime) {
-  const nested = parseJson(realtime?.environment, {}) || {}
-  const value = (key, ...aliases) => {
-    for (const name of [key, ...aliases]) {
-      if (nested[name] != null && nested[name] !== '') return nested[name]
-      if (realtime?.[name] != null && realtime[name] !== '') return realtime[name]
-    }
-    return null
-  }
-  return {
-    rain: value('rain'),
-    rainfall: value('rainfall', 'rainAmount', 'rainFall', 'precipitation'),
-    windSpeed: value('windSpeed', 'wind_speed'),
-    outsideTemperature: value('outsideTemperature', 'outside_temperature'),
-    outsideHumidity: value('outsideHumidity', 'outside_humidity'),
-    insideTemperature: value('insideTemperature', 'inside_temperature', 'temperature'),
-    insideHumidity: value('insideHumidity', 'inside_humidity', 'humidity')
-  }
-}
-
-function alarmCodes(realtime) {
-  const codes = parseJson(realtime?.alarmCodes, [])
-  return Array.isArray(codes) ? codes : []
-}
-
-function displayValue(value) {
-  return value == null || value === '' ? '--' : String(value)
-}
-
-function coordinate(value, min, max) {
-  const number = Number(value)
-  return Number.isFinite(number) && number >= min && number <= max ? number : null
-}
-
-// 指令标题 → 后端指令 type
-const COMMANDS = {
-  '一键起飞': 'workflow.one_key_takeoff',
-  '一键降落': 'workflow.one_key_land',
-  '起飞准备': 'dock.prepare_takeoff',
-  '起飞准备完成': 'dock.complete_takeoff',
-  '降落准备': 'dock.prepare_landing',
-  '降落准备完成': 'dock.complete_landing',
-  '打开舱门': 'dock.open',
-  '关闭舱门': 'dock.close',
-  '开始充电': 'dock.charge_start',
-  '整机复位': 'dock.reset',
-  '机巢复位': 'dock.reset',
-  '无人机开机': 'dock.drone_power_on',
-  '无人机关机': 'dock.drone_power_off',
-  '远程重启': 'dock.reboot',
-  '清除设备告警': 'dock.clear_alarm',
-  '设备自检': 'dock.self_check',
-  '起飞': 'drone.takeoff',
-  '降落': 'drone.land',
-  '一键返航': 'drone.return',
-  '悬停': 'drone.hover',
-  '紧急停止': 'drone.emergency_stop',
-  '开始任务': 'drone.mission_start',
-  '暂停任务': 'drone.mission_pause',
-  '继续任务': 'drone.mission_resume',
-  '取消任务': 'drone.mission_cancel'
-}
-
-// 经纬度 → 地图百分比坐标（按设备经纬范围动态投影，北向上）
-function project(lon, lat, bounds) {
-  const lonSpan = bounds.maxLon - bounds.minLon || 1
-  const latSpan = bounds.maxLat - bounds.minLat || 1
-  const x = ((lon - bounds.minLon) / lonSpan) * 80 + 10
-  const y = ((bounds.maxLat - lat) / latSpan) * 70 + 15
-  return { x: Math.round(x * 10) / 10, y: Math.round(y * 10) / 10 }
-}
-
-function dockStatusFromDetail(registerStatus, online, rt) {
-  const pending = registerStatus === 'pending' && !online
-  if (pending) return { status: '待连接', statusClass: 'pending' }
-  if (!online) return DOCK_STATUS.offline
-  if (alarmCodes(rt).length) return { status: '告警', statusClass: 'alarm' }
-  return DOCK_STATUS.online
-}
-
-function droneStatusFromDetail(online, rt) {
-  const armed = ['1', 'true', 1, true].includes(rt.armed)
-  const altitude = coordinate(rt.altitude, -1000, 100000)
-  const flying = armed || (altitude != null && altitude > 0)
-  if (!online) return { status: '离线', statusClass: 'offline', altitude, flying }
-  if (flying) return { status: '飞行中', statusClass: 'mission', altitude, flying }
-  return { status: '在巢', statusClass: 'online', altitude, flying }
-}
-
-
-export const useDeviceStore = defineStore('devices', () => {
-  const assets = reactive({})
-  const docks = ref([])
-  const drones = ref([])
-  const loaded = ref(false)
-
-  function asset(id) {
-    return assets[id] || null
-  }
-
-  function record(id) {
-    const key = String(id)
-    return docks.value.find((d) => d.id === key) || drones.value.find((d) => d.id === key) || null
-  }
-
-  function commandType(title) {
-    return COMMANDS[title] || ''
-  }
-
-  async function sendCommand(rec, title, params = {}) {
-    const type = COMMANDS[title]
-    if (!type) throw new Error('未知指令')
-    if (rec.kind === 'dock') {
-      return request.post(urls.DOCK_COMMAND(rec.id), { type, params })
-    }
-    const dock = docks.value.find((d) => d.dockId === rec.dockId)
-    if (!dock) throw new Error('未找到绑定机巢')
-    return request.post(urls.DOCK_COMMAND(dock.id), { type, params, droneSn: rec.droneSn })
-  }
-
-  async function load(options = {}) {
-    const silent = Boolean(options.silent)
-    const reqOpts = silent ? { skipErrorToast: true } : {}
-    const [dockPage, dronePage] = await Promise.all([
-      request.get(urls.DOCKS, { params: { pageNum: 1, pageSize: 100 }, ...reqOpts }),
-      request.get(urls.DRONES, { params: { pageNum: 1, pageSize: 100 }, ...reqOpts })
-    ])
-
-    const dockList = dockPage?.records || []
-    const droneList = dronePage?.records || []
-    const [dockDetails, droneDetails] = await Promise.all([
-      Promise.all(dockList.map((d) => request.get(urls.DOCK(d.id), reqOpts).then((r) => r || {}).catch(() => ({})))),
-      Promise.all(droneList.map((d) => request.get(urls.DRONE(d.id), reqOpts).then((r) => r || {}).catch(() => ({}))))
-    ])
-    const coords = dockList
-      .map((d) => ({ longitude: coordinate(d.longitude, -180, 180), latitude: coordinate(d.latitude, -90, 90) }))
-      .filter((d) => d.longitude != null && d.latitude != null)
-    const defaultLon = coords[0]?.longitude ?? 0
-    const defaultLat = coords[0]?.latitude ?? 0
-    const bounds = {
-      minLon: Math.min(...coords.map((d) => Number(d.longitude)), defaultLon),
-      maxLon: Math.max(...coords.map((d) => Number(d.longitude)), defaultLon),
-      minLat: Math.min(...coords.map((d) => Number(d.latitude)), defaultLat),
-      maxLat: Math.max(...coords.map((d) => Number(d.latitude)), defaultLat)
-    }
-    if (bounds.minLon === bounds.maxLon) { bounds.minLon -= 0.01; bounds.maxLon += 0.01 }
-    if (bounds.minLat === bounds.maxLat) { bounds.minLat -= 0.01; bounds.maxLat += 0.01 }
-
-    const newDocks = dockList.map((d, i) => {
-      const id = String(d.id)
-      const detail = dockDetails[i] || {}
-      const rt = detail.realtime || {}
-      const online = Boolean(detail.online)
-      const registerStatus = d.registerStatus || 'registered'
-      const st = dockStatusFromDetail(registerStatus, online, rt)
-      const name = d.name || d.dockId
-      const environment = environmentValues(rt)
-      return {
-        id,
-        kind: 'dock',
-        dockId: d.dockId,
-        name,
-        code: d.code || d.sn || d.dockId,
-        sn: d.sn || d.dockId || '--',
-        iccid: d.iccid || '--',
-        longitude: coordinate(d.longitude, -180, 180),
-        latitude: coordinate(d.latitude, -90, 90),
-        location: d.location || '--',
-        status: st.status,
-        statusClass: st.statusClass,
-        binding: '--',
-        bindingState: 'unbound',
-        mode: controlModeText(rt.controlMode),
-        version: d.softwareVer ? `v${d.softwareVer}` : '--',
-        updated: fmtTime(d.updatedAt),
-        protocol: d.protocolVer ? `MQTT v${d.protocolVer}` : '--',
-        registerStatus,
-        realtime: rt,
-        environment,
-        alarms: alarmCodes(rt),
-        online
-      }
-    })
-
-    const newDrones = droneList.map((d, i) => {
-      const id = String(d.id)
-      const detail = droneDetails[i] || {}
-      const rt = detail.realtime || {}
-      const online = Boolean(detail.online)
-      const st = droneStatusFromDetail(online, rt)
-      const altitude = st.altitude
-      const dock = newDocks.find((dk) => dk.dockId === d.dockId)
-      const battery = rt.batteryPercent ?? rt.batteryPct ?? d.battery
-      return {
-        id,
-        kind: 'drone',
-        droneSn: d.droneSn,
-        dockId: d.dockId,
-        name: d.name || d.droneSn,
-        code: d.code || d.droneSn,
-        status: st.status,
-        statusClass: st.statusClass,
-        binding: dock?.name || '--',
-        bindingState: dock ? 'bound' : 'unbound',
-        battery: battery != null && battery !== '' ? `${battery}%` : '--',
-        mode: modeText(rt.flightMode),
-        mission: displayValue(rt.missionName || rt.mission),
-        updated: fmtTime(d.updatedAt),
-        sysid: displayValue(rt.currentSysId),
-        gps: gpsText(rt.gpsQuality),
-        sn: d.droneSn || d.code || '--',
-        model: d.model || '--',
-        firmwareVer: d.firmwareVer || '--',
-        localRoutes: [],
-        realtime: rt,
-        alarms: alarmCodes(rt),
-        online,
-        _lat: coordinate(rt.latitude, -90, 90),
-        _lon: coordinate(rt.longitude, -180, 180),
-        _alt: altitude,
-        _speed: coordinate(rt.groundSpeed, 0, 1000),
-        _sats: coordinate(rt.satellites, 0, 1000)
-      }
-    })
-
-    for (const dk of newDocks) {
-      const dr = newDrones.find((d) => d.dockId === dk.dockId)
-      if (dr) {
-        dk.binding = dr.name
-        dk.bindingState = 'bound'
-      }
-    }
-
-    docks.value = newDocks
-    drones.value = newDrones
-
-    // 重建地图资产
-    Object.keys(assets).forEach((k) => delete assets[k])
-    for (const dk of newDocks) {
-      const hasCoordinates = dk.longitude != null && dk.latitude != null
-      const p = hasCoordinates ? project(dk.longitude, dk.latitude, bounds) : { x: null, y: null }
-      assets[dk.id] = {
-        id: dk.id, type: 'dock', name: dk.name, location: dk.location,
-        status: dk.status, statusClass: dk.statusClass, x: p.x, y: p.y, hasCoordinates,
-        longitude: hasCoordinates ? dk.longitude : null,
-        latitude: hasCoordinates ? dk.latitude : null,
-        realtime: dk.realtime, environment: dk.environment, alarms: dk.alarms, online: dk.online
-      }
-    }
-    for (const dr of newDrones) {
-      const dock = newDocks.find((d) => d.dockId === dr.dockId)
-      const lon = dr._lon != null ? dr._lon : dock?.longitude
-      const lat = dr._lat != null ? dr._lat : dock?.latitude
-      const hasCoordinates = lon != null && lat != null
-      const p = hasCoordinates ? project(lon, lat, bounds) : { x: null, y: null }
-      assets[dr.id] = {
-        id: dr.id, type: 'drone', name: dr.name,
-        location: dr.statusClass === 'mission' ? `${dock?.location || '--'} · 飞行中` : `停放于${dock?.name || '--'}`,
-        status: dr.status, statusClass: dr.statusClass, x: p.x, y: p.y, hasCoordinates,
-        longitude: hasCoordinates ? lon : null,
-        latitude: hasCoordinates ? lat : null,
-        parent: dock?.id || '', parentName: dock?.name || '--',
-        inDock: dr.statusClass !== 'mission', altitude: dr._alt, speed: dr._speed, satellites: dr._sats,
-        realtime: dr.realtime, alarms: dr.alarms, online: dr.online
-      }
-    }
-
-    loaded.value = true
-    return { docks: newDocks, drones: newDrones }
-  }
-
-  function applyDockDetail(id, detail) {
-    const key = String(id)
-    const dock = docks.value.find((d) => d.id === key)
-    if (!dock) {
-      console.warn('[devices] applyDockDetail missing dock', key)
-      return false
-    }
-    const rt = detail?.realtime || {}
-    const online = Boolean(detail?.online)
-    const st = dockStatusFromDetail(dock.registerStatus || 'registered', online, rt)
-    const environment = environmentValues(rt)
-    const alarms = alarmCodes(rt)
-    Object.assign(dock, {
-      status: st.status,
-      statusClass: st.statusClass,
-      mode: controlModeText(rt.controlMode),
-      realtime: rt,
-      environment,
-      alarms,
-      online,
-    })
-    const assetRow = assets[key]
-    if (assetRow) {
-      Object.assign(assetRow, {
-        status: dock.status,
-        statusClass: dock.statusClass,
-        realtime: rt,
-        environment,
-        alarms,
-        online,
-      })
-    }
-    return true
-  }
-
-  function applyDroneDetail(id, detail) {
-    const key = String(id)
-    const drone = drones.value.find((d) => d.id === key)
-    if (!drone) {
-      console.warn('[devices] applyDroneDetail missing drone', key)
-      return false
-    }
-    const rt = detail?.realtime || {}
-    const online = Boolean(detail?.online)
-    const st = droneStatusFromDetail(online, rt)
-    const altitude = st.altitude
-    const battery = rt.batteryPercent ?? rt.batteryPct
-    const alarms = alarmCodes(rt)
-    const dock = docks.value.find((d) => d.dockId === drone.dockId)
-    Object.assign(drone, {
-      status: st.status,
-      statusClass: st.statusClass,
-      battery: battery != null && battery !== '' ? `${battery}%` : drone.battery,
-      mode: modeText(rt.flightMode),
-      mission: displayValue(rt.missionName || rt.mission),
-      sysid: displayValue(rt.currentSysId),
-      gps: gpsText(rt.gpsQuality),
-      realtime: rt,
-      alarms,
-      online,
-      _lat: coordinate(rt.latitude, -90, 90),
-      _lon: coordinate(rt.longitude, -180, 180),
-      _alt: altitude,
-      _speed: coordinate(rt.groundSpeed, 0, 1000),
-      _sats: coordinate(rt.satellites, 0, 1000),
-    })
-    const assetRow = assets[key]
-    if (assetRow) {
-      const lon = drone._lon != null ? drone._lon : dock?.longitude
-      const lat = drone._lat != null ? drone._lat : dock?.latitude
-      const hasCoordinates = lon != null && lat != null
-      Object.assign(assetRow, {
-        status: drone.status,
-        statusClass: drone.statusClass,
-        location: drone.statusClass === 'mission'
-          ? `${dock?.location || '--'} · 飞行中`
-          : `停放于${dock?.name || '--'}`,
-        hasCoordinates,
-        longitude: hasCoordinates ? lon : null,
-        latitude: hasCoordinates ? lat : null,
-        inDock: drone.statusClass !== 'mission',
-        altitude: drone._alt,
-        speed: drone._speed,
-        satellites: drone._sats,
-        realtime: rt,
-        alarms,
-        online,
-      })
-    }
-    return true
-  }
-
-  return { assets, docks, drones, loaded, asset, record, commandType, sendCommand, load, applyDockDetail, applyDroneDetail }
-})
+import { defineStore } from 'pinia'
+import { reactive, ref } from 'vue'
+import request from '@/utils/http'
+import * as urls from '@/config/urls'
+
+// 后端 status 值 → 展示文案 + 状态样式
+const DOCK_STATUS = {
+  online: { status: '在线', statusClass: 'online' },
+  offline: { status: '离线', statusClass: 'offline' }
+}
+
+function fmtTime(t) {
+  if (!t) return '--'
+  const d = new Date(t)
+  if (Number.isNaN(d.getTime())) return '--'
+  return d.toLocaleString('zh-CN', { hour12: false })
+}
+
+function gpsText(q) {
+  const key = String(q || '').toUpperCase().replace(/-/g, '_')
+  switch (key) {
+    case 'RTK_FIX':
+    case 'RTK_FIXED': return 'RTK 固定解'
+    case 'RTK_FLOAT': return 'RTK 浮点解'
+    case '3D_FIX': return '3D 定位'
+    case '2D_FIX': return '2D 定位'
+    default: return q ? String(q) : '无定位'
+  }
+}
+
+function modeText(m) {
+  const key = String(m || '').toUpperCase()
+  switch (key) {
+    case 'STANDBY': return '待命'
+    case 'AUTO': return 'AUTO'
+    case 'GUIDED': return 'GUIDED'
+    case 'LOITER': return '悬停'
+    case 'RTL': return '返航'
+    default: return m || '--'
+  }
+}
+
+function controlModeText(m) {
+  const key = String(m || '').toLowerCase()
+  if (key === 'auto' || key === 'automatic') return '自动'
+  if (key === 'manual') return '手动'
+  return m || '--'
+}
+
+function parseJson(value, fallback = null) {
+  if (!value) return fallback
+  if (typeof value === 'object') return value
+  try { return JSON.parse(value) } catch { return fallback }
+}
+
+function environmentValues(realtime) {
+  const nested = parseJson(realtime?.environment, {}) || {}
+  const value = (key, ...aliases) => {
+    for (const name of [key, ...aliases]) {
+      if (nested[name] != null && nested[name] !== '') return nested[name]
+      if (realtime?.[name] != null && realtime[name] !== '') return realtime[name]
+    }
+    return null
+  }
+  return {
+    rain: value('rain'),
+    rainfall: value('rainfall', 'rainAmount', 'rainFall', 'precipitation'),
+    windSpeed: value('windSpeed', 'wind_speed'),
+    outsideTemperature: value('outsideTemperature', 'outside_temperature'),
+    outsideHumidity: value('outsideHumidity', 'outside_humidity'),
+    insideTemperature: value('insideTemperature', 'inside_temperature', 'temperature'),
+    insideHumidity: value('insideHumidity', 'inside_humidity', 'humidity')
+  }
+}
+
+function alarmCodes(realtime) {
+  const codes = parseJson(realtime?.alarmCodes, [])
+  return Array.isArray(codes) ? codes : []
+}
+
+function displayValue(value) {
+  return value == null || value === '' ? '--' : String(value)
+}
+
+function coordinate(value, min, max) {
+  const number = Number(value)
+  return Number.isFinite(number) && number >= min && number <= max ? number : null
+}
+
+// 指令标题 → 后端指令 type
+const COMMANDS = {
+  '一键起飞': 'workflow.one_key_takeoff',
+  '一键降落': 'workflow.one_key_land',
+  '起飞准备': 'dock.prepare_takeoff',
+  '起飞准备完成': 'dock.complete_takeoff',
+  '降落准备': 'dock.prepare_landing',
+  '降落准备完成': 'dock.complete_landing',
+  '打开舱门': 'dock.open',
+  '关闭舱门': 'dock.close',
+  '开始充电': 'dock.charge_start',
+  '整机复位': 'dock.reset',
+  '机巢复位': 'dock.reset',
+  '无人机开机': 'dock.drone_power_on',
+  '无人机关机': 'dock.drone_power_off',
+  '远程重启': 'dock.reboot',
+  '清除设备告警': 'dock.clear_alarm',
+  '设备自检': 'dock.self_check',
+  '起飞': 'drone.takeoff',
+  '降落': 'drone.land',
+  '一键返航': 'drone.return',
+  '悬停': 'drone.hover',
+  '紧急停止': 'drone.emergency_stop',
+  '开始任务': 'drone.mission_start',
+  '暂停任务': 'drone.mission_pause',
+  '继续任务': 'drone.mission_resume',
+  '取消任务': 'drone.mission_cancel'
+}
+
+// 经纬度 → 地图百分比坐标（按设备经纬范围动态投影，北向上）
+function project(lon, lat, bounds) {
+  const lonSpan = bounds.maxLon - bounds.minLon || 1
+  const latSpan = bounds.maxLat - bounds.minLat || 1
+  const x = ((lon - bounds.minLon) / lonSpan) * 80 + 10
+  const y = ((bounds.maxLat - lat) / latSpan) * 70 + 15
+  return { x: Math.round(x * 10) / 10, y: Math.round(y * 10) / 10 }
+}
+
+function dockStatusFromDetail(registerStatus, online, rt) {
+  const pending = registerStatus === 'pending' && !online
+  if (pending) return { status: '待连接', statusClass: 'pending' }
+  if (!online) return DOCK_STATUS.offline
+  if (alarmCodes(rt).length) return { status: '告警', statusClass: 'alarm' }
+  return DOCK_STATUS.online
+}
+
+function droneStatusFromDetail(online, rt) {
+  const armed = ['1', 'true', 1, true].includes(rt.armed)
+  const altitude = coordinate(rt.altitude, -1000, 100000)
+  const flying = armed || (altitude != null && altitude > 0)
+  if (!online) return { status: '离线', statusClass: 'offline', altitude, flying }
+  if (flying) return { status: '飞行中', statusClass: 'mission', altitude, flying }
+  return { status: '在巢', statusClass: 'online', altitude, flying }
+}
+
+
+export const useDeviceStore = defineStore('devices', () => {
+  const assets = reactive({})
+  const docks = ref([])
+  const drones = ref([])
+  const loaded = ref(false)
+
+  function asset(id) {
+    return assets[id] || null
+  }
+
+  function record(id) {
+    const key = String(id)
+    return docks.value.find((d) => d.id === key) || drones.value.find((d) => d.id === key) || null
+  }
+
+  function commandType(title) {
+    return COMMANDS[title] || ''
+  }
+
+  async function sendCommand(rec, title, params = {}) {
+    const type = COMMANDS[title]
+    if (!type) throw new Error('未知指令')
+    if (rec.kind === 'dock') {
+      return request.post(urls.DOCK_COMMAND(rec.id), { type, params })
+    }
+    const dock = docks.value.find((d) => d.dockId === rec.dockId)
+    if (!dock) throw new Error('未找到绑定机巢')
+    return request.post(urls.DOCK_COMMAND(dock.id), { type, params, droneSn: rec.droneSn })
+  }
+
+  async function load(options = {}) {
+    const silent = Boolean(options.silent)
+    const reqOpts = silent ? { skipErrorToast: true } : {}
+    const [dockPage, dronePage] = await Promise.all([
+      request.get(urls.DOCKS, { params: { pageNum: 1, pageSize: 100 }, ...reqOpts }),
+      request.get(urls.DRONES, { params: { pageNum: 1, pageSize: 100 }, ...reqOpts })
+    ])
+
+    const dockList = dockPage?.records || []
+    const droneList = dronePage?.records || []
+    const [dockDetails, droneDetails] = await Promise.all([
+      Promise.all(dockList.map((d) => request.get(urls.DOCK(d.id), reqOpts).then((r) => r || {}).catch(() => ({})))),
+      Promise.all(droneList.map((d) => request.get(urls.DRONE(d.id), reqOpts).then((r) => r || {}).catch(() => ({}))))
+    ])
+    const coords = dockList
+      .map((d) => ({ longitude: coordinate(d.longitude, -180, 180), latitude: coordinate(d.latitude, -90, 90) }))
+      .filter((d) => d.longitude != null && d.latitude != null)
+    const defaultLon = coords[0]?.longitude ?? 0
+    const defaultLat = coords[0]?.latitude ?? 0
+    const bounds = {
+      minLon: Math.min(...coords.map((d) => Number(d.longitude)), defaultLon),
+      maxLon: Math.max(...coords.map((d) => Number(d.longitude)), defaultLon),
+      minLat: Math.min(...coords.map((d) => Number(d.latitude)), defaultLat),
+      maxLat: Math.max(...coords.map((d) => Number(d.latitude)), defaultLat)
+    }
+    if (bounds.minLon === bounds.maxLon) { bounds.minLon -= 0.01; bounds.maxLon += 0.01 }
+    if (bounds.minLat === bounds.maxLat) { bounds.minLat -= 0.01; bounds.maxLat += 0.01 }
+
+    const newDocks = dockList.map((d, i) => {
+      const id = String(d.id)
+      const detail = dockDetails[i] || {}
+      const rt = detail.realtime || {}
+      const online = Boolean(detail.online)
+      const registerStatus = d.registerStatus || 'registered'
+      const st = dockStatusFromDetail(registerStatus, online, rt)
+      const name = d.name || d.dockId
+      const environment = environmentValues(rt)
+      return {
+        id,
+        kind: 'dock',
+        dockId: d.dockId,
+        name,
+        code: d.code || d.sn || d.dockId,
+        sn: d.sn || d.dockId || '--',
+        iccid: '--',
+        longitude: coordinate(d.longitude, -180, 180),
+        latitude: coordinate(d.latitude, -90, 90),
+        location: d.location || '--',
+        status: st.status,
+        statusClass: st.statusClass,
+        binding: '--',
+        bindingState: 'unbound',
+        mode: controlModeText(rt.controlMode),
+        version: d.softwareVer ? `v${d.softwareVer}` : '--',
+        updated: fmtTime(d.updatedAt),
+        protocol: d.protocolVer ? `MQTT v${d.protocolVer}` : '--',
+        registerStatus,
+        realtime: rt,
+        environment,
+        alarms: alarmCodes(rt),
+        online
+      }
+    })
+
+    const newDrones = droneList.map((d, i) => {
+      const id = String(d.id)
+      const detail = droneDetails[i] || {}
+      const rt = detail.realtime || {}
+      const online = Boolean(detail.online)
+      const st = droneStatusFromDetail(online, rt)
+      const altitude = st.altitude
+      const dock = newDocks.find((dk) => dk.dockId === d.dockId)
+      const battery = rt.batteryPercent ?? rt.batteryPct ?? d.battery
+      return {
+        id,
+        kind: 'drone',
+        droneSn: d.droneSn,
+        dockId: d.dockId,
+        name: d.name || d.droneSn,
+        code: d.code || d.droneSn,
+        status: st.status,
+        statusClass: st.statusClass,
+        binding: dock?.name || '--',
+        bindingState: dock ? 'bound' : 'unbound',
+        battery: battery != null && battery !== '' ? `${battery}%` : '--',
+        mode: modeText(rt.flightMode),
+        mission: displayValue(rt.missionName || rt.mission),
+        updated: fmtTime(d.updatedAt),
+        sysid: displayValue(rt.currentSysId),
+        gps: gpsText(rt.gpsQuality),
+        sn: d.droneSn || d.code || '--',
+        model: d.model || '--',
+        firmwareVer: d.firmwareVer || '--',
+        localRoutes: [],
+        realtime: rt,
+        alarms: alarmCodes(rt),
+        online,
+        _lat: coordinate(rt.latitude, -90, 90),
+        _lon: coordinate(rt.longitude, -180, 180),
+        _alt: altitude,
+        _speed: coordinate(rt.groundSpeed, 0, 1000),
+        _sats: coordinate(rt.satellites, 0, 1000)
+      }
+    })
+
+    for (const dk of newDocks) {
+      const dr = newDrones.find((d) => d.dockId === dk.dockId)
+      if (dr) {
+        dk.binding = dr.name
+        dk.bindingState = 'bound'
+      }
+    }
+
+    docks.value = newDocks
+    drones.value = newDrones
+
+    // 重建地图资产
+    Object.keys(assets).forEach((k) => delete assets[k])
+    for (const dk of newDocks) {
+      const hasCoordinates = dk.longitude != null && dk.latitude != null
+      const p = hasCoordinates ? project(dk.longitude, dk.latitude, bounds) : { x: null, y: null }
+      assets[dk.id] = {
+        id: dk.id, type: 'dock', name: dk.name, location: dk.location,
+        status: dk.status, statusClass: dk.statusClass, x: p.x, y: p.y, hasCoordinates,
+        longitude: hasCoordinates ? dk.longitude : null,
+        latitude: hasCoordinates ? dk.latitude : null,
+        realtime: dk.realtime, environment: dk.environment, alarms: dk.alarms, online: dk.online
+      }
+    }
+    for (const dr of newDrones) {
+      const dock = newDocks.find((d) => d.dockId === dr.dockId)
+      const lon = dr._lon != null ? dr._lon : dock?.longitude
+      const lat = dr._lat != null ? dr._lat : dock?.latitude
+      const hasCoordinates = lon != null && lat != null
+      const p = hasCoordinates ? project(lon, lat, bounds) : { x: null, y: null }
+      assets[dr.id] = {
+        id: dr.id, type: 'drone', name: dr.name,
+        location: dr.statusClass === 'mission' ? `${dock?.location || '--'} · 飞行中` : `停放于${dock?.name || '--'}`,
+        status: dr.status, statusClass: dr.statusClass, x: p.x, y: p.y, hasCoordinates,
+        longitude: hasCoordinates ? lon : null,
+        latitude: hasCoordinates ? lat : null,
+        parent: dock?.id || '', parentName: dock?.name || '--',
+        inDock: dr.statusClass !== 'mission', altitude: dr._alt, speed: dr._speed, satellites: dr._sats,
+        realtime: dr.realtime, alarms: dr.alarms, online: dr.online
+      }
+    }
+
+    loaded.value = true
+    return { docks: newDocks, drones: newDrones }
+  }
+
+  function applyDockDetail(id, detail) {
+    const key = String(id)
+    const dock = docks.value.find((d) => d.id === key)
+    if (!dock) {
+      console.warn('[devices] applyDockDetail missing dock', key)
+      return false
+    }
+    const rt = detail?.realtime || {}
+    const online = Boolean(detail?.online)
+    const st = dockStatusFromDetail(dock.registerStatus || 'registered', online, rt)
+    const environment = environmentValues(rt)
+    const alarms = alarmCodes(rt)
+    Object.assign(dock, {
+      status: st.status,
+      statusClass: st.statusClass,
+      mode: controlModeText(rt.controlMode),
+      realtime: rt,
+      environment,
+      alarms,
+      online,
+    })
+    const assetRow = assets[key]
+    if (assetRow) {
+      Object.assign(assetRow, {
+        status: dock.status,
+        statusClass: dock.statusClass,
+        realtime: rt,
+        environment,
+        alarms,
+        online,
+      })
+    }
+    return true
+  }
+
+  function applyDroneDetail(id, detail) {
+    const key = String(id)
+    const drone = drones.value.find((d) => d.id === key)
+    if (!drone) {
+      console.warn('[devices] applyDroneDetail missing drone', key)
+      return false
+    }
+    const rt = detail?.realtime || {}
+    const online = Boolean(detail?.online)
+    const st = droneStatusFromDetail(online, rt)
+    const altitude = st.altitude
+    const battery = rt.batteryPercent ?? rt.batteryPct
+    const alarms = alarmCodes(rt)
+    const dock = docks.value.find((d) => d.dockId === drone.dockId)
+    Object.assign(drone, {
+      status: st.status,
+      statusClass: st.statusClass,
+      battery: battery != null && battery !== '' ? `${battery}%` : drone.battery,
+      mode: modeText(rt.flightMode),
+      mission: displayValue(rt.missionName || rt.mission),
+      sysid: displayValue(rt.currentSysId),
+      gps: gpsText(rt.gpsQuality),
+      realtime: rt,
+      alarms,
+      online,
+      _lat: coordinate(rt.latitude, -90, 90),
+      _lon: coordinate(rt.longitude, -180, 180),
+      _alt: altitude,
+      _speed: coordinate(rt.groundSpeed, 0, 1000),
+      _sats: coordinate(rt.satellites, 0, 1000),
+    })
+    const assetRow = assets[key]
+    if (assetRow) {
+      const lon = drone._lon != null ? drone._lon : dock?.longitude
+      const lat = drone._lat != null ? drone._lat : dock?.latitude
+      const hasCoordinates = lon != null && lat != null
+      Object.assign(assetRow, {
+        status: drone.status,
+        statusClass: drone.statusClass,
+        location: drone.statusClass === 'mission'
+          ? `${dock?.location || '--'} · 飞行中`
+          : `停放于${dock?.name || '--'}`,
+        hasCoordinates,
+        longitude: hasCoordinates ? lon : null,
+        latitude: hasCoordinates ? lat : null,
+        inDock: drone.statusClass !== 'mission',
+        altitude: drone._alt,
+        speed: drone._speed,
+        satellites: drone._sats,
+        realtime: rt,
+        alarms,
+        online,
+      })
+    }
+    return true
+  }
+
+  return { assets, docks, drones, loaded, asset, record, commandType, sendCommand, load, applyDockDetail, applyDroneDetail }
+})
diff --git a/src/views/AccountView/AccountView.vue b/src/views/AccountView/AccountView.vue
index 1f37d27..1a07928 100644
--- a/src/views/AccountView/AccountView.vue
+++ b/src/views/AccountView/AccountView.vue
@@ -1,1056 +1,1088 @@
-<template>
-  <section class="operation-page">
-    <header class="operation-page-header"><div><h1>账户中心</h1><span>管理云媒体流量、通信卡和账户资料</span></div></header>
-
-    <div class="business-metric-band account-metrics">
-      <div><span>账户</span><strong>{{ profileName }}</strong><small>{{ accountStatus }}</small></div>
-      <div><span>云媒体流量</span><strong>{{ balance }}</strong><small>GB</small></div>
-      <div><span>通信卡</span><strong>{{ simTotal }}</strong><small>张</small></div>
-      <div><span>接入设备</span><strong>{{ deviceCount }}</strong><small>{{ deviceLoadFailed ? '加载失败' : '机巢 + 无人机' }}</small></div>
-    </div>
-
-    <div class="business-workspace">
-      <t-tabs v-model="tab" class="business-tdesign-tabs">
-        <t-tab-panel value="overview" label="概览" :destroy-on-hide="false" />
-        <t-tab-panel value="traffic" label="云媒体流量" :destroy-on-hide="false" />
-        <t-tab-panel value="sim" label="通信卡" :destroy-on-hide="false" />
-        <t-tab-panel value="security" label="账号安全" :destroy-on-hide="false" />
-        <t-tab-panel value="invoice" label="发票管理" :destroy-on-hide="false" />
-      </t-tabs>
-
-      <div class="business-panel account-panel" :class="{ active: tab === 'overview' }">
-        <div class="account-overview-grid">
-          <section class="account-info-block">
-            <div class="account-section-heading"><h2>账户资料</h2><span>以账户资料为准</span></div>
-            <div class="tenant-identity">
-              <span>{{ profileInitial }}</span>
-              <div><strong>{{ profileName }}</strong><small>账户角色 · {{ profileRole }}</small></div>
-              <t-button variant="text" theme="primary" @click="editOpen = true">编辑</t-button>
-            </div>
-            <dl class="account-details">
-              <div><dt>账户名称</dt><dd>{{ profileName }}</dd></div>
-              <div><dt>联系电话</dt><dd>{{ profilePhone }}</dd></div>
-              <div><dt>邮箱</dt><dd>{{ profileEmail }}</dd></div>
-              <div><dt>注册时间</dt><dd>{{ createdAt }}</dd></div>
-            </dl>
-          </section>
-          <section class="account-info-block">
-            <div class="account-section-heading"><h2>资源概览</h2><span>实时账户数据</span></div>
-            <div class="resource-progress resource-values">
-              <div><span>云媒体流量 <b>{{ balance }} GB</b></span></div>
-              <div><span>通信卡 <b>{{ activeSimCount }} 张正常 / {{ simTotal }} 张</b></span></div>
-              <div><span>接入设备 <b>{{ resourceSummary ? `${resourceSummary.dockCount} 个机巢 / ${resourceSummary.droneCount} 架无人机` : deviceCount }}</b></span></div>
-              <div><span>视频资产 <b>{{ resourceSummary?.videoCount ?? '--' }} 个 / 本月下载 {{ resourceSummary?.monthDownloadCount ?? '--' }} 次</b></span></div>
-              <div><span>本月媒体流量 <b>{{ resourceSummary ? `${Number(resourceSummary.monthUsageGb).toFixed(2)} GB` : '--' }}</b></span></div>
-            </div>
-            <div class="account-card-actions"><t-button theme="primary" @click="tab = 'traffic'">查看流量订单</t-button><t-button variant="outline" @click="tab = 'sim'">管理通信卡</t-button></div>
-          </section>
-        </div>
-      </div>
-
-      <div class="business-panel account-panel" :class="{ active: tab === 'traffic' }" style="padding:18px">
-        <div class="traffic-balance-card"><span>当前云媒体流量余额</span><strong>{{ balance }} <small>GB</small></strong><p>流量用于直播、回放与原始素材下载</p></div>
-        <div class="traffic-purchase-layout" style="margin-top:16px">
-          <div class="traffic-amount-block">
-            <label>
-              <span>选择流量套餐</span>
-              <t-radio-group
-                class="package-card-grid"
-                v-model="selectedTrafficPackageId"
-                :disabled="!trafficPackages.length || trafficOrdering"
-              >
-                <t-radio
-                  v-for="pkg in trafficPackages"
-                  :key="pkg.id"
-                  class="package-card"
-                  :value="pkg.id"
-                >
-                  <span class="package-card-body">
-                    <strong>{{ pkg.name }}</strong>
-                    <b>{{ (Number(pkg.amountBytes) / 1024 / 1024 / 1024).toFixed(0) }} GB</b>
-                    <em>{{ money(pkg.price) }}</em>
-                    <small v-if="pkg.validityDays">有效期 {{ pkg.validityDays }} 天</small>
-                    <small v-else>长期有效</small>
-                  </span>
-                </t-radio>
-              </t-radio-group>
-              <small v-if="!trafficPackages.length">暂无可用套餐</small>
-            </label>
-          </div>
-          <div class="traffic-order-summary">
-            <span>订单概要</span>
-            <strong>云媒体流量订单</strong>
-            <b v-if="selectedTrafficPackage">{{ money(selectedTrafficPackage.price) }}</b>
-            <small>创建订单后发起微信支付；金额以服务端订单为准。</small>
-            <t-button
-              theme="primary"
-              :loading="trafficOrdering"
-              :disabled="!selectedTrafficPackageId || !trafficPackages.length"
-              @click="createTrafficOrderAndPay"
-            >购买并支付</t-button>
-          </div>
-        </div>
-        <div class="account-subsection-title"><h3>订单记录</h3><span>共 {{ orderTotal }} 条</span></div>
-        <t-table row-key="id" :data="orders" :columns="orderColumns" empty="暂无流量订单">
-          <template #content="{ row }">{{ orderContentLabel(row) }}</template>
-          <template #unitPrice="{ row }">{{ money(row.unitPrice) }}</template>
-          <template #totalPrice="{ row }"><strong>{{ money(row.totalPrice) }}</strong></template>
-          <template #payStatus="{ row }"><em :class="{ processing: row.payStatus === 'unpaid' || row.payStatus === 'processing' }">{{ payStatusName(row.payStatus) }}</em></template>
-          <template #createdAt="{ row }">{{ fmtTime(row.createdAt) }}</template>
-          <template #actions="{ row }">
-            <t-button
-              v-if="isTrafficOrderActionable(row)"
-              variant="text"
-              theme="primary"
-              :loading="payingOrderId === row.id"
-              @click="payTrafficOrder(row)"
-            >去支付</t-button>
-            <t-button
-              v-if="isTrafficOrderActionable(row)"
-              variant="text"
-              theme="danger"
-              @click="cancelTrafficOrder(row.id)"
-            >取消</t-button>
-            <span v-else>--</span>
-          </template>
-        </t-table>
-        <div class="table-footer" v-if="orderTotal"><t-pagination v-model:current="orderPageNum" :total="orderTotal" :page-size="10" @current-change="loadOrders" /></div>
-        <div class="account-subsection-title"><h3>消费明细</h3><span>共 {{ usageTotal }} 条</span></div>
-        <t-table row-key="id" :data="usage" :columns="usageColumns" empty="暂无流量消费记录">
-          <template #sourceType="{ row }">{{ sourceName(row.sourceType) }}</template>
-          <template #sourceId="{ row }">{{ row.sourceId || '--' }}</template>
-          <template #bytesUsed="{ row }"><strong>{{ fmtGb(row.bytesUsed) }}</strong></template>
-          <template #balanceBefore="{ row }">{{ fmtGb(row.balanceBefore) }}</template>
-          <template #balanceAfter="{ row }">{{ fmtGb(row.balanceAfter) }}</template>
-          <template #createdAt="{ row }">{{ fmtTime(row.createdAt) }}</template>
-        </t-table>
-        <div class="table-footer" v-if="usageTotal"><t-pagination v-model:current="usagePageNum" :total="usageTotal" :page-size="10" @current-change="loadUsage" /></div>
-        <div class="account-subsection-title"><h3>下载记录</h3><span>共 {{ downloadTotal }} 条</span></div>
-        <t-table row-key="id" :data="downloads" :columns="downloadColumns" empty="暂无下载记录">
-          <template #fileName="{ row }"><strong>{{ row.fileName || '--' }}</strong></template>
-          <template #droneSn="{ row }">{{ row.droneSn || '--' }}</template>
-          <template #executionId="{ row }">{{ row.executionId || '--' }}</template>
-          <template #bytes="{ row }">{{ fmtGb(row.bytes) }}</template>
-          <template #createdAt="{ row }">{{ fmtTime(row.createdAt) }}</template>
-        </t-table>
-      </div>
-
-      <div class="business-panel account-panel" :class="{ active: tab === 'sim' }" style="padding:16px">
-        <div class="communication-status-grid"><div><strong>{{ simTotal }}</strong><span>通信卡总数</span></div><div><strong>{{ activeSimCount }}</strong><span>正常</span></div><div><strong>{{ warnSimCount }}</strong><span>异常或未同步</span></div></div>
-        <t-table row-key="id" :data="simCards" :columns="simColumns" empty="暂无通信卡">
-          <template #carrier="{ row }"><strong>{{ row.carrier || '--' }}</strong></template>
-          <template #iccid="{ row }"><strong>{{ row.iccid || '--' }}</strong><small>{{ row.phone || '--' }}</small></template>
-          <template #dockId="{ row }">{{ row.dockId || '--' }}</template>
-          <template #usage="{ row }">{{ row.lastSyncAt ? `${Number(row.usedGb || 0).toFixed(1)} / ${row.planGb || 0} GB` : '暂无运营商同步数据' }}</template>
-          <template #status="{ row }"><span class="carrier-status" :class="simStatus(row).cls"><i></i>{{ simStatus(row).name }}</span></template>
-          <template #lastSyncAt="{ row }">{{ fmtTime(row.lastSyncAt) }}</template>
-          <template #actions="{ row }">
-            <t-button variant="text" theme="primary" @click="openSimRecharge(row)">充值</t-button>
-          </template>
-        </t-table>
-        <div class="table-footer" v-if="simTotal"><t-pagination v-model:current="simPageNum" :total="simTotal" :page-size="10" @current-change="loadSim" /></div>
-        <div
-          v-for="order in actionablePendingSimOrders"
-          :key="order.id"
-          class="pending-sim-order"
-        >
-          <div>
-            <strong>待支付通信卡充值</strong>
-            <small>
-              {{ cardLabel(order.simCardId) }}
-              · {{ order.amountGb != null ? `${order.amountGb} GB` : '--' }}
-              · {{ moneyFromFen(order.totalFeeFen) }}
-              · {{ payStatusName(order.paymentStatus) }}
-            </small>
-          </div>
-          <div class="account-card-actions" style="margin-top:0">
-            <t-button
-              variant="text"
-              theme="primary"
-              :loading="payingPendingSimId === order.id"
-              @click="payPendingSimOrder(order)"
-            >去支付</t-button>
-            <t-button
-              variant="text"
-              theme="danger"
-              :loading="cancellingPendingSimId === order.id"
-              @click="cancelPendingSimOrder(order)"
-            >取消</t-button>
-          </div>
-        </div>
-        <div class="account-subsection-title"><h3>通信卡充值记录</h3><span>共 {{ simRechargeTotal }} 条</span></div>
-        <t-table row-key="id" :data="simRechargeLogs" :columns="simRechargeColumns" empty="暂无通信卡充值记录">
-          <template #simCardId="{ row }">{{ cardLabel(row.simCardId) }}</template>
-          <template #amountGb="{ row }"><strong>{{ row.amountGb }} GB</strong></template>
-          <template #totalPrice="{ row }"><strong>{{ money(row.totalPrice) }}</strong></template>
-          <template #payStatus="{ row }"><em>{{ payStatusName(row.payStatus || row.paymentStatus) }}</em></template>
-          <template #rechargeStatus="{ row }"><em :class="{ processing: row.rechargeStatus === 'pending' }">{{ rechargeStatusName(row.rechargeStatus) }}</em></template>
-          <template #createdAt="{ row }">{{ fmtTime(row.createdAt) }}</template>
-        </t-table>
-        <div class="table-footer" v-if="simRechargeTotal"><t-pagination v-model:current="simRechargePageNum" :total="simRechargeTotal" :page-size="10" @current-change="loadSim" /></div>
-      </div>
-
-      <div class="business-panel account-panel" :class="{ active: tab === 'security' }" style="padding:18px">
-        <div class="account-section-heading"><h2>账号安全</h2><span>修改密码后将退出所有设备</span></div>
-        <div class="security-list">
-          <div><span><strong>登录手机号</strong><small>{{ maskPhone(profilePhone) }}</small></span></div>
-          <div><span><strong>绑定邮箱</strong><small>{{ profileEmail }}</small></span></div>
-          <div><span><strong>登录会话</strong><small>共 {{ sessions.length }} 个有效会话</small></span><t-button variant="outline" @click="revokeOthers">退出其他设备</t-button></div>
-        </div>
-        <t-table row-key="id" :data="sessions" :columns="sessionColumns" empty="暂无有效会话">
-          <template #device="{ row }">{{ row.userAgent || '未知设备' }}{{ row.current ? '（当前）' : '' }}</template>
-          <template #ip="{ row }">{{ row.ip || '--' }}</template>
-          <template #lastActiveAt="{ row }">{{ fmtTime(row.lastActiveAt) }}</template>
-          <template #expiresAt="{ row }">{{ fmtTime(row.expiresAt) }}</template>
-          <template #actions="{ row }">
-            <t-button v-if="!row.current" variant="text" theme="primary" @click="revokeSession(row.id)">退出</t-button>
-            <span v-else>当前会话</span>
-          </template>
-        </t-table>
-        <div class="account-card-actions"><t-button theme="primary" @click="passwordOpen = true">修改密码</t-button></div>
-      </div>
-
-      <div class="business-panel account-panel" :class="{ active: tab === 'invoice' }" style="padding:18px">
-        <div class="account-section-heading"><h2>发票资料与申请</h2><span>仅对已人工确认的流量订单开放申请</span></div>
-        <div class="traffic-purchase-layout">
-          <div class="traffic-amount-block">
-            <label><span>发票抬头</span><t-input v-model.trim="invoiceForm.title" :maxlength="128" /></label>
-            <label><span>纳税人识别号</span><t-input v-model.trim="invoiceForm.taxpayerNumber" :maxlength="64" /></label>
-            <label><span>接收邮箱</span><t-input v-model.trim="invoiceForm.email" type="email" /></label>
-            <t-button theme="primary" @click="saveInvoiceProfile">保存默认发票资料</t-button>
-          </div>
-          <div class="traffic-order-summary">
-            <span>可申请订单</span>
-            <t-select v-model="invoiceOrderId" :options="invoiceOrderOptions" style="width: 100%" />
-            <t-button theme="primary" :disabled="!invoiceOrderId" @click="createInvoiceRequest">提交开具发票</t-button>
-          </div>
-        </div>
-        <div class="account-subsection-title"><h3>发票记录</h3><span>仅展示已提交的开具申请</span></div>
-        <t-table row-key="id" :data="invoiceRequests" :columns="invoiceColumns" empty="暂无发票申请">
-          <template #orderId="{ row }">{{ row.orderId }}</template>
-          <template #amount="{ row }"><strong>{{ money(row.amount) }}</strong></template>
-          <template #title="{ row }">{{ row.title }}</template>
-          <template #status="{ row }"><em :class="{ processing: row.status === 'pending' }">{{ invoiceStatusName(row.status) }}</em></template>
-          <template #requestedAt="{ row }">{{ fmtTime(row.requestedAt) }}</template>
-        </t-table>
-      </div>
-    </div>
-
-    <t-dialog
-      v-model:visible="editOpen"
-      header="编辑账户资料"
-      width="440px"
-      destroy-on-close
-      dialog-class-name="recharge-modal"
-      placement="center"
-    >
-      <label><span>账户名称</span><t-input v-model.trim="editForm.name" :maxlength="32" /></label>
-      <label><span>邮箱</span><t-input v-model.trim="editForm.email" type="email" /></label>
-      <template #footer>
-        <t-button variant="outline" @click="editOpen = false">取消</t-button>
-        <t-button theme="primary" :disabled="saving" :loading="saving" @click="saveProfile">{{ saving ? '保存中…' : '保存' }}</t-button>
-      </template>
-    </t-dialog>
-    <t-dialog
-      v-model:visible="passwordOpen"
-      header="修改密码"
-      width="440px"
-      destroy-on-close
-      dialog-class-name="recharge-modal"
-      placement="center"
-    >
-      <label><span>当前密码</span><t-input v-model="passwordForm.oldPassword" type="password" /></label>
-      <label><span>新密码</span><t-input v-model="passwordForm.newPassword" type="password" /></label>
-      <template #footer>
-        <t-button variant="outline" @click="passwordOpen = false">取消</t-button>
-        <t-button theme="primary" @click="changePassword">确认修改</t-button>
-      </template>
-    </t-dialog>
-    <t-dialog
-      v-model:visible="simRechargeOpen"
-      header="通信卡充值"
-      width="480px"
-      destroy-on-close
-      dialog-class-name="recharge-modal"
-      placement="center"
-    >
-      <p>ICCID：{{ simRechargeCard?.iccid || '--' }}</p>
-      <label>
-        <span>选择套餐</span>
-        <t-radio-group
-          class="package-card-grid"
-          v-model="selectedSimPackageId"
-          :disabled="!simPackages.length || simRecharging"
-        >
-          <t-radio
-            v-for="pkg in simPackages"
-            :key="pkg.id"
-            class="package-card"
-            :value="pkg.id"
-          >
-            <span class="package-card-body">
-              <strong>{{ pkg.name }}</strong>
-              <b>{{ pkg.amountGb }} GB</b>
-              <em>{{ moneyFromFen(pkg.saleFeeFen) }}</em>
-              <small v-if="pkg.validityMonths">有效期 {{ pkg.validityMonths }} 个月</small>
-              <small v-else>按运营商规则</small>
-            </span>
-          </t-radio>
-        </t-radio-group>
-        <small v-if="!simPackages.length">暂无可用通信卡套餐</small>
-      </label>
-      <template #footer>
-        <t-button variant="outline" @click="simRechargeOpen = false">取消</t-button>
-        <t-button
-          theme="primary"
-          :loading="simRecharging"
-          :disabled="!selectedSimPackageId || !simPackages.length"
-          @click="submitSimRecharge"
-        >创建并支付</t-button>
-      </template>
-    </t-dialog>
-    <t-dialog
-      v-model:visible="payDialogOpen"
-      :header="payDialog.title"
-      width="420px"
-      destroy-on-close
-      dialog-class-name="recharge-modal pay-qr-modal"
-      placement="center"
-    >
-      <div class="pay-qr-panel">
-        <div class="pay-qr-amount">
-          <span>应付金额</span>
-          <strong>{{ payDialog.amountText }}</strong>
-        </div>
-        <dl class="pay-qr-meta">
-          <div><dt>业务</dt><dd>{{ payDialog.businessType === 'sim_recharge_order' ? '通信卡充值' : '云媒体流量' }}</dd></div>
-          <div><dt>订单号</dt><dd>{{ payDialog.businessOrderId || '--' }}</dd></div>
-          <div><dt>支付单</dt><dd>{{ payDialog.transactionId || '--' }}</dd></div>
-          <div><dt>状态</dt><dd>{{ payDialog.statusText || '--' }}</dd></div>
-        </dl>
-        <div class="pay-qr-code" v-if="payDialog.qrSrc">
-          <img :src="payDialog.qrSrc" alt="支付二维码" />
-          <small>请使用微信扫码支付</small>
-        </div>
-        <p class="pay-qr-error" v-else>{{ payDialog.error || '暂无二维码' }}</p>
-      </div>
-      <template #footer>
-        <t-button variant="outline" @click="payDialogOpen = false">关闭</t-button>
-        <t-button
-          theme="primary"
-          :loading="payDialogRefreshing"
-          :disabled="!payDialog.transactionId"
-          @click="refreshPaymentStatus"
-        >我已支付，刷新状态</t-button>
-      </template>
-    </t-dialog>
-  </section>
-</template>
-
-<script setup>
-import { computed, onMounted, ref } from 'vue'
-import { useRouter } from 'vue-router'
-import { useUserStore } from '@/stores/modules/userStore'
-import { useUiStore } from '@/stores/modules/uiStore'
-import { useDeviceStore } from '@/stores/modules/devicesStore'
-import request from '@/utils/http'
-import * as urls from '@/config/urls'
-
-const userStore = useUserStore()
-const router = useRouter()
-const ui = useUiStore()
-const deviceStore = useDeviceStore()
-const tab = ref('overview')
-const profile = ref(null)
-const balance = ref('--')
-const deviceCount = ref('--')
-const deviceLoadFailed = ref(false)
-const resourceSummary = ref(null)
-const downloads = ref([]); const downloadTotal = ref(0)
-const trafficPackages = ref([])
-const selectedTrafficPackageId = ref(0)
-const trafficOrdering = ref(false)
-const payingOrderId = ref(0)
-const sessions = ref([])
-const invoiceProfiles = ref([]); const invoiceOrders = ref([]); const invoiceRequests = ref([]); const invoiceOrderId = ref(0)
-const invoiceForm = ref({ title: '', taxpayerNumber: '', email: '', isDefault: true })
-const passwordOpen = ref(false); const passwordForm = ref({ oldPassword: '', newPassword: '' })
-const orders = ref([]); const orderTotal = ref(0); const orderPages = ref(1); const orderPageNum = ref(1)
-const usage = ref([]); const usageTotal = ref(0); const usagePages = ref(1); const usagePageNum = ref(1)
-const simCards = ref([]); const simTotal = ref(0); const simPages = ref(1); const simPageNum = ref(1)
-const simRechargeLogs = ref([]); const simRechargeTotal = ref(0); const simRechargePages = ref(1); const simRechargePageNum = ref(1)
-const simPackages = ref([])
-const simRechargeOpen = ref(false)
-const simRechargeCard = ref(null)
-const selectedSimPackageId = ref(0)
-const simRecharging = ref(false)
-const pendingSimOrdersByCard = ref({})
-const payingPendingSimId = ref(0)
-const cancellingPendingSimId = ref(0)
-const payDialogOpen = ref(false)
-const payDialogRefreshing = ref(false)
-const payDialog = ref({
-  title: '微信支付',
-  businessType: '',
-  businessOrderId: 0,
-  transactionId: 0,
-  amountText: '--',
-  status: '',
-  statusText: '',
-  qrSrc: '',
-  error: ''
-})
-
-const editOpen = ref(false); const saving = ref(false); const editForm = ref({ name: '', email: '' })
-
-const orderColumns = [
-  { colKey: 'id', title: '订单号' },
-  { colKey: 'content', title: '内容' },
-  { colKey: 'unitPrice', title: '单价' },
-  { colKey: 'totalPrice', title: '金额' },
-  { colKey: 'payStatus', title: '状态' },
-  { colKey: 'createdAt', title: '时间' },
-  { colKey: 'actions', title: '操作' }
-]
-const usageColumns = [
-  { colKey: 'sourceType', title: '来源' },
-  { colKey: 'sourceId', title: '对象 ID' },
-  { colKey: 'bytesUsed', title: '用量' },
-  { colKey: 'balanceBefore', title: '扣减前' },
-  { colKey: 'balanceAfter', title: '扣减后' },
-  { colKey: 'createdAt', title: '时间' }
-]
-const downloadColumns = [
-  { colKey: 'fileName', title: '文件' },
-  { colKey: 'droneSn', title: '无人机' },
-  { colKey: 'executionId', title: '执行记录' },
-  { colKey: 'bytes', title: '下载用量' },
-  { colKey: 'createdAt', title: '时间' }
-]
-const simColumns = [
-  { colKey: 'carrier', title: '运营商' },
-  { colKey: 'iccid', title: 'ICCID / 号码' },
-  { colKey: 'dockId', title: '绑定机巢' },
-  { colKey: 'usage', title: '套餐用量' },
-  { colKey: 'status', title: '状态' },
-  { colKey: 'lastSyncAt', title: '最后同步' },
-  { colKey: 'actions', title: '操作' }
-]
-const simRechargeColumns = [
-  { colKey: 'simCardId', title: '通信卡' },
-  { colKey: 'amountGb', title: '充值流量' },
-  { colKey: 'totalPrice', title: '金额' },
-  { colKey: 'payStatus', title: '支付状态' },
-  { colKey: 'rechargeStatus', title: '充值状态' },
-  { colKey: 'createdAt', title: '时间' }
-]
-const sessionColumns = [
-  { colKey: 'device', title: '设备' },
-  { colKey: 'ip', title: 'IP' },
-  { colKey: 'lastActiveAt', title: '最近活跃' },
-  { colKey: 'expiresAt', title: '过期时间' },
-  { colKey: 'actions', title: '操作' }
-]
-const invoiceColumns = [
-  { colKey: 'orderId', title: '订单号' },
-  { colKey: 'amount', title: '金额' },
-  { colKey: 'title', title: '抬头' },
-  { colKey: 'status', title: '状态' },
-  { colKey: 'requestedAt', title: '申请时间' }
-]
-
-const profileName = computed(() => profile.value?.name || '--')
-const profilePhone = computed(() => profile.value?.phone || '--')
-const profileEmail = computed(() => profile.value?.email || '--')
-const profileRole = computed(() => profile.value?.role === 'admin' ? '管理员' : profile.value?.role === 'user' ? '普通用户' : '--')
-const accountStatus = computed(() => profile.value?.status === 1 ? '正常' : profile.value?.status === 0 ? '已禁用' : '--')
-const createdAt = computed(() => profile.value?.createdAt ? fmtTime(profile.value.createdAt) : '--')
-const profileInitial = computed(() => profileName.value === '--' ? '-' : profileName.value.charAt(0))
-const invoiceOrderOptions = computed(() => [{ label: '请选择已支付订单', value: 0 }, ...invoiceOrders.value.map((order) => ({ label: `${order.id} · ${money(order.totalPrice)}`, value: order.id }))])
-const activeSimCount = computed(() => simCards.value.filter((card) => simStatus(card).cls === 'normal').length)
-const warnSimCount = computed(() => simTotal.value - activeSimCount.value)
-const actionablePendingSimOrders = computed(() => Object.values(pendingSimOrdersByCard.value || {}).filter((order) => order?.paymentStatus === 'unpaid' || order?.paymentStatus === 'processing'))
-const selectedTrafficPackage = computed(() =>
-  trafficPackages.value.find((pkg) => String(pkg.id) === String(selectedTrafficPackageId.value)) || null
-)
-
-
-
-function applyPage(targetRef, page) {
-  const records = page?.records || []
-  targetRef.value = records
-  return { total: page?.total || 0, pages: page?.pages || 1 }
-}
-function fmtTime(value) { const date = new Date(value); return value && !Number.isNaN(date.getTime()) ? date.toLocaleString('zh-CN', { hour12: false }) : '--' }
-function fmtGb(bytes) { return bytes == null ? '--' : `${(Number(bytes) / 1024 / 1024 / 1024).toFixed(2)} GB` }
-function money(value) { return value == null ? '--' : `¥${Number(value).toFixed(2)}` }
-function moneyFromFen(fen) { return fen == null ? '--' : `¥${(Number(fen) / 100).toFixed(2)}` }
-function sourceName(type) { return ({ live: '直播', replay: '回放', download: '下载' })[type] || type || '--' }
-function payStatusName(status) {
-  return ({
-    unpaid: '待支付',
-    processing: '支付中',
-    paid: '已支付',
-    cancelled: '已取消',
-    closed: '已关闭'
-  })[status] || status || '--'
-}
-function isTrafficOrderActionable(row) {
-  return row?.payStatus === 'unpaid' || row?.payStatus === 'processing'
-}
-function paymentStatusName(status) {
-  return ({
-    unpaid: '待支付',
-    processing: '支付中',
-    paid: '已支付',
-    success: '已支付',
-    failed: '支付失败',
-    cancelled: '已取消',
-    closed: '已关闭'
-  })[status] || status || '--'
-}
-function looksLikeBase64(value) {
-  const text = String(value || '').replace(/\s+/g, '')
-  return text.length > 32 && /^[A-Za-z0-9+/=]+$/.test(text)
-}
-function resolvePaymentQrSrc(payload) {
-  if (payload == null) return ''
-  if (typeof payload !== 'string') {
-    if (typeof payload === 'object') {
-      const nested = payload.qrCode || payload.qrUrl || payload.image || payload.codeUrl || ''
-      return resolvePaymentQrSrc(nested)
-    }
-    return ''
-  }
-  const text = payload.trim()
-  if (!text) return ''
-  if (text.startsWith('data:image/')) return text
-  if (/^https?:\/\//i.test(text) || text.startsWith('/')) return text
-  if (text.startsWith('weixin://')) return ''
-  if (looksLikeBase64(text)) return `data:image/png;base64,${text.replace(/\s+/g, '')}`
-  // JSON 字符串里混入了 PNG 二进制时，尝试从 latin1 字节转 base64
-  try {
-    const bytes = Array.from(text, (ch) => ch.charCodeAt(0) & 0xff)
-    let binary = ''
-    for (let i = 0; i < bytes.length; i += 1) binary += String.fromCharCode(bytes[i])
-    if (bytes[0] === 0x89 && bytes[1] === 0x50) {
-      return `data:image/png;base64,${btoa(binary)}`
-    }
-  } catch (_) {}
-  return ''
-}
-function openPaymentDialog(payment, meta = {}) {
-  const qrSrc = resolvePaymentQrSrc(payment?.providerPayload)
-  payDialog.value = {
-    title: meta.title || '微信支付',
-    businessType: meta.businessType || payment?.businessType || '',
-    businessOrderId: meta.businessOrderId || payment?.businessOrderId || 0,
-    transactionId: payment?.transactionId || 0,
-    amountText: moneyFromFen(payment?.totalFeeFen),
-    status: payment?.status || '',
-    statusText: paymentStatusName(payment?.status),
-    qrSrc,
-    error: qrSrc ? '' : '支付已创建，但二维码无法展示；可关闭后点击「去支付」重试'
-  }
-  payDialogOpen.value = true
-  return payment
-}
-async function refreshPaymentStatus() {
-  const id = payDialog.value.transactionId
-  if (!id) {
-    ui.toast('缺少支付单号')
-    return
-  }
-  payDialogRefreshing.value = true
-  try {
-    const payment = await request.get(urls.PAYMENT(id))
-    const qrSrc = resolvePaymentQrSrc(payment?.providerPayload) || payDialog.value.qrSrc
-    payDialog.value = {
-      ...payDialog.value,
-      status: payment?.status || payDialog.value.status,
-      statusText: paymentStatusName(payment?.status || payDialog.value.status),
-      amountText: moneyFromFen(payment?.totalFeeFen) || payDialog.value.amountText,
-      qrSrc,
-      error: qrSrc ? '' : payDialog.value.error
-    }
-    const paid = payment?.status === 'paid' || payment?.status === 'success'
-    await Promise.all([
-      loadOrders(),
-      request.get(urls.TRAFFIC_BALANCE).then((data) => {
-        balance.value = data?.balanceGb == null ? '--' : Number(data.balanceGb).toFixed(1)
-      }).catch(() => {}),
-      loadSim().catch(() => {})
-    ])
-    if (paid) {
-      ui.toast('支付成功，流量/订单已刷新')
-      payDialogOpen.value = false
-    } else {
-      ui.toast(`当前状态：${paymentStatusName(payment?.status)}，如已扫码请稍后再试`)
-    }
-  } catch (error) {
-    ui.toast(error.message || '刷新支付状态失败')
-  } finally {
-    payDialogRefreshing.value = false
-  }
-}
-async function createPayment(businessType, businessOrderId) {
-  return request.post(urls.PAYMENTS, { businessType, businessOrderId })
-}
-function orderContentLabel(row) {
-  if (row?.amountGb != null) return `${row.amountGb} GB 流量`
-  if (row?.packageName) return row.packageName
-  if (row?.amountBytes != null) return fmtGb(row.amountBytes)
-  return '--'
-}
-function rechargeStatusName(status) { return ({ pending: '处理中', success: '充值成功', failed: '充值失败' })[status] || status || '--' }
-function invoiceStatusName(status) { return ({ pending: '待人工处理', issued: '已开具', rejected: '已驳回', cancelled: '已取消' })[status] || status || '--' }
-function maskPhone(phone) { const value = String(phone || ''); return value.length > 7 ? `${value.slice(0, 3)}****${value.slice(-4)}` : value || '--' }
-function simStatus(card) { if (card.status === 'expired') return { name: '已过期', cls: 'danger' }; return ({ normal: { name: '正常', cls: 'normal' }, suspended: { name: '停机', cls: 'danger' }, arrears: { name: '欠费', cls: 'danger' }, cancelled: { name: '已注销', cls: 'owned' } })[card.carrierStatus] || { name: card.lastSyncAt ? '状态未知' : '未同步', cls: 'owned' } }
-function cardLabel(id) { const card = simCards.value.find((item) => String(item.id) === String(id)); return card ? `${card.carrier || '--'} · ${card.iccid || '--'}` : String(id || '--') }
-async function loadProfile() { profile.value = await request.get(urls.ACCOUNT_PROFILE); editForm.value = { name: profile.value?.name || '', email: profile.value?.email || '' }; userStore.user = { ...(userStore.user || {}), ...profile.value }; localStorage.setItem('user', JSON.stringify(userStore.user)) }
-
-async function loadAccountExtensions() { const results = await Promise.allSettled([request.get(urls.ACCOUNT_RESOURCE_SUMMARY).then((data) => { resourceSummary.value = data }), request.get(urls.ACCOUNT_DOWNLOADS, { params: { pageNum: 1, pageSize: 10 } }).then((data) => { downloads.value = data?.records || []; downloadTotal.value = data?.total || 0 }), request.get(urls.ACCOUNT_SESSIONS).then((data) => { sessions.value = data || [] }), request.get(urls.INVOICE_PROFILES).then((data) => { invoiceProfiles.value = data || []; const profile = invoiceProfiles.value.find((item) => item.isDefault) || invoiceProfiles.value[0]; if (profile) invoiceForm.value = { ...profile, isDefault: true } }), request.get(urls.INVOICE_ORDERS).then((data) => { invoiceOrders.value = data || [] }), request.get(urls.INVOICE_REQUESTS).then((data) => { invoiceRequests.value = data || [] })]); if (results.some((result) => result.status === 'rejected')) ui.toast('部分账户扩展数据加载失败') }
-async function changePassword() { if (!passwordForm.value.oldPassword || passwordForm.value.newPassword.length < 6) { ui.toast('请填写正确的密码'); return } try { await request.post(urls.ACCOUNT_CHANGE_PASSWORD, passwordForm.value); userStore.logout(); router.push('/login') } catch {} }
-async function revokeSession(id) { try { await request.delete(`${urls.ACCOUNT_SESSIONS}/${id}`); await loadAccountExtensions() } catch {} }
-async function revokeOthers() { try { await request.delete(urls.ACCOUNT_SESSIONS); await loadAccountExtensions() } catch {} }
-async function saveInvoiceProfile() { try { await request.post(urls.INVOICE_PROFILES, invoiceForm.value); ui.toast('默认发票资料已保存'); await loadAccountExtensions() } catch {} }
-async function createInvoiceRequest() { try { await request.post(urls.INVOICE_REQUESTS, { orderId: invoiceOrderId.value }); ui.toast('发票申请已提交，等待人工处理'); invoiceOrderId.value = 0; await loadAccountExtensions() } catch {} }
-
-async function loadOrders() { try { const page = await request.get(urls.TRAFFIC_ORDERS, { params: { pageNum: orderPageNum.value, pageSize: 10 } }); const meta = applyPage(orders, page); orderTotal.value = meta.total; orderPages.value = meta.pages } catch { orders.value = [] } }
-async function loadUsage() { try { const page = await request.get(urls.TRAFFIC_USAGE, { params: { pageNum: usagePageNum.value, pageSize: 10 } }); const meta = applyPage(usage, page); usageTotal.value = meta.total; usagePages.value = meta.pages } catch { usage.value = [] } }
-async function loadSim() { const [cards, logs] = await Promise.all([request.get(urls.SIM_CARDS, { params: { pageNum: simPageNum.value, pageSize: 10 } }), request.get(urls.SIM_RECHARGE_LOGS, { params: { pageNum: simRechargePageNum.value, pageSize: 10 } })]); const cardMeta = applyPage(simCards, cards); const logMeta = applyPage(simRechargeLogs, logs); simTotal.value = cardMeta.total; simPages.value = cardMeta.pages; simRechargeTotal.value = logMeta.total; simRechargePages.value = logMeta.pages }
-async function loadDeviceCount() { try { await deviceStore.load(); deviceCount.value = deviceStore.docks.length + deviceStore.drones.length } catch { deviceLoadFailed.value = true } }
-async function loadTrafficPackages() {
-  try {
-    const list = await request.get(urls.TRAFFIC_PACKAGES)
-    trafficPackages.value = Array.isArray(list) ? list : []
-    if (!selectedTrafficPackageId.value && trafficPackages.value.length) {
-      selectedTrafficPackageId.value = trafficPackages.value[0].id
-    }
-  } catch {
-    trafficPackages.value = []
-  }
-}
-async function loadSimPackages() {
-  try {
-    const list = await request.get(urls.SIM_PACKAGES)
-    simPackages.value = Array.isArray(list) ? list : []
-  } catch {
-    simPackages.value = []
-  }
-}
-async function load() {
-  const results = await Promise.allSettled([
-    loadProfile(),
-    request.get(urls.TRAFFIC_BALANCE).then((data) => { balance.value = data?.balanceGb == null ? '--' : Number(data.balanceGb).toFixed(1) }),
-    loadOrders(),
-    loadUsage(),
-    loadSim(),
-    loadDeviceCount(),
-    loadAccountExtensions(),
-    loadTrafficPackages(),
-    loadSimPackages()
-  ])
-  if (results.some((result) => result.status === 'rejected')) ui.toast('部分账户数据加载失败')
-}
-async function createTrafficOrderAndPay() {
-  if (!selectedTrafficPackageId.value) {
-    ui.toast('请选择流量套餐')
-    return
-  }
-  trafficOrdering.value = true
-  let orderCreated = false
-  try {
-    const order = await request.post(urls.TRAFFIC_ORDERS, {
-      packageId: Number(selectedTrafficPackageId.value)
-    })
-    orderCreated = true
-    orderPageNum.value = 1
-    const payment = await createPayment('traffic_order', order.id)
-    openPaymentDialog(payment, {
-      title: '云媒体流量支付',
-      businessType: 'traffic_order',
-      businessOrderId: order.id
-    })
-    await Promise.all([loadOrders(), request.get(urls.TRAFFIC_BALANCE).then((data) => {
-      balance.value = data?.balanceGb == null ? '--' : Number(data.balanceGb).toFixed(1)
-    })])
-  } catch (error) {
-    ui.toast(error.message || '购买失败')
-    if (orderCreated) {
-      orderPageNum.value = 1
-      await loadOrders()
-    }
-  } finally {
-    trafficOrdering.value = false
-  }
-}
-async function payTrafficOrder(row) {
-  payingOrderId.value = row.id
-  try {
-    const payment = await createPayment('traffic_order', row.id)
-    openPaymentDialog(payment, {
-      title: '云媒体流量支付',
-      businessType: 'traffic_order',
-      businessOrderId: row.id
-    })
-    await loadOrders()
-  } catch (error) {
-    ui.toast(error.message || '发起支付失败')
-  } finally {
-    payingOrderId.value = 0
-  }
-}
-async function cancelTrafficOrder(id) {
-  const ok = await ui.confirm('取消该流量订单？', '仅待支付/支付中订单可取消。', ['订单将关闭', '可重新选择套餐下单'])
-  if (!ok) return
-  try {
-    await request.delete(urls.TRAFFIC_ORDER(id))
-    ui.toast('订单已取消')
-    await loadOrders()
-  } catch (error) {
-    ui.toast(error.message || '取消失败')
-  }
-}
-function openSimRecharge(card) {
-  simRechargeCard.value = card
-  selectedSimPackageId.value = simPackages.value[0]?.id || 0
-  simRechargeOpen.value = true
-}
-function mapPendingSimOrder(order) {
-  if (!order?.id) return null
-  return {
-    id: order.id,
-    simCardId: order.simCardId,
-    amountGb: order.amountGb,
-    totalFeeFen: order.totalFeeFen ?? order.totalPriceFen ?? null,
-    paymentStatus: order.paymentStatus || order.payStatus || 'unpaid'
-  }
-}
-function upsertPendingSimOrder(order) {
-  const mapped = mapPendingSimOrder(order)
-  if (!mapped?.simCardId) return null
-  const next = { ...pendingSimOrdersByCard.value }
-  if (mapped.paymentStatus === 'paid' || mapped.paymentStatus === 'cancelled' || mapped.paymentStatus === 'closed') {
-    delete next[String(mapped.simCardId)]
-  } else {
-    next[String(mapped.simCardId)] = mapped
-  }
-  pendingSimOrdersByCard.value = next
-  return mapped
-}
-function removePendingSimOrder(simCardId) {
-  if (simCardId == null) return
-  const next = { ...pendingSimOrdersByCard.value }
-  delete next[String(simCardId)]
-  pendingSimOrdersByCard.value = next
-}
-function findPendingSimOrderForCard(simCardId) {
-  if (simCardId == null) return null
-  return pendingSimOrdersByCard.value[String(simCardId)] || null
-}
-async function refreshPendingSimOrder(orderId) {
-  if (!orderId) return
-  try {
-    const order = await request.get(urls.SIM_RECHARGE_ORDER(orderId))
-    upsertPendingSimOrder(order)
-  } catch {
-    // keep local pending if refresh fails
-  }
-}
-async function payPendingSimOrder(order) {
-  if (!order?.id || !(order.paymentStatus === 'unpaid' || order.paymentStatus === 'processing')) return
-  payingPendingSimId.value = order.id
-  try {
-    const payment = await createPayment('sim_recharge_order', order.id)
-    openPaymentDialog(payment, {
-      title: '通信卡充值支付',
-      businessType: 'sim_recharge_order',
-      businessOrderId: order.id
-    })
-    await refreshPendingSimOrder(order.id, order.simCardId)
-    await loadSim()
-  } catch (error) {
-    ui.toast(error.message || '发起支付失败')
-    await refreshPendingSimOrder(order.id, order.simCardId)
-  } finally {
-    payingPendingSimId.value = 0
-  }
-}
-async function cancelPendingSimOrder(order) {
-  if (!order?.id || !(order.paymentStatus === 'unpaid' || order.paymentStatus === 'processing')) return
-  const ok = await ui.confirm('取消该通信卡充值订单？', '仅待支付/支付中订单可取消。', ['订单将关闭', '可重新选择套餐充值'])
-  if (!ok) return
-  cancellingPendingSimId.value = order.id
-  try {
-    await request.delete(urls.SIM_RECHARGE_ORDER(order.id))
-    removePendingSimOrder(order.simCardId)
-    ui.toast('充值订单已取消')
-    await loadSim()
-  } catch (error) {
-    ui.toast(error.message || '取消失败')
-    await refreshPendingSimOrder(order.id, order.simCardId)
-  } finally {
-    cancellingPendingSimId.value = 0
-  }
-}
-async function submitSimRecharge() {
-  if (!simRechargeCard.value?.id) return
-  if (!selectedSimPackageId.value) {
-    ui.toast('请选择套餐')
-    return
-  }
-  simRecharging.value = true
-  let orderCreated = false
-  try {
-    const order = await request.post(
-      urls.SIM_CARD_RECHARGE_ORDERS(simRechargeCard.value.id),
-      { packageId: Number(selectedSimPackageId.value) }
-    )
-    orderCreated = true
-    upsertPendingSimOrder(order)
-    const payment = await createPayment('sim_recharge_order', order.id)
-    openPaymentDialog(payment, {
-      title: '通信卡充值支付',
-      businessType: 'sim_recharge_order',
-      businessOrderId: order.id
-    })
-    simRechargeOpen.value = false
-    await refreshPendingSimOrder(order.id, order.simCardId)
-    await loadSim()
-  } catch (error) {
-    const message = error.message || '充值下单失败'
-    const pendingForCard = findPendingSimOrderForCard(simRechargeCard.value?.id)
-    if (!orderCreated && /pending|未结|待支付|已有/.test(message) && pendingForCard) {
-      ui.toast(`${message}；可先完成或取消上方待支付订单`)
-    } else {
-      ui.toast(message)
-    }
-    if (orderCreated) {
-      simRechargeOpen.value = false
-      await loadSim()
-    }
-  } finally {
-    simRecharging.value = false
-  }
-}
-async function saveProfile() { saving.value = true; try { const updated = await request.put(urls.ACCOUNT_PROFILE, editForm.value); profile.value = updated; userStore.user = { ...(userStore.user || {}), ...updated }; localStorage.setItem('user', JSON.stringify(userStore.user)); editOpen.value = false; ui.toast('账户资料已保存') } catch (error) { ui.toast(error.message || '保存账户资料失败') } finally { saving.value = false } }
-onMounted(load)
-</script>
-
-<style scoped>
-
-.business-tdesign-tabs :deep(.t-tabs__nav-container) {
-  padding: 0 18px;
-}
-.business-tdesign-tabs :deep(.t-tabs__nav-wrap) {
-  margin-left: 0;
-}
-.account-panel :deep(.t-table) {
-  background: transparent;
-}
-.account-panel :deep(em) {
-  font-style: normal;
-  color: var(--green);
-  font-size: 10px;
-  font-weight: 500;
-}
-.account-panel :deep(em.processing) {
-  color: #a46924;
-}
-.account-panel :deep(.t-table td small) {
-  display: block;
-  margin-top: 4px;
-  color: var(--muted);
-  font-size: 10px;
-}
-
-.traffic-amount-input {
-  height: 46px;
-  display: flex;
-  align-items: center;
-  border: 1px solid #cfdae2;
-  border-radius: 4px;
-  overflow: hidden;
-}
-.traffic-amount-input :deep(.t-input-number) {
-  flex: 1;
-  width: auto;
-  height: 100%;
-}
-.traffic-amount-input :deep(.t-input) {
-  height: 100%;
-  border: 0;
-  border-radius: 0;
-  box-shadow: none;
-  font-size: 19px;
-}
-.traffic-amount-input :deep(.t-input:focus),
-.traffic-amount-input :deep(.t-is-focused) {
-  box-shadow: none;
-  border-color: transparent;
-}
-.traffic-amount-input b {
-  padding: 0 13px;
-  color: #6c7d88;
-  font-size: 12px;
-  font-weight: 500;
-  flex-shrink: 0;
-}
-.traffic-amount-block :deep(.t-input),
-.traffic-amount-block :deep(.t-select),
-.traffic-order-summary :deep(.t-select) {
-  width: 100%;
-}
-.traffic-amount-block > label {
-  display: block;
-  margin-bottom: 12px;
-}
-.pending-sim-order {
-  margin: 12px 0 4px;
-  padding: 12px 14px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  border: 1px solid #f0d7a8;
-  border-radius: 5px;
-  background: #fff8ea;
-}
-.pending-sim-order strong {
-  display: block;
-  color: #8a5a12;
-  font-size: 12px;
-}
-.pending-sim-order small {
-  display: block;
-  margin-top: 4px;
-  color: #95631d;
-  font-size: 11px;
-}
-.traffic-order-summary :deep(.t-select) {
-  margin: 10px 0 14px;
-}
-.package-card-grid {
-  display: grid !important;
-  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
-  gap: 10px;
-  width: 100%;
-  height: auto !important;
-  min-height: 0 !important;
-  max-height: none !important;
-  overflow: visible !important;
-  align-items: stretch !important;
-  border: 0 !important;
-  background: transparent !important;
-  padding: 2px;
-}
-.package-card-grid :deep(.t-radio) {
-  margin: 0;
-  width: 100%;
-  height: auto !important;
-  min-height: 0;
-  overflow: visible;
-  border: 1px solid #cfdae2;
-  border-radius: 6px;
-  background: #fff;
-  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
-}
-.package-card-grid :deep(.t-radio__former) {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  pointer-events: none;
-}
-.package-card-grid :deep(.t-radio__input) {
-  display: none !important;
-}
-.package-card-grid :deep(.t-radio__label) {
-  display: block;
-  width: 100%;
-  height: auto;
-  padding: 0 !important;
-  margin: 0 !important;
-  line-height: normal;
-}
-.package-card-body {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  padding: 14px 14px 12px;
-  min-height: 108px;
-  box-sizing: border-box;
-}
-.package-card-body strong {
-  color: #304552;
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 1.3;
-}
-.package-card-body b {
-  color: #246fae;
-  font-size: 20px;
-  font-weight: 600;
-  line-height: 1.15;
-  padding: 0 !important;
-}
-.package-card-body em {
-  font-style: normal;
-  color: #3b4d58;
-  font-size: 13px;
-  font-weight: 600;
-  line-height: 1.3;
-}
-.package-card-body small {
-  color: #74838d;
-  font-size: 10px;
-  line-height: 1.3;
-}
-.package-card-grid :deep(.t-is-checked) {
-  border-color: #3b8fd4;
-  background: #f3f8fc;
-  box-shadow: inset 0 0 0 1px #3b8fd4;
-}
-.package-card-grid :deep(.t-radio:hover) {
-  border-color: #8fb8da;
-}
-.package-card-grid :deep(.t-is-disabled) {
-  opacity: .6;
-}
-.pay-qr-panel { display: flex; flex-direction: column; gap: 14px; }
-.pay-qr-amount span { display: block; color: var(--muted); font-size: 10px; }
-.pay-qr-amount strong { display: block; margin-top: 4px; color: #246fae; font-size: 28px; font-weight: 600; }
-.pay-qr-meta { margin: 0; display: grid; gap: 6px; }
-.pay-qr-meta > div { display: flex; gap: 10px; font-size: 12px; }
-.pay-qr-meta dt { width: 48px; color: #74838d; }
-.pay-qr-meta dd { margin: 0; color: #304552; word-break: break-all; }
-.pay-qr-code { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px; border: 1px solid #d7e4ee; border-radius: 5px; background: #f5f9fc; }
-.pay-qr-code img { width: 220px; height: 220px; object-fit: contain; background: #fff; }
-.pay-qr-code small { color: #74838d; font-size: 11px; }
-.pay-qr-error { margin: 0; padding: 12px; border-radius: 5px; background: #fff5f5; color: #bd4046; font-size: 12px; }
-</style>
-
-<style>
-.recharge-modal .t-input {
-  width: 100%;
-}
-.recharge-modal.t-dialog label,
-.recharge-modal label {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  margin: 12px 0 0;
-  color: #4e5f6b;
-  font-size: 12px;
-}
-.recharge-modal.t-dialog .t-dialog__footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-}
-.recharge-modal .package-card-grid {
-  margin-top: 4px;
-}
+<template>
+  <section class="operation-page">
+    <header class="operation-page-header"><div><h1>账户中心</h1><span>管理云媒体流量、通信卡和账户资料</span></div></header>
+
+    <div class="business-metric-band account-metrics">
+      <div><span>账户</span><strong>{{ profileName }}</strong><small>{{ accountStatus }}</small></div>
+      <div><span>云媒体流量</span><strong>{{ balance }}</strong><small>GB</small></div>
+      <div><span>通信卡</span><strong>{{ simTotal }}</strong><small>张</small></div>
+      <div><span>接入设备</span><strong>{{ deviceCount }}</strong><small>{{ deviceLoadFailed ? '加载失败' : '机巢 + 无人机' }}</small></div>
+    </div>
+
+    <div class="business-workspace">
+      <t-tabs v-model="tab" class="business-tdesign-tabs">
+        <t-tab-panel value="overview" label="概览" :destroy-on-hide="false" />
+        <t-tab-panel value="traffic" label="云媒体流量" :destroy-on-hide="false" />
+        <t-tab-panel value="sim" label="通信卡" :destroy-on-hide="false" />
+        <t-tab-panel value="security" label="账号安全" :destroy-on-hide="false" />
+        <t-tab-panel value="invoice" label="发票管理" :destroy-on-hide="false" />
+      </t-tabs>
+
+      <div class="business-panel account-panel" :class="{ active: tab === 'overview' }">
+        <div class="account-overview-grid">
+          <section class="account-info-block">
+            <div class="account-section-heading"><h2>账户资料</h2><span>以账户资料为准</span></div>
+            <div class="tenant-identity">
+              <span>{{ profileInitial }}</span>
+              <div><strong>{{ profileName }}</strong><small>账户角色 · {{ profileRole }}</small></div>
+              <t-button variant="text" theme="primary" @click="editOpen = true">编辑</t-button>
+            </div>
+            <dl class="account-details">
+              <div><dt>账户名称</dt><dd>{{ profileName }}</dd></div>
+              <div><dt>联系电话</dt><dd>{{ profilePhone }}</dd></div>
+              <div><dt>邮箱</dt><dd>{{ profileEmail }}</dd></div>
+              <div><dt>注册时间</dt><dd>{{ createdAt }}</dd></div>
+            </dl>
+          </section>
+          <section class="account-info-block">
+            <div class="account-section-heading"><h2>资源概览</h2><span>实时账户数据</span></div>
+            <div class="resource-progress resource-values">
+              <div><span>云媒体流量 <b>{{ balance }} GB</b></span></div>
+              <div><span>通信卡 <b>{{ activeSimCount }} 张正常 / {{ simTotal }} 张</b></span></div>
+              <div><span>接入设备 <b>{{ resourceSummary ? `${resourceSummary.dockCount} 个机巢 / ${resourceSummary.droneCount} 架无人机` : deviceCount }}</b></span></div>
+              <div><span>视频资产 <b>{{ resourceSummary?.videoCount ?? '--' }} 个 / 本月下载 {{ resourceSummary?.monthDownloadCount ?? '--' }} 次</b></span></div>
+              <div><span>本月媒体流量 <b>{{ resourceSummary ? `${Number(resourceSummary.monthUsageGb).toFixed(2)} GB` : '--' }}</b></span></div>
+            </div>
+            <div class="account-card-actions"><t-button theme="primary" @click="tab = 'traffic'">查看流量订单</t-button><t-button variant="outline" @click="tab = 'sim'">管理通信卡</t-button></div>
+          </section>
+        </div>
+      </div>
+
+      <div class="business-panel account-panel" :class="{ active: tab === 'traffic' }" style="padding:18px">
+        <div class="traffic-balance-card"><span>当前云媒体流量余额</span><strong>{{ balance }} <small>GB</small></strong><p>流量用于直播、回放与原始素材下载</p></div>
+        <div class="traffic-purchase-layout" style="margin-top:16px">
+          <div class="traffic-amount-block">
+            <label>
+              <span>选择流量套餐</span>
+              <t-radio-group
+                class="package-card-grid"
+                v-model="selectedTrafficPackageId"
+                :disabled="!trafficPackages.length || trafficOrdering"
+              >
+                <t-radio
+                  v-for="pkg in trafficPackages"
+                  :key="pkg.id"
+                  class="package-card"
+                  :value="pkg.id"
+                >
+                  <span class="package-card-body">
+                    <strong>{{ pkg.name }}</strong>
+                    <b>{{ (Number(pkg.amountBytes) / 1024 / 1024 / 1024).toFixed(0) }} GB</b>
+                    <em>{{ money(pkg.price) }}</em>
+                    <small v-if="pkg.validityDays">有效期 {{ pkg.validityDays }} 天</small>
+                    <small v-else>长期有效</small>
+                  </span>
+                </t-radio>
+              </t-radio-group>
+              <small v-if="!trafficPackages.length">暂无可用套餐</small>
+            </label>
+          </div>
+          <div class="traffic-order-summary">
+            <span>订单概要</span>
+            <strong>云媒体流量订单</strong>
+            <b v-if="selectedTrafficPackage">{{ money(selectedTrafficPackage.price) }}</b>
+            <small>创建订单后发起微信支付；金额以服务端订单为准。</small>
+            <t-button
+              theme="primary"
+              :loading="trafficOrdering"
+              :disabled="!selectedTrafficPackageId || !trafficPackages.length"
+              @click="createTrafficOrderAndPay"
+            >购买并支付</t-button>
+          </div>
+        </div>
+        <div class="account-subsection-title"><h3>订单记录</h3><span>共 {{ orderTotal }} 条</span></div>
+        <t-table row-key="id" :data="orders" :columns="orderColumns" empty="暂无流量订单">
+          <template #content="{ row }">{{ orderContentLabel(row) }}</template>
+          <template #unitPrice="{ row }">{{ money(row.unitPrice) }}</template>
+          <template #totalPrice="{ row }"><strong>{{ money(row.totalPrice) }}</strong></template>
+          <template #payStatus="{ row }"><em :class="{ processing: row.payStatus === 'unpaid' || row.payStatus === 'processing' }">{{ payStatusName(row.payStatus) }}</em></template>
+          <template #createdAt="{ row }">{{ fmtTime(row.createdAt) }}</template>
+          <template #actions="{ row }">
+            <t-button
+              v-if="isTrafficOrderActionable(row)"
+              variant="text"
+              theme="primary"
+              :loading="payingOrderId === row.id"
+              @click="payTrafficOrder(row)"
+            >去支付</t-button>
+            <t-button
+              v-if="isTrafficOrderActionable(row)"
+              variant="text"
+              theme="danger"
+              @click="cancelTrafficOrder(row.id)"
+            >取消</t-button>
+            <span v-else>--</span>
+          </template>
+        </t-table>
+        <div class="table-footer" v-if="orderTotal"><t-pagination v-model:current="orderPageNum" :total="orderTotal" :page-size="10" @current-change="loadOrders" /></div>
+        <div class="account-subsection-title"><h3>消费明细</h3><span>共 {{ usageTotal }} 条</span></div>
+        <t-table row-key="id" :data="usage" :columns="usageColumns" empty="暂无流量消费记录">
+          <template #sourceType="{ row }">{{ sourceName(row.sourceType) }}</template>
+          <template #sourceId="{ row }">{{ row.sourceId || '--' }}</template>
+          <template #bytesUsed="{ row }"><strong>{{ fmtGb(row.bytesUsed) }}</strong></template>
+          <template #balanceBefore="{ row }">{{ fmtGb(row.balanceBefore) }}</template>
+          <template #balanceAfter="{ row }">{{ fmtGb(row.balanceAfter) }}</template>
+          <template #createdAt="{ row }">{{ fmtTime(row.createdAt) }}</template>
+        </t-table>
+        <div class="table-footer" v-if="usageTotal"><t-pagination v-model:current="usagePageNum" :total="usageTotal" :page-size="10" @current-change="loadUsage" /></div>
+        <div class="account-subsection-title"><h3>下载记录</h3><span>共 {{ downloadTotal }} 条</span></div>
+        <t-table row-key="id" :data="downloads" :columns="downloadColumns" empty="暂无下载记录">
+          <template #fileName="{ row }"><strong>{{ row.fileName || '--' }}</strong></template>
+          <template #droneSn="{ row }">{{ row.droneSn || '--' }}</template>
+          <template #executionId="{ row }">{{ row.executionId || '--' }}</template>
+          <template #bytes="{ row }">{{ fmtGb(row.bytes) }}</template>
+          <template #createdAt="{ row }">{{ fmtTime(row.createdAt) }}</template>
+        </t-table>
+      </div>
+
+      <div class="business-panel account-panel" :class="{ active: tab === 'sim' }" style="padding:16px">
+        <div class="communication-status-grid"><div><strong>{{ simTotal }}</strong><span>通信卡总数</span></div><div><strong>{{ activeSimCount }}</strong><span>正常</span></div><div><strong>{{ warnSimCount }}</strong><span>异常或未同步</span></div></div>
+        <div class="account-card-actions"><t-button theme="primary" @click="openSimAdd">新增通信卡</t-button></div>
+        <t-table row-key="id" :data="simCards" :columns="simColumns" empty="暂无通信卡">
+          <template #carrier="{ row }"><strong>{{ row.carrier || '--' }}</strong></template>
+          <template #iccid="{ row }"><strong>{{ row.iccid || '--' }}</strong><small>{{ row.phone || '--' }}</small></template>
+          <template #dockId="{ row }">{{ row.dockId || '--' }}</template>
+          <template #usage="{ row }">{{ row.lastSyncAt ? `${Number(row.usedGb || 0).toFixed(1)} / ${row.planGb || 0} GB` : '暂无运营商同步数据' }}</template>
+          <template #status="{ row }"><span class="carrier-status" :class="simStatus(row).cls"><i></i>{{ simStatus(row).name }}</span></template>
+          <template #lastSyncAt="{ row }">{{ fmtTime(row.lastSyncAt) }}</template>
+          <template #actions="{ row }">
+            <t-button
+              variant="text"
+              theme="primary"
+              :loading="syncingSimId === String(row.id)"
+              @click="syncSimCard(row)"
+            >同步</t-button>
+            <t-button variant="text" theme="danger" @click="deleteSimCard(row)">删除</t-button>
+          </template>
+        </t-table>
+        <div class="table-footer" v-if="simTotal"><t-pagination v-model:current="simPageNum" :total="simTotal" :page-size="10" @current-change="loadSim" /></div>
+        <div
+          v-for="order in actionablePendingSimOrders"
+          :key="order.id"
+          class="pending-sim-order"
+        >
+          <div>
+            <strong>待支付通信卡充值</strong>
+            <small>
+              {{ cardLabel(order.simCardId) }}
+              · {{ order.amountGb != null ? `${order.amountGb} GB` : '--' }}
+              · {{ moneyFromFen(order.totalFeeFen) }}
+              · {{ payStatusName(order.paymentStatus) }}
+            </small>
+          </div>
+          <div class="account-card-actions" style="margin-top:0">
+            <t-button
+              variant="text"
+              theme="primary"
+              :loading="payingPendingSimId === order.id"
+              @click="payPendingSimOrder(order)"
+            >去支付</t-button>
+            <t-button
+              variant="text"
+              theme="danger"
+              :loading="cancellingPendingSimId === order.id"
+              @click="cancelPendingSimOrder(order)"
+            >取消</t-button>
+          </div>
+        </div>
+        <div class="account-subsection-title"><h3>通信卡充值记录</h3><span>共 {{ simRechargeTotal }} 条</span></div>
+        <t-table row-key="id" :data="simRechargeLogs" :columns="simRechargeColumns" empty="暂无通信卡充值记录">
+          <template #simCardId="{ row }">{{ row.carrierSnapshot || '--' }} · {{ row.iccidSnapshot || row.simCardId || '--' }}</template>
+          <template #amountGb="{ row }"><strong>{{ row.amountGb }} GB</strong></template>
+          <template #totalPrice="{ row }"><strong>{{ money(row.totalPrice) }}</strong></template>
+          <template #payStatus="{ row }"><em>{{ payStatusName(row.payStatus || row.paymentStatus) }}</em></template>
+          <template #rechargeStatus="{ row }"><em :class="{ processing: row.rechargeStatus === 'pending' }">{{ rechargeStatusName(row.rechargeStatus) }}</em></template>
+          <template #createdAt="{ row }">{{ fmtTime(row.createdAt) }}</template>
+        </t-table>
+        <div class="table-footer" v-if="simRechargeTotal"><t-pagination v-model:current="simRechargePageNum" :total="simRechargeTotal" :page-size="10" @current-change="loadSim" /></div>
+      </div>
+
+      <div class="business-panel account-panel" :class="{ active: tab === 'security' }" style="padding:18px">
+        <div class="account-section-heading"><h2>账号安全</h2><span>修改密码后将退出所有设备</span></div>
+        <div class="security-list">
+          <div><span><strong>登录手机号</strong><small>{{ maskPhone(profilePhone) }}</small></span></div>
+          <div><span><strong>绑定邮箱</strong><small>{{ profileEmail }}</small></span></div>
+          <div><span><strong>登录会话</strong><small>共 {{ sessions.length }} 个有效会话</small></span><t-button variant="outline" @click="revokeOthers">退出其他设备</t-button></div>
+        </div>
+        <t-table row-key="id" :data="sessions" :columns="sessionColumns" empty="暂无有效会话">
+          <template #device="{ row }">{{ row.userAgent || '未知设备' }}{{ row.current ? '（当前）' : '' }}</template>
+          <template #ip="{ row }">{{ row.ip || '--' }}</template>
+          <template #lastActiveAt="{ row }">{{ fmtTime(row.lastActiveAt) }}</template>
+          <template #expiresAt="{ row }">{{ fmtTime(row.expiresAt) }}</template>
+          <template #actions="{ row }">
+            <t-button v-if="!row.current" variant="text" theme="primary" @click="revokeSession(row.id)">退出</t-button>
+            <span v-else>当前会话</span>
+          </template>
+        </t-table>
+        <div class="account-card-actions"><t-button theme="primary" @click="passwordOpen = true">修改密码</t-button></div>
+      </div>
+
+      <div class="business-panel account-panel" :class="{ active: tab === 'invoice' }" style="padding:18px">
+        <div class="account-section-heading"><h2>发票资料与申请</h2><span>仅对已人工确认的流量订单开放申请</span></div>
+        <div class="traffic-purchase-layout">
+          <div class="traffic-amount-block">
+            <label><span>发票抬头</span><t-input v-model.trim="invoiceForm.title" :maxlength="128" /></label>
+            <label><span>纳税人识别号</span><t-input v-model.trim="invoiceForm.taxpayerNumber" :maxlength="64" /></label>
+            <label><span>接收邮箱</span><t-input v-model.trim="invoiceForm.email" type="email" /></label>
+            <t-button theme="primary" @click="saveInvoiceProfile">保存默认发票资料</t-button>
+          </div>
+          <div class="traffic-order-summary">
+            <span>可申请订单</span>
+            <t-select v-model="invoiceOrderId" :options="invoiceOrderOptions" style="width: 100%" />
+            <t-button theme="primary" :disabled="!invoiceOrderId" @click="createInvoiceRequest">提交开具发票</t-button>
+          </div>
+        </div>
+        <div class="account-subsection-title"><h3>发票记录</h3><span>仅展示已提交的开具申请</span></div>
+        <t-table row-key="id" :data="invoiceRequests" :columns="invoiceColumns" empty="暂无发票申请">
+          <template #orderId="{ row }">{{ row.orderId }}</template>
+          <template #amount="{ row }"><strong>{{ money(row.amount) }}</strong></template>
+          <template #title="{ row }">{{ row.title }}</template>
+          <template #status="{ row }"><em :class="{ processing: row.status === 'pending' }">{{ invoiceStatusName(row.status) }}</em></template>
+          <template #requestedAt="{ row }">{{ fmtTime(row.requestedAt) }}</template>
+        </t-table>
+      </div>
+    </div>
+
+    <t-dialog
+      v-model:visible="editOpen"
+      header="编辑账户资料"
+      width="440px"
+      destroy-on-close
+      dialog-class-name="recharge-modal"
+      placement="center"
+    >
+      <label><span>账户名称</span><t-input v-model.trim="editForm.name" :maxlength="32" /></label>
+      <label><span>邮箱</span><t-input v-model.trim="editForm.email" type="email" /></label>
+      <template #footer>
+        <t-button variant="outline" @click="editOpen = false">取消</t-button>
+        <t-button theme="primary" :disabled="saving" :loading="saving" @click="saveProfile">{{ saving ? '保存中…' : '保存' }}</t-button>
+      </template>
+    </t-dialog>
+    <t-dialog
+      v-model:visible="passwordOpen"
+      header="修改密码"
+      width="440px"
+      destroy-on-close
+      dialog-class-name="recharge-modal"
+      placement="center"
+    >
+      <label><span>当前密码</span><t-input v-model="passwordForm.oldPassword" type="password" /></label>
+      <label><span>新密码</span><t-input v-model="passwordForm.newPassword" type="password" /></label>
+      <template #footer>
+        <t-button variant="outline" @click="passwordOpen = false">取消</t-button>
+        <t-button theme="primary" @click="changePassword">确认修改</t-button>
+      </template>
+    </t-dialog>
+    <t-dialog v-model:visible="simAddOpen" header="新增通信卡" width="440px" destroy-on-close><label><span>ICCID<b>*</b></span><t-input v-model="simAddForm.iccid" placeholder="请输入通信卡 ICCID" /></label><label><span>绑定机巢</span><t-input v-model="simAddForm.dockId" placeholder="可选" /></label><template #footer><t-button variant="outline" @click="simAddOpen=false">取消</t-button><t-button theme="primary" @click="submitSimAdd">确认添加</t-button></template></t-dialog>
+    <t-dialog
+      v-model:visible="simRechargeOpen"
+      header="通信卡充值"
+      width="480px"
+      destroy-on-close
+      dialog-class-name="recharge-modal"
+      placement="center"
+    >
+      <p>ICCID：{{ simRechargeCard?.iccid || '--' }}</p>
+      <label>
+        <span>选择套餐</span>
+        <t-radio-group
+          class="package-card-grid"
+          v-model="selectedSimPackageId"
+          :disabled="!simPackages.length || simRecharging"
+        >
+          <t-radio
+            v-for="pkg in simPackages"
+            :key="pkg.id"
+            class="package-card"
+            :value="pkg.id"
+          >
+            <span class="package-card-body">
+              <strong>{{ pkg.name }}</strong>
+              <b>{{ pkg.amountGb }} GB</b>
+              <em>{{ moneyFromFen(pkg.saleFeeFen) }}</em>
+              <small v-if="pkg.validityMonths">有效期 {{ pkg.validityMonths }} 个月</small>
+              <small v-else>按运营商规则</small>
+            </span>
+          </t-radio>
+        </t-radio-group>
+        <small v-if="!simPackages.length">暂无可用通信卡套餐</small>
+      </label>
+      <template #footer>
+        <t-button variant="outline" @click="simRechargeOpen = false">取消</t-button>
+        <t-button
+          theme="primary"
+          :loading="simRecharging"
+          :disabled="!selectedSimPackageId || !simPackages.length"
+          @click="submitSimRecharge"
+        >创建并支付</t-button>
+      </template>
+    </t-dialog>
+    <t-dialog
+      v-model:visible="payDialogOpen"
+      :header="payDialog.title"
+      width="420px"
+      destroy-on-close
+      dialog-class-name="recharge-modal pay-qr-modal"
+      placement="center"
+    >
+      <div class="pay-qr-panel">
+        <div class="pay-qr-amount">
+          <span>应付金额</span>
+          <strong>{{ payDialog.amountText }}</strong>
+        </div>
+        <dl class="pay-qr-meta">
+          <div><dt>业务</dt><dd>{{ payDialog.businessType === 'sim_recharge_order' ? '通信卡充值' : '云媒体流量' }}</dd></div>
+          <div><dt>订单号</dt><dd>{{ payDialog.businessOrderId || '--' }}</dd></div>
+          <div><dt>支付单</dt><dd>{{ payDialog.transactionId || '--' }}</dd></div>
+          <div><dt>状态</dt><dd>{{ payDialog.statusText || '--' }}</dd></div>
+        </dl>
+        <div class="pay-qr-code" v-if="payDialog.qrSrc">
+          <img :src="payDialog.qrSrc" alt="支付二维码" />
+          <small>请使用微信扫码支付</small>
+        </div>
+        <p class="pay-qr-error" v-else>{{ payDialog.error || '暂无二维码' }}</p>
+      </div>
+      <template #footer>
+        <t-button variant="outline" @click="payDialogOpen = false">关闭</t-button>
+        <t-button
+          theme="primary"
+          :loading="payDialogRefreshing"
+          :disabled="!payDialog.transactionId"
+          @click="refreshPaymentStatus"
+        >我已支付，刷新状态</t-button>
+      </template>
+    </t-dialog>
+  </section>
+</template>
+
+<script setup>
+import { computed, onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useUserStore } from '@/stores/modules/userStore'
+import { useUiStore } from '@/stores/modules/uiStore'
+import { useDeviceStore } from '@/stores/modules/devicesStore'
+import request from '@/utils/http'
+import * as urls from '@/config/urls'
+
+const userStore = useUserStore()
+const router = useRouter()
+const ui = useUiStore()
+const deviceStore = useDeviceStore()
+const tab = ref('overview')
+const profile = ref(null)
+const balance = ref('--')
+const deviceCount = ref('--')
+const deviceLoadFailed = ref(false)
+const resourceSummary = ref(null)
+const downloads = ref([]); const downloadTotal = ref(0)
+const trafficPackages = ref([])
+const selectedTrafficPackageId = ref(0)
+const trafficOrdering = ref(false)
+const payingOrderId = ref(0)
+const sessions = ref([])
+const invoiceProfiles = ref([]); const invoiceOrders = ref([]); const invoiceRequests = ref([]); const invoiceOrderId = ref(0)
+const invoiceForm = ref({ title: '', taxpayerNumber: '', email: '', isDefault: true })
+const passwordOpen = ref(false); const passwordForm = ref({ oldPassword: '', newPassword: '' })
+const orders = ref([]); const orderTotal = ref(0); const orderPages = ref(1); const orderPageNum = ref(1)
+const usage = ref([]); const usageTotal = ref(0); const usagePages = ref(1); const usagePageNum = ref(1)
+const simCards = ref([]); const simTotal = ref(0); const simPages = ref(1); const simPageNum = ref(1)
+const simRechargeLogs = ref([]); const simRechargeTotal = ref(0); const simRechargePages = ref(1); const simRechargePageNum = ref(1)
+const simPackages = ref([])
+const syncingSimId = ref(null)
+const simAddOpen = ref(false)
+const simAddForm = ref({ iccid: '', dockId: '' })
+const simRechargeCard = ref(null)
+const selectedSimPackageId = ref(0)
+const simRecharging = ref(false)
+const pendingSimOrdersByCard = ref({})
+const payingPendingSimId = ref(0)
+const cancellingPendingSimId = ref(0)
+const payDialogOpen = ref(false)
+const payDialogRefreshing = ref(false)
+const payDialog = ref({
+  title: '微信支付',
+  businessType: '',
+  businessOrderId: 0,
+  transactionId: 0,
+  amountText: '--',
+  status: '',
+  statusText: '',
+  qrSrc: '',
+  error: ''
+})
+
+const editOpen = ref(false); const saving = ref(false); const editForm = ref({ name: '', email: '' })
+
+const orderColumns = [
+  { colKey: 'id', title: '订单号' },
+  { colKey: 'content', title: '内容' },
+  { colKey: 'unitPrice', title: '单价' },
+  { colKey: 'totalPrice', title: '金额' },
+  { colKey: 'payStatus', title: '状态' },
+  { colKey: 'createdAt', title: '时间' },
+  { colKey: 'actions', title: '操作' }
+]
+const usageColumns = [
+  { colKey: 'sourceType', title: '来源' },
+  { colKey: 'sourceId', title: '对象 ID' },
+  { colKey: 'bytesUsed', title: '用量' },
+  { colKey: 'balanceBefore', title: '扣减前' },
+  { colKey: 'balanceAfter', title: '扣减后' },
+  { colKey: 'createdAt', title: '时间' }
+]
+const downloadColumns = [
+  { colKey: 'fileName', title: '文件' },
+  { colKey: 'droneSn', title: '无人机' },
+  { colKey: 'executionId', title: '执行记录' },
+  { colKey: 'bytes', title: '下载用量' },
+  { colKey: 'createdAt', title: '时间' }
+]
+const simColumns = [
+  { colKey: 'carrier', title: '运营商' },
+  { colKey: 'iccid', title: 'ICCID / 号码' },
+  { colKey: 'dockId', title: '绑定机巢' },
+  { colKey: 'usage', title: '套餐用量' },
+  { colKey: 'status', title: '状态' },
+  { colKey: 'lastSyncAt', title: '最后同步' },
+  { colKey: 'actions', title: '操作' }
+]
+const simRechargeColumns = [
+  { colKey: 'simCardId', title: '通信卡' },
+  { colKey: 'amountGb', title: '充值流量' },
+  { colKey: 'totalPrice', title: '金额' },
+  { colKey: 'payStatus', title: '支付状态' },
+  { colKey: 'rechargeStatus', title: '充值状态' },
+  { colKey: 'createdAt', title: '时间' }
+]
+const sessionColumns = [
+  { colKey: 'device', title: '设备' },
+  { colKey: 'ip', title: 'IP' },
+  { colKey: 'lastActiveAt', title: '最近活跃' },
+  { colKey: 'expiresAt', title: '过期时间' },
+  { colKey: 'actions', title: '操作' }
+]
+const invoiceColumns = [
+  { colKey: 'orderId', title: '订单号' },
+  { colKey: 'amount', title: '金额' },
+  { colKey: 'title', title: '抬头' },
+  { colKey: 'status', title: '状态' },
+  { colKey: 'requestedAt', title: '申请时间' }
+]
+
+const profileName = computed(() => profile.value?.name || '--')
+const profilePhone = computed(() => profile.value?.phone || '--')
+const profileEmail = computed(() => profile.value?.email || '--')
+const profileRole = computed(() => profile.value?.role === 'admin' ? '管理员' : profile.value?.role === 'user' ? '普通用户' : '--')
+const accountStatus = computed(() => profile.value?.status === 1 ? '正常' : profile.value?.status === 0 ? '已禁用' : '--')
+const createdAt = computed(() => profile.value?.createdAt ? fmtTime(profile.value.createdAt) : '--')
+const profileInitial = computed(() => profileName.value === '--' ? '-' : profileName.value.charAt(0))
+const invoiceOrderOptions = computed(() => [{ label: '请选择已支付订单', value: 0 }, ...invoiceOrders.value.map((order) => ({ label: `${order.id} · ${money(order.totalPrice)}`, value: order.id }))])
+const activeSimCount = computed(() => simCards.value.filter((card) => simStatus(card).cls === 'normal').length)
+const warnSimCount = computed(() => simTotal.value - activeSimCount.value)
+const actionablePendingSimOrders = computed(() => Object.values(pendingSimOrdersByCard.value || {}).filter((order) => order?.paymentStatus === 'unpaid' || order?.paymentStatus === 'processing'))
+const selectedTrafficPackage = computed(() =>
+  trafficPackages.value.find((pkg) => String(pkg.id) === String(selectedTrafficPackageId.value)) || null
+)
+
+
+
+function applyPage(targetRef, page) {
+  const records = page?.records || []
+  targetRef.value = records
+  return { total: page?.total || 0, pages: page?.pages || 1 }
+}
+function fmtTime(value) { const date = new Date(value); return value && !Number.isNaN(date.getTime()) ? date.toLocaleString('zh-CN', { hour12: false }) : '--' }
+function fmtGb(bytes) { return bytes == null ? '--' : `${(Number(bytes) / 1024 / 1024 / 1024).toFixed(2)} GB` }
+function money(value) { return value == null ? '--' : `¥${Number(value).toFixed(2)}` }
+function moneyFromFen(fen) { return fen == null ? '--' : `¥${(Number(fen) / 100).toFixed(2)}` }
+function sourceName(type) { return ({ live: '直播', replay: '回放', download: '下载' })[type] || type || '--' }
+function payStatusName(status) {
+  return ({
+    unpaid: '待支付',
+    processing: '支付中',
+    paid: '已支付',
+    cancelled: '已取消',
+    closed: '已关闭'
+  })[status] || status || '--'
+}
+function isTrafficOrderActionable(row) {
+  return row?.payStatus === 'unpaid' || row?.payStatus === 'processing'
+}
+function paymentStatusName(status) {
+  return ({
+    unpaid: '待支付',
+    processing: '支付中',
+    paid: '已支付',
+    success: '已支付',
+    failed: '支付失败',
+    cancelled: '已取消',
+    closed: '已关闭'
+  })[status] || status || '--'
+}
+function looksLikeBase64(value) {
+  const text = String(value || '').replace(/\s+/g, '')
+  return text.length > 32 && /^[A-Za-z0-9+/=]+$/.test(text)
+}
+function resolvePaymentQrSrc(payload) {
+  if (payload == null) return ''
+  if (typeof payload !== 'string') {
+    if (typeof payload === 'object') {
+      const nested = payload.qrCode || payload.qrUrl || payload.image || payload.codeUrl || ''
+      return resolvePaymentQrSrc(nested)
+    }
+    return ''
+  }
+  const text = payload.trim()
+  if (!text) return ''
+  if (text.startsWith('data:image/')) return text
+  if (/^https?:\/\//i.test(text) || text.startsWith('/')) return text
+  if (text.startsWith('weixin://')) return ''
+  if (looksLikeBase64(text)) return `data:image/png;base64,${text.replace(/\s+/g, '')}`
+  // JSON 字符串里混入了 PNG 二进制时，尝试从 latin1 字节转 base64
+  try {
+    const bytes = Array.from(text, (ch) => ch.charCodeAt(0) & 0xff)
+    let binary = ''
+    for (let i = 0; i < bytes.length; i += 1) binary += String.fromCharCode(bytes[i])
+    if (bytes[0] === 0x89 && bytes[1] === 0x50) {
+      return `data:image/png;base64,${btoa(binary)}`
+    }
+  } catch (_) {}
+  return ''
+}
+function openPaymentDialog(payment, meta = {}) {
+  const qrSrc = resolvePaymentQrSrc(payment?.providerPayload)
+  payDialog.value = {
+    title: meta.title || '微信支付',
+    businessType: meta.businessType || payment?.businessType || '',
+    businessOrderId: meta.businessOrderId || payment?.businessOrderId || 0,
+    transactionId: payment?.transactionId || 0,
+    amountText: moneyFromFen(payment?.totalFeeFen),
+    status: payment?.status || '',
+    statusText: paymentStatusName(payment?.status),
+    qrSrc,
+    error: qrSrc ? '' : '支付已创建，但二维码无法展示；可关闭后点击「去支付」重试'
+  }
+  payDialogOpen.value = true
+  return payment
+}
+async function refreshPaymentStatus() {
+  const id = payDialog.value.transactionId
+  if (!id) {
+    ui.toast('缺少支付单号')
+    return
+  }
+  payDialogRefreshing.value = true
+  try {
+    const payment = await request.get(urls.PAYMENT(id))
+    const qrSrc = resolvePaymentQrSrc(payment?.providerPayload) || payDialog.value.qrSrc
+    payDialog.value = {
+      ...payDialog.value,
+      status: payment?.status || payDialog.value.status,
+      statusText: paymentStatusName(payment?.status || payDialog.value.status),
+      amountText: moneyFromFen(payment?.totalFeeFen) || payDialog.value.amountText,
+      qrSrc,
+      error: qrSrc ? '' : payDialog.value.error
+    }
+    const paid = payment?.status === 'paid' || payment?.status === 'success'
+    await Promise.all([
+      loadOrders(),
+      request.get(urls.TRAFFIC_BALANCE).then((data) => {
+        balance.value = data?.balanceGb == null ? '--' : Number(data.balanceGb).toFixed(1)
+      }).catch(() => {}),
+      loadSim().catch(() => {})
+    ])
+    if (paid) {
+      ui.toast('支付成功，流量/订单已刷新')
+      payDialogOpen.value = false
+    } else {
+      ui.toast(`当前状态：${paymentStatusName(payment?.status)}，如已扫码请稍后再试`)
+    }
+  } catch (error) {
+    ui.toast(error.message || '刷新支付状态失败')
+  } finally {
+    payDialogRefreshing.value = false
+  }
+}
+async function createPayment(businessType, businessOrderId) {
+  return request.post(urls.PAYMENTS, { businessType, businessOrderId })
+}
+function orderContentLabel(row) {
+  if (row?.amountGb != null) return `${row.amountGb} GB 流量`
+  if (row?.packageName) return row.packageName
+  if (row?.amountBytes != null) return fmtGb(row.amountBytes)
+  return '--'
+}
+function rechargeStatusName(status) { return ({ pending: '处理中', success: '充值成功', failed: '充值失败' })[status] || status || '--' }
+function invoiceStatusName(status) { return ({ pending: '待人工处理', issued: '已开具', rejected: '已驳回', cancelled: '已取消' })[status] || status || '--' }
+function maskPhone(phone) { const value = String(phone || ''); return value.length > 7 ? `${value.slice(0, 3)}****${value.slice(-4)}` : value || '--' }
+function simStatus(card) { if (card.status === 'expired') return { name: '已过期', cls: 'danger' }; return ({ normal: { name: '正常', cls: 'normal' }, suspended: { name: '停机', cls: 'danger' }, arrears: { name: '欠费', cls: 'danger' }, cancelled: { name: '已注销', cls: 'owned' } })[card.carrierStatus] || { name: card.lastSyncAt ? '状态未知' : '未同步', cls: 'owned' } }
+function cardLabel(id) { const card = simCards.value.find((item) => String(item.id) === String(id)); return card ? `${card.carrier || '--'} · ${card.iccid || '--'}` : String(id || '--') }
+async function loadProfile() { profile.value = await request.get(urls.ACCOUNT_PROFILE); editForm.value = { name: profile.value?.name || '', email: profile.value?.email || '' }; userStore.user = { ...(userStore.user || {}), ...profile.value }; localStorage.setItem('user', JSON.stringify(userStore.user)) }
+
+async function loadAccountExtensions() { const results = await Promise.allSettled([request.get(urls.ACCOUNT_RESOURCE_SUMMARY).then((data) => { resourceSummary.value = data }), request.get(urls.ACCOUNT_DOWNLOADS, { params: { pageNum: 1, pageSize: 10 } }).then((data) => { downloads.value = data?.records || []; downloadTotal.value = data?.total || 0 }), request.get(urls.ACCOUNT_SESSIONS).then((data) => { sessions.value = data || [] }), request.get(urls.INVOICE_PROFILES).then((data) => { invoiceProfiles.value = data || []; const profile = invoiceProfiles.value.find((item) => item.isDefault) || invoiceProfiles.value[0]; if (profile) invoiceForm.value = { ...profile, isDefault: true } }), request.get(urls.INVOICE_ORDERS).then((data) => { invoiceOrders.value = data || [] }), request.get(urls.INVOICE_REQUESTS).then((data) => { invoiceRequests.value = data || [] })]); if (results.some((result) => result.status === 'rejected')) ui.toast('部分账户扩展数据加载失败') }
+async function changePassword() { if (!passwordForm.value.oldPassword || passwordForm.value.newPassword.length < 6) { ui.toast('请填写正确的密码'); return } try { await request.post(urls.ACCOUNT_CHANGE_PASSWORD, passwordForm.value); userStore.logout(); router.push('/login') } catch {} }
+async function revokeSession(id) { try { await request.delete(`${urls.ACCOUNT_SESSIONS}/${id}`); await loadAccountExtensions() } catch {} }
+async function revokeOthers() { try { await request.delete(urls.ACCOUNT_SESSIONS); await loadAccountExtensions() } catch {} }
+async function saveInvoiceProfile() { try { await request.post(urls.INVOICE_PROFILES, invoiceForm.value); ui.toast('默认发票资料已保存'); await loadAccountExtensions() } catch {} }
+async function createInvoiceRequest() { try { await request.post(urls.INVOICE_REQUESTS, { orderId: invoiceOrderId.value }); ui.toast('发票申请已提交，等待人工处理'); invoiceOrderId.value = 0; await loadAccountExtensions() } catch {} }
+
+async function loadOrders() { try { const page = await request.get(urls.TRAFFIC_ORDERS, { params: { pageNum: orderPageNum.value, pageSize: 10 } }); const meta = applyPage(orders, page); orderTotal.value = meta.total; orderPages.value = meta.pages } catch { orders.value = [] } }
+async function loadUsage() { try { const page = await request.get(urls.TRAFFIC_USAGE, { params: { pageNum: usagePageNum.value, pageSize: 10 } }); const meta = applyPage(usage, page); usageTotal.value = meta.total; usagePages.value = meta.pages } catch { usage.value = [] } }
+async function syncSimCard(card) {
+  if (!card?.id || syncingSimId.value) return
+  syncingSimId.value = String(card.id)
+  try {
+    await request.get(urls.SIM_CARD(card.id), { params: { refresh: true } })
+    await loadSim()
+    ui.toast('通信卡信息已同步')
+  } catch (error) {
+    // HTTP 拦截器已展示失败原因；保留状态以便用户重试。
+  } finally {
+    syncingSimId.value = null
+  }
+}
+
+function openSimAdd() { simAddForm.value = { iccid: '', dockId: '' }; simAddOpen.value = true }
+async function submitSimAdd() {
+  if (!simAddForm.value.iccid.trim()) { ui.toast('请输入 ICCID'); return }
+  try { await request.post(urls.SIM_CARD_CREATE, simAddForm.value); simAddOpen.value = false; await loadSim(); ui.toast('通信卡已添加') } catch {}
+}
+
+async function deleteSimCard(card) { const ok = await ui.confirm('确认删除该通信卡？', '删除只移除通信卡主数据，充值订单、用量快照等历史记录会保留。'); if (!ok) return; try { await request.delete(urls.SIM_CARD(card.id)); await loadSim(); ui.toast('通信卡已删除') } catch {} }
+
+ { const [cards, logs] = await Promise.all([request.get(urls.SIM_CARDS, { params: { pageNum: simPageNum.value, pageSize: 10 } }), request.get(urls.SIM_RECHARGE_LOGS, { params: { pageNum: simRechargePageNum.value, pageSize: 10 } })]); const cardMeta = applyPage(simCards, cards); const logMeta = applyPage(simRechargeLogs, logs); simTotal.value = cardMeta.total; simPages.value = cardMeta.pages; simRechargeTotal.value = logMeta.total; simRechargePages.value = logMeta.pages }
+async function loadDeviceCount() { try { await deviceStore.load(); deviceCount.value = deviceStore.docks.length + deviceStore.drones.length } catch { deviceLoadFailed.value = true } }
+async function loadTrafficPackages() {
+  try {
+    const list = await request.get(urls.TRAFFIC_PACKAGES)
+    trafficPackages.value = Array.isArray(list) ? list : []
+    if (!selectedTrafficPackageId.value && trafficPackages.value.length) {
+      selectedTrafficPackageId.value = trafficPackages.value[0].id
+    }
+  } catch {
+    trafficPackages.value = []
+  }
+}
+async function loadSimPackages() {
+  try {
+    const list = await request.get(urls.SIM_PACKAGES)
+    simPackages.value = Array.isArray(list) ? list : []
+  } catch {
+    simPackages.value = []
+  }
+}
+async function load() {
+  const results = await Promise.allSettled([
+    loadProfile(),
+    request.get(urls.TRAFFIC_BALANCE).then((data) => { balance.value = data?.balanceGb == null ? '--' : Number(data.balanceGb).toFixed(1) }),
+    loadOrders(),
+    loadUsage(),
+    loadSim(),
+    loadDeviceCount(),
+    loadAccountExtensions(),
+    loadTrafficPackages(),
+    loadSimPackages()
+  ])
+  if (results.some((result) => result.status === 'rejected')) ui.toast('部分账户数据加载失败')
+}
+async function createTrafficOrderAndPay() {
+  if (!selectedTrafficPackageId.value) {
+    ui.toast('请选择流量套餐')
+    return
+  }
+  trafficOrdering.value = true
+  let orderCreated = false
+  try {
+    const order = await request.post(urls.TRAFFIC_ORDERS, {
+      packageId: Number(selectedTrafficPackageId.value)
+    })
+    orderCreated = true
+    orderPageNum.value = 1
+    const payment = await createPayment('traffic_order', order.id)
+    openPaymentDialog(payment, {
+      title: '云媒体流量支付',
+      businessType: 'traffic_order',
+      businessOrderId: order.id
+    })
+    await Promise.all([loadOrders(), request.get(urls.TRAFFIC_BALANCE).then((data) => {
+      balance.value = data?.balanceGb == null ? '--' : Number(data.balanceGb).toFixed(1)
+    })])
+  } catch (error) {
+    ui.toast(error.message || '购买失败')
+    if (orderCreated) {
+      orderPageNum.value = 1
+      await loadOrders()
+    }
+  } finally {
+    trafficOrdering.value = false
+  }
+}
+async function payTrafficOrder(row) {
+  payingOrderId.value = row.id
+  try {
+    const payment = await createPayment('traffic_order', row.id)
+    openPaymentDialog(payment, {
+      title: '云媒体流量支付',
+      businessType: 'traffic_order',
+      businessOrderId: row.id
+    })
+    await loadOrders()
+  } catch (error) {
+    ui.toast(error.message || '发起支付失败')
+  } finally {
+    payingOrderId.value = 0
+  }
+}
+async function cancelTrafficOrder(id) {
+  const ok = await ui.confirm('取消该流量订单？', '仅待支付/支付中订单可取消。', ['订单将关闭', '可重新选择套餐下单'])
+  if (!ok) return
+  try {
+    await request.delete(urls.TRAFFIC_ORDER(id))
+    ui.toast('订单已取消')
+    await loadOrders()
+  } catch (error) {
+    ui.toast(error.message || '取消失败')
+  }
+}
+function openSimRecharge(card) {
+  simRechargeCard.value = card
+  selectedSimPackageId.value = simPackages.value[0]?.id || 0
+  simRechargeOpen.value = true
+}
+function mapPendingSimOrder(order) {
+  if (!order?.id) return null
+  return {
+    id: order.id,
+    simCardId: order.simCardId,
+    amountGb: order.amountGb,
+    totalFeeFen: order.totalFeeFen ?? order.totalPriceFen ?? null,
+    paymentStatus: order.paymentStatus || order.payStatus || 'unpaid'
+  }
+}
+function upsertPendingSimOrder(order) {
+  const mapped = mapPendingSimOrder(order)
+  if (!mapped?.simCardId) return null
+  const next = { ...pendingSimOrdersByCard.value }
+  if (mapped.paymentStatus === 'paid' || mapped.paymentStatus === 'cancelled' || mapped.paymentStatus === 'closed') {
+    delete next[String(mapped.simCardId)]
+  } else {
+    next[String(mapped.simCardId)] = mapped
+  }
+  pendingSimOrdersByCard.value = next
+  return mapped
+}
+function removePendingSimOrder(simCardId) {
+  if (simCardId == null) return
+  const next = { ...pendingSimOrdersByCard.value }
+  delete next[String(simCardId)]
+  pendingSimOrdersByCard.value = next
+}
+function findPendingSimOrderForCard(simCardId) {
+  if (simCardId == null) return null
+  return pendingSimOrdersByCard.value[String(simCardId)] || null
+}
+async function refreshPendingSimOrder(orderId) {
+  if (!orderId) return
+  try {
+    const order = await request.get(urls.SIM_RECHARGE_ORDER(orderId))
+    upsertPendingSimOrder(order)
+  } catch {
+    // keep local pending if refresh fails
+  }
+}
+async function payPendingSimOrder(order) {
+  if (!order?.id || !(order.paymentStatus === 'unpaid' || order.paymentStatus === 'processing')) return
+  payingPendingSimId.value = order.id
+  try {
+    const payment = await createPayment('sim_recharge_order', order.id)
+    openPaymentDialog(payment, {
+      title: '通信卡充值支付',
+      businessType: 'sim_recharge_order',
+      businessOrderId: order.id
+    })
+    await refreshPendingSimOrder(order.id, order.simCardId)
+    await loadSim()
+  } catch (error) {
+    ui.toast(error.message || '发起支付失败')
+    await refreshPendingSimOrder(order.id, order.simCardId)
+  } finally {
+    payingPendingSimId.value = 0
+  }
+}
+async function cancelPendingSimOrder(order) {
+  if (!order?.id || !(order.paymentStatus === 'unpaid' || order.paymentStatus === 'processing')) return
+  const ok = await ui.confirm('取消该通信卡充值订单？', '仅待支付/支付中订单可取消。', ['订单将关闭', '可重新选择套餐充值'])
+  if (!ok) return
+  cancellingPendingSimId.value = order.id
+  try {
+    await request.delete(urls.SIM_RECHARGE_ORDER(order.id))
+    removePendingSimOrder(order.simCardId)
+    ui.toast('充值订单已取消')
+    await loadSim()
+  } catch (error) {
+    ui.toast(error.message || '取消失败')
+    await refreshPendingSimOrder(order.id, order.simCardId)
+  } finally {
+    cancellingPendingSimId.value = 0
+  }
+}
+async function submitSimRecharge() {
+  if (!simRechargeCard.value?.id) return
+  if (!selectedSimPackageId.value) {
+    ui.toast('请选择套餐')
+    return
+  }
+  simRecharging.value = true
+  let orderCreated = false
+  try {
+    const order = await request.post(
+      urls.SIM_CARD_RECHARGE_ORDERS(simRechargeCard.value.id),
+      { packageId: Number(selectedSimPackageId.value) }
+    )
+    orderCreated = true
+    upsertPendingSimOrder(order)
+    const payment = await createPayment('sim_recharge_order', order.id)
+    openPaymentDialog(payment, {
+      title: '通信卡充值支付',
+      businessType: 'sim_recharge_order',
+      businessOrderId: order.id
+    })
+    simRechargeOpen.value = false
+    await refreshPendingSimOrder(order.id, order.simCardId)
+    await loadSim()
+  } catch (error) {
+    const message = error.message || '充值下单失败'
+    const pendingForCard = findPendingSimOrderForCard(simRechargeCard.value?.id)
+    if (!orderCreated && /pending|未结|待支付|已有/.test(message) && pendingForCard) {
+      ui.toast(`${message}；可先完成或取消上方待支付订单`)
+    } else {
+      ui.toast(message)
+    }
+    if (orderCreated) {
+      simRechargeOpen.value = false
+      await loadSim()
+    }
+  } finally {
+    simRecharging.value = false
+  }
+}
+async function saveProfile() { saving.value = true; try { const updated = await request.put(urls.ACCOUNT_PROFILE, editForm.value); profile.value = updated; userStore.user = { ...(userStore.user || {}), ...updated }; localStorage.setItem('user', JSON.stringify(userStore.user)); editOpen.value = false; ui.toast('账户资料已保存') } catch (error) { ui.toast(error.message || '保存账户资料失败') } finally { saving.value = false } }
+onMounted(load)
+</script>
+
+<style scoped>
+
+.business-tdesign-tabs :deep(.t-tabs__nav-container) {
+  padding: 0 18px;
+}
+.business-tdesign-tabs :deep(.t-tabs__nav-wrap) {
+  margin-left: 0;
+}
+.account-panel :deep(.t-table) {
+  background: transparent;
+}
+.account-panel :deep(em) {
+  font-style: normal;
+  color: var(--green);
+  font-size: 10px;
+  font-weight: 500;
+}
+.account-panel :deep(em.processing) {
+  color: #a46924;
+}
+.account-panel :deep(.t-table td small) {
+  display: block;
+  margin-top: 4px;
+  color: var(--muted);
+  font-size: 10px;
+}
+
+.traffic-amount-input {
+  height: 46px;
+  display: flex;
+  align-items: center;
+  border: 1px solid #cfdae2;
+  border-radius: 4px;
+  overflow: hidden;
+}
+.traffic-amount-input :deep(.t-input-number) {
+  flex: 1;
+  width: auto;
+  height: 100%;
+}
+.traffic-amount-input :deep(.t-input) {
+  height: 100%;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  font-size: 19px;
+}
+.traffic-amount-input :deep(.t-input:focus),
+.traffic-amount-input :deep(.t-is-focused) {
+  box-shadow: none;
+  border-color: transparent;
+}
+.traffic-amount-input b {
+  padding: 0 13px;
+  color: #6c7d88;
+  font-size: 12px;
+  font-weight: 500;
+  flex-shrink: 0;
+}
+.traffic-amount-block :deep(.t-input),
+.traffic-amount-block :deep(.t-select),
+.traffic-order-summary :deep(.t-select) {
+  width: 100%;
+}
+.traffic-amount-block > label {
+  display: block;
+  margin-bottom: 12px;
+}
+.pending-sim-order {
+  margin: 12px 0 4px;
+  padding: 12px 14px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  border: 1px solid #f0d7a8;
+  border-radius: 5px;
+  background: #fff8ea;
+}
+.pending-sim-order strong {
+  display: block;
+  color: #8a5a12;
+  font-size: 12px;
+}
+.pending-sim-order small {
+  display: block;
+  margin-top: 4px;
+  color: #95631d;
+  font-size: 11px;
+}
+.traffic-order-summary :deep(.t-select) {
+  margin: 10px 0 14px;
+}
+.package-card-grid {
+  display: grid !important;
+  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
+  gap: 10px;
+  width: 100%;
+  height: auto !important;
+  min-height: 0 !important;
+  max-height: none !important;
+  overflow: visible !important;
+  align-items: stretch !important;
+  border: 0 !important;
+  background: transparent !important;
+  padding: 2px;
+}
+.package-card-grid :deep(.t-radio) {
+  margin: 0;
+  width: 100%;
+  height: auto !important;
+  min-height: 0;
+  overflow: visible;
+  border: 1px solid #cfdae2;
+  border-radius: 6px;
+  background: #fff;
+  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
+}
+.package-card-grid :deep(.t-radio__former) {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  pointer-events: none;
+}
+.package-card-grid :deep(.t-radio__input) {
+  display: none !important;
+}
+.package-card-grid :deep(.t-radio__label) {
+  display: block;
+  width: 100%;
+  height: auto;
+  padding: 0 !important;
+  margin: 0 !important;
+  line-height: normal;
+}
+.package-card-body {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 14px 12px;
+  min-height: 108px;
+  box-sizing: border-box;
+}
+.package-card-body strong {
+  color: #304552;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.3;
+}
+.package-card-body b {
+  color: #246fae;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 1.15;
+  padding: 0 !important;
+}
+.package-card-body em {
+  font-style: normal;
+  color: #3b4d58;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.3;
+}
+.package-card-body small {
+  color: #74838d;
+  font-size: 10px;
+  line-height: 1.3;
+}
+.package-card-grid :deep(.t-is-checked) {
+  border-color: #3b8fd4;
+  background: #f3f8fc;
+  box-shadow: inset 0 0 0 1px #3b8fd4;
+}
+.package-card-grid :deep(.t-radio:hover) {
+  border-color: #8fb8da;
+}
+.package-card-grid :deep(.t-is-disabled) {
+  opacity: .6;
+}
+.pay-qr-panel { display: flex; flex-direction: column; gap: 14px; }
+.pay-qr-amount span { display: block; color: var(--muted); font-size: 10px; }
+.pay-qr-amount strong { display: block; margin-top: 4px; color: #246fae; font-size: 28px; font-weight: 600; }
+.pay-qr-meta { margin: 0; display: grid; gap: 6px; }
+.pay-qr-meta > div { display: flex; gap: 10px; font-size: 12px; }
+.pay-qr-meta dt { width: 48px; color: #74838d; }
+.pay-qr-meta dd { margin: 0; color: #304552; word-break: break-all; }
+.pay-qr-code { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px; border: 1px solid #d7e4ee; border-radius: 5px; background: #f5f9fc; }
+.pay-qr-code img { width: 220px; height: 220px; object-fit: contain; background: #fff; }
+.pay-qr-code small { color: #74838d; font-size: 11px; }
+.pay-qr-error { margin: 0; padding: 12px; border-radius: 5px; background: #fff5f5; color: #bd4046; font-size: 12px; }
+</style>
+
+<style>
+.recharge-modal .t-input {
+  width: 100%;
+}
+.recharge-modal.t-dialog label,
+.recharge-modal label {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin: 12px 0 0;
+  color: #4e5f6b;
+  font-size: 12px;
+}
+.recharge-modal.t-dialog .t-dialog__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+.recharge-modal .package-card-grid {
+  margin-top: 4px;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/DeviceDetailView/DeviceDetailView.vue b/src/views/DeviceDetailView/DeviceDetailView.vue
index 3f64aba..4c31009 100644
--- a/src/views/DeviceDetailView/DeviceDetailView.vue
+++ b/src/views/DeviceDetailView/DeviceDetailView.vue
@@ -1,721 +1,721 @@
-<template>
-  <section class="device-detail-page" :class="{ 'drone-detail': isDrone }">
-    <template v-if="record">
-      <header class="full-detail-header">
-        <t-button class="back-command" variant="text" @click="router.push({ name: 'devices' })"><svg><use href="#i-chevron" /></svg>返回设备列表</t-button>
-        <div class="full-detail-identity">
-          <span :class="{ drone: isDrone }"><svg><use :href="isDrone ? '#i-plane' : '#i-home'" /></svg></span>
-          <div>
-            <small>{{ isDrone ? '无人机设备' : '机巢设备' }}</small>
-            <h1>{{ record.name }}</h1>
-            <p>{{ record.code }}</p>
-          </div>
-          <em class="status" :class="record.statusClass">{{ record.status }}</em>
-        </div>
-        <div class="full-detail-actions" v-if="!isAdmin">
-          <t-button v-if="!isDrone" variant="outline" @click="editDockVisible = true">编辑信息</t-button>
-          <t-button variant="outline" @click="goControl"><svg><use href="#i-zap" /></svg>远程控制</t-button>
-          <t-button theme="primary" @click="goMonitor"><svg><use href="#i-radio" /></svg>实时监控</t-button>
-        </div>
-      </header>
-
-      <t-tabs v-model="activeTab" class="device-detail-tabs">
-        <t-tab-panel value="overview" label="概览" :destroy-on-hide="false" />
-        <t-tab-panel value="state" label="设备状态" :destroy-on-hide="false" />
-        <t-tab-panel value="alarms" :label="alarmsTabLabel" :destroy-on-hide="false" />
-        <t-tab-panel value="logs" label="操作记录" :destroy-on-hide="false" />
-        <t-tab-panel value="diagnostics" label="运维诊断" :destroy-on-hide="false" />
-      </t-tabs>
-
-      <div v-if="activeTab === 'overview'" class="full-detail-content">
-        <template v-if="!isDrone">
-          <div class="detail-metric-band">
-            <div><span>控制模式</span><strong>{{ record.mode }}</strong></div>
-            <div><span>无人机在位</span><strong :class="{ 'green-text': isTrue(rt('dronePresent')) }">{{ booleanText(rt('dronePresent')) }}</strong></div>
-            <div><span>舱门状态</span><strong>{{ doorSummary }}</strong></div>
-            <div><span>充电状态</span><strong :class="{ 'green-text': chargeTone }">{{ chargeText(rt('chargingState')) }}</strong></div>
-            <div><span>当前告警</span><strong>{{ record.alarms?.length ?? 0 }}</strong></div>
-            <div><span>最近上报</span><strong>{{ record.updated }}</strong></div>
-          </div>
-          <div class="detail-columns">
-            <div class="detail-main-column">
-              <section class="data-section">
-                <div class="data-section-title"><h2>机巢运行状态</h2><t-button variant="text" theme="primary" @click="activeTab = 'state'">全部状态</t-button></div>
-                <DeviceStatusMatrix :items="statusMatrixItems" />
-              </section>
-              <section class="data-section">
-                <h2>充电系统</h2>
-                <div class="value-table">
-                  <div><span>充电状态</span><strong :class="{ 'green-text': chargeTone }">{{ chargeText(rt('chargingState')) }}</strong></div>
-                  <div><span>充电电压</span><strong>{{ withUnit(rt('chargingVoltage'), ' V') }}</strong></div>
-                  <div><span>充电电流</span><strong>{{ withUnit(rt('chargingCurrent'), ' A') }}</strong></div>
-                  <div><span>无人机电量</span><strong>{{ boundDrone?.battery || '--' }}</strong></div>
-                  <div><span>无人机电源</span><strong>{{ booleanText(rt('dronePowerOnComplete')) }}</strong></div>
-                  <div><span>充电启动反馈</span><strong>{{ completeText(rt('chargeStartComplete')) }}</strong></div>
-                </div>
-              </section>
-              <section class="data-section">
-                <h2>环境监测</h2>
-                <DeviceEnvironmentValues :items="environmentItems" />
-              </section>
-            </div>
-            <div class="detail-side-column">
-              <section class="data-section">
-                <div class="data-section-title"><h2>绑定无人机</h2></div>
-                <div class="bound-asset-large">
-                  <span><svg><use href="#i-plane" /></svg></span>
-                  <div>
-                    <strong>{{ boundDrone?.name || record.binding }}</strong>
-                    <small>{{ boundDrone ? `${boundDrone.status} · 电量 ${boundDrone.battery}` : (record.bindingState === 'bound' ? '绑定关系正常' : '当前未绑定设备') }}</small>
-                  </div>
-                  <i v-if="boundDrone" class="status" :class="boundDrone.statusClass">{{ boundDrone.status }}</i>
-                </div>
-                <dl>
-                  <div><dt>飞控 SN</dt><dd>{{ boundDrone?.sn || '--' }}</dd></div>
-                  <div><dt>定位状态</dt><dd>{{ boundDrone?.gps || '--' }}</dd></div>
-                  <div><dt>当前任务</dt><dd>{{ boundDrone?.mission || '--' }}</dd></div>
-                </dl>
-              </section>
-              <section class="data-section" v-if="latestLog">
-                <h2>最近流程</h2>
-                <div class="workflow-summary">
-                  <span class="workflow-icon"><svg><use href="#i-home" /></svg></span>
-                  <div><strong>{{ latestLog.commandName }}</strong><small>{{ latestLog.createdAt }}</small></div>
-                  <i>{{ latestLog.statusName }}</i>
-                </div>
-              </section>
-              <section class="data-section">
-                <div class="data-section-title"><h2>设备信息</h2><t-button v-if="!isAdmin" variant="text" theme="primary" @click="editDockVisible = true">编辑</t-button></div>
-                <dl class="compact-properties">
-                  <div><dt>机巢 SN</dt><dd>{{ record.sn }}</dd></div>
-                  <div><dt>通信卡 ICCID</dt><dd>{{ record.iccid }}</dd></div>
-                  <div><dt>设备位置</dt><dd>{{ record.location }}</dd></div>
-                  <div><dt>经纬度</dt><dd>{{ coordinateText }}</dd></div>
-                  <div><dt>软件版本</dt><dd>{{ record.version }}</dd></div>
-                </dl>
-              </section>
-            </div>
-          </div>
-        </template>
-        <template v-else>
-          <div class="detail-metric-band">
-            <div><span>飞行状态</span><strong :class="{ 'blue-text': record.statusClass === 'mission' }">{{ record.status }}</strong></div>
-            <div><span>剩余电量</span><strong>{{ percentValue(record.battery) }}</strong></div>
-            <div><span>相对高度</span><strong>{{ withUnit(asset?.altitude, ' m') }}</strong></div>
-            <div><span>地速</span><strong>{{ withUnit(asset?.speed, ' m/s') }}</strong></div>
-            <div><span>卫星数量</span><strong>{{ displayValue(asset?.satellites) }}</strong></div>
-            <div><span>链路质量</span><strong>{{ withUnit(rt('linkQuality'), '%') }}</strong></div>
-          </div>
-          <div class="detail-columns">
-            <div class="detail-main-column">
-              <section class="data-section">
-                <h2>飞行数据</h2>
-                <div class="value-table">
-                  <div><span>飞行模式</span><strong>{{ record.mode }}</strong></div>
-                  <div><span>解锁状态</span><strong>{{ armedText }}</strong></div>
-                  <div><span>GPS 状态</span><strong class="green-text">{{ record.gps }}</strong></div>
-                  <div><span>电池电压</span><strong>{{ withUnit(rt('batteryVoltage'), ' V') }}</strong></div>
-                  <div><span>航向角</span><strong>{{ withUnit(rt('yaw'), '°') }}</strong></div>
-                  <div><span>返航点</span><strong>{{ homeSetText }}</strong></div>
-                </div>
-              </section>
-              <section class="data-section">
-                <h2>当前任务</h2>
-                <div class="mission-detail-row">
-                  <div><strong>{{ record.mission && record.mission !== '--' ? record.mission : '暂无任务' }}</strong><small>{{ record.binding }}</small></div>
-                </div>
-              </section>
-            </div>
-            <div class="detail-side-column">
-              <section class="data-section">
-                <h2>所属机巢</h2>
-                <div class="bound-asset-large dock">
-                  <span><svg><use href="#i-home" /></svg></span>
-                  <div><strong>{{ boundDock?.name || record.binding }}</strong><small>{{ record.bindingState === 'bound' ? '绑定关系正常' : '当前未绑定设备' }}</small></div>
-                  <i v-if="boundDock" class="status" :class="boundDock.statusClass">{{ boundDock.status }}</i>
-                </div>
-              </section>
-              <section class="data-section">
-                <h2>实时位置</h2>
-                <dl class="compact-properties">
-                  <div><dt>经度</dt><dd>{{ displayValue(rt('longitude')) }}</dd></div>
-                  <div><dt>纬度</dt><dd>{{ displayValue(rt('latitude')) }}</dd></div>
-                  <div><dt>Roll</dt><dd>{{ withUnit(rt('roll'), '°') }}</dd></div>
-                  <div><dt>Pitch</dt><dd>{{ withUnit(rt('pitch'), '°') }}</dd></div>
-                  <div><dt>Yaw</dt><dd>{{ withUnit(rt('yaw'), '°') }}</dd></div>
-                </dl>
-              </section>
-            </div>
-          </div>
-        </template>
-      </div>
-
-      <div v-else-if="activeTab === 'state'" class="full-detail-content">
-        <template v-if="!isDrone">
-          <div class="state-groups">
-            <section class="data-section">
-              <h2>舱门与归中机构</h2>
-              <div class="state-detail-grid">
-                <div><span>左舱门</span><strong>{{ doorText('left') }}</strong><small>关门反馈：{{ completeText(rt('doorCloseComplete')) }}</small></div>
-                <div><span>右舱门</span><strong>{{ doorText('right') }}</strong><small>开门反馈：{{ completeText(rt('doorOpenComplete')) }}</small></div>
-                <div><span>左右归中</span><strong>{{ centeringText('leftRight') }}</strong><small>夹紧反馈：{{ completeText(rt('centeringTightComplete')) }}</small></div>
-                <div><span>前后归中</span><strong>{{ centeringText('frontBack') }}</strong><small>松开反馈：{{ completeText(rt('centeringLooseComplete')) }}</small></div>
-              </div>
-            </section>
-            <section class="data-section">
-              <h2>流程反馈</h2>
-              <div class="state-detail-grid">
-                <div><span>起飞准备</span><strong>{{ completeText(rt('takeoffPreparationComplete')) }}</strong><small>takeoffPreparationComplete</small></div>
-                <div><span>起飞收尾</span><strong>{{ completeText(rt('hangarActionComplete')) }}</strong><small>hangarActionComplete</small></div>
-                <div><span>降落准备</span><strong>{{ completeText(rt('landingPreparationComplete')) }}</strong><small>landingPreparationComplete</small></div>
-                <div><span>降落收尾</span><strong>{{ completeText(rt('landingExecutionComplete')) }}</strong><small>landingExecutionComplete</small></div>
-                <div><span>整机复位</span><strong>{{ completeText(rt('resetComplete')) }}</strong><small>resetComplete</small></div>
-                <div><span>急停状态</span><strong>{{ isTrue(rt('emergencyStop')) ? '已触发' : isFalse(rt('emergencyStop')) ? '未触发' : '--' }}</strong><small>emergencyStop</small></div>
-              </div>
-            </section>
-          </div>
-        </template>
-        <template v-else>
-          <div class="state-groups">
-            <section class="data-section">
-              <h2>飞控状态</h2>
-              <div class="state-detail-grid">
-                <div><span>在线状态</span><strong>{{ record.online ? '在线' : '离线' }}</strong><small>{{ record.updated }}</small></div>
-                <div><span>解锁状态</span><strong>{{ armedText }}</strong><small>armed</small></div>
-                <div><span>飞行模式</span><strong>{{ record.mode }}</strong><small>mode code：{{ displayValue(rt('flightModeCode')) }}</small></div>
-                <div><span>返航点</span><strong>{{ homeSetText }}</strong><small>homeSet</small></div>
-              </div>
-            </section>
-            <section class="data-section">
-              <h2>任务状态</h2>
-              <div class="state-detail-grid">
-                <div><span>任务状态</span><strong>{{ record.statusClass === 'mission' ? '执行中' : displayValue(record.mission) }}</strong><small>{{ record.status }}</small></div>
-                <div><span>飞控 SN</span><strong>{{ record.sn }}</strong><small>已同步</small></div>
-                <div><span>卫星数量</span><strong>{{ displayValue(asset?.satellites) }}</strong><small>GPS {{ record.gps }}</small></div>
-                <div><span>链路质量</span><strong>{{ withUnit(rt('linkQuality'), '%') }}</strong><small>MAVLink</small></div>
-              </div>
-            </section>
-          </div>
-        </template>
-      </div>
-
-      <div v-else-if="activeTab === 'alarms'" class="full-detail-content">
-        <div class="record-header">
-          <div><h2>告警记录</h2><span>当前设备</span></div>
-          <t-select v-model="alarmStatusFilter" :options="alarmStatusOptions" placeholder="全部告警状态" style="width: 160px" />
-        </div>
-        <t-table
-          row-key="id"
-          :data="filteredAlarms"
-          :columns="alarmColumns"
-          empty="暂无告警记录"
-        >
-          <template #level="{ row }">
-            <i class="severity" :class="row.levelClass">{{ row.levelName }}</i>
-          </template>
-          <template #status="{ row }">
-            <span class="table-status" :class="row.statusClass"><i></i>{{ row.statusName }}</span>
-          </template>
-        </t-table>
-      </div>
-
-      <div v-else-if="activeTab === 'logs'" class="full-detail-content">
-        <div class="record-header">
-          <div><h2>操作记录</h2><span>远程控制与配置变更</span></div>
-          <t-button variant="outline" @click="loadLogs">刷新</t-button>
-        </div>
-        <t-table
-          row-key="id"
-          :data="logs"
-          :columns="logColumns"
-          empty="暂无设备操作记录"
-        >
-          <template #result="{ row }">
-            <span :class="row.resultClass">{{ row.result }}</span>
-          </template>
-        </t-table>
-      </div>
-
-      <div v-else class="full-detail-content">
-        <template v-if="!isDrone">
-          <div class="diagnostics-layout">
-            <section class="data-section">
-              <h2>边缘服务</h2>
-              <div class="diagnostic-list">
-                <div><span><i :class="record.online ? 'ok' : 'standby'"></i>MQTT 连接</span><strong>{{ record.online ? '正常' : '离线' }}</strong><small>{{ record.updated }}</small></div>
-                <div><span><i :class="isTrue(rt('plcConnected')) ? 'ok' : 'standby'"></i>PLC / Modbus</span><strong>{{ booleanText(rt('plcConnected')) === '是' ? '正常' : booleanText(rt('plcConnected')) }}</strong><small>plcConnected</small></div>
-                <div><span><i class="standby"></i>MAVLink</span><strong>--</strong><small>未单独上报</small></div>
-                <div><span><i class="standby"></i>视频服务</span><strong>--</strong><small>见直播状态</small></div>
-              </div>
-            </section>
-            <section class="data-section">
-              <h2>软件与身份</h2>
-              <div class="value-table">
-                <div><span>边缘版本</span><strong>{{ record.version }}</strong></div>
-                <div><span>协议版本</span><strong>{{ record.protocol }}</strong></div>
-                <div><span>设备连接</span><strong>{{ record.status }}</strong></div>
-                <div><span>最近更新</span><strong>{{ record.updated }}</strong></div>
-                <div><span>告警数量</span><strong>{{ record.alarms?.length ?? 0 }}</strong></div>
-                <div><span>PLC 连接</span><strong>{{ booleanText(rt('plcConnected')) }}</strong></div>
-              </div>
-            </section>
-          </div>
-        </template>
-        <template v-else>
-          <div class="diagnostics-layout">
-            <section class="data-section">
-              <h2>飞控通信</h2>
-              <div class="diagnostic-list">
-                <div><span><i :class="record.online ? 'ok' : 'standby'"></i>MAVLink 心跳</span><strong>{{ record.online ? '正常' : '离线' }}</strong><small>{{ record.updated }}</small></div>
-                <div><span><i :class="record.online ? 'ok' : 'standby'"></i>遥测数据</span><strong>{{ record.online ? '正常' : '--' }}</strong><small>最近 {{ record.updated }}</small></div>
-                <div><span><i :class="record.sn && record.sn !== '--' ? 'ok' : 'standby'"></i>飞控序列号</span><strong>{{ record.sn && record.sn !== '--' ? '已识别' : '--' }}</strong><small>{{ record.sn }}</small></div>
-              </div>
-            </section>
-            <section class="data-section">
-              <h2>飞控信息</h2>
-              <div class="value-table">
-                <div><span>当前 SysID</span><strong>{{ record.sysid }}</strong></div>
-                <div><span>飞控版本</span><strong>{{ record.firmwareVer }}</strong></div>
-                <div><span>机型</span><strong>{{ record.model }}</strong></div>
-                <div><span>链路质量</span><strong>{{ withUnit(rt('linkQuality'), '%') }}</strong></div>
-              </div>
-            </section>
-          </div>
-        </template>
-      </div>
-    </template>
-
-    <DockEditModal :visible="editDockVisible" :dock="record" @close="editDockVisible = false" @saved="handleDockSaved" />
-
-    <div v-if="!record" class="table-empty" style="flex:1;display:grid;place-items:center;color:var(--muted);font-size:12px">
-      未找到该设备
-      <t-button theme="primary" style="margin-top:10px" @click="router.push({ name: 'devices' })">返回设备列表</t-button>
-    </div>
-  </section>
-</template>
-
-<script setup>
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { useDeviceStore } from '@/stores/modules/devicesStore'
-import { useUiStore } from '@/stores/modules/uiStore'
-import { useUserStore } from '@/stores/modules/userStore'
-import request from '@/utils/http'
-import DockEditModal from '@/components/DockEditModal.vue'
-import DeviceStatusMatrix from '@/components/DeviceStatusMatrix.vue'
-import DeviceEnvironmentValues from '@/components/DeviceEnvironmentValues.vue'
-import * as urls from '@/config/urls'
-
-const route = useRoute()
-const router = useRouter()
-const devices = useDeviceStore()
-const ui = useUiStore()
-const userStore = useUserStore()
-const isAdmin = computed(() => userStore.isAdmin())
-const activeTab = ref('overview')
-const logs = ref([])
-const alarmRecords = ref([])
-const alarmStatusFilter = ref('')
-const alarmStatusOptions = [
-  { label: '全部告警状态', value: '' },
-  { label: '未恢复', value: 'active' },
-  { label: '已恢复', value: 'resolved' }
-]
-const editDockVisible = ref(false)
-
-const alarmsTabLabel = computed(() => (alarmRecords.value.length ? `告警记录 ${alarmRecords.value.length}` : '告警记录'))
-
-const alarmColumns = [
-  { colKey: 'triggeredAt', title: '告警时间', width: '18%' },
-  { colKey: 'code', title: '告警编码', width: '14%' },
-  { colKey: 'message', title: '告警内容', width: '28%' },
-  { colKey: 'level', title: '级别', width: '10%' },
-  { colKey: 'status', title: '状态', width: '12%' },
-  { colKey: 'resolvedAt', title: '恢复时间', width: '18%' }
-]
-
-const logColumns = [
-  { colKey: 'createdAt', title: '操作时间', width: '20%' },
-  { colKey: 'category', title: '操作类型', width: '14%' },
-  { colKey: 'commandName', title: '操作内容', width: '26%' },
-  { colKey: 'result', title: '执行结果', width: '16%' },
-  { colKey: 'droneSn', title: '目标设备', width: '24%' }
-]
-
-const record = computed(() => devices.record(route.params.id))
-const asset = computed(() => devices.asset(route.params.id))
-const isDrone = computed(() => record.value?.kind === 'drone')
-
-const DETAIL_POLL_MS = 5000
-let detailPollTimer = null
-let detailPollInflight = null
-let detailPollGen = 0
-let detailDisposed = false
-
-function clearDetailPollTimer() {
-  window.clearInterval(detailPollTimer)
-  detailPollTimer = null
-}
-
-async function pollCurrentDetail() {
-  if (detailDisposed) return
-  if (detailPollInflight) return
-  const id = String(route.params.id || '')
-  const rec = devices.record(id)
-  if (!id || !rec) return
-  const gen = detailPollGen
-  const url = rec.kind === 'drone' ? urls.DRONE(id) : urls.DOCK(id)
-  detailPollInflight = request.get(url, { skipErrorToast: true })
-  try {
-    const detail = await detailPollInflight
-    if (detailDisposed || gen !== detailPollGen) return
-    if (String(route.params.id) !== id) return
-    if (rec.kind === 'drone') devices.applyDroneDetail(id, detail || {})
-    else devices.applyDockDetail(id, detail || {})
-  } catch (e) {
-    if (detailDisposed || gen !== detailPollGen) return
-    console.warn('[device-detail] poll failed', e)
-  } finally {
-    detailPollInflight = null
-  }
-}
-
-function startDetailPolling() {
-  clearDetailPollTimer()
-  if (detailDisposed || document.visibilityState === 'hidden') return
-  detailPollTimer = window.setInterval(() => {
-    void pollCurrentDetail()
-  }, DETAIL_POLL_MS)
-}
-
-function stopDetailPolling() {
-  clearDetailPollTimer()
-}
-
-function restartDetailPolling() {
-  detailPollGen += 1
-  detailPollInflight = null  // allow immediate new-id fetch; old response dropped by gen
-  stopDetailPolling()
-  void pollCurrentDetail()
-  startDetailPolling()
-}
-
-function onDetailVisibility() {
-  if (detailDisposed) return
-  if (document.visibilityState === 'hidden') {
-    stopDetailPolling()
-    return
-  }
-  detailPollInflight = null
-  void pollCurrentDetail()
-  startDetailPolling()
-}
-const boundDrone = computed(() => (record.value?.kind === 'dock' ? devices.drones.find((d) => d.dockId === record.value.dockId) : null))
-const boundDock = computed(() => (record.value?.kind === 'drone' ? devices.docks.find((d) => d.dockId === record.value.dockId) : null))
-const latestLog = computed(() => logs.value[0] || null)
-const coordinateText = computed(() => {
-  const rec = record.value
-  if (!rec || rec.longitude == null || rec.latitude == null) return '--'
-  return `${rec.longitude}, ${rec.latitude}`
-})
-const chargeTone = computed(() => String(rt('chargingState') || '').toLowerCase() === 'charging')
-const doorSummary = computed(() => {
-  const left = doorValue('left')
-  const right = doorValue('right')
-  if (isClosed(left) && isClosed(right)) return '已关闭'
-  if (left === 'open' || right === 'open') return '已打开'
-  return displayValue(left || right)
-})
-const armedText = computed(() => {
-  if (isTrue(rt('armed'))) return '已解锁'
-  if (isFalse(rt('armed'))) return '未解锁'
-  return '--'
-})
-const homeSetText = computed(() => {
-  if (isTrue(rt('homeSet'))) return '已设置'
-  if (isFalse(rt('homeSet'))) return '未设置'
-  return '--'
-})
-const statusMatrixItems = computed(() => {
-  const emergency = rt('emergencyStop')
-  const emergencyValue = isTrue(emergency) ? '已触发' : booleanText(emergency) === '--' ? '--' : '未触发'
-  return [
-    { icon: '#i-door', label: '左侧舱门', value: doorText('left'), ok: isClosed(doorValue('left')) },
-    { icon: '#i-door', label: '右侧舱门', value: doorText('right'), ok: isClosed(doorValue('right')) },
-    { icon: '#i-grid', label: '左右归中', value: centeringText('leftRight'), ok: isTight(centeringValue('leftRight')) },
-    { icon: '#i-grid', label: '前后归中', value: centeringText('frontBack'), ok: isTight(centeringValue('frontBack')) },
-    { icon: '#i-alert', label: '急停状态', value: emergencyValue, ok: isFalse(emergency) },
-    { icon: '#i-refresh', label: '整机状态', value: record.value?.status ?? '--', ok: !!record.value?.online }
-  ]
-})
-const environmentItems = computed(() => {
-  const env = record.value?.environment
-  return [
-    { icon: '#i-sun', label: '舱外温度', value: withUnit(env?.outsideTemperature, '℃') },
-    { icon: '#i-sun', label: '舱内温度', value: withUnit(env?.insideTemperature, '℃') },
-    { icon: '#i-cloud-rain', label: '舱外湿度', value: withUnit(env?.outsideHumidity, '%RH') },
-    { icon: '#i-cloud-rain', label: '舱内湿度', value: withUnit(env?.insideHumidity, '%RH') },
-    { icon: '#i-wind', label: '实时风速', value: withUnit(env?.windSpeed, ' m/s') },
-    { icon: '#i-cloud-rain', label: '降雨', value: booleanText(env?.rain) }
-  ]
-})
-const filteredAlarms = computed(() => {
-  if (!alarmStatusFilter.value) return alarmRecords.value
-  if (alarmStatusFilter.value === 'active') return alarmRecords.value.filter((item) => item.status !== 'resolved')
-  return alarmRecords.value.filter((item) => item.status === alarmStatusFilter.value)
-})
-
-function percentValue(value) {
-  return value == null || value === '' || value === '--' ? '--' : `${value}`
-}
-
-function displayValue(value) {
-  return value == null || value === '' ? '--' : value
-}
-
-function withUnit(value, unit) {
-  return value == null || value === '' ? '--' : `${value}${unit}`
-}
-
-function isTrue(value) {
-  return value === true || value === 'true' || value === '1' || value === 1
-}
-
-function isFalse(value) {
-  return value === false || value === 'false' || value === '0' || value === 0
-}
-
-function booleanText(value) {
-  if (isTrue(value)) return '是'
-  if (isFalse(value)) return '否'
-  return '--'
-}
-
-function completeText(value) {
-  if (isTrue(value)) return '已完成'
-  if (isFalse(value)) return '未执行'
-  return '--'
-}
-
-function rt(key, ...aliases) {
-  const realtime = record.value?.realtime || {}
-  for (const name of [key, ...aliases]) {
-    if (realtime[name] != null && realtime[name] !== '') return realtime[name]
-  }
-  return null
-}
-
-function rtObj(key) {
-  const raw = record.value?.realtime?.[key]
-  if (!raw) return {}
-  if (typeof raw === 'object') return raw
-  try { return JSON.parse(raw) || {} } catch { return {} }
-}
-
-function doorValue(side) {
-  return rtObj('door')[side]
-}
-
-function centeringValue(key) {
-  return rtObj('centering')[key]
-}
-
-function isClosed(value) {
-  return value === 'closed' || value === 'close'
-}
-
-function isTight(value) {
-  return value === 'tight'
-}
-
-function doorText(side) {
-  const value = doorValue(side)
-  if (isClosed(value)) return '已关闭'
-  if (value === 'open') return '已打开'
-  return displayValue(value)
-}
-
-function centeringText(key) {
-  const value = centeringValue(key)
-  if (value === 'tight') return '已夹紧'
-  if (value === 'loose') return '已松开'
-  return displayValue(value)
-}
-
-function chargeText(value) {
-  const key = String(value || '').toLowerCase()
-  if (key === 'charging') return '充电中'
-  if (key === 'idle') return '空闲'
-  if (key === 'full' || key === 'charged') return '已充满'
-  return displayValue(value)
-}
-
-onMounted(async () => {
-  detailDisposed = false
-  document.addEventListener('visibilitychange', onDetailVisibility)
-  try {
-    await devices.load()
-    if (!isAdmin.value) {
-      await Promise.all([loadLogs(), loadAlarms()])
-    }
-  } catch (e) {
-    ui.toast(e.message || '加载设备失败')
-  }
-  startDetailPolling()
-})
-
-onUnmounted(() => {
-  detailDisposed = true
-  detailPollGen += 1
-  stopDetailPolling()
-  document.removeEventListener('visibilitychange', onDetailVisibility)
-})
-
-watch(
-  () => String(route.params.id || ''),
-  (next, prev) => {
-    if (!next || next === prev) return
-    restartDetailPolling()
-  }
-)
-
-
-const COMMAND_NAMES = {
-  'dock.open': '打开舱门',
-  'dock.close': '关闭舱门',
-  'dock.reset': '整机复位',
-  'dock.prepare_takeoff': '起飞准备',
-  'dock.complete_takeoff': '起飞准备完成',
-  'dock.prepare_landing': '降落准备',
-  'dock.complete_landing': '降落准备完成',
-  'dock.charge_start': '开始充电',
-  'dock.drone_power_on': '无人机开机',
-  'dock.drone_power_off': '无人机关机',
-  'dock.reboot': '远程重启',
-  'dock.clear_alarm': '清除设备告警',
-  'drone.takeoff': '无人机起飞',
-  'drone.land': '无人机降落',
-  'drone.return': '一键返航',
-  'drone.mission_upload': '上传任务',
-  'drone.mission_start': '开始任务',
-  'drone.mission_pause': '暂停任务',
-  'drone.mission_resume': '继续任务',
-  'drone.mission_cancel': '取消任务',
-  'workflow.start_task': '执行任务',
-  'workflow.one_key_takeoff': '一键起飞',
-  'workflow.one_key_land': '一键降落',
-  'video.start_stream': '开始直播',
-  'video.stop_stream': '停止直播'
-}
-
-const STATUS_NAMES = {
-  sent: { name: '已下发', cls: 'processing', result: '等待应答' },
-  acked: { name: '已确认', cls: 'result-success', result: '执行成功' },
-  timeout: { name: '已超时', cls: 'offline', result: '已超时' },
-  terminal: { name: '执行失败', cls: 'offline', result: '执行失败' }
-}
-
-const ALARM_LEVELS = {
-  critical: { name: '紧急', cls: 'high' },
-  high: { name: '紧急', cls: 'high' },
-  warning: { name: '一般', cls: 'medium' },
-  medium: { name: '一般', cls: 'medium' },
-  info: { name: '提示', cls: 'low' },
-  low: { name: '提示', cls: 'low' }
-}
-
-function fmtTime(t) {
-  if (!t) return '--'
-  const d = new Date(t)
-  return Number.isNaN(d.getTime()) ? '--' : d.toLocaleString('zh-CN', { hour12: false })
-}
-
-async function loadLogs() {
-  const current = record.value
-  if (!current || isAdmin.value) return
-  try {
-    const page = await request.get(urls.COMMANDS, { params: { pageNum: 1, pageSize: 100, dockId: current.dockId } })
-    logs.value = (page?.records || []).filter((log) => current.kind !== 'drone' || log.droneSn === current.droneSn).map((log) => {
-      const status = STATUS_NAMES[log.status] || { name: log.status || '--', cls: 'offline', result: log.status || '--' }
-      const type = log.commandType || ''
-      return {
-        id: String(log.id),
-        category: type.startsWith('workflow.') ? '工作流' : '控制指令',
-        commandName: COMMAND_NAMES[type] || type || '--',
-        droneSn: log.droneSn || '机巢本体',
-        statusName: status.name,
-        result: log.ackResultCode || status.result,
-        resultClass: log.status === 'acked' ? 'result-success' : '',
-        createdAt: fmtTime(log.createdAt)
-      }
-    })
-  } catch (e) {
-    if (e?.response?.status === 403) return
-    ui.toast(e.message || '加载设备操作记录失败')
-  }
-}
-
-async function loadAlarms() {
-  const current = record.value
-  if (!current || isAdmin.value) return
-  try {
-    const page = await request.get(urls.ALARMS, {
-      params: {
-        pageNum: 1,
-        pageSize: 100,
-        dockId: current.dockId,
-        deviceType: current.kind === 'drone' ? 'drone' : 'dock'
-      }
-    })
-    alarmRecords.value = (page?.records || []).map((item) => {
-      const level = ALARM_LEVELS[item.level] || { name: item.level || '--', cls: 'medium' }
-      const resolved = item.status === 'resolved'
-      return {
-        id: String(item.id),
-        code: item.code || '--',
-        message: item.messageCn || item.code || '--',
-        levelName: level.name,
-        levelClass: level.cls,
-        status: item.status,
-        statusName: resolved ? '已恢复' : item.status === 'acknowledged' ? '已确认' : '未恢复',
-        statusClass: resolved ? 'online' : 'offline',
-        triggeredAt: fmtTime(item.triggeredAt || item.createdAt),
-        resolvedAt: fmtTime(item.resolvedAt)
-      }
-    })
-  } catch (e) {
-    if (e?.response?.status === 403) return
-    ui.toast(e.message || '加载告警记录失败')
-  }
-}
-
-async function handleDockSaved() {
-  editDockVisible.value = false
-  try {
-    await devices.load()
-    ui.toast('机巢信息已更新')
-  } catch (e) {
-    ui.toast(e.message || '机巢已保存，但刷新设备数据失败')
-  }
-}
-
-function goControl() {
-  router.push({ name: 'monitor', query: { deviceId: route.params.id, control: '1' } })
-}
-
-function goMonitor() {
-  router.push({ name: 'monitor', query: { deviceId: route.params.id } })
-}
-</script>
-
-<style scoped>
-.device-detail-tabs :deep(.t-tabs__nav-container) {
-  padding: 0 24px;
-}
-.device-detail-tabs :deep(.t-tabs__nav-wrap) {
-  margin-left: 0;
-}
-.full-detail-content :deep(.t-table) {
-  background: transparent;
-}
-</style>
+<template>
+  <section class="device-detail-page" :class="{ 'drone-detail': isDrone }">
+    <template v-if="record">
+      <header class="full-detail-header">
+        <t-button class="back-command" variant="text" @click="router.push({ name: 'devices' })"><svg><use href="#i-chevron" /></svg>返回设备列表</t-button>
+        <div class="full-detail-identity">
+          <span :class="{ drone: isDrone }"><svg><use :href="isDrone ? '#i-plane' : '#i-home'" /></svg></span>
+          <div>
+            <small>{{ isDrone ? '无人机设备' : '机巢设备' }}</small>
+            <h1>{{ record.name }}</h1>
+            <p>{{ record.code }}</p>
+          </div>
+          <em class="status" :class="record.statusClass">{{ record.status }}</em>
+        </div>
+        <div class="full-detail-actions" v-if="!isAdmin">
+          <t-button v-if="!isDrone" variant="outline" @click="editDockVisible = true">编辑信息</t-button>
+          <t-button variant="outline" @click="goControl"><svg><use href="#i-zap" /></svg>远程控制</t-button>
+          <t-button theme="primary" @click="goMonitor"><svg><use href="#i-radio" /></svg>实时监控</t-button>
+        </div>
+      </header>
+
+      <t-tabs v-model="activeTab" class="device-detail-tabs">
+        <t-tab-panel value="overview" label="概览" :destroy-on-hide="false" />
+        <t-tab-panel value="state" label="设备状态" :destroy-on-hide="false" />
+        <t-tab-panel value="alarms" :label="alarmsTabLabel" :destroy-on-hide="false" />
+        <t-tab-panel value="logs" label="操作记录" :destroy-on-hide="false" />
+        <t-tab-panel value="diagnostics" label="运维诊断" :destroy-on-hide="false" />
+      </t-tabs>
+
+      <div v-if="activeTab === 'overview'" class="full-detail-content">
+        <template v-if="!isDrone">
+          <div class="detail-metric-band">
+            <div><span>控制模式</span><strong>{{ record.mode }}</strong></div>
+            <div><span>无人机在位</span><strong :class="{ 'green-text': isTrue(rt('dronePresent')) }">{{ booleanText(rt('dronePresent')) }}</strong></div>
+            <div><span>舱门状态</span><strong>{{ doorSummary }}</strong></div>
+            <div><span>充电状态</span><strong :class="{ 'green-text': chargeTone }">{{ chargeText(rt('chargingState')) }}</strong></div>
+            <div><span>当前告警</span><strong>{{ record.alarms?.length ?? 0 }}</strong></div>
+            <div><span>最近上报</span><strong>{{ record.updated }}</strong></div>
+          </div>
+          <div class="detail-columns">
+            <div class="detail-main-column">
+              <section class="data-section">
+                <div class="data-section-title"><h2>机巢运行状态</h2><t-button variant="text" theme="primary" @click="activeTab = 'state'">全部状态</t-button></div>
+                <DeviceStatusMatrix :items="statusMatrixItems" />
+              </section>
+              <section class="data-section">
+                <h2>充电系统</h2>
+                <div class="value-table">
+                  <div><span>充电状态</span><strong :class="{ 'green-text': chargeTone }">{{ chargeText(rt('chargingState')) }}</strong></div>
+                  <div><span>充电电压</span><strong>{{ withUnit(rt('chargingVoltage'), ' V') }}</strong></div>
+                  <div><span>充电电流</span><strong>{{ withUnit(rt('chargingCurrent'), ' A') }}</strong></div>
+                  <div><span>无人机电量</span><strong>{{ boundDrone?.battery || '--' }}</strong></div>
+                  <div><span>无人机电源</span><strong>{{ booleanText(rt('dronePowerOnComplete')) }}</strong></div>
+                  <div><span>充电启动反馈</span><strong>{{ completeText(rt('chargeStartComplete')) }}</strong></div>
+                </div>
+              </section>
+              <section class="data-section">
+                <h2>环境监测</h2>
+                <DeviceEnvironmentValues :items="environmentItems" />
+              </section>
+            </div>
+            <div class="detail-side-column">
+              <section class="data-section">
+                <div class="data-section-title"><h2>绑定无人机</h2></div>
+                <div class="bound-asset-large">
+                  <span><svg><use href="#i-plane" /></svg></span>
+                  <div>
+                    <strong>{{ boundDrone?.name || record.binding }}</strong>
+                    <small>{{ boundDrone ? `${boundDrone.status} · 电量 ${boundDrone.battery}` : (record.bindingState === 'bound' ? '绑定关系正常' : '当前未绑定设备') }}</small>
+                  </div>
+                  <i v-if="boundDrone" class="status" :class="boundDrone.statusClass">{{ boundDrone.status }}</i>
+                </div>
+                <dl>
+                  <div><dt>飞控 SN</dt><dd>{{ boundDrone?.sn || '--' }}</dd></div>
+                  <div><dt>定位状态</dt><dd>{{ boundDrone?.gps || '--' }}</dd></div>
+                  <div><dt>当前任务</dt><dd>{{ boundDrone?.mission || '--' }}</dd></div>
+                </dl>
+              </section>
+              <section class="data-section" v-if="latestLog">
+                <h2>最近流程</h2>
+                <div class="workflow-summary">
+                  <span class="workflow-icon"><svg><use href="#i-home" /></svg></span>
+                  <div><strong>{{ latestLog.commandName }}</strong><small>{{ latestLog.createdAt }}</small></div>
+                  <i>{{ latestLog.statusName }}</i>
+                </div>
+              </section>
+              <section class="data-section">
+                <div class="data-section-title"><h2>设备信息</h2><t-button v-if="!isAdmin" variant="text" theme="primary" @click="editDockVisible = true">编辑</t-button></div>
+                <dl class="compact-properties">
+                  <div><dt>机巢 SN</dt><dd>{{ record.sn }}</dd></div>
+                  <div><dt>通信卡 ICCID</dt><dd>{{ record.iccid }}</dd></div>
+                  <div><dt>设备位置</dt><dd>{{ record.location }}</dd></div>
+                  <div><dt>经纬度</dt><dd>{{ coordinateText }}</dd></div>
+                  <div><dt>软件版本</dt><dd>{{ record.version }}</dd></div>
+                </dl>
+              </section>
+            </div>
+          </div>
+        </template>
+        <template v-else>
+          <div class="detail-metric-band">
+            <div><span>飞行状态</span><strong :class="{ 'blue-text': record.statusClass === 'mission' }">{{ record.status }}</strong></div>
+            <div><span>剩余电量</span><strong>{{ percentValue(record.battery) }}</strong></div>
+            <div><span>相对高度</span><strong>{{ withUnit(asset?.altitude, ' m') }}</strong></div>
+            <div><span>地速</span><strong>{{ withUnit(asset?.speed, ' m/s') }}</strong></div>
+            <div><span>卫星数量</span><strong>{{ displayValue(asset?.satellites) }}</strong></div>
+            <div><span>链路质量</span><strong>{{ withUnit(rt('linkQuality'), '%') }}</strong></div>
+          </div>
+          <div class="detail-columns">
+            <div class="detail-main-column">
+              <section class="data-section">
+                <h2>飞行数据</h2>
+                <div class="value-table">
+                  <div><span>飞行模式</span><strong>{{ record.mode }}</strong></div>
+                  <div><span>解锁状态</span><strong>{{ armedText }}</strong></div>
+                  <div><span>GPS 状态</span><strong class="green-text">{{ record.gps }}</strong></div>
+                  <div><span>电池电压</span><strong>{{ withUnit(rt('batteryVoltage'), ' V') }}</strong></div>
+                  <div><span>航向角</span><strong>{{ withUnit(rt('yaw'), '°') }}</strong></div>
+                  <div><span>返航点</span><strong>{{ homeSetText }}</strong></div>
+                </div>
+              </section>
+              <section class="data-section">
+                <h2>当前任务</h2>
+                <div class="mission-detail-row">
+                  <div><strong>{{ record.mission && record.mission !== '--' ? record.mission : '暂无任务' }}</strong><small>{{ record.binding }}</small></div>
+                </div>
+              </section>
+            </div>
+            <div class="detail-side-column">
+              <section class="data-section">
+                <h2>所属机巢</h2>
+                <div class="bound-asset-large dock">
+                  <span><svg><use href="#i-home" /></svg></span>
+                  <div><strong>{{ boundDock?.name || record.binding }}</strong><small>{{ record.bindingState === 'bound' ? '绑定关系正常' : '当前未绑定设备' }}</small></div>
+                  <i v-if="boundDock" class="status" :class="boundDock.statusClass">{{ boundDock.status }}</i>
+                </div>
+              </section>
+              <section class="data-section">
+                <h2>实时位置</h2>
+                <dl class="compact-properties">
+                  <div><dt>经度</dt><dd>{{ displayValue(rt('longitude')) }}</dd></div>
+                  <div><dt>纬度</dt><dd>{{ displayValue(rt('latitude')) }}</dd></div>
+                  <div><dt>Roll</dt><dd>{{ withUnit(rt('roll'), '°') }}</dd></div>
+                  <div><dt>Pitch</dt><dd>{{ withUnit(rt('pitch'), '°') }}</dd></div>
+                  <div><dt>Yaw</dt><dd>{{ withUnit(rt('yaw'), '°') }}</dd></div>
+                </dl>
+              </section>
+            </div>
+          </div>
+        </template>
+      </div>
+
+      <div v-else-if="activeTab === 'state'" class="full-detail-content">
+        <template v-if="!isDrone">
+          <div class="state-groups">
+            <section class="data-section">
+              <h2>舱门与归中机构</h2>
+              <div class="state-detail-grid">
+                <div><span>左舱门</span><strong>{{ doorText('left') }}</strong><small>关门反馈：{{ completeText(rt('doorCloseComplete')) }}</small></div>
+                <div><span>右舱门</span><strong>{{ doorText('right') }}</strong><small>开门反馈：{{ completeText(rt('doorOpenComplete')) }}</small></div>
+                <div><span>左右归中</span><strong>{{ centeringText('leftRight') }}</strong><small>夹紧反馈：{{ completeText(rt('centeringTightComplete')) }}</small></div>
+                <div><span>前后归中</span><strong>{{ centeringText('frontBack') }}</strong><small>松开反馈：{{ completeText(rt('centeringLooseComplete')) }}</small></div>
+              </div>
+            </section>
+            <section class="data-section">
+              <h2>流程反馈</h2>
+              <div class="state-detail-grid">
+                <div><span>起飞准备</span><strong>{{ completeText(rt('takeoffPreparationComplete')) }}</strong><small>takeoffPreparationComplete</small></div>
+                <div><span>起飞收尾</span><strong>{{ completeText(rt('hangarActionComplete')) }}</strong><small>hangarActionComplete</small></div>
+                <div><span>降落准备</span><strong>{{ completeText(rt('landingPreparationComplete')) }}</strong><small>landingPreparationComplete</small></div>
+                <div><span>降落收尾</span><strong>{{ completeText(rt('landingExecutionComplete')) }}</strong><small>landingExecutionComplete</small></div>
+                <div><span>整机复位</span><strong>{{ completeText(rt('resetComplete')) }}</strong><small>resetComplete</small></div>
+                <div><span>急停状态</span><strong>{{ isTrue(rt('emergencyStop')) ? '已触发' : isFalse(rt('emergencyStop')) ? '未触发' : '--' }}</strong><small>emergencyStop</small></div>
+              </div>
+            </section>
+          </div>
+        </template>
+        <template v-else>
+          <div class="state-groups">
+            <section class="data-section">
+              <h2>飞控状态</h2>
+              <div class="state-detail-grid">
+                <div><span>在线状态</span><strong>{{ record.online ? '在线' : '离线' }}</strong><small>{{ record.updated }}</small></div>
+                <div><span>解锁状态</span><strong>{{ armedText }}</strong><small>armed</small></div>
+                <div><span>飞行模式</span><strong>{{ record.mode }}</strong><small>mode code：{{ displayValue(rt('flightModeCode')) }}</small></div>
+                <div><span>返航点</span><strong>{{ homeSetText }}</strong><small>homeSet</small></div>
+              </div>
+            </section>
+            <section class="data-section">
+              <h2>任务状态</h2>
+              <div class="state-detail-grid">
+                <div><span>任务状态</span><strong>{{ record.statusClass === 'mission' ? '执行中' : displayValue(record.mission) }}</strong><small>{{ record.status }}</small></div>
+                <div><span>飞控 SN</span><strong>{{ record.sn }}</strong><small>已同步</small></div>
+                <div><span>卫星数量</span><strong>{{ displayValue(asset?.satellites) }}</strong><small>GPS {{ record.gps }}</small></div>
+                <div><span>链路质量</span><strong>{{ withUnit(rt('linkQuality'), '%') }}</strong><small>MAVLink</small></div>
+              </div>
+            </section>
+          </div>
+        </template>
+      </div>
+
+      <div v-else-if="activeTab === 'alarms'" class="full-detail-content">
+        <div class="record-header">
+          <div><h2>告警记录</h2><span>当前设备</span></div>
+          <t-select v-model="alarmStatusFilter" :options="alarmStatusOptions" placeholder="全部告警状态" style="width: 160px" />
+        </div>
+        <t-table
+          row-key="id"
+          :data="filteredAlarms"
+          :columns="alarmColumns"
+          empty="暂无告警记录"
+        >
+          <template #level="{ row }">
+            <i class="severity" :class="row.levelClass">{{ row.levelName }}</i>
+          </template>
+          <template #status="{ row }">
+            <span class="table-status" :class="row.statusClass"><i></i>{{ row.statusName }}</span>
+          </template>
+        </t-table>
+      </div>
+
+      <div v-else-if="activeTab === 'logs'" class="full-detail-content">
+        <div class="record-header">
+          <div><h2>操作记录</h2><span>远程控制与配置变更</span></div>
+          <t-button variant="outline" @click="loadLogs">刷新</t-button>
+        </div>
+        <t-table
+          row-key="id"
+          :data="logs"
+          :columns="logColumns"
+          empty="暂无设备操作记录"
+        >
+          <template #result="{ row }">
+            <span :class="row.resultClass">{{ row.result }}</span>
+          </template>
+        </t-table>
+      </div>
+
+      <div v-else class="full-detail-content">
+        <template v-if="!isDrone">
+          <div class="diagnostics-layout">
+            <section class="data-section">
+              <h2>边缘服务</h2>
+              <div class="diagnostic-list">
+                <div><span><i :class="record.online ? 'ok' : 'standby'"></i>MQTT 连接</span><strong>{{ record.online ? '正常' : '离线' }}</strong><small>{{ record.updated }}</small></div>
+                <div><span><i :class="isTrue(rt('plcConnected')) ? 'ok' : 'standby'"></i>PLC / Modbus</span><strong>{{ booleanText(rt('plcConnected')) === '是' ? '正常' : booleanText(rt('plcConnected')) }}</strong><small>plcConnected</small></div>
+                <div><span><i class="standby"></i>MAVLink</span><strong>--</strong><small>未单独上报</small></div>
+                <div><span><i class="standby"></i>视频服务</span><strong>--</strong><small>见直播状态</small></div>
+              </div>
+            </section>
+            <section class="data-section">
+              <h2>软件与身份</h2>
+              <div class="value-table">
+                <div><span>边缘版本</span><strong>{{ record.version }}</strong></div>
+                <div><span>协议版本</span><strong>{{ record.protocol }}</strong></div>
+                <div><span>设备连接</span><strong>{{ record.status }}</strong></div>
+                <div><span>最近更新</span><strong>{{ record.updated }}</strong></div>
+                <div><span>告警数量</span><strong>{{ record.alarms?.length ?? 0 }}</strong></div>
+                <div><span>PLC 连接</span><strong>{{ booleanText(rt('plcConnected')) }}</strong></div>
+              </div>
+            </section>
+          </div>
+        </template>
+        <template v-else>
+          <div class="diagnostics-layout">
+            <section class="data-section">
+              <h2>飞控通信</h2>
+              <div class="diagnostic-list">
+                <div><span><i :class="record.online ? 'ok' : 'standby'"></i>MAVLink 心跳</span><strong>{{ record.online ? '正常' : '离线' }}</strong><small>{{ record.updated }}</small></div>
+                <div><span><i :class="record.online ? 'ok' : 'standby'"></i>遥测数据</span><strong>{{ record.online ? '正常' : '--' }}</strong><small>最近 {{ record.updated }}</small></div>
+                <div><span><i :class="record.sn && record.sn !== '--' ? 'ok' : 'standby'"></i>飞控序列号</span><strong>{{ record.sn && record.sn !== '--' ? '已识别' : '--' }}</strong><small>{{ record.sn }}</small></div>
+              </div>
+            </section>
+            <section class="data-section">
+              <h2>飞控信息</h2>
+              <div class="value-table">
+                <div><span>当前 SysID</span><strong>{{ record.sysid }}</strong></div>
+                <div><span>飞控版本</span><strong>{{ record.firmwareVer }}</strong></div>
+                <div><span>机型</span><strong>{{ record.model }}</strong></div>
+                <div><span>链路质量</span><strong>{{ withUnit(rt('linkQuality'), '%') }}</strong></div>
+              </div>
+            </section>
+          </div>
+        </template>
+      </div>
+    </template>
+
+    <DockEditModal :visible="editDockVisible" :dock="record" @close="editDockVisible = false" @saved="handleDockSaved" />
+
+    <div v-if="!record" class="table-empty" style="flex:1;display:grid;place-items:center;color:var(--muted);font-size:12px">
+      未找到该设备
+      <t-button theme="primary" style="margin-top:10px" @click="router.push({ name: 'devices' })">返回设备列表</t-button>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useDeviceStore } from '@/stores/modules/devicesStore'
+import { useUiStore } from '@/stores/modules/uiStore'
+import { useUserStore } from '@/stores/modules/userStore'
+import request from '@/utils/http'
+import DockEditModal from '@/components/DockEditModal.vue'
+import DeviceStatusMatrix from '@/components/DeviceStatusMatrix.vue'
+import DeviceEnvironmentValues from '@/components/DeviceEnvironmentValues.vue'
+import * as urls from '@/config/urls'
+
+const route = useRoute()
+const router = useRouter()
+const devices = useDeviceStore()
+const ui = useUiStore()
+const userStore = useUserStore()
+const isAdmin = computed(() => userStore.isAdmin())
+const activeTab = ref('overview')
+const logs = ref([])
+const alarmRecords = ref([])
+const alarmStatusFilter = ref('')
+const alarmStatusOptions = [
+  { label: '全部告警状态', value: '' },
+  { label: '未恢复', value: 'active' },
+  { label: '已恢复', value: 'resolved' }
+]
+const editDockVisible = ref(false)
+
+const alarmsTabLabel = computed(() => (alarmRecords.value.length ? `告警记录 ${alarmRecords.value.length}` : '告警记录'))
+
+const alarmColumns = [
+  { colKey: 'triggeredAt', title: '告警时间', width: '18%' },
+  { colKey: 'code', title: '告警编码', width: '14%' },
+  { colKey: 'message', title: '告警内容', width: '28%' },
+  { colKey: 'level', title: '级别', width: '10%' },
+  { colKey: 'status', title: '状态', width: '12%' },
+  { colKey: 'resolvedAt', title: '恢复时间', width: '18%' }
+]
+
+const logColumns = [
+  { colKey: 'createdAt', title: '操作时间', width: '20%' },
+  { colKey: 'category', title: '操作类型', width: '14%' },
+  { colKey: 'commandName', title: '操作内容', width: '26%' },
+  { colKey: 'result', title: '执行结果', width: '16%' },
+  { colKey: 'droneSn', title: '目标设备', width: '24%' }
+]
+
+const record = computed(() => devices.record(route.params.id))
+const asset = computed(() => devices.asset(route.params.id))
+const isDrone = computed(() => record.value?.kind === 'drone')
+
+const DETAIL_POLL_MS = 5000
+let detailPollTimer = null
+let detailPollInflight = null
+let detailPollGen = 0
+let detailDisposed = false
+
+function clearDetailPollTimer() {
+  window.clearInterval(detailPollTimer)
+  detailPollTimer = null
+}
+
+async function pollCurrentDetail() {
+  if (detailDisposed) return
+  if (detailPollInflight) return
+  const id = String(route.params.id || '')
+  const rec = devices.record(id)
+  if (!id || !rec) return
+  const gen = detailPollGen
+  const url = rec.kind === 'drone' ? urls.DRONE(id) : urls.DOCK(id)
+  detailPollInflight = request.get(url, { skipErrorToast: true })
+  try {
+    const detail = await detailPollInflight
+    if (detailDisposed || gen !== detailPollGen) return
+    if (String(route.params.id) !== id) return
+    if (rec.kind === 'drone') devices.applyDroneDetail(id, detail || {})
+    else devices.applyDockDetail(id, detail || {})
+  } catch (e) {
+    if (detailDisposed || gen !== detailPollGen) return
+    console.warn('[device-detail] poll failed', e)
+  } finally {
+    detailPollInflight = null
+  }
+}
+
+function startDetailPolling() {
+  clearDetailPollTimer()
+  if (detailDisposed || document.visibilityState === 'hidden') return
+  detailPollTimer = window.setInterval(() => {
+    void pollCurrentDetail()
+  }, DETAIL_POLL_MS)
+}
+
+function stopDetailPolling() {
+  clearDetailPollTimer()
+}
+
+function restartDetailPolling() {
+  detailPollGen += 1
+  detailPollInflight = null  // allow immediate new-id fetch; old response dropped by gen
+  stopDetailPolling()
+  void pollCurrentDetail()
+  startDetailPolling()
+}
+
+function onDetailVisibility() {
+  if (detailDisposed) return
+  if (document.visibilityState === 'hidden') {
+    stopDetailPolling()
+    return
+  }
+  detailPollInflight = null
+  void pollCurrentDetail()
+  startDetailPolling()
+}
+const boundDrone = computed(() => (record.value?.kind === 'dock' ? devices.drones.find((d) => d.dockId === record.value.dockId) : null))
+const boundDock = computed(() => (record.value?.kind === 'drone' ? devices.docks.find((d) => d.dockId === record.value.dockId) : null))
+const latestLog = computed(() => logs.value[0] || null)
+const coordinateText = computed(() => {
+  const rec = record.value
+  if (!rec || rec.longitude == null || rec.latitude == null) return '--'
+  return `${rec.longitude}, ${rec.latitude}`
+})
+const chargeTone = computed(() => String(rt('chargingState') || '').toLowerCase() === 'charging')
+const doorSummary = computed(() => {
+  const left = doorValue('left')
+  const right = doorValue('right')
+  if (isClosed(left) && isClosed(right)) return '已关闭'
+  if (left === 'open' || right === 'open') return '已打开'
+  return displayValue(left || right)
+})
+const armedText = computed(() => {
+  if (isTrue(rt('armed'))) return '已解锁'
+  if (isFalse(rt('armed'))) return '未解锁'
+  return '--'
+})
+const homeSetText = computed(() => {
+  if (isTrue(rt('homeSet'))) return '已设置'
+  if (isFalse(rt('homeSet'))) return '未设置'
+  return '--'
+})
+const statusMatrixItems = computed(() => {
+  const emergency = rt('emergencyStop')
+  const emergencyValue = isTrue(emergency) ? '已触发' : booleanText(emergency) === '--' ? '--' : '未触发'
+  return [
+    { icon: '#i-door', label: '左侧舱门', value: doorText('left'), ok: isClosed(doorValue('left')) },
+    { icon: '#i-door', label: '右侧舱门', value: doorText('right'), ok: isClosed(doorValue('right')) },
+    { icon: '#i-grid', label: '左右归中', value: centeringText('leftRight'), ok: isTight(centeringValue('leftRight')) },
+    { icon: '#i-grid', label: '前后归中', value: centeringText('frontBack'), ok: isTight(centeringValue('frontBack')) },
+    { icon: '#i-alert', label: '急停状态', value: emergencyValue, ok: isFalse(emergency) },
+    { icon: '#i-refresh', label: '整机状态', value: record.value?.status ?? '--', ok: !!record.value?.online }
+  ]
+})
+const environmentItems = computed(() => {
+  const env = record.value?.environment
+  return [
+    { icon: '#i-sun', label: '舱外温度', value: withUnit(env?.outsideTemperature, '℃') },
+    { icon: '#i-sun', label: '舱内温度', value: withUnit(env?.insideTemperature, '℃') },
+    { icon: '#i-cloud-rain', label: '舱外湿度', value: withUnit(env?.outsideHumidity, '%RH') },
+    { icon: '#i-cloud-rain', label: '舱内湿度', value: withUnit(env?.insideHumidity, '%RH') },
+    { icon: '#i-wind', label: '实时风速', value: withUnit(env?.windSpeed, ' m/s') },
+    { icon: '#i-cloud-rain', label: '降雨', value: booleanText(env?.rain) }
+  ]
+})
+const filteredAlarms = computed(() => {
+  if (!alarmStatusFilter.value) return alarmRecords.value
+  if (alarmStatusFilter.value === 'active') return alarmRecords.value.filter((item) => item.status !== 'resolved')
+  return alarmRecords.value.filter((item) => item.status === alarmStatusFilter.value)
+})
+
+function percentValue(value) {
+  return value == null || value === '' || value === '--' ? '--' : `${value}`
+}
+
+function displayValue(value) {
+  return value == null || value === '' ? '--' : value
+}
+
+function withUnit(value, unit) {
+  return value == null || value === '' ? '--' : `${value}${unit}`
+}
+
+function isTrue(value) {
+  return value === true || value === 'true' || value === '1' || value === 1
+}
+
+function isFalse(value) {
+  return value === false || value === 'false' || value === '0' || value === 0
+}
+
+function booleanText(value) {
+  if (isTrue(value)) return '是'
+  if (isFalse(value)) return '否'
+  return '--'
+}
+
+function completeText(value) {
+  if (isTrue(value)) return '已完成'
+  if (isFalse(value)) return '未执行'
+  return '--'
+}
+
+function rt(key, ...aliases) {
+  const realtime = record.value?.realtime || {}
+  for (const name of [key, ...aliases]) {
+    if (realtime[name] != null && realtime[name] !== '') return realtime[name]
+  }
+  return null
+}
+
+function rtObj(key) {
+  const raw = record.value?.realtime?.[key]
+  if (!raw) return {}
+  if (typeof raw === 'object') return raw
+  try { return JSON.parse(raw) || {} } catch { return {} }
+}
+
+function doorValue(side) {
+  return rtObj('door')[side]
+}
+
+function centeringValue(key) {
+  return rtObj('centering')[key]
+}
+
+function isClosed(value) {
+  return value === 'closed' || value === 'close'
+}
+
+function isTight(value) {
+  return value === 'tight'
+}
+
+function doorText(side) {
+  const value = doorValue(side)
+  if (isClosed(value)) return '已关闭'
+  if (value === 'open') return '已打开'
+  return displayValue(value)
+}
+
+function centeringText(key) {
+  const value = centeringValue(key)
+  if (value === 'tight') return '已夹紧'
+  if (value === 'loose') return '已松开'
+  return displayValue(value)
+}
+
+function chargeText(value) {
+  const key = String(value || '').toLowerCase()
+  if (key === 'charging') return '充电中'
+  if (key === 'idle') return '空闲'
+  if (key === 'full' || key === 'charged') return '已充满'
+  return displayValue(value)
+}
+
+onMounted(async () => {
+  detailDisposed = false
+  document.addEventListener('visibilitychange', onDetailVisibility)
+  try {
+    await devices.load()
+    if (!isAdmin.value) {
+      await Promise.all([loadLogs(), loadAlarms()])
+    }
+  } catch (e) {
+    ui.toast(e.message || '加载设备失败')
+  }
+  startDetailPolling()
+})
+
+onUnmounted(() => {
+  detailDisposed = true
+  detailPollGen += 1
+  stopDetailPolling()
+  document.removeEventListener('visibilitychange', onDetailVisibility)
+})
+
+watch(
+  () => String(route.params.id || ''),
+  (next, prev) => {
+    if (!next || next === prev) return
+    restartDetailPolling()
+  }
+)
+
+
+const COMMAND_NAMES = {
+  'dock.open': '打开舱门',
+  'dock.close': '关闭舱门',
+  'dock.reset': '整机复位',
+  'dock.prepare_takeoff': '起飞准备',
+  'dock.complete_takeoff': '起飞准备完成',
+  'dock.prepare_landing': '降落准备',
+  'dock.complete_landing': '降落准备完成',
+  'dock.charge_start': '开始充电',
+  'dock.drone_power_on': '无人机开机',
+  'dock.drone_power_off': '无人机关机',
+  'dock.reboot': '远程重启',
+  'dock.clear_alarm': '清除设备告警',
+  'drone.takeoff': '无人机起飞',
+  'drone.land': '无人机降落',
+  'drone.return': '一键返航',
+  'drone.mission_upload': '上传任务',
+  'drone.mission_start': '开始任务',
+  'drone.mission_pause': '暂停任务',
+  'drone.mission_resume': '继续任务',
+  'drone.mission_cancel': '取消任务',
+  'workflow.start_task': '执行任务',
+  'workflow.one_key_takeoff': '一键起飞',
+  'workflow.one_key_land': '一键降落',
+  'video.start_stream': '开始直播',
+  'video.stop_stream': '停止直播'
+}
+
+const STATUS_NAMES = {
+  sent: { name: '已下发', cls: 'processing', result: '等待应答' },
+  acked: { name: '已确认', cls: 'result-success', result: '执行成功' },
+  timeout: { name: '已超时', cls: 'offline', result: '已超时' },
+  terminal: { name: '执行失败', cls: 'offline', result: '执行失败' }
+}
+
+const ALARM_LEVELS = {
+  critical: { name: '紧急', cls: 'high' },
+  high: { name: '紧急', cls: 'high' },
+  warning: { name: '一般', cls: 'medium' },
+  medium: { name: '一般', cls: 'medium' },
+  info: { name: '提示', cls: 'low' },
+  low: { name: '提示', cls: 'low' }
+}
+
+function fmtTime(t) {
+  if (!t) return '--'
+  const d = new Date(t)
+  return Number.isNaN(d.getTime()) ? '--' : d.toLocaleString('zh-CN', { hour12: false })
+}
+
+async function loadLogs() {
+  const current = record.value
+  if (!current || isAdmin.value) return
+  try {
+    const page = await request.get(urls.COMMANDS, { params: { pageNum: 1, pageSize: 100, dockId: current.dockId } })
+    logs.value = (page?.records || []).filter((log) => current.kind !== 'drone' || log.droneSn === current.droneSn).map((log) => {
+      const status = STATUS_NAMES[log.status] || { name: log.status || '--', cls: 'offline', result: log.status || '--' }
+      const type = log.commandType || ''
+      return {
+        id: String(log.id),
+        category: type.startsWith('workflow.') ? '工作流' : '控制指令',
+        commandName: COMMAND_NAMES[type] || type || '--',
+        droneSn: log.droneSn || '机巢本体',
+        statusName: status.name,
+        result: log.ackResultCode || status.result,
+        resultClass: log.status === 'acked' ? 'result-success' : '',
+        createdAt: fmtTime(log.createdAt)
+      }
+    })
+  } catch (e) {
+    if (e?.response?.status === 403) return
+    ui.toast(e.message || '加载设备操作记录失败')
+  }
+}
+
+async function loadAlarms() {
+  const current = record.value
+  if (!current || isAdmin.value) return
+  try {
+    const page = await request.get(urls.ALARMS, {
+      params: {
+        pageNum: 1,
+        pageSize: 100,
+        dockId: current.dockId,
+        deviceType: current.kind === 'drone' ? 'drone' : 'dock'
+      }
+    })
+    alarmRecords.value = (page?.records || []).map((item) => {
+      const level = ALARM_LEVELS[item.level] || { name: item.level || '--', cls: 'medium' }
+      const resolved = item.status === 'resolved'
+      return {
+        id: String(item.id),
+        code: item.code || '--',
+        message: item.messageCn || item.code || '--',
+        levelName: level.name,
+        levelClass: level.cls,
+        status: item.status,
+        statusName: resolved ? '已恢复' : item.status === 'acknowledged' ? '已确认' : '未恢复',
+        statusClass: resolved ? 'online' : 'offline',
+        triggeredAt: fmtTime(item.triggeredAt || item.createdAt),
+        resolvedAt: fmtTime(item.resolvedAt)
+      }
+    })
+  } catch (e) {
+    if (e?.response?.status === 403) return
+    ui.toast(e.message || '加载告警记录失败')
+  }
+}
+
+async function handleDockSaved() {
+  editDockVisible.value = false
+  try {
+    await devices.load()
+    ui.toast('机巢信息已更新')
+  } catch (e) {
+    ui.toast(e.message || '机巢已保存，但刷新设备数据失败')
+  }
+}
+
+function goControl() {
+  router.push({ name: 'monitor', query: { deviceId: route.params.id, control: '1' } })
+}
+
+function goMonitor() {
+  router.push({ name: 'monitor', query: { deviceId: route.params.id } })
+}
+</script>
+
+<style scoped>
+.device-detail-tabs :deep(.t-tabs__nav-container) {
+  padding: 0 24px;
+}
+.device-detail-tabs :deep(.t-tabs__nav-wrap) {
+  margin-left: 0;
+}
+.full-detail-content :deep(.t-table) {
+  background: transparent;
+}
+</style>
diff --git a/src/views/DevicesView/DevicesView.vue b/src/views/DevicesView/DevicesView.vue
index b66eb5c..4833643 100644
--- a/src/views/DevicesView/DevicesView.vue
+++ b/src/views/DevicesView/DevicesView.vue
@@ -1,829 +1,829 @@
-<template>
-  <section class="device-page">
-      <header class="device-page-header">
-      <div>
-        <h1>设备管理</h1>
-        <span>{{ updatedLabel }}</span>
-      </div>
-      <div class="page-actions">
-        <t-button shape="square" variant="outline" title="刷新" @click="reload"><svg><use href="#i-refresh" /></svg></t-button>
-        <t-button v-if="!isAdmin" theme="primary" @click="openAddDock"><svg><use href="#i-plus" /></svg>添加机巢</t-button>
-      </div>
-    </header>
-
-      <div class="asset-overview">
-      <div><span>机巢总数</span><strong>{{ overview.docks }}</strong><small>台</small></div>
-      <div><span>在线设备</span><strong class="green-text">{{ overview.online }}</strong><small>台</small></div>
-      <div><span>执行任务</span><strong class="blue-text">{{ overview.mission }}</strong><small>台</small></div>
-      <div><span>当前告警</span><strong class="red-text">{{ overview.alarm }}</strong><small>台</small></div>
-      <div><span>绑定无人机</span><strong>{{ overview.boundDrones }}</strong><small>架</small></div>
-    </div>
-
-    <div class="asset-workspace">
-      <t-tabs v-model="tab" class="device-asset-tabs">
-        <t-tab-panel value="docks" :label="docksTabLabel" :destroy-on-hide="false" />
-        <t-tab-panel value="drones" :label="dronesTabLabel" :destroy-on-hide="false" />
-      </t-tabs>
-
-      <div class="asset-toolbar">
-        <div class="asset-search">
-          <t-input
-            v-model="search"
-            clearable
-            placeholder="搜索设备名称、编号或 SN"
-            @keyup.enter="onSearchCommit"
-            @clear="onSearchCommit"
-          >
-            <template #prefix-icon><t-icon name="search" /></template>
-          </t-input>
-        </div>
-        <div class="toolbar-group">
-          <t-select v-model="statusFilter" :options="statusOptions" placeholder="全部状态" style="width: 140px" />
-          <t-select v-model="bindingFilter" :options="bindingOptions" placeholder="全部绑定状态" style="width: 160px" />
-          <t-button variant="outline" type="button" @click="resetFilters">重置</t-button>
-        </div>
-      </div>
-
-      <div class="asset-table-wrap">
-        <t-table
-          row-key="id"
-          :data="tableData"
-          :columns="tableColumns"
-          :empty="tableEmpty"
-          hover
-          @row-click="handleRowClick"
-        >
-          <template #name="{ row }">
-            <div class="asset-name-cell">
-              <span class="table-asset-icon" :class="{ drone: tab === 'drones' }">
-                <svg><use :href="tab === 'drones' ? '#i-plane' : '#i-home'" /></svg>
-              </span>
-              <span><strong>{{ row.name }}</strong><small>{{ row.code }}</small></span>
-            </div>
-          </template>
-          <template #status="{ row }">
-            <span class="table-status" :class="row.statusClass"><i></i>{{ row.status }}</span>
-          </template>
-          <template #binding="{ row }">
-            <span
-              class="binding-cell"
-              :class="{ unbound: tab === 'docks' && row.bindingState === 'unbound' }"
-            >
-              <svg><use href="#i-link" /></svg>{{ row.binding }}
-            </span>
-          </template>
-          <template #actions="{ row }">
-            <div class="row-actions" @click.stop>
-              <template v-if="tab === 'docks'">
-                <t-button v-if="!isAdmin" variant="text" theme="primary" @click="openFirmwareUpgrade(row.id)">固件升级</t-button>
-                <t-button v-if="!isAdmin" variant="text" theme="primary" @click="goControl(row.id)">远程控制</t-button>
-                <t-button variant="text" theme="primary" @click="goDetail(row.id)">详情</t-button>
-                <t-button v-if="!isAdmin" variant="text" theme="danger" @click="deleteDock(row)">删除</t-button>
-              </template>
-              <template v-else>
-                <t-button v-if="!isAdmin" variant="text" theme="primary" @click="ui.toast('请选择航线后上传')">航线上传</t-button>
-                <t-button v-if="!isAdmin" variant="text" theme="primary" @click="goControl(row.id)">远程控制</t-button>
-                <t-button variant="text" theme="primary" @click="goDetail(row.id)">详情</t-button>
-              </template>
-            </div>
-          </template>
-        </t-table>
-      </div>
-
-      <div class="table-footer">
-        <t-pagination
-          v-model:current="pageNum"
-          :total="total"
-          :page-size="pageSize"
-          @current-change="loadTable"
-        />
-      </div>
-    </div>
-
-    <!-- Drawer -->
-    <div class="drawer-scrim" :class="{ open: drawerOpen }" @click="drawerOpen = false"></div>
-    <aside class="device-drawer" :class="{ open: drawerOpen }">
-      <template v-if="drawerRecord">
-        <header>
-          <div class="drawer-identity">
-            <span :class="{ drone: drawerRecord.kind === 'drone' }"><svg><use :href="drawerRecord.kind === 'drone' ? '#i-plane' : '#i-home'" /></svg></span>
-            <div>
-              <small>{{ drawerRecord.kind === 'drone' ? '无人机设备' : '机巢设备' }}</small>
-              <h2>{{ drawerRecord.name }}</h2>
-              <p>{{ drawerRecord.code }}</p>
-            </div>
-          </div>
-          <t-button shape="square" variant="outline" @click="drawerOpen = false"><svg><use href="#i-x" /></svg></t-button>
-        </header>
-
-        <div class="drawer-status">
-          <em class="status" :class="drawerRecord.statusClass">{{ drawerRecord.status }}</em>
-          <span>{{ drawerStatusText }}</span>
-        </div>
-
-        <section class="drawer-section">
-          <h3>基本信息</h3>
-          <dl class="property-list">
-            <template v-if="drawerRecord.kind === 'dock'">
-              <div><dt>机巢 SN</dt><dd>{{ drawerRecord.sn }}</dd></div>
-              <div><dt>通信卡 ICCID</dt><dd>{{ drawerRecord.iccid }}</dd></div>
-              <div><dt>设备位置</dt><dd>{{ drawerRecord.location }}</dd></div>
-              <div><dt>经度</dt><dd>{{ displayCoord(drawerRecord.longitude) }}</dd></div>
-              <div><dt>纬度</dt><dd>{{ displayCoord(drawerRecord.latitude) }}</dd></div>
-              <div><dt>控制模式</dt><dd>{{ drawerRecord.mode }}</dd></div>
-              <div><dt>软件版本</dt><dd>{{ drawerRecord.version }}</dd></div>
-            </template>
-            <template v-else>
-              <div><dt>飞控 SN</dt><dd>{{ drawerRecord.sn }}</dd></div>
-              <div><dt>当前 SysID</dt><dd>{{ drawerRecord.sysid }}</dd></div>
-              <div><dt>飞行模式</dt><dd>{{ drawerRecord.mode }}</dd></div>
-              <div><dt>剩余电量</dt><dd>{{ drawerRecord.battery }}</dd></div>
-              <div><dt>定位状态</dt><dd>{{ drawerRecord.gps }}</dd></div>
-              <div><dt>最近上报</dt><dd>{{ drawerRecord.updated }}</dd></div>
-            </template>
-          </dl>
-        </section>
-
-        <section class="drawer-section">
-          <div class="drawer-section-title"><h3>绑定关系</h3><t-button v-if="!isAdmin" variant="text" theme="primary" @click="ui.toast('管理绑定')">管理绑定</t-button></div>
-          <button class="binding-device" @click="goBinding">
-            <span><svg><use :href="drawerRecord.kind === 'drone' ? '#i-home' : '#i-plane'" /></svg></span>
-            <div><strong>{{ drawerRecord.binding }}</strong><small>{{ drawerBindingText }}</small></div>
-            <svg><use href="#i-chevron" /></svg>
-          </button>
-        </section>
-
-        <footer>
-          <t-button v-if="!isAdmin && drawerRecord.kind === 'dock'" variant="outline" theme="danger" @click="deleteDock(drawerRecord)">删除机巢</t-button>
-          <t-button v-if="!isAdmin && drawerRecord.kind === 'dock'" variant="outline" @click="openEditDock(drawerRecord)">编辑信息</t-button>
-          <t-button theme="primary" @click="goDetail(drawerRecord.id)">查看完整详情</t-button>
-        </footer>
-      </template>
-    </aside>
-
-    <t-dialog
-      v-model:visible="addDockVisible"
-      header="添加机巢"
-      width="520px"
-      destroy-on-close
-      dialog-class-name="add-dock-dialog"
-      placement="center"
-    >
-      <form novalidate @submit.prevent="submitAddDock">
-        <label><span>机巢名称<b>*</b></span><t-input v-model="dockForm.name" :maxlength="30" placeholder="例如：青山湖 03 号机巢" /></label>
-        <label><span>机巢 SN<b>*</b></span><t-input v-model="dockForm.sn" :maxlength="40" placeholder="请输入机身铭牌 SN" /></label>
-        <label><span>通信卡 ICCID<b>*</b></span><t-input v-model="dockForm.iccid" :maxlength="22" placeholder="请输入通信卡 ICCID" /></label>
-        <div class="form-row">
-          <label><span>经度<b>*</b></span><t-input-number v-model="dockForm.longitude" theme="normal" :min="-180" :max="180" :step="0.000001" placeholder="例如：120.219375" style="width: 100%" /></label>
-          <label><span>纬度<b>*</b></span><t-input-number v-model="dockForm.latitude" theme="normal" :min="-90" :max="90" :step="0.000001" placeholder="例如：30.259244" style="width: 100%" /></label>
-        </div>
-        <label><span>设备位置<em>选填</em></span><t-input v-model="dockForm.location" :maxlength="50" placeholder="例如：青山湖科技城 C 区" /></label>
-        <div class="form-error">{{ addDockError }}</div>
-      </form>
-      <template #footer>
-        <t-button variant="outline" type="button" @click="addDockVisible = false">取消</t-button>
-        <t-button theme="primary" type="button" @click="submitAddDock">确认添加</t-button>
-      </template>
-    </t-dialog>
-
-    <DockEditModal :visible="editDockVisible" :dock="editDockRecord" @close="editDockVisible = false" @saved="handleDockSaved" />
-
-    <t-dialog
-      v-model:visible="firmwareVisible"
-      header="固件升级"
-      width="500px"
-      destroy-on-close
-      dialog-class-name="firmware-dialog"
-      placement="center"
-    >
-      <div class="firmware-content" v-if="firmwareRecord">
-        <div class="firmware-device">
-          <span class="table-asset-icon"><svg><use href="#i-home" /></svg></span>
-          <div>
-            <strong>{{ firmwareRecord.name }}</strong>
-            <small>当前版本 {{ firmwareRecord.version }}</small>
-          </div>
-          <i class="status" :class="firmwareRecord.statusClass">{{ firmwareRecord.status }}</i>
-        </div>
-        <label>
-          <span>目标固件版本</span>
-          <t-select
-            v-model="upgradeFirmwareId"
-            :options="upgradeFirmwareOptions"
-            :placeholder="firmwareList.length ? '选择目标版本' : '暂无已发布固件'"
-            :disabled="!firmwareList.length"
-            clearable
-            style="width: 100%"
-          />
-        </label>
-        <div class="firmware-checks">
-          <span>升级前请确认设备状态</span>
-        </div>
-        <p class="firmware-note">升级期间机巢将暂时停止远程控制和视频服务，请确认当前没有飞行任务。升级完成后设备会自动重启并恢复连接。</p>
-        <div class="form-error">{{ firmwareError }}</div>
-      </div>
-      <template #footer>
-        <t-button variant="outline" type="button" @click="firmwareVisible = false">取消</t-button>
-        <t-button theme="primary" type="button" :disabled="!upgradeFirmwareId || upgrading" @click="doUpgrade">{{ upgrading ? '下发中…' : '开始升级' }}</t-button>
-      </template>
-    </t-dialog>
-  </section>
-</template>
-
-<script setup>
-import { computed, onMounted, reactive, ref, watch } from 'vue'
-import { useDeviceStore } from '@/stores/modules/devicesStore'
-import { useUiStore } from '@/stores/modules/uiStore'
-import { useRouter } from 'vue-router'
-import { useUserStore } from '@/stores/modules/userStore'
-import request from '@/utils/http'
-import DockEditModal from '@/components/DockEditModal.vue'
-import * as urls from '@/config/urls'
-
-const devices = useDeviceStore()
-const ui = useUiStore()
-const router = useRouter()
-const userStore = useUserStore()
-const isAdmin = computed(() => userStore.isAdmin())
-
-const tab = ref('docks')
-const pageNum = ref(1)
-const pageSize = 20
-const total = ref(0)
-const tableRecords = ref([])
-const docksTotal = ref(0)
-const dronesTotal = ref(0)
-const search = ref('')
-const searchKeyword = ref('')
-const statusFilter = ref('')
-const bindingFilter = ref('')
-let searchTimer = null
-
-const statusOptions = [
-  { label: '全部状态', value: '' },
-  { label: '在线', value: 'online' },
-  { label: '任务中', value: 'mission' },
-  { label: '告警', value: 'alarm' },
-  { label: '离线', value: 'offline' },
-  { label: '待连接', value: 'pending' }
-]
-const bindingOptions = [
-  { label: '全部绑定状态', value: '' },
-  { label: '已绑定', value: 'bound' },
-  { label: '未绑定', value: 'unbound' }
-]
-const loadedAt = ref('')
-const drawerOpen = ref(false)
-const drawerId = ref(null)
-const addDockVisible = ref(false)
-const editDockVisible = ref(false)
-const editDockRecord = ref(null)
-const addDockError = ref('')
-const dockForm = reactive({ name: '', sn: '', iccid: '', longitude: undefined, latitude: undefined, location: '' })
-const firmwareList = ref([])
-const upgradeFirmwareId = ref(null)
-const upgrading = ref(false)
-const firmwareVisible = ref(false)
-const firmwareError = ref('')
-
-function findLocalRecord(id) {
-  const key = String(id)
-  return tableRecords.value.find((d) => d.id === key) || devices.record(key)
-}
-
-const firmwareRecord = computed(() => (drawerId.value ? findLocalRecord(drawerId.value) : null))
-const upgradeFirmwareOptions = computed(() =>
-  firmwareList.value.map((f) => ({ label: firmwareOptionLabel(f), value: f.id }))
-)
-const drawerRecord = computed(() => (drawerId.value ? findLocalRecord(drawerId.value) : null))
-
-const overview = computed(() => {
-  const all = [...devices.docks, ...devices.drones]
-  return {
-    docks: devices.docks.length,
-    online: all.filter((d) => d.statusClass === 'online' || d.statusClass === 'mission').length,
-    mission: all.filter((d) => d.statusClass === 'mission').length,
-    alarm: all.filter((d) => d.statusClass === 'alarm').length,
-    boundDrones: devices.drones.filter((d) => d.bindingState === 'bound').length
-  }
-})
-
-const updatedLabel = computed(() => (loadedAt.value ? `数据更新于 ${loadedAt.value}` : '管理机巢与无人机设备的接入、绑定与运行状态'))
-
-const drawerStatusText = computed(() => {
-  const rec = drawerRecord.value
-  if (!rec) return ''
-  if (rec.statusClass === 'pending') return '机巢已添加，等待设备连接'
-  if (rec.statusClass === 'offline') return `设备最后上报于 ${rec.updated}`
-  return `状态数据更新于 ${rec.updated}`
-})
-
-const drawerBindingText = computed(() => {
-  const rec = drawerRecord.value
-  if (!rec) return ''
-  if (rec.kind === 'dock' && rec.bindingState === 'bound') {
-    const drone = devices.drones.find((d) => d.dockId === rec.dockId)
-    return drone?.battery && drone.battery !== '--' ? `已入巢 · 电量 ${drone.battery}` : '绑定关系正常'
-  }
-  return rec.bindingState === 'bound' ? '绑定关系正常' : '当前未绑定设备'
-})
-
-function displayCoord(value) {
-  return value == null || value === '' ? '--' : value
-}
-
-function fmtTime(t) {
-  if (!t) return '--'
-  const d = new Date(t)
-  if (Number.isNaN(d.getTime())) return '--'
-  return d.toLocaleString('zh-CN', { hour12: false })
-}
-
-function parseJson(value, fallback = null) {
-  if (!value) return fallback
-  if (typeof value === 'object') return value
-  try { return JSON.parse(value) } catch { return fallback }
-}
-
-function alarmCodes(realtime) {
-  const codes = parseJson(realtime?.alarmCodes, [])
-  return Array.isArray(codes) ? codes : []
-}
-
-function modeText(m) {
-  const key = String(m || '').toUpperCase()
-  switch (key) {
-    case 'STANDBY': return '待命'
-    case 'AUTO': return 'AUTO'
-    case 'GUIDED': return 'GUIDED'
-    case 'LOITER': return '悬停'
-    case 'RTL': return '返航'
-    default: return m || '--'
-  }
-}
-
-function controlModeText(m) {
-  const key = String(m || '').toLowerCase()
-  if (key === 'auto' || key === 'automatic') return '自动'
-  if (key === 'manual') return '手动'
-  return m || '--'
-}
-
-function displayValue(value) {
-  return value == null || value === '' ? '--' : String(value)
-}
-
-function coordinate(value, min, max) {
-  const number = Number(value)
-  return Number.isFinite(number) && number >= min && number <= max ? number : null
-}
-
-function gpsText(q) {
-  const key = String(q || '').toUpperCase().replace(/-/g, '_')
-  switch (key) {
-    case 'RTK_FIX':
-    case 'RTK_FIXED': return 'RTK 固定解'
-    case 'RTK_FLOAT': return 'RTK 浮点解'
-    case '3D_FIX': return '3D 定位'
-    case '2D_FIX': return '2D 定位'
-    default: return q ? String(q) : '无定位'
-  }
-}
-
-function mapDockRow(d, detail = {}) {
-  const id = String(d.id)
-  const rt = detail.realtime || {}
-  const online = Boolean(detail.online)
-  const registerStatus = d.registerStatus || 'registered'
-  const pending = registerStatus === 'pending' && !online
-  const st = pending
-    ? { status: '待连接', statusClass: 'pending' }
-    : online
-      ? alarmCodes(rt).length ? { status: '告警', statusClass: 'alarm' } : { status: '在线', statusClass: 'online' }
-      : { status: '离线', statusClass: 'offline' }
-  const cachedDrone = devices.drones.find((dr) => dr.dockId === d.dockId)
-  return {
-    id,
-    kind: 'dock',
-    dockId: d.dockId,
-    name: d.name || d.dockId,
-    code: d.code || d.sn || d.dockId,
-    sn: d.sn || d.dockId || '--',
-    iccid: d.iccid || '--',
-    longitude: coordinate(d.longitude, -180, 180),
-    latitude: coordinate(d.latitude, -90, 90),
-    location: d.location || '--',
-    status: st.status,
-    statusClass: st.statusClass,
-    binding: cachedDrone?.name || '--',
-    bindingState: cachedDrone ? 'bound' : 'unbound',
-    mode: controlModeText(rt.controlMode),
-    version: d.softwareVer ? `v${d.softwareVer}` : '--',
-    updated: fmtTime(d.updatedAt),
-    protocol: d.protocolVer ? `MQTT v${d.protocolVer}` : '--',
-    registerStatus,
-    realtime: rt,
-    online
-  }
-}
-
-function mapDroneRow(d, detail = {}) {
-  const id = String(d.id)
-  const rt = detail.realtime || {}
-  const armed = ['1', 'true', 1, true].includes(rt.armed)
-  const altitude = coordinate(rt.altitude, -1000, 100000)
-  const flying = armed || (altitude != null && altitude > 0)
-  const online = Boolean(detail.online)
-  const st = !online
-    ? { status: '离线', statusClass: 'offline' }
-    : flying
-      ? { status: '飞行中', statusClass: 'mission' }
-      : { status: '在巢', statusClass: 'online' }
-  const dock = devices.docks.find((dk) => dk.dockId === d.dockId)
-  const battery = rt.batteryPercent ?? rt.batteryPct ?? d.battery
-  return {
-    id,
-    kind: 'drone',
-    droneSn: d.droneSn,
-    dockId: d.dockId,
-    name: d.name || d.droneSn,
-    code: d.code || d.droneSn,
-    status: st.status,
-    statusClass: st.statusClass,
-    binding: dock?.name || '--',
-    bindingState: dock ? 'bound' : 'unbound',
-    battery: battery != null && battery !== '' ? `${battery}%` : '--',
-    mode: modeText(rt.flightMode),
-    mission: displayValue(rt.missionName || rt.mission),
-    updated: fmtTime(d.updatedAt),
-    sysid: displayValue(rt.currentSysId),
-    gps: gpsText(rt.gpsQuality),
-    sn: d.droneSn || d.code || '--',
-    model: d.model || '--',
-    firmwareVer: d.firmwareVer || '--',
-    realtime: rt,
-    online
-  }
-}
-
-async function enrichRecords(records, kind) {
-  if (!records.length) return []
-  const details = await Promise.all(
-    records.map((row) =>
-      request
-        .get(kind === 'docks' ? urls.DOCK(row.id) : urls.DRONE(row.id))
-        .then((r) => r || {})
-        .catch(() => ({}))
-    )
-  )
-  return records.map((row, i) => (kind === 'docks' ? mapDockRow(row, details[i]) : mapDroneRow(row, details[i])))
-}
-
-async function loadTable() {
-  const kind = tab.value
-  const params = { pageNum: pageNum.value, pageSize }
-  const keyword = searchKeyword.value.trim()
-  if (keyword) params.keyword = keyword
-  try {
-    const page = await request.get(kind === 'docks' ? urls.DOCKS : urls.DRONES, { params })
-    const records = page?.records || []
-    total.value = Number(page?.total) || 0
-    if (kind === 'docks') docksTotal.value = total.value
-    else dronesTotal.value = total.value
-    tableRecords.value = await enrichRecords(records, kind)
-  } catch (e) {
-    tableRecords.value = []
-    total.value = 0
-    ui.toast(e.message || '加载设备列表失败')
-  }
-}
-
-function matchesClientFilters(d) {
-  if (statusFilter.value && d.statusClass !== statusFilter.value) return false
-  if (bindingFilter.value && d.bindingState !== bindingFilter.value) return false
-  return true
-}
-
-const docksTabLabel = computed(() => `机巢设备 ${docksTotal.value || devices.docks.length}`)
-const dronesTabLabel = computed(() => `无人机 ${dronesTotal.value || devices.drones.length}`)
-
-const dockColumns = [
-  { colKey: 'name', title: '机巢设备', width: '18%' },
-  { colKey: 'status', title: '状态' },
-  { colKey: 'binding', title: '绑定无人机' },
-  { colKey: 'mode', title: '控制模式' },
-  { colKey: 'location', title: '设备位置' },
-  { colKey: 'version', title: '软件版本' },
-  { colKey: 'updated', title: '最近上报' },
-  { colKey: 'actions', title: '操作', width: '20%' }
-]
-
-const droneColumns = [
-  { colKey: 'name', title: '无人机', width: '18%' },
-  { colKey: 'status', title: '状态' },
-  { colKey: 'binding', title: '所属机巢' },
-  { colKey: 'battery', title: '电量' },
-  { colKey: 'mode', title: '飞行模式' },
-  { colKey: 'mission', title: '当前任务' },
-  { colKey: 'updated', title: '最近上报' },
-  { colKey: 'actions', title: '操作', width: '22%' }
-]
-
-const tableColumns = computed(() => (tab.value === 'docks' ? dockColumns : droneColumns))
-const tableData = computed(() => tableRecords.value.filter(matchesClientFilters))
-const tableEmpty = computed(() =>
-  statusFilter.value || bindingFilter.value
-    ? '当前页无符合条件的设备（状态/绑定仅筛选当前页）'
-    : '暂无符合条件的设备'
-)
-
-function onSearchCommit() {
-  if (searchTimer) {
-    clearTimeout(searchTimer)
-    searchTimer = null
-  }
-  const next = search.value.trim()
-  if (searchKeyword.value === next && pageNum.value === 1) {
-    loadTable()
-    return
-  }
-  searchKeyword.value = next
-  pageNum.value = 1
-  loadTable()
-}
-
-watch(search, (value) => {
-  if (searchTimer) clearTimeout(searchTimer)
-  searchTimer = setTimeout(() => {
-    searchTimer = null
-    const next = String(value || '').trim()
-    if (searchKeyword.value === next) return
-    searchKeyword.value = next
-    pageNum.value = 1
-    loadTable()
-  }, 300)
-})
-
-watch(tab, () => {
-  if (searchTimer) {
-    clearTimeout(searchTimer)
-    searchTimer = null
-  }
-  search.value = ''
-  searchKeyword.value = ''
-  statusFilter.value = ''
-  bindingFilter.value = ''
-  drawerOpen.value = false
-  pageNum.value = 1
-  loadTable()
-})
-
-function handleRowClick({ row }) {
-  openDrawer(row.id)
-}
-
-function resetFilters(reload = true) {
-  if (searchTimer) {
-    clearTimeout(searchTimer)
-    searchTimer = null
-  }
-  search.value = ''
-  searchKeyword.value = ''
-  statusFilter.value = ''
-  bindingFilter.value = ''
-  if (reload) {
-    pageNum.value = 1
-    loadTable()
-  }
-}
-
-function openDrawer(id) {
-  drawerId.value = id
-  drawerOpen.value = true
-}
-
-function goControl(id) {
-  router.push({ name: 'monitor', query: { deviceId: id, control: '1' } })
-}
-
-async function reload() {
-  try {
-    await Promise.all([loadTable(), devices.load()])
-    loadedAt.value = new Date().toLocaleTimeString('zh-CN', { hour12: false })
-    ui.toast('设备列表已刷新')
-  } catch (e) {
-    ui.toast(e.message || '刷新设备列表失败')
-  }
-}
-
-function goDetail(id) {
-  drawerOpen.value = false
-  router.push({ name: 'device-detail', params: { id } })
-}
-
-async function openFirmwareUpgrade(id) {
-  drawerId.value = id
-  firmwareError.value = ''
-  upgradeFirmwareId.value = null
-  firmwareVisible.value = true
-  await loadFirmwares()
-  if (!firmwareList.value.length && !firmwareError.value) {
-    firmwareError.value = '暂无已发布固件，请先在固件管理中发布版本。'
-  }
-}
-
-function goBinding() {
-  ui.toast('请选择要绑定的设备')
-}
-
-function openEditDock(dock) {
-  editDockRecord.value = dock
-  editDockVisible.value = true
-}
-
-async function deleteDock(dock) {
-  const ok = await ui.confirm(`确认硬删除机巢「${dock.name}」？`, '删除后机巢及其关联设备数据将永久移除，且无法恢复。')
-  if (!ok) return
-  try {
-    await request.delete(urls.DOCK(dock.id))
-    drawerOpen.value = false
-    ui.toast('机巢已永久删除')
-    await loadTable()
-    await devices.load()
-  } catch (e) {
-    ui.toast(e.message || '删除机巢失败')
-  }
-}
-
-async function handleDockSaved() {
-  editDockVisible.value = false
-  try {
-    await loadTable()
-    await devices.load()
-    ui.toast('机巢信息已更新')
-  } catch (e) {
-    ui.toast(e.message || '机巢已保存，但刷新设备数据失败')
-  }
-}
-
-function openAddDock() {
-  Object.assign(dockForm, { name: '', sn: '', iccid: '', longitude: undefined, latitude: undefined, location: '' })
-  addDockError.value = ''
-  addDockVisible.value = true
-}
-
-async function submitAddDock() {
-  addDockError.value = ''
-  const name = dockForm.name.trim()
-  const sn = dockForm.sn.trim().toUpperCase()
-  const iccid = dockForm.iccid.trim().replace(/\s+/g, '')
-  const longitude = Number(dockForm.longitude)
-  const latitude = Number(dockForm.latitude)
-
-  if (!name || !sn || !iccid || dockForm.longitude === '' || dockForm.longitude == null || dockForm.latitude === '' || dockForm.latitude == null) {
-    addDockError.value = '请填写机巢名称、机巢 SN、通信卡 ICCID、经度和纬度。'
-    return
-  }
-  if (!Number.isFinite(longitude) || longitude < -180 || longitude > 180) {
-    addDockError.value = '经度应在 -180～180 之间。'
-    return
-  }
-  if (!Number.isFinite(latitude) || latitude < -90 || latitude > 90) {
-    addDockError.value = '纬度应在 -90～90 之间。'
-    return
-  }
-  if (devices.docks.some((dock) => dock.sn.toUpperCase() === sn || dock.iccid.replace(/--/g, '') === iccid)) {
-    addDockError.value = '机巢 SN 或通信卡 ICCID 已存在。'
-    return
-  }
-
-  try {
-    await request.post(urls.DOCKS, {
-      dockId: sn,
-      name,
-      code: sn,
-      sn,
-      iccid,
-      location: dockForm.location.trim(),
-      longitude,
-      latitude
-    })
-    addDockVisible.value = false
-    ui.toast('机巢已成功接入')
-    await loadTable()
-    await devices.load()
-  } catch (e) {
-    addDockError.value = e.message || '接入失败'
-  }
-}
-
-async function loadFirmwares() {
-  try {
-    const list = await request.get(urls.FIRMWARES_RELEASED)
-    const records = Array.isArray(list) ? list : list?.records || []
-    firmwareList.value = records.map((f) => ({
-      id: String(f.id),
-      version: f.version,
-      description: f.description || '',
-      mandatory: Number(f.mandatory) === 1
-    }))
-  } catch (e) {
-    firmwareList.value = []
-    firmwareError.value = e.message || '加载固件版本失败'
-  }
-}
-
-function firmwareOptionLabel(f) {
-  const tag = f.mandatory ? '强制升级' : '推荐稳定版'
-  return f.description ? `${f.version} · ${tag} · ${f.description}` : `${f.version} · ${tag}`
-}
-
-async function doUpgrade() {
-  const rec = firmwareRecord.value
-  firmwareError.value = ''
-  if (!rec || !upgradeFirmwareId.value) {
-    firmwareError.value = '请选择目标固件版本。'
-    return
-  }
-  if (rec.statusClass === 'offline') {
-    firmwareError.value = '设备离线，无法下发升级。'
-    return
-  }
-  const ok = await ui.confirm('确认升级固件？', `将把机巢「${rec.name}」升级到所选版本，升级期间设备可能短暂离线。`)
-  if (!ok) return
-  upgrading.value = true
-  try {
-    await request.post(urls.DOCK_FIRMWARE_UPGRADE(rec.id), { firmwareId: Number(upgradeFirmwareId.value) })
-    firmwareVisible.value = false
-    upgradeFirmwareId.value = null
-    ui.toast('升级指令已下发')
-  } catch (e) {
-    firmwareError.value = e.message || '升级下发失败'
-  } finally {
-    upgrading.value = false
-  }
-}
-
-onMounted(async () => {
-  try {
-    await Promise.all([devices.load(), loadTable()])
-    loadedAt.value = new Date().toLocaleTimeString('zh-CN', { hour12: false })
-  } catch (e) {
-    ui.toast(e.message || '加载设备失败')
-  }
-  if (!isAdmin.value) loadFirmwares()
-})
-</script>
-
-<style scoped>
-.asset-search :deep(.t-input) {
-  width: 100%;
-}
-.asset-search {
-  border: 0;
-  padding: 0;
-  height: auto;
-}
-.toolbar-group :deep(.t-select) {
-  flex-shrink: 0;
-}
-.page-actions :deep(.t-button svg) {
-  width: 14px;
-  height: 14px;
-}
-.row-actions :deep(.t-button) {
-  height: 28px;
-}
-.drawer-section-title :deep(.t-button) {
-  font-size: 11px;
-}
-.device-asset-tabs :deep(.t-tabs__nav-container) {
-  padding: 0 18px;
-}
-.device-asset-tabs :deep(.t-tabs__nav-wrap) {
-  margin-left: 0;
-}
-.asset-table-wrap :deep(.t-table) {
-  background: transparent;
-}
-.asset-table-wrap :deep(.t-table__body tr) {
-  cursor: pointer;
-}
-</style>
-
-<style>
-.add-dock-dialog .t-input,
-.add-dock-dialog .t-input-number,
-.firmware-dialog .t-select {
-  width: 100%;
-}
-.add-dock-dialog .t-dialog__footer,
-.firmware-dialog .t-dialog__footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-}
-.firmware-dialog .firmware-content {
-  padding: 0;
-}
-</style>
+<template>
+  <section class="device-page">
+      <header class="device-page-header">
+      <div>
+        <h1>设备管理</h1>
+        <span>{{ updatedLabel }}</span>
+      </div>
+      <div class="page-actions">
+        <t-button shape="square" variant="outline" title="刷新" @click="reload"><svg><use href="#i-refresh" /></svg></t-button>
+        <t-button v-if="!isAdmin" theme="primary" @click="openAddDock"><svg><use href="#i-plus" /></svg>添加机巢</t-button>
+      </div>
+    </header>
+
+      <div class="asset-overview">
+      <div><span>机巢总数</span><strong>{{ overview.docks }}</strong><small>台</small></div>
+      <div><span>在线设备</span><strong class="green-text">{{ overview.online }}</strong><small>台</small></div>
+      <div><span>执行任务</span><strong class="blue-text">{{ overview.mission }}</strong><small>台</small></div>
+      <div><span>当前告警</span><strong class="red-text">{{ overview.alarm }}</strong><small>台</small></div>
+      <div><span>绑定无人机</span><strong>{{ overview.boundDrones }}</strong><small>架</small></div>
+    </div>
+
+    <div class="asset-workspace">
+      <t-tabs v-model="tab" class="device-asset-tabs">
+        <t-tab-panel value="docks" :label="docksTabLabel" :destroy-on-hide="false" />
+        <t-tab-panel value="drones" :label="dronesTabLabel" :destroy-on-hide="false" />
+      </t-tabs>
+
+      <div class="asset-toolbar">
+        <div class="asset-search">
+          <t-input
+            v-model="search"
+            clearable
+            placeholder="搜索设备名称、编号或 SN"
+            @keyup.enter="onSearchCommit"
+            @clear="onSearchCommit"
+          >
+            <template #prefix-icon><t-icon name="search" /></template>
+          </t-input>
+        </div>
+        <div class="toolbar-group">
+          <t-select v-model="statusFilter" :options="statusOptions" placeholder="全部状态" style="width: 140px" />
+          <t-select v-model="bindingFilter" :options="bindingOptions" placeholder="全部绑定状态" style="width: 160px" />
+          <t-button variant="outline" type="button" @click="resetFilters">重置</t-button>
+        </div>
+      </div>
+
+      <div class="asset-table-wrap">
+        <t-table
+          row-key="id"
+          :data="tableData"
+          :columns="tableColumns"
+          :empty="tableEmpty"
+          hover
+          @row-click="handleRowClick"
+        >
+          <template #name="{ row }">
+            <div class="asset-name-cell">
+              <span class="table-asset-icon" :class="{ drone: tab === 'drones' }">
+                <svg><use :href="tab === 'drones' ? '#i-plane' : '#i-home'" /></svg>
+              </span>
+              <span><strong>{{ row.name }}</strong><small>{{ row.code }}</small></span>
+            </div>
+          </template>
+          <template #status="{ row }">
+            <span class="table-status" :class="row.statusClass"><i></i>{{ row.status }}</span>
+          </template>
+          <template #binding="{ row }">
+            <span
+              class="binding-cell"
+              :class="{ unbound: tab === 'docks' && row.bindingState === 'unbound' }"
+            >
+              <svg><use href="#i-link" /></svg>{{ row.binding }}
+            </span>
+          </template>
+          <template #actions="{ row }">
+            <div class="row-actions" @click.stop>
+              <template v-if="tab === 'docks'">
+                <t-button v-if="!isAdmin" variant="text" theme="primary" @click="openFirmwareUpgrade(row.id)">固件升级</t-button>
+                <t-button v-if="!isAdmin" variant="text" theme="primary" @click="goControl(row.id)">远程控制</t-button>
+                <t-button variant="text" theme="primary" @click="goDetail(row.id)">详情</t-button>
+                <t-button v-if="!isAdmin" variant="text" theme="danger" @click="deleteDock(row)">删除</t-button>
+              </template>
+              <template v-else>
+                <t-button v-if="!isAdmin" variant="text" theme="primary" @click="ui.toast('请选择航线后上传')">航线上传</t-button>
+                <t-button v-if="!isAdmin" variant="text" theme="primary" @click="goControl(row.id)">远程控制</t-button>
+                <t-button variant="text" theme="primary" @click="goDetail(row.id)">详情</t-button>
+              </template>
+            </div>
+          </template>
+        </t-table>
+      </div>
+
+      <div class="table-footer">
+        <t-pagination
+          v-model:current="pageNum"
+          :total="total"
+          :page-size="pageSize"
+          @current-change="loadTable"
+        />
+      </div>
+    </div>
+
+    <!-- Drawer -->
+    <div class="drawer-scrim" :class="{ open: drawerOpen }" @click="drawerOpen = false"></div>
+    <aside class="device-drawer" :class="{ open: drawerOpen }">
+      <template v-if="drawerRecord">
+        <header>
+          <div class="drawer-identity">
+            <span :class="{ drone: drawerRecord.kind === 'drone' }"><svg><use :href="drawerRecord.kind === 'drone' ? '#i-plane' : '#i-home'" /></svg></span>
+            <div>
+              <small>{{ drawerRecord.kind === 'drone' ? '无人机设备' : '机巢设备' }}</small>
+              <h2>{{ drawerRecord.name }}</h2>
+              <p>{{ drawerRecord.code }}</p>
+            </div>
+          </div>
+          <t-button shape="square" variant="outline" @click="drawerOpen = false"><svg><use href="#i-x" /></svg></t-button>
+        </header>
+
+        <div class="drawer-status">
+          <em class="status" :class="drawerRecord.statusClass">{{ drawerRecord.status }}</em>
+          <span>{{ drawerStatusText }}</span>
+        </div>
+
+        <section class="drawer-section">
+          <h3>基本信息</h3>
+          <dl class="property-list">
+            <template v-if="drawerRecord.kind === 'dock'">
+              <div><dt>机巢 SN</dt><dd>{{ drawerRecord.sn }}</dd></div>
+              <div><dt>通信卡 ICCID</dt><dd>{{ drawerRecord.iccid }}</dd></div>
+              <div><dt>设备位置</dt><dd>{{ drawerRecord.location }}</dd></div>
+              <div><dt>经度</dt><dd>{{ displayCoord(drawerRecord.longitude) }}</dd></div>
+              <div><dt>纬度</dt><dd>{{ displayCoord(drawerRecord.latitude) }}</dd></div>
+              <div><dt>控制模式</dt><dd>{{ drawerRecord.mode }}</dd></div>
+              <div><dt>软件版本</dt><dd>{{ drawerRecord.version }}</dd></div>
+            </template>
+            <template v-else>
+              <div><dt>飞控 SN</dt><dd>{{ drawerRecord.sn }}</dd></div>
+              <div><dt>当前 SysID</dt><dd>{{ drawerRecord.sysid }}</dd></div>
+              <div><dt>飞行模式</dt><dd>{{ drawerRecord.mode }}</dd></div>
+              <div><dt>剩余电量</dt><dd>{{ drawerRecord.battery }}</dd></div>
+              <div><dt>定位状态</dt><dd>{{ drawerRecord.gps }}</dd></div>
+              <div><dt>最近上报</dt><dd>{{ drawerRecord.updated }}</dd></div>
+            </template>
+          </dl>
+        </section>
+
+        <section class="drawer-section">
+          <div class="drawer-section-title"><h3>绑定关系</h3><t-button v-if="!isAdmin" variant="text" theme="primary" @click="ui.toast('管理绑定')">管理绑定</t-button></div>
+          <button class="binding-device" @click="goBinding">
+            <span><svg><use :href="drawerRecord.kind === 'drone' ? '#i-home' : '#i-plane'" /></svg></span>
+            <div><strong>{{ drawerRecord.binding }}</strong><small>{{ drawerBindingText }}</small></div>
+            <svg><use href="#i-chevron" /></svg>
+          </button>
+        </section>
+
+        <footer>
+          <t-button v-if="!isAdmin && drawerRecord.kind === 'dock'" variant="outline" theme="danger" @click="deleteDock(drawerRecord)">删除机巢</t-button>
+          <t-button v-if="!isAdmin && drawerRecord.kind === 'dock'" variant="outline" @click="openEditDock(drawerRecord)">编辑信息</t-button>
+          <t-button theme="primary" @click="goDetail(drawerRecord.id)">查看完整详情</t-button>
+        </footer>
+      </template>
+    </aside>
+
+    <t-dialog
+      v-model:visible="addDockVisible"
+      header="添加机巢"
+      width="520px"
+      destroy-on-close
+      dialog-class-name="add-dock-dialog"
+      placement="center"
+    >
+      <form novalidate @submit.prevent="submitAddDock">
+        <label><span>机巢名称<b>*</b></span><t-input v-model="dockForm.name" :maxlength="30" placeholder="例如：青山湖 03 号机巢" /></label>
+        <label><span>机巢 SN<b>*</b></span><t-input v-model="dockForm.sn" :maxlength="40" placeholder="请输入机身铭牌 SN" /></label>
+        <label><span>通信卡 ICCID<b>*</b></span><t-input v-model="dockForm.iccid" :maxlength="32" placeholder="输入 ICCID 后自动创建通信卡并查询供应商信息" /></label>
+        <div class="form-row">
+          <label><span>经度<b>*</b></span><t-input-number v-model="dockForm.longitude" theme="normal" :min="-180" :max="180" :step="0.000001" placeholder="例如：120.219375" style="width: 100%" /></label>
+          <label><span>纬度<b>*</b></span><t-input-number v-model="dockForm.latitude" theme="normal" :min="-90" :max="90" :step="0.000001" placeholder="例如：30.259244" style="width: 100%" /></label>
+        </div>
+        <label><span>设备位置<em>选填</em></span><t-input v-model="dockForm.location" :maxlength="50" placeholder="例如：青山湖科技城 C 区" /></label>
+        <div class="form-error">{{ addDockError }}</div>
+      </form>
+      <template #footer>
+        <t-button variant="outline" type="button" @click="addDockVisible = false">取消</t-button>
+        <t-button theme="primary" type="button" @click="submitAddDock">确认添加</t-button>
+      </template>
+    </t-dialog>
+
+    <DockEditModal :visible="editDockVisible" :dock="editDockRecord" @close="editDockVisible = false" @saved="handleDockSaved" />
+
+    <t-dialog
+      v-model:visible="firmwareVisible"
+      header="固件升级"
+      width="500px"
+      destroy-on-close
+      dialog-class-name="firmware-dialog"
+      placement="center"
+    >
+      <div class="firmware-content" v-if="firmwareRecord">
+        <div class="firmware-device">
+          <span class="table-asset-icon"><svg><use href="#i-home" /></svg></span>
+          <div>
+            <strong>{{ firmwareRecord.name }}</strong>
+            <small>当前版本 {{ firmwareRecord.version }}</small>
+          </div>
+          <i class="status" :class="firmwareRecord.statusClass">{{ firmwareRecord.status }}</i>
+        </div>
+        <label>
+          <span>目标固件版本</span>
+          <t-select
+            v-model="upgradeFirmwareId"
+            :options="upgradeFirmwareOptions"
+            :placeholder="firmwareList.length ? '选择目标版本' : '暂无已发布固件'"
+            :disabled="!firmwareList.length"
+            clearable
+            style="width: 100%"
+          />
+        </label>
+        <div class="firmware-checks">
+          <span>升级前请确认设备状态</span>
+        </div>
+        <p class="firmware-note">升级期间机巢将暂时停止远程控制和视频服务，请确认当前没有飞行任务。升级完成后设备会自动重启并恢复连接。</p>
+        <div class="form-error">{{ firmwareError }}</div>
+      </div>
+      <template #footer>
+        <t-button variant="outline" type="button" @click="firmwareVisible = false">取消</t-button>
+        <t-button theme="primary" type="button" :disabled="!upgradeFirmwareId || upgrading" @click="doUpgrade">{{ upgrading ? '下发中…' : '开始升级' }}</t-button>
+      </template>
+    </t-dialog>
+  </section>
+</template>
+
+<script setup>
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { useDeviceStore } from '@/stores/modules/devicesStore'
+import { useUiStore } from '@/stores/modules/uiStore'
+import { useRouter } from 'vue-router'
+import { useUserStore } from '@/stores/modules/userStore'
+import request from '@/utils/http'
+import DockEditModal from '@/components/DockEditModal.vue'
+import * as urls from '@/config/urls'
+
+const devices = useDeviceStore()
+const ui = useUiStore()
+const router = useRouter()
+const userStore = useUserStore()
+const isAdmin = computed(() => userStore.isAdmin())
+
+const tab = ref('docks')
+const pageNum = ref(1)
+const pageSize = 20
+const total = ref(0)
+const tableRecords = ref([])
+const docksTotal = ref(0)
+const dronesTotal = ref(0)
+const search = ref('')
+const searchKeyword = ref('')
+const statusFilter = ref('')
+const bindingFilter = ref('')
+let searchTimer = null
+
+const statusOptions = [
+  { label: '全部状态', value: '' },
+  { label: '在线', value: 'online' },
+  { label: '任务中', value: 'mission' },
+  { label: '告警', value: 'alarm' },
+  { label: '离线', value: 'offline' },
+  { label: '待连接', value: 'pending' }
+]
+const bindingOptions = [
+  { label: '全部绑定状态', value: '' },
+  { label: '已绑定', value: 'bound' },
+  { label: '未绑定', value: 'unbound' }
+]
+const loadedAt = ref('')
+const drawerOpen = ref(false)
+const drawerId = ref(null)
+const addDockVisible = ref(false)
+const editDockVisible = ref(false)
+const editDockRecord = ref(null)
+const addDockError = ref('')
+const dockForm = reactive({ name: '', sn: '', iccid: '', longitude: undefined, latitude: undefined, location: '' })
+const firmwareList = ref([])
+const upgradeFirmwareId = ref(null)
+const upgrading = ref(false)
+const firmwareVisible = ref(false)
+const firmwareError = ref('')
+
+function findLocalRecord(id) {
+  const key = String(id)
+  return tableRecords.value.find((d) => d.id === key) || devices.record(key)
+}
+
+const firmwareRecord = computed(() => (drawerId.value ? findLocalRecord(drawerId.value) : null))
+const upgradeFirmwareOptions = computed(() =>
+  firmwareList.value.map((f) => ({ label: firmwareOptionLabel(f), value: f.id }))
+)
+const drawerRecord = computed(() => (drawerId.value ? findLocalRecord(drawerId.value) : null))
+
+const overview = computed(() => {
+  const all = [...devices.docks, ...devices.drones]
+  return {
+    docks: devices.docks.length,
+    online: all.filter((d) => d.statusClass === 'online' || d.statusClass === 'mission').length,
+    mission: all.filter((d) => d.statusClass === 'mission').length,
+    alarm: all.filter((d) => d.statusClass === 'alarm').length,
+    boundDrones: devices.drones.filter((d) => d.bindingState === 'bound').length
+  }
+})
+
+const updatedLabel = computed(() => (loadedAt.value ? `数据更新于 ${loadedAt.value}` : '管理机巢与无人机设备的接入、绑定与运行状态'))
+
+const drawerStatusText = computed(() => {
+  const rec = drawerRecord.value
+  if (!rec) return ''
+  if (rec.statusClass === 'pending') return '机巢已添加，等待设备连接'
+  if (rec.statusClass === 'offline') return `设备最后上报于 ${rec.updated}`
+  return `状态数据更新于 ${rec.updated}`
+})
+
+const drawerBindingText = computed(() => {
+  const rec = drawerRecord.value
+  if (!rec) return ''
+  if (rec.kind === 'dock' && rec.bindingState === 'bound') {
+    const drone = devices.drones.find((d) => d.dockId === rec.dockId)
+    return drone?.battery && drone.battery !== '--' ? `已入巢 · 电量 ${drone.battery}` : '绑定关系正常'
+  }
+  return rec.bindingState === 'bound' ? '绑定关系正常' : '当前未绑定设备'
+})
+
+function displayCoord(value) {
+  return value == null || value === '' ? '--' : value
+}
+
+function fmtTime(t) {
+  if (!t) return '--'
+  const d = new Date(t)
+  if (Number.isNaN(d.getTime())) return '--'
+  return d.toLocaleString('zh-CN', { hour12: false })
+}
+
+function parseJson(value, fallback = null) {
+  if (!value) return fallback
+  if (typeof value === 'object') return value
+  try { return JSON.parse(value) } catch { return fallback }
+}
+
+function alarmCodes(realtime) {
+  const codes = parseJson(realtime?.alarmCodes, [])
+  return Array.isArray(codes) ? codes : []
+}
+
+function modeText(m) {
+  const key = String(m || '').toUpperCase()
+  switch (key) {
+    case 'STANDBY': return '待命'
+    case 'AUTO': return 'AUTO'
+    case 'GUIDED': return 'GUIDED'
+    case 'LOITER': return '悬停'
+    case 'RTL': return '返航'
+    default: return m || '--'
+  }
+}
+
+function controlModeText(m) {
+  const key = String(m || '').toLowerCase()
+  if (key === 'auto' || key === 'automatic') return '自动'
+  if (key === 'manual') return '手动'
+  return m || '--'
+}
+
+function displayValue(value) {
+  return value == null || value === '' ? '--' : String(value)
+}
+
+function coordinate(value, min, max) {
+  const number = Number(value)
+  return Number.isFinite(number) && number >= min && number <= max ? number : null
+}
+
+function gpsText(q) {
+  const key = String(q || '').toUpperCase().replace(/-/g, '_')
+  switch (key) {
+    case 'RTK_FIX':
+    case 'RTK_FIXED': return 'RTK 固定解'
+    case 'RTK_FLOAT': return 'RTK 浮点解'
+    case '3D_FIX': return '3D 定位'
+    case '2D_FIX': return '2D 定位'
+    default: return q ? String(q) : '无定位'
+  }
+}
+
+function mapDockRow(d, detail = {}) {
+  const id = String(d.id)
+  const rt = detail.realtime || {}
+  const online = Boolean(detail.online)
+  const registerStatus = d.registerStatus || 'registered'
+  const pending = registerStatus === 'pending' && !online
+  const st = pending
+    ? { status: '待连接', statusClass: 'pending' }
+    : online
+      ? alarmCodes(rt).length ? { status: '告警', statusClass: 'alarm' } : { status: '在线', statusClass: 'online' }
+      : { status: '离线', statusClass: 'offline' }
+  const cachedDrone = devices.drones.find((dr) => dr.dockId === d.dockId)
+  return {
+    id,
+    kind: 'dock',
+    dockId: d.dockId,
+    name: d.name || d.dockId,
+    code: d.code || d.sn || d.dockId,
+    sn: d.sn || d.dockId || '--',
+    iccid: d.iccid || '--',
+    longitude: coordinate(d.longitude, -180, 180),
+    latitude: coordinate(d.latitude, -90, 90),
+    location: d.location || '--',
+    status: st.status,
+    statusClass: st.statusClass,
+    binding: cachedDrone?.name || '--',
+    bindingState: cachedDrone ? 'bound' : 'unbound',
+    mode: controlModeText(rt.controlMode),
+    version: d.softwareVer ? `v${d.softwareVer}` : '--',
+    updated: fmtTime(d.updatedAt),
+    protocol: d.protocolVer ? `MQTT v${d.protocolVer}` : '--',
+    registerStatus,
+    realtime: rt,
+    online
+  }
+}
+
+function mapDroneRow(d, detail = {}) {
+  const id = String(d.id)
+  const rt = detail.realtime || {}
+  const armed = ['1', 'true', 1, true].includes(rt.armed)
+  const altitude = coordinate(rt.altitude, -1000, 100000)
+  const flying = armed || (altitude != null && altitude > 0)
+  const online = Boolean(detail.online)
+  const st = !online
+    ? { status: '离线', statusClass: 'offline' }
+    : flying
+      ? { status: '飞行中', statusClass: 'mission' }
+      : { status: '在巢', statusClass: 'online' }
+  const dock = devices.docks.find((dk) => dk.dockId === d.dockId)
+  const battery = rt.batteryPercent ?? rt.batteryPct ?? d.battery
+  return {
+    id,
+    kind: 'drone',
+    droneSn: d.droneSn,
+    dockId: d.dockId,
+    name: d.name || d.droneSn,
+    code: d.code || d.droneSn,
+    status: st.status,
+    statusClass: st.statusClass,
+    binding: dock?.name || '--',
+    bindingState: dock ? 'bound' : 'unbound',
+    battery: battery != null && battery !== '' ? `${battery}%` : '--',
+    mode: modeText(rt.flightMode),
+    mission: displayValue(rt.missionName || rt.mission),
+    updated: fmtTime(d.updatedAt),
+    sysid: displayValue(rt.currentSysId),
+    gps: gpsText(rt.gpsQuality),
+    sn: d.droneSn || d.code || '--',
+    model: d.model || '--',
+    firmwareVer: d.firmwareVer || '--',
+    realtime: rt,
+    online
+  }
+}
+
+async function enrichRecords(records, kind) {
+  if (!records.length) return []
+  const details = await Promise.all(
+    records.map((row) =>
+      request
+        .get(kind === 'docks' ? urls.DOCK(row.id) : urls.DRONE(row.id))
+        .then((r) => r || {})
+        .catch(() => ({}))
+    )
+  )
+  return records.map((row, i) => (kind === 'docks' ? mapDockRow(row, details[i]) : mapDroneRow(row, details[i])))
+}
+
+async function loadTable() {
+  const kind = tab.value
+  const params = { pageNum: pageNum.value, pageSize }
+  const keyword = searchKeyword.value.trim()
+  if (keyword) params.keyword = keyword
+  try {
+    const page = await request.get(kind === 'docks' ? urls.DOCKS : urls.DRONES, { params })
+    const records = page?.records || []
+    total.value = Number(page?.total) || 0
+    if (kind === 'docks') docksTotal.value = total.value
+    else dronesTotal.value = total.value
+    tableRecords.value = await enrichRecords(records, kind)
+  } catch (e) {
+    tableRecords.value = []
+    total.value = 0
+    ui.toast(e.message || '加载设备列表失败')
+  }
+}
+
+function matchesClientFilters(d) {
+  if (statusFilter.value && d.statusClass !== statusFilter.value) return false
+  if (bindingFilter.value && d.bindingState !== bindingFilter.value) return false
+  return true
+}
+
+const docksTabLabel = computed(() => `机巢设备 ${docksTotal.value || devices.docks.length}`)
+const dronesTabLabel = computed(() => `无人机 ${dronesTotal.value || devices.drones.length}`)
+
+const dockColumns = [
+  { colKey: 'name', title: '机巢设备', width: '18%' },
+  { colKey: 'status', title: '状态' },
+  { colKey: 'binding', title: '绑定无人机' },
+  { colKey: 'mode', title: '控制模式' },
+  { colKey: 'location', title: '设备位置' },
+  { colKey: 'version', title: '软件版本' },
+  { colKey: 'updated', title: '最近上报' },
+  { colKey: 'actions', title: '操作', width: '20%' }
+]
+
+const droneColumns = [
+  { colKey: 'name', title: '无人机', width: '18%' },
+  { colKey: 'status', title: '状态' },
+  { colKey: 'binding', title: '所属机巢' },
+  { colKey: 'battery', title: '电量' },
+  { colKey: 'mode', title: '飞行模式' },
+  { colKey: 'mission', title: '当前任务' },
+  { colKey: 'updated', title: '最近上报' },
+  { colKey: 'actions', title: '操作', width: '22%' }
+]
+
+const tableColumns = computed(() => (tab.value === 'docks' ? dockColumns : droneColumns))
+const tableData = computed(() => tableRecords.value.filter(matchesClientFilters))
+const tableEmpty = computed(() =>
+  statusFilter.value || bindingFilter.value
+    ? '当前页无符合条件的设备（状态/绑定仅筛选当前页）'
+    : '暂无符合条件的设备'
+)
+
+function onSearchCommit() {
+  if (searchTimer) {
+    clearTimeout(searchTimer)
+    searchTimer = null
+  }
+  const next = search.value.trim()
+  if (searchKeyword.value === next && pageNum.value === 1) {
+    loadTable()
+    return
+  }
+  searchKeyword.value = next
+  pageNum.value = 1
+  loadTable()
+}
+
+watch(search, (value) => {
+  if (searchTimer) clearTimeout(searchTimer)
+  searchTimer = setTimeout(() => {
+    searchTimer = null
+    const next = String(value || '').trim()
+    if (searchKeyword.value === next) return
+    searchKeyword.value = next
+    pageNum.value = 1
+    loadTable()
+  }, 300)
+})
+
+watch(tab, () => {
+  if (searchTimer) {
+    clearTimeout(searchTimer)
+    searchTimer = null
+  }
+  search.value = ''
+  searchKeyword.value = ''
+  statusFilter.value = ''
+  bindingFilter.value = ''
+  drawerOpen.value = false
+  pageNum.value = 1
+  loadTable()
+})
+
+function handleRowClick({ row }) {
+  openDrawer(row.id)
+}
+
+function resetFilters(reload = true) {
+  if (searchTimer) {
+    clearTimeout(searchTimer)
+    searchTimer = null
+  }
+  search.value = ''
+  searchKeyword.value = ''
+  statusFilter.value = ''
+  bindingFilter.value = ''
+  if (reload) {
+    pageNum.value = 1
+    loadTable()
+  }
+}
+
+function openDrawer(id) {
+  drawerId.value = id
+  drawerOpen.value = true
+}
+
+function goControl(id) {
+  router.push({ name: 'monitor', query: { deviceId: id, control: '1' } })
+}
+
+async function reload() {
+  try {
+    await Promise.all([loadTable(), devices.load()])
+    loadedAt.value = new Date().toLocaleTimeString('zh-CN', { hour12: false })
+    ui.toast('设备列表已刷新')
+  } catch (e) {
+    ui.toast(e.message || '刷新设备列表失败')
+  }
+}
+
+function goDetail(id) {
+  drawerOpen.value = false
+  router.push({ name: 'device-detail', params: { id } })
+}
+
+async function openFirmwareUpgrade(id) {
+  drawerId.value = id
+  firmwareError.value = ''
+  upgradeFirmwareId.value = null
+  firmwareVisible.value = true
+  await loadFirmwares()
+  if (!firmwareList.value.length && !firmwareError.value) {
+    firmwareError.value = '暂无已发布固件，请先在固件管理中发布版本。'
+  }
+}
+
+function goBinding() {
+  ui.toast('请选择要绑定的设备')
+}
+
+function openEditDock(dock) {
+  editDockRecord.value = dock
+  editDockVisible.value = true
+}
+
+async function deleteDock(dock) {
+  const ok = await ui.confirm(`确认硬删除机巢「${dock.name}」？`, '删除后机巢及其关联设备数据将永久移除，且无法恢复。')
+  if (!ok) return
+  try {
+    await request.delete(urls.DOCK(dock.id))
+    drawerOpen.value = false
+    ui.toast('机巢已永久删除')
+    await loadTable()
+    await devices.load()
+  } catch (e) {
+    ui.toast(e.message || '删除机巢失败')
+  }
+}
+
+async function handleDockSaved() {
+  editDockVisible.value = false
+  try {
+    await loadTable()
+    await devices.load()
+    ui.toast('机巢信息已更新')
+  } catch (e) {
+    ui.toast(e.message || '机巢已保存，但刷新设备数据失败')
+  }
+}
+
+function openAddDock() {
+  Object.assign(dockForm, { name: '', sn: '', iccid: '', longitude: undefined, latitude: undefined, location: '' })
+  addDockError.value = ''
+  addDockVisible.value = true
+}
+
+async function submitAddDock() {
+  addDockError.value = ''
+  const name = dockForm.name.trim()
+  const sn = dockForm.sn.trim().toUpperCase()
+  const iccid = dockForm.iccid.trim().replace(/\s+/g, '')
+  const longitude = Number(dockForm.longitude)
+  const latitude = Number(dockForm.latitude)
+
+  if (!name || !sn || !iccid || dockForm.longitude === '' || dockForm.longitude == null || dockForm.latitude === '' || dockForm.latitude == null) {
+    addDockError.value = '请填写机巢名称、机巢 SN、通信卡 ICCID、经度和纬度。'
+    return
+  }
+  if (!Number.isFinite(longitude) || longitude < -180 || longitude > 180) {
+    addDockError.value = '经度应在 -180～180 之间。'
+    return
+  }
+  if (!Number.isFinite(latitude) || latitude < -90 || latitude > 90) {
+    addDockError.value = '纬度应在 -90～90 之间。'
+    return
+  }
+  if (devices.docks.some((dock) => dock.sn.toUpperCase() === sn)) {
+    addDockError.value = '机巢 SN 已存在。'
+    return
+  }
+
+  try {
+    await request.post(urls.DOCKS, {
+      dockId: sn,
+      name,
+      code: sn,
+      sn,
+      iccid,
+      location: dockForm.location.trim(),
+      longitude,
+      latitude
+    })
+    addDockVisible.value = false
+    ui.toast('机巢已成功接入')
+    await loadTable()
+    await devices.load()
+  } catch (e) {
+    addDockError.value = e.message || '接入失败'
+  }
+}
+
+async function loadFirmwares() {
+  try {
+    const list = await request.get(urls.FIRMWARES_RELEASED)
+    const records = Array.isArray(list) ? list : list?.records || []
+    firmwareList.value = records.map((f) => ({
+      id: String(f.id),
+      version: f.version,
+      description: f.description || '',
+      mandatory: Number(f.mandatory) === 1
+    }))
+  } catch (e) {
+    firmwareList.value = []
+    firmwareError.value = e.message || '加载固件版本失败'
+  }
+}
+
+function firmwareOptionLabel(f) {
+  const tag = f.mandatory ? '强制升级' : '推荐稳定版'
+  return f.description ? `${f.version} · ${tag} · ${f.description}` : `${f.version} · ${tag}`
+}
+
+async function doUpgrade() {
+  const rec = firmwareRecord.value
+  firmwareError.value = ''
+  if (!rec || !upgradeFirmwareId.value) {
+    firmwareError.value = '请选择目标固件版本。'
+    return
+  }
+  if (rec.statusClass === 'offline') {
+    firmwareError.value = '设备离线，无法下发升级。'
+    return
+  }
+  const ok = await ui.confirm('确认升级固件？', `将把机巢「${rec.name}」升级到所选版本，升级期间设备可能短暂离线。`)
+  if (!ok) return
+  upgrading.value = true
+  try {
+    await request.post(urls.DOCK_FIRMWARE_UPGRADE(rec.id), { firmwareId: Number(upgradeFirmwareId.value) })
+    firmwareVisible.value = false
+    upgradeFirmwareId.value = null
+    ui.toast('升级指令已下发')
+  } catch (e) {
+    firmwareError.value = e.message || '升级下发失败'
+  } finally {
+    upgrading.value = false
+  }
+}
+
+onMounted(async () => {
+  try {
+    await Promise.all([devices.load(), loadTable()])
+    loadedAt.value = new Date().toLocaleTimeString('zh-CN', { hour12: false })
+  } catch (e) {
+    ui.toast(e.message || '加载设备失败')
+  }
+  if (!isAdmin.value) loadFirmwares()
+})
+</script>
+
+<style scoped>
+.asset-search :deep(.t-input) {
+  width: 100%;
+}
+.asset-search {
+  border: 0;
+  padding: 0;
+  height: auto;
+}
+.toolbar-group :deep(.t-select) {
+  flex-shrink: 0;
+}
+.page-actions :deep(.t-button svg) {
+  width: 14px;
+  height: 14px;
+}
+.row-actions :deep(.t-button) {
+  height: 28px;
+}
+.drawer-section-title :deep(.t-button) {
+  font-size: 11px;
+}
+.device-asset-tabs :deep(.t-tabs__nav-container) {
+  padding: 0 18px;
+}
+.device-asset-tabs :deep(.t-tabs__nav-wrap) {
+  margin-left: 0;
+}
+.asset-table-wrap :deep(.t-table) {
+  background: transparent;
+}
+.asset-table-wrap :deep(.t-table__body tr) {
+  cursor: pointer;
+}
+</style>
+
+<style>
+.add-dock-dialog .t-input,
+.add-dock-dialog .t-input-number,
+.firmware-dialog .t-select {
+  width: 100%;
+}
+.add-dock-dialog .t-dialog__footer,
+.firmware-dialog .t-dialog__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+.firmware-dialog .firmware-content {
+  padding: 0;
+}
+</style>
diff --git a/src/views/TrafficOpsView/TrafficOpsView.vue b/src/views/TrafficOpsView/TrafficOpsView.vue
index d9d7cb1..462bcec 100644
--- a/src/views/TrafficOpsView/TrafficOpsView.vue
+++ b/src/views/TrafficOpsView/TrafficOpsView.vue
@@ -1,1001 +1,1047 @@
-<template>
-  <section class="operation-page">
-    <header class="operation-page-header">
-      <div>
-        <h1>流量运营</h1>
-        <span>管理云媒体流量套餐、平台采购入池与账务流水</span>
-      </div>
-      <div class="page-actions">
-        <t-button theme="primary" @click="openGrant">
-          <svg><use href="#i-plus" /></svg>测试发放
-        </t-button>
-      </div>
-    </header>
-
-    <div class="business-workspace">
-      <t-tabs v-model="tab" class="business-tdesign-tabs">
-        <t-tab-panel value="packages" label="套餐管理" :destroy-on-hide="false" />
-        <t-tab-panel value="purchases" label="采购入池" :destroy-on-hide="false" />
-        <t-tab-panel value="ledger" label="账务流水" :destroy-on-hide="false" />
-      </t-tabs>
-
-      <div v-show="tab === 'packages'" class="packages-panel">
-        <div class="asset-toolbar">
-          <div class="toolbar-group">
-            <t-select
-              v-model="pkgStatusFilter"
-              :options="pkgStatusFilterOptions"
-              placeholder="全部状态"
-              style="width: 140px"
-              @change="reloadPackages"
-            />
-          </div>
-          <div class="page-actions">
-            <t-button shape="square" variant="outline" title="刷新" @click="loadPackages">
-              <svg><use href="#i-refresh" /></svg>
-            </t-button>
-            <t-button theme="primary" @click="openPkgAdd">
-              <svg><use href="#i-plus" /></svg>新建套餐
-            </t-button>
-          </div>
-        </div>
-
-        <div class="asset-table-wrap">
-          <t-table
-            row-key="id"
-            :data="pkgList"
-            :columns="pkgColumns"
-            empty="暂无流量套餐"
-          >
-            <template #status="{ row }">
-              <span class="table-status" :class="row.statusClass"><i></i>{{ row.statusName }}</span>
-            </template>
-            <template #actions="{ row }">
-              <div class="row-actions">
-                <t-button variant="text" theme="primary" @click="openPkgEdit(row)">编辑</t-button>
-                <t-button
-                  v-if="row.status === 'active'"
-                  variant="text"
-                  theme="danger"
-                  @click="disablePackage(row)"
-                >下架</t-button>
-              </div>
-            </template>
-          </t-table>
-        </div>
-
-        <div class="table-footer">
-          <t-pagination
-            v-model:current="pkgPageNum"
-            :total="pkgTotal"
-            :page-size="pkgPageSize"
-            @current-change="loadPackages"
-          />
-        </div>
-      </div>
-
-      <div v-show="tab === 'purchases'" class="purchases-panel">
-        <div v-if="poolMissing" class="pool-empty">
-          尚未建立资源池，首次录入采购后自动创建
-        </div>
-        <div v-else-if="pool" class="business-metric-band pool-metrics">
-          <div>
-            <span>资源池总量</span>
-            <strong>{{ bytesToGbText(pool.totalBytes) }}</strong>
-            <small>{{ pool.totalBytes ?? 0 }} bytes</small>
-          </div>
-          <div>
-            <span>可用流量</span>
-            <strong>{{ bytesToGbText(pool.availableBytes) }}</strong>
-            <small>{{ pool.availableBytes ?? 0 }} bytes</small>
-          </div>
-          <div>
-            <span>池状态</span>
-            <strong>{{ pool.status === 'active' ? '有效' : (pool.status === 'inactive' ? '失效' : (pool.status || '—')) }}</strong>
-            <small>{{ pool.status === 'active' ? '有效' : (pool.status === 'inactive' ? '失效' : (pool.status || '—')) }}</small>
-          </div>
-        </div>
-
-        <div class="asset-toolbar">
-          <div class="asset-search">
-            <t-input
-              v-model="purchaseProvider"
-              clearable
-              placeholder="按供应商筛选"
-              @keyup.enter="reloadPurchases"
-              @clear="reloadPurchases"
-            >
-              <template #prefix-icon><t-icon name="search" /></template>
-            </t-input>
-          </div>
-          <div class="toolbar-group">
-            <t-select
-              v-model="purchaseStatus"
-              :options="purchaseStatusOptions"
-              placeholder="全部状态"
-              style="width: 140px"
-              @change="reloadPurchases"
-            />
-          </div>
-          <div class="page-actions">
-            <t-button shape="square" variant="outline" title="刷新" @click="loadPurchasesTab">
-              <svg><use href="#i-refresh" /></svg>
-            </t-button>
-            <t-button theme="primary" @click="openPurchaseAdd">
-              <svg><use href="#i-plus" /></svg>录入采购
-            </t-button>
-          </div>
-        </div>
-
-        <div class="asset-table-wrap">
-          <t-table
-            row-key="id"
-            :data="purchaseList"
-            :columns="purchaseColumns"
-            empty="暂无采购记录"
-          />
-        </div>
-
-        <div class="table-footer">
-          <t-pagination
-            v-model:current="purchasePageNum"
-            :total="purchaseTotal"
-            :page-size="purchasePageSize"
-            @current-change="loadPurchases"
-          />
-        </div>
-      </div>
-
-      <div v-show="tab === 'ledger'" class="ledger-panel">
-        <div class="asset-toolbar">
-          <div class="toolbar-group">
-            <t-select
-              v-model="ledgerAccountType"
-              :options="ledgerAccountTypeOptions"
-              placeholder="全部账户"
-              style="width: 140px"
-              @change="reloadLedger"
-            />
-          </div>
-          <div class="asset-search">
-            <t-input
-              v-model="ledgerAccountId"
-              clearable
-              placeholder="按账户ID筛选"
-              @keyup.enter="reloadLedger"
-              @clear="reloadLedger"
-            >
-              <template #prefix-icon><t-icon name="search" /></template>
-            </t-input>
-          </div>
-          <div class="page-actions">
-            <t-button shape="square" variant="outline" title="刷新" @click="loadLedger">
-              <svg><use href="#i-refresh" /></svg>
-            </t-button>
-          </div>
-        </div>
-
-        <div class="asset-table-wrap">
-          <t-table
-            row-key="id"
-            :data="ledgerList"
-            :columns="ledgerColumns"
-            empty="暂无流水"
-          />
-        </div>
-
-        <div class="table-footer">
-          <t-pagination
-            v-model:current="ledgerPageNum"
-            :total="ledgerTotal"
-            :page-size="ledgerPageSize"
-            @current-change="loadLedger"
-          />
-        </div>
-      </div>
-    </div>
-
-    <t-dialog
-      v-model:visible="pkgModalVisible"
-      :header="pkgEditingId ? '编辑套餐' : '新建套餐'"
-      width="520px"
-      destroy-on-close
-      dialog-class-name="add-dock-dialog"
-      :close-on-overlay-click="false"
-      placement="center"
-    >
-      <form novalidate @submit.prevent="submitPackage">
-        <label>
-          <span>编码<b>*</b></span>
-          <t-input
-            v-model="pkgForm.code"
-            :disabled="!!pkgEditingId"
-            placeholder="唯一编码，如 MEDIA_10G"
-          />
-        </label>
-        <label>
-          <span>名称<b>*</b></span>
-          <t-input v-model="pkgForm.name" placeholder="套餐名称" />
-        </label>
-        <div class="form-row">
-          <label>
-            <span>额度(GB)<b>*</b></span>
-            <t-input-number
-              v-model="pkgForm.amountGb"
-              theme="normal"
-              :min="0.01"
-              :step="1"
-              style="width: 100%"
-            />
-          </label>
-          <label>
-            <span>价格(元)</span>
-            <t-input-number
-              v-model="pkgForm.price"
-              theme="normal"
-              :min="0"
-              :step="0.01"
-              style="width: 100%"
-            />
-          </label>
-        </div>
-        <div class="form-row">
-          <label>
-            <span>有效期(天)</span>
-            <t-input-number
-              v-model="pkgForm.validityDays"
-              theme="normal"
-              :min="0"
-              style="width: 100%"
-            />
-          </label>
-          <label>
-            <span>排序</span>
-            <t-input-number
-              v-model="pkgForm.sort"
-              theme="normal"
-              :min="0"
-              style="width: 100%"
-            />
-          </label>
-        </div>
-        <label v-if="pkgEditingId">
-          <span>状态</span>
-          <t-select v-model="pkgForm.status" :options="pkgStatusOptions" style="width: 100%" />
-        </label>
-        <div v-if="!pkgEditingId" class="form-hint">有效期填 0 表示长期有效</div>
-        <div class="form-error">{{ pkgFormError }}</div>
-      </form>
-      <template #footer>
-        <t-button variant="outline" @click="pkgModalVisible = false">取消</t-button>
-        <t-button theme="primary" @click="submitPackage">
-          {{ pkgEditingId ? '保存' : '确认新建' }}
-        </t-button>
-      </template>
-    </t-dialog>
-
-    <t-dialog
-      v-model:visible="purchaseModalVisible"
-      header="录入采购"
-      width="520px"
-      destroy-on-close
-      dialog-class-name="add-dock-dialog"
-      :close-on-overlay-click="false"
-      placement="center"
-    >
-      <form novalidate @submit.prevent="submitPurchase">
-        <label>
-          <span>批次号<b>*</b></span>
-          <t-input v-model="purchaseForm.batchNo" placeholder="唯一批次号" />
-        </label>
-        <label>
-          <span>供应商<b>*</b></span>
-          <t-input v-model="purchaseForm.provider" placeholder="供应商名称" />
-        </label>
-        <div class="form-row">
-          <label>
-            <span>总量(GB)<b>*</b></span>
-            <t-input-number
-              v-model="purchaseForm.totalGb"
-              theme="normal"
-              :min="0.01"
-              :step="1"
-              style="width: 100%"
-            />
-          </label>
-          <label>
-            <span>单价</span>
-            <t-input-number
-              v-model="purchaseForm.unitCost"
-              theme="normal"
-              :min="0"
-              :step="0.01"
-              style="width: 100%"
-            />
-          </label>
-        </div>
-        <div class="form-row">
-          <label>
-            <span>总成本</span>
-            <t-input-number
-              v-model="purchaseForm.totalCost"
-              theme="normal"
-              :min="0"
-              :step="0.01"
-              style="width: 100%"
-            />
-          </label>
-          <label>
-            <span>到期时间</span>
-            <t-input
-              v-model="purchaseForm.expiresAt"
-              placeholder="YYYY-MM-DDTHH:mm:ss"
-            />
-          </label>
-        </div>
-        <label>
-          <span>备注</span>
-          <t-input v-model="purchaseForm.remark" placeholder="可选备注" />
-        </label>
-        <div class="form-error">{{ purchaseFormError }}</div>
-      </form>
-      <template #footer>
-        <t-button variant="outline" @click="purchaseModalVisible = false">取消</t-button>
-        <t-button theme="primary" @click="submitPurchase">确认录入</t-button>
-      </template>
-    </t-dialog>
-
-    <t-dialog
-      v-model:visible="grantModalVisible"
-      header="测试发放流量"
-      width="520px"
-      destroy-on-close
-      dialog-class-name="add-dock-dialog"
-      :close-on-overlay-click="false"
-      placement="center"
-      @closed="resetGrantForm"
-    >
-      <form novalidate @submit.prevent="submitGrant">
-        <label>
-          <span>搜索用户</span>
-          <t-select
-            v-model="grantSelectedUserId"
-            filterable
-            clearable
-            placeholder="输入姓名 / 手机号 / 邮箱搜索"
-            :options="grantUserOptions"
-            :loading="grantUserSearching"
-            style="width: 100%"
-            @search="searchGrantUsers"
-            @change="onGrantUserPicked"
-            @clear="onGrantUserCleared"
-          />
-        </label>
-        <label>
-          <span>用户 ID<b>*</b></span>
-          <t-input
-            v-model="grantForm.userId"
-            clearable
-            placeholder="可手填，或从上方搜索选中"
-          />
-        </label>
-        <label>
-          <span>额度(GB)<b>*</b></span>
-          <t-input-number
-            v-model="grantForm.amountGb"
-            theme="normal"
-            :min="1"
-            :step="1"
-            :decimal-places="0"
-            style="width: 100%"
-          />
-        </label>
-        <label>
-          <span>原因<b>*</b></span>
-          <t-input v-model="grantForm.reason" clearable placeholder="如 live test" />
-        </label>
-        <p v-if="grantFormError" class="form-error">{{ grantFormError }}</p>
-        <div v-if="grantResultBalanceText" class="grant-result">
-          <span>最新余额</span>
-          <strong>{{ grantResultBalanceText }}</strong>
-        </div>
-      </form>
-      <template #footer>
-        <t-button variant="outline" @click="grantModalVisible = false">取消</t-button>
-        <t-button theme="primary" :loading="grantSubmitting" @click="submitGrant">确认发放</t-button>
-      </template>
-    </t-dialog>
-  </section>
-</template>
-
-<script setup>
-import { onMounted, reactive, ref, watch } from 'vue'
-import { useUiStore } from '@/stores/modules/uiStore'
-import request from '@/utils/http'
-import * as urls from '@/config/urls'
-
-const ui = useUiStore()
-const GB_BYTES = 1024 ** 3
-
-function bytesToGb(n) {
-  const v = Number(n || 0) / GB_BYTES
-  return Number.isFinite(v) ? v : 0
-}
-function bytesToGbText(n) {
-  return `${bytesToGb(n).toFixed(2)} GB`
-}
-function fmtTime(t) {
-  if (!t) return '--'
-  const d = new Date(t)
-  if (Number.isNaN(d.getTime())) return '--'
-  return d.toLocaleString('zh-CN', { hour12: false })
-}
-
-const tab = ref('packages')
-
-const pkgList = ref([])
-const pkgTotal = ref(0)
-const pkgPageNum = ref(1)
-const pkgPageSize = ref(10)
-const pkgStatusFilter = ref('')
-const pkgModalVisible = ref(false)
-const pkgEditingId = ref(null)
-const pkgFormError = ref('')
-const pkgForm = reactive({
-  code: '',
-  name: '',
-  amountGb: 1,
-  price: 0,
-  validityDays: 0,
-  sort: 0,
-  status: 'active'
-})
-
-const pkgStatusFilterOptions = [
-  { label: '全部状态', value: '' },
-  { label: '上架', value: 'active' },
-  { label: '下架', value: 'inactive' }
-]
-const pkgStatusOptions = [
-  { label: '上架', value: 'active' },
-  { label: '下架', value: 'inactive' }
-]
-const pkgColumns = [
-  { colKey: 'code', title: '编码', width: '12%', ellipsis: true },
-  { colKey: 'name', title: '名称', width: '14%', ellipsis: true },
-  { colKey: 'amountText', title: '额度', width: '10%' },
-  { colKey: 'priceText', title: '价格', width: '8%' },
-  { colKey: 'validityText', title: '有效期', width: '10%' },
-  { colKey: 'status', title: '状态', width: '8%' },
-  { colKey: 'sort', title: '排序', width: '6%' },
-  { colKey: 'updatedAt', title: '更新时间', width: '16%' },
-  { colKey: 'actions', title: '操作', width: '12%' }
-]
-
-async function loadPackages() {
-  try {
-    const params = { pageNum: pkgPageNum.value, pageSize: pkgPageSize.value }
-    if (pkgStatusFilter.value) params.status = pkgStatusFilter.value
-    const page = await request.get(urls.ADMIN_TRAFFIC_PACKAGES, { params })
-    pkgTotal.value = page?.total || 0
-    pkgList.value = (page?.records || []).map((p) => ({
-      id: String(p.id),
-      code: p.code,
-      name: p.name,
-      amountText: bytesToGbText(p.amountBytes),
-      priceText: `¥${Number(p.price || 0).toFixed(2)}`,
-      validityText: Number(p.validityDays) > 0 ? `${p.validityDays} 天` : '长期有效',
-      status: p.status,
-      statusName: p.status === 'active' ? '上架' : '下架',
-      statusClass: p.status === 'active' ? 'online' : 'offline',
-      sort: p.sort ?? 0,
-      updatedAt: fmtTime(p.updatedAt),
-      raw: p
-    }))
-  } catch (e) {
-    ui.toast(e.message || '加载套餐失败')
-  }
-}
-
-function reloadPackages() {
-  pkgPageNum.value = 1
-  loadPackages()
-}
-
-function openPkgAdd() {
-  Object.assign(pkgForm, {
-    code: '',
-    name: '',
-    amountGb: 1,
-    price: 0,
-    validityDays: 0,
-    sort: 0,
-    status: 'active'
-  })
-  pkgEditingId.value = null
-  pkgFormError.value = ''
-  pkgModalVisible.value = true
-}
-
-function openPkgEdit(row) {
-  const r = row.raw
-  Object.assign(pkgForm, {
-    code: r.code,
-    name: r.name,
-    amountGb: Number(bytesToGb(r.amountBytes).toFixed(4)) || 1,
-    price: Number(r.price || 0),
-    validityDays: Number(r.validityDays || 0),
-    sort: Number(r.sort || 0),
-    status: r.status || 'active'
-  })
-  pkgEditingId.value = row.id
-  pkgFormError.value = ''
-  pkgModalVisible.value = true
-}
-
-async function submitPackage() {
-  pkgFormError.value = ''
-  const name = String(pkgForm.name || '').trim()
-  const code = String(pkgForm.code || '').trim()
-  if (pkgEditingId.value) {
-    if (!name) {
-      pkgFormError.value = '请填写名称'
-      return
-    }
-  } else if (!code || !name) {
-    pkgFormError.value = '请填写编码和名称'
-    return
-  }
-  if (!(Number(pkgForm.amountGb) > 0)) {
-    pkgFormError.value = '额度必须大于 0 GB'
-    return
-  }
-  const amountBytes = Math.round(Number(pkgForm.amountGb) * GB_BYTES)
-  try {
-    if (pkgEditingId.value) {
-      // 后端 Update: price/validityDays 仅 >0 才写入；编辑时若用户未改就原样提交正值
-      const payload = {
-        name,
-        amountBytes,
-        sort: Number(pkgForm.sort || 0),
-        status: pkgForm.status
-      }
-      if (Number(pkgForm.price) > 0) payload.price = Number(pkgForm.price)
-      if (Number(pkgForm.validityDays) > 0) payload.validityDays = Number(pkgForm.validityDays)
-      // 长期有效（0）无法通过 Update 写入；保持原值即可。若必须把有效期改成长期，需后端后续支持。
-      await request.put(urls.ADMIN_TRAFFIC_PACKAGE(pkgEditingId.value), payload)
-      ui.toast('套餐已更新')
-    } else {
-      await request.post(urls.ADMIN_TRAFFIC_PACKAGES, {
-        code,
-        name,
-        amountBytes,
-        price: Number(pkgForm.price || 0),
-        validityDays: Number(pkgForm.validityDays || 0),
-        sort: Number(pkgForm.sort || 0)
-      })
-      ui.toast('套餐已创建')
-    }
-    pkgModalVisible.value = false
-    await loadPackages()
-  } catch (e) {
-    pkgFormError.value = e.message || '保存失败'
-  }
-}
-
-async function disablePackage(row) {
-  const ok = await ui.confirm(
-    `确认下架套餐 ${row.name}？`,
-    '下架后用户侧购买区不可见，之后可再编辑上架。'
-  )
-  if (!ok) return
-  try {
-    await request.delete(urls.ADMIN_TRAFFIC_PACKAGE(row.id))
-    ui.toast('套餐已下架')
-    await loadPackages()
-  } catch (e) {
-    ui.toast(e.message || '下架失败')
-  }
-}
-
-const pool = ref(null)
-const poolMissing = ref(false)
-const purchaseList = ref([])
-const purchaseTotal = ref(0)
-const purchasePageNum = ref(1)
-const purchasePageSize = ref(10)
-const purchaseProvider = ref('')
-const purchaseStatus = ref('')
-const purchaseModalVisible = ref(false)
-const purchaseFormError = ref('')
-const purchaseForm = reactive({
-  batchNo: '',
-  provider: '',
-  totalGb: 1,
-  unitCost: 0,
-  totalCost: 0,
-  expiresAt: '',
-  remark: ''
-})
-
-const purchaseStatusOptions = [
-  { label: '全部状态', value: '' },
-  { label: '有效', value: 'active' },
-  { label: '失效', value: 'inactive' }
-]
-const purchaseColumns = [
-  { colKey: 'batchNo', title: '批次号', width: '12%', ellipsis: true },
-  { colKey: 'provider', title: '供应商', width: '10%', ellipsis: true },
-  { colKey: 'totalText', title: '总量', width: '10%' },
-  { colKey: 'costText', title: '成本', width: '10%' },
-  { colKey: 'expiresAt', title: '到期', width: '14%' },
-  { colKey: 'statusName', title: '状态', width: '8%' },
-  { colKey: 'remark', title: '备注', width: '14%', ellipsis: true },
-  { colKey: 'createdAt', title: '创建时间', width: '16%' }
-]
-
-async function loadPool() {
-  poolMissing.value = false
-  try {
-    pool.value = await request.get(urls.ADMIN_TRAFFIC_POOL, { skipErrorToast: true })
-  } catch (e) {
-    if (e.status === 404 || /资源不存在|not found/i.test(e.message || '')) {
-      pool.value = null
-      poolMissing.value = true
-      return
-    }
-    ui.toast(e.message || '加载资源池失败')
-  }
-}
-
-async function loadPurchases() {
-  try {
-    const params = { pageNum: purchasePageNum.value, pageSize: purchasePageSize.value }
-    if (purchaseProvider.value) params.provider = purchaseProvider.value
-    if (purchaseStatus.value) params.status = purchaseStatus.value
-    const page = await request.get(urls.ADMIN_TRAFFIC_PURCHASES, { params })
-    purchaseTotal.value = page?.total || 0
-    purchaseList.value = (page?.records || []).map((p) => ({
-      id: String(p.id),
-      batchNo: p.batchNo || '—',
-      provider: p.provider || '—',
-      totalText: bytesToGbText(p.totalBytes),
-      costText: `¥${Number(p.totalCost || 0).toFixed(2)}`,
-      expiresAt: fmtTime(p.expiresAt),
-      statusName: p.status === 'active' ? '有效' : (p.status === 'inactive' ? '失效' : (p.status || '—')),
-      remark: p.remark || '',
-      createdAt: fmtTime(p.createdAt),
-      raw: p
-    }))
-  } catch (e) {
-    ui.toast(e.message || '加载采购列表失败')
-  }
-}
-
-async function loadPurchasesTab() {
-  await Promise.all([loadPool(), loadPurchases()])
-}
-
-function reloadPurchases() {
-  purchasePageNum.value = 1
-  loadPurchases()
-}
-
-function openPurchaseAdd() {
-  Object.assign(purchaseForm, {
-    batchNo: '',
-    provider: '',
-    totalGb: 1,
-    unitCost: 0,
-    totalCost: 0,
-    expiresAt: '',
-    remark: ''
-  })
-  purchaseFormError.value = ''
-  purchaseModalVisible.value = true
-}
-
-async function submitPurchase() {
-  purchaseFormError.value = ''
-  if (!purchaseForm.batchNo.trim() || !purchaseForm.provider.trim()) {
-    purchaseFormError.value = '请填写批次号和供应商'
-    return
-  }
-  if (!(Number(purchaseForm.totalGb) > 0)) {
-    purchaseFormError.value = '采购总量必须大于 0 GB'
-    return
-  }
-  const payload = {
-    batchNo: purchaseForm.batchNo.trim(),
-    provider: purchaseForm.provider.trim(),
-    totalBytes: Math.round(Number(purchaseForm.totalGb) * GB_BYTES),
-    unitCost: Number(purchaseForm.unitCost || 0),
-    totalCost: Number(purchaseForm.totalCost || 0),
-    remark: purchaseForm.remark || ''
-  }
-  if (purchaseForm.expiresAt) {
-    const expires = new Date(purchaseForm.expiresAt)
-    if (Number.isNaN(expires.getTime())) {
-      purchaseFormError.value = '到期时间格式无效'
-      return
-    }
-    payload.expiresAt = expires.toISOString()
-  }
-  try {
-    await request.post(urls.ADMIN_TRAFFIC_PURCHASES, payload)
-    ui.toast('采购已录入')
-    purchaseModalVisible.value = false
-    await loadPurchasesTab()
-  } catch (e) {
-    purchaseFormError.value = e.message || '录入失败'
-  }
-}
-
-const grantModalVisible = ref(false)
-const grantSubmitting = ref(false)
-const grantUserSearching = ref(false)
-const grantFormError = ref('')
-const grantResultBalanceText = ref('')
-const grantSelectedUserId = ref('')
-const grantUserOptions = ref([])
-const grantForm = reactive({
-  userId: '',
-  amountGb: 10,
-  reason: 'live test'
-})
-
-function resetGrantForm() {
-  grantForm.userId = ''
-  grantForm.amountGb = 10
-  grantForm.reason = 'live test'
-  grantSelectedUserId.value = ''
-  grantUserOptions.value = []
-  grantFormError.value = ''
-  grantResultBalanceText.value = ''
-  grantSubmitting.value = false
-  grantUserSearching.value = false
-}
-
-function openGrant() {
-  resetGrantForm()
-  grantModalVisible.value = true
-}
-
-function onGrantUserPicked(val) {
-  if (val == null || val === '') return
-  grantForm.userId = String(val)
-}
-
-function onGrantUserCleared() {
-  grantSelectedUserId.value = ''
-}
-
-let grantSearchSeq = 0
-async function searchGrantUsers(keyword) {
-  const q = String(keyword || '').trim()
-  if (!q) {
-    grantSearchSeq += 1
-    grantUserOptions.value = []
-    grantUserSearching.value = false
-    return
-  }
-  const seq = ++grantSearchSeq
-  grantUserSearching.value = true
-  try {
-    const page = await request.get(urls.USERS, {
-      params: { keyword: q, role: 'user', pageNum: 1, pageSize: 20 }
-    })
-    if (seq !== grantSearchSeq) return
-    grantUserOptions.value = (page?.records || []).map((u) => ({
-      label: `${u.name || '--'} · ${u.phone || '--'} · ${u.id}`,
-      value: String(u.id)
-    }))
-  } catch (e) {
-    if (seq !== grantSearchSeq) return
-    grantUserOptions.value = []
-    // http 拦截器已 toast；此处不重复
-  } finally {
-    if (seq === grantSearchSeq) grantUserSearching.value = false
-  }
-}
-
-function parseGrantBalanceText(data) {
-  if (data == null) return '已发放（未返回余额字段）'
-  if (typeof data === 'number' || (typeof data === 'string' && data.trim() !== '' && !Number.isNaN(Number(data)))) {
-    const n = Number(data)
-    if (!Number.isFinite(n)) return '已发放（未返回余额字段）'
-    // 很大则按 bytes，否则按 GB
-    return n >= GB_BYTES ? bytesToGbText(n) : `${n.toFixed(2)} GB`
-  }
-  if (typeof data !== 'object') return '已发放（未返回余额字段）'
-  if (data.trafficBalanceBytes != null) return bytesToGbText(data.trafficBalanceBytes)
-  if (data.balanceBytes != null) return bytesToGbText(data.balanceBytes)
-  if (data.trafficBalance != null) {
-    const n = Number(data.trafficBalance)
-    if (!Number.isFinite(n)) return '已发放（未返回余额字段）'
-    return n >= GB_BYTES ? bytesToGbText(n) : `${n.toFixed(2)} GB`
-  }
-  if (data.balance != null) {
-    const n = Number(data.balance)
-    if (!Number.isFinite(n)) return '已发放（未返回余额字段）'
-    return n >= GB_BYTES ? bytesToGbText(n) : `${n.toFixed(2)} GB`
-  }
-  return '已发放（未返回余额字段）'
-}
-
-async function submitGrant() {
-  if (grantSubmitting.value) return
-  grantFormError.value = ''
-  const userIdNum = Number(String(grantForm.userId || '').trim())
-  const amountGb = Number(grantForm.amountGb)
-  const reason = String(grantForm.reason || '').trim()
-  if (!Number.isInteger(userIdNum) || userIdNum <= 0) {
-    grantFormError.value = '请填写有效的用户 ID'
-    return
-  }
-  if (!Number.isFinite(amountGb) || amountGb < 1 || !Number.isInteger(amountGb)) {
-    grantFormError.value = '额度须为不小于 1 的整数 GB'
-    return
-  }
-  if (!reason) {
-    grantFormError.value = '请填写原因'
-    return
-  }
-  grantSubmitting.value = true
-  try {
-    const data = await request.post(urls.ADMIN_TRAFFIC_TEST_GRANTS, {
-      userId: userIdNum,
-      amountGb,
-      reason
-    })
-    grantResultBalanceText.value = parseGrantBalanceText(data)
-    ui.toast('测试流量已发放')
-  } catch (e) {
-    // 拦截器已 toast；保留对话框便于改参重试
-    if (!e?.message) ui.toast('发放失败')
-  } finally {
-    grantSubmitting.value = false
-  }
-}
-
-
-const ledgerList = ref([])
-const ledgerTotal = ref(0)
-const ledgerPageNum = ref(1)
-const ledgerPageSize = ref(10)
-const ledgerAccountType = ref('')
-const ledgerAccountId = ref('')
-
-const ledgerAccountTypeOptions = [
-  { label: '全部账户', value: '' },
-  { label: '用户', value: 'user' },
-  { label: '平台', value: 'platform' }
-]
-const ledgerColumns = [
-  { colKey: 'createdAt', title: '时间', width: '14%' },
-  { colKey: 'accountType', title: '账户类型', width: '8%' },
-  { colKey: 'accountId', title: '账户ID', width: '10%' },
-  { colKey: 'direction', title: '方向', width: '7%' },
-  { colKey: 'amountText', title: '金额', width: '12%', ellipsis: true },
-  { colKey: 'balanceText', title: '余额前→后', width: '14%', ellipsis: true },
-  { colKey: 'sourceType', title: '来源', width: '10%', ellipsis: true },
-  { colKey: 'sourceId', title: '来源ID', width: '10%', ellipsis: true },
-  { colKey: 'idempotencyKey', title: '幂等键', width: '12%', ellipsis: true }
-]
-
-async function loadLedger() {
-  try {
-    const params = { pageNum: ledgerPageNum.value, pageSize: ledgerPageSize.value }
-    if (ledgerAccountType.value) params.accountType = ledgerAccountType.value
-    const rawId = String(ledgerAccountId.value || '').trim()
-    if (rawId) {
-      const id = Number(rawId)
-      if (!Number.isFinite(id) || id <= 0 || !Number.isInteger(id)) {
-        ui.toast('账户ID须为正整数')
-        return
-      }
-      params.accountId = id
-    }
-    const page = await request.get(urls.ADMIN_TRAFFIC_LEDGER, { params })
-    ledgerTotal.value = page?.total || 0
-    ledgerList.value = (page?.records || []).map((r) => ({
-      id: String(r.id),
-      createdAt: fmtTime(r.createdAt),
-      accountType: r.accountType === 'user' ? '用户' : (r.accountType === 'platform' ? '平台' : (r.accountType || '—')),
-      accountId: String(r.accountId),
-      direction: r.direction === 'credit' ? '入账' : (r.direction === 'debit' ? '扣减' : r.direction),
-      amountText: `${bytesToGbText(r.amountBytes)} (${r.amountBytes})`,
-      balanceText: `${bytesToGbText(r.balanceBefore)} → ${bytesToGbText(r.balanceAfter)}`,
-      sourceType: r.sourceType || '—',
-      sourceId: r.sourceId || '—',
-      idempotencyKey: r.idempotencyKey || '—'
-    }))
-  } catch (e) {
-    ui.toast(e.message || '加载流水失败')
-  }
-}
-
-function reloadLedger() {
-  ledgerPageNum.value = 1
-  loadLedger()
-}
-
-
-
-watch(tab, (v) => {
-  if (v === 'packages') loadPackages()
-  if (v === 'purchases') loadPurchasesTab()
-  if (v === 'ledger') loadLedger()
-})
-
-onMounted(() => {
-  if (tab.value === 'packages') loadPackages()
-})
-</script>
-
-<style scoped>
-.packages-panel,
-.purchases-panel,
-.ledger-panel {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}
-.pool-metrics {
-  margin: 12px 16px 0;
-  grid-template-columns: repeat(3, 1fr);
-}
-.pool-empty {
-  margin: 12px 16px 0;
-  padding: 14px 16px;
-  border: 1px dashed var(--line);
-  border-radius: 6px;
-  background: #fafbfc;
-  color: var(--muted);
-  font-size: 12px;
-}
-.asset-search {
-  border: 0;
-  padding: 0;
-  height: auto;
-}
-.asset-search :deep(.t-input) {
-  width: 100%;
-}
-.toolbar-group :deep(.t-select) {
-  flex-shrink: 0;
-}
-.form-hint {
-  margin-top: 4px;
-  color: var(--muted);
-  font-size: 11px;
-}
-
-.grant-result {
-  margin-top: 12px;
-  padding: 10px 12px;
-  border: 1px solid #d7e4ee;
-  border-radius: 4px;
-  background: #f5f9fc;
-}
-.grant-result span {
-  display: block;
-  color: #6c7d88;
-  font-size: 11px;
-}
-.grant-result strong {
-  display: block;
-  margin-top: 4px;
-  color: #246fae;
-  font-size: 18px;
-}
-</style>
-
-<style>
-.add-dock-dialog .t-input,
-.add-dock-dialog .t-input-number,
-.add-dock-dialog .t-select {
-  width: 100%;
-}
-</style>
+<template>
+  <section class="operation-page">
+    <header class="operation-page-header">
+      <div>
+        <h1>流量运营</h1>
+        <span>管理云媒体流量套餐、平台采购入池与账务流水</span>
+      </div>
+      <div class="page-actions">
+        <t-button theme="primary" @click="openGrant">
+          <svg><use href="#i-plus" /></svg>测试发放
+        </t-button>
+      </div>
+    </header>
+
+    <div class="business-workspace">
+      <t-tabs v-model="tab" class="business-tdesign-tabs">
+        <t-tab-panel value="packages" label="套餐管理" :destroy-on-hide="false" />
+        <t-tab-panel value="sim-packages" label="通信卡套餐" :destroy-on-hide="false" />
+        <t-tab-panel value="purchases" label="采购入池" :destroy-on-hide="false" />
+        <t-tab-panel value="ledger" label="账务流水" :destroy-on-hide="false" />
+      </t-tabs>
+
+      <div v-show="tab === 'packages'" class="packages-panel">
+        <div class="asset-toolbar">
+          <div class="toolbar-group">
+            <t-select
+              v-model="pkgStatusFilter"
+              :options="pkgStatusFilterOptions"
+              placeholder="全部状态"
+              style="width: 140px"
+              @change="reloadPackages"
+            />
+          </div>
+          <div class="page-actions">
+            <t-button shape="square" variant="outline" title="刷新" @click="loadPackages">
+              <svg><use href="#i-refresh" /></svg>
+            </t-button>
+            <t-button theme="primary" @click="openPkgAdd">
+              <svg><use href="#i-plus" /></svg>新建套餐
+            </t-button>
+          </div>
+        </div>
+
+        <div class="asset-table-wrap">
+          <t-table
+            row-key="id"
+            :data="pkgList"
+            :columns="pkgColumns"
+            empty="暂无流量套餐"
+          >
+            <template #status="{ row }">
+              <span class="table-status" :class="row.statusClass"><i></i>{{ row.statusName }}</span>
+            </template>
+            <template #actions="{ row }">
+              <div class="row-actions">
+                <t-button variant="text" theme="primary" @click="openPkgEdit(row)">编辑</t-button>
+                <t-button
+                  v-if="row.status === 'active'"
+                  variant="text"
+                  theme="danger"
+                  @click="disablePackage(row)"
+                >下架</t-button>
+              </div>
+            </template>
+          </t-table>
+        </div>
+
+        <div class="table-footer">
+          <t-pagination
+            v-model:current="pkgPageNum"
+            :total="pkgTotal"
+            :page-size="pkgPageSize"
+            @current-change="loadPackages"
+          />
+        </div>
+      </div>
+
+      <div v-show="tab === 'sim-packages'" class="packages-panel">
+        <div class="asset-toolbar"><div class="toolbar-group"><t-select v-model="simPkgStatus" :options="pkgStatusFilterOptions" style="width:140px" @change="reloadSimPackages" /></div><div class="page-actions"><t-button shape="square" variant="outline" @click="loadSimPackages">刷新</t-button><t-button variant="outline" @click="openProviderPlans">从 SIMBOSS 查询套餐</t-button><t-button theme="primary" @click="openSimPkgAdd">新建通信卡套餐</t-button></div></div>
+        <div class="asset-table-wrap"><t-table row-key="id" :data="simPkgList" :columns="simPkgColumns" empty="暂无通信卡套餐"><template #status="{ row }"><span class="table-status" :class="row.status === 'active' ? 'online' : 'offline'"><i></i>{{ row.status === 'active' ? '上架' : '下架' }}</span></template><template #actions="{ row }"><t-button variant="text" theme="primary" @click="openSimPkgEdit(row)">编辑</t-button><t-button v-if="row.status === 'active'" variant="text" theme="danger" @click="disableSimPkg(row)">下架</t-button></template></t-table></div>
+        <div class="table-footer"><t-pagination v-model:current="simPkgPage" :total="simPkgTotal" :page-size="10" @current-change="loadSimPackages" /></div>
+      </div>
+
+
+      <div v-show="tab === 'purchases'" class="purchases-panel">
+        <div v-if="poolMissing" class="pool-empty">
+          尚未建立资源池，首次录入采购后自动创建
+        </div>
+        <div v-else-if="pool" class="business-metric-band pool-metrics">
+          <div>
+            <span>资源池总量</span>
+            <strong>{{ bytesToGbText(pool.totalBytes) }}</strong>
+            <small>{{ pool.totalBytes ?? 0 }} bytes</small>
+          </div>
+          <div>
+            <span>可用流量</span>
+            <strong>{{ bytesToGbText(pool.availableBytes) }}</strong>
+            <small>{{ pool.availableBytes ?? 0 }} bytes</small>
+          </div>
+          <div>
+            <span>池状态</span>
+            <strong>{{ pool.status === 'active' ? '有效' : (pool.status === 'inactive' ? '失效' : (pool.status || '—')) }}</strong>
+            <small>{{ pool.status === 'active' ? '有效' : (pool.status === 'inactive' ? '失效' : (pool.status || '—')) }}</small>
+          </div>
+        </div>
+
+        <div class="asset-toolbar">
+          <div class="asset-search">
+            <t-input
+              v-model="purchaseProvider"
+              clearable
+              placeholder="按供应商筛选"
+              @keyup.enter="reloadPurchases"
+              @clear="reloadPurchases"
+            >
+              <template #prefix-icon><t-icon name="search" /></template>
+            </t-input>
+          </div>
+          <div class="toolbar-group">
+            <t-select
+              v-model="purchaseStatus"
+              :options="purchaseStatusOptions"
+              placeholder="全部状态"
+              style="width: 140px"
+              @change="reloadPurchases"
+            />
+          </div>
+          <div class="page-actions">
+            <t-button shape="square" variant="outline" title="刷新" @click="loadPurchasesTab">
+              <svg><use href="#i-refresh" /></svg>
+            </t-button>
+            <t-button theme="primary" @click="openPurchaseAdd">
+              <svg><use href="#i-plus" /></svg>录入采购
+            </t-button>
+          </div>
+        </div>
+
+        <div class="asset-table-wrap">
+          <t-table
+            row-key="id"
+            :data="purchaseList"
+            :columns="purchaseColumns"
+            empty="暂无采购记录"
+          />
+        </div>
+
+        <div class="table-footer">
+          <t-pagination
+            v-model:current="purchasePageNum"
+            :total="purchaseTotal"
+            :page-size="purchasePageSize"
+            @current-change="loadPurchases"
+          />
+        </div>
+      </div>
+
+      <div v-show="tab === 'ledger'" class="ledger-panel">
+        <div class="asset-toolbar">
+          <div class="toolbar-group">
+            <t-select
+              v-model="ledgerAccountType"
+              :options="ledgerAccountTypeOptions"
+              placeholder="全部账户"
+              style="width: 140px"
+              @change="reloadLedger"
+            />
+          </div>
+          <div class="asset-search">
+            <t-input
+              v-model="ledgerAccountId"
+              clearable
+              placeholder="按账户ID筛选"
+              @keyup.enter="reloadLedger"
+              @clear="reloadLedger"
+            >
+              <template #prefix-icon><t-icon name="search" /></template>
+            </t-input>
+          </div>
+          <div class="page-actions">
+            <t-button shape="square" variant="outline" title="刷新" @click="loadLedger">
+              <svg><use href="#i-refresh" /></svg>
+            </t-button>
+          </div>
+        </div>
+
+        <div class="asset-table-wrap">
+          <t-table
+            row-key="id"
+            :data="ledgerList"
+            :columns="ledgerColumns"
+            empty="暂无流水"
+          />
+        </div>
+
+        <div class="table-footer">
+          <t-pagination
+            v-model:current="ledgerPageNum"
+            :total="ledgerTotal"
+            :page-size="ledgerPageSize"
+            @current-change="loadLedger"
+          />
+        </div>
+      </div>
+    </div>
+
+    <t-dialog v-model:visible="simPkgModal" :header="simPkgEditing ? '编辑通信卡套餐' : '新建通信卡套餐'" width="520px" destroy-on-close dialog-class-name="add-dock-dialog"><form novalidate @submit.prevent="submitSimPkg"><label><span>套餐编码<b>*</b></span><t-input v-model="simPkgForm.code" :disabled="simPkgEditing" /></label><label><span>套餐名称<b>*</b></span><t-input v-model="simPkgForm.name" /></label><div class="form-row"><label><span>运营商</span><t-input v-model="simPkgForm.carrier" disabled /></label><label><span>供应商套餐ID</span><t-input-number v-model="simPkgForm.providerRatePlanId" :min="1" style="width:100%" disabled /></label></div><div class="form-row"><label><span>流量(GB)<b>*</b></span><t-input-number v-model="simPkgForm.amountGb" :min="1" style="width:100%" /></label><label><span>有效期(月)<b>*</b></span><t-input-number v-model="simPkgForm.validityMonths" :min="1" style="width:100%" /></label></div><div class="form-row"><label><span>销售价(元)<b>*</b></span><t-input-number v-model="simPkgForm.saleFeeFen" :min="0.01" :step="0.01" :decimal-places="2" style="width:100%" /></label><label><span>成本价(元)</span><t-input-number v-model="simPkgForm.costFeeFen" :min="0" :step="0.01" :decimal-places="2" style="width:100%" /></label></div><label v-if="simPkgEditing"><span>状态</span><t-select v-model="simPkgForm.status" :options="pkgStatusOptions" /></label><div class="form-error">{{ simPkgError }}</div></form><template #footer><t-button variant="outline" @click="simPkgModal=false">取消</t-button><t-button theme="primary" @click="submitSimPkg">保存</t-button></template></t-dialog>
+
+    <t-dialog
+      v-model:visible="pkgModalVisible"
+      :header="pkgEditingId ? '编辑套餐' : '新建套餐'"
+      width="520px"
+      destroy-on-close
+      dialog-class-name="add-dock-dialog"
+      :close-on-overlay-click="false"
+      placement="center"
+    >
+      <form novalidate @submit.prevent="submitPackage">
+        <label>
+          <span>编码<b>*</b></span>
+          <t-input
+            v-model="pkgForm.code"
+            :disabled="!!pkgEditingId"
+            placeholder="唯一编码，如 MEDIA_10G"
+          />
+        </label>
+        <label>
+          <span>名称<b>*</b></span>
+          <t-input v-model="pkgForm.name" placeholder="套餐名称" />
+        </label>
+        <div class="form-row">
+          <label>
+            <span>额度(GB)<b>*</b></span>
+            <t-input-number
+              v-model="pkgForm.amountGb"
+              theme="normal"
+              :min="0.01"
+              :step="1"
+              style="width: 100%"
+            />
+          </label>
+          <label>
+            <span>价格(元)</span>
+            <t-input-number
+              v-model="pkgForm.price"
+              theme="normal"
+              :min="0"
+              :step="0.01"
+              style="width: 100%"
+            />
+          </label>
+        </div>
+        <div class="form-row">
+          <label>
+            <span>有效期(天)</span>
+            <t-input-number
+              v-model="pkgForm.validityDays"
+              theme="normal"
+              :min="0"
+              style="width: 100%"
+            />
+          </label>
+          <label>
+            <span>排序</span>
+            <t-input-number
+              v-model="pkgForm.sort"
+              theme="normal"
+              :min="0"
+              style="width: 100%"
+            />
+          </label>
+        </div>
+        <label v-if="pkgEditingId">
+          <span>状态</span>
+          <t-select v-model="pkgForm.status" :options="pkgStatusOptions" style="width: 100%" />
+        </label>
+        <div v-if="!pkgEditingId" class="form-hint">有效期填 0 表示长期有效</div>
+        <div class="form-error">{{ pkgFormError }}</div>
+      </form>
+      <template #footer>
+        <t-button variant="outline" @click="pkgModalVisible = false">取消</t-button>
+        <t-button theme="primary" @click="submitPackage">
+          {{ pkgEditingId ? '保存' : '确认新建' }}
+        </t-button>
+      </template>
+    </t-dialog>
+
+    <t-dialog v-model:visible="providerPlansModal" header="SIMBOSS 供应商套餐" width="760px" destroy-on-close><div class="asset-toolbar"><t-input v-model="providerIccid" placeholder="输入通信卡 ICCID" /><t-button theme="primary" :loading="providerPlansLoading" @click="queryProviderPlans">查询</t-button></div><t-table row-key="ratePlanId" :data="providerPlans" :columns="providerPlanColumns" empty="暂无供应商套餐"><template #actions="{ row }"><t-button variant="text" theme="primary" @click="useProviderPlan(row)">使用此套餐</t-button></template></t-table></t-dialog>
+
+    <t-dialog
+      v-model:visible="purchaseModalVisible"
+      header="录入采购"
+      width="520px"
+      destroy-on-close
+      dialog-class-name="add-dock-dialog"
+      :close-on-overlay-click="false"
+      placement="center"
+    >
+      <form novalidate @submit.prevent="submitPurchase">
+        <label>
+          <span>批次号<b>*</b></span>
+          <t-input v-model="purchaseForm.batchNo" placeholder="唯一批次号" />
+        </label>
+        <label>
+          <span>供应商<b>*</b></span>
+          <t-input v-model="purchaseForm.provider" placeholder="供应商名称" />
+        </label>
+        <div class="form-row">
+          <label>
+            <span>总量(GB)<b>*</b></span>
+            <t-input-number
+              v-model="purchaseForm.totalGb"
+              theme="normal"
+              :min="0.01"
+              :step="1"
+              style="width: 100%"
+            />
+          </label>
+          <label>
+            <span>单价</span>
+            <t-input-number
+              v-model="purchaseForm.unitCost"
+              theme="normal"
+              :min="0"
+              :step="0.01"
+              style="width: 100%"
+            />
+          </label>
+        </div>
+        <div class="form-row">
+          <label>
+            <span>总成本</span>
+            <t-input-number
+              v-model="purchaseForm.totalCost"
+              theme="normal"
+              :min="0"
+              :step="0.01"
+              style="width: 100%"
+            />
+          </label>
+          <label>
+            <span>到期时间</span>
+            <t-input
+              v-model="purchaseForm.expiresAt"
+              placeholder="YYYY-MM-DDTHH:mm:ss"
+            />
+          </label>
+        </div>
+        <label>
+          <span>备注</span>
+          <t-input v-model="purchaseForm.remark" placeholder="可选备注" />
+        </label>
+        <div class="form-error">{{ purchaseFormError }}</div>
+      </form>
+      <template #footer>
+        <t-button variant="outline" @click="purchaseModalVisible = false">取消</t-button>
+        <t-button theme="primary" @click="submitPurchase">确认录入</t-button>
+      </template>
+    </t-dialog>
+
+    <t-dialog
+      v-model:visible="grantModalVisible"
+      header="测试发放流量"
+      width="520px"
+      destroy-on-close
+      dialog-class-name="add-dock-dialog"
+      :close-on-overlay-click="false"
+      placement="center"
+      @closed="resetGrantForm"
+    >
+      <form novalidate @submit.prevent="submitGrant">
+        <label>
+          <span>搜索用户</span>
+          <t-select
+            v-model="grantSelectedUserId"
+            filterable
+            clearable
+            placeholder="输入姓名 / 手机号 / 邮箱搜索"
+            :options="grantUserOptions"
+            :loading="grantUserSearching"
+            style="width: 100%"
+            @search="searchGrantUsers"
+            @change="onGrantUserPicked"
+            @clear="onGrantUserCleared"
+          />
+        </label>
+        <label>
+          <span>用户 ID<b>*</b></span>
+          <t-input
+            v-model="grantForm.userId"
+            clearable
+            placeholder="可手填，或从上方搜索选中"
+          />
+        </label>
+        <label>
+          <span>额度(GB)<b>*</b></span>
+          <t-input-number
+            v-model="grantForm.amountGb"
+            theme="normal"
+            :min="1"
+            :step="1"
+            :decimal-places="0"
+            style="width: 100%"
+          />
+        </label>
+        <label>
+          <span>原因<b>*</b></span>
+          <t-input v-model="grantForm.reason" clearable placeholder="如 live test" />
+        </label>
+        <p v-if="grantFormError" class="form-error">{{ grantFormError }}</p>
+        <div v-if="grantResultBalanceText" class="grant-result">
+          <span>最新余额</span>
+          <strong>{{ grantResultBalanceText }}</strong>
+        </div>
+      </form>
+      <template #footer>
+        <t-button variant="outline" @click="grantModalVisible = false">取消</t-button>
+        <t-button theme="primary" :loading="grantSubmitting" @click="submitGrant">确认发放</t-button>
+      </template>
+    </t-dialog>
+  </section>
+</template>
+
+<script setup>
+import { onMounted, reactive, ref, watch } from 'vue'
+import { useUiStore } from '@/stores/modules/uiStore'
+import request from '@/utils/http'
+import * as urls from '@/config/urls'
+
+const ui = useUiStore()
+const GB_BYTES = 1024 ** 3
+
+function bytesToGb(n) {
+  const v = Number(n || 0) / GB_BYTES
+  return Number.isFinite(v) ? v : 0
+}
+function bytesToGbText(n) {
+  return `${bytesToGb(n).toFixed(2)} GB`
+}
+function fmtTime(t) {
+  if (!t) return '--'
+  const d = new Date(t)
+  if (Number.isNaN(d.getTime())) return '--'
+  return d.toLocaleString('zh-CN', { hour12: false })
+}
+
+const tab = ref('packages')
+
+const pkgList = ref([])
+const pkgTotal = ref(0)
+const pkgPageNum = ref(1)
+const pkgPageSize = ref(10)
+const pkgStatusFilter = ref('')
+const pkgModalVisible = ref(false)
+const pkgEditingId = ref(null)
+const pkgFormError = ref('')
+const pkgForm = reactive({
+  code: '',
+  name: '',
+  amountGb: 1,
+  price: 0,
+  validityDays: 0,
+  sort: 0,
+  status: 'active'
+})
+
+const pkgStatusFilterOptions = [
+  { label: '全部状态', value: '' },
+  { label: '上架', value: 'active' },
+  { label: '下架', value: 'inactive' }
+]
+const pkgStatusOptions = [
+  { label: '上架', value: 'active' },
+  { label: '下架', value: 'inactive' }
+]
+const pkgColumns = [
+  { colKey: 'code', title: '编码', width: '12%', ellipsis: true },
+  { colKey: 'name', title: '名称', width: '14%', ellipsis: true },
+  { colKey: 'amountText', title: '额度', width: '10%' },
+  { colKey: 'priceText', title: '价格', width: '8%' },
+  { colKey: 'validityText', title: '有效期', width: '10%' },
+  { colKey: 'status', title: '状态', width: '8%' },
+  { colKey: 'sort', title: '排序', width: '6%' },
+  { colKey: 'updatedAt', title: '更新时间', width: '16%' },
+  { colKey: 'actions', title: '操作', width: '12%' }
+]
+
+async function loadPackages() {
+  try {
+    const params = { pageNum: pkgPageNum.value, pageSize: pkgPageSize.value }
+    if (pkgStatusFilter.value) params.status = pkgStatusFilter.value
+    const page = await request.get(urls.ADMIN_TRAFFIC_PACKAGES, { params })
+    pkgTotal.value = page?.total || 0
+    pkgList.value = (page?.records || []).map((p) => ({
+      id: String(p.id),
+      code: p.code,
+      name: p.name,
+      amountText: bytesToGbText(p.amountBytes),
+      priceText: `¥${Number(p.price || 0).toFixed(2)}`,
+      validityText: Number(p.validityDays) > 0 ? `${p.validityDays} 天` : '长期有效',
+      status: p.status,
+      statusName: p.status === 'active' ? '上架' : '下架',
+      statusClass: p.status === 'active' ? 'online' : 'offline',
+      sort: p.sort ?? 0,
+      updatedAt: fmtTime(p.updatedAt),
+      raw: p
+    }))
+  } catch (e) {
+    ui.toast(e.message || '加载套餐失败')
+  }
+}
+
+function reloadPackages() {
+  pkgPageNum.value = 1
+  loadPackages()
+}
+
+function openPkgAdd() {
+  Object.assign(pkgForm, {
+    code: '',
+    name: '',
+    amountGb: 1,
+    price: 0,
+    validityDays: 0,
+    sort: 0,
+    status: 'active'
+  })
+  pkgEditingId.value = null
+  pkgFormError.value = ''
+  pkgModalVisible.value = true
+}
+
+function openPkgEdit(row) {
+  const r = row.raw
+  Object.assign(pkgForm, {
+    code: r.code,
+    name: r.name,
+    amountGb: Number(bytesToGb(r.amountBytes).toFixed(4)) || 1,
+    price: Number(r.price || 0),
+    validityDays: Number(r.validityDays || 0),
+    sort: Number(r.sort || 0),
+    status: r.status || 'active'
+  })
+  pkgEditingId.value = row.id
+  pkgFormError.value = ''
+  pkgModalVisible.value = true
+}
+
+async function submitPackage() {
+  pkgFormError.value = ''
+  const name = String(pkgForm.name || '').trim()
+  const code = String(pkgForm.code || '').trim()
+  if (pkgEditingId.value) {
+    if (!name) {
+      pkgFormError.value = '请填写名称'
+      return
+    }
+  } else if (!code || !name) {
+    pkgFormError.value = '请填写编码和名称'
+    return
+  }
+  if (!(Number(pkgForm.amountGb) > 0)) {
+    pkgFormError.value = '额度必须大于 0 GB'
+    return
+  }
+  const amountBytes = Math.round(Number(pkgForm.amountGb) * GB_BYTES)
+  try {
+    if (pkgEditingId.value) {
+      // 后端 Update: price/validityDays 仅 >0 才写入；编辑时若用户未改就原样提交正值
+      const payload = {
+        name,
+        amountBytes,
+        sort: Number(pkgForm.sort || 0),
+        status: pkgForm.status
+      }
+      if (Number(pkgForm.price) > 0) payload.price = Number(pkgForm.price)
+      if (Number(pkgForm.validityDays) > 0) payload.validityDays = Number(pkgForm.validityDays)
+      // 长期有效（0）无法通过 Update 写入；保持原值即可。若必须把有效期改成长期，需后端后续支持。
+      await request.put(urls.ADMIN_TRAFFIC_PACKAGE(pkgEditingId.value), payload)
+      ui.toast('套餐已更新')
+    } else {
+      await request.post(urls.ADMIN_TRAFFIC_PACKAGES, {
+        code,
+        name,
+        amountBytes,
+        price: Number(pkgForm.price || 0),
+        validityDays: Number(pkgForm.validityDays || 0),
+        sort: Number(pkgForm.sort || 0)
+      })
+      ui.toast('套餐已创建')
+    }
+    pkgModalVisible.value = false
+    await loadPackages()
+  } catch (e) {
+    pkgFormError.value = e.message || '保存失败'
+  }
+}
+
+async function disablePackage(row) {
+  const ok = await ui.confirm(
+    `确认下架套餐 ${row.name}？`,
+    '下架后用户侧购买区不可见，之后可再编辑上架。'
+  )
+  if (!ok) return
+  try {
+    await request.delete(urls.ADMIN_TRAFFIC_PACKAGE(row.id))
+    ui.toast('套餐已下架')
+    await loadPackages()
+  } catch (e) {
+    ui.toast(e.message || '下架失败')
+  }
+}
+
+const providerPlansModal = ref(false)
+const providerIccid = ref('')
+const providerPlans = ref([])
+const providerPlansLoading = ref(false)
+const providerPlanColumns = [{ colKey: 'ratePlanId', title: '供应商套餐ID' }, { colKey: 'name', title: '名称' }, { colKey: 'dataVolume', title: '流量' }, { colKey: 'timeLength', title: '时长' }, { colKey: 'actions', title: '操作' }]
+async function queryProviderPlans() { if (!providerIccid.value.trim()) { ui.toast('请输入 ICCID'); return }; providerPlansLoading.value = true; try { providerPlans.value = await request.post(urls.ADMIN_SIM_PROVIDER_PLANS, { iccid: providerIccid.value.trim() }) } catch (e) { ui.toast(e.message || '查询供应商套餐失败') } finally { providerPlansLoading.value = false } }
+function openProviderPlans() { providerIccid.value = ''; providerPlans.value = []; providerPlansModal.value = true }
+function useProviderPlan(row) { Object.assign(simPkgForm, { providerRatePlanId: row.ratePlanId, name: row.name || simPkgForm.name, amountGb: Math.max(1, Math.round(Number(row.dataVolume) || 1)), validityMonths: Math.max(1, Math.round(Number(row.timeLength) / 30) || 1) }); simPkgModal.value = true; providerPlansModal.value = false; simPkgEditing.value = null; simPkgError.value = '' }
+
+
+const simPkgList = ref([])
+const simPkgTotal = ref(0)
+const simPkgPage = ref(1)
+const simPkgStatus = ref('')
+const simPkgModal = ref(false)
+const simPkgEditing = ref(null)
+const simPkgError = ref('')
+const simPkgForm = reactive({ code: '', name: '', carrier: '', providerRatePlanId: 0, amountGb: 1, validityMonths: 1, costFeeFen: 0, saleFeeFen: 0.01, status: 'active' })
+const simPkgColumns = [
+  { colKey: 'code', title: '编码' }, { colKey: 'name', title: '名称' }, { colKey: 'carrier', title: '运营商' },
+  { colKey: 'providerRatePlanId', title: '供应商套餐ID' }, { colKey: 'amountGb', title: '流量(GB)' }, { colKey: 'validityMonths', title: '有效期(月)' },
+  { colKey: 'saleFeeText', title: '售价' }, { colKey: 'status', title: '状态' }, { colKey: 'actions', title: '操作' }
+]
+async function loadSimPackages() {
+  try { const page = await request.get(urls.ADMIN_SIM_PACKAGES, { params: { pageNum: simPkgPage.value, pageSize: 10, status: simPkgStatus.value || undefined } }); simPkgTotal.value = page?.total || 0; simPkgList.value = (page?.records || []).map((p) => ({ ...p, id: String(p.id), saleFeeText: `¥${(Number(p.saleFeeFen || 0) / 100).toFixed(2)}` })) } catch (e) { ui.toast(e.message || '加载通信卡套餐失败') }
+}
+function reloadSimPackages() { simPkgPage.value = 1; loadSimPackages() }
+function openSimPkgAdd() { Object.assign(simPkgForm, { code: '', name: '', carrier: '', providerRatePlanId: 0, amountGb: 1, validityMonths: 1, costFeeFen: 0, saleFeeFen: 0.01, status: 'active' }); simPkgEditing.value = null; simPkgError.value = ''; simPkgModal.value = true }
+function openSimPkgEdit(row) { Object.assign(simPkgForm, { ...row, costFeeFen: Number(row.costFeeFen || 0) / 100, saleFeeFen: Number(row.saleFeeFen || 0) / 100 }); simPkgEditing.value = row.id; simPkgError.value = ''; simPkgModal.value = true }
+async function submitSimPkg() { simPkgError.value = ''; if (!simPkgForm.name || !simPkgForm.carrier || !simPkgForm.providerRatePlanId || !simPkgForm.amountGb || !simPkgForm.validityMonths || !(Number(simPkgForm.saleFeeFen) > 0) || (!simPkgEditing.value && !simPkgForm.code)) { simPkgError.value = '请完整填写套餐信息'; return }; try { const payload = { ...simPkgForm, providerRatePlanId: Number(simPkgForm.providerRatePlanId), amountGb: Number(simPkgForm.amountGb), validityMonths: Number(simPkgForm.validityMonths), costFeeFen: Math.round(Number(simPkgForm.costFeeFen || 0) * 100), saleFeeFen: Math.round(Number(simPkgForm.saleFeeFen) * 100) }; if (simPkgEditing.value) await request.put(urls.ADMIN_SIM_PACKAGE(simPkgEditing.value), payload); else await request.post(urls.ADMIN_SIM_PACKAGES, payload); simPkgModal.value = false; ui.toast('通信卡套餐已保存'); await loadSimPackages() } catch (e) { simPkgError.value = e.message || '保存失败' } }
+async function disableSimPkg(row) { const ok = await ui.confirm(`确认下架套餐 ${row.name}？`, '下架后用户侧不可购买。'); if (!ok) return; try { await request.delete(urls.ADMIN_SIM_PACKAGE(row.id)); await loadSimPackages(); ui.toast('套餐已下架') } catch (e) { ui.toast(e.message || '下架失败') } }
+
+
+const pool = ref(null)
+const poolMissing = ref(false)
+const purchaseList = ref([])
+const purchaseTotal = ref(0)
+const purchasePageNum = ref(1)
+const purchasePageSize = ref(10)
+const purchaseProvider = ref('')
+const purchaseStatus = ref('')
+const purchaseModalVisible = ref(false)
+const purchaseFormError = ref('')
+const purchaseForm = reactive({
+  batchNo: '',
+  provider: '',
+  totalGb: 1,
+  unitCost: 0,
+  totalCost: 0,
+  expiresAt: '',
+  remark: ''
+})
+
+const purchaseStatusOptions = [
+  { label: '全部状态', value: '' },
+  { label: '有效', value: 'active' },
+  { label: '失效', value: 'inactive' }
+]
+const purchaseColumns = [
+  { colKey: 'batchNo', title: '批次号', width: '12%', ellipsis: true },
+  { colKey: 'provider', title: '供应商', width: '10%', ellipsis: true },
+  { colKey: 'totalText', title: '总量', width: '10%' },
+  { colKey: 'costText', title: '成本', width: '10%' },
+  { colKey: 'expiresAt', title: '到期', width: '14%' },
+  { colKey: 'statusName', title: '状态', width: '8%' },
+  { colKey: 'remark', title: '备注', width: '14%', ellipsis: true },
+  { colKey: 'createdAt', title: '创建时间', width: '16%' }
+]
+
+async function loadPool() {
+  poolMissing.value = false
+  try {
+    pool.value = await request.get(urls.ADMIN_TRAFFIC_POOL, { skipErrorToast: true })
+  } catch (e) {
+    if (e.status === 404 || /资源不存在|not found/i.test(e.message || '')) {
+      pool.value = null
+      poolMissing.value = true
+      return
+    }
+    ui.toast(e.message || '加载资源池失败')
+  }
+}
+
+async function loadPurchases() {
+  try {
+    const params = { pageNum: purchasePageNum.value, pageSize: purchasePageSize.value }
+    if (purchaseProvider.value) params.provider = purchaseProvider.value
+    if (purchaseStatus.value) params.status = purchaseStatus.value
+    const page = await request.get(urls.ADMIN_TRAFFIC_PURCHASES, { params })
+    purchaseTotal.value = page?.total || 0
+    purchaseList.value = (page?.records || []).map((p) => ({
+      id: String(p.id),
+      batchNo: p.batchNo || '—',
+      provider: p.provider || '—',
+      totalText: bytesToGbText(p.totalBytes),
+      costText: `¥${Number(p.totalCost || 0).toFixed(2)}`,
+      expiresAt: fmtTime(p.expiresAt),
+      statusName: p.status === 'active' ? '有效' : (p.status === 'inactive' ? '失效' : (p.status || '—')),
+      remark: p.remark || '',
+      createdAt: fmtTime(p.createdAt),
+      raw: p
+    }))
+  } catch (e) {
+    ui.toast(e.message || '加载采购列表失败')
+  }
+}
+
+async function loadPurchasesTab() {
+  await Promise.all([loadPool(), loadPurchases()])
+}
+
+function reloadPurchases() {
+  purchasePageNum.value = 1
+  loadPurchases()
+}
+
+function openPurchaseAdd() {
+  Object.assign(purchaseForm, {
+    batchNo: '',
+    provider: '',
+    totalGb: 1,
+    unitCost: 0,
+    totalCost: 0,
+    expiresAt: '',
+    remark: ''
+  })
+  purchaseFormError.value = ''
+  purchaseModalVisible.value = true
+}
+
+async function submitPurchase() {
+  purchaseFormError.value = ''
+  if (!purchaseForm.batchNo.trim() || !purchaseForm.provider.trim()) {
+    purchaseFormError.value = '请填写批次号和供应商'
+    return
+  }
+  if (!(Number(purchaseForm.totalGb) > 0)) {
+    purchaseFormError.value = '采购总量必须大于 0 GB'
+    return
+  }
+  const payload = {
+    batchNo: purchaseForm.batchNo.trim(),
+    provider: purchaseForm.provider.trim(),
+    totalBytes: Math.round(Number(purchaseForm.totalGb) * GB_BYTES),
+    unitCost: Number(purchaseForm.unitCost || 0),
+    totalCost: Number(purchaseForm.totalCost || 0),
+    remark: purchaseForm.remark || ''
+  }
+  if (purchaseForm.expiresAt) {
+    const expires = new Date(purchaseForm.expiresAt)
+    if (Number.isNaN(expires.getTime())) {
+      purchaseFormError.value = '到期时间格式无效'
+      return
+    }
+    payload.expiresAt = expires.toISOString()
+  }
+  try {
+    await request.post(urls.ADMIN_TRAFFIC_PURCHASES, payload)
+    ui.toast('采购已录入')
+    purchaseModalVisible.value = false
+    await loadPurchasesTab()
+  } catch (e) {
+    purchaseFormError.value = e.message || '录入失败'
+  }
+}
+
+const grantModalVisible = ref(false)
+const grantSubmitting = ref(false)
+const grantUserSearching = ref(false)
+const grantFormError = ref('')
+const grantResultBalanceText = ref('')
+const grantSelectedUserId = ref('')
+const grantUserOptions = ref([])
+const grantForm = reactive({
+  userId: '',
+  amountGb: 10,
+  reason: 'live test'
+})
+
+function resetGrantForm() {
+  grantForm.userId = ''
+  grantForm.amountGb = 10
+  grantForm.reason = 'live test'
+  grantSelectedUserId.value = ''
+  grantUserOptions.value = []
+  grantFormError.value = ''
+  grantResultBalanceText.value = ''
+  grantSubmitting.value = false
+  grantUserSearching.value = false
+}
+
+function openGrant() {
+  resetGrantForm()
+  grantModalVisible.value = true
+}
+
+function onGrantUserPicked(val) {
+  if (val == null || val === '') return
+  grantForm.userId = String(val)
+}
+
+function onGrantUserCleared() {
+  grantSelectedUserId.value = ''
+}
+
+let grantSearchSeq = 0
+async function searchGrantUsers(keyword) {
+  const q = String(keyword || '').trim()
+  if (!q) {
+    grantSearchSeq += 1
+    grantUserOptions.value = []
+    grantUserSearching.value = false
+    return
+  }
+  const seq = ++grantSearchSeq
+  grantUserSearching.value = true
+  try {
+    const page = await request.get(urls.USERS, {
+      params: { keyword: q, role: 'user', pageNum: 1, pageSize: 20 }
+    })
+    if (seq !== grantSearchSeq) return
+    grantUserOptions.value = (page?.records || []).map((u) => ({
+      label: `${u.name || '--'} · ${u.phone || '--'} · ${u.id}`,
+      value: String(u.id)
+    }))
+  } catch (e) {
+    if (seq !== grantSearchSeq) return
+    grantUserOptions.value = []
+    // http 拦截器已 toast；此处不重复
+  } finally {
+    if (seq === grantSearchSeq) grantUserSearching.value = false
+  }
+}
+
+function parseGrantBalanceText(data) {
+  if (data == null) return '已发放（未返回余额字段）'
+  if (typeof data === 'number' || (typeof data === 'string' && data.trim() !== '' && !Number.isNaN(Number(data)))) {
+    const n = Number(data)
+    if (!Number.isFinite(n)) return '已发放（未返回余额字段）'
+    // 很大则按 bytes，否则按 GB
+    return n >= GB_BYTES ? bytesToGbText(n) : `${n.toFixed(2)} GB`
+  }
+  if (typeof data !== 'object') return '已发放（未返回余额字段）'
+  if (data.trafficBalanceBytes != null) return bytesToGbText(data.trafficBalanceBytes)
+  if (data.balanceBytes != null) return bytesToGbText(data.balanceBytes)
+  if (data.trafficBalance != null) {
+    const n = Number(data.trafficBalance)
+    if (!Number.isFinite(n)) return '已发放（未返回余额字段）'
+    return n >= GB_BYTES ? bytesToGbText(n) : `${n.toFixed(2)} GB`
+  }
+  if (data.balance != null) {
+    const n = Number(data.balance)
+    if (!Number.isFinite(n)) return '已发放（未返回余额字段）'
+    return n >= GB_BYTES ? bytesToGbText(n) : `${n.toFixed(2)} GB`
+  }
+  return '已发放（未返回余额字段）'
+}
+
+async function submitGrant() {
+  if (grantSubmitting.value) return
+  grantFormError.value = ''
+  const userIdNum = Number(String(grantForm.userId || '').trim())
+  const amountGb = Number(grantForm.amountGb)
+  const reason = String(grantForm.reason || '').trim()
+  if (!Number.isInteger(userIdNum) || userIdNum <= 0) {
+    grantFormError.value = '请填写有效的用户 ID'
+    return
+  }
+  if (!Number.isFinite(amountGb) || amountGb < 1 || !Number.isInteger(amountGb)) {
+    grantFormError.value = '额度须为不小于 1 的整数 GB'
+    return
+  }
+  if (!reason) {
+    grantFormError.value = '请填写原因'
+    return
+  }
+  grantSubmitting.value = true
+  try {
+    const data = await request.post(urls.ADMIN_TRAFFIC_TEST_GRANTS, {
+      userId: userIdNum,
+      amountGb,
+      reason
+    })
+    grantResultBalanceText.value = parseGrantBalanceText(data)
+    ui.toast('测试流量已发放')
+  } catch (e) {
+    // 拦截器已 toast；保留对话框便于改参重试
+    if (!e?.message) ui.toast('发放失败')
+  } finally {
+    grantSubmitting.value = false
+  }
+}
+
+
+const ledgerList = ref([])
+const ledgerTotal = ref(0)
+const ledgerPageNum = ref(1)
+const ledgerPageSize = ref(10)
+const ledgerAccountType = ref('')
+const ledgerAccountId = ref('')
+
+const ledgerAccountTypeOptions = [
+  { label: '全部账户', value: '' },
+  { label: '用户', value: 'user' },
+  { label: '平台', value: 'platform' }
+]
+const ledgerColumns = [
+  { colKey: 'createdAt', title: '时间', width: '14%' },
+  { colKey: 'accountType', title: '账户类型', width: '8%' },
+  { colKey: 'accountId', title: '账户ID', width: '10%' },
+  { colKey: 'direction', title: '方向', width: '7%' },
+  { colKey: 'amountText', title: '金额', width: '12%', ellipsis: true },
+  { colKey: 'balanceText', title: '余额前→后', width: '14%', ellipsis: true },
+  { colKey: 'sourceType', title: '来源', width: '10%', ellipsis: true },
+  { colKey: 'sourceId', title: '来源ID', width: '10%', ellipsis: true },
+  { colKey: 'idempotencyKey', title: '幂等键', width: '12%', ellipsis: true }
+]
+
+async function loadLedger() {
+  try {
+    const params = { pageNum: ledgerPageNum.value, pageSize: ledgerPageSize.value }
+    if (ledgerAccountType.value) params.accountType = ledgerAccountType.value
+    const rawId = String(ledgerAccountId.value || '').trim()
+    if (rawId) {
+      const id = Number(rawId)
+      if (!Number.isFinite(id) || id <= 0 || !Number.isInteger(id)) {
+        ui.toast('账户ID须为正整数')
+        return
+      }
+      params.accountId = id
+    }
+    const page = await request.get(urls.ADMIN_TRAFFIC_LEDGER, { params })
+    ledgerTotal.value = page?.total || 0
+    ledgerList.value = (page?.records || []).map((r) => ({
+      id: String(r.id),
+      createdAt: fmtTime(r.createdAt),
+      accountType: r.accountType === 'user' ? '用户' : (r.accountType === 'platform' ? '平台' : (r.accountType || '—')),
+      accountId: String(r.accountId),
+      direction: r.direction === 'credit' ? '入账' : (r.direction === 'debit' ? '扣减' : r.direction),
+      amountText: `${bytesToGbText(r.amountBytes)} (${r.amountBytes})`,
+      balanceText: `${bytesToGbText(r.balanceBefore)} → ${bytesToGbText(r.balanceAfter)}`,
+      sourceType: r.sourceType || '—',
+      sourceId: r.sourceId || '—',
+      idempotencyKey: r.idempotencyKey || '—'
+    }))
+  } catch (e) {
+    ui.toast(e.message || '加载流水失败')
+  }
+}
+
+function reloadLedger() {
+  ledgerPageNum.value = 1
+  loadLedger()
+}
+
+
+
+watch(tab, (v) => {
+  if (v === 'packages') loadPackages()
+  if (v === 'sim-packages') loadSimPackages()
+  if (v === 'purchases') loadPurchasesTab()
+  if (v === 'ledger') loadLedger()
+})
+
+onMounted(() => {
+  if (tab.value === 'packages') loadPackages()
+})
+</script>
+
+<style scoped>
+.packages-panel,
+.purchases-panel,
+.ledger-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+.pool-metrics {
+  margin: 12px 16px 0;
+  grid-template-columns: repeat(3, 1fr);
+}
+.pool-empty {
+  margin: 12px 16px 0;
+  padding: 14px 16px;
+  border: 1px dashed var(--line);
+  border-radius: 6px;
+  background: #fafbfc;
+  color: var(--muted);
+  font-size: 12px;
+}
+.asset-search {
+  border: 0;
+  padding: 0;
+  height: auto;
+}
+.asset-search :deep(.t-input) {
+  width: 100%;
+}
+.toolbar-group :deep(.t-select) {
+  flex-shrink: 0;
+}
+.form-hint {
+  margin-top: 4px;
+  color: var(--muted);
+  font-size: 11px;
+}
+
+.grant-result {
+  margin-top: 12px;
+  padding: 10px 12px;
+  border: 1px solid #d7e4ee;
+  border-radius: 4px;
+  background: #f5f9fc;
+}
+.grant-result span {
+  display: block;
+  color: #6c7d88;
+  font-size: 11px;
+}
+.grant-result strong {
+  display: block;
+  margin-top: 4px;
+  color: #246fae;
+  font-size: 18px;
+}
+</style>
+
+<style>
+.add-dock-dialog .t-input,
+.add-dock-dialog .t-input-number,
+.add-dock-dialog .t-select {
+  width: 100%;
+}
+</style>