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

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

apps/admin/src/views/user/modules/IntroComp.vue

@@ -7,24 +7,6 @@ defineEmits(['back', 'draw'])
 
 <template>
   <div class="h-full w-full flex flex-col items-center pt-44">
-    <!-- 标题卷轴 -->
-    <div class="relative mb-16">
-      <div class="relative z-10 h-20 min-w-[300px] flex items-center justify-center border-2 border-orange-200 rounded-lg from-orange-100 to-orange-50 bg-gradient-to-b px-12 shadow-lg">
-        <div class="absolute top-1/2 h-24 w-6 border-r-4 border-yellow-600 rounded-l-md bg-teal-700 shadow-md -left-3 -translate-y-1/2">
-          <div class="absolute left-1 top-2 h-2 w-full rounded-full bg-teal-600/50" />
-          <div class="absolute bottom-2 left-1 h-2 w-full rounded-full bg-teal-600/50" />
-        </div>
-        <div class="absolute top-1/2 h-24 w-6 border-l-4 border-yellow-600 rounded-r-md bg-teal-700 shadow-md -right-3 -translate-y-1/2">
-          <div class="absolute right-1 top-2 h-2 w-full rounded-full bg-teal-600/50" />
-          <div class="absolute bottom-2 right-1 h-2 w-full rounded-full bg-teal-600/50" />
-        </div>
-        <h1 class="text-3xl text-gray-800 font-bold tracking-widest font-serif">
-          {{ node.moduleName }}
-        </h1>
-      </div>
-    </div>
-
-    <!-- 规则描述 -->
     <div class="mb-20 max-w-4xl text-center">
       <div class="text-2xl text-gray-800 font-medium leading-relaxed tracking-wide">
         {{ node.description }}
@@ -40,24 +22,5 @@ defineEmits(['back', 'draw'])
         <span>抽题</span>
       </button>
     </div>
-
-    <!-- 底部按钮 -->
-    <div class="fixed bottom-12 left-12">
-      <button
-        class="border-2 border-red-400 rounded-full bg-white px-10 py-2 text-xl text-red-500 font-bold shadow-md transition hover:bg-red-50"
-        @click="$emit('back')"
-      >
-        返回
-      </button>
-    </div>
-
-    <div class="fixed bottom-12 right-12">
-      <button
-        class="rounded-full from-red-400 to-red-500 bg-gradient-to-r px-10 py-2 text-xl text-white font-bold shadow-lg transition hover:from-red-500 hover:to-red-600"
-        @click="$emit('draw')"
-      >
-        开始答题
-      </button>
-    </div>
   </div>
 </template>

apps/admin/src/views/user/modules/QuestionRenderer.vue

@@ -16,10 +16,10 @@ const pinyinChars = computed(() => {
 </script>
 
 <template>
-  <div class="min-h-[400px] w-full flex items-center justify-center p-10">
+  <div class="min-h-[400px] w-full flex items-center justify-center p-6">
     <!-- 模板A: 汉字听写-提示 (拼音+提示) -->
     <div v-if="template === 'TEMPLATE_DICTATION_HINT'" class="text-center">
-      <div class="mb-6 inline-block text-[120px] text-red-500 font-bold leading-none" style="text-shadow: 2px 2px 4px rgba(0,0,0,0.1);">
+      <div class="mb-6 inline-block text-5xl text-red-500 font-bold leading-none" style="text-shadow: 2px 2px 4px rgba(0,0,0,0.1);">
         “{{ content.title }}”
       </div>
       <!-- <div class="text-4xl text-gray-800 font-bold">
@@ -91,7 +91,7 @@ const pinyinChars = computed(() => {
 
     <!-- 模板G: 诗词理解-选择题 (通用选择题模板) -->
     <div v-else-if="template === 'TEMPLATE_POETRY_MULTIPLE_CHOICE'" class="w-full flex flex-col items-center">
-      <div class="mb-8 text-3xl text-gray-800 font-bold leading-relaxed">
+      <div class="mb-1 text-2xl text-gray-800 font-bold leading-relaxed">
         {{ content.title }}
       </div>
       <div class="options-container">
@@ -153,8 +153,8 @@ const pinyinChars = computed(() => {
   margin-bottom: 3rem;
 
   .option-card {
-    width: 320px;
-    height: 260px;
+    // width: 320px;
+    // height: 260px;
   }
 }
 
@@ -165,7 +165,6 @@ const pinyinChars = computed(() => {
   justify-content: center;
   border: 2px solid transparent;
   border-radius: 0.75rem; /* rounded-xl */
-  background-color: #f9fafb; /* bg-gray-50 */
   padding: 1rem; /* p-4 */
   transition: all 0.3s;
 
@@ -188,8 +187,8 @@ const pinyinChars = computed(() => {
 }
 
 .option-image-wrapper {
-  margin-bottom: 1rem;
-  height: 9rem;
+  margin-bottom: 0.8rem;
+  height: 6rem;
   width: 100%;
   display: flex;
   align-items: center;