Files

T

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

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

34 KiB

Raw Blame History

HSI 架构 + 四层叙事模型全量重构实施计划

面向 AI 代理的工作者： 必需子技能：使用 superpowers:subagent-driven-development 执行此计划。步骤使用复选框（- [ ]）语法来跟踪进度。

目标： 将 Novalon 网站从"扁平模板套用"升级为 HSI 混合架构 + 四层分层叙事体系，全量重构 14 个详情页 + 3 个列表页 + 导航系统，参考 IHG 洲际酒店集团官网的信息架构思维。

架构： HSI（Hub-Spoke-Independent）混合信息架构——Products 做分区目录 Hub，Solutions 做场景入口 Spoke，Services 做支撑层，独立产品在 Products 的专业产品区内展示。所有详情页统一采用四层叙事模型（Hero → 价值支撑 → 信任证明 → CTA），Hero 区域支持色调+背景+布局的有限视觉变化。

技术栈： Next.js 14 App Router / TypeScript / Tailwind CSS / Framer Motion / Lucide Icons

决策依据： CONTEXT.md | ADR-0002

一、架构总览

1.1 目标信息架构

graph TB
    subgraph Hub["Novalon 官网 - 品牌枢纽"]
        HOME["/ 首页"]
        ABOUT["/about 关于我们"]
        CONTACT["/contact 联系我们"]
    end

    subgraph Spoke["Solutions - 场景入口"]
        SM["/solutions/manufacturing 制造业"]
        SR["/solutions/retail 零售业"]
        SE["/solutions/education 教育行业"]
        SH["/solutions/healthcare 医疗健康"]
    end

    subgraph ProductHub["Products - 产品目录 Hub"]
        subgraph Suite["企业套装区"]
            P_ERP["/products/erp ERP"]
            P_CRM["/products/crm CRM"]
            P_BI["/products/bi BI"]
            P_CMS["/products/cms CMS"]
            P_SDS["/products/sds SDS"]
            P_OA["/products/oa OA"]
        end
        subgraph Standalone["专业产品区"]
            PS["/products/security-* 安全产品"]
            PI["/products/industry-* 行业特种"]
            PH["/products/hardware-* 硬件产品"]
        end
    end

    subgraph Support["Services - 服务支撑"]
        SV_SW["/services/software 软件开发"]
        SV_DA["/services/data 数据分析"]
        SV_CO["/services/consulting 技术咨询"]
        SV_SO["/services/solutions 方案实施"]
    end

    HOME --> ProductHub
    HOME --> Spoke
    HOME --> Support

    SM -->|"推荐: ERP+BI+SDS"| Suite
    SR -->|"推荐: ERP+CRM+BI"| Suite
    SE -->|"推荐: CMS+OA"| Suite
    SH -->|"推荐: ERP+SDS"| Suite

    SM -->|"服务包"| Support
    SR -->|"服务包"| Support

    P_ERP <-->|"适用于"| SM
    P_ERP <-->|"适用于"| SH
    P_BI <-->|"适用于"| SM
    P_BI <-->|"适用于"| SR

    style Hub fill:#FEF2F4,stroke:#C41E3A,color:#1C1C1C
    style Spoke fill:#EFF6FF,stroke:#2563EB,color:#1C1C1C
    style ProductHub fill:#F0FDF4,stroke:#16A34A,color:#1C1C1C
    style Support fill:#FAF5FF,stroke:#7C3AED,color:#1C1C1C
    style Suite fill:#DCFCE7,stroke:#16A34A,color:#1C1C1C
    style Standalone fill:#FEF9C3,stroke:#CA8A04,color:#1C1C1C

1.2 四层叙事模型

graph LR
    subgraph L1["Layer 1: Hero - 情感入口"]
        H1["大视觉背景<br/>标题 + 价值主张<br/>状态/分类标签<br/>⚡ 支持色调+纹理+布局变化"]
    end

    subgraph L2["Layer 2: 价值支撑 - 为什么选我们"]
        P2_PRODUCT["产品页: 功能模块 + 优势 + 规格 + 场景"]
        P2_SOLUTION["方案页: 痛点 → 架构图 → 推荐组合 ⭐"]
        P2_SERVICE["服务页: 挑战→成果KPI + 流程 + 团队"]
        P2_STANDALONE["独立产品: 特性 + 参数 + 对比优势"]
    end

    subgraph L3["Layer 3: 信任证明 - 消除顾虑 ⭐新增"]
        T3["案例故事 / 数据佐证<br/>认证资质 / 客户评价<br/>部署案例 / 性能数据"]
    end

    subgraph L4["Layer 4: CTA - 行动指引"]
        C4["主行动按钮 + 次行动<br/>⭐ 交叉推荐卡片<br/>方案↔产品↔服务 双向链接"]
    end

    L1 --> L2 --> L3 --> L4

    style L1 fill:#C41E3A,color:#FFF
    style L2 fill:#2563EB,color:#FFF
    style L3 fill:#16A34A,color:#FFF
    style L4 fill:#7C3AED,color:#FFF

