feat: bb

2024-01-10 00:52:34 +08:00
parent f34e850ff0
commit f0a62aacb5
21 changed files with 694 additions and 373 deletions
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-theme="dracula">

 <head>
    <meta charset="UTF-8" />
--- a/public/人口登记表.xlsx
+++ b/public/人口登记表.xlsx
--- a/src/components/DaiysuiTable/index.vue
+++ b/src/components/DaiysuiTable/index.vue
@@ -1,4 +1,3 @@
-import { mapActions } from 'pinia';
 <script setup lang='ts'>
 import { computed } from 'vue';
 const props = defineProps({
--- a/src/components/PlayMusic/index.vue
+++ b/src/components/PlayMusic/index.vue
@@ -1,30 +1,27 @@
 <script setup lang='ts'>
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted,watch } from 'vue'
 import useStore from '@/store';
+import { storeToRefs } from 'pinia';
 import localforage from 'localforage'
 import { useRouter, useRoute } from 'vue-router';
-import { useAudio } from '@/hooks/useAudio'
 const router = useRouter()
 const route = useRoute()
 const audioDbStore = localforage.createInstance({
    name: 'audioStore'
 })
-
-const audioHook = useAudio()
-const { audio, audioPaused } = audioHook
+const audio=ref(new Audio())
 const settingRef = ref()
 // const audio = ref(new Audio())
-const currentMusic = ref<any>()
 const globalConfig = useStore().globalConfig
-const { getMusicList: localMusicList } = globalConfig;
+const { getMusicList: localMusicList,getCurrentMusic:currentMusic } = storeToRefs(globalConfig);
 const localMusicListValue = ref(localMusicList)

-const play = async (item: any, skip = false) => {
-    if (!audio.value.paused && !skip) {
-        audioHook.pause()
+const play = async (item: any) => {
+    // if (!audio.value.paused && !skip) {
+    //     audio.value.pause()

-        return
-    }
+    //     return
+    // }
    let audioUrl = ''
    if (!item.url) {
        return
@@ -35,21 +32,27 @@ const play = async (item: any, skip = false) => {
    else {
        audioUrl = item.url
    }
-    audioHook.pause()
-    audioHook.setAudioSrc(audioUrl)
-    audioHook.play()
+    audio.value.pause()
+    audio.value.src = audioUrl
+    audio.value.play()
 }
+const playMusic=(item:any,skip = false)=>{
+    if(!currentMusic.value.paused&&!skip){
+        globalConfig.setCurrentMusic(item,true)
        
+return
+    }
+    globalConfig.setCurrentMusic(item,false)
+}
 const nextPlay = () => {
    // 播放下一首
    if (localMusicListValue.value.length > 1) {
-        let index = localMusicListValue.value.findIndex((item: any) => item.name == currentMusic.value.name)
+        let index = localMusicListValue.value.findIndex((item: any) => item.name == currentMusic.value.item.name)
        index++
        if (index >= localMusicListValue.value.length) {
            index = 0
        }
-        currentMusic.value = localMusicListValue.value[index]
-        play(currentMusic.value, true)
+        globalConfig.setCurrentMusic(localMusicListValue.value[index],false)
    }
 }
 // 监听播放成后开始下一首
@@ -58,20 +61,28 @@ const onPlayEnd = () => {
 }

 const enterConfig = () => {
-    router.push('/config')
+    router.push('/log-lottery/config')
 }
 const enterHome = () => {
-    router.push('/')
+    router.push('/log-lottery')
 }

 onMounted(() => {
-    currentMusic.value = localMusicListValue.value[0]
+    globalConfig.setCurrentMusic(localMusicListValue.value[0],true)
    onPlayEnd()
    // 不使用空格控制audio
 })
 onUnmounted(() => {
    audio.value.removeEventListener('ended', nextPlay)
 })
+watch(currentMusic, (val: any) => {
+    if(!val.paused&&audio.value){
+        play(val.item)
+    }
+    else{
+        audio.value.pause()
+    }
+},{deep:true})

 </script>

@@ -90,10 +101,10 @@ onUnmounted(() => {
            </div>
        </div>

-        <div class="tooltip tooltip-left" :data-tip="currentMusic ? currentMusic.name+'\n\r &nbsp; 右键下一曲' : '播放/暂停'">
+        <div class="tooltip tooltip-left" :data-tip="currentMusic ? currentMusic.item.name+'\n\r &nbsp; 右键下一曲' : '播放/暂停'">
            <div class="flex items-center justify-center w-10 h-10 p-0 m-0 cursor-pointer setting-container bg-slate-500/50 rounded-l-xl hover:bg-slate-500/80 hover:text-blue-400/90"
-                @click="play(currentMusic)" @click.right.prevent="nextPlay">
-                <svg-icon :name="audioPaused ? 'play' : 'pause'"></svg-icon>
+                @click="playMusic(currentMusic.item)" @click.right.prevent="nextPlay">
+                <svg-icon :name="currentMusic.paused ? 'play' : 'pause'"></svg-icon>
            </div>
        </div>
        <!-- <div class="bg-blue-300 cursor-pointer" @click="nextPlay">下一首</div> -->
--- a/src/hooks/useAudio.ts
+++ b/src/hooks/useAudio.ts
@@ -1,40 +0,0 @@
-import {ref} from 'vue'
-
-export const useAudio = () => {
-    const audio = ref(new Audio)
-    const audioPaused=ref(true)
-    const setAudioSrc = (src: string) => {
-        audio.value.src = src
-    }
-    const play = () => {
-        audio.value.play()
-        setPaused(false)
-    }
-    const pause = () => {
-        audio.value.pause()
-        setPaused(true)
-    }
-    const setPaused=(paused:boolean)=>{
-        audioPaused.value=paused
-    }
-    const stop = () => {
-        audio.value.pause()
-        audio.value.currentTime = 0
-    }
-    const nextPlay = (src:string) => {
-        pause()
-        setAudioSrc(src)
-        play()
-    }
-
-    return {
-        audio,
-        audioPaused,
-        play,
-        nextPlay,
-        setPaused,
-        pause,
-        stop,
-        setAudioSrc
-    }
-}
--- a/src/hooks/useElement.ts
+++ b/src/hooks/useElement.ts
@@ -1,7 +1,7 @@
 import { rgba } from '@/utils/color'

 export const useElementStyle=(element:any,cardColor:string,cardSize:{width:number,height:number},textSize:number,mod:'default'|'lucky'='default')=>{
-    element.style.backgroundColor = rgba(cardColor, Math.random() * 0.5 + 0.25)
+    element.style.backgroundColor = rgba(cardColor, mod=='default'?Math.random() * 0.5 + 0.25:0.8)
    element.style.border = `1px solid ${rgba(cardColor, 0.25)}`
    element.style.boxShadow = `0 0 12px ${rgba(cardColor, 0.5)}`
    element.style.width = `${cardSize.width}px`;
@@ -34,8 +34,6 @@ export const useElementStyle=(element:any,cardColor:string,cardSize:{width:numbe
 }

 export const useElementPosition=(element:any,count:number,cardSize:{width:number,height:number},windowSize:{width:number,height:number},cardIndex:number)=>{
-    const rowCount=Math.floor(windowSize.width/(cardSize.width+100))
-    const colCount=Math.ceil(count/rowCount)
    const centerPosition={
        x:0,
        y:windowSize.height/2-cardSize.height/2
--- a/src/icons/sort-down.svg
+++ b/src/icons/sort-down.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1704811730115" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4344" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M64 320l448 448 448-448z"  p-id="4345"></path></svg>
--- a/src/icons/sort-up.svg
+++ b/src/icons/sort-up.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1704811726586" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4205" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M960 704L512 256l-448 448z" p-id="4206"></path></svg>
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -2,16 +2,16 @@ import { createRouter, createWebHistory } from 'vue-router';
 import Layout from '@/layout/index.vue';
 import Home from '@/views/Home/index.vue';
 export const configRoutes={
-    path: '/config',
+    path: '/log-lottery/config',
    name: 'Config',
    component: () => import('@/views/Config/index.vue'),
    children: [
        {
        path: '',
-        redirect: '/config/person',
+        redirect: '/log-lottery/config/person',
      },
      {
-        path: '/config/person',
+        path: '/log-lottery/config/person',
        name: 'PersonConfig',
        component: () => import('@/views/Config/Person/PersonConfig.vue'),
        meta: {
@@ -21,10 +21,10 @@ export const configRoutes={
        children:[
            {
                path:'',
-                redirect: '/config/person/all',
+                redirect: '/log-lottery/config/person/all',
            },
            {
-                path:'/config/person/all',
+                path:'/log-lottery/config/person/all',
                name:'AllPersonConfig',
                component:()=>import('@/views/Config/Person/PersonAll.vue'),
                meta:{
@@ -33,7 +33,7 @@ export const configRoutes={
                }
            },
            {
-                path:'/config/person/already',
+                path:'/log-lottery/config/person/already',
                name:'AlreadyPerson',
                component:()=>import('@/views/Config/Person/PersonAlready.vue'),
                meta:{
@@ -53,7 +53,7 @@ export const configRoutes={
        ]
      },
      {
-        path: '/config/prize',
+        path: '/log-lottery/config/prize',
        name: 'PrizeConfig',
        component: () => import('@/views/Config/Prize/PrizeConfig.vue'),
        meta:{
@@ -62,16 +62,16 @@ export const configRoutes={
        }
      },
      {
-        path:'/config/global',
+        path:'/log-lottery/config/global',
        name:'GlobalConfig',
-        redirect: '/config/global/all',
+        redirect: '/log-lottery/config/global/all',
        meta:{
            title:'全局配置',
            icon:'global'
        },
        children:[
            {
-                path:'/config/global/face',
+                path:'/log-lottery/config/global/face',
                name:'FaceConfig',
                component:()=>import('@/views/Config/Global/FaceConfig.vue'),
                meta:{
@@ -80,7 +80,7 @@ export const configRoutes={
                }
            },
            {
-                path:'/config/global/image',
+                path:'/log-lottery/config/global/image',
                name:'ImageConfig',
                component:()=>import('@/views/Config/Global/ImageConfig.vue'),
                meta:{
@@ -89,7 +89,7 @@ export const configRoutes={
                }
            },
            {
-                path:'/config/global/music',
+                path:'/log-lottery/config/global/music',
                name:'MusicConfig',
                component:()=>import('@/views/Config/Global/MusicConfig.vue'),
                meta:{
@@ -103,17 +103,17 @@ export const configRoutes={
  }
 const routes = [
  {
-    path: '/',
+    path: '/log-lottery',
    component: Layout,
-    redirect: '/home',
+    redirect: '/log-lottery/home',
    children: [
      {
-        path: '/home',
+        path: '/log-lottery/home',
        name: 'Home',
        component: Home,
      },
      {
-        path:'/demo',
+        path:'/log-lottery/demo',
        name:'Demo',
        component:()=>import('@/views/Demo/index.vue')
      },
--- a/src/store/data.ts
+++ b/src/store/data.ts
--- a/src/store/globalConfig.ts
+++ b/src/store/globalConfig.ts
@@ -20,7 +20,11 @@ export const useGlobalConfig = defineStore('global', {
                },
                musicList: defaultMusicList,
                imageList:defaultImageList,
-            }
+            },
+            currentMusic: {
+                item:defaultMusicList[0],
+                paused:true,
+            },
        };
    },
    getters: {
@@ -67,6 +71,10 @@ export const useGlobalConfig = defineStore('global', {
        getMusicList(state) {
            return state.globalConfig.musicList;
        },
+        // 获取当前音乐
+        getCurrentMusic(state) {
+            return state.currentMusic;
+        },
        // 获取图片列表
        getImageList(state) {
            return state.globalConfig.imageList;
@@ -132,6 +140,13 @@ export const useGlobalConfig = defineStore('global', {
                }
            }
        },
+        // 设置当前播放音乐
+        setCurrentMusic(musicItem: any,paused:boolean=true) {
+            this.currentMusic={
+                item:musicItem,
+                paused:paused,
+            }
+        },
        // 重置音乐列表
        resetMusicList() {
            this.globalConfig.musicList = defaultMusicList;
@@ -189,6 +204,10 @@ export const useGlobalConfig = defineStore('global', {
                },
                musicList: defaultMusicList,
                imageList:defaultImageList,
+            },
+            this.currentMusic= {
+                item:defaultMusicList[0],
+                paused:true,
            }
        }
    },
@@ -199,6 +218,7 @@ export const useGlobalConfig = defineStore('global', {
                // 如果要存储在localStorage中
                storage: localStorage,
                key: 'globalConfig',
+                paths: ['globalConfig'],
            },
        ],
    },
--- a/src/store/personConfig.ts
+++ b/src/store/personConfig.ts
@@ -1,12 +1,14 @@
 import { defineStore } from 'pinia';
 import { IPersonConfig } from '@/types/personConfig';
 import { IPrizeConfig } from '@/types/prizeConfig';
+import {defaultPersonList} from './data'
 export const usePersonConfig = defineStore('person', {
    state() {
        return {
            personConfig: {
-                alreadyPersonList: [] as IPersonConfig[],
-                notPersonList: [] as IPersonConfig[],
+                allPersonList: [] as IPersonConfig[],
+                // alreadyPersonList: [] as IPersonConfig[],
+                // notPersonList: [] as IPersonConfig[],
                tableRowCount: 12,
                showField: [] as any[]
            }
@@ -17,17 +19,21 @@ export const usePersonConfig = defineStore('person', {
        getPersonConfig(state) {
            return state.personConfig;
        },
+        // 获取全部人员名单
+        getAllPersonList(state) {
+            return state.personConfig.allPersonList;
+        },
        // 获取已中奖人员名单
        getAlreadyPersonList(state) {
-            return state.personConfig.alreadyPersonList;
+            return state.personConfig.allPersonList.filter((item: IPersonConfig) => {
+                return item.isWin === true;
+            });
        },
        // 获取未中奖人员名单
        getNotPersonList(state) {
-            return state.personConfig.notPersonList;
-        },
-        // 获取所有人员名单
-        getAllPersonList(state) {
-            return state.personConfig.alreadyPersonList.concat(state.personConfig.notPersonList);
+            return state.personConfig.allPersonList.filter((item: IPersonConfig) => {
+                return item.isWin === false;
+            });
        },
        // 获取table列数
        getTableRowCount(state) {
@@ -45,7 +51,7 @@ export const usePersonConfig = defineStore('person', {
                return
            }
            personList.forEach((item: IPersonConfig) => {
-                this.personConfig.notPersonList.push(item);
+                this.personConfig.allPersonList.push(item);
            });
        },
        // 添加已中奖人员
@@ -54,57 +60,58 @@ export const usePersonConfig = defineStore('person', {
                return
            }
            personList.forEach((person: IPersonConfig) => {
-                this.personConfig.notPersonList = this.personConfig.notPersonList.filter((item: IPersonConfig) =>
-                    item.id !== person.id)
-                if (prize != null) {
-                    person.isWin = true
-                    person.prizeName = prize.name
-                    person.prizeTime = new Date().toString()
+                this.personConfig.allPersonList.map((item: IPersonConfig) => {
+                    if (item.id === person.id&&prize!=null) {
+                        item.isWin = true
+                        item.prizeName = prize.name
+                        item.prizeTime = new Date().toString()
                    }
-                this.personConfig.alreadyPersonList.push(person);
+                });
            });
        },
        // 从已中奖移动到未中奖
        moveAlreadyToNot(person: IPersonConfig) {
            if (person.id != undefined || person.id != null) {
-                this.personConfig.alreadyPersonList = this.personConfig.alreadyPersonList.filter((item: IPersonConfig) => item.id !== person.id);
-                person.isWin = false
-                person.prizeTime = ''
-                person.prizeName = ''
-                this.personConfig.notPersonList.push(person);
+                for(let i=0;i<this.personConfig.allPersonList.length;i++){
+                    if(person.id === this.personConfig.allPersonList[i].id){
+                        this.personConfig.allPersonList[i].isWin=false
+                        this.personConfig.allPersonList[i].prizeName=''
+                        this.personConfig.allPersonList[i].prizeTime=''
+                        
+return
+                    }
+                }
            }
        },
        // 删除指定人员
        deletePerson(person: IPersonConfig) {
            if (person.id != undefined || person.id != null) {
-                this.personConfig.alreadyPersonList = this.personConfig.alreadyPersonList.filter((item: IPersonConfig) => item.id !== person.id);
-                this.personConfig.notPersonList = this.personConfig.notPersonList.filter((item: IPersonConfig) => item.id !== person.id);
+                this.personConfig.allPersonList = this.personConfig.allPersonList.filter((item: IPersonConfig) => item.id !== person.id);
            }
        },
        // 删除所有人员
        deleteAllPerson() {
-            this.personConfig.alreadyPersonList = [];
-            this.personConfig.notPersonList = [];
+            this.personConfig.allPersonList = [];
        },

        // 重置所有人员
        resetPerson() {
-            this.personConfig.alreadyPersonList = [];
-            this.personConfig.notPersonList = [];
+            this.personConfig.allPersonList = [];
        },
        // 重置已中奖人员
        resetAlreadyPerson() {
            // 把已中奖人员合并到未中奖人员，要验证是否已存在
-            if (this.personConfig.alreadyPersonList.length > 0) {
-                this.personConfig.notPersonList = this.personConfig.notPersonList.concat(this.personConfig.alreadyPersonList);
-                this.personConfig.alreadyPersonList = [];
-            }
+            this.personConfig.allPersonList.forEach((item: IPersonConfig) => {
+               item.isWin = false;
+            });
+        },
+        setDefaultPersonList() {
+            this.personConfig.allPersonList = defaultPersonList;
        },
        // 重置所有配置
        reset() {
            this.personConfig = {
-                alreadyPersonList: [] as IPersonConfig[],
-                notPersonList: [] as IPersonConfig[],
+                allPersonList: [] as IPersonConfig[],
                tableRowCount: 12,
                showField: [] as string[]
            }
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,5 +1,5 @@
 // 筛选人员数据
-export const filterData = (tableData: any[],localRowCount: number) => {
+export const filterData = (tableData: any[],localRowCount: number,startIndex=0) => {
    const dataLength = tableData.length
    let j = 0;
    for (let i = 0; i < dataLength; i++) {
--- a/src/views/Config/Global/MusicConfig.vue
+++ b/src/views/Config/Global/MusicConfig.vue
@@ -13,29 +13,12 @@ const audioDbStore = localforage.createInstance({
 const globalConfig = useStore().globalConfig

 const { getMusicList: localMusicList } = storeToRefs(globalConfig);
-const audio = ref(new Audio())
 const limitType = ref('audio/*')
 const localMusicListValue = ref(localMusicList)
 const play = async (item: any) => {
-    let audioUrl = ''
-    if (!item.url) {
-        return
+    globalConfig.setCurrentMusic(item,false)
 }
-    if (item.url == 'Storage') {
-        audioUrl = await audioDbStore.getItem(item.name) as string
-    }
-    else {
-        audioUrl = item.url
-    }
-    audio.value.pause()
-    audio.value.src = audioUrl

-    audio.value.currentTime = 0
-    audio.value.play()
-}
-const pausePlay = () => {
-    audio.value.pause()
-}
 const deleteMusic = (item: any) => {
    globalConfig.removeMusic(item.id)
    audioDbStore.removeItem(item.name)
@@ -96,7 +79,6 @@ onMounted(() => {
                    :accept="limitType" />
                <span class="btn btn-primary btn-sm">上传音乐</span>
            </label>
-            <button class="btn btn-primary btn-sm" @click="pausePlay">暂停播放</button>
            <button class="btn btn-error btn-sm" @click="deleteAll">删除所有</button>
        </div>
        <div>
--- a/src/views/Config/Person/PersonAll.vue
+++ b/src/views/Config/Person/PersonAll.vue
@@ -10,7 +10,7 @@ import DaiysuiTable from '@/components/DaiysuiTable/index.vue'

 const personConfig = useStore().personConfig
 const globalConfig = useStore().globalConfig
-const { getAllPersonList:allPersonList} = storeToRefs(personConfig)
+const { getAllPersonList: allPersonList,getAlreadyPersonList:alreadyPersonList } = storeToRefs(personConfig)
 const { getRowCount: rowCount } = storeToRefs(globalConfig)
 const limitType = '.xlsx,.xls'
 const excelData = ref<any[]>([])
@@ -31,6 +31,7 @@ const handleFileChange = async (e: any) => {
 const deleteAll = () => {
    personConfig.deleteAllPerson()
 }
+
 const delPersonItem = (row: any) => {
    personConfig.deletePerson(row)
 }
@@ -49,8 +50,8 @@ const tableColumns = [
        props: 'department',
    },
    {
-        label: '职位',
-        props: 'other',
+        label: '身份',
+        props: 'identity',
    },
    {
        label: '是否已中奖',
@@ -86,20 +87,30 @@ onMounted(() => {

 <template>
    <div class="min-w-1000px">
-        <div class="flex justify-center gap-3">
+        <div class="flex gap-3 justify-">
            <button class="btn btn-error btn-sm" @click="deleteAll">全部删除</button>
+            <div class="tooltip tooltip-bottom" data-tip="下载文件后，请在excel中填写数据，并保存为xlsx格式">
+                <a class="no-underline btn btn-secondary btn-sm" download="人口登记表.xlsx" target="_blank" href="/log-lottery/人口登记表.xlsx">下载模板</a>
+            </div>
            <div class="">
                <label for="explore">
-                <input type="file"
-                    class=""
-                    id="explore"
-                    style="display: none"
-                    @change="handleFileChange" :accept="limitType" />
+
+                    <div class="tooltip tooltip-bottom" data-tip="上传修改好的excel文件">
+                        <input type="file" class="" id="explore" style="display: none" @change="handleFileChange"
+                            :accept="limitType" />
+
                        <span class="btn btn-primary btn-sm">上传文件</span>
+                    </div>
                </label>
                <!-- <button class="btn btn-primary btn-sm">上传excel</button> -->

            </div>
+            <div>
+                <span>中奖人数：</span>
+                <span>{{ alreadyPersonList.length }}</span>
+                <span>&nbsp;/&nbsp;</span>
+                <span>{{ allPersonList.length }}</span>
+            </div>
        </div>
        <DaiysuiTable :tableColumns="tableColumns" :data="allPersonList"></DaiysuiTable>
    </div>
--- a/src/views/Config/Person/PersonAlready.vue
+++ b/src/views/Config/Person/PersonAlready.vue
@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/no-parsing-error -->
 <script setup lang='ts'>
-import { ref } from 'vue';
+// import { ref } from 'vue';
 import useStore from '@/store'
 import { storeToRefs } from 'pinia';
 import DaiysuiTable from '@/components/DaiysuiTable/index.vue'
@@ -13,9 +13,9 @@ const { getAlreadyPersonList: alreadyPersonList } = storeToRefs(personConfig)
 // )


-const deleteAll = () => {
-    personConfig.deleteAllPerson()
-}
+// const deleteAll = () => {
+//     personConfig.deleteAllPerson()
+// }
 const handleMoveNotPerson=(row:any)=>{
    personConfig.moveAlreadyToNot(row)
 }
@@ -24,6 +24,7 @@ const tableColumns = [
    {
        label: '编号',
        props: 'uid',
+        sort:true
    },
    {
        label: '姓名',
@@ -34,12 +35,13 @@ const tableColumns = [
        props: 'department',
    },
    {
-        label: '职位',
-        props: 'other',
+        label: '身份',
+        props: 'identity',
    },
    {
        label:'奖品',
-        props:'prizeName'
+        props:'prizeName',
+        sort:true
    },
    {
        label: '中奖时间',
@@ -71,9 +73,12 @@ const tableColumns = [

 <template>
    <div class="overflow-y-auto">
-        <div class="flex justify-center gap-3">
-            <button class="btn btn-error btn-sm" @click="deleteAll">全部删除</button>
-           
+        <div class="flex justify-start gap-3">
+            <!-- <button class="btn btn-error btn-sm" @click="deleteAll">全部删除</button> -->
+            <div>
+                <span>中奖人数：</span>
+                <span>{{ alreadyPersonList.length }}</span>
+            </div>
        </div>
        <DaiysuiTable :tableColumns="tableColumns" :data="alreadyPersonList"></DaiysuiTable>
    </div>
--- a/src/views/Config/Prize/PrizeConfig.vue
+++ b/src/views/Config/Prize/PrizeConfig.vue
@@ -63,7 +63,6 @@ const sort = (item: any, isUp: number) => {
 }
 const delItem = (item: IPrizeConfig) => {
    prizeConfig.deletePrizeConfig(item.id)
-    // 更新奖项列表
 }
 const delAll = async () => {
    await prizeConfig.deleteAllPrizeConfig()
@@ -71,8 +70,8 @@ const delAll = async () => {
 onMounted(() => {
    getImageDbStore()
 })
-watch(() => prizeList, () => {
-    prizeConfig.setPrizeConfig(prizeList.value)
+watch(() => prizeList, (val:any) => {
+    prizeConfig.setPrizeConfig(val)
 }, { deep: true })
 </script>

@@ -125,6 +124,13 @@ watch(() => prizeList, () => {
                    </div>
                    <input disabled type="number" v-model="item.isUsedCount" placeholder="获奖人数" class="w-full max-w-xs input-sm input input-bordered" />
                </label>
+                <label class="w-full max-w-xs mb-10 form-control">
+                    <div class="label">
+                        <span class="label-text">已抽取</span>
+                    </div>
+                    <input type="checkbox" :checked="item.isUsed"  @change="item.isUsed?(()=>{item.isUsed=false;item.isUsedCount=0})():(()=>{item.isUsed=true;item.isUsedCount=item.count})()"
+                        class="mt-2 border-solid checkbox checkbox-secondary border-1" />
+                </label>
                <label class="w-full max-w-xs mb-10 form-control">
                    <div class="label">
                        <span class="label-text">图片</span>
@@ -142,13 +148,13 @@ watch(() => prizeList, () => {
                    <input type="checkbox" :checked="item.isShow" @change="item.isShow = !item.isShow"
                        class="mt-2 border-solid checkbox checkbox-secondary border-1" />
                </label>
-                <label class="w-full max-w-xs mb-10 form-control">
+                <!-- <label class="w-full max-w-xs mb-10 form-control">
                    <div class="label">
                        <span class="label-text">抽取次数</span>
                    </div>
                    <input type="text" v-model="item.frequency" placeholder="抽取次数"
                        class="w-full max-w-xs input-sm input input-bordered" />
-                </label>
+                </label> -->
                <label class="w-full max-w-xs mb-10 form-control">
                    <div class="label">
                        <span class="label-text">操作</span>
--- a/src/views/Home/index.vue
+++ b/src/views/Home/index.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { ref, onMounted,onUnmounted, watch } from 'vue'
+import { ref, onMounted, onUnmounted, } from 'vue'
 import PrizeList from './PrizeList.vue'
 import { useElementStyle, useElementPosition } from '@/hooks/useElement'
 import StarsBackground from '@/components/StarsBackground/index.vue'
 import confetti from 'canvas-confetti'
+import { filterData } from '@/utils'
 import * as THREE from 'three'
 import {
    CSS3DRenderer, CSS3DObject
@@ -12,18 +13,21 @@ import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls
 import TWEEN from 'three/examples/jsm/libs/tween.module.js';
 import useStore from '@/store'
 import { storeToRefs } from 'pinia'
+import { useRouter } from 'vue-router'
 import { useToast } from 'vue-toast-notification';
 import 'vue-toast-notification/dist/theme-sugar.css';

 const toast = useToast();
+const router = useRouter()
 const personConfig = useStore().personConfig
 const globalConfig = useStore().globalConfig
 const prizeConfig = useStore().prizeConfig

-const { getAlreadyPersonList: alreadyPersonList, getNotPersonList: notPersonList } = storeToRefs(personConfig)
+const { getAllPersonList: allPersonList, getNotPersonList: notPersonList } = storeToRefs(personConfig)
 const { getCurrentPrize: currentPrize } = storeToRefs(prizeConfig)
 const { getTopTitle: topTitle, getCardColor: cardColor, getTextColor: textColor, getLuckyColor: luckyColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount } = storeToRefs(globalConfig)
-const tableData = ref(JSON.parse(JSON.stringify(alreadyPersonList.value)).concat(JSON.parse(JSON.stringify(notPersonList.value))))
+const tableData = ref<any[]>([])
+// const tableData = ref<any[]>(JSON.parse(JSON.stringify(alreadyPersonList.value)).concat(JSON.parse(JSON.stringify(notPersonList.value))))

 const currentStatus = ref(0) // 0为初始状态， 1为抽奖准备状态，2为抽奖中状态，3为抽奖结束状态
 const ballRotationY = ref(0)
@@ -47,7 +51,26 @@ const targets = {

 const luckyTargets = ref<any[]>([])
 const luckyCardList = ref<any[]>([])
-const currentPrizeValue=ref(JSON.parse(JSON.stringify(currentPrize.value)))
+// const currentPrizeValue = ref(JSON.parse(JSON.stringify(currentPrize.value)))
+
+// 填充数据，填满七行
+function initTableData() {
+    if (allPersonList.value.length <= 0) {
+        return
+    }
+    const totalCount = rowCount.value * 7
+    tableData.value = JSON.parse(JSON.stringify(allPersonList.value))
+    const tableDataLength = tableData.value.length
+    if (tableDataLength < totalCount) {
+        const repeatCount = Math.ceil(totalCount / tableDataLength)
+        // 复制数据
+        for (let i = 0; i < repeatCount; i++) {
+            tableData.value = tableData.value.concat(JSON.parse(JSON.stringify(tableData.value)))
+        }
+    }
+
+    tableData.value = filterData(tableData.value.slice(0, totalCount), rowCount.value)
+}
 const init = () => {
    const felidView = 40;
    const width = window.innerWidth;
@@ -60,18 +83,6 @@ const init = () => {
    scene.value = new THREE.Scene();
    camera.value = new THREE.PerspectiveCamera(felidView, aspect, nearPlane, farPlane);
    camera.value.position.z = cameraZ.value
-    // 侦听camera position变化
-    // watch(() => camera.value.position.z, (value) => {
-    //     console.log('code line-63 \n\r😍 camara posi:\n\r',value);
-    //     console.log('code line-63 \n\r😍 camara rrrr:\n\r',camera.value.rotation);
-
-    //     cameraZ.value = value
-    // })
-    // watch(() => camera.value.rotation.z, (value) => {
-    //     console.log('code line-68 \n\r😁 camraea rotation:\n\r',value);
-
-    //     // cameraZ.value = value
-    // })
    renderer.value = new CSS3DRenderer()
    renderer.value.setSize(width, height * 0.9)
    renderer.value.domElement.style.position = 'absolute';
@@ -96,22 +107,17 @@ const init = () => {

        const number = document.createElement('div');
        number.className = 'card-id';
-        // number.textContent = (i / 5 + 1).toString();
        number.textContent = tableData.value[i].uid;
-        // number.style.fontSize = `${textSize * 0.5}px`;
        element.appendChild(number);

        const symbol = document.createElement('div');
        symbol.className = 'card-name';
        symbol.textContent = tableData.value[i].name;
-        // symbol.style.textShadow = `0 0 12px ${rgba(cardColor, 0.95)}`
-        // symbol.style.fontSize = `${textSize}px`;
        element.appendChild(symbol);

        const detail = document.createElement('div');
        detail.className = 'card-detail';
-        detail.innerHTML = `${tableData.value[i].department}<br/>${tableData.value[i].other}`;
-        // detail.style.fontSize = `${textSize * 0.5}px`;
+        detail.innerHTML = `${tableData.value[i].department}<br/>${tableData.value[i].identity}`;
        element.appendChild(detail);

        element = useElementStyle(element, cardColor.value, cardSize.value, textSize.value)
@@ -243,7 +249,6 @@ function animation() {
    TWEEN.update();
    controls.value.update();
    // 设置自动旋转
-    // console.log('animation',controls.value.target);
    // 设置相机位置
    requestAnimationFrame(animation);
 }
@@ -324,6 +329,8 @@ const enterLottery = async () => {
    if (!canOperate.value) {
        return
    }
+    // luckyCardList.value = []
+    // prizeConfig.setCurrentPrize(currentPrize.value)
    canOperate.value = false
    transform(targets.sphere, 1000)
    currentStatus.value = 1
@@ -336,6 +343,28 @@ const startLottery = () => {
    if (!canOperate.value) {
        return
    }
+    // 验证是否已抽完全部奖项
+    if (currentPrize.value.isUsed) {
+        toast.open({
+            message: '抽奖抽完了',
+            type: 'warning',
+            position: 'top-right',
+            duration: 10000
+        })
+
+        return
+    }
+    // 验证抽奖人数是否还够
+    if (notPersonList.value.length < currentPrize.value.count) {
+        toast.open({
+            message: '抽奖人数不够',
+            type: 'warning',
+            position: 'top-right',
+            duration: 10000
+        })
+
+        return;
+    }
    currentStatus.value = 2
    rollBall(10, 3000)
 }
@@ -348,13 +377,15 @@ const stopLottery = async () => {
    TWEEN.removeAll();
    rollBall(0, 1)
    currentStatus.value = 0
-    const notPersonListLength = notPersonList.value.length;
+    // 抽奖池是否为全体人员
+    // const personPool=currentPrize.value.isAll?

+    // const notPersonListLength = notPersonList.value.length;
    // 每次最多抽十个
    let luckyCount = 10
    const leftover = currentPrize.value.count - currentPrize.value.isUsedCount
    leftover < luckyCount ? luckyCount = leftover : luckyCount
-    if (notPersonListLength < luckyCount) {
+    if (notPersonList.value.length < leftover) {
        toast.open({
            message: '抽奖人数不够',
            type: 'warning',
@@ -364,20 +395,31 @@ const stopLottery = async () => {

        return;
    }
-
-    
    for (let i = 0; i < luckyCount; i++) {
-        if (notPersonListLength > 0) {
-            const randomIndex = Math.floor(Math.random() * notPersonListLength);
+        if (notPersonList.value.length > 0) {
+            const randomIndex = Math.round(Math.random() * notPersonList.value.length - 1)
            luckyTargets.value.push(notPersonList.value[randomIndex])
-
-            let LuckyCard = objects.value[randomIndex]
+            // console.log(
+            //     'leftover:', leftover, '\n',
+            //     'luckyCount', luckyCount, '\n',
+            //     'currentPrize.value.isUsedCount', currentPrize.value.isUsedCount, '\n',
+            //     'randomIndex', randomIndex, '\n',
+            //     'notPersonList.value.length - 1', notPersonList.value.length - 1, '\n',
+            //     'notPersonList.value[randomIndex]', notPersonList.value[randomIndex], '\n',
+            //     'cadd id:', notPersonList.value[randomIndex].id
+            // )
+            let LuckyCard = objects.value[notPersonList.value[randomIndex].id]
            luckyCardList.value.push(LuckyCard)
+
+            notPersonList.value.splice(randomIndex, 1)
+            // console.log(
+            //     'objects.value[notPersonList.value[randomIndex].id]', LuckyCard
+            // )
        }
    }
    const luckyCardListLength = luckyCardList.value.length;
    const windowSize = { width: window.innerWidth, height: window.innerHeight }
-    luckyCardListLength && luckyCardList.value.forEach((item: any, index: number) => {
+    luckyCardListLength && luckyCardList.value.slice(-luckyCount).forEach((item: any, index: number) => {
        item.element = useElementStyle(item.element, luckyColor.value, { width: cardSize.value.width * 2, height: cardSize.value.height * 2 }, textSize.value * 2, 'lucky')
        item = useElementPosition(item, rowCount.value, { width: cardSize.value.width * 2, height: cardSize.value.height * 2 }, windowSize, index)
        new TWEEN.Tween(item.position)
@@ -385,27 +427,33 @@ const stopLottery = async () => {
                x: item.x,
                y: item.y,
                z: 1000
-            }, 700)
+            }, 1000)
+            .easing(TWEEN.Easing.Exponential.InOut)
            .start()
        new TWEEN.Tween(item.rotation)
            .to({
                x: 0,
                y: 0,
                z: 0
-            }, 600)
+            }, 900)
+            .easing(TWEEN.Easing.Exponential.InOut)
            .start()
            .onComplete(() => {
                confettiFire()
                resetCamera()
            })
    })
-    currentPrizeValue.value.isUsedCount += luckyCount
-    if(currentPrizeValue.value.isUsedCount>=currentPrizeValue.value.count){
-        currentPrizeValue.value.isUsed=true
+    currentPrize.value.isUsedCount += luckyCount
+    if (currentPrize.value.isUsedCount >= currentPrize.value.count) {
+        currentPrize.value.isUsed = true
    }
-    prizeConfig.setCurrentPrize(currentPrizeValue.value)
-    prizeConfig.updatePrizeConfig(currentPrizeValue.value)
+    // luckyCardList.value = []
+
    personConfig.addAlreadyPersonList(luckyTargets.value, currentPrize.value)
+    prizeConfig.updatePrizeConfig(currentPrize.value)
+
+    prizeConfig.setCurrentPrize(currentPrize.value)
+    luckyTargets.value = []
 }
 // 庆祝动画
 const confettiFire = () => {
@@ -463,54 +511,58 @@ const centerFire = (particleRatio: number, opts: any) => {
        particleCount: Math.floor(count * particleRatio)
    });
 }
-// 监听空格键
-const listenSpaceKey=()=>{
-    window.addEventListener('keydown', (e) => {
-        console.log('code line-468 \n\r😒 e:\n\r',e);
-        // 

-        if (e.code !== 'Space') {
-            return
-        }
-        if(currentStatus.value==0){
-            enterLottery()
-        }
-        else if(currentStatus.value==1){
-            startLottery()
-        }
-        else if(currentStatus.value==2){
-            stopLottery()
-        }
-    })
+const setDefaultPersonList = () => {
+    personConfig.setDefaultPersonList()
+    // 刷新页面
+    window.location.reload()
 }
+
 onMounted(() => {
+    initTableData();
    init();
    animation();
    containerRef.value!.style.color = `${textColor}`
-    listenSpaceKey()
 });
 onUnmounted(() => {
-    window.removeEventListener('keydown', listenSpaceKey)
-})
-watch(()=>currentPrizeValue.value.isUsed,(val)=>{
-    if(val){
-        currentPrizeValue.value=JSON.parse(JSON.stringify(currentPrize.value))
-    }
 })
+// watch(() => currentPrize.value.isUsed, (val) => {
+//     if (val) {
+//         currentPrize.value = JSON.parse(JSON.stringify(currentPrize.value))
+//     }
+// })
 </script>

 <template>
-    
-    <h2 class="absolute w-full pt-12 m-0 font-mono tracking-wide text-center leading-12" :style="{fontSize:textSize*1.5+'px',color:textColor}">{{ topTitle }}</h2>
+    <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"
+            :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')">暂无人员信息，前往导入</button>
+            <button v-if="tableData.length <= 0" class="cursor-pointer btn btn-outline btn-secondary btn-lg"
+                @click="setDefaultPersonList">使用默认数据</button>
+        </div>
+    </div>
    <div id="container" ref="containerRef" class="3dContainer">

        <!-- 选中菜单结构 start-->
        <div id="menu">
-            <button class="btn glass" @click="enterLottery" v-if="currentStatus == 0">进入抽奖</button>
+            <button class="btn-end " @click="enterLottery" v-if="currentStatus == 0&&tableData.length > 0">进入抽奖</button>
+            <div class="start">
+            <button class="btn-start" @click="startLottery" v-if="currentStatus == 1"><strong>开始</strong>
+                <div id="container-stars">
+                    <div id="stars"></div>
+                </div>

-            <button class="btn glass" @click="startLottery" v-if="currentStatus == 1">开始</button>
+                <div id="glow">
+                    <div class="circle"></div>
+                    <div class="circle"></div>
+                </div>
+            </button>
+        </div>

-            <button class="btn glass" @click="stopLottery" v-if="currentStatus == 2">结束</button>
+            <button class="btn-end btn glass btn-lg" @click="stopLottery" v-if="currentStatus == 2">抽取幸运儿</button>


            <!--   <button id="table" @click="transform(targets.table, 2000)">TABLE</button> -->
@@ -533,6 +585,271 @@ watch(()=>currentPrizeValue.value.isUsed,(val)=>{
    width: 100%;
    bottom: 50px;
    text-align: center;
+    margin: 0 auto;
    font-size: 32px;
 }
-</style>
+.start{
+    // 居中
+    display: flex;
+    justify-content: center;
+}
+.btn-start {
+    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;
+}
+
+#container-stars {
+  position: absolute;
+  z-index: -1;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  transition: 0.5s;
+  backdrop-filter: blur(1rem);
+  border-radius: 5rem;
+}
+
+strong {
+  z-index: 2;
+  font-family: 'Avalors Personal Use';
+  font-size: 12px;
+  letter-spacing: 5px;
+  color: #FFFFFF;
+  text-shadow: 0 0 4px white;
+}
+
+#glow {
+  position: absolute;
+  display: flex;
+  width: 12rem;
+}
+
+.circle {
+  width: 100%;
+  height: 30px;
+  filter: blur(2rem);
+  animation: pulse_3011 4s infinite;
+  z-index: -1;
+}
+
+.circle:nth-of-type(1) {
+  background: rgba(254, 83, 186, 0.636);
+}
+
+.circle:nth-of-type(2) {
+  background: rgba(142, 81, 234, 0.704);
+}
+
+.btn-start:hover #container-stars {
+  z-index: 1;
+  background-color: #212121;
+}
+
+.btn-start:hover {
+  transform: scale(1.1)
+}
+
+.btn-start:active {
+  border: double 4px #FE53BB;
+  background-origin: border-box;
+  background-clip: content-box, border-box;
+  animation: none;
+}
+
+.btn-start:active .circle {
+  background: #FE53BB;
+}
+
+#stars {
+  position: relative;
+  background: transparent;
+  width: 200rem;
+  height: 200rem;
+}
+
+#stars::after {
+  content: "";
+  position: absolute;
+  top: -10rem;
+  left: -100rem;
+  width: 100%;
+  height: 100%;
+  animation: animStarRotate 90s linear infinite;
+}
+
+#stars::after {
+  background-image: radial-gradient(#ffffff 1px, transparent 1%);
+  background-size: 50px 50px;
+}
+
+#stars::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -50%;
+  width: 170%;
+  height: 500%;
+  animation: animStar 60s linear infinite;
+}
+
+#stars::before {
+  background-image: radial-gradient(#ffffff 1px, transparent 1%);
+  background-size: 50px 50px;
+  opacity: 0.5;
+}
+
+@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);
+  }
+}
+.btn-end {
+    -webkit-animation: pulsate-fwd 0.9s ease-in-out infinite both;
+    animation: pulsate-fwd 0.9s ease-in-out infinite both;
+    cursor: pointer;
+}
+
+.btn-end {
+    --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);
+    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;
+}
+
+.btn-end::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);
+}
+
+.btn-end: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);
+}
+
+.btn-end: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);
+}
+
+// 按钮动画
+@-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);
+    }
+}</style>
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -8,7 +8,7 @@ module.exports = {
    plugins: [require('@tailwindcss/typography'), require('daisyui')],
    daisyui: {
        themes: true, // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"]
-        darkTheme: 'dark', // name of one of the included themes for dark mode
+        darkTheme: '', // name of one of the included themes for dark mode
        base: true, // applies background color and foreground color for root element by default
        styled: true, // include daisyUI colors and design decisions for all components
        utils: true, // adds responsive and modifier utility classes
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -17,6 +17,7 @@ export default defineConfig(({ mode }) => {
    const chunkName = mode == 'prebuild' ? '[name]' : 'chunk';

    return {
+        base:'/log-lottery/',
        plugins: [
            vue(),
            viteCompression({
				`@@ -0,0 +1 @@`
				`<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1704811730115" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4344" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M64 320l448 448 448-448z" p-id="4345"></path></svg>`