feat(settings-drawer): 为调试码输入框添加自动聚焦功能

更新了相关导入，添加输入框模板引用并在调试模态框打开时自动聚焦输入框

src/components/global/settings-drawer/settings-drawer.vue

@@ -13,9 +13,27 @@ import destr from 'destr';
 import { isFunction } from 'es-toolkit';
 import localforage from 'localforage';
 import { DownloadIcon, Trash2Icon, UploadIcon } from 'lucide-vue-next';
-import { NButton, NButtonGroup, NDivider, NDrawer, NDrawerContent, NDropdown, NFlex, NFormItem, NIcon, NInput, NInputNumber, NModal, NSwitch, NText, NTooltip, type DropdownOption } from 'naive-ui';
+import {
+  NButton,
+  NButtonGroup,
+  NDivider,
+  NDrawer,
+  NDrawerContent,
+  NDropdown,
+  NFlex,
+  NFormItem,
+  NIcon,
+  NInput,
+  NInputNumber,
+  NModal,
+  NSwitch,
+  NText,
+  NTooltip,
+  type DropdownOption,
+  type InputInst,
+} from 'naive-ui';
 import { storeToRefs } from 'pinia';
-import { computed, ref, watch } from 'vue';
+import { computed, nextTick, ref, useTemplateRef, watch } from 'vue';
 import { useRouter } from 'vue-router';
 
 const router = useRouter();
@@ -149,8 +167,14 @@ useEventListener('keydown', (event) => {
 });
 
 const expectToShowDebugCodeInput = ref(false);
+const debugCodeInputRef = useTemplateRef<InputInst>('debug-code-input-ref');
 const onModalAfterEnter = () => {
   expectToShowDebugCodeInput.value = !debugMode.value;
+  if (expectToShowDebugCodeInput.value) {
+    nextTick(() => {
+      debugCodeInputRef.value?.focus();
+    });
+  }
 };
 const onModalAfterLeave = () => {
   expectToShowDebugCodeInput.value = false;
@@ -412,7 +436,7 @@ const onClickVersion = () => {
       <NText v-else>确认关闭调试模式</NText>
     </template>
     <template #default>
-      <NInput v-if="expectToShowDebugCodeInput" v-model:value="debugCode" placeholder="输入调试码" @keyup.enter="enableDebugMode" />
+      <NInput ref="debug-code-input-ref" v-if="expectToShowDebugCodeInput" v-model:value="debugCode" placeholder="输入调试码" @keyup.enter="enableDebugMode" />
     </template>
     <template #action>
       <NButton @click="showDebugCodeModal = false">取消</NButton>