1.3 Hero 变化策略

graph TB
    subgraph Base["统一基础（不变）"]
        BCSS["Design Tokens CSS 变量"]
        BHDR["Header / Footer / Breadcrumb"]
        BFNT["字体系统 Noto Sans SC + AoyagiReisho"]
    end

    subgraph Variation["Hero 区域允许的变化"]
        direction LR
        V_COLOR["🎨 色调变化<br/>ERP=深蓝 #1e3a5f<br/>BI=数据蓝 #0891B2<br/>CRM=关系蓝 #2563EB<br/>安全=盾牌红 #991B1B"]
        V_TEXTURE["📐 背景纹理<br/>ERP=几何网格<br/>BI=数据流线条<br/>CMS=文档图层<br/>安全=六边形盾牌纹"]
        V_LAYOUT["📐 布局微调<br/>产品页=左对齐<br/>方案页=居中<br/>服务页=左对齐+图标<br/>独立产品=宽幅"]
    end

    Base --> Variation

二、文件结构

2.1 新建文件清单

src/
├── lib/
│   └── constants/
│       ├── hero-themes.ts              # Hero 变化主题定义（色板/纹理/布局）
│       └── cross-references.ts         # 方案↔产品↔服务交叉引用数据
│
├── components/
│   ├── detail/                          # 🆕 四层叙事组件库
│   │   ├── detail-hero.tsx             # L1: Hero 组件（支持主题变化）
│   │   ├── detail-trust-section.tsx    # L3: 信任证明容器
│   │   ├── detail-cta-section.tsx      # L4: CTA 区（含交叉推荐）
│   │   ├── product-value-section.tsx   # L2变体: 产品功能/优势/规格
│   │   ├── solution-value-section.tsx  # L2变体: 方案痛点/架构图/组合
│   │   ├── service-value-section.tsx   # L2变体: 服务挑战/成果/流程
│   │   ├── trust-case-study.tsx        # L3组件: 案例故事卡片
│   │   ├── trust-data-proof.tsx        # L3组件: 数据佐证指标
│   │   ├── trust-certification.tsx     # L3组件: 认证资质展示
│   │   └── cross-recommend-grid.tsx    # L4组件: 交叉推荐网格
│   │
│   └── layout/
│       └── mega-dropdown.tsx           # ✏️ 修改: 适配 Products 分区
│
└── app/(marketing)/
    ├── products/
    │   ├── page.tsx                    # ✏️ 重构: 分区列表页
    │   └── [id]/
    │       └── page.tsx                # ✏️ 重构: 四层叙事产品详情
    ├── solutions/
    │   ├── page.tsx                    # ✏️ 重构: 方案列表页
    │   └── [id]/
    │       ├── page.tsx                # ✏️ 修改: Server Component 数据层
    │       └── client.tsx              # ✏️ 重构: 四层叙事方案详情
    ├── services/
    │   ├── page.tsx                    # ✏️ 重构: 服务列表页
    │   └── [id]/
    │       ├── page.tsx                # ✏️ 修改: Server Component 数据层
    │       └── client.tsx              # ✏️ 重构: 四层叙事服务详情
    └── templates/
        └── standalone-product.tsx      # 🆕 独立产品空模板

2.2 修改文件清单

文件路径	变更类型	说明
`src/lib/constants/products.ts`	修改	Product 接口增加 `heroTheme` / `trustCase` 字段
`src/lib/constants/solutions.ts`	修改	Solution 接口增加 `heroTheme` / `suiteCombination` / `trustData` 字段
`src/lib/constants/services.ts`	修改	增加 Service 类型接口和 `heroTheme` / `trustCases` 字段
`src/lib/constants/navigation.ts`	修改	MEGA_DROPDOWN_DATA.products 分为两栏（套装/专业）
`src/lib/constants/index.ts`	修改	导出新模块
`src/components/layout/mega-dropdown.tsx`	修改	支持分组展示（分栏+组标题）
`src/app/(marketing)/products/page.tsx`	重写	企业套装区 + 专业产品区分区展示
`src/app/(marketing)/products/[id]/page.tsx`	重写	四层叙事产品详情
`src/app/(marketing)/solutions/page.tsx`	重写	方案列表页优化
`src/app/(marketing)/solutions/[id]/page.tsx`	修改	增加 suiteCombination 数据传递
`src/app/(marketing)/solutions/[id]/client.tsx`	重写	四层叙事方案详情
`src/app/(marketing)/services/page.tsx`	重写	服务列表页优化
`src/app/(marketing)/services/[id]/page.tsx`	修改	增加类型安全
`src/app/(marketing)/services/[id]/client.tsx`	重写	四层叙事服务详情

三、实施阶段与任务

