mirror of
https://github.com/qingchencloud/clawpanel.git
synced 2026-05-29 04:10:00 +08:00
6a0d87479c
替换原卡片网格为「左上 OpenClaw（石墨黑）vs 右下 Hermes（象牙白）」对角线全屏设计。
启动屏 / 引擎切换时给用户一个有冲击力的「选择时刻」。
## 核心设计
- position: fixed 跳出 #content 范围，覆盖整个 viewport（含 sidebar）
- 双三角形 clip-path: polygon (0 0, 0 100%, 100% 0) / (100% 0, 100% 100%, 0 100%)
- 内容用 absolute 定位到三角形质心（左上 11%/6.5% / 右下 11%/6.5%），永不重叠
- 微妙的 60px 网格纹 + 角落极光（紫蓝 / 橙金）+ 极细中线分割
- clamp(80px, 13vw, 200px) 巨字标题 + 序号 + Logo + tagline + 特性列表 + CTA
## 交互
- hover 联动：用 [data-hover] attribute 替代 :has()，兼容旧 WebKit
- 鼠标悬停一侧 → 该侧亮起 + 内容平移 + CTA 反白；另一侧变暗 + 内容模糊缩小
- 点击三角形 → 三角形 clip-path 扩满（0.8s）→ 中心圆扩散（0.9s）→ 进入主页
- reveal 节点 attach 到 body，跨路由切换存活，新页面渲染后再淡出
## Both / Later 处理
- 两个次级选项保留，做成底部居中的玻璃 pill 链接（不抢戏）
- 不走对角线扩散动画，点击后直接 applyEngineSelection + navigate
## 兼容性
- prefers-reduced-motion: reduce → 关闭所有动画
- 移动端响应式：< 760px 调整字号 / 边距 / 角标
- 用 Vite define 注入的 __APP_VERSION__ 显示版本号（与 main.js / sidebar.js 一致）
## i18n
- engine.choiceTopBanner / choiceCtaEnter
- choiceOpenclaw{Tagline,Feat1,Feat2,Feat3,Category}
- choiceHermes{Tagline,Feat1,Feat2,Feat3,Category}
- choiceSecondary{Both,Later}
- 三语完整（zh-CN / en / zh-TW）
## 抽卡 prototype
保留 docs/engine-select-mockups/ 下的 V2 4 张设计 + 索引页（v2-monolith.html
即本次接入的最终版本）。
