refactor(@vben/common-ui): 优化多个组件的样式和功能

-调整 PPT 预览和工作视图组件的布局和样式
- 优化蜘蛛预览和工作视图组件的加载逻辑
- 更新 Word 预览组件的加载逻辑
- 移除不必要的样式和结构,提高组件性能
This commit is contained in:
Kven 2025-05-19 10:41:44 +08:00
parent 4c9cc17366
commit 97593b7dc1
5 changed files with 17 additions and 63 deletions

View File

@ -45,7 +45,7 @@ const [Drawer, drawerApi] = useVbenDrawer({
}); });
</script> </script>
<template> <template>
<Drawer title="文档预览" :footer="false"> <Drawer class="w-[880px]" title="文档预览" :footer="false">
<div v-if="isLoading" class="loading-overlay">正在加载文档请稍候...</div> <div v-if="isLoading" class="loading-overlay">正在加载文档请稍候...</div>
<VueOfficePptx <VueOfficePptx
:src="pptx" :src="pptx"

View File

@ -427,33 +427,20 @@ watch(
<style scoped lang="less"> <style scoped lang="less">
.layout { .layout {
width: 100%; width: 100%;
min-width: 1000px; min-width: 1400px;
height: 100%; max-height: 100vh;
display: flex; display: flex;
flex-direction: column;
background: hsl(216deg 21.74% 95.49%); background: hsl(216deg 21.74% 95.49%);
font-family: AlibabaPuHuiTi, v-deep(var(--ant-font-family)), sans-serif; font-family: AlibabaPuHuiTi, v-deep(var(--ant-font-family)), sans-serif;
border-radius: v-deep(var(--ant-border-radius)); 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 { .chat {
height: 100%;
width: 100%; width: 100%;
height: 100%;
max-height: 88vh;
max-width: 1000px; max-width: 1000px;
max-height: 900px;
margin: 0 auto; margin: 0 auto;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
@ -462,10 +449,6 @@ watch(
gap: 16px; gap: 16px;
} }
//.messages {
// flex: 1;
//}
.placeholder { .placeholder {
padding-top: 32px; padding-top: 32px;
text-align: left; text-align: left;
@ -474,36 +457,7 @@ watch(
.sender { .sender {
background: #ffffff; background: #ffffff;
width: 100%;
box-shadow: v-deep(var(--ant-box-shadow)); 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> </style>

View File

@ -35,7 +35,7 @@ const [Drawer, drawerApi] = useVbenDrawer({
if (isOpen) { if (isOpen) {
const data = drawerApi.getData<Record<string, any>>(); const data = drawerApi.getData<Record<string, any>>();
if (data) { if (data) {
isLoading.value = false; // isLoading.value = true;
// docx.value = `/spider/${data}`; // docx // docx.value = `/spider/${data}`; // docx
docx.value = data; // docx docx.value = data; // docx
} }

View File

@ -76,9 +76,11 @@ defineOptions({
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
itemMessage: () => null, itemMessage: () => null,
item: () => { item: () => ({
return null; id: '',
}, name: '',
url: '',
}),
runSpider: () => async () => ({ runSpider: () => async () => ({
msg: '', msg: '',
code: '', code: '',
@ -279,10 +281,7 @@ const startFetching = async () => {
userId: '1562', userId: '1562',
conversationId: '', conversationId: '',
files: [], files: [],
inputs: { inputs: {},
publish_start_time,
publish_end_time,
},
}, },
); );
if (res.data.outputs.files) { if (res.data.outputs.files) {
@ -396,7 +395,7 @@ const fetchStatus = ref('');
// title resultItems // title resultItems
watch( watch(
() => props.title, () => props.item,
() => { () => {
resultItems.value = []; resultItems.value = [];
}, },
@ -508,6 +507,7 @@ watch(
</CardContent> </CardContent>
<CardFooter class="flex justify-end"> <CardFooter class="flex justify-end">
<RangePicker <RangePicker
v-if="item.id === '77c068fd-d5b6-4c33-97d8-db5511a09b26'"
class="mx-2" class="mx-2"
v-model:value="selectedDateRange" v-model:value="selectedDateRange"
format="YYYY/MM/DD" format="YYYY/MM/DD"

View File

@ -35,7 +35,7 @@ const [Drawer, drawerApi] = useVbenDrawer({
if (isOpen) { if (isOpen) {
const data = drawerApi.getData<Record<string, any>>(); const data = drawerApi.getData<Record<string, any>>();
if (data) { if (data) {
isLoading.value = false; // isLoading.value = true;
docx.value = `/docx/${data}`; // docx docx.value = `/docx/${data}`; // docx
} }
// url.value = drawerApi.getData<Record<string, any>>(); // url.value = drawerApi.getData<Record<string, any>>();