refactor(@vben/common-ui): 优化文档生成和下载逻辑

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

@@ -24,6 +24,7 @@ export namespace WorkflowApi {
     page?: number;
     limit?: number;
     keyword?: string;
+    workflowRunId?: string;
   }
 }
 
@@ -43,10 +44,10 @@ export function sendWorkflow(
 //   return requestClient.patch('/v1/workflow/stop', { data });
 // };
 //
-// export function getWorkflowMessage(data){
+export function getWorkflowInfo(data: WorkflowApi.WorkflowLogParams) {
-//   return requestClient.get('/v1/workflow/info', { data });
+  return requestClient.get(`/v1/workflow/info/${data.appid}`, { params: data });
-// };
+}
-//
+
-export function getWorkflowLog(params: WorkflowApi.WorkflowLogParams) {
+export function getWorkflowList(params: WorkflowApi.WorkflowLogParams) {
-  return requestClient.post(`/v1/workflow/logs/${params.appid}`, { ...params });
+  return requestClient.get(`/v1/workflow/list/${params.appid}`);
 }

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

@@ -5,29 +5,55 @@ import { onMounted, reactive, ref } from 'vue';
 
 import { PptHistoryView, PptListView, PptWorkView } from '@vben/common-ui';
 
-import { getWorkflowLog, sendWorkflow } from '#/api';
+import { getWorkflowInfo, getWorkflowList, sendWorkflow } from '#/api';
 
 let temp = reactive<PPTTempItem>({
   id: 'ee3889b6-50fa-463e-b956-3b93447727fc',
   name: '从可研申报书生成科技项目PPT',
 });
+interface ResultItem {
+  key: number;
+  role: 'ai' | 'user';
+  content: string;
+  footer?: any;
+}
 
 const hitsory = ref([]);
 const loading = ref(true);
+const itemMessage = ref<ResultItem[]>([]);
 
 const getLogs = async (appid: string) => {
   loading.value = true;
-  const res = await getWorkflowLog({
+  const res = await getWorkflowList({
     appid,
     limit: 5,
     page: 1,
   });
-  hitsory.value = res.data;
+  hitsory.value = res;
   loading.value = false;
 };
 
-function handleClick(item: PPTTempItem) {
+async function handleClick(item: PPTTempItem) {
   temp = item;
+  const res = await getWorkflowInfo({
+    appid: temp.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.result,
+    });
+  }
 }
 
 onMounted(() => {
@@ -48,7 +74,11 @@ onMounted(() => {
         <PptListView title="选择模板" @click="handleClick" />
       </div>
       <div class="w-full lg:w-3/4">
-        <PptWorkView :item="temp" :run-workflow="sendWorkflow" />
+        <PptWorkView
+          :item="temp"
+          :run-workflow="sendWorkflow"
+          :item-message="itemMessage"
+        />
       </div>
     </div>
   </div>

packages/effects/common-ui/src/ui/ppt/ppt-perview.vue

@@ -7,7 +7,7 @@ import VueOfficePptx from '@vue-office/pptx';
 
 // import '@vue-office/pptx/lib/index.css';
 // http://47.112.173.8:6802/static/66f3cfd95e364a239d8036390db658ae.pptx
-const url = ref('');
+// const url = ref('');
 const pptx = ref('/pptx/66f3cfd95e364a239d8036390db658ae.pptx');
 const pptStyle = ref({
   height: 'calc(100vh - 100px)',
@@ -30,7 +30,11 @@ const [Drawer, drawerApi] = useVbenDrawer({
   },
   onOpenChange(isOpen: boolean) {
     if (isOpen) {
-      url.value = drawerApi.getData<Record<string, any>>();
+      const data = drawerApi.getData<Record<string, any>>();
+      if (data) {
+        pptx.value = `/pptx/${data}`; // 更新 docx 的值
+      }
+      // url.value = drawerApi.getData<Record<string, any>>();
     }
   },
 });

packages/effects/common-ui/src/ui/ppt/ppt-work-view.vue

@@ -5,7 +5,7 @@ import type { DrawerPlacement } from '@vben/common-ui';
 
 import type { PPTTempItem } from './typing';
 
-import { h, ref } from 'vue';
+import { h, ref, watch } from 'vue';
 
 import { useVbenDrawer } from '@vben/common-ui';
 
@@ -36,7 +36,15 @@ interface WorkflowResult {
   };
 }
 
+interface ResultItem {
+  key: number;
+  role: 'ai' | 'user';
+  content: string;
+  footer?: any;
+}
+
 interface Props {
+  itemMessage?: ResultItem;
   item?: PPTTempItem;
   runWorkflow?: (
     params: WorkflowParams,
@@ -48,7 +56,8 @@ defineOptions({
   name: 'SpiderWorkView',
 });
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
+  itemMessage: () => null,
   item: () => null,
   runWorkflow: () => async () => ({
     data: {
@@ -65,8 +74,26 @@ const [PreviewDrawer, previewDrawerApi] = useVbenDrawer({
   // placement: 'left',
 });
 
-function openPreviewDrawer(placement: DrawerPlacement = 'right') {
+function openPreviewDrawer(
-  previewDrawerApi.setState({ placement }).open();
+  placement: DrawerPlacement = 'right',
+  filename?: string,
+) {
+  const fileData = filename.value;
+  previewDrawerApi.setState({ placement }).setData(fileData).open();
+}
+
+// 判断是否是以 .pptx 结尾的 URL
+function isPptxURL(str: string): boolean {
+  return str.endsWith('.pptx');
+}
+
+// 使用正则提取 /static/ 后面的文件名部分
+function extractPptxFilename(url: string): null | string {
+  const match = url.match(/\/static\/([a-f0-9-]+\.pptx)$/i);
+  if (match) {
+    return match[1]; // 返回类似：9e1c421e-991c-411f-8176-6350a97e70f3.pptx
+  }
+  return null;
 }
 
 const startFetching = async () => {
@@ -74,21 +101,29 @@ const startFetching = async () => {
   fetchStatus.value = 'fetching';
 
   try {
-    // const res = await props.runWorkflow(
+    const res = await props.runWorkflow(
-    //   {
+      {
-    //     appid: props.item.id,
+        appid: 'ee3889b6-50fa-463e-b956-3b93447727fc',
-    //   },
+      },
-    //   {
+      {
-    //     userId: '1562',
+        userId: '1562',
-    //     conversationId: '',
+        conversationId: '',
-    //     files: [],
+        files: [],
-    //     inputs: {
+        inputs: {
-    //       declarationDoc: value.value,
+          declarationDoc: value.value,
-    //     },
+        },
-    //   },
+      },
-    // );
+    );
+    const { result } = res.data.outputs;
+
+    const filename = ref('');
+
+    if (result && isPptxURL(result)) {
+      filename.value = extractPptxFilename(result);
+    }
+
     // 保存抓取结果 url http://47.112.173.8:6802/static/66f3cfd95e364a239d8036390db658ae.pptx
-    fetchResult.value = '/static/66f3cfd95e364a239d8036390db658ae.pptx';
+    fetchResult.value = `/static/${filename.value}`;
     resultItems.value.push({
       key: resultItems.value.length + 1,
       role: 'ai',
@@ -100,7 +135,7 @@ const startFetching = async () => {
             size: 'nomarl',
             type: 'primary',
             onClick: () => {
-              openPreviewDrawer('right');
+              openPreviewDrawer('right', filename);
             },
           },
           '文档预览',
@@ -113,7 +148,15 @@ const startFetching = async () => {
             style: {
               marginLeft: '10px',
             },
-            onClick: () => {},
+            onClick: () => {
+              // 创建隐藏的 <a> 标签用于触发下载
+              const link = document.createElement('a');
+              link.href = result; // 设置下载链接
+              link.download = filename; // 设置下载文件名
+              document.body.append(link); // 将 <a> 标签添加到页面中
+              link.click(); // 触发点击事件开始下载
+              link.remove(); // 下载完成后移除 <a> 标签
+            },
           },
           '文档下载',
         ),
@@ -168,14 +211,78 @@ const fetchResult = ref('');
 const fetchStatus = ref('');
 const value = ref('');
 
-interface ResultItem {
-  key: number;
-  role: 'ai' | 'user';
-  content: string;
-  footer?: any;
-}
-
 const resultItems = ref<ResultItem[]>([]);
+
+// 监听 itemMessage 变化并更新 resultItems
+watch(
+  () => props.itemMessage,
+  (newVal) => {
+    resultItems.value = [];
+    if (newVal && newVal.length > 0) {
+      newVal.forEach((msg) => {
+        // resultItems.value.push({
+        //   key: resultItems.value.length + 1,
+        //   role: msg.role, // 'user' or 'ai'
+        //   content: msg.content,
+        //   footer: msg.footer,
+        // });
+        if (msg.role === 'user') {
+          resultItems.value.push({
+            key: resultItems.value.length + 1,
+            role: msg.role, // 'user' or 'ai'
+            content: msg.content,
+            footer: msg.footer,
+          });
+        } else {
+          const filename = ref('');
+
+          if (msg.content && isPptxURL(msg.content)) {
+            filename.value = extractPptxFilename(msg.content);
+          }
+          resultItems.value.push({
+            key: resultItems.value.length + 1,
+            role: msg.role, // 'user' or 'ai'
+            content: '文档已生成',
+            footer: h(Flex, null, [
+              h(
+                Button,
+                {
+                  size: 'nomarl',
+                  type: 'primary',
+                  onClick: () => {
+                    openPreviewDrawer('right', filename);
+                  },
+                },
+                '文档预览',
+              ),
+              h(
+                Button,
+                {
+                  size: 'nomarl',
+                  type: 'primary',
+                  style: {
+                    marginLeft: '10px',
+                  },
+                  onClick: () => {
+                    // 创建隐藏的 <a> 标签用于触发下载
+                    const link = document.createElement('a');
+                    link.href = msg.content; // 设置下载链接
+                    link.download = filename; // 设置下载文件名
+                    document.body.append(link); // 将 <a> 标签添加到页面中
+                    link.click(); // 触发点击事件开始下载
+                    link.remove(); // 下载完成后移除 <a> 标签
+                  },
+                },
+                '文档下载',
+              ),
+            ]),
+          });
+        }
+      });
+    }
+  },
+  { deep: true },
+);
 </script>
 
 <template>

packages/effects/common-ui/src/ui/ppt/typing.ts

@@ -1,6 +1,10 @@
 interface PPTTempItem {
   id: string;
   name: string;
+  workflowRunId?: string;
+  appId?: string;
+  userId?: string;
+  taskId?: string;
 }
 
 interface PptHistoryItem {

packages/effects/common-ui/src/ui/word/word-work-view.vue

@@ -134,47 +134,53 @@ const startFetching = async () => {
 
     if (answer && isDocxURL(answer)) {
       filename.value = extractDocxFilename(answer);
+      resultItems.value.push({
+        key: resultItems.value.length + 1,
+        role: 'ai',
+        content: '文档已生成',
+        footer: h(Flex, null, [
+          h(
+            Button,
+            {
+              size: 'nomarl',
+              type: 'primary',
+              onClick: () => {
+                openPreviewDrawer('right', filename);
+              },
+            },
+            '文档预览',
+          ),
+          h(
+            Button,
+            {
+              size: 'nomarl',
+              type: 'primary',
+              style: {
+                marginLeft: '10px',
+              },
+              onClick: () => {
+                // 创建隐藏的 <a> 标签用于触发下载
+                const link = document.createElement('a');
+                link.href = answer; // 设置下载链接
+                link.download = filename; // 设置下载文件名
+                document.body.append(link); // 将 <a> 标签添加到页面中
+                link.click(); // 触发点击事件开始下载
+                link.remove(); // 下载完成后移除 <a> 标签
+              },
+            },
+            '文档下载',
+          ),
+        ]),
+      });
+    } else {
+      resultItems.value.push({
+        key: resultItems.value.length + 1,
+        role: 'ai',
+        content: res.answer,
+      });
     }
 
     fetchResult.value = `/static/${filename.value}`;
-    resultItems.value.push({
-      key: resultItems.value.length + 1,
-      role: 'ai',
-      content: res.answer,
-      footer: h(Flex, null, [
-        h(
-          Button,
-          {
-            size: 'nomarl',
-            type: 'primary',
-            onClick: () => {
-              openPreviewDrawer('right', filename);
-            },
-          },
-          '文档预览',
-        ),
-        h(
-          Button,
-          {
-            size: 'nomarl',
-            type: 'primary',
-            style: {
-              marginLeft: '10px',
-            },
-            onClick: () => {
-              // 创建隐藏的 <a> 标签用于触发下载
-              const link = document.createElement('a');
-              link.href = answer; // 设置下载链接
-              link.download = filename; // 设置下载文件名
-              document.body.append(link); // 将 <a> 标签添加到页面中
-              link.click(); // 触发点击事件开始下载
-              link.remove(); // 下载完成后移除 <a> 标签
-            },
-          },
-          '文档下载',
-        ),
-      ]),
-    });
     // resultItems.value.push({
     //   key: resultItems.value.length + 1,
     //   role: 'ai',