288 lines
7.5 KiB
Vue
288 lines
7.5 KiB
Vue
<template>
|
||
<view class="demo-container">
|
||
<view class="demo-header">
|
||
<text class="demo-title">AI智能客服组件演示</text>
|
||
</view>
|
||
|
||
<ai-chat-message
|
||
ref="chat"
|
||
:initial-messages="demoMessages"
|
||
user-avatar="/static/images/demo-user.png"
|
||
ai-avatar="/static/images/demo-ai.png"
|
||
@message-sent="onMessageSent"
|
||
@ai-response="onAIResponse"
|
||
@action-click="onActionClick"
|
||
@file-preview="onFilePreview"
|
||
@audio-play="onAudioPlay"
|
||
@video-play="onVideoPlay"
|
||
@link-open="onLinkOpen"
|
||
@product-view="onProductView" />
|
||
|
||
<view class="demo-controls">
|
||
<button class="control-btn" @click="addTextMessage">添加文本消息</button>
|
||
<button class="control-btn" @click="addMarkdownMessage">添加Markdown</button>
|
||
<button class="control-btn" @click="addFileMessage">添加文件</button>
|
||
<button class="control-btn" @click="addAudioMessage">添加音频</button>
|
||
<button class="control-btn" @click="addVideoMessage">添加视频</button>
|
||
<button class="control-btn" @click="addLinkMessage">添加链接</button>
|
||
<button class="control-btn" @click="addProductMessage">添加商品</button>
|
||
<button class="control-btn" @click="clearMessages">清空消息</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
demoMessages: [
|
||
{
|
||
id: 1,
|
||
role: 'ai',
|
||
type: 'text',
|
||
content: '您好！我是AI智能客服演示程序，我可以展示多种消息类型。请点击下方的按钮体验不同功能！',
|
||
timestamp: Date.now() - 300000,
|
||
actions: [
|
||
{ id: 1, text: '开始体验', type: 'like' }
|
||
]
|
||
}
|
||
]
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
// 添加文本消息
|
||
addTextMessage() {
|
||
const message = {
|
||
id: Date.now(),
|
||
role: 'ai',
|
||
type: 'text',
|
||
content: '这是一个文本消息示例，支持**粗体**、*斜体*和`代码`格式。也可以包含换行符\n这是第二行内容。',
|
||
timestamp: Date.now(),
|
||
actions: [
|
||
{ id: 1, text: '有帮助', type: 'like' },
|
||
{ id: 2, text: '没帮助', type: 'dislike' }
|
||
]
|
||
}
|
||
this.$refs.chat.messages.push(message)
|
||
},
|
||
|
||
// 添加Markdown消息
|
||
addMarkdownMessage() {
|
||
const message = {
|
||
id: Date.now(),
|
||
role: 'ai',
|
||
type: 'markdown',
|
||
content: `# Markdown文档示例
|
||
|
||
## 二级标题
|
||
|
||
这是一个支持**粗体**、*斜体*和\`代码\`的Markdown消息。
|
||
|
||
### 功能特性
|
||
- ✅ 支持标题层级
|
||
- ✅ 支持列表展示
|
||
- ✅ 支持代码高亮
|
||
- ✅ 支持链接跳转
|
||
|
||
[查看详细文档](https://example.com)\n\n**注意：** 这是一个演示内容，实际使用时可以集成真实的文档系统。`,
|
||
timestamp: Date.now(),
|
||
actions: [
|
||
{ id: 1, text: '查看文档', type: 'like' }
|
||
]
|
||
}
|
||
this.$refs.chat.messages.push(message)
|
||
},
|
||
|
||
// 添加文件消息
|
||
addFileMessage() {
|
||
const message = {
|
||
id: Date.now(),
|
||
role: 'ai',
|
||
type: 'file',
|
||
fileName: '产品介绍文档.pdf',
|
||
fileSize: 2048000,
|
||
url: 'https://example.com/document.pdf',
|
||
timestamp: Date.now()
|
||
}
|
||
this.$refs.chat.messages.push(message)
|
||
},
|
||
|
||
// 添加音频消息
|
||
addAudioMessage() {
|
||
const message = {
|
||
id: Date.now(),
|
||
role: 'ai',
|
||
type: 'audio',
|
||
title: '产品功能介绍',
|
||
duration: 89,
|
||
url: 'https://example.com/audio.mp3',
|
||
timestamp: Date.now(),
|
||
playing: false,
|
||
currentTime: 0
|
||
}
|
||
this.$refs.chat.messages.push(message)
|
||
},
|
||
|
||
// 添加视频消息
|
||
addVideoMessage() {
|
||
const message = {
|
||
id: Date.now(),
|
||
role: 'ai',
|
||
type: 'video',
|
||
title: '产品演示视频',
|
||
duration: 180,
|
||
url: 'https://example.com/video.mp4',
|
||
cover: '/static/images/video-cover.jpg',
|
||
timestamp: Date.now()
|
||
}
|
||
this.$refs.chat.messages.push(message)
|
||
},
|
||
|
||
// 添加链接消息
|
||
addLinkMessage() {
|
||
const message = {
|
||
id: Date.now(),
|
||
role: 'ai',
|
||
type: 'link',
|
||
title: '帮助中心',
|
||
description: '详细的产品使用说明和常见问题解答',
|
||
url: 'https://example.com/help',
|
||
image: '/static/images/link-thumbnail.jpg',
|
||
timestamp: Date.now()
|
||
}
|
||
this.$refs.chat.messages.push(message)
|
||
},
|
||
|
||
// 添加商品消息
|
||
addProductMessage() {
|
||
const message = {
|
||
id: Date.now(),
|
||
role: 'ai',
|
||
type: 'product',
|
||
title: '智能手表 X1',
|
||
price: 1299,
|
||
description: '全新一代智能手表，支持心率监测、运动追踪、消息提醒等功能',
|
||
image: '/static/images/product-demo.jpg',
|
||
timestamp: Date.now(),
|
||
actions: [
|
||
{ id: 1, text: '立即购买', type: 'like' },
|
||
{ id: 2, text: '查看详情', type: 'dislike' }
|
||
]
|
||
}
|
||
this.$refs.chat.messages.push(message)
|
||
},
|
||
|
||
// 清空消息
|
||
clearMessages() {
|
||
this.$refs.chat.messages = [
|
||
{
|
||
id: 1,
|
||
role: 'ai',
|
||
type: 'text',
|
||
content: '消息已清空，可以重新开始体验！',
|
||
timestamp: Date.now()
|
||
}
|
||
]
|
||
},
|
||
|
||
// 事件处理
|
||
onMessageSent(message) {
|
||
console.log('用户发送消息:', message)
|
||
uni.showToast({
|
||
title: '消息发送成功',
|
||
icon: 'success'
|
||
})
|
||
},
|
||
|
||
onAIResponse(message) {
|
||
console.log('AI回复消息:', message)
|
||
},
|
||
|
||
onActionClick({ action, message }) {
|
||
console.log('操作点击:', action, message)
|
||
uni.showToast({
|
||
title: `点击了: ${action.text}`,
|
||
icon: 'none'
|
||
})
|
||
},
|
||
|
||
onFilePreview(message) {
|
||
console.log('文件预览:', message)
|
||
uni.showToast({
|
||
title: '正在打开文件...',
|
||
icon: 'none'
|
||
})
|
||
},
|
||
|
||
onAudioPlay(message) {
|
||
console.log('音频播放:', message)
|
||
},
|
||
|
||
onVideoPlay(message) {
|
||
console.log('视频播放:', message)
|
||
},
|
||
|
||
onLinkOpen(message) {
|
||
console.log('链接打开:', message)
|
||
uni.showToast({
|
||
title: '正在打开链接...',
|
||
icon: 'none'
|
||
})
|
||
},
|
||
|
||
onProductView(message) {
|
||
console.log('商品查看:', message)
|
||
uni.showToast({
|
||
title: '正在查看商品...',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.demo-container {
|
||
height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.demo-header {
|
||
background-color: #ff4544;
|
||
color: white;
|
||
padding: 30rpx;
|
||
text-align: center;
|
||
|
||
.demo-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.demo-controls {
|
||
background-color: white;
|
||
padding: 20rpx;
|
||
border-top: 2rpx solid #eeeeee;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 10rpx;
|
||
|
||
.control-btn {
|
||
flex: 1;
|
||
min-width: 150rpx;
|
||
height: 60rpx;
|
||
background-color: #f8f8f8;
|
||
border-radius: 30rpx;
|
||
font-size: 24rpx;
|
||
color: #333;
|
||
border: none;
|
||
|
||
&:active {
|
||
background-color: #eeeeee;
|
||
}
|
||
}
|
||
}
|
||
</style> |