hookehuyr

feat(OfficeViewer): 添加加载状态指示器

在 OfficeViewer 组件中添加加载状态指示器,提升用户体验
移除 StudyDetailPage 中多余的文档加载完成提示
......@@ -49,6 +49,10 @@
<span class="unsupported-text">不支持的文件类型: {{ fileType }}</span>
</div>
</div>
<van-loading vertical v-if="loading" class="loading-overlay">
加载中...
</van-loading>
</div>
</template>
......@@ -94,6 +98,7 @@ const containerHeight = computed(() => props.height)
*/
const onRendered = () => {
console.log('Office document rendered successfully')
loading.value = false
error.value = ''
emit('rendered')
}
......@@ -104,6 +109,7 @@ const onRendered = () => {
*/
const onError = (err) => {
console.error('Office document render error:', err)
loading.value = false
error.value = '文档加载失败,请检查文件格式或网络连接'
emit('error', err)
}
......@@ -113,6 +119,7 @@ const onError = (err) => {
*/
const retry = () => {
console.log('Retrying to load office document')
loading.value = true
error.value = ''
emit('retry')
}
......@@ -150,14 +157,20 @@ watch(() => props.fileType, (newType) => {
console.log('Office document fileType changed:', newType)
})
// 响应式数据
const loading = ref(false)
// 组件挂载时的初始化
onMounted(() => {
console.log('OfficeViewer 组件已挂载')
// 生成一个loading 效果
loading.value = true
})
</script>
<style lang="less" scoped>
.office-viewer {
position: relative;
width: 100%;
height: 100%;
background: #fff;
......@@ -241,6 +254,19 @@ onMounted(() => {
}
}
}
// Loading 覆盖层样式
.loading-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
background: rgba(255, 255, 255, 0.9);
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}
}
// 移动端适配
......
......@@ -988,7 +988,7 @@ const onPdfLoad = (load) => {
*/
const onOfficeRendered = () => {
console.log('Office 文档渲染完成');
showToast('文档加载完成');
// showToast('文档加载完成');
};
/**
......