feat(user): 重构用户端竞赛流程并添加新页面

- 将原单页竞赛流程拆分为独立路由页面（首页、封面、规则、抽题、答题、图解、组别、队伍）
- 新增 Pinia store 管理竞赛状态、计时器和音频控制
- 添加 SCSS 变量文件定义主题色
- 更新路由配置和类型定义以支持新页面结构
- 重构 QuestionRenderer 组件优化样式
- 添加图标依赖并更新国际化配置
- 移动图片资源到用户目录并清理旧文件

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

@@ -0,0 +1,199 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue'
+import CompetitionLayout from '@/components/custom/user/CompetitionLayout.vue'
+import { useRouterPush } from '@/hooks/common/router'
+
+const { routerPushByKey } = useRouterPush()
+
+interface TeamItem {
+  id: number
+  name: string
+  icon: string
+}
+
+const teams = ref<TeamItem[]>([
+  { id: 1, name: '1号代表队', icon: 'star' },
+  { id: 2, name: '2号代表队', icon: 'star' },
+  { id: 3, name: '3号代表队', icon: 'star' },
+  { id: 4, name: '4号代表队', icon: 'star' },
+])
+
+const showContent = ref(false)
+
+function handleBack() {
+  routerPushByKey('user_groups')
+}
+
+function handleNext() {
+  // 进入规则页面
+  routerPushByKey('user_rules')
+}
+
+function selectTeam(_id: number) {
+  // 选择队伍逻辑
+  routerPushByKey('user_cover', { query: { id: _id.toString() } })
+}
+
+onMounted(() => {
+  setTimeout(() => {
+    showContent.value = true
+  }, 100)
+})
+</script>
+
+<template>
+  <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>
+            </div>
+          </div>
+        </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>
+              <div class="team-name">
+                {{ item.name }}
+              </div>
+            </div>
+          </TransitionGroup>
+        </div>
+        <div class="scroll-right-decor" />
+      </div>
+    </div>
+  </CompetitionLayout>
+</template>
+
+<style lang="scss" scoped>
+.title-section {
+  position: absolute;
+  top: 18%; // 使用百分比定位，适应不同比例
+  left: 7%; // 微调位置，根据 1920x1080 下的视觉效果调整
+  z-index: 10;
+
+  .scroll-bg {
+    .main-title {
+      margin: 0;
+      writing-mode: vertical-rl; // 竖排文字
+      letter-spacing: 20px;
+      text-align: center;
+      font-weight: 900;
+      font-family: 'KaiTi', 'STKaiti', serif; // 尝试使用楷体增加古风感
+    }
+  }
+}
+
+// 覆盖默认样式，因为这个页面设计比较特殊（卷轴）
+.competition-layout :deep(.main-content) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.scroll-container {
+  width: 80%;
+  height: 70%;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  // border: 1px solid red;
+}
+
+.scroll-body {
+  width: 100%;
+  height: 781px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: url('@/assets/imgs/user/team-bg.svg') no-repeat center center;
+  background-size: 100% 100%;
+
+  &::before {
+    left: -15px;
+  }
+
+  &::after {
+    right: -15px;
+  }
+}
+
+.scroll-content {
+  width: 80%;
+  height: 80%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.teams-grid {
+  display: flex;
+  gap: 60px;
+  justify-content: center;
+}
+
+.team-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .icon-wrapper {
+    width: 140px;
+    height: 140px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    // background: url('@/assets/imgs/team-icon-bg.svg') no-repeat center center;
+    background-size: contain;
+    margin-bottom: 20px;
+  }
+
+  .team-name {
+    font-size: 1.2rem;
+    color: #333;
+    font-weight: bold;
+  }
+}
+
+// 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>