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

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

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

@@ -58,7 +58,8 @@ function handleBack() {
 
 function handleNext() {
   // 进入规则页面
-  routerPushByKey('user_rules')
+  // routerPushByKey('user_rules')
+  routerPushByKey('user_cover', { query: { activityId, groupsId, teamIds: teamIds.value.join(','), RoundType: RoundType.value } })
 }
 
 function selectTeam(_id: number) {
@@ -73,20 +74,20 @@ onMounted(() => {
     showBackground.value = true
   }, 300)
 
-  // 2. 标题浮现 - 等卷轴展开一大半再出来 (卷轴动画约 1.5s，这里设为 1200ms)
+  // 2. 标题浮现 - 等卷轴展开一大半再出来 (卷轴动画约 3s，这里设为 2000ms)
   setTimeout(() => {
     showTitle.value = true
-  }, 1200)
+  }, 2000)
 
-  // 3. 列表出现 - 等卷轴完全展开并定住后再出 (卷轴动画结束需 1.5s，这里给 1600ms)
+  // 3. 列表出现 - 等卷轴完全展开并定住后再出 (卷轴动画结束需 3s，这里给 3200ms)
   setTimeout(() => {
     showList.value = true
-  }, 1600)
+  }, 2500)
 })
 </script>
 
 <template>
-  <CompetitionLayout :show-back="true" :show-next="false" :show-title="false" @back="handleBack" @next="handleNext">
+  <CompetitionLayout :show-back="true" :show-next="true" next-btn-text="下一步" :show-title="false" @next="handleNext" @back="handleBack">
     <!-- Scroll Content -->
     <div class="scroll-container">
       <!-- 卷轴背景动画容器 -->
@@ -106,11 +107,8 @@ onMounted(() => {
           <div class="scroll-content">
             <TransitionGroup name="list-anim" tag="div" class="teams-grid">
               <div
-                v-for="(item, index) in showList ? teams : []"
-                :key="item.id"
-                class="team-item"
-                :style="{ '--delay': `${index * 0.8}s` }"
-                @click="selectTeam(item.id)"
+                v-for="(item, index) in showList ? teams : []" :key="item.id" class="team-item"
+                :style="{ '--delay': `${index * 0.8}s` }" @click="selectTeam(item.id)"
               >
                 <div class="icon-wrapper">
                   <img src="@/assets/imgs/user/team-title-icon.svg" alt="team-icon" class="h-full w-full object-cover">
@@ -131,19 +129,22 @@ onMounted(() => {
 <style lang="scss" scoped>
 // 卷轴展开动画 - 变得更慢更优雅
 .scroll-expand-enter-active {
-  transition: all 1.5s cubic-bezier(0.25, 1, 0.5, 1); // 持续时间加长到 1.5s，曲线更平滑
+  transition: clip-path 3s cubic-bezier(0.25, 1, 0.5, 1);
   overflow: hidden;
 }
 
 .scroll-expand-leave-active {
-  transition: all 0.8s ease;
+  transition: clip-path 1.5s ease;
 }
 
 .scroll-expand-enter-from,
 .scroll-expand-leave-to {
-  width: 0 !important;
-  opacity: 0;
-  transform: scaleX(0.9); // 稍微调整初始缩放
+  clip-path: inset(0 50% 0 50%);
+}
+
+.scroll-expand-enter-to,
+.scroll-expand-leave-from {
+  clip-path: inset(0 0 0 0);
 }
 
 // 标题进场动画 - 更加缓慢浮现
@@ -158,7 +159,7 @@ onMounted(() => {
 
 // 列表进场动画 (使用 keyframes 实现更丝滑的渐入)
 .list-anim-enter-active {
-  animation: list-enter 2s cubic-bezier(0.23, 1, 0.32, 1) both; // both 模式确保动画前后状态保留
+  animation: list-enter 1s cubic-bezier(0.23, 1, 0.32, 1) both; // both 模式确保动画前后状态保留
   animation-delay: var(--delay);
 }
 
@@ -167,6 +168,7 @@ onMounted(() => {
     opacity: 0;
     transform: translateY(80px) scale(0.9);
   }
+
   100% {
     opacity: 1;
     transform: translateY(0) scale(1);
@@ -191,7 +193,6 @@ onMounted(() => {
   }
 }
 
-// 覆盖默认样式，因为这个页面设计比较特殊（卷轴）
 .competition-layout :deep(.main-content) {
   display: flex;
   align-items: center;
@@ -216,9 +217,10 @@ onMounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: url('@/assets/imgs/user/team-bg.svg') no-repeat center center;
+  background: url('@/assets/imgs/user/team-bg-animation.svg') no-repeat center center;
   background-size: 100% 100%;
   transform-origin: center; // 确保从中心展开
+  will-change: clip-path; // 优化性能
 
   &::before {
     left: -15px;