topfans/frontend/pages/square/components/StarGalaxy

StarGalaxy 组件

square 页「星河」tab 的排行榜组件，渲染 TOP 1-12 的 3D 倾斜椭圆轨道 + 顺时针旋转动画。

视觉特征

• 65° 倾斜椭圆轨道（rx=130, ry=55）
• TOP 1-3 颁奖台（cover + 下方标签 + 钻石外框 + 金/银/铜渐变）
• TOP 4-12 9 个散落 item（cover + 上方标签 + 蓝白钻石渐变）
• 9 item 顺时针 36s 旋转一圈（单组 @keyframes + 9 个不同 animation-delay 错开）
• 近大远小（scale 0.75→1.15，TOP 4 最大，TOP 8/9 最小）
• 装饰层：粉红渐变 overlay + 樱花粉/暖黄双光晕
• 标题「★ 星河 ★」+ 底部提示「每日 0:00 更新榜单」

数据来源

复用现有 getHotRankingApi("displaying", null, 1, 12) — 与「星榜」共用 API，取前 12 条。

文件

文件	职责
index.vue	容器：数据加载、装饰层、4 状态分支、子组件编排
PodiumCard.vue	TOP 1-3 大卡（cover + 下方 TOP N 标签 + 可选皇冠）
ScatteredRanks.vue	TOP 4-12 9 散落 item（共享 36s 旋转动画）
config.js	9 slot 位置/translate/scale 公式 + RING_DELAYS

可调参数

参数	位置	默认值	说明
椭圆倾斜度	config.js: RING.ry	55 (cos⁻¹ 65°)	改 ry 调整倾斜度（越小越斜）
旋转周期	ScatteredRanks.vue: animation	36s	改秒数调整速度
近大远小范围	config.js: yFactor + 0.40 * yFactor	0.75→1.15	改 0.75/1.15 调整
TOP 6/11 位置	config.js: OVERRIDES	x:321 / x:8	边缘推拉
Podium 位置/尺寸	index.vue: PODIUM_SIZES/POSITIONS	240×260 等	调整 1-3 大卡

跨端兼容性

CSS 特性	H5	APP	微信小程序	备注
transform: scale/translate	✅	✅	✅	全支持
filter: blur(Nrpx)	✅	✅	⚠️ 部分	光晕效果用，MP 可能降级
radial-gradient	✅	✅	⚠️ 有限	渐变背景，部分 MP 降级为线性
@keyframes + animation	✅	✅	✅	全支持
mask-composite: exclude	✅	⚠️	❌	仅 WebKit；MP 需 border-image 替代
backdrop-filter	✅	⚠️	❌	仅 H5；装饰层用 opacity 兜底

降级策略：

• 微信小程序：如 mask-composite 不渲染，钻石边框会变成无边框（不致命，cover 仍可见）
• 微信小程序：如 radial-gradient 降级为 linear，标签渐变变为纯色（视觉略降级）

可访问性

• prefers-reduced-motion: reduce 媒体查询关闭 .ring-item 和 .crown 的动画
• 标签文字使用高对比度的 #FFFABD + 红色 text-shadow
• TOP 1 卡片有皇冠装饰作为「第一名」视觉提示

状态管理

状态	触发条件	表现
Loading	初次加载	12 个骨架占位（3 大 + 9 小）+ shimmer 动画
Error	API 失败	「加载失败，点击重试」+ 重试按钮
Empty	API 返回空数组	「暂无星河数据」
Success	12 条数据加载完成	完整布局

已知限制

1. prefers-reduced-motion 触发时 9 个 item 会堆叠在 slot 0 位置（spec §6.4 已说明）
2. ORBIT_KEYFRAMES 模板字符串无法在 Vue <style> 块中通过 JS 变量注入（已在 ScatteredRanks.vue 内联关键帧）
3. 跨端兼容性问题主要在微信小程序端，已在风险表中说明

后续改进 (v2)

• 缩略图懒加载优化（<image lazy-load>）
• 9 item 悬停暂停动画
• 微信小程序钻石边框降级方案（用 border-image 替代 mask-composite）
• 骨架屏精细化（与 square 风格统一）