refactor: move modals from StationCard to DashboardPage

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

@@ -0,0 +1,50 @@
+<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';
+
+const props = defineProps<{
+  stationCode: string;
+  ndmSwitch: NdmSwitchResultVO;
+}>();
+
+const { stationCode, ndmSwitch } = toRefs(props);
+
+const lastDiagInfo = computed(() => {
+  const result = destr<NdmSwitchDiagInfo>(ndmSwitch.value.lastDiagInfo);
+  if (!result) return null;
+  if (typeof result !== 'object') return null;
+  return result;
+});
+
+const cpuUsage = computed(() => lastDiagInfo.value?.cpuRatio);
+const memUsage = computed(() => lastDiagInfo.value?.memoryRatio);
+
+const portInfoList = computed(() => lastDiagInfo.value?.info.portInfoList ?? []);
+
+const selectedTab = ref('设备状态');
+</script>
+
+<template>
+  <NCard size="small">
+    <NTabs v-model:value="selectedTab" size="small">
+      <NTabPane name="设备状态">
+        <NFlex vertical>
+          <DeviceHeaderCard :device="ndmSwitch" />
+          <DeviceHardwareCard :cpu-usage="cpuUsage" :mem-usage="memUsage" />
+          <SwitchPortCard :port-info-list="portInfoList" />
+          <pre style="width: 500px; height: 400px; overflow: auto">{{ lastDiagInfo }}</pre>
+        </NFlex>
+      </NTabPane>
+      <NTabPane name="诊断记录" tab="诊断记录"></NTabPane>
+      <NTabPane name="设备配置" tab="设备配置"></NTabPane>
+    </NTabs>
+  </NCard>
+</template>
+
+<style scoped lang="scss"></style>