主题切换相关优化 (#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取值错误
2025-01-22 12:48:14 -05:00 · 2024-03-03 20:36:17 -05:00 · 2024-03-03 20:36:17 -05:00 · 193455c675
commit 193455c675
parent dfb08caae1
15 changed files with 69 additions and 44 deletions
--- 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();
--- 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();
--- 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 }});
--- 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">
--- a/resource/template/theme-daynight/network.html
+++ b/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;
 	    }
--- 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>
--- 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/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}}
--- 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 = {
--- 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">
--- 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;
    }
--- 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;
    }
--- 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}}
--- 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/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}}
--- 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 = {
--- 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;
    }