server-status主题优化 (#405)
* server-status主题优化 1.前台增加半透明样式切换按钮，同时适配了深色和浅色模式 2.右小角功能区增加收纳，点击展开，滚动页面关闭 3.vps世界分布地图全屏展示 4.修改默认页底版权信息位置，从跟随container box修改为默认置于页面底部，container box到底底部后再跟随 5.修改container box默认宽度和最大宽度，适配高分辨率显示器 6.优化样式文件结构,删除无用的样式文件 7.一些小优化 * 修改默认背景图 * 修改背景图片 * 1.echart图表适配半透明样式切换 2.echart图表移动端设置更细折线 3.修改半透明样式下的默认背景图 * echart Y轴移动端更细刻度线 * fixbug * 修改半透明样式默认背景图片为本地调用
This commit is contained in:
nap0o
GitHub
parent
6b05a21641
commit
d9097540c3
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
48
resource/static/theme-server-status/css/dark.css
vendored
Normal file → Executable file
48
resource/static/theme-server-status/css/dark.css
vendored
Normal file → Executable file
@ -1,6 +1,6 @@
|
|||||||
body[theme="dark"] {
|
body[theme="dark"] {
|
||||||
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
|
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
|
||||||
background: rgba(49, 54, 59, 1);
|
background-color: rgba(49, 54, 59, 1);
|
||||||
color: #f1f1f1;
|
color: #f1f1f1;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -9,7 +9,6 @@ body[theme="dark"] .navbar .navbar-brand {
|
|||||||
}
|
}
|
||||||
|
|
||||||
body[theme="dark"] .navbar .dropdown-menu {
|
body[theme="dark"] .navbar .dropdown-menu {
|
||||||
list-style-image: initial;
|
|
||||||
background-color: rgba(23, 26, 30, 1);
|
background-color: rgba(23, 26, 30, 1);
|
||||||
border-color: rgba(49, 54, 59, 1);
|
border-color: rgba(49, 54, 59, 1);
|
||||||
box-shadow: rgba(0, 0, 0, 0.18) 0px 6px 12px;
|
box-shadow: rgba(0, 0, 0, 0.18) 0px 6px 12px;
|
||||||
@ -29,9 +28,9 @@ body[theme="dark"] .navbar .navbar-nav > .open > a:focus,
|
|||||||
body[theme="dark"] .navbar .navbar-nav > .open > a:hover,
|
body[theme="dark"] .navbar .navbar-nav > .open > a:hover,
|
||||||
body[theme="dark"] .navbar .navbar-nav > .active > a,
|
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 !important;
|
background-image: none;
|
||||||
box-shadow: none !important;
|
box-shadow: none;
|
||||||
background-color: transparent !important;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
body[theme="dark"] .navbar .navbar-nav .open .dropdown-menu > li > a {
|
body[theme="dark"] .navbar .navbar-nav .open .dropdown-menu > li > a {
|
||||||
@ -39,7 +38,6 @@ body[theme="dark"] .navbar .navbar-nav .open .dropdown-menu > li > a {
|
|||||||
}
|
}
|
||||||
|
|
||||||
body[theme="dark"] .content {
|
body[theme="dark"] .content {
|
||||||
background-image: initial;
|
|
||||||
background-color: rgba(28, 29, 38, 1);
|
background-color: rgba(28, 29, 38, 1);
|
||||||
border: none;
|
border: none;
|
||||||
box-shadow: rgba(0, 0, 0, 0.5) 0 0.625em 2em;
|
box-shadow: rgba(0, 0, 0, 0.5) 0 0.625em 2em;
|
||||||
@ -48,7 +46,6 @@ body[theme="dark"] .content {
|
|||||||
}
|
}
|
||||||
|
|
||||||
body[theme="dark"] .table {
|
body[theme="dark"] .table {
|
||||||
background-image: initial;
|
|
||||||
background-color: rgba(28, 29, 38, 1);
|
background-color: rgba(28, 29, 38, 1);
|
||||||
border-color: #545b5e;
|
border-color: #545b5e;
|
||||||
}
|
}
|
||||||
@ -69,7 +66,6 @@ body[theme="dark"] .table-striped tbody > tr.even > th {
|
|||||||
body[theme="dark"] .table-striped tbody > tr,
|
body[theme="dark"] .table-striped tbody > tr,
|
||||||
body[theme="dark"] .table-striped tbody > tr.odd > td,
|
body[theme="dark"] .table-striped tbody > tr.odd > td,
|
||||||
body[theme="dark"] .table-striped tbody > tr.odd > th {
|
body[theme="dark"] .table-striped tbody > tr.odd > th {
|
||||||
/* background-color: rgba(28, 29, 38, 1); 282B2E*/
|
|
||||||
background-color: rgba(34, 35, 46, 1);
|
background-color: rgba(34, 35, 46, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -83,7 +79,6 @@ body[theme="dark"] .table-hover > tbody > tr:not(.expandRow):hover > td {
|
|||||||
|
|
||||||
/* expandRow展开部分样式 */
|
/* expandRow展开部分样式 */
|
||||||
body[theme="dark"] .table > tbody > tr.expandRow.odd > td:before{
|
body[theme="dark"] .table > tbody > tr.expandRow.odd > td:before{
|
||||||
/* background-color: rgba(28, 29, 38, 1); 282B2E*/
|
|
||||||
background-color: rgba(34, 35, 46, 1);
|
background-color: rgba(34, 35, 46, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -102,35 +97,35 @@ body[theme="dark"] .progress-bar {
|
|||||||
}
|
}
|
||||||
|
|
||||||
body[theme="dark"] .progress-bar-success {
|
body[theme="dark"] .progress-bar-success {
|
||||||
background-image: linear-gradient(#4d853a 0, #367e36 100%);
|
background-image: linear-gradient(to right, rgba(77, 133, 58, 1) 0, rgba(54, 126, 54, 1) 100%);
|
||||||
}
|
|
||||||
|
|
||||||
body[theme="dark"] .progress-offline .progress-bar-success {
|
|
||||||
background-image: linear-gradient(#808080 0, #808080 100%);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body[theme="dark"] .progress-bar-warning {
|
body[theme="dark"] .progress-bar-warning {
|
||||||
background-image: linear-gradient(#995f0d 0, #b5710f 100%);
|
background-image: linear-gradient(to right, rgba(153, 95, 13, 1) 0, rgba(181, 113, 15, 1) 100%);
|
||||||
}
|
|
||||||
|
|
||||||
body[theme="dark"] .progress-offline .progress-bar-warning {
|
|
||||||
background-image: linear-gradient(#808080 0, #808080 100%);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body[theme="dark"] .progress-bar-danger {
|
body[theme="dark"] .progress-bar-danger {
|
||||||
background-image: linear-gradient(#942320 0, #a12623 100%);
|
background-image: linear-gradient(to right, rgba(145, 35, 32, 1) 0, rgba(161, 38, 35, 1) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
body[theme="dark"] .progress-offline .progress-bar-success {
|
||||||
|
background-image: linear-gradient(rgba(128, 128, 128, 1) 0, rgba(128, 128, 128, 1) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
body[theme="dark"] .progress-offline .progress-bar-warning {
|
||||||
|
background-image: linear-gradient(rgba(128, 128, 128, 1) 0, rgba(128, 128, 128, 1) 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
body[theme="dark"] .progress-offline .progress-bar-danger {
|
body[theme="dark"] .progress-offline .progress-bar-danger {
|
||||||
background-image: linear-gradient(#808080 0, #808080 100%);
|
background-image: linear-gradient(rgba(128, 128, 128, 1) 0, rgba(128, 128, 128, 1) 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
body[theme="dark"] .node-cell.status .status-icon.online {
|
body[theme="dark"] .node-cell.status .status-icon.online {
|
||||||
background-image: linear-gradient(#4d853a 0, #367e36 100%);
|
background-image: linear-gradient(rgba(77, 133, 58, 1) 0, rgba(54, 126, 54, 1) 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
body[theme="dark"] .node-cell.status .status-icon.offline {
|
body[theme="dark"] .node-cell.status .status-icon.offline {
|
||||||
background-image: linear-gradient(#9b2522 0, #9b2522 100%);
|
background-image: linear-gradient(rgba(155, 37, 34, 1) 0, rgba(161, 38, 35, 1) 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
body[theme="dark"] .service-status .danger {
|
body[theme="dark"] .service-status .danger {
|
||||||
@ -160,11 +155,16 @@ body[theme="dark"] .modal-content{
|
|||||||
color: #f1f1f1;
|
color: #f1f1f1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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;
|
border-bottom-color:#080808;
|
||||||
}
|
}
|
||||||
|
|
||||||
body[theme="dark"] .modal-header i{
|
body[theme="dark"] .modal-header i.xclose{
|
||||||
color: #f1f1f1;
|
color: #f1f1f1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
123
resource/static/theme-server-status/css/dark.plus.css
vendored
Normal file
123
resource/static/theme-server-status/css/dark.plus.css
vendored
Normal file
@ -0,0 +1,123 @@
|
|||||||
|
body[theme="dark"]::before {
|
||||||
|
content: "";
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
background-image: url(/static/theme-server-status/img/bg.jpg);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: 50% 50%;
|
||||||
|
background-size: cover;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
body[theme="dark"] {
|
||||||
|
background-color: rgba(0, 0, 0, 0.8);
|
||||||
|
color: #f1f1f1;
|
||||||
|
}
|
||||||
|
|
||||||
|
body[theme="dark"] .navbar {
|
||||||
|
/** 顶部导航条 背景 **/
|
||||||
|
background-color: rgba(0, 0, 0, 0.8);
|
||||||
|
box-shadow: none;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
body[theme="dark"] .navbar .navbar-brand {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
body[theme="dark"] .navbar .dropdown-menu {
|
||||||
|
/** 二级导航下拉 背景 **/
|
||||||
|
background-color: rgba(0, 0, 0, 0.85);
|
||||||
|
border-top: none;
|
||||||
|
border-color: #31363b;
|
||||||
|
box-shadow: rgba(0, 0, 0, 0.18) 0px 6px 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body[theme="dark"] .navbar .dropdown-menu > li > a {
|
||||||
|
color: #c8c3bc;
|
||||||
|
}
|
||||||
|
|
||||||
|
body[theme="dark"] .navbar .dropdown-menu > li > a:focus,
|
||||||
|
body[theme="dark"] .navbar .dropdown-menu > li > a:hover {
|
||||||
|
/** 二级导航鼠标悬停选中背景 **/
|
||||||
|
background-color: rgba(0, 0, 0, 0.95);
|
||||||
|
background-image: linear-gradient(#1c1d26 0, #1c1d26 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
body[theme="dark"] .navbar .navbar-nav .open .dropdown-menu > li > a {
|
||||||
|
color: #f1f1f1;
|
||||||
|
}
|
||||||
|
|
||||||
|
body[theme="dark"] .table,
|
||||||
|
body[theme="dark"] .table-condensed > tbody > tr,
|
||||||
|
body[theme="dark"] .table-hover > tbody > tr,
|
||||||
|
body[theme="dark"] .table-hover > tbody > tr:hover,
|
||||||
|
body[theme="dark"] .table-striped tbody > tr.even,
|
||||||
|
body[theme="dark"] .table-striped tbody > tr.odd,
|
||||||
|
body[theme="dark"] .table-striped tbody > tr.even > td,
|
||||||
|
body[theme="dark"] .table-striped tbody > tr.even > th,
|
||||||
|
body[theme="dark"] .table-striped tbody > tr.odd > td,
|
||||||
|
body[theme="dark"] .table-striped tbody > tr.odd > th,
|
||||||
|
body[theme="dark"] .table-striped tbody > tr.even > td:hover,
|
||||||
|
body[theme="dark"] .table-striped tbody > tr.even > th:hover,
|
||||||
|
body[theme="dark"] .table-striped tbody > tr.odd > td:hover,
|
||||||
|
body[theme="dark"] .table-striped tbody > tr.odd > th:hover,
|
||||||
|
body[theme="dark"] .table-striped tbody > tr.expandRow:hover {
|
||||||
|
background-color: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body[theme="dark"] .content {
|
||||||
|
/** 主box 背景 **/
|
||||||
|
background-color: rgba(28, 29, 38, 0.8);
|
||||||
|
border: none;
|
||||||
|
box-shadow: rgba(0, 0, 0, 0.5) 0 0.625em 2em;
|
||||||
|
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0 0.625em 2em;
|
||||||
|
box-shadow: rgba(0, 0, 0, 0.5) 0 0.625em 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
body[theme="dark"] .table > thead > tr.node-group-tag > th,
|
||||||
|
body[theme="dark"] .table > thead > tr.node-group-tag > th:before {
|
||||||
|
background: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
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{
|
||||||
|
/** border-bottom 颜色 **/
|
||||||
|
background-color: rgba(155, 155, 155, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
body[theme="dark"] .table-hover > tbody > tr:not(.expandRow):hover > td {
|
||||||
|
background-color: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* expandRow展开部分样式 */
|
||||||
|
body[theme="dark"] .table > tbody > tr.expandRow.odd > td:before{
|
||||||
|
background-color: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
body[theme="dark"] .table > tbody > tr.expandRow.even > td:before{
|
||||||
|
background-color: unset;
|
||||||
|
}
|
||||||
|
/* expandRow展开部分样式结束 */
|
||||||
|
|
||||||
|
body[theme="dark"] .progress {
|
||||||
|
background-image: none;
|
||||||
|
background-color: rgba(255, 255, 255, 0.075);
|
||||||
|
}
|
||||||
|
|
||||||
|
body[theme="dark"] .progress-bar-success {
|
||||||
|
background-image: linear-gradient(to right, rgba(77, 133, 58, 0.9) 0, rgba(54, 126, 54, 0.9) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
body[theme="dark"] .progress-bar-warning {
|
||||||
|
background-image: linear-gradient(to right, rgba(153, 95, 13, 0.9) 0, rgba(181, 113, 15, 0.9) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
body[theme="dark"] .progress-bar-danger {
|
||||||
|
background-image: linear-gradient(to right, rgba(145, 35, 32, 0.8) 0, rgba(161, 38, 35, 0.8) 100%);
|
||||||
|
}
|
||||||
146
resource/static/theme-server-status/css/light.css
vendored
Normal file → Executable file
146
resource/static/theme-server-status/css/light.css
vendored
Normal file → Executable file
File diff suppressed because one or more lines are too long
134
resource/static/theme-server-status/css/light.plus.css
vendored
Normal file
134
resource/static/theme-server-status/css/light.plus.css
vendored
Normal file
@ -0,0 +1,134 @@
|
|||||||
|
body[theme="light"]::before {
|
||||||
|
content: "";
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
background-image: url(/static/theme-server-status/img/bg.jpg);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: 50% 50%;
|
||||||
|
background-size: cover;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
body[theme="light"] {
|
||||||
|
background-image: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
body[theme="light"]::after {
|
||||||
|
content: "";
|
||||||
|
position: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
body[theme="light"] .navbar {
|
||||||
|
/** 顶部导航条 背景 **/
|
||||||
|
background-color: rgba(255, 255, 255, 0.9);
|
||||||
|
border-bottom: 1px #cecece solid;
|
||||||
|
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
body[theme="light"] .navbar .dropdown-menu {
|
||||||
|
/** 二级导航下拉 **/
|
||||||
|
background-color: rgba(255, 255, 255, 0.8);
|
||||||
|
border-color: rgba(0, 0, 0, .05);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
body[theme="light"] .navbar .dropdown-menu > li > a:focus,
|
||||||
|
body[theme="light"] .navbar .dropdown-menu > li > a:hover{
|
||||||
|
/** 二级导航鼠标悬停选中背景 **/
|
||||||
|
background-color: rgba(0, 0, 0, .05);
|
||||||
|
}
|
||||||
|
|
||||||
|
body[theme="light"] .navbar .navbar-collapse{
|
||||||
|
border-color:rgba(0, 0, 0, 0.085);
|
||||||
|
}
|
||||||
|
|
||||||
|
body[theme="light"] .navbar .navbar-toggle .icon-bar{
|
||||||
|
background-color: rgba(0, 0, 0, 0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
body[theme="light"] .navbar .navbar-toggle:focus,
|
||||||
|
body[theme="light"] .navbar .navbar-toggle:hover {
|
||||||
|
background-color: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
body[theme="light"] .table,
|
||||||
|
body[theme="light"] .table-condensed > tbody > tr,
|
||||||
|
body[theme="light"] .table-hover > tbody > tr,
|
||||||
|
body[theme="light"] .table-hover > tbody > tr:hover,
|
||||||
|
body[theme="light"] .table-striped tbody > tr.even,
|
||||||
|
body[theme="light"] .table-striped tbody > tr.odd,
|
||||||
|
body[theme="light"] .table-striped tbody > tr.even > td,
|
||||||
|
body[theme="light"] .table-striped tbody > tr.even > th,
|
||||||
|
body[theme="light"] .table-striped tbody > tr.odd > td,
|
||||||
|
body[theme="light"] .table-striped tbody > tr.odd > th,
|
||||||
|
body[theme="light"] .table-striped tbody > tr.even > td:hover,
|
||||||
|
body[theme="light"] .table-striped tbody > tr.even > th:hover,
|
||||||
|
body[theme="light"] .table-striped tbody > tr.odd > td:hover,
|
||||||
|
body[theme="light"] .table-striped tbody > tr.odd > th:hover,
|
||||||
|
body[theme="light"] .table-striped tbody > tr.expandRow:hover {
|
||||||
|
background-color: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body[theme="light"] .content {
|
||||||
|
/** 主box 背景 **/
|
||||||
|
background-color: rgba(245, 245, 245, 0.8);
|
||||||
|
border: none;
|
||||||
|
box-shadow: rgba(0, 0, 0, 0.5) 0 0.625em 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
body[theme="light"] .table > thead > tr.node-group-tag > th,
|
||||||
|
body[theme="light"] .table > thead > tr.node-group-tag > th:before {
|
||||||
|
background: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
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{
|
||||||
|
/** border-bottom 颜色 **/
|
||||||
|
background-color: rgba(0, 0, 0, 0.075);
|
||||||
|
}
|
||||||
|
|
||||||
|
body[theme="light"] .table-hover > tbody > tr:not(.expandRow):hover > td {
|
||||||
|
background-color: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* expandRow展开部分样式 */
|
||||||
|
body[theme="light"] .table > tbody > tr.expandRow.odd > td:before{
|
||||||
|
background-color: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
body[theme="light"] .table > tbody > tr.expandRow.even > td:before{
|
||||||
|
background-color: unset;
|
||||||
|
}
|
||||||
|
/* expandRow展开部分样式结束 */
|
||||||
|
|
||||||
|
body[theme="light"] .progress {
|
||||||
|
background-image: none;
|
||||||
|
background-color: rgba(0, 0, 0, 0.015);
|
||||||
|
}
|
||||||
|
|
||||||
|
body[theme="light"] .progress-bar-success {
|
||||||
|
background-image: linear-gradient(to right, rgba(50, 205, 50, 0.6) 0, rgba(68, 157, 68, 0.6) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
body[theme="light"] .progress-bar-warning {
|
||||||
|
background-image: linear-gradient(to right, rgba(236, 151, 31, 0.6) 0, rgba(255, 125, 80, 0.6) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
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{
|
||||||
|
background-color: rgba(255, 255, 255, .55);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 767px) {
|
||||||
|
body[theme="light"] .navbar .navbar-nav .open .dropdown-menu {
|
||||||
|
background-color: rgba(235, 235, 235, 0.75);
|
||||||
|
}
|
||||||
|
}
|
||||||
130
resource/static/theme-server-status/css/main.css
vendored
Normal file → Executable file
130
resource/static/theme-server-status/css/main.css
vendored
Normal file → Executable file
@ -3,16 +3,22 @@ body {
|
|||||||
padding-bottom: 30px !important;
|
padding-bottom: 30px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.container-fluid{
|
||||||
|
max-width: 1680px;
|
||||||
|
width: 95vw;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nezha {
|
||||||
|
min-height: calc(100vh - 100px);
|
||||||
|
}
|
||||||
|
|
||||||
/* 导航部分 开始*/
|
/* 导航部分 开始*/
|
||||||
.navbar {
|
.navbar {
|
||||||
min-height: 40px !important;
|
min-height: 40px !important;
|
||||||
margin:0 auto;
|
margin:0 auto;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
z-index:99999999;
|
||||||
|
|
||||||
.navbar .container{
|
|
||||||
max-width: 95vw;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-inverse{
|
.navbar-inverse{
|
||||||
@ -46,11 +52,6 @@ body {
|
|||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar .node-cell-expand-label {
|
|
||||||
/*margin-right: 5px;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar .dropdown:hover,
|
|
||||||
.navbar .dropdown a{
|
.navbar .dropdown a{
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
@ -75,12 +76,10 @@ body {
|
|||||||
.navbar .navbar-collapse{
|
.navbar .navbar-collapse{
|
||||||
max-height: 500px;
|
max-height: 500px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 导航部分 结束 */
|
/* 导航部分 结束 */
|
||||||
|
|
||||||
|
|
||||||
/* toolbox 开始 */
|
/* toolbox 开始 */
|
||||||
|
|
||||||
.toolbox {
|
.toolbox {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom:20px;
|
bottom:20px;
|
||||||
@ -121,7 +120,6 @@ body {
|
|||||||
.toolbox .showGoTop i.goTop {
|
.toolbox .showGoTop i.goTop {
|
||||||
font-size: 1.55rem;
|
font-size: 1.55rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* toolbox 结束 */
|
/* toolbox 结束 */
|
||||||
|
|
||||||
|
|
||||||
@ -138,12 +136,12 @@ body {
|
|||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table th, .table td {
|
.table-responsive{
|
||||||
text-align: left;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
tr.accordion-toggle{
|
.table th, .table td {
|
||||||
cursor:pointer;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table > tbody > tr > td,
|
.table > tbody > tr > td,
|
||||||
@ -171,6 +169,15 @@ tr.accordion-toggle{
|
|||||||
height: 0.7px;
|
height: 0.7px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
table.monitor-detail{
|
||||||
|
margin:5px 0px 10px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr.accordion-toggle{
|
||||||
|
cursor:pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table .network-thead-tr th,
|
||||||
.table .node-group-tag th{
|
.table .node-group-tag th{
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
padding-bottom:15px;
|
padding-bottom:15px;
|
||||||
@ -243,7 +250,7 @@ tr.accordion-toggle{
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*加快Agent详情下拉展示速度*/
|
/*agent详情下拉速度*/
|
||||||
.collapsing{
|
.collapsing{
|
||||||
-webkit-transition-property:height,visibility;
|
-webkit-transition-property:height,visibility;
|
||||||
-o-transition-property:height,visibility;
|
-o-transition-property:height,visibility;
|
||||||
@ -255,13 +262,10 @@ tr.accordion-toggle{
|
|||||||
-o-transition-timing-function: linear;
|
-o-transition-timing-function: linear;
|
||||||
transition-timing-function: linear
|
transition-timing-function: linear
|
||||||
}
|
}
|
||||||
|
|
||||||
/*正文结束*/
|
/*正文结束*/
|
||||||
|
|
||||||
/* 服务页 正文*/
|
/* 服务页 正文*/
|
||||||
.service-status {
|
.service-status {}
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.service-status .service-status-th{
|
.service-status .service-status-th{
|
||||||
min-width:60px;
|
min-width:60px;
|
||||||
@ -307,44 +311,67 @@ tr.accordion-toggle{
|
|||||||
.service-status .tooltip-inner {
|
.service-status .tooltip-inner {
|
||||||
max-width: 500px;
|
max-width: 500px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
td.ping-network-quality {
|
||||||
|
width: 600px;
|
||||||
|
}
|
||||||
/* 服务页 正文结束 */
|
/* 服务页 正文结束 */
|
||||||
|
|
||||||
|
/* 地图版服务器分布图 */
|
||||||
/* 服务器分布图 */
|
|
||||||
#mapChartBox{
|
#mapChartBox{
|
||||||
z-index: 999999999;
|
z-index: 999999999;
|
||||||
|
padding-left: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-content{
|
.modal-open .modal{
|
||||||
display: flex;
|
overflow-x: hidden;
|
||||||
flex-direction: column;
|
overflow-y: hidden;
|
||||||
pointer-events: auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-dialog-centered{
|
.modal-dialog-centered{
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
width: 1134px;
|
width: 100%;
|
||||||
max-width: 1134px;
|
max-width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center; /* 垂直居中 */
|
align-items: center; /* 垂直居中 */
|
||||||
justify-content: center; /* 水平居中 */
|
justify-content: center; /* 水平居中 */
|
||||||
min-height: calc(100%) /* 确保模态框占据整个视口高度 */
|
min-height: calc(100%) /* 确保模态框占据整个视口高度 */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.modal-content{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
pointer-events: auto;
|
||||||
|
border-radius: unset;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
.modal-header{
|
.modal-header{
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-header i{
|
.modal-header h4{
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header i.xclose{
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
font-size: 2em;
|
font-size: 30px;
|
||||||
top: 13px;
|
top: 12px;
|
||||||
right: 13px;
|
right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-body{
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.template-item, a.cdn-item{
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer{
|
footer{
|
||||||
padding-bottom: 2rem;
|
padding-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer p{
|
footer p{
|
||||||
@ -356,6 +383,10 @@ footer p{
|
|||||||
.accordian-body{
|
.accordian-body{
|
||||||
margin: 5px 0px 5px 10px;
|
margin: 5px 0px 5px 10px;
|
||||||
}
|
}
|
||||||
|
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;
|
font-size:16px;
|
||||||
padding-bottom:6px;
|
padding-bottom:6px;
|
||||||
@ -367,10 +398,19 @@ footer p{
|
|||||||
font-size: 10px !important;
|
font-size: 10px !important;
|
||||||
padding-top:60px !important;
|
padding-top:60px !important;
|
||||||
}
|
}
|
||||||
|
.nezha {
|
||||||
|
min-height: calc(100vh - 80px);
|
||||||
|
}
|
||||||
.content {
|
.content {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
footer{
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
.cycle-transfer-stats .dataTables_wrapper{
|
||||||
|
margin-bottom: -10px;
|
||||||
|
}
|
||||||
.navbar .navbar-nav .open .dropdown-menu>li>a {
|
.navbar .navbar-nav .open .dropdown-menu>li>a {
|
||||||
color: #f1f1f1;
|
color: #f1f1f1;
|
||||||
}
|
}
|
||||||
@ -405,10 +445,17 @@ footer p{
|
|||||||
.accordian-body{
|
.accordian-body{
|
||||||
margin: 5px 0px 5px 10px;
|
margin: 5px 0px 5px 10px;
|
||||||
}
|
}
|
||||||
|
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;
|
font-size:14px;
|
||||||
padding-bottom:6px;
|
padding-bottom:6px;
|
||||||
}
|
}
|
||||||
|
.table tr.network td{
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
.service-status .service-status-th{
|
.service-status .service-status-th{
|
||||||
min-width:30px;
|
min-width:30px;
|
||||||
}
|
}
|
||||||
@ -432,15 +479,8 @@ footer p{
|
|||||||
.toolbox {
|
.toolbox {
|
||||||
right: 18px;
|
right: 18px;
|
||||||
}
|
}
|
||||||
.modal-dialog-centered{
|
td.ping-network-quality {
|
||||||
width: 95%;
|
width: 110px;
|
||||||
}
|
|
||||||
.modal-title{
|
|
||||||
line-height: 0.5;
|
|
||||||
}
|
|
||||||
.modal-header i{
|
|
||||||
top: 8px;
|
|
||||||
right: 8px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
BIN
resource/static/theme-server-status/img/bg.jpg
vendored
Normal file
BIN
resource/static/theme-server-status/img/bg.jpg
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 262 KiB |
326
resource/static/theme-server-status/js/html5shiv.js
vendored
326
resource/static/theme-server-status/js/html5shiv.js
vendored
@ -1,326 +0,0 @@
|
|||||||
/**
|
|
||||||
* @preserve HTML5 Shiv 3.7.3 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
|
|
||||||
*/
|
|
||||||
;(function(window, document) {
|
|
||||||
/*jshint evil:true */
|
|
||||||
/** version */
|
|
||||||
var version = '3.7.3';
|
|
||||||
|
|
||||||
/** Preset options */
|
|
||||||
var options = window.html5 || {};
|
|
||||||
|
|
||||||
/** Used to skip problem elements */
|
|
||||||
var reSkip = /^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i;
|
|
||||||
|
|
||||||
/** Not all elements can be cloned in IE **/
|
|
||||||
var saveClones = /^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i;
|
|
||||||
|
|
||||||
/** Detect whether the browser supports default html5 styles */
|
|
||||||
var supportsHtml5Styles;
|
|
||||||
|
|
||||||
/** Name of the expando, to work with multiple documents or to re-shiv one document */
|
|
||||||
var expando = '_html5shiv';
|
|
||||||
|
|
||||||
/** The id for the documents expando */
|
|
||||||
var expanID = 0;
|
|
||||||
|
|
||||||
/** Cached data for each document */
|
|
||||||
var expandoData = {};
|
|
||||||
|
|
||||||
/** Detect whether the browser supports unknown elements */
|
|
||||||
var supportsUnknownElements;
|
|
||||||
|
|
||||||
(function() {
|
|
||||||
try {
|
|
||||||
var a = document.createElement('a');
|
|
||||||
a.innerHTML = '<xyz></xyz>';
|
|
||||||
//if the hidden property is implemented we can assume, that the browser supports basic HTML5 Styles
|
|
||||||
supportsHtml5Styles = ('hidden' in a);
|
|
||||||
|
|
||||||
supportsUnknownElements = a.childNodes.length == 1 || (function() {
|
|
||||||
// assign a false positive if unable to shiv
|
|
||||||
(document.createElement)('a');
|
|
||||||
var frag = document.createDocumentFragment();
|
|
||||||
return (
|
|
||||||
typeof frag.cloneNode == 'undefined' ||
|
|
||||||
typeof frag.createDocumentFragment == 'undefined' ||
|
|
||||||
typeof frag.createElement == 'undefined'
|
|
||||||
);
|
|
||||||
}());
|
|
||||||
} catch(e) {
|
|
||||||
// assign a false positive if detection fails => unable to shiv
|
|
||||||
supportsHtml5Styles = true;
|
|
||||||
supportsUnknownElements = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
}());
|
|
||||||
|
|
||||||
/*--------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Creates a style sheet with the given CSS text and adds it to the document.
|
|
||||||
* @private
|
|
||||||
* @param {Document} ownerDocument The document.
|
|
||||||
* @param {String} cssText The CSS text.
|
|
||||||
* @returns {StyleSheet} The style element.
|
|
||||||
*/
|
|
||||||
function addStyleSheet(ownerDocument, cssText) {
|
|
||||||
var p = ownerDocument.createElement('p'),
|
|
||||||
parent = ownerDocument.getElementsByTagName('head')[0] || ownerDocument.documentElement;
|
|
||||||
|
|
||||||
p.innerHTML = 'x<style>' + cssText + '</style>';
|
|
||||||
return parent.insertBefore(p.lastChild, parent.firstChild);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Returns the value of `html5.elements` as an array.
|
|
||||||
* @private
|
|
||||||
* @returns {Array} An array of shived element node names.
|
|
||||||
*/
|
|
||||||
function getElements() {
|
|
||||||
var elements = html5.elements;
|
|
||||||
return typeof elements == 'string' ? elements.split(' ') : elements;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Extends the built-in list of html5 elements
|
|
||||||
* @memberOf html5
|
|
||||||
* @param {String|Array} newElements whitespace separated list or array of new element names to shiv
|
|
||||||
* @param {Document} ownerDocument The context document.
|
|
||||||
*/
|
|
||||||
function addElements(newElements, ownerDocument) {
|
|
||||||
var elements = html5.elements;
|
|
||||||
if(typeof elements != 'string'){
|
|
||||||
elements = elements.join(' ');
|
|
||||||
}
|
|
||||||
if(typeof newElements != 'string'){
|
|
||||||
newElements = newElements.join(' ');
|
|
||||||
}
|
|
||||||
html5.elements = elements +' '+ newElements;
|
|
||||||
shivDocument(ownerDocument);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Returns the data associated to the given document
|
|
||||||
* @private
|
|
||||||
* @param {Document} ownerDocument The document.
|
|
||||||
* @returns {Object} An object of data.
|
|
||||||
*/
|
|
||||||
function getExpandoData(ownerDocument) {
|
|
||||||
var data = expandoData[ownerDocument[expando]];
|
|
||||||
if (!data) {
|
|
||||||
data = {};
|
|
||||||
expanID++;
|
|
||||||
ownerDocument[expando] = expanID;
|
|
||||||
expandoData[expanID] = data;
|
|
||||||
}
|
|
||||||
return data;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* returns a shived element for the given nodeName and document
|
|
||||||
* @memberOf html5
|
|
||||||
* @param {String} nodeName name of the element
|
|
||||||
* @param {Document|DocumentFragment} ownerDocument The context document.
|
|
||||||
* @returns {Object} The shived element.
|
|
||||||
*/
|
|
||||||
function createElement(nodeName, ownerDocument, data){
|
|
||||||
if (!ownerDocument) {
|
|
||||||
ownerDocument = document;
|
|
||||||
}
|
|
||||||
if(supportsUnknownElements){
|
|
||||||
return ownerDocument.createElement(nodeName);
|
|
||||||
}
|
|
||||||
if (!data) {
|
|
||||||
data = getExpandoData(ownerDocument);
|
|
||||||
}
|
|
||||||
var node;
|
|
||||||
|
|
||||||
if (data.cache[nodeName]) {
|
|
||||||
node = data.cache[nodeName].cloneNode();
|
|
||||||
} else if (saveClones.test(nodeName)) {
|
|
||||||
node = (data.cache[nodeName] = data.createElem(nodeName)).cloneNode();
|
|
||||||
} else {
|
|
||||||
node = data.createElem(nodeName);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Avoid adding some elements to fragments in IE < 9 because
|
|
||||||
// * Attributes like `name` or `type` cannot be set/changed once an element
|
|
||||||
// is inserted into a document/fragment
|
|
||||||
// * Link elements with `src` attributes that are inaccessible, as with
|
|
||||||
// a 403 response, will cause the tab/window to crash
|
|
||||||
// * Script elements appended to fragments will execute when their `src`
|
|
||||||
// or `text` property is set
|
|
||||||
return node.canHaveChildren && !reSkip.test(nodeName) && !node.tagUrn ? data.frag.appendChild(node) : node;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* returns a shived DocumentFragment for the given document
|
|
||||||
* @memberOf html5
|
|
||||||
* @param {Document} ownerDocument The context document.
|
|
||||||
* @returns {Object} The shived DocumentFragment.
|
|
||||||
*/
|
|
||||||
function createDocumentFragment(ownerDocument, data){
|
|
||||||
if (!ownerDocument) {
|
|
||||||
ownerDocument = document;
|
|
||||||
}
|
|
||||||
if(supportsUnknownElements){
|
|
||||||
return ownerDocument.createDocumentFragment();
|
|
||||||
}
|
|
||||||
data = data || getExpandoData(ownerDocument);
|
|
||||||
var clone = data.frag.cloneNode(),
|
|
||||||
i = 0,
|
|
||||||
elems = getElements(),
|
|
||||||
l = elems.length;
|
|
||||||
for(;i<l;i++){
|
|
||||||
clone.createElement(elems[i]);
|
|
||||||
}
|
|
||||||
return clone;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Shivs the `createElement` and `createDocumentFragment` methods of the document.
|
|
||||||
* @private
|
|
||||||
* @param {Document|DocumentFragment} ownerDocument The document.
|
|
||||||
* @param {Object} data of the document.
|
|
||||||
*/
|
|
||||||
function shivMethods(ownerDocument, data) {
|
|
||||||
if (!data.cache) {
|
|
||||||
data.cache = {};
|
|
||||||
data.createElem = ownerDocument.createElement;
|
|
||||||
data.createFrag = ownerDocument.createDocumentFragment;
|
|
||||||
data.frag = data.createFrag();
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
ownerDocument.createElement = function(nodeName) {
|
|
||||||
//abort shiv
|
|
||||||
if (!html5.shivMethods) {
|
|
||||||
return data.createElem(nodeName);
|
|
||||||
}
|
|
||||||
return createElement(nodeName, ownerDocument, data);
|
|
||||||
};
|
|
||||||
|
|
||||||
ownerDocument.createDocumentFragment = Function('h,f', 'return function(){' +
|
|
||||||
'var n=f.cloneNode(),c=n.createElement;' +
|
|
||||||
'h.shivMethods&&(' +
|
|
||||||
// unroll the `createElement` calls
|
|
||||||
getElements().join().replace(/[\w\-:]+/g, function(nodeName) {
|
|
||||||
data.createElem(nodeName);
|
|
||||||
data.frag.createElement(nodeName);
|
|
||||||
return 'c("' + nodeName + '")';
|
|
||||||
}) +
|
|
||||||
');return n}'
|
|
||||||
)(html5, data.frag);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Shivs the given document.
|
|
||||||
* @memberOf html5
|
|
||||||
* @param {Document} ownerDocument The document to shiv.
|
|
||||||
* @returns {Document} The shived document.
|
|
||||||
*/
|
|
||||||
function shivDocument(ownerDocument) {
|
|
||||||
if (!ownerDocument) {
|
|
||||||
ownerDocument = document;
|
|
||||||
}
|
|
||||||
var data = getExpandoData(ownerDocument);
|
|
||||||
|
|
||||||
if (html5.shivCSS && !supportsHtml5Styles && !data.hasCSS) {
|
|
||||||
data.hasCSS = !!addStyleSheet(ownerDocument,
|
|
||||||
// corrects block display not defined in IE6/7/8/9
|
|
||||||
'article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}' +
|
|
||||||
// adds styling not present in IE6/7/8/9
|
|
||||||
'mark{background:#FF0;color:#000}' +
|
|
||||||
// hides non-rendered elements
|
|
||||||
'template{display:none}'
|
|
||||||
);
|
|
||||||
}
|
|
||||||
if (!supportsUnknownElements) {
|
|
||||||
shivMethods(ownerDocument, data);
|
|
||||||
}
|
|
||||||
return ownerDocument;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
/**
|
|
||||||
* The `html5` object is exposed so that more elements can be shived and
|
|
||||||
* existing shiving can be detected on iframes.
|
|
||||||
* @type Object
|
|
||||||
* @example
|
|
||||||
*
|
|
||||||
* // options can be changed before the script is included
|
|
||||||
* html5 = { 'elements': 'mark section', 'shivCSS': false, 'shivMethods': false };
|
|
||||||
*/
|
|
||||||
var html5 = {
|
|
||||||
|
|
||||||
/**
|
|
||||||
* An array or space separated string of node names of the elements to shiv.
|
|
||||||
* @memberOf html5
|
|
||||||
* @type Array|String
|
|
||||||
*/
|
|
||||||
'elements': options.elements || 'abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output picture progress section summary template time video',
|
|
||||||
|
|
||||||
/**
|
|
||||||
* current version of html5shiv
|
|
||||||
*/
|
|
||||||
'version': version,
|
|
||||||
|
|
||||||
/**
|
|
||||||
* A flag to indicate that the HTML5 style sheet should be inserted.
|
|
||||||
* @memberOf html5
|
|
||||||
* @type Boolean
|
|
||||||
*/
|
|
||||||
'shivCSS': (options.shivCSS !== false),
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Is equal to true if a browser supports creating unknown/HTML5 elements
|
|
||||||
* @memberOf html5
|
|
||||||
* @type boolean
|
|
||||||
*/
|
|
||||||
'supportsUnknownElements': supportsUnknownElements,
|
|
||||||
|
|
||||||
/**
|
|
||||||
* A flag to indicate that the document's `createElement` and `createDocumentFragment`
|
|
||||||
* methods should be overwritten.
|
|
||||||
* @memberOf html5
|
|
||||||
* @type Boolean
|
|
||||||
*/
|
|
||||||
'shivMethods': (options.shivMethods !== false),
|
|
||||||
|
|
||||||
/**
|
|
||||||
* A string to describe the type of `html5` object ("default" or "default print").
|
|
||||||
* @memberOf html5
|
|
||||||
* @type String
|
|
||||||
*/
|
|
||||||
'type': 'default',
|
|
||||||
|
|
||||||
// shivs the document according to the specified `html5` object options
|
|
||||||
'shivDocument': shivDocument,
|
|
||||||
|
|
||||||
//creates a shived element
|
|
||||||
createElement: createElement,
|
|
||||||
|
|
||||||
//creates a shived documentFragment
|
|
||||||
createDocumentFragment: createDocumentFragment,
|
|
||||||
|
|
||||||
//extends list of elements
|
|
||||||
addElements: addElements
|
|
||||||
};
|
|
||||||
|
|
||||||
/*--------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
// expose html5
|
|
||||||
window.html5 = html5;
|
|
||||||
|
|
||||||
// shiv the document
|
|
||||||
shivDocument(document);
|
|
||||||
|
|
||||||
if(typeof module == 'object' && module.exports){
|
|
||||||
module.exports = html5;
|
|
||||||
}
|
|
||||||
|
|
||||||
}(typeof window !== "undefined" ? window : this, document));
|
|
||||||
24
resource/static/theme-server-status/js/mixin.js
vendored
24
resource/static/theme-server-status/js/mixin.js
vendored
@ -1,12 +1,14 @@
|
|||||||
const mixinsVue = {
|
const mixinsVue = {
|
||||||
data: {
|
data: {
|
||||||
cache: [],
|
cache: [],
|
||||||
|
isMobile: false,
|
||||||
theme: "light",
|
theme: "light",
|
||||||
isSystemTheme: false,
|
isSystemTheme: false,
|
||||||
showGroup: false,
|
showGroup: false,
|
||||||
showGoTop: false,
|
showGoTop: false,
|
||||||
|
showTools: false,
|
||||||
preferredTemplate: null,
|
preferredTemplate: null,
|
||||||
isMobile: false,
|
semiTransparent: false,
|
||||||
staticUrl: '/static/theme-server-status',
|
staticUrl: '/static/theme-server-status',
|
||||||
adaptedTemplates: [
|
adaptedTemplates: [
|
||||||
{ key: 'default', name: 'Default', icon: 'th large' },
|
{ key: 'default', name: 'Default', icon: 'th large' },
|
||||||
@ -18,6 +20,7 @@ const mixinsVue = {
|
|||||||
this.isMobile = this.checkIsMobile();
|
this.isMobile = this.checkIsMobile();
|
||||||
this.theme = this.initTheme();
|
this.theme = this.initTheme();
|
||||||
this.showGroup = this.initShowGroup();
|
this.showGroup = this.initShowGroup();
|
||||||
|
this.semiTransparent = this.initSemiTransparent();
|
||||||
this.preferredTemplate = this.getCookie('preferred_theme') ? this.getCookie('preferred_theme') : this.$root.defaultTemplate;
|
this.preferredTemplate = this.getCookie('preferred_theme') ? this.getCookie('preferred_theme') : this.$root.defaultTemplate;
|
||||||
window.addEventListener('scroll', this.handleScroll);
|
window.addEventListener('scroll', this.handleScroll);
|
||||||
},
|
},
|
||||||
@ -32,6 +35,9 @@ const mixinsVue = {
|
|||||||
window.location.reload();
|
window.location.reload();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
toggleShowTools() {
|
||||||
|
this.showTools = !this.showTools;
|
||||||
|
},
|
||||||
initTheme() {
|
initTheme() {
|
||||||
const storedTheme = localStorage.getItem("theme");
|
const storedTheme = localStorage.getItem("theme");
|
||||||
const theme = (storedTheme === 'dark' || storedTheme === 'light') ? storedTheme : (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
|
const theme = (storedTheme === 'dark' || storedTheme === 'light') ? storedTheme : (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
|
||||||
@ -64,6 +70,21 @@ const mixinsVue = {
|
|||||||
this.$root.initTooltip();
|
this.$root.initTooltip();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
initSemiTransparent() {
|
||||||
|
const storedSemiTransparent = localStorage.getItem("semiTransparent");
|
||||||
|
const semiTransparent = storedSemiTransparent !== null ? JSON.parse(storedSemiTransparent) : false;
|
||||||
|
if (storedSemiTransparent === null) {
|
||||||
|
localStorage.setItem("semiTransparent", semiTransparent);
|
||||||
|
}
|
||||||
|
return semiTransparent;
|
||||||
|
},
|
||||||
|
toggleSemiTransparent(){
|
||||||
|
this.semiTransparent = !this.semiTransparent;
|
||||||
|
localStorage.setItem("semiTransparent", this.semiTransparent);
|
||||||
|
if(this.$root.page == 'index') {
|
||||||
|
this.reloadCharts(); // 重新载入echarts图表
|
||||||
|
}
|
||||||
|
},
|
||||||
updateCookie(name, value) {
|
updateCookie(name, value) {
|
||||||
document.cookie = name + "=" + value +"; path=/";
|
document.cookie = name + "=" + value +"; path=/";
|
||||||
},
|
},
|
||||||
@ -106,6 +127,7 @@ const mixinsVue = {
|
|||||||
},
|
},
|
||||||
handleScroll() {
|
handleScroll() {
|
||||||
this.showGoTop = window.scrollY >= 100;
|
this.showGoTop = window.scrollY >= 100;
|
||||||
|
if(this.showTools) this.showTools = false;
|
||||||
},
|
},
|
||||||
groupingData(data, field) {
|
groupingData(data, field) {
|
||||||
let map = new Map();
|
let map = new Map();
|
||||||
|
|||||||
@ -1,5 +0,0 @@
|
|||||||
/*! Respond.js v1.4.2: min/max-width media query polyfill * Copyright 2013 Scott Jehl
|
|
||||||
* Licensed under https://github.com/scottjehl/Respond/blob/master/LICENSE-MIT
|
|
||||||
* */
|
|
||||||
|
|
||||||
!function(a){"use strict";a.matchMedia=a.matchMedia||function(a){var b,c=a.documentElement,d=c.firstElementChild||c.firstChild,e=a.createElement("body"),f=a.createElement("div");return f.id="mq-test-1",f.style.cssText="position:absolute;top:-100em",e.style.background="none",e.appendChild(f),function(a){return f.innerHTML='­<style media="'+a+'"> #mq-test-1 { width: 42px; }</style>',c.insertBefore(e,d),b=42===f.offsetWidth,c.removeChild(e),{matches:b,media:a}}}(a.document)}(this),function(a){"use strict";function b(){u(!0)}var c={};a.respond=c,c.update=function(){};var d=[],e=function(){var b=!1;try{b=new a.XMLHttpRequest}catch(c){b=new a.ActiveXObject("Microsoft.XMLHTTP")}return function(){return b}}(),f=function(a,b){var c=e();c&&(c.open("GET",a,!0),c.onreadystatechange=function(){4!==c.readyState||200!==c.status&&304!==c.status||b(c.responseText)},4!==c.readyState&&c.send(null))};if(c.ajax=f,c.queue=d,c.regex={media:/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi,keyframes:/@(?:\-(?:o|moz|webkit)\-)?keyframes[^\{]+\{(?:[^\{\}]*\{[^\}\{]*\})+[^\}]*\}/gi,urls:/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,findStyles:/@media *([^\{]+)\{([\S\s]+?)$/,only:/(only\s+)?([a-zA-Z]+)\s?/,minw:/\([\s]*min\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/,maxw:/\([\s]*max\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/},c.mediaQueriesSupported=a.matchMedia&&null!==a.matchMedia("only all")&&a.matchMedia("only all").matches,!c.mediaQueriesSupported){var g,h,i,j=a.document,k=j.documentElement,l=[],m=[],n=[],o={},p=30,q=j.getElementsByTagName("head")[0]||k,r=j.getElementsByTagName("base")[0],s=q.getElementsByTagName("link"),t=function(){var a,b=j.createElement("div"),c=j.body,d=k.style.fontSize,e=c&&c.style.fontSize,f=!1;return b.style.cssText="position:absolute;font-size:1em;width:1em",c||(c=f=j.createElement("body"),c.style.background="none"),k.style.fontSize="100%",c.style.fontSize="100%",c.appendChild(b),f&&k.insertBefore(c,k.firstChild),a=b.offsetWidth,f?k.removeChild(c):c.removeChild(b),k.style.fontSize=d,e&&(c.style.fontSize=e),a=i=parseFloat(a)},u=function(b){var c="clientWidth",d=k[c],e="CSS1Compat"===j.compatMode&&d||j.body[c]||d,f={},o=s[s.length-1],r=(new Date).getTime();if(b&&g&&p>r-g)return a.clearTimeout(h),h=a.setTimeout(u,p),void 0;g=r;for(var v in l)if(l.hasOwnProperty(v)){var w=l[v],x=w.minw,y=w.maxw,z=null===x,A=null===y,B="em";x&&(x=parseFloat(x)*(x.indexOf(B)>-1?i||t():1)),y&&(y=parseFloat(y)*(y.indexOf(B)>-1?i||t():1)),w.hasquery&&(z&&A||!(z||e>=x)||!(A||y>=e))||(f[w.media]||(f[w.media]=[]),f[w.media].push(m[w.rules]))}for(var C in n)n.hasOwnProperty(C)&&n[C]&&n[C].parentNode===q&&q.removeChild(n[C]);n.length=0;for(var D in f)if(f.hasOwnProperty(D)){var E=j.createElement("style"),F=f[D].join("\n");E.type="text/css",E.media=D,q.insertBefore(E,o.nextSibling),E.styleSheet?E.styleSheet.cssText=F:E.appendChild(j.createTextNode(F)),n.push(E)}},v=function(a,b,d){var e=a.replace(c.regex.keyframes,"").match(c.regex.media),f=e&&e.length||0;b=b.substring(0,b.lastIndexOf("/"));var g=function(a){return a.replace(c.regex.urls,"$1"+b+"$2$3")},h=!f&&d;b.length&&(b+="/"),h&&(f=1);for(var i=0;f>i;i++){var j,k,n,o;h?(j=d,m.push(g(a))):(j=e[i].match(c.regex.findStyles)&&RegExp.$1,m.push(RegExp.$2&&g(RegExp.$2))),n=j.split(","),o=n.length;for(var p=0;o>p;p++)k=n[p],l.push({media:k.split("(")[0].match(c.regex.only)&&RegExp.$2||"all",rules:m.length-1,hasquery:k.indexOf("(")>-1,minw:k.match(c.regex.minw)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:k.match(c.regex.maxw)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}u()},w=function(){if(d.length){var b=d.shift();f(b.href,function(c){v(c,b.href,b.media),o[b.href]=!0,a.setTimeout(function(){w()},0)})}},x=function(){for(var b=0;b<s.length;b++){var c=s[b],e=c.href,f=c.media,g=c.rel&&"stylesheet"===c.rel.toLowerCase();e&&g&&!o[e]&&(c.styleSheet&&c.styleSheet.rawCssText?(v(c.styleSheet.rawCssText,e,f),o[e]=!0):(!/^([a-zA-Z:]*\/\/)/.test(e)&&!r||e.replace(RegExp.$1,"").split("/")[0]===a.location.host)&&("//"===e.substring(0,2)&&(e=a.location.protocol+e),d.push({href:e,media:f})))}w()};x(),c.update=x,c.getEmValue=t,a.addEventListener?a.addEventListener("resize",b,!1):a.attachEvent&&a.attachEvent("onresize",b)}}(this);
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
{{define "theme-server-status/content-footer"}}
|
|
||||||
<footer>
|
|
||||||
<p>{{ .Conf.Site.Brand }} | Theme ServerStatus | Powered by <a target="_blank" href="https://github.com/naiba/nezha">{{tr "NezhaMonitoring"}}</a> {{.Version}}</p>
|
|
||||||
</footer>
|
|
||||||
<aside class="toolbox">
|
|
||||||
<span v-if="page=='index' && countryMapChartData.length!=0" class="showMapChart">
|
|
||||||
<i @click="showMapChart" data-toggle="modal" data-target="#mapChartBox" class="bi bi-geo-alt"></i>
|
|
||||||
</span>
|
|
||||||
<span class="toggleView">
|
|
||||||
<i v-if="showGroup" @click="toggleShowGroup" class="show-nogroup bi bi-justify"></i>
|
|
||||||
<i v-else @click="toggleShowGroup" class="show-group bi bi-view-stacked"></i>
|
|
||||||
</span>
|
|
||||||
<span class="setTheme">
|
|
||||||
<i v-if="theme === 'light'" @click="setTheme('dark')" class="setTheme-dark bi bi-moon-fill"></i>
|
|
||||||
<i v-else @click="setTheme('light')" class="setTheme-light bi bi-brightness-high-fill"></i>
|
|
||||||
</span>
|
|
||||||
<span v-if="showGoTop" class="showGoTop">
|
|
||||||
<i @click="goTop" class="goTop bi bi-arrow-up"></i>
|
|
||||||
</span>
|
|
||||||
</aside>
|
|
||||||
{{end}}
|
|
||||||
@ -1,4 +1,38 @@
|
|||||||
{{define "theme-server-status/footer"}}
|
{{define "theme-server-status/footer"}}
|
||||||
|
</div>
|
||||||
|
<footer class="container-fluid">
|
||||||
|
<p>{{ .Conf.Site.Brand }} | Theme ServerStatus | Powered by <a target="_blank" href="https://github.com/naiba/nezha">{{tr "NezhaMonitoring"}}</a> {{.Version}}</p>
|
||||||
|
</footer>
|
||||||
|
<aside class="toolbox">
|
||||||
|
<template v-if="showTools">
|
||||||
|
<span v-if="page=='index' && countryMapChartData.length!=0" class="showMapChart">
|
||||||
|
<i @click="showMapChart" data-toggle="modal" data-target="#mapChartBox" class="bi bi-geo-alt"></i>
|
||||||
|
</span>
|
||||||
|
<span class="toggleView">
|
||||||
|
<i v-if="showGroup" @click="toggleShowGroup" class="show-nogroup bi bi-justify"></i>
|
||||||
|
<i v-else @click="toggleShowGroup" class="show-group bi bi-view-stacked"></i>
|
||||||
|
</span>
|
||||||
|
<span class="toggleSemiTransparent" @click="toggleSemiTransparent">
|
||||||
|
<i class="bi" :class="semiTransparent ? 'bi-droplet' : 'bi-droplet-half'"></i>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
<span v-if="!showTools">
|
||||||
|
<i @click="toggleShowTools" class="bi bi-three-dots"></i>
|
||||||
|
</span>
|
||||||
|
<span class="setTheme">
|
||||||
|
<i v-if="theme === 'light'" @click="setTheme('dark')" class="setTheme-dark bi bi-moon-fill"></i>
|
||||||
|
<i v-else @click="setTheme('light')" class="setTheme-light bi bi-brightness-high-fill"></i>
|
||||||
|
</span>
|
||||||
|
<span v-if="showGoTop" class="showGoTop">
|
||||||
|
<i @click="goTop" class="goTop bi bi-arrow-up"></i>
|
||||||
|
</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">
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
{{if ts .CustomCode}}{{.CustomCode|safe}}{{end}}
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
{{end}}
|
{{end}}
|
||||||
@ -8,10 +8,6 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<link rel="shortcut icon" type="image/png" href="/static/logo.svg" />
|
<link rel="shortcut icon" type="image/png" href="/static/logo.svg" />
|
||||||
<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.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?v20240724">
|
|
||||||
<link rel="stylesheet" href="/static/theme-server-status/css/dark.css?v20240724">
|
|
||||||
<link rel="stylesheet" href="/static/theme-server-status/css/light.css?v20240407">
|
|
||||||
<link rel="stylesheet" href="https://unpkg.com/bootstrap-icons@1.11.3/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://unpkg.com/font-logos@0.17.0/assets/font-logos.css">
|
<link rel="stylesheet" href="https://unpkg.com/font-logos@0.17.0/assets/font-logos.css">
|
||||||
<link rel="stylesheet" href="https://unpkg.com/flag-icons@7.2.3/css/flag-icons.min.css">
|
<link rel="stylesheet" href="https://unpkg.com/flag-icons@7.2.3/css/flag-icons.min.css">
|
||||||
@ -20,17 +16,13 @@
|
|||||||
<script src="https://unpkg.com/bootstrap@3.4.1/dist/js/bootstrap.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/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="https://unpkg.com/echarts@5.5.0/dist/echarts.min.js"></script>
|
||||||
<script src="/static/theme-server-status/js/mixin.js?v20240711"></script>
|
<link rel="stylesheet" href="/static/theme-server-status/css/main.css?v20240807">
|
||||||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
<link rel="stylesheet" href="/static/theme-server-status/css/dark.css?v20240807">
|
||||||
<!--[if lt IE 9]>
|
<link rel="stylesheet" href="/static/theme-server-status/css/light.css?v20240807">
|
||||||
<script src="/static/theme-server-status/js/html5shiv.js"></script>
|
<script src="/static/theme-server-status/js/mixin.js?v20240807"></script>
|
||||||
<script src="/static/theme-server-status/js/respond.min.js"></script>
|
|
||||||
<![endif]-->
|
|
||||||
{{if ts .CustomCode}}
|
|
||||||
{{.CustomCode|safe}}
|
|
||||||
{{end}}
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div id="app">
|
||||||
{{end}}
|
{{end}}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
72
resource/template/theme-server-status/home.html
vendored
72
resource/template/theme-server-status/home.html
vendored
@ -1,34 +1,35 @@
|
|||||||
{{define "theme-server-status/home"}}
|
{{define "theme-server-status/home"}}
|
||||||
{{template "theme-server-status/header" .}}
|
{{template "theme-server-status/header" .}}
|
||||||
<div id="app">
|
{{template "theme-server-status/menu" .}}
|
||||||
{{template "theme-server-status/content-nav" .}}
|
<!-- showGroup true -->
|
||||||
<!-- showGroup true -->
|
<template v-if="showGroup">
|
||||||
<template v-if="showGroup">
|
<section class="container-fluid table-responsive content" v-for="group in nodesTag">
|
||||||
<section class="container table-responsive content" style="max-width: 95vw" v-for="group in nodesTag">
|
{{template "theme-server-status/home-group-true" .}}
|
||||||
{{template "theme-server-status/home-group-true" .}}
|
</section>
|
||||||
</section>
|
</template>
|
||||||
</template>
|
<!-- showGroup false -->
|
||||||
<!-- showGroup false -->
|
<template v-else>
|
||||||
<template v-else>
|
<section class="container-fluid table-responsive content">
|
||||||
<section class="container table-responsive content" style="max-width: 95vw">
|
{{template "theme-server-status/home-group-false" .}}
|
||||||
{{template "theme-server-status/home-group-false" .}}
|
</section>
|
||||||
</section>
|
</template>
|
||||||
</template>
|
<div class="modal fade" id="mapChartBox" tabindex="-1" role="dialog" aria-labelledby="mapChartTitle" aria-hidden="true" style="padding-left:0">
|
||||||
<div class="modal fade" id="mapChartBox" tabindex="-1" role="dialog" aria-labelledby="mapChartTitle" aria-hidden="true">
|
<div class="modal-dialog modal-lg modal-dialog-centered">
|
||||||
<div class="modal-dialog modal-lg modal-dialog-centered">
|
<div class="modal-content">
|
||||||
<div class="modal-content">
|
<div class="modal-header">
|
||||||
<div class="modal-header">
|
<h4 class="modal-title" id="mapChartTitle">
|
||||||
<h4 class="modal-title" id="mapChartTitle">{{tr "ServersOnWorldMap"}}</h4>
|
<i class="bi bi-geo-alt"></i>
|
||||||
<i class="bi bi-x" data-dismiss="modal" aria-label="Close"></i>
|
<span>{{tr "ServersOnWorldMap"}}</span>
|
||||||
</div>
|
</h4>
|
||||||
<div class="modal-body">
|
<i class="bi bi-x xclose" data-dismiss="modal" aria-label="Close"></i>
|
||||||
<div id="mapChart" style="width:100%;height:auto;"></div>
|
</div>
|
||||||
</div>
|
<div class="modal-body">
|
||||||
|
<div id="mapChart"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{template "theme-server-status/content-footer" .}}
|
|
||||||
</div>
|
</div>
|
||||||
|
{{template "theme-server-status/footer" .}}
|
||||||
<script>
|
<script>
|
||||||
new Vue({
|
new Vue({
|
||||||
el: '#app',
|
el: '#app',
|
||||||
@ -155,8 +156,8 @@
|
|||||||
}
|
}
|
||||||
const unit = this.language=='zh-CN' ? '台' : 'servers';
|
const unit = this.language=='zh-CN' ? '台' : 'servers';
|
||||||
const isMobile = this.checkIsMobile();
|
const isMobile = this.checkIsMobile();
|
||||||
const width = isMobile ? 338 : 1102;
|
const width = window.innerWidth;
|
||||||
const height = isMobile ? 200 : 500;
|
const height = 0.95 * window.innerHeight;
|
||||||
const backgroundColor = this.theme == "dark" ? '' : '';
|
const backgroundColor = this.theme == "dark" ? '' : '';
|
||||||
const inRangeColor = this.theme == "dark" ? '#D2B206' : '#FFDF32';
|
const inRangeColor = this.theme == "dark" ? '#D2B206' : '#FFDF32';
|
||||||
const tooltipBackgroundColor = this.theme == "dark" ? "#ffffff" : '#ffffff';
|
const tooltipBackgroundColor = this.theme == "dark" ? "#ffffff" : '#ffffff';
|
||||||
@ -521,8 +522,10 @@
|
|||||||
const chartTheme = theme == "dark" ? "dark" : "default";
|
const chartTheme = theme == "dark" ? "dark" : "default";
|
||||||
const fontColor = theme == "dark" ? "#f1f1f1" : "#000000";
|
const fontColor = theme == "dark" ? "#f1f1f1" : "#000000";
|
||||||
const backgroundColor = theme == "dark" ? '' : '';
|
const backgroundColor = theme == "dark" ? '' : '';
|
||||||
const tooltipBackgroundColor = theme == "dark" ? "#1C1D26" : '#ffffff';
|
const tooltipBackgroundColor = this.theme == "dark" ? (this.semiTransparent ? "rgba(28,29,38,0.85)" : "rgba(28,29,38,1)") : (this.semiTransparent ? "rgba(255,255,255,0.85)" : "rgba(255,255,255,1)");
|
||||||
const tooltipBorderColor = theme == "dark" ? "#31363B" : "#ffffff";
|
const tooltipBorderColor = this.theme == "dark" ? (this.semiTransparent ? "rgba(28,29,38,0.9)" : "rgba(28,29,38,1)") : (this.semiTransparent ? "rgba(255,255,255,0.9)" : "rgba(255,255,255,1)");
|
||||||
|
const lineStyleWidth = isMobile ? 1 : 2;
|
||||||
|
const splitLineWidth = isMobile ? 0.5 : 1;
|
||||||
// 渲染图表
|
// 渲染图表
|
||||||
const chart = echarts.init(chartContainer, chartTheme, {
|
const chart = echarts.init(chartContainer, chartTheme, {
|
||||||
renderer: 'canvas',
|
renderer: 'canvas',
|
||||||
@ -549,7 +552,10 @@
|
|||||||
smooth: true,
|
smooth: true,
|
||||||
symbol: 'none',
|
symbol: 'none',
|
||||||
data: data,
|
data: data,
|
||||||
connectNulls: true
|
connectNulls: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: lineStyleWidth
|
||||||
|
}
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -611,6 +617,11 @@
|
|||||||
textStyle: {
|
textStyle: {
|
||||||
fontSize: fontSize
|
fontSize: fontSize
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
width: splitLineWidth
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
dataZoom: [
|
dataZoom: [
|
||||||
@ -645,5 +656,4 @@
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
{{template "theme-server-status/footer" .}}
|
|
||||||
{{end}}
|
{{end}}
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{{define "theme-server-status/content-nav"}}
|
{{define "theme-server-status/menu"}}
|
||||||
<header role="navigation" class="navbar navbar-inverse navbar-fixed-top" style="z-index:99999999;">
|
<header role="navigation" class="navbar navbar-inverse navbar-fixed-top">
|
||||||
<div class="container">
|
<div class="container-fluid">
|
||||||
<div class="navbar-header">
|
<div class="navbar-header">
|
||||||
<button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button">
|
<button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button">
|
||||||
<span class="sr-only">Toggle navigation</span>
|
<span class="sr-only">Toggle navigation</span>
|
||||||
@ -64,5 +64,6 @@
|
|||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
<div class="nezha">
|
||||||
{{end}}
|
{{end}}
|
||||||
|
|
||||||
@ -1,23 +1,20 @@
|
|||||||
{{define "theme-server-status/network"}}
|
{{define "theme-server-status/network"}}
|
||||||
{{template "theme-server-status/header" .}}
|
{{template "theme-server-status/header" .}}
|
||||||
<div id="app">
|
{{template "theme-server-status/menu" .}}
|
||||||
{{template "theme-server-status/content-nav" .}}
|
<div class="container-fluid table-responsive content">
|
||||||
<div class="container table-responsive content" style="max-width: 95vw">
|
<table class="table table-striped table-condensed table-hover">
|
||||||
<table class="table table-striped table-condensed table-hover">
|
<button class="ui nezha-primary-btn button"
|
||||||
<button class="ui nezha-primary-btn button"
|
v-for="server in servers"
|
||||||
v-for="server in servers"
|
style="margin-top: 3px"
|
||||||
style="margin-top: 3px"
|
@click="redirectNetwork(server.ID)">
|
||||||
@click="redirectNetwork(server.ID)">
|
@#server.Name#@ <i :class="'fi fi-' + server.Host.CountryCode"></i><span class="node-cell-location-text text-uppercase"> @#server.Host.CountryCode#@</span>
|
||||||
@#server.Name#@ <i :class="'fi fi-' + server.Host.CountryCode"></i><span class="node-cell-location-text text-uppercase"> @#server.Host.CountryCode#@</span>
|
</button>
|
||||||
</button>
|
</table>
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
<div class="container table-responsive content" style="max-width: 95vw">
|
|
||||||
<div ref="chartDom" style="border-radius: 28px; margin-top: 15px;height: 520px;max-width: 1400px;overflow: hidden"></div>
|
|
||||||
</div>
|
|
||||||
{{template "theme-server-status/content-footer" .}}
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="container-fluid table-responsive content">
|
||||||
|
<div ref="chartDom" style="border-radius: 28px; margin-top: 15px;height: 520px;max-width: 1400px;overflow: hidden"></div>
|
||||||
|
</div>
|
||||||
|
{{template "theme-server-status/footer" .}}
|
||||||
<script>
|
<script>
|
||||||
const monitorInfo = JSON.parse('{{.MonitorInfos}}');
|
const monitorInfo = JSON.parse('{{.MonitorInfos}}');
|
||||||
const initData = JSON.parse('{{.Servers}}').servers;
|
const initData = JSON.parse('{{.Servers}}').servers;
|
||||||
@ -239,5 +236,4 @@
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
{{template "theme-server-status/footer" .}}
|
|
||||||
{{end}}
|
{{end}}
|
||||||
|
|||||||
139
resource/template/theme-server-status/service.html
vendored
139
resource/template/theme-server-status/service.html
vendored
@ -1,77 +1,75 @@
|
|||||||
{{define "theme-server-status/service"}}
|
{{define "theme-server-status/service"}}
|
||||||
{{template "theme-server-status/header" .}}
|
{{template "theme-server-status/header" .}}
|
||||||
<div id="app">
|
{{template "theme-server-status/menu" .}}
|
||||||
{{template "theme-server-status/content-nav" .}}
|
<!-- showGroup true -->
|
||||||
<!-- showGroup true -->
|
<template v-if="showGroup">
|
||||||
<template v-if="showGroup">
|
<section v-if="servicesTag.length === 0" class="container-fluid content" style="min-height: .01%;overflow-x: auto;">
|
||||||
<section v-if="servicesTag.length === 0" class="container content" style="max-width: 95vw; min-height: .01%;overflow-x: auto;">
|
<p>No Valid Service Monitor Configuration Entries Found. Please Verify in the <a href="/monitor">Admin Panel</a>.</p>
|
||||||
<p>No Valid Service Monitor Configuration Entries Found. Please Verify in the <a href="/monitor">Admin Panel</a>.</p>
|
</section>
|
||||||
</section>
|
<section v-else class="container-fluid content" style="min-height: .01%;overflow-x: auto;" v-for="group in servicesTag">
|
||||||
<section v-else class="container content" style="max-width: 95vw; min-height: .01%;overflow-x: auto;" v-for="group in servicesTag">
|
{{template "theme-server-status/service-group-true" .}}
|
||||||
{{template "theme-server-status/service-group-true" .}}
|
</section>
|
||||||
</section>
|
</template>
|
||||||
</template>
|
<!-- showGroup false -->
|
||||||
<!-- showGroup false -->
|
<template v-else>
|
||||||
<template v-else>
|
<section v-if="servicesNoTag.length === 0" class="container-fluid content" style="min-height: .01%;overflow-x: auto;">
|
||||||
<section v-if="servicesNoTag.length === 0" class="container content" style="max-width: 95vw; min-height: .01%;overflow-x: auto;">
|
<p>No Valid Service Monitor Configuration Entries Found. Please Verify in the <a href="/monitor">Admin Panel</a>.</p>
|
||||||
<p>No Valid Service Monitor Configuration Entries Found. Please Verify in the <a href="/monitor">Admin Panel</a>.</p>
|
</section>
|
||||||
</section>
|
<section v-else class="container-fluid content" style="min-height: .01%;overflow-x: auto;">
|
||||||
<section v-else class="container content" style="max-width: 95vw; min-height: .01%;overflow-x: auto;">
|
{{template "theme-server-status/service-group-false" .}}
|
||||||
{{template "theme-server-status/service-group-false" .}}
|
</section>
|
||||||
</section>
|
</template>
|
||||||
</template>
|
{{if .CycleTransferStats}}
|
||||||
{{if .CycleTransferStats}}
|
<section class="container-fluid content table-responsive">
|
||||||
<section class="container content table-responsive" style="max-width: 95vw">
|
<table class="table table-striped table-condensed table-hover">
|
||||||
<table class="table table-striped table-condensed table-hover">
|
<thead>
|
||||||
<thead>
|
<tr class="node-group-tag">
|
||||||
<tr class="node-group-tag">
|
<th colspan="16" style="border:none;">
|
||||||
<th colspan="16" style="border:none;">
|
{{tr "CycleTransferStats"}}
|
||||||
{{tr "CycleTransferStats"}}
|
</th>
|
||||||
</th>
|
</tr>
|
||||||
</tr>
|
<tr class="node-group-cell">
|
||||||
<tr class="node-group-cell">
|
<th class="node-cell center">ID</th>
|
||||||
<th class="node-cell center">ID</th>
|
<th class="node-cell center">{{tr "Rules"}}</th>
|
||||||
<th class="node-cell center">{{tr "Rules"}}</th>
|
<th class="node-cell center">{{tr "Server"}}</th>
|
||||||
<th class="node-cell center">{{tr "Server"}}</th>
|
<th class="node-cell center">{{tr "From"}}</th>
|
||||||
<th class="node-cell center">{{tr "From"}}</th>
|
<th class="node-cell center">{{tr "To"}}</th>
|
||||||
<th class="node-cell center">{{tr "To"}}</th>
|
<th class="node-cell center">MAX</th>
|
||||||
<th class="node-cell center">MAX</th>
|
<th class="node-cell center">MIN</th>
|
||||||
<th class="node-cell center">MIN</th>
|
<th class="node-cell center">{{tr "NextCheck"}}</th>
|
||||||
<th class="node-cell center">{{tr "NextCheck"}}</th>
|
<th class="node-cell center">{{tr "CurrentUsage"}}</th>
|
||||||
<th class="node-cell center">{{tr "CurrentUsage"}}</th>
|
<th class="node-cell center">{{tr "Transleft"}}</th>
|
||||||
<th class="node-cell center">{{tr "Transleft"}}</th>
|
</tr>
|
||||||
</tr>
|
</thead>
|
||||||
</thead>
|
<tbody>
|
||||||
<tbody>
|
{{range $id, $stats := .CycleTransferStats}}
|
||||||
{{range $id, $stats := .CycleTransferStats}}
|
{{range $innerId, $transfer := $stats.Transfer}}
|
||||||
{{range $innerId, $transfer := $stats.Transfer}}
|
{{$TransLeftPercent := TransLeftPercent (UintToFloat $transfer) (UintToFloat $stats.Max)}}
|
||||||
{{$TransLeftPercent := TransLeftPercent (UintToFloat $transfer) (UintToFloat $stats.Max)}}
|
<tr>
|
||||||
<tr>
|
<td class="node-cell center">{{$id}}</td>
|
||||||
<td class="node-cell center">{{$id}}</td>
|
<td class="node-cell center">{{$stats.Name}}</td>
|
||||||
<td class="node-cell center">{{$stats.Name}}</td>
|
<td class="node-cell center">{{index $stats.ServerName $innerId}}</td>
|
||||||
<td class="node-cell center">{{index $stats.ServerName $innerId}}</td>
|
<td class="node-cell center">{{$stats.From|tf}}</td>
|
||||||
<td class="node-cell center">{{$stats.From|tf}}</td>
|
<td class="node-cell center">{{$stats.To|tf}}</td>
|
||||||
<td class="node-cell center">{{$stats.To|tf}}</td>
|
<td class="node-cell center">{{$stats.Max|bf}}</td>
|
||||||
<td class="node-cell center">{{$stats.Max|bf}}</td>
|
<td class="node-cell center">{{$stats.Min|bf}}</td>
|
||||||
<td class="node-cell center">{{$stats.Min|bf}}</td>
|
<td class="node-cell center">{{(index $stats.NextUpdate $innerId)|sft}}</td>
|
||||||
<td class="node-cell center">{{(index $stats.NextUpdate $innerId)|sft}}</td>
|
<td class="node-cell center">{{$transfer|bf}}</td>
|
||||||
<td class="node-cell center">{{$transfer|bf}}</td>
|
<td class="node-cell center">
|
||||||
<td class="node-cell center">
|
<div class="progress">
|
||||||
<div class="progress">
|
<div style="width: {{$TransLeftPercent}}%" :class="'progress-bar progress-bar-' + toSSBar('{{TransClassName $TransLeftPercent}}')">
|
||||||
<div style="width: {{$TransLeftPercent}}%" :class="'progress-bar progress-bar-' + toSSBar('{{TransClassName $TransLeftPercent}}')">
|
<small style="display: inline-block;width: max-content;">{{TransLeft $stats.Max $transfer}} / {{$TransLeftPercent}} %</small>
|
||||||
<small style="display: inline-block;width: max-content;">{{TransLeft $stats.Max $transfer}} / {{$TransLeftPercent}} %</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</td>
|
||||||
{{end}}
|
</tr>
|
||||||
{{end}}
|
{{end}}
|
||||||
</tbody>
|
{{end}}
|
||||||
</table>
|
</tbody>
|
||||||
</section>
|
</table>
|
||||||
{{end}}
|
</section>
|
||||||
{{template "theme-server-status/content-footer" .}}
|
{{end}}
|
||||||
</div>
|
{{template "theme-server-status/footer" .}}
|
||||||
<script>
|
<script>
|
||||||
new Vue({
|
new Vue({
|
||||||
el: '#app',
|
el: '#app',
|
||||||
@ -240,5 +238,4 @@
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
{{template "theme-server-status/footer" .}}
|
|
||||||
{{end}}
|
{{end}}
|
||||||
Loading…
x
Reference in New Issue
Block a user