feat: station card layout of DashboardPage is adjustable

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"