Kven
ad79e5113e
- 修改路由路径，统一为 /ai前缀 - 新增表单弹窗组件，用于输入项目信息 - 优化聊天消息展示逻辑，支持文档预览和下载 - 新增个人页面路由和组件 - 调整模板数据结构和样式
64 lines
1.7 KiB
Vue
64 lines
1.7 KiB
Vue
<script lang="ts" setup>
|
||
import { ref } from 'vue';
|
||
|
||
import { useVbenDrawer } from '@vben/common-ui';
|
||
|
||
import VueOfficePptx from '@vue-office/pptx';
|
||
import { message } from 'ant-design-vue';
|
||
|
||
// import '@vue-office/pptx/lib/index.css';
|
||
// http://47.112.173.8:6802/static/66f3cfd95e364a239d8036390db658ae.pptx
|
||
// const url = ref('');
|
||
const isLoading = ref(false); // 新增：加载状态变量
|
||
const pptx = ref('/pptx/66f3cfd95e364a239d8036390db658ae.pptx');
|
||
const pptStyle = ref({
|
||
height: 'calc(100vh - 100px)',
|
||
width: '100%',
|
||
margin: 'auto',
|
||
background: '#ffffff',
|
||
});
|
||
const renderedHandler = () => {
|
||
isLoading.value = false; // 文档渲染完成，关闭加载状态
|
||
message.success('渲染完成');
|
||
};
|
||
const errorHandler = () => {
|
||
isLoading.value = false; // 出错时也关闭加载状态
|
||
message.error('渲染失败');
|
||
};
|
||
const [Drawer, drawerApi] = useVbenDrawer({
|
||
onCancel() {
|
||
drawerApi.close();
|
||
},
|
||
onClosed() {
|
||
drawerApi.setState({ overlayBlur: 0, placement: 'right' });
|
||
},
|
||
onOpenChange(isOpen: boolean) {
|
||
if (isOpen) {
|
||
const data = drawerApi.getData<Record<string, any>>();
|
||
if (data) {
|
||
isLoading.value = true; // 开始加载文档，开启加载状态
|
||
pptx.value = `/pptx/${data}`; // 更新 pptx 的值
|
||
}
|
||
// url.value = drawerApi.getData<Record<string, any>>();
|
||
}
|
||
},
|
||
});
|
||
</script>
|
||
<template>
|
||
<Drawer title="文档预览" :footer="false">
|
||
<div v-if="isLoading" class="loading-overlay">正在加载文档，请稍候...</div>
|
||
<VueOfficePptx
|
||
:src="pptx"
|
||
:style="pptStyle"
|
||
@rendered="renderedHandler"
|
||
@error="errorHandler"
|
||
/>
|
||
</Drawer>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.pptx-preview-wrapper {
|
||
background: #fff;
|
||
}
|
||
</style>
|