Phase 0: 基础设施 — 数据模型 + Hero 主题系统 + Section 组件库

目标： 建立所有后续页面共用的基础设施，不涉及具体页面内容。

任务 0.1: 创建 Hero 主题系统

文件：

创建：src/lib/constants/hero-themes.ts
步骤 1：创建 Hero 主题定义文件

完整代码包含：

HeroLayout 类型：'left' | 'center' | 'wide' | 'icon-left'
HeroTexture 接口：type（grid/data-flow/layers/shield-hex/circuit/none）、opacity、可选 color
HeroTheme 接口：id/name/gradientFrom/gradientTo/gradientAngle/accentColor/accentBg/texture/layout/badge
HERO_THEMES 对象：10 个预定义主题（erp/crm/bi/cms/sds/oa/solution/service/security/default）
getHeroTheme(id) 工具函数

每个主题的色值定义：

erp: gradientFrom=#1e3a5f → gradientTo=#0f172a, accent=#3b82f6, texture=grid, layout=left, badge='企业旗舰'
crm: gradientFrom=#1e40af → #1e3a8a, accent=#2563eb, texture=layers, layout=left, badge='企业旗舰'
bi: gradientFrom=#0c4a6e → #082f49, accent=#0891b2, texture=data-flow, layout=left, badge='专业工具'
cms: gradientFrom=#14532d → #052e16, accent=#16a34a, texture=layers, layout=left, badge='成长加速'
sds: gradientFrom=#78350f → #450a00, accent=#ea580c, texture=data-flow, layout=left, badge='专业工具'
oa: gradientFrom=#4c1d95 → #2e1065, accent=#7c3aed, texture=grid, layout=left, badge='成长加速'
solution: gradientFrom=#1c1917 → #0c0a09, accent=#C41E3A, texture=circuit, layout=center
service: gradientFrom=#1e293b → #0f172a, accent=#C41E3A, texture=none, layout=icon-left
security: gradientFrom=#450a0a → #1c0505, accent=#dc2626, texture=shield-hex, layout=wide, badge='安全合规'
default: gradientFrom=#1c1917 → #0c0a09, accent=#C41E3A, texture=none, layout=left
步骤 2：验证 TypeScript 编译

运行：npx tsc --noEmit --pretty src/lib/constants/hero-themes.ts 预期：无错误

步骤 3：Commit

git add src/lib/constants/hero-themes.ts
git commit -m "feat(hero): add theme system for detail page hero variation"

任务 0.2: 创建交叉引用数据

文件：

创建：src/lib/constants/cross-references.ts
修改：src/lib/constants/index.ts
步骤 1：创建交叉引用数据模块

定义三个核心函数：

getProductCrossRefs(productId) — 返回 CrossReference[]：

查找 SOLUTIONS 中 relatedProducts 包含此 productId 的方案
查找 PRODUCTS 中与此产品共同出现在同一方案中的其他产品（最多 3 个）
每个 ref 的 reason 字段说明关联逻辑

getSolutionCrossRefs(solutionId) — 返回 CrossReference[]：

根据 Solution.relatedProducts 映射到对应 Product 实体
reason 格式：「{方案名} 推荐使用 {产品名}」

getServiceCrossRefs(serviceId) — 返回 CrossReference[]：

内置 mapping 表：software→manufacturing+retail, data→manufacturing+retail+healthcare, consulting→manufacturing+education, solutions→全部4个
每个 ref 带有描述性 reason

CrossReference 接口：{ id, title, type('product'|'solution'|'service'), href, reason }

步骤 2：更新 index.ts 导出

在 index.ts 中添加 hero-themes 和 cross-references 的全部导出。

步骤 3：验证编译并 Commit

运行：npx tsc --noEmit --pretty 预期：无错误

git add src/lib/constants/cross-references.ts src/lib/constants/index.ts
git commit -m "feat(data): add cross-reference system for solution-product-service linking"

任务 0.3: 扩展数据模型（Product/Solution/Service）

文件：

修改：src/lib/constants/products.ts
修改：src/lib/constants/solutions.ts
修改：src/lib/constants/services.ts
步骤 1：扩展 Product 接口和每个产品的数据

在 Product 接口末尾追加两个字段：

heroTheme: string;
trustCase: {
  industry: string;
  company: string;
  challenge: string;
  solution: string;
  result: string;
  metric: string;
};

为每个 PRODUCT 数组项追加这两个字段。各产品 trustCase 差异化场景：

erp: 制造业 / 某大型装备制造集团 / 月度结账需7天 / 部署睿新ERP / 结账缩短至2天 / 结账效率提升71%
crm: 零售业 / 某连锁零售集团 / 销售线索转化率低 / 部署睿新CRM / 转化率提升35%
bi: 医疗健康 / 某三甲医院 / 数据分散无法辅助决策 / 部署睿新BI / 决策效率提升50%
cms: 教育行业 / 某高校 / 多站点管理混乱 / 部署睿新CMS / 发布效率提升60%
sds: 零售业 / 某连锁商超 / 缺货率+积压并存 / 部署睿新SDS / 缺货率降低45%
oa: 金融行业 / 某城商行 / 审批流程平均5天 / 部署睿新OA / 审批效率提升65%
步骤 2：扩展 Solution 接口和每个方案的数据

