@@ -485,6 +508,62 @@
return div.innerHTML;
}
+ function fetchVersion() {
+ fetch('/api/version')
+ .then(response => response.json())
+ .then(data => {
+ if (data.version) {
+ document.getElementById('version-badge').textContent = 'v' + data.version;
+ } else {
+ document.getElementById('version-badge').textContent = 'v0.1.0';
+ }
+ })
+ .catch(err => {
+ console.error('Failed to fetch version:', err);
+ document.getElementById('version-badge').textContent = 'v0.1.0';
+ });
+ }
+
+ function clearCaptures() {
+ if (!capturedData || capturedData.length === 0) {
+ showToast('暂无抓包数据可清空');
+ return;
+ }
+
+ if (!confirm('确定要清空所有抓包信息吗？')) {
+ return;
+ }
+
+ capturedData = [];
+ selectedIndex = -1;
+ renderCaptureList();
+
+ // 重置右侧详情面板
+ const detailPanel = document.getElementById('detail-panel');
+ detailPanel.innerHTML = `
+
+ 📡
+ 请从左侧选择一个抓包记录查看详情
+
+ `;
+
+ // 向服务器发送清空请求
+ fetch('/api/clear', { method: 'POST' })
+ .then(response => response.json())
+ .then(data => {
+ if (data.success) {
+ showToast('已清空所有抓包信息');
+ } else {
+ showToast('清空失败: ' + (data.message || '未知错误'));
+ }
+ showToast('已清空所有抓包信息');
+ })
+ .catch(err => {
+ console.error('Clear failed:', err);
+ showToast('清空失败，请重试');
+ });
+ }
+
function setupSSE() {
const eventSource = new EventSource('/api/events');
@@ -495,20 +574,25 @@
// 更新状态为已连接
updateStatus();
- // 检查是否有新数据（比较最后一个时间戳或数量）
- const hasNewData = !capturedData.length ||
- data.length > capturedData.length ||
- (data.length > 0 && capturedData.length > 0 &&
- data[data.length - 1].timestamp !== capturedData[capturedData.length - 1].timestamp);
+ // 直接使用服务器返回的数据
+ capturedData = data;
+ renderCaptureList();
- if (hasNewData) {
- capturedData = data;
- renderCaptureList();
-
- // 如果是新数据且当前没有选中，自动选中第一个
- if (selectedIndex === -1 && data.length > 0) {
- selectCapture(0);
- }
+ // 如果当前没有选中且数据不为空，自动选中第一个
+ if (selectedIndex === -1 && data.length > 0) {
+ selectCapture(0);
+ }
+
+ // 如果选中的索引超出了数据范围，重置选中状态
+ if (selectedIndex >= data.length) {
+ selectedIndex = -1;
+ const detailPanel = document.getElementById('detail-panel');
+ detailPanel.innerHTML = `
+
+ 📡
+ 请从左侧选择一个抓包记录查看详情
+
+ `;
}
} catch (e) {
console.error('Failed to parse SSE data:', e);
@@ -524,6 +608,9 @@
var origin = window.location.origin;
document.getElementById('base-url').textContent = origin;
+ // 获取版本信息
+ fetchVersion();
+
// 设置 SSE 连接
setupSSE();
});
diff --git a/src/index.js b/src/index.js
index cd6074d..ca2658e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -143,6 +143,22 @@ const startClient = () => {
res.json(capturedData);
});
+ app.get('/api/version', (req, res) => {
+ try {
+ const packageJson = require('../package.json');
+ res.json({ version: packageJson.version });
+ } catch (error) {
+ console.error('Failed to read package.json:', error);
+ res.json({ version: '0.1.0' });
+ }
+ });
+
+ app.post('/api/clear', (req, res) => {
+ capturedData = [];
+ broadcastData();
+ res.json({ success: true });
+ });
+
app.get('/api/events', (req, res) => {
res.setHeader('Content-Type', 'text/event-stream');
res.setHeader('Cache-Control', 'no-cache');