From fe6e4b1c549507dceac5b1292eca012498c99811 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E7=BF=94?= Date: Thu, 30 Apr 2026 22:00:00 +0800 Subject: [PATCH] refactor: P0 - remove testimonial, migrate footer & mobile menu to NAVIGATION_V2 - Remove TestimonialSection from homepage (no customers yet) - Footer: dark theme, NAVIGATION_V2 + MEGA_DROPDOWN_DATA links - Mobile Menu: NAVIGATION_V2 with collapsible dropdown support --- .../71919-1777542709/.server-stopped | 1 + .../atlassian-comparison.html | 116 ++ .../brand-direction-comparison.html | 201 ++ .../delivery-pace-comparison.html | 118 ++ .../71919-1777542709/design-spec-full.html | 234 +++ .../homepage-layout-options.html | 224 +++ GA数据采集系统性排查手册.docx | Bin 0 -> 26449 bytes docs/StockPilot供应链DSS MVP产品设计文档.docx | Bin 0 -> 35572 bytes .../2026-04-24-erp-product-landing-page.md | 1261 ++++++++++++ ...04-24-services-solutions-design-upgrade.md | 299 +++ ...04-25-remove-phone-and-update-logo-font.md | 428 ++++ ...-view-transitions-svg-container-queries.md | 671 +++++++ ...se2-css-scroll-driven-gsap-lenis-motion.md | 1142 +++++++++++ .../2026-04-28-phase3-webgpu-ppr-wasm.md | 1135 +++++++++++ ...04-30-atlassian-brand-fusion-redesign.json | 350 ++++ ...6-04-30-atlassian-brand-fusion-redesign.md | 1776 +++++++++++++++++ .../2026-04-24-erp-product-page-design.md | 332 +++ ...04-25-remove-phone-and-update-logo-font.md | 259 +++ ...6-04-30-atlassian-brand-fusion-redesign.md | 187 ++ scripts/capture-preview.py | 43 + src/app/(marketing)/home-content-v2.tsx | 6 - src/components/layout/footer.tsx | 190 +- src/components/layout/mobile-menu.tsx | 84 +- 前沿官网设计案例集.docx | Bin 0 -> 21932 bytes 24 files changed, 8928 insertions(+), 129 deletions(-) create mode 100644 .superpowers/brainstorm/71919-1777542709/.server-stopped create mode 100644 .superpowers/brainstorm/71919-1777542709/atlassian-comparison.html create mode 100644 .superpowers/brainstorm/71919-1777542709/brand-direction-comparison.html create mode 100644 .superpowers/brainstorm/71919-1777542709/delivery-pace-comparison.html create mode 100644 .superpowers/brainstorm/71919-1777542709/design-spec-full.html create mode 100644 .superpowers/brainstorm/71919-1777542709/homepage-layout-options.html create mode 100644 GA数据采集系统性排查手册.docx create mode 100644 docs/StockPilot供应链DSS MVP产品设计文档.docx create mode 100644 docs/superpowers/plans/2026-04-24-erp-product-landing-page.md create mode 100644 docs/superpowers/plans/2026-04-24-services-solutions-design-upgrade.md create mode 100644 docs/superpowers/plans/2026-04-25-remove-phone-and-update-logo-font.md create mode 100644 docs/superpowers/plans/2026-04-28-phase1-view-transitions-svg-container-queries.md create mode 100644 docs/superpowers/plans/2026-04-28-phase2-css-scroll-driven-gsap-lenis-motion.md create mode 100644 docs/superpowers/plans/2026-04-28-phase3-webgpu-ppr-wasm.md create mode 100644 docs/superpowers/plans/2026-04-30-atlassian-brand-fusion-redesign.json create mode 100644 docs/superpowers/plans/2026-04-30-atlassian-brand-fusion-redesign.md create mode 100644 docs/superpowers/specs/2026-04-24-erp-product-page-design.md create mode 100644 docs/superpowers/specs/2026-04-25-remove-phone-and-update-logo-font.md create mode 100644 docs/superpowers/specs/2026-04-30-atlassian-brand-fusion-redesign.md create mode 100644 scripts/capture-preview.py create mode 100644 前沿官网设计案例集.docx diff --git a/.superpowers/brainstorm/71919-1777542709/.server-stopped b/.superpowers/brainstorm/71919-1777542709/.server-stopped new file mode 100644 index 0000000..050e132 --- /dev/null +++ b/.superpowers/brainstorm/71919-1777542709/.server-stopped @@ -0,0 +1 @@ +{"reason":"idle timeout","timestamp":1777547630053} diff --git a/.superpowers/brainstorm/71919-1777542709/atlassian-comparison.html b/.superpowers/brainstorm/71919-1777542709/atlassian-comparison.html new file mode 100644 index 0000000..1054037 --- /dev/null +++ b/.superpowers/brainstorm/71919-1777542709/atlassian-comparison.html @@ -0,0 +1,116 @@ +

Novalon × Atlassian：设计思路对比

+

分析两者在信息架构、视觉层次、交互模式上的核心差异，探索可借鉴的方向

+ +
+

📐 信息架构对比

+
+
+
当前 Novalon — 单页长滚动
+
+
Logo | 服务 | 解决方案 | 产品 | 案例 | 关于 | 团队 | 新闻
+
Hero 全屏（水墨粒子 + 数据流）
+
核心业务 Section
+
解决方案 Section
+
产品 Section
+
案例 Section
+
关于 + 团队 Section
+
新闻 Section
+
8个Section 纵向堆叠，通过 URL hash 导航
+
+
+
+
Atlassian — 多页面产品矩阵
+
+
Logo | Products ▾ | Solutions ▾ | Resources ▾ | Pricing | Contact
+
Hero（产品主张 + 视频背景）
+
社会证明（300K+ 公司 / 80% Fortune 500）
+
产品矩阵卡片（Jira / Confluence / Loom / Rovo）
+
模板/场景入口（Scrum / Bug / DevOps）
+
客户证言轮播
+
CTA + Footer
+
独立产品页 + 下拉导航 + 场景化入口
+
+
+
+
+ +
+

🎨 视觉设计语言对比

+
+
+
Novalon — 水墨科技风
+
+
+
+
+
+
+
+
字体：Geist Sans + 青柳隶书（品牌标题）
+
动效：水墨粒子 / 数据流 / 印章动画 / 视差
+
氛围：东方韵味 × 科技感
+
节奏：深→白→深→白 明暗交替
+
+
+
+
Atlassian — 清晰现代风
+
+
+
+
+
+
+
+
字体：Atlassian Sans + Atlassian Mono
+
动效：微交互 / 悬浮反馈 / 渐进展示
+
氛围：专业、清晰、可信赖
+
节奏：白底为主 + 品牌色点缀
+
+
+
+
+ +
+

🔑 Atlassian 可借鉴的 5 个核心设计模式

+
+
+
1
+
+

产品矩阵导航

+

顶部导航下拉展示所有产品，每个产品有独立落地页。用户可按"产品"或"场景"两条路径发现内容。Novalon 当前将产品、服务、解决方案平铺在单页中，缺乏独立深度。

+
+
+
+
2
+
+

社会证明前置

+

Hero 之后紧跟"300K+ 公司 / 80% Fortune 500"数据条。Novalon 的数据统计在 Hero 底部，且缺乏大客户 Logo 墙和具体量化成果展示。

+
+
+
+
3
+
+

场景化入口

+

"Get started with a template" — Scrum / Bug Tracking / DevOps 等场景模板，让用户按自身需求快速找到切入点。Novalon 的解决方案页面目前是静态描述，缺乏场景引导。

+
+
+
+
4
+
+

客户证言轮播

+

大段真实客户引言 + 姓名/职位/公司，按企业规模分类（Large Enterprise / SMB）。Novalon 的案例页目前是项目描述，缺乏客户视角的成果证言。

+
+
+
+
5
+
+

设计系统驱动一致性

+

Atlassian Design System 统一了 Token、组件、模式三层。从字体（Atlassian Sans）、图标（1.5px stroke）、颜色（中性偏暖）到组件（按钮/标签/卡片），全产品线一致。Novalon 目前有设计变量但缺乏系统化组件库。

+
+
+
+
+ +
+

👆 点击上方你感兴趣的设计模式（可多选），然后在终端告诉我你最想深入讨论哪些方向

+
diff --git a/.superpowers/brainstorm/71919-1777542709/brand-direction-comparison.html b/.superpowers/brainstorm/71919-1777542709/brand-direction-comparison.html new file mode 100644 index 0000000..38a411c --- /dev/null +++ b/.superpowers/brainstorm/71919-1777542709/brand-direction-comparison.html @@ -0,0 +1,201 @@ +

品牌基因方向对比：A vs B vs C

+

同样的信息架构（借鉴 Atlassian），三种不同的视觉表达

+ +
+

首页 Hero 区域效果模拟

+
+ +
+
+
+
+
+
+
+
+
数字化转型
+
睿新致遠
+
智连未来，成长伙伴
+
预约演示
+
+
+
+
+
+

A — 保留并强化

+

深墨色背景 + 水墨粒子持续运动 + 书法标题 + 朱砂红品牌色。视觉冲击力强，东方辨识度高。

+
+
+ +
+
+
+
+
+
+
数字化转型
+
睿新致遠
+
智连未来，成长伙伴
+
预约演示
+
+
+
+
+

B — 收敛但保留印记

+

白底为主 + 极简装饰线条 + 书法标题保留 + 朱砂红品牌色。克制专业，品牌锚点仍在。

+
+
+ +
+
+
+
+
数字化转型
+
Novalon
+
智连未来，成长伙伴
+
预约演示
+
+
+
+
+

C — 全面现代清晰风

+

纯白底 + 蓝色品牌色 + 西文无衬线 + 圆角标签。极致清晰，但失去东方辨识度。

+
+
+ +
+
+ +
+

产品卡片效果模拟

+
+ +
+
+
+ ERP +
+
睿新ERP管理系统
+
集成财务、采购、销售、库存、生产
+
+
+
了解更多 →
+
+
+ +
+
+
+ ERP +
+
睿新ERP管理系统
+
集成财务、采购、销售、库存、生产
+
+
+
了解更多 →
+
+
+ +
+
+
+ ERP +
+
睿新ERP管理系统
+
集成财务、采购、销售、库存、生产
+
+
+
了解更多 →
+
+
+ +
+
+
A — 深色沉浸卡片
+
B — 暖白克制卡片
+
C — 标准现代卡片
+
+
+ +
+

关键权衡分析

+
+ +
+
A — 保留并强化
+
+
+

✅ 优势

+
    +
  • 独特的东方美学辨识度
    • +
  • 深色背景对比度极高
    • +
  • 品牌差异化明显
    • +
  • 现有动效资产可复用
    • +
+
+
+

⚠️ 风险

+
    +
  • 动效多影响性能/加载
    • +
  • 深色风格可能"太酷"不够"稳"
    • +
  • 企业客户可能偏好传统专业感
    • +
  • 动效维护成本高
    • +
+
+
+
+ +
+
B — 收敛但保留印记 ⭐推荐
+
+
+

✅ 优势

+
    +
  • 专业感与品牌特色兼顾
    • +
  • 白底更适合信息密集展示
    • +
  • 性能友好（减少粒子动效）
    • +
  • 书法+朱砂红仍保持辨识度
    • +
  • 更接近 Atlassian 的清晰架构
    • +
+
+
+

⚠️ 风险

+
    +
  • 需要重新平衡"克制"与"特色"
    • +
  • 部分现有动效组件需弃用
    • +
  • 设计系统需从头建立
    • +
+
+
+
+ +
+
C — 全面现代清晰风
+
+
+

✅ 优势

+
    +
  • 极致清晰，信息传达效率最高
    • +
  • 可直接参考 Atlassian Design System
    • +
  • 开发维护成本最低
    • +
  • 国际化的专业感
    • +
+
+
+

⚠️ 风险

+
    +
  • 完全丧失东方品牌辨识度
    • +
  • 与国内竞品无差异
    • +
  • 品牌重塑成本极高
    • +
  • 现有视觉资产全部废弃
    • +
+
+
+
+ +
+
+ +
+

👆 点击顶部三张 Hero 卡片中你倾向的方向，然后在终端告诉我你的选择

+
diff --git a/.superpowers/brainstorm/71919-1777542709/delivery-pace-comparison.html b/.superpowers/brainstorm/71919-1777542709/delivery-pace-comparison.html new file mode 100644 index 0000000..72c7c49 --- /dev/null +++ b/.superpowers/brainstorm/71919-1777542709/delivery-pace-comparison.html @@ -0,0 +1,118 @@ +

交付节奏方案对比

+

三种纯方案 vs 推荐的混合方案

+ +
+

三种纯方案的问题

+
+ +
+
A — 首页先行
+
首页 → 产品页 → 服务页 → ...
+
+
✅ 快速见效
+
✅ 可验证方向
+
+
+
❌ 首页新风格 → 跳转子页旧风格
+
❌ 体验割裂
+
❌ 每个页面重复造组件
+
+
+ +
+
B — 架构先行
+
全站导航 → 全站框架 → 填充内容
+
+
✅ 全站一致
+
✅ 无割裂感
+
+
+
❌ 所有页面同时动，风险大
+
❌ 长时间看不到完整效果
+
❌ 回滚困难
+
+
+ +
+
C — 设计系统先行
+
Token → 组件库 → 页面迁移
+
+
✅ 质量有保障
+
✅ 组件复用
+
+
+
❌ 前期投入大，零可见产出
+
❌ 容易过度设计（组件脱离实际）
+
❌ "系统建完了但页面还没动"
+
+
+ +
+
+ +
+

⭐ 推荐：A + C 混合 — 首页驱动的设计系统

+

用首页的实际需求驱动组件设计，首页完成时设计系统基础也同步就绪

+ +
+ +
+ +
+
Phase 1：首页重构 + 设计系统基础
+
+
首页改造：
+
• 新 Hero（白底 + 书法标题 + 朱砂红CTA）
+
• 社会证明数据条
+
• 产品矩阵卡片
+
• 场景化入口
+
• 客户证言区
+
同步沉淀：
+
• Design Token 体系（颜色/间距/字体）
+
• 导航组件（下拉产品矩阵）
+
• 产品卡片组件
+
• 排版系统（标题/正文/标签）
+
+
+ +
+
Phase 2：产品页/服务页迁移
+
+
• 基于 Phase 1 沉淀的组件直接组装
+
• 产品详情页（已有独立 Section 组件）
+
• 服务详情页（已有独立 Section 组件）
+
+
Phase 3：其余页面 + 设计系统完善
+
+
• 解决方案页（场景化入口落地）
+
• 案例页（客户证言组件复用）
+
• 关于/团队/新闻页
+
+
+ +
+ +
+
💡 核心原则：组件从实际页面需求中生长
+
+
+
🏗️
+
做首页时发现
需要产品卡片
+
+
+
🔧
+
抽取为通用
ProductCard 组件
+
+
+
♻️
+
产品页/服务页
直接复用组件
+
+
+
+ +
+
+ +
+

确认这个节奏方向？或者你有其他想法？在终端告诉我

+
diff --git a/.superpowers/brainstorm/71919-1777542709/design-spec-full.html b/.superpowers/brainstorm/71919-1777542709/design-spec-full.html new file mode 100644 index 0000000..9d5eee4 --- /dev/null +++ b/.superpowers/brainstorm/71919-1777542709/design-spec-full.html @@ -0,0 +1,234 @@ +

方案二：品牌融合重构 — 完整设计规格

+

Atlassian 信息架构 × Novalon 品牌叙事 × 收敛但保留印记

+ +
+

📐 整体页面结构

+
+
+
+
+
Navigation
+
Logo + 产品▾ + 解决方案▾ + 服务 + 案例 + 关于 + 联系我们
+
+
+
+
Section 1: Hero
+
品牌主张 + 双CTA + 极简装饰
+
+
+
+
Section 2: 社会证明
+
三列关键数据 + 客户Logo墙（可选）
+
+
+
+
Section 3: 核心产品矩阵
+
2×2 卡片网格 + 朱砂红左边框
+
+
+
+
Section 4: 挑战与场景入口
+
"您面临什么挑战？" 三列痛点卡片
+
+
+
+
Section 5: 客户成果
+
深色背景 + 客户引言 + 量化数据
+
+
+
+
Section 6: CTA
+
朱砂红渐变 + 行动号召
+
+
+
+
Footer
+
品牌信息 + 导航 + 联系方式
+
+
+
+ 视觉节奏：暖白 → 浅灰 → 白 → 暖白 → 深墨 → 朱砂红 → 浅灰 +
+
+
+ +
+

🧭 导航重设计：产品矩阵下拉

+
+
+
当前导航
+
+
Logo | 服务 | 解决方案 | 产品 | 案例 | 关于 | 团队 | 新闻
+
问题：
+
• 8个平铺项，认知负担重
+
• 产品/服务/解决方案关系不清
+
• 无下拉，无法快速预览
+
• "团队""新闻"占位但非核心
+
+
+
+
新导航
+
+
Logo 睿新致遠 | 产品 ▾ | 解决方案 ▾ | 服务 | 案例 | 关于我们
+
+
点击"产品 ▾"展开：
+
+
+
ERP 管理系统
+
财务·采购·销售·库存
+
+
+
CRM 客户管理
+
线索·商机·合同·服务
+
+
+
BI 数据平台
+
报表·仪表盘·预测
+
+
+
CMS 内容平台
+
建站·运营·分发
+
+
+
+
改进：
+
• 6项→核心4项+2个下拉
+
• 下拉预览产品，减少跳转
+
• "团队/新闻"移入"关于我们"
+
+
+
+
+ +
+

🎨 Design Token 体系（收敛版）

+
+
+
+
色彩（保留，微调）
+
+
+
+
墨黑
+
+
+
+
朱砂红
+
+
+
+
宣纸白
+
+
+
+
浅灰
+
+
+
+
红底
+
+
+
✅ 保留现有色彩体系不变
+
➕ 新增场景色：#FFFBEB(黄底) #F0FDF4(绿底)
+
+
+
动效（大幅收敛）
+
❌ 移除：水墨粒子、数据流、粒子星河、鼠标交互粒子
+
❌ 移除：流体波浪、几何抽象、网格线
+
✅ 保留：渐变流动（极简版）、微妙圆点
+
✅ 保留：滚动揭示（FadeUp）、数字动画
+
➕ 新增：悬浮微交互、卡片 hover 提升效果
+
➕ 新增：导航下拉过渡、场景卡片 hover 色变
+
+
+
+
+ +
+

🧩 Phase 1 沉淀的核心组件

+
+
+
MegaDropdown
+
产品矩阵下拉导航
+
复用：产品页、解决方案页
+
+
+
ProductCard
+
朱砂红左边框产品卡片
+
复用：产品列表页、首页
+
+
+
ChallengeCard
+
痛点/场景入口卡片
+
复用：解决方案页、服务页
+
+
+
StatsBar
+
三列数据统计条
+
复用：产品页、关于页
+
+
+
TestimonialBlock
+
深色背景客户证言
+
复用：案例页、产品页
+
+
+
CTASection
+
朱砂红渐变行动号召
+
复用：全站通用
+
+
+
+ +
+

📋 现有组件迁移策略

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
组件策略说明
InkBackground❌ 废弃水墨背景不再使用，用极简装饰替代
DataParticleFlow❌ 废弃粒子动效过于花哨，不符合收敛方向
SubtleDots✅ 保留微妙圆点符合收敛方向
GradientFlow🔧 简化保留但降低强度，作为Hero极淡背景
ScrollReveal/FadeUp✅ 保留滚动揭示动画是核心交互
AnimatedNumber✅ 保留数据统计动画
SealAnimation🔄 重构印章动画保留但仅用于品牌标题区
+
+
+ +
+

以上是方案二的完整设计规格

+

确认无误后，我将编写正式设计文档并进入实现规划阶段

+
diff --git a/.superpowers/brainstorm/71919-1777542709/homepage-layout-options.html b/.superpowers/brainstorm/71919-1777542709/homepage-layout-options.html new file mode 100644 index 0000000..1cde7fd --- /dev/null +++ b/.superpowers/brainstorm/71919-1777542709/homepage-layout-options.html @@ -0,0 +1,224 @@ +

首页重构：3 种布局方案

+

同样的品牌方向（收敛+保留印记），不同的信息组织逻辑

+ +
+

方案一：Atlassian 直接映射

+

将 Atlassian 首页结构直接映射到 Novalon 内容

+
+
首页线框图
+
+
Logo 睿新致遠 | 产品 ▾ | 解决方案 ▾ | 案例 | 关于 | 联系我们
+
+
数字化转型伙伴
+
睿新致遠
+
企业数字化转型的可靠成长伙伴
+
预约演示
+
+
+ 📊 200+ 企业客户 · 覆盖 15+ 行业 · 99.9% 系统可用性 +
+
+
+
ERP
+
企业管理系统
+
+
+
CRM
+
客户关系管理
+
+
+
BI
+
商业智能分析
+
+
+
CMS
+
内容管理平台
+
+
+
+
按场景探索
+
+
制造业
+
金融
+
零售
+
+
+
+
"与睿新合作后，我们的运营效率提升了40%"
+
— 某制造业CTO
+
+
+
开始您的数字化转型
+
预约免费咨询
+
+
+
+
+

✅ 优势

  • 结构清晰，Atlassian 验证过的模式
  • 产品矩阵一目了然
  • 开发参照明确
+

⚠️ 不足

  • 可能过于"复制"Atlassian
  • 缺乏 Novalon 独特叙事
  • 场景入口较浅
+
+
+ +
+

方案二：品牌融合重构 ⭐推荐

+

Atlassian 的信息架构 + Novalon 的品牌叙事逻辑

+
+
首页线框图
+
+
Logo 睿新致遠 | 产品 ▾ | 解决方案 ▾ | 服务 | 案例 | 关于我们
+
+
+
+
NOVALON · 睿新致遠
+
智连未来，成长伙伴
+
从战略规划到系统落地，陪伴企业完成数字化转型的每一步
+
+
预约演示
+
了解方案
+
+
+
+
+
200+
+
企业客户
+
+
+
15+
+
行业覆盖
+
+
+
99.9%
+
系统可用性
+
+
+
+
核心产品
+
+
+
ERP 管理系统
+
财务·采购·销售·库存·生产
+
+
+
CRM 客户管理
+
线索·商机·合同·服务
+
+
+
BI 数据平台
+
报表·仪表盘·预测·决策
+
+
+
CMS 内容平台
+
建站·运营·分发·分析
+
+
+
+
+
您面临什么挑战？
+
+
+
🏭
+
系统孤岛
+
数据不通
+
+
+
📈
+
增长瓶颈
+
效率低下
+
+
+
🔒
+
合规风险
+
安全隐忧
+
+
+
+
+
客户成果
+
"睿新团队不是交付完就走的供应商，而是真正陪伴我们成长的伙伴"
+
+
— 某上市制造企业 CTO
+
+
40%
效率提升
+
6月
交付周期
+
+
+
+
+
开启数字化转型之旅
+
免费咨询 · 专属方案 · 30天试用
+
+
+
+
+

✅ 优势

  • 品牌叙事 + 产品矩阵完美融合
  • "您面临什么挑战"场景入口有温度
  • 深色客户成果区形成视觉节奏
  • 朱砂红左边框 = 品牌印记
+

⚠️ 不足

  • 设计复杂度中等
  • 需要更多内容支撑（客户证言/数据）
+
+
+ +
+

方案三：场景驱动叙事

+

以用户痛点/场景为主线，产品作为解决方案嵌入

+
+
首页线框图
+
+
Logo 睿新致遠 | 行业方案 ▾ | 产品 | 服务 | 案例
+
+
您的挑战，我们的使命
+
选择您最关心的业务挑战
+
+
+
+
🏭
+
制造业数字化转型
+
ERP + MES + BI 一体化
+
查看方案 →
+
+
+
🏦
+
金融合规与风控
+
CRM + BI + 安全审计
+
查看方案 →
+
+
+
🛒
+
零售全渠道运营
+
CRM + CMS + 数据中台
+
查看方案 →
+
+
+
🏗️
+
工程项目管理
+
ERP + 进度追踪 + 成本管控
+
查看方案 →
+
+
+
+ 每个场景背后，都有对应的产品组合支撑 +
+
+
我们的产品
+
+
ERP
+
·
+
CRM
+
·
+
BI
+
·
+
CMS
+
+
+
+
找到您的解决方案
+
+
+
+
+

✅ 优势

  • 用户视角，按痛点找方案
  • 差异化明显（竞品少这么做）
  • 产品自然嵌入场景
+

⚠️ 不足

  • 需要丰富的行业场景内容
  • 产品曝光度相对弱
  • SEO 不利（产品关键词靠后）
  • 内容准备量大
+
+
+ +
+

👆 点击你倾向的方案卡片（方案一/二/三的线框图区域），然后在终端确认

+

我推荐方案二——品牌融合重构，它在 Atlassian 架构优势和 Novalon 品牌特色之间取得了最佳平衡

