From 9735e67a7d6334e39d4f58b053c32b3be25e7fa8 Mon Sep 17 00:00:00 2001
From: Sun <95302870@qq.com>
Date: Fri, 5 Jan 2024 14:01:46 +0800
Subject: [PATCH] =?UTF-8?q?=E9=80=82=E9=85=8D=E4=B8=89=E4=B8=AA=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AppIconSystemMonitor/CPU.vue              | 11 ++--
 .../AppIconSystemMonitor/Disk.vue             | 54 ++++++-------------
 .../AppIconSystemMonitor/Memory.vue           | 53 ++++++------------
 3 files changed, 37 insertions(+), 81 deletions(-)

diff --git a/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/CPU.vue b/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/CPU.vue
index cac1835..462fcb0 100644
--- a/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/CPU.vue
+++ b/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/CPU.vue
@@ -1,14 +1,15 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref } from 'vue'
-import type { ProgressStyle } from '../typings'
 import GenericProgress from '../components/GenericProgress/index.vue'
 import { getCpuState } from '@/api/system/systemMonitor'
 import type { PanelPanelConfigStyleEnum } from '@/enums'
 
 interface Prop {
   cardTypeStyle: PanelPanelConfigStyleEnum
-  progressStyle: ProgressStyle
   refreshInterval: number
+  textColor: string
+  progressColor: string
+  progressRailColor: string
 }
 
 const props = defineProps<Prop>()
@@ -45,12 +46,14 @@ onUnmounted(() => {
 <template>
   <div class="w-full">
     <GenericProgress
-      :progress-style="progressStyle"
+      :progress-color="progressColor"
+      :progress-rail-color="progressRailColor"
+      :progress-height="5"
       :percentage="correctionNumber(cpuState?.usages[0] || 0)"
       :card-type-style="cardTypeStyle"
       :info-card-right-text="`${correctionNumber(cpuState?.usages[0] || 0)}%`"
       info-card-left-text="CPU"
-      text-color="black"
+      :text-color="textColor"
     />
   </div>
 </template>
diff --git a/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/Disk.vue b/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/Disk.vue
index 15fc9c5..41898d2 100644
--- a/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/Disk.vue
+++ b/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/Disk.vue
@@ -1,15 +1,16 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref } from 'vue'
-import { NProgress } from 'naive-ui'
-import type { ProgressStyle } from '../typings'
-import { PanelPanelConfigStyleEnum } from '@/enums'
+import GenericProgress from '../components/GenericProgress/index.vue'
+import type { PanelPanelConfigStyleEnum } from '@/enums'
 import { bytesToSize } from '@/utils/cmn'
 import { getDiskStateByPath } from '@/api/system/systemMonitor'
 
 interface Prop {
   cardTypeStyle: PanelPanelConfigStyleEnum
-  progressStyle: ProgressStyle
   refreshInterval: number
+  textColor: string
+  progressColor: string
+  progressRailColor: string
   path: string
 }
 
@@ -54,40 +55,15 @@ onUnmounted(() => {
 
 <template>
   <div class="w-full">
-    <div v-if="cardTypeStyle === PanelPanelConfigStyleEnum.info">
-      <div class="mb-1">
-        <span>
-          {{ diskState?.mountpoint }}
-        </span>
-        <span class="float-right">
-          {{ formatdiskSize(formatdiskToByte(diskState?.total || 0)) }}/{{ formatdiskSize(formatdiskToByte(diskState?.free || 0)) }}
-        </span>
-      </div>
-      <NProgress
-        :color="progressStyle.color"
-        :rail-color="progressStyle.railColor"
-        :height="progressStyle.height"
-        type="line"
-        :percentage="diskState?.usedPercent"
-        :show-indicator="false"
-        :stroke-width="15"
-        style="width: 150px;"
-      />
-    </div>
-    <div v-else>
-      <div class="flex justify-center h-full w-full mt-3">
-        <NProgress
-          :color="progressStyle.color"
-          :rail-color="progressStyle.railColor"
-          type="dashboard"
-          :percentage="correctionNumber(diskState?.usedPercent || 0)" :stroke-width="15"
-          style="width: 50px;"
-        >
-          <div class="text-white" style="font-size: 10px;">
-            {{ correctionNumber(diskState?.usedPercent || 0, 1) }}%
-          </div>
-        </NProgress>
-      </div>
-    </div>
+    <GenericProgress
+      :progress-color="progressColor"
+      :progress-rail-color="progressRailColor"
+      :progress-height="5"
+      :percentage="correctionNumber(diskState?.usedPercent || 0)"
+      :card-type-style="cardTypeStyle"
+      :info-card-right-text="`${formatdiskSize(formatdiskToByte(diskState?.total || 0))}/${formatdiskSize(formatdiskToByte(diskState?.free || 0))}`"
+      :info-card-left-text="diskState?.mountpoint"
+      :text-color="textColor"
+    />
   </div>
 </template>
diff --git a/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/Memory.vue b/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/Memory.vue
index 222bb08..1453808 100644
--- a/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/Memory.vue
+++ b/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/Memory.vue
@@ -1,15 +1,16 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref } from 'vue'
-import { NProgress } from 'naive-ui'
-import type { ProgressStyle } from '../typings'
+import GenericProgress from '../components/GenericProgress/index.vue'
 import { getMemonyState } from '@/api/system/systemMonitor'
-import { PanelPanelConfigStyleEnum } from '@/enums'
+import type { PanelPanelConfigStyleEnum } from '@/enums'
 import { bytesToSize } from '@/utils/cmn'
 
 interface Prop {
   cardTypeStyle: PanelPanelConfigStyleEnum
-  progressStyle: ProgressStyle
   refreshInterval: number
+  textColor: string
+  progressColor: string
+  progressRailColor: string
 }
 
 const props = defineProps<Prop>()
@@ -49,39 +50,15 @@ onUnmounted(() => {
 
 <template>
   <div class="w-full">
-    <div v-if="cardTypeStyle === PanelPanelConfigStyleEnum.info">
-      <div class="mb-1">
-        <span>
-          RAM
-        </span>
-        <span class="float-right">
-          {{ formatMemorySize(memoryState?.total || 0) }}/{{ formatMemorySize(memoryState?.free || 0) }}
-        </span>
-      </div>
-      <NProgress
-        type="line"
-        :color="progressStyle.color"
-        :rail-color="progressStyle.railColor"
-        :height="progressStyle.height"
-        :percentage="memoryState?.usedPercent"
-        :show-indicator="false"
-        :stroke-width="15" style="width: 150px;"
-      />
-    </div>
-    <div v-else>
-      <div class="flex justify-center h-full w-full mt-3">
-        <NProgress
-          :color="progressStyle.color"
-          :rail-color="progressStyle.railColor"
-          type="dashboard"
-          :percentage="correctionNumber(memoryState?.usedPercent || 0)" :stroke-width="15"
-          style="width: 50px;"
-        >
-          <div class="text-white" style="font-size: 10px;">
-            {{ correctionNumber(memoryState?.usedPercent || 0, 1) }}%
-          </div>
-        </NProgress>
-      </div>
-    </div>
+    <GenericProgress
+      :progress-color="progressColor"
+      :progress-rail-color="progressRailColor"
+      :progress-height="5"
+      :percentage="correctionNumber(memoryState?.usedPercent || 0)"
+      :card-type-style="cardTypeStyle"
+      :info-card-right-text="`${formatMemorySize(memoryState?.total || 0)}/${formatMemorySize(memoryState?.free || 0)}`"
+      info-card-left-text="RAM"
+      :text-color="textColor"
+    />
   </div>
 </template>