前端调整

km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/LeftSider.tsx

@@ -107,6 +107,7 @@ const LeftSider = () => {
             strokeWidth={4}
             strokeColor={getHealthProcessColor(clusterMetrics?.HealthScore, clusterMetrics?.Alive)}
             percent={clusterMetrics?.HealthScore ?? '-'}
+            className={+clusterMetrics.Alive <= 0 ? 'red-circle' : +clusterMetrics?.HealthScore < 90 ? 'blue-circle' : 'green-circle'}
             format={() => (
               <div className={`healthy-percent ${getHealthClassName(clusterMetrics?.HealthScore, clusterMetrics?.Alive)}`}>
                 {getHealthText(clusterMetrics?.HealthScore, clusterMetrics?.Alive)}

km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/index.less

@@ -156,7 +156,20 @@
       .state-card {
         display: flex;
         width: 100%;
-
+        .green-circle {
+          .dcloud-progress-inner {
+            background: #f5fdfc;
+            overflow: hidden;
+            border-radius: 50%;
+          }
+        }
+        .red-circle {
+          .dcloud-progress-inner {
+            background: #fffafa;
+            overflow: hidden;
+            border-radius: 50%;
+          }
+        }
         .healthy-percent {
           font-family: DIDIFD-Regular;
           font-size: 38px;