Feat(云灵AI):界面初始化

2025-03-27 18:12:48 +08:00
parent 01c1a44a32
commit 615b89c8a5
21 changed files with 7240 additions and 316 deletions
@@ -0,0 +1,92 @@
+// 引入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)
+  }
+}