From c18e0e420e1f5781d22b9a205054e5951afdf3e1 Mon Sep 17 00:00:00 2001 From: nap0o <144927971+nap0o@users.noreply.github.com> Date: Sat, 10 Aug 2024 11:19:52 -0400 Subject: [PATCH] =?UTF-8?q?server-status=E4=B8=BB=E9=A2=98=E9=87=8D?= =?UTF-8?q?=E5=86=99network=E9=A1=B5=E9=9D=A2=20(#407)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 修复浏览器高分辨率下网络页echart图表显示不全 * server-status主题重写network页面 1. 点击“网络监控”弹出选择服务器 2. 增加服务器搜索筛选功能 3. 自适应lenged高度 4. 适配深色模式与浅色模式 5. 适配半透明模式 6. 适配pc段与移动端 * 刷新cdn缓存 * 增加disposeCharts逻辑 * 增加disposeCharts逻辑 * 标题增加服务器所在地区国旗展示 * 国旗样式修复 * 修复国旗样式 * echart图标高度适配不同分辨率浏览器 --- resource/l10n/en-US.toml | 5 +- resource/l10n/es-ES.toml | 5 +- resource/l10n/zh-CN.toml | 5 +- resource/l10n/zh-TW.toml | 5 +- .../static/theme-server-status/css/dark.css | 4 + .../static/theme-server-status/css/light.css | 4 + .../static/theme-server-status/css/main.css | 90 +++ .../static/theme-server-status/img/rb.png | Bin 0 -> 5903 bytes .../static/theme-server-status/js/mixin.js | 10 +- .../template/theme-server-status/header.html | 8 +- .../template/theme-server-status/home.html | 28 +- .../template/theme-server-status/network.html | 521 +++++++++++------- 12 files changed, 460 insertions(+), 225 deletions(-) create mode 100644 resource/static/theme-server-status/img/rb.png diff --git a/resource/l10n/en-US.toml b/resource/l10n/en-US.toml index ae48ea3..1bf2972 100644 --- 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" \ No newline at end of file +other = "NAT" + +[NetworkSpiterList] +other = "Network Monitor" \ No newline at end of file diff --git a/resource/l10n/es-ES.toml b/resource/l10n/es-ES.toml index 59a11b7..0c645b1 100644 --- 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" \ No newline at end of file +other = "NAT" + +[NetworkSpiterList] +other = "Red Monitor" \ No newline at end of file diff --git a/resource/l10n/zh-CN.toml b/resource/l10n/zh-CN.toml index d7c5829..5ea9b10 100644 --- a/resource/l10n/zh-CN.toml +++ b/resource/l10n/zh-CN.toml @@ -650,4 +650,7 @@ other = "禁止前台切换模板" other = "服务器世界分布图" [NAT] -other = "内网穿透" \ No newline at end of file +other = "内网穿透" + +[NetworkSpiterList] +other = "网络监控" diff --git a/resource/l10n/zh-TW.toml b/resource/l10n/zh-TW.toml index e158346..f43e3dd 100644 --- a/resource/l10n/zh-TW.toml +++ b/resource/l10n/zh-TW.toml @@ -650,4 +650,7 @@ other = "禁止前台切換主題" other = "伺服器世界分布圖" [NAT] -other = "NAT" \ No newline at end of file +other = "NAT" + +[NetworkSpiterList] +other = "網絡監控" \ No newline at end of file diff --git a/resource/static/theme-server-status/css/dark.css b/resource/static/theme-server-status/css/dark.css index 29356be..ea37d77 100755 --- 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); } \ No newline at end of file diff --git a/resource/static/theme-server-status/css/light.css b/resource/static/theme-server-status/css/light.css index b78186e..93b3f10 100755 --- a/resource/static/theme-server-status/css/light.css +++ b/resource/static/theme-server-status/css/light.css @@ -197,6 +197,10 @@ body[theme="light"] .modal-header i.xclose{ color: rgba(0, 0, 0, 0.87); } +body[theme="light"] .network-box .network-box-header{ + border-bottom: 1px solid rgba(224, 230, 241, 0.6); +} + @media only screen and (max-width: 767px) { body[theme="light"] .navbar .navbar-nav .open .dropdown-menu { background-color: rgba(249, 249, 249, 1); diff --git a/resource/static/theme-server-status/css/main.css b/resource/static/theme-server-status/css/main.css index 6711b28..5d53a2e 100755 --- 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 new file mode 100644 index 0000000000000000000000000000000000000000..eff31cf0723e658b9c126c876e753ae909708dbf GIT binary patch literal 5903 zcmeHL|4&m_6u+;uS_@2~!!c+IW(qn9WeJOoVyzZs4bYly0ZghiTOf1UO8Mf-H`iAp z!wq8-vq&bStyvs1Iyb@$NWne?t&Tu6Y^e+i4-0{UP`V0jag^PAiOK#2miNQUz3<)g z&Pz@{pY!>g_st1;W+X3`2LOnaeUPC9fJFj8&|DUL(%F{P1{b1CnRyi49^|{>O-5n9 ztSBc3ybJeSK-8ZBY!m{oSa<;tW+6ZrTnY5d!g_tmA}wLB_XLds20PLugWgPja zf|&oSTT{6C?YfDwOa5osF;UVZyLig$vO4y}75czWccV3RJa*)<^XF#*4T+|n<(@67 z``Ni(@s-`WSH7y;*5BsKLQ5^Ss&jYOdV-+`ZtqlZ;z7_o*+5lC2gWiB&V`1}<8$vE zx=7VW2WI`h2*yWip2e92+eK!%!ZEbe{F9gXO2x$bn;_F2w=EImH7MT7Q2QJ z!X=iyw4NFmyN>u_Xe9~3TXZ^lDUB1MZPVRAJW(gBNjpcRKs?DI!bV@5`V3`_36G&m zh(XM<4=J#}x)IaoA!}2Giu9r6Pau7m)J#E8AKpj^;kWb;1oE^dqz2rV>`OyQ=9kK> zY=nRILzdnBr{8X?#R!*JlC;g@P>JwPA7+y}nU?0eSj|a@O+S)^W;x}3l;k2OVzC2E zW7XNKCY!pma!|HUpz5Shm55EB@?z*Bj}ozo%BO%aeEsuRp%@KY|3Jx8ccfBGYNj9z zLN+*M__pA*wWt(pD@mQ81I`iqL?w2auusx~`Np*~iR)s@jo`eYCk3+yal1H4#NYot zS13XqB^h=U<@gt=A;ZDJ2Bm=;(b&qy+W!N$2^LrioLp9|(-|TW}nb=toA0lT2 z*r1*@_ - - - - + + + +
diff --git a/resource/template/theme-server-status/home.html b/resource/template/theme-server-status/home.html index 4ff2f2d..abb5226 100644 --- a/resource/template/theme-server-status/home.html +++ b/resource/template/theme-server-status/home.html @@ -155,14 +155,13 @@ 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,13 +509,12 @@ } // 定义图表参数值 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"; @@ -524,8 +522,8 @@ 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 @@ 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 diff --git a/resource/template/theme-server-status/network.html b/resource/template/theme-server-status/network.html index 05dc5fd..1a162d7 100644 --- a/resource/template/theme-server-status/network.html +++ b/resource/template/theme-server-status/network.html @@ -1,239 +1,362 @@ {{define "theme-server-status/network"}} {{template "theme-server-status/header" .}} {{template "theme-server-status/menu" .}} -
- - -
-
-
-
+
+
+ + +
+
@#chartTitle#@
+
{{template "theme-server-status/footer" .}} {{end}}