From 25aa48085a0bd2958de3d6b49a06c3f112244e1f Mon Sep 17 00:00:00 2001
From: vertoryao <673441990@qq.com>
Date: Mon, 5 May 2025 23:35:12 +0800
Subject: [PATCH] =?UTF-8?q?refactor(@vben/web-antd):=20=E5=AE=8C=E6=88=90p?=
 =?UTF-8?q?pt=E9=83=A8=E5=88=86=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/api/core/workflow.ts        |  19 +-
 apps/web-antd/src/views/ppt/index.vue         | 630 +----------------
 apps/web-antd/src/views/ppt/index2.vue        | 615 +++++++++++++++++
 apps/web-antd/src/views/spider/index.vue      |   4 +-
 apps/web-antd/src/views/spider/index2.vue     | 210 ------
 apps/web-antd/src/views/word/index.vue        | 650 +-----------------
 apps/web-antd/src/views/word/index2.vue       | 635 +++++++++++++++++
 packages/effects/common-ui/package.json       |   2 +
 packages/effects/common-ui/src/ui/index.ts    |   1 +
 .../effects/common-ui/src/ui/ppt/index.ts     |   4 +
 .../common-ui/src/ui/ppt/ppt-history-view.vue |  45 ++
 .../common-ui/src/ui/ppt/ppt-list-view.vue    |  38 +
 .../common-ui/src/ui/ppt/ppt-work-view.vue    | 169 +++++
 .../effects/common-ui/src/ui/ppt/typing.ts    |  17 +
 .../src/ui/spider/spider-work-view.vue        |   2 +-
 packages/icons/src/iconify/index.ts           |   2 +
 pnpm-lock.yaml                                |   6 +
 17 files changed, 1621 insertions(+), 1428 deletions(-)
 create mode 100644 apps/web-antd/src/views/ppt/index2.vue
 delete mode 100644 apps/web-antd/src/views/spider/index2.vue
 create mode 100644 apps/web-antd/src/views/word/index2.vue
 create mode 100644 packages/effects/common-ui/src/ui/ppt/index.ts
 create mode 100644 packages/effects/common-ui/src/ui/ppt/ppt-history-view.vue
 create mode 100644 packages/effects/common-ui/src/ui/ppt/ppt-list-view.vue
 create mode 100644 packages/effects/common-ui/src/ui/ppt/ppt-work-view.vue
 create mode 100644 packages/effects/common-ui/src/ui/ppt/typing.ts

diff --git a/apps/web-antd/src/api/core/workflow.ts b/apps/web-antd/src/api/core/workflow.ts
index 72c2ca0..fb86d99 100644
--- a/apps/web-antd/src/api/core/workflow.ts
+++ b/apps/web-antd/src/api/core/workflow.ts
@@ -3,6 +3,12 @@ import { requestClient } from '#/api/request';
 export namespace WorkflowApi {
   export interface WorkflowParams {
     appid: string;
+    conversationId: string;
+    userId: string;
+    inputs: {
+      [key: string]: any;
+    };
+    files: [];
   }
   export interface WorkflowRunBody {
     conversationId: string;
@@ -12,6 +18,13 @@ export namespace WorkflowApi {
     };
     files: [];
   }
+  export interface WorkflowLogParams {
+    appid: string;
+    lastId?: string;
+    page?: number;
+    limit?: number;
+    keyword?: string;
+  }
 }
 
 // 工作流
