From 04609adb5e3c95d6feeb8adb4dd34417b249886b Mon Sep 17 00:00:00 2001
From: zheng020 <zheng02007@163.com>
Date: Wed, 10 Jun 2026 15:26:12 +0800
Subject: [PATCH] feat(stargalaxy): add ScatteredRanks with 9 ring items + 36s
 orbit animation

---
 .../components/StarGalaxy/ScatteredRanks.vue  | 164 ++++++++++++++++++
 1 file changed, 164 insertions(+)
 create mode 100644 frontend/pages/square/components/StarGalaxy/ScatteredRanks.vue

diff --git a/frontend/pages/square/components/StarGalaxy/ScatteredRanks.vue b/frontend/pages/square/components/StarGalaxy/ScatteredRanks.vue
new file mode 100644
index 0000000..774a997
--- /dev/null
+++ b/frontend/pages/square/components/StarGalaxy/ScatteredRanks.vue
@@ -0,0 +1,164 @@
+<template>
+  <view class="scattered-ranks">
+    <!-- 椭圆轨道装饰（虚线） -->
+    <svg class="orbit-svg" viewBox="0 0 375 170" preserveAspectRatio="none">
+      <defs>
+        <linearGradient id="sg-orbit-grad" x1="0%" y1="0%" x2="0%" y2="100%">
+          <stop offset="0%" stop-color="rgba(255,255,255,0.15)" />
+          <stop offset="50%" stop-color="rgba(255,255,255,0.4)" />
+          <stop offset="100%" stop-color="rgba(255,250,189,0.85)" />
+        </linearGradient>
+        <radialGradient id="sg-center-glow" cx="50%" cy="50%" r="50%">
+          <stop offset="0%" stop-color="rgba(255,250,189,0.5)" />
+          <stop offset="100%" stop-color="transparent" />
+        </radialGradient>
+      </defs>
+      <ellipse cx="187" cy="55" rx="80" ry="35" fill="url(#sg-center-glow)" />
+      <ellipse cx="187" cy="55" rx="130" ry="55" fill="none" stroke="url(#sg-orbit-grad)" stroke-width="1.5" stroke-dasharray="3,3" />
+      <path d="M 57,55 A 130,55 0 0,0 317,55" stroke="rgba(255,250,189,0.85)" stroke-width="2.5" fill="none" />
+    </svg>
+
+    <!-- 9 个散落 item -->
+    <view
+      v-for="(p, i) in positions"
+      :key="p.rank"
+      class="ring-item"
+      :class="'r' + (p.rank - 4)"
+      :style="ringItemStyle(p)"
+      @click="handleClick(items[i])"
+    >
+      <view class="top-label">{{ formatLabel(p.rank) }}</view>
+      <image
+        class="cover-image"
+        :src="(items[i]?.cover_url) || (items[i]?.cover_image) || ''"
+        mode="aspectFill"
+      />
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ORBIT_KEYFRAMES, RING_DELAYS } from './config.js'
+
+const props = defineProps({
+  items: { type: Array, required: true },  // length 9
+  positions: { type: Array, required: true },  // from generateRingPositions()
+})
+
+const emit = defineEmits(['cardClick'])
+
+// 静态 base 位置：slot 0 中心 (187, 565)，item 46×72，top-left = (164, 530)
+const BASE_X = 164
+const BASE_Y = 530
+
+function ringItemStyle(p) {
+  return {
+    left: BASE_X + 'rpx',
+    top: BASE_Y + 'rpx',
+    zIndex: p.zIndex,
+    transform: `scale(${p.scale})`,
+    animationDelay: RING_DELAYS[p.rank - 4] + 's',
+  }
+}
+
+function formatLabel(rank) {
+  return 'TOP ' + rank
+}
+
+function handleClick(item) {
+  if (item) emit('cardClick', item)
+}
+</script>
+
+<style scoped>
+.scattered-ranks {
+  position: relative;
+  width: 750rpx;
+  height: 720rpx;
+  pointer-events: none;
+}
+
+.orbit-svg {
+  position: absolute;
+  top: 390rpx;
+  left: 0;
+  width: 750rpx;
+  height: 340rpx;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.ring-item {
+  position: absolute;
+  width: 46rpx;
+  height: 72rpx;  /* 14 label + 2 gap + 56 cover */
+  transform-origin: center;
+  pointer-events: auto;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  animation: orbit 36s linear infinite;
+}
+
+.top-label {
+  width: 46rpx;
+  height: 14rpx;
+  background: radial-gradient(ellipse, #C8E6FF, #fff 50%, #4D9AF8);
+  border-radius: 7rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 7rpx;
+  font-weight: 900;
+  color: #FFFABD;
+  text-shadow: -1rpx 1rpx 2rpx rgba(206, 9, 9, 0.84);
+}
+
+/* TOP 4 label 是金渐变（最显眼） */
+.r0 .top-label {
+  background: radial-gradient(ellipse, #FFFFFF, #FFFABD 30%, #4D9AF8 100%);
+  box-shadow: 0 4rpx 12rpx rgba(255, 250, 189, 0.55);
+  font-size: 8rpx;
+}
+
+.cover-image {
+  margin-top: 2rpx;
+  width: 46rpx;
+  height: 56rpx;
+  border-radius: 5rpx;
+  box-shadow: 3rpx 3rpx 6rpx rgba(198, 13, 13, 0.45);
+}
+
+.r0 .cover-image {
+  box-shadow: 0 12rpx 28rpx rgba(255, 32, 36, 0.5), 0 0 24rpx rgba(255, 250, 189, 0.55);
+}
+</style>
+
+<style>
+/* 关键帧：放在非 scoped 块中，让所有 ring-item 共享 */
+@keyframes orbit {
+  0%      { transform: translate(0,0)         scale(1.15); }
+  11.11%  { transform: translate(84px,-13px)  scale(1.05); }
+  22.22%  { transform: translate(157px,-43px) scale(0.95); }
+  33.33%  { transform: translate(113px,-83px) scale(0.85); }
+  44.44%  { transform: translate(45px,-107px) scale(0.75); }
+  55.55%  { transform: translate(-45px,-107px) scale(0.75); }
+  66.66%  { transform: translate(-113px,-83px) scale(0.85); }
+  77.77%  { transform: translate(-156px,-43px) scale(0.95); }
+  88.88%  { transform: translate(-84px,-13px) scale(1.05); }
+  100%    { transform: translate(0,0)         scale(1.15); }
+}
+
+@keyframes crownPulse {
+  0%, 100% { transform: translateX(-50%) scale(1); }
+  50%      { transform: translateX(-50%) scale(1.15); }
+}
+
+/* 可访问性：减少动画 */
+@media (prefers-reduced-motion: reduce) {
+  .ring-item,
+  .crown {
+    animation: none !important;
+  }
+}
+</style>