refactor: reorganize device card components

src/components/device-page/device-card/keyboard-card.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { NdmKeyboardResultVO } from '@/apis/models';
+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;
+  ndmKeyboard: NdmKeyboardResultVO;
+}>();
+
+const { stationCode, ndmKeyboard } = toRefs(props);
+
+const selectedTab = ref('设备状态');
+</script>
+
+<template>
+  <NCard size="small">
+    <NTabs v-model:value="selectedTab" size="small">
+      <NTabPane name="设备状态" tab="设备状态">
+        <NFlex vertical>
+          <DeviceHeaderCard :device="ndmKeyboard" />
+        </NFlex>
+      </NTabPane>
+      <NTabPane name="历史诊断" tab="历史诊断"></NTabPane>
+      <!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
+    </NTabs>
+  </NCard>
+</template>
+
+<style scoped lang="scss"></style>