Files

T

- CONTEXT.md添加9项新决策(HSI架构/水墨雅致/L3策略等)
- ADR: HSI架构与四层叙事模型决策记录
- 实施计划: IHG设计对齐详细任务分解

2026-06-07 16:21:29 +08:00

21 KiB

Raw Blame History

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

整体架构图

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'：

// 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 常量

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 双区展示逻辑

// 修改过滤逻辑
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

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：

ERP 变体：宣纸色底 + 深蓝点缀 + grid 纹理
BI 变体：淡灰底 + 青色点缀 + data-flow 纹理
Security 变体：浅灰底 + 红色点缀 + shield-hex 纹理

原型需验证：

浅色背景下文字可读性
品牌色点缀的视觉冲击力
纹理在浅色背景上的效果
与现有页面其余部分（白底/灰底 section）的衔接
步骤 2：根据原型结果修改 hero-themes.ts

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

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

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 组件中，卡片底部增加推荐组合展示：

// 在卡片底部（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：

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"> 渲染区域。

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

{/* 方案与服务关联推荐 */}
<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

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 都为空，则不渲染：

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 等改为条件传入：

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

步骤 3：修改服务详情页，同理传入空数组
步骤 4：修改方案详情页，增加 L3 信任层位置

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

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

步骤 5：运行构建验证

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

步骤 6：Commit

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

// 删除
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

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 字段：

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

更新 NAVIGATION_V2：

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 应用不同样式：

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 中应用：

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

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

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

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 同步更新

21 KiB Raw Blame History Unescape Escape

IHG 设计对齐实施计划

整体架构图

文件变更清单

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

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

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

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

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

任务 6：导航 HSI 层级

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

自检

1. 规格覆盖度

2. 占位符扫描

3. 类型一致性

21 KiB

Raw Blame History