主题切换相关优化 (#331)

* angel-kanade模版增加主题切换功能

* Add files via upload

* 调整legend图例间距

* 渲染方式调整会canvas

* Update home.html

* Add files via upload

* Add files via upload

* Update footer.html

* Add files via upload

* Add files via upload

* 消除echarts折线上无效的0值

* 消除echarts折线的0值,替换为平均值

* 消除echarts折线图上的0值

* 修复MaxTCPPingValue取值错误

resource/static/theme-default/js/mixin.js

@@ -2,7 +2,12 @@ const mixinsVue = {
     delimiters: ['@#', '#@'],
     data: {
         preferredTemplate: null,
-        isMobile: false
+        isMobile: false,
+        adaptedTemplates: [
+            { key: 'default', name: 'Default', icon: 'th large' },
+            { key: 'angel-kanade', name: 'AngelKanade', icon: 'square' },
+            { key: 'server-status', name: 'SeverStatus', icon: 'list' }
+        ]
     },
     created() {
         this.isMobile = this.checkIsMobile();

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

@@ -6,7 +6,12 @@ const mixinsVue = {
         showGroup: false,
         showGoTop: false,
         preferredTemplate: null,
-        isMobile: false
+        isMobile: false,
+        adaptedTemplates: [
+            { key: 'default', name: 'Default', icon: 'th large' },
+            { key: 'angel-kanade', name: 'AngelKanade', icon: 'square' },
+            { key: 'server-status', name: 'SeverStatus', icon: 'list' }
+        ]
     },
     created() {
         this.isMobile = this.checkIsMobile();

resource/template/theme-angel-kanade/footer.html

@@ -14,7 +14,7 @@
 <script src="/static/semantic-ui-alerts.min.js"></script>
 <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/vue/2.6.14/vue.min.js"></script>
 <script src="/static/main.js?v20240224"></script>
-<script src="/static/theme-default/js/mixin.js?v20240226"></script>
+<script src="/static/theme-default/js/mixin.js?v20240302"></script>
 <script>
     (function () {
         updateLang({{.LANG }});

resource/template/theme-angel-kanade/menu.html

@@ -16,14 +16,17 @@
         {{else}}
         <a class='item{{if eq .MatchedPath "/"}} active{{end}}' href="/"><i class="home icon"></i>{{tr "Home"}}</a>
         <a class='item{{if eq .MatchedPath "/service"}} active{{end}}' href="/service"><i class="rss icon"></i>{{tr "Services"}}</a>
+            {{ if not .Conf.DisableSwitchTemplateInFrontend }}        
             <div class="item ui simple dropdown">
                 <div class="text"><i class="bi bi-incognito icon" style="margin-right:3px;"></i>{{tr "Template" }}<i class="dropdown icon" style="margin-right:0px;"></i></div>
                 <div class="menu"> 
-                <a v-for="(value, key) in templates" :key="key" @click="toggleTemplate(key)" class="item"><i class="th large icon"></i>@#value#@
+                    <a v-for="(item, index) in adaptedTemplates" :key="index" @click="toggleTemplate(item.key)" class="item">
-                    <i class="check icon" v-if="preferredTemplate === key"></i>
+                        <i :class="item.icon + ' icon'"></i>@#item.name#@
+                        <i class="check icon" v-if="preferredTemplate === item.key"></i>
                     </a>
                 </div>
             </div>
+            {{ end }}
         {{end}}
         <div class="right menu">
             <div class="item">

resource/template/theme-daynight/network.html

@@ -109,7 +109,7 @@
 <script>
         const monitorInfo =  JSON.parse('{{.MonitorInfos}}');
         const initData = JSON.parse('{{.Servers}}').servers;
-        let MaxTCPPingValue = {{.MaxTCPPingValue}};
+        let MaxTCPPingValue = {{.Conf.MaxTCPPingValue}};
 	    if (MaxTCPPingValue == null) {
 	        MaxTCPPingValue = 300;
 	    }

resource/template/theme-default/footer.html

@@ -11,6 +11,7 @@
 <script>
     function showSwitchTemplate(list, currentBackendTheme) {
         console.log(list, currentBackendTheme);
+        console.log("currentBackendTheme:",currentBackendTheme);
     }
     showSwitchTemplate({{ .Themes }}, {{ .Conf.Site.Theme }})
 </script>

resource/template/theme-default/header.html

@@ -19,7 +19,7 @@
     <script src="/static/semantic-ui-alerts.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
     <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
-    <script src="/static/theme-default/js/mixin.js?v20240226"></script>
+    <script src="/static/theme-default/js/mixin.js?v20240302"></script>
 </head>
 <body>
 {{end}}

resource/template/theme-default/home.html

@@ -185,7 +185,7 @@
       },
       renderCharts(id) {
         if (!this.chartDataList[id - 1]) return;
-        const MaxTCPPingValue = {{.MaxTCPPingValue}} ? {{.MaxTCPPingValue}} : 300;
+        const MaxTCPPingValue = {{.Conf.MaxTCPPingValue}} ? {{.Conf.MaxTCPPingValue}} : 300;
         const isMobile = this.checkIsMobile();
         const fontSize = isMobile ? 10 : 9;
         const itemGap = isMobile ? 6 : 6;
@@ -208,10 +208,12 @@
         const seriesData = chartData.map(item => {
           let loss = 0;
           const data = item.avg_delay.map((avgDelay, index) => {                        
-            if (avgDelay > 0.9 * MaxTCPPingValue) {
+            if(avgDelay > 0 && avgDelay < MaxTCPPingValue){
+              loss += avgDelay > 0.9 * MaxTCPPingValue ? 1 : 0;
+              return [item.created_at[index], avgDelay];
+            }else{
               loss += 1;
             }
-            return [item.created_at[index], avgDelay];
           });
           const lossRate = ((loss / item.created_at.length) * 100).toFixed(1);
           item.monitor_name = item.monitor_name.includes("%") ? item.monitor_name : `${item.monitor_name} ${lossRate}%`;
@@ -220,7 +222,8 @@
             type: 'line',
             smooth: true,
             symbol: 'none',
-            data: data
+            data: data,
+            connectNulls: true
           };
         });
         const option = {

resource/template/theme-default/menu.html

@@ -19,14 +19,17 @@
             <a href="/service" class='item'><i class="rss icon"></i>{{tr "Services" }}</a>
             <a href="/network" class="item"><i class="bi bi-hdd-network icon"></i>{{tr "NetworkSpiter"}}</a>
         </template>
+        {{ if not .Conf.DisableSwitchTemplateInFrontend }}        
             <div class="item ui simple dropdown">
                 <div class="text"><i class="bi bi-incognito icon" style="margin-right:3px;"></i>{{tr "Template" }}<i class="dropdown icon" style="margin-right:0px;"></i></div>
                 <div class="menu"> 
-                <a v-for="(value, key) in templates" :key="key" @click="toggleTemplate(key)" class="item"><i class="th large icon"></i>@#value#@
+                    <a v-for="(item, index) in adaptedTemplates" :key="index" @click="toggleTemplate(item.key)" class="item">
-                    <i class="check icon" v-if="preferredTemplate === key"></i>
+                        <i :class="item.icon + ' icon'"></i>@#item.name#@
+                        <i class="check icon" v-if="preferredTemplate === item.key"></i>
                     </a>
                 </div>
             </div>
+        {{ end }}
         {{if .Admin}}
         <div class="item right item-right ui simple dropdown">
             <div class="text">

resource/template/theme-default/network.html

@@ -27,7 +27,7 @@
 <script>
     const monitorInfo =  JSON.parse('{{.MonitorInfos}}');
     const initData = JSON.parse('{{.Servers}}').servers;
-    let MaxTCPPingValue = {{.MaxTCPPingValue}};
+    let MaxTCPPingValue = {{.Conf.MaxTCPPingValue}};
     if (MaxTCPPingValue == null) {
         MaxTCPPingValue = 1000;
     }

resource/template/theme-mdui/network.html

@@ -54,7 +54,7 @@
 <script>
     const monitorInfo =  JSON.parse('{{.MonitorInfos}}');
     const initData = JSON.parse('{{.Servers}}').servers;
-    let MaxTCPPingValue = {{.MaxTCPPingValue}};
+    let MaxTCPPingValue = {{.Conf.MaxTCPPingValue}};
     if (MaxTCPPingValue == null) {
         MaxTCPPingValue = 1000;
     }

resource/template/theme-server-status/content-nav.html

@@ -29,17 +29,19 @@
                     <li><a href="/service"><i class="rss icon"></i>{{tr "Services" }}</a></li>
                     <li><a href="/network"><i class="bi bi-hdd-network icon"></i>{{tr "NetworkSpiter"}}</a></li>
                 </template>
+                {{ if not .Conf.DisableSwitchTemplateInFrontend }}
                     <li class="dropdown">
                         <a data-toggle="dropdown"><i class="bi bi-incognito" style="position:relative;top:1px;margin-right:3px;font-size:1.2rem;vertical-align:top;"></i>{{tr "Template" }}<b class="caret"></b></a>
                         <ul class="dropdown-menu">
-                        <li v-for="(value, key) in templates" :key="key">
+                            <li v-for="(item, index) in adaptedTemplates" :key="index">
-                            <a @click="toggleTemplate(key)">
+                                <a @click="toggleTemplate(item.key)">
-                                <i class="list icon"></i>@#value#@
+                                    <i :class="item.icon + ' icon'" style="font-size:1em"></i>@#item.name#@
-                                <i class="check icon" v-if="preferredTemplate === key"></i>
+                                    <i class="check icon" v-if="preferredTemplate === item.key"></i>
                                 </a>
                             </li>
                         </ul>
                     </li>
+                {{ end }}
             </ul>
             <ul class="nav navbar-nav navbar-right">
                 {{if .Admin}}

resource/template/theme-server-status/header.html

@@ -28,7 +28,7 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
     <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
-    <script src="/static/theme-server-status/js/mixin.js?v20240226"></script>
+    <script src="/static/theme-server-status/js/mixin.js?v20240302"></script>
 </head>
 <body>
 {{end}}

resource/template/theme-server-status/home.html

@@ -280,7 +280,7 @@
                     if ( chartboxShow === '0' ) return; 
                 }
                 // 定义图表参数值
-                const MaxTCPPingValue = {{.MaxTCPPingValue}} ? {{.MaxTCPPingValue}} : 300;
+                const MaxTCPPingValue = {{.Conf.MaxTCPPingValue}} ? {{.Conf.MaxTCPPingValue}} : 300;
                 const isMobile = this.checkIsMobile();
                 const fontSize = isMobile ? 10 : 14;
                 const gridLeft = isMobile ? 25 : 36;
@@ -306,10 +306,12 @@
                 const seriesData = chartData.map(item => {
                     let loss = 0;
                     const data = item.avg_delay.map((avgDelay, index) => {                        
-                        if (avgDelay > 0.9 * MaxTCPPingValue) {
+                        if(avgDelay > 0 && avgDelay < MaxTCPPingValue){
+                            loss += avgDelay > 0.9 * MaxTCPPingValue ? 1 : 0;
+                            return [item.created_at[index], avgDelay];
+                        }else{
                             loss += 1;
                         }
-                        return [item.created_at[index], avgDelay];
                     });
                     const lossRate = ((loss / item.created_at.length) * 100).toFixed(1);
                     item.monitor_name = item.monitor_name.includes("%") ? item.monitor_name : `${item.monitor_name} ${lossRate}%`;
@@ -318,7 +320,8 @@
                         type: 'line',
                         smooth: true,
                         symbol: 'none',
-                        data: data
+                        data: data,
+                        connectNulls: true
                     };
                 });
                 const option = {

resource/template/theme-server-status/network.html

@@ -21,7 +21,7 @@
 <script>
     const monitorInfo =  JSON.parse('{{.MonitorInfos}}');
     const initData = JSON.parse('{{.Servers}}').servers;
-    let MaxTCPPingValue = {{.MaxTCPPingValue}};
+    let MaxTCPPingValue = {{.Conf.MaxTCPPingValue}};
     if (MaxTCPPingValue == null) {
         MaxTCPPingValue = 1000;
     }