feat: new

src/App.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted } from 'vue'
 import useStore from '@/store'
+import PlayMusic from '@/components/PlayMusic/index.vue'
 
 import { themeChange } from 'theme-change'
 
@@ -16,6 +17,7 @@ onMounted(() => {
 
 <template>
   <router-view></router-view>
+  <PlayMusic class="absolute right-0 bottom-1/2"></PlayMusic>
 </template>
 
 <style scoped lang="scss">

src/components.d.ts

@@ -10,6 +10,7 @@ declare module 'vue' {
     DaiysuiTable: typeof import('./components/DaiysuiTable/index.vue')['default']
     HelloWorld: typeof import('./components/HelloWorld.vue')['default']
     ImageSync: typeof import('./components/ImageSync/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']

src/components/PlayMusic/index.vue

@@ -0,0 +1,110 @@
+<script setup lang='ts'>
+import { ref, onMounted, onUnmounted } from 'vue'
+import useStore from '@/store';
+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 settingRef = ref()
+// const audio = ref(new Audio())
+const currentMusic = ref<any>()
+const globalConfig = useStore().globalConfig
+const { getMusicList: localMusicList } = globalConfig;
+const localMusicListValue = ref(localMusicList)
+
+const play = async (item: any, skip = false) => {
+    if (!audio.value.paused && !skip) {
+        audioHook.pause()
+
+        return
+    }
+    let audioUrl = ''
+    if (!item.url) {
+        return
+    }
+    if (item.url == 'Storage') {
+        audioUrl = await audioDbStore.getItem(item.name) as string
+    }
+    else {
+        audioUrl = item.url
+    }
+    audioHook.pause()
+    audioHook.setAudioSrc(audioUrl)
+    audioHook.play()
+}
+
+const nextPlay = () => {
+    // 播放下一首
+    if (localMusicListValue.value.length > 1) {
+        let index = localMusicListValue.value.findIndex((item: any) => item.name == currentMusic.value.name)
+        index++
+        if (index >= localMusicListValue.value.length) {
+            index = 0
+        }
+        currentMusic.value = localMusicListValue.value[index]
+        play(currentMusic.value, true)
+    }
+}
+// 监听播放成后开始下一首
+const onPlayEnd = () => {
+    audio.value.addEventListener('ended', nextPlay)
+}
+
+const enterConfig = () => {
+    router.push('/config')
+}
+const enterHome = () => {
+    router.push('/')
+}
+
+onMounted(() => {
+    currentMusic.value = localMusicListValue.value[0]
+    onPlayEnd()
+})
+onUnmounted(() => {
+    audio.value.removeEventListener('ended', nextPlay)
+})
+
+</script>
+
+<template>
+    <div class="flex flex-col gap-3" ref="settingRef">
+        <div v-if="route.path.includes('/config')" class="tooltip tooltip-left" data-tip="主页">
+            <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="enterHome">
+                <svg-icon name="home"></svg-icon>
+            </div>
+        </div>
+        <div v-else class="tooltip tooltip-left" data-tip="设置/配置">
+            <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="enterConfig">
+                <svg-icon name="setting"></svg-icon>
+            </div>
+        </div>
+
+        <div class="tooltip tooltip-left" :data-tip="currentMusic ? currentMusic.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>
+            </div>
+        </div>
+        <!-- <div class="bg-blue-300 cursor-pointer" @click="nextPlay">下一首</div> -->
+    </div>
+</template>
+
+<style lang='scss' scoped>
+details {
+
+    // display: none;
+    summary {
+        display: none;
+    }
+}
+</style>

src/hooks/useAudio.ts

@@ -0,0 +1,40 @@
+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
+    }
+}

src/hooks/useElement.ts

@@ -0,0 +1,38 @@
+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.border = `1px solid ${rgba(cardColor, 0.25)}`
+    element.style.boxShadow = `0 0 12px ${rgba(cardColor, 0.5)}`
+    element.style.width = `${cardSize.width}px`;
+    element.style.height = `${cardSize.height}px`;
+    // 等比放大
+
+    element.addEventListener('mouseenter', (ev:MouseEvent)=> {
+        // 子元素无效
+        // ev.stopPropagation()
+        // ev.preventDefault()
+        const target = ev.target as HTMLElement
+        target.style.border = `1px solid ${rgba(cardColor, 0.75)}`
+        target.style.boxShadow = `0 0 12px ${rgba(cardColor, 0.75)}`
+    })
+    element.addEventListener('mouseleave', (ev:MouseEvent)=>{
+        // ev.stopPropagation()
+        // ev.preventDefault()
+        const target=ev.target as HTMLElement
+        target.style.border = `1px solid ${rgba(cardColor, 0.25)}`
+        target.style.boxShadow = `0 0 12px ${rgba(cardColor, 0.5)}`
+    })
+    element.children[0].style.fontSize = textSize*0.5+'px'
+    
+    element.children[1].style.fontSize = textSize+'px'
+    element.children[1].style.textShadow = `0 0 12px ${rgba(cardColor, 0.95)}`
+    
+    element.children[2].style.fontSize = textSize*0.5+'px'
+
+    return element
+}
+
+export const useElementPosition=(element:any,count:number,cardSize:{width:number,height:number},containerSize:{width:number,height:number})=>{
+    
+}

src/icons/add.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="1704612628595" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7066" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M874.666667 469.333333H554.666667V149.333333c0-23.466667-19.2-42.666667-42.666667-42.666666s-42.666667 19.2-42.666667 42.666666v320H149.333333c-23.466667 0-42.666667 19.2-42.666666 42.666667s19.2 42.666667 42.666666 42.666667h320v320c0 23.466667 19.2 42.666667 42.666667 42.666666s42.666667-19.2 42.666667-42.666666V554.666667h320c23.466667 0 42.666667-19.2 42.666666-42.666667s-19.2-42.666667-42.666666-42.666667z"  p-id="7067"></path></svg>

src/icons/arrow_left.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="1704595334249" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8025" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M503.466667 490.666667l174.933333 174.933333-59.733333 59.733333L384 490.666667 618.666667 256l59.733333 59.733333-174.933333 174.933334z"  p-id="8026"></path></svg>

src/icons/arrow_right.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="1704595341252" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8164" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M558.933333 490.666667L384 665.6l59.733333 59.733333 234.666667-234.666666L443.733333 256 384 315.733333l174.933333 174.933334z" p-id="8165"></path></svg>

