fix(合并冲突): 合并冲突代码

src/App.vue

@@ -6,7 +6,7 @@ import useRouteTransitionNameStore from '@/stores/modules/routeTransitionName'
 import useAutoThemeSwitcher from '@/hooks/useAutoThemeSwitcher'
 
 useHead({
-  title: 'Vue3 Vant Mobile',
+  title: '失眠训练系统',
   meta: [
     {
       name: 'description',

src/components.d.ts

@@ -16,8 +16,19 @@ declare module 'vue' {
     RouterView: typeof import('vue-router')['RouterView']
     SvgIcon: typeof import('./components/SvgIcon.vue')['default']
     TabBar: typeof import('./components/TabBar.vue')['default']
+    VanButton: typeof import('vant/es')['Button']
+    VanCell: typeof import('vant/es')['Cell']
+    VanCellGroup: typeof import('vant/es')['CellGroup']
     VanConfigProvider: typeof import('vant/es')['ConfigProvider']
+    VanEmpty: typeof import('vant/es')['Empty']
+    VanIcon: typeof import('vant/es')['Icon']
+    VanImage: typeof import('vant/es')['Image']
     VanNavBar: typeof import('vant/es')['NavBar']
+    VanPicker: typeof import('vant/es')['Picker']
+    VanPopup: typeof import('vant/es')['Popup']
+    VanSpace: typeof import('vant/es')['Space']
+    VanStepper: typeof import('vant/es')['Stepper']
+    VanSwitch: typeof import('vant/es')['Switch']
     VanTabbar: typeof import('vant/es')['Tabbar']
     VanTabbarItem: typeof import('vant/es')['TabbarItem']
     VoiceImp: typeof import('./components/VoiceImp/index.vue')['default']

src/components/VoiceImp/index.vue

@@ -9,10 +9,12 @@ const VoiceUrlObj: Record<string, string> = {
   click: '/static/voice/click.mp3',
   right: '/static/voice/right.mp3',
   error: '/static/voice/error.mp3',
+  bg: '/static/voice/bg-music.mp3',
 }
 const VideoRef_1 = ref<HTMLVideoElement>()
 const VideoRef_2 = ref<HTMLVideoElement>()
 const VideoRef_3 = ref<HTMLVideoElement>()
+const VideoRef_bg = ref<HTMLVideoElement>()
 
 function videoPlay(type: string = 'click') {
   if (type === 'click') {
@@ -24,10 +26,20 @@ function videoPlay(type: string = 'click') {
   else if (type === 'error') {
     VideoRef_3.value?.play()
   }
+  else if (type === 'bg') {
+    VideoRef_bg.value?.play()
+  }
+}
+
+function videoPause(type: string = 'bg') {
+  if (type === 'bg') {
+    VideoRef_bg.value?.pause()
+  }
 }
 
 defineExpose({
   videoPlay,
+  videoPause,
 })
 </script>
 
@@ -36,6 +48,7 @@ defineExpose({
     <video ref="VideoRef_1" :src="VoiceUrlObj.click" />
     <video ref="VideoRef_2" :src="VoiceUrlObj.right" />
     <video ref="VideoRef_3" :src="VoiceUrlObj.error" />
+    <video ref="VideoRef_bg" :src="VoiceUrlObj.bg" loop />
   </section>
 </template>
 

src/components/WuIsCorrect/index.vue

@@ -12,10 +12,10 @@ const props = defineProps({
 <template>
   <div class="flex-center absolute bottom-[6px] right-[6px]">
     <transition name="el-fade-in">
-      <SvgIcon v-if="props.correct" name="correct" class="text-[32px]" />
+      <SvgIcon v-if="props.correct" name="correct" class="text-[34px]" />
     </transition>
     <transition name="el-fade-in">
-      <SvgIcon v-if="!props.correct" name="wrong" class="text-[32px]" />
+      <SvgIcon v-if="!props.correct" name="wrong" class="text-[34px]" />
     </transition>
   </div>
 </template>

src/pages/cognitiveTasks/BreadthTraining/index.vue

@@ -19,7 +19,15 @@ interface IMainData {
   dataList: any[]
 }
 
-const subjectInfo = ref<GameVO>({})
+interface IMainChildData {
+  count?: number
+  score?: number
+  extraScore?: number
+}
+
+const subjectInfo = ref<GameVO>({
+  name: '广度训练',
+})
 
 let selectArray: any[] = reactive([])
 const BTRandomPentagramRef = ref()
@@ -53,8 +61,6 @@ const gameData: GameResultVO = {
 function generateBaseData() {
   // 生成选项组
   const selectDataList = [
-    // [3, 4, 5, 6, 7], [3, 4, 5, 6, 7], ...,
-    // [4, 5, 6, 7, 8], [4, 5, 6, 7, 8], ...,
     ...Array.from({ length: 10 }).fill([3, 4, 5, 6, 7]),
     ...Array.from({ length: 10 }).fill([4, 5, 6, 7, 8]),
     ...Array.from({ length: 10 }).fill([5, 6, 7, 8, 9]),
@@ -82,10 +88,10 @@ function generateBaseData() {
     ...Array.from({ length: 10 }).fill({ count: 12, score: 80, extraScore: 0 }),
   ]
 
-  mainData.dataList = baseDataList.map((item, index) => {
+  mainData.dataList = baseDataList.map((item: IMainChildData, index) => {
     return {
       index,
-      ...item as object,
+      ...item,
       ...{ reactionTime: 0, beginTime: 0, endTime: 0, choice: '' },
     }
   })

src/pages/cognitiveTasks/PictureNaming/Topics.json

@@ -0,0 +1,47 @@
+[
+  ["萝", "芹", "土", "蘑"],
+  ["橙", "苹", "草", "梨"],
+  ["桃", "苹", "草", "梨"],
+  ["豆", "白", "茄", "萝"],
+  ["茄", "豆", "白", "萝"],
+  ["黄", "南", "辣", "西"],
+  ["南", "黄", "辣", "西"],
+  ["芒", "榴", "苹", "菠"],
+  ["辣", "南", "黄", "西"],
+  ["西", "辣", "南", "黄"],
+  ["西", "南", "冬", "黄"],
+  ["蘑", "萝", "芹", "土"],
+  ["梨", "桃", "苹", "草"],
+  ["香", "桃", "苹", "草"],
+  ["樱", "桃", "苹", "草"],
+  ["菠", "芒", "榴", "苹"],
+  ["石", "芒", "菠", "苹"],
+  ["电", "汽", "卡", "拖"],
+  ["汽", "电", "卡", "拖"],
+  ["蓝", "排", "足", "乒"],
+  ["苹", "菠", "芒", "榴"],
+  ["狮", "猴", "狐", "猫"],
+  ["猪", "牛", "马", "鹿"],
+  ["熊", "猴", "狐", "猫"],
+  ["虎", "狐", "猫", "熊"],
+  ["狗", "狐", "猫", "猪"],
+  ["猫", "狐", "羊", "猪"],
+  ["鳄", "狐", "羊", "猪"],
+  ["燕", "鳄", "羊", "猪"],
+  ["象", "鹿", "鹦", "兔"],
+  ["蜜", "鸭", "斑", "鸡"],
+  ["鸭", "蜜", "斑", "鸡"],
+  ["斑", "蜜", "鸭", "鸡"],
+  ["鸡", "蜜", "鸭", "斑"],
+  ["兔", "象", "鹿", "鹦"],
+  ["鱼", "珊", "乌", "鹰"],
+  ["羊", "马", "牛", "鹿"],
+  ["马", "羊", "牛", "鹿"],
+  ["牛", "羊", "马", "鹿"],
+  ["鹿", "羊", "马", "牛"],
+  ["青", "河", "狐", "熊"],
+  ["河", "青", "狐", "熊"],
+  ["狐", "青", "河", "熊"],
+  ["熊", "青", "河", "狐"],
+  ["恐", "青", "河", "狐"]
+]

src/pages/cognitiveTasks/PictureNaming/index.vue

@@ -0,0 +1,274 @@
+<script setup lang="ts">
+/*
+ * 组件名: PictureNaming
+ * 组件用途: 图片命名
+ * 创建日期: 2024/8/20
+ * 编写者: JutarryWu
+ */
+import { shuffle } from 'lodash-es'
+import { showSuccessToast } from 'vant'
+import Topics from './Topics.json'
+import GameAPI, { type GameResultVO, type GameVO } from '@/api/game'
+
+interface IData {
+  choices?: string[]
+  img?: string
+  seconds?: number
+  correct?: string
+  isRight?: boolean
+  checked?: boolean
+  score?: number
+  reactionTime?: number
+}
+
+const router = useRouter()
+const VoiceImpRef = ref()
+const subjectInfo = ref<GameVO>({})
+const showCountDown = ref(true) // 显示倒计时
+const showImg = ref(true) // 显示图片
+const showText = ref(false) // 显示文字
+const musicFlag = ref(true) // 页面音乐开关
+const showDataArr = ref<IData[]>([])
+const seconds = [3000, 2000, 1500]
+const currentIndex = ref(0) // 当前索引
+const selectiveIndex = ref(-1) //  用户选择的索引
+const textTimeout = ref<NodeJS.Timeout | null>(null)
+const imgTimeout = ref<NodeJS.Timeout | null>(null)
+const onceTimer = ref<NodeJS.Timeout | null>(null)
+let onceStart = 0 // 试次开始时间
+
+function initData() {
+  for (let i = 0; i < 3; i++) {
+    const tempArr = []
+    for (let j = 0; j < 15; j++) {
+      tempArr.push({
+        choices: shuffle(Topics[i * 15 + j]),
+        img: `/static/image/game/name/${i * 15 + j}.png`,
+        seconds: seconds[i], // 图片显示时长
+        correct: Topics[i * 15 + j][0], // 正确答案
+        isRight: false, // 是否正确
+        score: 0, // 正确： 1， 错误：0
+        reactionTime: 4000, // 反应时间(ms)
+        checked: false, // 是否选过
+      })
+    }
+    showDataArr.value = [...showDataArr.value, ...shuffle(tempArr)]
+  }
+}
+
+function musicClick(flag: number) {
+  musicFlag.value = !musicFlag.value
+  if (musicFlag.value) {
+    VoiceImpRef.value.videoPlay('click')
+    VoiceImpRef.value.videoPlay('bg', flag)
+  }
+  else {
+    VoiceImpRef.value.videoPause('bg')
+  }
+}
+
+function choiceClick(item: string, index: number) {
+  if (!showDataArr.value[currentIndex.value].checked) {
+    showDataArr.value[currentIndex.value].checked = true
+    selectiveIndex.value = index
+    if (item === showDataArr.value[currentIndex.value].correct) {
+      showDataArr.value[currentIndex.value].isRight = true
+      showDataArr.value[currentIndex.value].score = 1
+      showDataArr.value[currentIndex.value].reactionTime = Number((performance.now() - onceStart).toFixed(3))
+      if (musicFlag.value) {
+        VoiceImpRef.value.videoPlay('right')
+      }
+    }
+    else {
+      if (musicFlag.value) {
+        VoiceImpRef.value.videoPlay('error')
+      }
+    }
+
+    clearTimeout(textTimeout.value)
+    clearTimeout(imgTimeout.value)
+    clearTimeout(onceTimer.value)
+    setTimeout(() => {
+      currentIndex.value++
+      nextOnce()
+    }, 900)
+  }
+}
+
+function nextOnce() {
+  if (currentIndex.value < showDataArr.value.length) {
+    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
+    }, showDataArr.value[currentIndex.value].seconds)
+
+    // 如果用户未点击，自动清除定时器，进入下一个试次
+    onceTimer.value = setTimeout(() => {
+      clearTimeout(textTimeout.value)
+      clearTimeout(imgTimeout.value)
+      clearTimeout(onceTimer.value)
+      currentIndex.value++
+      nextOnce()
+    }, 7000)
+  }
+  else {
+    submit()
+  }
+}
+
+function submit() {
+  let correctNum = 0
+  let wrongNum = 0
+  let accuracy = 0
+  let totalScore = 0
+  let averageReactionTimeForCorrect = 0
+  showDataArr.value.forEach((item) => {
+    if (item.isRight) {
+      correctNum++
+      totalScore++
+      averageReactionTimeForCorrect += item.reactionTime
+    }
+  })
+  wrongNum = 45 - correctNum
+  accuracy = Number((correctNum / 45).toFixed(4))
+  averageReactionTimeForCorrect = Number((averageReactionTimeForCorrect / correctNum).toFixed(3))
+
+  const data: GameResultVO = {
+    finish: '1',
+    gameId: subjectInfo.value.id,
+    gameName: subjectInfo.value.name,
+    paramList: [
+      {
+        code: 'correctNum',
+        name: '正确数',
+        value: correctNum,
+      },
+      {
+        code: 'wrongNum',
+        name: '错误数',
+        value: wrongNum,
+      },
+      {
+        code: 'accuracy',
+        name: '正确率',
+        value: accuracy,
+      },
+      {
+        code: 'totalScore',
+        name: '得分',
+        value: totalScore,
+      },
+      {
+        code: 'averageReactionTimeForCorrect',
+        name: '正确点击的反应时长均值',
+        value: `${averageReactionTimeForCorrect}ms`,
+      },
+    ],
+    userId: sessionStorage.getItem('userId'),
+  }
+  GameAPI.add(data).then(() => {
+    showSuccessToast({
+      className: 'rotate-toast',
+      message: '本次训练已结束',
+    })
+    setTimeout(() => {
+      router.go(-1)
+    }, 1300)
+  })
+}
+
+function exec() {
+  showCountDown.value = false
+  nextOnce()
+}
+
+onMounted(() => {
+  const temp = sessionStorage.getItem('subjectInfo')
+  if (temp) {
+    subjectInfo.value = JSON.parse(temp)
+  }
+  if (musicFlag.value) {
+    VoiceImpRef.value.videoPlay('bg')
+  }
+  initData()
+})
+
+onBeforeUnmount(() => {
+  clearInterval(onceTimer.value)
+})
+</script>
+
+<template>
+  <section class="app-container">
+    <van-nav-bar class="self-nav-bar" :title="subjectInfo.name" left-arrow @click-left="router.go(-1)">
+      <template #right>
+        <img v-if="musicFlag" src="/static/image/game/video/play.png" alt="" class="h-[34px] w-[34px]" @click="musicClick(0)">
+        <img v-else src="/static/image/game/video/stop.png" alt="" class="h-[34px] w-[34px]" @click="musicClick(1)">
+      </template>
+    </van-nav-bar>
+    <count-down v-if="showCountDown" :time="5" color="#fff" @end-count-down="exec" />
+    <VoiceImp ref="VoiceImpRef" />
+
+    <div v-if="!showCountDown && currentIndex < showDataArr.length" class="absolute-center flex-column h-[78%] w-[100%]">
+      <div class="center-div flex-center ml-[4%] h-[390px] w-[92%]">
+        <img v-if="showImg" :src="showDataArr[currentIndex].img" alt="" class="h-[50%] w-[58%]">
+      </div>
+      <div class="mt-[20px] h-[80px] w-[100%] flex-row justify-around text-center text-[42px] text-[#3A3A3AE2] line-height-[80px]">
+        <div
+          v-for="(item, index) in showDataArr[currentIndex].choices"
+          :key="index"
+          class="text-area relative h-[80px] w-[80px] rounded-[20px] text-center line-height-[80px] shadow-lg"
+          @click="choiceClick(item, index)"
+        >
+          <span v-if="showText">{{ item }}</span>
+          <WuIsCorrect
+            v-if="selectiveIndex === index && showDataArr[currentIndex].checked"
+            :correct="showDataArr[currentIndex].isRight"
+          />
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped lang="less">
+.app-container {
+  background-image: url('/static/image/game/bg-pic-naming.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center center;
+
+  :deep(.van-nav-bar) {
+    .van-nav-bar__title {
+      color: #fff;
+    }
+
+    .van-icon {
+      color: #fff;
+    }
+  }
+
+  .center-div {
+    background-image: url('/static/image/game/bg-center.png');
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    background-position: center center;
+  }
+
+  .text-area {
+    background-image: url('/static/image/game/bg-text.png');
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    background-position: center center;
+  }
+}
+</style>

src/pages/cognitiveTasks/PicturePuzzle/index.vue

@@ -139,7 +139,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <section class="app-container rotate-90">
+  <section class="app-container">
     <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" />
@@ -158,6 +158,7 @@ onMounted(() => {
   right: 0;
   background-image: url('/static/image/game/bg-puzzle.png');
   background-size: 100% 100%;
+  background-repeat: no-repeat;
   background-position: center center;
 
   :deep(.van-nav-bar) {

src/pages/cognitiveTasks/main/index.vue

@@ -20,6 +20,7 @@ const urlList = [
   '',
   '/cognitiveTasks/BreadthTraining',
   '/cognitiveTasks/PicturePuzzle',
+  '/cognitiveTasks/PictureNaming',
 ]
 
 function startTest() {
@@ -46,7 +47,7 @@ onMounted(() => {
     <van-nav-bar class="self-nav-bar" title="认知任务" />
     <div class="ml-[12px] mt-[18px] min-h-[180px] w-[350px] rounded-[16px] bg-white p-x-[15px] p-y-[15px]">
       <div class="flex-row">
-        <van-image :src="`/src/assets/images/task/${subjectInfo.id}.png`" class="h-[100px] w-[100px]" />
+        <van-image :src="`/src/assets/images/task/${subjectInfo.id}.png`" class="h-[100px] w-[100px] rounded-[8px] overflow-hidden" />
         <div class="ml-[24px] text-[20px] text-black font-600">
           {{ subjectInfo.name }}
         </div>

src/typed-router.d.ts

@@ -25,6 +25,7 @@ declare module 'vue-router/auto-routes' {
     '/cognitiveTasks/BreadthTraining/BTRandomPentagram': RouteRecordInfo<'/cognitiveTasks/BreadthTraining/BTRandomPentagram', '/cognitiveTasks/BreadthTraining/BTRandomPentagram', 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>>,
     '/cognitiveTasks/PicturePuzzle/': RouteRecordInfo<'/cognitiveTasks/PicturePuzzle/', '/cognitiveTasks/PicturePuzzle', Record<never, never>, Record<never, never>>,
     '/cognitiveTasks/PicturePuzzle/components/PicturePuzzleChild/': RouteRecordInfo<'/cognitiveTasks/PicturePuzzle/components/PicturePuzzleChild/', '/cognitiveTasks/PicturePuzzle/components/PicturePuzzleChild', Record<never, never>, Record<never, never>>,
     '/cognitiveTasks/PicturePuzzle/components/PPCountDown/': RouteRecordInfo<'/cognitiveTasks/PicturePuzzle/components/PPCountDown/', '/cognitiveTasks/PicturePuzzle/components/PPCountDown', Record<never, never>, Record<never, never>>,

vite.config.ts

@@ -20,7 +20,7 @@ export default ({ mode }: ConfigEnv): UserConfig => {
       port: 3000,
       proxy: {
         '/api': {
-          target: 'http://192.168.188.239:8107/',
+          target: 'http://49.232.26.44:8112/',
           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) : '')