refactor(portal): 对齐 facms.cn 架构，区块顺序归位并撤掉深色块

对比 https://www.facms.cn 后调整三处结构性差异：

1. 顺序归位
   参考站是「产品功能 → 核心能力」，先讲做什么再讲凭什么。
   上一版我把核心能力提到前面并染成深色，属于人为制造差异。
   现在改回：项目 → 产品功能 → 核心能力 → 界面预览。

2. 撤掉深色块
   参考站全程浅色，靠留白与间距分段，没有深色区块打断。
   移除 .p-section--deep 的使用，核心能力回归 p-section--alt 浅灰，
   与前后白底交替，和整站色阶统一。
   （样式定义保留，后续需要强调区块时可用。）

3. 核心能力改标签切换
   参考站核心能力是一条「通用特性」+ 9 个产品分组的标签切换。
   新增 abilityGroups：通用底座 / iotLCM / 秀杰 DTU / XiuAdmin 四组，
   每组 6 项，复用 CapabilityTabs（加 source="home" 与 cols 参数）。
   替代原先 8 张平铺卡片。

4. 产品功能密度对齐
   参考站产品功能 9 张卡各带 6 项功能点。原先我们只有 3 张卡
   （每条产品线一张），信息密度偏低。
   拆成 9 张：卡与库存 / 通道与上游 / 资费与计费 / 组织与账号 /
   生产与研发 / 代理与客户 / 设备接入 / 中后台底座 / 开发效率。

验证
- 构建 13 页，274 条引用 0 失效
- 浏览器实测区块顺序：hero → projects → features → core → preview
  → foundation → how → docs → cta，无 .p-section--deep 残留
- 产品功能 9 卡、核心能力 4 标签每标签 6 卡
- 移动端 390px 无横向溢出

.vitepress/config.mts

@@ -31,6 +31,8 @@ export default defineConfig({
     ['link', { rel: 'icon', type: 'image/svg+xml', href: `${SITE_BASE}favicon.svg` }],
   ],
   themeConfig: {
+    siteTitle: '雪羊科技',
+    logo: { src: '/snowgoat-logo.png', alt: '雪羊科技' },
     nav: [
       { text: '首页', link: '/' },
       { text: '产品功能', link: '/#features' },

.vitepress/theme/components/CapabilityTabs.vue

@@ -1,10 +1,28 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-import { iotlcmGroups, dtuGroups, type CapGroup } from '../../../data/content'
+import {
+  iotlcmGroups,
+  dtuGroups,
+  abilityGroups,
+  type CapGroup,
+} from '../../../data/content'
 
-const props = defineProps<{ source?: 'iotlcm' | 'dtu' }>()
+const props = withDefaults(
+  defineProps<{
+    /** 数据源：iotlcm / dtu 用于项目详情页，home 用于首页核心能力 */
+    source?: 'iotlcm' | 'dtu' | 'home'
+    /** 三栏还是四栏 */
+    cols?: 3 | 4
+  }>(),
+  { source: 'iotlcm', cols: 3 }
+)
 
-const groups: CapGroup[] = props.source === 'dtu' ? dtuGroups : iotlcmGroups
+const groups: CapGroup[] =
+  props.source === 'dtu'
+    ? dtuGroups
+    : props.source === 'home'
+      ? abilityGroups
+      : iotlcmGroups
 
 const active = ref(groups[0]?.id ?? '')
 const current = computed(() => groups.find((g) => g.id === active.value) ?? groups[0])
@@ -28,8 +46,13 @@ const current = computed(() => groups.find((g) => g.id === active.value) ?? grou
 
     <p v-if="current" class="cap-intro">{{ current.intro }}</p>
 
-    <div v-if="current" :key="current.id" class="p-grid p-grid--3 cap-grid">
-      <div v-for="(item, i) in current.items" :key="item.title" class="p-card">
+    <div
+      v-if="current"
+      :key="current.id"
+      class="p-grid cap-grid"
+      :class="cols === 4 ? 'p-grid--4' : 'p-grid--3'"
+    >
+      <div v-for="(item, i) in current.items" :key="item.title" class="p-card ca-card">
         <span class="p-card-index">{{ String(i + 1).padStart(2, '0') }}</span>
         <h3 class="p-card-title">{{ item.title }}</h3>
         <p class="p-card-text">{{ item.text }}</p>
@@ -51,4 +74,11 @@ const current = computed(() => groups.find((g) => g.id === active.value) ?? grou
 .cap-grid {
   transition: opacity 0.2s ease;
 }
+
+@media (max-width: 720px) {
+  .cap-intro {
+    margin-bottom: 24px;
+    font-size: 14px;
+  }
+}
 </style>

.vitepress/theme/components/HomePage.vue

@@ -70,35 +70,14 @@ import {
       </div>
     </section>
 
-    <!-- 核心能力 -->
-    <section class="p-section p-section--deep" id="core">
-      <div class="p-wrap">
-        <header class="p-head">
-          <span class="p-eyebrow">CORE CAPABILITIES</span>
-          <h2 class="p-title">工程层面的硬指标</h2>
-          <p class="p-desc">
-            功能列表谁都能写。这些是真正决定能不能上线、好不好维护的部分。
-          </p>
-        </header>
-
-        <div class="p-grid p-grid--4">
-          <div v-for="a in coreAbilities" :key="a.title" class="p-card ca-card">
-            <span class="ca-tag">{{ a.tag }}</span>
-            <h3 class="p-card-title">{{ a.title }}</h3>
-            <p class="p-card-text">{{ a.text }}</p>
-          </div>
-        </div>
-      </div>
-    </section>
-
     <!-- 产品功能 -->
-    <section class="p-section p-section--alt" id="features">
+    <section class="p-section" id="features">
       <div class="p-wrap">
         <header class="p-head">
           <span class="p-eyebrow">PRODUCT FEATURES</span>
-          <h2 class="p-title">三个产品线，各自覆盖一段完整业务</h2>
+          <h2 class="p-title">产品功能：一套系统覆盖完整业务</h2>
           <p class="p-desc">
-            iotLCM 管卡、秀杰 DTU 管设备、XiuAdmin 提供中后台底座。每条产品线的功能都在生产环境跑过，不是规划稿。
+            iotLCM 管卡、秀杰 DTU 管设备、XiuAdmin 提供中后台底座。按业务域拆开，每一块都在生产环境跑过。
           </p>
         </header>
 
@@ -115,6 +94,23 @@ import {
       </div>
     </section>
 
+    <!-- 核心能力 -->
+    <section class="p-section p-section--alt" id="core">
+      <div class="p-wrap">
+        <header class="p-head">
+          <span class="p-eyebrow">CORE CAPABILITIES</span>
+          <h2 class="p-title">核心能力：凭什么用得稳</h2>
+          <p class="p-desc">
+            功能列表谁都能写。这些是真正决定能不能上线、好不好维护的部分。按产品切换查看。
+          </p>
+        </header>
+
+        <CapabilityTabs source="home" />
+      </div>
+    </section>
+
+
+
 
     <!-- 界面预览 -->
     <section class="p-section" id="preview">