feat(认知任务): 新增广度训练框架

.prettierrc.js

@@ -6,17 +6,48 @@
  * @LastEditTime: 2022-04-06 18:37:31
  */
 module.exports = {
-  printWidth: 180, // 换行字符串阈值
-  tabWidth: 2, // 设置工具每一个水平缩进的空格数
+  // (x)=>{},单个参数箭头函数是否显示小括号。(always:始终显示;avoid:省略括号。默认:always)
+  arrowParens: 'always',
+  // 开始标签的右尖括号是否跟随在最后一行属性末尾，默认false
+  bracketSameLine: false,
+  // 对象字面量的括号之间打印空格 (true - Example: { foo: bar } ; false - Example: {foo:bar})
+  bracketSpacing: true,
+  // 是否格式化一些文件中被嵌入的代码片段的风格(auto|off;默认auto)
+  embeddedLanguageFormatting: 'auto',
+  // 指定 HTML 文件的空格敏感度 (css|strict|ignore;默认css)
+  htmlWhitespaceSensitivity: 'css',
+  // 当文件已经被 Prettier 格式化之后，是否会在文件顶部插入一个特殊的 @format 标记，默认false
+  insertPragma: false,
+  // 在 JSX 中使用单引号替代双引号，默认false
+  jsxSingleQuote: true,
+  // 每行最多字符数量，超出换行(默认80)
+  printWidth: 120,
+  // 超出打印宽度 (always | never | preserve )
+  proseWrap: 'preserve',
+  // 对象属性是否使用引号(as-needed | consistent | preserve;默认as-needed:对象的属性需要加引号才添加;)
+  quoteProps: 'as-needed',
+  // 是否只格式化在文件顶部包含特定注释(@prettier| @format)的文件，默认false
+  requirePragma: false,
+  // 结尾添加分号
+  semi: false,
+  // 使用单引号 (true:单引号;false:双引号)
+  singleQuote: true,
+  // 缩进空格数，默认2个空格
+  tabWidth: 2,
+  // 元素末尾是否加逗号，默认es5: ES5中的 objects, arrays 等会添加逗号，TypeScript 中的 type 后不加逗号
+  trailingComma: 'none',
+  // 指定缩进方式，空格或tab，默认false，即使用空格
   useTabs: false,
-  semi: false, // 句末是否加分号
-  vueIndentScriptAndStyle: true,
-  singleQuote: true, // 用单引号
-  trailingComma: 'none', // 最后一个对象元素加逗号
-  bracketSpacing: true, // 对象，数组加空格
-  jsxBracketSameLine: true, // jsx > 是否另起一行
-  arrowParens: 'always', // (x) => {} 是否要有小括号
-  requirePragma: false, // 不需要写文件开头的 @prettier
-  insertPragma: false, // 不需要自动在文件开头插入 @prettier
-  endOfLine: 'auto' // 换行格式
+  // vue 文件中是否缩进 <style> 和 <script> 标签，默认 false
+  vueIndentScriptAndStyle: false,
+
+  endOfLine: 'auto',
+  overrides: [
+    {
+      files: '*.html',
+      options: {
+        parser: 'html'
+      }
+    }
+  ]
 }

components.d.ts

@@ -7,6 +7,7 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    CountDown: typeof import('./src/components/resolver/CountDown/index.vue')['default']
     IconAboutBox: typeof import('~icons/about/box')['default']
     IconAboutCar: typeof import('~icons/about/car')['default']
     IconAboutLogout: typeof import('~icons/about/logout')['default']
@@ -23,10 +24,9 @@ declare module 'vue' {
     VanIcon: typeof import('vant/es')['Icon']
     VanImage: typeof import('vant/es')['Image']
     VanList: typeof import('vant/es')['List']
+    VanNavBar: typeof import('vant/es')['NavBar']
     VanPullRefresh: typeof import('vant/es')['PullRefresh']
     VanTab: typeof import('vant/es')['Tab']
-    VanTabbar: typeof import('vant/es')['Tabbar']
-    VanTabbarItem: typeof import('vant/es')['TabbarItem']
     VanTabs: typeof import('vant/es')['Tabs']
   }
 }

src/views/cognitiveTasks/main/index.vue

@@ -0,0 +1,60 @@
+<template>
+  <section class="app-container">
+    <van-nav-bar title="认知任务" />
+    <div class="w-[630px] min-h-[180px] bg-white rounded-[16px] mt-[18px] ml-[4%] p-x-[30px] p-y-[28px]">
+      <div class="flex-row border">
+        <resolverImage :src="`images/task/${subjectInfo.id}.png`" />
+        <div class="ml-[24px] text-[42px] font-600">{{ subjectInfo.name }}</div>
+      </div>
+      <div class="mt-[40px] mb-[20px] text-[#00AABD] text-[36px]">操作提示：</div>
+      <div class="text-[#999999] text-[32px] line-height-[44px]">
+        空间定向是测试者在所处环境中根据参照点或者绝对坐标系统定位正确辨识方向的知觉反应，要求主体编码并记住环境中不同地点的相对位置，然后利用自身的认知结构和空间表征对自己所在的空间的感知觉线索进行迅速而准确的分析和加工，从而对自己姿态、位置和运动做出判断。
+      </div>
+    </div>
+    <van-button type="primary" color="#00AABD" class="bottom-block-btn" @click="startTest">开始测试</van-button>
+  </section>
+</template>
+
+<script setup lang="ts">
+/*
+ * 组件名: index
+ * 组件用途: XXX
+ * 创建日期: 2024/8/16
+ * 编写者: JutarryWu
+ */
+import { router } from '/@/router'
+
+const subjectInfo = ref({
+  name: '空间定向训练',
+  id: 1
+})
+const urlList = ['/cognitiveTasks/spatialOrientationAbility']
+
+const startTest = () => {
+  router.push(urlList[subjectInfo.value.id - 1])
+}
+
+async function exec() {}
+
+onMounted(() => {
+  exec()
+})
+</script>
+
+<style scoped lang="less">
+.app-container {
+  background-image: url('./../../../assets/images/bg-main.png');
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center; /* 可选，让图片居中对齐 */
+
+  :deep(.van-nav-bar) {
+    background-color: transparent;
+  }
+
+  .van-image {
+    width: 240px;
+    height: 240px;
+  }
+}
+</style>