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

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

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