Uniapp/lucky_shop
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore：能正常运行

Browse Source
This commit is contained in:
jinhhanhan
2025-12-17 11:17:50 +08:00
parent ca74d4f8e5
commit 2a0489d4b2
21 changed files with 5928 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

650
pages_tool/ai-chat/index.vue Normal file
View File

@@ -0,0 +1,650 @@
<template>
<view class="ai-chat-page" :style="wrapperPageStyle">
<!--自定义导航头部 -->
<view class="custom-navbar" ref="pageHeader" v-if="showCustomNavbar">
<view class="header-left">
<button class="back-btn" v-show="showBackButton" @click="goBack">
<text class="iconfont icon-back"></text>
</button>
<!-- 占位元素，确保布局平衡 -->
<view v-show="!showBackButton" class="placeholder"></view>
</view>
<view class="header-center">
<text class="header-subtitle">在线为您服务</text>
</view>
<view class="header-right">
<button class="menu-btn" v-show="showMenuButton" @click="showMenu">
<text class="iconfont icon-ellipsis"></text>
</button>
<!-- 占位元素，确保布局平衡 -->
<view v-show="!showMenuButton" class="placeholder"></view>
</view>
</view>
<!-- 聊天内容区域 -->
<view class="chat-content"
:style="wrapperChatContentStyle"
>
<!-- AI聊天组件 -->
<ai-chat-message
ref="chat"
:initial-messages="initialMessages"
:user-avatar="userAvatar"
:ai-avatar="aiAvatar"
@message-sent="onMessageSent"
@ai-response="onAIResponse"
@action-click="onActionClick"
@history-loaded="onHistoryLoaded"
@file-preview="onFilePreview"
@audio-play="onAudioPlay"
@audio-pause="onAudioPause"
@video-play="onVideoPlay"
@video-pause="onVideoPause"
@link-open="onLinkOpen"
@product-view="onProductView"
@input-change="onInputChange" />
</view>
</view>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
import navigationHelper from '@/common/js/navigation';
import { EventSafety } from '@/common/js/event-safety';
export default {
data() {
return {
initialMessages: [
{
id: 1,
role: 'ai',
type: 'text',
content: '您好！我是AI智能客服，很高兴为您服务！\n\n我可以帮您：\n• 解答产品相关问题\n• 处理订单问题\n• 提供技术支持\n• 推荐相关商品\n\n请告诉我您需要什么帮助？',
timestamp: Date.now() - 60000,
actions: [
{ type: 'like', icon: 'icon-dianzan1', text: '喜欢', count: 0 },
{ type: 'dislike', icon: 'icon-dianzan1', text: '不喜欢', count: 0 }
]
}
],
// --- 系统导航栏/状态栏相关 ---
navBarHeight: 44, // uni-page-head 系统导航栏，默认高度为44px
statusBarHeight: 0, // 状态栏高度，默认0
// --- 自定义导航栏 ---
showCustomNavbar: true, // 是否显示自定义导航栏
showBackButton: false, // 是否显示返回按钮
showMenuButton: true, // 是否显示设置菜单按钮
// --- 聊天内容区域 ---
scrollViewHeight: '0px',
// 事件处理器引用（用于清理）
safeEventHandlers: new Map()
}
},
computed: {
...mapGetters([
'globalAIKefuConfig'
]),
/// ---- 关于AI客服的配置，支持远程配置 ----
userAvatar() {
return this.globalAIKefuConfig?.userAvatar || '/static/images/user-avatar.png'
},
aiAvatar() {
return this.globalAIKefuConfig?.aiAvatar || '/static/images/ai-avatar.png'
},
/// ---- others ----
containerHeight() {
return `calc(100vh - ${this.navBarHeight + this.statusBarHeight}px)`
},
wrapperPageStyle() {
// #ifdef H5
return `top: ${this.navBarHeight + 'px'};`
// #endif
// #ifdef MP-WEIXIN
return `top: -1px;` // 微信小程序需要上移1px, 否则与系统导航栏出现1px的空隙
// #endif
return ``
},
wrapperChatContentStyle() {
return {
height: this.containerHeight,
paddingTop: this.showCustomNavbar ? '0' : (this.navHeight + 'px')
}
}
},
async onLoad(options) {
await this.initPage(options)
},
async onReady() {
await this.initNavigation()
},
onShow() {
},
onHide() {
},
onUnload() {
this.cleanup()
},
methods: {
// ========== 安全事件处理 ==========
setupSafeEventListeners() {
// 使用 EventSafety 包装事件处理器
const safeHandlers = {
serviceRequest: EventSafety.wrapEventHandler(
this.handleServiceRequest.bind(this),
{ onError: this.handleEventError.bind(this) }
),
navigationRequest: EventSafety.wrapEventHandler(
this.handleNavigationRequest.bind(this),
{ onError: this.handleEventError.bind(this) }
),
componentInteraction: EventSafety.wrapEventHandler(
this.handleComponentInteraction.bind(this),
{ onError: this.handleEventError.bind(this) }
)
}
// 注册事件监听
this.$on('service.requestComponentInfo', safeHandlers.serviceRequest)
this.$on('navigation.requestInfo', safeHandlers.navigationRequest)
this.$on('component.interaction', safeHandlers.componentInteraction)
// 保存处理器引用用于清理
this.safeEventHandlers.set('serviceRequest', safeHandlers.serviceRequest)
this.safeEventHandlers.set('navigationRequest', safeHandlers.navigationRequest)
this.safeEventHandlers.set('componentInteraction', safeHandlers.componentInteraction)
},
setupNavigationEvents() {
// 监听窗口大小变化
uni.onWindowResize((res) => {
console.log('窗口大小变化:', res.size)
this.calculateScrollViewHeight()
})
},
// ========== 事件处理方法 ==========
async handleServiceRequest(event) {
console.log('处理服务请求:', EventSafety.extractEventData(event))
// 安全地检查事件目标
if (event.matches('.service-component') ||
event.detail?.componentType === 'service') {
await this.processServiceRequest(event)
}
},
async handleNavigationRequest(event) {
console.log('处理导航请求:', event.type)
// 提供导航信息
this.emitNavigationInfo(event)
},
handleComponentInteraction(event) {
console.log('处理组件交互:', event.detail)
// 安全地处理组件交互
this.processComponentInteraction(event)
},
handleEventError(error, event) {
console.error('事件处理错误:', {
error: error.message,
eventType: event?.type,
component: this.$options.name
})
this.showError('操作失败，请重试')
},
// ========== 初始化页面 ==========
async initPage(options = {}) {
this.$langConfig.title('AI智能客服');
this.initChat()
},
// 初始化导航栏相关配置
async initNavigation() {
try {
// 获取导航栏高度
this.navBarHeight = await navigationHelper.getNavigationHeight(this, {forceRefresh: false})
// 获取状态栏高度
this.statusBarHeight = navigationHelper.getStatusBarHeight()
// 计算滚动视图高度
this.calculateScrollViewHeight()
// 注册导航相关事件
this.setupNavigationEvents()
} catch (error) {
console.error('初始化导航栏失败:', error)
this.setFallbackNavigationValues()
}
},
// 计算滚动视图高度
calculateScrollViewHeight() {
const safeArea = navigationHelper.getSafeAreaInsets()
const bottomInset = safeArea.bottom || 0
const inputHeight = 120 // 输入区域高度
this.scrollViewHeight = `calc(100vh - ${this.navBarHeight + this.statusBarHeight + inputHeight + bottomInset}px)`
},
// 备用高度设置
setFallbackNavigationValues() {
// #ifdef MP-WEIXIN
this.navBarHeight = 44
this.statusBarHeight = 20
// #endif
// #ifdef H5
this.navBarHeight = 44
this.statusBarHeight = 0
// #endif
// #ifdef APP-PLUS
this.navBarHeight = 88
this.statusBarHeight = 44
// #endif
},
cleanup() {
// 清理事件监听器
this.safeEventHandlers.forEach((handler, eventType) => {
this.$off(eventType, handler)
})
this.safeEventHandlers.clear()
console.log('组件清理完成')
},
showError(message) {
uni.showToast({
title: message,
icon: 'none',
duration: 2000
})
},
// 初始化聊天
initChat() {
// 可以在这里加载历史消息
console.log('AI聊天页面初始化')
},
// 返回上一页
goBack() {
uni.navigateBack()
},
// 显示菜单
showMenu() {
uni.showActionSheet({
itemList: ['清空聊天', '导出记录', '设置', '帮助'],
success: (res) => {
switch (res.tapIndex) {
case 0:
this.clearChat()
break
case 1:
this.exportChat()
break
case 2:
this.showSettings()
break
case 3:
this.showHelp()
break
}
}
})
},
// 清空聊天
clearChat() {
uni.showModal({
title: '提示',
content: '确定要清空聊天记录吗？',
success: (res) => {
if (res.confirm) {
this.$refs.chat.clearMessages()
// 重新添加欢迎消息
this.$refs.chat.addMessage({
id: Date.now(),
role: 'ai',
type: 'text',
content: '聊天记录已清空，有什么可以帮助您的吗？',
timestamp: Date.now()
})
}
}
})
},
// 导出聊天记录
exportChat() {
uni.showToast({
title: '功能开发中',
icon: 'none'
})
},
// 显示设置
showSettings() {
uni.navigateTo({
url: '/pages/settings/index'
})
},
// 显示帮助
showHelp() {
const helpMessage = {
id: Date.now(),
role: 'ai',
type: 'markdown',
content: `# 使用帮助
## 基本功能
- **发送消息**: 在输入框中输入文字后发送
- **语音输入**: 点击麦克风图标进行语音输入
- **附件发送**: 点击+号可以发送图片、文件、位置
## 消息类型
- **文本消息**: 普通文字对话
- **Markdown**: 支持格式化的文档内容
- **文件**: 支持各种文件格式预览
- **音频**: 支持语音消息播放
- **视频**: 支持视频播放
- **链接**: 支持网页链接跳转
- **商品**: 支持商品卡片展示
## 操作功能
- **点赞/踩**: 对AI回复进行评价
- **复制**: 长按消息可复制内容
- **转发**: 支持消息转发功能`,
timestamp: Date.now()
}
this.$refs.chat.addMessage(helpMessage)
},
// 用户发送消息
onMessageSent(message) {
console.log('用户发送消息:', message)
// 使用AI服务获取回复
// AI聊天组件内部已经集成了AI服务，这里只需要监听事件
},
// AI回复消息
onAIResponse(message) {
console.log('AI回复消息:', message)
// 可以在这里处理AI回复后的逻辑
// 比如记录对话、更新状态等
},
// 生成AI回复
generateAIResponse(userMessage) {
const responses = [
'我理解您的需求，让我为您详细解答。',
'感谢您的提问，这是一个很好的问题。',
'根据您的问题，我建议您可以考虑以下几个方面：',
'这个问题很常见，让我为您提供一些解决方案。',
'我明白您的困惑，让我帮您分析一下。'
]
const randomResponse = responses[Math.floor(Math.random() * responses.length)]
const aiMessage = {
id: Date.now(),
role: 'ai',
type: 'text',
content: `${randomResponse}\n\n您的问题"${userMessage.content}"我已经收到，正在为您处理中...`,
timestamp: Date.now(),
actions: [
{ type: 'like', count: 0 },
{ type: 'dislike', count: 0 }
]
}
this.$refs.chat.addMessage(aiMessage)
this.$emit('ai-response', aiMessage)
},
// 操作按钮点击
onActionClick({ action, message }) {
console.log('操作点击:', action, message)
switch (action.type) {
case 'like':
uni.showToast({
title: '感谢您的反馈！',
icon: 'success'
})
break
case 'dislike':
uni.showToast({
title: '我们会改进服务',
icon: 'none'
})
break
}
},
// 历史消息加载完成
onHistoryLoaded(messages) {
console.log('历史消息加载完成:', messages.length)
},
// 文件预览
onFilePreview(message) {
console.log('文件预览:', message)
uni.showToast({
title: '打开文件: ' + message.fileName,
icon: 'none'
})
},
// 音频播放
onAudioPlay(message) {
console.log('音频播放:', message)
},
// 音频暂停
onAudioPause(message) {
console.log('音频暂停:', message)
},
// 视频播放
onVideoPlay(message) {
console.log('视频播放:', message)
},
// 视频暂停
onVideoPause(message) {
console.log('视频暂停:', message)
},
// 链接打开
onLinkOpen(message) {
console.log('链接打开:', message)
uni.showModal({
title: '打开链接',
content: `确定要打开链接：${message.url} 吗？`,
success: (res) => {
if (res.confirm) {
// #ifdef H5
window.open(message.url, '_blank')
// #endif
// #ifdef APP-PLUS
plus.runtime.openURL(message.url)
// #endif
}
}
})
},
// 商品查看
onProductView(message) {
console.log('商品查看:', message)
uni.showToast({
title: '查看商品: ' + message.title,
icon: 'none'
})
},
// 输入内容变化
onInputChange(value) {
console.log('输入内容:', value)
}
}
}
</script>
<style lang="scss">
/* 引入图标字体 */
@import url('/common/css/iconfont.css');
/* 页面样式 */
.ai-chat-page {
display: flex;
flex-direction: column;
background-color: #f8f8f8;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
/* 自定义导航头部 */
.custom-navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20rpx 30rpx;
background-color: white;
border-bottom: 2rpx solid #eeeeee;
.header-left {
flex: 0 0 auto;
display: flex;
align-items: center;
.back-btn {
width: 60rpx;
height: 60rpx;
border-radius: 50%;
background-color: #f8f8f8;
display: flex;
align-items: center;
justify-content: center;
.iconfont {
font-size: 32rpx;
color: #666;
}
}
.placeholder {
width: 120rpx;
height: 60rpx;
}
}
.header-center {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 20rpx;
.header-title {
font-size: 36rpx;
font-weight: bold;
color: #333;
}
.header-subtitle {
font-size: 24rpx;
color: #999;
}
}
.header-right {
flex: 0 0 auto;
display: flex;
align-items: center;
.menu-btn {
width: 60rpx;
height: 60rpx;
border-radius: 50%;
background-color: #f8f8f8;
display: flex;
align-items: center;
justify-content: center;
.iconfont {
font-size: 32rpx;
color: #666;
}
}
.placeholder {
width: 120rpx;
height: 60rpx;
}
}
}
/* 聊天内容区域 */
.chat-content {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
/* 底部tabBar占位样式 */
.page-bottom {
width: 100%;
background-color: transparent;
}
</style>