feat: station card layout of DashboardPage is adjustable

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>

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"

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,
+  },
+);