From dc8184d5dda246a8a54ccb6f154d6a3cbd2734c5 Mon Sep 17 00:00:00 2001
From: yangsy <ysy@ittc.sh.cn>
Date: Sun, 17 May 2026 18:28:26 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=8F=90=E5=8F=96=E8=AE=BE?=
 =?UTF-8?q?=E5=A4=87=E7=A1=AC=E4=BB=B6=E5=8D=A1=E7=89=87=E4=B8=AD=E9=80=9A?=
 =?UTF-8?q?=E7=94=A8=E7=99=BE=E5=88=86=E6=AF=94=E8=A7=A3=E6=9E=90=E5=87=BD?=
 =?UTF-8?q?=E6=95=B0=E5=B9=B6=E4=BC=98=E5=8C=96=E7=A9=BA=E5=80=BC=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

提取统一的百分比字符串解析工具函数，替换原有重复的解析逻辑，新增空值或无效值时显示 `-` 的处理
---
 .../current-diag/device-hardware-card.vue     | 33 +++++++++++++------
 1 file changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/components/device/device-card/components/current-diag/device-hardware-card.vue b/src/components/device/device-card/components/current-diag/device-hardware-card.vue
index 0dc88f4..ff5b38c 100644
--- a/src/components/device/device-card/components/current-diag/device-hardware-card.vue
+++ b/src/components/device/device-card/components/current-diag/device-hardware-card.vue
@@ -1,3 +1,18 @@
+<script lang="ts">
+const parsePercentMetric = (raw?: string) => {
+  const trimmed = raw?.trim();
+
+  if (!!trimmed) {
+    const value = Number(trimmed);
+    if (Number.isFinite(value)) {
+      return value;
+    }
+  }
+
+  return undefined;
+};
+</script>
+
 <script setup lang="ts">
 import { ClockCheckIcon, CpuIcon, HardDriveIcon, MemoryStickIcon } from 'lucide-vue-next';
 import { NCard, NFlex, NIcon, NProgress, type ProgressStatus } from 'naive-ui';
@@ -21,25 +36,23 @@ const showCard = computed(() => {
 });
 
 const cpuPercent = computed(() => {
-  if (!cpuUsage?.value) return 0;
-  return parseFloat(cpuUsage.value.replace('%', ''));
+  return parsePercentMetric(cpuUsage.value);
 });
 
 const memPercent = computed(() => {
-  if (!memUsage?.value) return 0;
-  return parseFloat(memUsage.value.replace('%', ''));
+  return parsePercentMetric(memUsage.value);
 });
 
 const diskPercent = computed(() => {
-  if (!diskUsage?.value) return 0;
-  return parseFloat(diskUsage.value.replace('%', ''));
+  return parsePercentMetric(diskUsage.value);
 });
 
 const formattedRunningTime = computed(() => {
   return (runningTime?.value ?? '-').replace('days', '天');
 });
 
-const getProgressStatus = (percent: number): ProgressStatus => {
+const getProgressStatus = (percent?: number): ProgressStatus | undefined => {
+  if (!percent) return undefined;
   if (percent >= 90) return 'error';
   if (percent >= 70) return 'warning';
   return 'success';
@@ -56,17 +69,17 @@ const getProgressStatus = (percent: number): ProgressStatus => {
         <NFlex v-if="cpuUsage" style="width: 100%" align="center" :wrap="false">
           <NIcon :component="CpuIcon" />
           <span style="word-break: keep-all">{{ cpuUsageLabel || 'CPU' }}</span>
-          <NProgress :percentage="cpuPercent" :status="getProgressStatus(cpuPercent)">{{ cpuPercent }}%</NProgress>
+          <NProgress :percentage="cpuPercent" :status="getProgressStatus(cpuPercent)">{{ cpuPercent ?? '-' }}%</NProgress>
         </NFlex>
         <NFlex v-if="memUsage" style="width: 100%" align="center" :wrap="false">
           <NIcon :component="MemoryStickIcon" />
           <span style="word-break: keep-all">{{ memUsageLabel || '内存' }}</span>
-          <NProgress :percentage="memPercent" :status="getProgressStatus(memPercent)">{{ memPercent }}%</NProgress>
+          <NProgress :percentage="memPercent" :status="getProgressStatus(memPercent)">{{ memPercent ?? '-' }}%</NProgress>
         </NFlex>
         <NFlex v-if="diskUsage" style="width: 100%" align="center" :wrap="false">
           <NIcon :component="HardDriveIcon" />
           <span style="word-break: keep-all">{{ diskUsageLabel || '磁盘' }}</span>
-          <NProgress :percentage="diskPercent" :status="getProgressStatus(diskPercent)">{{ diskPercent }}%</NProgress>
+          <NProgress :percentage="diskPercent" :status="getProgressStatus(diskPercent)">{{ diskPercent ?? '-' }}%</NProgress>
         </NFlex>
         <NFlex v-if="runningTime" style="width: 100%" align="center" :wrap="false">
           <NIcon :component="ClockCheckIcon" />