✨ 支持列表显示服务器负载，默认为关闭状态

public/config.js

@@ -4,6 +4,7 @@ window.$$nazhuaConfig = {
   // infinityCycle: '长期有效', // 无限周期名称
   // buyBtnText: '购买', // 购买按钮文案
   // listServerStatusType: 'progress', // 服务器状态类型--列表
+  // listServerRealTimeShowLoad: false, // 列表显示服务器实时负载
   // detailServerStatusType: 'progress', // 服务器状态类型--详情页
   // disableSarasaTermSC: false, // 禁用Sarasa Term SC字体
   // hideWorldMap: false, // 隐藏地图

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

@@ -49,6 +49,7 @@
       <server-real-time
         v-if="$config.nazhua.hideListItemStat !== true"
         :info="info"
+        :server-real-time-list-tpls="serverRealTimeListTpls"
       />
     </div>
     <server-list-item-bill
@@ -69,6 +70,7 @@ import {
 import {
   useRouter,
 } from 'vue-router';
+import config from '@/config';
 import * as hostUtils from '@/utils/host';
 
 import handleServerInfo from '@/views/composable/server-info';
@@ -94,6 +96,13 @@ const { cpuAndMemAndDisk } = handleServerInfo({
 
 const platformLogoIconClassName = computed(() => hostUtils.getPlatformLogoIconClassName(props.info?.Host?.Platform));
 
+const serverRealTimeListTpls = computed(() => {
+  if (config.nazhua?.listServerRealTimeShowLoad) {
+    return 'duration,load,transfer,speeds';
+  }
+  return 'duration,transfer,inSpeed,outSpeed';
+});
+
 function openDetail() {
   router.push({
     name: 'ServerDetail',

src/views/components/server/server-real-time.vue

@@ -7,10 +7,36 @@
       :class="`server-real-time--${item.key}`"
     >
       <div class="item-content">
-        <span class="item-value">{{ item?.value || '-' }}</span>
+        <div
-        <span class="item-unit item-text">{{ item?.value ? item?.unit : '' }}</span>
+          v-if="item.show && item.values"
+          class="item-content-sub-group"
+        >
+          <span
+            v-for="subItem in item.values"
+            :key="`${item.key}_${subItem.key}`"
+            class="item-content-sub-item"
+            :class="`item-content-sub-item--${item.key}-${subItem.key}`"
+          >
+            <span class="item-content-sub-label">
+              {{ subItem.label }}
+            </span>
+            <span class="item-content-sub-content">
+              <span class="item-value">{{ subItem.show ? subItem?.value : '-' }}</span>
+              <span class="item-unit item-text">{{ subItem.show ? subItem?.unit : '' }}</span>
+            </span>
+          </span>
+        </div>
+        <template v-else>
+          <span class="item-value">{{ item.show ? item?.value : '-' }}</span>
+          <span class="item-unit item-text">{{ item.show ? item?.unit : '' }}</span>
+        </template>
       </div>
-      <span class="item-label">{{ item.label }}</span>
+      <span
+        v-if="!item.values"
+        class="item-label"
+      >
+        {{ item.label }}
+      </span>
     </div>
   </div>
 </template>
@@ -29,6 +55,10 @@ const props = defineProps({
     type: Object,
     default: () => ({}),
   },
+  serverRealTimeListTpls: {
+    type: String,
+    default: undefined,
+  },
 });
 
 const currentTime = inject('currentTime', {
@@ -40,6 +70,7 @@ const {
 } = handleServerRealTime({
   props,
   currentTime,
+  serverRealTimeListTpls: props.serverRealTimeListTpls,
 });
 </script>
 
@@ -78,6 +109,51 @@ const {
       font-size: var(--real-time-label-font-size, 14px);
       color: #ddd;
     }
+
+    .item-content-sub-group {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+      .item-content-sub-item {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        gap: 2px;
+      }
+
+      .item-content-sub-content {
+        display: flex;
+        align-items: center;
+      }
+
+      .item-value {
+        line-height: 1em;
+        font-size: var(--real-time-label-font-size, 14px);
+      }
+
+      .item-text {
+        line-height: 1em;
+        font-size: var(--real-time-label-font-size, 14px);
+      }
+
+      .item-label {
+        line-height: 1em;
+        font-size: var(--real-time-label-font-size, 14px);
+      }
+
+      .item-content-sub-item--speeds-in {
+        .item-value {
+          color: var(--net-speed-in-color);
+        }
+      }
+      .item-content-sub-item--speeds-out {
+        .item-value {
+          color: var(--net-speed-out-color);
+        }
+      }
+    }
   }
 
   .server-real-time--duration {
@@ -90,7 +166,8 @@ const {
       color: var(--transfer-color);
     }
   }
-  .server-real-time--inSpeed {
+  .server-real-time--inSpeed,
+  .server-real-time--speed {
     .item-value {
       color: var(--net-speed-in-color);
     }

src/views/composable/server-real-time.js

@@ -174,6 +174,7 @@ export default (params) => {
           label: '在线',
           value: duration.value?.value,
           unit: duration.value?.unit,
+          show: validate.isSet(duration.value?.value),
         };
       case 'transfer':
         return {
@@ -181,6 +182,7 @@ export default (params) => {
           label: `${transfer.value.statTypeLabel}流量`,
           value: transfer.value?.value,
           unit: transfer.value?.unit,
+          show: validate.isSet(transfer.value?.value),
         };
       case 'inSpeed':
         return {
@@ -188,6 +190,7 @@ export default (params) => {
           label: '入网',
           value: netInSpeed.value?.value,
           unit: netInSpeed.value?.unit,
+          show: validate.isSet(netInSpeed.value?.value),
         };
       case 'outSpeed':
         return {
@@ -195,6 +198,37 @@ export default (params) => {
           label: '出网',
           value: netOutSpeed.value?.value,
           unit: netOutSpeed.value?.unit,
+          show: validate.isSet(netOutSpeed.value?.value),
+        };
+      case 'speeds':
+        return {
+          key,
+          label: '网速',
+          values: [
+            {
+              key: 'in',
+              label: '入网',
+              value: netInSpeed.value?.value,
+              unit: netInSpeed.value?.unit,
+              show: validate.isSet(netInSpeed.value?.value),
+            },
+            {
+              key: 'out',
+              label: '出网',
+              value: netOutSpeed.value?.value,
+              unit: netOutSpeed.value?.unit,
+              show: validate.isSet(netOutSpeed.value?.value),
+            },
+          ],
+          show: validate.isSet(netInSpeed.value?.value) && validate.isSet(netOutSpeed.value?.value),
+        };
+      case 'load':
+        return {
+          key,
+          label: '负载',
+          value: (props.info.State?.Load1 || 0).toFixed(2) * 1,
+          unit: '',
+          show: validate.isSet(props.info.State?.Load1),
         };
       default:
     }