novalon-website/docs/superpowers/plans/2026-07-08-bain-differentiation-implementation.md

Bain 对标深化实现计划

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

目标： 在不引入外部图片的前提下，通过数据可视化、结构化文案、页面模块差异化，消除产品/解决方案/服务三页的 AI 模板同质化痕迹，提升案例可信度，并确保所有测试通过。

架构： 数据层（products.ts、solutions.ts、services.ts、cases.ts、cms/types.ts）新增差异化字段；UI 层（三个列表页、sections.tsx、案例详情页）按新数据结构重新组织卡片布局；测试层同步更新选择器与断言。

技术栈： Next.js 14 App Router、React 18、TypeScript 5、Tailwind CSS 3、Framer Motion、Lucide React。

---

文件清单

文件	职责
src/lib/constants/products.ts	扩展 Product 接口与数据：场景定位、能力指标、套装分组、核心能力 pills
src/lib/constants/solutions.ts	扩展 Solution 接口与数据：痛点、可量化结果、推荐产品组合
src/lib/constants/services.ts	调整服务数据，补充能力条目；改造流程常量结构
src/lib/constants/cases.ts	扩展 CaseStudy 接口与数据：项目周期、涉及部门、数据规模、业务问题、verified 标记
src/lib/cms/types.ts	同步扩展 CaseStudyData，与 cases.ts 字段保持一致
src/app/(marketing)/products/products-content-v3.tsx	产品页新布局：套装关系图 + 指标驱动卡片
src/app/(marketing)/solutions/solutions-content-v3.tsx	解决方案页新布局：问题-结果卡 + 产品组合 pills
src/app/(marketing)/services/services-content-v3.tsx	服务页新布局：能力清单卡片 + 中文流程时间轴
src/components/content/sections.tsx	改造服务流程时间线：移除 uppercase 英文标签
src/components/sections/case-detail-page.tsx	案例详情页展示新增可验证维度
src/lib/cms/mock-data.ts（如存在案例相关 mock）	同步更新 CMS mock 数据，与 cases.ts 字段一致
e2e/ 相关测试	更新选择器，确保不因 DOM 结构变化失败
src/**/*.test.ts{,x}	更新单元测试，覆盖新字段与组件渲染

---

任务 1：扩展产品数据层

文件：

• 修改：src/lib/constants/products.ts

步骤 1：扩展 Product 接口

在 Product 接口中新增以下字段：

export interface Product {
  id: string;
  name: string;
  subtitle: string;
  description: string;
  features: string[];
  benefits: string[];
  // ... 已有字段
  scenario?: string;
  metrics?: { value: string; label: string }[];
  bundle: 'enterprise' | 'standalone';
  capabilities?: string[];
}

步骤 2：为每个产品填充新字段

为 6 款企业产品补充 scenario、metrics（3 项）、bundle: 'enterprise'、capabilities（3-4 项）。 为独立产品（如 NovaVis）补充 bundle: 'standalone'。

示例（ERP）：

scenario: '面向中大型制造与零售企业的核心运营系统',
metrics: [
  { value: '10 万级', label: 'SKU 支撑' },
  { value: '200+', label: '标准报表模板' },
  { value: '99.5%', label: '数据准确率' },
],
bundle: 'enterprise',
capabilities: ['财务核算', '采购管理', '生产计划', '库存控制'],

步骤 3：运行相关产品单元测试

运行：npx jest --testPathPatterns=products 预期：如测试依赖旧字段，按失败提示更新断言，不修改业务语义。

---

任务 2：扩展解决方案数据层

文件：

• 修改：src/lib/constants/solutions.ts

步骤 1：扩展 Solution 接口

export interface Solution {
  id: string;
  title: string;
  industry: string;
  description: string;
  // ... 已有字段
  painPoints?: string[];
  outcomes?: { value: string; label: string }[];
  recommendedProducts?: string[];
}

步骤 2：为每个解决方案填充新字段

为 6 个行业解决方案补充：

• painPoints：1-2 个核心痛点（中文）
• outcomes：1-2 个可量化结果
• recommendedProducts：推荐产品 ID 数组（如 ['erp', 'crm', 'bi']）

步骤 3：运行相关测试

运行：npx jest --testPathPatterns=solutions 预期：通过或按提示更新测试。

---

任务 3：调整服务数据层

文件：

• 修改：src/lib/constants/services.ts

