From 3e45bb212a3f4e9f3ef58f71439ed76d5a11de7c Mon Sep 17 00:00:00 2001
From: yangsy <ysy@ittc.sh.cn>
Date: Wed, 3 Sep 2025 14:56:33 +0800
Subject: [PATCH] refactor: reorganize device card components

---
 .../{ => device-card}/camera-card.vue         | 13 +++++-----
 .../current-diag-card}/device-common-card.vue |  0
 .../device-hardware-card.vue                  |  2 +-
 .../current-diag-card}/device-header-card.vue |  0
 .../current-diag-card}/nvr-disk-card.vue      |  2 +-
 .../nvr-record-diag-card.vue                  |  4 +--
 .../security-box-circuit-card.vue}            |  0
 .../security-box-info-card.vue}               |  0
 .../current-diag-card}/switch-port-card.vue   |  7 ------
 .../{ => device-card}/decoder-card.vue        | 17 +++++++------
 .../{ => device-card}/keyboard-card.vue       |  7 +++---
 .../{ => device-card}/nvr-card.vue            | 24 ++++++++++--------
 .../{ => device-card}/security-box-card.vue   | 25 ++++++++++---------
 .../{ => device-card}/server-card.vue         |  7 +++---
 .../{ => device-card}/switch-card.vue         | 17 +++++++------
 15 files changed, 64 insertions(+), 61 deletions(-)
 rename src/components/device-page/{ => device-card}/camera-card.vue (89%)
 rename src/components/device-page/{ => device-card/current-diag-card}/device-common-card.vue (100%)
 rename src/components/device-page/{ => device-card/current-diag-card}/device-hardware-card.vue (100%)
 rename src/components/device-page/{ => device-card/current-diag-card}/device-header-card.vue (100%)
 rename src/components/device-page/{ => device-card/current-diag-card}/nvr-disk-card.vue (100%)
 rename src/components/device-page/{ => device-card/current-diag-card}/nvr-record-diag-card.vue (100%)
 rename src/components/device-page/{box-circuit-card.vue => device-card/current-diag-card/security-box-circuit-card.vue} (100%)
 rename src/components/device-page/{box-info-card.vue => device-card/current-diag-card/security-box-info-card.vue} (100%)
 rename src/components/device-page/{ => device-card/current-diag-card}/switch-port-card.vue (99%)
 rename src/components/device-page/{ => device-card}/decoder-card.vue (86%)
 rename src/components/device-page/{ => device-card}/keyboard-card.vue (84%)
 rename src/components/device-page/{ => device-card}/nvr-card.vue (80%)
 rename src/components/device-page/{ => device-card}/security-box-card.vue (71%)
 rename src/components/device-page/{ => device-card}/server-card.vue (88%)
 rename src/components/device-page/{ => device-card}/switch-card.vue (84%)

diff --git a/src/components/device-page/camera-card.vue b/src/components/device-page/device-card/camera-card.vue
similarity index 89%
rename from src/components/device-page/camera-card.vue
rename to src/components/device-page/device-card/camera-card.vue
index b03684b..d8373f6 100644
--- a/src/components/device-page/camera-card.vue
+++ b/src/components/device-page/device-card/camera-card.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import type { NdmCameraResultVO } from '@/apis/models';
-import { computed, ref, toRefs } from 'vue';
-import DeviceHeaderCard from './device-header-card.vue';
-import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
-import { destr } from 'destr';
 import type { NdmDecoderDiagInfo } from '@/apis/domains';
