refactor(@vben/web-antd): 优化页面布局和功能

- 更新 API 地址
- 优化 PPT 和 Word 页面布局
- 添加项目名称必填验证
-修复文档生成后的处理逻辑
- 优化气泡列表组件属性
This commit is contained in:
vertoryao 2025-05-12 15:39:43 +08:00
parent 7f0a6a07c8
commit 851794c127
4 changed files with 35 additions and 44 deletions

View File

@ -1,7 +1,7 @@
VITE_BASE=/ VITE_BASE=/
# 接口地址 # 接口地址
VITE_GLOB_API_URL=https://mock-napi.vben.pro/api VITE_GLOB_API_URL=http://dify.vertoryao.xyz/api
# 是否开启压缩,可以设置为 none, brotli, gzip # 是否开启压缩,可以设置为 none, brotli, gzip
VITE_COMPRESS=none VITE_COMPRESS=none

View File

@ -17,7 +17,7 @@ export default defineConfig(async () => {
'/docx': { '/docx': {
changeOrigin: true, changeOrigin: true,
rewrite: (path) => path.replace(/^\/docx/, ''), rewrite: (path) => path.replace(/^\/docx/, ''),
target: 'http://47.112.173.8:6802/static', target: 'http://47.112.173.8:6805/static',
}, },
'/pptx': { '/pptx': {
changeOrigin: true, changeOrigin: true,

View File

@ -162,6 +162,7 @@ const startFetching = async () => {
), ),
]), ]),
}); });
value.value = '';
} catch (error) { } catch (error) {
console.error(error); console.error(error);
} }
@ -286,10 +287,12 @@ watch(
</script> </script>
<template> <template>
<div>
<PreviewDrawer /> <PreviewDrawer />
<div style="height: calc(67vh - 120px); margin: 20px; overflow-y: auto"> <div class="flex h-[765px] flex-col">
<BubbleList :roles="roles" :items="resultItems" /> <div class="flex-1 overflow-y-auto">
<div style="margin: 20px; overflow-y: auto">
<BubbleList :auto-scroll="true" :roles="roles" :items="resultItems" />
</div>
</div> </div>
<Card class="w-full"> <Card class="w-full">
<Sender <Sender

View File

@ -12,7 +12,7 @@ import { useVbenDrawer } from '@vben/common-ui';
import { Card } from '@vben-core/shadcn-ui'; import { Card } from '@vben-core/shadcn-ui';
import { UserOutlined } from '@ant-design/icons-vue'; 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 { Attachments, BubbleList, Sender } from 'ant-design-x-vue';
import WordPreview from './word-preview.vue'; import WordPreview from './word-preview.vue';
@ -75,7 +75,16 @@ function openPreviewDrawer(
previewDrawerApi.setState({ placement }).setData(fileData).open(); previewDrawerApi.setState({ placement }).setData(fileData).open();
} }
const inputStatus = ref<string>('');
const startFetching = async () => { const startFetching = async () => {
if (!projectName.value) {
inputStatus.value = 'error';
notification.error({
duration: 3,
message: '请填写项目名称',
});
return;
}
isFetching.value = true; isFetching.value = true;
fetchStatus.value = 'fetching'; fetchStatus.value = 'fetching';
resultItems.value.push({ resultItems.value.push({
@ -181,36 +190,7 @@ const startFetching = async () => {
} }
fetchResult.value = `/static/${filename.value}`; fetchResult.value = `/static/${filename.value}`;
// resultItems.value.push({ value.value = '';
// key: resultItems.value.length + 1,
// role: 'ai',
// content: '',
// footer: h(Flex, null, [
// h(
// Button,
// {
// size: 'nomarl',
// type: 'primary',
// onClick: () => {
// openPreviewDrawer('right');
// },
// },
// '',
// ),
// h(
// Button,
// {
// size: 'nomarl',
// type: 'primary',
// style: {
// marginLeft: '10px',
// },
// onClick: () => {},
// },
// '',
// ),
// ]),
// });
} catch (error) { } catch (error) {
console.error(error); console.error(error);
} }
@ -272,13 +252,21 @@ const resultItems = ref<ResultItem[]>([]);
</script> </script>
<template> <template>
<div>
<PreviewDrawer /> <PreviewDrawer />
<div class="flex h-[765px] flex-col">
<div class="flex-1 overflow-y-auto">
<a-space class="w-full" direction="vertical"> <a-space class="w-full" direction="vertical">
<a-input v-model:value="projectName" required placeholder="项目名称" /> <a-input
size="large"
v-model:value="projectName"
:status="inputStatus"
required
placeholder="项目名称(必填)"
/>
</a-space> </a-space>
<div style="height: calc(67vh - 120px); margin: 20px; overflow-y: auto"> <div style="margin: 20px; overflow-y: auto">
<BubbleList :roles="roles" :items="resultItems" /> <BubbleList :auto-scroll="true" :roles="roles" :items="resultItems" />
</div>
</div> </div>
<Card class="w-full"> <Card class="w-full">
<Sender <Sender