novalon-website/docs/superpowers/plans/2026-05-26-hsi-four-layer-narrative-refactor.md

# 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 回退 |