hz/learning-system-portal
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git synced 2025-12-06 17:36:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(portal): 实现消息组件支持 Mermaid 图表渲染

Browse Source 
- 添加 markdown-it-mermaid 插件支持 Mermaid 语法
- 集成 mermaid 库并初始化配置
- 实现打字机效果与 Mermaid 渲染结合
-优化案例引用展示逻辑与样式- 添加推荐问题展示功能
- 改进消息组件的响应式与样式细节
- 修复组件销毁时定时器未清除的问题
- 更新依赖包引入 Mermaid 相关库
This commit is contained in:
陈昱达
2025-10-14 15:32:20 +08:00
committed by joshen
parent b7273410a0
commit 90622d6ebc
3 changed files with 332 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@@ -15,6 +15,7 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"@mermaid-js/parser": "^0.6.3",
"axios": "^0.21.4",
"core-js": "^3.6.5",
"driver.js": "^0.9.8",
@@ -30,6 +31,8 @@
"katex": "^0.16.25",
"markdown-it": "^14.1.0",
"markdown-it-highlightjs": "^4.2.0",
"markdown-it-mermaid": "^0.2.5",
"mermaid": "^8.13.10",
"mockjs": "^1.1.0",
"moment": "^2.29.1",
"nprogress": "^0.2.0",

542
src/views/portal/case/components/messages.vue
View File

