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="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",
-              currentStep === index ? "bg-blue-500 text-white" : "bg-gray-200 text-gray-500",
+                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", currentStep === index ? "text-blue-500 font-medium" : "text-gray-500")}>
+            <span className={cn("text-sm", isActive ? "text-blue-500 font-medium" : isCompleted ? "text-blue-500" : "text-gray-500")}>
               {step.title}
             </span>
           </div>
-      ))}
+        )
+      })}
     </div>
   )
 }

nkebao/src/pages/workspace/traffic-distribution/NewDistribution.tsx

@@ -8,6 +8,8 @@ import {
   Settings,
   Search,
 } from 'lucide-react';
+import { Steps, StepItem } from 'tdesign-mobile-react'; // 添加这一行
+import 'tdesign-mobile-react/es/style/index.css'; // 添加这一行
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
@@ -88,21 +90,20 @@ interface TrafficPool {
 // 步骤指示器组件
 function StepIndicator({ currentStep, steps }: StepIndicatorProps) {
   return (
-    <div className="flex justify-between items-center w-full mb-6 px-4">
+    <div className="w-full mb-6 px-12">
+      <Steps current={currentStep} layout="horizontal">
         {steps.map((step, index) => (
-        <div key={step.id} className="flex flex-col items-center">
-          <div
-            className={`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>
-          <span className={`text-sm ${currentStep === index ? "text-blue-500 font-medium" : "text-gray-500"}`}>
-            {step.title}
-          </span>
-        </div>
+          <StepItem 
+            key={step.id} 
+            title={step.title} 
+            icon={step.icon} 
+            status={
+              index === currentStep ? 'process' : 
+              index < currentStep ? 'finish' : 'default'
+            }
+          />
         ))}
+      </Steps>
     </div>
   );
 }
@@ -336,7 +337,7 @@ function TargetSettingsStep({ onNext, onBack, initialData = {} }: TargetSettings
                 key={device.id}
                 className={`cursor-pointer border ${selectedDevices.includes(device.id) ? "border-blue-500" : "border-gray-200"}`}
               >
-                <CardContent className="p-3 flex items-center justify-between" >
+                <CardContent className="p-3 flex items-center justify-between">
                   <div className="flex items-center space-x-3" onClick={() => toggleDevice(device.id)}>
                     <Avatar>
                       <div
@@ -371,7 +372,7 @@ function TargetSettingsStep({ onNext, onBack, initialData = {} }: TargetSettings
                 key={cs.id}
                 className={`cursor-pointer border ${selectedCustomerServices.includes(cs.id) ? "border-blue-500" : "border-gray-200"}`}
               >
-                <CardContent className="p-3 flex items-center justify-between" >
+                <CardContent className="p-3 flex items-center justify-between">
                   <div className="flex items-center space-x-3" onClick={() => toggleCustomerService(cs.id)}>
                     <Avatar>
                       <div

nkebao/src/pages/workspace/traffic-distribution/TrafficDistribution.tsx

@@ -18,14 +18,6 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Badge } from '@/components/ui/badge';
 import { Switch } from '@/components/ui/switch';
-import { Progress } from '@/components/ui/progress';
-// 不再使用 DropdownMenu 组件
-// import {
-//   DropdownMenu,
-//   DropdownMenuContent,
-//   DropdownMenuItem,
-//   DropdownMenuTrigger,
-// } from '@/components/ui/dropdown-menu';
 import Layout from '@/components/Layout';
 import PageHeader from '@/components/PageHeader';
 import BottomNav from '@/components/BottomNav';