feat(ai): 添加 AI 绘图和思维导图功能

- 新增 AI 绘图管理页面，包括绘画列表、搜索筛选和操作功能
- 实现 AI 思维导图生成功能，支持流式生成和已有内容生成
- 添加 AI 音乐和写作相关的 API 接口
- 更新常量文件，增加 AI 平台、图像生成状态等枚举
- 优化 AI 绘图和思维导图的组件结构，提高可维护性

apps/web-antd/src/views/ai/mindmap/index/index.vue

@@ -1,28 +1,85 @@
 <script lang="ts" setup>
-import { Page } from '@vben/common-ui';
+import type { AiMindmapApi } from '#/api/ai/mindmap';
 
-import { Button } from 'ant-design-vue';
+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>
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/ai/mindmap/index/index.vue"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/ai/mindmap/index/index.vue
-      代码，pull request 贡献给我们！
-    </Button>
+  <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>