novalon-website/docs/superpowers/plans/2026-06-07-ihg-design-alignment.md

# IHG 设计对齐实施计划

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

**目标：** 将当前代码对齐到 IHG 参考设计规范，修正 9 项偏离，使 HSI 架构、四层叙事、水墨雅致视觉、交叉引用系统完整落地。

**架构：** 保持 Next.js App Router 不变，重构数据层（products.ts 分类）、组件层（V1→V2/V3 迁移、目录统一）、视觉层（Hero 水墨雅致重设计）、页面层（方案组合叙事、L3 策略、导航层级）。

**技术栈：** Next.js 15 + React 19 + TypeScript + Tailwind CSS + Framer Motion

---

## 整体架构图

```mermaid
graph TB
    subgraph "P0 数据与视觉基础"
        T1[任务1: 产品分类对齐]
        T2[任务2: Hero 水墨雅致重设计]
    end

    subgraph "P1 页面与组件重构"
        T3[任务3: 方案列表页组合叙事]
        T4[任务4: 方案页删除服务方式+L3策略]
        T5[任务5: 独立产品组件迁移]
        T6[任务6: 导航HSI层级]
    end

    subgraph "P2 清理与统一"
        T7[任务7: 组件目录统一+版本号清理]
    end

    T1 --> T3
    T1 --> T5
    T1 --> T6
    T2 --> T5
    T3 --> T4
    T5 --> T7
```

## 文件变更清单

| 文件 | 操作 | 职责 |
|------|------|------|
| `src/lib/constants/products.ts` | 修改 | 删除 `growth` 分类，6 核心产品统一归入 `enterprise` |
| `src/lib/constants/hero-themes.ts` | 修改 | 全部 Hero theme 从深色渐变改为水墨雅致浅色系 |
| `src/lib/constants/navigation.ts` | 修改 | 导航项增加 HSI 层级权重，下拉菜单分区展示 |
| `src/app/(marketing)/products/page.tsx` | 修改 | 双区展示改为"企业套装区"+"专业产品区" |
| `src/app/(marketing)/solutions/page.tsx` | 修改 | 删除服务方式区域，方案卡片增加组合徽标 |
| `src/app/(marketing)/solutions/[id]/client.tsx` | 修改 | L3 信任层条件渲染（有数据才显示） |
| `src/app/(marketing)/products/standalone/[id]/client.tsx` | 修改 | V1 组件替换为 V2/V3 组件 |
| `src/components/detail-v2/solution-service-card-v3.tsx` | 修改 | 方案卡片增加"推荐组合"徽标 |
| `src/components/detail-v2/detail-trust-section-v2.tsx` | 修改 | 支持条件渲染（无数据时不渲染） |
| `src/components/layout/header.tsx` | 修改 | Products 导航项视觉权重增强 |
| `src/components/layout/mega-dropdown.tsx` | 修改 | Products 下拉增加分区标题样式 |
| `src/components/detail/` (整个目录) | 删除 | V1 组件迁移完成后删除 |
| `src/components/detail-v2/` (整个目录) | 重命名 | 重命名为 `detail/`，组件去掉版本号后缀 |

---

### 任务 1：产品分类对齐 — 删除 growth，统一为企业套装区 + 专业产品区

**文件：**
- 修改：`src/lib/constants/products.ts`
- 修改：`src/app/(marketing)/products/page.tsx`

- [ ] **步骤 1：修改 products.ts 类型定义**

将 `categoryId` 类型从 `'enterprise' | 'growth' | 'specialized'` 改为 `'enterprise' | 'specialized'`：

```typescript
// products.ts - 修改 Product 接口
export interface Product {
  // ... 其他字段不变
  categoryId: 'enterprise' | 'specialized';  // 删除 'growth'
  // ... 其他字段不变
}

// 修改 ProductCategory 接口
export interface ProductCategory {
  id: 'enterprise' | 'specialized';  // 删除 'growth'
  title: string;
  description: string;
}
```

- [ ] **步骤 2：修改 PRODUCT_CATEGORIES 常量**

