fix(ai-chat): 修复输入框定位及滚动问题并更新客服名称
This commit is contained in:
@@ -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' });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -318,7 +318,7 @@
|
|||||||
{
|
{
|
||||||
"path": "ai-chat/index",
|
"path": "ai-chat/index",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "AI 客服"
|
"navigationBarTitleText": "AI智能客服"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user