diff --git a/src/views/Ranking/WeeklyStar/WeeklyStar.vue b/src/views/Ranking/WeeklyStar/WeeklyStar.vue
index ae70cfa..7ed9f50 100644
--- a/src/views/Ranking/WeeklyStar/WeeklyStar.vue
+++ b/src/views/Ranking/WeeklyStar/WeeklyStar.vue
@@ -1,207 +1,277 @@
 <!-- src/views/Ranking/WeeklyStar/WeeklyStar.vue -->
 <template>
   <div class="fullPage" :style="{ '--bg-url': `url(${imageUrl('bg')})` }">
-    <!-- 状态栏占位区域（仅在APP中显示） -->
-    <div v-if="isInAppEnvironment" style="height: 30px"></div>
+    <!-- 预加载状态 -->
+    <div v-if="isLoading" class="loading-container">
+      <div class="loading-spinner"></div>
+      <p>{{ $t('loading') }}...</p>
+    </div>
 
-    <!-- 帮助按钮 -->
-    <img
-      v-smart-img
-      src="../../../assets/icon/helpAct.png"
-      alt=""
-      style="width: 10%; position: absolute; top: 48px; right: 8px; z-index: 4"
-      @click="helpInfoShow = true"
-    />
+    <!-- 主要内容 -->
+    <div v-else>
+      <!-- 状态栏占位区域（仅在APP中显示） -->
+      <div v-if="isInAppEnvironment" style="height: 30px"></div>
 
-    <!-- history按钮 -->
-    <img
-      v-smart-img
-      :src="imageUrl('history')"
-      alt=""
-      style="width: 20%; margin-top: 20px"
-      @click="historyShow = true"
-    />
-
-    <!-- gifts -->
-    <div
-      style="display: flex; justify-content: flex-end; width: 100%"
-      :style="{
-        marginTop: isInAppEnvironment
-          ? 'calc(65vw - 30px - 10vw - 10vw - 20px)'
-          : 'calc(65vw - 10vw - 10vw - 20px)',
-      }"
-    >
+      <!-- 帮助按钮 -->
       <img
         v-smart-img
-        :src="imageUrl('gifts')"
+        src="../../../assets/icon/helpAct.png"
         alt=""
-        style="width: 20%"
-        @click="giftsShow = true"
+        style="width: 10%; position: absolute; top: 48px; right: 8px; z-index: 4"
+        @click="helpInfoShow = true"
       />
-    </div>
 
-    <!-- 倒计时 -->
-    <div style="display: flex; justify-content: center; margin-top: 0%">
-      <div style="width: 20%">
-        <itemCenter :imgUrl="imageUrl('dayBg')">
-          <div class="timeText">{{ Days }}D</div>
-        </itemCenter>
-      </div>
-      <div class="timeText timeGap" style="width: 6px"></div>
-      <div style="width: 20%">
-        <itemCenter :imgUrl="imageUrl('hourAndMinBg')">
-          <div class="timeText">{{ Hours }}</div>
-        </itemCenter>
-      </div>
-      <div class="timeText timeGap">:</div>
-      <div style="width: 20%">
-        <itemCenter :imgUrl="imageUrl('hourAndMinBg')">
-          <div class="timeText">{{ Minutes }}</div>
-        </itemCenter>
-      </div>
-      <div class="timeText timeGap">:</div>
-      <div style="width: 20%">
-        <itemCenter :imgUrl="imageUrl('secBg')">
-          <div class="timeText">{{ Second }}</div>
-        </itemCenter>
-      </div>
-    </div>
+      <!-- history按钮 -->
+      <img
+        v-smart-img
+        :src="imageUrl('history')"
+        alt=""
+        style="width: 20%; margin-top: 20px"
+        @click="historyShow = true"
+      />
 
-    <!-- 切换按钮 -->
-    <div style="margin: 10% 0 8% 0; display: flex; justify-content: space-around">
-      <div style="width: 30%" @click="handleBt('Ranking')">
-        <itemCenter :imgUrl="rankingShow ? imageUrl('btActive') : imageUrl('btNoActive')">
-          <div class="btTitle">Ranking</div>
-        </itemCenter>
-      </div>
-      <div style="width: 30%" @click="handleBt('Rewards')">
-        <itemCenter :imgUrl="rewardShow ? imageUrl('btActive') : imageUrl('btNoActive')">
-          <div class="btTitle">Rewards</div>
-        </itemCenter>
-      </div>
-      <div style="width: 30%" @click="handleBt('Exchange')">
-        <itemCenter :imgUrl="exchargeShow ? imageUrl('btActive') : imageUrl('btNoActive')">
-          <div class="btTitle">Exchange</div>
-        </itemCenter>
-      </div>
-    </div>
-
-    <!-- 展示内容 -->
-    <div>
-      <!-- Ranking -->
+      <!-- gifts -->
       <div
-        v-show="rankingShow"
-        style="position: relative; width: 100%; left: 50%; transform: translateX(-50%)"
+        style="display: flex; justify-content: flex-end; width: 100%"
+        :style="{
+          marginTop: isInAppEnvironment
+            ? 'calc(65vw - 30px - 10vw - 10vw - 20px)'
+            : 'calc(65vw - 10vw - 10vw - 20px)',
+        }"
       >