在 Solution 接口末尾追加三个字段：

heroTheme: string;
suiteCombination: {
  products: Array<{ id: string; role: string }>;
  services: Array<{ id: string; role: string }>;
  summary: string;
};
trustData: {
  caseIndustry: string;
  companyName: string;
  outcome: string;
  metrics: Array<{ value: string; label: string }>;
};

为每个 SOLUTION 数组项追加。suiteCombination 合理性：

manufacturing: products=[erp(生产调度), bi(质量看板), sds(库存优化)], services=[software(定制开发), consulting(咨询规划)]
retail: products=[erp, crm, bi], services=[software, solutions]
education: products=[cms, oa], services=[software, consulting]
healthcare: products=[erp, sds, bi], services=[software, consulting]
步骤 3：扩展 Services 数据

将 SERVICES 从 const 数组改为带 Service 类型的结构，增加字段：

interface Service {
  // ...现有字段保持不变...
  heroTheme: string;
  trustCases: Array<{
    industry: string;
    company: string;
    scope: string;
    outcome: string;
  }>;
  outcomeMetrics: Array<{ value: string; label: string }>;
}

每个 service 追加差异化数据。

步骤 4：验证编译并 Commit

运行：npx tsc --noEmit --pretty 预期：无错误

git add src/lib/constants/products.ts src/lib/constants/solutions.ts src/lib/constants/services.ts
git commit -m "feat(data): extend models with heroTheme, trustCase, suiteCombination, cross-ref fields"

任务 0.4: 创建 DetailHero 组件 (L1)

文件：

创建：src/components/detail/detail-hero.tsx
步骤 1：创建 DetailHero 组件

组件职责：

接收 theme: HeroTheme prop，动态渲染渐变背景 + 纹理叠加
支持 badge（如"企业旗舰"）、category、status 标签
渲染 title + description
内部 TextureOverlay 子组件根据 theme.texture.type 渲染不同背景图案：
- grid: CSS grid pattern
- data-flow: radial-gradient dots
- layers: vertical gradient strips
- shield-hex: hexagon mask pattern
- circuit: grid pattern (同grid)
- none: 不渲染
底部自动添加 fade-to-white 过渡条
使用 Framer Motion 入场动画
使用 useReducedMotion hook 降级

Props 接口：

interface DetailHeroProps {
  theme: HeroTheme;
  badge?: string;
  category?: string;
  status?: string;
  title: string;
  description: string;
  statusColor?: string;
  statusBg?: string;
}

步骤 2：验证编译并 Commit

git add src/components/detail/detail-hero.tsx
git commit -m "feat(detail): add DetailHero component with theme-based variation support"

任务 0.5: 创建信任证明 Section 组件 (L3)

文件：

创建：src/components/detail/trust-case-study.tsx
创建：src/components/detail/trust-data-proof.tsx
创建：src/components/detail/trust-certification.tsx
创建：src/components/detail/detail-trust-section.tsx
步骤 1：创建 TrustCaseStory 卡片组件

展示单个客户案例的完整故事：

顶部：行业 + 公司名称（带 Building2 图标）
三段式内容：面临挑战(Target icon) → 解决方案(Lightbulb icon) → 实施效果(TrendingUp icon)
底部：关键成效 metric 大字展示
使用 motion 动画入场
步骤 2：创建 TrustDataProof 指标网格组件

展示量化数据指标：

接收 metrics: Array<{value, label}>
3列网格展示，每格居中显示 value(大号粗体) + label(小号灰色)
可选 description 文字说明
逐个 staggered 动画入场
步骤 3：创建 TrustCertification 认证列表组件

展示认证资质：

接收 items: Array<{name, issuer, icon: 'shield'|'award'|'filecheck'}>
每项一行：图标 + 名称 + 颁发机构
使用 Lucide Shield/Award/FileCheck 图标映射
步骤 4：创建 DetailTrustSection 容器组件

组合上述子组件的容器：

接收 caseStudy/dataMetrics/dataDescription/certifications props
自动过滤空内容（如果所有 prop 都为空则不渲染）
统一标题："客户成功案例"，左侧竖线使用 theme.accentColor
内部按顺序排列 TrustCaseStudy > TrustDataProof > TrustCertification
步骤 5：验证编译并 Commit

git add src/components/detail/trust-case-study.tsx src/components/detail/trust-data-proof.tsx src/components/detail/trust-certification.tsx src/components/detail/detail-trust-section.tsx
git commit -m "feat(detail): add Layer 3 trust proof components (case study, data metrics, certification)"

