feat(admin): 优化用户界面动画与交互体验

- 调整倒计时音效触发时机为剩余5秒并添加新音频文件
- 为SvgIcon组件增加size属性以支持自定义图标尺寸
- 优化ActionButton组件的动画效果和视觉反馈
- 修复游戏页面组件卸载时未停止计时器的问题
- 重构音频控制器，改进音频预加载和播放逻辑
- 优化团队选择页面的卷轴动画和布局跳转逻辑
- 改进小组选择页面的视觉样式和响应式布局
- 增强CompetitionLayout组件的标题动画和内容显示逻辑

apps/admin/src/views/user/groups/index.vue

@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import { computed, onMounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
+import groupType1 from '@/assets/imgs/user/group-type-1.svg'
+import groupType2 from '@/assets/imgs/user/group-type-2.svg'
 import startIcon from '@/assets/imgs/user/star-icon.svg'
 import CompetitionLayout from '@/components/custom/user/CompetitionLayout.vue'
 import { useRouterPush } from '@/hooks/common/router'
@@ -98,8 +100,11 @@ onMounted(() => {
               <NImage :src="startIcon" alt="star" class="star-img" width="180" height="187" :preview-disabled="true" object-fit="contain" />
             </div>
           </div>
-          <div class="group-name-tag">
-            <span class="sun-icon">☀️</span>
+          <div
+            class="group-name-tag"
+            :class="index % 2 === 0 ? 'type-moon' : 'type-sun'"
+            :style="{ backgroundImage: `url(${index % 2 === 0 ? groupType2 : groupType1})` }"
+          >
             {{ item.Name }}
           </div>
         </div>
@@ -124,9 +129,9 @@ onMounted(() => {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
-  gap: 20px;
+  gap: 15px; // 减小间距
   width: 100%;
-  max-width: 1200px;
+  max-width: 1400px; // 增加最大宽度限制，允许在一行放下更多
 }
 
 .group-item {
@@ -135,7 +140,28 @@ onMounted(() => {
   align-items: center;
   cursor: pointer;
   transition: transform 0.3s ease;
-  width: calc(20% - 16px);
+  // 适配不同屏幕宽度
+  width: calc(20% - 16px); // 默认一行5个 (100% / 5 ≈ 20%)
+
+  // 当总数大于10时，启用紧凑模式（一行6个）
+  .grid-dense & {
+    width: calc(16.66% - 16px);
+  }
+
+  // 大屏下如果没启用紧凑模式，依然保持一行5个，或者根据需要调整
+  // @media (min-width: 1440px) {
+  //   width: calc(16.66% - 16px); // 大屏一行6个
+  // }
+
+  // 小屏适配
+  @media (max-width: 1200px) {
+    width: calc(25% - 16px); // 中屏一行4个
+
+    .grid-dense & {
+      width: calc(20% - 16px); // 紧凑模式下中屏一行5个
+    }
+  }
+
   margin: 0;
   margin-bottom: 30px;
 
@@ -154,8 +180,8 @@ onMounted(() => {
   }
 
   .icon-wrapper {
-    // width: 100px;
-    // height: 100px;
+    // 稍微缩小图标区域以适配更密集的布局
+    transform: scale(0.9);
     position: relative;
     display: flex;
     align-items: center;
@@ -170,31 +196,47 @@ onMounted(() => {
   }
 
   .group-name-tag {
-    margin-top: 10px;
-    background: #e0f2f1;
-    padding: 4px 16px;
-    border-radius: 16px;
-    font-size: 1rem;
-    color: $group-text-color;
+    margin-top: 5px; // 减小顶部间距
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 100% 100%;
+    width: 180px; // 稍微缩小标签宽度
+    height: 72px; // 按比例缩小高度
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.2rem; // 稍微缩小字号
+    color: #5d4037;
     font-weight: bold;
     position: relative;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    border: 2px solid #fff;
+    // border: 1px solid #5d4037;
 
-    .sun-icon {
-      position: absolute;
-      right: -8px;
-      top: -8px;
-      font-size: 1rem;
+    &.type-moon {
+      padding-left: 27px; // 按比例调整 padding
+      padding-top: 8px;
+      margin-top: -5px; // 调整错落位置
     }
 
-    &::before {
-      content: '🌸';
-      position: absolute;
-      left: -12px;
-      bottom: -4px;
-      font-size: 0.9rem;
+    &.type-sun {
+      padding-left: 40px; // 按比例调整 padding
+      margin-top: 5px;
     }
+
+    // .sun-icon {
+    //   position: absolute;
+    //   right: 20px;
+    //   top: 10px;
+    //   font-size: 1rem;
+    //   z-index: 2;
+    // }
+
+    // &::before {
+    //   content: '🌸';
+    //   position: absolute;
+    //   left: -12px;
+    //   bottom: -4px;
+    //   font-size: 0.9rem;
+    // }
   }
 }