eafonyang
46 lines
1.5 KiB
Vue
46 lines
1.5 KiB
Vue
<script setup lang="ts">
|
||
import type { SectionBlock } from '~/types/site';
|
||
|
||
const { t } = useI18n();
|
||
const { getSections } = useSiteApi();
|
||
|
||
// SEO：首页（page-seo 配置优先，回退默认标题）
|
||
await usePageSeo('home', undefined, `${t('app.name')} - ${t('nav.home')}`);
|
||
|
||
// 拉取首页区块列表（仅可见，按 sort_order 排序）
|
||
const sections = ref<SectionBlock[]>([]);
|
||
const loading = ref(true);
|
||
|
||
onMounted(async () => {
|
||
try {
|
||
const res = await getSections('home');
|
||
sections.value = res?.items ?? [];
|
||
} catch (e) {
|
||
console.error('[home] 加载区块失败', e);
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<div>
|
||
<!-- 加载中占位 -->
|
||
<div v-if="loading" class="min-h-screen flex-col-center">
|
||
<p class="text-sm text-gray-400">加载中…</p>
|
||
</div>
|
||
|
||
<!-- 区块列表：由后台 CMS 配置的 Section 组合渲染 -->
|
||
<template v-else>
|
||
<SectionRenderer v-for="section in sections" :key="section.id" :section="section" />
|
||
|
||
<!-- 空状态：尚未配置任何区块 -->
|
||
<div v-if="!sections.length" class="min-h-screen flex-col-center px-16px text-center">
|
||
<h1 class="text-3xl font-bold text-gray-900 dark:text-white">{{ t('app.name') }}</h1>
|
||
<p class="mt-12px text-gray-500 dark:text-gray-400">{{ t('app.slogan') }}</p>
|
||
<p class="mt-32px text-sm text-gray-400">首页区块内容待配置，请前往管理后台「官网管理 - 页面管理 - 首页区块」添加。</p>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</template>
|