# 核心业务与解决方案设计升级 实现计划

> **面向 AI 代理的工作者：** 必需子技能：使用 superpowers:subagent-driven-development（推荐）或 superpowers:executing-plans 逐任务实现此计划。步骤使用复选框（`- [ ]`）语法来跟踪进度。

**目标：** 将产品服务页面的成熟设计模式（组件拆分、动画升级、背景特效、独立布局）应用到核心业务和解决方案页面，实现全站设计一致性。

**架构：** 参照 `src/components/products/` 的 8 个独立 Section 组件模式，为核心业务创建 6 个独立 Section 组件，为解决方案创建 3 个独立 Section 组件。复用 `@/lib/animations` 动画组件库。核心业务详情页采用独立 Header/Footer 布局。

**技术栈：** Next.js 16 + React 19 + Framer Motion 12 + Tailwind CSS 4 + 自定义动画组件库

---

## 文件结构

### 新建文件

| 文件 | 职责 |
|------|------|
| `src/components/services/service-hero-section.tsx` | 服务详情 Hero（InkBackground + DataParticleFlow + SealStamp + InkReveal） |
| `src/components/services/service-challenges-section.tsx` | 挑战板块（StaggerContainer + InkCard） |
| `src/components/services/service-features-section.tsx` | 功能/如何帮助板块（ScrollReveal + FadeUp + CheckCircle2） |
| `src/components/services/service-process-section.tsx` | 服务流程（SealStamp + StaggerContainer + FadeUp + 渐变连接线） |
| `src/components/services/service-outcomes-section.tsx` | 成果板块（CountUp + StaggerContainer + InkCard） |
| `src/components/services/service-cases-section.tsx` | 相关案例（StaggerContainer + InkCard） |
| `src/components/services/service-cta-section.tsx` | CTA 区域（FloatingElement + RippleButton + 红色渐变背景） |
| `src/components/solutions/consulting-section.tsx` | 参谋伙伴模块（InkReveal + StaggerContainer + FadeUp） |
| `src/components/solutions/tech-solution-section.tsx` | 技术伙伴模块（InkReveal + StaggerContainer + FadeUp） |
| `src/components/solutions/accompany-section.tsx` | 同行伙伴模块（InkReveal + StaggerContainer + FadeUp） |
| `src/components/layout/service-header.tsx` | 服务详情独立 Header（参照 product-header） |
| `src/components/layout/service-footer.tsx` | 服务详情独立 Footer（参照 product-footer） |

### 修改文件

| 文件 | 变更 |
|------|------|
| `src/app/(marketing)/services/[id]/client.tsx` | 重构：拆分为 7 个独立 Section 组件 + dynamic 懒加载 |
| `src/app/(marketing)/services/[id]/page.tsx` | 添加独立布局支持（isServiceDetailPage 判断） |
| `src/app/(marketing)/solutions/page.tsx` | 重构：拆分为 3 个独立 Section 组件 + dynamic 懒加载 |
| `src/app/(marketing)/layout.tsx` | 添加 ServiceHeader/ServiceFooter 布局切换逻辑 |
| `src/lib/constants/services.ts` | 补充 challenges 和 outcomes 数据结构 |

---

## 任务 1：数据结构补全

**文件：**
- 修改：`src/lib/constants/services.ts`

- [ ] **步骤 1：扩展 Service 类型，补充 challenges 和 outcomes 字段**

将 `client.tsx` 中硬编码的 `challenges` 和 `outcomes` 对象迁移到 `services.ts`，为每个服务添加：
- `challenges: Array<{ title: string; description: string }>` — 4 项挑战
- `outcomes: Array<{ value: string; label: string }>` — 3 项成果数据

- [ ] **步骤 2：验证类型导出**

确认 `SERVICES` 从 `@/lib/constants` 正确导出，新字段可被消费。

---

## 任务 2：核心业务 — Hero Section

**文件：**
- 创建：`src/components/services/service-hero-section.tsx`

- [ ] **步骤 1：创建 ServiceHeroSection 组件**

参照 `product-hero-section.tsx`，实现：
- Props: `{ service: Service }`
- 背景：`InkBackground` + `DataParticleFlow`（particleCount=60, color="#C41E3A", intensity="subtle"）
- 布局：`min-h-screen flex items-center justify-center` + `bg-gradient-to-b from-white to-[#F8F8F8]`
- 动画：`SealStamp` 包裹 Badge（delay=0.1），`InkReveal` 包裹 h1（delay=0.2）、描述（delay=0.4）、CTA 按钮（delay=0.6）
- CTA：`RippleButton` 主按钮"了解服务详情" + outline 次按钮"免费咨询"
- 滚动指示器：`FloatingElement` + ChevronDown

---

