fix: 性能问题

2025-01-13 23:04:51 +08:00
parent 9e5730146d
commit 95c00b58dc
2 changed files with 148 additions and 95 deletions
--- 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 }
 }
--- 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)