提交

.idea/workspace.xml

@@ -1,10 +1,24 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
+  <component name="AutoImportSettings">
+    <option name="autoReloadType" value="SELECTIVE" />
+  </component>
   <component name="ChangeListManager">
-    <list default="true" id="b347610e-2e38-40df-8414-1dc079962726" name="更改" comment="">
-      <change beforePath="$PROJECT_DIR$/.gitignore" beforeDir="false" afterPath="$PROJECT_DIR$/.gitignore" afterDir="false" />
+    <list default="true" id="b347610e-2e38-40df-8414-1dc079962726" name="更改" comment="提交">
+      <change afterPath="$PROJECT_DIR$/public/static/image/game/logo/7.png" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/public/static/image/game/logo/8.png" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/views/cognitiveTasks/RouletteGame/Topics.json" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/views/cognitiveTasks/RouletteGame/index.vue" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/views/cognitiveTasks/SlotMachine/Topics.json" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/views/cognitiveTasks/SlotMachine/index.vue" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/views/index.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/index.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/pnpm-lock.yaml" beforeDir="false" afterPath="$PROJECT_DIR$/pnpm-lock.yaml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/main.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/main.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/types/auto-imports.d.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/types/auto-imports.d.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/types/components.d.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/types/components.d.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/types/typed-router.d.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/types/typed-router.d.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/views/cognitiveTasks/main/index.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/cognitiveTasks/main/index.vue" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -12,36 +26,53 @@
     <option name="LAST_RESOLUTION" value="IGNORE" />
   </component>
   <component name="Git.Settings">
+    <option name="RECENT_BRANCH_BY_REPOSITORY">
+      <map>
+        <entry key="$PROJECT_DIR$" value="master" />
+      </map>
+    </option>
     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
   </component>
-  <component name="ProjectColorInfo"><![CDATA[{
-  "associatedIndex": 2
-}]]></component>
+  <component name="ProjectColorInfo">{
+  &quot;associatedIndex&quot;: 2
+}</component>
   <component name="ProjectId" id="2qNsvaTLXTCAD235iWtOTwXKlPs" />
+  <component name="ProjectLevelVcsManager">
+    <ConfirmationsSetting value="2" id="Add" />
+  </component>
   <component name="ProjectViewState">
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
   <component name="PropertiesComponent"><![CDATA[{
   "keyToString": {
+    "ASKED_ADD_EXTERNAL_FILES": "true",
     "RunOnceActivity.ShowReadmeOnStart": "true",
     "RunOnceActivity.git.unshallow": "true",
     "git-widget-placeholder": "dev",
-    "last_opened_file_path": "E:/WorkSpace/Web/insomnia-cognition-h5",
+    "last_opened_file_path": "D:/word/word/insomnia-cognition-h5/src/views/cognitiveTasks/RouletteGame",
     "node.js.detected.package.eslint": "true",
     "node.js.detected.package.stylelint": "true",
     "node.js.selected.package.eslint": "(autodetect)",
     "node.js.selected.package.stylelint": "E:\\WorkSpace\\Web\\insomnia-cognition-h5\\node_modules\\stylelint",
+    "node.js.selected.package.tslint": "(autodetect)",
     "nodejs_package_manager_path": "pnpm",
     "settings.editor.selected.configurable": "preferences.pluginManager",
-    "ts.external.directory.path": "E:\\WorkSpace\\Web\\insomnia-cognition-h5\\node_modules\\typescript\\lib",
+    "ts.external.directory.path": "D:\\word\\word\\insomnia-cognition-h5\\node_modules\\typescript\\lib",
     "vue.rearranger.settings.migration": "true"
   }
 }]]></component>
+  <component name="RecentsManager">
+    <key name="CopyFile.RECENT_KEYS">
+      <recent name="D:\word\word\insomnia-cognition-h5\src\views\cognitiveTasks\RouletteGame" />
+      <recent name="D:\word\word\insomnia-cognition-h5\public\static\image\game\logo" />
+      <recent name="D:\word\word\insomnia-cognition-h5\src\views\cognitiveTasks\SlotMachine" />
+    </key>
+  </component>
   <component name="SharedIndexes">
     <attachedChunks>
       <set>
