From b785998c4df87ef55049c4d4623a476afb4115df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=AC=94=E8=AE=B0=E6=9C=AC=E9=87=8C=E7=9A=84=E6=B0=B8?=
 =?UTF-8?q?=E5=B9=B3?= <fsmecx@gmail.com>
Date: Wed, 9 Jul 2025 19:32:55 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9C=AC=E6=AC=A1=E6=8F=90=E4=BA=A4?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=86=85=E5=AE=B9=E5=A6=82=E4=B8=8B=20?=
 =?UTF-8?q?=E6=AD=A5=E9=AA=A4=E5=99=A8=E6=94=B9=E5=A5=BD=E4=BA=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../new/components/step-indicator.tsx         | 39 ++++++++++++-------
 .../traffic-distribution/NewDistribution.tsx  | 37 +++++++++---------
 .../TrafficDistribution.tsx                   |  8 ----
 3 files changed, 43 insertions(+), 41 deletions(-)

diff --git a/Cunkebao/app/workspace/traffic-distribution/new/components/step-indicator.tsx b/Cunkebao/app/workspace/traffic-distribution/new/components/step-indicator.tsx
index c9f5916a3..c381ed17e 100644
--- a/Cunkebao/app/workspace/traffic-distribution/new/components/step-indicator.tsx
+++ b/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>
   )
 }
diff --git a/nkebao/src/pages/workspace/traffic-distribution/NewDistribution.tsx b/nkebao/src/pages/workspace/traffic-distribution/NewDistribution.tsx
index 6c7c594db..23be78bb2 100644
--- a/nkebao/src/pages/workspace/traffic-distribution/NewDistribution.tsx
+++ b/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">
-      {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>
-      ))}
+    <div className="w-full mb-6 px-12">
+      <Steps current={currentStep} layout="horizontal">
+        {steps.map((step, index) => (
+          <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,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" >
-                  <div className="flex items-center space-x-3"  onClick={() => toggleCustomerService(cs.id)}>
+                <CardContent className="p-3 flex items-center justify-between">
+                  <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"}`}
diff --git a/nkebao/src/pages/workspace/traffic-distribution/TrafficDistribution.tsx b/nkebao/src/pages/workspace/traffic-distribution/TrafficDistribution.tsx
index 134a23125..6750c7b1f 100644
--- a/nkebao/src/pages/workspace/traffic-distribution/TrafficDistribution.tsx
+++ b/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';