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

2024-01-20 00:01:08 +08:00
parent c3ab47414e
commit ad2df0b8eb
8 changed files with 1368 additions and 11 deletions
--- a/package.json
+++ b/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",
--- a/pnpm-lock.yaml
+++ b/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)
@@ -1413,7 +1422,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 +2171,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 +2241,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 +2732,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 +3514,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 +3623,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 +4314,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 +5156,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 +5578,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}
--- a/src/main.ts
+++ b/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');
--- a/src/router/index.ts
+++ b/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 = [
--- a/src/style/markdown.css
+++ b/src/style/markdown.css
--- a/src/views/Config/Readme/index.vue
+++ b/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>
--- a/src/views/Config/Readme/readme.md
+++ b/src/views/Config/Readme/readme.md
@@ -0,0 +1,31 @@
+# 操作说明
+
+## 步骤
+
+1. 首次进入，没有数据展示，可以选择使用默认数据进行使用，查看整体展示效果。推荐导入自己的数据来进行操作。步骤如下：
+
+    a. 人员配置-人员名单-下载模板，下载数据模板并修改填入数据(请注意表头不可修改)。
+
+    b. 修改好后在同一个页面点击‘上传文件’，上传修改后的excel表格。
+
+2. 进入奖品配置，修改自己的奖品信息。名称尽量短一点，方便展示；是否全员参加意指该项奖项是否从全体人员中抽取（已中奖的依然可以参与）；获奖人数指该奖项要抽取的人数；已获奖人数不可编辑；已抽取被选中时指该奖项已使用，取消选择会重置该奖项，但不会重置已获奖的人；图片是在首页展示时的奖品图片（可在图片列表自己上传）；左侧图标调整奖品顺序用。
+
+完成上面两项已可以正常使用。
+
+## 功能说明
+
+1. 增加临时抽奖：抽奖页面的奖项列表有个‘+’号按钮，点击可临时增加抽奖，注意：一次只能增加一项临时抽奖，新增成功后当前奖项即设置为该临时奖项，抽取成功后返回正常奖项列表．
+2. 音乐与图片列表，可自己上传文件进行使用，图片上传成功后就可以在奖项配置中进行选择图片展示，音乐上传成功后即加入了播放列表．
+3. 音乐播放：使用鼠标左键点击是播放/暂停，使用鼠标右键点击是播放下一首．
+4. 界面配置-图案设置中可使用鼠标点击自定义配置首页中的高亮图案．
+5. 若不想在首页展示奖品列表,将界面配置中的'是否常显奖项列表'选中．
+6. 首页点击按钮时按钮值不会立即更新，会等动画结束后才会更新为目标值，属于正常现象．
+
+## 快捷键
+
+在抽奖页面设置了快捷键。
+
+| 快捷键 | 说明 |
+| --- | --- |
+| Space | 进入抽奖/开始/抽取幸运儿/继续 |
+| Esc | 取消 |
--- a/src/views/Home/index.vue
+++ b/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',
@@ -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) {