refactor(vimp): 重构设备中心代码，修复图标渲染并整理导入

- 重新组织use-device-center-query的导入语句，合并api与类型导入
- 将接口返回的站点数据重命名为sitesFromApi以提升代码可读性
- 修复camera和alarm store中图标的渲染插槽语法
- 更新store方法调用时的参数传递

src/pages/vimp/composables/query/use-device-center-query.ts

@@ -1,11 +1,10 @@
 import { useQuery } from '@tanstack/vue-query';
 import { computed } from 'vue';
-import { catalogChannelApi, catalogAllDeviceApi } from '../../apis/request';
 import type { AxiosRequestConfig } from 'axios';
 import axios from 'axios';
 import type { CodeArea, CodeLines, CodeSites } from '../../types';
 import { useCameraStore, useAlarmStore } from '../../stores';
-import type { VimpChannel } from '../../apis/model';
+import { catalogAllDeviceApi, catalogChannelApi, type VimpChannel } from '../../apis';
 
 export const useDeviceCenterQuery = () => {
   const cameraStore = useCameraStore();
@@ -49,10 +48,10 @@ export const useDeviceCenterQuery = () => {
 
       const siteCamerasMap: Record<string, VimpChannel[]> = {};
       const siteAlarmsMap: Record<string, VimpChannel[]> = {};
-      const sites = await catalogAllDeviceApi({ signal });
+      const sitesFromApi = await catalogAllDeviceApi({ signal });
 
-      if (!!sites) {
-        for (const site of sites) {
+      if (!!sitesFromApi) {
+        for (const site of sitesFromApi) {
           const channels = await catalogChannelApi(site.code, { signal });
           if (!channels || channels.length === 0) continue;
 
@@ -74,7 +73,7 @@ export const useDeviceCenterQuery = () => {
       }
 
       cameraStore.buildLineTabPanes({
-        sites,
+        sitesFromApi,
         siteCamerasMap,
         codeLines,
         codeSites,
@@ -85,7 +84,7 @@ export const useDeviceCenterQuery = () => {
       });
 
       alarmStore.buildLineTabPanes({
-        sites,
+        sitesFromApi,
         siteAlarmsMap,
         codeLines,
         codeSites,

src/pages/vimp/stores/alarm.ts

@@ -6,7 +6,7 @@ import { NIcon } from 'naive-ui';
 import { SirenIcon } from 'lucide-vue-next';
 
 interface BuildLineTabPanesParams {
-  sites: VimpStation[] | null;
+  sitesFromApi: VimpStation[] | null;
   siteAlarmsMap: Record<string, VimpChannel[]>;
   codeLines: CodeLines;
   codeSites: CodeSites;
@@ -20,14 +20,14 @@ export const useAlarmStore = defineStore('vimp-alarm-store', () => {
   const lineTabPanes = ref<AlarmLineTabPane[]>([]);
 
   const buildLineTabPanes = (params: BuildLineTabPanesParams) => {
-    const { sites, siteAlarmsMap, codeLines, codeSites, codeStationAreas, codeParkingAreas, codeOccAreas, codeTrainAreas } = params;
-    if (!sites) {
+    const { sitesFromApi, siteAlarmsMap, codeLines, codeSites, codeStationAreas, codeParkingAreas, codeOccAreas, codeTrainAreas } = params;
+    if (!sitesFromApi) {
       lineTabPanes.value = [];
       return;
     }
     // 构造线路TabPane
     const _lineTabPanes: AlarmLineTabPane[] = [];
-    const lineCode = sites.at(0)?.code.substring(0, 3) ?? '';
+    const lineCode = sitesFromApi.at(0)?.code.substring(0, 3) ?? '';
     const lineName = codeLines[lineCode]?.name ?? '';
     if (!_lineTabPanes.some((lineNode) => lineNode.lineCode === lineCode)) {
       _lineTabPanes.push({
@@ -38,7 +38,7 @@ export const useAlarmStore = defineStore('vimp-alarm-store', () => {
     }
 
     // 遍历所有站点
-    for (const site of sites) {
+    for (const site of sitesFromApi) {
       const siteCode = site.code.substring(0, 6);
       const siteName = codeSites[siteCode]?.name;
       if (!siteName) continue;
@@ -132,7 +132,7 @@ export const useAlarmStore = defineStore('vimp-alarm-store', () => {
           alarm: alarm,
           site: site,
           prefix: () => {
-            return h(NIcon, h(SirenIcon));
+            return h(NIcon, () => h(SirenIcon));
           },
         };
 

src/pages/vimp/stores/camera.ts

@@ -8,7 +8,7 @@ import PtzCamera from '../components/icon/ptz-camera.vue';
 import HemiPtzCamera from '../components/icon/hemi-ptz-camera.vue';
 
 interface BuildLineTabPanesParams {
-  sites: VimpStation[] | null;
+  sitesFromApi: VimpStation[] | null;
   siteCamerasMap: Record<string, VimpChannel[]>;
   codeLines: CodeLines;
   codeSites: CodeSites;
@@ -22,14 +22,14 @@ export const useCameraStore = defineStore('vimp-camera-store', () => {
   const lineTabPanes = ref<CameraLineTabPane[]>([]);
 
   const buildLineTabPanes = (params: BuildLineTabPanesParams) => {
-    const { sites, siteCamerasMap, codeLines, codeSites, codeStationAreas, codeParkingAreas, codeOccAreas, codeTrainAreas } = params;
-    if (!sites) {
+    const { sitesFromApi, siteCamerasMap, codeLines, codeSites, codeStationAreas, codeParkingAreas, codeOccAreas, codeTrainAreas } = params;
+    if (!sitesFromApi) {
       lineTabPanes.value = [];
       return;
     }
     // 构造线路TabPane
     const _lineTabPanes: CameraLineTabPane[] = [];
-    const lineCode = sites.at(0)?.code.substring(0, 3) ?? '';
+    const lineCode = sitesFromApi.at(0)?.code.substring(0, 3) ?? '';
     const lineName = codeLines[lineCode]?.name ?? '';
     if (!_lineTabPanes.some((lineNode) => lineNode.lineCode === lineCode)) {
       _lineTabPanes.push({
@@ -40,7 +40,7 @@ export const useCameraStore = defineStore('vimp-camera-store', () => {
     }
 
     // 遍历所有站点
-    for (const site of sites) {
+    for (const site of sitesFromApi) {
       const siteCode = site.code.substring(0, 6);
       const siteName = codeSites[siteCode]?.name;
       if (!siteName) continue;
@@ -134,9 +134,9 @@ export const useCameraStore = defineStore('vimp-camera-store', () => {
           camera: camera,
           site: site,
           prefix: () => {
-            if (cameraType === '004') return h(NIcon, h(PtzCamera));
-            if (cameraType === '005') return h(NIcon, h(HemiPtzCamera));
-            if (cameraType === '006') return h(NIcon, h(BulletCamera));
+            if (cameraType === '004') return h(NIcon, () => h(PtzCamera));
+            if (cameraType === '005') return h(NIcon, () => h(HemiPtzCamera));
+            if (cameraType === '006') return h(NIcon, () => h(BulletCamera));
           },
         };