Merge pull request #5 from LOG1997/dev

fix and feature

package.json

@@ -19,7 +19,9 @@
         "axios": "^1.6.1",
         "canvas-confetti": "^1.9.2",
         "dayjs": "^1.11.10",
+        "github-markdown-css": "^5.5.0",
         "localforage": "^1.10.0",
+        "markdown-it": "^14.0.0",
         "pinia": "^2.1.7",
         "pinia-plugin-persist": "^1.0.0",
         "sparticles": "^1.3.1",
@@ -27,6 +29,7 @@
         "three": "^0.160.0",
         "three-css3d": "^1.0.6",
         "vue": "^3.3.8",
+        "vue-dompurify-html": "^5.0.1",
         "vue-router": "^4.2.5",
         "vue-toast-notification": "^3",
         "vue3-colorpicker": "^2.2.3",
@@ -39,6 +42,7 @@
         "@tailwindcss/typography": "^0.5.10",
         "@testing-library/vue": "^8.0.0",
         "@types/canvas-confetti": "^1.6.4",
+        "@types/markdown-it": "^13.0.7",
         "@types/node": "^20.9.0",
         "@types/three": "^0.160.0",
         "@typescript-eslint/eslint-plugin": "^6.11.0",

pnpm-lock.yaml

@@ -20,9 +20,15 @@ dependencies:
   dayjs:
     specifier: ^1.11.10
     version: 1.11.10
+  github-markdown-css:
+    specifier: ^5.5.0
+    version: 5.5.0
   localforage:
     specifier: ^1.10.0
     version: 1.10.0
+  markdown-it:
+    specifier: ^14.0.0
+    version: 14.0.0
   pinia:
     specifier: ^2.1.7
     version: 2.1.7(typescript@5.2.2)(vue@3.3.8)
@@ -44,6 +50,9 @@ dependencies:
   vue:
     specifier: ^3.3.8
     version: 3.3.8(typescript@5.2.2)
+  vue-dompurify-html:
+    specifier: ^5.0.1
+    version: 5.0.1(vue@3.3.8)
   vue-router:
     specifier: ^4.2.5
     version: 4.2.5(vue@3.3.8)
@@ -76,6 +85,9 @@ devDependencies:
   '@types/canvas-confetti':
     specifier: ^1.6.4
     version: 1.6.4
+  '@types/markdown-it':
+    specifier: ^13.0.7
+    version: 13.0.7
   '@types/node':
     specifier: ^20.9.0
     version: 20.9.0
@@ -742,6 +754,21 @@ packages:
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
     dev: true
 
+  /@types/linkify-it@3.0.5:
+    resolution: {integrity: sha512-yg6E+u0/+Zjva+buc3EIb+29XEg4wltq7cSmd4Uc2EE/1nUVmxyzpX6gUXD0V8jIrG0r7YeOGVIbYRkxeooCtw==}
+    dev: true
+
+  /@types/markdown-it@13.0.7:
+    resolution: {integrity: sha512-U/CBi2YUUcTHBt5tjO2r5QV/x0Po6nsYwQU4Y04fBS6vfoImaiZ6f8bi3CjTCxBPQSO1LMyUqkByzi8AidyxfA==}
+    dependencies:
+      '@types/linkify-it': 3.0.5
+      '@types/mdurl': 1.0.5
+    dev: true
+
+  /@types/mdurl@1.0.5:
+    resolution: {integrity: sha512-6L6VymKTzYSrEf4Nev4Xa1LCHKrlTlYCBMTlQKFuddo1CvQcE52I0mwfOJayueUC7MJuXOeHTcIU683lzd0cUA==}
+    dev: true
+
   /@types/node@20.9.0:
     resolution: {integrity: sha512-nekiGu2NDb1BcVofVcEKMIwzlx4NjHlcjhoxxKBNLtz15Y1z7MYf549DFvkHSId02Ax6kGwWntIBPC3l/JZcmw==}
     dependencies:
@@ -1413,7 +1440,6 @@ packages:
 
   /argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
-    dev: true
 
   /aria-query@5.1.3:
     resolution: {integrity: sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==}
@@ -2163,6 +2189,10 @@ packages:
       domelementtype: 2.3.0
     dev: true
 
