@leeguoo/pwtk-network-debugger 1.2.49-beta.0 → 1.2.49-beta.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/demo/webgl-preview.html +325 -0
- package/dist/button-DfB5OFDC.mjs +542 -0
- package/dist/button-KhTUWDu8.js +1 -0
- package/dist/container-00gbUmcM.js +1 -0
- package/dist/container-DZOQFeJd.mjs +585 -0
- package/dist/index.cjs.js +23 -3
- package/dist/index.esm.js +10224 -556
- package/dist/index.js +23 -3
- package/dist/pwtk-network-debugger.css +1 -0
- package/package.json +10 -3
- package/scripts/serve-demo.mjs +122 -0
- package/types/core/interceptor.d.ts +27 -0
- package/types/core/interceptor.d.ts.map +1 -1
- package/types/core/wasmLoader.d.ts.map +1 -1
- package/types/index.d.ts +30 -0
- package/types/index.d.ts.map +1 -1
- package/types/types.d.ts +5 -1
- package/types/types.d.ts.map +1 -1
- package/types/ui/panel.d.ts +104 -13
- package/types/ui/panel.d.ts.map +1 -1
- package/types/ui/styles.d.ts +1 -1
- package/types/ui/styles.d.ts.map +1 -1
- package/types/utils/curlParser.d.ts.map +1 -1
- package/types/utils/encryption.d.ts.map +1 -1
- package/types/utils/logger.d.ts +35 -0
- package/types/utils/logger.d.ts.map +1 -0
- package/types/utils/share.d.ts +30 -0
- package/types/utils/share.d.ts.map +1 -0
- package/types/webgl/core/renderer.d.ts +66 -0
- package/types/webgl/core/renderer.d.ts.map +1 -0
- package/types/webgl/core/scene.d.ts +65 -0
- package/types/webgl/core/scene.d.ts.map +1 -0
- package/types/webgl/effects/liquid.d.ts +41 -0
- package/types/webgl/effects/liquid.d.ts.map +1 -0
- package/types/webgl/index.d.ts +15 -0
- package/types/webgl/index.d.ts.map +1 -0
- package/types/webgl/manager.d.ts +38 -0
- package/types/webgl/manager.d.ts.map +1 -0
|
@@ -0,0 +1,325 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="zh-CN">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<title>PWTK Network Debugger - WebGL Liquid Glass Preview</title>
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
+
<style>
|
|
8
|
+
body {
|
|
9
|
+
margin: 0;
|
|
10
|
+
padding: 20px;
|
|
11
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
12
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
13
|
+
min-height: 100vh;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.test-container {
|
|
17
|
+
max-width: 1200px;
|
|
18
|
+
margin: 0 auto;
|
|
19
|
+
padding: 20px;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.test-card {
|
|
23
|
+
background: rgba(255, 255, 255, 0.1);
|
|
24
|
+
backdrop-filter: blur(10px);
|
|
25
|
+
border-radius: 20px;
|
|
26
|
+
padding: 20px;
|
|
27
|
+
margin: 20px 0;
|
|
28
|
+
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.status {
|
|
32
|
+
padding: 10px;
|
|
33
|
+
border-radius: 10px;
|
|
34
|
+
margin: 10px 0;
|
|
35
|
+
font-weight: 600;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.status.success {
|
|
39
|
+
background: rgba(76, 175, 80, 0.2);
|
|
40
|
+
color: #4caf50;
|
|
41
|
+
border: 1px solid rgba(76, 175, 80, 0.3);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.status.warning {
|
|
45
|
+
background: rgba(255, 152, 0, 0.2);
|
|
46
|
+
color: #ff9800;
|
|
47
|
+
border: 1px solid rgba(255, 152, 0, 0.3);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.status.error {
|
|
51
|
+
background: rgba(244, 67, 54, 0.2);
|
|
52
|
+
color: #f44336;
|
|
53
|
+
border: 1px solid rgba(244, 67, 54, 0.3);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.controls {
|
|
57
|
+
display: flex;
|
|
58
|
+
gap: 10px;
|
|
59
|
+
flex-wrap: wrap;
|
|
60
|
+
margin: 20px 0;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.btn {
|
|
64
|
+
padding: 8px 16px;
|
|
65
|
+
border: none;
|
|
66
|
+
border-radius: 8px;
|
|
67
|
+
background: rgba(0, 122, 255, 0.8);
|
|
68
|
+
color: white;
|
|
69
|
+
cursor: pointer;
|
|
70
|
+
font-weight: 500;
|
|
71
|
+
transition: all 0.2s;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.btn:hover {
|
|
75
|
+
background: rgba(0, 122, 255, 1);
|
|
76
|
+
transform: translateY(-1px);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.btn.secondary {
|
|
80
|
+
background: rgba(255, 255, 255, 0.2);
|
|
81
|
+
color: white;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.btn.secondary:hover {
|
|
85
|
+
background: rgba(255, 255, 255, 0.3);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.demo-panel {
|
|
89
|
+
background: rgba(245, 245, 247, 0.8);
|
|
90
|
+
border-radius: 20px;
|
|
91
|
+
padding: 20px;
|
|
92
|
+
margin: 20px 0;
|
|
93
|
+
min-height: 200px;
|
|
94
|
+
position: relative;
|
|
95
|
+
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
h1,
|
|
99
|
+
h2,
|
|
100
|
+
h3 {
|
|
101
|
+
color: white;
|
|
102
|
+
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.info {
|
|
106
|
+
color: rgba(255, 255, 255, 0.9);
|
|
107
|
+
line-height: 1.6;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.code {
|
|
111
|
+
background: rgba(0, 0, 0, 0.3);
|
|
112
|
+
padding: 10px;
|
|
113
|
+
border-radius: 8px;
|
|
114
|
+
font-family: 'Monaco', monospace;
|
|
115
|
+
color: #00ff00;
|
|
116
|
+
font-size: 12px;
|
|
117
|
+
white-space: pre-wrap;
|
|
118
|
+
}
|
|
119
|
+
</style>
|
|
120
|
+
</head>
|
|
121
|
+
<body>
|
|
122
|
+
<div class="test-container">
|
|
123
|
+
<h1>🎨 WebGL Liquid Glass Effects Preview</h1>
|
|
124
|
+
|
|
125
|
+
<div class="test-card">
|
|
126
|
+
<h2>系统检测</h2>
|
|
127
|
+
<div id="webgl-support" class="status">检测中...</div>
|
|
128
|
+
<div id="browser-info" class="info"></div>
|
|
129
|
+
</div>
|
|
130
|
+
|
|
131
|
+
<div class="test-card">
|
|
132
|
+
<h2>测试控制</h2>
|
|
133
|
+
<div class="controls">
|
|
134
|
+
<button class="btn" onclick="testNetworkDebugger()">加载网络调试器</button>
|
|
135
|
+
<button class="btn secondary" onclick="testWebGLEffects()">测试 WebGL 效果</button>
|
|
136
|
+
<button class="btn secondary" onclick="testMultipleRequests()">生成测试请求</button>
|
|
137
|
+
<button class="btn secondary" onclick="toggleQuality()">切换质量</button>
|
|
138
|
+
<button class="btn secondary" onclick="togglePreset()">切换预设</button>
|
|
139
|
+
</div>
|
|
140
|
+
<div id="test-status" class="info">等待测试...</div>
|
|
141
|
+
</div>
|
|
142
|
+
|
|
143
|
+
<div class="test-card">
|
|
144
|
+
<h2>WebGL 演示面板</h2>
|
|
145
|
+
<div id="demo-panel" class="demo-panel">
|
|
146
|
+
<p>这个面板将展示 WebGL 液体玻璃效果</p>
|
|
147
|
+
<p>移动鼠标查看动态效果</p>
|
|
148
|
+
</div>
|
|
149
|
+
</div>
|
|
150
|
+
|
|
151
|
+
<div class="test-card">
|
|
152
|
+
<h2>性能监控</h2>
|
|
153
|
+
<div id="performance-info" class="code">等待数据...</div>
|
|
154
|
+
</div>
|
|
155
|
+
</div>
|
|
156
|
+
|
|
157
|
+
<script>
|
|
158
|
+
let currentQuality = 'medium';
|
|
159
|
+
let currentPreset = 'normal';
|
|
160
|
+
let networkDebugger = null;
|
|
161
|
+
|
|
162
|
+
// 检测 WebGL 支持
|
|
163
|
+
function checkWebGLSupport() {
|
|
164
|
+
try {
|
|
165
|
+
const canvas = document.createElement('canvas');
|
|
166
|
+
const gl = canvas.getContext('webgl2');
|
|
167
|
+
const supported = !!gl;
|
|
168
|
+
|
|
169
|
+
const supportElement = document.getElementById('webgl-support');
|
|
170
|
+
if (supported) {
|
|
171
|
+
supportElement.className = 'status success';
|
|
172
|
+
supportElement.textContent = '✅ WebGL2 支持正常';
|
|
173
|
+
} else {
|
|
174
|
+
supportElement.className = 'status error';
|
|
175
|
+
supportElement.textContent = '❌ WebGL2 不支持';
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
// 显示浏览器信息
|
|
179
|
+
const browserInfo = document.getElementById('browser-info');
|
|
180
|
+
browserInfo.innerHTML = `
|
|
181
|
+
<strong>浏览器:</strong> ${navigator.userAgent}<br>
|
|
182
|
+
<strong>设备像素比:</strong> ${window.devicePixelRatio}<br>
|
|
183
|
+
<strong>硬件并发:</strong> ${navigator.hardwareConcurrency || 'Unknown'}<br>
|
|
184
|
+
<strong>WebGL 版本:</strong> ${gl ? gl.getParameter(gl.VERSION) : 'Not available'}
|
|
185
|
+
`;
|
|
186
|
+
|
|
187
|
+
return supported;
|
|
188
|
+
} catch (error) {
|
|
189
|
+
console.error('WebGL 检测失败:', error);
|
|
190
|
+
return false;
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
function testNetworkDebugger() {
|
|
195
|
+
updateStatus('正在加载 PWTK 网络调试器...');
|
|
196
|
+
|
|
197
|
+
if (networkDebugger) {
|
|
198
|
+
updateStatus('网络调试器已经加载');
|
|
199
|
+
return;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
const script = document.createElement('script');
|
|
203
|
+
script.src = '../dist/index.js';
|
|
204
|
+
script.onload = function () {
|
|
205
|
+
if (window.NetworkDebugger && window.NetworkDebugger.default) {
|
|
206
|
+
window.NetworkDebugger.default
|
|
207
|
+
.init({
|
|
208
|
+
position: 'bottom-right',
|
|
209
|
+
minimized: false,
|
|
210
|
+
webgl: {
|
|
211
|
+
enabled: true,
|
|
212
|
+
quality: currentQuality,
|
|
213
|
+
preset: currentPreset
|
|
214
|
+
}
|
|
215
|
+
})
|
|
216
|
+
.then(() => {
|
|
217
|
+
networkDebugger = window.NetworkDebugger.default;
|
|
218
|
+
updateStatus('✅ PWTK 网络调试器已加载（WebGL 效果已启用）');
|
|
219
|
+
updatePerformanceInfo();
|
|
220
|
+
})
|
|
221
|
+
.catch((err) => {
|
|
222
|
+
updateStatus('❌ 初始化失败: ' + err.message);
|
|
223
|
+
});
|
|
224
|
+
} else {
|
|
225
|
+
updateStatus('❌ 网络调试器加载失败');
|
|
226
|
+
}
|
|
227
|
+
};
|
|
228
|
+
|
|
229
|
+
script.onerror = function () {
|
|
230
|
+
updateStatus('❌ 脚本加载失败');
|
|
231
|
+
};
|
|
232
|
+
|
|
233
|
+
document.head.appendChild(script);
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
function testWebGLEffects() {
|
|
237
|
+
updateStatus('测试 WebGL 效果...');
|
|
238
|
+
|
|
239
|
+
const demoPanel = document.getElementById('demo-panel');
|
|
240
|
+
demoPanel.style.transform = 'scale(1.02)';
|
|
241
|
+
demoPanel.style.transition = 'all 0.3s ease';
|
|
242
|
+
|
|
243
|
+
setTimeout(() => {
|
|
244
|
+
demoPanel.style.transform = 'scale(1)';
|
|
245
|
+
updateStatus('WebGL 效果测试完成');
|
|
246
|
+
}, 1000);
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
function testMultipleRequests() {
|
|
250
|
+
updateStatus('生成测试网络请求...');
|
|
251
|
+
|
|
252
|
+
const urls = [
|
|
253
|
+
'https://jsonplaceholder.typicode.com/posts/1',
|
|
254
|
+
'https://api.github.com/users/octocat',
|
|
255
|
+
'https://httpbin.org/json',
|
|
256
|
+
'https://api.coindesk.com/v1/bpi/currentprice.json'
|
|
257
|
+
];
|
|
258
|
+
|
|
259
|
+
urls.forEach((url, index) => {
|
|
260
|
+
setTimeout(() => {
|
|
261
|
+
fetch(url)
|
|
262
|
+
.then((response) => response.json())
|
|
263
|
+
.then((data) => {
|
|
264
|
+
console.log(`请求 ${index + 1} 完成:`, data);
|
|
265
|
+
})
|
|
266
|
+
.catch((error) => {
|
|
267
|
+
console.log(`请求 ${index + 1} 失败:`, error);
|
|
268
|
+
});
|
|
269
|
+
}, index * 500);
|
|
270
|
+
});
|
|
271
|
+
|
|
272
|
+
updateStatus(`已发送 ${urls.length} 个测试请求`);
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
function toggleQuality() {
|
|
276
|
+
const qualities = ['low', 'medium', 'high'];
|
|
277
|
+
const currentIndex = qualities.indexOf(currentQuality);
|
|
278
|
+
currentQuality = qualities[(currentIndex + 1) % qualities.length];
|
|
279
|
+
|
|
280
|
+
if (networkDebugger && networkDebugger.updateWebGLConfig) {
|
|
281
|
+
networkDebugger.updateWebGLConfig({ quality: currentQuality });
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
updateStatus(`WebGL 质量已切换到: ${currentQuality}`);
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
function togglePreset() {
|
|
288
|
+
const presets = ['subtle', 'normal', 'dramatic', 'psychedelic', 'ios26'];
|
|
289
|
+
const currentIndex = presets.indexOf(currentPreset);
|
|
290
|
+
currentPreset = presets[(currentIndex + 1) % presets.length];
|
|
291
|
+
|
|
292
|
+
if (networkDebugger && networkDebugger.updateWebGLConfig) {
|
|
293
|
+
networkDebugger.updateWebGLConfig({ preset: currentPreset });
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
updateStatus(`WebGL 预设已切换到: ${currentPreset}`);
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
function updateStatus(message) {
|
|
300
|
+
document.getElementById('test-status').textContent = new Date().toLocaleTimeString() + ': ' + message;
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
function updatePerformanceInfo() {
|
|
304
|
+
const performanceElement = document.getElementById('performance-info');
|
|
305
|
+
|
|
306
|
+
setInterval(() => {
|
|
307
|
+
const memory = performance.memory;
|
|
308
|
+
const info = `帧率: ~60 FPS
|
|
309
|
+
内存使用: ${memory ? (memory.usedJSHeapSize / 1048576).toFixed(1) + ' MB' : 'N/A'}
|
|
310
|
+
WebGL 状态: ${networkDebugger ? '活跃' : '未激活'}
|
|
311
|
+
当前质量: ${currentQuality}
|
|
312
|
+
当前预设: ${currentPreset}
|
|
313
|
+
时间: ${new Date().toLocaleTimeString()}`;
|
|
314
|
+
|
|
315
|
+
performanceElement.textContent = info;
|
|
316
|
+
}, 1000);
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
window.addEventListener('load', () => {
|
|
320
|
+
checkWebGLSupport();
|
|
321
|
+
updateStatus('页面加载完成，可以开始测试');
|
|
322
|
+
});
|
|
323
|
+
</script>
|
|
324
|
+
</body>
|
|
325
|
+
</html>
|