feat(website): 优化网站的移动端适配，提升手机浏览体验

Author: CC11001100

office-website/src/components/Header/Header.module.css

@@ -133,4 +133,93 @@
 .starCount {
   font-weight: 500;
   color: #2563eb;
+}
+
+/* 移动端导航按钮 */
+.mobileNavToggle {
+  display: none;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 30px;
+  height: 21px;
+  cursor: pointer;
+  z-index: 200;
+}
+
+.mobileNavToggle span {
+  display: block;
+  height: 3px;
+  width: 100%;
+  background-color: #2563eb;
+  border-radius: 3px;
+  transition: all 0.3s ease;
+}
+
+/* 移动端适配 */
+@media (max-width: 768px) {
+  .container {
+    padding: 0 1rem;
+  }
+
+  .nav {
+    justify-content: space-between;
+  }
+
+  .navLinks {
+    position: fixed;
+    top: 0;
+    right: -100%;
+    height: 100vh;
+    width: 250px;
+    background-color: rgba(255, 255, 255, 0.98);
+    backdrop-filter: blur(10px);
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 2rem;
+    transition: all 0.3s ease;
+    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
+    z-index: 150;
+    padding: 5rem 2rem;
+  }
+
+  .navLinks.open {
+    right: 0;
+  }
+
+  .mobileNavToggle {
+    display: flex;
+  }
+
+  .mobileNavToggle.open span:nth-child(1) {
+    transform: translateY(9px) rotate(45deg);
+  }
+
+  .mobileNavToggle.open span:nth-child(2) {
+    opacity: 0;
+  }
+
+  .mobileNavToggle.open span:nth-child(3) {
+    transform: translateY(-9px) rotate(-45deg);
+  }
+
+  .githubBadge {
+    margin-left: auto;
+    padding: 0.4rem 0.75rem;
+    font-size: 0.75rem;
+  }
+
+  .githubBadge span:nth-child(2) {
+    display: none; /* 隐藏"GitHub"文字 */
+  }
+
+  .logo {
+    font-size: 1.1rem;
+    margin-right: 0;
+  }
+
+  .logo img {
+    width: 28px;
+    height: 28px;
+  }
 } 

office-website/src/components/Header/index.tsx

