plan pages

Cunkebao/app/scenarios/phone/new/basic/page.tsx

@@ -0,0 +1,334 @@
+"use client"
+
+import { useState } from "react"
+import { useRouter } from "next/navigation"
+import { ChevronLeft, Phone, Settings } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Card } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Switch } from "@/components/ui/switch"
+import { toast } from "@/components/ui/use-toast"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogDescription,
+} from "@/components/ui/dialog"
+
+// 电话通话标签
+const phoneCallTags = [
+  { id: "tag-1", name: "咨询", color: "bg-blue-100 text-blue-800" },
+  { id: "tag-2", name: "投诉", color: "bg-red-100 text-red-800" },
+  { id: "tag-3", name: "合作", color: "bg-green-100 text-green-800" },
+  { id: "tag-4", name: "价格", color: "bg-orange-100 text-orange-800" },
+  { id: "tag-5", name: "售后", color: "bg-purple-100 text-purple-800" },
+  { id: "tag-6", name: "订单", color: "bg-yellow-100 text-yellow-800" },
+  { id: "tag-7", name: "物流", color: "bg-teal-100 text-teal-800" },
+  { id: "tag-8", name: "退款", color: "bg-pink-100 text-pink-800" },
+  { id: "tag-9", name: "技术支持", color: "bg-indigo-100 text-indigo-800" },
+  { id: "tag-10", name: "其他", color: "bg-gray-100 text-gray-800" },
+]
+
+export default function PhoneAcquisitionBasicPage() {
+  const router = useRouter()
+  const [planName, setPlanName] = useState(`电话获客${new Date().toLocaleDateString("zh-CN").replace(/\//g, "")}`)
+  const [enabled, setEnabled] = useState(true)
+  const [selectedTags, setSelectedTags] = useState<string[]>([])
+  const [phoneCallType, setPhoneCallType] = useState("both")
+  const [isPhoneSettingsOpen, setIsPhoneSettingsOpen] = useState(false)
+
+  // 电话获客设置
+  const [phoneSettings, setPhoneSettings] = useState({
+    autoAdd: true,
+    speechToText: true,
+    questionExtraction: true,
+  })
+
+  // 处理标签选择
+  const handleTagToggle = (tagId: string) => {
+    setSelectedTags((prev) => (prev.includes(tagId) ? prev.filter((id) => id !== tagId) : [...prev, tagId]))
+  }
+
+  // 处理通话类型选择
+  const handleCallTypeToggle = (type: string) => {
+    if (phoneCallType === "both") {
+      setPhoneCallType(type === "outbound" ? "inbound" : "outbound")
+    } else if (phoneCallType === type) {
+      setPhoneCallType("both")
+    } else {
+      setPhoneCallType("both")
+    }
+  }
+
+  // 处理电话获客设置更新
+  const handlePhoneSettingsUpdate = () => {
+    setIsPhoneSettingsOpen(false)
+    toast({
+      title: "设置已更新",
+      description: "电话获客设置已保存",
+    })
+  }
+
+  // 处理下一步
+  const handleNext = () => {
+    if (!planName.trim()) {
+      toast({
+        title: "请输入计划名称",
+        variant: "destructive",
+      })
+      return
+    }
+
+    if (selectedTags.length === 0) {
+      toast({
+        title: "请至少选择一个通话标签",
+        variant: "destructive",
+      })
+      return
+    }
+
+    // 保存数据并跳转到下一步
+    const formData = {
+      scenario: "phone",
+      planName,
+      enabled,
+      phoneSettings,
+      phoneCallType,
+      phoneTags: selectedTags,
+    }
+
+    // 这里应该保存到状态管理或通过路由传递
+    // router.push("/plans/new?step=2&scenario=phone")
+    router.push("/scenarios/phone/new/account")
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <div className="max-w-[390px] mx-auto bg-white min-h-screen flex flex-col">
+        <header className="sticky top-0 z-10 bg-white border-b">
+          <div className="flex items-center justify-between h-14 px-4">
+            <div className="flex items-center">
+              <Button variant="ghost" size="icon" onClick={() => router.back()}>
+                <ChevronLeft className="h-5 w-5" />
+              </Button>
+              <h1 className="ml-2 text-lg font-medium">电话获客设置</h1>
+            </div>
+            <div className="flex items-center gap-2">
+              <Phone className="h-5 w-5 text-blue-600" />
+              <span className="text-sm text-blue-600 font-medium">电话场景</span>
+            </div>
+          </div>
+        </header>
+
+        <div className="flex-1 p-4 pb-20">
+          <Card className="p-6">
+            <div className="space-y-6">
+              {/* 计划名称 */}
+              <div>
+                <Label htmlFor="planName">计划名称</Label>
+                <Input
+                  id="planName"
+                  value={planName}
+                  onChange={(e) => setPlanName(e.target.value)}
+                  placeholder="请输入计划名称"
+                  className="mt-2"
+                />
+              </div>
+
+              {/* 电话获客设置卡片 */}
+              <Card className="p-4 border-blue-100 bg-blue-50/50">
+                <div className="flex items-center justify-between mb-3">
+                  <Label className="text-base font-medium text-blue-700">电话获客设置</Label>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setIsPhoneSettingsOpen(true)}
+                    className="flex items-center gap-1 bg-white border-blue-200 text-blue-700 hover:bg-blue-100"
+                  >
+                    <Settings className="h-3.5 w-3.5" />
+                    修改设置
+                  </Button>
+                </div>
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+                  <div className="flex items-center justify-between bg-white p-3 rounded-lg border border-blue-100 shadow-sm">
+                    <div className="flex items-center">
+                      <div
+                        className={`w-3 h-3 rounded-full mr-2 ${phoneSettings.autoAdd ? "bg-green-500" : "bg-gray-300"}`}
+                      ></div>
+                      <span>自动添加客户</span>
+                    </div>
+                    <div
+                      className={`px-2 py-0.5 rounded-full text-xs ${phoneSettings.autoAdd ? "bg-green-100 text-green-700" : "bg-gray-100 text-gray-700"}`}
+                    >
+                      {phoneSettings.autoAdd ? "已开启" : "已关闭"}
+                    </div>
+                  </div>
+                  <div className="flex items-center justify-between bg-white p-3 rounded-lg border border-blue-100 shadow-sm">
+                    <div className="flex items-center">
+                      <div
+                        className={`w-3 h-3 rounded-full mr-2 ${phoneSettings.speechToText ? "bg-green-500" : "bg-gray-300"}`}
+                      ></div>
+                      <span>语音转文字</span>
+                    </div>
+                    <div
+                      className={`px-2 py-0.5 rounded-full text-xs ${phoneSettings.speechToText ? "bg-green-100 text-green-700" : "bg-gray-100 text-gray-700"}`}
+                    >
+                      {phoneSettings.speechToText ? "已开启" : "已关闭"}
+                    </div>
+                  </div>
+                  <div className="flex items-center justify-between bg-white p-3 rounded-lg border border-blue-100 shadow-sm">
+                    <div className="flex items-center">
+                      <div
+                        className={`w-3 h-3 rounded-full mr-2 ${phoneSettings.questionExtraction ? "bg-green-500" : "bg-gray-300"}`}
+                      ></div>
+                      <span>问题提取</span>
+                    </div>
+                    <div
+                      className={`px-2 py-0.5 rounded-full text-xs ${phoneSettings.questionExtraction ? "bg-green-100 text-green-700" : "bg-gray-100 text-gray-700"}`}
+                    >
+                      {phoneSettings.questionExtraction ? "已开启" : "已关闭"}
+                    </div>
+                  </div>
+                </div>
+                <p className="text-xs text-blue-600 mt-2">
+                  提示：电话获客功能将自动记录来电信息，并根据设置执行相应操作
+                </p>
+              </Card>
+
+              {/* 通话类型选择 */}
+              <div>
+                <Label className="text-base mb-2 block">通话类型</Label>
+                <div className="grid grid-cols-2 gap-2 mt-2">
+                  <div
+                    className={`p-3 border rounded-lg text-center cursor-pointer ${
+                      phoneCallType === "outbound" || phoneCallType === "both"
+                        ? "bg-blue-50 border-blue-300"
+                        : "bg-white hover:bg-gray-50"
+                    }`}
+                    onClick={() => handleCallTypeToggle("outbound")}
+                  >
+                    <div className="font-medium">发起外呼</div>
+                    <div className="text-sm text-gray-500">主动向客户发起电话</div>
+                  </div>
+                  <div
+                    className={`p-3 border rounded-lg text-center cursor-pointer ${
+                      phoneCallType === "inbound" || phoneCallType === "both"
+                        ? "bg-blue-50 border-blue-300"
+                        : "bg-white hover:bg-gray-50"
+                    }`}
+                    onClick={() => handleCallTypeToggle("inbound")}
+                  >
+                    <div className="font-medium">接收来电</div>
+                    <div className="text-sm text-gray-500">接听客户的来电</div>
+                  </div>
+                </div>
+              </div>
+
+              {/* 通话标签 */}
+              <div>
+                <Label className="text-base mb-2 block">通话标签（可多选）</Label>
+                <div className="flex flex-wrap gap-2 mt-2">
+                  {phoneCallTags.map((tag) => (
+                    <div
+                      key={tag.id}
+                      className={`px-3 py-1.5 rounded-full text-sm cursor-pointer transition-all ${
+                        selectedTags.includes(tag.id) ? tag.color : "bg-gray-100 text-gray-800 hover:bg-gray-200"
+                      }`}
+                      onClick={() => handleTagToggle(tag.id)}
+                    >
+                      {tag.name}
+                    </div>
+                  ))}
+                </div>
+                {selectedTags.length > 0 && (
+                  <p className="text-xs text-gray-500 mt-2">已选择 {selectedTags.length} 个标签</p>
+                )}
+              </div>
+
+              {/* 是否启用 */}
+              <div className="flex items-center justify-between">
+                <Label htmlFor="enabled">是否启用</Label>
+                <Switch id="enabled" checked={enabled} onCheckedChange={setEnabled} />
+              </div>
+
+              {/* 下一步按钮 */}
+              <Button className="w-full h-12 text-base" onClick={handleNext}>
+                下一步
+              </Button>
+            </div>
+          </Card>
+        </div>
+
+        {/* 电话获客设置对话框 */}
+        <Dialog open={isPhoneSettingsOpen} onOpenChange={setIsPhoneSettingsOpen}>
+          <DialogContent className="sm:max-w-md">
+            <DialogHeader>
+              <DialogTitle>电话获客设置</DialogTitle>
+              <DialogDescription>配置电话获客的自动化功能，提高获客效率</DialogDescription>
+            </DialogHeader>
+            <div className="py-4 space-y-6">
+              <div className="flex items-center justify-between p-3 rounded-lg bg-gray-50 hover:bg-gray-100 transition-colors">
+                <div className="space-y-1">
+                  <Label htmlFor="auto-add" className="font-medium">
+                    自动添加客户
+                  </Label>
+                  <p className="text-sm text-gray-500">来电后自动将客户添加为微信好友</p>
+                  <p className="text-xs text-blue-600">推荐：开启此功能可提高转化率约30%</p>
+                </div>
+                <Switch
+                  id="auto-add"
+                  checked={phoneSettings.autoAdd}
+                  onCheckedChange={(checked) => setPhoneSettings({ ...phoneSettings, autoAdd: checked })}
+                  className="data-[state=checked]:bg-blue-600"
+                />
+              </div>
+
+              <div className="flex items-center justify-between p-3 rounded-lg bg-gray-50 hover:bg-gray-100 transition-colors">
+                <div className="space-y-1">
+                  <Label htmlFor="speech-to-text" className="font-medium">
+                    语音转文字
+                  </Label>
+                  <p className="text-sm text-gray-500">自动将通话内容转换为文字记录</p>
+                  <p className="text-xs text-blue-600">支持普通话、粤语等多种方言识别</p>
+                </div>
+                <Switch
+                  id="speech-to-text"
+                  checked={phoneSettings.speechToText}
+                  onCheckedChange={(checked) => setPhoneSettings({ ...phoneSettings, speechToText: checked })}
+                  className="data-[state=checked]:bg-blue-600"
+                />
+              </div>
+
+              <div className="flex items-center justify-between p-3 rounded-lg bg-gray-50 hover:bg-gray-100 transition-colors">
+                <div className="space-y-1">
+                  <Label htmlFor="question-extraction" className="font-medium">
+                    问题提取
+                  </Label>
+                  <p className="text-sm text-gray-500">自动从通话中提取客户的首句问题</p>
+                  <p className="text-xs text-blue-600">AI智能识别客户意图，提高回复精准度</p>
+                </div>
+                <Switch
+                  id="question-extraction"
+                  checked={phoneSettings.questionExtraction}
+                  onCheckedChange={(checked) => setPhoneSettings({ ...phoneSettings, questionExtraction: checked })}
+                  className="data-[state=checked]:bg-blue-600"
+                />
+              </div>
+            </div>
+            <DialogFooter className="flex space-x-2 pt-2">
+              <Button variant="outline" onClick={() => setIsPhoneSettingsOpen(false)} className="flex-1">
+                取消
+              </Button>
+              <Button onClick={handlePhoneSettingsUpdate} className="flex-1 bg-blue-600 hover:bg-blue-700">
+                保存设置
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </div>
+    </div>
+  )
+}

