mirror of
https://github.com/Buriburizaem0n/nezha_domains.git
synced 2026-03-22 19:11:51 +00:00
improve & fix : 主题优化及bug修复 (#409)
* 主题优化及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
This commit is contained in:
nap0o
GitHub
@@ -1,36 +1,36 @@
|
||||
{{define "theme-server-status/footer"}}
|
||||
</div>
|
||||
<footer class="container-fluid">
|
||||
<p>{{ .Conf.Site.Brand }} | Theme ServerStatus | Powered by <a target="_blank" href="https://github.com/naiba/nezha">{{tr "NezhaMonitoring"}}</a> {{.Version}}</p>
|
||||
</footer>
|
||||
<aside class="toolbox">
|
||||
<template v-if="showTools">
|
||||
<span v-if="page=='index' && countryMapChartData.length!=0" class="showMapChart">
|
||||
<i @click="showMapChart" data-toggle="modal" data-target="#mapChartBox" class="bi bi-geo-alt"></i>
|
||||
</span>
|
||||
<span class="toggleView">
|
||||
<i v-if="showGroup" @click="toggleShowGroup" class="show-nogroup bi bi-justify"></i>
|
||||
<i v-else @click="toggleShowGroup" class="show-group bi bi-view-stacked"></i>
|
||||
</span>
|
||||
<span class="toggleSemiTransparent" @click="toggleSemiTransparent">
|
||||
<i class="bi" :class="semiTransparent ? 'bi-droplet' : 'bi-droplet-half'"></i>
|
||||
</span>
|
||||
</template>
|
||||
<span v-if="!showTools">
|
||||
<i @click="toggleShowTools" class="bi bi-three-dots"></i>
|
||||
</span>
|
||||
<span class="setTheme">
|
||||
<i v-if="theme === 'light'" @click="setTheme('dark')" class="setTheme-dark bi bi-moon-fill"></i>
|
||||
<i v-else @click="setTheme('light')" class="setTheme-light bi bi-brightness-high-fill"></i>
|
||||
</span>
|
||||
<span v-if="showGoTop" class="showGoTop">
|
||||
<i @click="goTop" class="goTop bi bi-arrow-up"></i>
|
||||
</span>
|
||||
</aside>
|
||||
<template v-if="semiTransparent">
|
||||
<link rel="stylesheet" href="/static/theme-server-status/css/light.plus.css?v20240807">
|
||||
<link rel="stylesheet" href="/static/theme-server-status/css/dark.plus.css?v20240807">
|
||||
</template>
|
||||
</div>
|
||||
<footer class="container-fluid">
|
||||
<p>{{ .Conf.Site.Brand }} | Theme ServerStatus | Powered by <a target="_blank" href="https://github.com/naiba/nezha">{{tr "NezhaMonitoring"}}</a> {{.Version}}</p>
|
||||
</footer>
|
||||
<aside class="toolbox">
|
||||
<template v-if="showTools">
|
||||
<span v-if="page=='index' && countryMapChartData.length!=0" class="showMapChart">
|
||||
<i @click="showMapChart" data-toggle="modal" data-target="#mapChartBox" class="bi bi-geo-alt"></i>
|
||||
</span>
|
||||
<span class="toggleView">
|
||||
<i v-if="showGroup" @click="toggleShowGroup" class="show-nogroup bi bi-justify"></i>
|
||||
<i v-else @click="toggleShowGroup" class="show-group bi bi-view-stacked"></i>
|
||||
</span>
|
||||
<span class="toggleSemiTransparent" @click="toggleSemiTransparent">
|
||||
<i class="bi" :class="semiTransparent ? 'bi-droplet' : 'bi-droplet-half'"></i>
|
||||
</span>
|
||||
</template>
|
||||
<span v-if="!showTools">
|
||||
<i @click="toggleShowTools" class="bi bi-three-dots"></i>
|
||||
</span>
|
||||
<span class="setTheme">
|
||||
<i v-if="theme === 'light'" @click="setTheme('dark')" class="setTheme-dark bi bi-moon-fill"></i>
|
||||
<i v-else @click="setTheme('light')" class="setTheme-light bi bi-brightness-high-fill"></i>
|
||||
</span>
|
||||
<span v-if="showGoTop" class="showGoTop">
|
||||
<i @click="goTop" class="goTop bi bi-arrow-up"></i>
|
||||
</span>
|
||||
</aside>
|
||||
<template v-if="semiTransparent">
|
||||
<link rel="stylesheet" href="/static/theme-server-status/css/light.plus.css?v20240807">
|
||||
<link rel="stylesheet" href="/static/theme-server-status/css/dark.plus.css?v20240807">
|
||||
</template>
|
||||
</div>
|
||||
{{if ts .CustomCode}}{{.CustomCode|safe}}{{end}}
|
||||
</body>
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
<script src="https://unpkg.com/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
|
||||
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
|
||||
<script src="https://unpkg.com/echarts@5.5.0/dist/echarts.min.js"></script>
|
||||
<link rel="stylesheet" href="/static/theme-server-status/css/main.css?v202408011">
|
||||
<link rel="stylesheet" href="/static/theme-server-status/css/main.css?v202408016">
|
||||
<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>
|
||||
|
||||
@@ -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' : "";
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
</li>
|
||||
<li class="dropdown-item" v-for="server in servers" @click="showCharts(server.ID)">
|
||||
<a><i :class="'fi fi-' + (server.Host.CountryCode || 'rb')"></i> @#server.Name#@ <i v-if="server.ID == currentServerId" class="check icon"></i></a>
|
||||
</li>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="chartTitle"><i class="chartCountryCode" :class="'fi fi-' + chartCountryCode"></i> @#chartTitle#@</div>
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user