```typescript
export const PRODUCT_CATEGORIES: ProductCategory[] = [
  {
    id: 'enterprise',
    title: '企业套装',
    description: '6 大核心产品互为补充，覆盖企业数字化全场景，常以组合形式出现在解决方案中。',
  },
  {
    id: 'specialized',
    title: '专业产品',
    description: '自成体系的独立产品线，包括安全产品、行业特种软件、硬件产品等。',
  },
];
```

- [ ] **步骤 3：修改 PRODUCTS 数组中各产品的 categoryId**

- `cms`：`categoryId: 'growth'` → `categoryId: 'enterprise'`，`category: '成长加速系列'` → `category: '企业套装'`
- `oa`：`categoryId: 'growth'` → `categoryId: 'enterprise'`，`category: '成长加速系列'` → `category: '企业套装'`
- `bi`：`categoryId: 'specialized'` → `categoryId: 'enterprise'`，`category: '专业工具系列'` → `category: '企业套装'`
- `sds`：`categoryId: 'specialized'` → `categoryId: 'enterprise'`，`category: '专业工具系列'` → `category: '企业套装'`
- `erp`、`crm`：保持 `enterprise` 不变
- `novavis`：保持 `specialized` 不变

- [ ] **步骤 4：修改 hero-themes.ts 中 badge 字段**

将所有企业套装产品的 badge 统一为 `'企业套装'`：
- `cms`：`badge: '成长加速'` → `badge: '企业套装'`
- `oa`：`badge: '成长加速'` → `badge: '企业套装'`
- `bi`：`badge: '专业工具'` → `badge: '企业套装'`
- `sds`：`badge: '专业工具'` → `badge: '企业套装'`

- [ ] **步骤 5：修改 products/page.tsx 双区展示逻辑**

```typescript
// 修改过滤逻辑
const enterpriseProducts = PRODUCTS.filter(p => p.categoryId === 'enterprise');
const specializedProducts = PRODUCTS.filter(p => p.categoryId === 'specialized');
```

同时更新区域标题和描述：
- 企业套装区域标题："企业套装"，描述："6 大核心产品互为补充，覆盖企业数字化全场景"
- 专业产品区域标题："专业产品"，描述："自成体系的独立产品线"

- [ ] **步骤 6：修改 navigation.ts 下拉菜单**

`MEGA_DROPDOWN_DATA.products` 中 `enterprise-suite` 的描述和标题保持不变（已经是"企业套装"），确认 6 个产品都在此分组中。

- [ ] **步骤 7：运行构建验证**

运行：`npx next build 2>&1 | head -50`
预期：无类型错误，构建成功

- [ ] **步骤 8：Commit**

```bash
git add src/lib/constants/products.ts src/lib/constants/hero-themes.ts src/app/\(marketing\)/products/page.tsx src/lib/constants/navigation.ts
git commit -m "refactor: 统一产品分类为企业套装+专业产品，删除growth分类"
```

---

### 任务 2：Hero 水墨雅致重设计

**文件：**
- 修改：`src/lib/constants/hero-themes.ts`
- 修改：`src/components/detail-v2/detail-hero-v3.tsx`（如需调整渐变方向/文字颜色）
- 修改：`src/components/detail-v2/list-page-hero-v3.tsx`（同上）

**设计原则：**
- 浅色/宣纸色底（`#faf9f7`、`#f5f0eb`、`#f0ebe4` 等）
- 深色文字（`#1a1a1a`、`#2d2d2d`）
- 品牌色作为点缀色（非背景色）
- 纹理保持但降低对比度，增加"墨韵"感
- 每个产品/方案/服务通过点缀色和纹理类型差异化

- [ ] **步骤 1：使用 web-design-engineer skill 生成 Hero 原型**

使用 `web-design-engineer` skill 生成 3 个 Hero 变体的原型 HTML：
1. **ERP 变体**：宣纸色底 + 深蓝点缀 + grid 纹理
2. **BI 变体**：淡灰底 + 青色点缀 + data-flow 纹理
3. **Security 变体**：浅灰底 + 红色点缀 + shield-hex 纹理

原型需验证：
- 浅色背景下文字可读性
- 品牌色点缀的视觉冲击力
- 纹理在浅色背景上的效果
- 与现有页面其余部分（白底/灰底 section）的衔接

