feat: optimize page loading with dynamic loading screen

shenghuo2 · shenghuo2 · commit 8b2632290ce4 · 2025-03-13T22:02:52.000+08:00
diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro
@@ -6,9 +6,30 @@ import logo from '../assets/logo.svg';
 interface Props {
   title: string;
   description?: string;
+  pageType?: 'index' | 'members' | 'honors';
 }
 
-const { title, description = "Official website of N0wayBack Team" } = Astro.props;
+const { 
+  title, 
+  description = "Official website of N0wayBack Team",
+  pageType = 'index'
+} = Astro.props as Props;
+
+// 根据页面类型设置不同的加载消息和速度
+const loadingMessages: Record<string, string[]> = {
+  index: ['SYSTEM INITIALIZATION...', 'LOADING CORE MODULES...', 'ESTABLISHING SECURE CONNECTION...', 'SYSTEM READY'],
+  members: ['LOADING TEAM DATA...', 'DECRYPTING PROFILES...', 'TEAM READY'],
+  honors: ['RETRIEVING ACHIEVEMENTS...', 'COMPILING RECORDS...', 'DATA READY']
+};
+
+const loadingSpeed: Record<string, number> = {
+  index: 200, // 较慢
+  members: 100, // 较快
+  honors: 80 // 最快
+};
+
+const messages = loadingMessages[pageType];
+const speed = loadingSpeed[pageType];
 ---
 
 <!DOCTYPE html>
@@ -37,15 +58,46 @@ const { title, description = "Official website of N0wayBack Team" } = Astro.prop
         localStorage.setItem('theme', theme);
       }
     </script>
+    
+    <!-- 将页面类型和加载消息传递给JavaScript -->
+    <script define:vars={{ pageType, messages, speed }}>
+      // 将变量存储在window对象上，以便在DOMContentLoaded事件中使用
+      window.pageConfig = {
+        pageType: pageType,
+        messages: messages,
+        speed: speed
+      };
+    </script>
   </head>
   <body class="bg-primary-light dark:bg-primary-dark text-light-light dark:text-light-dark min-h-screen terminal-boot">
+    <!-- 加载动画 -->
+    <div id="loading-screen" class="loading-screen">
+      <div class="loading-container">
+        <div class="loading-logo">N0wayBack</div>
+        <div class="loading-bar-container">
+          <div class="loading-bar"></div>
+        </div>
+        <div class="loading-text">{messages[0]}</div>
+      </div>
+    </div>
+    
     <Navbar />
     <main class="fade-in">
       <slot />
     </main>
     <Footer />
     
     <script>
+      declare global {
+        interface Window {
+          pageConfig?: {
+            pageType: string;
+            messages: string[];
+            speed: number;
+          }
+        }
+      }
+      
       document.addEventListener('DOMContentLoaded', () => {
         // 从 localStorage 中获取用户的主题选择
         const currentTheme = localStorage.getItem('theme');
@@ -61,10 +113,51 @@ const { title, description = "Official website of N0wayBack Team" } = Astro.prop
           localStorage.setItem('theme', 'dark');
         }
 
-        // 添加终端启动效果
-        setTimeout(() => {
-          document.body.classList.add('terminal-booted');
-        }, 500);
+        // 获取页面配置
+        const { messages, speed } = window.pageConfig || {
+          messages: ['LOADING...', 'READY'],
+          speed: 200
+        };
+
+        // 增强的终端启动效果
+        const loadingScreen = document.getElementById('loading-screen');
+        const loadingBar = document.querySelector('.loading-bar') as HTMLElement;
+        const loadingText = document.querySelector('.loading-text') as HTMLElement;
+        
+        // 确保元素存在
+        if (loadingScreen && loadingBar && loadingText) {
+          // 模拟加载进度
+          let progress = 0;
+          let messageIndex = 0;
+          const interval = setInterval(() => {
+            progress += Math.random() * 15;
+            if (progress >= 100) {
+              progress = 100;
+              clearInterval(interval);
+              
+              // 显示完成消息
+              loadingText.textContent = messages[messages.length - 1];
+              
+              // 延迟后隐藏加载屏幕
+              setTimeout(() => {
+                loadingScreen.classList.add('loaded');
+                document.body.classList.add('terminal-booted');
+              }, 500);
+            }
+            
+            // 更新加载条
+            loadingBar.style.width = `${progress}%`;
+            
+            // 更新加载消息
+            if (progress > 30 && progress < 60 && messageIndex === 0) {
+              messageIndex = 1;
+              loadingText.textContent = messages[messageIndex];
+            } else if (progress >= 60 && progress < 90 && messageIndex === 1 && messages.length > 2) {
+              messageIndex = 2;
+              loadingText.textContent = messages[messageIndex];
+            }
+          }, speed);
+        }
       });
     </script>
   </body>
