修正多处问题

gym-manage-uniapp/components/index/PageHeader.vue

@@ -1,17 +1,23 @@
 <template>
-  <view class="tab-page__header" :style="{ padding: `${statusBarHeight}rpx`, height: `${statusBarHeight + 80}rpx` }">
+  <!-- 状态栏占位区（仅 App 端生效，H5/小程序无状态栏概念） -->
+  <view class="tab-page__status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
+  <!-- 导航栏主体 -->
+  <view class="tab-page__header">
     <view v-if="showBack" :class="['tab-page__back-btn', { 'tab-page__back-btn--animate': isAnimating }]" @tap="goBack">
       <text class="tab-page__back-icon">‹</text>
     </view>
     <view class="tab-page__title-wrap">
       <text class="tab-page__title">{{ title }}</text>
-      <text class="tab-page__subtitle">{{ subtitle }}</text>
+      <text v-if="subtitle" class="tab-page__subtitle">{{ subtitle }}</text>
+    </view>
+    <view v-if="$slots.right" class="tab-page__right">
+      <slot name="right"></slot>
     </view>
   </view>
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, computed } from 'vue'
 
 const props = defineProps({
   title: {
@@ -29,11 +35,19 @@ const props = defineProps({
 })
 
 const isAnimating = ref(false)
-const statusBarHeight = ref(20)
+const statusBarHeight = ref(0)
 
 onMounted(() => {
+  // #ifdef APP-PLUS
+  // App 端获取真实状态栏高度（px）
   const sysInfo = uni.getSystemInfoSync()
-  statusBarHeight.value = sysInfo.statusBarHeight || 20
+  statusBarHeight.value = sysInfo.statusBarHeight || 0
+  // #endif
+  // #ifndef APP-PLUS
+  // H5/小程序：状态栏由浏览器或框架处理，不额外占位
+  statusBarHeight.value = 0
+  // #endif
+
   if (props.showBack) {
     isAnimating.value = true
   }
@@ -51,10 +65,16 @@ function goBack() {
 </script>
 
 <style lang="scss" scoped>
+/* 状态栏占位：仅在 App 端有高度，H5/小程序为 0，背景继承页面 */
+.tab-page__status-bar {
+  width: 100%;
+}
+
 .tab-page__header {
-  padding: 0 32rpx;
+  padding: 0 32rpx 24rpx 32rpx;
   display: flex;
   align-items: center;
+  height: 88rpx;
   position: relative;
 }
 
@@ -114,4 +134,11 @@ function goBack() {
   font-size: 24rpx;
   color: $text-muted;
 }
+
+.tab-page__right {
+  margin-left: 16rpx;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
 </style>