From 9cead8075b8dc13539d3a7e23bcc99a23deb7c04 Mon Sep 17 00:00:00 2001
From: Kven <2955163637@qq.com>
Date: Fri, 16 May 2025 17:44:56 +0800
Subject: [PATCH] =?UTF-8?q?feat(@vben/common-ui):=20=E4=BC=98=E5=8C=96AI?=
 =?UTF-8?q?=E5=B7=A5=E4=BD=9C=E6=B5=81=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加 AI 工作流相关的路由和页面组件
- 实现 AI 平台信息获取、WORD 生成和 PPT 生成等功能
-优化模板选择和历史记录展示逻辑
- 新增聊天参数获取和删除功能
- 更新相关 API接口
---
 apps/web-antd/src/api/core/chatflow.ts        |  16 +-
 apps/web-antd/src/api/core/workflow.ts        |   4 +-
 .../src/router/routes/modules/aiFlow.ts       |  53 ++
 .../web-antd/src/router/routes/modules/ppt.ts |  19 -
 .../src/router/routes/modules/spider.ts       |  19 -
 .../src/router/routes/modules/word.ts         |  19 -
 apps/web-antd/src/views/ppt/index.vue         |  49 +-
 apps/web-antd/src/views/ppt/index2.vue        | 615 -----------------
 apps/web-antd/src/views/spider/index.vue      | 121 ++--
 apps/web-antd/src/views/word/index.vue        |  82 ++-
 apps/web-antd/src/views/word/index2.vue       | 635 ------------------
 .../common-ui/src/ui/ppt/ppt-list-view.vue    | 222 +++++-
 .../common-ui/src/ui/ppt/ppt-work-view.vue    | 373 +++++++---
 .../src/ui/spider/spider-list-view.vue        | 214 +++++-
 .../src/ui/spider/spider-preview.vue          |  56 ++
 .../src/ui/spider/spider-work-view.vue        | 370 ++++++----
 .../common-ui/src/ui/word/word-list-view.vue  | 215 +++++-
 .../common-ui/src/ui/word/word-work-view.vue  | 492 ++++++++++----
 packages/icons/src/iconify/index.ts           |   1 +
 19 files changed, 1780 insertions(+), 1795 deletions(-)
 create mode 100644 apps/web-antd/src/router/routes/modules/aiFlow.ts
 delete mode 100644 apps/web-antd/src/router/routes/modules/ppt.ts
 delete mode 100644 apps/web-antd/src/router/routes/modules/spider.ts
 delete mode 100644 apps/web-antd/src/router/routes/modules/word.ts
 delete mode 100644 apps/web-antd/src/views/ppt/index2.vue
 delete mode 100644 apps/web-antd/src/views/word/index2.vue
 create mode 100644 packages/effects/common-ui/src/ui/spider/spider-preview.vue

diff --git a/apps/web-antd/src/api/core/chatflow.ts b/apps/web-antd/src/api/core/chatflow.ts
index 239b8bd..50086e9 100644
--- a/apps/web-antd/src/api/core/chatflow.ts
+++ b/apps/web-antd/src/api/core/chatflow.ts
@@ -34,6 +34,12 @@ export namespace ChatflowApi {
     createAt: string;
     updatedAt: string;
   }
+
+  export interface deleteParams {
+    userId: string;
+    conversationId: string;
+    appId: string;
+  }
 }
 
 // 聊天流
