哪吒面板网络监控美化

前言

近期有大佬给哪吒监控添加了三网监控的功能，能够非常清晰的看到一天之内，网络的波动。

但是默认的界面实在是太丑，使用折线图反应网络的波动还是有所欠缺，且不够直观。遇到网络波动抖动非常厉害的时候，整个页面简直无法直视。

改造前后的效果图

改造的方面

• 优化了标题在整个页面中的位置
• 优化了图例的位置
• 调整了图标的位置
• 更改折线图为散点图
• 去除Marker
• 去除了重复的 Ping （相同时间内，有多个 Ping 值）
• 打开页面时，最多显示三个散点图（不然打开监控页面的时候，页面里面有多个图，叠加起来，压根看不清楚）

改造前

改造后

剧烈的网络抖动

平稳的网络

夜间模式

改造代码

直接替换原有的network.html

{{define "theme-custom/network"}}
{{template "theme-custom/header" .}}
{{if ts .CustomCode}}
{{.CustomCode|safe}}
{{end}}
{{template "theme-custom/menu" .}}
<div id="network" class="nb-container">
    <div class="ui container">
        <div class="service-status">
            <div class="ui icon button network-bt"
                 v-for='server in servers'
                 :id="server.ID"
                 style="margin-top: 3px"
                 @click="redirectNetwork(server.ID)">
                @#server.Name#@ &nbsp; <i :class="server.Host.CountryCode + ' flag'"></i>
            </div>
            <div ref="chartDom"
                 class="network-chart"
                 style="border-radius: 12px; margin-top: 15px;height: 520px;max-width: 1920px;overflow: hidden"></div>
        </div>
    </div>
</div>

