feat: 本次提交更新内容如下

步骤器改好了

Cunkebao/app/workspace/traffic-distribution/new/components/step-indicator.tsx

@@ -17,22 +17,31 @@ interface StepIndicatorProps {
 
 export default function StepIndicator({ currentStep, steps }: StepIndicatorProps) {
   return (
-    <div className="flex justify-between items-center w-full mb-6 px-4">
-      {steps.map((step, index) => (
-        <div key={step.id} className="flex flex-col items-center">
-          <div
-            className={cn(
-              "w-16 h-16 rounded-full flex items-center justify-center mb-2",
-              currentStep === index ? "bg-blue-500 text-white" : "bg-gray-200 text-gray-500",
-            )}
-          >
-            {step.icon}
+    <div className="flex justify-between items-center w-full mb-6 px-4 relative">
+      {/* 连接线 */}
+      <div className="absolute top-8 left-0 right-0 h-0.5 bg-gray-200 -z-10"></div>
+      
+      {steps.map((step, index) => {
+        const isCompleted = index < currentStep
+        const isActive = index === currentStep
+        
+        return (
+          <div key={step.id} className="flex flex-col items-center z-10">
+            <div
+              className={cn(
+                "w-16 h-16 rounded-full flex items-center justify-center mb-2",
+                isActive ? "bg-blue-500 text-white" : 
+                isCompleted ? "bg-blue-500 text-white" : "bg-gray-200 text-gray-500",
+              )}
+            >
+              {step.icon}
+            </div>
+            <span className={cn("text-sm", isActive ? "text-blue-500 font-medium" : isCompleted ? "text-blue-500" : "text-gray-500")}>
+              {step.title}
+            </span>
           </div>
-          <span className={cn("text-sm", currentStep === index ? "text-blue-500 font-medium" : "text-gray-500")}>
-            {step.title}
-          </span>
-        </div>
-      ))}
+        )
+      })}
     </div>
   )
 }