[代码优化]AI: 思维导图

src/views/ai/mindmap/index/components/Right.vue

@@ -19,7 +19,7 @@
         <div class="flex flex-col items-center justify-center" v-html="html"></div>
       </div>
 
-      <div ref="mindmapRef" class="wh-full">
+      <div ref="mindMapRef" class="wh-full">
         <svg ref="svgRef" class="w-full" :style="{ height: `${contentAreaHeight}px` }" />
         <div ref="toolBarRef" class="absolute bottom-[10px] right-5"></div>
       </div>
@@ -32,20 +32,20 @@ import { Markmap } from 'markmap-view'
 import { Transformer } from 'markmap-lib'
 import { Toolbar } from 'markmap-toolbar'
 import markdownit from 'markdown-it'
+import download from '@/utils/download'
 
 const md = markdownit()
 const message = useMessage() // 消息弹窗
 
-// TODO @hhero：mindmap 改成 mindMap 更精准哈
 const props = defineProps<{
-  mindmapResult: string // 生成结果 TODO @hhero 改成 generatedContent 会不会好点
+  generatedContent: string // 生成结果
   isEnd: boolean // 是否结束
   isGenerating: boolean // 是否正在生成
   isStart: boolean // 开始状态，开始时需要清除 html
 }>()
 const contentRef = ref<HTMLDivElement>() // 右侧出来header以下的区域
 const mdContainerRef = ref<HTMLDivElement>() // markdown 的容器，用来滚动到底下的
-const mindmapRef = ref<HTMLDivElement>() // 思维导图的容器
+const mindMapRef = ref<HTMLDivElement>() // 思维导图的容器
 const svgRef = ref<SVGElement>() // 思维导图的渲染 svg
 const toolBarRef = ref<HTMLDivElement>() // 思维导图右下角的工具栏，缩放等
 const html = ref('') // 生成过程中的文本
@@ -66,15 +66,16 @@ onMounted(() => {
   }
 })
 
-watch(props, ({ mindmapResult, isGenerating, isEnd, isStart }) => {
+watch(props, ({ generatedContent, isGenerating, isEnd, isStart }) => {
   // 开始生成的时候清空一下 markdown 的内容
   if (isStart) {
     html.value = ''
   }
   // 生成内容的时候使用 markdown 来渲染
   if (isGenerating) {
-    html.value = md.render(mindmapResult)
+    html.value = md.render(generatedContent)
   }
+  // 生成结束时更新思维导图
   if (isEnd) {
     update()
   }
@@ -83,7 +84,7 @@ watch(props, ({ mindmapResult, isGenerating, isEnd, isStart }) => {
 /** 更新思维导图的展示 */
 const update = () => {
   try {
-    const { root } = transformer.transform(processContent(props.mindmapResult))
+    const { root } = transformer.transform(processContent(props.generatedContent))
     markMap?.setData(root)
     markMap?.fit()
   } catch (e) {
@@ -106,31 +107,19 @@ const processContent = (text: string) => {
 }
 
 /** 下载图片 */
-// TODO @hhhero：可以抽到 download 这个里面，src/utils/download.ts 么？复用 image 方法？
 // download SVG to png file
 const downloadImage = () => {
-  const svgElement = mindmapRef.value
+  const svgElement = mindMapRef.value
   // 将 SVG 渲染到图片对象
   const serializer = new XMLSerializer()
-  const source =
-    '<?xml version="1.0" standalone="no"?>\r\n' + serializer.serializeToString(svgRef.value!)
-  const image = new Image()
-  image.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(source)
-
-  // 将图片对象渲染
-  const canvas = document.createElement('canvas')
-  canvas.width = svgElement?.offsetWidth || 0
-  canvas.height = svgElement?.offsetHeight || 0
-  let context = canvas.getContext('2d')
-  context?.clearRect(0, 0, canvas.width, canvas.height)
-
-  image.onload = function () {
-    context?.drawImage(image, 0, 0)
-    const a = document.createElement('a')
-    a.download = 'mindmap.png'
-    a.href = canvas.toDataURL(`image/png`)
-    a.click()
-  }
+  const source = `<?xml version="1.0" standalone="no"?>\r\n${serializer.serializeToString(svgRef.value!)}`
+  const base64Url = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(source)}`
+  download.image({
+    url: base64Url,
+    canvasWidth: svgElement?.offsetWidth,
+    canvasHeight: svgElement?.offsetHeight,
+    drawWithImageSize: false
+  })
 }
 
 defineExpose({