@leeguoo/pwtk-network-debugger 1.2.49-beta.9 → 1.3.1-beta.0

package/dist/index.esm.js

@@ -17005,6 +17005,20 @@ class LiquidGlassRenderer {
     this.usingFallbackShader = false;
     this.uniformsDirty = true;
     this.time = 0;
+    this.stats = {
+      fps: 60,
+      frameTime: 16.67,
+      droppedFrames: 0,
+      totalFrames: 0,
+      contextLostCount: 0,
+      lastUpdateTime: 0
+    };
+    this.frameTimes = [];
+    this.lastFrameTime = 0;
+    this.fpsUpdateInterval = 1e3;
+    this.lastFpsUpdate = 0;
+    this.blendEnabled = false;
+    this.currentProgram = null;
     this.uniformLocations = {};
     this.canvas = config.canvas;
     this.cssWidth = config.width;
@@ -17031,12 +17045,25 @@ class LiquidGlassRenderer {
   }
   setupGL() {
     const { gl } = this;
-    gl.enable(gl.BLEND);
-    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+    this.enableBlend();
     gl.viewport(0, 0, this.canvas.width, this.canvas.height);
     this.createShaderProgram();
     this.createGeometry();
   }
+  enableBlend() {
+    if (!this.blendEnabled) {
+      const { gl } = this;
+      gl.enable(gl.BLEND);
+      gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+      this.blendEnabled = true;
+    }
+  }
+  useProgram(program) {
+    if (this.currentProgram !== program) {
+      this.gl.useProgram(program);
+      this.currentProgram = program;
+    }
+  }
   createShaderProgram() {
     const { gl } = this;
     const vertexShaderSource = `#version 300 es
@@ -17183,6 +17210,11 @@ class LiquidGlassRenderer {
   render() {
     if (!this.program || !this.backgroundTexture) return;
     const { gl } = this;
+    const frameStartTime = performance.now();
+    if (gl.isContextLost()) {
+      this.stats.contextLostCount++;
+      return;
+    }
     if (!this.usingFallbackShader) {
       const dynamic = this.uniformProvider ? this.uniformProvider() : null;
       if (!dynamic) {
@@ -17193,7 +17225,8 @@ class LiquidGlassRenderer {
     this.time += this.timeStep;
     gl.clearColor(0, 0, 0, 0);
     gl.clear(gl.COLOR_BUFFER_BIT);
-    gl.useProgram(this.program);
+    this.enableBlend();
+    this.useProgram(this.program);
     if (this.uniformsDirty && !this.usingFallbackShader) {
       this.applyLiquidUniforms();
       this.uniformsDirty = false;
@@ -17217,6 +17250,41 @@ class LiquidGlassRenderer {
       gl.uniform1i(this.uniformLocations.u_background, 0);
     }
     gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+    this.updatePerformanceStats(frameStartTime);
+  }
+  updatePerformanceStats(frameStartTime) {
+    const now = performance.now();
+    const frameTime = now - frameStartTime;
+    this.stats.totalFrames++;
+    if (frameTime > 33) {
+      this.stats.droppedFrames++;
+    }
+    this.frameTimes.push(frameTime);
+    if (this.frameTimes.length > 60) {
+      this.frameTimes.shift();
+    }
+    if (now - this.lastFpsUpdate > this.fpsUpdateInterval) {
+      const avgFrameTime = this.frameTimes.reduce((a2, b) => a2 + b, 0) / this.frameTimes.length;
+      this.stats.frameTime = avgFrameTime;
+      this.stats.fps = Math.round(1e3 / avgFrameTime);
+      this.stats.lastUpdateTime = now;
+      this.lastFpsUpdate = now;
+    }
+  }
+  getPerformanceStats() {
+    return { ...this.stats };
+  }
+  resetPerformanceStats() {
+    this.stats = {
+      fps: 60,
+      frameTime: 16.67,
+      droppedFrames: 0,
+      totalFrames: 0,
+      contextLostCount: this.stats.contextLostCount,
+      // 保留 context lost 计数
+      lastUpdateTime: performance.now()
+    };
+    this.frameTimes = [];
   }
   applyDynamicUniforms(dynamic) {
     const { gl } = this;
@@ -17270,7 +17338,11 @@ class LiquidGlassRenderer {
     this.canvas.height = height * dpr;
     this.canvas.style.width = `${width}px`;
     this.canvas.style.height = `${height}px`;
-    this.gl.viewport(0, 0, this.canvas.width, this.canvas.height);
+    const { gl } = this;
+    gl.viewport(0, 0, this.canvas.width, this.canvas.height);
+    this.blendEnabled = false;
+    this.currentProgram = null;
+    this.enableBlend();
     this.uniformsDirty = true;
   }
   setQuality(quality) {
@@ -17345,11 +17417,40 @@ class LiquidGlassScene {
     this.snapshotNeedsUpdate = true;
     this.refreshTimeout = null;
     this.destroyed = false;
+    this.sceneStats = {
+      averageFps: 60,
+      lowestFps: 60,
+      totalDroppedFrames: 0,
+      backgroundRefreshCount: 0,
+      backgroundRefreshTime: 0,
+      visibilityChangeCount: 0
+    };
+    this.performanceMode = "auto";
+    this.autoQualityEnabled = true;
+    this.lastPerformanceCheck = 0;
+    this.performanceCheckInterval = 3e3;
     this.markSnapshotDirty = () => {
       if (this.destroyed) return;
       this.snapshotNeedsUpdate = true;
       this.scheduleBackgroundRefresh();
     };
+    this.handleVisibilityChange = () => {
+      if (!document.hidden) {
+        this.sceneStats.visibilityChangeCount++;
+        this.snapshotNeedsUpdate = true;
+        this.updateBackgrounds(true);
+        if (this.isActive) {
+          this.layers.forEach((layer) => {
+            if (layer.visible) {
+              layer.renderer.stopAnimation();
+              layer.renderer.resetPerformanceStats();
+              layer.renderer.startAnimation();
+            }
+          });
+        }
+        this.lastPerformanceCheck = performance.now();
+      }
+    };
     this.container = container;
     this.backgroundCanvas = document.createElement("canvas");
     const ctx = this.backgroundCanvas.getContext("2d");
@@ -17365,6 +17466,7 @@ class LiquidGlassScene {
     this.resizeObserver.observe(container);
     window.addEventListener("scroll", this.markSnapshotDirty, { passive: true });
     window.addEventListener("resize", this.markSnapshotDirty);
+    document.addEventListener("visibilitychange", this.handleVisibilityChange);
   }
   setupContainer() {
     const computedStyle = getComputedStyle(this.container);
@@ -17482,6 +17584,60 @@ class LiquidGlassScene {
         layer.renderer.startAnimation();
       }
     });
+    if (this.autoQualityEnabled) {
+      this.startPerformanceMonitoring();
+    }
+  }
+  startPerformanceMonitoring() {
+    const checkPerformance = () => {
+      if (!this.isActive || this.destroyed || document.hidden) {
+        setTimeout(checkPerformance, this.performanceCheckInterval);
+        return;
+      }
+      const now = performance.now();
+      if (now - this.lastPerformanceCheck < this.performanceCheckInterval) {
+        setTimeout(checkPerformance, this.performanceCheckInterval);
+        return;
+      }
+      this.lastPerformanceCheck = now;
+      this.updateSceneStats();
+      if (this.autoQualityEnabled && this.performanceMode === "auto") {
+        this.autoAdjustQuality();
+      }
+      setTimeout(checkPerformance, this.performanceCheckInterval);
+    };
+    setTimeout(checkPerformance, this.performanceCheckInterval);
+  }
+  updateSceneStats() {
+    let totalFps = 0;
+    let lowestFps = 60;
+    let totalDroppedFrames = 0;
+    let layerCount = 0;
+    this.layers.forEach((layer) => {
+      if (layer.visible) {
+        const stats = layer.renderer.getPerformanceStats();
+        totalFps += stats.fps;
+        lowestFps = Math.min(lowestFps, stats.fps);
+        totalDroppedFrames += stats.droppedFrames;
+        layerCount++;
+      }
+    });
+    if (layerCount > 0) {
+      this.sceneStats.averageFps = Math.round(totalFps / layerCount);
+      this.sceneStats.lowestFps = lowestFps;
+      this.sceneStats.totalDroppedFrames = totalDroppedFrames;
+    }
+  }
+  autoAdjustQuality() {
+    const { averageFps, lowestFps, totalDroppedFrames } = this.sceneStats;
+    if (lowestFps < 25 || averageFps < 30 && totalDroppedFrames > 50) {
+      this.setQuality("low");
+      console.warn("[PWTK WebGL] Performance poor, auto-switched to low quality");
+    } else if (lowestFps < 45 || averageFps < 50 && totalDroppedFrames > 20) {
+      this.setQuality("medium");
+    } else if (lowestFps > 55 && totalDroppedFrames < 5) {
+      this.setQuality("high");
+    }
   }
   stopAnimation() {
     this.isActive = false;
@@ -17552,6 +17708,7 @@ class LiquidGlassScene {
     this.resizeObserver.disconnect();
     window.removeEventListener("scroll", this.markSnapshotDirty);
     window.removeEventListener("resize", this.markSnapshotDirty);
+    document.removeEventListener("visibilitychange", this.handleVisibilityChange);
   }
   getLayer(id) {
     return this.layers.get(id);
@@ -17568,6 +17725,24 @@ class LiquidGlassScene {
       return false;
     }
   }
+  getPerformanceStats() {
+    this.updateSceneStats();
+    return { ...this.sceneStats };
+  }
+  setPerformanceMode(mode) {
+    this.performanceMode = mode;
+    this.autoQualityEnabled = mode === "auto";
+    if (mode === "high") {
+      this.setQuality("high");
+    } else if (mode === "low") {
+      this.setQuality("low");
+    } else if (mode === "balanced") {
+      this.setQuality("medium");
+    }
+  }
+  enableAutoQuality(enabled) {
+    this.autoQualityEnabled = enabled;
+  }
   applyPlaceholderBackground(layer) {
     const rect = layer.element.getBoundingClientRect();
     const width = Math.max(1, Math.round(rect.width || layer.canvas.clientWidth || 1));
@@ -17610,9 +17785,13 @@ class LiquidGlassScene {
     };
   }
   async refreshLayerBackground(layer, forceSnapshot = false) {
+    const startTime = performance.now();
     await this.ensurePageSnapshot(forceSnapshot);
     if (!this.snapshotCanvas) return;
     layer.renderer.setBackgroundTexture(this.snapshotCanvas);
+    const refreshTime = performance.now() - startTime;
+    this.sceneStats.backgroundRefreshCount++;
+    this.sceneStats.backgroundRefreshTime = refreshTime;
   }
   async ensurePageSnapshot(force = false) {
     if (this.destroyed) return;
@@ -17896,6 +18075,9 @@ const _DebugPanel = class _DebugPanel {
     this.webglBackgroundUpdateTimer = null;
     this.boundHandlers = /* @__PURE__ */ new Map();
     this.eventListeners = [];
+    this.renderDebounceTimer = null;
+    this.searchDebounceTimer = null;
+    this.pendingRenderRequests = /* @__PURE__ */ new Set();
     this.interceptor = interceptor;
     const savedConfig = this.loadConfig();
     this.config = {
@@ -17956,7 +18138,7 @@ const _DebugPanel = class _DebugPanel {
     this.container.style.pointerEvents = "auto";
     this.container.innerHTML = `
       <div class="debugger-header">
-        <div class="debugger-title">🔓 PWTK 解密小工具 <span style="font-size: 10px; opacity: 0.7;">by Leo v${"1.2.49-beta.9"}</span></div>
+        <div class="debugger-title">🔓 PWTK 解密小工具 <span style="font-size: 10px; opacity: 0.7;">by Leo v${"1.3.1-beta.0"}</span></div>
         <div class="debugger-controls">
           <button class="debugger-btn" data-action="clear" title="清空"><svg class="debugger-icon" viewBox="0 0 24 24"><path fill="currentColor" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg></button>
           <button class="debugger-btn" data-action="export" title="导出"><svg class="debugger-icon" viewBox="0 0 24 24"><path fill="currentColor" d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg></button>
@@ -18002,12 +18184,18 @@ const _DebugPanel = class _DebugPanel {
     searchInput.addEventListener("input", (e2) => {
       const query = e2.target.value;
       this.searchQuery = query;
-      this.filterRequests();
       if (query) {
         searchClearBtn.style.display = "block";
       } else {
         searchClearBtn.style.display = "none";
       }
+      if (this.searchDebounceTimer) {
+        clearTimeout(this.searchDebounceTimer);
+      }
+      this.searchDebounceTimer = window.setTimeout(() => {
+        this.filterRequests();
+        this.searchDebounceTimer = null;
+      }, 200);
     });
     searchClearBtn.addEventListener("click", () => {
       searchInput.value = "";
@@ -18085,7 +18273,19 @@ const _DebugPanel = class _DebugPanel {
     if (this.requestsCache.length > 100) {
       this.requestsCache = this.requestsCache.slice(0, 100);
     }
-    this.renderRequests();
+    this.scheduleRender();
+  }
+  /**
+   * 防抖渲染 - 避免频繁的重新渲染
+   */
+  scheduleRender() {
+    if (this.renderDebounceTimer) {
+      clearTimeout(this.renderDebounceTimer);
+    }
+    this.renderDebounceTimer = window.setTimeout(() => {
+      this.renderRequests();
+      this.renderDebounceTimer = null;
+    }, 50);
   }
   filterRequests() {
     if (!this.searchQuery) {
@@ -18150,25 +18350,15 @@ const _DebugPanel = class _DebugPanel {
       return;
     }
     const applyItems = this.config.webgl?.applyToItems ?? false;
+    const fragment = document.createDocumentFragment();
     requestsToRender.forEach((request, index) => {
       const item = this.createRequestItem(request);
-      listContainer.appendChild(item);
-      if (this.webglManager) {
-        const layerId = `request-item-${index}`;
-        this.webglManager.disableForElement(layerId);
-        if (applyItems) {
-          requestAnimationFrame(() => {
-            try {
-              this.webglManager.enableForElement(item, layerId);
-            } catch (error) {
-              logger.debug(`Failed to enable WebGL for request item ${index}:`, error);
-            }
-          });
-        } else {
-          item.classList.add("webgl-fallback", "enhanced-css-glass");
-        }
+      fragment.appendChild(item);
+      if (this.webglManager && applyItems) {
+        item.classList.add("webgl-fallback", "enhanced-css-glass");
       }
     });
+    listContainer.appendChild(fragment);
   }
   createRequestItem(request) {
     const item = document.createElement("div");
@@ -18792,6 +18982,14 @@ Created by Leo (@leeguoo)`);
       clearInterval(this.webglBackgroundUpdateTimer);
       this.webglBackgroundUpdateTimer = null;
     }
+    if (this.renderDebounceTimer) {
+      clearTimeout(this.renderDebounceTimer);
+      this.renderDebounceTimer = null;
+    }
+    if (this.searchDebounceTimer) {
+      clearTimeout(this.searchDebounceTimer);
+      this.searchDebounceTimer = null;
+    }
   }
   destroy() {
     this.removeAllEventListeners();
@@ -19044,7 +19242,7 @@ function loadLiquidGlass() {
   });
 }
 const liquidGlassPromise = loadLiquidGlass();
-class NetworkDebugger {
+const _NetworkDebugger = class _NetworkDebugger {
   constructor() {
     this.interceptor = null;
     this.panel = null;
@@ -19057,6 +19255,7 @@ class NetworkDebugger {
       logger.warn("NetworkDebugger already initialized");
       return;
     }
+    logger.info(`🚀 PWTK Network Debugger v${_NetworkDebugger.version} initializing...`);
     this.config = {
       autoStart: true,
       position: "bottom-right",
@@ -19112,13 +19311,13 @@ class NetworkDebugger {
       this.initialized = true;
       logger.consoleDirect(`
 ╔════════════════════════════════════════╗
-║  🔓 PWTK 解密小工具 v${"1.2.49-beta.9"}           ║
+║  🔓 PWTK 解密小工具 v${_NetworkDebugger.version}           ║
 ║  Created by Leo (@leeguoo)             ║
 ║  技术支持: 请联系 Leo                 ║  
 ║  分享服务: curl.bwg.leeguoo.com       ║
 ╚════════════════════════════════════════╝
       `);
-      logger.info("🔍 NetworkDebugger initialized successfully");
+      logger.info(`✅ PWTK Network Debugger v${_NetworkDebugger.version} initialized successfully`);
     } catch (error) {
       logger.error("NetworkDebugger initialization failed:", error);
       throw error;
@@ -19173,7 +19372,7 @@ class NetworkDebugger {
   }
   async checkForUpdates() {
     try {
-      const currentVersion = "1.2.49-beta.9";
+      const currentVersion = "1.3.1-beta.0";
       logger.info(`[PWTK Update] Checking for updates... Current version: ${currentVersion}`);
       const response = await fetch("https://registry.npmjs.org/@leeguoo/pwtk-network-debugger/latest");
       const data = await response.json();
@@ -19193,7 +19392,7 @@ class NetworkDebugger {
       logger.error("[PWTK Update] Failed to check for updates:", error);
       return {
         hasUpdate: false,
-        currentVersion: "1.2.49-beta.9"
+        currentVersion: "1.3.1-beta.0"
       };
     }
   }
@@ -19267,7 +19466,7 @@ class NetworkDebugger {
   }
   // 静态方法，用于全局访问
   static create(config) {
-    const instance = new NetworkDebugger();
+    const instance = new _NetworkDebugger();
     return instance.init(config).then(() => instance);
   }
   createPanel() {
@@ -19288,7 +19487,9 @@ class NetworkDebugger {
   defaultSlkExtractor(headers) {
     return headers.slk || headers["x-slk"] || "";
   }
-}
+};
+_NetworkDebugger.version = "1.3.1-beta.0";
+let NetworkDebugger = _NetworkDebugger;
 let globalInstance = null;
 const NetworkDebuggerGlobal = {
   async init(config) {