任务 0.6: 创建 CTA + 交叉推荐组件 (L4)

文件：

创建：src/components/detail/cross-recommend-grid.tsx
创建：src/components/detail/detail-cta-section.tsx
步骤 1：创建 CrossRecommendGrid 组件

接收 CrossReference[]，渲染为卡片列表：

每张卡显示 type 标签（产品/解决方案/服务）+ title + reason
右侧 ArrowUpRight 图标
hover 效果：边框变色 + 背景色变化
使用 StaticLink 导航
步骤 2：创建 DetailCTASection 组件

组合行动按钮 + 交叉推荐：

主按钮（primaryLabel/Href）+ 可选次按钮 + 可选下载按钮
下方条件渲染 CrossRecommendGrid
顶部 border-t 分隔线
步骤 3：验证编译并 Commit

git add src/components/detail/cross-recommend-grid.tsx src/components/detail/detail-cta-section.tsx
git commit -m "feat(detail): add Layer 4 CTA section and cross-recommendation grid"

任务 0.7: 创建 L2 价值支撑 Section 组件（三种变体）

文件：

创建：src/components/detail/product-value-section.tsx
创建：src/components/detail/solution-value-section.tsx
创建：src/components/detail/service-value-section.tsx
步骤 1：创建 ProductValueSection

四个子区域，每个有独立 section heading + 图标：

核心功能 (Zap icon) — features 列表，2列网格，每项圆点+文字
产品优势 (Target icon) — benefits 列表，每项带浅色背景
技术规格 (Cpu icon) — specs 列表，2列网格
实施流程 (Layers icon) — process 步骤列表，带数字编号圆圈

步骤 2：创建 SolutionValueSection

三个子区域：

行业痛点 (AlertTriangle icon) — challenges 列表，每项带警告色背景
解决方案 (CheckCircle2 icon) — solutions 编号步骤列表
推荐产品组合 (Puzzle icon) — suiteCombination 展示：
- summary 描述文字
- products 以卡片形式展示（StaticLink 到 /products/{id}），显示 role 说明
- services 以 tag 形式展示（StaticLink 到 /services/{id}）

步骤 3：创建 ServiceValueSection

四个子区域：

您可能面临的挑战 (MessageSquare icon) — challenges 2列网格卡片
预期成果 (TrendingUp icon) — outcomeMetrics 3列大数字展示
服务范围 (Users icon) — features 2列网格
服务流程 (ClipboardList icon) — process 编号步骤列表

步骤 4：验证编译并 Commit

git add src/components/detail/product-value-section.tsx src/components/detail/solution-value-section.tsx src/components/detail/service-value-section.tsx
git commit -m "feat(detail): add Layer 2 value section components (product/solution/service variants)"

Phase 1: 产品体系重构

目标： 重构 Products 列表页（分区展示）+ 6 个产品详情页（四层叙事）

任务 1.1: 重构 Products 列表页 — 双区展示

文件：

修改：src/app/(marketing)/products/page.tsx
步骤 1：增加 suiteType state 和双区 Tab 切换

在页面主体区域增加两个大 Tab 按钮：「企业套装」和「专业产品」（专业产品 Tab 显示空状态占位）。企业套装 Tab 下保留现有的分类筛选（enterprise/growth/specialized）和 ProductCard 列表不变。

关键变更：

新增 const [activeTab, setActiveTab] = useState<'suite' | 'standalone'>('suite')
Tab 按钮样式：选中态品牌色底色 + 白色文字，未选中态透明底 + 灰色文字
专业产品空状态：居中显示「安全产品、行业特种软件、硬件产品即将推出」+ 「敬请期待」徽章
步骤 2：验证构建

运行：npm run build 2>&1 | head -30 预期：构建成功

步骤 3：Commit

git add src/app/\(marketing\)/products/page.tsx
git commit -m "refactor(products): restructure list page with suite/standalone partition"

任务 1.2: 重构产品详情页 — 四层叙事模板

文件：

重写：src/app/(marketing)/products/[id]/page.tsx
步骤 1：重写为四层叙事结构

新的页面结构（Server Component）：

DetailSwipeNav (保留现有)
  ↓
DetailHero (L1) ← theme = getHeroTheme(product.heroTheme)
  ↓
<div className="container-wide py-16">
  <div className="max-w-4xl mx-auto space-y-4">
    产品概述段落 (overview text)
    ↓
    ProductValueSection (L2) ← product + accentColor=theme.accentColor
    ↓
    DetailTrustSection (L3) ← caseStudy=product.trustCase
    ↓
    DetailCTASection (L4) ← primary="预约体验" /contact + crossRefs
  </div>
</div>

移除旧的 hero-section-v2 / cta-section / methodology-section 等旧组件引用。

步骤 2：验证构建 + 浏览器预览

运行：npm run dev & 后访问 http://localhost:3000/products/erp 预期：四层结构正确渲染，Hero 有深蓝色调，功能/优势/规格/流程清晰展示，案例卡片可见，CTA+交叉推荐可见