@@ -14,6 +14,19 @@ interface HeaderProps {
 const Header: React.FC<HeaderProps> = ({ activeSection }): JSX.Element => {
   const { t } = useTranslation();
   const [star, setStar] = useState<number | null>(null);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  // 当菜单打开时禁止页面滚动
+  useEffect(() => {
+    if (isMenuOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'auto';
+    }
+    return () => {
+      document.body.style.overflow = 'auto';
+    };
+  }, [isMenuOpen]);
 
   useEffect(() => {
     const now = Date.now();
@@ -34,6 +47,11 @@ const Header: React.FC<HeaderProps> = ({ activeSection }): JSX.Element => {
     }
   }, []);
 
+  // 关闭菜单的处理函数
+  const handleNavLinkClick = () => {
+    setIsMenuOpen(false);
+  };
+
   return (
     <header className={`${styles.header} ${activeSection === 'scrolled' ? styles.scrolled : ''}`}>
       <div className={`container ${styles.container}`}>
@@ -42,28 +60,32 @@ const Header: React.FC<HeaderProps> = ({ activeSection }): JSX.Element => {
             <img src="logo.png" alt="AST Explorer Helper" />
             {t('title')}
           </a>
-          <div className={styles.navLinks}>
+          <div className={`${styles.navLinks} ${isMenuOpen ? styles.open : ''}`}>
             <a
               href="#home"
               className={`${styles.navLink} ${activeSection === 'home' ? styles.active : ''}`}
+              onClick={handleNavLinkClick}
             >
               {t('nav.home')}
             </a>
             <a
               href="#features"
               className={`${styles.navLink} ${activeSection === 'features' ? styles.active : ''}`}
+              onClick={handleNavLinkClick}
             >
               {t('nav.features')}
             </a>
             <a
               href="#install"
               className={`${styles.navLink} ${activeSection === 'install' ? styles.active : ''}`}
+              onClick={handleNavLinkClick}
             >
               {t('nav.install')}
             </a>
             <a
               href="#community"
               className={`${styles.navLink} ${activeSection === 'community' ? styles.active : ''}`}
+              onClick={handleNavLinkClick}
             >
               {t('nav.community')}
             </a>
@@ -96,6 +118,14 @@ const Header: React.FC<HeaderProps> = ({ activeSection }): JSX.Element => {
             <span>{star !== null ? star : '--'}</span>
           </a>
           <LanguageSwitcher />
+          <div 
+            className={`${styles.mobileNavToggle} ${isMenuOpen ? styles.open : ''}`}
+            onClick={() => setIsMenuOpen(!isMenuOpen)}
+          >
+            <span></span>
+            <span></span>
+            <span></span>
+          </div>
         </nav>
       </div>
     </header>

office-website/src/index.html

@@ -2,7 +2,7 @@
 <html>
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <title>AST Explorer Helper - Make AST analysis simpler</title>
     <meta name="description" content="AST Explorer Helper is a simple and practical browser plugin used to enhance the user experience of the AST Explorer website.">
     <link rel="icon" href="/favicon.ico" />

office-website/src/pages/Home/Home.module.css

@@ -487,6 +487,11 @@
   .ctaButtons {
     flex-direction: column;
     gap: var(--space-3);
+    width: 100%;
+  }
+
+  .ctaButtons a {
+    width: 100%;
   }
 
   .featureGrid {
@@ -496,6 +501,102 @@
   .step {
     padding: var(--space-4);
   }
+  
+  :global(.btn) {
+    width: 100%;
+    padding: 0.75rem 1.5rem;
+  }
+  
+  .featureItem {
+    padding: var(--space-4);
+  }
+  
+  .featureHeader {
+    flex-direction: column;
+    align-items: flex-start;
+    text-align: left;
+  }
+  
+  .featureIcon {
+    margin-bottom: var(--space-3);
+    margin-right: 0;
+  }
+  
+  .reasons {
+    grid-template-columns: 1fr;
+    gap: var(--space-4);
+    margin-top: var(--space-6);
+    padding: 0 var(--space-3);
+  }
+  
+  .reason {
+    padding: var(--space-4);
+  }
+  
+  .communityGrid {
+    grid-template-columns: 1fr;
+    gap: var(--space-4);
+    padding: 0 var(--space-3);
+  }
+  
+  .communityItem {
+    padding: var(--space-4);
+  }
+  
+  .qrcode {
+    width: 180px;
+    height: 180px;
+  }
+  
+  .hero {
+    min-height: auto;
+    padding-top: calc(var(--header-height) + var(--space-6));
+    padding-bottom: var(--space-6);
+  }
+  
+  .heroContent {
+    padding: 0 var(--space-3);
+  }
+  
+  .title {
+    font-size: clamp(2rem, 8vw, 3rem);
+  }
+  
+  .subtitle {
+    font-size: clamp(1rem, 4vw, 1.25rem);
+  }
+}
+
+@media (max-width: 480px) {
+  .featureDemoWrapper {
+    margin-top: 10px;
+  }
+  
+  .step p, .step ol, .step ul, .browserOptions, .installMethods {
+    margin-left: 0;
+  }
+  
+  .stepTitle {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .stepNumber {
+    margin-bottom: var(--space-2);
+  }
+  
+  .installSteps::before {
+    display: none;
+  }
+  
+  .contributorItem {
+    padding: var(--space-3);
+  }
+  
+  .contributorAvatar {
+    width: 80px;
+    height: 80px;
+  }
 }
 
 /* 为什么使用部分 */