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

@@ -0,0 +1,446 @@
+<template>
+  <div>
+    <!-- 最大化状态的弹窗 -->
+    <el-dialog
+      v-if="dialogVisible"
+      :visible="true"
+      width="65%"
+      :close-on-click-modal="false"
+      :show-close="true"
+      @close="onClose"
+      class="case-expert-dialog"
+      :modal="false"
+      :append-to-body="true"
+      :fullscreen="false"
+      top="10vh"
+      v-show="windowState === 'maximized'"
+    >
+      <!-- 标题 -->
+      <div slot="title" class="dialog-title">
+        <span>案例专家</span>
+        <el-button
+          type="text"
+          class="window-control-btn"
+          @click="minimizeWindow"
+        >
+          <i class="el-icon-minus"></i>
+        </el-button>
+      </div>
+
+      <!-- 内容区域 -->
+      <div class="content-wrapper">
+        <div
+          class="welcome-message"
+          ref="messageContainer"
+          @scroll="handleScroll"
+        >
+          <div class="message-text" v-for="(item, index) in messageList" :key="index">
+            <messages :messageData="item" :suggestions="suggestions"></messages>
+          </div>
+          <div class="message-suggestions" v-if="messageList.length > 0 && messageList[messageList.length-1].textCompleted">
+            <div class="suggestion-item" v-for="(item, index) in suggestions" :key="index">
+              <a @click="sendSuggestions(item)"> {{ item }} →</a>
+            </div>
+          </div>
+          <div v-if="isLoading" class="loading-message">
+            <div class="loading-dots">
+              <span></span>
+              <span></span>
+              <span></span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 输入框区域 -->
+        <send-message
+          v-model="AIContent"
+          :message-list="messageList"
+          :suggestions="suggestions"
+          @loading="handleLoading"
+          @update-message="updateMessage"
+          @update-suggestions="updateSuggestions"
+          @new-conversation="startNewConversation"
+          :disabled="isLoading"
+          class="input-area-wrapper"
+          ref="sendMessage"
+        />
+      </div>
+    </el-dialog>
+
+    <!-- 最小化状态的弹窗 -->
+    <div
+      class="minimized-window"
+      v-show="windowState === 'minimized' && showMinimizedWindow"
+      @click="onMinimizedWindowClick"
+    >
+      <div class="minimized-content">
+        <span class="window-title">案例专家</span>
+        <el-button
+          type="text"
+          class="window-control-btn"
+          @click.stop="onMinimizedWindowClick"
+        >
+          <i class="el-icon-full-screen"></i>
+        </el-button>
+      </div>
+      <div class="minimized-message">
+        <div v-if="messageList.length <= 1 && messageList[0].isBot">
+          当前暂无对话内容，去创建对话吧
+        </div>
+        <div v-else>
+          {{ getLastUserMessage() }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import messages from './components/messages.vue'
+import sendMessage from './components/sendMessage.vue'
+
+export default {
+  name: 'CaseExpertDialog',
+  props: {
+    dialogVisible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  components: {
+    messages,
+    sendMessage
+  },
+  computed: {
+    ...mapState('app', ['showAICallMinimized']),
+    showMinimizedWindow() {
+      // 只有在Vuex状态为true时才显示最小化窗口
+      return this.showAICallMinimized;
+    }
+  },
+  data() {
+    return {
+      AIContent: '',
+      isLoading: false,
+      windowState: 'maximized', // 'maximized' 或 'minimized'
+      messageList: [
+        {
+          typing:true,
+          isBot: true, // 是否为机器人
+          text: `\n\n **您好！我是京东方案侧智能问答助手，随时为您服务。** \n\n
+          \n\n我可以帮您快速查找和解读平台内的各类案例内容。只需输入您想了解的问题或关键词，我会从案例库中精准匹配相关信息，并提供清晰的解答。每条回答都会附上来源链接，方便您随时查阅原始案例全文。\n\n
+          \n\n我还会根据您的提问，智能推荐相关延伸问题，助您更高效地探索知识、解决问题。\n\n
+          \n\n现在，欢迎随时向我提问，开启高效的知识查询体验吧！\n\n `
+        }
+      ],
+      suggestions:[],
+      isAutoScroll: true // 是否自动滚动
+    }
+  },
+  watch: {
+    dialogVisible(newVal) {
+      console.log(newVal);
+      // 移除之前的逻辑，因为现在通过事件机制处理状态恢复
+    },
+    messageList: {
+      handler() {
+        this.$nextTick(() => {
+          this.scrollToBottom();
+        });
+      },
+      deep: true
+    }
+  },
+  methods: {
+    onClose() {
+      console.log('关闭弹窗')
+      this.$emit('close')
+      // 可以在这里执行其他逻辑
+    },
+
+    minimizeWindow() {
+      this.windowState = 'minimized';
+    },
+
+    maximizeWindow() {
+      this.windowState = 'maximized';
+    },
+
+    getLastUserMessage() {
+      // 从后往前找用户消息
+      for (let i = this.messageList.length - 1; i >= 0; i--) {
+        if (!this.messageList[i].isBot) {
+          // 移除HTML标签只返回纯文本
+          const tempDiv = document.createElement('div');
+          tempDiv.innerHTML = this.messageList[i].text;
+          return tempDiv.textContent || tempDiv.innerText || '';
+        }
+      }
+      return '';
+    },
+
+    // 处理加载状态
+    handleLoading(status) {
+      this.isLoading = status;
+    },
+
+    // 更新消息
+    updateMessage(message) {
+      // 由于Vue的响应式系统，message对象的更改会自动更新视图
+      // 这里不需要额外的操作
+    },
+    updateSuggestions(arr){
+      this.suggestions = arr
+    },
+    // 处理建议
+    sendSuggestions(item){
+      // this.suggestions = []
+      this.AIContent = item
+      setTimeout(()=>{
+        this.$refs.sendMessage.handleSend()
+        this.AIContent = ''
+      },500)
+    },
+    startNewConversation() {
+      this.messageList = [
+        {
+          isBot: true,
+          text: `<p><b>您好！我是京东方案侧智能问答助手，随时为您服务。</b></p>
+          <p>我可以帮您快速查找和解读平台内的各类案例内容。只需输入您想了解的问题或关键词，我会从案例库中精准匹配相关信息，并提供清晰的解答。每条回答都会附上来源链接，方便您随时查阅原始案例全文。</p>
+          <p>我还会根据您的提问，智能推荐相关延伸问题，助您更高效地探索知识、解决问题。</p>
+          <p>现在，欢迎随时向我提问，开启高效的知识查询体验吧！</p>`
+        }
+      ];
+      this.AIContent = '';
+      this.isLoading = false;
+    },
+
+    // 处理滚动事件
+    handleScroll(event) {
+      const element = event.target;
+      // 判断是否滚动到底部
+      const isAtBottom = element.scrollHeight - element.scrollTop <= element.clientHeight + 1;
+
+      // 如果滚动到底部，则开启自动滚动
+      // 如果离开底部，则关闭自动滚动
+      this.isAutoScroll = isAtBottom;
+    },
+
+    // 滚动到底部
+    scrollToBottom() {
+      if (this.isAutoScroll && this.$refs.messageContainer) {
+        this.$refs.messageContainer.scrollTop = this.$refs.messageContainer.scrollHeight;
+      }
+    },
+
+    // 最小化窗口的点击事件处理方法
+    onMinimizedWindowClick() {
+      // 当点击最小化窗口时，如果dialogVisible为false，则通过事件通知父组件显示对话框
+      if (!this.dialogVisible) {
+        this.$emit('restore');
+      }
+      // 然后将窗口状态设置为最大化
+      this.windowState = 'maximized';
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.case-expert-dialog {
+  ::v-deep .el-dialog{
+    background: url("./components/u762.svg") no-repeat ;
+    background-size: cover;
+    border-radius: 8px;
+    overflow: hidden;
+
+    //background-color: rgba(255, 255, 255, 0.8);
+  }
+  ::v-deep .el-dialog__body{
+    padding: 10px;
+    //font-size: 12px;
+    *{
+      font-size:unset ;
+    }
+  }
+
+  .dialog-title {
+    background: transparent;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    font-size: 16px;
+    font-weight: 600;
+    color: #333;
+    padding-right: 20px;
+
+    .icon {
+      width: 24px;
+      height: 24px;
+    }
+
+    .window-control-btn {
+      font-size: 18px;
+      padding: 5px 10px;
+      color: #333; /* 黑色图标 */
+    }
+  }
+
+
+  .message-suggestions{
+    display: flex;
+    flex-direction: column;
+    .suggestion-item{
+      cursor: pointer;
+      float: right;
+      padding: 5px 15px;
+      box-sizing: border-box;
+      background-color: rgba(228, 231, 237, 1);
+      border-radius: 5px;
+      margin-bottom: 5px;
+    }
+  }
+  .content-wrapper {
+    padding: 20px;
+    background-color: transparent;
+    border-radius: 8px;
+    height: 550px;
+    position: relative;
+    //margin-bottom: 20px;
+    display: flex;
+    flex-direction: column;
+
+    .welcome-message {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      margin-bottom: 10px;
+      flex:1;
+      overflow-y: auto;
+
+      .avatar {
+        margin-right: 12px;
+        img {
+          width: 32px;
+          height: 32px;
+          border-radius: 50%;
+          background-color: #007aff;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: white;
+          font-size: 14px;
+        }
+      }
+
+      .message-text {
+        width: 100%;
+        //margin-bottom: 15px;
+
+        p {
+          color: #333;
+          //font-size: 14px;
+          line-height: 1.6;
+          margin: 8px 0;
+        }
+      }
+
+      .loading-message {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        margin-bottom: 15px;
+
+        .avatar {
+          width: 32px;
+          height: 32px;
+          border-radius: 50%;
+          background-color: #007aff;
+          margin-right: 12px;
+        }
+
+        .loading-dots {
+          display: flex;
+          align-items: center;
+
+          span {
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background-color: #999;
+            margin-right: 5px;
+            animation: loading 1.4s infinite ease-in-out both;
+
+            &:nth-child(1) {
+              animation-delay: -0.32s;
+            }
+
+            &:nth-child(2) {
+              animation-delay: -0.16s;
+            }
+          }
+        }
+      }
+    }
+
+    .input-area-wrapper {
+      //position: absolute;
+      //bottom: 10px;
+      //width: calc(100% - 40px);
+    }
+
+    @keyframes loading {
+      0%, 80%, 100% {
+        transform: scale(0);
+      }
+      40% {
+        transform: scale(1);
+      }
+    }
+  }
+}
+
+.minimized-window {
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+  width: 300px;
+  background: url("./components/u762.svg") no-repeat;
+  background-size: cover;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 2000;
+  cursor: pointer;
+
+  .minimized-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 15px;
+    border-bottom: 1px solid #eee;
+
+    .window-title {
+      font-weight: 600;
+      color: #333;
+    }
+
+    .window-control-btn {
+      font-size: 16px;
+      padding: 3px 8px;
+      color: #000000; /* 黑色图标 */
+    }
+  }
+
+  .minimized-message {
+    padding: 15px;
+    font-size: 14px;
+    color: #666;
+    min-height: 60px;
+    display: flex;
+    align-items: center;
+  }
+}
+</style>

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

@@ -0,0 +1,316 @@
+<!--消息渲染-->
+<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: {
+    messageData: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    },
+    suggestions: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      md,
+      displayText: '',
+      typingTimer: null,
+      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 || ''
+        } else {
+          this.displayText = newVal || ''
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    toUrl(item) {
+      console.log(item);
+      this.$router.push({
+        path: '/case/detail',
+        query: {
+          id: item.caseId
+        }
+      })
+    },
+    startTyping(text) {
+      // 清除之前的定时器
+      if (this.typingTimer) {
+        clearInterval(this.typingTimer)
+        this.typingTimer = null
+      }
+
+      // 初始化
+      // this.displayText = ''
+      let index = 0
+
+      // 开始打字机效果
+      this.typingTimer = setInterval(() => {
+        if (index < text.length) {
+          this.displayText += md.render(text.charAt(index))
+          index++
+        } else {
+          // 打字完成，清除定时器
+          clearInterval(this.typingTimer)
+          this.typingTimer = null
+        }
+      }, this.typingSpeed)
+    },
+    // 切换显示所有案例引用
+    toggleShowAllCaseRefers() {
+      this.showAllCaseRefers = !this.showAllCaseRefers;
+    }
+  },
+  beforeDestroy() {
+    // 组件销毁前清除定时器
+    if (this.typingTimer) {
+      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">
+.messages {
+  width: 100%;
+
+  .bot-message {
+    background-color: #fff;
+    border-radius: 5px;
+    padding: 10px;
+    margin-bottom: 10px;
+
+    .bot-think {
+      color: #909399;
+      padding-bottom: 5px;
+      position: relative;
+      padding-left: 10px;
+
+      &:before {
+        content: ' ';
+        border-left: 0.5px solid #909399;
+        position: absolute;
+        height: 100%;
+        left: 0;
+        top: -3px;
+        transform: scaleX(0.5);
+        margin-right: 5px;
+      }
+    }
+
+    .case-refers {
+      margin-top: 10px;
+
+      .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;
+          }
+        }
+      }
+    }
+  }
+
+  .user-message {
+    float: right;
+    padding: 5px 15px;
+    box-sizing: border-box;
+    background-color: rgba(228, 231, 237, 1);
+    border-radius: 5px;
+    margin-bottom: 10px;
+  }
+  .case-refers-item-keywords{
+    margin-top: 5px;
+    span{
+      padding: 1px 4px;
+      background-color: #F4F7FD;
+      border-radius: 5px;
+      font-size: 10px!important;
+      color:#577EE1
+    }
+    span + span{
+      margin-left: 8px;
+    }
+  }
+  .message-content{
+    font-size: 12px!important;
+    margin-top: 5px;
+  }
+}
+</style>