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

8d4c9e9c · hhhero · ed36d2bf · 8d4c9e9c · 8d4c9e9c · 8d4c9e9c
Commit 8d4c9e9c authored Jul 30, 2024 by hhhero
Showing with 45 additions and 41 deletions

src/utils/download.ts
+20 -5

src/views/ai/image/index/components/ImageList.vue
+1 -1

src/views/ai/mindmap/index/components/Right.vue
+17 -28

src/views/ai/mindmap/index/index.vue
+7 -7

No files found.
--- a/src/utils/download.ts
+++ b/src/utils/download.ts
@@ -34,16 +34,31 @@ const download = {
    download0(data, fileName, 'text/markdown')
  },
  // 下载图片（允许跨域）
-  image: (url: string) => {
+  image: ({
+    url,
+    canvasWidth,
+    canvasHeight,
+    drawWithImageSize = true
+  }: {
+    url: string
+    canvasWidth?: number // 指定画布宽度
+    canvasHeight?: number // 指定画布高度
+    drawWithImageSize?: boolean // 将图片绘制在画布上时带上图片的宽高值, 默认是要带上的
+  }) => {
    const image = new Image()
-    image.setAttribute('crossOrigin', 'anonymous')
+    // image.setAttribute('crossOrigin', 'anonymous')
    image.src = url
    image.onload = () => {
      const canvas = document.createElement('canvas')
-      canvas.width = image.width
+      canvas.width = canvasWidth || image.width
-      canvas.height = image.height
+      canvas.height = canvasHeight || image.height
-      const ctx = canvas.getContext('2d') as CanvasDrawImage
+      const ctx = canvas.getContext('2d') as CanvasRenderingContext2D
+      ctx?.clearRect(0, 0, canvas.width, canvas.height)
+      if (drawWithImageSize) {
        ctx.drawImage(image, 0, 0, image.width, image.height)
+      } else {
+        ctx.drawImage(image, 0, 0)
+      }
      const url = canvas.toDataURL('image/png')
      const a = document.createElement('a')
      a.href = url

--- a/src/views/ai/image/index/components/ImageList.vue
+++ b/src/views/ai/image/index/components/ImageList.vue
@@ -150,7 +150,7 @@ const handleImageButtonClick = async (type: string, imageDetail: ImageVO) => {
  }
  // 下载
  if (type === 'download') {
-    await download.image(imageDetail.picUrl)
+    await download.image({ url: imageDetail.picUrl })
    return
  }
  // 重新生成

--- a/src/views/ai/mindmap/index/components/Right.vue
+++ b/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 =
+  const source = `<?xml version="1.0" standalone="no"?>\r\n${serializer.serializeToString(svgRef.value!)}`
-    '<?xml version="1.0" standalone="no"?>\r\n' + serializer.serializeToString(svgRef.value!)
+  const base64Url = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(source)}`
-  const image = new Image()
+  download.image({
-  image.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(source)
+    url: base64Url,
+    canvasWidth: svgElement?.offsetWidth,
-  // 将图片对象渲染
+    canvasHeight: svgElement?.offsetHeight,
-  const canvas = document.createElement('canvas')
+    drawWithImageSize: false
-  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()
-  }
 }
 defineExpose({

--- a/src/views/ai/mindmap/index/index.vue
+++ b/src/views/ai/mindmap/index/index.vue
@@ -10,7 +10,7 @@
    <!--右边生成思维导图区域-->
    <Right
      ref="rightRef"
-      :mindmapResult="mindmapResult"
+      :generatedContent="generatedContent"
      :isEnd="isEnd"
      :isGenerating="isGenerating"
      :isStart="isStart"
@@ -33,7 +33,7 @@ const isStart = ref(false) // 开始生成，用来清空思维导图
 const isEnd = ref(true) // 用来判断结束的时候渲染思维导图
 const message = useMessage() // 消息提示
-const mindmapResult = ref('') // 生成思维导图结果
+const generatedContent = ref('') // 生成思维导图结果
 const leftRef = ref<InstanceType<typeof Left>>() // 左边组件
 const rightRef = ref<InstanceType<typeof Right>>() // 右边组件
@@ -41,7 +41,7 @@ const rightRef = ref<InstanceType<typeof Right>>() // 右边组件
 /** 使用已有内容直接生成 **/
 const directGenerate = (existPrompt: string) => {
  isEnd.value = false // 先设置为false再设置为true，让子组建的watch能够监听到
-  mindmapResult.value = existPrompt
+  generatedContent.value = existPrompt
  isEnd.value = true
 }
@@ -58,7 +58,7 @@ const submit = (data: AiMindMapGenerateReqVO) => {
  isStart.value = true
  isEnd.value = false
  ctrl.value = new AbortController() // 请求控制赋值
-  mindmapResult.value = '' // 清空生成数据
+  generatedContent.value = '' // 清空生成数据
  AiMindMapApi.generateMindMap({
    data,
    onMessage: async (res) => {
@@ -68,13 +68,13 @@ const submit = (data: AiMindMapGenerateReqVO) => {
        stopStream()
        return
      }
-      mindmapResult.value = mindmapResult.value + data
+      generatedContent.value = generatedContent.value + data
      await nextTick()
      rightRef.value?.scrollBottom()
    },
    onClose() {
      isEnd.value = true
-      leftRef.value?.setGeneratedContent(mindmapResult.value)
+      leftRef.value?.setGeneratedContent(generatedContent.value)
      stopStream()
    },
    onError(err) {
@@ -87,6 +87,6 @@ const submit = (data: AiMindMapGenerateReqVO) => {
 /** 初始化 */
 onMounted(() => {
-  mindmapResult.value = MindMapContentExample
+  generatedContent.value = MindMapContentExample
 })
 </script>