From 7c70a7847a991c1953209288991e5c93ac2583ba Mon Sep 17 00:00:00 2001
From: ZF sun <34314687@qq.com>
Date: Fri, 21 Nov 2025 17:20:39 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E7=9A=87=E5=86=A0=E5=8A=A8=E7=94=BB?=
 =?UTF-8?q?=E6=95=88=E6=9E=9C=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/AdminPanel.vue    | 22 +++++++++++++++++
 src/views/BattleRanking.vue | 48 +++++++++++++++++++++++++++----------
 2 files changed, 58 insertions(+), 12 deletions(-)

diff --git a/src/views/AdminPanel.vue b/src/views/AdminPanel.vue
index 87a6881..c5b25cf 100644
--- a/src/views/AdminPanel.vue
+++ b/src/views/AdminPanel.vue
@@ -543,6 +543,28 @@
               <p class="upload-hint">支持JPG、PNG、GIF格式，建议尺寸200x200像素，文件大小不超过5MB</p>
             </div>
           </div>
+          
+          <!-- 皇冠配置 -->
+          <div class="config-section">
+            <h3 class="text-gold">👑 英雄冠军皇冠配置</h3>
+            <div class="crown-config-section">
+              <div class="config-item">
+                <label class="checkbox-label">
+                  <span>皇冠大小（像素）：</span>
+                  <input type="number" v-model.number="localDisplayConfig.crown.size" min="30" max="300"
+                    class="width-input" placeholder="输入大小（像素）">
+                  <span class="size-unit">px</span>
+                </label>
+              </div>
+              <div class="config-item">
+                <label class="checkbox-label">
+                  <input type="checkbox" v-model="localDisplayConfig.crown.animationEnabled">
+                  <span>启用皇冠浮动动画效果</span>
+                </label>
+              </div>
+              <p class="upload-hint">皇冠大小默认为英雄冠军头像的1.2倍，建议设置为合适的大小以确保美观</p>
+            </div>
+          </div>
         </div>
 
         <!-- 战鼓配置 -->
diff --git a/src/views/BattleRanking.vue b/src/views/BattleRanking.vue
index 56ff728..9eae35c 100644
--- a/src/views/BattleRanking.vue
+++ b/src/views/BattleRanking.vue
@@ -93,7 +93,10 @@
           <!-- 英雄冠军 -->
           <div class="individual-champion">
               <div class="individual-avatar champion-container">
-                <div class="crown-animation" v-if="filteredIndividualRankings.length > 0">
+                <div class="crown-animation" :class="{'crown-animation-run': localDisplayConfig.crown?.animationEnabled}" v-if="filteredIndividualRankings.length > 0" :style="{
+                  fontSize: (localDisplayConfig.crown?.size || localDisplayConfig.championLogos?.individualChampionSize * 0.8) + 'px'
+                  // transform: 'translateX(-50%)'
+                }">
                   👑
                 </div>
                 <img v-if="filteredIndividualRankings[0]?.avatar && filteredIndividualRankings[0].avatar.startsWith('/')"
@@ -375,7 +378,7 @@ onBeforeMount(async () => {
 
 // 更新CSS变量，将默认显示行数传递给样式
 watch(
-  () => localDisplayConfig.value.individual.defaultDisplayRows,
+  () => localDisplayConfig.value?.individual?.defaultDisplayRows,
   (newRows) => {
     document.documentElement.style.setProperty('--default-display-rows', newRows);
   },
@@ -384,7 +387,7 @@ watch(
 
 // 添加监听以同步战区排名默认显示行数配置到CSS变量
 watch(
-  () => localDisplayConfig.value.team.defaultDisplayRows,
+  () => localDisplayConfig.value?.team?.defaultDisplayRows,
   (newValue) => {
     if (newValue && newValue > 0) {
       document.documentElement.style.setProperty('--team-default-height', `calc(60px * ${newValue})`);
@@ -407,7 +410,7 @@ watch(
 watch(
   () => teamRankings.value.length,
   () => {
-    const displayRows = localDisplayConfig.value.team.defaultDisplayRows;
+    const displayRows = localDisplayConfig.value?.team?.defaultDisplayRows;
     if (!displayRows || displayRows === 0) {
       // 根据实际数据条数计算高度，每行60px，加上一些额外空间（20px）
       const actualHeight = teamRankings.value.length * 60 + 20;
@@ -955,6 +958,17 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss" scoped>
+@keyframes crownFloat {
+  0% {
+    transform: translateY(0px) rotate(0deg);
+  }
+  50% {
+    transform: translateY(-5px) rotate(2deg);
+  }
+  100% {
+    transform: translateY(0px) rotate(0deg);
+  }
+}
 .avatar-image-champion {
   object-fit: contain;
 }
@@ -1000,33 +1014,42 @@ onUnmounted(() => {
 /* 皇冠动画效果 */
 .crown-animation {
   position: absolute;
-  top: -25px;
+  top: -70px;
   left: 50%;
   transform: translateX(-50%);
-  font-size: 1.5rem;
-  animation: crownFloat 2s ease-in-out infinite;
   z-index: 10;
   text-shadow: 0 0 10px var(--gold-primary), 0 0 20px var(--gold-secondary);
+
+}
+
+.crown-animation-run {
+  animation: crownFloat 2s ease-in-out infinite, crownGlow 3s ease-in-out infinite;
 }
 
 /* 皇冠浮动动画 */
 @keyframes crownFloat {
   0% {
-    transform: translateX(-50%) translateY(0) rotate(-5deg);
+    transform: translateX(-50%) translateY(0) rotate(-10deg);
   }
   50% {
-    transform: translateX(-50%) translateY(-5px) rotate(5deg);
+    transform: translateX(-50%) translateY(-5px) rotate(10deg);
   }
   100% {
-    transform: translateX(-50%) translateY(0) rotate(-5deg);
+    transform: translateX(-50%) translateY(0) rotate(-10deg);
   }
 }
 
 /* 皇冠发光效果动画 */
-.crown-animation {
-  animation: crownFloat 2s ease-in-out infinite, crownGlow 3s ease-in-out infinite;
+@keyframes crownGlow {
+  0%, 100% {
+    text-shadow: 0 0 10px var(--gold-primary), 0 0 20px var(--gold-secondary);
+  }
+  50% {
+    text-shadow: 0 0 15px var(--gold-primary), 0 0 30px var(--gold-secondary), 0 0 40px var(--gold-tertiary);
+  }
 }
 
+
 @keyframes crownGlow {
   0%, 100% {
     text-shadow: 0 0 10px var(--gold-primary), 0 0 20px var(--gold-secondary);
@@ -1576,6 +1599,7 @@ onUnmounted(() => {
   max-height: 480px;
   overflow-y: auto;
   position: relative;
+  margin-top: 0.8rem;
 }
 
 .table-header {