- [ ] **步骤 2：根据原型结果修改 hero-themes.ts**

将所有 Hero theme 从深色渐变改为水墨雅致浅色系。示例（ERP）：

```typescript
erp: {
  id: 'erp',
  name: 'ERP 水墨蓝',
  gradientFrom: '#f8f6f3',      // 宣纸色
  gradientTo: '#f0ebe4',        // 淡宣纸色
  gradientAngle: 135,
  accentColor: '#1e3a5f',       // 深蓝（文字/点缀）
  accentBg: 'rgba(30, 58, 95, 0.06)',
  texture: { type: 'grid', opacity: 0.08, color: '#1e3a5f' },
  layout: 'left',
  badge: '企业套装',
},
```

所有 theme 的修改模式：
- `gradientFrom`/`gradientTo`：改为浅色系（`#f8f6f3` ~ `#f0ebe4` 范围）
- `accentColor`：改为深色（原 gradientFrom 的深色值，用于文字和点缀）
- `accentBg`：降低透明度
- `texture.opacity`：适当提高（浅色背景上需要更明显的纹理）
- `texture.color`：添加，与 accentColor 一致

- [ ] **步骤 3：修改 Hero 组件的文字颜色适配**

检查 `detail-hero-v3.tsx` 和 `list-page-hero-v3.tsx`，确保：
- 标题文字使用 `accentColor` 或深色（而非白色）
- 副标题/描述使用 `accentColor/70` 或灰色
- Badge 使用 `accentColor` 边框 + 浅色背景
- CTA 按钮使用 `accentColor` 作为主色

- [ ] **步骤 4：运行开发服务器验证视觉效果**

运行：`npx next dev`
预期：所有详情页 Hero 区域显示为浅色水墨雅致风格

- [ ] **步骤 5：Commit**

```bash
git add src/lib/constants/hero-themes.ts src/components/detail-v2/detail-hero-v3.tsx src/components/detail-v2/list-page-hero-v3.tsx
git commit -m "style: Hero视觉从深色渐变转向水墨雅致浅色系"
```

---

### 任务 3：方案列表页组合叙事

**文件：**
- 修改：`src/components/detail-v2/solution-service-card-v3.tsx`
- 修改：`src/app/(marketing)/solutions/page.tsx`

- [ ] **步骤 1：修改方案卡片组件，增加"推荐组合"徽标**

在 `solution-service-card-v3.tsx` 的 `SolutionCardV3` 组件中，卡片底部增加推荐组合展示：

```tsx
// 在卡片底部（CTA 按钮之前）增加组合徽标
{solution.suiteCombination && (
  <div className="mt-4 pt-4 border-t border-gray-100">
    <p className="text-xs text-gray-500 mb-2">推荐组合</p>
    <div className="flex flex-wrap gap-1.5">
      {solution.suiteCombination.primaryProducts.map((productId) => {
        const product = PRODUCTS.find(p => p.id === productId);
        return product ? (
          <span
            key={productId}
            className="inline-flex items-center rounded-md bg-[var(--color-brand-primary-bg)] px-2 py-0.5 text-xs font-medium text-[var(--color-brand-primary)]"
          >
            {product.title.replace('睿新', '')}
          </span>
        ) : null;
      })}
      {solution.suiteCombination.complementaryServices.map((serviceId) => {
        const service = SERVICES.find(s => s.id === serviceId);
        return service ? (
          <span
            key={serviceId}
            className="inline-flex items-center rounded-md bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-600"
          >
            {service.title}
          </span>
        ) : null;
      })}
    </div>
  </div>
)}
```

需要在文件顶部增加 import：
```typescript
import { PRODUCTS } from '@/lib/constants/products';
import { SERVICES } from '@/lib/constants/services';
```

- [ ] **步骤 2：修改 solutions/page.tsx，删除"服务方式"区域**

删除整个 `modules` 常量定义和对应的 `<section className="bg-gray-50/50 py-16">` 渲染区域。

替换为方案→服务的轻量关联推荐：