+import type { NdmCameraResultVO } from '@/apis/models';
+import { destr } from 'destr';
+import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
+import { computed, ref, toRefs } from 'vue';
+
+import DeviceHeaderCard from './current-diag-card/device-header-card.vue';
 
 const props = defineProps<{
   stationCode: string;
@@ -32,7 +33,7 @@ const selectedTab = ref('设备状态');
           <div v-if="false">{{ lastDiagInfo }}</div>
         </NFlex>
       </NTabPane>
-      <NTabPane name="诊断记录" tab="诊断记录"></NTabPane>
+      <NTabPane name="历史诊断" tab="历史诊断"></NTabPane>
       <!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
     </NTabs>
   </NCard>
diff --git a/src/components/device-page/device-common-card.vue b/src/components/device-page/device-card/current-diag-card/device-common-card.vue
similarity index 100%
rename from src/components/device-page/device-common-card.vue
rename to src/components/device-page/device-card/current-diag-card/device-common-card.vue
diff --git a/src/components/device-page/device-hardware-card.vue b/src/components/device-page/device-card/current-diag-card/device-hardware-card.vue
similarity index 100%
rename from src/components/device-page/device-hardware-card.vue
rename to src/components/device-page/device-card/current-diag-card/device-hardware-card.vue
index 8369b2c..2ddbe47 100644
--- a/src/components/device-page/device-hardware-card.vue
+++ b/src/components/device-page/device-card/current-diag-card/device-hardware-card.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { NCard, NProgress, NFlex, NText, NIcon, type ProgressStatus } from 'naive-ui';
 import { TimeOutline, HardwareChipOutline, ServerOutline, FolderOutline } from '@vicons/ionicons5';
+import { NCard, NProgress, NFlex, NText, NIcon, type ProgressStatus } from 'naive-ui';
 import { computed, toRefs } from 'vue';
 
 const props = defineProps<{
diff --git a/src/components/device-page/device-header-card.vue b/src/components/device-page/device-card/current-diag-card/device-header-card.vue
similarity index 100%
rename from src/components/device-page/device-header-card.vue
rename to src/components/device-page/device-card/current-diag-card/device-header-card.vue
diff --git a/src/components/device-page/nvr-disk-card.vue b/src/components/device-page/device-card/current-diag-card/nvr-disk-card.vue
similarity index 100%
rename from src/components/device-page/nvr-disk-card.vue
rename to src/components/device-page/device-card/current-diag-card/nvr-disk-card.vue
index 08c562c..05a03ee 100644
--- a/src/components/device-page/nvr-disk-card.vue
+++ b/src/components/device-page/device-card/current-diag-card/nvr-disk-card.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { NdmNvrDiagInfo } from '@/apis/domains';
-import { NCard, NFlex, NProgress, NText, NIcon, NPopover, NGrid, NGridItem } from 'naive-ui';
 import { HardwareChipOutline, CheckmarkCircleOutline, CloseCircleOutline, WarningOutline } from '@vicons/ionicons5';
+import { NCard, NFlex, NProgress, NText, NIcon, NPopover, NGrid, NGridItem } from 'naive-ui';
 import { computed, toRefs } from 'vue';
 
 const props = defineProps<{
diff --git a/src/components/device-page/nvr-record-diag-card.vue b/src/components/device-page/device-card/current-diag-card/nvr-record-diag-card.vue
similarity index 100%
rename from src/components/device-page/nvr-record-diag-card.vue
rename to src/components/device-page/device-card/current-diag-card/nvr-record-diag-card.vue
index 7ae3e8b..aa55d06 100644
--- a/src/components/device-page/nvr-record-diag-card.vue
+++ b/src/components/device-page/device-card/current-diag-card/nvr-record-diag-card.vue
@@ -71,11 +71,11 @@ const filterLostRecordList = (recordCheckRawData: any): NvrRecordDiag[] => {
 <script setup lang="ts">
 import type { ClientChannel, NdmNvrResultVO, NdmRecordCheck } from '@/apis/models';
 import { getChannelList as getChannelListApi, getRecordCheckByParentId as getRecordCheckByParentIdApi, reloadAllRecordCheck as reloadAllRecordCheckApi } from '@/apis/requests';
-import { NCard, NFlex, NText, NTag, NTimeline, NTimelineItem, NIcon, NEmpty, NStatistic, NGrid, NGridItem, NCollapse, NCollapseItem, NButton, NPopconfirm } from 'naive-ui';
 import { VideocamOutline, TimeOutline, WarningOutline, CheckmarkCircleOutline, RefreshOutline } from '@vicons/ionicons5';
-import { computed, onMounted, ref, toRefs } from 'vue';
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
+import { NCard, NFlex, NText, NTag, NTimeline, NTimelineItem, NIcon, NEmpty, NStatistic, NGrid, NGridItem, NCollapse, NCollapseItem, NButton, NPopconfirm } from 'naive-ui';
+import { computed, onMounted, ref, toRefs } from 'vue';
 
 dayjs.extend(duration);
 
diff --git a/src/components/device-page/box-circuit-card.vue b/src/components/device-page/device-card/current-diag-card/security-box-circuit-card.vue
similarity index 100%
rename from src/components/device-page/box-circuit-card.vue
rename to src/components/device-page/device-card/current-diag-card/security-box-circuit-card.vue
diff --git a/src/components/device-page/box-info-card.vue b/src/components/device-page/device-card/current-diag-card/security-box-info-card.vue
similarity index 100%
rename from src/components/device-page/box-info-card.vue
rename to src/components/device-page/device-card/current-diag-card/security-box-info-card.vue
diff --git a/src/components/device-page/switch-port-card.vue b/src/components/device-page/device-card/current-diag-card/switch-port-card.vue
similarity index 99%
rename from src/components/device-page/switch-port-card.vue
rename to src/components/device-page/device-card/current-diag-card/switch-port-card.vue
index 1f0a686..50be2bc 100644
--- a/src/components/device-page/switch-port-card.vue
+++ b/src/components/device-page/device-card/current-diag-card/switch-port-card.vue
@@ -63,16 +63,9 @@ const transformPortSpeed = (portInfo: NdmSwitchPortInfo, type: 'in' | 'out' | 't
  * - 响应式数据处理和布局
  */
 
-// 类型定义导入
 import type { NdmSwitchPortInfo } from '@/apis/domains';
-
-// 常量导入
 import { JAVA_UNSIGNED_INTEGER_MAX_VALUE, NDM_SWITCH_PROBE_INTERVAL } from '@/constants';
-
-// NaiveUI 组件导入
 import { NCard, NGrid, NGridItem, NPopover } from 'naive-ui';
-
-// Vue 3 响应式 API
 import { computed, toRefs } from 'vue';
 
 /**
diff --git a/src/components/device-page/decoder-card.vue b/src/components/device-page/device-card/decoder-card.vue
similarity index 86%
rename from src/components/device-page/decoder-card.vue
rename to src/components/device-page/device-card/decoder-card.vue
index 6f60d97..75efa92 100644
--- a/src/components/device-page/decoder-card.vue
+++ b/src/components/device-page/device-card/decoder-card.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import type { NdmDecoderResultVO } from '@/apis/models';
-import { computed, ref, toRefs } from 'vue';
-import DeviceHeaderCard from './device-header-card.vue';
-import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
-import { destr } from 'destr';
 import type { NdmDecoderDiagInfo } from '@/apis/domains';
-import DeviceHardwareCard from './device-hardware-card.vue';
-import DeviceCommonCard from './device-common-card.vue';
+import type { NdmDecoderResultVO } from '@/apis/models';
+import { destr } from 'destr';
+import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
+import { computed, ref, toRefs } from 'vue';
+
+import DeviceHeaderCard from './current-diag-card/device-header-card.vue';
+import DeviceCommonCard from './current-diag-card/device-common-card.vue';
+import DeviceHardwareCard from './current-diag-card/device-hardware-card.vue';
 
 const props = defineProps<{
   stationCode: string;
@@ -48,7 +49,7 @@ const selectedTab = ref('设备状态');
           <DeviceHardwareCard :cpu-usage="cpuUsage" :mem-usage="memUsage" />
         </NFlex>
       </NTabPane>
-      <NTabPane name="诊断记录" tab="诊断记录"></NTabPane>
+      <NTabPane name="历史诊断" tab="历史诊断"></NTabPane>
       <!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
       <!-- <NTabPane name="原始数据" tab="原始数据">
         <pre>{{ { ...ndmDecoder, lastDiagInfo } }}</pre>
diff --git a/src/components/device-page/keyboard-card.vue b/src/components/device-page/device-card/keyboard-card.vue
similarity index 84%
rename from src/components/device-page/keyboard-card.vue
rename to src/components/device-page/device-card/keyboard-card.vue
index 34fd1c5..2563494 100644
--- a/src/components/device-page/keyboard-card.vue
+++ b/src/components/device-page/device-card/keyboard-card.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import type { NdmKeyboardResultVO } from '@/apis/models';
-import { ref, toRefs } from 'vue';
-import DeviceHeaderCard from './device-header-card.vue';
 import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
+import { ref, toRefs } from 'vue';
+
+import DeviceHeaderCard from './current-diag-card/device-header-card.vue';
 
 const props = defineProps<{
   stationCode: string;
@@ -22,7 +23,7 @@ const selectedTab = ref('设备状态');
           <DeviceHeaderCard :device="ndmKeyboard" />
         </NFlex>
       </NTabPane>
-      <NTabPane name="诊断记录" tab="诊断记录"></NTabPane>
+      <NTabPane name="历史诊断" tab="历史诊断"></NTabPane>
       <!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
     </NTabs>
   </NCard>
diff --git a/src/components/device-page/nvr-card.vue b/src/components/device-page/device-card/nvr-card.vue
similarity index 80%
rename from src/components/device-page/nvr-card.vue
rename to src/components/device-page/device-card/nvr-card.vue
index a0685d2..fbdeb87 100644
--- a/src/components/device-page/nvr-card.vue
+++ b/src/components/device-page/device-card/nvr-card.vue
@@ -1,14 +1,16 @@
 <script setup lang="ts">
-import type { NdmNvrResultVO } from '@/apis/models';
-import { computed, ref, toRefs } from 'vue';
-import DeviceHeaderCard from './device-header-card.vue';
-import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
-import { destr } from 'destr';
 import type { NdmNvrDiagInfo } from '@/apis/domains';
-import DeviceHardwareCard from './device-hardware-card.vue';
-import DeviceCommonCard from './device-common-card.vue';
-import NvrDiskCard from './nvr-disk-card.vue';
-import NvrRecordDiagCard from './nvr-record-diag-card.vue';
+import type { NdmNvrResultVO } from '@/apis/models';
+import { destr } from 'destr';
+import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
+import { computed, ref, toRefs } from 'vue';
+
+import DeviceHeaderCard from './current-diag-card/device-header-card.vue';
+import DeviceCommonCard from './current-diag-card/device-common-card.vue';
+import DeviceHardwareCard from './current-diag-card/device-hardware-card.vue';
+import NvrDiskCard from './current-diag-card/nvr-disk-card.vue';
+import NvrRecordDiagCard from './current-diag-card/nvr-record-diag-card.vue';
+import NvrDiagHistoryCard from './history-diag-card/nvr-diag-history-card.vue';
 
 const props = defineProps<{
   stationCode: string;
@@ -63,7 +65,9 @@ const selectedTab = ref('设备状态');
           <NvrRecordDiagCard v-if="isCluster" :station-code="stationCode" :ndm-nvr="ndmNvr" :key="ndmNvr.id" />
         </NFlex>
       </NTabPane>
-      <NTabPane name="诊断记录" tab="诊断记录"></NTabPane>
+      <NTabPane name="历史诊断" tab="历史诊断">
+        <NvrDiagHistoryCard :station-code="stationCode" :ndm-nvr="ndmNvr" />
+      </NTabPane>
       <!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
       <!-- <NTabPane name="原始数据" tab="原始数据">
         <pre>{{ { ...ndmNvr, lastDiagInfo } }}</pre>
diff --git a/src/components/device-page/security-box-card.vue b/src/components/device-page/device-card/security-box-card.vue
similarity index 71%
rename from src/components/device-page/security-box-card.vue
rename to src/components/device-page/device-card/security-box-card.vue
index 8696955..d611aed 100644
--- a/src/components/device-page/security-box-card.vue
+++ b/src/components/device-page/device-card/security-box-card.vue
@@ -1,14 +1,15 @@
 <script setup lang="ts">
-import type { NdmDecoderResultVO, NdmNvrResultVO, NdmSecurityBoxResultVO } from '@/apis/models';
-import { computed, ref, toRefs } from 'vue';
-import DeviceHeaderCard from './device-header-card.vue';
-import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
+import type { NdmSecurityBoxDiagInfo } from '@/apis/domains';
+import type { NdmSecurityBoxResultVO } from '@/apis/models';
 import { destr } from 'destr';
-import type { NdmDecoderDiagInfo, NdmNvrDiagInfo, NdmSecurityBoxDiagInfo } from '@/apis/domains';
-import DeviceHardwareCard from './device-hardware-card.vue';
-import DeviceCommonCard from './device-common-card.vue';
-import BoxInfoCard from './box-info-card.vue';
-import BoxCircuitCard from './box-circuit-card.vue';
+import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
+import { computed, ref, toRefs } from 'vue';
+
+import DeviceHeaderCard from './current-diag-card/device-header-card.vue';
+import DeviceCommonCard from './current-diag-card/device-common-card.vue';
+import DeviceHardwareCard from './current-diag-card/device-hardware-card.vue';
+import SecurityBoxInfoCard from './current-diag-card/security-box-info-card.vue';
+import SecurityBoxCircuitCard from './current-diag-card/security-box-circuit-card.vue';
 
 const props = defineProps<{
   stationCode: string;
@@ -55,11 +56,11 @@ const selectedTab = ref('设备状态');
           <DeviceHeaderCard :device="ndmSecurityBox" />
           <DeviceCommonCard :common-info="commonInfo" />
           <DeviceHardwareCard :cpu-usage="cpuUsage" :mem-usage="memUsage" />
-          <BoxInfoCard :fan-speeds="fanSpeeds" :temperature="temperature" :humidity="humidity" :switches="switches" />
-          <BoxCircuitCard :station-code="stationCode" :ndm-security-box="ndmSecurityBox" :circuits="circuits" />
+          <SecurityBoxInfoCard :fan-speeds="fanSpeeds" :temperature="temperature" :humidity="humidity" :switches="switches" />
+          <SecurityBoxCircuitCard :station-code="stationCode" :ndm-security-box="ndmSecurityBox" :circuits="circuits" />
         </NFlex>
       </NTabPane>
-      <NTabPane name="诊断记录" tab="诊断记录"></NTabPane>
+      <NTabPane name="诊断历史" tab="诊断历史"></NTabPane>
       <!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
       <!-- <NTabPane name="原始数据" tab="原始数据">
         <pre>{{ { ...ndmSecurityBox, lastDiagInfo } }}</pre>
diff --git a/src/components/device-page/server-card.vue b/src/components/device-page/device-card/server-card.vue
similarity index 88%
rename from src/components/device-page/server-card.vue
rename to src/components/device-page/device-card/server-card.vue
index 4a1b2eb..3980a60 100644
--- a/src/components/device-page/server-card.vue
+++ b/src/components/device-page/device-card/server-card.vue
@@ -4,8 +4,9 @@ import type { NdmServerResultVO } from '@/apis/models';
 import { destr } from 'destr';
 import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
 import { computed, ref, toRefs } from 'vue';
-import DeviceHeaderCard from './device-header-card.vue';
-import DeviceHardwareCard from './device-hardware-card.vue';
+
+import DeviceHeaderCard from './current-diag-card/device-header-card.vue';
+import DeviceHardwareCard from './current-diag-card/device-hardware-card.vue';
 
 const props = defineProps<{
   stationCode: string;
@@ -38,7 +39,7 @@ const selectedTab = ref('设备状态');
           <DeviceHardwareCard :cpu-usage="cpuUsage" :mem-usage="memUsage" :disk-usage="diskUsage" :running-time="runningTime" />
         </NFlex>
       </NTabPane>
-      <NTabPane name="诊断记录" tab="诊断记录"></NTabPane>
+      <NTabPane name="历史诊断" tab="历史诊断"></NTabPane>
       <!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
       <!-- <NTabPane name="原始数据" tab="原始数据">
         <pre>{{ { ...ndmServer, lastDiagInfo } }}</pre>
diff --git a/src/components/device-page/switch-card.vue b/src/components/device-page/device-card/switch-card.vue
similarity index 84%
rename from src/components/device-page/switch-card.vue
rename to src/components/device-page/device-card/switch-card.vue
index c3bb5ab..10ef857 100644
--- a/src/components/device-page/switch-card.vue
+++ b/src/components/device-page/device-card/switch-card.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import type { NdmSwitchResultVO } from '@/apis/models';
-import { computed, ref, toRefs } from 'vue';
-import DeviceHeaderCard from './device-header-card.vue';
-import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
-import { destr } from 'destr';
 import type { NdmSwitchDiagInfo } from '@/apis/domains';
-import DeviceHardwareCard from './device-hardware-card.vue';
-import SwitchPortCard from './switch-port-card.vue';
+import type { NdmSwitchResultVO } from '@/apis/models';
+import { destr } from 'destr';
+import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
+import { computed, ref, toRefs } from 'vue';
+
+import DeviceHeaderCard from './current-diag-card/device-header-card.vue';
+import DeviceHardwareCard from './current-diag-card/device-hardware-card.vue';
+import SwitchPortCard from './current-diag-card/switch-port-card.vue';
 
 const props = defineProps<{
   stationCode: string;
@@ -40,7 +41,7 @@ const selectedTab = ref('设备状态');
           <SwitchPortCard :port-info-list="portInfoList" />
         </NFlex>
       </NTabPane>
-      <NTabPane name="诊断记录" tab="诊断记录"></NTabPane>
+      <NTabPane name="历史诊断" tab="历史诊断"></NTabPane>
       <!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
       <!-- <NTabPane name="原始数据" tab="原始数据">
         <pre>{{ { ...ndmSwitch, lastDiagInfo } }}</pre>