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

组件封装完成

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

@@ -1,10 +1,10 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { Steps, StepItem } from 'tdesign-mobile-react';
 import {
   Users,
   Search,
   Database,
-  Plus,
   X,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
@@ -16,39 +16,32 @@ import { Checkbox } from '@/components/ui/checkbox';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import Layout from '@/components/Layout';
 import PageHeader from '@/components/PageHeader';
-import BottomNav from '@/components/BottomNav';
 import { useToast } from '@/components/ui/toast';
 import { fetchAccountList, Account } from '@/api/trafficDistribution';
 import '@/components/Layout.css';
 
-// 步骤指示器组件
-function StepIndicator({ currentStep, steps }: { currentStep: number; steps: Step[] }) {
-  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-1 items-center">
-          <div className={`w-10 h-10 rounded-full flex items-center justify-center ${
-            index < currentStep ? 'bg-blue-500 text-white' : 
-            index === currentStep ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-500'
-          }`}>
-            {React.cloneElement(step.icon as React.ReactElement, { className: "w-5 h-5" })}
-          </div>
-          {index < steps.length - 1 && (
-            <div className={`flex-1 h-1 mx-2 ${
-              index < currentStep ? 'bg-blue-500' : 'bg-gray-200'
-            }`}></div>
-          )}
-        </div>
-      ))}
-    </div>
-  );
-}
-
-interface Step {
-  id: number;
-  title: string;
-  icon: React.ReactNode;
-}
+// 移除原来的步骤指示器组件
+// function StepIndicator({ currentStep, steps }: { currentStep: number; steps: Step[] }) {
+//   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-1 items-center">
+//           <div className={`w-10 h-10 rounded-full flex items-center justify-center ${
+//             index < currentStep ? 'bg-blue-500 text-white' : 
+//             index === currentStep ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-500'
+//           }`}>
+//             {React.cloneElement(step.icon as React.ReactElement, { className: "w-5 h-5" })}
+//           </div>
+//           {index < steps.length - 1 && (
+//             <div className={`flex-1 h-1 mx-2 ${
+//               index < currentStep ? 'bg-blue-500' : 'bg-gray-200'
+//             }`}></div>
+//           )}
+//         </div>
+//       ))}
+//     </div>
+//   );
+// }
 
 interface BasicInfoData {
   name: string;
@@ -114,7 +107,7 @@ const AccountSelectionDialog = ({
   const { toast } = useToast();
 
   // 获取账号列表
-  const fetchAccounts = async (pageNum: number = 1, reset: boolean = true) => {
+  const fetchAccounts = useCallback(async (pageNum: number = 1, reset: boolean = true) => {
     setLoading(true);
     try {
       const response = await fetchAccountList({
@@ -180,7 +173,7 @@ const AccountSelectionDialog = ({
     } finally {
       setLoading(false);
     }
-  };
+  }, [accounts.length, toast]);
 
   useEffect(() => {
     if (open) {
@@ -188,7 +181,7 @@ const AccountSelectionDialog = ({
       fetchAccounts(1, true);
       setPage(1);
     }
-  }, [open, selectedAccounts]);
+  }, [open, selectedAccounts, fetchAccounts]);
 
   const toggleAccount = (id: string) => {
     setTempSelectedAccounts(prev =>
@@ -314,10 +307,10 @@ export default function NewDistribution() {
     trafficPool: {},
   });
 
-  const steps: Step[] = [
-    { id: 1, title: "基本信息", icon: <Plus /> },
-    { id: 2, title: "目标设置", icon: <Users /> },
-    { id: 3, title: "流量池选择", icon: <Database /> },
+  const steps = [
+    { title: "基本信息", content: "step1" },
+    { title: "目标设置", content: "step2" },
+    { title: "流量池选择", content: "step3" },
   ];
 
   // 生成默认计划名称
@@ -873,7 +866,13 @@ export default function NewDistribution() {
     >
       <div className="bg-gray-50 min-h-screen pb-16">
         <div className="p-4">
-          <StepIndicator currentStep={currentStep} steps={steps} />
+          <div className="mb-6">
+            <Steps current={currentStep}>
+              {steps.map((step, index) => (
+                <StepItem key={index} title={step.title} />
+              ))}
+            </Steps>
+          </div>
           
           {currentStep === 0 && (
             <BasicInfoStep