@leeguoo/pwtk-network-debugger 1.2.0 → 1.2.3

package/dist/index.esm.js

@@ -6711,6 +6711,9 @@ class NetworkInterceptor {
   generateRequestId() {
     return Math.random().toString(36).substr(2, 9);
   }
+  isInternalUrl(url) {
+    return url.includes("/ip/getSK") || url.includes("/api/dokv/storage") || url.includes("/api/share");
+  }
   notifyListeners(request) {
     this.listeners.forEach((listener) => {
       try {
@@ -6781,10 +6784,12 @@ class NetworkInterceptor {
       let url = "";
       let requestHeaders = {};
       const startTime = Date.now();
+      let isInternalRequest = false;
       const originalOpen = xhr.open;
       xhr.open = function(methodArg, urlArg, ...rest) {
         method = methodArg.toUpperCase();
         url = urlArg;
+        isInternalRequest = self2.isInternalUrl(url);
         return originalOpen.apply(this, [methodArg, urlArg, ...rest]);
       };
       const originalSetRequestHeader = xhr.setRequestHeader;
@@ -6794,6 +6799,9 @@ class NetworkInterceptor {
       };
       const originalSend = xhr.send;
       xhr.send = function(body) {
+        if (isInternalRequest) {
+          return originalSend.call(this, body);
+        }
         const requestData = {
           id: requestId,
           url,
@@ -6816,7 +6824,7 @@ class NetworkInterceptor {
         return originalSend.call(this, body);
       };
       xhr.addEventListener("readystatechange", function() {
-        if (xhr.readyState === XMLHttpRequest.DONE) {
+        if (xhr.readyState === XMLHttpRequest.DONE && !isInternalRequest) {
           const endTime = Date.now();
           const requestData = self2.requests.get(requestId);
           if (requestData) {
@@ -6858,13 +6866,16 @@ class NetworkInterceptor {
     window.XMLHttpRequest.prototype = originalXHR.prototype;
   }
   interceptFetch() {
-    const originalFetch = window.fetch;
+    const originalFetch = window.fetch(window).__originalFetch = originalFetch;
     const self2 = this;
     window.fetch = async function(input, init) {
       const requestId = self2.generateRequestId();
       const startTime = Date.now();
       const url = typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url;
       const method = (init?.method || "GET").toUpperCase();
+      if (self2.isInternalUrl(url)) {
+        return originalFetch.call(this, input, init);
+      }
       const requestHeaders = {};
       if (init?.headers) {
         if (init.headers instanceof Headers) {
@@ -7146,6 +7157,16 @@ const styles = `
 #network-debugger-panel.minimized {
   height: 40px !important;
   overflow: hidden;
+  width: auto !important;
+  min-width: 200px;
+}
+
+#network-debugger-panel.minimized .debugger-content {
+  display: none;
+}
+
+#network-debugger-panel.minimized .resize-handle {
+  display: none;
 }
 
 #network-debugger-panel.bottom-right {
@@ -7354,6 +7375,19 @@ const styles = `
   display: none;
 }
 
+/* 默认折叠headers */
+.request-details .detail-section.collapsible {
+  /* 默认折叠状态 */
+}
+
+.request-details .detail-section.collapsible:not(.expanded) .detail-content {
+  display: none;
+}
+
+.request-details .detail-section.collapsible:not(.expanded) .collapse-icon {
+  transform: rotate(-90deg);
+}
+
 .request-item.expanded .request-details {
   display: block;
 }
@@ -7372,6 +7406,45 @@ const styles = `
   padding-bottom: 4px;
 }
 
+.detail-title.highlight {
+  color: #FFD700;
+  font-size: 12px;
+  background: rgba(255, 215, 0, 0.1);
+  padding: 6px 8px;
+  border-radius: 4px;
+  border-bottom: 2px solid #FFD700;
+}
+
+.detail-title.clickable {
+  cursor: pointer;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.detail-title.clickable:hover {
+  background: rgba(76, 175, 80, 0.1);
+}
+
+.collapse-icon {
+  display: inline-block;
+  transition: transform 0.2s;
+  font-size: 10px;
+}
+
+.detail-section.collapsible {
+  position: relative;
+}
+
+.detail-section.collapsible.collapsed .detail-content {
+  display: none;
+}
+
+.detail-section.collapsible.collapsed .collapse-icon {
+  transform: rotate(-90deg);
+}
+
 .detail-content {
   background: #222;
   padding: 8px;
@@ -7620,54 +7693,58 @@ const styles = `
 `;
 async function createShareLink(requestData) {
   try {
+    const curlCommand = formatAsCurl(requestData);
     const shareData = {
-      // 基础信息
-      url: requestData.url,
-      method: requestData.method,
-      headers: requestData.headers,
-      status: requestData.status,
-      statusText: requestData.statusText,
-      timestamp: requestData.timestamp,
-      duration: requestData.duration,
-      // 请求和响应数据
-      requestBody: requestData.requestBody,
-      responseBody: requestData.responseBody,
-      responseHeaders: requestData.responseHeaders,
-      // 解密后的数据（如果有）
-      decryptedRequest: requestData.decryptedRequest,
-      decryptedResponse: requestData.decryptedResponse,
-      // 错误信息（如果有）
-      error: requestData.error,
-      // 元数据
-      creator: "PWTK Network Debugger by Leo (@leeguoo)",
-      createdAt: Date.now(),
-      version: "1.2.0"
+      // 原项目需要的核心字段
+      curl: curlCommand,
+      response: requestData.responseBody || null,
+      timestamp: Date.now(),
+      // 密钥相关（如果有）
+      keys: extractKeys(requestData.headers),
+      slk: requestData.headers?.slk || "",
+      // 额外的调试信息（向后兼容）
+      debuggerData: {
+        url: requestData.url,
+        method: requestData.method,
+        headers: requestData.headers,
+        status: requestData.status,
+        statusText: requestData.statusText,
+        duration: requestData.duration,
+        responseHeaders: requestData.responseHeaders,
+        decryptedRequest: requestData.decryptedRequest,
+        decryptedResponse: requestData.decryptedResponse,
+        error: requestData.error,
+        creator: "PWTK Network Debugger by Leo (@leeguoo)",
+        version: "1.2.0"
+      }
     };
-    const response = await fetch("https://gw-card-pay.buyacard.cc/api/dokv/storage", {
+    const originalFetch = window.__originalFetch || window.fetch;
+    const response = await originalFetch("https://curl.bwg.leeguoo.com/api/share", {
       method: "POST",
       headers: {
         "Content-Type": "application/json"
       },
       body: JSON.stringify({
-        data: shareData,
-        type: "network-request",
-        expireIn: 7 * 24 * 60 * 60 * 1e3
-        // 7天过期
+        data: shareData
       })
     });
     const result = await response.json();
-    if (result.success && result.id) {
-      const shareUrl = `https://curl.bwg.leeguoo.com/share/${result.id}`;
+    if (result.shareId) {
+      const shareUrl = `https://curl.bwg.leeguoo.com/share/${result.shareId}`;
       console.log(`🔗 分享链接创建成功 (by Leo): ${shareUrl}`);
       return shareUrl;
     } else {
-      throw new Error(result.message || "创建分享失败");
+      throw new Error(result.error || "创建分享失败");
     }
   } catch (error) {
     console.error("NetworkDebugger: 创建分享链接失败:", error);
     throw error;
   }
 }
+function extractKeys(headers) {
+  if (!headers) return "";
+  return headers.keys || headers.cid || headers["x-api-key"] || "";
+}
 async function copyToClipboard(text) {
   try {
     if (navigator.clipboard && navigator.clipboard.writeText) {
@@ -7689,6 +7766,22 @@ async function copyToClipboard(text) {
     return false;
   }
 }
+function formatAsCurl(requestData) {
+  let curl = `curl '${requestData.url}'`;
+  if (requestData.method !== "GET") {
+    curl += ` -X ${requestData.method}`;
+  }
+  if (requestData.headers) {
+    Object.entries(requestData.headers).forEach(([key, value]) => {
+      curl += ` -H '${key}: ${value}'`;
+    });
+  }
+  if (requestData.requestBody) {
+    const body = typeof requestData.requestBody === "string" ? requestData.requestBody : JSON.stringify(requestData.requestBody);
+    curl += ` --data '${body}'`;
+  }
+  return curl;
+}
 class DebugPanel {
   constructor(interceptor, config = {}) {
     this.isDragging = false;
@@ -7721,12 +7814,12 @@ class DebugPanel {
     this.container.className = `${this.config.position} ${this.config.minimized ? "minimized" : ""}`;
     this.container.innerHTML = `
       <div class="debugger-header">
-        <div class="debugger-title">🔍 Network Debugger <span style="font-size: 10px; opacity: 0.7;">by Leo</span></div>
+        <div class="debugger-title">🔓 ${this.config.minimized ? "PWTK" : "PWTK 解密小工具"} <span style="font-size: 10px; opacity: 0.7;">by Leo</span></div>
         <div class="debugger-controls">
-          <button class="debugger-btn" data-action="clear" title="清空">🗑️</button>
-          <button class="debugger-btn" data-action="export" title="导出">💾</button>
-          <button class="debugger-btn" data-action="minimize" title="最小化">${this.config.minimized ? "📖" : "📕"}</button>
-          <button class="debugger-btn" data-action="fullscreen" title="全屏">⛶</button>
+          ${!this.config.minimized ? '<button class="debugger-btn" data-action="clear" title="清空">🗑️</button>' : ""}
+          ${!this.config.minimized ? '<button class="debugger-btn" data-action="export" title="导出">💾</button>' : ""}
+          <button class="debugger-btn" data-action="minimize" title="${this.config.minimized ? "展开" : "最小化"}">${this.config.minimized ? "📖" : "📕"}</button>
+          ${!this.config.minimized ? '<button class="debugger-btn" data-action="fullscreen" title="全屏">⛶</button>' : ""}
           <button class="debugger-btn" data-action="close" title="关闭">✕</button>
         </div>
       </div>
@@ -7765,8 +7858,8 @@ class DebugPanel {
           </div>
           <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 Network Debugger</h2>
-              <p style="margin: 10px 0;">Version: 1.2.0</p>
+              <h2 style="margin: 0 0 20px 0;">🔓 PWTK 解密小工具</h2>
+              <p style="margin: 10px 0;">Version: 1.2.3</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>
@@ -7919,44 +8012,49 @@ class DebugPanel {
   }
   renderRequestDetails(request) {
     let html = "";
-    if (Object.keys(request.headers).length > 0) {
+    request.id.replace(/[^a-zA-Z0-9]/g, "");
+    if (request.decryptedRequest) {
       html += `
         <div class="detail-section">
-          <div class="detail-title">请求头</div>
+          <div class="detail-title highlight">🔓 解密请求数据</div>
           <div class="detail-content">
-            <table class="headers-table">
-              ${Object.entries(request.headers).map(
-        ([key, value]) => `<tr><td>${key}</td><td>${value}</td></tr>`
-      ).join("")}
-            </table>
+            <div class="json-content">${this.formatData(request.decryptedRequest)}</div>
           </div>
         </div>
       `;
     }
-    if (request.requestBody) {
+    if (request.decryptedResponse) {
       html += `
         <div class="detail-section">
-          <div class="detail-title">请求数据</div>
+          <div class="detail-title highlight">🔓 解密响应数据</div>
           <div class="detail-content">
-            <div class="json-content">${this.formatData(request.requestBody)}</div>
+            <div class="json-content">${this.formatData(request.decryptedResponse)}</div>
           </div>
         </div>
       `;
     }
-    if (request.decryptedRequest) {
+    if (Object.keys(request.headers).length > 0) {
       html += `
-        <div class="detail-section">
-          <div class="detail-title">解密请求数据 🔓</div>
+        <div class="detail-section collapsible collapsed">
+          <div class="detail-title clickable" onclick="this.parentElement.classList.toggle('collapsed')">
+            <span class="collapse-icon">▼</span> 请求头 (${Object.keys(request.headers).length})
+          </div>
           <div class="detail-content">
-            <div class="json-content">${this.formatData(request.decryptedRequest)}</div>
+            <table class="headers-table">
+              ${Object.entries(request.headers).map(
+        ([key, value]) => `<tr><td>${key}</td><td>${value}</td></tr>`
+      ).join("")}
+            </table>
           </div>
         </div>
       `;
     }
     if (request.responseHeaders && Object.keys(request.responseHeaders).length > 0) {
       html += `
-        <div class="detail-section">
-          <div class="detail-title">响应头</div>
+        <div class="detail-section collapsible collapsed">
+          <div class="detail-title clickable" onclick="this.parentElement.classList.toggle('collapsed')">
+            <span class="collapse-icon">▼</span> 响应头 (${Object.keys(request.responseHeaders).length})
+          </div>
           <div class="detail-content">
             <table class="headers-table">
               ${Object.entries(request.responseHeaders).map(
@@ -7967,22 +8065,22 @@ class DebugPanel {
         </div>
       `;
     }
-    if (request.responseBody) {
+    if (request.requestBody && !request.decryptedRequest) {
       html += `
         <div class="detail-section">
-          <div class="detail-title">响应数据</div>
+          <div class="detail-title">请求数据</div>
           <div class="detail-content">
-            <div class="json-content">${this.formatData(request.responseBody)}</div>
+            <div class="json-content">${this.formatData(request.requestBody)}</div>
           </div>
         </div>
       `;
     }
-    if (request.decryptedResponse) {
+    if (request.responseBody && !request.decryptedResponse) {
       html += `
         <div class="detail-section">
-          <div class="detail-title">解密响应数据 🔓</div>
+          <div class="detail-title">响应数据</div>
           <div class="detail-content">
-            <div class="json-content">${this.formatData(request.decryptedResponse)}</div>
+            <div class="json-content">${this.formatData(request.responseBody)}</div>
           </div>
         </div>
       `;
@@ -8087,8 +8185,41 @@ Created by Leo (@leeguoo)`);
   toggleMinimize() {
     this.config.minimized = !this.config.minimized;
     this.container.classList.toggle("minimized", this.config.minimized);
-    const btn = this.container.querySelector('[data-action="minimize"]');
-    btn.textContent = this.config.minimized ? "📖" : "📕";
+    const header = this.container.querySelector(".debugger-header");
+    if (header) {
+      header.innerHTML = `
+        <div class="debugger-title">🔓 ${this.config.minimized ? "PWTK" : "PWTK 解密小工具"} <span style="font-size: 10px; opacity: 0.7;">by Leo</span></div>
+        <div class="debugger-controls">
+          ${!this.config.minimized ? '<button class="debugger-btn" data-action="clear" title="清空">🗑️</button>' : ""}
+          ${!this.config.minimized ? '<button class="debugger-btn" data-action="export" title="导出">💾</button>' : ""}
+          <button class="debugger-btn" data-action="minimize" title="${this.config.minimized ? "展开" : "最小化"}">${this.config.minimized ? "📖" : "📕"}</button>
+          ${!this.config.minimized ? '<button class="debugger-btn" data-action="fullscreen" title="全屏">⛶</button>' : ""}
+          <button class="debugger-btn" data-action="close" title="关闭">✕</button>
+        </div>
+      `;
+      const controls = header.querySelector(".debugger-controls");
+      controls.addEventListener("click", (e) => {
+        const target = e.target;
+        const action = target.dataset.action;
+        switch (action) {
+          case "clear":
+            this.clearRequests();
+            break;
+          case "export":
+            this.exportData();
+            break;
+          case "minimize":
+            this.toggleMinimize();
+            break;
+          case "fullscreen":
+            this.toggleFullscreen();
+            break;
+          case "close":
+            this.hide();
+            break;
+        }
+      });
+    }
   }
   toggleFullscreen() {
     this.container.classList.toggle("fullscreen");
@@ -8330,7 +8461,7 @@ class NetworkDebugger {
       this.initialized = true;
       console.log(`
 ╔════════════════════════════════════════╗
-║  PWTK Network Debugger v1.2.0         ║
+║  🔓 PWTK 解密小工具 v1.2.3            ║
 ║  Created by Leo (@leeguoo)             ║
 ║  技术支持: 请联系 Leo                 ║  
 ║  分享服务: curl.bwg.leeguoo.com       ║