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

This commit is contained in:
2026-05-13 14:08:58 +08:00
parent 80b18cee0f
commit 39245dfcac
3 changed files with 30 additions and 65 deletions

View File

@@ -119,7 +119,7 @@ export class CustomerService {
} }
/** /**
* 跳转到 AI 客服页面(Dify) * 跳转到 AI智能客服页面(Dify)
*/ */
openDifyService() { openDifyService() {
try { try {
@@ -135,7 +135,7 @@ export class CustomerService {
uni.navigateTo({ uni.navigateTo({
url: aiChatUrl, url: aiChatUrl,
fail: (err) => { fail: (err) => {
console.error('跳转 AI 客服失败:', err); console.error('跳转 AI智能客服失败:', err);
// H5 兜底 // H5 兜底
// #ifdef H5 // #ifdef H5
window.location.href = aiChatUrl; window.location.href = aiChatUrl;
@@ -144,7 +144,7 @@ export class CustomerService {
} }
}); });
} catch (e) { } catch (e) {
console.error('跳转 AI 客服异常:', e); console.error('跳转 AI智能客服异常:', e);
uni.showToast({ title: '打开客服失败', icon: 'none' }); uni.showToast({ title: '打开客服失败', icon: 'none' });
} }
} }
@@ -565,7 +565,7 @@ export class CustomerService {
uni.navigateTo({ uni.navigateTo({
url: aiChatUrl, url: aiChatUrl,
fail: (err) => { fail: (err) => {
console.error('跳转 AI 客服失败:', err); console.error('跳转 AI智能客服失败:', err);
// #ifdef H5 // #ifdef H5
window.location.href = aiChatUrl; window.location.href = aiChatUrl;
// #endif // #endif
@@ -573,7 +573,7 @@ export class CustomerService {
} }
}); });
} catch (e) { } catch (e) {
console.error('跳转 AI 客服异常:', e); console.error('跳转 AI智能客服异常:', e);
uni.showToast({ title: '打开客服失败', icon: 'none' }); uni.showToast({ title: '打开客服失败', icon: 'none' });
} }
} }

View File

