feat: 修复聊天滚动问题

2026-01-26 17:37:58 +08:00
parent 0fb70fcc96
commit df65394c2a
25 changed files with 18101 additions and 395 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -57,11 +57,14 @@
    "@dcloudio/uni-mp-weixin": "3.0.0-4070620250821001",
    "@dcloudio/uni-mp-xhs": "3.0.0-4070620250821001",
    "@dcloudio/uni-quickapp-webview": "3.0.0-4070620250821001",
+    "element-plus-x": "^1.1.11",
    "glob": "^11.0.3",
+    "markstream-vue": "^0.0.6",
    "md5-hash": "^1.0.1",
    "pinia": "^3.0.3",
    "pinia-plugin-unistorage": "^0.1.2",
    "vue": "^3.4.21",
+    "vue-element-plus-x": "^1.3.98",
    "vue-i18n": "^9.1.9"
  },
  "devDependencies": {
--- a/src/components/ua-markdown/lib/highlight/atom-one-dark.css
+++ b/src/components/ua-markdown/lib/highlight/atom-one-dark.css
@@ -0,0 +1 @@
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#abb2bf;background:#282c34}.hljs-comment,.hljs-quote{color:#5c6370;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#c678dd}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#98c379}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#d19a66}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#61aeee}.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#e6c07b}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}
--- a/src/components/ua-markdown/lib/highlight/atom-one-light.css
+++ b/src/components/ua-markdown/lib/highlight/atom-one-light.css
@@ -0,0 +1 @@
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#383a42;background:#fafafa}.hljs-comment,.hljs-quote{color:#a0a1a7;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#a626a4}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e45649}.hljs-literal{color:#0184bb}.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#50a14f}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#986801}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#4078f2}.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#c18401}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}
--- a/src/components/ua-markdown/lib/highlight/github-dark.min.css
+++ b/src/components/ua-markdown/lib/highlight/github-dark.min.css
@@ -0,0 +1,10 @@
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
+  Theme: GitHub Dark
+  Description: Dark theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-dark
+  Current colors taken from GitHub's CSS
+*/.hljs{color:#c9d1d9;background:#0d1117}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#ff7b72}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#d2a8ff}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#79c0ff}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#a5d6ff}.hljs-built_in,.hljs-symbol{color:#ffa657}.hljs-code,.hljs-comment,.hljs-formula{color:#8b949e}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#7ee787}.hljs-subst{color:#c9d1d9}.hljs-section{color:#1f6feb;font-weight:700}.hljs-bullet{color:#f2cc60}.hljs-emphasis{color:#c9d1d9;font-style:italic}.hljs-strong{color:#c9d1d9;font-weight:700}.hljs-addition{color:#aff5b4;background-color:#033a16}.hljs-deletion{color:#ffdcd7;background-color:#67060c}
--- a/src/components/ua-markdown/lib/highlight/uni-highlight.min.js
+++ b/src/components/ua-markdown/lib/highlight/uni-highlight.min.js
--- a/src/components/ua-markdown/lib/html-parser.js
+++ b/src/components/ua-markdown/lib/html-parser.js
@@ -0,0 +1,352 @@
+/*
+ * HTML5 Parser By Sam Blowes
+ *
+ * Designed for HTML5 documents
+ *
+ * Original code by John Resig (ejohn.org)
+ * http://ejohn.org/blog/pure-javascript-html-parser/
+ * Original code by Erik Arvidsson, Mozilla Public License
+ * http://erik.eae.net/simplehtmlparser/simplehtmlparser.js
+ *
+ * ----------------------------------------------------------------------------
+ * License
+ * ----------------------------------------------------------------------------
+ *
+ * This code is triple licensed using Apache Software License 2.0,
+ * Mozilla Public License or GNU Public License
+ *
+ * ////////////////////////////////////////////////////////////////////////////
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License.  You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * ////////////////////////////////////////////////////////////////////////////
+ *
+ * The contents of this file are subject to the Mozilla Public License
+ * Version 1.1 (the "License"); you may not use this file except in
+ * compliance with the License. You may obtain a copy of the License at
+ * http://www.mozilla.org/MPL/
+ *
+ * Software distributed under the License is distributed on an "AS IS"
+ * basis, WITHOUT WARRANTY OF ANY KIND, either express or implied. See the
+ * License for the specific language governing rights and limitations
+ * under the License.
+ *
+ * The Original Code is Simple HTML Parser.
+ *
+ * The Initial Developer of the Original Code is Erik Arvidsson.
+ * Portions created by Erik Arvidssson are Copyright (C) 2004. All Rights
+ * Reserved.
+ *
+ * ////////////////////////////////////////////////////////////////////////////
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * as published by the Free Software Foundation; either version 2
+ * of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ *
+ * ----------------------------------------------------------------------------
+ * Usage
+ * ----------------------------------------------------------------------------
+ *
+ * // Use like so:
+ * HTMLParser(htmlString, {
+ *     start: function(tag, attrs, unary) {},
+ *     end: function(tag) {},
+ *     chars: function(text) {},
+ *     comment: function(text) {}
+ * });
+ *
+ * // or to get an XML string:
+ * HTMLtoXML(htmlString);
+ *
+ * // or to get an XML DOM Document
+ * HTMLtoDOM(htmlString);
+ *
+ * // or to inject into an existing document/DOM node
+ * HTMLtoDOM(htmlString, document);
+ * HTMLtoDOM(htmlString, document.body);
+ *
+ */
+// Regular Expressions for parsing tags and attributes
+var startTag = /^<([-A-Za-z0-9_]+)((?:\s+[a-zA-Z_:][-a-zA-Z0-9_:.]*(?:\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|[^>\s]+))?)*)\s*(\/?)>/;
+var endTag = /^<\/([-A-Za-z0-9_]+)[^>]*>/;
+var attr = /([a-zA-Z_:][-a-zA-Z0-9_:.]*)(?:\s*=\s*(?:(?:"((?:\\.|[^"])*)")|(?:'((?:\\.|[^'])*)')|([^>\s]+)))?/g; // Empty Elements - HTML 5
+
+var empty = makeMap('area,base,basefont,br,col,frame,hr,img,input,link,meta,param,embed,command,keygen,source,track,wbr'); // Block Elements - HTML 5
+// fixed by xxx 将 ins 标签从块级名单中移除
+
+var block = makeMap('a,address,article,applet,aside,audio,blockquote,button,canvas,center,dd,del,dir,div,dl,dt,fieldset,figcaption,figure,footer,form,frameset,h1,h2,h3,h4,h5,h6,header,hgroup,hr,iframe,isindex,li,map,menu,noframes,noscript,object,ol,output,p,pre,section,script,table,tbody,td,tfoot,th,thead,tr,ul,video'); // Inline Elements - HTML 5
+
+var inline = makeMap('abbr,acronym,applet,b,basefont,bdo,big,br,button,cite,code,del,dfn,em,font,i,iframe,img,input,ins,kbd,label,map,object,q,s,samp,script,select,small,span,strike,strong,sub,sup,textarea,tt,u,var'); // Elements that you can, intentionally, leave open
+// (and which close themselves)
+
+var closeSelf = makeMap('colgroup,dd,dt,li,options,p,td,tfoot,th,thead,tr'); // Attributes that have their values filled in disabled="disabled"
+
+var fillAttrs = makeMap('checked,compact,declare,defer,disabled,ismap,multiple,nohref,noresize,noshade,nowrap,readonly,selected'); // Special Elements (can contain anything)
+
+var special = makeMap('script,style');
+function HTMLParser(html, handler) {
+  var index;
+  var chars;
+  var match;
+  var stack = [];
+  var last = html;
+
+  stack.last = function () {
+    return this[this.length - 1];
+  };
+
+  while (html) {
+    chars = true; // Make sure we're not in a script or style element
+
+    if (!stack.last() || !special[stack.last()]) {
+      // Comment
+      if (html.indexOf('<!--') == 0) {
+        index = html.indexOf('-->');
+
+        if (index >= 0) {
+          if (handler.comment) {
+            handler.comment(html.substring(4, index));
+          }
+
+          html = html.substring(index + 3);
+          chars = false;
+        } // end tag
+
+      } else if (html.indexOf('</') == 0) {
+        match = html.match(endTag);
+
+        if (match) {
+          html = html.substring(match[0].length);
+          match[0].replace(endTag, parseEndTag);
+          chars = false;
+        } // start tag
+
+      } else if (html.indexOf('<') == 0) {
+        match = html.match(startTag);
+
+        if (match) {
+          html = html.substring(match[0].length);
+          match[0].replace(startTag, parseStartTag);
+          chars = false;
+        }
+      }
+
+      if (chars) {
+        index = html.indexOf('<');
+        var text = index < 0 ? html : html.substring(0, index);
+        html = index < 0 ? '' : html.substring(index);
+
+        if (handler.chars) {
+          handler.chars(text);
+        }
+      }
+    } else {
+      html = html.replace(new RegExp('([\\s\\S]*?)<\/' + stack.last() + '[^>]*>'), function (all, text) {
+        text = text.replace(/<!--([\s\S]*?)-->|<!\[CDATA\[([\s\S]*?)]]>/g, '$1$2');
+
+        if (handler.chars) {
+          handler.chars(text);
+        }
+
+        return '';
+      });
+      parseEndTag('', stack.last());
+    }
+
+    if (html == last) {
+      throw 'Parse Error: ' + html;
+    }
+
+    last = html;
+  } // Clean up any remaining tags
+
+
+  parseEndTag();
+
+  function parseStartTag(tag, tagName, rest, unary) {
+    tagName = tagName.toLowerCase();
+
+    if (block[tagName]) {
+      while (stack.last() && inline[stack.last()]) {
+        parseEndTag('', stack.last());
+      }
+    }
+
+    if (closeSelf[tagName] && stack.last() == tagName) {
+      parseEndTag('', tagName);
+    }
+
+    unary = empty[tagName] || !!unary;
+
+    if (!unary) {
+      stack.push(tagName);
+    }
+
+    if (handler.start) {
+      var attrs = [];
+      rest.replace(attr, function (match, name) {
+        var value = arguments[2] ? arguments[2] : arguments[3] ? arguments[3] : arguments[4] ? arguments[4] : fillAttrs[name] ? name : '';
+        attrs.push({
+          name: name,
+          value: value,
+          escaped: value.replace(/(^|[^\\])"/g, '$1\\\"') // "
+
+        });
+      });
+
+      if (handler.start) {
+        handler.start(tagName, attrs, unary);
+      }
+    }
+  }
+
+  function parseEndTag(tag, tagName) {
+    // If no tag name is provided, clean shop
+    if (!tagName) {
+      var pos = 0;
+    } // Find the closest opened tag of the same type
+    else {
+        for (var pos = stack.length - 1; pos >= 0; pos--) {
+          if (stack[pos] == tagName) {
+            break;
+          }
+        }
+      }
+
+    if (pos >= 0) {
+      // Close all the open elements, up the stack
+      for (var i = stack.length - 1; i >= pos; i--) {
+        if (handler.end) {
+          handler.end(stack[i]);
+        }
+      } // Remove the open elements from the stack
+
+
+      stack.length = pos;
+    }
+  }
+}
+
+function makeMap(str) {
+  var obj = {};
+  var items = str.split(',');
+
+  for (var i = 0; i < items.length; i++) {
+    obj[items[i]] = true;
+  }
+
+  return obj;
+}
+
+function removeDOCTYPE(html) {
+  return html.replace(/<\?xml.*\?>\n/, '').replace(/<!doctype.*>\n/, '').replace(/<!DOCTYPE.*>\n/, '');
+}
+
+function parseAttrs(attrs) {
+  return attrs.reduce(function (pre, attr) {
+    var value = attr.value;
+    var name = attr.name;
+
+    if (pre[name]) {
+			pre[name] = pre[name] + " " + value;
+    } else {
+			pre[name] = value;
+    }
+
+    return pre;
+  }, {});
+}
+
+function parseHtml(html) {
+  html = removeDOCTYPE(html);
+  var stacks = [];
+  var results = {
+    node: 'root',
+    children: []
+  };
+  HTMLParser(html, {
+    start: function start(tag, attrs, unary) {
+      var node = {
+        name: tag
+      };
+
+      if (attrs.length !== 0) {
+        node.attrs = parseAttrs(attrs);
+      }
+
+      if (unary) {
+        var parent = stacks[0] || results;
+
+        if (!parent.children) {
+          parent.children = [];
+        }
+
+        parent.children.push(node);
+      } else {
+        stacks.unshift(node);
+      }
+    },
+    end: function end(tag) {
+      var node = stacks.shift();
+      if (node.name !== tag) console.error('invalid state: mismatch end tag');
+
+      if (stacks.length === 0) {
+        results.children.push(node);
+      } else {
+        var parent = stacks[0];
+
+        if (!parent.children) {
+          parent.children = [];
+        }
+
+        parent.children.push(node);
+      }
+    },
+    chars: function chars(text) {
+      var node = {
+        type: 'text',
+        text: text
+      };
+
+      if (stacks.length === 0) {
+        results.children.push(node);
+      } else {
+        var parent = stacks[0];
+
+        if (!parent.children) {
+          parent.children = [];
+        }
+
+        parent.children.push(node);
+      }
+    },
+    comment: function comment(text) {
+      var node = {
+        node: 'comment',
+        text: text
+      };
+      var parent = stacks[0];
+
+      if (!parent.children) {
+        parent.children = [];
+      }
+
+      parent.children.push(node);
+    }
+  });
+  return results.children;
+}
+
+export default parseHtml;
--- a/src/components/ua-markdown/lib/markdown-it.min.js
+++ b/src/components/ua-markdown/lib/markdown-it.min.js
--- a/src/components/ua-markdown/ua-markdown.vue
+++ b/src/components/ua-markdown/ua-markdown.vue
@@ -0,0 +1,318 @@
+<!-- uniapp vue3 markdown解析 -->
+<template>
+<view class="ua__markdown"><rich-text space="nbsp" :nodes="parseNodes(source)" @itemclick="handleItemClick"></rich-text></view>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+	import MarkdownIt from './lib/markdown-it.min.js'
+import hljs from './lib/highlight/uni-highlight.min.js'
+import './lib/highlight/atom-one-dark.css'
+import parseHtml from './lib/html-parser.js'
+	const props = defineProps({
+		// 解析内容
+	source: String,
+	  showLine: { type: [Boolean, String], default: true }
+	})
+	
+	let copyCodeData = []
+ const markdown = MarkdownIt({
+		 html: true,
+	 highlight: function(str, lang) {
+		let preCode = ""
+		try {
+		preCode = hljs.highlightAuto(str).value
+		} catch (err) {
+		preCode = markdown.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('')
+		if(props.showLine) {
+			html = '<ol style="padding: 0px 30px;">' + html + '</ol>'
+			}else {
+		html = '<ol style="padding: 0px 7px;list-style:none;">' + html + '</ol>'
+			}
+	copyCodeData.push(str)
+		let htmlCode = `<div class="markdown-wrap">`
+				// #ifndef MP-WEIXIN
+			htmlCode += `<div style="color: #aaa;text-align: right;font-size: 12px;padding:8px;">`
+					htmlCode += `${lang}<a class="copy-btn" code-data-index="${copyCodeData.length - 1}" style="margin-left: 8px;">复制代码</a>`
+					htmlCode += `</div>`
+				// #endif
+		htmlCode += `<pre class="hljs" style="padding:10px 8px 0;margin-bottom:5px;overflow: auto;display: block;border-radius: 5px;"><code>${html}</code></pre>`;
+			htmlCode += '</div>'
+	return htmlCode
+	}
+	})
+const parseNodes = (value) => {
+	 if(!value) return
+		 // 解析<br />到\n
+	  value = value.replace(/<br>|<br\/>|<br \/>/g, "\n")
+	value = value.replace(/&nbsp;/g, " ")
+		 let htmlString = ''
+	if (value.split("```").length % 2) {
+		let mdtext = value
+		if(mdtext[mdtext.length-1] != '\n'){
+		mdtext += '\n'
+			}
+	  htmlString = markdown.render(mdtext)
+		} else {
+		htmlString = markdown.render(value)
+		}
+		// 解决小程序表格边框型失效问题
+htmlString = htmlString.replace(/<table/g, `<table class="table"`)
+		htmlString = htmlString.replace(/<tr/g, `<tr class="tr"`)
+	htmlString = htmlString.replace(/<th>/g, `<th class="th">`)
+htmlString = htmlString.replace(/<td/g, `<td class="td"`)
+	htmlString = htmlString.replace(/<hr>|<hr\/>|<hr \/>/g, `<hr class="hr">`)
+
+		// #ifndef APP-NVUE
+		return htmlString
+		// #endif
+		
+		// 将htmlString转成htmlArray，反之使用rich-text解析
+		// #ifdef APP-NVUE
+	return parseHtml(htmlString)
+		// #endif
+	}
+	
+// 复制代码
+const handleItemClick = (e) => {
+	let {attrs} = e.detail.node
+let {"code-data-index":codeDataIndex,"class":className} = attrs
+	if(className == 'copy-btn'){
+	uni.setClipboardData({
+		data: copyCodeData[codeDataIndex],showToast: false,
+		success() {
+			uni.showToast({
+				title: '复制成功',icon: 'none'
+				});
+				}
+			})
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+.ua__markdown {
+	  font-size: 14px;line-height: 1.5; word-break: break-all;
+	  h1,h2,h3,h4,h5,h6 {
+	       font-family: inherit;font-weight: 500;line-height: 1.1;color: inherit;
+	    }
+	  h1,h2,h3 {margin-top: 20px;margin-bottom: 10px}
+	   h4,h5,h6 {margin-top: 10px;margin-bottom: 10px}
+	    .h1,h1 {font-size: 36px
+	    }
+	   .h2,h2 {font-size: 30px
+	    }
+	  .h3,h3 {font-size: 24px
+	    }
+	  .h4,h4 {font-size: 18px
+	    }
+	    .h5,h5 {font-size: 14px
+	    }
+	  .h6,h6 {font-size: 12px
+	    }
+	 a {
+	     background-color: transparent;color: #2196f3;
+	        text-decoration: none;
+	    }
+	 hr, ::v-deep .hr {
+	   margin-top: 20px;margin-bottom: 20px; border: 0; border-top: 1px solid #e5e5e5;
+	    }
+	    img { max-width: 35%;
+	    }
+	  p {margin: 0 0 10px}
+	  em {
+	      font-style: italic; font-weight: inherit;
+	    }
+	 ol,ul {
+	        margin-top: 0; margin-bottom: 10px;padding-left: 40px;
+	    }
+	  ol ol,ol ul,ul ol,ul ul {margin-bottom: 0;
+	    }
+	ol ol, ul ol {list-style-type: lower-roman;
+	    }
+	   ol ol ol, ul ul ol {list-style-type: lower-alpha;
+	    }
+	 dl {
+	    margin-top: 0;margin-bottom: 20px;
+	    }
+	  dt {font-weight: 600;
+	    }
+	dt, dd {line-height: 1.4;
+	    }
+	 .task-list-item { list-style-type: none;
+	    }
+	 .task-list-item input {
+	        margin: 0 .2em .25em -1.6em;vertical-align: middle;
+	    }
+	    pre {
+	       position: relative; z-index: 11;
+	    }
+	    code,kbd,pre,samp { font-family: Menlo,Monaco,Consolas,"Courier New",monospace;}
+	    code:not(.hljs) {
+	    padding: 2px 4px;font-size: 90%;color: #c7254e;background-color: #ffe7ee;border-radius: 4px;
+	    }
+code:empty {display: none;
+		}
+	  pre code.hljs {
+	      color: var(--vg__text-1); border-radius: 16px; background: var(--vg__bg-1);font-size: 12px;
+	    }
+.markdown-wrap {
+			font-size: 12px;margin-bottom: 10px;
+		}
+	    pre.code-block-wrapper {background: #2b2b2b;color: #f8f8f2;border-radius: 4px;overflow-x: auto;
+	        padding: 1em;
+	        position: relative;
+	    }
+	   pre.code-block-wrapper code {
+	        padding: auto;
+	        font-size: inherit;
+	        color: inherit;
+	        background-color: inherit;
+	        border-radius: 0;
+	    }
+	    .code-block-header__copy {
+	        font-size: 16px;margin-left: 5px;
+	    }
+	 abbr[data-original-title],abbr[title] {
+	        cursor: help;border-bottom: 1px dotted #777;
+	    }
+	    blockquote {
+	     padding: 10px 20px;margin: 0 0 20px;font-size: 17.5px;
+	        border-left: 5px solid #e5e5e5;
+	    }
+	 blockquote ol:last-child,blockquote p:last-child,blockquote ul:last-child {
+	        margin-bottom: 0
+	    }
+	blockquote .small,blockquote footer,blockquote small {
+	      display: block;font-size: 80%;line-height: 1.42857143;color: #777
+	    }
+	  blockquote .small:before,blockquote footer:before,blockquote small:before {
+	        content: '\2014 \00A0'
+	    }
+	    .blockquote-reverse,blockquote.pull-right {
+	        padding-right: 15px; padding-left: 0;
+	     text-align: right;border-right: 5px solid #eee;border-left: 0
+	    }
+	  .blockquote-reverse .small:before,.blockquote-reverse footer:before,.blockquote-reverse small:before,blockquote.pull-right .small:before,blockquote.pull-right footer:before,blockquote.pull-right small:before {
+	        content: ''
+	    }
+	  .blockquote-reverse .small:after,.blockquote-reverse footer:after,.blockquote-reverse small:after,blockquote.pull-right .small:after,blockquote.pull-right footer:after,blockquote.pull-right small:after {
+	        content: '\00A0 \2014'
+	    }
+	   .footnotes {
+	      -moz-column-count: 2;
+	        -webkit-column-count: 2;
+	     column-count: 2
+	    }
+	    .footnotes-list {padding-left: 2em}
+	   table, ::v-deep .table {
+	    border-spacing: 0;border-collapse: collapse; width: 100%;max-width: 65em; overflow: auto;margin-top: 0;
+	        margin-bottom: 16px;
+	    }
+	  table tr, ::v-deep .table .tr {
+	   border-top: 1px solid #e5e5e5;
+	    }
+	    table th, table td, ::v-deep .table .th, ::v-deep .table .td {
+	  padding: 6px 13px;border: 1px solid #e5e5e5;
+	    }
+	    table th, ::v-deep .table .th {
+	      font-weight: 600;background-color: #eee;
+	    }
+	    .hljs[class*=language-]:before {
+	    position: absolute; z-index: 3;top: .8em; right: 1em; font-size: .8em; color: #999;
+	    }
+	    .hljs[class~=language-js]:before {
+     content: "js"
+    }
+    .hljs[class~=language-ts]:before {
+        content: "ts"
+    }
+    .hljs[class~=language-html]:before {
+        content: "html"
+}
+.hljs[class~=language-md]:before {
+    content: "md"
+}
+.hljs[class~=language-vue]:before {
+    content: "vue"
+}
+.hljs[class~=language-css]:before {
+    content: "css"
+}
+    .hljs[class~=language-sass]:before {
+        content: "sass"
+    }
+    .hljs[class~=language-scss]:before {
+        content: "scss"
+    }
+.hljs[class~=language-less]:before {
+    content: "less"
+}
+    .hljs[class~=language-stylus]:before {
+        content: "stylus"
+    }
+    .hljs[class~=language-go]:before {
+        content: "go"
+    }
+    .hljs[class~=language-java]:before {
+    content: "java"
+}
+.hljs[class~=language-c]:before {
+    content: "c"
+}
+.hljs[class~=language-sh]:before {
+    content: "sh"
+}
+    .hljs[class~=language-yaml]:before {
+        content: "yaml"
+}
+    .hljs[class~=language-py]:before {
+        content: "py"
+}
+.hljs[class~=language-docker]:before {
+    content: "docker"
+}
+.hljs[class~=language-dockerfile]:before {
+    content: "dockerfile"
+	}
+	.hljs[class~=language-makefile]:before {
+	    content: "makefile"
+}
+.hljs[class~=language-javascript]:before {
+    content: "js"
+}
+.hljs[class~=language-typescript]:before {
+        content: "ts"
+    }
+    .hljs[class~=language-markup]:before {
+        content: "html"
+}
+.hljs[class~=language-markdown]:before {
+    content: "md"
+}
+    .hljs[class~=language-json]:before {
+        content: "json"
+    }
+    .hljs[class~=language-ruby]:before {
+        content: "rb"
+    }
+	    .hljs[class~=language-python]:before {
+	        content: "py"
+	    }
+    .hljs[class~=language-bash]:before {
+        content: "sh"
+    }
+    .hljs[class~=language-php]:before {
+        content: "php"
+    }
+	}
+</style>
--- a/src/package.json
+++ b/src/package.json
@@ -0,0 +1,18 @@
+{
+    "id": "ua-markdown",
+    "name": "uniapp markdown语法渲染及代码高亮",
+    "displayName": "uniapp markdown语法渲染及代码高亮",
+    "version": "1.2.4",
+    "description": "基于uniapp+vue3自定义解析markdown语法/高亮，适用于h5+小程序+App端。",
+    "keywords": [
+        "ua-markdown",
+        "uni-markdown",
+        "markdown"
+    ],
+    "dcloudext": {
+        "category": [
+            "前端组件",
+            "通用组件"
+        ]
+    }
+}
--- a/src/pages/goods/index.vue
+++ b/src/pages/goods/index.vue
@@ -1,20 +1,12 @@
 <template>
  <view class="goods-container bg-gray">
-    <TopNavBar
-      :title="navOpacity < 0.5 ? '' : '商品详情'"
-      :background="`rgba(217, 238, 255, ${navOpacity})`"
+    <TopNavBar :title="navOpacity < 0.5 ? '' : '商品详情'" :background="`rgba(217, 238, 255, ${navOpacity})`"
      :titleColor="navOpacity < 0.5 ? '#ffffff' : '#000000'"
-      :backIconColor="navOpacity < 0.5 ? '#ffffff' : '#000000'"
-    />
+      :backIconColor="navOpacity < 0.5 ? '#ffffff' : '#000000'" />

    <!-- 滚动区域 -->
    <scroll-view class="content-wrapper" scroll-y @scroll="handleScroll">
-      <ImageSwiper
-        :border-radius="0"
-        :height="300"
-        :images="goodsData.commodityPhotoList"
-        thumbnailBottom="42px"
-      />
+      <ImageSwiper :border-radius="0" :height="300" :images="goodsData.commodityPhotoList" thumbnailBottom="42px" />

      <view class="goods-content">
        <!-- 商品信息组件 -->
@@ -24,15 +16,9 @@
        <LocationCard :orderData="goodsData" />

        <!-- 日期选择区域 -->
-        <DateSelector
-          v-if="goodsData.commodityTypeCode === '0'"
-          @showCalendar="showCalendar"
-          :checkInDate="selectedDate.startDate"
-          :checkOutDate="selectedDate.endDate"
-          :checkInDay="''"
-          :checkOutDay="''"
-          :nights="selectedDate.totalDays"
-        />
+        <DateSelector v-if="goodsData.commodityTypeCode === '0'" @showCalendar="showCalendar"
+          :checkInDate="selectedDate.startDate" :checkOutDate="selectedDate.endDate" :checkInDay="''" :checkOutDay="''"
+          :nights="selectedDate.totalDays" />

        <!-- 商品设施组件 -->
        <GoodFacility :goodsData="goodsData" />
@@ -44,35 +30,19 @@

    <!-- 立即抢购 -->
    <view class="footer border-top">
-      <view
-        class="amt font-size-20 font-bold color-FF3D60 line-height-28 flex flex-items-center mr-8"
-      >
+      <view class="amt font-size-20 font-bold color-FF3D60 line-height-28 flex flex-items-center mr-8">
        {{ calculatedTotalPrice }}
      </view>
-      <!-- #ifdef MP-WEIXIN -->
-      <view
-        class="btn border-box rounded-10 flex flex-items-center ml-auto pl-8"
-        @click="navigateToPay(goodsData)"
-      >
-        <image
-          class="icon"
-          src="https://oss.nianxx.cn/mp/static/version_101/common/btn.png"
-        />
+      <view class="btn border-box rounded-10 flex flex-items-center ml-auto pl-8" @click="navigateToPay(goodsData)">
+        <image class="icon" src="https://oss.nianxx.cn/mp/static/version_101/common/btn.png" />
        <text class="font-size-16 font-500 color-white">立即预定</text>
      </view>
-      <!-- #endif -->
    </view>


    <!-- 日历组件 -->
-    <Calender
-      :visible="calendarVisible"
-      mode="range"
-      :range-require-price="true"
-      :price-data="priceData"
-      @close="handleCalendarClose"
-      @range-select="handleDateSelect"
-    />
+    <Calender :visible="calendarVisible" mode="range" :range-require-price="true" :price-data="priceData"
+      @close="handleCalendarClose" @range-select="handleDateSelect" />
  </view>
 </template>

@@ -249,10 +219,28 @@ const handleDateSelect = (data) => {

 // 跳转订购
 const navigateToPay = ({ commodityId }) => {
+  // #ifdef MP-WEIXIN
  uni.navigateTo({
    url: `/pages-booking/index?commodityId=${commodityId}`,
  });
+  // #endif
+  // #ifdef MP-TOUTIAO
+  openEcShop();
+  // #endif
 };
+// const plugin = tt.requirePlugin('tt875bf1e61857376a01');
+// const openEcShop = () => {
+//   plugin.openEcShop({
+//     shopId: '7178462717194274872',
+//     tabType: 1,
+//     success: (res) => {
+//       console.log('openEcShop', res)
+//     },
+//     fail: (res) => {
+//       console.log("调用失败", res);
+//     }
+//   })
+// }
 </script>

 <style scoped lang="scss">
--- a/src/pages/index/components/DrawerSection/index.vue
+++ b/src/pages/index/components/DrawerSection/index.vue
@@ -28,6 +28,7 @@ const drawerRef = ref(null);
 const mineSettingRef = ref(null);
 const open = () => {
  checkToken().then(async () => {
+    console.log(1132313, mineSettingRef.value)
    await mineSettingRef.value.getLoginUserPhoneInfo();
    drawerRef.value.open();
  });
--- a/src/pages/index/components/chat/ChatCardAi/index.vue
+++ b/src/pages/index/components/chat/ChatCardAi/index.vue
@@ -9,6 +9,7 @@
          mode="aspectFit"
        />
        <ChatMarkdown :key="textKey" :text="processedText" />
+        {{ init()}}
        <DotLoading v-if="isLoading" />
      </view>
      <slot name="content"></slot>
@@ -18,7 +19,7 @@
 </template>

 <script setup>
-import { defineProps, computed, ref, watch } from "vue";
+import { defineProps, computed, ref, watch, nextTick } from "vue";
 import ChatMarkdown from "../ChatMarkdown/index.vue";
 import DotLoading from "../../loading/DotLoading.vue";

@@ -31,6 +32,7 @@ const props = defineProps({
    type: Boolean,
    default: false,
  },
+  onClick: Function
 });

 // 用于强制重新渲染的key
@@ -63,6 +65,15 @@ watch(
  },
  { immediate: true }
 );
+
+const init = () => {
+		nextTick(() => {
+			setTimeout(() => {
+				props.onClick();
+			}, 200)
+		})
+	}
+
 </script>

 <style lang="scss" scoped>
--- a/src/pages/index/components/chat/ChatMainList/index.vue
+++ b/src/pages/index/components/chat/ChatMainList/index.vue
@@ -8,57 +8,59 @@
    <!-- 消息列表（可滚动区域） -->
    <scroll-view class="main flex-full overflow-hidden scroll-y" scroll-y :scroll-top="scrollTop"
      :scroll-with-animation="true" @scroll="handleScroll" @scrolltolower="handleScrollToLower">
-      <!-- welcome栏 -->
-      <ChatTopWelcome ref="welcomeRef" :mainPageDataModel="mainPageDataModel" />
+      <view id="scrollView" :style="{ minHeight: scrollViewHeight + 'px' }">
+        <!-- welcome栏 -->
+        <ChatTopWelcome ref="welcomeRef" :mainPageDataModel="mainPageDataModel" />

-      <view class="area-msg-list-content" v-for="item in chatMsgList" :key="item.msgId" :id="item.msgId">
-        <template v-if="item.msgType === MessageRole.AI">
-          <ChatCardAI :key="`ai-${item.msgId}-${item.msg ? item.msg.length : 0}`" :text="item.msg || ''"
-            :isLoading="item.isLoading">
-            <template #content v-if="item.toolCall">
-              <QuickBookingComponent v-if="item.toolCall.componentName === CompName.quickBookingCard" />
-              <DiscoveryCardComponent v-else-if="
-                item.toolCall.componentName === CompName.discoveryCard
-              " />
-              <CreateServiceOrder v-else-if="
-                item.toolCall.componentName === CompName.callServiceCard
-              " :toolCall="item.toolCall" />
-              <Feedback v-else-if="
-                item.toolCall.componentName === CompName.feedbackCard
-              " :toolCall="item.toolCall" />
-              <DetailCardCompontent v-else-if="
-                item.toolCall.componentName ===
-                CompName.pictureAndCommodityCard
-              " :toolCall="item.toolCall" />
-              <AddCarCrad v-else-if="
-                item.toolCall.componentName === CompName.enterLicensePlateCard
-              " :toolCall="item.toolCall" />
-            </template>
+        <view class="area-msg-list-content" v-for="item in chatMsgList" :key="item.msgId" :id="item.msgId">
+          <template v-if="item.msgType === MessageRole.AI">
+            <ChatCardAI :key="`ai-${item.msgId}-${item.msg ? item.msg.length : 0}`"
+              :text="item.msg || ''" :isLoading="item.isLoading" :onClick="scrollToBottomId">
+              <template #content v-if="item.toolCall">
+                <QuickBookingComponent v-if="item.toolCall.componentName === CompName.quickBookingCard" />
+                <DiscoveryCardComponent v-else-if="
+                  item.toolCall.componentName === CompName.discoveryCard
+                " />
+                <CreateServiceOrder v-else-if="
+                  item.toolCall.componentName === CompName.callServiceCard
+                " :toolCall="item.toolCall" />
+                <Feedback v-else-if="
+                  item.toolCall.componentName === CompName.feedbackCard
+                " :toolCall="item.toolCall" />
+                <DetailCardCompontent v-else-if="
+                  item.toolCall.componentName ===
+                  CompName.pictureAndCommodityCard
+                " :toolCall="item.toolCall" />
+                <AddCarCrad v-else-if="
+                  item.toolCall.componentName === CompName.enterLicensePlateCard
+                " :toolCall="item.toolCall" />
+              </template>

-            <template #footer>
-              <!-- 这个是底部 -->
-              <AttachListComponent v-if="item.question" :question="item.question" />
-            </template>
-          </ChatCardAI>
-        </template>
+              <template #footer>
+                <!-- 这个是底部 -->
+                <AttachListComponent v-if="item.question" :question="item.question" />
+              </template>
+            </ChatCardAI>
+          </template>

-        <template v-else-if="item.msgType === MessageRole.ME">
-          <ChatCardMine class="flex flex-justify-end" :text="item.msg" />
-        </template>
+          <template v-else-if="item.msgType === MessageRole.ME">
+            <ChatCardMine class="flex flex-justify-end" :text="item.msg" />
+          </template>

-        <template v-else>
-          <ChatCardOther :text="item.msg">
-            <ActivityListComponent v-if="
-              mainPageDataModel.activityList &&
-              mainPageDataModel.activityList.length > 0
-            " :activityList="mainPageDataModel.activityList" />
+          <template v-else>
+            <ChatCardOther :text="item.msg">
+              <ActivityListComponent v-if="
+                mainPageDataModel.activityList &&
+                mainPageDataModel.activityList.length > 0
+              " :activityList="mainPageDataModel.activityList" />

-            <RecommendPostsComponent v-if="
-              mainPageDataModel.recommendTheme &&
-              mainPageDataModel.recommendTheme.length > 0
-            " :recommendThemeList="mainPageDataModel.recommendTheme" />
-          </ChatCardOther>
-        </template>
+              <RecommendPostsComponent v-if="
+                mainPageDataModel.recommendTheme &&
+                mainPageDataModel.recommendTheme.length > 0
+              " :recommendThemeList="mainPageDataModel.recommendTheme" />
+            </ChatCardOther>
+          </template>
+        </view>
      </view>
    </scroll-view>

@@ -202,6 +204,7 @@ const handleKeyboardHide = () => {
 // 处理用户滚动事件
 const welcomeHeight = ref(0);
 const handleScroll = ThrottleUtils.createThrottle(({ detail }) => {
+  console.log('detail:', detail)
  topNavBarRef.value.show = parseInt(detail.scrollTop) > welcomeHeight.value;
 }, 50);

@@ -210,6 +213,7 @@ const handleScrollToLower = () => { };

 // 滚动到底部 - 优化版本，确保打字机效果始终可见
 const scrollToBottom = () => {
+  // #ifdef MP-WEIXIN
  nextTick(() => {
    // 使用更大的值确保滚动到真正的底部
    scrollTop.value = 99999;
@@ -218,8 +222,30 @@ const scrollToBottom = () => {
      scrollTop.value = scrollTop.value + Math.random();
    }, 10);
  });
+  // #endif
 };

+
+const scrollViewHeight = ref(0);
+const scrollToBottomId = () => {
+  // 解决抖音小程序不滚动问题
+  // 使用ID选择器
+  // #ifdef MP-TOUTIAO
+  const query = null
+  query = tt.createSelectorQuery();
+  nextTick(() => {
+    setTimeout(() => {
+      query.select('#scrollView').boundingClientRect(function (rect) {
+        // 在这里可以获取到scroll-view的布局信息，比如宽高位置等
+        // console.log('scrollView:', rect);
+        scrollViewHeight.value = rect.height;
+        scrollTop.value = scrollViewHeight.value;
+      }).exec();
+    }, 1000);
+  })
+  // #endif
+}
+
 // 延时滚动
 const setTimeoutScrollToBottom = () => setTimeout(() => scrollToBottom(), 100);

--- a/src/pages/index/components/chat/ChatMarkdown/index.vue
+++ b/src/pages/index/components/chat/ChatMarkdown/index.vue
@@ -1,11 +1,17 @@
 <template>
  <view>
    <zero-markdown-view :markdown="text" :aiMode="true"></zero-markdown-view>
+    <!-- <MarkdownRenderer :stream="text" /> -->
+    <!-- <x-markdown :markdown="text" /> -->
+    <!-- <ua-markdown :source="text" :showLine="false" /> -->
+    <!-- <rich-text :nodes="text"></rich-text> -->
  </view>
 </template>

 <script setup>
 import { defineProps } from "vue";
+// import { XMarkdown } from 'element-plus-x';
+// import MarkdownRenderer from 'markstream-vue';

 defineProps({
  text: {
--- a/src/readme.md
+++ b/src/readme.md
@@ -0,0 +1,49 @@
+
+# vue3版本！！！
+vue2版本已经上线，欢迎下载使用。
+[https://ext.dcloud.net.cn/plugin?id=13864](https://ext.dcloud.net.cn/plugin?id=13864)
+
+## uniapp markdown渲染解析.md语法及代码高亮
+> **组件名：uaMarkdown**
+> 代码块： `<ua-markdown>`
+
+
+uaMarkdown组件是基于uniapp+vue3自定义解析markdown语法结构插件、支持代码块高亮，编译兼容H5+小程序端+App端。
+
+
+### 引入方式
+
+本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，只需将本组件`ua-markdown`放在components目录，在页面`template`中即可直接使用。
+
+
+### 基本用法 
+
+**示例**
+
+- 基础用法
+
+```html
+const mdvalue = '### uniapp markdwon'
+<ua-markdown :source="mdvalue" />
+```
+
+- 去掉代码块行号
+
+```html
+<ua-markdown :source="xxx" :showLine="false" />
+```
+
+
+### API
+
+### uaMarkdown Props 
+
+|属性名|类型|默认值|说明|
+|:-:|:-:|:-:|:-:|
+|source|String|-| 渲染解析内容 |
+|showLine|Boolean|true| 是否显示代码块行号 |
+
+
+### 💝最后
+
+开发不易，希望各位小伙伴们多多支持下哈~~ ☕️☕️
--- a/src/uni_modules/wtto-markdown/changelog.md
+++ b/src/uni_modules/wtto-markdown/changelog.md
@@ -0,0 +1,2 @@
+## 1.0.0（2024-12-04）
+第一个版本
--- a/src/uni_modules/wtto-markdown/js_sdk/highlight.js
+++ b/src/uni_modules/wtto-markdown/js_sdk/highlight.js
@@ -0,0 +1,81 @@
+/**
+ * @typedef {import('shiki').TokensResult} TokensResult
+ */
+
+/**
+ * @param {import('markdown-it/index')} md
+ * @param {{codeToTokens:(code:string,lang:string) => TokensResult}} options
+ */
+export function highlightPlugin(md, options) {
+  const originalFence = md.block.ruler.__rules__.find((rule) => rule.name === "fence").fn;
+
+  md.block.ruler.at("fence", function highlight(state, startLine, endLine, silent) {
+    // 调用原始的 fence 解析逻辑
+    const result = originalFence(state, startLine, endLine, silent);
+
+    if (result) {
+      const lastToken = state.tokens[state.tokens.length - 1]; // 获取最后一个生成的 token
+
+      if (lastToken && lastToken.type === "fence" && lastToken.tag === "code" && lastToken) {
+        const res = options.codeToTokens(lastToken.content, lastToken.info.trim());
+        /** @type {import('@uni-helper/uni-types').RichTextNode[]} */
+        const nodes = [];
+        for (let i = 0; i < res.tokens.length; i++) {
+          if (
+            i === res.tokens.length - 1 &&
+            (res.tokens[i].length === 0 || (res.tokens[i].length === 1 && !res.tokens[i][0].content))
+          )
+            continue;
+          nodes.push({
+            name: "span",
+            attrs: { class: "md_code_line" },
+            children: res.tokens[i].map((item) => {
+              const style = [];
+              if (item.color) style.push(`--shiki-light:${item.color};`);
+              if (item.htmlStyle) {
+                for (const styleName in item.htmlStyle) {
+                  if (styleName === "color") style.push(`--shiki-light:${item.htmlStyle[styleName]};`);
+                  else style.push(`${styleName}:${item.htmlStyle[styleName]};`);
+                }
+              }
+              return {
+                name: "span",
+                attrs: { class: "md_code_token", ...item.htmlAttrs, style: style.join("") },
+                children: [{ type: "text", text: item.content }],
+              };
+            }),
+          });
+        }
+        lastToken.type = "highlight";
+        const preStyle = [];
+        const colors = [res.bg, res.fg];
+        for (let i = 0; i < colors.length; i++) {
+          const c = colors[i];
+          if (!c) continue;
+          const list = c.split(";");
+          for (const item of list) {
+            const [name, value] = item.split(":");
+            if (!value) {
+              preStyle.push(`--shiki-light${i === 0 ? "-bg" : ""}:${name};`);
+            } else {
+              preStyle.push(`${name}:${value};`);
+            }
+          }
+        }
+        lastToken.content = JSON.stringify({
+          name: "pre",
+          attrs: { class: "md_pre", style: preStyle.join("") },
+          children: [
+            {
+              name: "code",
+              attrs: { class: "md_code" },
+              children: nodes,
+            },
+          ],
+        });
+      }
+    }
+
+    return result;
+  });
+}
--- a/src/uni_modules/wtto-markdown/js_sdk/index.js
+++ b/src/uni_modules/wtto-markdown/js_sdk/index.js
@@ -0,0 +1,134 @@
+import MD from "markdown-it";
+
+/**
+ * @typedef {import('markdown-it/index').Token} Token
+ * @typedef {import('markdown-it/index').Options} Options
+ * @typedef {import('@uni-helper/uni-types').RichTextNode} RichTextNode
+ * @typedef {import('@uni-helper/uni-types').RichTextNodeNode} RichTextNodeNode
+ */
+
+export const MarkdownIt = MD;
+
+/**
+ * @param {Token} token
+ * @returns  {Record<string, string | number>}
+ */
+function getNodeAttr(token) {
+  const attrs = {};
+  for (const attr of token.attrs || []) {
+    const [key, value] = attr;
+    attrs[key] = value;
+  }
+  if (token.type === "softbreak") return attrs;
+  attrs.class = `md_${token.tag}`;
+  if (token.type === "container_warning_open") attrs.class += ` md_container_${token.info.trim()}`;
+  return attrs;
+}
+
+/**
+ * @param {Token[]} tokens
+ * @param {Options} [options]
+ * @returns {RichTextNode[]}
+ */
+export function parseTokens(tokens, options) {
+  const res = [];
+  /** @type {Record<number, boolean>} */
+  let nesting = 0;
+  for (const token of tokens) {
+    if (token.hidden) continue;
+    let target = res;
+    for (let i = 0; i < nesting; i++) {
+      target = target[target.length - 1]?.children ?? [];
+    }
+    nesting += token.nesting;
+    if (token.tag) {
+      if (token.nesting > 0) {
+        target.push({
+          name: token.tag,
+          attrs: getNodeAttr(token),
+          children: [],
+        });
+        continue;
+      }
+      if (token.nesting === 0) {
+        if (token.type === "softbreak" && !options?.breaks) {
+          target.push({ type: "text", text: " " });
+          continue;
+        }
+        if (token.type === "highlight") {
+          try {
+            target.push(JSON.parse(token.content));
+          } catch (error) {}
+          continue;
+        }
+        /** @type {RichTextNodeNode} */
+        const node = {
+          name: token.tag,
+          attrs: getNodeAttr(token),
+          children: token.content ? [{ type: "text", text: token.content }] : [],
+        };
+        if (token.tag === "code" && token.block) {
+          target.push({
+            name: "pre",
+            attrs: { ...token.attrs, class: "md_pre" },
+            children: [node],
+          });
+          continue;
+        }
+        target.push(node);
+      }
+      continue;
+    }
+    if (token.type === "inline") {
+      if (token.children) {
+        target.push(...parseTokens(token.children));
+      }
+      continue;
+    }
+    // emoji
+    if (token.type === "text" || token.type === "emoji") {
+      if (token.content) target.push({ type: "text", text: token.content });
+      continue;
+    }
+    // katex
+    if (token.type === "katex") {
+      try {
+        const nodes = JSON.parse(token.content);
+        target.push(...nodes);
+      } catch (error) {}
+    }
+    // footnote
+    if (token.type === "footnote_ref") {
+      const text = `${token.meta.id + 1}${token.meta.subId ? `:${token.meta.subId}` : ""}`;
+      target.push({
+        name: "sup",
+        attrs: { class: "md_sup" },
+        children: [
+          {
+            name: "a",
+            attrs: { class: "md_a", href: `#fn${token.meta.id + 1}`, id: `fnref${text}` },
+            children: [{ type: "text", text: `[${text}]` }],
+          },
+        ],
+      });
+    }
+    if (token.type === "footnote_block_open") {
+      target.push({ name: "hr", attrs: { class: "md_hr" } });
+      target.push({ name: "ol", attrs: { class: "md_ol" }, children: [] });
+      continue;
+    }
+    if (token.type === "footnote_open") {
+      target.push({ name: "li", attrs: { class: "md_li", id: `fn${token.meta.id + 1}` }, children: [] });
+      continue;
+    }
+    if (token.type === "footnote_anchor") {
+      const text = `${token.meta.id + 1}${token.meta.subId ? `:${token.meta.subId}` : ""}`;
+      target.push({
+        name: "a",
+        attrs: { class: "md_a", href: `#fnref${text}` },
+        children: [{ type: "text", text: "↩︎" }],
+      });
+    }
+  }
+  return res;
+}
--- a/src/uni_modules/wtto-markdown/js_sdk/katex.css
+++ b/src/uni_modules/wtto-markdown/js_sdk/katex.css
--- a/src/uni_modules/wtto-markdown/js_sdk/katex.js
+++ b/src/uni_modules/wtto-markdown/js_sdk/katex.js
@@ -0,0 +1,78 @@
+import parse from "@rojer/katex-mini";
+
+/**
+ * @typedef {import('markdown-it/index')} MarkdownIt
+ * @typedef {import('markdown-it/index').StateInline} StateInline
+ * @typedef {import('katex').KatexOptions} KatexOptions
+ */
+
+const delimiters = [
+  {
+    left: "\\[",
+    right: "\\]",
+    display: true,
+  },
+  {
+    left: "\\(",
+    right: "\\)",
+    display: false,
+  },
+  {
+    left: "$$",
+    right: "$$",
+    display: false,
+  },
+];
+
+/**
+ * @param {KatexOptions} [options]
+ */
+function katexEscapedRule(options) {
+  return (state, silent) => {
+    const max = state.posMax;
+    const start = state.pos;
+
+    for (const { left, right, display } of delimiters) {
+      // 检查是否以左标记开始
+      if (!state.src.slice(start).startsWith(left)) continue;
+
+      // 跳过左标记的长度
+      let pos = start + left.length;
+
+      // 寻找匹配的右标记
+      while (pos < max) {
+        if (state.src.slice(pos).startsWith(right)) {
+          break;
+        }
+        pos++;
+      }
+
+      // 没找到匹配的右标记，跳过，进入下个匹配
+      if (pos >= max) continue;
+
+      if (!silent) {
+        const content = state.src.slice(start + left.length, pos);
+        const token = state.push("katex", "", 0);
+        try {
+          token.content = JSON.stringify(parse(content, options));
+        } catch (error) {
+          token.content = "[]";
+        }
+        token.block = display;
+      }
+
+      // 更新位置，跳过右标记的长度
+      state.pos = pos + right.length;
+      return true;
+    }
+    return false;
+  };
+}
+
+/**
+ * @param {MarkdownIt} md
+ * @param {KatexOptions} [options]
+ */
+export function katexPlugin(md, options) {
+  md.inline.ruler.after("text", "katex_escaped", katexEscapedRule(options));
+}
--- a/src/uni_modules/wtto-markdown/js_sdk/markdown.css
+++ b/src/uni_modules/wtto-markdown/js_sdk/markdown.css
@@ -0,0 +1,161 @@
+.markdown {
+	text-align: justify;
+	line-height: 1.5;
+	word-wrap: break-word;
+}
+
+.md_p {
+	margin: 0 0 20rpx;
+	text-align: left;
+}
+
+.md_hr {
+	margin: 1em 0;
+	border: 0;
+	border-top: 1px solid #f0f0f0;
+}
+
+.md_a {
+	color: #428bca;
+	text-decoration: none;
+}
+
+.md_ul,
+.md_ol {
+	margin-bottom: 20rpx;
+	padding-left: 2em;
+}
+
+.md_dl {
+	margin-bottom: 20rpx;
+}
+
+.md_dt {
+	font-weight: bold;
+}
+
+.md_h1 {
+	padding-bottom: 10rpx;
+	margin-bottom: 20rpx;
+}
+
+.md_h2 {
+	padding-bottom: 8rpx;
+	margin-bottom: 18rpx;
+}
+
+.md_h3 {
+	padding-bottom: 6rpx;
+	margin-bottom: 12rpx;
+}
+
+.md_h4 {
+	padding-bottom: 4rpx;
+	margin-bottom: 12rpx;
+}
+
+.md_h5 {
+	padding-bottom: 2rpx;
+	margin-bottom: 12rpx;
+}
+
+.md_h6 {
+	margin-bottom: 12rpx;
+}
+
+.md_blockquote {
+	border-left: 8rpx solid #f0f0f0;
+	padding: 0 20rpx;
+}
+
+.md_pre,
+.md_code,
+.md_kbd,
+.md_samp {
+	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
+		monospace, "STHeitiTC-Light", "Microsoft YaHei Light", -apple-system,
+		system-ui, BlinkMacSystemFont;
+	font-size: 90%;
+}
+
+.md_code {
+	padding: 4rpx 8rpx;
+	color: #c7254e;
+	background-color: #f9f2f4;
+	border-radius: 8rpx;
+}
+
+.md_kbd {
+	padding: 4rpx 8rpx;
+	color: #c7254e;
+	background-color: #f9f2f4;
+	border-radius: 8rpx;
+	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
+}
+
+.md_kbd .md_kbd {
+	padding: 0;
+	font-size: inherit;
+	box-shadow: none;
+}
+
+.md_pre {
+	display: block;
+	padding: 20rpx;
+	margin: 0 0 20rpx;
+	color: var(--shiki-light, #333);
+	word-break: break-all;
+	word-wrap: break-word;
+	background-color: var(--shiki-light-bg, #f5f5f5);
+	border: 1px solid #ccc;
+	border-radius: 8rpx;
+}
+
+.md_pre .md_code {
+	padding: 0;
+	font-size: inherit;
+	color: inherit;
+	white-space: pre-wrap;
+	background-color: transparent;
+	border-radius: 0;
+}
+
+.md_pre .md_code .md_code_line {
+	display: block;
+	min-height: 1em;
+	color: var(--shiki-light);
+}
+
+.md_pre .md_code .md_code_line .md_code_token {
+	color: var(--shiki-light);
+}
+
+.dark .md_pre {
+	background-color: var(--shiki-dark-bg);
+}
+.dark .md_pre .md_code .md_code_line,
+.dark .md_pre .md_code .md_code_line .md_code_token {
+	color: var(--shiki-dark);
+}
+
+.md_table {
+	border-collapse: collapse;
+	border-spacing: 0;
+	width: 100%;
+	margin-bottom: 40rpx;
+}
+
+.md_th,
+.md_td {
+	padding: 8rpx 16rpx;
+	border: 1px solid #f0f0f0;
+}
+
+.md_img {
+	max-width: 35%;
+}
+
+.md_sub,
+.md_sup {
+	font-size: 75%;
+}
--- a/src/uni_modules/wtto-markdown/package.json
+++ b/src/uni_modules/wtto-markdown/package.json
@@ -0,0 +1,94 @@
+{
+  "id": "wtto-markdown",
+  "displayName": "wtto-markdown",
+  "version": "1.0.0",
+  "description": "高性能markdown解析器，使用原生组件rich-text的nodes渲染。支持katex数学公式，代码高亮等",
+  "keywords": [
+    "wtto-markdown"
+],
+  "repository": "",
+  "engines": {
+    "HBuilderX": "^3.8.3"
+  },
+  "dcloudext": {
+    "type": "sdk-js",
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": "1059689343"
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "插件不采集任何数据",
+      "permissions": "无"
+    },
+    "npmurl": ""
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y",
+        "alipay": "y"
+      },
+      "client": {
+        "Vue": {
+          "vue2": "y",
+          "vue3": "y"
+        },
+        "App": {
+            "app-vue": "y",
+            "app-nvue": "y",
+            "app-uvue": "u",
+            "app-harmony": "u"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y",
+          "钉钉": "y",
+          "快手": "y",
+          "飞书": "y",
+          "京东": "y"
+        },
+        "快应用": {
+          "华为": "y",
+          "联盟": "y"
+        }
+      }
+    }
+  },
+  "devDependencies": {
+    "@types/katex": "^0.16.7",
+    "@types/markdown-it": "^14.1.2",
+    "@uni-helper/uni-types": "^1.0.0-alpha.6",
+    "shiki": "^1.24.0"
+  },
+  "dependencies": {
+    "@rojer/katex-mini": "^1.2.0",
+    "markdown-it": "^14.1.0"
+  }
+}
--- a/src/uni_modules/wtto-markdown/readme.md
+++ b/src/uni_modules/wtto-markdown/readme.md
@@ -0,0 +1,175 @@
+# wtto-markdown
+
+高性能 `markdown` 解析器，使用原生组件 `rich-text` 的 `nodes` 渲染。支持 katex 数学公式，代码高亮等。
+
+## 使用
+
+```vue
+<template>
+  <view class="markdown">
+    <rich-text :nodes="nodes"></rich-text>
+  </view>
+</template>
+
+<script>
+import { MarkdownIt, parseTokens } from "@/uni_modules/wtto-markdown/js_sdk/index";
+import "@/uni_modules/wtto-markdown/js_sdk/markdown.css";
+
+export default {
+  data() {
+    return {
+      nodes: [],
+    };
+  },
+  onLoad() {
+    const markdownIt = MarkdownIt({
+      typographer: true,
+      linkify: true,
+    });
+
+    const tokens = markdownIt.parse("# Markdown content", {});
+    this.nodes = parseTokens(tokens, this.markdownIt.options);
+  },
+};
+</script>
+```
+
+## Api
+
+`MarkdownIt(options)` 中的参数 `options`，参见 [MarkdownIt.new](https://markdown-it.github.io/markdown-it/#MarkdownIt.new)
+
+`markdownIt.parse(content,env)` 中的参数 `env`，参见 [MarkdownIt.parse](https://markdown-it.github.io/markdown-it/#MarkdownIt.parse)
+
+## 插件
+
+已测试并支持插件：
+
+- [subscript](https://github.com/markdown-it/markdown-it-sub)
+- [superscript](https://github.com/markdown-it/markdown-it-sup)
+- [footnote](https://github.com/markdown-it/markdown-it-footnote)
+- [definition list](https://github.com/markdown-it/markdown-it-deflist)
+- [abbreviation](https://github.com/markdown-it/markdown-it-abbr)
+- [emoji](https://github.com/markdown-it/markdown-it-emoji)
+- [custom container](https://github.com/markdown-it/markdown-it-container)
+- [insert](https://github.com/markdown-it/markdown-it-ins)
+- [mark](https://github.com/markdown-it/markdown-it-mark)
+
+### Katex 数学公式
+
+```js
+import { katexPlugin } from "@/uni_modules/wtto-markdown/js_sdk/katex";
+import "@/uni_modules/wtto-markdown/js_sdk/katex.css";
+
+markdownIt.use(katexPlugin, { throwOnError: true });
+```
+
+其中的参数可参见 [Katex Options](https://katex.org/docs/options)
+
+## 代码高亮
+
+需要自己安装依赖 [shiki](https://www.npmjs.com/package/shiki):
+
+```bash
+npm install shiki
+```
+
+使用示例：
+
+```js
+import { createHighlighterCoreSync } from "shiki/core";
+import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
+import { bundledLanguages } from "shiki/langs.mjs";
+import githubLight from "shiki/themes/github-light.mjs";
+import githubDark from "shiki/themes/github-dark.mjs";
+import { highlightPlugin } from "@/uni_modules/wtto-markdown/js_sdk/highlight";
+
+// 同步获取所有的语言
+const langs = [];
+for (const name in bundledLanguages) {
+  langs.push((await bundledLanguages[name]()).default);
+}
+
+const shiki = createHighlighterCoreSync({
+  themes: [githubLight, githubDark],
+  langs: langs,
+  engine: createJavaScriptRegexEngine(),
+});
+
+markdownIt.use(highlightPlugin, {
+  codeToTokens: (code, lang) =>
+    shiki.codeToTokens(code, {
+      themes: {
+        light: "github-light",
+        dark: "github-dark",
+      },
+      lang,
+    }),
+});
+```
+
+其中的参数 `codeToTokens`，需要返回 `shiki.codeToTokens` 方法的结果。其中 `shiki.codeToTokens` 的参数需要传入渲染所使用的主题:
+
+**注意**: 传入的主题 theme 以及语言 lang 必须在 `createHighlighterCoreSync` 中提前注册。
+
+```js
+shiki.codeToTokens(code, {
+  // 支持亮色和暗色多主题
+  themes: {
+    light: "github-light",
+    dark: "github-dark",
+  },
+  // 也可以只传入单个的主题
+  // theme: 'vitesse-light',
+  lang,
+});
+```
+
+可根据需求引入特定的语言。比如，只需要高亮`javascript`语言:
+
+```js
+import js from "shiki/langs/javascript.mjs";
+
+const shiki = createHighlighterCoreSync({
+  themes: [githubLight, githubDark],
+  langs: [js],
+  engine: createJavaScriptRegexEngine(),
+});
+```
+
+可根据需求选择主题，比如只需要使用主题 `vitesse-light`:
+
+```js
+import vitesseLight from "shiki/themes/vitesse-light.mjs";
+
+const shiki = createHighlighterCoreSync({
+  themes: [vitesseLight],
+  langs: [js],
+  engine: createJavaScriptRegexEngine(),
+});
+```
+
+## CSS 样式
+
+内置 markdown 样式 `@/uni_modules/wtto-markdown/js_sdk/markdown.css`，以及 katext 样式 `@/uni_modules/wtto-markdown/js_sdk/katex.css`。
+
+如果没有用到数学公式的渲染，不需要引入 `katex.css`。
+
+如果样式不满意，可以直接修改对应的 css 文件。
+
+关于 `markdown-it-container` 插件，需要根据自己注册的名称，自己添加对应的样式。比如，注册的 warning 容器:
+
+```css
+.md_container_warning {
+  background-color: #ff8;
+  padding: 40rpx;
+  border-radius: 12rpx;
+}
+```
+
+## QA
+
+1. 怎么处理事点击事件？
+
+   由于 `rich-text` 的限制，渲染后的内容会屏蔽所有节点的事件。
+
+   如果是在 APP 平台，可以使用 `renderjs` + `markdownIt.render(content)`，使用 HTML5 渲染。
--- a/yarn.lock
+++ b/yarn.lock
				`@@ -0,0 +1 @@`
				pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#abb2bf;background:#282c34}.hljs-comment,.hljs-quote{color:#5c6370;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#c678dd}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#98c379}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#d19a66}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#61aeee}.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#e6c07b}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}