三端自适应布局与 PWA 可安装支持

新增响应式样式、手机侧滑导航、manifest 与 Service Worker；补充根路径重定向与安装 App 入口。 Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-15 16:58:13 +08:00
parent e8b4dbbaca
commit 28875078f1
11 changed files with 785 additions and 17 deletions
@@ -0,0 +1,53 @@
+(function () {
+    var toggle = document.getElementById('nav-toggle');
+    var nav = document.getElementById('site-nav');
+    var backdrop = document.getElementById('nav-backdrop');
+    if (!toggle || !nav) return;
+
+    function openNav() {
+        nav.classList.add('open');
+        if (backdrop) {
+            backdrop.hidden = false;
+            backdrop.classList.add('show');
+        }
+        toggle.setAttribute('aria-expanded', 'true');
+        document.body.style.overflow = 'hidden';
+    }
+
+    function closeNav() {
+        nav.classList.remove('open');
+        if (backdrop) {
+            backdrop.classList.remove('show');
+            backdrop.hidden = true;
+        }
+        toggle.setAttribute('aria-expanded', 'false');
+        document.body.style.overflow = '';
+    }
+
+    function isMobileNav() {
+        return window.matchMedia('(max-width: 767px)').matches;
+    }
+
+    toggle.addEventListener('click', function () {
+        if (nav.classList.contains('open')) closeNav();
+        else openNav();
+    });
+
+    if (backdrop) {
+        backdrop.addEventListener('click', closeNav);
+    }
+
+    nav.querySelectorAll('a').forEach(function (link) {
+        link.addEventListener('click', function () {
+            if (isMobileNav()) closeNav();
+        });
+    });
+
+    window.addEventListener('resize', function () {
+        if (!isMobileNav()) closeNav();
+    });
+
+    document.addEventListener('keydown', function (e) {
+        if (e.key === 'Escape') closeNav();
+    });
+})();