-        <!-- 背景板 -->
-        <div>
-          <!-- 头部背景 -->
-          <img
-            v-smart-img
-            :src="imageUrl('RankingMain')"
-            alt=""
-            width="100%"
-            style="display: block"
-          />
-          <!-- 用户项 -->
-          <img
-            v-smart-img
-            :src="imageUrl('RankingItem')"
-            alt=""
-            width="100%"
-            style="display: block; margin-top: -2px"
-            v-for="value in showRanking.length - 1"
-            v-if="showRanking.length > 1"
-          />
-          <!-- 底框 -->
-          <img
-            v-smart-img
-            :src="imageUrl('RankingBottomBorder')"
-            alt=""
-            width="100%"
-            style="display: block; margin-top: -9%"
-          />
+        <img
+          v-smart-img
+          :src="imageUrl('gifts')"
+          alt=""
+          style="width: 20%"
+          @click="giftsShow = true"
+        />
+      </div>
+
+      <!-- 倒计时 -->
+      <div style="display: flex; justify-content: center; margin-top: 0%">
+        <div style="width: 20%">
+          <itemCenter :imgUrl="imageUrl('dayBg')">
+            <div class="timeText">{{ Days }}D</div>
+          </itemCenter>
         </div>
+        <div class="timeText timeGap" style="width: 6px"></div>
+        <div style="width: 20%">
+          <itemCenter :imgUrl="imageUrl('hourAndMinBg')">
+            <div class="timeText">{{ Hours }}</div>
+          </itemCenter>
+        </div>
+        <div class="timeText timeGap">:</div>
+        <div style="width: 20%">
+          <itemCenter :imgUrl="imageUrl('hourAndMinBg')">
+            <div class="timeText">{{ Minutes }}</div>
+          </itemCenter>
+        </div>
+        <div class="timeText timeGap">:</div>
+        <div style="width: 20%">
+          <itemCenter :imgUrl="imageUrl('secBg')">
+            <div class="timeText">{{ Second }}</div>
+          </itemCenter>
+        </div>
+      </div>
 
-        <!-- 主体内容 -->
-        <div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 30% 8% 13%">
-          <!-- 前3名 -->
-          <div style="margin-top: 3%">
-            <!-- 第一 -->
-            <div style="display: flex; justify-content: center">
-              <TopUser
-                :BorderImgUrl="imageUrl('topOne')"
-                :avatarUrl="RankingHasTop3[0].userAvatar"
-                :name="RankingHasTop3[0].userNickname"
-                :distributionValue="RankingHasTop3[0].quantity"
-                style="width: 70%"
-                @click="viewUserInfo(RankingHasTop3[0].userId)"
-              />
-            </div>
-            <!-- 第二三 -->
-            <div
-              style="
-                position: relative;
-                z-index: 3;
+      <!-- 切换按钮 -->
+      <div style="margin: 10% 0 8% 0; display: flex; justify-content: space-around">
+        <div style="width: 30%" @click="handleBt('Ranking')">
+          <itemCenter :imgUrl="rankingShow ? imageUrl('btActive') : imageUrl('btNoActive')">
+            <div class="btTitle">Ranking</div>
+          </itemCenter>
+        </div>
+        <div style="width: 30%" @click="handleBt('Rewards')">
+          <itemCenter :imgUrl="rewardShow ? imageUrl('btActive') : imageUrl('btNoActive')">
+            <div class="btTitle">Rewards</div>
+          </itemCenter>
+        </div>
+        <div style="width: 30%" @click="handleBt('Exchange')">
+          <itemCenter :imgUrl="exchargeShow ? imageUrl('btActive') : imageUrl('btNoActive')">
+            <div class="btTitle">Exchange</div>
+          </itemCenter>
+        </div>
+      </div>
 
-                display: flex;
-                justify-content: space-between;
-                margin-top: -20%;
-                pointer-events: none;
-              "
-            >
-              <div
-                style="pointer-events: auto; width: 35%"
-                @click.stop="viewUserInfo(RankingHasTop3[1].userId)"
-              >
-                <TopUser
-                  :isTopOne="false"
-                  :BorderImgUrl="imageUrl('topTwo')"
-                  :avatarUrl="RankingHasTop3[1].userAvatar"
-                  :name="RankingHasTop3[1].userNickname"
-                  :distributionValue="RankingHasTop3[1].quantity"
-                  style="width: 100%"
-                />
-              </div>
-
-              <div
-                style="pointer-events: auto; width: 35%"
-                @click.stop="viewUserInfo(RankingHasTop3[2].userId)"
-              >
-                <TopUser
-                  :isTopOne="false"
-                  :BorderImgUrl="imageUrl('topThree')"
-                  :avatarUrl="RankingHasTop3[2].userAvatar"
-                  :name="RankingHasTop3[2].userNickname"
-                  :distributionValue="RankingHasTop3[2].quantity"
-                  style="width: 100%"
-                />
-              </div>
-            </div>
+      <!-- 展示内容 -->
+      <div>
+        <!-- Ranking -->
+        <div
+          v-show="rankingShow"
+          style="position: relative; width: 100%; left: 50%; transform: translateX(-50%)"
+        >
+          <!-- 背景板 -->
+          <div>
+            <!-- 头部背景 -->
+            <img
+              v-smart-img
+              :src="imageUrl('RankingMain')"
+              alt=""
+              width="100%"
+              style="display: block"
+            />
+            <!-- 用户项 -->
+            <img
+              v-smart-img
+              :src="imageUrl('RankingItem')"
+              alt=""
+              width="100%"
+              style="display: block; margin-top: -2px"
+              v-for="value in showRanking.length - 1"
+              v-if="showRanking.length > 1"
+            />
+            <!-- 底框 -->
+            <img
+              v-smart-img
+              :src="imageUrl('RankingBottomBorder')"
+              alt=""
+              width="100%"
+              style="display: block; margin-top: -9%"
+            />
           </div>
 
-          <!-- 第四名开始 -->
-          <itemCenter
-            v-for="listItem in showRanking"
-            style="margin-top: 3.3vw; position: relative"
-            @click="viewUserInfo(listItem.userId)"
-            :imgUrl="imageUrl('itemUser')"
-            :contentStyle="`justify-content: flex-start;padding: 0 3%;gap: 8px;`"
+          <!-- 主体内容 -->
+          <div
+            style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 30% 8% 13%"
           >
