From 97e7780277dd445de282558cf641abcdf3fcda10 Mon Sep 17 00:00:00 2001
From: yangsy <ysy@ittc.sh.cn>
Date: Wed, 5 Nov 2025 15:23:45 +0800
Subject: [PATCH] feat: debug mode

---
 .env                                          |  3 ++
 .../device-page/device-card/camera-card.vue   |  6 +--
 .../device-page/device-card/decoder-card.vue  |  6 +--
 .../device-page/device-card/keyboard-card.vue |  6 +--
 .../device-page/device-card/nvr-card.vue      |  6 +--
 .../device-card/security-box-card.vue         |  6 +--
 .../device-page/device-card/server-card.vue   |  6 +--
 .../device-page/device-card/switch-card.vue   |  6 +--
 src/components/global/settings-drawer.vue     | 48 +++++++++++++++++--
 src/stores/debug-mode.ts                      | 24 ++++++++++
 src/utils/env.ts                              | 13 ++++-
 11 files changed, 104 insertions(+), 26 deletions(-)
 create mode 100644 src/stores/debug-mode.ts

diff --git a/.env b/.env
index 5ef388f..87ed419 100644
--- a/.env
+++ b/.env
@@ -14,3 +14,6 @@ VITE_LAMP_PASSWORD = fjoc(1KHP(Ls&Bje)C
 
 # 如果 Authorization 已存在则会直接采用, 否则会根据 clientId 和 clientSecret 生成 
 VITE_LAMP_AUTHORIZATION = Y3VlZGVzX2FkbWluOmN1ZWRlc19hZG1pbl9zZWNyZXQ=
+
+# 调试授权码
+VITE_DEBUG_CODE = ndm_debug
diff --git a/src/components/device-page/device-card/camera-card.vue b/src/components/device-page/device-card/camera-card.vue
index 01af2a1..9dbd4dd 100644
--- a/src/components/device-page/device-card/camera-card.vue
+++ b/src/components/device-page/device-card/camera-card.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { NdmCameraResultVO } from '@/apis/models';
-import { useUserStore } from '@/stores/user';
+import { useDebugModeStore } from '@/stores/debug-mode';
 import { destr } from 'destr';
 import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
 import { computed, ref, toRefs } from 'vue';
@@ -14,7 +14,7 @@ const props = defineProps<{
   ndmCamera: NdmCameraResultVO;
 }>();
 
-const userStore = useUserStore();
+const debugModeStore = useDebugModeStore();
 
 const { stationCode, ndmCamera } = toRefs(props);
 
@@ -76,7 +76,7 @@ const selectedTab = ref('设备状态');
         <CameraHistoryDiagCard :station-code="stationCode" :ndm-camera="ndmCamera" :key="ndmCamera.id" />
       </NTabPane>
       <!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
-      <NTabPane v-if="userStore.isSuperAdmin" name="原始数据" tab="原始数据">
+      <NTabPane v-if="debugModeStore.debugEnabled" name="原始数据" tab="原始数据">
         <pre class="raw-data">{{ { ...ndmCamera, lastDiagInfo } }}</pre>
       </NTabPane>
     </NTabs>
diff --git a/src/components/device-page/device-card/decoder-card.vue b/src/components/device-page/device-card/decoder-card.vue
index 5dd53af..10fe512 100644
--- a/src/components/device-page/device-card/decoder-card.vue
+++ b/src/components/device-page/device-card/decoder-card.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { NdmDecoderDiagInfo } from '@/apis/domains';
 import type { NdmDecoderResultVO } from '@/apis/models';
-import { useUserStore } from '@/stores/user';
+import { useDebugModeStore } from '@/stores/debug-mode';
 import { destr } from 'destr';
 import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
 import { computed, ref, toRefs } from 'vue';
@@ -16,7 +16,7 @@ const props = defineProps<{
   ndmDecoder: NdmDecoderResultVO;
 }>();
 
-const userStore = useUserStore();
+const debugModeStore = useDebugModeStore();
 
 const { stationCode, ndmDecoder } = toRefs(props);
 
@@ -58,7 +58,7 @@ const selectedTab = ref('设备状态');
         <DecoderHistoryDiagCard :station-code="stationCode" :ndm-decoder="ndmDecoder" :key="ndmDecoder.id" />
       </NTabPane>
       <!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
-      <NTabPane v-if="userStore.isSuperAdmin" name="原始数据" tab="原始数据">
+      <NTabPane v-if="debugModeStore.debugEnabled" name="原始数据" tab="原始数据">
         <pre class="raw-data">{{ { ...ndmDecoder, lastDiagInfo } }}</pre>
       </NTabPane>
     </NTabs>
diff --git a/src/components/device-page/device-card/keyboard-card.vue b/src/components/device-page/device-card/keyboard-card.vue
index 1ca9a1c..2c7a7e8 100644
--- a/src/components/device-page/device-card/keyboard-card.vue
+++ b/src/components/device-page/device-card/keyboard-card.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { NdmKeyboardResultVO } from '@/apis/models';
-import { useUserStore } from '@/stores/user';
+import { useDebugModeStore } from '@/stores/debug-mode';
 import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
 import { ref, toRefs } from 'vue';
 
@@ -12,7 +12,7 @@ const props = defineProps<{
   ndmKeyboard: NdmKeyboardResultVO;
 }>();
 
-const userStore = useUserStore();
+const debugModeStore = useDebugModeStore();
 
 const { stationCode, ndmKeyboard } = toRefs(props);
 
@@ -32,7 +32,7 @@ const selectedTab = ref('设备状态');
         <KeyboardHistoryDiagCard :station-code="stationCode" :ndm-keyboard="ndmKeyboard" :key="ndmKeyboard.id" />
       </NTabPane>
       <!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
-      <NTabPane v-if="userStore.isSuperAdmin" name="原始数据" tab="原始数据">
+      <NTabPane v-if="debugModeStore.debugEnabled" name="原始数据" tab="原始数据">
         <pre class="raw-data">{{ { ...ndmKeyboard } }}</pre>
       </NTabPane>
     </NTabs>
diff --git a/src/components/device-page/device-card/nvr-card.vue b/src/components/device-page/device-card/nvr-card.vue
index 0a3c3ed..8b9c58c 100644
--- a/src/components/device-page/device-card/nvr-card.vue
+++ b/src/components/device-page/device-card/nvr-card.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { NdmNvrDiagInfo } from '@/apis/domains';
 import type { NdmNvrResultVO } from '@/apis/models';
-import { useUserStore } from '@/stores/user';
+import { useDebugModeStore } from '@/stores/debug-mode';
 import { destr } from 'destr';
 import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
 import { computed, ref, toRefs } from 'vue';
@@ -18,7 +18,7 @@ const props = defineProps<{
   ndmNvr: NdmNvrResultVO;
 }>();
 
-const userStore = useUserStore();
+const debugModeStore = useDebugModeStore();
 
 const { stationCode, ndmNvr } = toRefs(props);
 
@@ -73,7 +73,7 @@ const selectedTab = ref('设备状态');
         <NvrHistoryDiagCard :station-code="stationCode" :ndm-nvr="ndmNvr" :key="ndmNvr.id" />
       </NTabPane>
       <!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
-      <NTabPane v-if="userStore.isSuperAdmin" name="原始数据" tab="原始数据">
+      <NTabPane v-if="debugModeStore.debugEnabled" name="原始数据" tab="原始数据">
         <pre class="raw-data">{{ { ...ndmNvr, lastDiagInfo } }}</pre>
       </NTabPane>
     </NTabs>
diff --git a/src/components/device-page/device-card/security-box-card.vue b/src/components/device-page/device-card/security-box-card.vue
index 4119548..4092fee 100644
--- a/src/components/device-page/device-card/security-box-card.vue
+++ b/src/components/device-page/device-card/security-box-card.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { NdmSecurityBoxDiagInfo } from '@/apis/domains';
 import type { NdmSecurityBoxResultVO } from '@/apis/models';
-import { useUserStore } from '@/stores/user';
+import { useDebugModeStore } from '@/stores/debug-mode';
 import { destr } from 'destr';
 import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
 import { computed, ref, toRefs } from 'vue';
@@ -18,7 +18,7 @@ const props = defineProps<{
   ndmSecurityBox: NdmSecurityBoxResultVO;
 }>();
 
-const userStore = useUserStore();
+const debugModeStore = useDebugModeStore();
 
 const { stationCode, ndmSecurityBox } = toRefs(props);
 
@@ -69,7 +69,7 @@ const selectedTab = ref('设备状态');
         <SecurityBoxHistoryDiagCard :station-code="stationCode" :ndm-security-box="ndmSecurityBox" :key="ndmSecurityBox.id" />
       </NTabPane>
       <!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
-      <NTabPane v-if="userStore.isSuperAdmin" name="原始数据" tab="原始数据">
+      <NTabPane v-if="debugModeStore.debugEnabled" name="原始数据" tab="原始数据">
         <pre class="raw-data">{{ { ...ndmSecurityBox, lastDiagInfo } }}</pre>
       </NTabPane>
     </NTabs>
diff --git a/src/components/device-page/device-card/server-card.vue b/src/components/device-page/device-card/server-card.vue
index 43114f7..7a93108 100644
--- a/src/components/device-page/device-card/server-card.vue
+++ b/src/components/device-page/device-card/server-card.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { NdmServerDiagInfo } from '@/apis/domains';
 import type { NdmServerResultVO } from '@/apis/models';
-import { useUserStore } from '@/stores/user';
+import { useDebugModeStore } from '@/stores/debug-mode';
 import { destr } from 'destr';
 import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
 import { computed, ref, toRefs } from 'vue';
@@ -15,7 +15,7 @@ const props = defineProps<{
   ndmServer: NdmServerResultVO;
 }>();
 
-const userStore = useUserStore();
+const debugModeStore = useDebugModeStore();
 
 const { stationCode, ndmServer } = toRefs(props);
 
@@ -48,7 +48,7 @@ const selectedTab = ref('设备状态');
         <ServerHistoryDiagCard :station-code="stationCode" :ndm-server="ndmServer" :key="ndmServer.id" />
       </NTabPane>
       <!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
-      <NTabPane v-if="userStore.isSuperAdmin" name="原始数据" tab="原始数据">
+      <NTabPane v-if="debugModeStore.debugEnabled" name="原始数据" tab="原始数据">
         <pre class="raw-data">{{ { ...ndmServer, lastDiagInfo } }}</pre>
       </NTabPane>
     </NTabs>
diff --git a/src/components/device-page/device-card/switch-card.vue b/src/components/device-page/device-card/switch-card.vue
index 36a3ff7..43bd868 100644
--- a/src/components/device-page/device-card/switch-card.vue
+++ b/src/components/device-page/device-card/switch-card.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { NdmSwitchDiagInfo } from '@/apis/domains';
 import type { NdmSwitchResultVO } from '@/apis/models';
-import { useUserStore } from '@/stores/user';
+import { useDebugModeStore } from '@/stores/debug-mode';
 import { destr } from 'destr';
 import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
 import { computed, ref, toRefs } from 'vue';
@@ -16,7 +16,7 @@ const props = defineProps<{
   ndmSwitch: NdmSwitchResultVO;
 }>();
 
-const userStore = useUserStore();
+const debugModeStore = useDebugModeStore();
 
 const { stationCode, ndmSwitch } = toRefs(props);
 
@@ -50,7 +50,7 @@ const selectedTab = ref('设备状态');
         <SwitchHistoryDiagCard :station-code="stationCode" :ndm-switch="ndmSwitch" :key="ndmSwitch.id" />
       </NTabPane>
       <!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
-      <NTabPane v-if="userStore.isSuperAdmin" name="原始数据" tab="原始数据">
+      <NTabPane v-if="debugModeStore.debugEnabled" name="原始数据" tab="原始数据">
         <pre class="raw-data">{{ { ...ndmSwitch, lastDiagInfo } }}</pre>
       </NTabPane>
     </NTabs>
diff --git a/src/components/global/settings-drawer.vue b/src/components/global/settings-drawer.vue
index 2e0943a..0a60727 100644
--- a/src/components/global/settings-drawer.vue
+++ b/src/components/global/settings-drawer.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { NDivider, NDrawer, NDrawerContent, NFlex, NFormItem, NInputNumber, NRadio, NRadioGroup, NText } from 'naive-ui';
+import { NButton, NDivider, NDrawer, NDrawerContent, NFlex, NFormItem, NInput, NInputNumber, NModal, NRadio, NRadioGroup, NText } from 'naive-ui';
 import ThemeSwitch from './theme-switch.vue';
 import { useLayoutStore } from '@/stores/layout';
 import { storeToRefs } from 'pinia';
@@ -9,7 +9,9 @@ import type { VersionInfo } from '@/apis/domains/version-info';
 import { useQueryControlStore } from '@/stores/query-control';
 import { useQueryClient } from '@tanstack/vue-query';
 import { STATION_LIST_QUERY_KEY } from '@/constants';
-import { useUserStore } from '@/stores/user';
+import { useDebugModeStore } from '@/stores/debug-mode';
+import { getAppEnvConfig } from '@/utils/env';
+import { useEventListener } from '@vueuse/core';
 
 const show = defineModel<boolean>('show');
 
@@ -17,7 +19,6 @@ const layoutStore = useLayoutStore();
 const { stationLayoutGridCols } = storeToRefs(layoutStore);
 const queryControlStore = useQueryControlStore();
 const { stationVerifyMode } = storeToRefs(queryControlStore);
-const userStore = useUserStore();
 
 const queryClient = useQueryClient();
 watch(stationVerifyMode, () => {
@@ -32,6 +33,32 @@ onMounted(async () => {
   const { data } = await axios.get<VersionInfo>(`/manifest.json?t=${Date.now()}`);
   versionInfo.value = data;
 });
+
+const debugModeStore = useDebugModeStore();
+const { debugEnabled } = storeToRefs(debugModeStore);
+const debugCodeModalShow = ref(false);
+const debugCode = ref('');
+const enableDebug = () => {
+  const { debugCode: expectedDebugCode } = getAppEnvConfig();
+  if (debugCode.value !== expectedDebugCode) {
+    window.$message.error('调试授权码错误');
+    return;
+  }
+  debugCodeModalShow.value = false;
+  debugCode.value = '';
+  debugModeStore.enableDebug();
+};
+const disableDebug = () => {
+  debugCodeModalShow.value = false;
+  debugModeStore.disableDebug();
+};
+
+useEventListener('keydown', (event) => {
+  const { ctrlKey, altKey, code } = event;
+  if (ctrlKey && altKey && code === 'KeyD') {
+    debugCodeModalShow.value = true;
+  }
+});
 </script>
 
 <template>
@@ -46,7 +73,7 @@ onMounted(async () => {
         <NFormItem label="车站列数" label-placement="left">
           <NInputNumber v-model:value="stationLayoutGridCols" :min="1" :max="10" />
         </NFormItem>
-        <template v-if="userStore.isSuperAdmin">
+        <template v-if="debugEnabled">
           <NDivider>调试</NDivider>
           <NFormItem label="车站Ping模式" label-placement="left">
             <NRadioGroup v-model:value="stationVerifyMode">
@@ -63,6 +90,19 @@ onMounted(async () => {
       </template>
     </NDrawerContent>
   </NDrawer>
+
+  <NModal v-model:show="debugCodeModalShow" preset="dialog" type="info">
+    <template #header>
+      <NText v-if="!debugEnabled">请输入调试授权码</NText>
+      <NText v-else>确认关闭调试模式</NText>
+    </template>
+    <NInput v-if="!debugEnabled" v-model:value="debugCode" placeholder="输入授权码" />
+    <template #action>
+      <NButton @click="debugCodeModalShow = false">取消</NButton>
+      <NButton v-if="!debugEnabled" type="primary" @click="enableDebug">启用</NButton>
+      <NButton v-else type="primary" @click="disableDebug">确认</NButton>
+    </template>
+  </NModal>
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/src/stores/debug-mode.ts b/src/stores/debug-mode.ts
new file mode 100644
index 0000000..88a18e3
--- /dev/null
+++ b/src/stores/debug-mode.ts
@@ -0,0 +1,24 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+export const useDebugModeStore = defineStore(
+  'ndm-debug-mode-store',
+  () => {
+    const debugEnabled = ref(false);
+
+    const enableDebug = () => (debugEnabled.value = true);
+    const disableDebug = () => (debugEnabled.value = false);
+
+    return {
+      debugEnabled,
+      enableDebug,
+      disableDebug,
+    };
+  },
+  {
+    persist: {
+      pick: ['debugEnabled'],
+      storage: window.sessionStorage,
+    },
+  },
+);
diff --git a/src/utils/env.ts b/src/utils/env.ts
index 306187d..394287a 100644
--- a/src/utils/env.ts
+++ b/src/utils/env.ts
@@ -1,6 +1,16 @@
 export const getAppEnvConfig = () => {
   const env = import.meta.env;
-  const { VITE_REQUEST_INTERVAL, VITE_NDM_APP_KEY, VITE_LAMP_CLIENT_ID, VITE_LAMP_CLIENT_SECRET, VITE_LAMP_USERNAME, VITE_LAMP_PASSWORD, VITE_LAMP_AUTHORIZATION } = env;
+  const {
+    //
+    VITE_REQUEST_INTERVAL,
+    VITE_NDM_APP_KEY,
+    VITE_LAMP_CLIENT_ID,
+    VITE_LAMP_CLIENT_SECRET,
+    VITE_LAMP_USERNAME,
+    VITE_LAMP_PASSWORD,
+    VITE_LAMP_AUTHORIZATION,
+    VITE_DEBUG_CODE,
+  } = env;
   return {
     requestInterval: Number.parseInt(VITE_REQUEST_INTERVAL as string),
     ndmAppKey: VITE_NDM_APP_KEY as string,
@@ -9,5 +19,6 @@ export const getAppEnvConfig = () => {
     lampUsername: VITE_LAMP_USERNAME as string,
     lampPassword: VITE_LAMP_PASSWORD as string,
     lampAuthorization: VITE_LAMP_AUTHORIZATION as string,
+    debugCode: VITE_DEBUG_CODE as string,
   };
 };