修复安全码中等桌面宽度下三行四列布局

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));
   }

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"