From abbf7afe04f6dda6b65223c848e6797b4354730a Mon Sep 17 00:00:00 2001
From: hi2hi <code@hi2hi.cc>
Date: Wed, 4 Dec 2024 02:42:51 +0000
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=E9=A1=B6=E9=83=A8=E5=AF=BC?=
 =?UTF-8?q?=E8=88=AA=E6=9D=A1=E6=98=BE=E7=A4=BA=E6=B5=81=E9=87=8F=E5=92=8C?=
 =?UTF-8?q?=E7=BD=91=E9=80=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/header.vue | 199 ++++++++++++++++++++++++++++++-
 1 file changed, 197 insertions(+), 2 deletions(-)

diff --git a/src/layout/components/header.vue b/src/layout/components/header.vue
index a33dcae..c074449 100644
--- a/src/layout/components/header.vue
+++ b/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>