From e9428d575737d99b7eb26d879bf8405d17833e97 Mon Sep 17 00:00:00 2001 From: nap0o <144927971+nap0o@users.noreply.github.com> Date: Fri, 16 Aug 2024 23:14:28 -0400 Subject: [PATCH] =?UTF-8?q?improve=20&=20fix=20:=20=E4=B8=BB=E9=A2=98?= =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=8F=8Abug=E4=BF=AE=E5=A4=8D=20(#409)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 主题优化及bug修复 default主题 1.修复主box过宽导致的系列问题（pc和移动端） 2.network页面适配深色模式和浅色模式 status-server主题 1. network页面折线图取数逻辑优化，丢包率一直是100%时，不显示丢包markline线 2. 隐藏所有table横向滚动条 3. 关闭折线图hover效果，大幅提升echarts图表渲染速度 4. 移动端页底显示位置优化 * 刷新cdn缓存 * 修复default深色模式在ios设备不生效bug * 1. 恢复主baox 1680px宽度，用其他方式修复上一版存在bug（移动端左右留空不一致等） 2. 首页echarts自动适配深色浅色模式 * fix --- resource/static/darkmode.css | 227 +++++++++--------- resource/static/main.css | 5 + resource/static/theme-default/css/main.css | 24 +- .../static/theme-server-status/css/main.css | 7 +- resource/template/theme-default/footer.html | 2 - resource/template/theme-default/header.html | 6 +- resource/template/theme-default/home.html | 7 +- resource/template/theme-default/network.html | 11 +- .../template/theme-server-status/footer.html | 64 ++--- .../template/theme-server-status/header.html | 2 +- .../template/theme-server-status/home.html | 6 +- .../template/theme-server-status/network.html | 70 +++--- 12 files changed, 208 insertions(+), 223 deletions(-) diff --git a/resource/static/darkmode.css b/resource/static/darkmode.css index 7afaf28..c3a784c 100644 --- a/resource/static/darkmode.css +++ b/resource/static/darkmode.css @@ -1,148 +1,141 @@ -.ui.container { - width: 95vw !important; - max-width: 1680px !important; +html[nz-theme='dark'] body { + background-color: #121212 !important; + color: #fff !important; } -html[nz-theme='dark'] { - body { - background-color: #121212 !important; - color: #fff !important; - } +html[nz-theme='dark'] .ui.menu { + background-color: #282828 !important; +} - .ui.menu { - background-color: #282828 !important; - } +html[nz-theme='dark'] .ui.menu * { + color: #fff !important; +} - .ui.menu * { - color: #fff !important; - } +html[nz-theme='dark'] .accordion { + background-color: #282828 !important; +} - .accordion { - background-color: #282828 !important; - } +html[nz-theme='dark'] .accordion .title { + color: #fff !important; +} - .accordion .title { - color: #fff !important; - } +html[nz-theme='dark'] .ui.card { + background-color: #3f3f3f !important; + border: none !important; + box-shadow: none !important; +} - .ui.card { - background-color: #3f3f3f !important; - border: none !important; - box-shadow: none !important; - } +html[nz-theme='dark'] .header { + color: #fff !important; +} - .header { - color: #fff !important; - } +html[nz-theme='dark'] .description { + color: #fff !important; +} - .description { - color: #fff !important; - } +html[nz-theme='dark'] .icon { + color: #fff !important; +} - .icon { - color: #fff !important; - } +html[nz-theme='dark'] .ui.popup { + background-color: #575757 !important; + color: #fff !important; +} - .ui.popup { - background-color: #575757 !important; - color: #fff !important; - } +html[nz-theme='dark'] .ui.table { + background-color: #282828 !important; + color: #fff !important; +} - .ui.table { - background-color: #282828 !important; - color: #fff !important; - } +html[nz-theme='dark'] .ui thead th { + background-color: #3f3f3f !important; + color: #fff !important; +} - .ui thead th { - background-color: #3f3f3f !important; - color: #fff !important; - } +html[nz-theme='dark'] .ui.buttons .button { + background-color: #3f3f3f !important; + color: #fff !important; +} - .ui.buttons .button { - background-color: #3f3f3f !important; - color: #fff !important; - } +html[nz-theme='dark'] .ui.modal { + background-color: #282828 !important; +} - .ui.modal { - background-color: #282828 !important; - } +html[nz-theme='dark'] .ui.modal * { + color: #fff !important; +} - .ui.modal * { - color: #fff !important; - } +html[nz-theme='dark'] textarea, +html[nz-theme='dark'] input, +html[nz-theme='dark'] select, +html[nz-theme='dark'] .dropdown { + background-color: #3f3f3f !important; + color: #fff !important; +} - textarea, - input, - select, - .dropdown { - background-color: #3f3f3f !important; - color: #fff !important; - } +html[nz-theme='dark'] .ui.message { + background-color: unset !important; +} - .ui.message { - background-color: unset !important; - } +html[nz-theme='dark'] .ui.dropdown .menu { + background-color: #575757 !important; + color: #fff !important; +} - .ui.dropdown .menu { - background-color: #575757 !important; - color: #fff !important; - } +html[nz-theme='dark'] .ui.modal>.header { + background-color: #3f3f3f !important; +} - .ui.modal>.header { - background-color: #3f3f3f !important; - } +html[nz-theme='dark'] .ui.modal>.content { + background-color: #282828 !important; +} - .ui.modal>.content { - background-color: #282828 !important; - } +html[nz-theme='dark'] .ui.modal>.actions { + background-color: #3f3f3f !important; +} - .ui.modal>.actions { - background-color: #3f3f3f !important; - } +html[nz-theme='dark'] #alert { + background-color: #3f3f3f !important; + color: #fff !important; +} - #alert { - background-color: #3f3f3f !important; - color: #fff !important; - } +html[nz-theme='dark'] .ui.form .field>label { + color: unset !important; +} - .ui.form .field>label { - color: unset !important; - } +html[nz-theme='dark'] .ui.segment { + background-color: #3f3f3f !important; +} - .ui.segment { - background-color: #3f3f3f !important; - } +html[nz-theme='dark'] .ui.segment textarea, +html[nz-theme='dark'] input, +html[nz-theme='dark'] select, +html[nz-theme='dark'] .dropdown { + background-color: #575757 !important; + color: #fff !important; +} - .ui.segment textarea, - input, - select, - .dropdown { - background-color: #575757 !important; - color: #fff !important; - } +html[nz-theme='dark'] form label { + color: #fff !important; +} - form label { - color: #fff !important; - } +html[nz-theme='dark'] .ui.inverted.segment { + background-color: #121212 !important; +} - .ui.inverted.segment { - background-color: #121212 !important; - } +html[nz-theme='dark'] .ui.inverted.segment * { + color: #8b8b8b !important; +} - .ui.inverted.segment * { - color: #8b8b8b !important; - } +html[nz-theme='dark'] .menu .dropdown { + background-color: #282828 !important; + color: #fff !important; +} - .menu .dropdown { - background-color: #282828 !important; - color: #fff !important; - } +html[nz-theme='dark'] .ui.menu .ui.dropdown .menu>.item { + color: #fff !important; +} - .ui.menu .ui.dropdown .menu>.item { - color: #fff !important; - } - - .login .ui.message{ - color: #8b8b8b !important; - } -} \ No newline at end of file +html[nz-theme='dark'] .login .ui.message{ + color: #8b8b8b !important; +} diff --git a/resource/static/main.css b/resource/static/main.css index a8fb509..6ba88a3 100644 --- a/resource/static/main.css +++ b/resource/static/main.css @@ -9,6 +9,11 @@ td { word-break: break-all; } +.ui.container{ + width: 95vw !important; + max-width: 1680px !important; +} + .nb-container { padding-top: 75px; min-height: 100vh; diff --git a/resource/static/theme-default/css/main.css b/resource/static/theme-default/css/main.css index a4e83f1..96fa809 100644 --- a/resource/static/theme-default/css/main.css +++ b/resource/static/theme-default/css/main.css @@ -1,14 +1,5 @@ /* 屏幕适配 */ -@media only screen and (min-width:1200px) { - .ui.container { - width: 95% !important; - font-size: 90% !important; - max-width: 1300px !important; - } -} - @media only screen and (max-width:767px) { - .ui.card>.content>.header:not(.ui), .ui.cards>.card>.content>.header:not(.ui) { margin-top: 0.4em !important; @@ -41,16 +32,6 @@ i.fi { margin: 0px 6px 0px 2px; } -body { - content: " " !important; - background: fixed !important; - z-index: -1 !important; - top: 0 !important; - right: 0 !important; - bottom: 0 !important; - left: 0 !important; -} - td { word-wrap: break-word; word-break: break-all; @@ -63,6 +44,11 @@ td { margin-bottom: -47px; } +.ui.container { + width: 95%; + max-width: 1680px !important; +} + #app .ui.fluid.accordion { margin-bottom: 1rem; } diff --git a/resource/static/theme-server-status/css/main.css b/resource/static/theme-server-status/css/main.css index 5d53a2e..c8de5b6 100755 --- a/resource/static/theme-server-status/css/main.css +++ b/resource/static/theme-server-status/css/main.css @@ -9,6 +9,10 @@ body { margin: 0 auto; } +.container-fluid::-webkit-scrollbar { + display: none; +} + .nezha { min-height: calc(100vh - 100px); } @@ -470,14 +474,13 @@ footer p{ background-image: url(/static/theme-server-status/img/rb.png); } - @media only screen and (max-width: 767px) { body { font-size: 10px !important; padding-top:60px !important; } .nezha { - min-height: calc(100vh - 80px); + min-height: calc(74.5vh); } .content { padding: 0; diff --git a/resource/template/theme-default/footer.html b/resource/template/theme-default/footer.html index 0706453..6ebe08c 100644 --- a/resource/template/theme-default/footer.html +++ b/resource/template/theme-default/footer.html @@ -16,8 +16,6 @@ showSwitchTemplate({{ .Themes }}, {{ .Conf.Site.Theme }}) {{ end }} - {{end}} diff --git a/resource/template/theme-default/header.html b/resource/template/theme-default/header.html index 09efa25..257baaf 100644 --- a/resource/template/theme-default/header.html +++ b/resource/template/theme-default/header.html @@ -14,8 +14,8 @@ - - + + @@ -23,7 +23,7 @@ diff --git a/resource/template/theme-default/home.html b/resource/template/theme-default/home.html index 9289c40..21972a6 100644 --- a/resource/template/theme-default/home.html +++ b/resource/template/theme-default/home.html @@ -240,12 +240,12 @@ const itemHeight = isMobile ? 10 : 10; const gridLeft = 25; const gridRight = 12; - const fontColor = "rgba(0, 0, 0, 0.68)"; const backgroundColor = ''; const borderColor = "#ffffff"; const chartData = this.chartDataList[id - 1]; const chartContainer = this.$refs[`chart${id}`][0]; - const chart = echarts.init(chartContainer, null, { + const chartTheme = $('html').attr('nz-theme') == "dark" ? "dark" : ""; + const chart = echarts.init(chartContainer, chartTheme, { renderer: 'canvas', useDirtyRect: false, width: 'auto', @@ -283,7 +283,6 @@ trigger: 'axis', textStyle: { fontSize: fontSize, - color: fontColor } }, legend: { @@ -292,7 +291,6 @@ show: true, textStyle: { fontSize: fontSize, - color: fontColor }, lineStyle: { cap: 'butt' @@ -332,7 +330,6 @@ series: seriesData, textStyle: { fontSize: fontSize, - color: fontColor }, grid: { top: '30', diff --git a/resource/template/theme-default/network.html b/resource/template/theme-default/network.html index c57abc3..c5a97e2 100644 --- a/resource/template/theme-default/network.html +++ b/resource/template/theme-default/network.html @@ -18,7 +18,7 @@
-
+
@@ -65,10 +65,10 @@ } }, grid: { - left: '8%', - right: '8%', + left: this.isMobile ? '8%' : '3.8%', + right: this.isMobile ? '8%' : '3.8%', }, - backgroundColor: 'rgba(255, 255, 255, 0.8)', + backgroundColor: '', toolbox: { feature: { dataZoom: { @@ -243,7 +243,8 @@ return str.includes('Windows') }, renderChart() { - this.myChart = echarts.init(this.$refs.chartDom); + const chartTheme = $('html').attr('nz-theme') == "dark" ? "dark" : ""; + this.myChart = echarts.init(this.$refs.chartDom,chartTheme); this.myChart.setOption(this.option); }, resizeHandle () { diff --git a/resource/template/theme-server-status/footer.html b/resource/template/theme-server-status/footer.html index 2c2070c..a11658d 100644 --- a/resource/template/theme-server-status/footer.html +++ b/resource/template/theme-server-status/footer.html @@ -1,36 +1,36 @@ {{define "theme-server-status/footer"}} - - - - + + + + {{if ts .CustomCode}}{{.CustomCode|safe}}{{end}} diff --git a/resource/template/theme-server-status/header.html b/resource/template/theme-server-status/header.html index 19b04c5..956c240 100644 --- a/resource/template/theme-server-status/header.html +++ b/resource/template/theme-server-status/header.html @@ -16,7 +16,7 @@ - + diff --git a/resource/template/theme-server-status/home.html b/resource/template/theme-server-status/home.html index abb5226..a6bf0b8 100644 --- a/resource/template/theme-server-status/home.html +++ b/resource/template/theme-server-status/home.html @@ -551,6 +551,10 @@ symbol: 'none', data: data, connectNulls: true, + legendHoverLink: false, + emphasis: { + disabled: true + }, lineStyle: { width: lineStyleWidth } @@ -560,7 +564,7 @@ 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) / (this.isMobile ? maxLegendsPerRowMobile : maxLegendsPerRowPc)) * (this.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 = this.isMobile ? 'rect' : ""; diff --git a/resource/template/theme-server-status/network.html b/resource/template/theme-server-status/network.html index 1a162d7..36ca49b 100644 --- a/resource/template/theme-server-status/network.html +++ b/resource/template/theme-server-status/network.html @@ -12,7 +12,7 @@
  • @#server.Name#@ -
    • +
    @#chartTitle#@
    @@ -44,7 +44,6 @@ }, methods: { showCharts(id) { - const chartContainer = document.getElementById('chartbox'); // 发起数据请求 const url = `/api/v1/monitor/${id}`; fetch(url) @@ -64,17 +63,13 @@ }); }, renderCharts(id, reload = false) { - if (!this.chartDataList[id]) return; - this.disposeCharts(); + if(!this.chartDataList[id]) return; + if(this.chart) this.disposeCharts(this.chart); this.currentServerId = id; this.chartCountryCode = this.getServerCountryCode(id); + this.chartTitle = this.chartDataList[id][0].server_name; const chartData = this.chartDataList[id]; const chartContainer = document.getElementById('chartbox'); - this.chartTitle = chartData[0].server_name; - if (reload) { - const existingChart = echarts.getInstanceByDom(chartContainer); - if (existingChart) existingChart.dispose(); - } // 定义图表参数值 const MaxTCPPingValue = {{.Conf.MaxTCPPingValue}} ? {{.Conf.MaxTCPPingValue}} : 300; const autoheight = this.isMobile ? (window.innerHeight - 200) : (window.innerHeight - 250); @@ -111,34 +106,35 @@ let data = { main: [], markLine: []}; item.avg_delay.forEach((avgDelay, index) => { const threshold = 0.9 * MaxTCPPingValue; // 定义阀值,用于判断是否丢包 - const filterAvgDelay = item.avg_delay.filter(value => value !== 0 && value !== MaxTCPPingValue); - const max = Math.max(...filterAvgDelay).toFixed(1); - const autoAvgDelay = 1.05 * max > 0.91 * MaxTCPPingValue ? 1.05 * max : 0.91 * MaxTCPPingValue; // 定义丢包 1. avgDelay==0 2. avgDelay>=MaxTCPPingValue 3. avgDelay>=threshold if(avgDelay == 0 || avgDelay >= MaxTCPPingValue){ //绝对丢包 loss += 1; const lossrate = 100 * loss / (index + 1); - data['main'].push( - [item.created_at[index], autoAvgDelay, lossrate] - ); - data['markLine'].push({ - xAxis: item.created_at[index], - label: { show: false }, - emphasis: { disabled: true }, - lineStyle: { type: "solid" } - }); + if(lossrate != 100) { + data['main'].push( + [item.created_at[index], MaxTCPPingValue, lossrate] + ); + data['markLine'].push({ + xAxis: item.created_at[index], + label: { show: false }, + emphasis: { disabled: true }, + lineStyle: { type: "solid" } + }); + } } else if (avgDelay >= threshold && avgDelay < MaxTCPPingValue){ // 相对丢包 loss += 1; const lossrate = 100 * loss / (index + 1); - data['main'].push( - [item.created_at[index], avgDelay, lossrate] - ); - data['markLine'].push({ - xAxis: item.created_at[index], - label: { show: false }, - emphasis: { disabled: true }, - lineStyle: { type: "solid" } - }); + if(lossrate != 100) { + data['main'].push( + [item.created_at[index], avgDelay, lossrate] + ); + data['markLine'].push({ + xAxis: item.created_at[index], + label: { show: false }, + emphasis: { disabled: true }, + lineStyle: { type: "solid" } + }); + } } else { // 未丢包 const lossrate = 100 * loss / (index + 1); data['main'].push( @@ -158,6 +154,10 @@ smooth: true, symbol: 'none', connectNulls: true, + legendHoverLink: false, + emphasis: { + disabled: true + }, lineStyle: { width: lineStyleWidth }, @@ -216,7 +216,7 @@ }); 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) / (this.isMobile ? maxLegendsPerRowMobile : maxLegendsPerRowPc)) * (this.isMobile ? 20 : 28) + const autoIncrement = Math.floor((legendData.length - 1) / (this.isMobile ? maxLegendsPerRowMobile : maxLegendsPerRowPc)) * (this.isMobile ? 20 : 28); const height = autoheight + autoIncrement; const gridTop = 40 + autoIncrement; const legendIcon = this.isMobile ? 'rect' : ""; @@ -333,11 +333,9 @@ } }); }, - disposeCharts(){ - if(this.chart) { - this.chart.dispose(); - this.chart = null; - } + disposeCharts(chart){ + chart.dispose(); + chart = null; }, getServerCountryCode(id){ const result = this.servers.find(item => item.ID == id);