server-status主题重写network页面 (#407)

* 修复浏览器高分辨率下网络页echart图表显示不全

* server-status主题重写network页面
1. 点击“网络监控”弹出选择服务器
2. 增加服务器搜索筛选功能
3. 自适应lenged高度
4. 适配深色模式与浅色模式
5. 适配半透明模式
6. 适配pc段与移动端

* 刷新cdn缓存

* 增加disposeCharts逻辑

* 增加disposeCharts逻辑

* 标题增加服务器所在地区国旗展示

* 国旗样式修复

* 修复国旗样式

* echart图标高度适配不同分辨率浏览器

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

@@ -171,4 +171,8 @@ body[theme="dark"] .modal-header i.xclose{
 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{
+    border-bottom: 1px solid rgba(110, 112, 121, 0.25);
 }

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

@@ -197,6 +197,10 @@ body[theme="light"] .modal-header i.xclose{
     color: rgba(0, 0, 0, 0.87);
 }
 
+body[theme="light"] .network-box .network-box-header{
+    border-bottom: 1px solid rgba(224, 230, 241, 0.6);
+}
+
 @media only screen and (max-width: 767px) {
     body[theme="light"] .navbar .navbar-nav .open .dropdown-menu {
         background-color: rgba(249, 249, 249, 1);

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

@@ -317,6 +317,78 @@ td.ping-network-quality {
 }
 /* 服务页 正文结束 */
 
+/* 网络页 正文*/
+.network-box .btn-group.open .dropdown-toggle{
+    box-shadow:unset;
+}
+
+.network-box .network-box-header{
+    font-size: 18px;
+    padding: 5px 0px 15px 5px;
+    cursor: pointer;
+    width: 100%;
+}
+
+.network-box .network-box-header .dropdown-menu {
+    max-height: 22.5em;
+    overflow-y: auto;
+    z-index:99999998;
+    min-width: 200px;
+    padding: 0px;
+}
+
+.network-box .network-box-header .dropdown-menu::-webkit-scrollbar {
+    display: none;
+}
+
+.network-box .network-box-header .dropdown-menu li{
+    height: 2em;
+    cursor: pointer;
+}
+
+.network-box .network-box-header .dropdown-menu li.input-group{
+    margin: 0 auto;
+    display: flex;
+    position: sticky;
+    top: 0;
+    z-index: 99999997;
+}
+
+.network-box .network-box-header .dropdown-menu li.input-group input{
+    width: 100%;
+    height: 2em;
+    border-top: none;
+    border-left: none;
+    border-right: none;
+}
+
+.network-box .network-box-header .dropdown-menu li a {
+    padding: 5px 5px 5px 15px;
+}
+
+.network-box .network-box-header .dropdown-menu li.hidden {
+    height: 0;
+    display: none;
+    visibility:hidden;
+}
+
+.network-box .network-box-header .dropdown-menu li.visible {
+    display: block;
+}
+
+.network-box .chartTitle {
+    text-align: center;
+    font-size: 18px;
+    margin: 18px 0px 15px 0px;
+}
+
+.network-box .chartTitle i.chartCountryCode{
+    font-size: 16px;
+    border-radius: 12.5%;
+}
+
+/* 网络页 正文结束 */
+
 /* 地图版服务器分布图 */
 #mapChartBox{
     z-index: 999999999;
@@ -393,6 +465,12 @@ footer p{
     }
 }
 
+/* 彩虹旗 */
+.fi-rb {
+    background-image: url(/static/theme-server-status/img/rb.png);
+}
+
+
 @media only screen and (max-width: 767px) {
     body {
         font-size: 10px !important;
@@ -482,6 +560,18 @@ footer p{
     td.ping-network-quality {
         width: 110px;
     }
+    .network-box .network-box-header {
+        margin: 8px 0px 0px 8px;
+        font-size: 16px;
+    }
+    .network-box .chartTitle {
+        font-size: 16px;
+        margin: 10px 0px 10px 0px;
+    }
+    .network-box .chartTitle i.chartCountryCode{
+        font-size: 15px;
+        border-radius: 12.5%;
+    }
 }
 
 @media only screen and (min-width: 768px) {

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

@@ -14,7 +14,10 @@ const mixinsVue = {
             { key: 'default', name: 'Default', icon: 'th large' },
             { key: 'angel-kanade', name: 'AngelKanade', icon: 'square' },
             { key: 'server-status', name: 'ServerStatus', icon: 'list' }
-        ]
+        ],
+        colors: [],
+        colorsDark: ['#4992FF', '#08C091', '#FDDD5F', '#FF6E76', '#58D9F9', '#7CFFB2', '#FF8A44', '#8D48E3', '#DD79FF', '#5470C6', '#3BA272', '#FAC758', '#EE6666', '#72C0DE', '#91CC76', '#FB8352', '#9A60B4', '#EA7BCC'],
+        colorsLight: ['#5470C6', '#3BA272', '#FAC758', '#EE6666', '#72C0DE', '#91CC76', '#FB8352', '#9A60B4', '#EA7BCC', '#4992FF', '#08C091', '#FDDD5F', '#FF6E76', '#58D9F9', '#7CFFB2', '#FF8A44', '#8D48E3', '#DD79FF'],
     },
     created() {
         this.isMobile = this.checkIsMobile();
@@ -22,6 +25,7 @@ const mixinsVue = {
         this.showGroup = this.initShowGroup();
         this.semiTransparent = this.initSemiTransparent();
         this.preferredTemplate = this.getCookie('preferred_theme') ? this.getCookie('preferred_theme') : this.$root.defaultTemplate;
+        this.colors = this.theme == "dark" ? this.colorsDark : this.colorsLight;
         window.addEventListener('scroll', this.handleScroll);
     },
     destroyed() {
@@ -51,7 +55,7 @@ const mixinsVue = {
             // 重新赋值全局调色
             this.colors = this.theme == "dark" ? this.colorsDark : this.colorsLight;
             
-            if(this.$root.page == 'index') {
+            if(this.$root.page == 'index' || this.$root.page == 'network') {
                 this.reloadCharts(); // 重新载入echarts图表
             }
         },
@@ -81,7 +85,7 @@ const mixinsVue = {
         toggleSemiTransparent(){
             this.semiTransparent = !this.semiTransparent;
             localStorage.setItem("semiTransparent", this.semiTransparent);
-            if(this.$root.page == 'index') {
+            if(this.$root.page == 'index' || this.$root.page == 'network') {
                 this.reloadCharts(); // 重新载入echarts图表
             }
         },