@leeguoo/pwtk-network-debugger 1.2.45 → 1.2.47

package/dist/index.esm.js

@@ -7953,21 +7953,21 @@ const styles = `
   }
 }
 
-::-webkit-scrollbar {
+#network-debugger-panel ::-webkit-scrollbar {
   width: 6px;
   height: 6px;
 }
 
-::-webkit-scrollbar-track {
+#network-debugger-panel ::-webkit-scrollbar-track {
   background: #333;
 }
 
-::-webkit-scrollbar-thumb {
+#network-debugger-panel ::-webkit-scrollbar-thumb {
   background: #666;
   border-radius: 3px;
 }
 
-::-webkit-scrollbar-thumb:hover {
+#network-debugger-panel ::-webkit-scrollbar-thumb:hover {
   background: #888;
 }
 
@@ -8251,6 +8251,7 @@ const _DebugPanel = class _DebugPanel {
       theme: "dark",
       minimized: false,
       showConsole: true,
+      isClosed: false,
       ...savedConfig,
       // 先应用保存的配置
       ...config
@@ -8261,17 +8262,22 @@ const _DebugPanel = class _DebugPanel {
     this.startListening();
     logger.setPanel(this);
     this.loadPosition();
+    if (this.config.isClosed) {
+      this.hide();
+    }
   }
   createPanel() {
-    if (!document.getElementById("network-debugger-styles")) {
-      const styleEl = document.createElement("style");
-      styleEl.id = "network-debugger-styles";
-      styleEl.textContent = styles;
-      document.head.appendChild(styleEl);
-    }
+    this.hostElement = document.createElement("div");
+    this.hostElement.id = "network-debugger-host";
+    this.hostElement.style.cssText = "all: initial; position: absolute; top: 0; left: 0; pointer-events: none;";
+    this.shadowRoot = this.hostElement.attachShadow({ mode: "closed" });
+    const styleEl = document.createElement("style");
+    styleEl.textContent = styles;
+    this.shadowRoot.appendChild(styleEl);
     this.container = document.createElement("div");
     this.container.id = "network-debugger-panel";
     this.container.className = `${this.config.position} ${this.config.minimized ? "minimized" : ""}`;
+    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</span></div>
@@ -8318,7 +8324,7 @@ const _DebugPanel = class _DebugPanel {
           <div class="about-panel" data-panel="about" style="display: none;">
             <div style="padding: 20px; color: #fff; text-align: center;">
               <h2 style="margin: 0 0 20px 0;">🔓 PWTK 解密小工具</h2>
-              <p style="margin: 10px 0;">Version: ${"1.2.45"}</p>
+              <p style="margin: 10px 0;">Version: ${"1.2.47"}</p>
               <p style="margin: 10px 0;">👨‍💻 Created by <strong>Leo (@leeguoo)</strong></p>
               <p style="margin: 10px 0;">📧 技术支持：请联系 Leo</p>
               <p style="margin: 10px 0;">🌐 分享服务：curl.bwg.leeguoo.com</p>
@@ -8332,10 +8338,11 @@ const _DebugPanel = class _DebugPanel {
       </div>
     `;
     this.addResizeHandles();
-    document.body.appendChild(this.container);
-    this.networkTab = this.container.querySelector('[data-panel="network"]');
-    this.consoleTab = this.container.querySelector('[data-panel="console"]');
-    this.consoleContent = this.container.querySelector(".console-content");
+    this.shadowRoot.appendChild(this.container);
+    document.body.appendChild(this.hostElement);
+    this.networkTab = this.shadowRoot.querySelector('[data-panel="network"]');
+    this.consoleTab = this.shadowRoot.querySelector('[data-panel="console"]');
+    this.consoleContent = this.shadowRoot.querySelector(".console-content");
   }
   addResizeHandles() {
     const handles = ["n", "s", "e", "w", "ne", "nw", "se", "sw"];
@@ -8347,11 +8354,11 @@ const _DebugPanel = class _DebugPanel {
     });
   }
   bindEvents() {
-    const header = this.container.querySelector(".debugger-header");
-    const controls = this.container.querySelector(".debugger-controls");
-    const tabs = this.container.querySelectorAll(".debugger-tab");
-    const toolButtons = this.container.querySelectorAll("[data-tool]");
-    const consoleInput = this.container.querySelector(".console-cmd");
+    const header = this.shadowRoot.querySelector(".debugger-header");
+    const controls = this.shadowRoot.querySelector(".debugger-controls");
+    const tabs = this.shadowRoot.querySelectorAll(".debugger-tab");
+    const toolButtons = this.shadowRoot.querySelectorAll("[data-tool]");
+    const consoleInput = this.shadowRoot.querySelector(".console-cmd");
     header.addEventListener("mousedown", (e) => {
       if (e.target === controls || controls.contains(e.target)) return;
       this.startDrag(e);
@@ -8402,7 +8409,7 @@ const _DebugPanel = class _DebugPanel {
         }
       });
     }
