48 lines
957 B
Vue
48 lines
957 B
Vue
<template>
|
|
<div class="home-page">
|
|
<a-skeleton v-if="loading" active />
|
|
<component v-else :is="dashboardComponent" @on-mounted="handleMounted" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, computed, defineAsyncComponent } from 'vue'
|
|
import config from '@/config'
|
|
|
|
// 定义组件名称
|
|
defineOptions({
|
|
name: 'HomePage',
|
|
})
|
|
|
|
const loading = ref(true)
|
|
const dashboard = ref(config.DASHBOARD_LAYOUT || 'work')
|
|
|
|
// 动态导入组件
|
|
const components = {
|
|
work: defineAsyncComponent(() => import('./work/index.vue')),
|
|
widgets: defineAsyncComponent(() => import('./widgets/index.vue')),
|
|
}
|
|
|
|
const dashboardComponent = computed(() => {
|
|
return components[dashboard.value] || components.work
|
|
})
|
|
|
|
const handleMounted = () => {
|
|
loading.value = false
|
|
}
|
|
|
|
onMounted(() => {
|
|
// 模拟加载延迟
|
|
setTimeout(() => {
|
|
loading.value = false
|
|
}, 300)
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.home-page {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|