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

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

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

@@ -0,0 +1,80 @@
+<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()
+
+const activityName = ref('规则介绍')
+const rulesContent = ref('')
+
+const mockContent = `<p>本轮环节共有4道题目,分别是“<strong>诗词理解</strong>”、“<strong>联想对对碰</strong>”、“<strong>逆向接诗句</strong>”、“<strong>情景猜诗句</strong>”</p><p>阅读完题目介绍，主持人点击“<strong>开始作答</strong>”后均在答题本田字格上作答</p><p><br></p><p> “<strong>诗词理解</strong>” 根据题目选择正确答案</p><p> “<strong>联想对对碰</strong>” 根据关键信息写出完整诗句</p><p> “<strong>逆向接诗句</strong>” 根据关键信息写出关联诗句</p><p> “<strong>情景猜诗句</strong>” 根据情景写出关联诗句</p><p><br></p><p><span style=\"background-color: rgb(89, 191, 192);\">答题倒计时结束后，界面自动跳转到下一题</span></p>
+`
+
+onMounted(() => {
+  setTimeout(() => {
+    rulesContent.value = mockContent
+  }, 100)
+})
+
+function handleBack() {
+  routerPushByKey('user_cover')
+}
+
+function handleNext() {
+  routerPushByKey('user_draw')
+}
+</script>
+
+<template>
+  <CompetitionLayout
+    :show-back="true"
+    :show-next="true"
+    :title="activityName"
+    @back="handleBack"
+    @next="handleNext"
+  >
+    <div class="items-flex-start h-full w-full flex justify-center font-sans">
+      <div class="rules-content-wrapper">
+        <div class="rules-container" v-html="rulesContent" />
+      </div>
+    </div>
+  </CompetitionLayout>
+</template>
+
+<style lang="scss" scoped>
+@import '@/styles/scss/variables.scss';
+
+.rules-content-wrapper {
+  width: 100%;
+  max-height: 80%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: $text-color;
+
+  :deep(.rules-container) {
+    margin-top: 10px;
+    font-size: 28px;
+    line-height: 2;
+    // color: #5d4037; // Dark brown/grey text
+
+    .intro-text {
+      margin-bottom: 30px;
+    }
+
+    .rules-list {
+      margin: 40px 0;
+
+      p {
+        margin: 15px 0;
+      }
+    }
+
+    .footer-text {
+      margin-top: 40px;
+      opacity: 0.8;
+    }
+  }
+}
+</style>