refactor(@vben/web-antd): 优化文档预览功能

- 修改 PPT 和 Word 预览组件的样式和背景色
- 更新 PPT 和 Word 文件的请求路径
- 调整 Vite 配置,增加对文档文件的代理支持
This commit is contained in:
vertoryao 2025-05-06 10:28:44 +08:00
parent 35a2ad65ca
commit a08474d32c
4 changed files with 20 additions and 11 deletions

View File

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

View File

@ -6,13 +6,14 @@ import { useVbenDrawer } from '@vben/common-ui';
import VueOfficePptx from '@vue-office/pptx';
// import '@vue-office/pptx/lib/index.css';
// http://47.112.173.8:6802/static/66f3cfd95e364a239d8036390db658ae.pptx
const url = ref('');
const pptx = ref('/static/43b7da46a6ca47e5a9d7710d8dcf499c.pptx');
const pptx = ref('/pptx/66f3cfd95e364a239d8036390db658ae.pptx');
const pptStyle = ref({
height: 'calc(100vh - 100px)',
width: '100%',
margin: 'auto',
background: '#ffffff',
});
const renderedHandler = () => {
console.warn('渲染完成');
@ -44,3 +45,9 @@ const [Drawer, drawerApi] = useVbenDrawer({
/>
</Drawer>
</template>
<style scoped>
.pptx-preview-wrapper {
background: #fff;
}
</style>

View File

@ -87,8 +87,8 @@ const startFetching = async () => {
// },
// },
// );
// url
fetchResult.value = '/static/43b7da46a6ca47e5a9d7710d8dcf499c.pptx';
// url http://47.112.173.8:6802/static/66f3cfd95e364a239d8036390db658ae.pptx
fetchResult.value = '/static/66f3cfd95e364a239d8036390db658ae.pptx';
resultItems.value.push({
key: resultItems.value.length + 1,
role: 'ai',

View File

@ -5,10 +5,10 @@ import { useVbenDrawer } from '@vben/common-ui';
import VueOfficeDocx from '@vue-office/docx';
// import '@vue-office/pptx/lib/index.css';
import '@vue-office/docx/lib/index.css';
const url = ref('');
const docx = ref<any>('/static/9e1c421e-991c-411f-8176-6350a97e70f3.docx');
const docx = ref<any>('/docx/027c6b7c-fea6-4964-839b-27857c4d3181.docx');
const pptStyle = ref({
height: 'calc(100vh - 100px)',
width: '100%',
@ -35,7 +35,7 @@ const [Drawer, drawerApi] = useVbenDrawer({
});
</script>
<template>
<Drawer title="文档预览" :footer="false">
<Drawer class="w-[880px]" title="文档预览" :footer="false">
<VueOfficeDocx
:src="docx"
:style="pptStyle"