src/icons/home.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="1704601235210" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5201" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M937.067069 482.335377 556.719504 106.839307c-1.89107-2.251274-6.123464-6.173606-11.997242-10.048867-9.889231-6.522554-21.093411-10.486842-33.388435-10.486842-13.137205 0-24.610514 3.984754-34.245965 10.590196-5.826705 3.997034-9.844206 8.076956-12.117992 11.117199L85.643566 482.381425c-14.653745 14.434757-14.653745 37.890982 0 52.358485 14.538111 14.380522 33.883715 8.316409 50.366108-7.919367L161.532977 501.587859l350.847693-339.869664 374.329501 368.073007c20.077268 13.223163 37.773302 17.377786 50.358945 4.946662C951.720813 520.273431 951.720813 496.801856 937.067069 482.335377z"  p-id="5202"></path><path d="M793.007045 462.046285c-17.391089 0-31.567973 13.938454-31.634488 31.236422l0 0.085958 0 0.089028 0 350.143659c0 17.416671-14.371312 31.602765-32.119535 31.602765l-84.129072 0 0-192.166671c0-49.818639-40.803311-90.111321-91.14486-90.111321l-85.268012 0c-50.326199 0-91.143836 40.300868-91.143836 90.111321l0 192.166671L293.437146 875.204116c-17.750269 0-32.119535-14.186094-32.119535-31.602765L261.317611 493.391177c-0.033769-17.355273-14.21884-31.343869-31.611975-31.343869-17.418718 0-31.589462 13.96506-31.658024 31.302937l0 354.429265c0 49.844222 40.808428 90.133833 91.14486 90.133833l141.253094 0 10.389628 0 0-10.391674 0-240.262062c0-17.410532 14.365172-31.580253 32.119535-31.580253l76.801177 0c17.756409 0 32.119535 14.169721 32.119535 31.580253l0 240.262062 0 10.391674 10.391674 0 141.253094 0c50.321082 0 91.14486-40.297798 91.14486-90.133833L824.665069 493.322615C824.527946 475.958132 810.380738 462.046285 793.007045 462.046285z" p-id="5203"></path></svg>

src/icons/iov-next.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="1704601938806" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3773" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M141.26136359 113.13636387a25.56818179 25.56818179 0 0 1 14.4715913 4.49999972l542.94034021 373.03977254a25.56818179 25.56818179 0 0 1 0 42.16193208L155.78409075 906.31249973A25.56818179 25.56818179 0 0 1 115.69318179 885.24431847V138.70454565a25.56818179 25.56818179 0 0 1 25.5681818-25.56818178zM882.73863641 166.82954538a25.56818179 25.56818179 0 0 1 25.5681818 25.56818179v639.20454566a25.56818179 25.56818179 0 0 1-25.56818179 25.56818179h-51.13636359a25.56818179 25.56818179 0 0 1-25.5681818-25.56818179V192.39772717a25.56818179 25.56818179 0 0 1 25.5681818-25.56818179h51.13636359z" p-id="3774"></path></svg>

src/icons/pause.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="1704600290579" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="990" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M349.866667 149.333333h-14.933334c-21.333333 0-36.266667 14.933333-36.266666 34.133334v654.933333c0 19.2 14.933333 34.133333 34.133333 34.133333h14.933333c19.2 0 34.133333-14.933333 34.133334-34.133333V183.466667c2.133333-19.2-12.8-34.133333-32-34.133334z m341.333333 0h-14.933333c-21.333333 0-36.266667 14.933333-36.266667 34.133334v654.933333c0 19.2 14.933333 34.133333 34.133333 34.133333h14.933334c19.2 0 34.133333-14.933333 34.133333-34.133333V183.466667c2.133333-19.2-12.8-34.133333-32-34.133334z"  p-id="991"></path></svg>

src/icons/play.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="1704600287459" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="851" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M780.8 475.733333L285.866667 168.533333c-27.733333-17.066667-64 4.266667-64 36.266667v614.4c0 32 36.266667 53.333333 64 36.266667l492.8-307.2c29.866667-14.933333 29.866667-57.6 2.133333-72.533334z"  p-id="852"></path></svg>

src/icons/setting.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="1704597839077" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4227" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56c10.1-8.6 13.8-22.6 9.3-35.2l-0.9-2.6c-18.1-50.5-44.9-96.9-79.7-137.9l-1.8-2.1c-8.6-10.1-22.5-13.9-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85c-2.4-13.1-12.7-23.3-25.8-25.7l-2.7-0.5c-52.1-9.4-106.9-9.4-159 0l-2.7 0.5c-13.1 2.4-23.4 12.6-25.8 25.7l-15.8 85.4c-35.9 13.6-69.2 32.9-99 57.4l-81.9-29.1c-12.5-4.4-26.5-0.7-35.1 9.5l-1.8 2.1c-34.8 41.1-61.6 87.5-79.7 137.9l-0.9 2.6c-4.5 12.5-0.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5c-10.1 8.6-13.8 22.6-9.3 35.2l0.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1c8.6 10.1 22.5 13.9 35.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4c2.4 13.1 12.7 23.3 25.8 25.7l2.7 0.5c26.1 4.7 52.8 7.1 79.5 7.1 26.7 0 53.5-2.4 79.5-7.1l2.7-0.5c13.1-2.4 23.4-12.6 25.8-25.7l15.7-85c36.2-13.6 69.7-32.9 99.7-57.6l81.3 28.9c12.5 4.4 26.5 0.7 35.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l0.9-2.6c4.5-12.3 0.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9c-11.3 26.1-25.6 50.7-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97c-28.1 3.2-56.8 3.2-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9z" p-id="4228"></path><path d="M512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176z m79.2 255.2C570 602.3 541.9 614 512 614c-29.9 0-58-11.7-79.2-32.8C411.7 560 400 531.9 400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8C612.3 444 624 472.1 624 502c0 29.9-11.7 58-32.8 79.2z" p-id="4229"></path></svg>

src/store/data.ts

@@ -72,6 +72,7 @@ export const defaultPrizeList=<IPrizeConfig[]>[
         },
         desc:'一等奖',
         isShow:true,
+        isUsed:false,
         frequency:1,
     },
     {
@@ -87,6 +88,7 @@ export const defaultPrizeList=<IPrizeConfig[]>[
         },
         desc:'二等奖',
         isShow:true,
+        isUsed:false,
         frequency:1,
     },
     {
@@ -102,6 +104,7 @@ export const defaultPrizeList=<IPrizeConfig[]>[
         },
         desc:'三等奖',
         isShow:true,
+        isUsed:false,
         frequency:1,
     },
     {
@@ -117,6 +120,7 @@ export const defaultPrizeList=<IPrizeConfig[]>[
         },
         desc:'超级大奖',
         isShow:true,
+        isUsed:false,
         frequency:1,
     },
     {
@@ -132,6 +136,7 @@ export const defaultPrizeList=<IPrizeConfig[]>[
         },
         desc:'特别奖',
         isShow:true,
+        isUsed:false,
         frequency:1,
     }
 ]

