73 lines
2.1 KiB
Vue
73 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { storeToRefs } from 'pinia'
|
|
import { useUserStore } from '@/store/userStore'
|
|
import { getToken } 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 { userInfo } = storeToRefs(userStore)
|
|
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)
|
|
)
|
|
|
|
const tailSections = computed(() =>
|
|
(layoutConfig.value.tailSections ?? []).filter((section) => section.visible !== false)
|
|
)
|
|
|
|
/** محتوا با userInfo — دادههای API در پسزمینه لود میشوند */
|
|
const showContent = computed(() => Boolean(userInfo.value))
|
|
const showSkeleton = computed(() => Boolean(getToken()) && !userInfo.value)
|
|
|
|
function resolveSectionComponent(sectionId: HomeSectionId) {
|
|
return HOME_SECTION_COMPONENTS[sectionId]
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="showContent">
|
|
<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>
|
|
|
|
<component
|
|
:is="resolveSectionComponent(section.id)"
|
|
v-for="section in tailSections"
|
|
:key="`tail-${section.id}`"
|
|
/>
|
|
</div>
|
|
|
|
<HomeSkeleton v-else-if="showSkeleton" class="w-full" />
|
|
</template>
|