feat(admin): 优化用户界面交互与数据展示

- 在队伍选择页面增加卷轴展开动画，优化视觉体验
- 为游戏页面添加实时统计图表，使用 ECharts 展示各队答题进度
- 调整题目渲染器中图片的最大宽度为 200px
- 在路由配置中隐藏 results_results-detail-copy 菜单项
- 修复 API 函数命名和参数类型，更新接口返回类型定义
- 移动拼音听写题目数据文件到 store 目录
- 更新 VSCode 拼写检查配置，添加 ECharts 单词

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

@@ -46,7 +46,9 @@ async function getTeams() {
   }
 }
 
-const showContent = ref(false)
+const showBackground = ref(false)
+const showTitle = ref(false)
+const showList = ref(false)
 
 function handleBack() {
   routerBack()
@@ -63,10 +65,21 @@ function selectTeam(_id: number) {
 }
 
 onMounted(() => {
+  getTeams()
+  // 1. 背景卷轴展开 - 稍微慢一点开始，给人一种准备的感觉
   setTimeout(() => {
-    showContent.value = true
-    getTeams()
-  }, 100)
+    showBackground.value = true
+  }, 300)
+
+  // 2. 标题浮现 - 等卷轴展开一大半再出来 (卷轴动画约 1.5s，这里设为 1200ms)
+  setTimeout(() => {
+    showTitle.value = true
+  }, 1200)
+
+  // 3. 列表出现 - 等卷轴完全展开并定住后再出 (卷轴动画结束需 1.5s，这里给 1600ms)
+  setTimeout(() => {
+    showList.value = true
+  }, 1600)
 })
 </script>
 
@@ -74,40 +87,90 @@ onMounted(() => {
   <CompetitionLayout :show-back="true" :show-next="false" :show-title="false" @back="handleBack" @next="handleNext">
     <!-- Scroll Content -->
     <div class="scroll-container">
-      <div class="scroll-body">
-        <!-- Title Section inside Scroll -->
-        <Transition name="fade-slide-down" appear>
-          <div v-if="showContent" class="title-section">
-            <div class="scroll-bg">
-              <span class="main-title text-4xl text-#22685a">
-                队伍名单
-              </span>
+      <!-- 卷轴背景动画容器 -->
+      <Transition name="scroll-expand">
+        <div v-if="showBackground" class="scroll-body">
+          <!-- Title Section inside Scroll -->
+          <Transition name="fade-slide-down">
+            <div v-if="showTitle" class="title-section">
+              <div class="scroll-bg">
+                <span class="main-title text-4xl text-#22685a">
+                  队伍名单
+                </span>
+              </div>
             </div>
-          </div>
-        </Transition>
+          </Transition>
 
-        <div class="scroll-content">
-          <TransitionGroup name="list-anim" tag="div" class="teams-grid">
-            <div
-              v-for="(item, index) in teams" v-show="showContent" :key="item.id" class="team-item"
-              :style="{ '--delay': `${index * 0.1}s` }" @click="selectTeam(item.id)"
-            >
-              <div class="icon-wrapper">
-                <img src="@/assets/imgs/user/star-icon.svg" alt="team-icon" class="h-full w-full object-cover">
+          <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)"
+              >
+                <div class="icon-wrapper">
+                  <img src="@/assets/imgs/user/star-icon.svg" alt="team-icon" class="h-full w-full object-cover">
+                </div>
+                <div class="team-name">
+                  {{ item.name }}
+                </div>
               </div>
-              <div class="team-name">
-                {{ item.name }}
-              </div>
-            </div>
-          </TransitionGroup>
+            </TransitionGroup>
+          </div>
+          <div class="scroll-right-decor" />
         </div>
-        <div class="scroll-right-decor" />
-      </div>
+      </Transition>
     </div>
   </CompetitionLayout>
 </template>
 
 <style lang="scss" scoped>
+// 卷轴展开动画 - 变得更慢更优雅
+.scroll-expand-enter-active {
+  transition: all 1.5s cubic-bezier(0.25, 1, 0.5, 1); // 持续时间加长到 1.5s，曲线更平滑
+  overflow: hidden;
+}
+
+.scroll-expand-leave-active {
+  transition: all 0.8s ease;
+}
+
+.scroll-expand-enter-from,
+.scroll-expand-leave-to {
+  width: 0 !important;
+  opacity: 0;
+  transform: scaleX(0.9); // 稍微调整初始缩放
+}
+
+// 标题进场动画 - 更加缓慢浮现
+.fade-slide-down-enter-active {
+  transition: all 1.2s ease-out;
+}
+
+.fade-slide-down-enter-from {
+  opacity: 0;
+  transform: translateY(-40px);
+}
+
+// 列表进场动画 (使用 keyframes 实现更丝滑的渐入)
+.list-anim-enter-active {
+  animation: list-enter 2s cubic-bezier(0.23, 1, 0.32, 1) both; // both 模式确保动画前后状态保留
+  animation-delay: var(--delay);
+}
+
+@keyframes list-enter {
+  0% {
+    opacity: 0;
+    transform: translateY(80px) scale(0.9);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
 .title-section {
   position: absolute;
   top: 18%; // 使用百分比定位，适应不同比例
@@ -153,6 +216,7 @@ onMounted(() => {
   justify-content: center;
   background: url('@/assets/imgs/user/team-bg.svg') no-repeat center center;
   background-size: 100% 100%;
+  transform-origin: center; // 确保从中心展开
 
   &::before {
     left: -15px;
@@ -181,6 +245,12 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   align-items: center;
+  cursor: pointer;
+  transition: transform 0.3s;
+
+  &:hover {
+    transform: translateY(-5px);
+  }
 
   .icon-wrapper {
     width: 140px;
@@ -192,36 +262,14 @@ onMounted(() => {
     // background: url('@/assets/imgs/team-icon-bg.svg') no-repeat center center;
     background-size: contain;
     margin-bottom: 20px;
+    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
   }
 
   .team-name {
-    font-size: 1.2rem;
+    font-size: 1.5rem;
     color: #333;
     font-weight: bold;
+    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
   }
 }
-
-// Transitions
-.fade-slide-down-enter-active,
-.fade-slide-down-leave-active {
-  transition: all 0.8s ease;
-}
-
-.fade-slide-down-enter-from,
-.fade-slide-down-leave-to {
-  opacity: 0;
-  transform: translateX(-70px); // 竖排标题从左侧进入
-}
-
-.list-anim-enter-active,
-.list-anim-leave-active {
-  transition: all 0.5s cubic-bezier(0.5, 0, 0.25, 1);
-  transition-delay: var(--delay);
-}
-
-.list-anim-enter-from,
-.list-anim-leave-to {
-  opacity: 0;
-  transform: translateY(30px);
-}
 </style>