From 6e17169ac4626ae8f1cdab0f2f16818bc934c8ed Mon Sep 17 00:00:00 2001
From: CNWei <t6g888@163.com>
Date: Thu, 5 Nov 2026 19:50:21 +0800
Subject: [PATCH] =?UTF-8?q?fix(mobile):=20=E7=AA=84=E5=B1=8F=E4=B8=BB?=
 =?UTF-8?q?=E5=86=85=E5=AE=B9=E8=A2=AB=E6=8C=A4=E5=87=BA=E8=A7=86=E5=8F=A3?=
 =?UTF-8?q?=EF=BC=8C=E4=BE=A7=E6=A0=8F=E4=B8=8E=E9=A1=B5=E5=A4=B4=E9=80=82?=
 =?UTF-8?q?=E9=85=8D=E6=89=8B=E6=9C=BA/=E5=B9=B3=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- ≤1100 时滚动容器不换行、aside/main 不再锁 100% 高（之前 main 被排到视口右侧，完全看不见）
- 平板：资料卡 + 导航卡两列并排；手机：只留导航卡（资料/服务卡隐藏）
- 手机页头：隐藏跑马灯，改两列（品牌 + 操作图标），高度 56
- 删掉一直没生效的 .sidebar 网格规则（被更高优先级的 flex 规则盖住）
---
 stash-web/src/App.css | 64 ++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 57 insertions(+), 7 deletions(-)

diff --git a/stash-web/src/App.css b/stash-web/src/App.css
index b984252..8a2a8bc 100644
--- a/stash-web/src/App.css
+++ b/stash-web/src/App.css
@@ -837,15 +837,13 @@
 /* ---------- 响应式 ---------- */
 
 @media (max-width: 1100px) {
-  .sidebar {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: var(--su-space-3);
-    padding: 0 var(--su-space-4) var(--su-space-4);
+  /* 单列堆叠：滚动容器不能换行，否则侧栏占满高度后主内容会被排到视口右侧（看不见） */
+  #page-scroll {
+    flex-wrap: nowrap;
   }
 
   .profile-card {
-    grid-row: span 2;
+    grid-row: auto;
   }
 
   .service-panel {
@@ -862,12 +860,26 @@
 }
 
 @media (max-width: 820px) {
-  .sidebar {
+  /* 手机上只留分组导航：资料卡 / 本地服务卡太占地，导航还留着方便进分组 */
+  #page-scroll > aside .profile-card,
+  #page-scroll > aside .service-panel {
+    display: none;
+  }
+
+  /* 手机上页头只留品牌 + 操作图标：跑马灯放不下，会盖到下面的搜索条上 */
+  .header-ticker-slot {
     display: none;
   }
 
   .site-header-inner {
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: var(--su-space-2);
     height: 56px;
+    padding: 0 var(--su-space-3);
+  }
+
+  .header-actions {
+    gap: var(--su-space-1);
   }
 }
 
@@ -1607,3 +1619,41 @@ html.theme-transition .site-background {
     grid-template-columns: minmax(0, 1fr);
   }
 }
+
+/* ---------- 窄屏覆盖（放文件末尾：要盖过上面的侧栏基础规则） ---------- */
+
+@media (max-width: 1100px) {
+  /* 侧栏 / 主内容在窄屏都不锁 100% 高、不吸顶；放在文件末尾才压得过上面的基础规则 */
+  #page-scroll > aside {
+    position: static;
+    align-self: stretch;
+    height: auto;
+    max-height: none;
+    overflow: visible;
+  }
+
+  #page-scroll > main {
+    height: auto;
+    max-height: none;
+  }
+
+  #page-scroll > aside .sidebar-wrap {
+    height: auto;
+    padding: 0 var(--su-space-4) var(--su-space-4);
+  }
+
+  /* 资料卡 + 导航卡并排，少占一屏 */
+  #page-scroll > aside .sidebar-home {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: var(--su-space-3);
+    height: auto;
+  }
+}
+
+@media (max-width: 820px) {
+  /* 手机上只留导航卡，单列铺开 */
+  #page-scroll > aside .sidebar-home {
+    display: block;
+  }
+}