refactor(device-common-card): optimize UI with NDescriptions

src/components/device-page/device-card/current-diag-card/device-common-card.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { NCard } from 'naive-ui';
+import { NCard, NDescriptions, NDescriptionsItem } from 'naive-ui';
 import { computed, toRefs } from 'vue';
 
 const props = defineProps<{
@@ -16,10 +16,11 @@ const commonInfoEntries = computed(() => Object.entries(commonInfo.value ?? {}))
     <template #header>
       <div>设备信息</div>
     </template>
-    <div v-for="item in commonInfoEntries" :key="item[0]">
-      <span>{{ item[0] }}：</span>
-      <span>{{ item[1] }}</span>
-    </div>
+    <NDescriptions bordered label-placement="left">
+      <template v-for="item in commonInfoEntries" :key="item[0]">
+        <NDescriptionsItem :label="item[0]">{{ item[1] }}</NDescriptionsItem>
+      </template>
+    </NDescriptions>
   </NCard>
 </template>