@leeguoo/pwtk-network-debugger 1.2.49-beta.3 → 1.2.49-beta.5

package/dist/index.esm.js

@@ -7693,6 +7693,108 @@ const styles = `
   z-index: 3;
 }
 
+/* 搜索栏样式 */
+.debugger-search-bar {
+  padding: 8px 15px;
+  backdrop-filter: blur(10px) brightness(1.08);
+  -webkit-backdrop-filter: blur(10px) brightness(1.08);
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.5),
+    rgba(255, 255, 255, 0.3)
+  );
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  position: relative;
+  z-index: 5;
+}
+
+.search-input-wrapper {
+  flex: 1;
+  position: relative;
+  display: flex;
+  align-items: center;
+  background: rgba(255, 255, 255, 0.7);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  border-radius: 12px;
+  padding: 6px 12px;
+  transition: all 0.2s ease;
+  box-shadow: 
+    inset 0 1px 3px rgba(0, 0, 0, 0.08),
+    0 1px 1px rgba(255, 255, 255, 0.5);
+}
+
+.search-input-wrapper:focus-within {
+  background: rgba(255, 255, 255, 0.9);
+  border-color: rgba(0, 122, 255, 0.3);
+  box-shadow: 
+    inset 0 1px 3px rgba(0, 0, 0, 0.1),
+    0 0 0 3px rgba(0, 122, 255, 0.1);
+}
+
+.search-icon {
+  margin-right: 6px;
+  opacity: 0.5;
+  flex-shrink: 0;
+}
+
+.search-input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  color: rgba(60, 60, 67, 0.9);
+  font-size: 13px;
+  outline: none;
+  font-family: inherit;
+}
+
+.search-input::placeholder {
+  color: rgba(60, 60, 67, 0.5);
+}
+
+.search-clear-btn {
+  background: rgba(0, 0, 0, 0.05);
+  border: none;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: rgba(60, 60, 67, 0.7);
+  font-size: 16px;
+  line-height: 1;
+  padding: 0;
+  margin-left: 4px;
+  flex-shrink: 0;
+  transition: all 0.2s ease;
+}
+
+.search-clear-btn:hover {
+  background: rgba(0, 0, 0, 0.1);
+  color: rgba(60, 60, 67, 0.9);
+}
+
+.search-stats {
+  color: rgba(60, 60, 67, 0.7);
+  font-size: 12px;
+  white-space: nowrap;
+  display: none;
+}
+
+/* 空搜索结果样式 */
+.empty-search-result {
+  padding: 20px;
+}
+
+.empty-search-result svg {
+  display: block;
+  margin: 0 auto;
+}
+
 .debugger-btn {
   /* 按钮毛玻璃效果但保证可见性 */
   backdrop-filter: blur(8px);
@@ -7788,29 +7890,12 @@ const styles = `
   backdrop-filter: blur(10px) brightness(1.1);
   -webkit-backdrop-filter: blur(10px) brightness(1.1);
   
-  /* 多层背景 - 模拟 Liquid Glass */
-  background: 
-    /* 动态光效层 */
-    linear-gradient(
-      105deg,
-      transparent 35%,
-      rgba(255, 255, 255, 0.25) 45%,
-      rgba(255, 255, 255, 0.35) 50%,
-      rgba(255, 255, 255, 0.25) 55%,
-      transparent 65%
-    ),
-    /* 基础玻璃层 */
-    linear-gradient(
-      135deg,
-      rgba(255, 255, 255, 0.8),
-      rgba(255, 255, 255, 0.6)
-    );
-    
-  background-size: 300% 100%, 100% 100%;
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  /* 背景极简化，避免遮挡文本 */
+  background: rgba(255, 255, 255, 0.35);
+  border: 1px solid rgba(255, 255, 255, 0.28);
   border-radius: 16px;
   padding: 16px;
-  cursor: pointer;
+  cursor: default;
   
   /* 深度阴影和玻璃效果 */
   box-shadow: 
