tcjlj/nezha
1
0
Fork 0
mirror of https://github.com/nezhahq/nezha.git synced 2025-02-02 01:28:13 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

💄 dashboard v0.3.5(daynight): reformat and set brand

Browse Source
This commit is contained in:
naiba 2021-01-21 09:39:03 +08:00
parent 92e8080d7e
commit 1a762858d2
6 changed files with 175 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -1,6 +1,6 @@
# 哪吒面板 # 哪吒面板
![dashboard](https://img.shields.io/badge/管理面板-v0.3.4-brightgreen?style=for-the-badge&logo=github) ![Agent release](https://img.shields.io/github/v/release/naiba/nezha?color=brightgreen&label=Agent&style=for-the-badge&logo=github) ![dashboard](https://img.shields.io/badge/管理面板-v0.3.5-brightgreen?style=for-the-badge&logo=github) ![Agent release](https://img.shields.io/github/v/release/naiba/nezha?color=brightgreen&label=Agent&style=for-the-badge&logo=github)
系统状态监控报警、API(SSL证书变更、即将到期、到期)/TCP端口存活/PING 监控、计划任务(可以定时在Agent上执行命令，备份、重启、What ever you want)、极省资源，64M 服务器也能装 agent。 系统状态监控报警、API(SSL证书变更、即将到期、到期)/TCP端口存活/PING 监控、计划任务(可以定时在Agent上执行命令，备份、重启、What ever you want)、极省资源，64M 服务器也能装 agent。

BIN
resource/static/theme-daynight/favicon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.1 KiB

BIN
resource/static/theme-daynight/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 14 KiB

235
resource/template/theme-daynight/home.html
View File

@ -7,7 +7,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>{{.Title}}</title> <title>{{.Title}}</title>
<link rel="shortcut icon" type="image/png" href="/static/theme-daynight/favicon.png" /> <link rel="shortcut icon" type="image/png" href="/static/logo.png" />
<link rel="stylesheet" href="/static/theme-daynight/main.css"> <link rel="stylesheet" href="/static/theme-daynight/main.css">
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"> <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet">
@ -18,64 +18,170 @@
{{end}} {{end}}
</head> </head>
<body data-theme="light" data-gridlist="grid"> <body data-theme="light" data-gridlist="grid">
<header class="nav-bar clearfix"><figure class="logo"><a href="/">{{.Title}}</a></figure><div class="icon-container"><div class="row cf"><div class="three col"><div class="hamburger" id="hamburger-icon"><span class="line"></span><span class="line"></span><span class="line"></span></div></div></div></div><nav class="nav-menu"><ul><li><a href="/">首页</a></li><li><a href="/service">服务状态</a></li><li><a href="/server">服务器</a></li><li><a href="/monitor">监控</a></li><li><a href="/notification">通知</a></li><li><a href="/setting">设置</a></li>{{if .Admin}} <li><a href="#" style="padding:.8em;text-align:center;" title="您已登录">{{.Admin.Name}}</a></li>{{else}} <li><a href="/login">登录</a></li>{{end}} </ul></nav></header> <header class="nav-bar clearfix">
<script>$(document).ready(function(){ $(".hamburger").click(function(){ $(this).toggleClass("is-active"); $('.nav-menu').toggleClass('active'); $('.nav-bar').toggleClass('active');});}); </script> <figure class="logo"><a href="/">{{.Title}}</a></figure>
<section class="toggle-container"><div class="toggle-dark-mode"><h4><i class="fas fa-sun fa-lg" title="白昼模式"></i>　/　<i class="fas fa-moon fa-lg" title="暗黑模式"></i></h4><input type="checkbox" name="theme" id="switch"><label for="switch">Toggle</label></div><div class="toggle-grid-mode"><h4><i class="fas fa-th fa-lg" title="网格视图"></i>　/　<i class="fas fa-list-ul fa-lg" title="列表视图"></i></h4><input type="checkbox" name="grid" id="grid-list"><label for="grid-list">Toggle</label></div></section> <div class="icon-container">
<div id="app"><div class="server-info-container" v-for='server in servers' :id="server.ID"><div class="info-body"><ul class="server-info-body-container"><li><div :class="'state-'+ (server.live?'online':'offline')"><p>@#server.live?'Running':'Down'#@</p></div></li><li><h3>@#server.Name#@</h3></li><li><img :src="'/static/theme-daynight/img/flag/'+(server.Host&&server.Host.CountryCode?server.Host.CountryCode.toUpperCase():'CN')+'.png'" :title="server.Host.CountryCode.toUpperCase()" /></li><li>@#server.Host.Platform#@</li><li>@#server.Host.CountryCode.toUpperCase()#@</li><li>@#formatByteSize(server.State.MemUsed)#@ / @#formatByteSize(server.Host.MemTotal)#@</li><li>@#server.State?secondToDate(server.State.Uptime):'-'#@</li><li>@#formatByteSize(server.State.SwapUsed)#@ / @#formatByteSize(server.Host.SwapTotal)#@</li><li>@#formatByteSize(server.State.DiskUsed)#@ / @#formatByteSize(server.Host.DiskTotal)#@</li><li>@#formatByteSize(server.State.NetInSpeed)#@/s</li><li>@#formatByteSize(server.State.NetOutSpeed)#@/s</li><li><div class="cpu-bar"><div><h4>CPU</h4></div><div v-if="server.State" :class="formatPercent(server.live,server.State.CPU, 100).class" :title="formatPercent(server.live,server.State.CPU,100).percent+'%'"><div class="bar td-padding" :style="formatPercent(server.live,server.State.CPU, 100).style"><p>@#formatPercent(server.live,server.State.CPU,100).percent#@%</p></div></div></div></li><li><div class="ram-bar"><div><h4>RAM</h4></div><div v-if="server.State" :class="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).class" :title="parseInt(server.State?server.State.MemUsed/server.Host.MemTotal*100:0)+'%'"><div class="bar td-padding" :style="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).style"><p>@#parseInt(server.State?server.State.MemUsed/server.Host.MemTotal*100:0)#@%</p></div></div></div></li><li><div class="disk-bar"><div><h4>硬盘</h4></div><div v-if="server.State" :class="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).class" :title="parseInt(server.State?server.State.DiskUsed/server.Host.DiskTotal*100:0)+'%'"><div class="bar td-padding" :style="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).style"><p>@#parseInt(server.State?server.State.DiskUsed/server.Host.DiskTotal*100:0)#@%</p></div></div></div></li></ul></div></div></div> <div class="row cf">
<div class="three col">
<div class="hamburger" id="hamburger-icon"><span class="line"></span><span class="line"></span><span
class="line"></span></div>
</div>
</div>
</div>
<nav class="nav-menu">
<ul>
<li><a href="/">首页</a></li>
<li><a href="/service">服务状态</a></li>
<li><a href="/server">服务器</a></li>
<li><a href="/monitor">监控</a></li>
<li><a href="/notification">通知</a></li>
<li><a href="/setting">设置</a></li>{{if .Admin}} <li><a href="#" style="padding:.8em;text-align:center;"
title="您已登录">{{.Admin.Name}}</a></li>{{else}} <li><a href="/login">登录</a></li>{{end}}
</ul>
</nav>
</header>
<script>$(document).ready(function () { $(".hamburger").click(function () { $(this).toggleClass("is-active"); $('.nav-menu').toggleClass('active'); $('.nav-bar').toggleClass('active'); }); }); </script>
<section class="toggle-container">
<div class="toggle-dark-mode">
<h4><i class="fas fa-sun fa-lg" title="白昼模式"></i>　/　<i class="fas fa-moon fa-lg" title="暗黑模式"></i></h4>
<input type="checkbox" name="theme" id="switch"><label for="switch">Toggle</label>
</div>
<div class="toggle-grid-mode">
<h4><i class="fas fa-th fa-lg" title="网格视图"></i>　/　<i class="fas fa-list-ul fa-lg" title="列表视图"></i></h4>
<input type="checkbox" name="grid" id="grid-list"><label for="grid-list">Toggle</label>
</div>
</section>
<div id="app">
<div class="server-info-container" v-for='server in servers' :id="server.ID">
<div class="info-body">
<ul class="server-info-body-container">
<li>
<div :class="'state-'+ (server.live?'online':'offline')">
<p>@#server.live?'Running':'Down'#@</p>
</div>
</li>
<li>
<h3>@#server.Name#@</h3>
</li>
<li><img :src="'/static/theme-daynight/img/flag/'+(server.Host&&server.Host.CountryCode?server.Host.CountryCode.toUpperCase():'CN')+'.png'"
:title="server.Host.CountryCode.toUpperCase()" /></li>
<li>@#server.Host.Platform#@</li>
<li>@#server.Host.CountryCode.toUpperCase()#@</li>
<li>@#formatByteSize(server.State.MemUsed)#@ / @#formatByteSize(server.Host.MemTotal)#@</li>
<li>@#server.State?secondToDate(server.State.Uptime):'-'#@</li>
<li>@#formatByteSize(server.State.SwapUsed)#@ / @#formatByteSize(server.Host.SwapTotal)#@</li>
<li>@#formatByteSize(server.State.DiskUsed)#@ / @#formatByteSize(server.Host.DiskTotal)#@</li>
<li>@#formatByteSize(server.State.NetInSpeed)#@/s</li>
<li>@#formatByteSize(server.State.NetOutSpeed)#@/s</li>
<li>
<div class="cpu-bar">
<div>
<h4>CPU</h4>
</div>
<div v-if="server.State" :class="formatPercent(server.live,server.State.CPU, 100).class"
:title="formatPercent(server.live,server.State.CPU,100).percent+'%'">
<div class="bar td-padding"
:style="formatPercent(server.live,server.State.CPU, 100).style">
<p>@#formatPercent(server.live,server.State.CPU,100).percent#@%</p>
</div>
</div>
</div>
</li>
<li>
<div class="ram-bar">
<div>
<h4>RAM</h4>
</div>
<div v-if="server.State"
:class="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).class"
:title="parseInt(server.State?server.State.MemUsed/server.Host.MemTotal*100:0)+'%'">
<div class="bar td-padding"
:style="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).style">
<p>@#parseInt(server.State?server.State.MemUsed/server.Host.MemTotal*100:0)#@%</p>
</div>
</div>
</div>
</li>
<li>
<div class="disk-bar">
<div>
<h4>硬盘</h4>
</div>
<div v-if="server.State"
:class="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).class"
:title="parseInt(server.State?server.State.DiskUsed/server.Host.DiskTotal*100:0)+'%'">
<div class="bar td-padding"
:style="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).style">
<p>@#parseInt(server.State?server.State.DiskUsed/server.Host.DiskTotal*100:0)#@%</p>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- Dark mode toggle -->
<!-- Dark mode toggle -->
<script> <script>
var checkbox = document.querySelector('input[name=theme]'); var checkbox = document.querySelector('input[name=theme]');
checkbox.addEventListener('change', function() { checkbox.addEventListener('change', function () {
if(this.checked) { if (this.checked) {
trans() trans()
document.getElementsByTagName("BODY")[0].setAttribute('data-theme', 'dark') document.getElementsByTagName("BODY")[0].setAttribute('data-theme', 'dark')
} else { } else {
trans() trans()
document.getElementsByTagName("BODY")[0].setAttribute('data-theme', 'light') document.getElementsByTagName("BODY")[0].setAttribute('data-theme', 'light')
} }
}) })
let trans = () => { let trans = () => {
document.getElementsByTagName("BODY")[0].classList.add('transition-theme'); document.getElementsByTagName("BODY")[0].classList.add('transition-theme');
window.setTimeout(() => { window.setTimeout(() => {
document.getElementsByTagName("BODY")[0].classList.remove('transition-theme') document.getElementsByTagName("BODY")[0].classList.remove('transition-theme')
}, 1000) }, 1000)
} }
</script> </script>
<!-- Grid list mode toggle --> <!-- Grid list mode toggle -->
<script> <script>
var checkboxs = document.querySelector('input[name=grid]'); var checkboxs = document.querySelector('input[name=grid]');
checkboxs.addEventListener('change', function() { checkboxs.addEventListener('change', function () {
if(this.checked) { if (this.checked) {
transs() transs()
document.getElementsByTagName("BODY")[0].setAttribute('data-gridlist', 'list') document.getElementsByTagName("BODY")[0].setAttribute('data-gridlist', 'list')
} else { } else {
transs() transs()
document.getElementsByTagName("BODY")[0].setAttribute('data-gridlist', 'grid') document.getElementsByTagName("BODY")[0].setAttribute('data-gridlist', 'grid')
} }
}) })
let transs = () => { let transs = () => {
document.getElementsByTagName("BODY")[0].classList.add('transition-theme'); document.getElementsByTagName("BODY")[0].classList.add('transition-theme');
window.setTimeout(() => { window.setTimeout(() => {
document.getElementsByTagName("BODY")[0].classList.remove('transition-theme') document.getElementsByTagName("BODY")[0].classList.remove('transition-theme')
}, 1000) }, 1000)
} }
</script> </script>
<!-- Back to top button --> <!-- Back to top button -->
<a id="back-to-top"></a> <a id="back-to-top"></a>
<script>var btn=$('#back-to-top'); $(window).scroll(function(){ if ($(window).scrollTop() >300){ btn.addClass('show');} else{ btn.removeClass('show');}});btn.on('click', function(e){ e.preventDefault(); $('html, body').animate({scrollTop:0}, '300')});</script> <script>var btn = $('#back-to-top'); $(window).scroll(function () { if ($(window).scrollTop() > 300) { btn.addClass('show'); } else { btn.removeClass('show'); } }); btn.on('click', function (e) { e.preventDefault(); $('html, body').animate({ scrollTop: 0 }, '300') });</script>
<footer><div class="footer-container"><div><a href="https://github.com/naiba/nezha" target="_blank">Powered by 哪吒面板 · {{.Version}}</a><p>&copy; <span id="copyright-date"><script>document.getElementById('copyright-date').appendChild(document.createTextNode(new Date().getFullYear()))</script></span> · <a href="https://blog.jackiesung.com" target="_blank">Theme designed by Jackie Sung</a></p></div></div></footer> <footer>
<div class="footer-container">
<div><a href="https://github.com/naiba/nezha" target="_blank">Powered by 哪吒面板 · {{.Version}}</a>
<p>&copy; <span id="copyright-date">
<script>document.getElementById('copyright-date').appendChild(document.createTextNode(new Date().getFullYear()))</script>
</span> · <a href="https://blog.jackiesung.com" target="_blank">Theme designed by Jackie Sung</a>
</p>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
<script> <script>
const initData = {{.Servers }}; const initData = {{.Servers }};
var statusCards = new Vue({ var statusCards = new Vue({
@ -161,15 +267,15 @@
}) })
const wsProtocol = window.location.protocol == "https:" ? "wss" : "ws" const wsProtocol = window.location.protocol == "https:" ? "wss" : "ws"
const ws = new WebSocket(wsProtocol + '://' + window.location.host + '/ws'); const ws = new WebSocket(wsProtocol + '://' + window.location.host + '/ws');
ws.onopen = function (evt) { ws.onopen = function (evt) {
Swal.fire({ Swal.fire({
position: 'top', position: 'top',
icon: 'success', icon: 'success',
title: '实时通道建立', title: '实时通道建立',
showConfirmButton: false, showConfirmButton: false,
timer: 1500 timer: 1500
}); });
} }
ws.onmessage = function (evt) { ws.onmessage = function (evt) {
statusCards.servers = JSON.parse(evt.data) statusCards.servers = JSON.parse(evt.data)
const keys = Object.keys(statusCards.servers) const keys = Object.keys(statusCards.servers)
@ -187,16 +293,17 @@
} }
} }
ws.onclose = function () { ws.onclose = function () {
Swal.fire({ Swal.fire({
position: 'top', position: 'top',
icon: 'error', icon: 'error',
title: '实时通道断开', title: '实时通道断开',
showConfirmButton: false, showConfirmButton: false,
timer: 1500 timer: 1500
}); });
} }
</script> </script>
</body> </body>
</html> </html>
{{end}} {{end}}

3
resource/template/theme-daynight/service.html
View File

@ -30,7 +30,8 @@
</div> {{end}} </div> {{end}}
</td> </td>
<td class="ui center aligned delay-today"> <td class="ui center aligned delay-today">
<i class="delay-today {{className (divU64 $service.CurrentUp (addU64 $service.CurrentUp $service.CurrentDown))}}"></i> <i
class="delay-today {{className (divU64 $service.CurrentUp (addU64 $service.CurrentUp $service.CurrentDown))}}"></i>
{{statusName (divU64 $service.CurrentUp (addU64 $service.CurrentUp $service.CurrentDown))}} {{statusName (divU64 $service.CurrentUp (addU64 $service.CurrentUp $service.CurrentDown))}}
</td> </td>
</tr> {{end}} </tr> {{end}}

2
service/dao/dao.go
View File

@ -34,7 +34,7 @@ var CronLock sync.RWMutex
var Crons map[uint64]*model.Cron var Crons map[uint64]*model.Cron
var Cron *cron.Cron var Cron *cron.Cron
var Version = "v0.3.4" var Version = "v0.3.5"
func ReSortServer() { func ReSortServer() {
ServerLock.RLock() ServerLock.RLock()