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

- 调整倒计时音效触发时机为剩余5秒并添加新音频文件 - 为SvgIcon组件增加size属性以支持自定义图标尺寸 - 优化ActionButton组件的动画效果和视觉反馈 - 修复游戏页面组件卸载时未停止计时器的问题 - 重构音频控制器，改进音频预加载和播放逻辑 - 优化团队选择页面的卷轴动画和布局跳转逻辑 - 改进小组选择页面的视觉样式和响应式布局 - 增强CompetitionLayout组件的标题动画和内容显示逻辑
2026-03-11 17:58:57 +08:00
parent b9c5886437
commit 41f7ba7b8a
12 changed files with 341 additions and 192 deletions
--- a/apps/admin/src/assets/audio/boy-5s.mp3
+++ b/apps/admin/src/assets/audio/boy-5s.mp3
--- a/apps/admin/src/assets/imgs/user/group-type-1.svg
+++ b/apps/admin/src/assets/imgs/user/group-type-1.svg
--- a/apps/admin/src/assets/imgs/user/group-type-2.svg
+++ b/apps/admin/src/assets/imgs/user/group-type-2.svg
--- a/apps/admin/src/assets/imgs/user/team-bg-animation.svg
+++ b/apps/admin/src/assets/imgs/user/team-bg-animation.svg
--- a/apps/admin/src/components/custom/svg-icon.vue
+++ b/apps/admin/src/components/custom/svg-icon.vue
@ -17,6 +17,8 @@ interface Props {
  icon?: string
  /** 本地 svg 图标名称 */
  localIcon?: string
+  /** 图标大小 */
+  size?: string | number
 }

 const attrs = useAttrs()
@ -44,13 +46,13 @@ const renderLocalIcon = computed(() => props.localIcon || !props.icon)
 <template>
  <!-- 渲染本地 svg 图标 -->
  <template v-if="renderLocalIcon">
-    <svg aria-hidden="true" width="1em" height="1em" v-bind="bindAttrs">
+    <svg aria-hidden="true" :width="size || '1em'" :height="size || '1em'" v-bind="bindAttrs">
      <use :xlink:href="symbolId" fill="currentColor" />
    </svg>
  </template>
  <template v-else>
    <!-- 渲染 iconify 图标 -->
-    <Icon v-if="icon" :icon="icon" v-bind="bindAttrs" />
+    <Icon v-if="icon" :icon="icon" :width="size" :height="size" v-bind="bindAttrs" />
  </template>
 </template>

