refactor: 重构设备通用卡片组件，调整props格式并优化布局

- 导出DeviceCommonCardProps类型以提供类型支持
- 将commonInfo属性从键值对对象调整为分组数组格式
- 使用NFlex和NText优化卡片内部的布局展示

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 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>
 

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,