fix(layout): 修复 GitHub Pages 布局溢出和样式一致性问题

- 移除全局 margin/padding 重置，避免与组件样式冲突
- 在 html/body/#root 添加 overflow-x: clip 防止绝对定位元素撑宽文档
- 新增 .landing-shell 和 .landing-center 工具类统一容器宽度和内边距
- 重构所有 Landing 组件使用新工具类替代重复的 max-w-7xl + px-* 样式
- 修复 HeroSection 粒子动画使用预计算位置，防止 hydration 抖动
- 修复文档链接指向完

Author: LessUp

index.html

@@ -151,8 +151,6 @@
       *::before,
       *::after {
         box-sizing: border-box;
-        margin: 0;
-        padding: 0;
       }
 
       html {
@@ -169,12 +167,14 @@
         -moz-osx-font-smoothing: grayscale;
         text-rendering: optimizeLegibility;
         scroll-behavior: smooth;
+        overflow-x: hidden;
       }
 
       body {
         min-height: 100vh;
         min-height: 100dvh; /* 动态视口高度 */
         width: 100%;
+        max-width: 100vw;
         background: #0a0a0a;
         color: #fafafa;
         overflow-x: hidden;

src/App.tsx

@@ -1,4 +1,4 @@
-import { HashRouter as Router, Routes, Route } from 'react-router-dom';
+import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
 import { Suspense, lazy } from 'react';
 import ErrorBoundary from '@/components/ui/ErrorBoundary';
 import LoadingSpinner from '@/components/ui/LoadingSpinner';
@@ -30,6 +30,9 @@ export default function App() {
             <Route path="/app" element={<AdvancedDigitalHumanPage />} />
             <Route path="/advanced" element={<AdvancedDigitalHumanPage />} />
             <Route path="/digital-human" element={<DigitalHumanPage />} />
+
+            {/* Fallback - 防止未知 hash 路径导致空白页 */}
+            <Route path="*" element={<Navigate to="/" replace />} />
           </Routes>
         </Suspense>
       </Router>

src/components/landing/CTASection.tsx

@@ -10,8 +10,8 @@ export default function CTASection() {
         <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[min(600px,80vw)] h-[min(600px,80vh)] bg-blue-600/10 rounded-full blur-[100px]" />
       </div>
 
-      <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="grid gap-10 lg:grid-cols-[minmax(0,1.05fr)_minmax(0,0.95fr)] lg:items-start">
+      <div className="landing-shell relative z-10">
+        <div className="landing-center max-w-5xl grid gap-10 lg:grid-cols-[minmax(0,1.05fr)_minmax(0,0.95fr)] lg:items-start">
           {/* Left: CTA Content */}
           <div>
             <h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">

src/components/landing/FeaturesSection.tsx

@@ -74,7 +74,7 @@ export default function FeaturesSection() {
         }}
       />
 
-      <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div className="landing-shell relative z-10">
         {/* Section Header */}
         <div className="text-center max-w-3xl mx-auto mb-16">
           <h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
@@ -92,7 +92,7 @@ export default function FeaturesSection() {
           {features.map((feature, index) => (
             <div
               key={feature.title}
-              className={`group relative flex h-full flex-col rounded-2xl border p-6 backdrop-blur-sm transition-all duration-300 hover:scale-[1.02] hover:shadow-xl ${feature.borderColor} ${feature.bgColor}`}
+              className={`group relative flex flex-col rounded-2xl border p-6 backdrop-blur-sm transition-all duration-300 hover:scale-[1.02] hover:shadow-xl ${feature.borderColor} ${feature.bgColor}`}
               style={{
                 animationDelay: `${index * 100}ms`,
               }}
@@ -130,7 +130,7 @@ export default function FeaturesSection() {
             { value: '60+', label: 'FPS 流畅渲染' },
             { value: '468', label: '面部关键点' },
             { value: '<100ms', label: '首字响应延迟' },
-            { value: '0', label: '配置即开即用' },
+            { value: '0 配置', label: '开箱即用' },
           ].map((stat) => (
             <div key={stat.label} className="text-center">
               <div className="text-3xl sm:text-4xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">

src/components/landing/Footer.tsx

@@ -54,7 +54,7 @@ export default function Footer() {
 
   return (
     <footer className="relative bg-[#050508] border-t border-white/5">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+      <div className="landing-shell py-12">
         <div className="mb-12 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
           {/* Brand */}
           <div className="sm:col-span-2 lg:col-span-1">

src/components/landing/HeroSection.tsx

@@ -7,6 +7,30 @@ const highlights = [
   { icon: Shield, label: '生产级品质' },
 ];
 
+// 预计算粒子位置，避免 Math.random() 导致每次渲染不一致（hydration 抖动）
+const PARTICLES = [
+  { left: '8%',  top: '12%', delay: '0s',    duration: '2.8s' },
+  { left: '23%', top: '5%',  delay: '0.4s',  duration: '3.5s' },
+  { left: '41%', top: '18%', delay: '1.1s',  duration: '2.2s' },
+  { left: '67%', top: '8%',  delay: '0.7s',  duration: '4.0s' },
+  { left: '85%', top: '22%', delay: '1.8s',  duration: '3.1s' },
+  { left: '92%', top: '45%', delay: '0.3s',  duration: '2.5s' },
+  { left: '78%', top: '62%', delay: '2.2s',  duration: '3.8s' },
+  { left: '55%', top: '78%', delay: '0.9s',  duration: '2.9s' },
+  { left: '31%', top: '85%', delay: '1.5s',  duration: '4.2s' },
+  { left: '12%', top: '68%', delay: '0.6s',  duration: '3.3s' },
+  { left: '4%',  top: '40%', delay: '2.0s',  duration: '2.7s' },
+  { left: '19%', top: '55%', delay: '1.3s',  duration: '3.6s' },
+  { left: '48%', top: '35%', delay: '0.2s',  duration: '2.4s' },
+  { left: '73%', top: '28%', delay: '1.7s',  duration: '4.1s' },
+  { left: '88%', top: '72%', delay: '0.8s',  duration: '3.0s' },
+  { left: '62%', top: '90%', delay: '2.5s',  duration: '2.6s' },
+  { left: '35%', top: '48%', delay: '1.0s',  duration: '3.9s' },
+  { left: '16%', top: '32%', delay: '0.5s',  duration: '2.3s' },
+  { left: '94%', top: '15%', delay: '1.9s',  duration: '4.3s' },
+  { left: '50%', top: '60%', delay: '0.1s',  duration: '3.2s' },
+];
+
 export default function HeroSection() {
   return (
     <section className="relative min-h-screen flex items-center justify-center overflow-hidden">
@@ -27,24 +51,24 @@ export default function HeroSection() {
       <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[min(800px,100vw)] h-[min(800px,100vh)] bg-blue-600/10 rounded-full blur-[120px]" />
       <div className="absolute top-1/4 right-1/4 w-[min(400px,50vw)] h-[min(400px,50vh)] bg-purple-600/10 rounded-full blur-[100px]" />
 
-      {/* Floating Particles */}
-      <div className="absolute inset-0 overflow-hidden">
-        {[...Array(20)].map((_, i) => (
+      {/* Floating Particles - 固定预计算位置，防止 hydration 抖动 */}
+      <div className="absolute inset-0 overflow-hidden" aria-hidden="true">
+        {PARTICLES.map((p, i) => (
           <div
             key={i}
             className="absolute w-1 h-1 bg-blue-400/30 rounded-full animate-pulse"
             style={{
-              left: `${Math.random() * 100}%`,
-              top: `${Math.random() * 100}%`,
-              animationDelay: `${Math.random() * 3}s`,
-              animationDuration: `${2 + Math.random() * 3}s`,
+              left: p.left,
+              top: p.top,
+              animationDelay: p.delay,
+              animationDuration: p.duration,
             }}
           />
         ))}
       </div>
 
       {/* Content */}
-      <div className="relative z-10 mx-auto w-full max-w-7xl px-4 pt-28 pb-20 sm:px-6 lg:px-8 lg:pt-24 lg:pb-16">
+      <div className="landing-shell relative z-10 pt-28 pb-20 lg:pt-24 lg:pb-16">
         <div className="grid items-center gap-10 lg:grid-cols-2 lg:gap-14">
           {/* Left: Text Content */}
           <div className="mx-auto max-w-2xl text-center lg:mx-0 lg:max-w-none lg:text-left">
@@ -80,7 +104,7 @@ export default function HeroSection() {
                 <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
               </Link>
               <a
-                href="docs/"
+                href="https://lessup.github.io/meta-human/docs/"
                 className="group inline-flex items-center justify-center gap-2 px-8 py-4 bg-white/5 hover:bg-white/10 text-white font-semibold rounded-xl border border-white/10 transition-all hover:border-white/20"
               >
                 <BookOpen className="w-5 h-5" />

src/components/landing/Navbar.tsx

@@ -39,7 +39,7 @@ export default function Navbar() {
           : 'bg-transparent'
       }`}
     >
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div className="landing-shell">
         <div className="flex items-center justify-between h-16">
           {/* Logo */}
           <Link to="/" className="flex items-center gap-2 group">
@@ -116,7 +116,7 @@ export default function Navbar() {
           isMobileMenuOpen ? 'max-h-96 opacity-100' : 'max-h-0 opacity-0'
         }`}
       >
-        <div className="mx-auto max-w-7xl space-y-3 border-t border-white/10 bg-black/95 px-4 py-4 backdrop-blur-lg">
+        <div className="landing-shell space-y-3 border-t border-white/10 bg-black/95 py-4 backdrop-blur-lg">
           {navLinks.map((link) =>
             link.external ? (
               <a

src/components/landing/TechStackSection.tsx

@@ -57,7 +57,7 @@ export default function TechStackSection() {
         <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[min(1000px,100vw)] h-[500px] bg-indigo-600/5 rounded-full blur-[100px]" />
       </div>
 
-      <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div className="landing-shell relative z-10">
         {/* Section Header */}
         <div className="text-center max-w-3xl mx-auto mb-16">
           <h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
@@ -69,30 +69,30 @@ export default function TechStackSection() {
         </div>
 
         {/* Architecture Diagram */}
-        <div className="mb-20">
+        <div className="landing-center mb-20 max-w-5xl">
           <div className="relative overflow-hidden rounded-3xl border border-white/10 bg-gradient-to-b from-white/[0.02] to-transparent p-6 sm:p-8">
             {/* Layers */}
-            <div className="grid gap-6">
+            <div className="grid gap-5">
               {techLayers.map((layer, index) => (
                 <div key={layer.title} className="relative">
                   {/* Connection Line */}
                   {index < techLayers.length - 1 && (
-                    <div className="absolute left-8 top-full w-px h-6 bg-gradient-to-b from-white/20 to-transparent" />
+                    <div className="absolute left-8 top-full w-px h-5 bg-gradient-to-b from-white/20 to-transparent" />
                   )}
 
-                  <div className="flex flex-col gap-4 rounded-xl border border-white/5 bg-white/[0.02] p-4 transition-colors hover:border-white/10 sm:flex-row sm:items-center sm:gap-6">
+                  <div className="flex flex-col gap-4 rounded-xl border border-white/5 bg-white/[0.02] p-4 transition-colors hover:border-white/10 sm:flex-row sm:items-center sm:gap-8">
                     {/* Layer Title */}
-                    <div className="sm:w-32 flex-shrink-0">
+                    <div className="sm:w-56 flex-shrink-0">
                       <h3 className="text-white font-semibold">{layer.title}</h3>
-                      <p className="text-xs text-gray-500">{layer.description}</p>
+                      <p className="text-xs text-gray-500 mt-0.5">{layer.description}</p>
                     </div>
 
                     {/* Tech Items */}
-                    <div className="flex flex-wrap gap-3">
+                    <div className="flex flex-1 flex-wrap gap-3">
                       {layer.items.map((item) => (
                         <div
                           key={item.name}
-                          className="flex items-center gap-2 px-3 py-2 rounded-lg bg-white/5 border border-white/10 hover:bg-white/10 transition-colors"
+                          className="flex items-center gap-2 px-4 py-2.5 rounded-lg bg-white/5 border border-white/10 hover:bg-white/10 transition-colors"
                         >
                           <item.icon className="w-5 h-5" style={{ color: item.color }} />
                           <span className="text-sm text-gray-300">{item.name}</span>
@@ -114,7 +114,7 @@ export default function TechStackSection() {
         </div>
 
         {/* Browser APIs */}
-        <div className="grid gap-8 lg:grid-cols-2 lg:items-start [&>*]:min-w-0">
+        <div className="landing-center max-w-5xl grid gap-8 lg:grid-cols-2 lg:items-start [&>*]:min-w-0">
           <div>
             <h3 className="text-xl font-semibold text-white mb-6">
               浏览器原生 API

src/index.css

@@ -52,19 +52,24 @@
     scroll-behavior: smooth;
     scroll-padding-top: 5rem;
     background-color: #000;
+    overflow-x: hidden;
+    overflow-x: clip;
   }
 
   html,
   body,
   #root {
     width: 100%;
+    max-width: 100%;
   }
 
   body {
     margin: 0;
     min-height: 100vh;
     width: 100%;
+    max-width: 100vw;
     overflow-x: hidden;
+    overflow-x: clip;
     background-color: #000;
     color: #fff;
   }
@@ -74,6 +79,7 @@
     min-height: 100dvh;
     max-width: 100vw;
     overflow-x: hidden;
+    overflow-x: clip;
     isolation: isolate;
   }
 
@@ -112,6 +118,30 @@
 }
 
 @layer components {
+  .landing-shell {
+    width: 100%;
+    max-width: 80rem;
+    margin-inline: auto;
+    padding-inline: 1rem;
+  }
+
+  @media (min-width: 640px) {
+    .landing-shell {
+      padding-inline: 1.5rem;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .landing-shell {
+      padding-inline: 2rem;
+    }
+  }
+
+  .landing-center {
+    width: 100%;
+    margin-inline: auto;
+  }
+
   .custom-scrollbar::-webkit-scrollbar {
     width: 4px;
   }

src/main.tsx

@@ -22,9 +22,10 @@ if (import.meta.env.DEV) {
       // HashRouter 使用 hash 来管理路由
       // 构建目标 hash 路径
       const targetHash = path || '/';
+      const allowedRoutes = new Set(['/', '/app', '/advanced', '/digital-human']);
 
       // 设置 hash 路由
-      if (targetHash !== '/') {
+      if (targetHash !== '/' && allowedRoutes.has(targetHash)) {
         window.location.hash = targetHash;
       }