chore

src/pages/dashboard-page.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import StationCard from '@/components/station-card.vue';
+import { NGrid, NGi } from 'naive-ui';
+import { useQuery } from '@tanstack/vue-query';
+
+// 模拟数据
+const stations = ref(
+  Array.from({ length: 32 }).map((_, i) => ({
+    name: `车站 ${i + 1}`,
+    online: Math.random() > 0.5,
+    offlineDeviceCount: Math.floor(Math.random() * 20),
+    alarmCount: Math.floor(Math.random() * 10),
+  })),
+);
+
+// const query = useQuery({
+//   queryKey: ['line-devices'],
+//   queryFn: async () => {},
+// });
+</script>
+
+<template>
+  <NGrid :cols="8" :x-gap="12" :y-gap="12">
+    <NGi v-for="station in stations" :key="station.name">
+      <StationCard :name="station.name" :online="station.online" :offline-device-count="station.offlineDeviceCount" :alarm-count="station.alarmCount" />
+    </NGi>
+  </NGrid>
+</template>
+
+<style scoped></style>