## 任务 3：核心业务 — 挑战 Section

**文件：**
- 创建：`src/components/services/service-challenges-section.tsx`

- [ ] **步骤 1：创建 ServiceChallengesSection 组件**

- Props: `{ service: Service }`
- 背景：`bg-[#F8F8F8]`（灰色交替背景）
- 标题区：`ScrollReveal` + `slideInLeftVariants` + 朱砂红装饰线
- 卡片网格：`StaggerContainer` + `StaggerItem` 包裹 2x2 网格
- 每张卡片：`InkCard`（hoverScale=1.02, hoverShadow 带红色调）
- 卡片内容：挑战标题 + 描述

---

## 任务 4：核心业务 — 功能 Section

**文件：**
- 创建：`src/components/services/service-features-section.tsx`

- [ ] **步骤 1：创建 ServiceFeaturesSection 组件**

- Props: `{ service: Service }`
- 背景：`bg-white`
- 标题区：`ScrollReveal` + `inkRevealVariants`
- 概述文字：`InkReveal`（delay=0.2）
- 功能列表：`StaggerContainer` + `StaggerItem`，每项用 `CheckCircle2` 图标 + `FadeUp`

---

## 任务 5：核心业务 — 流程 Section

**文件：**
- 创建：`src/components/services/service-process-section.tsx`

- [ ] **步骤 1：创建 ServiceProcessSection 组件**

- Props: `{ service: Service }`
- 背景：`bg-[#F8F8F8]`
- 标题区：`ScrollReveal` + `inkRevealVariants` 居中
- 步骤列表：`StaggerContainer`（staggerDelay=0.15）+ `StaggerItem`
- 每步：`SealStamp` 编号圆形 + `FadeUp` 标题描述 + 渐变连接线（`w-0.5 h-16 bg-gradient-to-b from-[#C41E3A]/40 to-[#C41E3A]/10`，最后一步无连接线）
- 文本解析：中文冒号 `：` 分隔标题和描述

---

## 任务 6：核心业务 — 成果 Section

**文件：**
- 创建：`src/components/services/service-outcomes-section.tsx`

- [ ] **步骤 1：创建 ServiceOutcomesSection 组件**

- Props: `{ service: Service }`
- 背景：`bg-white`
- 标题区：`ScrollReveal` + `slideInLeftVariants`
- 数据卡片：`StaggerContainer` + `StaggerItem` 包裹 3 列网格
- 每张卡片：`InkCard` + `CountUp` 数字动画（从 outcomes.value 提取数字）+ 渐变色文字
- Benefits 汇总：底部 `InkReveal` 包裹 benefits 文本

---

## 任务 7：核心业务 — 案例 Section

**文件：**
- 创建：`src/components/services/service-cases-section.tsx`

- [ ] **步骤 1：创建 ServiceCasesSection 组件**

- Props: 无（内部从 `CASES` 常量获取数据）
- 背景：`bg-[#F8F8F8]`
- 标题区：`ScrollReveal` + `slideInLeftVariants`
- 案例网格：`StaggerContainer` + `StaggerItem` 包裹 2 列网格
- 每张卡片：`InkCard` + Badge 行业标签 + 标题 + 描述 + hover 效果

---

## 任务 8：核心业务 — CTA Section

**文件：**
- 创建：`src/components/services/service-cta-section.tsx`

- [ ] **步骤 1：创建 ServiceCTASection 组件**

- Props: 无
- 背景：`bg-gradient-to-r from-[#C41E3A] to-[#E85D75]`（红色渐变）
- 装饰：两个 `FloatingElement` 圆形（右上 280px + 左下 220px）
- 内容：`InkReveal` 标题 + `FadeUp` 描述 + `FadeUp` 按钮组
- 按钮：`RippleButton` 主按钮"开始您的转型之旅" + outline 次按钮"查看其他服务"

---

## 任务 9：核心业务 — 独立 Header/Footer

**文件：**
- 创建：`src/components/layout/service-header.tsx`
- 创建：`src/components/layout/service-footer.tsx`

- [ ] **步骤 1：创建 ServiceHeader**

参照 `product-header.tsx`：
- Logo + "返回主站"按钮
- 滚动时 `bg-white/90 backdrop-blur-xl`
- `motion.header` 从顶部滑入动画
- 区别：CTA 文案改为"免费咨询"

- [ ] **步骤 2：创建 ServiceFooter**

参照 `product-footer.tsx`：
- 顶部装饰线 + CTA 区域 + 底部信息
- 锚点导航改为服务相关（服务概览/面临挑战/服务流程/预期成果/相关案例）
- `RippleButton` + `FloatingElement`

---

## 任务 10：核心业务 — 重构详情页

