Files

T

张翔 fe6e4b1c54 refactor: P0 - remove testimonial, migrate footer & mobile menu to NAVIGATION_V2

- Remove TestimonialSection from homepage (no customers yet)
- Footer: dark theme, NAVIGATION_V2 + MEGA_DROPDOWN_DATA links
- Mobile Menu: NAVIGATION_V2 with collapsible dropdown support

2026-04-30 22:00:00 +08:00

12 KiB

Raw Blame History

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

面向 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 组件：

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 懒加载的独立组件：

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

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

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

12 KiB Raw Blame History Unescape Escape

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

文件结构

新建文件

修改文件

任务 1：数据结构补全

任务 2：核心业务 — Hero Section

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

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

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

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

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

任务 8：核心业务 — CTA Section

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

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

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

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

任务 13：验证

12 KiB

Raw Blame History

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