feat: new

src/views/Config/Global/FaceConfig.vue

@@ -1,34 +1,37 @@
 <script setup lang='ts'>
 import { ref, watch, onMounted } from 'vue'
 import useStore from '@/store'
-
-import {storeToRefs } from 'pinia'
+import { filterData } from '@/utils'
+import { storeToRefs } from 'pinia'
 import { themeChange } from 'theme-change';
 import zod from 'zod';
 import daisyuiThemes from 'daisyui/src/theming/themes'
 import { ColorPicker } from 'vue3-colorpicker';
 import 'vue3-colorpicker/style.css';
-import {isRgbOrRgba,isHex} from '@/utils/color'
+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 { getTableRowCount: tableRowCount, getShowField } = storeToRefs(personConfig)
+const personConfig = useStore().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,
-    showField: getShowField
+    rowCount: rowCountValue,
 })
 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,22 +88,21 @@ 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]
     globalConfig.setTheme({ name: val, detail: selectedThemeDetail })
     themeChange(val)
-    if(selectedThemeDetail.primary&&(isHex(selectedThemeDetail.primary)||isRgbOrRgba(selectedThemeDetail.primary))){
+    if (selectedThemeDetail.primary && (isHex(selectedThemeDetail.primary) || isRgbOrRgba(selectedThemeDetail.primary))) {
         globalConfig.setCardColor(selectedThemeDetail.primary)
     }
 }, { deep: true })
@@ -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,23 +120,36 @@ 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">
-            <div class="label">
-                <span class="label-text">列数</span>
+        <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>
+                <input type="number" v-model="formData.rowCount" placeholder="Type here"
+                    class="w-full max-w-xs input input-bordered" />
+                <div class="help">
+                    <span class="text-sm text-red-400 help-text" v-if="formErr.rowCount">
+                        {{ formErr.rowCount }}
+                    </span>
+                </div>
             </div>
-            <input type="number" v-model="formData.rowCount" placeholder="Type here"
-                class="w-full max-w-xs input input-bordered" />
-            <div class="help">
-                <span class="text-sm text-red-400 help-text" v-if="formErr.rowCount">
-                    {{ formErr.rowCount }}
-                </span>
+            <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">
@@ -130,7 +167,13 @@ 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">
                 <span class="label-text">文字颜色</span>
@@ -139,29 +182,29 @@ onMounted(() => {
         </label>
         <label class="flex flex-row w-full max-w-xs gap-10 mb-10 form-control">
             <div>
-            <div class="label">
-                <span class="label-text">卡片宽度</span>
+                <div class="label">
+                    <span class="label-text">卡片宽度</span>
+                </div>
+                <input type="number" v-model="cardSizeValue.width" placeholder="Type here"
+                    class="w-full max-w-xs input input-bordered" />
+                <div class="help">
+                    <span class="text-sm text-red-400 help-text" v-if="formErr.rowCount">
+                        {{ formErr.rowCount }}
+                    </span>
+                </div>
             </div>
-            <input type="number" v-model="cardSizeValue.width" placeholder="Type here"
-                class="w-full max-w-xs input input-bordered" />
-            <div class="help">
-                <span class="text-sm text-red-400 help-text" v-if="formErr.rowCount">
-                    {{ formErr.rowCount }}
-                </span>
+            <div>
+                <div class="label">
+                    <span class="label-text">卡片高度</span>
+                </div>
+                <input type="number" v-model="cardSizeValue.height" placeholder="Type here"
+                    class="w-full max-w-xs input input-bordered" />
+                <div class="help">
+                    <span class="text-sm text-red-400 help-text" v-if="formErr.rowCount">
+                        {{ formErr.rowCount }}
+                    </span>
+                </div>
             </div>
-        </div>
-        <div>
-            <div class="label">
-                <span class="label-text">卡片高度</span>
-            </div>
-            <input type="number" v-model="cardSizeValue.height" placeholder="Type here"
-                class="w-full max-w-xs input input-bordered" />
-            <div class="help">
-                <span class="text-sm text-red-400 help-text" v-if="formErr.rowCount">
-                    {{ formErr.rowCount }}
-                </span>
-            </div>
-        </div>
         </label>
         <label class="w-full max-w-xs mb-10 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 { getAllPersonList:allPersonList,getTableRowCount:rowCount} = storeToRefs(personConfig)
+const globalConfig = useStore().globalConfig
+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 {storeToRefs} from 'pinia'
+import { ref, onMounted } from 'vue'
+import { storeToRefs } from 'pinia'
 import useStore from '@/store'
 
-const prizeConfig=useStore().prizeConfig
-const {getPrizeConfig:localPrizeList}=storeToRefs(prizeConfig)
+const prizeConfig = useStore().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>
-    
-    <button class="btn btn-secondary" @click="delAll">全部删除</button>
-    
-    <button class="btn btn-secondary" @click="resetDefault">默认</button>
+    <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="print">打印</button>
-</div>
+                        <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>
+
+        <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"
+                    @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 { getCardColor: cardColor, getTextColor: textColor, getCardSize: cardSize, getTextSize: textSize } = globalConfig
+const { getAlreadyPersonList: alreadyPersonList, getNotPersonList: notPersonList } = personConfig
+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.border = `1px solid ${rgba(cardColor, 0.25)}`
-        element.style.boxShadow = `0 0 12px ${rgba(cardColor, 0.5)}`
+        // 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('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.fontSize = `${textSize}px`;
+        // symbol.style.textShadow = `0 0 12px ${rgba(cardColor, 0.95)}`
+        // symbol.style.fontSize = `${textSize}px`;
         element.appendChild(symbol);
 
         const detail = document.createElement('div');
         detail.className = 'card-detail';
         detail.innerHTML = `${tableData.value[i].department}<br/>${tableData.value[i].other}`;
-        detail.style.fontSize = `${textSize * 0.5}px`;
+        // detail.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() {
-   const rotateObj= new TWEEN.Tween(scene.value.rotation);
-   rotateObj
-      .to(
-        {
-          y: Math.PI * Math.random() * 1000,
-          x:Math.PI*Math.random()*1000,
-        },
-        3000 * 1000
-      )
-      .onUpdate(render)
-     .start();
+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(
+                {
+                    // x: Math.PI * rotateX * 1000,
+                    x: 0,
+                    y: ballRotationY.value,
+                    // z: Math.PI * rotateZ * 1000
+                    z: 0
+                },
+                duration * 1000
+            )
+            .onUpdate(render)
+            .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>