From b4441bcdfb3d0531f0309bef74ef93a92f2baaef Mon Sep 17 00:00:00 2001
From: Shikong <919411476@qq.com>
Date: Wed, 19 Jul 2023 17:04:32 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/wails/frontend/components.d.ts            |  1 +
 .../system/network/NetworkCounter.vue         | 28 +++++++++++++------
 app/wails/frontend/src/utils/file/file.ts     |  6 +++-
 3 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/app/wails/frontend/components.d.ts b/app/wails/frontend/components.d.ts
index 377e77c..42be027 100644
--- a/app/wails/frontend/components.d.ts
+++ b/app/wails/frontend/components.d.ts
@@ -15,6 +15,7 @@ declare module 'vue' {
     ElProgress: typeof import('element-plus/es')['ElProgress']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+    ElStatistic: typeof import('element-plus/es')['ElStatistic']
     ElTableV2: typeof import('element-plus/es')['ElTableV2']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
diff --git a/app/wails/frontend/src/components/system/network/NetworkCounter.vue b/app/wails/frontend/src/components/system/network/NetworkCounter.vue
index 6a49d64..7598e69 100644
--- a/app/wails/frontend/src/components/system/network/NetworkCounter.vue
+++ b/app/wails/frontend/src/components/system/network/NetworkCounter.vue
@@ -7,18 +7,28 @@ const networkSumRate = useNetworkSumRate()
 </script>
 
 <template>
-    <div>实时下载速度:</div>
-    <div> {{bytesToSizeWithUnit(networkSumRate.recv)}}/s </div>
+    <div class="text-center">
+        <el-statistic title="实时下载速度"
+                      :formatter="bytesToSizeWithUnit"
+                      suffix="/s"
+                      :value="networkSumRate.recv">
+        </el-statistic>
 
-    <div>
-        接收: {{bytesToSizeWithUnit(networkSumCounter.bytesRecv || 0)}}
-    </div>
+        <el-statistic title="接收"
+                      :formatter="bytesToSizeWithUnit"
+                      :value="networkSumCounter.bytesRecv">
+        </el-statistic>
 
-    <div>实时上传速度:</div>
-    <div>{{bytesToSizeWithUnit(networkSumRate.sent)}}/s </div>
+        <el-statistic title="实时上传速度"
+                      :formatter="bytesToSizeWithUnit"
+                      suffix="/s"
+                      :value="networkSumRate.sent">
+        </el-statistic>
 
-    <div>
-        发送: {{bytesToSizeWithUnit(networkSumCounter.bytesSent || 0)}}
+        <el-statistic title="发送"
+                      :formatter="bytesToSizeWithUnit"
+                      :value="networkSumCounter.bytesSent">
+        </el-statistic>
     </div>
 </template>
 
diff --git a/app/wails/frontend/src/utils/file/file.ts b/app/wails/frontend/src/utils/file/file.ts
index f7f3e02..98db650 100644
--- a/app/wails/frontend/src/utils/file/file.ts
+++ b/app/wails/frontend/src/utils/file/file.ts
@@ -68,7 +68,11 @@ export function convertToFileSizeWithUnit(anySize:string, defaultUnit:FileUnitTy
     }
 }
 
-export function bytesToSizeWithUnit(byteSize:number){
+export function bytesToSizeWithUnit(byteSize?:number){
+    if(byteSize == null){
+        return `0${FileUnit.B.unit}`
+    }
+
     let targetUnitIndex = Object.values(FileUnit).findIndex(item => item.size > byteSize) || 0
     let targetUnit:FileUnitType
     if(targetUnitIndex > 0){