From ba169bfeb66e6d50d2d6a88449c4e3179a3224d9 Mon Sep 17 00:00:00 2001
From: smail <likb_blue@163.com>
Date: Sat, 3 Oct 2026 19:58:46 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=AE=89=E5=85=A8=E7=A0=81?=
 =?UTF-8?q?=E4=B8=AD=E7=AD=89=E6=A1=8C=E9=9D=A2=E5=AE=BD=E5=BA=A6=E4=B8=8B?=
 =?UTF-8?q?=E4=B8=89=E8=A1=8C=E5=9B=9B=E5=88=97=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SecuritySettings/SecuritySettings.css     | 36 +++++++++++++++++++
 .../SecuritySettings/SecuritySettings.vue     |  5 ++-
 2 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/frontend/src/views/components/SecuritySettings/SecuritySettings.css b/frontend/src/views/components/SecuritySettings/SecuritySettings.css
index 9ef5d4c..c6b5f2f 100644
--- a/frontend/src/views/components/SecuritySettings/SecuritySettings.css
+++ b/frontend/src/views/components/SecuritySettings/SecuritySettings.css
@@ -110,6 +110,42 @@
 }
 
 @container settings-content (max-width: 860px) {
+  .security-workspace--recovery {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas:
+      "submenu"
+      "main";
+    gap: 16px;
+  }
+
+  .security-workspace--recovery :deep(.settings-submenu) {
+    position: static;
+    padding: 8px;
+    border: 1px solid var(--pm-border-color);
+    border-radius: var(--pm-radius-sm);
+  }
+
+  .security-workspace--recovery :deep(.settings-submenu-list) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+  }
+
+  .security-workspace--recovery :deep(.settings-submenu-item) {
+    white-space: nowrap;
+  }
+
+  .security-workspace--recovery :deep(.settings-submenu-item.active::before) {
+    top: auto;
+    bottom: 2px;
+    left: 10px;
+    right: 10px;
+    width: auto;
+    height: 2px;
+  }
+}
+
+@container settings-content (max-width: 720px) {
   .recovery-code-panel {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
diff --git a/frontend/src/views/components/SecuritySettings/SecuritySettings.vue b/frontend/src/views/components/SecuritySettings/SecuritySettings.vue
index 22ff3de..12672a4 100644
--- a/frontend/src/views/components/SecuritySettings/SecuritySettings.vue
+++ b/frontend/src/views/components/SecuritySettings/SecuritySettings.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="settings-card security-settings-card" v-loading="securityLoading">
-    <div class="security-workspace">
+    <div
+      class="security-workspace"
+      :class="{ 'security-workspace--recovery': selectedSection === 'recovery' }"
+    >
       <SettingsSubmenu
         title="安全设置"
         :items="sectionOptions"