From 630ad21b4b58394b10886d184d3432827e7900c7 Mon Sep 17 00:00:00 2001
From: yangsy <ysy@ittc.sh.cn>
Date: Thu, 11 Sep 2025 12:07:53 +0800
Subject: [PATCH] feat: station card layout of DashboardPage is adjustable

---
 src/components/global/settings-drawer.vue | 11 ++++++++++-
 src/pages/dashboard-page.vue              |  5 ++++-
 src/stores/layout.ts                      | 16 ++++++++++++++++
 3 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 src/stores/layout.ts

diff --git a/src/components/global/settings-drawer.vue b/src/components/global/settings-drawer.vue
index 813c1d9..35c9cf4 100644
--- a/src/components/global/settings-drawer.vue
+++ b/src/components/global/settings-drawer.vue
@@ -1,8 +1,13 @@
 <script setup lang="ts">
-import { NDivider, NDrawer, NDrawerContent, NFlex } from 'naive-ui';
+import { NDivider, NDrawer, NDrawerContent, NFlex, NFormItem, NInputNumber } from 'naive-ui';
 import ThemeSwitch from './theme-switch.vue';
+import { useLayoutStore } from '@/stores/layout';
+import { storeToRefs } from 'pinia';
 
 const show = defineModel<boolean>('show');
+
+const layoutStore = useLayoutStore();
+const { stationLayoutGridCols } = storeToRefs(layoutStore);
 </script>
 
 <template>
@@ -11,6 +16,10 @@ const show = defineModel<boolean>('show');
       <NFlex vertical justify="center">
         <NDivider>主题</NDivider>
         <ThemeSwitch />
+        <NDivider>布局</NDivider>
+        <NFormItem label="车站列数" label-placement="left">
+          <NInputNumber v-model:value="stationLayoutGridCols" :min="1" :max="10" />
+        </NFormItem>
       </NFlex>
     </NDrawerContent>
   </NDrawer>
diff --git a/src/pages/dashboard-page.vue b/src/pages/dashboard-page.vue
index 1fb8ef5..b68a655 100644
--- a/src/pages/dashboard-page.vue
+++ b/src/pages/dashboard-page.vue
@@ -11,6 +11,7 @@ import { NGrid, NGi } from 'naive-ui';
 import { storeToRefs } from 'pinia';
 import { ref, watch } from 'vue';
 import { useLineAlarmCountsStore } from '@/stores/line-alarm-counts';
+import { useLayoutStore } from '@/stores/layout';
 
 const stationStore = useStationStore();
 const { stationList } = storeToRefs(stationStore);
@@ -21,6 +22,8 @@ const { lineAlarmCounts } = storeToRefs(lineAlarmCountsStore);
 
 const { isFetching: lineDevicesFetching } = useLineDevicesQuery();
 const { isFetching: lineAlarmCountsFetching } = useLineAlarmCountsQuery();
+const layoutStore = useLayoutStore();
+const { stationLayoutGridCols } = storeToRefs(layoutStore);
 
 // 当设备查询或告警查询正在进行时，显示加载条
 watch(
@@ -56,7 +59,7 @@ const openDeviceParamsConfigModal = (station: Station) => {
 </script>
 
 <template>
-  <NGrid :cols="8" :x-gap="6" :y-gap="6" style="padding: 8px">
+  <NGrid :cols="stationLayoutGridCols" :x-gap="6" :y-gap="6" style="padding: 8px">
     <NGi v-for="station in stationList" :key="station.code">
       <StationCard
         :station="station"
diff --git a/src/stores/layout.ts b/src/stores/layout.ts
new file mode 100644
index 0000000..9de67a1
--- /dev/null
+++ b/src/stores/layout.ts
@@ -0,0 +1,16 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+export const useLayoutStore = defineStore(
+  'ndm-layout-store',
+  () => {
+    const stationLayoutGridCols = ref(8);
+
+    return {
+      stationLayoutGridCols,
+    };
+  },
+  {
+    persist: true,
+  },
+);