```tsx
{/* 方案与服务关联推荐 */}
<section className="bg-gray-50/50 py-16">
  <div className="container-wide">
    <h2 className="mb-8 text-center text-2xl font-bold text-gray-900 lg:text-3xl">
      从方案到服务，全程陪伴
    </h2>
    <div className="flex flex-wrap justify-center gap-4">
      {SERVICES.map((service) => (
        <a
          key={service.id}
          href={`/services/${service.id}`}
          className="flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-5 py-3 text-sm font-medium text-gray-700 transition-all hover:border-[var(--color-brand-primary)] hover:text-[var(--color-brand-primary)] hover:shadow-sm"
        >
          {typeof service.icon === 'object' && <service.icon className="h-4 w-4" />}
          {service.title}
        </a>
      ))}
    </div>
  </div>
</section>
```

同时删除不再使用的 import：`Lightbulb, Cpu, Users, CheckCircle2, ChevronDown, AnimatePresence`。

- [ ] **步骤 3：运行构建验证**

运行：`npx next build 2>&1 | head -50`
预期：无错误

- [ ] **步骤 4：Commit**

```bash
git add src/components/detail-v2/solution-service-card-v3.tsx src/app/\(marketing\)/solutions/page.tsx
git commit -m "feat: 方案卡片增加推荐组合徽标，删除方案页服务方式区域"
```

---

### 任务 4：方案详情页 L3 信任层策略 + L3 全局条件渲染

**文件：**
- 修改：`src/app/(marketing)/solutions/[id]/client.tsx`
- 修改：`src/components/detail-v2/detail-trust-section-v2.tsx`
- 修改：`src/app/(marketing)/products/[id]/client.tsx`
- 修改：`src/app/(marketing)/services/[id]/client.tsx`

- [ ] **步骤 1：修改 detail-trust-section-v2.tsx 支持条件渲染**

在组件顶部增加数据检查：如果 caseStudies、dataProofs、certifications 都为空，则不渲染：

```tsx
interface DetailTrustSectionV2Props {
  accentColor?: string;
  caseStudies?: CaseStudy[];
  dataProofs?: DataProof[];
  certifications?: Certification[];
}

export function DetailTrustSectionV2({
  accentColor = '#C41E3A',
  caseStudies = [],
  dataProofs = [],
  certifications = [],
}: DetailTrustSectionV2Props) {
  // 初创阶段：无真实数据时不渲染 L3
  const hasContent = caseStudies.length > 0 || dataProofs.length > 0 || certifications.length > 0;
  if (!hasContent) return null;

  // ... 原有渲染逻辑
}
```

- [ ] **步骤 2：修改产品详情页，传入真实数据（当前为占位数据，暂传空数组）**

在 `products/[id]/client.tsx` 中，将 L3 信任层的数据来源从 `product.caseStudies` 等改为条件传入：

```tsx
<DetailTrustSectionV2
  accentColor={theme.accentColor}
  caseStudies={[]}  // TODO: 初创阶段暂无真实案例，数据就绪后替换
  dataProofs={[]}   // TODO: 初创阶段暂无真实数据
  certifications={[]} // TODO: 初创阶段暂无资质
/>
```

- [ ] **步骤 3：修改服务详情页，同理传入空数组**

- [ ] **步骤 4：修改方案详情页，增加 L3 信任层位置**

在 `solutions/[id]/client.tsx` 的 L2 和 L4 之间插入 L3：

```tsx
{/* L3 信任证明层 - 初创阶段暂不渲染 */}
<DetailTrustSectionV2
  accentColor={theme.accentColor}
  caseStudies={[]}
  dataProofs={[]}
  certifications={[]}
/>
```

- [ ] **步骤 5：运行构建验证**

运行：`npx next build 2>&1 | head -50`
预期：无错误，L3 区域因无数据而不渲染

- [ ] **步骤 6：Commit**

```bash
git add src/components/detail-v2/detail-trust-section-v2.tsx src/app/\(marketing\)/products/\[id\]/client.tsx src/app/\(marketing\)/services/\[id\]/client.tsx src/app/\(marketing\)/solutions/\[id\]/client.tsx
git commit -m "feat: L3信任层条件渲染，初创阶段无数据时不显示"
```

---

### 任务 5：独立产品组件迁移（V1 → V2/V3）

