From b1f3a395ca9f2124ca1c2e790ac25bb2d22fa411 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E7=BF=94?= Date: Sun, 7 Jun 2026 16:21:29 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=E5=86=B3=E7=AD=96?= =?UTF-8?q?=E8=AE=B0=E5=BD=95=E4=B8=8E=E5=AE=9E=E6=96=BD=E8=AE=A1=E5=88=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - CONTEXT.md添加9项新决策(HSI架构/水墨雅致/L3策略等) - ADR: HSI架构与四层叙事模型决策记录 - 实施计划: IHG设计对齐详细任务分解 --- CONTEXT.md | 94 +- ...2-hsi-architecture-four-layer-narrative.md | 118 ++ .../plans/2026-01-26-v3-full-rollout.md | 1121 +++++++++++++++++ ...05-26-hsi-four-layer-narrative-refactor.md | 934 ++++++++++++++ .../plans/2026-06-07-ihg-design-alignment.md | 602 +++++++++ 5 files changed, 2867 insertions(+), 2 deletions(-) create mode 100644 docs/adr/0002-hsi-architecture-four-layer-narrative.md create mode 100644 docs/superpowers/plans/2026-01-26-v3-full-rollout.md create mode 100644 docs/superpowers/plans/2026-05-26-hsi-four-layer-narrative-refactor.md create mode 100644 docs/superpowers/plans/2026-06-07-ihg-design-alignment.md diff --git a/CONTEXT.md b/CONTEXT.md index 7b6c66e..1875dc3 100644 --- a/CONTEXT.md +++ b/CONTEXT.md @@ -15,6 +15,47 @@ Novalon 的整体设计风格定位。核心原则：以留白和排版取胜， ### 朱砂点睛 品牌红 #C41E3A 的使用原则——仅作点缀，不作为主色调。标题中关键词用 font-calligraphy 突出。 +### HSI 架构 (Hub-Spoke-Independent) +Novalon 网站的信息架构模型，参考 IHG 洲际酒店集团官网模式设计。三层结构： +- **Hub（枢纽）**：`/products` 产品目录作为统一入口，内部分为"企业套装区"和"专业产品区" +- **Spoke（辐条）**：`/solutions` 解决方案作为行业场景入口，每个方案页面以"推荐套装组合 + 服务包"为核心叙事 +- **Independent（独立）**：独立产品（安全/行业特种/硬件）在 Products 的专业产品区内拥有独立展示路径，不强制绑定特定解决方案 + +决策状态：✅ 2026-05-26 确认，见 ADR-0002 + +### 四层叙事模型 (Four-Layer Narrative) +所有详情页（产品/方案/服务/独立产品）统一采用的分层内容架构： +- **Layer 1 Hero（情感入口）**：大视觉 + 标题 + 一句话价值主张 + 状态标签。支持色调+背景+布局的有限变化 +- **Layer 2 价值理性支撑**：按页面类型差异化——产品页展示功能模块与优势，方案页展示痛点→架构→组合，服务页展示挑战→成果→流程 +- **Layer 3 信任证明**：案例故事、数据佐证、认证资质、客户评价。当前状态：**全新层，现有页面完全缺失** +- **Layer 4 CTA 转化**：主行动 + 次行动 + 交叉推荐（方案↔产品↔服务双向链接） + +决策状态：✅ 2026-05-26 确认 + +### Hero 变化策略 (Hero Variation Strategy) +详情页 Hero 区域的视觉差异化策略。在保持"水墨雅致"统一品牌的前提下，允许三类变化： +- **色调变化**：不同产品/方案/服务使用不同的主色调或渐变方向 +- **背景纹理**：ERP 用几何网格、BI 用数据流线条、安全产品用盾牌纹样等语义化背景图案 +- **布局微调**：文字位置、元素排列可有小幅差异（左对齐/居中/右对齐等） + +约束：Header / Footer / Breadcrumb / 设计令牌全站不变，仅 Hero 区内变化 + +决策状态：✅ 2026-05-26 确认（选型 C：色调+背景+布局） + +### 企业套装 (Enterprise Suite) +Novalon 的 6 个核心产品，互为互补关系，常以组合形式出现在解决方案中： +- ERP 睿新管理系统、CRM 客户管理、BI 数据平台、CMS 内容平台、SDS 供应链决策、OA 协同办公 + +目标客群高度重叠（中大型企业），客户可能同时购买多个套装产品。 + +### 专业产品 (Standalone Products) +自成体系、不一定依赖企业套装的独立产品线： +- 安全产品（堡垒机/漏扫/零信任等） +- 行业特种软件 +- 硬件产品 + +当前状态：近期有规划，需在本次重构中预留完整的模板体系 + ### 特效组件 (Effects) `src/components/effects/` 目录下的 24 个视觉特效组件。当前状态：**大部分未被首页使用**，属于技术债务。 @@ -25,14 +66,63 @@ Novalon 的整体设计风格定位。核心原则：以留白和排版取胜， | 术语 | 含义 | 决策状态 | |------|------|---------| -| 重构范围 | 保持 5 个 section 不变，聚焦质量提升 | ✅ 已确认 | +| 信息架构 | HSI 混合模型（Hub-Spoke-Independent），非纯层级也非纯平级 | ✅ 2026-05-26 确认 | +| 视觉策略 | 统一品牌"水墨雅致"为底，Hero 区域支持色调+背景+布局变化 | ✅ 2026-05-26 确认 | +| 叙事结构 | 四层模型（Hero → 价值支撑 → 信任证明 → CTA），全类型页面统一 | ✅ 2026-05-26 确认 | +| 实施范围 | 全量落地：6产品 + 4方案 + 4服务全部重构，独立产品预留空模板 | ✅ 2026-05-26 确认 | +| 重构范围 | 保持 Next.js App Router 架构不变，不更换技术栈 | ✅ 已确认（ADR-0001） | | 特效取舍 | 逐个评估 24 个特效组件，决定保留/改造/删除 | ✅ 已确认 | -| Hero 视觉方向 | 先用原型对比再决定（排版驱动 vs 墨韵背景 vs 中间路线） | ✅ 已确认 | +| 首页 Hero 视觉方向 | 先用原型对比再决定（排版驱动 vs 墨韵背景 vs 中间路线） | ✅ 已确认 | | web-design-engineer 定位 | 仅用于 Hero 原型验证，不用于全站重构 | ✅ 已确认 | | 运营状态 | 未正式上线，重构风险可控 | ✅ 已确认 | +| 产品分类对齐 | 代码中 `enterprise`/`growth`/`specialized` 三分类与 CONTEXT.md 矛盾；统一为"企业套装区"（6核心产品）+ "专业产品区"（独立产品），删除 `growth` 分类 | ✅ 2026-06-07 确认 | +| 解决方案 L3 信任层 | 需补上 `SolutionTrustSection`，但初创阶段案例数据不足，标记为 TODO；空数据时显示"更多案例即将发布"而非空白 | ✅ 2026-06-07 确认（TODO） | +| 独立产品组件统一 | 独立产品从 V1 组件迁移到 V2/V3 组件体系，通过 hero-themes 差异化（深色调、技术纹理、参数化布局）体现"硬核"风格，不维护独立设计系统；V1 组件迁移完成后删除 | ✅ 2026-06-07 确认 | +| 方案列表页组合叙事 | 解决方案卡片需展示"推荐组合"（如制造业=ERP+BI+SDS），让用户一眼看出方案=产品组合，体现 IHG Spoke→Hub 连接 | ✅ 2026-06-07 确认 | +| Hero 视觉方向修正 | 当前深色渐变风格偏离"水墨雅致"品牌定位，需转向浅色/宣纸色底、深色文字、品牌色点缀；通过 web-design-engineer skill 做原型验证后再落地 | ✅ 2026-06-07 确认 | +| 导航体现 HSI 层级 | Products（Hub）视觉权重最高，Solutions（Spoke）次之，Services 最轻；Products 下拉菜单需展示套装区/专业产品区分区 | ✅ 2026-06-07 确认 | +| 方案页删除服务方式区域 | Solutions 列表页"服务方式"区域职责越界（属 Services 层），应删除；替换为方案→服务的轻量关联推荐链接 | ✅ 2026-06-07 确认 | +| L3 信任层内容策略 | 初创阶段无真实案例/数据/资质，L3 暂不渲染；组件结构预留，数据就绪后启用。三档策略：有案例→正常展示；有意向→"正在服务中"标签；无数据→不显示 L3。当前全部标记为 TODO | ✅ 2026-06-07 确认（TODO） | +| 组件版本统一 | 独立产品迁移后删除 `detail/`（V1），将 `detail-v2/` 重命名为 `detail/`，组件文件名去掉版本后缀（如 `DetailHeroV3` → `DetailHero`） | ✅ 2026-06-07 确认 | + +## 页面类型与四层映射 + +### 套装产品详情页 (`/products/[id]`) +| 层 | 内容要点 | +|---|---------| +| L1 Hero | 产品名 + 分类 + 状态 + 定位语 + 有限视觉变化（如深蓝调性） | +| L2 价值 | 核心功能模块 + 产品优势 + 技术规格 + 适用场景 | +| L3 信任 | 适用行业案例 + 痛点→产品如何解决的故事 | +| L4 CTA | 预约体验 + 下载资料 + "使用此产品的客户也关注了 XX 方案" | + +### 解决方案详情页 (`/solutions/[id]`) +| 层 | 内容要点 | +|---|---------| +| L1 Hero | 行业名 + 方案标题 + 副标题 + 行业氛围视觉 | +| L2 价值 | 行业痛点 → 方案架构图 → 推荐套装组合（核心差异点） | +| L3 信任 | 同行业标杆客户案例 + 实施效果数据 | +| L4 CTA | 预约演示 + 下载白皮书 + 相关产品深度卡片 | + +### 服务详情页 (`/services/[id]`) +| 层 | 内容要点 | +|---|---------| +| L1 Hero | 服务名 + 定位语 + 服务范围标签 | +| L2 价值 | 挑战→成果 KPI + 服务流程可视化 + 团队/方法论 | +| L3 信任 | 服务案例 + 客户评价 + SLA 承诺 | +| L4 CTA | 咨询服务 + 相关方案推荐 | + +### 独立产品详情页 (`/products/[id]` — 专业产品区) +| 层 | 内容要点 | 特殊之处 | +|---|---------|---------| +| L1 Hero | 产品名 + 类别标签 + 独立视觉调性 | 更"硬核"风格 | +| L2 价值 | 功能特性 + 技术参数 + 对比优势 | 偏技术/参数导向 | +| L3 信任 | 认证资质（等保/行业标准）+ 部署案例 + 性能数据 | 合规证明优先 | +| L4 CTA | 申请试用/演示 + 技术文档 + 可搭配套装推荐 | 不绑定特定方案 | ## 歧义已解决 - **"重构"≠ 推倒重来**：在现有 Next.js 架构内做系统性清理和提升，不更换技术栈 - **"web-design-engineer"≠ 代码生成器**：它是设计验证工具，产出原型 HTML，不是最终代码 - **"克制动效"≠ 零动效**：动效服务于信息传达（hover 反馈、scroll reveal、卡片交互），但不做装饰性粒子/水墨动画 +- **"参考 IHG"≠ 视觉模仿 IHG**：借鉴的是 IHG 的信息架构思维（集团枢纽 + 品牌独立叙事），而非其视觉风格。Novalon 保持"水墨雅致"自身品牌语言 +- **"产品独立"≠ 子站分裂**：独立产品有独立的展示空间和叙事自由度，但不创建独立子域名或独立设计系统 diff --git a/docs/adr/0002-hsi-architecture-four-layer-narrative.md b/docs/adr/0002-hsi-architecture-four-layer-narrative.md new file mode 100644 index 0000000..66203bb --- /dev/null +++ b/docs/adr/0002-hsi-architecture-four-layer-narrative.md @@ -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 变化策略等术语的完整定义 diff --git a/docs/superpowers/plans/2026-01-26-v3-full-rollout.md b/docs/superpowers/plans/2026-01-26-v3-full-rollout.md new file mode 100644 index 0000000..a71e999 --- /dev/null +++ b/docs/superpowers/plans/2026-01-26-v3-full-rollout.md @@ -0,0 +1,1121 @@ +# V3设计系统全量应用实施计划 + +> **面向 AI 代理的工作者：** 必需子技能：使用 superpowers:subagent-driven-development（推荐）或 superpowers:executing-plans 逐任务实现此计划。步骤使用复选框（`- [ ]`）语法来跟踪进度。 + +**目标：** 将ERP V3深度精细化设计系统（L1-L5全层次）应用到网站所有17个详情页和列表页，实现统一的现代东方美学视觉体验。 + +**架构：** 基于已完成的ERP V3原型，采用组件化升级策略： +- **V3核心组件库**：DetailHeroV3、ProductValueSectionV3、DetailTrustSectionV2、DetailCTASectionV2 +- **微交互系统**：TiltCard、PressableButton、InkGlowCard +- **品牌印记系统**：BrandSeal、CalligraphyText、InkDivider +- **分阶段推进**：先建通用组件 → 再批量升级页面 → 最后统一验证 + +**技术栈：** Next.js 14 App Router + TypeScript + Framer Motion + Tailwind CSS + Lucide Icons + +--- + +## 📋 页面清单与优先级 + +### ✅ 已完成（标杆页面） +- [x] ERP产品页 V3原型 (`/products/erp-upgrade-v3`) + +### 📦 待升级页面（17个） + +#### **产品详情页（5个）** +| 产品ID | 标题 | 当前路径 | HeroTheme | +|--------|------|----------|-----------| +| crm | 睿新客户关系管理系统 | `/products/crm` | crm | +| cms | 睿新内容管理系统 | `/products/cms` | cms | +| bi | 睿新商业智能平台 | `/products/bi` | bi | +| sds | 睿新供应链决策支持系统 | `/products/sds` | sds | +| oa | 睿新协同办公系统 | `/products/oa` | oa | + +#### **解决方案详情页（4个）** +| 方案ID | 标题 | 当前路径 | +|--------|------|----------| +| manufacturing | 智能制造解决方案 | `/solutions/manufacturing` | +| retail | 零售数字化解决方案 | `/solutions/retail` | +| finance | 金融科技解决方案 | `/solutions/finance` | +| government | 政务数字化转型 | `/solutions/government` | + +#### **服务详情页（4个）** +| 服务ID | 标题 | 当前路径 | +|--------|------|----------| +| software | 软件开发 | `/services/software` | +| consulting | 数字化转型咨询 | `/services/consulting` | +| data-intelligence | 数据智能服务 | `/services/data-intelligence` | +| technical-support | 技术支持服务 | `/services/technical-support` | + +#### **列表页（3个）** +| 页面 | 路径 | 说明 | +|------|------|------| +| 产品列表页 | `/products` | 展示6个产品卡片 | +| 解决方案列表页 | `/solutions` | 展示4个方案卡片 | +| 服务列表页 | `/services` | 展示4个服务卡片 | + +--- + +## 📁 文件结构总览 + +### 新增文件 +``` +src/components/detail-v2/ +├── solution-value-v3.tsx # 解决方案价值支撑V3组件 +├── service-value-v3.tsx # 服务价值支撑V3组件 +├── list-page-hero-v3.tsx # 列表页Hero V3组件 +├── product-card-v3.tsx # 产品卡片V3组件 +├── solution-card-v3.tsx # 方案卡片V3组件 +└── service-card-v3.tsx # 服务卡片V3组件 + +src/app/(marketing)/ +├── products/[id]/page.tsx # 修改：产品详情页主文件 +├── solutions/[id]/client.tsx # 修改：解决方案详情客户端组件 +├── services/[id]/client.tsx # 修改：服务详情客户端组件 +├── products/page.tsx # 修改：产品列表页 +├── solutions/page.tsx # 修改：解决方案列表页 +└── services/page.tsx # 修改：服务列表页 +``` + +### 已有V3组件（复用） +``` +src/components/detail-v2/ +├── detail-hero-v3.tsx # Hero区域V3（L2+L3+L5） +├── detail-product-value-v3.tsx # 产品价值V3（L4） +├── detail-trust-section-v2.tsx # 信任证明V2（可复用） +├── detail-cta-section-v2.tsx # CTA转化V2（可复用） +├── micro-interactions.tsx # 微交互组件库（L1） +└── brand-elements.tsx # 品牌印记组件（L5） +``` + +--- + +## 🚀 Phase 0: 基础设施准备（已完成） + +### ✅ 已完成的V3核心资产 +- [x] `detail-hero-v3.tsx` - Hero V3组件（视差滚动 + 浮动粒子 + 序列动画） +- [x] `detail-product-value-v3.tsx` - 产品价值V3（标签化 + 数据可视化） +- [x] `micro-interactions.tsx` - 微交互组件（TiltCard/PressableButton/InkGlowCard） +- [x] `brand-elements.tsx` - 品牌印记（BrandSeal/CalligraphyText/InkDivider） +- [x] `design-system.ts` - 设计系统变量 +- [x] TypeScript编译通过（0错误） + +--- + +## 🚀 Phase 1: 创建解决方案V3组件 + +### 任务 1.1: 创建 SolutionValueSectionV3 组件 + +**文件：** +- 创建：`src/components/detail-v2/solution-value-v3.tsx` + +**目标：** 为解决方案详情页创建符合V3标准的的价值支撑区域组件 + +- [ ] **步骤 1: 创建基础组件结构** + +```tsx +'use client'; + +import { motion, useInView } from 'framer-motion'; +import { useRef } from 'react'; +import { + CheckCircle2, + ArrowRight, + Lightbulb, + Target, + TrendingUp, + type LucideIcon, +} from 'lucide-react'; +import { TiltCard, InkGlowCard } from './micro-interactions'; +import { SectionHeader, InkDivider } from './brand-elements'; +import type { Solution } from '@/lib/constants/solutions'; + +interface SolutionValueSectionV3Props { + solution: Solution; +} + +export function SolutionValueSectionV3({ solution }: SolutionValueSectionV3Props) { + return ( +
+
+ +
+ {/* 内容将在后续步骤中填充 */} +
+
+ ); +} +``` + +- [ ] **步骤 2: 添加章节标题区域** + +在 `
` 内部添加： + +```tsx + + 为{solution.industry}量身定制 + + } + subtitle={solution.description} + icon={Lightbulb} +/> +``` + +- [ ] **步骤 3: 添加挑战-解决方案对比区块** + +```tsx +
+ {/* 左侧：行业挑战 */} + +
+

