fix(ai-chat): 修复输入框定位及滚动问题并更新客服名称
This commit is contained in:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user