**文件：**
- 修改：`src/app/(marketing)/products/standalone/[id]/client.tsx`

- [ ] **步骤 1：替换 V1 组件 import 为 V2/V3**

```typescript
// 删除
import { DetailHero } from '@/components/detail/detail-hero';
import { DetailTrustSection } from '@/components/detail/detail-trust-section';
import { DetailCTASection } from '@/components/detail/detail-cta-section';

// 替换为
import { DetailHeroV3 } from '@/components/detail-v2/detail-hero-v3';
import { DetailTrustSectionV2 } from '@/components/detail-v2/detail-trust-section-v2';
import { DetailCTASectionV2 } from '@/components/detail-v2/detail-cta-section-v2';
```

- [ ] **步骤 2：替换组件使用**

将 `<DetailHero>` 替换为 `<DetailHeroV3>`，props 适配 V3 接口。
将 `<DetailTrustSection>` 替换为 `<DetailTrustSectionV2>`，传入空数据（初创阶段）。
将 `<DetailCTASection>` 替换为 `<DetailCTASectionV2>`，props 适配 V2 接口。

- [ ] **步骤 3：运行构建验证**

运行：`npx next build 2>&1 | head -50`
预期：无错误

- [ ] **步骤 4：Commit**

```bash
git add src/app/\(marketing\)/products/standalone/\[id\]/client.tsx
git commit -m "refactor: 独立产品从V1组件迁移到V2/V3组件体系"
```

---

### 任务 6：导航 HSI 层级

**文件：**
- 修改：`src/lib/constants/navigation.ts`
- 修改：`src/components/layout/header.tsx`
- 修改：`src/components/layout/mega-dropdown.tsx`

- [ ] **步骤 1：修改导航数据，增加 HSI 层级权重**

在 `NavigationItemV2` 接口中增加 `weight` 字段：

```typescript
export interface NavigationItemV2 {
  id: string;
  label: string;
  href: string;
  hasDropdown?: boolean;
  dropdownKey?: string;
  weight?: 'hub' | 'spoke' | 'support';  // HSI 层级
}
```

更新 `NAVIGATION_V2`：

```typescript
export const NAVIGATION_V2: NavigationItemV2[] = [
  { id: 'products', label: '产品', href: '/products', hasDropdown: true, dropdownKey: 'products', weight: 'hub' },
  { id: 'solutions', label: '解决方案', href: '/solutions', hasDropdown: true, dropdownKey: 'solutions', weight: 'spoke' },
  { id: 'services', label: '服务', href: '/services', hasDropdown: true, dropdownKey: 'services', weight: 'support' },
  { id: 'about', label: '关于我们', href: '/about' },
  { id: 'contact', label: '联系我们', href: '/contact' },
];
```

- [ ] **步骤 2：修改 header.tsx，Hub 导航项视觉增强**

在导航渲染中，根据 `weight` 应用不同样式：

```tsx
const weightStyles: Record<string, string> = {
  hub: 'font-semibold text-[var(--color-text-primary)]',      // 最醒目
  spoke: 'font-medium text-[var(--color-text-secondary)]',    // 次之
  support: 'font-normal text-[var(--color-text-muted)]',      // 最轻
};
```

在导航链接的 className 中应用：

```tsx
className={`... ${item.weight ? weightStyles[item.weight] : 'font-medium text-[var(--color-text-secondary)]'}`}
```

- [ ] **步骤 3：修改 mega-dropdown.tsx，Products 下拉增加分区标题样式**

在 `MegaDropdown` 组件中，对 `highlight` 为 true 的分组增加视觉强调（如左侧品牌色竖线、稍大的标题字号）。

- [ ] **步骤 4：运行构建验证**

运行：`npx next build 2>&1 | head -50`
预期：无错误

- [ ] **步骤 5：Commit**

```bash
git add src/lib/constants/navigation.ts src/components/layout/header.tsx src/components/layout/mega-dropdown.tsx
git commit -m "feat: 导航体现HSI层级，Products(Hub)视觉权重最高"
```

---

### 任务 7：组件目录统一 + 版本号清理

