@leeguoo/pwtk-network-debugger 1.3.0 → 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;
@@ -17959,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.3.0"}</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>
@@ -19063,7 +19242,7 @@ function loadLiquidGlass() {
   });
 }
 const liquidGlassPromise = loadLiquidGlass();
-class NetworkDebugger {
+const _NetworkDebugger = class _NetworkDebugger {
   constructor() {
     this.interceptor = null;
     this.panel = null;
@@ -19076,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",
@@ -19131,13 +19311,13 @@ class NetworkDebugger {
       this.initialized = true;
       logger.consoleDirect(`
 ╔════════════════════════════════════════╗
-║  🔓 PWTK 解密小工具 v${"1.3.0"}           ║
+║  🔓 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;
@@ -19192,7 +19372,7 @@ class NetworkDebugger {
   }
   async checkForUpdates() {
     try {
-      const currentVersion = "1.3.0";
+      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();
@@ -19212,7 +19392,7 @@ class NetworkDebugger {
       logger.error("[PWTK Update] Failed to check for updates:", error);
       return {
         hasUpdate: false,
-        currentVersion: "1.3.0"
+        currentVersion: "1.3.1-beta.0"
       };
     }
   }
@@ -19286,7 +19466,7 @@ class NetworkDebugger {
   }
   // 静态方法，用于全局访问
   static create(config) {
-    const instance = new NetworkDebugger();
+    const instance = new _NetworkDebugger();
     return instance.init(config).then(() => instance);
   }
   createPanel() {
@@ -19307,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) {