From dc939228b28af92f96096481ad1dd744ecd6f59f Mon Sep 17 00:00:00 2001
From: Montia37 <MTChaoyi@outlook.com>
Date: Mon, 8 Sep 2025 18:50:07 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E8=BF=9B=E5=BA=A6?=
 =?UTF-8?q?=E6=9D=A1=E7=BB=84=E4=BB=B6=E7=9A=84=E6=A0=B7=E5=BC=8F=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ui/progress-bar.tsx | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/components/ui/progress-bar.tsx b/src/components/ui/progress-bar.tsx
index ef5e446..cd094f2 100644
--- a/src/components/ui/progress-bar.tsx
+++ b/src/components/ui/progress-bar.tsx
@@ -8,12 +8,19 @@ export const ProgressBar = ({
   value: number;
   h?: string;
   className?: string;
-}) => (
-  <div className={`w-full bg-(--accent-4)/50 rounded-full ${h}`}>
+}) => {
+  const clampedValue = Math.max(0, Math.min(100, value));
+  const progressRoundedClass =
+    clampedValue < 10 ? "rounded-sm" : "rounded-full";
+
+  return (
     <div
-      className={`${h} rounded-full transition-all duration-500 ${getProgressBarClass(
-        value
-      )} ${className}`}
-      style={{ width: `${value}%` }}></div>
-  </div>
-);
+      className={`w-full bg-(--accent-4)/50 rounded-full ${h} overflow-hidden`}>
+      <div
+        className={`${h} ${progressRoundedClass} transition-all duration-500 ${getProgressBarClass(
+          clampedValue
+        )} ${className}`}
+        style={{ width: `${clampedValue}%` }}></div>
+    </div>
+  );
+};