mirror of
http://112.124.100.131/ebiz-ai/ebiz-base-ai.git
synced 2025-12-11 03:46:50 +08:00
初始化
This commit is contained in:
陈昱达
222
src/views/AI/components/message.vue
Normal file
222
src/views/AI/components/message.vue
Normal file
@@ -0,0 +1,222 @@
|
||||
<template>
|
||||
<section>
|
||||
<div v-for="(message, index) in messagesList" :key="index" class="message-item">
|
||||
<!--用户消息-->
|
||||
<div v-if="message.type === 'user'" class="user-message">
|
||||
<p>{{ message.text }}</p>
|
||||
</div>
|
||||
<!--机器人消息-->
|
||||
<div v-else-if="message.type === 'bot'" class="bot-message">
|
||||
<span v-if="message.isThink">
|
||||
<!-- loading-->
|
||||
<span class="speakLoadingToast pv10">
|
||||
<van-loading type="spinner" color="#2e5ca9" size="20px" v-if="!message.text" />
|
||||
<span class="loading-text">{{ message.text ? '思考完成' : '思考中...' }}</span>
|
||||
<van-icon name="arrow-up" :class="message.showThink ? 'rate360' : 'rate180'" @click="showThink(message)" v-if="message.think" />
|
||||
</span>
|
||||
<!--开启思考-->
|
||||
<p v-html="md.render(message.think)" v-if="message.think && message.showThink" class="thinkText" />
|
||||
</span>
|
||||
<div>
|
||||
<p v-html="md.render(message.text)" v-if="message.text"></p>
|
||||
<span class="speakLoadingToast pv10" v-else>
|
||||
<van-loading type="spinner" color="#2e5ca9" size="20px" v-if="!message.text" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!--百宝箱-->
|
||||
<div v-else>
|
||||
<treasure-box :item="message"></treasure-box>
|
||||
</div>
|
||||
<!-- 新增点赞和踩按钮 -->
|
||||
<div class="reaction-buttons" v-if="message.type !== 'user'">
|
||||
<button @click="handleReaction(message, 'like')" class="like">
|
||||
<svg-icon :icon-class="message.isLike ? 'fillLike' : 'like'" class-name="chat-icon"></svg-icon> 有用
|
||||
</button>
|
||||
<button @click="handleReaction(message, 'dislike')" class="dislike">
|
||||
<svg-icon :icon-class="message.isDisLike ? 'fillDislike' : 'dislike'" style="width: 15px; height: 15px"></svg-icon>无用
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// icon
|
||||
import { Icon } from 'vant'
|
||||
import TreasureBox from '@/views/AI/components/treasureBox.vue'
|
||||
import MarkdownIt from 'markdown-it'
|
||||
import markdownItKatex from 'markdown-it-katex'
|
||||
// import mermaidItMarkdown from 'mermaid-it-markdown'
|
||||
|
||||
console.log(mermaidItMarkdown)
|
||||
const md = new MarkdownIt({
|
||||
html: true,
|
||||
linkify: true,
|
||||
typographer: true,
|
||||
})
|
||||
.use(markdownItKatex)
|
||||
// .use(mermaidItMarkdown)
|
||||
export default {
|
||||
name: 'message',
|
||||
components: { TreasureBox, [Icon.name]: Icon },
|
||||
props: {
|
||||
messagesList: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
isDeep: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
md,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showThink(message) {
|
||||
this.$set(message, 'showThink', !message.showThink)
|
||||
|
||||
console.log(message.showThink)
|
||||
},
|
||||
// 处理点赞和踩的逻辑
|
||||
handleReaction(message, type) {
|
||||
if (type === 'like') {
|
||||
this.$set(message, 'isLike', !message.isLike)
|
||||
this.$set(message, 'isDisLike', false)
|
||||
} else if (type === 'dislike') {
|
||||
this.$set(message, 'isDisLike', !message.isDisLike)
|
||||
this.$set(message, 'isLike', false)
|
||||
}
|
||||
// 触发父组件的更新事件
|
||||
this.$emit('update-message', { ...message })
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
// 主题颜色定义
|
||||
$primary-color: #2e5ca9; // 修复了 SCSS 变量的定义方式
|
||||
$primary-text-color: #f6aa21; // 修复了 SCSS 变量的定义方式
|
||||
$primary-trans-color: rgba(135, 162, 208, 0.5); // 使用rgba定义颜色，透明度为0.8
|
||||
|
||||
.message-item {
|
||||
all: initial;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
font-size: unset;
|
||||
|
||||
.user-message,
|
||||
.bot-message {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
p {
|
||||
background-color: $primary-color;
|
||||
color: #fff;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
//max-width: 70%;
|
||||
//max-width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.user-message {
|
||||
justify-content: end;
|
||||
}
|
||||
.bot-message {
|
||||
justify-content: start;
|
||||
background-color: #fff;
|
||||
border-radius: 5px;
|
||||
max-width: calc(80% + 20px);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.bot-avatar {
|
||||
margin-left: 10px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.thinkText {
|
||||
color: $primary-trans-color;
|
||||
padding-top: 0;
|
||||
}
|
||||
.speakLoadingToast {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: $primary-text-color;
|
||||
margin-left: 10px;
|
||||
.loading-text {
|
||||
color: $primary-trans-color;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
background-color: #fff;
|
||||
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
// 新增样式：点赞和踩按钮
|
||||
.reaction-buttons {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 5px;
|
||||
|
||||
button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 11px;
|
||||
padding: 2px 3px;
|
||||
border-radius: 5px;
|
||||
color: $primary-color;
|
||||
}
|
||||
|
||||
.dislike {
|
||||
color: $primary-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.rate360 {
|
||||
animation-duration: 0.5s;
|
||||
animation-fill-mode: both;
|
||||
animation-name: rate360;
|
||||
}
|
||||
.rate180 {
|
||||
animation-duration: 0.5s;
|
||||
animation-fill-mode: both;
|
||||
animation-name: rate180;
|
||||
}
|
||||
|
||||
@keyframes rate360 {
|
||||
0% {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
@keyframes rate180 {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user