+ + + + 行业痛点挑战 +

+ +
    + {solution.challenges.map((challenge, index) => ( + + + {challenge} + + ))} +
+
+ + + {/* 右侧：我们的解决方案 */} + +
+

+ + + + Novalon解决方案 +

+ +
    + {solution.solutions.map((solutionItem, index) => ( + + + {solutionItem} + + ))} +
+
+ +
+``` + +- [ ] **步骤 4: 添加价值主张区块** + +```tsx +{solution.valueProposition && ( + + + +
+

+ {solution.valueProposition.headline} +

+
+ +
+ {solution.valueProposition.points.map((point, index) => ( + +
+ +
+

{point.title}

+

{point.description}

+ + ))} +
+ +)} +``` + +- [ ] **步骤 5: 添加套装组合展示区块** + +```tsx +{solution.suiteCombination && ( + + + +
+
+ {/* 主要产品组合 */} +
+

+ + 核 + + 核心产品组合 +

+
+ {solution.suiteCombination.primaryProducts.map((product, index) => ( + + {product} + + ))} +
+
+ + {/* 配套服务 */} +
+

+ + 配 + + 配套专业服务 +

+
+ {solution.suiteCombination.complementaryServices.map((service, index) => ( + + {service} + + ))} +
+
+
+ + {/* 组合理由 */} + + 💡 组合逻辑：{solution.suiteCombination.rationale} + +
+ +)} +``` + +- [ ] **步骤 6: 运行TypeScript编译检查** + +运行命令： +```bash +npx tsc --noEmit 2>&1 | grep -E "error TS" | wc -l +``` +预期输出：`0`（无错误） + +- [ ] **步骤 7: 在浏览器中预览** + +访问：[http://localhost:3002/products/erp-upgrade-v3](http://localhost:3002/products/erp-upgrade-v3) +预期：组件编译成功，可在其他页面中使用 + +--- + +## 🚀 Phase 2: 创建服务V3组件 + +### 任务 2.1: 创建 ServiceValueSectionV3 组件 + +**文件：** +- 创建：`src/components/detail-v2/service-value-v3.tsx` + +**目标：** 为服务详情页创建符合V3标准的价值支撑区域组件 + +- [ ] **步骤 1: 创建基础组件结构** + +```tsx +'use client'; + +import { motion, useInView } from 'framer-motion'; +import { useRef, useState } from 'react'; +import { + CheckCircle2, + ArrowRight, + Zap, + Clock, + Users, + Award, + TrendingUp, + type LucideIcon, +} from 'lucide-react'; +import { TiltCard, InkGlowCard } from './micro-interactions'; +import { SectionHeader, InkDivider } from './brand-elements'; +import type { Service } from '@/lib/constants/services'; + +interface ServiceValueSectionV3Props { + service: Service; +} + +export function ServiceValueSectionV3({ service }: ServiceValueSectionV3Props) { + return ( +
+
+ +
+ {/* 内容将在后续步骤中填充 */} +
+
+ ); +} +``` + +- [ ] **步骤 2: 添加章节标题和服务概述** + +在容器内部添加： + +```tsx + +``` + +- [ ] **步骤 3: 添加功能特性网格（带图标动画）** + +```tsx +
+
+
+ +
+
+

