@leeguoo/pwtk-network-debugger 1.2.48 → 1.2.49-beta.1

package/dist/index.esm.js

@@ -7397,77 +7397,134 @@ class WasmLoader {
     return this.loaded && typeof window.encrypt === "function";
   }
 }
-function parseCurl(curlCommand) {
-  const lines = curlCommand.split("\\\n").map((line) => line.trim());
-  const fullCommand = lines.join(" ");
-  const urlMatch = fullCommand.match(/c?curl\s+['"]?([^'"\s]+)['"]?/);
-  let url = urlMatch ? urlMatch[1] : "";
-  const headers = {};
-  const headerMatches = fullCommand.matchAll(/-H\s+['"]([^:]+):\s*([^'"]*)['"]/g);
-  for (const match of headerMatches) {
-    headers[match[1]] = match[2];
-  }
-  let data = void 0;
-  const dataMatch = fullCommand.match(/(?:--data-raw|--data|-d)\s+['"]({.+?})['"]/s);
-  if (dataMatch) {
-    const rawData = dataMatch[1];
-    try {
-      data = JSON.parse(rawData);
-    } catch {
-      data = rawData;
-    }
-  }
-  if (!dataMatch && url.includes("?")) {
-    try {
-      const urlObj = new URL(url, "http://example.com");
-      const params = {};
-      urlObj.searchParams.forEach((value, key) => {
-        params[key] = value;
-      });
-      if (Object.keys(params).length > 0) {
-        if (Object.keys(params).length === 1 && params.data) {
-          data = params.data;
-        } else {
-          data = params;
-        }
-      }
-    } catch (e) {
-    }
-  }
-  const methodMatch = fullCommand.match(/-X\s+(['"]?)([A-Z]+)\1/);
-  let method = methodMatch ? methodMatch[2] : dataMatch ? "POST" : "GET";
-  return {
-    url,
-    method,
-    headers,
-    data
-  };
-}
 function formatJson(obj) {
   return JSON.stringify(obj, null, 2);
 }
 const styles = `
-/* NetworkDebugger 样式 */
+/* iOS 26 Liquid Glass NetworkDebugger 样式 */
+:root {
+  --liquid-glass-primary: rgba(255, 255, 255, 0.15);
+  --liquid-glass-secondary: rgba(255, 255, 255, 0.08);
+  --liquid-glass-border: rgba(255, 255, 255, 0.18);
+  --liquid-glass-shadow: rgba(31, 38, 135, 0.37);
+  --liquid-glass-highlight: rgba(255, 255, 255, 0.25);
+  --liquid-glass-dark: rgba(13, 17, 23, 0.75);
+}
+
 #network-debugger-panel {
   position: fixed;
   z-index: 999999;
-  background: #1a1a1a;
+  
+  /* 强制 GPU 加速和 3D 变换 */
+  transform: translate3d(0, 0, 0);
+  will-change: transform, backdrop-filter;
+  
+  /* iOS 26 Liquid Glass 核心效果 - 增强版 */
+  backdrop-filter: blur(25px) saturate(200%) brightness(1.05) !important;
+  -webkit-backdrop-filter: blur(25px) saturate(200%) brightness(1.05) !important;
+  
+  /* iOS 浅色毛玻璃背景 */
+  background: rgba(245, 245, 247, 0.8);
+  background-image: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.5) 0%,
+    rgba(255, 255, 255, 0.25) 100%
+  );
+  
+  /* 玻璃边框 */
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  
+  /* 多层阴影创建深度 */
+  box-shadow: 
+    0 10px 40px rgba(31, 38, 135, 0.4),
+    inset 0 2px 4px rgba(255, 255, 255, 0.3),
+    inset 0 -2px 4px rgba(0, 0, 0, 0.12);
+    
+  border-radius: 20px;
   color: #ffffff;
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Monaco', 'Menlo', monospace;
   font-size: 12px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-  border-radius: 8px;
   overflow: hidden;
   max-width: 90vw;
   max-height: 80vh;
-  transition: all 0.3s ease;
+  
+  /* 性能优化 */
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* 主面板的镜面反射效果 */
+#network-debugger-panel::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.3) 0%,
+    rgba(255, 255, 255, 0.05) 50%,
+    transparent 100%
+  );
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* 镜面高光效果 */
+#network-debugger-panel::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: radial-gradient(
+    circle at 30% 30%,
+    rgba(255, 255, 255, 0.2),
+    transparent 70%
+  );
+  pointer-events: none;
+  z-index: 1;
 }
 
 #network-debugger-panel.minimized {
-  height: 35px !important;
+  /* iOS 控制中心风格的圆角矩形 */
+  height: 48px !important;
+  width: 220px !important;
+  max-width: 220px !important;
+  border-radius: 24px !important;
   overflow: hidden;
-  width: 160px !important;
-  max-width: 160px !important;
+  
+  /* 强制 GPU 加速和 3D 变换 */
+  transform: translate3d(0, 0, 0) !important;
+  will-change: transform, backdrop-filter !important;
+  
+  /* 真正的 iOS Liquid Glass 效果 - 加强版 */
+  background: 
+    /* 顶部高光 */
+    linear-gradient(180deg, 
+      rgba(255, 255, 255, 0.5) 0%, 
+      rgba(255, 255, 255, 0.1) 35%),
+    /* 主玻璃层 */
+    radial-gradient(ellipse at top, 
+      rgba(255, 255, 255, 0.35), 
+      rgba(255, 255, 255, 0.12)),
+    /* iOS 浅色基底 */
+    rgba(245, 245, 247, 0.85) !important;
+    
+  /* 增强毛玻璃效果 */
+  backdrop-filter: blur(40px) saturate(220%) brightness(1.1) !important;
+  -webkit-backdrop-filter: blur(40px) saturate(220%) brightness(1.1) !important;
+  
+  /* iOS 风格边缘光效 - 增强版 */
+  box-shadow: 
+    /* 外发光 */
+    0 0 0 0.5px rgba(255, 255, 255, 0.7) !important,
+    /* 内阴影创建玻璃厚度 */
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.7) !important,
+    inset 0 -1px 0 0 rgba(0, 0, 0, 0.2) !important,
+    /* 深度阴影 */
+    0 15px 40px rgba(0, 0, 0, 0.3) !important,
+    0 4px 10px rgba(0, 0, 0, 0.2) !important;
+    
+  /* 平滑过渡 */
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
 }
 
 #network-debugger-panel.minimized .debugger-content {
@@ -7482,32 +7539,37 @@ const styles = `
   display: none;
 }
 
+#network-debugger-panel.fullscreen {
+  backdrop-filter: blur(25px) saturate(200%);
+  -webkit-backdrop-filter: blur(25px) saturate(200%);
+}
+
 #network-debugger-panel.bottom-right {
   bottom: 20px;
   right: 20px;
-  width: 400px;
-  height: 300px;
+  width: 600px;
+  height: 500px;
 }
 
 #network-debugger-panel.bottom-left {
   bottom: 20px;
   left: 20px;
-  width: 400px;
-  height: 300px;
+  width: 600px;
+  height: 500px;
 }
 
 #network-debugger-panel.top-right {
   top: 20px;
   right: 20px;
-  width: 400px;
-  height: 300px;
+  width: 600px;
+  height: 500px;
 }
 
 #network-debugger-panel.top-left {
   top: 20px;
   left: 20px;