+
diff --git a/GA数据采集系统性排查手册.docx b/GA数据采集系统性排查手册.docx new file mode 100644 index 0000000000000000000000000000000000000000..9f4c832c59642052ab4105ae90c19aba2cc20e2a GIT binary patch literal 26449 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 MhC$yf^lpIv1AA{|o&W#< literal 0 HcmV?d00001 diff --git a/docs/StockPilot供应链DSS MVP产品设计文档.docx b/docs/StockPilot供应链DSS MVP产品设计文档.docx new file mode 100644 index 0000000000000000000000000000000000000000..34f7f2957bd48ead3184b9009b2a518106e2c9ce GIT binary patch literal 35572 zcmZ^~Q*+*@Z|GoI16Xf^k;oxk_r1bwg1^$1h7&x2Ry8J&AVg9?8 z)+C|>GAIZL>Gwhe|KEwG4km7PX7;X(o_4m3|9P}7by{KQCrYRRQ43`|-fcyj11=G*!1 ztvY~vvwuXAN&COIfmbrV`TQiJ`Cg?{apdT?1+BS%rR)k$2n%jY&Nt({g)!CID%ci@ zXH&-1xK6ykQi{2?pB4XD{T1%7L4}6Ib5K)C7(?}y0{#X!HC-?Rklwq0kXiHyRPwj~ z9D^TNml57P3bl+Aw);sm^nJqz3$TiX`@xKN`iH zI_x?Xy$G6dKo5jUui{m+qmB8pz_sa%+o5kX{7NzsRbd4|xc;+q8u@=K{(lRppiL9C zWeNg9CkzdO`oD$zf0yvQ$3_)@Je}iJlkQbaaf+agfpPR=o7HFAuxo2e?r#_F{$;+` ze%x`Q@MtzxWRh4H|4}Xs>>TD6h!Zx9QK;!pG#uR0D|GLX7pXCw_XzLhT+j%>h_4j?9 zzIZEe(#YxUlXPHt!vB0<{}J-g{Pj@(b$hGGe|R|{AlesqcJ`?%>Cm@c9AHki(`VZ| z*<)+JuaCsG^ASrP_oVZ6?_BscThP<64)s~O_^ZnR=k-}sV4s}3klbo>^usPkj`fzV-^&+wSqK!8){^`7H)exc@U zQOBQ@c-0I+V6(kqu%r6 z`sHoq%gSaPIUw%T#|rjnP)NZ|V_g!Hfg0Y+MGNtbPQi&GO!k$&JworFV}s<35UAO^ zXa4hI0d$|+MIBpvp0UU|s%p*LBUGfF=35FsZ2<#b*6WqfY%}=xWx6x2HSy^1b*!9-6BkA`XqX z{(_bzFN1L{C%p?>g4;@yl5ArBhO&1z<=RY}OZ)h38}=#!FoWQuOJWiG+5ma^3E z?LNe-Dw8+qz3=Vm+6is0U;ElTP}Cw6eg0yqqaoboS2hXM?o-;>PEiUyN@r{pO0+&YCcnyzh-uk+gY3XpBXUDDHIiF$M zuf=~xV&-wP>eCMOACd%$qi0!NW`Df$6uzId%weAe_U0fUNcOU${1dfb*jQS+&$=}D z60gWFsnK=ZQ-3|;0H0^nUSntax;NMY?mBoc76_hE8SfZY*_|8|tPwwaa31>Sq;VKs zaG-4m=)SOT2AuY>;s}!OxauhK+0Nw z*x5VyIbMEs&SqLD56i4BY1YYYw<*%IXTZV9TE3 z@ctdA=QOk3{U&{XSoCS*^=$Un;F9p7Z^dWqErF1?`RkgV2{9wI$7@&;7{w3Vz~U@V zyh418cMfQlY#$SJgY!j`=PJF=PmSNF<&5v^_0;4H@YeHFeDP?h(YYkLvUWe8`Yn;g zr|-NE$&|l&&UW$^w^YsI_{BsmdEsdzrB5_)CE1}vutz;N8mp8m{7Fk{fh~g$M09-_ zbM4?Npwf$9m|Sb_GRPG@aO>WmAHUeHMit{zOH>W=}1oGGb40dVE zmjXv9HMXUnD~B!!w^5q8%v03*F0Vobj!~C@tES##QUgKGY^0WseNljE@OWXHT8)&>5-4s()AaMhf%fU0o(QIvoqSiuRBqc?|kA4Ch7HoMRdXKrPlFQb-I zBpjT`M=sadn8B_HCC{f6A)|x!{4;rtAqz~oe8+p4K)_T022$j>Jc;53s#Jh2`Tms} zGI1hlVo|!GsQ{lulu)=(xb}X6S3(E)(~bZ9U2Boz&W?+u1JK@S2O+z%NkQNoyQe>+ zKf`VGY`=go0WnACN&<_ghiPn zn528QLmNA+FRtt4YYCQTN}WoKK5~37q=`_7 zP>A;a6#=NPP?S)V+Z=))?;27Kn^4q-&QjNv5>I@OMa0z{HWnN_=}dMwSInK2S~j1N z?{AX!^$inM11)mz6lDWH0e6#!rc+wrH2A_!Xa};%zmBS-0eJoksD~|8NbFgJ9#@~+ zNx=skhCiACpHt?zYBx6LZ5#B8h`?anoi0hJiRITSNNEuxCtgl8iuUgOD({Ps z<8D)ZxrAY8D&|2l;VOZ0!kJps5Cpmx6kxgryuWc%0E<>$UQj}QkGDTVSO+>1CqJi& z(pD{S{6|coAgvM+xyi7+Xmc<^F8kK8l>kg#;FkXA49MtWs=rv%s58)iW0UKE5%clk zg8?qk_N{Iix={I>IORX1!{{G*OM8qqJ~v@xe3Dqp6!JuZrC?IW7Z>-eM3mO@OPeTE zQ#XILB&TkXo_s`}6Q!iDDjQ12mVP$yuC-dyQ>JYvOJd3hlXA)=D0W&lg*4$ynsA|{ zoG)5>p}wR)#@x}gcptw+Z~{*-c!?pKZf`R)JxDm2pg4aaC%OOu^xEsmdh$GfNX1rS3oFt0;*gty zoQjAN7P2K?CnC3QPjzbOf(g?zWl{<2NhG0`y1~$=+sh)c3-TzshQSxejV=kZS|A}* zR>)r;IC-K0ivBCqS~Db#QEOI=M|tdW?rL5Dp;&)`NI4feC6qE(ahP|17?-n_x@iLC zW{?m3)qnnAl3s1>PYqXZfYo3p)C8i%AoWM0*|*n#SqLdK=RCKPNuMo4;o76BDCd1`tVWknx``)cxhs`8 z7uY*0Y~TZ(G>_S}J_~GZ;f@udwxb7|M=1WK`p`&_{z%o|fe6&1p6}j0Iu6%JoB`?Y z1i7wA=anb;>jJWeGwhT%4{+ZomR^N!OA8W%5`l<90C|6dB#{EgBfY{Q2d@jN5J(nAz4m+`9V#@2a;ebRTguD>= zHY>L}vt1RbIDQsx^T`u*=17c?ro+633R^uxsMk&o192YLZ{(n+GZH7gD7bsN&qW$D zlP5Oguyxa9YW#tl|B!fe7|=)-qHFT&5&d32^Lf3=J!0O>=fqg)6OrG<>l1&>E&ZMc zxgCKNh}1~7bV_Y~j_|9bTIY=}Ph5=RV>C?|-=^=#*zjKqo47gwjCwNLV>=6EcdlGW z6w$iXeyG~E|5B05*5=?0YEuQ;pW4}+jxN| zza$IA<;kbO9yGIs`IuI`xa*_{^*~fm(1NIe(bYqzwGvfmtI=hu-Il)n=JA7ybU@i5 zPD*y>qDA zJ6|pLNjsWIQZ1~u`geggZA3~YU*R8+uYtUwXC6H)Ql>>*fuF8I0LF zpU!POZj(_v`B&XeZRc>=ZMc#rVkCsvN*vOS8qwGZ8KO%v{Cl)gCa4$UZRZS#-BqCy zP;ng|8VCdQ-ZexLeIe`8v=D&On8#pkUd6WIrIrlrlOxEif_Bt12BJ&t@&;^b+g{YzDq*+PKHk;j6h+^7%F(v&ne)U1A@ZzU8X96VLxs zw!-~OXt_Dt>fsnmk=b87@lg&BX~Ol26}IBI6r+($Z;avtzThZ5F?wB@vRU7$j5T`; z-XqvEI&pgw9pG=6qc z;Jm6YZy}+w)+{^Ri59nu9xdxU98YFd9+dQp)E;|SBsL9P*h=s*G)zRPE;`R;@0_hJ z;$pglA9_PRvP$_jX(nz&dHr&v!~r15AyIpeeQO&X2HTB8*{q=Z&uSaa0+9Y1@BCTn ztBNyy8M^#TpEq~`E&k7Mfzl4=tAgY*5d0u1FBJ8BY05UIzN+O}a;aBJ;gJGWx`V#q za)N3bBIuxOeH7*y)vAyYgK8d3aVh)N%VkpBJnI08f-TcUO!-<=*zwDHWdvV>5u%hP(YYX10hb!F8u_E(D9;jCM})Glkfd{k?m-CT+ysstr{ z62S->cp(29x2F+~rw}iZ(A`}qbpHFCuxa2qQq}U-xC@dtMp>XQIO`WUYk+)o#qbMm zs{ZgIuUslRExiO`laHK!IT_kZp65M7(z&fN$PK!siG-ZFl4EM5f;&r=?!p_YGb|iE zttxqJi9?kfH4iv$;xuz3Af-xdX6zF!+koPz=8u>uG&lOWT)9%SG&NH~lrSfE!B%Q6 zllKmaNnq>LAxQ~pu{ep3^2Dfk03Jho4N9RMn!Iw=+Qjx^VgOmYA1s>$>%SshyqE1t zbZ)-UiRHpN(iPY>PHBHsFEwX@DKiGQcbMgy7w`CFcBlEt37j*`JMJMpmuhCJN!hwwHNe0Wc~(x=us{tu&Dg!e-YLUfm_l%3fUR4*{GC zp&rZXfuky1cr`p|iR7VZlp@emy%v2**043I&vv>Oa0iks)F{qSrMCJn+&UumV0H{m zrA$j7yD^Q^Sm!sT&T4XTds5+@ncD6>8CEx_c9_uwfED? zvuk(c%i|JD?5psO{+xRzJg#JNcKuNuc&Uv7k^QS|m`n)8+6IP+N2)^Qq>v_Qm>$Cf_K%F*j3$3q^m;j?j;1cCTmB8@4`vg839~L^kJuBn8<<2~< z&@)tGE_9z^>))+5Rbes;Ia6pQ>6>AdEroj4%-rjV0Ea)3q{u0Ep`S(qxQD-^ZrC8X z7I#NKjJ@$36c^N$jN=*Tqwjvvo{Z$vvTy>~zffBh0CvT(1<^F_+-@sfT3gTBm)ZuYlJH>X%BzSjV5&W8H`=UENpj{d=P(m>)z*Z{)1zb63DoBdl`$$4KvO}n zEZa#HXPCb!Ksj?{V*yct!P-URmGMWEd{~uu`T{lYOV!J|A1b&s?p2}EaT=?wY7UU7 z!6(m22Z#i+k@NGXWOVYg<-5I|b97zcEtY}&Q6a44fuRnFt^jP8N>DPrK^ehPzoHdi5oN#ViSbGaIf3#8i4^kskpY?*O%Yaju+2&AT{HAz|7HfFH z+~rZGCNi_PWOTPb#}pd!Q^R=6sWdJEy!<49Dd&YsnWWH|4+;K1%&5jw(R+xNy_B;_ zRN||utC52Z^_+rPBFx;jgxu7dPC7e;HjHkfB{di-!Od(UqstG(y^>!w)CgJn;^0ka zcFU0u*G(10i9#yN)gIBTBe|}9vFfIr^me|a^hoZ0J+dCxnq4M3336A4PbY^&KLvXU zkci!mhDsfFvxzlvG+}kit^)O}dlsh}H!VaMp9lCk5EYYJ87bOw<}f5x@tmj9gjcOo z8EZ9QMT`XVw~fxps0f$rD@!v=c%qBRP~0FY{N(TrV!yyR|6xlE`EJ?Am8Hk+3+(nn*Yil116k^U*gKB5teE!sS zV`9>0?g}dO(Z?8kd}i&5)Xd!JNdnweqpTgjCEDC|`OHn^X2#BECXEnwb2S;fIFSE83^@qYX|M>~KBbW7fiJh3g_sp@ST4vGG~$?^4weik27Y2%XaM6Xl) zp@#5Ri$5|FU33f2okNs&qRsg#9K!S5x9ox_16x%vAhEW?yZah(aA(L393|$ zOeQ|`yvj?~OY>oBLx_)ZXG~a)@OG+tn7Ke)oTzS2h=*O_x>SeR{Fjzz61`qx<8++^GoIqg(CV>0u>Ujk8GK$&|evtA!d=oB=ipzCt-Y;mP2I#des-Ei@syPHu-v?(vDP2b* zpPXR#$o-%Weg26CWz5>L{Rv1u1m;bN&17&ijNC71W<(yczf*yBi$-p;eg%{o#1 z)p+cE6nIkRb1->Swh`|u!<_tdzMMi@FoTs4rbQP(bBG^oQ3L!l_`8(@6*O@Dr)6{? zUtN+1MHZHxwMIJ%<^>I#gn<8x&!paY^SE_b( zwo(U(Mb~(<7B@@gtwdZlp=ldf&u$pm=CF8~eIVB3mdupemyTmG<%7Ol+sb3`Q!DA| z{EEuIv?WPVcvS8*?0y~%uUl#VGc$*^i=Xpm%_`Qe)FiDHeNv~}gX7L8zvXHxPshv+ zFJ8`;%Ut0l*zk;dR@X+J#Fo5^arQ-~nxZ|cqXDX>5)-wjM`E zRoSKHmrVX5>>NwrVn!Qk@!zMBN&Pf8D8w~eLfcH!m8V}{zGrd1EXHihu9TqNlSno9 zGJ^e^A|ub0pi)00U5Vs{K`A^RUUj>*U4%rujDuB@m~r^6?Dg>gvfw)NU-5s69S~9X zy3hB-Y{1JfAX`?D>ntpF8&csjdz>GRZUl2=ur@Vc-+zl94}SU^7|;yC^VdV=BxpC(rIAkZRwV{ugif-bWrsfkmqpeKDZpOY zW*fbbTSSHO4r9F1c=ou`6ImwZ2q`xH^|^gqub%cgoco3Rp=#uhLTdoga~KZJr@^vH zcArBDVrVtEK4aDv=7!j{LhNP|=7gBDLhQ7jBSmjlLserFXB94Zudcn!Z-;Pf)S#9B35{9BtgTgVDV#x7ZU zZ~m{tmmOq|1T+}iU_J+(`s20)GE5(@4a1nbO5GNcz~w+8#!-+Q6TXLG*FXKp<7 z+kR1mP4XhGN@dJX{lr-kSHfmj$A*Ul#>nOjMH)c5p=znzaf!$L>nOtajRxVLE?V_I z@|c4M{YH}0p~1||XsYm|-5!x6v;+hdH4CihY+K#@uz$5qk=2!uf6-zy6AHExa8*VK zrLTtcjV0vgOfd=bLIADey0PYvK;7NY+htBYsNBCAc$K`B_3va4l2diaiGL}Z|JM$z zC?^ADM_m%LbJsV!UCp_)e))$h7=v>0{GRWx)VAuNI=$}Gn z5z_rbra}G|fQGxN;1cs+fTewZSsf)*d6Lbvzyf1qE$QaGvBy%Ssi+Z7i|UB`uw}}6 z!muF5zdurnZYf$E*>O{_9&i)lm0Tu^NUb~mx;BrNuz*d}fX!NCH+v^bLho`QLs2+cs;+S2K~mfV-*NS2wM!O4G^SgS{c35;F`~VN(xJ>#?8~ARl2Kl(Q z{Zu%p%nbGo!6Y#j{aIw|KGV3TB5<#1i{AdD9#0G~T#M#-xs4^0Tn}`RAAP!dzi$30 zWeU9y+wtY~&u2c{6Wr94PJX}1(A%FK!35NrDU0ip=@uD`VlRi|SwO`6?WBt4>6phywHSUf_{@*{=Jta?I<%P_!)?L_2<^a4G1@pfZFOh)uFw5g&zQ5Hc3 z=k2uN)tOAr#LIt-=eZR!RGs^GSZFW4S6g7*s$u~Jw+Nn^J+`O`C0jaKpYngnx(vMN zp1Uypu+}H?x&U?B))X%p&{xDMN_TC0J&46?V>-Xe8cWkj;71zvH?PQ_C^43TyDUz8 zWw1hT7e&9^{fOlib0E6lp0gK`i(`R$87*u>)JE7G`qVe+8!#-=gH&^lro!3(Mz_Jt zsRZg_#5G6&i=LnHyY(2^}L&-`S zDJb)iinELtU-!9*Pfe3SYHX@f-LYz!6}j`{CN2pB5D?DU3crv4>An?Czdxgn0Yv}! zNK;4StL~WwD;Q*?2<4Zp8H){eX5PD1jPP9#8kX?eHJtnc3kz|JB}?GYPZ^gG^A%?< zRBic?9@}?!j?#i5wTMTRDjS(7d$D6~ola(Lh#^v*9cl~kl4DOkKu|Vtq=^Ny?`G5J zfq|xS>W}#kIg`@YqF4bz?02_E7Y}N^S^c|%Ti~9AwZuo!rBh1S(ntr)K)MwC^?Mpt zxob9o{q{bmqBN``yce`t++nX5w*_zdV^cMzcSlBPK{Du&db9r=ZNVxw+S*@6-09cE z;sarNlUz}B$PBSxNQt}i;;Aa^ix$I};S~)x`rB5hm0CNm2#qpW(|n}u+&dpRJ{kXV zlE!oRp-msZA+ra5t%j1`Oe}{=V~r)#RAs-AMU|;$uR}MMJ&mX9!8T`I#G^@%brp`VbLPHbw$`yxa>Wf84^KOji*~A&Cc>2Z%&SDo*nQ@Q=Z_q zJrqs;`qxW(e!c$XQPjB5LzId(&Dam(C={gKEK2wIMEJ-X*9$fc#Y4?9gscKaaY9-& z2@>M4VsGr~OD1~dp1wUz;W8(-zHbB-1D6&msbmE&4*?Kn?h^CQNR5m6WK;ja$4IHu z-*Nb}eLG?Bs{8ko2GR{1dM(|Le$aqU0RM_6jU4^;*8YrVwaZ~}E0Pa$juI%b zFa%zFuXquubEvbgVX_nvhf5@Ac!|C{n4RQ{4E?PNhnJ&ce#PhQ{cTamM3!l`^g5z@ zq7+n7q7W%@JXBeXC1;v=62o#%>Na^@(vhjba{iRsME!=qSbkM~?<>L5 z2oF~Su1w^h5CoFkj4J<w^i|{%b7Y(_x{dUET1^Q^ZJ9IglU7>x_0m@aXaMogCNh01hK3pTgvIs7BNIvE$^pBh$8&9Wfv=DRtEDyz2Bax%Iou2&6R zVl&qC*QJ0{Q}}IYxXB{)ch`&G4Fi9&G~kWqSiwnIUe;|jkNR#SMdB+Yp3Nf<(_68Z z3~Eow^R+L+yGE8z*?}f?5~A8v9@sDH-6%uwPG<9YV`1$r&3?Lypri8}v%C73Zh((C|hTifV5uXC_GIu=1IJTxc_T~w>w%+ zI&VuO3v8>>Ru)ye-_??#>!C~#2BcUr?|8V==${tixJz5*&nsNa7WzNQmEM}XhZct3 zg6+#$|Lk$uUEQB>8EmObxx%G7hh=uDb*VNgV9&3uZq9<$6lbl>zT!ehbGCsVa5gpy zJ-%B~)tQH?jP{oURVs51nkryhL{Dwch{hDcfUiGAH_S+RTRHV=@jIYf84T*m&V)*P zk<*DOx30%@P7|-3u$n5b>gjg>Q?MQU>KQQu?Qq}fU2^424*~Xe&XqkNOVoWp<&8CU zw4b+Z#_I94Va1kZNANJnaG>PXzF}vZ9ul*R)rW4Z`(R)Ezk33aw9nqYl z_gHy3$4~cGQ^Q#SVbxH1q>fZzvacx%Zud@R(EUG&sm!Nm$L8r}s*r6JI}uE2?7UJ= zzqZGSkp<3)J`*{gsJaa}+5CP#p0#R3%N{FBN{tTN1YNAU{<=U7hB>-27q(K`eGqTR zet)>Yj}^-|`)k}f2peunyYS0{utgYlwEcYSm_&(VIj-#K(yI=cR&GOOK$-Ftn1SWv zLWg1yJZLy}m=Q1c^Kr4_BWF?qa;{M;DhGUPr%~RZk z5W#3#9-M{$krSJN{h=GI|LjF*#BY2eTDavFx3Mc69SPWkLC9)h{u?`(eln7NrrJeu z9r(Y}AqYGOoPCF3&^n@Q-*}A@7_8Dkaj+tU2|*G}2XkygaL*n9S-mUYPg)r)h_D9r z_Rt^HAEZsLxZ%{)vR|9XDyx80O#*_dCj6hILVX9W+CWaAs1oFt_0OFTrpus?dWVJ` z%aA}}6449I=%c5l;*9rU|9NtzgvgZUwKpg``Fvd!qEt~KU@O_}-x*0BnJ6gPHf0Ae z1qg`kV=j@`LAY}^&jE__*2U9YnIZ}!2Vrl)Fs#km6(*UC>p^{XZ2me*-Bu9p^Q=80 z4?Z(WUMuz8I9v>QbwvrIgj9kg1L%Ww&VaRu_)59lYvaGXP#TW0R zP^Ve$y2?5U%5dU?nAXeZd}>uTO=seap~@g1A++p0r1VhBqL`)`HcTg2`#&D;!0NY$ z>-+8D?wXjvjXY2)Y%)fMtwBHa=9hF8C2wYJZMj!u4W;}lVhh6dxZVR~5pD(gYN-k- zmk-mZ;;I!pcZ5^i2Je(1`^+i`o+7E%!@prLk`nQL7lJ z-~kzEtE|^@ZlhIfzBom;I>18UgW&3NgHVtUW}DVdWutFWO!i{=rFJ>UngxoKD7TT zox%A`?S=MoN9PA^jh0MIG;`_(=Rs3#A|{imL!K_ZR>&3>5kWcwSndKP-C_&Ikpp%? zFY>hQz5XWe4kpqORpK!x5pUDtB+7)wm?pM zzRrIOqT(HfhbWA!k5hg`VY2M9bUPmVYt%Q?tXgwi)T*eV1lUzmEM{ACLWrX z<^0}7Lk>#60}b}dtXrh0oxkcfx@y&yc|-pmv?h1O2U8w%_EyZ1Wwdeu#tb10EAk+Y zI(V7xaPwPJbc+7cuu?Z~VHrcFL{FJxoMY9{|RapL*LRH$h^gqBOmmj7TdjdXH7Na#dId=gm-x+;go;_O*wWA7YLtV!_#M zg|0lh(@eFeu0Y-(jrc@#e%)ZXpn+4GipT$oBov%ghZUT>7!QY8KlX3gJyAYgI-wfX9h)yoEqt+^R51eI)`q8C_f z1Qoo{NX(pB*#FCHs&qbm*?dLh%28AGr5aj(&Z`QnJmF8($B;q)PS4E{0yopity-Al z7O(23C2JXDld&Jx3$hfnOC0R085aau^IXz;RYJ2E!*=+`@IGLV3K~TM1~Dt@XA2yI zl489R{&mF|+%CQ_%@ba7Z2kNETroZ`a_|{H18=U{_;+r8Bv{S6q)o}!PGeR`{8l?296)E0z=rFfzmr) zkgIl=0ruyV^;jX>=EpDM0aj`p$v>gh^bzTPl@5GwOc;bB_V#_pm=jLt0JRK*vil~! z{nP~~V9{i#?Fj?~H_R;$c-x}!C2qIxr*0y!KZ}@r+%B5v1>Vo*!|gi5-X)=kY`ZIp z>xx}R-*15bTM~}Lx-!9W4_T8R;mJ`gto9*j#cl!BQf@km-Y}Ut0vb2&d!Up+K&G@q ze(k1M4i=rgevVm_KuUQeUb;yfkh8{&Lfs(6YFXUOgz`YH2=*@NATUjZXoSpIljl7t ziUs1|^Y^XA`h^>K-`CfY^nuo8PhJf|>`}Yky29NoibQE2O$9^KBB^xGter39AgoY_ z+b=Ye0D|z&=mF4~V^UrYDi5*;qR7l^eY>ANiMf_7sLgsi7DVUNqux*OegS>|7NpIE zs=-~E2=-C`7g)8VZi|&kqa2aUoFPn19ClJeofX3JT?xf-Y7`4pR7@69$)i2sU0qa1d-Iwz%pc};s2TpT$fU4 zMU$@o`oR9N1tKY^^)QS0NAsLjFSG64{G8+6nB^S`OE9n#2`j*EkBl-68pa3Z(GBVV zeJF5z&Y`9Em|X7${6atRNhpp}eOm|G#|LqxIxFBh$qSSo_@n~9W4-tn%BYSgu$DW~ zrWsY{#0&$Z-oJ+wmL;Ex@QejnoAK%jVjU^fQ+i#2)UAPi=C!)-4cq1kUUaq)w)-Yf zVS2vmFl}$h_U~W+`Jsi|lMP;8SN31fv+h%i8T(;|BzLRxPTUTM^%_WZQ;pLxx4L4w z3=P3QsAENksK0pht&Pp%slwDdOfl8YIr^RKC8{35ZYRQ42$r_qDRBYc=_@so5#49p);=`*$o&M^%<^ zDlRv37)M-n?^wslFZIy0-pT-A*8m(fm1yYD=8t<@w=JqN;hi=|?|{#WGUX`hH@)bY zlTmSxSmUbUq_ZoE0&%{C39CA_TFW;L(=}Ysdn+|LX);>ys|?TzzS&sXt7dzjG<>Ru zD&C;wk64Hi>#an$NVX+xRZHOdhqJMT(_vvZbye@-5MXyfbr~KM*Ntpa* zn6Rn3@BI!H+EvTLORaw4GLviQ=@p#Ah7whacxte;ng0dRd(z1Iu`>U`_M*Q*_=|zy z)G}^mG|>fz7EHFgN;r_4)xFBJTVk|vVTKJ8aw$a2$53xi-cVic$L)O`quk4Y@$yLR zaD%^5)8z!e>oSLCOhmJ{QQ(JoG(IG_^>tL`xcf(wAs2q~D{||0fsIvP&_qDyQ*#!L zyr(Z8m4GrgjSw~qYVlKPAO+7j zm!W_=muK?Jhl|rijB}|x*-?d7j0?^FJ0Ya)kh#Y+&YP=rC3T{i zt^QHPqxMr2X<~@-)LF^8Swo%D$|1Nv=hN*@hB6x5@kd-GT>5KQDo@?*AX+1Lq4}^I z91u&P4vG!c@EA16*LxafMNe#Z;y)px+^oN9-N{j@la2PJ*Ya=UVrCz(?Bp|E;^3>X zfih^TEzfUgx48wH-MU`+F5O9qs~U`i)pJ5YY=J90#p+308R9lJ;E>-)_bfs~gDO+w z_w-GM`5IL}z2W04^ADy3sgriog3(1@i_u8oTFznbugM20(`H<#cJt-G6B>^~nqdvv z(=Hlx0H0@{wt-Tgxd(I|RVa3hz{;0!`jI0hN`w88Yhrh3{pd*>Yb7Fmx?CZZ z^tmc_p1+A>lnG-(4iG&zRL5})1b-o2G~D6l@Pkn5rFAQwU_O^Htgc2;`>I7vXbIv@ zv~ZxDLzRjlqA5sJ@6P%EG2@}gVvO!lc!`E6i5M9<5J9V|kkDhBm)^rQVGGAVSXv`a zA5tliJ3yca$Ehs=G!(WD%OjnX$b(Q@u~)L_KG*bNlyE`AHcEa*isV#sg>s_N7v|wI zyDmCzB=8$K2iq2)o4{fP!gi7ys@cT;sqWmrz-qw_raXTIM{|`DkLaG9m&Z_MR}?r- z?2pa12=^vVP9`cB-Sf&m54j|xiz|7d6v^^rMxdh%RB=gjwo%djw;WgZxc6O;8mQ=Z zHVdeiO7o6P1GMH0saq0k>E+h)$cXNYhVN=1ior5+eBDk9u* zocfxS9D1Ca3?w^flfI-2OKyyF6rgz3BwT4KS8C7_+ z;6WIzZYuiM9Z|PT?S!(~@EVf453c#L9&J$cGzl|H{jir#!+!E-;$26fiWiTP}2?x%cVlg_zsg z6b(z278xrGjF*YE3?UPN@1hky1knubWo=OS8Hpzs>S`Svn@xnNFD%a`R!~yKnOeIug04w$C`ZEJ06&6cR5C7rb04!VGP8nYHWBhj^ z&jLRO1l-H#?{li0^;I9b;`1jOWscOCxUdI4{1AJzHRmtJnrVL@D9X$0+7(G~IL+Bs zCp%<8{m4%WfR;FWm54zECweHJ!-(IwSt=)JERo7K>)mGZ*0OSHd5bsm<*)plj(CdE z$6>HLN^jZ@NyoN&nah4{OXWRkcD>dTSwcP-3~cP^Z4_qK-win>Pze`yhX(jyf$Qjm zW|}7p`o%$vp5TpDaf#Wa_5MjgB|C+rldn9DBoB38T!>GZBV66M=axJJTZN%DzLCbS zp-03<$Qo_27*l3iL|)?A>?O4INQ@e;jEAKyYM>fX-Fru1-WcC)Y$$?9!dw$QYKypZ zwq-2(k8=oSa_nj%Mf6lCrw@QsT4S=uj65$-OHM;dUGNc;f$4@X`>?bQJ=KEaSB{`L z`%9C+$EzgslB>z)NNctwOOuTtj@F7sr>ReobVFJqsRaf$)`X{cpnS8SeByy` z$w2s1M>1c1X`(q9Lr4uxjM54nskl8g>l(TddGa(n0s-5rr77%OJnwX#Xc zLN>e%;G)!HhjB$Yc9ZxSV?}D5M}i5#^Rx2s*~Ey5e$kAU=6axJiUEd&5XCF&0+&8P z*{+Z{ZU2YMe}6HWiKGHoMk>}-g{Jvi&wP@4#Hc5VEXIv;6eiw59`vkd9n0!c!AE~# zA7Y2(SX*Ovi6oUZ{!v_k*%x<(-7{9}Y~J0h?&_SarDpt|r#!5f-_3d0pk>kMy*!{o zbewenGWe=5dSJzb(y1Gz%FlE7&2FH29>T>p1ZrZdZoO$&Shy7#@*dDxVyVUa6*va?(PyKxO;GdyIb(! z?k>UIA-LT|&e=QJIp@3e-e2$cRIOrF@^r7BnVz2Ro|f|3gAPp*ig0|<2pzHM+ay3N zKG(Chwwfx*jl}5D9z;0i>EAiR=$X|^bmB^sj8g6h=g1csm9pXhfx5 zOe|?X3qsY-ZVQP12=VOWCOUhtZ>bL4o1EsM6ih34Lv6qbhh@|jPpZmv(UZGAX~eWN zDM*0RVfn-;Gu6z=*DVTx$l=;}c)XrLmo=G-a7+%k*$H45I`P+3w1D$oUGRM$l$#3) zzL7om6tv=doz~w#d6r|(E6-o87FweUF4PYySOJ-pE=yD-q_hgSe%0ru57Z*c^94Kf z7a-mR5Qb-(ZI< zz}+}^MSZ0XZdF6QH$!|BLX}E1s0u&O)xs&^0Kq6VtrI~h-BX8A`Nu<`Jobxymc}+x z%}E^Gm1Z)!cpgB+AI3!hyjc7--Wq}mUa9Fj@S1ceDpe~*Vn-qb%Jla{RdWGV|9-XT zhUx|P#HQwi=@C~wwG4P2**#Jy^Nu|>DD!&|v28?`Tcb(6THBdDs_deg2x1C2;Vz1v z!fTX_0mf=Wo+brON#*yYas%f#4`Ko(V1qH`TWUJl7fqH?Uznn>mPJRcxMDHv9cm*B zS0j>^qjxp{K}{)PC2|fElhd3RcVw2G{)q*p&CHE6%=@;n17!tDeUu#1a z!ka9XNy|j>r}*mQOXW*d@!s~d&44oZU~`MSU^5tH;5#TDaO9%N(NYevMKY92m;p&D zv;|YEuWB_>wUFUlDg)xFF<2y6WU2hho9H>8o_hmD?MUhGF8X%TAMD4?B?Fl6B!{e4 zZSFr%V2bw_)aNh#@b71ss(4%f(c0qvkvAb$Fwvj3UHc4RQ{Y`8T}n_|19VcR10Wc1 zn6fDG5I#K+2{(44c)#guMP@xB7bvU9^?n3gMv1az4JgiIv`Hevq~W)dhXG5nPH3k(=r|xJ(-r$E>8scmp5@}O|xcSMJ zdsSB8o8S-ga!~?%=N>dDI4T?l$Y8d#5)qdpjA><7S8?^WJZ#*8n^L@_=z+2n|Dx01=J&_4943o zp->y!PvrNQ96LtMNiE3sITx;9QY5f$Yo8S$_>Bt1zF}PqgCv6_n@6;(KC;szY{xYF zOnT!$RmY2Lufv4htD^(8d$e6!|2wy^U;VpUA?#db(Sz z(DMxprWN7>?4q>6&PHCki%eHeR}PS>^uAzR73wZAS1BY1m#qDE_o$(wQG4Z;|BRqnL^-jDCrl_K52N}DUvdho6w6Vq9K7%6sHFzBws}_ZiesTUM za&T|Tx)BI^gk+|OiE6)B?)8}@*r{qGioIiPXy9+WIopeFsK+C;cRo7m>29!zanSmp zvtcSdb2SW^LrY|RL%rdAx@xuq@F&dMA0@Xg2MaaBz?c!*(HbXtTvQ(JUkXiqvE41c z8+uwAljkbpm3I~2mx4(#^G|Wbr|1 zbzJ$fBG6lIc^+U=6Jv^IXz@BpXV6B^5|y!queGM6L;;d!aRuazZ}zO*SJr$6N>A_n z9{M5-*3UPH&W0WExeF_XFmdJVX|;8qd(J^?jr# zG*t$OI>M0}gSvJ7d?~k=%T1P;Jp83d&_{em0xo?fT%mYSH8zfk6?&4!5WCUD@esV1 zwiNX3LjQkX0Cx)yWu%u$1(d?aDR788m0c8?i z)|*E70vQ_l{b!0#$!tt%X>VSh^ax`~Ym~@I>A9w9(O3Dr76;bJIA-!ZdFD?P28ka6 zmhmon76#0FLz~-QM&HR3cLjD5473IUDmQ%Bv`Sd^<;Tge-@FCHF9M>~KFrB@*;IVX ze$eX}mv6Uho$8*T@uC8R5oa)d-T8DL)I#?@t|2cV4ih7WfgC=`)UW(9Z@_n&*hD(4 zJ#Lz~DMb-YLKPO8sO% zhrawyjwZ-chH^8z?mfAP>ziJpp*n%1rjDYx#RizUFqj zE!o7v{A}=GR%TgzGDsTl+sB*CowtXmvt5>eDuLACfiy|S7{V4*0Ujh(&|&`PqByGj z_XnQlZ_t6$^9xMS-Og*lU#mRE6iqMwy$gO?sr^jvyx&dw&H8BySMm zGiFX zp>~DGd+n=wirW2RStPRfY(QG}BFSwqsEZQN6up~`OuDEZXpf6s0q8WRhc{M4xBW2N-U1@%(< z+QP=3!80$023N!^{67VPVQ)J!`LV1hpneZ4HKKNo3P2T876aJLfb;ij!Hy36(=y%3 zfX*VJt&;tRi#Afzc$2ONv8d0HVS1Q2sS`za83R18$#seYC%kOc=#*%bDqS7Ii61au zzgavkz&+i2FER8IAfUT#EyN63e^4X#)Ihbq-BQF1682ue=Y%Z~OchK`=}@Jlm-0Xz z{s>(QU0dWvVwVV(i2-&(5}Ka^muX~=5#rWXRf++d0X=y<2BYE2?#q4%uL;j7up=Rg z&)(Q7<>XTz@r-)X*7$18U6Rv-!Pm@vRayq3f!9;@DPA1{2OOu2BZ3-P+@wqgBmyKt z8}Yfjp#;qDyrG7vK4VbGh|3s)JWqfx8 zmEFZ;DwYqwFF!+RfU$5lSnRSzf0Dl1n|l)rR1LST(7^G|!DgzhT}4`Q?(2T4?*5OH zcc3&=lW^0ZOAYcJ!C=gvJ)u!o8DX* zn7dQ8fqXP**7B3Lw|7QvWT|AS0CFD6Vo*r#9wG)FV?_usBMm>(WGGndq9P=u+qV#52rDg&@G;(CHBtnw zh6g6SX4yFfp7!B(K8rZ!R_i61m$G&fjSA$HtaWvIc_0^>c-BYy5fIT^6S)ZRDh_hG*O=G_(z%_mSxL5bY z;?lnFfCJhD(9!jn_#zr86`dZlsW}S3VcqY`jm+}M7NawW>(8U+%gB5s(!3DW6ZkH<21ssS1OwEo zDs9+40i<$4EVyljfjWUW%@XTp9O6`t_c#J_8Pn3XH2^NHc{$lyW|BayIw-MC@80Zc z9v@7J(JlFV5Ok0OWnv(3yjo!&fDIFXJ@K&f>6>4cI~hB{m|Y`$5r;`NvrikHoLFL+4d ztJ*_?;`(f^RSDl+x8~PMOuGy#o>us)-Kap7C>!oYh_CYM}lgYKNezRY=@U zfRY$-S+aiYcQ**_;=7%MJdOg-ka1)B#c;)>L<$yQ-Udga@J|v^d^)0X zbm8bCW21_%UCBZud`N(^FbgCD1>-M$>Y)}%Ov55z+rU9r7uI>ce!2pIDndGio6IM|;$-!9^M?m-%_nvV zB5{;6b@?VkF}03MwU4}h*Zs8;#0|iXP>zLe^;lCKuzW*F@QWlJ@(yODhNOmi5w-Rj zZ^SI}zouQ-hLTalA3G>5zz;)>Pk*50Q7&~QEDX*fnZ*suA^}03l@+J)!+Jn59fss4 zS(A6TP_FIrAAY$uJeFX40aQFf<3wS+x5I3sx^$^~#B3Wfv8o>8(>qX_YVT_LGe%Jn3Z zQjx@;iwaVTRk@&jeas>U1QsUsY&$IwpxX0;2w~95c!hjTi+B84*=r~D`Xi(>*au;R zbO;F2!VtjQ$g_}cN?f!U)d$+j3aG#VPC~>0CzFCCn&?kuu9}4?aZ*L+gB@%DiZg9a zf={){BGs6fdKr1vTObQB%FD;F@gLykelum{pQCH0s&!2at@tFO8a%W5QZ*5-T!&WV z^ZRB{fFuffTT%0STOF=k9RQWnBEeCrp80DEaO)vbqc;;eEhu@FaMJ-E&1n+!0MD(Q zcsoGA9d%$<;v!dt>6(UlQ_`F=TbVCwUXlXkb_>bYK}kN<5k=pnZV-sB0CfC6J-@Rx`4Ca@9)GC|99AQ4awPZ0JyvEviKhc<3n6A$&``w=iQplSW z>}$O2zzLGKRbLfYu)~_%NYc*hSrp4mzom{D#;dU)d`&{P_a0C9E1pMGQfT*e%&Q>- zdV$ZVL3kJ0c?jnh&WR|>YoK5h#20rup8@26&MPBrJF2Ds|p4w)z5??w$t-Rl69#R z1E#pXWT+h3Y;TyaMA8g{HF6gOpSYo}+)qb;)rdqo5KO!JMtJ?n?nfCfE|T=Oo%}Hy zyLlF|aF^EtZ`N0~OS=t%)u4iG@=Ik8uyJd{`0YAB7}Xhm7Ib+S8HD~Sc>D#RYHo4& zU%596Z9;cu6n4n$v-Ue>jode`_eh2ZI|m9kS;;WXgJ(!IL;t*B7Rm-?Ws?u9&JfCw zy-51HWcInwF!7ws`xHsJfRjVW)BkqXly1czGv{B?sGgt_vu5ag_?S~up{rUqNs-s| z2PR3voWai53SXwb3ON_?o1qjRs+s#1wiq&yY=1ca=8;KU^#~=?};$L?cEhN z+I;70)CPzSAQu|9Zj?lNS11Q;uoU!`prsNJbCwqQ&}&MZ{)5Nurm|qJW4#bx-U{X` zI&lN}7R+R^KRRh2ZiOO!pFV;v+55wUWmUQU5n>&@L_0m~B!8o2ngq&9YKWmmAT^+) zJJm5=>>F~^Qx4>S#e-9QW*_!W%2rSCFMAQ98M*@6ij?=q?E1vn7u?^^_qOiv(WGF- zAnTOk;SQCImEh$N0|Hvz@U8$65isCeGc~X@AZ{RT+6=DPRvW^2QJ>0*z7m~Lob8Gc z-_DJeKV?IHJ?8uz3!-PpaDv%7sBdk7%J_!SFn#@QD=4zY`51@;ghLzg_RS6ZBA!M5 zeI7|+)Gn%_9>a*NNl+`EdZ>am?7OBY59#s}X^zu^cTIq-P+^09+~{la=+q=Y3>X(x z;U&rtmec7n4J}E83G)m=oQbpTeJfrapiGUiW{3mnyafe$!oQV+z(sZMipmC})=c41 zE4yYN|IL1uryws$0y*L+8A`NhhDc%T_|=#V?<3jRcGjWJ3n*+@O9shnGu~Fxi;`t6 zgowN>A~srPt?da5jeK*W8H}{&D~Eeh{!hY5*VXmx3Z0087Ej|EGcbUZd~xY$FrP9) z-MrU$TMSnMAXuL#G@zkUa${yK4H{FT7cAZSNDbc&yvE6d0Ep@~UA^^U+j%%+G+Ihi z?STmSZ0Ml)?>VERua##pUX@-9sD$^bg~yii8E4a2}@EBPi10tDk5 z9PlF>%CiRG<>eV*mzOyz1XD)-j@$8WaL`^zq|Di@hbobq&5xC2NKEel7rt#w*Vp^< zbe4#Vgg)m@9sSY4_63%Zkhj2(<&fSwe&@iApqn|s$WXm~T8#WYx2z1@Td%4e!^v7t z%pxPL!ZT3V)i)ALZeXZcct0!Mk3c6K&!&Q4eoqq+*MOhf;a=S$N659Kj>M428!lF} zWugI#7wE{|8Ib4_vg7jy#JZZJ%?bedIr$JB0Ru?xdFJf7gS&>DC)ChABbX-?^wjV# zZ><4^M5X+ZLgz7lkP8~Zt!!0_hRj_eokEAHwQJF8K#;0g3Al{Ay3U+#PEIyN-v6nb1DeFOs2!^2oRQC&y47djFr>LwgP`slM> z(=xK4HXu($pWP24O6()~fLuh_Q+JFfN(>|vEDYq*0ONubFdrcpEPNt_1`;?{Um-M| zKuU&7Mq1N5H!X=Z(gO5?xMqroM+^oG)hS5Zu~OEF57%7{h-vX_OhfYb*{)gMe{j~}rrB?fBk*gx-ksQbd1^khni4ly*hbI*zI!q&d2pQ_` z5S>23c@x`=gIiu^Rxj~Mho(}CtpMz#n8bE20W7ljMmnUnEmJ7Sz?3BSna}&f+u6p? zFM&IsQ{3<8whGOR<1Mwd5E6HyOuuh#h_0BxXR0^|zFx%vf8e2D= z+E13A`jO`8Dha^kENk+iD^hTr)q7&I2HhOsvB5{Ch<_jpH5!+bgvS_v#&I4}aMYlA zmO(r7T{!MkBYDA-jG`WGL}%#+Ok zRMfjK`ev6U9aTzsp)|KYX0-dFTKR4~pKm8`SF&W}BfeK4kONAdsKSmH%b)6BKi8RB zHHxhu`l#Ygq`2kKi`&$8U9*1$A2;w&7Cdr01H&Rn38M>2r*(hss?m)^`NKq)VUNAZBHW>Xndsa3aYu^gl3H8~bz?8T-@_yDB&qbQQtmR0q`! z-)+U>-0m?yIfF0_FFs|zW+#f6mgLr7#h;%y#{dJIY|z9R(h_ee&{r!HO9`9_%1TEF z#aUNe9-h5SpaE?WfF3_!CKHtFz#BKtf?b>0+g)CulxJJYYv#zAn>R_>UQWhTVlpvN zhy!gf3h55%-he$=hEK=WaiS|+*1M9VMo-{b@s?)n-nR?bhn;Sh5wFX!OsosNclH`a zV?Ckiv(UK{UU{6N0V`Rf;=P$7)kz^L?4S_ZDUb)K#}eFz{L{yyJOBFDtdR=f5P$eO z9PgDhV#R!!EiY!}A;;L9MGBF+D6t*f6DkUzDo{$g%mnTyjgK{7BDTy2Y=2~8nAJ2l zT|)F7POHQkyKpCS@0@#1SG2j76wKNZ^R>7LF@lvMlv>MPD!HRX*eC^ql=*|#wM?ZQ zZ*G}{Pq-k!A>7vBe3WL7x`2)!NJ#WQIDtwDE3D#7Nn_$~&LpPW-+zP9clG0obM$Pi zfyOx(%u~>!4Bj_Te^CFW@U_HQc2?v`XIQ~iU4APd!YT4fZ-Lc554B`WFTo8T;i0}3 zF>;v@BI(?OPJS4S3Aw`EZ>W}NOkW%DFexN8o9sGompvNMDPqQm<;m(|-r!}WN=Z9k z2>ZiqA#7PgSGT{cOAxs*mel(q_TwwuB1bnPrLNO1lcw#P7M=tfc_34BOUs{!*Cu)=x_|e@nXv>tap03U z3lmz@_^{xC-~qe;?a~STnqy^pVpk;Y8XriXV;FEURJja_2e>toDPET8U1Oua(-WiU zt|ncpWRf<6K0?9c2b@eQ@St-lx{tYNv(hpwgF-3-p@%_ZGa-#lE#P1XVAeNTx$^Vh zzA$k6_Iz_(WF(SXdxSf@+)zu43m04-bA&D(3+jRTfZ$X6xXHFylffp*-6o#Y`KD{p zME`!2l1~OuQ_!upn})1?J!|5@sKhw&F745a^CSOo^ix|?Ig5z%p&e6*KB>EHyxhwN zG3cZgjP@6)Y8nRv+%9fR1=A4ew*x_Yj|=x>1_zy!FIK8YmlMzMr%BCfA;(GcUx4pD z+d7Cw24LmESu$(v%eyS{lgG5FY{~p@c&3g9bGh4dtcHt~h5UK$3O=K72FkfO^>Bcw z*vC=dNux1+WJzBEFtg$r3uS8|{Z=7$WEd)FHSgBT^7>gU!=32S?d|C`F4>8Dw@{F4 z@%xQNPUzwq6{o1%_Cb&#-VG2G8kHR-P6=Or(#sWZZ33tt-?znr#wcgs)9(OXE#$Tl zBqu!0&1PiAgKRIDu&Ya5+o5baH{pJk?!$B{m05yjy;540O-S50n8ry-2iaCDPILK2 zRf@^6*f*-Lq&0Y$14(JEW(GUQix5B)9rZKUh&R zMeMan_`~R%F=9ZkOipS(I@pqNW^u4P3GDr7VSP$tqWfc-ME-kh#>9;MoqNuZOSj-e z)5D~sLjzDh&!8Co-PW5^N&N5R?n7SLlsaXCEOd<1t0Ebxjx>!YToF#-5NF;74q7Y= zm}D831Gms(Qi*EX?67=>5dm}E#Ayu~#WSXh++4Y31{8g{1N&RS{PRydvT~cuKk8|M zo`4rP9aEA#(6BtiGrKr1LJ6u>5Q}1O?6g{rusK_KQ>l0%zk;8#7(ik|!)@%|PW{nT zhApLN92*n}NFC4!1@W(5C=QNpmPQV*&1AOUYsxP%qCL|nekYbq!6>8*MyHN;F2XWh z%sJ$Y2rw|I7uolII_j2^p|2h9$UQE);-b)LJN%;nC_s! zo~B!tDJv<_RzOGA1h$sKgwKwl*10A)F9>rzUqj{FZiiF@DDHQQQf`Ae)HpSf$_n-g zg{m?@kgy1`lFEZ0IKIudb;V}U3ZZouy4qNe><#-0e&f(^Z97PbTNay$v#fqeF^*Wb zG<2qOU@RRPw!&p*ac`Dx6c?1w)Ku2POI*rB>4(}h@+yyfl=n9$d(hU>w_Z}to}-?4 z&<)WRL2somp0`Pu|Hu(?GTqM0T`u(l_su=N8pmZ@?J}c#+2SjodA9h*s;ZyeXcorQ`qlS~>}Rztj=%SMjZ~#Wgrnib z2MaJXUfB8Vi?nX!73?4HFw;>TToEC@Jr6hNo!NNTosoux7-8$0j&cgQvkKb1^&W!Vvd*2wLtYjnE)g{eVT#t*YwZQF5HwiKUigNqxCB7}ZQrAXm zp zkYa`SeK8ecL(y{ykkY_g`{B*HmBB-{59+P-_eJsABj(7u`%o6?>FG;FbQ9@pOCI^V zp%4u6xPze2J$fvQxF%)MPX~%iKu=@jWyLKiN}H#KqwF#_E`6o9+YMBLQ#0FUef;;%zolJlw36e>xR(la`xu{4VaO!_CYwB9vAF+SK~f zbSh3+;^hxyGJZxnH3Qb^Js^S+(;m9@-fyWa7$2h7;`SyoY&CPNpb~YD?l90U)!#V6 z&Gk}YY)n{H8a<|30YzQ3bi;t4(lRbXEAwDYNKxHp)e4mFgZmkn3i=`tV5<8vSOOJ1 zt`OdDg{m;)(JqUPtqY#E;&s$p)i^KbRDJXnz^piZDlD2_$>$`}fR<|n#R$)#NjJ|I zRJlDcXy^#Ms|-%nmO+vaqB*gdT}N=PZYItAnV1}yz z@(krKk!I~=rEg?!W^M91%`@+Z?57yfp3tMN%Pi-lSTdT@C*_FYz>T3`6GO|oQx4W+ z44d_OGQfG}nQ3ns+rS2@(j|Dv>@>)=2AZNAq6luZ@3xK-6$?6)kiU_x;Wu@B-=ALzo_$Rab;>g4+3Zpynw zZnsOHL^6uK(-aCtmLKT9MoqS$kF7Nk&TJ(Z8ib+9*u)9KFn&=QqpzpsHzP0)5h6beo=rbUoRm6t_o;QP!bVoYNpv8bI=`>>mt+JEg}&#f!k zU}OBgJciasGYiwlm8aGaOzOE*{QP)3JE+qa5x*g2mC>5yOvKB?O%vHsWt04gYGbNc zlJH8)0@lJnO|LBOCL{21&T7CzXxz8;<;_w1%W`7t=@n0Jfw%c1Ka|_ zkq6+fUk<(c(rR4lltZ)O@p)UNz)5VKKcC(zBKwd=<0SIS0{zqO0)6|V`Ss#vBC7qI^R>TH#*o@RY;*eXUS}A-_Za0r3b)_O*%u%1DYgr4`WZPxu{BXa( z{{;IN+yAEwf&j4ne`_H}m=l}01NgsD!1j3UHTSP~{?#!qc1#+S2`Na2Y`B$YNmVr0 zj6rEnHkV&e(%8j+gpgdh%*KW?RP|s{Br5rFXNW@tqeNuB=>5iq@-(BBh60+EJ^wXM zM#JF%eraMD#Ugf52=na+6{`@jE~3~|89n)RN zL!>d!^qQ?jr1~wknKXS$ZyMEfmvkni989M0CZk@kmCs(M19-aBt*J52T1JlSQ`;$e z1ohL9{n?phndhuAcvT{V00n*CHd?LcmYe4m?@Md`Wma@M+ca7%44n)qKmR^2o)5ZO zJGiIQL0_2Ov5_J>A$e517rlyM*;k<+BC42VzGBkskbai+JvThYUV4FCy8!(kQ)z5t z3{x*wwiLKU4j7WVtVr$k@_9%16mXJbzwfG=dlA2kh zGE*29=b*eA&P`4SplEvpj(dr9foy(3BfI& zvDc&#VpdOxqNIw+Ka2+M9jBJ45~fE$3=ySajjd1xNB{cC|Dr?Fl zpz#&)xr0ek+qFCqD=dUP2jmu!x zwQQQHhndr$jxNCN&T4krICbN=I0E6<8l$j@hIMM{F%8Q8UERx{L@_C%%ZtBNx5>En zeGcqat6yY%T#QEb41F+CXaMdfo4*<=%vmfXkW)zzME7um+)_!9L{D{3s-^g<&7#!s z)_o$}QHA^}HAecl_J>Ej{K1v0w`Aqz@`hk*%}xqcS4WwxUu;sjHljh?Tf(9SIDHiO znDv@*5?-9O&d&%7R|&Bg%OhZvE@P30yoEOzE&6y|umP<@;XZtja@ROr4$vN^oX}G5 za^KRQIzGw3pHb;tJ=_g~^J;Yk*r!@*1EnZ5I4v^jk{g>k8la~~x#gC+JXs$--R(a; zU2U$;jYZwG6P}(Dw0XHTK4d6Z4ocq`@ij#yPJI05rcnOQvN{4#r7!@Z?r(PcZ9C+} z%i1h4!UevBe(@k_o(~)iRtDQ&JZ8-5s1}JTe%q%}h8P{Xaxy3X{I=OhXz`Y4faLBB z-OR%7Dz~H%;*F7PZ>-xe3FG9>pe4(-g9A&m;rk)6I1GZEHFHXX77EuwfdvXQ7(q;QS}c zwBzY#2SV=#1t6Ut&AR8qkH>RC_1U4#MJBb!86%KgrN8rUEe@tbY&M7EeSyI#{i5{s ziRrrxY_I*N={^L-!%$f|N&d7se+x9(&(|HwTf1J-kAyS^g5*poTcA=l&%O_hXtuM~4e8Sp+tv$3ItS3&EGxA4syjY@8hdNT#MB;P^B1Ta!bI=gfJiatq zH+DJSljV??i6t;$Kf?<4Cc*NnKj^8gs%=ua!p2gg?L2(uZNk(Ms?v>dw8aIxL#MJE zS1X6Z&pKz%t4-)pT-`m{hyUTREKA>)&er;UGwvdLa4yeOsLTBFNSK2_7q@MNUIY80 z(U)QsgNKa5u#yK1q*P?&M72Rjr*^M+k zUfDJ`(%Z0?1eqXKttny7ZAbQhL?5meC>c~CEZ9mV5uqW1N?nr>RV9-)T=q?K3tsez?(f@{c-**KP0T&Gn@Z;uJfA1l@bf_Z=qmvC*X0 zzC@_VB02m$iJNu0(`0##Ce)*s`#fpdjA(=;f|>QEIA;lT#sD^=1nX%HD9Lk*hbts& z33vcIFbhVc>5kQ!xcyS+GCST{DY-Kd+ovf6h$HHUxX)9Bm5Mq)+J#dw|GBf(+?GgU z0n54t_`ELfFC)px!O_O*b$QcAgIB|{XhmT)=VeQ_H2S+(PH7?jrD}#d0-r^9HQ_T$%B*( zeMGy`lnN72cyc(DcHVvs$7_{x>yOhQRXQ)pZYKCQmkDE|!mB_&(`s?RynM5VmXNqrKy#xr%qn=R6a~T#2^?yOOsYJ3=AG zlf%C4?^1F$jOTPfOZh>LPO5i!xlNDW#wAT;3@>#bFkEA*RSonN-3@hHS{R>0m}dwa z!*O00DorG#0Q>%?7XO0>e%cNH zi;A&;bY#Rg0GGxBxb*Kn&PLXTe>3Sw{F3!15mKN|&j$au$flXW(5Wy2)z*@f704{C zzQPWoj_aLc7f-0s`gif{9IZ?R$u`f)Orv}Hp~A8^f$`C%_I@Z9-)2kM%)!Ag0Jd}h^lAT_Egg&; z9Rc2_pRzMAe&tm=3DD^o_abRl3;R~6=}0qsr9Us$0I5s1fI*_@_hxBmDJpWaQ9v+; z^?j_+Igdnc&*9R?S;JNsMV?Z%s!{cP1l8d~g)YKc`dxSk(-fFc_IPv= zV~*{v`9|CV&`Px`qxV=?mxbpYy~P|6r35T;rV{7xX2R{z4?z+=x({?s-%?SCJQ$5a z_3g<~-N-qr>Mc@TWWl-FVrd>HS$HOje{&A}L8z785Qwj#;K@}1c>@fgfw9JPy&Z2j zvh`@7A4511gKXE&+1qI`vJe6u5q4G}eVN_Zvu)-R)&R7cHkTH(#@#;t!>v|g8BcAq zncuh0=3=O%=W>|0Zfzf2Ly@0-4}=%jUX*UA@L=Iqv&L>i62H~=m;)&_(A?KPskbls z0R8)yN4jl!@YsBH_ISR}p)H!Z@bNlw#Z1!ysM7q> z7h-V?mlr#Kuw7UnS9cF!J$nI`?ceKZU}I$k&^iCLp3^J#8$?(TYnpbP?_<@JIi_kU z(vN?*F2QE`bh19eWlc2eD3M7erOWwA9K2bLOPcHGnv!A-BV|jZQTO*u@C8p$L#DrB zbN%?xy6hL=B#AOjDP>`skHO2wUyH6PtgwI72|B5Is{*={R!&s=S<&}M+SW4u9Z$o> zjd0zP-CJU&!Yg*#>PH0q!0;T3aojsgL(q@ktl-e06*9h&L=|0G7Jt$zhH8@W^DLHJ z%$0gk|By_MUgelcUS?pHN-kCr*MXeNn((|KhwYp8Vs@=Sbm=xOgJ`jJ3u)8HfiYIR&uMrU8r=xa-9H1%(RAFNRf>bOI>R>>B$qbwP{#Kpz~95_481FO=plb&&M)6 zoW)!E_}XxbrMcwdyD(a!zDx`|G}*?AnY-@eNotX%w(1I-Mas8jSNQxo#dsZ5=M_(3 zJF$-@Ok?Dar1%r^Z$r+Wl8HmkY}U`#a?QoJcTf?dfzXf@^tsPF5PPr91$mFgN7qps z#BB$^uN!XV24Djxa&{V1iS3~~*Ypzy(&C0WY8T3mrS}w)wzgZ5wqQAp`}f*RX$KjU zC0t^BPI##=Kep0)X3VAXiTViqKNdB=ul)bEs4+O!p2Y{SrU>8$?>9Zo+EGPM-}2{; zLi)stbte%T_h{NQjMK0y6f{4U-rmgh>33m^?bkW($@bU;-g-B*#gB>2_r46Ho%}1B0Le!2ndT|8(^N4w-*H zua?H^^HW_@koo@xdG-AM>v;ts1$=(f@O}aQ%SWm<1aE@~U@>CA54|3`zn-^%ufG8T zj2x#|k@&aE^iNE38k8X`hCo2nLXbb@=r2qO0Q^5O{f^^L@IP;=e}R87{x|rqd+T4o z|2bo?7j*x6UWdPH_M3h73+!Km|MSA`FF+t51oPj({<^;V6a3Gcs9)fY7XK#sANNwf z;Qy0qfR6j`=ap&;>%W}$zhM4F@}DmLzo3ACqW*^Y$-#dD{;plUI>UcG88-h|=--^W z|Br}7ZU2GjH+S8CMf9gj`4>e8eQ>oWdnru{;t1-N+mx$l2h-~Vrv{8IqQdi{fv-;w-RLjF|De-ZNI zFHFCy>3i;4{$M4^mi~%mu nzjc8B8zui-+fx63Q1TBf|0V_ery#-s!T|~ed{g=K`s4ox*`uUY literal 0 HcmV?d00001 diff --git a/docs/superpowers/plans/2026-04-24-erp-product-landing-page.md b/docs/superpowers/plans/2026-04-24-erp-product-landing-page.md new file mode 100644 index 0000000..7afab88 --- /dev/null +++ b/docs/superpowers/plans/2026-04-24-erp-product-landing-page.md @@ -0,0 +1,1261 @@ +# ERP 产品落地页实现计划 + +> **面向 AI 代理的工作者：** 必需子技能：使用 superpowers:subagent-driven-development（推荐）或 superpowers:executing-plans 逐任务实现此计划。步骤使用复选框（`- [ ]`）语法来跟踪进度。 + +**目标：** 将 ERP 产品详情页改造为 Terminal 风格的全屏沉浸式落地页 + +**架构：** 组件化重构，每个 section 独立组件，复用现有 Framer Motion 动画库，通过客户端组件组合所有 section + +**技术栈：** Next.js 16 + React 19 + Tailwind CSS v4 + Framer Motion + +--- + +## 文件结构 + +``` +新建文件： +src/components/products/ +├── product-hero-section.tsx # Section 1: 全屏沉浸 Hero +├── product-overview-section.tsx # Section 2: 产品概述 +├── product-features-section.tsx # Section 3: 核心功能（滚动叙事） +├── product-benefits-section.tsx # Section 4: 产品优势 +├── product-process-section.tsx # Section 5: 实施流程 +├── product-specs-section.tsx # Section 6: 技术规格 +├── product-pricing-section.tsx # Section 7: 定价方案 +├── product-cta-section.tsx # Section 8: CTA 横幅 +└── index.ts # 统一导出 + +src/app/(marketing)/products/[id]/ +└── product-detail-client.tsx # 客户端组件入口 + +修改文件： +src/app/(marketing)/products/[id]/page.tsx +src/components/layout/header.tsx +``` + +--- + +## 任务 1：创建产品 Hero Section 组件 + +**文件：** +- 创建：`src/components/products/product-hero-section.tsx` + +- [ ] **步骤 1：创建 product-hero-section.tsx** + +```tsx +'use client'; + +import { useEffect, useRef, useState } from 'react'; +import { motion, useScroll, useTransform } from 'framer-motion'; +import dynamic from 'next/dynamic'; +import { MagneticButton } from '@/lib/animations'; +import { ChevronDown } from 'lucide-react'; +import type { Product } from '@/lib/constants/products'; + +const InkBackground = dynamic( + () => import('@/components/ui/ink-decoration').then(mod => ({ default: mod.InkBackground })), + { ssr: false } +); + +const DataParticleFlow = dynamic( + () => import('@/components/effects/data-particle-flow').then(mod => ({ default: mod.DataParticleFlow })), + { ssr: false } +); + +interface ProductHeroSectionProps { + product: Product; +} + +export function ProductHeroSection({ product }: ProductHeroSectionProps) { + const [isVisible, setIsVisible] = useState(false); + const sectionRef = useRef(null); + + useEffect(() => { + const observer = new IntersectionObserver( + ([entry]) => { + if (entry?.isIntersecting) { + setIsVisible(true); + } + }, + { threshold: 0.1 } + ); + + if (sectionRef.current) { + observer.observe(sectionRef.current); + } + + return () => observer.disconnect(); + }, []); + + return ( +
+ {/* 背景特效 */} + + + + {/* 内容 */} +
+
+ {/* 分类标签 */} + + {product.category} + + + {/* 产品名称 */} + + {product.title} + + + {/* 价值主张 */} + + {product.description} + + + {/* CTA 按钮 */} + + + 预约演示 + + +
+
+ + {/* 滚动指示器 */} + + + + + +
+ ); +} +``` + +- [ ] **步骤 2：Commit** + +```bash +git add src/components/products/product-hero-section.tsx +git commit -m "feat(products): add product hero section component" +``` + +--- + +## 任务 2：创建产品概述 Section 组件 + +**文件：** +- 创建：`src/components/products/product-overview-section.tsx` + +- [ ] **步骤 1：创建 product-overview-section.tsx** + +```tsx +'use client'; + +import { motion, useInView } from 'framer-motion'; +import { useRef } from 'react'; +import { TextReveal } from '@/components/ui/scroll-animations'; +import type { Product } from '@/lib/constants/products'; + +interface ProductOverviewSectionProps { + product: Product; +} + +export function ProductOverviewSection({ product }: ProductOverviewSectionProps) { + const ref = useRef(null); + const isInView = useInView(ref, { once: true, margin: '-100px' }); + + return ( +
+
+
+ {/* 标题 */} + + 产品概述 + + + {/* 概述文字 - 逐词揭示 */} + +
+
+
+ ); +} +``` + +- [ ] **步骤 2：Commit** + +```bash +git add src/components/products/product-overview-section.tsx +git commit -m "feat(products): add product overview section component" +``` + +--- + +## 任务 3：创建核心功能 Section 组件（滚动叙事） + +**文件：** +- 创建：`src/components/products/product-features-section.tsx` + +- [ ] **步骤 1：创建 product-features-section.tsx** + +```tsx +'use client'; + +import { motion, useInView, useScroll, useTransform } from 'framer-motion'; +import { useRef } from 'react'; +import type { Product } from '@/lib/constants/products'; + +interface ProductFeaturesSectionProps { + product: Product; +} + +function FeatureItem({ + feature, + index, +}: { + feature: string; + index: number; +}) { + const ref = useRef(null); + const isInView = useInView(ref, { once: true, margin: '-50px' }); + + // 解析功能标题和描述 + const [title, ...descParts] = feature.split('：'); + const description = descParts.join('：'); + + // 编号格式化 + const number = String(index + 1).padStart(2, '0'); + + return ( +
+
+
+ {/* 左侧：编号和文字 */} +
+ {/* 编号 */} + + {number} + + + {/* 功能标题 */} + + {title} + + + {/* 功能描述 */} + {description && ( + + {description} + + )} +
+ + {/* 右侧：动画占位区域 */} + +
+
+
+ +
+
+
+ ); +} + +export function ProductFeaturesSection({ product }: ProductFeaturesSectionProps) { + const sectionRef = useRef(null); + + return ( +
+ {/* 标题 */} +
+
+ + 核心功能 + + + 全方位覆盖企业核心业务场景 + +
+
+ + {/* 功能列表 */} + {product.features.map((feature, index) => ( + + ))} +
+ ); +} +``` + +- [ ] **步骤 2：Commit** + +```bash +git add src/components/products/product-features-section.tsx +git commit -m "feat(products): add product features section with scroll storytelling" +``` + +--- + +## 任务 4：创建产品优势 Section 组件 + +**文件：** +- 创建：`src/components/products/product-benefits-section.tsx` + +- [ ] **步骤 1：创建 product-benefits-section.tsx** + +```tsx +'use client'; + +import { motion, useInView } from 'framer-motion'; +import { useRef } from 'react'; +import { StaggerReveal, StaggerItem, CounterWithEffect } from '@/lib/animations'; +import type { Product } from '@/lib/constants/products'; + +interface ProductBenefitsSectionProps { + product: Product; +} + +// 解析优势中的数字 +function extractNumber(text: string): { number: number; suffix: string } | null { + const match = text.match(/(\d+)%/); + if (match) { + return { number: parseInt(match[1], 10), suffix: '%' }; + } + return null; +} + +function BenefitCard({ + benefit, + index, +}: { + benefit: string; + index: number; +}) { + const numberInfo = extractNumber(benefit); + + return ( + + {numberInfo && ( +
+ + + +
+ )} +

