server-status主题重写network页面 (#407)

* 修复浏览器高分辨率下网络页echart图表显示不全 * server-status主题重写network页面 1. 点击“网络监控”弹出选择服务器 2. 增加服务器搜索筛选功能 3. 自适应lenged高度 4. 适配深色模式与浅色模式 5. 适配半透明模式 6. 适配pc段与移动端 * 刷新cdn缓存 * 增加disposeCharts逻辑 * 增加disposeCharts逻辑 * 标题增加服务器所在地区国旗展示 * 国旗样式修复 * 修复国旗样式 * echart图标高度适配不同分辨率浏览器
nezhahq · Aug 10, 2024 · c18e0e4 · c18e0e4
1 parent d909754
commit c18e0e4
Show file tree

Hide file tree

Showing 12 changed files with 459 additions and 224 deletions.
diff --git a/resource/l10n/en-US.toml b/resource/l10n/en-US.toml
@@ -650,4 +650,7 @@ other = "Disable Switch Template in Frontend"
 other = "Servers On World Map"
 
 [NAT]
-other = "NAT"
+other = "NAT"
+
+[NetworkSpiterList]
+other = "Network Monitor"
diff --git a/resource/l10n/es-ES.toml b/resource/l10n/es-ES.toml
@@ -650,4 +650,7 @@ other = "Deshabilitar Cambio de Plantilla en Frontend"
 other = "Servidores en el mapa mundial"
 
 [NAT]
-other = "NAT"
+other = "NAT"
+
+[NetworkSpiterList]
+other = "Red Monitor"
diff --git a/resource/l10n/zh-CN.toml b/resource/l10n/zh-CN.toml
@@ -650,4 +650,7 @@ other = "禁止前台切换模板"
 other = "服务器世界分布图"
 
 [NAT]
-other = "内网穿透"
+other = "内网穿透"
+
+[NetworkSpiterList]
+other = "网络监控"
diff --git a/resource/l10n/zh-TW.toml b/resource/l10n/zh-TW.toml
@@ -650,4 +650,7 @@ other = "禁止前台切換主題"
 other = "伺服器世界分布圖"
 
 [NAT]
-other = "NAT"
+other = "NAT"
+
+[NetworkSpiterList]
+other = "網絡監控"
diff --git a/resource/static/theme-server-status/css/dark.css b/resource/static/theme-server-status/css/dark.css
@@ -171,4 +171,8 @@ body[theme="dark"] .modal-header i.xclose{
 body[theme="dark"] .toolbox i{
     color: rgba(241, 241, 241, 1);
     background-color: rgba(0, 0, 0, 0.5);
+}
+
+body[theme="dark"] .network-box .network-box-header{
+    border-bottom: 1px solid rgba(110, 112, 121, 0.25);
 }
diff --git a/resource/static/theme-server-status/css/light.css b/resource/static/theme-server-status/css/light.css
diff --git a/resource/static/theme-server-status/css/main.css b/resource/static/theme-server-status/css/main.css
@@ -317,6 +317,78 @@ td.ping-network-quality {
 }
 /* 服务页 正文结束 */
 
+/* 网络页 正文*/
+.network-box .btn-group.open .dropdown-toggle{
+    box-shadow:unset;
+}
+
+.network-box .network-box-header{
+    font-size: 18px;
+    padding: 5px 0px 15px 5px;
+    cursor: pointer;
+    width: 100%;
+}
+
+.network-box .network-box-header .dropdown-menu {
+    max-height: 22.5em;
+    overflow-y: auto;
+    z-index:99999998;
+    min-width: 200px;
+    padding: 0px;
+}
+
+.network-box .network-box-header .dropdown-menu::-webkit-scrollbar {
+    display: none;
+}
+
+.network-box .network-box-header .dropdown-menu li{
+    height: 2em;
+    cursor: pointer;
+}
+
+.network-box .network-box-header .dropdown-menu li.input-group{
+    margin: 0 auto;
+    display: flex;
+    position: sticky;
+    top: 0;
+    z-index: 99999997;
+}
+
+.network-box .network-box-header .dropdown-menu li.input-group input{
+    width: 100%;
+    height: 2em;
+    border-top: none;
+    border-left: none;
+    border-right: none;
+}
+
+.network-box .network-box-header .dropdown-menu li a {
+    padding: 5px 5px 5px 15px;
+}
+
+.network-box .network-box-header .dropdown-menu li.hidden {
+    height: 0;
+    display: none;
+    visibility:hidden;
+}
+
+.network-box .network-box-header .dropdown-menu li.visible {
+    display: block;
+}
+
+.network-box .chartTitle {
+    text-align: center;
+    font-size: 18px;
+    margin: 18px 0px 15px 0px;
+}
+
+.network-box .chartTitle i.chartCountryCode{
+    font-size: 16px;
+    border-radius: 12.5%;
+}
+
+/* 网络页 正文结束 */
+
 /* 地图版服务器分布图 */
 #mapChartBox{
     z-index: 999999999;
@@ -393,6 +465,12 @@ footer p{
     }
 }
 
+/* 彩虹旗 */
+.fi-rb {
+    background-image: url(/static/theme-server-status/img/rb.png);
+}
+
+
 @media only screen and (max-width: 767px) {
     body {
         font-size: 10px !important;
@@ -482,6 +560,18 @@ footer p{
     td.ping-network-quality {
         width: 110px;
     }
+    .network-box .network-box-header {
+        margin: 8px 0px 0px 8px;
+        font-size: 16px;
+    }
+    .network-box .chartTitle {
+        font-size: 16px;
+        margin: 10px 0px 10px 0px;
+    }
+    .network-box .chartTitle i.chartCountryCode{
+        font-size: 15px;
+        border-radius: 12.5%;
+    }
 }
 
 @media only screen and (min-width: 768px) {

diff --git a/resource/static/theme-server-status/img/rb.png b/resource/static/theme-server-status/img/rb.png
diff --git a/resource/static/theme-server-status/js/mixin.js b/resource/static/theme-server-status/js/mixin.js
@@ -14,14 +14,18 @@ const mixinsVue = {
             { key: 'default', name: 'Default', icon: 'th large' },
             { key: 'angel-kanade', name: 'AngelKanade', icon: 'square' },
             { key: 'server-status', name: 'ServerStatus', icon: 'list' }
-        ]
+        ],
+        colors: [],
+        colorsDark: ['#4992FF', '#08C091', '#FDDD5F', '#FF6E76', '#58D9F9', '#7CFFB2', '#FF8A44', '#8D48E3', '#DD79FF', '#5470C6', '#3BA272', '#FAC758', '#EE6666', '#72C0DE', '#91CC76', '#FB8352', '#9A60B4', '#EA7BCC'],
+        colorsLight: ['#5470C6', '#3BA272', '#FAC758', '#EE6666', '#72C0DE', '#91CC76', '#FB8352', '#9A60B4', '#EA7BCC', '#4992FF', '#08C091', '#FDDD5F', '#FF6E76', '#58D9F9', '#7CFFB2', '#FF8A44', '#8D48E3', '#DD79FF'],
     },
     created() {
         this.isMobile = this.checkIsMobile();
         this.theme = this.initTheme();
         this.showGroup = this.initShowGroup();
         this.semiTransparent = this.initSemiTransparent();
         this.preferredTemplate = this.getCookie('preferred_theme') ? this.getCookie('preferred_theme') : this.$root.defaultTemplate;
+        this.colors = this.theme == "dark" ? this.colorsDark : this.colorsLight;
         window.addEventListener('scroll', this.handleScroll);
     },
     destroyed() {
@@ -51,7 +55,7 @@ const mixinsVue = {
             // 重新赋值全局调色
             this.colors = this.theme == "dark" ? this.colorsDark : this.colorsLight;
 
-            if(this.$root.page == 'index') {
+            if(this.$root.page == 'index' || this.$root.page == 'network') {
                 this.reloadCharts(); // 重新载入echarts图表
             }
         },
@@ -81,7 +85,7 @@ const mixinsVue = {
         toggleSemiTransparent(){
             this.semiTransparent = !this.semiTransparent;
             localStorage.setItem("semiTransparent", this.semiTransparent);
-            if(this.$root.page == 'index') {
+            if(this.$root.page == 'index' || this.$root.page == 'network') {
                 this.reloadCharts(); // 重新载入echarts图表
             }
         },

diff --git a/resource/template/theme-server-status/header.html b/resource/template/theme-server-status/header.html
@@ -16,10 +16,10 @@
     <script src="https://unpkg.com/[email protected]/dist/js/bootstrap.min.js"></script>
     <script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
     <script src="https://unpkg.com/[email protected]/dist/echarts.min.js"></script>
-    <link rel="stylesheet" href="/static/theme-server-status/css/main.css?v20240807">
-    <link rel="stylesheet" href="/static/theme-server-status/css/dark.css?v20240807">
-    <link rel="stylesheet" href="/static/theme-server-status/css/light.css?v20240807">
-    <script src="/static/theme-server-status/js/mixin.js?v20240807"></script>
+    <link rel="stylesheet" href="/static/theme-server-status/css/main.css?v202408011">
+    <link rel="stylesheet" href="/static/theme-server-status/css/dark.css?v202408011">
+    <link rel="stylesheet" href="/static/theme-server-status/css/light.css?v20240811">
+    <script src="/static/theme-server-status/js/mixin.js?v20240811"></script>
 </head>
 <body>
 <div id="app">

diff --git a/resource/template/theme-server-status/home.html b/resource/template/theme-server-status/home.html
@@ -155,14 +155,13 @@ <h4 class="modal-title" id="mapChartTitle">
                     return;
                 }
                 const unit = this.language=='zh-CN' ? '台' : 'servers';
-                const isMobile = this.checkIsMobile();
                 const width = window.innerWidth;
                 const height = 0.95 * window.innerHeight;
                 const backgroundColor = this.theme == "dark" ? '' : '';
                 const inRangeColor = this.theme == "dark" ? '#D2B206' : '#FFDF32';
                 const tooltipBackgroundColor = this.theme == "dark" ? "#ffffff" : '#ffffff';
                 const tooltipBorderColor = this.theme == "dark" ? "#ffffff" : "#ffffff"; 
-                const fontSize = isMobile ? 10 : 12;
+                const fontSize = this.isMobile ? 10 : 12;
                 const fontColor = this.theme == "dark" ? "#000000" : "#000000";     
                 const chartContainer = document.getElementById('mapChart');
                 const mapChart = echarts.init(chartContainer, '', { // init图表
@@ -510,22 +509,21 @@ <h4 class="modal-title" id="mapChartTitle">
                 }
                 // 定义图表参数值
                 const MaxTCPPingValue = {{.Conf.MaxTCPPingValue}} ? {{.Conf.MaxTCPPingValue}} : 300;
-                const isMobile = this.checkIsMobile();
-                const fontSize = isMobile ? 10 : 14;
-                const gridLeft = isMobile ? 25 : 36;
-                const gridRight = isMobile ? 5 : 20;
-                const legendLeft = isMobile ? 'center' : 'center';
-                const legendTop = isMobile ? 5 : 5;
-                const legendPadding= isMobile ? [5,0,5,0] : [5,0,5,0];
+                const fontSize = this.isMobile ? 10 : 14;
+                const gridLeft = this.isMobile ? 25 : 36;
+                const gridRight = this.isMobile ? 5 : 20;
+                const legendLeft = this.isMobile ? 'center' : 'center';
+                const legendTop = this.isMobile ? 5 : 5;
+                const legendPadding= this.isMobile ? [5,0,5,0] : [5,0,5,0];
                 const systemDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
                 const theme = localStorage.getItem("theme") ? localStorage.getItem("theme") : systemDarkMode;
                 const chartTheme = theme == "dark" ? "dark" : "default";
                 const fontColor = theme == "dark" ? "#f1f1f1" : "#000000";
                 const backgroundColor = theme == "dark" ? '' : '';
                 const tooltipBackgroundColor = this.theme == "dark" ? (this.semiTransparent ? "rgba(28,29,38,0.85)" : "rgba(28,29,38,1)") : (this.semiTransparent ? "rgba(255,255,255,0.85)" : "rgba(255,255,255,1)");
                 const tooltipBorderColor = this.theme == "dark" ? (this.semiTransparent ? "rgba(28,29,38,0.9)" : "rgba(28,29,38,1)") : (this.semiTransparent ? "rgba(255,255,255,0.9)" : "rgba(255,255,255,1)");
-                const lineStyleWidth = isMobile ? 1 : 2;
-                const splitLineWidth = isMobile ? 0.5 : 1;
+                const lineStyleWidth = this.isMobile ? 1 : 2;
+                const splitLineWidth = this.isMobile ? 0.5 : 1;
                 // 渲染图表
                 const chart = echarts.init(chartContainer, chartTheme, {
                     renderer: 'canvas',
@@ -562,12 +560,12 @@ <h4 class="modal-title" id="mapChartTitle">
                 const legendData = chartData.map(item => item.monitor_name);
                 const maxLegendsPerRowMobile = localStorage.getItem("maxLegendsPerRowMobile") ? localStorage.getItem("maxLegendsPerRowMobile") : 3;
                 const maxLegendsPerRowPc = localStorage.getItem("maxLegendsPerRowPc") ? localStorage.getItem("maxLegendsPerRowPc") : 6;
-                const autoIncrement = Math.floor((legendData.length - 1) / (isMobile ? maxLegendsPerRowMobile : maxLegendsPerRowPc)) * (isMobile ? 20 : 28)
+                const autoIncrement = Math.floor((legendData.length - 1) / (this.isMobile ? maxLegendsPerRowMobile : maxLegendsPerRowPc)) * (this.isMobile ? 20 : 28)
                 const height = 300 + autoIncrement;
                 const gridTop = 40 + autoIncrement;
-                const legendIcon = isMobile ? 'rect' : ""; 
-                const itemWidth = isMobile ? 10 : 25;
-                const itemHeight = isMobile ? 10 : 14;
+                const legendIcon = this.isMobile ? 'rect' : ""; 
+                const itemWidth = this.isMobile ? 10 : 25;
+                const itemHeight = this.isMobile ? 10 : 14;
                 chart.resize({
                     width: 'auto',
                     height: height