feat(@vben/common-ui): 添加知识库模块

- 新增知识库生成相关路由、页面和组件
- 实现知识库生成的后端接口和前端逻辑
- 添加知识库预览和下载功能
- 优化首页布局，增加知识库生成入口

apps/web-antd/src/api/core/chatflow.ts

@@ -86,7 +86,11 @@ export async function sendChatFlowStream(
   appId: any,
   data: ChatflowApi.CompletionsBody,
 ) {
-  return requestClient.post(`/v1/chat/completions/stream/${appId}`, data);
+  return requestClient.request(`/v1/chat/completions/stream/${appId}`, {
+    data,
+    method: 'POST',
+    responseType: 'stream',
+  });
 }
 
 // word

apps/web-antd/src/router/routes/modules/aiFlow.ts

@@ -1,6 +1,6 @@
 import type { RouteRecordRaw } from 'vue-router';
 
-import { HugeAi, SvgPPT, SvgSpider, SvgWord } from '@vben/icons';
+import { HugeAi, SvgPPT, SvgRepository, SvgSpider, SvgWord } from '@vben/icons';
 
 const routes: RouteRecordRaw[] = [
   {
@@ -46,6 +46,17 @@ const routes: RouteRecordRaw[] = [
           authority: ['ai:ppt'],
         },
       },
+      {
+        name: 'repository',
+        path: '/ai/repository',
+        component: () => import('#/views/repository/index.vue'),
+        meta: {
+          icon: SvgRepository,
+          title: '知识库生成',
+          order: 4,
+          authority: ['ai:repository'],
+        },
+      },
     ],
   },
 ];

apps/web-antd/src/views/home/index.vue

@@ -4,7 +4,7 @@ import type { WorkflowItem } from '@vben/common-ui';
 import { useRouter } from 'vue-router';
 
 import { WorkflowsView } from '@vben/common-ui';
