修复配置窄屏导航堆叠

frontend/src/views/components/ConfigSettings/ConfigSettings.css

@@ -99,7 +99,7 @@
 }
 .config-workspace {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 196px;
+  grid-template-columns: minmax(0, 1fr) clamp(156px, 30%, 196px);
   grid-template-areas: "main submenu";
   align-items: start;
   gap: 16px;
@@ -378,6 +378,62 @@
     flex-direction: column;
     gap: 10px;
   }
+}
+
+@media (min-width: 769px) {
+  .config-navigation {
+    gap: 10px;
+  }
+
+  .config-navigation > :deep(.settings-submenu) {
+    position: static;
+    padding: 2px 0 2px 10px;
+    border: 0;
+    border-left: 1px solid var(--pm-border-color);
+    border-radius: 0;
+    background: transparent;
+  }
+
+  .config-navigation > :deep(.settings-submenu-heading) {
+    flex-direction: row-reverse;
+    padding: 2px 8px 8px;
+  }
+
+  .config-navigation > :deep(.settings-submenu-list) {
+    display: grid;
+    gap: 2px;
+    padding: 0;
+  }
+
+  .config-navigation > :deep(.settings-submenu-entry),
+  .config-navigation > :deep(.settings-submenu-item) {
+    width: 100%;
+  }
+
+  .config-navigation > :deep(.settings-submenu-item) {
+    white-space: normal;
+  }
+
+  .config-navigation > :deep(.has-children) {
+    margin-top: 6px;
+    padding: 4px;
+  }
+
+  .config-navigation > :deep(.settings-tertiary-list) {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .config-navigation > :deep(.settings-submenu-item.active::before) {
+    top: 10px;
+    right: auto;
+    bottom: 10px;
+    left: -11px;
+    width: 3px;
+    height: auto;
+  }
+}
+
+@media (max-width: 768px) {
   .config-workspace {
     grid-template-columns: minmax(0, 1fr);
     grid-template-areas:
@@ -385,8 +441,8 @@
       "main";
     gap: 16px;
   }
+
   .config-navigation {
-    gap: 12px;
     position: static;
   }
 }

frontend/src/views/components/HomeHeader/HomeHeader.vue

@@ -20,7 +20,7 @@
   <!-- 设置抽屉保留右侧导航，一级分类不影响内部标签页。 -->
   <el-drawer
     v-model="globalStatus.settingsDrawerVisible"
-    :size="isMobile ? '100%' : '50vw'"
+    :size="isMobile ? '100%' : 'min(100vw, max(50vw, 820px))'"
     :title="lang.settings"
     class="settings-drawer"
     :with-header="true"

test/frontend/settings-menu.test.mjs

@@ -120,3 +120,17 @@ test('两级菜单分别提供选中、非选中悬停和键盘焦点样式', ()
     assert.match(read(`${name}/${name}.css`), /@container settings-content \(max-width: 560px\)/)
   }
 })
+
+test('配置管理只在真实移动端将内部导航移到内容顶部', () => {
+  const header = read('HomeHeader/HomeHeader.vue')
+  const config = read('ConfigSettings/ConfigSettings.css')
+  const containerStart = config.indexOf('@container settings-content (max-width: 560px)')
+  const desktopStart = config.indexOf('@media (min-width: 769px)', containerStart)
+  const containerRule = config.slice(containerStart, desktopStart)
+  assert.match(header, /min\(100vw, max\(50vw, 820px\)\)/)
+  assert.match(config, /grid-template-areas: "main submenu"/)
+  assert.match(config, /@media \(min-width: 769px\)[\s\S]*grid-template-columns: minmax\(0, 1fr\)/)
+  assert.match(config, /@media \(max-width: 768px\)[\s\S]*"submenu"[\s\S]*"main"/)
+  assert.ok(containerStart >= 0 && desktopStart > containerStart)
+  assert.doesNotMatch(containerRule, /config-workspace|config-navigation/)
+})