refactor(@vben/web-antd): 优化 word 模块功能和界面

- 移除 authentication.json 中的冗余文本
- 新增 getMessages 接口用于获取消息列表
- 重构 word-history-view 和 word-work-view 组件
- 优化文档预览样式
- 修复聊天窗口的滚动问题
- 增加项目名称验证和错误提示

apps/web-antd/src/api/core/chatflow.ts

@@ -15,6 +15,13 @@ export namespace ChatflowApi {
     files: [];
   }
 
+  export interface MessagesRequest {
+    conversationId: string;
+    userId: string;
+    firstId: string;
+    limit: number;
+  }
+
   export interface ChatListBody {
     userId: string;
     lastId: string;
@@ -57,9 +64,12 @@ export async function getChatList(
   });
 }
 
-// export function stopChatflow(data){
-//   return requestClient.post('/v1/chat/stopMessagesStream', data);
-// };
+export async function getMessages(
+  appId: string,
+  data: ChatflowApi.MessagesRequest,
+) {
+  return requestClient.post(`/v1/chat/messages/${appId}`, data);
+}
 //
 // export function getChatflowList(data){
 //   return requestClient.post('/v1/chat/messages', data);

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

@@ -1,13 +1,13 @@
 <script lang="ts" setup>
-import type { WordTempItem } from '@vben/common-ui';
+import type { WordHistoryItem, WordTempItem } from '@vben/common-ui';
 
 import { onMounted, reactive, ref } from 'vue';
 
 import { WordHistoryView, WordListView, WordWorkView } from '@vben/common-ui';
 
-import { getChatList, sendChatflow } from '#/api';
+import { getChatList, getMessages, sendChatflow } from '#/api';
 
-let temp = reactive<WordTempItem>({
+const temp = reactive<WordTempItem>({
   id: 'baca08c1-e92b-4dc9-a445-3584803f54d4',
   name: '职业创新申报书',
 });
@@ -28,17 +28,15 @@ const getLogs = async (appid: string) => {
       limit: '5',
     },
   );
-  // const res = await getChatList({
-  //   appid,
-  //   limit: 5,
-  //   page: 1,
-  // });
   hitsory.value = res.data;
   loading.value = false;
 };
 
