`;
document.body.appendChild(panel);
return panel;
}
// 加载数据
async function loadPlans() {
const token = getToken();
const listEl = document.getElementById('ns-list');
if (!token) {
listEl.innerHTML = '
${p.machine_name}
${getStockBadge(p.sold_out, available, p.max_quantity)}
📍 ${p.machine_region}
套餐: ${p.name} ${p.machine_description ? '— ' + p.machine_description : ''}
CPU: ${p.cpu}C
内存: ${formatRam(p.ram_mb)}
硬盘: ${p.disk_gb}GB
带宽: ${p.bandwidth_mbps}Mbps
流量: ${formatTraffic(p.monthly_traffic_gb)}
类型: ${p.machine_vm_type?.toUpperCase()}
${formatPrice(p.price_monthly)}
${tags ? `
${tags}
` : ''}
`;
});
listEl.innerHTML = html;
}
// ==================== 事件绑定 ====================
function bindEvents(panel) {
// 排序
document.getElementById('ns-sort').addEventListener('change', (e) => {
currentSort = e.target.value;
renderPlans();
});
// 地区筛选
document.getElementById('ns-region').addEventListener('change', (e) => {
currentRegion = e.target.value;
renderPlans();
});
// 搜索
document.getElementById('ns-search').addEventListener('input', (e) => {
searchKeyword = e.target.value.trim();
renderPlans();
});
// 隐藏售罄
document.getElementById('ns-hide-sold').addEventListener('change', (e) => {
hideSoldOut = e.target.checked;
renderPlans();
});
// 刷新
document.getElementById('ns-refresh').addEventListener('click', () => loadPlans());
// 折叠/展开
document.getElementById('ns-collapse').addEventListener('click', () => {
panel.classList.add('collapsed');
});
panel.addEventListener('click', (e) => {
if (panel.classList.contains('collapsed')) {
panel.classList.remove('collapsed');
}
});
// 拖拽移动面板
let isDragging = false, dragX, dragY, panelX, panelY;
const header = panel.querySelector('.panel-header');
header.addEventListener('mousedown', (e) => {
if (e.target.closest('button')) return;
isDragging = true;
dragX = e.clientX;
dragY = e.clientY;
const rect = panel.getBoundingClientRect();
panelX = rect.left;
panelY = rect.top;
panel.style.right = 'auto';
panel.style.left = panelX + 'px';
panel.style.top = panelY + 'px';
e.preventDefault();
});
document.addEventListener('mousemove', (e) => {
if (!isDragging) return;
panel.style.left = (panelX + e.clientX - dragX) + 'px';
panel.style.top = (panelY + e.clientY - dragY) + 'px';
});
document.addEventListener('mouseup', () => { isDragging = false; });
}
// ==================== 启动 ====================
function init() {
// 等待页面加载完成
const timer = setInterval(() => {
const token = getToken();
if (token) {
clearInterval(timer);
const panel = createPanel();
bindEvents(panel);
loadPlans();
// 定时刷新
setInterval(() => loadPlans(), REFRESH_INTERVAL);
}
}, 1000);
// 超时保护
setTimeout(() => {
clearInterval(timer);
if (!document.getElementById('narwhal-sort-panel')) {
const panel = createPanel();
bindEvents(panel);
loadPlans();
}
}, 15000);
}
// 启动
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();