[DOCS] 更新 RBAC 實作規範與角色初始化流程建議

resources/views/components/loading-screen.blade.php

@@ -0,0 +1,51 @@
+<div x-data="{ 
+         loading: true 
+     }" 
+     x-init="
+         const urlParams = new URLSearchParams(window.location.search);
+         const simulateDelay = urlParams.get('simulate_loading');
+         const delay = simulateDelay ? parseInt(simulateDelay) : 300;
+         
+         const hideLoading = () => setTimeout(() => loading = false, delay);
+         
+         if (document.readyState === 'complete') {
+             hideLoading();
+         } else {
+             window.addEventListener('load', hideLoading);
+             // 安全保險：模擬模式下為 30 秒，正常模式下為 5 秒
+             const safetyTimeout = simulateDelay ? 30000 : 5000;
+             setTimeout(hideLoading, safetyTimeout);
+         }
+     "
+     x-show="loading"
+     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>
+    <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">
+            <!-- Luxury Rotating Ring -->
+            <div class="absolute inset-0 rounded-full border-2 border-transparent border-t-cyan-500 border-r-cyan-500/30 animate-spin" style="animation-duration: 1.5s;"></div>
+            <div class="absolute inset-2 rounded-full border border-white/5 animate-spin" style="animation-duration: 3s; direction: reverse;"></div>
+            
+            <!-- Glow Effect -->
+            <div class="absolute inset-0 rounded-full bg-cyan-500/10 blur-xl animate-pulse"></div>
+            
+            <!-- Central Logo -->
+            <div class="relative w-20 h-20 rounded-3xl bg-slate-900/80 backdrop-blur-xl border border-white/20 flex items-center justify-center shadow-2xl">
+                <span class="text-white text-5xl font-black font-display tracking-tighter">S</span>
+            </div>
+        </div>
+        
+        <!-- Text Animation -->
+        <div class="flex items-center gap-x-3 text-3xl font-bold text-white font-display tracking-tightest overflow-hidden mb-4">
+            <span class="animate-fade-in-right opacity-0" style="animation-delay: 100ms; animation-fill-mode: forwards;">Star</span>
+            <span class="text-cyan-400 animate-fade-in-right opacity-0" style="animation-delay: 300ms; animation-fill-mode: forwards;">Cloud</span>
+        </div>
+        
+        <p class="text-[10px] font-black text-white/30 uppercase tracking-[0.6em] animate-pulse">{{ __('Systems Initializing') }}</p>
+    </div>
+</div>