From b2bdcdcf9cd5ccec926f2267c02ed2cab40f9f69 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 10 Aug 2024 18:10:47 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E3=80=91AI=20=E5=A4=A7=E6=A8=A1=E5=9E=8B=EF=BC=9A=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E6=80=9D=E7=BB=B4=E5=AF=BC=E5=9B=BE=E7=9A=84=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ai/mindmap/index/components/Right.vue     |  5 ++--
 src/views/ai/mindmap/index/index.vue          |  2 +-
 src/views/ai/mindmap/manager/index.vue        | 24 ++++++++++++++++++-
 3 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/views/ai/mindmap/index/components/Right.vue b/src/views/ai/mindmap/index/components/Right.vue
index 24ed77cc..dfb258a7 100644
--- a/src/views/ai/mindmap/index/components/Right.vue
+++ b/src/views/ai/mindmap/index/components/Right.vue
@@ -43,7 +43,7 @@ const props = defineProps<{
   isGenerating: boolean // 是否正在生成
   isStart: boolean // 开始状态，开始时需要清除 html
 }>()
-const contentRef = ref<HTMLDivElement>() // 右侧出来header以下的区域
+const contentRef = ref<HTMLDivElement>() // 右侧出来 header 以下的区域
 const mdContainerRef = ref<HTMLDivElement>() // markdown 的容器，用来滚动到底下的
 const mindMapRef = ref<HTMLDivElement>() // 思维导图的容器
 const svgRef = ref<SVGElement>() // 思维导图的渲染 svg
@@ -106,8 +106,7 @@ const processContent = (text: string) => {
   return arr.join('\n')
 }
 
-/** 下载图片 */
-// download SVG to png file
+/** 下载图片：download SVG to png file */
 const downloadImage = () => {
   const svgElement = mindMapRef.value
   // 将 SVG 渲染到图片对象
diff --git a/src/views/ai/mindmap/index/index.vue b/src/views/ai/mindmap/index/index.vue
index d7403ea2..60a6b85e 100644
--- a/src/views/ai/mindmap/index/index.vue
+++ b/src/views/ai/mindmap/index/index.vue
@@ -40,7 +40,7 @@ const rightRef = ref<InstanceType<typeof Right>>() // 右边组件
 
 /** 使用已有内容直接生成 **/
 const directGenerate = (existPrompt: string) => {
-  isEnd.value = false // 先设置为false再设置为true，让子组建的watch能够监听到
+  isEnd.value = false // 先设置为 false 再设置为 true，让子组建的 watch 能够监听到
   generatedContent.value = existPrompt
   isEnd.value = true
 }
diff --git a/src/views/ai/mindmap/manager/index.vue b/src/views/ai/mindmap/manager/index.vue
index 2460165b..1a5e9305 100644
--- a/src/views/ai/mindmap/manager/index.vue
+++ b/src/views/ai/mindmap/manager/index.vue
@@ -70,8 +70,9 @@
         width="180px"
       />
       <el-table-column label="错误信息" align="center" prop="errorMessage" />
-      <el-table-column label="操作" align="center" width="100" fixed="right">
+      <el-table-column label="操作" align="center" width="120" fixed="right">
         <template #default="scope">
+          <el-button link type="primary" @click="openPreview(scope.row)"> 预览 </el-button>
           <el-button
             link
             type="danger"
@@ -91,12 +92,24 @@
       @pagination="getList"
     />
   </ContentWrap>
+
+  <!-- 思维导图的预览 -->
+  <el-drawer v-model="previewVisible" :with-header="false" size="800px">
+    <Right
+      ref="rightRef"
+      :generatedContent="previewContent"
+      :isEnd="true"
+      :isGenerating="false"
+      :isStart="false"
+    />
+  </el-drawer>
 </template>
 
 <script setup lang="ts">
 import { dateFormatter } from '@/utils/formatTime'
 import { AiMindMapApi, MindMapVO } from '@/api/ai/mindmap'
 import * as UserApi from '@/api/system/user'
+import Right from '@/views/ai/mindmap/index/components/Right.vue'
 
 /** AI 思维导图 列表 */
 defineOptions({ name: 'AiMindMapManager' })
@@ -154,6 +167,15 @@ const handleDelete = async (id: number) => {
   } catch {}
 }
 
+// TODO 芋艿：预览会报错
+/** 预览操作按钮 */
+const previewVisible = ref(false)
+const previewContent = ref('')
+const openPreview = (row: MindMapVO) => {
+  previewContent.value = row.generatedContent
+  previewVisible.value = true
+}
+
 /** 初始化 **/
 onMounted(async () => {
   getList()