feat(device): 新增设备在线状态查询与实时更新功能

- 新增设备在线状态视图对象类型定义
- 新增设备在线状态批量查询接口与详情页查询接口
- 表格数据加载完成后批量查询并更新设备在线状态
- 详情页独立查询在线状态并展示状态指示点
- 通过 SSE 推送实时更新表格与详情页的设备在线状态

src/components/DeviceSn/DeviceSnDetail.vue

@@ -7,7 +7,11 @@
         <div class="info-content">
           <div class="info-row">
             <span class="device-name">{{ deviceData.snName }}</span>
-            <el-tag type="success" size="small">
+            <span
+              class="status-dot"
+              :style="{ backgroundColor: deviceData.onlineStatus == 1 ? '#67c23a' : '#f56c6c' }"
+            />
+            <el-tag :type="deviceData.onlineStatus == 1 ? 'success' : 'danger'" size="small">
               {{ deviceData.onlineStatus == 1 ? "在线" : "离线" }}
             </el-tag>
           </div>
@@ -747,12 +751,14 @@ import type {
   DeviceBasicInfo,
   DeviceHardwareInfo,
   DeviceNetworkInfo,
+  DeviceOnlineVO,
   DeviceOtherInfo,
   DeviceSecurityInfo,
   DeviceLocationInfo,
   DeviceScreenshot,
 } from "@/api/system/device/types";
-import { nextTick, reactive, ref, watch } from "vue";
+import { nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from "vue";
+import { useSse } from "@/composables";
 import {
   Back,
   Edit,
@@ -960,6 +966,20 @@ async function loadDeviceDetail(serialno: string) {
     ElMessage.error("加载设备详情失败");
     console.error("Error loading device detail:", error);
   }
+  // 加载完设备基础信息后，单独查询设备在线状态
+  loadOnlineStatus(serialno);
+}
+
+/** 查询单台设备在线状态 */
+async function loadOnlineStatus(serialno: string) {
+  try {
+    const onlineInfo = await DeviceAPI.getOnlineStatus(serialno);
+    if (onlineInfo) {
+      deviceData.onlineStatus = onlineInfo.online ?? 0;
+    }
+  } catch (error) {
+    console.error("查询设备在线状态失败:", error);
+  }
 }
 
 /** 基本信息 */
@@ -1319,6 +1339,41 @@ const handleStopApp = (row: ApkInstallInfo) => {
 
 defineExpose({ loadAll });
 
+/**
+ * SSE 设备在线状态事件监听取消函数
+ */
+let unsubscribeDeviceOnlineStatus: (() => void) | null = null;
+
+/**
+ * 根据 SSE 推送的设备在线状态更新详情页的在线状态
+ */
+function handleDeviceOnlineStatus(data: DeviceOnlineVO) {
+  if (!data || !data.serialno) {
+    return;
+  }
+  // 仅当推送的设备 SN 与当前详情页设备匹配时才更新
+  if (data.serialno === props.serialno) {
+    deviceData.onlineStatus = data.online ?? 0;
+  }
+}
+
+onMounted(() => {
+  // 监听 SSE 推送的设备在线状态，实时更新详情页
+  const sse = useSse();
+  unsubscribeDeviceOnlineStatus = sse.on<DeviceOnlineVO>(
+    "device-online-status",
+    handleDeviceOnlineStatus
+  );
+});
+
+onBeforeUnmount(() => {
+  // 组件销毁时取消 SSE 事件监听
+  if (unsubscribeDeviceOnlineStatus) {
+    unsubscribeDeviceOnlineStatus();
+    unsubscribeDeviceOnlineStatus = null;
+  }
+});
+
 /** 操作按钮事件 */
 const handleReturn = () => {
   emit("update:modelValue", false);
@@ -1806,4 +1861,13 @@ const handleMoreActions = (command: string) => {
     }
   }
 }
+
+.status-dot {
+  display: inline-block;
+  flex-shrink: 0;
+  width: 8px;
+  height: 8px;
+  margin-right: 4px;
+  border-radius: 50%;
+}
 </style>