--- a/apps/admin/src/components/custom/user/ActionButton.vue
+++ b/apps/admin/src/components/custom/user/ActionButton.vue
@ -51,7 +51,7 @@ function handleClick() {
  align-items: center;
  justify-content: center;
  cursor: pointer;
-  transition: all 0.1s ease;
+  transition: all 0.2s ease;
  background: #eb5e55;
  box-shadow: 0 8px 0 #fcc64f;

@ -62,6 +62,7 @@ function handleClick() {
  &:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
+    box-shadow: 0 10px 0 #fcc64f;
  }

  &:active {
@ -76,7 +77,7 @@ function handleClick() {
    border-radius: 40px;

    .btn-text {
-      font-size: 24px;
+      font-size: 30px;
      font-weight: bold;
      letter-spacing: 2px;
    }
@ -103,7 +104,8 @@ function handleClick() {

  &:hover {
    background-color: #fff;
-    transform: translateY(-2px);
+    transform: translateY(-3px);
+    box-shadow: 0 10px 0 #fcc64f;
  }

  &:active {
--- a/apps/admin/src/components/custom/user/CompetitionLayout.vue
+++ b/apps/admin/src/components/custom/user/CompetitionLayout.vue
@ -87,6 +87,7 @@ async function fetchSystemConfig() {
 }

 const showContent = ref(false)
+const showSlotContent = ref(false)

 function handleBack() {
  emit('back')
@ -112,6 +113,12 @@ onMounted(() => {
  setTimeout(() => {
    showContent.value = true
  }, 100)
+
+  // 延迟显示内容，等待标题卷轴展开
+  const delay = props.showTitle ? 800 : 100
+  setTimeout(() => {
+    showSlotContent.value = true
+  }, delay)
 })
 </script>

@ -131,12 +138,14 @@ onMounted(() => {
        <div class="glass-overlay">
          <!-- title -->
          <section v-if="showTitle" class="title-section">
-            <Transition name="fade-slide-down" appear>
-              <div v-if="showContent" class="title-section">
+            <Transition name="scroll-unfold" appear>
+              <div v-if="showContent" class="title-wrapper">
                <div class="scroll-bg" :style="{ backgroundImage: `url(${titleBgUrl})` }">
-                  <h1 class="main-title">
-                    {{ title }}
-                  </h1>
+                  <Transition name="fade-in-delay" appear>
+                    <h1 v-if="showContent" class="main-title">
+                      {{ title }}
+                    </h1>
+                  </Transition>
                </div>
              </div>
            </Transition>
@ -144,7 +153,9 @@ onMounted(() => {

          <!-- Main Content Slot -->
          <main class="main-content">
-            <slot />
+            <div v-if="showSlotContent" class="h-full w-full flex flex-col items-center justify-center">
+              <slot />
+            </div>
          </main>

          <!-- Footer Action -->
@ -157,7 +168,7 @@ onMounted(() => {
                class="back-btn" :style="{ visibility: showBack ? 'visible' : 'hidden' }"
                :type="backBtnText ? 'text' : 'button'" :text="backBtnText || ''" :theme="btnTheme" @click="handleBack"
              >
-                <SvgIcon v-if="!backBtnText" icon="mdi:arrow-left" class="arrow-icon" />
+                <SvgIcon v-if="!backBtnText" icon="mdi:arrow-left" size="40" class="arrow-icon" />
              </ActionButton>
            </div>

@ -166,14 +177,14 @@ onMounted(() => {
                v-if="showNext" :type="nextBtnText ? 'text' : 'button'" :text="nextBtnText || '下一步'"
                :theme="btnTheme" :disabled="nextDisabled" @click="handleNext"
              >
-                <SvgIcon v-if="!nextBtnText" icon="mdi:arrow-right" class="arrow-icon" />
+                <SvgIcon v-if="!nextBtnText" icon="mdi:arrow-right" class="arrow-icon" size="40" />
              </ActionButton>

              <ActionButton
                v-if="showNextBtn2" :type="nextBtnText2 ? 'text' : 'button'" :text="nextBtnText2 || '下一步'"
                :theme="btnTheme" :disabled="nextDisabled" @click="handleNext2"
              >
-                <SvgIcon v-if="!nextBtnText2" icon="mdi:arrow-right" class="arrow-icon" />
+                <SvgIcon v-if="!nextBtnText2" icon="mdi:arrow-right" class="arrow-icon" size="40" />
              </ActionButton>
            </div>
          </footer>
@ -188,24 +199,36 @@ onMounted(() => {
  margin: 10px auto;
  width: 412px;
  height: 165px;
+  display: flex;
+  justify-content: center; /* Ensure wrapper stays centered during expansion */

-  .scroll-bg {
+  .title-wrapper {
    width: 100%;
    height: 100%;
+    overflow: hidden;
+    display: flex;
+    justify-content: center; /* Keep the background image centered */
+  }
+
+  .scroll-bg {
+    width: 412px !important; /* Fixed width to prevent squishing during animation */
+    height: 165px !important;
    position: relative;
    background: no-repeat center center;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
-    padding-bottom: 10px; // 微调垂直位置，因为卷轴可能有视觉重心偏移
+    padding-bottom: 10px;
+    flex-shrink: 0; /* Prevent shrinking */

    .main-title {
-      font-size: 2.6rem;
+      font-size: 2.5rem;
      color: $text-color;
      margin: 0;
      letter-spacing: 4px;
      text-align: center;
+      white-space: nowrap; /* Prevent text wrapping */
    }
  }
 }
@ -320,6 +343,23 @@ onMounted(() => {
 }

 // Transitions
+.scroll-unfold-enter-active {
+  transition: width 1.5s cubic-bezier(0.25, 1, 0.5, 1);
+}
+
+.scroll-unfold-enter-from {
+  width: 0 !important;
+}
+
+.fade-in-delay-enter-active {
+  transition: opacity 0.8s ease;
+  transition-delay: 1s; /* Wait for scroll to unfold */
+}
+
+.fade-in-delay-enter-from {
+  opacity: 0;
+}
+
 .fade-slide-down-enter-active,
 .fade-slide-down-leave-active {
  transition: all 0.8s ease;
--- a/apps/admin/src/store/modules/competition/index.ts
+++ b/apps/admin/src/store/modules/competition/index.ts
@ -93,9 +93,9 @@ export const useCompetitionStore = defineStore('competition', () => {
    timerInterval.value = window.setInterval(() => {
      if (timeLeft.value > 0) {
        timeLeft.value--
-        // 剩余10秒播放倒计时音效
-        if (timeLeft.value <= 10) {
-          audioController.play('tick10')
+        // 5秒内播放倒计时音效
+        if (timeLeft.value === 5) {
+          audioController.play('boy5')
        }
      }
      else {
--- a/apps/admin/src/utils/audio.ts
+++ b/apps/admin/src/utils/audio.ts
@ -1,28 +1,58 @@
+import boy5 from '@/assets/audio/boy-5s.mp3'
 import system10 from '@/assets/audio/boy-10s.mp3'

+export type AudioType = 'start' | 'tick10' | 'flip' | 'boy5'
+
 export class AudioController {
-  private audioContext: AudioContext | null = null
+  private static audioContext: AudioContext | null = null
  private soundFiles: Record<string, string> = {}
  private audioCache: Record<string, HTMLAudioElement> = {}

  constructor(soundFiles: Record<string, string> = {}) {
    this.soundFiles = {
      tick10: system10,
+      boy5,
      ...soundFiles,
    }
+    // 预加载关键音频
+    this.preload(['tick10', 'boy5'])
  }

  private initAudioContext() {
-    if (!this.audioContext) {
-      this.audioContext = new (window.AudioContext || (window as any).webkitAudioContext)()
+    if (!AudioController.audioContext) {
+      const AudioContextClass = window.AudioContext || (window as any).webkitAudioContext
+      if (AudioContextClass) {
+        AudioController.audioContext = new AudioContextClass()
+      }
    }
+    // 尝试恢复上下文（如果被挂起）
+    if (AudioController.audioContext?.state === 'suspended') {
+      AudioController.audioContext.resume().catch(() => {})
+    }
+  }
+
+  /**
+   * 预加载音频文件
+   */
+  preload(types: AudioType[]) {
+    types.forEach((type) => {
+      const url = this.soundFiles[type]
+      if (url && !this.audioCache[type]) {
+        const audio = new Audio(url)
+        audio.preload = 'auto'
+        this.audioCache[type] = audio
+      }
+    })
  }

  /**
   * 播放指定类型的音效
   * 优先使用预设的音频文件，如果没有配置或加载失败，则使用 Web Audio API 合成音效
   */
-  async play(type: 'start' | 'tick10' | 'flip') {
+  async play(type: AudioType) {
+    // 确保音频上下文已初始化
+    this.initAudioContext()
+
    // 尝试播放音频文件
    if (this.soundFiles[type]) {
      try {
@ -59,68 +89,83 @@ export class AudioController {
    })
  }

-  private playSynth(type: 'start' | 'tick10' | 'flip') {
-    this.initAudioContext()
-    if (!this.audioContext)
+  private playSynth(type: AudioType) {
+    if (!AudioController.audioContext)
      return

-    const ctxTime = this.audioContext.currentTime
-    const gain = this.audioContext.createGain()
-    gain.connect(this.audioContext.destination)
+    const ctx = AudioController.audioContext
+    const ctxTime = ctx.currentTime
+    const gain = ctx.createGain()
+    gain.connect(ctx.destination)

-    if (type === 'start') {
-      const osc = this.audioContext.createOscillator()
-      osc.connect(gain)
-      // 开始音效：高音短促提示
-      osc.type = 'sine'
-      osc.frequency.setValueAtTime(880, ctxTime)
-      osc.frequency.exponentialRampToValueAtTime(440, ctxTime + 0.3)
-      gain.gain.setValueAtTime(0.5, ctxTime)
-      gain.gain.exponentialRampToValueAtTime(0.01, ctxTime + 0.3)
-      osc.start(ctxTime)
-      osc.stop(ctxTime + 0.3)
-    }
-    else if (type === 'tick10') {
-      const osc = this.audioContext.createOscillator()
-      osc.connect(gain)
-      // 倒计时音效：急促的滴答声
-      osc.type = 'triangle'
-      osc.frequency.setValueAtTime(600, ctxTime)
-      gain.gain.setValueAtTime(0.3, ctxTime)
-      gain.gain.exponentialRampToValueAtTime(0.01, ctxTime + 0.1)
-      osc.start(ctxTime)
-      osc.stop(ctxTime + 0.1)
-    }
-    else if (type === 'flip') {
-      // 翻书音效：使用白噪声模拟纸张摩擦
-      const bufferSize = this.audioContext.sampleRate * 0.5 // 0.5秒缓冲
-      const buffer = this.audioContext.createBuffer(1, bufferSize, this.audioContext.sampleRate)
-      const data = buffer.getChannelData(0)
-
-      // 生成白噪声
-      for (let i = 0; i < bufferSize; i++) {
-        data[i] = Math.random() * 2 - 1
-      }
-
-      const noise = this.audioContext.createBufferSource()
-      noise.buffer = buffer
-
-      // 滤波器：低通滤波器，模拟纸张的闷声
-      const filter = this.audioContext.createBiquadFilter()
-      filter.type = 'lowpass'
-      filter.frequency.setValueAtTime(400, ctxTime)
-      filter.frequency.exponentialRampToValueAtTime(3000, ctxTime + 0.1) // 频率快速扫过，模拟快速翻动
-
-      noise.connect(filter)
-      filter.connect(gain)
-
-      // 音量包络：快速淡入淡出
-      gain.gain.setValueAtTime(0, ctxTime)
-      gain.gain.linearRampToValueAtTime(0.8, ctxTime + 0.05)
-      gain.gain.exponentialRampToValueAtTime(0.01, ctxTime + 0.3)
-
-      noise.start(ctxTime)
-      noise.stop(ctxTime + 0.3)
+    switch (type) {
+      case 'start':
+        this.playStartSound(ctx, gain, ctxTime)
+        break
+      case 'tick10':
+      case 'boy5':
+        this.playTickSound(ctx, gain, ctxTime)
+        break
+      case 'flip':
+        this.playFlipSound(ctx, gain, ctxTime)
+        break
    }
  }
+
+  private playStartSound(ctx: AudioContext, gain: GainNode, time: number) {
+    const osc = ctx.createOscillator()
+    osc.connect(gain)
+    // 开始音效：高音短促提示
+    osc.type = 'sine'
+    osc.frequency.setValueAtTime(880, time)
+    osc.frequency.exponentialRampToValueAtTime(440, time + 0.3)
+    gain.gain.setValueAtTime(0.5, time)
+    gain.gain.exponentialRampToValueAtTime(0.01, time + 0.3)
+    osc.start(time)
+    osc.stop(time + 0.3)
+  }
+
+  private playTickSound(ctx: AudioContext, gain: GainNode, time: number) {
+    const osc = ctx.createOscillator()
+    osc.connect(gain)
+    // 倒计时音效：急促的滴答声
+    osc.type = 'triangle'
+    osc.frequency.setValueAtTime(600, time)
+    gain.gain.setValueAtTime(0.3, time)
+    gain.gain.exponentialRampToValueAtTime(0.01, time + 0.1)
+    osc.start(time)
+    osc.stop(time + 0.1)
+  }
+
+  private playFlipSound(ctx: AudioContext, gain: GainNode, time: number) {
+    // 翻书音效：使用白噪声模拟纸张摩擦
+    const bufferSize = ctx.sampleRate * 0.5 // 0.5秒缓冲
+    const buffer = ctx.createBuffer(1, bufferSize, ctx.sampleRate)
+    const data = buffer.getChannelData(0)
+
+    // 生成白噪声
+    for (let i = 0; i < bufferSize; i++) {
+      data[i] = Math.random() * 2 - 1
+    }
+
+    const noise = ctx.createBufferSource()
+    noise.buffer = buffer
+
+    // 滤波器：低通滤波器，模拟纸张的闷声
+    const filter = ctx.createBiquadFilter()
+    filter.type = 'lowpass'
+    filter.frequency.setValueAtTime(400, time)
+    filter.frequency.exponentialRampToValueAtTime(3000, time + 0.1) // 频率快速扫过，模拟快速翻动
+
+    noise.connect(filter)
+    filter.connect(gain)
+
+    // 音量包络：快速淡入淡出
+    gain.gain.setValueAtTime(0, time)
+    gain.gain.linearRampToValueAtTime(0.8, time + 0.05)
+    gain.gain.exponentialRampToValueAtTime(0.01, time + 0.3)
+
+    noise.start(time)
+    noise.stop(time + 0.3)
+  }
 }
--- a/apps/admin/src/views/user/game/index.vue
+++ b/apps/admin/src/views/user/game/index.vue
@ -41,6 +41,7 @@ onMounted(async () => {
 })

 onUnmounted(() => {
+  store.stopTimer()
  stopPolling()
 })

@ -135,7 +136,7 @@ async function handleNext() {
    // 并在获取失败时尝试从 detail 获取（如果后端在详情接口也返回了时间）
    const infoTime = store.currentQuestionInfo?.QuestionTime || (store.currentQuestionInfo as any)?.questionTime
    const detailTime = (store.currentQuestionDetail as any)?.QuestionTime || (store.currentQuestionDetail as any)?.questionTime
-    const duration = Number(infoTime || detailTime || 120) // 默认值改为 120s 或者保持 10s，用户说是 120s
+    const duration = Number(infoTime || detailTime || 120)

    console.log('开始倒计时，时长:', duration, 'InfoTime:', infoTime, 'DetailTime:', detailTime)
    store.startTimer(duration)
@ -199,19 +200,8 @@ async function fetchGetGameStatisticsData(_params: Api.Competition.QuestionAddPa
      const { data } = await fetchGetGameStatistics(_params)
      // console.log(data, 'data')
      // 更新图表数据
-      // 假设接口返回格式为: [{ TeamName: '组1', Points: 10, ResultPotins: 5 }, ...]
-      // 需要根据实际接口返回结构调整映射逻辑
      const list = (data?.data || []) as any[]
      if (list && Array.isArray(list)) {
-        // 根据 TeamName 分组并去重（如果是同一个小组多条记录，可能需要合并，这里假设直接展示返回列表）
-        // 如果后端返回的就是每个小组一条汇总数据，直接映射即可
-        // 根据需求描述，返回的数据可能有多条同名小组记录，或者就是每个小组一条
-        // 鉴于示例数据中有重复的 TeamName (第一小队, 第二小队)，这里做一个简单的去重或聚合
-        // 实际上 fetchGetGameStatistics 应该是返回统计数据，如果返回了明细，前端需要聚合
-        // 但看字段 Points 和 ResultPotins 像是统计值，这里直接映射展示，如果有重复名，ECharts category 会自动处理或需要前端聚合
-        // 为了稳妥，这里按 TeamId 或 TeamName 聚合一下，取最新或求和？
-        // 假设返回的是当前所有小组的状态，直接映射即可
-
        // 使用 Map 去重，以 TeamId 为准，保留最新的状态
        const teamMap = new Map()
        list.forEach((item) => {
@ -220,13 +210,6 @@ async function fetchGetGameStatisticsData(_params: Api.Competition.QuestionAddPa
            if (item.UserAnswerFont) {
              const parsed = JSON.parse(item.UserAnswerFont)
              if (Array.isArray(parsed) && parsed.length > 0) {
-                // 如果 AnswerText 存在，取其长度；否则（如选择题）如果对象存在则算 1 个
-                // 逻辑：如果是填空/听写类，AnswerText 是字符串，取长度？
-                // 根据需求：答题数量用 UserAnswerFont 里面 AnswerText 字段的 length 长度
-                // 注意：AnswerText 可能是 "B" (选择题) 或 "汉字" (听写)
-                // 如果是数组，是否需要累加所有项的 AnswerText 长度？
-                // 假设 UserAnswerFont 是一个数组 [{"AnswerText": "..."}]
-                // 这里我们遍历数组累加长度
                parsed.forEach((p: any) => {
                  if (p.AnswerText) {
                    answerCount += String(p.AnswerText).length
--- a/apps/admin/src/views/user/groups/index.vue
+++ b/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;
+    // }
  }
 }

--- a/apps/admin/src/views/user/teams/index.vue
+++ b/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;