+  /dompurify@3.0.8:
+    resolution: {integrity: sha512-b7uwreMYL2eZhrSCRC4ahLTeZcPZxSmYfmcQGXGkXiZSNW1X85v+SDM5KsWcpivIiUBH47Ji7NtyUdpLeF5JZQ==}
+    dev: false
+
   /domutils@1.7.0:
     resolution: {integrity: sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==}
     dependencies:
@@ -2229,7 +2259,6 @@ packages:
   /entities@4.5.0:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
-    dev: true
 
   /error-stack-parser-es@0.1.1:
     resolution: {integrity: sha512-g/9rfnvnagiNf+DRMHEVGuGuIBlCIMDFoTA616HaP2l9PlCjGjVhD98PNbVSJvmK4TttqT5mV5tInMhoFgi+aA==}
@@ -2721,6 +2750,11 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /github-markdown-css@5.5.0:
+    resolution: {integrity: sha512-Ncp4putm+cGteDhtNYKGdchM4uiIm5tmQcAQx/eEYhuM0sOdjZYNQOauQTaodjDQjfw7whU99MijwC1M0FUY4w==}
+    engines: {node: '>=10'}
+    dev: false
+
   /glob-parent@5.1.2:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
@@ -3498,6 +3532,12 @@ packages:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
     dev: true
 
+  /linkify-it@5.0.0:
+    resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==}
+    dependencies:
+      uc.micro: 2.0.0
+    dev: false
+
   /loader-runner@4.3.0:
     resolution: {integrity: sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==}
     engines: {node: '>=6.11.5'}
@@ -3601,10 +3641,26 @@ packages:
       object-visit: 1.0.1
     dev: true
 
+  /markdown-it@14.0.0:
+    resolution: {integrity: sha512-seFjF0FIcPt4P9U39Bq1JYblX0KZCjDLFFQPHpL5AzHpqPEKtosxmdq/LTVZnjfH7tjt9BxStm+wXcDBNuYmzw==}
+    hasBin: true
+    dependencies:
+      argparse: 2.0.1
+      entities: 4.5.0
+      linkify-it: 5.0.0
+      mdurl: 2.0.0
+      punycode.js: 2.3.1
+      uc.micro: 2.0.0
+    dev: false
+
   /mdn-data@2.0.14:
     resolution: {integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==}
     dev: true
 
+  /mdurl@2.0.0:
+    resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}
+    dev: false
+
   /merge-options@1.0.1:
     resolution: {integrity: sha512-iuPV41VWKWBIOpBsjoxjDZw8/GbSfZ2mk7N1453bwMrfzdrIk7EzBd+8UVR6rkw67th7xnk9Dytl3J+lHPdxvg==}
     engines: {node: '>=4'}
@@ -4276,6 +4332,11 @@ packages:
     resolution: {integrity: sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==}
     dev: true
 
+  /punycode.js@2.3.1:
+    resolution: {integrity: sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==}
+    engines: {node: '>=6'}
+    dev: false
+
   /punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
