admin/www/app/pages/index.vue

<script setup lang="ts">
import type { SectionBlock } from '~/types/site';

const { t } = useI18n();
const { getSections } = useSiteApi();

useHead({
  title: () => `${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>