优化default和server status主题 (#363)

This commit is contained in:
nap0o 2024-06-14 06:02:55 -04:00 committed by GitHub
parent a9da084711
commit c3fa4cbbee
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 636 additions and 557 deletions

File diff suppressed because one or more lines are too long

View File

@ -24,6 +24,9 @@
<i :class="item.icon + ' icon'"></i>@#item.name#@ <i :class="item.icon + ' icon'"></i>@#item.name#@
<i class="check icon" v-if="preferredTemplate === item.key"></i> <i class="check icon" v-if="preferredTemplate === item.key"></i>
</a> </a>
<a v-if="defaultTemplate === 'custom'" @click="toggleTemplate('custom')" class="item">
<i class="expand icon"></i>Custom
</a>
</div> </div>
</div> </div>
{{ end }} {{ end }}

View File

@ -7,19 +7,20 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta content="telephone=no" name="format-detection"> <meta content="telephone=no" name="format-detection">
<title>{{.Title}}</title> <title>{{.Title}}</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.1/dist/semantic.min.css"> <link rel="shortcut icon" type="image/png" href="/static/logo.svg" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-logos@0.17/assets/font-logos.css"> <link rel="stylesheet" href="https://unpkg.com/semantic-ui@2.4.0/dist/semantic.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://unpkg.com/font-logos@1.2.0/assets/font-logos.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://unpkg.com/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="https://unpkg.com/flag-icons@7.2.3/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?v20240226"> <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" /> <script src="https://unpkg.com/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://unpkg.com/semantic-ui@2.4.0/dist/semantic.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.1/dist/semantic.min.js"></script> <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://unpkg.com/echarts@5.5.0/dist/echarts.min.js"></script>
<script src="/static/semantic-ui-alerts.min.js"></script> <script src="/static/semantic-ui-alerts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
<script src="/static/theme-default/js/mixin.js?v20240302"></script> <script src="/static/theme-default/js/mixin.js?v20240302"></script>
</head> </head>
<body> <body>
{{end}} {{end}}

File diff suppressed because it is too large Load Diff

View File

@ -27,6 +27,9 @@
<i :class="item.icon + ' icon'"></i>@#item.name#@ <i :class="item.icon + ' icon'"></i>@#item.name#@
<i class="check icon" v-if="preferredTemplate === item.key"></i> <i class="check icon" v-if="preferredTemplate === item.key"></i>
</a> </a>
<a v-if="defaultTemplate === 'custom'" @click="toggleTemplate('custom')" class="item">
<i class="expand icon"></i>Custom
</a>
</div> </div>
</div> </div>
{{ end }} {{ end }}

View File

@ -39,6 +39,11 @@
<i class="check icon" v-if="preferredTemplate === item.key"></i> <i class="check icon" v-if="preferredTemplate === item.key"></i>
</a> </a>
</li> </li>
<li v-if="defaultTemplate === 'custom'">
<a @click="toggleTemplate('custom')" class="item">
<i class="expand icon" style="font-size:1em"></i>Custom
</a>
</li>
</ul> </ul>
</li> </li>
{{ end }} {{ end }}

View File

@ -6,16 +6,22 @@
<meta charset="utf-8"> <meta charset="utf-8">
<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.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css"> <link rel="shortcut icon" type="image/png" href="/static/logo.svg" />
<link rel="stylesheet" href="/static/theme-server-status/css/bootstrap-theme.min.css"> <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.4.1/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap@3.4.1/dist/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="/static/theme-server-status/css/main.css?v20240407"> <link rel="stylesheet" href="/static/theme-server-status/css/main.css?v20240407">
<link rel="stylesheet" href="/static/theme-server-status/css/dark.css?v20240407"> <link rel="stylesheet" href="/static/theme-server-status/css/dark.css?v20240407">
<link rel="stylesheet" href="/static/theme-server-status/css/light.css?v20240407"> <link rel="stylesheet" href="/static/theme-server-status/css/light.css?v20240407">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css"> <link rel="stylesheet" href="https://unpkg.com/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-logos@0.17/assets/font-logos.css"> <link rel="stylesheet" href="https://unpkg.com/font-logos@1.2.0/assets/font-logos.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://unpkg.com/flag-icons@7.2.3/css/flag-icons.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.1/dist/semantic.min.css"> <link rel="stylesheet" href="https://unpkg.com/semantic-ui@2.4.0/dist/semantic.min.css">
<link rel="shortcut icon" type="image/png" href="/static/logo.svg" /> <script src="https://unpkg.com/jquery@3.7.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://unpkg.com/echarts@5.5.0/dist/echarts.min.js"></script>
<script src="/static/theme-server-status/js/world.js?v20240613"></script>
<script src="/static/theme-server-status/js/mixin.js?v20240302"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]> <!--[if lt IE 9]>
<script src="/static/theme-server-status/js/html5shiv.js"></script> <script src="/static/theme-server-status/js/html5shiv.js"></script>
@ -24,12 +30,13 @@
{{if ts .CustomCode}} {{if ts .CustomCode}}
{{.CustomCode|safe}} {{.CustomCode|safe}}
{{end}} {{end}}
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
<script src="/static/theme-server-status/js/mixin.js?v20240302"></script>
</head> </head>
<body> <body>
{{end}} {{end}}

