1b236e89bf
- 新增 AI 绘图管理页面，包括绘画列表、搜索筛选和操作功能 - 实现 AI 思维导图生成功能，支持流式生成和已有内容生成 - 添加 AI 音乐和写作相关的 API 接口 - 更新常量文件，增加 AI 平台、图像生成状态等枚举 - 优化 AI 绘图和思维导图的组件结构，提高可维护性
86 lines
2.5 KiB
Vue
86 lines
2.5 KiB
Vue
<script lang="ts" setup>
|
||
import type { AiMindmapApi } from '#/api/ai/mindmap';
|
||
|
||
import { nextTick, onMounted, ref } from 'vue';
|
||
|
||
import { alert, Page } from '@vben/common-ui';
|
||
|
||
import { generateMindMap } from '#/api/ai/mindmap';
|
||
import { MindMapContentExample } from '#/utils/constants';
|
||
import Left from './modules/Left.vue';
|
||
|
||
const ctrl = ref<AbortController>(); // 请求控制
|
||
const isGenerating = ref(false); // 是否正在生成思维导图
|
||
const isStart = ref(false); // 开始生成，用来清空思维导图
|
||
const isEnd = ref(true); // 用来判断结束的时候渲染思维导图
|
||
const generatedContent = ref(''); // 生成思维导图结果
|
||
|
||
const leftRef = ref<InstanceType<typeof Left>>(); // 左边组件
|
||
const rightRef = ref(); // 右边组件
|
||
|
||
/** 使用已有内容直接生成 */
|
||
const directGenerate = (existPrompt: string) => {
|
||
isEnd.value = false; // 先设置为 false 再设置为 true，让子组建的 watch 能够监听到
|
||
generatedContent.value = existPrompt;
|
||
isEnd.value = true;
|
||
};
|
||
/** 提交生成 */
|
||
const submit = (data: AiMindmapApi.AiMindMapGenerateReqVO) => {
|
||
isGenerating.value = true;
|
||
isStart.value = true;
|
||
isEnd.value = false;
|
||
ctrl.value = new AbortController(); // 请求控制赋值
|
||
generatedContent.value = ''; // 清空生成数据
|
||
generateMindMap({
|
||
data,
|
||
onMessage: async (res: any) => {
|
||
const { code, data, msg } = JSON.parse(res.data);
|
||
if (code !== 0) {
|
||
alert(`生成思维导图异常! ${msg}`);
|
||
stopStream();
|
||
return;
|
||
}
|
||
generatedContent.value = generatedContent.value + data;
|
||
await nextTick();
|
||
rightRef.value?.scrollBottom();
|
||
},
|
||
onClose() {
|
||
isEnd.value = true;
|
||
leftRef.value?.setGeneratedContent(generatedContent.value);
|
||
stopStream();
|
||
},
|
||
onError(err) {
|
||
console.error('生成思维导图失败', err);
|
||
stopStream();
|
||
// 需要抛出异常，禁止重试
|
||
throw err;
|
||
},
|
||
ctrl: ctrl.value,
|
||
});
|
||
};
|
||
/** 停止 stream 生成 */
|
||
const stopStream = () => {
|
||
isGenerating.value = false;
|
||
isStart.value = false;
|
||
ctrl.value?.abort();
|
||
};
|
||
|
||
/** 初始化 */
|
||
onMounted(() => {
|
||
generatedContent.value = MindMapContentExample;
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<Page auto-content-height>
|
||
<div class="absolute bottom-0 left-0 right-0 top-0 flex">
|
||
<Left
|
||
ref="leftRef"
|
||
:is-generating="isGenerating"
|
||
@submit="submit"
|
||
@direct-generate="directGenerate"
|
||
/>
|
||
</div>
|
||
</Page>
|
||
</template>
|