feat: 优化用户界面组件与调整布局样式

- 新增田字格组件用于汉字书写练习
- 调整模板详情页的生成参数和页面编号
- 优化用户主页轮播图和游戏页布局
- 修复答题结果页图片显示和状态切换问题
- 移除卡片悬停阴影并优化背景图片显示
- 更新状态管理注释和类型声明

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

@@ -25,6 +25,11 @@ const question = ref<Api.Competition.CurrentQuestionResponse | null>(null)
 const flippedId = ref<number | null>(null)
 const audioController = new AudioController()
 
+/**
+ * 初始化题目
+ * 1. 从服务器获取当前题目
+ * 2. 存储题目信息到全局状态
+ */
 async function initQuestions() {
   if (!activityId.value)
     return
@@ -42,14 +47,9 @@ async function initQuestions() {
       window?.$message?.error(error.message)
       return
     }
-    // 直接使用返回的对象数据，不进行数组转换
     if (outlineData && outlineData.data) {
-      // const object = {
-      //   ...outlineData.data?.Activity_Question || {},
-      //   ...outlineData.data?.QuestionList || {},
-      //   TeamGroup_QuestionID: outlineData.data?.TeamGroup_QuestionID || 0,
-      // }
       question.value = outlineData.data as unknown as Api.Competition.CurrentQuestionResponse
+
       store.setCurrentQuestionMainInfo(question.value)
     }
   }
@@ -66,6 +66,9 @@ onMounted(() => {
   initQuestions()
 })
 
+/**
+ * 根据抽题页的大纲 id 随机获取的当前题目基础提纲信息下面的题目信息，跳转至游戏页面
+ */
 async function handleCardClick(item: Api.Competition.CurrentQuestionResponse) {
   const { ID } = item?.Activity_Question || {}
 
@@ -128,10 +131,7 @@ const questionMainTitle = computed(() => question.value?.QuestionList?.Name || '
 </script>
 
 <template>
-  <CompetitionLayout
-    :show-back="true" :show-next="false" :title="questionMainTitle || '抽题'"
-    @back="handleBack"
-  >
+  <CompetitionLayout :show-back="true" :show-next="false" :title="questionMainTitle || '抽题'" @back="handleBack">
     <div class="h-full w-full flex flex-col items-center pt-10 font-sans">
       <!-- <div v-if="question" class="mb-10 max-w-4xl text-center">
         <div class="text-2xl text-gray-800 font-medium leading-relaxed tracking-wide">