存客宝 React

Cunkebao/app/workspace/pricing/new/page.tsx

@@ -0,0 +1,420 @@
+"use client"
+
+import { useState } from "react"
+import { useRouter } from "next/navigation"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { ChevronLeft, Users, Smartphone, Settings } from "lucide-react"
+import { Badge } from "@/components/ui/badge"
+import { Card } from "@/components/ui/card"
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+import { Switch } from "@/components/ui/switch"
+import { DeviceSelectionDialog } from "@/app/components/device-selection-dialog"
+import { TrafficPoolSelector } from "@/app/components/traffic-pool-selector"
+
+interface UserTag {
+  id: string
+  name: string
+  color: string
+}
+
+interface TrafficUser {
+  id: string
+  avatar: string
+  nickname: string
+  wechatId: string
+  phone: string
+  region: string
+  note: string
+  status: "pending" | "added" | "failed"
+  addTime: string
+  source: string
+  assignedTo: string
+  category: "potential" | "customer" | "lost"
+  tags: UserTag[]
+}
+
+type DeviceSelectionType = "all" | "new" | "specific"
+
+export default function RuleSettingsPage() {
+  const router = useRouter()
+  const [currentStep, setCurrentStep] = useState(1)
+  const [name, setName] = useState("")
+
+  // 流量池相关状态
+  const [selectedUsers, setSelectedUsers] = useState<TrafficUser[]>([])
+  const [trafficPoolDialogOpen, setTrafficPoolDialogOpen] = useState(false)
+
+  // 设备选择相关状态
+  const [deviceSelectionType, setDeviceSelectionType] = useState<DeviceSelectionType>("all")
+  const [selectedDevices, setSelectedDevices] = useState<string[]>([])
+  const [deviceDialogOpen, setDeviceDialogOpen] = useState(false)
+
+  // 规则设定相关状态
+  const [priority, setPriority] = useState("high")
+  const [createAsPackage, setCreateAsPackage] = useState(false)
+  const [price, setPrice] = useState("")
+  const [autoDistribute, setAutoDistribute] = useState(true)
+
+  const handleDeviceSelect = (deviceIds: string[]) => {
+    setSelectedDevices(deviceIds)
+  }
+
+  const handleUserSelect = (users: TrafficUser[]) => {
+    setSelectedUsers(users)
+  }
+
+  const handleNext = () => {
+    if (currentStep === 1) {
+      if (name.trim() && selectedUsers.length > 0) {
+        setCurrentStep(2)
+      } else {
+        alert("请填写任务名称并选择流量池")
+      }
+    } else if (currentStep === 2) {
+      if (deviceSelectionType === "specific" && selectedDevices.length === 0) {
+        alert("请选择至少一个设备")
+      } else {
+        setCurrentStep(3)
+      }
+    }
+  }
+
+  const handlePrevious = () => {
+    if (currentStep === 2) {
+      setCurrentStep(1)
+    } else if (currentStep === 3) {
+      setCurrentStep(2)
+    }
+  }
+
+  const handleSubmit = () => {
+    // 在实际应用中，这里会发送API请求保存数据
+    console.log({
+      name,
+      selectedUsers: selectedUsers.map((user) => user.id),
+      deviceSelectionType,
+      selectedDevices: deviceSelectionType === "specific" ? selectedDevices : [],
+      priority,
+      createAsPackage,
+      price: createAsPackage ? Number.parseFloat(price) : undefined,
+      autoDistribute,
+    })
+
+    // 返回到列表页
+    router.push("/workspace/pricing")
+  }
+
+  return (
+    <div className="flex flex-col min-h-screen bg-gray-50">
+      {/* 顶部栏 */}
+      <header className="bg-white border-b border-gray-200 sticky top-0 z-10">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
+          <Button variant="ghost" size="icon" onClick={() => router.push("/workspace/pricing")} className="mr-2">
+            <ChevronLeft className="h-5 w-5" />
+          </Button>
+          <h1 className="text-lg font-medium">规则设置</h1>
+          <div className="w-10"></div> {/* 占位，保持标题居中 */}
+        </div>
+      </header>
+
+      {/* 进度条 */}
+      <div className="bg-white border-b border-gray-200">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+          <div className="flex items-center">
+            <div className="flex-1">
+              <div className="flex items-center">
+                <div
+                  className={`rounded-full h-10 w-10 flex items-center justify-center ${
+                    currentStep >= 1 ? "bg-blue-600 text-white" : "bg-gray-200 text-gray-600"
+                  }`}
+                >
+                  <Users className="h-5 w-5" />
+                </div>
+                <div className={`h-1 flex-1 mx-2 ${currentStep >= 2 ? "bg-blue-600" : "bg-gray-200"}`}></div>
+                <div
+                  className={`rounded-full h-10 w-10 flex items-center justify-center ${
+                    currentStep >= 2 ? "bg-blue-600 text-white" : "bg-gray-200 text-gray-600"
+                  }`}
+                >
+                  <Smartphone className="h-5 w-5" />
+                </div>
+                <div className={`h-1 flex-1 mx-2 ${currentStep >= 3 ? "bg-blue-600" : "bg-gray-200"}`}></div>
+                <div
+                  className={`rounded-full h-10 w-10 flex items-center justify-center ${
+                    currentStep >= 3 ? "bg-blue-600 text-white" : "bg-gray-200 text-gray-600"
+                  }`}
+                >
+                  <Settings className="h-5 w-5" />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="flex mt-2">
+            <div className="flex-1 text-center text-sm font-medium">选择流量池</div>
+            <div className="flex-1 text-center text-sm font-medium">选择设备</div>
+            <div className="flex-1 text-center text-sm font-medium">规则设定</div>
+          </div>
+        </div>
+      </div>
+
+      {/* 主内容区 */}
+      <main className="flex-1 max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+        {currentStep === 1 ? (
+          <div className="space-y-6">
+            <div className="space-y-2">
+              <Label htmlFor="name">任务名称</Label>
+              <Input
+                id="name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder="请输入任务名称"
+                required
+              />
+            </div>
+
+            <div className="space-y-4">
+              <div className="flex items-center justify-between">
+                <h2 className="text-lg font-medium">选择流量池</h2>
+                <Button variant="outline" onClick={() => setTrafficPoolDialogOpen(true)}>
+                  {selectedUsers.length > 0 ? "修改选择" : "选择流量池"}
+                </Button>
+              </div>
+
+              {selectedUsers.length > 0 ? (
+                <Card className="p-4">
+                  <div className="flex items-center justify-between mb-2">
+                    <h3 className="font-medium">已选择的流量池</h3>
+                    <Badge>{selectedUsers.length} 个用户</Badge>
+                  </div>
+
+                  <div className="space-y-2">
+                    {/* 显示选中用户的标签统计 */}
+                    <div className="flex flex-wrap gap-2">
+                      {Array.from(
+                        new Set(selectedUsers.flatMap((user) => user.tags.map((tag) => JSON.stringify(tag)))),
+                      ).map((tagJson) => {
+                        const tag = JSON.parse(tagJson) as UserTag
+                        const count = selectedUsers.filter((user) => user.tags.some((t) => t.id === tag.id)).length
+
+                        return (
+                          <Badge key={tag.id} className={tag.color}>
+                            {tag.name} ({count})
+                          </Badge>
+                        )
+                      })}
+                    </div>
+
+                    {/* 显示选中用户的来源统计 */}
+                    <div className="mt-3">
+                      <div className="text-sm font-medium mb-1">来源分布</div>
+                      <div className="flex flex-wrap gap-2">
+                        {Array.from(new Set(selectedUsers.map((user) => user.source))).map((source) => {
+                          const count = selectedUsers.filter((user) => user.source === source).length
+
+                          return (
+                            <Badge key={source} variant="outline">
+                              {source} ({count})
+                            </Badge>
+                          )
+                        })}
+                      </div>
+                    </div>
+                  </div>
+                </Card>
+              ) : (
+                <Card className="p-8 flex flex-col items-center justify-center text-center text-gray-500">
+                  <Users className="h-12 w-12 mb-4 text-gray-400" />
+                  <p>请选择流量池用户</p>
+                  <p className="text-sm mt-1">您可以从流量池中选择特定标签的用户</p>
+                </Card>
+              )}
+
+              <TrafficPoolSelector
+                open={trafficPoolDialogOpen}
+                onOpenChange={setTrafficPoolDialogOpen}
+                selectedUsers={selectedUsers}
+                onSelect={handleUserSelect}
+              />
+            </div>
+
+            <div className="flex justify-end pt-4">
+              <Button type="button" onClick={handleNext} disabled={name.trim() === "" || selectedUsers.length === 0}>
+                下一步
+              </Button>
+            </div>
+          </div>
+        ) : currentStep === 2 ? (
+          <div className="space-y-6">
+            <div className="space-y-4">
+              <h2 className="text-lg font-medium">设备选择</h2>
+
+              <RadioGroup
+                value={deviceSelectionType}
+                onValueChange={(value) => setDeviceSelectionType(value as DeviceSelectionType)}
+                className="space-y-4"
+              >
+                <div className="flex items-center space-x-2">
+                  <RadioGroupItem value="all" id="all-devices" />
+                  <Label htmlFor="all-devices" className="cursor-pointer">
+                    所有设备
+                  </Label>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <RadioGroupItem value="new" id="new-devices" />
+                  <Label htmlFor="new-devices" className="cursor-pointer">
+                    新添加设备
+                  </Label>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <RadioGroupItem value="specific" id="specific-devices" />
+                  <Label htmlFor="specific-devices" className="cursor-pointer">
+                    指定设备
+                  </Label>
+                </div>
+              </RadioGroup>
+
+              {deviceSelectionType === "specific" && (
+                <div className="mt-4">
+                  <Button variant="outline" onClick={() => setDeviceDialogOpen(true)} className="w-full">
+                    {selectedDevices.length > 0 ? `已选择 ${selectedDevices.length} 个设备` : "选择设备"}
+                  </Button>
+
+                  {selectedDevices.length > 0 && (
+                    <Card className="mt-4 p-4">
+                      <div className="flex items-center justify-between mb-2">
+                        <h3 className="font-medium">已选择的设备</h3>
+                        <Badge>{selectedDevices.length} 个设备</Badge>
+                      </div>
+                      <p className="text-sm text-gray-500">
+                        您已选择 {selectedDevices.length} 个设备用于流量分发。 点击上方按钮可以修改选择。
+                      </p>
+                    </Card>
+                  )}
+
+                  <DeviceSelectionDialog
+                    open={deviceDialogOpen}
+                    onOpenChange={setDeviceDialogOpen}
+                    selectedDevices={selectedDevices}
+                    onSelect={handleDeviceSelect}
+                  />
+                </div>
+              )}
+
+              {deviceSelectionType === "all" && (
+                <Card className="p-4 bg-blue-50 border-blue-200">
+                  <p className="text-sm text-blue-700">
+                    您选择了使用所有可用设备进行流量分发。系统将自动分配流量到所有在线设备。
+                  </p>
+                </Card>
+              )}
+
+              {deviceSelectionType === "new" && (
+                <Card className="p-4 bg-green-50 border-green-200">
+                  <p className="text-sm text-green-700">
+                    您选择了使用新添加的设备进行流量分发。系统将自动将流量分配到新接入的设备。
+                  </p>
+                </Card>
+              )}
+            </div>
+
+            {/* 按钮组 */}
+            <div className="flex justify-between pt-4">
+              <Button type="button" variant="outline" onClick={handlePrevious}>
+                上一步
+              </Button>
+              <Button
+                type="button"
+                onClick={handleNext}
+                disabled={deviceSelectionType === "specific" && selectedDevices.length === 0}
+              >
+                下一步
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <div className="space-y-6">
+            <div>
+              <h2 className="text-lg font-medium mb-4">规则设定</h2>
+
+              {/* 优先级选择 */}
+              <div className="space-y-4 mb-6">
+                <h3 className="font-medium">优先级</h3>
+                <RadioGroup value={priority} onValueChange={setPriority} className="space-y-2">
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem value="high" id="high-priority" />
+                    <Label htmlFor="high-priority" className="cursor-pointer">
+                      高优先
+                    </Label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem value="low" id="low-priority" />
+                    <Label htmlFor="low-priority" className="cursor-pointer">
+                      低优先
+                    </Label>
+                  </div>
+                </RadioGroup>
+
+                <Card className="p-3 bg-gray-50 border-gray-200">
+                  <p className="text-sm text-gray-600">
+                    高优先级规则将优先于低优先级规则执行。当多个规则匹配同一流量时，系统将按优先级顺序分配。
+                  </p>
+                </Card>
+              </div>
+
+              {/* 自动分发设置 */}
+              <div className="space-y-2 mb-6">
+                <div className="flex items-center justify-between">
+                  <Label htmlFor="auto-distribute">自动分发</Label>
+                  <Switch id="auto-distribute" checked={autoDistribute} onCheckedChange={setAutoDistribute} />
+                </div>
+                <p className="text-sm text-gray-500">开启后，系统将自动按照规则分发流量。关闭后，需要手动触发分发。</p>
+              </div>
+
+              {/* 创建为流量包 */}
+              <div className="space-y-4 mb-6">
+                <div className="flex items-center justify-between">
+                  <Label htmlFor="create-package">创建为流量包</Label>
+                  <Switch id="create-package" checked={createAsPackage} onCheckedChange={setCreateAsPackage} />
+                </div>
+                <p className="text-sm text-gray-500">开启后，将创建为可售卖的流量包，可设置价格。</p>
+
+                {createAsPackage && (
+                  <div className="space-y-2 mt-4">
+                    <Label htmlFor="price">价格（元/流量包）</Label>
+                    <div className="relative">
+                      <span className="absolute left-3 top-1/2 transform -translate-y-1/2">¥</span>
+                      <Input
+                        id="price"
+                        type="number"
+                        step="0.01"
+                        min="0"
+                        value={price}
+                        onChange={(e) => setPrice(e.target.value)}
+                        placeholder="0.00"
+                        className="pl-8"
+                        required
+                      />
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* 按钮组 */}
+            <div className="flex justify-between pt-4">
+              <Button type="button" variant="outline" onClick={handlePrevious}>
+                上一步
+              </Button>
+              <Button type="button" onClick={handleSubmit} disabled={createAsPackage && !price}>
+                确认
+              </Button>
+            </div>
+          </div>
+        )}
+      </main>
+    </div>
+  )
+}
+