feat：接口联调

pages/index.vue

@@ -6,10 +6,28 @@ import SiteFooter from '~/components/site/SiteFooter.vue'
 
 const pageRoot = ref(null)
 const { openConsultation: openGlobalConsultation } = useConsultation()
+const { fetchHomepageSections } = useOfficialContent()
 let animationContext
 let animationMedia
 
-const logos = [
+const { data: homepageSectionRows } = await useAsyncData('public-homepage-sections', () =>
+  fetchHomepageSections()
+)
+
+const homepageSections = computed(() => homepageSectionRows.value || [])
+const homepageSectionMap = computed(() =>
+  Object.fromEntries(homepageSections.value.map((section) => [section.key, section]))
+)
+
+function homepageSection(key) {
+  return homepageSectionMap.value[key] || {}
+}
+
+function backgroundStyle(url) {
+  return url ? { backgroundImage: `url("${url}")` } : null
+}
+
+const fallbackLogos = [
   'Bond',
   'WaSun',
   '西西能源',
@@ -23,17 +41,18 @@ const logos = [
   'SUNAC',
   'B+ WORKS'
 ]
-const stats = [
+const fallbackStats = [
   ['300+', '累计服务客户', '/images/lanhu/slices/home-group100-image26@2x.png'],
   ['12+', '覆盖行业', '/images/lanhu/slices/home-group101-image27@2x.png'],
   ['126%', '客户AI搜索曝光平均提升', '/images/lanhu/slices/home-group102-image28@2x.png'],
   ['65%', '客户转化链路效率平均提升', '/images/lanhu/slices/home-group103-image29@2x.png']
 ]
-const corePoints = [
+const heroBackgroundImage = '/images/lanhu/slices/hero-geo-visual@2x.png'
+const fallbackCorePoints = [
   ['曝光', '打造AI搜索语境下的品牌信任声量，一次布局，长期复用'],
   ['获客', '让曝光直接沉淀为可跟进的精准线索，告别无效流量']
 ]
-const ringModels = [
+const fallbackRingModels = [
   {
     title: '声量资产环',
     image: '/images/lanhu/slices/home-group80-group83-image11@2x.png',
@@ -47,18 +66,18 @@ const ringModels = [
     labels: ['AI搜索曝光', '精准流量承接', '全链路转化', '数据复盘优化']
   }
 ]
-const advantageCards = [
+const fallbackAdvantageCards = [
   ['全域媒体资源优势', '5000+权威官媒+10万+优质自媒体矩阵'],
   ['全链路闭环优势', '行业唯一打通「纯曝光+内容资产沉淀+转化闭环」'],
   ['全客群定制优势', '覆盖全类型经营主体，一对一专属定制专属方案']
 ]
-const caseImages = [
+const fallbackCaseImages = [
   '/images/lanhu/slices/home-group90-image15@2x.png',
   '/images/lanhu/slices/home-group91-image16@2x.png',
   '/images/lanhu/slices/home-group92-image17@2x.png',
   '/images/lanhu/slices/home-group93-image18@2x.png'
 ]
-const industryCards = [
+const fallbackIndustryCards = [
   [
     '本地生活',
     'AI搜索全域曝光提升320%月均精准线索新增80+，持续获得品牌声量与业务线索',
@@ -75,7 +94,7 @@ const industryCards = [
     '/images/lanhu/slices/home-group36-group71-image5@2x.png'
   ]
 ]
-const deliverySteps = [
+const fallbackDeliverySteps = [
   [
     '需求诊断',
     '一对一沟通，分析品牌现状与增长痛点',
@@ -103,6 +122,112 @@ const deliverySteps = [
   ]
 ]
 
+const heroSection = computed(() => homepageSection('HERO'))
+const customerHallSection = computed(() => homepageSection('CUSTOMER_HALL'))
+const capabilitiesSection = computed(() => homepageSection('CAPABILITIES'))
+const advantagesSection = computed(() => homepageSection('ADVANTAGES'))
+const caseBlockSection = computed(() => homepageSection('CASE_BLOCK'))
+const industryBlockSection = computed(() => homepageSection('INDUSTRY_BLOCK'))
+const processSection = computed(() => homepageSection('PROCESS'))
+const testimonialSection = computed(() => homepageSection('TESTIMONIAL'))
+const bottomCtaSection = computed(() => homepageSection('BOTTOM_CTA'))
+
+const heroTitle = computed(
+  () => heroSection.value.title || '大马棒 · 云途全域GEO\n让品牌在AI时代拥有持续增长力'
+)
+const heroTags = computed(() =>
+  heroSection.value.tags?.length
+    ? heroSection.value.tags
+    : ['5万真人内容生产网络', '5000+自媒体资源矩阵', '全链路转化闭环']
+)
+const logos = computed(() => fallbackLogos)
+const stats = computed(() => {
+  const cards = customerHallSection.value.cards
+  if (!cards?.length) return fallbackStats
+  return cards.map((card, index) => [
+    card.value,
+    card.label,
+    fallbackStats[index % fallbackStats.length][2]
+  ])
+})
+const corePoints = computed(() => {
+  const cards = capabilitiesSection.value.cards
+  if (!cards?.length) return fallbackCorePoints
+
+  return cards.slice(0, 2).map((card, index) => [
+    card.title || fallbackCorePoints[index]?.[0] || '',
+    card.details?.[0]?.description || card.details?.[0]?.heading || fallbackCorePoints[index]?.[1] || ''
+  ])
+})
+const ringModels = computed(() => fallbackRingModels)
+const leadAdvantage = computed(() => {
+  const groups = advantagesSection.value.groups || []
+  const lead = groups[0]
+  return {
+    title: lead?.heading || '真人内容生产优势',
+    bodyOne: lead?.bodyOne || '行业独家5万真人分布式内容生产网络',
+    bodyTwo: lead?.bodyTwo || '用C端爆款内容思维做B端GEO，打造真实可信的AI信任型声量',
+    image: advantagesSection.value.assetUrl || '/images/lanhu/slices/home-group90-image15@2x.png'
+  }
+})
+const advantageCards = computed(() => {
+  const groups = advantagesSection.value.groups?.slice(1)
+  if (!groups?.length) return fallbackAdvantageCards
+  return groups.map((group) => [
+    group.heading,
+    [group.bodyOne, group.bodyTwo].filter(Boolean).join('；')
+  ])
+})
+const caseCards = computed(() => {
+  const contents = caseBlockSection.value.contents
+  if (!contents?.length) {
+    return fallbackCaseImages.map((image) => ({
+      image,
+      description: '某企业服务客户 AI搜索全域曝光提升\n320%月均精准线索新增80+'
+    }))
+  }
+  return contents.map((item, index) => ({
+    image:
+      item.imageUrl ||
+      item.assetUrl ||
+      item.url ||
+      item.image ||
+      fallbackCaseImages[index % fallbackCaseImages.length],
+    description: item.description || ''
+  }))
+})
+const industryCards = computed(() => {
+  const groups = industryBlockSection.value.groups
+  if (!groups?.length) return fallbackIndustryCards
+  return groups.map((group, index) => [
+    group.title,
+    group.description,
+    group.imageUrl || fallbackIndustryCards[index % fallbackIndustryCards.length][2],
+    group.tags || []
+  ])
+})
+const deliverySteps = computed(() => {
+  const groups = processSection.value.groups
+  if (!groups?.length) return fallbackDeliverySteps
+  return groups.map((group, index) => [
+    group.heading,
+    group.body,
+    fallbackDeliverySteps[index % fallbackDeliverySteps.length][2]
+  ])
+})
+const testimonials = computed(() => {
+  const groups = testimonialSection.value.groups
+  if (!groups?.length) {
+    return Array.from({ length: 5 }, (_, index) => ({
+      name: '数据优化：',
+      date: `2026-12-${42 + index}`,
+      description:
+        '创作者每日必读的前沿设计趋势、设计方法论和大厂落地经验之谈，14年的行业专注，脑突入口的优质内容沉淀，为每一个从入行到进阶的设计师、创作者赋能。'
+    }))
+  }
+  return groups
+})
+
 function requestConsultation(source, title = '预约免费 GEO 增长诊断') {
   openGlobalConsultation({ title, source })
 }
@@ -372,14 +497,21 @@ onBeforeUnmount(() => {
     <SiteHeader />
 
     <main>
-      <section class="hero-section">
-        <div class="hero-art" aria-hidden="true"></div>
+        <section class="hero-section">
+          <div
+            class="hero-art"
+            :style="backgroundStyle(heroBackgroundImage)"
+            aria-hidden="true"
+          ></div>
         <div class="page-width hero-content">
           <div class="hero-copy">
-            <h1>大马棒 · 云途全域GEO<br />让品牌在AI时代拥有持续增长力</h1>
+            <h1>
+              <template v-for="(line, index) in heroTitle.split('\n')" :key="`${line}-${index}`">
+                <br v-if="index" />{{ line }}
+              </template>
+            </h1>
             <p class="hero-points">
-              <span>✓ 5万真人内容生产网络</span><span>✓ 5000+自媒体资源矩阵</span
-              ><span>✓ 全链路转化闭环</span>
+              <span v-for="tag in heroTags" :key="tag">✓ {{ tag }}</span>
             </p>
             <div class="button-row">
               <button
@@ -407,8 +539,8 @@ onBeforeUnmount(() => {
 
       <section class="intro-section page-width">
         <SectionTitle
-          >已服务<span class="blue">300+</span>全类型经营主体，覆盖<span class="blue">12+</span
-          >主流行业<template #subtitle
+          >{{ customerHallSection.title || '已服务300+全类型经营主体，覆盖12+主流行业'
+          }}<template #subtitle
             >We Have Provided Services To Over 300 Full-spectrum Business Entities<br />Spanning
             More Than A Dozen Mainstream Industry Sectors</template
           ></SectionTitle
@@ -424,8 +556,8 @@ onBeforeUnmount(() => {
       <section id="model" class="model-section">
         <div class="page-width">
           <SectionTitle
-            >独创<span class="blue">「GEO双环增长模型」</span>，实现品效协同长效增长<template
-              #subtitle
+            >{{ capabilitiesSection.title || '独创「GEO双环增长模型」，实现品效协同长效增长'
+            }}<template #subtitle
               >Original "geo Dual-ring Growth Model" Delivers Long-term Growth Through<br />Integrated
               Brand Building And Conversion Performance</template
             ></SectionTitle
@@ -476,16 +608,15 @@ onBeforeUnmount(() => {
       <section id="advantages" class="advantages-section">
         <div class="page-width">
           <SectionTitle
-            ><span class="blue">四大核心</span>优势<template #subtitle
-              >Four Core Advantages</template
-            ></SectionTitle
+            >{{ advantagesSection.title || '四大核心优势'
+            }}<template #subtitle>Four Core Advantages</template></SectionTitle
           >
           <div class="lead-advantage">
-            <img src="/images/lanhu/slices/home-group90-image15@2x.png" alt="真人内容生产" />
+            <img :src="leadAdvantage.image" :alt="leadAdvantage.title" />
             <div>
-              <h3>真人内容生产优势</h3>
-              <p><b>核心点：</b>行业独家5万真人分布式内容生产网络</p>
-              <p><b>价值：</b>用C端爆款内容思维做B端GEO，打造真实可信的AI信任型声量</p>
+              <h3>{{ leadAdvantage.title }}</h3>
+              <p><b>核心点：</b>{{ leadAdvantage.bodyOne }}</p>
+              <p><b>价值：</b>{{ leadAdvantage.bodyTwo }}</p>
             </div>
           </div>
           <div class="advantage-grid">
@@ -508,15 +639,15 @@ onBeforeUnmount(() => {
         <div class="case-background" aria-hidden="true"></div>
         <div class="page-width case-content">
           <SectionTitle
-            ><span class="blue">真实落地成果</span>，见证<span class="blue">增长实效</span
-            ><template #subtitle
+            >{{ caseBlockSection.title || '真实落地成果，见证增长实效'
+            }}<template #subtitle
               >Practical Delivered Results That Demonstrate Tangible Growth Outcomes</template
             ></SectionTitle
           >
           <div class="case-panel">
-            <article v-for="(image, index) in caseImages" :key="image">
-              <img :src="image" :alt="`客户案例 ${index + 1}`" />
-              <p>某企业服务客户: AI搜索全域曝光提升<br />320%月均精准线索新增80+</p>
+            <article v-for="(item, index) in caseCards" :key="`${item.image}-${index}`">
+              <img :src="item.image" :alt="`客户案例 ${index + 1}`" />
+              <p>{{ item.description }}</p>
             </article>
           </div>
           <div class="center-action">
@@ -527,7 +658,8 @@ onBeforeUnmount(() => {
 
       <section id="industries" class="industries-section page-width">
         <SectionTitle
-          >深耕<span class="blue">12+</span>行业，定制专属GEO增长方案<template #subtitle
+          >{{ industryBlockSection.title || '深耕12+行业，定制专属GEO增长方案'
+          }}<template #subtitle
             >With In-depth Experience Across 12+ Industries, We Craft Exclusive Geo Growth
             Solutions<br />Tailored To Clients’ Needs</template
           ></SectionTitle
@@ -538,7 +670,11 @@ onBeforeUnmount(() => {
             <img :src="card[2]" alt="" />
             <div class="quote">“</div>
             <p>某企业服务客户：<br />{{ card[1] }}</p>
-            <div class="tags"><span>#生活服务</span><span>#全域曝光</span></div>
+            <div class="tags">
+              <span v-for="tag in card[3] || ['生活服务', '全域曝光']" :key="`${card[0]}-${tag}`"
+                >#{{ tag }}</span
+              >
+            </div>
           </article>
         </div>
       </section>
@@ -546,12 +682,13 @@ onBeforeUnmount(() => {
       <section id="delivery" class="delivery-section">
         <div class="page-width">
           <SectionTitle
-            ><span class="blue">5步标准化</span>交付流程，透明可控效果可追溯<template #subtitle
+            >{{ processSection.title || '5步标准化交付流程，透明可控效果可追溯'
+            }}<template #subtitle
               >With In-depth Experience Across 12+ Industries, We Craft Exclusive Geo Growth
               Solutions<br />Tailored To Clients’ Needs</template
             ></SectionTitle
           >
-          <div class="delivery-banner"></div>
+          <div class="delivery-banner" :style="backgroundStyle(processSection.assetUrl)"></div>
           <div class="delivery-grid">
             <article v-for="step in deliverySteps" :key="step[0]">
               <img :src="step[2]" alt="" />
@@ -567,29 +704,34 @@ onBeforeUnmount(() => {
       <section class="testimonial-section">
         <div class="page-width">
           <SectionTitle
-            >客户真实评价，见证<span class="blue">服务品质</span
-            ><template #subtitle
+            >{{ testimonialSection.title || '客户真实评价，见证服务品质'
+            }}<template #subtitle
               >Genuine Client Testimonials Attest To Our Service Quality</template
             ></SectionTitle
           >
           <div class="testimonial-track">
-            <article v-for="index in 5" :key="index">
-              <header><span class="avatar"></span><b>数据优化：</b><time>2026-12-42</time></header>
-              <p>
-                创作者每日必读的前沿设计趋势、设计方法论和大厂落地经验之谈，14年的行业专注，脑突入口的优质内容沉淀，为每一个从入行到进阶的设计师、创作者赋能。
-              </p>
+            <article v-for="(item, index) in testimonials" :key="`${item.name}-${index}`">
+              <header>
+                <span class="avatar" :style="backgroundStyle(item.avatarUrl)"></span
+                ><b>{{ item.name }}</b
+                ><time>{{ item.date }}</time>
+              </header>
+              <p>{{ item.description }}</p>
             </article>
           </div>
         </div>
       </section>
 
       <section class="cta-section">
-        <div class="cta-art"></div>
+        <div class="cta-art" :style="backgroundStyle(bottomCtaSection.assetUrl)"></div>
         <div class="cta-content">
           <h2>
-            AI搜索增长风口已至，大马棒 · 云途全域GEO助<br />力企业打造品效双闭环的长效增长体系
+            {{
+              bottomCtaSection.title ||
+              'AI搜索增长风口已至，大马棒 · 云途全域GEO助力企业打造品效双闭环的长效增长体系'
+            }}
           </h2>
-          <p>免费获取1对1GEO增长诊断方案</p>
+          <p>{{ bottomCtaSection.subtitle || '免费获取1对1GEO增长诊断方案' }}</p>
           <button class="primary-button" type="button" @click="requestConsultation('首页底部 CTA')">
             立即免费咨询 <b>→</b>
           </button>