From de83f4ef815433c3120502456c20b322dc151f9c Mon Sep 17 00:00:00 2001 From: smail Date: Sun, 27 Sep 2026 18:10:55 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BB=9F=E4=B8=80=E7=94=9F=E6=88=90=E5=8D=81?= =?UTF-8?q?=E4=BA=8C=E4=B8=AA=E5=AE=89=E5=85=A8=E7=A0=81=E5=B9=B6=E9=87=87?= =?UTF-8?q?=E7=94=A8=E4=B8=89=E8=A1=8C=E5=9B=9B=E5=88=97=E8=A7=84=E6=95=B4?= =?UTF-8?q?=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- backend/services/credentials/service.go | 2 +- .../RecoverySetupPrompt.css | 30 ++++++++--- .../RecoverySetupPrompt.vue | 8 +-- .../SecuritySettings/SecuritySettings.css | 50 +++++++++++++++++++ .../SecuritySettings/SecuritySettings.js | 2 +- .../RecoveryCodeDialog/RecoveryCodeDialog.css | 25 ++++++++-- .../RecoveryCodeDialog/RecoveryCodeDialog.js | 2 +- .../RecoveryCodeDialog/RecoveryCodeDialog.vue | 2 +- 8 files changed, 104 insertions(+), 17 deletions(-) diff --git a/backend/services/credentials/service.go b/backend/services/credentials/service.go index 4741ecf..05b336a 100644 --- a/backend/services/credentials/service.go +++ b/backend/services/credentials/service.go @@ -31,7 +31,7 @@ var ( ) const ( - defaultCodeCount = 10 + defaultCodeCount = 12 minCodeCount = 5 maxCodeCount = 20 ) diff --git a/frontend/src/views/components/RecoverySetupPrompt/RecoverySetupPrompt.css b/frontend/src/views/components/RecoverySetupPrompt/RecoverySetupPrompt.css index 4df56b8..4dac147 100644 --- a/frontend/src/views/components/RecoverySetupPrompt/RecoverySetupPrompt.css +++ b/frontend/src/views/components/RecoverySetupPrompt/RecoverySetupPrompt.css @@ -35,22 +35,34 @@ .recovery-code-list { display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 10px; - padding: 14px; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 8px; + padding: 8px; border: 1px solid var(--pm-border-color); border-radius: var(--pm-radius-md); background: var(--pm-bg-secondary); } .recovery-code-list code { - padding: 8px 10px; + display: flex; + align-items: center; + justify-content: center; + min-width: 0; + min-height: 44px; + box-sizing: border-box; + padding: 10px 4px; border-radius: 8px; color: var(--pm-text-primary); background: var(--pm-bg-primary); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; + font-size: 12px; + font-weight: 600; + font-variant-numeric: tabular-nums; + line-height: 1.5; text-align: center; - letter-spacing: 0.08em; + letter-spacing: 0; + white-space: nowrap; + user-select: all; } .recovery-prompt-actions { @@ -59,7 +71,13 @@ gap: 10px; } -@media (max-width: 520px) { +@media (max-width: 760px) { + .recovery-code-list { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media (max-width: 420px) { .recovery-code-list { grid-template-columns: 1fr; } diff --git a/frontend/src/views/components/RecoverySetupPrompt/RecoverySetupPrompt.vue b/frontend/src/views/components/RecoverySetupPrompt/RecoverySetupPrompt.vue index 0975fef..fd32a80 100644 --- a/frontend/src/views/components/RecoverySetupPrompt/RecoverySetupPrompt.vue +++ b/frontend/src/views/components/RecoverySetupPrompt/RecoverySetupPrompt.vue @@ -2,7 +2,7 @@ 盾

建议立即配置离线恢复码

- 离线恢复码可以在外部邮箱不可用时帮助您完成账户恢复。恢复码只会显示一次，生成后请保存到安全位置。 + 离线恢复码可以在外部邮箱不可用时帮助您完成账户恢复。请妥善保存，后续可在安全设置中验证本人密码后再次查看有效恢复码。

{ } loading.value = true try { - const response = await http.post("/api/v1/security/credentials/recovery-codes/generate", { count: 10 }) + const response = await http.post("/api/v1/security/credentials/recovery-codes/generate", { count: 12 }) if (response.errorNo !== 0 || !Array.isArray(response.data?.codes)) { throw new Error(response.errorMsg || "离线恢复码生成失败") } diff --git a/frontend/src/views/components/SecuritySettings/SecuritySettings.css b/frontend/src/views/components/SecuritySettings/SecuritySettings.css index 8a85892..9ef5d4c 100644 --- a/frontend/src/views/components/SecuritySettings/SecuritySettings.css +++ b/frontend/src/views/components/SecuritySettings/SecuritySettings.css @@ -70,3 +70,53 @@ .password-verification-row strong { overflow-wrap: anywhere; } + +.recovery-code-panel { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 8px; + margin-top: 16px; +} + +.recovery-code-panel .one-time-tip { + grid-column: 1 / -1; + margin-bottom: 4px; + color: var(--pm-text-secondary); + font-size: 13px; + line-height: 1.6; +} + +.recovery-code { + display: flex; + align-items: center; + justify-content: center; + min-width: 0; + min-height: 44px; + box-sizing: border-box; + padding: 10px 4px; + border: 1px solid var(--pm-border-color); + border-radius: var(--pm-radius-sm); + background: var(--pm-bg-secondary); + color: var(--pm-text-primary); + font-family: ui-monospace, SFMono-Regular, Consolas, monospace; + font-size: 12px; + font-weight: 600; + font-variant-numeric: tabular-nums; + line-height: 1.5; + letter-spacing: 0; + text-align: center; + white-space: nowrap; + user-select: all; +} + +@container settings-content (max-width: 860px) { + .recovery-code-panel { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@container settings-content (max-width: 360px) { + .recovery-code-panel { + grid-template-columns: 1fr; + } +} diff --git a/frontend/src/views/components/SecuritySettings/SecuritySettings.js b/frontend/src/views/components/SecuritySettings/SecuritySettings.js index f02968d..710f797 100644 --- a/frontend/src/views/components/SecuritySettings/SecuritySettings.js +++ b/frontend/src/views/components/SecuritySettings/SecuritySettings.js @@ -251,7 +251,7 @@ export function usePage() { try { await ElMessageBox.confirm('生成新恢复码会撤销当前仍有效的恢复码，请确认已准备好安全保存。', '生成离线恢复码', { type: 'warning' }) if (!isRecoveryViewCurrent(version)) return - const res = await requestRecoveryAction('generate', { count: 10 }, version) + const res = await requestRecoveryAction('generate', { count: 12 }, version) if (!isRecoveryViewCurrent(version)) return if (res.errorNo !== 0 || !Array.isArray(res.data?.codes)) throw new Error(res.errorMsg || '离线恢复码生成失败') generatedCodes.value = res.data.codes diff --git a/frontend/src/views/components/UserManagement/RecoveryCodeDialog/RecoveryCodeDialog.css b/frontend/src/views/components/UserManagement/RecoveryCodeDialog/RecoveryCodeDialog.css index 02e33c9..431f0fd 100644 --- a/frontend/src/views/components/UserManagement/RecoveryCodeDialog/RecoveryCodeDialog.css +++ b/frontend/src/views/components/UserManagement/RecoveryCodeDialog/RecoveryCodeDialog.css @@ -45,17 +45,30 @@ .recovery-code-grid { display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); + grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .recovery-code-grid code { - padding: 9px 10px; + display: flex; + align-items: center; + justify-content: center; + min-width: 0; + min-height: 44px; + box-sizing: border-box; + padding: 10px 4px; border: 1px solid var(--pm-border-color); border-radius: var(--pm-radius-sm); background: var(--pm-bg-secondary); color: var(--pm-text-primary); + font-family: ui-monospace, SFMono-Regular, Consolas, monospace; + font-size: 12px; + font-weight: 600; + font-variant-numeric: tabular-nums; + line-height: 1.5; + letter-spacing: 0; text-align: center; + white-space: nowrap; user-select: all; } @@ -83,7 +96,13 @@ margin-left: 0; } -@media (max-width: 520px) { +@media (max-width: 760px) { + .recovery-code-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media (max-width: 420px) { .recovery-code-grid { grid-template-columns: 1fr; } diff --git a/frontend/src/views/components/UserManagement/RecoveryCodeDialog/RecoveryCodeDialog.js b/frontend/src/views/components/UserManagement/RecoveryCodeDialog/RecoveryCodeDialog.js index 70eef06..960ad3a 100644 --- a/frontend/src/views/components/UserManagement/RecoveryCodeDialog/RecoveryCodeDialog.js +++ b/frontend/src/views/components/UserManagement/RecoveryCodeDialog/RecoveryCodeDialog.js @@ -105,7 +105,7 @@ export function useRecoveryCodeDialog(props, emit) { if (!isCurrentView(version, userID)) return null const result = await http.post('/api/v1/user/security/recovery-codes/generate', { user_id: userID, - count: 10, + count: 12, }) return assertSuccess(result, '安全码生成失败') }) diff --git a/frontend/src/views/components/UserManagement/RecoveryCodeDialog/RecoveryCodeDialog.vue b/frontend/src/views/components/UserManagement/RecoveryCodeDialog/RecoveryCodeDialog.vue index f747f8e..60b1a91 100644 --- a/frontend/src/views/components/UserManagement/RecoveryCodeDialog/RecoveryCodeDialog.vue +++ b/frontend/src/views/components/UserManagement/RecoveryCodeDialog/RecoveryCodeDialog.vue @@ -2,7 +2,7 @@