ServerStatus主题优化 (#386)

* ServerStatus主题优化 1.更新世界地图基础geo文件,中国部分包含南海10段线,藏南部分划线更准 geo在大佬仓库https://github.com/Surbowl/world-geo-json-zh的基础上加工 2.世界地图可以在后台设置自定义代码切换是否包含南极洲，中国港澳台是否单独统计vps数 ```<script> localStorage.setItem('countryMapGeoFile', 'nezha.world.geo.json'); //默认 // localStorage.setItem('countryMapGeoFile', 'nezha.world.plus.geo.json'); //单独绘制香港,澳门,台湾 // localStorage.setItem('countryMapGeoFile', 'nezha.world.antarctica.geo.json'); //有南极洲 // localStorage.setItem('countryMapGeoFile', 'nezha.world.plus.antarctica.geo.json'); //有南极洲,单独绘制香港,澳门,台湾 </script> ``` 3. mixin.js文件删除冗余代码 4. 首页agent下拉详情，控制网络折线图tooltip数字最多显示小数点后两位 * 修正geo文件路径 * 修复世界地图中国港澳台单独绘制时,vps数量计算逻辑 * 删除header中的无用的地图基础数据引用 * 增加温度控制cpu型号识别
nezhahq · Jul 10, 2024 · f4c6f4c · f4c6f4c
1 parent 4df60c6
commit f4c6f4c
Show file tree

Hide file tree

Showing 10 changed files with 2,360 additions and 115 deletions.
diff --git a/resource/static/theme-server-status/js/mixin.js b/resource/static/theme-server-status/js/mixin.js
@@ -7,6 +7,7 @@ const mixinsVue = {
         showGoTop: false,
         preferredTemplate: null,
         isMobile: false,
+        staticUrl: '/static/theme-server-status',
         adaptedTemplates: [
             { key: 'default', name: 'Default', icon: 'th large' },
             { key: 'angel-kanade', name: 'AngelKanade', icon: 'square' },
@@ -15,34 +16,45 @@ const mixinsVue = {
     },
     created() {
         this.isMobile = this.checkIsMobile();
-        this.initTheme();
-        this.storedShowGroup();
+        this.theme = this.initTheme();
+        this.showGroup = this.initShowGroup();
         this.preferredTemplate = this.getCookie('preferred_theme') ? this.getCookie('preferred_theme') : this.$root.defaultTemplate;
         window.addEventListener('scroll', this.handleScroll);
     },
     destroyed() {
         window.removeEventListener('scroll', this.handleScroll);
     },
     methods: {
-        toggleView() {
-            this.showGroup = !this.showGroup;
-            localStorage.setItem("showGroup", JSON.stringify(this.showGroup));
-            if(this.$root.page == 'service') {
-                this.$root.initTooltip();
+        initTheme() {
+            const storedTheme = localStorage.getItem("theme");
+            const theme = (storedTheme === 'dark' || storedTheme === 'light') ? storedTheme : (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+            this.setTheme(theme);
+            return theme;
+        },
+        setTheme(theme) {
+            document.body.setAttribute("theme", theme);
+            this.theme = theme;
+            localStorage.setItem("theme", theme);
+            // 重新赋值全局调色
+            this.colors = this.theme == "dark" ? this.colorsDark : this.colorsLight;
+
+            if(this.$root.page == 'index') {
+                this.reloadCharts(); // 重新载入echarts图表
             }
-            return this.showGroup;
         },
-        storedShowGroup() {
+        initShowGroup() {
             const storedShowGroup = localStorage.getItem("showGroup");
-            if (storedShowGroup !== null) {
-                this.showGroup = JSON.parse(storedShowGroup);
-            }   
+            const showGroup = storedShowGroup !== null ? JSON.parse(storedShowGroup) : false;
+            if (storedShowGroup === null) {
+                localStorage.setItem("showGroup", showGroup);
+            }
+            return showGroup;
         },
-        toggleTemplate(template) {
-            if( template != this.preferredTemplate){
-                this.preferredTemplate = template;
-                this.updateCookie("preferred_theme", template);
-                window.location.reload();
+        toggleShowGroup() {
+            this.showGroup = !this.showGroup;
+            localStorage.setItem("showGroup", this.showGroup);
+            if (this.$root.page == 'service') {
+                this.$root.initTooltip();
             }
         },
         updateCookie(name, value) {
@@ -60,43 +72,6 @@ const mixinsVue = {
             }
             return cookieValue;
         },
-        setTheme(title, store = false) {
-            this.theme = title;
-            document.body.setAttribute("theme", title);
-            if (store) {
-                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;
-        },
-        initTheme() {
-            const storeTheme = localStorage.getItem("theme");
-            if (storeTheme === 'dark' || storeTheme === 'light') {
-                this.setTheme(storeTheme, true);
-            } else {
-                this.isSystemTheme = true
-                const handleChange = (mediaQueryListEvent) => {
-                    if (localStorage.getItem("theme")) {
-                        return
-                    }
-                    if (mediaQueryListEvent.matches) {
-                        this.setTheme('dark');
-                    } else {
-                        this.setTheme('light');
-                    }
-                }
-                const mediaQueryListDark = window.matchMedia('(prefers-color-scheme: dark)');
-                this.setTheme(mediaQueryListDark.matches ? 'dark' : 'light');
-                mediaQueryListDark.addEventListener("change", handleChange);
-            }
-        },
         toFixed2(f) {
             return f.toFixed(2)
         },