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

更新了旧项目的代码和样式
2025-07-11 11:40:24 +08:00
parent 8fd9269bef
commit dedf6be5a6
62 changed files with 9099 additions and 1416 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,22 +8,13 @@ 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: BasicInfoData) => void
-  initialData?: Partial<BasicInfoData>
+  onNext: (data: any) => void
+  initialData?: any
 }

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

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

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

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

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

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

 export default function StepIndicator({ currentStep, steps }: StepIndicatorProps) {
  return (
-    <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 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>
-        )
-      })}
+          <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,15 +23,10 @@ interface CustomerService {
  avatar?: string
 }

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

 export default function TargetSettingsStep({ onNext, onBack, initialData = {} }: TargetSettingsStepProps) {
@@ -104,12 +99,11 @@ 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) => (
-              <div 
+              <Card
                key={device.id}
-                className={`cursor-pointer border rounded-lg ${selectedDevices.includes(device.id) ? "border-blue-500" : "border-gray-200"}`}
-                onClick={() => toggleDevice(device.id)}
+                className={`cursor-pointer border ${selectedDevices.includes(device.id) ? "border-blue-500" : "border-gray-200"}`}
              >
-                <div 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">
                    <Avatar>
                      <div
@@ -130,10 +124,9 @@ export default function TargetSettingsStep({ onNext, onBack, initialData = {} }:
                  <Checkbox
                    checked={selectedDevices.includes(device.id)}
                    onCheckedChange={() => toggleDevice(device.id)}
-                    onClick={(e) => e.stopPropagation()}
                  />
-                </div>
-              </div>
+                </CardContent>
+              </Card>
            ))}
          </div>
        </TabsContent>
@@ -141,12 +134,11 @@ 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) => (
-              <div
+              <Card
                key={cs.id}
-                className={`cursor-pointer border rounded-lg ${selectedCustomerServices.includes(cs.id) ? "border-blue-500" : "border-gray-200"}`}
-                onClick={() => toggleCustomerService(cs.id)}
+                className={`cursor-pointer border ${selectedCustomerServices.includes(cs.id) ? "border-blue-500" : "border-gray-200"}`}
              >
-                <div 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">
                    <Avatar>
                      <div
@@ -167,10 +159,9 @@ export default function TargetSettingsStep({ onNext, onBack, initialData = {} }:
                  <Checkbox
                    checked={selectedCustomerServices.includes(cs.id)}
                    onCheckedChange={() => toggleCustomerService(cs.id)}
-                    onClick={(e) => e.stopPropagation()}
                  />
-                </div>
-              </div>
+                </CardContent>
+              </Card>
            ))}
          </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,9 +2,11 @@

 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, Database } from "lucide-react"
+import { Search } from "lucide-react"
 import { Input } from "@/components/ui/input"
+import { Database } from "lucide-react"

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

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

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

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

      <div className="space-y-3 mt-4">
        {filteredPools.map((pool) => (
-          <div 
+          <Card
            key={pool.id}
-            className={`cursor-pointer border rounded-lg ${selectedPools.includes(pool.id) ? "border-blue-500" : "border-gray-200"}`}
+            className={`cursor-pointer border ${selectedPools.includes(pool.id) ? "border-blue-500" : "border-gray-200"}`}
            onClick={() => togglePool(pool.id)}
          >
-            <div className="p-4 flex items-center justify-between">
+            <CardContent 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" />
@@ -105,8 +104,8 @@ export default function TrafficPoolStep({ onSubmit, onBack, initialData = {} }:
                  onClick={(e) => e.stopPropagation()}
                />
              </div>
-            </div>
-          </div>
+            </CardContent>
+          </Card>
        ))}
      </div>

--- a/Cunkebao/app/workspace/traffic-distribution/new/page.tsx
+++ b/Cunkebao/app/workspace/traffic-distribution/new/page.tsx
@@ -10,59 +10,28 @@ 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<FormData>({
+  const [formData, setFormData] = useState({
    basicInfo: {},
    targetSettings: {},
    trafficPool: {},
  })

-  const steps: Step[] = [
+  const steps = [
    { 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: BasicInfoData) => {
+  const handleBasicInfoNext = (data: any) => {
    setFormData((prev) => ({ ...prev, basicInfo: data }))
    setCurrentStep(1)
  }

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

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