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

流量分发构建完完成

nkebao/src/App.tsx

@@ -65,6 +65,7 @@ function App() {
           <Route path="/workspace/auto-like/:id/edit" element={<NewAutoLike />} />
           <Route path="/workspace/traffic-distribution" element={<TrafficDistribution />} />
           <Route path="/workspace/traffic-distribution/new" element={<NewDistribution />} />
+          <Route path="/workspace/traffic-distribution/edit/:id" element={<NewDistribution />} />
                   <Route path="/workspace/auto-group" element={<AutoGroup />} />
                   <Route path="/workspace/auto-group/:id" element={<AutoGroupDetail />} />
                   <Route path="/workspace/group-push" element={<GroupPush />} />

nkebao/src/api/trafficDistribution.ts

@@ -57,31 +57,39 @@ export interface TrafficPoolListResponse {
 
 // 流量分发规则类型
 export interface DistributionRule {
-  id: string;
+  id: number;
   name: string;
+  type: number;
   status: number;
-  deviceCount: number;
-  totalTraffic: number;
-  distributedTraffic: number;
-  lastDistributionTime: string;
+  autoStart: number;
   createTime: string;
-  creator: string;
-  distributionInterval: number;
-  maxDistributionPerDay: number;
-  timeRange: { start: string; end: string };
-  targetChannels?: string[];
-  distributionRatio?: Record<string, number>;
-  priority?: 'high' | 'medium' | 'low';
-  filterConditions?: string[];
+  updateTime: string;
+  companyId: number;
   config?: {
-    total?: {
+    id: number;
+    workbenchId: number;
+    distributeType: number;   // 1-均分配, 2-优先级分配, 3-比例分配
+    maxPerDay: number;        // 每日最大分配量
+    timeType: number;         // 1-全天, 2-自定义时间段
+    startTime: string;        // 开始时间
+    endTime: string;          // 结束时间
+    account: string[];        // 账号列表
+    devices: string[];        // 设备列表
+    pools: string[];          // 流量池列表
+    createTime: string;
+    updateTime: string;
+    lastUpdated: string;
+    total: {
       dailyAverage: number;    // 日均分发量
-      deviceCount: number;     // 分发设备
-      poolCount: string;       // 流量池
-      totalAccounts: number;   // 分发账户
+      totalAccounts: number;  // 分发账户总数
+      deviceCount: number;     // 分发设备数量
+      poolCount: number;       // 流量池数量
       totalUsers: number;      // 总用户数
-    }
+    };
   };
+  auto_like?: any;
+  moments_sync?: any;
+  group_push?: any;
 }
 
 // 流量分发列表响应类型
@@ -170,7 +178,7 @@ export const fetchDistributionRules = async (params: {
  * @returns 流量分发规则详情
  */
 export const fetchDistributionRuleDetail = async (id: string): Promise<ApiResponse<DistributionRule>> => {
-  return get<ApiResponse<DistributionRule>>(`/v1/workbench/detail/${id}`);
+  return get<ApiResponse<DistributionRule>>(`/v1/workbench/detail?id=${id}`);
 };
 
 /**
@@ -191,8 +199,9 @@ export const createDistributionRule = async (params: any): Promise<ApiResponse<{
  * @param params 更新参数
  * @returns 更新结果
  */
-export const updateDistributionRule = async (id: string, params: any): Promise<ApiResponse<any>> => {
-  return put<ApiResponse<any>>(`/v1/workbench/update/${id}`, {
+export const updateDistributionRule = async (id : string, params: any): Promise<ApiResponse<any>> => {
+  return post<ApiResponse<any>>(`/v1/workbench/update`, {
+    id: id,
     ...params,
     type: WorkbenchTaskType.TRAFFIC_DISTRIBUTION
   });

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import { Steps, StepItem } from 'tdesign-mobile-react';
 import {
   Users,
@@ -16,7 +16,7 @@ import Layout from '@/components/Layout';
 import PageHeader from '@/components/PageHeader';
 import DeviceSelection from '@/components/DeviceSelection';
 import { useToast } from '@/components/ui/toast';
-import { fetchAccountList, Account, createDistributionRule } from '@/api/trafficDistribution';
+import { fetchAccountList, Account, createDistributionRule, updateDistributionRule, fetchDistributionRuleDetail } from '@/api/trafficDistribution';
 import '@/components/Layout.css';
 import TrafficPoolSelection from '@/components/TrafficPoolSelection';
 
@@ -248,7 +248,7 @@ const AccountSelectionDialog = ({
           >
             确认
           </Button>
-        </div>
+    </div>
       </DialogContent>
     </Dialog>
   );
@@ -256,8 +256,11 @@ const AccountSelectionDialog = ({
 
 export default function NewDistribution() {
   const navigate = useNavigate();
+  const { id: ruleId } = useParams<{ id: string }>();
   const { toast } = useToast();
   const [currentStep, setCurrentStep] = useState(0);
+  const [isEditMode, setIsEditMode] = useState(false);
+  const [loading, setLoading] = useState(false);
   const [formData, setFormData] = useState<FormData>({
     basicInfo: {},
     targetSettings: {},
@@ -270,6 +273,100 @@ export default function NewDistribution() {
     { title: "流量池选择", content: "step3" },
   ];
 
+  // 加载规则数据
+  const loadRuleData = useCallback(async (id: string) => {
+    console.log('开始加载规则数据，ID:', id);
+    setLoading(true);
+    try {
+      console.log('调用API: /v1/workbench/detail?id=' + id);
+      const response = await fetchDistributionRuleDetail(id);
+      
+      if (response.code === 200 && response.data) {
+        const rule = response.data;
+        const config = rule.config as any || {};
+        
+        console.log('接收到的详情数据:', rule);
+        console.log('config数据:', config);
+        
+        // 转换分配类型：1-均分配, 2-优先级分配, 3-比例分配
+        const getDistributionMethod = (distributeType: number) => {
+          switch (distributeType) {
+            case 2: return 'priority';
+            case 3: return 'ratio';
+            default: return 'equal';
+          }
+        };
+        
+        // 转换时间限制类型：1-全天, 2-自定义时间段
+        const timeRestriction = config?.timeType === 1 ? 'allDay' : 'custom';
+        
+        // 转换后端数据为前端表单格式
+        setFormData({
+          basicInfo: {
+            name: rule.name || '',
+            distributionMethod: getDistributionMethod(config?.distributeType),
+            dailyLimit: config?.maxPerDay || 50,
+            timeRestriction: timeRestriction,
+            startTime: config?.startTime || '09:00',
+            endTime: config?.endTime || '18:00',
+            selectedAccounts: config?.account || [],
+          },
+          targetSettings: {
+            selectedDevices: config?.devices || [],
+          },
+          trafficPool: {
+            selectedPools: config?.pools || [],
+          },
+        });
+        
+        console.log('转换后的表单数据:', {
+          basicInfo: {
+            name: rule.name || '',
+            distributionMethod: getDistributionMethod(config?.distributeType),
+            dailyLimit: config?.maxPerDay || 50,
+            timeRestriction: timeRestriction,
+            startTime: config?.startTime || '09:00',
+            endTime: config?.endTime || '18:00',
+            selectedAccounts: config?.account || [],
+          },
+          targetSettings: {
+            selectedDevices: config?.devices || [],
+          },
+          trafficPool: {
+            selectedPools: config?.pools || [],
+          },
+        });
+      } else {
+        toast({
+          title: "加载失败",
+          description: response.msg || "无法加载规则数据",
+          variant: "destructive"
+        });
+        navigate('/workspace/traffic-distribution');
+      }
+    } catch (error) {
+      console.error('加载规则数据失败:', error);
+      toast({
+        title: "加载失败",
+        description: "网络错误，请稍后重试",
+        variant: "destructive"
+      });
+      navigate('/workspace/traffic-distribution');
+    } finally {
+      setLoading(false);
+    }
+  }, [toast, navigate]);
+
+  // 检查是否为编辑模式并加载数据
+  useEffect(() => {
+    console.log('检查编辑模式 - ruleId:', ruleId);
+    if (ruleId) {
+      console.log('进入编辑模式，加载数据...');
+      setIsEditMode(true);
+      loadRuleData(ruleId);
+    }
+  }, [ruleId, loadRuleData]);
+
   // 生成默认计划名称
   const generateDefaultName = () => {
     const now = new Date();
@@ -341,18 +438,25 @@ export default function NewDistribution() {
 
       console.log('提交的数据:', apiParams);
       
-      const response = await createDistributionRule(apiParams);
+      let response;
+      if (isEditMode && ruleId) {
+        // 编辑模式 - 使用更新接口
+        response = await updateDistributionRule(ruleId, apiParams);
+      } else {
+        // 创建模式 - 使用创建接口
+        response = await createDistributionRule(apiParams);
+      }
       
       if (response.code === 200) {
         toast({
-          title: "创建成功",
-          description: "流量分发规则已成功创建"
+          title: isEditMode ? "更新成功" : "创建成功",
+          description: isEditMode ? "流量分发规则已成功更新" : "流量分发规则已成功创建"
         });
         
         navigate('/workspace/traffic-distribution');
       } else {
         toast({
-          title: "创建失败",
+          title: isEditMode ? "更新失败" : "创建失败",
           description: response.msg || "请稍后重试",
           variant: "destructive"
         });
@@ -360,27 +464,43 @@ export default function NewDistribution() {
     } catch (error) {
       console.error('提交失败:', error);
       toast({
-        title: "创建失败",
+        title: isEditMode ? "更新失败" : "创建失败",
         description: "网络错误，请稍后重试",
         variant: "destructive"
       });
     }
   };
 
-  // 基本信息步骤组件  
+// 基本信息步骤组件
   const BasicInfoStep = ({ onNext, initialData = {} }: { onNext: (data: BasicInfoData) => void; initialData?: Partial<BasicInfoData> }) => {
-    const [formData, setFormData] = useState<BasicInfoData>({
-      name: initialData.name || generateDefaultName(),
-      distributionMethod: initialData.distributionMethod || "equal",
-      dailyLimit: initialData.dailyLimit || 50,
-      timeRestriction: initialData.timeRestriction || "custom",
-      startTime: initialData.startTime || "09:00",
-      endTime: initialData.endTime || "18:00",
+  const [formData, setFormData] = useState<BasicInfoData>({
+      name: initialData.name || (isEditMode ? '' : generateDefaultName()),
+    distributionMethod: initialData.distributionMethod || "equal",
+    dailyLimit: initialData.dailyLimit || 50,
+    timeRestriction: initialData.timeRestriction || "custom",
+    startTime: initialData.startTime || "09:00",
+    endTime: initialData.endTime || "18:00",
       selectedAccounts: initialData.selectedAccounts || [],
     });
 
     const [accountDialogOpen, setAccountDialogOpen] = useState(false);
 
+    // 当编辑模式下initialData变化时，更新表单数据
+    useEffect(() => {
+      if (initialData.name) {
+        setFormData(prev => ({
+          ...prev,
+          name: initialData.name || '',
+          distributionMethod: initialData.distributionMethod || prev.distributionMethod,
+          dailyLimit: initialData.dailyLimit || prev.dailyLimit,
+          timeRestriction: initialData.timeRestriction || prev.timeRestriction,
+          startTime: initialData.startTime || prev.startTime,
+          endTime: initialData.endTime || prev.endTime,
+          selectedAccounts: initialData.selectedAccounts || prev.selectedAccounts,
+        }));
+      }
+    }, [initialData]);
+
     const handleChange = (field: keyof BasicInfoData, value: string | number | string[]) => {
       setFormData(prev => ({ ...prev, [field]: value }));
     };
@@ -394,9 +514,9 @@ export default function NewDistribution() {
         return "请选择账号";
       }
       return `已选择 ${formData.selectedAccounts.length} 个账号`;
-    };
+  };
 
-    const handleSubmit = () => {
+  const handleSubmit = () => {
       if (!formData.name.trim()) {
         toast({
           title: "请填写计划名称",
@@ -411,26 +531,26 @@ export default function NewDistribution() {
         });
         return;
       }
-      onNext(formData);
-    };
+    onNext(formData);
+  };
 
-    return (
+  return (
       <div className="bg-white rounded-lg p-6">
-        <h2 className="text-xl font-bold mb-6">基本信息</h2>
+      <h2 className="text-xl font-bold mb-6">基本信息</h2>
 
-        <div className="space-y-6">
-          <div className="space-y-2">
-            <Label htmlFor="name" className="flex items-center">
-              计划名称 <span className="text-red-500 ml-1">*</span>
-            </Label>
-            <Input
-              id="name"
-              value={formData.name}
-              onChange={(e) => handleChange("name", e.target.value)}
-              placeholder="请输入计划名称"
+      <div className="space-y-6">
+        <div className="space-y-2">
+          <Label htmlFor="name" className="flex items-center">
+            计划名称 <span className="text-red-500 ml-1">*</span>
+          </Label>
+          <Input
+            id="name"
+            value={formData.name}
+            onChange={(e) => handleChange("name", e.target.value)}
+            placeholder="请输入计划名称"
               className="h-12"
-            />
-          </div>
+          />
+        </div>
 
           <div className="space-y-4">
             <Label className="flex items-center">
@@ -454,86 +574,86 @@ export default function NewDistribution() {
               <Users className="h-4 w-4 mr-1" />
               已选账号：<span className="text-blue-600 font-medium ml-1">{formData.selectedAccounts.length} 个</span>
             </div>
-          </div>
+        </div>
+
+        <div className="space-y-2">
+          <Label>分配方式</Label>
+          <RadioGroup
+            value={formData.distributionMethod}
+              onValueChange={(value) => handleChange("distributionMethod", value as 'equal' | 'priority' | 'ratio')}
+            className="space-y-2"
+          >
+            <div className="flex items-center space-x-2">
+              <RadioGroupItem value="equal" id="equal" />
+              <Label htmlFor="equal" className="cursor-pointer">
+                均分配 <span className="text-gray-500 text-sm">(流量将均分配给所有客服)</span>
+              </Label>
+            </div>
+            <div className="flex items-center space-x-2">
+              <RadioGroupItem value="priority" id="priority" />
+              <Label htmlFor="priority" className="cursor-pointer">
+                优先级分配 <span className="text-gray-500 text-sm">(按客服优先级顺序分配)</span>
+              </Label>
+            </div>
+            <div className="flex items-center space-x-2">
+              <RadioGroupItem value="ratio" id="ratio" />
+              <Label htmlFor="ratio" className="cursor-pointer">
+                比例分配 <span className="text-gray-500 text-sm">(按设定比例分配流量)</span>
+              </Label>
+            </div>
+          </RadioGroup>
+        </div>
+
+        <div className="space-y-4">
+          <Label>分配限制</Label>
 
           <div className="space-y-2">
-            <Label>分配方式</Label>
-            <RadioGroup
-              value={formData.distributionMethod}
-              onValueChange={(value) => handleChange("distributionMethod", value as 'equal' | 'priority' | 'ratio')}
-              className="space-y-2"
-            >
-              <div className="flex items-center space-x-2">
-                <RadioGroupItem value="equal" id="equal" />
-                <Label htmlFor="equal" className="cursor-pointer">
-                  均分配 <span className="text-gray-500 text-sm">(流量将均分配给所有客服)</span>
-                </Label>
-              </div>
-              <div className="flex items-center space-x-2">
-                <RadioGroupItem value="priority" id="priority" />
-                <Label htmlFor="priority" className="cursor-pointer">
-                  优先级分配 <span className="text-gray-500 text-sm">(按客服优先级顺序分配)</span>
-                </Label>
-              </div>
-              <div className="flex items-center space-x-2">
-                <RadioGroupItem value="ratio" id="ratio" />
-                <Label htmlFor="ratio" className="cursor-pointer">
-                  比例分配 <span className="text-gray-500 text-sm">(按设定比例分配流量)</span>
-                </Label>
-              </div>
-            </RadioGroup>
-          </div>
-
-          <div className="space-y-4">
-            <Label>分配限制</Label>
-
-            <div className="space-y-2">
-              <div className="flex justify-between items-center">
-                <span>每日最大分配量</span>
-                <span className="font-medium">{formData.dailyLimit} 人/天</span>
-              </div>
-              <input
-                type="range"
-                value={formData.dailyLimit}
-                min={1}
-                max={200}
-                step={1}
-                onChange={(e) => handleChange("dailyLimit", parseInt(e.target.value))}
-                className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
+            <div className="flex justify-between items-center">
+              <span>每日最大分配量</span>
+              <span className="font-medium">{formData.dailyLimit} 人/天</span>
+            </div>
+            <input
+              type="range"
+              value={formData.dailyLimit}
+              min={1}
+              max={200}
+              step={1}
+              onChange={(e) => handleChange("dailyLimit", parseInt(e.target.value))}
+              className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
                 style={{
                   background: `linear-gradient(to right, #3b82f6 0%, #3b82f6 ${(formData.dailyLimit / 200) * 100}%, #e5e7eb ${(formData.dailyLimit / 200) * 100}%, #e5e7eb 100%)`
                 }}
-              />
-              <p className="text-sm text-gray-500">限制每天最多分配的流量数量</p>
-            </div>
+            />
+            <p className="text-sm text-gray-500">限制每天最多分配的流量数量</p>
+          </div>
 
-            <div className="space-y-4 pt-4">
-              <Label>时间限制</Label>
-              <RadioGroup
-                value={formData.timeRestriction}
+          <div className="space-y-4 pt-4">
+            <Label>时间限制</Label>
+            <RadioGroup
+              value={formData.timeRestriction}
                 onValueChange={(value) => handleChange("timeRestriction", value as 'allDay' | 'custom')}
-                className="space-y-4"
-              >
-                <div className="flex items-center space-x-2">
-                  <RadioGroupItem value="allDay" id="allDay" />
-                  <Label htmlFor="allDay" className="cursor-pointer">
-                    全天分配
-                  </Label>
-                </div>
-                <div className="flex items-center space-x-2">
-                  <RadioGroupItem value="custom" id="custom" />
-                  <Label htmlFor="custom" className="cursor-pointer">
-                    自定义时间段
-                  </Label>
-                </div>
-              </RadioGroup>
+              className="space-y-4"
+            >
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="allDay" id="allDay" />
+                <Label htmlFor="allDay" className="cursor-pointer">
+                  全天分配
+                </Label>
+              </div>
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="custom" id="custom" />
+                <Label htmlFor="custom" className="cursor-pointer">
+                  自定义时间段
+                </Label>
+              </div>
+            </RadioGroup>
 
-              {formData.timeRestriction === "custom" && (
-                <div className="grid grid-cols-2 gap-4 pt-2">
-                  <div>
-                    <Label htmlFor="startTime" className="mb-2 block">
-                      开始时间
-                    </Label>
+            {formData.timeRestriction === "custom" && (
+              <div className="grid grid-cols-2 gap-4 pt-2">
+                <div>
+                  <Label htmlFor="startTime" className="mb-2 block">
+                    开始时间
+                  </Label>
                     <Input
                       id="startTime"
                       type="time"
@@ -541,11 +661,11 @@ export default function NewDistribution() {
                       onChange={(e) => handleChange("startTime", e.target.value)}
                       className="h-12"
                     />
-                  </div>
-                  <div>
-                    <Label htmlFor="endTime" className="mb-2 block">
-                      结束时间
-                    </Label>
+                </div>
+                <div>
+                  <Label htmlFor="endTime" className="mb-2 block">
+                    结束时间
+                  </Label>
                     <Input
                       id="endTime"
                       type="time"
@@ -553,18 +673,18 @@ export default function NewDistribution() {
                       onChange={(e) => handleChange("endTime", e.target.value)}
                       className="h-12"
                     />
-                  </div>
                 </div>
-              )}
-            </div>
+              </div>
+            )}
           </div>
         </div>
+      </div>
 
-        <div className="mt-8 flex justify-end">
-          <Button onClick={handleSubmit} className="px-8">
-            下一步 →
-          </Button>
-        </div>
+      <div className="mt-8 flex justify-end">
+        <Button onClick={handleSubmit} className="px-8">
+          下一步 →
+        </Button>
+      </div>
 
         <AccountSelectionDialog
           open={accountDialogOpen}
@@ -572,7 +692,7 @@ export default function NewDistribution() {
           selectedAccounts={formData.selectedAccounts}
           onConfirm={handleAccountConfirm}
         />
-      </div>
+    </div>
     );
   };
 
@@ -580,7 +700,7 @@ export default function NewDistribution() {
   const TargetSettingsStep = ({ onNext, onBack, initialData = {} }: { onNext: (data: TargetSettingsData) => void; onBack: () => void; initialData?: Partial<TargetSettingsData> }) => {
     const [selectedDevices, setSelectedDevices] = useState<string[]>(initialData.selectedDevices || []);
 
-    const handleSubmit = () => {
+  const handleSubmit = () => {
       if (selectedDevices.length === 0) {
         toast({
           title: "请选择至少一个设备",
@@ -589,15 +709,15 @@ export default function NewDistribution() {
         return;
       }
       
-      onNext({
-        selectedDevices,
-      });
-    };
+    onNext({
+      selectedDevices,
+    });
+  };
 
-    return (
+  return (
       <div className="bg-white rounded-lg p-6">
-        <h2 className="text-xl font-bold mb-6">目标设置</h2>
-        
+      <h2 className="text-xl font-bold mb-6">目标设置</h2>
+
         <div className="mb-6">
           <DeviceSelection
             selectedDevices={selectedDevices}
@@ -606,48 +726,48 @@ export default function NewDistribution() {
           />
         </div>
 
-        <div className="mt-8 flex justify-between">
-          <Button variant="outline" onClick={onBack}>
-            ← 上一步
-          </Button>
+      <div className="mt-8 flex justify-between">
+        <Button variant="outline" onClick={onBack}>
+          ← 上一步
+        </Button>
           <Button onClick={handleSubmit} disabled={selectedDevices.length === 0}>
-            下一步 →
-          </Button>
-        </div>
+          下一步 →
+        </Button>
       </div>
-    );
+    </div>
+  );
   };
 
-  // 流量池选择步骤组件
+// 流量池选择步骤组件
   const TrafficPoolStep = ({ onSubmit, onBack, initialData = {} }: { onSubmit: (data: TrafficPoolData) => void; onBack: () => void; initialData?: Partial<TrafficPoolData> }) => {
-    const [selectedPools, setSelectedPools] = useState<string[]>(initialData.selectedPools || []);
-    const [isSubmitting, setIsSubmitting] = useState(false);
+  const [selectedPools, setSelectedPools] = useState<string[]>(initialData.selectedPools || []);
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
-    const handleSubmit = async () => {
-      setIsSubmitting(true);
+  const handleSubmit = async () => {
+    setIsSubmitting(true);
 
-      try {
+    try {
         await new Promise(resolve => setTimeout(resolve, 1000));
         onSubmit({ selectedPools });
-      } catch (error) {
-        console.error("提交失败:", error);
+    } catch (error) {
+      console.error("提交失败:", error);
         toast({
           title: "创建失败",
           description: "请稍后重试",
           variant: "destructive"
         });
-      } finally {
-        setIsSubmitting(false);
-      }
-    };
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
 
     // 从formData中获取选中的设备ID
     const deviceIds = formData.targetSettings?.selectedDevices || [];
 
-    return (
+  return (
       <div className="bg-white rounded-lg p-6">
-        <h2 className="text-xl font-bold mb-6">流量池选择</h2>
-        
+      <h2 className="text-xl font-bold mb-6">流量池选择</h2>
+
         <div className="mb-6">
           <TrafficPoolSelection
             selectedPools={selectedPools}
@@ -655,18 +775,18 @@ export default function NewDistribution() {
             deviceIds={deviceIds}
             placeholder="选择流量池"
           />
-        </div>
-
-        <div className="mt-8 flex justify-between">
-          <Button variant="outline" onClick={onBack}>
-            ← 上一步
-          </Button>
-          <Button onClick={handleSubmit} disabled={isSubmitting}>
-            {isSubmitting ? "提交中..." : "完成"}
-          </Button>
-        </div>
       </div>
-    );
+
+      <div className="mt-8 flex justify-between">
+        <Button variant="outline" onClick={onBack}>
+          ← 上一步
+        </Button>
+          <Button onClick={handleSubmit} disabled={isSubmitting}>
+            {isSubmitting ? (isEditMode ? "更新中..." : "提交中...") : (isEditMode ? "更新完成" : "完成")}
+        </Button>
+      </div>
+    </div>
+  );
   };
 
   const headerRightContent = (
@@ -684,22 +804,30 @@ export default function NewDistribution() {
     <Layout
       header={
         <PageHeader 
-          title="新建流量分发" 
+          title={isEditMode ? "编辑流量分发" : "新建流量分发"} 
           defaultBackPath="/workspace/traffic-distribution"
           rightContent={headerRightContent}
         />
       }
     >
       <div className="bg-gray-50 min-h-screen pb-16">
-        <div className="p-4">
-          <div className="mb-6">
-            <Steps current={currentStep}>
-              {steps.map((step, index) => (
-                <StepItem key={index} title={step.title} />
-              ))}
-            </Steps>
+        {loading ? (
+          <div className="flex items-center justify-center h-64">
+            <div className="text-center">
+              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-2"></div>
+              <div className="text-gray-500">加载中...</div>
+            </div>
           </div>
-          
+        ) : (
+          <div className="p-4">
+            <div className="mb-6">
+              <Steps current={currentStep}>
+                {steps.map((step, index) => (
+                  <StepItem key={index} title={step.title} />
+                ))}
+              </Steps>
+        </div>
+        
           {currentStep === 0 && (
             <BasicInfoStep 
               onNext={handleBasicInfoNext} 
@@ -707,22 +835,23 @@ export default function NewDistribution() {
             />
           )}
 
-          {currentStep === 1 && (
-            <TargetSettingsStep
-              onNext={handleTargetSettingsNext}
-              onBack={handleTargetSettingsBack}
-              initialData={formData.targetSettings}
-            />
-          )}
+        {currentStep === 1 && (
+          <TargetSettingsStep
+            onNext={handleTargetSettingsNext}
+            onBack={handleTargetSettingsBack}
+            initialData={formData.targetSettings}
+          />
+        )}
 
-          {currentStep === 2 && (
+        {currentStep === 2 && (
             <TrafficPoolStep 
               onSubmit={handleSubmit} 
               onBack={handleTrafficPoolBack} 
               initialData={formData.trafficPool} 
             />
           )}
-        </div>
+          </div>
+        )}
       </div>
     </Layout>
   );

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

@@ -10,7 +10,6 @@ import {
   Trash2,
   Pause,
   Play,
-  Users,
   Filter,
 } from 'lucide-react';
 import { Card } from '@/components/ui/card';
@@ -41,7 +40,7 @@ export default function TrafficDistribution() {
   const [tasks, setTasks] = useState<DistributionRule[]>([]);
 
   // 处理删除
-  const handleDelete = async (ruleId: string) => {
+  const handleDelete = async (ruleId: number) => {
     const ruleToDelete = tasks.find((rule) => rule.id === ruleId);
     if (!ruleToDelete) return;
 
@@ -49,7 +48,7 @@ export default function TrafficDistribution() {
 
     try {
       setIsLoading(true);
-      const response = await deleteDistributionRule(ruleId);
+      const response = await deleteDistributionRule(ruleId.toString());
       
       if (response.code === 200) {
         setTasks(tasks.filter((rule) => rule.id !== ruleId));
@@ -76,15 +75,15 @@ export default function TrafficDistribution() {
     }
   };
 
-  const handleEdit = (ruleId: string) => {
-    navigate(`/workspace/traffic-distribution/${ruleId}/edit`);
+  const handleEdit = (ruleId: number) => {
+    navigate(`/workspace/traffic-distribution/edit/${ruleId}`);
   };
 
-  const handleView = (ruleId: string) => {
+  const handleView = (ruleId: number) => {
     navigate(`/workspace/traffic-distribution/${ruleId}`);
   };
 
-  const toggleRuleStatus = async (ruleId: string) => {
+  const toggleRuleStatus = async (ruleId: number) => {
     const rule = tasks.find((r) => r.id === ruleId);
     if (!rule) return;
 
@@ -93,7 +92,7 @@ export default function TrafficDistribution() {
       // 根据当前状态决定新状态：1表示开启，0表示关闭
       const newStatus = rule.status === WorkbenchTaskStatus.RUNNING ? 0 : 1;
       
-      const response = await toggleDistributionRuleStatus(ruleId, newStatus as 0 | 1);
+      const response = await toggleDistributionRuleStatus(ruleId.toString(), newStatus as 0 | 1);
       
       if (response.code === 200) {
         // 更新本地状态：1对应RUNNING，0对应PAUSED
@@ -363,9 +362,9 @@ export default function TrafficDistribution() {
                     <div className="mt-4 text-sm text-gray-500 flex items-center justify-between">
                       <div className="flex items-center">
                         <Clock className="h-4 w-4 mr-1" />
-                        上次执行: {rule.lastDistributionTime?.substring(0, 16) || '2025-07-02 09:00'}
+                                                上次执行: {rule.config?.lastUpdated?.substring(0, 16) || '2025-07-02 09:00'}        
                       </div>
-                      <div>创建人: {rule.creator || '售前'}</div>
+                      <div>创建时间: {rule.createTime || '2025-07-02'}</div>
                     </div>
                   </div>
                 </Card>