feat: 添加列表视图进度条选项并优化进度条显示

src/components/sections/NodeCard.tsx

@@ -33,12 +33,6 @@ export const NodeCard = ({ node, enableSwap }: NodeCardProps) => {
     trafficPercentage,
   } = useNodeCommons(node);
 
-  const getProgressBarClass = (percentage: number) => {
-    if (percentage > 90) return "bg-red-600";
-    if (percentage > 50) return "bg-yellow-400";
-    return "bg-green-500";
-  };
-
   return (
     <Card
       className={`flex flex-col mx-auto purcarte-blur w-full min-w-[280px] max-w-sm ${
@@ -88,20 +82,14 @@ export const NodeCard = ({ node, enableSwap }: NodeCardProps) => {
         <div className="flex items-center justify-between">
           <span className="text-secondary-foreground">CPU</span>
           <div className="w-3/4 flex items-center gap-2">
-            <ProgressBar
-              value={cpuUsage}
-              className={getProgressBarClass(cpuUsage)}
-            />
+            <ProgressBar value={cpuUsage} />
             <span className="w-12 text-right">{cpuUsage.toFixed(0)}%</span>
           </div>
         </div>
         <div className="flex items-center justify-between">
           <span className="text-secondary-foreground">内存</span>
           <div className="w-3/4 flex items-center gap-2">
-            <ProgressBar
-              value={memUsage}
-              className={getProgressBarClass(memUsage)}
-            />
+            <ProgressBar value={memUsage} />
             <span className="w-12 text-right">{memUsage.toFixed(0)}%</span>
           </div>
         </div>
@@ -109,10 +97,7 @@ export const NodeCard = ({ node, enableSwap }: NodeCardProps) => {
           <div className="flex items-center justify-between">
             <span className="text-secondary-foreground">SWAP</span>
             <div className="w-3/4 flex items-center gap-2">
-              <ProgressBar
-                value={swapUsage}
-                className={getProgressBarClass(swapUsage)}
-              />
+              <ProgressBar value={swapUsage} />
               {node.swap_total > 0 ? (
                 <span className="w-12 text-right">{swapUsage.toFixed(0)}%</span>
               ) : (
@@ -124,10 +109,7 @@ export const NodeCard = ({ node, enableSwap }: NodeCardProps) => {
         <div className="flex items-center justify-between">
           <span className="text-secondary-foreground">硬盘</span>
           <div className="w-3/4 flex items-center gap-2">
-            <ProgressBar
-              value={diskUsage}
-              className={getProgressBarClass(diskUsage)}
-            />
+            <ProgressBar value={diskUsage} />
             <span className="w-12 text-right">{diskUsage.toFixed(0)}%</span>
           </div>
         </div>

src/components/sections/NodeListItem.tsx

@@ -6,13 +6,19 @@ import Flag from "./Flag";
 import { Tag } from "../ui/tag";
 import { useNodeCommons } from "@/hooks/useNodeCommons";
 import { CircleProgress } from "../ui/circle-progress";
+import { ProgressBar } from "../ui/progress-bar";
 
 interface NodeListItemProps {
   node: NodeWithStatus;
   enableSwap: boolean | undefined;
+  enableListItemProgressBar: boolean | undefined;
 }
 
-export const NodeListItem = ({ node, enableSwap }: NodeListItemProps) => {
+export const NodeListItem = ({
+  node,
+  enableSwap,
+  enableListItemProgressBar,
+}: NodeListItemProps) => {
   const {
     stats,
     isOnline,
@@ -60,16 +66,32 @@ export const NodeListItem = ({ node, enableSwap }: NodeListItemProps) => {
         <CpuIcon className="inline-block size-5 flex-shrink-0 text-blue-600" />
         <div className="ml-1 w-full items-center justify-center">
           <div>{node.cpu_cores} Cores</div>
-          <div>{isOnline ? `${cpuUsage.toFixed(1)}%` : "N/A"}</div>
+          {enableListItemProgressBar ? (
+            <div className="flex items-center gap-1">
+              <ProgressBar value={cpuUsage} h="h-2" />
+              <span className="w-10 text-right text-xs">
+                {isOnline ? `${cpuUsage.toFixed(0)}%` : "N/A"}
+              </span>
+            </div>
+          ) : (
+            <div>{isOnline ? `${cpuUsage.toFixed(0)}%` : "N/A"}</div>
+          )}
         </div>
       </div>
       <div className="col-span-1 flex items-center text-left">
         <MemoryStickIcon className="inline-block size-5 flex-shrink-0 text-green-600" />
         <div className="ml-1 w-full items-center justify-center">
           <div>{formatBytes(node.mem_total)}</div>
-          <div className="mt-1">
-            {isOnline ? `${memUsage.toFixed(1)}%` : "N/A"}
-          </div>
+          {enableListItemProgressBar ? (
+            <div className="flex items-center gap-1">
+              <ProgressBar value={memUsage} h="h-2" />
+              <span className="w-10 text-right text-xs">
+                {isOnline ? `${memUsage.toFixed(0)}%` : "N/A"}
+              </span>
+            </div>
+          ) : (
+            <div>{isOnline ? `${memUsage.toFixed(0)}%` : "N/A"}</div>
+          )}
         </div>
       </div>
       {enableSwap && (
@@ -78,9 +100,16 @@ export const NodeListItem = ({ node, enableSwap }: NodeListItemProps) => {
           {node.swap_total > 0 ? (
             <div className="ml-1 w-full items-center justify-center">
               <div>{formatBytes(node.swap_total)}</div>
-              <div className="mt-1">
-                {isOnline ? `${swapUsage.toFixed(1)}%` : "N/A"}
-              </div>
+              {enableListItemProgressBar ? (
+                <div className="flex items-center gap-1">
+                  <ProgressBar value={swapUsage} h="h-2" />
+                  <span className="w-10 text-right text-xs">
+                    {isOnline ? `${swapUsage.toFixed(0)}%` : "N/A"}
+                  </span>
+                </div>
+              ) : (
+                <div>{isOnline ? `${swapUsage.toFixed(0)}%` : "N/A"}</div>
+              )}
             </div>
           ) : (
             <div className="ml-1 w-full item-center justify-center">OFF</div>
@@ -91,9 +120,16 @@ export const NodeListItem = ({ node, enableSwap }: NodeListItemProps) => {
         <HardDriveIcon className="inline-block size-5 flex-shrink-0 text-red-600" />
         <div className="ml-1 w-full items-center justify-center">
           <div>{formatBytes(node.disk_total)}</div>
-          <div className="mt-1">
-            {isOnline ? `${diskUsage.toFixed(1)}%` : "N/A"}
-          </div>
+          {enableListItemProgressBar ? (
+            <div className="flex items-center gap-1">
+              <ProgressBar value={diskUsage} h="h-2" />
+              <span className="w-10 text-right text-xs">
+                {isOnline ? `${diskUsage.toFixed(0)}%` : "N/A"}
+              </span>
+            </div>
+          ) : (
+            <div>{isOnline ? `${diskUsage.toFixed(0)}%` : "N/A"}</div>
+          )}
         </div>
       </div>
       <div className="col-span-1">