【代码评审】AI：code review 思维导图的逻辑

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

@@ -1,7 +1,7 @@
 <template>
   <el-card class="my-card h-full flex-grow">
-    <template #header
-      ><h3 class="m-0 px-7 shrink-0 flex items-center justify-between">
+    <template #header>
+      <h3 class="m-0 px-7 shrink-0 flex items-center justify-between">
         <span>思维导图预览</span>
         <!-- 展示在右上角 -->
         <el-button type="primary" v-show="isEnd" @click="downloadImage" size="small">
@@ -10,13 +10,13 @@
           </template>
           下载图片
         </el-button>
-      </h3></template
-    >
+      </h3>
+    </template>
 
     <div ref="contentRef" class="hide-scroll-bar h-full box-border">
-      <!--展示markdown的容器，最终生成的是html字符串，直接用v-html嵌入-->
+      <!--展示 markdown 的容器，最终生成的是 html 字符串，直接用 v-html 嵌入-->
       <div v-if="isGenerating" ref="mdContainerRef" class="wh-full overflow-y-auto">
-        <div  class="flex flex-col items-center justify-center" v-html="html"></div>
+        <div class="flex flex-col items-center justify-center" v-html="html"></div>
       </div>
 
       <div ref="mindmapRef" class="wh-full">
@@ -34,24 +34,25 @@ import { Toolbar } from 'markmap-toolbar'
 import markdownit from 'markdown-it'
 
 const md = markdownit()
+const message = useMessage() // 消息弹窗
+
+// TODO @hhero：mindmap 改成 mindMap 更精准哈
 const props = defineProps<{
-  mindmapResult: string // 生成结果
+  mindmapResult: string // 生成结果 TODO @hhero 改成 generatedContent 会不会好点
   isEnd: boolean // 是否结束
   isGenerating: boolean // 是否正在生成
-  isStart: boolean // 开始状态，开始时需要清除html
+  isStart: boolean // 开始状态，开始时需要清除 html
 }>()
 const contentRef = ref<HTMLDivElement>() // 右侧出来header以下的区域
-const mdContainerRef = ref<HTMLDivElement>() // markdown的容器，用来滚动到底下的
+const mdContainerRef = ref<HTMLDivElement>() // markdown 的容器，用来滚动到底下的
 const mindmapRef = ref<HTMLDivElement>() // 思维导图的容器
-const svgRef = ref<SVGElement>() // 思维导图的渲染svg
+const svgRef = ref<SVGElement>() // 思维导图的渲染 svg
 const toolBarRef = ref<HTMLDivElement>() // 思维导图右下角的工具栏，缩放等
 const html = ref('') // 生成过程中的文本
-const contentAreaHeight = ref(0) // 生成区域的高度，出去header部分
+const contentAreaHeight = ref(0) // 生成区域的高度，出去 header 部分
 let markMap: Markmap | null = null
 const transformer = new Transformer()
 
-const message = useMessage()
-
 onMounted(() => {
   contentAreaHeight.value = contentRef.value?.clientHeight || 0 // 获取区域高度
   /** 初始化思维导图 **/
@@ -66,11 +67,11 @@ onMounted(() => {
 })
 
 watch(props, ({ mindmapResult, isGenerating, isEnd, isStart }) => {
-  // 开始生成的时候清空一下markdown的内容
+  // 开始生成的时候清空一下 markdown 的内容
   if (isStart) {
     html.value = ''
   }
-  // 生成内容的时候使用markdown来渲染
+  // 生成内容的时候使用 markdown 来渲染
   if (isGenerating) {
     html.value = md.render(mindmapResult)
   }
@@ -79,6 +80,7 @@ watch(props, ({ mindmapResult, isGenerating, isEnd, isStart }) => {
   }
 })
 
+/** 更新思维导图的展示 */
 const update = () => {
   try {
     const { root } = transformer.transform(processContent(props.mindmapResult))
@@ -89,7 +91,8 @@ const update = () => {
   }
 }
 
-const processContent = (text) => {
+/** 处理内容 */
+const processContent = (text: string) => {
   const arr: string[] = []
   const lines = text.split('\n')
   for (let line of lines) {
@@ -101,6 +104,9 @@ const processContent = (text) => {
   }
   return arr.join('\n')
 }
+
+/** 下载图片 */
+// TODO @hhhero：可以抽到 download 这个里面，src/utils/download.ts 么？复用 image 方法？
 // download SVG to png file
 const downloadImage = () => {
   const svgElement = mindmapRef.value
@@ -121,7 +127,7 @@ const downloadImage = () => {
   image.onload = function () {
     context?.drawImage(image, 0, 0)
     const a = document.createElement('a')
-    a.download = 'ruoyi-mindmap.png'
+    a.download = 'mindmap.png'
     a.href = canvas.toDataURL(`image/png`)
     a.click()
   }