Skip to content

Commit 8e67d34

Browse files
nap0onap0o
authored
angel-kanade模版增加主题切换功能 (#329)
1 parent 8033c6a commit 8e67d34

File tree

7 files changed

+129
-109
lines changed

7 files changed

+129
-109
lines changed

‎resource/template/theme-angel-kanade/footer.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
{{define "theme-angel-kanade/footer"}}
2+
</div>
23
<div class="ui inverted vertical footer segment">
34
<div class="ui center aligned is-size-7 container">
45
<b>&copy; <a style="color: white;" href="/">{{.Conf.Site.Brand}}</a></b> |
@@ -13,12 +14,12 @@
1314
<script src="/static/semantic-ui-alerts.min.js"></script>
1415
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/vue/2.6.14/vue.min.js"></script>
1516
<script src="/static/main.js?v20240224"></script>
17+
<script src="/static/theme-default/js/mixin.js?v20240226"></script>
1618
<script>
1719
(function () {
1820
updateLang({{.LANG }});
1921
})();
2022
</script>
2123
</body>
22-
2324
</html>
2425
{{end}}

‎resource/template/theme-angel-kanade/home.html

Lines changed: 101 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -3,118 +3,116 @@
33
{{if ts .CustomCode}} {{.CustomCode|safe}} {{end}}
44
{{template "theme-angel-kanade/menu" .}}
55
<div class="nb-container">
6-
<div class="ui container">
7-
<div id="app">
8-
<div class="ui styled fluid accordion" v-for="group in groups">
9-
<div class="active title">
10-
<i class="dropdown icon"></i>
11-
@#(group.Tag!==''?group.Tag:'{{tr "Default"}}')#@
12-
</div>
13-
<div class="active content">
14-
<div class="ui four stackable status cards">
15-
<div v-for="server in group.data" :id="server.ID" class="ui card">
16-
<div class="content" v-if="server.Host" style="margin-top: 10px; padding-bottom: 5px">
17-
<div class="header">
18-
<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"'
19-
class="apple icon"></i><i v-else-if='isWindowsPlatform(server.Host.Platform)'
20-
class="windows icon"></i><i v-else :class="'fl-' + getFontLogoClass(server.Host.Platform)"></i>
21-
@#server.Name + (server.live?'':'[{{tr "Offline"}}]')#@
22-
<i class="nezha-secondary-font info circle icon" style="height: 28px"></i>
23-
<div class="ui content popup" style="margin-bottom: 0">
24-
{{tr "Platform"}}: @#server.Host.Platform#@-@#server.Host.PlatformVersion#@
25-
[<span
26-
v-if="server.Host.Virtualization">@#server.Host.Virtualization#@:</span>@#server.Host.Arch#@]<br />
27-
CPU: @#server.Host.CPU#@<br />
28-
{{tr "DiskUsed"}}:
29-
@#formatByteSize(server.State.DiskUsed)#@/@#formatByteSize(server.Host.DiskTotal)#@<br />
30-
{{tr "MemUsed"}}:
31-
@#formatByteSize(server.State.MemUsed)#@/@#formatByteSize(server.Host.MemTotal)#@<br />
32-
{{tr "SwapUsed"}}:
33-
@#formatByteSize(server.State.SwapUsed)#@/@#formatByteSize(server.Host.SwapTotal)#@<br />
34-
{{tr "NetTransfer"}}: <i
35-
class="arrow alternate circle down outline icon"></i>@#formatByteSize(server.State.NetInTransfer)#@<i
36-
class="arrow alternate circle up outline icon"></i>@#formatByteSize(server.State.NetOutTransfer)#@<br />
37-
{{tr "Load"}}: @# toFixed2(server.State.Load1) #@/@# toFixed2(server.State.Load5) #@/@#
38-
toFixed2(server.State.Load15) #@<br />
39-
{{tr "ProcessCount"}}: @# server.State.ProcessCount #@<br />
40-
{{tr "ConnCount"}}: TCP @# server.State.TcpConnCount #@ / UDP @# server.State.UdpConnCount #@<br />
41-
{{tr "BootTime"}}: @# formatTimestamp(server.Host.BootTime) #@<br />
42-
{{tr "LastActive"}}: @# new Date(server.LastActive).toLocaleString() #@<br />
43-
{{tr "Version"}}: @#server.Host.Version#@<br />
44-
</div>
45-
<div class="ui divider" style="margin-bottom: 5px"></div>
6+
<div class="ui container">
7+
<div class="ui styled fluid accordion" v-for="group in groups">
8+
<div class="active title">
9+
<i class="dropdown icon"></i>
10+
@#(group.Tag!==''?group.Tag:'{{tr "Default"}}')#@
11+
</div>
12+
<div class="active content">
13+
<div class="ui four stackable status cards">
14+
<div v-for="server in group.data" :id="server.ID" class="ui card">
15+
<div class="content" v-if="server.Host" style="margin-top: 10px; padding-bottom: 5px">
16+
<div class="header">
17+
<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"'
18+
class="apple icon"></i><i v-else-if='isWindowsPlatform(server.Host.Platform)'
19+
class="windows icon"></i><i v-else :class="'fl-' + getFontLogoClass(server.Host.Platform)"></i>
20+
@#server.Name + (server.live?'':'[{{tr "Offline"}}]')#@
21+
<i class="nezha-secondary-font info circle icon" style="height: 28px"></i>
22+
<div class="ui content popup" style="margin-bottom: 0">
23+
{{tr "Platform"}}: @#server.Host.Platform#@-@#server.Host.PlatformVersion#@
24+
[<span
25+
v-if="server.Host.Virtualization">@#server.Host.Virtualization#@:</span>@#server.Host.Arch#@]<br />
26+
CPU: @#server.Host.CPU#@<br />
27+
{{tr "DiskUsed"}}:
28+
@#formatByteSize(server.State.DiskUsed)#@/@#formatByteSize(server.Host.DiskTotal)#@<br />
29+
{{tr "MemUsed"}}:
30+
@#formatByteSize(server.State.MemUsed)#@/@#formatByteSize(server.Host.MemTotal)#@<br />
31+
{{tr "SwapUsed"}}:
32+
@#formatByteSize(server.State.SwapUsed)#@/@#formatByteSize(server.Host.SwapTotal)#@<br />
33+
{{tr "NetTransfer"}}: <i
34+
class="arrow alternate circle down outline icon"></i>@#formatByteSize(server.State.NetInTransfer)#@<i
35+
class="arrow alternate circle up outline icon"></i>@#formatByteSize(server.State.NetOutTransfer)#@<br />
36+
{{tr "Load"}}: @# toFixed2(server.State.Load1) #@/@# toFixed2(server.State.Load5) #@/@#
37+
toFixed2(server.State.Load15) #@<br />
38+
{{tr "ProcessCount"}}: @# server.State.ProcessCount #@<br />
39+
{{tr "ConnCount"}}: TCP @# server.State.TcpConnCount #@ / UDP @# server.State.UdpConnCount #@<br />
40+
{{tr "BootTime"}}: @# formatTimestamp(server.Host.BootTime) #@<br />
41+
{{tr "LastActive"}}: @# new Date(server.LastActive).toLocaleString() #@<br />
42+
{{tr "Version"}}: @#server.Host.Version#@<br />
4643
</div>
47-
<div class="description">
48-
<div class="ui grid">
49-
<div class="three wide column">CPU</div>
50-
<div class="thirteen wide column">
51-
<div :class="formatPercent(server.live,server.State.CPU, 100).class">
52-
<div class="bar" :style="formatPercent(server.live,server.State.CPU, 100).style">
53-
<small>@#formatPercent(server.live,server.State.CPU,100).percent#@%</small>
54-
</div>
44+
<div class="ui divider" style="margin-bottom: 5px"></div>
45+
</div>
46+
<div class="description">
47+
<div class="ui grid">
48+
<div class="three wide column">CPU</div>
49+
<div class="thirteen wide column">
50+
<div :class="formatPercent(server.live,server.State.CPU, 100).class">
51+
<div class="bar" :style="formatPercent(server.live,server.State.CPU, 100).style">
52+
<small>@#formatPercent(server.live,server.State.CPU,100).percent#@%</small>
5553
</div>
5654
</div>
57-
<div class="three wide column">{{tr "MemUsed"}}</div>
58-
<div class="thirteen wide column">
59-
<div :class="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).class">
60-
<div class="bar"
61-
:style="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).style">
62-
<small>@#parseInt(server.State?server.State.MemUsed/server.Host.MemTotal*100:0)#@%</small>
63-
</div>
55+
</div>
56+
<div class="three wide column">{{tr "MemUsed"}}</div>
57+
<div class="thirteen wide column">
58+
<div :class="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).class">
59+
<div class="bar"
60+
:style="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).style">
61+
<small>@#parseInt(server.State?server.State.MemUsed/server.Host.MemTotal*100:0)#@%</small>
6462
</div>
6563
</div>
66-
<div class="three wide column">{{tr "SwapUsed"}}</div>
67-
<div class="thirteen wide column">
68-
<div :class="formatPercent(server.live,server.State.SwapUsed, server.Host.SwapTotal).class">
69-
<div class="bar"
70-
:style="formatPercent(server.live,server.State.SwapUsed, server.Host.SwapTotal).style">
71-
<small>@#parseInt(server.State?server.State.SwapUsed/server.Host.SwapTotal*100:0)#@%</small>
72-
</div>
64+
</div>
65+
<div class="three wide column">{{tr "SwapUsed"}}</div>
66+
<div class="thirteen wide column">
67+
<div :class="formatPercent(server.live,server.State.SwapUsed, server.Host.SwapTotal).class">
68+
<div class="bar"
69+
:style="formatPercent(server.live,server.State.SwapUsed, server.Host.SwapTotal).style">
70+
<small>@#parseInt(server.State?server.State.SwapUsed/server.Host.SwapTotal*100:0)#@%</small>
7371
</div>
7472
</div>
75-
<div class="three wide column">{{tr "NetSpeed"}}</div>
76-
<div class="thirteen wide column">
77-
<i class="arrow alternate circle down outline icon"></i>
78-
@#formatByteSize(server.State.NetInSpeed)#@/s
79-
<i class="arrow alternate circle up outline icon"></i>
80-
@#formatByteSize(server.State.NetOutSpeed)#@/s
81-
</div>
82-
<div class="three wide column">{{tr "NetTransfer"}}</div>
83-
<div class="thirteen wide column">
84-
<i class="arrow circle down icon"></i>
85-
@#formatByteSize(server.State.NetInTransfer)#@
86-
&nbsp;
87-
<i class="arrow circle up icon"></i>
88-
@#formatByteSize(server.State.NetOutTransfer)#@
89-
</div>
90-
<div class="three wide column">{{tr "DiskUsed"}}</div>
91-
<div class="thirteen wide column">
92-
<div :class="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).class">
93-
<div class="bar"
94-
:style="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).style">
95-
<small>@#parseInt(server.State?server.State.DiskUsed/server.Host.DiskTotal*100:0)#@%</small>
96-
</div>
73+
</div>
74+
<div class="three wide column">{{tr "NetSpeed"}}</div>
75+
<div class="thirteen wide column">
76+
<i class="arrow alternate circle down outline icon"></i>
77+
@#formatByteSize(server.State.NetInSpeed)#@/s
78+
<i class="arrow alternate circle up outline icon"></i>
79+
@#formatByteSize(server.State.NetOutSpeed)#@/s
80+
</div>
81+
<div class="three wide column">{{tr "NetTransfer"}}</div>
82+
<div class="thirteen wide column">
83+
<i class="arrow circle down icon"></i>
84+
@#formatByteSize(server.State.NetInTransfer)#@
85+
&nbsp;
86+
<i class="arrow circle up icon"></i>
87+
@#formatByteSize(server.State.NetOutTransfer)#@
88+
</div>
89+
<div class="three wide column">{{tr "DiskUsed"}}</div>
90+
<div class="thirteen wide column">
91+
<div :class="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).class">
92+
<div class="bar"
93+
:style="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).style">
94+
<small>@#parseInt(server.State?server.State.DiskUsed/server.Host.DiskTotal*100:0)#@%</small>
9795
</div>
9896
</div>
99-
<div class="three wide column">{{tr "Info"}}</div>
100-
<div class="thirteen wide column">
101-
<i class="bi bi-cpu-fill" style="font-size: 1.1rem; color: #4a86e8;"></i> @#getCoreAndGHz(server.Host.CPU)#@
102-
&nbsp;
103-
<i class="bi bi-memory" style="font-size: 1.1rem; color: #00ac0d;"></i> @#getByteToGB(server.Host.MemTotal)#@
104-
&nbsp;
105-
<i class="bi bi-hdd-rack-fill" style="font-size: 1.1rem; color: #980000"></i> @#getByteToGB(server.Host.DiskTotal)#@
106-
</div>
107-
<div class="three wide column">{{tr "Uptime"}}</div>
108-
<div class="thirteen wide column">
109-
<i class="clock icon"></i>@#secondToDate(server.State.Uptime)#@
110-
</div>
97+
</div>
98+
<div class="three wide column">{{tr "Info"}}</div>
99+
<div class="thirteen wide column">
100+
<i class="bi bi-cpu-fill" style="font-size: 1.1rem; color: #4a86e8;"></i> @#getCoreAndGHz(server.Host.CPU)#@
101+
&nbsp;
102+
<i class="bi bi-memory" style="font-size: 1.1rem; color: #00ac0d;"></i> @#getByteToGB(server.Host.MemTotal)#@
103+
&nbsp;
104+
<i class="bi bi-hdd-rack-fill" style="font-size: 1.1rem; color: #980000"></i> @#getByteToGB(server.Host.DiskTotal)#@
105+
</div>
106+
<div class="three wide column">{{tr "Uptime"}}</div>
107+
<div class="thirteen wide column">
108+
<i class="clock icon"></i>@#secondToDate(server.State.Uptime)#@
111109
</div>
112110
</div>
113111
</div>
114-
<div class="content" v-else>
115-
<p>@#server.Name#@</p>
116-
<p>{{tr "ServerIsOffline"}}</p>
117-
</div>
112+
</div>
113+
<div class="content" v-else>
114+
<p>@#server.Name#@</p>
115+
<p>{{tr "ServerIsOffline"}}</p>
118116
</div>
119117
</div>
120118
</div>
@@ -129,10 +127,13 @@
129127
el: '#app',
130128
delimiters: ['@#', '#@'],
131129
data: {
130+
defaultTemplate: {{.Conf.Site.Theme}},
131+
templates: {{.Themes}},
132132
data: initData,
133133
groups: [],
134134
cache: [],
135135
},
136+
mixins: [mixinsVue],
136137
created() {
137138
this.group()
138139
},

‎resource/template/theme-angel-kanade/menu.html

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
{{define "theme-angel-kanade/menu"}}
2+
<div id="app">
23
<div class="ui large top fixed menu nb-menu">
34
<div class="ui container">
45
<a class="item" href="/">
@@ -15,6 +16,14 @@
1516
{{else}}
1617
<a class='item{{if eq .MatchedPath "/"}} active{{end}}' href="/"><i class="home icon"></i>{{tr "Home"}}</a>
1718
<a class='item{{if eq .MatchedPath "/service"}} active{{end}}' href="/service"><i class="rss icon"></i>{{tr "Services"}}</a>
19+
<div class="item ui simple dropdown">
20+
<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>
21+
<div class="menu">
22+
<a v-for="(value, key) in templates" :key="key" @click="toggleTemplate(key)" class="item"><i class="th large icon"></i>@#value#@
23+
<i class="check icon" v-if="preferredTemplate === key"></i>
24+
</a>
25+
</div>
26+
</div>
1827
{{end}}
1928
<div class="right menu">
2029
<div class="item">

‎resource/template/theme-angel-kanade/service.html

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,10 +76,20 @@ <h2 style="text-align: center;">{{tr "CycleTransferStats"}}</h2>
7676
{{end}}
7777
</tbody>
7878
</table>
79-
8079
{{end}}
8180
</div>
8281
</div>
8382
</div>
8483
{{template "theme-angel-kanade/footer" .}}
84+
<script>
85+
new Vue({
86+
el: '#app',
87+
delimiters: ['@#', '#@'],
88+
data: {
89+
defaultTemplate: {{.Conf.Site.Theme}},
90+
templates: {{.Themes}}
91+
},
92+
mixins: [mixinsVue]
93+
})
94+
</script>
8595
{{end}}

‎resource/template/theme-default/header.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
1313
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.0.0/css/flag-icons.min.css">
1414
<link rel="stylesheet" type="text/css" href="/static/semantic-ui-alerts.min.css">
15-
<link rel="stylesheet" type="text/css" href="/static/theme-default/css/main.css?v2024022601">
15+
<link rel="stylesheet" type="text/css" href="/static/theme-default/css/main.css?v20240226">
1616
<link rel="shortcut icon" type="image/png" href="/static/logo.svg" />
1717
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
1818
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.1/dist/semantic.min.js"></script>

‎resource/template/theme-default/home.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,6 @@
145145
cache: [],
146146
chartDataList: [],
147147
activePopup: null,
148-
149148
},
150149
mixins: [mixinsVue],
151150
created() {

‎resource/template/theme-server-status/home.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,17 +24,18 @@
2424
page: 'index',
2525
defaultTemplate: {{.Conf.Site.Theme}},
2626
templates: {{.Themes}},
27+
servers: [],
2728
nodesTag: [],
2829
nodesNoTag: [],
2930
chartDataList: []
3031
},
3132
mixins: [mixinsVue],
3233
created() {
33-
initData = JSON.parse('{{.Servers}}').servers;
34+
this.servers = JSON.parse('{{.Servers}}').servers;
3435
if(this.showGroup) {
35-
this.nodesTag = this.groupingData(this.handleNodes(initData),"Tag");
36+
this.nodesTag = this.groupingData(this.handleNodes(this.servers),"Tag");
3637
} else {
37-
this.nodesNoTag = this.handleNodes(initData);
38+
this.nodesNoTag = this.handleNodes(this.servers);
3839
}
3940
},
4041
mounted() {
@@ -367,8 +368,7 @@
367368
chart.setOption(option);
368369
},
369370
reloadCharts() { // 重新加载所有图表
370-
const data = JSON.parse('{{.Servers}}').servers;
371-
data.forEach(node => {
371+
this.servers.forEach(node => {
372372
const id = node.ID;
373373
const chartData = this.chartDataList[id - 1];
374374
if (chartData) {

0 commit comments

Comments
 (0)