-  width: 400px;
-  height: 300px;
+  width: 600px;
+  height: 500px;
 }
 
 #network-debugger-panel.fullscreen {
@@ -7519,87 +7581,138 @@ const styles = `
 }
 
 .debugger-header {
-  background: #333;
-  padding: 8px 12px;
+  /* 头部 Liquid Glass 效果 */
+  backdrop-filter: blur(15px) brightness(1.1);
+  -webkit-backdrop-filter: blur(15px) brightness(1.1);
+  
+  /* 多层背景效果 */
+  background: 
+    /* 顶部高光 */
+    linear-gradient(180deg, 
+      rgba(255, 255, 255, 0.8) 0%, 
+      rgba(255, 255, 255, 0.4) 60%),
+    /* 基础玻璃层 */
+    linear-gradient(
+      135deg,
+      rgba(255, 255, 255, 0.6),
+      rgba(255, 255, 255, 0.4)
+    );
+    
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+  
+  padding: 12px 16px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   cursor: move;
   user-select: none;
-  border-bottom: 1px solid #444;
+  position: relative;
+  z-index: 2;
+  
+  /* iOS 风格圆角 */
+  border-radius: 20px 20px 0 0;
+  
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.debugger-header:hover {
+  backdrop-filter: blur(18px) brightness(1.15);
+  -webkit-backdrop-filter: blur(18px) brightness(1.15);
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.15),
+    rgba(255, 255, 255, 0.08)
+  );
 }
 
 .debugger-title {
-  font-weight: bold;
-  color: #4CAF50;
-  font-size: 14px;
+  font-weight: 600;
+  color: rgba(60, 60, 67, 0.9);
+  font-size: 15px;
+  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
 }
 
 .debugger-controls {
   display: flex;
-  gap: 8px;
+  gap: 10px;
+  position: relative;
+  z-index: 3;
 }
 
 .debugger-btn {
-  background: none;
-  border: none;
-  color: #fff;
-  padding: 4px 8px;
-  border-radius: 4px;
+  /* 按钮毛玻璃效果但保证可见性 */
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.7),
+    rgba(255, 255, 255, 0.5)
+  );
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  color: rgba(60, 60, 67, 0.9);
+  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
+  padding: 6px 12px;
+  border-radius: 12px;
   cursor: pointer;
-  font-size: 12px;
-  transition: background-color 0.2s;
+  font-size: 11px;
+  font-weight: 600;
+  
+  /* 按钮阴影 */
+  box-shadow: 
+    0 2px 8px rgba(0, 0, 0, 0.1),
+    inset 0 1px 0 rgba(255, 255, 255, 0.25);
+    
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transform: translateZ(0);
 }
 
 .debugger-btn:hover {
-  background: #555;
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.2),
+    rgba(255, 255, 255, 0.12)
+  );
+  transform: scale(1.05) translateZ(5px);
+  box-shadow: 
+    0 4px 16px rgba(0, 0, 0, 0.15),
+    inset 0 1px 0 rgba(255, 255, 255, 0.3);
+}
+
+.debugger-btn:active {
+  transform: scale(0.98);
+  transition: transform 0.1s;
 }
 
 .debugger-btn.active {
-  background: #4CAF50;
-  color: #000;
+  background: linear-gradient(135deg, #42b883, #35495e);
+  color: #ffffff;
+  box-shadow: 
+    0 0 20px rgba(66, 184, 131, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.3);
+  backdrop-filter: blur(10px);
 }
 
 .debugger-icon {
   width: 16px;
   height: 16px;
   vertical-align: middle;
+  filter: 
+    brightness(0.8) 
+    drop-shadow(0 1px 2px rgba(255, 255, 255, 0.8));
+  color: rgba(60, 60, 67, 0.8);
 }
 
 .debugger-content {
-  height: calc(100% - 40px);
+  height: calc(100% - 60px);
   overflow: hidden;
   display: flex;
   flex-direction: column;
 }
 
-.debugger-tabs {
-  display: flex;
-  background: #2a2a2a;
-  border-bottom: 1px solid #444;
-}
-
-.debugger-tab {
-  padding: 8px 16px;
-  cursor: pointer;
-  border: none;
-  background: none;
-  color: #ccc;
-  font-size: 12px;
-  transition: all 0.2s;
-  border-bottom: 2px solid transparent;
-}
-
-.debugger-tab:hover {
-  color: #fff;
-  background: #3a3a3a;
-}
-
-.debugger-tab.active {
-  color: #4CAF50;
-  border-bottom-color: #4CAF50;
-  background: #333;
-}
+/* 移除标签页相关样式 - 只保留网络面板 */
 
 .debugger-panel-content {
   flex: 1;
@@ -7610,27 +7723,138 @@ const styles = `
 .request-list {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 12px;
+  padding: 16px;
+  position: relative;
+  z-index: 2;
 }
 
 .request-item {
-  background: #2a2a2a;
-  border: 1px solid #444;
-  border-radius: 6px;
-  padding: 10px;
-  cursor: pointer;
-  transition: all 0.2s;
+  /* 请求项毛玻璃效果加动态光效 */
   position: relative;
+  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);
+  border-radius: 16px;
+  padding: 16px;
+  cursor: pointer;
+  
+  /* 深度阴影和玻璃效果 */
+  box-shadow: 
+    0 4px 16px rgba(31, 38, 135, 0.2),
+    inset 0 1px 2px rgba(255, 255, 255, 0.15),
+    inset 0 -1px 1px rgba(0, 0, 0, 0.05);
+    
+  /* 流体动画和光效 */
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  transform: translateZ(0);
+  animation: liquid-shimmer 4s ease-in-out infinite;
+}
+
+/* 模拟折射效果的伪元素 */
+.request-item::before {
+  content: '';
+  position: absolute;
+  inset: -1px;
+  border-radius: inherit;
+  background: radial-gradient(
+    circle at var(--mouse-x, 30%) var(--mouse-y, 30%),
+    rgba(255, 255, 255, 0.4) 0%,
+    rgba(255, 255, 255, 0.1) 30%,
+    transparent 70%
+  );
+  opacity: 0;
+  transition: opacity 0.4s ease;
+  pointer-events: none;
+  mix-blend-mode: overlay;
+  z-index: 1;
+}
+
+/* 高光效果伪元素 */
+.request-item::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 40%;
+  border-radius: 16px 16px 0 0;
+  background: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.2) 0%,
+    transparent 100%
+  );
+  pointer-events: none;
+  z-index: 1;
 }
 
 .request-item:hover {
-  background: #333;
-  border-color: #666;
+  backdrop-filter: blur(15px) brightness(1.2);
+  -webkit-backdrop-filter: blur(15px) brightness(1.2);
+  
+  /* 增强 hover 时的光效 */
+  background: 
+    linear-gradient(
+      105deg,
+      transparent 20%,
+      rgba(255, 255, 255, 0.35) 40%,
+      rgba(255, 255, 255, 0.5) 50%,
+      rgba(255, 255, 255, 0.35) 60%,
+      transparent 80%
+    ),
+    linear-gradient(
+      135deg,
+      rgba(255, 255, 255, 0.2),
+      rgba(255, 255, 255, 0.12)
+    );
+    
+  background-size: 200% 100%, 100% 100%;
+  transform: scale(1.02) translateZ(15px);
+  animation: liquid-refraction 0.6s ease-out;
+  
+  box-shadow: 
+    0 12px 40px rgba(31, 38, 135, 0.35),
+    inset 0 2px 4px rgba(255, 255, 255, 0.25),
+    inset 0 -2px 2px rgba(0, 0, 0, 0.08);
+}
+
+/* 激活折射效果 */
+.request-item:hover::before {
+  opacity: 1;
 }
 
 .request-item.expanded {
-  background: #333;
-  border-color: #4CAF50;
+  backdrop-filter: blur(18px) brightness(1.2);
+  -webkit-backdrop-filter: blur(18px) brightness(1.2);
+  background: linear-gradient(
+    135deg,
+    rgba(66, 184, 131, 0.1),
+    rgba(53, 73, 94, 0.05)
+  );
+  border-color: rgba(66, 184, 131, 0.3);
+  box-shadow: 
+    0 12px 40px rgba(66, 184, 131, 0.2),
+    inset 0 2px 4px rgba(255, 255, 255, 0.15);
 }
 
 .request-header {
@@ -7641,20 +7865,48 @@ const styles = `
 }
 
 .request-method {
-  padding: 2px 8px;
-  border-radius: 4px;
-  font-weight: bold;
+  /* 方法标签毛玻璃效果 */
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+  padding: 4px 10px;
+  border-radius: 10px;
+  font-weight: 600;
   font-size: 10px;
   text-transform: uppercase;
-  min-width: 40px;
+  min-width: 45px;
   text-align: center;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 
+    0 2px 8px rgba(0, 0, 0, 0.1),
+    inset 0 1px 0 rgba(255, 255, 255, 0.25);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.method-get { background: #4CAF50; color: #000; }
-.method-post { background: #2196F3; color: #fff; }
-.method-put { background: #FF9800; color: #000; }
-.method-delete { background: #F44336; color: #fff; }
-.method-patch { background: #9C27B0; color: #fff; }
+.method-get { 
+  background: linear-gradient(135deg, #4CAF50, #45a049);
+  color: #ffffff;
+  box-shadow: 0 0 15px rgba(76, 175, 80, 0.4);
+}
+.method-post { 
+  background: linear-gradient(135deg, #2196F3, #1976D2);
+  color: #ffffff;
+  box-shadow: 0 0 15px rgba(33, 150, 243, 0.4);
+}
+.method-put { 
+  background: linear-gradient(135deg, #FF9800, #F57C00);
+  color: #ffffff;
+  box-shadow: 0 0 15px rgba(255, 152, 0, 0.4);
+}
+.method-delete { 
+  background: linear-gradient(135deg, #F44336, #D32F2F);
+  color: #ffffff;
+  box-shadow: 0 0 15px rgba(244, 67, 54, 0.4);
+}
+.method-patch { 
+  background: linear-gradient(135deg, #9C27B0, #7B1FA2);
+  color: #ffffff;
+  box-shadow: 0 0 15px rgba(156, 39, 176, 0.4);
+}
 
 .request-url {
   flex: 1;
@@ -7667,18 +7919,47 @@ const styles = `
 }
 
 .request-status {
-  padding: 2px 8px;
-  border-radius: 4px;
+  /* 状态码标签毛玻璃效果 */
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+  padding: 4px 10px;
+  border-radius: 10px;
   font-size: 10px;
-  min-width: 35px;
+  font-weight: 600;
+  min-width: 40px;
   text-align: center;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 
+    0 2px 8px rgba(0, 0, 0, 0.1),
+    inset 0 1px 0 rgba(255, 255, 255, 0.25);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.status-2xx { background: #4CAF50; color: #000; }
-.status-3xx { background: #FF9800; color: #000; }
-.status-4xx { background: #F44336; color: #fff; }
-.status-5xx { background: #9C27B0; color: #fff; }
-.status-error { background: #F44336; color: #fff; }
+.status-2xx { 
+  background: linear-gradient(135deg, #4CAF50, #45a049);
+  color: #ffffff;
+  box-shadow: 0 0 20px rgba(76, 175, 80, 0.5);
+}
+.status-3xx { 
+  background: linear-gradient(135deg, #FF9800, #F57C00);
+  color: #ffffff;
+  box-shadow: 0 0 20px rgba(255, 152, 0, 0.5);
+}
+.status-4xx { 
+  background: linear-gradient(135deg, #F44336, #D32F2F);
+  color: #ffffff;
+  box-shadow: 0 0 20px rgba(244, 67, 54, 0.5);
+}
+.status-5xx { 
+  background: linear-gradient(135deg, #9C27B0, #7B1FA2);
+  color: #ffffff;
+  box-shadow: 0 0 20px rgba(156, 39, 176, 0.5);
+}
+.status-error { 
+  background: linear-gradient(135deg, #F44336, #D32F2F);
+  color: #ffffff;
+  box-shadow: 0 0 20px rgba(244, 67, 54, 0.5);
+}
 
 .request-info {
   display: flex;
@@ -7765,11 +8046,28 @@ const styles = `
 }
 
 .detail-content {
-  background: #222;
-  padding: 8px;
-  border-radius: 4px;
-  max-height: 200px;
+  /* 详情内容毛玻璃效果 */
+  backdrop-filter: blur(8px) brightness(0.9);
+  -webkit-backdrop-filter: blur(8px) brightness(0.9);
+  background: linear-gradient(
+    135deg,
+    rgba(0, 0, 0, 0.3),
+    rgba(0, 0, 0, 0.15)
+  );
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  padding: 16px;
+  border-radius: 12px;
+  max-height: 400px;
+  min-height: 300px;
   overflow: auto;
+  
+  /* 内部阴影 */
+  box-shadow: 
+    inset 0 2px 4px rgba(0, 0, 0, 0.2),
+    inset 0 -1px 2px rgba(255, 255, 255, 0.05);
+    
+  /* 平滑滚动 */
+  scroll-behavior: smooth;
 }
 
 .json-content {
@@ -7823,47 +8121,75 @@ const styles = `
 }
 
 .share-btn {
-  background: #2196F3;
-  color: #fff;
-  border: none;
-  padding: 4px 10px;
-  border-radius: 3px;
-  font-size: 11px;
+  /* 分享按钮毛玻璃效果 */
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+  background: linear-gradient(135deg, #2196F3, #1976D2);
+  color: #ffffff;
+  border: 1px solid rgba(33, 150, 243, 0.3);
+  padding: 6px 12px;
+  border-radius: 10px;
+  font-size: 10px;
+  font-weight: 500;
   margin-left: 8px;
   cursor: pointer;
-  transition: all 0.2s;
   white-space: nowrap;
+  
+  box-shadow: 
+    0 2px 8px rgba(33, 150, 243, 0.3),
+    inset 0 1px 0 rgba(255, 255, 255, 0.2);
+    
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transform: translateZ(0);
 }
 
 .share-btn:hover {
-  background: #1976D2;
-  transform: scale(1.1);
+  background: linear-gradient(135deg, #1976D2, #1565C0);
+  transform: scale(1.05) translateZ(5px);
+  box-shadow: 
+    0 4px 16px rgba(33, 150, 243, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.3);
 }
 
 .share-btn:active {
-  transform: scale(0.95);
+  transform: scale(0.98);
+  transition: transform 0.1s;
 }
 
 .api-curl-btn {
-  background: #4CAF50;
-  color: #fff;
-  border: none;
-  padding: 4px 10px;
-  border-radius: 3px;
-  font-size: 11px;
+  /* API Curl 按钮毛玻璃效果 */
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+  background: linear-gradient(135deg, #4CAF50, #45a049);
+  color: #ffffff;
+  border: 1px solid rgba(76, 175, 80, 0.3);
+  padding: 6px 12px;
+  border-radius: 10px;
+  font-size: 10px;
+  font-weight: 500;
   margin-left: 8px;
   cursor: pointer;
-  transition: all 0.2s;
   white-space: nowrap;
+  
+  box-shadow: 
+    0 2px 8px rgba(76, 175, 80, 0.3),
+    inset 0 1px 0 rgba(255, 255, 255, 0.2);
+    
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transform: translateZ(0);
 }
 
 .api-curl-btn:hover {
-  background: #45a049;
-  transform: scale(1.1);
+  background: linear-gradient(135deg, #45a049, #388E3C);
+  transform: scale(1.05) translateZ(5px);
+  box-shadow: 
+    0 4px 16px rgba(76, 175, 80, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.3);
 }
 
 .api-curl-btn:active {
-  transform: scale(0.95);
+  transform: scale(0.98);
+  transition: transform 0.1s;
 }
 
 .console-content {
@@ -7935,7 +8261,73 @@ const styles = `
   cursor: not-allowed;
 }
 
-@media (max-width: 600px) {
+/* 动态光效动画 - 模拟 Shader 效果 */
+@keyframes liquid-shimmer {
+  0% {
+    background-position: -300% center;
+    transform: translateX(-10px);
+  }
+  50% {
+    transform: translateX(0);
+  }
+  100% {
+    background-position: 300% center;
+    transform: translateX(10px);
+  }
+}
+
+@keyframes liquid-refraction {
+  0%, 100% {
+    transform: scale(1) perspective(1000px) rotateY(0deg);
+    filter: blur(0px);
+  }
+  25% {
+    transform: scale(1.01) perspective(1000px) rotateY(0.5deg);
+    filter: blur(0.5px);
+  }
+  75% {
+    transform: scale(0.99) perspective(1000px) rotateY(-0.5deg);
+    filter: blur(0.3px);
+  }
+}
+
+@keyframes liquid-expand {
+  0% { 
+    opacity: 0;
+    transform: scale(0.95) translateY(-10px);
+    backdrop-filter: blur(5px);
+  }
+  50% { 
+    opacity: 0.7;
+    transform: scale(1.02) translateY(-2px);
+    backdrop-filter: blur(12px);
+  }
+  100% { 
+    opacity: 1;
+    transform: scale(1) translateY(0);
+    backdrop-filter: blur(8px);
+  }
+}
+
+@keyframes liquid-glow {
+  0%, 100% { 
+    box-shadow: 0 0 20px rgba(66, 184, 131, 0.3);
+  }
+  50% { 
+    box-shadow: 0 0 30px rgba(66, 184, 131, 0.5);
+  }
+}
+
+.expanding {
+  animation: liquid-expand 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.request-item.expanded {
+  animation: liquid-glow 2s ease-in-out infinite;
+}
+
+/* 移动端响应式 */
+@media (max-width: 768px) {
   #network-debugger-panel.bottom-right,
   #network-debugger-panel.bottom-left,
   #network-debugger-panel.top-right,
@@ -7943,32 +8335,87 @@ const styles = `
     width: calc(100vw - 20px) !important;
     left: 10px !important;
     right: auto !important;
+    /* 移动端清晰毛玻璃 */
+    backdrop-filter: blur(15px) saturate(150%);
+    -webkit-backdrop-filter: blur(15px) saturate(150%);
+  }
+  
+  .request-item {
+    padding: 12px;
+    border-radius: 12px;
+  }
+  
+  .debugger-header {
+    padding: 10px 12px;
+  }
+  
+  .debugger-controls {
+    gap: 6px;
+  }
+  
+  .debugger-btn {
+    padding: 4px 8px;
+    font-size: 10px;
   }
   
   /* 最小化时不应用全宽，保持小尺寸 */
   #network-debugger-panel.minimized {
-    width: 160px !important;
-    max-width: 160px !important;
-    height: 35px !important;
+    width: 180px !important;
+    max-width: 180px !important;
+    height: 40px !important;
   }
 }
 
+@media (max-width: 480px) {
+  .request-header {
+    flex-direction: column;
+    gap: 8px;
+    align-items: stretch;
+  }
+  
+  .request-method,
+  .request-status {
+    align-self: flex-start;
+  }
+  
+  .share-btn,
+  .api-curl-btn {
+    margin-left: 0;
+    margin-top: 4px;
+  }
+}
+
+/* iOS 26 风格滚动条 */
 #network-debugger-panel ::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+  width: 8px;
+  height: 8px;
 }
 
 #network-debugger-panel ::-webkit-scrollbar-track {
-  background: #333;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 4px;
+  backdrop-filter: blur(5px);
 }
 
 #network-debugger-panel ::-webkit-scrollbar-thumb {
-  background: #666;
-  border-radius: 3px;
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.2),
+    rgba(255, 255, 255, 0.1)
+  );
+  border-radius: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  transition: all 0.3s ease;
 }
 
 #network-debugger-panel ::-webkit-scrollbar-thumb:hover {
-  background: #888;
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.3),
+    rgba(255, 255, 255, 0.15)
+  );
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
 }
 
 .resize-handle {
@@ -8241,8 +8688,6 @@ const _DebugPanel = class _DebugPanel {
     this.dragStart = { x: 0, y: 0 };
     this.resizeTimeout = null;
     this.resizeDirection = "";
-    this.currentTab = "network";
-    this.consoleHistory = [];
     this.requestsCache = [];
     this.interceptor = interceptor;
     const savedConfig = this.loadConfig();
@@ -8250,7 +8695,6 @@ const _DebugPanel = class _DebugPanel {
       position: "bottom-right",
       theme: "dark",
       minimized: false,
-      showConsole: true,
       isClosed: false,
       ...savedConfig,
       // 先应用保存的配置
@@ -8289,60 +8733,17 @@ const _DebugPanel = class _DebugPanel {
         </div>
       </div>
       <div class="debugger-content">
-        <div class="debugger-tabs">
-          <button class="debugger-tab active" data-tab="network">网络</button>
-          ${this.config.showConsole ? '<button class="debugger-tab" data-tab="console">控制台</button>' : ""}
-          <button class="debugger-tab" data-tab="tools">工具</button>
-          <button class="debugger-tab" data-tab="about">关于</button>
-        </div>
         <div class="debugger-panel-content">
-          <div class="network-panel" data-panel="network">
+          <div class="network-panel">
             <div class="request-list"></div>
           </div>
-          ${this.config.showConsole ? `
-          <div class="console-panel" data-panel="console" style="display: none;">
-            <div class="console-content"></div>
-            <div class="console-input">
-              <span class="console-prompt">></span>
-              <input class="console-cmd" placeholder="输入 JavaScript 代码..." />
-            </div>
-          </div>
-          ` : ""}
-          <div class="tools-panel" data-panel="tools" style="display: none;">
-            <div class="tools-section">
-              <div class="tool-buttons">
-                <button class="tool-btn" data-tool="parse-curl">解析 cURL</button>
-                <button class="tool-btn" data-tool="export-har">导出 HAR</button>
-                <button class="tool-btn" data-tool="cors-test">CORS 测试</button>
-                <button class="tool-btn" data-tool="decrypt-test">解密测试</button>
-              </div>
-            </div>
-            <div class="tools-content">
-              <textarea placeholder="在这里粘贴 cURL 命令或输入要测试的数据..." style="width: 100%; height: 200px; background: #222; color: #fff; border: 1px solid #444; padding: 8px; font-family: monospace;"></textarea>
-            </div>
-          </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 解密小工具</h2>
-              <p style="margin: 10px 0;">Version: ${"1.2.48"}</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>
-              <div style="margin-top: 20px; padding: 15px; background: #333; border-radius: 8px;">
-                <p style="margin: 5px 0; font-size: 12px;">本工具专为 PWTK 项目开发</p>
-                <p style="margin: 5px 0; font-size: 12px;">提供网络请求拦截、解密、分享等功能</p>
-              </div>
-            </div>
-          </div>
         </div>
       </div>
     `;
     this.addResizeHandles();
     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");
+    this.networkTab = this.shadowRoot.querySelector(".network-panel");
   }
   addResizeHandles() {
     const handles = ["n", "s", "e", "w", "ne", "nw", "se", "sw"];
@@ -8356,9 +8757,6 @@ const _DebugPanel = class _DebugPanel {
   bindEvents() {
     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);
@@ -8387,28 +8785,6 @@ const _DebugPanel = class _DebugPanel {
           break;
       }
     });
-    tabs.forEach((tab) => {
-      tab.addEventListener("click", (e) => {
-        const target = e.target;
-        const tabName = target.dataset.tab;
-        this.switchTab(tabName);
-      });
-    });
-    toolButtons.forEach((button) => {
-      button.addEventListener("click", (e) => {
-        const target = e.target;
-        const tool = target.dataset.tool;
-        this.handleToolAction(tool);
-      });
-    });
-    if (consoleInput) {
-      consoleInput.addEventListener("keypress", (e) => {
-        if (e.key === "Enter") {
-          this.executeConsoleCommand(consoleInput.value);
-          consoleInput.value = "";
-        }
-      });
-    }
     const resizeHandles = this.shadowRoot.querySelectorAll(".resize-handle");
     resizeHandles.forEach((handle) => {
       handle.addEventListener("mousedown", (e) => {
@@ -8629,21 +9005,11 @@ const _DebugPanel = class _DebugPanel {
     }
     return url;
   }
-  switchTab(tabName) {
-    this.shadowRoot.querySelectorAll(".debugger-tab").forEach((tab) => {
-      tab.classList.toggle("active", tab.dataset.tab === tabName);
-    });
-    this.shadowRoot.querySelectorAll("[data-panel]").forEach((panel) => {
-      const panelEl = panel;
-      panelEl.style.display = panel.getAttribute("data-panel") === tabName ? "block" : "none";
-    });
-    this.currentTab = tabName;
-  }
+  // 移除 switchTab 方法 - 不再需要标签页切换
   clearRequests() {
     this.requestsCache = [];
     this.interceptor.clearRequests();
     this.renderRequests();
-    this.logToConsole("✅ 已清空网络请求记录");
   }
   exportData() {
     const data = {
@@ -8660,22 +9026,18 @@ const _DebugPanel = class _DebugPanel {
     a.download = `network-debug-${Date.now()}.json`;
     a.click();
     URL.revokeObjectURL(url);
-    this.logToConsole("💾 网络数据已导出 (by Leo)");
   }
   async shareRequest(request) {
     try {
-      this.logToConsole("📤 正在创建分享链接...");
       const shareUrl = await createShareLink(request);
       if (shareUrl) {
         const copied = await copyToClipboard(shareUrl);
         if (copied) {
-          this.logToConsole(`✅ 分享链接已复制到剪贴板: ${shareUrl}`);
           alert(`分享链接已复制到剪贴板！
 ${shareUrl}
 
 Created by Leo (@leeguoo)`);
         } else {
-          this.logToConsole(`✅ 分享链接: ${shareUrl}`);
           prompt("分享链接已创建，请手动复制：\n\nCreated by Leo (@leeguoo)", shareUrl);
         }
       } else {
@@ -8683,28 +9045,23 @@ Created by Leo (@leeguoo)`);
       }
     } catch (error) {
       logger.error("分享失败:", error);
-      this.logToConsole(`❌ 分享失败: ${error}`);
       alert("分享失败，请稍后重试");
     }
   }
   async generateApiCurl(request) {
     try {
-      this.logToConsole("🔧 正在生成API cURL命令...");
       const curlCommand = formatAsApiCurl(request);
       const copied = await copyToClipboard(curlCommand);
       if (copied) {
-        this.logToConsole(`✅ API cURL已复制到剪贴板`);
         alert(`API cURL命令已复制到剪贴板！
 适用于 httpmisonote.com API
 
 Created by Leo (@leeguoo)`);
       } else {
-        this.logToConsole(`✅ API cURL: ${curlCommand}`);
         prompt("API cURL命令已生成，请手动复制：\n\nCreated by Leo (@leeguoo)", curlCommand);
       }
     } catch (error) {
       logger.error("生成API cURL失败:", error);
-      this.logToConsole(`❌ 生成API cURL失败: ${error}`);
       alert("生成API cURL失败，请稍后重试");
     }
   }
@@ -8726,131 +9083,9 @@ Created by Leo (@leeguoo)`);
       this.container.style.bottom = "auto";
     }
   }
-  handleToolAction(tool) {
-    const textarea = this.shadowRoot.querySelector(".tools-content textarea");
-    const input = textarea.value.trim();
-    switch (tool) {
-      case "parse-curl":
-        this.handleParseCurl(input);
-        break;
-      case "export-har":
-        this.exportHAR();
-        break;
-      case "cors-test":
-        this.handleCorsTest(input);
-        break;
-      case "decrypt-test":
-        this.handleDecryptTest(input);
-        break;
-    }
-  }
-  handleParseCurl(curlCommand) {
-    if (!curlCommand) {
-      this.logToConsole("❌ 请输入 cURL 命令");
-      return;
-    }
-    try {
-      const parsed = parseCurl(curlCommand);
-      this.logToConsole("✅ cURL 解析成功:");
-      this.logToConsole(parsed);
-    } catch (error) {
-      this.logToConsole(`❌ cURL 解析失败: ${error instanceof Error ? error.message : String(error)}`, "error");
-    }
-  }
-  exportHAR() {
-    const har = {
-      log: {
-        version: "1.2",
-        creator: {
-          name: "NetworkDebugger",
-          version: "1.0.0",
-          comment: "Created by Leo (@leeguoo)"
-        },
-        entries: this.requestsCache.map((request) => ({
-          startedDateTime: new Date(request.timestamp).toISOString(),
-          time: request.duration || 0,
-          request: {
-            method: request.method,
-            url: request.url,
-            headers: Object.entries(request.headers).map(([name, value]) => ({ name, value })),
-            postData: request.requestBody ? {
-              mimeType: "application/json",
-              text: typeof request.requestBody === "string" ? request.requestBody : JSON.stringify(request.requestBody)
-            } : void 0
-          },
-          response: {
-            status: request.status || 0,
-            statusText: request.statusText || "",
-            headers: request.responseHeaders ? Object.entries(request.responseHeaders).map(([name, value]) => ({ name, value })) : [],
-            content: {
-              size: 0,
-              mimeType: "application/json",
-              text: request.responseBody ? typeof request.responseBody === "string" ? request.responseBody : JSON.stringify(request.responseBody) : ""
-            }
-          }
-        }))
-      }
-    };
-    const blob = new Blob([JSON.stringify(har, null, 2)], { type: "application/json" });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = `network-har-${Date.now()}.har`;
-    a.click();
-    URL.revokeObjectURL(url);
-    this.logToConsole("💾 HAR 文件已导出");
-  }
-  handleCorsTest(url) {
-    if (!url) {
-      this.logToConsole("❌ 请输入要测试的 URL");
-      return;
-    }
-    this.logToConsole(`🔍 开始 CORS 测试: ${url}`);
-    fetch(url, { mode: "cors" }).then((response) => {
-      this.logToConsole(`✅ CORS 测试成功: ${response.status} ${response.statusText}`);
-    }).catch((error) => {
-      this.logToConsole(`❌ CORS 测试失败: ${error.message}`);
-    });
-  }
-  handleDecryptTest(data) {
-    if (!data) {
-      this.logToConsole("❌ 请输入要解密的数据");
-      return;
-    }
-    this.logToConsole("🔓 解密测试功能开发中...");
-  }
-  executeConsoleCommand(command) {
-    if (!command.trim()) return;
-    this.consoleHistory.push(command);
-    this.logToConsole(`> ${command}`);
-    try {
-      const func = new Function("return " + command);
-      const result = func();
-      this.logToConsole(result);
-    } catch (error) {
-      try {
-        const func = new Function(command);
-        const result = func();
-        this.logToConsole(result !== void 0 ? result : "undefined");
-      } catch (secondError) {
-        this.logToConsole(`❌ ${error}`, "error");
-      }
-    }
-  }
-  logToConsole(message, type = "log") {
-    if (!this.consoleContent) return;
-    const timestamp = (/* @__PURE__ */ new Date()).toLocaleTimeString();
-    const formattedMessage = typeof message === "object" ? JSON.stringify(message, null, 2) : message;
-    const logElement = document.createElement("div");
-    logElement.innerHTML = `[${timestamp}] ${formattedMessage}`;
-    if (type === "error") {
-      logElement.style.color = "#f44336";
-    } else if (type === "warn") {
-      logElement.style.color = "#ff9800";
-    }
-    this.consoleContent.appendChild(logElement);
-    this.consoleContent.scrollTop = this.consoleContent.scrollHeight;
-  }
+  // 移除 handleToolAction 方法 - 不再需要工具功能
+  // 移除 handleParseCurl 方法
+  // 移除所有工具和控制台相关方法
   startDrag(e) {
     this.isDragging = true;
     this.dragStart = { x: e.clientX, y: e.clientY };
@@ -9111,7 +9346,6 @@ Created by Leo (@leeguoo)`);
         position: this.config.position,
         theme: this.config.theme,
         minimized: this.config.minimized,
-        showConsole: this.config.showConsole,
         isClosed: this.config.isClosed
       };
       localStorage.setItem(_DebugPanel.STORAGE_KEY, JSON.stringify(configToSave));
@@ -9237,7 +9471,7 @@ class NetworkDebugger {
       this.initialized = true;
       logger.consoleDirect(`
 ╔════════════════════════════════════════╗
-║  🔓 PWTK 解密小工具 v${"1.2.48"}           ║
+║  🔓 PWTK 解密小工具 v${"1.2.49-beta.1"}           ║
 ║  Created by Leo (@leeguoo)             ║
 ║  技术支持: 请联系 Leo                 ║  
 ║  分享服务: curl.bwg.leeguoo.com       ║
@@ -9298,7 +9532,7 @@ class NetworkDebugger {
   }
   async checkForUpdates() {
     try {
-      const currentVersion = "1.2.48";
+      const currentVersion = "1.2.49-beta.1";
       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();
@@ -9318,7 +9552,7 @@ class NetworkDebugger {
       logger.error("[PWTK Update] Failed to check for updates:", error);
       return {
         hasUpdate: false,
-        currentVersion: "1.2.48"
+        currentVersion: "1.2.49-beta.1"
       };
     }
   }