KJZH001/nezha-2024
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

angel-kanade模版增加主题切换功能 (#329)

Browse Source
This commit is contained in:
nap0o 2024-02-27 07:42:56 -05:00 committed by GitHub
parent 8033c6a0b7
commit 8e67d3487e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 129 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
resource/template/theme-angel-kanade/footer.html vendored
View File

@ -1,4 +1,5 @@
{{define "theme-angel-kanade/footer"}} {{define "theme-angel-kanade/footer"}}
</div>
<div class="ui inverted vertical footer segment"> <div class="ui inverted vertical footer segment">
<div class="ui center aligned is-size-7 container"> <div class="ui center aligned is-size-7 container">
<b>&copy; <a style="color: white;" href="/">{{.Conf.Site.Brand}}</a></b> | <b>&copy; <a style="color: white;" href="/">{{.Conf.Site.Brand}}</a></b> |
@ -13,12 +14,12 @@
<script src="/static/semantic-ui-alerts.min.js"></script> <script src="/static/semantic-ui-alerts.min.js"></script>
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/vue/2.6.14/vue.min.js"></script> <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/vue/2.6.14/vue.min.js"></script>
<script src="/static/main.js?v20240224"></script> <script src="/static/main.js?v20240224"></script>
<script src="/static/theme-default/js/mixin.js?v20240226"></script>
<script> <script>
(function () { (function () {
updateLang({{.LANG }}); updateLang({{.LANG }});
})(); })();
</script> </script>
</body> </body>
</html> </html>
{{end}} {{end}}

201
resource/template/theme-angel-kanade/home.html vendored
View File

@ -3,118 +3,116 @@
{{if ts .CustomCode}} {{.CustomCode|safe}} {{end}} {{if ts .CustomCode}} {{.CustomCode|safe}} {{end}}
{{template "theme-angel-kanade/menu" .}} {{template "theme-angel-kanade/menu" .}}
<div class="nb-container"> <div class="nb-container">
<div class="ui container"> <div class="ui container">
<div id="app"> <div class="ui styled fluid accordion" v-for="group in groups">
<div class="ui styled fluid accordion" v-for="group in groups"> <div class="active title">
<div class="active title"> <i class="dropdown icon"></i>
<i class="dropdown icon"></i> @#(group.Tag!==''?group.Tag:'{{tr "Default"}}')#@
@#(group.Tag!==''?group.Tag:'{{tr "Default"}}')#@ </div>
</div> <div class="active content">
<div class="active content"> <div class="ui four stackable status cards">
<div class="ui four stackable status cards"> <div v-for="server in group.data" :id="server.ID" class="ui card">
<div v-for="server in group.data" :id="server.ID" class="ui card"> <div class="content" v-if="server.Host" style="margin-top: 10px; padding-bottom: 5px">
<div class="content" v-if="server.Host" style="margin-top: 10px; padding-bottom: 5px"> <div class="header">
<div class="header"> <img v-if="server.Host.CountryCode" style="border-radius: 50%;box-shadow:-1px -1px 2px #eee, 1px 1px 2px #000;width:19px;" :src="'https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/flag-icon-css/4.1.5/flags/1x1/'+server.Host.CountryCode + '.svg'" alt="国家"/>&nbsp;<i v-if='server.Host.Platform == "darwin"'
<img v-if="server.Host.CountryCode" style="border-radius: 50%;box-shadow:-1px -1px 2px #eee, 1px 1px 2px #000;width:19px;" :src="'https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/flag-icon-css/4.1.5/flags/1x1/'+server.Host.CountryCode + '.svg'" alt="国家"/>&nbsp;<i v-if='server.Host.Platform == "darwin"' class="apple icon"></i><i v-else-if='isWindowsPlatform(server.Host.Platform)'
class="apple icon"></i><i v-else-if='isWindowsPlatform(server.Host.Platform)' class="windows icon"></i><i v-else :class="'fl-' + getFontLogoClass(server.Host.Platform)"></i>
class="windows icon"></i><i v-else :class="'fl-' + getFontLogoClass(server.Host.Platform)"></i> @#server.Name + (server.live?'':'[{{tr "Offline"}}]')#@
@#server.Name + (server.live?'':'[{{tr "Offline"}}]')#@ <i class="nezha-secondary-font info circle icon" style="height: 28px"></i>
<i class="nezha-secondary-font info circle icon" style="height: 28px"></i> <div class="ui content popup" style="margin-bottom: 0">
<div class="ui content popup" style="margin-bottom: 0"> {{tr "Platform"}}: @#server.Host.Platform#@-@#server.Host.PlatformVersion#@
{{tr "Platform"}}: @#server.Host.Platform#@-@#server.Host.PlatformVersion#@ [<span
[<span v-if="server.Host.Virtualization">@#server.Host.Virtualization#@:</span>@#server.Host.Arch#@]<br />
v-if="server.Host.Virtualization">@#server.Host.Virtualization#@:</span>@#server.Host.Arch#@]<br /> CPU: @#server.Host.CPU#@<br />
CPU: @#server.Host.CPU#@<br /> {{tr "DiskUsed"}}:
{{tr "DiskUsed"}}: @#formatByteSize(server.State.DiskUsed)#@/@#formatByteSize(server.Host.DiskTotal)#@<br />
@#formatByteSize(server.State.DiskUsed)#@/@#formatByteSize(server.Host.DiskTotal)#@<br /> {{tr "MemUsed"}}:
{{tr "MemUsed"}}: @#formatByteSize(server.State.MemUsed)#@/@#formatByteSize(server.Host.MemTotal)#@<br />
@#formatByteSize(server.State.MemUsed)#@/@#formatByteSize(server.Host.MemTotal)#@<br /> {{tr "SwapUsed"}}:
{{tr "SwapUsed"}}: @#formatByteSize(server.State.SwapUsed)#@/@#formatByteSize(server.Host.SwapTotal)#@<br />
@#formatByteSize(server.State.SwapUsed)#@/@#formatByteSize(server.Host.SwapTotal)#@<br /> {{tr "NetTransfer"}}: <i
{{tr "NetTransfer"}}: <i class="arrow alternate circle down outline icon"></i>@#formatByteSize(server.State.NetInTransfer)#@<i
class="arrow alternate circle down outline icon"></i>@#formatByteSize(server.State.NetInTransfer)#@<i class="arrow alternate circle up outline icon"></i>@#formatByteSize(server.State.NetOutTransfer)#@<br />
class="arrow alternate circle up outline icon"></i>@#formatByteSize(server.State.NetOutTransfer)#@<br /> {{tr "Load"}}: @# toFixed2(server.State.Load1) #@/@# toFixed2(server.State.Load5) #@/@#
{{tr "Load"}}: @# toFixed2(server.State.Load1) #@/@# toFixed2(server.State.Load5) #@/@# toFixed2(server.State.Load15) #@<br />
toFixed2(server.State.Load15) #@<br /> {{tr "ProcessCount"}}: @# server.State.ProcessCount #@<br />
{{tr "ProcessCount"}}: @# server.State.ProcessCount #@<br /> {{tr "ConnCount"}}: TCP @# server.State.TcpConnCount #@ / UDP @# server.State.UdpConnCount #@<br />
{{tr "ConnCount"}}: TCP @# server.State.TcpConnCount #@ / UDP @# server.State.UdpConnCount #@<br /> {{tr "BootTime"}}: @# formatTimestamp(server.Host.BootTime) #@<br />
{{tr "BootTime"}}: @# formatTimestamp(server.Host.BootTime) #@<br /> {{tr "LastActive"}}: @# new Date(server.LastActive).toLocaleString() #@<br />
{{tr "LastActive"}}: @# new Date(server.LastActive).toLocaleString() #@<br /> {{tr "Version"}}: @#server.Host.Version#@<br />
{{tr "Version"}}: @#server.Host.Version#@<br />
</div>
<div class="ui divider" style="margin-bottom: 5px"></div>
</div> </div>
<div class="description"> <div class="ui divider" style="margin-bottom: 5px"></div>
<div class="ui grid"> </div>
<div class="three wide column">CPU</div> <div class="description">
<div class="thirteen wide column"> <div class="ui grid">
<div :class="formatPercent(server.live,server.State.CPU, 100).class"> <div class="three wide column">CPU</div>
<div class="bar" :style="formatPercent(server.live,server.State.CPU, 100).style"> <div class="thirteen wide column">
<small>@#formatPercent(server.live,server.State.CPU,100).percent#@%</small> <div :class="formatPercent(server.live,server.State.CPU, 100).class">
</div> <div class="bar" :style="formatPercent(server.live,server.State.CPU, 100).style">
<small>@#formatPercent(server.live,server.State.CPU,100).percent#@%</small>
</div> </div>
</div> </div>
<div class="three wide column">{{tr "MemUsed"}}</div> </div>
<div class="thirteen wide column"> <div class="three wide column">{{tr "MemUsed"}}</div>
<div :class="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).class"> <div class="thirteen wide column">
<div class="bar" <div :class="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).class">
:style="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).style"> <div class="bar"
<small>@#parseInt(server.State?server.State.MemUsed/server.Host.MemTotal*100:0)#@%</small> :style="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).style">
</div> <small>@#parseInt(server.State?server.State.MemUsed/server.Host.MemTotal*100:0)#@%</small>
</div> </div>
</div> </div>
<div class="three wide column">{{tr "SwapUsed"}}</div> </div>
<div class="thirteen wide column"> <div class="three wide column">{{tr "SwapUsed"}}</div>
<div :class="formatPercent(server.live,server.State.SwapUsed, server.Host.SwapTotal).class"> <div class="thirteen wide column">
<div class="bar" <div :class="formatPercent(server.live,server.State.SwapUsed, server.Host.SwapTotal).class">
:style="formatPercent(server.live,server.State.SwapUsed, server.Host.SwapTotal).style"> <div class="bar"
<small>@#parseInt(server.State?server.State.SwapUsed/server.Host.SwapTotal*100:0)#@%</small> :style="formatPercent(server.live,server.State.SwapUsed, server.Host.SwapTotal).style">
</div> <small>@#parseInt(server.State?server.State.SwapUsed/server.Host.SwapTotal*100:0)#@%</small>
</div> </div>
</div> </div>
<div class="three wide column">{{tr "NetSpeed"}}</div> </div>
<div class="thirteen wide column"> <div class="three wide column">{{tr "NetSpeed"}}</div>
<i class="arrow alternate circle down outline icon"></i> <div class="thirteen wide column">
@#formatByteSize(server.State.NetInSpeed)#@/s <i class="arrow alternate circle down outline icon"></i>
<i class="arrow alternate circle up outline icon"></i> @#formatByteSize(server.State.NetInSpeed)#@/s
@#formatByteSize(server.State.NetOutSpeed)#@/s <i class="arrow alternate circle up outline icon"></i>
</div> @#formatByteSize(server.State.NetOutSpeed)#@/s
<div class="three wide column">{{tr "NetTransfer"}}</div> </div>
<div class="thirteen wide column"> <div class="three wide column">{{tr "NetTransfer"}}</div>
<i class="arrow circle down icon"></i> <div class="thirteen wide column">
@#formatByteSize(server.State.NetInTransfer)#@ <i class="arrow circle down icon"></i>
&nbsp; @#formatByteSize(server.State.NetInTransfer)#@
<i class="arrow circle up icon"></i> &nbsp;
@#formatByteSize(server.State.NetOutTransfer)#@ <i class="arrow circle up icon"></i>
</div> @#formatByteSize(server.State.NetOutTransfer)#@
<div class="three wide column">{{tr "DiskUsed"}}</div> </div>
<div class="thirteen wide column"> <div class="three wide column">{{tr "DiskUsed"}}</div>
<div :class="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).class"> <div class="thirteen wide column">
<div class="bar" <div :class="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).class">
:style="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).style"> <div class="bar"
<small>@#parseInt(server.State?server.State.DiskUsed/server.Host.DiskTotal*100:0)#@%</small> :style="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).style">
</div> <small>@#parseInt(server.State?server.State.DiskUsed/server.Host.DiskTotal*100:0)#@%</small>
</div> </div>
</div> </div>
<div class="three wide column">{{tr "Info"}}</div> </div>
<div class="thirteen wide column"> <div class="three wide column">{{tr "Info"}}</div>
<i class="bi bi-cpu-fill" style="font-size: 1.1rem; color: #4a86e8;"></i> @#getCoreAndGHz(server.Host.CPU)#@ <div class="thirteen wide column">
&nbsp; <i class="bi bi-cpu-fill" style="font-size: 1.1rem; color: #4a86e8;"></i> @#getCoreAndGHz(server.Host.CPU)#@
<i class="bi bi-memory" style="font-size: 1.1rem; color: #00ac0d;"></i> @#getByteToGB(server.Host.MemTotal)#@ &nbsp;
&nbsp; <i class="bi bi-memory" style="font-size: 1.1rem; color: #00ac0d;"></i> @#getByteToGB(server.Host.MemTotal)#@
<i class="bi bi-hdd-rack-fill" style="font-size: 1.1rem; color: #980000"></i> @#getByteToGB(server.Host.DiskTotal)#@ &nbsp;
</div> <i class="bi bi-hdd-rack-fill" style="font-size: 1.1rem; color: #980000"></i> @#getByteToGB(server.Host.DiskTotal)#@
<div class="three wide column">{{tr "Uptime"}}</div> </div>
<div class="thirteen wide column"> <div class="three wide column">{{tr "Uptime"}}</div>
<i class="clock icon"></i>@#secondToDate(server.State.Uptime)#@ <div class="thirteen wide column">
</div> <i class="clock icon"></i>@#secondToDate(server.State.Uptime)#@
</div> </div>
</div> </div>
</div> </div>
<div class="content" v-else> </div>
<p>@#server.Name#@</p> <div class="content" v-else>
<p>{{tr "ServerIsOffline"}}</p> <p>@#server.Name#@</p>
</div> <p>{{tr "ServerIsOffline"}}</p>
</div> </div>
</div> </div>
</div> </div>
@ -129,10 +127,13 @@
el: '#app', el: '#app',
delimiters: ['@#', '#@'], delimiters: ['@#', '#@'],
data: { data: {
defaultTemplate: {{.Conf.Site.Theme}},
templates: {{.Themes}},
data: initData, data: initData,
groups: [], groups: [],
cache: [], cache: [],
}, },
mixins: [mixinsVue],
created() { created() {
this.group() this.group()
}, },

9
resource/template/theme-angel-kanade/menu.html vendored
View File

@ -1,4 +1,5 @@
{{define "theme-angel-kanade/menu"}} {{define "theme-angel-kanade/menu"}}
<div id="app">
<div class="ui large top fixed menu nb-menu"> <div class="ui large top fixed menu nb-menu">
<div class="ui container"> <div class="ui container">
<a class="item" href="/"> <a class="item" href="/">
@ -15,6 +16,14 @@
{{else}} {{else}}
<a class='item{{if eq .MatchedPath "/"}} active{{end}}' href="/"><i class="home icon"></i>{{tr "Home"}}</a> <a class='item{{if eq .MatchedPath "/"}} active{{end}}' href="/"><i class="home icon"></i>{{tr "Home"}}</a>
<a class='item{{if eq .MatchedPath "/service"}} active{{end}}' href="/service"><i class="rss icon"></i>{{tr "Services"}}</a> <a class='item{{if eq .MatchedPath "/service"}} active{{end}}' href="/service"><i class="rss icon"></i>{{tr "Services"}}</a>
<div class="item ui simple dropdown">
<div class="text"><i class="bi bi-incognito icon" style="margin-right:3px;"></i>{{tr "Template" }}<i class="dropdown icon" style="margin-right:0px;"></i></div>
<div class="menu">
<a v-for="(value, key) in templates" :key="key" @click="toggleTemplate(key)" class="item"><i class="th large icon"></i>@#value#@
<i class="check icon" v-if="preferredTemplate === key"></i>
</a>
</div>
</div>
{{end}} {{end}}
<div class="right menu"> <div class="right menu">
<div class="item"> <div class="item">

12
resource/template/theme-angel-kanade/service.html vendored
View File

@ -76,10 +76,20 @@
{{end}} {{end}}
</tbody> </tbody>
</table> </table>
{{end}} {{end}}
</div> </div>
</div> </div>
</div> </div>
{{template "theme-angel-kanade/footer" .}} {{template "theme-angel-kanade/footer" .}}
<script>
new Vue({
el: '#app',
delimiters: ['@#', '#@'],
data: {
defaultTemplate: {{.Conf.Site.Theme}},
templates: {{.Themes}}
},
mixins: [mixinsVue]
})
</script>
{{end}} {{end}}

2
resource/template/theme-default/header.html vendored
View File

@ -12,7 +12,7 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.0.0/css/flag-icons.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.0.0/css/flag-icons.min.css">
<link rel="stylesheet" type="text/css" href="/static/semantic-ui-alerts.min.css"> <link rel="stylesheet" type="text/css" href="/static/semantic-ui-alerts.min.css">
<link rel="stylesheet" type="text/css" href="/static/theme-default/css/main.css?v2024022601"> <link rel="stylesheet" type="text/css" href="/static/theme-default/css/main.css?v20240226">
<link rel="shortcut icon" type="image/png" href="/static/logo.svg" /> <link rel="shortcut icon" type="image/png" href="/static/logo.svg" />
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.1/dist/semantic.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.1/dist/semantic.min.js"></script>

1
resource/template/theme-default/home.html vendored
View File

@ -145,7 +145,6 @@
cache: [], cache: [],
chartDataList: [], chartDataList: [],
activePopup: null, activePopup: null,
}, },
mixins: [mixinsVue], mixins: [mixinsVue],
created() { created() {

10
resource/template/theme-server-status/home.html vendored
View File

@ -24,17 +24,18 @@
page: 'index', page: 'index',
defaultTemplate: {{.Conf.Site.Theme}}, defaultTemplate: {{.Conf.Site.Theme}},
templates: {{.Themes}}, templates: {{.Themes}},
servers: [],
nodesTag: [], nodesTag: [],
nodesNoTag: [], nodesNoTag: [],
chartDataList: [] chartDataList: []
}, },
mixins: [mixinsVue], mixins: [mixinsVue],
created() { created() {
initData = JSON.parse('{{.Servers}}').servers; this.servers = JSON.parse('{{.Servers}}').servers;
if(this.showGroup) { if(this.showGroup) {
this.nodesTag = this.groupingData(this.handleNodes(initData),"Tag"); this.nodesTag = this.groupingData(this.handleNodes(this.servers),"Tag");
} else { } else {
this.nodesNoTag = this.handleNodes(initData); this.nodesNoTag = this.handleNodes(this.servers);
} }
}, },
mounted() { mounted() {
@ -367,8 +368,7 @@
chart.setOption(option); chart.setOption(option);
}, },
reloadCharts() { // 重新加载所有图表 reloadCharts() { // 重新加载所有图表
const data = JSON.parse('{{.Servers}}').servers; this.servers.forEach(node => {
data.forEach(node => {
const id = node.ID; const id = node.ID;
const chartData = this.chartDataList[id - 1]; const chartData = this.chartDataList[id - 1];
if (chartData) { if (chartData) {