主题切换相关优化 (#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取值错误
nezhahq · Mar 4, 2024 · 193455c · 193455c
1 parent dfb08ca
commit 193455c
Show file tree

Hide file tree

Showing 15 changed files with 69 additions and 44 deletions.
diff --git a/resource/static/theme-default/js/mixin.js b/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();

diff --git a/resource/static/theme-server-status/js/mixin.js b/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();

diff --git a/resource/template/theme-angel-kanade/footer.html b/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 }});

diff --git a/resource/template/theme-angel-kanade/menu.html b/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>
-        <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#@
-                    <i class="check icon" v-if="preferredTemplate === key"></i>
-                </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="(item, index) in adaptedTemplates" :key="index" @click="toggleTemplate(item.key)" class="item">
+                        <i :class="item.icon + ' icon'"></i>@#item.name#@
+                        <i class="check icon" v-if="preferredTemplate === item.key"></i>
+                    </a>
+                </div>
             </div>
-        </div>
+            {{ end }}
         {{end}}
         <div class="right menu">
             <div class="item">

diff --git a/resource/template/theme-daynight/network.html b/resource/template/theme-daynight/network.html
@@ -109,7 +109,7 @@ <h3>@#server.Name#@</h3>
 <script>
         const monitorInfo =  JSON.parse('{{.MonitorInfos}}');
         const initData = JSON.parse('{{.Servers}}').servers;
-        let MaxTCPPingValue = {{.MaxTCPPingValue}};
+        let MaxTCPPingValue = {{.Conf.MaxTCPPingValue}};
 	    if (MaxTCPPingValue == null) {
 	        MaxTCPPingValue = 300;
 	    }

diff --git a/resource/template/theme-default/footer.html b/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>

diff --git a/resource/template/theme-default/header.html b/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/[email protected]"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/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}}
diff --git a/resource/template/theme-default/home.html b/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;
@@ -207,11 +207,13 @@
         const xAxisData = chartData[0].created_at.map(time => new Date(time).toLocaleString());
         const seriesData = chartData.map(item => {
           let loss = 0;
-          const data = item.avg_delay.map((avgDelay, index) => {
-            if (avgDelay > 0.9 * MaxTCPPingValue) {
+          const data = item.avg_delay.map((avgDelay, index) => {                        
+            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 = {

diff --git a/resource/template/theme-default/menu.html b/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>
-        <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#@
-                    <i class="check icon" v-if="preferredTemplate === key"></i>
-                </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="(item, index) in adaptedTemplates" :key="index" @click="toggleTemplate(item.key)" class="item">
+                        <i :class="item.icon + ' icon'"></i>@#item.name#@
+                        <i class="check icon" v-if="preferredTemplate === item.key"></i>
+                    </a>
+                </div>
             </div>
-        </div>
+        {{ end }}
         {{if .Admin}}
         <div class="item right item-right ui simple dropdown">
             <div class="text">

diff --git a/resource/template/theme-default/network.html b/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;
     }

diff --git a/resource/template/theme-mdui/network.html b/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;
     }

diff --git a/resource/template/theme-server-status/content-nav.html b/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>
-                <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">
-                            <a @click="toggleTemplate(key)">
-                                <i class="list icon"></i>@#value#@
-                                <i class="check icon" v-if="preferredTemplate === key"></i>
-                            </a>
-                        </li>
-                    </ul>
-                </li>
+                {{ 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="(item, index) in adaptedTemplates" :key="index">
+                                <a @click="toggleTemplate(item.key)">
+                                    <i :class="item.icon + ' icon'" style="font-size:1em"></i>@#item.name#@
+                                    <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}}

diff --git a/resource/template/theme-server-status/header.html b/resource/template/theme-server-status/header.html
@@ -28,7 +28,7 @@
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/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}}
diff --git a/resource/template/theme-server-status/home.html b/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;
@@ -305,11 +305,13 @@
                 const xAxisData = chartData[0].created_at.map(time => new Date(time).toLocaleString());
                 const seriesData = chartData.map(item => {
                     let loss = 0;
-                    const data = item.avg_delay.map((avgDelay, index) => {
-                        if (avgDelay > 0.9 * MaxTCPPingValue) {
+                    const data = item.avg_delay.map((avgDelay, index) => {                        
+                        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 = {

diff --git a/resource/template/theme-server-status/network.html b/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;
     }