步骤 3：Commit

git add src/app/\(marketing\)/products/\[id\]/page.tsx
git commit -m "refactor(product-detail): rewrite with four-layer narrative (L1-L4)"

Phase 2: 解决方案体系重构

目标： 重构 Solutions 列表页 + 4 个方案详情页（四层叙事，重点展示套装组合）

任务 2.1: 重构 Solutions 列表页

文件：

修改：src/app/(marketing)/solutions/page.tsx
步骤 1：优化方案列表页

保留现有三模块结构（参谋伙伴/技术伙伴/同行伙伴），但增加每个方案卡片的"推荐套装"标签提示。点击方案卡片跳转至对应 /solutions/{id} 详情页。

步骤 2：验证构建并 Commit

git add src/app/\(marketing\)/solutions/page.tsx
git commit -m "refactor(solutions-list): enhance with suite combination hints"

任务 2.2: 重构方案详情页 — 四层叙事（Spoke 模式）

文件：

修改：src/app/(marketing)/solutions/[id]/page.tsx（SC，传递新数据）
重写：src/app/(marketing)/solutions/[id]/client.tsx（CC，四层渲染）
步骤 1：修改 page.tsx 传递新字段

在 generateMetadata 中保持不变。在 Client Component 传递中新增：

solution.suiteCombination
solution.trustData
relatedProducts（根据 relatedProducts ids 从 PRODUCTS 中查找完整对象）
theme={getHeroTheme(solution.heroTheme)}
crossRefs={getSolutionCrossRefs(solution.id)}
步骤 2：重写 client.tsx 为四层叙事结构

DetailHero (L1) ← solution theme (center layout)
  badge="解决方案" category=solution.industry
  title=solution.title subtitle=solution.subtitle
  ↓
<div className="container-wide py-16">
  <div className="max-w-4xl mx-auto space-y-4">
    方案概述 (description text)
    ↓
    SolutionValueSection (L2) ← challenges + solutions + suiteCombination + relatedProducts
      重点：推荐产品组合区展示产品卡片链接 + 配套服务 tags
    ↓
    DetailTrustSection (L3) ← dataMetrics=trustData.metrics + dataDescription=trustData.outcome
    ↓
    DetailCTASection (L4) ← primary="获取方案详情" /contact + crossRefs
  </div>
</div>

步骤 3：验证构建并 Commit

git add src/app/\(marketing\)/solutions/\[id\]/page.tsx src/app/\(marketing\)/solutions/\[id\]/client.tsx
git commit -m "refactor(solution-detail): rewrite with four-layer narrative and suite combination display"

Phase 3: 服务体系重构

目标： 重构 Services 列表页 + 4 个服务详情页（四层叙事）

任务 3.1: 重构 Services 列表页

文件：

修改：src/app/(marketing)/services/page.tsx
步骤 1：优化服务列表页

保留现有服务卡片展示结构，确保每个卡片链接到 /services/{id} 详情页。可微调卡片视觉使其与新的四层详情页风格协调。

步骤 2：验证并 Commit

git add src/app/\(marketing\)/services/page.tsx
git commit -m "refactor(services-list): align visual style with new detail pages"

任务 3.2: 重构服务详情页 — 四层叙事

文件：

修改：src/app/(marketing)/services/[id]/page.tsx（SC，类型安全）
重写：src/app/(marketing)/services/[id]/client.tsx（CC，四层渲染）
步骤 1：修改 page.tsx 增强类型安全

将 service 数据从 const 断言改为 Service 类型，传递新字段：heroTheme/trustCases/outcomeMetrics/theme/crossRefs。

步骤 2：重写 client.tsx 为四层叙事结构

DetailHero (L1) ← service theme (icon-left layout)
  category=service.title (作为副标题)
  title=service.overview 截取首句
  description=service.description
  ↓
<div className="container-wide py-16">
  <div className="max-w-4xl mx-auto space-y-4">
    ServiceValueSection (L2) ←
      challenges: 从 features 反推或内置默认挑战集
      outcomes: outcomeMetrics
      features: features
      process: process
    ↓
    DetailTrustSection (L3) ← 多个 trustCases (取前2个) + outcomeMetrics
    ↓
    DetailCTASection (L4) ← primary="咨询服务" /contact + crossRefs
  </div>
</div>

ServiceValueSection 的 challenges 数据来源：从 service.features 或内置默认挑战映射生成。

步骤 3：验证构建并 Commit

git add src/app/\(marketing\)/services/\[id\]/page.tsx src/app/\(marketing\)/services/\[id\]/client.tsx
git commit -m "refactor(service-detail): rewrite with four-layer narrative structure"

Phase 4: 导航与跨系统集成

目标： 更新 MegaDropdown 适配 Products 分区 + 全局一致性检查

任务 4.1: 更新 MegaDropdown 支持分组展示

