Aaron / Nezha

const selectorButton = "#root > div > main > div.mx-auto.w-full.max-w-5xl.px-0.flex.flex-col.gap-4.server-info > section > div.flex.justify-center.w-full.max-w-\\[200px\\] > div > div > div.relative.cursor-pointer.rounded-3xl.px-2\\.5.py-\\[8px\\].text-\\[13px\\].font-\\[600\\].transition-all.duration-500.text-stone-400.dark\\:text-stone-500"; const selectorSection = "#root > div > main > div.mx-auto.w-full.max-w-5xl.px-0.flex.flex-col.gap-4.server-info > section"; const selector3 = "#root > div > main > div.mx-auto.w-full.max-w-5xl.px-0.flex.flex-col.gap-4.server-info > div:nth-child(3)"; const selector4 = "#root > div > main > div.mx-auto.w-full.max-w-5xl.px-0.flex.flex-col.gap-4.server-info > div:nth-child(4)"; let hasClicked = false; let divVisible = false; let swapping = false; function forceBothVisible() { const div3 = document.querySelector(selector3); const div4 = document.querySelector(selector4); if (div3 && div4) { div3.style.display = "block"; div4.style.display = "block"; } } function hideSection() { const section = document.querySelector(selectorSection); if (section) { section.style.display = "none"; } } function tryClickButton() { const btn = document.querySelector(selectorButton); if (btn && !hasClicked) { btn.click(); hasClicked = true; setTimeout(forceBothVisible, 500); } } function swapDiv3AndDiv4() { if (swapping) return; swapping = true; const div3 = document.querySelector(selector3); const div4 = document.querySelector(selector4); if (!div3 || !div4) { swapping = false; return; } const parent = div3.parentNode; if (parent !== div4.parentNode) { swapping = false; return; } // 交换 div3 和 div4 的位置 parent.insertBefore(div4, div3); parent.insertBefore(div3, div4.nextSibling); swapping = false; } const observer = new MutationObserver(() => { const div3 = document.querySelector(selector3); const div4 = document.querySelector(selector4); const isDiv3Visible = div3 && getComputedStyle(div3).display !== "none"; const isDiv4Visible = div4 && getComputedStyle(div4).display !== "none"; const isAnyDivVisible = isDiv3Visible || isDiv4Visible; if (isAnyDivVisible && !divVisible) { hideSection(); tryClickButton(); setTimeout(swapDiv3AndDiv4, 100); } else if (!isAnyDivVisible && divVisible) { hasClicked = false; } divVisible = isAnyDivVisible; if (div3 && div4) { if (!isDiv3Visible || !isDiv4Visible) { forceBothVisible(); } } }); const root = document.querySelector("#root"); if (root) { observer.observe(root, { childList: true, attributes: true, subtree: true, attributeFilter: ["style", "class"], }); }

/* 默认和浅色主题的CSS变量 */ :root, html.light { --custom-border-color: rgba(244, 244, 244, 0.382); --custom-background-color: rgba(244, 244, 244, 0.618); --custom-text-color: #333; --custom-shadow-color: rgba(244, 244, 244, 0.5); } /* 暗色主题的CSS变量 */ html.dark { --custom-border-color: rgba(11, 11, 11, 0.382); --custom-background-color: rgba(11, 11, 11, 0.618); --custom-text-color: #fff; --custom-shadow-color: rgba(11, 11, 11, 0.5); } html.dark #root { background-color: unset !important; } /* 背景图片压暗和模糊, 开了背景图建议开启 */ .dark .bg-cover::after { content: ""; position: absolute; inset: 0; backdrop-filter: blur(6px); background-color: rgba(0, 0, 0, 0.3); } .light .bg-cover::after { content: ""; position: absolute; inset: 0; backdrop-filter: blur(3px); background-color: rgba(255, 255, 255, 0.3); } .bg-card, html.dark .bg-card, html.light .bg-card { background-color: var(--custom-background-color); backdrop-filter: blur(4px); border: 1px solid var(--custom-border-color); box-shadow: 0 4px 6px var(--custom-shadow-color); } .focus\:text-accent-foreground:focus { background-color: var(--custom-background-color); opacity: 0.8; } .text-muted-foreground, html.dark .text-muted-foreground, html.light .text-muted-foreground { color: var(--custom-text-color); } html.dark .dark\:bg-stone-700, html.light .bg-stone-700, .bg-stone-700 { --tw-bg-opacity: 0.5; background-color: var(--custom-background-color); } html *, html.dark *, html.light * { border-color: var(--custom-border-color); } html body, html.dark body, html.light body { color: var(--custom-text-color); background: unset; position: relative; } img { border: none; } html.dark .dark\:border-neutral-800, html.light .border-neutral-800, .border-neutral-800 { border-color: var(--custom-border-color); } html.dark .dark\:bg-stone-800, html.light .bg-stone-800, .bg-stone-800 { --tw-bg-opacity: 0.5; background-color: var(--custom-background-color); } html.dark .dark\:text-stone-500, html.light .text-stone-500, .text-stone-500 { color: var(--custom-text-color); } .bg-secondary, html.dark .bg-secondary, html.light .bg-secondary { background-color: var(--custom-background-color); opacity: 0.7; } .bg-popover, html.dark .bg-popover, html.light .bg-popover { background-color: var(--custom-background-color); } .bg-muted, html.dark .bg-muted, html.light .bg-muted { background-color: var(--custom-border-color); } html.dark .dark\:bg-black, html.light .bg-black, .bg-black { background-color: var(--custom-border-color); } .bg-border, html.dark .bg-border, html.light .bg-border { background-color: var(--custom-border-color); } .border-input, html.dark .border-input, html.light .border-input { border-color: var(--custom-border-color); } html.dark .dark\:text-neutral-300\/50, html.light .text-neutral-300, .text-neutral-300 { color: var(--custom-text-color); opacity: 0.7; } html.dark .dark\:text-stone-400, html.light .text-stone-400, .text-stone-400 { color: var(--custom-text-color); } div#radix-\:r4\: { background: var(--custom-background-color); backdrop-filter: blur(4px); } .text-green-600 { color: rgb(34, 197, 94); } .bg-green-600 { background-color: rgb(34, 197, 94); } .vps-info, html.dark .vps-info, html.light .vps-info { border-radius: 12px; padding: 12px; background-color: var(--custom-background-color); backdrop-filter: blur(4px); } .font-medium.opacity-40, html.dark .font-medium.opacity-40, html.light .font-medium.opacity-40 { opacity: 0.8 !important; } .font-medium.opacity-50, html.dark .font-medium.opacity-50, html.light .font-medium.opacity-50 { opacity: 0.8 !important; } .max-w-5xl.gap-4 > div:first-child, html.dark .max-w-5xl.gap-4 > div:first-child, html.light .max-w-5xl.gap-4 > div:first-child { background-color: var(--custom-background-color); backdrop-filter: blur(4px); border: 1px solid var(--custom-border-color); box-shadow: 0 4px 6px var(--custom-shadow-color); border-radius: 12px; padding: 12px; } img[alt="BackIcon"] { margin-right: 12px; } .flex.items-center.gap-1.rounded-\[50px\].bg-stone-100.p-\[3px\], html.dark .flex.items-center.gap-1.rounded-\[50px\].bg-stone-100.p-\[3px\], html.light .flex.items-center.gap-1.rounded-\[50px\].bg-stone-100.p-\[3px\], html.dark .dark\:bg-stone-800 { background-color: var(--custom-background-color); backdrop-filter: blur(4px); } .\[\&_\.recharts-cartesian-axis-tick_text\]\:fill-muted-foreground .recharts-cartesian-axis-tick text { fill: var(--custom-text-color); } html.dark .dark\:fill-neutral-800, html.light .fill-neutral-800, .fill-neutral-800 { fill: var(--custom-text-color); } .data-\[state\=unchecked\]\:bg-input[data-state="unchecked"] { background-color: var(--custom-background-color); backdrop-filter: blur(4px); } .data-\[state\=checked\]\:bg-primary[data-state="checked"] { background-color: var(--custom-background-color); backdrop-filter: blur(4px); } .rounded-lg { background-color: var(--custom-background-color) !important; backdrop-filter: blur(5px) !important; border-radius: 15px !important; border: 1px solid var(--custom-border-color) !important; } html.dark .dark\:bg-black\/70, html.light .bg-black\/70, .bg-black\/70 { background-color: var(--custom-background-color) !important; backdrop-filter: blur(5px) !important; border: 1px solid var(--custom-border-color) !important; }

const SCRIPT_VERSION = "v20250617"; // == 样式注入模块 == // 注入自定义CSS隐藏特定元素 function injectCustomCSS() { const style = document.createElement("style"); style.textContent = ` /* 隐藏父级类名为 mt-4 w-full mx-auto 下的所有 div */ .mt-4.w-full.mx-auto > div { display: none; } `; document.head.appendChild(style); } injectCustomCSS(); // == 工具函数模块 == const utils = (() => { /** * 格式化文件大小，自动转换单位 * @param {number} bytes - 字节数 * @returns {{value: string, unit: string}} 格式化后的数值和单位 */ function formatFileSize(bytes) { if (bytes === 0) return { value: "0", unit: "B" }; const units = ["B", "KB", "MB", "GB", "TB", "PB"]; let size = bytes; let unitIndex = 0; while (size >= 1024 && unitIndex < units.length - 1) { size /= 1024; unitIndex++; } return { value: size.toFixed(unitIndex === 0 ? 0 : 2), unit: units[unitIndex], }; } /** * 计算百分比，输入可为大数，支持自动缩放 * @param {number} used - 已使用量 * @param {number} total - 总量 * @returns {string} 百分比字符串，保留2位小数 */ function calculatePercentage(used, total) { used = Number(used); total = Number(total); // 大数缩放，防止数值溢出 if (used > 1e15 || total > 1e15) { used /= 1e10; total /= 1e10; } return total === 0 ? "0.00" : ((used / total) * 100).toFixed(2); } /** * 格式化日期字符串，返回 yyyy-MM-dd 格式 * @param {string} dateString - 日期字符串 * @returns {string} 格式化日期 */ function formatDate(dateString) { const date = new Date(dateString); if (isNaN(date)) return ""; return date.toLocaleDateString("zh-CN", { year: "numeric", month: "2-digit", day: "2-digit", }); } /** * 安全设置子元素文本内容，避免空引用错误 * @param {HTMLElement} parent - 父元素 * @param {string} selector - 子元素选择器 * @param {string} text - 要设置的文本 */ function safeSetTextContent(parent, selector, text) { const el = parent.querySelector(selector); if (el) el.textContent = text; } /** * 根据百分比返回渐变HSL颜色（绿→橙→红） * @param {number} percentage - 0~100的百分比 * @returns {string} hsl颜色字符串 */ function getHslGradientColor(percentage) { const clamp = (val, min, max) => Math.min(Math.max(val, min), max); const lerp = (start, end, t) => start + (end - start) * t; const p = clamp(Number(percentage), 0, 100); let h, s, l; if (p <= 35) { const t = p / 35; h = lerp(142, 32, t); // 绿色到橙色 s = lerp(69, 85, t); l = lerp(45, 55, t); } else if (p <= 85) { const t = (p - 35) / 50; h = lerp(32, 0, t); // 橙色到红色 s = lerp(85, 75, t); l = lerp(55, 50, t); } else { const t = (p - 85) / 15; h = 0; // 红色加深 s = 75; l = lerp(50, 45, t); } return `hsl(${h.toFixed(0)}, ${s.toFixed(0)}%, ${l.toFixed(0)}%)`; } /** * 透明度渐隐渐现切换内容 * @param {HTMLElement} element - 目标元素 * @param {string} newContent - 新HTML内容 * @param {number} duration - 动画持续时间，毫秒 */ function fadeOutIn(element, newContent, duration = 500) { element.style.transition = `opacity ${duration / 2}ms`; element.style.opacity = "0"; setTimeout(() => { element.innerHTML = newContent; element.style.transition = `opacity ${duration / 2}ms`; element.style.opacity = "1"; }, duration / 2); } return { formatFileSize, calculatePercentage, formatDate, safeSetTextContent, getHslGradientColor, fadeOutIn, }; })(); // == 流量统计渲染模块 == const trafficRenderer = (() => { const toggleElements = []; // 存储需周期切换显示的元素及其内容 /** * 渲染流量统计条目 * @param {Object} trafficData - 后台返回的流量数据 * @param {Object} config - 配置项 */ function renderTrafficStats(trafficData, config) { const serverMap = new Map(); // 解析流量数据，按服务器名聚合 for (const cycleId in trafficData) { const cycle = trafficData[cycleId]; if (!cycle.server_name || !cycle.transfer) continue; for (const serverId in cycle.server_name) { const serverName = cycle.server_name[serverId]; const transfer = cycle.transfer[serverId]; const max = cycle.max; const from = cycle.from; const to = cycle.to; const next_update = cycle.next_update[serverId]; if (serverName && transfer !== undefined && max && from && to) { serverMap.set(serverName, { id: serverId, transfer, max, name: cycle.name, from, to, next_update, }); } } } serverMap.forEach((serverData, serverName) => { // 查找对应显示区域 const targetElement = Array.from( document.querySelectorAll("section.grid.items-center.gap-2"), ).find((section) => { const firstText = section.querySelector("p")?.textContent.trim(); return firstText === serverName.trim(); }); if (!targetElement) return; // 格式化数据 const usedFormatted = utils.formatFileSize(serverData.transfer); const totalFormatted = utils.formatFileSize(serverData.max); const percentage = utils.calculatePercentage( serverData.transfer, serverData.max, ); const fromFormatted = utils.formatDate(serverData.from); const toFormatted = utils.formatDate(serverData.to); const nextUpdateFormatted = new Date( serverData.next_update, ).toLocaleString("zh-CN", { timeZone: "Asia/Shanghai" }); const uniqueClassName = "traffic-stats-for-server-" + serverData.id; const progressColor = utils.getHslGradientColor(percentage); const containerDiv = targetElement.closest("div"); if (!containerDiv) return; // 日志输出函数 const log = (...args) => { if (config.enableLog) console.log("[renderTrafficStats]", ...args); }; // 查找是否已有对应流量条目元素 const existing = Array.from( containerDiv.querySelectorAll(".new-inserted-element"), ).find((el) => el.classList.contains(uniqueClassName)); if (!config.showTrafficStats) { // 不显示时移除对应元素 if (existing) { existing.remove(); log(`移除流量条目: ${serverName}`); } return; } if (existing) { // 更新已存在元素内容 utils.safeSetTextContent( existing, ".used-traffic", usedFormatted.value, ); utils.safeSetTextContent(existing, ".used-unit", usedFormatted.unit); utils.safeSetTextContent( existing, ".total-traffic", totalFormatted.value, ); utils.safeSetTextContent(existing, ".total-unit", totalFormatted.unit); utils.safeSetTextContent(existing, ".from-date", fromFormatted); utils.safeSetTextContent(existing, ".to-date", toFormatted); utils.safeSetTextContent( existing, ".percentage-value", percentage + "%", ); utils.safeSetTextContent( existing, ".next-update", `next update: ${nextUpdateFormatted}`, ); const progressBar = existing.querySelector(".progress-bar"); if (progressBar) { progressBar.style.width = percentage + "%"; progressBar.style.backgroundColor = progressColor; } log(`更新流量条目: ${serverName}`); } else { // 插入新的流量条目元素 let oldSection = null; if (config.insertAfter) { oldSection = containerDiv.querySelector( "section.flex.items-center.w-full.justify-between.gap-1", ) || containerDiv.querySelector("section.grid.items-center.gap-3"); } else { oldSection = containerDiv.querySelector( "section.grid.items-center.gap-3", ); } if (!oldSection) return; // 时间区间内容，用于切换显示 const defaultTimeInfoHTML = `<span class="from-date">${fromFormatted}</span> <span class="text-neutral-500 dark:text-neutral-400">-</span> <span class="to-date">${toFormatted}</span>`; const contents = [ defaultTimeInfoHTML, `<span class="text-[10px] font-medium text-neutral-800 dark:text-neutral-200 percentage-value">${percentage}%</span>`, `<span class="text-[10px] font-medium text-neutral-600 dark:text-neutral-300">${nextUpdateFormatted}</span>`, ]; const newElement = document.createElement("div"); newElement.classList.add( "space-y-1.5", "new-inserted-element", uniqueClassName, ); newElement.style.width = "100%"; newElement.innerHTML = ` <div class="flex items-center justify-between"> <div class="flex items-baseline gap-1"> <span class="text-[10px] font-medium text-neutral-800 dark:text-neutral-200 used-traffic">${usedFormatted.value}</span> <span class="text-[10px] font-medium text-neutral-800 dark:text-neutral-200 used-unit">${usedFormatted.unit}</span> <span class="text-[10px] text-neutral-500 dark:text-neutral-400">/ </span> <span class="text-[10px] text-neutral-500 dark:text-neutral-400 total-traffic">${totalFormatted.value}</span> <span class="text-[10px] text-neutral-500 dark:text-neutral-400 total-unit">${totalFormatted.unit}</span> </div> <div class="text-[10px] font-medium text-neutral-600 dark:text-neutral-300 time-info" style="opacity:1; transition: opacity 0.3s;"> ${defaultTimeInfoHTML} </div> </div> <div class="relative h-1.5"> <div class="absolute inset-0 bg-neutral-100 dark:bg-neutral-800 rounded-full"></div> <div class="absolute inset-0 bg-emerald-500 rounded-full transition-all duration-300 progress-bar" style="width: ${percentage}%; max-width: 100%; background-color: ${progressColor};"></div> </div> `; oldSection.after(newElement); log(`插入新流量条目: ${serverName}`); // 启用切换时，将元素及其内容保存以便周期切换 if (config.toggleInterval > 0) { const timeInfoElement = newElement.querySelector(".time-info"); if (timeInfoElement) { toggleElements.push({ el: timeInfoElement, contents, }); } } } }); } /** * 启动周期切换内容显示（用于时间、百分比等轮播） * @param {number} toggleInterval - 切换间隔，毫秒 * @param {number} duration - 动画时长，毫秒 */ function startToggleCycle(toggleInterval, duration) { if (toggleInterval <= 0) return; let toggleIndex = 0; setInterval(() => { toggleIndex++; toggleElements.forEach(({ el, contents }) => { if (!document.body.contains(el)) return; const index = toggleIndex % contents.length; utils.fadeOutIn(el, contents[index], duration); }); }, toggleInterval); } return { renderTrafficStats, startToggleCycle, }; })(); // == 数据请求和缓存模块 == const trafficDataManager = (() => { let trafficCache = null; /** * 请求流量数据，支持缓存 * @param {string} apiUrl - 接口地址 * @param {Object} config - 配置项 * @param {Function} callback - 请求成功后的回调，参数为流量数据 */ function fetchTrafficData(apiUrl, config, callback) { const now = Date.now(); // 使用缓存数据 if (trafficCache && now - trafficCache.timestamp < config.interval) { if (config.enableLog) console.log("[fetchTrafficData] 使用缓存数据"); callback(trafficCache.data); return; } if (config.enableLog) console.log("[fetchTrafficData] 请求新数据..."); fetch(apiUrl) .then((res) => res.json()) .then((data) => { if (!data.success) { if (config.enableLog) console.warn("[fetchTrafficData] 请求成功但数据异常"); return; } if (config.enableLog) console.log("[fetchTrafficData] 成功获取新数据"); const trafficData = data.data.cycle_transfer_stats; trafficCache = { timestamp: now, data: trafficData, }; callback(trafficData); }) .catch((err) => { if (config.enableLog) console.error("[fetchTrafficData] 请求失败:", err); }); } return { fetchTrafficData, }; })(); // == DOM变化监听模块 == const domObserver = (() => { const TARGET_SELECTOR = "section.server-card-list, section.server-inline-list"; let currentSection = null; let childObserver = null; /** * DOM 子节点变更回调，调用传入的函数 * @param {Function} onChangeCallback - 变更处理函数 */ function onDomChildListChange(onChangeCallback) { onChangeCallback(); } /** * 监听指定section子节点变化 * @param {HTMLElement} section - 目标section元素 * @param {Function} onChangeCallback - 变更处理函数 */ function observeSection(section, onChangeCallback) { if (childObserver) { childObserver.disconnect(); } currentSection = section; childObserver = new MutationObserver((mutations) => { for (const m of mutations) { if ( m.type === "childList" && (m.addedNodes.length || m.removedNodes.length) ) { onDomChildListChange(onChangeCallback); break; } } }); childObserver.observe(currentSection, { childList: true, subtree: false }); // 初始调用一次 onChangeCallback(); } /** * 启动顶层section监听，检测section切换 * @param {Function} onChangeCallback - section变化时回调 * @returns {MutationObserver} sectionDetector实例 */ function startSectionDetector(onChangeCallback) { const sectionDetector = new MutationObserver(() => { const section = document.querySelector(TARGET_SELECTOR); if (section && section !== currentSection) { observeSection(section, onChangeCallback); } }); const root = document.querySelector("main") || document.body; sectionDetector.observe(root, { childList: true, subtree: true }); return sectionDetector; } /** * 断开所有监听 * @param {MutationObserver} sectionDetector - 顶层section监听实例 */ function disconnectAll(sectionDetector) { if (childObserver) childObserver.disconnect(); if (sectionDetector) sectionDetector.disconnect(); } return { startSectionDetector, disconnectAll, }; })(); // == 主程序入口 == (function main() { // 默认配置 const defaultConfig = { showTrafficStats: true, insertAfter: true, interval: 60000, toggleInterval: 5000, duration: 500, apiUrl: "/api/v1/service", enableLog: false, }; // 合并用户自定义配置 const config = Object.assign( {}, defaultConfig, window.TrafficScriptConfig || {}, ); if (config.enableLog) { console.log(`[TrafficScript] 版本: ${SCRIPT_VERSION}`); console.log("[TrafficScript] 最终配置如下:", config); } /** * 获取并刷新流量统计 */ function updateTrafficStats() { trafficDataManager.fetchTrafficData( config.apiUrl, config, (trafficData) => { trafficRenderer.renderTrafficStats(trafficData, config); }, ); } /** * DOM变更处理函数，触发刷新 */ function onDomChange() { if (config.enableLog) console.log("[main] DOM变化，刷新流量数据"); updateTrafficStats(); if (!trafficTimer) startPeriodicRefresh(); } // 定时器句柄，防止重复启动 let trafficTimer = null; /** * 启动周期刷新任务 */ function startPeriodicRefresh() { if (!trafficTimer) { if (config.enableLog) console.log("[main] 启动周期刷新任务"); trafficTimer = setInterval(() => { updateTrafficStats(); }, config.interval); } } // 启动内容切换轮播（如时间、百分比） trafficRenderer.startToggleCycle(config.toggleInterval, config.duration); // 监听section变化及其子节点变化 const sectionDetector = domObserver.startSectionDetector(onDomChange); // 初始化调用一次 onDomChange(); // 延迟 100ms 后尝试读取用户配置并覆盖 setTimeout(() => { const newConfig = Object.assign( {}, defaultConfig, window.TrafficScriptConfig || {}, ); // 判断配置是否变化（简单粗暴比较JSON字符串） if (JSON.stringify(newConfig) !== JSON.stringify(config)) { if (config.enableLog) console.log("[main] 100ms后检测到新配置，更新配置并重启任务"); config = newConfig; // 重新启动周期刷新任务 startPeriodicRefresh(); // 重新启动内容切换轮播（传入新配置） trafficRenderer.startToggleCycle(config.toggleInterval, config.duration); // 立即刷新数据 updateTrafficStats(); } else { if (config.enableLog) console.log("[main] 100ms后无新配置，保持原配置"); } }, 100); // 页面卸载时清理监听和定时器 window.addEventListener("beforeunload", () => { domObserver.disconnectAll(sectionDetector); if (trafficTimer) clearInterval(trafficTimer); }); })();