**文件：**
- 重命名：`src/components/detail-v2/` → `src/components/detail/`
- 删除：`src/components/detail/`（原 V1 目录，先备份后删除）
- 修改：所有引用 `@/components/detail-v2/` 的文件改为 `@/components/detail/`
- 修改：组件文件名去掉版本号后缀

- [ ] **步骤 1：查找所有引用 detail-v2 的文件**

运行：`grep -r "from '@/components/detail-v2/" src/ --include="*.tsx" --include="*.ts" -l`

- [ ] **步骤 2：删除原 V1 detail 目录**

确认独立产品已迁移到 V2/V3 后，删除 `src/components/detail/` 下的所有 V1 组件文件。

- [ ] **步骤 3：重命名 detail-v2 为 detail**

```bash
mv src/components/detail-v2 src/components/detail
```

- [ ] **步骤 4：批量替换 import 路径**

将所有文件中的 `@/components/detail-v2/` 替换为 `@/components/detail/`。

- [ ] **步骤 5：组件文件名去版本号**

重命名组件文件：
- `detail-hero-v3.tsx` → `detail-hero.tsx`，导出 `DetailHeroV3` → `DetailHero`
- `detail-hero-v2.tsx` → 删除（已被 V3 替代）
- `detail-trust-section-v2.tsx` → `detail-trust-section.tsx`，导出 `DetailTrustSectionV2` → `DetailTrustSection`
- `detail-cta-section-v2.tsx` → `detail-cta-section.tsx`，导出 `DetailCTASectionV2` → `DetailCTASection`
- `detail-product-value-v3.tsx` → `detail-product-value.tsx`，导出名同步更新
- `detail-product-value-v2.tsx` → 删除（已被 V3 替代）
- `solution-value-v3.tsx` → `solution-value.tsx`
- `service-value-v3.tsx` → `service-value.tsx`
- `list-page-hero-v3.tsx` → `list-page-hero.tsx`
- `solution-service-card-v3.tsx` → `solution-service-card.tsx`
- `product-card-v3.tsx` → `product-card.tsx`
- `brand-elements.tsx` → 保持不变
- `micro-interactions.tsx` → 保持不变

- [ ] **步骤 6：更新所有引用组件名的 import**

全局替换组件名：
- `DetailHeroV3` → `DetailHero`
- `DetailTrustSectionV2` → `DetailTrustSection`
- `DetailCTASectionV2` → `DetailCTASection`
- `ProductValueSectionV3` → `ProductValueSection`
- `SolutionValueSectionV3` → `SolutionValueSection`
- `ServiceValueSectionV3` → `ServiceValueSection`
- `ListPageHeroV3` → `ListPageHero`
- `SolutionCardV3` → `SolutionCard`
- `ProductCardV3` → `ProductCard`

- [ ] **步骤 7：运行构建验证**

运行：`npx next build 2>&1 | head -50`
预期：无错误

- [ ] **步骤 8：Commit**

```bash
git add -A src/components/detail/ src/app/
git commit -m "refactor: 统一组件目录，删除V1，detail-v2重命名为detail，去掉版本号后缀"
```

---

## 自检

### 1. 规格覆盖度

| CONTEXT.md 决策 | 对应任务 |
|----------------|---------|
| 产品分类对齐（删除 growth） | 任务 1 |
| 解决方案 L3 信任层 | 任务 4 |
| 独立产品组件统一 | 任务 5 |
| 方案列表页组合叙事 | 任务 3 |
| Hero 视觉方向修正 | 任务 2 |
| 导航体现 HSI 层级 | 任务 6 |
| 方案页删除服务方式区域 | 任务 3 |
| L3 信任层内容策略 | 任务 4 |
| 组件版本统一 | 任务 7 |

全部覆盖。

### 2. 占位符扫描

无"待定"、"TODO"、"后续实现"等占位符（除 L3 数据的 TODO 注释，这是业务决策而非计划缺陷）。

### 3. 类型一致性

- `categoryId` 类型在任务 1 中统一修改，后续任务引用一致
- Hero theme 接口在任务 2 中扩展 `texture.color` 字段，组件侧同步适配
- 组件名在任务 7 中统一重命名，所有 import 同步更新