优化性能提交新功能

themes/Ying/assets/js/modules/utils.js

@@ -1,43 +1,41 @@
 function themeSweep(newTheme, callback) {
-    var veil = document.createElement('div');
-    var gradient = newTheme === 'dark'
-        ? 'linear-gradient(135deg,rgba(2,6,23,0.18),rgba(15,23,42,0.55) 45%,rgba(30,41,59,0.36))'
-        : 'linear-gradient(135deg,rgba(255,247,237,0.28),rgba(252,250,245,0.62) 45%,rgba(254,243,199,0.32))';
+    // View Transition API — browser-native crossfade, zero JS animation overhead.
+    // Same principle as image lightbox transitions. Chrome/Edge 111+, Opera 97+.
+    if (document.startViewTransition) {
+        document.startViewTransition(function() { callback(); });
+        return;
+    }
 
-    veil.style.cssText =
+    // Fallback: lightweight overlay for Safari / Firefox
+    var oldTheme = document.documentElement.getAttribute('data-theme');
+    var tint = oldTheme === 'dark'
+        ? 'rgba(15,23,42,0.95)'
+        : 'rgba(255,255,255,0.95)';
+
+    var overlay = document.createElement('div');
+    overlay.style.cssText =
         'position:fixed;inset:0;z-index:9999;pointer-events:none;' +
-        'background:' + gradient + ';' +
-        'opacity:0;transition:opacity 0.42s cubic-bezier(0.22,0.61,0.36,1);' +
+        'background:' + tint + ';opacity:1;' +
+        'transition:opacity 0.22s ease;' +
         'will-change:opacity;contain:paint;';
-    document.body.appendChild(veil);
+    document.body.appendChild(overlay);
 
     var cleaned = false;
     function cleanup() {
         if (cleaned) return;
         cleaned = true;
-        if (veil.parentNode) veil.parentNode.removeChild(veil);
+        if (overlay.parentNode) overlay.parentNode.removeChild(overlay);
     }
 
-    var applied = false;
-    function applyTheme() {
-        if (applied) return;
-        applied = true;
-        callback();
-        veil.style.opacity = '0';
-    }
+    callback();
+    overlay.offsetWidth;
+    overlay.style.opacity = '0';
 
-    veil.offsetWidth;
-    veil.style.opacity = '1';
-
-    setTimeout(applyTheme, 300);
-    veil.addEventListener('transitionend', function(e) {
-        if (!applied || e.propertyName !== 'opacity') return;
+    overlay.addEventListener('transitionend', function(e) {
+        if (e.propertyName !== 'opacity') return;
         cleanup();
     });
-    setTimeout(function() {
-        applyTheme();
-        cleanup();
-    }, 950);
+    setTimeout(cleanup, 380);
 }
 
 // Toast Message Helper
@@ -85,23 +83,36 @@ window.initThemeToggle = function() {
 window.initCodeFold = function() {
     var codeBlocks = document.querySelectorAll('.highlight');
     codeBlocks.forEach(function(block) {
-        if (block.offsetHeight > 360) {
-            if (block.parentNode.classList.contains('code-fold-container')) return;
+        var wrapper = block.parentNode && block.parentNode.classList.contains('code-fold-container') ? block.parentNode : null;
+        if (!wrapper && block.scrollHeight <= 360 && block.offsetHeight <= 360) return;
 
-            var wrapper = document.createElement('div');
+        if (!wrapper) {
+            wrapper = document.createElement('div');
             wrapper.className = 'code-fold-container collapsed';
             block.parentNode.insertBefore(wrapper, block);
             wrapper.appendChild(block);
+        }
 
-            var btn = document.createElement('button');
+        var btn = wrapper.querySelector(':scope > .code-expand-btn');
+        if (!btn) {
+            btn = document.createElement('button');
+            btn.type = 'button';
             btn.className = 'code-expand-btn';
-            btn.innerHTML = '<span><i class="ri-arrow-down-s-line" style="margin-right:4px;"></i> 展开代码 </span>';
-            btn.onclick = function() {
-                wrapper.classList.remove('collapsed');
-                btn.style.display = 'none';
-            };
             wrapper.appendChild(btn);
         }
+
+        var syncButton = function() {
+            var collapsed = wrapper.classList.contains('collapsed');
+            btn.innerHTML = collapsed
+                ? '<span><i class="ri-arrow-down-s-line" style="margin-right:4px;"></i> 展开代码 </span>'
+                : '<span><i class="ri-arrow-up-s-line" style="margin-right:4px;"></i> 收起代码 </span>';
+        };
+
+        btn.onclick = function() {
+            wrapper.classList.toggle('collapsed');
+            syncButton();
+        };
+        syncButton();
     });
 };