⚡ perf(business): po matter

Ting-Code · Nov 14, 2024 · ccf8359 · ccf8359
1 parent 86bc08b
commit ccf8359
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 52 deletions.
diff --git a/packages/apps/admin/src/views/common/login/components/matter/hooks/matter.ts b/packages/apps/admin/src/views/common/login/components/matter/hooks/matter.ts
@@ -1,4 +1,4 @@
-import { Engine, Render, Runner, Bodies, Composite, Mouse, MouseConstraint } from 'matter-js'
+import { Bodies, Composite, Engine, Mouse, MouseConstraint, Render, Runner } from 'matter-js'
 import { getRandomNumber } from '@tingcode/utils'
 import vueSvg from '@/assets/svg/logo/vue.svg'
 import elementuiSvg from '@/assets/svg/logo/elementui.svg'
@@ -12,21 +12,8 @@ import unocssSvg from '@/assets/svg/logo/unocss.svg'
 import reactSvg from '@/assets/svg/logo/react.svg'
 import typescriptSvg from '@/assets/svg/logo/typescript.svg'
 
-export function initMatter(element: HTMLElement) {
-  const boxWidth = element.clientWidth
-  const boxHeight = element.clientHeight
-  const engine = Engine.create()
-  const render = Render.create({
-    element: element,
-    engine: engine,
-    options: {
-      width: boxWidth,
-      height: boxHeight,
-      wireframes: false
-    }
-  })
-
-  const getIconBallList = () => {
+export function useMatter() {
+  const getIconBallList = (boxWidth) => {
     return [
       vueSvg,
       elementuiSvg,
@@ -48,7 +35,7 @@ export function initMatter(element: HTMLElement) {
         -100,
         200 * Scale,
         {
-          restitution: getRandomNumber(0.6, 0.8, 1), // 弹力系数
+          restitution: getRandomNumber(0.2, 0.6, 1), // 弹力系数
           render: {
             sprite: {
               texture: svg,
@@ -60,38 +47,65 @@ export function initMatter(element: HTMLElement) {
       )
     })
   }
+  const createMatter = (element: HTMLElement) => {
+    const boxWidth = element.clientWidth
+    const boxHeight = element.clientHeight
+    const engine = Engine.create()
+    const render = Render.create({
+      element: element,
+      engine: engine,
+      options: {
+        width: boxWidth,
+        height: boxHeight,
+        wireframes: false
+      }
+    })
 
-  // 创建上下左右四面墙
-  // const groundTop = Bodies.rectangle(0, 0, boxWidth * 2, 3, { isStatic: true })
-  const groundBottom = Bodies.rectangle(0, boxHeight, boxWidth * 2, 6, { isStatic: true })
-  const groundLeft = Bodies.rectangle(0, 0, 6, boxHeight * 2, { isStatic: true })
-  const groundRight = Bodies.rectangle(boxWidth, 0, 6, boxHeight * 2, { isStatic: true })
-
-  Composite.add(engine.world, [groundBottom, groundLeft, groundRight, ...getIconBallList()])
-
-  // 添加鼠标控制
-  const mouse = Mouse.create(render.canvas)
-  const mouseConstraint = MouseConstraint.create(engine, {
-    mouse: mouse,
-    constraint: {
-      stiffness: 0.2,
-      render: {
-        visible: false
+    // 创建上下左右四面墙
+    // const groundTop = Bodies.rectangle(0, 0, boxWidth * 2, 3, { isStatic: true })
+    const groundBottom = Bodies.rectangle(0, boxHeight, boxWidth * 2, 6, { isStatic: true })
+    const groundLeft = Bodies.rectangle(0, 0, 6, boxHeight * 2, { isStatic: true })
+    const groundRight = Bodies.rectangle(boxWidth, 0, 6, boxHeight * 2, { isStatic: true })
+    Composite.add(engine.world, [
+      groundBottom,
+      groundLeft,
+      groundRight,
+      ...getIconBallList(boxWidth)
+    ])
+    // 添加鼠标控制
+    const mouse = Mouse.create(render.canvas)
+    const mouseConstraint = MouseConstraint.create(engine, {
+      mouse: mouse,
+      constraint: {
+        stiffness: 0.2,
+        render: {
+          visible: false
+        }
       }
-    }
-  })
+    })
+    Composite.add(engine.world, mouseConstraint)
+    const intervalId = setInterval(() => {
+      Composite.add(engine.world, [...getIconBallList(boxWidth)])
+    }, 10000)
 
-  Composite.add(engine.world, mouseConstraint)
-  setInterval(() => {
-    Composite.add(engine.world, [...getIconBallList()])
-  }, 10000)
+    // 确保鼠标在渲染器中正常工作
+    render.mouse = mouse
 
-  // 确保鼠标在渲染器中正常工作
-  render.mouse = mouse
+    Runner.run(engine)
+    Render.run(render)
+    // 创建运行器
+    const runner = Runner.create()
+    Runner.run(runner, engine)
+
+    return () => {
+      clearInterval(intervalId)
+      Render.stop(render)
+      Runner.stop(runner)
+      Composite.clear(engine.world, false)
+      render.canvas.remove()
+      render.textures = {}
+    }
+  }
 
-  Runner.run(engine)
-  Render.run(render)
-  // 创建运行器
-  const runner = Runner.create()
-  Runner.run(runner, engine)
+  return { createMatter, getIconBallList }
 }
diff --git a/packages/apps/admin/src/views/common/login/components/matter/index.vue b/packages/apps/admin/src/views/common/login/components/matter/index.vue
@@ -5,15 +5,23 @@
 <script lang="ts" setup>
   // import { ElMessageBox } from 'element-plus'
   import { useNamespace, loginSystem } from '@tingcode/system'
-  import { initMatter } from './hooks/matter'
+  import { useMatter } from './hooks/matter'
   const ns = useNamespace('matter')
-
   const matterRef = ref()
+  let clearMatter = () => {
+    console.log('先执行createMatter， 再执行createMatter')
+  }
+
+  const { createMatter } = useMatter()
+
   onMounted(() => {
-    initMatter(matterRef.value)
+    clearMatter = createMatter(matterRef.value)
     setTimeout(() => {
       handleTipLogin()
-    }, 3000)
+    }, 10000)
+  })
+  onBeforeUnmount(() => {
+    clearMatter()
   })
 
   const handleTipLogin = () => {

diff --git a/packages/lib/system/src/hooks/login.ts b/packages/lib/system/src/hooks/login.ts
@@ -22,10 +22,10 @@ export async function loginSystem(userInfo?: any) {
       setGlobalDataUserInfo(result.userInfo)
       if (getUrl()?.query?.redirect) {
         const { redirect, ...query } = getUrl()?.query as any
-        const toPath = decodeURIComponent((redirect as string) || '/')
+        const toPath = decodeURIComponent((redirect as string) || PageEnum.BASE_HOME)
         setUrl({ path: toPath, query })
       } else {
-        setUrl({ path: '/' })
+        setUrl({ path: PageEnum.BASE_HOME })
       }
       const { ElMessage } = getGlobalDataElement()
       ElMessage.success('欢迎来到Ting Library知识库！')