Merge pull request #89 from LOG1997/feature-2025-0920

Feature 2025 0920

.github/workflows/node.js.yml

@@ -15,7 +15,7 @@ jobs:
       contents: read
     strategy:
       matrix:
-        node-version: [20.x]
+        node-version: [22.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:

package.json

@@ -21,6 +21,7 @@
         "axios": "^1.7.8",
         "canvas-confetti": "^1.9.3",
         "dayjs": "^1.11.13",
+        "dexie": "^4.2.1",
         "github-markdown-css": "^5.8.0",
         "localforage": "^1.10.0",
         "markdown-it": "^14.1.0",
@@ -58,6 +59,7 @@
         "@vitest/ui": "^3.2.4",
         "@vue/test-utils": "^2.4.6",
         "autoprefixer": "^10.4.20",
+        "baseline-browser-mapping": "^2.8.32",
         "daisyui": "^5.1.13",
         "eslint": "^9.15.0",
         "eslint-plugin-vue": "^10.4.0",

pnpm-lock.yaml

@@ -23,6 +23,9 @@ importers:
       dayjs:
         specifier: ^1.11.13
         version: 1.11.13
+      dexie:
+        specifier: ^4.2.1
+        version: 4.2.1
       github-markdown-css:
         specifier: ^5.8.0
         version: 5.8.0
@@ -129,6 +132,9 @@ importers:
       autoprefixer:
         specifier: ^10.4.20
         version: 10.4.20(postcss@8.4.49)
+      baseline-browser-mapping:
+        specifier: ^2.8.32
+        version: 2.8.32
       daisyui:
         specifier: ^5.1.13
         version: 5.1.13
@@ -1363,42 +1369,36 @@ packages:
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@parcel/watcher-linux-arm-musl@2.5.0':
     resolution: {integrity: sha512-6uHywSIzz8+vi2lAzFeltnYbdHsDm3iIB57d4g5oaB9vKwjb6N6dRIgZMujw4nm5r6v9/BQH0noq6DzHrqr2pA==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
-    libc: [musl]
 
   '@parcel/watcher-linux-arm64-glibc@2.5.0':
     resolution: {integrity: sha512-BfNjXwZKxBy4WibDb/LDCriWSKLz+jJRL3cM/DllnHH5QUyoiUNEp3GmL80ZqxeumoADfCCP19+qiYiC8gUBjA==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@parcel/watcher-linux-arm64-musl@2.5.0':
     resolution: {integrity: sha512-S1qARKOphxfiBEkwLUbHjCY9BWPdWnW9j7f7Hb2jPplu8UZ3nes7zpPOW9bkLbHRvWM0WDTsjdOTUgW0xLBN1Q==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@parcel/watcher-linux-x64-glibc@2.5.0':
     resolution: {integrity: sha512-d9AOkusyXARkFD66S6zlGXyzx5RvY+chTP9Jp0ypSTC9d4lzyRs9ovGf/80VCxjKddcUvnsGwCHWuF2EoPgWjw==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@parcel/watcher-linux-x64-musl@2.5.0':
     resolution: {integrity: sha512-iqOC+GoTDoFyk/VYSFHwjHhYrk8bljW6zOhPuhi5t9ulqiYq1togGJB5e3PwYVFFfeVgc6pbz3JdQyDoBszVaA==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@parcel/watcher-win32-arm64@2.5.0':
     resolution: {integrity: sha512-twtft1d+JRNkM5YbmexfcH/N4znDtjgysFaV9zvZmmJezQsKpkfLYJ+JFV3uygugK6AtIM2oADPkB2AdhBrNig==}
@@ -1469,67 +1469,56 @@ packages:
     resolution: {integrity: sha512-aL6hRwu0k7MTUESgkg7QHY6CoqPgr6gdQXRJI1/VbFlUMwsSzPGSR7sG5d+MCbYnJmJwThc2ol3nixj1fvI/zQ==}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.52.0':
     resolution: {integrity: sha512-BTs0M5s1EJejgIBJhCeiFo7GZZ2IXWkFGcyZhxX4+8usnIo5Mti57108vjXFIQmmJaRyDwmV59Tw64Ap1dkwMw==}
     cpu: [arm]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.52.0':
     resolution: {integrity: sha512-uj672IVOU9m08DBGvoPKPi/J8jlVgjh12C9GmjjBxCTQc3XtVmRkRKyeHSmIKQpvJ7fIm1EJieBUcnGSzDVFyw==}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.52.0':
     resolution: {integrity: sha512-/+IVbeDMDCtB/HP/wiWsSzduD10SEGzIZX2945KSgZRNi4TSkjHqRJtNTVtVb8IRwhJ65ssI56krlLik+zFWkw==}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-loong64-gnu@4.52.0':
     resolution: {integrity: sha512-U1vVzvSWtSMWKKrGoROPBXMh3Vwn93TA9V35PldokHGqiUbF6erSzox/5qrSMKp6SzakvyjcPiVF8yB1xKr9Pg==}
     cpu: [loong64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-ppc64-gnu@4.52.0':
     resolution: {integrity: sha512-X/4WfuBAdQRH8cK3DYl8zC00XEE6aM472W+QCycpQJeLWVnHfkv7RyBFVaTqNUMsTgIX8ihMjCvFF9OUgeABzw==}
     cpu: [ppc64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-gnu@4.52.0':
     resolution: {integrity: sha512-xIRYc58HfWDBZoLmWfWXg2Sq8VCa2iJ32B7mqfWnkx5mekekl0tMe7FHpY8I72RXEcUkaWawRvl3qA55og+cwQ==}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-musl@4.52.0':
     resolution: {integrity: sha512-mbsoUey05WJIOz8U1WzNdf+6UMYGwE3fZZnQqsM22FZ3wh1N887HT6jAOjXs6CNEK3Ntu2OBsyQDXfIjouI4dw==}
     cpu: [riscv64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-s390x-gnu@4.52.0':
     resolution: {integrity: sha512-qP6aP970bucEi5KKKR4AuPFd8aTx9EF6BvutvYxmZuWLJHmnq4LvBfp0U+yFDMGwJ+AIJEH5sIP+SNypauMWzg==}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.52.0':
     resolution: {integrity: sha512-nmSVN+F2i1yKZ7rJNKO3G7ZzmxJgoQBQZ/6c4MuS553Grmr7WqR7LLDcYG53Z2m9409z3JLt4sCOhLdbKQ3HmA==}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.52.0':
     resolution: {integrity: sha512-2d0qRo33G6TfQVjaMR71P+yJVGODrt5V6+T0BDYH4EMfGgdC/2HWDVjSSFw888GSzAZUwuska3+zxNUCDco6rQ==}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-openharmony-arm64@4.52.0':
     resolution: {integrity: sha512-A1JalX4MOaFAAyGgpO7XP5khquv/7xKzLIyLmhNrbiCxWpMlnsTYr8dnsWM7sEeotNmxvSOEL7F65j0HXFcFsw==}
@@ -1607,28 +1596,24 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@tailwindcss/oxide-linux-arm64-musl@4.1.13':
     resolution: {integrity: sha512-hZQrmtLdhyqzXHB7mkXfq0IYbxegaqTmfa1p9MBj72WPoDD3oNOh1Lnxf6xZLY9C3OV6qiCYkO1i/LrzEdW2mg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@tailwindcss/oxide-linux-x64-gnu@4.1.13':
     resolution: {integrity: sha512-uaZTYWxSXyMWDJZNY1Ul7XkJTCBRFZ5Fo6wtjrgBKzZLoJNrG+WderJwAjPzuNZOnmdrVg260DKwXCFtJ/hWRQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@tailwindcss/oxide-linux-x64-musl@4.1.13':
     resolution: {integrity: sha512-oXiPj5mi4Hdn50v5RdnuuIms0PVPI/EG4fxAfFiIKQh5TgQgX7oSuDWntHW7WNIi/yVLAiS+CRGW4RkoGSSgVQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@tailwindcss/oxide-wasm32-wasi@4.1.13':
     resolution: {integrity: sha512-+LC2nNtPovtrDwBc/nqnIKYh/W2+R69FA0hgoeOn64BdCX522u19ryLh3Vf3F8W49XBcMIxSe665kwy21FkhvA==}
@@ -2281,8 +2266,8 @@ packages:
     resolution: {integrity: sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==}
     engines: {node: '>=0.10.0'}
 
-  baseline-browser-mapping@2.8.6:
+  baseline-browser-mapping@2.8.32:
-    resolution: {integrity: sha512-wrH5NNqren/QMtKUEEJf7z86YjfqW/2uw3IL3/xpqZUC95SSVIFXYQeeGjL6FT/X68IROu6RMehZQS5foy2BXw==}
+    resolution: {integrity: sha512-OPz5aBThlyLFgxyhdwf/s2+8ab3OvT7AdTNvKHBwpXomIYeXqpUUuT8LrdtxZSsWJ4R4CU1un4XGh5Ez3nlTpw==}
     hasBin: true
 
   bidi-js@1.0.3:
@@ -2701,6 +2686,9 @@ packages:
   devlop@1.1.0:
     resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
 
+  dexie@4.2.1:
+    resolution: {integrity: sha512-Ckej0NS6jxQ4Po3OrSQBFddayRhTCic2DoCAG5zacOfOVB9P2Q5Xc5uL/nVa7ZVs+HdMnvUPzLFCB/JwpB6Csg==}
+
   dom-accessibility-api@0.5.16:
     resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
 
@@ -3747,28 +3735,24 @@ packages:
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   lightningcss-linux-arm64-musl@1.30.1:
     resolution: {integrity: sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   lightningcss-linux-x64-gnu@1.30.1:
     resolution: {integrity: sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   lightningcss-linux-x64-musl@1.30.1:
     resolution: {integrity: sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   lightningcss-win32-arm64-msvc@1.30.1:
     resolution: {integrity: sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==}
@@ -7823,7 +7807,7 @@ snapshots:
       mixin-deep: 1.3.2
       pascalcase: 0.1.1
 
-  baseline-browser-mapping@2.8.6: {}
+  baseline-browser-mapping@2.8.32: {}
 
   bidi-js@1.0.3:
     dependencies:
@@ -7886,7 +7870,7 @@ snapshots:
 
   browserslist@4.26.2:
     dependencies:
-      baseline-browser-mapping: 2.8.6
+      baseline-browser-mapping: 2.8.32
       caniuse-lite: 1.0.30001743
       electron-to-chromium: 1.5.222
       node-releases: 2.0.21
@@ -8238,6 +8222,8 @@ snapshots:
     dependencies:
       dequal: 2.0.3
 
+  dexie@4.2.1: {}
+
   dom-accessibility-api@0.5.16: {}
 
   dom-serializer@0.2.2:

src/App.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { onMounted, provide, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { loadingKey, loadingState } from '@/components/Loading'
 import PlayMusic from '@/components/PlayMusic/index.vue'
 import useStore from '@/store'
 import { themeChange } from '@/utils'
-import { storeToRefs } from 'pinia'
-import { onMounted, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
 
+provide(loadingKey, loadingState)
 const { t } = useI18n()
 const globalConfig = useStore().globalConfig
 const prizeConfig = useStore().prizeConfig
@@ -14,7 +16,6 @@ const { getTheme: localTheme } = storeToRefs(globalConfig)
 const { getPrizeConfig: prizeList } = storeToRefs(prizeConfig)
 
 const tipDialog = ref()
-
 // 设置当前奖列表
 function setCurrentPrize() {
   if (prizeList.value.length <= 0) {

src/components.d.ts

@@ -9,13 +9,15 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     DaiysuiTable: typeof import('./components/DaiysuiTable/index.vue')['default']
+    Dialog: typeof import('./components/Dialog/index.vue')['default']
     EditSeparateDialog: typeof import('./components/NumberSeparate/EditSeparateDialog.vue')['default']
     HelloWorld: typeof import('./components/HelloWorld.vue')['default']
     ImageSync: typeof import('./components/ImageSync/index.vue')['default']
+    Loading: typeof import('./components/Loading/index.vue')['default']
+    PageHeader: typeof import('./components/PageHeader/index.vue')['default']
     PlayMusic: typeof import('./components/PlayMusic/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    StarsBackground: typeof import('./components/StarsBackground/index.vue')['default']
     SvgIcon: typeof import('./components/SvgIcon/index.vue')['default']
     ToTop: typeof import('./components/ToTop/index.vue')['default']
   }

src/components/Dialog/index.vue

@@ -0,0 +1,59 @@
+<script setup lang='ts'>
+import { ref, toRefs } from 'vue'
+import i18n from '@/locales/i18n'
+
+interface Props {
+  title: string
+  desc: string
+  cancelText?: string
+  submitText?: string
+  submitFunc: () => void
+  cancelFunc?: () => void
+}
+const props = withDefaults(defineProps<Props>(), {
+  cancelText: i18n.global.t('button.cancel'),
+  submitText: i18n.global.t('button.confirm'),
+  cancelFunc: () => {},
+})
+
+const dialogRef = ref <HTMLDialogElement | null> (null)
+function defaultCancelFunc() {
+  dialogRef.value?.close()
+}
+
+function showDialog() {
+  dialogRef.value?.showModal()
+}
+defineExpose({
+  showDialog,
+})
+const { title, desc, cancelText, submitText, submitFunc, cancelFunc = defaultCancelFunc } = toRefs(props)
+</script>
+
+<template>
+  <dialog id="my_modal" ref="dialogRef" class="border-none modal">
+    <div class="modal-box">
+      <h3 class="text-lg font-bold">
+        {{ title }}
+      </h3>
+      <p class="py-4">
+        {{ desc }}
+      </p>
+      <div class="modal-action">
+        <form method="dialog" class="flex gap-3">
+          <!-- if there is a button in form, it will close the modal -->
+          <button class="btn" @click="cancelFunc">
+            {{ cancelText }}
+          </button>
+          <button class="btn" @click="submitFunc">
+            {{ submitText }}
+          </button>
+        </form>
+      </div>
+    </div>
+  </dialog>
+</template>
+
+<style scoped>
+
+</style>

src/components/Loading/index.ts

@@ -0,0 +1,5 @@
+import type { LoadingOptions } from './loading-context'
+import Loading from './index.vue'
+import { loadingKey, loadingState } from './loading-context'
+
+export { Loading, loadingKey, LoadingOptions, loadingState }

src/components/Loading/index.vue

@@ -0,0 +1,22 @@
+<script setup lang='ts'>
+import type { LoadingOptions } from './loading-context'
+import { inject } from 'vue'
+import { loadingKey } from './loading-context'
+
+// 注入全局状态
+const loading = inject(loadingKey) as LoadingOptions
+
+// 解构状态（响应式）
+const { visible, text } = loading
+</script>
+
+<template>
+  <div v-if="visible" class="fixed top-0 left-0 w-screen h-screen bg-[rgba(0,0,0,0.5)] flex flex-col gap-6 justify-center items-center z-50">
+    <span v-if="visible" class="loading loading-spinner loading-xl" />
+    <span>{{ text ? text : '加载中' }}</span>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/components/Loading/loading-context.ts

@@ -0,0 +1,61 @@
+// src/contexts/loading-context.ts
+import type { InjectionKey, Ref } from 'vue'
+import { ref } from 'vue'
+
+// 定义 Loading 配置类型
+export interface LoadingOptions {
+    visible: Ref<boolean>
+    text: Ref<string>
+    fullscreen: Ref<boolean>
+    zIndex: Ref<number>
+    count: Ref<number>
+    show: (options?: Partial<{ text: string, fullscreen: boolean, zIndex: number }>) => void
+    hide: () => void
+}
+
+// 注入密钥（Symbol 确保唯一性）
+export const loadingKey: InjectionKey<LoadingOptions> = Symbol('loading')
+
+// 全局状态（单例）
+const visible = ref(false)
+const text = ref('')
+const fullscreen = ref(true)
+const zIndex = ref(9999)
+const count = ref(0)
+
+// 显示 Loading
+function show(options?: Partial<{ text: string, fullscreen: boolean, zIndex: number }>) {
+    count.value++
+    if (count.value > 1)
+        return
+    visible.value = true
+    if (options) {
+        text.value = options.text || ''
+        fullscreen.value = options.fullscreen ?? true
+        zIndex.value = options.zIndex || 9999
+    }
+}
+
+// 隐藏 Loading
+function hide() {
+    if (count.value <= 0)
+        return
+    count.value--
+    if (count.value === 0) {
+        visible.value = false
+        text.value = ''
+        fullscreen.value = true
+        zIndex.value = 9999
+    }
+}
+
+// 导出全局状态（供根组件提供）
+export const loadingState: LoadingOptions = {
+    visible,
+    text,
+    fullscreen,
+    zIndex,
+    count,
+    show,
+    hide,
+}

src/components/PageHeader/index.vue

@@ -0,0 +1,24 @@
+<script setup lang='ts'>
+const props = defineProps<{
+  title: string
+}>()
+</script>
+
+<template>
+  <header>
+    <h1 class="text-lg leading-10">
+      {{ props.title }}
+    </h1>
+    <div class="button-group my-4">
+      <slot name="buttons" />
+    </div>
+    <div class="divider mt-0" />
+    <div>
+      <slot name="alerts" />
+    </div>
+  </header>
+</template>
+
+<style scoped>
+
+</style>

src/components/StarsBackground/index.vue

@@ -1,71 +0,0 @@
-<script setup lang='ts'>
-import Sparticles from 'sparticles';
-import { ref, onMounted, onUnmounted } from 'vue';
-import { useElementSize } from '@vueuse/core';
-import localforage from 'localforage'
-const props = defineProps({
-    homeBackground: {
-        type: Object,
-        default: () => ({
-            id: '',
-            name: '',
-            url: ''
-        })
-    }
-})
-const imageDbStore = localforage.createInstance({
-    name: 'imgStore'
-})
-const imgUrl = ref('')
-const starRef = ref();
-
-const { width, height } = useElementSize(starRef);
-let options = ref({ shape: 'star', parallax: 1.2, rotate: true, twinkle: true, speed: 10, count: 200 });
-function addSparticles(node: any, width: number, height: number) {
-    new Sparticles(node, options.value, width, height);
-}
-// 页面大小改变时
-const listenWindowSize = () => {
-    window.addEventListener('resize', () => {
-        if (width.value && height.value) {
-            addSparticles(starRef.value, width.value, height.value);
-        }
-    });
-}
-
-const getImageStoreItem = async (item: any): Promise<string> => {
-    let image = ''
-    if (item.url == 'Storage') {
-        const key = item.id;
-        image = await imageDbStore.getItem(key) as string
-    }
-    else {
-        image = item.url
-    }
-
-
-    return image
-}
-onMounted(() => {
-    getImageStoreItem(props.homeBackground).then((image) => {
-        imgUrl.value = image
-    })
-    addSparticles(starRef.value, width.value, height.value);
-    listenWindowSize()
-})
-onUnmounted(() => {
-    window.removeEventListener('resize', listenWindowSize)
-})
-</script>
-
-<template>
-    <div class="home-background w-screen h-screen overflow-hidden" v-if="homeBackground.url">
-        <img :src="imgUrl" class="w-full h-full object-cover" alt="">
-    </div>
-    <div v-else class="w-screen h-screen overflow-hidden" ref="starRef">
-    </div>
-</template>
-
-<style lang='scss' scoped>
-
-</style>

src/layout/index.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import ToTop from '@/components/ToTop/index.vue'
 import { useScroll } from '@vueuse/core'
 // import Header from './Header/index.vue';
 // import Footer from './Footer/index.vue';
 import { ref } from 'vue'
+import { Loading } from '@/components/Loading'
+import ToTop from '@/components/ToTop/index.vue'
 
 const mainContainer = ref<HTMLElement | null>(null)
-
 const { y } = useScroll(mainContainer)
 
 function scrollToTop() {
@@ -19,6 +19,7 @@ function scrollToTop() {
     <!-- <header class="shadow-2xl head-container h-14">
       <Header></Header>
     </header> -->
+    <Loading />
     <ToTop v-if="y > 400" @click="scrollToTop" />
     <main ref="mainContainer" class="box-content w-screen h-screen overflow-x-hidden overflow-y-auto main-container">
       <router-view class="h-full main-container-content" />

src/main.ts

@@ -1,20 +1,20 @@
-import svgIcon from '@/components/SvgIcon/index.vue'
+// pinia
-import i18n from '@/locales/i18n'
+import { createPinia } from 'pinia'
+// pinia持久化
+import piniaPluginPersist from 'pinia-plugin-persist'
 import * as THREE from 'three'
 import { createApp } from 'vue'
 import VueDOMPurifyHTML from 'vue-dompurify-html'
+import svgIcon from '@/components/SvgIcon/index.vue'
+import i18n from '@/locales/i18n'
+// svg全局组件// 路由
+import router from '@/router'
 import App from './App.vue'
 import './style.css'
 import './style/markdown.css'
 import './style/style.scss'
 // 全局svg组件
 import 'virtual:svg-icons-register'
-// svg全局组件// 路由
-import router from '@/router'
-// pinia
-import { createPinia } from 'pinia'
-// pinia持久化
-import piniaPluginPersist from 'pinia-plugin-persist'
 
 const app = createApp(App)
 const pinia = createPinia()

src/router/index.ts

@@ -1,7 +1,7 @@
+import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
 import Layout from '@/layout/index.vue'
 import i18n from '@/locales/i18n'
 import Home from '@/views/Home/index.vue'
-import { createRouter, createWebHistory,createWebHashHistory } from 'vue-router'
 
 export const configRoutes = {
     path: '/log-lottery/config',
@@ -28,7 +28,7 @@ export const configRoutes = {
                 {
                     path: '/log-lottery/config/person/all',
                     name: 'AllPersonConfig',
-          component: () => import('@/views/Config/Person/PersonAll.vue'),
+                    component: () => import('@/views/Config/Person/PersonAll/index.vue'),
                     meta: {
                         title: i18n.global.t('sidebar.personList'),
                         icon: 'all',
@@ -131,11 +131,11 @@ const routes = [
             configRoutes,
         ],
     },
-];
+]
-const envMode=import.meta.env.MODE;
+const envMode = import.meta.env.MODE
 const router = createRouter({
     // 读取环境变量
-  history: envMode==='file'?createWebHashHistory():createWebHistory(),
+    history: envMode === 'file' ? createWebHashHistory() : createWebHistory(),
     routes,
 })
 

src/store/data.ts

@@ -278,4 +278,4 @@ export const defaultImageList = [
         url: `${originUrl}/resource/image/image5.png`,
     },
 ]
-export const defaultPatternList = [21, 38, 55, 54, 53, 70, 87, 88, 89, 23, 40, 57, 74, 91, 92, 93, 76, 59, 42, 25, 24, 27, 28, 29, 46, 63, 62, 61, 78, 95, 96, 97, 20, 19, 31, 48, 65, 66, 67, 84, 101, 100, 99, 32, 33]
+export const defaultPatternList = [21, 38, 55, 54, 53, 70, 87, 88, 89, 23, 40, 57, 74, 91, 92, 76, 59, 42, 25, 24, 27, 28, 29, 46, 63, 62, 61, 78, 95, 96, 97, 20, 19, 31, 48, 66, 67, 84, 101, 100, 32, 33, 93, 65, 82, 99]

src/store/personConfig.ts

@@ -1,73 +1,73 @@
 import type { IPersonConfig, IPrizeConfig } from '@/types/storeType'
-
 import dayjs from 'dayjs'
 import { defineStore } from 'pinia'
+import { computed, ref, toRaw, watch } from 'vue'
+import { IndexDb } from '@/utils/dexie'
 import { defaultPersonList } from './data'
 import { usePrizeConfig } from './prizeConfig'
 
-export const usePersonConfig = defineStore('person', {
+// 获取IPersonConfig的key组成数组
-  state() {
+export const personListKey = Object.keys(defaultPersonList[0])
-    return {
+export const usePersonConfig = defineStore('person', () => {
-      personConfig: {
+    const personDb = new IndexDb('person', ['allPersonList', 'alreadyPersonList'], 1, personListKey)
+    // NOTE: state
+    const personConfig = ref({
         allPersonList: [] as IPersonConfig[],
         alreadyPersonList: [] as IPersonConfig[],
-      },
-    }
-  },
-  getters: {
-    // 获取全部配置
-    getPersonConfig(state) {
-      return state.personConfig
-    },
-    // 获取全部人员名单
-    getAllPersonList(state) {
-      return state.personConfig.allPersonList.filter((item: IPersonConfig) => {
-        return item
     })
-    },
+    personDb.getAllData('allPersonList').then((data) => {
+        personConfig.value.allPersonList = data
+    })
+    personDb.getAllData('alreadyPersonList').then((data) => {
+        console.log(data)
+        personConfig.value.alreadyPersonList = data
+    })
+
+    // NOTE: getter
+    // 获取全部配置
+    const getPersonConfig = computed(() => personConfig.value)
+    // 获取全部人员名单
+    const getAllPersonList = computed(() => personConfig.value.allPersonList)
     // 获取未获此奖的人员名单
-    getNotThisPrizePersonList(state: any) {
+    const getNotThisPrizePersonList = computed(() => {
         const currentPrize = usePrizeConfig().prizeConfig.currentPrize
-      const data = state.personConfig.allPersonList.filter((item: IPersonConfig) => {
+        const data = personConfig.value.allPersonList.filter((item: IPersonConfig) => {
             return !item.prizeId.includes(currentPrize.id as string)
         })
 
         return data
-    },
+    })
+
     // 获取已中奖人员名单
-    getAlreadyPersonList(state) {
+    const getAlreadyPersonList = computed(() => {
-      return state.personConfig.allPersonList.filter((item: IPersonConfig) => {
+        return personConfig.value.allPersonList.filter((item: IPersonConfig) => {
             return item.isWin === true
         })
-    },
-    // 获取中奖人员详情
-    getAlreadyPersonDetail(state) {
-      return state.personConfig.alreadyPersonList
-    },
-    // 获取未中奖人员名单
-    getNotPersonList(state) {
-      return state.personConfig.allPersonList.filter((item: IPersonConfig) => {
-        return item.isWin === false
     })
-    },
+    // 获取中奖人员详情
-  },
+    const getAlreadyPersonDetail = computed(() => personConfig.value.alreadyPersonList)
-  actions: {
+    // 获取未中奖人员名单
+    const getNotPersonList = computed(() => personConfig.value.allPersonList.filter((item: IPersonConfig) => {
+        return item.isWin === false
+    }))
+    // NOTE: action
     // 添加未中奖人员
-    addNotPersonList(personList: IPersonConfig[]) {
+    function addNotPersonList(personList: IPersonConfig[]) {
         if (personList.length <= 0) {
             return
         }
         personList.forEach((item: IPersonConfig) => {
-        this.personConfig.allPersonList.push(item)
+            personConfig.value.allPersonList.push(item)
         })
-    },
+        personDb.setAllData('allPersonList', personList)
+    }
     // 添加已中奖人员
-    addAlreadyPersonList(personList: IPersonConfig[], prize: IPrizeConfig | null) {
+    function addAlreadyPersonList(personList: IPersonConfig[], prize: IPrizeConfig | null) {
         if (personList.length <= 0) {
             return
         }
         personList.forEach((person: IPersonConfig) => {
-        this.personConfig.allPersonList.map((item: IPersonConfig) => {
+            personConfig.value.allPersonList.map((item: IPersonConfig) => {
                 if (item.id === person.id && prize != null) {
                     item.isWin = true
                     // person.isWin = true
@@ -77,83 +77,109 @@ export const usePersonConfig = defineStore('person', {
                     // person.prizeTime = new Date().toString()
                     item.prizeId.push(prize.id as string)
                 }
-
                 return item
             })
-        this.personConfig.alreadyPersonList.push(person)
+            personConfig.value.alreadyPersonList.push(person)
+            personDb.updateData('allPersonList', toRaw(person))
+            personDb.setData('alreadyPersonList', toRaw(person))
         })
-    },
+    }
     // 从已中奖移动到未中奖
-    moveAlreadyToNot(person: IPersonConfig) {
+    function moveAlreadyToNot(person: IPersonConfig) {
         if (person.id === undefined || person.id == null) {
             return
         }
-      const alreadyPersonListLength = this.personConfig.alreadyPersonList.length
+        const alreadyPersonListLength = personConfig.value.alreadyPersonList.length
-      for (let i = 0; i < this.personConfig.allPersonList.length; i++) {
+        for (let i = 0; i < personConfig.value.allPersonList.length; i++) {
-        if (person.id === this.personConfig.allPersonList[i].id) {
+            if (person.id === personConfig.value.allPersonList[i].id) {
-          this.personConfig.allPersonList[i].isWin = false
+                personConfig.value.allPersonList[i].isWin = false
-          this.personConfig.allPersonList[i].prizeName = []
+                personConfig.value.allPersonList[i].prizeName = []
-          this.personConfig.allPersonList[i].prizeTime = []
+                personConfig.value.allPersonList[i].prizeTime = []
-          this.personConfig.allPersonList[i].prizeId = []
+                personConfig.value.allPersonList[i].prizeId = []
-
+                personDb.updateData('allPersonList', toRaw(personConfig.value.allPersonList[i]))
                 break
             }
         }
+        const alreadyPersonListRaw = toRaw(personConfig.value.alreadyPersonList)
         for (let i = 0; i < alreadyPersonListLength; i++) {
-        this.personConfig.alreadyPersonList = this.personConfig.alreadyPersonList.filter((item: IPersonConfig) =>
+            personConfig.value.alreadyPersonList = alreadyPersonListRaw.filter((item: IPersonConfig) =>
                 item.id !== person.id,
             )
         }
-    },
+        personDb.deleteData('alreadyPersonList', person)
-    // 删除指定人员
+    }
-    deletePerson(person: IPersonConfig) {
+    // 删除指定人员
-      if (person.id !== undefined || person.id != null) {
+    function deletePerson(person: IPersonConfig) {
-        this.personConfig.allPersonList = this.personConfig.allPersonList.filter((item: IPersonConfig) => item.id !== person.id)
+        if (person.id !== undefined || person.id != null) {
-        this.personConfig.alreadyPersonList = this.personConfig.alreadyPersonList.filter((item: IPersonConfig) => item.id !== person.id)
+            const allPersonListRaw = toRaw(personConfig.value.allPersonList)
+            const alreadyPersonListRaw = toRaw(personConfig.value.alreadyPersonList)
+            personConfig.value.allPersonList = allPersonListRaw.filter((item: IPersonConfig) => item.id !== person.id)
+            personConfig.value.alreadyPersonList = alreadyPersonListRaw.filter((item: IPersonConfig) => item.id !== person.id)
+            personDb.deleteData('allPersonList', person)
+            personDb.deleteData('alreadyPersonList', person)
+        }
     }
-    },
     // 删除所有人员
-    deleteAllPerson() {
+    function deleteAllPerson() {
-      this.personConfig.allPersonList = []
+        personConfig.value.allPersonList = []
-      this.personConfig.alreadyPersonList = []
+        personConfig.value.alreadyPersonList = []
-    },
+        personDb.deleteAll('allPersonList')
+        personDb.deleteAll('alreadyPersonList')
+    }
 
     // 删除所有人员
-    resetPerson() {
+    function resetPerson() {
-      this.personConfig.allPersonList = []
+        personConfig.value.allPersonList = []
-      this.personConfig.alreadyPersonList = []
+        personConfig.value.alreadyPersonList = []
-    },
+        personDb.deleteAll('allPersonList')
+        personDb.deleteAll('alreadyPersonList')
+    }
     // 重置已中奖人员
-    resetAlreadyPerson() {
+    function resetAlreadyPerson() {
         // 把已中奖人员合并到未中奖人员，要验证是否已存在
-      this.personConfig.allPersonList.forEach((item: IPersonConfig) => {
+        personConfig.value.allPersonList.forEach((item: IPersonConfig) => {
             item.isWin = false
             item.prizeName = []
             item.prizeTime = []
             item.prizeId = []
         })
-      this.personConfig.alreadyPersonList = []
+        personConfig.value.alreadyPersonList = []
-    },
+        const allPersonListRaw = toRaw(personConfig.value.allPersonList)
-    setDefaultPersonList() {
+        personDb.deleteAll('allPersonList')
-      this.personConfig.allPersonList = defaultPersonList
+        personDb.setAllData('allPersonList', allPersonListRaw)
-      this.personConfig.alreadyPersonList = []
+        personDb.deleteAll('alreadyPersonList')
-    },
+    }
+    function setDefaultPersonList() {
+        personConfig.value.allPersonList = defaultPersonList
+        personConfig.value.alreadyPersonList = []
+        personDb.setAllData('allPersonList', defaultPersonList)
+        personDb.deleteAll('alreadyPersonList')
+    }
     // 重置所有配置
-    reset() {
+    function reset() {
-      this.personConfig = {
+        personConfig.value = {
             allPersonList: [] as IPersonConfig[],
             alreadyPersonList: [] as IPersonConfig[],
         }
-    },
+        personDb.deleteAll('allPersonList')
-  },
+        personDb.deleteAll('alreadyPersonList')
-  persist: {
+    }
-    enabled: true,
+    return {
-    strategies: [
+        personConfig,
-      {
+        getPersonConfig,
-        // 如果要存储在localStorage中
+        getAllPersonList,
-        storage: localStorage,
+        getNotThisPrizePersonList,
-        key: 'personConfig',
+        getAlreadyPersonList,
-      },
+        getAlreadyPersonDetail,
-    ],
+        getNotPersonList,
-  },
+        addNotPersonList,
+        addAlreadyPersonList,
+        moveAlreadyToNot,
+        deletePerson,
+        deleteAllPerson,
+        resetPerson,
+        resetAlreadyPerson,
+        setDefaultPersonList,
+        reset,
+    }
 })

src/style/markdown.css

@@ -1,9 +1,5 @@
-@media (prefers-color-scheme: dark) {
+/* 定义--color-fg-default */
-
+:root {
-    .markdown-body,
-    [data-theme="dark"] {
-        /*dark*/
-        color-scheme: dark;
     --color-prettylights-syntax-comment: #8b949e;
     --color-prettylights-syntax-constant: #79c0ff;
     --color-prettylights-syntax-entity: #d2a8ff;
@@ -34,11 +30,11 @@
     --color-prettylights-syntax-brackethighlighter-angle: #8b949e;
     --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
     --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
-        --color-fg-default: #e6edf3;
+    --color-fg-default: hsl(var(--bc) / 1);
     --color-fg-muted: #848d97;
     --color-fg-subtle: #6e7681;
-        --color-canvas-default: #0d1117;
+    --color-canvas-default: hsl(var(--a1) / 1);
-        --color-canvas-subtle: #161b22;
+    --color-canvas-subtle: hsl(var(--a1) / 1);
     --color-border-default: #30363d;
     --color-border-muted: #21262d;
     --color-neutral-muted: rgba(110, 118, 129, 0.4);
@@ -53,66 +49,8 @@
     --color-danger-emphasis: #da3633;
     --color-done-fg: #a371f7;
     --color-done-emphasis: #8957e5;
-    }
 }
 
-@media (prefers-color-scheme: light) {
-
-    .markdown-body,
-    [data-theme="light"] {
-        /*light*/
-        color-scheme: light;
-        --color-prettylights-syntax-comment: #57606a;
-        --color-prettylights-syntax-constant: #0550ae;
-        --color-prettylights-syntax-entity: #6639ba;
-        --color-prettylights-syntax-storage-modifier-import: #24292f;
-        --color-prettylights-syntax-entity-tag: #116329;
-        --color-prettylights-syntax-keyword: #cf222e;
-        --color-prettylights-syntax-string: #0a3069;
-        --color-prettylights-syntax-variable: #953800;
-        --color-prettylights-syntax-brackethighlighter-unmatched: #82071e;
-        --color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
-        --color-prettylights-syntax-invalid-illegal-bg: #82071e;
-        --color-prettylights-syntax-carriage-return-text: #f6f8fa;
-        --color-prettylights-syntax-carriage-return-bg: #cf222e;
-        --color-prettylights-syntax-string-regexp: #116329;
-        --color-prettylights-syntax-markup-list: #3b2300;
-        --color-prettylights-syntax-markup-heading: #0550ae;
-        --color-prettylights-syntax-markup-italic: #24292f;
-        --color-prettylights-syntax-markup-bold: #24292f;
-        --color-prettylights-syntax-markup-deleted-text: #82071e;
-        --color-prettylights-syntax-markup-deleted-bg: #ffebe9;
-        --color-prettylights-syntax-markup-inserted-text: #116329;
-        --color-prettylights-syntax-markup-inserted-bg: #dafbe1;
-        --color-prettylights-syntax-markup-changed-text: #953800;
-        --color-prettylights-syntax-markup-changed-bg: #ffd8b5;
-        --color-prettylights-syntax-markup-ignored-text: #eaeef2;
-        --color-prettylights-syntax-markup-ignored-bg: #0550ae;
-        --color-prettylights-syntax-meta-diff-range: #8250df;
-        --color-prettylights-syntax-brackethighlighter-angle: #57606a;
-        --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
-        --color-prettylights-syntax-constant-other-reference-link: #0a3069;
-        --color-fg-default: #1F2328;
-        --color-fg-muted: #656d76;
-        --color-fg-subtle: #6e7781;
-        --color-canvas-default: #ffffff;
-        --color-canvas-subtle: #f6f8fa;
-        --color-border-default: #d0d7de;
-        --color-border-muted: hsla(210, 18%, 87%, 1);
-        --color-neutral-muted: rgba(175, 184, 193, 0.2);
-        --color-accent-fg: #0969da;
-        --color-accent-emphasis: #0969da;
-        --color-success-fg: #1a7f37;
-        --color-success-emphasis: #1f883d;
-        --color-attention-fg: #9a6700;
-        --color-attention-emphasis: #9a6700;
-        --color-attention-subtle: #fff8c5;
-        --color-danger-fg: #d1242f;
-        --color-danger-emphasis: #cf222e;
-        --color-done-fg: #8250df;
-        --color-done-emphasis: #8250df;
-    }
-}
 
 .markdown-body {
     -ms-text-size-adjust: 100%;

src/utils/dexie/index.ts

@@ -0,0 +1,108 @@
+import type { EntityTable } from 'dexie'
+import type { DbData } from './type'
+import dayjs from 'dayjs'
+import Dexie from 'dexie'
+
+class IndexDb {
+    name: string
+    dbStore: any
+    version: number
+    dbKeys: string[]
+    tableNames: string[]
+    constructor(name: string, tableNames: string[], version = 1, dbKeys: string[] = []) {
+        this.name = name // 数据库名称
+        this.version = version // 数据库版本号
+        this.dbKeys = dbKeys // 数据库key
+        this.tableNames = tableNames
+        this.dbStore = new Dexie(name) as Dexie & { [key: string]: EntityTable<DbData, 'id'> }
+        // 获取存在的key
+        const stores: Record<string, string> = {}
+        for (const tableName of tableNames) {
+            stores[tableName] = 'id,dateTime,type,uid' // 根据需要调整字段
+        }
+        this.dbStore.version(this.version).stores(stores)
+    }
+
+    setAllData(tableName: string, data: DbData[]) {
+        this.dbStore[tableName].bulkAdd(data)
+    }
+
+    /**
+     * @param data
+     * @description 添加单条数据，并为数据添加dataTime和type属性
+     */
+    setData(tableName: string, data: Partial<DbData>) {
+        if (!data.dateTime) {
+            data.dateTime = dayjs().format('YYYY-MM-DD HH:mm:ss:SSS')
+        }
+        if (!data.type) {
+            data.type = 'info'
+        }
+        this.dbStore[tableName].add(data)
+    }
+
+    // 更新单条数据
+    updateData(tableName: string, data: Partial<DbData>) {
+        this.dbStore[tableName].update(data.id, data)
+    }
+
+    /**
+     * @returns 所有数据Array
+     * @description 删除所有数据并返回被删除的数据
+     */
+    deleteAll(tableName: string) {
+        return this.dbStore[tableName].clear()
+    }
+
+    /**
+     * @param data
+     * @description 删除单条数据
+     */
+    deleteData(tableName: string, data: Partial<DbData>) {
+        this.dbStore[tableName].delete(data.id)
+    }
+
+    /**
+     * @returns 所有数据Array
+     * @description 获取所有数据
+     */
+    async getAllData(tableName: string, isAsc: boolean = true) {
+        const allData = await this.dbStore[tableName].toArray()
+        // return allData
+        return isAsc ? allData : allData.reverse()
+    }
+
+    // 分页获取数据
+    async getPageData(tableName: string, pageNum: number, pageSize: number, isAsc: boolean = true) {
+        const allData = await this.dbStore[tableName].toArray()
+        const start = (pageNum - 1) * pageSize
+        const end = pageNum * pageSize
+        return isAsc ? allData.slice(start, end) : allData.slice(end, start).reverse()
+    }
+
+    /**
+     * @returns 数据库总长度
+     * @description 获取所有数据的列表长度
+     */
+    getAllLength(tableName: string) {
+        return this.dbStore[tableName].count()
+    }
+
+    /**
+     *
+     * @param filter 根据筛选条件返回数据
+     * @returns
+     */
+    getFilterData(tableName: string, filter: string) {
+        return this.dbStore[tableName].filter((item: any) => {
+            return item.content.includes(filter)
+        }).toArray()
+    }
+
+    getKeys(tableName: string, key: string) {
+        // keys 方法获取所有主键
+        return this.dbStore[tableName].orderBy(key).keys()
+    }
+}
+
+export { IndexDb }

src/utils/dexie/type.ts

@@ -0,0 +1,3 @@
+export interface DbData {
+    [key: string]: any
+}

src/utils/index.ts

@@ -1,5 +1,11 @@
 import dayjs from 'dayjs'
-// 筛选人员数据
+
+/**
+ * @description: 处理表格数据，添加x,y,id等信息
+ * @param tableData 表格数据
+ * @param localRowCount 每一行有多少个元素
+ * @returns 处理后的表格数据
+ */
 export function filterData(tableData: any[], localRowCount: number) {
     const dataLength = tableData.length
     let j = 0

src/views/Config/Global/FaceConfig.vue

@@ -1,15 +1,13 @@
 <script setup lang='ts'>
-import { daisyuiThemes } from '@/constant/theme'
-
-import i18n, { languageList } from '@/locales/i18n'
-import useStore from '@/store'
-import { themeChange } from '@/utils'
-import { isHex, isRgbOrRgba } from '@/utils/color'
 import { storeToRefs } from 'pinia'
 import { onMounted, ref, watch } from 'vue'
 import { ColorPicker } from 'vue3-colorpicker'
 import { useI18n } from 'vue-i18n'
-import zod from 'zod'
+import { z as zod } from 'zod'
+import { daisyuiThemes } from '@/constant/theme'
+import i18n, { languageList } from '@/locales/i18n'
+import useStore from '@/store'
+import { themeChange } from '@/utils'
 import PatternSetting from './components/PatternSetting.vue'
 import 'vue3-colorpicker/style.css'
 
@@ -127,9 +125,9 @@ watch(themeValue, (val: any) => {
   const selectedThemeDetail = daisyuiThemeList.value[val]
   globalConfig.setTheme({ name: val, detail: selectedThemeDetail })
   themeChange(val)
-  if (selectedThemeDetail.primary && (isHex(selectedThemeDetail.primary) || isRgbOrRgba(selectedThemeDetail.primary))) {
+//   if (selectedThemeDetail.primary && (isHex(selectedThemeDetail.primary) || isRgbOrRgba(selectedThemeDetail.primary))) {
-    globalConfig.setCardColor(selectedThemeDetail.primary)
+//     globalConfig.setCardColor(selectedThemeDetail.primary)
-  }
+//   }
 }, { deep: true })
 
 watch(cardColorValue, (val: string) => {
@@ -194,41 +192,23 @@ onMounted(() => {
         {{ t('button.resetAllData') }}
       </button>
     </div>
-    <label class="flex flex-row items-center w-full gap-24 form-control">
+    <div class="flex flex-wrap w-full gap-6">
-      <div class="">
+      <!-- 文本设置（主标题、语言、文字大小） -->
+      <fieldset class="p-4 border text-setting fieldset bg-base-200 border-base-300 rounded-box w-xs">
+        <legend class="fieldset-legend">
+          文本设置
+        </legend>
+
+        <label class="label">
           <div class="label">
             <span class="label-text">{{ t('table.title') }}</span>
           </div>
+        </label>
         <input
           v-model="topTitleValue" type="text" :placeholder="t('placeHolder.enterTitle')"
           class="w-full max-w-xs input input-bordered"
         >
-      </div>
+
-    </label>
-    <label class="flex flex-row items-center w-full gap-24 form-control">
-      <div class="">
-        <div class="label">
-          <span class="label-text">{{ t('table.columnNumber') }}</span>
-        </div>
-        <input
-          v-model="formData.rowCount" type="number" placeholder="Type here"
-          class="w-full max-w-xs input input-bordered"
-        >
-        <div class="help">
-          <span v-if="formErr.rowCount" class="text-sm text-red-400 help-text">
-            {{ formErr.rowCount }}
-          </span>
-        </div>
-      </div>
-      <div>
-        <div class="tooltip" :data-tip="t('tooltip.resetLayout')">
-          <button class="mt-5 btn btn-info btn-sm" :disabled="isRowCountChange !== 1" @click="resetPersonLayout">
-            <span>{{ t('button.setLayout') }}</span>
-            <span v-show="isRowCountChange === 2" class="loading loading-ring loading-md" />
-          </button>
-        </div>
-      </div>
-    </label>
         <label class="w-full max-w-xs form-control">
           <div class="label">
             <span class="label-text">{{ t('table.language') }}</span>
@@ -238,49 +218,47 @@ onMounted(() => {
             <option v-for="item in languageList" :key="item.key" :value="item.key">{{ item.name }}</option>
           </select>
         </label>
-    <label class="w-full max-w-xs form-control">
-      <div class="label">
-        <span class="label-text">{{ t('table.theme') }}</span>
-      </div>
-      <select v-model="themeValue" data-choose-theme class="w-full max-w-xs border-solid select border-1">
-        <option disabled selected>{{ t('table.theme') }}</option>
-        <option v-for="(item, index) in themeList" :key="index" :value="item">{{ item }}</option>
-      </select>
-    </label>
-    <label class="w-full max-w-xs form-control">
-      <div class="label">
-        <span class="label-text">{{ t('table.backgroundImage') }}</span>
-      </div>
-      <select
-        v-model="backgroundImageValue" data-choose-theme
-        class="w-full max-w-xs border-solid select border-1"
-      >
-        <option disabled selected>{{ t('table.backgroundImage') }}</option>
-        <option
-          v-for="(item, index) in [{ name: '❌', url: '', id: '' }, ...imageList]" :key="index"
-          :value="item"
-        >{{ item.name }}</option>
-      </select>
-    </label>
-    <label class="w-full max-w-xs flex flex-col gap-1 form-control">
-      <div class="label">
-        <span class="label-text">{{ t('table.cardColor') }}</span>
-      </div>
-      <ColorPicker ref="colorPickerRef" v-model="cardColorValue" v-model:pure-color="cardColorValue" />
-    </label>
-    <label class="w-full max-w-xs flex flex-col gap-1 form-control">
-      <div class="label">
-        <span class="label-text">{{ t('table.winnerColor') }}</span>
-      </div>
-      <ColorPicker ref="colorPickerRef" v-model="luckyCardColorValue" v-model:pure-color="luckyCardColorValue" />
-    </label>
 
-    <label class="w-full max-w-xs flex flex-col gap-1 form-control">
+        <label class="w-full max-w-xs form-control">
           <div class="label">
-        <span class="label-text">{{ t('table.textColor') }}</span>
+            <span class="label-text">{{ t('table.textSize') }}</span>
           </div>
-      <ColorPicker ref="colorPickerRef" v-model="textColorValue" v-model:pure-color="textColorValue" />
+          <input
+            v-model="textSizeValue" type="number" placeholder="Type here"
+            class="w-full max-w-xs input input-bordered"
+          >
         </label>
+      </fieldset>
+      <!-- 布局设置（列数、卡片宽度、卡片高度 -->
+      <fieldset class="p-4 border text-setting fieldset bg-base-200 border-base-300 rounded-box w-xs">
+        <legend class="fieldset-legend">
+          布局设置
+        </legend>
+        <label class="flex flex-row items-center form-control">
+          <div class="">
+            <div class="label">
+              <span class="label-text">{{ t('table.columnNumber') }}</span>
+              <div class="help">
+                <span v-if="formErr.rowCount" class="text-xs text-red-400 help-text">
+                  {{ formErr.rowCount }}
+                </span>
+              </div>
+            </div>
+          </div>
+        </label>
+        <div class="join">
+          <input
+            v-model="formData.rowCount" type="number" placeholder="Type here"
+            class="w-full input input-bordered join-item"
+          >
+          <div class="tooltip join-item" :data-tip="t('tooltip.resetLayout')">
+            <button class="btn btn-neutral w-[120px] join-item" :disabled="isRowCountChange !== 1" @click="resetPersonLayout">
+              <span>{{ t('button.setLayout') }}</span>
+              <span v-show="isRowCountChange === 2" class="loading loading-ring loading-md" />
+            </button>
+          </div>
+        </div>
+
         <label class="flex flex-row w-full max-w-xs gap-10 form-control">
           <div>
             <div class="label">
@@ -301,26 +279,82 @@ onMounted(() => {
             >
           </div>
         </label>
-    <label class="w-full max-w-xs form-control">
+      </fieldset>
-      <div class="label">
+      <!-- 主题设置（主题、背景图片） -->
-        <span class="label-text">{{ t('table.textSize') }}</span>
+      <fieldset class="p-4 border text-setting fieldset bg-base-200 border-base-300 rounded-box w-xs">
+        <legend class="fieldset-legend">
+          主题设置
+        </legend>
+
+        <div class="w-full max-w-xs form-control">
+          <label class="label">
+            <span class="label-text">{{ t('table.theme') }}</span>
+          </label>
+          <select v-model="themeValue" data-choose-theme class="w-full max-w-xs border-solid select border-1">
+            <option disabled selected>
+              {{ t('table.theme') }}
+            </option>
+            <option v-for="(item, index) in themeList" :key="index" :value="item">
+              {{ item }}
+            </option>
+          </select>
         </div>
-      <input
+        <div class="w-full max-w-xs form-control">
-        v-model="textSizeValue" type="number" placeholder="Type here"
+          <label class="label">
-        class="w-full max-w-xs input input-bordered"
+            <span class="label-text">{{ t('table.backgroundImage') }}</span>
+          </label>
+          <select
+            v-model="backgroundImageValue" data-choose-theme
+            class="w-full max-w-xs border-solid select border-1"
           >
+            <option disabled selected>
+              {{ t('table.backgroundImage') }}
+            </option>
+            <option
+              v-for="(item, index) in [{ name: '❌', url: '', id: '' }, ...imageList]" :key="index"
+              :value="item"
+            >
+              {{ item.name }}
+            </option>
+          </select>
+        </div>
+        <div class="grid grid-cols-2 gap-4 w-full">
+          <div class="flex flex-col max-w-xs items-center gap-1 form-control">
+            <label class="label">
+              <span class="label-text">{{ t('table.cardColor') }}</span>
             </label>
-    <label class="w-full max-w-xs flex flex-col gap-1 form-control">
+            <ColorPicker ref="colorPickerRef" v-model="cardColorValue" v-model:pure-color="cardColorValue" />
-      <div class="label">
+          </div>
+          <div class="flex flex-col max-w-xs items-center gap-1 form-control">
+            <label class="label">
+              <span class="label-text">{{ t('table.winnerColor') }}</span>
+            </label>
+            <ColorPicker ref="colorPickerRef" v-model="luckyCardColorValue" v-model:pure-color="luckyCardColorValue" />
+          </div>
+          <div class="flex flex-col max-w-xs gap-1 items-center form-control">
+            <label class="label">
+              <span class="label-text">{{ t('table.textColor') }}</span>
+            </label>
+            <ColorPicker ref="colorPickerRef" v-model="textColorValue" v-model:pure-color="textColorValue" />
+          </div>
+          <div class="flex flex-col max-w-xs gap-1 form-control items-center">
+            <label class="label">
               <span class="label-text">{{ t('table.highlightColor') }}</span>
-      </div>
-      <ColorPicker ref="colorPickerRef" v-model="patternColorValue" v-model:pure-color="patternColorValue" />
             </label>
-    <label class="flex flex-row items-center w-full gap-24 mb-0 form-control">
+            <ColorPicker ref="colorPickerRef" v-model="patternColorValue" v-model:pure-color="patternColorValue" />
-      <div>
-        <div class="label">
-          <span class="label-text">{{ t('table.patternSetting') }}</span>
           </div>
+        </div>
+      </fieldset>
+      <!-- 图案设置 -->
+      <fieldset class="p-4 border text-setting fieldset bg-base-200 border-base-300 rounded-box w-xs">
+        <legend class="fieldset-legend">
+          图案设置
+        </legend>
+        <div class="items-center gap-24 mb-0 form-control">
+          <div>
+            <label class="label">
+              <span class="label-text">{{ t('table.patternSetting') }}</span>
+            </label>
             <div class="h-auto">
               <PatternSetting
                 :row-count="rowCount" :card-color="cardColor" :pattern-color="patternColor"
@@ -328,7 +362,6 @@ onMounted(() => {
               />
             </div>
           </div>
-    </label>
           <div class="flex w-full gap-3 m-0">
             <button class="mt-5 btn btn-info btn-sm" @click.stop="clearPattern">
               <span>{{ t('button.clearPattern') }}</span>
@@ -339,8 +372,15 @@ onMounted(() => {
               </button>
             </div>
           </div>
+        </div>
+      </fieldset>
+      <!-- 其他设置（是否常显奖项列表、是否显示头像） -->
+      <fieldset class="p-4 border text-setting fieldset bg-base-200 border-base-300 rounded-box w-xs">
+        <legend class="fieldset-legend">
+          其他设置
+        </legend>
 
-    <label class="w-full max-w-xs flex items-center gap-2 form-control">
+        <div class="flex items-center justify-between w-full max-w-xs mb-3 gap-2 form-control">
           <div class="label">
             <span class="label-text">{{ t('table.alwaysDisplay') }}</span>
           </div>
@@ -348,9 +388,8 @@ onMounted(() => {
             type="checkbox" :checked="isShowPrizeListValue" class="border-solid checkbox checkbox-secondary border-1"
             @change="isShowPrizeListValue = !isShowPrizeListValue"
           >
-    </label>
+        </div>
-
+        <div class="flex items-center justify-between w-full max-w-xs gap-2 mb-3 form-control">
-    <label class="w-full max-w-xs flex items-center gap-2 mb-10 form-control">
           <div class="label">
             <span class="label-text">{{ t('table.avatarDisplay') }}</span>
           </div>
@@ -358,7 +397,9 @@ onMounted(() => {
             type="checkbox" :checked="isShowAvatarValue" class="border-solid checkbox checkbox-secondary border-1"
             @change="isShowAvatarValue = !isShowAvatarValue"
           >
-    </label>
+        </div>
+      </fieldset>
+    </div>
   </div>
 </template>
 

src/views/Config/Global/ImageConfig.vue

@@ -1,12 +1,13 @@
 <script setup lang='ts'>
 import type { IImage } from '@/types/storeType'
-import ImageSync from '@/components/ImageSync/index.vue'
-import useStore from '@/store'
-import { readFileData } from '@/utils/file'
 import localforage from 'localforage'
 import { storeToRefs } from 'pinia'
 import { onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
+import ImageSync from '@/components/ImageSync/index.vue'
+import PageHeader from '@/components/PageHeader/index.vue'
+import useStore from '@/store'
+import { readFileData } from '@/utils/file'
 
 const { t } = useI18n()
 const globalConfig = useStore().globalConfig
@@ -81,6 +82,8 @@ watch(() => imgUploadToast.value, (val) => {
   </div>
 
   <div>
+    <PageHeader title="图片管理">
+      <template #buttons>
         <div class="">
           <label for="explore">
             <input
@@ -90,6 +93,9 @@ watch(() => imgUploadToast.value, (val) => {
             <span class="btn btn-primary btn-sm">{{ t('button.upload') }}</span>
           </label>
         </div>
+      </template>
+    </PageHeader>
+
     <ul class="p-0">
       <li v-for="item in localImageList" :key="item.id" class="mb-3">
         <div class="flex items-center gap-8">

src/views/Config/Global/MusicConfig.vue

@@ -1,12 +1,12 @@
 <script setup lang='ts'>
 import type { IMusic } from '@/types/storeType'
-import useStore from '@/store'
-import { readFileData } from '@/utils/file'
 import localforage from 'localforage'
 import { storeToRefs } from 'pinia'
-
 import { onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
+import PageHeader from '@/components/PageHeader/index.vue'
+import useStore from '@/store'
+import { readFileData } from '@/utils/file'
 
 const { t } = useI18n()
 const audioUploadToast = ref(0) // 0是不显示，1是成功，2是失败,3是不是图片
@@ -74,6 +74,8 @@ onMounted(() => {
 
 <template>
   <div>
+    <PageHeader title="音乐管理">
+      <template #buttons>
         <div class="flex gap-3">
           <button class="btn btn-primary btn-sm" @click="resetMusic">
             {{ t('button.reset') }}
@@ -89,12 +91,14 @@ onMounted(() => {
             {{ t('button.allDelete') }}
           </button>
         </div>
+      </template>
+    </PageHeader>
+
     <div>
       <ul class="p-0">
-        <li v-for="item in localMusicListValue" :key="item.id" class="flex items-center gap-6 pb-2 mb-3 divide-y">
+        <li v-for="item in localMusicListValue" :key="item.id" class="flex items-center gap-6 pb-2 mb-3">
-          <div class="mr-12 overflow-hidden w-72 whitespace-nowrap text-ellipsis">
+          <div class="mr-12 overflow-hidden w-72 whitespace-nowrap text-ellipsis" :title="item.name">
-            <span>
+            <a class="link hover:text-primary">{{ item.name }}</a>
-              {{ item.name }}</span>
           </div>
           <div class="flex gap-3">
             <button class="btn btn-primary btn-xs" @click="play(item)">

src/views/Config/Person/PersonAll.vue

@@ -1,16 +1,17 @@
 <!-- eslint-disable vue/no-parsing-error -->
 <script setup lang='ts'>
 import type { IPersonConfig } from '@/types/storeType'
-import DaiysuiTable from '@/components/DaiysuiTable/index.vue'
-import i18n from '@/locales/i18n'
-import useStore from '@/store'
-import { addOtherInfo } from '@/utils'
-import { readFileBinary } from '@/utils/file'
 import { storeToRefs } from 'pinia'
 import { onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import * as XLSX from 'xlsx'
+import DaiysuiTable from '@/components/DaiysuiTable/index.vue'
+import i18n from '@/locales/i18n'
+import useStore from '@/store'
+import { readFileBinary } from '@/utils/file'
+import ImportExcelWorker from './importExcel.worker?worker'
 
+const worker: Worker | null = new ImportExcelWorker()
 const { t } = useI18n()
 const personConfig = useStore().personConfig
 const { getAllPersonList: allPersonList, getAlreadyPersonList: alreadyPersonList } = storeToRefs(personConfig)
@@ -19,15 +20,27 @@ const limitType = '.xlsx,.xls'
 
 const resetDataDialog = ref()
 const delAllDataDialog = ref()
-
+function sendMessage(message: any) {
+  if (worker) {
+    worker.postMessage(message)
+  }
+}
+// 方法
+function startWorker(data: Event) {
+  sendMessage({ type: 'start', data })
+}
 async function handleFileChange(e: Event) {
-  const dataBinary = await readFileBinary(((e.target as HTMLInputElement).files as FileList)[0]!)
+//   worker = new ImportExcelWorker()
-  const workBook = XLSX.read(dataBinary, { type: 'binary', cellDates: true })
+  if (worker) {
-  const workSheet = workBook.Sheets[workBook.SheetNames[0]]
+    worker.onmessage = (e) => {
-  const excelData = XLSX.utils.sheet_to_json(workSheet)
+      if (e.data.type === 'done') {
-  const allData = addOtherInfo(excelData)
         personConfig.resetPerson()
-  personConfig.addNotPersonList(allData)
+        personConfig.addNotPersonList(e.data.data)
+      }
+    }
+  }
+  const dataBinary = await readFileBinary(((e.target as HTMLInputElement).files as FileList)[0]!)
+  startWorker(dataBinary)
 }
 function exportData() {
   let data = JSON.parse(JSON.stringify(allPersonList.value))
@@ -99,8 +112,8 @@ const tableColumns = [
     label: i18n.global.t('data.avatar'),
     props: 'avatar',
     formatValue(row: any) {
-       return row.avatar ? `<img src="${row.avatar}" alt="avatar" style="width: 50px; height: 50px;"/>` : '-';
+      return row.avatar ? `<img src="${row.avatar}" alt="avatar" style="width: 50px; height: 50px;"/>` : '-'
-    }
+    },
   },
   {
     label: i18n.global.t('data.identity'),

src/views/Config/Person/PersonAll/importExcel.worker.ts

@@ -0,0 +1,37 @@
+import * as XLSX from 'xlsx'
+import { addOtherInfo } from '@/utils'
+// 定义消息类型
+interface WorkerMessage {
+    type: 'start' | 'stop' | 'reset'
+    data: any
+}
+
+let allData: any[] = []
+
+// 接收主线程消息
+globalThis.onmessage = async (e: MessageEvent<WorkerMessage>) => {
+    switch (e.data.type) {
+        case 'start':
+            {
+                const fileData = e.data.data
+                // const dataBinary = await readFileBinary(((fileEvent.target as HTMLInputElement).files as FileList)[0]!)
+                const workBook = XLSX.read(fileData, { type: 'binary', cellDates: true })
+                const workSheet = workBook.Sheets[workBook.SheetNames[0]]
+                const excelData = XLSX.utils.sheet_to_json(workSheet)
+                allData = addOtherInfo(excelData)
+                globalThis.postMessage({
+                    type: 'done',
+                    data: allData,
+                    message: '读取完成',
+                })
+                break
+            }
+        default:
+            globalThis.postMessage({
+                type: 'fail',
+                data: null,
+                message: '读取失败',
+            })
+            break
+    }
+}

src/views/Config/Person/PersonAll/index.vue

@@ -0,0 +1,77 @@
+<!-- eslint-disable vue/no-parsing-error -->
+<script setup lang='ts'>
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import DaiysuiTable from '@/components/DaiysuiTable/index.vue'
+import CustomDialog from '@/components/Dialog/index.vue'
+import PageHeader from '@/components/PageHeader/index.vue'
+import { useViewModel } from './useViewModel'
+
+const resetDataDialogRef = ref()
+const delAllDataDialogRef = ref()
+const exportInputFileRef = ref()
+const { resetData, deleteAll, handleFileChange, exportData, alreadyPersonList, allPersonList, tableColumns } = useViewModel({ exportInputFileRef })
+const { t } = useI18n()
+const limitType = '.xlsx,.xls'
+</script>
+
+<template>
+  <CustomDialog
+    ref="resetDataDialogRef"
+    :title="t('dialog.titleTip')"
+    :desc="t('dialog.dialogResetWinner')"
+    :submit-func="resetData"
+  />
+  <CustomDialog
+    ref="delAllDataDialogRef"
+    :title="t('dialog.titleTip')"
+    :desc="t('dialog.dialogDelAllPerson')"
+    :submit-func="deleteAll"
+  />
+
+  <div class="min-w-1000px">
+    <PageHeader :title="t('viewTitle.personManagement')">
+      <template #buttons>
+        <div class="flex gap-3">
+          <button class="btn btn-error btn-sm" @click="delAllDataDialogRef.showDialog()">
+            {{ t('button.allDelete') }}
+          </button>
+          <div class="tooltip tooltip-bottom" :data-tip="t('tooltip.downloadTemplateTip')">
+            <a
+              class="no-underline btn btn-secondary btn-sm" :download="t('data.xlsxName')" target="_blank"
+              :href="`/log-lottery/${t('data.xlsxName')}`"
+            >{{ t('button.downloadTemplate') }}</a>
+          </div>
+          <div class="">
+            <label for="explore">
+              <div class="tooltip tooltip-bottom" :data-tip="t('tooltip.uploadExcelTip')">
+                <input
+                  id="explore" ref="exportInputFileRef" type="file" class="" style="display: none"
+                  :accept="limitType" @change="handleFileChange"
+                >
+
+                <span class="btn btn-primary btn-sm">{{ t('button.importData') }}</span>
+              </div>
+            </label>
+          </div>
+          <button class="btn btn-error btn-sm" @click="resetDataDialogRef.showDialog()">
+            {{ t('button.resetData') }}
+          </button>
+          <button class="btn btn-accent btn-sm" @click="exportData">
+            {{ t('button.exportResult') }}
+          </button>
+          <div>
+            <span>{{ t('table.luckyPeopleNumber') }}:</span>
+            <span>{{ alreadyPersonList.length }}</span>
+            <span>&nbsp;/&nbsp;</span>
+            <span>{{ allPersonList.length }}</span>
+          </div>
+        </div>
+      </template>
+    </PageHeader>
+
+    <DaiysuiTable :table-columns="tableColumns" :data="allPersonList" />
+  </div>
+</template>
+
+<style lang='scss' scoped></style>

src/views/Config/Person/PersonAll/useViewModel.ts

@@ -0,0 +1,167 @@
+import type { Ref } from 'vue'
+import type { IPersonConfig } from '@/types/storeType'
+import { storeToRefs } from 'pinia'
+import { inject } from 'vue'
+import * as XLSX from 'xlsx'
+import { loadingKey } from '@/components/Loading'
+import i18n from '@/locales/i18n'
+import useStore from '@/store'
+import { readFileBinary } from '@/utils/file'
+import ImportExcelWorker from './importExcel.worker?worker'
+
+export function useViewModel({ exportInputFileRef }: { exportInputFileRef: Ref<HTMLInputElement> }) {
+    const worker: Worker | null = new ImportExcelWorker()
+    const loading = inject(loadingKey)
+    const personConfig = useStore().personConfig
+    const { getAllPersonList: allPersonList, getAlreadyPersonList: alreadyPersonList } = storeToRefs(personConfig)
+    const tableColumns = [
+        {
+            label: i18n.global.t('data.number'),
+            props: 'uid',
+        },
+        {
+            label: i18n.global.t('data.name'),
+            props: 'name',
+        },
+        {
+            label: i18n.global.t('data.department'),
+            props: 'department',
+        },
+        {
+            label: i18n.global.t('data.avatar'),
+            props: 'avatar',
+            formatValue(row: any) {
+                return row.avatar ? `<img src="${row.avatar}" alt="avatar" style="width: 50px; height: 50px;"/>` : '-'
+            },
+        },
+        {
+            label: i18n.global.t('data.identity'),
+            props: 'identity',
+        },
+        {
+            label: i18n.global.t('data.isWin'),
+            props: 'isWin',
+            formatValue(row: IPersonConfig) {
+                return row.isWin ? i18n.global.t('data.yes') : i18n.global.t('data.no')
+            },
+        },
+        {
+            label: i18n.global.t('data.operation'),
+            actions: [
+                // {
+                //     label: '编辑',
+                //     type: 'btn-info',
+                //     onClick: (row: any) => {
+                //         delPersonItem(row)
+                //     }
+                // },
+                {
+                    label: i18n.global.t('data.delete'),
+                    type: 'btn-error',
+                    onClick: (row: IPersonConfig) => {
+                        delPersonItem(row)
+                    },
+                },
+
+            ],
+        },
+    ]
+    /// 向worker发送消息
+    function sendWorkerMessage(message: any) {
+        if (worker) {
+            worker.postMessage(message)
+        }
+    }
+    /// 开始导入
+    function startWorker(data: Event) {
+        loading?.show()
+        sendWorkerMessage({ type: 'start', data })
+    }
+    /**
+     * 获取用户数据
+     */
+    async function handleFileChange(e: Event) {
+        //   worker = new ImportExcelWorker()
+        if (worker) {
+            worker.onmessage = (e) => {
+                if (e.data.type === 'done') {
+                    personConfig.resetPerson()
+                    personConfig.addNotPersonList(e.data.data)
+                    // 导入成功后清空file input
+                    clearFileInput()
+                }
+                loading?.hide()
+            }
+        }
+        const dataBinary = await readFileBinary(((e.target as HTMLInputElement).files as FileList)[0]!)
+        startWorker(dataBinary)
+    }
+    // 清空file input
+    function clearFileInput() {
+        if (exportInputFileRef.value) {
+            exportInputFileRef.value.value = ''
+        }
+    }
+    /// 导出数据
+    function exportData() {
+        let data = JSON.parse(JSON.stringify(allPersonList.value))
+        // 排除一些字段
+        for (let i = 0; i < data.length; i++) {
+            delete data[i].x
+            delete data[i].y
+            delete data[i].id
+            delete data[i].createTime
+            delete data[i].updateTime
+            delete data[i].prizeId
+            // 修改字段名称
+            if (data[i].isWin) {
+                data[i].isWin = i18n.global.t('data.yes')
+            }
+            else {
+                data[i].isWin = i18n.global.t('data.no')
+            }
+            // 格式化数组为
+            data[i].prizeTime = data[i].prizeTime.join(',')
+            data[i].prizeName = data[i].prizeName.join(',')
+        }
+        let dataString = JSON.stringify(data)
+        dataString = dataString
+            .replaceAll(/uid/g, i18n.global.t('data.number'))
+            .replaceAll(/isWin/g, i18n.global.t('data.isWin'))
+            .replaceAll(/department/g, i18n.global.t('data.department'))
+            .replaceAll(/name/g, i18n.global.t('data.name'))
+            .replaceAll(/identity/g, i18n.global.t('data.identity'))
+            .replaceAll(/prizeName/g, i18n.global.t('data.prizeName'))
+            .replaceAll(/prizeTime/g, i18n.global.t('data.prizeTime'))
+
+        data = JSON.parse(dataString)
+
+        if (data.length > 0) {
+            const dataBinary = XLSX.utils.json_to_sheet(data)
+            const dataBinaryBinary = XLSX.utils.book_new()
+            XLSX.utils.book_append_sheet(dataBinaryBinary, dataBinary, 'Sheet1')
+            XLSX.writeFile(dataBinaryBinary, 'data.xlsx')
+        }
+    }
+
+    function resetData() {
+        personConfig.resetAlreadyPerson()
+    }
+
+    function deleteAll() {
+        personConfig.deleteAllPerson()
+    }
+
+    function delPersonItem(row: IPersonConfig) {
+        personConfig.deletePerson(row)
+    }
+    return {
+        resetData,
+        deleteAll,
+        handleFileChange,
+        exportData,
+        alreadyPersonList,
+        allPersonList,
+        tableColumns,
+    }
+}

src/views/Config/Person/PersonAlready.vue

@@ -1,12 +1,13 @@
 <!-- eslint-disable vue/no-parsing-error -->
 <script setup lang='ts'>
 import type { IPersonConfig } from '@/types/storeType'
-import DaiysuiTable from '@/components/DaiysuiTable/index.vue'
-import i18n from '@/locales/i18n'
-import useStore from '@/store'
 import { storeToRefs } from 'pinia'
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
+import DaiysuiTable from '@/components/DaiysuiTable/index.vue'
+import PageHeader from '@/components/PageHeader/index.vue'
+import i18n from '@/locales/i18n'
+import useStore from '@/store'
 
 const { t } = useI18n()
 const personConfig = useStore().personConfig
@@ -39,8 +40,8 @@ const tableColumnsList = [
     label: i18n.global.t('data.avatar'),
     props: 'avatar',
     formatValue(row: any) {
-       return row.avatar ? `<img src="${row.avatar}" alt="avatar" style="width: 50px; height: 50px;"/>` : '-';
+      return row.avatar ? `<img src="${row.avatar}" alt="avatar" style="width: 50px; height: 50px;"/>` : '-'
-    }
+    },
   },
   {
     label: i18n.global.t('data.department'),
@@ -82,8 +83,8 @@ const tableColumnsDetail = [
     label: i18n.global.t('data.avatar'),
     props: 'avatar',
     formatValue(row: any) {
-       return row.avatar ? `<img src="${row.avatar}" alt="avatar" style="width: 50px; height: 50px;"/>` : '-';
+      return row.avatar ? `<img src="${row.avatar}" alt="avatar" style="width: 50px; height: 50px;"/>` : '-'
-    }
+    },
   },
   {
     label: i18n.global.t('data.department'),
@@ -121,7 +122,8 @@ const tableColumnsDetail = [
 
 <template>
   <div class="overflow-y-auto">
-    <h2>{{ t('viewTitle.winnerManagement') }}</h2>
+    <PageHeader :title="t('viewTitle.winnerManagement')">
+      <template #buttons>
         <div class="flex items-center justify-start gap-10">
           <div>
             <span>{{ t('table.luckyPeopleNumber') }}：</span>
@@ -136,6 +138,9 @@ const tableColumnsDetail = [
             </div>
           </div>
         </div>
+      </template>
+    </PageHeader>
+
     <DaiysuiTable v-if="!isDetail" :table-columns="tableColumnsList" :data="alreadyPersonList" />
 
     <DaiysuiTable v-if="isDetail" :table-columns="tableColumnsDetail" :data="alreadyPersonDetail" />

src/views/Config/Person/importExcel.worker.ts

@@ -0,0 +1,32 @@
+import * as XLSX from 'xlsx'
+import { addOtherInfo } from '@/utils'
+// 定义消息类型
+interface WorkerMessage {
+    type: 'start' | 'stop' | 'reset'
+    data: any
+}
+
+let allData: any[] = []
+
+// 接收主线程消息
+globalThis.onmessage = async (e: MessageEvent<WorkerMessage>) => {
+    switch (e.data.type) {
+        case 'start':
+            {
+                const fileData = e.data.data
+                // const dataBinary = await readFileBinary(((fileEvent.target as HTMLInputElement).files as FileList)[0]!)
+                const workBook = XLSX.read(fileData, { type: 'binary', cellDates: true })
+                const workSheet = workBook.Sheets[workBook.SheetNames[0]]
+                const excelData = XLSX.utils.sheet_to_json(workSheet)
+                allData = addOtherInfo(excelData)
+                globalThis.postMessage({
+                    type: 'done',
+                    data: allData,
+                    message: '读取完成',
+                })
+                break
+            }
+        default:
+            break
+    }
+}

src/views/Config/Prize/PrizeConfig.vue

@@ -1,12 +1,13 @@
 <script setup lang='ts'>
 import type { IPrizeConfig } from '@/types/storeType'
-import EditSeparateDialog from '@/components/NumberSeparate/EditSeparateDialog.vue'
-import i18n from '@/locales/i18n'
-import useStore from '@/store'
 import localforage from 'localforage'
 import { storeToRefs } from 'pinia'
 import { onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
+import EditSeparateDialog from '@/components/NumberSeparate/EditSeparateDialog.vue'
+import PageHeader from '@/components/PageHeader/index.vue'
+import i18n from '@/locales/i18n'
+import useStore from '@/store'
 
 const { t } = useI18n()
 const imageDbStore = localforage.createInstance({
@@ -149,7 +150,8 @@ watch(() => prizeList.value, (val: IPrizeConfig[]) => {
 
 <template>
   <div>
-    <h2>{{ t('viewTitle.prizeManagement') }}</h2>
+    <PageHeader :title="t('viewTitle.prizeManagement')">
+      <template #buttons>
         <div class="flex w-full gap-3">
           <button class="btn btn-info btn-sm" @click="addPrize">
             {{ t('button.add') }}
@@ -161,6 +163,8 @@ watch(() => prizeList.value, (val: IPrizeConfig[]) => {
             {{ t('button.allDelete') }}
           </button>
         </div>
+      </template>
+      <template #alerts>
         <div role="alert" class="w-full my-4 alert alert-info">
           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-6 h-6 stroke-current shrink-0">
             <path
@@ -170,6 +174,9 @@ watch(() => prizeList.value, (val: IPrizeConfig[]) => {
           </svg>
           <span>{{ t('dialog.tipResetPrize') }}</span>
         </div>
+      </template>
+    </PageHeader>
+
     <ul class="p-0 m-0">
       <li
         v-for="item in prizeList" :key="item.id" class="flex gap-10"

src/views/Config/Readme/index.vue

@@ -1,7 +1,7 @@
 <script setup lang='ts'>
-import i18n from '@/locales/i18n'
 import markdownit from 'markdown-it'
 import { onMounted, ref } from 'vue'
+import i18n from '@/locales/i18n'
 
 const md = markdownit()
 const readmeHtml = ref('')

src/views/Demo/index.vue

@@ -1,4 +1,9 @@
 <script setup lang='ts'>
+import { onMounted, ref, watch } from 'vue'
+
+onMounted(() => {
+
+})
 </script>
 
 <template>

src/views/Home/components/HeaderTitle/index.vue

@@ -0,0 +1,89 @@
+<script setup lang='ts'>
+import { toRefs } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { useRouter } from 'vue-router'
+
+interface Props {
+  textSize: number
+  textColor: string
+  topTitle: string
+  tableData: any[]
+  setDefaultPersonList: () => void
+}
+
+const props = defineProps<Props>()
+const router = useRouter()
+const { tableData, textSize, textColor, topTitle, setDefaultPersonList } = toRefs(props)
+const { t } = useI18n()
+</script>
+
+<template>
+  <div class="absolute z-10 flex flex-col items-center justify-center -translate-x-1/2 left-1/2">
+    <h2
+      class="pt-12 m-0 mb-12 font-mono tracking-wide text-center leading-12 header-title"
+      :style="{ fontSize: `${textSize * 1.5}px`, color: textColor }"
+    >
+      {{ topTitle }}
+    </h2>
+    <div class="flex gap-3">
+      <button
+        v-if="tableData.length <= 0" class="cursor-pointer btn btn-outline btn-secondary btn-lg"
+        @click="router.push('config')"
+      >
+        {{ t('button.noInfoAndImport') }}
+      </button>
+      <button
+        v-if="tableData.length <= 0" class="cursor-pointer btn btn-outline btn-secondary btn-lg"
+        @click="setDefaultPersonList"
+      >
+        {{ t('button.useDefault') }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.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;
+}
+
+@-webkit-keyframes tracking-in-expand-fwd {
+    0% {
+        letter-spacing: -0.5em;
+        -webkit-transform: translateZ(-700px);
+        transform: translateZ(-700px);
+        opacity: 0;
+    }
+
+    40% {
+        opacity: 0.6;
+    }
+
+    100% {
+        -webkit-transform: translateZ(0);
+        transform: translateZ(0);
+        opacity: 1;
+    }
+}
+
+@keyframes tracking-in-expand-fwd {
+    0% {
+        letter-spacing: -0.5em;
+        -webkit-transform: translateZ(-700px);
+        transform: translateZ(-700px);
+        opacity: 0;
+    }
+
+    40% {
+        opacity: 0.6;
+    }
+
+    100% {
+        -webkit-transform: translateZ(0);
+        transform: translateZ(0);
+        opacity: 1;
+    }
+}
+</style>

src/views/Home/components/OptionsButton/index.scss

@@ -0,0 +1,335 @@
+#menu {
+    position: absolute;
+    z-index: 100;
+    width: 100%;
+    bottom: 50px;
+    text-align: center;
+    margin: 0 auto;
+    font-size: 32px;
+
+    .start {
+        // 居中
+        display: flex;
+        justify-content: center;
+    }
+
+    .btn-stars {
+        cursor: pointer;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 13rem;
+        overflow: hidden;
+        height: 3rem;
+        background-size: 300% 300%;
+        backdrop-filter: blur(1rem);
+        border-radius: 5rem;
+        transition: 0.5s;
+        animation: gradient_301 5s ease infinite;
+        border: double 4px transparent;
+        background-image: linear-gradient(#212121, #212121), linear-gradient(137.48deg, #ffdb3b 10%, #FE53BB 45%, #8F51EA 67%, #0044ff 87%);
+        background-origin: border-box;
+        background-clip: content-box, border-box;
+        -webkit-animation: pulsate-fwd 1.2s ease-in-out infinite both;
+        animation: pulsate-fwd 1.2s ease-in-out infinite both;
+
+        &:hover #container-stars {
+            z-index: 1;
+            background-color: #212121;
+        }
+
+        &:hover {
+            transform: scale(1.1)
+        }
+
+        &:active {
+            border: double 4px #FE53BB;
+            background-origin: border-box;
+            background-clip: content-box, border-box;
+            animation: none;
+        }
+
+        &:active .circle {
+            background: #FE53BB;
+        }
+
+        strong {
+            z-index: 2;
+            font-family: 'Avalors Personal Use';
+            font-size: 12px;
+            letter-spacing: 5px;
+            color: #FFFFFF;
+            text-shadow: 0 0 4px white;
+        }
+
+        #container-stars {
+            position: absolute;
+            z-index: -1;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            transition: 0.5s;
+            backdrop-filter: blur(1rem);
+            border-radius: 5rem;
+
+            #stars {
+                position: relative;
+                background: transparent;
+                width: 200rem;
+                height: 200rem;
+
+                &::after {
+                    content: "";
+                    position: absolute;
+                    top: -10rem;
+                    left: -100rem;
+                    width: 100%;
+                    height: 100%;
+                    animation: animStarRotate 90s linear infinite;
+                }
+
+                &::after {
+                    background-image: radial-gradient(#ffffff 1px, transparent 1%);
+                    background-size: 50px 50px;
+                }
+
+                &::before {
+                    content: "";
+                    position: absolute;
+                    top: 0;
+                    left: -50%;
+                    width: 170%;
+                    height: 500%;
+                    animation: animStar 60s linear infinite;
+                }
+
+                &::before {
+                    background-image: radial-gradient(#ffffff 1px, transparent 1%);
+                    background-size: 50px 50px;
+                    opacity: 0.5;
+                }
+            }
+
+
+        }
+
+        #glow {
+            position: absolute;
+            display: flex;
+            width: 12rem;
+
+            .circle {
+                width: 100%;
+                height: 30px;
+                filter: blur(2rem);
+                animation: pulse_3011 4s infinite;
+                z-index: -1;
+
+                &:nth-of-type(1) {
+                    background: rgba(254, 83, 186, 0.636);
+                }
+
+                &:nth-of-type(2) {
+                    background: rgba(142, 81, 234, 0.704);
+                }
+            }
+        }
+    }
+
+    .btn-neon {
+        --glow-color: rgb(217, 176, 255);
+        --glow-spread-color: rgba(191, 123, 255, 0.781);
+        --enhanced-glow-color: rgb(231, 206, 255);
+        --btn-color: rgb(100, 61, 136);
+        -webkit-animation: pulsate-fwd 0.9s ease-in-out infinite both;
+        animation: pulsate-fwd 0.9s ease-in-out infinite both;
+        cursor: pointer;
+        border: .25em solid var(--glow-color);
+        padding: 1em 3em;
+        color: var(--glow-color);
+        font-size: 15px;
+        font-weight: bold;
+        background-color: var(--btn-color);
+        border-radius: 1em;
+        outline: none;
+        box-shadow: 0 0 1em .25em var(--glow-color),
+            0 0 4em 1em var(--glow-spread-color),
+            inset 0 0 .75em .25em var(--glow-color);
+        text-shadow: 0 0 .5em var(--glow-color);
+        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;
+
+        &::after {
+            pointer-events: none;
+            content: "";
+            position: absolute;
+            top: 120%;
+            left: 0;
+            height: 100%;
+            width: 100%;
+            background-color: var(--glow-spread-color);
+            filter: blur(2em);
+            opacity: .7;
+            transform: perspective(1.5em) rotateX(35deg) scale(1, .6);
+        }
+
+        &:hover {
+            color: var(--btn-color);
+            background-color: var(--glow-color);
+            box-shadow: 0 0 1em .25em var(--glow-color),
+                0 0 4em 2em var(--glow-spread-color),
+                inset 0 0 .75em .25em var(--glow-color);
+        }
+
+        &:active {
+            box-shadow: 0 0 0.6em .25em var(--glow-color),
+                0 0 2.5em 2em var(--glow-spread-color),
+                inset 0 0 .5em .25em var(--glow-color);
+        }
+    }
+
+    .btn-cancel {
+        cursor: pointer;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 13rem;
+        overflow: hidden;
+        height: 3rem;
+        background-size: 300% 300%;
+        backdrop-filter: blur(1rem);
+        border-radius: 5rem;
+        transition: 0.5s;
+        animation: gradient_301 5s ease infinite;
+        border: double 4px transparent;
+        background-image: linear-gradient(#212121, #212121), linear-gradient(137.48deg, #ffdb3b 10%, #FE53BB 45%, #8F51EA 67%, #0044ff 87%);
+        background-origin: border-box;
+        background-clip: content-box, border-box;
+    }
+}
+
+@keyframes animStar {
+    from {
+        transform: translateY(0);
+    }
+
+    to {
+        transform: translateY(-135rem);
+    }
+}
+
+@keyframes animStarRotate {
+    from {
+        transform: rotate(360deg);
+    }
+
+    to {
+        transform: rotate(0);
+    }
+}
+
+@keyframes gradient_301 {
+    0% {
+        background-position: 0% 50%;
+    }
+
+    50% {
+        background-position: 100% 50%;
+    }
+
+    100% {
+        background-position: 0% 50%;
+    }
+}
+
+@keyframes pulse_3011 {
+    0% {
+        transform: scale(0.75);
+        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
+    }
+
+    70% {
+        transform: scale(1);
+        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
+    }
+
+    100% {
+        transform: scale(0.75);
+        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+    }
+}
+
+// 按钮动画
+@-webkit-keyframes pulsate-fwd {
+    0% {
+        -webkit-transform: scale(1);
+        transform: scale(1);
+    }
+
+    50% {
+        -webkit-transform: scale(1.1);
+        transform: scale(1.1);
+    }
+
+    100% {
+        -webkit-transform: scale(1);
+        transform: scale(1);
+    }
+}
+
+@keyframes pulsate-fwd {
+    0% {
+        -webkit-transform: scale(1);
+        transform: scale(1);
+    }
+
+    50% {
+        -webkit-transform: scale(1.2);
+        transform: scale(1.2);
+    }
+
+    100% {
+        -webkit-transform: scale(1);
+        transform: scale(1);
+    }
+}
+
+@-webkit-keyframes tracking-in-expand-fwd {
+    0% {
+        letter-spacing: -0.5em;
+        -webkit-transform: translateZ(-700px);
+        transform: translateZ(-700px);
+        opacity: 0;
+    }
+
+    40% {
+        opacity: 0.6;
+    }
+
+    100% {
+        -webkit-transform: translateZ(0);
+        transform: translateZ(0);
+        opacity: 1;
+    }
+}
+
+@keyframes tracking-in-expand-fwd {
+    0% {
+        letter-spacing: -0.5em;
+        -webkit-transform: translateZ(-700px);
+        transform: translateZ(-700px);
+        opacity: 0;
+    }
+
+    40% {
+        opacity: 0.6;
+    }
+
+    100% {
+        -webkit-transform: translateZ(0);
+        transform: translateZ(0);
+        opacity: 1;
+    }
+}

src/views/Home/components/OptionsButton/index.vue

@@ -0,0 +1,79 @@
+<script setup lang='ts'>
+import { toRefs } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { LotteryStatus } from '@/views/Home/type'
+
+interface Props {
+  currentStatus: LotteryStatus
+  tableData: any[]
+  enterLottery: () => void
+  startLottery: () => void
+  stopLottery: () => void
+  continueLottery: () => void
+  quitLottery: () => void
+}
+const props = defineProps<Props>()
+
+const { currentStatus, tableData, enterLottery, startLottery, stopLottery, continueLottery, quitLottery } = toRefs(props)
+const { t } = useI18n()
+</script>
+
+<template>
+  <div id="menu">
+    <button v-if="currentStatus === LotteryStatus.init && tableData.length > 0" class="btn-neon" @click="enterLottery">
+      {{ t('button.enterLottery') }}
+    </button>
+
+    <div v-if="currentStatus === LotteryStatus.ready" class="start">
+      <button class="btn-stars" @click="startLottery">
+        <strong>{{ t('button.start') }}</strong>
+        <div id="container-stars">
+          <div id="stars" />
+        </div>
+
+        <div id="glow">
+          <div class="circle" />
+          <div class="circle" />
+        </div>
+      </button>
+    </div>
+
+    <button v-if="currentStatus === LotteryStatus.running" class="btn-neon btn glass btn-lg" @click="stopLottery">
+      {{ t('button.selectLucky') }}
+    </button>
+
+    <div v-if="currentStatus === LotteryStatus.end" class="flex justify-center gap-6 enStop">
+      <div class="start">
+        <button class="btn-stars" @click="continueLottery">
+          <strong>{{ t('button.continue') }}</strong>
+          <div id="container-stars">
+            <div id="stars" />
+          </div>
+
+          <div id="glow">
+            <div class="circle" />
+            <div class="circle" />
+          </div>
+        </button>
+      </div>
+
+      <div class="start">
+        <button class="btn-stars btn-cancel" @click="quitLottery">
+          <strong>{{ t('button.cancel') }}</strong>
+          <div id="container-stars">
+            <div id="stars" />
+          </div>
+
+          <div id="glow">
+            <div class="circle" />
+            <div class="circle" />
+          </div>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use './index.scss'
+</style>

src/views/Home/components/PrizeList/index.scss

@@ -0,0 +1,138 @@
+.label {
+    width: 120px;
+}
+
+.prize-list-enter-active {
+    -webkit-animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+    animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+}
+
+.prize-list-leave-active {
+    -webkit-animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+    animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+}
+
+.prize-operate-enter-active {
+    // 延时显示
+    animation: show-operate 0.6s;
+    -webkit-animation: show-operate 0.6s;
+}
+
+.current-prize {
+    position: relative;
+    display: block;
+    overflow: hidden;
+    isolation: isolate;
+
+    border-radius: 20px;
+    padding: 3px;
+}
+
+.current-prize::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 400%;
+    height: 100%;
+    background: linear-gradient(115deg, #4fcf70, #fad648, #a767e5, #12bcfe, #44ce7b);
+    background-size: 25% 100%;
+    animation: an-at-keyframe-css-at-rule-that-translates-via-the-transform-property-the-background-by-negative-25-percent-of-its-width-so-that-it-gives-a-nice-border-animation_-We-use-the-translate-property-to-have-a-nice-transition-so-it_s-not-a-jerk-of-a-start-or-stop .75s linear infinite;
+    // animation-play-state: paused;
+    translate: -5% 0%;
+    transition: translate 0.25s ease-out;
+    animation-play-state: running;
+    transition-duration: 0.75s;
+    translate: 0% 0%;
+}
+
+.current-prize::after {
+    content: "";
+    position: absolute;
+    inset: 4px;
+    border-top-left-radius: 20px;
+    border-bottom-right-radius: 20px;
+    z-index: -1;
+}
+
+@keyframes an-at-keyframe-css-at-rule-that-translates-via-the-transform-property-the-background-by-negative-25-percent-of-its-width-so-that-it-gives-a-nice-border-animation_-We-use-the-translate-property-to-have-a-nice-transition-so-it_s-not-a-jerk-of-a-start-or-stop {
+    to {
+        transform: translateX(-25%);
+    }
+}
+
+@-webkit-keyframes slide-right {
+    0% {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+    }
+
+    100% {
+        -webkit-transform: translateX(30px);
+        transform: translateX(30px);
+    }
+}
+
+@keyframes slide-right {
+    0% {
+        -webkit-transform: translateX(-200px);
+        transform: translateX(-200px);
+    }
+
+    100% {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+    }
+}
+
+@-webkit-keyframes slide-left {
+    0% {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+    }
+
+    100% {
+        -webkit-transform: translateX(-100px);
+        transform: translateX(-100px);
+    }
+}
+
+@keyframes slide-left {
+    0% {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+    }
+
+    100% {
+        -webkit-transform: translateX(-400px);
+        transform: translateX(-400px);
+    }
+}
+
+@-webkit-keyframes show-operate {
+    0% {
+        opacity: 0;
+    }
+
+    99% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes show-operate {
+    0% {
+        opacity: 0;
+    }
+
+    99% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}

src/views/Home/components/PrizeList/index.vue

@@ -1,17 +1,17 @@
 <script setup lang='ts'>
-import type { IPrizeConfig } from '../../types/storeType'
+import type { IPrizeConfig } from '@/types/storeType'
+import { storeToRefs } from 'pinia'
+import { onMounted, ref } from 'vue'
+
+import { useI18n } from 'vue-i18n'
 import defaultPrizeImage from '@/assets/images/龙.png'
 import ImageSync from '@/components/ImageSync/index.vue'
 
 import EditSeparateDialog from '@/components/NumberSeparate/EditSeparateDialog.vue'
+
 import i18n from '@/locales/i18n'
 import useStore from '@/store'
 
-import { storeToRefs } from 'pinia'
-
-import { onMounted, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
 const { t } = useI18n()
 const prizeConfig = useStore().prizeConfig
 const globalConfig = useStore().globalConfig
@@ -318,142 +318,5 @@ onMounted(() => {
 </template>
 
 <style lang='scss' scoped>
-.label {
+@use "./index.scss";
-    width: 120px;
-}
-
-.prize-list-enter-active {
-    -webkit-animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
-    animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
-}
-
-.prize-list-leave-active {
-    -webkit-animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
-    animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
-}
-
-.prize-operate-enter-active {
-    // 延时显示
-    animation: show-operate 0.6s;
-    -webkit-animation: show-operate 0.6s;
-}
-
-.current-prize {
-    position: relative;
-    display: block;
-    overflow: hidden;
-    isolation: isolate;
-
-    border-radius: 20px;
-    padding: 3px;
-}
-
-.current-prize::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 400%;
-    height: 100%;
-    background: linear-gradient(115deg, #4fcf70, #fad648, #a767e5, #12bcfe, #44ce7b);
-    background-size: 25% 100%;
-    animation: an-at-keyframe-css-at-rule-that-translates-via-the-transform-property-the-background-by-negative-25-percent-of-its-width-so-that-it-gives-a-nice-border-animation_-We-use-the-translate-property-to-have-a-nice-transition-so-it_s-not-a-jerk-of-a-start-or-stop .75s linear infinite;
-    // animation-play-state: paused;
-    translate: -5% 0%;
-    transition: translate 0.25s ease-out;
-    animation-play-state: running;
-    transition-duration: 0.75s;
-    translate: 0% 0%;
-}
-
-.current-prize::after {
-    content: "";
-    position: absolute;
-    inset: 4px;
-    border-top-left-radius: 20px;
-    border-bottom-right-radius: 20px;
-    z-index: -1;
-}
-
-@keyframes an-at-keyframe-css-at-rule-that-translates-via-the-transform-property-the-background-by-negative-25-percent-of-its-width-so-that-it-gives-a-nice-border-animation_-We-use-the-translate-property-to-have-a-nice-transition-so-it_s-not-a-jerk-of-a-start-or-stop {
-    to {
-        transform: translateX(-25%);
-    }
-}
-
-@-webkit-keyframes slide-right {
-    0% {
-        -webkit-transform: translateX(0);
-        transform: translateX(0);
-    }
-
-    100% {
-        -webkit-transform: translateX(30px);
-        transform: translateX(30px);
-    }
-}
-
-@keyframes slide-right {
-    0% {
-        -webkit-transform: translateX(-200px);
-        transform: translateX(-200px);
-    }
-
-    100% {
-        -webkit-transform: translateX(0);
-        transform: translateX(0);
-    }
-}
-
-@-webkit-keyframes slide-left {
-    0% {
-        -webkit-transform: translateX(0);
-        transform: translateX(0);
-    }
-
-    100% {
-        -webkit-transform: translateX(-100px);
-        transform: translateX(-100px);
-    }
-}
-
-@keyframes slide-left {
-    0% {
-        -webkit-transform: translateX(0);
-        transform: translateX(0);
-    }
-
-    100% {
-        -webkit-transform: translateX(-400px);
-        transform: translateX(-400px);
-    }
-}
-
-@-webkit-keyframes show-operate {
-    0% {
-        opacity: 0;
-    }
-
-    99% {
-        opacity: 0;
-    }
-
-    100% {
-        opacity: 1;
-    }
-}
-
-@keyframes show-operate {
-    0% {
-        opacity: 0;
-    }
-
-    99% {
-        opacity: 0;
-    }
-
-    100% {
-        opacity: 1;
-    }
-}
 </style>

src/views/Home/components/StarsBackground/index.vue

@@ -0,0 +1,71 @@
+<script setup lang='ts'>
+import { useElementSize } from '@vueuse/core'
+import localforage from 'localforage'
+import Sparticles from 'sparticles'
+import { onMounted, onUnmounted, ref } from 'vue'
+
+const props = defineProps({
+  homeBackground: {
+    type: Object,
+    default: () => ({
+      id: '',
+      name: '',
+      url: '',
+    }),
+  },
+})
+const imageDbStore = localforage.createInstance({
+  name: 'imgStore',
+})
+const imgUrl = ref('')
+const starRef = ref()
+
+const { width, height } = useElementSize(starRef)
+const options = ref({ shape: 'star', parallax: 1.2, rotate: true, twinkle: true, speed: 10, count: 200 })
+function addSparticles(node: any, width: number, height: number) {
+  const sparticleInstance = new Sparticles(node, options.value, width, height)
+  return sparticleInstance
+}
+// 页面大小改变时
+function listenWindowSize() {
+  window.addEventListener('resize', () => {
+    if (width.value && height.value) {
+      addSparticles(starRef.value, width.value, height.value)
+    }
+  })
+}
+
+async function getImageStoreItem(item: any): Promise<string> {
+  let image = ''
+  if (item.url === 'Storage') {
+    const key = item.id
+    image = await imageDbStore.getItem(key) as string
+  }
+  else {
+    image = item.url
+  }
+
+  return image
+}
+onMounted(() => {
+  getImageStoreItem(props.homeBackground).then((image) => {
+    imgUrl.value = image
+  })
+  addSparticles(starRef.value, width.value, height.value)
+  listenWindowSize()
+})
+onUnmounted(() => {
+  window.removeEventListener('resize', listenWindowSize)
+})
+</script>
+
+<template>
+  <div v-if="homeBackground.url" class="home-background w-screen h-screen overflow-hidden">
+    <img :src="imgUrl" class="w-full h-full object-cover" alt="">
+  </div>
+  <div v-else ref="starRef" class="w-screen h-screen overflow-hidden" />
+</template>
+
+<style lang='scss' scoped>
+
+</style>

src/views/Home/type.ts

@@ -0,0 +1,12 @@
+export enum LotteryStatus {
+    init = 0,
+    ready = 1,
+    running = 2,
+    end = 3,
+}
+export interface TargetType {
+    grid: any[]
+    helix: any[]
+    table: any[]
+    sphere: any[]
+}

src/views/Home/useViewModel.ts

@@ -0,0 +1,606 @@
+import type { Material, Object3D } from 'three'
+import type { TargetType } from './type'
+import type { IPersonConfig } from '@/types/storeType'
+import * as TWEEN from '@tweenjs/tween.js'
+import { storeToRefs } from 'pinia'
+import { PerspectiveCamera, Scene } from 'three'
+import { CSS3DObject, CSS3DRenderer } from 'three-css3d'
+import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls.js'
+import { nextTick, onMounted, onUnmounted, ref } from 'vue'
+import { useToast } from 'vue-toast-notification'
+import { useElementPosition, useElementStyle } from '@/hooks/useElement'
+import i18n from '@/locales/i18n'
+import useStore from '@/store'
+import { selectCard } from '@/utils'
+import { rgba } from '@/utils/color'
+import { LotteryStatus } from './type'
+import { confettiFire, createSphereVertices, createTableVertices, initTableData } from './util'
+
+export function useViewModel() {
+    const toast = useToast()
+    // store里面存储的值
+    const { personConfig, globalConfig, prizeConfig } = useStore()
+    const {
+        getAllPersonList: allPersonList,
+        getNotPersonList: notPersonList,
+        getNotThisPrizePersonList: notThisPrizePersonList,
+    } = storeToRefs(personConfig)
+    const { getCurrentPrize: currentPrize } = storeToRefs(prizeConfig)
+    const { getCardColor: cardColor, getPatterColor: patternColor, getPatternList: patternList, getTextColor: textColor, getLuckyColor: luckyColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount, getIsShowAvatar: isShowAvatar } = storeToRefs(globalConfig)
+    // three初始值
+    const ballRotationY = ref(0)
+    const containerRef = ref<HTMLElement>()
+    const canOperate = ref(true)
+    const cameraZ = ref(3000)
+    const scene = ref()
+    const camera = ref()
+    const renderer = ref()
+    const controls = ref()
+    const objects = ref<any[]>([])
+    const targets: TargetType = {
+        grid: [],
+        helix: [],
+        table: [],
+        sphere: [],
+    }
+    // 页面数据初始值
+    const currentStatus = ref<LotteryStatus>(LotteryStatus.init) // 0为初始状态， 1为抽奖准备状态，2为抽奖中状态，3为抽奖结束状态
+    const tableData = ref<any[]>([])
+    const luckyTargets = ref<any[]>([])
+    const luckyCardList = ref<number[]>([])
+    const luckyCount = ref(10)
+    const personPool = ref<IPersonConfig[]>([])
+    const intervalTimer = ref<any>(null)
+
+    function init() {
+        const felidView = 40
+        const width = window.innerWidth
+        const height = window.innerHeight
+        const aspect = width / height
+        const nearPlane = 1
+        const farPlane = 10000
+        const WebGLoutput = containerRef.value
+
+        scene.value = new Scene()
+        camera.value = new PerspectiveCamera(felidView, aspect, nearPlane, farPlane)
+        camera.value.position.z = cameraZ.value
+        renderer.value = new CSS3DRenderer()
+        renderer.value.setSize(width, height * 0.9)
+        renderer.value.domElement.style.position = 'absolute'
+        // 垂直居中
+        renderer.value.domElement.style.paddingTop = '50px'
+        renderer.value.domElement.style.top = '50%'
+        renderer.value.domElement.style.left = '50%'
+        renderer.value.domElement.style.transform = 'translate(-50%, -50%)'
+        WebGLoutput!.appendChild(renderer.value.domElement)
+
+        controls.value = new TrackballControls(camera.value, renderer.value.domElement)
+        controls.value.rotateSpeed = 1
+        controls.value.staticMoving = true
+        controls.value.minDistance = 500
+        controls.value.maxDistance = 6000
+        controls.value.addEventListener('change', render)
+
+        const tableLen = tableData.value.length
+        for (let i = 0; i < tableLen; i++) {
+            let element = document.createElement('div')
+            element.className = 'element-card'
+
+            const number = document.createElement('div')
+            number.className = 'card-id'
+            number.textContent = tableData.value[i].uid
+            if (isShowAvatar.value)
+                number.style.display = 'none'
+            element.appendChild(number)
+
+            const symbol = document.createElement('div')
+            symbol.className = 'card-name'
+            symbol.textContent = tableData.value[i].name
+            if (isShowAvatar.value)
+                symbol.className = 'card-name card-avatar-name'
+            element.appendChild(symbol)
+
+            const detail = document.createElement('div')
+            detail.className = 'card-detail'
+            detail.innerHTML = `${tableData.value[i].department}<br/>${tableData.value[i].identity}`
+            if (isShowAvatar.value)
+                detail.style.display = 'none'
+            element.appendChild(detail)
+
+            const avatar = document.createElement('img')
+            avatar.className = 'card-avatar'
+            avatar.src = tableData.value[i].avatar
+            avatar.alt = 'avatar'
+            avatar.style.width = '140px'
+            avatar.style.height = '140px'
+            if (!isShowAvatar.value)
+                avatar.style.display = 'none'
+            element.appendChild(avatar)
+
+            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
+            object.position.z = Math.random() * 4000 - 2000
+            scene.value.add(object)
+
+            objects.value.push(object)
+        }
+        // 创建横铺的界面
+        const tableVertices = createTableVertices({ tableData: tableData.value, rowCount: rowCount.value, cardSize: cardSize.value })
+        targets.table = tableVertices
+        // 创建球体
+        const sphereVertices = createSphereVertices({ objectsLength: objects.value.length })
+        targets.sphere = sphereVertices
+        window.addEventListener('resize', onWindowResize, false)
+        transform(targets.table, 1000)
+        render()
+    }
+    function render() {
+        if (renderer.value) {
+            renderer.value.render(scene.value, camera.value)
+        }
+    }
+    /**
+     * @description: 位置变换
+     * @param targets 目标位置
+     * @param duration 持续时间
+     */
+    function transform(targets: any[], duration: number) {
+        TWEEN.removeAll()
+        if (intervalTimer.value) {
+            clearInterval(intervalTimer.value)
+            intervalTimer.value = null
+            randomBallData('sphere')
+        }
+
+        return new Promise((resolve) => {
+            const objLength = objects.value.length
+            for (let i = 0; i < objLength; ++i) {
+                const object = objects.value[i]
+                const target = targets[i]
+                //   console.log('target', i, target, targets)
+                new TWEEN.Tween(object.position)
+                    .to({ x: target.position.x, y: target.position.y, z: target.position.z }, Math.random() * duration + duration)
+                    .easing(TWEEN.Easing.Exponential.InOut)
+                    .start()
+
+                new TWEEN.Tween(object.rotation)
+                    .to({ x: target.rotation.x, y: target.rotation.y, z: target.rotation.z }, Math.random() * duration + duration)
+                    .easing(TWEEN.Easing.Exponential.InOut)
+                    .start()
+                    .onComplete(() => {
+                        if (luckyCardList.value.length) {
+                            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')
+                            })
+                        }
+                        luckyTargets.value = []
+                        luckyCardList.value = []
+                        canOperate.value = true
+                    })
+            }
+
+            // 这个补间用来在位置与旋转补间同步执行，通过onUpdate在每次更新数据后渲染scene和camera
+            new TWEEN.Tween({})
+                .to({}, duration * 2)
+                .onUpdate(render)
+                .start()
+                .onComplete(() => {
+                    canOperate.value = true
+                    resolve('')
+                })
+        })
+    }
+    /**
+     * @description: 窗口大小改变时重新设置渲染器的大小
+     */
+    function onWindowResize() {
+        camera.value.aspect = window.innerWidth / window.innerHeight
+        camera.value.updateProjectionMatrix()
+
+        renderer.value.setSize(window.innerWidth, window.innerHeight)
+        render()
+    }
+
+    /**
+     * [animation update all tween && controls]
+     */
+    function animation() {
+        TWEEN.update()
+        if (controls.value) {
+            controls.value.update()
+        }
+        // 设置自动旋转
+        // 设置相机位置
+        requestAnimationFrame(animation)
+    }
+    /**
+     * @description: 旋转的动画
+     * @param rotateY 绕y轴旋转圈数
+     * @param duration 持续时间，单位秒
+     */
+    function rollBall(rotateY: number, duration: number) {
+        TWEEN.removeAll()
+
+        return new Promise((resolve) => {
+            scene.value.rotation.y = 0
+            ballRotationY.value = Math.PI * rotateY * 1000
+            const rotateObj = new TWEEN.Tween(scene.value.rotation)
+            rotateObj
+                .to(
+                    {
+                        // x: Math.PI * rotateX * 1000,
+                        x: 0,
+                        y: ballRotationY.value,
+                        // z: Math.PI * rotateZ * 1000
+                        z: 0,
+                    },
+                    duration * 1000,
+                )
+                .onUpdate(render)
+                .start()
+                .onStop(() => {
+                    resolve('')
+                })
+                .onComplete(() => {
+                    resolve('')
+                })
+        })
+    }
+    /**
+     * @description: 视野转回正面
+     */
+    function resetCamera() {
+        new TWEEN.Tween(camera.value.position)
+            .to(
+                {
+                    x: 0,
+                    y: 0,
+                    z: 3000,
+                },
+                1000,
+            )
+            .onUpdate(render)
+            .start()
+            .onComplete(() => {
+                new TWEEN.Tween(camera.value.rotation)
+                    .to(
+                        {
+                            x: 0,
+                            y: 0,
+                            z: 0,
+                        },
+                        1000,
+                    )
+                    .onUpdate(render)
+                    .start()
+                    .onComplete(() => {
+                        canOperate.value = true
+                        // camera.value.lookAt(scene.value.position)
+                        camera.value.position.y = 0
+                        camera.value.position.x = 0
+                        camera.value.position.z = 3000
+                        camera.value.rotation.x = 0
+                        camera.value.rotation.y = 0
+                        camera.value.rotation.z = -0
+                        controls.value.reset()
+                    })
+            })
+    }
+
+    /**
+     * @description: 开始抽奖，由横铺变换为球体（或其他图形）
+     * @returns 随机抽取球数据
+     */
+    /// <IP_ADDRESS>description 进入抽奖准备状态
+    async function enterLottery() {
+        if (!canOperate.value) {
+            return
+        }
+        if (!intervalTimer.value) {
+            randomBallData()
+        }
+        if (patternList.value.length) {
+            for (let i = 0; i < patternList.value.length; i++) {
+                if (i < rowCount.value * 7) {
+                    objects.value[patternList.value[i] - 1].element.style.backgroundColor = rgba(cardColor.value, Math.random() * 0.5 + 0.25)
+                }
+            }
+        }
+        canOperate.value = false
+        await transform(targets.sphere, 1000)
+        currentStatus.value = LotteryStatus.ready
+        rollBall(0.1, 2000)
+    }
+    /**
+     * @description 开始抽奖
+     */
+    function startLottery() {
+        if (!canOperate.value) {
+            return
+        }
+        // 验证是否已抽完全部奖项
+        if (currentPrize.value.isUsed || !currentPrize.value) {
+            toast.open({
+                message: i18n.global.t('error.personIsAllDone'),
+                type: 'warning',
+                position: 'top-right',
+                duration: 10000,
+            })
+
+            return
+        }
+        personPool.value = currentPrize.value.isAll ? notThisPrizePersonList.value : notPersonList.value
+        // 验证抽奖人数是否还够
+        if (personPool.value.length < currentPrize.value.count - currentPrize.value.isUsedCount) {
+            toast.open({
+                message: i18n.global.t('error.personNotEnough'),
+                type: 'warning',
+                position: 'top-right',
+                duration: 10000,
+            })
+
+            return
+        }
+        luckyCount.value = 10
+        // 自定义抽奖个数
+
+        let leftover = currentPrize.value.count - currentPrize.value.isUsedCount
+        const customCount = currentPrize.value.separateCount
+        if (customCount && customCount.enable && customCount.countList.length > 0) {
+            for (let i = 0; i < customCount.countList.length; i++) {
+                if (customCount.countList[i].isUsedCount < customCount.countList[i].count) {
+                    leftover = customCount.countList[i].count - customCount.countList[i].isUsedCount
+                    break
+                }
+            }
+        }
+        luckyCount.value = leftover < luckyCount.value ? leftover : luckyCount.value
+        for (let i = 0; i < luckyCount.value; i++) {
+            if (personPool.value.length > 0) {
+                // 解决随机元素概率过于不均等问题
+                const randomIndex = Math.floor(Math.random() * (personPool.value.length - 1))
+                luckyTargets.value.push(personPool.value[randomIndex])
+                personPool.value.splice(randomIndex, 1)
+            }
+        }
+
+        toast.open({
+            // message: `现在抽取${currentPrize.value.name} ${leftover}人`,
+            message: i18n.global.t('error.startDraw', { count: currentPrize.value.name, leftover }),
+            type: 'default',
+            position: 'top-right',
+            duration: 8000,
+        })
+        currentStatus.value = LotteryStatus.running
+        rollBall(10, 3000)
+    }
+    /**
+     * @description: 停止抽奖，抽出幸运人
+     */
+    async function stopLottery() {
+        if (!canOperate.value) {
+            return
+        }
+        //   clearInterval(intervalTimer.value)
+        //   intervalTimer.value = null
+        canOperate.value = false
+        rollBall(0, 1)
+
+        const windowSize = { width: window.innerWidth, height: window.innerHeight }
+        luckyTargets.value.forEach((person: IPersonConfig, index: number) => {
+            const cardIndex = selectCard(luckyCardList.value, tableData.value.length, person.id)
+            luckyCardList.value.push(cardIndex)
+            const totalLuckyCount = luckyTargets.value.length
+            const item = objects.value[cardIndex]
+            const { xTable, yTable } = useElementPosition(item, rowCount.value, totalLuckyCount, { width: cardSize.value.width * 2, height: cardSize.value.height * 2 }, windowSize, index)
+            new TWEEN.Tween(item.position)
+                .to({
+                    x: xTable,
+                    y: yTable,
+                    z: 1000,
+                }, 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')
+                })
+                .start()
+                .onComplete(() => {
+                    canOperate.value = true
+                    currentStatus.value = LotteryStatus.end
+                })
+            new TWEEN.Tween(item.rotation)
+                .to({
+                    x: 0,
+                    y: 0,
+                    z: 0,
+                }, 900)
+                .easing(TWEEN.Easing.Exponential.InOut)
+                .start()
+                .onComplete(() => {
+                    confettiFire()
+                    resetCamera()
+                })
+        })
+    }
+    /**
+     * @description: 继续,意味着这抽奖作数，计入数据库
+     */
+    async function continueLottery() {
+        if (!canOperate.value) {
+            return
+        }
+
+        const customCount = currentPrize.value.separateCount
+        if (customCount && customCount.enable && customCount.countList.length > 0) {
+            for (let i = 0; i < customCount.countList.length; i++) {
+                if (customCount.countList[i].isUsedCount < customCount.countList[i].count) {
+                    customCount.countList[i].isUsedCount += luckyCount.value
+                    break
+                }
+            }
+        }
+        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)
+        await enterLottery()
+    }
+    /**
+     * @description: 放弃本次抽奖，回到初始状态
+     */
+    function quitLottery() {
+        enterLottery()
+        currentStatus.value = LotteryStatus.init
+    }
+
+    /**
+     * @description: 随机替换卡片中的数据（不改变原有的值，只是显示）
+     * @param {string} mod 模式
+     */
+    function 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 randomCardIndex = Math.floor(Math.random() * (tableData.value.length - 1))
+                const randomPersonIndex = Math.floor(Math.random() * (allPersonList.value.length - 1))
+                if (luckyCardList.value.includes(randomCardIndex)) {
+                    continue
+                }
+                cardRandomIndexArr.push(randomCardIndex)
+                personRandomIndexArr.push(randomPersonIndex)
+            }
+            for (let i = 0; i < cardRandomIndexArr.length; i++) {
+                if (!objects.value[cardRandomIndexArr[i]]) {
+                    continue
+                }
+                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, 'change')
+            }
+        }, 200)
+    }
+    /**
+     * @description: 键盘监听，快捷键操作
+     */
+    function listenKeyboard(e: any) {
+        if ((e.keyCode !== 32 || e.keyCode !== 27) && !canOperate.value) {
+            return
+        }
+        if (e.keyCode === 27 && currentStatus.value === LotteryStatus.running) {
+            quitLottery()
+        }
+        if (e.keyCode !== 32) {
+            return
+        }
+        switch (currentStatus.value) {
+            case LotteryStatus.init:
+                enterLottery()
+                break
+            case LotteryStatus.ready:
+                startLottery()
+                break
+            case LotteryStatus.running:
+                stopLottery()
+                break
+            case LotteryStatus.end:
+                continueLottery()
+                break
+            default:
+                break
+        }
+    }
+    /**
+     * @description: 清理资源，避免内存溢出
+     */
+    function cleanup() {
+        clearInterval(intervalTimer.value)
+        intervalTimer.value = null
+        if (scene.value) {
+            scene.value.traverse((object: Object3D) => {
+                if ((object as any).material) {
+                    if (Array.isArray((object as any).material)) {
+                        (object as any).material.forEach((material: Material) => {
+                            material.dispose()
+                        })
+                    }
+                    else {
+                        (object as any).material.dispose()
+                    }
+                }
+                if ((object as any).geometry) {
+                    (object as any).geometry.dispose()
+                }
+                if ((object as any).texture) {
+                    (object as any).texture.dispose()
+                }
+            })
+            scene.value.clear()
+        }
+
+        if (objects.value) {
+            objects.value.forEach((object) => {
+                if (object.element) {
+                    object.element.remove()
+                }
+            })
+            objects.value = []
+        }
+
+        if (controls.value) {
+            controls.value.removeEventListener('change')
+            controls.value.dispose()
+        }
+        //   移除所有事件监听
+        window.removeEventListener('resize', onWindowResize)
+        scene.value = null
+        camera.value = null
+        renderer.value = null
+        controls.value = null
+    }
+    /**
+     * @description: 设置默认人员列表
+     */
+    function setDefaultPersonList() {
+        personConfig.setDefaultPersonList()
+        // 刷新页面
+        window.location.reload()
+    }
+    onMounted(() => {
+        tableData.value = initTableData({ allPersonList: allPersonList.value, rowCount: rowCount.value })
+        init()
+        animation()
+        containerRef.value!.style.color = `${textColor}`
+        randomBallData()
+        window.addEventListener('keydown', listenKeyboard)
+    })
+    onUnmounted(() => {
+        nextTick(() => {
+            cleanup()
+        })
+        clearInterval(intervalTimer.value)
+        intervalTimer.value = null
+        window.removeEventListener('keydown', listenKeyboard)
+    })
+
+    return {
+        setDefaultPersonList,
+        startLottery,
+        continueLottery,
+        quitLottery,
+        containerRef,
+        stopLottery,
+        enterLottery,
+        tableData,
+        currentStatus,
+    }
+}

src/views/Home/util.ts

@@ -0,0 +1,131 @@
+import type { IPersonConfig } from '@/types/storeType'
+import confetti from 'canvas-confetti'
+import { Object3D, Vector3 } from 'three'
+import { filterData } from '@/utils'
+/**
+ * @description 初始化表格数据
+ * @param0 allPersonList 所有人的列表
+ * @param1 rowCount 行数，默认是7行
+ * @returns 表格数据
+ */
+export function initTableData({ allPersonList, rowCount }: { allPersonList: IPersonConfig[], rowCount: number }): IPersonConfig[] {
+    let tableData: IPersonConfig[] = []
+    if (allPersonList.length <= 0) {
+        return []
+    }
+    const totalCount = rowCount * 7
+    const allPersonLength = allPersonList.length
+    if (allPersonLength < totalCount) {
+        tableData = Array.from({ length: totalCount }, () => JSON.parse(JSON.stringify(allPersonList))).flat()
+    }
+    else {
+        tableData = allPersonList.slice(0, totalCount)
+    }
+    tableData = filterData(tableData.slice(0, totalCount), rowCount)
+    return tableData
+}
+
+/**
+ * @description 横铺图形：处理数据，把每个卡片在界面的位置写入
+ * @param0 tableData 表格数据
+ * @param1 rowCount 每行有多少个元素
+ * @param2 cardSize 卡片的大小
+ * @returns  Object3D[]
+ */
+export function createTableVertices({ tableData, rowCount, cardSize }: { tableData: IPersonConfig[], rowCount: number, cardSize: { width: number, height: number } }): Object3D[] {
+    const tableLen = tableData.length
+    const objects: Object3D[] = []
+    for (let i = 0; i < tableLen; i++) {
+        const object = new Object3D()
+
+        object.position.x = tableData[i].x * (cardSize.width + 40) - rowCount * 90
+        object.position.y = -tableData[i].y * (cardSize.height + 20) + 1000
+        object.position.z = 0
+        objects.push(object)
+        // targets.table.push(object)
+    }
+    return objects
+}
+/**
+ * @description 创建球体
+ * @param0 objectsLength 物体的个数
+ * @returns Object3D[]
+ */
+export function createSphereVertices({ objectsLength }: { objectsLength: number }): Object3D[] {
+    let i = 0
+    const resObjects: Object3D[] = []
+    // const objLength = objects.value.length
+    const vector = new Vector3()
+
+    for (; i < objectsLength; ++i) {
+        const phi = Math.acos(-1 + (2 * i) / objectsLength)
+        const theta = Math.sqrt(objectsLength * Math.PI) * phi
+        const object = new Object3D()
+
+        object.position.x = 800 * Math.cos(theta) * Math.sin(phi)
+        object.position.y = 800 * Math.sin(theta) * Math.sin(phi)
+        object.position.z = -800 * Math.cos(phi)
+
+        // rotation object
+        vector.copy(object.position).multiplyScalar(2)
+        object.lookAt(vector)
+        resObjects.push(object)
+    }
+    return resObjects
+}
+
+export function confettiFire() {
+    const duration = 3 * 1000
+    const end = Date.now() + duration;
+    (function frame() {
+        // launch a few confetti from the left edge
+        confetti({
+            particleCount: 2,
+            angle: 60,
+            spread: 55,
+            origin: { x: 0 },
+        })
+        // and launch a few from the right edge
+        confetti({
+            particleCount: 2,
+            angle: 120,
+            spread: 55,
+            origin: { x: 1 },
+        })
+
+        // keep going until we are out of time
+        if (Date.now() < end) {
+            requestAnimationFrame(frame)
+        }
+    }())
+    centerFire(0.25, {
+        spread: 26,
+        startVelocity: 55,
+    })
+    centerFire(0.2, {
+        spread: 60,
+    })
+    centerFire(0.35, {
+        spread: 100,
+        decay: 0.91,
+        scalar: 0.8,
+    })
+    centerFire(0.1, {
+        spread: 120,
+        startVelocity: 25,
+        decay: 0.92,
+        scalar: 1.2,
+    })
+    centerFire(0.1, {
+        spread: 120,
+        startVelocity: 45,
+    })
+}
+function centerFire(particleRatio: number, opts: any) {
+    const count = 200
+    confetti({
+        origin: { y: 0.7 },
+        ...opts,
+        particleCount: Math.floor(count * particleRatio),
+    })
+}

src/vite-env.d.ts

@@ -9,3 +9,4 @@ declare module '*.vue' {
 
 declare module 'sparticles'
 declare module 'three-trackballcontrols'
+declare module 'virtual:svg-icons-register'