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

💄 improve(ui): progress bar

Browse Source
This commit is contained in:
naiba 2020-12-20 23:15:57 +08:00
parent fb770573d5
commit 789065cb5f
5 changed files with 31 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
resource/static/main.css
View File

@ -68,3 +68,7 @@
.status.cards .outline.icon { .status.cards .outline.icon {
margin-right: 0 !important; margin-right: 0 !important;
} }
.ui.progress .bar {
min-width: .15em !important;
}

4
resource/static/theme-hotaru/css/main.css
View File

@ -188,3 +188,7 @@ table tr {
border-radius: .3em; border-radius: .3em;
margin-left: 1em; margin-left: 1em;
} }
.ui.progress .bar {
min-width: .15em !important;
}

2
resource/template/common/header.html
View File

@ -9,7 +9,7 @@
<title>{{.Title}}</title> <title>{{.Title}}</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.1/dist/semantic.min.css"> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.1/dist/semantic.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/main.css?v202012192326"> <link rel="stylesheet" type="text/css" href="/static/main.css?v202012202312">
<link rel="shortcut icon" type="image/png" href="/static/logo.png" /> <link rel="shortcut icon" type="image/png" href="/static/logo.png" />
</head> </head>

28
resource/template/theme-default/home.html
View File

@ -15,7 +15,8 @@
v-if='server.Host.Platform == "darwin"' class="apple icon"></i><i v-if='server.Host.Platform == "darwin"' class="apple icon"></i><i
v-if='server.Host.Platform == "linux"' class="linux icon"></i><i v-if='server.Host.Platform == "linux"' class="linux icon"></i><i
v-if='server.Host.Platform == "windows"' class="windows icon"></i><i v-if='server.Host.Platform == "windows"' class="windows icon"></i><i
v-if='server.Host.Platform == "freebsd"' class="freebsd icon"></i>@#server.Name + (server.live?'':' [已离线]')#@ v-if='server.Host.Platform == "freebsd"' class="freebsd icon"></i>@#server.Name +
(server.live?'':' [已离线]')#@
<i class="yellow info circle icon"></i> <i class="yellow info circle icon"></i>
<div class='ui content popup'> <div class='ui content popup'>
系统：@#server.Host.Platform#@-@#server.Host.PlatformVersion#@ [<span 系统：@#server.Host.Platform#@-@#server.Host.PlatformVersion#@ [<span
@ -37,25 +38,33 @@
<div class="thirteen wide column"> <div class="thirteen wide column">
<div :class="formatPercent(server.live,server.State.CPU, 100).class"> <div :class="formatPercent(server.live,server.State.CPU, 100).class">
<div class="bar" :style="formatPercent(server.live,server.State.CPU, 100).style"> <div class="bar" :style="formatPercent(server.live,server.State.CPU, 100).style">
<div class="progress"></div> <div class="progress">
<small>@#formatPercent(server.live,server.State.CPU,100).percent#@%</small>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="three wide column">内存</div> <div class="three wide column">内存</div>
<div class="thirteen wide column"> <div class="thirteen wide column">
<div :class="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).class"> <div
:class="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).class">
<div class="bar" <div class="bar"
:style="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).style"> :style="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).style">
<div class="progress"></div> <div class="progress">
<small>@#parseInt(server.State?server.State.MemUsed/server.Host.MemTotal*100:0)#@%</small>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="three wide column">交换</div> <div class="three wide column">交换</div>
<div class="thirteen wide column"> <div class="thirteen wide column">
<div :class="formatPercent(server.live,server.State.SwapUsed, server.Host.SwapTotal).class"> <div
:class="formatPercent(server.live,server.State.SwapUsed, server.Host.SwapTotal).class">
<div class="bar" <div class="bar"
:style="formatPercent(server.live,server.State.SwapUsed, server.Host.SwapTotal).style"> :style="formatPercent(server.live,server.State.SwapUsed, server.Host.SwapTotal).style">
<div class="progress"></div> <div class="progress">
<small>@#parseInt(server.State?server.State.SwapUsed/server.Host.SwapTotal*100:0)#@%</small>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -68,10 +77,13 @@
</div> </div>
<div class="three wide column">硬盘</div> <div class="three wide column">硬盘</div>
<div class="thirteen wide column"> <div class="thirteen wide column">
<div :class="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).class"> <div
:class="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).class">
<div class="bar" <div class="bar"
:style="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).style"> :style="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).style">
<div class="progress"></div> <div class="progress">
<small>@#parseInt(server.State?server.State.DiskUsed/server.Host.DiskTotal*100:0)#@%</small>
</div>
</div> </div>
</div> </div>
</div> </div>

4
resource/template/theme-hotaru/home.html
View File

@ -17,7 +17,7 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.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" href="/static/theme-hotaru/css/core.css?v202012121912" type="text/css"> <link rel="stylesheet" href="/static/theme-hotaru/css/core.css?v202012121912" type="text/css">
<link rel="stylesheet" href="/static/theme-hotaru/css/main.css?v202012202136" type="text/css"> <link rel="stylesheet" href="/static/theme-hotaru/css/main.css?v202012202312" type="text/css">
<link rel="stylesheet" href="/static/theme-hotaru/css/darkmode.css?v202012121912" type="text/css"> <link rel="stylesheet" href="/static/theme-hotaru/css/darkmode.css?v202012121912" type="text/css">
{{if ts .CustomCSS}} {{if ts .CustomCSS}}
{{tag "style"}} {{tag "style"}}
@ -93,7 +93,7 @@
<td> <td>
<div v-if="server.State" <div v-if="server.State"
:class="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).class"> :class="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).class">
<div <div class="bar"
:style="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).style"> :style="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).style">
<small>@#parseInt(server.State?server.State.DiskUsed/server.Host.DiskTotal*100:0)#@%</small> <small>@#parseInt(server.State?server.State.DiskUsed/server.Host.DiskTotal*100:0)#@%</small>
</div> </div>