feat: 优化二步验证界面,添加状态提示和描述信息,提升用户体验

This commit is contained in:
2026-01-20 07:17:08 +07:00
parent 1fadc625b0
commit a9dc3f3f10
2 changed files with 23 additions and 7 deletions

View File

@@ -114,8 +114,18 @@ async function disableTwoFactor() {
<div class="google-auth"> <div class="google-auth">
<template v-if="!twoFactorEnabled"> <template v-if="!twoFactorEnabled">
<template v-if="!qrCodeUrl"> <template v-if="!qrCodeUrl">
<NSpace vertical align="center" justify="center">
<NResult
status="success"
title="二步验证暂未开启"
description="开启二步验证可提升账户安全性,登录时需要输入动态验证码。"
>
<template #footer>
<NButton type="primary" :loading="loading" @click="enableTwoFactor">开启二步验证</NButton> <NButton type="primary" :loading="loading" @click="enableTwoFactor">开启二步验证</NButton>
</template> </template>
</NResult>
</NSpace>
</template>
<template v-else> <template v-else>
<div class="qr-code-container"> <div class="qr-code-container">
@@ -136,12 +146,16 @@ async function disableTwoFactor() {
</template> </template>
<template v-else> <template v-else>
<NSpace align="center"> <NSpace vertical align="center" justify="center">
<div class="text-success"> <NResult
<i class="i-carbon-checkmark-filled mr-1" /> status="success"
二步验证已开启 title="二步验证已开启"
</div> description="您的账户已启用二步验证,登录时需要输入动态验证码以增强安全性。"
>
<template #footer>
<NButton type="error" :loading="disabling" @click="disableTwoFactor">关闭二步验证</NButton> <NButton type="error" :loading="disabling" @click="disableTwoFactor">关闭二步验证</NButton>
</template>
</NResult>
</NSpace> </NSpace>
</template> </template>
</div> </div>

View File

@@ -75,6 +75,7 @@ declare module 'vue' {
NModal: typeof import('naive-ui')['NModal'] NModal: typeof import('naive-ui')['NModal']
NNotificationProvider: typeof import('naive-ui')['NNotificationProvider'] NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
NPopover: typeof import('naive-ui')['NPopover'] NPopover: typeof import('naive-ui')['NPopover']
NResult: typeof import('naive-ui')['NResult']
NRow: typeof import('naive-ui')['NRow'] NRow: typeof import('naive-ui')['NRow']
NScrollbar: typeof import('naive-ui')['NScrollbar'] NScrollbar: typeof import('naive-ui')['NScrollbar']
NSelect: typeof import('naive-ui')['NSelect'] NSelect: typeof import('naive-ui')['NSelect']
@@ -171,6 +172,7 @@ declare global {
const NModal: typeof import('naive-ui')['NModal'] const NModal: typeof import('naive-ui')['NModal']
const NNotificationProvider: typeof import('naive-ui')['NNotificationProvider'] const NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
const NPopover: typeof import('naive-ui')['NPopover'] const NPopover: typeof import('naive-ui')['NPopover']
const NResult: typeof import('naive-ui')['NResult']
const NRow: typeof import('naive-ui')['NRow'] const NRow: typeof import('naive-ui')['NRow']
const NScrollbar: typeof import('naive-ui')['NScrollbar'] const NScrollbar: typeof import('naive-ui')['NScrollbar']
const NSelect: typeof import('naive-ui')['NSelect'] const NSelect: typeof import('naive-ui')['NSelect']