refactor(DeviceSnDetail): 重构设备详情页面为全功能详情视图

将侧边抽屉组件完全重构为独立的设备详情页面，包含设备截图轮播、分面板设备信息、应用列表、定位信息等模块，大幅扩展信息展示和交互能力。

src/views/devices/sn/index.vue

@@ -81,12 +81,20 @@
         @return-click="handleReturnClick"
       />
     </div>
+    <!-- 操作列详情 - 概览抽屉，样式与编辑抽屉一致 -->
+    <el-drawer v-model="overviewVisible" title="查看" size="500px" destroy-on-close>
+      <DeviceSnOverView :serialno="selectedRow?.serialno" />
+      <template #footer>
+        <el-button @click="overviewVisible = false">关闭</el-button>
+      </template>
+    </el-drawer>
   </div>
 </template>
 
 <script setup lang="ts">
 import DeviceAPI from "@/api/system/device";
 import type { IObject, PageModalInstance } from "@/components/DeviceSn/types";
+import DeviceSnOverView from "@/components/DeviceSn/DeviceSnOverView.vue";
 import usePage from "@/components/DeviceSn/usePage";
 import addModalConfig from "./config/add";
 import contentConfig from "./config/content";
@@ -119,13 +127,14 @@ function handleToolbarClick(name: string) {
 
 function handleReturnClick() {
   dialogVisible.value = false;
+  overviewVisible.value = false;
 }
 
 // 表格工具
 const handleOperateClick = (data: IObject) => {
   if (data.name === "detail") {
-    // 打开设备详情抽屉，读取常用参数
-    handleSerialnoClick(data.row);
+    selectedRow.value = data.row;
+    overviewVisible.value = true;
   } else if (data.name === "edit") {
     editModalConfig.drawer = { ...editModalConfig.drawer, title: "修改" };
     handleEditClick(data.row, async () => {
@@ -210,6 +219,7 @@ const handleSerialnoClick = async (row: IObject) => {
 };
 
 const dialogVisible = ref(false);
+const overviewVisible = ref(false);
 const selectedRow = ref<IObject>({});
 
 onMounted(() => {