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 无横向溢出

.gitignore

@@ -14,3 +14,5 @@ dist
 .vitepress/final
 .vitepress/v2
 .vitepress/v3
+.vitepress/v4
+.vitepress/v5

.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">

data/content.ts

@@ -36,44 +36,128 @@ export interface ProductLine {
 
 export const productLines: ProductLine[] = [
   {
-    id: 'iotlcm',
-    name: 'iotLCM 物联网卡',
-    tagline: 'SIM 卡从入库到销户的全流程',
+    id: 'iotlcm-card',
+    name: '卡与库存',
+    tagline: '从入库到销户，每张卡都可追',
     features: [
-      '卡信息检索与批量导入',
-      '入库 / 库存 / 出库三级流转',
-      '批量开停复机与续费',
-      '套餐、流量池与定价',
-      '三大运营商协议直连',
-      '达量断网与智能诊断',
+      '卡信息检索与按三码查卡',
+      '批量导入建立卡档案',
+      '入库 / 在库 / 出库三级流转',
+      '库存批次与去向追溯',
+      '批量开停复机',
+      '续费与变更套餐',
     ],
     page: '/projects/iotlcm/',
   },
   {
-    id: 'xiu-dtu',
-    name: '秀杰 DTU 设备',
-    tagline: 'DTU 设备从生产到运行监控',
+    id: 'iotlcm-channel',
+    name: '通道与上游',
+    tagline: '把运营商接口差异收敛到一层',
     features: [
-      '产品、型号与生产批次',
-      '固件版本与 OTA 升级',
-      '配置分组与下发状态',
-      '代理商划拨与回收',
-      'HTTP / TCP 双通道接入',
-      '设备在线状态监控',
+      '中国移动 OneLink 直连',
+      '中国电信 5G CMP 直连',
+      '中国联通 10646 直连',
+      '通道与接入参数模板',
+      '共享 Token 接入三方渠道',
+      '通道缓存转发与凭据管理',
+    ],
+    page: '/projects/iotlcm/',
+  },
+  {
+    id: 'iotlcm-billing',
+    name: '资费与计费',
+    tagline: '套餐、流量池与定价分开建模',
+    features: [
+      '套餐与流量池定义',
+      '多层套餐结构绑定',
+      '面向代理商的定价规则',
+      '面向终端客户的差异化报价',
+      '达量断网阈值设置',
+      '实时用量与月累计查询',
+    ],
+    page: '/projects/iotlcm/',
+  },
+  {
+    id: 'iotlcm-org',
+    name: '组织与账号',
+    tagline: '多租户下的权限治理',
+    features: [
+      '多级企业组织结构',
+      '用户与角色权限分配',
+      '菜单与按钮级权限',
+      '代理商分级与分佣',
+      '对外 API 凭证签发吊销',
+      '操作审计与工单流转',
+    ],
+    page: '/projects/iotlcm/',
+  },
+  {
+    id: 'xiu-dtu-produce',
+    name: '生产与研发',
+    tagline: '设备出厂前的每个环节留痕',
+    features: [
+      '产品与硬件型号定义',
+      '工厂与生产批次管理',
+      '设备批量生产导入导出',
+      '固件版本登记与发布',
+      'OTA 升级任务分批下发',
+      '配置分组与版本管理',
     ],
     page: '/projects/xiu-dtu/',
   },
   {
-    id: 'xiu-admin',
-    name: 'XiuAdmin 中后台',
-    tagline: '22 项内置功能的应用底座',
+    id: 'xiu-dtu-channel',
+    name: '代理与客户',
+    tagline: '设备划拨链路透明可回溯',
+    features: [
+      '多级代理结构维护',
+      '设备划拨与回收留痕',
+      '划拨历史回溯到批次',
+      '终端客户扫码绑定',
+      '一机一码防串货',
+      '代理商自助查单',
+    ],
+    page: '/projects/xiu-dtu/',
+  },
+  {
+    id: 'xiu-dtu-device',
+    name: '设备接入',
+    tagline: '软硬一体的接入与监控',
+    features: [
+      'HTTP / TCP 双通道接入',
+      '指令下发与回执确认',
+      '事件上报与 UART 隧道',
+      '设备在线状态监控',
+      '信号强度与异常告警',
+      '联调与压测脚本随仓',
+    ],
+    page: '/projects/xiu-dtu/',
+  },
+  {
+    id: 'xiu-admin-base',
+    name: '中后台底座',
+    tagline: '22 项能力开箱可用',
     features: [
       '多租户与租户套餐',
       '用户、部门、岗位、角色',
       '菜单与按钮级权限',
-      '代码生成（CURD / 树表）',
-      '定时任务与消息队列',
-      '服务监控与操作日志',
+      '字典、参数与客户端管理',
+      '在线用户与登录日志',
+      '通知公告与消息队列',
+    ],
+    page: '/projects/xiu-admin/',
+  },
+  {
+    id: 'xiu-admin-dev',
+    name: '开发效率',
+    tagline: '少写样板代码',
+    features: [
+      'CURD 与树表代码生成',
+      '表单控件勾选生成',
+      '定时任务在线管理',
+      '附件上传与分片续传',
+      '服务与缓存监控',
+      '操作 / 登录 / 服务日志',
     ],
     page: '/projects/xiu-admin/',
   },
@@ -133,6 +217,73 @@ export const coreAbilities: CoreAbility[] = [
   },
 ]
 
+/* ============================================================
+   核心能力分组 —— 首页核心能力区块用标签切换呈现
+   组织方式对齐参考站：一条「通用底座」+ 每条产品线各一组
+   ============================================================ */
+
+export interface AbilityGroup {
+  id: string
+  name: string
+  intro: string
+  items: Capability[]
+}
+
+export const abilityGroups: AbilityGroup[] = [
+  {
+    id: 'common',
+    name: '通用底座',
+    intro: '三条产品线共享的工程能力，覆盖部署、权限、交付与维护。',
+    items: [
+      { title: '单机一条命令起', text: 'Docker Compose 编排齐备，首次启动自动建库建表、导入种子数据与时序库建表，不需要本地编译，约一分钟可用。' },
+      { title: '多租户权限模型', text: '租户、部门、岗位、角色四层结构，菜单与按钮级权限、数据范围划分，关键操作全程留痕。' },
+      { title: '版本化对外接口', text: 'V3 版本化接口、旧版兼容接口与运营商能力代理三套合同并行，升级不破坏既有调用方。' },
+      { title: '离线可部署', text: '镜像可导出为归档文件带入内网，无外网环境同样能完成安装与升级，适合企业内网与客户现场。' },
+      { title: '文档与代码同仓', text: '使用手册、部署手册与接口合同与代码同仓维护，随平台一起发布，版本不会脱节。' },
+      { title: '健康探针与自愈', text: '各服务带 healthcheck，网关依赖后端就绪后才启动；resolver + resolve 让上游容器换 IP 后自动跟随。' },
+    ],
+  },
+  {
+    id: 'iotlcm',
+    name: 'iotLCM',
+    intro: '物联网卡平台的工程重点：协议收敛、上游隔离与用量数据的长期可回溯。',
+    items: [
+      { title: '运营商协议内置', text: '中国移动 OneLink、中国电信 5G CMP、中国联通 10646 的接口差异收敛在对接层，上层业务不感知底层协议。' },
+      { title: '上游抖动隔离', text: '独立的通道缓存转发层，上游异常或超时不直接传导到管理端，管理端可用性不受上游影响。' },
+      { title: '时序数据留存', text: '流量与状态按账期落入时序库，月度账单自动生成、每小时增量更新，长期趋势分析不失真。' },
+      { title: '全量同步与增量对齐', text: '流量、状态、IMEI 支持全量同步与增量对齐两条路径，数据不一致时可主动触发校准。' },
+      { title: '批量任务可重试', text: '开停复机与续费按批次下发，失败项单独标记并可重试，不影响同批次其它卡。' },
+      { title: '智能诊断', text: '结合卡状态、通道与用量给出诊断结论与处置建议，把排障从查日志变成看结论。' },
+    ],
+  },
+  {
+    id: 'xiu-dtu',
+    name: '秀杰 DTU',
+    intro: '设备平台的工程重点：软硬绑定、配置下发与固件升级的可靠性。',
+    items: [
+      { title: 'HTTP / TCP 双通道', text: '设备接入同时支持 HTTP 与 TCP，按现场网络条件选择，指令下发均有回执确认。' },
+      { title: '一机一码防串货', text: '设备唯一识别码与型号绑定，扫码即绑定终端客户，杜绝拔卡换机与跨渠道窜货。' },
+      { title: '配置版本化下发', text: '配置分组与版本独立管理，下发状态逐台可见，异常设备可单独重推。' },
+      { title: 'OTA 分批升级', text: '固件升级任务分批下发，进度与结果可查，失败设备可重试，避免一次性全量推送的风险。' },
+      { title: '生产批次可追溯', text: '产品、硬件型号、工厂与生产批次关联，出问题能回溯到具体批次与供应商。' },
+      { title: '联调脚本随仓', text: '仓库自带设备联调与压测脚本，新设备接入可先在本地验证协议，再接真实环境。' },
+    ],
+  },
+  {
+    id: 'xiu-admin',
+    name: 'XiuAdmin',
+    intro: '中后台框架的工程重点：少写样板代码，权限与审计开箱可用。',
+    items: [
+      { title: '代码生成', text: '建表加简单配置即可生成 CURD 与树表代码，表单控件勾选生成，省掉大量重复劳动。' },
+      { title: '模块化与插件化', text: '应用化、模块化、插件化机制，业务模块可独立开发与装卸，不侵入框架核心。' },
+      { title: 'JWT 认证', text: '基于 JWT 的用户状态认证，前后端分离场景直接可用。' },
+      { title: '路由自动生成文档', text: 'GoFrame 的规范化路由注册，无需注解即可生成 api 文档。' },
+      { title: '全链路日志', text: '操作日志、登录日志、服务日志三类分开留存，异常可按堆栈直接定位。' },
+      { title: '服务与缓存监控', text: 'CPU、内存、磁盘、网络、堆栈与缓存命令统计内置，不需要额外接监控组件。' },
+    ],
+  },
+]
+
 export interface Capability {
   title: string
   text: string