From 8338204bcc63af921771574e1be8b968cd59297f Mon Sep 17 00:00:00 2001
From: Peanut <peanut_hzm@163.com>
Date: Tue, 7 Apr 2026 22:26:17 +0800
Subject: [PATCH] =?UTF-8?q?fix(mini-program):=20=E5=BD=BB=E5=BA=95?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=89=A7=E6=9C=AC=E8=AF=A6=E6=83=85=E9=A1=B5?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=E8=B6=85=E5=87=BA=E5=B1=8F=E5=B9=95=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

根本原因:
- height: 100vh 在小程序中包含状态栏区域，导致内容超出可视范围
- CSS env(safe-area-inset-top) 和 max() 函数在 uni-app 中支持有限

修复方案:
- 改用 height: 100% 替代 100vh
- 添加独立的状态栏占位 view，高度从 App.vue 存储的全局值读取
- 移除对 CSS env() 和 max() 函数的依赖
- header 顶部 padding 改用固定值 12px
---
 .../src/pages/main/ScriptDetailView.vue       | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/mini-program/src/pages/main/ScriptDetailView.vue b/mini-program/src/pages/main/ScriptDetailView.vue
index ad14eaa..6eafb04 100644
--- a/mini-program/src/pages/main/ScriptDetailView.vue
+++ b/mini-program/src/pages/main/ScriptDetailView.vue
@@ -1,5 +1,8 @@
 <template>
   <view class="detail-view">
+    <!-- 状态栏占位 -->
+    <view :style="{ height: statusBarHeight + 'px' }" class="status-bar-placeholder"></view>
+
     <view class="detail-header">
       <view class="header-left" @click="goBack">
         <text class="back-icon">←</text>
@@ -47,10 +50,14 @@ import Markdown from '../../components/Markdown.vue'
 const store = useAppStore()
 const script = ref(null)
 const fullContent = ref('')
+const statusBarHeight = ref(0)
 
 const scripts = computed(() => store.scripts || [])
 
 onMounted(() => {
+  // 获取状态栏高度（从 App.vue 存储的全局值）
+  statusBarHeight.value = uni.getStorageSync('statusBarHeight') || 20
+
   // 获取剧本 ID
   const pages = getCurrentPages()
   const currentPage = pages[pages.length - 1]
@@ -79,17 +86,23 @@ const goBack = () => {
 .detail-view {
   display: flex;
   flex-direction: column;
-  height: 100vh;
-  overflow: hidden;
+  height: 100%;
   background: linear-gradient(180deg, #0F071A 0%, #1A0B2E 50%, #0F071A 100%);
 }
 
+/* 状态栏占位 */
+.status-bar-placeholder {
+  width: 100%;
+  flex-shrink: 0;
+  background: transparent;
+}
+
 /* ==================== 顶部导航栏 ==================== */
 .detail-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: max(12px, env(safe-area-inset-top)) 32rpx 24rpx;
+  padding: 12px 32rpx 24rpx;
   background: rgba(168, 85, 247, 0.1);
   border-bottom: 1px solid rgba(168, 85, 247, 0.2);
   flex-shrink: 0;