Files
xdd-uniapp-new/utils/aiChat.js
T

93 lines
3.1 KiB
JavaScript

// 引入markdown-it库
import MarkdownIt from '@/utils/markdown-it.min.js'
// hljs是由 Highlight.js 经兼容性修改后的文件,请勿直接升级。否则会造成uni-app-vue3-Android下有兼容问题
import hljs from '@/utils/highlight/highlight-uni.min.js'
// 引入html-parser.js库
// import parseHtml from '@/utils/html-parser.js'
// 初始化 MarkdownIt库
const markdownIt = MarkdownIt({
// 在源码中启用 HTML 标签
html: true,
// 如果结果以 <pre ... 开头,内部包装器则会跳过。
highlight: function(str, lang) {
// if (lang && hljs.getLanguage(lang)) {
// console.error('lang', lang)
// try {
// return '<pre class="hljs" style="padding: 5px 8px;margin: 5px 0;overflow: auto;display: block;"><code>' +
// hljs.highlight('lang', str, true).value +
// '</code></pre>';
// } catch (__) {}
// }
// 经过highlight.js处理后的html
let preCode = ''
try {
preCode = hljs.highlightAuto(str).value
} catch (err) {
preCode = markdownIt.utils.escapeHtml(str)
}
// 以换行进行分割
const lines = preCode.split(/\n/).slice(0, -1)
// 添加自定义行号
let html = lines.map((item, index) => {
// 去掉空行
if (item === '') {
return ''
}
return '<li><span class="line-num" data-line="' + (index + 1) + '"></span>' + item + '</li>'
}).join('')
html = '<ol style="padding: 0px 30px;">' + html + '</ol>'
let htmlCode = `<div style="background:#0d1117;margin-top: 5px;color: #888;padding:5px 0;border-radius: 5px;">`
htmlCode += `<pre class="hljs" style="padding:0 8px;margin-bottom:5px;overflow: auto;display: block;border-radius: 5px;"><code>${html}</code></pre>`
htmlCode += '</div>'
return htmlCode
}
})
export function formatAiMsgContent(val) {
if (!val) {
return ''
}
let htmlString = ''
// 修改转换结果的htmlString值 用于正确给界面增加鼠标闪烁的效果
// 判断markdown中代码块标识符的数量是否为偶数
if (val.split('```').length % 2) {
let msgContent = val
if (msgContent[msgContent.length - 1] !== '\n') {
msgContent += '\n'
}
msgContent += ' <span class="cursor">|</span>'
htmlString = markdownIt.render(msgContent)
} else {
htmlString = markdownIt.render(val)
htmlString = markdownIt.render(val) + ' \n <span class="cursor">|</span>'
}
// console.log(htmlString)
return htmlString
}
/**
* 简单实现防抖方法
*
* 防抖(debounce)函数在第一次触发给定的函数时,不立即执行函数,而是给出一个期限值(delay),比如100ms。
* 如果100ms内再次执行函数,就重新开始计时,直到计时结束后再真正执行函数。
* 这样做的好处是如果短时间内大量触发同一事件,只会执行一次函数。
*
* @param fn 要防抖的函数
* @param delay 防抖的毫秒数
* @returns {Function}
*/
export function simpleDebounce(fn, delay = 100) {
let timer = null
return function() {
const args = arguments
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
fn.apply(null, args)
}, delay)
}
}