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

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

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

* 刷新cdn缓存

* 增加disposeCharts逻辑

* 增加disposeCharts逻辑

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

* 国旗样式修复

* 修复国旗样式

* echart图标高度适配不同分辨率浏览器
This commit is contained in:
nap0o
2024-08-10 11:19:52 -04:00
committed by GitHub
parent d9097540c3
commit c18e0e420e
12 changed files with 460 additions and 225 deletions

View File

@@ -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图表
}
},