| 提交 | 用户 | 时间 | ||
| 820397 | 1 | <template> |
| H | 2 | <div class="absolute top-0 left-0 right-0 bottom-0 flex"> |
| 3 | <!--表单区域--> | |
| 4 | <Left | |
| 5 | ref="leftRef" | |
| 6 | @submit="submit" | |
| 7 | @direct-generate="directGenerate" | |
| 8 | :is-generating="isGenerating" | |
| 9 | /> | |
| 10 | <!--右边生成思维导图区域--> | |
| 11 | <Right | |
| 12 | ref="rightRef" | |
| 13 | :mindmapResult="mindmapResult" | |
| 14 | :isEnd="isEnd" | |
| 15 | :isGenerating="isGenerating" | |
| 16 | :isStart="isStart" | |
| 17 | /> | |
| 18 | </div> | |
| 19 | </template> | |
| 20 | ||
| 21 | <script setup lang="ts"> | |
| 22 | import Left from './components/Left.vue' | |
| 23 | import Right from './components/Right.vue' | |
| 24 | import { AiMindMapApi, AiMindMapGenerateReqVO } from '@/api/ai/mindmap' | |
| 25 | import { MindMapContentExample } from '@/views/ai/utils/constants' | |
| 26 | ||
| 27 | defineOptions({ | |
| 28 | name: 'AiMindMap' | |
| 29 | }) | |
| 30 | const ctrl = ref<AbortController>() // 请求控制 | |
| 31 | const isGenerating = ref(false) // 是否正在生成思维导图 | |
| 32 | const isStart = ref(false) // 开始生成，用来清空思维导图 | |
| 33 | const isEnd = ref(true) // 用来判断结束的时候渲染思维导图 | |
| 34 | const message = useMessage() // 消息提示 | |
| 35 | ||
| 36 | const mindmapResult = ref('') // 生成思维导图结果 | |
| 37 | ||
| 38 | const leftRef = ref<InstanceType<typeof Left>>() // 左边组件 | |
| 39 | const rightRef = ref<InstanceType<typeof Right>>() // 右边组件 | |
| 40 | ||
| 41 | /** 使用已有内容直接生成 **/ | |
| 42 | const directGenerate = (existPrompt: string) => { | |
| 43 | isEnd.value = false // 先设置为false再设置为true，让子组建的watch能够监听到 | |
| 44 | mindmapResult.value = existPrompt | |
| 45 | isEnd.value = true | |
| 46 | } | |
| 47 | ||
| 48 | /** 停止 stream 生成 */ | |
| 49 | const stopStream = () => { | |
| 50 | isGenerating.value = false | |
| 51 | isStart.value = false | |
| 52 | ctrl.value?.abort() | |
| 53 | } | |
| 54 | ||
| 55 | /** 提交生成 */ | |
| 56 | const submit = (data: AiMindMapGenerateReqVO) => { | |
| 57 | isGenerating.value = true | |
| 58 | isStart.value = true | |
| 59 | isEnd.value = false | |
| 60 | ctrl.value = new AbortController() // 请求控制赋值 | |
| 61 | mindmapResult.value = '' // 清空生成数据 | |
| 62 | AiMindMapApi.generateMindMap({ | |
| 63 | data, | |
| 64 | onMessage: async (res) => { | |
| 65 | const { code, data, msg } = JSON.parse(res.data) | |
| 66 | if (code !== 0) { | |
| 67 | message.alert(`生成思维导图异常! ${msg}`) | |
| 68 | stopStream() | |
| 69 | return | |
| 70 | } | |
| 71 | mindmapResult.value = mindmapResult.value + data | |
| 72 | await nextTick() | |
| 73 | rightRef.value?.scrollBottom() | |
| 74 | }, | |
| 75 | onClose() { | |
| 76 | isEnd.value = true | |
| 77 | leftRef.value?.setGeneratedContent(mindmapResult.value) | |
| 78 | stopStream() | |
| 79 | }, | |
| 80 | onError(err) { | |
| 81 | console.error('生成思维导图失败', err) | |
| 82 | stopStream() | |
| 83 | }, | |
| 84 | ctrl: ctrl.value | |
| 85 | }) | |
| 86 | } | |
| 87 | ||
| 88 | /** 初始化 */ | |
| 89 | onMounted(() => { | |
| 90 | mindmapResult.value = MindMapContentExample | |
| 91 | }) | |
| 92 | </script> | |
