feat(web): 官网移动端适配

- 导航栏：≤768 隐藏横向链接，显示汉堡按钮；点击展开下拉菜单，含全部链接和 CTA
- 新增 ≤600 手机断点：footer 单列、grid 单列、container 内边距收窄、标题字号下调
- 首页：≤768 隐藏 Hero mock 预览（装饰性），≤600 CTA 按钮纵向排列
- features 页（库存/审批）：hamburger 导航、≤768 隐藏 composite 视觉、≤600 footer 单列
- 文档页（docs.css）：≤600 表格横向可滚
- 下载页：≤600 平台卡片单列排列

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

web/_includes/nav.njk

@@ -13,5 +13,18 @@
     <div class="topnav-cta" id="nav-cta">
       <a href="/register/" class="btn btn-primary btn-sm">注册门店</a>
     </div>
+    <button class="nav-hamburger" id="nav-hamburger" aria-label="菜单" aria-expanded="false">
+      <span></span><span></span><span></span>
+    </button>
+  </div>
+  <div class="nav-mobile-menu" id="nav-mobile-menu">
+    <a href="/#modules">产品</a>
+    <a href="/#pricing">价格</a>
+    <a href="/download/">下载</a>
+    <a href="/docs/">文档</a>
+    <a href="/#faq">支持</a>
+    <div class="nav-mobile-cta" id="nav-mobile-cta">
+      <a href="/register/" class="btn btn-primary">注册门店</a>
+    </div>
   </div>
 </nav>

web/assets/docs.css

@@ -345,3 +345,8 @@
   .docs-subnav-inner { padding: 10px 16px; }
   .docs-search { max-width: none; }
 }
+@media (max-width: 600px) {
+  .docs-layout { padding: 12px; }
+  .docs-main table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
+  .docs-toc { font-size: 13px; }
+}

web/assets/nav.js

@@ -23,16 +23,35 @@
     if (el) el.classList.toggle('open');
   }
 
