plan pages
This commit is contained in:
xavier
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
123
Cunkebao/app/scenarios/phone/new/components/FollowUpSettings.tsx
Normal file
123
Cunkebao/app/scenarios/phone/new/components/FollowUpSettings.tsx
Normal file
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user