@@ -65,6 +71,10 @@ export async function getChatList(
 //   return requestClient.post('/v1/chat/messages', data);
 // };
 //
-// export function deleteChatflow(data){
-//   return requestClient.delete('/v1/chat/messages/suggested', data);
-// };
+export function deleteChatflow(data: ChatflowApi.deleteParams) {
+  return requestClient.delete('/v1/chat/conversation', { params: data });
+}
+
+export function getChatParameters(appId: string) {
+  return requestClient.get(`/v1/chat/parameters/${appId}`);
+}
diff --git a/apps/web-antd/src/api/core/workflow.ts b/apps/web-antd/src/api/core/workflow.ts
index 7aedaa2..9f41a96 100644
--- a/apps/web-antd/src/api/core/workflow.ts
+++ b/apps/web-antd/src/api/core/workflow.ts
@@ -49,5 +49,7 @@ export function getWorkflowInfo(data: WorkflowApi.WorkflowLogParams) {
 }
 
 export function getWorkflowList(params: WorkflowApi.WorkflowLogParams) {
-  return requestClient.get(`/v1/workflow/list/${params.appid}`);
+  return requestClient.get(`/v1/workflow/list/${params.appid}`, {
+    params,
+  });
 }
diff --git a/apps/web-antd/src/router/routes/modules/aiFlow.ts b/apps/web-antd/src/router/routes/modules/aiFlow.ts
new file mode 100644
index 0000000..53fecbd
--- /dev/null
+++ b/apps/web-antd/src/router/routes/modules/aiFlow.ts
@@ -0,0 +1,53 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+import { HugeAi, SvgPPT, SvgSpider, SvgWord } from '@vben/icons';
+
+const routes: RouteRecordRaw[] = [
+  {
+    name: 'aiflow',
+    path: '/aiflow',
+    meta: {
+      icon: HugeAi,
+      title: 'AI工作流',
+      order: 4,
+      authority: ['system'],
+    },
+    children: [
+      {
+        name: 'spider',
+        path: '/aiflow/spider',
+        component: () => import('#/views/spider/index.vue'),
+        meta: {
+          icon: SvgSpider,
+          title: 'AI平台信息获取',
+          order: 1,
+          authority: ['dify:server:init'],
+        },
+      },
+      {
+        name: 'word',
+        path: '/aiflow/word',
+        component: () => import('#/views/word/index.vue'),
+        meta: {
+          icon: SvgWord,
+          title: 'AI申报书WORD生成',
+          order: 2,
+          authority: ['dify:chat:send'],
+        },
+      },
+      {
+        name: 'ppt',
+        path: '/aiflow/ppt',
+        component: () => import('#/views/ppt/index.vue'),
+        meta: {
+          icon: SvgPPT,
+          title: 'PPT自动生成',
+          order: 3,
+          authority: ['dify:workflow:run'],
+        },
+      },
+    ],
+  },
+];
+
+export default routes;
diff --git a/apps/web-antd/src/router/routes/modules/ppt.ts b/apps/web-antd/src/router/routes/modules/ppt.ts
deleted file mode 100644
index 9a16113..0000000
--- a/apps/web-antd/src/router/routes/modules/ppt.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { RouteRecordRaw } from 'vue-router';
-
-import { SvgPPT } from '@vben/icons';
-
-const routes: RouteRecordRaw[] = [
-  {
-    name: 'ppt',
-    path: '/ppt',
-    component: () => import('#/views/ppt/index.vue'),
-    meta: {
-      icon: SvgPPT,
-      title: 'PPT自动生成',
-      order: 3,
-      authority: ['dify:workflow:run'],
-    },
-  },
-];
-
-export default routes;
diff --git a/apps/web-antd/src/router/routes/modules/spider.ts b/apps/web-antd/src/router/routes/modules/spider.ts
deleted file mode 100644
index 7ac8bd6..0000000
--- a/apps/web-antd/src/router/routes/modules/spider.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { RouteRecordRaw } from 'vue-router';
-
-import { SvgSpider } from '@vben/icons';
-
-const routes: RouteRecordRaw[] = [
-  {
-    name: 'spider',
-    path: '/spider',
-    component: () => import('#/views/spider/index.vue'),
-    meta: {
-      icon: SvgSpider,
-      title: '数据爬取',
-      order: 1,
-      authority: ['dify:server:init'],
-    },
-  },
-];
-
-export default routes;
diff --git a/apps/web-antd/src/router/routes/modules/word.ts b/apps/web-antd/src/router/routes/modules/word.ts
deleted file mode 100644
index 9254152..0000000
--- a/apps/web-antd/src/router/routes/modules/word.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { RouteRecordRaw } from 'vue-router';
-
-import { SvgWord } from '@vben/icons';
-
-const routes: RouteRecordRaw[] = [
-  {
-    name: 'word',
-    path: '/word',
-    component: () => import('#/views/word/index.vue'),
-    meta: {
-      icon: SvgWord,
-      title: 'Word自动生成',
-      order: 2,
-      authority: ['dify:chat:send'],
-    },
-  },
-];
-
-export default routes;
diff --git a/apps/web-antd/src/views/ppt/index.vue b/apps/web-antd/src/views/ppt/index.vue
index a76a309..32cad99 100644
--- a/apps/web-antd/src/views/ppt/index.vue
+++ b/apps/web-antd/src/views/ppt/index.vue
@@ -3,7 +3,7 @@ import type { PPTTempItem } from '@vben/common-ui';
 
 import { onMounted, reactive, ref } from 'vue';
 
-import { PptHistoryView, PptListView, PptWorkView } from '@vben/common-ui';
+import { PptListView, PptWorkView } from '@vben/common-ui';
 
 import { message } from 'ant-design-vue';
 
@@ -11,7 +11,7 @@ import { getWorkflowInfo, getWorkflowList, sendWorkflow } from '#/api';
 
 let temp = reactive<PPTTempItem>({
   id: 'ee3889b6-50fa-463e-b956-3b93447727fc',
-  name: '从可研申报书生成科技项目PPT',
+  name: '海南科技项目可研报告PPT生成',
 });
 interface ResultItem {
   key: number;
@@ -29,7 +29,6 @@ const getLogs = async (appid: string) => {
   const res = await getWorkflowList({
     appid,
     limit: 5,
-    page: 1,
   });
   hitsory.value = res;
   loading.value = false;
@@ -69,24 +68,32 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="pr-5" style="height: calc(100vh - 80px)">
-    <div class="flex h-full flex-col lg:flex-row">
-      <div class="mr-4 w-full lg:w-1/6">
-        <PptHistoryView
-          :loading="loading"
-          :items="hitsory"
-          title="运行历史"
-          @click="handleClick"
-        />
-        <PptListView title="选择模板" @click="handleClickMode" />
-      </div>
-      <div class="h-full w-full lg:w-5/6">
-        <PptWorkView
-          :item="temp"
-          :run-workflow="sendWorkflow"
-          :item-message="itemMessage"
-        />
-      </div>
+  <div class="layout">
+    <div class="lg:w-1/6">
+      <PptListView
+        title="选择模板"
+        :items="hitsory"
+        :loading="loading"
+        @click-mode="handleClickMode"
+        @click="handleClick"
+      />
     </div>
+    <PptWorkView
+      :item="temp"
+      :run-workflow="sendWorkflow"
+      :item-message="itemMessage"
+    />
   </div>
 </template>
+
+<style scoped lang="less">
+.layout {
+  width: 100%;
+  min-width: 1400px;
+  height: 100%;
+  display: flex;
+  background: hsl(216deg 21.74% 95.49%);
+  font-family: AlibabaPuHuiTi, v-deep(var(--ant-font-family)), sans-serif;
+  border-radius: v-deep(var(--ant-border-radius));
+}
+</style>
diff --git a/apps/web-antd/src/views/ppt/index2.vue b/apps/web-antd/src/views/ppt/index2.vue
deleted file mode 100644
index 2120508..0000000
--- a/apps/web-antd/src/views/ppt/index2.vue
+++ /dev/null
@@ -1,615 +0,0 @@
-<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 c8865a5..905b2a5 100644
--- a/apps/web-antd/src/views/spider/index.vue
+++ b/apps/web-antd/src/views/spider/index.vue
@@ -1,58 +1,101 @@
 <script lang="ts" setup>
-import type { SpiderItem } from '@vben/common-ui';
+import type { PPTTempItem } from '@vben/common-ui';
 
 import { ref } from 'vue';
 
 import { SpiderListView, SpiderWorkView } from '@vben/common-ui';
 
-import { sendWorkflow } from '#/api';
+import { notification } from 'ant-design-vue';
 
-const spiderList = ref<SpiderItem[]>([
-  {
-    id: 'a2a55334-a111-45e6-942f-9f3f70af8826',
-    name: '全国公共资源交易平台_数据爬取',
-  },
-  {
-    id: 'c736edd0-925d-4877-9223-56aab7342311',
-    name: '广州公共资源交易中心',
-  },
-]);
-const spider = ref<SpiderItem>();
+import { getWorkflowInfo, getWorkflowList, sendWorkflow } from '#/api';
 
-// const getFlowList = async () => {
-//   const res = await getAppList({});
-//   if (res) {
-//     spiderList.value = res;
-//     loading.value = false;
-//   }
-// };
+interface ResultItem {
+  key: number;
+  role: 'ai' | 'user';
+  content: string;
+  footer?: any;
+}
+interface WordFlowItem {
+  id: string;
+  workflowRunId: string;
+  taskId: string;
+  userId: string;
+  appId: string;
+}
 
-function handleClick(item: SpiderItem) {
-  spider.value = item;
+const hitsory = ref([]);
+const loading = ref(true);
+const temp = ref();
+const itemMessage = ref<ResultItem[]>([]);
+
+const getLogs = async (appid: string) => {
+  loading.value = true;
+  const res = await getWorkflowList({
+    appid,
+    limit: 5,
+  });
+  hitsory.value = res;
+  loading.value = false;
+};
+
+async function handleClick(item: WordFlowItem) {
+  const res = await getWorkflowInfo({
+    appid: item.appId,
+    workflowRunId: item.workflowRunId,
+  });
+  itemMessage.value = [];
+  if (res.outputs) {
+    itemMessage.value.push({
+      key: itemMessage.value.length + 1,
+      role: 'ai',
+      content: res.outputs.result,
+    });
+  }
+}
+
+async function handleClickMode(item: PPTTempItem) {
+  notification.success({
+    message: `${item.name}`,
+    description: '已选取',
+    duration: 3,
+  });
+  temp.value = item;
+  getLogs(item.id);
 }
 
 // onMounted(() => {
-//   getFlowList();
+//   getLogs(spiderList.value[0].id);
 // });
 </script>
 
 <template>
-  <div class="px-5">
-    <div class="mt-5 flex flex-col lg:flex-row">
-      <div class="mr-4 w-full lg:w-1/5">
-        <SpiderListView
-          :items="spiderList"
-          title="数据爬取工具"
-          @click="handleClick"
-        />
-      </div>
-      <div class="w-full lg:w-4/5">
-        <SpiderWorkView
-          :item="spider"
-          :run-spider="sendWorkflow"
-          title="目标网址："
-        />
-      </div>
+  <div class="layout">
+    <div class="lg:w-1/5">
+      <SpiderListView
+        title="选择模板"
+        :items="hitsory"
+        :loading="loading"
+        @click-mode="handleClickMode"
+        @click="handleClick"
+      />
     </div>
+    <SpiderWorkView
+      title="目标网址："
+      :item="temp"
+      :run-spider="sendWorkflow"
+      :item-message="itemMessage"
+    />
   </div>
 </template>
+
+<style scoped lang="less">
+.layout {
+  width: 100%;
+  min-width: 1400px;
+  height: 100%;
+  display: flex;
+  background: hsl(216deg 21.74% 95.49%);
+  font-family: AlibabaPuHuiTi, v-deep(var(--ant-font-family)), sans-serif;
+  border-radius: v-deep(var(--ant-border-radius));
+}
+</style>
diff --git a/apps/web-antd/src/views/word/index.vue b/apps/web-antd/src/views/word/index.vue
index bf15156..4837790 100644
--- a/apps/web-antd/src/views/word/index.vue
+++ b/apps/web-antd/src/views/word/index.vue
@@ -3,19 +3,25 @@ import type { WordTempItem } from '@vben/common-ui';
 
 import { onMounted, reactive, ref } from 'vue';
 
-import { WordHistoryView, WordListView, WordWorkView } from '@vben/common-ui';
+import { WordListView, WordWorkView } from '@vben/common-ui';
 
-import { message } from 'ant-design-vue';
+import { message, notification } from 'ant-design-vue';
 
-import { getChatList, sendChatflow } from '#/api';
+import {
+  deleteChatflow,
+  getChatList,
+  getChatParameters,
+  sendChatflow,
+} from '#/api';
 
 let temp = reactive<WordTempItem>({
   id: 'baca08c1-e92b-4dc9-a445-3584803f54d4',
-  name: '职业创新申报书',
+  name: '海南职创申报书生成',
 });
 
 const hitsory = ref([]);
 const loading = ref(true);
+const params = ref({});
 
 const getLogs = async (appid: string) => {
   loading.value = true;
@@ -40,8 +46,32 @@ const getLogs = async (appid: string) => {
 };
 
 function handleClickMode(item: WordTempItem) {
-  message.success(`已选取${item.name}为模板`);
+  notification.success({
+    message: `${item.name}`,
+    description: '已选取',
+    duration: 3,
+  });
   temp = item;
+  getParameters(temp.id);
+}
+
+async function deleteLog(item: any) {
+  const res = await deleteChatflow({
+    appId: temp.id,
+    id: item,
+    userId: '1562',
+  });
+  if (res.code === 0) {
+    message.success('删除成功');
+    getLogs(temp.id);
+  } else {
+    message.error('删除失败');
+  }
+}
+
+async function getParameters(id: string) {
+  const res = await getChatParameters(id);
+  params.value = res.suggestedQuestions;
 }
 
 function handleClick(item: WordTempItem) {
@@ -51,24 +81,38 @@ function handleClick(item: WordTempItem) {
 
 onMounted(() => {
   getLogs(temp.id);
+  getParameters(temp.id);
 });
 </script>
 
 <template>
-  <div class="pr-5" style="height: calc(100vh - 80px)">
-    <div class="flex h-full flex-col lg:flex-row">
-      <div class="mr-4 w-full lg:w-1/6">
-        <WordHistoryView
-          :loading="loading"
-          :items="hitsory"
-          title="运行历史"
-          @click="handleClick"
-        />
-        <WordListView title="选择模板" @click="handleClickMode" />
-      </div>
-      <div class="h-full w-full lg:w-5/6">
-        <WordWorkView :item="temp" :run-chatflow="sendChatflow" />
-      </div>
+  <div class="layout">
+    <div class="lg:w-1/6">
+      <WordListView
+        title="选择模板"
+        :items="hitsory"
+        :loading="loading"
+        @click-mode="handleClickMode"
+        @click="handleClick"
+        @delete="deleteLog"
+      />
     </div>
+    <WordWorkView
+      :item="temp"
+      :params-data="params"
+      :run-chatflow="sendChatflow"
+    />
   </div>
 </template>
+
+<style scoped lang="less">
+.layout {
+  width: 100%;
+  min-width: 1400px;
+  height: 100%;
+  display: flex;
+  background: hsl(216deg 21.74% 95.49%);
+  font-family: AlibabaPuHuiTi, v-deep(var(--ant-font-family)), sans-serif;
+  border-radius: v-deep(var(--ant-border-radius));
+}
+</style>
diff --git a/apps/web-antd/src/views/word/index2.vue b/apps/web-antd/src/views/word/index2.vue
deleted file mode 100644
index 8bd564c..0000000
--- a/apps/web-antd/src/views/word/index2.vue
+++ /dev/null
@@ -1,635 +0,0 @@
-<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/src/ui/ppt/ppt-list-view.vue b/packages/effects/common-ui/src/ui/ppt/ppt-list-view.vue
index 98ebe02..7562aa1 100644
--- a/packages/effects/common-ui/src/ui/ppt/ppt-list-view.vue
+++ b/packages/effects/common-ui/src/ui/ppt/ppt-list-view.vue
@@ -1,38 +1,210 @@
 <script setup lang="ts">
-import type { PPTTempItem } from './typing';
+import type { ConversationsProps } from 'ant-design-x-vue';
 
-import { Card, CardContent, CardHeader, CardTitle } from '@vben-core/shadcn-ui';
+import type { PptHistoryItem } from './typing';
+
+import { computed, ref } from 'vue';
+
+// import { Card, CardContent, CardHeader, CardTitle } from '@vben-core/shadcn-ui';
+import { Menu } from 'ant-design-vue';
+import { Conversations } from 'ant-design-x-vue';
+
+interface Props {
+  items?: PptHistoryItem[];
+  title: string;
+  loading: boolean;
+}
 
 defineOptions({
-  name: 'PptListView',
+  name: 'WordListView',
 });
 
-defineEmits(['click']);
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
+});
+const emit = defineEmits(['click', 'clickMode']);
+const defaultConversationsItems = computed(() => {
+  return props.items.map((item) => {
+    return {
+      key: item.id,
+      label: item.id,
+    };
+  });
+});
+const conversationsItems = ref(defaultConversationsItems);
+const activeKey = ref(defaultConversationsItems.value[0]?.key);
 
-const items: PPTTempItem[] = [
+const itemsData = ref([
   {
-    id: 'ee3889b6-50fa-463e-b956-3b93447727fc',
-    name: '从可研申报书生成科技项目PPT',
+    key: 'baca08c1-e92b-4dc9-a445-3584803f54d4',
+    label: '海南职创申报书生成',
+    title: '海南职创申报书生成',
   },
-];
+]);
+
+// const items2: ItemType[] = reactive([
+//   getItem(
+//     '选择模板',
+//     'grp',
+//     null,
+//     [getItem('海南职创申报书生成', 'baca08c1-e92b-4dc9-a445-3584803f54d4')],
+//     'group',
+//   ),
+// ]);
+
+const handleMenuClick = (item: { key: string }) => {
+  const selectedItem = itemsData.value.find((i) => i.key === item.key);
+  if (selectedItem) {
+    // 转换字段：title -> name, key -> id
+    const transformedItem = {
+      name: selectedItem.title,
+      id: selectedItem.key,
+    };
+    emit('clickMode', transformedItem); // 发送转换后的数据
+  }
+};
+
+const onConversationClick: ConversationsProps['onActiveChange'] = (key) => {
+  activeKey.value = key;
+
+  const matchedItem = props.items.find((item) => item.id === key);
+  if (matchedItem) {
+    emit('click', matchedItem);
+  } else {
+    emit('click', null); // 或者根据业务需求处理未找到的情况
+  }
+};
+
+// const menuConfig: ConversationsProps['menu'] = (conversation) => ({
+//   items: [
+//     {
+//       label: '删除此对话',
+//       key: conversation.key,
+//       icon: h(DeleteOutlined),
+//       danger: true,
+//     },
+//   ],
+//   onClick: (menuInfo) => {
+//     emit('delete', menuInfo.key)
+//   },
+// });
+
+const selectedKeys = ref([]);
+const openKeys = ref([]);
 </script>
 
 <template>
-  <Card style="height: 50vh; 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>
+  <div class="menu">
+    <div class="addBtn">模板</div>
+    <Menu
+      v-model:open-keys="openKeys"
+      v-model:selected-keys="selectedKeys"
+      mode="vertical"
+      class="mode"
+      :items="items"
+      @click="handleMenuClick"
+    />
+    <!-- 🌟 添加会话 -->
+    <!--        <Button type="link" class="addBtn">会话</Button>-->
+    <div class="addBtn">会话</div>
+    <!-- 🌟 添加会话 -->
+
+    <!-- 🌟 会话管理 -->
+    <Conversations
+      :items="conversationsItems"
+      class="conversations"
+      :active-key="activeKey"
+      @active-change="onConversationClick"
+    />
+  </div>
 </template>
+
+<style scoped lang="less">
+.layout {
+  width: 100%;
+  min-width: 1400px;
+  height: 100%;
+  display: flex;
+  background: hsl(216deg 21.74% 95.49%);
+  font-family: AlibabaPuHuiTi, v-deep(var(--ant-font-family)), sans-serif;
+  border-radius: v-deep(var(--ant-border-radius));
+}
+
+.menu {
+  background: #ffffff;
+  width: 200px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.mode {
+  overflow-y: auto;
+}
+
+.conversations {
+  padding: 0 12px;
+  height: 400px;
+  overflow-y: auto;
+}
+
+.chat {
+  height: 100%;
+  width: 100%;
+  max-width: 1000px;
+  max-height: 900px;
+  margin: 0 auto;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  padding: 12px;
+  gap: 16px;
+}
+
+//.messages {
+//  flex: 1;
+//}
+
+.placeholder {
+  padding-top: 32px;
+  text-align: left;
+  flex: 1;
+}
+
+.sender {
+  background: #ffffff;
+  width: 100%;
+  box-shadow: v-deep(var(--ant-box-shadow));
+}
+
+.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: v-deep(var(--ant-color-text));
+  font-size: 16px;
+}
+
+.addBtn {
+  float: left;
+  //border: 1px solid #1677ff34;
+  color: #666666;
+  width: calc(100% - 24px);
+  margin: 12px 12px 24px 12px;
+}
+</style>
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
index 5f918df..204cf17 100644
--- a/packages/effects/common-ui/src/ui/ppt/ppt-work-view.vue
+++ b/packages/effects/common-ui/src/ui/ppt/ppt-work-view.vue
@@ -1,21 +1,30 @@
 <script setup lang="ts">
-import type { BubbleListProps } from 'ant-design-x-vue';
+import type { AttachmentsProps, BubbleListProps } from 'ant-design-x-vue';
 
-import type { DrawerPlacement } from '@vben/common-ui';
+import type { DrawerPlacement } from '@vben-core/popup-ui';
 
 import type { PPTTempItem } from './typing';
 
 import { h, ref, watch } from 'vue';
 
-import { useVbenDrawer } from '@vben/common-ui';
+import { useVbenDrawer } from '@vben-core/popup-ui';
 
-import { Card } from '@vben-core/shadcn-ui';
+import {
+  CloudUploadOutlined,
+  PaperClipOutlined,
+  UserOutlined,
+} from '@ant-design/icons-vue';
+import { Badge, Button, Flex, Typography } from 'ant-design-vue';
+import { Attachments, Bubble, Sender } from 'ant-design-x-vue';
 
-import { UserOutlined } from '@ant-design/icons-vue';
-import { Button, Flex } from 'ant-design-vue';
-import { Attachments, BubbleList, Sender } from 'ant-design-x-vue';
+import WordPreview from '../word/word-preview.vue';
 
-import PptPreview from './ppt-perview.vue';
+interface ResultItem {
+  key: number;
+  role: 'ai' | 'user';
+  content: string;
+  footer?: any;
+}
 
 interface WorkflowParams {
   appid: string;
@@ -36,13 +45,6 @@ interface WorkflowResult {
   };
 }
 
-interface ResultItem {
-  key: number;
-  role: 'ai' | 'user';
-  content: string;
-  footer?: any;
-}
-
 interface Props {
   itemMessage?: ResultItem;
   item?: PPTTempItem;
@@ -52,9 +54,7 @@ interface Props {
   ) => Promise<WorkflowResult>;
 }
 
-defineOptions({
-  name: 'SpiderWorkView',
-});
+defineOptions({ name: 'PlaygroundIndependentSetup' });
 
 const props = withDefaults(defineProps<Props>(), {
   itemMessage: () => null,
@@ -68,12 +68,81 @@ const props = withDefaults(defineProps<Props>(), {
   }),
 });
 
+// const { token } = theme.useToken();
+
+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 }),
+        ),
+      ),
+  },
+};
+
+// ==================== State ====================
+const headerOpen = ref(false);
+const content = ref('');
+const attachedFiles = ref<AttachmentsProps['items']>([]);
+const agentRequestLoading = ref(false);
+const fetchStatus = ref('');
+const resultItems = ref<ResultItem[]>([]);
+const fetchResult = ref('');
+
+// ==================== Runtime ====================
+// const [agent] = useXAgent({
+//   request: async ({ message }, { onSuccess }) => {
+//     agentRequestLoading.value = true;
+//     await sleep();
+//     agentRequestLoading.value = false;
+//     onSuccess(`Mock success return. You said: ${message}`);
+//   },
+// });
+//
+// const {  } = useXChat({
+//   agent: agent.value,
+// });
+
+// watch(
+//   activeKey,
+//   () => {
+//     if (activeKey.value !== undefined) {
+//       setMessages([]);
+//     }
+//   },
+//   { immediate: true },
+// );
+
 const [PreviewDrawer, previewDrawerApi] = useVbenDrawer({
   // 连接抽离的组件
-  connectedComponent: PptPreview,
+  connectedComponent: WordPreview,
   // placement: 'left',
 });
