fix: 修复进度条组件的样式问题

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(
+      className={`w-full bg-(--accent-4)/50 rounded-full ${h} overflow-hidden`}>
-        value
+      <div
-      )} ${className}`}
+        className={`${h} ${progressRoundedClass} transition-all duration-500 ${getProgressBarClass(
-      style={{ width: `${value}%` }}></div>
+          clampedValue
-  </div>
+        )} ${className}`}
-);
+        style={{ width: `${clampedValue}%` }}></div>
+    </div>
+  );
+};