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">
+    <div className="flex justify-between items-center w-full mb-6 px-4 relative">
-      {steps.map((step, index) => (
+      {/* 连接线 */}
-        <div key={step.id} className="flex flex-col items-center">
+      <div className="absolute top-8 left-0 right-0 h-0.5 bg-gray-200 -z-10"></div>
-          <div
+      
-            className={cn(
+      {steps.map((step, index) => {
-              "w-16 h-16 rounded-full flex items-center justify-center mb-2",
+        const isCompleted = index < currentStep
-              currentStep === index ? "bg-blue-500 text-white" : "bg-gray-200 text-gray-500",
+        const isActive = index === currentStep
-            )}
+        
-          >
+        return (
-            {step.icon}
+          <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>
   )
 }

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.map((step, index) => (
+      <Steps current={currentStep} layout="horizontal">
-        <div key={step.id} className="flex flex-col items-center">
+        {steps.map((step, index) => (
-          <div
+          <StepItem 
-            className={`w-16 h-16 rounded-full flex items-center justify-center mb-2 ${
+            key={step.id} 
-              currentStep === index ? "bg-blue-500 text-white" : "bg-gray-200 text-gray-500"
+            title={step.title} 
-            }`}
+            icon={step.icon} 
-          >
+            status={
-            {step.icon}
+              index === currentStep ? 'process' : 
-          </div>
+              index < currentStep ? 'finish' : 'default'
-          <span className={`text-sm ${currentStep === index ? "text-blue-500 font-medium" : "text-gray-500"}`}>
+            }
-            {step.title}
+          />
-          </span>
+        ))}
-        </div>
+      </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,8 +372,8 @@ 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)}>
+                  <div className="flex items-center space-x-3" onClick={() => toggleCustomerService(cs.id)}>
                     <Avatar>
                       <div
                         className={`w-full h-full flex items-center justify-center ${cs.status === "online" ? "bg-green-100" : "bg-gray-100"}`}

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';