-            <!-- 基本信息 -->
-            <div
-              style="
-                flex: 1;
-                min-width: 0;
-                align-self: stretch;
+            <!-- 前3名 -->
+            <div style="margin-top: 3%">
+              <!-- 第一 -->
+              <div style="display: flex; justify-content: center">
+                <TopUser
+                  :BorderImgUrl="imageUrl('topOne')"
+                  :avatarUrl="RankingHasTop3[0].userAvatar"
+                  :name="RankingHasTop3[0].userNickname"
+                  :distributionValue="RankingHasTop3[0].quantity"
+                  style="width: 70%"
+                  @click="viewUserInfo(RankingHasTop3[0].userId)"
+                />
+              </div>
+              <!-- 第二三 -->
+              <div
+                style="
+                  position: relative;
+                  z-index: 3;
 
-                display: flex;
-                justify-content: space-around;
-                align-items: center;
-                gap: 4px;
-              "
+                  display: flex;
+                  justify-content: space-between;
+                  margin-top: -20%;
+                  pointer-events: none;
+                "
+              >
+                <div
+                  style="pointer-events: auto; width: 35%"
+                  @click.stop="viewUserInfo(RankingHasTop3[1].userId)"
+                >
+                  <TopUser
+                    :isTopOne="false"
+                    :BorderImgUrl="imageUrl('topTwo')"
+                    :avatarUrl="RankingHasTop3[1].userAvatar"
+                    :name="RankingHasTop3[1].userNickname"
+                    :distributionValue="RankingHasTop3[1].quantity"
+                    style="width: 100%"
+                  />
+                </div>
+
+                <div
+                  style="pointer-events: auto; width: 35%"
+                  @click.stop="viewUserInfo(RankingHasTop3[2].userId)"
+                >
+                  <TopUser
+                    :isTopOne="false"
+                    :BorderImgUrl="imageUrl('topThree')"
+                    :avatarUrl="RankingHasTop3[2].userAvatar"
+                    :name="RankingHasTop3[2].userNickname"
+                    :distributionValue="RankingHasTop3[2].quantity"
+                    style="width: 100%"
+                  />
+                </div>
+              </div>
+            </div>
+
+            <!-- 第四名开始 -->
+            <itemCenter
+              v-for="listItem in showRanking"
+              style="margin-top: 3.3vw; position: relative"
+              @click="viewUserInfo(listItem.userId)"
+              :imgUrl="imageUrl('itemUser')"
+              :contentStyle="`justify-content: flex-start;padding: 0 3%;gap: 8px;`"
             >
-              <!-- 排名 -->
+              <!-- 基本信息 -->
+              <div
+                style="
+                  flex: 1;
+                  min-width: 0;
+                  align-self: stretch;
+
+                  display: flex;
+                  justify-content: space-around;
+                  align-items: center;
+                  gap: 4px;
+                "
+              >
+                <!-- 排名 -->
+                <div
+                  style="
+                    width: auto;
+                    min-width: 0;
+                    align-self: stretch;
+
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                  "
+                >
+                  <div style="color: #edb247; font-weight: 700">{{ listItem.rank }}</div>
+                </div>
+
+                <!-- 头像 -->
+                <img
+                  v-smart-img
+                  :src="listItem.userAvatar || ''"
+                  alt=""
+                  style="
+                    display: block;
+                    width: 3em;
+
+                    aspect-ratio: 1/1;
+                    border-radius: 50%;
+                    object-fit: cover;
+                  "
+                  @error="handleAvatarImageError"
+                />
+
+                <!-- 名称、id -->
+                <div
+                  style="
+                    flex: 1;
+                    min-width: 0;
+                    padding: 0 2px;
+
+                    display: flex;
+                    flex-direction: column;
+                  "
+                >
+                  <div
+                    style="
+                      color: #fff;
+                      font-weight: 860;
+
+                      overflow: hidden;
+                      white-space: nowrap;
+                      text-overflow: ellipsis;
+                    "
+                  >
+                    {{ listItem.userNickname }}
+                  </div>
+                  <div style="color: #fff; font-weight: 590">
+                    {{ $t('user_id_prefix') }} {{ listItem.account }}
+                  </div>
+                </div>
+              </div>
+
+              <!-- 贡献值 -->
               <div
                 style="
                   width: auto;
@@ -209,161 +279,297 @@
                   align-self: stretch;
 
                   display: flex;
-                  justify-content: center;
                   align-items: center;
                 "
               >
