refactor: 重构项目结构

- 优化 `车站-设备-告警`  轮询机制
- 改进设备卡片的布局
- 支持修改设备
- 告警轮询中获取完整告警数据
- 车站告警详情支持导出完整的 `今日告警列表`
- 支持将状态持久化到 `IndexedDB`
- 新增轮询控制 (调试模式)
- 新增离线开发模式 (调试模式)
- 新增 `IndexedDB` 数据控制 (调试模式)

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

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import type { NdmKeyboardResultVO, Station } from '@/apis';
+import { DeviceRawCard, KeyboardCurrentDiag, KeyboardHistoryDiag, KeyboardUpdate } from '@/components';
+import { useSettingStore } from '@/stores';
+import { NCard, NPageHeader, NScrollbar, NTab, NTabs } from 'naive-ui';
+import { storeToRefs } from 'pinia';
+import { ref, toRefs, computed, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+const props = defineProps<{
+  ndmDevice: NdmKeyboardResultVO;
+  station: Station;
+}>();
+
+const route = useRoute();
+const router = useRouter();
+
+const settingStore = useSettingStore();
+const { debugModeEnabled } = storeToRefs(settingStore);
+
+const { ndmDevice, station } = toRefs(props);
+
+const showPageHeader = computed(() => {
+  return !!route.query['from'];
+});
+const onBack = () => {
+  router.push({ path: `${route.query['from']}` });
+};
+
+const activeTabName = ref('当前诊断');
+const onTabChange = (name: string) => {
+  activeTabName.value = name;
+};
+watch([ndmDevice, debugModeEnabled], ([newDevice, enabled], [oldDevice]) => {
+  if (newDevice.id !== oldDevice.id || !enabled) {
+    activeTabName.value = '当前诊断';
+  }
+});
+</script>
+
+<template>
+  <NCard hoverable style="height: 100%" :header-style="{ padding: '12px' }" :content-style="{ height: '100%', padding: '0', overflow: 'hidden' }">
+    <template #header>
+      <NPageHeader v-if="showPageHeader" @back="onBack" />
+      <NTabs :value="activeTabName" @update:value="onTabChange">
+        <NTab name="当前诊断">当前诊断</NTab>
+        <NTab name="历史诊断">历史诊断</NTab>
+        <NTab name="修改设备">修改设备</NTab>
+        <NTab v-if="debugModeEnabled" name="原始数据">原始数据</NTab>
+      </NTabs>
+    </template>
+    <template #default>
+      <NScrollbar x-scrollable :content-style="{ padding: '0 12px 12px 12px' }">
+        <template v-if="activeTabName === '当前诊断'">
+          <KeyboardCurrentDiag :ndm-device="ndmDevice" :station="station" />
+        </template>
+        <template v-if="activeTabName === '历史诊断'">
+          <KeyboardHistoryDiag :ndm-device="ndmDevice" :station="station" />
+        </template>
+        <template v-if="activeTabName === '修改设备'">
+          <KeyboardUpdate :ndm-device="ndmDevice" :station="station" />
+        </template>
+        <template v-if="activeTabName === '原始数据'">
+          <DeviceRawCard :ndm-device="ndmDevice" />
+        </template>
+      </NScrollbar>
+    </template>
+  </NCard>
+</template>
+
+<style scoped lang="scss"></style>