From 58909d2d1946ee035758f934b0bad5dc93f7354e Mon Sep 17 00:00:00 2001
From: smail <likb_blue@163.com>
Date: Fri, 18 Sep 2026 22:29:02 +0800
Subject: [PATCH] =?UTF-8?q?=E7=B2=BE=E7=AE=80=E5=8A=A8=E6=80=81=E7=A0=81?=
 =?UTF-8?q?=E7=BB=91=E5=AE=9A=E9=A1=B5=E9=9D=A2=E5=B9=B6=E5=8C=BA=E5=88=86?=
 =?UTF-8?q?=E5=BE=85=E7=A1=AE=E8=AE=A4=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../TOTPSettings/TOTPSettings.css             | 45 +++++++++++++++++--
 .../TOTPSettings/TOTPSettings.vue             | 31 +++++++------
 2 files changed, 58 insertions(+), 18 deletions(-)

diff --git a/frontend/src/views/components/SecuritySettings/TOTPSettings/TOTPSettings.css b/frontend/src/views/components/SecuritySettings/TOTPSettings/TOTPSettings.css
index 0e5676a..3f511cc 100644
--- a/frontend/src/views/components/SecuritySettings/TOTPSettings/TOTPSettings.css
+++ b/frontend/src/views/components/SecuritySettings/TOTPSettings/TOTPSettings.css
@@ -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;
+}
diff --git a/frontend/src/views/components/SecuritySettings/TOTPSettings/TOTPSettings.vue b/frontend/src/views/components/SecuritySettings/TOTPSettings/TOTPSettings.vue
index a5a3a88..cc9fb07 100644
--- a/frontend/src/views/components/SecuritySettings/TOTPSettings/TOTPSettings.vue
+++ b/frontend/src/views/components/SecuritySettings/TOTPSettings/TOTPSettings.vue
@@ -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>