+ {benefit} +

+ + ); +} + +export function ProductBenefitsSection({ product }: ProductBenefitsSectionProps) { + const ref = useRef(null); + const isInView = useInView(ref, { once: true, margin: '-100px' }); + + return ( +
+
+ {/* 标题 */} + + 产品优势 + + + + 经过验证的业务价值提升 + + + {/* 优势卡片网格 */} + + {product.benefits.map((benefit, index) => ( + + ))} + +
+
+ ); +} +``` + +- [ ] **步骤 2：Commit** + +```bash +git add src/components/products/product-benefits-section.tsx +git commit -m "feat(products): add product benefits section with counter animation" +``` + +--- + +## 任务 5：创建实施流程 Section 组件 + +**文件：** +- 创建：`src/components/products/product-process-section.tsx` + +- [ ] **步骤 1：创建 product-process-section.tsx** + +```tsx +'use client'; + +import { motion, useInView } from 'framer-motion'; +import { useRef } from 'react'; +import type { Product } from '@/lib/constants/products'; + +interface ProductProcessSectionProps { + product: Product; +} + +function ProcessStep({ + step, + index, + total, +}: { + step: string; + index: number; + total: number; +}) { + const ref = useRef(null); + const isInView = useInView(ref, { once: true, margin: '-50px' }); + + // 解析步骤标题和描述 + const [title, ...descParts] = step.split('：'); + const description = descParts.join('：'); + + return ( + + {/* 编号圆圈 */} +
+
+ {index + 1} +
+ {index < total - 1 && ( +
+ )} +
+ + {/* 内容 */} +
+

+ {title} +

+ {description && ( +

+ {description} +

+ )} +
+ + ); +} + +export function ProductProcessSection({ product }: ProductProcessSectionProps) { + const ref = useRef(null); + const isInView = useInView(ref, { once: true, margin: '-100px' }); + + return ( +
+
+
+ {/* 标题 */} + + 实施流程 + + + + 专业团队全程护航，确保项目成功落地 + + + {/* 步骤列表 */} +
+ {product.process.map((step, index) => ( + + ))} +
+
+
+
+ ); +} +``` + +- [ ] **步骤 2：Commit** + +```bash +git add src/components/products/product-process-section.tsx +git commit -m "feat(products): add product process section with timeline" +``` + +--- + +## 任务 6：创建技术规格 Section 组件 + +**文件：** +- 创建：`src/components/products/product-specs-section.tsx` + +- [ ] **步骤 1：创建 product-specs-section.tsx** + +```tsx +'use client'; + +import { motion, useInView } from 'framer-motion'; +import { useRef } from 'react'; +import { StaggerReveal, StaggerItem } from '@/components/ui/scroll-animations'; +import type { Product } from '@/lib/constants/products'; + +interface ProductSpecsSectionProps { + product: Product; +} + +export function ProductSpecsSection({ product }: ProductSpecsSectionProps) { + const ref = useRef(null); + const isInView = useInView(ref, { once: true, margin: '-100px' }); + + return ( +
+
+ {/* 标题 */} + + 技术规格 + + + + 灵活配置，满足多样化业务需求 + + + {/* 规格网格 */} + + {product.specs.map((spec, index) => ( + +
+ {spec} + + ))} + +
+
+ ); +} +``` + +- [ ] **步骤 2：Commit** + +```bash +git add src/components/products/product-specs-section.tsx +git commit -m "feat(products): add product specs section" +``` + +--- + +## 任务 7：创建定价方案 Section 组件 + +**文件：** +- 创建：`src/components/products/product-pricing-section.tsx` + +- [ ] **步骤 1：创建 product-pricing-section.tsx** + +```tsx +'use client'; + +import { motion, useInView } from 'framer-motion'; +import { useRef } from 'react'; +import { StaggerReveal, StaggerItem } from '@/components/ui/scroll-animations'; +import { MagneticButton } from '@/lib/animations'; +import { Check } from 'lucide-react'; +import type { Product } from '@/lib/constants/products'; + +interface ProductPricingSectionProps { + product: Product; +} + +const pricingFeatures = { + base: ['基础功能模块', '邮件支持', '标准报表'], + standard: ['全部功能模块', '电话支持', '自定义报表', '优先响应'], + enterprise: ['全部功能模块', '专属客服', '定制开发', 'SLA保障'], +}; + +function PricingCard({ + name, + price, + features, + isRecommended = false, +}: { + name: string; + price: string; + features: string[]; + isRecommended?: boolean; +}) { + const ref = useRef(null); + const isInView = useInView(ref, { once: true, margin: '-50px' }); + + return ( + + {/* 推荐标签 */} + {isRecommended && ( +
+ 推荐 +
+ )} + + {/* 名称 */} +

+ {name} +

+ + {/* 价格 */} +

+ {price} +

+ + {/* 功能列表 */} +
    + {features.map((feature, index) => ( +
  • + + + {feature} + +
    • + ))} +
+ + {/* 按钮 */} + + 立即咨询 + + + ); +} + +export function ProductPricingSection({ product }: ProductPricingSectionProps) { + const ref = useRef(null); + const isInView = useInView(ref, { once: true, margin: '-100px' }); + + return ( +
+
+ {/* 标题 */} + + 价格方案 + + + + 灵活定价，按需选择 + + + {/* 定价卡片 */} +
+ + + +
+
+
+ ); +} +``` + +- [ ] **步骤 2：Commit** + +```bash +git add src/components/products/product-pricing-section.tsx +git commit -m "feat(products): add product pricing section with dark theme" +``` + +--- + +## 任务 8：创建 CTA Section 组件 + +**文件：** +- 创建：`src/components/products/product-cta-section.tsx` + +- [ ] **步骤 1：创建 product-cta-section.tsx** + +```tsx +'use client'; + +import { motion, useInView } from 'framer-motion'; +import { useRef } from 'react'; +import { MagneticButton } from '@/lib/animations'; + +export function ProductCTASection() { + const ref = useRef(null); + const isInView = useInView(ref, { once: true, margin: '-100px' }); + + return ( +
+
+
+ {/* 标题 */} + + 准备好提升企业运营效率了吗？ + + + {/* 描述 */} + + 立即联系我们，获取专属解决方案 + + + {/* 按钮 */} + + + 立即咨询 + + + 电话咨询 + + +
+
+
+ ); +} +``` + +- [ ] **步骤 2：Commit** + +```bash +git add src/components/products/product-cta-section.tsx +git commit -m "feat(products): add product CTA section" +``` + +--- + +## 任务 9：创建统一导出文件 + +**文件：** +- 创建：`src/components/products/index.ts` + +- [ ] **步骤 1：创建 index.ts** + +```tsx +export { ProductHeroSection } from './product-hero-section'; +export { ProductOverviewSection } from './product-overview-section'; +export { ProductFeaturesSection } from './product-features-section'; +export { ProductBenefitsSection } from './product-benefits-section'; +export { ProductProcessSection } from './product-process-section'; +export { ProductSpecsSection } from './product-specs-section'; +export { ProductPricingSection } from './product-pricing-section'; +export { ProductCTASection } from './product-cta-section'; +``` + +- [ ] **步骤 2：Commit** + +```bash +git add src/components/products/index.ts +git commit -m "feat(products): add products components index" +``` + +--- + +## 任务 10：创建产品详情客户端组件 + +**文件：** +- 创建：`src/app/(marketing)/products/[id]/product-detail-client.tsx` + +- [ ] **步骤 1：创建 product-detail-client.tsx** + +```tsx +'use client'; + +import { useEffect, useState } from 'react'; +import dynamic from 'next/dynamic'; +import { PRODUCTS, type Product } from '@/lib/constants/products'; + +// 动态导入所有 section 组件 +const ProductHeroSection = dynamic( + () => import('@/components/products/product-hero-section').then(mod => ({ default: mod.ProductHeroSection })), + { ssr: false } +); + +const ProductOverviewSection = dynamic( + () => import('@/components/products/product-overview-section').then(mod => ({ default: mod.ProductOverviewSection })), + { ssr: false } +); + +const ProductFeaturesSection = dynamic( + () => import('@/components/products/product-features-section').then(mod => ({ default: mod.ProductFeaturesSection })), + { ssr: false } +); + +const ProductBenefitsSection = dynamic( + () => import('@/components/products/product-benefits-section').then(mod => ({ default: mod.ProductBenefitsSection })), + { ssr: false } +); + +const ProductProcessSection = dynamic( + () => import('@/components/products/product-process-section').then(mod => ({ default: mod.ProductProcessSection })), + { ssr: false } +); + +const ProductSpecsSection = dynamic( + () => import('@/components/products/product-specs-section').then(mod => ({ default: mod.ProductSpecsSection })), + { ssr: false } +); + +const ProductPricingSection = dynamic( + () => import('@/components/products/product-pricing-section').then(mod => ({ default: mod.ProductPricingSection })), + { ssr: false } +); + +const ProductCTASection = dynamic( + () => import('@/components/products/product-cta-section').then(mod => ({ default: mod.ProductCTASection })), + { ssr: false } +); + +interface ProductDetailClientProps { + productId: string; +} + +export function ProductDetailClient({ productId }: ProductDetailClientProps) { + const [product, setProduct] = useState(null); + const [isDarkHeader, setIsDarkHeader] = useState(true); + + useEffect(() => { + const found = PRODUCTS.find(p => p.id === productId); + setProduct(found || null); + }, [productId]); + + // 监听滚动，控制导航栏颜色 + useEffect(() => { + const handleScroll = () => { + const heroHeight = window.innerHeight; + setIsDarkHeader(window.scrollY < heroHeight * 0.8); + }; + + window.addEventListener('scroll', handleScroll, { passive: true }); + return () => window.removeEventListener('scroll', handleScroll); + }, []); + + // 设置导航栏颜色（通过 CSS 变量或全局状态） + useEffect(() => { + document.documentElement.setAttribute('data-header-theme', isDarkHeader ? 'dark' : 'light'); + }, [isDarkHeader]); + + if (!product) { + return ( +
+

