Initial commit: OneOS frontend based on yudao-ui-admin-vben

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="flex w-80 flex-col rounded-lg bg-card p-5">
+    <h3 class="h-7 w-full text-center text-xl leading-7 text-primary">
+      思维导图创作中心
+    </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,215 @@
+<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>