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

- 新增 AI 绘图管理页面，包括绘画列表、搜索筛选和操作功能 - 实现 AI 思维导图生成功能，支持流式生成和已有内容生成 - 添加 AI 音乐和写作相关的 API 接口 - 更新常量文件，增加 AI 平台、图像生成状态等枚举 - 优化 AI 绘图和思维导图的组件结构，提高可维护性
2025-06-09 16:20:34 +08:00
parent 3ef362508a
commit 1b236e89bf
16 changed files with 1794 additions and 103 deletions
--- a/apps/web-antd/src/views/ai/mindmap/index/index.vue
+++ b/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>
--- a/apps/web-antd/src/views/ai/mindmap/index/modules/Left.vue
+++ b/apps/web-antd/src/views/ai/mindmap/index/modules/Left.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+
+import { Button, Textarea } from 'ant-design-vue';
+
+import { MindMapContentExample } from '#/utils/constants';
+
+defineProps<{
+  isGenerating: boolean;
+}>();
+const emits = defineEmits(['submit', 'directGenerate']);
+const formData = reactive({
+  prompt: '',
+});
+
+const generatedContent = ref(MindMapContentExample); // 已有的内容
+
+defineExpose({
+  setGeneratedContent(newContent: string) {
+    // 设置已有的内容，在生成结束的时候将结果赋值给该值
+    generatedContent.value = newContent;
+  },
+});
+</script>
+<template>
+  <div class="flex w-[350px] flex-col bg-[#f5f7f9] p-5">
+    <h3 class="title w-full text-center leading-[28px]">思维导图创作中心</h3>
+    <div class="flex-grow overflow-y-auto">
+      <div>
+        <b>您的需求？</b>
+        <Textarea
+          v-model:value="formData.prompt"
+          :maxlength="1024"
+          :rows="8"
+          class="w-100% mt-15px"
+          placeholder="请输入提示词，让AI帮你完善"
+          show-count
+        />
+        <Button
+          class="mt-[15px] !w-full"
+          type="primary"
+          :loading="isGenerating"
+          @click="emits('submit', formData)"
+        >
+          智能生成思维导图
+        </Button>
+      </div>
+      <div class="mt-[30px]">
+        <b>使用已有内容生成？</b>
+        <Textarea
+          v-model:value="generatedContent"
+          :maxlength="1024"
+          :rows="8"
+          class="w-100% mt-15px"
+          placeholder="例如：童话里的小屋应该是什么样子？"
+          show-count
+        />
+        <Button
+          class="mt-[15px] !w-full"
+          type="primary"
+          @click="emits('directGenerate', generatedContent)"
+          :disabled="isGenerating"
+        >
+          直接生成
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.title {
+  height: 1.75rem;
+  font-size: 1.25rem;
+  color: hsl(var(--primary));
+}
+</style>
--- a/apps/web-antd/src/views/ai/mindmap/index/modules/Right.vue
+++ b/apps/web-antd/src/views/ai/mindmap/index/modules/Right.vue
@@ -0,0 +1,167 @@
+<script setup lang="ts">
+import { Button, Card, message } from 'ant-design-vue';
+import markdownit from 'markdown-it';
+import { Markmap } from 'markmap-view'
+import { Transformer } from 'markmap-lib'
+import { Toolbar } from 'markmap-toolbar'
+import { nextTick, onMounted, ref, watch } from 'vue';
+
+const md = markdownit();
+const props = defineProps<{
+  generatedContent: string // 生成结果
+  isEnd: boolean // 是否结束
+  isGenerating: boolean // 是否正在生成
+  isStart: boolean // 开始状态，开始时需要清除 html
+}>()
+const contentRef = ref<HTMLDivElement>() // 右侧出来 header 以下的区域
+const mdContainerRef = ref<HTMLDivElement>() // markdown 的容器，用来滚动到底下的
+const mindMapRef = ref<HTMLDivElement>() // 思维导图的容器
+const svgRef = ref<SVGElement>() // 思维导图的渲染 svg
+const toolBarRef = ref<HTMLDivElement>() // 思维导图右下角的工具栏，缩放等
+const html = ref('') // 生成过程中的文本
+const contentAreaHeight = ref(0) // 生成区域的高度，出去 header 部分
+let markMap: Markmap | null = null
+const transformer = new Transformer()
+
+onMounted(() => {
+  contentAreaHeight.value = contentRef.value?.clientHeight || 0 // 获取区域高度
+  /** 初始化思维导图 **/
+  try {
+    markMap = Markmap.create(svgRef.value!)
+    const { el } = Toolbar.create(markMap)
+    toolBarRef.value?.append(el)
+    nextTick(update)
+  } catch (e) {
+    message.error('思维导图初始化失败')
+  }
+})
+watch(props, ({ generatedContent, isGenerating, isEnd, isStart }) => {
+  // 开始生成的时候清空一下 markdown 的内容
+  if (isStart) {
+    html.value = ''
+  }
+  // 生成内容的时候使用 markdown 来渲染
+  if (isGenerating) {
+    html.value = md.render(generatedContent)
+  }
+  // 生成结束时更新思维导图
+  if (isEnd) {
+    update()
+  }
+})
+/** 更新思维导图的展示 */
+const update = () => {
+  try {
+    const { root } = transformer.transform(processContent(props.generatedContent))
+    markMap?.setData(root)
+    markMap?.fit()
+  } catch (e) {
+    console.error(e)
+  }
+}
+
+/** 处理内容 */
+const processContent = (text: string) => {
+  const arr: string[] = []
+  const lines = text.split('\n')
+  for (let line of lines) {
+    if (line.indexOf('```') !== -1) {
+      continue
+    }
+    line = line.replace(/([*_~`>])|(\d+\.)\s/g, '')
+    arr.push(line)
+  }
+  return arr.join('\n')
+}
+
+/** 下载图片：download SVG to png file */
+const downloadImage = () => {
+  const svgElement = mindMapRef.value
+  // 将 SVG 渲染到图片对象
+  const serializer = new XMLSerializer()
+  const source = `<?xml version="1.0" standalone="no"?>\r\n${serializer.serializeToString(svgRef.value!)}`
+  const base64Url = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(source)}`
+  download.image({
+    url: base64Url,
+    canvasWidth: svgElement?.offsetWidth,
+    canvasHeight: svgElement?.offsetHeight,
+    drawWithImageSize: false
+  })
+}
+
+defineExpose({
+  scrollBottom() {
+    mdContainerRef.value?.scrollTo(0, mdContainerRef.value?.scrollHeight)
+  }
+})
+</script>
+
+<template>
+  <Card class="my-card h-full flex-grow">
+    <template #title>
+      <h3 class="m-0 flex shrink-0 items-center justify-between px-7">
+        <span>思维导图预览</span>
+        <!-- 展示在右上角 -->
+        <Button v-show="isEnd" size="small" type="primary" style="display: flex;" @click="downloadImage">
+          <template #icon>
+            <div class="flex items-center justify-center">
+              <span class="icon-[ant-design--copy-twotone]"></span>
+            </div>
+          </template>
+          下载图片
+        </Button>
+      </h3>
+    </template>
+    <div ref="contentRef" class="hide-scroll-bar h-full box-border">
+      <!--展示 markdown 的容器，最终生成的是 html 字符串，直接用 v-html 嵌入-->
+      <div v-if="isGenerating" ref="mdContainerRef" class="wh-full overflow-y-auto">
+        <div class="flex flex-col items-center justify-center" v-html="html"></div>
+      </div>
+
+      <div ref="mindMapRef" class="wh-full">
+        <svg ref="svgRef" :style="{ height: `${contentAreaHeight}px` }" class="w-full" />
+        <div ref="toolBarRef" class="absolute bottom-[10px] right-5"></div>
+      </div>
+    </div>
+  </Card>
+</template>
+
+<style lang="scss" scoped>
+.hide-scroll-bar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+}
+
+.my-card {
+  display: flex;
+  flex-direction: column;
+
+  :deep(.el-card__body) {
+    @extend .hide-scroll-bar;
+
+    padding: 0;
+    overflow-y: auto;
+    box-sizing: border-box;
+    flex-grow: 1;
+  }
+}
+
+// markmap的tool样式覆盖
+:deep(.markmap) {
+  width: 100%;
+}
+
+:deep(.mm-toolbar-brand) {
+  display: none;
+}
+
+:deep(.mm-toolbar) {
+  display: flex;
+  flex-direction: row;
+}
+</style>
--- a/apps/web-antd/src/views/ai/mindmap/manager/data.ts
+++ b/apps/web-antd/src/views/ai/mindmap/manager/data.ts
@@ -0,0 +1,84 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { getSimpleUserList } from '#/api/system/user';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'userId',
+      label: '用户编号',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'prompt',
+      label: '提示词',
+      component: 'Input',
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        placeholder: ['开始时间', '结束时间'],
+        valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 180,
+      fixed: 'left',
+    },
+    {
+      minWidth: 180,
+      title: '用户',
+      slots: { default: 'userId' },
+    },
+    {
+      field: 'prompt',
+      title: '提示词',
+      minWidth: 180,
+    },
+    {
+      field: 'generatedContent',
+      title: '思维导图',
+      minWidth: 300,
+    },
+    {
+      field: 'model',
+      title: '模型',
+      minWidth: 180,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'errorMessage',
+      title: '错误信息',
+      minWidth: 180,
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
--- a/apps/web-antd/src/views/ai/mindmap/manager/index.vue
+++ b/apps/web-antd/src/views/ai/mindmap/manager/index.vue
@@ -1,31 +1,108 @@
 <script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { AiMindmapApi } from '#/api/ai/mindmap';
+import type { SystemUserApi } from '#/api/system/user';
+
+import { onMounted, ref } from 'vue';
+
 import { Page } from '@vben/common-ui';

-import { Button } from 'ant-design-vue';
+import { message } from 'ant-design-vue';

+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteMindMap, getMindMapPage } from '#/api/ai/mindmap';
+import { getSimpleUserList } from '#/api/system/user';
 import { DocAlert } from '#/components/doc-alert';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+const userList = ref<SystemUserApi.User[]>([]); // 用户列表
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 删除 */
+async function handleDelete(row: AiMindmapApi.MindMapVO) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.id]),
+    key: 'action_key_msg',
+  });
+  try {
+    await deleteMindMap(row.id as number);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.id]),
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getMindMapPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<AiMindmapApi.MindMapVO>,
+});
+onMounted(async () => {
+  // 获得下拉数据
+  userList.value = await getSimpleUserList();
+});
 </script>

 <template>
-  <Page>
+  <Page auto-content-height>
    <DocAlert title="AI 思维导图" url="https://doc.iocoder.cn/ai/mindmap/" />
-    <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/manager/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/ai/mindmap/manager/index
-      代码，pull request 贡献给我们！
-    </Button>
+    <Grid table-title="思维导图管理列表">
+      <template #toolbar-tools>
+        <TableAction :actions="[]" />
+      </template>
+      <template #userId="{ row }">
+        <span>{{
+          userList.find((item) => item.id === row.userId)?.nickname
+        }}</span>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['ai:mind-map:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.id]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
  </Page>
 </template>