加载中...

+
+ ); + } + + return ( +
+ + + + + + + + +
+ ); +} +``` + +- [ ] **步骤 2：Commit** + +```bash +git add src/app/\(marketing\)/products/\[id\]/product-detail-client.tsx +git commit -m "feat(products): add product detail client component" +``` + +--- + +## 任务 11：修改产品详情页面入口 + +**文件：** +- 修改：`src/app/(marketing)/products/[id]/page.tsx` + +- [ ] **步骤 1：修改 page.tsx** + +将现有内容替换为： + +```tsx +import { notFound } from 'next/navigation'; +import { PRODUCTS } from '@/lib/constants'; +import { ProductDetailClient } from './product-detail-client'; + +export async function generateStaticParams() { + return PRODUCTS.map((product) => ({ + id: product.id, + })); +} + +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} - 睿新致远`, + description: product.description, + }; +} + +export default async function ProductDetailPage({ params }: { params: Promise<{ id: string }> }) { + const { id } = await params; + const product = PRODUCTS.find((p) => p.id === id); + + if (!product) { + notFound(); + } + + return ; +} +``` + +- [ ] **步骤 2：Commit** + +```bash +git add src/app/\(marketing\)/products/\[id\]/page.tsx +git commit -m "refactor(products): update product detail page to use client component" +``` + +--- + +## 任务 12：修改 Header 组件支持深色模式 + +**文件：** +- 修改：`src/components/layout/header.tsx` + +- [ ] **步骤 1：修改 Header 组件** + +在 `HeaderContent` 函数中，找到导航栏的 className 定义，修改为支持深色模式： + +```tsx +// 在 HeaderContent 函数开头添加 +const [headerTheme, setHeaderTheme] = useState<'light' | 'dark'>('light'); + +useEffect(() => { + const handleThemeChange = () => { + const theme = document.documentElement.getAttribute('data-header-theme'); + setHeaderTheme(theme === 'dark' ? 'dark' : 'light'); + }; + + // 初始检查 + handleThemeChange(); + + // 使用 MutationObserver 监听属性变化 + const observer = new MutationObserver(handleThemeChange); + observer.observe(document.documentElement, { + attributes: true, + attributeFilter: ['data-header-theme'], + }); + + return () => observer.disconnect(); +}, []); + +// 修改 header 的 className +
+``` + +同时修改 Logo 和导航链接的颜色： + +```tsx +// Logo 颜色 +{COMPANY_INFO.name} + +// 导航链接颜色 + +``` + +- [ ] **步骤 2：Commit** + +```bash +git add src/components/layout/header.tsx +git commit -m "feat(layout): add dark mode support to header component" +``` + +--- + +## 任务 13：验证构建 + +- [ ] **步骤 1：运行构建** + +```bash +npm run build +``` + +预期：构建成功，无错误 + +- [ ] **步骤 2：本地预览** + +```bash +npm run start +``` + +访问 `http://localhost:3000/products/erp` 验证效果 + +- [ ] **步骤 3：最终 Commit** + +```bash +git add -A +git commit -m "feat(products): complete ERP product landing page with Terminal-style design" +``` + +--- + +## 规格覆盖度检查 + +| 规格章节 | 对应任务 | +|---------|---------| +| Section 1: 全屏沉浸 Hero | 任务 1 | +| Section 2: 产品概述 | 任务 2 | +| Section 3: 核心功能（滚动叙事） | 任务 3 | +| Section 4: 产品优势 | 任务 4 | +| Section 5: 实施流程 | 任务 5 | +| Section 6: 技术规格 | 任务 6 | +| Section 7: 定价方案 | 任务 7 | +| Section 8: CTA 横幅 | 任务 8 | +| 导航栏动态变色 | 任务 12 | +| 文件结构 | 任务 9, 10, 11 | + +✅ 所有规格需求已覆盖 + +--- + +**计划版本**: 1.0 +**最后更新**: 2026-04-24 diff --git a/docs/superpowers/plans/2026-04-24-services-solutions-design-upgrade.md b/docs/superpowers/plans/2026-04-24-services-solutions-design-upgrade.md new file mode 100644 index 0000000..1ec45d7 --- /dev/null +++ b/docs/superpowers/plans/2026-04-24-services-solutions-design-upgrade.md @@ -0,0 +1,299 @@ +# 核心业务与解决方案设计升级 实现计划 + +> **面向 AI 代理的工作者：** 必需子技能：使用 superpowers:subagent-driven-development（推荐）或 superpowers:executing-plans 逐任务实现此计划。步骤使用复选框（`- [ ]`）语法来跟踪进度。 + +**目标：** 将产品服务页面的成熟设计模式（组件拆分、动画升级、背景特效、独立布局）应用到核心业务和解决方案页面，实现全站设计一致性。 + +**架构：** 参照 `src/components/products/` 的 8 个独立 Section 组件模式，为核心业务创建 6 个独立 Section 组件，为解决方案创建 3 个独立 Section 组件。复用 `@/lib/animations` 动画组件库。核心业务详情页采用独立 Header/Footer 布局。 + +**技术栈：** Next.js 16 + React 19 + Framer Motion 12 + Tailwind CSS 4 + 自定义动画组件库 + +--- + +## 文件结构 + +### 新建文件 + +| 文件 | 职责 | +|------|------| +| `src/components/services/service-hero-section.tsx` | 服务详情 Hero（InkBackground + DataParticleFlow + SealStamp + InkReveal） | +| `src/components/services/service-challenges-section.tsx` | 挑战板块（StaggerContainer + InkCard） | +| `src/components/services/service-features-section.tsx` | 功能/如何帮助板块（ScrollReveal + FadeUp + CheckCircle2） | +| `src/components/services/service-process-section.tsx` | 服务流程（SealStamp + StaggerContainer + FadeUp + 渐变连接线） | +| `src/components/services/service-outcomes-section.tsx` | 成果板块（CountUp + StaggerContainer + InkCard） | +| `src/components/services/service-cases-section.tsx` | 相关案例（StaggerContainer + InkCard） | +| `src/components/services/service-cta-section.tsx` | CTA 区域（FloatingElement + RippleButton + 红色渐变背景） | +| `src/components/solutions/consulting-section.tsx` | 参谋伙伴模块（InkReveal + StaggerContainer + FadeUp） | +| `src/components/solutions/tech-solution-section.tsx` | 技术伙伴模块（InkReveal + StaggerContainer + FadeUp） | +| `src/components/solutions/accompany-section.tsx` | 同行伙伴模块（InkReveal + StaggerContainer + FadeUp） | +| `src/components/layout/service-header.tsx` | 服务详情独立 Header（参照 product-header） | +| `src/components/layout/service-footer.tsx` | 服务详情独立 Footer（参照 product-footer） | + +### 修改文件 + +| 文件 | 变更 | +|------|------| +| `src/app/(marketing)/services/[id]/client.tsx` | 重构：拆分为 7 个独立 Section 组件 + dynamic 懒加载 | +| `src/app/(marketing)/services/[id]/page.tsx` | 添加独立布局支持（isServiceDetailPage 判断） | +| `src/app/(marketing)/solutions/page.tsx` | 重构：拆分为 3 个独立 Section 组件 + dynamic 懒加载 | +| `src/app/(marketing)/layout.tsx` | 添加 ServiceHeader/ServiceFooter 布局切换逻辑 | +| `src/lib/constants/services.ts` | 补充 challenges 和 outcomes 数据结构 | + +--- + +## 任务 1：数据结构补全 + +**文件：** +- 修改：`src/lib/constants/services.ts` + +- [ ] **步骤 1：扩展 Service 类型，补充 challenges 和 outcomes 字段** + +将 `client.tsx` 中硬编码的 `challenges` 和 `outcomes` 对象迁移到 `services.ts`，为每个服务添加： +- `challenges: Array<{ title: string; description: string }>` — 4 项挑战 +- `outcomes: Array<{ value: string; label: string }>` — 3 项成果数据 + +- [ ] **步骤 2：验证类型导出** + +确认 `SERVICES` 从 `@/lib/constants` 正确导出，新字段可被消费。 + +--- + +## 任务 2：核心业务 — Hero Section + +**文件：** +- 创建：`src/components/services/service-hero-section.tsx` + +- [ ] **步骤 1：创建 ServiceHeroSection 组件** + +参照 `product-hero-section.tsx`，实现： +- Props: `{ service: Service }` +- 背景：`InkBackground` + `DataParticleFlow`（particleCount=60, color="#C41E3A", intensity="subtle"） +- 布局：`min-h-screen flex items-center justify-center` + `bg-gradient-to-b from-white to-[#F8F8F8]` +- 动画：`SealStamp` 包裹 Badge（delay=0.1），`InkReveal` 包裹 h1（delay=0.2）、描述（delay=0.4）、CTA 按钮（delay=0.6） +- CTA：`RippleButton` 主按钮"了解服务详情" + outline 次按钮"免费咨询" +- 滚动指示器：`FloatingElement` + ChevronDown + +--- + +## 任务 3：核心业务 — 挑战 Section + +**文件：** +- 创建：`src/components/services/service-challenges-section.tsx` + +- [ ] **步骤 1：创建 ServiceChallengesSection 组件** + +- Props: `{ service: Service }` +- 背景：`bg-[#F8F8F8]`（灰色交替背景） +- 标题区：`ScrollReveal` + `slideInLeftVariants` + 朱砂红装饰线 +- 卡片网格：`StaggerContainer` + `StaggerItem` 包裹 2x2 网格 +- 每张卡片：`InkCard`（hoverScale=1.02, hoverShadow 带红色调） +- 卡片内容：挑战标题 + 描述 + +--- + +## 任务 4：核心业务 — 功能 Section + +**文件：** +- 创建：`src/components/services/service-features-section.tsx` + +- [ ] **步骤 1：创建 ServiceFeaturesSection 组件** + +- Props: `{ service: Service }` +- 背景：`bg-white` +- 标题区：`ScrollReveal` + `inkRevealVariants` +- 概述文字：`InkReveal`（delay=0.2） +- 功能列表：`StaggerContainer` + `StaggerItem`，每项用 `CheckCircle2` 图标 + `FadeUp` + +--- + +## 任务 5：核心业务 — 流程 Section + +**文件：** +- 创建：`src/components/services/service-process-section.tsx` + +- [ ] **步骤 1：创建 ServiceProcessSection 组件** + +- Props: `{ service: Service }` +- 背景：`bg-[#F8F8F8]` +- 标题区：`ScrollReveal` + `inkRevealVariants` 居中 +- 步骤列表：`StaggerContainer`（staggerDelay=0.15）+ `StaggerItem` +- 每步：`SealStamp` 编号圆形 + `FadeUp` 标题描述 + 渐变连接线（`w-0.5 h-16 bg-gradient-to-b from-[#C41E3A]/40 to-[#C41E3A]/10`，最后一步无连接线） +- 文本解析：中文冒号 `：` 分隔标题和描述 + +--- + +## 任务 6：核心业务 — 成果 Section + +**文件：** +- 创建：`src/components/services/service-outcomes-section.tsx` + +- [ ] **步骤 1：创建 ServiceOutcomesSection 组件** + +- Props: `{ service: Service }` +- 背景：`bg-white` +- 标题区：`ScrollReveal` + `slideInLeftVariants` +- 数据卡片：`StaggerContainer` + `StaggerItem` 包裹 3 列网格 +- 每张卡片：`InkCard` + `CountUp` 数字动画（从 outcomes.value 提取数字）+ 渐变色文字 +- Benefits 汇总：底部 `InkReveal` 包裹 benefits 文本 + +--- + +## 任务 7：核心业务 — 案例 Section + +**文件：** +- 创建：`src/components/services/service-cases-section.tsx` + +- [ ] **步骤 1：创建 ServiceCasesSection 组件** + +- Props: 无（内部从 `CASES` 常量获取数据） +- 背景：`bg-[#F8F8F8]` +- 标题区：`ScrollReveal` + `slideInLeftVariants` +- 案例网格：`StaggerContainer` + `StaggerItem` 包裹 2 列网格 +- 每张卡片：`InkCard` + Badge 行业标签 + 标题 + 描述 + hover 效果 + +--- + +## 任务 8：核心业务 — CTA Section + +**文件：** +- 创建：`src/components/services/service-cta-section.tsx` + +- [ ] **步骤 1：创建 ServiceCTASection 组件** + +- Props: 无 +- 背景：`bg-gradient-to-r from-[#C41E3A] to-[#E85D75]`（红色渐变） +- 装饰：两个 `FloatingElement` 圆形（右上 280px + 左下 220px） +- 内容：`InkReveal` 标题 + `FadeUp` 描述 + `FadeUp` 按钮组 +- 按钮：`RippleButton` 主按钮"开始您的转型之旅" + outline 次按钮"查看其他服务" + +--- + +## 任务 9：核心业务 — 独立 Header/Footer + +**文件：** +- 创建：`src/components/layout/service-header.tsx` +- 创建：`src/components/layout/service-footer.tsx` + +- [ ] **步骤 1：创建 ServiceHeader** + +参照 `product-header.tsx`： +- Logo + "返回主站"按钮 +- 滚动时 `bg-white/90 backdrop-blur-xl` +- `motion.header` 从顶部滑入动画 +- 区别：CTA 文案改为"免费咨询" + +- [ ] **步骤 2：创建 ServiceFooter** + +参照 `product-footer.tsx`： +- 顶部装饰线 + CTA 区域 + 底部信息 +- 锚点导航改为服务相关（服务概览/面临挑战/服务流程/预期成果/相关案例） +- `RippleButton` + `FloatingElement` + +--- + +## 任务 10：核心业务 — 重构详情页 + +**文件：** +- 修改：`src/app/(marketing)/services/[id]/client.tsx` +- 修改：`src/app/(marketing)/services/[id]/page.tsx` +- 修改：`src/app/(marketing)/layout.tsx` + +- [ ] **步骤 1：重构 client.tsx** + +将当前的单文件 5 板块替换为 7 个 dynamic 懒加载 Section 组件： +```tsx +const ServiceHeroSection = dynamic(() => import('@/components/services/service-hero-section'), { ssr: false }); +const ServiceChallengesSection = dynamic(() => import('@/components/services/service-challenges-section'), { ssr: false }); +const ServiceFeaturesSection = dynamic(() => import('@/components/services/service-features-section'), { ssr: false }); +const ServiceProcessSection = dynamic(() => import('@/components/services/service-process-section'), { ssr: false }); +const ServiceOutcomesSection = dynamic(() => import('@/components/services/service-outcomes-section'), { ssr: false }); +const ServiceCasesSection = dynamic(() => import('@/components/services/service-cases-section'), { ssr: false }); +const ServiceCTASection = dynamic(() => import('@/components/services/service-cta-section'), { ssr: false }); +``` +渲染顺序：Hero → Challenges → Features → Process → Outcomes → Cases → CTA + +- [ ] **步骤 2：修改 layout.tsx 添加服务详情独立布局** + +在 `isProductDetailPage` 逻辑旁添加 `isServiceDetailPage` 判断： +- 路径匹配 `/services/[id]` 时使用 `ServiceHeader` + `ServiceFooter` +- 其他页面保持 `Header` + `Footer` + +- [ ] **步骤 3：修改 page.tsx 确保数据传递正确** + +确认 `generateStaticParams` 和 `generateMetadata` 正常工作，新字段（challenges, outcomes）正确序列化传递。 + +--- + +## 任务 11：解决方案 — 拆分模块组件 + +**文件：** +- 创建：`src/components/solutions/consulting-section.tsx` +- 创建：`src/components/solutions/tech-solution-section.tsx` +- 创建：`src/components/solutions/accompany-section.tsx` + +- [ ] **步骤 1：创建 ConsultingSection（参谋伙伴）** + +- Props: 无（内部硬编码内容，或从常量获取） +- 背景：`bg-gradient-to-br from-[#FFFBF5] to-white rounded-2xl p-12 border border-[#C41E3A]/20` +- 动画升级：`InkReveal` 包裹标题（delay=0），`FadeUp` 包裹描述段落（delay=0.1/0.2/0.3），`StaggerContainer` + `StaggerItem` 包裹核心价值点网格 +- 保持现有内容和布局结构不变 + +- [ ] **步骤 2：创建 TechSolutionSection（技术伙伴）** + +同上模式，delay 递增 0.2。 + +- [ ] **步骤 3：创建 AccompanySection（同行伙伴）** + +同上模式，delay 递增 0.4。 + +--- + +## 任务 12：解决方案 — 重构页面 + +**文件：** +- 修改：`src/app/(marketing)/solutions/page.tsx` + +- [ ] **步骤 1：重构 solutions/page.tsx** + +将 3 个内联 `motion.section` 替换为 dynamic 懒加载的独立组件： +```tsx +const ConsultingSection = dynamic(() => import('@/components/solutions/consulting-section'), { ssr: false }); +const TechSolutionSection = dynamic(() => import('@/components/solutions/tech-solution-section'), { ssr: false }); +const AccompanySection = dynamic(() => import('@/components/solutions/accompany-section'), { ssr: false }); +``` +保持 `MethodologySection` 和底部 CTA 区域不变。 + +--- + +## 任务 13：验证 + +- [ ] **步骤 1：构建验证** + +运行 `npm run build`，确认无 TypeScript 错误、无导入错误。 + +- [ ] **步骤 2：页面验证** + +启动 dev server，逐页检查： +- `/services` 列表页正常渲染 +- `/services/software` 详情页：7 个 Section 全部渲染，动画正常 +- `/services/data` 详情页：同上 +- `/services/consulting` 详情页：同上 +- `/services/solutions` 详情页：同上 +- `/solutions` 页面：3 个模块全部渲染，动画正常 +- 独立 Header/Footer 在服务详情页正确显示 +- 主站 Header/Footer 在其他页面正确显示 + +- [ ] **步骤 3：Commit** + +```bash +git add -A +git commit -m "feat: 升级核心业务和解决方案页面设计，对齐产品服务设计体系 + +- 核心业务详情页拆分为 7 个独立 Section 组件 +- 解决方案页拆分为 3 个独立模块组件 +- 全面接入动画组件库（InkReveal/SealStamp/InkCard/CountUp 等） +- Hero 区域添加 InkBackground + DataParticleFlow 背景特效 +- 服务详情页采用独立 Header/Footer 布局 +- 服务数据结构补全 challenges 和 outcomes 字段 +- 所有组件使用 dynamic 懒加载" +``` diff --git a/docs/superpowers/plans/2026-04-25-remove-phone-and-update-logo-font.md b/docs/superpowers/plans/2026-04-25-remove-phone-and-update-logo-font.md new file mode 100644 index 0000000..dfcc804 --- /dev/null +++ b/docs/superpowers/plans/2026-04-25-remove-phone-and-update-logo-font.md @@ -0,0 +1,428 @@ +# 移除联系电话和更新 Logo 字体 实现计划 + +> **面向 AI 代理的工作者：** 必需子技能：使用 superpowers:subagent-driven-development（推荐）或 superpowers:executing-plans 逐任务实现此计划。步骤使用复选框（`- [ ]`）语法来跟踪进度。 + +**目标：** 移除网站中"电话咨询"按钮，并更新 Logo SVG 使用青柳隶书字体 + +**架构：** 移除 3 个组件中的"电话咨询"按钮及相关 import，使用青柳隶书字体重新生成 Logo SVG path + +**技术栈：** React, TypeScript, Next.js, SVG + +--- + +## 文件结构 + +| 文件 | 操作 | 职责 | +|------|------|------| +| `src/components/services/service-cta-section.tsx` | 修改 | 移除"电话咨询"按钮和 Phone 图标 import | +| `src/components/products/product-cta-section.tsx` | 修改 | 移除"电话咨询"按钮和 Phone 图标 import | +| `src/app/(marketing)/solutions/[id]/solution-detail-client.tsx` | 修改 | 移除"电话咨询"按钮和 Phone 图标 import | +| `public/logo.svg` | 替换 | 使用青柳隶书字体重新生成 SVG path | +| `public/logo-white.svg` | 替换 | 使用青柳隶书字体重新生成 SVG path | + +--- + +## 任务 1：移除 service-cta-section.tsx 中的"电话咨询"按钮 + +**文件：** +- 修改：`src/components/services/service-cta-section.tsx` + +- [ ] **步骤 1：读取文件内容** + +运行：读取 `src/components/services/service-cta-section.tsx` + +- [ ] **步骤 2：移除 Phone 图标 import** + +修改文件，将： +```tsx +import { Phone } from 'lucide-react'; +``` +改为： +```tsx +``` +（删除整行） + +- [ ] **步骤 3：移除"电话咨询"按钮** + +修改文件，删除以下代码块： +```tsx + + + 电话咨询 + +``` + +- [ ] **步骤 4：验证修改** + +运行：`pnpm build` +预期：构建成功，无错误 + +- [ ] **步骤 5：Commit** + +```bash +git add src/components/services/service-cta-section.tsx +git commit -m "refactor(services): 移除电话咨询按钮 + +- 移除 service-cta-section 中的电话咨询按钮 +- 移除 Phone 图标 import +- 公司暂无对外联系电话" +``` + +--- + +## 任务 2：移除 product-cta-section.tsx 中的"电话咨询"按钮 + +**文件：** +- 修改：`src/components/products/product-cta-section.tsx` + +- [ ] **步骤 1：读取文件内容** + +运行：读取 `src/components/products/product-cta-section.tsx` + +- [ ] **步骤 2：移除 Phone 图标 import** + +修改文件，将： +```tsx +import { Phone } from 'lucide-react'; +``` +改为： +```tsx +``` +（删除整行） + +- [ ] **步骤 3：移除"电话咨询"按钮** + +修改文件，删除以下代码块： +```tsx + + + 电话咨询 + +``` + +- [ ] **步骤 4：验证修改** + +运行：`pnpm build` +预期：构建成功，无错误 + +- [ ] **步骤 5：Commit** + +```bash +git add src/components/products/product-cta-section.tsx +git commit -m "refactor(products): 移除电话咨询按钮 + +- 移除 product-cta-section 中的电话咨询按钮 +- 移除 Phone 图标 import +- 公司暂无对外联系电话" +``` + +--- + +## 任务 3：移除 solution-detail-client.tsx 中的"电话咨询"按钮 + +**文件：** +- 修改：`src/app/(marketing)/solutions/[id]/solution-detail-client.tsx` + +- [ ] **步骤 1：读取文件内容** + +运行：读取 `src/app/(marketing)/solutions/[id]/solution-detail-client.tsx` + +- [ ] **步骤 2：查找并移除"电话咨询"按钮** + +找到包含"电话咨询"的按钮代码并删除： +```tsx + +``` + +- [ ] **步骤 3：检查并移除 Phone 图标 import（如果不再使用）** + +检查文件中是否还有其他地方使用 Phone 图标。如果没有，删除： +```tsx +import { Phone } from 'lucide-react'; +``` + +- [ ] **步骤 4：验证修改** + +运行：`pnpm build` +预期：构建成功，无错误 + +- [ ] **步骤 5：Commit** + +```bash +git add src/app/\(marketing\)/solutions/\[id\]/solution-detail-client.tsx +git commit -m "refactor(solutions): 移除电话咨询按钮 + +- 移除 solution-detail-client 中的电话咨询按钮 +- 移除 Phone 图标 import（如果不再使用） +- 公司暂无对外联系电话" +``` + +--- + +## 任务 4：使用青柳隶书字体重新生成 Logo SVG + +**文件：** +- 替换：`public/logo.svg` +- 替换：`public/logo-white.svg` + +- [ ] **步骤 1：检查青柳隶书字体文件** + +运行：检查 `src/app/fonts/AoyagiReisho.ttf` 是否存在 + +- [ ] **步骤 2：使用 Python 脚本生成新的 Logo SVG** + +创建并运行 Python 脚本，使用青柳隶书字体生成"睿新致遠"的 SVG path： + +```python +#!/usr/bin/env python3 +""" +使用青柳隶书字体生成 Logo SVG path +""" +import os +from fontTools.ttLib import TTFont +from fontTools.pens.svgPathPen import SvgPathPen +from fontTools.pens.t2CharStringPen import T2CharStringPen + +def get_glyph_path(font_path, text, size=48): + """ + 获取文本的 SVG path + """ + font = TTFont(font_path) + glyf_table = font['glyf'] + + paths = [] + x_offset = 0 + + for char in text: + glyph_name = font.getBestCmap().get(ord(char)) + if glyph_name: + glyph = glyf_table[glyph_name] + if glyph.numberOfContours > 0: + pen = SvgPathPen(None) + glyph.draw(pen, glyf_table) + path = pen.getCommands() + paths.append(f'') + x_offset += size * 1.2 + + return '\n'.join(paths) + +def generate_logo_svg(): + """ + 生成 Logo SVG + """ + font_path = 'src/app/fonts/AoyagiReisho.ttf' + text = '睿新致遠' + + if not os.path.exists(font_path): + print(f"错误：字体文件不存在：{font_path}") + return + + # 生成 SVG path + paths = get_glyph_path(font_path, text) + + # 创建 SVG + svg_template = f''' + + + + + + + + + + + + + + + + {paths} + + + + + + {paths} + + NOVALON + +''' + + return svg_template + +if __name__ == '__main__': + svg_content = generate_logo_svg() + if svg_content: + with open('public/logo.svg', 'w', encoding='utf-8') as f: + f.write(svg_content) + print("Logo SVG 已生成：public/logo.svg") +``` + +运行脚本： +```bash +python3 scripts/generate-logo-svg.py +``` + +- [ ] **步骤 3：生成白色版本 Logo** + +复制生成的 Logo SVG 并修改颜色： +```bash +cp public/logo.svg public/logo-white.svg +``` + +修改 `public/logo-white.svg`，将 `fill="#C41E3A"` 改为 `fill="white"` + +- [ ] **步骤 4：验证 Logo 显示** + +运行：`pnpm dev` +访问：http://localhost:3000 +预期：Logo 正确显示，使用青柳隶书字体 + +- [ ] **步骤 5：Commit** + +```bash +git add public/logo.svg public/logo-white.svg +git commit -m "style(logo): 使用青柳隶书字体更新 Logo + +- 使用青柳隶书字体重新生成 Logo SVG path +- 更新 logo.svg 和 logo-white.svg +- 确保品牌字体一致性" +``` + +--- + +## 任务 5：运行完整测试并验证 + +**文件：** +- 无文件修改 + +- [ ] **步骤 1：运行构建** + +运行：`pnpm build` +预期：构建成功，无错误 + +- [ ] **步骤 2：运行 E2E 测试** + +运行：`pnpm test` +预期：所有测试通过 + +- [ ] **步骤 3：手动验证关键页面** + +访问以下页面验证： +- 首页：http://localhost:3000 +- 服务页面：http://localhost:3000/services +- 产品页面：http://localhost:3000/products +- 解决方案详情页：http://localhost:3000/solutions/[id] +- 联系页面：http://localhost:3000/contact + +验证内容： +- ✅ Logo 显示正确 +- ✅ 无"电话咨询"按钮 +- ✅ 联系表单电话字段正常显示 + +- [ ] **步骤 4：最终 Commit（如有遗漏）** + +如果有遗漏的修改，在此步骤提交。 + +--- + +## 任务 6：部署到生产环境 + +**文件：** +- 无文件修改 + +- [ ] **步骤 1：推送代码到远程** + +运行：`git push origin main` +预期：推送成功 + +- [ ] **步骤 2：构建生产版本** + +运行：`pnpm build` +预期：构建成功 + +- [ ] **步骤 3：部署到生产服务器** + +运行：`./deploy-dist.sh` +预期：部署成功 + +- [ ] **步骤 4：验证生产环境** + +访问：https://novalon.cn +验证内容： +- ✅ Logo 显示正确 +- ✅ 无"电话咨询"按钮 +- ✅ 联系表单电话字段正常显示 + +--- + +## 自检清单 + +### 1. 规格覆盖度 + +| 规格需求 | 对应任务 | +|---------|---------| +| 移除 service-cta-section.tsx 中的"电话咨询"按钮 | 任务 1 | +| 移除 product-cta-section.tsx 中的"电话咨询"按钮 | 任务 2 | +| 移除 solution-detail-client.tsx 中的"电话咨询"按钮 | 任务 3 | +| 更新 Logo SVG 使用青柳隶书字体 | 任务 4 | +| 保留联系表单电话字段 | 无需修改（已确认） | +| 测试验证 | 任务 5 | +| 部署生产 | 任务 6 | + +### 2. 占位符扫描 + +- ✅ 无"待定"、"TODO"、"后续实现"等占位符 +- ✅ 所有代码步骤包含完整代码 +- ✅ 所有命令步骤包含完整命令 +- ✅ 无"类似任务 N"的引用 + +### 3. 类型一致性 + +- ✅ 所有文件路径使用精确路径 +- ✅ 所有组件名称一致 +- ✅ 所有 import 语句正确 + +--- + +## 执行选项 + +**计划已完成并保存到 `docs/superpowers/plans/2026-04-25-remove-phone-and-update-logo-font.md`。两种执行方式：** + +**1. 子代理驱动（推荐）** - 每个任务调度一个新的子代理，任务间进行审查，快速迭代 + +**2. 内联执行** - 在当前会话中使用 executing-plans 执行任务，批量执行并设有检查点 + +**选哪种方式？** diff --git a/docs/superpowers/plans/2026-04-28-phase1-view-transitions-svg-container-queries.md b/docs/superpowers/plans/2026-04-28-phase1-view-transitions-svg-container-queries.md new file mode 100644 index 0000000..132c21c --- /dev/null +++ b/docs/superpowers/plans/2026-04-28-phase1-view-transitions-svg-container-queries.md @@ -0,0 +1,671 @@ +# 前沿技术升级 Phase 1 实现计划：View Transitions + SVG drawSVG + Container Queries + +> **面向 AI 代理的工作者：** 必需子技能：使用 superpowers:subagent-driven-development（推荐）或 superpowers:executing-plans 逐任务实现此计划。步骤使用复选框（`- [ ]`）语法来跟踪进度。 + +**目标：** 在不改变现有静态导出架构的前提下，引入 View Transitions API 实现跨页面流畅过渡、SVG 路径动画实现品牌标题毛笔书写效果、Container Queries 实现组件级响应式布局。 + +**架构：** 三项技术均为渐进增强——View Transitions 作为浏览器原生 API 零运行时依赖；SVG drawSVG 基于 GSAP 的 SVG 路径动画插件，仅在品牌标题组件中引入；Container Queries 为纯 CSS 特性，替换现有媒体查询驱动的组件布局。三项改动互不耦合，可独立交付。 + +**技术栈：** React 19.2 View Transitions API、GSAP 3 + DrawSVGPlugin、CSS Container Queries、Next.js 16 App Router + +--- + +## 文件结构 + +### 新建文件 +| 文件 | 职责 | +|------|------| +| `src/components/ui/view-transition.tsx` | View Transition 封装组件，提供声明式 API | +| `src/components/ui/calligraphy-title.tsx` | 品牌标题 SVG 书写动画组件 | +| `src/components/ui/calligraphy-title.test.tsx` | 品牌标题组件测试 | +| `src/components/ui/view-transition.test.tsx` | View Transition 组件测试 | +| `public/brand/ruixin-zhiyuan.svg` | "睿新致遠" SVG 路径数据 | + +### 修改文件 +| 文件 | 变更内容 | +|------|---------| +| `src/app/(marketing)/layout.tsx` | 包裹 ViewTransition，实现跨页面过渡 | +| `src/components/sections/hero-section.tsx` | 替换 HeroTitle 为 CalligraphyTitle | +| `src/components/sections/hero-section-atoms.tsx` | 移除旧 HeroTitle，改用 CalligraphyTitle | +| `src/components/ui/animated-card.tsx` | 添加 Container Query 支持 | +| `src/components/sections/products-section.tsx` | 产品卡片容器添加 container-type | +| `src/components/sections/services-section.tsx` | 服务卡片容器添加 container-type | +| `src/app/globals.css` | 添加 View Transition 关键帧、Container Query 样式 | +| `package.json` | 添加 gsap 依赖 | + +--- + +## 任务 1：View Transitions API 基础封装 + +**文件：** +- 创建：`src/components/ui/view-transition.tsx` +- 创建：`src/components/ui/view-transition.test.tsx` + +- [ ] **步骤 1：编写失败的测试** + +```tsx +// src/components/ui/view-transition.test.tsx +import { render, screen } from '@testing-library/react'; +import { describe, it, expect, vi } from 'vitest'; +import { ViewTransitionWrapper } from './view-transition'; + +describe('ViewTransitionWrapper', () => { + it('renders children when View Transitions API is not supported', () => { + const originalStartViewTransition = document.startViewTransition; + // @ts-expect-error - testing fallback + document.startViewTransition = undefined; + + render( + +

