mirror of
https://github.com/Buriburizaem0n/nezha_domains.git
synced 2026-02-06 05:30:05 +00:00
✨ add theme hotaru
This commit is contained in:
naiba
@@ -1,7 +1,8 @@
|
||||
{{define "common/footer"}}
|
||||
<div class="ui inverted vertical footer segment">
|
||||
<div class="ui center aligned is-size-7 container">
|
||||
本系统由 <a href="https://github.com/naiba/nezha" style="color: white;" target="_blank">哪吒面板</a> build · {{.Version}} 强力驱动
|
||||
Powered by <a href="https://github.com/naiba/nezha" style="color: white;" target="_blank">哪吒面板</a> build ·
|
||||
{{.Version}}
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://cdnjs.loli.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
<a class="item{{if eq .MatchedPath "/"}} active{{end}}" href="/">首页</a>
|
||||
{{if .Admin}}
|
||||
<a class="item{{if eq .MatchedPath "/server"}} active{{end}}" href="/server">服务器</a>
|
||||
<a class="item{{if eq .MatchedPath "/setting"}} active{{end}}" href="/setting">设置</a>
|
||||
{{end}}
|
||||
<div class="right menu">
|
||||
<a class="item" href="https://github.com/naiba/nezha/issues" target="_blank">反馈</a>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
{{define "page/error"}}
|
||||
{{define "dashboard/error"}}
|
||||
{{template "common/header" .}}
|
||||
<div class="login-form">
|
||||
<div class="ui middle aligned center aligned grid">
|
||||
@@ -1,4 +1,4 @@
|
||||
{{define "page/login"}}
|
||||
{{define "dashboard/login"}}
|
||||
{{template "common/header" .}}
|
||||
<div class="login-form">
|
||||
<div class="ui middle aligned center aligned grid">
|
||||
@@ -1,4 +1,4 @@
|
||||
{{define "page/server"}}
|
||||
{{define "dashboard/server"}}
|
||||
{{template "common/header" .}}
|
||||
{{template "common/menu" .}}
|
||||
<div class="nb-container">
|
||||
40
resource/template/dashboard/setting.html
Normal file
40
resource/template/dashboard/setting.html
Normal file
@@ -0,0 +1,40 @@
|
||||
{{define "dashboard/setting"}}
|
||||
{{template "common/header" .}}
|
||||
{{template "common/menu" .}}
|
||||
<div class="nb-container">
|
||||
<div class="ui container">
|
||||
<form id="settingForm" class="ui large form" onsubmit="return false;">
|
||||
<div class="field">
|
||||
<label>站点标题</label>
|
||||
<input type="text" name="Title" placeholder="哪吒面板" value="{{.Conf.Site.Brand}}">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>管理员列表</label>
|
||||
<input type="text" name="Admin" placeholder="1010,2020" value="{{.Conf.GitHub.Admin}}">
|
||||
</div>
|
||||
<div class="field">
|
||||
<select name="Theme">
|
||||
<option value="default">默认主题</option>
|
||||
<option value="hotaru">CakeMine-Hotaru</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="ui button" type="submit">保存</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{{template "common/footer" .}}
|
||||
<script>
|
||||
$('#settingForm').submit(function () {
|
||||
$.post('/api/setting', $('#settingForm').serialize()).then((resp) => {
|
||||
if (resp.code == 200) {
|
||||
alert("保存成功")
|
||||
} else {
|
||||
alert(resp.message)
|
||||
}
|
||||
}).error(err => {
|
||||
alert(err)
|
||||
})
|
||||
return false;
|
||||
})
|
||||
</script>
|
||||
{{end}}
|
||||
1
resource/template/theme-default/README.md
Normal file
1
resource/template/theme-default/README.md
Normal file
@@ -0,0 +1 @@
|
||||
# 默认主题
|
||||
@@ -1,4 +1,4 @@
|
||||
{{define "page/home"}}
|
||||
{{define "theme-default/home"}}
|
||||
{{template "common/header" .}}
|
||||
{{template "common/menu" .}}
|
||||
<div class="nb-container">
|
||||
271
resource/template/theme-hotaru/home.html
Normal file
271
resource/template/theme-hotaru/home.html
Normal file
@@ -0,0 +1,271 @@
|
||||
{{define "theme-hotaru/home"}}
|
||||
<!doctype html>
|
||||
<html lang="zh">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<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">
|
||||
<title>{{.Title}}</title>
|
||||
<link rel="shortcut icon" type="image/png" href="/static/logo.png" />
|
||||
|
||||
<!-- Fix chrome language detection -->
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
|
||||
<meta http-equiv="Content-Language" content="zh" />
|
||||
|
||||
<!-- Styles -->
|
||||
<link rel="stylesheet" type="text/css" href="https://cdnjs.loli.net/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="/static/semantic-ui-alerts.min.css">
|
||||
<link rel="stylesheet" href="/static/theme-hotaru/css/core.css" type="text/css">
|
||||
<link rel="stylesheet" href="/static/theme-hotaru/css/main.css" type="text/css">
|
||||
<link rel="stylesheet" href="/static/theme-hotaru/css/darkmode.css" type="text/css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<section class="hotaru-cover">
|
||||
<div class="container" style="text-align: center;">
|
||||
<h1>
|
||||
<strong>{{.Title}}</strong>
|
||||
</h1>
|
||||
<div>
|
||||
<p>
|
||||
<small>狀態更新和事件報告可能會延遲最多30秒鐘<br />具體取決於手頭的技術問題。請向下滾動查看過去的事件報告</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div id="app">
|
||||
<div class="container">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>运行状态</th>
|
||||
<th>节点名</th>
|
||||
<th>系统</th>
|
||||
<th>服务器位置</th>
|
||||
<th>在线时间</th>
|
||||
<th>网络(B/s) ↓|↑</th>
|
||||
<th>流量(B) ↓|↑</th>
|
||||
<th>CPU</th>
|
||||
<th>RAM</th>
|
||||
<th>硬盘</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="servers" style="text-align:center;">
|
||||
<tr v-for='server in servers' :id="server.ID">
|
||||
<td>
|
||||
<div class="progress">
|
||||
<div style="width: 100%;"
|
||||
:class="'progress-bar progress-bar-'+ (isAlive(server)?'success':pulled>3?'danger':'warning')">
|
||||
<small>@#isAlive(server)?'运行中':pulled>3?'已离线':'……'#@</small>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>@#server.Name#@</td>
|
||||
<td>@#server.Host?server.Host.Platform:'-'#@</td>
|
||||
<td>@#server.Host?server.Host.CountryCode:'-'#@</td>
|
||||
<td>@#server.State?secondToDate(server.State.Uptime):'-'#@</td>
|
||||
<td>@#server.State?formatByteSize(server.State.NetInSpeed)+'/s|'+formatByteSize(server.State.NetOutSpeed)+'/s':'-'#@
|
||||
</td>
|
||||
<td>@#server.State?formatByteSize(server.State.NetInTransfer)+'|'+formatByteSize(server.State.NetOutTransfer):'-'#@
|
||||
</td>
|
||||
<td>
|
||||
<div class="progress progress-striped active">
|
||||
<div :style="'width: '+parseInt(server.State?server.State.CPU:0)+'%;'"
|
||||
:class="'progress-bar progress-bar-'+ (isAlive(server)?'success':pulled>3?'danger':'warning')">
|
||||
<small>@#parseInt(server.State?server.State.CPU:0)#@%</small>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="progress progress-striped active">
|
||||
<div :style="'width: '+parseInt(server.State?server.State.MemUsed/server.Host.MemTotal:0)+'%;'"
|
||||
:class="'progress-bar progress-bar-'+ (isAlive(server)?'success':pulled>3?'danger':'warning')">
|
||||
<small>@#parseInt(server.State?server.State.MemUsed/server.Host.MemTotal:0)#@%</small>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="progress progress-striped active">
|
||||
<div :style="'width: '+(server.State?server.State.DiskUsed/server.Host.DiskTotal:0)+'%;'"
|
||||
:class="'progress-bar progress-bar-'+ (isAlive(server)?'success':pulled>3?'danger':'warning')">
|
||||
<small>@#parseInt(server.State?server.State.DiskUsed/server.Host.DiskTotal:0)#@%</small>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="page-section">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-md-4 col-sm-4" v-for='server in servers' :id="server.ID">
|
||||
<div class="panel panel-block panel-block-sm panel-location">
|
||||
<div class="location-header">
|
||||
<h3 class="h4"><img
|
||||
:src="'/static/theme-hotaru/img/clients/'+(server.Host?server.Host.CountryCode.toUpperCase():'HK')+'.png'">
|
||||
@#server.Name#@</h3>
|
||||
<i class="zmdi zmdi-check-circle text-success"></i>
|
||||
</div>
|
||||
<div class="location-progress">
|
||||
<div class="progress progress-sm">
|
||||
<div :class="'progress-bar progress-bar-'+ (isAlive(server)?'success':pulled>3?'danger':'warning')"
|
||||
:style="'width:'+parseInt(server.State?server.State.CPU:0)+'%;'">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="location-info list-styled">
|
||||
<li><span class="list-label">网络:</span>
|
||||
@#server.State?formatByteSize(server.State.NetInSpeed)+'/s|'+formatByteSize(server.State.NetOutSpeed)+'/s':'-'#@
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button id="darkmodeButton"></button>
|
||||
<footer>
|
||||
<p style="text-align:center;">Powered by <a href="https://github.com/naiba/nezha">哪吒面板</a> build · {{.Version}}
|
||||
</p>
|
||||
</footer>
|
||||
<script src="https://cdnjs.loli.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
||||
<script src="https://cdnjs.loli.net/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
|
||||
<script src="/static/semantic-ui-alerts.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
|
||||
<script>
|
||||
const initData = {{.Servers }};
|
||||
var statusCards = new Vue({
|
||||
el: '#app',
|
||||
delimiters: ['@#', '#@'],
|
||||
data: {
|
||||
servers: initData,
|
||||
pulled: false,
|
||||
},
|
||||
mounted() {
|
||||
this.troggleDarkMode();
|
||||
},
|
||||
methods: {
|
||||
readableBytes(bytes) {
|
||||
var i = Math.floor(Math.log(bytes) / Math.log(1024)),
|
||||
sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
|
||||
|
||||
return (bytes / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + sizes[i];
|
||||
},
|
||||
troggleDarkMode() {
|
||||
//darkmode
|
||||
if (document.getElementById("darkmodeButton")) {
|
||||
var night = parseInt(document.cookie.replace(/(?:(?:^|.*;\s*)dark\s*=\s*([^;]*).*$)|^.*$/, "$1") || '0');
|
||||
if (night) {
|
||||
document.body.classList.add('dark');
|
||||
console.log('Dark mode on', night);
|
||||
}
|
||||
document.getElementById("darkmodeButton").onclick = function () {
|
||||
night = parseInt(document.cookie.replace(/(?:(?:^|.*;\s*)dark\s*=\s*([^;]*).*$)|^.*$/, "$1") || '0');
|
||||
if (!night) {
|
||||
document.body.classList.add('dark');
|
||||
document.cookie = "dark=1";
|
||||
console.log('Dark mode on', night);
|
||||
} else {
|
||||
document.body.classList.remove('dark');
|
||||
document.cookie = "dark=0";
|
||||
console.log('Dark mode off', night);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
document.cookie && (document.cookie = "");
|
||||
console.log('Darkmode not Support');
|
||||
}
|
||||
},
|
||||
isAlive(s) {
|
||||
if (!s.Host) return false
|
||||
const lastActive = new Date(s.LastActive).getTime()
|
||||
if (this.pulled > 10 && Date.now() - lastActive > 20 * 1000) {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
},
|
||||
secondToDate(s) {
|
||||
var d = Math.floor(s / 3600 / 24);
|
||||
var h = Math.floor(s / 3600 % 24);
|
||||
var m = Math.floor((s / 60 % 60));
|
||||
var s = Math.floor((s % 60));
|
||||
return result = d + "天" + h + "小时" + m + "分钟" + s + "秒";
|
||||
},
|
||||
formatTimestamp(t) {
|
||||
return new Date(t * 1000).toLocaleString()
|
||||
},
|
||||
formatByteSize(bs) {
|
||||
const x = this.readableBytes(bs)
|
||||
return x != "NaN undefined" ? x : '0 KB'
|
||||
}
|
||||
}
|
||||
})
|
||||
const wsProtocol = window.location.protocol == "https:" ? "wss" : "ws"
|
||||
const ws = new WebSocket(wsProtocol + '://' + window.location.host + '/ws');
|
||||
ws.onopen = function (evt) {
|
||||
$.suiAlert({
|
||||
title: '实时通道建立',
|
||||
description: '可以实时获取最新监控数据啦',
|
||||
type: 'success',
|
||||
time: '2',
|
||||
position: 'top-center',
|
||||
});
|
||||
ws.send('track');
|
||||
setInterval(() => {
|
||||
ws.send('track');
|
||||
console.log('追加监控时间')
|
||||
}, 1000 * 60 * 6);
|
||||
}
|
||||
ws.onmessage = function (evt) {
|
||||
const oldServers = statusCards.servers
|
||||
statusCards.servers = JSON.parse(evt.data)
|
||||
statusCards.pulled++
|
||||
const keys = Object.keys(statusCards.servers)
|
||||
for (let i = 0; i < keys.length; i++) {
|
||||
const ns = statusCards.servers[keys[i]];
|
||||
// 进度条
|
||||
const bars = [
|
||||
$('#' + ns.ID + ' .cpu.progress'),
|
||||
$('#' + ns.ID + ' .mem.progress'),
|
||||
$('#' + ns.ID + ' .swap.progress'),
|
||||
$('#' + ns.ID + ' .disk.progress')
|
||||
]
|
||||
for (let j = 0; j < oldServers.length; j++) {
|
||||
const os = oldServers[j];
|
||||
if (ns.ID == os.ID) {
|
||||
break
|
||||
}
|
||||
// 新加入的仔
|
||||
$('#' + ns.ID + ' .yellow.info.icon').popup({
|
||||
popup: '.ui.content.popup'
|
||||
});
|
||||
}
|
||||
// 刷新进度条
|
||||
bars.forEach((b, i) => {
|
||||
if (b[0] && b[0].dataset) {
|
||||
b.progress('set total', i == 0 ? 100 : b[0].dataset.total);
|
||||
b.progress('update progress', b[0].dataset.value);
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
ws.onclose = function () {
|
||||
$.suiAlert({
|
||||
title: '实时通道断开',
|
||||
description: '无法实时获取最新监控数据咯',
|
||||
type: 'warning',
|
||||
time: '2',
|
||||
position: 'top-center',
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
{{end}}
|
||||
Reference in New Issue
Block a user