improve: status-server主题日常优化 (#432)

* improve: status-server主题日常优化
1. 首页账单信息:价格设置成“-1”前台展示为”PAYG“,自动续期(autoRenewal)功能增加支持付费周期yr,mo;
2. 当未获取到国旗图标时,默认彩虹旗;
3. 当未获取到os(操作系统)信息时,默认linux
4. 一些其他优化

* 修改表达不准确的语言文件
This commit is contained in:
nap0o 2024-10-07 23:39:44 -04:00 committed by GitHub
parent 08aaea8244
commit 937696c26d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 101 additions and 93 deletions

View File

@ -425,7 +425,7 @@ other = "活动"
other = "版本"
[NetSpeed]
other = "网"
other = "网"
[Uptime]
other = "在线"

View File

@ -425,7 +425,7 @@ other = "活動"
other = "版本"
[NetSpeed]
other = "網"
other = "網"
[Uptime]
other = "在線"

View File

@ -9,7 +9,7 @@ body[theme="dark"] .navbar .navbar-brand {
}
body[theme="dark"] .navbar .navbar-nav li.pc-active a,
body[theme="dark"] .navbar .navbar-nav li.m-active a{
body[theme="dark"] .navbar .navbar-nav li.m-active a {
color: rgba(73, 146, 255, 1);
}
@ -32,7 +32,7 @@ body[theme="dark"] .navbar .dropdown-menu > li > a:hover {
body[theme="dark"] .navbar .navbar-nav > .open > a:focus,
body[theme="dark"] .navbar .navbar-nav > .open > a:hover,
body[theme="dark"] .navbar .navbar-nav > .active > a,
body[theme="dark"] .navbar .navbar-nav > .open > a{
body[theme="dark"] .navbar .navbar-nav > .open > a {
background-image: none;
box-shadow: none;
background-color: transparent;
@ -58,7 +58,7 @@ body[theme="dark"] .table {
body[theme="dark"] .table > tbody > tr > td:before,
body[theme="dark"] .table > tfoot > tr > td:before,
body[theme="dark"] .table > thead > tr > td:before,
body[theme="dark"] .table > thead > tr.node-group-cell > th:before{
body[theme="dark"] .table > thead > tr.node-group-cell > th:before {
background-color: rgba(58, 62, 65, 1);
}
@ -74,7 +74,7 @@ body[theme="dark"] .table-striped tbody > tr.odd > th {
background-color: rgba(34, 35, 46, 1);
}
body[theme="dark"] .table-hover > tbody > tr:hover{
body[theme="dark"] .table-hover > tbody > tr:hover {
background-color: unset;
}
@ -83,11 +83,11 @@ body[theme="dark"] .table-hover > tbody > tr:not(.expandRow):hover > td {
}
/* expandRow展开部分样式 */
body[theme="dark"] .table > tbody > tr.expandRow.odd > td:before{
body[theme="dark"] .table > tbody > tr.expandRow.odd > td:before {
background-color: rgba(34, 35, 46, 1);
}
body[theme="dark"] .table > tbody > tr.expandRow.even > td:before{
body[theme="dark"] .table > tbody > tr.expandRow.even > td:before {
background-color: rgba(28, 29, 38, 1);
}
/* expandRow展开部分样式结束 */
@ -155,29 +155,29 @@ body[theme="dark"] footer p a:hover {
text-decoration: none;
}
body[theme="dark"] .modal-content{
body[theme="dark"] .modal-content {
background-color: rgba(28, 29, 38, 1);
color: #f1f1f1;
}
body[theme="dark"] #earthChartBox .modal-content{
body[theme="dark"] #earthChartBox .modal-content {
background-color: rgba(0, 0, 0, 1);
color: #f1f1f1;
}
body[theme="dark"] .modal-header{
body[theme="dark"] .modal-header {
border-bottom-color:#080808;
}
body[theme="dark"] .modal-header i.xclose{
body[theme="dark"] .modal-header i.xclose {
color: #f1f1f1;
}
body[theme="dark"] .toolbox i{
body[theme="dark"] .toolbox i {
color: rgba(241, 241, 241, 1);
background-color: rgba(0, 0, 0, 0.5);
}
body[theme="dark"] .network-box .network-box-header{
body[theme="dark"] .network-box .network-box-header {
border-bottom-color: rgba(110, 112, 121, 0.25);
}

View File

@ -86,7 +86,7 @@ body[theme="dark"] .table > thead > tr.node-group-tag > th:before {
body[theme="dark"] .table > tbody > tr > td:before,
body[theme="dark"] .table > tfoot > tr > td:before,
body[theme="dark"] .table > thead > tr > td:before,
body[theme="dark"] .table > thead > tr.node-group-cell > th:before{
body[theme="dark"] .table > thead > tr.node-group-cell > th:before {
/** border-bottom 颜色 **/
background-color: rgba(155, 155, 155, 0.1);
}
@ -96,11 +96,11 @@ body[theme="dark"] .table-hover > tbody > tr:not(.expandRow):hover > td {
}
/* expandRow展开部分样式 */
body[theme="dark"] .table > tbody > tr.expandRow.odd > td:before{
body[theme="dark"] .table > tbody > tr.expandRow.odd > td:before {
background-color: unset;
}
body[theme="dark"] .table > tbody > tr.expandRow.even > td:before{
body[theme="dark"] .table > tbody > tr.expandRow.even > td:before {
background-color: unset;
}
/* expandRow展开部分样式结束 */

View File

@ -47,16 +47,16 @@ body[theme="light"] .navbar .navbar-nav .open .dropdown-menu > li > a {
color: rgba(0, 0, 0, 0.87);
}
body[theme="light"] .navbar .navbar-toggle{
body[theme="light"] .navbar .navbar-toggle {
border:none;
padding:9px 12px;
}
body[theme="light"] .navbar .navbar-collapse{
body[theme="light"] .navbar .navbar-collapse {
border-color:rgba(0, 0, 0, 0.085);
}
body[theme="light"] .navbar .navbar-toggle .icon-bar{
body[theme="light"] .navbar .navbar-toggle .icon-bar {
background-color: rgba(0, 0, 0, 0.87);
}
@ -95,12 +95,12 @@ body[theme="light"] .table-striped tbody > tr.odd > th {
body[theme="light"] .table > tbody > tr > td:before,
body[theme="light"] .table > tfoot > tr > td:before,
body[theme="light"] .table > thead > tr > td:before,
body[theme="light"] .table > thead > tr.node-group-cell > th:before{
body[theme="light"] .table > thead > tr.node-group-cell > th:before {
background-color: rgba(221, 221, 221, 1);
}
body[theme="light"] .table > tbody > tr.expandRow > td:before,
body[theme="light"] .table > thead > tr.node-group-tag > th:before{
body[theme="light"] .table > thead > tr.node-group-tag > th:before {
background-color: rgba(255, 255, 255, 1);
}
@ -174,35 +174,35 @@ body[theme="light"] footer p a:hover {
text-decoration: none;
}
body[theme="light"] .toolbox i{
body[theme="light"] .toolbox i {
color: rgba(94, 114, 228, .9);
background-color: rgba(255, 255, 255, .5);
box-shadow:0 .125rem .25rem rgba(0, 0, 0, .15) !important;
}
body[theme="light"] .toolbox .mytoggle .tooltip-inner{
body[theme="light"] .toolbox .mytoggle .tooltip-inner {
background: #ffffff;
box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .15) !important;
}
body[theme="light"] .toolbox .mytoggle li:hover{
body[theme="light"] .toolbox .mytoggle li:hover {
background-color:#e6e6e6;
}
body[theme="light"] .modal-content{
body[theme="light"] .modal-content {
background-color: rgba(249, 249, 249, 1);
color: rgba(0, 0, 0, 0.87);
}
body[theme="light"] .modal-header{
body[theme="light"] .modal-header {
border-bottom-color:#f1f1f1;
}
body[theme="light"] .modal-header i.xclose{
body[theme="light"] .modal-header i.xclose {
color: rgba(0, 0, 0, 0.87);
}
body[theme="light"] .network-box .network-box-header{
body[theme="light"] .network-box .network-box-header {
border-bottom-color: rgba(224, 230, 241, 0.6);
}

View File

@ -36,16 +36,16 @@ body[theme="light"] .navbar .dropdown-menu {
body[theme="light"] .navbar .dropdown-menu > li > a:focus,
body[theme="light"] .navbar .dropdown-menu > li > a:hover{
body[theme="light"] .navbar .dropdown-menu > li > a:hover {
/** 二级导航鼠标悬停选中背景 **/
background-color: rgba(0, 0, 0, .05);
}
body[theme="light"] .navbar .navbar-collapse{
body[theme="light"] .navbar .navbar-collapse {
border-color:rgba(0, 0, 0, 0.085);
}
body[theme="light"] .navbar .navbar-toggle .icon-bar{
body[theme="light"] .navbar .navbar-toggle .icon-bar {
background-color: rgba(0, 0, 0, 0.9);
}
@ -87,7 +87,7 @@ body[theme="light"] .table > thead > tr.node-group-tag > th:before {
body[theme="light"] .table > tbody > tr > td:before,
body[theme="light"] .table > tfoot > tr > td:before,
body[theme="light"] .table > thead > tr > td:before,
body[theme="light"] .table > thead > tr.node-group-cell > th:before{
body[theme="light"] .table > thead > tr.node-group-cell > th:before {
/** border-bottom 颜色 **/
background-color: rgba(0, 0, 0, 0.075);
}
@ -97,11 +97,11 @@ body[theme="light"] .table-hover > tbody > tr:not(.expandRow):hover > td {
}
/* expandRow展开部分样式 */
body[theme="light"] .table > tbody > tr.expandRow.odd > td:before{
body[theme="light"] .table > tbody > tr.expandRow.odd > td:before {
background-color: unset;
}
body[theme="light"] .table > tbody > tr.expandRow.even > td:before{
body[theme="light"] .table > tbody > tr.expandRow.even > td:before {
background-color: unset;
}
/* expandRow展开部分样式结束 */
@ -123,7 +123,7 @@ body[theme="light"] .progress-bar-danger {
background-image: linear-gradient(to right, rgba(255, 70, 0, 0.6) 0, rgba(201, 48, 44,0.6) 100%);
}
body[theme="light"] .toolbox i{
body[theme="light"] .toolbox i {
background-color: rgba(255, 255, 255, .55);
}

View File

@ -237,8 +237,8 @@ tr.accordion-toggle{
}
.node-cell.network {
min-width: 110px;
max-width: 110px;
min-width: 100px;
max-width: 100px;
}
.node-cell.traffic {
@ -340,11 +340,11 @@ td.ping-network-quality {
/* 服务页 正文结束 */
/* 网络页 正文*/
.network-box .btn-group.open .dropdown-toggle{
.network-box .btn-group.open .dropdown-toggle {
box-shadow:unset;
}
.network-box .network-box-header{
.network-box .network-box-header {
font-size: 18px;
padding: 5px 0px 15px 5px;
cursor: pointer;
@ -365,12 +365,12 @@ td.ping-network-quality {
display: none;
}
.network-box .network-box-header .dropdown-menu li{
.network-box .network-box-header .dropdown-menu li {
height: 2em;
cursor: pointer;
}
.network-box .network-box-header .dropdown-menu li.input-group{
.network-box .network-box-header .dropdown-menu li.input-group {
margin: 0 auto;
display: flex;
position: sticky;
@ -378,7 +378,7 @@ td.ping-network-quality {
z-index: 99999997;
}
.network-box .network-box-header .dropdown-menu li.input-group input{
.network-box .network-box-header .dropdown-menu li.input-group input {
width: 100%;
height: 2em;
border-top: none;
@ -407,7 +407,7 @@ td.ping-network-quality {
margin: 18px 0px 15px 0px;
}
.network-box .chartTitle i.chartCountryCode{
.network-box .chartTitle i.chartCountryCode {
font-size: 16px;
border-radius: 12.5%;
}
@ -415,17 +415,17 @@ td.ping-network-quality {
/* 网络页 正文结束 */
/* 地图版服务器分布图 */
#mapChartBox{
#mapChartBox {
z-index: 999999999;
padding-left: 0 !important;
}
.modal-open .modal{
.modal-open .modal {
overflow-x: hidden;
overflow-y: hidden;
}
.modal-dialog-centered{
.modal-dialog-centered {
margin: 0 auto;
width: 100%;
max-width: 100%;
@ -435,7 +435,7 @@ td.ping-network-quality {
min-height: calc(100%) /* 确保模态框占据整个视口高度 */
}
.modal-content{
.modal-content {
display: flex;
flex-direction: column;
pointer-events: auto;
@ -443,15 +443,15 @@ td.ping-network-quality {
border: none;
}
.modal-header{
.modal-header {
position: relative;
}
.modal-header h4{
.modal-header h4 {
cursor: pointer;
}
.modal-header i.xclose{
.modal-header i.xclose {
cursor: pointer;
position: absolute;
font-size: 30px;
@ -459,32 +459,32 @@ td.ping-network-quality {
right: 10px;
}
.modal-body{
.modal-body {
padding: 0px;
}
a.template-item, a.cdn-item{
a.template-item, a.cdn-item {
display: block;
}
footer{
footer {
padding-bottom: 20px;
}
footer p{
footer p {
text-align: center;
font-size: 10px;
}
@media only screen and (max-width: 1200px) {
.accordian-body{
.accordian-body {
margin: 5px 0px 5px 10px;
}
table.monitor-detail{
table.monitor-detail {
margin:0px 0px 2px 0px;
}
.table .network-thead-tr th,
.table .node-group-tag th{
.table .node-group-tag th {
font-size:16px;
padding-bottom:6px;
}
@ -512,10 +512,10 @@ footer p{
padding: 0;
margin-bottom: 10px;
}
footer{
footer {
padding-bottom: 10px;
}
.cycle-transfer-stats .dataTables_wrapper{
.cycle-transfer-stats .dataTables_wrapper {
margin-bottom: -10px;
}
.navbar .navbar-nav .open .dropdown-menu>li>a {
@ -537,54 +537,58 @@ footer p{
}
.node-cell.os,
.node-cell.uptime,
.node-cell.traffic{
.node-cell.traffic {
display: none;
visibility: hidden;
}
.node-cell.location{
.node-cell.location {
display: table-cell;
visibility: visible;
}
.node-cell-os-text,.node-cell-location-text{
.node-cell-os-text,.node-cell-location-text {
display: none;
visibility: hidden;
}
.node-cell.network {
min-width: 95px;
max-width: 95px;
}
.node-cell.remaining {
min-width: 75px;
max-width: 75px;
}
.accordian-body{
.accordian-body {
margin: 5px 0px 5px 10px;
}
table.monitor-detail{
table.monitor-detail {
margin:0px 0px 2px 0px;
}
.table .network-thead-tr th,
.table .node-group-tag th{
.table .node-group-tag th {
font-size:14px;
padding-bottom:6px;
}
.table tr.network td{
.table tr.network td {
font-size: 12px;
}
.service-status .service-status-th{
.service-status .service-status-th {
min-width:30px;
}
.service-status .delay-today{
.service-status .delay-today {
margin-top:4px;
justify-content: center;
}
.service-status .delay-today i{
.service-status .delay-today i {
margin-right:0px;
}
.service-status .delay-today-text{
.service-status .delay-today-text {
display: none;
visibility: hidden;
}
.service-status .service-averagelatency-th{
.service-status .service-averagelatency-th {
min-width:70px;
}
.service-status .service-30daysonline-th{
.service-status .service-30daysonline-th {
min-width:75px;
}
.toolbox {
@ -602,7 +606,7 @@ footer p{
font-size: 16px;
margin: 10px 0px 10px 0px;
}
.network-box .chartTitle i.chartCountryCode{
.network-box .chartTitle i.chartCountryCode {
font-size: 15px;
border-radius: 12.5%;
}

View File

@ -28,8 +28,8 @@
</span>
</aside>
<template v-if="semiTransparent">
<link rel="stylesheet" href="/static/theme-server-status/css/light.plus.css?v20240807">
<link rel="stylesheet" href="/static/theme-server-status/css/dark.plus.css?v20240807">
<link rel="stylesheet" href="/static/theme-server-status/css/light.plus.css?v20241008">
<link rel="stylesheet" href="/static/theme-server-status/css/dark.plus.css?v20241008">
</template>
</div>
{{if ts .CustomCode}}{{.CustomCode|safe}}{{end}}

View File

@ -26,9 +26,9 @@
<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>
<link rel="stylesheet" href="/static/theme-server-status/css/main.css?v20240929">
<link rel="stylesheet" href="/static/theme-server-status/css/dark.css?v202409029">
<link rel="stylesheet" href="/static/theme-server-status/css/light.css?v20240916">
<link rel="stylesheet" href="/static/theme-server-status/css/main.css?v20241008">
<link rel="stylesheet" href="/static/theme-server-status/css/dark.css?v20241008">
<link rel="stylesheet" href="/static/theme-server-status/css/light.css?v20241008">
<script src="/static/theme-server-status/js/mixin.js?v20240915"></script>
</head>
<body>

View File

@ -32,15 +32,16 @@
<i v-if='isWindowsPlatform(node.host.Platform)' class="windows icon"></i>
<i v-else-if='getFontLogoClass(node.host.Platform) == "" && node.stateuptime > 0' class="fl-tux"></i>
<i v-else :class="'fl-' + getFontLogoClass(node.host.Platform)"></i>
<span class="node-cell-os-text">@#getPlatformName(node.os)#@</span>
<span class="node-cell-os-text">@#getPlatformName(node.os) === '' && node.stateuptime > 0 ? 'linux' : getPlatformName(node.os)#@</span>
</td>
<td style="text-align: center;" class="node-cell location">
<i :class="'fi fi-' + node.location"></i>
<span class="node-cell-location-text text-uppercase">@#node.location#@</span>
<td class="node-cell location center">
<i :class="'fi fi-' + (node.stateuptime > 0 ? (node.location || 'rb') : '')"></i>
<span class="node-cell-location-text text-uppercase">@#node.stateuptime > 0 ? (node.location || 'RB') : ''#@</span>
</td>
<td v-if="nodesNoTag.some(item => item.additional && item.additional.price && Object.keys(item.additional.price).length > 0)" class="node-cell price center">
<template v-if="node.additional && node.additional.price">
<span v-if="node.additional.price.amount == 0" class="node-cell-price-text">Free</span>
<span v-if="node.additional.price.amount == 0" class="node-cell-price-text">FREE</span>
<span v-else-if="node.additional.price.amount == -1" class="node-cell-price-text">PAYG</span>
<span v-else class="node-cell-price-text">@#node.additional.price.amount#@@#(node.additional.price.cycle ? '/' + node.additional.price.cycle : '')#@</span>
</template>
</td>
@ -89,8 +90,8 @@
<div style="display: flex;left-items: center;justify-content: center;flex-direction: column; max-width: 89vw">
<span class="node-cell-expand">
<span class="node-cell-expand-label">{{tr "Platform"}}:</span>
@#node.host.Platform#@-@#node.host.PlatformVersion#@
[<span v-if="node.host.Virtualization">@#node.host.Virtualization#@:</span>@#node.host.Arch#@]
<span v-if="node.host.Platform">@#node.host.Platform#@@#node.host.PlatformVersion ? '-' + node.host.PlatformVersion : ''#@</span>
<span v-if="node.host.Arch">[@#node.host.Virtualization ? node.host.Virtualization + ':' : ''#@@#node.host.Arch#@]</span>
</span>
<span class="node-cell-expand" v-if="node.host.CPU">
<span class="node-cell-expand-label">CPU:</span>

View File

@ -35,15 +35,16 @@
<i v-if='isWindowsPlatform(node.host.Platform)' class="windows icon"></i>
<i v-else-if='getFontLogoClass(node.host.Platform) == "" && node.stateuptime > 0' class="fl-tux"></i>
<i v-else :class="'fl-' + getFontLogoClass(node.host.Platform)"></i>
<span class="node-cell-os-text">@#getPlatformName(node.os)#@</span>
<span class="node-cell-os-text">@#getPlatformName(node.os) === '' && node.stateuptime > 0 ? 'linux' : getPlatformName(node.os)#@</span>
</td>
<td style="text-align: center;" class="node-cell location">
<i :class="'fi fi-' + node.location"></i>
<span class="node-cell-location-text text-uppercase">&nbsp;@#node.location#@</span>
<td class="node-cell location center">
<i :class="'fi fi-' + (node.stateuptime > 0 ? (node.location || 'rb') : '')"></i>
<span class="node-cell-location-text text-uppercase">@#node.stateuptime > 0 ? (node.location || 'RB') : ''#@</span>
</td>
<td v-if="group.data.some(item => item.additional && item.additional.price && Object.keys(item.additional.price).length > 0)" class="node-cell price center">
<template v-if="node.additional && node.additional.price">
<span v-if="node.additional.price.amount == 0" class="node-cell-price-text">Free</span>
<span v-if="node.additional.price.amount == 0" class="node-cell-price-text">FREE</span>
<span v-else-if="node.additional.price.amount == -1" class="node-cell-price-text">PAYG</span>
<span v-else class="node-cell-price-text">@#node.additional.price.amount#@@#(node.additional.price.cycle ? '/' + node.additional.price.cycle : '')#@</span>
</template>
</td>
@ -92,8 +93,8 @@
<div style="display: flex;left-items: center;justify-content: center;flex-direction: column; max-width: 89vw">
<span class="node-cell-expand">
<span class="node-cell-expand-label">{{tr "Platform"}}:</span>
@#node.host.Platform#@-@#node.host.PlatformVersion#@
[<span v-if="node.host.Virtualization">@#node.host.Virtualization#@:</span>@#node.host.Arch#@]
<span v-if="node.host.Platform">@#node.host.Platform#@@#node.host.PlatformVersion ? '-' + node.host.PlatformVersion : ''#@</span>
<span v-if="node.host.Arch">[@#node.host.Virtualization ? node.host.Virtualization + ':' : ''#@@#node.host.Arch#@]</span>
</span>
<span class="node-cell-expand" v-if="node.host.CPU">
<span class="node-cell-expand-label">CPU:</span>

View File

@ -819,6 +819,7 @@
switch (cycle) {
case '月':
case 'mo':
case 'month':
case 'monthly':
case 'm':
@ -834,6 +835,7 @@
case 'h':
return "H";
case '年':
case 'yr':
case 'year':
case 'annually':
case 'y':