-  // 点击外部关闭 dropdown
-  document.addEventListener('click', function(e) {
-    var menu = document.getElementById('userDropdown');
+  function toggleMobileMenu() {
+    var menu = document.getElementById('nav-mobile-menu');
+    var btn  = document.getElementById('nav-hamburger');
     if (!menu) return;
-    var navUser = menu.closest('.nav-user');
-    if (navUser && !navUser.contains(e.target)) menu.classList.remove('open');
+    var isOpen = menu.classList.toggle('open');
+    if (btn) btn.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
+  }
+
+  // 点击外部关闭 dropdown 和 mobile menu
+  document.addEventListener('click', function(e) {
+    var userMenu = document.getElementById('userDropdown');
+    if (userMenu) {
+      var navUser = userMenu.closest('.nav-user');
+      if (navUser && !navUser.contains(e.target)) userMenu.classList.remove('open');
+    }
+    var mobileMenu = document.getElementById('nav-mobile-menu');
+    var hamburger  = document.getElementById('nav-hamburger');
+    if (mobileMenu && hamburger) {
+      var topnav = mobileMenu.closest('nav');
+      if (topnav && !topnav.contains(e.target)) {
+        mobileMenu.classList.remove('open');
+        hamburger.setAttribute('aria-expanded', 'false');
+      }
+    }
   });
 
   function renderNav() {
     var cta = document.getElementById('nav-cta');
+    var mobileCta = document.getElementById('nav-mobile-cta');
     if (!cta) return;
     var user = getAuthUser();
     if (user) {
@@ -58,22 +77,47 @@
         +   '<div class="nav-dropdown-divider"></div>'
         +   '<button class="logout" onclick="doLogout()"><i data-lucide="log-out" class="icon"></i>退出登录</button>'
         + '</div></div>';
+      if (mobileCta) {
+        mobileCta.innerHTML =
+          '<a href="/app/" class="btn btn-ghost">进入管理端</a>'
+          + '<button class="btn btn-ghost" onclick="doLogout()">退出登录</button>';
+      }
     } else {
       cta.innerHTML =
         '<a href="/app/" class="btn btn-ghost">登录</a>'
         + '<a href="/app/" class="btn btn-primary">免费试用</a>';
+      if (mobileCta) {
+        mobileCta.innerHTML =
+          '<a href="/app/" class="btn btn-ghost">登录</a>'
+          + '<a href="/register/" class="btn btn-primary">注册门店</a>';
+      }
     }
     if (window.lucide) lucide.createIcons();
   }
 
   // 暴露给 onclick 调用
-  window.toggleUserMenu = toggleUserMenu;
+  window.toggleUserMenu  = toggleUserMenu;
+  window.toggleMobileMenu = toggleMobileMenu;
   window.doLogout = doLogout;
 
   document.addEventListener('DOMContentLoaded', function() {
     renderNav();
     if (window.lucide) lucide.createIcons();
 
+    var hamburger = document.getElementById('nav-hamburger');
+    if (hamburger) hamburger.addEventListener('click', toggleMobileMenu);
+
+    // 点击 mobile menu 链接后自动收起
+    var mobileMenu = document.getElementById('nav-mobile-menu');
+    if (mobileMenu) {
+      mobileMenu.querySelectorAll('a').forEach(function(a) {
+        a.addEventListener('click', function() {
+          mobileMenu.classList.remove('open');
+          if (hamburger) hamburger.setAttribute('aria-expanded', 'false');
+        });
+      });
+    }
+
     // 页内锚点平滑滚动
     document.querySelectorAll('a[href^="#"]').forEach(function(a) {
       a.addEventListener('click', function(e) {

web/assets/style.css

@@ -128,6 +128,41 @@ button { font-family: inherit; cursor: pointer; }
 .nav-dropdown-divider { height: 1px; background: var(--border-subtle); margin: 4px 0; }
 .nav-dropdown .logout { color: var(--danger-600); }
 
+/* Hamburger button (hidden on desktop) */
+.nav-hamburger {
+  display: none; flex-direction: column; justify-content: center; gap: 5px;
+  width: 40px; height: 40px; padding: 8px;
+  background: none; border: none; cursor: pointer;
+  border-radius: var(--radius-md);
+}
+.nav-hamburger span {
+  display: block; height: 2px; width: 22px;
+  background: var(--gray-700); border-radius: 2px;
+  transition: transform 0.2s, opacity 0.2s;
+}
+
+/* Mobile menu (hidden by default) */
+.nav-mobile-menu {
+  display: none; flex-direction: column;
+  background: var(--gray-0);
+  border-top: 1px solid var(--border-subtle);
+  padding: 8px 0 16px;
+}
+.nav-mobile-menu.open { display: flex; }
+.nav-mobile-menu a {
+  padding: 12px 24px; font-size: var(--text-md);
+  color: var(--gray-700); font-weight: 500;
+  transition: background var(--duration-fast) var(--ease-standard);
+}
+.nav-mobile-menu a:hover { background: var(--gray-50); color: var(--brand-900); }
+.nav-mobile-cta {
+  display: flex; flex-direction: column; gap: 8px;
+  padding: 12px 24px 0;
+  border-top: 1px solid var(--border-subtle);
+  margin-top: 8px;
+}
+.nav-mobile-cta .btn { justify-content: center; }
+
 /* -- Footer -- */
 footer {
   background: var(--gray-25);
@@ -456,4 +491,17 @@ footer {
 }
 @media (max-width: 768px) {
   .grid-3, .grid-4, .grid-5 { grid-template-columns: repeat(2, 1fr); }
+  /* Show hamburger, hide desktop nav links */
+  .nav-hamburger { display: flex; }
+  .topnav-links, .topnav-cta { display: none; }
+}
+@media (max-width: 600px) {
+  .topnav-inner { padding: 0 16px; }
+  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
+  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
+  .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
+  .container { padding: 0 16px; }
+  .section { padding-top: 48px; padding-bottom: 48px; }
+  h1, .h1 { font-size: clamp(1.75rem, 7vw, 2.5rem); }
+  h2, .h2 { font-size: clamp(1.375rem, 5vw, 2rem); }
 }

web/download.njk

@@ -246,6 +246,12 @@ pageStyle: |
     .dl-grid { grid-template-columns: repeat(2, 1fr); }
     .page-header { padding: 48px 0 40px; }
   }
+  @media (max-width: 600px) {
+    .ph-meta { flex-wrap: wrap; gap: 12px; }
+    .dl-grid { grid-template-columns: 1fr; }
+    .changelog { grid-template-columns: 1fr; }
+    .changelog-version { font-size: 13px; }
+  }
 ---
 
 <!-- ============================== PAGE HEADER ============================== -->

web/features/approval.html

@@ -902,6 +902,28 @@ footer { background: var(--gray-25); border-top: 1px solid var(--border-subtle);
   .perm-row { grid-template-columns: 130px repeat(4, 1fr); }
   .reversal-arrow { transform: rotate(90deg); padding: 16px 0; }
 }
+/* Hamburger */
+.nav-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 8px; background: none; border: none; cursor: pointer; border-radius: 8px; }
+.nav-hamburger span { display: block; height: 2px; width: 22px; background: var(--gray-700); border-radius: 2px; }
+.nav-mobile-menu { display: none; flex-direction: column; background: var(--gray-0); border-top: 1px solid var(--border-subtle); padding: 8px 0 16px; }
+.nav-mobile-menu.open { display: flex; }
+.nav-mobile-menu a { padding: 12px 24px; font-size: var(--text-md); color: var(--gray-700); font-weight: 500; }
+.nav-mobile-menu a:hover { background: var(--gray-50); color: var(--brand-900); }
+.nav-mobile-cta { display: flex; flex-direction: column; gap: 8px; padding: 12px 24px 0; border-top: 1px solid var(--border-subtle); margin-top: 8px; }
+@media (max-width: 768px) {
+  .nav-hamburger { display: flex; }
+  .topnav-links, .topnav-cta { display: none; }
+  .feat-hero-inner { grid-template-columns: 1fr; }
+}
+@media (max-width: 600px) {
+  .topnav-inner { padding: 0 16px; }
+  .feat-hero h1 { font-size: 28px; }
+  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
+  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
+  .usecases-grid { grid-template-columns: 1fr; }
+  .perm-row { overflow-x: auto; }
+  .container { padding: 0 16px; }
+}
 </style>
 </head>
 <body>
@@ -914,11 +936,25 @@ footer { background: var(--gray-25); border-top: 1px solid var(--border-subtle);
     <div class="topnav-links">
       <a href="/#modules" class="active">产品</a>
       <a href="/#pricing">价格</a>
-      <a href="/download.html">下载</a>
-      <a href="/docs.html">文档</a>
+      <a href="/download/">下载</a>
+      <a href="/docs/">文档</a>
       <a href="/#faq">支持</a>
     </div>
     <div class="topnav-cta" id="nav-cta"></div>
+    <button class="nav-hamburger" id="nav-hamburger" aria-label="菜单" aria-expanded="false">
+      <span></span><span></span><span></span>
+    </button>
+  </div>
+  <div class="nav-mobile-menu" id="nav-mobile-menu">
+    <a href="/#modules">产品</a>
+    <a href="/#pricing">价格</a>
+    <a href="/download/">下载</a>
+    <a href="/docs/">文档</a>
+    <a href="/#faq">支持</a>
+    <div class="nav-mobile-cta">
+      <a href="/app/" class="btn btn-ghost">登录</a>
+      <a href="/register/" class="btn btn-primary">注册门店</a>
+    </div>
   </div>
 </nav>
 
@@ -1696,6 +1732,13 @@ function toggleUserMenu() {
   var el = document.getElementById('userDropdown');
   if (el) el.classList.toggle('open');
 }
+function toggleMobileMenu() {
+  var menu = document.getElementById('nav-mobile-menu');
+  var btn  = document.getElementById('nav-hamburger');
+  if (!menu) return;
+  var isOpen = menu.classList.toggle('open');
+  if (btn) btn.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
+}
 function renderNav() {
   var cta = document.getElementById('nav-cta');
   if (!cta) return;
@@ -1737,6 +1780,15 @@ document.addEventListener('click', function(e) {
 document.addEventListener('DOMContentLoaded', function() {
   if (window.lucide) lucide.createIcons();
   renderNav();
+  var hamburger = document.getElementById('nav-hamburger');
+  if (hamburger) hamburger.addEventListener('click', toggleMobileMenu);
+  var mobileMenu = document.getElementById('nav-mobile-menu');
+  if (mobileMenu) mobileMenu.querySelectorAll('a').forEach(function(a) {
+    a.addEventListener('click', function() {
+      mobileMenu.classList.remove('open');
+      if (hamburger) hamburger.setAttribute('aria-expanded', 'false');
+    });
+  });
 });
 </script>
 

web/features/inventory.html

@@ -645,6 +645,27 @@ footer { background: var(--gray-25); border-top: 1px solid var(--border-subtle);
   .feat-hero h1 { font-size: 36px; }
   .composite { height: 480px; }
 }
+/* Hamburger */
+.nav-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 8px; background: none; border: none; cursor: pointer; border-radius: 8px; }
+.nav-hamburger span { display: block; height: 2px; width: 22px; background: var(--gray-700); border-radius: 2px; }
+.nav-mobile-menu { display: none; flex-direction: column; background: var(--gray-0); border-top: 1px solid var(--border-subtle); padding: 8px 0 16px; }
+.nav-mobile-menu.open { display: flex; }
+.nav-mobile-menu a { padding: 12px 24px; font-size: var(--text-md); color: var(--gray-700); font-weight: 500; }
+.nav-mobile-menu a:hover { background: var(--gray-50); color: var(--brand-900); }
+.nav-mobile-cta { display: flex; flex-direction: column; gap: 8px; padding: 12px 24px 0; border-top: 1px solid var(--border-subtle); margin-top: 8px; }
+@media (max-width: 768px) {
+  .nav-hamburger { display: flex; }
+  .topnav-links, .topnav-cta { display: none; }
+  .composite { display: none; }
+}
+@media (max-width: 600px) {
+  .topnav-inner { padding: 0 16px; }
+  .feat-hero h1 { font-size: 28px; }
+  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
+  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
+  .usecases-grid { grid-template-columns: 1fr; }
+  .container { padding: 0 16px; }
+}
 </style>
 </head>
 <body>
@@ -657,11 +678,25 @@ footer { background: var(--gray-25); border-top: 1px solid var(--border-subtle);
     <div class="topnav-links">
       <a href="/#modules" class="active">产品</a>
       <a href="/#pricing">价格</a>
-      <a href="/download.html">下载</a>
-      <a href="/docs.html">文档</a>
+      <a href="/download/">下载</a>
+      <a href="/docs/">文档</a>
       <a href="/#faq">支持</a>
     </div>
     <div class="topnav-cta" id="nav-cta"></div>
+    <button class="nav-hamburger" id="nav-hamburger" aria-label="菜单" aria-expanded="false">
+      <span></span><span></span><span></span>
+    </button>
+  </div>
+  <div class="nav-mobile-menu" id="nav-mobile-menu">
+    <a href="/#modules">产品</a>
+    <a href="/#pricing">价格</a>
+    <a href="/download/">下载</a>
+    <a href="/docs/">文档</a>
+    <a href="/#faq">支持</a>
+    <div class="nav-mobile-cta">
+      <a href="/app/" class="btn btn-ghost">登录</a>
+      <a href="/register/" class="btn btn-primary">注册门店</a>
+    </div>
   </div>
 </nav>
 
@@ -1410,6 +1445,13 @@ function toggleUserMenu() {
   var el = document.getElementById('userDropdown');
   if (el) el.classList.toggle('open');
 }
+function toggleMobileMenu() {
+  var menu = document.getElementById('nav-mobile-menu');
+  var btn  = document.getElementById('nav-hamburger');
+  if (!menu) return;
+  var isOpen = menu.classList.toggle('open');
+  if (btn) btn.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
+}
 function renderNav() {
   var cta = document.getElementById('nav-cta');
   if (!cta) return;
@@ -1451,6 +1493,15 @@ document.addEventListener('click', function(e) {
 document.addEventListener('DOMContentLoaded', function() {
   if (window.lucide) lucide.createIcons();
   renderNav();
+  var hamburger = document.getElementById('nav-hamburger');
+  if (hamburger) hamburger.addEventListener('click', toggleMobileMenu);
+  var mobileMenu = document.getElementById('nav-mobile-menu');
+  if (mobileMenu) mobileMenu.querySelectorAll('a').forEach(function(a) {
+    a.addEventListener('click', function() {
+      mobileMenu.classList.remove('open');
+      if (hamburger) hamburger.setAttribute('aria-expanded', 'false');
+    });
+  });
 });
 </script>
 

web/index.njk

@@ -170,6 +170,19 @@ details[open] .faq-q .icon { transform: rotate(45deg); }
   .hero h1 { font-size: 40px; }
   .roles-row { grid-template-columns: 140px 1fr repeat(4, 60px); padding: 12px 16px; }
 }
+@media (max-width: 768px) {
+  /* Hide decorative app preview on mobile to prevent overflow */
+  .preview-shell { display: none; }
+}
+@media (max-width: 600px) {
+  .hero h1 { font-size: 28px; }
+  .hero p.lead { font-size: var(--text-md); }
+  .hero-cta { flex-direction: column; }
+  .hero-cta .btn { width: 100%; justify-content: center; }
+  .module-card.feature-card { grid-column: span 1; }
+  .roles-row { grid-template-columns: 1fr; }
+  .roles-table .roles-row > *:nth-child(n+3) { display: none; }
+}
 </style>
 
 <!-- ====================== HERO ====================== -->