-import { SvgPPT, SvgSpider, SvgWord } from '@vben/icons';
+import { SvgPPT, SvgRepository, SvgSpider, SvgWord } from '@vben/icons';
 
 const items: WorkflowItem[] = [
   {
@@ -25,6 +25,12 @@ const items: WorkflowItem[] = [
     description: '自动生成PPT文档',
     path: '/ai/ppt',
   },
+  {
+    icon: SvgRepository,
+    title: '知识库生成',
+    description: '自动生成知识库文档',
+    path: '/ai/repository',
+  },
 ];
 const router = useRouter();
 

apps/web-antd/src/views/repository/components/index.ts

@@ -0,0 +1,2 @@
+export { default as RepositoryListView } from './repository-list-view.vue';
+export { default as RepositoryWorkView } from './repository-work-view.vue';

apps/web-antd/src/views/repository/components/repository-list-view.vue

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import type { ConversationsProps } from 'ant-design-x-vue';
+
+import type { MenuItem, Props } from '../typing';
+
+import { computed, ref, watch } from 'vue';
+
+import { Menu } from 'ant-design-vue';
+import { Conversations } from 'ant-design-x-vue';
+
+defineOptions({
+  name: 'RepositoryListView',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
+  temp: () => [],
+});
+const emit = defineEmits(['click', 'clickMode', 'newConversation']);
+const defaultConversationsItems = computed(() => {
+  return props.items.map((item) => {
+    return {
+      key: item.id,
+      label: item.id,
+    };
+  });
+});
+const conversationsItems = ref(defaultConversationsItems);
+const activeKey = ref(defaultConversationsItems.value[0]?.key);
+
+// 将 props.items 映射为 key=id, label=name, title=name 的结构
+const transformItems = computed(() => {
+  return props.temp.map((item) => ({
+    key: item.id,
+    label: item.name,
+    title: item.name,
+  }));
+});
+
+const itemsData = ref<MenuItem[]>([
+  {
+    title: '',
+    label: '',
+    key: '',
+  },
+]);
+
+const handleMenuClick = (item: any) => {
+  const selectedItem = itemsData.value.find((i) => i.key === item.key);
+  if (selectedItem) {
+    // 转换字段：title -> name, key -> id
+    const transformedItem = {
+      name: selectedItem.title,
+      id: selectedItem.key,
+    };
+    emit('clickMode', transformedItem); // 发送转换后的数据
+  }
+};
+
+const handleNewConversation = () => {
+  emit('newConversation');
+};
+
+const onConversationClick: ConversationsProps['onActiveChange'] = (key) => {
+  activeKey.value = key;
+
+  const matchedItem = props.items.find((item) => item.id === key);
+  if (matchedItem) {
+    emit('click', matchedItem);
+  } else {
+    emit('click', null); // 或者根据业务需求处理未找到的情况
+  }
+};
+
+const selectedKeys = ref<string[]>([]);
+const openKeys = ref([]);
+
+// 监听 transformItems 变化，更新 itemsData
+watch(
+  () => transformItems.value,
+  (newVal) => {
+    itemsData.value = newVal;
+  },
+  { immediate: true },
+);
+
+watch(
+  () => itemsData.value,
+  (newVal) => {
+    if (newVal.length > 0 && newVal[0]) {
+      selectedKeys.value = [newVal[0].key]; // 默认选中第一个菜单项
+      handleMenuClick(newVal[0]);
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div class="menu">
+    <div class="addBtn">模板</div>
+    <Menu
+      v-model:open-keys="openKeys"
+      v-model:selected-keys="selectedKeys"
+      mode="vertical"
+      class="mode"
+      :items="itemsData"
+      @click="handleMenuClick"
+    />
+
+    <div class="addBtn">会话</div>
+
+    <Button type="submit" class="newBtn" @click="handleNewConversation">
+      新建会话
+    </Button>
+    <!-- 🌟 会话管理 -->
+    <Conversations
+      :items="conversationsItems"
+      class="conversations"
+      :active-key="activeKey"
+      @active-change="onConversationClick"
+    />
+  </div>
+</template>
+
+<style scoped lang="less">
+.layout {
+  width: 100%;
+  min-width: 1400px;
+  height: 100%;
+  display: flex;
+  background: hsl(216deg 21.74% 95.49%);
+  font-family: AlibabaPuHuiTi, v-deep(var(--ant-font-family)), sans-serif;
+  border-radius: v-deep(var(--ant-border-radius));
+}
+
+.menu {
+  background: #ffffff;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.mode {
+  overflow-y: auto;
+}
+
+.conversations {
+  padding: 0 12px;
+  height: 400px;
+  overflow-y: auto;
+}
+
+.addBtn {
+  float: left;
+  //border: 1px solid #1677ff34;
+  color: #666666;
+  width: calc(100% - 24px);
+  margin: 12px 12px 24px 12px;
+}
+
+.newBtn {
+  float: left;
+  width: calc(100% - 24px);
+  margin: 12px 12px 12px 12px;
+  padding: 5px;
+  border-radius: 5px;
+  background-color: rgba(19, 118, 163, 0.1);
+}
+</style>

apps/web-antd/src/views/repository/components/repository-preview.vue

@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+
+import VueOfficePptx from '@vue-office/pptx';
+import { message } from 'ant-design-vue';
+
+const isLoading = ref(false); // 新增：加载状态变量
+const pptx = ref();
+const pptStyle = ref({
+  height: 'calc(100vh - 100px)',
+  width: '100%',
+  margin: 'auto',
+  background: '#ffffff',
+});
+const renderedHandler = () => {
+  isLoading.value = false; // 文档渲染完成，关闭加载状态
+  message.success('渲染完成');
+};
+const errorHandler = () => {
+  isLoading.value = false; // 出错时也关闭加载状态
+  message.error('渲染失败');
+};
+const [Drawer, drawerApi] = useVbenDrawer({
+  onCancel() {
+    drawerApi.close();
+  },
+  onClosed() {
+    drawerApi.setState({ overlayBlur: 0, placement: 'right' });
+  },
+  onOpenChange(isOpen: boolean) {
+    if (isOpen) {
+      const data = drawerApi.getData<Record<string, any>>();
+      if (data) {
+        isLoading.value = true; // 开始加载文档，开启加载状态
+        pptx.value = data; // 更新 pptx 的值
+      }
+      // url.value = drawerApi.getData<Record<string, any>>();
+    }
+  },
+});
+</script>
+<template>
+  <Drawer class="w-[880px]" title="文档预览" :footer="false">
+    <div v-if="isLoading" class="loading-overlay">正在加载文档，请稍候...</div>
+    <VueOfficePptx
+      :src="pptx"
+      :style="pptStyle"
+      @rendered="renderedHandler"
+      @error="errorHandler"
+    />
+  </Drawer>
+</template>
+
+<style scoped>
+.pptx-preview-wrapper {
+  background: #fff;
+}
+</style>

apps/web-antd/src/views/repository/components/repository-work-view.vue

@@ -0,0 +1,336 @@
+<script setup lang="ts">
+import type { ThoughtChainItem } from 'ant-design-x-vue';
+
+import type { DrawerPlacement } from '@vben/common-ui';
+
+import type { PropsWork, ResultItem } from '../typing';
+
+import type { WorkflowResult } from '#/views/word/typing';
+
+import { h, ref, watch } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { SvgPPT } from '@vben/icons';
+import { useAccessStore, useUserStore } from '@vben/stores';
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  VbenIcon,
+} from '@vben-core/shadcn-ui';
+
+import {
+  CheckCircleOutlined,
+  InfoCircleOutlined,
+  LoadingOutlined,
+  // UserOutlined,
+} from '@ant-design/icons-vue';
+import { Button, notification, Space } from 'ant-design-vue';
+import {
+  // Attachments,
+  Sender,
+  ThoughtChain,
+  Welcome,
+  XStream,
+} from 'ant-design-x-vue';
+
+import { getToken } from '#/api/csrf';
+
+import PptPreview from './repository-preview.vue';
+
+defineOptions({ name: 'PptWorkView' });
+
+const props = withDefaults(defineProps<PropsWork>(), {
+  itemMessage: Array,
+  item: () => {
+    return {
+      id: '',
+      name: '',
+    };
+  },
+  runWorkflow: () => async () => ({
+    data: {
+      outputs: {
+        files: [
+          {
+            filename: '',
+            url: '',
+          },
+        ],
+      },
+    },
+  }),
+});
+
+const userStore = useUserStore();
+
+// ==================== State ====================
+const content = ref('');
+const agentRequestLoading = ref(false);
+const fetchStatus = ref('');
+const resultItems = ref<ResultItem[]>([]);
+const accessStore = useAccessStore();
+const mockServerResponseData: ThoughtChainItem[] = [];
+const chainItems = ref<ThoughtChainItem[]>(mockServerResponseData);
+// const fetchResult = ref('');
+const pptMessage = ref('');
+
+const [PreviewDrawer, previewDrawerApi] = useVbenDrawer({
+  // 连接抽离的组件
+  connectedComponent: PptPreview,
+  // placement: 'left',
+});
+function openPreviewDrawer(placement: DrawerPlacement = 'right', file?: any) {
+  previewDrawerApi.setState({ placement }).setData(file.url).open();
+}
+
+// ==================== Event ====================
+function getStatusIcon(status: ThoughtChainItem['status']) {
+  switch (status) {
+    case 'error': {
+      return h(InfoCircleOutlined);
+    }
+    case 'pending': {
+      return h(LoadingOutlined);
+    }
+    case 'success': {
+      return h(CheckCircleOutlined);
+    }
+    default: {
+      return undefined;
+    }
+  }
+}
+
+function downloadPpt(files: any) {
+  // 创建隐藏的 <a> 标签用于触发下载
+  const link = document.createElement('a');
+  link.href = files.url; // 设置下载链接
+  link.download = files.filename; // 设置下载文件名
+  document.body.append(link); // 将 <a> 标签添加到页面中
+  link.click(); // 触发点击事件开始下载
+  link.remove(); // 下载完成后移除 <a> 标签
+}
+
+function updateChainItem(status: ThoughtChainItem['status']) {
+  if (mockServerResponseData.length > 0) {
+    mockServerResponseData[mockServerResponseData.length - 1].status = status;
+    mockServerResponseData[mockServerResponseData.length - 1].icon =
+      getStatusIcon(status);
+    mockServerResponseData[mockServerResponseData.length - 1].description =
+      `status: ${status}`;
+  }
+}
+
+function parseAndRenderStream(text: WorkflowResult) {
+  let parsedData;
+  try {
+    parsedData = JSON.parse(text?.data);
+  } catch (error) {
+    console.error('Failed to parse event data:', error);
+    chainItems.value = [];
+    notification.error({
+      message: '流式数据解析失败',
+      description: '无法解析来自服务器的数据，请检查网络连接或稍后重试。',
+    });
+    return;
+  }
+
+  const { event, data } = parsedData;
+  if (event === 'node_started' && data) {
+    mockServerResponseData.push({
+      key: data.nodeId,
+      title: data.title,
+      description: data.nodeType,
+      icon: getStatusIcon('pending'),
+      status: 'pending',
+    });
+    chainItems.value = [...mockServerResponseData];
+  } else if (
+    event === 'node_finished' &&
+    data &&
+    mockServerResponseData.length > 0
+  ) {
+    updateChainItem('success');
+    chainItems.value = [...mockServerResponseData];
+    if (data.outputs.files?.length > 0) {
+      pptMessage.value = data.outputs.files[0];
+    }
+  }
+}
+
+const startFetching = async () => {
+  resultItems.value = [];
+  pptMessage.value = '';
+  agentRequestLoading.value = true;
+  fetchStatus.value = 'fetching';
+
+  try {
+    const res = await fetch(`/api/v1/workflow/run/stream/${props.item.id}`, {
+      method: 'POST',
+      body: JSON.stringify({
+        userId: userStore.userInfo?.userId || '',
+        conversationId: '',
+        files: [],
+        inputs: {
+          declarationDoc: content.value,
+        },
+      }),
+      headers: {
+        'Accept-Language': 'zh-CN',
+        'Content-Type': 'application/json',
+        'X-CSRF-TOKEN': getToken() || '',
+        Authorization: `Bearer ${accessStore.accessToken}`,
+      },
+    });
+    // 实时更新 AI 消息
+    for await (const chunk of XStream({ readableStream: res.body })) {
+      parseAndRenderStream(chunk);
+    }
+  } catch (error) {
+    console.error('Stream processing failed:', error);
+    notification.error({
+      message: '请求失败',
+      description: 'AI 回答获取失败，请稍后再试',
+    });
+  }
+
+  // 模拟抓取完成
+  content.value = '';
+  agentRequestLoading.value = false;
+  fetchStatus.value = 'completed';
+};
+
+// ==================== Nodes ====================
+
+// 监听 itemMessage 变化并更新 resultItems
+watch(
+  () => props.itemMessage,
+  (newVal) => {
+    resultItems.value = [];
+    chainItems.value = [];
+    content.value = '';
+    pptMessage.value = newVal[1]?.content;
+  },
+  { deep: true },
+);
+</script>
+
+<template>
+  <div class="layout">
+    <PreviewDrawer />
+    <div class="chat">
+      <div class="chat-left">
+        <!-- 🌟 输入框 -->
+        <Sender
+          :value="content"
+          class="sender"
+          placeholder="文档内容"
+          :auto-size="{ minRows: 6, maxRows: 18 }"
+          :loading="agentRequestLoading"
+          :disabled="agentRequestLoading"
+          @submit="startFetching"
+          @change="(value) => (content = value)"
+        >
+          <template #header>
+            <Sender.Header :open="true" :title="props.item?.name || ''" />
+          </template>
+        </Sender>
+      </div>
+      <Space direction="vertical" size:16 class="chat-right">
+        <!-- 思维链 -->
+        <ThoughtChain size="large" :items="chainItems">
+          <ThoughtChainItem
+            v-for="item in chainItems"
+            :key="item.key"
+            style="background: #0d0d10"
+          />
+        </ThoughtChain>
+        <Welcome
+          v-if="chainItems.length <= 0 && !pptMessage"
+          variant="borderless"
+          icon="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp"
+          title="欢迎使用知识库"
+          description="请选择模板列表中需要生成文件的模板，输入参数后开始生成生成文件。"
+        />
+        <ADivider v-if="pptMessage && chainItems.length > 0" />
+        <Card
+          v-if="pptMessage"
+          title="PPT"
+          class="w-5/12 cursor-pointer hover:shadow-xl"
+          style="background: transparent"
+        >
+          <CardHeader>
+            <CardTitle class="flex-start flex text-xl">
+              <VbenIcon :icon="SvgPPT" class="size-8 flex-shrink-0" />
+              知识库已生成,有效时间五分钟
+            </CardTitle>
+          </CardHeader>
+
+          <CardContent class="flex items-center justify-around">
+            <Button @click="() => openPreviewDrawer('right', pptMessage)">
+              预览
+            </Button>
+            <Button @click="downloadPpt(pptMessage)">下载</Button>
+          </CardContent>
+        </Card>
+      </Space>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.layout {
+  width: 100%;
+  //min-width: 1400px;
+  max-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  margin: 0 auto;
+  font-family: AlibabaPuHuiTi, v-deep(var(--ant-font-family)), sans-serif;
+  border-radius: v-deep(var(--ant-border-radius));
+}
+
+.chat {
+  width: 100%;
+  height: 100%;
+  //max-height: 88vh;
+  //margin: 0 auto;
+  box-sizing: border-box;
+  display: flex;
+  //flex-direction: column;
+  padding: 0 12px 0 12px;
+}
+.chat-left {
+  width: 40%;
+  height: 100%;
+  background: #ffffff;
+  //margin: 0 auto;
+  box-sizing: border-box;
+  padding: 12px 12px 0 12px;
+}
+
+.chat-right {
+  width: 60%;
+  height: auto;
+  margin: 0 0 0 10px;
+  padding: 20px;
+  background: rgb(255, 255, 255);
+}
+
+.placeholder {
+  padding-top: 32px;
+  text-align: left;
+  flex: 1;
+}
+
+.sender {
+  background: #ffffff;
+  width: 100%;
+  min-height: 100px;
+  box-shadow: v-deep(var(--ant-box-shadow));
+}
+</style>

apps/web-antd/src/views/repository/index.vue

@@ -0,0 +1,119 @@
+<script lang="ts" setup>
+import type { RepositoryTempItem, ResultItem } from './typing';
+
+import { onMounted, ref } from 'vue';
+
+import { notification } from 'ant-design-vue';
+
+import {
+  getAppListByType,
+  getWorkflowInfo,
+  getWorkflowList,
+  sendPpt,
+} from '#/api';
+
+import { RepositoryListView, RepositoryWorkView } from './components';
+
+const temp = ref<RepositoryTempItem[]>([]);
+
+const history = ref([]);
+const loading = ref(true);
+const itemMessage = ref<ResultItem[]>([]);
+
+const getLogs = async (appid: string, limit: number) => {
+  loading.value = true;
+  history.value = await getWorkflowList({
+    appid,
+    limit,
+  });
+  // 将结果倒序后再赋值给 history
+  // history.value = res.reverse();
+  loading.value = false;
+};
+
+const getTemp = async () => {
+  const res = await getAppListByType(2);
+  if (Array.isArray(res) && res.length > 0) {
+    // 提取 id 和 name 并赋值给 temp
+    temp.value = res.map(({ id, name }) => ({ id, name }));
+  }
+};
+
+async function handleClick(item: RepositoryTempItem) {
+  // temp = item;
+  const res = await getWorkflowInfo({
+    appid: item?.appId || '',
+    workflowRunId: item.workflowRunId,
+  });
+  itemMessage.value = [];
+  if (res.inputs) {
+    itemMessage.value.push({
+      key: itemMessage.value.length + 1,
+      role: 'user',
+      content: res.inputs.declarationDoc,
+    });
+  }
+  if (res.outputs) {
+    itemMessage.value.push({
+      key: itemMessage.value.length + 1,
+      role: 'ai',
+      content: res.outputs.files[0],
+    });
+  }
+}
+
+function handleNewConversation() {
+  // 清空对话内容
+  itemMessage.value = [];
+}
+
+const currentTemp = ref<RepositoryTempItem | undefined>();
+
+async function handleClickMode(item: RepositoryTempItem) {
+  notification.success({
+    message: `${item.name}`,
+    description: '已选取',
+    duration: 3,
+  });
+  currentTemp.value = item;
+  await getLogs(item.id, 5);
+}
+
+onMounted(() => {
+  getTemp();
+});
+</script>
+
+<template>
+  <div class="layout">
+    <div class="lg:w-1/6">
+      <RepositoryListView
+        title="选择模板"
+        :temp="temp"
+        :items="history"
+        :loading="loading"
+        @click-mode="handleClickMode"
+        @click="handleClick"
+        @new-conversation="handleNewConversation"
+      />
+    </div>
+    <RepositoryWorkView
+      :item="currentTemp"
+      :run-workflow="sendPpt"
+      :item-message="itemMessage"
+    />
+  </div>
+</template>
+
+<style scoped lang="less">
+.layout {
+  width: 100%;
+  //min-width: 1400px;
+  height: 100%;
+  display: flex;
+  padding: 0;
+  background: hsl(216deg 21.74% 95.49%);
+  font-family: AlibabaPuHuiTi, v-deep(var(--ant-font-family)), sans-serif;
+  border-radius: v-deep(var(--ant-border-radius));
+}
+</style>

apps/web-antd/src/views/repository/typing.ts

@@ -0,0 +1,79 @@
+interface RepositoryTempItem {
+  id: string;
+  name: string;
+  workflowRunId?: string;
+  appId?: string;
+  userId?: string;
+  taskId?: string;
+  url?: string;
+}
+
+interface RepositoryHistoryItem {
+  id: string;
+  workflowRun: {
+    id: string;
+  };
+  createdByEndUser: {
+    id: string;
+    sessionId: string;
+  };
+}
+
+interface Props {
+  items?: RepositoryHistoryItem[];
+  temp: RepositoryTempItem[];
+  title: string;
+  loading: boolean;
+}
+
+interface ResultItem {
+  key: number;
+  role: 'ai' | 'user';
+  content: any;
+  footer?: any;
+}
+
+interface WorkflowContext {
+  conversationId: string;
+  userId: string;
+  inputs: {
+    [key: string]: any;
+  };
+  files: [];
+}
+
+interface WorkflowResult {
+  data: {
+    outputs: {
+      files: [
+        {
+          filename: string;
+          url: string;
+        },
+      ];
+    };
+  };
+}
+
+interface PropsWork {
+  itemMessage?: ResultItem[];
+  item?: RepositoryTempItem;
+  runWorkflow?: (appId: any, data: WorkflowContext) => Promise<WorkflowResult>;
+}
+
+interface MenuItem {
+  key: string;
+  label: string;
+  title: string;
+}
+
+export type {
+  MenuItem,
+  Props,
+  PropsWork,
+  RepositoryHistoryItem,
+  RepositoryTempItem,
+  ResultItem,
+  WorkflowContext,
+  WorkflowResult,
+};

packages/icons/src/svg/index.ts

@@ -14,6 +14,7 @@ const SvgAntdvLogoIcon = createIconifyIcon('svg:antdv-logo');
 const SvgSpider = createIconifyIcon('svg:la-spider');
 const SvgPPT = createIconifyIcon('svg:powerpoint');
 const SvgWord = createIconifyIcon('svg:word');
+const SvgRepository = createIconifyIcon('iconoir:repository');
 
 export {
   SvgAntdvLogoIcon,
@@ -26,6 +27,7 @@ export {
   SvgCardIcon,
   SvgDownloadIcon,
   SvgPPT,
+  SvgRepository,
   SvgSpider,
   SvgWord,
 };