From 2b7b4e7bd94f931abfe1d15330716528b1bfa5fd Mon Sep 17 00:00:00 2001
From: yangsy <ysy@ittc.sh.cn>
Date: Sun, 17 May 2026 22:47:30 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84=E8=AE=BE?=
 =?UTF-8?q?=E5=A4=87=E9=80=9A=E7=94=A8=E5=8D=A1=E7=89=87=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=EF=BC=8C=E8=B0=83=E6=95=B4props=E6=A0=BC=E5=BC=8F=E5=B9=B6?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 导出DeviceCommonCardProps类型以提供类型支持
- 将commonInfo属性从键值对对象调整为分组数组格式
- 使用NFlex和NText优化卡片内部的布局展示
---
 .../current-diag/device-common-card.vue       | 33 +++++++++++++------
 .../components/current-diag/index.ts          |  3 ++
 2 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/components/device/device-card/components/current-diag/device-common-card.vue b/src/components/device/device-card/components/current-diag/device-common-card.vue
index b30f196..2c3d189 100644
--- a/src/components/device/device-card/components/current-diag/device-common-card.vue
+++ b/src/components/device/device-card/components/current-diag/device-common-card.vue
@@ -1,16 +1,20 @@
 <script setup lang="ts">
-import { NCard, NDescriptions, NDescriptionsItem } from 'naive-ui';
+import { NCard, NDescriptions, NDescriptionsItem, NFlex, NText } from 'naive-ui';
 import { computed, toRefs } from 'vue';
 
 const props = defineProps<{
-  commonInfo?: Record<string, string>;
+  commonInfo?: Array<{
+    title: string;
+    items: Array<{
+      label: string;
+      value: string;
+    }>;
+  }>;
 }>();
 
 const { commonInfo } = toRefs(props);
 
-const showCard = computed(() => !!commonInfo.value);
-
-const commonInfoEntries = computed(() => Object.entries(commonInfo.value ?? {}));
+const showCard = computed(() => (commonInfo.value?.length ?? 0) > 0);
 </script>
 
 <template>
@@ -18,11 +22,20 @@ const commonInfoEntries = computed(() => Object.entries(commonInfo.value ?? {}))
     <template #header>
       <div>设备信息</div>
     </template>
-    <NDescriptions bordered label-placement="left" :columns="2">
-      <template v-for="item in commonInfoEntries" :key="item[0]">
-        <NDescriptionsItem :label="item[0]">{{ item[1] }}</NDescriptionsItem>
-      </template>
-    </NDescriptions>
+    <template v-if="!!commonInfo && commonInfo.length > 0">
+      <NFlex vertical :size="16">
+        <template v-for="({ title, items }, index) in commonInfo" :key="`${title}-${index}`">
+          <NFlex vertical>
+            <NText strong :depth="3">{{ title }}</NText>
+            <NDescriptions bordered :label-placement="'left'" :columns="2">
+              <template v-for="({ label, value }, index) in items" :key="`${label}-${index}`">
+                <NDescriptionsItem :label="label">{{ value }}</NDescriptionsItem>
+              </template>
+            </NDescriptions>
+          </NFlex>
+        </template>
+      </NFlex>
+    </template>
   </NCard>
 </template>
 
diff --git a/src/components/device/device-card/components/current-diag/index.ts b/src/components/device/device-card/components/current-diag/index.ts
index 265d85c..f6b2f90 100644
--- a/src/components/device/device-card/components/current-diag/index.ts
+++ b/src/components/device/device-card/components/current-diag/index.ts
@@ -1,3 +1,4 @@
+import type { ComponentInstance } from 'vue';
 import DeviceCommonCard from './device-common-card.vue';
 import DeviceHardwareCard from './device-hardware-card.vue';
 import DeviceHeaderCard from './device-header-card.vue';
@@ -9,6 +10,8 @@ import SecurityBoxEnvCard from './security-box-env-card.vue';
 import SwitchPortCard from './switch-port-card.vue';
 import SwitchPortLinkModal from './switch-port-link-modal.vue';
 
+export type DeviceCommonCardProps = ComponentInstance<typeof DeviceCommonCard>['$props'];
+
 export {
   DeviceCommonCard,
   DeviceHardwareCard,