MoeFurina/api-clawer
1
0
Fork 0
mirror of https://github.com/NeteaseCloudMusicApiEnhanced/api-clawer.git synced 2026-03-21 09:53:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: 数据包无法清空

Browse Source
This commit is contained in:
ElyPrism 2026-03-13 23:38:19 +08:00
parent 1e1111c112
commit e7504c7e98
No known key found for this signature in database
1 changed files with 167 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

195
src/client/public/index.html
View File

@ -324,6 +324,94 @@
.clear-btn:active { .clear-btn:active {
transform: scale(0.98); transform: scale(0.98);
} }
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: all 0.3s;
}
.modal-overlay.show {
opacity: 1;
visibility: visible;
}
.modal {
background: white;
border-radius: 8px;
padding: 24px;
min-width: 320px;
max-width: 400px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transform: scale(0.95);
transition: transform 0.3s;
}
.modal-overlay.show .modal {
transform: scale(1);
}
.modal h3 {
margin: 0 0 12px 0;
font-size: 18px;
font-weight: 600;
color: var(--fg);
}
.modal p {
margin: 0 0 20px 0;
font-size: 14px;
color: var(--muted);
line-height: 1.5;
}
.modal-buttons {
display: flex;
gap: 10px;
justify-content: flex-end;
}
.modal-btn {
padding: 8px 16px;
border: none;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
transition: all 0.2s;
}
.modal-btn-cancel {
background: #f5f5f5;
color: var(--fg);
border: 1px solid var(--border);
}
.modal-btn-cancel:hover {
background: #e0e0e0;
}
.modal-btn-confirm {
background: var(--accent);
color: white;
}
.modal-btn-confirm:hover {
background: #a00a0a;
}
.modal-btn:active {
transform: scale(0.98);
}
</style> </style>
</head> </head>
<body> <body>
@ -371,6 +459,17 @@
<div id="toast" class="toast">已复制到剪贴板</div> <div id="toast" class="toast">已复制到剪贴板</div>
<div id="modal-overlay" class="modal-overlay">
<div class="modal">
<h3 id="modal-title">确认操作</h3>
<p id="modal-message">确定要执行此操作吗？</p>
<div class="modal-buttons">
<button class="modal-btn modal-btn-cancel" onclick="closeModal()">取消</button>
<button class="modal-btn modal-btn-confirm" id="modal-confirm-btn">确定</button>
</div>
</div>
</div>
<script> <script>
let capturedData = []; let capturedData = [];
let selectedIndex = -1; let selectedIndex = -1;
@ -524,44 +623,80 @@
}); });
} }
function showConfirm(title, message, onConfirm) {
const overlay = document.getElementById('modal-overlay');
const titleEl = document.getElementById('modal-title');
const messageEl = document.getElementById('modal-message');
const confirmBtn = document.getElementById('modal-confirm-btn');
titleEl.textContent = title;
messageEl.textContent = message;
// 移除之前的事件监听器
const newConfirmBtn = confirmBtn.cloneNode(true);
confirmBtn.parentNode.replaceChild(newConfirmBtn, confirmBtn);
// 添加新的事件监听器
newConfirmBtn.addEventListener('click', () => {
closeModal();
if (onConfirm) {
onConfirm();
}
});
overlay.classList.add('show');
}
function closeModal() {
document.getElementById('modal-overlay').classList.remove('show');
}
// 点击遮罩层关闭模态框
document.getElementById('modal-overlay').addEventListener('click', (e) => {
if (e.target.id === 'modal-overlay') {
closeModal();
}
});
function clearCaptures() { function clearCaptures() {
if (!capturedData || capturedData.length === 0) { if (!capturedData || capturedData.length === 0) {
showToast('暂无抓包数据可清空'); showToast('暂无抓包数据可清空');
return; return;
} }
if (!confirm('确定要清空所有抓包信息吗？')) { showConfirm(
return; '清空抓包数据',
} '确定要清空所有抓包信息吗？此操作不可撤销。',
() => {
capturedData = [];
selectedIndex = -1;
renderCaptureList();
capturedData = []; // 重置右侧详情面板
selectedIndex = -1; const detailPanel = document.getElementById('detail-panel');
renderCaptureList(); detailPanel.innerHTML = `
<div class="no-selection">
<span class="icon">📡</span>
<span>请从左侧选择一个抓包记录查看详情</span>
</div>
`;
// 重置右侧详情面板 // 向服务器发送清空请求
const detailPanel = document.getElementById('detail-panel'); fetch('/api/clear', { method: 'POST' })
detailPanel.innerHTML = ` .then(response => response.json())
<div class="no-selection"> .then(data => {
<span class="icon">📡</span> if (data.success) {
<span>请从左侧选择一个抓包记录查看详情</span> showToast('已清空所有抓包信息');
</div> } else {
`; showToast('清空失败: ' + (data.message || '未知错误'));
}
// 向服务器发送清空请求 })
fetch('/api/clear', { method: 'POST' }) .catch(err => {
.then(response => response.json()) console.error('Clear failed:', err);
.then(data => { showToast('清空失败，请重试');
if (data.success) { });
showToast('已清空所有抓包信息'); }
} else { );
showToast('清空失败: ' + (data.message || '未知错误'));
}
showToast('已清空所有抓包信息');
})
.catch(err => {
console.error('Clear failed:', err);
showToast('清空失败，请重试');
});
} }
function setupSSE() { function setupSSE() {