docs: 更新决策记录与实施计划

- CONTEXT.md添加9项新决策(HSI架构/水墨雅致/L3策略等) - ADR: HSI架构与四层叙事模型决策记录 - 实施计划: IHG设计对齐详细任务分解
2026-06-07 16:21:29 +08:00
parent 38ae991ea7
commit b1f3a395ca
5 changed files with 2867 additions and 2 deletions
@@ -0,0 +1,934 @@
+# HSI 架构 + 四层叙事模型全量重构实施计划
+
+> **面向 AI 代理的工作者：** 必需子技能：使用 superpowers:subagent-driven-development 执行此计划。步骤使用复选框（`- [ ]`）语法来跟踪进度。
+
+**目标：** 将 Novalon 网站从"扁平模板套用"升级为 HSI 混合架构 + 四层分层叙事体系，全量重构 14 个详情页 + 3 个列表页 + 导航系统，参考 IHG 洲际酒店集团官网的信息架构思维。
+
+**架构：** HSI（Hub-Spoke-Independent）混合信息架构——Products 做分区目录 Hub，Solutions 做场景入口 Spoke，Services 做支撑层，独立产品在 Products 的专业产品区内展示。所有详情页统一采用四层叙事模型（Hero → 价值支撑 → 信任证明 → CTA），Hero 区域支持色调+背景+布局的有限视觉变化。
+
+**技术栈：** Next.js 14 App Router / TypeScript / Tailwind CSS / Framer Motion / Lucide Icons
+
+**决策依据：** [CONTEXT.md](../CONTEXT.md) | [ADR-0002](../../adr/0002-hsi-architecture-four-layer-narrative.md)
+
+---
+
+## 一、架构总览
+
+### 1.1 目标信息架构
+
+```mermaid
+graph TB
+    subgraph Hub["Novalon 官网 - 品牌枢纽"]
+        HOME["/ 首页"]
+        ABOUT["/about 关于我们"]
+        CONTACT["/contact 联系我们"]
+    end
+
+    subgraph Spoke["Solutions - 场景入口"]
+        SM["/solutions/manufacturing 制造业"]
+        SR["/solutions/retail 零售业"]
+        SE["/solutions/education 教育行业"]
+        SH["/solutions/healthcare 医疗健康"]
+    end
+
+    subgraph ProductHub["Products - 产品目录 Hub"]
+        subgraph Suite["企业套装区"]
+            P_ERP["/products/erp ERP"]
+            P_CRM["/products/crm CRM"]
+            P_BI["/products/bi BI"]
+            P_CMS["/products/cms CMS"]
+            P_SDS["/products/sds SDS"]
+            P_OA["/products/oa OA"]
+        end
+        subgraph Standalone["专业产品区"]
+            PS["/products/security-* 安全产品"]
+            PI["/products/industry-* 行业特种"]
+            PH["/products/hardware-* 硬件产品"]
+        end
+    end
+
+    subgraph Support["Services - 服务支撑"]
+        SV_SW["/services/software 软件开发"]
+        SV_DA["/services/data 数据分析"]
+        SV_CO["/services/consulting 技术咨询"]
+        SV_SO["/services/solutions 方案实施"]
+    end
+
+    HOME --> ProductHub
+    HOME --> Spoke
+    HOME --> Support
+
+    SM -->|"推荐: ERP+BI+SDS"| Suite
+    SR -->|"推荐: ERP+CRM+BI"| Suite
+    SE -->|"推荐: CMS+OA"| Suite
+    SH -->|"推荐: ERP+SDS"| Suite
+
+    SM -->|"服务包"| Support
+    SR -->|"服务包"| Support
+
+    P_ERP <-->|"适用于"| SM
+    P_ERP <-->|"适用于"| SH
+    P_BI <-->|"适用于"| SM
+    P_BI <-->|"适用于"| SR
+
+    style Hub fill:#FEF2F4,stroke:#C41E3A,color:#1C1C1C
+    style Spoke fill:#EFF6FF,stroke:#2563EB,color:#1C1C1C
+    style ProductHub fill:#F0FDF4,stroke:#16A34A,color:#1C1C1C
+    style Support fill:#FAF5FF,stroke:#7C3AED,color:#1C1C1C
+    style Suite fill:#DCFCE7,stroke:#16A34A,color:#1C1C1C
+    style Standalone fill:#FEF9C3,stroke:#CA8A04,color:#1C1C1C
+```
+
+### 1.2 四层叙事模型
+
+```mermaid
+graph LR
+    subgraph L1["Layer 1: Hero - 情感入口"]
+        H1["大视觉背景<br/>标题 + 价值主张<br/>状态/分类标签<br/>⚡ 支持色调+纹理+布局变化"]
+    end
+
+    subgraph L2["Layer 2: 价值支撑 - 为什么选我们"]
+        P2_PRODUCT["产品页: 功能模块 + 优势 + 规格 + 场景"]
+        P2_SOLUTION["方案页: 痛点 → 架构图 → 推荐组合 ⭐"]
+        P2_SERVICE["服务页: 挑战→成果KPI + 流程 + 团队"]
+        P2_STANDALONE["独立产品: 特性 + 参数 + 对比优势"]
+    end
+
+    subgraph L3["Layer 3: 信任证明 - 消除顾虑 ⭐新增"]
+        T3["案例故事 / 数据佐证<br/>认证资质 / 客户评价<br/>部署案例 / 性能数据"]
+    end
+
+    subgraph L4["Layer 4: CTA - 行动指引"]
+        C4["主行动按钮 + 次行动<br/>⭐ 交叉推荐卡片<br/>方案↔产品↔服务 双向链接"]
+    end
+
+    L1 --> L2 --> L3 --> L4
+
+    style L1 fill:#C41E3A,color:#FFF
+    style L2 fill:#2563EB,color:#FFF
+    style L3 fill:#16A34A,color:#FFF
+    style L4 fill:#7C3AED,color:#FFF
+```
+
+### 1.3 Hero 变化策略
+
+```mermaid
+graph TB
+    subgraph Base["统一基础（不变）"]
+        BCSS["Design Tokens CSS 变量"]
+        BHDR["Header / Footer / Breadcrumb"]
+        BFNT["字体系统 Noto Sans SC + AoyagiReisho"]
+    end
+
+    subgraph Variation["Hero 区域允许的变化"]
+        direction LR
+        V_COLOR["🎨 色调变化<br/>ERP=深蓝 #1e3a5f<br/>BI=数据蓝 #0891B2<br/>CRM=关系蓝 #2563EB<br/>安全=盾牌红 #991B1B"]
+        V_TEXTURE["📐 背景纹理<br/>ERP=几何网格<br/>BI=数据流线条<br/>CMS=文档图层<br/>安全=六边形盾牌纹"]
+        V_LAYOUT["📐 布局微调<br/>产品页=左对齐<br/>方案页=居中<br/>服务页=左对齐+图标<br/>独立产品=宽幅"]
+    end
+
+    Base --> Variation
+```
+
+---
+
+## 二、文件结构
+
+### 2.1 新建文件清单
+
+```
+src/
+├── lib/
+│   └── constants/
+│       ├── hero-themes.ts              # Hero 变化主题定义（色板/纹理/布局）
+│       └── cross-references.ts         # 方案↔产品↔服务交叉引用数据
+│
+├── components/
+│   ├── detail/                          # 🆕 四层叙事组件库
+│   │   ├── detail-hero.tsx             # L1: Hero 组件（支持主题变化）
+│   │   ├── detail-trust-section.tsx    # L3: 信任证明容器
+│   │   ├── detail-cta-section.tsx      # L4: CTA 区（含交叉推荐）
+│   │   ├── product-value-section.tsx   # L2变体: 产品功能/优势/规格
+│   │   ├── solution-value-section.tsx  # L2变体: 方案痛点/架构图/组合
+│   │   ├── service-value-section.tsx   # L2变体: 服务挑战/成果/流程
+│   │   ├── trust-case-study.tsx        # L3组件: 案例故事卡片
+│   │   ├── trust-data-proof.tsx        # L3组件: 数据佐证指标
+│   │   ├── trust-certification.tsx     # L3组件: 认证资质展示
+│   │   └── cross-recommend-grid.tsx    # L4组件: 交叉推荐网格
+│   │
+│   └── layout/
+│       └── mega-dropdown.tsx           # ✏️ 修改: 适配 Products 分区
+│
+└── app/(marketing)/
+    ├── products/
+    │   ├── page.tsx                    # ✏️ 重构: 分区列表页
+    │   └── [id]/
+    │       └── page.tsx                # ✏️ 重构: 四层叙事产品详情
+    ├── solutions/
+    │   ├── page.tsx                    # ✏️ 重构: 方案列表页
+    │   └── [id]/
+    │       ├── page.tsx                # ✏️ 修改: Server Component 数据层
+    │       └── client.tsx              # ✏️ 重构: 四层叙事方案详情
+    ├── services/
+    │   ├── page.tsx                    # ✏️ 重构: 服务列表页
+    │   └── [id]/
+    │       ├── page.tsx                # ✏️ 修改: Server Component 数据层
+    │       └── client.tsx              # ✏️ 重构: 四层叙事服务详情
+    └── templates/
+        └── standalone-product.tsx      # 🆕 独立产品空模板
+```
+
+### 2.2 修改文件清单
+
+| 文件路径 | 变更类型 | 说明 |
+|---------|---------|------|
+| `src/lib/constants/products.ts` | 修改 | Product 接口增加 `heroTheme` / `trustCase` 字段 |
+| `src/lib/constants/solutions.ts` | 修改 | Solution 接口增加 `heroTheme` / `suiteCombination` / `trustData` 字段 |
+| `src/lib/constants/services.ts` | 修改 | 增加 Service 类型接口和 `heroTheme` / `trustCases` 字段 |
+| `src/lib/constants/navigation.ts` | 修改 | MEGA_DROPDOWN_DATA.products 分为两栏（套装/专业） |
+| `src/lib/constants/index.ts` | 修改 | 导出新模块 |
+| `src/components/layout/mega-dropdown.tsx` | 修改 | 支持分组展示（分栏+组标题） |
+| `src/app/(marketing)/products/page.tsx` | 重写 | 企业套装区 + 专业产品区分区展示 |
+| `src/app/(marketing)/products/[id]/page.tsx` | 重写 | 四层叙事产品详情 |
+| `src/app/(marketing)/solutions/page.tsx` | 重写 | 方案列表页优化 |
+| `src/app/(marketing)/solutions/[id]/page.tsx` | 修改 | 增加 suiteCombination 数据传递 |
+| `src/app/(marketing)/solutions/[id]/client.tsx` | 重写 | 四层叙事方案详情 |
+| `src/app/(marketing)/services/page.tsx` | 重写 | 服务列表页优化 |
+| `src/app/(marketing)/services/[id]/page.tsx` | 修改 | 增加类型安全 |
+| `src/app/(marketing)/services/[id]/client.tsx` | 重写 | 四层叙事服务详情 |
+
+---
+
+## 三、实施阶段与任务
+
+### Phase 0: 基础设施 — 数据模型 + Hero 主题系统 + Section 组件库
+
+**目标：** 建立所有后续页面共用的基础设施，不涉及具体页面内容。
+
+---
+
+#### 任务 0.1: 创建 Hero 主题系统
+
+**文件：**
+- 创建：`src/lib/constants/hero-themes.ts`
+
+- [ ] **步骤 1：创建 Hero 主题定义文件**
+
+完整代码包含：
+- `HeroLayout` 类型：`'left' | 'center' | 'wide' | 'icon-left'`
+- `HeroTexture` 接口：type（grid/data-flow/layers/shield-hex/circuit/none）、opacity、可选 color
+- `HeroTheme` 接口：id/name/gradientFrom/gradientTo/gradientAngle/accentColor/accentBg/texture/layout/badge
+- `HERO_THEMES` 对象：10 个预定义主题（erp/crm/bi/cms/sds/oa/solution/service/security/default）
+- `getHeroTheme(id)` 工具函数
+
+每个主题的色值定义：
+- erp: gradientFrom=#1e3a5f → gradientTo=#0f172a, accent=#3b82f6, texture=grid, layout=left, badge='企业旗舰'
+- crm: gradientFrom=#1e40af → #1e3a8a, accent=#2563eb, texture=layers, layout=left, badge='企业旗舰'
+- bi: gradientFrom=#0c4a6e → #082f49, accent=#0891b2, texture=data-flow, layout=left, badge='专业工具'
+- cms: gradientFrom=#14532d → #052e16, accent=#16a34a, texture=layers, layout=left, badge='成长加速'
+- sds: gradientFrom=#78350f → #450a00, accent=#ea580c, texture=data-flow, layout=left, badge='专业工具'
+- oa: gradientFrom=#4c1d95 → #2e1065, accent=#7c3aed, texture=grid, layout=left, badge='成长加速'
+- solution: gradientFrom=#1c1917 → #0c0a09, accent=#C41E3A, texture=circuit, layout=center
+- service: gradientFrom=#1e293b → #0f172a, accent=#C41E3A, texture=none, layout=icon-left
+- security: gradientFrom=#450a0a → #1c0505, accent=#dc2626, texture=shield-hex, layout=wide, badge='安全合规'
+- default: gradientFrom=#1c1917 → #0c0a09, accent=#C41E3A, texture=none, layout=left
+
+- [ ] **步骤 2：验证 TypeScript 编译**
+
+运行：`npx tsc --noEmit --pretty src/lib/constants/hero-themes.ts`
+预期：无错误
+
+- [ ] **步骤 3：Commit**
+
+```bash
+git add src/lib/constants/hero-themes.ts
+git commit -m "feat(hero): add theme system for detail page hero variation"
+```
+
+---
+
+#### 任务 0.2: 创建交叉引用数据
+
+**文件：**
+- 创建：`src/lib/constants/cross-references.ts`
+- 修改：`src/lib/constants/index.ts`
+
+- [ ] **步骤 1：创建交叉引用数据模块**
+
+定义三个核心函数：
+
+`getProductCrossRefs(productId)` — 返回 CrossReference[]：
+- 查找 SOLUTIONS 中 relatedProducts 包含此 productId 的方案
+- 查找 PRODUCTS 中与此产品共同出现在同一方案中的其他产品（最多 3 个）
+- 每个 ref 的 reason 字段说明关联逻辑
+
+`getSolutionCrossRefs(solutionId)` — 返回 CrossReference[]：
+- 根据 Solution.relatedProducts 映射到对应 Product 实体
+- reason 格式：「{方案名} 推荐使用 {产品名}」
+
+`getServiceCrossRefs(serviceId)` — 返回 CrossReference[]：
+- 内置 mapping 表：software→manufacturing+retail, data→manufacturing+retail+healthcare, consulting→manufacturing+education, solutions→全部4个
+- 每个 ref 带有描述性 reason
+
+CrossReference 接口：`{ id, title, type('product'|'solution'|'service'), href, reason }`
+
+- [ ] **步骤 2：更新 index.ts 导出**
+
+在 index.ts 中添加 hero-themes 和 cross-references 的全部导出。
+
+- [ ] **步骤 3：验证编译并 Commit**
+
+运行：`npx tsc --noEmit --pretty`
+预期：无错误
+
+```bash
+git add src/lib/constants/cross-references.ts src/lib/constants/index.ts
+git commit -m "feat(data): add cross-reference system for solution-product-service linking"
+```
+
+---
+
+#### 任务 0.3: 扩展数据模型（Product/Solution/Service）
+
+**文件：**
+- 修改：`src/lib/constants/products.ts`
+- 修改：`src/lib/constants/solutions.ts`
+- 修改：`src/lib/constants/services.ts`
+
+- [ ] **步骤 1：扩展 Product 接口和每个产品的数据**
+
+在 Product 接口末尾追加两个字段：
+```typescript
+heroTheme: string;
+trustCase: {
+  industry: string;
+  company: string;
+  challenge: string;
+  solution: string;
+  result: string;
+  metric: string;
+};
+```
+
+为每个 PRODUCT 数组项追加这两个字段。各产品 trustCase 差异化场景：
+- **erp**: 制造业 / 某大型装备制造集团 / 月度结账需7天 / 部署睿新ERP / 结账缩短至2天 / 结账效率提升71%
+- **crm**: 零售业 / 某连锁零售集团 / 销售线索转化率低 / 部署睿新CRM / 转化率提升35%
+- **bi**: 医疗健康 / 某三甲医院 / 数据分散无法辅助决策 / 部署睿新BI / 决策效率提升50%
+- **cms**: 教育行业 / 某高校 / 多站点管理混乱 / 部署睿新CMS / 发布效率提升60%
+- **sds**: 零售业 / 某连锁商超 / 缺货率+积压并存 / 部署睿新SDS / 缺货率降低45%
+- **oa**: 金融行业 / 某城商行 / 审批流程平均5天 / 部署睿新OA / 审批效率提升65%
+
+- [ ] **步骤 2：扩展 Solution 接口和每个方案的数据**
+
+在 Solution 接口末尾追加三个字段：
+```typescript
+heroTheme: string;
+suiteCombination: {
+  products: Array<{ id: string; role: string }>;
+  services: Array<{ id: string; role: string }>;
+  summary: string;
+};
+trustData: {
+  caseIndustry: string;
+  companyName: string;
+  outcome: string;
+  metrics: Array<{ value: string; label: string }>;
+};
+```
+
+为每个 SOLUTION 数组项追加。suiteCombination 合理性：
+- **manufacturing**: products=[erp(生产调度), bi(质量看板), sds(库存优化)], services=[software(定制开发), consulting(咨询规划)]
+- **retail**: products=[erp, crm, bi], services=[software, solutions]
+- **education**: products=[cms, oa], services=[software, consulting]
+- **healthcare**: products=[erp, sds, bi], services=[software, consulting]
+
+- [ ] **步骤 3：扩展 Services 数据**
+
+将 SERVICES 从 const 数组改为带 Service 类型的结构，增加字段：
+```typescript
+interface Service {
+  // ...现有字段保持不变...
+  heroTheme: string;
+  trustCases: Array<{
+    industry: string;
+    company: string;
+    scope: string;
+    outcome: string;
+  }>;
+  outcomeMetrics: Array<{ value: string; label: string }>;
+}
+```
+
+每个 service 追加差异化数据。
+
+- [ ] **步骤 4：验证编译并 Commit**
+
+运行：`npx tsc --noEmit --pretty`
+预期：无错误
+
+```bash
+git add src/lib/constants/products.ts src/lib/constants/solutions.ts src/lib/constants/services.ts
+git commit -m "feat(data): extend models with heroTheme, trustCase, suiteCombination, cross-ref fields"
+```
+
+---
+
+#### 任务 0.4: 创建 DetailHero 组件 (L1)
+
+**文件：**
+- 创建：`src/components/detail/detail-hero.tsx`
+
+- [ ] **步骤 1：创建 DetailHero 组件**
+
+组件职责：
+- 接收 `theme: HeroTheme` prop，动态渲染渐变背景 + 纹理叠加
+- 支持 badge（如"企业旗舰"）、category、status 标签
+- 渲染 title + description
+- 内部 TextureOverlay 子组件根据 theme.texture.type 渲染不同背景图案：
+  - grid: CSS grid pattern
+  - data-flow: radial-gradient dots
+  - layers: vertical gradient strips
+  - shield-hex: hexagon mask pattern
+  - circuit: grid pattern (同grid)
+  - none: 不渲染
+- 底部自动添加 fade-to-white 过渡条
+- 使用 Framer Motion 入场动画
+- 使用 useReducedMotion hook 降级
+
+Props 接口：
+```typescript
+interface DetailHeroProps {
+  theme: HeroTheme;
+  badge?: string;
+  category?: string;
+  status?: string;
+  title: string;
+  description: string;
+  statusColor?: string;
+  statusBg?: string;
+}
+```
+
+- [ ] **步骤 2：验证编译并 Commit**
+
+```bash
+git add src/components/detail/detail-hero.tsx
+git commit -m "feat(detail): add DetailHero component with theme-based variation support"
+```
+
+---
+
+#### 任务 0.5: 创建信任证明 Section 组件 (L3)
+
+**文件：**
+- 创建：`src/components/detail/trust-case-study.tsx`
+- 创建：`src/components/detail/trust-data-proof.tsx`
+- 创建：`src/components/detail/trust-certification.tsx`
+- 创建：`src/components/detail/detail-trust-section.tsx`
+
+- [ ] **步骤 1：创建 TrustCaseStory 卡片组件**
+
+展示单个客户案例的完整故事：
+- 顶部：行业 + 公司名称（带 Building2 图标）
+- 三段式内容：面临挑战(Target icon) → 解决方案(Lightbulb icon) → 实施效果(TrendingUp icon)
+- 底部：关键成效 metric 大字展示
+- 使用 motion 动画入场
+
+- [ ] **步骤 2：创建 TrustDataProof 指标网格组件**
+
+展示量化数据指标：
+- 接收 metrics: Array<{value, label}>
+- 3列网格展示，每格居中显示 value(大号粗体) + label(小号灰色)
+- 可选 description 文字说明
+- 逐个 staggered 动画入场
+
+- [ ] **步骤 3：创建 TrustCertification 认证列表组件**
+
+展示认证资质：
+- 接收 items: Array<{name, issuer, icon: 'shield'|'award'|'filecheck'}>
+- 每项一行：图标 + 名称 + 颁发机构
+- 使用 Lucide Shield/Award/FileCheck 图标映射
+
+- [ ] **步骤 4：创建 DetailTrustSection 容器组件**
+
+组合上述子组件的容器：
+- 接收 caseStudy/dataMetrics/dataDescription/certifications props
+- 自动过滤空内容（如果所有 prop 都为空则不渲染）
+- 统一标题："客户成功案例"，左侧竖线使用 theme.accentColor
+- 内部按顺序排列 TrustCaseStudy > TrustDataProof > TrustCertification
+
+- [ ] **步骤 5：验证编译并 Commit**
+
+```bash
+git add src/components/detail/trust-case-study.tsx src/components/detail/trust-data-proof.tsx src/components/detail/trust-certification.tsx src/components/detail/detail-trust-section.tsx
+git commit -m "feat(detail): add Layer 3 trust proof components (case study, data metrics, certification)"
+```
+
+---
+
+#### 任务 0.6: 创建 CTA + 交叉推荐组件 (L4)
+
+**文件：**
+- 创建：`src/components/detail/cross-recommend-grid.tsx`
+- 创建：`src/components/detail/detail-cta-section.tsx`
+
+- [ ] **步骤 1：创建 CrossRecommendGrid 组件**
+
+接收 CrossReference[]，渲染为卡片列表：
+- 每张卡显示 type 标签（产品/解决方案/服务）+ title + reason
+- 右侧 ArrowUpRight 图标
+- hover 效果：边框变色 + 背景色变化
+- 使用 StaticLink 导航
+
+- [ ] **步骤 2：创建 DetailCTASection 组件**
+
+组合行动按钮 + 交叉推荐：
+- 主按钮（primaryLabel/Href）+ 可选次按钮 + 可选下载按钮
+- 下方条件渲染 CrossRecommendGrid
+- 顶部 border-t 分隔线
+
+- [ ] **步骤 3：验证编译并 Commit**
+
+```bash
+git add src/components/detail/cross-recommend-grid.tsx src/components/detail/detail-cta-section.tsx
+git commit -m "feat(detail): add Layer 4 CTA section and cross-recommendation grid"
+```
+
+---
+
+#### 任务 0.7: 创建 L2 价值支撑 Section 组件（三种变体）
+
+**文件：**
+- 创建：`src/components/detail/product-value-section.tsx`
+- 创建：`src/components/detail/solution-value-section.tsx`
+- 创建：`src/components/detail/service-value-section.tsx`
+
+- [ ] **步骤 1：创建 ProductValueSection**
+
+四个子区域，每个有独立 section heading + 图标：
+1. **核心功能** (Zap icon) — features 列表，2列网格，每项圆点+文字
+2. **产品优势** (Target icon) — benefits 列表，每项带浅色背景
+3. **技术规格** (Cpu icon) — specs 列表，2列网格
+4. **实施流程** (Layers icon) — process 步骤列表，带数字编号圆圈
+
+- [ ] **步骤 2：创建 SolutionValueSection**
+
+三个子区域：
+1. **行业痛点** (AlertTriangle icon) — challenges 列表，每项带警告色背景
+2. **解决方案** (CheckCircle2 icon) — solutions 编号步骤列表
+3. **推荐产品组合** (Puzzle icon) — suiteCombination 展示：
+   - summary 描述文字
+   - products 以卡片形式展示（StaticLink 到 /products/{id}），显示 role 说明
+   - services 以 tag 形式展示（StaticLink 到 /services/{id}）
+
+- [ ] **步骤 3：创建 ServiceValueSection**
+
+四个子区域：
+1. **您可能面临的挑战** (MessageSquare icon) — challenges 2列网格卡片
+2. **预期成果** (TrendingUp icon) — outcomeMetrics 3列大数字展示
+3. **服务范围** (Users icon) — features 2列网格
+4. **服务流程** (ClipboardList icon) — process 编号步骤列表
+
+- [ ] **步骤 4：验证编译并 Commit**
+
+```bash
+git add src/components/detail/product-value-section.tsx src/components/detail/solution-value-section.tsx src/components/detail/service-value-section.tsx
+git commit -m "feat(detail): add Layer 2 value section components (product/solution/service variants)"
+```
+
+---
+
+### Phase 1: 产品体系重构
+
+**目标：** 重构 Products 列表页（分区展示）+ 6 个产品详情页（四层叙事）
+
+---
+
+#### 任务 1.1: 重构 Products 列表页 — 双区展示
+
+**文件：**
+- 修改：`src/app/(marketing)/products/page.tsx`
+
+- [ ] **步骤 1：增加 suiteType state 和双区 Tab 切换**
+
+在页面主体区域增加两个大 Tab 按钮：「企业套装」和「专业产品」（专业产品 Tab 显示空状态占位）。企业套装 Tab 下保留现有的分类筛选（enterprise/growth/specialized）和 ProductCard 列表不变。
+
+关键变更：
+- 新增 `const [activeTab, setActiveTab] = useState<'suite' | 'standalone'>('suite')`
+- Tab 按钮样式：选中态品牌色底色 + 白色文字，未选中态透明底 + 灰色文字
+- 专业产品空状态：居中显示「安全产品、行业特种软件、硬件产品即将推出」+ 「敬请期待」徽章
+
+- [ ] **步骤 2：验证构建**
+
+运行：`npm run build 2>&1 | head -30`
+预期：构建成功
+
+- [ ] **步骤 3：Commit**
+
+```bash
+git add src/app/\(marketing\)/products/page.tsx
+git commit -m "refactor(products): restructure list page with suite/standalone partition"
+```
+
+---
+
+#### 任务 1.2: 重构产品详情页 — 四层叙事模板
+
+**文件：**
+- 重写：`src/app/(marketing)/products/[id]/page.tsx`
+
+- [ ] **步骤 1：重写为四层叙事结构**
+
+新的页面结构（Server Component）：
+
+```
+DetailSwipeNav (保留现有)
+  ↓
+DetailHero (L1) ← theme = getHeroTheme(product.heroTheme)
+  ↓
+<div className="container-wide py-16">
+  <div className="max-w-4xl mx-auto space-y-4">
+    产品概述段落 (overview text)
+    ↓
+    ProductValueSection (L2) ← product + accentColor=theme.accentColor
+    ↓
+    DetailTrustSection (L3) ← caseStudy=product.trustCase
+    ↓
+    DetailCTASection (L4) ← primary="预约体验" /contact + crossRefs
+  </div>
+</div>
+```
+
+移除旧的 hero-section-v2 / cta-section / methodology-section 等旧组件引用。
+
+- [ ] **步骤 2：验证构建 + 浏览器预览**
+
+运行：`npm run dev &` 后访问 `http://localhost:3000/products/erp`
+预期：四层结构正确渲染，Hero 有深蓝色调，功能/优势/规格/流程清晰展示，案例卡片可见，CTA+交叉推荐可见
+
+- [ ] **步骤 3：Commit**
+
+```bash
+git add src/app/\(marketing\)/products/\[id\]/page.tsx
+git commit -m "refactor(product-detail): rewrite with four-layer narrative (L1-L4)"
+```
+
+---
+
+### Phase 2: 解决方案体系重构
+
+**目标：** 重构 Solutions 列表页 + 4 个方案详情页（四层叙事，重点展示套装组合）
+
+---
+
+#### 任务 2.1: 重构 Solutions 列表页
+
+**文件：**
+- 修改：`src/app/(marketing)/solutions/page.tsx`
+
+- [ ] **步骤 1：优化方案列表页**
+
+保留现有三模块结构（参谋伙伴/技术伙伴/同行伙伴），但增加每个方案卡片的"推荐套装"标签提示。点击方案卡片跳转至对应 /solutions/{id} 详情页。
+
+- [ ] **步骤 2：验证构建并 Commit**
+
+```bash
+git add src/app/\(marketing\)/solutions/page.tsx
+git commit -m "refactor(solutions-list): enhance with suite combination hints"
+```
+
+---
+
+#### 任务 2.2: 重构方案详情页 — 四层叙事（Spoke 模式）
+
+**文件：**
+- 修改：`src/app/(marketing)/solutions/[id]/page.tsx`（SC，传递新数据）
+- 重写：`src/app/(marketing)/solutions/[id]/client.tsx`（CC，四层渲染）
+
+- [ ] **步骤 1：修改 page.tsx 传递新字段**
+
+在 generateMetadata 中保持不变。在 Client Component 传递中新增：
+- `solution.suiteCombination`
+- `solution.trustData`
+- `relatedProducts`（根据 relatedProducts ids 从 PRODUCTS 中查找完整对象）
+- `theme={getHeroTheme(solution.heroTheme)}`
+- `crossRefs={getSolutionCrossRefs(solution.id)}`
+
+- [ ] **步骤 2：重写 client.tsx 为四层叙事结构**
+
+```
+DetailHero (L1) ← solution theme (center layout)
+  badge="解决方案" category=solution.industry
+  title=solution.title subtitle=solution.subtitle
+  ↓
+<div className="container-wide py-16">
+  <div className="max-w-4xl mx-auto space-y-4">
+    方案概述 (description text)
+    ↓
+    SolutionValueSection (L2) ← challenges + solutions + suiteCombination + relatedProducts
+      重点：推荐产品组合区展示产品卡片链接 + 配套服务 tags
+    ↓
+    DetailTrustSection (L3) ← dataMetrics=trustData.metrics + dataDescription=trustData.outcome
+    ↓
+    DetailCTASection (L4) ← primary="获取方案详情" /contact + crossRefs
+  </div>
+</div>
+```
+
+- [ ] **步骤 3：验证构建并 Commit**
+
+```bash
+git add src/app/\(marketing\)/solutions/\[id\]/page.tsx src/app/\(marketing\)/solutions/\[id\]/client.tsx
+git commit -m "refactor(solution-detail): rewrite with four-layer narrative and suite combination display"
+```
+
+---
+
+### Phase 3: 服务体系重构
+
+**目标：** 重构 Services 列表页 + 4 个服务详情页（四层叙事）
+
+---
+
+#### 任务 3.1: 重构 Services 列表页
+
+**文件：**
+- 修改：`src/app/(marketing)/services/page.tsx`
+
+- [ ] **步骤 1：优化服务列表页**
+
+保留现有服务卡片展示结构，确保每个卡片链接到 /services/{id} 详情页。可微调卡片视觉使其与新的四层详情页风格协调。
+
+- [ ] **步骤 2：验证并 Commit**
+
+```bash
+git add src/app/\(marketing\)/services/page.tsx
+git commit -m "refactor(services-list): align visual style with new detail pages"
+```
+
+---
+
+#### 任务 3.2: 重构服务详情页 — 四层叙事
+
+**文件：**
+- 修改：`src/app/(marketing)/services/[id]/page.tsx`（SC，类型安全）
+- 重写：`src/app/(marketing)/services/[id]/client.tsx`（CC，四层渲染）
+
+- [ ] **步骤 1：修改 page.tsx 增强类型安全**
+
+将 service 数据从 const 断言改为 Service 类型，传递新字段：heroTheme/trustCases/outcomeMetrics/theme/crossRefs。
+
+- [ ] **步骤 2：重写 client.tsx 为四层叙事结构**
+
+```
+DetailHero (L1) ← service theme (icon-left layout)
+  category=service.title (作为副标题)
+  title=service.overview 截取首句
+  description=service.description
+  ↓
+<div className="container-wide py-16">
+  <div className="max-w-4xl mx-auto space-y-4">
+    ServiceValueSection (L2) ←
+      challenges: 从 features 反推或内置默认挑战集
+      outcomes: outcomeMetrics
+      features: features
+      process: process
+    ↓
+    DetailTrustSection (L3) ← 多个 trustCases (取前2个) + outcomeMetrics
+    ↓
+    DetailCTASection (L4) ← primary="咨询服务" /contact + crossRefs
+  </div>
+</div>
+```
+
+ServiceValueSection 的 challenges 数据来源：从 service.features 或内置默认挑战映射生成。
+
+- [ ] **步骤 3：验证构建并 Commit**
+
+```bash
+git add src/app/\(marketing\)/services/\[id\]/page.tsx src/app/\(marketing\)/services/\[id\]/client.tsx
+git commit -m "refactor(service-detail): rewrite with four-layer narrative structure"
+```
+
+---
+
+### Phase 4: 导航与跨系统集成
+
+**目标：** 更新 MegaDropdown 适配 Products 分区 + 全局一致性检查
+
+---
+
+#### 任务 4.1: 更新 MegaDropdown 支持分组展示
+
+**文件：**
+- 修改：`src/components/layout/mega-dropdown.tsx`
+- 修改：`src/lib/constants/navigation.ts`
+
+- [ ] **步骤 1：扩展 MegaDropdownItem 接口支持分组**
+
+在 MegaDropdownItem 中增加可选字段：`group?: string`
+
+- [ ] **步骤 2：更新 MEGA_DROPDOWN_DATA.products 为分组数据**
+
+将 products 下拉项分为两组：
+- 组1: "企业旗舰系列" — erp/crm/bi/cms/sds/oa（6项）
+- 组2: "专业产品" — security/industry/hardware（3项，status="即将推出"）
+
+- [ ] **步骤 3：修改 MegaDropdown 组件渲染分组**
+
+当 items 含 group 字段时，按 group 分组渲染，每组带组标题（小字灰色）。组间用分隔线隔开。
+
+- [ ] **步骤 4：验证编译并 Commit**
+
+```bash
+git add src/components/layout/mega-dropdown.tsx src/lib/constants/navigation.ts
+git commit -m "feat(nav): update mega-dropdown to support grouped product display (suite vs standalone)"
+```
+
+---
+
+#### 任务 4.2: 创建独立产品空模板
+
+**文件：**
+- 创建：`src/app/(marketing)/templates/standalone-product.tsx`
+
+- [ ] **步骤 1：创建独立产品详情页模板**
+
+这是一个完整的、可直接复制使用的页面模板，供未来安全/行业特种/硬件产品使用。模板包含：
+- 完整的四层叙事结构
+- 占位符文案（标注 TODO 替换）
+- security 主题的 Hero 示例
+- StandaloneValueSection 占位（特性对比表格 + 技术参数表）
+- 空的 trust/cta 区域示例
+- 注释说明如何定制
+
+- [ ] **步骤 2：Commit**
+
+```bash
+git add src/app/\(marketing\)/templates/standalone-product.tsx
+git commit -m "feat(template): add standalone product detail page template for future security/industry/hardware products"
+```
+
+---
+
+### Phase 5: 全量验证与收尾
+
+**目标：** 构建验证 + 全页面走查 + 最终提交
+
+---
+
+#### 任务 5.1: 全量构建验证
+
+- [ ] **步骤 1：运行全量构建**
+
+运行：`npm run build 2>&1 | tail -40`
+预期：✓ Build successful，无 error/warning
+
+- [ ] **步骤 2：运行 lint 检查**
+
+运行：`npm run lint 2>&1 | tail -20`
+预期：无 error
+
+- [ ] **步骤 3：运行 TypeScript 类型检查**
+
+运行：`npx tsc --noEmit --pretty 2>&1 | tail -20`
+预期：0 errors
+
+---
+
+#### 任务 5.2: 页面走查清单
+
+逐页访问以下 URL 并确认四层结构完整性：
+
+| # | URL | L1 Hero色调 | L2 内容 | L3 案例 | L4 交叉推荐 |
+|---|-----|-----------|---------|---------|------------|
+| 1 | `/products/erp` | 深蓝 #1e3a5f | 功能×6/优势×4/规格×6/流程×6 | 装备制造案例 | 制造业+医疗方案+BI |
+| 2 | `/products/crm` | 关系蓝 #1e40af | 同上结构 | 连锁零售案例 | 零售方案+ERP+BI |
+| 3 | `/products/bi` | 数据蓝 #0c4a6e | 同上结构 | 三甲医院案例 | 制造业+零售+医疗方案 |
+| 4 | `/products/cms` | 内容绿 #14532d | 同上结构 | 高校案例 | 教育方案+OA |
+| 5 | `/products/sds` | 供应链橙 #78350f | 同上结构 | 连锁商超案例 | 零售方案+ERP+BI |
+| 6 | `/products/oa` | 协同紫 #4c1d95 | 同上结构 | 城商行案例 | 教育方案+CMS |
+| 7 | `/solutions/manufacturing` | 默认暗 #1c1917 | 痛点×4/方案×4/组合(ERP+BI+SDS) | 3个指标 | ERP+BI+SDS产品 |
+| 8 | `/solutions/retail` | 默认暗 #1c1917 | 痛点×4/方案×4/组合(ERP+CRM+BI) | 3个指标 | ERP+CRM+BI产品 |
+| 9 | `/solutions/education` | 默认暗 #1c1917 | 痛点×4/方案×4/组合(CMS+OA) | 3个指标 | CMS+OA产品 |
+| 10 | `/solutions/healthcare` | 默认暗 #1c1917 | 痛点×4/方案×4/组合(ERP+SDS+BI) | 3个指标 | ERP+SDS+BI产品 |
+| 11 | `/services/software` | 标准 #1e293b | 挑战×N/成果×3/范围×5/流程×6 | 2个案例 | 制造业+零售方案 |
+| 12 | `/services/data` | 标准 #1e293b | 同上结构 | 2个案例 | 3个方案 |
+| 13 | `/services/consulting` | 标准 #1e293b | 同上结构 | 2个案例 | 制造业+教育方案 |
+| 14 | `/services/solutions` | 标准 #1e293b | 同上结构 | 2个案例 | 全部4个方案 |
+| 15 | `/products` (列表) | N/A | 双区Tab正常 | N/A | N/A |
+| 16 | `/solutions` (列表) | N/A | 3模块展示 | N/A | N/A |
+| 17 | `/services` (列表) | N/A | 4卡片展示 | N/A | N/A |
+
+---
+
+## 四、执行依赖关系图
+
+```mermaid
+graph TD
+    P0_1["0.1 Hero 主题系统"] --> P0_4["0.4 DetailHero 组件"]
+    P0_2["0.2 交叉引用"] --> P0_6["0.6 CTA+交叉推荐"]
+    P0_3["0.3 扩展数据模型"] --> P1_2["1.2 产品详情页"]
+    P0_3 --> P2_2["2.2 方案详情页"]
+    P0_3 --> P3_2["3.2 服务详情页"]
+    P0_4 --> P1_2
+    P0_4 --> P2_2
+    P0_4 --> P3_2
+    P0_5["0.5 信任证明 L3"] --> P1_2
+    P0_5 --> P2_2
+    P0_5 --> P3_2
+    P0_6 --> P1_2
+    P0_6 --> P2_2
+    P0_6 --> P3_2
+    P0_7["0.7 价值支撑 L2"] --> P1_2
+    P0_7 --> P2_2
+    P0_7 --> P3_2
+
+    P1_1["1.1 产品列表页"] -.-> P1_2
+    P1_2 --> P5_1["5.1 全量验证"]
+
+    P2_1["2.1 方案列表页"] -.-> P2_2
+    P2_2 --> P5_1
+
+    P3_1["3.1 服务列表页"] -.-> P3_2
+    P3_2 --> P5_1
+
+    P4_1["4.1 MegaDropdown"] --> P5_1
+    P4_2["4.2 独立产品模板"] --> P5_1
+    P5_1 --> P5_2["5.2 页面走查"]
+
+    style P0_1 fill:#FEF2F4,stroke:#C41E3A
+    style P0_2 fill:#FEF2F4,stroke:#C41E3A
+    style P0_3 fill:#FEF2F4,stroke:#C41E3A
+    style P0_4 fill:#EFF6FF,stroke:#2563EB
+    style P0_5 fill:#F0FDF4,stroke:#16A34A
+    style P0_6 fill:#FAF5FF,stroke:#7C3AED
+    style P0_7 fill:#FEF9C3,stroke:#CA8A04
+    style P1_1 fill:#DCFCE7,stroke:#16A34A
+    style P1_2 fill:#DCFCE7,stroke:#16A34A
+    style P2_1 fill:#DBEAFE,stroke:#2563EB
+    style P2_2 fill:#DBEAFE,stroke:#2563EB
+    style P3_1 fill:#FAE8FF,stroke:#7C3AED
+    style P3_2 fill:#FAE8FF,stroke:#7C3AED
+    style P4_1 fill:#FEE2E2,stroke:#DC2626
+    style P4_2 fill:#FEF3C7,stroke:#CA8A04
+    style P5_1 fill:#E5E7EB,stroke:#6B7280
+    style P5_2 fill:#D1D5DB,stroke:#4B5563
+```
+
+**并行执行建议：**
+- **Wave 1（必须串行）：** 任务 0.1 → 0.2 → 0.3 → 0.4 → 0.5 → 0.6 → 0.7（Phase 0 全部完成）
+- **Wave 2（可并行）：** 任务 1.1+2.1+3.1（三个列表页可并行）+ 任务 4.1+4.2（导航+模板可并行）
+- **Wave 3（可并行）：** 任务 1.2 + 2.2 + 3.2（三个详情页可并行）
+- **Wave 4（串行）：** 任务 5.1 → 5.2（最终验证）
+
+---
+
+## 五、风险与注意事项
+
+| 风险 | 影响 | 缓解措施 |
+|------|------|---------|
+| Hero 深色渐变在 light mode 下对比度不足 | 无障碍合规问题 | 所有文字使用纯白(#FFF)，确保 WCAG AA |
+| trustCase 数据为虚构 | SEO/可信度影响 | 在页面 meta 中标注"代表性案例"，真实案例后续替换 |
+| MegaDropdown 分组后宽度不够 | UI 挤压 | 将 dropdown width 从 520px 扩展到 600px |
+| 17 个页面同时改动回归风险 | 功能回退 | 每个任务独立 commit，支持 git bisect 回退 |