@@ -129,4 +222,71 @@ const { title, description = "Official website of N0wayBack Team" } = Astro.prop
     from { opacity: 0; transform: translateY(10px); }
     to { opacity: 1; transform: translateY(0); }
   }
+  
+  /* 加载动画 */
+  .loading-screen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #000;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+    transition: opacity 0.5s ease;
+  }
+  
+  .loading-container {
+    text-align: center;
+    width: 300px;
+    padding: 20px;
+    border: 1px solid rgba(0, 158, 127, 0.5);
+    border-radius: 4px;
+    background-color: rgba(0, 0, 0, 0.8);
+    box-shadow: 0 0 20px rgba(0, 158, 127, 0.3);
+  }
+  
+  .loading-logo {
+    font-family: 'Fira Code', monospace;
+    font-size: 28px;
+    font-weight: bold;
+    color: #fff;
+    margin-bottom: 20px;
+    text-shadow: 0 0 10px rgba(0, 158, 127, 0.7);
+    letter-spacing: 2px;
+  }
+  
+  .loading-bar-container {
+    width: 100%;
+    height: 10px;
+    background: #111;
+    border-radius: 5px;
+    margin: 0 auto;
+    margin-bottom: 20px;
+    overflow: hidden;
+    border: 1px solid rgba(0, 158, 127, 0.3);
+  }
+  
+  .loading-bar {
+    width: 0%;
+    height: 100%;
+    background: linear-gradient(90deg, #009e7f, #00d6a4);
+    border-radius: 5px;
+    transition: width 0.2s ease;
+    box-shadow: 0 0 10px rgba(0, 158, 127, 0.7);
+  }
+  
+  .loading-text {
+    font-family: 'Fira Code', monospace;
+    font-size: 16px;
+    color: #fff;
+    letter-spacing: 1px;
+  }
+  
+  .loaded {
+    opacity: 0;
+    pointer-events: none;
+  }
 </style>
diff --git a/src/pages/honors.astro b/src/pages/honors.astro
@@ -19,7 +19,7 @@ const honorsByYear = sortedHonors.reduce((acc, honor) => {
 const years = Object.keys(honorsByYear).map(Number).sort((a, b) => b - a);
 ---
 
-<MainLayout title="Honors">
+<MainLayout title="Honors & Achievements" pageType="honors">
   <div class="cyberpunk-grid"></div>
   
   <section class="py-8 md:py-16">
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -4,7 +4,7 @@ import logo from '../assets/logo.svg';
 import logoOrigin from '../assets/logo-origin.webp';
 ---
 
-<MainLayout title="Home">
+<MainLayout title="Home" pageType="index">
   <div class="cyberpunk-grid"></div>
   
   <section class="py-8 md:py-16 min-h-[80vh] flex items-center">
diff --git a/src/pages/members.astro b/src/pages/members.astro
@@ -21,7 +21,7 @@ if (pioneerMembers.length === 0) {
 }
 ---
 
-<MainLayout title="Team Members">
+<MainLayout title="Team Members" pageType="members">
   <div class="cyberpunk-grid"></div>
   
   <section class="py-8 md:py-16">

Original file line number	Diff line number	Diff line change
`@@ -21,7 +21,7 @@ if (pioneerMembers.length === 0) {`
`21`	`21`	`}`
`22`	`22`	`---`
`23`	`23`
`24`		`-<MainLayout title="Team Members">`
	`24`	`+<MainLayout title="Team Members" pageType="members">`
`25`	`25`	`<div class="cyberpunk-grid"></div>`
`26`	`26`
`27`	`27`	`<section class="py-8 md:py-16">`