<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>
