docs: 更新决策记录与实施计划
- CONTEXT.md添加9项新决策(HSI架构/水墨雅致/L3策略等) - ADR: HSI架构与四层叙事模型决策记录 - 实施计划: IHG设计对齐详细任务分解
This commit is contained in:
张翔
@@ -0,0 +1,118 @@
|
||||
# ADR 0002: 信息架构与叙事模型——HSI 混合架构 + 四层叙事模型
|
||||
|
||||
## 状态
|
||||
|
||||
已接受
|
||||
|
||||
## 日期
|
||||
|
||||
2026-05-26
|
||||
|
||||
## 上下文
|
||||
|
||||
Novalon 网站当前的信息架构为 Products / Solutions / Services 三者**平级并列**，各详情页采用相似的"标题→列表→CTA"扁平结构。参考 IHG 洲际酒店集团官网（集团枢纽 + 各品牌独立叙事）的设计模式，需要决定：
|
||||
|
||||
1. 三者的关系是保持平级还是重构为层级？
|
||||
2. 详情页如何从"模板套用"升级为"分层叙事"？
|
||||
3. 产品线包含企业套装（6个互补产品）和独立产品（安全/硬件/特种软件），如何统一架构？
|
||||
|
||||
## 决策
|
||||
|
||||
### 1. 信息架构：HSI 混合模型（Hub-Spoke-Independent）
|
||||
|
||||
```
|
||||
Novalon 官网 (Hub)
|
||||
├── /solutions (Spoke — 行业场景入口)
|
||||
│ └── 每个方案 = 行业痛点 → 推荐套装组合 + 服务包
|
||||
├── /products (Hub — 产品目录)
|
||||
│ ├── 企业套装区：ERP / CRM / BI / CMS / SDS / OA
|
||||
│ └── 专业产品区：安全 / 行业特种 / 硬件（近期规划）
|
||||
└── /services (支撑层)
|
||||
└── 被 Solutions 和 Products 双向引用
|
||||
```
|
||||
|
||||
**核心原则**：
|
||||
- Solutions 做"场景入口"——知道行业的用户从这里进
|
||||
- Products 做"产品目录"——知道要什么的用户从这里进，内部分区
|
||||
- Services 做"能力证明"——同时被前两者引用
|
||||
- 详情页之间有交叉推荐链接（方案↔产品↔服务）
|
||||
|
||||
### 2. 叙事结构：四层模型（全类型页面统一）
|
||||
|
||||
| 层 | 职责 | 用户心理问题 |
|
||||
|---|------|-------------|
|
||||
| L1 Hero | 情感入口 | "这是什么？我感兴趣吗？" |
|
||||
| L2 价值支撑 | 理性理由 | "为什么选你们？" |
|
||||
| L3 信任证明 | 消除顾虑 | "别人用了怎么样？" |
|
||||
| L4 CTA | 行动指引 | "下一步做什么？" |
|
||||
|
||||
每种页面类型的四层内容各有侧重（详见 CONTEXT.md "页面类型与四层映射"章节）。
|
||||
|
||||
### 3. 视觉策略：统一品牌 + Hero 有限变化
|
||||
|
||||
- 全站 Header / Footer / Breadcrumb / 设计令牌不变
|
||||
- Hero 区域允许三类变化：色调 + 背景纹理 + 布局微调
|
||||
- 不创建独立子品牌或子站点
|
||||
|
||||
## 备选方案
|
||||
|
||||
### 方案 A：产品即品牌（视觉分裂模式）
|
||||
- 每个产品像 IHG 酒店品牌一样拥有独立的视觉 identity 和子站感
|
||||
- **优点**：每个产品记忆点强
|
||||
- **缺点**：
|
||||
- Novalon 产品客群高度重叠，不需要视觉分裂来区分
|
||||
- 工程复杂度高（每产品独立模板/设计令牌）
|
||||
- 维护成本高（新产品 = 新设计）
|
||||
- SEO 内部链接主题一致性受损
|
||||
- **否决原因**：业务逻辑不匹配（产品互补非竞争），工程成本过高
|
||||
|
||||
### 方案 B：纯层级（Solutions 包含 Products）
|
||||
- Solutions 作为唯一主入口，Products 和 Services 作为其子内容
|
||||
- **优点**：信息架构简单清晰
|
||||
- **缺点**：
|
||||
- 独立产品（安全/硬件）无法自然归入任何行业方案
|
||||
- 已知客户也会直接搜索具体产品名，需要独立产品入口
|
||||
- 过度强制层级关系导致信息查找路径变长
|
||||
- **否决原因**：独立产品的存在打破了纯层级假设
|
||||
|
||||
### 方案 C：保持平级优化（仅加深内容）
|
||||
- 保持当前三者平级结构，只改善详情页的内容深度
|
||||
- **优点**：改动最小
|
||||
- **缺点**：
|
||||
- 错失了 IHG 模式最有价值的"组合叙事"机会
|
||||
- 方案页无法有效展示"制造业方案 = ERP+BI+SDS+服务"
|
||||
- 用户在三个平行入口间缺乏引导逻辑
|
||||
- **否决原因**：信息架构层面的根本问题未解决
|
||||
|
||||
## 理由
|
||||
|
||||
选择 HSI + 四层模型的核心论据：
|
||||
|
||||
1. **业务匹配度最优**：企业套装的互补关系通过 Solutions 的"组合叙事"体现，独立性产品通过 Products 的分区自然容纳
|
||||
2. **工程效率平衡**：统一的四层组件系统可复用，Hero 变化策略在可控范围内提供差异化
|
||||
3. **SEO 友好**：统一品牌信号强，内部交叉链接网络紧密且语义一致
|
||||
4. **可扩展性**：新增套装产品只需编排现有 section 组件；新增独立产品只需使用专业产品区模板
|
||||
5. **参考 IHG 但不照搬**：借鉴其"集团枢纽+独立叙事"的思维，而非视觉风格
|
||||
|
||||
## 后果
|
||||
|
||||
### 正面
|
||||
- 信息架构清晰支持两类用户路径（场景驱动 vs 产品驱动）
|
||||
- 详情页从"规格表"升级为"叙事页"，转化潜力提升
|
||||
- 新增产品的边际成本低（组件复用 + 内容编排）
|
||||
- 全站品牌一致性保持完整
|
||||
|
||||
### 负面
|
||||
- 首次实现工作量大：14 个详情页全部重构 + 新增 L3 信任证明层内容
|
||||
- Hero 变化策略需要设计和前端协同定义变化规则集
|
||||
- 需要为目前缺失的 L3 层（案例/评价/认证）准备内容素材
|
||||
|
||||
### 风险
|
||||
- 如果 L3 信任证明层缺乏真实内容填充，可能变成空壳 section
|
||||
- Hero 变化如果过度执行，可能破坏"水墨雅致"的品牌一致性认知
|
||||
- 缓解措施：先建立 Hero 变化的设计规范（色板/纹理库/布局模式），限制在预定义范围内
|
||||
|
||||
## 相关决策
|
||||
|
||||
- ADR-0001: 重构路径选择——混合方案而非全站 web-design-engineer 替换（本 ADR 在其框架下进一步细化了信息架构和页面结构）
|
||||
- CONTEXT.md: HSI 架构、四层叙事模型、Hero 变化策略等术语的完整定义
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,934 @@
|
||||
# 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](../CONTEXT.md) | [ADR-0002](../../adr/0002-hsi-architecture-four-layer-narrative.md)
|
||||
|
||||
---
|
||||
|
||||
## 一、架构总览
|
||||
|
||||
### 1.1 目标信息架构
|
||||
|
||||
```mermaid
|
||||
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 四层叙事模型
|
||||
|
||||
```mermaid
|
||||
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 变化策略
|
||||
|
||||
```mermaid
|
||||
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**
|
||||
|
||||
```bash
|
||||
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`
|
||||
预期：无错误
|
||||
|
||||
```bash
|
||||
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 接口末尾追加两个字段：
|
||||
```typescript
|
||||
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 接口末尾追加三个字段：
|
||||
```typescript
|
||||
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 类型的结构，增加字段：
|
||||
```typescript
|
||||
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`
|
||||
预期：无错误
|
||||
|
||||
```bash
|
||||
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 接口：
|
||||
```typescript
|
||||
interface DetailHeroProps {
|
||||
theme: HeroTheme;
|
||||
badge?: string;
|
||||
category?: string;
|
||||
status?: string;
|
||||
title: string;
|
||||
description: string;
|
||||
statusColor?: string;
|
||||
statusBg?: string;
|
||||
}
|
||||
```
|
||||
|
||||
- [ ] **步骤 2：验证编译并 Commit**
|
||||
|
||||
```bash
|
||||
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**
|
||||
|
||||
```bash
|
||||
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**
|
||||
|
||||
```bash
|
||||
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 + 图标：
|
||||
1. **核心功能** (Zap icon) — features 列表，2列网格，每项圆点+文字
|
||||
2. **产品优势** (Target icon) — benefits 列表，每项带浅色背景
|
||||
3. **技术规格** (Cpu icon) — specs 列表，2列网格
|
||||
4. **实施流程** (Layers icon) — process 步骤列表，带数字编号圆圈
|
||||
|
||||
- [ ] **步骤 2：创建 SolutionValueSection**
|
||||
|
||||
三个子区域：
|
||||
1. **行业痛点** (AlertTriangle icon) — challenges 列表，每项带警告色背景
|
||||
2. **解决方案** (CheckCircle2 icon) — solutions 编号步骤列表
|
||||
3. **推荐产品组合** (Puzzle icon) — suiteCombination 展示：
|
||||
- summary 描述文字
|
||||
- products 以卡片形式展示（StaticLink 到 /products/{id}），显示 role 说明
|
||||
- services 以 tag 形式展示（StaticLink 到 /services/{id}）
|
||||
|
||||
- [ ] **步骤 3：创建 ServiceValueSection**
|
||||
|
||||
四个子区域：
|
||||
1. **您可能面临的挑战** (MessageSquare icon) — challenges 2列网格卡片
|
||||
2. **预期成果** (TrendingUp icon) — outcomeMetrics 3列大数字展示
|
||||
3. **服务范围** (Users icon) — features 2列网格
|
||||
4. **服务流程** (ClipboardList icon) — process 编号步骤列表
|
||||
|
||||
- [ ] **步骤 4：验证编译并 Commit**
|
||||
|
||||
```bash
|
||||
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**
|
||||
|
||||
```bash
|
||||
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**
|
||||
|
||||
```bash
|
||||
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**
|
||||
|
||||
```bash
|
||||
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**
|
||||
|
||||
```bash
|
||||
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**
|
||||
|
||||
```bash
|
||||
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**
|
||||
|
||||
```bash
|
||||
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**
|
||||
|
||||
```bash
|
||||
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**
|
||||
|
||||
```bash
|
||||
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 |
|
||||
|
||||
---
|
||||
|
||||
## 四、执行依赖关系图
|
||||
|
||||
```mermaid
|
||||
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 回退 |
|
||||
@@ -0,0 +1,602 @@
|
||||
# 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 同步更新
|
||||
Reference in New Issue
Block a user