LiangZhiYUMao/pages/message/chat.vue

@@ -44,19 +44,20 @@
 	  
 	  
     <!-- 顶部导航 -->
-    <view class="chat-header">
+    <view class="chat-header" :style="{paddingTop: statusBarHeight + 'px', height: navBarHeight + 'px'}">
       <view class="header-left" @click="goBack">
         <text class="icon-back">←</text>
       </view>
       <view class="header-center">
-        <text class="chat-title">{{ targetUserName }}</text>
+        <view class="title-wrapper" @click="showMoreOptions">
+          <text class="chat-title">{{ targetUserName }}</text>
+          <text class="title-arrow">▾</text>
+        </view>
         <text class="online-status" :class="{ online: isTargetOnline }">
           {{ isTargetOnline ? '在线' : '离线' }}
         </text>
       </view>
-      <view class="header-right" @click="showMoreOptions">
-        <text class="icon-more">⋯</text>
-      </view>
+      <view class="header-right"></view>
     </view>
 
     <!-- 消息列表 -->
@@ -272,6 +273,8 @@ import TIM from 'tim-wx-sdk';
 export default {
   data() {
     return {
+	  statusBarHeight: 0, // 状态栏高度，用于适配刘海屏
+	  navBarHeight: 44, // 导航栏高度
 	  isBlockedByTarget: false,
       userId: null,
       userAvatar: '',
@@ -330,6 +333,26 @@ export default {
   async onLoad(options) {
     console.log('=== 聊天页面加载 ===');
     
+    // 获取系统信息，适配刘海屏
+    const systemInfo = uni.getSystemInfoSync();
+    this.statusBarHeight = systemInfo.statusBarHeight || 0;
+    
+    // #ifdef MP-WEIXIN
+    // 微信小程序获取胶囊按钮位置，计算导航栏高度
+    try {
+      const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
+      // 导航栏高度 = 胶囊按钮底部 + 胶囊按钮顶部距离状态栏的距离
+      this.navBarHeight = (menuButtonInfo.top - this.statusBarHeight) * 2 + menuButtonInfo.height;
+      console.log('胶囊按钮信息:', menuButtonInfo);
+      console.log('导航栏高度:', this.navBarHeight);
+    } catch (e) {
+      console.log('获取胶囊按钮信息失败:', e);
+      this.navBarHeight = 44;
+    }
+    // #endif
+    
+    console.log('状态栏高度:', this.statusBarHeight);
+    
     // 严格验证登录状态
     const token = uni.getStorageSync('token');
     const userInfo = uni.getStorageSync('userInfo');
@@ -2617,6 +2640,7 @@ export default {
   align-items: center;
   justify-content: space-between;
   padding: 20rpx 30rpx;
+  /* paddingTop 通过动态样式设置，适配刘海屏 */
   background-color: #fff;
   border-bottom: 1px solid #e5e5e5;
 }
@@ -2625,21 +2649,34 @@ export default {
   width: 80rpx;
 }
 
-.icon-back, .icon-more {
+.icon-back {
   font-size: 40rpx;
 }
 
 .header-center {
   flex: 1;
   text-align: center;
+  position: relative;
+}
+
+.title-wrapper {
+  display: inline-flex;
+  align-items: center;
+  gap: 6rpx;
+  position: relative;
 }
 
 .chat-title {
-  display: block;
   font-size: 36rpx;
   font-weight: bold;
 }
 
+.title-arrow {
+  font-size: 39rpx;
+  color: #999;
+}
+
+
 .online-status {
   display: block;
   font-size: 24rpx;