feat(@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){
-//   return requestClient.get('/v1/workflow/info', { data });
-// };
-//
-export function getWorkflowLog(params: WorkflowApi.WorkflowLogParams) {
-  return requestClient.post(`/v1/workflow/logs/${params.appid}`, { ...params });
+export function getWorkflowInfo(data: WorkflowApi.WorkflowLogParams) {
+  return requestClient.get(`/v1/workflow/info/${data.appid}`, { params: data });
+}
+
+export function getWorkflowList(params: WorkflowApi.WorkflowLogParams) {
+  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-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,
@@ -49,6 +57,7 @@ defineOptions({
 });
 
 const props = withDefaults(defineProps<Props>(), {
+  itemMessage: () => null,
   item: () => null,
   runWorkflow: () => async () => ({
     data: {
@@ -73,6 +82,20 @@ function openPreviewDrawer(
   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 () => {
   isFetching.value = true;
   fetchStatus.value = 'fetching';
@@ -93,20 +116,6 @@ const startFetching = async () => {
     );
     const { result } = res.data.outputs;
 
-    // 判断是否是以 .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 filename = ref('');
 
     if (result && isPptxURL(result)) {
@@ -202,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 {