260 lines
7.9 KiB
TypeScript
260 lines
7.9 KiB
TypeScript
"use client";
|
||
|
||
import React, { useState, useEffect } from "react";
|
||
import {
|
||
Form,
|
||
Input,
|
||
Button,
|
||
Checkbox,
|
||
Modal,
|
||
Alert,
|
||
Select,
|
||
message,
|
||
} from "antd";
|
||
import { QuestionCircleOutlined, MessageOutlined } from "@ant-design/icons";
|
||
import DeviceSelection from "@/components/DeviceSelection";
|
||
|
||
interface FriendRequestSettingsProps {
|
||
formData: any;
|
||
onChange: (data: any) => void;
|
||
onNext: () => void;
|
||
onPrev: () => void;
|
||
}
|
||
|
||
// 招呼语模板
|
||
const greetingTemplates = [
|
||
"你好，请通过",
|
||
"你好,了解XX,请通过",
|
||
"你好，我是XX产品的客服请通过",
|
||
"你好，感谢关注我们的产品",
|
||
"你好，很高兴为您服务",
|
||
];
|
||
|
||
// 备注类型选项
|
||
const remarkTypes = [
|
||
{ value: "phone", label: "手机号" },
|
||
{ value: "nickname", label: "昵称" },
|
||
{ value: "source", label: "来源" },
|
||
];
|
||
|
||
const FriendRequestSettings: React.FC<FriendRequestSettingsProps> = ({
|
||
formData,
|
||
onChange,
|
||
onNext,
|
||
onPrev,
|
||
}) => {
|
||
const [isTemplateDialogOpen, setIsTemplateDialogOpen] = useState(false);
|
||
const [hasWarnings, setHasWarnings] = useState(false);
|
||
const [selectedDevices, setSelectedDevices] = useState<any[]>(
|
||
formData.selectedDevices || []
|
||
);
|
||
const [showRemarkTip, setShowRemarkTip] = useState(false);
|
||
|
||
// 获取场景标题
|
||
const getScenarioTitle = () => {
|
||
switch (formData.scenario) {
|
||
case "douyin":
|
||
return "抖音直播";
|
||
case "xiaohongshu":
|
||
return "小红书";
|
||
case "weixinqun":
|
||
return "微信群";
|
||
case "gongzhonghao":
|
||
return "公众号";
|
||
default:
|
||
return formData.name || "获客计划";
|
||
}
|
||
};
|
||
|
||
// 使用useEffect设置默认值
|
||
useEffect(() => {
|
||
if (!formData.greeting) {
|
||
onChange({
|
||
...formData,
|
||
greeting: "你好，请通过",
|
||
remarkType: "phone", // 默认选择手机号
|
||
remarkFormat: `手机号+${getScenarioTitle()}`, // 默认备注格式
|
||
addFriendInterval: 1,
|
||
});
|
||
}
|
||
}, [formData, formData.greeting, onChange]);
|
||
|
||
// 检查是否有未完成的必填项
|
||
useEffect(() => {
|
||
const hasIncompleteFields = !formData.greeting?.trim();
|
||
setHasWarnings(hasIncompleteFields);
|
||
}, [formData]);
|
||
|
||
const handleTemplateSelect = (template: string) => {
|
||
onChange({ ...formData, greeting: template });
|
||
setIsTemplateDialogOpen(false);
|
||
};
|
||
|
||
const handleNext = () => {
|
||
// 即使有警告也允许进入下一步，但会显示提示
|
||
onNext();
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<div className="space-y-6">
|
||
<div>
|
||
<span className="font-medium text-base">选择设备</span>
|
||
<div className="mt-2">
|
||
<DeviceSelection
|
||
selectedDevices={selectedDevices.map((d) => d.id)}
|
||
onSelect={(deviceIds) => {
|
||
const newSelectedDevices = deviceIds.map((id) => ({
|
||
id,
|
||
name: `设备 ${id}`,
|
||
status: "online",
|
||
}));
|
||
setSelectedDevices(newSelectedDevices);
|
||
onChange({ ...formData, device: deviceIds });
|
||
}}
|
||
placeholder="选择设备"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mb-4">
|
||
<div className="flex items-center space-x-2 mb-1 relative">
|
||
<span className="font-medium text-base">好友备注</span>
|
||
<span
|
||
className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-gray-200 text-gray-500 text-xs cursor-pointer hover:bg-gray-300 transition-colors"
|
||
onMouseEnter={() => setShowRemarkTip(true)}
|
||
onMouseLeave={() => setShowRemarkTip(false)}
|
||
onClick={() => setShowRemarkTip((v) => !v)}
|
||
>
|
||
?
|
||
</span>
|
||
{showRemarkTip && (
|
||
<div className="absolute left-24 top-0 z-20 w-64 p-3 bg-white border border-gray-200 rounded shadow-lg text-sm text-gray-700">
|
||
<div>设置添加好友时的备注格式</div>
|
||
<div className="mt-2 text-xs text-gray-500">备注格式预览：</div>
|
||
<div className="mt-1 text-blue-600">
|
||
{formData.remarkType === "phone" &&
|
||
`138****1234+${getScenarioTitle()}`}
|
||
{formData.remarkType === "nickname" &&
|
||
`小红书用户2851+${getScenarioTitle()}`}
|
||
{formData.remarkType === "source" &&
|
||
`抖音直播+${getScenarioTitle()}`}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
<Select
|
||
value={formData.remarkType || "phone"}
|
||
onChange={(value) => onChange({ ...formData, remarkType: value })}
|
||
className="w-full mt-2"
|
||
>
|
||
{remarkTypes.map((type) => (
|
||
<Select.Option key={type.value} value={type.value}>
|
||
{type.label}
|
||
</Select.Option>
|
||
))}
|
||
</Select>
|
||
</div>
|
||
|
||
<div>
|
||
<div className="flex items-center justify-between">
|
||
<span className="font-medium text-base">招呼语</span>
|
||
<Button
|
||
onClick={() => setIsTemplateDialogOpen(true)}
|
||
className="text-blue-500"
|
||
>
|
||
<MessageOutlined className="h-4 w-4 mr-2" />
|
||
参考模板
|
||
</Button>
|
||
</div>
|
||
<Input
|
||
value={formData.greeting}
|
||
onChange={(e) =>
|
||
onChange({ ...formData, greeting: e.target.value })
|
||
}
|
||
placeholder="请输入招呼语"
|
||
className="mt-2"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<span className="font-medium text-base">添加间隔</span>
|
||
<div className="flex items-center space-x-2 mt-2">
|
||
<Input
|
||
type="number"
|
||
value={formData.addFriendInterval || 1}
|
||
onChange={(e) =>
|
||
onChange({
|
||
...formData,
|
||
addFriendInterval: Number(e.target.value),
|
||
})
|
||
}
|
||
/>
|
||
<div className="w-10">分钟</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<span className="font-medium text-base">允许加人的时间段</span>
|
||
<div className="flex items-center space-x-2 mt-2">
|
||
<Input
|
||
type="time"
|
||
value={formData.addFriendTimeStart || "09:00"}
|
||
onChange={(e) =>
|
||
onChange({ ...formData, addFriendTimeStart: e.target.value })
|
||
}
|
||
className="w-32"
|
||
/>
|
||
<span>至</span>
|
||
<Input
|
||
type="time"
|
||
value={formData.addFriendTimeEnd || "18:00"}
|
||
onChange={(e) =>
|
||
onChange({ ...formData, addFriendTimeEnd: e.target.value })
|
||
}
|
||
className="w-32"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{hasWarnings && (
|
||
<Alert
|
||
message="警告"
|
||
description="您有未完成的设置项，建议完善后再进入下一步。"
|
||
type="warning"
|
||
showIcon
|
||
className="bg-amber-50 border-amber-200"
|
||
/>
|
||
)}
|
||
|
||
<div className="flex justify-between pt-4">
|
||
<Button onClick={onPrev}>上一步</Button>
|
||
<Button type="primary" onClick={handleNext}>
|
||
下一步
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<Modal
|
||
open={isTemplateDialogOpen}
|
||
onCancel={() => setIsTemplateDialogOpen(false)}
|
||
footer={null}
|
||
>
|
||
<div className="space-y-2">
|
||
{greetingTemplates.map((template, index) => (
|
||
<Button
|
||
key={index}
|
||
onClick={() => handleTemplateSelect(template)}
|
||
style={{ width: "100%", marginBottom: 8 }}
|
||
>
|
||
{template}
|
||
</Button>
|
||
))}
|
||
</div>
|
||
</Modal>
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default FriendRequestSettings;
|