适配三个组件

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>

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 GenericProgress from '../components/GenericProgress/index.vue'
-import type { ProgressStyle } from '../typings'
+import type { PanelPanelConfigStyleEnum } from '@/enums'
-import { 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">
+    <GenericProgress
-      <div class="mb-1">
+      :progress-color="progressColor"
-        <span>
+      :progress-rail-color="progressRailColor"
-          {{ diskState?.mountpoint }}
+      :progress-height="5"
-        </span>
+      :percentage="correctionNumber(diskState?.usedPercent || 0)"
-        <span class="float-right">
+      :card-type-style="cardTypeStyle"
-          {{ formatdiskSize(formatdiskToByte(diskState?.total || 0)) }}/{{ formatdiskSize(formatdiskToByte(diskState?.free || 0)) }}
+      :info-card-right-text="`${formatdiskSize(formatdiskToByte(diskState?.total || 0))}/${formatdiskSize(formatdiskToByte(diskState?.free || 0))}`"
-        </span>
+      :info-card-left-text="diskState?.mountpoint"
-      </div>
+      :text-color="textColor"
-      <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>
   </div>
 </template>

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 GenericProgress from '../components/GenericProgress/index.vue'
-import type { ProgressStyle } from '../typings'
 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">
+    <GenericProgress
-      <div class="mb-1">
+      :progress-color="progressColor"
-        <span>
+      :progress-rail-color="progressRailColor"
-          RAM
+      :progress-height="5"
-        </span>
+      :percentage="correctionNumber(memoryState?.usedPercent || 0)"
-        <span class="float-right">
+      :card-type-style="cardTypeStyle"
-          {{ formatMemorySize(memoryState?.total || 0) }}/{{ formatMemorySize(memoryState?.free || 0) }}
+      :info-card-right-text="`${formatMemorySize(memoryState?.total || 0)}/${formatMemorySize(memoryState?.free || 0)}`"
-        </span>
+      info-card-left-text="RAM"
-      </div>
+      :text-color="textColor"
-      <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>
   </div>
 </template>