1448 lines
36 KiB
Vue
1448 lines
36 KiB
Vue
<template>
|
||
<view class="ai-chat-container">
|
||
<!-- 聊天消息列表 -->
|
||
<scroll-view
|
||
class="chat-messages"
|
||
scroll-y
|
||
:scroll-top="scrollTop"
|
||
@scrolltoupper="loadMoreHistory"
|
||
:scroll-with-animation="true">
|
||
|
||
<!-- 加载更多历史消息 -->
|
||
<view class="load-more" v-if="hasMoreHistory">
|
||
<ns-loading :down-text="loadingText" :is-rotate="true" />
|
||
</view>
|
||
|
||
<!-- 消息列表 -->
|
||
<view
|
||
v-for="(message, index) in messages"
|
||
:key="message.id"
|
||
class="message-item"
|
||
:class="[message.role, { 'first-message': index === 0 }]">
|
||
|
||
<!-- 用户消息 -->
|
||
<view v-if="message.role === 'user'" class="user-message">
|
||
<view class="avatar">
|
||
<image :src="userAvatar" mode="aspectFill" />
|
||
</view>
|
||
<view class="message-content">
|
||
<view class="message-bubble">
|
||
<text class="message-text">{{ message.content }}</text>
|
||
</view>
|
||
<view class="message-time">{{ formatTime(message.timestamp) }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- AI消息 -->
|
||
<view v-else class="ai-message">
|
||
<view class="avatar">
|
||
<image :src="aiAvatar" mode="aspectFill" />
|
||
</view>
|
||
<view class="message-content">
|
||
<view class="message-bubble">
|
||
<!-- 文本消息 -->
|
||
<view v-if="message.type === 'text'" class="text-content">
|
||
<rich-text :nodes="parseMarkdown(message.content)" />
|
||
</view>
|
||
|
||
<!-- Markdown文档 -->
|
||
<view v-else-if="message.type === 'markdown'" class="markdown-content">
|
||
<view class="markdown-header">
|
||
<text class="iconfont icon-markdown"></text>
|
||
<text class="markdown-title">文档内容</text>
|
||
</view>
|
||
<view class="markdown-body">
|
||
<rich-text :nodes="parseMarkdown(message.content)" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 文件链接 -->
|
||
<view v-else-if="message.type === 'file'" class="file-content">
|
||
<view class="file-item" @click="previewFile(message)">
|
||
<view class="file-icon">
|
||
<text class="iconfont icon-file"></text>
|
||
</view>
|
||
<view class="file-info">
|
||
<text class="file-name">{{ message.fileName }}</text>
|
||
<text class="file-size">{{ formatFileSize(message.fileSize) }}</text>
|
||
</view>
|
||
<view class="file-action">
|
||
<text class="iconfont icon-download"></text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 音频消息 -->
|
||
<view v-else-if="message.type === 'audio'" class="audio-content">
|
||
<view class="audio-player">
|
||
<view class="audio-info">
|
||
<text class="audio-title">{{ message.title || '语音消息' }}</text>
|
||
<text class="audio-duration">{{ formatDuration(message.duration) }}</text>
|
||
</view>
|
||
<view class="audio-controls">
|
||
<button
|
||
class="play-btn"
|
||
:class="{ playing: message.playing }"
|
||
@click="toggleAudio(message)">
|
||
<text class="iconfont" :class="message.playing ? 'icon-pause' : 'icon-play'"></text>
|
||
</button>
|
||
<slider
|
||
class="audio-slider"
|
||
:value="message.currentTime || 0"
|
||
:max="message.duration || 0"
|
||
@changing="onAudioSliderChange"
|
||
@change="onAudioSliderChangeEnd"
|
||
activeColor="#ff4544"
|
||
backgroundColor="#eeeeee"
|
||
block-size="12" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 视频消息 -->
|
||
<view v-else-if="message.type === 'video'" class="video-content">
|
||
<view class="video-player">
|
||
<video
|
||
:src="message.url"
|
||
:poster="message.cover"
|
||
:controls="true"
|
||
:autoplay="false"
|
||
class="video-element"
|
||
@play="onVideoPlay(message)"
|
||
@pause="onVideoPause(message)">
|
||
</video>
|
||
<view class="video-info">
|
||
<text class="video-title">{{ message.title || '视频消息' }}</text>
|
||
<text class="video-duration">{{ formatDuration(message.duration) }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 跳转链接 -->
|
||
<view v-else-if="message.type === 'link'" class="link-content">
|
||
<view class="link-card" @click="openLink(message)">
|
||
<view class="link-image" v-if="message.image">
|
||
<image :src="message.image" mode="aspectFill" />
|
||
</view>
|
||
<view class="link-info">
|
||
<text class="link-title">{{ message.title }}</text>
|
||
<text class="link-desc">{{ message.description }}</text>
|
||
<text class="link-url">{{ message.url }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 商品卡片 -->
|
||
<view v-else-if="message.type === 'product'" class="product-content">
|
||
<view class="product-card" @click="viewProduct(message)">
|
||
<view class="product-image">
|
||
<image :src="message.image" mode="aspectFill" />
|
||
</view>
|
||
<view class="product-info">
|
||
<text class="product-title">{{ message.title }}</text>
|
||
<text class="product-price color-base-text">¥{{ message.price }}</text>
|
||
<text class="product-desc">{{ message.description }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 加载中状态 -->
|
||
<view v-else-if="message.type === 'loading'" class="loading-content">
|
||
<view class="loading-dots">
|
||
<text class="dot"></text>
|
||
<text class="dot"></text>
|
||
<text class="dot"></text>
|
||
</view>
|
||
<text class="loading-text">AI正在思考中...</text>
|
||
</view>
|
||
|
||
<!-- 操作按钮 -->
|
||
<view class="message-actions" v-if="message.actions && message.actions.length > 0">
|
||
<button
|
||
v-for="action in message.actions"
|
||
:key="action.id"
|
||
class="action-btn"
|
||
:class="[`iconfont`, action.icon, action.type]"
|
||
@click="handleAction(action, message)">
|
||
{{ action.text }}
|
||
</button>
|
||
</view>
|
||
</view>
|
||
<view class="message-time">{{ formatTime(message.timestamp) }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<!-- 输入区域 -->
|
||
<view class="input-area">
|
||
<view class="input-tools">
|
||
<button class="tool-btn" @click="showMoreTools">
|
||
<text class="iconfont icon-plus"></text>
|
||
</button>
|
||
<button class="tool-btn" @click="toggleVoiceInput">
|
||
<text class="iconfont" :class="voiceInputing ? 'icon-stop' : 'icon-voice'"></text>
|
||
</button>
|
||
</view>
|
||
|
||
<view class="input-container">
|
||
<textarea
|
||
v-model="inputText"
|
||
class="message-input"
|
||
placeholder="请输入您的问题..."
|
||
:maxlength="500"
|
||
:auto-height="true"
|
||
:show-confirm-bar="false"
|
||
@confirm="sendMessage"
|
||
@input="onInput" />
|
||
|
||
<button
|
||
class="send-btn"
|
||
:class="{ disabled: !inputText.trim() }"
|
||
@click="sendMessage"
|
||
:disabled="!inputText.trim()">
|
||
<text class="iconfont icon-send"></text>
|
||
</button>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 更多工具面板 -->
|
||
<view v-if="showToolsPanel" class="tools-popup">
|
||
<view class="tools-mask" @click="hideToolsPanel"></view>
|
||
<view class="tools-panel">
|
||
<view class="tools-header">
|
||
<text>更多功能</text>
|
||
<button class="close-btn" @click="hideToolsPanel">
|
||
<text class="iconfont icon-close"></text>
|
||
</button>
|
||
</view>
|
||
<view class="tools-grid">
|
||
<view class="tool-item" @click="selectImage">
|
||
<view class="tool-icon">
|
||
<text class="iconfont icon-image"></text>
|
||
</view>
|
||
<text class="tool-text">图片</text>
|
||
</view>
|
||
<view class="tool-item" @click="selectFile">
|
||
<view class="tool-icon">
|
||
<text class="iconfont icon-file"></text>
|
||
</view>
|
||
<text class="tool-text">文件</text>
|
||
</view>
|
||
<view class="tool-item" @click="startRecord">
|
||
<view class="tool-icon">
|
||
<text class="iconfont icon-voice"></text>
|
||
</view>
|
||
<text class="tool-text">语音</text>
|
||
</view>
|
||
<view class="tool-item" @click="selectLocation">
|
||
<view class="tool-icon">
|
||
<text class="iconfont icon-location"></text>
|
||
</view>
|
||
<text class="tool-text">位置</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 语音输入面板 -->
|
||
<view v-if="enalbeVoicePanelShow" class="voice-popup">
|
||
<view class="voice-mask" @click="hideVoicePanel"></view>
|
||
<view class="voice-input-panel">
|
||
<view class="voice-header">
|
||
<text>语音输入</text>
|
||
<button class="close-btn" @click="hideVoicePanel">
|
||
<text class="iconfont icon-close"></text>
|
||
</button>
|
||
</view>
|
||
<view class="voice-content">
|
||
<view class="voice-wave" :class="{ recording: voiceInputing }">
|
||
<view
|
||
v-for="i in 8"
|
||
:key="i"
|
||
class="wave-bar"
|
||
:style="{ animationDelay: (i * 0.1) + 's' }"></view>
|
||
</view>
|
||
<text class="voice-tip">{{ voiceInputing ? '正在录音，松开结束' : '点击开始录音' }}</text>
|
||
</view>
|
||
<view class="voice-actions">
|
||
<button class="voice-btn" @click="toggleVoiceInput">
|
||
<text class="iconfont" :class="voiceInputing ? 'icon-stop' : 'icon-voice'"></text>
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import nsLoading from '@/components/ns-loading/ns-loading.vue'
|
||
|
||
export default {
|
||
name: 'ai-chat-message',
|
||
components: {
|
||
nsLoading
|
||
},
|
||
props: {
|
||
// 初始消息列表
|
||
initialMessages: {
|
||
type: Array,
|
||
default: () => []
|
||
},
|
||
// 用户头像
|
||
userAvatar: {
|
||
type: String,
|
||
default: '/static/images/default-avatar.png'
|
||
},
|
||
// AI头像
|
||
aiAvatar: {
|
||
type: String,
|
||
default: '/static/images/ai-avatar.png'
|
||
},
|
||
// 是否显示加载更多
|
||
showLoadMore: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
// 最大消息数量
|
||
maxMessages: {
|
||
type: Number,
|
||
default: 100
|
||
},
|
||
// 是否启用流式响应
|
||
enableStreaming: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
// 流式响应速度（字符/秒）
|
||
streamSpeed: {
|
||
type: Number,
|
||
default: 20
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
messages: [],
|
||
inputText: '',
|
||
scrollTop: 0,
|
||
hasMoreHistory: false,
|
||
loadingText: '加载更多历史消息',
|
||
voiceInputing: false,
|
||
audioContext: null,
|
||
currentAudio: null,
|
||
messageId: 0,
|
||
showToolsPanel: false,
|
||
enalbeVoicePanelShow: false,
|
||
streamingMessage: null, // 流式消息对象
|
||
streamInterval: null, // 流式更新定时器
|
||
streamContent: '', // 流式内容缓存
|
||
isStreaming: false // 是否正在流式输出
|
||
}
|
||
},
|
||
created() {
|
||
this.messages = [...this.initialMessages]
|
||
this.messageId = this.messages.length
|
||
|
||
// 初始化音频上下文
|
||
this.initAudioContext()
|
||
},
|
||
mounted() {
|
||
this.scrollToBottom()
|
||
},
|
||
watch: {
|
||
messages: {
|
||
handler() {
|
||
this.$nextTick(() => {
|
||
this.scrollToBottom()
|
||
})
|
||
},
|
||
deep: true
|
||
}
|
||
},
|
||
methods: {
|
||
// 初始化音频上下文
|
||
initAudioContext() {
|
||
// #ifdef H5
|
||
if (window.AudioContext) {
|
||
this.audioContext = new (window.AudioContext || window.webkitAudioContext)()
|
||
}
|
||
// #endif
|
||
},
|
||
|
||
// 发送消息
|
||
sendMessage() {
|
||
if (!this.inputText.trim()) return
|
||
|
||
const userMessage = {
|
||
id: ++this.messageId,
|
||
role: 'user',
|
||
type: 'text',
|
||
content: this.inputText.trim(),
|
||
timestamp: Date.now()
|
||
}
|
||
|
||
this.messages.push(userMessage)
|
||
this.inputText = ''
|
||
|
||
// 显示AI正在输入
|
||
const loadingMessage = {
|
||
id: ++this.messageId,
|
||
role: 'ai',
|
||
type: 'loading',
|
||
content: '',
|
||
timestamp: Date.now()
|
||
}
|
||
this.messages.push(loadingMessage)
|
||
|
||
// 模拟AI回复
|
||
setTimeout(() => {
|
||
this.messages = this.messages.filter(msg => msg.type !== 'loading')
|
||
|
||
const aiMessage = {
|
||
id: ++this.messageId,
|
||
role: 'ai',
|
||
type: 'text',
|
||
content: this.generateAIResponse(userMessage.content),
|
||
timestamp: Date.now(),
|
||
actions: [
|
||
{ id: 1, text: '有帮助', type: 'like' },
|
||
{ id: 2, text: '没帮助', type: 'dislike' }
|
||
]
|
||
}
|
||
|
||
this.messages.push(aiMessage)
|
||
|
||
// 触发消息发送事件
|
||
this.$emit('message-sent', userMessage)
|
||
this.$emit('ai-response', aiMessage)
|
||
}, 1000)
|
||
},
|
||
|
||
// 生成AI回复（模拟）
|
||
generateAIResponse(userMessage) {
|
||
// 这里可以集成真实的AI服务
|
||
const responses = {
|
||
'你好': '您好！我是AI智能客服，很高兴为您服务！有什么可以帮助您的吗？',
|
||
'价格': '我们的产品价格根据型号和配置有所不同，具体价格请查看商品详情页面。',
|
||
'发货': '一般情况下，订单会在24小时内发货，具体时效请查看物流信息。',
|
||
'退货': '支持7天无理由退货，请确保商品完好无损。',
|
||
'客服': '我们的客服工作时间是9:00-18:00，有问题可以随时联系我们。'
|
||
}
|
||
|
||
for (let key in responses) {
|
||
if (userMessage.includes(key)) {
|
||
return responses[key]
|
||
}
|
||
}
|
||
|
||
return `感谢您的咨询！关于"${userMessage}"的问题，我们的专业客服会尽快为您解答。您也可以查看我们的帮助文档获取更多信息。`
|
||
},
|
||
|
||
// 解析Markdown
|
||
parseMarkdown(content) {
|
||
if (!content) return ''
|
||
|
||
// 简单的Markdown解析
|
||
let html = content
|
||
.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>') // 粗体
|
||
.replace(/\*(.*?)\*/g, '<em>$1</em>') // 斜体
|
||
.replace(/`(.*?)`/g, '<code>$1</code>') // 代码
|
||
.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>') // 链接
|
||
.replace(/\n/g, '<br>') // 换行
|
||
|
||
return html
|
||
},
|
||
|
||
// 格式化时间
|
||
formatTime(timestamp) {
|
||
const date = new Date(timestamp)
|
||
const now = new Date()
|
||
const diff = now - date
|
||
|
||
if (diff < 60000) { // 1分钟内
|
||
return '刚刚'
|
||
} else if (diff < 3600000) { // 1小时内
|
||
return Math.floor(diff / 60000) + '分钟前'
|
||
} else if (diff < 86400000) { // 1天内
|
||
return Math.floor(diff / 3600000) + '小时前'
|
||
} else {
|
||
return date.getMonth() + 1 + '月' + date.getDate() + '日 ' +
|
||
date.getHours().toString().padStart(2, '0') + ':' +
|
||
date.getMinutes().toString().padStart(2, '0')
|
||
}
|
||
},
|
||
|
||
// 格式化文件大小
|
||
formatFileSize(bytes) {
|
||
if (!bytes) return '0B'
|
||
const k = 1024
|
||
const sizes = ['B', 'KB', 'MB', 'GB']
|
||
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + sizes[i]
|
||
},
|
||
|
||
// 格式化时长
|
||
formatDuration(seconds) {
|
||
if (!seconds) return '00:00'
|
||
const mins = Math.floor(seconds / 60)
|
||
const secs = Math.floor(seconds % 60)
|
||
return mins.toString().padStart(2, '0') + ':' + secs.toString().padStart(2, '0')
|
||
},
|
||
|
||
// 滚动到底部
|
||
scrollToBottom() {
|
||
setTimeout(() => {
|
||
this.scrollTop = 999999
|
||
}, 100)
|
||
},
|
||
|
||
// 加载更多历史消息
|
||
loadMoreHistory() {
|
||
if (!this.showLoadMore) return
|
||
|
||
this.hasMoreHistory = true
|
||
this.loadingText = '加载历史消息中...'
|
||
|
||
// 模拟加载历史消息
|
||
setTimeout(() => {
|
||
const historyMessages = [
|
||
{
|
||
id: --this.messageId,
|
||
role: 'ai',
|
||
type: 'text',
|
||
content: '这是历史消息1',
|
||
timestamp: Date.now() - 86400000
|
||
},
|
||
{
|
||
id: --this.messageId,
|
||
role: 'user',
|
||
type: 'text',
|
||
content: '这是历史消息2',
|
||
timestamp: Date.now() - 86400000
|
||
}
|
||
]
|
||
|
||
this.messages = [...historyMessages, ...this.messages]
|
||
this.hasMoreHistory = false
|
||
this.$emit('history-loaded', historyMessages)
|
||
}, 1000)
|
||
},
|
||
|
||
// 显示更多工具
|
||
showMoreTools() {
|
||
this.showToolsPanel = true
|
||
},
|
||
|
||
// 隐藏工具面板
|
||
hideToolsPanel() {
|
||
this.showToolsPanel = false
|
||
},
|
||
|
||
// 显示语音面板
|
||
showVoicePanel() {
|
||
this.enalbeVoicePanelShow = true
|
||
},
|
||
|
||
// 隐藏语音面板
|
||
hideVoicePanel() {
|
||
this.enalbeVoicePanelShow = false
|
||
this.voiceInputing = false
|
||
},
|
||
|
||
// 切换语音输入
|
||
toggleVoiceInput() {
|
||
this.voiceInputing = !this.voiceInputing
|
||
|
||
if (this.voiceInputing) {
|
||
this.showVoicePanel()
|
||
this.startVoiceInput()
|
||
} else {
|
||
this.stopVoiceInput()
|
||
this.hideVoicePanel()
|
||
}
|
||
},
|
||
|
||
// 开始语音输入
|
||
startVoiceInput() {
|
||
// #ifdef H5
|
||
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
|
||
navigator.mediaDevices.getUserMedia({ audio: true })
|
||
.then(stream => {
|
||
// 语音输入处理
|
||
console.log('语音输入开始')
|
||
})
|
||
.catch(error => {
|
||
console.error('语音输入错误:', error)
|
||
uni.showToast({
|
||
title: '语音输入失败',
|
||
icon: 'none'
|
||
})
|
||
})
|
||
}
|
||
// #endif
|
||
},
|
||
|
||
// 停止语音输入
|
||
stopVoiceInput() {
|
||
this.voiceInputing = false
|
||
// 停止语音输入逻辑
|
||
},
|
||
|
||
// 预览文件
|
||
previewFile(message) {
|
||
uni.showLoading({ title: '打开文件中...' })
|
||
|
||
// #ifdef H5
|
||
window.open(message.url, '_blank')
|
||
// #endif
|
||
|
||
// #ifdef APP-PLUS
|
||
plus.runtime.openFile(message.url, {
|
||
error: (e) => {
|
||
uni.showToast({
|
||
title: '文件打开失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
// #endif
|
||
|
||
uni.hideLoading()
|
||
this.$emit('file-preview', message)
|
||
},
|
||
|
||
// 切换音频播放
|
||
toggleAudio(message) {
|
||
if (message.playing) {
|
||
this.pauseAudio(message)
|
||
} else {
|
||
this.playAudio(message)
|
||
}
|
||
},
|
||
|
||
// 播放音频
|
||
playAudio(message) {
|
||
if (this.currentAudio && this.currentAudio !== message) {
|
||
this.pauseAudio(this.currentAudio)
|
||
}
|
||
|
||
// 模拟音频播放
|
||
message.playing = true
|
||
message.currentTime = message.currentTime || 0
|
||
|
||
this.currentAudio = message
|
||
this.$emit('audio-play', message)
|
||
},
|
||
|
||
// 暂停音频
|
||
pauseAudio(message) {
|
||
message.playing = false
|
||
this.$emit('audio-pause', message)
|
||
},
|
||
|
||
// 音频滑块变化
|
||
onAudioSliderChange(e) {
|
||
if (this.currentAudio) {
|
||
this.currentAudio.currentTime = e.detail.value
|
||
}
|
||
},
|
||
|
||
onAudioSliderChangeEnd(e) {
|
||
if (this.currentAudio) {
|
||
this.currentAudio.currentTime = e.detail.value
|
||
this.$emit('audio-seek', this.currentAudio)
|
||
}
|
||
},
|
||
|
||
// 视频播放
|
||
onVideoPlay(message) {
|
||
this.$emit('video-play', message)
|
||
},
|
||
|
||
// 视频暂停
|
||
onVideoPause(message) {
|
||
this.$emit('video-pause', message)
|
||
},
|
||
|
||
// 打开链接
|
||
openLink(message) {
|
||
// #ifdef H5
|
||
window.open(message.url, '_blank')
|
||
// #endif
|
||
|
||
// #ifdef APP-PLUS
|
||
plus.runtime.openURL(message.url)
|
||
// #endif
|
||
|
||
this.$emit('link-open', message)
|
||
},
|
||
|
||
// 查看商品
|
||
viewProduct(message) {
|
||
this.$emit('product-view', message)
|
||
},
|
||
|
||
// 处理操作
|
||
handleAction(action, message) {
|
||
this.$emit('action-click', { action, message })
|
||
},
|
||
|
||
// 输入事件
|
||
onInput(e) {
|
||
this.$emit('input-change', e.detail.value)
|
||
},
|
||
|
||
// 选择图片
|
||
selectImage() {
|
||
uni.chooseImage({
|
||
count: 1,
|
||
sizeType: ['compressed'],
|
||
sourceType: ['album', 'camera'],
|
||
success: (res) => {
|
||
const tempFilePaths = res.tempFilePaths
|
||
const imageMessage = {
|
||
id: ++this.messageId,
|
||
role: 'user',
|
||
type: 'image',
|
||
content: '',
|
||
imageUrl: tempFilePaths[0],
|
||
timestamp: Date.now()
|
||
}
|
||
this.messages.push(imageMessage)
|
||
this.hideToolsPanel()
|
||
this.$emit('image-selected', imageMessage)
|
||
}
|
||
})
|
||
},
|
||
|
||
// 选择文件
|
||
selectFile() {
|
||
// #ifdef H5
|
||
const input = document.createElement('input')
|
||
input.type = 'file'
|
||
input.accept = '*/*'
|
||
input.onchange = (e) => {
|
||
const file = e.target.files[0]
|
||
if (file) {
|
||
const fileMessage = {
|
||
id: ++this.messageId,
|
||
role: 'user',
|
||
type: 'file',
|
||
content: '',
|
||
fileName: file.name,
|
||
fileSize: file.size,
|
||
fileType: file.type,
|
||
timestamp: Date.now()
|
||
}
|
||
this.messages.push(fileMessage)
|
||
this.hideToolsPanel()
|
||
this.$emit('file-selected', fileMessage)
|
||
}
|
||
}
|
||
input.click()
|
||
// #endif
|
||
},
|
||
|
||
// 开始录音
|
||
startRecord() {
|
||
this.toggleVoiceInput()
|
||
},
|
||
|
||
// 选择位置
|
||
selectLocation() {
|
||
uni.chooseLocation({
|
||
success: (res) => {
|
||
const locationMessage = {
|
||
id: ++this.messageId,
|
||
role: 'user',
|
||
type: 'location',
|
||
content: '',
|
||
latitude: res.latitude,
|
||
longitude: res.longitude,
|
||
address: res.address,
|
||
name: res.name,
|
||
timestamp: Date.now()
|
||
}
|
||
this.messages.push(locationMessage)
|
||
this.hideToolsPanel()
|
||
this.$emit('location-selected', locationMessage)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
/* 引入图标字体 */
|
||
@import url('/common/css/iconfont.css');
|
||
|
||
/* 页面样式 */
|
||
.ai-chat-container {
|
||
height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background-color: #f8f8f8;
|
||
overflow: hidden;
|
||
/* 微信小程序安全区域适配 */
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
box-sizing: border-box;
|
||
/* 确保在微信小程序中正确布局 */
|
||
position: relative;
|
||
}
|
||
|
||
.chat-messages {
|
||
flex: 1;
|
||
padding: 20rpx;
|
||
overflow-y: auto;
|
||
box-sizing: border-box;
|
||
/* 微信小程序需要明确的flex布局 */
|
||
min-height: 0; /* 重要：防止flex元素溢出 */
|
||
}
|
||
|
||
.load-more {
|
||
text-align: center;
|
||
padding: 20rpx 0;
|
||
}
|
||
|
||
.message-item {
|
||
margin-bottom: 30rpx;
|
||
|
||
&.first-message {
|
||
margin-top: 20rpx;
|
||
}
|
||
}
|
||
|
||
.user-message, .ai-message {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
|
||
.avatar {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
flex-shrink: 0;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.message-content {
|
||
flex: 1;
|
||
margin-left: 20rpx;
|
||
max-width: calc(100% - 100rpx);
|
||
min-width: 0;
|
||
width: 0; /* 添加这个属性防止flex元素溢出 */
|
||
}
|
||
}
|
||
|
||
.user-message {
|
||
flex-direction: row-reverse;
|
||
|
||
.message-content {
|
||
margin-left: 0;
|
||
margin-right: 20rpx;
|
||
text-align: right;
|
||
}
|
||
|
||
.message-bubble {
|
||
background-color: #ff4544;
|
||
color: white;
|
||
border-radius: 20rpx 20rpx 0 20rpx;
|
||
padding: 20rpx;
|
||
display: inline-block;
|
||
max-width: 100%;
|
||
word-break: break-word;
|
||
}
|
||
}
|
||
|
||
.ai-message {
|
||
.message-bubble {
|
||
background-color: white;
|
||
border-radius: 20rpx 20rpx 20rpx 0;
|
||
padding: 20rpx;
|
||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
|
||
max-width: 100%;
|
||
word-break: break-word;
|
||
}
|
||
}
|
||
|
||
.message-time {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
/* 各种消息类型样式 */
|
||
.markdown-content {
|
||
.markdown-header {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 15rpx;
|
||
|
||
.icon-markdown {
|
||
color: #ff4544;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.markdown-title {
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
}
|
||
|
||
.markdown-body {
|
||
line-height: 1.6;
|
||
|
||
strong {
|
||
font-weight: bold;
|
||
}
|
||
|
||
em {
|
||
font-style: italic;
|
||
}
|
||
|
||
code {
|
||
background-color: #f5f5f5;
|
||
padding: 4rpx 8rpx;
|
||
border-radius: 4rpx;
|
||
font-family: monospace;
|
||
}
|
||
|
||
a {
|
||
color: #ff4544;
|
||
text-decoration: underline;
|
||
}
|
||
}
|
||
}
|
||
|
||
.file-content {
|
||
.file-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 20rpx;
|
||
background-color: #f8f9fa;
|
||
border-radius: 10rpx;
|
||
border: 2rpx solid #e9ecef;
|
||
|
||
.file-icon {
|
||
margin-right: 20rpx;
|
||
|
||
.icon-file {
|
||
font-size: 48rpx;
|
||
color: #ff4544;
|
||
}
|
||
}
|
||
|
||
.file-info {
|
||
flex: 1;
|
||
|
||
.file-name {
|
||
display: block;
|
||
font-weight: bold;
|
||
margin-bottom: 5rpx;
|
||
}
|
||
|
||
.file-size {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
.file-action {
|
||
.icon-download {
|
||
font-size: 36rpx;
|
||
color: #ff4544;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.audio-content {
|
||
.audio-player {
|
||
.audio-info {
|
||
margin-bottom: 15rpx;
|
||
|
||
.audio-title {
|
||
display: block;
|
||
font-weight: bold;
|
||
margin-bottom: 5rpx;
|
||
}
|
||
|
||
.audio-duration {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
.audio-controls {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.play-btn {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
border-radius: 50%;
|
||
background-color: #ff4544;
|
||
color: white;
|
||
margin-right: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
&.playing {
|
||
background-color: #999;
|
||
}
|
||
}
|
||
|
||
.audio-slider {
|
||
flex: 1;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.video-content {
|
||
.video-player {
|
||
.video-element {
|
||
width: 100%;
|
||
height: 400rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.video-info {
|
||
margin-top: 15rpx;
|
||
|
||
.video-title {
|
||
display: block;
|
||
font-weight: bold;
|
||
margin-bottom: 5rpx;
|
||
}
|
||
|
||
.video-duration {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.link-content {
|
||
.link-card {
|
||
display: flex;
|
||
background-color: #f8f9fa;
|
||
border-radius: 10rpx;
|
||
overflow: hidden;
|
||
border: 2rpx solid #e9ecef;
|
||
|
||
.link-image {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
flex-shrink: 0;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.link-info {
|
||
flex: 1;
|
||
padding: 20rpx;
|
||
|
||
.link-title {
|
||
display: block;
|
||
font-weight: bold;
|
||
margin-bottom: 5rpx;
|
||
}
|
||
|
||
.link-desc {
|
||
display: block;
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
margin-bottom: 5rpx;
|
||
}
|
||
|
||
.link-url {
|
||
display: block;
|
||
font-size: 22rpx;
|
||
color: #ff4544;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.product-content {
|
||
.product-card {
|
||
display: flex;
|
||
background-color: white;
|
||
border-radius: 10rpx;
|
||
overflow: hidden;
|
||
border: 2rpx solid #e9ecef;
|
||
|
||
.product-image {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
flex-shrink: 0;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.product-info {
|
||
flex: 1;
|
||
padding: 20rpx;
|
||
|
||
.product-title {
|
||
display: block;
|
||
font-weight: bold;
|
||
margin-bottom: 5rpx;
|
||
}
|
||
|
||
.product-price {
|
||
display: block;
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
margin-bottom: 5rpx;
|
||
}
|
||
|
||
.product-desc {
|
||
display: block;
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.loading-content {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.loading-dots {
|
||
display: flex;
|
||
margin-right: 15rpx;
|
||
|
||
.dot {
|
||
width: 12rpx;
|
||
height: 12rpx;
|
||
border-radius: 50%;
|
||
background-color: #999;
|
||
margin: 0 4rpx;
|
||
animation: dotPulse 1.5s infinite ease-in-out;
|
||
|
||
&:nth-child(2) {
|
||
animation-delay: 0.2s;
|
||
}
|
||
|
||
&:nth-child(3) {
|
||
animation-delay: 0.4s;
|
||
}
|
||
}
|
||
}
|
||
|
||
.loading-text {
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
@keyframes dotPulse {
|
||
0%, 80%, 100% {
|
||
transform: scale(0.8);
|
||
opacity: 0.5;
|
||
}
|
||
40% {
|
||
transform: scale(1);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.message-actions {
|
||
margin-top: 15rpx;
|
||
display: flex;
|
||
gap: 10rpx;
|
||
|
||
.action-btn {
|
||
border-radius: 20rpx;
|
||
font-size: 24rpx;
|
||
// border: 2rpx solid #e9ecef;
|
||
background-color: white;
|
||
padding: 10rpx 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
&.like {
|
||
color: #ff4544;
|
||
border-color: #ff4544;
|
||
}
|
||
|
||
&.dislike {
|
||
color: #999;
|
||
border-color: #999;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 输入区域样式 */
|
||
.input-area {
|
||
background-color: white;
|
||
border-top: 2rpx solid #eeeeee;
|
||
padding: 20rpx;
|
||
/* 确保在微信小程序中紧贴底部 */
|
||
flex-shrink: 0;
|
||
/* 微信小程序安全区域适配 */
|
||
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
||
/* 确保输入区域正确显示 */
|
||
position: relative;
|
||
z-index: 10;
|
||
}
|
||
|
||
.input-tools {
|
||
display: flex;
|
||
margin-bottom: 15rpx;
|
||
|
||
.tool-btn {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
border-radius: 50%;
|
||
background-color: #f8f8f8;
|
||
margin-right: 15rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.iconfont {
|
||
font-size: 32rpx;
|
||
color: #666;
|
||
}
|
||
}
|
||
}
|
||
|
||
.input-container {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
|
||
.message-input {
|
||
flex: 1;
|
||
min-height: 80rpx;
|
||
max-height: 200rpx;
|
||
background-color: #f8f8f8;
|
||
border-radius: 40rpx;
|
||
padding: 20rpx 30rpx;
|
||
font-size: 28rpx;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.send-btn {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: 50%;
|
||
background-color: #ff4544;
|
||
margin-left: 15rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
&.disabled {
|
||
background-color: #cccccc;
|
||
}
|
||
|
||
.iconfont {
|
||
font-size: 36rpx;
|
||
color: white;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 弹窗样式 */
|
||
.tools-popup, .voice-popup {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 999;
|
||
}
|
||
|
||
.tools-mask, .voice-mask {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
/* 工具面板样式 */
|
||
.tools-panel {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background-color: white;
|
||
border-radius: 20rpx 20rpx 0 0;
|
||
|
||
.tools-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 30rpx;
|
||
border-bottom: 2rpx solid #eeeeee;
|
||
|
||
.close-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;
|
||
}
|
||
}
|
||
}
|
||
|
||
.tools-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
padding: 30rpx;
|
||
gap: 30rpx;
|
||
|
||
.tool-item {
|
||
text-align: center;
|
||
|
||
.tool-icon {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border-radius: 20rpx;
|
||
background-color: #f8f8f8;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 0 auto 15rpx;
|
||
|
||
.iconfont {
|
||
font-size: 48rpx;
|
||
color: #666;
|
||
}
|
||
}
|
||
|
||
.tool-text {
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 语音输入面板样式 */
|
||
.voice-input-panel {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
background-color: white;
|
||
border-radius: 20rpx;
|
||
padding: 40rpx;
|
||
width: 500rpx;
|
||
|
||
.voice-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 30rpx;
|
||
|
||
.close-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;
|
||
}
|
||
}
|
||
}
|
||
|
||
.voice-content {
|
||
text-align: center;
|
||
margin-bottom: 30rpx;
|
||
|
||
.voice-wave {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 100rpx;
|
||
margin-bottom: 20rpx;
|
||
|
||
.wave-bar {
|
||
width: 6rpx;
|
||
height: 30rpx;
|
||
background-color: #ff4544;
|
||
margin: 0 3rpx;
|
||
border-radius: 3rpx;
|
||
animation: wavePulse 1.5s infinite ease-in-out;
|
||
}
|
||
|
||
&.recording .wave-bar {
|
||
animation: wavePulseRecording 0.5s infinite ease-in-out;
|
||
}
|
||
}
|
||
|
||
.voice-tip {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
}
|
||
}
|
||
|
||
.voice-actions {
|
||
text-align: center;
|
||
|
||
.voice-btn {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
border-radius: 50%;
|
||
background-color: #ff4544;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 0 auto;
|
||
|
||
.iconfont {
|
||
font-size: 48rpx;
|
||
color: white;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
@keyframes wavePulse {
|
||
0%, 100% {
|
||
transform: scaleY(0.5);
|
||
}
|
||
50% {
|
||
transform: scaleY(1);
|
||
}
|
||
}
|
||
|
||
@keyframes wavePulseRecording {
|
||
0%, 100% {
|
||
transform: scaleY(0.3);
|
||
}
|
||
50% {
|
||
transform: scaleY(2);
|
||
}
|
||
}
|
||
</style> |