# HY4 迭代 2：向导 art 图形重做（当前实现失败，推倒重来）

> 2026-09-01 · 前置：你（HY4）上一轮的 A/B/C 已合入（f805aa5/971c4ae/6af95c9），
> 我方追加 ffbe1cd（CHANGELOG ✕ 关闭）与 ffbe1cd 前的滚动修复。
> 本次只重做一件事：**向导每步顶部的立体图形**。排版与 CHANGELOG 开场不动。

## 1. 当前实现的实测失败点（我方截图+DOM 实测，2026-09-01）

1. **全灰白无色**：22 个共用 span 全部只吃 `.gf` 的白系渐变+白边（rgba(255,255,255,.x)），
   没有任何品牌色——用户原话"怎么连颜色都没有"。
2. **非当前步元素塌缩**：所有 art 类型的 span 全部塞进同一个 `[data-dam-tour-art]` 容器
   渲染（needle/dome/cube/hex/ring… 22 个），当前步只用 `.p1/p2/p3`，其余 19 个
   span 无尺寸定义 → 计算尺寸全部 2px/0px 的废节点。
3. **不灵动**：art 容器是静态的（只有入场 pop），无浮沉/自转/光扫；与主 stage 的
   动画语言脱节。
4. **store 步形不似**：三小条 11px 白片浮在主 stage 上方，与"三层玻璃板"的
   呼应关系没有建立（比例太小、无透视、无厚度）。

## 2. 重做方案（方向不变，实现推倒）

**架构改造（必做）**：`[data-dam-tour-art]` 只渲染**当前步一个**图形
（现在是一个容器塞 22 个 span）。渲染器按 `step.art` switch 输出对应 DOM。

**统一材质基底（修无色）**：所有图形共用 `.ga`（glass art piece）基类：
- 本体：`linear-gradient(135deg, rgba(233,240,255,.34), rgba(233,240,255,.10))`
  + **品牌色 tint**：`box-shadow: inset 0 0 18px rgba(126,164,255,.28)`（每步可换 hue）
- 边光：`border: 1.2px solid rgba(255,255,255,.62)` + `inset 0 1px 0 rgba(255,255,255,.7)`
- 高光斑：每片一个 `::after` 椭圆白高光（左上 30% 处，blur 2px）
- 投影：`filter: drop-shadow(0 6px 14px rgba(10,20,60,.35))`

**每步图形重设计（比例基于 150×150 orb-wrap,主体约 56×56,悬浮于主 stage 上方）**：

| step.art | 图形 | 关键结构 | 动效（专属,常驻循环） |
|---|---|---|---|
| store | 微缩三层玻璃板 | 3 片 34×10 圆角片,各自 preserve-3d 厚度(translateZ ±3px),与主 stage 同角度旋转 | 三片依次轻浮动(相位错开 0.5s) |
| inject | 注入光滴 | 竖圆角针(10×34)+顶端悬浮小球(8px,呼吸发光) | 小球上下浮动,针身光泽扫过 |
| bell | 通知铃 | 圆顶(30×26)+底板(38×7),圆顶内一个小球舌 | 整体左右轻摆(±6°,3s) |
| calendar | 日历叠页 | 34×30 圆角方块+顶部两个装订环+页缝线 | 每 4s 翻页一下(top 半片 rotateX 翻动) |
| link | 双连环 | 两个 22px 玻璃环交叠,交叠区亮 | 两环相向缓慢旋转(方向相反) |
| engine | 棱镜核 | 32px 旋转 45° 圆角方+中心 10px 亮核 | 中心核呼吸发光(1.8s) |
| radar | 雷达环 | 外环 42/内环 22 同心+中心点 | **扫描线旋转**(conic-gradient 遮罩旋转,2.2s)+中心点脉冲 |
| rocket | 阶梯塔 | 三层阶梯+顶端光点 | 光点上升消失→从底部重来(1.6s 循环) |
| bubble | 玻璃泡 | 32px 球(radial 高光偏左上) | 浮沉+微微形变(border-radius 呼吸) |

**灵动性总要求**：每个图形都有**专属常驻动画**（不是只入场一次）；入场沿用
`dam-core-pop`（0.4s 回弹）；主 stage 的 conic 光扫同步映射到图形的 ::after。

## 3. 验收清单（逐条自查+截图对比）

- [ ] 每步图形**有品牌色**（蓝紫 tint 可感知,不再是纯白灰）
- [ ] DOM 里只有当前步的一个图形节点（无 2px 废 span）
- [ ] 每个图形有**常驻专属动画**（静止截图两步之间肉眼可辨差异）
- [ ] store 步三片板与主 stage 的三层板形成"呼应"（同角度、成比例）
- [ ] 形状可辨识（bell 像铃、calendar 像日历、link 像连环——用户视角）
- [ ] `node --check` + 38/38 回归 + 刷新实机逐步截图自查
- [ ] 不动：TOUR_STEPS 文案/开关逻辑/DamIntroBox/CHANGELOG/排版/后端

## 4. 红线（同上一轮移交 §6,继续有效）

只动 lib/client.js；38/38；小步提交（本次 1 个 commit）；不动 3080；不 push。