【功能新增】AI 大模型：支持思维导图的管理

Author: YunaiV

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 渲染到图片对象

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
 }

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()