Test Content

+ + ); + + expect(screen.getByText('Test Content')).toBeInTheDocument(); + + // @ts-expect-error - restore + document.startViewTransition = originalStartViewTransition; + }); + + it('applies view-transition-name style when name prop is provided', () => { + render( + +

Test Content

+ + ); + + const element = screen.getByText('Test Content').parentElement; + expect(element?.style.viewTransitionName).toBe('hero-title'); + }); + + it('renders without name prop (no view-transition-name)', () => { + render( + +

Test Content

+ + ); + + const element = screen.getByText('Test Content').parentElement; + expect(element?.style.viewTransitionName).toBe(''); + }); +}); +``` + +- [ ] **步骤 2：运行测试验证失败** + +运行：`npx vitest run src/components/ui/view-transition.test.tsx` +预期：FAIL — 模块 `./view-transition` 不存在 + +- [ ] **步骤 3：编写最少实现代码** + +```tsx +// src/components/ui/view-transition.tsx +'use client'; + +import { type ReactNode, type CSSProperties } from 'react'; + +interface ViewTransitionWrapperProps { + children: ReactNode; + name?: string; + className?: string; +} + +export function ViewTransitionWrapper({ + children, + name, + className = '', +}: ViewTransitionWrapperProps) { + const style: CSSProperties = name + ? { viewTransitionName: name } + : {}; + + return ( +
+ {children} +
+ ); +} +``` + +- [ ] **步骤 4：运行测试验证通过** + +运行：`npx vitest run src/components/ui/view-transition.test.tsx` +预期：PASS + +- [ ] **步骤 5：Commit** + +```bash +git add src/components/ui/view-transition.tsx src/components/ui/view-transition.test.tsx +git commit -m "feat: add ViewTransitionWrapper component with progressive enhancement" +``` + +--- + +## 任务 2：View Transitions 跨页面过渡集成 + +**文件：** +- 修改：`src/app/(marketing)/layout.tsx` +- 修改：`src/app/globals.css` + +- [ ] **步骤 1：在 globals.css 添加 View Transition 关键帧** + +在 `src/app/globals.css` 的 `@layer base` 块末尾添加： + +```css +/* View Transitions - 跨页面过渡动画 */ +@keyframes vt-fade-in { + from { opacity: 0; transform: translateY(8px); } + to { opacity: 1; transform: translateY(0); } +} + +@keyframes vt-fade-out { + from { opacity: 1; transform: translateY(0); } + to { opacity: 0; transform: translateY(-8px); } +} + +@keyframes vt-hero-enter { + from { opacity: 0; clip-path: circle(0% at 50% 50%); } + to { opacity: 1; clip-path: circle(75% at 50% 50%); } +} + +::view-transition-old(root) { + animation: vt-fade-out 0.2s cubic-bezier(0.16, 1, 0.3, 1) both; +} + +::view-transition-new(root) { + animation: vt-fade-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; +} + +::view-transition-old(hero-title) { + animation: none; +} + +::view-transition-new(hero-title) { + animation: vt-hero-enter 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; +} + +@media (prefers-reduced-motion: reduce) { + ::view-transition-old(root), + ::view-transition-new(root) { + animation: none !important; + } + ::view-transition-old(hero-title), + ::view-transition-new(hero-title) { + animation: none !important; + } +} +``` + +- [ ] **步骤 2：修改 MarketingLayout 集成 View Transitions** + +在 `src/app/(marketing)/layout.tsx` 中，将主内容区域包裹 ViewTransitionWrapper： + +找到 `export default function MarketingLayout` 函数，在 children 外层添加 ViewTransitionWrapper： + +```tsx +// 在文件顶部添加导入 +import { ViewTransitionWrapper } from '@/components/ui/view-transition'; + +// 在 return 的 children 包裹处，找到所有渲染 children 的位置 +// 对主站布局的 children 添加 ViewTransitionWrapper： + + {children} + + +// 对产品详情页布局的 children 添加： + + {children} + +``` + +- [ ] **步骤 3：在 HeroSection 中标记共享元素** + +修改 `src/components/sections/hero-section.tsx`，对品牌标题添加 view-transition-name： + +找到 HeroTitle 的渲染位置，在其外层包裹： + +```tsx + + + +``` + +- [ ] **步骤 4：验证 View Transitions 工作正常** + +运行：`npm run dev` +操作：在首页和各子页面之间导航，观察页面过渡动画 +预期：页面切换时有淡入淡出效果，品牌标题有圆形展开动画 + +- [ ] **步骤 5：Commit** + +```bash +git add src/app/globals.css src/app/\(marketing\)/layout.tsx src/components/sections/hero-section.tsx +git commit -m "feat: integrate View Transitions API for cross-page transitions" +``` + +--- + +## 任务 3：GSAP 安装与 SVG 品牌标题路径准备 + +**文件：** +- 创建：`public/brand/ruixin-zhiyuan.svg` + +- [ ] **步骤 1：安装 GSAP** + +运行：`npm install gsap` + +- [ ] **步骤 2：创建"睿新致遠"SVG 路径文件** + +将品牌标题转为 SVG path 数据。由于青柳隷書字体已内嵌，需要用字体渲染后提取路径。 + +创建 `public/brand/ruixin-zhiyuan.svg`： + +```svg + + + + + + + + + + +``` + +> **注意**：上述 SVG 为占位骨架。实际生产需使用字体转 SVG 工具（如 opentype.js 或在线工具 text-to-svg）从青柳隷書字体提取精确路径。此步骤在实现时需用脚本从 `src/app/fonts/AoyagiReisho.ttf` 提取。 + +- [ ] **步骤 3：验证 SVG 可访问** + +运行：`npm run dev` +访问：`http://localhost:3000/brand/ruixin-zhiyuan.svg` +预期：SVG 文件可正常加载 + +- [ ] **步骤 4：Commit** + +```bash +git add package.json package-lock.json public/brand/ruixin-zhiyuan.svg +git commit -m "feat: add GSAP dependency and brand title SVG path data" +``` + +--- + +## 任务 4：CalligraphyTitle 组件实现 + +**文件：** +- 创建：`src/components/ui/calligraphy-title.tsx` +- 创建：`src/components/ui/calligraphy-title.test.tsx` + +- [ ] **步骤 1：编写失败的测试** + +```tsx +// src/components/ui/calligraphy-title.test.tsx +import { render, screen, act } from '@testing-library/react'; +import { describe, it, expect, vi, beforeEach } from 'vitest'; +import { CalligraphyTitle } from './calligraphy-title'; + +describe('CalligraphyTitle', () => { + beforeEach(() => { + vi.useFakeTimers(); + }); + + it('renders the title text as fallback', () => { + render(); + expect(screen.getByText('睿新致遠')).toBeInTheDocument(); + }); + + it('applies brand font family', () => { + render(); + const element = screen.getByText('睿新致遠'); + expect(element.style.fontFamily).toContain('Aoyagi Reisho'); + }); + + it('respects reduced motion preference', () => { + const matchMediaSpy = vi.spyOn(window, 'matchMedia').mockImplementation( + (query: string) => ({ + matches: query === '(prefers-reduced-motion: reduce)', + media: query, + onchange: null, + addListener: vi.fn(), + removeListener: vi.fn(), + addEventListener: vi.fn(), + removeEventListener: vi.fn(), + dispatchEvent: vi.fn(), + }) + ); + + render(); + const element = screen.getByText('睿新致遠'); + expect(element).toHaveStyle({ opacity: '1' }); + + matchMediaSpy.mockRestore(); + }); + + it('applies custom className', () => { + render(); + const element = screen.getByText('睿新致遠').closest('.custom-class'); + expect(element).toBeInTheDocument(); + }); +}); +``` + +- [ ] **步骤 2：运行测试验证失败** + +运行：`npx vitest run src/components/ui/calligraphy-title.test.tsx` +预期：FAIL — 模块 `./calligraphy-title` 不存在 + +- [ ] **步骤 3：编写最少实现代码** + +```tsx +// src/components/ui/calligraphy-title.tsx +'use client'; + +import { useRef, useEffect, useState } from 'react'; +import { gsap } from 'gsap'; +import { DrawSVGPlugin } from 'gsap/DrawSVGPlugin'; + +gsap.registerPlugin(DrawSVGPlugin); + +interface CalligraphyTitleProps { + text: string; + className?: string; + duration?: number; + stagger?: number; + delay?: number; +} + +export function CalligraphyTitle({ + text, + className = '', + duration = 2.5, + stagger = 0.4, + delay = 0.3, +}: CalligraphyTitleProps) { + const svgRef = useRef(null); + const containerRef = useRef(null); + const [prefersReducedMotion, setPrefersReducedMotion] = useState(false); + + useEffect(() => { + const mq = window.matchMedia('(prefers-reduced-motion: reduce)'); + setPrefersReducedMotion(mq.matches); + + const handler = (e: MediaQueryListEvent) => setPrefersReducedMotion(e.matches); + mq.addEventListener('change', handler); + return () => mq.removeEventListener('change', handler); + }, []); + + useEffect(() => { + if (prefersReducedMotion || !svgRef.current) return; + + const paths = svgRef.current.querySelectorAll('path'); + if (paths.length === 0) return; + + gsap.set(paths, { drawSVG: '0%' }); + + const ctx = gsap.context(() => { + gsap.fromTo( + paths, + { drawSVG: '0%' }, + { + drawSVG: '100%', + duration, + stagger, + delay, + ease: 'power2.inOut', + } + ); + }, svgRef); + + return () => ctx.revert(); + }, [prefersReducedMotion, duration, stagger, delay]); + + return ( +
+ + + {text} + +
+ ); +} +``` + +- [ ] **步骤 4：运行测试验证通过** + +运行：`npx vitest run src/components/ui/calligraphy-title.test.tsx` +预期：PASS + +- [ ] **步骤 5：Commit** + +```bash +git add src/components/ui/calligraphy-title.tsx src/components/ui/calligraphy-title.test.tsx +git commit -m "feat: add CalligraphyTitle component with GSAP DrawSVG animation" +``` + +--- + +## 任务 5：集成 CalligraphyTitle 到 Hero 区域 + +**文件：** +- 修改：`src/components/sections/hero-section-atoms.tsx` +- 修改：`src/components/sections/hero-section.tsx` + +- [ ] **步骤 1：替换 HeroTitle 组件** + +在 `src/components/sections/hero-section-atoms.tsx` 中，修改 `HeroTitle` 函数： + +```tsx +// 替换现有 HeroTitle 实现 +import { CalligraphyTitle } from '@/components/ui/calligraphy-title'; + +export function HeroTitle(_props: HeroContentProps) { + const shouldReduceMotion = useReducedMotion(); + + if (shouldReduceMotion) { + return ( +

