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>
+  )
+}