refactor(components): 优化动画组件代码结构并移除冗余样式

style(pages): 使用实用类替换内联样式
refactor(composables): 简化页面标题模板逻辑
docs(components): 添加详细注释说明动画逻辑

app/components/common/AppLoader.vue

@@ -8,7 +8,7 @@ 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
@@ -16,17 +16,14 @@ let removeLoadListener: (() => void) | null = null
 let introStartTimer: ReturnType<typeof window.setTimeout> | null = null
 
 onMounted(() => {
-  const loaderElement = loaderRef.value
-  const loaderBarElement = loaderBarRef.value
+  if (!loaderRef.value || !loaderBarRef.value) return
 
-  if (!loaderElement || !loaderBarElement) return
+  // 1. 初始化 GSAP 样式状态
+  gsap.set(loaderRef.value, { display: 'grid', yPercent: 0, autoAlpha: 1 })
+  gsap.set(loaderBarRef.value, { scaleX: 0.18, transformOrigin: 'left center' })
 
-  // 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, {
+  // 2. 进度条往复加载动画
+  loaderTween = gsap.to(loaderBarRef.value, {
     scaleX: 0.82,
     duration: 1.2,
     ease: 'power1.inOut',
@@ -35,43 +32,32 @@ onMounted(() => {
   })
 
   const loaderStartedAt = window.performance.now()
-  const minLoaderDuration = 1200
+  const minLoaderDuration = 1200 // 保证加载动画至少播放 1.2 秒，避免一闪而过
 
   const finishLoading = () => {
     removeLoadListener?.()
-    removeLoadListener = null
-
-    if (introStartTimer) {
-      window.clearTimeout(introStartTimer)
-      introStartTimer = null
-    }
+    if (introStartTimer) clearTimeout(introStartTimer)
 
+    // 计算还需要等待多久才能达到最小加载时间
     const remainingTime = Math.max(0, minLoaderDuration - (window.performance.now() - loaderStartedAt))
 
-    introStartTimer = window.setTimeout(() => {
-      // End the loader loop and slide out
+    introStartTimer = setTimeout(() => {
+      // 停止往复动画
       loaderTween?.kill()
-      loaderTween = null
-
-      const tl = gsap.timeline({
+      
+      // 3. 执行加载器退场动画
+      gsap.timeline({
         onComplete: () => {
-          gsap.set(loaderElement, { display: 'none' })
-          appStore.setAppLoading(false)
+          gsap.set(loaderRef.value, { 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',
-      })
+      .to(loaderBarRef.value, { scaleX: 1, duration: 0.25, ease: 'power2.out' })
+      .to(loaderRef.value, { yPercent: -100, duration: 0.75, ease: 'power4.inOut' })
     }, remainingTime)
   }
 
+  // 监听浏览器 window.onload 事件以判断页面资源是否加载完毕
   if (document.readyState === 'complete') {
     finishLoading()
   } else {
@@ -82,59 +68,18 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
   loaderTween?.kill()
-  if (introStartTimer) window.clearTimeout(introStartTimer)
+  if (introStartTimer) 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" />
+  <div ref="loaderRef" class="fixed inset-0 z-[90] grid place-items-center bg-black text-white will-change-transform" aria-hidden="true">
+    <div class="w-[min(220px,calc(100vw-48px))] text-xs uppercase tracking-[0.18em]">
+      <p class="m-0 mb-[14px]">Loading</p>
+      <span class="block h-px w-full overflow-hidden bg-white/20">
+        <span ref="loaderBarRef" class="block h-full w-full origin-left scale-x-0 bg-white"></span>
       </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>