57 lines
1.6 KiB
Vue
57 lines
1.6 KiB
Vue
 
|
<script setup lang="ts">
|
||
|
|
import { computed } from 'vue'
|
||
|
|
import { useUserStore } from '@/store/userStore'
|
||
|
|
import { loading } from '@/utils'
|
||
|
|
import HomeSkeleton from '../components/HomeSkeleton.vue'
|
||
|
|
import { getHomeLayoutConfig } from './registry'
|
||
|
|
import { HOME_SECTION_COMPONENTS } from './sections'
|
||
|
|
import type { HomeLayoutConfig, HomeSectionId } from './types'
|
||
|
|
|
||
|
|
const props = defineProps<{
|
||
|
|
layoutConfig?: HomeLayoutConfig
|
||
|
|
}>()
|
||
|
|
|
||
|
|
const userStore = useUserStore()
|
||
|
|
const layoutConfig = computed(() => props.layoutConfig ?? getHomeLayoutConfig())
|
||
|
|
|
||
|
|
const outerSections = computed(() =>
|
||
|
|
(layoutConfig.value.outerSections ?? []).filter((section) => section.visible !== false)
|
||
|
|
)
|
||
|
|
|
||
|
|
const innerSections = computed(() =>
|
||
|
|
layoutConfig.value.sections.filter((section) => section.visible !== false)
|
||
|
|
)
|
||
|
|
|
||
|
|
function resolveSectionComponent(sectionId: HomeSectionId) {
|
||
|
|
return HOME_SECTION_COMPONENTS[sectionId]
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div v-if="userStore.userInfo && !loading">
|
||
|
|
<component
|
||
|
|
:is="resolveSectionComponent(section.id)"
|
||
|
|
v-for="section in outerSections"
|
||
|
|
:key="`outer-${section.id}`"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<div v-if="layoutConfig.wrapperClass" :class="layoutConfig.wrapperClass">
|
||
|
|
<component
|
||
|
|
:is="resolveSectionComponent(section.id)"
|
||
|
|
v-for="section in innerSections"
|
||
|
|
:key="section.id"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<template v-else>
|
||
|
|
<component
|
||
|
|
:is="resolveSectionComponent(section.id)"
|
||
|
|
v-for="section in innerSections"
|
||
|
|
:key="section.id"
|
||
|
|
/>
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<HomeSkeleton v-if="loading" class="w-full" />
|
||
|
|
</template>
|