智能问答涉及的几个点

1. MarkdownToHtml

• Markdown 转 HTML：使用 _markdown2html.parse 方法将 Markdown 内容转换为 HTML。
• XSS 防护：使用 v-dompurify-html 指令对 HTML 内容进行 XSS 防护。

 import {
      MarkdownToHtml
    } from '@/assets/lib/markdown2html'
    const _markdown2html = new MarkdownToHtml()
    
    <p v-dompurify-html="_markdown2html.parse(props.dialogData.thinkContent)" >
                    </p>

2. 使用骨架屏

 <template v-if="!props.chatAnswerData.length">
            <a-skeleton />
        </template>

• 提升用户体验：在数据加载过程中，提供一种视觉上的反馈，让用户知道内容正在加载中。
• 减少加载空白期：在内容加载之前，展示一个内容结构的占位符，避免出现完全的空白页面。
• 优化性能：通过提前展示内容的布局，减少用户感知到的加载时间，提升整体性能体验。

3.平滑滚动到底部

import { throttle } from 'lodash'; // 使用lodash的throttle函数来限制事件处理函数的调用频率，避免性能问题
  //滚动到底部事件
  const scrollToBottom = throttle(() => {
    nextTick(() => {
      let element = document.getElementById('chatData-list');
      element.scrollTo({ top: element.scrollHeight - element.clientHeight, behavior: 'smooth' }); // 平滑滚动到顶部
    })
  }, 100) // 防抖

4. 下载打开文件
   根据文件的类型决定是下载文件还是在浏览器中打开文件

  const openFile = (item) => {
  //获取文件扩展名：通过`split('.')`方法将文件路径按`.`分割成数组，然后使用`pop()`方法获取最后一个元素，即文件的扩展名。`toLowerCase()`方法将扩展名转换为小写，以便进行后续的比较
    const urlItem = item.chunkSourceUrl.split('.').pop().toLowerCase();
    if(urlItem=='doc' || urlItem=='docx'){
        message.destroy();
        message.success("请查看浏览器-下载");
        window.location.href = item.chunkSourceUrl
    }else{
        window.open(item.chunkSourceUrl)
    }
  }

5. vue内置组件-transition-group