-    const resizeHandles = this.container.querySelectorAll(".resize-handle");
+    const resizeHandles = this.shadowRoot.querySelectorAll(".resize-handle");
     resizeHandles.forEach((handle) => {
       handle.addEventListener("mousedown", (e) => {
         e.stopPropagation();
@@ -8442,7 +8449,7 @@ const _DebugPanel = class _DebugPanel {
     this.renderRequests();
   }
   renderRequests() {
-    const listContainer = this.container.querySelector(".request-list");
+    const listContainer = this.shadowRoot.querySelector(".request-list");
     if (!listContainer) return;
     listContainer.innerHTML = "";
     this.requestsCache.forEach((request) => {
@@ -8623,10 +8630,10 @@ const _DebugPanel = class _DebugPanel {
     return url;
   }
   switchTab(tabName) {
-    this.container.querySelectorAll(".debugger-tab").forEach((tab) => {
+    this.shadowRoot.querySelectorAll(".debugger-tab").forEach((tab) => {
       tab.classList.toggle("active", tab.dataset.tab === tabName);
     });
-    this.container.querySelectorAll("[data-panel]").forEach((panel) => {
+    this.shadowRoot.querySelectorAll("[data-panel]").forEach((panel) => {
       const panelEl = panel;
       panelEl.style.display = panel.getAttribute("data-panel") === tabName ? "block" : "none";
     });
@@ -8720,7 +8727,7 @@ Created by Leo (@leeguoo)`);
     }
   }
   handleToolAction(tool) {
-    const textarea = this.container.querySelector(".tools-content textarea");
+    const textarea = this.shadowRoot.querySelector(".tools-content textarea");
     const input = textarea.value.trim();
     switch (tool) {
       case "parse-curl":
@@ -8970,20 +8977,37 @@ Created by Leo (@leeguoo)`);
     }
   }
   show() {
-    this.container.style.display = "block";
+    this.hostElement.style.display = "block";
+    this.config.isClosed = false;
+    this.saveConfig();
     this.removeReopenButton();
   }
   hide() {
-    this.container.style.display = "none";
+    this.hostElement.style.display = "none";
+    this.config.isClosed = true;
+    this.saveConfig();
     this.createReopenButton();
   }
   createReopenButton() {
     if (document.getElementById("network-debugger-reopen-btn")) return;
     const btn = document.createElement("button");
     btn.id = "network-debugger-reopen-btn";
-    btn.className = "debugger-reopen-btn";
     btn.title = "打开调试面板 (可拖动)";
     btn.textContent = "PWTK";
+    btn.style.cssText = `
+      position: fixed;
+      z-index: 999999;
+      background: #4CAF50;
+      color: #000;
+      border: none;
+      padding: 8px 10px;
+      border-radius: 16px;
+      font-weight: bold;
+      font-size: 12px;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.25);
+      cursor: pointer;
+      transition: filter 0.2s;
+    `;
     const pos = this.config.position || "bottom-right";
     if (pos.includes("bottom")) {
       btn.style.bottom = "20px";
@@ -9036,14 +9060,19 @@ Created by Leo (@leeguoo)`);
       if (isDragging) {
         isDragging = false;
         btn.style.cursor = "pointer";
-        btn.style.transition = "all 0.3s ease";
+        btn.style.transition = "filter 0.2s";
       } else {
         this.show();
       }
     };
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleMouseUp);
-    btn.style.cursor = "pointer";
+    btn.addEventListener("mouseenter", () => {
+      btn.style.filter = "brightness(0.95)";
+    });
+    btn.addEventListener("mouseleave", () => {
+      btn.style.filter = "brightness(1)";
+    });
     document.body.appendChild(btn);
   }
   removeReopenButton() {
@@ -9051,9 +9080,7 @@ Created by Leo (@leeguoo)`);
     if (btn) btn.remove();
   }
   destroy() {
-    this.container.remove();
-    const styles2 = document.getElementById("network-debugger-styles");
-    if (styles2) styles2.remove();
+    this.hostElement.remove();
     this.removeReopenButton();
   }
   // ========== localStorage 方法 ==========
@@ -9082,7 +9109,8 @@ Created by Leo (@leeguoo)`);
         position: this.config.position,
         theme: this.config.theme,
         minimized: this.config.minimized,
-        showConsole: this.config.showConsole
+        showConsole: this.config.showConsole,
+        isClosed: this.config.isClosed
       };
       localStorage.setItem(_DebugPanel.STORAGE_KEY, JSON.stringify(configToSave));
       logger.debug("配置已保存:", configToSave);
@@ -9207,7 +9235,7 @@ class NetworkDebugger {
       this.initialized = true;
       logger.consoleDirect(`
 ╔════════════════════════════════════════╗
-║  🔓 PWTK 解密小工具 v${"1.2.45"}           ║
+║  🔓 PWTK 解密小工具 v${"1.2.47"}           ║
 ║  Created by Leo (@leeguoo)             ║
 ║  技术支持: 请联系 Leo                 ║  
 ║  分享服务: curl.bwg.leeguoo.com       ║
@@ -9268,7 +9296,7 @@ class NetworkDebugger {
   }
   async checkForUpdates() {
     try {
-      const currentVersion = "1.2.45";
+      const currentVersion = "1.2.47";
       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();
@@ -9288,7 +9316,7 @@ class NetworkDebugger {
       logger.error("[PWTK Update] Failed to check for updates:", error);
       return {
         hasUpdate: false,
-        currentVersion: "1.2.45"
+        currentVersion: "1.2.47"
       };
     }
   }