哪吒面板美化

点击头像 -> 系统设置

前端自定义代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<script>

   // 背景图、移动背景图、
   window.CustomBackgroundImage = "https://axvpr90cqc3w.compat.objectstorage.us-phoenix-1.oraclecloud.com/bucket-20230714-2325/ef66cb2cf8f5ac725de9706ef347ddca11f6e9a7457238de55cf2e33d9a28080.jpg";
   window.CustomMobileBackgroundImage = "https://axvpr90cqc3w.compat.objectstorage.us-phoenix-1.oraclecloud.com/bucket-20230714-2325/ef66cb2cf8f5ac725de9706ef347ddca11f6e9a7457238de55cf2e33d9a28080.jpg";

   window.CustomLogo = 'https://axvpr90cqc3w.compat.objectstorage.us-phoenix-1.oraclecloud.com/bucket-20230714-2325/0526050132c00100c53d282b59cd1b46816f440c47676f81241574e1388b098f.png'; // 自定义LOGO
   window.CustomDesc = '节点监控'; // 自定义描述
   window.ShowNetTransfer = true; // 卡片显示上下行流量
   window.ForceCardInline = false; // 是否单行显示
   window.DisableAnimatedMan = true; // 关掉人物动画
   window.FixedTopServerName = false; // 开启则会默认上面名称下面信息
   window.CustomLinks = JSON.stringify([
     { link: "https://blog.hb114.eu.org", name: "我的博客" }
   ]); // 自定义外链
   window.ForceTheme = 'dark'; // 强制主题为light or dark

   // 将所有 HTTP 链接改为 HTTPS，避免混合内容警告
   const AVIF_URL = "https://axvpr90cqc3w.compat.objectstorage.us-phoenix-1.oraclecloud.com/bucket-20230714-2325/16de654470858164b2fb3bef191592e455c111cdbc257057e63beb1c4aa50c48.png";

   // 在 <head> 中注入 CSS，隐藏默认小人，定义自定义小人样式
   const style = document.createElement('style');
   style.innerHTML = `
     /* 隐藏任何通过 dicebear API 加载的默认头像 */
     .transition-opacity img[src*="dicebear"] {
       display: none !important;
     }
     /* 自定义小人样式 */
     .custom-avatar {
       position: absolute !important;
       right: -40px !important;
       top: -145px !important;
       z-index: 10 !important;
       width: 160px !important;
       height: auto !important;
     }
     //
     .server-footer{
       display:none;
     }
   `;
   document.head.appendChild(style);
  // 监听 DOM 变化，自动移除系统头像并插入自定义小人
   const observer = new MutationObserver(() => {
     // 抓取小人容器
     const xpath = "/html/body/div/div/main/div[2]/section[1]/div[4]/div";
     const container = document.evaluate(
       xpath, document, null,
       XPathResult.FIRST_ORDERED_NODE_TYPE, null
     ).singleNodeValue;

     if (!container) return;

     // 移除任何残留的默认头像
     container.querySelectorAll('img[src*="dicebear"]').forEach(el => el.remove());

     // 如果还没插入自定义小人，则插入
     if (!container.querySelector('img.custom-avatar')) {
       const img = document.createElement('img');
       img.src = AVIF_URL;
       img.className = 'custom-avatar';
       container.appendChild(img);
     }
   });

   // 从页面一加载就开始观察，保持一直生效
   observer.observe(document.body, {
     childList: true,
     subtree: true
   });
 </script>

仪表板自定义代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<script>
  // 禁用默认小人图（哪吒官方保留变量）
  window.DisableAnimatedMan = true;

  // 引入自定义字体（MiSans 字体，可替换为你喜欢的字体）
  const fontLink = document.createElement('link');
  fontLink.rel = 'stylesheet';
  fontLink.href = 'https://font.sec.miui.com/font/css?family=MiSans:400,700:MiSans';
  document.head.appendChild(fontLink);

  // 修改左上角标题文本 “哪吒监控” -> “哪吒探针”
  const observerAdminTitle = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
      mutation.addedNodes.forEach(node => {
        if (node.nodeType === 1) {
          const links = node.matches('.transition-opacity') ? [node] : node.querySelectorAll('.transition-opacity');
          links.forEach(link => {
            const textNode = Array.from(link.childNodes).find(n => n.nodeType === Node.TEXT_NODE && n.textContent.trim() === '哪吒监控');
            if (textNode) {
              textNode.textContent = '哪吒探针';
              observerAdminTitle.disconnect();
            }
          });
        }
      });
    });
  });
  observerAdminTitle.observe(document.body, { childList: true, subtree: true });
</script>

<style>
  /* 自定义字体并添加白色阴影 */
  * {
    font-family: 'HarmonyOS Sans', sans-serif !important;
    font-size: 16px;
    text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.9);
 /* 使用白色阴影增强对比度 */
  }

  /* 仪表板背景图全覆盖 */
  html, body {
    height: 100% !important;
    background: url("https://xxxx/2025/05/24/141a91d4cba94b49001.webp") no-repeat center center fixed !important;
    background-size: cover !important;
  }

  /* 顶部导航背景透明 + 模糊 */
  .el-header {
    background-color: transparent !important;
    backdrop-filter: blur(4px);
    box-shadow: none !important;
  }

  /* 替换默认头像图（avatar） */
  img[src*="https://api.dicebear.com/7.x/notionists/svg"] {
    content: url("https://xxxx/2025/05/24/e6c54e4c9202c540001.avif") !important;
    width: 100px !important;
    height: auto !important;
    margin-top: -0px;
  }

  /* 替换左上角 logo 图标 */
  img[src*="/dashboard/logo.svg"] {
    content: url("https://xxxx/2025/05/24/0eb4169981a13265001.webp") !important;
  }

  /* 去掉页脚 */
  footer {
    display: none !important;
  }

  /* 为主容器添加半透明背景 */
  .el-container {
    background-color: rgba(255, 255, 255, 0.7) !important; /* 半透明白色背景 */
  }

  /* 为卡片等组件设置更高透明度的背景 */
  .el-card, .el-message-box, .el-dialog {
    background-color: rgba(255, 255, 255, 0.9) !important;
  }

  /* 针对黑色文字，添加白色阴影以增强对比度 */
  .el-text, .el-button, .el-table, .el-form-item__label, .el-form-item__content, .el-menu-item, .el-submenu__title {
    color: #333 !important; /* 确保文字颜色为深色 */
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8); /* 白色阴影 */
  }

  /* 针对可能存在的浅色文字，添加黑色阴影 */
  .el-text-light, .el-button--text, .el-link {
    color: #fff !important; /* 假设某些文字是浅色的 */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* 黑色阴影 */
  }
</style>