步骤 1：为每个服务补充能力条目

在 Service 接口中确保有 features 字段用于能力清单展示。如缺少，新增 capabilities?: string[]。

为每个服务填充 3-4 个能力条目，例如咨询服务：

capabilities: [
  '现状诊断与数字化成熟度评估',
  '业务流程重构与路线图设计',
  '技术架构选型与投资回报测算',
  '变革管理与落地陪跑',
],

步骤 2：调整服务流程常量

将现有流程数组：

const SERVICE_PROCESS = [
  { step: '01', title: '需求分析', desc: '...' },
  // ...
];

改造为：

const SERVICE_PROCESS = [
  {
    phase: '需求分析',
    duration: '2-3 周',
    deliverables: ['业务痛点清单', '现状评估报告', '项目范围说明书'],
  },
  {
    phase: '方案设计',
    duration: '4-6 周',
    deliverables: ['系统架构设计', '实施路线图', '投资测算模型'],
  },
  {
    phase: '敏捷交付',
    duration: '3-6 个月',
    deliverables: ['分阶段上线版本', '用户培训材料', '数据迁移方案'],
  },
  {
    phase: '持续支持',
    duration: '长期',
    deliverables: ['运维监控体系', '迭代优化计划', '知识转移文档'],
  },
];

---

任务 4：扩展案例数据层

文件：

• 修改：src/lib/constants/cases.ts
• 修改：src/lib/cms/types.ts

步骤 1：扩展 CaseStudy 接口

export interface CaseStudy {
  id: string;
  slug: string;
  client: string;
  industry: string;
  companySize: string;
  title: string;
  subtitle: string;
  challenge: string;
  solution: string;
  result: string;
  metrics: CaseMetric[];
  timeline: CaseTimelinePhase[];
  services: CaseService[];
  testimonial?: CaseTestimonial;
  color: 'brand' | 'blue' | 'teal' | 'amber' | 'purple';
  featured?: boolean;
  // 新增
  projectDuration?: string;
  departments?: string[];
  dataScale?: string;
  businessProblem?: string;
  verified?: boolean;
}

步骤 2：为每个案例填充可验证维度

为 CASE_STUDIES 中每个案例补充：

• projectDuration
• departments
• dataScale
• businessProblem（比 challenge 更具体的一句话）
• verified: false（预留字段，当前未公开验证）

步骤 3：同步 CMS 类型

在 src/lib/cms/types.ts 的 CaseStudyData 中新增相同字段：

export interface CaseStudyData {
  client: string;
  industry: string;
  companySize: string;
  subtitle: string;
  challenge: string;
  solution: string;
  result: string;
  metrics: CaseMetric[];
  timeline: CaseTimelinePhase[];
  services: CaseService[];
  testimonial?: CaseTestimonial;
  color: 'brand' | 'blue' | 'teal' | 'amber' | 'purple';
  featured?: boolean;
  projectDuration?: string;
  departments?: string[];
  dataScale?: string;
  businessProblem?: string;
  verified?: boolean;
}

步骤 4：同步 CMS mock 数据

如果 src/lib/cms/mock-data.ts 或相关文件包含案例 mock 数据，同步添加新字段。

步骤 5：运行案例相关测试

运行：npx jest --testPathPatterns=cases 预期：通过或按提示更新。

---

任务 5：产品页 UI 改造

文件：

• 修改：src/app/(marketing)/products/products-content-v3.tsx

步骤 1：改造 Hero 文案

将标题中的“产品矩阵”改为问题-结果叙事。例如：

<motion.h1 ...>
  <div className="block">用自研产品组合</div>
  <div className="block mt-5">
    <span className="text-brand font-extrabold">支撑企业核心系统升级</span>
  </div>
</motion.h1>

副文案强调“从数据智能到业务协同，每一款产品都经过实战验证”。

步骤 2：新增套装关系图模块

在 Hero 与产品卡片之间新增一个轻量模块 BundleOverview：

• 展示两列：企业套装（6 款产品）与专业产品（独立产品）。
• 使用小圆点 + 产品名 + 一句定位。
• 使用 CSS grid 布局，不引入图片/SVG 复杂度。

步骤 3：改造产品卡片

将 ProductCard 从图标中心改为以下结构：

