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

View File

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