+ 为{solution.industry}量身定制
+
+ }
+ subtitle={solution.description}
+ icon={Lightbulb}
+/>
+```
+
+- [ ] **步骤 3: 添加挑战-解决方案对比区块**
+
+```tsx
+
+ {/* 左侧：行业挑战 */}
+
+
+
+
+
+
+ 行业痛点挑战
+
+
+
+ {solution.challenges.map((challenge, index) => (
+
+
+ {challenge}
+
+ ))}
+
+
+
+ {/* 右侧：我们的解决方案 */}
+
+
+
+
+
+
+ Novalon解决方案
+
+
+
+ {solution.solutions.map((solutionItem, index) => (
+
+
+ {solutionItem}
+
+ ))}
+
+
+
+
+ {solution.valueProposition.headline}
+
+
+
+
+ {solution.valueProposition.points.map((point, index) => (
+
+
+
+
+ {point.title}
+ {point.description}
+
+ ))}
+
+
+ {/* 主要产品组合 */}
+
+
+
+ 核
+
+ 核心产品组合
+
+
+ {solution.suiteCombination.primaryProducts.map((product, index) => (
+
+ {product}
+
+ ))}
+
+
+
+ {/* 配套服务 */}
+
+
+
+ 配
+
+ 配套专业服务
+
+
+ {solution.suiteCombination.complementaryServices.map((service, index) => (
+
+ {service}
+
+ ))}
+
+
+
+
+ {/* 组合理由 */}
+
+ 💡 组合逻辑：{solution.suiteCombination.rationale}
+
+
+ {/* 内容将在后续步骤中填充 */}
+
+
+ );
+}
+```
+
+- [ ] **步骤 2: 添加章节标题和服务概述**
+
+在容器内部添加：
+
+```tsx
+
+```
+
+- [ ] **步骤 3: 添加功能特性网格（带图标动画）**
+
+```tsx
+
+
+
+
+ {service.features.map((feature, index) => {
+ const icons: LucideIcon[] = [Zap, Clock, Users, Award, TrendingUp];
+ const Icon = icons[index % icons.length]!;
+
+ return (
+
+
+
+
+
+
+
+ {feature.split('：')[1] || feature}
+
+
+ );
+ })}
+
+
+ {service.benefits.map((benefit, index) => (
+
+
+
+ ))}
+
+
+ 服务流程
+
+
标准化流程保障服务质量
+
+ {/* 时间线背景线 */}
+
+
+
+ {service.process.map((step, index) => (
+
+ {/* 步骤编号圆圈 */}
+
+
+ {String(index + 1).padStart(2, '0')}
+
+
+ {step.split('：')[0]}
+
+
+ {step.split('：')[1] || step}
+
+
+
+ ))}
+
+
+
+
+ {/* L1 - Hero 情感入口 (V3) */}
+
+
+ {/* L2 - 价值理性支撑 (V3) */}
+
+
+ {/* L3 - CTA转化 (V2) */}
+
+
+
+
+ );
+}
+```
+
+- [ ] **步骤 3: 验证TypeScript编译**
+
+运行命令：
+```bash
+npx tsc --noEmit 2>&1 | grep -E "error TS" | head -10
+```
+预期输出：无错误信息
+
+- [ ] **步骤 4: 测试所有解决方案页面**
+
+在浏览器中依次访问：
+- http://localhost:3002/solutions/manufacturing
+- http://localhost:3002/solutions/retail
+- http://localhost:3002/solutions/finance
+- http://localhost:3002/solutions/government
+
+预期：所有页面均显示V3风格，包含挑战-解决方案对比、价值主张、套装组合展示
+
+---
+
+## 🚀 Phase 5: 升级4个服务详情页为V3
+
+### 任务 5.1: 升级服务详情客户端组件
+
+**文件：**
+- 修改：`src/app/(marketing)/services/[id]/client.tsx`
+
+- [ ] **步骤 1: 替换导入语句**
+
+将现有导入：
+```typescript
+import { DetailHero } from '@/components/detail/detail-hero';
+import { ServiceValueSection } from '@/components/detail/detail-service-value';
+```
+
+替换为：
+```typescript
+import { DetailHeroV3 } from '@/components/detail-v2/detail-hero-v3';
+import { ServiceValueSectionV3 } from '@/components/detail-v2/service-value-v3';
+import { DetailTrustSectionV2 } from '@/components/detail-v2/detail-trust-section-v2';
+import { DetailCTASectionV2 } from '@/components/detail-v2/detail-cta-section-v2';
+```
+
+- [ ] **步骤 2: 重构组件函数体**
+
+完整替换函数体：
+
+```tsx
+export function ServiceDetailClient({ service }: ServiceDetailClientProps) {
+ const theme = getHeroTheme(service.heroThemeId);
+ const crossRefs = getServiceCrossRefs(service.id);
+
+ return (
+
+
+
+ {/* L1 - Hero 情感入口 (V3) */}
+
+
+ {/* L2 - 价值理性支撑 (V3) */}
+
+
+ {/* L3 - 信任证明 (V2) */}
+
+
+ {/* L4 - CTA转化 (V2) */}
+
+
+
+
+ );
+}
+```
+
+- [ ] **步骤 3: 验证TypeScript编译**
+
+运行命令：
+```bash
+npx tsc --noEmit 2>&1 | grep -E "error TS" | head -10
+```
+预期输出：无错误信息
+
+- [ ] **步骤 4: 测试所有服务页面**
+
+在浏览器中依次访问：
+- http://localhost:3002/services/software
+- http://localhost:3002/services/consulting
+- http://localhost:3002/services/data-intelligence
+- http://localhost:3002/services/technical-support
+
+预期：所有页面均显示V3风格，包含功能网格、优势展示、服务流程时间线
+
+---
+
+## 🚀 Phase 6: 升级3个列表页为V3风格
+
+### 任务 6.1: 升级产品列表页
+
+**文件：**
+- 修改：`src/app/(marketing)/products/page.tsx`
+
+**目标：** 为产品列表页添加V3风格的Hero区域和卡片样式
+
+- [ ] **步骤 1: 添加V3 Hero区域导入**
+
+在文件顶部添加：
+```typescript
+import { ListPageHeroV3 } from '@/components/detail-v2/list-page-hero-v3';
+import { ProductCardV3 } from '@/components/detail-v2/product-card-v3';
+```
+
+- [ ] **步骤 2: 替换页面Hero区域**
+
+将现有的静态Hero替换为：
+```tsx
+
+```
+
+- [ ] **步骤 3: 替换产品卡片渲染**
+
+将现有的 `.map()` 渲染替换为：
+```tsx
+
+ {PRODUCTS.map((product) => (
+
+ ))}
+
标题 + 价值主张
状态/分类标签
⚡ 支持色调+纹理+布局变化"]
+ end
+
+ subgraph L2["Layer 2: 价值支撑 - 为什么选我们"]
+ P2_PRODUCT["产品页: 功能模块 + 优势 + 规格 + 场景"]
+ P2_SOLUTION["方案页: 痛点 → 架构图 → 推荐组合 ⭐"]
+ P2_SERVICE["服务页: 挑战→成果KPI + 流程 + 团队"]
+ P2_STANDALONE["独立产品: 特性 + 参数 + 对比优势"]
+ end
+
+ subgraph L3["Layer 3: 信任证明 - 消除顾虑 ⭐新增"]
+ T3["案例故事 / 数据佐证
认证资质 / 客户评价
部署案例 / 性能数据"]
+ end
+
+ subgraph L4["Layer 4: CTA - 行动指引"]
+ C4["主行动按钮 + 次行动
⭐ 交叉推荐卡片
方案↔产品↔服务 双向链接"]
+ 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["🎨 色调变化
ERP=深蓝 #1e3a5f
BI=数据蓝 #0891B2
CRM=关系蓝 #2563EB
安全=盾牌红 #991B1B"]
+ V_TEXTURE["📐 背景纹理
ERP=几何网格
BI=数据流线条
CMS=文档图层
安全=六边形盾牌纹"]
+ V_LAYOUT["📐 布局微调
产品页=左对齐
方案页=居中
服务页=左对齐+图标
独立产品=宽幅"]
+ 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)
+ ↓
+
+
+ 产品概述段落 (overview text)
+ ↓
+ ProductValueSection (L2) ← product + accentColor=theme.accentColor
+ ↓
+ DetailTrustSection (L3) ← caseStudy=product.trustCase
+ ↓
+ DetailCTASection (L4) ← primary="预约体验" /contact + crossRefs
+
+
+
+ 方案概述 (description text)
+ ↓
+ SolutionValueSection (L2) ← challenges + solutions + suiteCombination + relatedProducts
+ 重点：推荐产品组合区展示产品卡片链接 + 配套服务 tags
+ ↓
+ DetailTrustSection (L3) ← dataMetrics=trustData.metrics + dataDescription=trustData.outcome
+ ↓
+ DetailCTASection (L4) ← primary="获取方案详情" /contact + crossRefs
+
+
+
+ ServiceValueSection (L2) ←
+ challenges: 从 features 反推或内置默认挑战集
+ outcomes: outcomeMetrics
+ features: features
+ process: process
+ ↓
+ DetailTrustSection (L3) ← 多个 trustCases (取前2个) + outcomeMetrics
+ ↓
+ DetailCTASection (L4) ← primary="咨询服务" /contact + crossRefs
+
+
+
推荐组合
+
+ {solution.suiteCombination.primaryProducts.map((productId) => {
+ const product = PRODUCTS.find(p => p.id === productId);
+ return product ? (
+
+ {product.title.replace('睿新', '')}
+
+ ) : null;
+ })}
+ {solution.suiteCombination.complementaryServices.map((serviceId) => {
+ const service = SERVICES.find(s => s.id === serviceId);
+ return service ? (
+
+ {service.title}
+
+ ) : null;
+ })}
+
+