@@ -5113,6 +5174,10 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
+  /uc.micro@2.0.0:
+    resolution: {integrity: sha512-DffL94LsNOccVn4hyfRe5rdKa273swqeA5DJpMOeFmEn1wCDc7nAbbB0gXlgBCL7TNzeTv6G7XVWzan7iJtfig==}
+    dev: false
+
   /ufo@1.3.1:
     resolution: {integrity: sha512-uY/99gMLIOlJPwATcMVYfqDSxUR9//AUcgZMzwfSTJPDKzA1S8mX4VLqa+fiAtveraQUBCz4FFcwVZBGbwBXIw==}
     dev: true
@@ -5531,6 +5596,15 @@ packages:
     dependencies:
       vue: 3.3.8(typescript@5.2.2)
 
+  /vue-dompurify-html@5.0.1(vue@3.3.8):
+    resolution: {integrity: sha512-8yoMbo7PX4vt01k0dcCHvP4tY0fOCLkQeMhXXRNmH7/muIUTkFOQNzkAtE0RmqgaF/unabvYnsnCu2CjIMgueg==}
+    peerDependencies:
+      vue: ^3.0.0
+    dependencies:
+      dompurify: 3.0.8
+      vue: 3.3.8(typescript@5.2.2)
+    dev: false
+
   /vue-eslint-parser@9.3.2(eslint@8.53.0):
     resolution: {integrity: sha512-q7tWyCVaV9f8iQyIA5Mkj/S6AoJ9KBN8IeUSf3XEmBrOtxOZnfTg5s4KClbZBCK3GtnT/+RyCLZyDHuZwTuBjg==}
     engines: {node: ^14.17.0 || >=16.0.0}

public/readme.md

@@ -0,0 +1,31 @@
+# 操作说明
+
+## 步骤
+
+1. 首次进入，没有数据展示，可以选择使用默认数据进行使用，查看整体展示效果。推荐导入自己的数据来进行操作。步骤如下：
+
+    a. 人员配置-人员名单-下载模板，下载数据模板并修改填入数据(请注意表头不可修改)。
+
+    b. 修改好后在同一个页面点击‘上传文件’，上传修改后的excel表格。
+
+2. 进入奖品配置，修改自己的奖品信息。名称尽量短一点，方便展示；是否全员参加意指该项奖项是否从全体人员中抽取（已中奖的依然可以参与）；获奖人数指该奖项要抽取的人数；已获奖人数不可编辑；已抽取被选中时指该奖项已使用，取消选择会重置该奖项，但不会重置已获奖的人；图片是在首页展示时的奖品图片（可在图片列表自己上传）；左侧图标调整奖品顺序用。
+
+完成上面两项已可以正常使用。
+
+## 功能说明
+
+1. 增加临时抽奖：抽奖页面的奖项列表有个‘+’号按钮，点击可临时增加抽奖，注意：一次只能增加一项临时抽奖，新增成功后当前奖项即设置为该临时奖项，抽取成功后返回正常奖项列表．
+2. 音乐与图片列表，可自己上传文件进行使用，图片上传成功后就可以在奖项配置中进行选择图片展示，音乐上传成功后即加入了播放列表．
+3. 音乐播放：使用鼠标左键点击是播放/暂停，使用鼠标右键点击是播放下一首．
+4. 界面配置-图案设置中可使用鼠标点击自定义配置首页中的高亮图案．
+5. 若不想在首页展示奖品列表,将界面配置中的'是否常显奖项列表'选中．
+6. 首页点击按钮时按钮值不会立即更新，会等动画结束后才会更新为目标值，属于正常现象．
+
+## 快捷键
+
+在抽奖页面设置了快捷键。
+
+| 快捷键 | 说明 |
+| --- | --- |
+| Space | 进入抽奖/开始/抽取幸运儿/继续 |
+| Esc | 取消 |

src/hooks/useElement.ts

@@ -3,7 +3,7 @@ import { IPersonConfig } from '@/types/storeType'
 
 export const useElementStyle = (element: any, person: IPersonConfig, index: number, patternList: number[], patternColor: string, cardColor: string, cardSize: { width: number, height: number }, textSize: number, mod: 'default' | 'lucky'|'sphere' = 'default') => {
     if (patternList.includes(index+1)&&mod=='default') {
-        element.style.backgroundColor = rgba(patternColor, Math.random() * 0.5 + 0.5)
+        element.style.backgroundColor = rgba(patternColor, Math.random() * 0.2 + 0.8)
     }
     else if(mod=='sphere'||mod=='default') {
         element.style.backgroundColor = rgba(cardColor, Math.random() * 0.5 + 0.25)

src/main.ts

@@ -1,8 +1,10 @@
 import { createApp } from 'vue';
 import './style.css';
+import './style/markdown.css'
 import './style/style.scss'
 import * as THREE from 'three';
 import App from './App.vue';
+import VueDOMPurifyHTML from 'vue-dompurify-html'
 
 const app = createApp(App);
 // 全局svg组件
@@ -19,4 +21,4 @@ pinia.use(piniaPluginPersist);
 
 app.config.globalProperties.$THREE = THREE; //挂载到原型
 app.component('svg-icon', svgIcon);
-app.use(router).use(pinia).mount('#app');
+app.use(router).use(VueDOMPurifyHTML).use(pinia).mount('#app');

src/router/index.ts

@@ -98,7 +98,16 @@ export const configRoutes={
                 }
             }
         ]
-      }
+      },
+      {
+        path: '/log-lottery/config/readme',
+        name: 'Readme',
+        component: () => import('@/views/Config/Readme/index.vue'),
+        meta:{
+            title: '操作说明',
+            icon: 'readme'
+        }
+      },
     ]
   }
 const routes = [

src/store/prizeConfig.ts

@@ -83,15 +83,9 @@ return state.prizeConfig.prizeList;
         },
         // 更新奖项数据
         updatePrizeConfig(prizeConfigItem: IPrizeConfig) {
-            // const index = this.prizeConfig.prizeList.findIndex(item => item.id === prizeConfigItem.id);
+            const prizeListLength=this.prizeConfig.prizeList.length;
-            // this.prizeConfig.prizeList[index] = prizeConfigItem;
+            if(prizeConfigItem.isUsed&&prizeListLength){
-            // if(prizeConfigItem.isUsed&&index+1<this.prizeConfig.prizeList.length){
+                for(let i=0;i<prizeListLength;i++){
-            //     // 设置下一个为currentPrize
-            //     this.setCurrentPrize(this.prizeConfig.prizeList[index+1]);
-            // }
-            if(prizeConfigItem.isUsed&&this.prizeConfig.prizeList.length){
-                // 设置下一个为currentPrize
-                for(let i=0;i<this.prizeConfig.prizeList.length;i++){
                     if(!this.prizeConfig.prizeList[i].isUsed){
                         this.setCurrentPrize(this.prizeConfig.prizeList[i]);
                         break;

src/views/Config/Readme/index.vue

@@ -0,0 +1,27 @@
+<script setup lang='ts'>
+import {ref,onMounted} from 'vue'
+import markdownit from 'markdown-it'
+const md = markdownit()
+const readmeHtml=ref('')
+const readMd=()=>{
+    fetch('/log-lottery/readme.md')
+    .then(res=>res.text())
+    .then(res=>{
+        readmeHtml.value = md.render(res)
+    })
+}
+
+onMounted(() => {
+    readMd()
+})
+</script>
+
+<template>
+<div class="mb-10 ml-3">
+    <div class="markdown-body" v-dompurify-html="readmeHtml"></div>
+</div>
+</template>
+
+<style scoped>
+
+</style>

src/views/Home/PrizeList.vue

@@ -44,7 +44,6 @@ const submitTemporaryPrize = () => {
     temporaryPrize.value.isShow = true
     temporaryPrize.value.id=new Date().getTime().toString()
     prizeConfig.setCurrentPrize(temporaryPrize.value)
-    prizeConfig.setCurrentPrize(temporaryPrize.value)
 }
 onMounted(() => {
     prizeListContainerRef.value.style.height = getPrizeListHeight() + 'px'

src/views/Home/index.vue

@@ -5,7 +5,7 @@ import { useElementStyle, useElementPosition } from '@/hooks/useElement'
 import StarsBackground from '@/components/StarsBackground/index.vue'
 import confetti from 'canvas-confetti'
 import { filterData, selectCard } from '@/utils'
-import {rgba} from '@/utils/color'
+import { rgba } from '@/utils/color'
 import { IPersonConfig } from '@/types/storeType'
 // import * as THREE from 'three'
 import { Scene, PerspectiveCamera, Object3D, Vector3 } from 'three'
@@ -29,9 +29,9 @@ const personConfig = useStore().personConfig
 const globalConfig = useStore().globalConfig
 const prizeConfig = useStore().prizeConfig
 
-const { getAllPersonList: allPersonList, getNotPersonList: notPersonList,getNotThisPrizePersonList: notThisPrizePersonList } = storeToRefs(personConfig)
+const { getAllPersonList: allPersonList, getNotPersonList: notPersonList, getNotThisPrizePersonList: notThisPrizePersonList } = storeToRefs(personConfig)
 const { getCurrentPrize: currentPrize } = storeToRefs(prizeConfig)
-const { getTopTitle: topTitle, getCardColor: cardColor,getPatterColor: patternColor, getPatternList: patternList, getTextColor: textColor, getLuckyColor: luckyColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount } = storeToRefs(globalConfig)
+const { getTopTitle: topTitle, getCardColor: cardColor, getPatterColor: patternColor, getPatternList: patternList, getTextColor: textColor, getLuckyColor: luckyColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount } = storeToRefs(globalConfig)
 const tableData = ref<any[]>([])
 // const tableData = ref<any[]>(JSON.parse(JSON.stringify(alreadyPersonList.value)).concat(JSON.parse(JSON.stringify(notPersonList.value))))
 const currentStatus = ref(0) // 0为初始状态， 1为抽奖准备状态，2为抽奖中状态，3为抽奖结束状态
@@ -57,7 +57,7 @@ const targets = {
 const luckyTargets = ref<any[]>([])
 const luckyCardList = ref<number[]>([])
 let luckyCount = ref(10)
-const personPool=ref<IPersonConfig[]>([])
+const personPool = ref<IPersonConfig[]>([])
 
 const intervalTimer = ref<any>(null)
 // const currentPrizeValue = ref(JSON.parse(JSON.stringify(currentPrize.value)))
@@ -129,7 +129,7 @@ const init = () => {
         detail.innerHTML = `${tableData.value[i].department}<br/>${tableData.value[i].identity}`;
         element.appendChild(detail);
 
-        element = useElementStyle(element, tableData.value[i],i,patternList.value,patternColor.value, cardColor.value, cardSize.value, textSize.value)
+        element = useElementStyle(element, tableData.value[i], i, patternList.value, patternColor.value, cardColor.value, cardSize.value, textSize.value)
         const object = new CSS3DObject(element);
         object.position.x = Math.random() * 4000 - 2000;
         object.position.y = Math.random() * 4000 - 2000;
@@ -209,13 +209,13 @@ const init = () => {
 
 const transform = (targets: any[], duration: number) => {
     TWEEN.removeAll();
-    if(intervalTimer.value){
+    if (intervalTimer.value) {
         clearInterval(intervalTimer.value);
-        intervalTimer.value=null
+        intervalTimer.value = null
         randomBallData('sphere')
     }
 
-return new Promise((resolve) => {
+    return new Promise((resolve) => {
         const objLength = objects.value.length;
         for (let i = 0; i < objLength; ++i) {
             let object = objects.value[i];
@@ -233,9 +233,9 @@ return new Promise((resolve) => {
                 .start()
                 .onComplete(() => {
                     if (luckyCardList.value.length) {
-                        luckyCardList.value.forEach((cardIndex:any)=>{
+                        luckyCardList.value.forEach((cardIndex: any) => {
                             const item = objects.value[cardIndex]
-                            useElementStyle(item.element, {} as any,i,patternList.value,patternColor.value, cardColor.value, cardSize.value, textSize.value,'sphere')
+                            useElementStyle(item.element, {} as any, i, patternList.value, patternColor.value, cardColor.value, cardSize.value, textSize.value, 'sphere')
                         })
                     }
                     luckyTargets.value = [];
@@ -255,8 +255,6 @@ return new Promise((resolve) => {
                 resolve('')
             });
     })
-
-    // 整体自动旋转
 }
 function onWindowResize() {
     camera.value.aspect = window.innerWidth / window.innerHeight
@@ -303,7 +301,6 @@ function rollBall(rotateY: number, duration: number) {
             })
             .onComplete(() => {
                 resolve('')
-                canOperate.value = true
             })
     })
 }
@@ -333,7 +330,7 @@ function resetCamera() {
                 .onUpdate(render)
                 .start()
                 .onComplete(() => {
-                    canOperate.value = true // 相机恢复原位
+                    canOperate.value = true
                     // camera.value.lookAt(scene.value.position)
                     camera.value.position.y = 0
                     camera.value.position.x = 0
@@ -356,11 +353,11 @@ const enterLottery = async () => {
     if (!intervalTimer.value) {
         randomBallData()
     }
-if(patternList.value.length){
+    if (patternList.value.length) {
-    patternList.value.forEach((item:number)=>{
+        patternList.value.forEach((item: number) => {
-        objects.value[item-1].element.style.backgroundColor = rgba(cardColor.value, Math.random() * 0.5 + 0.25)
+            objects.value[item - 1].element.style.backgroundColor = rgba(cardColor.value, Math.random() * 0.5 + 0.25)
-    })
+        })
-}
+    }
     canOperate.value = false
     await transform(targets.sphere, 1000)
     currentStatus.value = 1
@@ -372,7 +369,7 @@ const startLottery = () => {
         return
     }
     // 验证是否已抽完全部奖项
-    if (currentPrize.value.isUsed) {
+    if (currentPrize.value.isUsed || !currentPrize.value) {
         toast.open({
             message: '抽奖抽完了',
             type: 'warning',
@@ -382,9 +379,9 @@ const startLottery = () => {
 
         return
     }
-    personPool.value=currentPrize.value.isAll ? notThisPrizePersonList.value : notPersonList.value
+    personPool.value = currentPrize.value.isAll ? notThisPrizePersonList.value : notPersonList.value
     // 验证抽奖人数是否还够
-    if (personPool.value.length < currentPrize.value.count-currentPrize.value.isUsedCount) {
+    if (personPool.value.length < currentPrize.value.count - currentPrize.value.isUsedCount) {
         toast.open({
             message: '抽奖人数不够',
             type: 'warning',
@@ -405,11 +402,10 @@ const stopLottery = async () => {
     clearInterval(intervalTimer.value)
     intervalTimer.value = null
     canOperate.value = false
-    // TWEEN.removeAll();
     rollBall(0, 1)
     // 抽奖池是否为全体人员
-    //  personPool=currentPrize.value.isAll ? notThisPrizePersonList.value : notPersonList.value
     // 每次最多抽十个
+    luckyCount.value = 10
     const leftover = currentPrize.value.count - currentPrize.value.isUsedCount
     leftover < luckyCount.value ? luckyCount.value = leftover : luckyCount
     if (personPool.value.length < leftover) {
@@ -443,9 +439,13 @@ const stopLottery = async () => {
             }, 1200)
             .easing(TWEEN.Easing.Exponential.InOut)
             .onStart(() => {
-                item.element = useElementStyle(item.element, person,cardIndex,patternList.value,patternColor.value, luckyColor.value, { width: cardSize.value.width * 2, height: cardSize.value.height * 2 }, textSize.value * 2, 'lucky')
+                item.element = useElementStyle(item.element, person, cardIndex, patternList.value, patternColor.value, luckyColor.value, { width: cardSize.value.width * 2, height: cardSize.value.height * 2 }, textSize.value * 2, 'lucky')
             })
             .start()
+            .onComplete(() => {
+                canOperate.value = true
+                currentStatus.value = 3
+            })
         new TWEEN.Tween(item.rotation)
             .to({
                 x: 0,
@@ -459,23 +459,21 @@ const stopLottery = async () => {
                 resetCamera()
             })
     })
-
-    currentStatus.value = 3
 }
 // 继续
 const continueLottery = async () => {
+    if (!canOperate.value) {
+        return
+    }
     currentPrize.value.isUsedCount += luckyCount.value
+    luckyCount.value = 0
     if (currentPrize.value.isUsedCount >= currentPrize.value.count) {
         currentPrize.value.isUsed = true
+        currentPrize.value.isUsedCount = currentPrize.value.count
     }
     personConfig.addAlreadyPersonList(luckyTargets.value, currentPrize.value)
     prizeConfig.updatePrizeConfig(currentPrize.value)
-
-    prizeConfig.setCurrentPrize(currentPrize.value)
-    luckyCount.value = 10
     await enterLottery()
-    // startLottery()
-    currentStatus.value = 1
 }
 const quitLottery = () => {
     enterLottery()
@@ -544,31 +542,64 @@ const setDefaultPersonList = () => {
     window.location.reload()
 }
 // 随机替换数据
-const randomBallData = (mod: 'default' | 'lucky' |'sphere'='default') => {
+const randomBallData = (mod: 'default' | 'lucky' | 'sphere' = 'default') => {
     // 两秒执行一次
     intervalTimer.value = setInterval(() => {
         // 产生随机数数组
-        const cardRandomIndexArr = [Math.round(Math.random() * (tableData.value.length - 1)), Math.round(Math.random() * (tableData.value.length - 1)), Math.round(Math.random() * (tableData.value.length - 1))]
+        const indexLength = 4
-        const personRandomIndexArr = [Math.round(Math.random() * (allPersonList.value.length - 1)), Math.round(Math.random() * (allPersonList.value.length - 1)), Math.round(Math.random() * (allPersonList.value.length - 1))]
+        const cardRandomIndexArr: number[] = []
-
+        const personRandomIndexArr: number[] = []
-        for (let i = 0; i < cardRandomIndexArr.length; i++) {
+        for (let i = 0; i < indexLength; i++) {
-            objects.value[cardRandomIndexArr[i]].element = useElementStyle(objects.value[cardRandomIndexArr[i]].element, allPersonList.value[personRandomIndexArr[i]],cardRandomIndexArr[i],patternList.value,patternColor.value, cardColor.value, { width: cardSize.value.width, height: cardSize.value.height }, textSize.value,mod)
+            cardRandomIndexArr.push(Math.round(Math.random() * (tableData.value.length - 1)))
+            personRandomIndexArr.push(Math.round(Math.random() * (allPersonList.value.length - 1)))
+        }
+        for (let i = 0; i < cardRandomIndexArr.length; i++) {
+            objects.value[cardRandomIndexArr[i]].element = useElementStyle(objects.value[cardRandomIndexArr[i]].element, allPersonList.value[personRandomIndexArr[i]], cardRandomIndexArr[i], patternList.value, patternColor.value, cardColor.value, { width: cardSize.value.width, height: cardSize.value.height }, textSize.value, mod)
         }
-        // const randomCardIndex = Math.round(Math.random() * (tableData.value.length - 1))
-        // const randomPersonIndex = Math.round(Math.random() * (allPersonList.value.length - 1))
-        // objects.value[randomCardIndex].element = useElementStyle(objects.value[randomCardIndex].element, allPersonList.value[randomPersonIndex], cardColor.value, { width: cardSize.value.width, height: cardSize.value.height }, textSize.value, 'default')
     }, 200)
 }
+// 监听键盘
+const listenKeyboard = () => {
+    window.addEventListener('keydown', (e: any) => {
+        if ((e.keyCode !== 32 || e.keyCode !== 27) && !canOperate.value) {
+            return
+        }
+        if (e.keyCode === 27 && currentStatus.value === 3) {
+            quitLottery()
+        }
+        if(e.keyCode!==32){
+            return
+        }
+        switch (currentStatus.value) {
+            case 0:
+                enterLottery()
+                break;
+            case 1:
+                startLottery()
+                break;
+            case 2:
+                stopLottery()
+                break;
+            case 3:
+                continueLottery()
+                break;
+            default:
+                break;
+        }
+    })
+}
 onMounted(() => {
     initTableData();
     init();
     animation();
     containerRef.value!.style.color = `${textColor}`
     randomBallData()
+    listenKeyboard()
 });
 onUnmounted(() => {
     clearInterval(intervalTimer.value)
     intervalTimer.value = null
+    window.removeEventListener('keydown', listenKeyboard)
 })
 // watch(() => currentPrize.value.isUsed, (val) => {
 //     if (val) {
@@ -659,10 +690,12 @@ onUnmounted(() => {
     margin: 0 auto;
     font-size: 32px;
 }
-.header-title{
+
+.header-title {
     -webkit-animation: tracking-in-expand-fwd 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
-	        animation: tracking-in-expand-fwd 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
+    animation: tracking-in-expand-fwd 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
 }
+
 .start {
     // 居中
     display: flex;
@@ -886,7 +919,7 @@ strong {
     position: relative;
     transition: all 0.3s;
     -webkit-animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
-	        animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
+    animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
 }
 
 .btn-end::after {
@@ -951,38 +984,42 @@ strong {
         transform: scale(1);
     }
 }
+
 @-webkit-keyframes tracking-in-expand-fwd {
-  0% {
+    0% {
-    letter-spacing: -0.5em;
+        letter-spacing: -0.5em;
-    -webkit-transform: translateZ(-700px);
+        -webkit-transform: translateZ(-700px);
-            transform: translateZ(-700px);
+        transform: translateZ(-700px);
-    opacity: 0;
+        opacity: 0;
-  }
+    }
-  40% {
+
-    opacity: 0.6;
+    40% {
-  }
+        opacity: 0.6;
-  100% {
+    }
-    -webkit-transform: translateZ(0);
+
-            transform: translateZ(0);
+    100% {
-    opacity: 1;
+        -webkit-transform: translateZ(0);
-  }
+        transform: translateZ(0);
+        opacity: 1;
+    }
 }
+
 @keyframes tracking-in-expand-fwd {
-  0% {
+    0% {
-    letter-spacing: -0.5em;
+        letter-spacing: -0.5em;
-    -webkit-transform: translateZ(-700px);
+        -webkit-transform: translateZ(-700px);
-            transform: translateZ(-700px);
+        transform: translateZ(-700px);
-    opacity: 0;
+        opacity: 0;
-  }
+    }
-  40% {
+
-    opacity: 0.6;
+    40% {
-  }
+        opacity: 0.6;
-  100% {
+    }
-    -webkit-transform: translateZ(0);
+
-            transform: translateZ(0);
+    100% {
-    opacity: 1;
+        -webkit-transform: translateZ(0);
-  }
+        transform: translateZ(0);
+        opacity: 1;
+    }
 }
-
-
 </style>