docs(test): 添加设计文档、测试规范与 E2E 测试套件

- 新增 ADR 架构决策记录 (Design DNA 集成与深化)
- 新增 CMS 系统设计文档
- 新增实施计划文档 (Phase1-3)
- 新增 Bain 品牌升级设计规格
- 新增 E2E 分层测试套件 (P1-P4)
- 新增视觉回归测试配置
- 新增光效分析、视觉验证等辅助脚本
- 更新验收测试报告
This commit is contained in:
张翔
2026-07-07 06:54:25 +08:00
parent 8def296301
commit 636bc4ecde
31 changed files with 9262 additions and 41 deletions
@@ -0,0 +1,662 @@
# Bain 品牌清晰度升级(方案 B 中度 Bain 化)实现计划
> **面向 AI 代理的工作者:** 必需子技能:使用 superpowers:subagent-driven-development(推荐)或 superpowers:executing-plans 逐任务实现此计划。步骤使用复选框(`- [ ]`)语法来跟踪进度。
**目标:** 将首页 Bain 化升级——答案优先 Hero + 结论化标题 + 成果前置案例 + 精准品牌红 + 留白节奏校准
**架构:** 基于 `home-content-v11.tsx` 创建 v12 版本,按 5 大任务逐步改造,最后切换首页入口到 v12。不改动 CMS 版本(后续再同步)。
**技术栈:** React 18 + TypeScript + Tailwind CSS + Framer Motion
**起点文件:** `src/app/(marketing)/home-content-v11.tsx`
**终点文件:** `src/app/(marketing)/home-content-v12.tsx`
**入口切换:** `src/app/(marketing)/page.tsx`
---
## 文件清单
| 文件 | 操作 | 职责 |
|------|------|------|
| `src/app/(marketing)/home-content-v12.tsx` | 新建(从 v11 复制) | Bain 化升级后的首页主文件 |
| `src/app/(marketing)/page.tsx` | 修改 | 切换入口从 CMS → v12 |
---
## 任务 1:复制 v11 为 v12 基础版本
**文件:**
- 创建:`src/app/(marketing)/home-content-v12.tsx`(从 v11 复制)
- [ ] **步骤 1:复制 v11 为 v12**
```bash
cp src/app/(marketing)/home-content-v11.tsx src/app/(marketing)/home-content-v12.tsx
```
- [ ] **步骤 2:验证文件存在且可编译**
```bash
npx tsc --noEmit src/app/(marketing)/home-content-v12.tsx
```
预期:无类型错误(与 v11 一致)
- [ ] **步骤 3Commit**
```bash
git add src/app/(marketing)/home-content-v12.tsx
git commit -m "feat: copy home-content-v11 as base for v12 bain upgrade"
```
---
## 任务 2:Hero 区 Bain 化重构(答案优先)
**文件:**
- 修改:`src/app/(marketing)/home-content-v12.tsx``HeroSection` 函数
### 2.1 标题改造
- [ ] **步骤 1:修改主标题文案**
将 HeroSection 内的 h1 标题从:
```tsx
<div className="block"></div>
<div className="block mt-5">
<span></span>
<span className="relative inline-block ml-4">
<span className="relative text-brand font-extrabold">
<motion.span ... />
</span>
</span>
</div>
```
改为:
```tsx
<div className="block"></div>
<div className="block mt-5">
<span className="relative inline-block">
<span className="relative text-brand font-extrabold">
3
<motion.span
className="absolute -bottom-3 left-0 w-full h-[3px] bg-brand"
style={{ transformOrigin: 'left' }}
initial={{ scaleX: 0 }}
animate={{ scaleX: 1 }}
transition={{ duration: 0.9, delay: 1.3, ease: EASE_OUT }}
/>
</span>
</span>
</div>
```
- [ ] **步骤 2:副标题改为战略性提问**
将 p 副标题从:
```tsx
```
改为:
```tsx
```
并添加 `italic``opacity-60` 类(保持现有 text-dark-text-secondary,额外降低对比度)。
### 2.2 增加快速信任锚点行
- [ ] **步骤 3:在标题和 CTA 之间增加信任锚点行**
在 subtitle 的 `<motion.p>` 之后、CTA 的 `<motion.div>` 之前,插入:
```tsx
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.4, ease: EASE_OUT }}
className="flex flex-wrap gap-x-8 gap-y-2 mb-10 sm:mb-12 md:mb-16"
>
<span className="text-sm sm:text-base font-medium text-dark-text-secondary">
<span className="text-brand font-bold">500+</span>
</span>
<span className="text-sm sm:text-base font-medium text-dark-text-secondary">
<span className="text-brand font-bold">2.8x</span> ROI
</span>
<span className="text-sm sm:text-base font-medium text-dark-text-secondary">
<span className="text-brand font-bold">40%</span>
</span>
</motion.div>
```
### 2.3 布局改造:去掉右侧卡片,底部增加数据条
- [ ] **步骤 4:移除右侧 12 年卡片(lg:col-span-3 的那栏)**
删除 grid 内第二个 `<motion.div>`(从 `className="hidden lg:block lg:col-span-3"` 开始的整块),并将第一栏从 `lg:col-span-9` 改为 `lg:col-span-8`
- [ ] **步骤 5:在 CTA 按钮下方增加底部数据条**
在 CTA 按钮的 `<motion.div>` 之后、grid 关闭之前,插入底部数据条:
```tsx
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 1, delay: 0.85, ease: EASE_OUT }}
className="mt-16 sm:mt-20 md:mt-24 pt-10 border-t border-white/10"
>
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-10">
{[
{ value: '12', suffix: '年', label: '行业深耕', sub: '经验沉淀', highlight: true },
{ value: '500', suffix: '+', label: '企业客户', sub: '累计服务' },
{ value: '98', suffix: '%', label: '客户续约', sub: '年度续约率' },
{ value: '6', suffix: '款', label: '自研产品', sub: '全链路覆盖' },
].map((item, i) => (
<div key={i}>
<div className="text-3xl sm:text-4xl font-bold tracking-tight mb-2">
<span className={item.highlight ? 'text-brand' : 'text-white'}>{item.value}</span>
<span className={item.highlight ? 'text-brand font-bold' : 'text-white font-bold'}>{item.suffix}</span>
</div>
<div className="text-white font-semibold text-sm mb-0.5">{item.label}</div>
<div className="text-xs text-dark-text-muted">{item.sub}</div>
</div>
))}
</div>
</motion.div>
```
### 2.4 调整 Hero 垂直留白
- [ ] **步骤 6:增加 Hero 垂直内边距**
将内容容器的 `py-28 sm:py-36 md:py-44 lg:py-56` 改为 `py-32 sm:py-40 md:py-48 lg:py-60`(增加约 15-20%)。
- [ ] **步骤 7:验证 Hero 编译通过**
```bash
npx tsc --noEmit src/app/(marketing)/home-content-v12.tsx
```
预期:0 errors
- [ ] **步骤 8Commit**
```bash
git add src/app/(marketing)/home-content-v12.tsx
git commit -m "feat(home-v12): hero bain-style重构 - 答案优先+量化结论+底部数据条"
```
---
## 任务 3:Section 标题结论化 + 留白节奏校准
**文件:**
- 修改:`src/app/(marketing)/home-content-v12.tsx` 的所有 Section 标题
### 3.1 StatsSection 标题
- [ ] **步骤 1:修改 Stats 标题**
将 StatsSection 内的 h2 从:
```tsx
<br />
```
改为:
```tsx
12 <br />500+
```
### 3.2 ServicesSection 标题
- [ ] **步骤 2:修改 Services 标题**
将 ServicesSection 内的 h2 从:
```tsx
```
改为:
```tsx
```
### 3.3 IndustriesSection 标题
- [ ] **步骤 3:修改 Industries 标题**
将 IndustriesSection 内的 h2 从:
```tsx
<br />
```
改为:
```tsx
6 <br />
```
### 3.4 CasesSection 标题
- [ ] **步骤 4:修改 Cases 标题**
将 CasesSection 内的 h2 从:
```tsx
```
改为:
```tsx
```
### 3.5 ApproachSection 标题
- [ ] **步骤 5:修改 Approach 标题**
将 ApproachSection 内的 h2 从:
```tsx
<br />
```
改为:
```tsx
500+
```
### 3.6 InsightsSection 标题
- [ ] **步骤 6:修改 Insights 标题**
将 InsightsSection 内的 h2 从:
```tsx
```
改为:
```tsx
```
### 3.7 CTASection 标题
- [ ] **步骤 7:修改 CTA 标题**
将 CTASection 内的 h2 从:
```tsx
<br />
<span ...></span>
```
改为:
```tsx
<br />
<span ...></span>
```
(保持 SVG 下划线装饰,只改文字内容)
### 3.8 留白节奏校准
- [ ] **步骤 8:调整所有 Section 的垂直间距**
按梯度调整 py 值:
- Hero / CTA:最大留白 → `py-32 sm:py-40 md:py-52 lg:py-60`
- Stats / Cases:中等留白 → `py-28 sm:py-36 md:py-44 lg:py-52`
- Services / Industries / Approach / Insights:标准留白 → `py-24 sm:py-32 md:py-40 lg:py-48`
- [ ] **步骤 9:调整标题区与内容区的间距**
将各 Section 标题与内容的间距(mb-16/mb-20/mb-28)整体增加约 20%
- `mb-16``mb-20`
- `mb-20``mb-24`
- `mb-28``mb-32`
- [ ] **步骤 10:验证编译通过**
```bash
npx tsc --noEmit src/app/(marketing)/home-content-v12.tsx
```
预期:0 errors
- [ ] **步骤 11Commit**
```bash
git add src/app/(marketing)/home-content-v12.tsx
git commit -m "feat(home-v12): section标题结论化 + 留白节奏校准"
```
---
## 任务 4:案例模块成果前置(Bain 式数据冲击力)
**文件:**
- 修改:`src/app/(marketing)/home-content-v12.tsx``CasesSection`
### 4.1 案例卡片布局翻转
- [ ] **步骤 1:重写案例卡片结构——成果前置**
将 CasesSection 内每个 case 的 grid 结构从"左文右数"改为"顶数下文"
原结构(5 列 grid,左 3 右 2):
```tsx
<div className="grid lg:grid-cols-5 gap-0">
<div className="lg:col-span-3 p-14 lg:p-20 ...">
... // + ...
</div>
<div className="lg:col-span-2 p-14 lg:p-20 ...">
... Key Results ...
</div>
</div>
```
改为(单列,顶部成果数字,下方内容):
```tsx
<div className="p-10 sm:p-14 lg:p-16">
{/* 顶部:成果数字横跨全宽 */}
<div className="mb-12 pb-12 border-b border-white/10">
<div className="text-[11px] text-dark-text-muted mb-8 tracking-[0.25em] uppercase font-bold">
Key Results
</div>
<div className="grid grid-cols-3 gap-6 md:gap-10">
{caseItem.metrics.map((metric, j) => (
<div key={j}>
<motion.div
className="text-5xl lg:text-7xl font-bold mb-3 tracking-tight"
whileInView={{ x: 0, opacity: 1 }}
initial={{ x: -20, opacity: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6, delay: 0.15 + j * 0.1, ease: EASE_OUT }}
>
<span className={j === 0 ? 'text-brand' : 'text-white'}>{metric.value}</span>
</motion.div>
<div className="flex items-center gap-3">
<div className={cn('w-10 h-px', j === 0 ? 'bg-brand' : 'bg-white/20')} />
<div className="text-sm text-dark-text-secondary font-medium">{metric.label}</div>
</div>
</div>
))}
</div>
</div>
{/* 中部:标签 + 标题 */}
<div className="flex items-center gap-5 mb-8">
<Badge className={cn(caseItem.bgClass, 'text-white border-transparent')}>
{caseItem.industry}
</Badge>
<span className="text-[11px] text-dark-text-muted tracking-wide font-semibold">
CASE #{String(i + 1).padStart(2, '0')}
</span>
</div>
<h3 className={cn(
'text-2xl lg:text-3xl font-bold mb-10 leading-tight transition-colors duration-400',
'text-white group-hover:text-brand'
)}>
{caseItem.title}
</h3>
{/* 下部:成果要点 + 方案要点 + 挑战要点 */}
<div className="space-y-8 mb-12">
{/* 成果 */}
<div>
<div className="flex items-center gap-3 mb-4">
<CheckCircle2 className={cn('w-4 h-4', caseItem.colorClass)} />
<span className={cn('text-sm font-bold', caseItem.colorClass)}></span>
</div>
<ul className="space-y-2.5 pl-7">
<li className="text-dark-text-secondary leading-relaxed text-sm">
线 {caseItem.industry === '智能制造' ? '< 48 小时' : '< 1 周'}
</li>
<li className="text-dark-text-secondary leading-relaxed text-sm">
{caseItem.metrics[0]?.label} {caseItem.metrics[0]?.value}
</li>
<li className="text-dark-text-secondary leading-relaxed text-sm">
{caseItem.metrics[1]?.label} {caseItem.metrics[1]?.value}
</li>
</ul>
</div>
{/* 方案 */}
<div>
<div className="flex items-center gap-3 mb-4">
<Zap className={cn('w-4 h-4', caseItem.colorClass)} />
<span className={cn('text-sm font-bold', caseItem.colorClass)}></span>
</div>
<ul className="space-y-2.5 pl-7">
<li className="text-dark-text-secondary leading-relaxed text-sm">
{caseItem.solution.split('。')[0]}
</li>
<li className="text-dark-text-secondary leading-relaxed text-sm">
{caseItem.solution.split('。')[1] || '行业最佳实践 + 企业定制化结合'}
</li>
</ul>
</div>
{/* 挑战 */}
<div>
<div className="flex items-center gap-3 mb-4">
<Target className={cn('w-4 h-4', caseItem.colorClass)} />
<span className={cn('text-sm font-bold', caseItem.colorClass)}></span>
</div>
<ul className="space-y-2.5 pl-7">
<li className="text-dark-text-secondary leading-relaxed text-sm">
{caseItem.challenge.split('')[0]}
</li>
<li className="text-dark-text-secondary leading-relaxed text-sm">
{caseItem.challenge.split('')[1] || '决策效率低下'}
</li>
</ul>
</div>
</div>
{/* 底部:客户证言 */}
<div className="flex items-start gap-5 pt-8 border-t border-white/10">
<Quote className={cn('w-8 h-8 shrink-0 mt-0.5 opacity-40', caseItem.colorClass)} />
<div>
<p className="text-dark-text-secondary italic leading-relaxed mb-4 text-sm">
&ldquo;{caseItem.quote}&rdquo;
</p>
<p className="text-xs text-dark-text-muted">
{caseItem.author}{caseItem.author}
</p>
</div>
</div>
</div>
```
注意:需要从 lucide-react 额外导入 `CheckCircle2, Zap, Target`(如果未导入的话)。
### 4.2 卡片顶部色条保留
- [ ] **步骤 2:保留卡片顶部 hover 色条**
将原有的顶部色条 `div``absolute top-0 left-0 w-full h-1 scale-x-0 group-hover:scale-x-100`)保留在新结构的最外层容器顶部。
- [ ] **步骤 3:验证编译通过**
```bash
npx tsc --noEmit src/app/(marketing)/home-content-v12.tsx
```
预期:0 errors
- [ ] **步骤 4Commit**
```bash
git add src/app/(marketing)/home-content-v12.tsx
git commit -m "feat(home-v12): 案例模块成果前置 + 要点式内容结构"
```
---
## 任务 5:品牌红精准贯穿(朱砂点睛 2.0)
**文件:**
- 修改:`src/app/(marketing)/home-content-v12.tsx`
### 5.1 减少服务卡片的品牌红
- [ ] **步骤 1:服务卡片左侧 hover 色条改为白色**
将 ServicesSection 内服务卡片的左侧色条(`w-1 scale-y-0 group-hover:scale-y-100`)的颜色从品牌色改为 `bg-white/20`hover 时 `bg-white/40`),移除动态颜色计算。
- [ ] **步骤 2:服务卡片"了解详情"link 文字改为白色,hover 才出红**
将服务卡片底部 `了解详情` 链接的颜色从 `service.colorClass` 改为 `text-white/70`,并添加 `group-hover:text-brand` 的 hover 效果。
### 5.2 减少行业卡片的品牌红
- [ ] **步骤 3:行业卡片图标统一白色,移除彩色**
将 IndustriesSection 内行业卡片的图标颜色类(`ind.colorClass`)统一改为 `text-white/80`,移除彩色图标。将 Badge 的颜色也统一为白色边框样式。
### 5.3 减少交付方法的品牌红
- [ ] **步骤 4:Approach 步骤数字改为白色,hover 才出红**
将 ApproachSection 内步骤数字(`text-brand`)改为 `text-white/80`,并添加 `group-hover:text-brand` 过渡效果。连接线保持品牌红。
### 5.4 Stats 区品牌红精简
- [ ] **步骤 5:Stats 只保留第 1 个指标的后缀品牌红,其余白色**
将 StatItem 组件内的 suffix 品牌红逻辑改为:只有第一个(index 0)才用品牌红,其余用白色。或者更简单——传入一个 `highlight` prop 控制。
修改方案:在 STATS 数组里给第一项加 `highlight: true`,然后在 StatItem 里根据 `highlight` prop 决定 suffix 颜色。
### 5.5 验证首页品牌红 5 处清单
对照以下 5 处清单逐一验证:
- [ ] **步骤 6:验证 Hero 主标题关键词品牌红**
- [ ] **步骤 7:验证 Hero CTA 主按钮品牌红**
- [ ] **步骤 8:验证案例首个成果数字品牌红**
- [ ] **步骤 9:验证 Section Eyebrow 下划线品牌红**
- [ ] **步骤 10:验证 CTA 区主按钮 + 关键词品牌红**
- [ ] **步骤 11:验证编译通过**
```bash
npx tsc --noEmit src/app/(marketing)/home-content-v12.tsx
```
预期:0 errors
- [ ] **步骤 12Commit**
```bash
git add src/app/(marketing)/home-content-v12.tsx
git commit -m "feat(home-v12): 品牌红精准贯穿 - 朱砂点睛2.0,5处强记忆点"
```
---
## 任务 6:切换首页入口 + 全面验证
### 6.1 切换入口
- [ ] **步骤 1:修改 page.tsx 引入 v12**
`src/app/(marketing)/page.tsx` 从:
```tsx
import HomeContentCms from './home-content-cms';
export default function HomePage() {
return <HomeContentCms />;
}
```
改为:
```tsx
import HomeContentV12 from './home-content-v12';
export default function HomePage() {
return <HomeContentV12 />;
}
```
### 6.2 类型检查与构建
- [ ] **步骤 2TypeScript 全量类型检查**
```bash
npx tsc --noEmit
```
预期:0 errors
- [ ] **步骤 3ESLint 检查**
```bash
npm run lint
```
预期:0 errors
- [ ] **步骤 4:生产构建**
```bash
npm run build
```
预期:构建成功,无 error
### 6.3 启动开发服务器验证
- [ ] **步骤 5:启动开发服务器**
```bash
npm run dev
```
(非阻塞,等待 3 秒后检查状态)
- [ ] **步骤 6:用浏览器验证首页效果**
打开 http://localhost:3000,检查:
- Hero 标题是否为"数字化转型 成功率提升 3 倍"
- 快速信任锚点行是否显示(500+企业验证 · 2.8x平均ROI · 40%交付周期缩短)
- 底部数据条 4 个指标是否显示
- 各 Section 标题是否已结论化
- 案例模块成果是否前置(顶部数字)
- 品牌红使用是否克制(约 5 处强记忆点)
### 6.4 Commit 切换
- [ ] **步骤 7Commit 入口切换**
```bash
git add src/app/(marketing)/page.tsx
git commit -m "feat: 切换首页入口到 v12 (Bain品牌清晰度升级)"
```
---
## 验收检查清单
### 功能验收
- [ ] 首页首屏 3 秒内能看懂核心价值(量化结论 + 信任锚点)
- [ ] 所有 Section 标题为结论型表述(非描述/分类)
- [ ] 案例模块成果前置,第一眼看到核心数字
- [ ] 首页品牌红触达点 ≈ 5 处,视觉面积 ≤ 5%
- [ ] Hero、CTA 区域留白比例符合 Bain 式极简美学
### 技术验收
- [ ] TypeScript 类型检查通过(0 errors
- [ ] ESLint 检查通过(0 errors
- [ ] Next.js 生产构建成功,无报错
- [ ] 响应式布局正常(sm/md/lg/xl 四断点)
- [ ] 无新增性能问题(Lighthouse Performance ≥ 90 保持)
### 设计验收
- [ ] 品牌红使用符合"朱砂点睛 2.0"原则(少而精)
- [ ] 信息层级清晰,标题/正文/辅助对比强烈
- [ ] 留白有节奏感,不拥挤也不空洞
- [ ] 数据呈现方式专业、有说服力
- [ ] 整体 Bain 气质明显,但保留 Accenture 信息密度和 Porsche 品质感
---
## 回滚方案
如发现问题,可快速回滚:
```bash
git revert HEAD # 回滚入口切换 commit
```
或手动将 `page.tsx` 改回 CMS 版本。
---
## 后续迭代
- **方案 C(深度 Bain 化,可选)**:模块重排 + 极简大留白 + 纯排版驱动
- **CMS 同步**:将 v12 的 Bain 化设计同步到 CMS 版本的组件和 mock 数据中
- **内页推广**:将 Bain 化策略(结论化标题 + 答案优先 + 精准品牌红)推广到产品/方案/服务等内页