`;
document.body.appendChild(panel);
// 获取 DOM 引用
tbodyRef = panel.querySelector('tbody');
statsCountRef = panel.querySelector('.stats .count');
const searchInput = panel.querySelector('.search-box');
const refreshBtn = panel.querySelector('.refresh-btn');
const closeBtn = panel.querySelector('.close-btn');
const collapseBtn = panel.querySelector('.collapse-btn');
const header = panel.querySelector('.panel-header');
// 加载初始数据
currentData = fetchMissing();
filterText = '';
updateDisplay();
// 事件绑定
collapseBtn.addEventListener('click', (e) => {
e.stopPropagation();
toggleCollapse();
});
let debounceTimer;
searchInput.addEventListener('input', (e) => {
clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => {
filterText = e.target.value;
updateDisplay();
}, 200);
});
refreshBtn.addEventListener('click', () => {
currentData = fetchMissing();
filterText = '';
searchInput.value = '';
updateDisplay();
});
closeBtn.addEventListener('click', () => {
panel.remove();
});
// ---------- 拖拽功能（支持触摸）----------
let isDragging = false;
let offsetX, offsetY;
header.addEventListener('mousedown', (e) => {
if (e.target.tagName === 'BUTTON' || e.target.tagName === 'INPUT') return;
isDragging = true;
panel.classList.add('dragging');
const rect = panel.getBoundingClientRect();
offsetX = e.clientX - rect.left;
offsetY = e.clientY - rect.top;
});
header.addEventListener('touchstart', (e) => {
if (e.target.tagName === 'BUTTON' || e.target.tagName === 'INPUT') return;
isDragging = true;
panel.classList.add('dragging');
const rect = panel.getBoundingClientRect();
const touch = e.touches[0];
offsetX = touch.clientX - rect.left;
offsetY = touch.clientY - rect.top;
e.preventDefault();
}, { passive: false });
document.addEventListener('mousemove', (e) => {
if (!isDragging) return;
e.preventDefault();
const left = e.clientX - offsetX;
const top = e.clientY - offsetY;
panel.style.left = Math.max(0, Math.min(window.innerWidth - panel.offsetWidth, left)) + 'px';
panel.style.top = Math.max(0, Math.min(window.innerHeight - panel.offsetHeight, top)) + 'px';
panel.style.right = 'auto';
panel.style.bottom = 'auto';
});
document.addEventListener('touchmove', (e) => {
if (!isDragging) return;
e.preventDefault();
const touch = e.touches[0];
const left = touch.clientX - offsetX;
const top = touch.clientY - offsetY;
panel.style.left = Math.max(0, Math.min(window.innerWidth - panel.offsetWidth, left)) + 'px';
panel.style.top = Math.max(0, Math.min(window.innerHeight - panel.offsetHeight, top)) + 'px';
panel.style.right = 'auto';
panel.style.bottom = 'auto';
}, { passive: false });
document.addEventListener('mouseup', () => {
isDragging = false;
panel.classList.remove('dragging');
});
document.addEventListener('touchend', () => {
isDragging = false;
panel.classList.remove('dragging');
});
})();