xuans/Smail
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

精简动态码绑定页面并区分待确认状态
Some checks are pending
Security Checks / security (push) Waiting to run
Details

Browse Source
This commit is contained in:
smail 2026-09-18 22:29:02 +08:00
parent db28b63544
commit 58909d2d19
2 changed files with 58 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
frontend/src/views/components/SecuritySettings/TOTPSettings/TOTPSettings.css
View File

@ -8,18 +8,45 @@
line-height: 1.7;
}
.totp-heading {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 20px;
}
.totp-heading h3 {
margin: 0;
}
.totp-settings .el-alert {
margin-bottom: 16px;
}
.totp-enrollment img,
.totp-enrollment label,
.totp-enrollment code {
.totp-enrollment img {
display: block;
margin: 12px 0;
width: 240px;
max-width: 100%;
height: auto;
aspect-ratio: 1;
margin: 0 0 16px;
}
.totp-manual {
margin-bottom: 20px;
}
.totp-manual summary {
width: fit-content;
cursor: pointer;
color: var(--pm-text-secondary);
font-size: 14px;
}
.totp-enrollment code {
display: block;
margin-top: 12px;
padding: 12px;
border: 1px solid var(--pm-border-color);
border-radius: 8px;
@ -29,6 +56,16 @@
.totp-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 16px;
}
.totp-actions .el-button + .el-button {
margin-left: 0;
}
.totp-enrollment .el-form,
.totp-disable {
max-width: 360px;
}

31
frontend/src/views/components/SecuritySettings/TOTPSettings/TOTPSettings.vue
View File

@ -1,20 +1,24 @@
<template>
<section class="totp-settings" v-loading="busy">
<h3>手机动态码（TOTP）</h3>
<p>所有账号都可以自行选择是否开启。开启后，输入账号密码即可选择手机动态码或邮箱验证码登录。</p>
<div class="totp-heading">
<h3>手机动态码（TOTP）</h3>
<el-tag v-if="ready" :type="enrollment ? 'warning' : enabled ? 'success' : 'info'">
{{ enrollment ? '待确认' : enabled ? '已启用' : '未启用' }}
</el-tag>
</div>
<el-alert v-if="errorMessage" :title="errorMessage" type="error" :closable="false" show-icon />
<el-button v-if="!ready" :disabled="busy" @click="refresh">重新读取状态</el-button>
<template v-else>
<el-tag :type="enabled ? 'success' : 'info'">{{ enabled ? '已启用' : '未启用' }}</el-tag>
<div v-if="enrollment" class="totp-enrollment">
<p>使用手机验证器扫描二维码，或手动输入下面的密钥。绑定申请十分钟内有效。</p>
<img v-if="qrCode" :src="qrCode" alt="手机验证器绑定二维码" width="240" height="240" />
<label>手动绑定密钥</label>
<code>{{ enrollment.secret }}</code>
<p>算法：SHA256；位数：6；周期：30 秒。请妥善保管密钥，勿分享给他人。</p>
<el-form @submit.prevent="perform('confirm')">
<el-form-item label="六位手机动态码">
<el-input v-model="code" maxlength="6" inputmode="numeric" autocomplete="one-time-code" placeholder="输入手机上当前显示的动态码" />
<details class="totp-manual">
<summary>手动绑定</summary>
<code>{{ enrollment.secret }}</code>
<p>SHA256 · 6 位 · 30 秒</p>
</details>
<el-form label-position="top" @submit.prevent="perform('confirm')">
<el-form-item label="手机动态码">
<el-input v-model="code" maxlength="6" inputmode="numeric" autocomplete="one-time-code" placeholder="六位动态码" />
</el-form-item>
<div class="totp-actions">
<el-button type="primary" :disabled="busy" @click="perform('confirm')">确认启用</el-button>
@ -22,10 +26,9 @@
</div>
</el-form>
</div>
<el-form v-else-if="enabled" class="totp-disable" @submit.prevent="perform('disable')">
<p>关闭前请输入当前动态码。刚绑定或已用于验证的动态码需要等待下一次更新。</p>
<el-form-item label="六位手机动态码">
<el-input v-model="code" maxlength="6" inputmode="numeric" autocomplete="one-time-code" placeholder="输入动态码以确认关闭" />
<el-form v-else-if="enabled" class="totp-disable" label-position="top" @submit.prevent="perform('disable')">
<el-form-item label="手机动态码">
<el-input v-model="code" maxlength="6" inputmode="numeric" autocomplete="one-time-code" placeholder="六位动态码" />
</el-form-item>
<el-button type="danger" plain :disabled="busy" @click="perform('disable')">关闭手机动态码</el-button>
</el-form>