feat(portal): 支持消息内容的 Markdown 和 LaTeX 渲染- 引入 markdown-it 与 highlight.js 实现 Markdown 渲染- 集成 KaTeX 支持数学公式显示

- 更新消息组件以支持实时渲染 Markdown 与 LaTeX
- 调整 AI 对话框宽度为百分比布局
- 优化初始欢迎文案格式并添加段落间距
- 添加必要的依赖项：katex、markdown-it、markdown-it-highlightjs 等- 配置 vue-katex 插件并定义分隔符规则
- 使用 null-loader 处理部分资源加载问题

package.json

@@ -23,9 +23,13 @@
     "element-ui": "^2.15.7",
     "file-saver": "^2.0.5",
     "fuse.js": "^6.4.6",
+    "highlight.js": "^11.11.1",
     "image-conversion": "^2.1.1",
     "jsencrypt": "^3.2.1",
     "json-bigint": "^1.0.0",
+    "katex": "^0.16.25",
+    "markdown-it": "^14.1.0",
+    "markdown-it-highlightjs": "^4.2.0",
     "mockjs": "^1.1.0",
     "moment": "^2.29.1",
     "nprogress": "^0.2.0",
@@ -43,6 +47,7 @@
     "vue": "^2.6.11",
     "vue-awesome-swiper": "^3.1.3",
     "vue-cookies": "^1.7.4",
+    "vue-katex": "^0.5.0",
     "vue-pdf": "^4.2.0",
     "vue-quill-editor": "^3.0.6",
     "vue-router": "^3.5.2",
@@ -60,6 +65,7 @@
     "html-webpack-plugin": "^5.5.0",
     "less": "^4.1.1",
     "less-loader": "^6.2.0",
+    "null-loader": "^4.0.1",
     "sass": "^1.32.13",
     "sass-loader": "^10.1.0",
     "vue-template-compiler": "^2.6.11"

src/main.js

@@ -3,6 +3,22 @@ import App from './App.vue'
 import router from './router'
 import store from './store'
 
+import vueKatexEs from "vue-katex";
+import "katex/dist/katex.min.css"
+
+
+Vue.use(vueKatexEs,{
+  globalOptions:{
+    delimiters:[
+      {left:"$$",right:"$$",display:true},
+      {left:"$",right:"$",display:false},
+      {left:"\\[",right:"\\]",display:true},
+      {left:"\\(",right:"\\)",display:false}
+    ],
+    throwOnError:true
+  }
+})
+
 //import './mock/index'
 
 import xpage from '@/utils/xpage'

src/views/portal/case/AICall.vue

@@ -4,7 +4,7 @@
     <el-dialog
       v-if="dialogVisible"
       :visible="true"
-      width="800px"
+      width="65%"
       :close-on-click-modal="false"
       :show-close="true"
       @close="onClose"
@@ -128,10 +128,10 @@ export default {
         {
           typing:true,
           isBot: true, // 是否为机器人
-          text: `<p><b>您好！我是京东方案侧智能问答助手，随时为您服务。</b></p>
+          text: `\n\n **您好！我是京东方案侧智能问答助手，随时为您服务。** \n\n
-          <p>我可以帮您快速查找和解读平台内的各类案例内容。只需输入您想了解的问题或关键词，我会从案例库中精准匹配相关信息，并提供清晰的解答。每条回答都会附上来源链接，方便您随时查阅原始案例全文。</p>
+          \n\n我可以帮您快速查找和解读平台内的各类案例内容。只需输入您想了解的问题或关键词，我会从案例库中精准匹配相关信息，并提供清晰的解答。每条回答都会附上来源链接，方便您随时查阅原始案例全文。\n\n
-          <p>我还会根据您的提问，智能推荐相关延伸问题，助您更高效地探索知识、解决问题。</p>
+          \n\n我还会根据您的提问，智能推荐相关延伸问题，助您更高效地探索知识、解决问题。\n\n
-          <p>现在，欢迎随时向我提问，开启高效的知识查询体验吧！</p>`
+          \n\n现在，欢迎随时向我提问，开启高效的知识查询体验吧！\n\n `
         }
       ],
       suggestions:[],

src/views/portal/case/components/messages.vue

@@ -1,5 +1,12 @@
 <!--消息渲染-->
 <script>
+import MarkdownIt from 'markdown-it';
+import highlight from 'markdown-it-highlightjs'
+import "highlight.js/styles/a11y-dark.css"
+import katex from "katex"
+
+const md = new MarkdownIt({
+}).use(highlight);
 export default {
   name: "message",
   props: {
@@ -16,6 +23,7 @@ export default {
   },
   data() {
     return {
+      md,
       displayText: '',
       typingTimer: null,
       typingSpeed: 30, // 打字机速度（毫秒/字符）
@@ -72,7 +80,7 @@ export default {
       // 开始打字机效果
       this.typingTimer = setInterval(() => {
         if (index < text.length) {
-          this.displayText += text.charAt(index)
+          this.displayText += md.render(text.charAt(index))
           index++
         } else {
           // 打字完成，清除定时器
@@ -101,8 +109,8 @@ export default {
  <div class="messages">
    <!--          机器人消息-->
    <div v-if="messageData.isBot" class="bot-message">
-     <div class="bot-think" v-if="messageData.thinkText" v-html="messageData.thinkText"></div>
+     <div class="bot-think" v-if="messageData.thinkText" v-katex:auto v-html="md.render(messageData.thinkText)"></div>
-     <div v-html="displayText" ></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">