server-status和default主题：feat & improve & fix (#420)
* feat & improve & fix 1. 增加WebAppManifest文件,实现把哪吒监控网页伪装成app放在移动端桌面 2. vps地图分布图增加数据异步加载loading效果 3. 修复echart图表纵坐标轴因数值过大显示不全bug * 刷新CDN缓存 * fix footer * 4.提升service页echarts图表相关体验 5.用设置基准1vh的方法解决footer页脚位置在移动端各种浏览器显示不一致的问题 6.修复section标签的使用位置 * 刷新CDN缓存
This commit is contained in:
nap0o
GitHub
parent
511f43784e
commit
b701efd9b5
BIN
resource/static/manifest-192x192.png
Normal file
BIN
resource/static/manifest-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
resource/static/manifest-512x512.png
Normal file
BIN
resource/static/manifest-512x512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
36
resource/static/manifest-en-US.json
Normal file
36
resource/static/manifest-en-US.json
Normal file
@ -0,0 +1,36 @@
|
||||
{
|
||||
"name": "Nezha",
|
||||
"short_name": "Nezha",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/static/manifest-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png",
|
||||
"purpose": "any"
|
||||
},
|
||||
{
|
||||
"src": "/static/manifest-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png",
|
||||
"purpose": "maskable"
|
||||
},
|
||||
{
|
||||
"src": "//static/manifest-512x512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png",
|
||||
"purpose": "any"
|
||||
},
|
||||
{
|
||||
"src": "//static/manifest-512x512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png",
|
||||
"purpose": "maskable"
|
||||
}
|
||||
],
|
||||
"start_url": "/",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#000000",
|
||||
"lang": "eu-US",
|
||||
"dir": "auto"
|
||||
}
|
||||
36
resource/static/manifest-zh-CN.json
Normal file
36
resource/static/manifest-zh-CN.json
Normal file
@ -0,0 +1,36 @@
|
||||
{
|
||||
"name": "哪吒监控",
|
||||
"short_name": "哪吒监控",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/static/manifest-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png",
|
||||
"purpose": "any"
|
||||
},
|
||||
{
|
||||
"src": "/static/manifest-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png",
|
||||
"purpose": "maskable"
|
||||
},
|
||||
{
|
||||
"src": "/static/manifest-512x512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png",
|
||||
"purpose": "any"
|
||||
},
|
||||
{
|
||||
"src": "/static/manifest-512x512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png",
|
||||
"purpose": "maskable"
|
||||
}
|
||||
],
|
||||
"start_url": "/",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#000000",
|
||||
"lang": "zh-CN",
|
||||
"dir": "auto"
|
||||
}
|
||||
@ -480,7 +480,8 @@ footer p{
|
||||
padding-top:60px !important;
|
||||
}
|
||||
.nezha {
|
||||
min-height: calc(74.5vh);
|
||||
min-height: calc(100vh - 90px);
|
||||
min-height: calc(var(--vh, 1vh) * 100 - 90px);
|
||||
}
|
||||
.content {
|
||||
padding: 0;
|
||||
|
||||
@ -26,7 +26,9 @@ const mixinsVue = {
|
||||
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;
|
||||
this.setBenchmarkHeight();
|
||||
window.addEventListener('scroll', this.handleScroll);
|
||||
window.addEventListener('resize', this.setBenchmarkHeight());
|
||||
},
|
||||
destroyed() {
|
||||
window.removeEventListener('scroll', this.handleScroll);
|
||||
@ -152,6 +154,10 @@ const mixinsVue = {
|
||||
},
|
||||
checkIsMobile() { // 检测设备类型,页面宽度小于768px认为是移动设备
|
||||
return window.innerWidth <= 768;
|
||||
},
|
||||
setBenchmarkHeight() {
|
||||
let vh = window.innerHeight * 0.01;
|
||||
document.documentElement.style.setProperty('--vh', `${vh}px`);
|
||||
}
|
||||
}
|
||||
}
|
||||
15
resource/template/theme-default/header.html
vendored
15
resource/template/theme-default/header.html
vendored
@ -3,12 +3,19 @@
|
||||
<html lang="{{.Conf.Language}}">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta content="telephone=no" name="format-detection">
|
||||
<title>{{.Title}}</title>
|
||||
<link rel="shortcut icon" type="image/png" href="/static/logo.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
{{ if eq .Conf.Language "zh-CN" }}
|
||||
<link rel="manifest" href="/static/manifest-zh-CN.json?v20240905" />
|
||||
{{ else }}
|
||||
<link rel="manifest" href="/static/manifest-en-US.json?v20240905" />
|
||||
{{ end }}
|
||||
<link rel="apple-touch-startup-image" href="/static/logo.svg" />
|
||||
<link rel="shortcut icon" type="image/png" href="/static/logo.svg">
|
||||
<link rel="stylesheet" href="https://unpkg.com/semantic-ui@2.4.0/dist/semantic.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/font-logos@0.17.0/assets/font-logos.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||||
|
||||
1
resource/template/theme-default/network.html
vendored
1
resource/template/theme-default/network.html
vendored
@ -80,6 +80,7 @@
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'slider',
|
||||
start: 0,
|
||||
end: 100
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{{define "theme-server-status/footer"}}
|
||||
</div>
|
||||
</section>
|
||||
<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>
|
||||
|
||||
@ -2,11 +2,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{.Conf.Language}}">
|
||||
<head>
|
||||
<title>{{ .Title }}</title>
|
||||
<title>{{.Title}}</title>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta content="telephone=no" name="format-detection">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="shortcut icon" type="image/png" href="/static/logo.svg" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
{{if eq .Conf.Language "zh-CN"}}
|
||||
<link rel="manifest" href="/static/manifest-zh-CN.json?v20240905" />
|
||||
{{else}}
|
||||
<link rel="manifest" href="/static/manifest-en-US.json?v20240905" />
|
||||
{{end}}
|
||||
<link rel="apple-touch-startup-image" href="/static/logo.svg" />
|
||||
<link rel="shortcut icon" type="image/png" href="/static/logo.svg">
|
||||
<link rel="stylesheet" href="https://unpkg.com/bootstrap@3.4.1/dist/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/font-logos@0.17.0/assets/font-logos.css">
|
||||
@ -16,10 +25,10 @@
|
||||
<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?v202408016">
|
||||
<link rel="stylesheet" href="/static/theme-server-status/css/main.css?v20240907">
|
||||
<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>
|
||||
<script src="/static/theme-server-status/js/mixin.js?v20240907"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
|
||||
29
resource/template/theme-server-status/home.html
vendored
29
resource/template/theme-server-status/home.html
vendored
@ -3,15 +3,15 @@
|
||||
{{template "theme-server-status/menu" .}}
|
||||
<!-- showGroup true -->
|
||||
<template v-if="showGroup">
|
||||
<section class="container-fluid table-responsive content" v-for="group in nodesTag">
|
||||
<div class="container-fluid table-responsive content" v-for="group in nodesTag">
|
||||
{{template "theme-server-status/home-group-true" .}}
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<!-- showGroup false -->
|
||||
<template v-else>
|
||||
<section class="container-fluid table-responsive content">
|
||||
<div class="container-fluid table-responsive content">
|
||||
{{template "theme-server-status/home-group-false" .}}
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<div class="modal fade" id="mapChartBox" tabindex="-1" role="dialog" aria-labelledby="mapChartTitle" aria-hidden="true" style="padding-left:0">
|
||||
<div class="modal-dialog modal-lg modal-dialog-centered">
|
||||
@ -163,6 +163,9 @@
|
||||
const tooltipBorderColor = this.theme == "dark" ? "#ffffff" : "#ffffff";
|
||||
const fontSize = this.isMobile ? 10 : 12;
|
||||
const fontColor = this.theme == "dark" ? "#000000" : "#000000";
|
||||
const showLoadingMaskColor = this.theme == "dark" ? 'rgba(28, 29, 38, 1)' : 'rgba(249, 249, 249, 1)';
|
||||
const showLoadingTextColor = this.theme == "dark" ? 'rgba(241, 241, 241, 1)' : 'rgba(0, 0, 0, 1)';
|
||||
const showLoadingColor = inRangeColor;
|
||||
const chartContainer = document.getElementById('mapChart');
|
||||
const mapChart = echarts.init(chartContainer, '', { // init图表
|
||||
renderer: 'canvas',
|
||||
@ -170,6 +173,13 @@
|
||||
width: width,
|
||||
height: height,
|
||||
});
|
||||
mapChart.showLoading({
|
||||
text: 'loading',
|
||||
textColor: showLoadingTextColor,
|
||||
color: showLoadingColor,
|
||||
maskColor: showLoadingMaskColor,
|
||||
zlevel: 2
|
||||
});
|
||||
fetch(this.staticUrl + '/maps/' + this.countryMapGeoFile)
|
||||
.then(response => response.json())
|
||||
.then(worldMap => {
|
||||
@ -224,7 +234,10 @@
|
||||
}
|
||||
]
|
||||
};
|
||||
mapChart.setOption(option);
|
||||
setTimeout(() => {
|
||||
mapChart.hideLoading();
|
||||
mapChart.setOption(option);
|
||||
}, 1000);
|
||||
});
|
||||
},
|
||||
isWindowsPlatform(str) {
|
||||
@ -510,15 +523,15 @@
|
||||
// 定义图表参数值
|
||||
const MaxTCPPingValue = {{.Conf.MaxTCPPingValue}} ? {{.Conf.MaxTCPPingValue}} : 300;
|
||||
const fontSize = this.isMobile ? 10 : 14;
|
||||
const gridLeft = this.isMobile ? 25 : 36;
|
||||
const gridLeft = (MaxTCPPingValue > 500) ? (this.isMobile ? 30 : 40) : (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 chartTheme = this.theme == "dark" ? "dark" : "default";
|
||||
const fontColor = this.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)");
|
||||
|
||||
@ -64,6 +64,6 @@
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div class="nezha">
|
||||
<section class="nezha">
|
||||
{{end}}
|
||||
|
||||
|
||||
@ -74,23 +74,24 @@
|
||||
const MaxTCPPingValue = {{.Conf.MaxTCPPingValue}} ? {{.Conf.MaxTCPPingValue}} : 300;
|
||||
const autoheight = this.isMobile ? (window.innerHeight - 200) : (window.innerHeight - 250);
|
||||
const fontSize = this.isMobile ? 10 : 14;
|
||||
const gridLeft = this.isMobile ? 30 : 36;
|
||||
const gridLeft = (MaxTCPPingValue > 500) ? (this.isMobile ? 36 : 42) : (this.isMobile ? 30 : 36);
|
||||
const gridRight = this.isMobile ? 12 : 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 fontColor = this.theme == "dark" ? "#f1f1f1" : "#000000";
|
||||
const chartTheme = this.theme == "dark" ? "dark" : "default";
|
||||
const backgroundColor = this.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 = this.isMobile ? 1 : 2;
|
||||
const splitLineWidth = this.isMobile ? 0.5 : 1;
|
||||
const splitLineColor = this.theme == "dark" ? "rgba(110, 112, 121, 0.95)" : "rgba(224, 230, 241, 0.95)";
|
||||
const markPointLabelColor = this.theme == "dark" ? "#111111" : "#000000";
|
||||
const markPointItemStyleOpacity = this.semiTransparent ? 1 : 0.75;
|
||||
const markPointSymbolSize = this.isMobile ? 30 : 42;
|
||||
const markPointItemStyleOpacity = this.semiTransparent ? 1 : 0.9;
|
||||
const markPointFontSize = this.isMobile ? 8 : 10;
|
||||
const markLineItemStyleOpacity = this.semiTransparent ? 1 : 0.75;
|
||||
const markLineLineStyleWidth = this.isMobile ? 0.15 : 0.3;
|
||||
this.chart = echarts.init(chartContainer, '', { // init图表
|
||||
this.chart = echarts.init(chartContainer, chartTheme, { // init图表
|
||||
renderer: 'canvas',
|
||||
useDirtyRect: false,
|
||||
width: 'auto',
|
||||
@ -182,10 +183,9 @@
|
||||
itemStyle: {
|
||||
opacity: markPointItemStyleOpacity
|
||||
},
|
||||
symbolSize: 30,
|
||||
symbolSize: markPointSymbolSize,
|
||||
label: {
|
||||
fontSize: 8,
|
||||
color: markPointLabelColor,
|
||||
fontSize: markPointFontSize,
|
||||
formatter: function (params) {
|
||||
return Math.round(params.value);
|
||||
}
|
||||
@ -198,10 +198,9 @@
|
||||
itemStyle: {
|
||||
opacity: markPointItemStyleOpacity
|
||||
},
|
||||
symbolSize: 30,
|
||||
symbolSize: markPointSymbolSize,
|
||||
label: {
|
||||
fontSize: 8,
|
||||
color: markPointLabelColor,
|
||||
fontSize: markPointFontSize,
|
||||
offset: [0, 8],
|
||||
formatter: function (params) {
|
||||
return Math.round(params.value);
|
||||
@ -218,7 +217,8 @@
|
||||
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 height = autoheight + autoIncrement;
|
||||
const gridTop = 40 + autoIncrement;
|
||||
const gridTop = this.isMobile ? ( 60 + autoIncrement) : (80 + autoIncrement);
|
||||
const gridBottom = this.isMobile ? 70 : 90;
|
||||
const legendIcon = this.isMobile ? 'rect' : "";
|
||||
const itemWidth = this.isMobile ? 10 : 25;
|
||||
const itemHeight = this.isMobile ? 10 : 14;
|
||||
@ -241,7 +241,8 @@
|
||||
grid: {
|
||||
top: gridTop,
|
||||
left: gridLeft,
|
||||
right: gridRight
|
||||
right: gridRight,
|
||||
bottom: gridBottom
|
||||
},
|
||||
// 图表标题设置
|
||||
title: {
|
||||
@ -268,8 +269,7 @@
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
width: splitLineWidth,
|
||||
color: splitLineColor
|
||||
width: splitLineWidth
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -3,24 +3,24 @@
|
||||
{{template "theme-server-status/menu" .}}
|
||||
<!-- showGroup true -->
|
||||
<template v-if="showGroup">
|
||||
<section v-if="servicesTag.length === 0" class="container-fluid content" style="min-height: .01%;overflow-x: auto;">
|
||||
<div v-if="servicesTag.length === 0" class="container-fluid content" style="min-height: .01%;overflow-x: auto;">
|
||||
<p>No Valid Service Monitor Configuration Entries Found. Please Verify in the <a href="/monitor">Admin Panel</a>.</p>
|
||||
</section>
|
||||
<section v-else class="container-fluid content" style="min-height: .01%;overflow-x: auto;" v-for="group in servicesTag">
|
||||
</div>
|
||||
<div v-else class="container-fluid content" style="min-height: .01%;overflow-x: auto;" v-for="group in servicesTag">
|
||||
{{template "theme-server-status/service-group-true" .}}
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<!-- showGroup false -->
|
||||
<template v-else>
|
||||
<section v-if="servicesNoTag.length === 0" class="container-fluid content" style="min-height: .01%;overflow-x: auto;">
|
||||
<div v-if="servicesNoTag.length === 0" class="container-fluid content" style="min-height: .01%;overflow-x: auto;">
|
||||
<p>No Valid Service Monitor Configuration Entries Found. Please Verify in the <a href="/monitor">Admin Panel</a>.</p>
|
||||
</section>
|
||||
<section v-else class="container-fluid content" style="min-height: .01%;overflow-x: auto;">
|
||||
</div>
|
||||
<div v-else class="container-fluid content" style="min-height: .01%;overflow-x: auto;">
|
||||
{{template "theme-server-status/service-group-false" .}}
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
{{if .CycleTransferStats}}
|
||||
<section class="container-fluid content table-responsive">
|
||||
<div class="container-fluid content table-responsive">
|
||||
<table class="table table-striped table-condensed table-hover">
|
||||
<thead>
|
||||
<tr class="node-group-tag">
|
||||
@ -67,7 +67,7 @@
|
||||
{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
</div>
|
||||
{{end}}
|
||||
{{template "theme-server-status/footer" .}}
|
||||
<script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user