From 5db796bf64be095fbee6a3159a43e1840646c03b Mon Sep 17 00:00:00 2001
From: sky121113 <sky121113@gmail.com>
Date: Mon, 1 Jun 2026 10:11:08 +0800
Subject: [PATCH] =?UTF-8?q?[STYLE]=20=E5=86=8D=E5=BA=A6=E6=8F=90=E5=8D=87?=
 =?UTF-8?q?=E5=BE=8C=E5=8F=B0=E9=A0=81=E9=9D=A2=E8=BD=89=E5=A0=B4=E8=88=87?=
 =?UTF-8?q?=E7=99=BB=E5=A0=B4=20Loading=20=E5=BE=AE=E5=8B=95=E7=95=AB?=
 =?UTF-8?q?=E9=AB=94=E9=A9=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 優化 components/loading-screen.blade.php：將 loading 狀態設為預設開啟，並利用 requestAnimationFrame 與延遲在 x-init 中自動淡出，實現更流暢的頁面進場登場動畫。
2. 優化 layouts/admin.blade.php：引入 .admin-content-shell 過渡容器與 .admin-page-transitioning 狀態，在點擊跳轉時使主內容漸變為半透明與微模糊，提供 SPA 級別的跳轉微過渡體驗。
3. 重構 layouts/admin.blade.php 跳轉載入命名：將全螢幕載入整合至頁面登場與內容過渡機制，防止重複點擊並解除事件衝突。
---
 .../views/components/loading-screen.blade.php | 16 +++++++++---
 resources/views/layouts/admin.blade.php       | 25 ++++++++++++-------
 2 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/resources/views/components/loading-screen.blade.php b/resources/views/components/loading-screen.blade.php
index 2830090..608432e 100644
--- a/resources/views/components/loading-screen.blade.php
+++ b/resources/views/components/loading-screen.blade.php
@@ -1,6 +1,16 @@
 <div x-data="{ 
-         loading: false 
+         loading: true,
+         hideAfterRender() {
+             requestAnimationFrame(() => {
+                 requestAnimationFrame(() => {
+                     setTimeout(() => {
+                         this.loading = false;
+                     }, 220);
+                 });
+             });
+         }
      }" 
+     x-init="hideAfterRender()"
      x-on:show-global-loading.window="loading = true"
      x-on:hide-global-loading.window="loading = false"
      x-show="loading"
@@ -10,9 +20,7 @@
      x-transition:leave="transition ease-in duration-300"
      x-transition:leave-start="opacity-100"
      x-transition:leave-end="opacity-0"
-     class="fixed inset-0 z-[9999] flex items-center justify-center bg-slate-900/60 backdrop-blur-md"
-     style="display: none;"
-     x-cloak>
+     class="global-loading-screen fixed inset-0 z-[9999] flex items-center justify-center bg-slate-900/60 backdrop-blur-md">
     <div class="relative flex flex-col items-center animate-luxury-in">
         <!-- Logo with Spinner Animation -->
         <div class="relative w-28 h-28 mb-10 flex items-center justify-center">
diff --git a/resources/views/layouts/admin.blade.php b/resources/views/layouts/admin.blade.php
index d40f317..165bfc3 100644
--- a/resources/views/layouts/admin.blade.php
+++ b/resources/views/layouts/admin.blade.php
@@ -33,6 +33,13 @@
         };
         window.applyAdminSidebarLayout(localStorage.getItem('sidebarCollapsed') === 'true');
     </script>
+    <style>
+        html.admin-page-transitioning .admin-content-shell {
+            opacity: 0.45;
+            filter: blur(1px);
+            pointer-events: none;
+        }
+    </style>
     @vite(['resources/css/app.css', 'resources/js/app.js'])
 </head>
 
@@ -57,13 +64,13 @@
     <script>
         (() => {
             const topLoadingBar = () => document.getElementById('top-loading-bar');
-            const showPageLoading = () => {
-                topLoadingBar()?.classList.remove('loading');
-                window.dispatchEvent(new CustomEvent('show-global-loading'));
+            const showNavigationLoading = () => {
+                topLoadingBar()?.classList.add('loading');
+                document.documentElement.classList.add('admin-page-transitioning');
             };
-            const hidePageLoading = () => {
+            const hideNavigationLoading = () => {
                 topLoadingBar()?.classList.remove('loading');
-                window.dispatchEvent(new CustomEvent('hide-global-loading'));
+                document.documentElement.classList.remove('admin-page-transitioning');
             };
             const shouldShowPageLoading = (event, link) => {
                 if (
@@ -102,11 +109,11 @@
                     return;
                 }
 
-                showPageLoading();
+                showNavigationLoading();
             });
 
-            window.addEventListener('beforeunload', showPageLoading);
-            window.addEventListener('pageshow', hidePageLoading);
+            window.addEventListener('beforeunload', showNavigationLoading);
+            window.addEventListener('pageshow', hideNavigationLoading);
         })();
     </script>
 
@@ -495,7 +502,7 @@
     <!-- End Sidebar -->
 
     <!-- Content -->
-    <div class="w-full pt-4 lg:pt-5 pb-12 px-4 sm:px-6 md:px-8 lg:pl-[var(--admin-sidebar-offset)]">
+    <div class="admin-content-shell w-full pt-4 lg:pt-5 pb-12 px-4 sm:px-6 md:px-8 lg:pl-[var(--admin-sidebar-offset)] transition-opacity duration-200">
         <x-breadcrumbs class="mb-4 hidden lg:flex" />
         <main>
             @yield('content')