🪄 优化不同尺寸下的server-status处理；移动端环境下的server-status替代card模式采用尽可能的最小化处理

src/config/index.js

@@ -32,9 +32,14 @@ const config = reactive({
 if (config.nazhua.nezhaVersion) {
   config.init = true;
 }
-if (window.$$serverStatus) {
-  config.nazhua.listServerItemType = 'server-status';
+
+function handle$$serverStatus() {
+  if (window.$$serverStatus) {
+    config.nazhua.listServerItemType = 'server-status';
+    config.nazhua.homeWorldMapPosition = 'bottom';
+  }
 }
+handle$$serverStatus();
 
 function setColorMode() {
   if (config.nazhua.simpleColorMode) {
@@ -67,9 +72,7 @@ export function mergeNazhuaConfig(customConfig) {
   });
   replaceFavicon();
   setColorMode();
-  if (window.$$serverStatus) {
-    config.nazhua.listServerItemType = 'server-status';
-  }
+  handle$$serverStatus();
 }
 // 暴露合并配置方法
 window.$mergeNazhuaConfig = mergeNazhuaConfig;

src/views/components/server-list/card/server-list-item-bill.vue

@@ -162,12 +162,24 @@ const show = computed(() => {
   align-items: center;
   justify-content: space-between;
   gap: 20px;
-  height: 40px;
   border-bottom-left-radius: var(--list-item-border-radius);
   border-bottom-right-radius: var(--list-item-border-radius);
   background: rgba(#000, 0.3);
   box-shadow: 0 -2px 4px rgba(#000, 0.5);
 
+  --list-item-bill-height: 40px;
+  --list-item-bill-font-size: 14px;
+  --list-item-bill-icon-font-size: 16px;
+
+  height: var(--list-item-bill-height);
+  font-size: var(--list-item-bill-font-size);
+
+  @media screen and (max-width: 720px) {
+    --list-item-bill-height: 30px;
+    --list-item-bill-font-size: 12px;
+    --list-item-bill-icon-font-size: 14px;
+  }
+
   &.dot-dot-box--hide {
     box-shadow: none;
     border-top: 1px solid rgba(#ddd, 0.1);
@@ -186,23 +198,27 @@ const show = computed(() => {
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 30px;
-      height: 30px;
+      width: calc(var(--list-item-bill-height) * 0.75);
+      height: calc(var(--list-item-bill-height) * 0.75);
       line-height: 1;
-      font-size: 16px;
+      font-size: var(--list-item-bill-icon-font-size);
       color: #74dbef;
     }
 
     .text {
       display: flex;
       align-items: center;
-      line-height: 30px;
+      line-height: var(--list-item-bill-height);
       color: #ddd;
     }
 
     .value-text {
       color: #74dbef;
     }
+
+    @media screen and (max-width: 720px) {
+      padding-left: 6px;
+    }
   }
 
   .tag-list {

src/views/components/server-list/card/server-list-item-status.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="server-list-item-status"
-    :class="'type--' + componentName"
+    :class="classNames"
   >
     <component
       :is="componentMaps[componentName]"
@@ -21,6 +21,10 @@
  * 服务器状态盒子
  */
 
+import {
+  computed,
+} from 'vue';
+
 import config from '@/config';
 
 import handleServerStatus from '@/views/composable/server-status';
@@ -39,10 +43,13 @@ const componentMaps = {
   progress: ServerStatusProgress,
 };
 
-const componentName = [
-  'donut',
-  'progress',
-].includes(config.nazhua.listServerStatusType) ? config.nazhua.listServerStatusType : 'donut';
+const componentName = computed(() => {
+  const name = [
+    'donut',
+    'progress',
+  ].includes(config.nazhua.listServerStatusType) ? config.nazhua.listServerStatusType : 'donut';
+  return config.nazhua.listServerItemType === 'server-status' ? 'progress' : name;
+});
 
 const {
   serverStatusList,
@@ -51,6 +58,13 @@ const {
   statusListTpl: 'cpu,mem,disk',
   statusListItemContent: false,
 });
+
+const classNames = computed(() => {
+  const names = {};
+  names[`type--${componentName.value}`] = true;
+  names[`len--${serverStatusList.value?.length}`] = true;
+  return names;
+});
 </script>
 
 <style lang="scss" scoped>
@@ -63,11 +77,16 @@ const {
     flex-wrap: wrap;
     gap: 10px;
 
+    --progress-bar-width: calc(50% - 5px);
     --progress-bar-height: 20px;
 
-    @media screen and (max-width: 350px) {
+    @media screen and (max-width: 400px) {
       --progress-bar-height: 16px;
-      padding: 0 15px;
+      padding: 0 10px;
+    }
+
+    &.len--3 {
+      --progress-bar-width: calc((100% - 20px) / 3);
     }
   }
 

src/views/components/server-list/card/server-list-item.vue

@@ -90,7 +90,7 @@ const { cpuAndMemAndDisk } = handleServerInfo({
 const platformLogoIconClassName = computed(() => hostUtils.getPlatformLogoIconClassName(props.info?.Host?.Platform));
 
 const serverRealTimeListTpls = computed(() => {
-  if (config.nazhua?.listServerRealTimeShowLoad) {
+  if (config.nazhua?.listServerRealTimeShowLoad || config.nazhua.listServerItemType === 'server-status') {
     return 'D-A-T,T-A-U,L-A-P,I-A-O';
   }
   return 'duration,transfer,inSpeed,outSpeed';
@@ -114,12 +114,12 @@ function openDetail() {
   transition: 0.3s;
 
   .server-info-group {
+    --list-item-head-height: 50px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 10px;
     padding: 0 15px;
-    height: 50px;
     border-top-left-radius: var(--list-item-border-radius);
     border-top-right-radius: var(--list-item-border-radius);
     background: rgba(#000, 0.3);
@@ -128,6 +128,7 @@ function openDetail() {
 
     @media screen and (max-width: 768px) {
       cursor: default;
+      --list-item-head-height: 40px;
     }
 
     &.dot-dot-box--hide {
@@ -138,6 +139,7 @@ function openDetail() {
     &.server-list-item-head {
       flex-wrap: wrap;
       overflow: hidden;
+      height: var(--list-item-head-height, 50px);
     }
 
     .left-box,
@@ -196,6 +198,8 @@ function openDetail() {
   --real-time-text-font-size: 12px;
   --real-time-label-font-size: 14px;
 
+  font-size: var(--real-time-label-font-size);
+
   @media screen and (max-width: 1280px) {
     padding: 10px 0 15px;
 
@@ -210,8 +214,12 @@ function openDetail() {
     --real-time-value-font-size: 20px;
   }
 
-  @media screen and (max-width: 680px) {
+  @media screen and (max-width: 720px) {
     --real-time-value-font-size: 24px;
+    --real-time-text-font-size: 12px;
+    --real-time-label-font-size: 12px;
+
+    padding: 5px 0;
   }
 
   @media screen and (max-width: 320px) {

src/views/components/server-list/server-status/server-status.js

@@ -159,7 +159,7 @@ const COLUMN_MAP = Object.freeze({
  * 默认列配置
  */
 // eslint-disable-next-line max-len, vue/max-len
-const DEFAULT_COLUMNS = 'status,name,country,system,config,duration,speeds,transfer,conns,load,cpuText,memText,diskText,billing,remainingTime';
+const DEFAULT_COLUMNS = 'status,name,country,system,config,duration,speeds,transfer,tcp,udp,load,cpuText,memText,diskText,billing,remainingTime';
 
 /**
  * 需要实时更新的数据

src/views/components/server-list/server-status/table/td.vue

@@ -118,6 +118,7 @@ function isSet(value) {
     align-items: center;
     justify-content: var(--td-content-justify-content);
     width: 100%;
+    line-height: var(--server-status-td-height);
 
     &--transfer {
       .text--value {
@@ -148,6 +149,18 @@ function isSet(value) {
       }
     }
 
+    &--tcp {
+      .text--value {
+        color: var(--conn-tcp-color);
+      }
+    }
+
+    &--udp {
+      .text--value {
+        color: var(--conn-udp-color);
+      }
+    }
+
     &--load {
       .text--value {
         color: var(--load-color);

src/views/components/server/server-status-progress.vue

@@ -99,13 +99,13 @@ const progressStyle = computed(() => {
 
   @media screen and (max-width: 480px) {
     flex: none;
-    width: calc(50% - 5px);
+    width: var(--progress-bar-width, calc(50% - 5px));
   }
 
-  @media screen and (max-width: 350px) {
-    flex: none;
-    width: 100%;
-  }
+  // @media screen and (max-width: 350px) {
+  //   flex: none;
+  //   width: 100%;
+  // }
 
   .progress-bar-box {
     position: relative;

src/views/home.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="index-container">
+  <div
+    class="index-container"
+    :class="indexContainerClass"
+  >
     <div class="scroll-container">
       <div
         v-if="worldMapPosition === 'top' && showWorldMap"
@@ -170,6 +173,20 @@ const showListCard = computed(() => {
   return true;
 });
 
+const indexContainerClass = computed(() => {
+  const className = {};
+  if (showListRow.value) {
+    className['list-is--row'] = true;
+  }
+  if (showListCard.value) {
+    className['list-is--card'] = true;
+  }
+  if (showListRowByServerStatus.value) {
+    className['list-is--server-status'] = true;
+  }
+  return className;
+});
+
 const showFilter = computed(() => config.nazhua.hideFilter !== true);
 const filterFormData = ref({
   tag: '',
@@ -410,6 +427,7 @@ onActivated(() => {
 .index-container {
   width: 100%;
   height: 100%;
+  overflow: hidden;
 
   .scroll-container {
     display: flex;
@@ -428,6 +446,19 @@ onActivated(() => {
   .bottom-world-map {
     margin-top: 30px;
   }
+
+  &.list-is--server-status {
+    --list-container-width: 1300px;
+    // 针对1440px以下的屏幕
+    @media screen and (max-width: 1440px) {
+      --list-container-width: 1300px;
+    }
+
+    // 针对1280px以下的屏幕
+    @media screen and (max-width: 1280px) {
+      --list-container-width: 1200px;
+    }
+  }
 }
 
 .fitler-group {