feat: 重构应用加载流程和动画管理

- 新增 AppLoader 组件作为全局加载器 - 引入 Pinia 状态管理应用加载状态 - 创建 usePageScrollLock 组合式函数管理滚动锁定 - 重构首页动画流程，使用 Promise 链式调用 - 移除旧的 HomeLoader 组件 - 优化头部导航栏的入场动画触发逻辑
2026-04-27 02:19:29 +08:00
parent 6b41e053a1
commit 044042fe7e
9 changed files with 393 additions and 407 deletions
@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import gsap from 'gsap'
+import { useAppStore } from '~/stores/app'
+import { usePageScrollLock } from '~/composables/usePageScrollLock'
+
+const loaderRef = ref<HTMLElement | null>(null)
+const loaderBarRef = ref<HTMLElement | null>(null)
+const appStore = useAppStore()
+
+// Lock scroll while app is loading
+usePageScrollLock(appStore.isAppLoading)
+
+let loaderTween: gsap.core.Tween | null = null
+let removeLoadListener: (() => void) | null = null
+let introStartTimer: ReturnType<typeof window.setTimeout> | null = null
+
+onMounted(() => {
+  const loaderElement = loaderRef.value
+  const loaderBarElement = loaderBarRef.value
+
+  if (!loaderElement || !loaderBarElement) return
+
+  // Initial GSAP setup
+  gsap.set(loaderElement, { display: 'grid', yPercent: 0, autoAlpha: 1 })
+  gsap.set(loaderBarElement, { scaleX: 0.18, transformOrigin: 'left center' })
+
+  // Loader bar bouncing animation
+  loaderTween = gsap.to(loaderBarElement, {
+    scaleX: 0.82,
+    duration: 1.2,
+    ease: 'power1.inOut',
+    repeat: -1,
+    yoyo: true,
+  })
+
+  const loaderStartedAt = window.performance.now()
+  const minLoaderDuration = 1200
+
+  const finishLoading = () => {
+    removeLoadListener?.()
+    removeLoadListener = null
+
+    if (introStartTimer) {
+      window.clearTimeout(introStartTimer)
+      introStartTimer = null
+    }
+
+    const remainingTime = Math.max(0, minLoaderDuration - (window.performance.now() - loaderStartedAt))
+
+    introStartTimer = window.setTimeout(() => {
+      // End the loader loop and slide out
+      loaderTween?.kill()
+      loaderTween = null
+
+      const tl = gsap.timeline({
+        onComplete: () => {
+          gsap.set(loaderElement, { display: 'none' })
+          appStore.setAppLoading(false)
+        }
+      })
+
+      tl.to(loaderBarElement, {
+        scaleX: 1,
+        duration: 0.25,
+        ease: 'power2.out',
+      }).to(loaderElement, {
+        yPercent: -100,
+        duration: 0.75,
+        ease: 'power4.inOut',
+      })
+    }, remainingTime)
+  }
+
+  if (document.readyState === 'complete') {
+    finishLoading()
+  } else {
+    window.addEventListener('load', finishLoading, { once: true })
+    removeLoadListener = () => window.removeEventListener('load', finishLoading)
+  }
+})
+
+onBeforeUnmount(() => {
+  loaderTween?.kill()
+  if (introStartTimer) window.clearTimeout(introStartTimer)
+  removeLoadListener?.()
+})
+</script>
+
+<template>
+  <div ref="loaderRef" class="page-loader" aria-hidden="true">
+    <div class="page-loader-content">
+      <p>Loading</p>
+      <span class="page-loader-line">
+        <span ref="loaderBarRef" class="page-loader-line-inner" />
+      </span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.page-loader {
+  position: fixed;
+  inset: 0;
+  z-index: 90;
+  display: grid;
+  place-items: center;
+  color: #fff;
+  background: #000;
+  will-change: transform;
+}
+
+.page-loader-content {
+  width: min(220px, calc(100vw - 48px));
+  font-size: 12px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+}
+
+.page-loader-content p {
+  margin: 0 0 14px;
+}
+
+.page-loader-line {
+  display: block;
+  width: 100%;
+  height: 1px;
+  overflow: hidden;
+  background: rgb(255 255 255 / 20%);
+}
+
+.page-loader-line-inner {
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  transform: scaleX(0);
+  transform-origin: left center;
+}
+</style>