feat：接口联调

pages/about.vue

@@ -5,18 +5,44 @@ import SiteFooter from '~/components/site/SiteFooter.vue'
 
 const pageRoot = ref(null)
 const { openConsultation } = useConsultation()
+const { fetchPublicSiteConfig } = useOfficialContent()
 let animationContext
 
-useHead({
+const { data: siteConfigRows } = await useAsyncData('public-site-config-about', () =>
+  fetchPublicSiteConfig()
+)
+
+function parseConfigValue(value, fallback) {
+  if (value == null || value === '') return fallback
+  if (typeof value !== 'string') return value
+  try {
+    return JSON.parse(value)
+  } catch {
+    return fallback
+  }
+}
+
+const siteConfig = computed(() => siteConfigRows.value || {})
+const brandConfig = computed(() => parseConfigValue(siteConfig.value.BRAND_PROFILE, {}))
+const contactConfig = computed(() =>
+  parseConfigValue(siteConfig.value.CONTACT, {
+    phone: '待补充',
+    email: '待补充',
+    address: '待补充'
+  })
+)
+
+useHead(() => ({
   title: '关于我们｜大马棒·云途全域 GEO',
   meta: [
     {
       name: 'description',
       content:
+        brandConfig.value.seoDescription ||
         '大马棒·云途全域 GEO 是聚焦 AI 搜索增长的全链路服务商，提供可见性诊断、策略规划、内容建设、信源分发与效果复盘。'
     }
   ]
-})
+}))
 
 const stats = [
   ['1000+', '累计服务客户'],
@@ -33,7 +59,7 @@ const serviceFlow = [
   ['05', '效果复盘', '持续监测覆盖率、推荐率、流量与咨询线索质量。']
 ]
 
-const timeline = [
+const fallbackTimeline = [
   {
     year: '2023',
     title: '核心团队组建',
@@ -58,6 +84,22 @@ const timeline = [
     events: ['打通品牌曝光与营销获客闭环', '服务客户突破 1000 家，覆盖 12+ 主流行业']
   }
 ]
+const timeline = computed(() => {
+  const rows = parseConfigValue(siteConfig.value.ABOUT_HISTORY, [])
+  if (!Array.isArray(rows) || rows.length === 0) return fallbackTimeline
+
+  return rows
+    .filter((item) => item.status !== 'OFFLINE')
+    .sort((left, right) => (Number(left.sortOrder) || 0) - (Number(right.sortOrder) || 0))
+    .map((item) => ({
+      year: item.year || '',
+      title: item.title || '',
+      events:
+        Array.isArray(item.events) && item.events.length
+          ? item.events
+          : [item.description].filter(Boolean)
+    }))
+})
 
 const teamCapabilities = [
   ['搜索理解', '经历 PC 搜索、移动搜索到 AI 搜索的持续变化。'],
@@ -211,7 +253,7 @@ onBeforeUnmount(() => animationContext?.revert())
       <section class="method-section">
         <div class="page-width">
           <header class="center-heading">
-            <p class="section-kicker">全链路服务方法</p>
+            <p class="section-kicker method-kicker">全链路服务方法</p>
             <h2>从 AI 可见性诊断，到效果复盘</h2>
             <p>每一个环节都围绕真实业务目标推进，避免内容、媒体和转化承接各做一段。</p>
           </header>
@@ -289,20 +331,16 @@ onBeforeUnmount(() => animationContext?.revert())
           <div class="contact-details">
             <dl>
               <div>
-                <dt>公司名称</dt>
-                <dd>成都大马棒传媒有限公司</dd>
+                <dt>咨询电话</dt>
+                <dd>{{ contactConfig.phone || '待补充' }}</dd>
               </div>
               <div>
-                <dt>公司地址</dt>
-                <dd>成都市武侯区芯通科技大厦 B 座 9 楼</dd>
+                <dt>联系邮箱</dt>
+                <dd>{{ contactConfig.email || '待补充' }}</dd>
               </div>
               <div>
-                <dt>联系电话</dt>
-                <dd>待补充</dd>
-              </div>
-              <div>
-                <dt>商务邮箱</dt>
-                <dd>待补充</dd>
+                <dt>办公地址</dt>
+                <dd>{{ contactConfig.address || '待补充' }}</dd>
               </div>
             </dl>
             <div class="contact-qr">
@@ -819,6 +857,15 @@ onBeforeUnmount(() => animationContext?.revert())
   margin: 0 auto;
   text-align: center;
 }
+.center-heading .section-kicker {
+  width: 100%;
+  display: block;
+  justify-content: center;
+  text-align: center;
+}
+.center-heading .section-kicker::before {
+  display: none;
+}
 .center-heading > p:last-child {
   max-width: 640px;
   margin: 18px auto 0;
@@ -856,7 +903,7 @@ onBeforeUnmount(() => animationContext?.revert())
   place-items: center;
   border: 7px solid rgba(255, 255, 255, 0.92);
   border-radius: 50%;
-  color: #fff;
+  color: #fff !important;
   background: #358af0;
   box-shadow: 0 11px 24px rgba(51, 135, 235, 0.22);
   font-size: 10px;
@@ -1104,10 +1151,13 @@ onBeforeUnmount(() => animationContext?.revert())
     url('/images/lanhu/slices/home-group105-image31@2x.png') center / cover no-repeat;
 }
 .about-cta-content {
+  display: grid;
+  justify-items: center;
   padding: 75px 0;
   text-align: center;
 }
 .about-cta-content > p {
+  width: 100%;
   margin: 0;
   color: #237df0;
   font-size: 12px;