src/store/globalConfig.ts

@@ -6,6 +6,7 @@ export const useGlobalConfig = defineStore('global', {
         return {
             globalConfig: {
                 rowCount: 12,
+                isSHowPrizeList:true,
                 theme: {
                     name: 'dark',
                     detail: { primary: '#0f5fd3' },
@@ -13,6 +14,7 @@ export const useGlobalConfig = defineStore('global', {
                     cardWidth: 140,
                     cardHeight: 200,
                     textColor: '#ffffff',
+                    luckyCardColor:'#ECB1AC',
                     textSize: 30
                 },
                 musicList: defaultMusicList,
@@ -37,6 +39,10 @@ export const useGlobalConfig = defineStore('global', {
         getCardColor(state) {
             return state.globalConfig.theme.cardColor;
         },
+        // 获取中奖颜色
+        getLuckyColor(state) {
+            return state.globalConfig.theme.luckyCardColor;
+        },
         // 获取文字颜色
         getTextColor(state) {
             return state.globalConfig.theme.textColor;
@@ -59,6 +65,10 @@ export const useGlobalConfig = defineStore('global', {
         // 获取图片列表
         getImageList(state) {
             return state.globalConfig.imageList;
+        },
+        // 获取是否显示奖品列表
+        getIsShowPrizeList(state) {
+            return state.globalConfig.isSHowPrizeList;
         }
 
     },
@@ -77,6 +87,10 @@ export const useGlobalConfig = defineStore('global', {
         setCardColor(cardColor: string) {
             this.globalConfig.theme.cardColor = cardColor;
         },
+        // 设置中奖颜色
+        setLuckyCardColor(luckyCardColor: string) {
+            this.globalConfig.theme.luckyCardColor = luckyCardColor;
+        },
         // 设置文字颜色
         setTextColor(textColor: string) {
             this.globalConfig.theme.textColor = textColor;
@@ -143,14 +157,20 @@ export const useGlobalConfig = defineStore('global', {
         clearImageList() {
             this.globalConfig.imageList = [];
         },
+        // 设置是否显示奖品列表
+        setIsShowPrizeList(isShowPrizeList: boolean) {
+            this.globalConfig.isSHowPrizeList = isShowPrizeList;
+        },
         // 重置所有配置
         reset() {
             this.globalConfig = {
                 rowCount: 12,
+                isSHowPrizeList:true,
                 theme: {
                     name: 'dark',
                     detail: { primary: '#0f5fd3' },
                     cardColor: 'rgba(0, 255, 255)',
+                    luckyCardColor:'#ECB1AC',
                     cardWidth: 200,
                     cardHeight: 140,
                     textColor: '#ffffff',

src/store/personConfig.ts

@@ -52,14 +52,14 @@ export const usePersonConfig = defineStore('person', {
             if (personList.length <= 0) {
                 return
             }
-        personList.forEach((item: IPersonConfig) => {
+            personList.forEach((person: IPersonConfig) => {
-          this.personConfig.alreadyPersonList.push(item);
+                this.personConfig.notPersonList = this.personConfig.notPersonList.filter((item: IPersonConfig) =>
-          this.personConfig.notPersonList = this.personConfig.notPersonList.filter((item: IPersonConfig) => item.id!== item.id);
+                    item.id !== person.id)
+                this.personConfig.alreadyPersonList.push(person);
             });
         },
         // 删除指定人员
         deletePerson(person: IPersonConfig) {
-        console.log('delperson:',person);
             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);

src/store/prizeConfig.ts

@@ -6,6 +6,22 @@ export const usePrizeConfig = defineStore('prize', {
         return {
             prizeConfig: {
                 prizeList: defaultPrizeList,
+                currentPrize: {
+                    id: '001',
+                    name: '一等奖',
+                    sort: 1,
+                    isAll: true,
+                    count: 1,
+                    picture: {
+                        id: '0',
+                        name: '一等奖',
+                        url: 'https://24years.top/resource/image/image1.png'
+                    },
+                    desc: '一等奖',
+                    isShow: true,
+                    isUsed: false,
+                    frequency: 1,
+                } as IPrizeConfig
             }
         };
     },
@@ -24,6 +40,10 @@ export const usePrizeConfig = defineStore('prize', {
                 return state.prizeConfig.prizeList.find(item => item.id === id);
             }
         },
+        // 获取当前奖项
+        getCurrentPrize(state) {
+            return state.prizeConfig.currentPrize;
+        },
 
     },
     actions: {
@@ -48,12 +68,32 @@ export const usePrizeConfig = defineStore('prize', {
         deleteAllPrizeConfig() {
             this.prizeConfig.prizeList = [];
         },
+        // 设置当前奖项
+        setCurrentPrize(prizeConfigItem: IPrizeConfig) {
+            this.prizeConfig.currentPrize = prizeConfigItem;
+        },
         // 重置所有配置
         resetDefault() {
             this.prizeConfig = {
                 prizeList: defaultPrizeList,
-        }
+                currentPrize: {
+                    id: '001',
+                    name: '一等奖',
+                    sort: 1,
+                    isAll: true,
+                    count: 1,
+                    picture: {
+                        id: '0',
+                        name: '一等奖',
+                        url: 'https://24years.top/resource/image/image1.png'
                     },
+                    desc: '一等奖',
+                    isShow: true,
+                    isUsed: false,
+                    frequency: 1,
+                },
+            }
+        }
     },
     persist: {
         enabled: true,

src/style.css

@@ -8,6 +8,7 @@ html {
     padding: 0;
     overflow-y: overlay;
     overflow-y: hidden;
+    overflow-x: hidden;
 }
 
 ul {

src/style/style.scss

@@ -26,3 +26,32 @@
         bottom: 15px;
     }
 }
+
+.lucky-element-card {
+    cursor: default;
+    text-align: center;
+
+    .lucky-card-id {
+        position: absolute;
+        top: 20px;
+        right: 20px;
+    }
+
+    .lucky-card-name {
+        position: absolute;
+        top: 40px;
+        left: 0px;
+        right: 0;
+        font-weight: bold;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .lucky-card-detail {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 15px;
+    }
+}

src/types/prizeConfig.ts

@@ -11,5 +11,6 @@ export interface IPrizeConfig {
     };
     desc:string;
     isShow:boolean;
+    isUsed:boolean,
     frequency:number;
 }

src/utils/file.ts

@@ -28,3 +28,4 @@ export const readMusic = (file: any): Promise<any> => {
         }
     })
 }
+

src/utils/index.ts

@@ -0,0 +1,17 @@
+// 筛选人员数据
+export const filterData = (tableData: any[],localRowCount: number) => {
+    const dataLength = tableData.length
+    let j = 0;
+    for (let i = 0; i < dataLength; i++) {
+        if (i % localRowCount === 0) {
+            j++;
+        }
+        tableData[i].x = i % localRowCount + 1;
+        tableData[i].y = j;
+        tableData[i].id = i;
+        // 是否中奖
+        tableData[i].isWin = false
+    }
+    
+return tableData
+}

src/utils/store.ts

@@ -8,3 +8,4 @@ export const extractFields = (data: any) => {
         return keys.map(key => ({label:key,value:true}));
     }
 };
+

src/views/Config/Global/FaceConfig.vue

@@ -1,7 +1,7 @@
 <script setup lang='ts'>
 import { ref, watch, onMounted } from 'vue'
 import useStore from '@/store'
-
+import { filterData } from '@/utils'
 import { storeToRefs } from 'pinia'
 import { themeChange } from 'theme-change';
 import zod from 'zod';
@@ -10,25 +10,28 @@ import { ColorPicker } from 'vue3-colorpicker';
 import 'vue3-colorpicker/style.css';
 import { isRgbOrRgba, isHex } from '@/utils/color'
 
-const personConfig = useStore().personConfig
 const globalConfig = useStore().globalConfig
-const { getTheme: localTheme, getCardColor: cardColor,getTextColor:textColor,getCardSize:cardSize,getTextSize: textSize} = storeToRefs(globalConfig)
+const personConfig = useStore().personConfig
-const { getTableRowCount: tableRowCount, getShowField } = storeToRefs(personConfig)
+const { getTheme: localTheme, getCardColor: cardColor,getLuckyColor:luckyCardColor, getTextColor: textColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount,getIsShowPrizeList:isShowPrizeList } = storeToRefs(globalConfig)
+const { getAlreadyPersonList: alreadyPersonList, getNotPersonList: notPersonList } = storeToRefs(personConfig)
 const colorPickerRef = ref()
 
 interface ThemeDaType {
     [key: string]: any
 }
+const isRowCountChange = ref(0) //0未改变，1改变,2加载中
 const themeValue = ref(localTheme.value.name)
 const cardColorValue = ref(structuredClone(cardColor.value))
+const luckyCardColorValue = ref(structuredClone(luckyCardColor.value))
 const textColorValue = ref(structuredClone(textColor.value))
 const cardSizeValue = ref(structuredClone(cardSize.value))
 const textSizeValue = ref(structuredClone(textSize.value))
+const rowCountValue = ref(structuredClone(rowCount.value))
+const isShowPrizeListValue = ref(structuredClone(isShowPrizeList.value))
 const themeList = ref(Object.keys(daisyuiThemes))
 const daisyuiThemeList = ref<ThemeDaType>(daisyuiThemes)
 const formData = ref({
-    rowCount: tableRowCount,
+    rowCount: rowCountValue,
-    showField: getShowField
 })
 const formErr = ref({
     rowCount: '',
@@ -53,7 +56,26 @@ const parseSchema = (props: ValidatePayload) => {
     return schema.parseAsync(props)
 }
 
+const resetPersonLayout = () => {
+    isRowCountChange.value = 2
+    setTimeout(() => {
+        const alreadyLen = alreadyPersonList.value.length
+        const notLen = notPersonList.value.length
+        if (alreadyLen <= 0 && notLen <= 0) {
+            return
+        }
+        const allPersonList = alreadyPersonList.value.concat(notPersonList.value)
+        const newList = filterData(allPersonList, rowCountValue.value)
 
+        const newAlreadyPersonList = newList.slice(0, alreadyLen)
+        const newNotPersonList = newList.slice(alreadyLen, notLen + alreadyLen)
+        personConfig.deleteAllPerson()
+        personConfig.addNotPersonList(newNotPersonList)
+        personConfig.addAlreadyPersonList(newAlreadyPersonList)
+        
+    isRowCountChange.value = 0
+    }, 1000)
+}
 // const handleChangeShowFields = (fieldItem: any) => {
 //     formData.value.showField.map((item) => {
 //         if (item.label === fieldItem.label) {
@@ -66,16 +88,15 @@ watch(() => formData.value.rowCount, () => {
     payload.rowCount = formData.value.rowCount
     parseSchema(payload).then(res => {
         if (res.rowCount) {
-            personConfig.setTableRowCount(res.rowCount)
+            isRowCountChange.value = 1
+            globalConfig.setRowCount(res.rowCount)
         }
     })
         .catch(err => {
             formErr.value.rowCount = err.issues[0].message
         })
 })
-watch(() => formData.value.showField, () => {
+
-    personConfig.setShowFields(formData.value.showField)
-}, { deep: true })
 
 watch(themeValue, (val: any) => {
     const selectedThemeDetail = daisyuiThemeList.value[val]
@@ -89,6 +110,9 @@ watch(themeValue, (val: any) => {
 watch(cardColorValue, (val: string) => {
     globalConfig.setCardColor(val)
 }, { deep: true })
+watch(luckyCardColorValue, (val: string) => {
+    globalConfig.setLuckyCardColor(val)
+}, { deep: true })
 
 watch(textColorValue, (val: string) => {
     globalConfig.setTextColor(val)
@@ -96,14 +120,18 @@ watch(textColorValue, (val: string) => {
 
 watch(cardSizeValue, (val: { width: number; height: number; }) => {
     globalConfig.setCardSize(val)
-}, { deep: true })
+}, { deep: true }),
+watch(isShowPrizeListValue,()=>{
+    globalConfig.setIsShowPrizeList(isShowPrizeListValue.value)
+})
 onMounted(() => {
 })
 </script>
 
 <template>
     <div>
-        <label class="w-full max-w-xs mb-10 form-control">
+        <label class="flex flex-row items-center w-full gap-24 mb-10 form-control">
+            <div class="">
                 <div class="label">
                     <span class="label-text">列数</span>
                 </div>
@@ -114,6 +142,15 @@ onMounted(() => {
                         {{ formErr.rowCount }}
                     </span>
                 </div>
+            </div>
+            <div>
+                <div class="tooltip" data-tip="该项比较耗费时间和性能">
+                    <button class="mt-5 btn btn-info btn-sm" :disabled="isRowCountChange != 1" @click="resetPersonLayout">
+                        <span>重设布局</span>
+                        <span class="loading loading-ring loading-md" v-show="isRowCountChange == 2"></span>
+                    </button>
+                </div>
+            </div>
         </label>
         <label class="w-full max-w-xs form-control">
             <div class="label">
@@ -130,6 +167,12 @@ onMounted(() => {
             </div>
             <ColorPicker ref="colorPickerRef" v-model="cardColorValue" v-model:pure-color="cardColorValue"></ColorPicker>
         </label>
+        <label class="w-full max-w-xs form-control">
+            <div class="label">
+                <span class="label-text">中奖卡片颜色</span>
+            </div>
+            <ColorPicker ref="colorPickerRef" v-model="luckyCardColorValue" v-model:pure-color="luckyCardColorValue"></ColorPicker>
+        </label>
 
         <label class="w-full max-w-xs form-control">
             <div class="label">
@@ -170,6 +213,14 @@ onMounted(() => {
             <input type="number" v-model="textSizeValue" placeholder="Type here"
                 class="w-full max-w-xs 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="isShowPrizeListValue" @change="isShowPrizeListValue=!isShowPrizeListValue"
+                        class="mt-2 border-solid checkbox checkbox-secondary border-1" />
+        </label>
+
     </div>
 </template>
 

src/views/Config/Person/PersonAll.vue

@@ -5,11 +5,13 @@ import useStore from '@/store'
 import {storeToRefs } from 'pinia'
 import * as XLSX from 'xlsx'
 import { readFile } from '@/utils/file'
+import {filterData} from '@/utils'
 import DaiysuiTable from '@/components/DaiysuiTable/index.vue'
 
 const personConfig = useStore().personConfig
-
+const globalConfig = useStore().globalConfig
-const { getAllPersonList:allPersonList,getTableRowCount:rowCount} = storeToRefs(personConfig)
+const { getAllPersonList:allPersonList} = storeToRefs(personConfig)
+const {getRowCount:rowCount}=storeToRefs(globalConfig)
 const limitType = '.xlsx,.xls'
 const excelData = ref<any[]>([])
 // const personList = ref<any[]>([])
@@ -26,22 +28,6 @@ const handleFileChange = async (e: any) => {
     personConfig.addNotPersonList(uploadData)
 }
 
-const filterData = (tableData: any[],localRowCount: number) => {
-    const dataLength = tableData.length
-    let j = 0;
-    for (let i = 0; i < dataLength; i++) {
-        if (i % localRowCount === 0) {
-            j++;
-        }
-        tableData[i].x = i % localRowCount + 1;
-        tableData[i].y = j;
-        tableData[i].id = i;
-        // 是否中奖
-        tableData[i].isWin = false
-    }
-    
-return tableData
-}
 const deleteAll = () => {
     personConfig.deleteAllPerson()
 }

src/views/Config/Prize/PrizeConfig.vue

@@ -28,6 +28,7 @@ const addPrize = () => {
             url:''
         },
         desc: '',
+        isUsed: false,
         isShow: true,
         frequency: 1,
     }

src/views/Home/LuckyThree.vue

@@ -0,0 +1,225 @@
+<script setup lang="ts">
+import { ref, onMounted,computed,watch,toRef } from 'vue'
+// import { tableData2 as tableData } from './data'
+import { rgba } from '@/utils/color'
+
+import {filterData} from '@/utils'
+import * as THREE from 'three'
+import {
+    CSS3DRenderer, CSS3DObject
+} from 'three/examples/jsm/renderers/CSS3DRenderer.js';
+import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls.js';
+import TWEEN from 'three/examples/jsm/libs/tween.module.js';
+import useStore from '@/store'
+
+const props=defineProps({
+    luckyPersonList:{
+        type:Array as ()=>Array<any>,
+        default:()=>{[]}
+    }
+})
+
+// const emits=defineEmits()=
+
+const globalConfig = useStore().globalConfig
+
+const { getLuckyColor: luckyCardColor, getTextColor: textColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount } = globalConfig
+const tableData = computed(()=>{
+    console.log('pppppprops:',props.luckyPersonList)
+    const cloneData=toRef(props.luckyPersonList)
+    
+    console.log(props.luckyPersonList,cloneData.value)
+    const luckyList=filterData(cloneData.value,Math.floor(rowCount/2))
+    console.log('lucskskskskksks:',luckyList)
+    
+return luckyList
+})
+
+
+const luckyContainerRef = ref<HTMLElement>()
+
+const scene = ref()
+const camera = ref()
+const renderer = ref()
+const controls = ref()
+const objects = ref<any[]>([])
+
+const targets = {
+    table: <any[]>[],
+};
+
+
+const init = () => {
+    const felidView = 40;
+    const width = window.innerWidth;
+    const height = window.innerHeight;
+    const aspect = width / height;
+    const nearPlane = 1;
+    const farPlane = 10000;
+    const WebGLoutput = luckyContainerRef.value
+
+    scene.value = new THREE.Scene();
+    camera.value = new THREE.PerspectiveCamera(felidView, aspect, nearPlane, farPlane);
+    camera.value.position.z = 3000;
+
+    renderer.value = new CSS3DRenderer()
+    renderer.value.setSize(width, height)
+    renderer.value.domElement.style.position = 'absolute';
+    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++) {
+        const element = document.createElement('div');
+        element.className = 'lucky-element-card';
+        // element.style.backgroundColor = `rgba( 0, 127, 127, ${Math.random() * 0.5 + 0.25} )`;
+        element.style.backgroundColor = rgba(luckyCardColor, Math.random() * 0.5 + 0.25)
+        element.style.border = `1px solid ${rgba(luckyCardColor, 0.25)}`
+        element.style.boxShadow = `0 0 12px ${rgba(luckyCardColor, 0.5)}`
+        // hover style
+        element.addEventListener('mouseover', function () {
+            this.style.border = `1px solid ${rgba(luckyCardColor, 0.75)}`
+            this.style.boxShadow = `0 0 12px ${rgba(luckyCardColor, 0.75)}`
+        })
+        element.addEventListener('mouseout', function () {
+            this.style.border = `1px solid ${rgba(luckyCardColor, 0.25)}`
+            this.style.boxShadow = `0 0 12px ${rgba(luckyCardColor, 0.5)}`
+        })
+        element.style.width = `${cardSize.width*2}px`;
+        element.style.height = `${cardSize.height*2}px`;
+
+        // element.style.color=localTheme.detail.primary
+
+        const number = document.createElement('div');
+        number.className = 'lucky-card-id';
+        // number.textContent = (i / 5 + 1).toString();
+        number.textContent = tableData.value[i].uid;
+        number.style.fontSize = `${textSize}px`;
+        element.appendChild(number);
+
+        const symbol = document.createElement('div');
+        symbol.className = 'lucky-card-name';
+        symbol.textContent = tableData.value[i].name;
+        symbol.style.textShadow = `0 0 12px ${rgba(luckyCardColor, 0.95)}`
+        symbol.style.fontSize = `${textSize*2}px`;
+        element.appendChild(symbol);
+
+        const detail = document.createElement('div');
+        detail.className = 'lucky-card-detail';
+        detail.innerHTML = `${tableData.value[i].department}<br/>${tableData.value[i].other}`;
+        detail.style.fontSize = `${textSize}px`;
+        element.appendChild(detail);
+
+        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);
+    }
+
+    createTableVertices();
+
+    function createTableVertices() {
+        const tableLen = tableData.value.length;
+
+        for (let i = 0; i < tableLen; i++) {
+            const object = new THREE.Object3D();
+
+            object.position.x = tableData.value[i].x * (cardSize.width*2 + 40) - rowCount * 90;
+            object.position.y = -tableData.value[i].y * (cardSize.height*2 + 20) + 1000;
+            object.position.z = 0;
+
+            targets.table.push(object);
+        }
+    }
+
+    window.addEventListener('resize', onWindowResize, false);
+    transform(targets.table, 2000)
+    render();
+}
+
+const transform = (targets: any[], duration: number) => {
+    TWEEN.removeAll();
+    const objLength = objects.value.length;
+    for (let i = 0; i < objLength; ++i) {
+        let object = objects.value[i];
+        let target = targets[i];
+        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();
+    }
+
+    // 这个补间用来在位置与旋转补间同步执行，通过onUpdate在每次更新数据后渲染scene和camera
+    new TWEEN.Tween({})
+        .to({}, duration * 2)
+        .onUpdate(render)
+        .start();
+    // 整体自动旋转
+}
+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();
+    controls.value.update();
+    // 设置自动旋转
+    // console.log('animation',controls.value.target);
+    // 设置相机位置
+    requestAnimationFrame(animation);
+}
+
+
+function render() {
+    renderer.value.render(scene.value, camera.value);
+}
+
+const submit=()=>{
+    tableData.value.length=0;
+}
+onMounted(() => {
+});
+
+watch(()=>props.luckyPersonList,()=>{
+    luckyContainerRef.value!.style.zIndex='100'
+    init();
+    animation();
+    luckyContainerRef.value!.style.color = `${textColor}`
+
+    console.log('tableData',tableData.value)
+},{deep:true})
+
+</script>
+
+<template>
+<div class="absolute top-0 w-full h-full bg-gray-400/10 -z-50" ref="luckyContainerRef">
+    <button class="btn glass" @click="submit">确定</button>
+</div>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/Home/PlayMusic.vue

@@ -1,75 +0,0 @@
-<script setup lang='ts'>
-import { ref, onMounted, onUnmounted } from 'vue'
-import useStore from '@/store';
-import localforage from 'localforage'
-
-const audioDbStore = localforage.createInstance({
-    name: 'audioStore'
-})
-
-const audio = ref(new Audio())
-const currentMusic = ref<any>()
-const globalConfig = useStore().globalConfig
-const { getMusicList: localMusicList } = globalConfig;
-const localMusicListValue = ref(localMusicList)
-
-const play = async (item: any,skip=false) => {
-    if (!audio.value.paused&&!skip) {
-        audio.value.pause()
-
-        return
-    }
-    let audioUrl = ''
-    if (!item.url) {
-        return
-    }
-    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 nextPlay = () => {
-    // 播放下一首
-    if (localMusicListValue.value.length > 1) {
-        let index = localMusicListValue.value.findIndex((item: any) => item.name == currentMusic.value.name)
-        index++
-        if (index >= localMusicListValue.value.length) {
-            index = 0
-        }
-        currentMusic.value = localMusicListValue.value[index]
-        play(currentMusic.value,true)
-    }
-}
-// 监听播放成后开始下一首
-const onPlayEnd = () => {
-    audio.value.addEventListener('ended', nextPlay)
-}
-
-onMounted(() => {
-    currentMusic.value = localMusicListValue.value[0]
-    onPlayEnd()
-})
-onUnmounted(() => {
-    audio.value.removeEventListener('ended', nextPlay)
-})
-
-</script>
-
-<template>
-    <div class="flex gap-3">
-        <div class="bg-red-300 cursor-pointer" @click="play(currentMusic)">
-            播放/暂停
-        </div>
-        <div class="bg-blue-300 cursor-pointer" @click="nextPlay">下一首</div>
-    </div>
-</template>
-
-<style lang='scss' scoped></style>

src/views/Home/PrizeList.vue

@@ -1,11 +1,23 @@
 <script setup lang='ts'>
-import {ref} from 'vue'
+import { ref, onMounted } from 'vue'
 import { storeToRefs } from 'pinia'
 import useStore from '@/store'
 
 const prizeConfig = useStore().prizeConfig
-const {getPrizeConfig:localPrizeList}=storeToRefs(prizeConfig)
+const globalConfig = useStore().globalConfig
+const { getPrizeConfig: localPrizeList, getCurrentPrize: currentPrize } = storeToRefs(prizeConfig)
+const {getIsShowPrizeList:isShowPrizeList}= storeToRefs(globalConfig)
+const prizeListRef = ref()
+const prizeListContainerRef = ref()
+// 获取prizeListRef高度
+const getPrizeListHeight = () => {
+    let height=200;
+    if(prizeListRef.value){
+     height = (prizeListRef.value as HTMLElement).offsetHeight}
 
+    return height
+}
+const prizeShow = ref(structuredClone(isShowPrizeList.value))
 
 const delAll = () => {
     prizeConfig.deleteAllPrizeConfig()
@@ -18,20 +30,204 @@ const resetDefault = () => {
 const print = () => {
     console.log(prizeConfig)
 }
+const addTemporaryPrize = () => {
+    console.log('addTemporaryPrize')
+}
+onMounted(() => {
+    prizeListContainerRef.value.style.height = getPrizeListHeight() + 'px'
+})
 </script>
 
 <template>
-<div>
+    <div class="flex items-center">
+        <div ref="prizeListContainerRef">
+            <transition name="prize-list" :appear="true">
+                <div v-if="prizeShow" class="flex items-center">
+                    <ul class="flex flex-col gap-1 p-2 rounded-xl bg-slate-500/50" ref="prizeListRef">
 
-    <button class="btn btn-secondary" @click="delAll">全部删除</button>
+                        <li v-for="item in localPrizeList" :key="item.id"
+                            :class="currentPrize.id == item.id ? 'current-prize' : ''">
+                            <div
+                                class="relative flex flex-row items-center justify-between w-64 h-20 shadow-xl card bg-base-100">
+                                <div v-if="item.isUsed" class="absolute w-full h-full bg-gray-800/90 item-mask z-200 rounded-xl"></div>
+                                <figure class="w-10 h-10 rounded-xl">
+                                    <img :src="item.picture.url" alt="Shoes" class="object-cover h-full rounded-xl" />
+                                </figure>
+                                <div class="items-center text-center card-body">
+                                    <h2 class="card-title">{{ item.name }}</h2>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                    <div class="flex flex-col gap-3">
+                        <div class="tooltip" data-tip="抽奖">
+                            <div class="flex items-center w-6 h-8 rounded-r-lg cursor-pointer prize-option bg-slate-500/50"
+                                @click="prizeShow = !prizeShow">
+                                <svg-icon name="arrow_left" class="w-full h-full"></svg-icon>
+                            </div>
+                        </div>
+                        <div class="tooltip" data-tip="添加抽奖">
+                            <div class="flex items-center w-6 h-8 rounded-r-lg cursor-pointer prize-option bg-slate-500/50"
+                                @click="addTemporaryPrize">
+                                <svg-icon name="add" class="w-full h-full"></svg-icon>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </transition>
+        </div>
 
-    <button class="btn btn-secondary" @click="resetDefault">默认</button>
+        <transition name="prize-operate" :appear="true">
-
+            <div class="tooltip" data-tip="抽奖" v-show="!prizeShow">
-    
+                <div class="flex items-center w-6 h-8 rounded-r-lg cursor-pointer prize-option bg-slate-500/50"
-    <button class="btn btn-secondary" @click="print">打印</button>
+                    @click="prizeShow = !prizeShow">
+                    <svg-icon name="arrow_right" class="w-full h-full"></svg-icon>
+                </div>
+            </div>
+        </transition>
     </div>
 </template>
 
 <style lang='scss' scoped>
+.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;
+}
 
-</style>
+.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;
+}
+
+// .prize-operate-leave-active {
+//     -webkit-animation-delay: 0.5s;
+//     -webkit-animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+//     animation-delay: 0.5s;
+//     animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+// }
+.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/index.vue

@@ -2,9 +2,11 @@
 import { ref, onMounted } from 'vue'
 // import { tableData2 as tableData } from './data'
 import { rgba } from '@/utils/color'
-import PlayMusic from './PlayMusic.vue'
+// import PlayMusic from './PlayMusic.vue'
 import PrizeList from './PrizeList.vue'
+import { useElementStyle } from '@/hooks/useElement'
 import StarsBackground from '@/components/StarsBackground/index.vue'
+import LuckyView from './LuckyThree.vue'
 import * as THREE from 'three'
 import {
     CSS3DRenderer, CSS3DObject
@@ -13,17 +15,22 @@ import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls
 import TWEEN from 'three/examples/jsm/libs/tween.module.js';
 import useStore from '@/store'
 
+
 const personConfig = useStore().personConfig
 const globalConfig = useStore().globalConfig
-// const globalConfig = useStore().globalConfig
+const prizeConfig = useStore().prizeConfig
 
-const { getAlreadyPersonList: alreadyPersonList, getNotPersonList: notPersonList, getTableRowCount: rowCount } = personConfig
+const { getAlreadyPersonList: alreadyPersonList, getNotPersonList: notPersonList } = personConfig
-const { getCardColor: cardColor, getTextColor: textColor, getCardSize: cardSize, getTextSize: textSize } = globalConfig
+const { getCurrentPrize: currentPrize } = prizeConfig
+const { getCardColor: cardColor, getTextColor: textColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount } = globalConfig
 const tableData = ref(
     alreadyPersonList.concat(notPersonList)
 )
 
+const currentStatus = ref(0) // 0为初始状态， 1为抽奖准备状态，2为抽奖中状态，3为抽奖结束状态
+const ballRotationY = ref(0)
 const containerRef = ref<HTMLElement>()
+// const LuckyViewRef= ref()
 
 const scene = ref()
 const camera = ref()
@@ -38,6 +45,8 @@ const targets = {
     sphere: <any[]>[]
 };
 
+const luckyTargets = ref<any[]>([])
+const luckyCardList = ref<any[]>([])
 const init = () => {
     const felidView = 40;
     const width = window.innerWidth;
@@ -65,23 +74,25 @@ const init = () => {
 
     const tableLen = tableData.value.length
     for (let i = 0; i < tableLen; i++) {
-        const element = document.createElement('div');
+        let element = document.createElement('div');
         element.className = 'element-card';
         // element.style.backgroundColor = `rgba( 0, 127, 127, ${Math.random() * 0.5 + 0.25} )`;
-        element.style.backgroundColor = rgba(cardColor, Math.random() * 0.5 + 0.25)
+        // element.style.backgroundColor = rgba(cardColor, Math.random() * 0.5 + 0.25)
-        element.style.border = `1px solid ${rgba(cardColor, 0.25)}`
+        // element.style.border = `1px solid ${rgba(cardColor, 0.25)}`
-        element.style.boxShadow = `0 0 12px ${rgba(cardColor, 0.5)}`
+        // element.style.boxShadow = `0 0 12px ${rgba(cardColor, 0.5)}`
+        // element.style.width = `${cardSize.width}px`;
+        // element.style.height = `${cardSize.height}px`;
+        // element.addEventListener('mouseover', function () {
+        //     console.log(this)
+        //     this.style.border = `1px solid ${rgba(cardColor, 0.75)}`
+        //     this.style.boxShadow = `0 0 12px ${rgba(cardColor, 0.75)}`
+        // })
+        // element.addEventListener('mouseout', function () {
+        //     this.style.border = `1px solid ${rgba(cardColor, 0.25)}`
+        //     this.style.boxShadow = `0 0 12px ${rgba(cardColor, 0.5)}`
+        // })
         // hover style
-        element.addEventListener('mouseover', function () {
+
-            this.style.border = `1px solid ${rgba(cardColor, 0.75)}`
-            this.style.boxShadow = `0 0 12px ${rgba(cardColor, 0.75)}`
-        })
-        element.addEventListener('mouseout', function () {
-            this.style.border = `1px solid ${rgba(cardColor, 0.25)}`
-            this.style.boxShadow = `0 0 12px ${rgba(cardColor, 0.5)}`
-        })
-        element.style.width = `${cardSize.width}px`;
-        element.style.height = `${cardSize.height}px`;
 
         // element.style.color=localTheme.detail.primary
 
@@ -89,22 +100,23 @@ const init = () => {
         number.className = 'card-id';
         // number.textContent = (i / 5 + 1).toString();
         number.textContent = tableData.value[i].uid;
-        number.style.fontSize = `${textSize * 0.5}px`;
+        // 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.textShadow = `0 0 12px ${rgba(cardColor, 0.95)}`
-        symbol.style.fontSize = `${textSize}px`;
+        // 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.style.fontSize = `${textSize * 0.5}px`;
         element.appendChild(detail);
 
+        element = useElementStyle(element, cardColor, cardSize, textSize)
         const object = new CSS3DObject(element);
         object.position.x = Math.random() * 4000 - 2000;
         object.position.y = Math.random() * 4000 - 2000;
@@ -178,7 +190,7 @@ const init = () => {
         }
     }
     window.addEventListener('resize', onWindowResize, false);
-    transform(targets.table, 2000)
+    transform(targets.table, 1000)
     render();
 }
 
@@ -198,7 +210,15 @@ const transform = (targets: any[], duration: number) => {
         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();
+            .start()
+            .onComplete(() => {
+                if (luckyCardList.value.length) {
+                    luckyCardList.value.forEach((item: any) => {
+                        return useElementStyle(item.element, cardColor, { width: cardSize.width, height: cardSize.height }, textSize)
+                    })
+                }
+                luckyCardList.value = [];
+            });
     }
 
     // 这个补间用来在位置与旋转补间同步执行，通过onUpdate在每次更新数据后渲染scene和camera
@@ -229,24 +249,95 @@ function animation() {
 }
 
 // // 自动旋转的动画
-function autoRotate() {
+function rollBall(rotateY: number, duration: number, mod: 'default' | 'restore' = 'default') {
+    TWEEN.removeAll();
+
+    return new Promise((resolve, reject) => {
+        scene.value.rotation.y = 0;
+        ballRotationY.value = Math.PI * rotateY * 1000
         const rotateObj = new TWEEN.Tween(scene.value.rotation);
         rotateObj
             .to(
                 {
-          y: Math.PI * Math.random() * 1000,
+                    // x: Math.PI * rotateX * 1000,
-          x:Math.PI*Math.random()*1000,
+                    x: 0,
+                    y: ballRotationY.value,
+                    // z: Math.PI * rotateZ * 1000
+                    z: 0
                 },
-        3000 * 1000
+                duration * 1000
             )
             .onUpdate(render)
-     .start();
+            .start()
+            .onStop(() => {
+                scene.value.rotation.y = 0;
+                resolve('')
+            })
+            .onComplete(() => {
+                resolve('')
+            })
+    })
 }
 
 
 function render() {
     renderer.value.render(scene.value, camera.value);
 }
+const enterLottery = async () => {
+    transform(targets.sphere, 1000)
+    currentStatus.value = 1
+    // setTimeout(() => {
+    //     rollBall(0.1,3000)
+    // }, 3000)
+}
+// 开始抽奖
+const startLottery = () => {
+    currentStatus.value = 2
+    rollBall(10, 3000)
+}
+
+const stopLottery = async () => {
+    TWEEN.removeAll();
+    rollBall(0, 1)
+    // scene正面
+    currentStatus.value = 0
+    // 从notPersonList随机抽取currentPrize.count个
+    const notPersonListLength = notPersonList.length;
+    for (let i = 0; i < currentPrize.count; i++) {
+        if (notPersonListLength > 0) {
+            const randomIndex = Math.floor(Math.random() * notPersonListLength);
+            luckyTargets.value.push(notPersonList[randomIndex])
+
+            let LuckyCard = objects.value[randomIndex]
+            console.log(LuckyCard)
+            LuckyCard.element = useElementStyle(LuckyCard.element, '#ffd700', { width: cardSize.width * 2, height: cardSize.height * 2 }, textSize * 2, 'lucky')
+            // 重新设置位置
+            LuckyCard.position.x = 100
+            LuckyCard.position.y = 300
+            LuckyCard.position.z = 0
+            // LuckyCard.rotation.x = 0
+            // LuckyCard.rotation.y = 0
+            // LuckyCard.rotation.z = 0
+            new TWEEN.Tween(LuckyCard.position)
+                .to({
+                    x: LuckyCard.x,
+                    y: LuckyCard.y,
+                    z: 1200
+                }, 1000)
+                .start()
+            new TWEEN.Tween(LuckyCard.rotation)
+                .to({
+                    x: 0,
+                    y: 0,
+                    z: 0
+                }, 1000)
+                .start()
+            luckyCardList.value.push(LuckyCard)
+        }
+    }
+
+    personConfig.addAlreadyPersonList(luckyTargets.value)
+}
 
 onMounted(() => {
     init();
@@ -260,18 +351,22 @@ onMounted(() => {
     <div id="container" ref="containerRef">
         <!-- 选中菜单结构 start-->
         <div id="menu">
+            <button class="btn glass" @click="enterLottery" v-if="currentStatus == 0">进入抽奖</button>
+
+            <button class="btn glass" @click="startLottery" v-if="currentStatus == 1">开始</button>
+
+            <button class="btn glass" @click="stopLottery" v-if="currentStatus == 2">结束</button>
             <button id="table" @click="transform(targets.table, 2000)">TABLE</button>
-            <button id="sphere" @click="transform(targets.sphere, 2000)">SPHERE</button>
             <button id="helix" @click="transform(targets.helix, 2000)">HELIX</button>
 
-            <button  @click="autoRotate">旋转</button>
         </div>
         <!-- end -->
     </div>
-
     <StarsBackground></StarsBackground>
-    <PlayMusic class="absolute bottom-10 right-10"></PlayMusic>
+
-    <PrizeList class="absolute bottom-20 right-10"></PrizeList>
+    <!-- <LuckyView :luckyPersonList="luckyTargets"  ref="LuckyViewRef"></LuckyView> -->
+    <!-- <PlayMusic class="absolute right-0 bottom-1/2"></PlayMusic> -->
+    <PrizeList class="absolute left-0 top-32"></PrizeList>
 </template>
 
 <style scoped lang="scss">
@@ -283,21 +378,4 @@ onMounted(() => {
     text-align: center;
     font-size: 32px;
 }
-
-button {
-    border: none;
-    background-color: transparent;
-    color: rgba(127, 255, 255, 0.75);
-    padding: 12px 24px;
-    cursor: pointer;
-    outline: 1px solid rgba(127, 255, 255, 0.75);
-}
-
-button:hover {
-    background-color: rgba(127, 255, 255, 0.5);
-}
-
-button:active {
-    background-color: rgba(127, 255, 255, 0.75);
-}
 </style>