View File

@ -27,10 +27,10 @@
</td> </td>
<td class="node-cell name center">@#node.name#@</td> <td class="node-cell name center">@#node.name#@</td>
<td class="node-cell os center"> <td class="node-cell os center">
<i v-if='node.os == "darwin"' class="apple icon"></i> <i v-if='getFontLogoClass(node.host.Platform) == "" && node.online' class="fl-tux"></i>
<i v-else-if='isWindowsPlatform(node.host.Platform)' class="windows icon"></i> <i v-else-if='isWindowsPlatform(node.host.Platform)' class="windows icon"></i>
<i v-else :class="'fl-' + getFontLogoClass(node.host.Platform)"></i> <i v-else :class="'fl-' + getFontLogoClass(node.host.Platform)"></i>
<span class="node-cell-os-text">@#node.os#@</span> <span class="node-cell-os-text">@#getPlatformName(node.os)#@</span>
</td> </td>
<td style="text-align: center;" class="node-cell location"> <td style="text-align: center;" class="node-cell location">
<i :class="'fi fi-' + node.location"></i> <i :class="'fi fi-' + node.location"></i>
@ -71,20 +71,23 @@
</span> </span>
<span class="node-cell-expand" v-if="node.host.CPU"> <span class="node-cell-expand" v-if="node.host.CPU">
<span class="node-cell-expand-label">CPU:</span> <span class="node-cell-expand-label">CPU:</span>
@#node.host.CPU.join(",")#@ @#node.host.CPU.join(",")#@ (@#node.cpu.percent#@%)
</span> </span>
<span class="node-cell-expand"> <span class="node-cell-expand">
<span class="node-cell-expand-label">{{tr "DiskUsed"}}:</span> <span class="node-cell-expand-label">{{tr "DiskUsed"}}:</span>
@#formatByteSize(node.state.DiskUsed)#@ / @#formatByteSize(node.host.DiskTotal)#@ @#formatByteSize(node.state.DiskUsed)#@ / @#formatByteSize(node.host.DiskTotal)#@ (@#node.hdd.percent#@%)
</span> </span>
<span class="node-cell-expand"> <span class="node-cell-expand">
<span class="node-cell-expand-label">{{tr "MemUsed"}}:</span> <span class="node-cell-expand-label">{{tr "MemUsed"}}:</span>
@#formatByteSize(node.state.MemUsed)#@ / @#formatByteSize(node.host.MemTotal)#@(@#toFixed2(node.state.MemUsed / node.host.MemTotal * 100)#@%) @#formatByteSize(node.state.MemUsed)#@ / @#formatByteSize(node.host.MemTotal)#@ (@#toFixed2(node.state.MemUsed / node.host.MemTotal * 100)#@%)
</span> </span>
<span class="node-cell-expand"> <span v-if="node.host.SwapTotal > 0" class="node-cell-expand">
<span class="node-cell-expand-label">{{tr "SwapUsed"}}:</span> <span class="node-cell-expand-label">{{tr "SwapUsed"}}:</span>
@#formatByteSize(node.state.SwapUsed)#@ / @#formatByteSize(node.host.SwapTotal)#@ @#formatByteSize(node.state.SwapUsed)#@ / @#formatByteSize(node.host.SwapTotal)#@
<span v-if="node.host.SwapTotal">(@#toFixed2(node.state.SwapUsed / node.host.SwapTotal * 100)#@%)</span> <span>(@#toFixed2(node.state.SwapUsed / node.host.SwapTotal * 100)#@%)</span>
</span>
<span v-else class="node-cell-expand">
<span class="node-cell-expand-label">{{tr "SwapUsed"}}: OFF</span>
</span> </span>
<span class="node-cell-expand"> <span class="node-cell-expand">
<span class="node-cell-expand-label">{{tr "NetTransfer"}}:</span> <span class="node-cell-expand-label">{{tr "NetTransfer"}}:</span>

View File

@ -30,10 +30,10 @@
</td> </td>
<td class="node-cell name center">@#node.name#@</td> <td class="node-cell name center">@#node.name#@</td>
<td class="node-cell os center"> <td class="node-cell os center">
<i v-if='node.os == "darwin"' class="apple icon"></i> <i v-if='getFontLogoClass(node.host.Platform) == "" && node.online' class="fl-tux"></i>
<i v-else-if='isWindowsPlatform(node.host.Platform)' class="windows icon"></i> <i v-else-if='isWindowsPlatform(node.host.Platform)' class="windows icon"></i>
<i v-else :class="'fl-' + getFontLogoClass(node.host.Platform)"></i> <i v-else :class="'fl-' + getFontLogoClass(node.host.Platform)"></i>
<span class="node-cell-os-text">@#node.os#@</span> <span class="node-cell-os-text">@#getPlatformName(node.os)#@</span>
</td> </td>
<td style="text-align: center;" class="node-cell location"> <td style="text-align: center;" class="node-cell location">
<i :class="'fi fi-' + node.location"></i> <i :class="'fi fi-' + node.location"></i>
@ -74,20 +74,19 @@
</span> </span>
<span class="node-cell-expand" v-if="node.host.CPU"> <span class="node-cell-expand" v-if="node.host.CPU">
<span class="node-cell-expand-label">CPU:</span> <span class="node-cell-expand-label">CPU:</span>
@#node.host.CPU.join(",")#@ @#node.host.CPU.join(",")#@ (@#node.cpu.percent#@%)
</span> </span>
<span class="node-cell-expand"> <span class="node-cell-expand">
<span class="node-cell-expand-label">{{tr "DiskUsed"}}:</span> <span class="node-cell-expand-label">{{tr "DiskUsed"}}:</span>
@#formatByteSize(node.state.DiskUsed)#@ / @#formatByteSize(node.host.DiskTotal)#@ @#formatByteSize(node.state.DiskUsed)#@ / @#formatByteSize(node.host.DiskTotal)#@ (@#node.hdd.percent#@%)
</span> </span>
<span class="node-cell-expand"> <span v-if="node.host.SwapTotal > 0" class="node-cell-expand">
<span class="node-cell-expand-label">{{tr "MemUsed"}}:</span>
@#formatByteSize(node.state.MemUsed)#@ / @#formatByteSize(node.host.MemTotal)#@(@#toFixed2(node.state.MemUsed / node.host.MemTotal * 100)#@%)
</span>
<span class="node-cell-expand">
<span class="node-cell-expand-label">{{tr "SwapUsed"}}:</span> <span class="node-cell-expand-label">{{tr "SwapUsed"}}:</span>
@#formatByteSize(node.state.SwapUsed)#@ / @#formatByteSize(node.host.SwapTotal)#@ @#formatByteSize(node.state.SwapUsed)#@ / @#formatByteSize(node.host.SwapTotal)#@
<span v-if="node.host.SwapTotal">(@#toFixed2(node.state.SwapUsed / node.host.SwapTotal * 100)#@%)</span> <span>(@#toFixed2(node.state.SwapUsed / node.host.SwapTotal * 100)#@%)</span>
</span>
<span v-else class="node-cell-expand">
<span class="node-cell-expand-label">{{tr "SwapUsed"}}: OFF</span>
</span> </span>
<span class="node-cell-expand"> <span class="node-cell-expand">
<span class="node-cell-expand-label">{{tr "NetTransfer"}}:</span> <span class="node-cell-expand-label">{{tr "NetTransfer"}}:</span>

View File

@ -195,6 +195,12 @@
isWindowsPlatform(str) { isWindowsPlatform(str) {
return str.includes('Windows') return str.includes('Windows')
}, },
getPlatformName(str){
if (str.toLowerCase().includes('opensuse')) {
return 'openSUSE';
}
return str;
},
getFontLogoClass(str) { getFontLogoClass(str) {
if (["almalinux", if (["almalinux",
"alpine", "alpine",
@ -241,6 +247,9 @@
> -1) { > -1) {
return str; return str;
} }
if (str == 'darwin') {
return 'apple';
}
if (['openwrt', 'linux', "immortalwrt"].indexOf(str) > -1) { if (['openwrt', 'linux', "immortalwrt"].indexOf(str) > -1) {
return 'tux'; return 'tux';
} }
@ -250,6 +259,9 @@
if (str == 'arch') { if (str == 'arch') {
return 'archlinux'; return 'archlinux';
} }
if (str.toLowerCase().includes('opensuse')) {
return 'opensuse';
}
return ''; return '';
}, },
secondToDate(s) { secondToDate(s) {
@ -276,6 +288,9 @@
}, },
formatPercents(live,percent) { formatPercents(live,percent) {
//if(!live) { percent = 0; } //if(!live) { percent = 0; }
if (isNaN(percent)) {
percent = 0;
}
if (percent <= 0) { if (percent <= 0) {
percent = 0; percent = 0;
} }