feat: 增加快捷键以及说明文档

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/views/Config/Readme/index.vue

@@ -0,0 +1,28 @@
+<script setup lang='ts'>
+import {ref,onMounted} from 'vue'
+import markdownit from 'markdown-it'
+
+const md = markdownit()
+const readmeHtml=ref('')
+const readMd=()=>{
+    fetch('/src/views/Config/Readme/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/Config/Readme/readme.md

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

src/views/Home/index.vue

@@ -369,7 +369,7 @@ const startLottery = () => {
         return
     }
     // 验证是否已抽完全部奖项
-    if (currentPrize.value.isUsed||!currentPrize.value) {
+    if (currentPrize.value.isUsed || !currentPrize.value) {
         toast.open({
             message: '抽奖抽完了',
             type: 'warning',
@@ -471,8 +471,8 @@ const continueLottery = async () => {
         currentPrize.value.isUsed = true
         currentPrize.value.isUsedCount = currentPrize.value.count
     }
-        personConfig.addAlreadyPersonList(luckyTargets.value, currentPrize.value)
-        prizeConfig.updatePrizeConfig(currentPrize.value)
+    personConfig.addAlreadyPersonList(luckyTargets.value, currentPrize.value)
+    prizeConfig.updatePrizeConfig(currentPrize.value)
     await enterLottery()
 }
 const quitLottery = () => {
@@ -546,10 +546,10 @@ const randomBallData = (mod: 'default' | 'lucky' | 'sphere' = 'default') => {
     // 两秒执行一次
     intervalTimer.value = setInterval(() => {
         // 产生随机数数组
-        const indexLength=4
-        const cardRandomIndexArr:number[]=[]
-        const personRandomIndexArr:number[]=[]
-        for(let i=0;i<indexLength;i++){
+        const indexLength = 4
+        const cardRandomIndexArr: number[] = []
+        const personRandomIndexArr: number[] = []
+        for (let i = 0; i < indexLength; i++) {
             cardRandomIndexArr.push(Math.round(Math.random() * (tableData.value.length - 1)))
             personRandomIndexArr.push(Math.round(Math.random() * (allPersonList.value.length - 1)))
         }
@@ -558,16 +558,48 @@ const randomBallData = (mod: 'default' | 'lucky' | 'sphere' = '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) {