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

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);
@@ -7810,7 +7912,7 @@ const styles = `
   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: 16px;
   padding: 16px;
-  cursor: pointer;
+  cursor: default;
   
   /* 深度阴影和玻璃效果 */
   box-shadow: 
@@ -7906,6 +8008,7 @@ const styles = `
   justify-content: space-between;
   align-items: center;
   margin-bottom: 4px;
+  cursor: pointer;
 }
 
 .request-method {
@@ -8104,6 +8207,7 @@ const styles = `
   max-height: 400px;
   min-height: 300px;
   overflow: auto;
+  user-select: text;
   
   /* 内部阴影 */
   box-shadow: 
@@ -17713,6 +17817,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 +17931,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 +17992,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.4"}</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 +18000,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 +18033,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 +18120,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 +18223,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 +18368,10 @@ const _DebugPanel = class _DebugPanel {
   // 移除 switchTab 方法 - 不再需要标签页切换
   clearRequests() {
     this.requestsCache = [];
+    this.filteredRequestsCache = [];
     this.interceptor.clearRequests();
     this.renderRequests();
+    this.updateSearchStats();
   }
   exportData() {
     const data = {
@@ -18854,7 +19052,7 @@ class NetworkDebugger {
       this.initialized = true;
       logger.consoleDirect(`
 ╔════════════════════════════════════════╗
-║  🔓 PWTK 解密小工具 v${"1.2.49-beta.3"}           ║
+║  🔓 PWTK 解密小工具 v${"1.2.49-beta.4"}           ║
 ║  Created by Leo (@leeguoo)             ║
 ║  技术支持: 请联系 Leo                 ║  
 ║  分享服务: curl.bwg.leeguoo.com       ║
@@ -18915,7 +19113,7 @@ class NetworkDebugger {
   }
   async checkForUpdates() {
     try {
-      const currentVersion = "1.2.49-beta.3";
+      const currentVersion = "1.2.49-beta.4";
       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 +19133,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.4"
       };
     }
   }