✨ 顶部导航条显示流量和网速

src/layout/components/header.vue

@@ -12,7 +12,7 @@
       </div>
       <div class="right-box">
         <div
-          v-if="serverCount?.total"
+          v-if="serverCount?.total && showServerCount"
           class="server-count-group"
         >
           <span class="server-count server-count--total">
@@ -35,6 +35,67 @@
             <span class="value">{{ serverCount.offline }}</span>
           </span>
         </div>
+        <div
+          v-if="serverStat && showServerStat"
+          class="server-stat-group"
+        >
+          <div
+            v-if="serverStat.transfer"
+            class="server-stat server-stat--transfer"
+          >
+            <span class="server-stat-label">
+              <span class="text">流量</span>
+            </span>
+            <div class="server-stat-content">
+              <span class="server-stat-item server-stat-item--in">
+                <span class="ri-download-line" />
+                <span class="text-value">
+                  {{ serverStat.transfer.inData.value }}
+                </span>
+                <span class="text-unit">
+                  {{ serverStat.transfer.inData.unit }}
+                </span>
+              </span>
+              <span class="server-stat-item server-stat-item--out">
+                <span class="ri-upload-line" />
+                <span class="text-value">
+                  {{ serverStat.transfer.outData.value }}
+                </span>
+                <span class="text-unit">
+                  {{ serverStat.transfer.outData.unit }}
+                </span>
+              </span>
+            </div>
+          </div>
+          <div
+            v-if="serverStat.netSpeed"
+            class="server-stat server-stat--net-speed"
+          >
+            <span class="server-stat-label">
+              <span class="text">网速</span>
+            </span>
+            <div class="server-stat-content">
+              <span class="server-stat-item server-stat-item--in">
+                <span class="ri-arrow-down-line" />
+                <span class="text-value">
+                  {{ serverStat.netSpeed.inData.value }}
+                </span>
+                <span class="text-unit">
+                  {{ serverStat.netSpeed.inData.unit }}
+                </span>
+              </span>
+              <span class="server-stat-item server-stat-item--out">
+                <span class="ri-arrow-up-line" />
+                <span class="text-value">
+                  {{ serverStat.netSpeed.outData.value }}
+                </span>
+                <span class="text-unit">
+                  {{ serverStat.netSpeed.outData.unit }}
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -56,6 +117,8 @@ import {
   useRoute,
   useRouter,
 } from 'vue-router';
+import * as hostUtils from '@/utils/host';
+
 import config from '@/config';
 
 const store = useStore();
@@ -72,8 +135,101 @@ const headerStyle = computed(() => {
   return style;
 });
 
+const showServerCount = config.nazhua.hideNavbarServerCount !== true;
 const serverCount = computed(() => store.state.serverCount);
 
+const showServerStat = config.nazhua.hideNavbarServerStat !== true;
+const serverStat = computed(() => {
+  const transfer = {
+    in: 0,
+    inData: {
+      value: 0,
+      unit: '',
+    },
+    out: 0,
+    outData: {
+      value: 0,
+      unit: '',
+    },
+  };
+  const netSpeed = {
+    in: 0,
+    inData: {
+      value: 0,
+      unit: '',
+    },
+    out: 0,
+    outData: {
+      value: 0,
+      unit: '',
+    },
+  };
+  if (store.state.serverList.length) {
+    store.state.serverList.forEach((server) => {
+      if (server.online === 1 && server.State) {
+        transfer.in += server.State.NetInTransfer;
+        transfer.out += server.State.NetOutTransfer;
+        netSpeed.in += server.State.NetInSpeed;
+        netSpeed.out += server.State.NetOutSpeed;
+      }
+    });
+  }
+  const calcInTransfer = hostUtils.calcBinary(transfer.in);
+  if (calcInTransfer.t > 1) {
+    transfer.inData.value = (calcInTransfer.g).toFixed(1) * 1;
+    transfer.inData.unit = 'T';
+  } else if (calcInTransfer.g > 1) {
+    transfer.inData.value = (calcInTransfer.g).toFixed(1) * 1;
+    transfer.inData.unit = 'G';
+  } else if (calcInTransfer.m > 1) {
+    transfer.inData.value = (calcInTransfer.m).toFixed(1) * 1;
+    transfer.inData.unit = 'M';
+  } else {
+    transfer.inData.value = calcInTransfer.value;
+    transfer.inData.unit = 'K';
+  }
+  const calcOutTransfer = hostUtils.calcBinary(transfer.out);
+  if (calcOutTransfer.t > 1) {
+    transfer.outData.value = (calcOutTransfer.g).toFixed(1) * 1;
+    transfer.outData.unit = 'T';
+  } else if (calcOutTransfer.g > 1) {
+    transfer.outData.value = (calcOutTransfer.g).toFixed(1) * 1;
+    transfer.outData.unit = 'G';
+  } else if (calcOutTransfer.m > 1) {
+    transfer.outData.value = (calcOutTransfer.m).toFixed(1) * 1;
+    transfer.outData.unit = 'M';
+  } else {
+    transfer.outData.value = calcOutTransfer.value;
+    transfer.outData.unit = 'K';
+  }
+  const calcNetInSpeed = hostUtils.calcBinary(netSpeed.in);
+  if (calcNetInSpeed.g > 1) {
+    netSpeed.inData.value = (calcNetInSpeed.g).toFixed(1) * 1;
+    netSpeed.inData.unit = 'G';
+  } else if (calcNetInSpeed.m > 1) {
+    netSpeed.inData.value = (calcNetInSpeed.m).toFixed(1) * 1;
+    netSpeed.inData.unit = 'M';
+  } else {
+    netSpeed.inData.value = (calcNetInSpeed.k).toFixed(1) * 1;
+    netSpeed.inData.unit = 'K';
+  }
+  const calcNetOutSpeed = hostUtils.calcBinary(netSpeed.out);
+  if (calcNetOutSpeed.g > 1) {
+    netSpeed.outData.value = (calcNetOutSpeed.g).toFixed(1) * 1;
+    netSpeed.outData.unit = 'G';
+  } else if (calcNetOutSpeed.m > 1) {
+    netSpeed.outData.value = (calcNetOutSpeed.m).toFixed(1) * 1;
+    netSpeed.outData.unit = 'M';
+  } else {
+    netSpeed.outData.value = (calcNetOutSpeed.k).toFixed(1) * 1;
+    netSpeed.outData.unit = 'K';
+  }
+  return {
+    transfer,
+    netSpeed,
+  };
+});
+
 const title = ref(config.nazhua.title);
 
 function toHome() {
@@ -111,7 +267,7 @@ onMounted(() => {
 
   .server-count-group {
     display: flex;
-    gap: 20px;
+    gap: 10px;
     line-height: 30px;
   }
 
@@ -149,5 +305,44 @@ onMounted(() => {
     padding: 10px 20px;
     transition: width 0.3s;
   }
+
+  .right-box {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    color: #ddd;
+  }
+
+  .server-stat-group {
+    min-width: 160px;
+  }
+
+  .server-stat {
+    display: flex;
+    gap: 8px;
+    line-height: 16px;
+    font-size: 12px;
+
+    .server-stat-content {
+      flex: 1;
+      display: flex;
+    }
+
+    .server-stat-item {
+      flex: 1;
+    }
+
+    .server-stat-item--in {
+      .text-value {
+        color: #ffc93c;
+      }
+    }
+
+    .server-stat-item--out {
+      .text-value {
+        color: #90f2ff;
+      }
+    }
+  }
 }
 </style>