使用vdom提高流式传输的图表解析效率

src/components/markdown/Markdown.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script setup lang="ts">
-import {computed, defineComponent, h} from 'vue'
+import { computed, defineComponent, h, VNode } from 'vue'
 import MarkdownIt from 'markdown-it';
 import {parseDocument} from 'htmlparser2'
 import { MarkdownPlugin } from '/@/components/markdown/type/markdown'
@@ -47,6 +47,7 @@ const MarkdownNodeRenderer = defineComponent({
   },
   setup(subprops) {
     return () => {
+
       const {node} = subprops;
       if (node.type === 'text') {
         return node.data
@@ -55,7 +56,7 @@ const MarkdownNodeRenderer = defineComponent({
       for (let i = 0; i < (props.plugins ?? []).length; i++) {
         const plugin = (props.plugins ?? [])[i]
         if (plugin.tagName === node.tagName) {
-          return plugin.renderer(node)
+          return plugin.renderer(node as {attribs: Record<string,string>})
         }
       }
 

src/components/markdown/plugins/markdown-it-echarts.ts

@@ -1,8 +1,6 @@
 import MarkdownIt from "markdown-it";
 import type {RenderRule} from "markdown-it/lib/renderer.mjs";
 import type Token from "markdown-it/lib/token.mjs";
-import type {Options} from "markdown-it/lib/index.mjs";
-import type Renderer from "markdown-it/lib/renderer.mjs";
 import {defineMarkdownPlugin} from "../type/markdown.ts";
 import {h} from "vue";
 import VueCharts from "./VueCharts.vue";
@@ -19,16 +17,15 @@ function isValidJSON(str: string): boolean {
 }
 
 // 渲染echarts代码块
-const renderEcharts: RenderRule = (tokens: Token[], idx: number, _options: Options, env: any, _self: Renderer) => {
+const renderEcharts: RenderRule = (tokens: Token[], idx: number) => {
     const token = tokens[idx]
     const content = token.content.trim()
 
     if (!content) {
         return '<div style="padding: 16px;background-color: #fff5f5;border: 1px solid #fed7d7;border-radius: 6px;color: #c53030;margin: 16px 0;">ECharts配置不能为空</div>'
     }
-    const className = env.echartsClassName || 'echarts-container'
     // 生成完整HTML
-    return `<echarts-container style="width: 100%;height: 350px;margin: 16px 0; border-radius: 6px"  class="${className}" data="${encodeURIComponent(content)}"></echarts-container>`
+    return `<echarts-container style="width: 100%;height: 350px;margin: 16px 0; border-radius: 6px" data="${encodeURIComponent(content)}"></echarts-container>`
 }