-
 function openPreviewDrawer(
   placement: DrawerPlacement = 'right',
   filename?: string,
@@ -82,6 +151,11 @@ function openPreviewDrawer(
   previewDrawerApi.setState({ placement }).setData(fileData).open();
 }
 
+// ==================== Event ====================
+
+const handleFileChange: AttachmentsProps['onChange'] = (info) =>
+  (attachedFiles.value = info.fileList);
+
 // 判断是否是以 .pptx 结尾的 URL
 function isPptxURL(str: string): boolean {
   return str.endsWith('.pptx');
@@ -97,8 +171,13 @@ function extractPptxFilename(url: string): null | string {
 }
 
 const startFetching = async () => {
-  isFetching.value = true;
+  agentRequestLoading.value = true;
   fetchStatus.value = 'fetching';
+  resultItems.value.push({
+    key: resultItems.value.length + 1,
+    role: 'user',
+    content: content.value,
+  });
 
   try {
     const res = await props.runWorkflow(
@@ -110,12 +189,12 @@ const startFetching = async () => {
         conversationId: '',
         files: [],
         inputs: {
-          declarationDoc: value.value,
+          declarationDoc: content.value,
         },
       },
     );
     const { result } = res.data.outputs;
-    value.value = '';
+    content.value = '';
 
     const filename = ref('');
 
@@ -168,51 +247,55 @@ const startFetching = async () => {
   }
 
   // 模拟抓取完成
-  isFetching.value = false;
+  agentRequestLoading.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 }),
-        ),
-      ),
-  },
-};
+// ==================== Nodes ====================
+// const placeholderNode = computed(() =>
+//   h(
+//     Space,
+//     { direction: 'vertical', size: 16, style: 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 isFetching = ref(false);
-const fetchResult = ref('');
-const fetchStatus = ref('');
-const value = ref('');
-
-const resultItems = ref<ResultItem[]>([]);
+// 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,
+//   }));
+// });
 
 // 监听 itemMessage 变化并更新 resultItems
 watch(
@@ -287,30 +370,162 @@ watch(
 </script>
 
 <template>
-  <div style="display: flex; flex-direction: column" class="h-full">
+  <div class="layout">
     <PreviewDrawer />
-    <div style="flex: 1; padding: 20px; overflow-y: auto">
-      <BubbleList
+    <div class="chat">
+      <!-- 🌟 消息列表 -->
+      <Bubble.List
         variant="shadow"
-        :roles="roles"
         :typing="true"
         :items="resultItems"
+        :roles="roles"
+        style="flex: 1"
       />
-    </div>
-    <Card class="w-full">
+
+      <!-- 🌟 输入框 -->
       <Sender
-        v-model:value="value"
-        :loading="isFetching"
-        :disabled="isFetching"
-        :auto-size="{ minRows: 1, maxRows: 12 }"
+        :value="content"
+        class="sender"
+        :loading="agentRequestLoading"
+        :disabled="agentRequestLoading"
         @submit="startFetching"
-      />
-    </Card>
+        @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>
   </div>
 </template>
 
-<style scoped>
-.markdown-content p:empty {
-  display: none;
+<style scoped lang="less">
+.layout {
+  width: 100%;
+  min-width: 1000px;
+  height: 100%;
+  display: flex;
+  background: hsl(216deg 21.74% 95.49%);
+  font-family: AlibabaPuHuiTi, v-deep(var(--ant-font-family)), sans-serif;
+  border-radius: v-deep(var(--ant-border-radius));
+}
+
+.menu {
+  background: #ffffff;
+  width: 280px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.conversations {
+  padding: 0 12px;
+  flex: 1;
+  overflow-y: auto;
+}
+
+.chat {
+  height: 100%;
+  width: 100%;
+  max-width: 1000px;
+  max-height: 900px;
+  margin: 0 auto;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  padding: 12px;
+  gap: 16px;
+}
+
+//.messages {
+//  flex: 1;
+//}
+
+.placeholder {
+  padding-top: 32px;
+  text-align: left;
+  flex: 1;
+}
+
+.sender {
+  background: #ffffff;
+  box-shadow: v-deep(var(--ant-box-shadow));
+}
+
+.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: v-deep(var(--ant-color-text));
+  font-size: 16px;
+}
+
+.addBtn {
+  background: #1677ff0f;
+  border: 1px solid #1677ff34;
+  width: calc(100% - 24px);
+  margin: 12px 12px 24px 12px;
 }
 </style>
diff --git a/packages/effects/common-ui/src/ui/spider/spider-list-view.vue b/packages/effects/common-ui/src/ui/spider/spider-list-view.vue
index 6f590d0..f76464c 100644
--- a/packages/effects/common-ui/src/ui/spider/spider-list-view.vue
+++ b/packages/effects/common-ui/src/ui/spider/spider-list-view.vue
@@ -1,45 +1,205 @@
 <script setup lang="ts">
+import type { ConversationsProps } from 'ant-design-x-vue';
+
 import type { SpiderItem } from './typing';
 
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@vben-core/shadcn-ui';
+import { computed, ref } from 'vue';
+
+import { Menu } from 'ant-design-vue';
+import { Conversations } from 'ant-design-x-vue';
 
 interface Props {
   items?: SpiderItem[];
+  spiderList?: SpiderItem[];
   title: string;
 }
 
 defineOptions({
   name: 'SpiderListView',
 });
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   items: () => [],
+  spiderList: () => [],
 });
-defineEmits(['click']);
+const emit = defineEmits(['click', 'clickMode']);
+const selectedKeys = ref([]);
+const openKeys = ref([]);
+
+const defaultConversationsItems = computed(() => {
+  return props.items.map((item) => {
+    return {
+      key: item.id,
+      label: item.id,
+    };
+  });
+});
+const conversationsItems = ref(defaultConversationsItems);
+const activeKey = ref(defaultConversationsItems.value[0]?.key);
+const itemsData = ref([
+  {
+    key: 'a2a55334-a111-45e6-942f-9f3f70af8826',
+    label: '全国公共资源交易平台_信息爬取',
+  },
+  {
+    key: 'c736edd0-925d-4877-9223-56aab7342311',
+    label: '广州公共资源交易中心_信息获取',
+  },
+]);
+
+const handleMenuClick = (item: { key: string }) => {
+  const selectedItem = itemsData.value.find((i) => i.key === item.key);
+  if (selectedItem) {
+    // 转换字段：title -> name, key -> id
+    const transformedItem = {
+      name: selectedItem.title,
+      id: selectedItem.key,
+    };
+    emit('clickMode', transformedItem); // 发送转换后的数据
+  }
+};
+
+const onConversationClick: ConversationsProps['onActiveChange'] = (key) => {
+  activeKey.value = key;
+
+  const matchedItem = props.items.find((item) => item.id === key);
+  if (matchedItem) {
+    emit('click', matchedItem);
+  } else {
+    emit('click', null); // 或者根据业务需求处理未找到的情况
+  }
+};
 </script>
 
 <template>
-  <Card style="height: calc(100vh - 120px); overflow-y: auto">
-    <CardHeader class="py-4">
-      <CardTitle class="text-lg">{{ title }}</CardTitle>
-      <CardDescription>请选择需要爬取的网站</CardDescription>
-    </CardHeader>
-    <CardContent class="flex flex-wrap p-5 pt-0">
-      <ul class="divide-border w-full divide-y" role="list">
-        <li
-          v-for="item in items"
-          :key="item.id"
-          @click="$emit('click', item)"
-          class="flex cursor-pointer justify-between gap-x-6 py-5"
-        >
-          {{ item.name }}
-        </li>
-      </ul>
-    </CardContent>
-  </Card>
+  <!--  <Card style="height: calc(100vh - 120px); overflow-y: auto">-->
+  <!--    <CardHeader class="py-4">-->
+  <!--      <CardTitle class="text-lg">{{ title }}</CardTitle>-->
+  <!--      <CardDescription>请选择需要爬取的网站</CardDescription>-->
+  <!--    </CardHeader>-->
+  <!--    <CardContent class="flex flex-wrap p-5 pt-0">-->
+  <!--      <ul class="divide-border w-full divide-y" role="list">-->
+  <!--        <li-->
+  <!--          v-for="item in items"-->
+  <!--          :key="item.id"-->
+  <!--          @click="$emit('click', item)"-->
+  <!--          class="flex cursor-pointer justify-between gap-x-6 py-5"-->
+  <!--        >-->
+  <!--          {{ item.name }}-->
+  <!--        </li>-->
+  <!--      </ul>-->
+  <!--    </CardContent>-->
+  <!--  </Card>-->
+  <div class="menu">
+    <div class="addBtn">数据信息列表</div>
+    <Menu
+      v-model:open-keys="openKeys"
+      v-model:selected-keys="selectedKeys"
+      mode="vertical"
+      class="mode"
+      :items="items"
+      @click="handleMenuClick"
+    />
+    <!-- 🌟 添加会话 -->
+    <!--        <Button type="link" class="addBtn">会话</Button>-->
+    <div class="addBtn">会话</div>
+    <!-- 🌟 添加会话 -->
+
+    <!-- 🌟 会话管理 -->
+    <Conversations
+      :items="conversationsItems"
+      class="conversations"
+      :active-key="activeKey"
+      @active-change="onConversationClick"
+    />
+  </div>
 </template>
+
+<style scoped lang="less">
+.layout {
+  width: 100%;
+  min-width: 1400px;
+  height: 100%;
+  display: flex;
+  background: hsl(216deg 21.74% 95.49%);
+  font-family: AlibabaPuHuiTi, v-deep(var(--ant-font-family)), sans-serif;
+  border-radius: v-deep(var(--ant-border-radius));
+}
+
+.menu {
+  background: #ffffff;
+  width: 200px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.mode {
+  overflow-y: auto;
+}
+
+.conversations {
+  padding: 0 12px;
+  height: 400px;
+  overflow-y: auto;
+}
+
+.chat {
+  height: 100%;
+  width: 100%;
+  max-width: 1000px;
+  max-height: 900px;
+  margin: 0 auto;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  padding: 12px;
+  gap: 16px;
+}
+
+//.messages {
+//  flex: 1;
+//}
+
+.placeholder {
+  padding-top: 32px;
+  text-align: left;
+  flex: 1;
+}
+
+.sender {
+  background: #ffffff;
+  width: 100%;
+  box-shadow: v-deep(var(--ant-box-shadow));
+}
+
+.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: v-deep(var(--ant-color-text));
+  font-size: 16px;
+}
+
+.addBtn {
+  float: left;
+  //border: 1px solid #1677ff34;
+  color: #666666;
+  width: calc(100% - 24px);
+  margin: 12px 12px 24px 12px;
+}
+</style>
diff --git a/packages/effects/common-ui/src/ui/spider/spider-preview.vue b/packages/effects/common-ui/src/ui/spider/spider-preview.vue
new file mode 100644
index 0000000..6a407ae
--- /dev/null
+++ b/packages/effects/common-ui/src/ui/spider/spider-preview.vue
@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+
+import VueOfficeDocx from '@vue-office/docx';
+import { message } from 'ant-design-vue';
+
+import '@vue-office/docx/lib/index.css';
+
+// const url = ref('');
+const isLoading = ref(false); // 新增：加载状态变量
+const docx = ref<any>(`/docx/027c6b7c-fea6-4964-839b-27857c4d3181.docx`);
+const pptStyle = ref({
+  height: 'calc(100vh - 100px)',
+  width: '100%',
+  margin: 'auto',
+});
+const renderedHandler = () => {
+  isLoading.value = false; // 文档渲染完成，关闭加载状态
+  message.success('渲染完成');
+};
+const errorHandler = () => {
+  isLoading.value = false; // 出错时也关闭加载状态
+  message.error('渲染失败');
+};
+const [Drawer, drawerApi] = useVbenDrawer({
+  onCancel() {
+    drawerApi.close();
+  },
+  onClosed() {
+    drawerApi.setState({ overlayBlur: 0, placement: 'right' });
+  },
+  onOpenChange(isOpen: boolean) {
+    if (isOpen) {
+      const data = drawerApi.getData<Record<string, any>>();
+      if (data) {
+        isLoading.value = false; // 出错时也关闭加载状态
+        docx.value = `/docx/${data}`; // 更新 docx 的值
+      }
+      // url.value = drawerApi.getData<Record<string, any>>();
+    }
+  },
+});
+</script>
+<template>
+  <Drawer class="w-[880px]" title="文档预览" :footer="false">
+    <div v-if="isLoading" class="loading-overlay">正在加载文档，请稍候...</div>
+    <VueOfficeDocx
+      :src="docx"
+      :style="pptStyle"
+      @rendered="renderedHandler"
+      @error="errorHandler"
+    />
+  </Drawer>
+</template>
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 09cd637..12d2e23 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
@@ -1,8 +1,13 @@
 <script setup lang="ts">
+import type { BubbleListProps } from 'ant-design-x-vue';
+
+import type { DrawerPlacement } from '@vben-core/popup-ui';
+
 import type { SpiderItem } from './typing';
 
-import { ref } from 'vue';
+import { h, ref, watch } from 'vue';
 
+import { useVbenDrawer } from '@vben-core/popup-ui';
 import {
   Button,
   Card,
@@ -12,12 +17,12 @@ import {
   CardTitle,
 } from '@vben-core/shadcn-ui';
 
-import { message, RangePicker } from 'ant-design-vue';
+import { UserOutlined } from '@ant-design/icons-vue';
+import { Flex, message, RangePicker } from 'ant-design-vue';
+import { Attachments, Bubble } from 'ant-design-x-vue';
 import dayjs, { Dayjs } from 'dayjs';
-// import {Attachments, BubbleList, type BubbleListProps} from "ant-design-x-vue";
-// import {UserOutlined} from "@ant-design/icons-vue";
-// import PptPreview from "../ppt/ppt-perview.vue";
-// import {type DrawerPlacement, useVbenDrawer} from "@vben-core/popup-ui";
+
+import SpiderPreview from './spider-preview.vue';
 
 interface SpiderParams {
   appid: string;
@@ -38,14 +43,15 @@ interface SpiderResult {
   };
 }
 
-// interface ResultItem {
-//   key: number;
-//   role: 'ai' | 'user';
-//   content: string;
-//   footer?: any;
-// }
+interface ResultItem {
+  key: number;
+  role: 'ai' | 'user';
+  content: string;
+  footer?: any;
+}
 
 interface Props {
+  itemMessage?: ResultItem;
   item?: SpiderItem;
   title: string;
   runSpider?: (
@@ -59,6 +65,7 @@ defineOptions({
 });
 
 const props = withDefaults(defineProps<Props>(), {
+  itemMessage: () => null,
   item: () => {
     return null;
   },
@@ -71,21 +78,54 @@ const props = withDefaults(defineProps<Props>(), {
   }),
 });
 
-// const resultItems = ref<ResultItem[]>([]);
+// const styles = computed(() => {
+//   return {
+//     'placeholder': {
+//       'padding-top': '32px',
+//       'text-align': 'left',
+//       'flex': 1,
+//     },
+//   } as const
+// })
 
-// const [PreviewDrawer, previewDrawerApi] = useVbenDrawer({
-//   // 连接抽离的组件
-//   connectedComponent: PptPreview,
-//   // placement: 'left',
-// });
+// 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) })]),
+//       }
+//     ),
+//   ]
+// ))
 
-// function openPreviewDrawer(
-//   placement: DrawerPlacement = 'right',
-//   filename?: string,
-// ) {
-//   const fileData = filename.value;
-//   previewDrawerApi.setState({ placement }).setData(fileData).open();
-// }
+const resultItems = ref<ResultItem[]>([]);
+// const items = computed<BubbleListProps['items']>(() => {
+//   if (resultItems.value.length === 0) {
+//     return [{ content: placeholderNode, variant: 'borderless' }]
+//   }
+//   return resultItems
+// })
+
+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 selectedDateRange = ref<[Dayjs, Dayjs]>([
   dayjs('2025-05-05'),
@@ -93,18 +133,18 @@ const selectedDateRange = ref<[Dayjs, Dayjs]>([
 ]);
 
 // 判断是否是以 .docx 结尾的 URL
-// function isDocxURL(str: string): boolean {
-//   return str.endsWith('.docx');
-// }
-//
-// // 使用正则提取 /static/ 后面的文件名部分
-// function extractDocxFilename(url: string): null | string {
-//   const match = url.match(/\/static\/([a-f0-9-]+\.docx)$/i);
-//   if (match) {
-//     return match[1]; // 返回类似：9e1c421e-991c-411f-8176-6350a97e70f3.docx
-//   }
-//   return null;
-// }
+function isDocxURL(str: string): boolean {
+  return str.endsWith('.docx');
+}
+
+// 使用正则提取 /static/ 后面的文件名部分
+function extractDocxFilename(url: string): null | string {
+  const match = url.match(/\/static\/([a-f0-9-]+\.docx)$/i);
+  if (match) {
+    return match[1]; // 返回类似：9e1c421e-991c-411f-8176-6350a97e70f3.docx
+  }
+  return null;
+}
 
 const startFetching = async () => {
   // 更新状态为“抓取中”
@@ -140,65 +180,65 @@ const startFetching = async () => {
       // 保存抓取结果
       fetchResult.value = res.data.outputs.result;
       message.success('抓取成功');
+      const { result } = res.data.outputs;
+
+      const filename = ref('');
+
+      if (result && isDocxURL(result)) {
+        filename.value = extractDocxFilename(result);
+      }
+
+      // 保存抓取结果 url http://47.112.173.8:6802/static/66f3cfd95e364a239d8036390db658ae.docx
+      fetchResult.value = `/static/${filename.value}`;
+      resultItems.value.push({
+        key: resultItems.value.length + 1,
+        role: 'ai',
+        content: '文档已生成',
+        footer: h(Flex, null, [
+          h(
+            Button,
+            {
+              size: 'nomarl',
+              type: 'primary',
+              onClick: () => {
+                openPreviewDrawer('right', filename);
+              },
+            },
+            '文档预览',
+          ),
+          h(
+            Button,
+            {
+              size: 'nomarl',
+              type: 'primary',
+              style: {
+                marginLeft: '10px',
+              },
+              onClick: () => {
+                // 创建隐藏的 <a> 标签用于触发下载
+                const link = document.createElement('a');
+                link.href = result; // 设置下载链接
+                link.download = filename; // 设置下载文件名
+                document.body.append(link); // 将 <a> 标签添加到页面中
+                link.click(); // 触发点击事件开始下载
+                link.remove(); // 下载完成后移除 <a> 标签
+              },
+            },
+            '文档下载',
+          ),
+        ]),
+      });
+      fetchStatus.value = 'completed';
     } else {
       fetchResult.value = '';
       message.error('抓取无结果');
     }
-    // const { result } = res.data.outputs;
-    //
-    // const filename = ref('');
-    //
-    // if (result && isDocxURL(result)) {
-    //   filename.value = extractDocxFilename(result);
-    // }
-    //
-    // // 保存抓取结果 url http://47.112.173.8:6802/static/66f3cfd95e364a239d8036390db658ae.docx
-    // fetchResult.value = `/static/${filename.value}`;
-    // resultItems.value.push({
-    //   key: resultItems.value.length + 1,
-    //   role: 'ai',
-    //   content: '文档已生成',
-    //   footer: h(Flex, null, [
-    //     h(
-    //       Button,
-    //       {
-    //         size: 'nomarl',
-    //         type: 'primary',
-    //         onClick: () => {
-    //           openPreviewDrawer('right', filename);
-    //         },
-    //       },
-    //       '文档预览',
-    //     ),
-    //     h(
-    //       Button,
-    //       {
-    //         size: 'nomarl',
-    //         type: 'primary',
-    //         style: {
-    //           marginLeft: '10px',
-    //         },
-    //         onClick: () => {
-    //           // 创建隐藏的 <a> 标签用于触发下载
-    //           const link = document.createElement('a');
-    //           link.href = result; // 设置下载链接
-    //           link.download = filename; // 设置下载文件名
-    //           document.body.append(link); // 将 <a> 标签添加到页面中
-    //           link.click(); // 触发点击事件开始下载
-    //           link.remove(); // 下载完成后移除 <a> 标签
-    //         },
-    //       },
-    //       '文档下载',
-    //     ),
-    //   ]),
-    // });
   } catch (error) {
     console.error(error);
   }
 
   // 模拟抓取完成
   isFetching.value = false;
-  fetchStatus.value = 'completed';
 };
 
 // 下载文件逻辑
@@ -220,58 +260,130 @@ const downloadFile = () => {
 };
 
 // 列表角色
-// 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 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('');
+
+// 监听 itemMessage 变化并更新 resultItems
+watch(
+  () => props.itemMessage,
+  (newVal) => {
+    resultItems.value = [];
+    if (newVal && newVal.length > 0) {
+      newVal.forEach((msg) => {
+        // resultItems.value.push({
+        //   key: resultItems.value.length + 1,
+        //   role: msg.role, // 'user' or 'ai'
+        //   content: msg.content,
+        //   footer: msg.footer,
+        // });
+        if (msg.role === 'user') {
+          resultItems.value.push({
+            key: resultItems.value.length + 1,
+            role: msg.role, // 'user' or 'ai'
+            content: msg.content,
+            footer: msg.footer,
+          });
+        } else {
+          const filename = ref('');
+
+          if (msg.content && isDocxURL(msg.content)) {
+            filename.value = extractDocxFilename(msg.content);
+          }
+          resultItems.value.push({
+            key: resultItems.value.length + 1,
+            role: msg.role, // 'user' or 'ai'
+            content: '文档已生成',
+            footer: h(Flex, null, [
+              h(
+                Button,
+                {
+                  size: 'nomarl',
+                  type: 'primary',
+                  onClick: () => {
+                    openPreviewDrawer('right', filename);
+                  },
+                },
+                '文档预览',
+              ),
+              h(
+                Button,
+                {
+                  size: 'nomarl',
+                  type: 'primary',
+                  style: {
+                    marginLeft: '10px',
+                  },
+                  onClick: () => {
+                    // 创建隐藏的 <a> 标签用于触发下载
+                    const link = document.createElement('a');
+                    link.href = msg.content; // 设置下载链接
+                    link.download = filename; // 设置下载文件名
+                    document.body.append(link); // 将 <a> 标签添加到页面中
+                    link.click(); // 触发点击事件开始下载
+                    link.remove(); // 下载完成后移除 <a> 标签
+                  },
+                },
+                '文档下载',
+              ),
+            ]),
+          });
+        }
+      });
+    }
+  },
+  { deep: true },
+);
 </script>
 
 <template>
   <!--  style="flex-direction: column"-->
-  <div class="flex h-full">
+  <div class="flex h-full" style="width: 70%">
+    <PreviewDrawer />
     <!--    <PreviewDrawer />-->
-    <!--    <div style="flex:1; padding: 20px; overflow-y: auto">-->
-    <!--      <BubbleList-->
-    <!--        variant="shadow"-->
-    <!--        :roles="roles"-->
-    <!--        :typing="true"-->
-    <!--        :items="resultItems"-->
-    <!--      />-->
-    <!--    </div>-->
+    <Bubble.List
+      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>
diff --git a/packages/effects/common-ui/src/ui/word/word-list-view.vue b/packages/effects/common-ui/src/ui/word/word-list-view.vue
index d708f56..62d01c1 100644
--- a/packages/effects/common-ui/src/ui/word/word-list-view.vue
+++ b/packages/effects/common-ui/src/ui/word/word-list-view.vue
@@ -1,38 +1,205 @@
 <script setup lang="ts">
-import type { WordTempItem } from './typing';
+import type { ConversationsProps } from 'ant-design-x-vue';
 
-import { Card, CardContent, CardHeader, CardTitle } from '@vben-core/shadcn-ui';
+import type { WordHistoryItem } from './typing';
+
+import { computed, h, ref } from 'vue';
+
+import { DeleteOutlined } from '@ant-design/icons-vue';
+// import { Card, CardContent, CardHeader, CardTitle } from '@vben-core/shadcn-ui';
+import { Menu } from 'ant-design-vue';
+import { Conversations } from 'ant-design-x-vue';
+
+interface Props {
+  items?: WordHistoryItem[];
+  title: string;
+  loading: boolean;
+}
 
 defineOptions({
   name: 'WordListView',
 });
 
-defineEmits(['click']);
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
+});
+const emit = defineEmits(['click', 'clickMode', 'delete']);
+const defaultConversationsItems = computed(() => {
+  return props.items.map((item) => {
+    return {
+      key: item.id,
+      label: item.name,
+    };
+  });
+});
+const conversationsItems = ref(defaultConversationsItems);
+const activeKey = ref(defaultConversationsItems.value[0]?.key);
 
-const items: WordTempItem[] = [
+const itemsData = ref([
   {
-    id: 'baca08c1-e92b-4dc9-a445-3584803f54d4',
-    name: '职业创新申报书',
+    key: 'baca08c1-e92b-4dc9-a445-3584803f54d4',
+    label: '海南职创申报书生成',
+    title: '海南职创申报书生成',
   },
-];
+]);
+
+// const items2: ItemType[] = reactive([
+//   getItem(
+//     '选择模板',
+//     'grp',
+//     null,
+//     [getItem('海南职创申报书生成', 'baca08c1-e92b-4dc9-a445-3584803f54d4')],
+//     'group',
+//   ),
+// ]);
+
+const handleMenuClick = (item: { key: string }) => {
+  const selectedItem = itemsData.value.find((i) => i.key === item.key);
+  if (selectedItem) {
+    // 转换字段：title -> name, key -> id
+    const transformedItem = {
+      name: selectedItem.title,
+      id: selectedItem.key,
+    };
+    emit('clickMode', transformedItem); // 发送转换后的数据
+  }
+};
+
+const onConversationClick: ConversationsProps['onActiveChange'] = (key) => {
+  activeKey.value = key;
+  emit('click', key);
+};
+
+const menuConfig: ConversationsProps['menu'] = (conversation) => ({
+  items: [
+    {
+      label: '删除此对话',
+      key: conversation.key,
+      icon: h(DeleteOutlined),
+      danger: true,
+    },
+  ],
+  onClick: (menuInfo) => {
+    emit('delete', menuInfo.key);
+  },
+});
+
+const selectedKeys = ref([]);
+const openKeys = ref([]);
 </script>
 
 <template>
-  <Card style="height: 50vh; 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>
+  <div class="menu">
+    <div class="addBtn">模板</div>
+    <Menu
+      v-model:open-keys="openKeys"
+      v-model:selected-keys="selectedKeys"
+      mode="vertical"
+      class="mode"
+      :items="items"
+      @click="handleMenuClick"
+    />
+    <!-- 🌟 添加会话 -->
+    <!--        <Button type="link" class="addBtn">会话</Button>-->
+    <div class="addBtn">会话</div>
+    <!-- 🌟 添加会话 -->
+
+    <!-- 🌟 会话管理 -->
+    <Conversations
+      :items="conversationsItems"
+      :menu="menuConfig"
+      class="conversations"
+      :active-key="activeKey"
+      @active-change="onConversationClick"
+    />
+  </div>
 </template>
+
+<style scoped lang="less">
+.layout {
+  width: 100%;
+  min-width: 1400px;
+  height: 100%;
+  display: flex;
+  background: hsl(216deg 21.74% 95.49%);
+  font-family: AlibabaPuHuiTi, v-deep(var(--ant-font-family)), sans-serif;
+  border-radius: v-deep(var(--ant-border-radius));
+}
+
+.menu {
+  background: #ffffff;
+  width: 200px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.mode {
+  overflow-y: auto;
+}
+
+.conversations {
+  padding: 0 12px;
+  overflow-y: auto;
+}
+
+.chat {
+  height: 100%;
+  width: 100%;
+  max-width: 1000px;
+  max-height: 900px;
+  margin: 0 auto;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  padding: 12px;
+  gap: 16px;
+}
+
+//.messages {
+//  flex: 1;
+//}
+
+.placeholder {
+  padding-top: 32px;
+  text-align: left;
+  flex: 1;
+}
+
+.sender {
+  background: #ffffff;
+  width: 100%;
+  box-shadow: v-deep(var(--ant-box-shadow));
+}
+
+.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: v-deep(var(--ant-color-text));
+  font-size: 16px;
+}
+
+.addBtn {
+  float: left;
+  //border: 1px solid #1677ff34;
+  color: #666666;
+  width: calc(100% - 24px);
+  margin: 12px 12px 24px 12px;
+}
+</style>
diff --git a/packages/effects/common-ui/src/ui/word/word-work-view.vue b/packages/effects/common-ui/src/ui/word/word-work-view.vue
index 0e2916e..c28df8f 100644
--- a/packages/effects/common-ui/src/ui/word/word-work-view.vue
+++ b/packages/effects/common-ui/src/ui/word/word-work-view.vue
@@ -1,19 +1,33 @@
 <script setup lang="ts">
-import type { BubbleListProps } from 'ant-design-x-vue';
+import type {
+  AttachmentsProps,
+  BubbleListProps,
+  PromptsProps,
+} from 'ant-design-x-vue';
 
-import type { DrawerPlacement } from '@vben/common-ui';
+import type { DrawerPlacement } from '@vben-core/popup-ui';
 
 import type { WordTempItem } from './typing';
 
-import { h, ref } from 'vue';
+import { computed, h, ref, watch } from 'vue';
 
-import { useVbenDrawer } from '@vben/common-ui';
+import { useVbenDrawer } from '@vben-core/popup-ui';
 
-import { Card } from '@vben-core/shadcn-ui';
-
-import { UserOutlined } from '@ant-design/icons-vue';
-import { Button, Flex, message, Typography } from 'ant-design-vue';
-import { Attachments, BubbleList, Sender } from 'ant-design-x-vue';
+import {
+  CloudUploadOutlined,
+  PaperClipOutlined,
+  UserOutlined,
+} from '@ant-design/icons-vue';
+// import type { VNode } from 'vue';
+import { Badge, Button, Flex, message, Typography } from 'ant-design-vue';
+import {
+  Attachments,
+  Bubble,
+  Prompts,
+  Sender,
+  useXAgent,
+  useXChat,
+} from 'ant-design-x-vue';
 import markdownit from 'markdown-it';
 
 import WordPreview from './word-preview.vue';
@@ -44,18 +58,18 @@ interface WorkflowResult {
 
 interface Props {
   item?: WordTempItem;
+  paramsData?: {};
   runChatflow?: (
     params: WorkflowParams,
     context: WorkflowContext,
   ) => Promise<WorkflowResult>;
 }
 
-defineOptions({
-  name: 'SpiderWorkView',
-});
+defineOptions({ name: 'PlaygroundIndependentSetup' });
 
 const props = withDefaults(defineProps<Props>(), {
   item: () => null,
+  paramsData: () => null,
   runChatflow: () => async () => ({
     data: {
       outputs: {
@@ -65,6 +79,15 @@ const props = withDefaults(defineProps<Props>(), {
   }),
 });
 
+// const { token } = theme.useToken();
+
+interface ResultItem {
+  key: number;
+  role: 'ai' | 'user';
+  content: string;
+  footer?: any;
+}
+
 // 初始化 markdown 解析器
 const md = markdownit({ html: true, breaks: true });
 
@@ -83,7 +106,102 @@ const renderMarkdown: BubbleListProps['roles'][string]['messageRender'] = (
   ]);
 };
 
+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?',
+  },
+];
+// {
+//   key: '1',
+//     description: '生成项目摘要',
+//   icon: h(ReadOutlined, { style: { color: '#FF4D4F' } }),
+// },
+
+const senderPromptsItems = computed(() => {
+  if (typeof props.paramsData !== 'object' || props.paramsData === null)
+    return [];
+
+  return Object.keys(props.paramsData).map((key, index) => ({
+    key: index,
+    description: props.paramsData[key],
+  }));
+});
+
+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' } },
+    messageRender: (content) =>
+      h(Typography, [
+        h('div', {
+          innerHTML: md.render(content),
+          style: {
+            // padding: '8px',
+            lineHeight: '1.6',
+            whiteSpace: 'break-spaces',
+          },
+        }),
+      ]),
+  },
+  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 }),
+        ),
+      ),
+  },
+};
+
+// ==================== 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);
+const projectName = ref<string>('');
+const inputStatus = ref<string>('');
+const fetchStatus = ref('');
+const resultItems = ref<ResultItem[]>([]);
 const conversationId = ref('');