-                <div style="color: #edb247; font-weight: 700">{{ listItem.rank }}</div>
-              </div>
-
-              <!-- 头像 -->
-              <img
-                v-smart-img
-                :src="listItem.userAvatar || ''"
-                alt=""
-                style="
-                  display: block;
-                  width: 3em;
-
-                  aspect-ratio: 1/1;
-                  border-radius: 50%;
-                  object-fit: cover;
-                "
-                @error="handleAvatarImageError"
-              />
-
-              <!-- 名称、id -->
-              <div
-                style="
-                  flex: 1;
-                  min-width: 0;
-                  padding: 0 2px;
-
-                  display: flex;
-                  flex-direction: column;
-                "
-              >
-                <div
-                  style="
-                    color: #fff;
-                    font-weight: 860;
-
-                    overflow: hidden;
-                    white-space: nowrap;
-                    text-overflow: ellipsis;
-                  "
-                >
-                  {{ listItem.userNickname }}
-                </div>
-                <div style="color: #fff; font-weight: 590">
-                  {{ $t('user_id_prefix') }} {{ listItem.account }}
-                </div>
-              </div>
-            </div>
-
-            <!-- 贡献值 -->
-            <div
-              style="
-                width: auto;
-                min-width: 0;
-                align-self: stretch;
-
-                display: flex;
-                align-items: center;
-              "
-            >
-              <img
-                v-smart-img
-                src="/src/assets/icon/coin.png"
-                alt=""
-                style="display: block; width: 1.3em; aspect-ratio: 1/1"
-              />
-              <div style="color: #edb247; font-weight: 700">
-                {{ listItem.quantity }}
-              </div>
-            </div>
-          </itemCenter>
-          <!-- 触发加载功能 -->
-          <div ref="RankingLoadmore" v-show="showRankingLoading && rankingShow"></div>
-        </div>
-      </div>
-
-      <!-- Rewards -->
-      <div
-        v-show="rewardShow"
-        style="display: flex; flex-direction: column; align-items: center; gap: 20px"
-      >
-        <!-- top模块 -->
-        <div v-for="(topItem, topIndex) in rewardsList" style="position: relative; width: 100%">
-          <!-- top背景图 -->
-          <img v-smart-img :src="imageUrl('topBg')" alt="" style="width: 100%; display: block" />
-          <!-- 标题 -->
-          <div
-            style="
-              position: absolute;
-              top: 7%;
-              left: 25%;
-              right: 25%;
-              height: 8.5%;
-              display: flex;
-              justify-content: center;
-              align-items: center;
-              color: #fff;
-              font-weight: 860;
-            "
-            class="topTitle"
-          >
-            TOP{{ topItem.rule.sort }}
-          </div>
-          <!-- 主体内容 -->
-          <div
-            style="
-              position: absolute;
-              inset: 0;
-              padding: 30% 6% 13%;
-              display: grid;
-              grid-template-columns: repeat(2, 1fr);
-            "
-          >
-            <div
-              v-for="gift in topItem.propsGroup.activityRewardProps"
-              style="display: flex; flex-direction: column; align-items: center"
-            >
-              <itemCenter :imgUrl="imageUrl('giftItemBg')" style="width: 90%; margin-bottom: 3px">
-                <!-- gift图 -->
                 <img
                   v-smart-img
-                  :src="gift.cover || ''"
+                  src="/src/assets/icon/coin.png"
                   alt=""
-                  style="width: 50%; display: block"
-                  @error="(e) => handleRewardImageError(e, gift.type)"
+                  style="display: block; width: 1.3em; aspect-ratio: 1/1"
                 />
-              </itemCenter>
-
-              <itemCenter :imgUrl="imageUrl('btBg')" style="width: 75%">
-                <div style="font-weight: 700">
-                  {{ showDetail(gift.type, gift.quantity) }}
+                <div style="color: #edb247; font-weight: 700">
+                  {{ listItem.quantity }}
                 </div>
-              </itemCenter>
+              </div>
+            </itemCenter>
+            <!-- 触发加载功能 -->
+            <div ref="RankingLoadmore" v-show="showRankingLoading && rankingShow"></div>
+          </div>
+        </div>
+
+        <!-- Rewards -->
+        <div
+          v-show="rewardShow"
+          style="display: flex; flex-direction: column; align-items: center; gap: 20px"
+        >
+          <!-- top模块 -->
+          <div v-for="(topItem, topIndex) in rewardsList" style="position: relative; width: 100%">
+            <!-- top背景图 -->
+            <img v-smart-img :src="imageUrl('topBg')" alt="" style="width: 100%; display: block" />
+            <!-- 标题 -->
+            <div
+              style="
+                position: absolute;
+                top: 7%;
+                left: 25%;
+                right: 25%;
+                height: 8.5%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                color: #fff;
+                font-weight: 860;
+              "
+              class="topTitle"
+            >
+              TOP{{ topItem.rule.sort }}
+            </div>
+            <!-- 主体内容 -->
+            <div
+              style="
+                position: absolute;
+                inset: 0;
+                padding: 30% 6% 13%;
+                display: grid;
+                grid-template-columns: repeat(2, 1fr);
+              "
+            >
+              <div
+                v-for="gift in topItem.propsGroup.activityRewardProps"
+                style="display: flex; flex-direction: column; align-items: center"
+              >
+                <itemCenter :imgUrl="imageUrl('giftItemBg')" style="width: 90%; margin-bottom: 3px">
+                  <!-- gift图 -->
+                  <img
+                    v-smart-img
+                    :src="gift.cover || ''"
+                    alt=""
+                    style="width: 50%; display: block"
+                    @error="(e) => handleRewardImageError(e, gift.type)"
+                  />
+                </itemCenter>
+
+                <itemCenter :imgUrl="imageUrl('btBg')" style="width: 75%">
+                  <div style="font-weight: 700">
+                    {{ showDetail(gift.type, gift.quantity) }}
+                  </div>
+                </itemCenter>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Exchange -->
+        <div v-show="exchargeShow" style="display: flex; justify-content: center">
+          <div style="position: relative; width: 100%">
+            <!-- 背景图 -->
+            <img v-smart-img :src="imageUrl('longBg')" alt="" style="width: 100%; display: block" />
+
+            <!-- 标题 -->
+            <div
+              style="
+                position: absolute;
+                top: 6%;
+                left: 25%;
+                right: 25%;
+                height: 11%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                color: #fff;
+                font-weight: 860;
+              "
+              class="topTitle"
+            >
+              Props
+            </div>
+
+            <!-- 内容 -->
+            <div
+              style="
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                padding: 30% 7% 13%;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-around;
+              "
+            >
+              <!-- 碎片 -->
+              <div style="display: flex; align-items: center">
+                <img
+                  v-smart-img
+                  :src="imageUrl('debris')"
+                  alt=""
+                  style="width: 15%; display: block; margin-right: 5px"
+                />
+                <div style="font-weight: 590; font-size: 1.3em">
+                  :{{ myFragment.quantity || 0 }}
+                </div>
+              </div>
+
+              <!-- 礼品 -->
+              <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px">
+                <div
+                  v-for="(goods, goodsIndex) in exchangeGoodsList"
+                  :key="goodsIndex"
+                  style="display: flex; flex-direction: column; align-items: center"
+                >
+                  <itemCenter :imgUrl="imageUrl('giftItemBg')">
+                    <!-- gift图 -->
+                    <img
+                      v-smart-img
+                      :src="goods.propsGroup.activityRewardProps[0].cover"
+                      alt=""
+                      style="width: 68%; display: block; margin-bottom: 7%"
+                    />
+                  </itemCenter>
+                  <div class="needDebris">
+                    Permanent/{{ JSON.parse(goods.rule.jsonData).need_fragments }} Star
+                  </div>
+
+                  <itemCenter
+                    style="width: 75%"
+                    @click="selectGood(goods)"
+                    :imgUrl="imageUrl('btBg')"
+                  >
+                    <div style="font-weight: 700" class="needDebris">Redeem</div>
+                  </itemCenter>
+                </div>
+              </div>
             </div>
           </div>
         </div>
       </div>
 