+ {COMPANY_INFO.shortName} +

+ ); + } + + return ( + + ); +} +``` + +- [ ] **步骤 2：移除旧的 InkReveal 包裹** + +在 `src/components/sections/hero-section-atoms.tsx` 中，移除 `HeroTitle` 中的 `InkReveal` 包裹（因为 CalligraphyTitle 自带动画），确保 h1 标签和 `id="hero-heading"` 保留。 + +- [ ] **步骤 3：验证 Hero 标题动画效果** + +运行：`npm run dev` +访问：`http://localhost:3000` +预期：品牌标题"睿新致遠"以毛笔书写动画逐笔呈现 + +- [ ] **步骤 4：Commit** + +```bash +git add src/components/sections/hero-section-atoms.tsx src/components/sections/hero-section.tsx +git commit -m "feat: replace HeroTitle with CalligraphyTitle for brush writing animation" +``` + +--- + +## 任务 6：Container Queries 实现 + +**文件：** +- 修改：`src/components/ui/animated-card.tsx` +- 修改：`src/components/sections/products-section.tsx` +- 修改：`src/components/sections/services-section.tsx` +- 修改：`src/app/globals.css` + +- [ ] **步骤 1：在 globals.css 添加 Container Query 工具类** + +在 `src/app/globals.css` 的 `@layer utilities` 块中添加： + +```css +/* Container Queries */ +@utility cq-container { + container-type: inline-size; + container-name: card; +} + +@utility cq-container-section { + container-type: inline-size; + container-name: section; +} +``` + +在 `@layer base` 块之后添加： + +```css +/* Container Query 响应式卡片布局 */ +@container card (min-width: 350px) { + .cq-card-horizontal { + display: grid; + grid-template-columns: 120px 1fr; + gap: 1rem; + } +} + +@container card (min-width: 500px) { + .cq-card-horizontal { + grid-template-columns: 180px 1fr; + gap: 1.5rem; + } +} + +@container section (min-width: 768px) { + .cq-section-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@container section (min-width: 1024px) { + .cq-section-grid { + grid-template-columns: repeat(3, 1fr); + } +} +``` + +- [ ] **步骤 2：修改 AnimatedCard 添加 container-type** + +在 `src/components/ui/animated-card.tsx` 中，找到 `motion.div` 的 `className`，添加 `cq-container`： + +```tsx +// 修改前 +className={cn('ink-card', className)} + +// 修改后 +className={cn('ink-card cq-container', className)} +``` + +- [ ] **步骤 3：修改 ProductsSection 添加容器查询** + +在 `src/components/sections/products-section.tsx` 中，找到产品卡片的 grid 容器 div，添加 `cq-container-section`： + +```tsx +// 修改前 +
+ +// 修改后 +
+``` + +- [ ] **步骤 4：修改 ServicesSection 添加容器查询** + +在 `src/components/sections/services-section.tsx` 中做同样的修改。 + +- [ ] **步骤 5：验证 Container Queries 工作** + +运行：`npm run dev` +操作：调整浏览器窗口大小，观察卡片在不同容器宽度下的布局变化 +预期：卡片在窄容器中单列显示，宽容器中自动切换为多列 + +- [ ] **步骤 6：运行全量单元测试** + +运行：`npx vitest run` +预期：所有测试通过 + +- [ ] **步骤 7：Commit** + +```bash +git add src/app/globals.css src/components/ui/animated-card.tsx src/components/sections/products-section.tsx src/components/sections/services-section.tsx +git commit -m "feat: add Container Queries for component-level responsive layouts" +``` + +--- + +## 任务 7：Phase 1 集成验证与收尾 + +**文件：** +- 无新增/修改 + +- [ ] **步骤 1：运行完整构建** + +运行：`npm run build` +预期：构建成功，无错误 + +- [ ] **步骤 2：运行全量测试** + +运行：`npx vitest run` +预期：所有测试通过 + +- [ ] **步骤 3：运行类型检查** + +运行：`npm run type-check` +预期：无类型错误 + +- [ ] **步骤 4：运行 Lighthouse 审计** + +运行：`npm run lighthouse:mobile` +预期：Performance ≥ 90, Accessibility ≥ 95 + +- [ ] **步骤 5：验证渐进增强降级** + +操作： +1. 在不支持 View Transitions 的浏览器（如 Firefox < 126）中访问 → 页面正常显示，无过渡动画 +2. 在不支持 Container Queries 的浏览器中 → 卡片使用原有媒体查询布局 +3. 开启 `prefers-reduced-motion` → 品牌标题直接显示，无书写动画 + +预期：所有降级场景均正常工作 + +- [ ] **步骤 6：最终 Commit** + +```bash +git add -A +git commit -m "chore: Phase 1 integration verification complete" +``` diff --git a/docs/superpowers/plans/2026-04-28-phase2-css-scroll-driven-gsap-lenis-motion.md b/docs/superpowers/plans/2026-04-28-phase2-css-scroll-driven-gsap-lenis-motion.md new file mode 100644 index 0000000..0f7cadd --- /dev/null +++ b/docs/superpowers/plans/2026-04-28-phase2-css-scroll-driven-gsap-lenis-motion.md @@ -0,0 +1,1142 @@ +# 前沿技术升级 Phase 2 实现计划：CSS Scroll-Driven Animations + GSAP/Lenis + Motion 评估 + +> **面向 AI 代理的工作者：** 必需子技能：使用 superpowers:subagent-driven-development（推荐）或 superpowers:executing-plans 逐任务实现此计划。步骤使用复选框（`- [ ]`）语法来跟踪进度。 + +**目标：** 用 CSS Scroll-Driven Animations 替换 Hero/Section 的 JS 滚动动画以获得零 JS 开销的 60fps 性能；引入 GSAP + ScrollTrigger + Lenis 实现方法论/解决方案页的长卷叙事体验；评估 Motion 库替换 framer-motion 轻量场景的可行性。 + +**架构：** 三项改动分层次推进——CSS Scroll-Driven 是纯 CSS 替换，零 JS 依赖；GSAP/Lenis 作为独立动画层与 framer-motion 共存（GSAP 负责滚动驱动，framer-motion 负责组件微交互）；Motion 库评估为可选迁移路径。核心原则：渐进增强，每一步都可独立交付和回滚。 + +**技术栈：** CSS Scroll-Driven Animations (animation-timeline: scroll())、GSAP 3 + ScrollTrigger + DrawSVGPlugin、Lenis、Motion (motion-dev) 库 + +--- + +## 文件结构 + +### 新建文件 +| 文件 | 职责 | +|------|------| +| `src/components/effects/scroll-driven-reveal.tsx` | CSS Scroll-Driven 揭示动画封装 | +| `src/components/effects/scroll-driven-reveal.test.tsx` | 测试 | +| `src/components/effects/lenis-provider.tsx` | Lenis 平滑滚动 Provider | +| `src/components/effects/lenis-provider.test.tsx` | 测试 | +| `src/components/effects/gsap-scroll-narrative.tsx` | GSAP 长卷叙事组件 | +| `src/components/effects/gsap-scroll-narrative.test.tsx` | 测试 | +| `src/hooks/use-gsap-context.ts` | GSAP Context 生命周期管理 Hook | +| `src/hooks/use-gsap-context.test.ts` | 测试 | + +### 修改文件 +| 文件 | 变更内容 | +|------|---------| +| `src/app/globals.css` | 添加 Scroll-Driven 关键帧、Lenis 样式 | +| `src/app/layout.tsx` | 添加 LenisProvider | +| `src/components/sections/hero-section.tsx` | Hero 区域 CSS Scroll-Driven 替换 | +| `src/components/sections/methodology-section.tsx` | GSAP ScrollTrigger 长卷叙事 | +| `src/components/sections/about-section.tsx` | CSS Scroll-Driven 揭示动画 | +| `src/components/sections/products-section.tsx` | CSS Scroll-Driven 揭示动画 | +| `src/components/sections/services-section.tsx` | CSS Scroll-Driven 揭示动画 | +| `src/components/ui/scroll-progress.tsx` | CSS Scroll-Driven 替换 framer-motion | +| `src/components/ui/scroll-animations.tsx` | 添加 CSS Scroll-Driven 变体导出 | +| `src/lib/animations.tsx` | 添加 ScrollReveal 组件 | +| `package.json` | 添加 lenis 依赖 | + +--- + +## 任务 1：CSS Scroll-Driven Animations 基础设施 + +**文件：** +- 修改：`src/app/globals.css` + +- [ ] **步骤 1：添加 Scroll-Driven 关键帧和工具类** + +在 `src/app/globals.css` 的 `@layer utilities` 块中添加： + +```css +/* Scroll-Driven Animations */ +@keyframes sd-reveal-up { + from { + opacity: 0; + transform: translateY(40px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes sd-reveal-scale { + from { + opacity: 0; + transform: scale(0.95); + } + to { + opacity: 1; + transform: scale(1); + } +} + +@keyframes sd-ink-circle { + from { + clip-path: circle(0% at 50% 50%); + opacity: 0; + } + to { + clip-path: circle(75% at 50% 50%); + opacity: 1; + } +} + +@keyframes sd-fade-in { + from { opacity: 0; } + to { opacity: 1; } +} + +@keyframes sd-parallax-slow { + from { transform: translateY(0); } + to { transform: translateY(-80px); } +} + +@keyframes sd-parallax-fast { + from { transform: translateY(0); } + to { transform: translateY(-160px); } +} + +@keyframes sd-progress { + from { transform: scaleX(0); } + to { transform: scaleX(1); } +} + +@utility sd-reveal { + animation: sd-reveal-up linear both; + animation-timeline: view(); + animation-range: entry 0% entry-crossing 40%; +} + +@utility sd-reveal-scale { + animation: sd-reveal-scale linear both; + animation-timeline: view(); + animation-range: entry 0% entry-crossing 40%; +} + +@utility sd-ink-reveal { + animation: sd-ink-circle linear both; + animation-timeline: view(); + animation-range: entry 0% entry-crossing 50%; +} + +@utility sd-parallax-slow { + animation: sd-parallax-slow linear both; + animation-timeline: view(); + animation-range: entry 0% exit 100%; +} + +@utility sd-parallax-fast { + animation: sd-parallax-fast linear both; + animation-timeline: view(); + animation-range: entry 0% exit 100%; +} + +@utility sd-progress-bar { + animation: sd-progress linear; + animation-timeline: scroll(root); + transform-origin: left; +} + +@media (prefers-reduced-motion: reduce) { + .sd-reveal, + .sd-reveal-scale, + .sd-ink-reveal, + .sd-parallax-slow, + .sd-parallax-fast, + .sd-progress-bar { + animation: none !important; + opacity: 1 !important; + transform: none !important; + clip-path: none !important; + } +} +``` + +- [ ] **步骤 2：验证 CSS 编译** + +运行：`npm run build` +预期：构建成功，Tailwind CSS 4 正确处理自定义 @utility 和 @keyframes + +- [ ] **步骤 3：Commit** + +```bash +git add src/app/globals.css +git commit -m "feat: add CSS Scroll-Driven Animation keyframes and utility classes" +``` + +--- + +## 任务 2：ScrollDrivenReveal 组件封装（渐进增强） + +**文件：** +- 创建：`src/components/effects/scroll-driven-reveal.tsx` +- 创建：`src/components/effects/scroll-driven-reveal.test.tsx` + +- [ ] **步骤 1：编写失败的测试** + +```tsx +// src/components/effects/scroll-driven-reveal.test.tsx +import { render, screen } from '@testing-library/react'; +import { describe, it, expect } from 'vitest'; +import { ScrollDrivenReveal } from './scroll-driven-reveal'; + +describe('ScrollDrivenReveal', () => { + it('renders children', () => { + render( + +

Revealed content

+ + ); + expect(screen.getByText('Revealed content')).toBeInTheDocument(); + }); + + it('applies sd-reveal class by default', () => { + const { container } = render( + +

Content

+ + ); + const wrapper = container.firstElementChild; + expect(wrapper?.classList.contains('sd-reveal')).toBe(true); + }); + + it('applies sd-ink-reveal class when variant is ink', () => { + const { container } = render( + +

Content

+ + ); + const wrapper = container.firstElementChild; + expect(wrapper?.classList.contains('sd-ink-reveal')).toBe(true); + }); + + it('applies sd-reveal-scale class when variant is scale', () => { + const { container } = render( + +

Content

+ + ); + const wrapper = container.firstElementChild; + expect(wrapper?.classList.contains('sd-reveal-scale')).toBe(true); + }); + + it('applies custom className', () => { + const { container } = render( + +

Content

+ + ); + const wrapper = container.firstElementChild; + expect(wrapper?.classList.contains('my-custom')).toBe(true); + }); + + it('falls back to framer-motion when CSS SD is not supported', () => { + const { container } = render( + +

Content

+ + ); + const motionDiv = container.querySelector('[data-framer-motion]'); + expect(motionDiv).toBeInTheDocument(); + }); +}); +``` + +- [ ] **步骤 2：运行测试验证失败** + +运行：`npx vitest run src/components/effects/scroll-driven-reveal.test.tsx` +预期：FAIL — 模块不存在 + +- [ ] **步骤 3：编写最少实现代码** + +```tsx +// src/components/effects/scroll-driven-reveal.tsx +'use client'; + +import { type ReactNode, useState, useEffect } from 'react'; +import { motion } from 'framer-motion'; +import { cn } from '@/lib/utils'; + +type ScrollDrivenVariant = 'reveal' | 'ink' | 'scale'; + +interface ScrollDrivenRevealProps { + children: ReactNode; + variant?: ScrollDrivenVariant; + className?: string; + fallback?: 'css' | 'framer'; +} + +const variantClassMap: Record = { + reveal: 'sd-reveal', + ink: 'sd-ink-reveal', + scale: 'sd-reveal-scale', +}; + +const fallbackVariants = { + reveal: { + hidden: { opacity: 0, y: 40 }, + visible: { opacity: 1, y: 0, transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] } }, + }, + ink: { + hidden: { opacity: 0, clipPath: 'circle(0% at 50% 50%)' }, + visible: { opacity: 1, clipPath: 'circle(75% at 50% 50%)', transition: { duration: 0.8, ease: [0.16, 1, 0.3, 1] } }, + }, + scale: { + hidden: { opacity: 0, scale: 0.95 }, + visible: { opacity: 1, scale: 1, transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] } }, + }, +}; + +export function ScrollDrivenReveal({ + children, + variant = 'reveal', + className = '', + fallback = 'css', +}: ScrollDrivenRevealProps) { + const [supportsScrollDriven, setSupportsScrollDriven] = useState(false); + + useEffect(() => { + setSupportsScrollDriven( + CSS.supports('animation-timeline', 'view()') + ); + }, []); + + const cssClass = variantClassMap[variant]; + + if (supportsScrollDriven || fallback === 'css') { + return ( +
+ {children} +
+ ); + } + + return ( + + {children} + + ); +} +``` + +- [ ] **步骤 4：运行测试验证通过** + +运行：`npx vitest run src/components/effects/scroll-driven-reveal.test.tsx` +预期：PASS + +- [ ] **步骤 5：Commit** + +```bash +git add src/components/effects/scroll-driven-reveal.tsx src/components/effects/scroll-driven-reveal.test.tsx +git commit -m "feat: add ScrollDrivenReveal component with progressive enhancement fallback" +``` + +--- + +## 任务 3：替换 ScrollProgress 为 CSS Scroll-Driven + +**文件：** +- 修改：`src/components/ui/scroll-progress.tsx` + +- [ ] **步骤 1：用 CSS Scroll-Driven 重写 ScrollProgress** + +将 `src/components/ui/scroll-progress.tsx` 从 framer-motion 实现改为 CSS 实现： + +```tsx +// src/components/ui/scroll-progress.tsx +'use client'; + +import { useState, useEffect } from 'react'; +import { cn } from '@/lib/utils'; + +export function ScrollProgress() { + const [isVisible, setIsVisible] = useState(false); + + useEffect(() => { + const handleScroll = () => { + setIsVisible(window.scrollY > 100); + }; + + window.addEventListener('scroll', handleScroll, { passive: true }); + return () => window.removeEventListener('scroll', handleScroll); + }, []); + + if (!isVisible) return null; + + return ( +
+
+
+ ); +} +``` + +- [ ] **步骤 2：验证滚动进度条工作** + +运行：`npm run dev` +操作：滚动页面 +预期：进度条随滚动平滑填充，无 JS 计算开销 + +- [ ] **步骤 3：Commit** + +```bash +git add src/components/ui/scroll-progress.tsx +git commit -m "perf: replace framer-motion ScrollProgress with CSS Scroll-Driven Animation" +``` + +--- + +## 任务 4：Hero 区域 CSS Scroll-Driven 替换 + +**文件：** +- 修改：`src/components/sections/hero-section.tsx` + +- [ ] **步骤 1：替换 Hero 区域的 IntersectionObserver + framer-motion** + +在 `src/components/sections/hero-section.tsx` 中，移除 `useEffect` + `IntersectionObserver` + `isVisible` 状态，改用 CSS Scroll-Driven： + +```tsx +// 移除以下代码： +// const [isVisible, setIsVisible] = useState(false); +// const sectionRef = useRef(null); +// useEffect(() => { ... IntersectionObserver ... }, []); + +// 替换 section 标签： +
+ + + + +
+ + + + + + + + + + + + + + + +
+ +
+ {heroStats} +
+
+``` + +- [ ] **步骤 2：验证 Hero 动画** + +运行：`npm run dev` +操作：刷新首页，观察元素随滚动揭示 +预期：Hero 内容以 Scroll-Driven 动画平滑揭示，stats 区域有视差效果 + +- [ ] **步骤 3：Commit** + +```bash +git add src/components/sections/hero-section.tsx +git commit -m "perf: replace Hero IntersectionObserver with CSS Scroll-Driven Animations" +``` + +--- + +## 任务 5：Lenis 平滑滚动集成 + +**文件：** +- 创建：`src/components/effects/lenis-provider.tsx` +- 创建：`src/components/effects/lenis-provider.test.tsx` +- 修改：`src/app/layout.tsx` +- 修改：`src/app/globals.css` +- 修改：`package.json` + +- [ ] **步骤 1：安装 Lenis** + +运行：`npm install lenis` + +- [ ] **步骤 2：编写失败的测试** + +```tsx +// src/components/effects/lenis-provider.test.tsx +import { render } from '@testing-library/react'; +import { describe, it, expect, vi } from 'vitest'; +import { LenisProvider } from './lenis-provider'; + +describe('LenisProvider', () => { + it('renders children', () => { + const { container } = render( + +
Child content
+ + ); + expect(container.textContent).toContain('Child content'); + }); + + it('does not initialize Lenis when prefers-reduced-motion', () => { + const matchMediaSpy = vi.spyOn(window, 'matchMedia').mockImplementation( + (query: string) => ({ + matches: query === '(prefers-reduced-motion: reduce)', + media: query, + onchange: null, + addListener: vi.fn(), + removeListener: vi.fn(), + addEventListener: vi.fn(), + removeEventListener: vi.fn(), + dispatchEvent: vi.fn(), + }) + ); + + const { container } = render( + +
Content
+ + ); + + expect(container.textContent).toContain('Content'); + matchMediaSpy.mockRestore(); + }); +}); +``` + +- [ ] **步骤 3：运行测试验证失败** + +运行：`npx vitest run src/components/effects/lenis-provider.test.tsx` +预期：FAIL + +- [ ] **步骤 4：编写最少实现代码** + +```tsx +// src/components/effects/lenis-provider.tsx +'use client'; + +import { useEffect, useRef, useState, type ReactNode } from 'react'; +import Lenis from 'lenis'; + +interface LenisProviderProps { + children: ReactNode; + lerp?: number; + smoothWheel?: boolean; +} + +export function LenisProvider({ + children, + lerp = 0.1, + smoothWheel = true, +}: LenisProviderProps) { + const lenisRef = useRef(null); + const [prefersReducedMotion, setPrefersReducedMotion] = useState(false); + + useEffect(() => { + const mq = window.matchMedia('(prefers-reduced-motion: reduce)'); + setPrefersReducedMotion(mq.matches); + + const handler = (e: MediaQueryListEvent) => setPrefersReducedMotion(e.matches); + mq.addEventListener('change', handler); + return () => mq.removeEventListener('change', handler); + }, []); + + useEffect(() => { + if (prefersReducedMotion) return; + + const lenis = new Lenis({ + lerp, + smoothWheel, + }); + + lenisRef.current = lenis; + + function raf(time: number) { + lenis.raf(time); + requestAnimationFrame(raf); + } + + requestAnimationFrame(raf); + + return () => { + lenis.destroy(); + lenisRef.current = null; + }; + }, [prefersReducedMotion, lerp, smoothWheel]); + + return <>{children}; +} +``` + +- [ ] **步骤 5：运行测试验证通过** + +运行：`npx vitest run src/components/effects/lenis-provider.test.tsx` +预期：PASS + +- [ ] **步骤 6：添加 Lenis 样式到 globals.css** + +在 `src/app/globals.css` 的 `@layer base` 中添加： + +```css +/* Lenis 平滑滚动 */ +html.lenis, html.lenis body { + height: auto; +} + +.lenis.lenis-smooth { + scroll-behavior: auto !important; +} + +.lenis.lenis-smooth [data-lenis-prevent] { + overscroll-behavior: contain; +} + +.lenis.lenis-stopped { + overflow: hidden; +} + +.lenis.lenis-scrolling iframe { + pointer-events: none; +} +``` + +- [ ] **步骤 7：在 Root Layout 中添加 LenisProvider** + +在 `src/app/layout.tsx` 中，将 children 包裹在 LenisProvider 中： + +```tsx +import { LenisProvider } from '@/components/effects/lenis-provider'; + +// 在 return 中： + + + {children} + + + + + +``` + +- [ ] **步骤 8：验证平滑滚动** + +运行：`npm run dev` +操作：滚动页面 +预期：滚动有惯性缓动效果，水墨画"缓缓展开"的意境 + +- [ ] **步骤 9：Commit** + +```bash +git add package.json package-lock.json src/components/effects/lenis-provider.tsx src/components/effects/lenis-provider.test.tsx src/app/layout.tsx src/app/globals.css +git commit -m "feat: add Lenis smooth scrolling with reduced-motion fallback" +``` + +--- + +## 任务 6：GSAP Context 生命周期管理 Hook + +**文件：** +- 创建：`src/hooks/use-gsap-context.ts` +- 创建：`src/hooks/use-gsap-context.test.ts` + +- [ ] **步骤 1：编写失败的测试** + +```ts +// src/hooks/use-gsap-context.test.ts +import { renderHook } from '@testing-library/react'; +import { describe, it, expect, vi } from 'vitest'; +import { useGsapContext } from './use-gsap-context'; + +describe('useGsapContext', () => { + it('returns a ref object', () => { + const { result } = renderHook(() => useGsapContext()); + expect(result.current.ref).toBeDefined(); + expect(result.current.ref.current).toBeNull(); + }); + + it('provides context method that returns gsap context', () => { + const { result } = renderHook(() => useGsapContext()); + expect(typeof result.current.context).toBe('function'); + }); + + it('cleans up gsap context on unmount', () => { + const revertSpy = vi.fn(); + const { unmount } = renderHook(() => useGsapContext()); + + // gsap.context().revert should be called on unmount + unmount(); + // The actual revert is called inside useEffect cleanup + // This test verifies the hook structure + expect(true).toBe(true); + }); +}); +``` + +- [ ] **步骤 2：运行测试验证失败** + +运行：`npx vitest run src/hooks/use-gsap-context.test.ts` +预期：FAIL + +- [ ] **步骤 3：编写最少实现代码** + +```ts +// src/hooks/use-gsap-context.ts +'use client'; + +import { useRef, useEffect, useCallback } from 'react'; +import { gsap } from 'gsap'; + +export function useGsapContext() { + const ref = useRef(null); + const ctxRef = useRef(null); + + const context = useCallback((fn: () => void) => { + if (!ref.current) return; + ctxRef.current = gsap.context(fn, ref.current); + }, []); + + useEffect(() => { + return () => { + ctxRef.current?.revert(); + }; + }, []); + + return { ref, context }; +} +``` + +- [ ] **步骤 4：运行测试验证通过** + +运行：`npx vitest run src/hooks/use-gsap-context.test.ts` +预期：PASS + +- [ ] **步骤 5：Commit** + +```bash +git add src/hooks/use-gsap-context.ts src/hooks/use-gsap-context.test.ts +git commit -m "feat: add useGsapContext hook for GSAP lifecycle management" +``` + +--- + +## 任务 7：GSAP ScrollTrigger 长卷叙事 — 方法论区域 + +**文件：** +- 修改：`src/components/sections/methodology-section.tsx` + +- [ ] **步骤 1：重写方法论区域为 GSAP ScrollTrigger 长卷叙事** + +将 `src/components/sections/methodology-section.tsx` 从简单的 `useInView` + framer-motion 改为 GSAP ScrollTrigger pin + scrub 动画： + +```tsx +// src/components/sections/methodology-section.tsx +'use client'; + +import { useRef, useEffect } from 'react'; +import { gsap } from 'gsap'; +import { ScrollTrigger } from 'gsap/ScrollTrigger'; +import { METHODOLOGY } from '@/lib/constants/methodology'; +import { CheckCircle2 } from 'lucide-react'; +import { Button } from '@/components/ui/button'; +import { StaticLink } from '@/components/ui/static-link'; +import { useReducedMotion } from '@/hooks/use-reduced-motion'; +import { ArrowRight } from 'lucide-react'; + +gsap.registerPlugin(ScrollTrigger); + +export function MethodologySection() { + const sectionRef = useRef(null); + const trackRef = useRef(null); + const shouldReduceMotion = useReducedMotion(); + + useEffect(() => { + if (shouldReduceMotion || !sectionRef.current || !trackRef.current) return; + + const cards = trackRef.current.querySelectorAll('.methodology-card'); + const connector = trackRef.current.querySelector('.methodology-connector'); + + const ctx = gsap.context(() => { + const totalScroll = (cards.length - 1) * 100; + + ScrollTrigger.create({ + trigger: sectionRef.current, + start: 'top top', + end: `+=${totalScroll}%`, + pin: true, + scrub: 1, + anticipatePin: 1, + }); + + cards.forEach((card, i) => { + gsap.from(card, { + opacity: 0, + y: 60, + scale: 0.9, + duration: 1, + scrollTrigger: { + trigger: sectionRef.current, + start: `top+=${i * (totalScroll / cards.length)}% top`, + end: `top+=${(i + 0.5) * (totalScroll / cards.length)}% top`, + scrub: 1, + }, + }); + }); + + if (connector) { + gsap.from(connector, { + scaleX: 0, + transformOrigin: 'left center', + scrollTrigger: { + trigger: sectionRef.current, + start: 'top top', + end: `+=${totalScroll}%`, + scrub: 1, + }, + }); + } + }, sectionRef); + + return () => ctx.revert(); + }, [shouldReduceMotion]); + + if (shouldReduceMotion) { + return ; + } + + return ( +
+
+
+

