feat：【ele】【ai】mindmap 的代码迁移

apps/web-antd/src/views/ai/mindmap/manager/data.ts

@@ -20,12 +20,18 @@ export function useGridFormSchema(): VbenFormSchema[] {
         api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
+        placeholder: '请选择用户',
+        allowClear: true,
       },
     },
     {
       fieldName: 'prompt',
       label: '提示词',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入提示词',
+        clearable: true,
+      },
     },
     {
       fieldName: 'createTime',

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

@@ -0,0 +1,99 @@
+<script lang="ts" setup>
+import type { AiMindmapApi } from '#/api/ai/mindmap';
+
+import { nextTick, onMounted, ref } from 'vue';
+
+import { Page } from '@vben/common-ui';
+import { MindMapContentExample } from '@vben/constants';
+
+import { ElMessage } from 'element-plus';
+
+import { generateMindMap } from '#/api/ai/mindmap';
+
+import Left from './modules/left.vue';
+import Right from './modules/right.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(); // 右边组件
+
+/** 使用已有内容直接生成 */
+function directGenerate(existPrompt: string) {
+  isEnd.value = false; // 先设置为 false 再设置为 true，让子组建的 watch 能够监听到
+  generatedContent.value = existPrompt;
+  isEnd.value = true;
+}
+
+/** 提交生成 */
+function handleSubmit(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) {
+        ElMessage.error(`生成思维导图异常! ${msg}`);
+        handleStopStream();
+        return;
+      }
+      generatedContent.value = generatedContent.value + data;
+      await nextTick();
+      rightRef.value?.scrollBottom();
+    },
+    onClose() {
+      isEnd.value = true;
+      leftRef.value?.setGeneratedContent(generatedContent.value);
+      handleStopStream();
+    },
+    onError(err) {
+      console.error('生成思维导图失败', err);
+      handleStopStream();
+      // 需要抛出异常，禁止重试
+      throw err;
+    },
+    ctrl: ctrl.value,
+  });
+}
+
+/** 停止 stream 生成 */
+function handleStopStream() {
+  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 m-4 flex">
+      <Left
+        ref="leftRef"
+        class="mr-4"
+        :is-generating="isGenerating"
+        @submit="handleSubmit"
+        @direct-generate="directGenerate"
+      />
+      <Right
+        ref="rightRef"
+        :generated-content="generatedContent"
+        :is-end="isEnd"
+        :is-generating="isGenerating"
+        :is-start="isStart"
+      />
+    </div>
+  </Page>
+</template>

apps/web-ele/src/views/ai/mindmap/index/modules/left.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+
+import { MindMapContentExample } from '@vben/constants';
+
+import { ElButton, ElInput } from 'element-plus';
+
+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="bg-card flex w-80 flex-col rounded-lg p-5">
+    <h3 class="text-primary h-7 w-full text-center text-xl leading-7">
+      思维导图创作中心
+    </h3>
+    <div class="mt-4 flex-grow overflow-y-auto">
+      <div>
+        <b>您的需求？</b>
+        <ElInput
+          v-model="formData.prompt"
+          type="textarea"
+          :maxlength="1024"
+          :rows="8"
+          class="mt-4 w-full"
+          placeholder="请输入提示词，让AI帮你完善"
+          show-word-limit
+        />
+        <ElButton
+          class="mt-4 !w-full"
+          type="primary"
+          :loading="isGenerating"
+          @click="emits('submit', formData)"
+        >
+          智能生成思维导图
+        </ElButton>
+      </div>
+      <div class="mt-7">
+        <b>使用已有内容生成？</b>
+        <ElInput
+          v-model="generatedContent"
+          type="textarea"
+          :maxlength="1024"
+          :rows="8"
+          class="mt-4 w-full"
+          placeholder="例如：童话里的小屋应该是什么样子？"
+          show-word-limit
+        />
+        <ElButton
+          class="mt-4 !w-full"
+          type="primary"
+          @click="emits('directGenerate', generatedContent)"
+          :disabled="isGenerating"
+        >
+          直接生成
+        </ElButton>
+      </div>
+    </div>
+  </div>
+</template>

apps/web-ele/src/views/ai/mindmap/index/modules/right.vue

@@ -0,0 +1,210 @@
+<script setup lang="ts">
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import {
+  MarkdownIt,
+  Markmap,
+  Toolbar,
+  Transformer,
+} from '@vben/plugins/markmap';
+import { downloadImageByCanvas } from '@vben/utils';
+
+import { ElButton, ElCard, ElMessage } from 'element-plus';
+
+const props = defineProps<{
+  generatedContent: string; // 生成结果
+  isEnd: boolean; // 是否结束
+  isGenerating: boolean; // 是否正在生成
+  isStart: boolean; // 开始状态，开始时需要清除 html
+}>();
+
+const md = MarkdownIt();
+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();
+let resizeObserver: null | ResizeObserver = null;
+const initialized = false;
+
+/** 初始化 */
+onMounted(() => {
+  resizeObserver = new ResizeObserver(() => {
+    contentAreaHeight.value = contentRef.value?.clientHeight || 0;
+    // 先更新高度，再更新思维导图
+    if (contentAreaHeight.value && !initialized) {
+      // 初始化思维导图
+      try {
+        if (!markMap) {
+          markMap = Markmap.create(svgRef.value!);
+          const { el } = Toolbar.create(markMap);
+          toolBarRef.value?.append(el);
+        }
+        nextTick(update);
+      } catch {
+        ElMessage.error('思维导图初始化失败');
+      }
+    }
+  });
+  if (contentRef.value) {
+    resizeObserver.observe(contentRef.value);
+  }
+});
+
+/** 卸载 */
+onBeforeUnmount(() => {
+  if (resizeObserver && contentRef.value) {
+    resizeObserver.unobserve(contentRef.value);
+  }
+});
+
+/** 监听 props 变化 */
+watch(props, ({ generatedContent, isGenerating, isEnd, isStart }) => {
+  // 开始生成的时候清空一下 markdown 的内容
+  if (isStart) {
+    html.value = '';
+  }
+  // 生成内容的时候使用 markdown 来渲染
+  if (isGenerating) {
+    html.value = md.render(generatedContent);
+  }
+  // 生成结束时更新思维导图
+  if (isEnd) {
+    update();
+  }
+});
+
+/** 更新思维导图的展示 */
+function update() {
+  try {
+    const { root } = transformer.transform(
+      processContent(props.generatedContent),
+    );
+    markMap?.setData(root);
+    markMap?.fit();
+  } catch (error: any) {
+    console.error(error);
+  }
+}
+
+/** 处理内容 */
+function processContent(text: string) {
+  const arr: string[] = [];
+  const lines = text.split('\n');
+  for (let line of lines) {
+    if (line.includes('```')) {
+      continue;
+    }
+    // eslint-disable-next-line unicorn/prefer-string-replace-all
+    line = line.replace(/([*_~`>])|(\d+\.)\s/g, '');
+    arr.push(line);
+  }
+  return arr.join('\n');
+}
+
+/** 下载图片：download SVG to png file */
+function 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)}`;
+  downloadImageByCanvas({
+    url: base64Url,
+    canvasWidth: svgElement?.offsetWidth,
+    canvasHeight: svgElement?.offsetHeight,
+    drawWithImageSize: false,
+  });
+}
+
+defineExpose({
+  scrollBottom() {
+    mdContainerRef.value?.scrollTo(0, mdContainerRef.value?.scrollHeight);
+  },
+});
+</script>
+
+<template>
+  <ElCard class="my-card flex h-full flex-grow flex-col">
+    <template #header>
+      <div class="m-0 flex shrink-0 items-center justify-between px-7">
+        <h3>思维导图预览</h3>
+        <ElButton type="primary" size="small" class="flex" @click="downloadImage">
+          <template #icon>
+            <div class="flex items-center justify-center">
+              <IconifyIcon icon="lucide:copy" />
+            </div>
+          </template>
+          下载图片
+        </ElButton>
+      </div>
+    </template>
+    <div ref="contentRef" class="hide-scroll-bar box-border h-full">
+      <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-2.5 right-5"></div>
+      </div>
+    </div>
+  </ElCard>
+</template>
+
+<style lang="scss" scoped>
+// 定义一个 mixin 替代 extend
+@mixin hide-scroll-bar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+}
+
+.hide-scroll-bar {
+  @include hide-scroll-bar;
+}
+
+.my-card {
+  :deep(.el-card__body) {
+    box-sizing: border-box;
+    flex-grow: 1;
+    padding: 0;
+    overflow-y: auto;
+
+    @include hide-scroll-bar;
+  }
+}
+
+// markmap的tool样式覆盖
+:deep(.markmap) {
+  width: 100%;
+}
+
+:deep(.mm-toolbar-brand) {
+  display: none;
+}
+
+:deep(.mm-toolbar) {
+  display: flex;
+  flex-direction: row;
+}
+</style>

apps/web-ele/src/views/ai/mindmap/manager/data.ts

@@ -0,0 +1,97 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemUserApi } from '#/api/system/user';
+
+import { getSimpleUserList } from '#/api/system/user';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 关联数据 */
+let userList: SystemUserApi.User[] = [];
+getSimpleUserList().then((data) => (userList = data));
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'userId',
+      label: '用户编号',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+        placeholder: '请选择用户',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'prompt',
+      label: '提示词',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入提示词',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 180,
+      fixed: 'left',
+    },
+    {
+      field: 'userId',
+      title: '用户',
+      minWidth: 180,
+      formatter: ({ cellValue }) =>
+        userList.find((user) => user.id === cellValue)?.nickname || '-',
+    },
+    {
+      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' },
+    },
+  ];
+}