@@ -34,6 +47,6 @@ export function sendWorkflow(
 //   return requestClient.get('/v1/workflow/info', { data });
 // };
 //
-// export function getWorkflowLog(data){
-//   return requestClient.get('/v1/workflow/logs', { data });
-// };
+export function getWorkflowLog(params: WorkflowApi.WorkflowLogParams) {
+  return requestClient.post(`/v1/workflow/logs/${params.appid}`, { ...params });
+}
diff --git a/apps/web-antd/src/views/ppt/index.vue b/apps/web-antd/src/views/ppt/index.vue
index 2120508..803b3fa 100644
--- a/apps/web-antd/src/views/ppt/index.vue
+++ b/apps/web-antd/src/views/ppt/index.vue
@@ -1,615 +1,55 @@
-<script setup lang="ts">
-import type {
-  AttachmentsProps,
-  BubbleListProps,
-  ConversationsProps,
-  PromptsProps,
-} from 'ant-design-x-vue';
+<script lang="ts" setup>
+import type { PPTTempItem } from '@vben/common-ui';
 
-import type { VNode } from 'vue';
+import { onMounted, reactive, ref } from 'vue';
 
-import { computed, h, onMounted, ref, watch } from 'vue';
+import { PptHistoryView, PptListView, PptWorkView } from '@vben/common-ui';
 
-import {
-  CloudUploadOutlined,
-  CommentOutlined,
-  CopyOutlined,
-  DeleteOutlined,
-  EllipsisOutlined,
-  FireOutlined,
-  HeartOutlined,
-  PaperClipOutlined,
-  PlusOutlined,
-  ReadOutlined,
-  ShareAltOutlined,
-  SmileOutlined,
-  SyncOutlined,
-} from '@ant-design/icons-vue';
-import VueOfficePptx from '@vue-office/pptx';
-import {
-  Badge,
-  Button,
-  Flex,
-  message,
-  Space,
-  theme,
-  Typography,
-} from 'ant-design-vue';
-import {
-  Attachments,
-  Bubble,
-  Conversations,
-  Prompts,
-  Sender,
-  useXAgent,
-  useXChat,
-  Welcome,
-} from 'ant-design-x-vue';
+import { getWorkflowLog, sendWorkflow } from '#/api';
 
-import { getChatList, sendWorkflow } from '#/api';
-
-defineOptions({ name: 'PlaygroundIndependentSetup' });
-
-const { token } = theme.useToken();
-
-const styles = computed(() => {
-  return {
-    layout: {
-      width: '100%',
-      'min-width': '1000px',
-      height: '722px',
-      'border-radius': `${token.value.borderRadius}px`,
-      display: 'flex',
-      background: `${token.value.colorBgContainer}`,
-      'font-family': `AlibabaPuHuiTi, ${token.value.fontFamily}, sans-serif`,
-    },
-    menu: {
-      background: `${token.value.colorBgLayout}80`,
-      width: '280px',
-      height: '100%',
-      display: 'flex',
-      'flex-direction': 'column',
-    },
-    conversations: {
-      padding: '0 12px',
-      flex: 1,
-      'overflow-y': 'auto',
-    },
-    chat: {
-      height: '100%',
-      width: '100%',
-      'max-width': '700px',
-      margin: '0 auto',
-      'box-sizing': 'border-box',
-      display: 'flex',
-      'flex-direction': 'column',
-      padding: `${token.value.paddingLG}px`,
-      gap: '16px',
-    },
-    messages: {
-      flex: 1,
-    },
-    placeholder: {
-      'padding-top': '32px',
-      'text-align': 'left',
-      flex: 1,
-    },
-    sender: {
-      'box-shadow': token.value.boxShadow,
-    },
-    logo: {
-      display: 'flex',
-      height: '72px',
-      'align-items': 'center',
-      'justify-content': 'start',
-      padding: '0 24px',
-      'box-sizing': 'border-box',
-    },
-    'logo-img': {
-      width: '24px',
-      height: '24px',
-      display: 'inline-block',
-    },
-    'logo-span': {
-      display: 'inline-block',
-      margin: '0 8px',
-      'font-weight': 'bold',
-      color: token.value.colorText,
-      'font-size': '16px',
-    },
-    addBtn: {
-      background: '#1677ff0f',
-      border: '1px solid #1677ff34',
-      width: 'calc(100% - 24px)',
-      margin: '0 12px 24px 12px',
-    },
-  } as const;
+let temp = reactive<PPTTempItem>({
+  id: 'ee3889b6-50fa-463e-b956-3b93447727fc',
+  name: '从可研申报书生成科技项目PPT',
 });
 
-const pptx = ref<any>('/static/43b7da46a6ca47e5a9d7710d8dcf499c.pptx');
+const hitsory = ref([]);
+const loading = ref(true);
 
-const [messageApi, contextHolder] = message.useMessage();
+const getLogs = async (appid: string) => {
+  loading.value = true;
+  const res = await getWorkflowLog({
+    appid,
+    limit: 5,
+    page: 1,
+  });
+  hitsory.value = res.data;
+  loading.value = false;
+};
 
-const menuConfig: ConversationsProps['menu'] = (conversation) => ({
-  items: [
-    {
-      label: '删除此对话',
-      key: 'operation3',
-      icon: h(DeleteOutlined),
-      danger: true,
-    },
-  ],
-  onClick: (menuInfo) => {
-    messageApi.info(`Click ${conversation.key} - ${menuInfo.key}`);
-  },
-});
-
-const acticeModeKey = ref('1');
-
-// 定义模板数据
-const templates = ref([
-  { label: '模板1', key: '1' },
-  { label: '模板2', key: '2' },
-  { label: '模板3', key: '3' },
-  { label: '模板34', key: '4' },
-  { label: '模板35', key: '5' },
-  { label: '模板36', key: '7' },
-  { label: '模板37', key: '8' },
-  { label: '模板38', key: '9' },
-]);
-
-// const sleep = () => new Promise(resolve => setTimeout(resolve, 500))
-
-function renderTitle(icon: VNode, title: string) {
-  return h(Space, { align: 'start' }, [icon, h('span', title)]);
+function handleClick(item: PPTTempItem) {
+  temp = item;
 }
 
-const defaultConversationsItems = [
-  {
-    key: '0',
-    label: 'What is Ant Design X?',
-  },
-];
-
-const placeholderPromptsItems: PromptsProps['items'] = [
-  {
-    key: '1',
-    label: renderTitle(
-      h(FireOutlined, { style: { color: '#FF4D4F' } }),
-      'Hot Topics',
-    ),
-    description: 'What are you interested in?',
-    children: [
-      {
-        key: '1-1',
-        description: `What's new in X?`,
-      },
-      {
-        key: '1-2',
-        description: `What's AGI?`,
-      },
-      {
-        key: '1-3',
-        description: `Where is the doc?`,
-      },
-    ],
-  },
-  {
-    key: '2',
-    label: renderTitle(
-      h(ReadOutlined, { style: { color: '#1890FF' } }),
-      'Design Guide',
-    ),
-    description: 'How to design a good product?',
-    children: [
-      {
-        key: '2-1',
-        icon: h(HeartOutlined),
-        description: `Know the well`,
-      },
-      {
-        key: '2-2',
-        icon: h(SmileOutlined),
-        description: `Set the AI role`,
-      },
-      {
-        key: '2-3',
-        icon: h(CommentOutlined),
-        description: `Express the feeling`,
-      },
-    ],
-  },
-];
-
-const senderPromptsItems: PromptsProps['items'] = [
-  {
-    key: '1',
-    description: 'Hot Topics',
-    icon: h(FireOutlined, { style: { color: '#FF4D4F' } }),
-  },
-  {
-    key: '2',
-    description: 'Design Guide',
-    icon: h(ReadOutlined, { style: { color: '#1890FF' } }),
-  },
-];
-
-const roles: BubbleListProps['roles'] = {
-  ai: {
-    placement: 'start',
-    typing: { step: 5, interval: 20 },
-    styles: {
-      content: {
-        borderRadius: '16px',
-      },
-    },
-  },
-  local: {
-    placement: 'end',
-    variant: 'shadow',
-  },
-};
-
-// ==================== State ====================
-const headerOpen = ref(false);
-const content = ref('');
-const conversationsItems = ref(defaultConversationsItems);
-const activeKey = ref(defaultConversationsItems[0]?.key);
-const attachedFiles = ref<AttachmentsProps['items']>([]);
-const agentRequestLoading = ref(false);
-
-// ==================== Runtime ====================
-const [agent] = useXAgent({
-  request: async ({ message }, { onSuccess }) => {
-    agentRequestLoading.value = true;
-    const res = await sendWorkflow(
-      {
-        appid: 'baca08c1-e92b-4dc9-a445-3584803f54d4',
-      },
-      {
-        userId: '1563',
-        conversationId: '',
-        files: [],
-        inputs: {
-          declarationDoc: message,
-        },
-      },
-    );
-    agentRequestLoading.value = false;
-    if (res.data.data.outputs.result) {
-      onSuccess(`下载链接:${res.data.data.outputs.result}`);
-      const url = new URL(res.data.data.outputs.result);
-      pptx.value = url.pathname;
-    } else {
-      onSuccess('发生异常，可以输入更多信息再让我来回答或重试。');
-    }
-  },
-});
-
-const { onRequest, messages, setMessages } = useXChat({
-  agent: agent?.value,
-});
-
-watch(
-  activeKey,
-  () => {
-    if (activeKey.value !== undefined) {
-      setMessages([]);
-    }
-  },
-  { immediate: true },
-);
-
-// ==================== Event ====================
-function onSubmit(nextContent: string) {
-  if (!nextContent) return;
-  onRequest(nextContent);
-  // sendMessage(nextContent)
-  content.value = '';
-}
-
-const onPromptsItemClick: PromptsProps['onItemClick'] = (info) => {
-  onRequest(info.data.description as string);
-};
-
-function onAddConversation() {
-  conversationsItems.value = [
-    ...conversationsItems.value,
-    {
-      key: `${conversationsItems.value.length}`,
-      label: `New Conversation ${conversationsItems.value.length}`,
-    },
-  ];
-  activeKey.value = `${conversationsItems.value.length}`;
-}
-
-const onConversationClick: ConversationsProps['onActiveChange'] = (key) => {
-  activeKey.value = key;
-};
-
-const handleFileChange: AttachmentsProps['onChange'] = (info) =>
-  (attachedFiles.value = info.fileList);
-
-// ==================== Nodes ====================
-const placeholderNode = computed(() =>
-  h(
-    Space,
-    { direction: 'vertical', size: 16, style: styles.value.placeholder },
-    [
-      h(Welcome, {
-        variant: 'borderless',
-        icon: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp',
-        title: "Hello, I'm Ant Design X",
-        description:
-          'Base on Ant Design, AGI product interface solution, create a better intelligent vision~',
-        extra: h(Space, {}, [
-          h(Button, { icon: h(ShareAltOutlined) }),
-          h(Button, { icon: h(EllipsisOutlined) }),
-        ]),
-      }),
-      h(Prompts, {
-        title: 'Do you want?',
-        items: placeholderPromptsItems,
-        styles: {
-          list: {
-            width: '100%',
-          },
-          item: {
-            flex: 1,
-          },
-        },
-        onItemClick: onPromptsItemClick,
-      }),
-    ],
-  ),
-);
-
-const items = computed<BubbleListProps['items']>(() => {
-  if (messages.value.length === 0) {
-    return [{ content: placeholderNode, variant: 'borderless' }];
-  }
-  return messages.value.map(({ id, message, status }) => ({
-    key: id,
-    loading: status === 'loading',
-    role: status === 'local' ? 'local' : 'ai',
-    content: message,
-  }));
-});
-
-// 自定义代码
-
-// 获取会话记录
-const getConversationList = async () => {
-  const res = await getChatList(
-    {
-      appid: '363b9580-ae60-4a40-ae7d-ec434e86e326',
-    },
-    {
-      userId: '1563',
-      lastId: '',
-      sortBy: '',
-      limit: '5',
-    },
-  );
-  if (res.status === 200) {
-    conversationsItems.value = res.data.map((item: any) => {
-      return {
-        key: item.id,
-        label: item.name,
-      };
-    });
-    activeKey.value = res.data.data[0].id;
-  }
-};
-
-const showQuoteButton = ref(false);
-const selectedText = ref('');
-const quoteButtonStyle = ref({
-  position: 'absolute',
-  top: '0',
-  left: '0',
-  display: 'none',
-});
-
-const handleTextSelection = (event: any) => {
-  const selection = window.getSelection();
-  if (selection && selection.toString().trim() !== '') {
-    selectedText.value = selection.toString();
-
-    // 获取鼠标位置
-    const mouseX = event.pageX;
-    const mouseY = event.pageY;
-
-    // 设置按钮位置
-    quoteButtonStyle.value = {
-      position: 'fixed',
-      top: `${mouseY}px`,
-      left: `${mouseX}px`,
-      display: 'block',
-    };
-
-    showQuoteButton.value = true;
-  } else {
-    showQuoteButton.value = false;
-  }
-};
-
-const handleQuoteClick = () => {
-  // 处理引用逻辑，比如将选中的文本添加到引用框中
-  content.value = selectedText.value;
-  showQuoteButton.value = false;
-};
-
-// 定义 pptx 的样式
-const pptStyle = ref({
-  height: 'calc(100vh - 150px)',
-  width: '40%',
-  margin: '30px 20px',
-});
-
-// 监听窗口大小变化
-const handleResize = () => {
-  // 动态调整宽度和高度
-  pptStyle.value = {
-    height: 'calc(100vh - 150px)', // 保持高度不变
-    width: '40%', // 宽度为窗口宽度的 40%
-    margin: '30px 20px',
-  };
-};
-
-// 监听模板选择事件
-const onModeClick: ConversationsProps['onActiveChange'] = (key) => {
-  acticeModeKey.value = key;
-};
-
-const renderedHandler = () => {
-  console.warn('渲染完成');
-};
-const errorHandler = () => {
-  console.error('渲染失败');
-};
-
 onMounted(() => {
-  getConversationList();
-  window.addEventListener('resize', handleResize);
+  getLogs(temp.id);
 });
 </script>
 
 <template>
-  <contextHolder />
-  <div :style="styles.layout" style="height: calc(100vh - 70px)">
-    <div :style="styles.menu">
-      <!-- 🌟 Logo -->
-      <div :style="styles.logo">
-        <img
-          src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*eco6RrQhxbMAAAAAAAAAAAAADgCCAQ/original"
-          draggable="false"
-          alt="logo"
-          :style="styles['logo-img']"
+  <div class="px-5">
+    <div class="mt-5 flex flex-col lg:flex-row">
+      <div class="mr-4 w-full lg:w-1/4">
+        <PptHistoryView
+          :loading="loading"
+          :items="hitsory"
+          title="运行历史"
+          @click="handleClick"
         />
-        <span :style="styles['logo-span']">PPT模板生成</span>
+        <PptListView title="选择模板" @click="handleClick" />
+      </div>
+      <div class="w-full lg:w-3/4">
+        <PptWorkView :item="temp" :run-workflow="sendWorkflow" />
       </div>
-
-      <!-- 🌟 添加会话 -->
-      <Button type="link" :style="styles.addBtn" @click="onAddConversation">
-        <PlusOutlined />
-        新建会话
-      </Button>
-
-      <!-- 🌟 会话管理 -->
-      <Conversations
-        :items="conversationsItems"
-        :style="styles.conversations"
-        :active-key="activeKey"
-        :menu="menuConfig"
-        @active-change="onConversationClick"
-      />
-
-      <!-- 🌟 会话管理 -->
-      <Typography.Title :level="5" style="margin: 0 0 8px">
-        选择模板
-      </Typography.Title>
-      <Conversations
-        :items="templates"
-        :style="styles.conversations"
-        :active-key="acticeModeKey"
-        :menu="menuConfig"
-        @active-change="onModeClick"
-      />
     </div>
-
-    <div :style="styles.chat" style="margin-left: 20px">
-      <!-- 🌟 消息列表 -->
-      <Bubble.List
-        :items="items"
-        :roles="roles"
-        :style="styles.messages"
-        @mouseup="handleTextSelection"
-      >
-        <template #footer>
-          <Space :size="token.paddingXXS">
-            <Button type="text" size="small" :icon="h(SyncOutlined)" />
-            <Button type="text" size="small" :icon="h(CopyOutlined)" />
-          </Space>
-        </template>
-      </Bubble.List>
-
-      <a-button
-        v-if="showQuoteButton"
-        :style="quoteButtonStyle"
-        @click="handleQuoteClick"
-      >
-        引用
-      </a-button>
-
-      <!-- 🌟 提示词 -->
-      <Prompts :items="senderPromptsItems" @item-click="onPromptsItemClick" />
-
-      <!-- 🌟 输入框 -->
-      <Sender
-        :value="content"
-        :style="styles.sender"
-        :loading="agentRequestLoading"
-        @submit="onSubmit"
-        @change="(value) => (content = value)"
-      >
-        <template #prefix>
-          <Badge :dot="attachedFiles.length > 0 && !headerOpen">
-            <Button type="text" @click="() => (headerOpen = !headerOpen)">
-              <template #icon>
-                <PaperClipOutlined />
-              </template>
-            </Button>
-          </Badge>
-        </template>
-
-        <template #header>
-          <Sender.Header
-            title="Attachments"
-            :open="headerOpen"
-            :styles="{ content: { padding: 0 } }"
-            @open-change="(open) => (headerOpen = open)"
-          >
-            <Attachments
-              :before-upload="() => false"
-              :items="attachedFiles"
-              @change="handleFileChange"
-            >
-              <template #placeholder="type">
-                <Flex
-                  v-if="type && type.type === 'inline'"
-                  align="center"
-                  justify="center"
-                  vertical
-                  gap="2"
-                >
-                  <Typography.Text style="font-size: 30px; line-height: 1">
-                    <CloudUploadOutlined />
-                  </Typography.Text>
-                  <Typography.Title
-                    :level="5"
-                    style="margin: 0; font-size: 14px; line-height: 1.5"
-                  >
-                    Upload files
-                  </Typography.Title>
-                  <Typography.Text type="secondary">
-                    Click or drag files to this area to upload
-                  </Typography.Text>
-                </Flex>
-                <Typography.Text v-if="type && type.type === 'drop'">
-                  Drop file here
-                </Typography.Text>
-              </template>
-            </Attachments>
-          </Sender.Header>
-        </template>
-      </Sender>
-    </div>
-    <VueOfficePptx
-      :src="pptx"
-      :style="pptStyle"
-      @rendered="renderedHandler"
-      @error="errorHandler"
-    />
   </div>
 </template>
diff --git a/apps/web-antd/src/views/ppt/index2.vue b/apps/web-antd/src/views/ppt/index2.vue
new file mode 100644
index 0000000..2120508
--- /dev/null
+++ b/apps/web-antd/src/views/ppt/index2.vue
@@ -0,0 +1,615 @@
+<script setup lang="ts">
+import type {
+  AttachmentsProps,
+  BubbleListProps,
+  ConversationsProps,
+  PromptsProps,
+} from 'ant-design-x-vue';
+
+import type { VNode } from 'vue';
+
+import { computed, h, onMounted, ref, watch } from 'vue';
+
+import {
+  CloudUploadOutlined,
+  CommentOutlined,
+  CopyOutlined,
+  DeleteOutlined,
+  EllipsisOutlined,
+  FireOutlined,
+  HeartOutlined,
+  PaperClipOutlined,
+  PlusOutlined,
+  ReadOutlined,
+  ShareAltOutlined,
+  SmileOutlined,
+  SyncOutlined,
+} from '@ant-design/icons-vue';
+import VueOfficePptx from '@vue-office/pptx';
+import {
+  Badge,
+  Button,
+  Flex,
+  message,
+  Space,
+  theme,
+  Typography,
+} from 'ant-design-vue';
+import {
+  Attachments,
+  Bubble,
+  Conversations,
+  Prompts,
+  Sender,
+  useXAgent,
+  useXChat,
+  Welcome,
+} from 'ant-design-x-vue';
+
+import { getChatList, sendWorkflow } from '#/api';
+
+defineOptions({ name: 'PlaygroundIndependentSetup' });
+
+const { token } = theme.useToken();
+
+const styles = computed(() => {
+  return {
+    layout: {
+      width: '100%',
+      'min-width': '1000px',
+      height: '722px',
+      'border-radius': `${token.value.borderRadius}px`,
+      display: 'flex',
+      background: `${token.value.colorBgContainer}`,
+      'font-family': `AlibabaPuHuiTi, ${token.value.fontFamily}, sans-serif`,
+    },
+    menu: {
+      background: `${token.value.colorBgLayout}80`,
+      width: '280px',
+      height: '100%',
+      display: 'flex',
+      'flex-direction': 'column',
+    },
+    conversations: {
+      padding: '0 12px',
+      flex: 1,
+      'overflow-y': 'auto',
+    },
+    chat: {
+      height: '100%',
+      width: '100%',
+      'max-width': '700px',
+      margin: '0 auto',
+      'box-sizing': 'border-box',
+      display: 'flex',
+      'flex-direction': 'column',
+      padding: `${token.value.paddingLG}px`,
+      gap: '16px',
+    },
+    messages: {
+      flex: 1,
+    },
+    placeholder: {
+      'padding-top': '32px',
+      'text-align': 'left',
+      flex: 1,
+    },
+    sender: {
+      'box-shadow': token.value.boxShadow,
+    },
+    logo: {
+      display: 'flex',
+      height: '72px',
+      'align-items': 'center',
+      'justify-content': 'start',
+      padding: '0 24px',
+      'box-sizing': 'border-box',
+    },
+    'logo-img': {
+      width: '24px',
+      height: '24px',
+      display: 'inline-block',
+    },
+    'logo-span': {
+      display: 'inline-block',
+      margin: '0 8px',
+      'font-weight': 'bold',
+      color: token.value.colorText,
+      'font-size': '16px',
+    },
+    addBtn: {
+      background: '#1677ff0f',
+      border: '1px solid #1677ff34',
+      width: 'calc(100% - 24px)',
+      margin: '0 12px 24px 12px',
+    },
+  } as const;
+});
+
+const pptx = ref<any>('/static/43b7da46a6ca47e5a9d7710d8dcf499c.pptx');
+
+const [messageApi, contextHolder] = message.useMessage();
+
+const menuConfig: ConversationsProps['menu'] = (conversation) => ({
+  items: [
+    {
+      label: '删除此对话',
+      key: 'operation3',
+      icon: h(DeleteOutlined),
+      danger: true,
+    },
+  ],
+  onClick: (menuInfo) => {
+    messageApi.info(`Click ${conversation.key} - ${menuInfo.key}`);
+  },
+});
+
+const acticeModeKey = ref('1');
+
+// 定义模板数据
+const templates = ref([
+  { label: '模板1', key: '1' },
+  { label: '模板2', key: '2' },
+  { label: '模板3', key: '3' },
+  { label: '模板34', key: '4' },
+  { label: '模板35', key: '5' },
+  { label: '模板36', key: '7' },
+  { label: '模板37', key: '8' },
+  { label: '模板38', key: '9' },
+]);
+
+// const sleep = () => new Promise(resolve => setTimeout(resolve, 500))
+
+function renderTitle(icon: VNode, title: string) {
+  return h(Space, { align: 'start' }, [icon, h('span', title)]);
+}
+
+const defaultConversationsItems = [
+  {
+    key: '0',
+    label: 'What is Ant Design X?',
+  },
+];
+
+const placeholderPromptsItems: PromptsProps['items'] = [
+  {
+    key: '1',
+    label: renderTitle(
+      h(FireOutlined, { style: { color: '#FF4D4F' } }),
+      'Hot Topics',
+    ),
+    description: 'What are you interested in?',
+    children: [
+      {
+        key: '1-1',
+        description: `What's new in X?`,
+      },
+      {
+        key: '1-2',
+        description: `What's AGI?`,
+      },
+      {
+        key: '1-3',
+        description: `Where is the doc?`,
+      },
+    ],
+  },
+  {
+    key: '2',
+    label: renderTitle(
+      h(ReadOutlined, { style: { color: '#1890FF' } }),
+      'Design Guide',
+    ),
+    description: 'How to design a good product?',
+    children: [
+      {
+        key: '2-1',
+        icon: h(HeartOutlined),
+        description: `Know the well`,
+      },
+      {
+        key: '2-2',
+        icon: h(SmileOutlined),
+        description: `Set the AI role`,
+      },
+      {
+        key: '2-3',
+        icon: h(CommentOutlined),
+        description: `Express the feeling`,
+      },
+    ],
+  },
+];
+
+const senderPromptsItems: PromptsProps['items'] = [
+  {
+    key: '1',
+    description: 'Hot Topics',
+    icon: h(FireOutlined, { style: { color: '#FF4D4F' } }),
+  },
+  {
+    key: '2',
+    description: 'Design Guide',
+    icon: h(ReadOutlined, { style: { color: '#1890FF' } }),
+  },
+];
+
+const roles: BubbleListProps['roles'] = {
+  ai: {
+    placement: 'start',
+    typing: { step: 5, interval: 20 },
+    styles: {
+      content: {
+        borderRadius: '16px',
+      },
+    },
+  },
+  local: {
+    placement: 'end',
+    variant: 'shadow',
+  },
+};
+
+// ==================== State ====================
+const headerOpen = ref(false);
+const content = ref('');
+const conversationsItems = ref(defaultConversationsItems);
+const activeKey = ref(defaultConversationsItems[0]?.key);
+const attachedFiles = ref<AttachmentsProps['items']>([]);
+const agentRequestLoading = ref(false);
+
+// ==================== Runtime ====================
+const [agent] = useXAgent({
+  request: async ({ message }, { onSuccess }) => {
+    agentRequestLoading.value = true;
+    const res = await sendWorkflow(
+      {
+        appid: 'baca08c1-e92b-4dc9-a445-3584803f54d4',
+      },
+      {
+        userId: '1563',
+        conversationId: '',
+        files: [],
+        inputs: {
+          declarationDoc: message,
+        },
+      },
+    );
+    agentRequestLoading.value = false;
+    if (res.data.data.outputs.result) {
+      onSuccess(`下载链接:${res.data.data.outputs.result}`);
+      const url = new URL(res.data.data.outputs.result);
+      pptx.value = url.pathname;
+    } else {
+      onSuccess('发生异常，可以输入更多信息再让我来回答或重试。');
+    }
+  },
+});
+
+const { onRequest, messages, setMessages } = useXChat({
+  agent: agent?.value,
+});
+
+watch(
+  activeKey,
+  () => {
+    if (activeKey.value !== undefined) {
+      setMessages([]);
+    }
+  },
+  { immediate: true },
+);
+
+// ==================== Event ====================
+function onSubmit(nextContent: string) {
+  if (!nextContent) return;
+  onRequest(nextContent);
+  // sendMessage(nextContent)
+  content.value = '';
+}
+
+const onPromptsItemClick: PromptsProps['onItemClick'] = (info) => {
+  onRequest(info.data.description as string);
+};
+
+function onAddConversation() {
+  conversationsItems.value = [
+    ...conversationsItems.value,
+    {
+      key: `${conversationsItems.value.length}`,
+      label: `New Conversation ${conversationsItems.value.length}`,
+    },
+  ];
+  activeKey.value = `${conversationsItems.value.length}`;
+}
+
+const onConversationClick: ConversationsProps['onActiveChange'] = (key) => {
+  activeKey.value = key;
+};
+
+const handleFileChange: AttachmentsProps['onChange'] = (info) =>
+  (attachedFiles.value = info.fileList);
+
+// ==================== Nodes ====================
+const placeholderNode = computed(() =>
+  h(
+    Space,
+    { direction: 'vertical', size: 16, style: styles.value.placeholder },
+    [
+      h(Welcome, {
+        variant: 'borderless',
+        icon: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp',
+        title: "Hello, I'm Ant Design X",
+        description:
+          'Base on Ant Design, AGI product interface solution, create a better intelligent vision~',
+        extra: h(Space, {}, [
+          h(Button, { icon: h(ShareAltOutlined) }),
+          h(Button, { icon: h(EllipsisOutlined) }),
+        ]),
+      }),
+      h(Prompts, {
+        title: 'Do you want?',
+        items: placeholderPromptsItems,
+        styles: {
+          list: {
+            width: '100%',
+          },
+          item: {
+            flex: 1,
+          },
+        },
+        onItemClick: onPromptsItemClick,
+      }),
+    ],
+  ),
+);
+
+const items = computed<BubbleListProps['items']>(() => {
+  if (messages.value.length === 0) {
+    return [{ content: placeholderNode, variant: 'borderless' }];
+  }
+  return messages.value.map(({ id, message, status }) => ({
+    key: id,
+    loading: status === 'loading',
+    role: status === 'local' ? 'local' : 'ai',
+    content: message,
+  }));
+});
+
+// 自定义代码
+
+// 获取会话记录
+const getConversationList = async () => {
+  const res = await getChatList(
+    {
+      appid: '363b9580-ae60-4a40-ae7d-ec434e86e326',
+    },
+    {
+      userId: '1563',
+      lastId: '',
+      sortBy: '',
+      limit: '5',
+    },
+  );
+  if (res.status === 200) {
+    conversationsItems.value = res.data.map((item: any) => {
+      return {
+        key: item.id,
+        label: item.name,
+      };
+    });
+    activeKey.value = res.data.data[0].id;
+  }
+};
+
+const showQuoteButton = ref(false);
+const selectedText = ref('');
+const quoteButtonStyle = ref({
+  position: 'absolute',
+  top: '0',
+  left: '0',
+  display: 'none',
+});
+
+const handleTextSelection = (event: any) => {
+  const selection = window.getSelection();
+  if (selection && selection.toString().trim() !== '') {
+    selectedText.value = selection.toString();
+
+    // 获取鼠标位置
+    const mouseX = event.pageX;
+    const mouseY = event.pageY;
+
+    // 设置按钮位置
+    quoteButtonStyle.value = {
+      position: 'fixed',
+      top: `${mouseY}px`,
+      left: `${mouseX}px`,
+      display: 'block',
+    };
+
+    showQuoteButton.value = true;
+  } else {
+    showQuoteButton.value = false;
+  }
+};
+
+const handleQuoteClick = () => {
+  // 处理引用逻辑，比如将选中的文本添加到引用框中
+  content.value = selectedText.value;
+  showQuoteButton.value = false;
+};
+
+// 定义 pptx 的样式
+const pptStyle = ref({
+  height: 'calc(100vh - 150px)',
+  width: '40%',
+  margin: '30px 20px',
+});
+
+// 监听窗口大小变化
+const handleResize = () => {
+  // 动态调整宽度和高度
+  pptStyle.value = {
+    height: 'calc(100vh - 150px)', // 保持高度不变
+    width: '40%', // 宽度为窗口宽度的 40%
+    margin: '30px 20px',
+  };
+};
+
+// 监听模板选择事件
+const onModeClick: ConversationsProps['onActiveChange'] = (key) => {
+  acticeModeKey.value = key;
+};
+
+const renderedHandler = () => {
+  console.warn('渲染完成');
+};
+const errorHandler = () => {
+  console.error('渲染失败');
+};
+
+onMounted(() => {
+  getConversationList();
+  window.addEventListener('resize', handleResize);
+});
+</script>
+
+<template>
+  <contextHolder />
+  <div :style="styles.layout" style="height: calc(100vh - 70px)">
+    <div :style="styles.menu">
+      <!-- 🌟 Logo -->
+      <div :style="styles.logo">
+        <img
+          src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*eco6RrQhxbMAAAAAAAAAAAAADgCCAQ/original"
+          draggable="false"
+          alt="logo"
+          :style="styles['logo-img']"
+        />
+        <span :style="styles['logo-span']">PPT模板生成</span>
+      </div>
+
+      <!-- 🌟 添加会话 -->
+      <Button type="link" :style="styles.addBtn" @click="onAddConversation">
+        <PlusOutlined />
+        新建会话
+      </Button>
+
+      <!-- 🌟 会话管理 -->
+      <Conversations
+        :items="conversationsItems"
+        :style="styles.conversations"
+        :active-key="activeKey"
+        :menu="menuConfig"
+        @active-change="onConversationClick"
+      />
+
+      <!-- 🌟 会话管理 -->
+      <Typography.Title :level="5" style="margin: 0 0 8px">
+        选择模板
+      </Typography.Title>
+      <Conversations
+        :items="templates"
+        :style="styles.conversations"
+        :active-key="acticeModeKey"
+        :menu="menuConfig"
+        @active-change="onModeClick"
+      />
+    </div>
+
+    <div :style="styles.chat" style="margin-left: 20px">
+      <!-- 🌟 消息列表 -->
+      <Bubble.List
+        :items="items"
+        :roles="roles"
+        :style="styles.messages"
+        @mouseup="handleTextSelection"
+      >
+        <template #footer>
+          <Space :size="token.paddingXXS">
+            <Button type="text" size="small" :icon="h(SyncOutlined)" />
+            <Button type="text" size="small" :icon="h(CopyOutlined)" />
+          </Space>
+        </template>
+      </Bubble.List>
+
+      <a-button
+        v-if="showQuoteButton"
+        :style="quoteButtonStyle"
+        @click="handleQuoteClick"
+      >
+        引用
+      </a-button>
+
+      <!-- 🌟 提示词 -->
+      <Prompts :items="senderPromptsItems" @item-click="onPromptsItemClick" />
+
+      <!-- 🌟 输入框 -->
+      <Sender
+        :value="content"
+        :style="styles.sender"
+        :loading="agentRequestLoading"
+        @submit="onSubmit"
+        @change="(value) => (content = value)"
+      >
+        <template #prefix>
+          <Badge :dot="attachedFiles.length > 0 && !headerOpen">
+            <Button type="text" @click="() => (headerOpen = !headerOpen)">
+              <template #icon>
+                <PaperClipOutlined />
+              </template>
+            </Button>
+          </Badge>
+        </template>
+
+        <template #header>
+          <Sender.Header
+            title="Attachments"
+            :open="headerOpen"
+            :styles="{ content: { padding: 0 } }"
+            @open-change="(open) => (headerOpen = open)"
+          >
+            <Attachments
+              :before-upload="() => false"
+              :items="attachedFiles"
+              @change="handleFileChange"
+            >
+              <template #placeholder="type">
+                <Flex
+                  v-if="type && type.type === 'inline'"
+                  align="center"
+                  justify="center"
+                  vertical
+                  gap="2"
+                >
+                  <Typography.Text style="font-size: 30px; line-height: 1">
+                    <CloudUploadOutlined />
+                  </Typography.Text>
+                  <Typography.Title
+                    :level="5"
+                    style="margin: 0; font-size: 14px; line-height: 1.5"
+                  >
+                    Upload files
+                  </Typography.Title>
+                  <Typography.Text type="secondary">
+                    Click or drag files to this area to upload
+                  </Typography.Text>
+                </Flex>
+                <Typography.Text v-if="type && type.type === 'drop'">
+                  Drop file here
+                </Typography.Text>
+              </template>
+            </Attachments>
+          </Sender.Header>
+        </template>
+      </Sender>
+    </div>
+    <VueOfficePptx
+      :src="pptx"
+      :style="pptStyle"
+      @rendered="renderedHandler"
+      @error="errorHandler"
+    />
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/spider/index.vue b/apps/web-antd/src/views/spider/index.vue
index 6c2533e..5aed1d4 100644
--- a/apps/web-antd/src/views/spider/index.vue
+++ b/apps/web-antd/src/views/spider/index.vue
@@ -11,7 +11,7 @@ const spiderList = ref<SpiderItem[]>([]);
 const loading = ref(true);
 const spider = ref<SpiderItem>();
 
-const getChatflowList = async () => {
+const getFlowList = async () => {
   const res = await getAppList({});
   if (res) {
     spiderList.value = res;
@@ -24,7 +24,7 @@ function handleClick(item: SpiderItem) {
 }
 
 onMounted(() => {
-  getChatflowList();
+  getFlowList();
 });
 </script>
 
diff --git a/apps/web-antd/src/views/spider/index2.vue b/apps/web-antd/src/views/spider/index2.vue
deleted file mode 100644
index fb723e2..0000000
--- a/apps/web-antd/src/views/spider/index2.vue
+++ /dev/null
@@ -1,210 +0,0 @@
-<script setup lang="js">
-import { onMounted, ref } from 'vue';
-
-import { getAppList, sendWorkflow } from '#/api';
-
-// 数据爬取工具列表
-const tools = ref([
-  {
-    id: 1,
-    name: '工具一',
-    description: '这是一个用于抓取网页数据的工具',
-    content: '工具一的具体内容：支持多种网页抓取规则配置。',
-    path: '/tools/tool1',
-  },
-  {
-    id: 2,
-    name: '工具二',
-    description: '这是一个用于分析文本数据的工具',
-    content: '工具二的具体内容：支持自然语言处理和文本分析功能。',
-    path: '/tools/tool2',
-  },
-  {
-    id: 3,
-    name: '工具三',
-    description: '这是一个用于数据清洗的工具',
-    content: '工具三的具体内容：支持数据去重、格式化等操作。',
-    path: '/tools/tool3',
-  },
-]);
-
-// 当前选中的工具
-const selectedTool = ref(null);
-
-// 抓取状态相关变量
-const isFetching = ref(false);
-const fetchStatus = ref('idle'); // idle | fetching | completed
-
-// 保存抓取结果
-const fetchResult = ref(null);
-
-// 点击工具项时触发
-const selectTool = (tool) => {
-  selectedTool.value = tool;
-  fetchStatus.value = 'idle'; // 重置抓取状态
-};
-
-const getChatflowList = async () => {
-  try {
-    const res = await getAppList({
-      mode: '',
-      name: '',
-    });
-    tools.value = res;
-  } catch (error) {
-    console.error(error);
-  }
-};
-
-// 开始抓取逻辑
-const startFetching = async () => {
-  if (!selectedTool.value) return;
-
-  // 更新状态为“抓取中”
-  isFetching.value = true;
-  fetchStatus.value = 'fetching';
-
-  try {
-    const res = await sendWorkflow(
-      {
-        appid: 'c736edd0-925d-4877-9223-56aab7342311',
-      },
-      {
-        userId: '1562',
-        conversationId: '',
-        files: [],
-        inputs: {},
-      },
-    );
-    // 保存抓取结果
-    fetchResult.value = res.data.outputs.result;
-  } catch (error) {
-    console.error(error);
-  }
-
-  // 模拟抓取完成
-  isFetching.value = false;
-  fetchStatus.value = 'completed';
-};
-
-// 下载文件逻辑
-const downloadFile = () => {
-  if (!fetchResult.value) return;
-
-  // 使用抓取结果作为文件内容
-  const fileName = `${selectedTool.value.name}.txt`;
-  const fileContent = fetchResult.value;
-
-  // 创建 Blob 对象
-  const blob = new Blob([fileContent], { type: 'text/plain' });
-
-  // 创建下载链接
-  const link = document.createElement('a');
-  link.href = URL.createObjectURL(blob);
-  link.download = fileName;
-
-  // 触发下载
-  link.click();
-
-  // 释放 URL 对象
-  URL.revokeObjectURL(link.href);
-};
-
-onMounted(() => {
-  getChatflowList();
-});
-</script>
-
-<template>
-  <a-layout>
-    <!-- 右侧部分开始 -->
-    <a-layout :style="{ height: '100vh' }">
-      <!-- 右侧页面主体开始 -->
-      <a-layout-content
-        :style="{
-          margin: '12px 10px',
-          padding: '18px',
-          background: '#fff',
-          minHeight: '280px',
-          borderRadius: '4px',
-        }"
-      >
-        <!-- 左右布局容器 -->
-        <a-row
-          :gutter="16"
-          :style="{ height: 'calc(100vh - 100px)', overflow: 'hidden' }"
-        >
-          <!-- 左边：数据爬取工具列表 -->
-          <a-col
-            :span="6"
-            :style="{
-              height: '100%',
-              overflowY: 'auto',
-              borderRight: '1px solid #e8e8e8',
-            }"
-          >
-            <a-card
-              title="数据爬取工具列表"
-              :bordered="false"
-              :style="{ height: '100%' }"
-            >
-              <a-list item-layout="horizontal" :data-source="tools">
-                <template #renderItem="{ item }">
-                  <a-list-item @click="selectTool(item)">
-                    <a-list-item-meta>
-                      <template #title>
-                        <span>{{ item.name }}</span>
-                      </template>
-                    </a-list-item-meta>
-                  </a-list-item>
-                </template>
-              </a-list>
-            </a-card>
-          </a-col>
-
-          <!-- 右边：所选工具的内容 -->
-          <a-col
-            :span="18"
-            :style="{
-              display: 'flex',
-              flexDirection: 'column',
-              justifyContent: 'flex-end',
-              height: '100%',
-            }"
-          >
-            <a-card
-              v-if="selectedTool"
-              title="工具"
-              :bordered="false"
-              :style="{ marginBottom: '20px' }"
-            >
-              <p>{{ selectedTool.name }}</p>
-
-              <!-- 抓取按钮和状态 -->
-              <div style="float: right; margin-top: 20px">
-                <a-button
-                  type="primary"
-                  style="margin-right: 12px"
-                  :loading="isFetching"
-                  @click="startFetching"
-                >
-                  开始抓取
-                </a-button>
-                <a-button
-                  type="primary"
-                  @click="downloadFile"
-                  v-if="fetchStatus === 'completed'"
-                >
-                  下载文件
-                </a-button>
-              </div>
-            </a-card>
-            <a-empty v-else description="请选择一个工具" />
-          </a-col>
-        </a-row>
-      </a-layout-content>
-      <!-- 右侧页面主体结束 -->
-    </a-layout>
-    <!-- 右侧部分结束 -->
-  </a-layout>
-</template>
diff --git a/apps/web-antd/src/views/word/index.vue b/apps/web-antd/src/views/word/index.vue
index 8bd564c..5aed1d4 100644
--- a/apps/web-antd/src/views/word/index.vue
+++ b/apps/web-antd/src/views/word/index.vue
@@ -1,635 +1,51 @@
-<script setup lang="ts">
-import type {
-  AttachmentsProps,
-  BubbleListProps,
-  ConversationsProps,
-  PromptsProps,
-} from 'ant-design-x-vue';
+<script lang="ts" setup>
+import type { SpiderItem } from '@vben/common-ui';
 
-import type { VNode } from 'vue';
+import { onMounted, ref } from 'vue';
 
-import { computed, h, onMounted, ref, watch } from 'vue';
+import { SpiderListView, SpiderWorkView } from '@vben/common-ui';
 
-import {
-  CloudUploadOutlined,
-  CommentOutlined,
-  DeleteOutlined,
-  EllipsisOutlined,
-  FireOutlined,
-  HeartOutlined,
-  PaperClipOutlined,
-  PlusOutlined,
-  ReadOutlined,
-  ShareAltOutlined,
-  SmileOutlined,
-} from '@ant-design/icons-vue';
-import VueOfficeDocx from '@vue-office/docx';
-import {
-  Badge,
-  Button,
-  Flex,
-  message,
-  Space,
-  theme,
-  Typography,
-} from 'ant-design-vue';
-import {
-  Attachments,
-  Bubble,
-  Conversations,
-  Prompts,
-  Sender,
-  useXAgent,
-  useXChat,
-  Welcome,
-} from 'ant-design-x-vue';
+import { getAppList, sendWorkflow } from '#/api';
 
-import { getChatList, sendChatflow } from '#/api';
+const spiderList = ref<SpiderItem[]>([]);
+const loading = ref(true);
+const spider = ref<SpiderItem>();
 
-import '@vue-office/docx/lib/index.css';
+const getFlowList = async () => {
+  const res = await getAppList({});
+  if (res) {
+    spiderList.value = res;
+    loading.value = false;
+  }
+};
 
-defineOptions({ name: 'PlaygroundIndependentSetup' });
-
-const { token } = theme.useToken();
-
-const styles = computed(() => {
-  return {
-    layout: {
-      width: '100%',
-      'min-width': '1000px',
-      height: '722px',
-      'border-radius': `${token.value.borderRadius}px`,
-      display: 'flex',
-      background: `${token.value.colorBgContainer}`,
-      'font-family': `AlibabaPuHuiTi, ${token.value.fontFamily}, sans-serif`,
-    },
-    menu: {
-      background: `${token.value.colorBgLayout}80`,
-      width: '280px',
-      height: '100%',
-      display: 'flex',
-      'flex-direction': 'column',
-    },
-    conversations: {
-      padding: '0 12px',
-      flex: 1,
-      'overflow-y': 'auto',
-    },
-    chat: {
-      height: '100%',
-      width: '100%',
-      'max-width': '700px',
-      margin: '0 auto',
-      'box-sizing': 'border-box',
-      display: 'flex',
-      'flex-direction': 'column',
-      padding: `${token.value.paddingLG}px`,
-      gap: '16px',
-    },
-    messages: {
-      flex: 1,
-    },
-    placeholder: {
-      'padding-top': '32px',
-      'text-align': 'left',
-      flex: 1,
-    },
-    sender: {
-      'box-shadow': token.value.boxShadow,
-    },
-    logo: {
-      display: 'flex',
-      height: '72px',
-      'align-items': 'center',
-      'justify-content': 'start',
-      padding: '0 24px',
-      'box-sizing': 'border-box',
-    },
-    'logo-img': {
-      width: '24px',
-      height: '24px',
-      display: 'inline-block',
-    },
-    'logo-span': {
-      display: 'inline-block',
-      margin: '0 8px',
-      'font-weight': 'bold',
-      color: token.value.colorText,
-      'font-size': '16px',
-    },
-    addBtn: {
-      background: '#1677ff0f',
-      border: '1px solid #1677ff34',
-      width: 'calc(100% - 24px)',
-      margin: '0 12px 24px 12px',
-    },
-  } as const;
-});
-
-const pptx = ref<any>('/static/e5230571-ef0b-4fa0-a91d-f05313e15c3f.docx');
-
-const [messageApi, contextHolder] = message.useMessage();
-
-// const footer = ref("<Space size={token.value.paddingXXS}> <Button type="text" size="small" icon={<SyncOutlined />} /> <Button type="text" size="small" icon={<CopyOutlined />} /> </Space>")
-
-const menuConfig: ConversationsProps['menu'] = (conversation) => ({
-  items: [
-    // {
-    //   label: 'Operation 1',
-    //   key: 'operation1',
-    //   icon: h(EditOutlined),
-    // },
-    // {
-    //   label: 'Operation 2',
-    //   key: 'operation2',
-    //   icon: h(StopOutlined),
-    //   disabled: true,
-    // },
-    {
-      label: '删除此对话',
-      key: 'operation3',
-      icon: h(DeleteOutlined),
-      danger: true,
-    },
-  ],
-  onClick: (menuInfo) => {
-    messageApi.info(`Click ${conversation.key} - ${menuInfo.key}`);
-  },
-});
-
-// const sleep = () => new Promise(resolve => setTimeout(resolve, 500))
-
-function renderTitle(icon: VNode, title: string) {
-  return h(Space, { align: 'start' }, [icon, h('span', title)]);
+function handleClick(item: SpiderItem) {
+  spider.value = item;
 }
 
-const defaultConversationsItems = [
-  {
-    key: '0',
-    label: 'What is Ant Design X?',
-  },
-];
-
-const placeholderPromptsItems: PromptsProps['items'] = [
-  {
-    key: '1',
-    label: renderTitle(
-      h(FireOutlined, { style: { color: '#FF4D4F' } }),
-      'Hot Topics',
-    ),
-    description: 'What are you interested in?',
-    children: [
-      {
-        key: '1-1',
-        description: `What's new in X?`,
-      },
-      {
-        key: '1-2',
-        description: `What's AGI?`,
-      },
-      {
-        key: '1-3',
-        description: `Where is the doc?`,
-      },
-    ],
-  },
-  {
-    key: '2',
-    label: renderTitle(
-      h(ReadOutlined, { style: { color: '#1890FF' } }),
-      'Design Guide',
-    ),
-    description: 'How to design a good product?',
-    children: [
-      {
-        key: '2-1',
-        icon: h(HeartOutlined),
-        description: `Know the well`,
-      },
-      {
-        key: '2-2',
-        icon: h(SmileOutlined),
-        description: `Set the AI role`,
-      },
-      {
-        key: '2-3',
-        icon: h(CommentOutlined),
-        description: `Express the feeling`,
-      },
-    ],
-  },
-];
-
-const senderPromptsItems: PromptsProps['items'] = [
-  {
-    key: '1',
-    description: 'Hot Topics',
-    icon: h(FireOutlined, { style: { color: '#FF4D4F' } }),
-  },
-  {
-    key: '2',
-    description: 'Design Guide',
-    icon: h(ReadOutlined, { style: { color: '#1890FF' } }),
-  },
-];
-
-const roles: BubbleListProps['roles'] = {
-  ai: {
-    placement: 'start',
-    typing: { step: 5, interval: 20 },
-    styles: {
-      content: {
-        borderRadius: '16px',
-      },
-    },
-  },
-  local: {
-    placement: 'end',
-    variant: 'shadow',
-  },
-};
-
-// ==================== State ====================
-const headerOpen = ref(false);
-const content = ref('');
-const conversationsItems = ref(defaultConversationsItems);
-const activeKey = ref(defaultConversationsItems[0]?.key);
-const acticeModeKey = ref('1');
-const attachedFiles = ref<AttachmentsProps['items']>([]);
-const agentRequestLoading = ref(false);
-// 定义项目名称
-const projectName = ref('');
-
-// ==================== Runtime ====================
-const [agent] = useXAgent({
-  request: async ({ message }, { onSuccess }) => {
-    agentRequestLoading.value = true;
-    const res = await sendChatflow(
-      {
-        appid: 'baca08c1-e92b-4dc9-a445-3584803f54d4',
-      },
-      {
-        userId: '1562',
-        conversationId: '',
-        files: [],
-        inputs: {
-          projectName: projectName.value,
-        },
-        content: message || '',
-      },
-    );
-    agentRequestLoading.value = false;
-    if (res.data.answer) {
-      onSuccess(res.data.answer);
-      const url = new URL(res.data.answer);
-      pptx.value = url.pathname;
-    } else {
-      onSuccess('发生异常，可以输入更多信息再让我来回答或重试。');
-    }
-  },
-});
-
-const { onRequest, messages, setMessages } = useXChat({
-  agent: agent?.value,
-});
-
-watch(
-  activeKey,
-  () => {
-    if (activeKey.value !== undefined) {
-      setMessages([]);
-    }
-  },
-  { immediate: true },
-);
-
-// ==================== Event ====================
-function onSubmit(nextContent: string) {
-  if (!nextContent) return;
-  if (projectName.value === '') {
-    message.error('请输入项目名称');
-    return;
-  }
-  onRequest(nextContent);
-  // sendMessage(nextContent)
-  content.value = '';
-}
-
-const onPromptsItemClick: PromptsProps['onItemClick'] = (info) => {
-  onRequest(info.data.description as string);
-};
-
-function onAddConversation() {
-  conversationsItems.value = [
-    ...conversationsItems.value,
-    {
-      key: `${conversationsItems.value.length}`,
-      label: `New Conversation ${conversationsItems.value.length}`,
-    },
-  ];
-  activeKey.value = `${conversationsItems.value.length}`;
-}
-
-const onConversationClick: ConversationsProps['onActiveChange'] = (key) => {
-  activeKey.value = key;
-};
-
-const handleFileChange: AttachmentsProps['onChange'] = (info) =>
-  (attachedFiles.value = info.fileList);
-
-// ==================== Nodes ====================
-const placeholderNode = computed(() =>
-  h(
-    Space,
-    { direction: 'vertical', size: 16, style: styles.value.placeholder },
-    [
-      h(Welcome, {
-        variant: 'borderless',
-        icon: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp',
-        title: "Hello, I'm Ant Design X",
-        description:
-          'Base on Ant Design, AGI product interface solution, create a better intelligent vision~',
-        extra: h(Space, {}, [
-          h(Button, { icon: h(ShareAltOutlined) }),
-          h(Button, { icon: h(EllipsisOutlined) }),
-        ]),
-      }),
-      h(Prompts, {
-        title: 'Do you want?',
-        items: placeholderPromptsItems,
-        styles: {
-          list: {
-            width: '100%',
-          },
-          item: {
-            flex: 1,
-          },
-        },
-        onItemClick: onPromptsItemClick,
-      }),
-    ],
-  ),
-);
-
-const items = computed<BubbleListProps['items']>(() => {
-  if (messages.value.length === 0) {
-    return [{ content: placeholderNode, variant: 'borderless' }];
-  }
-  return messages.value.map(({ id, message, status }) => ({
-    key: id,
-    loading: status === 'loading',
-    role: status === 'local' ? 'local' : 'ai',
-    content: message,
-  }));
-});
-
-// 自定义代码
-
-// 获取会话记录
-const getConversationList = async () => {
-  const res = await getChatList(
-    {
-      appid: '363b9580-ae60-4a40-ae7d-ec434e86e326',
-    },
-    {
-      userId: '1562',
-      lastId: '4dfa17e1-364a-4c98-af5d-1109c8f28212',
-      sortBy: '',
-      limit: '5',
-    },
-  );
-  if (res.status === 200) {
-    conversationsItems.value = res.data.data.map((item: any) => {
-      return {
-        key: item.id,
-        label: item.name,
-      };
-    });
-    activeKey.value = res.data.data[0].id;
-  }
-};
-
-const showQuoteButton = ref(false);
-const selectedText = ref('');
-const quoteButtonStyle = ref({
-  position: 'absolute',
-  top: '0',
-  left: '0',
-  display: 'none',
-});
-
-const handleTextSelection = (event: any) => {
-  const selection = window.getSelection();
-  if (selection && selection.toString().trim() !== '') {
-    selectedText.value = selection.toString();
-
-    // 获取鼠标位置
-    const mouseX = event.pageX;
-    const mouseY = event.pageY;
-
-    // 设置按钮位置
-    quoteButtonStyle.value = {
-      position: 'fixed',
-      top: `${mouseY}px`,
-      left: `${mouseX}px`,
-      display: 'block',
-    };
-
-    showQuoteButton.value = true;
-  } else {
-    showQuoteButton.value = false;
-  }
-};
-
-const handleQuoteClick = () => {
-  // 处理引用逻辑，比如将选中的文本添加到引用框中
-  content.value = selectedText.value;
-  showQuoteButton.value = false;
-};
-
-// 定义模板数据
-const templates = ref([
-  { label: '模板1', key: '1' },
-  { label: '模板2', key: '2' },
-  { label: '模板3', key: '3' },
-  { label: '模板34', key: '4' },
-  { label: '模板35', key: '5' },
-  { label: '模板36', key: '7' },
-  { label: '模板37', key: '8' },
-  { label: '模板38', key: '9' },
-]);
-
-// 监听模板选择事件
-const onModeClick: ConversationsProps['onActiveChange'] = (key) => {
-  acticeModeKey.value = key;
-};
-
-// 定义 pptx 的样式
-const pptStyle = ref({
-  height: 'calc(100vh - 150px) !import',
-  width: '40%',
-  margin: '30px 20px',
-});
-
-// 监听窗口大小变化
-const handleResize = () => {
-  // 动态调整宽度和高度
-  pptStyle.value = {
-    height: 'calc(100vh - 150px)', // 保持高度不变
-    width: '40%', // 宽度为窗口宽度的 40%
-    margin: '30px 20px',
-  };
-};
-
-const renderedHandler = () => {
-  console.warn('渲染完成');
-};
-const errorHandler = () => {
-  console.error('渲染失败');
-};
-
 onMounted(() => {
-  getConversationList();
-  window.addEventListener('resize', handleResize);
+  getFlowList();
 });
 </script>
 
 <template>
-  <contextHolder />
-  <div :style="styles.layout" style="height: calc(100vh - 70px)">
-    <div :style="styles.menu">
-      <!-- 🌟 Logo -->
-      <div :style="styles.logo">
-        <img
-          src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*eco6RrQhxbMAAAAAAAAAAAAADgCCAQ/original"
-          draggable="false"
-          alt="logo"
-          :style="styles['logo-img']"
+  <div class="px-5">
+    <div class="mt-5 flex flex-col lg:flex-row">
+      <div class="mr-4 w-full lg:w-1/4">
+        <SpiderListView
+          :loading="loading"
+          :items="spiderList"
+          title="数据爬取工具"
+          @click="handleClick"
+        />
+      </div>
+      <div class="w-full lg:w-3/4">
+        <SpiderWorkView
+          :item="spider"
+          :run-spider="sendWorkflow"
+          title="目标网址："
         />
-        <span :style="styles['logo-span']">Word文档生成</span>
       </div>
-
-      <!-- 🌟 添加会话 -->
-      <Button type="link" :style="styles.addBtn" @click="onAddConversation">
-        <PlusOutlined />
-        新建会话
-      </Button>
-
-      <!-- 🌟 会话管理 -->
-      <Conversations
-        :items="conversationsItems"
-        :style="styles.conversations"
-        :active-key="activeKey"
-        :menu="menuConfig"
-        @active-change="onConversationClick"
-      />
-      <!-- 🌟 会话管理 -->
-      <Typography.Title :level="5" style="margin: 0 0 8px">
-        选择模板
-      </Typography.Title>
-      <Conversations
-        :items="templates"
-        :style="styles.conversations"
-        :active-key="acticeModeKey"
-        :menu="menuConfig"
-        @active-change="onModeClick"
-      />
-
-      <!-- 🌟 项目名称输入 -->
-      <Typography.Title :level="5" style="margin: 16px 0 8px">
-        项目名称
-      </Typography.Title>
-      <a-input
-        v-model:value="projectName"
-        placeholder="请输入项目名称"
-        :style="{ margin: '10px 5%', padding: '0 8px', width: '90%' }"
-      />
     </div>
-
-    <div :style="styles.chat" style="margin-left: 20px">
-      <!-- 🌟 消息列表 -->
-      <Bubble.List
-        :items="items"
-        :roles="roles"
-        :style="styles.messages"
-        @mouseup="handleTextSelection"
-      />
-
-      <a-button
-        v-if="showQuoteButton"
-        :style="quoteButtonStyle"
-        @click="handleQuoteClick"
-      >
-        引用
-      </a-button>
-
-      <!-- 🌟 提示词 -->
-      <Prompts :items="senderPromptsItems" @item-click="onPromptsItemClick" />
-
-      <!-- 🌟 输入框 -->
-      <Sender
-        :value="content"
-        :style="styles.sender"
-        :loading="agentRequestLoading"
-        @submit="onSubmit"
-        @change="(value) => (content = value)"
-      >
-        <template #prefix>
-          <Badge :dot="attachedFiles.length > 0 && !headerOpen">
-            <Button type="text" @click="() => (headerOpen = !headerOpen)">
-              <template #icon>
-                <PaperClipOutlined />
-              </template>
-            </Button>
-          </Badge>
-        </template>
-
-        <template #header>
-          <Sender.Header
-            title="Attachments"
-            :open="headerOpen"
-            :styles="{ content: { padding: 0 } }"
-            @open-change="(open) => (headerOpen = open)"
-          >
-            <Attachments
-              :before-upload="() => false"
-              :items="attachedFiles"
-              @change="handleFileChange"
-            >
-              <template #placeholder="type">
-                <Flex
-                  v-if="type && type.type === 'inline'"
-                  justify="center"
-                  vertical
-                  gap="2"
-                >
-                  <Typography.Text style="font-size: 30px; line-height: 1">
-                    <CloudUploadOutlined />
-                  </Typography.Text>
-                  <Typography.Title
-                    :level="5"
-                    style="margin: 0; font-size: 14px; line-height: 1.5"
-                  >
-                    Upload files
-                  </Typography.Title>
-                  <Typography.Text type="secondary">
-                    Click or drag files to this area to upload
-                  </Typography.Text>
-                </Flex>
-                <Typography.Text v-if="type && type.type === 'drop'">
-                  Drop file here
-                </Typography.Text>
-              </template>
-            </Attachments>
-          </Sender.Header>
-        </template>
-      </Sender>
-    </div>
-    <VueOfficeDocx
-      :src="pptx"
-      :style="pptStyle"
-      @rendered="renderedHandler"
-      @error="errorHandler"
-    />
   </div>
 </template>
diff --git a/apps/web-antd/src/views/word/index2.vue b/apps/web-antd/src/views/word/index2.vue
new file mode 100644
index 0000000..8bd564c
--- /dev/null
+++ b/apps/web-antd/src/views/word/index2.vue
@@ -0,0 +1,635 @@
+<script setup lang="ts">
+import type {
+  AttachmentsProps,
+  BubbleListProps,
+  ConversationsProps,
+  PromptsProps,
+} from 'ant-design-x-vue';
+
+import type { VNode } from 'vue';
+
+import { computed, h, onMounted, ref, watch } from 'vue';
+
+import {
+  CloudUploadOutlined,
+  CommentOutlined,
+  DeleteOutlined,
+  EllipsisOutlined,
+  FireOutlined,
+  HeartOutlined,
+  PaperClipOutlined,
+  PlusOutlined,
+  ReadOutlined,
+  ShareAltOutlined,
+  SmileOutlined,
+} from '@ant-design/icons-vue';
+import VueOfficeDocx from '@vue-office/docx';
+import {
+  Badge,
+  Button,
+  Flex,
+  message,
+  Space,
+  theme,
+  Typography,
+} from 'ant-design-vue';
+import {
+  Attachments,
+  Bubble,
+  Conversations,
+  Prompts,
+  Sender,
+  useXAgent,
+  useXChat,
+  Welcome,
+} from 'ant-design-x-vue';
+
+import { getChatList, sendChatflow } from '#/api';
+
+import '@vue-office/docx/lib/index.css';
+
+defineOptions({ name: 'PlaygroundIndependentSetup' });
+
+const { token } = theme.useToken();
+
+const styles = computed(() => {
+  return {
+    layout: {
+      width: '100%',
+      'min-width': '1000px',
+      height: '722px',
+      'border-radius': `${token.value.borderRadius}px`,
+      display: 'flex',
+      background: `${token.value.colorBgContainer}`,
+      'font-family': `AlibabaPuHuiTi, ${token.value.fontFamily}, sans-serif`,
+    },
+    menu: {
+      background: `${token.value.colorBgLayout}80`,
+      width: '280px',
+      height: '100%',
+      display: 'flex',
+      'flex-direction': 'column',
+    },
+    conversations: {
+      padding: '0 12px',
+      flex: 1,
+      'overflow-y': 'auto',
+    },
+    chat: {
+      height: '100%',
+      width: '100%',
+      'max-width': '700px',
+      margin: '0 auto',
+      'box-sizing': 'border-box',
+      display: 'flex',
+      'flex-direction': 'column',
+      padding: `${token.value.paddingLG}px`,
+      gap: '16px',
+    },
+    messages: {
+      flex: 1,
+    },
+    placeholder: {
+      'padding-top': '32px',
+      'text-align': 'left',
+      flex: 1,
+    },
+    sender: {
+      'box-shadow': token.value.boxShadow,
+    },
+    logo: {
+      display: 'flex',
+      height: '72px',
+      'align-items': 'center',
+      'justify-content': 'start',
+      padding: '0 24px',
+      'box-sizing': 'border-box',
+    },
+    'logo-img': {
+      width: '24px',
+      height: '24px',
+      display: 'inline-block',
+    },
+    'logo-span': {
+      display: 'inline-block',
+      margin: '0 8px',
+      'font-weight': 'bold',
+      color: token.value.colorText,
+      'font-size': '16px',
+    },
+    addBtn: {
+      background: '#1677ff0f',
+      border: '1px solid #1677ff34',
+      width: 'calc(100% - 24px)',
+      margin: '0 12px 24px 12px',
+    },
+  } as const;
+});
+
+const pptx = ref<any>('/static/e5230571-ef0b-4fa0-a91d-f05313e15c3f.docx');
+
+const [messageApi, contextHolder] = message.useMessage();
+
+// const footer = ref("<Space size={token.value.paddingXXS}> <Button type="text" size="small" icon={<SyncOutlined />} /> <Button type="text" size="small" icon={<CopyOutlined />} /> </Space>")
+
+const menuConfig: ConversationsProps['menu'] = (conversation) => ({
+  items: [
+    // {
+    //   label: 'Operation 1',
+    //   key: 'operation1',
+    //   icon: h(EditOutlined),
+    // },
+    // {
+    //   label: 'Operation 2',
+    //   key: 'operation2',
+    //   icon: h(StopOutlined),
+    //   disabled: true,
+    // },
+    {
+      label: '删除此对话',
+      key: 'operation3',
+      icon: h(DeleteOutlined),
+      danger: true,
+    },
+  ],
+  onClick: (menuInfo) => {
+    messageApi.info(`Click ${conversation.key} - ${menuInfo.key}`);
+  },
+});
+
+// const sleep = () => new Promise(resolve => setTimeout(resolve, 500))
+
+function renderTitle(icon: VNode, title: string) {
+  return h(Space, { align: 'start' }, [icon, h('span', title)]);
+}
+
+const defaultConversationsItems = [
+  {
+    key: '0',
+    label: 'What is Ant Design X?',
+  },
+];
+
+const placeholderPromptsItems: PromptsProps['items'] = [
+  {
+    key: '1',
+    label: renderTitle(
+      h(FireOutlined, { style: { color: '#FF4D4F' } }),
+      'Hot Topics',
+    ),
+    description: 'What are you interested in?',
+    children: [
+      {
+        key: '1-1',
+        description: `What's new in X?`,
+      },
+      {
+        key: '1-2',
+        description: `What's AGI?`,
+      },
+      {
+        key: '1-3',
+        description: `Where is the doc?`,
+      },
+    ],
+  },
+  {
+    key: '2',
+    label: renderTitle(
+      h(ReadOutlined, { style: { color: '#1890FF' } }),
+      'Design Guide',
+    ),
+    description: 'How to design a good product?',
+    children: [
+      {
+        key: '2-1',
+        icon: h(HeartOutlined),
+        description: `Know the well`,
+      },
+      {
+        key: '2-2',
+        icon: h(SmileOutlined),
+        description: `Set the AI role`,
+      },
+      {
+        key: '2-3',
+        icon: h(CommentOutlined),
+        description: `Express the feeling`,
+      },
+    ],
+  },
+];
+
+const senderPromptsItems: PromptsProps['items'] = [
+  {
+    key: '1',
+    description: 'Hot Topics',
+    icon: h(FireOutlined, { style: { color: '#FF4D4F' } }),
+  },
+  {
+    key: '2',
+    description: 'Design Guide',
+    icon: h(ReadOutlined, { style: { color: '#1890FF' } }),
+  },
+];
+
+const roles: BubbleListProps['roles'] = {
+  ai: {
+    placement: 'start',
+    typing: { step: 5, interval: 20 },
+    styles: {
+      content: {
+        borderRadius: '16px',
+      },
+    },
+  },
+  local: {
+    placement: 'end',
+    variant: 'shadow',
+  },
+};
+
+// ==================== State ====================
+const headerOpen = ref(false);
+const content = ref('');
+const conversationsItems = ref(defaultConversationsItems);
+const activeKey = ref(defaultConversationsItems[0]?.key);
+const acticeModeKey = ref('1');
+const attachedFiles = ref<AttachmentsProps['items']>([]);
+const agentRequestLoading = ref(false);
+// 定义项目名称
+const projectName = ref('');
+
+// ==================== Runtime ====================
+const [agent] = useXAgent({
+  request: async ({ message }, { onSuccess }) => {
+    agentRequestLoading.value = true;
+    const res = await sendChatflow(
+      {
+        appid: 'baca08c1-e92b-4dc9-a445-3584803f54d4',
+      },
+      {
+        userId: '1562',
+        conversationId: '',
+        files: [],
+        inputs: {
+          projectName: projectName.value,
+        },
+        content: message || '',
+      },
+    );
+    agentRequestLoading.value = false;
+    if (res.data.answer) {
+      onSuccess(res.data.answer);
+      const url = new URL(res.data.answer);
+      pptx.value = url.pathname;
+    } else {
+      onSuccess('发生异常，可以输入更多信息再让我来回答或重试。');
+    }
+  },
+});
+
+const { onRequest, messages, setMessages } = useXChat({
+  agent: agent?.value,
+});
+
+watch(
+  activeKey,
+  () => {
+    if (activeKey.value !== undefined) {
+      setMessages([]);
+    }
+  },
+  { immediate: true },
+);
+
+// ==================== Event ====================
+function onSubmit(nextContent: string) {
+  if (!nextContent) return;
+  if (projectName.value === '') {
+    message.error('请输入项目名称');
+    return;
+  }
+  onRequest(nextContent);
+  // sendMessage(nextContent)
+  content.value = '';
+}
+
+const onPromptsItemClick: PromptsProps['onItemClick'] = (info) => {
+  onRequest(info.data.description as string);
+};
+
+function onAddConversation() {
+  conversationsItems.value = [
+    ...conversationsItems.value,
+    {
+      key: `${conversationsItems.value.length}`,
+      label: `New Conversation ${conversationsItems.value.length}`,
+    },
+  ];
+  activeKey.value = `${conversationsItems.value.length}`;
+}
+
+const onConversationClick: ConversationsProps['onActiveChange'] = (key) => {
+  activeKey.value = key;
+};
+
+const handleFileChange: AttachmentsProps['onChange'] = (info) =>
+  (attachedFiles.value = info.fileList);
+
+// ==================== Nodes ====================
+const placeholderNode = computed(() =>
+  h(
+    Space,
+    { direction: 'vertical', size: 16, style: styles.value.placeholder },
+    [
+      h(Welcome, {
+        variant: 'borderless',
+        icon: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp',
+        title: "Hello, I'm Ant Design X",
+        description:
+          'Base on Ant Design, AGI product interface solution, create a better intelligent vision~',
+        extra: h(Space, {}, [
+          h(Button, { icon: h(ShareAltOutlined) }),
+          h(Button, { icon: h(EllipsisOutlined) }),
+        ]),
+      }),
+      h(Prompts, {
+        title: 'Do you want?',
+        items: placeholderPromptsItems,
+        styles: {
+          list: {
+            width: '100%',
+          },
+          item: {
+            flex: 1,
+          },
+        },
+        onItemClick: onPromptsItemClick,
+      }),
+    ],
+  ),
+);
+
+const items = computed<BubbleListProps['items']>(() => {
+  if (messages.value.length === 0) {
+    return [{ content: placeholderNode, variant: 'borderless' }];
+  }
+  return messages.value.map(({ id, message, status }) => ({
+    key: id,
+    loading: status === 'loading',
+    role: status === 'local' ? 'local' : 'ai',
+    content: message,
+  }));
+});
+
+// 自定义代码
+
+// 获取会话记录
+const getConversationList = async () => {
+  const res = await getChatList(
+    {
+      appid: '363b9580-ae60-4a40-ae7d-ec434e86e326',
+    },
+    {
+      userId: '1562',
+      lastId: '4dfa17e1-364a-4c98-af5d-1109c8f28212',
+      sortBy: '',
+      limit: '5',
+    },
+  );
+  if (res.status === 200) {
+    conversationsItems.value = res.data.data.map((item: any) => {
+      return {
+        key: item.id,
+        label: item.name,
+      };
+    });
+    activeKey.value = res.data.data[0].id;
+  }
+};
+
+const showQuoteButton = ref(false);
+const selectedText = ref('');
+const quoteButtonStyle = ref({
+  position: 'absolute',
+  top: '0',
+  left: '0',
+  display: 'none',
+});
+
+const handleTextSelection = (event: any) => {
+  const selection = window.getSelection();
+  if (selection && selection.toString().trim() !== '') {
+    selectedText.value = selection.toString();
+
+    // 获取鼠标位置
+    const mouseX = event.pageX;
+    const mouseY = event.pageY;
+
+    // 设置按钮位置
+    quoteButtonStyle.value = {
+      position: 'fixed',
+      top: `${mouseY}px`,
+      left: `${mouseX}px`,
+      display: 'block',
+    };
+
+    showQuoteButton.value = true;
+  } else {
+    showQuoteButton.value = false;
+  }
+};
+
+const handleQuoteClick = () => {
+  // 处理引用逻辑，比如将选中的文本添加到引用框中
+  content.value = selectedText.value;
+  showQuoteButton.value = false;
+};
+
+// 定义模板数据
+const templates = ref([
+  { label: '模板1', key: '1' },
+  { label: '模板2', key: '2' },
+  { label: '模板3', key: '3' },
+  { label: '模板34', key: '4' },
+  { label: '模板35', key: '5' },
+  { label: '模板36', key: '7' },
+  { label: '模板37', key: '8' },
+  { label: '模板38', key: '9' },
+]);
+
+// 监听模板选择事件
+const onModeClick: ConversationsProps['onActiveChange'] = (key) => {
+  acticeModeKey.value = key;
+};
+
+// 定义 pptx 的样式
+const pptStyle = ref({
+  height: 'calc(100vh - 150px) !import',
+  width: '40%',
+  margin: '30px 20px',
+});
+
+// 监听窗口大小变化
+const handleResize = () => {
+  // 动态调整宽度和高度
+  pptStyle.value = {
+    height: 'calc(100vh - 150px)', // 保持高度不变
+    width: '40%', // 宽度为窗口宽度的 40%
+    margin: '30px 20px',
+  };
+};
+
+const renderedHandler = () => {
+  console.warn('渲染完成');
+};
+const errorHandler = () => {
+  console.error('渲染失败');
+};
+
+onMounted(() => {
+  getConversationList();
+  window.addEventListener('resize', handleResize);
+});
+</script>
+
+<template>
+  <contextHolder />
+  <div :style="styles.layout" style="height: calc(100vh - 70px)">
+    <div :style="styles.menu">
+      <!-- 🌟 Logo -->
+      <div :style="styles.logo">
+        <img
+          src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*eco6RrQhxbMAAAAAAAAAAAAADgCCAQ/original"
+          draggable="false"
+          alt="logo"
+          :style="styles['logo-img']"
+        />
+        <span :style="styles['logo-span']">Word文档生成</span>
+      </div>
+
+      <!-- 🌟 添加会话 -->
+      <Button type="link" :style="styles.addBtn" @click="onAddConversation">
+        <PlusOutlined />
+        新建会话
+      </Button>
+
+      <!-- 🌟 会话管理 -->
+      <Conversations
+        :items="conversationsItems"
+        :style="styles.conversations"
+        :active-key="activeKey"
+        :menu="menuConfig"
+        @active-change="onConversationClick"
+      />
+      <!-- 🌟 会话管理 -->
+      <Typography.Title :level="5" style="margin: 0 0 8px">
+        选择模板
+      </Typography.Title>
+      <Conversations
+        :items="templates"
+        :style="styles.conversations"
+        :active-key="acticeModeKey"
+        :menu="menuConfig"
+        @active-change="onModeClick"
+      />
+
+      <!-- 🌟 项目名称输入 -->
+      <Typography.Title :level="5" style="margin: 16px 0 8px">
+        项目名称
+      </Typography.Title>
+      <a-input
+        v-model:value="projectName"
+        placeholder="请输入项目名称"
+        :style="{ margin: '10px 5%', padding: '0 8px', width: '90%' }"
+      />
+    </div>
+
+    <div :style="styles.chat" style="margin-left: 20px">
+      <!-- 🌟 消息列表 -->
+      <Bubble.List
+        :items="items"
+        :roles="roles"
+        :style="styles.messages"
+        @mouseup="handleTextSelection"
+      />
+
+      <a-button
+        v-if="showQuoteButton"
+        :style="quoteButtonStyle"
+        @click="handleQuoteClick"
+      >
+        引用
+      </a-button>
+
+      <!-- 🌟 提示词 -->
+      <Prompts :items="senderPromptsItems" @item-click="onPromptsItemClick" />
+
+      <!-- 🌟 输入框 -->
+      <Sender
+        :value="content"
+        :style="styles.sender"
+        :loading="agentRequestLoading"
+        @submit="onSubmit"
+        @change="(value) => (content = value)"
+      >
+        <template #prefix>
+          <Badge :dot="attachedFiles.length > 0 && !headerOpen">
+            <Button type="text" @click="() => (headerOpen = !headerOpen)">
+              <template #icon>
+                <PaperClipOutlined />
+              </template>
+            </Button>
+          </Badge>
+        </template>
+
+        <template #header>
+          <Sender.Header
+            title="Attachments"
+            :open="headerOpen"
+            :styles="{ content: { padding: 0 } }"
+            @open-change="(open) => (headerOpen = open)"
+          >
+            <Attachments
+              :before-upload="() => false"
+              :items="attachedFiles"
+              @change="handleFileChange"
+            >
+              <template #placeholder="type">
+                <Flex
+                  v-if="type && type.type === 'inline'"
+                  justify="center"
+                  vertical
+                  gap="2"
+                >
+                  <Typography.Text style="font-size: 30px; line-height: 1">
+                    <CloudUploadOutlined />
+                  </Typography.Text>
+                  <Typography.Title
+                    :level="5"
+                    style="margin: 0; font-size: 14px; line-height: 1.5"
+                  >
+                    Upload files
+                  </Typography.Title>
+                  <Typography.Text type="secondary">
+                    Click or drag files to this area to upload
+                  </Typography.Text>
+                </Flex>
+                <Typography.Text v-if="type && type.type === 'drop'">
+                  Drop file here
+                </Typography.Text>
+              </template>
+            </Attachments>
+          </Sender.Header>
+        </template>
+      </Sender>
+    </div>
+    <VueOfficeDocx
+      :src="pptx"
+      :style="pptStyle"
+      @rendered="renderedHandler"
+      @error="errorHandler"
+    />
+  </div>
+</template>
diff --git a/packages/effects/common-ui/package.json b/packages/effects/common-ui/package.json
index 325c619..a108af5 100644
--- a/packages/effects/common-ui/package.json
+++ b/packages/effects/common-ui/package.json
@@ -28,6 +28,7 @@
     }
   },
   "dependencies": {
+    "@ant-design/icons-vue": "^7.0.1",
     "@vben-core/form-ui": "workspace:*",
     "@vben-core/popup-ui": "workspace:*",
     "@vben-core/preferences": "workspace:*",
@@ -41,6 +42,7 @@
     "@vueuse/core": "catalog:",
     "@vueuse/integrations": "catalog:",
     "ant-design-vue": "catalog:",
+    "ant-design-x-vue": "^1.1.2",
     "qrcode": "catalog:",
     "tippy.js": "catalog:",
     "vue": "catalog:",
diff --git a/packages/effects/common-ui/src/ui/index.ts b/packages/effects/common-ui/src/ui/index.ts
index 1f8bc38..7fe5f36 100644
--- a/packages/effects/common-ui/src/ui/index.ts
+++ b/packages/effects/common-ui/src/ui/index.ts
@@ -3,4 +3,5 @@ export * from './authentication';
 export * from './dashboard';
 export * from './fallback';
 export * from './home';
+export * from './ppt';
 export * from './spider';
diff --git a/packages/effects/common-ui/src/ui/ppt/index.ts b/packages/effects/common-ui/src/ui/ppt/index.ts
new file mode 100644
index 0000000..a63baff
--- /dev/null
+++ b/packages/effects/common-ui/src/ui/ppt/index.ts
@@ -0,0 +1,4 @@
+export { default as PptHistoryView } from './ppt-history-view.vue';
+export { default as PptListView } from './ppt-list-view.vue';
+export { default as PptWorkView } from './ppt-work-view.vue';
+export type * from './typing';
diff --git a/packages/effects/common-ui/src/ui/ppt/ppt-history-view.vue b/packages/effects/common-ui/src/ui/ppt/ppt-history-view.vue
new file mode 100644
index 0000000..e774cd1
--- /dev/null
+++ b/packages/effects/common-ui/src/ui/ppt/ppt-history-view.vue
@@ -0,0 +1,45 @@
+<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: calc(55vh - 120px); margin-bottom: 20px; overflow-y: auto"
+  >
+    <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>
diff --git a/packages/effects/common-ui/src/ui/ppt/ppt-list-view.vue b/packages/effects/common-ui/src/ui/ppt/ppt-list-view.vue
new file mode 100644
index 0000000..aa00937
--- /dev/null
+++ b/packages/effects/common-ui/src/ui/ppt/ppt-list-view.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { PPTTempItem } from './typing';
+
+import { Card, CardContent, CardHeader, CardTitle } from '@vben-core/shadcn-ui';
+
+defineOptions({
+  name: 'PptListView',
+});
+
+defineEmits(['click']);
+
+const items: PPTTempItem[] = [
+  {
+    id: 'ee3889b6-50fa-463e-b956-3b93447727fc',
+    name: '从可研申报书生成科技项目PPT',
+  },
+];
+</script>
+
+<template>
+  <Card style="height: calc(55vh - 120px); overflow-y: auto">
+    <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>
diff --git a/packages/effects/common-ui/src/ui/ppt/ppt-work-view.vue b/packages/effects/common-ui/src/ui/ppt/ppt-work-view.vue
new file mode 100644
index 0000000..e227f93
--- /dev/null
+++ b/packages/effects/common-ui/src/ui/ppt/ppt-work-view.vue
@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import type { BubbleListProps } from 'ant-design-x-vue';
+
+import type { PPTTempItem } from './typing';
+
+import { h, ref } from 'vue';
+
+import { Card } from '@vben-core/shadcn-ui';
+
+import { UserOutlined } from '@ant-design/icons-vue';
+import { Button, Flex } from 'ant-design-vue';
+import { Attachments, BubbleList, Sender } from 'ant-design-x-vue';
+
+interface WorkflowParams {
+  appid: string;
+}
+
+interface WorkflowContext {
+  userId: string;
+  conversationId: string;
+  files: unknown[];
+  inputs: Record<string, unknown>;
+}
+
+interface WorkflowResult {
+  data: {
+    outputs: {
+      result: string;
+    };
+  };
+}
+
+interface Props {
+  item?: PPTTempItem;
+  runWorkflow?: (
+    params: WorkflowParams,
+    context: WorkflowContext,
+  ) => Promise<WorkflowResult>;
+}
+
+defineOptions({
+  name: 'SpiderWorkView',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  item: () => null,
+  runWorkflow: () => async () => ({
+    data: {
+      outputs: {
+        result: '',
+      },
+    },
+  }),
+});
+
+const startFetching = async () => {
+  isFetching.value = true;
+  fetchStatus.value = 'fetching';
+
+  try {
+    const res = await props.runWorkflow(
+      {
+        appid: props.item.id,
+      },
+      {
+        userId: '1562',
+        conversationId: '',
+        files: [],
+        inputs: {
+          declarationDoc: value.value,
+        },
+      },
+    );
+    // 保存抓取结果 url
+    fetchResult.value = res.data.outputs.result;
+    resultItems.value.push({
+      key: resultItems.value.length + 1,
+      role: 'ai',
+      content: '文档已生成',
+      footer: h(Flex, null, [
+        h(
+          Button,
+          {
+            size: 'nomarl',
+            type: 'primary',
+            onClick: () => {},
+          },
+          '文档预览',
+        ),
+        h(
+          Button,
+          {
+            size: 'nomarl',
+            type: 'primary',
+            style: {
+              marginLeft: '10px',
+            },
+            onClick: () => {},
+          },
+          '文档下载',
+        ),
+      ]),
+    });
+  } catch (error) {
+    console.error(error);
+  }
+
+  // 模拟抓取完成
+  isFetching.value = false;
+  fetchStatus.value = 'completed';
+};
+
+const roles: BubbleListProps['roles'] = {
+  user: {
+    placement: 'end',
+    typing: false,
+    avatar: { icon: h(UserOutlined), style: { background: '#87d068' } },
+  },
+  ai: {
+    placement: 'start',
+    typing: false,
+    style: {
+      maxWidth: 600,
+      marginInlineEnd: 44,
+    },
+    styles: {
+      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('');
+const value = ref('');
+const resultItems = ref<ResultItem[]>([]);
+</script>
+
+<template>
+  <div>
+    <div style="height: calc(67vh - 120px); margin: 20px; overflow-y: auto">
+      <BubbleList :roles="roles" :items="resultItems" />
+    </div>
+    <Card class="w-full">
+      <Sender
+        v-model:value="value"
+        :loading="isFetching"
+        :auto-size="{ minRows: 6, maxRows: 12 }"
+        @submit="startFetching"
+      />
+    </Card>
+  </div>
+</template>
diff --git a/packages/effects/common-ui/src/ui/ppt/typing.ts b/packages/effects/common-ui/src/ui/ppt/typing.ts
new file mode 100644
index 0000000..e2b1576
--- /dev/null
+++ b/packages/effects/common-ui/src/ui/ppt/typing.ts
@@ -0,0 +1,17 @@
+interface PPTTempItem {
+  id: string;
+  name: string;
+}
+
+interface PptHistoryItem {
+  id: string;
+  workflowRun: {
+    id: string;
+  };
+  createdByEndUser: {
+    id: string;
+    sessionId: string;
+  };
+}
+
+export type { PptHistoryItem, PPTTempItem };
diff --git a/packages/effects/common-ui/src/ui/spider/spider-work-view.vue b/packages/effects/common-ui/src/ui/spider/spider-work-view.vue
index 43b5161..d1a6efb 100644
--- a/packages/effects/common-ui/src/ui/spider/spider-work-view.vue
+++ b/packages/effects/common-ui/src/ui/spider/spider-work-view.vue
@@ -65,7 +65,7 @@ const startFetching = async () => {
   try {
     const res = await props.runSpider(
       {
-        appid: 'c736edd0-925d-4877-9223-56aab7342311',
+        appid: props.item.id,
       },
       {
         userId: '1562',
diff --git a/packages/icons/src/iconify/index.ts b/packages/icons/src/iconify/index.ts
index 9b9bf26..3c966fb 100644
--- a/packages/icons/src/iconify/index.ts
+++ b/packages/icons/src/iconify/index.ts
@@ -11,3 +11,5 @@ export const MdiGithub = createIconifyIcon('mdi:github');
 export const MdiGoogle = createIconifyIcon('mdi:google');
 
 export const MdiChevron = createIconifyIcon('tabler:chevron-right');
+export const MdiUser = createIconifyIcon('mdi:user');
+export const MageRobot = createIconifyIcon('mage:robot');
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a03de33..1f4c35d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1293,6 +1293,9 @@ importers:
 
   packages/effects/common-ui:
     dependencies:
+      '@ant-design/icons-vue':
+        specifier: ^7.0.1
+        version: 7.0.1(vue@3.5.13(typescript@5.8.3))
       '@vben-core/form-ui':
         specifier: workspace:*
         version: link:../../@core/ui-kit/form-ui
@@ -1332,6 +1335,9 @@ importers:
       ant-design-vue:
         specifier: 'catalog:'
         version: 4.2.6(vue@3.5.13(typescript@5.8.3))
+      ant-design-x-vue:
+        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))
       qrcode:
         specifier: 'catalog:'
         version: 1.5.4