最终效果
哪吒监控
前台
<!-- 哪吒探针前台美化 版本 2025.12.25 -->
<script>
// ===================== 核心配置区 (用户可快速修改) =====================
// 哪吒内置全局配置参数 (官方支持: https://nezha.wiki/guide/settings.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BB%A3%E7%A0%81)
window.CustomBackgroundImage = 'https://api.tomys.top/api/acgimg'; // PC端背景图
window.CustomMobileBackgroundImage = 'https://api.tomys.top/api/acgimg'; // 移动端背景图
window.CustomLogo = 'https://tongzx.cn/usr/uploads/icon.jpg'; // 左上角/标题栏Logo
window.CustomDesc = 'Love from TikW'; // Logo下方副标题
window.ShowNetTransfer = true; // 服务器卡片显示上下行流量 (默认false)
window.CustomIllustration = 'https://s2.loli.net/2024/12/24/fj3EXY7umsyR9NW.webp'; // 替换默认插图
window.FixedTopServerName = true; // 顶部固定显示服务器名称 (默认false)
// 自定义导航链接 (对象数组格式, 可读性更强, 新增/删除更方便)
const customNavLinks = [
{ link: 'https://tongzx.cn/', name: '首页' },
{ link: 'https://app.tongzx.cn/', name: '小程序' }
];
window.CustomLinks = JSON.stringify(customNavLinks); // 转为哪吒要求的JSON字符串
// window.ForceTheme = 'dark'; // 强制主题: light/dark (注释禁用)
// window.ForceUseSvgFlag = false; // 强制使用SVG国旗 (注释禁用)
// ===================== 字体引入 (二选一, 取消注释即可) =====================
function loadCustomFont(fontHref, fontFamily) {
// 避免重复引入字体
if (document.querySelector(`link[href="${fontHref}"]`)) return;
const fontLink = document.createElement('link');
fontLink.rel = 'stylesheet';
fontLink.href = fontHref;
document.head.appendChild(fontLink);
console.log(`自定义字体 ${fontFamily} 引入成功`);
}
// 1. 小米字体 MiSans (默认启用)
loadCustomFont('https://font.sec.miui.com/font/css?family=MiSans:400,700:MiSans', 'MiSans');
// 2. 霞鹜文楷 (取消注释切换, 需同步修改CSS中的font-family)
// loadCustomFont('https://npm.elemecdn.com/[email protected]/style.css', 'LXGW WenKai Screen');
// ===================== 页脚修改 (封装复用, 性能更优) =====================
/**
* 监听动态DOM元素并修改
* @param {string} selector DOM选择器
* @param {Function} callback 元素找到后的回调函数
*/
function observeDynamicElement(selector, callback) {
const observer = new MutationObserver((mutations) => {
const targetElement = document.querySelector(selector);
if (targetElement) {
callback(targetElement);
observer.disconnect(); // 找到元素后停止监听, 减少性能消耗
}
});
// 监听body及其子元素的变化
observer.observe(document.body, { childList: true, subtree: true });
}
// 1. 隐藏左侧默认页脚文本
observeDynamicElement('.server-footer-name > div:first-child', (el) => {
el.style.visibility = 'hidden';
});
// 2. 替换右侧页脚文本 (保留哪吒版权, 合规使用)
observeDynamicElement('.server-footer-theme', (el) => {
el.innerHTML = '<section>Powered by <a href="https://github.com/nezhahq/nezha" target="_blank" style="color: inherit; text-decoration: underline;">NeZha</a></section>';
});
</script>
<style>
/* ===================== 字体样式 (与JS中字体对应) ===================== */
* {
/* 字体回退机制: 优先MiSans, 其次系统无衬线字体, 避免字体加载失败错乱 */
font-family: 'MiSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}
h1, h2, h3, h4, h5 {
font-family: 'MiSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
font-weight: 700; // 标题加粗, 更醒目
}
/* ===================== 背景优化 (默认开启模糊+压暗, 提升美观度) ===================== */
.dark .bg-cover::after,
.light .bg-cover::after {
content: '';
position: absolute;
inset: 0;
z-index: 1; // 确保遮罩在背景之上、内容之下
backdrop-filter: blur(8px); // 默认开启8px模糊, 视觉更柔和 (可自行调整数值)
}
.dark .bg-cover::after {
background-color: rgba(0, 0, 0, 0.6); // 深色主题压暗, 提升文字可读性
}
.light .bg-cover::after {
background-color: rgba(255, 255, 255, 0.3); // 浅色主题提亮, 增强对比度
}
/* 确保内容在遮罩之上显示 */
.bg-cover > * {
position: relative;
z-index: 2;
}
/* ===================== 细节美化 (新增, 提升视觉体验) ===================== */
// 服务器卡片优化: 增加阴影和圆角, 更具层次感
.server-card {
border-radius: 12px !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
transition: transform 0.3s ease; // 悬浮缩放动画
}
.server-card:hover {
transform: translateY(-2px); // 悬浮轻微上移, 交互更友好
}
// Logo副标题样式优化: 更醒目
.logo-desc {
color: inherit !important;
opacity: 0.9 !important;
margin-top: 4px !important;
}
// 导航链接样式优化
.custom-link {
font-weight: 500 !important;
margin: 0 8px !important;
}
/* ===================== 可选隐藏元素 (取消注释即可启用) ===================== */
/* 隐藏右上角语言切换按钮 */
/* [id^="radix-:r0:"] {
display: none !important;
} */
/* 隐藏右上角主题切换按钮 */
/* [id^="radix-:r2:"] {
display: none !important;
} */
/* 隐藏整个页脚 (与JS页脚修改冲突, 二选一) */
/* footer {
display: none !important;
} */
</style>
后台
<!-- 哪吒探针后台美化 版本 2025.12.25-->
<script>
// ===================== 核心配置区 (用户可快速修改) =====================
window.DisableAnimatedMan = true; // 隐藏后台默认"基佬"动画 (官方唯一支持的后台自定义变量)
const adminConfig = {
newAdminTitle: 'TikW探针', // 后台左上角替换后的标题
logoImage: 'https://tongzx.cn/usr/uploads/icon.jpg', // 后台左上角Logo替换地址
avatarImage: 'https://tongzx.cn/usr/uploads/Profile Photo.jpg', // 后台右上角头像替换地址
};
// ===================== 字体引入 (二选一, 取消注释即可切换) =====================
/**
* 加载自定义字体 (避免重复引入, 提升性能)
* @param {string} fontHref 字体CSS链接
* @param {string} fontFamily 字体名称 (用于日志提示)
*/
function loadCustomAdminFont(fontHref, fontFamily) {
// 检查字体是否已引入, 避免重复加载
if (document.querySelector(`link[href="${fontHref}"]`)) {
console.log(`自定义字体 ${fontFamily} 已存在，无需重复引入`);
return;
}
const fontLink = document.createElement('link');
fontLink.rel = 'stylesheet';
fontLink.href = fontHref;
document.head.appendChild(fontLink);
console.log(`后台自定义字体 ${fontFamily} 引入成功`);
}
// 1. 小米字体 MiSans (默认启用, 需与CSS中font-family对应)
loadCustomAdminFont(
'https://font.sec.miui.com/font/css?family=MiSans:400,700:MiSans',
'MiSans'
);
// 2. 霞鹜文楷 (取消注释切换, 需同步修改CSS中的font-family)
// loadCustomAdminFont(
// 'https://npm.elemecdn.com/[email protected]/style.css',
// 'LXGW WenKai Screen'
// );
// ===================== 动态DOM修改 (封装复用, 性能更优) =====================
/**
* 通用动态DOM元素监听函数
* @param {string} selector 目标元素选择器
* @param {Function} callback 找到元素后的处理回调
* @param {boolean} isDeep 是否深度监听子节点 (默认true)
*/
function observeAdminDynamicElement(selector, callback, isDeep = true) {
const observer = new MutationObserver((mutations) => {
// 遍历突变记录, 查找目标元素
for (const mutation of mutations) {
for (const node of mutation.addedNodes) {
// 仅处理元素节点
if (node.nodeType !== 1) continue;
// 直接匹配当前节点或查询子节点
const targetElements = node.matches(selector)
? [node]
: node.querySelectorAll(selector);
if (targetElements.length > 0) {
targetElements.forEach(callback);
observer.disconnect(); // 找到元素后立即停止监听, 减少性能消耗
return; // 终止遍历, 提升效率
}
}
}
});
// 监听body及其子树的元素变化
observer.observe(document.body, {
childList: true,
subtree: isDeep
});
}
// 1. 修改后台左上角标题 (替换"哪吒监控"为自定义标题)
observeAdminDynamicElement('.transition-opacity', (linkElement) => {
// 查找文本节点并替换内容
Array.from(linkElement.childNodes).forEach((node) => {
if (node.nodeType === Node.TEXT_NODE && node.textContent.trim() === '哪吒监控') {
node.textContent = adminConfig.newAdminTitle;
console.log(`后台标题已替换为: ${adminConfig.newAdminTitle}`);
}
});
});
// 2. 页脚文本修改 (可选启用, 与CSS中"隐藏页脚"功能冲突, 二选一)
// observeAdminDynamicElement('footer', (footerElement) => {
// footerElement.textContent = '你的自定义页脚文本';
// console.log('后台页脚文本已修改');
// });
</script>
<style>
/* ===================== 字体样式 (与JS中字体对应, 确保生效) ===================== */
* {
/* 字体回退机制: 优先自定义字体, 其次系统无衬线字体, 避免加载失败错乱 */
font-family: 'MiSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}
h1, h2, h3, h4, h5 {
font-family: 'MiSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
font-weight: 700; /* 标题加粗, 更醒目易读 */
}
/* ===================== 自定义图片替换 (确保样式优先级, 防止变形) ===================== */
/* 替换后台右上角基佬头像 */
img[src*="https://api.dicebear.com/7.x/notionists/svg"] {
content: url("https://tongzx.cn/usr/uploads/Profile Photo.jpg") !important;
object-fit: cover !important; /* 保持图片比例, 避免拉伸变形 */
border-radius: 50% !important; /* 确保头像为圆形, 与原样式一致 */
}
/* 替换后台左上角Logo */
img[src*="/dashboard/logo.svg"] {
content: url("https://tongzx.cn/usr/uploads/icon.jpg") !important;
object-fit: contain !important; /* 完整显示Logo, 不裁剪 */
width: 24px !important; /* 固定宽度, 与原Logo尺寸一致 */
height: 24px !important; /* 固定高度, 避免尺寸错乱 */
}
/* ===================== 可选隐藏元素 (标注冲突提示, 按需启用) ===================== */
/* 隐藏后台页脚 (与JS中的"页脚文本修改"功能互斥, 不可同时启用) */
footer {
display: none !important;
}
/* ===================== 新增细节美化 (提升后台视觉体验) ===================== */
/* 后台卡片优化: 增加圆角和阴影, 更具层次感 */
.card, .bg-white, .dark .bg-gray-800 {
border-radius: 12px !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
transition: box-shadow 0.3s ease !important;
}
/* 卡片悬浮效果: 增强交互感 */
.card:hover, .bg-white:hover, .dark .bg-gray-800:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}
/* 按钮样式优化: 更圆润, 提升视觉舒适度 */
button, .btn {
border-radius: 8px !important;
}
</style>
