feat: pattern config

2024-01-11 23:53:53 +08:00
parent 53af03648e
commit 2ba3bb036b
18 changed files with 621 additions and 147 deletions
--- a/src/views/Config/Global/FaceConfig.vue
+++ b/src/views/Config/Global/FaceConfig.vue
@@ -9,10 +9,11 @@ import daisyuiThemes from 'daisyui/src/theming/themes'
 import { ColorPicker } from 'vue3-colorpicker';
 import 'vue3-colorpicker/style.css';
 import { isRgbOrRgba, isHex } from '@/utils/color'
+import PatternSetting from './components/PatternSetting.vue'

 const globalConfig = useStore().globalConfig
 const personConfig = useStore().personConfig
-const {getTopTitle:topTitle, getTheme: localTheme, getCardColor: cardColor,getLuckyColor:luckyCardColor, getTextColor: textColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount,getIsShowPrizeList:isShowPrizeList } = storeToRefs(globalConfig)
+const { getTopTitle: topTitle, getTheme: localTheme, getPatterColor: patternColor, getPatternList: patternList, 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()

@@ -21,7 +22,7 @@ interface ThemeDaType {
 }
 const isRowCountChange = ref(0) //0未改变，1改变,2加载中
 const themeValue = ref(localTheme.value.name)
-const topTitleValue= ref(structuredClone(topTitle.value))
+const topTitleValue = ref(structuredClone(topTitle.value))
 const cardColorValue = ref(structuredClone(cardColor.value))
 const luckyCardColorValue = ref(structuredClone(luckyCardColor.value))
 const textColorValue = ref(structuredClone(textColor.value))
@@ -29,6 +30,7 @@ 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 patternColorValue = ref(structuredClone(patternColor.value))
 const themeList = ref(Object.keys(daisyuiThemes))
 const daisyuiThemeList = ref<ThemeDaType>(daisyuiThemes)
 const formData = ref({
@@ -72,11 +74,19 @@ const resetPersonLayout = () => {
        const newNotPersonList = newList.slice(alreadyLen, notLen + alreadyLen)
        personConfig.deleteAllPerson()
        personConfig.addNotPersonList(newNotPersonList)
-        personConfig.addAlreadyPersonList(newAlreadyPersonList,null)
-        
-    isRowCountChange.value = 0
+        personConfig.addAlreadyPersonList(newAlreadyPersonList, null)
+
+        isRowCountChange.value = 0
    }, 1000)
 }
+
+const clearPattern = () => {
+    globalConfig.setPatternList([] as number[])
+}
+const resetPattern = () => {
+    globalConfig.resetPatternList()
+}
+
 // const handleChangeShowFields = (fieldItem: any) => {
 //     formData.value.showField.map((item) => {
 //         if (item.label === fieldItem.label) {
@@ -97,18 +107,18 @@ watch(() => formData.value.rowCount, () => {
            formErr.value.rowCount = err.issues[0].message
        })
 })
