feat(sw): 升级缓存版本并优化资源缓存策略

- 更新缓存名称从 v1.0.1 到 v1.1.0
- 移除部分图片资源路径配置
- 安装阶段增加 skipWaiting 强制更新
- 优化 fetch 拦截逻辑，区分 HTML、音频、图片及静态资源处理
- 增加对带版本号请求的特殊处理
- 激活阶段主动声明客户端控制权
- 改进缓存匹配忽略查询参数提高命中率
- 增强错误捕获避免中断服务工作线程运行

css/about.css

@@ -16,7 +16,7 @@
     --glass-bg: rgba(255, 255, 255, 0.75);
     --glass-border: 1px solid rgba(255, 255, 255, 0.9);
     --glass-shadow: 0 12px 36px rgba(0, 0, 0, 0.12);
-    --glass-blur: 28px;
+    --glass-blur: 18px;
 
     --text-primary: #1f2937;
     --text-secondary: #4b5563;
@@ -88,7 +88,7 @@ body {
 
 /* Ambient Background */
 .aurora-canvas { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
-.glow-spot { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.5; animation: float 20s infinite alternate; }
+.glow-spot { position: absolute; border-radius: 50%; filter: blur(40px); opacity: 0.5; animation: float 20s infinite alternate; }
 .spot-1 { top: -10%; left: -10%; width: 50vw; height: 50vw; background: var(--bg-grad-1); }
 .spot-2 { bottom: -10%; right: -10%; width: 60vw; height: 60vw; background: var(--bg-grad-2); animation-delay: -5s; }
 .noise-layer { position: absolute; inset: 0; opacity: 0.03; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
@@ -3169,4 +3169,4 @@ body {
 
 /* Loading Transition */
 .fade-in { animation: fadeIn 0.3s ease both; }
-@keyframes fadeIn { from { opacity: 0; transform: translateY(2px);} to { opacity: 1; transform: none;} }
+@keyframes fadeIn { from { opacity: 0; transform: translateY(2px);} to { opacity: 1; transform: none;} }

js/about.js

@@ -699,18 +699,29 @@ class UIManager {
         }
         
         // 监听主题/语言变化
-        const themeObserver = new MutationObserver(() => {
+        if (this._themeLangObserver) {
+            try { this._themeLangObserver.disconnect(); } catch (_) {}
+        }
+        const prevTheme = document.documentElement.getAttribute('data-theme');
+        const prevLang = document.documentElement.getAttribute('data-lang');
+        this._lastTheme = prevTheme;
+        this._lastLang = prevLang;
+        this._reloading = false;
+        this._themeLangObserver = new MutationObserver(() => {
             const newTheme = document.documentElement.getAttribute('data-theme');
             const newLang = document.documentElement.getAttribute('data-lang');
-            console.log('Theme/Language changed:', newTheme, newLang);
+            if (this._reloading) return;
-            // 延迟执行
+            if (newTheme === this._lastTheme && newLang === this._lastLang) return;
+            this._lastTheme = newTheme;
+            this._lastLang = newLang;
             setTimeout(() => {
-                // 重新加载整个评论组件
+                if (this._reloading) return;
+                this._reloading = true;
                 this.reloadArtalk();
+                this._reloading = false;
             }, 300);
         });
-        
+        this._themeLangObserver.observe(document.documentElement, {
-        themeObserver.observe(document.documentElement, {
             attributes: true,
             attributeFilter: ['data-theme', 'data-lang']
         });
@@ -858,11 +869,13 @@ class UIManager {
                     el.innerText = item.name;
                     el.style.border = 'none';
                     container.appendChild(el);
-                    tags.push({el, x: 0, y: 0, z: 0});
+                    tags.push({el, x: 0, y: 0, z: 0, bw: el.offsetWidth, bh: el.offsetHeight});
                 });
                 
                 // 动态半径，避免容器溢出，使用防抖优化
-                let radius = Math.max(160, Math.min(container.offsetWidth, container.offsetHeight) / 2 - 24);
+                const cw = container.clientWidth;
+                const ch = container.clientHeight;
+                let radius = Math.max(160, Math.min(cw, ch) / 2 - 24);
                 const dtr = Math.PI / 180;
                 let lasta = 1, lastb = 1;
                 let active = false, mouseX = 0, mouseY = 0;
@@ -918,8 +931,8 @@ class UIManager {
                         scale = Math.min(Math.max(scale, 0.7), 1.15);
                         const opacity = (tag.z + radius) / (2 * radius) + 0.2;
                         const zIndex = parseInt(scale * 100);
-                        const left = tag.x + container.offsetWidth / 2 - tag.el.offsetWidth / 2;
+                        const left = tag.x + cw / 2 - tag.bw / 2;
-                        const top = tag.y + container.offsetHeight / 2 - tag.el.offsetHeight / 2;
+                        const top = tag.y + ch / 2 - tag.bh / 2;
                         
                         updates.push({
                             el: tag.el,
@@ -1107,4 +1120,4 @@ class UIManager {
         });
     }
 
-}
+}

js/sw.js

@@ -1,5 +1,4 @@
-// Service Worker for PWA
+const CACHE_NAME = 'honesty-home-v1.1.0';
-const CACHE_NAME = 'honesty-home-v1.0.1';
 const urlsToCache = [
   './index.html',
   './about.html',
@@ -7,87 +6,82 @@ const urlsToCache = [
   './css/about.css',
   './css/artalk.css',
   './js/config.js',
-  './js/main.js',
   './js/about.js',
   './images/avatar.jpeg',
   './images/favicon.ico',
-    './images/favicon.png',
+  './images/favicon.png',
-    './images/logo.png',
+  './images/logo.png',
-    './images/INFJ.png',
+  './images/INFJ.png'
-    './images/kl.gif',
-    './images/bj/1.jpg',
-    './images/bj/2.jpg',
-    './images/bj/3.jpg',
-    './images/bj/4.jpg',
-    './images/bj/5.jpg',
-    './images/bj/6.jpg',
-    './images/bj/7.jpg',
 ];
 
-// 安装事件 - 缓存资源
 self.addEventListener('install', event => {
   event.waitUntil(
     caches.open(CACHE_NAME)
       .then(cache => {
-        console.log('Opened cache');
         return cache.addAll(urlsToCache);
       })
+      .catch(() => Promise.resolve())
   );
+  self.skipWaiting();
 });
 
-// 获取事件 - 拦截网络请求
 self.addEventListener('fetch', event => {
-  // 对于非GET请求或者不是同源请求，直接跳过
   if (event.request.method !== 'GET' || !event.request.url.startsWith(self.location.origin)) {
     return;
   }
 
-  event.respondWith(
+  const url = new URL(event.request.url);
-    caches.match(event.request)
+  const isHTML = event.request.mode === 'navigate' || url.pathname.endsWith('.html');
-      .then(response => {
+  const isVersioned = url.search && /version=/.test(url.search);
-        // 如果在缓存中找到响应，则返回缓存的资源
+  const isAudio = url.pathname.endsWith('.mp3') || url.pathname.endsWith('.wav') || url.pathname.endsWith('.ogg');
-        if (response) {
+  const isImage = /\.(png|jpg|jpeg|gif|webp|svg)$/i.test(url.pathname);
-          return response;
+  const isStaticAsset = /\.(css|js|json)$/i.test(url.pathname);
-        }
+
-        
+  if (isHTML || isVersioned || isAudio) {
-        // 克隆请求，因为请求是一个流，只能被消费一次
+    event.respondWith(
-        const fetchRequest = event.request.clone();
+      fetch(event.request)
-        
+        .then(resp => {
-        // 如果没有在缓存中找到，则发起网络请求
+          if (resp && resp.status === 200 && resp.type === 'basic' && !isAudio) {
-        return fetch(fetchRequest).then(response => {
+            const copy = resp.clone();
-          // 检查响应是否有效
+            caches.open(CACHE_NAME).then(cache => cache.put(event.request, copy)).catch(() => {});
-          if (!response || response.status !== 200 || response.type !== 'basic') {
-            return response;
           }
-          
+          return resp;
-          // 克隆响应，因为响应是一个流，只能被消费一次
+        })
-          const responseToCache = response.clone();
+        .catch(() => {
-          
+          return caches.match(event.request, { ignoreSearch: true })
-          // 打开缓存并将响应添加到缓存中
+            .then(m => m || caches.match(event.request))
-          caches.open(CACHE_NAME)
+        })
-            .then(cache => {
+    );
-              cache.put(event.request, responseToCache);
+    return;
-            });
+  }
-            
+
-          return response;
+  event.respondWith(
+    caches.match(event.request, { ignoreSearch: true })
+      .then(cached => {
+        if (cached) return cached;
+        return fetch(event.request).then(resp => {
+          if (resp && resp.status === 200 && resp.type === 'basic' && (isImage || isStaticAsset)) {
+            const copy = resp.clone();
+            caches.open(CACHE_NAME).then(cache => cache.put(event.request, copy)).catch(() => {});
+          }
+          return resp;
         });
       })
-    );
+  );
 });
 
-// 激活事件 - 清理旧缓存
 self.addEventListener('activate', event => {
   const cacheWhitelist = [CACHE_NAME];
-  
   event.waitUntil(
     caches.keys().then(cacheNames => {
       return Promise.all(
         cacheNames.map(cacheName => {
-          if (cacheWhitelist.indexOf(cacheName) === -1) {
+          if (!cacheWhitelist.includes(cacheName)) {
             return caches.delete(cacheName);
           }
         })
       );
     })
   );
-});
+  self.clients.claim();
+});