feat: 车站卡片布局列数自适应

refactor: 移除polling-store，重构setting-store
2026-01-21 15:23:08 +08:00 · 2026-01-20 11:22:24 +08:00
29 changed files with 229 additions and 200 deletions
--- a/.env
+++ b/.env
@@ -19,7 +19,7 @@ VITE_LAMP_PASSWORD = fjoc(1KHP(Ls&Bje)C
 VITE_LAMP_AUTHORIZATION = Y3VlZGVzX2FkbWluOmN1ZWRlc19hZG1pbl9zZWNyZXQ=

 # 当需要重置localStorage时, 修改此变量
-VITE_STORAGE_VERSION = 4
+VITE_STORAGE_VERSION = 5

 # 调试码
 VITE_DEBUG_CODE = ndm_debug
--- a/README.md
+++ b/README.md
@@ -39,19 +39,3 @@ pnpm build
 ```

 在执行 `pnpm build` 之前，你可以在 `package.json` 中修改 `version` 字段，将其设置为你期望的版本号，构建完成后，项目的根目录中除了 `dist` 目录外，还会生成三个压缩包，文件名的格式统一为 `ndm-web-platform_v<version>_<datetime>`，文件格式则分别为 `zip`、`tar`、`tar.gz`。
-
-## 调试模式
-
-在调试模式中，用户可以查看设备的原始诊断数据，也可以对轮询器进行控制，或者启用离线开发模式，系统不会自动调用一些主动触发的请求。
-
-### 开启调试模式
-
-在非登录页的任意页面中，使用键盘组合键 `Ctrl+Alt+D`，系统会弹出一个输入框，输入环境变量 `.env` 中的 `VITE_DEBUG_CODE` 对应的值即可开启调试模式，如需关闭调试模式，再次使用上述组合键并点击 `确认` 按钮即可。
-
-注意调试模式与其内部的功能之间没有联动关系，例如在开启调试模式后可以关闭轮询或者启用离线开发模式，但是在关闭调试模式后，轮询不会重新被开启，离线开发模式也不会被关闭，因此在关闭离线开发模式前，请务必确保系统处于正确的运行状态下。
-
-### 关于离线开发模式
-
-由于离线开发模式涉及到登录操作，因此项目中将离线开发模式暴露到了全局变量 `window.$offlineDev` 中，允许在登录页中直接开启离线开发模式。
-
-如果你第一次启动这个项目，系统在正常情况下会先跳转至登录页，此时如果希望开启离线模式，可以直接打开浏览器的开发者工具，在控制台输入 `window.$offlineDev.value = true` 即可，系统会直接跳转到首页。
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,10 +7,10 @@ import { dateZhCN, NConfigProvider, NDialogProvider, NLoadingBarProvider, NMessa
 import { storeToRefs } from 'pinia';

 const settingStore = useSettingStore();
-const { themeMode, offlineDev } = storeToRefs(settingStore);
+const { themeMode, mockUser } = storeToRefs(settingStore);

 // 允许通过控制台启用离线开发模式 (登录页适用)
-window.$offlineDev = offlineDev;
+window.$mockUser = mockUser;

 useVersionCheckQuery();
 </script>
--- a/src/components/device/device-card/components/current-diag/security-box-circuit-card.vue
+++ b/src/components/device/device-card/components/current-diag/security-box-circuit-card.vue
@@ -38,7 +38,7 @@ const deviceStore = useDeviceStore();
 const { lineDevices } = storeToRefs(deviceStore);

 const settingStore = useSettingStore();
-const { offlineDev } = storeToRefs(settingStore);
+const { useLocalDB } = storeToRefs(settingStore);

 const { ndmDevice, station, circuits } = toRefs(props);

@@ -258,8 +258,8 @@ const { mutate: unlinkDevice } = useMutation({
    delete modifiedUpperLinkDescription.downstream?.[circuitIndex];
    modifiedUpperDevice.linkDescription = JSON.stringify(modifiedUpperLinkDescription);

-    // 3. 发起update请求并获取最新的设备详情（离线模式下直接修改本地数据）
-    if (offlineDev.value) {
+    // 3. 发起update请求并获取最新的设备详情（使用本地数据库时直接修改本地数据）
+    if (useLocalDB.value) {
      return { upperDevice: modifiedUpperDevice, lowerDevice: modifiedLowerDevice };
    }
    const stationCode = station.value.code;
--- a/src/components/device/device-card/components/current-diag/security-box-circuit-link-modal.vue
+++ b/src/components/device/device-card/components/current-diag/security-box-circuit-link-modal.vue
@@ -23,7 +23,7 @@ const show = defineModel<boolean>('show', { default: false });
 const deviceStore = useDeviceStore();

 const settingStore = useSettingStore();
-const { offlineDev } = storeToRefs(settingStore);
+const { useLocalDB } = storeToRefs(settingStore);

 const { ndmDevice, station, circuitIndex } = toRefs(props);

@@ -150,8 +150,8 @@ const { mutate: linkPortToDevice, isPending: linking } = useMutation({
    }
    modifiedLowerDevice.linkDescription = JSON.stringify(modifiedLowerDeviceLinkDescription);

-    // 3. 发起update请求并获取最新的设备详情（离线模式下直接修改本地数据）
-    if (offlineDev.value) {
+    // 3. 发起update请求并获取最新的设备详情（使用本地数据库时直接修改本地数据）
+    if (useLocalDB.value) {
      return { upperDevice: modifiedUpperDevice, lowerDevice: modifiedLowerDevice };
    }
    const stationCode = station.value.code;
--- a/src/components/device/device-card/components/current-diag/switch-port-card.vue
+++ b/src/components/device/device-card/components/current-diag/switch-port-card.vue
@@ -25,7 +25,7 @@ const deviceStore = useDeviceStore();
 const { lineDevices } = storeToRefs(deviceStore);

 const settingStore = useSettingStore();
-const { offlineDev } = storeToRefs(settingStore);
+const { useLocalDB } = storeToRefs(settingStore);

 const { ndmDevice, station, ports } = toRefs(props);

@@ -208,8 +208,8 @@ const { mutate: unlinkDevice } = useMutation({
    delete modifiedUpperLinkDescription.downstream?.[port.portName];
    modifiedUpperDevice.linkDescription = JSON.stringify(modifiedUpperLinkDescription);

-    // 3. 发起update请求并获取最新的设备详情（离线模式下直接修改本地数据）
-    if (offlineDev.value) {
+    // 3. 发起update请求并获取最新的设备详情（使用本地数据库时直接修改本地数据）
+    if (useLocalDB.value) {
      return { upperDevice: modifiedUpperDevice, lowerDevice: modifiedLowerDevice };
    }
    const stationCode = station.value.code;
--- a/src/components/device/device-card/components/current-diag/switch-port-link-modal.vue
+++ b/src/components/device/device-card/components/current-diag/switch-port-link-modal.vue
@@ -32,7 +32,7 @@ const show = defineModel<boolean>('show', { default: false });
 const deviceStore = useDeviceStore();

 const settingStore = useSettingStore();
-const { offlineDev } = storeToRefs(settingStore);
+const { useLocalDB } = storeToRefs(settingStore);

 const { ndmDevice, station, port } = toRefs(props);

@@ -160,8 +160,8 @@ const { mutate: linkPortToDevice, isPending: linking } = useMutation({
    }
    modifiedLowerDevice.linkDescription = JSON.stringify(modifiedLowerDeviceLinkDescription);

-    // 3. 发起update请求并获取最新的设备详情（离线模式下直接修改本地数据）
-    if (offlineDev.value) {
+    // 3. 发起update请求并获取最新的设备详情（使用本地数据库时直接修改本地数据）
+    if (useLocalDB.value) {
      return { upperDevice: modifiedUpperDevice, lowerDevice: modifiedLowerDevice };
    }
    const stationCode = station.value.code;
--- a/src/components/device/device-card/ndm-alarm-host/alarm-host-card.vue
+++ b/src/components/device/device-card/ndm-alarm-host/alarm-host-card.vue
@@ -16,7 +16,7 @@ const route = useRoute();
 const router = useRouter();

 const settingStore = useSettingStore();
-const { debugModeEnabled } = storeToRefs(settingStore);
+const { showDeviceRawData } = storeToRefs(settingStore);

 const { ndmDevice, station } = toRefs(props);

@@ -31,7 +31,7 @@ const activeTabName = ref('当前诊断');
 const onTabChange = (name: string) => {
  activeTabName.value = name;
 };
-watch([ndmDevice, debugModeEnabled], ([newDevice, enabled], [oldDevice]) => {
+watch([ndmDevice, showDeviceRawData], ([newDevice, enabled], [oldDevice]) => {
  if (newDevice.id !== oldDevice.id || !enabled) {
    activeTabName.value = '当前诊断';
  }
@@ -46,7 +46,7 @@ watch([ndmDevice, debugModeEnabled], ([newDevice, enabled], [oldDevice]) => {
        <NTab name="当前诊断">当前诊断</NTab>
        <NTab name="历史诊断">历史诊断</NTab>
        <NTab name="修改设备">修改设备</NTab>
-        <NTab v-if="debugModeEnabled" name="原始数据">原始数据</NTab>
+        <NTab v-if="showDeviceRawData" name="原始数据">原始数据</NTab>
      </NTabs>
    </template>
    <template #default>
--- a/src/components/device/device-card/ndm-camera/camera-card.vue
+++ b/src/components/device/device-card/ndm-camera/camera-card.vue
@@ -16,7 +16,7 @@ const route = useRoute();
 const router = useRouter();

 const settingStore = useSettingStore();
-const { debugModeEnabled } = storeToRefs(settingStore);
+const { showDeviceRawData } = storeToRefs(settingStore);

 const { ndmDevice, station } = toRefs(props);

@@ -31,7 +31,7 @@ const activeTabName = ref('当前诊断');
 const onTabChange = (name: string) => {
  activeTabName.value = name;
 };
-watch([ndmDevice, debugModeEnabled], ([newDevice, enabled], [oldDevice]) => {
+watch([ndmDevice, showDeviceRawData], ([newDevice, enabled], [oldDevice]) => {
  if (newDevice.id !== oldDevice.id || !enabled) {
    activeTabName.value = '当前诊断';
  }
@@ -46,7 +46,7 @@ watch([ndmDevice, debugModeEnabled], ([newDevice, enabled], [oldDevice]) => {
        <NTab name="当前诊断">当前诊断</NTab>
        <NTab name="历史诊断">历史诊断</NTab>
        <NTab name="修改设备">修改设备</NTab>
-        <NTab v-if="debugModeEnabled" name="原始数据">原始数据</NTab>
+        <NTab v-if="showDeviceRawData" name="原始数据">原始数据</NTab>
      </NTabs>
    </template>
    <template #default>
--- a/src/components/device/device-card/ndm-camera/camera-current-diag.vue
+++ b/src/components/device/device-card/ndm-camera/camera-current-diag.vue
@@ -31,7 +31,7 @@ const props = defineProps<{
 }>();

 const settingStore = useSettingStore();
-const { offlineDev } = storeToRefs(settingStore);
+const { activeRequests } = storeToRefs(settingStore);

 const queryClient = useQueryClient();

@@ -49,7 +49,7 @@ const QUERY_KEY = 'camera-installation-area-query';

 const { data: installationArea } = useQuery({
  queryKey: computed(() => [QUERY_KEY, ndmDevice.value.gbCode, station.value.code]),
-  enabled: computed(() => !offlineDev.value),
+  enabled: computed(() => activeRequests.value),
  gcTime: 0,
  queryFn: async ({ signal }) => {
    const UNKNOWN_NAME = '-';
@@ -107,8 +107,8 @@ const { data: installationArea } = useQuery({
    return `${tier1Area.name}-${tier2Area.name}`;
  },
 });
-watch(offlineDev, (offline) => {
-  if (offline) {
+watch(activeRequests, (active) => {
+  if (!active) {
    queryClient.cancelQueries({ queryKey: [QUERY_KEY] });
  }
 });
--- a/src/components/device/device-card/ndm-decoder/decoder-card.vue
+++ b/src/components/device/device-card/ndm-decoder/decoder-card.vue
@@ -16,7 +16,7 @@ const route = useRoute();
 const router = useRouter();

 const settingStore = useSettingStore();
-const { debugModeEnabled } = storeToRefs(settingStore);
+const { showDeviceRawData } = storeToRefs(settingStore);

 const { ndmDevice, station } = toRefs(props);

@@ -31,7 +31,7 @@ const activeTabName = ref('当前诊断');
 const onTabChange = (name: string) => {
  activeTabName.value = name;
 };
-watch([ndmDevice, debugModeEnabled], ([newDevice, enabled], [oldDevice]) => {
+watch([ndmDevice, showDeviceRawData], ([newDevice, enabled], [oldDevice]) => {
  if (newDevice.id !== oldDevice.id || !enabled) {
    activeTabName.value = '当前诊断';
  }
@@ -46,7 +46,7 @@ watch([ndmDevice, debugModeEnabled], ([newDevice, enabled], [oldDevice]) => {
        <NTab name="当前诊断">当前诊断</NTab>
        <NTab name="历史诊断">历史诊断</NTab>
        <NTab name="修改设备">修改设备</NTab>
-        <NTab v-if="debugModeEnabled" name="原始数据">原始数据</NTab>
+        <NTab v-if="showDeviceRawData" name="原始数据">原始数据</NTab>
      </NTabs>
    </template>
    <template #default>
--- a/src/components/device/device-card/ndm-keyboard/keyboard-card.vue
+++ b/src/components/device/device-card/ndm-keyboard/keyboard-card.vue
@@ -16,7 +16,7 @@ const route = useRoute();
 const router = useRouter();

 const settingStore = useSettingStore();
-const { debugModeEnabled } = storeToRefs(settingStore);
+const { showDeviceRawData } = storeToRefs(settingStore);

 const { ndmDevice, station } = toRefs(props);

@@ -31,7 +31,7 @@ const activeTabName = ref('当前诊断');
 const onTabChange = (name: string) => {
  activeTabName.value = name;
 };
-watch([ndmDevice, debugModeEnabled], ([newDevice, enabled], [oldDevice]) => {
+watch([ndmDevice, showDeviceRawData], ([newDevice, enabled], [oldDevice]) => {
  if (newDevice.id !== oldDevice.id || !enabled) {
    activeTabName.value = '当前诊断';
  }
@@ -46,7 +46,7 @@ watch([ndmDevice, debugModeEnabled], ([newDevice, enabled], [oldDevice]) => {
        <NTab name="当前诊断">当前诊断</NTab>
        <NTab name="历史诊断">历史诊断</NTab>
        <NTab name="修改设备">修改设备</NTab>
-        <NTab v-if="debugModeEnabled" name="原始数据">原始数据</NTab>
+        <NTab v-if="showDeviceRawData" name="原始数据">原始数据</NTab>
      </NTabs>
    </template>
    <template #default>
--- a/src/components/device/device-card/ndm-nvr/nvr-card.vue
+++ b/src/components/device/device-card/ndm-nvr/nvr-card.vue
@@ -16,7 +16,7 @@ const route = useRoute();
 const router = useRouter();

 const settingStore = useSettingStore();
-const { debugModeEnabled } = storeToRefs(settingStore);
+const { showDeviceRawData } = storeToRefs(settingStore);

 const { ndmDevice, station } = toRefs(props);

@@ -31,7 +31,7 @@ const activeTabName = ref('当前诊断');
 const onTabChange = (name: string) => {
  activeTabName.value = name;
 };
-watch([ndmDevice, debugModeEnabled], ([newDevice, enabled], [oldDevice]) => {
+watch([ndmDevice, showDeviceRawData], ([newDevice, enabled], [oldDevice]) => {
  if (newDevice.id !== oldDevice.id || !enabled) {
    activeTabName.value = '当前诊断';
  }
@@ -46,7 +46,7 @@ watch([ndmDevice, debugModeEnabled], ([newDevice, enabled], [oldDevice]) => {
        <NTab name="当前诊断">当前诊断</NTab>
        <NTab name="历史诊断">历史诊断</NTab>
        <NTab name="修改设备">修改设备</NTab>
-        <NTab v-if="debugModeEnabled" name="原始数据">原始数据</NTab>
+        <NTab v-if="showDeviceRawData" name="原始数据">原始数据</NTab>
      </NTabs>
    </template>
    <template #default>
--- a/src/components/device/device-card/ndm-security-box/security-box-card.vue
+++ b/src/components/device/device-card/ndm-security-box/security-box-card.vue
@@ -16,7 +16,7 @@ const route = useRoute();
 const router = useRouter();

 const settingStore = useSettingStore();
-const { debugModeEnabled } = storeToRefs(settingStore);
+const { showDeviceRawData } = storeToRefs(settingStore);

 const { ndmDevice, station } = toRefs(props);

@@ -31,7 +31,7 @@ const activeTabName = ref('当前诊断');
 const onTabChange = (name: string) => {
  activeTabName.value = name;
 };
-watch([ndmDevice, debugModeEnabled], ([newDevice, enabled], [oldDevice]) => {
+watch([ndmDevice, showDeviceRawData], ([newDevice, enabled], [oldDevice]) => {
  if (newDevice.id !== oldDevice.id || !enabled) {
    activeTabName.value = '当前诊断';
  }
@@ -46,7 +46,7 @@ watch([ndmDevice, debugModeEnabled], ([newDevice, enabled], [oldDevice]) => {
        <NTab name="当前诊断">当前诊断</NTab>
        <NTab name="历史诊断">历史诊断</NTab>
        <NTab name="修改设备">修改设备</NTab>
-        <NTab v-if="debugModeEnabled" name="原始数据">原始数据</NTab>
+        <NTab v-if="showDeviceRawData" name="原始数据">原始数据</NTab>
      </NTabs>
    </template>
    <template #default>
--- a/src/components/device/device-card/ndm-server/server-alive.vue
+++ b/src/components/device/device-card/ndm-server/server-alive.vue
@@ -13,7 +13,7 @@ const props = defineProps<{
 }>();

 const settingStore = useSettingStore();
-const { offlineDev } = storeToRefs(settingStore);
+const { activeRequests } = storeToRefs(settingStore);

 const queryClient = useQueryClient();

@@ -25,7 +25,7 @@ const MEDIA_SERVER_ALIVE_QUERY_KEY = 'media-server-alive-query';
 const VIDEO_SERVER_ALIVE_QUERY_KEY = 'video-server-alive-query';
 const { data: isMediaServerAlive } = useQuery({
  queryKey: computed(() => [MEDIA_SERVER_ALIVE_QUERY_KEY, ndmDevice.value.id, ndmDevice.value.lastDiagTime]),
-  enabled: computed(() => !offlineDev.value && deviceType.value === DEVICE_TYPE_LITERALS.ndmMediaServer),
+  enabled: computed(() => activeRequests.value && deviceType.value === DEVICE_TYPE_LITERALS.ndmMediaServer),
  refetchInterval: 30 * 1000,
  gcTime: 0,
  queryFn: async ({ signal }) => {
@@ -35,15 +35,15 @@ const { data: isMediaServerAlive } = useQuery({
 });
 const { data: isSipServerAlive } = useQuery({
  queryKey: computed(() => [VIDEO_SERVER_ALIVE_QUERY_KEY, ndmDevice.value.id, ndmDevice.value.lastDiagTime]),
-  enabled: computed(() => !offlineDev.value && deviceType.value === DEVICE_TYPE_LITERALS.ndmVideoServer),
+  enabled: computed(() => activeRequests.value && deviceType.value === DEVICE_TYPE_LITERALS.ndmVideoServer),
  refetchInterval: 30 * 1000,
  gcTime: 0,
  queryFn: async ({ signal }) => {
    return await isSipServerAliveApi({ stationCode: station.value.code, signal });
  },
 });
-watch(offlineDev, (offline) => {
-  if (offline) {
+watch(activeRequests, (active) => {
+  if (!active) {
    queryClient.cancelQueries({ queryKey: [MEDIA_SERVER_ALIVE_QUERY_KEY] });
    queryClient.cancelQueries({ queryKey: [VIDEO_SERVER_ALIVE_QUERY_KEY] });
  }
@@ -56,7 +56,7 @@ watch(offlineDev, (offline) => {
      <span>服务状态</span>
    </template>
    <template #default>
-      <template v-if="offlineDev">
+      <template v-if="activeRequests">
        <span>-</span>
      </template>
      <template v-else>
--- a/src/components/device/device-card/ndm-server/server-card.vue
+++ b/src/components/device/device-card/ndm-server/server-card.vue
@@ -16,7 +16,7 @@ const route = useRoute();
 const router = useRouter();

 const settingStore = useSettingStore();
-const { debugModeEnabled } = storeToRefs(settingStore);
+const { showDeviceRawData } = storeToRefs(settingStore);

 const { ndmDevice, station } = toRefs(props);

@@ -31,7 +31,7 @@ const activeTabName = ref('当前诊断');
 const onTabChange = (name: string) => {
  activeTabName.value = name;
 };
-watch([ndmDevice, debugModeEnabled], ([newDevice, enabled], [oldDevice]) => {
+watch([ndmDevice, showDeviceRawData], ([newDevice, enabled], [oldDevice]) => {
  if (newDevice.id !== oldDevice.id || !enabled) {
    activeTabName.value = '当前诊断';
  }
@@ -46,7 +46,7 @@ watch([ndmDevice, debugModeEnabled], ([newDevice, enabled], [oldDevice]) => {
        <NTab name="当前诊断">当前诊断</NTab>
        <NTab name="历史诊断">历史诊断</NTab>
        <NTab name="修改设备">修改设备</NTab>
-        <NTab v-if="debugModeEnabled" name="原始数据">原始数据</NTab>
+        <NTab v-if="showDeviceRawData" name="原始数据">原始数据</NTab>
      </NTabs>
    </template>
    <template #default>
--- a/src/components/device/device-card/ndm-server/server-stream-push.vue
+++ b/src/components/device/device-card/ndm-server/server-stream-push.vue
@@ -13,7 +13,7 @@ const props = defineProps<{
 }>();

 const settingStore = useSettingStore();
-const { offlineDev } = storeToRefs(settingStore);
+const { activeRequests } = storeToRefs(settingStore);

 const queryClient = useQueryClient();

@@ -27,7 +27,7 @@ const SERVER_STREAM_PUSH_KEY = 'server-stream-push-query';

 const { data: streamPushes } = useQuery({
  queryKey: computed(() => [SERVER_STREAM_PUSH_KEY, ndmDevice.value.id, ndmDevice.value.lastDiagTime]),
-  enabled: computed(() => !offlineDev.value && showCard.value),
+  enabled: computed(() => activeRequests.value && showCard.value),
  refetchInterval: 30 * 1000,
  gcTime: 0,
  queryFn: async ({ signal }) => {
@@ -35,8 +35,8 @@ const { data: streamPushes } = useQuery({
    return streamPushes;
  },
 });
-watch(offlineDev, (offline) => {
-  if (offline) {
+watch(activeRequests, (active) => {
+  if (!active) {
    queryClient.cancelQueries({ queryKey: [SERVER_STREAM_PUSH_KEY] });
  }
 });
@@ -70,7 +70,7 @@ const streamPushStat = computed(() => {
      <span>推流统计</span>
    </template>
    <template #default>
-      <template v-if="offlineDev">
+      <template v-if="activeRequests">
        <span>-</span>
      </template>
      <template v-else>
--- a/src/components/device/device-card/ndm-switch/switch-card.vue
+++ b/src/components/device/device-card/ndm-switch/switch-card.vue
@@ -16,7 +16,7 @@ const route = useRoute();
 const router = useRouter();

 const settingStore = useSettingStore();
-const { debugModeEnabled } = storeToRefs(settingStore);
+const { showDeviceRawData } = storeToRefs(settingStore);

 const { ndmDevice, station } = toRefs(props);

@@ -31,7 +31,7 @@ const activeTabName = ref('当前诊断');
 const onTabChange = (name: string) => {
  activeTabName.value = name;
 };
-watch([ndmDevice, debugModeEnabled], ([newDevice, enabled], [oldDevice]) => {
+watch([ndmDevice, showDeviceRawData], ([newDevice, enabled], [oldDevice]) => {
  if (newDevice.id !== oldDevice.id || !enabled) {
    activeTabName.value = '当前诊断';
  }
@@ -46,7 +46,7 @@ watch([ndmDevice, debugModeEnabled], ([newDevice, enabled], [oldDevice]) => {
        <NTab name="当前诊断">当前诊断</NTab>
        <NTab name="历史诊断">历史诊断</NTab>
        <NTab name="修改设备">修改设备</NTab>
-        <NTab v-if="debugModeEnabled" name="原始数据">原始数据</NTab>
+        <NTab v-if="showDeviceRawData" name="原始数据">原始数据</NTab>
      </NTabs>
    </template>
    <template #default>
--- a/src/components/global/settings-drawer/settings-drawer.vue
+++ b/src/components/global/settings-drawer/settings-drawer.vue
@@ -2,7 +2,7 @@
 import { retentionDaysApi, snapStatusApi, type LineAlarms, type LineDevices, type Station, type VersionInfo } from '@/apis';
 import { ThemeSwitch } from '@/components';
 import { NDM_ALARM_STORE_ID, NDM_DEVICE_STORE_ID, NDM_STATION_STORE_ID } from '@/constants';
-import { usePollingStore, useSettingStore } from '@/stores';
+import { useSettingStore } from '@/stores';
 import { downloadByData, getAppEnvConfig, parseErrorFeedback, sleep } from '@/utils';
 import { useMutation } from '@tanstack/vue-query';
 import { useEventListener } from '@vueuse/core';
@@ -18,7 +18,7 @@ import { ref, watch } from 'vue';
 const show = defineModel<boolean>('show', { default: false });

 const settingsStore = useSettingStore();
-const { menuCollpased, stationGridCols, debugModeEnabled, offlineDev } = storeToRefs(settingsStore);
+const { menuCollpased, stationGridCols, debugMode, showDeviceRawData, pollingStations, activeRequests, subscribeMessages, mockUser, useLocalDB } = storeToRefs(settingsStore);

 const versionInfo = ref<VersionInfo>({ version: '', buildTime: '' });

@@ -123,11 +123,11 @@ const enableDebugMode = () => {
    return;
  }
  showDebugCodeModal.value = false;
-  settingsStore.enableDebugMode();
+  debugMode.value = true;
 };
 const disableDebugMode = () => {
  showDebugCodeModal.value = false;
-  settingsStore.disableDebugMode();
+  debugMode.value = false;
 };
 useEventListener('keydown', (event) => {
  const { ctrlKey, altKey, code } = event;
@@ -138,23 +138,13 @@ useEventListener('keydown', (event) => {

 const expectToShowDebugCodeInput = ref(false);
 const onModalAfterEnter = () => {
-  expectToShowDebugCodeInput.value = !debugModeEnabled.value;
+  expectToShowDebugCodeInput.value = !debugMode.value;
 };
 const onModalAfterLeave = () => {
  expectToShowDebugCodeInput.value = false;
  debugCode.value = '';
 };

-const pollingStore = usePollingStore();
-const { pollingEnabled } = storeToRefs(pollingStore);
-const onPollingEnabledUpdate = (enabled: boolean) => {
-  if (enabled) {
-    pollingStore.startPolling();
-  } else {
-    pollingStore.stopPolling();
-  }
-};
-
 type IndexedDbStoreId = typeof NDM_STATION_STORE_ID | typeof NDM_DEVICE_STORE_ID | typeof NDM_ALARM_STORE_ID;
 type IndexedDbStoreStates = {
  [NDM_STATION_STORE_ID]: { stations: Station[] };
@@ -172,8 +162,9 @@ const exportFromIndexedDB = async <K extends IndexedDbStoreId>(storeId: K, optio
 };
 const importToIndexedDB = async <K extends IndexedDbStoreId>(storeId: K, options?: { successMsg?: string; errorMsg?: string }) => {
  const { successMsg, errorMsg } = options ?? {};
-  pollingStore.stopPolling();
-  offlineDev.value = true;
+  pollingStations.value = false;
+  activeRequests.value = false;
+  subscribeMessages.value = false;
  const fileInput = document.createElement('input');
  fileInput.type = 'file';
  fileInput.accept = '.json';
@@ -196,8 +187,9 @@ const importToIndexedDB = async <K extends IndexedDbStoreId>(storeId: K, options
  };
 };
 const deleteFromIndexedDB = async (storeId: IndexedDbStoreId) => {
-  pollingStore.stopPolling();
-  offlineDev.value = true;
+  pollingStations.value = false;
+  activeRequests.value = false;
+  subscribeMessages.value = false;
  await localforage.removeItem(storeId).catch((error) => {
    window.$message.error(`${error}`);
    return;
@@ -266,15 +258,14 @@ const onSelectDropdownOption = (key: string, option: DropdownOption) => {
  }
 };

-watch([offlineDev, show], ([offline, entered]) => {
-  if (!offline) {
-    if (entered) {
-      getRetentionDays();
-      getSnapStatus();
-    } else {
-      abortControllers.value.retentionDays.abort();
-      abortControllers.value.snapStatus.abort();
-    }
+watch([activeRequests, show], ([active, entered]) => {
+  if (!active) return;
+  if (entered) {
+    getRetentionDays();
+    getSnapStatus();
+  } else {
+    abortControllers.value.retentionDays.abort();
+    abortControllers.value.snapStatus.abort();
  }
 });
 const onDrawerAfterEnter = () => {
@@ -323,15 +314,33 @@ const onDrawerAfterLeave = () => {
          </NFlex>
        </NFormItem>

-        <template v-if="debugModeEnabled">
+        <template v-if="debugMode">
          <NDivider title-placement="center">调试</NDivider>
-          <NFormItem label="启用轮询" label-placement="left">
-            <NSwitch size="small" :value="pollingEnabled" @update:value="onPollingEnabledUpdate" />
+          <NFormItem label="调试模式" label-placement="left">
+            <NSwitch size="small" v-model:value="debugMode" />
          </NFormItem>
-          <NFormItem label="离线开发" label-placement="left">
-            <NSwitch size="small" v-model:value="offlineDev" />
+          <NDivider title-placement="left" dashed>数据设置</NDivider>
+          <NFormItem label="显示设备原始数据" label-placement="left">
+            <NSwitch size="small" v-model:value="showDeviceRawData" />
          </NFormItem>
-          <NFormItem label="本地数据库" label-placement="left">
+          <NDivider title-placement="left" dashed>网络设置</NDivider>
+          <NFormItem label="轮询车站" label-placement="left">
+            <NSwitch size="small" v-model:value="pollingStations" />
+          </NFormItem>
+          <NFormItem label="主动请求" label-placement="left">
+            <NSwitch size="small" v-model:value="activeRequests" />
+          </NFormItem>
+          <NFormItem label="订阅消息" label-placement="left">
+            <NSwitch size="small" v-model:value="subscribeMessages" />
+          </NFormItem>
+          <NFormItem label="模拟用户" label-placement="left">
+            <NSwitch size="small" v-model:value="mockUser" />
+          </NFormItem>
+          <NDivider title-placement="left" dashed>数据库设置</NDivider>
+          <NFormItem label="直接操作本地数据库" label-placement="left">
+            <NSwitch size="small" v-model:value="useLocalDB" />
+          </NFormItem>
+          <NFormItem label="数据操作" label-placement="left">
            <NFlex>
              <NDropdown trigger="click" :options="exportDropdownOptions" @select="onSelectDropdownOption">
                <NButton secondary size="small">
@@ -371,7 +380,7 @@ const onDrawerAfterLeave = () => {

  <NModal v-model:show="showDebugCodeModal" preset="dialog" type="info" @after-enter="onModalAfterEnter" @after-leave="onModalAfterLeave">
    <template #header>
-      <NText v-if="!debugModeEnabled">请输入调试码</NText>
+      <NText v-if="!debugMode">请输入调试码</NText>
      <NText v-else>确认关闭调试模式</NText>
    </template>
    <template #default>
@@ -379,7 +388,7 @@ const onDrawerAfterLeave = () => {
    </template>
    <template #action>
      <NButton @click="showDebugCodeModal = false">取消</NButton>
-      <NButton v-if="!debugModeEnabled" type="primary" @click="enableDebugMode">启用</NButton>
+      <NButton v-if="!debugMode" type="primary" @click="enableDebugMode">启用</NButton>
      <NButton v-else type="primary" @click="disableDebugMode">确认</NButton>
    </template>
  </NModal>
--- a/src/components/global/theme-switch/theme-switch.vue
+++ b/src/components/global/theme-switch/theme-switch.vue
@@ -5,14 +5,14 @@ import { storeToRefs } from 'pinia';
 import type { ComponentInstance } from 'vue';

 const settingsStore = useSettingStore();
-const { darkThemeEnabled } = storeToRefs(settingsStore);
+const { darkMode } = storeToRefs(settingsStore);

 // 使外部能够获取NSwitch的类型提示
 defineExpose({} as ComponentInstance<typeof NSwitch>);
 </script>

 <template>
-  <NSwitch v-model:value="darkThemeEnabled">
+  <NSwitch v-model:value="darkMode">
    <template #unchecked-icon>
      <NIcon>
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
--- a/src/composables/query/use-line-stations-query.ts
+++ b/src/composables/query/use-line-stations-query.ts
@@ -1,6 +1,6 @@
 import { batchVerifyApi, type Station } from '@/apis';
 import { LINE_STATIONS_MUTATION_KEY, LINE_STATIONS_QUERY_KEY } from '@/constants';
-import { usePollingStore, useStationStore } from '@/stores';
+import { useSettingStore, useStationStore } from '@/stores';
 import { getAppEnvConfig, parseErrorFeedback } from '@/utils';
 import { CancelledError, useMutation, useQuery } from '@tanstack/vue-query';
 import axios, { isCancel } from 'axios';
@@ -44,8 +44,8 @@ export const useLineStationsMutation = () => {
 };

 export const useLineStationsQuery = () => {
-  const pollingStore = usePollingStore();
-  const { pollingEnabled } = storeToRefs(pollingStore);
+  const settingStore = useSettingStore();
+  const { pollingStations } = storeToRefs(settingStore);
  const { requestInterval } = getAppEnvConfig();
  const { mutateAsync: getLineStations } = useLineStationsMutation();
  const { refetch: refetchLineDevicesQuery } = useLineDevicesQuery();
@@ -53,7 +53,7 @@ export const useLineStationsQuery = () => {

  return useQuery({
    queryKey: computed(() => [LINE_STATIONS_QUERY_KEY]),
-    enabled: computed(() => pollingEnabled.value),
+    enabled: computed(() => pollingStations.value),
    refetchInterval: requestInterval * 1000,
    staleTime: (requestInterval * 1000) / 2,
    queryFn: async ({ signal }) => {
@@ -62,10 +62,10 @@ export const useLineStationsQuery = () => {
      const endTime = performance.now();
      console.log(`${LINE_STATIONS_QUERY_KEY}: ${endTime - startTime} ms`);

-      if (!pollingEnabled.value) return null;
+      if (!pollingStations.value) return null;
      await refetchLineDevicesQuery();

-      if (!pollingEnabled.value) return null;
+      if (!pollingStations.value) return null;
      await refetchLineAlarmsQuery();

      return null;
--- a/src/composables/query/use-verify-user-query.ts
+++ b/src/composables/query/use-verify-user-query.ts
@@ -8,17 +8,17 @@ import { computed, watch } from 'vue';
 export const useVerifyUserQuery = () => {
  const queryClient = useQueryClient();
  const settingStore = useSettingStore();
-  const { offlineDev } = storeToRefs(settingStore);
+  const { activeRequests } = storeToRefs(settingStore);

-  watch(offlineDev, (offline) => {
-    if (offline) {
+  watch(activeRequests, (active) => {
+    if (!active) {
      queryClient.cancelQueries({ queryKey: [VERIFY_USER_QUERY_KEY] });
    }
  });

  return useQuery({
    queryKey: [VERIFY_USER_QUERY_KEY],
-    enabled: computed(() => !offlineDev.value),
+    enabled: computed(() => activeRequests.value),
    refetchInterval: 10 * 1000,
    queryFn: async ({ signal }) => {
      await verifyApi({ signal });
--- a/src/composables/stomp/use-stomp-client.ts
+++ b/src/composables/stomp/use-stomp-client.ts
@@ -24,7 +24,7 @@ export const useStompClient = () => {
  const { unreadLineAlarms } = storeToRefs(unreadStore);

  const settingStore = useSettingStore();
-  const { offlineDev } = storeToRefs(settingStore);
+  const { subscribeMessages } = storeToRefs(settingStore);

  const { mutate: refreshStationAlarms } = useStationAlarmsMutation();

@@ -66,7 +66,7 @@ export const useStompClient = () => {
        window.$message.error('WebSocket错误');
      },
    });
-    if (!offlineDev.value) {
+    if (subscribeMessages.value) {
      stompClient.value.activate();
    }
  });
@@ -76,11 +76,11 @@ export const useStompClient = () => {
    stompClient.value = null;
  });

-  watch(offlineDev, (offline) => {
-    if (offline) {
-      stompClient.value?.deactivate();
-    } else {
+  watch(subscribeMessages, (subscribe) => {
+    if (subscribe) {
      stompClient.value?.activate();
+    } else {
+      stompClient.value?.deactivate();
    }
  });

@@ -90,8 +90,8 @@ export const useStompClient = () => {
  watchDebounced(
    () => Object.entries(unreadLineAlarms.value).map(([stationCode, stationAlarms]) => ({ stationCode, count: stationAlarms['unclassified'].length })),
    (newValue, oldValue) => {
-      // 启用离线模式时，跳过处理
-      if (offlineDev.value) return;
+      // 关闭消息订阅时，跳过处理
+      if (!subscribeMessages.value) return;
      if (newValue.length === 0) return;
      const codes: Station['code'][] = [];
      newValue.forEach(({ stationCode, count }) => {
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -7,6 +7,6 @@ declare global {
    $loadingBar: ReturnType<typeof useLoadingBar>;
    $message: ReturnType<typeof useMessage>;
    $notification: ReturnType<typeof useNotification>;
-    $offlineDev: Ref<boolean>;
+    $mockUser: Ref<boolean>;
  }
 }
--- a/src/layouts/app-layout.vue
+++ b/src/layouts/app-layout.vue
@@ -3,9 +3,7 @@ import { SettingsDrawer, SyncCameraResultModal } from '@/components';
 import { useLineStationsQuery, useStompClient, useVerifyUserQuery } from '@/composables';
 import { LINE_ALARMS_QUERY_KEY, LINE_DEVICES_QUERY_KEY, LINE_STATIONS_MUTATION_KEY, LINE_STATIONS_QUERY_KEY, STATION_ALARMS_MUTATION_KEY, STATION_DEVICES_MUTATION_KEY } from '@/constants';
 import { useSettingStore, useUnreadStore, useUserStore } from '@/stores';
-import { parseErrorFeedback } from '@/utils';
-import { useIsFetching, useIsMutating, useMutation } from '@tanstack/vue-query';
-import { isCancel } from 'axios';
+import { useIsFetching, useIsMutating } from '@tanstack/vue-query';
 import { ChevronDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ComputerIcon, LogOutIcon, LogsIcon, MapPinIcon, SettingsIcon, SirenIcon } from 'lucide-vue-next';
 import {
  NBadge,
@@ -24,7 +22,7 @@ import {
  type MenuOption,
 } from 'naive-ui';
 import { storeToRefs } from 'pinia';
-import { computed, h, ref, watchEffect, type Component, type VNode } from 'vue';
+import { computed, h, ref, type Component, type VNode } from 'vue';
 import { RouterLink, useRoute, useRouter } from 'vue-router';

 const route = useRoute();
@@ -37,7 +35,7 @@ const unreadStore = useUnreadStore();
 const { unreadAlarmCount } = storeToRefs(unreadStore);

 const settingStore = useSettingStore();
-const { menuCollpased, offlineDev } = storeToRefs(settingStore);
+const { menuCollpased } = storeToRefs(settingStore);

 const { syncCameraResult, afterCheckSyncCameraResult } = useStompClient();

@@ -147,27 +145,6 @@ const routeToAlarmPage = () => {
  }
 };

-const { mutate: getUserInfo } = useMutation({
-  mutationFn: async (params?: { signal?: AbortSignal }) => {
-    const { signal } = params ?? {};
-    await userStore.userGetInfo({ signal });
-  },
-  onError: (error) => {
-    if (isCancel(error)) return;
-    console.error(error);
-    const errorFeedback = parseErrorFeedback(error);
-    window.$message.error(errorFeedback);
-  },
-});
-
-// 判断是否为离线开发模式 决定是否自动发送获取用户信息请求
-watchEffect((onCleanup) => {
-  if (offlineDev.value) return;
-  const abortController = new AbortController();
-  getUserInfo({ signal: abortController.signal });
-  onCleanup(() => abortController.abort());
-});
-
 function renderIcon(icon: Component): () => VNode {
  return () => h(NIcon, null, { default: () => h(icon) });
 }
--- a/src/pages/login/login-page.vue
+++ b/src/pages/login/login-page.vue
@@ -22,8 +22,7 @@ const { mutate: login, isPending: loading } = useMutation({
  mutationFn: async (params: LoginParams) => {
    const userStore = useUserStore();
    await userStore.userLogin(params);
-    const [err] = await userClient.post<void>(`/api/ndm/ndmKeepAlive/verify`, {}, { timeout: 5000 });
-    if (err) throw err;
+    await userStore.userGetInfo();
  },
  onSuccess: () => {
    window.$message.success('登录成功');
--- a/src/pages/station/station-page.vue
+++ b/src/pages/station/station-page.vue
@@ -4,14 +4,14 @@ import { AlarmDetailModal, DeviceDetailModal, DeviceParamConfigModal, IcmpExport
 import { useBatchActions, useLineDevicesQuery } from '@/composables';
 import { useAlarmStore, useDeviceStore, useSettingStore, useStationStore } from '@/stores';
 import { useMutation } from '@tanstack/vue-query';
-import { objectEntries } from '@vueuse/core';
+import { objectEntries, useElementSize } from '@vueuse/core';
 import { isCancel } from 'axios';
 import { NButton, NButtonGroup, NCheckbox, NFlex, NGrid, NGridItem, NScrollbar } from 'naive-ui';
 import { storeToRefs } from 'pinia';
-import { computed, ref } from 'vue';
+import { computed, ref, useTemplateRef } from 'vue';

 const settingStore = useSettingStore();
-const { stationGridCols: stationGridColumns } = storeToRefs(settingStore);
+const { stationGridCols } = storeToRefs(settingStore);

 const stationStore = useStationStore();
 const { stations } = storeToRefs(stationStore);
@@ -22,6 +22,21 @@ const { lineDevices } = storeToRefs(deviceStore);
 const alarmStore = useAlarmStore();
 const { lineAlarms } = storeToRefs(alarmStore);

+const STATION_CARD_MIN_WIDTH = 230;
+const STATION_GRID_PADDING = 8;
+const STATION_GRID_GAP = 6;
+const STATION_GRID_REF_NAME = 'stationGridRef';
+const stationGridRef = useTemplateRef<HTMLDivElement>(STATION_GRID_REF_NAME);
+const { width: stationGridWidth } = useElementSize(stationGridRef);
+// 计算合适的车站布局列数
+const actualStationGridColumns = computed(() => {
+  const currentStationCardWidth = (stationGridWidth.value - STATION_GRID_PADDING * 2 - (stationGridCols.value - 1) * STATION_GRID_GAP) / stationGridCols.value;
+  // 当卡片宽度大于最小宽度时，说明用户的设置没有问题，直接返回列数
+  if (currentStationCardWidth > STATION_CARD_MIN_WIDTH) return stationGridCols.value;
+  // 否则，说明用户的设置不合适，需要根据当前布局宽度重新计算列数
+  return Math.floor((stationGridWidth.value - STATION_GRID_PADDING * 2 + STATION_GRID_GAP) / STATION_CARD_MIN_WIDTH);
+});
+
 const showIcmpExportModal = ref(false);
 const showRecordCheckExportModal = ref(false);

@@ -155,7 +170,7 @@ const onClickDetail: StationCardProps['onClickDetail'] = (type, station) => {
 <template>
  <NScrollbar content-style="padding-right: 8px" style="width: 100%; height: 100%">
    <!-- 工具栏 -->
-    <NFlex align="center" style="padding: 8px 8px 0 8px">
+    <NFlex align="center" :style="{ padding: `${STATION_GRID_PADDING}px ${STATION_GRID_PADDING}px 0 ${STATION_GRID_PADDING}px` }">
      <NButtonGroup>
        <template v-for="batchAction in batchActions" :key="batchAction.key">
          <NButton :secondary="!batchAction.active" :focusable="false" @click="() => toggleSelectAction(batchAction)">{{ batchAction.label }}</NButton>
@@ -174,19 +189,21 @@ const onClickDetail: StationCardProps['onClickDetail'] = (type, station) => {
    </NFlex>

    <!-- 车站 -->
-    <NGrid :cols="stationGridColumns" :x-gap="6" :y-gap="6" style="padding: 8px">
-      <NGridItem v-for="station in stations" :key="station.code">
-        <StationCard
-          :station="station"
-          :devices="lineDevices[station.code] ?? initStationDevices()"
-          :alarms="lineAlarms[station.code] ?? initStationAlarms()"
-          :selectable="!!selectableStations.find((selectable) => selectable.code === station.code)"
-          v-model:selected="stationSelection[station.code]"
-          @click-detail="onClickDetail"
-          @click-config="onClickConfig"
-        />
-      </NGridItem>
-    </NGrid>
+    <div :ref="STATION_GRID_REF_NAME">
+      <NGrid :cols="actualStationGridColumns" :x-gap="STATION_GRID_GAP" :y-gap="STATION_GRID_GAP" :style="{ padding: `${STATION_GRID_PADDING}px` }">
+        <NGridItem v-for="station in stations" :key="station.code">
+          <StationCard
+            :station="station"
+            :devices="lineDevices[station.code] ?? initStationDevices()"
+            :alarms="lineAlarms[station.code] ?? initStationAlarms()"
+            :selectable="!!selectableStations.find((selectable) => selectable.code === station.code)"
+            v-model:selected="stationSelection[station.code]"
+            @click-detail="onClickDetail"
+            @click-config="onClickConfig"
+          />
+        </NGridItem>
+      </NGrid>
+    </div>
  </NScrollbar>

  <IcmpExportModal v-model:show="showIcmpExportModal" :stations="stations.filter((station) => stationSelection[station.code])" @after-leave="cancelAction" />
--- a/src/stores/index.ts
+++ b/src/stores/index.ts
@@ -1,6 +1,5 @@
 export * from './alarm';
 export * from './device';
-export * from './polling';
 export * from './setting';
 export * from './station';
 export * from './unread';
--- a/src/stores/setting.ts
+++ b/src/stores/setting.ts
@@ -1,36 +1,71 @@
-import { NDM_SETTING_STORE_ID } from '@/constants';
+import { useUserStore } from './user';
+import { LINE_ALARMS_QUERY_KEY, LINE_DEVICES_QUERY_KEY, LINE_STATIONS_QUERY_KEY, NDM_SETTING_STORE_ID } from '@/constants';
+import router from '@/router';
+import { useQueryClient } from '@tanstack/vue-query';
 import { darkTheme, lightTheme } from 'naive-ui';
 import { defineStore } from 'pinia';
 import { computed, ref, watch } from 'vue';
-import { useUserStore } from './user';
-import router from '@/router';

 export const useSettingStore = defineStore(
  NDM_SETTING_STORE_ID,
  () => {
-    const darkThemeEnabled = ref(true);
+    const queryClient = useQueryClient();
+
+    // 主题设置
+    const darkMode = ref(true);
    const themeMode = computed(() => {
-      return darkThemeEnabled.value ? darkTheme : lightTheme;
+      return darkMode.value ? darkTheme : lightTheme;
    });

+    // 布局设置
    const menuCollpased = ref(false);
-
    const stationGridCols = ref(6);

-    const debugModeEnabled = ref(false);
-    const enableDebugMode = () => {
-      debugModeEnabled.value = true;
-    };
-    const disableDebugMode = () => {
-      debugModeEnabled.value = false;
-    };
+    // 调试模式
+    const debugMode = ref(false);
+    /* 数据设置 */
+    // 显示设备原始数据
+    const showDeviceRawData = ref(false);
+    /* 网络设置 */
+    // 轮询车站
+    const pollingStations = ref(true);
+    // 主动请求
+    const activeRequests = ref(true);
+    // 订阅消息
+    const subscribeMessages = ref(true);
+    // 模拟用户
+    const mockUser = ref(false);
+    /* 数据库设置 */
+    // 使用本地数据库
+    const useLocalDB = ref(false);

-    // 离线开发模式
-    // 控制 版本轮询 stomp连接 app-layout中的自动getUserInfo
-    const offlineDev = ref(false);
-    watch(offlineDev, (newValue, oldValue) => {
-      // 如果启用离线开发模式且当前未登录 自动填写token以绕过路由守卫并跳过登录页
+    watch(debugMode, (newValue, oldValue) => {
+      // 监听关闭调试模式
+      if (oldValue && !newValue) {
+        showDeviceRawData.value = false;
+        pollingStations.value = true;
+        activeRequests.value = true;
+        subscribeMessages.value = false;
+        mockUser.value = false;
+      }
+    });
+
+    watch(pollingStations, (newValue, oldValue) => {
+      // 监听关闭车站轮询
+      if (oldValue && !newValue) {
+        queryClient.cancelQueries({ queryKey: [LINE_STATIONS_QUERY_KEY] });
+        queryClient.cancelQueries({ queryKey: [LINE_DEVICES_QUERY_KEY] });
+        queryClient.cancelQueries({ queryKey: [LINE_ALARMS_QUERY_KEY] });
+        queryClient.invalidateQueries({ queryKey: [LINE_STATIONS_QUERY_KEY] });
+        queryClient.invalidateQueries({ queryKey: [LINE_DEVICES_QUERY_KEY] });
+        queryClient.invalidateQueries({ queryKey: [LINE_ALARMS_QUERY_KEY] });
+      }
+    });
+
+    watch(mockUser, (newValue, oldValue) => {
+      // 监听启用模拟用户
      if (!oldValue && newValue) {
+        // 如果启当前未登录，填写token以绕过路由守卫
        const userStore = useUserStore();
        if (!userStore.userLoginResult) {
          userStore.userLoginResult = {
@@ -42,9 +77,11 @@ export const useSettingStore = defineStore(
            expiration: '',
          };
        }
+        // 如果token为空，填写token
        if (!userStore.userLoginResult.token) {
          userStore.userLoginResult.token = 'test';
        }
+        // 如果用户信息为空，填写用户信息
        if (!userStore.userInfo) {
          userStore.userInfo = {
            id: '2',
@@ -55,35 +92,42 @@ export const useSettingStore = defineStore(
            tenantId: '1',
          };
        }
+        // 如果当前路由为登录页，跳转到首页
        if (router.currentRoute.value.path === '/login') {
          router.push({ path: '/' });
        }
+        // 开启模拟用户时，也开启调试模式，但关闭其他的网络设置
+        debugMode.value = true;
+        pollingStations.value = false;
+        activeRequests.value = false;
+        subscribeMessages.value = false;
      }
    });

    return {
-      darkThemeEnabled,
+      darkMode,
      themeMode,

      menuCollpased,
-
      stationGridCols,

-      debugModeEnabled,
-      enableDebugMode,
-      disableDebugMode,
-
-      offlineDev,
+      debugMode,
+      showDeviceRawData,
+      pollingStations,
+      activeRequests,
+      subscribeMessages,
+      mockUser,
+      useLocalDB,
    };
  },
  {
    persist: [
      {
-        omit: ['debugModeEnabled'],
+        omit: ['showDeviceRawData'],
        storage: window.localStorage,
      },
      {
-        pick: ['debugModeEnabled'],
+        pick: ['showDeviceRawData'],
        storage: window.sessionStorage,
      },
    ],
Author	SHA1	Message	Date
yangsy	82789c78a9	feat: 车站卡片布局列数自适应	2026-01-21 15:23:08 +08:00
yangsy	6771abec31	refactor: 移除polling-store，重构setting-store	2026-01-20 11:22:24 +08:00