-watch(topTitleValue,(val)=>{
+watch(topTitleValue, (val) => {
    globalConfig.setTopTitle(val)
 }),

-watch(themeValue, (val: any) => {
-    const selectedThemeDetail = daisyuiThemeList.value[val]
-    globalConfig.setTheme({ name: val, detail: selectedThemeDetail })
-    themeChange(val)
-    if (selectedThemeDetail.primary && (isHex(selectedThemeDetail.primary) || isRgbOrRgba(selectedThemeDetail.primary))) {
-        globalConfig.setCardColor(selectedThemeDetail.primary)
-    }
-}, { deep: true })
+    watch(themeValue, (val: any) => {
+        const selectedThemeDetail = daisyuiThemeList.value[val]
+        globalConfig.setTheme({ name: val, detail: selectedThemeDetail })
+        themeChange(val)
+        if (selectedThemeDetail.primary && (isHex(selectedThemeDetail.primary) || isRgbOrRgba(selectedThemeDetail.primary))) {
+            globalConfig.setCardColor(selectedThemeDetail.primary)
+        }
+    }, { deep: true })

 watch(cardColorValue, (val: string) => {
    globalConfig.setCardColor(val)
@@ -116,7 +126,9 @@ watch(cardColorValue, (val: string) => {
 watch(luckyCardColorValue, (val: string) => {
    globalConfig.setLuckyCardColor(val)
 }, { deep: true })
-
+watch(patternColorValue, (val: string) => {
+    globalConfig.setPatterColor(val)
+})
 watch(textColorValue, (val: string) => {
    globalConfig.setTextColor(val)
 }, { deep: true })
@@ -124,9 +136,9 @@ watch(textColorValue, (val: string) => {
 watch(cardSizeValue, (val: { width: number; height: number; }) => {
    globalConfig.setCardSize(val)
 }, { deep: true }),
-watch(isShowPrizeListValue,()=>{
-    globalConfig.setIsShowPrizeList(isShowPrizeListValue.value)
-})
+    watch(isShowPrizeListValue, () => {
+        globalConfig.setIsShowPrizeList(isShowPrizeListValue.value)
+    })
 onMounted(() => {
 })
 </script>
@@ -183,7 +195,8 @@ onMounted(() => {
            <div class="label">
                <span class="label-text">中奖卡片颜色</span>
            </div>
-            <ColorPicker ref="colorPickerRef" v-model="luckyCardColorValue" v-model:pure-color="luckyCardColorValue"></ColorPicker>
+            <ColorPicker ref="colorPickerRef" v-model="luckyCardColorValue" v-model:pure-color="luckyCardColorValue">
+            </ColorPicker>
        </label>

        <label class="w-full max-w-xs form-control">
@@ -225,12 +238,41 @@ 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 form-control">
+            <div class="label">
+                <span class="label-text">高亮颜色</span>
+            </div>
+            <ColorPicker ref="colorPickerRef" v-model="patternColorValue" v-model:pure-color="patternColorValue">
+            </ColorPicker>
+        </label>
+        <label class="flex flex-row items-center w-full gap-24 mb-0 form-control">
+            <div>
+                <div class="label">
+                    <span class="label-text">图案设置</span>
+                </div>
+                <div class="h-auto">
+                    <PatternSetting :rowCount="rowCount" :cardColor="cardColor" :patternColor="patternColor"
+                        :patternList="patternList"></PatternSetting>
+                </div>
+            </div>
+        </label>
+        <div class="flex w-full h-24 gap-3 m-0">
+            <button class="mt-5 btn btn-info btn-sm" @click.stop="clearPattern">
+                <span>清空图案设置</span>
+            </button>
+            <div class="tooltip" data-tip="默认图案设置针对17列时有效，其他列数请自行设置">
+                <button class="mt-5 btn btn-info btn-sm" @click="resetPattern">
+                    <span>默认图案设置</span>
+                </button>
+            </div>
+        </div>
+
        <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" />
+            <input type="checkbox" :checked="isShowPrizeListValue" @change="isShowPrizeListValue = !isShowPrizeListValue"
+                class="mt-2 border-solid checkbox checkbox-secondary border-1" />
        </label>

    </div>
--- a/src/views/Config/Global/components/PatternSetting.vue
+++ b/src/views/Config/Global/components/PatternSetting.vue
@@ -0,0 +1,57 @@
+<script setup lang='ts'>
+import {computed} from 'vue';
+const props=defineProps({
+    rowCount:{
+        type:Number,
+        default:17
+    },
+    cardColor:{
+        type:String,
+        default:'#fff'
+    },
+    patternColor:{
+        type:String,
+        default:'#000'
+    },
+    patternList:{
+        type:Array,
+        default:()=>[]
+    }
+})
+const data=computed(()=>{
+    return props
+})
+
+const updatePatternList=(event:Event,item:number)=>{
+    if(data.value.patternList.includes(item)){
+        const index=data.value.patternList.indexOf(item)
+        data.value.patternList.splice(index,1)
+    }else{
+        data.value.patternList.push(item)
+    }
+    // emits
+}
+</script>
+
+<template>
+<div class="w-full h-auto" >
+    <ul class="pattern-list" :style="{gridTemplateColumns:'repeat('+data.rowCount+',1fr)'}">
+        <li @click.stop="(event)=>updatePatternList(event,item)" class="w-5 h-5" v-for="item in data.rowCount*7" :key="item" :style="{backgroundColor:data.patternList.includes(item)?data.patternColor:data.cardColor}">
+        </li>
+    </ul>
+</div>
+</template>
+
+<style lang='scss' scoped>
+    .pattern-list{
+        margin: 0;
+        padding: 0;
+        display:grid;
+        grid-template-rows:repeat(7,1fr);
+        grid-gap:1px;
+        border:1px solid #000;
+        li{
+            cursor:pointer;
+        }
+    }
+</style>
--- a/src/views/Config/Prize/PrizeConfig.vue
+++ b/src/views/Config/Prize/PrizeConfig.vue
@@ -20,7 +20,7 @@ const addPrize = () => {
        id: new Date().getTime().toString(),
        name: '奖项',
        sort: 0,
-        isAll: true,
+        isAll: false,
        count: 1,
        isUsedCount:0,
        picture: {
--- a/src/views/Config/index.vue
+++ b/src/views/Config/index.vue
@@ -64,7 +64,7 @@ const skip = (path: string) => {
    </div>
    <footer class="p-10 rounded footer footer-center bg-base-200 text-base-content">
        <nav class="grid grid-flow-col gap-4">
-            <a class="link link-hover">行有不得，反求诸己</a>
+            <a class="link link-hover cursor-pointer text-inherit" target="_blank" href="https://24years.top">行有不得，反求诸己</a>
        </nav>
        <nav>
            <div class="grid grid-flow-col gap-4">
--- a/src/views/Home/PrizeList.vue
+++ b/src/views/Home/PrizeList.vue
@@ -8,8 +8,10 @@ import defaultPrizeImage from '@/assets/images/龙.png'

 const prizeConfig = useStore().prizeConfig
 const globalConfig = useStore().globalConfig
+const system= useStore().system
 const { getPrizeConfig: localPrizeList, getCurrentPrize: currentPrize } = storeToRefs(prizeConfig)
 const {getIsShowPrizeList:isShowPrizeList}= storeToRefs(globalConfig)
+const {getIsMobile:isMobile} = storeToRefs(system)
 const prizeListRef = ref()
 const prizeListContainerRef = ref()
 // 获取prizeListRef高度
@@ -34,7 +36,7 @@ onMounted(() => {
    <div class="flex items-center">
        <div ref="prizeListContainerRef">
            <transition name="prize-list" :appear="true">
-                <div v-if="prizeShow" class="flex items-center">
+                <div v-if="prizeShow&&!isMobile" class="flex items-center">
                    <ul class="flex flex-col gap-1 p-2 rounded-xl bg-slate-500/50" ref="prizeListRef">
                        <li v-for="item in localPrizeList" :key="item.id"
                            :class="currentPrize.id == item.id ? 'current-prize' : ''">
@@ -55,13 +57,13 @@ onMounted(() => {
                        </li>
                    </ul>
                    <div class="flex flex-col gap-3">
-                        <div class="tooltip" data-tip="奖项列表">
+                        <div class="tooltip tooltip-right" 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="tooltip tooltip-right" 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>
@@ -73,7 +75,7 @@ onMounted(() => {
        </div>

        <transition name="prize-operate" :appear="true">
-            <div class="tooltip" data-tip="奖项列表" v-show="!prizeShow">
+            <div class="tooltip tooltip-right" 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"
                    @click="prizeShow = !prizeShow">
                    <svg-icon name="arrow_right" class="w-full h-full"></svg-icon>
--- a/src/views/Home/index.vue
+++ b/src/views/Home/index.vue
@@ -4,13 +4,15 @@ 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 { filterData, selectCard } from '@/utils'
+import {rgba} from '@/utils/color'
+import { IPersonConfig } from '@/types/storeType'
 // import * as THREE from 'three'
-import {Scene,PerspectiveCamera,Object3D,Vector3} from 'three'
+import { Scene, PerspectiveCamera, Object3D, Vector3 } from 'three'
 // import {
 //     CSS3DRenderer, CSS3DObject
 // } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
-import {CSS3DRenderer, CSS3DObject} from 'three-css3d'
+import { CSS3DRenderer, CSS3DObject } from 'three-css3d'
 // import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls.js';
 import TrackballControls from 'three-trackballcontrols';
 // import TWEEN from 'three/examples/jsm/libs/tween.module.js';
@@ -29,7 +31,7 @@ const prizeConfig = useStore().prizeConfig

 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 { getTopTitle: topTitle, getCardColor: cardColor,getPatterColor: patternColor, getPatternList: patternList, getTextColor: textColor, getLuckyColor: luckyColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount } = storeToRefs(globalConfig)
 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为抽奖结束状态
@@ -53,7 +55,10 @@ const targets = {
 };

 const luckyTargets = ref<any[]>([])
-const luckyCardList = ref<any[]>([])
+const luckyCardList = ref<number[]>([])
+let luckyCount = ref(10)
+
+const intervalTimer = ref<any>(null)
 // const currentPrizeValue = ref(JSON.parse(JSON.stringify(currentPrize.value)))

 // 填充数据，填满七行
@@ -123,7 +128,7 @@ const init = () => {
        detail.innerHTML = `${tableData.value[i].department}<br/>${tableData.value[i].identity}`;
        element.appendChild(detail);

-        element = useElementStyle(element, cardColor.value, cardSize.value, textSize.value)
+        element = useElementStyle(element, tableData.value[i],i,patternList.value,patternColor.value, cardColor.value, cardSize.value, textSize.value)
        const object = new CSS3DObject(element);
        object.position.x = Math.random() * 4000 - 2000;
        object.position.y = Math.random() * 4000 - 2000;
@@ -203,38 +208,53 @@ const init = () => {

 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();
+    if(intervalTimer.value){
+        clearInterval(intervalTimer.value);
+        intervalTimer.value=null
+        randomBallData('sphere')
+    }
+    
+return new Promise((resolve) => {
+        const objLength = objects.value.length;
+        for (let i = 0; i < objLength; ++i) {
+            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)
+            new TWEEN.Tween(object.rotation)
+                .to({ x: target.rotation.x, y: target.rotation.y, z: target.rotation.z }, Math.random() * duration + duration)
+                .easing(TWEEN.Easing.Exponential.InOut)
+                .start()
+                .onComplete(() => {
+                    if (luckyCardList.value.length) {
+                        luckyCardList.value.forEach((cardIndex:any)=>{
+                            const item = objects.value[cardIndex]
+                            useElementStyle(item.element, {} as any,i,patternList.value,patternColor.value, cardColor.value, cardSize.value, textSize.value,'sphere')
+                        })
+                    }
+                    luckyTargets.value = [];
+                    luckyCardList.value = [];
+
+                    canOperate.value = true
+                });
+        }
+
+        // 这个补间用来在位置与旋转补间同步执行，通过onUpdate在每次更新数据后渲染scene和camera
+        new TWEEN.Tween({})
+            .to({}, duration * 2)
+            .onUpdate(render)
            .start()
            .onComplete(() => {
-                if (luckyCardList.value.length) {
-                    luckyCardList.value.forEach((item: any) => {
-                        return useElementStyle(item.element, cardColor.value, cardSize.value, textSize.value)
-                    })
-                }
-                luckyCardList.value = [];
-
                canOperate.value = true
+                resolve('')
            });
-    }
+    })

-    // 这个补间用来在位置与旋转补间同步执行，通过onUpdate在每次更新数据后渲染scene和camera
-    new TWEEN.Tween({})
-        .to({}, duration * 2)
-        .onUpdate(render)
-        .start();
    // 整体自动旋转
 }
 function onWindowResize() {
@@ -332,14 +352,18 @@ const enterLottery = async () => {
    if (!canOperate.value) {
        return
    }
-    // luckyCardList.value = []
-    // prizeConfig.setCurrentPrize(currentPrize.value)
+    if (!intervalTimer.value) {
+        randomBallData()
+    }
+if(patternList.value.length){
+    patternList.value.forEach((item:number)=>{
+        objects.value[item-1].element.style.backgroundColor = rgba(cardColor.value, Math.random() * 0.5 + 0.25)
+    })
+}
    canOperate.value = false
-    transform(targets.sphere, 1000)
+    await transform(targets.sphere, 1000)
    currentStatus.value = 1
-    setTimeout(() => {
-        rollBall(0.1, 2000)
-    }, 2000)
+    rollBall(0.1, 2000)
 }
 // 开始抽奖
 const startLottery = () => {
@@ -376,17 +400,16 @@ const stopLottery = async () => {
    if (!canOperate.value) {
        return
    }
+    clearInterval(intervalTimer.value)
+    intervalTimer.value = null
    canOperate.value = false
-    TWEEN.removeAll();
+    // TWEEN.removeAll();
    rollBall(0, 1)
-    currentStatus.value = 0
    // 抽奖池是否为全体人员
    const personPool = currentPrize.value.isAll ? allPersonList.value : notPersonList.value
-    // const notPersonListLength = personPool.length;
    // 每次最多抽十个
-    let luckyCount = 10
    const leftover = currentPrize.value.count - currentPrize.value.isUsedCount
-    leftover < luckyCount ? luckyCount = leftover : luckyCount
+    leftover < luckyCount.value ? luckyCount.value = leftover : luckyCount
    if (personPool.length < leftover) {
        toast.open({
            message: '抽奖人数不够',
@@ -397,22 +420,19 @@ const stopLottery = async () => {

        return;
    }
-    for (let i = 0; i < luckyCount; i++) {
+    for (let i = 0; i < luckyCount.value; i++) {
        if (personPool.length > 0) {
-            const randomIndex = Math.round(Math.random() * (personPool.length-1))
+            const randomIndex = Math.round(Math.random() * (personPool.length - 1))
            luckyTargets.value.push(personPool[randomIndex])
-            console.log(
-                'leftover:', leftover, '\n',
-                'luckyCount', luckyCount, '\n',
-                'currentPrize.value.isUsedCount', currentPrize.value.isUsedCount, '\n',
-                'randomIndex', randomIndex, '\n',
-                'personPool.length - 1', personPool.length - 1, '\n',
-                'personPool[randomIndex]', personPool[randomIndex], '\n',
-            )
-            console.log(
-                'cadd id:', personPool[randomIndex].id)
-            let luckyCard = objects.value[personPool[randomIndex].id]
-            luckyCardList.value.push(luckyCard)
+            // console.log(
+            //     'leftover:', leftover, '\n',
+            //     'luckyCount', luckyCount, '\n',
+            //     'currentPrize.value.isUsedCount', currentPrize.value.isUsedCount, '\n',
+            //     'randomIndex', randomIndex, '\n',
+            //     'personPool.length - 1', personPool.length - 1, '\n',
+            //     'personPool[randomIndex]', personPool[randomIndex], '\n',
+            // )
+    

            personPool.splice(randomIndex, 1)
            // console.log(
@@ -420,18 +440,22 @@ const stopLottery = async () => {
            // )
        }
    }
-    const luckyCardListLength = luckyCardList.value.length;
    const windowSize = { width: window.innerWidth, height: window.innerHeight }
-    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)
+    luckyTargets.value.forEach((person: IPersonConfig, index: number) => {
+        let cardIndex = selectCard(luckyCardList.value, tableData.value.length, person.id)
+        luckyCardList.value.push(cardIndex)
+        let item = objects.value[cardIndex]
+        const { xTable, yTable } = useElementPosition(item, rowCount.value, { width: cardSize.value.width * 2, height: cardSize.value.height * 2 }, windowSize, index)
        new TWEEN.Tween(item.position)
            .to({
-                x: item.x,
-                y: item.y,
+                x: xTable,
+                y: yTable,
                z: 1000
-            }, 1000)
+            }, 1200)
            .easing(TWEEN.Easing.Exponential.InOut)
+            .onStart(() => {
+                item.element = useElementStyle(item.element, person,cardIndex,patternList.value,patternColor.value, luckyColor.value, { width: cardSize.value.width * 2, height: cardSize.value.height * 2 }, textSize.value * 2, 'lucky')
+            })
            .start()
        new TWEEN.Tween(item.rotation)
            .to({
@@ -446,22 +470,32 @@ const stopLottery = async () => {
                resetCamera()
            })
    })
-    // currentPrize.value.isUsedCount += luckyCount
-    // if (currentPrize.value.isUsedCount >= currentPrize.value.count) {
-    //     currentPrize.value.isUsed = true
-    // }
-    // luckyCardList.value = []

-    // personConfig.addAlreadyPersonList(luckyTargets.value, currentPrize.value)
-    // prizeConfig.updatePrizeConfig(currentPrize.value)
+    currentStatus.value = 3
+}
+// 继续
+const continueLottery = async () => {
+    // currentPrize.value.isUsedCount += luckyCount.value
+    if (currentPrize.value.isUsedCount >= currentPrize.value.count) {
+        currentPrize.value.isUsed = true
+    }
+    personConfig.addAlreadyPersonList(luckyTargets.value, currentPrize.value)
+    prizeConfig.updatePrizeConfig(currentPrize.value)

-    // prizeConfig.setCurrentPrize(currentPrize.value)
-    luckyTargets.value = []
+    prizeConfig.setCurrentPrize(currentPrize.value)
+    luckyCount.value = 10
+    await enterLottery()
+    // startLottery()
+    currentStatus.value = 1
+}
+const quitLottery = () => {
+    enterLottery()
+    currentStatus.value = 0
 }
 // 庆祝动画
 const confettiFire = () => {
-    var duration = 3 * 1000;
-    var end = Date.now() + duration;
+    const duration = 3 * 1000;
+    const end = Date.now() + duration;
    (function frame() {
        // launch a few confetti from the left edge
        confetti({
@@ -520,14 +554,32 @@ const setDefaultPersonList = () => {
    // 刷新页面
    window.location.reload()
 }
+// 随机替换数据
+const randomBallData = (mod: 'default' | 'lucky' |'sphere'='default') => {
+    // 两秒执行一次
+    intervalTimer.value = setInterval(() => {
+        // 产生随机数数组
+        const cardRandomIndexArr = [Math.round(Math.random() * (tableData.value.length - 1)), Math.round(Math.random() * (tableData.value.length - 1)), Math.round(Math.random() * (tableData.value.length - 1))]
+        const personRandomIndexArr = [Math.round(Math.random() * (allPersonList.value.length - 1)), Math.round(Math.random() * (allPersonList.value.length - 1)), Math.round(Math.random() * (allPersonList.value.length - 1))]

+        for (let i = 0; i < cardRandomIndexArr.length; i++) {
+            objects.value[cardRandomIndexArr[i]].element = useElementStyle(objects.value[cardRandomIndexArr[i]].element, allPersonList.value[personRandomIndexArr[i]],cardRandomIndexArr[i],patternList.value,patternColor.value, cardColor.value, { width: cardSize.value.width, height: cardSize.value.height }, textSize.value,mod)
+        }
+        // const randomCardIndex = Math.round(Math.random() * (tableData.value.length - 1))
+        // const randomPersonIndex = Math.round(Math.random() * (allPersonList.value.length - 1))
+        // objects.value[randomCardIndex].element = useElementStyle(objects.value[randomCardIndex].element, allPersonList.value[randomPersonIndex], cardColor.value, { width: cardSize.value.width, height: cardSize.value.height }, textSize.value, 'default')
+    }, 200)
+}
 onMounted(() => {
    initTableData();
    init();
    animation();
    containerRef.value!.style.color = `${textColor}`
+    randomBallData()
 });
 onUnmounted(() => {
+    clearInterval(intervalTimer.value)
+    intervalTimer.value = null
 })
 // watch(() => currentPrize.value.isUsed, (val) => {
 //     if (val) {
@@ -552,8 +604,9 @@ onUnmounted(() => {
        <!-- 选中菜单结构 start-->
        <div id="menu">
            <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 class="start" v-if="currentStatus == 1">
+                <button class="btn-start" @click="startLottery"><strong>开始</strong>
                    <div id="container-stars">
                        <div id="stars"></div>
                    </div>
@@ -564,10 +617,36 @@ onUnmounted(() => {
                    </div>
                </button>
            </div>
-
+        
            <button class="btn-end btn glass btn-lg" @click="stopLottery" v-if="currentStatus == 2">抽取幸运儿</button>
+        
+            <div v-if="currentStatus == 3" class="flex justify-center gap-6 enStop">
+                <div class="start">
+                    <button class="btn-start" @click="continueLottery"><strong>继续！</strong>
+                        <div id="container-stars">
+                            <div id="stars"></div>
+                        </div>

+                        <div id="glow">
+                            <div class="circle"></div>
+                            <div class="circle"></div>
+                        </div>
+                    </button>
+                </div>

+                <div class="start">
+                    <button class="btn-cancel" @click="quitLottery"><strong>取消</strong>
+                        <div id="container-stars">
+                            <div id="stars"></div>
+                        </div>
+
+                        <div id="glow">
+                            <div class="circle"></div>
+                            <div class="circle"></div>
+                        </div>
+                    </button>
+                </div>
+            </div>
            <!--   <button id="table" @click="transform(targets.table, 2000)">TABLE</button> -->
            <!--  <button id="helix" @click="transform(targets.helix, 2000)">HELIX</button> -->

@@ -591,7 +670,15 @@ onUnmounted(() => {
    margin: 0 auto;
    font-size: 32px;
 }
-
+// .enter-enter-active{
+//     -webkit-animation: fade-in-fwd 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
+// 	        animation: fade-in-fwd 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
+//             animation-delay:0.5s ;
+// }
+// .enter-leave-active{
+//     -webkit-animation: swing-out-top-bck 0.45s cubic-bezier(0.600, -0.280, 0.735, 0.045) both;
+// 	        animation: swing-out-top-bck 0.45s cubic-bezier(0.600, -0.280, 0.735, 0.045) both;
+// }
 .start {
    // 居中
    display: flex;
@@ -619,6 +706,25 @@ onUnmounted(() => {
    animation: pulsate-fwd 1.2s ease-in-out infinite both;
 }

+.btn-cancel {
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 13rem;
+    overflow: hidden;
+    height: 3rem;
+    background-size: 300% 300%;
+    backdrop-filter: blur(1rem);
+    border-radius: 5rem;
+    transition: 0.5s;
+    animation: gradient_301 5s ease infinite;
+    border: double 4px transparent;
+    background-image: linear-gradient(#212121, #212121), linear-gradient(137.48deg, #ffdb3b 10%, #FE53BB 45%, #8F51EA 67%, #0044ff 87%);
+    background-origin: border-box;
+    background-clip: content-box, border-box;
+}
+
 #container-stars {
    position: absolute;
    z-index: -1;
@@ -795,6 +901,8 @@ strong {
    text-shadow: 0 0 .5em var(--glow-color);
    position: relative;
    transition: all 0.3s;
+    -webkit-animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
+	        animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
 }

 .btn-end::after {
@@ -858,4 +966,62 @@ strong {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
-}</style>
+}
+@-webkit-keyframes fade-in-fwd {
+  0% {
+    -webkit-transform: translateZ(-80px);
+            transform: translateZ(-80px);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: translateZ(0);
+            transform: translateZ(0);
+    opacity: 1;
+  }
+}
+@keyframes fade-in-fwd {
+  0% {
+    -webkit-transform: translateZ(-80px);
+            transform: translateZ(-80px);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: translateZ(0);
+            transform: translateZ(0);
+    opacity: 1;
+  }
+}
+@-webkit-keyframes swing-out-top-bck {
+  0% {
+    -webkit-transform: rotateX(0deg);
+            transform: rotateX(0deg);
+    -webkit-transform-origin: top;
+            transform-origin: top;
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: rotateX(-100deg);
+            transform: rotateX(-100deg);
+    -webkit-transform-origin: top;
+            transform-origin: top;
+    opacity: 0;
+  }
+}
+@keyframes swing-out-top-bck {
+  0% {
+    -webkit-transform: rotateX(0deg);
+            transform: rotateX(0deg);
+    -webkit-transform-origin: top;
+            transform-origin: top;
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: rotateX(-100deg);
+            transform: rotateX(-100deg);
+    -webkit-transform-origin: top;
+            transform-origin: top;
+    opacity: 0;
+  }
+}
+
+</style>