358 lines
9.2 KiB
Vue
358 lines
9.2 KiB
Vue
<template>
|
|
<div class="conversation-detail">
|
|
<!-- 对话信息 -->
|
|
<div class="conversation-info">
|
|
<div class="info-row">
|
|
<span class="info-label">创建时间:</span>
|
|
<span class="info-value">{{ formatTime(conversation.createTime) }}</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">最后更新:</span>
|
|
<span class="info-value">{{ formatTime(conversation.updateTime) }}</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">消息数量:</span>
|
|
<span class="info-value">{{ conversation.messageCount || 0 }} 条</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">对话状态:</span>
|
|
<a-tag :color="getStatusColor(conversation.status)">
|
|
{{ getStatusText(conversation.status) }}
|
|
</a-tag>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 消息列表 -->
|
|
<div class="messages-section">
|
|
<div class="section-title">
|
|
<MessageOutlined />
|
|
对话内容
|
|
</div>
|
|
|
|
<a-spin :spinning="loading">
|
|
<div class="messages-list" v-if="messages.length > 0">
|
|
<div
|
|
class="message-item"
|
|
:class="message.sender"
|
|
v-for="message in messages"
|
|
:key="message.id"
|
|
>
|
|
<div class="message-header">
|
|
<div class="message-sender">
|
|
<UserOutlined v-if="message.sender === 'user'" />
|
|
<RobotOutlined v-else />
|
|
<span>{{ message.sender === 'user' ? '用户' : 'AI助手' }}</span>
|
|
</div>
|
|
<div class="message-time">{{ formatTime(message.timestamp) }}</div>
|
|
</div>
|
|
|
|
<div class="message-content">
|
|
<div class="message-text" v-html="formatMessage(message.content)"></div>
|
|
|
|
<!-- 情绪分析 -->
|
|
<div class="emotion-section" v-if="message.emotionAnalysis">
|
|
<EmotionAnalysis :analysis="message.emotionAnalysis" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="empty-messages" v-else>
|
|
<CommentOutlined class="empty-icon" />
|
|
<p>暂无消息记录</p>
|
|
</div>
|
|
</a-spin>
|
|
</div>
|
|
|
|
<!-- 操作按钮 -->
|
|
<div class="action-buttons">
|
|
<a-button
|
|
type="primary"
|
|
class="gradient-btn"
|
|
@click="$emit('continue')"
|
|
v-if="conversation.status === 'active'"
|
|
>
|
|
<PlayCircleOutlined />
|
|
继续对话
|
|
</a-button>
|
|
|
|
<a-button @click="exportConversation">
|
|
<DownloadOutlined />
|
|
导出对话
|
|
</a-button>
|
|
|
|
<a-button @click="shareConversation">
|
|
<ShareAltOutlined />
|
|
分享对话
|
|
</a-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import { message } from 'ant-design-vue'
|
|
import {
|
|
MessageOutlined,
|
|
UserOutlined,
|
|
RobotOutlined,
|
|
PlayCircleOutlined,
|
|
DownloadOutlined,
|
|
ShareAltOutlined,
|
|
CommentOutlined
|
|
} from '@ant-design/icons-vue'
|
|
import { chatApi } from '@/api/chat'
|
|
import { formatTime, formatMessage } from '@/utils/format'
|
|
import EmotionAnalysis from './EmotionAnalysis.vue'
|
|
|
|
const props = defineProps({
|
|
conversation: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(['continue'])
|
|
|
|
// 响应式数据
|
|
const loading = ref(false)
|
|
const messages = ref([])
|
|
|
|
// 方法
|
|
const getStatusColor = (status) => {
|
|
const colorMap = {
|
|
active: 'success',
|
|
ended: 'default',
|
|
archived: 'warning'
|
|
}
|
|
return colorMap[status] || 'default'
|
|
}
|
|
|
|
const getStatusText = (status) => {
|
|
const textMap = {
|
|
active: '进行中',
|
|
ended: '已结束',
|
|
archived: '已归档'
|
|
}
|
|
return textMap[status] || status
|
|
}
|
|
|
|
const fetchMessages = async () => {
|
|
try {
|
|
loading.value = true
|
|
const response = await chatApi.getMessages(props.conversation.conversationId)
|
|
if (response.success) {
|
|
messages.value = response.data || []
|
|
}
|
|
} catch (error) {
|
|
console.error('获取消息失败:', error)
|
|
message.error('获取消息失败')
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
const exportConversation = () => {
|
|
try {
|
|
// 生成导出内容
|
|
const exportContent = generateExportContent()
|
|
|
|
// 创建下载链接
|
|
const blob = new Blob([exportContent], { type: 'text/plain;charset=utf-8' })
|
|
const url = URL.createObjectURL(blob)
|
|
const link = document.createElement('a')
|
|
link.href = url
|
|
link.download = `${props.conversation.title}_${formatTime(props.conversation.createTime, 'YYYY-MM-DD')}.txt`
|
|
document.body.appendChild(link)
|
|
link.click()
|
|
document.body.removeChild(link)
|
|
URL.revokeObjectURL(url)
|
|
|
|
message.success('对话已导出')
|
|
} catch (error) {
|
|
console.error('导出对话失败:', error)
|
|
message.error('导出失败')
|
|
}
|
|
}
|
|
|
|
const generateExportContent = () => {
|
|
let content = `对话标题: ${props.conversation.title}\n`
|
|
content += `创建时间: ${formatTime(props.conversation.createTime)}\n`
|
|
content += `更新时间: ${formatTime(props.conversation.updateTime)}\n`
|
|
content += `消息数量: ${props.conversation.messageCount || 0}\n`
|
|
content += `对话状态: ${getStatusText(props.conversation.status)}\n`
|
|
content += '\n' + '='.repeat(50) + '\n\n'
|
|
|
|
messages.value.forEach(msg => {
|
|
const sender = msg.sender === 'user' ? '用户' : 'AI助手'
|
|
content += `[${formatTime(msg.timestamp)}] ${sender}:\n`
|
|
content += `${msg.content}\n\n`
|
|
|
|
if (msg.emotionAnalysis) {
|
|
content += `情绪分析: ${msg.emotionAnalysis.primaryEmotion || '未知'}\n\n`
|
|
}
|
|
})
|
|
|
|
return content
|
|
}
|
|
|
|
const shareConversation = async () => {
|
|
try {
|
|
// 生成分享链接或内容
|
|
const shareText = `我在情绪博物馆进行了一次有意义的AI对话：${props.conversation.title}`
|
|
|
|
if (navigator.share) {
|
|
await navigator.share({
|
|
title: '情绪博物馆 - AI对话分享',
|
|
text: shareText,
|
|
url: window.location.href
|
|
})
|
|
} else {
|
|
// 复制到剪贴板
|
|
await navigator.clipboard.writeText(shareText)
|
|
message.success('分享内容已复制到剪贴板')
|
|
}
|
|
} catch (error) {
|
|
console.error('分享失败:', error)
|
|
message.error('分享失败')
|
|
}
|
|
}
|
|
|
|
// 组件挂载
|
|
onMounted(() => {
|
|
fetchMessages()
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.conversation-detail {
|
|
.conversation-info {
|
|
background: var(--bg-secondary);
|
|
padding: var(--spacing-md);
|
|
border-radius: var(--border-radius);
|
|
margin-bottom: var(--spacing-lg);
|
|
|
|
.info-row {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: var(--spacing-sm);
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.info-label {
|
|
font-weight: 500;
|
|
color: var(--text-secondary);
|
|
min-width: 80px;
|
|
}
|
|
|
|
.info-value {
|
|
color: var(--text-primary);
|
|
}
|
|
}
|
|
}
|
|
|
|
.messages-section {
|
|
margin-bottom: var(--spacing-lg);
|
|
|
|
.section-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-xs);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
margin-bottom: var(--spacing-md);
|
|
padding-bottom: var(--spacing-sm);
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.messages-list {
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
|
|
.message-item {
|
|
margin-bottom: var(--spacing-lg);
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.message-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: var(--spacing-sm);
|
|
|
|
.message-sender {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-xs);
|
|
font-weight: 500;
|
|
color: var(--text-primary);
|
|
|
|
.anticon {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
.message-time {
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
}
|
|
}
|
|
|
|
.message-content {
|
|
.message-text {
|
|
padding: var(--spacing-md);
|
|
border-radius: var(--border-radius);
|
|
line-height: 1.6;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.emotion-section {
|
|
margin-top: var(--spacing-sm);
|
|
}
|
|
}
|
|
|
|
&.user {
|
|
.message-text {
|
|
background: var(--gradient-primary);
|
|
color: white;
|
|
margin-left: var(--spacing-xl);
|
|
}
|
|
}
|
|
|
|
&.assistant {
|
|
.message-text {
|
|
background: var(--bg-primary);
|
|
border: 1px solid var(--border-color);
|
|
margin-right: var(--spacing-xl);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.empty-messages {
|
|
text-align: center;
|
|
padding: var(--spacing-xxl);
|
|
color: var(--text-secondary);
|
|
|
|
.empty-icon {
|
|
font-size: 48px;
|
|
margin-bottom: var(--spacing-md);
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
}
|
|
|
|
.action-buttons {
|
|
display: flex;
|
|
gap: var(--spacing-md);
|
|
justify-content: center;
|
|
padding-top: var(--spacing-lg);
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
}
|
|
</style>
|