@@ -318,7 +318,7 @@
{ {
"path": "ai-chat/index", "path": "ai-chat/index",
"style": { "style": {
"navigationBarTitleText": "AI 客服" "navigationBarTitleText": "AI智能客服"
} }
}, },
{ {

View File

@@ -358,7 +358,7 @@
</view> </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-mask" @click="closeAvatarSelector"></view>
<view class="avatar-selector-panel"> <view class="avatar-selector-panel">
<view class="avatar-selector-header"> <view class="avatar-selector-header">
@@ -523,18 +523,17 @@ export default {
return this.$util.img(IMAGE_CONFIG.aiAvatar); return this.$util.img(IMAGE_CONFIG.aiAvatar);
}, },
chatMessagesStyle() { chatMessagesStyle() {
// 键盘高度是像素值,我们需要为聊天区域添加足够的底部padding // 输入框在 flex 流中,scroll-view 仅在键盘弹出时需要底部padding
// 确保最后一条消息在键盘上方可见 // 键盘收起时:padding = 0(scroll-view 底部自然紧贴输入框顶部)
const extraPadding = 200; // 额外的padding(px) // 键盘弹出时:padding = 键盘高度(避免最后消息被键盘遮挡)
const totalPadding = this.keyboardHeight > 0 ? this.keyboardHeight + extraPadding : 150; // 默认150px
return { return {
paddingBottom: totalPadding + 'px' 'padding-bottom': this.keyboardHeight > 0 ? this.keyboardHeight + 'px' : '0px'
}; };
}, },
inputAreaStyle() { inputAreaStyle() {
return { // 输入框在 flex 流中自然定位到容器底部,无需额外样式
bottom: this.keyboardHeight > 0 ? this.keyboardHeight + 'px' : '0px' // 键盘弹出时由 <textarea adjust-position> 自动处理页面偏移
}; return {};
}, },
canSendMessage() { canSendMessage() {
const hasContent = this.inputText && this.inputText.trim() !== '' const hasContent = this.inputText && this.inputText.trim() !== ''
@@ -543,7 +542,7 @@ export default {
} }
}, },
onShow() { onShow() {
// 如果不是 AI 客服,立即退出并跳转 // 如果不是 AI智能客服,立即退出并跳转
if (customerServiceType !== 'ai') { if (customerServiceType !== 'ai') {
uni.showToast({ title: '当前客服类型不支持此页面', icon: 'none' }); uni.showToast({ title: '当前客服类型不支持此页面', icon: 'none' });
setTimeout(() => { setTimeout(() => {
@@ -622,7 +621,8 @@ export default {
}); });
} }
}, },
// 【新增:会话 ID 本地缓存方法】
// 【新增:会话 ID 本地缓存方法】
saveConversationIdToLocal(convId) { saveConversationIdToLocal(convId) {
if (convId) { if (convId) {
uni.setStorageSync('dify_conversation_id', convId); uni.setStorageSync('dify_conversation_id', convId);
@@ -1461,23 +1461,16 @@ _handleStreamError(msg) {
// 滚动到底部 - 统一使用 scroll-into-view // 滚动到底部 - 统一使用 scroll-into-view
scrollToBottom() { scrollToBottom() {
if (this.scrollTimer) { if (this.messages.length === 0) return
clearTimeout(this.scrollTimer); // 取真实最后一条消息(包括空内容的流式消息)
} const lastMsg = this.messages[this.messages.length - 1]
this.scrollTimer = setTimeout(() => { const lastIndex = this.messages.length - 1
if (this.messages.length > 0) { const key = lastMsg.id || lastMsg.timestamp || lastIndex
const filteredMessages = this.messages.filter(msg => msg.content && msg.content.trim() !== ''); // 先清空再设置,确保 scroll-into-view 重新触发
if (filteredMessages.length > 0) { this.scrollIntoViewId = ''
const lastMessage = filteredMessages[filteredMessages.length - 1]; this.$nextTick(() => {
const lastIndex = this.messages.indexOf(lastMessage); this.scrollIntoViewId = 'msg-' + key + '-' + lastIndex
// 先设为空,再设置新值,确保能触发滚动 })
this.scrollIntoViewId = null;
this.$nextTick(() => {
this.scrollIntoViewId = `msg-${lastMessage.id || lastMessage.timestamp}-${lastIndex}`;
});
}
}
}, 100);
}, },
// 加载更多历史消息 // 加载更多历史消息
@@ -2224,9 +2217,7 @@ $radius-lg: 36rpx;
flex-direction: column; flex-direction: column;
background: #f8f8f8; /* 微信聊天页面背景色 */ background: #f8f8f8; /* 微信聊天页面背景色 */
overflow: hidden; overflow: hidden;
padding-bottom: env(safe-area-inset-bottom);
box-sizing: border-box; box-sizing: border-box;
position: relative;
.chat-messages { .chat-messages {
flex: 1; flex: 1;
@@ -2236,9 +2227,7 @@ $radius-lg: 36rpx;
min-height: 0; /* 重要:防止flex元素溢出 */ min-height: 0; /* 重要:防止flex元素溢出 */
/* 微信小程序专属:聊天消息区域增加底部内边距,确保键盘弹出时最后一条消息可见 */ /* 微信小程序专属:聊天消息区域增加底部内边距,确保键盘弹出时最后一条消息可见 */
/* #ifdef MP-WEIXIN */ /* 由 chatMessagesStyle 动态控制 */
padding-bottom: 300rpx;
/* #endif */
.load-more { .load-more {
text-align: center; text-align: center;
@@ -2897,24 +2886,15 @@ $radius-lg: 36rpx;
} }
} }
/* 输入区域 */ /* 输入区域 */
.input-area { .input-area {
background: white; /* 白色 */ background: white; /* 白色 */
border-top: 1rpx solid #e5e5e5; border-top: 1rpx solid #e5e5e5;
padding: 16rpx 24rpx; padding: 16rpx 24rpx;
/* 确保在微信小程序中紧贴底部 */
flex-shrink: 0; flex-shrink: 0;
/* 微信小程序安全区域适配 */ /* 微信小程序安全区域适配 */
padding-bottom: calc(16rpx + env(safe-area-inset-bottom)); padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
/* 确保输入区域正确显示 */ box-sizing: border-box;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
/* #ifdef MP-WEIXIN */
/* 微信小程序中使用绝对定位,方便动态设置bottom */
/* #endif */
.input-tools { .input-tools {
display: flex; display: flex;
@@ -3053,17 +3033,8 @@ $radius-lg: 36rpx;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
pointer-events: none; /* 让鼠标事件穿透容器,不影响主内容交互 */
z-index: 999; /* 基础弹窗层级 */ z-index: 999; /* 基础弹窗层级 */
/* 子弹窗需要开启 pointer-events,否则点击无效 */
> .tools-popup,
> .voice-popup,
> .avatar-selector-popup,
> .nickname-editor-popup {
pointer-events: auto;
}
/* 昵称编辑弹窗层级最高,避免被其他弹窗遮挡 */ /* 昵称编辑弹窗层级最高,避免被其他弹窗遮挡 */
> .nickname-editor-popup { > .nickname-editor-popup {
z-index: 1001; z-index: 1001;
@@ -3087,7 +3058,6 @@ $radius-lg: 36rpx;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(6rpx);
} }
.nickname-editor-panel { .nickname-editor-panel {
@@ -3237,7 +3207,6 @@ $radius-lg: 36rpx;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(6rpx);
} }
.tools-panel { .tools-panel {
@@ -3348,7 +3317,6 @@ $radius-lg: 36rpx;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(6rpx);
} }
.voice-input-panel { .voice-input-panel {
@@ -3488,7 +3456,6 @@ $radius-lg: 36rpx;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(6rpx);
} }
.avatar-selector-panel { .avatar-selector-panel {
@@ -3867,7 +3834,6 @@ $radius-lg: 36rpx;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(6rpx);
} }
.emoji-panel { .emoji-panel {
@@ -3989,7 +3955,6 @@ $radius-lg: 36rpx;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(6rpx);
} }
.expand-editor-panel { .expand-editor-panel {