-      <!-- Exchange -->
-      <div v-show="exchargeShow" style="display: flex; justify-content: center">
-        <div style="position: relative; width: 100%">
-          <!-- 背景图 -->
-          <img v-smart-img :src="imageUrl('longBg')" alt="" style="width: 100%; display: block" />
+      <!-- 我的排名占位 -->
+      <div style="height: 25vw"></div>
 
+      <!-- 我的排名 -->
+      <itemCenter
+        style="
+          width: 100vw;
+          background-color: #311300;
+          margin-top: 10px;
+
+          position: fixed;
+          bottom: 0;
+          z-index: 999;
+        "
+        :imgUrl="imageUrl('myRankingBg')"
+        :contentStyle="`padding: 4vw;gap: 8px;`"
+      >
+        <!-- 基本信息 -->
+        <div
+          style="
+            flex: 1;
+            min-width: 0;
+            align-self: stretch;
+
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            gap: 8px;
+          "
+        >
+          <!-- 排名 -->
+          <div
+            style="
+              width: auto;
+              min-width: 0;
+              align-self: stretch;
+
+              display: flex;
+              justify-content: center;
+              align-items: center;
+            "
+          >
+            <div style="color: #edb247; font-size: 1.1em; font-weight: 700">
+              {{ myRanking.rank || 999 }}
+            </div>
+          </div>
+
+          <!-- 头像 -->
+          <img
+            v-smart-img
+            :src="myRanking.userAvatar || ''"
+            alt=""
+            style="
+              display: block;
+              width: 20%;
+              aspect-ratio: 1/1;
+              border-radius: 50%;
+              object-fit: cover;
+            "
+            @error="handleAvatarImageError"
+          />
+
+          <!-- 名称 -->
+          <div
+            style="
+              flex: 1;
+              min-width: 0;
+
+              color: #fff;
+              font-size: 1.1em;
+              font-weight: 860;
+              padding: 0 4px;
+
+              overflow: hidden;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+            "
+          >
+            {{ myRanking.userNickname || '' }}
+          </div>
+        </div>
+
+        <!-- 贡献值 -->
+        <div
+          style="
+            width: auto;
+            min-width: 0;
+            align-self: stretch;
+
+            display: flex;
+            align-items: center;
+          "
+        >
+          <img
+            v-smart-img
+            src="/src/assets/icon/coin.png"
+            alt=""
+            style="display: block; width: 1.5em; aspect-ratio: 1/1"
+          />
+          <div style="color: #edb247; font-size: 1.1em; font-weight: 700">
+            {{ myRanking.quantity || 0 }}
+          </div>
+        </div>
+      </itemCenter>
+
+      <!-- 弹窗遮罩层 -->
+      <maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
+        <!-- help弹窗 -->
+        <div v-show="helpInfoShow" style="margin: 20% 0" @click.stop>
+          <img v-smart-img :src="imageUrl('helpInfo')" alt="" style="width: 100%" />
+        </div>
+
+        <!-- history弹窗 -->
+        <div v-show="historyShow" style="position: relative; margin: 20% 0" @click.stop>
+          <!-- 背景图 -->
+          <img v-smart-img :src="imageUrl('mediumBg')" alt="" style="width: 100%; display: block" />
           <!-- 标题 -->
           <div
             style="
               position: absolute;
-              top: 6%;
+              top: 10%;
               left: 25%;
               right: 25%;
-              height: 11%;
+              height: 13%;
               display: flex;
               justify-content: center;
               align-items: center;
@@ -372,9 +578,8 @@
             "
             class="topTitle"
           >
-            Props
+            History
           </div>
-
           <!-- 内容 -->
           <div
             style="
@@ -383,398 +588,211 @@
               bottom: 0;
               left: 0;
               right: 0;
-              padding: 30% 7% 13%;
+              padding: 31% 7% 15%;
               display: flex;
               flex-direction: column;
-              justify-content: space-around;
+              justify-content: space-between;
+              align-items: center;
             "
           >
-            <!-- 碎片 -->
-            <div style="display: flex; align-items: center">
+            <!-- 头像 -->
+            <div style="position: relative; width: 75%">
+              <!-- 头像框 -->
               <img
                 v-smart-img
-                :src="imageUrl('debris')"
+                :src="imageUrl('topOneHistory')"
                 alt=""
-                style="width: 15%; display: block; margin-right: 5px"
+                style="width: 100%; display: block; position: relative; z-index: 1"
               />