文件：

修改：src/components/layout/mega-dropdown.tsx
修改：src/lib/constants/navigation.ts
步骤 1：扩展 MegaDropdownItem 接口支持分组

在 MegaDropdownItem 中增加可选字段：group?: string

步骤 2：更新 MEGA_DROPDOWN_DATA.products 为分组数据

将 products 下拉项分为两组：

组1: "企业旗舰系列" — erp/crm/bi/cms/sds/oa（6项）
组2: "专业产品" — security/industry/hardware（3项，status="即将推出"）
步骤 3：修改 MegaDropdown 组件渲染分组

当 items 含 group 字段时，按 group 分组渲染，每组带组标题（小字灰色）。组间用分隔线隔开。

步骤 4：验证编译并 Commit

git add src/components/layout/mega-dropdown.tsx src/lib/constants/navigation.ts
git commit -m "feat(nav): update mega-dropdown to support grouped product display (suite vs standalone)"

任务 4.2: 创建独立产品空模板

文件：

创建：src/app/(marketing)/templates/standalone-product.tsx
步骤 1：创建独立产品详情页模板

这是一个完整的、可直接复制使用的页面模板，供未来安全/行业特种/硬件产品使用。模板包含：

完整的四层叙事结构
占位符文案（标注 TODO 替换）
security 主题的 Hero 示例
StandaloneValueSection 占位（特性对比表格 + 技术参数表）
空的 trust/cta 区域示例
注释说明如何定制
步骤 2：Commit

git add src/app/\(marketing\)/templates/standalone-product.tsx
git commit -m "feat(template): add standalone product detail page template for future security/industry/hardware products"

Phase 5: 全量验证与收尾

目标： 构建验证 + 全页面走查 + 最终提交

任务 5.1: 全量构建验证

步骤 1：运行全量构建

运行：npm run build 2>&1 | tail -40 预期：✓ Build successful，无 error/warning

步骤 2：运行 lint 检查

运行：npm run lint 2>&1 | tail -20 预期：无 error

步骤 3：运行 TypeScript 类型检查

运行：npx tsc --noEmit --pretty 2>&1 | tail -20 预期：0 errors

任务 5.2: 页面走查清单

逐页访问以下 URL 并确认四层结构完整性：

#	URL	L1 Hero色调	L2 内容	L3 案例	L4 交叉推荐
1	`/products/erp`	深蓝 #1e3a5f	功能×6/优势×4/规格×6/流程×6	装备制造案例	制造业+医疗方案+BI
2	`/products/crm`	关系蓝 #1e40af	同上结构	连锁零售案例	零售方案+ERP+BI
3	`/products/bi`	数据蓝 #0c4a6e	同上结构	三甲医院案例	制造业+零售+医疗方案
4	`/products/cms`	内容绿 #14532d	同上结构	高校案例	教育方案+OA
5	`/products/sds`	供应链橙 #78350f	同上结构	连锁商超案例	零售方案+ERP+BI
6	`/products/oa`	协同紫 #4c1d95	同上结构	城商行案例	教育方案+CMS
7	`/solutions/manufacturing`	默认暗 #1c1917	痛点×4/方案×4/组合(ERP+BI+SDS)	3个指标	ERP+BI+SDS产品
8	`/solutions/retail`	默认暗 #1c1917	痛点×4/方案×4/组合(ERP+CRM+BI)	3个指标	ERP+CRM+BI产品
9	`/solutions/education`	默认暗 #1c1917	痛点×4/方案×4/组合(CMS+OA)	3个指标	CMS+OA产品
10	`/solutions/healthcare`	默认暗 #1c1917	痛点×4/方案×4/组合(ERP+SDS+BI)	3个指标	ERP+SDS+BI产品
11	`/services/software`	标准 #1e293b	挑战×N/成果×3/范围×5/流程×6	2个案例	制造业+零售方案
12	`/services/data`	标准 #1e293b	同上结构	2个案例	3个方案
13	`/services/consulting`	标准 #1e293b	同上结构	2个案例	制造业+教育方案
14	`/services/solutions`	标准 #1e293b	同上结构	2个案例	全部4个方案
15	`/products` (列表)	N/A	双区Tab正常	N/A	N/A
16	`/solutions` (列表)	N/A	3模块展示	N/A	N/A
17	`/services` (列表)	N/A	4卡片展示	N/A	N/A

四、执行依赖关系图