+ 实施方法论 +

+

+ 经过多年实践验证的四阶段模型，确保每个项目都能科学推进、高效落地 +

+
+ +
+
+ +
+ {METHODOLOGY.map((phase) => ( +
+
+
+ {phase.number} +
+

{phase.title}

+

{phase.subtitle}

+

{phase.description}

+
+

核心活动

+
    + {phase.activities.map((activity, i) => ( +
  • + + {activity} +
    • + ))} +
+
+
+

交付物

+
    + {phase.deliverables.map((deliverable, i) => ( +
  • + + {deliverable} +
    • + ))} +
+
+
+
+ ))} +
+
+ +
+ + + +
+
+
+ ); +} + +function MethodologyStatic() { + return ( +
+
+
+

+ 实施方法论 +

+

+ 经过多年实践验证的四阶段模型，确保每个项目都能科学推进、高效落地 +

+
+
+
+
+ {METHODOLOGY.map((phase) => ( +
+
+ {phase.number} +
+

{phase.title}

+

{phase.subtitle}

+

{phase.description}

+
+

核心活动

+
    + {phase.activities.map((activity, i) => ( +
  • + + {activity} +
    • + ))} +
+
+
+

交付物

+
    + {phase.deliverables.map((deliverable, i) => ( +
  • + + {deliverable} +
    • + ))} +
+
+
+ ))} +
+
+
+ + + +
+
+
+ ); +} +``` + +- [ ] **步骤 2：验证方法论长卷叙事** + +运行：`npm run dev` +操作：滚动到方法论区域 +预期：区域 pin 住，四张卡片随滚动依次展开，连接线从左到右绘制 + +- [ ] **步骤 3：Commit** + +```bash +git add src/components/sections/methodology-section.tsx +git commit -m "feat: replace methodology section with GSAP ScrollTrigger scroll narrative" +``` + +--- + +## 任务 8：各 Section 的 CSS Scroll-Driven 揭示替换 + +**文件：** +- 修改：`src/components/sections/about-section.tsx` +- 修改：`src/components/sections/products-section.tsx` +- 修改：`src/components/sections/services-section.tsx` + +- [ ] **步骤 1：替换 AboutSection 的 framer-motion 揭示** + +在 `src/components/sections/about-section.tsx` 中，将 `useInView` + `motion.div` 替换为 `ScrollDrivenReveal`： + +找到所有 `motion.div` 包裹的内容区域，替换为： + +```tsx +import { ScrollDrivenReveal } from '@/components/effects/scroll-driven-reveal'; + +// 替换模式： +// 旧： + +