-        <option value="bundled-js-predefined-d6986cc7102b-deb605915726-JavaScript-WS-243.22562.112" />
+        <option value="bundled-js-predefined-1d06a55b98c1-0b3e54e931b4-JavaScript-WS-241.18034.50" />
       </set>
     </attachedChunks>
   </component>
@@ -54,10 +85,17 @@
       <option name="presentableId" value="Default" />
       <updated>1734514599924</updated>
       <workItem from="1734514601970" duration="154000" />
+      <workItem from="1734571154985" duration="15689000" />
     </task>
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
     <option name="version" value="3" />
   </component>
+  <component name="VcsManagerConfiguration">
+    <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
+    <MESSAGE value="init" />
+    <MESSAGE value="提交" />
+    <option name="LAST_COMMIT_MESSAGE" value="提交" />
+  </component>
 </project>

package.json

@@ -23,6 +23,7 @@
   },
   "dependencies": {
     "@headlessui/vue": "^1.7.22",
+    "@lucky-canvas/vue": "^0.1.11",
     "@vant/touch-emulator": "^1.4.0",
     "@vueuse/components": "^11.0.3",
     "@vueuse/core": "^11.0.3",

pnpm-lock.yaml

@@ -11,18 +11,21 @@ importers:
       '@headlessui/vue':
         specifier: ^1.7.22
         version: 1.7.22(vue@3.4.38(typescript@5.5.4))
+      '@lucky-canvas/vue':
+        specifier: ^0.1.11
+        version: 0.1.11(vue@3.4.38(typescript@5.5.4))
       '@vant/touch-emulator':
         specifier: ^1.4.0
         version: 1.4.0
       '@vueuse/components':
         specifier: ^11.0.3
-        version: 11.0.3(vue@3.4.38(typescript@5.5.4))
+        version: 11.0.3(@vue/composition-api@1.7.2(vue@3.4.38(typescript@5.5.4)))(vue@3.4.38(typescript@5.5.4))
       '@vueuse/core':
         specifier: ^11.0.3
-        version: 11.0.3(vue@3.4.38(typescript@5.5.4))
+        version: 11.0.3(@vue/composition-api@1.7.2(vue@3.4.38(typescript@5.5.4)))(vue@3.4.38(typescript@5.5.4))
       '@vueuse/integrations':
         specifier: ^11.0.3
-        version: 11.0.3(axios@1.7.7)(nprogress@0.2.0)(qrcode@1.5.4)(vue@3.4.38(typescript@5.5.4))
+        version: 11.0.3(@vue/composition-api@1.7.2(vue@3.4.38(typescript@5.5.4)))(axios@1.7.7)(nprogress@0.2.0)(qrcode@1.5.4)(vue@3.4.38(typescript@5.5.4))
       animate.css:
         specifier: ^4.1.1
         version: 4.1.1
@@ -55,7 +58,7 @@ importers:
         version: 1.0.1
       pinia:
         specifier: ^2.2.2
-        version: 2.2.2(typescript@5.5.4)(vue@3.4.38(typescript@5.5.4))
+        version: 2.2.2(@vue/composition-api@1.7.2(vue@3.4.38(typescript@5.5.4)))(typescript@5.5.4)(vue@3.4.38(typescript@5.5.4))
       qrcode:
         specifier: ^1.5.4
         version: 1.5.4
@@ -209,7 +212,7 @@ importers:
         version: 0.62.3(postcss@8.4.42)(rollup@4.21.2)(vite@5.4.2(@types/node@22.5.5)(less@4.2.0)(sass@1.77.8)(terser@5.31.6))
       unplugin-auto-import:
         specifier: ^0.18.2
-        version: 0.18.2(@vueuse/core@11.0.3(vue@3.4.38(typescript@5.5.4)))(rollup@4.21.2)
+        version: 0.18.2(@vueuse/core@11.0.3(@vue/composition-api@1.7.2(vue@3.4.38(typescript@5.5.4)))(vue@3.4.38(typescript@5.5.4)))(rollup@4.21.2)
       unplugin-turbo-console:
         specifier: ^1.10.1
         version: 1.10.1(@babel/parser@7.25.6)(esbuild@0.23.1)(rollup@4.21.2)(vite@5.4.2(@types/node@22.5.5)(less@4.2.0)(sass@1.77.8)(terser@5.31.6))(vue@3.4.38(typescript@5.5.4))
@@ -1503,6 +1506,11 @@ packages:
     resolution: {integrity: sha512-ccfcIDlogiXNq5KcbAwbaO7lMh3Tm1i3khMPYpxlK8hH/W53zN81KM9coerRLOnTGu3nfXIniAmQbRI9OxbC0w==}
     engines: {node: '>= 0.4'}
 
+  '@lucky-canvas/vue@0.1.11':
+    resolution: {integrity: sha512-5vm0txSKRBtMgrE/HZEvw1joSTx9NTdAkc8tBp/aX0LxyhQtiTVBLsRgdYUK/OiURCL8bo+046BTGnV+Q4JFlg==}
+    peerDependencies:
+      vue: ^2.0.0 || >=3.0.0-rc.0
+
   '@nodelib/fs.scandir@2.1.5':
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -2049,6 +2057,11 @@ packages:
   '@vue/compiler-vue2@2.7.16':
     resolution: {integrity: sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==}
 
+  '@vue/composition-api@1.7.2':
+    resolution: {integrity: sha512-M8jm9J/laYrYT02665HkZ5l2fWTK4dcVg3BsDHm/pfz+MjDYwX+9FUaZyGwEyXEDonQYRCo0H7aLgdklcIELjw==}
+    peerDependencies:
+      vue: '>= 2.5 < 2.7'
+
   '@vue/devtools-api@6.6.3':
     resolution: {integrity: sha512-0MiMsFma/HqA6g3KLKn+AGpL1kgKhFWszC9U29NfpWK5LE7bjeXxySWJrOJ77hBz+TBrBQ7o4QJqbPbqbs8rJw==}
 
@@ -2693,7 +2706,7 @@ packages:
     resolution: {integrity: sha512-uBJiDmwqsbJCWHAwjrx3cvjbMXP7xD72Dmsn5LOJpiRmE3WbBbN5rCqQ2Qh6Ek6/eOrjlWngEynBWo4VxerQhg==}
 
   core-js@3.38.1:
-    resolution: {integrity: sha512-OP35aUorbU3Zvlx7pjsFdu1rGNnD4pgw/CWoYzRY3t2EzoVT7shKHY1dlAy3f41cGIO7ZDPQimhGFTlEYkG/Hw==}
+    resolution: {integrity: sha512-OP35aUorbU3Zvlx7pjsFdu1rGNnD4pgw/CWoYzRY3t2EzoVT7shKHY1dlAy3f41cGIO7ZDPQimhGFTlEYkG/Hw==, tarball: https://registry.npmmirror.com/core-js/-/core-js-3.38.1.tgz}
 
   core-util-is@1.0.3:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
@@ -2962,7 +2975,7 @@ packages:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
 
   echarts@5.5.1:
-    resolution: {integrity: sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==}
+    resolution: {integrity: sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==, tarball: https://registry.npmmirror.com/echarts/-/echarts-5.5.1.tgz}
 
   electron-to-chromium@1.5.7:
     resolution: {integrity: sha512-6FTNWIWMxMy/ZY6799nBlPtF1DFDQ6VQJ7yyDP27SJNt5lwtQ5ufqVvHylb3fdQefvRcgA3fKcFMJi9OLwBRNw==}
@@ -4197,6 +4210,9 @@ packages:
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
+  lucky-canvas@1.7.27:
+    resolution: {integrity: sha512-Ftz6qD+863bI7xijBmZg3dw3cNEc7odPr70EZQcGA14y3TgTAzH65HPosOCd6kKUlMwhntBaHMx3onoj9MtJRQ==}
+
   magic-string-ast@0.6.2:
     resolution: {integrity: sha512-oN3Bcd7ZVt+0VGEs7402qR/tjgjbM7kPlH/z7ufJnzTLVBzXJITRHOJiwMmmYMgZfdoWQsfQcY+iKlxiBppnMA==}
     engines: {node: '>=16.14.0'}
@@ -5896,6 +5912,16 @@ packages:
       '@vue/composition-api':
         optional: true
 
+  vue-demi@0.7.5:
+    resolution: {integrity: sha512-eFSQSvbQdY7C9ujOzvM6tn7XxwLjn0VQDXQsiYBLBwf28Na+2nTQR4BBBcomhmdP6mmHlBKAwarq6a0BPG87hQ==}
+    hasBin: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-beta.1
+      vue: ^2.6.0 || >=3.0.0-rc.1
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
   vue-esign@1.1.4:
     resolution: {integrity: sha512-7Ix5PdcyyhVfsvrT9a+yp5+36gbQ0/bpDO+QSLT58IgJ5t164PEptOy5Nslw8bZbk3n3Hc7SP5B8eXQ8X8W+OA==}
 
@@ -6046,8 +6072,8 @@ packages:
     resolution: {integrity: sha512-zK7YHHz4ZXpW89AHXUPbQVGKI7uvkd3hzusTdotCg1UxyaVtg0zFJSTfW/Dq5f7OBBVnq6cZIaC8Ti4hb6dtCA==}
     engines: {node: '>= 14'}
 
-  zrender@5.6.0:
-    resolution: {integrity: sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==}
+  zrender@5.5.0:
+    resolution: {integrity: sha512-O3MilSi/9mwoovx77m6ROZM7sXShR/O/JIanvzTwjN3FORfLSr81PsUGd7jlaYOeds9d8tw82oP44+3YucVo+w==}
 
 snapshots:
 
@@ -7312,6 +7338,13 @@ snapshots:
     dependencies:
       call-bind: 1.0.5
 
+  '@lucky-canvas/vue@0.1.11(vue@3.4.38(typescript@5.5.4))':
+    dependencies:
+      '@vue/composition-api': 1.7.2(vue@3.4.38(typescript@5.5.4))
+      lucky-canvas: 1.7.27
+      vue: 3.4.38(typescript@5.5.4)
+      vue-demi: 0.7.5(@vue/composition-api@1.7.2(vue@3.4.38(typescript@5.5.4)))(vue@3.4.38(typescript@5.5.4))
+
   '@nodelib/fs.scandir@2.1.5':
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -8006,6 +8039,10 @@ snapshots:
       de-indent: 1.0.2
       he: 1.2.0
 
+  '@vue/composition-api@1.7.2(vue@3.4.38(typescript@5.5.4))':
+    dependencies:
+      vue: 3.4.38(typescript@5.5.4)
+
   '@vue/devtools-api@6.6.3': {}
 
   '@vue/devtools-core@7.3.9(vite@5.4.2(@types/node@22.5.5)(less@4.2.0)(sass@1.77.8)(terser@5.31.6))(vue@3.4.38(typescript@5.5.4))':
@@ -8073,30 +8110,30 @@ snapshots:
 
   '@vue/shared@3.4.38': {}
 
-  '@vueuse/components@11.0.3(vue@3.4.38(typescript@5.5.4))':
+  '@vueuse/components@11.0.3(@vue/composition-api@1.7.2(vue@3.4.38(typescript@5.5.4)))(vue@3.4.38(typescript@5.5.4))':
     dependencies:
-      '@vueuse/core': 11.0.3(vue@3.4.38(typescript@5.5.4))
-      '@vueuse/shared': 11.0.3(vue@3.4.38(typescript@5.5.4))
-      vue-demi: 0.14.10(vue@3.4.38(typescript@5.5.4))
+      '@vueuse/core': 11.0.3(@vue/composition-api@1.7.2(vue@3.4.38(typescript@5.5.4)))(vue@3.4.38(typescript@5.5.4))
+      '@vueuse/shared': 11.0.3(@vue/composition-api@1.7.2(vue@3.4.38(typescript@5.5.4)))(vue@3.4.38(typescript@5.5.4))
+      vue-demi: 0.14.10(@vue/composition-api@1.7.2(vue@3.4.38(typescript@5.5.4)))(vue@3.4.38(typescript@5.5.4))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
 
-  '@vueuse/core@11.0.3(vue@3.4.38(typescript@5.5.4))':
+  '@vueuse/core@11.0.3(@vue/composition-api@1.7.2(vue@3.4.38(typescript@5.5.4)))(vue@3.4.38(typescript@5.5.4))':
     dependencies:
       '@types/web-bluetooth': 0.0.20
       '@vueuse/metadata': 11.0.3
-      '@vueuse/shared': 11.0.3(vue@3.4.38(typescript@5.5.4))
-      vue-demi: 0.14.10(vue@3.4.38(typescript@5.5.4))
+      '@vueuse/shared': 11.0.3(@vue/composition-api@1.7.2(vue@3.4.38(typescript@5.5.4)))(vue@3.4.38(typescript@5.5.4))
+      vue-demi: 0.14.10(@vue/composition-api@1.7.2(vue@3.4.38(typescript@5.5.4)))(vue@3.4.38(typescript@5.5.4))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
 
-  '@vueuse/integrations@11.0.3(axios@1.7.7)(nprogress@0.2.0)(qrcode@1.5.4)(vue@3.4.38(typescript@5.5.4))':
+  '@vueuse/integrations@11.0.3(@vue/composition-api@1.7.2(vue@3.4.38(typescript@5.5.4)))(axios@1.7.7)(nprogress@0.2.0)(qrcode@1.5.4)(vue@3.4.38(typescript@5.5.4))':
     dependencies:
-      '@vueuse/core': 11.0.3(vue@3.4.38(typescript@5.5.4))
-      '@vueuse/shared': 11.0.3(vue@3.4.38(typescript@5.5.4))
-      vue-demi: 0.14.10(vue@3.4.38(typescript@5.5.4))
+      '@vueuse/core': 11.0.3(@vue/composition-api@1.7.2(vue@3.4.38(typescript@5.5.4)))(vue@3.4.38(typescript@5.5.4))
+      '@vueuse/shared': 11.0.3(@vue/composition-api@1.7.2(vue@3.4.38(typescript@5.5.4)))(vue@3.4.38(typescript@5.5.4))
+      vue-demi: 0.14.10(@vue/composition-api@1.7.2(vue@3.4.38(typescript@5.5.4)))(vue@3.4.38(typescript@5.5.4))
     optionalDependencies:
       axios: 1.7.7
       nprogress: 0.2.0
@@ -8107,9 +8144,9 @@ snapshots:
 
   '@vueuse/metadata@11.0.3': {}
 
-  '@vueuse/shared@11.0.3(vue@3.4.38(typescript@5.5.4))':
+  '@vueuse/shared@11.0.3(@vue/composition-api@1.7.2(vue@3.4.38(typescript@5.5.4)))(vue@3.4.38(typescript@5.5.4))':
     dependencies:
-      vue-demi: 0.14.10(vue@3.4.38(typescript@5.5.4))
+      vue-demi: 0.14.10(@vue/composition-api@1.7.2(vue@3.4.38(typescript@5.5.4)))(vue@3.4.38(typescript@5.5.4))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -8965,7 +9002,7 @@ snapshots:
   echarts@5.5.1:
     dependencies:
       tslib: 2.3.0
-      zrender: 5.6.0
+      zrender: 5.5.0
 
   electron-to-chromium@1.5.7: {}
 
@@ -10363,6 +10400,8 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
+  lucky-canvas@1.7.27: {}
+
   magic-string-ast@0.6.2:
     dependencies:
       magic-string: 0.30.11
@@ -10888,12 +10927,13 @@ snapshots:
   pify@4.0.1:
     optional: true
 
-  pinia@2.2.2(typescript@5.5.4)(vue@3.4.38(typescript@5.5.4)):
+  pinia@2.2.2(@vue/composition-api@1.7.2(vue@3.4.38(typescript@5.5.4)))(typescript@5.5.4)(vue@3.4.38(typescript@5.5.4)):
     dependencies:
       '@vue/devtools-api': 6.6.3
       vue: 3.4.38(typescript@5.5.4)
-      vue-demi: 0.14.10(vue@3.4.38(typescript@5.5.4))
+      vue-demi: 0.14.10(@vue/composition-api@1.7.2(vue@3.4.38(typescript@5.5.4)))(vue@3.4.38(typescript@5.5.4))
     optionalDependencies:
+      '@vue/composition-api': 1.7.2(vue@3.4.38(typescript@5.5.4))
       typescript: 5.5.4
 
   pkg-types@1.1.1:
@@ -11958,7 +11998,7 @@ snapshots:
       - rollup
       - supports-color
 
-  unplugin-auto-import@0.18.2(@vueuse/core@11.0.3(vue@3.4.38(typescript@5.5.4)))(rollup@4.21.2):
+  unplugin-auto-import@0.18.2(@vueuse/core@11.0.3(@vue/composition-api@1.7.2(vue@3.4.38(typescript@5.5.4)))(vue@3.4.38(typescript@5.5.4)))(rollup@4.21.2):
     dependencies:
       '@antfu/utils': 0.7.10
       '@rollup/pluginutils': 5.1.0(rollup@4.21.2)
@@ -11969,7 +12009,7 @@ snapshots:
       unimport: 3.10.0(rollup@4.21.2)
       unplugin: 1.12.1
     optionalDependencies:
-      '@vueuse/core': 11.0.3(vue@3.4.38(typescript@5.5.4))
+      '@vueuse/core': 11.0.3(@vue/composition-api@1.7.2(vue@3.4.38(typescript@5.5.4)))(vue@3.4.38(typescript@5.5.4))
     transitivePeerDependencies:
       - rollup
 
@@ -12226,9 +12266,17 @@ snapshots:
       countup.js: 2.8.0
       vue: 3.4.38(typescript@5.5.4)
 
-  vue-demi@0.14.10(vue@3.4.38(typescript@5.5.4)):
+  vue-demi@0.14.10(@vue/composition-api@1.7.2(vue@3.4.38(typescript@5.5.4)))(vue@3.4.38(typescript@5.5.4)):
     dependencies:
       vue: 3.4.38(typescript@5.5.4)
+    optionalDependencies:
+      '@vue/composition-api': 1.7.2(vue@3.4.38(typescript@5.5.4))
+
+  vue-demi@0.7.5(@vue/composition-api@1.7.2(vue@3.4.38(typescript@5.5.4)))(vue@3.4.38(typescript@5.5.4)):
+    dependencies:
+      vue: 3.4.38(typescript@5.5.4)
+    optionalDependencies:
+      '@vue/composition-api': 1.7.2(vue@3.4.38(typescript@5.5.4))
 
   vue-esign@1.1.4:
     dependencies:
@@ -12396,6 +12444,6 @@ snapshots:
       compress-commons: 6.0.2
       readable-stream: 4.5.2
 
-  zrender@5.6.0:
+  zrender@5.5.0:
     dependencies:
       tslib: 2.3.0

src/main.ts

@@ -5,6 +5,7 @@ import 'vue-m-message/dist/style.css'
 
 import 'overlayscrollbars/overlayscrollbars.css'
 
+import VueLuckyCanvas from '@lucky-canvas/vue' // 完整加载
 import App from './App.vue'
 import pinia from './store'
 import router from './router'
@@ -27,6 +28,7 @@ app.use(Message)
 app.use(pinia)
 app.use(router)
 app.use(ui)
+app.use(VueLuckyCanvas) //
 directive(app)
 
 app.mount('#app')

src/types/typed-router.d.ts

@@ -26,6 +26,8 @@ declare module 'vue-router/auto-routes' {
     '/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/RouletteGame/': RouteRecordInfo<'/cognitiveTasks/RouletteGame/', '/cognitiveTasks/RouletteGame', Record<never, never>, Record<never, never>>,
+    '/cognitiveTasks/SlotMachine/': RouteRecordInfo<'/cognitiveTasks/SlotMachine/', '/cognitiveTasks/SlotMachine', Record<never, never>, Record<never, never>>,
     '/cognitiveTasks/spatialOrientationAbility/': RouteRecordInfo<'/cognitiveTasks/spatialOrientationAbility/', '/cognitiveTasks/spatialOrientationAbility', Record<never, never>, Record<never, never>>,
     'login': RouteRecordInfo<'login', '/login', Record<never, never>, Record<never, never>>,
     'reload': RouteRecordInfo<'reload', '/reload', Record<never, never>, Record<never, never>>,

src/views/cognitiveTasks/RouletteGame/Topics.json

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

src/views/cognitiveTasks/RouletteGame/index.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+const myLucky = ref<any>(null)
+const prizes = [
+  { background: '#e9e8fe', fonts: [{ text: '0' }] },
+  { background: '#b8c5f2', fonts: [{ text: '1' }] },
+  { background: '#e9e8fe', fonts: [{ text: '2' }] },
+  { background: '#b8c5f2', fonts: [{ text: '3' }] },
+]
+const blocks = [{ padding: '10px', background: '#869cfa' }]
+const defaultConfig = {
+  gutter: '5px',
+  offsetDegree: 30,
+}
+const buttons = [
+  { radius: '40%', background: '#617df2' },
+  { radius: '35%', background: '#afc8ff' },
+  {
+    radius: '30%',
+    background: '#869cfa',
+    pointer: true,
+    fonts: [{ text: '开始', top: '-10px' }],
+  },
+]
+// 点击抽奖按钮会触发star回调
+function startCallback() {
+  console.log(myLucky?.value)
+  // 调用抽奖组件的play方法开始游戏
+  myLucky?.value?.play()
+  // 模拟调用接口异步抽奖
+  setTimeout(() => {
+    // 假设后端返回的中奖索引是0
+    const index = 0
+    // 调用stop停止旋转并传递中奖索引
+    myLucky?.value?.stop(index)
+  }, 3000)
+}
+// 抽奖结束会触发end回调
+function endCallback(prize: any) {
+  console.log(prize)
+}
+</script>
+
+<template>
+  <LuckyWheel
+    ref="myLucky"
+    width="300px"
+    height="300px"
+    :prizes="prizes"
+    :blocks="blocks"
+    :buttons="buttons"
+    @start="startCallback"
+    @end="endCallback"
+    :default-config="defaultConfig"
+  />
+</template>
+
+<style scoped lang="scss"></style>

src/views/cognitiveTasks/SlotMachine/Topics.json

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

src/views/cognitiveTasks/SlotMachine/index.vue

@@ -0,0 +1,158 @@
+<script setup>
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+
+// 自定义数据列表，可自行修改里面的元素
+const customData = ref(['苹果', '香蕉', '橙子', '葡萄', '西瓜'])
+
+// 用于存储随机生成的数据
+const randomData = ref('')
+const itemHeight = 20
+// 存储自定义列中每个元素的DOM引用
+const customItemRefs = ref([])
+// 存储随机列中每个元素的DOM引用
+const randomItemRefs = ref([])
+
+// 设置自定义列元素的DOM引用
+function setCustomItemRef(el) {
+  if (el) {
+    customItemRefs.value.push(el)
+  }
+}
+
+// 设置随机列元素的DOM引用
+function setRandomItemRef(el) {
+  if (el) {
+    randomItemRefs.value.push(el)
+  }
+}
+
+// 模拟老虎机转动的函数
+function startSpin() {
+  let startTime // 记录转动开始时间，用于计算已过去的时间
+  const spinDuration = 2000 // 转动持续时间（毫秒）
+ // 每个滚动项的高度（px），与样式中.slot-item 的 height 对应
+  const totalItems = customData.value.length // 总数据项数量
+  const updateRandomData = () => {
+    const randomIndex = Math.floor(Math.random() * totalItems)
+    randomData.value = customData.value[randomIndex]
+  }
+
+  const animate = (timestamp) => {
+    if (!startTime) {
+      startTime = timestamp
+    }
+    const elapsedTime = timestamp - startTime
+    if (elapsedTime < spinDuration) {
+      // 移动每个随机列和自定义列的元素，实现滚动效果
+      moveItems(randomItemRefs.value)
+      moveItems(customItemRefs.value)
+      requestAnimationFrame(animate)
+    }
+    else {
+      // 重置随机列和自定义列元素的偏移量，使其停止在最终位置
+      resetItems(randomItemRefs.value)
+      resetItems(customItemRefs.value)
+      // 可以在这里添加停止转动后的逻辑，比如判断是否中奖等
+    }
+  }
+
+  requestAnimationFrame(animate)
+}
+
+// 移动元素的通用函数，同时强制触发重排
+function moveItems(itemRefs) {
+  itemRefs.forEach((el) => {
+    const currentOffset = Number.parseInt(el.style.transform?.split(' ')[5] || '0')
+    const newOffset = currentOffset - itemHeight
+    el.style.transform = `translateY(${newOffset}px)`
+    // 强制触发重排，让样式变化及时生效
+    void el.offsetHeight
+  })
+}
+
+// 重置元素偏移量的通用函数
+function resetItems(itemRefs) {
+  itemRefs.forEach((el) => {
+    el.style.transform = 'translateY(0)'
+  })
+}
+
+// 在组件挂载时初始化相关操作
+onMounted(() => {
+  // 为自定义列和随机列的每个元素设置初始的transform样式，使其处于起始位置
+  const initItems = (refs) => {
+    refs.forEach((el) => {
+      el.style.transform = 'translateY(0)'
+    })
+  }
+  initItems(customItemRefs.value)
+  initItems(randomItemRefs.value)
+})
+
+// 在组件卸载前清除相关定时器等资源
+onBeforeUnmount(() => {
+  // 确保清除可能存在的动画相关的循环调用，避免内存泄漏
+})
+</script>
+
+<template>
+  <div class="slot-machine">
+    <div class="slot-column custom-column">
+      <div v-for="item in customData" :key="item" class="slot-item">
+        <div :ref="setCustomItemRef" class="custom-item">
+          {{ item }}
+        </div>
+      </div>
+    </div>
+    <div class="slot-column random-column">
+      <div v-for="i in 5" :key="i" class="slot-item">
+        <div :ref="setRandomItemRef" class="random-item">
+          {{ randomData }}
+        </div>
+      </div>
+    </div>
+    <button @click="startSpin">
+      开始转动
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.slot-machine {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.slot-column {
+  border: 1px solid #ccc;
+  width: 100px;
+  height: 200px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  position: relative;
+}
+
+.slot-item {
+  height: 20px;
+  line-height: 20px;
+  text-align: center;
+  position: relative;
+}
+
+.custom-item,
+.random-item {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transition: transform 0.3s ease; /* 添加过渡动画效果 */
+}
+
+button {
+  margin-top: 20px;
+}
+</style>

src/views/cognitiveTasks/main/index.vue

@@ -21,6 +21,8 @@ const urlList = [
   '/cognitiveTasks/BreadthTraining',
   '/cognitiveTasks/PicturePuzzle',
   '/cognitiveTasks/PictureNaming',
+  '/cognitiveTasks/SlotMachine',
+  '/cognitiveTasks/RouletteGame',
 ]
 
 function startTest() {
@@ -34,6 +36,7 @@ async function exec() {
   taskId.value = route.query.taskId as string
   userId.value = route.query.userId as string
   GameAPI.findById(taskId.value).then((res) => {
+    console.log(res)
     subjectInfo.value = res.data!
     sessionStorage.setItem('userId', userId.value)
     sessionStorage.setItem('subjectInfo', JSON.stringify(res.data))