refactor: 提取组件，优化代码

src/views/Home/useViewModel.ts

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