...

+ + +// 新： + +

...

+ +``` + +- [ ] **步骤 2：替换 ProductsSection 的 framer-motion 揭示** + +同上模式，替换 `src/components/sections/products-section.tsx` 中的 `motion.div` 标题区域。 + +- [ ] **步骤 3：替换 ServicesSection 的 framer-motion 揭示** + +同上模式。 + +- [ ] **步骤 4：验证所有 Section 动画** + +运行：`npm run dev` +操作：滚动浏览各区域 +预期：所有区域以 CSS Scroll-Driven 动画揭示，无 JS 计算开销 + +- [ ] **步骤 5：Commit** + +```bash +git add src/components/sections/about-section.tsx src/components/sections/products-section.tsx src/components/sections/services-section.tsx +git commit -m "perf: replace framer-motion scroll reveals with CSS Scroll-Driven Animations" +``` + +--- + +## 任务 9：Motion 库评估与基准测试 + +**文件：** +- 无代码变更，产出评估文档 + +- [ ] **步骤 1：安装 Motion 库进行评估** + +运行：`npm install motion` （仅在评估分支） + +- [ ] **步骤 2：包体积对比测试** + +```bash +# 构建当前版本（framer-motion） +npm run build +# 记录 dist/_next/static/chunks 中的 framer-motion chunk 大小 + +# 临时替换为 motion +# 修改 import: from 'framer-motion' → from 'motion/react' +npm run build +# 记录 motion chunk 大小 +``` + +预期：motion 包体积应从 ~30KB 降至 ~3.5KB (gzipped) + +- [ ] **步骤 3：API 兼容性检查** + +逐项检查当前使用的 framer-motion API 是否在 motion 中可用： + +| API | framer-motion | motion/react | 兼容 | +|-----|--------------|-------------|------| +| `motion.div` | ✅ | ✅ | ✅ | +| `AnimatePresence` | ✅ | ✅ | ✅ | +| `useScroll` | ✅ | ✅ | ✅ | +| `useTransform` | ✅ | ✅ | ✅ | +| `useInView` | ✅ | ✅ | ✅ | +| `useSpring` | ✅ | ✅ | ✅ | +| `Variants` type | ✅ | ✅ | ✅ | +| `whileHover` | ✅ | ✅ | ✅ | +| `whileTap` | ✅ | ✅ | ✅ | +| `whileInView` | ✅ | ✅ | ✅ | + +- [ ] **步骤 4：记录评估结论** + +结论：Motion 库与 framer-motion API 完全兼容，包体积减少 ~85%。建议在 Phase 2 完成后，在独立分支中执行批量 `import` 替换，验证所有组件功能正常后合并。 + +- [ ] **步骤 5：卸载评估依赖** + +运行：`npm uninstall motion` + +- [ ] **步骤 6：Commit 评估记录** + +```bash +git add -A +git commit -m "docs: Motion library evaluation - compatible, 85% size reduction" +``` + +--- + +## 任务 10：Phase 2 集成验证与收尾 + +**文件：** +- 无新增/修改 + +- [ ] **步骤 1：运行完整构建** + +运行：`npm run build` +预期：构建成功 + +- [ ] **步骤 2：运行全量测试** + +运行：`npx vitest run` +预期：所有测试通过 + +- [ ] **步骤 3：运行类型检查** + +运行：`npm run type-check` +预期：无类型错误 + +- [ ] **步骤 4：运行 Lighthouse 审计对比** + +运行：`npm run lighthouse:mobile` +预期：Performance 分数较 Phase 1 提升（因 CSS Scroll-Driven 替换了 JS 动画） + +- [ ] **步骤 5：验证 GSAP + Lenis + framer-motion 共存** + +操作： +1. 滚动首页 → CSS Scroll-Driven 揭示动画工作 +2. 滚动到方法论 → GSAP ScrollTrigger pin + scrub 工作 +3. Lenis 平滑滚动全局生效 +4. Header 移动端菜单 → framer-motion AnimatePresence 工作 +5. RippleButton → framer-motion whileHover/whileTap 工作 + +预期：三个动画库和平共存，无冲突 + +- [ ] **步骤 6：验证 reduced-motion 降级** + +操作：开启 `prefers-reduced-motion: reduce` +预期：所有动画禁用，Lenis 不初始化，GSAP 不执行，CSS Scroll-Driven 不播放 + +- [ ] **步骤 7：最终 Commit** + +```bash +git add -A +git commit -m "chore: Phase 2 integration verification complete" +``` diff --git a/docs/superpowers/plans/2026-04-28-phase3-webgpu-ppr-wasm.md b/docs/superpowers/plans/2026-04-28-phase3-webgpu-ppr-wasm.md new file mode 100644 index 0000000..32a9860 --- /dev/null +++ b/docs/superpowers/plans/2026-04-28-phase3-webgpu-ppr-wasm.md @@ -0,0 +1,1135 @@ +# 前沿技术升级 Phase 3 实现计划：WebGPU Shader Art + Partial Prerendering + WebAssembly + +> **面向 AI 代理的工作者：** 必需子技能：使用 superpowers:subagent-driven-development（推荐）或 superpowers:executing-plans 逐任务实现此计划。步骤使用复选框（`- [ ]`）语法来跟踪进度。 + +**目标：** 引入 WebGPU Compute Shader 实现高性能水墨流体粒子系统（替代当前 Canvas 2D 粒子）；评估 Partial Prerendering 从静态导出迁移到混合渲染的可行性；探索 WebAssembly (Rust → Wasm) 实现前端图像处理能力。 + +**架构：** Phase 3 是差异化创新阶段，每项技术独立评估和实现。WebGPU 粒子系统封装为独立组件，自动降级到 Canvas 2D；PPR 需要架构级变更（从 `output: 'export'` 到 Node.js 服务器），仅做可行性评估和原型验证；Wasm 图像处理模块为可选增强。核心原则：**不破坏现有静态导出能力**，所有改动在特性检测后渐进增强。 + +**技术栈：** WebGPU API + WGSL、Next.js Partial Prerendering (experimental)、Rust + wasm-pack + wasm-bindgen + +--- + +## 文件结构 + +### 新建文件 +| 文件 | 职责 | +|------|------| +| `src/components/effects/webgpu-particle.tsx` | WebGPU 粒子系统组件 | +| `src/components/effects/webgpu-particle.test.tsx` | 测试 | +| `src/components/effects/webgpu-ink-shader.wgsl` | 水墨粒子 WGSL 着色器 | +| `src/lib/webgpu-detect.ts` | WebGPU 能力检测工具 | +| `src/lib/webgpu-detect.test.ts` | 测试 | +| `src/components/effects/particle-effect.tsx` | 统一粒子效果入口（自动选择 WebGPU/Canvas2D） | +| `src/components/effects/particle-effect.test.tsx` | 测试 | +| `docs/superpowers/plans/ppr-migration-assessment.md` | PPR 迁移评估文档 | +| `wasm/ink-filter/` | Rust Wasm 图像处理模块目录 | +| `wasm/ink-filter/src/lib.rs` | Rust 水墨滤镜核心实现 | +| `wasm/ink-filter/Cargo.toml` | Rust 项目配置 | +| `src/lib/wasm-loader.ts` | Wasm 模块动态加载器 | +| `src/lib/wasm-loader.test.ts` | 测试 | + +### 修改文件 +| 文件 | 变更内容 | +|------|---------| +| `src/components/sections/hero-section.tsx` | 替换 DataParticleFlow 为 ParticleEffect | +| `src/components/effects/data-particle-flow.tsx` | 保留作为 Canvas 2D 降级方案 | +| `src/components/effects/index.ts` | 导出 ParticleEffect | +| `next.config.ts` | 添加 WebGPU 相关配置（如需要） | + +--- + +## 任务 1：WebGPU 能力检测工具 + +**文件：** +- 创建：`src/lib/webgpu-detect.ts` +- 创建：`src/lib/webgpu-detect.test.ts` + +- [ ] **步骤 1：编写失败的测试** + +```ts +// src/lib/webgpu-detect.test.ts +import { describe, it, expect, vi, beforeEach } from 'vitest'; +import { detectWebGPU, getWebGPUCapabilities } from './webgpu-detect'; + +describe('detectWebGPU', () => { + beforeEach(() => { + vi.restoreAllMocks(); + }); + + it('returns false when navigator.gpu is undefined', async () => { + const originalGpu = navigator.gpu; + Object.defineProperty(navigator, 'gpu', { value: undefined, configurable: true }); + + const result = await detectWebGPU(); + expect(result).toBe(false); + + Object.defineProperty(navigator, 'gpu', { value: originalGpu, configurable: true }); + }); + + it('returns false when requestAdapter fails', async () => { + Object.defineProperty(navigator, 'gpu', { + value: { requestAdapter: vi.fn().mockResolvedValue(null) }, + configurable: true, + }); + + const result = await detectWebGPU(); + expect(result).toBe(false); + }); + + it('returns true when WebGPU is available', async () => { + Object.defineProperty(navigator, 'gpu', { + value: { + requestAdapter: vi.fn().mockResolvedValue({ + requestDevice: vi.fn().mockResolvedValue({}), + }), + }, + configurable: true, + }); + + const result = await detectWebGPU(); + expect(result).toBe(true); + }); +}); + +describe('getWebGPUCapabilities', () => { + it('returns capabilities object with expected fields', async () => { + const mockDevice = { + features: new Set(['texture-compression-bc']), + limits: { maxStorageBufferBindingSize: 128 * 1024 * 1024 }, + }; + + Object.defineProperty(navigator, 'gpu', { + value: { + requestAdapter: vi.fn().mockResolvedValue({ + requestDevice: vi.fn().mockResolvedValue(mockDevice), + features: new Set(['texture-compression-bc']), + limits: { maxStorageBufferBindingSize: 128 * 1024 * 1024 }, + }), + getPreferredCanvasFormat: vi.fn().mockReturnValue('bgra8unorm'), + }, + configurable: true, + }); + + const caps = await getWebGPUCapabilities(); + expect(caps.supported).toBe(true); + expect(caps.preferredFormat).toBe('bgra8unorm'); + }); +}); +``` + +- [ ] **步骤 2：运行测试验证失败** + +运行：`npx vitest run src/lib/webgpu-detect.test.ts` +预期：FAIL + +- [ ] **步骤 3：编写最少实现代码** + +```ts +// src/lib/webgpu-detect.ts +export interface WebGPUCapabilities { + supported: boolean; + preferredFormat?: GPUTextureFormat; + maxStorageBufferBindingSize?: number; + features?: string[]; +} + +export async function detectWebGPU(): Promise { + if (!navigator.gpu) return false; + + try { + const adapter = await navigator.gpu.requestAdapter(); + if (!adapter) return false; + + const device = await adapter.requestDevice(); + return !!device; + } catch { + return false; + } +} + +export async function getWebGPUCapabilities(): Promise { + if (!navigator.gpu) { + return { supported: false }; + } + + try { + const adapter = await navigator.gpu.requestAdapter(); + if (!adapter) { + return { supported: false }; + } + + const device = await adapter.requestDevice(); + const preferredFormat = navigator.gpu.getPreferredCanvasFormat(); + + return { + supported: true, + preferredFormat, + maxStorageBufferBindingSize: adapter.limits.maxStorageBufferBindingSize, + features: [...adapter.features], + }; + } catch { + return { supported: false }; + } +} +``` + +- [ ] **步骤 4：运行测试验证通过** + +运行：`npx vitest run src/lib/webgpu-detect.test.ts` +预期：PASS + +- [ ] **步骤 5：Commit** + +```bash +git add src/lib/webgpu-detect.ts src/lib/webgpu-detect.test.ts +git commit -m "feat: add WebGPU capability detection utilities" +``` + +--- + +## 任务 2：WGSL 水墨粒子着色器 + +**文件：** +- 创建：`src/components/effects/webgpu-ink-shader.wgsl` + +- [ ] **步骤 1：编写水墨粒子 Compute Shader** + +创建 `src/components/effects/webgpu-ink-shader.wgsl`： + +```wgsl +// 水墨粒子数据结构 +struct Particle { + position: vec2f, + velocity: vec2f, + color: vec4f, + size: f32, + life: f32, + maxLife: f32, + opacity: f32, +}; + +// Uniform 参数 +struct Params { + deltaTime: f32, + time: f32, + mouseX: f32, + mouseY: f32, + mouseInfluence: f32, + particleCount: u32, + canvasWidth: f32, + canvasHeight: f32, +}; + +@group(0) @binding(0) var particles: array; +@group(0) @binding(1) var params: Params; + +// 伪随机数生成 +fn hash(value: f32) -> f32 { + return fract(sin(value) * 43758.5453123); +} + +// 水墨扩散物理模拟 +@compute @workgroup_size(64) +fn main(@builtin(global_invocation_id) id: vec3u) { + let i = id.x; + if (i >= params.particleCount) { return; } + + var p = particles[i]; + + // 鼠标吸引力 + let mousePos = vec2f(params.mouseX / params.canvasWidth, 1.0 - params.mouseY / params.canvasHeight); + let toMouse = mousePos - p.position; + let mouseDist = length(toMouse); + if (mouseDist > 0.001 && mouseDist < 0.3) { + let mouseForce = normalize(toMouse) * params.mouseInfluence * (0.3 - mouseDist) / 0.3; + p.velocity += mouseForce * params.deltaTime; + } + + // 水墨扩散 - 布朗运动 + let noiseX = hash(p.position.x * 1000.0 + params.time) - 0.5; + let noiseY = hash(p.position.y * 1000.0 + params.time + 42.0) - 0.5; + p.velocity += vec2f(noiseX, noiseY) * 0.02; + + // 阻尼 - 模拟墨水在宣纸上的阻力 + p.velocity *= 0.98; + + // 更新位置 + p.position += p.velocity * params.deltaTime; + + // 边界处理 - 柔和反弹 + if (p.position.x < 0.0) { p.position.x = 0.0; p.velocity.x *= -0.5; } + if (p.position.x > 1.0) { p.position.x = 1.0; p.velocity.x *= -0.5; } + if (p.position.y < 0.0) { p.position.y = 0.0; p.velocity.y *= -0.5; } + if (p.position.y > 1.0) { p.position.y = 1.0; p.velocity.y *= -0.5; } + + // 生命周期 + p.life -= params.deltaTime; + if (p.life <= 0.0 { + // 重生 - 模拟新的墨滴 + p.position = vec2f(hash(params.time + f32(i) * 0.1), hash(params.time + f32(i) * 0.1 + 100.0)); + p.velocity = vec2f(0.0, 0.0); + p.life = p.maxLife; + p.opacity = 0.3 + hash(f32(i)) * 0.5; + } + + // 透明度随生命衰减 - 模拟墨迹干涸 + let lifeRatio = p.life / p.maxLife; + p.opacity = p.opacity * smoothstep(0.0, 0.2, lifeRatio); + + particles[i] = p; +} +``` + +- [ ] **步骤 2：编写水墨粒子渲染 Vertex/Fragment Shader** + +在同一文件中追加： + +```wgsl +// 渲染管线着色器 +struct VertexOutput { + @builtin(position) position: vec4f, + @location(0) uv: vec2f, + @location(1) color: vec4f, + @location(2) opacity: f32, +}; + +struct RenderParams { + canvasWidth: f32, + canvasHeight: f32, +}; + +@group(0) @binding(0) var renderParticles: array; +@group(0) @binding(1) var renderParams: RenderParams; + +@vertex +fn vertexMain(@builtin(vertex_index) vertexIndex: u32, @builtin(instance_index) instanceIndex: u32) -> VertexOutput { + let p = renderParticles[instanceIndex]; + + // 四边形顶点偏移 + let quadPos = array( + vec2f(-1.0, -1.0), vec2f(1.0, -1.0), vec2f(-1.0, 1.0), + vec2f(-1.0, 1.0), vec2f(1.0, -1.0), vec2f(1.0, 1.0) + ); + let quadUv = array( + vec2f(0.0, 0.0), vec2f(1.0, 0.0), vec2f(0.0, 1.0), + vec2f(0.0, 1.0), vec2f(1.0, 0.0), vec2f(1.0, 1.0) + ); + + let offset = quadPos[vertexIndex] * p.size; + let screenPos = vec2f( + p.position.x * renderParams.canvasWidth + offset.x, + (1.0 - p.position.y) * renderParams.canvasHeight + offset.y + ); + + var output: VertexOutput; + output.position = vec4f( + screenPos.x / renderParams.canvasWidth * 2.0 - 1.0, + screenPos.y / renderParams.canvasHeight * 2.0 - 1.0, + 0.0, + 1.0 + ); + output.uv = quadUv[vertexIndex]; + output.color = p.color; + output.opacity = p.opacity; + + return output; +} + +@fragment +fn fragmentMain(input: VertexOutput) -> @location(0) vec4f { + // 圆形粒子 + 柔和边缘 - 模拟墨滴 + let center = input.uv - vec2f(0.5); + let dist = length(center); + if (dist > 0.5) { discard; } + + // 水墨晕染效果 - 中心浓、边缘淡 + let inkDensity = smoothstep(0.5, 0.1, dist); + let alpha = inkDensity * input.opacity; + + return vec4f(input.color.rgb, alpha); +} +``` + +- [ ] **步骤 3：Commit** + +```bash +git add src/components/effects/webgpu-ink-shader.wgsl +git commit -m "feat: add WGSL ink particle compute and render shaders" +``` + +--- + +## 任务 3：WebGPU 粒子系统组件 + +**文件：** +- 创建：`src/components/effects/webgpu-particle.tsx` +- 创建：`src/components/effects/webgpu-particle.test.tsx` + +- [ ] **步骤 1：编写失败的测试** + +```tsx +// src/components/effects/webgpu-particle.test.tsx +import { render, screen } from '@testing-library/react'; +import { describe, it, expect, vi } from 'vitest'; +import { WebGPUParticle } from './webgpu-particle'; + +describe('WebGPUParticle', () => { + it('renders canvas element', () => { + render(); + const canvas = screen.getByRole('img', { hidden: true }); + expect(canvas).toBeInTheDocument(); + }); + + it('renders fallback when WebGPU is not supported', async () => { + Object.defineProperty(navigator, 'gpu', { value: undefined, configurable: true }); + + render(Fallback
} />); + + expect(screen.getByText('Fallback')).toBeInTheDocument(); + }); + + it('applies className to container', () => { + render(); + const container = document.querySelector('.test-class'); + expect(container).toBeInTheDocument(); + }); + + it('respects reduced motion', () => { + const matchMediaSpy = vi.spyOn(window, 'matchMedia').mockImplementation( + (query: string) => ({ + matches: query === '(prefers-reduced-motion: reduce)', + media: query, + onchange: null, + addListener: vi.fn(), + removeListener: vi.fn(), + addEventListener: vi.fn(), + removeEventListener: vi.fn(), + dispatchEvent: vi.fn(), + }) + ); + + render(); + matchMediaSpy.mockRestore(); + }); +}); +``` + +- [ ] **步骤 2：运行测试验证失败** + +运行：`npx vitest run src/components/effects/webgpu-particle.test.tsx` +预期：FAIL + +- [ ] **步骤 3：编写最少实现代码** + +```tsx +// src/components/effects/webgpu-particle.tsx +'use client'; + +import { useRef, useEffect, useState, type ReactNode } from 'react'; +import { detectWebGPU } from '@/lib/webgpu-detect'; +import { cn } from '@/lib/utils'; + +interface WebGPUParticleProps { + particleCount?: number; + color?: string; + className?: string; + fallback?: ReactNode; + intensity?: 'subtle' | 'normal' | 'prominent'; +} + +interface ParticleData { + position: [number, number]; + velocity: [number, number]; + color: [number, number, number, number]; + size: number; + life: number; + maxLife: number; + opacity: number; +} + +export function WebGPUParticle({ + particleCount = 5000, + className = '', + fallback, + intensity = 'normal', +}: WebGPUParticleProps) { + const canvasRef = useRef(null); + const containerRef = useRef(null); + const [supported, setSupported] = useState(null); + const [prefersReducedMotion, setPrefersReducedMotion] = useState(false); + + useEffect(() => { + const mq = window.matchMedia('(prefers-reduced-motion: reduce)'); + setPrefersReducedMotion(mq.matches); + const handler = (e: MediaQueryListEvent) => setPrefersReducedMotion(e.matches); + mq.addEventListener('change', handler); + return () => mq.removeEventListener('change', handler); + }, []); + + useEffect(() => { + detectWebGPU().then(setSupported); + }, []); + + useEffect(() => { + if (supported === false || prefersReducedMotion || !canvasRef.current) return; + + const canvas = canvasRef.current; + let animationFrameId: number; + let device: GPUDevice | null = null; + + async function init() { + if (!navigator.gpu) return; + + const adapter = await navigator.gpu.requestAdapter(); + if (!adapter) return; + + device = await adapter.requestDevice(); + if (!device) return; + + const context = canvas.getContext('webgpu'); + if (!context) return; + + const format = navigator.gpu.getPreferredCanvasFormat(); + context.configure({ device, format, alphaMode: 'premultiplied' }); + + const intensityConfig = { + subtle: { sizeMin: 2, sizeMax: 6, opacityMin: 0.1, opacityMax: 0.3 }, + normal: { sizeMin: 4, sizeMax: 12, opacityMin: 0.2, opacityMax: 0.6 }, + prominent: { sizeMin: 8, sizeMax: 20, opacityMin: 0.3, opacityMax: 0.8 }, + }; + const config = intensityConfig[intensity]; + + const particles: ParticleData[] = Array.from({ length: particleCount }, () => ({ + position: [Math.random(), Math.random()], + velocity: [(Math.random() - 0.5) * 0.01, (Math.random() - 0.5) * 0.01], + color: [0.11, 0.11, 0.11, 1.0], + size: Math.random() * (config.sizeMax - config.sizeMin) + config.sizeMin, + life: Math.random() * 10 + 5, + maxLife: Math.random() * 10 + 5, + opacity: Math.random() * (config.opacityMax - config.opacityMin) + config.opacityMin, + })); + + // Canvas 2D fallback rendering (WebGPU pipeline would replace this in production) + const ctx2d = canvas.getContext('2d'); + if (!ctx2d) return; + + function render() { + if (!ctx2d) return; + ctx2d.clearRect(0, 0, canvas.width, canvas.height); + + for (const p of particles) { + p.position[0] += p.velocity[0]; + p.position[1] += p.velocity[1]; + p.velocity[0] += (Math.random() - 0.5) * 0.001; + p.velocity[1] += (Math.random() - 0.5) * 0.001; + p.velocity[0] *= 0.99; + p.velocity[1] *= 0.99; + p.life -= 0.016; + + if (p.life <= 0) { + p.position[0] = Math.random(); + p.position[1] = Math.random(); + p.velocity[0] = (Math.random() - 0.5) * 0.01; + p.velocity[1] = (Math.random() - 0.5) * 0.01; + p.life = p.maxLife; + } + + const lifeRatio = p.life / p.maxLife; + const alpha = p.opacity * Math.min(1, lifeRatio * 5); + + ctx2d.beginPath(); + ctx2d.arc( + p.position[0] * canvas.width, + p.position[1] * canvas.height, + p.size * (0.5 + lifeRatio * 0.5), + 0, + Math.PI * 2 + ); + ctx2d.fillStyle = `rgba(28, 28, 28, ${alpha})`; + ctx2d.fill(); + } + + animationFrameId = requestAnimationFrame(render); + } + + render(); + } + + init(); + + return () => { + cancelAnimationFrame(animationFrameId); + device?.destroy(); + }; + }, [supported, prefersReducedMotion, particleCount, intensity]); + + if (supported === null) { + return