refactor: 移除hero水墨动画，优化全局样式与组件细节

2026-05-04 00:00:19 +08:00
parent 61bb24d56e
commit 747405dc96
19 changed files with 1757 additions and 19 deletions
@@ -0,0 +1,55 @@
+# 粒子束视觉升级与移动端适配设计
+
+日期: 2026-05-03
+状态: 已批准
+
+## 目标
+
+提升 InkDataMorph 粒子动画的视觉美观度，并确保移动端展示体验。
+
+## 核心改动
+
+### 1. 多色调系统（5级水墨色调）
+
+| 色调 | 色值 | 用途 | 分配比例 |
+|------|------|------|----------|
+| 浓墨 | #1C1C1C | 核心墨点 | 15% |
+| 淡墨 | #4A4A4A | 中间层次 | 25% |
+| 浅墨 | #8C8C8C | 氛围渲染 | 30% |
+| 朱砂 | #C41E3A | 点缀焦点 | 10% |
+| 淡朱 | #E8707A | 淡雅扩散 | 20% |
+
+### 2. 粒子形态升级
+
+- 椭圆粒子 + 随机旋转角度（ctx.ellipse 替代 ctx.arc）
+- 浓墨粒子：纵横比 0.8-1.0（近圆）
+- 淡墨/浅墨粒子：纵横比 0.5-0.9（椭圆）
+- 墨迹飞溅：10% 粒子为飞溅粒子（更快速度、更小半径、不参与 morphing）
+
+### 3. 响应式适配
+
+| 参数 | 移动端 (<768px) | 平板 (768-1023px) | 桌面 (≥1024px) |
+|------|-----------------|-------------------|----------------|
+| 粒子数量 | 80 | 140 | 220 |
+| 墨点起始 | 单墨点（右侧中上） | 双墨点（缩小间距） | 双墨点（当前） |
+| 目标区域X | W*(0.55-0.9) | W*(0.5-0.9) | W*(0.5-0.9) |
+| 目标区域Y | H*(0.1-0.5) | H*(0.12-0.6) | H*(0.12-0.65) |
+| 连接距离 | 60px | 80px | 100px |
+| 光晕缩放 | 0.5x | 0.75x | 1.0x |
+| 渐变层数 | 2 | 2 | 3 |
+| 拖尾效果 | 关闭 | 5帧 | 8帧 |
+| 飞溅粒子 | 无 | 5% | 10% |
+
+### 4. 技术实现
+
+- Particle 接口新增: rotation, scaleX, scaleY, isSplash, toneIndex
+- 新增 InkTone 枚举和 TONES 常量数组
+- 新增 getResponsiveConfig(W) 函数根据屏幕宽度返回配置
+- resize 监听（debounced 300ms）重新初始化粒子系统
+- DPR 适配: Math.min(window.devicePixelRatio, 2)
+- 移动端性能优化: 减少渐变层、关闭拖尾、减少粒子数
+
+## 文件影响
+
+- src/components/effects/ink-data-morph.tsx — 主要改动文件
+- src/components/effects/ink-data-morph.test.tsx — 测试更新