登录叶细胞

src/utils/loading.ts

@@ -0,0 +1,34 @@
+import { nextTick } from 'vue'
+import '@/styles/loading.scss'
+
+export const loading = {
+    show: () => {
+        const bodys: Element = document.body
+        const div = document.createElement('div')
+        div.className = 'block-loading'
+        div.innerHTML = `
+            <div class="block-loading-box">
+                <div class="block-loading-box-warp">
+                    <div class="block-loading-box-item"></div>
+                    <div class="block-loading-box-item"></div>
+                    <div class="block-loading-box-item"></div>
+                    <div class="block-loading-box-item"></div>
+                    <div class="block-loading-box-item"></div>
+                    <div class="block-loading-box-item"></div>
+                    <div class="block-loading-box-item"></div>
+                    <div class="block-loading-box-item"></div>
+                    <div class="block-loading-box-item"></div>
+                </div>
+            </div>
+        `
+        bodys.insertBefore(div, bodys.childNodes[0])
+    },
+    hide: () => {
+        nextTick(() => {
+            setTimeout(() => {
+                const el = document.querySelector('.block-loading')
+                el && el.parentNode?.removeChild(el)
+            }, 1000)
+        })
+    },
+}

src/utils/pageBubble.ts

@@ -0,0 +1,104 @@
+// 页面气泡效果
+
+const bubble: {
+    width: number
+    height: number
+    bubbleEl: any
+    canvas: any
+    ctx: any
+    circles: any[]
+    animate: boolean
+    requestId: any
+} = {
+    width: 0,
+    height: 0,
+    bubbleEl: null,
+    canvas: null,
+    ctx: {},
+    circles: [],
+    animate: true,
+    requestId: null,
+}
+
+export const init = function (): void {
+    bubble.width = window.innerWidth
+    bubble.height = window.innerHeight
+
+    bubble.bubbleEl = document.getElementById('bubble')
+    bubble.bubbleEl.style.height = bubble.height + 'px'
+
+    bubble.canvas = document.getElementById('bubble-canvas')
+    bubble.canvas.width = bubble.width
+    bubble.canvas.height = bubble.height
+    bubble.ctx = bubble.canvas.getContext('2d')
+
+    // create particles
+    bubble.circles = []
+    for (let x = 0; x < bubble.width * 0.5; x++) {
+        const c = new Circle()
+        bubble.circles.push(c)
+    }
+    animate()
+    addListeners()
+}
+
+function scrollCheck() {
+    bubble.animate = document.body.scrollTop > bubble.height ? false : true
+}
+
+function resize() {
+    bubble.width = window.innerWidth
+    bubble.height = window.innerHeight
+    bubble.bubbleEl.style.height = bubble.height + 'px'
+    bubble.canvas.width = bubble.width
+    bubble.canvas.height = bubble.height
+}
+
+function animate() {
+    if (bubble.animate) {
+        bubble.ctx.clearRect(0, 0, bubble.width, bubble.height)
+        for (const i in bubble.circles) {
+            bubble.circles[i].draw()
+        }
+    }
+    bubble.requestId = requestAnimationFrame(animate)
+}
+
+class Circle {
+    pos: {
+        x: number
+        y: number
+    }
+    alpha: number
+    scale: number
+    velocity: number
+    draw: () => void
+    constructor() {
+        this.pos = {
+            x: Math.random() * bubble.width,
+            y: bubble.height + Math.random() * 100,
+        }
+        this.alpha = 0.1 + Math.random() * 0.3
+        this.scale = 0.1 + Math.random() * 0.3
+        this.velocity = Math.random()
+        this.draw = function () {
+            this.pos.y -= this.velocity
+            this.alpha -= 0.0005
+            bubble.ctx.beginPath()
+            bubble.ctx.arc(this.pos.x, this.pos.y, this.scale * 10, 0, 2 * Math.PI, false)
+            bubble.ctx.fillStyle = 'rgba(255,255,255,' + this.alpha + ')'
+            bubble.ctx.fill()
+        }
+    }
+}
+
+function addListeners() {
+    window.addEventListener('scroll', scrollCheck)
+    window.addEventListener('resize', resize)
+}
+
+export function removeListeners() {
+    window.removeEventListener('scroll', scrollCheck)
+    window.removeEventListener('resize', resize)
+    cancelAnimationFrame(bubble.requestId)
+}

src/utils/router.ts

@@ -22,14 +22,14 @@ export const routePush = async (to: RouteLocationRaw) => {
                 type: 'error'
             })
         } else if (isNavigationFailure(failure, NavigationFailureType.duplicated)) {
-            ElNotification({
-                message: 'utils.Navigation failed, it is at the navigation target position!',
-                type: 'warning'
-            })
+            // ElNotification({
+            //     message: '已在目标页',
+            //     type: 'warning'
+            // })
         }
     } catch (error) {
         ElNotification({
-            message: 'utils.Navigation failed, invalid route!',
+            message: '导航失败，路由无效',
             type: 'error'
         })
         console.error(error)