feat(认知任务): 优化

.env.development

@@ -1,5 +1,5 @@
 NODE_ENV=development
 VITE_APP_PREVIEW=true
-VITE_APP_API_BASE_URL=/api
+VITE_APP_API_BASE_URL='/api'
 
 VITE_APP_API_HTTP_URL='http://49.232.26.44:8112/'

src/components/RoundSlider/index.vue

@@ -103,12 +103,31 @@ onMounted(() => {
     angle.value = calculateAngle(0, 0) // 假设初始位置在正上方
     angleDiff.value = calculateAngleDiff(angle.value)
   }
+
+  const touchArea = document.getElementById('touchArea')
+  // 监听触摸事件
+  touchArea.addEventListener('touchstart', (event) => {
+    // 记录开始触摸的位置
+    const xStart = event.touches[0].pageX
+    touchArea.addEventListener('touchmove', (event) => {
+      // 计算移动的距离
+      const xMove = event.touches[0].pageX - xStart
+      // 如果移动的距离大于0，则为左滑，小于0则为右滑
+      if (Math.abs(xMove) > 0) {
+        // 阻止页面滚动
+        event.preventDefault()
+        // 执行滑动处理
+        // console.log(`Swipe detected, distance: ${xMove}`)
+      }
+    })
+  }, false)
 })
 </script>
 
 <template>
   <div class="slider-container">
     <div
+      id="touchArea"
       ref="sliderElement"
       class="circle-slider"
       @mousedown="onMouseDown"

src/components/VoiceImp/index.vue