@@ -1,176 +1,218 @@
<!--消息渲染-->
<template>
<div class="messages">
<!-- 机器人消息 -->
<div v-if="messageData.isBot" class="bot-message">
<!-- 思考中提示 -->
<div v-if="messageData.thinkText" class="bot-think" v-katex:auto v-html="md.render(messageData.thinkText)"></div>
<!-- 主要回复内容 -->
<div
ref="contentContainer"
class="message-content"
v-katex:auto
v-html="displayText"
></div>
<!-- 引用案例 -->
<div v-if="messageData.caseRefers && messageData.caseRefers.length > 0 && messageData.textCompleted" class="case-refers">
<div class="case-refers-title">
<span><i class="iconfont icon-think"></i> 引用案例</span>
<span v-if="shouldShowMoreButton" class="more" @click="toggleShowAllCaseRefers">
{{ showAllCaseRefers ? '收起' : '查看更多' }}
</span>
</div>
<div class="case-refers-list">
<div
v-for="item in displayedCaseRefers"
:key="item.caseId"
class="case-refers-item"
>
<div class="case-refers-item-title">
<a @click="toUrl(item)" class="title">{{ item.title }}</a>
<span class="case-refers-item-timer">{{ item.uploadTime }}</span>
</div>
<div class="case-refers-item-author">
<span class="user"></span>
<span>{{ item.authorName }}</span>
<span class="case-inter-orginInfo">{{ item.orgInfo }}</span>
</div>
<div class="case-refers-item-keywords">
<span v-for="keyword in item.keywords" :key="keyword">{{ keyword }}</span>
</div>
<div class="message-content case-content" v-html="md.render(item.content)"></div>
</div>
</div>
</div>
</div>
<!-- 用户消息 -->
<div v-else class="user-message">
<div class="message-text" v-html="messageData.text"></div>
</div>
<!-- 推荐问题 -->
<div v-if="suggestions && suggestions.length > 0" class="suggestions">
<div class="suggestions-title">💡 推荐问题</div>
<div class="suggestions-list">
<button
v-for="(item, index) in suggestions"
:key="index"
class="suggestions-item"
@click="$emit('suggestion-click', item)"
>
{{ item }}
</button>
</div>
</div>
</div>
</template>
<script>
import MarkdownIt from 'markdown-it';
import highlight from 'markdown-it-highlightjs'
import "highlight.js/styles/a11y-dark.css"
import katex from "katex"
import highlight from 'markdown-it-highlightjs';
import 'highlight.js/styles/a11y-dark.css';
import markdownItMermaid from 'markdown-it-mermaid';
import mermaid from 'mermaid';
// 初始化 Mermaid
mermaid.initialize({ startOnLoad: false });
const md = new MarkdownIt({
}).use(highlight);
html: true,
linkify: true,
typographer: true,
});
md.use(highlight).use(markdownItMermaid);
export default {
name: "message",
name: 'Message',
props: {
messageData: {
type: Object,
default: function () {
return {}
}
required: true,
default: () => ({}),
},
suggestions: {
type: Array,
default: () => []
}
default: () => [],
},
},
data() {
return {
md,
displayText: '',
typingTimer: null,
typingSpeed: 30, // 打字机速度（毫秒/字符）
showAllCaseRefers: false // 控制是否显示所有案例引用
}
typingSpeed: 30, // 毫秒/字符
showAllCaseRefers: false,
};
},
computed: {
// 计算需要显示的案例引用
displayedCaseRefers() {
if (this.showAllCaseRefers || !this.messageData.caseRefers) {
return this.messageData.caseRefers || [];
}
return this.messageData.caseRefers.slice(0, 3);
},
// 判断是否需要显示"查看更多"按钮
shouldShowMoreButton() {
return this.messageData.caseRefers && this.messageData.caseRefers.length > 3;
}
},
},
watch: {
'messageData.text': {
handler(newVal) {
if (newVal && this.messageData.isBot && !this.messageData.typing) {
// this.startTyping(newVal)
this.displayText = newVal || ''
if (!newVal) {
this.displayText = '';
return;
}
if (this.messageData.isBot && !this.messageData.typing) {
this.startTyping(newVal); // 启动打字机效果
} else {
this.displayText = newVal || ''
this.displayText = this.md.render(newVal);
this.$nextTick(this.renderMermaid); // 直接渲染 Mermaid
}
},
immediate: true
}
immediate: true,
},
},
methods: {
toUrl(item) {
console.log(item);
this.$router.push({
path: '/case/detail',
query: {
id: item.caseId
}
})
query: { id: item.caseId },
});
},
startTyping(text) {
// 清除之前的定时器
// 正确的打字机效果：先整体渲染 Markdown，再逐字显示 HTML
startTyping(fullText) {
const renderedText = this.md.render(fullText);
this.displayText = '';
let index = 0;
if (this.typingTimer) {
clearInterval(this.typingTimer)
this.typingTimer = null
clearInterval(this.typingTimer);
}
// 初始化
// this.displayText = ''
let index = 0
// 开始打字机效果
this.typingTimer = setInterval(() => {
if (index < text.length) {
this.displayText += md.render(text.charAt(index))
index++
if (index < renderedText.length) {
this.displayText += renderedText[index];
index++;
} else {
// 打字完成，清除定时器
clearInterval(this.typingTimer)
this.typingTimer = null
clearInterval(this.typingTimer);
this.typingTimer = null;
this.$nextTick(this.renderMermaid); // 渲染 Mermaid 图表
}
}, this.typingSpeed)
}, this.typingSpeed);
},
// 切换显示所有案例引用
// 触发 Mermaid 渲染
renderMermaid() {
this.$nextTick(() => {
const mermaidEls = this.$el.querySelectorAll('.mermaid');
if (mermaidEls.length > 0) {
try {
// mermaid 8.x 版本使用 init 方法而不是 run
if (typeof mermaid.init === 'function') {
mermaid.init(undefined, '.mermaid');
} else if (mermaid.default && typeof mermaid.default.init === 'function') {
mermaid.default.init(undefined, '.mermaid');
}
} catch (e) {
console.warn('Mermaid 渲染失败:', e);
}
}
});
},
// 切换案例引用显示数量
toggleShowAllCaseRefers() {
this.showAllCaseRefers = !this.showAllCaseRefers;
}
// 切换后重新渲染 Mermaid（如果内容中有图表）
this.$nextTick(this.renderMermaid);
},
},
beforeDestroy() {
// 组件销毁前清除定时器
if (this.typingTimer) {
clearInterval(this.typingTimer)
this.typingTimer = null
clearInterval(this.typingTimer);
this.typingTimer = null;
}
}
}
},
};
</script>
<template>
<div class="messages">
<!-- 机器人消息-->
<div v-if="messageData.isBot" class="bot-message">
<div class="bot-think" v-if="messageData.thinkText" v-katex:auto v-html="md.render(messageData.thinkText)"></div>
<div v-katex:auto v-html="md.render(displayText)" ></div>
<div v-if="messageData.caseRefers && messageData.caseRefers.length > 0 && messageData.textCompleted">
<div class="case-refers">
<div class="case-refers-title">
<span> <i class="iconfont icon-think"></i> 引用案例</span>
<span v-if="shouldShowMoreButton" class="more" @click="toggleShowAllCaseRefers">
{{ showAllCaseRefers ? '收起' : '查看更多' }}
</span>
</div>
<div class="case-refers-list">
<div class="case-refers-item" v-for="item in displayedCaseRefers" :key="item.caseId">
<div class="case-refers-item-title">
<a @click="toUrl(item)" class="title">{{ item.title }}</a>
<span class="case-refers-item-timer">{{item.uploadTime}}</span>
</div>
<div class="case-refers-item-author">
<span class="user"></span>
<span>{{ item.authorName }}</span>
<span class="case-inter-orginInfo">{{ item.orgInfo }}</span>
</div>
<div class="case-refers-item-keywords">
<span v-for="keyword in item.keywords" :key="keyword">{{ keyword }}</span>
</div>
<div class="message-content">{{item.content}}</div>
</div>
</div>
</div>
</div>
</div>
<!-- 非机器人消息-->
<div v-else class="user-message">
<div class="message-text">
<div v-html="messageData.text"></div>
</div>
</div>
<!-- 推荐问题-->
<!-- <div v-if="suggestions && suggestions.length > 0">-->
<!-- <div class="suggestions">-->
<!-- <div class="suggestions-title">-->
<!-- <span>推荐问题</span>-->
<!-- </div>-->
<!-- <div class="suggestions-list">-->
<!-- <div class="suggestions-item" v-for="item in suggestions">-->
<!-- <div class="suggestions-item-title">-->
<!-- {{item}}-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
</div>
</template>
<style scoped lang="scss">
::v-deep .mermaid{
width: 100%;
height: auto;
}
::v-deep svg[id^="mermaid-"]{
width: 100%;
height: 100%;
}
.messages {
width: 100%;
word-wrap: break-word;
.bot-message {
background-color: #fff;
@@ -192,125 +234,185 @@ export default {
left: 0;
top: -3px;
transform: scaleX(0.5);
margin-right: 5px;
}
}
.case-refers {
margin-top: 10px;
.message-content {
font-size: 14px;
line-height: 1.6;
}
.case-refers-title {
font-weight: bold;
margin-bottom: 5px;
display: flex;
align-items: center;
justify-content: space-between;
.icon-think {
background-image: url("./map.svg") ;
width: 15px;
height: 13px;
display: inline-block;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.more{
font-size: 10px;
padding: 2px 6px;
background-color: #F4F7FD;
border-radius: 5px;
color:#577EE1;font-weight: unset;
cursor: pointer;
}
}
.case-refers-list {
display: flex;
flex-direction: column;
.case-refers-item {
//margin-right: 10px;
margin-bottom: 5px;
border: 1px solid rgba(144, 147, 153, 0.44);
padding: 5px;
border-radius: 5px;
.case-refers-item-title {
font-size: 14px;
margin-bottom: 5px;
font-weight: 600;
color: #000;
display: flex;
align-items: flex-end;
justify-content: space-between;
.title{
max-width: 70% ;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.case-refers-item-timer{
font-size: 10px;
margin-right: 20px;
color:#cecece;
font-weight: unset!important;
}
}
.case-refers-item-author{
display: flex;
align-items: center;
.user{
background-image: url("./user.svg");
width: 15px;
height: 15px;
display: inline-block;
background-repeat: no-repeat;
background-size: 100% 100%;
margin-right: 5px;
}
.case-inter-orginInfo{
font-size: 10px;
color: rgba(144, 147, 153, 0.44);margin-left: 5px;
}
}
.case-refers-item-author,
.case-refers-item-keywords {
font-size: 12px;
font-weight: 600;
color: #000;
}
}
}
.case-content {
font-size: 12px !important;
margin-top: 8px;
padding: 6px 10px;
background-color: #f9f9f9;
border-radius: 4px;
border: 1px solid #eee;
}
}
.user-message {
float: right;
padding: 5px 15px;
box-sizing: border-box;
background-color: rgba(228, 231, 237, 1);
border-radius: 5px;
padding: 8px 15px;
max-width: 80%;
background-color: #e4e7ed;
border-radius: 18px;
margin-bottom: 10px;
font-size: 14px;
word-break: break-word;
}
.case-refers-item-keywords{
margin-top: 5px;
span{
padding: 1px 4px;
background-color: #F4F7FD;
border-radius: 5px;
font-size: 10px!important;
color:#577EE1
/* ========== 案例引用样式 ========== */
.case-refers {
margin-top: 12px;
.case-refers-title {
font-weight: bold;
margin-bottom: 8px;
display: flex;
align-items: center;
justify-content: space-between;
color: #333;
.icon-think {
background-image: url('./map.svg');
width: 15px;
height: 13px;
display: inline-block;
background-repeat: no-repeat;
background-size: 100% 100%;
margin-right: 6px;
}
.more {
font-size: 12px;
padding: 2px 8px;
background-color: #f4f7fd;
border-radius: 5px;
color: #577ee1;
font-weight: normal;
cursor: pointer;
}
}
span + span{
margin-left: 8px;
.case-refers-list {
display: flex;
flex-direction: column;
gap: 8px;
.case-refers-item {
border: 1px solid rgba(144, 147, 153, 0.44);
padding: 8px;
border-radius: 6px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
.case-refers-item-title {
font-size: 14px;
margin-bottom: 6px;
font-weight: 600;
color: #000;
display: flex;
align-items: center;
justify-content: space-between;
.title {
max-width: 70%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #1a73e8;
cursor: pointer;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
.case-refers-item-timer {
font-size: 11px;
color: #aaa;
font-weight: normal;
}
}
.case-refers-item-author {
display: flex;
align-items: center;
font-size: 12px;
color: #555;
margin-bottom: 5px;
.user {
background-image: url('./user.svg');
width: 15px;
height: 15px;
display: inline-block;
background-repeat: no-repeat;
background-size: 100% 100%;
margin-right: 6px;
}
.case-inter-orginInfo {
font-size: 11px;
color: #999;
margin-left: 6px;
}
}
.case-refers-item-keywords {
margin-top: 4px;
font-size: 12px;
span {
padding: 2px 6px;
background-color: #f4f7fd;
border-radius: 5px;
font-size: 11px !important;
color: #577ee1;
}
span + span {
margin-left: 8px;
}
}
}
}
}
.message-content{
font-size: 12px!important;
margin-top: 5px;
/* ========== 推荐问题 ========== */
.suggestions {
margin-top: 10px;
font-size: 14px;
.suggestions-title {
font-weight: bold;
margin-bottom: 6px;
color: #333;
}
.suggestions-list {
display: flex;
flex-direction: column;
gap: 6px;
.suggestions-item {
padding: 6px 10px;
background-color: #f0f4fc;
border: none;
border-radius: 6px;
text-align: left;
color: #1a73e8;
cursor: pointer;
font-size: 13px;
transition: background-color 0.2s;
&:hover {
background-color: #e1e8f5;
}
}
}
}
}
</style>

7
vue.config.js
View File

@@ -57,6 +57,13 @@ module.exports = {
// set svg-sprite-loader
config.plugins.delete('preload')
config.plugins.delete('prefetch')
// 添加对 mathxyjax3 的处理规则
config.module
.rule('mathxyjax3')
.test(/node_modules[\/\\]mathxyjax3[\/\\].*\.js$/)
.use('null-loader')
.loader('null-loader')
.end()
config.module
.rule('svg')
.exclude.add(resolve('src/icons'))