{{template "theme-custom/footer" .}}
<script>
    const monitorInfo = JSON.parse('{{.MonitorInfos}}');
    const initData = JSON.parse('{{.Servers}}').servers;
    let MaxTCPPingValue = {{.MaxTCPPingValue}};
    if (MaxTCPPingValue == null) {
        MaxTCPPingValue = 350;
    }

    const macaronsTheme = `
{
    "color": [
        "#2ec7c9",
        "#b6a2de",
        "#5ab1ef",
        "#ffb980",
        "#d87a80",
        "#8d98b3",
        "#e5cf0d",
        "#97b552",
        "#95706d",
        "#dc69aa",
        "#07a2a4",
        "#9a7fd1",
        "#588dd5",
        "#f5994e",
        "#c05050",
        "#59678c",
        "#c9ab00",
        "#7eb00a",
        "#6f5553",
        "#c14089"
    ],
    "backgroundColor": "rgba(0,0,0,0)",
    "textStyle": {},
    "title": {
        "textStyle": {
            "color": "#008acd"
        },
        "subtextStyle": {
            "color": "#aaaaaa"
        }
    },
    "line": {
        "itemStyle": {
            "borderWidth": 1
        },
        "lineStyle": {
            "width": 2
        },
        "symbolSize": 3,
        "symbol": "emptyCircle",
        "smooth": true
    },
    "radar": {
        "itemStyle": {
            "borderWidth": 1
        },
        "lineStyle": {
            "width": 2
        },
        "symbolSize": 3,
        "symbol": "emptyCircle",
        "smooth": true
    },
    "bar": {
        "itemStyle": {
            "barBorderWidth": 0,
            "barBorderColor": "#ccc"
        }
    },
    "pie": {
        "itemStyle": {
            "borderWidth": 0,
            "borderColor": "#ccc"
        }
    },
    "scatter": {
        "itemStyle": {
            "borderWidth": 0,
            "borderColor": "#ccc"
        }
    },
    "boxplot": {
        "itemStyle": {
            "borderWidth": 0,
            "borderColor": "#ccc"
        }
    },
    "parallel": {
        "itemStyle": {
            "borderWidth": 0,
            "borderColor": "#ccc"
        }
    },
    "sankey": {
        "itemStyle": {
            "borderWidth": 0,
            "borderColor": "#ccc"
        }
    },
    "funnel": {
        "itemStyle": {
            "borderWidth": 0,
            "borderColor": "#ccc"
        }
    },
    "gauge": {
        "itemStyle": {
            "borderWidth": 0,
            "borderColor": "#ccc"
        }
    },
    "candlestick": {
        "itemStyle": {
            "color": "#d87a80",
            "color0": "#2ec7c9",
            "borderColor": "#d87a80",
            "borderColor0": "#2ec7c9",
            "borderWidth": 1
        }
    },
    "graph": {
        "itemStyle": {
            "borderWidth": 0,
            "borderColor": "#ccc"
        },
        "lineStyle": {
            "width": 1,
            "color": "#aaaaaa"
        },
        "symbolSize": 3,
        "symbol": "emptyCircle",
        "smooth": true,
        "color": [
            "#2ec7c9",
            "#b6a2de",
            "#5ab1ef",
            "#ffb980",
            "#d87a80",
            "#8d98b3",
            "#e5cf0d",
            "#97b552",
            "#95706d",
            "#dc69aa",
            "#07a2a4",
            "#9a7fd1",
            "#588dd5",
            "#f5994e",
            "#c05050",
            "#59678c",
            "#c9ab00",
            "#7eb00a",
            "#6f5553",
            "#c14089"
        ],
        "label": {
            "color": "#eeeeee"
        }
    },
    "map": {
        "itemStyle": {
            "areaColor": "#dddddd",
            "borderColor": "#eeeeee",
            "borderWidth": 0.5
        },
        "label": {
            "color": "#d87a80"
        },
        "emphasis": {
            "itemStyle": {
                "areaColor": "rgba(254,153,78,1)",
                "borderColor": "#444",
                "borderWidth": 1
            },
            "label": {
                "color": "rgb(100,0,0)"
            }
        }
    },
    "geo": {
        "itemStyle": {
            "areaColor": "#dddddd",
            "borderColor": "#eeeeee",
            "borderWidth": 0.5
        },
        "label": {
            "color": "#d87a80"
        },
        "emphasis": {
            "itemStyle": {
                "areaColor": "rgba(254,153,78,1)",
                "borderColor": "#444",
                "borderWidth": 1
            },
            "label": {
                "color": "rgb(100,0,0)"
            }
        }
    },
    "categoryAxis": {
        "axisLine": {
            "show": false,
            "lineStyle": {
                "color": "#008acd"
            }
        },
        "axisTick": {
            "show": true,
            "lineStyle": {
                "color": "#333"
            }
        },
        "axisLabel": {
            "show": true,
            "color": "#333"
        },
        "splitLine": {
            "show": false,
            "lineStyle": {
                "color": [
                    "#eee"
                ]
            }
        },
        "splitArea": {
            "show": false,
            "areaStyle": {
                "color": [
                    "rgba(250,250,250,0.3)",
                    "rgba(200,200,200,0.3)"
                ]
            }
        }
    },
    "valueAxis": {
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "#008acd"
            }
        },
        "axisTick": {
            "show": true,
            "lineStyle": {
                "color": "#333"
            }
        },
        "axisLabel": {
            "show": true,
            "color": "#333"
        },
        "splitLine": {
            "show": false,
            "lineStyle": {
                "color": [
                    "#eee"
                ]
            }
        },
        "splitArea": {
            "show": false,
            "areaStyle": {
                "color": [
                    "rgba(250,250,250,0.3)",
                    "rgba(200,200,200,0.3)"
                ]
            }
        }
    },
    "logAxis": {
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "#008acd"
            }
        },
        "axisTick": {
            "show": true,
            "lineStyle": {
                "color": "#333"
            }
        },
        "axisLabel": {
            "show": true,
            "color": "#333"
        },
        "splitLine": {
            "show": true,
            "lineStyle": {
                "color": [
                    "#eee"
                ]
            }
        },
        "splitArea": {
            "show": true,
            "areaStyle": {
                "color": [
                    "rgba(250,250,250,0.3)",
                    "rgba(200,200,200,0.3)"
                ]
            }
        }
    },
    "timeAxis": {
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "#008acd"
            }
        },
        "axisTick": {
            "show": true,
            "lineStyle": {
                "color": "#333"
            }
        },
        "axisLabel": {
            "show": true,
            "color": "#333"
        },
        "splitLine": {
            "show": true,
            "lineStyle": {
                "color": [
                    "#eee"
                ]
            }
        },
        "splitArea": {
            "show": false,
            "areaStyle": {
                "color": [
                    "rgba(250,250,250,0.3)",
                    "rgba(200,200,200,0.3)"
                ]
            }
        }
    },
    "toolbox": {
        "iconStyle": {
            "borderColor": "#2ec7c9"
        },
        "emphasis": {
            "iconStyle": {
                "borderColor": "#18a4a6"
            }
        }
    },
    "legend": {
        "textStyle": {
            "color": "#333333"
        }
    },
    "tooltip": {
        "axisPointer": {
            "lineStyle": {
                "color": "#008acd",
                "width": "1"
            },
            "crossStyle": {
                "color": "#008acd",
                "width": "1"
            }
        }
    },
    "timeline": {
        "lineStyle": {
            "color": "#008acd",
            "width": 1
        },
        "itemStyle": {
            "color": "#008acd",
            "borderWidth": 1
        },
        "controlStyle": {
            "color": "#008acd",
            "borderColor": "#008acd",
            "borderWidth": 0.5
        },
        "checkpointStyle": {
            "color": "#2ec7c9",
            "borderColor": "#2ec7c9"
        },
        "label": {
            "color": "#008acd"
        },
        "emphasis": {
            "itemStyle": {
                "color": "#a9334c"
            },
            "controlStyle": {
                "color": "#008acd",
                "borderColor": "#008acd",
                "borderWidth": 0.5
            },
            "label": {
                "color": "#008acd"
            }
        }
    },
    "visualMap": {
        "color": [
            "#5ab1ef",
            "#e0ffff"
        ]
    },
    "dataZoom": {
        "backgroundColor": "rgba(47,69,84,0)",
        "dataBackgroundColor": "#efefff",
        "fillerColor": "rgba(182,162,222,0.2)",
        "handleColor": "#008acd",
        "handleSize": "100%",
        "textStyle": {
            "color": "#333333"
        }
    },
    "markPoint": {
        "label": {
            "color": "#eeeeee"
        },
        "emphasis": {
            "label": {
                "color": "#eeeeee"
            }
        }
    }
}
    `

    const chalkTheme = `
{
    "color": [
        "#fc97af",
        "#87f7cf",
        "#f7f494",
        "#72ccff",
        "#f7c5a0",
        "#d4a4eb",
        "#d2f5a6",
        "#76f2f2"
    ],
    "backgroundColor": "rgba(41,52,65,0)",
    "textStyle": {},
    "title": {
        "textStyle": {
            "color": "#ffffff"
        },
        "subtextStyle": {
            "color": "#dddddd"
        }
    },
    "line": {
        "itemStyle": {
            "borderWidth": "4"
        },
        "lineStyle": {
            "width": "3"
        },
        "symbolSize": "0",
        "symbol": "circle",
        "smooth": true
    },
    "radar": {
        "itemStyle": {
            "borderWidth": "4"
        },
        "lineStyle": {
            "width": "3"
        },
        "symbolSize": "0",
        "symbol": "circle",
        "smooth": true
    },
    "bar": {
        "itemStyle": {
            "barBorderWidth": 0,
            "barBorderColor": "#ccc"
        }
    },
    "pie": {
        "itemStyle": {
            "borderWidth": 0,
            "borderColor": "#ccc"
        }
    },
    "scatter": {
        "itemStyle": {
            "borderWidth": 0,
            "borderColor": "#ccc"
        }
    },
    "boxplot": {
        "itemStyle": {
            "borderWidth": 0,
            "borderColor": "#ccc"
        }
    },
    "parallel": {
        "itemStyle": {
            "borderWidth": 0,
            "borderColor": "#ccc"
        }
    },
    "sankey": {
        "itemStyle": {
            "borderWidth": 0,
            "borderColor": "#ccc"
        }
    },
    "funnel": {
        "itemStyle": {
            "borderWidth": 0,
            "borderColor": "#ccc"
        }
    },
    "gauge": {
        "itemStyle": {
            "borderWidth": 0,
            "borderColor": "#ccc"
        }
    },
    "candlestick": {
        "itemStyle": {
            "color": "#fc97af",
            "color0": "transparent",
            "borderColor": "#fc97af",
            "borderColor0": "#87f7cf",
            "borderWidth": "2"
        }
    },
    "graph": {
        "itemStyle": {
            "borderWidth": 0,
            "borderColor": "#ccc"
        },
        "lineStyle": {
            "width": "1",
            "color": "#ffffff"
        },
        "symbolSize": "0",
        "symbol": "circle",
        "smooth": true,
        "color": [
            "#fc97af",
            "#87f7cf",
            "#f7f494",
            "#72ccff",
            "#f7c5a0",
            "#d4a4eb",
            "#d2f5a6",
            "#76f2f2"
        ],
        "label": {
            "color": "#293441"
        }
    },
    "map": {
        "itemStyle": {
            "areaColor": "#f3f3f3",
            "borderColor": "#999999",
            "borderWidth": 0.5
        },
        "label": {
            "color": "#893448"
        },
        "emphasis": {
            "itemStyle": {
                "areaColor": "rgba(255,178,72,1)",
                "borderColor": "#eb8146",
                "borderWidth": 1
            },
            "label": {
                "color": "rgb(137,52,72)"
            }
        }
    },
    "geo": {
        "itemStyle": {
            "areaColor": "#f3f3f3",
            "borderColor": "#999999",
            "borderWidth": 0.5
        },
        "label": {
            "color": "#893448"
        },
        "emphasis": {
            "itemStyle": {
                "areaColor": "rgba(255,178,72,1)",
                "borderColor": "#eb8146",
                "borderWidth": 1
            },
            "label": {
                "color": "rgb(137,52,72)"
            }
        }
    },
    "categoryAxis": {
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "#666666"
            }
        },
        "axisTick": {
            "show": false,
            "lineStyle": {
                "color": "#333"
            }
        },
        "axisLabel": {
            "show": true,
            "color": "#aaaaaa"
        },
        "splitLine": {
            "show": false,
            "lineStyle": {
                "color": [
                    "#e6e6e6"
                ]
            }
        },
        "splitArea": {
            "show": false,
            "areaStyle": {
                "color": [
                    "rgba(250,250,250,0.05)",
                    "rgba(200,200,200,0.02)"
                ]
            }
        }
    },
    "valueAxis": {
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "#666666"
            }
        },
        "axisTick": {
            "show": false,
            "lineStyle": {
                "color": "#333"
            }
        },
        "axisLabel": {
            "show": true,
            "color": "#aaaaaa"
        },
        "splitLine": {
            "show": false,
            "lineStyle": {
                "color": [
                    "#e6e6e6"
                ]
            }
        },
        "splitArea": {
            "show": false,
            "areaStyle": {
                "color": [
                    "rgba(250,250,250,0.05)",
                    "rgba(200,200,200,0.02)"
                ]
            }
        }
    },
    "logAxis": {
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "#666666"
            }
        },
        "axisTick": {
            "show": false,
            "lineStyle": {
                "color": "#333"
            }
        },
        "axisLabel": {
            "show": true,
            "color": "#aaaaaa"
        },
        "splitLine": {
            "show": false,
            "lineStyle": {
                "color": [
                    "#e6e6e6"
                ]
            }
        },
        "splitArea": {
            "show": false,
            "areaStyle": {
                "color": [
                    "rgba(250,250,250,0.05)",
                    "rgba(200,200,200,0.02)"
                ]
            }
        }
    },
    "timeAxis": {
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "#666666"
            }
        },
        "axisTick": {
            "show": false,
            "lineStyle": {
                "color": "#333"
            }
        },
        "axisLabel": {
            "show": true,
            "color": "#aaaaaa"
        },
        "splitLine": {
            "show": false,
            "lineStyle": {
                "color": [
                    "#e6e6e6"
                ]
            }
        },
        "splitArea": {
            "show": false,
            "areaStyle": {
                "color": [
                    "rgba(250,250,250,0.05)",
                    "rgba(200,200,200,0.02)"
                ]
            }
        }
    },
    "toolbox": {
        "iconStyle": {
            "borderColor": "#999999"
        },
        "emphasis": {
            "iconStyle": {
                "borderColor": "#666666"
            }
        }
    },
    "legend": {
        "textStyle": {
            "color": "#999999"
        }
    },
    "tooltip": {
        "axisPointer": {
            "lineStyle": {
                "color": "#cccccc",
                "width": 1
            },
            "crossStyle": {
                "color": "#cccccc",
                "width": 1
            }
        }
    },
    "timeline": {
        "lineStyle": {
            "color": "#87f7cf",
            "width": 1
        },
        "itemStyle": {
            "color": "#87f7cf",
            "borderWidth": 1
        },
        "controlStyle": {
            "color": "#87f7cf",
            "borderColor": "#87f7cf",
            "borderWidth": 0.5
        },
        "checkpointStyle": {
            "color": "#fc97af",
            "borderColor": "#fc97af"
        },
        "label": {
            "color": "#87f7cf"
        },
        "emphasis": {
            "itemStyle": {
                "color": "#f7f494"
            },
            "controlStyle": {
                "color": "#87f7cf",
                "borderColor": "#87f7cf",
                "borderWidth": 0.5
            },
            "label": {
                "color": "#87f7cf"
            }
        }
    },
    "visualMap": {
        "color": [
            "#fc97af",
            "#87f7cf"
        ]
    },
    "dataZoom": {
        "backgroundColor": "rgba(255,255,255,0)",
        "dataBackgroundColor": "rgba(114,204,255,1)",
        "fillerColor": "rgba(114,204,255,0.2)",
        "handleColor": "#72ccff",
        "handleSize": "100%",
        "textStyle": {
            "color": "#333333"
        }
    },
    "markPoint": {
        "label": {
            "color": "#293441"
        },
        "emphasis": {
            "label": {
                "color": "#293441"
            }
        }
    }
}
    `

    new Vue({
        el: '#network',
        delimiters: ['@#', '#@'],
        mounted() {
            // 检测浏览器主题
            this.checkDarkMode();
            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', this.checkDarkMode);

            // 渲染Echarts图表
            this.renderChart();
            this.parseMonitorInfo(monitorInfo);
            window.addEventListener('resize', this.handleResize);
        },
        beforeDestroy() {
            // 移除浏览器模式的监听器
            window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', this.checkDarkMode);

            // 移除窗口变化的监听器
            window.removeEventListener('resize', this.handleResize);
            this.myChart.dispose();
            this.myChart = null;
        },
        data: {
            isDarkMode: false,
            servers: initData,
            chartOnOff: true,
            option: {
                tooltip: {
                    trigger: 'axis',
                },
                title: {
                    left: 'center',
                    text: "",
                    top: '2%',
                    textStyle: {
                        rich: {
                            a: {
                                padding: [12, 0, 12, 0],
                                fontSize: 16,
                                fontWeight: 'bolder',
                                height: 28
                            }
                        }
                    }
                },
                legend: {
                    type: "scroll",
                    top: '12%',
                    left: '10%',
                    right: '10%',
                    data: [],
                    textStyle: {
                        fontSize: 14
                    },
                    selected: {}
                },
                grid: {
                    top: '22%',
                    bottom: '20%',
                    left: '10%',
                    right: '10%'
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                dataZoom: [
                    {
                        start: 0,
                        end: 100,
                        bottom: '5%'
                    }
                ],
                xAxis: {
                    type: 'time',
                    boundaryGap: false,
                    splitLine: {
                        show: false
                    }
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: false,
                    splitLine: {
                        show: false
                    }
                },

            }
        },
        watch: {
            isDarkMode() {
                this.renderChart();
            }
        },
        methods: {
            checkDarkMode() {
                this.isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
            },
            handleResize() {
                if (this.myChart) {
                    this.myChart.resize();
                }
            },
            parseMonitorInfo(monitorInfo) {
                const tSeries = []
                const tLegendData = []

                const servers = monitorInfo.result
                servers.forEach((server, index) => {
                    let loss = 0
                    const data = []

                    data.push([server.created_at[0], Math.round(server.avg_delay[0])])

                    // 同一时间，可能有多个ping值，我们这里取第一个
                    for (let i = 0; i < server.created_at.length; i++) {
                        if (server.created_at[i] != server.created_at[i - 1]) {
                            avgDelay = Math.round(server.avg_delay[i])
                            if (avgDelay > 0.9 * MaxTCPPingValue) {
                                loss += 1
                            }

                            if (avgDelay > 0) {
                                data.push([server.created_at[i], avgDelay])
                            }

                        }
                    }

                    const lossRate = ((loss / data.length) * 100).toFixed(1)
                    const legendName = `${server.monitor_name} ${lossRate} %`
                    tLegendData.push(legendName)
                    tSeries.push({
                        name: legendName,
                        type: 'scatter',
                        data: data,
                        symbolSize: 5
                    })

                    this.option.legend.selected[`${legendName}`] = index < 3

                })

                this.option.title.text = `{a|${monitorInfo.result[0].server_name}}`;
                this.option.series = tSeries;
                this.option.legend.data = tLegendData;
                this.myChart.clear();
                this.myChart.setOption(this.option);
            },
            isWindowsPlatform(str) {
                return str.includes('Windows')
            },
            renderChart() {
                echarts.registerTheme('macarons',JSON.parse(macaronsTheme))
                echarts.registerTheme('chalk',JSON.parse(chalkTheme))
                if (this.myChart) {
                    this.myChart.dispose(); // Dispose of the previous chart instance
                }
                this.myChart = echarts.init(this.$refs.chartDom, this.isDarkMode ? 'chalk' :'macarons');
                this.myChart.setOption(this.option);
            },
            getMonitorHistory(id) {
                return $.ajax({
                    url: "/api/v1/monitor/" + id,
                    method: "GET"
                });
            },
            getFontLogoClass(str) {
                if (["almalinux",
                        "alpine",
                        "aosc",
                        "apple",
                        "archlinux",
                        "archlabs",
                        "artix",
                        "budgie",
                        "centos",
                        "coreos",
                        "debian",
                        "deepin",
                        "devuan",
                        "docker",
                        "elementary",
                        "fedora",
                        "ferris",
                        "flathub",
                        "freebsd",
                        "gentoo",
                        "gnu-guix",
                        "illumos",
                        "kali-linux",
                        "linuxmint",
                        "mageia",
                        "mandriva",
                        "manjaro",
                        "nixos",
                        "openbsd",
                        "opensuse",
                        "pop-os",
                        "raspberry-pi",
                        "redhat",
                        "rocky-linux",
                        "sabayon",
                        "slackware",
                        "snappy",
                        "solus",
                        "tux",
                        "ubuntu",
                        "void",
                        "zorin"].indexOf(str)
                    > -1) {
                    return str;
                }
                if (['openwrt', 'linux', "immortalwrt"].indexOf(str) > -1) {
                    return 'tux';
                }
                if (str == 'amazon') {
                    return 'redhat';
                }
                if (str == 'arch') {
                    return 'archlinux';
                }
                return '';
            },
            redirectNetwork(id) {
                this.getMonitorHistory(id)
                    .then(function (monitorInfo) {
                        var vm = network.__vue__;
                        vm.parseMonitorInfo(monitorInfo);
                    })
                    .catch(function (error) {
                        window.location.href = "/404";
                    })
            },
        }

    })

</script>
{{end}}

在哪吒面板后台 –> 设置 –> 自定义代码中输入如下的内容

<script>
    // 动画
    window.onload = function () {
        $('.nb-menu').css('visibility', 'visible');
        $('.footer').css('visibility', 'visible');
        $('.nb-menu .right.menu,.nb-menu .item')
            .transition({
                animation: 'fade down in',
                interval: 200,
            });
        $('.footer .container b,.footer .container small')
            .transition({
                animation: 'fade up in',
                interval: 200,
            });
        $('.accordion,.cards .card,table,.table tr,.service-status h2')
            .transition({
                animation: 'scale in',
                interval: 150
            });
        $('.network-chart').css('visibility', 'visible')
            .transition({
                animation: 'scale in',
                interval: 150
            });
        $('.network-bt').css('visibility', 'visible')
            .transition({
                animation: 'scale in',
                interval: 150
            });
    }
</script>
<style>
    :root {
 /* 
        --popup-filter: blur(2px);
        --lc-color-light: rgba(235, 235, 235, 0.8);
        --bc-color-light: rgba(235, 235, 235, 0.4);
        --the-color-light: rgba(235, 235, 235, 0.6);
        --he-color-light: rgba(235, 235, 235, 0.8);
        --message-color-light: rgb(22, 22, 22, 1);
        --popup-color-light:rgba(235, 235, 235, 0.6);

        --bc-color-dark: rgba(0, 0, 0, 0.4);
        --lc-color-dark: rgba(55, 55, 55, 0.8);
        --the-color-dark: rgba(35, 35, 35, 0.3);
        --he-color-dark: rgba(35, 35, 35, 0.8);
        --message-color-dark: rgb(235, 235, 235, 0.8);
        --popup-color-dark:rgba(78, 78, 78, 0.6);
*/

        /* 注释上面一段颜色代码并取消下面注释的代码开启毛玻璃效果（图形性能开销巨大，可能导致掉帧） */

       --popup-filter: blur(10px);
        --bb: blur(15px) brightness(110%);
        --lc-color-light: rgba(255, 255, 255, 0.7);
        --bc-color-light: rgba(255, 255, 255, 0.1);
        --the-color-light: rgba(255, 255, 255, 0.4);
        --he-color-light: rgba(255, 255, 255, 0.5);
        --message-color-light: rgb(22, 22, 22, 1);
        --popup-color-light:rgba(235, 235, 235, 0.6);

        --bc-color-dark: rgba(0, 0, 0, 0.3);
        --lc-color-dark: rgba(55, 55, 55, 0.8);
        --the-color-dark: rgba(70, 70, 70, 0.1);
        --he-color-dark: rgba(35, 35, 35, 0.7);
        --message-color-dark: rgb(235, 235, 235, 0.8);
        --popup-color-dark:rgba(78, 78, 78, 0.6); 

    }

    /* 暗色模式适配 */
    @media (prefers-color-scheme: dark) {
        *:not(.icon, i) {
            color: rgba(220, 220, 220, 0.95) !important;
        }

        .ui.menu .ui.dropdown .menu>.item {
            color: rgba(220, 220, 220, 0.95) !important;
        }


        .ui .cards>.card {
            background-color: var(--lc-color-dark) !important;
            border-color: var(--lc-color-dark) !important;
        }

        .ui .cards>.card i:not(.flag) {
            filter: saturate(60%) !important;
        }


        .ui.table thead th,
        .ui.table thead {
            background-color: var(--the-color-dark) !important;
        }

        .ui.table {
            background-color: none !important;
        }

        .ui.large.menu,
        .right.menu .menu,
        .service-status h2,
        .footer,
        .floating.message.warning,
        .floating.message.success {
            background-color: var(--he-color-dark) !important;
        }

        .floating.message.warning,
        .floating.message.success {
            color: var(--message-color-dark) !important;
        }

        #app .ui.fluid.accordion,
        .table {
            background-color: var(--bc-color-dark) !important;
        }

        .ui.content.popup {
            background-color: var(--popup-color-dark) !important;
        }
        .ui.content.popup:before{
            background-color: var(--popup-color-dark) !important;
        }

        .ui.progress small,
        td:not(.button):not(.bar):not(:has(.button, .bar)):not(:has(> small)) {
            filter: brightness(115%);
        }

        .ui.progress .bar,
        .nb-container .ui.icon.button,
        .service-status .delay-today>i {
            filter: brightness(85%);
        }

        .ui.button:hover {
            filter: brightness(100%) !important;
        }

        .ui.popup:before {
            background-color: var(--popup-color-dark) !important;
            box-shadow: 0px 0px 0 0 #ffffff !important;
        }

        .amzayo-custom-button {
            background-color: #4d4d4d8f !important;
            color: rgba(178, 178, 178, 0.95) !important;
            border: 2px solid #292929ae !important;
        }

        .amzayo-custom-button:hover {
            background-color: #ff8457 !important;
            color: #ffffffbd !important;
            font-weight: bolder !important;
        }

        i.amzayo-secondary-font {
            color: #727272ae !important;
        }

        .ui.popup {
            background-color: rgba(78, 78, 78, 1) !important;
        }

        .ui.menu .item:before {
            background: rgba(125, 125, 125, 0.15);
        }

        .ui.menu .active.item {
            background: rgba(10, 10, 10, 0.2);
        }

        .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless)>.container>.item:not(.right):not(.borderless):first-child {
            border-left: 1px solid rgba(125, 125, 125, 0.15);
        }

        .network-bt {
            background-color: rgba(35, 35, 35, 0.7) !important; 
            color: rgba(220, 220, 220, 0.95) !important;
        }

        .network-chart {
            background-color: rgba(35, 35, 35, 0.7) !important; 
        }
    
    }

    /* 屏幕适配 */

    @media (min-width: 320px) {
        .ui-alerts.top-center {
            margin-left: 0px !important;
            left: 50%;
            transform: translate(-50%, -0%);
        }
    }

    @media (min-width: 766px) {
        .ui.container {
            width: 80%;
        }

        /* 表格样式 */
        .ui.table thead th {
            backdrop-filter:var(--bb);
            background-color: var(--the-color-light);
        }

        thead tr :first-child {
            border-radius: 1rem 0 0 1rem !important;
        }

        thead tr :last-child {
            border-radius: 0 1rem 1rem 0 !important;
        }

        /* 小卡片 */
        .ui .cards>.card {
            border-radius: 1rem;
            border: none !important;
            background-color: var(--lc-color-light);
            padding: .25rem .25rem !important;
            margin: .5rem .3rem !important;
            visibility: hidden;
        }

        /* 小卡片头部调整 */
        .ui.card>.content>.header,
        .ui.cards>.card>.content>.header {
            padding-top: 0;
            display: flex;
            color: rgba(0, 0, 0, .85);
            align-items: center;
            padding-bottom: .2em;
            border-bottom: 1px solid rgba(0, 0, 0, .2);
        }

        .header_info {
            font-size: 1rem !important;
            line-height: 1rem !important;
            margin-top: .3rem !important;
            padding-right: .38rem !important;
        }
    }

    @media (max-width: 766px) {

        /* 表格样式 */
        .ui.table thead {
            backdrop-filter:var(--bb);
            background-color: var(--the-color-light);
        }

        thead {
            border-radius: 1rem !important;
        }

        thead tr {
            padding: 0 !important;
        }

        /* 小卡片 */
        .ui .cards>.card {
            border-radius: 1rem;
            background-color: var(--lc-color-light);
            outline: none !important;
            visibility: hidden;
        }

        /* 小卡片头部调整 */
        .ui.card>.content>.header,
        .ui.cards>.card>.content>.header {
            padding-top: 0.5rem;
            display: flex;
            color: rgba(0, 0, 0, .85);
            align-items: center;
            padding-bottom: .2em;
            border-bottom: 1px solid rgba(0, 0, 0, .2);
        }

        .header_info {
            font-size: 1rem !important;
            line-height: 1rem !important;
            padding-top: -.1rem !important;
            padding-right: .38rem !important;
        }
    }

    /* 自定义字体 */
    @font-face {
        font-family: 'Harmony Hans';
        src: url(https://cdn.amzayo.top/static/fonts/HarmonyOSHans-Medium.woff2) format('woff2');
    }

    * {
        font-family: 'Harmony Hans';
    }

    *:not(.content) {
        transition: all .2s;
    }

    /* 背景图片 */
    body::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        background: url(https://cdn.amzayo.top/static/public/luban/Luban_time_tour_poster.webp) center/cover no-repeat;
    }

    /* 初始隐藏元素，用于动画效果，关闭动画效果请删除 */
    .nb-menu,
    .nb-menu .right.menu,
    .nb-menu .item,
    .accordion,
    .footer,
    .footer .container b,
    .footer .container small,
    .table,
    .table tr,
    .service-status h2 {
        visibility: hidden;
    }

    /* 菜单颜色 */
    .ui.large.menu {
        backdrop-filter:var(--bb);
        background-color: var(--he-color-light);
        border-radius: 0 0 1rem 1rem !important;
    }

    .ui.menu .item:last-child {
        padding: 0 1.142em !important;
    }

    /* 登录按钮区域 */
    .ui.simple.dropdown {
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    /* 登录之后的下拉菜单 */
    .right.menu .menu {
        border-radius: 0 0 1rem 1rem !important;
        position: absolute;
        top: 0 !important;
        background-color: var(--he-color-light);
        padding: 0 0.3em !important;
    }

    /* 登录按钮颜色（需要使用配套自定义主题） */
    .amzayo-custom-button {
        backdrop-filter:var(--bb);
        background-color: #ffffff8f;
        color: #000000cf;
        border: 2px solid #ebe1d9;
        border-radius: 1rem;
        padding: 10px 20px;
        font-size: 16px;
    }

    .amzayo-custom-button:hover {
        background-color: #ff8457;
        color: #ffffffbd;
        font-weight: bolder;
    }

    /* 大卡片 */
    #app .ui.fluid.accordion {
        backdrop-filter:var(--bb);
        background-color: var(--bc-color-light);
        border-radius: 1rem;
    }

    #app :last-child.accordion {
        margin-bottom: 0 !important;
    }

    /* 小卡片靠哪个方向对齐 */
    .cards {
        justify-content: center;
    }

    .ui.card,
    .ui.cards>.card {
        box-shadow: none !important;
    }

    /* 取消下方注释调整下面的数字以调整卡片宽度（非移动端页面，移动端页面让它自适应吧） */
    /* .ui.card,
    .ui.cards>.card {
        width: 300px !important;
    } */

    /* 小卡片右上角的图标 */

    i.amzayo-secondary-font {
        margin-left: auto;
        color: rgba(255, 153, 1, 0.65);
    }

    /* 头部配置信息样式 */
    .header_info i {
        margin-top: .25rem;
        margin-right: .3rem;
        margin-left: .3rem;
    }

    /* 更多信息卡片 */
    .ui.content.popup {
        backdrop-filter:var(--popup-filter);
        border: none !important;
        border-radius: 1rem;
        margin: 0;
        padding: 1em !important;
        background-color: var(--popup-color-light);
        width: max-content;
        height: max-content;
    }

    .ui.popup {
        border: none !important;
    }

    /* 小三角 */
    .ui.content.popup:before {
        background-color: var(--popup-color-light);
        z-index: 9999 !important;
        border: none !important;
        box-shadow: 0px 0px 0 0 #ffffff !important;
    }

    .ui.bottom.popup:before {
        clip-path: polygon(0 0, 100% 0, 50% 50%, 0 100%);
    }

    .ui.top.popup:before {
        clip-path: polygon(100% 100%, 0% 100%, 100% 0);
    }

    /* 进度条圆角和颜色 */
    .ui.progress {
        border-radius: 50rem;
        height: 1.5rem;
    }

    /* 卡片内间距，如需调整小卡片高度，可以修改下面的2rem的数字 */
    .status.cards .wide.column {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        height: 2rem !important;
    }

    .bi::before,
    [class^="bi-"]::before,
    [class*=" bi-"]::before {
        vertical-align: middle;
        margin-bottom: .2rem;
    }

    /* 状态进度条 */
    .card .bar {
        height: 1.5rem;
    }

    .card .bar small {
        vertical-align: super;
        line-height: 1.5rem;
    }

    .card .ui.progress .bar {
        min-width: 1.8em !important;
        border-radius: 13px;
        line-height: 1.65em;
        height: 1.5rem;
    }

    table .ui.progress .bar {
        border-radius: 13px;
    }

    /* 正常状态进度条颜色 */
    .nb-container .ui.progress.fine .bar {
        background-image: linear-gradient(to right, rgba(125, 252, 0, 0.6), rgba(50, 205, 50, 0.6));
    }

    /*有点累状态进度条颜色 */
    .nb-container .ui.progress.warning .bar {
        background-image: linear-gradient(to right, rgba(255, 215, 0, 0.6), rgba(255, 125, 80, 0.6));
    }

    /*高负载状态进度条颜色 */
    .nb-container .ui.progress.error .bar {
        background-image: linear-gradient(to right, rgba(255, 160, 120, 0.6), rgba(255, 70, 0, 0.6));
    }

    /* 离线状态进度条颜色 */
    .ui.progress.offline .bar {
        background-color: #000;
    }

    /* 上传下载图标颜色 */
    i.arrow.alternate.circle.down.outline.icon {
        color: rgb(0, 157, 255);
    }

    i.arrow.alternate.circle.up.outline.icon {
        color: #ff0000;
    }

    /*服务状态*/
    .nb-container .service-status .good {
        background: rgba(50, 205, 50, 0.75);
    }

    .nb-container .service-status .warning {
        background: rgba(250, 155, 40, 0.75);
    }

    .nb-container .service-status .danger {
        background: rgba(255, 35, 0, 0.75);
    }

    /* 服务页面大表格背景 */
    .table {
        backdrop-filter:var(--bb);
        background-color: var(--bc-color-light);
        border-radius: 1rem !important;
    }

    .ui.table {
        background-color: var(--bc-color-light);
    }

    .ui.button:not(.good):not(.warning):not(.danger):hover {
        background: #e0e1e2 none;
    }

    .ui.button:hover {
        filter: brightness(0.9);
    }

    .service-status .delay-today {
        vertical-align: sub;
    }

    /* 循环流量统计标题 */
    .service-status h2 {
        backdrop-filter:var(--bb);
        background-color: var(--he-color-light);
        border-radius: 1rem !important;
        margin: 0 !important;
    }

    /*底部*/
    .footer {
        backdrop-filter:var(--bb);
        background-color: var(--he-color-light);
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        border-radius: 1rem 1rem 0 0 !important;
    }

    .ui.inverted.segment,
    .ui.primary.inverted.segment {
        background-color: var(--he-color-light);
    }

    .footer .container,
    .footer .container a {
        color: var(--message-color-light);
    }

    .footer .container a:hover {
        color: #ff8457 !important;
    }

    /* 提示消息 */
    .floating.message.success {
        backdrop-filter: blur(15px) brightness(110%);
        background-color: var(--he-color-light);
        border: 3px solid rgba(255.255.255.0.5);
        border-radius: 1rem !important;
        color: var(--message-color-light);
        box-shadow: 0 0 15px rgba(1, 132, 255, 0.65);
    }

    .floating.message.success .header {
        color: var(--message-color-light);
    }

    .floating.message.warning {
        backdrop-filter: blur(15px) brightness(110%);
        background-color: var(--he-color-light);
        border: 1px solid rgba(255.255.255.0.5);
        border-radius: 1rem !important;
        color: var(--message-color-light);
        box-shadow: 0 0 15px rgba(255, 153, 1, 0.65);
    }

    .floating.message.warning .header {
        color: var(--message-color-light);
    }

    .cpucontent {
        display: inline-block;
    }

    .rollanimation {
        animation: scroll 10s cubic-bezier(.2, 0, .8, 1) infinite;
    }

    @keyframes scroll {

        0% {
            transform: translateX(0%);
        }

        30% {
            transform: translateX(0%);
        }

        100% {
            transform: translateX(-100%);
        }

    }


    /*

    以下样式为部分原版主题样式，由于原版主题样式有些强制性，不方便二次修改，故拿出来

    */

    .ui.mini.message {
        width: 17rem;
    }

    .ui-alerts {
        padding: 23px 0 !important;
    }

    td {
        word-wrap: break-word;
        word-break: break-all;
    }

    .nb-container {
        padding-top: 75px;
        min-height: 100vh;
        padding-bottom: 65px;
        margin-bottom: -47px;
    }

    #app .ui.fluid.accordion {
        margin-bottom: 1rem;
    }

    .login.nb-container {
        display: flex;
        align-items: center;
        padding-top: unset;
    }

    .login.nb-container>.grid {
        width: 100%;
        margin: 0 auto;
    }

    .login.nb-container>.grid .column {
        max-width: 450px;
    }

    .status.cards .flag {
        margin-right: 0 !important;
    }

    .status.cards .header>.info.icon {
        float: right;
        margin-right: 0;
    }

    .status.cards .wide.column {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        height: 2rem !important;
    }

    .status.cards .three.wide.column {
        padding-right: 0 !important;
    }

    .status.cards .wide.column:nth-child(1) {
        margin-top: 1rem !important;
    }

    .status.cards .wide.column:nth-child(2) {
        margin-top: 1rem !important;
    }

    .status.cards .description {
        padding-bottom: 1rem !important;
    }

    .status.cards .ui.content.popup {
        min-width: 250px;
    }

    .status.cards .outline.icon {
        margin-right: 0 !important;
    }

    .ui.progress .bar {
        min-width: 1.26em !important;
        text-align: right;
        padding-right: 0.4em;
        line-height: 1.75em;
        color: rgba(255, 255, 255, 0.7);
        font-weight: 700;
        max-width: 100% !important;
    }

    .service-status .delay-today {
        display: flex;
        align-items: center;
    }

    .service-status .delay-today>i {
        display: inline-block;
        width: 1.2em;
        height: 1.2em;
        border-radius: 0.6em;
        background-color: grey;
        margin-right: 0.3em;
    }

    .service-status .network-bt {
        visibility: hidden;
        backdrop-filter: var(--bb);
        background-color: var(--he-color-light); 
    }
    
    .network-chart {
        visibility: hidden;
        backdrop-filter: var(--bb);
        background-color: rgba(255, 255, 255, 0.7); 
    }
</style>