@@ -57,5 +57,15 @@ defineExpose({
   width: 0;
   height: 0;
   overflow: hidden;
+
+  video {
+    position: absolute;
+    width: 0;
+    height: 0;
+    opacity: 0;
+    z-index: -1;
+    left: 1000vw;
+    top: 1000vh;
+  }
 }
 </style>

src/pages/cognitiveTasks/PictureNaming/index.vue

@@ -28,6 +28,7 @@ const showCountDown = ref(true) // 显示倒计时
 const showImg = ref(true) // 显示图片
 const showText = ref(false) // 显示文字
 const musicFlag = ref(true) // 页面音乐开关
+const userCanClickFlag = ref(false) // 用户是否可以点击开关
 const showDataArr = ref<IData[]>([])
 const seconds = [3000, 2000, 1500]
 const currentIndex = ref(0) // 当前索引
@@ -68,6 +69,9 @@ function musicClick(flag: number) {
 }
 
 function choiceClick(item: string, index: number) {
+  if (!userCanClickFlag.value) {
+    return
+  }
   if (!showDataArr.value[currentIndex.value].checked) {
     showDataArr.value[currentIndex.value].checked = true
     selectiveIndex.value = index
@@ -84,11 +88,13 @@ function choiceClick(item: string, index: number) {
         VoiceImpRef.value.videoPlay('error')
       }
     }
-
     clearTimeout(textTimeout.value)
     clearTimeout(imgTimeout.value)
     clearTimeout(onceTimer.value)
     setTimeout(() => {
+      userCanClickFlag.value = false
+      showText.value = false
+      showImg.value = false
       currentIndex.value++
       nextOnce()
     }, 900)
@@ -100,19 +106,23 @@ function nextOnce() {
     onceStart = performance.now()
     selectiveIndex.value = -1
     showImg.value = true
-    showText.value = true
-    // 隐藏文字
-    textTimeout.value = setTimeout(() => {
-      showText.value = false
-    }, 3000)
 
     // 隐藏图片
     imgTimeout.value = setTimeout(() => {
       showImg.value = false
+      showText.value = true
+      userCanClickFlag.value = true
+      // 隐藏文字
+      textTimeout.value = setTimeout(() => {
+        showText.value = false
+      }, 3000)
     }, showDataArr.value[currentIndex.value].seconds)
 
     // 如果用户未点击，自动清除定时器，进入下一个试次
     onceTimer.value = setTimeout(() => {
+      userCanClickFlag.value = false
+      showText.value = false
+      showImg.value = false
       clearTimeout(textTimeout.value)
       clearTimeout(imgTimeout.value)
       clearTimeout(onceTimer.value)

src/pages/cognitiveTasks/PicturePuzzle/components/PicturePuzzleChild/index.vue

@@ -25,7 +25,7 @@ const activeIndex_svg = ref(-1)
 
 const containerWidth_left = 332
 const containerHeight_left = 325
-const containerWidth_right = 332
+const containerWidth_right = 302
 const svgNum_left = ref([3, 4, 5])
 const svgNum_right = ref([
   [5, 2, 9],
@@ -115,9 +115,16 @@ function changeImg(flag: number, index: number) {
       activeIndex_svg.value = index
     }
     else {
-      swapElements(coordinateSet.value, tempIndex, index)
-      tempIndex = -1
-      activeIndex_svg.value = -1
+      if (coordinateSet.value[tempIndex].positionDes.includes('right') && coordinateSet.value[index].positionDes.includes('right')) {
+        tempIndex = index
+        activeIndex_svg.value = index
+        return
+      }
+      else {
+        swapElements(coordinateSet.value, tempIndex, index)
+        tempIndex = -1
+        activeIndex_svg.value = -1
+      }
     }
   }
   if (flag === 0 || flag === 1) {
@@ -221,15 +228,15 @@ defineExpose({
   <section class="picture-puzzle-child-container relative h-full w-full" @click="resetIndex">
     <van-image
       :src="imgUrl(showData.tipImg)"
-      class="absolute left-[51vh] top-0 h-[21vh] w-[21vh] overflow-hidden rounded-[8px]"
+      class="absolute left-[51vh] top-0 h-[20%] w-[20%] overflow-hidden rounded-[8px]"
     />
     <div
-      class="tips-center absolute left-[74vh] top-[-46px] z999 h-[80px] w-[24vh] overflow-hidden text-center text-[24px] font-600 line-height-[104px]"
+      class="tips-center absolute right-[10px] top-[-46px] z999 h-[80px] w-[24%] overflow-hidden text-center text-[24px] font-600 line-height-[104px]"
     >
       当前难度{{ levelStrArr[showData.level! - 1] }}
     </div>
     <div
-      class="absolute left-[76vh] top-[55px] z29 h-[38px] w-[21vh] overflow-hidden text-center text-[19px] font-600 line-height-[38px]"
+      class="absolute left-[75.5%] top-[55px] z29 h-[38px] w-[21vh] overflow-hidden text-center text-[19px] font-600 line-height-[38px]"
     >
       <PPCountDown
         ref="PPCountDownRef"
@@ -263,7 +270,7 @@ defineExpose({
       :key="index"
       :src="imgUrl(item)"
       :style="coordinateSet[index]"
-      :class="{ '!border-[6px]': activeIndex_svg === index }"
+      :class="{ activeImg: activeIndex_svg === index }"
       class="z49 m-[4px] cursor-pointer overflow-hidden border-white rounded-[10px] !absolute hover:border-[4px] hover:shadow-2xl"
       @click.stop="changeImg(2, index)"
     />
@@ -284,7 +291,14 @@ defineExpose({
 <style scoped lang="less">
 .picture-puzzle-child-container {
   :deep(.van-image) {
+    &.activeImg {
+      scale: 1.06;
+      border: 4px solid white;
+      box-shadow: 0 0 10px #134fa4;
+    }
+
     transition:
+      scale 0.1s linear,
       border 0.1s linear,
       left 0.35s ease-in-out,
       top 0.35s ease-in-out,

src/pages/cognitiveTasks/PicturePuzzle/index.vue

@@ -10,7 +10,7 @@ import { showSuccessToast } from 'vant'
 import Topics from './Topics.json'
 import PicturePuzzleChild from './components/PicturePuzzleChild/index.vue'
 import type { IGameBaseData } from '@/typing'
-import { formatSeconds } from '@/utils'
+import { formatSeconds, isAndroidOrIos } from '@/utils'
 import GameAPI, { type GameResultVO, type GameVO } from '@/api/game'
 
 const router = useRouter()
@@ -133,13 +133,16 @@ async function exec() {
   gameStartTime = performance.now()
 }
 
+const windowHeight = ref(0)
+const userAgent = isAndroidOrIos()
 onMounted(() => {
+  windowHeight.value = window.innerHeight
   exec()
 })
 </script>
 
 <template>
-  <section class="app-container">
+  <section class="app-container" :style="{ width: userAgent === 'ios' ? '100vh' : `${windowHeight}px` }">
     <van-nav-bar class="self-nav-bar" :title="subjectInfo.name" left-arrow @click-left="router.go(-1)" />
     <div class="h-full w-full flex flex-col items-center text-white">
       <PicturePuzzleChild ref="PicturePuzzleChildRef" @begin-loop="setChildData" @end-loop="endLoop" />
@@ -151,11 +154,12 @@ onMounted(() => {
 .app-container {
   transform: rotate(90deg);
   transform-origin: right top;
-  width: 100vh; /* 与高度相同 */
+  width: 100vh; /* 适应横屏的高度 */
   overflow-x: hidden;
   position: absolute;
   top: 100%;
   right: 0;
+
   background-image: url('/static/image/game/bg-puzzle.png');
   background-size: 100% 100%;
   background-repeat: no-repeat;

src/pages/cognitiveTasks/cocos/index.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+/*
+ * 组件名: cocos
+ * 组件用途: cocos外框
+ * 创建日期: 2024/8/21
+ * 编写者: JutarryWu
+ */
+const userId = sessionStorage.getItem('userId')
+const src = `http://49.232.26.44:8213/?userId=${userId}`
+async function exec() {
+}
+
+onMounted(() => {
+  exec()
+})
+</script>
+
+<template>
+  <section class="app-container">
+    <iframe
+      :src="src"
+      width="100%"
+      height="100%"
+      frameborder="0"
+      scrolling="no"
+    />
+  </section>
+</template>
+
+<style scoped lang="less">
+.app-container {
+}
+</style>

src/pages/cognitiveTasks/main/index.vue

@@ -16,14 +16,15 @@ const userId = ref('')
 const subjectInfo = ref<GameVO>({})
 const urlList = [
   '/cognitiveTasks/spatialOrientationAbility',
-  '/cognitiveTasks/spatialOrientationAbility',
-  '',
+  '/cognitiveTasks/ContinueAddition',
+  '/cognitiveTasks/cocos',
   '/cognitiveTasks/BreadthTraining',
   '/cognitiveTasks/PicturePuzzle',
   '/cognitiveTasks/PictureNaming',
 ]
 
 function startTest() {
+  // console.log(urlList[Number(taskId.value) - 1])
   router.push(urlList[Number(taskId.value) - 1])
 }
 

src/styles/app.less

@@ -4,10 +4,13 @@
   box-sizing: border-box;
 }
 
-html {
+html,
+body {
   background: var(--van-gray-1);
   color-scheme: light;
   overflow: hidden;
+  width: 100%;
+  height: 100%;
 }
 
 html.dark {
@@ -17,11 +20,14 @@ html.dark {
 
 #app {
   // Dynamic Viewport Units
-  height: 100dvh;
+  width: 100%;
+  height: 100%;
   position: relative;
   overflow: hidden;
 
   .van-config-provider {
+    width: 100%;
+    height: 100%;
     overflow: hidden;
   }
 }
@@ -54,8 +60,8 @@ html.dark {
 }
 
 .app-container {
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
   margin: 0;
   padding: 0;
   overflow: hidden;

src/typed-router.d.ts

@@ -23,6 +23,7 @@ declare module 'vue-router/auto-routes' {
     'charts': RouteRecordInfo<'charts', '/charts', Record<never, never>, Record<never, never>>,
     '/cognitiveTasks/BreadthTraining/': RouteRecordInfo<'/cognitiveTasks/BreadthTraining/', '/cognitiveTasks/BreadthTraining', Record<never, never>, Record<never, never>>,
     '/cognitiveTasks/BreadthTraining/BTRandomPentagram': RouteRecordInfo<'/cognitiveTasks/BreadthTraining/BTRandomPentagram', '/cognitiveTasks/BreadthTraining/BTRandomPentagram', Record<never, never>, Record<never, never>>,
+    '/cognitiveTasks/cocos/': RouteRecordInfo<'/cognitiveTasks/cocos/', '/cognitiveTasks/cocos', Record<never, never>, Record<never, never>>,
     '/cognitiveTasks/ContinueAddition/': RouteRecordInfo<'/cognitiveTasks/ContinueAddition/', '/cognitiveTasks/ContinueAddition', Record<never, never>, Record<never, never>>,
     '/cognitiveTasks/main/': RouteRecordInfo<'/cognitiveTasks/main/', '/cognitiveTasks/main', Record<never, never>, Record<never, never>>,
     '/cognitiveTasks/PictureNaming/': RouteRecordInfo<'/cognitiveTasks/PictureNaming/', '/cognitiveTasks/PictureNaming', Record<never, never>, Record<never, never>>,

src/utils/index.ts

@@ -34,7 +34,21 @@ function formatSeconds(fmtSeconds: number) {
   return `${hours.toString().padStart(2, '0')}时 ${minutes.toString().padStart(2, '0')}分 ${seconds.toString().padStart(2, '0')}秒`
 }
 
+function isAndroidOrIos(): 'android' | 'ios' | 'unknown' {
+  const userAgent = navigator.userAgent.toLowerCase()
+
+  if (/iphone|ipad|ipod/.test(userAgent)) {
+    return 'ios'
+  }
+  else if (/android/.test(userAgent)) {
+    return 'android'
+  }
+
+  return 'unknown'
+}
+
 export {
   generateRandomNumbers,
   formatSeconds,
+  isAndroidOrIos,
 }