调整

app/wails/frontend/components.d.ts

@@ -23,6 +23,7 @@ declare module 'vue' {
     MemoryUsage: typeof import('./src/components/system/memory/MemoryUsage.vue')['default']
     MemoryUsageChart: typeof import('./src/components/system/memory/MemoryUsageChart.vue')['default']
     NetworkCounter: typeof import('./src/components/system/network/NetworkCounter.vue')['default']
+    NetworkSumMaxRate: typeof import('./src/components/system/network/NetworkSumMaxRate.vue')['default']
     NetworkSumRateChart: typeof import('./src/components/system/network/NetworkSumRateChart.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

app/wails/frontend/src/components/system/network/NetworkSumMaxRate.vue

@@ -0,0 +1,26 @@
+<script setup>
+import {useNetworkSumMaxRate} from "src/utils/system/network";
+import {bytesToSizeWithUnit} from "src/utils/file/file";
+
+const networkSumMaxRate = useNetworkSumMaxRate()
+</script>
+
+<template>
+    <div class="text-center">
+        <el-statistic title="最高下载速度"
+                      :formatter="bytesToSizeWithUnit"
+                      suffix="/s"
+                      :value="networkSumMaxRate.recv">
+        </el-statistic>
+
+        <el-statistic title="最高上传速度"
+                      :formatter="bytesToSizeWithUnit"
+                      suffix="/s"
+                      :value="networkSumMaxRate.sent">
+        </el-statistic>
+    </div>
+</template>
+
+<style scoped>
+
+</style>

app/wails/frontend/src/utils/system/network.ts

@@ -70,3 +70,11 @@ export function useNetworkSumRate(){
 
     return network.sumCounter.rate
 }
+
+export function useNetworkSumMaxRate(){
+    if(network.sumCounter.interval == null){
+        loopNetworkSumCounter()
+    }
+
+    return network.sumCounter.rate.max
+}

app/wails/frontend/src/views/tabs/home/Home.vue

@@ -46,6 +46,7 @@ import CPUUsageChart from "src/components/system/cpu/CPUUsageChart.vue";
 import MemoryUsageChart from "src/components/system/memory/MemoryUsageChart.vue";
 import NetworkCounter from "src/components/system/network/NetworkCounter.vue";
 import NetworkSumRateChart from "src/components/system/network/NetworkSumRateChart.vue"
+import NetworkSumMaxRate from "src/components/system/network/NetworkSumMaxRate.vue";
 function switchLocale(){
     console.log(globalConfigState.ui.value.locale)
     if(globalConfigState.ui.value.locale.name === 'zh-cn'){
@@ -100,29 +101,32 @@ const generateData = (
 <template>
 
     <el-row>
-        <el-col :span="4">
+        <el-col :md="4" :sm="12">
             <CPUUsage/>
         </el-col>
-        <el-col :span="4">
+        <el-col :md="4" :sm="12">
             <MemoryUsage>
                 <template #footer="{used, total}">
                     <div class="text-sm">{{ used }}/{{ total }}</div>
                 </template>
             </MemoryUsage>
         </el-col>
-        <el-col :span="4">
+        <el-col :sm="12" :md="4">
             <NetworkCounter></NetworkCounter>
         </el-col>
+        <el-col :sm="12" :md="4">
+            <NetworkSumMaxRate></NetworkSumMaxRate>
+        </el-col>
     </el-row>
 
     <el-row>
-        <el-col :span="8">
+        <el-col :xs="24" :sm="12" :md="8">
             <CPUUsageChart style="height: 300px"/>
         </el-col>
-        <el-col :span="8">
+        <el-col :xs="24" :sm="12" :md="8">
             <MemoryUsageChart style="height: 300px"/>
         </el-col>
-        <el-col :span="8">
+        <el-col :xs="24" :sm="12" :md="8">
             <NetworkSumRateChart style="height: 300px"/>
         </el-col>
     </el-row>