diff --git a/web/_includes/nav.njk b/web/_includes/nav.njk index 4e01709..6147f7b 100644 --- a/web/_includes/nav.njk +++ b/web/_includes/nav.njk @@ -13,5 +13,18 @@ + + + diff --git a/web/assets/docs.css b/web/assets/docs.css index 3d41bca..7eac707 100644 --- a/web/assets/docs.css +++ b/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; } +} diff --git a/web/assets/nav.js b/web/assets/nav.js index e68d26e..8f6400f 100644 --- a/web/assets/nav.js +++ b/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 @@ + '' + '' + ''; + if (mobileCta) { + mobileCta.innerHTML = + '进入管理端' + + ''; + } } else { cta.innerHTML = '登录' + '免费试用'; + if (mobileCta) { + mobileCta.innerHTML = + '登录' + + '注册门店'; + } } 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) { diff --git a/web/assets/style.css b/web/assets/style.css index d527ed7..1f12634 100644 --- a/web/assets/style.css +++ b/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); } } diff --git a/web/download.njk b/web/download.njk index f363568..399ad92 100644 --- a/web/download.njk +++ b/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; } + } --- diff --git a/web/features/approval.html b/web/features/approval.html index fd3e80e..20e16b9 100644 --- a/web/features/approval.html +++ b/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; } +} @@ -914,11 +936,25 @@ footer { background: var(--gray-25); border-top: 1px solid var(--border-subtle); + + + @@ -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'); + }); + }); }); diff --git a/web/features/inventory.html b/web/features/inventory.html index b545e13..7a5b6ab 100644 --- a/web/features/inventory.html +++ b/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; } +} @@ -657,11 +678,25 @@ footer { background: var(--gray-25); border-top: 1px solid var(--border-subtle); + + + @@ -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'); + }); + }); }); diff --git a/web/index.njk b/web/index.njk index 05fba6a..610dc59 100644 --- a/web/index.njk +++ b/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; } +}