✨ 列表页添加连接数的显示

src/assets/scss/variables.scss

@@ -16,12 +16,17 @@
   
   --world-map-point-color: #fff143;
 
-  --duration-color: #cbf1f5;
+  --duration-color: #89c3eb;
   --transfer-color: #f9ed69;
   --transfer-in-color: var(--transfer-color);
   --transfer-out-color: #90f2ff;
   --net-speed-in-color: #f5b199;
   --net-speed-out-color: #89c3eb;
+  --conn-color: #89c3eb;
+  --conn-tcp-color: var(--conn-color);
+  --conn-udp-color: #2ca9e1;
+  --load-color: #90f2ff;
+  --process-color: #f5b199;
 
   --list-item-price-color: #eee;
   --list-item-buy-link-color: #ffc300;

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

@@ -91,7 +91,7 @@ const platformLogoIconClassName = computed(() => hostUtils.getPlatformLogoIconCl
 
 const serverRealTimeListTpls = computed(() => {
   if (config.nazhua?.listServerRealTimeShowLoad) {
-    return 'duration,load,transfer,speeds';
+    return 'D-A-T,T-A-U,L-A-P,I-A-O';
   }
   return 'duration,transfer,inSpeed,outSpeed';
 });

src/views/components/server-list/row/server-list-column.vue

@@ -23,7 +23,10 @@
         </template>
         <template v-else>
           <span class="item-text item-value">{{ value }}</span>
-          <span class="item-text item-unit">{{ unit }}</span>
+          <span
+            v-if="unit"
+            class="item-text item-unit"
+          >{{ unit }}</span>
         </template>
       </div>
     </div>
@@ -207,5 +210,23 @@ const columnStyle = computed(() => {
       color: var(--list-item-price-color);
     }
   }
+
+  &--tcp {
+    .item-value {
+      color: var(--conn-tcp-color);
+    }
+  }
+
+  &--udp {
+    .item-value {
+      color: var(--conn-udp-color);
+    }
+  }
+
+  &--conns {
+    .item-value {
+      color: var(--conn-color);
+    }
+  }
 }
 </style>

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

@@ -41,7 +41,7 @@
     <server-list-item-real-time
       v-if="$config.nazhua.hideListItemStat !== true"
       :info="info"
-      server-real-time-list-tpls="load,inSpeed,outSpeed,transfer,duration"
+      server-real-time-list-tpls="load,conns,inSpeed,outSpeed,transfer,duration"
     />
     <server-list-item-bill
       v-if="$config.nazhua.hideListItemBill !== true"

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

@@ -22,13 +22,19 @@
             </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
