refactor(@vben/web-antd): 重构 Word 页面布局和功能

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

@@ -299,7 +299,7 @@ const [agent] = useXAgent({
     agentRequestLoading.value = true;
     const res = await sendWorkflow(
       {
-        appid: 'baca08c1-e92b-4dc9-a445-3584803f54d4',
+        appid: 'ee3889b6-50fa-463e-b956-3b93447727fc',
       },
       {
         userId: '1563',
@@ -311,9 +311,9 @@ const [agent] = useXAgent({
       },
     );
     agentRequestLoading.value = false;
-    if (res.data.data.outputs.result) {
+    if (res.data.outputs.result) {
-      onSuccess(`下载链接:${res.data.data.outputs.result}`);
+      onSuccess(`下载链接:${res.data.outputs.result}`);
-      const url = new URL(res.data.data.outputs.result);
+      const url = new URL(res.data.outputs.result);
       pptx.value = url.pathname;
     } else {
       onSuccess('发生异常，可以输入更多信息再让我来回答或重试。');

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

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="tsx">
 import type {
   AttachmentsProps,
   BubbleListProps,
@@ -53,6 +53,25 @@ defineOptions({ name: 'PlaygroundIndependentSetup' });
 
 const { token } = theme.useToken();
 
+const groupable: ConversationsProps['groupable'] = {
+  sort(a, b) {
+    if (a === b) return 0;
+
+    return a === 'history' ? -1 : 1;
+  },
+  title: (group, { components: { GroupTitle } }) =>
+    group ? (
+      <GroupTitle>
+        <Space>
+          <CommentOutlined />
+          <span>{group === 'history' ? '会话记录' : 'PPT模板'}</span>
+        </Space>
+      </GroupTitle>
+    ) : (
+      <GroupTitle />
+    ),
+};
+
 const styles = computed(() => {
   return {
     layout: {
@@ -127,7 +146,7 @@ const styles = computed(() => {
   } as const;
 });
 
-const pptx = ref<any>('/static/9e1c421e-991c-411f-8176-6350a97e70f3.docx');
+const docx = ref<any>('/static/9e1c421e-991c-411f-8176-6350a97e70f3.docx');
 
 const [messageApi, contextHolder] = message.useMessage();
 
@@ -170,21 +189,21 @@ const placeholderPromptsItems: PromptsProps['items'] = [
     key: '1',
     label: renderTitle(
       h(FireOutlined, { style: { color: '#FF4D4F' } }),
-      'Hot Topics',
+      '热门话题',
     ),
-    description: 'What are you interested in?',
+    description: '你对什么感兴趣?',
     children: [
       {
         key: '1-1',
-        description: `What's new in X?`,
+        description: `X有什么新功能?`,
       },
       {
         key: '1-2',
-        description: `What's AGI?`,
+        description: `AGI是什么?`,
       },
       {
         key: '1-3',
-        description: `Where is the doc?`,
+        description: `医生在哪里？`,
       },
     ],
   },
@@ -192,24 +211,24 @@ const placeholderPromptsItems: PromptsProps['items'] = [
     key: '2',
     label: renderTitle(
       h(ReadOutlined, { style: { color: '#1890FF' } }),
-      'Design Guide',
+      '设计指导',
     ),
-    description: 'How to design a good product?',
+    description: '如何设计一个好的产品?',
     children: [
       {
         key: '2-1',
         icon: h(HeartOutlined),
-        description: `Know the well`,
+        description: `了解情况`,
       },
       {
         key: '2-2',
         icon: h(SmileOutlined),
-        description: `Set the AI role`,
+        description: `设置AI角色`,
       },
       {
         key: '2-3',
         icon: h(CommentOutlined),
-        description: `Express the feeling`,
+        description: `表达感受`,
       },
     ],
   },
@@ -218,12 +237,12 @@ const placeholderPromptsItems: PromptsProps['items'] = [
 const senderPromptsItems: PromptsProps['items'] = [
   {
     key: '1',
-    description: 'Hot Topics',
+    description: '热门话题',
     icon: h(FireOutlined, { style: { color: '#FF4D4F' } }),
   },
   {
     key: '2',
-    description: 'Design Guide',
+    description: '设计指导',
     icon: h(ReadOutlined, { style: { color: '#1890FF' } }),
   },
 ];
@@ -274,10 +293,10 @@ const [agent] = useXAgent({
       },
     );
     agentRequestLoading.value = false;
-    if (res.data.answer) {
+    if (res.answer) {
-      onSuccess(res.data.answer);
+      onSuccess(res.answer);
-      const url = new URL(res.data.answer);
+      const url = new URL(res.answer);
-      pptx.value = url.pathname;
+      docx.value = url.pathname;
     } else {
       onSuccess('发生异常，可以输入更多信息再让我来回答或重试。');
     }
@@ -319,7 +338,8 @@ function onAddConversation() {
     ...conversationsItems.value,
     {
       key: `${conversationsItems.value.length}`,
-      label: `New Conversation ${conversationsItems.value.length}`,
+      label: `会话 ${conversationsItems.value.length}`,
+      group: 'history',
     },
   ];
   activeKey.value = `${conversationsItems.value.length}`;
@@ -341,16 +361,16 @@ const placeholderNode = computed(() =>
       h(Welcome, {
         variant: 'borderless',
         icon: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp',
-        title: "Hello, I'm Ant Design X",
+        title: '欢迎使用Word自动生成',
         description:
-          'Base on Ant Design, AGI product interface solution, create a better intelligent vision~',
+          '基于Ant Design，提供AGI产品接口解决方案，打造更好的智能视觉~',
         extra: h(Space, {}, [
           h(Button, { icon: h(ShareAltOutlined) }),
           h(Button, { icon: h(EllipsisOutlined) }),
         ]),
       }),
       h(Prompts, {
-        title: 'Do you want?',
+        title: '你想要?',
         items: placeholderPromptsItems,
         styles: {
           list: {
@@ -393,14 +413,15 @@ const getConversationList = async () => {
       limit: '5',
     },
   );
-  if (res.status === 200) {
+  if (res.data.length > 0) {
-    conversationsItems.value = res.data.data.map((item: any) => {
+    conversationsItems.value = res.data.map((item: any) => {
       return {
         key: item.id,
         label: item.name,
+        group: 'history',
       };
     });
-    activeKey.value = res.data.data[0].id;
+    activeKey.value = res.data[0].id;
   }
 };
 
@@ -444,14 +465,14 @@ const handleQuoteClick = () => {
 
 // 定义模板数据
 const templates = ref([
-  { label: '模板1', key: '1' },
+  { label: '模板1', key: '333', group: 'model' },
-  { label: '模板2', key: '2' },
+  { label: '模板2', key: '334', group: 'model' },
-  { label: '模板3', key: '3' },
+  { label: '模板3', key: '335', group: 'model' },
-  { label: '模板34', key: '4' },
+  { label: '模板34', key: '336', group: 'model' },
-  { label: '模板35', key: '5' },
+  { label: '模板35', key: '337', group: 'model' },
-  { label: '模板36', key: '7' },
+  { label: '模板36', key: '338', group: 'model' },
-  { label: '模板37', key: '8' },
+  { label: '模板37', key: '339', group: 'model' },
-  { label: '模板38', key: '9' },
+  { label: '模板38', key: '340', group: 'model' },
 ]);
 
 // 监听模板选择事件
@@ -459,7 +480,7 @@ const onModeClick: ConversationsProps['onActiveChange'] = (key) => {
   acticeModeKey.value = key;
 };
 
-// 定义 pptx 的样式
+// 定义 docx 的样式
 const pptStyle = ref({
   height: 'calc(100vh - 150px) !import',
   width: '40%',
@@ -493,52 +514,58 @@ onMounted(() => {
   <div :style="styles.layout" style="height: calc(100vh - 70px)">
     <contextHolder />
     <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">
+      <Button
+        type="link"
+        :style="styles.addBtn"
+        style="margin-top: 20px"
+        @click="onAddConversation"
+      >
         <PlusOutlined />
         新建会话
       </Button>
 
       <!-- 🌟 会话管理 -->
-      <Conversations
+      <div
-        :items="conversationsItems"
+        style="
-        :style="styles.conversations"
+          display: flex;
-        :active-key="activeKey"
+          flex-direction: column;
-        :menu="menuConfig"
+          justify-content: space-between;
-        @active-change="onConversationClick"
+          height: 70%;
-      />
+        "
-      <!-- 🌟 会话管理 -->
+      >
-      <Typography.Title :level="5" style="margin: 0 0 8px">
+        <Conversations
-        选择模板
+          :items="conversationsItems"
-      </Typography.Title>
+          :style="styles.conversations"
-      <Conversations
+          style="height: 35%"
-        :items="templates"
+          :active-key="activeKey"
-        :style="styles.conversations"
+          :menu="menuConfig"
-        :active-key="acticeModeKey"
+          :groupable="groupable"
-        :menu="menuConfig"
+          @active-change="onConversationClick"
-        @active-change="onModeClick"
+        />
-      />
+
+        <!-- 🌟 会话管理 -->
+        <Conversations
+          :items="templates"
+          :style="styles.conversations"
+          :active-key="acticeModeKey"
+          :menu="menuConfig"
+          :groupable="groupable"
+          @active-change="onModeClick"
+        />
+      </div>
 
       <!-- 🌟 项目名称输入 -->
-      <Typography.Title :level="5" style="margin: 16px 0 8px">
+      <div style="height: 30%">
-        项目名称
+        <Typography.Title :level="5" style="margin: 16px 0 8px">
-      </Typography.Title>
+          项目名称
-      <a-input
+        </Typography.Title>
-        v-model:value="projectName"
+        <a-input
-        placeholder="请输入项目名称"
+          v-model:value="projectName"
-        :style="{ margin: '10px 5%', padding: '0 8px', width: '90%' }"
+          placeholder="请输入项目名称"
-      />
+          :style="{ margin: '10px 5%', padding: '0 8px', width: '90%' }"
+        />
+      </div>
     </div>
 
     <div :style="styles.chat" style="margin-left: 20px">
@@ -621,7 +648,7 @@ onMounted(() => {
       </Sender>
     </div>
     <VueOfficeDocx
-      :src="pptx"
+      :src="docx"
       :style="pptStyle"
       @rendered="renderedHandler"
       @error="errorHandler"

apps/web-antd/vite.config.mts

@@ -13,13 +13,13 @@ export default defineConfig(async () => {
             target: 'http://localhost:8081/api',
             ws: true,
           },
-          '/static/**/*.docx': {
+          '/static/*.ppt': {
-            changeOrigin: true,
-            target: 'http://47.112.173.8:6805',
-          },
-          '/static': {
-            changeOrigin: true,
             target: 'http://47.112.173.8:6802',
+            changeOrigin: true,
+          },
+          '/static/*.docx': {
+            target: 'http://47.112.173.8:6805',
+            changeOrigin: true,
           },
           '/v1': {
             changeOrigin: true,