张翔
fe6e4b1c54
- Remove TestimonialSection from homepage (no customers yet) - Footer: dark theme, NAVIGATION_V2 + MEGA_DROPDOWN_DATA links - Mobile Menu: NAVIGATION_V2 with collapsible dropdown support
300 lines
12 KiB
Markdown
300 lines
12 KiB
Markdown
# 核心业务与解决方案设计升级 实现计划
|
||
|
||
> **面向 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 懒加载"
|
||
```
|