优化default和serverstatus主题模版 (#327)

1.优化default主题模版
2.优化serverstatus主题模版

resource/static/theme-default/css/main.css

@@ -0,0 +1,202 @@
+/* 屏幕适配 */
+@media only screen and (min-width:1200px) {
+  .ui.container {
+    width:95% !important;
+    font-size: 90% !important;
+  }
+}
+@media only screen and (max-width:767px) {
+  .ui.card>.content>.header:not(.ui),.ui.cards>.card>.content>.header:not(.ui) {
+    margin-top:0.4em !important;
+  }
+  .ui.menu .item>img:not(.ui){
+    width: 2.2rem;
+  }
+  .ui.menu .item:before{
+    width:0.5px;
+  }
+  .ui.menu .item{
+    padding: 0.9rem 0.55rem;
+  }
+  .ui.large.menu{
+    font-size: 1rem;
+  }
+}
+
+i.icon {
+  color:#000;
+  width:1.2em !important;
+}
+i.fi {
+    width:0.9em;
+    margin:0px 6px 0px 2px;
+}
+
+body {
+  content:" " !important;
+  background:fixed !important;
+  z-index:-1 !important;
+  top:0 !important;
+  right:0 !important;
+  bottom:0 !important;
+  left:0 !important;
+}
+
+td {
+  word-wrap: break-word;
+  word-break: break-all;
+}
+
+.nb-container {
+  padding-top: 75px;
+  min-height: 100vh;
+  padding-bottom: 65px;
+  margin-bottom: -47px;
+}
+
+#app .ui.fluid.accordion {
+  margin-bottom: 1rem;
+}
+
+.login.nb-container {
+  display: flex;
+  align-items: center;
+  padding-top: unset;
+}
+
+.login.nb-container > .grid {
+  width: 100%;
+  margin: 0 auto;
+}
+
+.login.nb-container > .grid .column {
+  max-width: 450px;
+}
+
+.ui.menu .item-right:before{
+  width:0px;
+}
+
+.status.cards .flag {
+  margin-right: 0 !important;
+}
+
+.status.cards .header > .info.icon {
+  float: right;
+  margin-right: 0;
+}
+
+.status.cards .wide.column {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  height:3.3rem !important;
+}
+
+.status.cards .wide.column:nth-child(1) {
+  margin-top:2rem !important;
+}
+
+.status.cards .wide.column:nth-child(2) {
+  margin-top:2rem !important;
+}
+
+.status.cards .thirteen.wide.column{
+  padding-left:0;
+}
+
+.status.cards .description {
+  padding-bottom:0 !important;
+}
+
+.status.cards .flag {
+  margin-right:0.5rem !important;
+}
+
+.status.cards .header > .info.icon {
+  float: right;
+  margin-right:0 !important;
+}
+
+.ui.popup:before {
+  display: none;
+}
+
+.closePopup{
+  color:rgb(10, 148, 242) !important;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  cursor: pointer;
+  z-index: 9999;
+}
+
+.ui.content {
+  margin:0 !important;
+  padding:1em !important;
+}
+
+.status.cards .ui.content.popup {
+  min-width:calc(100%)!important;
+  line-height:2rem !important;
+  border-radius:5px !important;
+  border:1px solid transparent !important;
+  font-family:Arial,Helvetica,sans-serif !important;
+}
+
+.status.cards .outline.icon {
+  margin-right:1px !important;
+}
+
+.ui.progress .bar {
+  min-width:1.8em !important;
+  border-radius:5px !important;
+  line-height:1.65em !important;
+  text-align: right;
+  padding-right: 0.4em;
+  color: rgba(255, 255, 255, 0.7);
+  font-weight: 700;
+  max-width: 100% !important;
+}
+
+.service-status .delay-today {
+  display: flex;
+  align-items: center;
+}
+
+.service-status .delay-today > i {
+  display: inline-block;
+  width: 1.2em;
+  height: 1.2em;
+  border-radius: 0.6em;
+  background-color: grey;
+  margin-right: 0.3em;
+}
+
+.service-status .danger {
+  background-color: crimson !important;
+}
+
+.service-status .good {
+  background-color: rgb(10, 148, 242) !important;
+}
+
+.service-status .warning {
+  background-color: orange !important;
+}
+
+.nezha-primary-btn {
+  background-color: #0338d6 !important;
+  color: white !important;
+}
+
+.nezha-primary-font {
+  color: #0338d6 !important;
+}
+
+.nezha-secondary-font {
+  color: rgb(10, 148, 242) !important;
+}
+
+.ui-alerts.top-center {
+  z-index: 99999999;
+}