<motion.a href={`/products/${product.id}`} ...>
  <div className="flex items-start justify-between mb-4">
    <div>
      <div className="text-xs text-text-muted mb-1">{bundleLabel}</div>
      <h3 className="text-lg font-bold text-text-primary">{product.name}</h3>
    </div>
    <span className="px-2 py-1 text-xs bg-brand/10 text-brand">{product.bundle === 'enterprise' ? '企业套装' : '专业产品'}</span>
  </div>
  <p className="text-sm text-text-secondary mb-4 leading-relaxed">{product.scenario || product.description}</p>
  <div className="grid grid-cols-3 gap-2 mb-4">
    {product.metrics?.map((m) => (
      <div key={m.label} className="text-center p-2 bg-bg-secondary">
        <div className="text-lg font-bold text-text-primary">{m.value}</div>
        <div className="text-xs text-text-muted">{m.label}</div>
      </div>
    ))}
  </div>
  <div className="flex flex-wrap gap-2">
    {product.capabilities?.map((cap) => (
      <span key={cap} className="px-2 py-1 text-xs border border-border-primary text-text-secondary">{cap}</span>
    ))}
  </div>
</motion.a>

移除卡片内大图标。

步骤 4：运行产品页相关 E2E

运行：npx playwright test p6-missing-paths.spec.ts --config=playwright.local.config.ts --grep "产品" 预期：通过。如因 DOM 结构变化失败，更新测试中的选择器。

---

任务 6：解决方案页 UI 改造

文件：

• 修改：src/app/(marketing)/solutions/solutions-content-v3.tsx

步骤 1：改造 Hero 文案

在副文案中增加结果承诺，例如：

<p ...>
  端到端交付可量化的业务成果。
  <br className="hidden sm:block" />
  基于自研产品矩阵，为制造、零售、教育、医疗、金融、物流六大行业沉淀最佳实践。
</p>

步骤 2：改造行业卡片

将 SolutionCard 改为问题-结果卡：

<motion.a href={`/solutions/${solution.id}`} ...>
  <div className="flex items-center gap-3 mb-4">
    <Icon className="w-5 h-5 text-text-muted" />
    <h3 className="text-lg font-bold text-text-primary">{solution.industry}</h3>
  </div>
  <div className="mb-4">
    <div className="text-xs text-text-muted mb-2">核心痛点</div>
    <p className="text-sm text-text-secondary leading-relaxed">{solution.painPoints?.join('、')}</p>
  </div>
  <div className="grid grid-cols-2 gap-2 mb-4">
    {solution.outcomes?.map((o) => (
      <div key={o.label} className="p-2 bg-bg-secondary">
        <div className="text-base font-bold text-brand">{o.value}</div>
        <div className="text-xs text-text-muted">{o.label}</div>
      </div>
    ))}
  </div>
  <div className="pt-4 border-t border-border-primary">
    <div className="text-xs text-text-muted mb-2">推荐产品组合</div>
    <div className="flex flex-wrap gap-2">
      {recommendedProductNames.map((name) => (
        <span key={name} className="px-2 py-1 text-xs bg-bg-secondary text-text-secondary">{name}</span>
      ))}
    </div>
  </div>
</motion.a>

步骤 3：运行解决方案页相关 E2E

运行：npx playwright test --config=playwright.local.config.ts --grep "解决方案|solution" 预期：通过。

---

任务 7：服务页 UI 改造

文件：

• 修改：src/app/(marketing)/services/services-content-v3.tsx

步骤 1：改造服务卡片

移除大图标居中设计，改为：

<motion.a href={`/services/${service.id}`} ...>
  <h3 className="text-lg font-bold text-text-primary mb-2">{service.title}</h3>
  <p className="text-sm text-text-secondary mb-4 leading-relaxed">{service.description}</p>
  <ul className="space-y-2 mb-4">
    {service.capabilities?.slice(0, 4).map((cap) => (
      <li key={cap} className="flex items-start gap-2 text-sm text-text-secondary">
        <CheckCircle2 className="w-4 h-4 text-brand shrink-0 mt-0.5" />
        {cap}
      </li>
    ))}
  </ul>
  <div className="flex gap-4 pt-4 border-t border-border-primary">
    {service.metrics?.map((m) => (
      <div key={m.label}>
        <div className="text-base font-bold text-text-primary">{m.value}</div>
        <div className="text-xs text-text-muted">{m.label}</div>
      </div>
    ))}
  </div>
