feat(@vben/common-ui): 重构 PPT、Spider 和 Word 组件

apps/web-antd/package.json

@@ -27,6 +27,7 @@
   },
   "dependencies": {
     "@ant-design/icons-vue": "^7.0.1",
+    "@vben-core/shadcn-ui": "workspace:*",
     "@vben/access": "workspace:*",
     "@vben/common-ui": "workspace:*",
     "@vben/constants": "workspace:*",

apps/web-antd/src/views/person/modules/user-panel.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { Descriptions, Space, Upload } from 'ant-design-vue';
+
+const fileList = ref([
+  {
+    uid: '-1',
+    name: 'image.png',
+    status: 'done',
+    url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+  },
+]);
+
+// 模拟用户信息数据
+const userInfo = {
+  username: '张三',
+  email: 'zhangsan@example.com',
+  role: '管理员',
+  department: '技术部',
+  phone: '123-456-7890',
+};
+</script>
+
+<template>
+  <Space :size="54">
+    <!-- 用户头像上传组件 -->
+    <Upload
+      list-type="picture-card"
+      :file-list="fileList"
+      :show-upload-button="false"
+    >
+      <!-- 自定义显示头像 -->
+    </Upload>
+
+    <!-- 用户信息展示 -->
+    <Descriptions title="" size="middle">
+      <Descriptions.Item label="用户名">
+        {{ userInfo.username }}
+      </Descriptions.Item>
+      <Descriptions.Item label="邮箱">{{ userInfo.email }}</Descriptions.Item>
+      <Descriptions.Item label="角色">{{ userInfo.role }}</Descriptions.Item>
+      <Descriptions.Item label="部门">
+        {{ userInfo.department }}
+      </Descriptions.Item>
+      <Descriptions.Item label="联系电话">
+        {{ userInfo.phone }}
+      </Descriptions.Item>
+    </Descriptions>
+  </Space>
+</template>
+
+<style scoped>
+/* 可以添加一些样式让组件更美观 */
+.ant-upload-list-picture-card-container img {
+  object-fit: cover;
+}
+</style>

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

@@ -1,36 +1,31 @@
 <script lang="ts" setup>
 import type { PPTTempItem } from '@vben/common-ui';
 
-import { onMounted, reactive, ref } from 'vue';
+import type { ResultItem } from './typing';
 
-import { PptListView, PptWorkView } from '@vben/common-ui';
+import { onMounted, reactive, ref } from 'vue';
 
 import { notification } from 'ant-design-vue';
 
 import { getWorkflowInfo, getWorkflowList, sendPpt } from '#/api';
 
+import { PptListView, PptWorkView } from './components';
+
 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) => {
+const getLogs = async (appid: string, limit: number) => {
   loading.value = true;
-  const res = await getWorkflowList({
+  hitsory.value = await getWorkflowList({
     appid,
-    limit: 5,
+    limit,
   });
-  hitsory.value = res;
   loading.value = false;
 };
 
@@ -67,7 +62,7 @@ async function handleClickMode(item: PPTTempItem) {
 }
 
 onMounted(() => {
-  getLogs(temp.id);
+  getLogs(temp.id, 5);
 });
 </script>
 

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

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

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

@@ -0,0 +1,3 @@
+export { default as SelfWorkView } from './self-work-view.vue';
+export { default as SpiderListView } from './spider-list-view.vue';
+export { default as WorkflowWorkView } from './workflow-work-view.vue';

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

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import type { BubbleListProps } from 'ant-design-x-vue';
 
-import type { DrawerPlacement } from '@vben-core/popup-ui';
+import type { DrawerPlacement } from '@vben/common-ui';
 
-import type { SpiderItem } from './typing';
+import type { Props, ResultItem } from '../typing';
 
 import { h, ref, watch } from 'vue';
 
-import { useVbenDrawer } from '@vben-core/popup-ui';
+import { useVbenDrawer } from '@vben/common-ui';
+
 import {
   Card,
   CardContent,
@@ -30,46 +31,9 @@ import dayjs, { Dayjs } from 'dayjs';
 
 import SpiderPreview from './spider-preview.vue';
 
-interface SpiderContext {
-  userId: string;
-  conversationId: string;
-  files: [];
-  inputs: Record<string, unknown>;
-}
-
-interface SpiderResult {
-  data: {
-    outputs: {
-      result: string;
-    };
-  };
-}
-
-interface ResultItem {
-  key: number;
-  role: 'ai' | 'user';
-  content: string;
-  footer?: any;
-}
-
-interface Props {
-  itemMessage?: ResultItem;
-  item?: SpiderItem;
-  title: string;
-  runSpider?: (context: any) => Promise<SpiderResult>;
-  getSpiderStatus?: () => Promise<{
-    status: string;
-  }>;
-  stopSpider?: () => Promise<{
-    status: string;
-  }>;
-  runSpiderGz?: (data: SpiderContext) => Promise<any>;
-}
-
 defineOptions({
-  name: 'SpiderWorkView',
+  name: 'SelfWorkView',
 });
-
 const props = withDefaults(defineProps<Props>(), {
   itemMessage: () => null,
   item: () => ({
@@ -96,14 +60,16 @@ const props = withDefaults(defineProps<Props>(), {
     },
   }),
 });
-
 const resultItems = ref<ResultItem[]>([]);
-
 const [PreviewDrawer, previewDrawerApi] = useVbenDrawer({
   // 连接抽离的组件
   connectedComponent: SpiderPreview,
   // placement: 'left',
 });
+const selectedDateRange = ref<[Dayjs, Dayjs]>([
+  dayjs('2025-05-05'),
+  dayjs('2025-05-07'),
+]);
 
 function openPreviewDrawer(
   placement: DrawerPlacement = 'right',
@@ -113,11 +79,6 @@ function openPreviewDrawer(
   previewDrawerApi.setState({ placement }).setData(fileData).open();
 }
 
-const selectedDateRange = ref<[Dayjs, Dayjs]>([
-  dayjs('2025-05-05'),
-  dayjs('2025-05-07'),
-]);
-
 // 判断是否是以 .docx 结尾的 URL
 function isDocxURL(str: string): boolean {
   return str.endsWith('.docx');
@@ -224,7 +185,6 @@ const startFetching = async () => {
     publish_end_time =
       dayjs(selectedDateRange.value[1]).format('YYYYMMDDhhmmss') || '';
   }
-  if (props.item.id === '77c068fd-d5b6-4c33-97d8-db5511a09b26') {
   try {
     notification.info({
       message: '正在获取中...',
@@ -247,92 +207,11 @@ const startFetching = async () => {
       isFetching.value = false;
       fetchResult.value = '';
       message.error('抓取无结果');
-        return;
     }
-
-      // 组件卸载时清理定时器（需配合 onUnmounted 生命周期）
-      // 示例：
-      // onUnmounted(() => {
-      //   if (statusPollingInterval) {
-      //     clearInterval(statusPollingInterval);
-      //   }
-      // });
   } catch {
     isFetching.value = false;
     fetchResult.value = '';
   }
-  }
-  if (props.item.id === 'c736edd0-925d-4877-9223-56aab7342311') {
-    try {
-      notification.info({
-        message: '正在获取中...',
-        duration: 3,
-      });
-      const res = await props.runSpiderGz({
-        userId: '1562',
-        conversationId: '',
-        files: [],
-        inputs: {},
-      });
-      if (res.data.outputs.files) {
-        // 保存抓取结果
-        fetchResult.value = res.data.outputs.files[0].url;
-        notification.success({
-          message: '获取成功',
-          duration: 3,
-        });
-
-        const fileUrl = ref('');
-        fileUrl.value = `/guangzhou${fetchResult.value}`;
-
-        resultItems.value.push({
-          key: resultItems.value.length + 1,
-          role: 'ai',
-          content: '文档已生成，有效时间5分钟，请及时查看或下载',
-          footer: h(Flex, null, [
-            h(
-              Button,
-              {
-                size: 'nomarl',
-                type: 'primary',
-                onClick: () => {
-                  openPreviewDrawer('right', fileUrl);
-                },
-              },
-              '文档预览',
-            ),
-            h(
-              Button,
-              {
-                size: 'normal',
-                type: 'primary',
-                style: {
-                  marginLeft: '10px',
-                },
-                onClick: () => {
-                  // 创建隐藏的 <a> 标签用于触发下载
-                  const link = document.createElement('a');
-                  link.href = fileUrl.value; // 设置下载链接
-                  link.download = '广州公共资源交易中心数据获取'; // 设置下载文件名
-                  document.body.append(link); // 将 <a> 标签添加到页面中
-                  link.click(); // 触发点击事件开始下载
-                  link.remove(); // 下载完成后移除 <a> 标签
-                },
-              },
-              '文档下载',
-            ),
-          ]),
-        });
-        fetchStatus.value = 'completed';
-      } else {
-        fetchResult.value = '';
-        message.error('抓取无结果');
-      }
-    } catch (error) {
-      message.error(`${error}`);
-    }
-    isFetching.value = false;
-  }
 };
 
 // 列表角色

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

@@ -0,0 +1,316 @@
+<script setup lang="ts">
+import type { BubbleListProps } from 'ant-design-x-vue';
+
+import type { DrawerPlacement } from '@vben/common-ui';
+
+import type { Props, ResultItem } from '../typing';
+
+import { h, ref, watch } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { useUserStore } from '@vben/stores';
+
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@vben-core/shadcn-ui';
+
+import { UserOutlined } from '@ant-design/icons-vue';
+import { Button, Flex, message, notification, Space } from 'ant-design-vue';
+import { Attachments, Bubble, Welcome } from 'ant-design-x-vue';
+
+import SpiderPreview from './spider-preview.vue';
+
+defineOptions({
+  name: 'WorkflowWorkView',
+});
+const props = withDefaults(defineProps<Props>(), {
+  itemMessage: () => null,
+  item: () => ({
+    id: '',
+    name: '',
+    url: '',
+  }),
+  runSpider: () => async () => ({
+    msg: '',
+    code: '',
+  }),
+  getSpiderStatus: () => async () => ({
+    msg: '',
+    code: '',
+  }),
+  stopSpider: () => async () => ({
+    msg: '',
+    code: '',
+  }),
+  runSpiderGz: () => async () => ({
+    outputs: {
+      result: '',
+      files: [],
+    },
+  }),
+});
+const userStore = useUserStore();
+const resultItems = ref<ResultItem[]>([]);
+
+const [PreviewDrawer, previewDrawerApi] = useVbenDrawer({
+  // 连接抽离的组件
+  connectedComponent: SpiderPreview,
+  // placement: 'left',
+});
+
+function openPreviewDrawer(
+  placement: DrawerPlacement = 'right',
+  filename?: string,
+) {
+  const fileData = filename.value;
+  previewDrawerApi.setState({ placement }).setData(fileData).open();
+}
+
+const startFetching = async () => {
+  // 更新状态为“抓取中”
+  isFetching.value = true;
+  fetchStatus.value = 'fetching';
+
+  try {
+    notification.info({
+      message: '正在获取中...',
+      duration: 3,
+    });
+    const res = await props.runSpiderGz({
+      userId: userStore.userInfo?.userId || '',
+      conversationId: '',
+      files: [],
+      inputs: {},
+    });
+    if (res.data.outputs.files) {
+      // 保存抓取结果
+      fetchResult.value = res.data.outputs.files[0].url;
+      notification.success({
+        message: '获取成功',
+        duration: 3,
+      });
+
+      const fileUrl = ref('');
+      fileUrl.value = `/guangzhou${fetchResult.value}`;
+
+      resultItems.value.push({
+        key: resultItems.value.length + 1,
+        role: 'ai',
+        content: '文档已生成，有效时间5分钟，请及时查看或下载',
+        footer: h(Flex, null, [
+          h(
+            Button,
+            {
+              size: 'nomarl',
+              type: 'primary',
+              onClick: () => {
+                openPreviewDrawer('right', fileUrl);
+              },
+            },
+            '文档预览',
+          ),
+          h(
+            Button,
+            {
+              size: 'normal',
+              type: 'primary',
+              style: {
+                marginLeft: '10px',
+              },
+              onClick: () => {
+                // 创建隐藏的 <a> 标签用于触发下载
+                const link = document.createElement('a');
+                link.href = fileUrl.value; // 设置下载链接
+                link.download = '广州公共资源交易中心数据获取'; // 设置下载文件名
+                document.body.append(link); // 将 <a> 标签添加到页面中
+                link.click(); // 触发点击事件开始下载
+                link.remove(); // 下载完成后移除 <a> 标签
+              },
+            },
+            '文档下载',
+          ),
+        ]),
+      });
+      fetchStatus.value = 'completed';
+    } else {
+      fetchResult.value = '';
+      message.error('抓取无结果');
+    }
+  } catch (error) {
+    message.error(`${error}`);
+  }
+  isFetching.value = false;
+};
+
+// 列表角色
+const roles: BubbleListProps['roles'] = {
+  user: {
+    placement: 'end',
+    typing: false,
+    styles: {
+      content: {
+        background: '#ffffff',
+      },
+    },
+    avatar: { icon: h(UserOutlined), style: { background: '#87d068' } },
+  },
+  ai: {
+    placement: 'start',
+    typing: false,
+    style: {
+      maxWidth: 600,
+      marginInlineEnd: 44,
+    },
+    styles: {
+      content: {
+        background: '#ffffff',
+      },
+      footer: {
+        width: '100%',
+      },
+    },
+    avatar: { icon: h(UserOutlined), style: { background: '#fde3cf' } },
+  },
+  file: {
+    placement: 'start',
+    avatar: { icon: h(UserOutlined), style: { visibility: 'hidden' } },
+    variant: 'borderless',
+    messageRender: (items: any) =>
+      h(
+        Flex,
+        { vertical: true, gap: 'middle' },
+        items.map((item: any) =>
+          h(Attachments.FileCard, { key: item.uid, item }),
+        ),
+      ),
+  },
+};
+
+const isFetching = ref(false);
+const fetchResult = ref('');
+const fetchStatus = ref('');
+
+// 监听 title 变化并更新 resultItems
+watch(
+  () => props.item,
+  () => {
+    resultItems.value = [];
+  },
+);
+
+// 监听 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 {
+          resultItems.value.push({
+            key: resultItems.value.length + 1,
+            role: msg.role, // 'user' or 'ai'
+            content: '文档已生成',
+            footer: h(Flex, null, [
+              // h(
+              //   Button,
+              //   {
+              //     size: 'normal',
+              //     type: 'primary',
+              //     onClick: () => {
+              //       openPreviewDrawer('right', filename);
+              //     },
+              //   },
+              //   '文档预览',
+              // ),
+              h(
+                Button,
+                {
+                  size: 'normal',
+                  type: 'primary',
+                  style: {
+                    marginLeft: '10px',
+                  },
+                  onClick: () => {
+                    // 创建隐藏的 <a> 标签用于触发下载
+                    const link = document.createElement('a');
+                    link.href = msg.content; // 设置下载链接
+                    link.download = '广州公共资源交易中心数据获取'; // 设置下载文件名
+                    document.body.append(link); // 将 <a> 标签添加到页面中
+                    link.click(); // 触发点击事件开始下载
+                    link.remove(); // 下载完成后移除 <a> 标签
+                  },
+                },
+                '文档下载',
+              ),
+            ]),
+          });
+        }
+      });
+    }
+  },
+  { deep: true },
+);
+</script>
+
+<template>
+  <!--  style="flex-direction: column"-->
+  <div
+    class="flex h-full"
+    style="flex-direction: column; width: 70%; padding-top: 20px"
+  >
+    <PreviewDrawer />
+    <!--    <PreviewDrawer />-->
+    <Space
+      v-if="resultItems.length === 0"
+      direction="vertical"
+      size:16
+      style="flex: 1"
+    >
+      <Welcome
+        variant="borderless"
+        icon="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp"
+        title="欢迎使用AI平台信息获取"
+        description="请选择数据信息列表中需要获取信息的链接，选取时间后开始爬取获取信息。"
+      />
+    </Space>
+    <Bubble.List
+      v-else
+      variant="shadow"
+      :typing="true"
+      :items="resultItems"
+      :roles="roles"
+      style="flex: 1"
+    />
+
+    <Card class="w-full self-end" v-loading="isFetching">
+      <CardHeader class="py-4">
+        <CardTitle class="text-lg">{{ title }}</CardTitle>
+      </CardHeader>
+      <CardContent class="flex flex-wrap pt-0">
+        {{ item ? item.url : '请选择左侧列表' }}
+      </CardContent>
+      <CardFooter class="flex justify-end">
+        <Button :disabled="!item" type="primary" @click="startFetching">
+          {{ isFetching ? '抓取中...' : '开始抓取' }}
+        </Button>
+      </CardFooter>
+    </Card>
+  </div>
+</template>

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

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
+// sendWorkflow
+import type { ResultItem, TempItem, WordFlowItem } from './typing';
 
-import { SpiderListView, SpiderWorkView } from '@vben/common-ui';
+import { ref } from 'vue';
 
 import { notification } from 'ant-design-vue';
 
@@ -13,39 +14,25 @@ import {
   runSpiderGz,
   stopSpider,
 } from '#/api';
-// sendWorkflow
-interface TempItem {
-  id: string;
-  name: string;
-  url: string;
-}
 
-interface ResultItem {
+import { SelfWorkView, SpiderListView, WorkflowWorkView } from './components';
-  key: number;
-  role: 'ai' | 'user';
-  content: string;
-  footer?: any;
-}
-interface WordFlowItem {
-  id: string;
-  workflowRunId: string;
-  taskId: string;
-  userId: string;
-  appId: string;
-}
 
 const hitsory = ref([]);
 const loading = ref(true);
-const temp = ref();
+const temp = ref({
+  id: '',
+  name: '',
+  url: '',
+});
 const itemMessage = ref<ResultItem[]>([]);
 
-const getLogs = async (appid: string) => {
+//  获取日志
+const getLogs = async (appid: string, limit: number) => {
   loading.value = true;
-  const res = await getWorkflowList({
+  hitsory.value = await getWorkflowList({
     appid,
-    limit: 5,
+    limit,
   });
-  hitsory.value = res;
   loading.value = false;
 };
 
@@ -71,7 +58,7 @@ async function handleClickMode(item: TempItem) {
     duration: 3,
   });
   temp.value = item;
-  getLogs(item.id);
+  getLogs(item.id, 5);
 }
 
 // onMounted(() => {
@@ -90,7 +77,18 @@ async function handleClickMode(item: TempItem) {
         @click="handleClick"
       />
     </div>
-    <SpiderWorkView
+    <SelfWorkView
+      v-if="temp.id === '77c068fd-d5b6-4c33-97d8-db5511a09b26'"
+      title="目标网址："
+      :item="temp"
+      :run-spider="runSpider"
+      :stop-spider="stopSpider"
+      :get-spider-status="getSpiderStatus"
+      :run-spider-gz="runSpiderGz"
+      :item-message="itemMessage"
+    />
+    <WorkflowWorkView
+      v-else
       title="目标网址："
       :item="temp"
       :run-spider="runSpider"

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

@@ -0,0 +1,69 @@
+interface TempItem {
+  id: string;
+  name: string;
+  url: string;
+}
+
+interface ResultItem {
+  key: number;
+  role: 'ai' | 'user';
+  content: string;
+  footer?: any;
+}
+interface WordFlowItem {
+  id: string;
+  workflowRunId: string;
+  taskId: string;
+  userId: string;
+  appId: string;
+}
+
+interface SpiderItem {
+  id: string;
+  name: string;
+  url: string;
+}
+
+interface SpiderContext {
+  userId: string;
+  conversationId: string;
+  files: [];
+  inputs: Record<string, unknown>;
+}
+interface SpiderResult {
+  data: {
+    outputs: {
+      result: string;
+    };
+  };
+}
+
+interface ResultItem {
+  key: number;
+  role: 'ai' | 'user';
+  content: string;
+  footer?: any;
+}
+
+interface Props {
+  itemMessage?: ResultItem;
+  item?: SpiderItem;
+  title: string;
+  runSpider?: (context: any) => Promise<SpiderResult>;
+  getSpiderStatus?: () => Promise<{
+    status: string;
+  }>;
+  stopSpider?: () => Promise<{
+    status: string;
+  }>;
+  runSpiderGz?: (data: SpiderContext) => Promise<any>;
+}
+
+export type {
+  Props,
+  ResultItem,
+  SpiderContext,
+  SpiderResult,
+  TempItem,
+  WordFlowItem,
+};

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

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import type { WordTempItem } from '@vben/common-ui';
 
-import { onMounted, reactive, ref } from 'vue';
+import type { ResultItem } from './typing';
 
-import { WordListView, WordWorkView } from '@vben/common-ui';
+import { onMounted, reactive, ref } from 'vue';
 
 import { message, notification } from 'ant-design-vue';
 
@@ -15,12 +15,7 @@ import {
   sendWord,
 } from '#/api';
 
-interface ResultItem {
+import { WordListView, WordWorkView } from './components';
-  key: number;
-  role: 'ai' | 'user';
-  content: string;
-  footer?: any;
-}
 
 let temp = reactive<WordTempItem>({
   id: 'baca08c1-e92b-4dc9-a445-3584803f54d4',

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

@@ -0,0 +1,56 @@
+interface WordTempItem {
+  id: string;
+  name: string;
+}
+
+interface WordHistoryItem {
+  name: string;
+  id: string;
+  workflowRun: {
+    id: string;
+  };
+  createdByEndUser: {
+    id: string;
+    sessionId: string;
+  };
+}
+
+interface ResultItem {
+  key: number;
+  role: 'ai' | 'user';
+  content: string;
+  footer?: any;
+}
+
+interface WorkflowContext {
+  userId: string;
+  conversationId: string;
+  content: string;
+  inputs: {
+    [key: string]: any;
+  };
+  files: [];
+}
+interface WorkflowResult {
+  conversationId: string;
+  answer: object;
+  data: {
+    outputs: {
+      result: string;
+    };
+  };
+}
+interface Props {
+  itemMessage?: ResultItem;
+  item?: WordTempItem;
+  paramsData?: object;
+  runChatflow?: (context: WorkflowContext) => Promise<WorkflowResult>;
+}
+
+interface PropsHistory {
+  items?: WordHistoryItem[];
+  title: string;
+  loading: boolean;
+}
+
+export type { Props, PropsHistory, ResultItem, WordHistoryItem, WordTempItem };

packages/effects/common-ui/src/ui/index.ts

@@ -3,6 +3,3 @@ export * from './authentication';
 export * from './dashboard';
 export * from './fallback';
 export * from './home';
-export * from './ppt';
-export * from './spider';
-export * from './word';

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

@@ -1,43 +0,0 @@
-<script setup lang="ts">
-// import type { PPTTempItem } from './typing';
-
-import type { PptHistoryItem } from '../ppt';
-
-import { Card, CardContent, CardHeader, CardTitle } from '@vben-core/shadcn-ui';
-
-interface Props {
-  items?: PptHistoryItem[];
-  title: string;
-  loading: boolean;
-}
-
-defineOptions({
-  name: 'PptHistoryView',
-});
-
-withDefaults(defineProps<Props>(), {
-  items: () => [],
-});
-
-defineEmits(['click']);
-</script>
-
-<template>
-  <Card style="height: 45vh; overflow-y: auto; border-radius: 0">
-    <CardHeader class="py-4">
-      <CardTitle class="text-lg">运行历史</CardTitle>
-    </CardHeader>
-    <CardContent class="flex flex-wrap p-5 pt-0">
-      <ul class="divide-border w-full divide-y" role="list">
-        <li
-          v-for="(item, index) in items"
-          :key="index"
-          @click="$emit('click', item)"
-          class="flex cursor-pointer justify-between gap-x-6 py-5"
-        >
-          {{ item.id }}
-        </li>
-      </ul>
-    </CardContent>
-  </Card>
-</template>

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

@@ -1,22 +0,0 @@
-interface PPTTempItem {
-  id: string;
-  name: string;
-  workflowRunId?: string;
-  appId?: string;
-  userId?: string;
-  taskId?: string;
-  url?: string;
-}
-
-interface PptHistoryItem {
-  id: string;
-  workflowRun: {
-    id: string;
-  };
-  createdByEndUser: {
-    id: string;
-    sessionId: string;
-  };
-}
-
-export type { PptHistoryItem, PPTTempItem };

packages/effects/common-ui/src/ui/spider/index.ts

@@ -1,3 +0,0 @@
-export { default as SpiderListView } from './spider-list-view.vue';
-export { default as SpiderWorkView } from './spider-work-view.vue';
-export type * from './typing';

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

@@ -1,7 +0,0 @@
-interface SpiderItem {
-  id: string;
-  name: string;
-  url: string;
-}
-
-export type { SpiderItem };

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

@@ -1,18 +0,0 @@
-interface WordTempItem {
-  id: string;
-  name: string;
-}
-
-interface WordHistoryItem {
-  name: string;
-  id: string;
-  workflowRun: {
-    id: string;
-  };
-  createdByEndUser: {
-    id: string;
-    sessionId: string;
-  };
-}
-
-export type { WordHistoryItem, WordTempItem };

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

@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import type { WordHistoryItem } from '../word';
-
-import { Card, CardContent, CardHeader, CardTitle } from '@vben-core/shadcn-ui';
-
-interface Props {
-  items?: WordHistoryItem[];
-  title: string;
-  loading: boolean;
-}
-
-defineOptions({
-  name: 'WordHistoryView',
-});
-
-withDefaults(defineProps<Props>(), {
-  items: () => [],
-});
-
-defineEmits(['click']);
-</script>
-
-<template>
-  <Card style="height: 45vh; overflow-y: auto; border-radius: 0">
-    <CardHeader class="py-4">
-      <CardTitle class="text-lg">运行历史</CardTitle>
-    </CardHeader>
-    <CardContent class="flex flex-wrap p-5 pt-0">
-      <ul class="divide-border w-full divide-y" role="list">
-        <li
-          v-for="(item, index) in items"
-          :key="index"
-          @click="$emit('click', item)"
-          class="flex cursor-pointer justify-between gap-x-6 py-5"
-        >
-          {{ item.name }}
-        </li>
-      </ul>
-    </CardContent>
-  </Card>
-</template>

pnpm-lock.yaml

@@ -598,6 +598,9 @@ importers:
       '@ant-design/icons-vue':
         specifier: ^7.0.1
         version: 7.0.1(vue@3.5.13(typescript@5.8.3))
+      '@vben-core/shadcn-ui':
+        specifier: workspace:*
+        version: link:../../packages/@core/ui-kit/shadcn-ui
       '@vben/access':
         specifier: workspace:*
         version: link:../../packages/effects/access
@@ -1345,7 +1348,7 @@ importers:
         specifier: ^1.1.2
         version: 1.1.2(ant-design-vue@4.2.6(vue@3.5.13(typescript@5.8.3)))(vue@3.5.13(typescript@5.8.3))
       dayjs:
-        specifier: ^1.11.13
+        specifier: 'catalog:'
         version: 1.11.13
       markdown-it:
         specifier: ^14.1.0