+const fetchResult = ref('');
+// ==================== Runtime ====================
+const [agent] = useXAgent({
+  request: async ({ message }, { onSuccess }) => {
+    agentRequestLoading.value = true;
+    await sleep();
+    agentRequestLoading.value = false;
+    onSuccess(`Mock success return. You said: ${message}`);
+  },
+});
 
 const [PreviewDrawer, previewDrawerApi] = useVbenDrawer({
   // 连接抽离的组件
@@ -97,7 +215,28 @@ function openPreviewDrawer(
   const fileData = filename.value;
   previewDrawerApi.setState({ placement }).setData(fileData).open();
 }
-const inputStatus = ref<string>('');
+
+const { setMessages } = useXChat({
+  agent: agent.value,
+});
+
+watch(
+  activeKey,
+  () => {
+    if (activeKey.value !== undefined) {
+      setMessages([]);
+    }
+  },
+  { immediate: true },
+);
+
+// ==================== Event ====================
+// function onSubmit(nextContent: string) {
+//   if (!nextContent) return;
+//   onRequest(nextContent);
+//   content.value = '';
+// }
+
 const startFetching = async () => {
   // 项目名称为空时阻止发送并提示
   if (!projectName.value.trim()) {
@@ -106,12 +245,12 @@ const startFetching = async () => {
     return;
   }
 
-  isFetching.value = true;
+  agentRequestLoading.value = true;
   fetchStatus.value = 'fetching';
   resultItems.value.push({
     key: resultItems.value.length + 1,
     role: 'user',
-    content: value.value,
+    content: content.value,
   });
 
   try {
@@ -126,10 +265,10 @@ const startFetching = async () => {
         inputs: {
           projectName: projectName.value,
         },
-        content: value.value || '',
+        content: content.value || '',
       },
     );
-    value.value = '';
+    content.value = '';
     const { answer } = res;
     conversationId.value = res.conversationId;
 
@@ -203,124 +342,235 @@ const startFetching = async () => {
   }
 
   // 模拟抓取完成
-  isFetching.value = false;
+  agentRequestLoading.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' } },
-    messageRender: (content) =>
-      h(Typography, [
-        h('div', {
-          innerHTML: md.render(content),
-          style: {
-            // padding: '8px',
-            lineHeight: '1.6',
-            whiteSpace: 'break-spaces',
-          },
-        }),
-      ]),
-  },
-  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 onPromptsItemClick: PromptsProps['onItemClick'] = (info) => {
+  content.value = info.data.description;
 };
 
-const isFetching = ref(false);
-const fetchResult = ref('');
-const fetchStatus = ref('');
-const projectName = ref<string>('');
-const value = ref('');
+const handleFileChange: AttachmentsProps['onChange'] = (info) =>
+  (attachedFiles.value = info.fileList);
 
-interface ResultItem {
-  key: number;
-  role: 'ai' | 'user';
-  content: string;
-  footer?: any;
-}
+// ==================== Nodes ====================
+// const placeholderNode = computed(() =>
+//   h(
+//     Space,
+//     { direction: 'vertical', size: 16, style: 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 insertTextToInput = (text: string) => {
-  value.value = text + value.value;
-};
-
-const resultItems = ref<ResultItem[]>([]);
+// 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,
+//   }));
+// });
 </script>
 
 <template>
-  <div style="display: flex; flex-direction: column" class="h-full">
+  <div class="layout">
     <PreviewDrawer />
-    <a-space class="w-full" direction="vertical" style="padding-top: 20px">
-      <a-input
-        v-model:value="projectName"
-        required
-        placeholder="项目名称"
-        :status="inputStatus"
-      />
-    </a-space>
-    <div style="flex: 1; padding: 20px; overflow-y: auto">
-      <BubbleList
-        :roles="roles"
-        :typing="true"
+    <div class="chat">
+      <a-space class="w-full" direction="vertical" style="padding-top: 20px">
+        <a-input
+          v-model:value="projectName"
+          required
+          placeholder="项目名称"
+          :status="inputStatus"
+        />
+      </a-space>
+      <!-- 🌟 消息列表 -->
+      <Bubble.List
         :items="resultItems"
+        :roles="roles"
+        style="flex: 1"
         :message-render="renderMarkdown"
       />
+
+      <!-- 🌟 提示词 -->
+      <Prompts
+        :items="senderPromptsItems"
+        @item-click="onPromptsItemClick"
+        :wrap="true"
+      />
+
+      <!-- 🌟 输入框 -->
+      <Sender
+        :value="content"
+        class="sender"
+        :loading="agentRequestLoading"
+        @submit="startFetching"
+        @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>
-    <Flex wrap="wrap" :gap="12" class="w-full" style="align-items: flex-end">
-      <Button @click="insertTextToInput('生成项目摘要')">生成项目摘要</Button>
-      <Button @click="insertTextToInput('生成目前存在问题')">
-        生成目前存在问题
-      </Button>
-      <Button @click="insertTextToInput('生成项目采用的技术原理')">
-        生成项目采用的技术原理
-      </Button>
-      <Button @click="insertTextToInput('生成能解决的主要问题')">
-        生成能解决的主要问题
-      </Button>
-      <Button @click="insertTextToInput('生成技术关键点和创新点')">
-        生成技术关键点和创新点
-      </Button>
-      <Button @click="insertTextToInput('生成应用前景')">生成应用前景</Button>
-      <Button @click="insertTextToInput('生成项目实施及效益预测')">
-        生成项目实施及效益预测
-      </Button>
-      <Button @click="insertTextToInput('生成预期成果')">生成预期成果</Button>
-      <Button @click="insertTextToInput('生成导出doc')">生成导出doc</Button>
-      <Card class="w-full">
-        <Sender
-          v-model:value="value"
-          :loading="isFetching"
-          :disabled="isFetching"
-          :auto-size="{ minRows: 1, maxRows: 12 }"
-          @submit="startFetching"
-        />
-      </Card>
-    </Flex>
   </div>
 </template>
+
+<style scoped lang="less">
+.layout {
+  width: 100%;
+  min-width: 1400px;
+  height: 100%;
+  display: flex;
+  background: hsl(216deg 21.74% 95.49%);
+  font-family: AlibabaPuHuiTi, v-deep(var(--ant-font-family)), sans-serif;
+  border-radius: v-deep(var(--ant-border-radius));
+}
+
+.menu {
+  background: #ffffff;
+  width: 280px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.conversations {
+  padding: 0 12px;
+  flex: 1;
+  overflow-y: auto;
+}
+
+.chat {
+  height: 100%;
+  width: 100%;
+  max-width: 1000px;
+  max-height: 900px;
+  margin: 0 auto;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  padding: 12px;
+  gap: 16px;
+}
+
+//.messages {
+//  flex: 1;
+//}
+
+.placeholder {
+  padding-top: 32px;
+  text-align: left;
+  flex: 1;
+}
+
+.sender {
+  background: #ffffff;
+  width: 100%;
+  box-shadow: v-deep(var(--ant-box-shadow));
+}
+
+.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: v-deep(var(--ant-color-text));
+  font-size: 16px;
+}
+
+.addBtn {
+  background: #1677ff0f;
+  border: 1px solid #1677ff34;
+  width: calc(100% - 24px);
+  margin: 12px 12px 24px 12px;
+}
+</style>
diff --git a/packages/icons/src/iconify/index.ts b/packages/icons/src/iconify/index.ts
index a225485..cadc34e 100644
--- a/packages/icons/src/iconify/index.ts
+++ b/packages/icons/src/iconify/index.ts
@@ -18,4 +18,5 @@ export const EosRole = createIconifyIcon('eos-icons:role-binding-outlined');
 export const IconSystem = createIconifyIcon('icon-park-twotone:system');
 export const MaterPerson = createIconifyIcon('material-symbols:person');
 export const IconLog = createIconifyIcon('icon-park-outline:log');
+export const HugeAi = createIconifyIcon('hugeicons:ai-scan');
 // export const MdiUser = createIconifyIcon('mdi:user');