mirror of
https://gitee.com/hhyykk/ipms-sjy-ui.git
synced 2025-07-15 03:15:07 +08:00
83 lines
2.5 KiB
Vue
83 lines
2.5 KiB
Vue
|
<template>
|
|||
|
|
<div class="absolute top-0 left-0 right-0 bottom-0 flex">
|
|||
|
|
<!--表单区域-->
|
|||
|
|
<Left ref="leftRef" @submit="submit" @direct-generate="directGenerate" :is-generating="isGenerating" />
|
|||
|
|
<!--右边生成思维导图区域-->
|
|||
|
|
<Right
|
|||
|
|
ref="rightRef"
|
|||
|
|
:mindmapResult="mindmapResult"
|
|||
|
|
:isEnd="isEnd"
|
|||
|
|
:isGenerating="isGenerating"
|
|||
|
|
:isStart="isStart"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import Left from './components/Left.vue'
|
|||
|
|
import Right from './components/Right.vue'
|
|||
|
|
import { AiMindMapApi, AiMindMapGenerateReqVO } from '@/api/ai/mindmap'
|
|||
|
|
import { MindmapExitExample } from '@/views/ai/utils/constants'
|
|||
|
|
|
|||
|
|
defineOptions({
|
|||
|
|
name: 'AIMindMap'
|
|||
|
|
})
|
|||
|
|
const ctrl = ref<AbortController>() // 请求控制
|
|||
|
|
const isGenerating = ref(false) // 是否正在生成思维导图
|
|||
|
|
const isStart = ref(false) // 开始生成，用来清空思维导图
|
|||
|
|
const isEnd = ref(true) // 用来判断结束的时候渲染思维导图
|
|||
|
|
const message = useMessage() // 消息提示
|
|||
|
|
|
|||
|
|
const mindmapResult = ref('') // 生成思维导图结果
|
|||
|
|
|
|||
|
|
const leftRef = ref<InstanceType<typeof Left>>() // 左边组件
|
|||
|
|
const rightRef = ref<InstanceType<typeof Right>>() // 右边组件
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
mindmapResult.value = MindmapExitExample
|
|||
|
|
})
|
|||
|
|
/** 使用已有内容直接生成 **/
|
|||
|
|
const directGenerate = (existPrompt: string) => {
|
|||
|
|
isEnd.value = false // 先设置为false再设置为true，让子组建的watch能够监听到
|
|||
|
|
mindmapResult.value = existPrompt
|
|||
|
|
isEnd.value = true
|
|||
|
|
}
|
|||
|
|
/** 停止 stream 生成 */
|
|||
|
|
const stopStream = () => {
|
|||
|
|
isGenerating.value = false
|
|||
|
|
isStart.value = false
|
|||
|
|
ctrl.value?.abort()
|
|||
|
|
}
|
|||
|
|
const submit = (data: AiMindMapGenerateReqVO) => {
|
|||
|
|
isGenerating.value = true
|
|||
|
|
isStart.value = true
|
|||
|
|
isEnd.value = false
|
|||
|
|
ctrl.value = new AbortController() // 请求控制赋值
|
|||
|
|
mindmapResult.value = '' // 清空生成数据
|
|||
|
|
AiMindMapApi.generateMindMap({
|
|||
|
|
data,
|
|||
|
|
onMessage:async (res) => {
|
|||
|
|
const { code, data, msg } = JSON.parse(res.data)
|
|||
|
|
if (code !== 0) {
|
|||
|
|
message.alert(`生成思维导图异常! ${msg}`)
|
|||
|
|
stopStream()
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
mindmapResult.value = mindmapResult.value + data
|
|||
|
|
await nextTick()
|
|||
|
|
rightRef.value?.scrollBottom()
|
|||
|
|
},
|
|||
|
|
onClose() {
|
|||
|
|
isEnd.value = true
|
|||
|
|
leftRef.value?.setExistPrompt(mindmapResult.value)
|
|||
|
|
stopStream()
|
|||
|
|
},
|
|||
|
|
onError(err) {
|
|||
|
|
console.error('生成思维导图失败', err)
|
|||
|
|
stopStream()
|
|||
|
|
},
|
|||
|
|
ctrl: ctrl.value
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
</script>
|