apps/web-ele/src/views/ai/mindmap/manager/index.vue

@@ -0,0 +1,120 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { AiMindmapApi } from '#/api/ai/mindmap';
+
+import { DocAlert, Page, useVbenDrawer } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteMindMap, getMindMapPage } from '#/api/ai/mindmap';
+import { $t } from '#/locales';
+
+import Right from '../index/modules/right.vue';
+import { useGridColumns, useGridFormSchema } from './data';
+
+const [Drawer, drawerApi] = useVbenDrawer({
+  header: false,
+  footer: false,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 删除思维导图记录 */
+async function handleDelete(row: AiMindmapApi.MindMap) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.id]),
+  });
+  try {
+    await deleteMindMap(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.id]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 预览思维导图 */
+async function openPreview(row: AiMindmapApi.MindMap) {
+  drawerApi.setData(row.generatedContent).open();
+}
+
+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',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<AiMindmapApi.MindMap>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="AI 思维导图" url="https://doc.iocoder.cn/ai/mindmap/" />
+    </template>
+
+    <Drawer class="w-3/5">
+      <Right
+        :generated-content="drawerApi.getData() as any"
+        :is-end="true"
+        :is-generating="false"
+        :is-start="false"
+      />
+    </Drawer>
+    <Grid table-title="思维导图管理列表">
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.cropper.preview'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['ai:api-key:update'],
+              disabled: !row.generatedContent,
+              onClick: openPreview.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: 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>