From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/views/ai/mindmap/index/components/Right.vue | 167 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 167 insertions(+), 0 deletions(-)
diff --git a/src/views/ai/mindmap/index/components/Right.vue b/src/views/ai/mindmap/index/components/Right.vue
new file mode 100644
index 0000000..b1d04de
--- /dev/null
+++ b/src/views/ai/mindmap/index/components/Right.vue
@@ -0,0 +1,167 @@
+<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">
+ <span>鎬濈淮瀵煎浘棰勮</span>
+ <!-- 灞曠ず鍦ㄥ彸涓婅 -->
+ <el-button v-show="isEnd" size="small" type="primary" @click="downloadImage">
+ <template #icon>
+ <Icon icon="ph:copy-bold" />
+ </template>
+ 涓嬭浇鍥剧墖
+ </el-button>
+ </h3>
+ </template>
+
+ <div ref="contentRef" class="hide-scroll-bar h-full box-border">
+ <!--灞曠ず 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>
+
+ <div ref="mindMapRef" class="wh-full">
+ <svg ref="svgRef" :style="{ height: `${contentAreaHeight}px` }" class="w-full" />
+ <div ref="toolBarRef" class="absolute bottom-[10px] right-5"></div>
+ </div>
+ </div>
+ </el-card>
+</template>
+
+<script lang="ts" setup>
+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() // 娑堟伅寮圭獥
+
+const props = defineProps<{
+ generatedContent: string // 鐢熸垚缁撴灉
+ isEnd: boolean // 鏄惁缁撴潫
+ isGenerating: boolean // 鏄惁姝ｅ湪鐢熸垚
+ isStart: boolean // 寮�濮嬬姸鎬侊紝寮�濮嬫椂闇�瑕佹竻闄� html
+}>()
+const contentRef = ref<HTMLDivElement>() // 鍙充晶鍑烘潵 header 浠ヤ笅鐨勫尯鍩�
+const mdContainerRef = ref<HTMLDivElement>() // markdown 鐨勫鍣紝鐢ㄦ潵婊氬姩鍒板簳涓嬬殑
+const mindMapRef = ref<HTMLDivElement>() // 鎬濈淮瀵煎浘鐨勫鍣�
+const svgRef = ref<SVGElement>() // 鎬濈淮瀵煎浘鐨勬覆鏌� svg
+const toolBarRef = ref<HTMLDivElement>() // 鎬濈淮瀵煎浘鍙充笅瑙掔殑宸ュ叿鏍忥紝缂╂斁绛�
+const html = ref('') // 鐢熸垚杩囩▼涓殑鏂囨湰
+const contentAreaHeight = ref(0) // 鐢熸垚鍖哄煙鐨勯珮搴︼紝鍑哄幓 header 閮ㄥ垎
+let markMap: Markmap | null = null
+const transformer = new Transformer()
+
+onMounted(() => {
+ contentAreaHeight.value = contentRef.value?.clientHeight || 0 // 鑾峰彇鍖哄煙楂樺害
+ /** 鍒濆鍖栨�濈淮瀵煎浘 **/
+ try {
+ markMap = Markmap.create(svgRef.value!)
+ const { el } = Toolbar.create(markMap)
+ toolBarRef.value?.append(el)
+ nextTick(update)
+ } catch (e) {
+ message.error('鎬濈淮瀵煎浘鍒濆鍖栧け璐�')
+ }
+})
+
+watch(props, ({ generatedContent, isGenerating, isEnd, isStart }) => {
+ // 寮�濮嬬敓鎴愮殑鏃跺�欐竻绌轰竴涓� markdown 鐨勫唴瀹�
+ if (isStart) {
+ html.value = ''
+ }
+ // 鐢熸垚鍐呭鐨勬椂鍊欎娇鐢� markdown 鏉ユ覆鏌�
+ if (isGenerating) {
+ html.value = md.render(generatedContent)
+ }
+ // 鐢熸垚缁撴潫鏃舵洿鏂版�濈淮瀵煎浘
+ if (isEnd) {
+ update()
+ }
+})
+
+/** 鏇存柊鎬濈淮瀵煎浘鐨勫睍绀� */
+const update = () => {
+ try {
+ const { root } = transformer.transform(processContent(props.generatedContent))
+ markMap?.setData(root)
+ markMap?.fit()
+ } catch (e) {
+ console.error(e)
+ }
+}
+
+/** 澶勭悊鍐呭 */
+const processContent = (text: string) => {
+ const arr: string[] = []
+ const lines = text.split('\n')
+ for (let line of lines) {
+ if (line.indexOf('```') !== -1) {
+ continue
+ }
+ line = line.replace(/([*_~`>])|(\d+\.)\s/g, '')
+ arr.push(line)
+ }
+ return arr.join('\n')
+}
+
+/** 涓嬭浇鍥剧墖锛歞ownload SVG to png file */
+const downloadImage = () => {
+ const svgElement = mindMapRef.value
+ // 灏� SVG 娓叉煋鍒板浘鐗囧璞�
+ const serializer = new XMLSerializer()
+ 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({
+ scrollBottom() {
+ mdContainerRef.value?.scrollTo(0, mdContainerRef.value?.scrollHeight)
+ }
+})
+</script>
+<style lang="scss" scoped>
+.hide-scroll-bar {
+ -ms-overflow-style: none;
+ scrollbar-width: none;
+
+ &::-webkit-scrollbar {
+ width: 0;
+ height: 0;
+ }
+}
+
+.my-card {
+ display: flex;
+ flex-direction: column;
+
+ :deep(.el-card__body) {
+ box-sizing: border-box;
+ flex-grow: 1;
+ overflow-y: auto;
+ padding: 0;
+ @extend .hide-scroll-bar;
+ }
+}
+
+// markmap鐨則ool鏍峰紡瑕嗙洊
+:deep(.markmap) {
+ width: 100%;
+}
+
+:deep(.mm-toolbar-brand) {
+ display: none;
+}
+
+:deep(.mm-toolbar) {
+ display: flex;
+ flex-direction: row;
+}
+</style>
--
Gitblit v1.8.0