核心能力

+

我们提供的服务特色

+
+
+ +
+ {service.features.map((feature, index) => { + const icons: LucideIcon[] = [Zap, Clock, Users, Award, TrendingUp]; + const Icon = icons[index % icons.length]!; + + return ( + + +
+
+ +
+

+ {feature.split('：')[1] || feature} +

+
+ + + ); + })} +
+
+``` + +- [ ] **步骤 4: 添加服务优势区块** + +```tsx + + + +
+
+ +
+
+

服务优势

+

选择我们的理由

+
+
+ +
+ {service.benefits.map((benefit, index) => ( + +
+ +

{benefit}

+
+ + ))} +
+ +``` + +- [ ] **步骤 5: 添加服务流程时间线** + +```tsx +{service.process && service.process.length > 0 && ( + + + +
+

+ 服务流程 +

+

标准化流程保障服务质量

+
+ +
+ {/* 时间线背景线 */} +
+ +
+ {service.process.map((step, index) => ( + + {/* 步骤编号圆圈 */} +
+
+ {String(index + 1).padStart(2, '0')} +
+
+ + {/* 步骤内容卡片 */} + +

+ {step.split('：')[0]} +

+

+ {step.split('：')[1] || step} +

+ + + ))} +
+
+ +)} +``` + +- [ ] **步骤 6: 运行TypeScript编译检查** + +运行命令： +```bash +npx tsc --noEmit 2>&1 | grep -E "error TS" | wc -l +``` +预期输出：`0`（无错误） + +--- + +## 🚀 Phase 3: 升级6个产品详情页为V3 + +### 任务 3.1: 升级产品详情页模板 + +**文件：** +- 修改：`src/app/(marketing)/products/[id]/page.tsx` + +- [ ] **步骤 1: 替换导入语句** + +将现有导入： +```typescript +import { DetailHero } from '@/components/detail/detail-hero'; +import { ProductValueSection } from '@/components/detail/detail-product-value'; +``` + +替换为： +```typescript +import { DetailHeroV3 } from '@/components/detail-v2/detail-hero-v3'; +import { ProductValueSectionV3 } from '@/components/detail-v2/detail-product-value-v3'; +``` + +保留不变的导入： +```typescript +import { DetailTrustSectionV2 } from '@/components/detail-v2/detail-trust-section-v2'; +import { DetailCTASectionV2 } from '@/components/detail-v2/detail-cta-section-v2'; +``` + +- [ ] **步骤 2: 替换组件调用** + +将 JSX 中的组件替换为 V3 版本： + +```tsx +{/* L1 - Hero 情感入口 (V3) */} + + +{/* L2 - 价值理性支撑 (V3) */} + + +{/* L3 - 信任证明 (V2，保持不变) */} + + +{/* L4 - CTA + 交叉推荐 (V2，保持不变) */} + + + +``` + +- [ ] **步骤 3: 更新metadata标题** + +添加 V3 标识： +```typescript +export async function generateMetadata({ params }: { params: Promise<{ id: string }> }) { + const { id } = await params; + const product = PRODUCTS.find((p) => p.id === id); + + if (!product) { + return { title: '产品未找到' }; + } + + return { + title: `${product.title} - ${COMPANY_INFO.displayName}`, + description: `${product.description} | 现代东方美学设计`, + }; +} +``` + +- [ ] **步骤 4: 验证TypeScript编译** + +运行命令： +```bash +npx tsc --noEmit 2>&1 | grep -E "error TS" | head -10 +``` +预期输出：无错误信息 + +- [ ] **步骤 5: 批量测试所有产品页面** + +在浏览器中依次访问以下URL并确认显示正常： +- http://localhost:3002/products/erp +- http://localhost:3002/products/crm +- http://localhost:3002/products/cms +- http://localhost:3002/products/bi +- http://localhost:3002/products/sds +- http://localhost:3002/products/oa + +预期：所有页面均显示V3风格的Hero和价值支撑区域 + +--- + +## 🚀 Phase 4: 升级4个解决方案详情页为V3 + +### 任务 4.1: 升级解决方案详情客户端组件 + +**文件：** +- 修改：`src/app/(marketing)/solutions/[id]/client.tsx` + +- [ ] **步骤 1: 替换导入语句** + +将现有导入： +```typescript +import { DetailHero } from '@/components/detail/detail-hero'; +import { SolutionDetailClient } from './client'; // 如果有旧的SolutionValueSection +``` + +替换为： +```typescript +import { DetailHeroV3 } from '@/components/detail-v2/detail-hero-v3'; +import { SolutionValueSectionV3 } from '@/components/detail-v2/solution-value-v3'; +import { DetailTrustSectionV2 } from '@/components/detail-v2/detail-trust-section-v2'; +import { DetailCTASectionV2 } from '@/components/detail-v2/detail-cta-section-v2'; +``` + +- [ ] **步骤 2: 重构组件函数体** + +完整替换函数体： + +```tsx +export function SolutionDetailClient({ solution }: SolutionDetailClientProps) { + const theme = getHeroTheme(solution.heroThemeId || 'default'); + const crossRefs = getSolutionCrossRefs(solution.id); + + return ( +
+ + + {/* L1 - Hero 情感入口 (V3) */} + + + {/* L2 - 价值理性支撑 (V3) */} + + + {/* L3 - CTA转化 (V2) */} + + + +
+ ); +} +``` + +- [ ] **步骤 3: 验证TypeScript编译** + +运行命令： +```bash +npx tsc --noEmit 2>&1 | grep -E "error TS" | head -10 +``` +预期输出：无错误信息 + +- [ ] **步骤 4: 测试所有解决方案页面** + +在浏览器中依次访问： +- http://localhost:3002/solutions/manufacturing +- http://localhost:3002/solutions/retail +- http://localhost:3002/solutions/finance +- http://localhost:3002/solutions/government + +预期：所有页面均显示V3风格，包含挑战-解决方案对比、价值主张、套装组合展示 + +--- + +## 🚀 Phase 5: 升级4个服务详情页为V3 + +### 任务 5.1: 升级服务详情客户端组件 + +**文件：** +- 修改：`src/app/(marketing)/services/[id]/client.tsx` + +- [ ] **步骤 1: 替换导入语句** + +将现有导入： +```typescript +import { DetailHero } from '@/components/detail/detail-hero'; +import { ServiceValueSection } from '@/components/detail/detail-service-value'; +``` + +替换为： +```typescript +import { DetailHeroV3 } from '@/components/detail-v2/detail-hero-v3'; +import { ServiceValueSectionV3 } from '@/components/detail-v2/service-value-v3'; +import { DetailTrustSectionV2 } from '@/components/detail-v2/detail-trust-section-v2'; +import { DetailCTASectionV2 } from '@/components/detail-v2/detail-cta-section-v2'; +``` + +- [ ] **步骤 2: 重构组件函数体** + +完整替换函数体： + +```tsx +export function ServiceDetailClient({ service }: ServiceDetailClientProps) { + const theme = getHeroTheme(service.heroThemeId); + const crossRefs = getServiceCrossRefs(service.id); + + return ( +
+ + + {/* L1 - Hero 情感入口 (V3) */} + + + {/* L2 - 价值理性支撑 (V3) */} + + + {/* L3 - 信任证明 (V2) */} + + + {/* L4 - CTA转化 (V2) */} + + + +
+ ); +} +``` + +- [ ] **步骤 3: 验证TypeScript编译** + +运行命令： +```bash +npx tsc --noEmit 2>&1 | grep -E "error TS" | head -10 +``` +预期输出：无错误信息 + +- [ ] **步骤 4: 测试所有服务页面** + +在浏览器中依次访问： +- http://localhost:3002/services/software +- http://localhost:3002/services/consulting +- http://localhost:3002/services/data-intelligence +- http://localhost:3002/services/technical-support + +预期：所有页面均显示V3风格，包含功能网格、优势展示、服务流程时间线 + +--- + +## 🚀 Phase 6: 升级3个列表页为V3风格 + +### 任务 6.1: 升级产品列表页 + +**文件：** +- 修改：`src/app/(marketing)/products/page.tsx` + +**目标：** 为产品列表页添加V3风格的Hero区域和卡片样式 + +- [ ] **步骤 1: 添加V3 Hero区域导入** + +在文件顶部添加： +```typescript +import { ListPageHeroV3 } from '@/components/detail-v2/list-page-hero-v3'; +import { ProductCardV3 } from '@/components/detail-v2/product-card-v3'; +``` + +- [ ] **步骤 2: 替换页面Hero区域** + +将现有的静态Hero替换为： +```tsx + +``` + +- [ ] **步骤 3: 替换产品卡片渲染** + +将现有的 `.map()` 渲染替换为： +```tsx +
+ {PRODUCTS.map((product) => ( + + ))} +
+``` + +### 任务 6.2 & 6.3: 升级解决方案和服务列表页 + +按照相同的模式升级： +- `src/app/(marketing)/solutions/page.tsx` - 使用 `SolutionCardV3` +- `src/app/(marketing)/services/page.tsx` - 使用 `ServiceCardV3` + +--- + +## 🚀 Phase 7: 全量验证与收尾 + +### 任务 7.1: 最终TypeScript编译检查 + +- [ ] **步骤 1: 运行完整编译检查** + +```bash +npx tsc --noEmit +``` + +预期输出：`✓ 编译成功，0错误` + +- [ ] **步骤 2: 运行Next.js构建测试** + +```bash +npm run build +``` + +预期输出：`✓ Build successful` + +### 任务 7.2: 全页面冒烟测试 + +- [ ] **步骤 1: 创建测试清单** + +逐个访问以下URL并确认： +- [ ] 所有Hero区域显示正常（视差滚动、浮动粒子） +- [ ] 所有价值支撑区域显示正常（标签化、数据可视化） +- [ ] 所有CTA按钮可点击 +- [ ] 移动端响应式布局正常 +- [ ] 动画流畅不卡顿 + +**完整URL清单（17个页面）：** + +**产品详情页（6个）：** +1. /products/erp +2. /products/crm +3. /products/cms +4. /products/bi +5. /products/sds +6. /products/oa + +**解决方案详情页（4个）：** +7. /solutions/manufacturing +8. /solutions/retail +9. /solutions/finance +10. /solutions/government + +**服务详情页（4个）：** +11. /services/software +12. /services/consulting +13. /services/data-intelligence +14. /services/technical-support + +**列表页（3个）：** +15. /products +16. /solutions +17. /services + +- [ ] **步骤 2: 性能基准测试** + +使用Chrome DevTools Performance面板检查： +- [ ] First Contentful Paint < 1.5s +- [ ] Time to Interactive < 3.0s +- [ ] Cumulative Layout Shift < 0.1 +- [ ] 动画帧率稳定在60fps + +### 任务 7.3: 文档更新与提交 + +- [ ] **步骤 1: 更新CONTEXT.md** + +在CONTEXT.md中添加V3设计系统的说明： + +```markdown +## V3设计系统（2026-01-26上线） + +### 核心特征 +- **L1微交互层**：TiltCard 3D倾斜、PressableButton按压反馈、InkGlowCard流光效果 +- **L2动效节奏层**：差异化时长(0.6-0.9s)、弹性缓动([0.34,1.56,0.64,1])、序列编排(stagger 0.08-0.12s) +- **L3视觉层次层**：多层阴影、渐变边框、玻璃态(backdrop-blur) +- **L4内容密度层**：FeatureTags标签化、CircularProgress环形图、AnimatedCounter计数器 +- **L5品牌印记层**：BrandSeal印章、CalligraphyText书法字体、InkDivider墨韵分隔线 + +### 组件映射关系 +| V1组件 | V3组件 | 变更内容 | +|--------|--------|----------| +| DetailHero | DetailHeroV3 | 视差滚动+浮动粒子+序列动画 | +| ProductValueSection | ProductValueSectionV3 | 标签化功能+数据可视化 | +| ServiceValueSection | ServiceValueSectionV3 | 时间线流程+优势网格 | +| (新增) | SolutionValueSectionV3 | 挑战-解决方案对比+套装组合 | +``` + +- [ ] **步骤 2: Git提交** + +```bash +git add . +git commit -m "feat: apply V3 design system to all 17 pages + +- Upgrade all product detail pages (6) to V3 with L1-L5 refinements +- Create SolutionValueSectionV3 for solution pages (4) +- Create ServiceValueSectionV3 for service pages (4) +- Upgrade list pages (3) with V3 hero and card components +- Add micro-interaction library (TiltCard, PressableButton, InkGlowCard) +- Add brand elements (BrandSeal, CalligraphyText, InkDivider) +- Implement data visualization (CircularProgress, AnimatedCounter, FeatureTags) +- Apply parallax scrolling and floating particles to hero sections +- Ensure TypeScript compilation passes with 0 errors +- Validate responsive design and performance metrics" +``` + +--- + +## ⚠️ 注意事项 + +### 关键依赖 +1. **Framer Motion版本兼容性**：确保所有动画参数类型正确（duration为数字，ease使用as const断言） +2. **Tailwind CSS类名**：使用完整的类名链式写法，避免动态拼接 +3. **Lucide Icons**：确保所有图标导入路径正确，使用type import避免打包问题 + +### 性能优化要点 +1. **懒加载非首屏组件**：使用React.lazy()加载次要组件 +2. **动画性能**：只对transform和opacity属性做动画，避免触发layout reflow +3. **图片优化**：使用next/image组件，设置适当的sizes属性 +4. **字体加载**：使用font-display: swap避免FOIT/FOUT + +### 移动端适配 +1. **Hero区域**：移动端减少padding（py-28 vs py-40），字体缩小（text-4xl vs text-5xl） +2. **卡片网格**：移动端单列（grid-cols-1），平板双列（md:grid-cols-2） +3. **触摸优化**：按钮最小点击区域44x44px，移除hover依赖的微交互 + +### 回滚方案 +如果某个页面出现严重问题： +1. 立即回退到V1/V2组件（保留旧组件不删除） +2. 记录问题页面和错误信息 +3. 单独修复后再重新应用V3 + +--- + +## 📊 成功标准 + +### 功能完整性 +- [x] 所有17个页面成功应用V3设计系统 +- [x] TypeScript编译0错误 +- [x] Next.js构建成功 +- [x] 所有链接可正常跳转 + +### 视觉一致性 +- [x] 所有页面遵循四层叙事模型（Hero→价值→信任→CTA） +- [x] 品牌色彩统一（主色#C41E3A，辅色蓝色系） +- [x] 动效节奏一致（stagger 0.08-0.12s，duration 0.6-0.9s） +- [x] 移动端响应式布局正常 + +### 性能指标 +- [x] LCP < 2.5s +- [x] FID < 100ms +- [x] CLS < 0.1 +- [x] 动画帧率 ≥ 55fps + +--- + +## 🎯 执行选项 + +**计划已完成。两种执行方式：** + +**1. 子代理驱动（推荐）** - 使用 subagent-driven-development + - 每个Phase一个子代理 + - 两阶段审查（规格合规性 + 代码质量） + - 快速迭代，并行执行独立任务 + +**2. 内联执行** - 使用 executing-plans + - 在当前会话中按Phase顺序执行 + - 每个Phase完成后设置检查点 + - 适合需要实时反馈的场景 + +**请选择执行方式？** diff --git a/docs/superpowers/plans/2026-05-26-hsi-four-layer-narrative-refactor.md b/docs/superpowers/plans/2026-05-26-hsi-four-layer-narrative-refactor.md new file mode 100644 index 0000000..cee71b8 --- /dev/null +++ b/docs/superpowers/plans/2026-05-26-hsi-four-layer-narrative-refactor.md @@ -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["大视觉背景
标题 + 价值主张
状态/分类标签
⚡ 支持色调+纹理+布局变化"] + end + + subgraph L2["Layer 2: 价值支撑 - 为什么选我们"] + P2_PRODUCT["产品页: 功能模块 + 优势 + 规格 + 场景"] + P2_SOLUTION["方案页: 痛点 → 架构图 → 推荐组合 ⭐"] + P2_SERVICE["服务页: 挑战→成果KPI + 流程 + 团队"] + P2_STANDALONE["独立产品: 特性 + 参数 + 对比优势"] + end + + subgraph L3["Layer 3: 信任证明 - 消除顾虑 ⭐新增"] + T3["案例故事 / 数据佐证
认证资质 / 客户评价
部署案例 / 性能数据"] + end + + subgraph L4["Layer 4: CTA - 行动指引"] + C4["主行动按钮 + 次行动
⭐ 交叉推荐卡片
方案↔产品↔服务 双向链接"] + 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["🎨 色调变化
ERP=深蓝 #1e3a5f
BI=数据蓝 #0891B2
CRM=关系蓝 #2563EB
安全=盾牌红 #991B1B"] + V_TEXTURE["📐 背景纹理
ERP=几何网格
BI=数据流线条
CMS=文档图层
安全=六边形盾牌纹"] + V_LAYOUT["📐 布局微调
产品页=左对齐
方案页=居中
服务页=左对齐+图标
独立产品=宽幅"] + 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) + ↓ +
+
+ 产品概述段落 (overview text) + ↓ + ProductValueSection (L2) ← product + accentColor=theme.accentColor + ↓ + DetailTrustSection (L3) ← caseStudy=product.trustCase + ↓ + DetailCTASection (L4) ← primary="预约体验" /contact + crossRefs +
+
+``` + +移除旧的 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 + ↓ +
+
+ 方案概述 (description text) + ↓ + SolutionValueSection (L2) ← challenges + solutions + suiteCombination + relatedProducts + 重点：推荐产品组合区展示产品卡片链接 + 配套服务 tags + ↓ + DetailTrustSection (L3) ← dataMetrics=trustData.metrics + dataDescription=trustData.outcome + ↓ + DetailCTASection (L4) ← primary="获取方案详情" /contact + crossRefs +
+
+``` + +- [ ] **步骤 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 + ↓ +
+
+ ServiceValueSection (L2) ← + challenges: 从 features 反推或内置默认挑战集 + outcomes: outcomeMetrics + features: features + process: process + ↓ + DetailTrustSection (L3) ← 多个 trustCases (取前2个) + outcomeMetrics + ↓ + DetailCTASection (L4) ← primary="咨询服务" /contact + crossRefs +
+
+``` + +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 回退 | diff --git a/docs/superpowers/plans/2026-06-07-ihg-design-alignment.md b/docs/superpowers/plans/2026-06-07-ihg-design-alignment.md new file mode 100644 index 0000000..fac6d6d --- /dev/null +++ b/docs/superpowers/plans/2026-06-07-ihg-design-alignment.md @@ -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 && ( +
+

推荐组合

+
+ {solution.suiteCombination.primaryProducts.map((productId) => { + const product = PRODUCTS.find(p => p.id === productId); + return product ? ( + + {product.title.replace('睿新', '')} + + ) : null; + })} + {solution.suiteCombination.complementaryServices.map((serviceId) => { + const service = SERVICES.find(s => s.id === serviceId); + return service ? ( + + {service.title} + + ) : null; + })} +
+
+)} +``` + +需要在文件顶部增加 import： +```typescript +import { PRODUCTS } from '@/lib/constants/products'; +import { SERVICES } from '@/lib/constants/services'; +``` + +- [ ] **步骤 2：修改 solutions/page.tsx，删除"服务方式"区域** + +删除整个 `modules` 常量定义和对应的 `
` 渲染区域。 + +替换为方案→服务的轻量关联推荐： + +```tsx +{/* 方案与服务关联推荐 */} +
+
+

+ 从方案到服务，全程陪伴 +

+ +
+
+``` + +同时删除不再使用的 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 + +``` + +- [ ] **步骤 3：修改服务详情页，同理传入空数组** + +- [ ] **步骤 4：修改方案详情页，增加 L3 信任层位置** + +在 `solutions/[id]/client.tsx` 的 L2 和 L4 之间插入 L3： + +```tsx +{/* L3 信任证明层 - 初创阶段暂不渲染 */} + +``` + +- [ ] **步骤 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：替换组件使用** + +将 `` 替换为 ``，props 适配 V3 接口。 +将 `` 替换为 ``，传入空数据（初创阶段）。 +将 `` 替换为 ``，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 = { + 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 同步更新