@leeguoo/pwtk-network-debugger 1.3.0 → 1.3.1-beta.1

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;
@@ -17017,26 +17031,48 @@ class LiquidGlassRenderer {
     this.preset = config.preset || "normal";
     this.liquidConfig = this.computeLiquidConfig(this.preset, this.quality);
     this.timeStep = this.getTimeStepForQuality(this.quality);
-    const gl = this.canvas.getContext("webgl2", {
+    let gl = this.canvas.getContext("webgl2", {
       alpha: true,
       antialias: true,
       premultipliedAlpha: false,
       preserveDrawingBuffer: true
     });
     if (!gl) {
-      throw new Error("WebGL2 not supported");
+      console.log("[PWTK WebGL] WebGL2 not available, falling back to WebGL1");
+      gl = this.canvas.getContext("webgl", {
+        alpha: true,
+        antialias: true,
+        premultipliedAlpha: false,
+        preserveDrawingBuffer: true
+      });
+    }
+    if (!gl) {
+      throw new Error("Neither WebGL2 nor WebGL1 is supported");
     }
     this.gl = gl;
     this.setupGL();
   }
   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 +17219,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 +17234,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 +17259,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 +17347,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) {
@@ -17339,17 +17420,62 @@ class LiquidGlassScene {
   constructor(container) {
     this.layers = /* @__PURE__ */ new Map();
     this.isActive = false;
+    this.mutationObserver = null;
     this.snapshotCanvas = null;
     this.snapshotScale = 1;
     this.capturePromise = null;
     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.lastDOMChangeTime = 0;
+    this.domChangeDebounceDelay = 500;
+    this.pendingRefresh = false;
+    this.idleCallbackId = null;
     this.markSnapshotDirty = () => {
       if (this.destroyed) return;
       this.snapshotNeedsUpdate = true;
       this.scheduleBackgroundRefresh();
     };
+    this.handleDOMChange = () => {
+      if (this.destroyed || this.pendingRefresh) return;
+      const now = performance.now();
+      if (now - this.lastDOMChangeTime < this.domChangeDebounceDelay) {
+        return;
+      }
+      this.lastDOMChangeTime = now;
+      this.pendingRefresh = true;
+      this.snapshotNeedsUpdate = true;
+      this.scheduleBackgroundRefreshIdle();
+    };
+    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 +17491,36 @@ class LiquidGlassScene {
     this.resizeObserver.observe(container);
     window.addEventListener("scroll", this.markSnapshotDirty, { passive: true });
     window.addEventListener("resize", this.markSnapshotDirty);
+    document.addEventListener("visibilitychange", this.handleVisibilityChange);
+    this.setupDOMMutationObserver();
+  }
+  setupDOMMutationObserver() {
+    this.mutationObserver = new MutationObserver((mutations) => {
+      const hasSignificantChange = mutations.some((mutation) => {
+        if (this.container.contains(mutation.target)) {
+          return false;
+        }
+        return mutation.type === "childList" && (mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0) || mutation.type === "attributes" || mutation.type === "characterData";
+      });
+      if (hasSignificantChange) {
+        this.handleDOMChange();
+      }
+    });
+    const observerConfig = {
+      childList: true,
+      // 监听子节点的添加和移除
+      attributes: true,
+      // 监听属性变化
+      characterData: true,
+      // 监听文本内容变化
+      subtree: true,
+      // 监听所有后代节点
+      attributeOldValue: false,
+      characterDataOldValue: false,
+      // 只监听可能影响视觉的属性
+      attributeFilter: ["class", "style", "src", "href", "hidden", "disabled"]
+    };
+    this.mutationObserver.observe(document.body, observerConfig);
   }
   setupContainer() {
     const computedStyle = getComputedStyle(this.container);
@@ -17482,6 +17638,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;
@@ -17550,8 +17760,21 @@ class LiquidGlassScene {
       this.refreshTimeout = null;
     }
     this.resizeObserver.disconnect();
+    if (this.mutationObserver) {
+      this.mutationObserver.disconnect();
+      this.mutationObserver = null;
+    }
+    if (this.idleCallbackId !== null) {
+      if (typeof cancelIdleCallback !== "undefined") {
+        cancelIdleCallback(this.idleCallbackId);
+      } else {
+        clearTimeout(this.idleCallbackId);
+      }
+      this.idleCallbackId = null;
+    }
     window.removeEventListener("scroll", this.markSnapshotDirty);
     window.removeEventListener("resize", this.markSnapshotDirty);
+    document.removeEventListener("visibilitychange", this.handleVisibilityChange);
   }
   getLayer(id) {
     return this.layers.get(id);
@@ -17568,6 +17791,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 +17851,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;
@@ -17641,13 +17886,49 @@ class LiquidGlassScene {
     await this.capturePromise;
   }
   scheduleBackgroundRefresh() {
-    if (this.refreshTimeout !== null) return;
+    if (this.refreshTimeout !== null) {
+      clearTimeout(this.refreshTimeout);
+    }
     this.refreshTimeout = window.setTimeout(() => {
       this.refreshTimeout = null;
       if (!this.destroyed) {
         this.updateBackgrounds();
       }
-    }, 120);
+    }, 150);
+  }
+  scheduleBackgroundRefreshIdle() {
+    if (this.idleCallbackId !== null) {
+      if (typeof cancelIdleCallback !== "undefined") {
+        cancelIdleCallback(this.idleCallbackId);
+      } else {
+        clearTimeout(this.idleCallbackId);
+      }
+      this.idleCallbackId = null;
+    }
+    if (typeof requestIdleCallback !== "undefined") {
+      this.idleCallbackId = requestIdleCallback(
+        (deadline) => {
+          this.idleCallbackId = null;
+          if (this.destroyed) return;
+          if (deadline.timeRemaining() > 10 || deadline.didTimeout) {
+            this.pendingRefresh = false;
+            this.updateBackgrounds();
+          } else {
+            this.scheduleBackgroundRefreshIdle();
+          }
+        },
+        { timeout: 2e3 }
+        // 最多等待 2 秒，避免无限延迟
+      );
+    } else {
+      this.idleCallbackId = window.setTimeout(() => {
+        this.idleCallbackId = null;
+        if (!this.destroyed) {
+          this.pendingRefresh = false;
+          this.updateBackgrounds();
+        }
+      }, 200);
+    }
   }
 }
 const _WebGLManager = class _WebGLManager {
@@ -17674,10 +17955,26 @@ const _WebGLManager = class _WebGLManager {
   checkWebGLSupport() {
     try {
       const canvas = document.createElement("canvas");
-      const gl = canvas.getContext("webgl2", { failIfMajorPerformanceCaveat: true });
-      this.isSupported = !!gl;
-      return this.isSupported;
+      let gl = canvas.getContext("webgl2", { failIfMajorPerformanceCaveat: true });
+      if (gl) {
+        this.isSupported = true;
+        return true;
+      }
+      gl = canvas.getContext("webgl", {
+        alpha: true,
+        antialias: true,
+        premultipliedAlpha: true
+      });
+      if (gl) {
+        console.log("[PWTK WebGL] WebGL2 not available, using WebGL1");
+        this.isSupported = true;
+        return true;
+      }
+      console.warn("[PWTK WebGL] Neither WebGL2 nor WebGL1 is supported");
+      this.isSupported = false;
+      return false;
     } catch (error) {
+      console.error("[PWTK WebGL] Error checking WebGL support:", error);
       this.isSupported = false;
       return false;
     }
@@ -17959,7 +18256,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.1"}</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>
@@ -19052,7 +19349,7 @@ if (typeof window !== "undefined") {
 }
 function loadLiquidGlass() {
   return new Promise((resolve) => {
-    import("./container-DZOQFeJd.mjs").then(() => {
+    import("./container-Ll0bZChs.mjs").then(() => {
       return import("./button-DfB5OFDC.mjs");
     }).then(() => {
       resolve();
@@ -19063,7 +19360,7 @@ function loadLiquidGlass() {
   });
 }
 const liquidGlassPromise = loadLiquidGlass();
-class NetworkDebugger {
+const _NetworkDebugger = class _NetworkDebugger {
   constructor() {
     this.interceptor = null;
     this.panel = null;
@@ -19076,6 +19373,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 +19429,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 +19490,7 @@ class NetworkDebugger {
   }
   async checkForUpdates() {
     try {
-      const currentVersion = "1.3.0";
+      const currentVersion = "1.3.1-beta.1";
       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 +19510,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.1"
       };
     }
   }
@@ -19286,7 +19584,7 @@ class NetworkDebugger {
   }
   // 静态方法，用于全局访问
   static create(config) {
-    const instance = new NetworkDebugger();
+    const instance = new _NetworkDebugger();
     return instance.init(config).then(() => instance);
   }
   createPanel() {
@@ -19307,7 +19605,9 @@ class NetworkDebugger {
   defaultSlkExtractor(headers) {
     return headers.slk || headers["x-slk"] || "";
   }
-}
+};
+_NetworkDebugger.version = "1.3.1-beta.1";
+let NetworkDebugger = _NetworkDebugger;
 let globalInstance = null;
 const NetworkDebuggerGlobal = {
   async init(config) {