feat: debug mode

.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

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>

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>

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>

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>

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>

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>

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>

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>

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

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