graph TD
    P0_1["0.1 Hero 主题系统"] --> P0_4["0.4 DetailHero 组件"]
    P0_2["0.2 交叉引用"] --> P0_6["0.6 CTA+交叉推荐"]
    P0_3["0.3 扩展数据模型"] --> P1_2["1.2 产品详情页"]
    P0_3 --> P2_2["2.2 方案详情页"]
    P0_3 --> P3_2["3.2 服务详情页"]
    P0_4 --> P1_2
    P0_4 --> P2_2
    P0_4 --> P3_2
    P0_5["0.5 信任证明 L3"] --> P1_2
    P0_5 --> P2_2
    P0_5 --> P3_2
    P0_6 --> P1_2
    P0_6 --> P2_2
    P0_6 --> P3_2
    P0_7["0.7 价值支撑 L2"] --> P1_2
    P0_7 --> P2_2
    P0_7 --> P3_2

    P1_1["1.1 产品列表页"] -.-> P1_2
    P1_2 --> P5_1["5.1 全量验证"]

    P2_1["2.1 方案列表页"] -.-> P2_2
    P2_2 --> P5_1

    P3_1["3.1 服务列表页"] -.-> P3_2
    P3_2 --> P5_1

    P4_1["4.1 MegaDropdown"] --> P5_1
    P4_2["4.2 独立产品模板"] --> P5_1
    P5_1 --> P5_2["5.2 页面走查"]

    style P0_1 fill:#FEF2F4,stroke:#C41E3A
    style P0_2 fill:#FEF2F4,stroke:#C41E3A
    style P0_3 fill:#FEF2F4,stroke:#C41E3A
    style P0_4 fill:#EFF6FF,stroke:#2563EB
    style P0_5 fill:#F0FDF4,stroke:#16A34A
    style P0_6 fill:#FAF5FF,stroke:#7C3AED
    style P0_7 fill:#FEF9C3,stroke:#CA8A04
    style P1_1 fill:#DCFCE7,stroke:#16A34A
    style P1_2 fill:#DCFCE7,stroke:#16A34A
    style P2_1 fill:#DBEAFE,stroke:#2563EB
    style P2_2 fill:#DBEAFE,stroke:#2563EB
    style P3_1 fill:#FAE8FF,stroke:#7C3AED
    style P3_2 fill:#FAE8FF,stroke:#7C3AED
    style P4_1 fill:#FEE2E2,stroke:#DC2626
    style P4_2 fill:#FEF3C7,stroke:#CA8A04
    style P5_1 fill:#E5E7EB,stroke:#6B7280
    style P5_2 fill:#D1D5DB,stroke:#4B5563

并行执行建议：

Wave 1（必须串行）： 任务 0.1 → 0.2 → 0.3 → 0.4 → 0.5 → 0.6 → 0.7（Phase 0 全部完成）
Wave 2（可并行）： 任务 1.1+2.1+3.1（三个列表页可并行）+ 任务 4.1+4.2（导航+模板可并行）
Wave 3（可并行）： 任务 1.2 + 2.2 + 3.2（三个详情页可并行）
Wave 4（串行）： 任务 5.1 → 5.2（最终验证）

五、风险与注意事项

风险	影响	缓解措施
Hero 深色渐变在 light mode 下对比度不足	无障碍合规问题	所有文字使用纯白(#FFF)，确保 WCAG AA
trustCase 数据为虚构	SEO/可信度影响	在页面 meta 中标注"代表性案例"，真实案例后续替换
MegaDropdown 分组后宽度不够	UI 挤压	将 dropdown width 从 520px 扩展到 600px
17 个页面同时改动回归风险	功能回退	每个任务独立 commit，支持 git bisect 回退

34 KiB Raw Blame History Unescape Escape

HSI 架构 + 四层叙事模型全量重构实施计划

一、架构总览

1.1 目标信息架构

1.2 四层叙事模型

1.3 Hero 变化策略

二、文件结构

2.1 新建文件清单

2.2 修改文件清单

三、实施阶段与任务

Phase 0: 基础设施 — 数据模型 + Hero 主题系统 + Section 组件库

任务 0.1: 创建 Hero 主题系统

任务 0.2: 创建交叉引用数据

任务 0.3: 扩展数据模型（Product/Solution/Service）

任务 0.4: 创建 DetailHero 组件 (L1)

任务 0.5: 创建信任证明 Section 组件 (L3)

任务 0.6: 创建 CTA + 交叉推荐组件 (L4)

任务 0.7: 创建 L2 价值支撑 Section 组件（三种变体）

Phase 1: 产品体系重构

任务 1.1: 重构 Products 列表页 — 双区展示

任务 1.2: 重构产品详情页 — 四层叙事模板

Phase 2: 解决方案体系重构

任务 2.1: 重构 Solutions 列表页

任务 2.2: 重构方案详情页 — 四层叙事（Spoke 模式）

Phase 3: 服务体系重构

任务 3.1: 重构 Services 列表页

任务 3.2: 重构服务详情页 — 四层叙事

Phase 4: 导航与跨系统集成

任务 4.1: 更新 MegaDropdown 支持分组展示

任务 4.2: 创建独立产品空模板

Phase 5: 全量验证与收尾

任务 5.1: 全量构建验证

任务 5.2: 页面走查清单

四、执行依赖关系图

五、风险与注意事项

34 KiB

Raw Blame History