feat: debug mode

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>