<script lang="ts" setup>
|
interface ChatMessage {
|
question: string
|
answer: string
|
timestamp?: string
|
}
|
|
defineProps<{
|
msg: ChatMessage
|
}>()
|
</script>
|
|
<template>
|
<div class="chat">
|
<!-- 时间显示 -->
|
<div v-if="msg.timestamp" class="timestamp">
|
{{ msg.timestamp }}
|
</div>
|
|
<!-- 问题 -->
|
<div class="message-right">
|
<div class="chat-bubble chat-right">
|
{{ msg.question }}
|
</div>
|
<!-- <div class="avatar">
|
<img src="../assets/images/user-avatar.png" alt="user" />
|
</div> -->
|
</div>
|
|
<!-- AI回答 -->
|
<div class="message-left">
|
<div class="avatar">
|
<img src="../assets/images/image3.png" alt="AI" />
|
</div>
|
<div class="chat-bubble chat-left">
|
<template v-if="msg.answer.includes('《')">
|
<div class="book-info">
|
<div class="book-header">
|
<h3>AI智能图书检索助手为您检索到以下关于月亮的书，供您浏览如下：</h3>
|
</div>
|
<div class="book-content">
|
<div class="book-image">
|
<img src="../assets/book-cover.png" alt="book cover" />
|
</div>
|
<div class="book-details">
|
<h4>《月亮与六便士》</h4>
|
<p>责任者：毛姆, 张云飞著</p>
|
<p>出版社：中国人民大学出版社</p>
|
<p>ISBN号：978-7-300-25494-4</p>
|
<p>入藏时间：20220226</p>
|
<p>索书号：V1-18/12.3354(ENG)</p>
|
<p>馆藏地：外文图书馆2楼-1.8954</p>
|
</div>
|
</div>
|
<div class="book-description">
|
<h4>图书简介:</h4>
|
<p>
|
本书以生动流畅笔触描写了卡尔·马克思的一生，展现了他作为思想家革命家的非凡历程，全书阐述马克思的学术思想实践与个人生活原升，深入剖析其对资本主义的批判及对人类解放的追求。作者将马克思比作"人间的苦罗米修斯"，凸显其为无产阶级和全人类福祉不懈奋斗的精神。语言通俗易懂，适合对马克思主义思想及其发展历程感兴趣的读者阅读。
|
</p>
|
</div>
|
<div class="book-actions">
|
<button class="action-btn">浏览更多</button>
|
<button class="action-btn">继续对话</button>
|
</div>
|
</div>
|
</template>
|
<template v-else>
|
{{ msg.answer }}
|
</template>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<style scoped>
|
.chat {
|
max-width: 1200px;
|
margin: 0 auto;
|
}
|
|
.timestamp {
|
text-align: center;
|
color: #999;
|
font-size: 12px;
|
margin: 10px 0;
|
}
|
|
.message-left,
|
.message-right {
|
display: flex;
|
align-items: flex-start;
|
margin: 20px 0;
|
}
|
|
.message-right {
|
flex-direction: row-reverse;
|
}
|
|
.avatar {
|
width: 60px;
|
height: 60px;
|
margin-right: 10px;
|
}
|
|
.avatar img {
|
width: 100%;
|
height: 100%;
|
border-radius: 50%;
|
}
|
|
.chat-bubble {
|
max-width: 70%;
|
padding: 15px 30px;
|
border-radius: 50px;
|
font-size: 14px;
|
line-height: 1.5;
|
white-space: pre-line;
|
word-break: break-all;
|
}
|
|
.chat-left {
|
background-color: #fff;
|
margin-left: 10px;
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
}
|
|
.chat-right {
|
background-color: #af8b56;
|
margin-right: 10px;
|
color: #fff;
|
}
|
|
.book-info {
|
width: 100%;
|
}
|
|
.book-header {
|
margin-bottom: 15px;
|
}
|
|
.book-content {
|
display: flex;
|
gap: 20px;
|
margin-bottom: 20px;
|
}
|
|
.book-image {
|
width: 120px;
|
height: 160px;
|
}
|
|
.book-image img {
|
width: 100%;
|
height: 100%;
|
object-fit: cover;
|
}
|
|
.book-details {
|
flex: 1;
|
}
|
|
.book-details h4 {
|
margin: 0 0 10px 0;
|
color: #333;
|
}
|
|
.book-details p {
|
margin: 5px 0;
|
color: #666;
|
font-size: 13px;
|
}
|
|
.book-description {
|
margin: 20px 0;
|
}
|
|
.book-description h4 {
|
margin-bottom: 10px;
|
color: #333;
|
}
|
|
.book-description p {
|
color: #666;
|
line-height: 1.6;
|
font-size: 14px;
|
}
|
|
.book-actions {
|
display: flex;
|
gap: 10px;
|
margin-top: 20px;
|
}
|
|
.action-btn {
|
padding: 8px 16px;
|
border: none;
|
border-radius: 20px;
|
background-color: #b4946e;
|
color: white;
|
cursor: pointer;
|
font-size: 14px;
|
}
|
|
.action-btn:hover {
|
background-color: #a38461;
|
}
|
</style>
|