-              <div style="font-weight: 590; font-size: 1.3em">:{{ myFragment.quantity || 0 }}</div>
-            </div>
-
-            <!-- 礼品 -->
-            <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px">
-              <div
-                v-for="(goods, goodsIndex) in exchangeGoodsList"
-                :key="goodsIndex"
-                style="display: flex; flex-direction: column; align-items: center"
-              >
-                <itemCenter :imgUrl="imageUrl('giftItemBg')">
-                  <!-- gift图 -->
+              <div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0">
+                <div
+                  style="height: 100%; display: flex; justify-content: center; align-items: center"
+                >
                   <img
                     v-smart-img
-                    :src="goods.propsGroup.activityRewardProps[0].cover"
+                    :src="showTopOne.userAvatar || ''"
                     alt=""
-                    style="width: 68%; display: block; margin-bottom: 7%"
+                    style="
+                      width: 50%;
+                      display: block;
+                      border-radius: 50%;
+                      aspect-ratio: 1/1;
+                      object-fit: cover;
+                    "
+                    @error="handleAvatarImageError"
                   />
-                </itemCenter>
-                <div class="needDebris">
-                  Permanent/{{ JSON.parse(goods.rule.jsonData).need_fragments }} Star
                 </div>
-
-                <itemCenter
-                  style="width: 75%"
-                  @click="selectGood(goods)"
-                  :imgUrl="imageUrl('btBg')"
-                >
-                  <div style="font-weight: 700" class="needDebris">Redeem</div>
-                </itemCenter>
               </div>
             </div>
-          </div>
-        </div>
-      </div>
-    </div>
 
-    <!-- 我的排名占位 -->
-    <div style="height: 25vw"></div>
-
-    <!-- 我的排名 -->
-    <itemCenter
-      style="
-        width: 100vw;
-        background-color: #311300;
-        margin-top: 10px;
-
-        position: fixed;
-        bottom: 0;
-        z-index: 999;
-      "
-      :imgUrl="imageUrl('myRankingBg')"
-      :contentStyle="`padding: 4vw;gap: 8px;`"
-    >
-      <!-- 基本信息 -->
-      <div
-        style="
-          flex: 1;
-          min-width: 0;
-          align-self: stretch;
-
-          display: flex;
-          justify-content: space-around;
-          align-items: center;
-          gap: 8px;
-        "
-      >
-        <!-- 排名 -->
-        <div
-          style="
-            width: auto;
-            min-width: 0;
-            align-self: stretch;
-
-            display: flex;
-            justify-content: center;
-            align-items: center;
-          "
-        >
-          <div style="color: #edb247; font-size: 1.1em; font-weight: 700">
-            {{ myRanking.rank || 999 }}
-          </div>
-        </div>
-
-        <!-- 头像 -->
-        <img
-          v-smart-img
-          :src="myRanking.userAvatar || ''"
-          alt=""
-          style="
-            display: block;
-            width: 20%;
-            aspect-ratio: 1/1;
-            border-radius: 50%;
-            object-fit: cover;
-          "
-          @error="handleAvatarImageError"
-        />
-
-        <!-- 名称 -->
-        <div
-          style="
-            flex: 1;
-            min-width: 0;
-
-            color: #fff;
-            font-size: 1.1em;
-            font-weight: 860;
-            padding: 0 4px;
-
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-          "
-        >
-          {{ myRanking.userNickname || '' }}
-        </div>
-      </div>
-
-      <!-- 贡献值 -->
-      <div
-        style="
-          width: auto;
-          min-width: 0;
-          align-self: stretch;
-
-          display: flex;
-          align-items: center;
-        "
-      >
-        <img
-          v-smart-img
-          src="/src/assets/icon/coin.png"
-          alt=""
-          style="display: block; width: 1.5em; aspect-ratio: 1/1"
-        />
-        <div style="color: #edb247; font-size: 1.1em; font-weight: 700">
-          {{ myRanking.quantity || 0 }}
-        </div>
-      </div>
-    </itemCenter>
-
-    <!-- 弹窗遮罩层 -->
-    <maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
-      <!-- help弹窗 -->
-      <div v-show="helpInfoShow" style="margin: 20% 0" @click.stop>
-        <img v-smart-img :src="imageUrl('helpInfo')" alt="" style="width: 100%" />
-      </div>
-
-      <!-- history弹窗 -->
-      <div v-show="historyShow" style="position: relative; margin: 20% 0" @click.stop>
-        <!-- 背景图 -->
-        <img v-smart-img :src="imageUrl('mediumBg')" alt="" style="width: 100%; display: block" />
-        <!-- 标题 -->
-        <div
-          style="
-            position: absolute;
-            top: 10%;
-            left: 25%;
-            right: 25%;
-            height: 13%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            color: #fff;
-            font-weight: 860;
-          "
-          class="topTitle"
-        >
-          History
-        </div>
-        <!-- 内容 -->
-        <div
-          style="
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            padding: 31% 7% 15%;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-            align-items: center;
-          "
-        >
-          <!-- 头像 -->
-          <div style="position: relative; width: 75%">
-            <!-- 头像框 -->
-            <img
-              v-smart-img
-              :src="imageUrl('topOneHistory')"
-              alt=""
-              style="width: 100%; display: block; position: relative; z-index: 1"
-            />
-            <div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0">
-              <div
-                style="height: 100%; display: flex; justify-content: center; align-items: center"
-              >
-                <img
-                  v-smart-img
-                  :src="showTopOne.userAvatar || ''"
-                  alt=""
-                  style="
-                    width: 50%;
-                    display: block;
-                    border-radius: 50%;
-                    aspect-ratio: 1/1;
-                    object-fit: cover;
-                  "
-                  @error="handleAvatarImageError"
-                />
-              </div>
-            </div>
-          </div>
-
-          <!-- 名字 -->
-          <div style="position: relative; width: 25%">
-            <!-- 背景图 -->
-            <img v-smart-img :src="imageUrl('nameBg')" alt="" style="width: 100%; display: block" />
-            <div
-              style="
-                position: absolute;
-                top: 0;
-                bottom: 0;
-                left: 0;
-                right: 0;
-                padding-bottom: 1%;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-              "
-            >
+            <!-- 名字 -->
+            <div style="position: relative; width: 25%">
+              <!-- 背景图 -->
+              <img
+                v-smart-img
+                :src="imageUrl('nameBg')"
+                alt=""
+                style="width: 100%; display: block"
+              />
               <div
                 style="