</motion.a>

步骤 2：改造流程时间轴

将 SERVICE_PROCESS 的新结构渲染为时间轴：

<div className="relative">
  {SERVICE_PROCESS.map((step, index) => (
    <div key={step.phase} className="relative pl-8 pb-12 last:pb-0">
      <div className="absolute left-0 top-0 w-px h-full bg-border-primary" />
      <div className="absolute left-0 top-1 w-2 h-2 -translate-x-1/2 rounded-full bg-brand" />
      <div className="flex items-center gap-3 mb-2">
        <h4 className="text-base font-bold text-text-primary">{step.phase}</h4>
        <span className="text-xs text-text-muted">{step.duration}</span>
      </div>
      <div className="text-xs text-text-muted mb-2">阶段产出</div>
      <ul className="space-y-1">
        {step.deliverables.map((d) => (
          <li key={d} className="text-sm text-text-secondary">{d}</li>
        ))}
      </ul>
    </div>
  ))}
</div>

步骤 3：运行服务页相关 E2E

运行：npx playwright test --config=playwright.local.config.ts --grep "服务|service" 预期：通过。

---

任务 8：sections.tsx 服务流程时间线改造

文件：

• 修改：src/components/content/sections.tsx

步骤 1：移除 uppercase 标签

找到流程时间线卡片中的以下代码：

<span className="text-xs font-bold tracking-[0.2em] uppercase" style={{ color: accentColor }}>
  {step.phase}
</span>

改为：

<span className="text-xs font-bold text-text-muted">
  {`第 ${index + 1} 阶段：${step.phase}`}
</span>

找到：

<div className="text-xs text-text-muted mb-3 font-medium uppercase tracking-wider">
  交付物
</div>

改为：

<div className="text-xs text-text-muted mb-3 font-medium">
  阶段产出
</div>

步骤 2：运行相关测试

运行：npx jest --testPathPatterns=sections 预期：通过。

---

任务 9：案例详情页展示可验证维度

文件：

• 修改：src/components/sections/case-detail-page.tsx
• 修改：src/app/(marketing)/cases/[slug]/client.tsx

步骤 1：传递新增字段

在 client.tsx 的 detailData 中新增字段：

const detailData = {
  // ... 已有字段
  projectDuration: data.projectDuration,
  departments: data.departments,
  dataScale: data.dataScale,
  businessProblem: data.businessProblem,
  verified: data.verified,
};

步骤 2：改造 CaseDetailPage 组件

在案例详情页顶部（Hero 区域）增加可验证维度条：

<div className="flex flex-wrap gap-6 text-sm text-text-secondary border-y border-border-primary py-4 mb-8">
  {projectDuration && <div><span className="text-text-muted">项目周期</span> {projectDuration}</div>}
  {departments && <div><span className="text-text-muted">涉及部门</span> {departments.join('、')}</div>}
  {dataScale && <div><span className="text-text-muted">数据规模</span> {dataScale}</div>}
  {verified && <div className="text-brand">✓ 客户授权公开</div>}
</div>

如 businessProblem 存在，在 challenge 前增加“具体业务问题”小模块。

步骤 3：运行案例页相关 E2E

运行：npx playwright test --config=playwright.local.config.ts --grep "案例|case" 预期：通过。

---

任务 10：全量验证

步骤 1：运行功能 E2E

运行：cd e2e && npx playwright test --config=playwright.local.config.ts --project=chromium --grep-invert "visual-regression" 预期：171 passed

步骤 2：运行单元测试

运行：npm run test:unit 预期：718 passed

步骤 3：类型检查与 Lint

运行：npm run type-check && npm run lint 预期：无错误。

步骤 4：构建检查

运行：npm run build 预期：成功。

---

自检清单

• products.ts 中每个产品都有 bundle、scenario、metrics、capabilities。
• solutions.ts 中每个方案都有 painPoints、outcomes、recommendedProducts。
• services.ts 中流程常量已改为 { phase, duration, deliverables[] } 结构。
• cases.ts 与 cms/types.ts 的 CaseStudyData 字段保持一致。
• 三个列表页卡片不再以大图标为中心。
• services-content-v3.tsx 中不再出现 01/02/03/04。
• sections.tsx 中不再出现 uppercase 阶段标签和“交付物”uppercase 标签。
• 全量 E2E、单元测试、type-check、lint 通过。