feat: 项目初始化及当前全部内容提交
This commit is contained in:
@@ -0,0 +1,357 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user