feat: adjust the delay display interval and color, close #836

src/components/proxy/proxy-item-mini.tsx

@@ -137,20 +137,14 @@ export const ProxyItemMini = (props: Props) => {
               e.stopPropagation();
               onDelay();
             }}
-            color={
+            color={delayManager.formatDelayColor(delay)}
-              delay > 500
-                ? "error.main"
-                : delay < 100
-                ? "success.main"
-                : "text.secondary"
-            }
             sx={({ palette }) =>
               !proxy.provider
                 ? { ":hover": { bgcolor: alpha(palette.primary.main, 0.15) } }
                 : {}
             }
           >
-            {delay > 1e5 ? "Error" : delay > 3000 ? "Timeout" : `${delay}`}
+            {delayManager.formatDelay(delay)}
           </Widget>
         )}
 

src/components/proxy/proxy-item.tsx

@@ -145,20 +145,14 @@ export const ProxyItem = (props: Props) => {
                 e.stopPropagation();
                 onDelay();
               }}
-              color={
+              color={delayManager.formatDelayColor(delay)}
-                delay > 500
-                  ? "error.main"
-                  : delay < 100
-                  ? "success.main"
-                  : "text.secondary"
-              }
               sx={({ palette }) =>
                 !proxy.provider
                   ? { ":hover": { bgcolor: alpha(palette.primary.main, 0.15) } }
                   : {}
               }
             >
-              {delay > 1e5 ? "Error" : delay > 3000 ? "Timeout" : `${delay}ms`}
+              {delayManager.formatDelay(delay)}
             </Widget>
           )}
 

src/services/delay.ts

@@ -107,6 +107,21 @@ class DelayManager {
       for (let i = 0; i < concurrency; ++i) help();
     });
   }
+
+  formatDelay(delay: number) {
+    if (delay < 0) return "-";
+    if (delay > 1e5) return "Error";
+    if (delay >= 10000) return "Timeout"; // 10s
+    return `${delay}`;
+  }
+
+  formatDelayColor(delay: number) {
+    if (delay <= 0) return "text.secondary";
+    if (delay >= 10000) return "error.main";
+    if (delay > 500) return "warning.main";
+    if (delay > 100) return "text.secondary";
+    return "success.main";
+  }
 }
 
 export default new DelayManager();