From 95c00b58dc0b7b7b93133a8a5a305f5510f34da5 Mon Sep 17 00:00:00 2001
From: LOG1997 <2694233102@qq.com>
Date: Mon, 13 Jan 2025 23:04:51 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=80=A7=E8=83=BD=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useElement.ts  | 124 +++++++++++++++++++--------------------
 src/views/Home/index.vue | 119 ++++++++++++++++++++++++++-----------
 2 files changed, 148 insertions(+), 95 deletions(-)

diff --git a/src/hooks/useElement.ts b/src/hooks/useElement.ts
index 359ddf3..4322c9a 100644
--- a/src/hooks/useElement.ts
+++ b/src/hooks/useElement.ts
@@ -1,41 +1,42 @@
 import type { IPersonConfig } from '@/types/storeType'
 import { rgba } from '@/utils/color'
 
-export const useElementStyle = (element: any, person: IPersonConfig, index: number, patternList: number[], patternColor: string, cardColor: string, cardSize: { width: number, height: number }, textSize: number, mod: 'default' | 'lucky' | 'sphere' = 'default') => {
-    if (patternList.includes(index + 1) && mod == 'default') {
-        element.style.backgroundColor = rgba(patternColor, Math.random() * 0.2 + 0.8)
-    }
-    else if (mod == 'sphere' || mod == 'default') {
-        element.style.backgroundColor = rgba(cardColor, Math.random() * 0.5 + 0.25)
-    }
-    else if (mod == 'lucky') {
-        element.style.backgroundColor = rgba(cardColor, 0.8)
-    }
-    element.style.border = `1px solid ${rgba(cardColor, 0.25)}`
-    element.style.boxShadow = `0 0 12px ${rgba(cardColor, 0.5)}`
-    element.style.width = `${cardSize.width}px`;
-    element.style.height = `${cardSize.height}px`;
-    if (mod == 'lucky') {
-        element.className = 'lucky-element-card'
-    }
-    else {
-        element.className = 'element-card'
-    }
-    // 等比放大
+export function useElementStyle(element: any, person: IPersonConfig, index: number, patternList: number[], patternColor: string, cardColor: string, cardSize: { width: number, height: number }, textSize: number, mod: 'default' | 'lucky' | 'sphere' = 'default', type: 'add' | 'change' = 'add') {
+  if (patternList.includes(index + 1) && mod === 'default') {
+    element.style.backgroundColor = rgba(patternColor, Math.random() * 0.2 + 0.8)
+  }
+  else if (mod === 'sphere' || mod === 'default') {
+    element.style.backgroundColor = rgba(cardColor, Math.random() * 0.5 + 0.25)
+  }
+  else if (mod === 'lucky') {
+    element.style.backgroundColor = rgba(cardColor, 0.8)
+  }
+  element.style.border = `1px solid ${rgba(cardColor, 0.25)}`
+  element.style.boxShadow = `0 0 12px ${rgba(cardColor, 0.5)}`
+  element.style.width = `${cardSize.width}px`
+  element.style.height = `${cardSize.height}px`
+  if (mod === 'lucky') {
+    element.className = 'lucky-element-card'
+  }
+  else {
+    element.className = 'element-card'
+  }
+  if (type === 'add') {
     element.addEventListener('mouseenter', (ev: MouseEvent) => {
-        const target = ev.target as HTMLElement
-        target.style.border = `1px solid ${rgba(cardColor, 0.75)}`
-        target.style.boxShadow = `0 0 12px ${rgba(cardColor, 0.75)}`
+      const target = ev.target as HTMLElement
+      target.style.border = `1px solid ${rgba(cardColor, 0.75)}`
+      target.style.boxShadow = `0 0 12px ${rgba(cardColor, 0.75)}`
     })
     element.addEventListener('mouseleave', (ev: MouseEvent) => {
-        const target = ev.target as HTMLElement
-        target.style.border = `1px solid ${rgba(cardColor, 0.25)}`
-        target.style.boxShadow = `0 0 12px ${rgba(cardColor, 0.5)}`
+      const target = ev.target as HTMLElement
+      target.style.border = `1px solid ${rgba(cardColor, 0.25)}`
+      target.style.boxShadow = `0 0 12px ${rgba(cardColor, 0.5)}`
     })
-    element.children[0].style.fontSize = textSize * 0.5 + 'px';
-    if (person.uid) {
-        element.children[0].textContent = person.uid;
-    }
+  }
+  element.children[0].style.fontSize = `${textSize * 0.5}px`
+  if (person.uid) {
+    element.children[0].textContent = person.uid
+  }
 
   element.children[1].style.fontSize = `${textSize}px`
   element.children[1].style.lineHeight = `${textSize * 3}px`
@@ -43,7 +44,6 @@ export const useElementStyle = (element: any, person: IPersonConfig, index: numb
   if (person.name) {
     element.children[1].textContent = person.name
   }
-
   element.children[2].style.fontSize = `${textSize * 0.5}px`
   if (person.department || person.identity) {
     element.children[2].innerHTML = `${person.department ? person.department : ''}<br/>${person.identity ? person.identity : ''}`
@@ -57,37 +57,37 @@ export const useElementStyle = (element: any, person: IPersonConfig, index: numb
  * 最少一个，最大十个
  */
 // TODO:不超过5个时：单行排列；超过5个时，6：上3下3；7：上3下4；8：上3下5；9：上4下5；10：上5下5
-export const useElementPosition = (element: any, count: number, totalCount: number, cardSize: { width: number, height: number }, windowSize: { width: number, height: number }, cardIndex: number) => {
-    let xTable = 0
-    let yTable = 0
-    const centerPosition = {
-        x: 0,
-        y: windowSize.height / 2 - cardSize.height / 2
-    }
-    // 有一行为偶数的特殊数量
-    const specialPosition = [2, 4, 7, 9]
-    // 不包含特殊值的 和 分两行中第一行为奇数值的
-    if (!specialPosition.includes(totalCount) || (totalCount > 5 && cardIndex < 5)) {
-        const index = cardIndex % 5
-        if (index == 0) {
-            xTable = centerPosition.x
-            yTable = centerPosition.y - Math.floor(cardIndex / 5) * (cardSize.height + 60)
-        }
-        else {
-            xTable = index % 2 === 0 ? Math.ceil(index / 2) * (cardSize.width + 100) : -Math.ceil(index / 2) * (cardSize.width + 100)
-            yTable = centerPosition.y - Math.floor(cardIndex / 5) * (cardSize.height + 60)
-        }
+export function useElementPosition(element: any, count: number, totalCount: number, cardSize: { width: number, height: number }, windowSize: { width: number, height: number }, cardIndex: number) {
+  let xTable = 0
+  let yTable = 0
+  const centerPosition = {
+    x: 0,
+    y: windowSize.height / 2 - cardSize.height / 2,
+  }
+  // 有一行为偶数的特殊数量
+  const specialPosition = [2, 4, 7, 9]
+  // 不包含特殊值的 和 分两行中第一行为奇数值的
+  if (!specialPosition.includes(totalCount) || (totalCount > 5 && cardIndex < 5)) {
+    const index = cardIndex % 5
+    if (index === 0) {
+      xTable = centerPosition.x
+      yTable = centerPosition.y - Math.floor(cardIndex / 5) * (cardSize.height + 60)
     }
     else {
-        const index = cardIndex % 5
-        if (index == 0) {
-            xTable = centerPosition.x + (cardSize.width + 100) / 2
-            yTable = centerPosition.y - Math.floor(cardIndex / 5) * (cardSize.height + 60)
-        }
-        else {
-            xTable = index % 2 === 0 ? Math.ceil(index / 2) * (cardSize.width + 100) + (cardSize.width + 100) / 2 : -(Math.ceil(index / 2) * (cardSize.width + 100)) + (cardSize.width + 100) / 2
-            yTable = centerPosition.y - Math.floor(cardIndex / 5) * (cardSize.height + 60)
-        }
+      xTable = index % 2 === 0 ? Math.ceil(index / 2) * (cardSize.width + 100) : -Math.ceil(index / 2) * (cardSize.width + 100)
+      yTable = centerPosition.y - Math.floor(cardIndex / 5) * (cardSize.height + 60)
     }
-    return { xTable, yTable }
+  }
+  else {
+    const index = cardIndex % 5
+    if (index === 0) {
+      xTable = centerPosition.x + (cardSize.width + 100) / 2
+      yTable = centerPosition.y - Math.floor(cardIndex / 5) * (cardSize.height + 60)
+    }
+    else {
+      xTable = index % 2 === 0 ? Math.ceil(index / 2) * (cardSize.width + 100) + (cardSize.width + 100) / 2 : -(Math.ceil(index / 2) * (cardSize.width + 100)) + (cardSize.width + 100) / 2
+      yTable = centerPosition.y - Math.floor(cardIndex / 5) * (cardSize.height + 60)
+    }
+  }
+  return { xTable, yTable }
 }
diff --git a/src/views/Home/index.vue b/src/views/Home/index.vue
index bd7e2b0..154c6f3 100644
--- a/src/views/Home/index.vue
+++ b/src/views/Home/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { IPersonConfig } from '@/types/storeType'
+import type { Material } from 'three'
 import StarsBackground from '@/components/StarsBackground/index.vue'
 import { useElementPosition, useElementStyle } from '@/hooks/useElement'
 import i18n from '@/locales/i18n'
@@ -12,7 +13,7 @@ import { storeToRefs } from 'pinia'
 import { Object3D, PerspectiveCamera, Scene, Vector3 } from 'three'
 import { CSS3DObject, CSS3DRenderer } from 'three-css3d'
 import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls.js'
-import { onMounted, onUnmounted, ref } from 'vue'
+import { nextTick, onMounted, onUnmounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import { useToast } from 'vue-toast-notification'
@@ -268,7 +269,9 @@ function onWindowResize() {
  */
 function animation() {
   TWEEN.update()
-  controls.value.update()
+  if (controls.value) {
+    controls.value.update()
+  }
   // 设置自动旋转
   // 设置相机位置
   requestAnimationFrame(animation)
@@ -343,7 +346,9 @@ function resetCamera() {
 }
 
 function render() {
-  renderer.value.render(scene.value, camera.value)
+  if (renderer.value) {
+    renderer.value.render(scene.value, camera.value)
+  }
 }
 async function enterLottery() {
   if (!canOperate.value) {
@@ -582,39 +587,84 @@ function randomBallData(mod: 'default' | 'lucky' | 'sphere' = 'default') {
       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)
+      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)
 }
 // 监听键盘
-function listenKeyboard() {
-  window.addEventListener('keydown', (e: any) => {
-    if ((e.keyCode !== 32 || e.keyCode !== 27) && !canOperate.value) {
-      return
-    }
-    if (e.keyCode === 27 && currentStatus.value === 3) {
-      quitLottery()
-    }
-    if (e.keyCode !== 32) {
-      return
-    }
-    switch (currentStatus.value) {
-      case 0:
-        enterLottery()
-        break
-      case 1:
-        startLottery()
-        break
-      case 2:
-        stopLottery()
-        break
-      case 3:
-        continueLottery()
-        break
-      default:
-        break
-    }
-  })
+function listenKeyboard(e: any) {
+  if ((e.keyCode !== 32 || e.keyCode !== 27) && !canOperate.value) {
+    return
+  }
+  if (e.keyCode === 27 && currentStatus.value === 3) {
+    quitLottery()
+  }
+  if (e.keyCode !== 32) {
+    return
+  }
+  switch (currentStatus.value) {
+    case 0:
+      enterLottery()
+      break
+    case 1:
+      startLottery()
+      break
+    case 2:
+      stopLottery()
+      break
+    case 3:
+      continueLottery()
+      break
+    default:
+      break
+  }
+}
+
+function cleanup() {
+//   animationRunning.value = false
+  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
 }
 onMounted(() => {
   initTableData()
@@ -622,9 +672,12 @@ onMounted(() => {
   animation()
   containerRef.value!.style.color = `${textColor}`
   randomBallData()
-  listenKeyboard()
+  window.addEventListener('keydown', listenKeyboard)
 })
 onUnmounted(() => {
+  nextTick(() => {
+    cleanup()
+  })
   clearInterval(intervalTimer.value)
   intervalTimer.value = null
   window.removeEventListener('keydown', listenKeyboard)