Cunkebao/app/scenarios/phone/new/components/AIFilterSettings.tsx

@@ -0,0 +1,76 @@
+"use client"
+
+import { Switch } from "@/components/ui/switch"
+import { Label } from "@/components/ui/label"
+
+interface AIFilterSettingsProps {
+  settings: {
+    enabled: boolean
+    removeBlacklist: boolean
+    validateFormat: boolean
+    removeDuplicates: boolean
+  }
+  onChange: (settings: any) => void
+}
+
+export function AIFilterSettings({ settings, onChange }: AIFilterSettingsProps) {
+  const handleToggle = (key: string, value: boolean) => {
+    onChange({
+      ...settings,
+      [key]: value,
+    })
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <div>
+          <Label htmlFor="ai-filter">启用AI智能过滤</Label>
+          <p className="text-xs text-gray-500">自动过滤无效号码</p>
+        </div>
+        <Switch
+          id="ai-filter"
+          checked={settings.enabled}
+          onCheckedChange={(checked) => handleToggle("enabled", checked)}
+        />
+      </div>
+
+      {settings.enabled && (
+        <div className="space-y-3 pl-4 border-l-2">
+          <div className="flex items-center justify-between">
+            <Label htmlFor="remove-blacklist" className="text-sm">
+              过滤黑名单
+            </Label>
+            <Switch
+              id="remove-blacklist"
+              checked={settings.removeBlacklist}
+              onCheckedChange={(checked) => handleToggle("removeBlacklist", checked)}
+            />
+          </div>
+
+          <div className="flex items-center justify-between">
+            <Label htmlFor="validate-format" className="text-sm">
+              校验号码格式
+            </Label>
+            <Switch
+              id="validate-format"
+              checked={settings.validateFormat}
+              onCheckedChange={(checked) => handleToggle("validateFormat", checked)}
+            />
+          </div>
+
+          <div className="flex items-center justify-between">
+            <Label htmlFor="remove-duplicates" className="text-sm">
+              去除重复号码
+            </Label>
+            <Switch
+              id="remove-duplicates"
+              checked={settings.removeDuplicates}
+              onCheckedChange={(checked) => handleToggle("removeDuplicates", checked)}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

Cunkebao/app/scenarios/phone/new/components/DeviceConfigDialog.tsx

@@ -0,0 +1,137 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Smartphone, Wifi, WifiOff } from "lucide-react"
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import { ScrollArea } from "@/components/ui/scroll-area"
+
+interface Device {
+  id: string
+  name: string
+  imei: string
+  status: "online" | "offline"
+  wechatAccount?: string
+}
+
+interface DeviceConfigDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  selectedDevices: string[]
+  onSelect: (devices: string[]) => void
+}
+
+export function DeviceConfigDialog({ open, onOpenChange, selectedDevices, onSelect }: DeviceConfigDialogProps) {
+  const [devices, setDevices] = useState<Device[]>([])
+  const [selected, setSelected] = useState<string[]>(selectedDevices)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    if (open) {
+      loadDevices()
+    }
+  }, [open])
+
+  const loadDevices = async () => {
+    setLoading(true)
+    try {
+      // 模拟加载设备列表
+      await new Promise((resolve) => setTimeout(resolve, 500))
+      setDevices([
+        {
+          id: "1",
+          name: "设备1",
+          imei: "sd123123",
+          status: "online",
+          wechatAccount: "wxid_abc123",
+        },
+        {
+          id: "2",
+          name: "设备2",
+          imei: "sd123124",
+          status: "online",
+          wechatAccount: "wxid_xyz789",
+        },
+        {
+          id: "3",
+          name: "设备3",
+          imei: "sd123125",
+          status: "offline",
+          wechatAccount: "wxid_def456",
+        },
+      ])
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleToggle = (deviceId: string) => {
+    setSelected((prev) => (prev.includes(deviceId) ? prev.filter((id) => id !== deviceId) : [...prev, deviceId]))
+  }
+
+  const handleConfirm = () => {
+    onSelect(selected)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>选择执行设备</DialogTitle>
+          <DialogDescription>选择用于执行电话获客任务的设备</DialogDescription>
+        </DialogHeader>
+
+        {loading ? (
+          <div className="py-8 text-center text-gray-500">加载设备列表中...</div>
+        ) : (
+          <>
+            <ScrollArea className="h-[300px] pr-4">
+              <div className="space-y-2">
+                {devices.map((device) => (
+                  <div
+                    key={device.id}
+                    className={`p-3 border rounded-lg ${device.status === "offline" ? "opacity-50" : ""}`}
+                  >
+                    <div className="flex items-start space-x-3">
+                      <Checkbox
+                        checked={selected.includes(device.id)}
+                        onCheckedChange={() => handleToggle(device.id)}
+                        disabled={device.status === "offline"}
+                      />
+                      <div className="flex-1">
+                        <div className="flex items-center justify-between">
+                          <div className="flex items-center gap-2">
+                            <Smartphone className="h-4 w-4" />
+                            <span className="font-medium">{device.name}</span>
+                          </div>
+                          {device.status === "online" ? (
+                            <Wifi className="h-4 w-4 text-green-500" />
+                          ) : (
+                            <WifiOff className="h-4 w-4 text-gray-400" />
+                          )}
+                        </div>
+                        <p className="text-xs text-gray-500 mt-1">IMEI: {device.imei}</p>
+                        {device.wechatAccount && <p className="text-xs text-gray-500">微信: {device.wechatAccount}</p>}
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </ScrollArea>
+
+            <div className="flex justify-between items-center pt-4">
+              <p className="text-sm text-gray-500">已选择 {selected.length} 个设备</p>
+              <div className="space-x-2">
+                <Button variant="outline" onClick={() => onOpenChange(false)}>
+                  取消
+                </Button>
+                <Button onClick={handleConfirm}>确认</Button>
+              </div>
+            </div>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+}

Cunkebao/app/scenarios/phone/new/components/DistributionSettings.tsx

@@ -0,0 +1,92 @@
+"use client"
+
+import { Switch } from "@/components/ui/switch"
+import { Label } from "@/components/ui/label"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import { Plus, Trash2 } from "lucide-react"
+
+interface DistributionSettingsProps {
+  settings: {
+    enabled: boolean
+    rules: Array<{
+      level: number
+      percentage: number
+    }>
+  }
+  onChange: (settings: any) => void
+}
+
+export function DistributionSettings({ settings, onChange }: DistributionSettingsProps) {
+  const handleToggle = (value: boolean) => {
+    onChange({
+      ...settings,
+      enabled: value,
+    })
+  }
+
+  const addRule = () => {
+    onChange({
+      ...settings,
+      rules: [...settings.rules, { level: settings.rules.length + 1, percentage: 10 }],
+    })
+  }
+
+  const removeRule = (index: number) => {
+    onChange({
+      ...settings,
+      rules: settings.rules.filter((_, i) => i !== index),
+    })
+  }
+
+  const updateRule = (index: number, percentage: number) => {
+    const newRules = [...settings.rules]
+    newRules[index].percentage = percentage
+    onChange({
+      ...settings,
+      rules: newRules,
+    })
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <div>
+          <Label htmlFor="distribution">启用分销返利</Label>
+          <p className="text-xs text-gray-500">自动计算并发放返利</p>
+        </div>
+        <Switch id="distribution" checked={settings.enabled} onCheckedChange={handleToggle} />
+      </div>
+
+      {settings.enabled && (
+        <div className="space-y-3">
+          <div className="flex items-center justify-between">
+            <Label className="text-sm">分销层级设置</Label>
+            <Button size="sm" variant="outline" onClick={addRule}>
+              <Plus className="h-3 w-3 mr-1" />
+              添加层级
+            </Button>
+          </div>
+
+          {settings.rules.map((rule, index) => (
+            <div key={index} className="flex items-center gap-2">
+              <span className="text-sm w-16">{rule.level}级</span>
+              <Input
+                type="number"
+                value={rule.percentage}
+                onChange={(e) => updateRule(index, Number(e.target.value))}
+                className="flex-1"
+                min="0"
+                max="100"
+              />
+              <span className="text-sm">%</span>
+              <Button size="icon" variant="ghost" onClick={() => removeRule(index)}>
+                <Trash2 className="h-4 w-4" />
+              </Button>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

Cunkebao/app/scenarios/phone/new/components/FollowUpSettings.tsx

@@ -0,0 +1,123 @@
+"use client"
+
+import { Switch } from "@/components/ui/switch"
+import { Label } from "@/components/ui/label"
+import { Textarea } from "@/components/ui/textarea"
+import { Button } from "@/components/ui/button"
+import { Plus, X } from "lucide-react"
+
+interface FollowUpSettingsProps {
+  settings: {
+    autoWelcome: boolean
+    welcomeMessage: string
+    autoTag: boolean
+    tags: string[]
+  }
+  onChange: (settings: any) => void
+}
+
+export function FollowUpSettings({ settings, onChange }: FollowUpSettingsProps) {
+  const handleToggle = (key: string, value: boolean) => {
+    onChange({
+      ...settings,
+      [key]: value,
+    })
+  }
+
+  const handleMessageChange = (value: string) => {
+    onChange({
+      ...settings,
+      welcomeMessage: value,
+    })
+  }
+
+  const addTag = () => {
+    const tag = prompt("请输入标签名称")
+    if (tag && !settings.tags.includes(tag)) {
+      onChange({
+        ...settings,
+        tags: [...settings.tags, tag],
+      })
+    }
+  }
+
+  const removeTag = (tag: string) => {
+    onChange({
+      ...settings,
+      tags: settings.tags.filter((t) => t !== tag),
+    })
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="space-y-3">
+        <div className="flex items-center justify-between">
+          <div>
+            <Label htmlFor="auto-welcome">自动发送欢迎语</Label>
+            <p className="text-xs text-gray-500">加好友成功后自动发送</p>
+          </div>
+          <Switch
+            id="auto-welcome"
+            checked={settings.autoWelcome}
+            onCheckedChange={(checked) => handleToggle("autoWelcome", checked)}
+          />
+        </div>
+
+        {settings.autoWelcome && (
+          <div>
+            <Label htmlFor="welcome-message" className="text-sm">
+              欢迎语内容
+            </Label>
+            <Textarea
+              id="welcome-message"
+              value={settings.welcomeMessage}
+              onChange={(e) => handleMessageChange(e.target.value)}
+              className="mt-1"
+              rows={3}
+              placeholder="请输入欢迎语内容"
+            />
+          </div>
+        )}
+      </div>
+
+      <div className="space-y-3">
+        <div className="flex items-center justify-between">
+          <div>
+            <Label htmlFor="auto-tag">自动打标签</Label>
+            <p className="text-xs text-gray-500">为新好友自动添加标签</p>
+          </div>
+          <Switch
+            id="auto-tag"
+            checked={settings.autoTag}
+            onCheckedChange={(checked) => handleToggle("autoTag", checked)}
+          />
+        </div>
+
+        {settings.autoTag && (
+          <div>
+            <div className="flex items-center justify-between mb-2">
+              <Label className="text-sm">标签列表</Label>
+              <Button size="sm" variant="outline" onClick={addTag}>
+                <Plus className="h-3 w-3 mr-1" />
+                添加
+              </Button>
+            </div>
+            <div className="flex flex-wrap gap-2">
+              {settings.tags.map((tag) => (
+                <div
+                  key={tag}
+                  className="flex items-center gap-1 px-2 py-1 bg-blue-50 text-blue-600 rounded-md text-sm"
+                >
+                  <span>{tag}</span>
+                  <button onClick={() => removeTag(tag)} className="hover:text-blue-800">
+                    <X className="h-3 w-3" />
+                  </button>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

Cunkebao/app/scenarios/phone/new/components/PhoneImportDialog.tsx

@@ -0,0 +1,138 @@
+"use client"
+
+import type React from "react"
+
+import { useState } from "react"
+import { Upload } from "lucide-react"
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { toast } from "@/components/ui/use-toast"
+
+interface PhoneImportDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onImport: (numbers: string[]) => void
+}
+
+export function PhoneImportDialog({ open, onOpenChange, onImport }: PhoneImportDialogProps) {
+  const [manualInput, setManualInput] = useState("")
+  const [importing, setImporting] = useState(false)
+
+  const handleManualImport = () => {
+    const numbers = manualInput
+      .split(/[\n,，]/)
+      .map((n) => n.trim())
+      .filter((n) => n && /^1[3-9]\d{9}$/.test(n))
+
+    if (numbers.length === 0) {
+      toast({
+        title: "没有有效的电话号码",
+        description: "请输入正确格式的手机号码",
+        variant: "destructive",
+      })
+      return
+    }
+
+    onImport(numbers)
+    setManualInput("")
+    toast({
+      title: "导入成功",
+      description: `成功导入 ${numbers.length} 个电话号码`,
+    })
+  }
+
+  const handleFileUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0]
+    if (!file) return
+
+    setImporting(true)
+    try {
+      // 这里应该解析Excel/CSV文件
+      // 模拟导入过程
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+
+      // 模拟导入的号码
+      const mockNumbers = ["13800138000", "13900139000", "13700137000"]
+
+      onImport(mockNumbers)
+      toast({
+        title: "导入成功",
+        description: `成功导入 ${mockNumbers.length} 个电话号码`,
+      })
+    } catch (error) {
+      toast({
+        title: "导入失败",
+        description: "文件解析失败，请检查文件格式",
+        variant: "destructive",
+      })
+    } finally {
+      setImporting(false)
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>导入电话号码</DialogTitle>
+          <DialogDescription>支持批量导入Excel/CSV文件或手动输入</DialogDescription>
+        </DialogHeader>
+
+        <Tabs defaultValue="manual" className="w-full">
+          <TabsList className="grid w-full grid-cols-2">
+            <TabsTrigger value="manual">手动输入</TabsTrigger>
+            <TabsTrigger value="file">文件导入</TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="manual" className="space-y-4">
+            <div>
+              <label className="text-sm font-medium">电话号码</label>
+              <textarea
+                className="w-full mt-1 px-3 py-2 border rounded-md"
+                rows={6}
+                placeholder="每行一个号码，或用逗号分隔"
+                value={manualInput}
+                onChange={(e) => setManualInput(e.target.value)}
+              />
+              <p className="text-xs text-gray-500 mt-1">支持格式：13800138000，每行一个或逗号分隔</p>
+            </div>
+            <Button className="w-full" onClick={handleManualImport}>
+              确认导入
+            </Button>
+          </TabsContent>
+
+          <TabsContent value="file" className="space-y-4">
+            <div className="border-2 border-dashed rounded-lg p-8 text-center">
+              <Upload className="h-12 w-12 mx-auto text-gray-400 mb-4" />
+              <p className="text-sm text-gray-600 mb-2">点击或拖拽文件到此处</p>
+              <p className="text-xs text-gray-500 mb-4">支持 Excel (.xlsx, .xls) 和 CSV 文件</p>
+              <input
+                type="file"
+                accept=".xlsx,.xls,.csv"
+                onChange={handleFileUpload}
+                className="hidden"
+                id="file-upload"
+                disabled={importing}
+              />
+              <label htmlFor="file-upload">
+                <Button as="span" disabled={importing}>
+                  {importing ? "导入中..." : "选择文件"}
+                </Button>
+              </label>
+            </div>
+
+            <div className="bg-gray-50 p-3 rounded-md">
+              <p className="text-xs text-gray-600 mb-2">文件格式示例：</p>
+              <div className="bg-white p-2 rounded border text-xs font-mono">
+                <div>姓名,电话,来源,备注</div>
+                <div>张三,13800138000,网站,意向客户</div>
+                <div>李四,13900139000,广告,待跟进</div>
+              </div>
+            </div>
+          </TabsContent>
+        </Tabs>
+      </DialogContent>
+    </Dialog>
+  )
+}

Cunkebao/app/scenarios/phone/new/components/RedPacketSettings.tsx

@@ -0,0 +1,83 @@
+"use client"
+
+import { Switch } from "@/components/ui/switch"
+import { Label } from "@/components/ui/label"
+import { Input } from "@/components/ui/input"
+
+interface RedPacketSettingsProps {
+  settings: {
+    enabled: boolean
+    amount: number
+    pool: number
+  }
+  onChange: (settings: any) => void
+}
+
+export function RedPacketSettings({ settings, onChange }: RedPacketSettingsProps) {
+  const handleToggle = (value: boolean) => {
+    onChange({
+      ...settings,
+      enabled: value,
+    })
+  }
+
+  const handleAmountChange = (value: number) => {
+    onChange({
+      ...settings,
+      amount: value,
+    })
+  }
+
+  const handlePoolChange = (value: number) => {
+    onChange({
+      ...settings,
+      pool: value,
+    })
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <div>
+          <Label htmlFor="redpacket">启用红包奖励</Label>
+          <p className="text-xs text-gray-500">加好友成功后自动发红包</p>
+        </div>
+        <Switch id="redpacket" checked={settings.enabled} onCheckedChange={handleToggle} />
+      </div>
+
+      {settings.enabled && (
+        <div className="space-y-3">
+          <div>
+            <Label htmlFor="amount" className="text-sm">
+              单个红包金额（元）
+            </Label>
+            <Input
+              id="amount"
+              type="number"
+              value={settings.amount}
+              onChange={(e) => handleAmountChange(Number(e.target.value))}
+              min="0.01"
+              step="0.01"
+              className="mt-1"
+            />
+          </div>
+
+          <div>
+            <Label htmlFor="pool" className="text-sm">
+              红包池总额（元）
+            </Label>
+            <Input
+              id="pool"
+              type="number"
+              value={settings.pool}
+              onChange={(e) => handlePoolChange(Number(e.target.value))}
+              min="0"
+              className="mt-1"
+            />
+            <p className="text-xs text-gray-500 mt-1">剩余可发：{Math.floor(settings.pool / settings.amount)} 个红包</p>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

Cunkebao/app/scenarios/phone/new/page.tsx

@@ -0,0 +1,254 @@
+"use client"
+
+import { useState } from "react"
+import { useRouter } from "next/navigation"
+import { ChevronLeft, Upload, Phone, Users, Filter, TrendingUp, Gift, MessageSquare } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { toast } from "@/components/ui/use-toast"
+import { PhoneImportDialog } from "./components/PhoneImportDialog"
+import { DeviceConfigDialog } from "./components/DeviceConfigDialog"
+import { AIFilterSettings } from "./components/AIFilterSettings"
+import { DistributionSettings } from "./components/DistributionSettings"
+import { RedPacketSettings } from "./components/RedPacketSettings"
+import { FollowUpSettings } from "./components/FollowUpSettings"
+
+export default function NewPhoneAcquisitionPlan() {
+  const router = useRouter()
+  const [showImportDialog, setShowImportDialog] = useState(false)
+  const [showDeviceDialog, setShowDeviceDialog] = useState(false)
+  const [planData, setPlanData] = useState({
+    name: "",
+    description: "",
+    phoneNumbers: [] as string[],
+    devices: [] as string[],
+    autoAddWechat: true,
+    aiFilter: {
+      enabled: true,
+      removeBlacklist: true,
+      validateFormat: true,
+      removeDuplicates: true,
+    },
+    distribution: {
+      enabled: false,
+      rules: [],
+    },
+    redPacket: {
+      enabled: false,
+      amount: 0,
+      pool: 0,
+    },
+    followUp: {
+      autoWelcome: true,
+      welcomeMessage: "您好，很高兴认识您！",
+      autoTag: true,
+      tags: ["电话获客"],
+    },
+  })
+
+  const handleSave = async () => {
+    try {
+      // 验证必填项
+      if (!planData.name) {
+        toast({
+          title: "请输入计划名称",
+          variant: "destructive",
+        })
+        return
+      }
+
+      if (planData.phoneNumbers.length === 0) {
+        toast({
+          title: "请导入电话号码",
+          variant: "destructive",
+        })
+        return
+      }
+
+      if (planData.devices.length === 0) {
+        toast({
+          title: "请选择执行设备",
+          variant: "destructive",
+        })
+        return
+      }
+
+      // 调用API保存计划
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+
+      toast({
+        title: "创建成功",
+        description: "电话获客计划已创建",
+      })
+      router.push("/scenarios/phone")
+    } catch (error) {
+      toast({
+        title: "创建失败",
+        description: "创建计划失败，请重试",
+        variant: "destructive",
+      })
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <div className="max-w-[390px] mx-auto bg-white min-h-screen flex flex-col">
+        <header className="sticky top-0 z-10 bg-white border-b">
+          <div className="flex items-center justify-between h-14 px-4">
+            <div className="flex items-center">
+              <Button variant="ghost" size="icon" onClick={() => router.push("/scenarios/phone")}>
+                <ChevronLeft className="h-5 w-5" />
+              </Button>
+              <h1 className="ml-2 text-lg font-medium">新建电话获客计划</h1>
+            </div>
+          </div>
+        </header>
+
+        <div className="flex-1 overflow-y-auto pb-20">
+          <div className="p-4 space-y-4">
+            {/* 基础信息 */}
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-base">基础信息</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div>
+                  <label className="text-sm font-medium">计划名称</label>
+                  <input
+                    type="text"
+                    className="w-full mt-1 px-3 py-2 border rounded-md"
+                    placeholder="请输入计划名称"
+                    value={planData.name}
+                    onChange={(e) => setPlanData({ ...planData, name: e.target.value })}
+                  />
+                </div>
+                <div>
+                  <label className="text-sm font-medium">计划描述</label>
+                  <textarea
+                    className="w-full mt-1 px-3 py-2 border rounded-md"
+                    rows={3}
+                    placeholder="请输入计划描述（选填）"
+                    value={planData.description}
+                    onChange={(e) => setPlanData({ ...planData, description: e.target.value })}
+                  />
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* 电话导入 */}
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-base flex items-center justify-between">
+                  <span className="flex items-center gap-2">
+                    <Phone className="h-4 w-4" />
+                    电话线索导入
+                  </span>
+                  <Button size="sm" onClick={() => setShowImportDialog(true)}>
+                    <Upload className="h-4 w-4 mr-1" />
+                    导入
+                  </Button>
+                </CardTitle>
+                <CardDescription>已导入 {planData.phoneNumbers.length} 个电话号码</CardDescription>
+              </CardHeader>
+            </Card>
+
+            {/* 设备配置 */}
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-base flex items-center justify-between">
+                  <span className="flex items-center gap-2">
+                    <Users className="h-4 w-4" />
+                    执行设备
+                  </span>
+                  <Button size="sm" onClick={() => setShowDeviceDialog(true)}>
+                    选择设备
+                  </Button>
+                </CardTitle>
+                <CardDescription>已选择 {planData.devices.length} 个设备</CardDescription>
+              </CardHeader>
+            </Card>
+
+            {/* 功能配置 */}
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-base">功能配置</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <Tabs defaultValue="filter" className="w-full">
+                  <TabsList className="grid w-full grid-cols-4">
+                    <TabsTrigger value="filter">
+                      <Filter className="h-3 w-3" />
+                    </TabsTrigger>
+                    <TabsTrigger value="distribution">
+                      <TrendingUp className="h-3 w-3" />
+                    </TabsTrigger>
+                    <TabsTrigger value="redpacket">
+                      <Gift className="h-3 w-3" />
+                    </TabsTrigger>
+                    <TabsTrigger value="followup">
+                      <MessageSquare className="h-3 w-3" />
+                    </TabsTrigger>
+                  </TabsList>
+                  <TabsContent value="filter" className="mt-4">
+                    <AIFilterSettings
+                      settings={planData.aiFilter}
+                      onChange={(settings) => setPlanData({ ...planData, aiFilter: settings })}
+                    />
+                  </TabsContent>
+                  <TabsContent value="distribution" className="mt-4">
+                    <DistributionSettings
+                      settings={planData.distribution}
+                      onChange={(settings) => setPlanData({ ...planData, distribution: settings })}
+                    />
+                  </TabsContent>
+                  <TabsContent value="redpacket" className="mt-4">
+                    <RedPacketSettings
+                      settings={planData.redPacket}
+                      onChange={(settings) => setPlanData({ ...planData, redPacket: settings })}
+                    />
+                  </TabsContent>
+                  <TabsContent value="followup" className="mt-4">
+                    <FollowUpSettings
+                      settings={planData.followUp}
+                      onChange={(settings) => setPlanData({ ...planData, followUp: settings })}
+                    />
+                  </TabsContent>
+                </Tabs>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+
+        <div className="fixed bottom-0 left-0 right-0 bg-white border-t p-4">
+          <div className="max-w-[390px] mx-auto">
+            <Button className="w-full" onClick={handleSave}>
+              创建计划
+            </Button>
+          </div>
+        </div>
+
+        {/* 导入对话框 */}
+        <PhoneImportDialog
+          open={showImportDialog}
+          onOpenChange={setShowImportDialog}
+          onImport={(numbers) => {
+            setPlanData({ ...planData, phoneNumbers: [...planData.phoneNumbers, ...numbers] })
+            setShowImportDialog(false)
+          }}
+        />
+
+        {/* 设备选择对话框 */}
+        <DeviceConfigDialog
+          open={showDeviceDialog}
+          onOpenChange={setShowDeviceDialog}
+          selectedDevices={planData.devices}
+          onSelect={(devices) => {
+            setPlanData({ ...planData, devices })
+            setShowDeviceDialog(false)
+          }}
+        />
+      </div>
+    </div>
+  )
+}