调整

app/wails/frontend/src/components/system/cpu/CPUUsage.vue

@@ -1,7 +1,11 @@
 <script setup>
 import {useCpuUsage} from "src/utils/system";
 import {computed} from "vue";
-
+const props = defineProps({
+    showLabel: {
+        default: true
+    }
+})
 const cpuUsage = useCpuUsage()
 const singleUsage = computed(()=>{
     return Number((cpuUsage.value[0] || 0).toFixed(2))
@@ -19,7 +23,12 @@ const colors = [
     </div>
 
     <div class="text-center">
-        <el-progress type="dashboard" :percentage="singleUsage" :color="colors" />
+        <el-progress type="dashboard" :percentage="singleUsage" :color="colors">
+            <template #default="{ percentage }">
+                <p class="percentage-value">{{ percentage }}%</p>
+                <p class="percentage-text" v-if="props.showLabel">CPU使用率</p>
+            </template>
+        </el-progress>
     </div>
 
     <div class="text-center">
@@ -29,5 +38,10 @@ const colors = [
 </template>
 
 <style scoped>
-
+.percentage-value {
+    font-size: 18px;
+}
+.percentage-text {
+    font-size: 14px;
+}
 </style>

app/wails/frontend/src/components/system/memory/MemoryUsage.vue

@@ -1,6 +1,10 @@
 <script setup>
 import {useMemoryTotalSize, useMemoryUsage, useMemoryUsageSize} from "src/utils/system";
-
+const props = defineProps({
+    showLabel: {
+        default: true
+    }
+})
 const usage = useMemoryUsage()
 const used = useMemoryUsageSize()
 const total = useMemoryTotalSize()
@@ -20,6 +24,7 @@ const colors = [
         <el-progress type="dashboard" :percentage="usage" :color="colors">
             <template #default="{ percentage }">
                 <p class="percentage-value">{{ percentage }}%</p>
+                <div class="percentage-text" v-if="props.showLabel">内存使用率</div>
             </template>
         </el-progress>
     </div>
@@ -34,4 +39,7 @@ const colors = [
 .percentage-value {
     font-size: 18px;
 }
+.percentage-text {
+    font-size: 14px;
+}
 </style>

app/wails/frontend/src/utils/file/file.ts

@@ -79,6 +79,10 @@ export function bytesToSizeWithUnit(byteSize:number){
     return `${calcSize(byteSize,targetUnit)} ${targetUnit.unit}`
 }
 
+export function numberToHz(number:number){
+    return bytesToSizeWithUnit(number).replace(FileUnit.B.unit,"")
+}
+
 export function calcSize(byteSize:number,targetUnit:FileUnitType){
     return Number((byteSize / targetUnit.size).toFixed(2))
 }

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

@@ -103,17 +103,12 @@ const table = reactive({
 
         <el-row>
             <el-col :span="4">
-                <CPUUsage>
+                <CPUUsage/>
-                    <template #footer>
-                        <div>CPU使用率</div>
-                    </template>
-                </CPUUsage>
             </el-col>
             <el-col :span="4">
                 <MemoryUsage>
                     <template #footer="{used, total}">
-                        <div>内存</div>
+                        <div class="text-sm">{{used}}/{{total}}</div>
-                        <div>{{used}}/{{total}}</div>
                     </template>
                 </MemoryUsage>
             </el-col>