@leeguoo/pwtk-network-debugger 1.3.5 → 1.3.7

package/dist/index.esm.js

@@ -7867,7 +7867,42 @@ const styles = `
   flex-direction: column;
 }
 
-/* 移除标签页相关样式 - 只保留网络面板 */
+.debugger-tabs {
+  display: flex;
+  gap: 8px;
+  padding: 0 12px;
+  margin-bottom: 8px;
+}
+
+.debugger-tab {
+  cursor: pointer;
+  border: 1px solid transparent;
+  border-radius: 10px;
+  padding: 6px 14px;
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.85);
+  background: rgba(255, 255, 255, 0.08);
+  transition: all 0.2s ease;
+}
+
+.debugger-tab:hover {
+  border-color: rgba(255, 255, 255, 0.3);
+}
+
+.debugger-tab.active {
+  background: rgba(44, 110, 203, 0.7);
+  border-color: rgba(255, 255, 255, 0.35);
+  color: #fff;
+}
+
+.tab-content {
+  display: none;
+  height: 100%;
+}
+
+.tab-content.active {
+  display: block;
+}
 
 .debugger-panel-content {
   flex: 1;
@@ -7875,6 +7910,90 @@ const styles = `
   padding: 12px;
 }
 
+.performance-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  height: 100%;
+  overflow-y: auto;
+  padding-right: 6px;
+}
+
+.settings-section {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.settings-toggle {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  padding: 10px;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  cursor: pointer;
+  transition: border 0.2s ease, background 0.2s ease;
+}
+
+.settings-toggle:hover {
+  border-color: rgba(255, 255, 255, 0.25);
+}
+
+.settings-toggle.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.settings-toggle input {
+  margin-top: 3px;
+}
+
+.settings-text {
+  display: flex;
+  flex-direction: column;
+}
+
+.settings-title {
+  font-weight: 600;
+  font-size: 13px;
+  margin-bottom: 4px;
+}
+
+.settings-desc {
+  font-size: 11px;
+  opacity: 0.75;
+  line-height: 1.5;
+}
+
+.settings-refresh-btn {
+  padding: 10px 0;
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  background: rgba(44, 110, 203, 0.75);
+  color: #fff;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.settings-refresh-btn:hover:not(:disabled) {
+  background: rgba(44, 110, 203, 0.85);
+}
+
+.settings-refresh-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.settings-note {
+  font-size: 11px;
+  opacity: 0.65;
+  line-height: 1.6;
+  padding-bottom: 8px;
+}
+
 .request-list {
   display: flex;
   flex-direction: column;
@@ -17974,6 +18093,8 @@ class LiquidGlassScene {
         await new Promise((resolve) => window.setTimeout(resolve, this.minSnapshotInterval - elapsed));
       }
     }
+    const containerClass = typeof window !== "undefined" ? window.Container : null;
+    containerClass?.suppressDocumentWriteWarnings?.();
     const scale = this.calculateSnapshotScale();
     this.capturePromise = html2canvas(document.body, {
       scale,
@@ -17994,6 +18115,7 @@ class LiquidGlassScene {
       this.pendingBackgroundRefresh = true;
     }).finally(() => {
       this.capturePromise = null;
+      containerClass?.restoreDocumentWriteWarnings?.();
     });
     await this.capturePromise;
   }
@@ -18309,6 +18431,7 @@ const _DebugPanel = class _DebugPanel {
     this.webglManager = null;
     this.reopenButton = null;
     this.webglBackgroundUpdateTimer = null;
+    this.activeTab = "network";
     this.boundHandlers = /* @__PURE__ */ new Map();
     this.eventListeners = [];
     this.renderDebounceTimer = null;
@@ -18374,7 +18497,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.5"}</span></div>
+        <div class="debugger-title">🔓 PWTK 解密小工具 <span style="font-size: 10px; opacity: 0.7;">by Leo v${"1.3.7"}</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>
@@ -18387,14 +18510,45 @@ const _DebugPanel = class _DebugPanel {
           <svg class="search-icon" viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
           <input type="text" class="search-input" placeholder="搜索 URL、方法、状态码..." />
           <button class="search-clear-btn" title="清除搜索" style="display: none;">×</button>
-        </div>
-        <div class="search-stats"></div>
       </div>
-      <div class="debugger-content">
+      <div class="search-stats"></div>
+    </div>
+    <div class="debugger-content">
+        <div class="debugger-tabs">
+          <button class="debugger-tab active" data-tab="network">网络请求</button>
+          <button class="debugger-tab" data-tab="settings">性能与外观</button>
+        </div>
         <div class="debugger-panel-content">
-          <div class="network-panel">
+          <div class="tab-content network-panel active" data-tab-content="network">
             <div class="request-list"></div>
           </div>
+          <div class="tab-content performance-panel" data-tab-content="settings">
+            <div class="settings-section" data-setting-group="enableWebGL">
+              <label class="settings-toggle">
+                <input type="checkbox" data-setting="enableWebGL" />
+                <div class="settings-text">
+                  <div class="settings-title">启用液态玻璃效果</div>
+                  <div class="settings-desc">关闭后使用轻量级 CSS 背景，适合低性能设备</div>
+                </div>
+              </label>
+              <label class="settings-toggle" data-setting-group="autoRefresh">
+                <input type="checkbox" data-setting="autoRefresh" />
+                <div class="settings-text">
+                  <div class="settings-title">自动刷新背景快照</div>
+                  <div class="settings-desc">监听页面变化自动重新截图，关闭后可通过下方按钮手动刷新</div>
+                </div>
+              </label>
+              <label class="settings-toggle" data-setting-group="enableButtonAnimation">
+                <input type="checkbox" data-setting="enableButtonAnimation" />
+                <div class="settings-text">
+                  <div class="settings-title">浮动按钮动效</div>
+                  <div class="settings-desc">更新 WebGL 按钮的实时玻璃动效，关闭可降低 GPU 压力</div>
+                </div>
+              </label>
+            </div>
+            <button class="settings-refresh-btn" data-action="manual-refresh">手动刷新背景</button>
+            <div class="settings-note">提示：当性能受限时可以关闭液态玻璃效果。随时可以重新开启，并手动刷新一次背景同步页面。</div>
+          </div>
         </div>
       </div>
     `;
@@ -18402,6 +18556,7 @@ const _DebugPanel = class _DebugPanel {
     this.shadowRoot.appendChild(this.container);
     document.body.appendChild(this.hostElement);
     this.networkTab = this.shadowRoot.querySelector(".network-panel");
+    this.performancePanel = this.shadowRoot.querySelector(".performance-panel");
   }
   addResizeHandles() {
     const handles = ["n", "s", "e", "w", "ne", "nw", "se", "sw"];
@@ -18417,6 +18572,23 @@ const _DebugPanel = class _DebugPanel {
     const controls = this.shadowRoot.querySelector(".debugger-controls");
     const searchInput = this.shadowRoot.querySelector(".search-input");
     const searchClearBtn = this.shadowRoot.querySelector(".search-clear-btn");
+    const tabButtons = this.shadowRoot.querySelectorAll(".debugger-tab");
+    tabButtons.forEach((button) => {
+      button.addEventListener("click", () => {
+        const tab = button.dataset.tab === "settings" ? "settings" : "network";
+        this.switchTab(tab);
+      });
+    });
+    const settingInputs = this.shadowRoot.querySelectorAll("input[data-setting]");
+    settingInputs.forEach((input) => {
+      input.addEventListener("change", () => {
+        const key = input.getAttribute("data-setting");
+        if (!key) return;
+        this.handleSettingToggle(key, input.checked);
+      });
+    });
+    const manualRefreshBtn = this.shadowRoot.querySelector('[data-action="manual-refresh"]');
+    manualRefreshBtn?.addEventListener("click", () => this.handleManualRefresh());
     searchInput.addEventListener("input", (e2) => {
       const query = e2.target.value;
       this.searchQuery = query;
@@ -18483,6 +18655,80 @@ const _DebugPanel = class _DebugPanel {
     this.addEventListener(document, "mousemove", boundMouseMove);
     this.addEventListener(document, "mouseup", boundMouseUp);
     this.addEventListener(window, "resize", boundWindowResize);
+    this.syncLiquidSettings();
+    this.switchTab(this.activeTab);
+  }
+  switchTab(tab) {
+    this.activeTab = tab;
+    const tabButtons = this.shadowRoot.querySelectorAll(".debugger-tab");
+    tabButtons.forEach((btn) => {
+      btn.classList.toggle("active", btn.dataset.tab === tab);
+    });
+    const tabContents = this.shadowRoot.querySelectorAll(".tab-content");
+    tabContents.forEach((content2) => {
+      content2.classList.toggle("active", content2.dataset.tabContent === tab);
+    });
+    const searchBar = this.shadowRoot.querySelector(".debugger-search-bar");
+    if (searchBar) {
+      searchBar.style.display = tab === "network" ? "flex" : "none";
+    }
+  }
+  syncLiquidSettings() {
+    if (typeof Container === "undefined") return;
+    const baseSettings = Container.settings || (typeof Container.loadSettings === "function" ? Container.loadSettings() : Container.defaultSettings || {});
+    const enableWebGL = baseSettings.enableWebGL !== false;
+    const autoRefresh = baseSettings.autoRefresh !== false;
+    const enableButtonAnimation = baseSettings.enableButtonAnimation !== false;
+    const settingsMap = {
+      enableWebGL,
+      autoRefresh,
+      enableButtonAnimation
+    };
+    const settingInputs = this.shadowRoot.querySelectorAll("input[data-setting]");
+    settingInputs.forEach((input) => {
+      const key = input.getAttribute("data-setting");
+      if (!key) return;
+      const value = settingsMap[key];
+      if (typeof value !== "undefined") {
+        input.checked = value;
+      }
+      if (key !== "enableWebGL") {
+        input.disabled = !enableWebGL;
+      }
+    });
+    const autoGroup = this.shadowRoot.querySelector('[data-setting-group="autoRefresh"]');
+    if (autoGroup) {
+      autoGroup.classList.toggle("disabled", !enableWebGL);
+    }
+    const animGroup = this.shadowRoot.querySelector('[data-setting-group="enableButtonAnimation"]');
+    if (animGroup) {
+      animGroup.classList.toggle("disabled", !enableWebGL);
+    }
+    const manualRefreshBtn = this.shadowRoot.querySelector('[data-action="manual-refresh"]');
+    if (manualRefreshBtn) {
+      manualRefreshBtn.disabled = !enableWebGL;
+    }
+  }
+  handleSettingToggle(key, value) {
+    if (typeof Container !== "undefined" && typeof Container.updateSetting === "function") {
+      Container.updateSetting(key, value);
+    }
+    if (key === "enableWebGL") {
+      this.toggleWebGL(value);
+      if (value) {
+        this.scheduleLiquidGlassRefresh(true, 30);
+      }
+    }
+    if (key === "enableButtonAnimation" && value) {
+      this.scheduleLiquidGlassRefresh(true, 30);
+    }
+    this.syncLiquidSettings();
+  }
+  handleManualRefresh() {
+    if (typeof Container !== "undefined" && typeof Container.refreshAll === "function") {
+      Container.refreshAll(true);
+    }
+    this.webglManager?.updateBackgrounds(true);
   }
   startListening() {
     this.interceptor.addListener((request) => {
@@ -18984,6 +19230,8 @@ Created by Leo (@leeguoo)`);
     this.config.isClosed = false;
     this.saveConfig();
     this.removeReopenButton();
+    this.syncLiquidSettings();
+    this.switchTab(this.activeTab);
     this.scheduleLiquidGlassRefresh(true, 50);
   }
   hide() {
@@ -19529,7 +19777,7 @@ if (typeof window !== "undefined") {
 }
 function loadLiquidGlass() {
   return new Promise((resolve) => {
-    import("./container-qvHOCG_V.mjs").then(() => {
+    import("./container-fXvGYIU-.mjs").then(() => {
       return import("./button-B5OqHDUm.mjs");
     }).then(() => {
       resolve();
@@ -19670,7 +19918,7 @@ const _NetworkDebugger = class _NetworkDebugger {
   }
   async checkForUpdates() {
     try {
-      const currentVersion = "1.3.5";
+      const currentVersion = "1.3.7";
       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();
@@ -19690,7 +19938,7 @@ const _NetworkDebugger = class _NetworkDebugger {
       logger.error("[PWTK Update] Failed to check for updates:", error);
       return {
         hasUpdate: false,
-        currentVersion: "1.3.5"
+        currentVersion: "1.3.7"
       };
     }
   }