-                  width: 90%;
-                  overflow: hidden;
-                  white-space: nowrap;
-                  text-overflow: ellipsis;
-                  text-align: center;
+                  position: absolute;
+                  top: 0;
+                  bottom: 0;
+                  left: 0;
+                  right: 0;
+                  padding-bottom: 1%;
+                  display: flex;
+                  justify-content: center;
+                  align-items: center;
                 "
-                class="history-name"
               >
-                {{ showTopOne.userNickname }}
+                <div
+                  style="
+                    width: 90%;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    text-align: center;
+                  "
+                  class="history-name"
+                >
+                  {{ showTopOne.userNickname }}
+                </div>
+              </div>
+            </div>
+
+            <!-- 历史时间 -->
+            <div
+              style="width: 50%; display: flex; justify-content: space-between; align-items: center"
+            >
+              <img
+                v-smart-img
+                :src="imageUrl('timeBack')"
+                alt=""
+                width="13%"
+                @click="changeHistoryIndex(1)"
+              />
+              <div
+                style="
+                  flex: 1;
+                  text-align: center;
+                  font-weight: 590;
+                  background-image: -webkit-linear-gradient(
+                    top,
+                    rgba(243, 183, 0, 1),
+                    rgba(255, 238, 198, 1)
+                  );
+                  background-clip: text;
+                  -webkit-background-clip: text;
+                  -webkit-text-fill-color: transparent;
+                "
+                class="history-time"
+              >
+                {{ showTopOne.group }}
+              </div>
+              <img
+                v-smart-img
+                :src="imageUrl('timeNext')"
+                alt=""
+                width="13%"
+                @click="changeHistoryIndex(-1)"
+              />
+            </div>
+          </div>
+        </div>
+
+        <!-- gifts弹窗 -->
+        <itemCenter
+          v-show="giftsShow"
+          style="margin: 20% 0"
+          @click.stop
+          :imgUrl="imageUrl('giftsBg')"
+          :contentStyle="`padding: 30% 5% 12%;display: flex;justify-content: space-between;`"
+        >
+          <!-- 礼物单元 -->
+          <div style="width: 30%" v-for="gift in gifts" :key="gift.id">
+            <!-- 礼物背景 -->
+            <itemCenter :imgUrl="imageUrl('giftItemBg')">
+              <!-- 礼物 -->
+              <img
+                v-smart-img
+                :src="gift.giftPhoto"
+                alt=""
+                style="width: 50%; aspect-ratio: 1/1; border-radius: 50%; object-fit: cover"
+              />
+            </itemCenter>
+
+            <!-- 礼物价值 -->
+            <div style="display: flex; justify-content: center; align-items: center; gap: 2px">
+              <img
+                v-smart-img
+                src="/src/assets/icon/coin.png"
+                alt=""
+                style="display: block; width: 1.3em; aspect-ratio: 1/1; object-fit: cover"
+              />
+              <div style="color: #fff; font-weight: 590">
+                {{ gift.giftCandy }}
               </div>
             </div>
           </div>
+        </itemCenter>
 
-          <!-- 历史时间 -->
+        <!-- 交易商品弹窗 -->
+        <div v-if="exchargeGoodsShow" style="position: relative; margin: 20% 0" @click.stop>
+          <!-- 背景图 -->
+          <img v-smart-img :src="imageUrl('mediumBg')" alt="" style="width: 100%; display: block" />
+          <!-- 标题 -->
           <div
-            style="width: 50%; display: flex; justify-content: space-between; align-items: center"
+            style="
+              position: absolute;
+              top: 10%;
+              left: 25%;
+              right: 25%;
+              height: 13%;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              color: #fff;
+              font-weight: 860;
+            "
+            class="topTitle"
+          >
+            Exchange
+          </div>
+          <!-- 内容 -->
+          <div
+            style="
+              position: absolute;
+              top: 0;
+              bottom: 0;
+              left: 0;
+              right: 0;
+              padding: 30% 7% 15%;
+              display: flex;
+              flex-direction: column;
+              justify-content: space-between;
+              align-items: center;
+            "
           >
             <img
               v-smart-img
-              :src="imageUrl('timeBack')"
+              :src="selectedGood.propsGroup.activityRewardProps[0].cover"
               alt=""
-              width="13%"
-              @click="changeHistoryIndex(1)"
+              style="width: 50%; display: block"
             />
-            <div
-              style="
-                flex: 1;
-                text-align: center;
-                font-weight: 590;
-                background-image: -webkit-linear-gradient(
-                  top,
-                  rgba(243, 183, 0, 1),
-                  rgba(255, 238, 198, 1)
-                );
-                background-clip: text;
-                -webkit-background-clip: text;
-                -webkit-text-fill-color: transparent;
-              "
-              class="history-time"
-            >
-              {{ showTopOne.group }}
-            </div>
+            <div>Permanent/{{ JSON.parse(selectedGood.rule.jsonData).need_fragments }} Star</div>
             <img
               v-smart-img
-              :src="imageUrl('timeNext')"
+              :src="imageUrl('ConfirmBt')"
               alt=""
-              width="13%"
-              @click="changeHistoryIndex(-1)"
+              style="width: 30%; display: block"
+              @click="exchangeSelectedGood(selectedGood.rule.id)"
             />
           </div>
         </div>