resource/static/theme-server-status/css/main.css

@@ -6,58 +6,120 @@ body {
 /* 导航部分 开始*/
 .navbar {
     min-height: 40px !important;
-}
-
-.navbar-inner{
     margin:0 auto;
+    font-size: 14px;
 }
 
-.pl-md-unset {
+.navbar .container{
     max-width: 95vw;
+    margin: 0 auto;
 }
 
-.navbar-collapse:not([aria-expanded]) .navbar-nav .dropdown-toggle {
+.navbar-inverse{
+    background-image: none;
+    background-color: #1C2127;
+    box-shadow: 0 1px 40px -8px #00000080;
+}
+
+.navbar-inverse .navbar-toggle:focus,
+.navbar-inverse .navbar-toggle:hover {
+    background-color: #1C2127;
+}
+
+.navbar .navbar-collapse:not([aria-expanded]) .navbar-nav .dropdown-toggle {
     margin-top: 18px;
     padding: 0 !important;
 }
 
-.navbar-toggle {
+.navbar .navbar-toggle {
     margin-right:0
 }
 
-.navbar-brand {
+.navbar .navbar-brand {
     font-size: 20px;
     text-align: center;
     padding:12px 0 0 0;
+    margin-right:30px;
 }
 
-.node-cell-expand {
-    max-width: 420px;
+.navbar .node-cell-expand {
     word-break: break-all;
 }
 
-.node-cell-expand-label {
-    margin-right: 5px;
+.navbar .node-cell-expand-label {
+    /*margin-right: 5px;*/
 }
 
-.dropdown .dropdown-toggle {
+.navbar .dropdown .dropdown-toggle {
     padding-bottom: 10px;
     padding-top: 10px;
 }
 
-.navbar-inverse, .nav.navbar-nav {
-    background-image: linear-gradient(rgb(60, 60, 60) 0px, rgb(34, 34, 34) 100%) !important;
+.navbar .navbar-nav {
+    margin:0px -15px;
 }
 
-.navbar-inverse .navbar-nav>li>a {
+.navbar .navbar-nav>li>a {
     color:#f1f1f1;
 }
 
-.navbar-inverse .navbar-brand {
-    font-size: 20px;
+.navbar-nav li a span{
+    margin-right: 4px;
 }
+
+.navbar .navbar-collapse{
+    max-height: 500px;
+}
+
 /* 导航部分 结束 */
 
+
+/* toolbox 开始 */
+
+.toolbox {
+    position: fixed;
+    bottom:20px;
+    right: 12px;
+    z-index: 999999;
+}
+
+.toolbox span{
+    display: block;
+    width: 2.75rem;
+    margin-bottom: 10px;
+}
+
+.toolbox i{
+    display: block;
+    color: rgba(241,241,241,1);
+    cursor: pointer;
+    border-radius: 5px;
+    font-size: 1.5rem;
+    height: 2.75rem;
+    width: 2.75rem;
+    line-height: 2.75rem;
+    text-align: center;
+}
+
+.toolbox .toggleView i.show-nogroup {
+    font-size: 1.85rem;
+}
+
+.toolbox .setTheme i.setTheme-dark {
+    font-size: 1.35rem;
+}
+
+.toolbox .setTheme i.setTheme-light {
+    font-size: 1.45rem;
+}
+
+.toolbox .showGoTop i.goTop {
+    font-size: 1.55rem;
+}
+
+/* toolbox 结束 */
+
+
 /* 正文部分 开始 */
 .content {
     padding: 20px;
@@ -75,15 +137,40 @@ body {
     text-align: left;
 }
 
-.table>thead>tr>th{
-  border:none;  
+.table > tbody > tr > td,
+.table > tbody > tr > th,
+.table > tfoot > tr > td,
+.table > tfoot > tr > th,
+.table > thead > tr > td,
+.table > thead > tr > th {
+    position: relative;
+    border:none; 
+    line-height:20px;
 }
 
-.table .node-group-tag {
+.table > tbody > tr > td:before,
+.table > tbody > tr > th:before,
+.table > tfoot > tr > td:before,
+.table > tfoot > tr > th:before,
+.table > thead > tr > td:before,
+.table > thead > tr > th:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 0.7px;
+}
+
+.table .node-group-tag th{
     font-size: 18px;
     padding-bottom:15px;
 }
 
+.table .node-cell-os-text {
+    text-transform: capitalize;
+}
+
 .progress {
     margin-bottom: 0;
 }
@@ -93,7 +180,6 @@ body {
     padding-left: 5px;
 }
 
-
 .expandRow > td {
     padding: 0 !important;
     border-top: 0 !important;
@@ -131,25 +217,49 @@ body {
 }
 
 .node-cell.network {
-    min-width: 110px;
-    max-width: 110px;
+    min-width: 100px;
+    max-width: 100px;
 }
 
-.node-cell.cpu, .node-cell.ram, .node-cell.hdd {
-    min-width: 45px;
-    max-width: 90px;
+.node-cell.traffic {
+    min-width: 100px;   
+}
+
+.node-cell.cpu, .node-cell.ram, .node-cell.hdd, .node-cell.memory {
+    min-width: 50px;
+    max-width: 50px;
 }
 
 /*正文结束*/
 
 /* 服务页 正文*/
+.service-status {
+
+}
+
+.service-status .service-status-th{
+    min-width:60px;
+}
+
+.service-status .service-name-th{
+    min-width:50px;
+}
+
+.service-status .service-averagelatency-th{
+    min-width:80px;
+}
+
+.service-status .service-30daysonline-th{
+    min-width:80px;
+}
+
 .service-status .delay-today {
     display: flex;
     align-items: center;
     justify-content: left;
 }
 
-.service-status .delay-today > i {
+.service-status .delay-today i {
     width: 12px;
     height: 12px;
     border-radius: 50%;
@@ -163,26 +273,29 @@ body {
     width: 18px;
     height: 18px;
     margin-right: 4px;
+    margin-bottom: -3.25px;
     border-radius: 3px;
     box-shadow: inset 0 2px 2px rgba(0, 0, 0, .1);
 }
 
-.service-status {
-
+.service-status .tooltip-inner {
+    max-width: 500px;
 }
 
+
+
 /* 服务页 正文结束 */
 @media only screen and (max-width: 1200px) {
     .accordian-body{
         margin: 5px 0px 5px 10px;        
     }
-    .table .node-group-tag {
+    .table .node-group-tag th{
         font-size:16px;
         padding-bottom:6px;
     }
 }
 
-@media only screen and (max-width: 720px) {
+@media only screen and (max-width: 767px) {
     body {
         font-size: 10px !important;
         padding-top:60px !important;
@@ -191,6 +304,23 @@ body {
         padding: 0;
         margin-bottom: 10px;
     }
+    .navbar .navbar-nav .open .dropdown-menu>li>a {
+        color: #f1f1f1;
+    }
+    .navbar .navbar-nav .open .dropdown-menu {
+        list-style-image: initial;
+        background-color: #181a1b;
+        border-color: rgba(140, 130, 115, 0.15);
+        box-shadow: rgba(0, 0, 0, 0.18) 0px 6px 12px;
+    }
+    .table > tbody > tr > td:before,
+    .table > tbody > tr > th:before,
+    .table > tfoot > tr > td:before,
+    .table > tfoot > tr > th:before,
+    .table > thead > tr > td:before,
+    .table > thead > tr > th:before {
+        height: 0.5px;
+    }
     .node-cell.os,
     .node-cell.uptime,
     .node-cell.traffic{
@@ -208,10 +338,33 @@ body {
     .accordian-body{
         margin: 5px 0px 5px 10px;        
     }
-    .table .node-group-tag {
-        font-size:12px;
+    .table .node-group-tag th{
+        font-size:16px;
         padding-bottom:6px;
     }
+    .service-status .service-status-th{
+        min-width:30px;
+    }
+    .service-status .delay-today{
+        margin-top:4px;
+        justify-content: center;
+    }
+    .service-status .delay-today i{
+        margin-right:0px;
+    }
+    .service-status .delay-today-text{
+        display: none;
+        visibility: hidden;
+    }
+    .service-status .service-averagelatency-th{
+        min-width:70px;
+    }
+    .service-status .service-30daysonline-th{
+        min-width:75px;
+    }
+    .toolbox {
+        right: 18px;
+    }
 }
 
 @media only screen and (min-width: 768px) {

resource/static/theme-server-status/js/mixin.js

@@ -2,27 +2,74 @@ const mixinsVue = {
     data: {
         cache: [],
         theme: "light",
-        isSystemTheme: false
+        isSystemTheme: false,
+        showGroup: false,
+        showGoTop: false,
+        preferredTemplate: 'default',
+        isMobile: false
     },
     created() {
-        this.initTheme()
+        this.isMobile = this.checkIsMobile();
+        this.initTheme();
+        this.storedShowGroup();
+        this.preferredTemplate = this.getCookie('preferred_theme') ? this.getCookie('preferred_theme') : 'default';
+        window.addEventListener('scroll', this.handleScroll);
+    },
+    destroyed() {
+        window.removeEventListener('scroll', this.handleScroll);
     },
     methods: {
+        toggleView() {
+            this.showGroup = !this.showGroup;
+            localStorage.setItem("showGroup", JSON.stringify(this.showGroup));
+            return this.showGroup;
+        },
+        storedShowGroup() {
+            const storedShowGroup = localStorage.getItem("showGroup");
+            if (storedShowGroup !== null) {
+                this.showGroup = JSON.parse(storedShowGroup);
+            }       
+        },
+        toggleTemplate(template) {
+            if( template != this.preferredTemplate){
+                this.preferredTemplate = template;
+                this.updateCookie("preferred_theme", template);
+                window.location.reload();
+            }
+        },
+        updateCookie(name, value) {
+            document.cookie = name + "=" + value +"; path=/";
+        },
+        getCookie(name) {
+            const cookies = document.cookie.split(';');
+            let cookieValue = null;
+            for (let i = 0; i < cookies.length; i++) {
+                const cookie = cookies[i].trim();
+                if (cookie.startsWith(name + '=')) {
+                    cookieValue = cookie.substring(name.length + 1, cookie.length);
+                    break;
+                }
+            }
+            return cookieValue;
+        },
         setTheme(title, store = false) {
-            this.theme = title
-            document.body.setAttribute("theme", title)
+            this.theme = title;
+            document.body.setAttribute("theme", title);
             if (store) {
-                localStorage.setItem("theme", title)
-                this.isSystemTheme = false
+                localStorage.setItem("theme", title);
+                this.isSystemTheme = false;
+                if(this.$root.page == 'index') {
+                    this.$root.reloadCharts(); //重新载入echarts图表
+                }
             }
         },
         setSystemTheme() {
-            localStorage.removeItem("theme")
-            this.initTheme()
-            this.isSystemTheme = true
+            localStorage.removeItem("theme");
+            this.initTheme();
+            this.isSystemTheme = true;
         },
         initTheme() {
-            const storeTheme = localStorage.getItem("theme")
+            const storeTheme = localStorage.getItem("theme");
             if (storeTheme === 'dark' || storeTheme === 'light') {
                 this.setTheme(storeTheme, true);
             } else {
@@ -45,5 +92,50 @@ const mixinsVue = {
         toFixed2(f) {
             return f.toFixed(2)
         },
+        logOut(id) {
+            $.ajax({
+                type: 'POST',
+                url: '/api/logout',
+                data: JSON.stringify({ id: id }),
+                contentType: 'application/json',
+                success: function (resp) {
+                    if (resp.code == 200) {
+                        window.location.reload();
+                    } else {
+                        alert('注销失败(Error ' + resp.code + '): ' + resp.message);
+                    }
+                },
+                error: function (err) {
+                    alert('网络错误: ' + err.responseText);
+                }
+            });
+        },
+        goTop() {
+            $('html, body').animate({ scrollTop: 0 }, 400);
+            return false;
+        },
+        handleScroll() {
+            this.showGoTop = window.scrollY >= 100;
+        },
+        groupingData(data, field) {
+            let map = new Map();
+            let dest = [];
+
+            data.forEach(item => {
+                if (!map.has(item[field])) {
+                    dest.push({
+                        [field]: item[field],
+                        data: [item]
+                    });
+                    map.set(item[field], item);
+                } else {
+                    dest.find(dItem => dItem[field] === item[field]).data.push(item);
+                }
+            });
+            return dest;
+        },
+        checkIsMobile() { // 检测设备类型,页面宽度小于768px认为是移动设备
+            return window.innerWidth <= 768;
+        }
     }
 }