335 lines
14 KiB
TypeScript
335 lines
14 KiB
TypeScript
"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>
|
||
)
|
||
}
|