fix(ai-chat): 修复输入框定位及滚动问题并更新客服名称

2026-05-13 14:08:58 +08:00
parent 80b18cee0f
commit 39245dfcac
3 changed files with 30 additions and 65 deletions
--- a/common/js/customer-service.js
+++ b/common/js/customer-service.js
@@ -119,7 +119,7 @@ export class CustomerService {
    }

    /**
-     * 跳转到 AI 客服页面（Dify）
+     * 跳转到 AI智能客服页面（Dify）
     */
    openDifyService() {
        try {
@@ -135,7 +135,7 @@ export class CustomerService {
            uni.navigateTo({
                url: aiChatUrl,
                fail: (err) => {
-                    console.error('跳转 AI 客服失败:', err);
+                    console.error('跳转 AI智能客服失败:', err);
                    // H5 兜底
                    // #ifdef H5
                    window.location.href = aiChatUrl;
@@ -144,7 +144,7 @@ export class CustomerService {
                }
            });
        } catch (e) {
-            console.error('跳转 AI 客服异常:', e);
+            console.error('跳转 AI智能客服异常:', e);
            uni.showToast({ title: '打开客服失败', icon: 'none' });
        }
    }
@@ -565,7 +565,7 @@ export class CustomerService {
            uni.navigateTo({
                url: aiChatUrl,
                fail: (err) => {
-                    console.error('跳转 AI 客服失败:', err);
+                    console.error('跳转 AI智能客服失败:', err);
                    // #ifdef H5
                    window.location.href = aiChatUrl;
                    // #endif
@@ -573,7 +573,7 @@ export class CustomerService {
                }
            });
        } catch (e) {
-            console.error('跳转 AI 客服异常:', e);
+            console.error('跳转 AI智能客服异常:', e);
            uni.showToast({ title: '打开客服失败', icon: 'none' });
        }
    }
--- a/pages.json
+++ b/pages.json
@@ -318,7 +318,7 @@
 				{
 					"path": "ai-chat/index",
 					 "style": {
-					 "navigationBarTitleText": "AI 客服"
+					 "navigationBarTitleText": "AI智能客服"
 					}
 				},
 				{
--- a/pages_tool/ai-chat/ai-chat-message.vue
+++ b/pages_tool/ai-chat/ai-chat-message.vue
@@ -358,7 +358,7 @@
    </view>
    
    <!-- 头像选择弹窗 -->
-    <view v-if="showAvatarSelector" class="avatar-selector-popup" style="pointer-events: auto;">
+    <view v-if="showAvatarSelector" class="avatar-selector-popup">
      <view class="avatar-selector-mask" @click="closeAvatarSelector"></view>
      <view class="avatar-selector-panel">
        <view class="avatar-selector-header">
@@ -523,18 +523,17 @@ export default {
      return this.$util.img(IMAGE_CONFIG.aiAvatar);
    },
    chatMessagesStyle() {
-      // 键盘高度是像素值，我们需要为聊天区域添加足够的底部padding
-      // 确保最后一条消息在键盘上方可见
-      const extraPadding = 200; // 额外的padding(px)
-      const totalPadding = this.keyboardHeight > 0 ? this.keyboardHeight + extraPadding : 150; // 默认150px
+      // 输入框在 flex 流中，scroll-view 仅在键盘弹出时需要底部padding
+      // 键盘收起时：padding = 0（scroll-view 底部自然紧贴输入框顶部）
+      // 键盘弹出时：padding = 键盘高度（避免最后消息被键盘遮挡）
      return {
-        paddingBottom: totalPadding + 'px'
+        'padding-bottom': this.keyboardHeight > 0 ? this.keyboardHeight + 'px' : '0px'
      };
    },
    inputAreaStyle() {
-      return {
-        bottom: this.keyboardHeight > 0 ? this.keyboardHeight + 'px' : '0px'
-      };
+      // 输入框在 flex 流中自然定位到容器底部，无需额外样式
+      // 键盘弹出时由 <textarea adjust-position> 自动处理页面偏移
+      return {};
    },
    canSendMessage() {
      const hasContent = this.inputText && this.inputText.trim() !== ''
@@ -543,7 +542,7 @@ export default {
    }
  },
   onShow() {
-     // 如果不是 AI 客服，立即退出并跳转
+     // 如果不是 AI智能客服，立即退出并跳转
     if (customerServiceType !== 'ai') {
       uni.showToast({ title: '当前客服类型不支持此页面', icon: 'none' });
       setTimeout(() => {
@@ -622,7 +621,8 @@ export default {
        });
      }
    },
-	  // 【新增：会话 ID 本地缓存方法】
+
+    // 【新增：会话 ID 本地缓存方法】
 	   saveConversationIdToLocal(convId) {
 	      if (convId) {
 	        uni.setStorageSync('dify_conversation_id', convId);
@@ -1461,23 +1461,16 @@ _handleStreamError(msg) {
    
    // 滚动到底部 - 统一使用 scroll-into-view
    scrollToBottom() {
-      if (this.scrollTimer) {
-        clearTimeout(this.scrollTimer);
-      }
-      this.scrollTimer = setTimeout(() => {
-        if (this.messages.length > 0) {
-          const filteredMessages = this.messages.filter(msg => msg.content && msg.content.trim() !== '');
-          if (filteredMessages.length > 0) {
-            const lastMessage = filteredMessages[filteredMessages.length - 1];
-            const lastIndex = this.messages.indexOf(lastMessage);
-            // 先设为空，再设置新值，确保能触发滚动
-            this.scrollIntoViewId = null;
-            this.$nextTick(() => {
-              this.scrollIntoViewId = `msg-${lastMessage.id || lastMessage.timestamp}-${lastIndex}`;
-            });
-          }
-        }
-      }, 100);
+      if (this.messages.length === 0) return
+      // 取真实最后一条消息（包括空内容的流式消息）
+      const lastMsg = this.messages[this.messages.length - 1]
+      const lastIndex = this.messages.length - 1
+      const key = lastMsg.id || lastMsg.timestamp || lastIndex
+      // 先清空再设置，确保 scroll-into-view 重新触发
+      this.scrollIntoViewId = ''
+      this.$nextTick(() => {
+        this.scrollIntoViewId = 'msg-' + key + '-' + lastIndex
+      })
    },
    
    // 加载更多历史消息
@@ -2224,9 +2217,7 @@ $radius-lg: 36rpx;
  flex-direction: column;
  background: #f8f8f8; /* 微信聊天页面背景色 */
  overflow: hidden;
-  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: border-box;
-  position: relative;

  .chat-messages {
    flex: 1;
@@ -2236,9 +2227,7 @@ $radius-lg: 36rpx;
    min-height: 0; /* 重要：防止flex元素溢出 */
    
    /* 微信小程序专属：聊天消息区域增加底部内边距，确保键盘弹出时最后一条消息可见 */
-    /* #ifdef MP-WEIXIN */
-    padding-bottom: 300rpx;
-    /* #endif */
+    /* 由 chatMessagesStyle 动态控制 */
    
    .load-more {
      text-align: center;
@@ -2897,24 +2886,15 @@ $radius-lg: 36rpx;
    }
  }

-  /* 输入区域 */
+    /* 输入区域 */
  .input-area {
    background: white; /* 白色 */
    border-top: 1rpx solid #e5e5e5;
    padding: 16rpx 24rpx;
-    /* 确保在微信小程序中紧贴底部 */
    flex-shrink: 0;
    /* 微信小程序安全区域适配 */
    padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
-    /* 确保输入区域正确显示 */
-    position: fixed;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 10;
-    /* #ifdef MP-WEIXIN */
-    /* 微信小程序中使用绝对定位，方便动态设置bottom */
-    /* #endif */
+    box-sizing: border-box;

    .input-tools {
      display: flex;
@@ -3053,17 +3033,8 @@ $radius-lg: 36rpx;
    left: 0;
    right: 0;
    bottom: 0;
-    pointer-events: none; /* 让鼠标事件穿透容器，不影响主内容交互 */
    z-index: 999; /* 基础弹窗层级 */
    
-    /* 子弹窗需要开启 pointer-events，否则点击无效 */
-    > .tools-popup,
-    > .voice-popup,
-    > .avatar-selector-popup,
-    > .nickname-editor-popup {
-      pointer-events: auto;
-    }
-    
    /* 昵称编辑弹窗层级最高，避免被其他弹窗遮挡 */
    > .nickname-editor-popup {
      z-index: 1001;
@@ -3087,7 +3058,6 @@ $radius-lg: 36rpx;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
-    backdrop-filter: blur(6rpx);
  }

  .nickname-editor-panel {
@@ -3237,7 +3207,6 @@ $radius-lg: 36rpx;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.4);
-      backdrop-filter: blur(6rpx);
    }

    .tools-panel {
@@ -3348,7 +3317,6 @@ $radius-lg: 36rpx;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.4);
-      backdrop-filter: blur(6rpx);
    }

    .voice-input-panel {
@@ -3488,7 +3456,6 @@ $radius-lg: 36rpx;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.4);
-      backdrop-filter: blur(6rpx);
    }

    .avatar-selector-panel {
@@ -3867,7 +3834,6 @@ $radius-lg: 36rpx;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
-    backdrop-filter: blur(6rpx);
  }

  .emoji-panel {
@@ -3989,7 +3955,6 @@ $radius-lg: 36rpx;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
-    backdrop-filter: blur(6rpx);
  }
  
  .expand-editor-panel {