From 02ebbc1c96c91ad4e505af6eb5ad47e9b3a2a1d9 Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Thu, 22 Oct 2026 08:57:00 +0000
Subject: [PATCH] =?UTF-8?q?feat(dashboard):=20=E7=A7=BB=E5=8A=A8=E7=AB=AF?=
 =?UTF-8?q?=E4=BB=AA=E8=A1=A8=E7=9B=98=E5=90=AF=E7=94=A8=E6=B2=89=E6=B5=B8?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81=E6=A0=8F=EF=BC=8C=E6=BB=9A=E5=8A=A8=E5=86=85?=
 =?UTF-8?q?=E5=AE=B9=E5=8F=AF=E7=A9=BF=E8=BF=87=E7=8A=B6=E6=80=81=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/assets/js/App.vue                     | 17 ++++++++++++++++-
 resources/assets/sass/pages/page-dashboard.scss | 12 +++++++++++-
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/resources/assets/js/App.vue b/resources/assets/js/App.vue
index daa59790f..3f7e82947 100755
--- a/resources/assets/js/App.vue
+++ b/resources/assets/js/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <div id="app" class="app-view">
+    <div id="app" class="app-view" :class="{'immersive-status': immersiveStatus}">
         <!--顶部状态栏-->
         <div class="child-status-bar"></div>
 
@@ -72,6 +72,13 @@
         background-color: var(--status-bar-color);
     }
 
+    // 沉浸状态栏：隐藏占位，页面内容延伸到状态栏下方
+    &.immersive-status {
+        .child-status-bar {
+            display: none;
+        }
+    }
+
     .child-navigation-bar {
         flex-shrink: 0;
         height: var(--navigation-bar-height);
@@ -171,6 +178,14 @@ export default {
             return null
         },
 
+        /**
+         * 移动端仪表盘使用沉浸状态栏，滚动内容可穿过状态栏
+         * @returns {boolean}
+         */
+        immersiveStatus({routeName, windowPortrait}) {
+            return windowPortrait && routeName === 'manage-dashboard'
+        },
+
         navigationColor({routeName, windowLandscape, mobileTabbar}) {
             if (!routeName) {
                 return null
diff --git a/resources/assets/sass/pages/page-dashboard.scss b/resources/assets/sass/pages/page-dashboard.scss
index 4322f868f..1df29d5b7 100644
--- a/resources/assets/sass/pages/page-dashboard.scss
+++ b/resources/assets/sass/pages/page-dashboard.scss
@@ -1922,8 +1922,18 @@
 // ==================== 竖屏适配 ====================
 body.window-portrait {
     .page-dashboard {
+        // 沉浸状态栏：滚动区域从屏幕顶部开始，内容让出状态栏高度（见 App.vue immersiveStatus）
+        .dashboard-warning {
+            top: var(--status-bar-height);
+            margin-top: var(--status-bar-height);
+        }
+
+        .dashboard-warning + .dashboard-body {
+            padding-top: 16px;
+        }
+
         .dashboard-body {
-            padding: 16px 12px 24px;
+            padding: calc(var(--status-bar-height) + 16px) 12px 24px;
             gap: 16px;
         }