From cababd67f5f1cbb7e05b847ac61c0320295ce501 Mon Sep 17 00:00:00 2001
From: dekun <dekun@local>
Date: Fri, 26 Jun 2026 03:26:57 +0800
Subject: [PATCH] Reduce navigation flash with instant theme background and
 view transitions.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 static/css/tech.css | 18 ++++++++++++++++++
 static/js/nav.js    | 21 ++++++++++++++++++++-
 static/js/theme.js  |  4 ++++
 static/sw.js        |  2 +-
 templates/base.html | 11 ++++++++---
 5 files changed, 51 insertions(+), 5 deletions(-)

diff --git a/static/css/tech.css b/static/css/tech.css
index 6d235b4..7f32a7d 100644
--- a/static/css/tech.css
+++ b/static/css/tech.css
@@ -1,8 +1,25 @@
 /* Copyright (c) 2025-2026 马建军. All rights reserved. 专有软件，详见 LICENSE.zh-CN.txt */
 /* 科技感增强层 — 与 base.html 变量配合 */
 
+@view-transition {
+    navigation: auto;
+}
+
+::view-transition-old(app-main),
+::view-transition-new(app-main) {
+    animation-duration: .18s;
+}
+
+::view-transition-old(app-tech-bg),
+::view-transition-new(app-tech-bg),
+::view-transition-old(site-header),
+::view-transition-new(site-header) {
+    animation: none;
+}
+
 .tech-bg{
     position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
+    view-transition-name:app-tech-bg;
 }
 .tech-grid{
     position:absolute;inset:0;
@@ -59,6 +76,7 @@
     border-bottom:1px solid var(--border-header);
     background:transparent;
     backdrop-filter:none;
+    view-transition-name:site-header;
 }
 .site-header::after{
     content:"";display:block;height:1px;margin-top:-1px;
diff --git a/static/js/nav.js b/static/js/nav.js
index 71bb9df..d643240 100644
--- a/static/js/nav.js
+++ b/static/js/nav.js
@@ -41,10 +41,29 @@
         backdrop.addEventListener('click', closeNav);
     }
 
-    nav.querySelectorAll('a').forEach(function (link) {
+    function prefetchNav(href) {
+        if (!href || href.indexOf(window.location.origin) !== 0) return;
+        if (href === window.location.href) return;
+        var links = document.head.querySelectorAll('link[rel="prefetch"]');
+        for (var i = 0; i < links.length; i++) {
+            if (links[i].href === href) return;
+        }
+        var link = document.createElement('link');
+        link.rel = 'prefetch';
+        link.href = href;
+        document.head.appendChild(link);
+    }
+
+    nav.querySelectorAll('a[href]').forEach(function (link) {
         link.addEventListener('click', function () {
             if (isMobileNav()) closeNav();
         });
+        link.addEventListener('mouseenter', function () {
+            prefetchNav(link.href);
+        });
+        link.addEventListener('touchstart', function () {
+            prefetchNav(link.href);
+        }, { passive: true });
     });
 
     window.addEventListener('resize', function () {
diff --git a/static/js/theme.js b/static/js/theme.js
index 0b5396c..3a2de36 100644
--- a/static/js/theme.js
+++ b/static/js/theme.js
@@ -19,10 +19,14 @@
             theme = 'dark';
         }
         document.documentElement.setAttribute('data-theme', theme);
+        document.documentElement.style.colorScheme = theme;
+        document.documentElement.style.background = theme === 'light' ? '#e8eef8' : '#050508';
         try {
             localStorage.setItem(KEY, theme);
         } catch (e) { /* ignore */ }
         updateButtons(theme);
+        var meta = document.getElementById('meta-theme-color');
+        if (meta) meta.setAttribute('content', theme === 'light' ? '#e8eef8' : '#050508');
     }
 
     var saved = null;
diff --git a/static/sw.js b/static/sw.js
index fb5f74d..8d35917 100644
--- a/static/sw.js
+++ b/static/sw.js
@@ -2,7 +2,7 @@
  * 专有软件 — 未经授权禁止复制、传播、转售。
  * 详见 LICENSE.zh-CN.txt
  */
-var CACHE_VERSION = 'qihuo-v3';
+var CACHE_VERSION = 'qihuo-v4';
 var STATIC_CACHE = CACHE_VERSION + '-static';
 var STATIC_ASSETS = [
     '/static/css/tech.css',
diff --git a/templates/base.html b/templates/base.html
index a836588..b71360a 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -17,11 +17,17 @@
     <script>
     try {
         var _t = localStorage.getItem('qihuo-theme');
-        if (_t === 'light' || _t === 'dark') document.documentElement.setAttribute('data-theme', _t);
+        if (_t === 'light' || _t === 'dark') {
+            document.documentElement.setAttribute('data-theme', _t);
+            document.documentElement.style.colorScheme = _t;
+            document.documentElement.style.background = _t === 'light' ? '#e8eef8' : '#050508';
+        }
     } catch (e) { /* ignore */ }
     </script>
     <script src="{{ url_for('static', filename='js/theme.js') }}"></script>
     <style>
+        html{background:#050508;color-scheme:dark}
+        html[data-theme="light"]{background:#e8eef8;color-scheme:light}
         html:not([data-theme="light"]){
             --bg-page:#050508;
             --bg-grid:rgba(76,194,255,.045);
@@ -138,7 +144,6 @@
             background:var(--bg-page);
             color:var(--text-primary);
             min-height:100vh;
-            transition:background .25s,color .25s;
         }
         .page-wrap{max-width:1800px;margin:0 auto;min-height:100vh}
         .site-header{text-align:center;padding:1.5rem 1rem 1.25rem;border-bottom:1px solid var(--border-header);position:relative}
@@ -173,7 +178,7 @@
         .site-nav a.active{background:var(--nav-active);border-color:var(--nav-active-border);color:#fff}
         .user-bar{position:absolute;top:1rem;right:1.5rem;font-size:.8rem;color:var(--text-muted);white-space:nowrap}
         .user-bar a{color:var(--danger);text-decoration:none;margin-left:.5rem}
-        .main{padding:1.5rem}
+        .main{padding:1.5rem;view-transition-name:app-main}
         .text-muted{color:var(--text-muted)}
         .text-label{color:var(--text-label)}
         .text-accent{color:var(--accent)}