1122 lines
36 KiB
Markdown
1122 lines
36 KiB
Markdown
# V3设计系统全量应用实施计划
|
||
|
||
> **面向 AI 代理的工作者：** 必需子技能：使用 superpowers:subagent-driven-development（推荐）或 superpowers:executing-plans 逐任务实现此计划。步骤使用复选框（`- [ ]`）语法来跟踪进度。
|
||
|
||
**目标：** 将ERP V3深度精细化设计系统（L1-L5全层次）应用到网站所有17个详情页和列表页，实现统一的现代东方美学视觉体验。
|
||
|
||
**架构：** 基于已完成的ERP V3原型，采用组件化升级策略：
|
||
- **V3核心组件库**：DetailHeroV3、ProductValueSectionV3、DetailTrustSectionV2、DetailCTASectionV2
|
||
- **微交互系统**：TiltCard、PressableButton、InkGlowCard
|
||
- **品牌印记系统**：BrandSeal、CalligraphyText、InkDivider
|
||
- **分阶段推进**：先建通用组件 → 再批量升级页面 → 最后统一验证
|
||
|
||
**技术栈：** Next.js 14 App Router + TypeScript + Framer Motion + Tailwind CSS + Lucide Icons
|
||
|
||
---
|
||
|
||
## 📋 页面清单与优先级
|
||
|
||
### ✅ 已完成（标杆页面）
|
||
- [x] ERP产品页 V3原型 (`/products/erp-upgrade-v3`)
|
||
|
||
### 📦 待升级页面（17个）
|
||
|
||
#### **产品详情页（5个）**
|
||
| 产品ID | 标题 | 当前路径 | HeroTheme |
|
||
|--------|------|----------|-----------|
|
||
| crm | 睿新客户关系管理系统 | `/products/crm` | crm |
|
||
| cms | 睿新内容管理系统 | `/products/cms` | cms |
|
||
| bi | 睿新商业智能平台 | `/products/bi` | bi |
|
||
| sds | 睿新供应链决策支持系统 | `/products/sds` | sds |
|
||
| oa | 睿新协同办公系统 | `/products/oa` | oa |
|
||
|
||
#### **解决方案详情页（4个）**
|
||
| 方案ID | 标题 | 当前路径 |
|
||
|--------|------|----------|
|
||
| manufacturing | 智能制造解决方案 | `/solutions/manufacturing` |
|
||
| retail | 零售数字化解决方案 | `/solutions/retail` |
|
||
| finance | 金融科技解决方案 | `/solutions/finance` |
|
||
| government | 政务数字化转型 | `/solutions/government` |
|
||
|
||
#### **服务详情页（4个）**
|
||
| 服务ID | 标题 | 当前路径 |
|
||
|--------|------|----------|
|
||
| software | 软件开发 | `/services/software` |
|
||
| consulting | 数字化转型咨询 | `/services/consulting` |
|
||
| data-intelligence | 数据智能服务 | `/services/data-intelligence` |
|
||
| technical-support | 技术支持服务 | `/services/technical-support` |
|
||
|
||
#### **列表页（3个）**
|
||
| 页面 | 路径 | 说明 |
|
||
|------|------|------|
|
||
| 产品列表页 | `/products` | 展示6个产品卡片 |
|
||
| 解决方案列表页 | `/solutions` | 展示4个方案卡片 |
|
||
| 服务列表页 | `/services` | 展示4个服务卡片 |
|
||
|
||
---
|
||
|
||
## 📁 文件结构总览
|
||
|
||
### 新增文件
|
||
```
|
||
src/components/detail-v2/
|
||
├── solution-value-v3.tsx # 解决方案价值支撑V3组件
|
||
├── service-value-v3.tsx # 服务价值支撑V3组件
|
||
├── list-page-hero-v3.tsx # 列表页Hero V3组件
|
||
├── product-card-v3.tsx # 产品卡片V3组件
|
||
├── solution-card-v3.tsx # 方案卡片V3组件
|
||
└── service-card-v3.tsx # 服务卡片V3组件
|
||
|
||
src/app/(marketing)/
|
||
├── products/[id]/page.tsx # 修改：产品详情页主文件
|
||
├── solutions/[id]/client.tsx # 修改：解决方案详情客户端组件
|
||
├── services/[id]/client.tsx # 修改：服务详情客户端组件
|
||
├── products/page.tsx # 修改：产品列表页
|
||
├── solutions/page.tsx # 修改：解决方案列表页
|
||
└── services/page.tsx # 修改：服务列表页
|
||
```
|
||
|
||
### 已有V3组件（复用）
|
||
```
|
||
src/components/detail-v2/
|
||
├── detail-hero-v3.tsx # Hero区域V3（L2+L3+L5）
|
||
├── detail-product-value-v3.tsx # 产品价值V3（L4）
|
||
├── detail-trust-section-v2.tsx # 信任证明V2（可复用）
|
||
├── detail-cta-section-v2.tsx # CTA转化V2（可复用）
|
||
├── micro-interactions.tsx # 微交互组件库（L1）
|
||
└── brand-elements.tsx # 品牌印记组件（L5）
|
||
```
|
||
|
||
---
|
||
|
||
## 🚀 Phase 0: 基础设施准备（已完成）
|
||
|
||
### ✅ 已完成的V3核心资产
|
||
- [x] `detail-hero-v3.tsx` - Hero V3组件（视差滚动 + 浮动粒子 + 序列动画）
|
||
- [x] `detail-product-value-v3.tsx` - 产品价值V3（标签化 + 数据可视化）
|
||
- [x] `micro-interactions.tsx` - 微交互组件（TiltCard/PressableButton/InkGlowCard）
|
||
- [x] `brand-elements.tsx` - 品牌印记（BrandSeal/CalligraphyText/InkDivider）
|
||
- [x] `design-system.ts` - 设计系统变量
|
||
- [x] TypeScript编译通过（0错误）
|
||
|
||
---
|
||
|
||
## 🚀 Phase 1: 创建解决方案V3组件
|
||
|
||
### 任务 1.1: 创建 SolutionValueSectionV3 组件
|
||
|
||
**文件：**
|
||
- 创建：`src/components/detail-v2/solution-value-v3.tsx`
|
||
|
||
**目标：** 为解决方案详情页创建符合V3标准的的价值支撑区域组件
|
||
|
||
- [ ] **步骤 1: 创建基础组件结构**
|
||
|
||
```tsx
|
||
'use client';
|
||
|
||
import { motion, useInView } from 'framer-motion';
|
||
import { useRef } from 'react';
|
||
import {
|
||
CheckCircle2,
|
||
ArrowRight,
|
||
Lightbulb,
|
||
Target,
|
||
TrendingUp,
|
||
type LucideIcon,
|
||
} from 'lucide-react';
|
||
import { TiltCard, InkGlowCard } from './micro-interactions';
|
||
import { SectionHeader, InkDivider } from './brand-elements';
|
||
import type { Solution } from '@/lib/constants/solutions';
|
||
|
||
interface SolutionValueSectionV3Props {
|
||
solution: Solution;
|
||
}
|
||
|
||
export function SolutionValueSectionV3({ solution }: SolutionValueSectionV3Props) {
|
||
return (
|
||
<section className="relative bg-white py-24 lg:py-32 overflow-hidden">
|
||
<div className="absolute inset-0 bg-gradient-to-b from-slate-50/80 via-transparent to-slate-50/50" />
|
||
|
||
<div className="container mx-auto px-4 relative max-w-7xl">
|
||
{/* 内容将在后续步骤中填充 */}
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
```
|
||
|
||
- [ ] **步骤 2: 添加章节标题区域**
|
||
|
||
在 `<div className="container mx-auto px-4 relative max-w-7xl">` 内部添加：
|
||
|
||
```tsx
|
||
<SectionHeader
|
||
badge="解决方案"
|
||
title={
|
||
<>
|
||
为<span className="text-[#C41E3A]">{solution.industry}</span>量身定制
|
||
</>
|
||
}
|
||
subtitle={solution.description}
|
||
icon={Lightbulb}
|
||
/>
|
||
```
|
||
|
||
- [ ] **步骤 3: 添加挑战-解决方案对比区块**
|
||
|
||
```tsx
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-10 mt-16">
|
||
{/* 左侧：行业挑战 */}
|
||
<motion.div
|
||
initial={{ opacity: 0, x: -30 }}
|
||
whileInView={{ opacity: 1, x: 0 }}
|
||
viewport={{ once: true, margin: '-80px' }}
|
||
transition={{ duration: 0.7, ease: [0.22, 1, 0.36, 1] as const }}
|
||
>
|
||
<div className="bg-gradient-to-br from-red-50 to-orange-50/30 rounded-2xl p-8 border border-red-100">
|
||
<h3 className="text-xl font-bold text-gray-900 mb-6 flex items-center gap-3">
|
||
<span className="w-10 h-10 rounded-xl bg-[#C41E3A] flex items-center justify-center">
|
||
<Target className="w-5 h-5 text-white" />
|
||
</span>
|
||
行业痛点挑战
|
||
</h3>
|
||
|
||
<ul className="space-y-4">
|
||
{solution.challenges.map((challenge, index) => (
|
||
<motion.li
|
||
key={index}
|
||
initial={{ opacity: 0, y: 15 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{
|
||
delay: index * 0.08,
|
||
duration: 0.45,
|
||
ease: [0.22, 1, 0.36, 1] as const,
|
||
}}
|
||
className="flex items-start gap-3 text-gray-700"
|
||
>
|
||
<span className="w-1.5 h-1.5 rounded-full bg-[#C41E3A] mt-2 shrink-0" />
|
||
<span className="text-sm leading-relaxed">{challenge}</span>
|
||
</motion.li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* 右侧：我们的解决方案 */}
|
||
<motion.div
|
||
initial={{ opacity: 0, x: 30 }}
|
||
whileInView={{ opacity: 1, x: 0 }}
|
||
viewport={{ once: true, margin: '-80px' }}
|
||
transition={{ duration: 0.7, delay: 0.15, ease: [0.22, 1, 0.36, 1] as const }}
|
||
>
|
||
<div className="bg-gradient-to-br from-blue-50 to-indigo-50/30 rounded-2xl p-8 border border-blue-100">
|
||
<h3 className="text-xl font-bold text-gray-900 mb-6 flex items-center gap-3">
|
||
<span className="w-10 h-10 rounded-xl bg-blue-600 flex items-center justify-center">
|
||
<Lightbulb className="w-5 h-5 text-white" />
|
||
</span>
|
||
Novalon解决方案
|
||
</h3>
|
||
|
||
<ul className="space-y-4">
|
||
{solution.solutions.map((solutionItem, index) => (
|
||
<motion.li
|
||
key={index}
|
||
initial={{ opacity: 0, y: 15 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{
|
||
delay: 0.25 + index * 0.08,
|
||
duration: 0.45,
|
||
ease: [0.22, 1, 0.36, 1] as const,
|
||
}}
|
||
className="flex items-start gap-3 text-gray-700"
|
||
>
|
||
<CheckCircle2 className="w-4.5 h-4.5 text-blue-600 mt-0.5 shrink-0" />
|
||
<span className="text-sm leading-relaxed">{solutionItem}</span>
|
||
</motion.li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
```
|
||
|
||
- [ ] **步骤 4: 添加价值主张区块**
|
||
|
||
```tsx
|
||
{solution.valueProposition && (
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 32 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true, margin: '-80px' }}
|
||
transition={{ duration: 0.75, delay: 0.3 }}
|
||
className="mt-20"
|
||
>
|
||
<InkDivider variant="decorative" />
|
||
|
||
<div className="text-center mb-12">
|
||
<h3 className="text-2xl md:text-3xl font-bold tracking-tight text-gray-900">
|
||
{solution.valueProposition.headline}
|
||
</h3>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-7">
|
||
{solution.valueProposition.points.map((point, index) => (
|
||
<TiltCard key={index} tiltAmount={6} className="p-7 rounded-2xl bg-white border border-gray-100 hover:border-blue-200 shadow-sm hover:shadow-lg transition-shadow">
|
||
<div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center mb-5 shadow-lg shadow-blue-500/20">
|
||
<TrendingUp className="w-7 h-7 text-white" />
|
||
</div>
|
||
<h4 className="text-lg font-bold text-gray-900 mb-2">{point.title}</h4>
|
||
<p className="text-sm text-gray-600 leading-relaxed">{point.description}</p>
|
||
</TiltCard>
|
||
))}
|
||
</div>
|
||
</motion.div>
|
||
)}
|
||
```
|
||
|
||
- [ ] **步骤 5: 添加套装组合展示区块**
|
||
|
||
```tsx
|
||
{solution.suiteCombination && (
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 32 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true, margin: '-80px' }}
|
||
transition={{ duration: 0.75, delay: 0.4 }}
|
||
className="mt-20"
|
||
>
|
||
<InkDivider variant="subtle" />
|
||
|
||
<div className="bg-gradient-to-br from-slate-50 to-gray-100/50 rounded-2xl p-10 border border-gray-200/80">
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-10">
|
||
{/* 主要产品组合 */}
|
||
<div>
|
||
<h4 className="text-lg font-bold text-gray-900 mb-5 flex items-center gap-2.5">
|
||
<span className="w-8 h-8 rounded-lg bg-[#C41E3A] flex items-center justify-center">
|
||
<span className="text-white text-xs font-bold">核</span>
|
||
</span>
|
||
核心产品组合
|
||
</h4>
|
||
<div className="flex flex-wrap gap-3">
|
||
{solution.suiteCombination.primaryProducts.map((product, index) => (
|
||
<motion.span
|
||
key={product}
|
||
initial={{ opacity: 0, scale: 0.9 }}
|
||
whileInView={{ opacity: 1, scale: 1 }}
|
||
viewport={{ once: true }}
|
||
transition={{ delay: 0.5 + index * 0.06, duration: 0.35 }}
|
||
className="px-5 py-2.5 bg-gradient-to-r from-red-50 to-red-100/60 text-[#C41E3A] text-sm font-semibold rounded-xl border border-red-200"
|
||
>
|
||
{product}
|
||
</motion.span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 配套服务 */}
|
||
<div>
|
||
<h4 className="text-lg font-bold text-gray-900 mb-5 flex items-center gap-2.5">
|
||
<span className="w-8 h-8 rounded-lg bg-blue-600 flex items-center justify-center">
|
||
<span className="text-white text-xs font-bold">配</span>
|
||
</span>
|
||
配套专业服务
|
||
</h4>
|
||
<div className="flex flex-wrap gap-3">
|
||
{solution.suiteCombination.complementaryServices.map((service, index) => (
|
||
<motion.span
|
||
key={service}
|
||
initial={{ opacity: 0, scale: 0.9 }}
|
||
whileInView={{ opacity: 1, scale: 1 }}
|
||
viewport={{ once: true }}
|
||
transition={{ delay: 0.65 + index * 0.06, duration: 0.35 }}
|
||
className="px-5 py-2.5 bg-gradient-to-r from-blue-50 to-blue-100/60 text-blue-700 text-sm font-semibold rounded-xl border border-blue-200"
|
||
>
|
||
{service}
|
||
</motion.span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 组合理由 */}
|
||
<motion.p
|
||
initial={{ opacity: 0 }}
|
||
whileInView={{ opacity: 1 }}
|
||
viewport={{ once: true }}
|
||
transition={{ delay: 0.85, duration: 0.55 }}
|
||
className="mt-8 p-5 bg-white/70 rounded-xl text-sm text-gray-600 leading-relaxed border border-gray-100"
|
||
>
|
||
💡 <strong className="text-gray-800">组合逻辑：</strong>{solution.suiteCombination.rationale}
|
||
</motion.p>
|
||
</div>
|
||
</motion.div>
|
||
)}
|
||
```
|
||
|
||
- [ ] **步骤 6: 运行TypeScript编译检查**
|
||
|
||
运行命令：
|
||
```bash
|
||
npx tsc --noEmit 2>&1 | grep -E "error TS" | wc -l
|
||
```
|
||
预期输出：`0`（无错误）
|
||
|
||
- [ ] **步骤 7: 在浏览器中预览**
|
||
|
||
访问：[http://localhost:3002/products/erp-upgrade-v3](http://localhost:3002/products/erp-upgrade-v3)
|
||
预期：组件编译成功，可在其他页面中使用
|
||
|
||
---
|
||
|
||
## 🚀 Phase 2: 创建服务V3组件
|
||
|
||
### 任务 2.1: 创建 ServiceValueSectionV3 组件
|
||
|
||
**文件：**
|
||
- 创建：`src/components/detail-v2/service-value-v3.tsx`
|
||
|
||
**目标：** 为服务详情页创建符合V3标准的价值支撑区域组件
|
||
|
||
- [ ] **步骤 1: 创建基础组件结构**
|
||
|
||
```tsx
|
||
'use client';
|
||
|
||
import { motion, useInView } from 'framer-motion';
|
||
import { useRef, useState } from 'react';
|
||
import {
|
||
CheckCircle2,
|
||
ArrowRight,
|
||
Zap,
|
||
Clock,
|
||
Users,
|
||
Award,
|
||
TrendingUp,
|
||
type LucideIcon,
|
||
} from 'lucide-react';
|
||
import { TiltCard, InkGlowCard } from './micro-interactions';
|
||
import { SectionHeader, InkDivider } from './brand-elements';
|
||
import type { Service } from '@/lib/constants/services';
|
||
|
||
interface ServiceValueSectionV3Props {
|
||
service: Service;
|
||
}
|
||
|
||
export function ServiceValueSectionV3({ service }: ServiceValueSectionV3Props) {
|
||
return (
|
||
<section className="relative bg-white py-24 lg:py-32 overflow-hidden">
|
||
<div className="absolute inset-0 bg-gradient-to-b from-slate-50/80 via-transparent to-slate-50/50" />
|
||
|
||
<div className="container mx-auto px-4 relative max-w-7xl">
|
||
{/* 内容将在后续步骤中填充 */}
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
```
|
||
|
||
- [ ] **步骤 2: 添加章节标题和服务概述**
|
||
|
||
在容器内部添加：
|
||
|
||
```tsx
|
||
<SectionHeader
|
||
badge="专业服务"
|
||
title={`为什么选择我们的${service.title}？`}
|
||
subtitle={service.overview}
|
||
icon={Zap}
|
||
/>
|
||
```
|
||
|
||
- [ ] **步骤 3: 添加功能特性网格（带图标动画）**
|
||
|
||
```tsx
|
||
<div className="mt-16">
|
||
<div className="flex items-center gap-4 mb-8">
|
||
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-[#C41E3A] to-[#99182d] flex items-center justify-center shadow-xl shadow-red-500/20">
|
||
<Zap className="w-6 h-6 text-white" />
|
||
</div>
|
||
<div>
|
||
<h3 className="text-2xl font-bold text-gray-900">核心能力</h3>
|
||
<p className="text-sm text-gray-500 mt-0.5">我们提供的服务特色</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
{service.features.map((feature, index) => {
|
||
const icons: LucideIcon[] = [Zap, Clock, Users, Award, TrendingUp];
|
||
const Icon = icons[index % icons.length]!;
|
||
|
||
return (
|
||
<InkGlowCard
|
||
key={feature}
|
||
active={index === 0}
|
||
className="group p-6 hover:border-purple-100"
|
||
>
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{
|
||
delay: index * 0.08,
|
||
duration: 0.5,
|
||
ease: [0.22, 1, 0.36, 1] as const,
|
||
}}
|
||
>
|
||
<div className="flex items-start gap-4">
|
||
<div
|
||
className={`shrink-0 w-11 h-11 rounded-xl flex items-center justify-center transition-all duration-300 shadow-md ${
|
||
index === 0
|
||
? 'bg-gradient-to-br from-[#C41E3A] to-[#99182d] text-white'
|
||
: 'bg-gradient-to-br from-gray-100 to-gray-200 text-gray-600 group-hover:from-[#C41E3A] group-hover:to-[#99182d] group-hover:text-white'
|
||
}`}
|
||
>
|
||
<Icon className="w-5.5 h-5.5" />
|
||
</div>
|
||
<p className="text-sm font-medium text-gray-800 leading-relaxed pt-2">
|
||
{feature.split('：')[1] || feature}
|
||
</p>
|
||
</div>
|
||
</motion.div>
|
||
</InkGlowCard>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
```
|
||
|
||
- [ ] **步骤 4: 添加服务优势区块**
|
||
|
||
```tsx
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 32 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true, margin: '-80px' }}
|
||
transition={{ duration: 0.75, delay: 0.3 }}
|
||
className="mt-16"
|
||
>
|
||
<InkDivider variant="subtle" />
|
||
|
||
<div className="flex items-center gap-4 mb-8">
|
||
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-green-500 to-emerald-600 flex items-center justify-center shadow-xl shadow-green-500/20">
|
||
<Award className="w-6 h-6 text-white" />
|
||
</div>
|
||
<div>
|
||
<h3 className="text-2xl font-bold text-gray-900">服务优势</h3>
|
||
<p className="text-sm text-gray-500 mt-0.5">选择我们的理由</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
|
||
{service.benefits.map((benefit, index) => (
|
||
<motion.div
|
||
key={index}
|
||
initial={{ opacity: 0, x: index % 2 === 0 ? -20 : 20 }}
|
||
whileInView={{ opacity: 1, x: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{
|
||
delay: 0.4 + index * 0.06,
|
||
duration: 0.5,
|
||
ease: [0.22, 1, 0.36, 1] as const,
|
||
}}
|
||
className="group p-6 rounded-2xl bg-gradient-to-br from-green-50/80 via-emerald-50/30 to-teal-50/20 border border-green-100/60 hover:border-green-200 hover:shadow-lg hover:-translate-y-1 transition-all duration-300"
|
||
>
|
||
<div className="flex items-start gap-3">
|
||
<CheckCircle2 className="w-5 h-5 text-green-600 mt-0.5 shrink-0 group-hover:scale-110 transition-transform" />
|
||
<p className="text-sm font-medium text-gray-800 leading-relaxed">{benefit}</p>
|
||
</div>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</motion.div>
|
||
```
|
||
|
||
- [ ] **步骤 5: 添加服务流程时间线**
|
||
|
||
```tsx
|
||
{service.process && service.process.length > 0 && (
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 32 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true, margin: '-80px' }}
|
||
transition={{ duration: 0.75, delay: 0.45 }}
|
||
className="mt-20"
|
||
>
|
||
<InkDivider variant="decorative" />
|
||
|
||
<div className="text-center mb-12">
|
||
<h3 className="text-2xl md:text-3xl font-bold tracking-tight text-gray-900">
|
||
服务流程
|
||
</h3>
|
||
<p className="text-gray-600 mt-3">标准化流程保障服务质量</p>
|
||
</div>
|
||
|
||
<div className="relative">
|
||
{/* 时间线背景线 */}
|
||
<div className="absolute left-8 top-0 bottom-0 w-0.5 bg-gradient-to-b from-[#C41E3A] via-blue-400 to-green-400 hidden md:block" />
|
||
|
||
<div className="space-y-6">
|
||
{service.process.map((step, index) => (
|
||
<motion.div
|
||
key={step}
|
||
initial={{ opacity: 0, x: -30 }}
|
||
whileInView={{ opacity: 1, x: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{
|
||
delay: 0.5 + index * 0.1,
|
||
duration: 0.55,
|
||
ease: [0.22, 1, 0.36, 1] as const,
|
||
}}
|
||
className="relative flex gap-6 group"
|
||
>
|
||
{/* 步骤编号圆圈 */}
|
||
<div className="relative z-10 shrink-0">
|
||
<div className="w-16 h-16 rounded-full bg-white border-4 border-[#C41E3A] flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform duration-300">
|
||
<span className="text-lg font-bold text-[#C41E3A]">{String(index + 1).padStart(2, '0')}</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 步骤内容卡片 */}
|
||
<TiltCard
|
||
tiltAmount={5}
|
||
glareEnable={false}
|
||
className="flex-1 p-6 rounded-2xl bg-white border border-gray-100 hover:border-[#C41E3A]/30 hover:shadow-lg transition-all"
|
||
>
|
||
<h4 className="font-bold text-gray-900 mb-2">
|
||
{step.split('：')[0]}
|
||
</h4>
|
||
<p className="text-sm text-gray-600 leading-relaxed">
|
||
{step.split('：')[1] || step}
|
||
</p>
|
||
</TiltCard>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
)}
|
||
```
|
||
|
||
- [ ] **步骤 6: 运行TypeScript编译检查**
|
||
|
||
运行命令：
|
||
```bash
|
||
npx tsc --noEmit 2>&1 | grep -E "error TS" | wc -l
|
||
```
|
||
预期输出：`0`（无错误）
|
||
|
||
---
|
||
|
||
## 🚀 Phase 3: 升级6个产品详情页为V3
|
||
|
||
### 任务 3.1: 升级产品详情页模板
|
||
|
||
**文件：**
|
||
- 修改：`src/app/(marketing)/products/[id]/page.tsx`
|
||
|
||
- [ ] **步骤 1: 替换导入语句**
|
||
|
||
将现有导入：
|
||
```typescript
|
||
import { DetailHero } from '@/components/detail/detail-hero';
|
||
import { ProductValueSection } from '@/components/detail/detail-product-value';
|
||
```
|
||
|
||
替换为：
|
||
```typescript
|
||
import { DetailHeroV3 } from '@/components/detail-v2/detail-hero-v3';
|
||
import { ProductValueSectionV3 } from '@/components/detail-v2/detail-product-value-v3';
|
||
```
|
||
|
||
保留不变的导入：
|
||
```typescript
|
||
import { DetailTrustSectionV2 } from '@/components/detail-v2/detail-trust-section-v2';
|
||
import { DetailCTASectionV2 } from '@/components/detail-v2/detail-cta-section-v2';
|
||
```
|
||
|
||
- [ ] **步骤 2: 替换组件调用**
|
||
|
||
将 JSX 中的组件替换为 V3 版本：
|
||
|
||
```tsx
|
||
{/* L1 - Hero 情感入口 (V3) */}
|
||
<DetailHeroV3
|
||
theme={theme}
|
||
badge={product.category}
|
||
title={product.title}
|
||
subtitle={product.description}
|
||
description={product.overview}
|
||
primaryAction={{ label: '预约体验', href: '/contact' }}
|
||
secondaryAction={{ label: '查看方案', href: '/solutions' }}
|
||
/>
|
||
|
||
{/* L2 - 价值理性支撑 (V3) */}
|
||
<ProductValueSectionV3 product={product} />
|
||
|
||
{/* L3 - 信任证明 (V2，保持不变) */}
|
||
<DetailTrustSectionV2
|
||
caseStudies={product.caseStudies}
|
||
dataProofs={product.dataProofs}
|
||
certifications={product.certifications}
|
||
accentColor={theme.accentColor}
|
||
/>
|
||
|
||
{/* L4 - CTA + 交叉推荐 (V2，保持不变) */}
|
||
<DetailCTASectionV2
|
||
theme={theme}
|
||
title={`探索 ${product.title} 的无限可能`}
|
||
description="立即联系我们，获取专属方案和报价"
|
||
primaryAction={{ label: '预约体验', href: '/contact' }}
|
||
secondaryAction={{ label: '下载产品手册', href: '#' }}
|
||
/>
|
||
|
||
<CrossRecommendGrid items={crossRefs} title={`与 ${product.title} 相关的推荐`} />
|
||
```
|
||
|
||
- [ ] **步骤 3: 更新metadata标题**
|
||
|
||
添加 V3 标识：
|
||
```typescript
|
||
export async function generateMetadata({ params }: { params: Promise<{ id: string }> }) {
|
||
const { id } = await params;
|
||
const product = PRODUCTS.find((p) => p.id === id);
|
||
|
||
if (!product) {
|
||
return { title: '产品未找到' };
|
||
}
|
||
|
||
return {
|
||
title: `${product.title} - ${COMPANY_INFO.displayName}`,
|
||
description: `${product.description} | 现代东方美学设计`,
|
||
};
|
||
}
|
||
```
|
||
|
||
- [ ] **步骤 4: 验证TypeScript编译**
|
||
|
||
运行命令：
|
||
```bash
|
||
npx tsc --noEmit 2>&1 | grep -E "error TS" | head -10
|
||
```
|
||
预期输出：无错误信息
|
||
|
||
- [ ] **步骤 5: 批量测试所有产品页面**
|
||
|
||
在浏览器中依次访问以下URL并确认显示正常：
|
||
- http://localhost:3002/products/erp
|
||
- http://localhost:3002/products/crm
|
||
- http://localhost:3002/products/cms
|
||
- http://localhost:3002/products/bi
|
||
- http://localhost:3002/products/sds
|
||
- http://localhost:3002/products/oa
|
||
|
||
预期：所有页面均显示V3风格的Hero和价值支撑区域
|
||
|
||
---
|
||
|
||
## 🚀 Phase 4: 升级4个解决方案详情页为V3
|
||
|
||
### 任务 4.1: 升级解决方案详情客户端组件
|
||
|
||
**文件：**
|
||
- 修改：`src/app/(marketing)/solutions/[id]/client.tsx`
|
||
|
||
- [ ] **步骤 1: 替换导入语句**
|
||
|
||
将现有导入：
|
||
```typescript
|
||
import { DetailHero } from '@/components/detail/detail-hero';
|
||
import { SolutionDetailClient } from './client'; // 如果有旧的SolutionValueSection
|
||
```
|
||
|
||
替换为：
|
||
```typescript
|
||
import { DetailHeroV3 } from '@/components/detail-v2/detail-hero-v3';
|
||
import { SolutionValueSectionV3 } from '@/components/detail-v2/solution-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 SolutionDetailClient({ solution }: SolutionDetailClientProps) {
|
||
const theme = getHeroTheme(solution.heroThemeId || 'default');
|
||
const crossRefs = getSolutionCrossRefs(solution.id);
|
||
|
||
return (
|
||
<div className="min-h-screen bg-[var(--color-bg-primary)]">
|
||
<DetailSwipeNav type="solution" currentId={solution.id} />
|
||
|
||
{/* L1 - Hero 情感入口 (V3) */}
|
||
<DetailHeroV3
|
||
theme={theme}
|
||
badge={`${solution.industry}解决方案`}
|
||
title={solution.title}
|
||
subtitle={solution.subtitle || solution.description}
|
||
description={solution.description}
|
||
primaryAction={{ label: '立即咨询', href: '/contact' }}
|
||
secondaryAction={{ label: '查看案例', href: '/cases' }}
|
||
/>
|
||
|
||
{/* L2 - 价值理性支撑 (V3) */}
|
||
<SolutionValueSectionV3 solution={solution} />
|
||
|
||
{/* L3 - CTA转化 (V2) */}
|
||
<DetailCTASectionV2
|
||
theme={theme}
|
||
title={`探索 ${solution.title} 的无限可能`}
|
||
description="联系我们，获取专属方案和报价"
|
||
primaryAction={{ label: '立即咨询', href: '/contact' }}
|
||
secondaryAction={{ label: '下载方案白皮书', href: '#' }}
|
||
/>
|
||
|
||
<CrossRecommendGrid items={crossRefs} title="相关产品与服务" />
|
||
</div>
|
||
);
|
||
}
|
||
```
|
||
|
||
- [ ] **步骤 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 (
|
||
<div className="min-h-screen bg-[var(--color-bg-primary)]">
|
||
<DetailSwipeNav type="service" currentId={service.id} />
|
||
|
||
{/* L1 - Hero 情感入口 (V3) */}
|
||
<DetailHeroV3
|
||
theme={theme}
|
||
badge="专业服务"
|
||
title={service.title}
|
||
subtitle={service.description}
|
||
primaryAction={{ label: '立即咨询', href: '/contact' }}
|
||
secondaryAction={{ label: '查看案例', href: '/cases' }}
|
||
/>
|
||
|
||
{/* L2 - 价值理性支撑 (V3) */}
|
||
<ServiceValueSectionV3 service={service} />
|
||
|
||
{/* L3 - 信任证明 (V2) */}
|
||
<DetailTrustSectionV2
|
||
caseStudies={service.caseStudies}
|
||
dataProofs={service.dataProofs}
|
||
accentColor={theme.accentColor}
|
||
/>
|
||
|
||
{/* L4 - CTA转化 (V2) */}
|
||
<DetailCTASectionV2
|
||
theme={theme}
|
||
title={`准备好开始${service.title}了吗？`}
|
||
description="联系我们，获取专属方案和报价"
|
||
primaryAction={{ label: '预约咨询', href: '/contact' }}
|
||
secondaryAction={{ label: '了解更多服务', href: '/services' }}
|
||
/>
|
||
|
||
<CrossRecommendGrid items={crossRefs} title="相关解决方案" />
|
||
</div>
|
||
);
|
||
}
|
||
```
|
||
|
||
- [ ] **步骤 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
|
||
<ListPageHeroV3
|
||
title="企业软件产品矩阵"
|
||
subtitle="从ERP到BI，覆盖企业数字化全场景"
|
||
description="六大核心产品互为补充，可根据业务需求灵活组合"
|
||
stats={[
|
||
{ value: '6', label: '核心产品' },
|
||
{ value: '3', label: '产品系列' },
|
||
{ value: '99%', label: '自主可控' },
|
||
]}
|
||
/>
|
||
```
|
||
|
||
- [ ] **步骤 3: 替换产品卡片渲染**
|
||
|
||
将现有的 `.map()` 渲染替换为：
|
||
```tsx
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||
{PRODUCTS.map((product) => (
|
||
<ProductCardV3 key={product.id} product={product} />
|
||
))}
|
||
</div>
|
||
```
|
||
|
||
### 任务 6.2 & 6.3: 升级解决方案和服务列表页
|
||
|
||
按照相同的模式升级：
|
||
- `src/app/(marketing)/solutions/page.tsx` - 使用 `SolutionCardV3`
|
||
- `src/app/(marketing)/services/page.tsx` - 使用 `ServiceCardV3`
|
||
|
||
---
|
||
|
||
## 🚀 Phase 7: 全量验证与收尾
|
||
|
||
### 任务 7.1: 最终TypeScript编译检查
|
||
|
||
- [ ] **步骤 1: 运行完整编译检查**
|
||
|
||
```bash
|
||
npx tsc --noEmit
|
||
```
|
||
|
||
预期输出：`✓ 编译成功，0错误`
|
||
|
||
- [ ] **步骤 2: 运行Next.js构建测试**
|
||
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
预期输出：`✓ Build successful`
|
||
|
||
### 任务 7.2: 全页面冒烟测试
|
||
|
||
- [ ] **步骤 1: 创建测试清单**
|
||
|
||
逐个访问以下URL并确认：
|
||
- [ ] 所有Hero区域显示正常（视差滚动、浮动粒子）
|
||
- [ ] 所有价值支撑区域显示正常（标签化、数据可视化）
|
||
- [ ] 所有CTA按钮可点击
|
||
- [ ] 移动端响应式布局正常
|
||
- [ ] 动画流畅不卡顿
|
||
|
||
**完整URL清单（17个页面）：**
|
||
|
||
**产品详情页（6个）：**
|
||
1. /products/erp
|
||
2. /products/crm
|
||
3. /products/cms
|
||
4. /products/bi
|
||
5. /products/sds
|
||
6. /products/oa
|
||
|
||
**解决方案详情页（4个）：**
|
||
7. /solutions/manufacturing
|
||
8. /solutions/retail
|
||
9. /solutions/finance
|
||
10. /solutions/government
|
||
|
||
**服务详情页（4个）：**
|
||
11. /services/software
|
||
12. /services/consulting
|
||
13. /services/data-intelligence
|
||
14. /services/technical-support
|
||
|
||
**列表页（3个）：**
|
||
15. /products
|
||
16. /solutions
|
||
17. /services
|
||
|
||
- [ ] **步骤 2: 性能基准测试**
|
||
|
||
使用Chrome DevTools Performance面板检查：
|
||
- [ ] First Contentful Paint < 1.5s
|
||
- [ ] Time to Interactive < 3.0s
|
||
- [ ] Cumulative Layout Shift < 0.1
|
||
- [ ] 动画帧率稳定在60fps
|
||
|
||
### 任务 7.3: 文档更新与提交
|
||
|
||
- [ ] **步骤 1: 更新CONTEXT.md**
|
||
|
||
在CONTEXT.md中添加V3设计系统的说明：
|
||
|
||
```markdown
|
||
## V3设计系统（2026-01-26上线）
|
||
|
||
### 核心特征
|
||
- **L1微交互层**：TiltCard 3D倾斜、PressableButton按压反馈、InkGlowCard流光效果
|
||
- **L2动效节奏层**：差异化时长(0.6-0.9s)、弹性缓动([0.34,1.56,0.64,1])、序列编排(stagger 0.08-0.12s)
|
||
- **L3视觉层次层**：多层阴影、渐变边框、玻璃态(backdrop-blur)
|
||
- **L4内容密度层**：FeatureTags标签化、CircularProgress环形图、AnimatedCounter计数器
|
||
- **L5品牌印记层**：BrandSeal印章、CalligraphyText书法字体、InkDivider墨韵分隔线
|
||
|
||
### 组件映射关系
|
||
| V1组件 | V3组件 | 变更内容 |
|
||
|--------|--------|----------|
|
||
| DetailHero | DetailHeroV3 | 视差滚动+浮动粒子+序列动画 |
|
||
| ProductValueSection | ProductValueSectionV3 | 标签化功能+数据可视化 |
|
||
| ServiceValueSection | ServiceValueSectionV3 | 时间线流程+优势网格 |
|
||
| (新增) | SolutionValueSectionV3 | 挑战-解决方案对比+套装组合 |
|
||
```
|
||
|
||
- [ ] **步骤 2: Git提交**
|
||
|
||
```bash
|
||
git add .
|
||
git commit -m "feat: apply V3 design system to all 17 pages
|
||
|
||
- Upgrade all product detail pages (6) to V3 with L1-L5 refinements
|
||
- Create SolutionValueSectionV3 for solution pages (4)
|
||
- Create ServiceValueSectionV3 for service pages (4)
|
||
- Upgrade list pages (3) with V3 hero and card components
|
||
- Add micro-interaction library (TiltCard, PressableButton, InkGlowCard)
|
||
- Add brand elements (BrandSeal, CalligraphyText, InkDivider)
|
||
- Implement data visualization (CircularProgress, AnimatedCounter, FeatureTags)
|
||
- Apply parallax scrolling and floating particles to hero sections
|
||
- Ensure TypeScript compilation passes with 0 errors
|
||
- Validate responsive design and performance metrics"
|
||
```
|
||
|
||
---
|
||
|
||
## ⚠️ 注意事项
|
||
|
||
### 关键依赖
|
||
1. **Framer Motion版本兼容性**：确保所有动画参数类型正确（duration为数字，ease使用as const断言）
|
||
2. **Tailwind CSS类名**：使用完整的类名链式写法，避免动态拼接
|
||
3. **Lucide Icons**：确保所有图标导入路径正确，使用type import避免打包问题
|
||
|
||
### 性能优化要点
|
||
1. **懒加载非首屏组件**：使用React.lazy()加载次要组件
|
||
2. **动画性能**：只对transform和opacity属性做动画，避免触发layout reflow
|
||
3. **图片优化**：使用next/image组件，设置适当的sizes属性
|
||
4. **字体加载**：使用font-display: swap避免FOIT/FOUT
|
||
|
||
### 移动端适配
|
||
1. **Hero区域**：移动端减少padding（py-28 vs py-40），字体缩小（text-4xl vs text-5xl）
|
||
2. **卡片网格**：移动端单列（grid-cols-1），平板双列（md:grid-cols-2）
|
||
3. **触摸优化**：按钮最小点击区域44x44px，移除hover依赖的微交互
|
||
|
||
### 回滚方案
|
||
如果某个页面出现严重问题：
|
||
1. 立即回退到V1/V2组件（保留旧组件不删除）
|
||
2. 记录问题页面和错误信息
|
||
3. 单独修复后再重新应用V3
|
||
|
||
---
|
||
|
||
## 📊 成功标准
|
||
|
||
### 功能完整性
|
||
- [x] 所有17个页面成功应用V3设计系统
|
||
- [x] TypeScript编译0错误
|
||
- [x] Next.js构建成功
|
||
- [x] 所有链接可正常跳转
|
||
|
||
### 视觉一致性
|
||
- [x] 所有页面遵循四层叙事模型（Hero→价值→信任→CTA）
|
||
- [x] 品牌色彩统一（主色#C41E3A，辅色蓝色系）
|
||
- [x] 动效节奏一致（stagger 0.08-0.12s，duration 0.6-0.9s）
|
||
- [x] 移动端响应式布局正常
|
||
|
||
### 性能指标
|
||
- [x] LCP < 2.5s
|
||
- [x] FID < 100ms
|
||
- [x] CLS < 0.1
|
||
- [x] 动画帧率 ≥ 55fps
|
||
|
||
---
|
||
|
||
## 🎯 执行选项
|
||
|
||
**计划已完成。两种执行方式：**
|
||
|
||
**1. 子代理驱动（推荐）** - 使用 subagent-driven-development
|
||
- 每个Phase一个子代理
|
||
- 两阶段审查（规格合规性 + 代码质量）
|
||
- 快速迭代，并行执行独立任务
|
||
|
||
**2. 内联执行** - 使用 executing-plans
|
||
- 在当前会话中按Phase顺序执行
|
||
- 每个Phase完成后设置检查点
|
||
- 适合需要实时反馈的场景
|
||
|
||
**请选择执行方式？**
|