+                v-if="subItem.show"
+                class="item-unit item-text"
+              >{{ 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>
+          <span
+            v-if="item.show"
+            class="item-unit item-text"
+          >{{ item?.unit }}</span>
         </template>
       </div>
       <span
@@ -120,7 +126,14 @@ const {
         flex: 1;
         display: flex;
         align-items: center;
-        gap: 2px;
+        gap: 0.2em;
+      }
+
+      --real-time-label-line-height: calc(var(--real-time-label-font-size, 14px) * 1.8);
+
+      .item-content-sub-label {
+        height: var(--real-time-label-line-height);
+        line-height: var(--real-time-label-line-height);
       }
 
       .item-content-sub-content {
@@ -128,21 +141,36 @@ const {
         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-value,
+      .item-text,
       .item-label {
-        line-height: 1em;
+        height: var(--real-time-label-line-height);
+        line-height: var(--real-time-label-line-height);
         font-size: var(--real-time-label-font-size, 14px);
       }
 
+      .item-content-sub-item--L-A-P-load {
+        .item-value {
+          color: var(--load-color);
+        }
+      }
+      .item-content-sub-item--L-A-P-process {
+        .item-value {
+          color: var(--process-color);
+        }
+      }
+
+      .item-content-sub-item--D-A-T-duration {
+        .item-value {
+          color: var(--duration-color);
+        }
+      }
+      .item-content-sub-item--D-A-T-transfer {
+        .item-value {
+          color: var(--transfer-color);
+        }
+      }
+
       .item-content-sub-item--speeds-in {
         .item-value {
           color: var(--net-speed-in-color);
@@ -153,6 +181,17 @@ const {
           color: var(--net-speed-out-color);
         }
       }
+
+      .item-content-sub-item--conn-tcp {
+        .item-value {
+          color: var(--conn-tcp-color);
+        }
+      }
+      .item-content-sub-item--conn-udp {
+        .item-value {
+          color: var(--conn-udp-color);
+        }
+      }
     }
   }
 

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

@@ -254,7 +254,35 @@ export default (params) => {
           unit: netOutSpeed.value?.unit,
           show: validate.isSet(netOutSpeed.value?.value),
         };
-      case 'speeds':
+      case 'load':
+        return {
+          key,
+          label: '负载',
+          value: (props.info.State?.Load1 || 0).toFixed(2),
+          show: validate.isSet(props.info.State?.Load1),
+        };
+      case 'conns':
+        return {
+          key,
+          label: '连接',
+          value: `${props.info.State?.TcpConnCount || 0}|${props.info.State?.UdpConnCount || 0}`,
+          show: true,
+        };
+      case 'tcp':
+        return {
+          key,
+          label: 'TCP',
+          value: props.info.State?.TcpConnCount || 0,
+          show: validate.isSet(props.info.State?.TcpConnCount),
+        };
+      case 'udp':
+        return {
+          key,
+          label: 'UDP',
+          value: props.info.State?.UdpConnCount || 0,
+          show: validate.isSet(props.info.State?.UdpConnCount),
+        };
+      case 'I-A-O':
         return {
           key,
           label: '网速',
@@ -276,13 +304,68 @@ export default (params) => {
           ],
           show: validate.isSet(netInSpeed.value?.value) && validate.isSet(netOutSpeed.value?.value),
         };
-      case 'load':
+      case 'L-A-P':
         return {
           key,
           label: '负载',
-          value: (props.info.State?.Load1 || 0).toFixed(2),
-          unit: '',
-          show: validate.isSet(props.info.State?.Load1),
+          values: [
+            {
+              key: 'load',
+              label: '负载',
+              value: (props.info.State?.Load1 || 0).toFixed(2),
+              show: validate.isSet(props.info.State?.Load1),
+            },
+            {
+              key: 'process',
+              label: '进程',
+              value: props.info.State?.ProcessCount || 0,
+              show: validate.isSet(props.info.State?.ProcessCount),
+            },
+          ],
+          show: validate.isSet(props.info.State?.Load1) || validate.isSet(props.info.State?.ProcessCount),
+        };
+      case 'T-A-U':
+        return {
+          key,
+          label: '连接',
+          values: [
+            {
+              key: 'tcp',
+              label: 'TCP',
+              value: (props.info.State?.TcpConnCount || 0).toString().padEnd(3, ' '),
+              show: validate.isSet(props.info.State?.TcpConnCount),
+            },
+            {
+              key: 'udp',
+              label: 'UDP',
+              value: (props.info.State?.UdpConnCount || 0).toString().padEnd(3, ' '),
+              show: validate.isSet(props.info.State?.UdpConnCount),
+            },
+          ],
+          show: validate.isSet(props.info.State?.TcpConnCount) || validate.isSet(props.info.State?.UdpConnCount),
+        };
+      case 'D-A-T':
+        return {
+          key,
+          label: '统计',
+          values: [
+            {
+              key: 'duration',
+              label: '在线',
+              value: duration.value?.value,
+              unit: duration.value?.unit,
+              show: validate.isSet(duration.value?.value),
+            },
+            {
+              key: 'transfer',
+              label: '流量',
+              title: `${transfer.value.statTypeLabel}流量`,
+              value: transfer.value?.value,
+              unit: transfer.value?.unit,
+              show: validate.isSet(transfer.value?.value),
+            },
+          ],
+          show: validate.isSet(duration.value?.value) || validate.isSet(transfer.value?.value),
         };
       default:
     }