前台插件
// 插件
import MarkdownItVue from "markdown-it-vue";
import "markdown-it-vue/dist/markdown-it-vue.css";
安装
npm install markdown-it-vue --save
智能问答页面渲染代码
<div
class="message-content-box"
v-for="(item, index) in messages"
:key="index"
>
<!-- 人类 -->
<div class="msg-line human clearfix" v-if="item.role === 'human'">
<div class="msg-box" v-html="item.context"></div>
<el-image
:src="humanImage"
fit="cover"
class="ml-10 w-50 icon-img"
></el-image>
</div>
<!-- AI -->
<div class="msg-line view clearfix" v-if="item.role === 'view'">
<el-image
:src="smallRobotImage"
fit="cover"
class="mr-10 w-50 icon-img"
></el-image>
<el-popover
popper-class="operate-popover"
placement="bottom-end"
:visible-arrow="false"
trigger="hover"
>
<markdown-it-vue
slot="reference"
class="msg-box"
:content="item.context"
:options="options"
/>
<content-btns @copy="copy(item.context)"></content-btns>
</el-popover>
</div>
</div>
通过网盘分享的文件:ai对接.rar
链接: https://pan.baidu.com/s/1zyjmpVxg31oOh85HJeG-4w