-function handleClick(item: WordTempItem) {
-  temp = item;
+async function handleClick(item: WordHistoryItem) {
+  await getMessages(temp.id, {
+    conversationId: item.id,
+    userId: '1562',
+  });
 }
 
 onMounted(() => {

packages/effects/common-ui/package.json

@@ -45,6 +45,7 @@
     "@vueuse/integrations": "catalog:",
     "ant-design-vue": "catalog:",
     "ant-design-x-vue": "^1.1.2",
+    "dayjs": "catalog:",
     "qrcode": "catalog:",
     "tippy.js": "catalog:",
     "vue": "catalog:",

packages/effects/common-ui/src/ui/ppt/ppt-perview.vue

@@ -11,7 +11,7 @@ import VueOfficePptx from '@vue-office/pptx';
 const pptx = ref('/pptx/66f3cfd95e364a239d8036390db658ae.pptx');
 const pptStyle = ref({
   height: 'calc(100vh - 100px)',
-  width: '100%',
+  width: 'auto',
   margin: 'auto',
   background: '#ffffff',
 });
@@ -40,7 +40,7 @@ const [Drawer, drawerApi] = useVbenDrawer({
 });
 </script>
 <template>
-  <Drawer title="文档预览" :footer="false">
+  <Drawer class="w-[880px]" title="文档预览" :footer="false">
     <VueOfficePptx
       :src="pptx"
       :style="pptStyle"
@@ -52,6 +52,6 @@ const [Drawer, drawerApi] = useVbenDrawer({
 
 <style scoped>
 .pptx-preview-wrapper {
-  background: #fff;
+  background: #fff !important;
 }
 </style>

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

@@ -286,10 +286,12 @@ watch(
 </script>
 
 <template>
-  <div>
-    <PreviewDrawer />
-    <div style="height: calc(67vh - 120px); margin: 20px; overflow-y: auto">
-      <BubbleList :roles="roles" :items="resultItems" />
+  <PreviewDrawer />
+  <div class="flex h-[910px] flex-col">
+    <div class="flex-1 overflow-y-auto">
+      <div style="margin: 20px; overflow-y: auto">
+        <BubbleList :auto-scroll="true" :roles="roles" :items="resultItems" />
+      </div>
     </div>
     <Card class="w-full">
       <Sender

packages/effects/common-ui/src/ui/spider/spider-work-view.vue

@@ -76,6 +76,7 @@ const startFetching = async () => {
     );
     // 保存抓取结果
     fetchResult.value = res.data.outputs.result;
+    downloadDisable.value = false;
   } catch (error) {
     console.error(error);
   }
@@ -109,6 +110,7 @@ const downloadFile = () => {
 };
 
 const isFetching = ref(false);
+const downloadDisable = ref(true);
 const fetchResult = ref('');
 const fetchStatus = ref('');
 </script>
@@ -126,11 +128,7 @@ const fetchStatus = ref('');
         <Button :disabled="!item" @click="startFetching">
           {{ isFetching ? '抓取中...' : '开始抓取' }}
         </Button>
-        <Button
-          class="mx-2"
-          :disabled="fetchStatus !== 'completed'"
-          @click="downloadFile"
-        >
+        <Button class="mx-2" :disabled="downloadDisable" @click="downloadFile">
           下载文件
         </Button>
       </CardFooter>

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

@@ -5,13 +5,11 @@ interface WordTempItem {
 
 interface WordHistoryItem {
   id: string;
-  workflowRun: {
-    id: string;
-  };
-  createdByEndUser: {
-    id: string;
-    sessionId: string;
+  inputs: {
+    projectName: string;
   };
+  name: string;
+  createdAt: number;
 }
 
 export type { WordHistoryItem, WordTempItem };

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

@@ -3,6 +3,8 @@ import type { WordHistoryItem } from '../word';
 
 import { Card, CardContent, CardHeader, CardTitle } from '@vben-core/shadcn-ui';
 
+import dayjs from 'dayjs';
+
 interface Props {
   items?: WordHistoryItem[];
   title: string;
@@ -35,7 +37,10 @@ defineEmits(['click']);
           @click="$emit('click', item)"
           class="flex cursor-pointer justify-between gap-x-6 py-5"
         >
-          {{ item.id }}
+          <span>{{ item.name }}</span>
+          <span>{{
+            dayjs.unix(item.createdAt).format('YYYY-MM-DD HH:mm:ss')
+          }}</span>
         </li>
       </ul>
     </CardContent>

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

@@ -12,7 +12,7 @@ import { useVbenDrawer } from '@vben/common-ui';
 import { Card } from '@vben-core/shadcn-ui';
 
 import { UserOutlined } from '@ant-design/icons-vue';
-import { Button, Flex } from 'ant-design-vue';
+import { Button, Flex, notification } from 'ant-design-vue';
 import { Attachments, BubbleList, Sender } from 'ant-design-x-vue';
 
 import WordPreview from './word-preview.vue';
@@ -75,7 +75,16 @@ function openPreviewDrawer(
   previewDrawerApi.setState({ placement }).setData(fileData).open();
 }
 
+const inputStatus = ref<string>('');
 const startFetching = async () => {
+  if (!projectName.value) {
+    inputStatus.value = 'error';
+    notification.error({
+      duration: 3,
+      message: '请填写项目名称',
+    });
+    return;
+  }
   isFetching.value = true;
   fetchStatus.value = 'fetching';
   resultItems.value.push({
@@ -272,13 +281,21 @@ const resultItems = ref<ResultItem[]>([]);
 </script>
 
 <template>
-  <div>
-    <PreviewDrawer />
-    <a-space class="w-full" direction="vertical">
-      <a-input v-model:value="projectName" required placeholder="项目名称" />
-    </a-space>
-    <div style="height: calc(67vh - 120px); margin: 20px; overflow-y: auto">
-      <BubbleList :roles="roles" :items="resultItems" />
+  <PreviewDrawer />
+  <div class="flex h-[910px] flex-col">
+    <div class="flex-1 overflow-y-auto">
+      <a-space class="w-full" direction="vertical">
+        <a-input
+          size="large"
+          v-model:value="projectName"
+          :status="inputStatus"
+          required
+          placeholder="项目名称(必填)"
+        />
+      </a-space>
+      <div style="margin: 20px; overflow-y: auto">
+        <BubbleList :auto-scroll="true" :roles="roles" :items="resultItems" />
+      </div>
     </div>
     <Card class="w-full">
       <Sender

packages/locales/src/langs/zh-CN/authentication.json

@@ -1,7 +1,7 @@
 {
   "welcomeBack": "欢迎回来",
-  "pageTitle": "开箱即用的大型中后台管理系统",
-  "pageDesc": "工程化、高性能、跨组件库的前端模版",
+  "pageTitle": "",
+  "pageDesc": "",
   "loginSuccess": "登录成功",
   "loginSuccessDesc": "欢迎回来",
   "loginSubtitle": "请输入您的帐户信息以开始管理您的项目",

pnpm-lock.yaml

@@ -1344,6 +1344,9 @@ importers:
       ant-design-x-vue:
         specifier: ^1.1.2
         version: 1.1.2(ant-design-vue@4.2.6(vue@3.5.13(typescript@5.8.3)))(vue@3.5.13(typescript@5.8.3))
+      dayjs:
+        specifier: 'catalog:'
+        version: 1.11.13
       qrcode:
         specifier: 'catalog:'
         version: 1.5.4