feat(认知任务): 完成后端联调API搭建、完成main页面优化

src/api/game.ts

@@ -0,0 +1,71 @@
+import request from '@/utils/request'
+import type { ResponseBody } from '@/api/typing'
+
+const GAME_BASE_URL = '/game'
+
+class GameAPI {
+  /**
+   * 通过ID查询游戏信息
+   *
+   * @returns 游戏名称、编码等
+   */
+  static findById(id: string) {
+    return request<any, ResponseBody<GameVO>>({
+      url: `${GAME_BASE_URL}/findById`,
+      method: 'get',
+      params: { id },
+    })
+  }
+
+  /**
+   * 添加游戏
+   *
+   * @param data 游戏表单数据
+   */
+  // static add(data: GameVO) {
+  //   return request({
+  //     url: `${GAME_BASE_URL}/save`,
+  //     method: 'post',
+  //     data: data
+  //   })
+  // }
+
+  /**
+   * 修改游戏
+   *
+   * @param data 游戏表单数据
+   */
+  // static update(data: GameVO) {
+  //   return request({
+  //     url: `${GAME_BASE_URL}/update`,
+  //     method: 'put',
+  //     data: data
+  //   })
+  // }
+
+  /**
+   * 删除游戏
+   *
+   * @param id 游戏Id
+   */
+  // static deleteById(id: string) {
+  //   return request({
+  //     url: `${GAME_BASE_URL}/delete/${id}`,
+  //     method: 'delete'
+  //   })
+  // }
+}
+
+export default GameAPI
+
+/** 游戏信息 */
+export interface GameVO {
+  /** 游戏ID */
+  id?: number | string
+  /** 游戏名称 */
+  name?: string
+  /** 游戏编码 */
+  code?: string
+  /** 游戏简介 */
+  intro?: string
+}

src/components/RoundSlider/index.vue

@@ -127,7 +127,7 @@ onMounted(() => {
         <span>{{ props.topName }}</span>
       </div>
       <div class="move-point" :style="{ transform: `translateX(-50%) rotate(${angle}deg)` }">
-        <span class="absolute left-26px block text-[16px] text-[#F87171]">{{ props.moveName }}</span>
+        <span class="absolute left-26px block w-[180px] text-[16px] text-[#F87171]">{{ props.moveName }}</span>
       </div>
       <img
         src="@/assets/images/task/spatialOrientationAbility/icon_pointer.png"

src/pages/cognitiveTasks/main/index.vue

@@ -5,19 +5,35 @@
  * 创建日期: 2024/8/16
  * 编写者: JutarryWu
  */
+import GameAPI, { type GameVO } from '@/api/game'
+
 const router = useRouter()
+const route = useRoute()
 
-const subjectInfo = ref({
-  name: '空间定向训练',
-  id: 1,
-})
-const urlList = ['/cognitiveTasks/spatialOrientationAbility']
+const taskId = ref('')
+const userId = ref('')
+
+const subjectInfo = ref<GameVO>({})
+const urlList = [
+  '/cognitiveTasks/spatialOrientationAbility',
+  '/cognitiveTasks/spatialOrientationAbility',
+  '',
+  '/cognitiveTasks/BreadthTraining',
+  '/cognitiveTasks/spatialOrientationAbility',
+]
 
 function startTest() {
-  router.push(urlList[subjectInfo.value.id - 1])
+  router.push(urlList[Number(subjectInfo.value.id) - 1])
 }
 
-async function exec() {}
+async function exec() {
+  taskId.value = route.query.taskId as string
+  userId.value = route.query.userId as string
+  GameAPI.findById(taskId.value).then((res) => {
+    subjectInfo.value = res.data
+    sessionStorage.setItem('userId', res.data.id.toString())
+  })
+}
 
 onMounted(() => {
   exec()
@@ -38,7 +54,7 @@ onMounted(() => {
         操作提示：
       </div>
       <div class="text-[15px] text-[#999999] line-height-[20px]">
-        空间定向是测试者在所处环境中根据参照点或者绝对坐标系统定位正确辨识方向的知觉反应，要求主体编码并记住环境中不同地点的相对位置，然后利用自身的认知结构和空间表征对自己所在的空间的感知觉线索进行迅速而准确的分析和加工，从而对自己姿态、位置和运动做出判断。
+        {{ subjectInfo.intro }}
       </div>
     </div>
     <van-button type="primary" color="#00AABD" class="bottom-block-btn" @click="startTest">
@@ -49,6 +65,7 @@ onMounted(() => {
 
 <style scoped lang="less">
 .app-container {
+  background-color: #f0f6f6 !important;
   background-image: url('@/assets/images/bg-main.png');
   background-size: cover;
   background-repeat: no-repeat;

src/pages/cognitiveTasks/spatialOrientationAbility/index.vue

@@ -19,6 +19,8 @@ import Url_trafficLight from '@/assets/images/task/spatialOrientationAbility/tra
 import Url_stop from '@/assets/images/task/spatialOrientationAbility/stop.png'
 import Url_house from '@/assets/images/task/spatialOrientationAbility/house.png'
 
+const router = useRouter()
+
 interface IData {
   level?: number
   onceStartTime?: string
@@ -299,7 +301,7 @@ onMounted(() => {
 
 <template>
   <section class="app-container">
-    <van-nav-bar class="self-nav-bar" :title="subjectInfo.name" />
+    <van-nav-bar class="self-nav-bar" :title="subjectInfo.name" left-arrow @click-left="router.go(-1)" />
     <count-down v-if="showCountDown" :time="5" @end-count-down="exec" />
     <div v-if="!showCountDown && !showSubmit" class="opt-bg-area absolute-center h-[370px] w-[350px] rounded-[8px] bg-[#FFFFFF8B] shadow-lg">
       <div

src/styles/app.less

@@ -100,6 +100,10 @@ html.dark {
         font-size: 19px;
         color: #191919;
       }
+
+      .van-icon {
+        color: #191919;
+      }
     }
   }
 

vite.config.ts

@@ -20,7 +20,12 @@ export default ({ mode }: ConfigEnv): UserConfig => {
       port: 3000,
       proxy: {
         '/api': {
-          target: '',
+          target: 'http://192.168.188.239:8107/',
+          rewrite: path => path.replace(new RegExp(`^${env.VITE_APP_API_BASE_URL}`), ''),
+          bypass(req, res, options: any) {
+            const realUrl = options.target + (options.rewrite ? options.rewrite(req.url) : '')
+            res.setHeader('A-Real-Url', realUrl) // 添加响应标头(A-Real-Url为自定义命名)，在浏览器中显示
+          },
           ws: false,
           changeOrigin: true,
         },