[PROMOTE] 晉升 dev 動畫體驗優化變更至 demo 環境

1. 晉升提交 5db796b：再度提升後台頁面轉場與登場 Loading 微動畫體驗。
   - loading 設為預設開啟，利用 requestAnimationFrame 與微延遲實現流暢的登場淡出。
   - 點擊跳轉時使主內容漸變為半透明與微模糊，提供 SPA 級別的跳轉微過渡體驗。
   - 防止重複點擊並解除事件衝突。

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"
+     class="global-loading-screen fixed inset-0 z-[9999] flex items-center justify-center bg-slate-900/60 backdrop-blur-md">
-     style="display: none;"
-     x-cloak>
     <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">

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 = () => {
+            const showNavigationLoading = () => {
-                topLoadingBar()?.classList.remove('loading');
+                topLoadingBar()?.classList.add('loading');
-                window.dispatchEvent(new CustomEvent('show-global-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('beforeunload', showNavigationLoading);
-            window.addEventListener('pageshow', hidePageLoading);
+            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')