upd: Adjust page layout and optimize mobile device detection logic

Author: ATRIOR-LCL

index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
     <link rel="icon" href="/favicon_mac.ico" />
+    <link rel="stylesheet" href="./src/client/index.less">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="为编程初学者而生">
     <title>Algo Bootstrap</title>

src/client/components/beams.vue

@@ -492,16 +492,22 @@ onMounted(async () => {
       gsap.registerPlugin(ScrollTrigger);
     }
 
-    gsap.to(".beams-container", {
-      scrollTrigger: {
-        trigger: ".beams-container",
-        start: "top top",
-        end: "bottom top",
-        scrub: 1,
+    // 设置滚动时的透明度变化：顶部时不透明度为1，向下滚动时降低到0.1
+    gsap.fromTo(".beams-container",
+      {
+        opacity: 1, // 初始状态：完全不透明
       },
-      opacity: .1,
-      duration: 1,
-    });
+      {
+        opacity: 0.1, // 结束状态：几乎透明
+        scrollTrigger: {
+          trigger: "body", // 以整个页面作为触发器
+          start: "top top", // 从页面顶部开始
+          end: "bottom top", // 到页面底部结束
+          scrub: true, // 跟随滚动
+          invalidateOnRefresh: true, // 刷新时重新计算
+        }
+      }
+    );
   }
 });
 
@@ -517,6 +523,8 @@ onUnmounted(() => {
   top: 0;
   width: 100%;
   height: 100%;
+  opacity: 1; /* 初始透明度为完全不透明 */
+  z-index: -1; /* 确保在其他内容后面 */
 }
 </style>
 

src/client/components/download-button.vue

@@ -16,10 +16,12 @@ export default class DownloadButton extends Vue {
   @Prop({ type: Boolean, default: false }) isHome: Boolean;
   @Prop({ type: String, required: true }) version!: string;
 
-  // 检测是否为移动设备
+  // 检测是否为移动设备 - 使用传入的平台信息而不是直接检测 userAgent
+  // 避免 SSR 水合不匹配问题
   get isMobileDevice(): boolean {
-    if (typeof navigator === 'undefined') return false;
-    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+    // 基于传入的平台信息判断，而不是 navigator.userAgent
+    // 只有 windows 和 mac 被认为是桌面平台
+    return this.platform !== 'windows' && this.platform !== 'mac';
   }
 
   get isSupportedPlatform(): boolean {
@@ -95,7 +97,7 @@ export default class DownloadButton extends Vue {
     <span class="download-all-platforms" v-if="isSupportedPlatform && isHome">
       下载 <router-link class="link" :to="{ name: 'Releases' }">其他平台</router-link> 版本
     </span>
-    <span class="download-all-platforms" v-if="isUnsupportedPlatform && isHome">仅支持 Windows 和 macOS.</span>
+    <span class="download-all-platforms" v-if="isUnsupportedPlatform && isHome">仅支持 Windows 和 macOS</span>
   </div>
 </template>
 

src/client/components/guide.vue

@@ -26,27 +26,22 @@ export default class Guide extends Vue {
     const videoContainer = this.$refs['guide-video'] as HTMLElement;
     const video = videoContainer?.querySelector('video') as HTMLVideoElement | null;
 
-    const textObserver = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            texts.forEach((text) => {
-              text.classList.add('text-show');
-            });
-            if (video && video.paused) {
-              video.play();
-            }
-          } else {
-            if (video && !video.paused) {
-              video.pause();
-            }
+    const textObserver = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          texts.forEach((text) => {
+            text.classList.add('text-show');
+          });
+          if (video && video.paused) {
+            video.play();
           }
-        });
-      },
-      {
-        threshold: 0.2,
-      },
-    );
+        } else {
+          if (video && !video.paused) {
+            video.pause();
+          }
+        }
+      });
+    });
 
     textObserver.observe(guide);
   }
@@ -86,7 +81,7 @@ export default class Guide extends Vue {
   }
 
   @media screen and (max-width: 768px) {
-    width: 80%;
+    width: 90%;
   }
   height: auto;
   display: flex;

src/client/components/home-footer.vue

@@ -53,11 +53,11 @@ footer {
   height: auto;
   margin-bottom: 50px;
   user-select: none;
+  margin-top: 60px;
 
   @media screen and (max-width: 768px) {
     height: auto;
     padding: 40px 0;
-    margin-top: 50px;
   }
   display: flex;
   flex-direction: column;