Merge branch 'yongpxu-dev' into yongpxu-master

# Conflicts: # nkebao/src/pages/workspace/traffic-distribution/TrafficDistribution.tsx resolved by yongpxu-dev version
2025-07-09 20:48:55 +08:00
parent d04a593724 b785998c4d
commit a1383510e8
9 changed files with 1008 additions and 405 deletions
--- a/Cunkebao/app/workspace/traffic-distribution/new/components/basic-info-step.tsx
+++ b/Cunkebao/app/workspace/traffic-distribution/new/components/basic-info-step.tsx
@@ -8,13 +8,22 @@ import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
 import { Slider } from "@/components/ui/slider"
 import { format } from "date-fns"

+interface BasicInfoData {
+  name: string
+  distributionMethod: "equal" | "priority" | "ratio"
+  dailyLimit: number
+  timeRestriction: "allDay" | "custom"
+  startTime: string
+  endTime: string
+}
+
 interface BasicInfoStepProps {
-  onNext: (data: any) => void
-  initialData?: any
+  onNext: (data: BasicInfoData) => void
+  initialData?: Partial<BasicInfoData>
 }

 export default function BasicInfoStep({ onNext, initialData = {} }: BasicInfoStepProps) {
-  const [formData, setFormData] = useState({
+  const [formData, setFormData] = useState<BasicInfoData>({
    name: initialData.name || `流量分发 ${format(new Date(), "yyyyMMdd HHmm")}`,
    distributionMethod: initialData.distributionMethod || "equal",
    dailyLimit: initialData.dailyLimit || 50,
@@ -23,7 +32,7 @@ export default function BasicInfoStep({ onNext, initialData = {} }: BasicInfoSte
    endTime: initialData.endTime || "18:00",
  })

-  const handleChange = (field: string, value: any) => {
+  const handleChange = (field: keyof BasicInfoData, value: string | number) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
  }

@@ -45,7 +54,6 @@ export default function BasicInfoStep({ onNext, initialData = {} }: BasicInfoSte
            value={formData.name}
            onChange={(e) => handleChange("name", e.target.value)}
            placeholder="请输入计划名称"
-            required
          />
        </div>

@@ -53,7 +61,7 @@ export default function BasicInfoStep({ onNext, initialData = {} }: BasicInfoSte
          <Label>分配方式</Label>
          <RadioGroup
            value={formData.distributionMethod}
-            onValueChange={(value) => handleChange("distributionMethod", value)}
+            onValueChange={(value) => handleChange("distributionMethod", value as "equal" | "priority" | "ratio")}
            className="space-y-2"
          >
            <div className="flex items-center space-x-2">
@@ -100,7 +108,7 @@ export default function BasicInfoStep({ onNext, initialData = {} }: BasicInfoSte
            <Label>时间限制</Label>
            <RadioGroup
              value={formData.timeRestriction}
-              onValueChange={(value) => handleChange("timeRestriction", value)}
+              onValueChange={(value) => handleChange("timeRestriction", value as "allDay" | "custom")}
              className="space-y-4"
            >
              <div className="flex items-center space-x-2">
--- a/Cunkebao/app/workspace/traffic-distribution/new/components/step-indicator.tsx
+++ b/Cunkebao/app/workspace/traffic-distribution/new/components/step-indicator.tsx
@@ -4,33 +4,44 @@ import type React from "react"

 import { cn } from "@/lib/utils"

+interface Step {
+  id: number
+  title: string
+  icon: React.ReactNode
+}
+
 interface StepIndicatorProps {
  currentStep: number
-  steps: {
-    id: number
-    title: string
-    icon: React.ReactNode
-  }[]
+  steps: Step[]
 }

 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>
  )
 }
--- a/Cunkebao/app/workspace/traffic-distribution/new/components/target-settings-step.tsx
+++ b/Cunkebao/app/workspace/traffic-distribution/new/components/target-settings-step.tsx
@@ -23,10 +23,15 @@ interface CustomerService {
  avatar?: string
 }

+interface TargetSettingsData {
+  selectedDevices: string[]
+  selectedCustomerServices: string[]
+}
+
 interface TargetSettingsStepProps {
-  onNext: (data: any) => void
+  onNext: (data: TargetSettingsData) => void
  onBack: () => void
-  initialData?: any
+  initialData?: Partial<TargetSettingsData>
 }

 export default function TargetSettingsStep({ onNext, onBack, initialData = {} }: TargetSettingsStepProps) {
@@ -99,11 +104,12 @@ export default function TargetSettingsStep({ onNext, onBack, initialData = {} }:
        <TabsContent value="devices" className="space-y-4">
          <div className="grid grid-cols-1 gap-3">
            {filteredDevices.map((device) => (
-              <Card
+              <div 
                key={device.id}
-                className={`cursor-pointer border ${selectedDevices.includes(device.id) ? "border-blue-500" : "border-gray-200"}`}
+                className={`cursor-pointer border rounded-lg ${selectedDevices.includes(device.id) ? "border-blue-500" : "border-gray-200"}`}
+                onClick={() => toggleDevice(device.id)}
              >
-                <CardContent className="p-3 flex items-center justify-between">
+                <div className="p-3 flex items-center justify-between">
                  <div className="flex items-center space-x-3">
                    <Avatar>
                      <div
@@ -124,9 +130,10 @@ export default function TargetSettingsStep({ onNext, onBack, initialData = {} }:
                  <Checkbox
                    checked={selectedDevices.includes(device.id)}
                    onCheckedChange={() => toggleDevice(device.id)}
+                    onClick={(e) => e.stopPropagation()}
                  />
-                </CardContent>
-              </Card>
+                </div>
+              </div>
            ))}
          </div>
        </TabsContent>
@@ -134,11 +141,12 @@ export default function TargetSettingsStep({ onNext, onBack, initialData = {} }:
        <TabsContent value="customerService" className="space-y-4">
          <div className="grid grid-cols-1 gap-3">
            {filteredCustomerServices.map((cs) => (
-              <Card
+              <div
                key={cs.id}
-                className={`cursor-pointer border ${selectedCustomerServices.includes(cs.id) ? "border-blue-500" : "border-gray-200"}`}
+                className={`cursor-pointer border rounded-lg ${selectedCustomerServices.includes(cs.id) ? "border-blue-500" : "border-gray-200"}`}
+                onClick={() => toggleCustomerService(cs.id)}
              >
-                <CardContent className="p-3 flex items-center justify-between">
+                <div className="p-3 flex items-center justify-between">
                  <div className="flex items-center space-x-3">
                    <Avatar>
                      <div
@@ -159,9 +167,10 @@ export default function TargetSettingsStep({ onNext, onBack, initialData = {} }:
                  <Checkbox
                    checked={selectedCustomerServices.includes(cs.id)}
                    onCheckedChange={() => toggleCustomerService(cs.id)}
+                    onClick={(e) => e.stopPropagation()}
                  />
-                </CardContent>
-              </Card>
+                </div>
+              </div>
            ))}
          </div>
        </TabsContent>
--- a/Cunkebao/app/workspace/traffic-distribution/new/components/traffic-pool-step.tsx
+++ b/Cunkebao/app/workspace/traffic-distribution/new/components/traffic-pool-step.tsx
@@ -2,11 +2,9 @@

 import { useState } from "react"
 import { Button } from "@/components/ui/button"
-import { Card, CardContent } from "@/components/ui/card"
 import { Checkbox } from "@/components/ui/checkbox"
-import { Search } from "lucide-react"
+import { Search, Database } from "lucide-react"
 import { Input } from "@/components/ui/input"
-import { Database } from "lucide-react"

 interface TrafficPool {
  id: string
@@ -15,10 +13,14 @@ interface TrafficPool {
  description: string
 }

+interface TrafficPoolData {
+  selectedPools: string[]
+}
+
 interface TrafficPoolStepProps {
-  onSubmit: (data: any) => void
+  onSubmit: (data: TrafficPoolData) => void
  onBack: () => void
-  initialData?: any
+  initialData?: Partial<TrafficPoolData>
 }

 export default function TrafficPoolStep({ onSubmit, onBack, initialData = {} }: TrafficPoolStepProps) {
@@ -54,7 +56,6 @@ export default function TrafficPoolStep({ onSubmit, onBack, initialData = {} }:

      onSubmit({
        selectedPools,
-        // 可以添加其他需要提交的数据
      })
    } catch (error) {
      console.error("提交失败:", error)
@@ -81,12 +82,12 @@ export default function TrafficPoolStep({ onSubmit, onBack, initialData = {} }:

      <div className="space-y-3 mt-4">
        {filteredPools.map((pool) => (
-          <Card
+          <div 
            key={pool.id}
-            className={`cursor-pointer border ${selectedPools.includes(pool.id) ? "border-blue-500" : "border-gray-200"}`}
+            className={`cursor-pointer border rounded-lg ${selectedPools.includes(pool.id) ? "border-blue-500" : "border-gray-200"}`}
            onClick={() => togglePool(pool.id)}
          >
-            <CardContent className="p-4 flex items-center justify-between">
+            <div className="p-4 flex items-center justify-between">
              <div className="flex items-center space-x-3">
                <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
                  <Database className="h-5 w-5 text-blue-600" />
@@ -104,8 +105,8 @@ export default function TrafficPoolStep({ onSubmit, onBack, initialData = {} }:
                  onClick={(e) => e.stopPropagation()}
                />
              </div>
-            </CardContent>
-          </Card>
+            </div>
+          </div>
        ))}
      </div>

--- a/Cunkebao/app/workspace/traffic-distribution/new/page.tsx
+++ b/Cunkebao/app/workspace/traffic-distribution/new/page.tsx
@@ -10,28 +10,59 @@ import BasicInfoStep from "./components/basic-info-step"
 import TargetSettingsStep from "./components/target-settings-step"
 import TrafficPoolStep from "./components/traffic-pool-step"

+// 定义类型
+interface BasicInfoData {
+  name: string
+  distributionMethod: "equal" | "priority" | "ratio"
+  dailyLimit: number
+  timeRestriction: "allDay" | "custom"
+  startTime: string
+  endTime: string
+}
+
+interface TargetSettingsData {
+  selectedDevices: string[]
+  selectedCustomerServices: string[]
+}
+
+interface TrafficPoolData {
+  selectedPools: string[]
+}
+
+interface FormData {
+  basicInfo: Partial<BasicInfoData>
+  targetSettings: Partial<TargetSettingsData>
+  trafficPool: Partial<TrafficPoolData>
+}
+
+interface Step {
+  id: number
+  title: string
+  icon: React.ReactNode
+}
+
 export default function NewTrafficDistribution() {
  const router = useRouter()
  const { toast } = useToast()
  const [currentStep, setCurrentStep] = useState(0)
-  const [formData, setFormData] = useState({
+  const [formData, setFormData] = useState<FormData>({
    basicInfo: {},
    targetSettings: {},
    trafficPool: {},
  })

-  const steps = [
+  const steps: Step[] = [
    { id: 1, title: "基本信息", icon: <Plus className="h-6 w-6" /> },
    { id: 2, title: "目标设置", icon: <Users className="h-6 w-6" /> },
    { id: 3, title: "流量池选择", icon: <Database className="h-6 w-6" /> },
  ]

-  const handleBasicInfoNext = (data: any) => {
+  const handleBasicInfoNext = (data: BasicInfoData) => {
    setFormData((prev) => ({ ...prev, basicInfo: data }))
    setCurrentStep(1)
  }

-  const handleTargetSettingsNext = (data: any) => {
+  const handleTargetSettingsNext = (data: TargetSettingsData) => {
    setFormData((prev) => ({ ...prev, targetSettings: data }))
    setCurrentStep(2)
  }
@@ -44,7 +75,7 @@ export default function NewTrafficDistribution() {
    setCurrentStep(1)
  }

-  const handleSubmit = async (data: any) => {
+  const handleSubmit = async (data: TrafficPoolData) => {
    const finalData = {
      ...formData,
      trafficPool: data,