-      </div>
-
-      <!-- gifts弹窗 -->
-      <itemCenter
-        v-show="giftsShow"
-        style="margin: 20% 0"
-        @click.stop
-        :imgUrl="imageUrl('giftsBg')"
-        :contentStyle="`padding: 30% 5% 12%;display: flex;justify-content: space-between;`"
-      >
-        <!-- 礼物单元 -->
-        <div style="width: 30%" v-for="gift in gifts" :key="gift.id">
-          <!-- 礼物背景 -->
-          <itemCenter :imgUrl="imageUrl('giftItemBg')">
-            <!-- 礼物 -->
-            <img
-              v-smart-img
-              :src="gift.giftPhoto"
-              alt=""
-              style="width: 50%; aspect-ratio: 1/1; border-radius: 50%; object-fit: cover"
-            />
-          </itemCenter>
-
-          <!-- 礼物价值 -->
-          <div style="display: flex; justify-content: center; align-items: center; gap: 2px">
-            <img
-              v-smart-img
-              src="/src/assets/icon/coin.png"
-              alt=""
-              style="display: block; width: 1.3em; aspect-ratio: 1/1; object-fit: cover"
-            />
-            <div style="color: #fff; font-weight: 590">
-              {{ gift.giftCandy }}
-            </div>
-          </div>
-        </div>
-      </itemCenter>
-
-      <!-- 交易商品弹窗 -->
-      <div v-if="exchargeGoodsShow" style="position: relative; margin: 20% 0" @click.stop>
-        <!-- 背景图 -->
-        <img v-smart-img :src="imageUrl('mediumBg')" alt="" style="width: 100%; display: block" />
-        <!-- 标题 -->
-        <div
-          style="
-            position: absolute;
-            top: 10%;
-            left: 25%;
-            right: 25%;
-            height: 13%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            color: #fff;
-            font-weight: 860;
-          "
-          class="topTitle"
-        >
-          Exchange
-        </div>
-        <!-- 内容 -->
-        <div
-          style="
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            padding: 30% 7% 15%;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-            align-items: center;
-          "
-        >
-          <img
-            v-smart-img
-            :src="selectedGood.propsGroup.activityRewardProps[0].cover"
-            alt=""
-            style="width: 50%; display: block"
-          />
-          <div>Permanent/{{ JSON.parse(selectedGood.rule.jsonData).need_fragments }} Star</div>
-          <img
-            v-smart-img
-            :src="imageUrl('ConfirmBt')"
-            alt=""
-            style="width: 30%; display: block"
-            @click="exchangeSelectedGood(selectedGood.rule.id)"
-          />
-        </div>
-      </div>
-    </maskLayer>
+      </maskLayer>
+    </div>
   </div>
 </template>
 
@@ -804,6 +822,9 @@ import itemCenter from '@/components/itemCenter.vue'
 import maskLayer from '@/components/MaskLayer.vue'
 import TopUser from './components/topUser.vue'
 
+// 预加载状态
+const isLoading = ref(true)
+
 // 获取OSS图片URL的函数
 const imageUrl = (filename) => getPngUrl('Ranking/WeeklyStar/', filename)
 
@@ -811,9 +832,7 @@ const imageUrl = (filename) => getPngUrl('Ranking/WeeklyStar/', filename)
 const connectToAppHandler = async () => {
   await connectToApp(() => {
     // 连接成功回调
-    getUserInfo()
-    updatePageData() // 刷新页面数据
-    preloadCriticalImages() // 预加载关键图片
+    completePreloading() // 完成预加载
   })
 }
 
@@ -1097,19 +1116,20 @@ const getThisWeekMyFragment = async () => {
 }
 
 // 刷新页面数据
-const updatePageData = () => {
-  getThisWeekRanking() // 获取本周排名
-  getHistoryRankingTop1() // 获取历史top1
-
-  getThisWeekRewards() // 获取本周奖励
-  getThisWeekGifts() // 获取本周礼物
-  getThisWeekExchangeGoods() // 获取本周可兑换商品
+const updatePageData = async () => {
+  await Promise.all([
+    getThisWeekRanking(), // 获取本周排名
+    getHistoryRankingTop1(), // 获取历史top1
+    getThisWeekRewards(), // 获取本周奖励
+    getThisWeekGifts(), // 获取本周礼物
+    getThisWeekExchangeGoods(), // 获取本周可兑换商品
+  ])
 }
 
 // 预加载关键图片
-const preloadCriticalImages = () => {
+const preloadCriticalImages = async () => {
   const criticalImages = [
-    imageUrl('bg'),
+    // imageUrl('bg'),
     imageUrl('history'),
     imageUrl('gifts'),
     imageUrl('dayBg'),
@@ -1140,7 +1160,7 @@ const preloadCriticalImages = () => {
     imageUrl('timeNext'),
   ]
 
-  preloadImages(criticalImages)
+  await preloadImages(criticalImages)
 }
 
 const debouceGetThisWeekRanking = useThrottle(() => {
@@ -1158,6 +1178,19 @@ const observer = new IntersectionObserver((entries) => {
   })
 })
 
+// 完成预加载
+const completePreloading = async () => {
+  try {
+    // 执行所有初始化操作
+    await Promise.all([getUserInfo(), updatePageData(), preloadCriticalImages()])
+  } catch (error) {
+    console.error('预加载过程中发生错误:', error)
+  } finally {
+    // 无论成功或失败都结束加载状态
+    isLoading.value = false
+  }
+}
+
 // 组件挂载时检测环境
 onMounted(() => {
   connectToAppHandler()
@@ -1226,6 +1259,36 @@ onUnmounted(() => {
   font-size: 0.8em;
 }
 
+/* 添加加载动画样式 */
+.loading-container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #666;
+}
+
+.loading-spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid #f3f3f3;
+  border-top: 3px solid #f59e0b;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-bottom: 12px;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 @media screen and (max-width: 360px) {
   * {
     font-size: 10px;