v0.6: 深空巡航 Canvas 2D 实时玩法 + UI 偏移重叠修复

## 玩法拓展(回应用户: 玩法太单调/全是点点点)
- 新增「深空巡航」Canvas 2D 全屏实时玩法
  - 飞船操控(WASD/方向键/移动端虚拟摇杆)
  - 实时躲避陨石/虚空风暴,收集晶体/洞见/信标
  - 到达星门通关,护盾归零失败
  - 3层视差星空 + 粒子系统(尾焰/收集/碰撞/烟花) + 辉光 + 屏幕震动
  - 奖励同步主游戏(grantCruiseReward)
  - 独立 localStorage 记录最高分/通关数

## UI 修复(回应用户: 解析球左上偏移/成就小屏重叠)
- DecodeArray 节点: 移除 Tailwind translate 与 inline transform 冲突
- AchievementsPanel: 移除固定 max-h, 改 flex-1 min-h-0 自适应
- page.tsx 布局: 小屏减小 min-h, 避免挤压重叠

## 集成
- gameStore 新增 grantCruiseReward action
- header 新增 amber 主题「巡航」按钮 + 全屏 CruiseMode 渲染

## 文件
- src/lib/game/cruise.ts (新增, ~1008行)
- src/components/game/CruiseMode.tsx (新增, ~1350行)
- src/app/page.tsx (集成巡航入口)
- src/store/gameStore.ts (grantCruiseReward action)
- src/components/game/DecodeArray.tsx (节点偏移修复)
- src/components/game/AchievementsPanel.tsx (小屏重叠修复)

QA: lint 零错误; agent-browser+VLM 验证主界面无偏移+巡航玩法正常运行
This commit is contained in:
2026-06-23 19:33:51 +00:00
parent fcf94b6c3f
commit fafa2ee20a
9 changed files with 3382 additions and 8 deletions
+3 -2
View File
@@ -192,11 +192,11 @@ export function DecodeArray() {
onMouseEnter={() => setHoverId(node.id)}
onMouseLeave={() => setHoverId(null)}
disabled={used}
className="absolute -translate-x-1/2 -translate-y-1/2 rounded-full transition-all duration-200 focus:outline-none disabled:cursor-not-allowed"
className="absolute rounded-full transition-[box-shadow,background,border,opacity] duration-200 focus:outline-none disabled:cursor-not-allowed"
style={{
left: `${cx}%`,
top: `${cy}%`,
width: `min(${100 / cols * 0.62}%, 56px)`,
width: `min(${(100 / cols) * 0.62}%, 56px)`,
aspectRatio: "1",
background: used
? "rgba(255,255,255,0.04)"
@@ -214,6 +214,7 @@ export function DecodeArray() {
? `1.5px solid ${v.hex}aa`
: "1px solid rgba(255,255,255,0.12)",
opacity: used ? 0.35 : isDeadStart ? 0.5 : 1,
// 统一用 inline transform 定位居中 + 缩放,避免与 Tailwind translate 冲突导致左上偏移
transform: `translate(-50%, -50%) scale(${
isHover && !used ? 1.12 : isFlash ? (flash?.ok ? 1.25 : 0.8) : 1
})`,