@@ -7906,6 +7991,7 @@ const styles = `
   justify-content: space-between;
   align-items: center;
   margin-bottom: 4px;
+  cursor: pointer;
 }
 
 .request-method {
@@ -7957,7 +8043,7 @@ const styles = `
   margin: 0 8px;
   word-break: break-all;
   white-space: normal;
-  color: rgba(60, 60, 67, 0.9);
+  color: rgba(20, 20, 33, 0.98);
   font-size: 11px;
   line-height: 1.3;
 }
@@ -8104,6 +8190,7 @@ const styles = `
   max-height: 400px;
   min-height: 300px;
   overflow: auto;
+  user-select: text;
   
   /* 内部阴影 */
   box-shadow: 
@@ -8142,7 +8229,7 @@ const styles = `
 }
 
 .headers-table td {
-  color: rgba(60, 60, 67, 0.8);
+  color: rgba(20, 20, 33, 0.85);
 }
 
 .decrypted-badge {
@@ -17713,6 +17800,13 @@ const _WebGLManager = class _WebGLManager {
       return false;
     }
     try {
+      if (!this.scene) {
+        console.warn("WebGL scene not ready");
+        return false;
+      }
+      if (this.scene.getLayer(layerId)) {
+        this.scene.removeLayer(layerId);
+      }
       const layer = this.scene.createLayer(layerId, element, {
         zIndex: 1,
         quality: this.config.quality,
@@ -17820,6 +17914,8 @@ const _DebugPanel = class _DebugPanel {
     this.resizeTimeout = null;
     this.resizeDirection = "";
     this.requestsCache = [];
+    this.filteredRequestsCache = [];
+    this.searchQuery = "";
     this.webglManager = null;
     this.reopenButton = null;
     this.webglBackgroundUpdateTimer = null;
@@ -17879,7 +17975,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.3"}</span></div>
+        <div class="debugger-title">🔓 PWTK 解密小工具 <span style="font-size: 10px; opacity: 0.7;">by Leo v${"1.2.49-beta.5"}</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>
@@ -17887,6 +17983,14 @@ const _DebugPanel = class _DebugPanel {
           <button class="debugger-btn" data-action="close" title="关闭"><svg class="debugger-icon" viewBox="0 0 24 24"><path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg></button>
         </div>
       </div>
+      <div class="debugger-search-bar">
+        <div class="search-input-wrapper">
+          <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="debugger-panel-content">
           <div class="network-panel">
@@ -17912,8 +18016,28 @@ const _DebugPanel = class _DebugPanel {
   bindEvents() {
     const header = this.shadowRoot.querySelector(".debugger-header");
     const controls = this.shadowRoot.querySelector(".debugger-controls");
+    const searchInput = this.shadowRoot.querySelector(".search-input");
+    const searchClearBtn = this.shadowRoot.querySelector(".search-clear-btn");
+    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";
+      }
+    });
+    searchClearBtn.addEventListener("click", () => {
+      searchInput.value = "";
+      this.searchQuery = "";
+      searchClearBtn.style.display = "none";
+      this.filterRequests();
+      searchInput.focus();
+    });
     header.addEventListener("mousedown", (e2) => {
       if (e2.target === controls || controls.contains(e2.target)) return;
+      if (e2.target.closest(".debugger-search-bar")) return;
       this.startDrag(e2);
     });
     controls.addEventListener("click", (e2) => {
@@ -17979,21 +18103,81 @@ const _DebugPanel = class _DebugPanel {
     }
     this.renderRequests();
   }
+  filterRequests() {
+    if (!this.searchQuery) {
+      this.filteredRequestsCache = this.requestsCache;
+    } else {
+      const query = this.searchQuery.toLowerCase();
+      this.filteredRequestsCache = this.requestsCache.filter((request) => {
+        if (request.url.toLowerCase().includes(query)) return true;
+        if (request.method.toLowerCase().includes(query)) return true;
+        if (request.status && request.status.toString().includes(query)) return true;
+        if (request.requestBody) {
+          const bodyStr = typeof request.requestBody === "string" ? request.requestBody : JSON.stringify(request.requestBody);
+          if (bodyStr.toLowerCase().includes(query)) return true;
+        }
+        if (request.responseBody) {
+          const bodyStr = typeof request.responseBody === "string" ? request.responseBody : JSON.stringify(request.responseBody);
+          if (bodyStr.toLowerCase().includes(query)) return true;
+        }
+        if (request.decryptedRequest) {
+          const decryptedStr = typeof request.decryptedRequest === "string" ? request.decryptedRequest : JSON.stringify(request.decryptedRequest);
+          if (decryptedStr.toLowerCase().includes(query)) return true;
+        }
+        if (request.decryptedResponse) {
+          const decryptedStr = typeof request.decryptedResponse === "string" ? request.decryptedResponse : JSON.stringify(request.decryptedResponse);
+          if (decryptedStr.toLowerCase().includes(query)) return true;
+        }
+        return false;
+      });
+    }
+    this.renderRequests();
+    this.updateSearchStats();
+  }
+  updateSearchStats() {
+    const statsContainer = this.shadowRoot.querySelector(".search-stats");
+    if (!statsContainer) return;
+    if (this.searchQuery) {
+      const total = this.requestsCache.length;
+      const filtered = this.filteredRequestsCache.length;
+      statsContainer.textContent = `显示 ${filtered} / ${total} 条`;
+      statsContainer.style.display = "block";
+    } else {
+      statsContainer.textContent = "";
+      statsContainer.style.display = "none";
+    }
+  }
   renderRequests() {
     const listContainer = this.shadowRoot.querySelector(".request-list");
     if (!listContainer) return;
     listContainer.innerHTML = "";
-    this.requestsCache.forEach((request, index) => {
+    const requestsToRender = this.searchQuery ? this.filteredRequestsCache : this.requestsCache;
+    if (requestsToRender.length === 0 && this.searchQuery) {
+      const emptyMessage = document.createElement("div");
+      emptyMessage.className = "empty-search-result";
+      emptyMessage.innerHTML = `
+        <div style="text-align: center; padding: 40px 20px; color: #999;">
+          <svg viewBox="0 0 24 24" width="48" height="48" style="opacity: 0.5; margin-bottom: 10px;"><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>
+          <p>未找到匹配的请求</p>
+          <p style="font-size: 12px; opacity: 0.7;">搜索："${this.searchQuery}"</p>
+        </div>
+      `;
+      listContainer.appendChild(emptyMessage);
+      return;
+    }
+    requestsToRender.forEach((request, index) => {
       const item = this.createRequestItem(request);
       listContainer.appendChild(item);
       if (this.webglManager) {
-        setTimeout(() => {
+        const layerId = `request-item-${index}`;
+        this.webglManager.disableForElement(layerId);
+        requestAnimationFrame(() => {
           try {
-            this.webglManager.enableForElement(item, `request-item-${index}`);
+            this.webglManager.enableForElement(item, layerId);
           } catch (error) {
             logger.debug(`Failed to enable WebGL for request item ${index}:`, error);
           }
-        }, 100);
+        });
       }
     });
   }
@@ -18022,38 +18206,33 @@ const _DebugPanel = class _DebugPanel {
         ${this.renderRequestDetails(request)}
       </div>
     `;
-    item.addEventListener("click", (e2) => {
+    const headerEl = item.querySelector(".request-header");
+    headerEl?.addEventListener("click", (e2) => {
       const target = e2.target;
-      if (target.closest(".share-btn") || target.closest(".api-curl-btn") || target.closest('.detail-title[data-toggle="collapse"]')) {
+      if (target.closest(".share-btn") || target.closest(".api-curl-btn")) {
         return;
       }
       item.classList.toggle("expanded");
     });
     const shareBtn = item.querySelector(".share-btn");
-    if (shareBtn) {
-      shareBtn.addEventListener("click", async (e2) => {
-        e2.stopPropagation();
-        await this.shareRequest(request);
-      });
-    }
+    shareBtn?.addEventListener("click", async (e2) => {
+      e2.stopPropagation();
+      await this.shareRequest(request);
+    });
     const apiCurlBtn = item.querySelector(".api-curl-btn");
-    if (apiCurlBtn) {
-      apiCurlBtn.addEventListener("click", async (e2) => {
+    apiCurlBtn?.addEventListener("click", async (e2) => {
+      e2.stopPropagation();
+      await this.generateApiCurl(request);
+    });
+    const collapsibleTitles = item.querySelectorAll(".detail-section.collapsible .detail-title");
+    collapsibleTitles.forEach((title) => {
+      title.addEventListener("click", (e2) => {
         e2.stopPropagation();
-        await this.generateApiCurl(request);
+        const detailSection = title.parentElement;
+        if (!detailSection) return;
+        detailSection.classList.toggle("collapsed");
       });
-    }
-    item.addEventListener("click", (e2) => {
-      const target = e2.target;
-      if (target.closest('.detail-title[data-toggle="collapse"]')) {
-        e2.stopPropagation();
-        const detailTitle = target.closest(".detail-title");
-        const detailSection = detailTitle.parentElement;
-        if (detailSection && detailSection.classList.contains("collapsible")) {
-          detailSection.classList.toggle("collapsed");
-        }
-      }
-    }, { capture: true });
+    });
     return item;
   }
   renderRequestDetails(request) {
@@ -18172,8 +18351,10 @@ const _DebugPanel = class _DebugPanel {
   // 移除 switchTab 方法 - 不再需要标签页切换
   clearRequests() {
     this.requestsCache = [];
+    this.filteredRequestsCache = [];
     this.interceptor.clearRequests();
     this.renderRequests();
+    this.updateSearchStats();
   }
   exportData() {
     const data = {
@@ -18463,7 +18644,7 @@ Created by Leo (@leeguoo)`);
       }
       this.addDragFunctionality(glassButton.element);
       this.reopenButton = glassButton;
-      console.log("[PWTK] Glass button created successfully");
+      logger.debug("[PWTK] Glass button created successfully");
     } catch (error) {
       console.error("[PWTK] Failed to create glass button:", error);
       this.createFallbackButton();
@@ -18502,7 +18683,7 @@ Created by Leo (@leeguoo)`);
     btn.onclick = () => this.show();
     this.addDragFunctionality(btn);
     document.body.appendChild(btn);
-    console.log("[PWTK] Fallback button created");
+    logger.warn("[PWTK] Fallback button created");
   }
   addDragFunctionality(element) {
     let isDragging = false;
@@ -18854,7 +19035,7 @@ class NetworkDebugger {
       this.initialized = true;
       logger.consoleDirect(`
 ╔════════════════════════════════════════╗
-║  🔓 PWTK 解密小工具 v${"1.2.49-beta.3"}           ║
+║  🔓 PWTK 解密小工具 v${"1.2.49-beta.5"}           ║
 ║  Created by Leo (@leeguoo)             ║
 ║  技术支持: 请联系 Leo                 ║  
 ║  分享服务: curl.bwg.leeguoo.com       ║
@@ -18915,7 +19096,7 @@ class NetworkDebugger {
   }
   async checkForUpdates() {
     try {
-      const currentVersion = "1.2.49-beta.3";
+      const currentVersion = "1.2.49-beta.5";
       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();
@@ -18935,7 +19116,7 @@ class NetworkDebugger {
       logger.error("[PWTK Update] Failed to check for updates:", error);
       return {
         hasUpdate: false,
-        currentVersion: "1.2.49-beta.3"
+        currentVersion: "1.2.49-beta.5"
       };
     }
   }