perf: 二次认证页面中,添加动态验证码输入框的焦点控制,提升用户体验

pull/409/head
xiaojunnuo 2025-05-20 23:28:09 +08:00
parent a3086e6a5b
commit bb22f062ed
2 changed files with 14 additions and 2 deletions

View File

@ -21,6 +21,13 @@ const menus = computed(() => [
icon: "fa-solid:book", icon: "fa-solid:book",
text: "账号信息", text: "账号信息",
}, },
{
handler: () => {
router.push("/certd/mine/security");
},
icon: "fluent:shield-keyhole-16-regular",
text: "认证安全设置",
},
]); ]);
const avatar = computed(() => { const avatar = computed(() => {

View File

@ -54,7 +54,7 @@
<a-form v-else ref="twoFactorFormRef" class="user-layout-login" :model="twoFactor" v-bind="layout"> <a-form v-else ref="twoFactorFormRef" class="user-layout-login" :model="twoFactor" v-bind="layout">
<div class="mb-10 flex flex-center">请打开您的Authenticator APP获取动态验证码</div> <div class="mb-10 flex flex-center">请打开您的Authenticator APP获取动态验证码</div>
<a-form-item name="verifyCode"> <a-form-item name="verifyCode">
<a-input v-model:value="twoFactor.verifyCode" placeholder="请输入动态验证码" allow-clear> <a-input ref="verifyCodeInputRef" v-model:value="twoFactor.verifyCode" placeholder="请输入动态验证码" allow-clear>
<template #prefix> <template #prefix>
<fs-icon icon="ion:lock-closed-outline"></fs-icon> <fs-icon icon="ion:lock-closed-outline"></fs-icon>
</template> </template>
@ -71,7 +71,7 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, reactive, ref, toRaw } from "vue"; import { defineComponent, nextTick, reactive, ref, toRaw } from "vue";
import { useUserStore } from "/src/store/user"; import { useUserStore } from "/src/store/user";
import { useSettingStore } from "/@/store/settings"; import { useSettingStore } from "/@/store/settings";
import { utils } from "@fast-crud/fast-crud"; import { utils } from "@fast-crud/fast-crud";
@ -82,6 +82,7 @@ export default defineComponent({
name: "LoginPage", name: "LoginPage",
components: { SmsCode, ImageCode }, components: { SmsCode, ImageCode },
setup() { setup() {
const verifyCodeInputRef = ref();
const loading = ref(false); const loading = ref(false);
const userStore = useUserStore(); const userStore = useUserStore();
const settingStore = useSettingStore(); const settingStore = useSettingStore();
@ -149,8 +150,11 @@ export default defineComponent({
} catch (e: any) { } catch (e: any) {
//@ts-ignore //@ts-ignore
if (e.code === 10020) { if (e.code === 10020) {
//
//@ts-ignore //@ts-ignore
twoFactor.loginId = e.data; twoFactor.loginId = e.data;
await nextTick();
verifyCodeInputRef.value.focus();
} else { } else {
throw e; throw e;
} }
@ -188,6 +192,7 @@ export default defineComponent({
hasRegisterTypeEnabled, hasRegisterTypeEnabled,
twoFactor, twoFactor,
handleTwoFactorSubmit, handleTwoFactorSubmit,
verifyCodeInputRef,
}; };
}, },
}); });