官网开发中 0731

www/app/pages/index.vue

@@ -1,23 +1,46 @@
 <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>
-    <!-- Hero 区块 -->
-    <section class="section-container py-96px flex-col-center text-center">
-      <h1 class="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white">
-        {{ t('app.name') }}
-      </h1>
-      <p class="mt-16px text-lg text-gray-500 dark:text-gray-400">
-        {{ t('app.slogan') }}
-      </p>
-    </section>
+    <!-- 加载中占位 -->
+    <div v-if="loading" class="min-h-screen flex-col-center">
+      <p class="text-sm text-gray-400">加载中…</p>
+    </div>
 
-    <!-- 页面内容由后台 CMS 配置的区块（Section）组合渲染 -->
+    <!-- 区块列表：由后台 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>