**文件：**
- 修改：`src/app/(marketing)/services/[id]/client.tsx`
- 修改：`src/app/(marketing)/services/[id]/page.tsx`
- 修改：`src/app/(marketing)/layout.tsx`

- [ ] **步骤 1：重构 client.tsx**

将当前的单文件 5 板块替换为 7 个 dynamic 懒加载 Section 组件：
```tsx
const ServiceHeroSection = dynamic(() => import('@/components/services/service-hero-section'), { ssr: false });
const ServiceChallengesSection = dynamic(() => import('@/components/services/service-challenges-section'), { ssr: false });
const ServiceFeaturesSection = dynamic(() => import('@/components/services/service-features-section'), { ssr: false });
const ServiceProcessSection = dynamic(() => import('@/components/services/service-process-section'), { ssr: false });
const ServiceOutcomesSection = dynamic(() => import('@/components/services/service-outcomes-section'), { ssr: false });
const ServiceCasesSection = dynamic(() => import('@/components/services/service-cases-section'), { ssr: false });
const ServiceCTASection = dynamic(() => import('@/components/services/service-cta-section'), { ssr: false });
```
渲染顺序：Hero → Challenges → Features → Process → Outcomes → Cases → CTA

- [ ] **步骤 2：修改 layout.tsx 添加服务详情独立布局**

在 `isProductDetailPage` 逻辑旁添加 `isServiceDetailPage` 判断：
- 路径匹配 `/services/[id]` 时使用 `ServiceHeader` + `ServiceFooter`
- 其他页面保持 `Header` + `Footer`

- [ ] **步骤 3：修改 page.tsx 确保数据传递正确**

确认 `generateStaticParams` 和 `generateMetadata` 正常工作，新字段（challenges, outcomes）正确序列化传递。

---

## 任务 11：解决方案 — 拆分模块组件

**文件：**
- 创建：`src/components/solutions/consulting-section.tsx`
- 创建：`src/components/solutions/tech-solution-section.tsx`
- 创建：`src/components/solutions/accompany-section.tsx`

- [ ] **步骤 1：创建 ConsultingSection（参谋伙伴）**

- Props: 无（内部硬编码内容，或从常量获取）
- 背景：`bg-gradient-to-br from-[#FFFBF5] to-white rounded-2xl p-12 border border-[#C41E3A]/20`
- 动画升级：`InkReveal` 包裹标题（delay=0），`FadeUp` 包裹描述段落（delay=0.1/0.2/0.3），`StaggerContainer` + `StaggerItem` 包裹核心价值点网格
- 保持现有内容和布局结构不变

- [ ] **步骤 2：创建 TechSolutionSection（技术伙伴）**

同上模式，delay 递增 0.2。

- [ ] **步骤 3：创建 AccompanySection（同行伙伴）**

同上模式，delay 递增 0.4。

---

## 任务 12：解决方案 — 重构页面

**文件：**
- 修改：`src/app/(marketing)/solutions/page.tsx`

- [ ] **步骤 1：重构 solutions/page.tsx**

将 3 个内联 `motion.section` 替换为 dynamic 懒加载的独立组件：
```tsx
const ConsultingSection = dynamic(() => import('@/components/solutions/consulting-section'), { ssr: false });
const TechSolutionSection = dynamic(() => import('@/components/solutions/tech-solution-section'), { ssr: false });
const AccompanySection = dynamic(() => import('@/components/solutions/accompany-section'), { ssr: false });
```
保持 `MethodologySection` 和底部 CTA 区域不变。

---

## 任务 13：验证

- [ ] **步骤 1：构建验证**

运行 `npm run build`，确认无 TypeScript 错误、无导入错误。

- [ ] **步骤 2：页面验证**

启动 dev server，逐页检查：
- `/services` 列表页正常渲染
- `/services/software` 详情页：7 个 Section 全部渲染，动画正常
- `/services/data` 详情页：同上
- `/services/consulting` 详情页：同上
- `/services/solutions` 详情页：同上
- `/solutions` 页面：3 个模块全部渲染，动画正常
- 独立 Header/Footer 在服务详情页正确显示
- 主站 Header/Footer 在其他页面正确显示

- [ ] **步骤 3：Commit**

```bash
git add -A
git commit -m "feat: 升级核心业务和解决方案页面设计，对齐产品服务设计体系

- 核心业务详情页拆分为 7 个独立 Section 组件
- 解决方案页拆分为 3 个独立模块组件
- 全面接入动画组件库（InkReveal/SealStamp/InkCard/CountUp 等）
- Hero 区域添加 InkBackground + DataParticleFlow 背景特效
- 服务详情页采用独立 Header/Footer 布局
- 服务数据结构补全 challenges 和 outcomes 字段
- 所有组件使用 dynamic 懒加载"
```