Merge branch 'yongpxu-dev' into yongpxu-master
# Conflicts: # nkebao/src/App.tsx resolved by yongpxu-dev version
This commit is contained in:
笔记本里的永平
@@ -1,12 +1,32 @@
|
||||
import React, { useEffect, useState, useCallback } from 'react';
|
||||
import { useParams, useNavigate, useSearchParams } from 'react-router-dom';
|
||||
import PageHeader from '@/components/PageHeader';
|
||||
import Layout from '@/components/Layout';
|
||||
import BottomNav from '@/components/BottomNav';
|
||||
import { Plus, Users, TrendingUp, Calendar, Copy, Trash2, Play, Pause, Settings, Loader2, Code } from 'lucide-react';
|
||||
import { fetchPlanList, fetchPlanDetail, copyPlan, deletePlan, type Task } from '@/api/scenarios';
|
||||
import { useToast } from '@/components/ui/toast';
|
||||
import '@/components/Layout.css';
|
||||
import React, { useEffect, useState, useCallback } from "react";
|
||||
import { useParams, useNavigate, useSearchParams } from "react-router-dom";
|
||||
import PageHeader from "@/components/PageHeader";
|
||||
import Layout from "@/components/Layout";
|
||||
import BottomNav from "@/components/BottomNav";
|
||||
import {
|
||||
Plus,
|
||||
Users,
|
||||
Calendar,
|
||||
Copy,
|
||||
Trash2,
|
||||
Edit,
|
||||
Settings,
|
||||
Loader2,
|
||||
Code,
|
||||
Search,
|
||||
RefreshCw,
|
||||
} from "lucide-react";
|
||||
import {
|
||||
fetchPlanList,
|
||||
fetchPlanDetail,
|
||||
copyPlan,
|
||||
deletePlan,
|
||||
type Task,
|
||||
} from "@/api/scenarios";
|
||||
import { useToast } from "@/components/ui/toast";
|
||||
import "@/components/Layout.css";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
interface ScenarioData {
|
||||
id: string;
|
||||
@@ -26,20 +46,25 @@ interface ApiSettings {
|
||||
}
|
||||
|
||||
export default function ScenarioDetail() {
|
||||
const { scenarioId } = useParams<{ scenarioId: string }>();
|
||||
const { scenarioId, scenarioName } = useParams<{
|
||||
scenarioId: string;
|
||||
scenarioName: string;
|
||||
}>();
|
||||
const navigate = useNavigate();
|
||||
const [searchParams] = useSearchParams();
|
||||
const { toast } = useToast();
|
||||
const [scenario, setScenario] = useState<ScenarioData | null>(null);
|
||||
const [tasks, setTasks] = useState<Task[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState('');
|
||||
const [error, setError] = useState("");
|
||||
const [showApiDialog, setShowApiDialog] = useState(false);
|
||||
const [currentApiSettings, setCurrentApiSettings] = useState<ApiSettings>({
|
||||
apiKey: '',
|
||||
webhookUrl: '',
|
||||
taskId: '',
|
||||
apiKey: "",
|
||||
webhookUrl: "",
|
||||
taskId: "",
|
||||
});
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [loadingTasks, setLoadingTasks] = useState(false);
|
||||
|
||||
// 获取渠道中文名称
|
||||
const getChannelName = (channel: string) => {
|
||||
@@ -61,61 +86,61 @@ export default function ScenarioDetail() {
|
||||
// 获取场景描述
|
||||
const getScenarioDescription = (channel: string) => {
|
||||
const descriptions: Record<string, string> = {
|
||||
douyin: '通过抖音平台进行精准获客，利用短视频内容吸引目标用户',
|
||||
xiaohongshu: '利用小红书平台进行内容营销获客，通过优质内容建立品牌形象',
|
||||
gongzhonghao: '通过微信公众号进行获客，建立私域流量池',
|
||||
haibao: '通过海报分享进行获客，快速传播品牌信息',
|
||||
phone: '通过电话营销进行获客，直接与客户沟通',
|
||||
weixinqun: '通过微信群进行获客，利用社交裂变效应',
|
||||
payment: '通过付款码进行获客，便捷的支付方式',
|
||||
api: '通过API接口进行获客，支持第三方系统集成',
|
||||
douyin: "通过抖音平台进行精准获客，利用短视频内容吸引目标用户",
|
||||
xiaohongshu: "利用小红书平台进行内容营销获客，通过优质内容建立品牌形象",
|
||||
gongzhonghao: "通过微信公众号进行获客，建立私域流量池",
|
||||
haibao: "通过海报分享进行获客，快速传播品牌信息",
|
||||
phone: "通过电话营销进行获客，直接与客户沟通",
|
||||
weixinqun: "通过微信群进行获客，利用社交裂变效应",
|
||||
payment: "通过付款码进行获客，便捷的支付方式",
|
||||
api: "通过API接口进行获客，支持第三方系统集成",
|
||||
};
|
||||
return descriptions[channel] || '通过该平台进行获客';
|
||||
return descriptions[channel] || "通过该平台进行获客";
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const fetchScenarioData = async () => {
|
||||
if (!scenarioId) return;
|
||||
|
||||
|
||||
setLoading(true);
|
||||
setError('');
|
||||
|
||||
setError("");
|
||||
|
||||
try {
|
||||
// 获取计划列表
|
||||
const response = await fetchPlanList(scenarioId, 1, 20);
|
||||
|
||||
|
||||
// 设置计划列表（可能为空）
|
||||
if (response && response.data && response.data.list) {
|
||||
setTasks(response.data.list);
|
||||
} else {
|
||||
setTasks([]);
|
||||
}
|
||||
|
||||
|
||||
// 构建场景数据（无论是否有计划都要创建）
|
||||
const scenarioData: ScenarioData = {
|
||||
id: scenarioId,
|
||||
name: getScenarioName(),
|
||||
image: '', // 可以根据需要设置图片
|
||||
name: scenarioName || "",
|
||||
image: "", // 可以根据需要设置图片
|
||||
description: getScenarioDescription(scenarioId),
|
||||
totalPlans: response?.data?.list?.length || 0,
|
||||
totalCustomers: 0, // 移除统计
|
||||
todayCustomers: 0, // 移除统计
|
||||
growth: '', // 移除增长
|
||||
growth: "", // 移除增长
|
||||
};
|
||||
|
||||
setScenario(scenarioData);
|
||||
} catch (error) {
|
||||
console.error('获取场景数据失败:', error);
|
||||
console.error("获取场景数据失败:", error);
|
||||
// 即使API失败也要创建基本的场景数据
|
||||
const scenarioData: ScenarioData = {
|
||||
id: scenarioId,
|
||||
name: getScenarioName(),
|
||||
image: '',
|
||||
image: "",
|
||||
description: getScenarioDescription(scenarioId),
|
||||
totalPlans: 0,
|
||||
totalCustomers: 0,
|
||||
todayCustomers: 0,
|
||||
growth: '',
|
||||
growth: "",
|
||||
};
|
||||
setScenario(scenarioData);
|
||||
setTasks([]);
|
||||
@@ -130,28 +155,31 @@ export default function ScenarioDetail() {
|
||||
// 获取场景名称 - 优先使用URL查询参数，其次使用映射
|
||||
const getScenarioName = useCallback(() => {
|
||||
// 优先使用URL查询参数中的name
|
||||
const urlName = searchParams.get('name');
|
||||
const urlName = searchParams.get("name");
|
||||
if (urlName) {
|
||||
return urlName;
|
||||
}
|
||||
|
||||
|
||||
// 如果没有URL参数，使用映射
|
||||
return getChannelName(scenarioId || '');
|
||||
return getChannelName(scenarioId || "");
|
||||
}, [searchParams, scenarioId]);
|
||||
|
||||
// 更新场景数据中的名称
|
||||
useEffect(() => {
|
||||
setScenario(prev => prev ? {
|
||||
...prev,
|
||||
name: (() => {
|
||||
const urlName = searchParams.get('name');
|
||||
if (urlName) return urlName;
|
||||
return getChannelName(scenarioId || '');
|
||||
})()
|
||||
} : null);
|
||||
setScenario((prev) =>
|
||||
prev
|
||||
? {
|
||||
...prev,
|
||||
name: (() => {
|
||||
const urlName = searchParams.get("name");
|
||||
if (urlName) return urlName;
|
||||
return getChannelName(scenarioId || "");
|
||||
})(),
|
||||
}
|
||||
: null
|
||||
);
|
||||
}, [searchParams, scenarioId]);
|
||||
|
||||
|
||||
const handleCopyPlan = async (taskId: string) => {
|
||||
const taskToCopy = tasks.find((task) => task.id === taskId);
|
||||
if (!taskToCopy) return;
|
||||
@@ -160,24 +188,28 @@ export default function ScenarioDetail() {
|
||||
const response = await copyPlan(taskId);
|
||||
if (response && response.code === 200) {
|
||||
toast({
|
||||
title: '计划已复制',
|
||||
title: "计划已复制",
|
||||
description: `已成功复制"${taskToCopy.name}"`,
|
||||
});
|
||||
|
||||
|
||||
// 重新加载数据
|
||||
const refreshResponse = await fetchPlanList(scenarioId!, 1, 20);
|
||||
if (refreshResponse && refreshResponse.code === 200 && refreshResponse.data) {
|
||||
if (
|
||||
refreshResponse &&
|
||||
refreshResponse.code === 200 &&
|
||||
refreshResponse.data
|
||||
) {
|
||||
setTasks(refreshResponse.data.list);
|
||||
}
|
||||
} else {
|
||||
throw new Error(response?.msg || '复制失败');
|
||||
throw new Error(response?.msg || "复制失败");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('复制计划失败:', error);
|
||||
console.error("复制计划失败:", error);
|
||||
toast({
|
||||
title: '复制失败',
|
||||
description: error instanceof Error ? error.message : '复制计划失败',
|
||||
variant: 'destructive',
|
||||
title: "复制失败",
|
||||
description: error instanceof Error ? error.message : "复制计划失败",
|
||||
variant: "destructive",
|
||||
});
|
||||
}
|
||||
};
|
||||
@@ -192,24 +224,28 @@ export default function ScenarioDetail() {
|
||||
const response = await deletePlan(taskId);
|
||||
if (response && response.code === 200) {
|
||||
toast({
|
||||
title: '计划已删除',
|
||||
title: "计划已删除",
|
||||
description: `已成功删除"${taskToDelete.name}"`,
|
||||
});
|
||||
|
||||
|
||||
// 重新加载数据
|
||||
const refreshResponse = await fetchPlanList(scenarioId!, 1, 20);
|
||||
if (refreshResponse && refreshResponse.code === 200 && refreshResponse.data) {
|
||||
if (
|
||||
refreshResponse &&
|
||||
refreshResponse.code === 200 &&
|
||||
refreshResponse.data
|
||||
) {
|
||||
setTasks(refreshResponse.data.list);
|
||||
}
|
||||
} else {
|
||||
throw new Error(response?.msg || '删除失败');
|
||||
throw new Error(response?.msg || "删除失败");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('删除计划失败:', error);
|
||||
console.error("删除计划失败:", error);
|
||||
toast({
|
||||
title: '删除失败',
|
||||
description: error instanceof Error ? error.message : '删除计划失败',
|
||||
variant: 'destructive',
|
||||
title: "删除失败",
|
||||
description: error instanceof Error ? error.message : "删除计划失败",
|
||||
variant: "destructive",
|
||||
});
|
||||
}
|
||||
};
|
||||
@@ -217,20 +253,22 @@ export default function ScenarioDetail() {
|
||||
const handleStatusChange = async (taskId: string, newStatus: 1 | 0) => {
|
||||
try {
|
||||
// 这里应该调用状态切换API，暂时模拟
|
||||
setTasks(prev => prev.map(task =>
|
||||
task.id === taskId ? { ...task, status: newStatus } : task
|
||||
));
|
||||
|
||||
setTasks((prev) =>
|
||||
prev.map((task) =>
|
||||
task.id === taskId ? { ...task, status: newStatus } : task
|
||||
)
|
||||
);
|
||||
|
||||
toast({
|
||||
title: '状态已更新',
|
||||
description: `计划已${newStatus === 1 ? '启动' : '暂停'}`,
|
||||
title: "状态已更新",
|
||||
description: `计划已${newStatus === 1 ? "启动" : "暂停"}`,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('状态切换失败:', error);
|
||||
console.error("状态切换失败:", error);
|
||||
toast({
|
||||
title: '状态切换失败',
|
||||
description: '请稍后重试',
|
||||
variant: 'destructive',
|
||||
title: "状态切换失败",
|
||||
description: "请稍后重试",
|
||||
variant: "destructive",
|
||||
});
|
||||
}
|
||||
};
|
||||
@@ -240,20 +278,22 @@ export default function ScenarioDetail() {
|
||||
const response = await fetchPlanDetail(taskId);
|
||||
if (response && response.code === 200 && response.data) {
|
||||
setCurrentApiSettings({
|
||||
apiKey: response.data.apiKey || 'demo-api-key-123456',
|
||||
webhookUrl: response.data.textUrl?.fullUrl || `https://api.example.com/webhook/${taskId}`,
|
||||
apiKey: response.data.apiKey || "demo-api-key-123456",
|
||||
webhookUrl:
|
||||
response.data.textUrl?.fullUrl ||
|
||||
`https://api.example.com/webhook/${taskId}`,
|
||||
taskId,
|
||||
});
|
||||
setShowApiDialog(true);
|
||||
} else {
|
||||
throw new Error(response?.msg || '获取API设置失败');
|
||||
throw new Error(response?.msg || "获取API设置失败");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取API设置失败:', error);
|
||||
console.error("获取API设置失败:", error);
|
||||
toast({
|
||||
title: '获取API设置失败',
|
||||
description: '请稍后重试',
|
||||
variant: 'destructive',
|
||||
title: "获取API设置失败",
|
||||
description: "请稍后重试",
|
||||
variant: "destructive",
|
||||
});
|
||||
}
|
||||
};
|
||||
@@ -261,34 +301,34 @@ export default function ScenarioDetail() {
|
||||
const handleCopyApiUrl = (url: string) => {
|
||||
navigator.clipboard.writeText(url);
|
||||
toast({
|
||||
title: '已复制',
|
||||
description: '接口地址已复制到剪贴板',
|
||||
title: "已复制",
|
||||
description: "接口地址已复制到剪贴板",
|
||||
});
|
||||
};
|
||||
|
||||
const handleCreateNewPlan = () => {
|
||||
navigate(`/scenarios/new?scenario=${scenarioId}`);
|
||||
navigate(`/scenarios/new/${scenarioId}`);
|
||||
};
|
||||
|
||||
const getStatusColor = (status: number) => {
|
||||
switch (status) {
|
||||
case 1:
|
||||
return 'text-green-600 bg-green-50';
|
||||
return "text-green-600 bg-green-50";
|
||||
case 0:
|
||||
return 'text-yellow-600 bg-yellow-50';
|
||||
return "text-yellow-600 bg-yellow-50";
|
||||
default:
|
||||
return 'text-gray-600 bg-gray-50';
|
||||
return "text-gray-600 bg-gray-50";
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusText = (status: number) => {
|
||||
switch (status) {
|
||||
case 1:
|
||||
return '进行中';
|
||||
return "进行中";
|
||||
case 0:
|
||||
return '已暂停';
|
||||
return "已暂停";
|
||||
default:
|
||||
return '未知';
|
||||
return "未知";
|
||||
}
|
||||
};
|
||||
|
||||
@@ -297,11 +337,10 @@ export default function ScenarioDetail() {
|
||||
<Layout
|
||||
header={
|
||||
<PageHeader
|
||||
title={scenario?.name || '场景详情'}
|
||||
title={scenario?.name || "场景详情"}
|
||||
defaultBackPath="/scenarios"
|
||||
/>
|
||||
}
|
||||
footer={<BottomNav />}
|
||||
>
|
||||
<div className="bg-gray-50 min-h-screen flex items-center justify-center">
|
||||
<div className="flex flex-col items-center space-y-4">
|
||||
@@ -316,25 +355,20 @@ export default function ScenarioDetail() {
|
||||
if (error) {
|
||||
return (
|
||||
<Layout
|
||||
header={
|
||||
<PageHeader
|
||||
title="场景详情"
|
||||
defaultBackPath="/scenarios"
|
||||
/>
|
||||
}
|
||||
header={<PageHeader title="场景详情" defaultBackPath="/scenarios" />}
|
||||
footer={<BottomNav />}
|
||||
>
|
||||
<div className="bg-gray-50 min-h-screen flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<p className="text-red-500 mb-4">{error}</p>
|
||||
<button
|
||||
<button
|
||||
onClick={() => window.location.reload()}
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
重新加载
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
@@ -342,12 +376,7 @@ export default function ScenarioDetail() {
|
||||
if (!scenario) {
|
||||
return (
|
||||
<Layout
|
||||
header={
|
||||
<PageHeader
|
||||
title="场景详情"
|
||||
defaultBackPath="/scenarios"
|
||||
/>
|
||||
}
|
||||
header={<PageHeader title="场景详情" defaultBackPath="/scenarios" />}
|
||||
footer={<BottomNav />}
|
||||
>
|
||||
<div className="bg-gray-50 min-h-screen flex items-center justify-center">
|
||||
@@ -355,141 +384,147 @@ export default function ScenarioDetail() {
|
||||
<Loader2 className="h-8 w-8 animate-spin text-blue-500" />
|
||||
<p className="text-gray-500">加载场景数据中...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
const handleRefresh = async () => {
|
||||
setLoadingTasks(true);
|
||||
await fetchPlanList(scenarioId!, 1, 20);
|
||||
setLoadingTasks(false);
|
||||
};
|
||||
|
||||
const filteredTasks = tasks.filter((task) => task.name.includes(searchTerm));
|
||||
|
||||
return (
|
||||
<Layout
|
||||
header={
|
||||
<PageHeader
|
||||
title={scenario.name}
|
||||
defaultBackPath="/scenarios"
|
||||
rightContent={
|
||||
<button
|
||||
onClick={handleCreateNewPlan}
|
||||
className="flex items-center px-3 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors text-sm"
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-1" />
|
||||
新建计划
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
}
|
||||
footer={<BottomNav />}
|
||||
>
|
||||
<div className="bg-gray-50 min-h-screen pb-20">
|
||||
<div className="p-4">
|
||||
{/* 场景描述 */}
|
||||
<div className="bg-white rounded-lg p-4 mb-6">
|
||||
<p className="text-gray-600 text-sm">{scenario.description}</p>
|
||||
</div>
|
||||
|
||||
{/* 数据统计 */}
|
||||
{/* <div className="grid grid-cols-2 gap-4 mb-6">
|
||||
<div className="bg-white rounded-lg p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-gray-500 text-sm">总获客数</p>
|
||||
<p className="text-2xl font-bold text-gray-900">{scenario.totalCustomers}</p>
|
||||
</div>
|
||||
<Users className="h-8 w-8 text-blue-500" />
|
||||
</div>
|
||||
<div className="flex items-center mt-2 text-green-500 text-sm">
|
||||
<TrendingUp className="h-4 w-4 mr-1" />
|
||||
<span>{scenario.growth}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-gray-500 text-sm">今日获客</p>
|
||||
<p className="text-2xl font-bold text-gray-900">{scenario.todayCustomers}</p>
|
||||
</div>
|
||||
<Calendar className="h-8 w-8 text-green-500" />
|
||||
</div>
|
||||
<div className="flex items-center mt-2 text-gray-500 text-sm">
|
||||
<span>活跃计划: {scenario.totalPlans}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
{/* 计划列表 */}
|
||||
<div className="bg-white rounded-lg">
|
||||
<div className="p-4 border-b">
|
||||
<h2 className="text-lg font-medium">获客计划</h2>
|
||||
</div>
|
||||
|
||||
{tasks.length === 200 ? (
|
||||
<div className="p-8 text-center">
|
||||
<div className="mb-4">
|
||||
<Users className="h-12 w-12 text-gray-300 mx-auto mb-3" />
|
||||
<p className="text-gray-500 text-lg font-medium mb-2">暂无获客计划</p>
|
||||
<p className="text-gray-400 text-sm">创建您的第一个获客计划，开始获取客户</p>
|
||||
</div>
|
||||
<>
|
||||
<PageHeader
|
||||
title={scenario.name}
|
||||
defaultBackPath="/scenarios"
|
||||
rightContent={
|
||||
<button
|
||||
onClick={handleCreateNewPlan}
|
||||
className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
|
||||
onClick={handleCreateNewPlan}
|
||||
className="flex items-center px-3 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors text-sm"
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
创建第一个计划
|
||||
<Plus className="h-4 w-4 mr-1" />
|
||||
新建计划
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
<div className="flex items-center space-x-2 m-4">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
|
||||
<Input
|
||||
placeholder="搜索计划名称"
|
||||
className="pl-9"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={handleRefresh}
|
||||
disabled={loadingTasks}
|
||||
>
|
||||
{loadingTasks ? (
|
||||
<RefreshCw className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div className="p-4">
|
||||
{/* 计划列表 */}
|
||||
<div className="rounded-lg">
|
||||
{filteredTasks.length === 0 ? (
|
||||
<div className="p-8 text-center">
|
||||
<div className="mb-4">
|
||||
<Users className="h-12 w-12 text-gray-300 mx-auto mb-3" />
|
||||
<p className="text-gray-500 text-lg font-medium mb-2">
|
||||
暂无获客计划
|
||||
</p>
|
||||
<p className="text-gray-400 text-sm">
|
||||
创建您的第一个获客计划，开始获取客户
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleCreateNewPlan}
|
||||
className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
创建第一个计划
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="divide-y">
|
||||
{tasks.map((task) => (
|
||||
<div key={task.id} className="p-4 hover:bg-gray-50">
|
||||
{filteredTasks.map((task) => (
|
||||
<div key={task.id} className="p-4 bg-white">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center mb-2">
|
||||
<h3 className="font-medium text-gray-900">{task.name}</h3>
|
||||
<span className={`ml-2 px-2 py-1 text-xs rounded-full ${getStatusColor(task.status)}`}>
|
||||
{getStatusText(task.status)}
|
||||
<h3 className="font-medium text-gray-900">
|
||||
{task.name}
|
||||
</h3>
|
||||
<span
|
||||
className={`ml-2 px-2 py-1 text-xs rounded-full ${getStatusColor(
|
||||
task.status
|
||||
)}`}
|
||||
>
|
||||
{getStatusText(task.status)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center text-sm text-gray-500">
|
||||
<Calendar className="h-4 w-4 mr-1" />
|
||||
<span>最后更新: {task.lastUpdated}</span>
|
||||
<span>最后更新: {task.lastUpdated}</span>
|
||||
</div>
|
||||
<div className="flex items-center mt-2 text-sm text-gray-500">
|
||||
<span>
|
||||
设备: {task.stats?.devices || 0} | 获客:{" "}
|
||||
{task.stats?.acquired || 0} | 添加:{" "}
|
||||
{task.stats?.added || 0}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center mt-2 text-sm text-gray-500">
|
||||
<span>设备: {task.stats?.devices || 0} | 获客: {task.stats?.acquired || 0} | 添加: {task.stats?.added || 0}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<button
|
||||
onClick={() => handleStatusChange(task.id, task.status === 1 ? 0 : 1)}
|
||||
className={`p-2 rounded-md ${
|
||||
task.status === 1
|
||||
? 'text-yellow-600 hover:bg-yellow-50'
|
||||
: 'text-green-600 hover:bg-green-50'
|
||||
}`}
|
||||
>
|
||||
{task.status === 1 ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => handleOpenApiSettings(task.id)}
|
||||
className="p-2 text-blue-600 hover:bg-blue-50 rounded-md"
|
||||
>
|
||||
<Settings className="h-4 w-4" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => handleCopyPlan(task.id)}
|
||||
className="p-2 text-gray-600 hover:bg-gray-50 rounded-md"
|
||||
>
|
||||
<Copy className="h-4 w-4" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => handleDeletePlan(task.id)}
|
||||
className="p-2 text-red-600 hover:bg-red-50 rounded-md"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</button>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<button
|
||||
onClick={() => navigate(`/scenarios/edit/${task.id}`)}
|
||||
className={`p-2 rounded-md ${
|
||||
task.status === 1
|
||||
? "text-yellow-600 hover:bg-yellow-50"
|
||||
: "text-green-600 hover:bg-green-50"
|
||||
}`}
|
||||
>
|
||||
<Edit className="h-4 w-4" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => handleOpenApiSettings(task.id)}
|
||||
className="p-2 text-blue-600 hover:bg-blue-50 rounded-md"
|
||||
>
|
||||
<Settings className="h-4 w-4" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => handleCopyPlan(task.id)}
|
||||
className="p-2 text-gray-600 hover:bg-gray-50 rounded-md"
|
||||
>
|
||||
<Copy className="h-4 w-4" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => handleDeletePlan(task.id)}
|
||||
className="p-2 text-red-600 hover:bg-red-50 rounded-md"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -498,8 +533,6 @@ export default function ScenarioDetail() {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* API接口设置对话框 */}
|
||||
{showApiDialog && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
|
||||
@@ -511,7 +544,9 @@ export default function ScenarioDetail() {
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold">计划接口配置</h3>
|
||||
<p className="text-gray-500 text-sm">通过API接口直接导入客资到该获客计划</p>
|
||||
<p className="text-gray-500 text-sm">
|
||||
通过API接口直接导入客资到该获客计划
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
@@ -527,7 +562,9 @@ export default function ScenarioDetail() {
|
||||
<div className="bg-gray-50 rounded-lg p-4">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h4 className="font-medium">API密钥</h4>
|
||||
<span className="px-2 py-1 bg-green-100 text-green-700 text-xs rounded">安全认证</span>
|
||||
<span className="px-2 py-1 bg-green-100 text-green-700 text-xs rounded">
|
||||
安全认证
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-3">
|
||||
<input
|
||||
@@ -539,8 +576,8 @@ export default function ScenarioDetail() {
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(currentApiSettings.apiKey);
|
||||
toast({
|
||||
title: '已复制',
|
||||
description: 'API密钥已复制到剪贴板',
|
||||
title: "已复制",
|
||||
description: "API密钥已复制到剪贴板",
|
||||
});
|
||||
}}
|
||||
className="px-3 py-2 border border-gray-300 rounded hover:bg-gray-50 transition-colors"
|
||||
@@ -551,7 +588,8 @@ export default function ScenarioDetail() {
|
||||
</div>
|
||||
<div className="mt-3 p-3 bg-amber-50 border border-amber-200 rounded-lg">
|
||||
<p className="text-sm text-amber-800">
|
||||
<strong>安全提示：</strong>请妥善保管API密钥，不要在客户端代码中暴露。建议在服务器端使用该密钥。
|
||||
<strong>安全提示：</strong>
|
||||
请妥善保管API密钥，不要在客户端代码中暴露。建议在服务器端使用该密钥。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -560,7 +598,9 @@ export default function ScenarioDetail() {
|
||||
<div className="bg-gray-50 rounded-lg p-4">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h4 className="font-medium">接口地址</h4>
|
||||
<span className="px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded">POST请求</span>
|
||||
<span className="px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded">
|
||||
POST请求
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-3">
|
||||
<input
|
||||
@@ -569,28 +609,47 @@ export default function ScenarioDetail() {
|
||||
className="flex-1 p-2 bg-white border rounded font-mono text-sm"
|
||||
/>
|
||||
<button
|
||||
onClick={() => handleCopyApiUrl(currentApiSettings.webhookUrl)}
|
||||
onClick={() =>
|
||||
handleCopyApiUrl(currentApiSettings.webhookUrl)
|
||||
}
|
||||
className="px-3 py-2 border border-gray-300 rounded hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<Copy className="h-4 w-4 mr-1" />
|
||||
复制
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
|
||||
<div className="bg-green-50 border border-green-200 rounded-lg p-3">
|
||||
<h5 className="font-medium text-green-800 mb-2">必要参数</h5>
|
||||
<h5 className="font-medium text-green-800 mb-2">
|
||||
必要参数
|
||||
</h5>
|
||||
<div className="space-y-1 text-sm text-green-700">
|
||||
<div><code className="bg-green-100 px-1 rounded">name</code> - 客户姓名</div>
|
||||
<div><code className="bg-green-100 px-1 rounded">phone</code> - 手机号码</div>
|
||||
<div>
|
||||
<code className="bg-green-100 px-1 rounded">name</code>{" "}
|
||||
- 客户姓名
|
||||
</div>
|
||||
<div>
|
||||
<code className="bg-green-100 px-1 rounded">phone</code>{" "}
|
||||
- 手机号码
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
|
||||
<h5 className="font-medium text-blue-800 mb-2">可选参数</h5>
|
||||
<div className="space-y-1 text-sm text-blue-700">
|
||||
<div><code className="bg-blue-100 px-1 rounded">source</code> - 来源标识</div>
|
||||
<div><code className="bg-blue-100 px-1 rounded">remark</code> - 备注信息</div>
|
||||
<div><code className="bg-blue-100 px-1 rounded">tags</code> - 客户标签</div>
|
||||
<div>
|
||||
<code className="bg-blue-100 px-1 rounded">source</code>{" "}
|
||||
- 来源标识
|
||||
</div>
|
||||
<div>
|
||||
<code className="bg-blue-100 px-1 rounded">remark</code>{" "}
|
||||
- 备注信息
|
||||
</div>
|
||||
<div>
|
||||
<code className="bg-blue-100 px-1 rounded">tags</code> -
|
||||
客户标签
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -601,4 +660,4 @@ export default function ScenarioDetail() {
|
||||
)}
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,11 +1,11 @@
|
||||
import React, { useEffect, useState, useMemo } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Plus, TrendingUp, Loader2 } from 'lucide-react';
|
||||
import UnifiedHeader from '@/components/UnifiedHeader';
|
||||
import Layout from '@/components/Layout';
|
||||
import BottomNav from '@/components/BottomNav';
|
||||
import { fetchScenes, type SceneItem } from '@/api/scenarios';
|
||||
import '@/components/Layout.css';
|
||||
import React, { useEffect, useState, useMemo } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Plus, TrendingUp, Loader2 } from "lucide-react";
|
||||
import UnifiedHeader from "@/components/UnifiedHeader";
|
||||
import Layout from "@/components/Layout";
|
||||
import BottomNav from "@/components/BottomNav";
|
||||
import { fetchScenes, type SceneItem } from "@/api/scenarios";
|
||||
import "@/components/Layout.css";
|
||||
|
||||
interface Scenario {
|
||||
id: string;
|
||||
@@ -21,45 +21,54 @@ export default function Scenarios() {
|
||||
const navigate = useNavigate();
|
||||
const [scenarios, setScenarios] = useState<Scenario[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState('');
|
||||
const [error, setError] = useState("");
|
||||
|
||||
// 场景描述映射
|
||||
const scenarioDescriptions: Record<string, string> = useMemo(() => ({
|
||||
douyin: '通过抖音平台进行精准获客',
|
||||
xiaohongshu: '利用小红书平台进行内容营销获客',
|
||||
gongzhonghao: '通过微信公众号进行获客',
|
||||
haibao: '通过海报分享进行获客',
|
||||
phone: '通过电话营销进行获客',
|
||||
weixinqun: '通过微信群进行获客',
|
||||
payment: '通过付款码进行获客',
|
||||
api: '通过API接口进行获客',
|
||||
}), []);
|
||||
const scenarioDescriptions: Record<string, string> = useMemo(
|
||||
() => ({
|
||||
douyin: "通过抖音平台进行精准获客",
|
||||
xiaohongshu: "利用小红书平台进行内容营销获客",
|
||||
gongzhonghao: "通过微信公众号进行获客",
|
||||
haibao: "通过海报分享进行获客",
|
||||
phone: "通过电话营销进行获客",
|
||||
weixinqun: "通过微信群进行获客",
|
||||
payment: "通过付款码进行获客",
|
||||
api: "通过API接口进行获客",
|
||||
}),
|
||||
[]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchScenarios = async () => {
|
||||
setLoading(true);
|
||||
setError('');
|
||||
|
||||
setError("");
|
||||
|
||||
try {
|
||||
const response = await fetchScenes({ page: 1, limit: 20 });
|
||||
|
||||
|
||||
if (response && response.code === 200 && response.data) {
|
||||
// 转换API数据为前端需要的格式
|
||||
const transformedScenarios: Scenario[] = response.data.map((item: SceneItem) => ({
|
||||
id: item.id.toString(),
|
||||
name: item.name,
|
||||
image: item.image|| 'https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-api.png',
|
||||
description: scenarioDescriptions[item.name.toLowerCase()] || '通过该平台进行获客',
|
||||
count: Math.floor(Math.random() * 200) + 50, // 模拟今日数据
|
||||
growth: `+${Math.floor(Math.random() * 20) + 5}%`, // 模拟增长率
|
||||
status: item.status === 1 ? 'active' : 'inactive',
|
||||
}));
|
||||
|
||||
const transformedScenarios: Scenario[] = response.data.map(
|
||||
(item: SceneItem) => ({
|
||||
id: item.id.toString(),
|
||||
name: item.name,
|
||||
image:
|
||||
item.image ||
|
||||
"https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-api.png",
|
||||
description:
|
||||
scenarioDescriptions[item.name.toLowerCase()] ||
|
||||
"通过该平台进行获客",
|
||||
count: Math.floor(Math.random() * 200) + 50, // 模拟今日数据
|
||||
growth: `+${Math.floor(Math.random() * 20) + 5}%`, // 模拟增长率
|
||||
status: item.status === 1 ? "active" : "inactive",
|
||||
})
|
||||
);
|
||||
|
||||
setScenarios(transformedScenarios);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取场景数据失败:', error);
|
||||
setError('获取场景数据失败，请稍后重试');
|
||||
console.error("获取场景数据失败:", error);
|
||||
setError("获取场景数据失败，请稍后重试");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
@@ -68,23 +77,20 @@ export default function Scenarios() {
|
||||
fetchScenarios();
|
||||
}, [scenarioDescriptions]);
|
||||
|
||||
const handleScenarioClick = (scenarioId: string,scenarioName:string) => {
|
||||
navigate(`/scenarios/${scenarioId}?name=${encodeURIComponent(scenarioName)}`);
|
||||
const handleScenarioClick = (scenarioId: string, scenarioName: string) => {
|
||||
navigate(
|
||||
`/scenarios/list/${scenarioId}/${encodeURIComponent(scenarioName)}`
|
||||
);
|
||||
};
|
||||
|
||||
const handleNewPlan = () => {
|
||||
navigate('/scenarios/new');
|
||||
navigate("/scenarios/new");
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Layout
|
||||
header={
|
||||
<UnifiedHeader
|
||||
title="场景获客"
|
||||
showBack={false}
|
||||
/>
|
||||
}
|
||||
header={<UnifiedHeader title="场景获客" showBack={false} />}
|
||||
footer={<BottomNav />}
|
||||
>
|
||||
<div className="bg-gray-50 min-h-screen flex items-center justify-center">
|
||||
@@ -100,18 +106,13 @@ export default function Scenarios() {
|
||||
if (error && scenarios.length === 0) {
|
||||
return (
|
||||
<Layout
|
||||
header={
|
||||
<UnifiedHeader
|
||||
title="场景获客"
|
||||
showBack={false}
|
||||
/>
|
||||
}
|
||||
header={<UnifiedHeader title="场景获客" showBack={false} />}
|
||||
footer={<BottomNav />}
|
||||
>
|
||||
<div className="bg-gray-50 min-h-screen flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<p className="text-red-500 mb-4">{error}</p>
|
||||
<button
|
||||
<button
|
||||
onClick={() => window.location.reload()}
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
@@ -132,10 +133,10 @@ export default function Scenarios() {
|
||||
titleColor="blue"
|
||||
actions={[
|
||||
{
|
||||
type: 'button',
|
||||
type: "button",
|
||||
icon: Plus,
|
||||
label: '新建计划',
|
||||
size: 'sm',
|
||||
label: "新建计划",
|
||||
size: "sm",
|
||||
onClick: handleNewPlan,
|
||||
},
|
||||
]}
|
||||
@@ -150,29 +151,34 @@ export default function Scenarios() {
|
||||
<p className="text-yellow-800 text-sm">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{scenarios.map((scenario) => (
|
||||
<div
|
||||
key={scenario.id}
|
||||
className="bg-white rounded-lg shadow overflow-hidden hover:shadow-md transition-shadow cursor-pointer"
|
||||
onClick={() => handleScenarioClick(scenario.id,scenario.name)}
|
||||
onClick={() => handleScenarioClick(scenario.id, scenario.name)}
|
||||
>
|
||||
<div className="p-4 flex flex-col items-center">
|
||||
<div className="w-12 h-12 bg-gray-200 rounded-full flex items-center justify-center mb-2">
|
||||
<img
|
||||
src={scenario.image}
|
||||
alt={scenario.name}
|
||||
<img
|
||||
src={scenario.image}
|
||||
alt={scenario.name}
|
||||
className="w-8 h-8"
|
||||
onError={(e) => {
|
||||
// 图片加载失败时使用默认图标
|
||||
e.currentTarget.src = 'https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-api.png';
|
||||
e.currentTarget.src =
|
||||
"https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-api.png";
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<h3 className="text-blue-600 font-medium text-center">{scenario.name}</h3>
|
||||
<h3 className="text-blue-600 font-medium text-center">
|
||||
{scenario.name}
|
||||
</h3>
|
||||
{scenario.description && (
|
||||
<p className="text-xs text-gray-500 text-center mt-1 line-clamp-2">{scenario.description}</p>
|
||||
<p className="text-xs text-gray-500 text-center mt-1 line-clamp-2">
|
||||
{scenario.description}
|
||||
</p>
|
||||
)}
|
||||
<div className="flex items-center mt-2 text-gray-500 text-sm">
|
||||
<span>今日: </span>
|
||||
@@ -190,4 +196,4 @@ export default function Scenarios() {
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,135 +1,246 @@
|
||||
import { useState, useEffect } from "react"
|
||||
import { useNavigate } from "react-router-dom"
|
||||
import { ChevronLeft, Settings } from "lucide-react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { toast } from "@/components/ui/use-toast"
|
||||
import { Steps, StepItem } from 'tdesign-mobile-react';
|
||||
import { BasicSettings } from "./steps/BasicSettings"
|
||||
import { FriendRequestSettings } from "./steps/FriendRequestSettings"
|
||||
import { MessageSettings } from "./steps/MessageSettings"
|
||||
import Layout from "@/components/Layout"
|
||||
import { getPlanScenes } from '@/api/scenarios';
|
||||
import { useState, useEffect } from "react";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import { ChevronLeft } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Toast } from "tdesign-mobile-react";
|
||||
import { Steps, StepItem } from "tdesign-mobile-react";
|
||||
import { BasicSettings } from "./steps/BasicSettings";
|
||||
import { FriendRequestSettings } from "./steps/FriendRequestSettings";
|
||||
import { MessageSettings } from "./steps/MessageSettings";
|
||||
import Layout from "@/components/Layout";
|
||||
import {
|
||||
getPlanScenes,
|
||||
createScenarioPlan,
|
||||
fetchPlanDetail,
|
||||
PlanDetail,
|
||||
updateScenarioPlan,
|
||||
} from "@/api/scenarios";
|
||||
|
||||
// 步骤定义 - 只保留三个步骤
|
||||
const steps = [
|
||||
{ id: 1, title: "步骤一", subtitle: "基础设置" },
|
||||
{ id: 2, title: "步骤二", subtitle: "好友申请设置" },
|
||||
{ id: 3, title: "步骤三", subtitle: "消息设置" },
|
||||
]
|
||||
];
|
||||
|
||||
// 类型定义
|
||||
interface FormData {
|
||||
name: string;
|
||||
scenario: number;
|
||||
posters: any[]; // 后续可替换为具体Poster类型
|
||||
device: string[];
|
||||
remarkType: string;
|
||||
greeting: string;
|
||||
addInterval: number;
|
||||
startTime: string;
|
||||
endTime: string;
|
||||
enabled: boolean;
|
||||
sceneId: string | number;
|
||||
remarkFormat: string;
|
||||
addFriendInterval: number;
|
||||
}
|
||||
|
||||
export default function NewPlan() {
|
||||
const router = useNavigate()
|
||||
const [currentStep, setCurrentStep] = useState(1)
|
||||
const [formData, setFormData] = useState({
|
||||
planName: "",
|
||||
scenario: "haibao",
|
||||
const router = useNavigate();
|
||||
const [currentStep, setCurrentStep] = useState(1);
|
||||
const [formData, setFormData] = useState<FormData>({
|
||||
name: "",
|
||||
scenario: 1,
|
||||
posters: [],
|
||||
device: "",
|
||||
device: [],
|
||||
remarkType: "phone",
|
||||
greeting: "你好，请通过",
|
||||
addInterval: 1,
|
||||
startTime: "09:00",
|
||||
endTime: "18:00",
|
||||
enabled: true,
|
||||
// 移除tags字段
|
||||
})
|
||||
sceneId: "",
|
||||
remarkFormat: "",
|
||||
addFriendInterval: 1,
|
||||
});
|
||||
const [sceneList, setSceneList] = useState<any[]>([]);
|
||||
const [sceneLoading, setSceneLoading] = useState(true);
|
||||
|
||||
const { scenarioId, planId } = useParams<{
|
||||
scenarioId: string;
|
||||
planId: string;
|
||||
}>();
|
||||
const [isEdit, setIsEdit] = useState(false);
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, []);
|
||||
|
||||
const loadData = async () => {
|
||||
setSceneLoading(true);
|
||||
//获取场景类型
|
||||
getPlanScenes()
|
||||
.then(res => {
|
||||
.then((res) => {
|
||||
setSceneList(res?.data || []);
|
||||
})
|
||||
.finally(() => setSceneLoading(false));
|
||||
}, []);
|
||||
if (planId) {
|
||||
setIsEdit(true);
|
||||
//获取计划详情
|
||||
const res = await fetchPlanDetail(planId);
|
||||
if (res.code === 200 && res.data) {
|
||||
const detail = res.data as PlanDetail;
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
name: detail.name ?? "",
|
||||
scenario: Number(detail.scenario) || 1,
|
||||
posters: detail.posters ?? [],
|
||||
device: detail.device ?? [],
|
||||
remarkType: detail.remarkType ?? "phone",
|
||||
greeting: detail.greeting ?? "",
|
||||
addInterval: detail.addInterval ?? 1,
|
||||
startTime: detail.startTime ?? "09:00",
|
||||
endTime: detail.endTime ?? "18:00",
|
||||
enabled: detail.enabled ?? true,
|
||||
sceneId: Number(detail.scenario) || 1,
|
||||
remarkFormat: detail.remarkFormat ?? "",
|
||||
addFriendInterval: detail.addFriendInterval ?? 1,
|
||||
}));
|
||||
}
|
||||
} else {
|
||||
if (scenarioId) {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
...{ scenario: Number(scenarioId) || 1 },
|
||||
}));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 更新表单数据
|
||||
const onChange = (data: any) => {
|
||||
setFormData((prev) => ({ ...prev, ...data }))
|
||||
}
|
||||
setFormData((prev) => ({ ...prev, ...data }));
|
||||
};
|
||||
|
||||
// 处理保存
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
// 这里应该是实际的API调用
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000))
|
||||
|
||||
toast({
|
||||
title: "创建成功",
|
||||
description: "获客计划已创建",
|
||||
})
|
||||
router("/plans")
|
||||
let result;
|
||||
if (isEdit && planId) {
|
||||
// 编辑：拼接后端需要的完整参数
|
||||
const editData = {
|
||||
...formData,
|
||||
id: Number(planId),
|
||||
planId: Number(planId),
|
||||
// 兼容后端需要的字段
|
||||
// 你可以根据实际需要补充其它字段
|
||||
};
|
||||
result = await updateScenarioPlan(planId, editData);
|
||||
} else {
|
||||
// 新建
|
||||
result = await createScenarioPlan(formData);
|
||||
}
|
||||
if (result.code === 200) {
|
||||
Toast({
|
||||
message: isEdit ? "计划已更新" : "获客计划已创建",
|
||||
theme: "success",
|
||||
});
|
||||
const sceneItem = sceneList.find((v) => formData.scenario === v.id);
|
||||
router(`/scenarios/list/${formData.sceneId}/${sceneItem.name}`);
|
||||
} else {
|
||||
Toast({ message: result.msg, theme: "error" });
|
||||
}
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: "创建失败",
|
||||
description: "创建计划失败，请重试",
|
||||
variant: "destructive",
|
||||
})
|
||||
Toast({
|
||||
message:
|
||||
error instanceof Error
|
||||
? error.message
|
||||
: typeof error === "string"
|
||||
? error
|
||||
: isEdit
|
||||
? "更新计划失败，请重试"
|
||||
: "创建计划失败，请重试",
|
||||
theme: "error",
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 下一步
|
||||
const handleNext = () => {
|
||||
if (currentStep === steps.length) {
|
||||
handleSave()
|
||||
handleSave();
|
||||
} else {
|
||||
setCurrentStep((prev) => prev + 1)
|
||||
setCurrentStep((prev) => prev + 1);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 上一步
|
||||
const handlePrev = () => {
|
||||
setCurrentStep((prev) => Math.max(prev - 1, 1))
|
||||
}
|
||||
setCurrentStep((prev) => Math.max(prev - 1, 1));
|
||||
};
|
||||
|
||||
// 渲染当前步骤内容
|
||||
const renderStepContent = () => {
|
||||
switch (currentStep) {
|
||||
case 1:
|
||||
return <BasicSettings formData={formData} onChange={onChange} onNext={handleNext} sceneList={sceneList} sceneLoading={sceneLoading} />
|
||||
return (
|
||||
<BasicSettings
|
||||
formData={formData}
|
||||
onChange={onChange}
|
||||
onNext={handleNext}
|
||||
sceneList={sceneList}
|
||||
sceneLoading={sceneLoading}
|
||||
/>
|
||||
);
|
||||
case 2:
|
||||
return <FriendRequestSettings formData={formData} onChange={onChange} onNext={handleNext} onPrev={handlePrev} />
|
||||
return (
|
||||
<FriendRequestSettings
|
||||
formData={formData}
|
||||
onChange={onChange}
|
||||
onNext={handleNext}
|
||||
onPrev={handlePrev}
|
||||
/>
|
||||
);
|
||||
case 3:
|
||||
return <MessageSettings formData={formData} onChange={onChange} onNext={handleSave} onPrev={handlePrev} />
|
||||
return (
|
||||
<MessageSettings
|
||||
formData={formData}
|
||||
onChange={onChange}
|
||||
onNext={handleSave}
|
||||
onPrev={handlePrev}
|
||||
/>
|
||||
);
|
||||
default:
|
||||
return null
|
||||
return null;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Layout
|
||||
header={
|
||||
<>
|
||||
<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("/scenarios")}
|
||||
>
|
||||
<ChevronLeft className="h-5 w-5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<Layout header={
|
||||
<>
|
||||
<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("/plans")}>
|
||||
<ChevronLeft className="h-5 w-5" />
|
||||
</Button>
|
||||
|
||||
<div className="px-4 py-6">
|
||||
<Steps current={currentStep - 1}>
|
||||
{steps.map((step) => (
|
||||
<StepItem
|
||||
key={step.id}
|
||||
title={step.title}
|
||||
content={step.subtitle}
|
||||
/>
|
||||
))}
|
||||
</Steps>
|
||||
</div>
|
||||
<Button variant="ghost" size="icon">
|
||||
<Settings className="h-5 w-5" />
|
||||
</Button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="px-4 py-6">
|
||||
<Steps current={currentStep - 1}>
|
||||
{steps.map((step) => (
|
||||
<StepItem key={step.id} title={step.title} content={step.subtitle} />
|
||||
))}
|
||||
</Steps>
|
||||
</div>
|
||||
</>
|
||||
}>
|
||||
|
||||
<div className="p-4">
|
||||
{renderStepContent()}
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div className="p-4">{renderStepContent()}</div>
|
||||
</Layout>
|
||||
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -5,167 +5,11 @@ import {
|
||||
Input,
|
||||
Tag,
|
||||
Grid,
|
||||
Dialog,
|
||||
ImageViewer,
|
||||
Table,
|
||||
Switch,
|
||||
} from "tdesign-mobile-react";
|
||||
import EyeIcon from "@/components/icons/EyeIcon";
|
||||
import UploadImage from "@/components/UploadImage";
|
||||
|
||||
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" },
|
||||
];
|
||||
|
||||
// 不同场景的预设标签
|
||||
const scenarioTags = {
|
||||
haibao: [
|
||||
{
|
||||
id: "poster-tag-1",
|
||||
name: "活动推广",
|
||||
color: "bg-blue-100 text-blue-800",
|
||||
},
|
||||
{
|
||||
id: "poster-tag-2",
|
||||
name: "产品宣传",
|
||||
color: "bg-green-100 text-green-800",
|
||||
},
|
||||
{
|
||||
id: "poster-tag-3",
|
||||
name: "品牌展示",
|
||||
color: "bg-purple-100 text-purple-800",
|
||||
},
|
||||
{ id: "poster-tag-4", name: "优惠促销", color: "bg-red-100 text-red-800" },
|
||||
{
|
||||
id: "poster-tag-5",
|
||||
name: "新品发布",
|
||||
color: "bg-orange-100 text-orange-800",
|
||||
},
|
||||
],
|
||||
order: [
|
||||
{ id: "order-tag-1", name: "新订单", color: "bg-green-100 text-green-800" },
|
||||
{ id: "order-tag-2", name: "复购客户", color: "bg-blue-100 text-blue-800" },
|
||||
{
|
||||
id: "order-tag-3",
|
||||
name: "高价值订单",
|
||||
color: "bg-purple-100 text-purple-800",
|
||||
},
|
||||
{
|
||||
id: "order-tag-4",
|
||||
name: "待付款",
|
||||
color: "bg-yellow-100 text-yellow-800",
|
||||
},
|
||||
{ id: "order-tag-5", name: "已完成", color: "bg-gray-100 text-gray-800" },
|
||||
],
|
||||
douyin: [
|
||||
{ id: "douyin-tag-1", name: "短视频", color: "bg-pink-100 text-pink-800" },
|
||||
{ id: "douyin-tag-2", name: "直播", color: "bg-red-100 text-red-800" },
|
||||
{
|
||||
id: "douyin-tag-3",
|
||||
name: "带货",
|
||||
color: "bg-orange-100 text-orange-800",
|
||||
},
|
||||
{
|
||||
id: "douyin-tag-4",
|
||||
name: "粉丝互动",
|
||||
color: "bg-blue-100 text-blue-800",
|
||||
},
|
||||
{
|
||||
id: "douyin-tag-5",
|
||||
name: "热门话题",
|
||||
color: "bg-purple-100 text-purple-800",
|
||||
},
|
||||
],
|
||||
xiaohongshu: [
|
||||
{ id: "xhs-tag-1", name: "种草笔记", color: "bg-red-100 text-red-800" },
|
||||
{ id: "xhs-tag-2", name: "美妆", color: "bg-pink-100 text-pink-800" },
|
||||
{ id: "xhs-tag-3", name: "穿搭", color: "bg-purple-100 text-purple-800" },
|
||||
{ id: "xhs-tag-4", name: "生活方式", color: "bg-green-100 text-green-800" },
|
||||
{
|
||||
id: "xhs-tag-5",
|
||||
name: "好物推荐",
|
||||
color: "bg-orange-100 text-orange-800",
|
||||
},
|
||||
],
|
||||
phone: phoneCallTags,
|
||||
gongzhonghao: [
|
||||
{ id: "gzh-tag-1", name: "文章推送", color: "bg-blue-100 text-blue-800" },
|
||||
{ id: "gzh-tag-2", name: "活动通知", color: "bg-green-100 text-green-800" },
|
||||
{
|
||||
id: "gzh-tag-3",
|
||||
name: "产品介绍",
|
||||
color: "bg-purple-100 text-purple-800",
|
||||
},
|
||||
{
|
||||
id: "gzh-tag-4",
|
||||
name: "用户服务",
|
||||
color: "bg-orange-100 text-orange-800",
|
||||
},
|
||||
{ id: "gzh-tag-5", name: "品牌故事", color: "bg-gray-100 text-gray-800" },
|
||||
],
|
||||
weixinqun: [
|
||||
{ id: "wxq-tag-1", name: "群活动", color: "bg-green-100 text-green-800" },
|
||||
{ id: "wxq-tag-2", name: "产品分享", color: "bg-blue-100 text-blue-800" },
|
||||
{
|
||||
id: "wxq-tag-3",
|
||||
name: "用户交流",
|
||||
color: "bg-purple-100 text-purple-800",
|
||||
},
|
||||
{ id: "wxq-tag-4", name: "优惠信息", color: "bg-pink-100 text-pink-800" },
|
||||
{
|
||||
id: "wxq-tag-5",
|
||||
name: "答疑解惑",
|
||||
color: "bg-orange-100 text-orange-800",
|
||||
},
|
||||
{
|
||||
id: "wxq-tag-6",
|
||||
name: "新人欢迎",
|
||||
color: "bg-yellow-100 text-yellow-800",
|
||||
},
|
||||
{ id: "wxq-tag-7", name: "群规通知", color: "bg-gray-100 text-gray-800" },
|
||||
{
|
||||
id: "wxq-tag-8",
|
||||
name: "活跃互动",
|
||||
color: "bg-indigo-100 text-indigo-800",
|
||||
},
|
||||
],
|
||||
payment: [
|
||||
{ id: "pay-tag-1", name: "扫码支付", color: "bg-green-100 text-green-800" },
|
||||
{ id: "pay-tag-2", name: "线下门店", color: "bg-blue-100 text-blue-800" },
|
||||
{
|
||||
id: "pay-tag-3",
|
||||
name: "活动收款",
|
||||
color: "bg-purple-100 text-purple-800",
|
||||
},
|
||||
{
|
||||
id: "pay-tag-4",
|
||||
name: "服务费用",
|
||||
color: "bg-orange-100 text-orange-800",
|
||||
},
|
||||
{
|
||||
id: "pay-tag-5",
|
||||
name: "会员充值",
|
||||
color: "bg-yellow-100 text-yellow-800",
|
||||
},
|
||||
],
|
||||
api: [
|
||||
{ id: "api-tag-1", name: "系统对接", color: "bg-blue-100 text-blue-800" },
|
||||
{ id: "api-tag-2", name: "数据同步", color: "bg-green-100 text-green-800" },
|
||||
{ id: "api-tag-3", name: "自动化", color: "bg-purple-100 text-purple-800" },
|
||||
{
|
||||
id: "api-tag-4",
|
||||
name: "第三方平台",
|
||||
color: "bg-orange-100 text-orange-800",
|
||||
},
|
||||
{ id: "api-tag-5", name: "实时推送", color: "bg-gray-100 text-gray-800" },
|
||||
],
|
||||
};
|
||||
import { uploadFile } from "@/api/utils";
|
||||
|
||||
interface BasicSettingsProps {
|
||||
formData: any;
|
||||
@@ -334,12 +178,18 @@ export function BasicSettings({
|
||||
onChange({ ...formData, scenario: "haibao" });
|
||||
}
|
||||
|
||||
if (!formData.planName) {
|
||||
const today = new Date().toLocaleDateString("zh-CN").replace(/\//g, "");
|
||||
onChange({ ...formData, planName: `海报${today}` });
|
||||
// 检查是否已经有上传的订单文件
|
||||
if (formData.orderFileUploaded) {
|
||||
setOrderUploaded(true);
|
||||
}
|
||||
}, [formData, onChange]);
|
||||
|
||||
useEffect(() => {
|
||||
const today = new Date().toLocaleDateString("zh-CN").replace(/\//g, "");
|
||||
const sceneItem = sceneList.find((v) => formData.scenario === v.id);
|
||||
onChange({ ...formData, name: `${sceneItem?.name || "海报"}${today}` });
|
||||
}, [sceneList]);
|
||||
|
||||
// 选中场景
|
||||
const handleScenarioSelect = (sceneId: number) => {
|
||||
onChange({ ...formData, scenario: sceneId });
|
||||
@@ -500,6 +350,28 @@ export function BasicSettings({
|
||||
window.URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
// 修改订单表格上传逻辑，使用 uploadFile 公共方法
|
||||
const [orderUploaded, setOrderUploaded] = useState(false);
|
||||
|
||||
const handleOrderFileUpload = async (
|
||||
event: React.ChangeEvent<HTMLInputElement>
|
||||
) => {
|
||||
const file = event.target.files?.[0];
|
||||
if (file) {
|
||||
try {
|
||||
await uploadFile(file); // 默认接口即可
|
||||
setOrderUploaded(true);
|
||||
onChange({ ...formData, orderFileUploaded: true });
|
||||
// 可用 toast 或其它方式提示成功
|
||||
// alert('上传成功');
|
||||
} catch (err) {
|
||||
// 可用 toast 或其它方式提示失败
|
||||
// alert('上传失败');
|
||||
}
|
||||
event.target.value = "";
|
||||
}
|
||||
};
|
||||
|
||||
// 账号弹窗关闭时清理搜索等状态
|
||||
const handleAccountDialogClose = () => {
|
||||
setIsAccountDialogOpen(false);
|
||||
@@ -559,9 +431,9 @@ export function BasicSettings({
|
||||
<input
|
||||
className="w-full"
|
||||
type="text"
|
||||
value={formData.planName}
|
||||
value={formData.name}
|
||||
onChange={(e) =>
|
||||
onChange({ ...formData, planName: String(e.target.value) })
|
||||
onChange({ ...formData, name: String(e.target.value) })
|
||||
}
|
||||
placeholder="请输入计划名称"
|
||||
/>
|
||||
@@ -816,41 +688,35 @@ export function BasicSettings({
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
style={{ display: "flex", alignItems: "center", gap: 4 }}
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 4,
|
||||
...(orderUploaded && {
|
||||
backgroundColor: "#52c41a",
|
||||
color: "#fff",
|
||||
borderColor: "#52c41a",
|
||||
}),
|
||||
}}
|
||||
theme="default"
|
||||
onClick={() => uploadOrderInputRef.current?.click()}
|
||||
>
|
||||
<span className="iconfont" style={{ fontSize: 18 }}>
|
||||
↑
|
||||
{orderUploaded ? "✓" : "↑"}
|
||||
</span>{" "}
|
||||
上传订单表格
|
||||
{orderUploaded ? "已上传" : "上传订单表格"}
|
||||
<input
|
||||
ref={uploadOrderInputRef}
|
||||
type="file"
|
||||
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
|
||||
style={{ display: "none" }}
|
||||
onChange={handleFileImport}
|
||||
onChange={handleOrderFileUpload}
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
<div style={{ color: "#888", fontSize: 13, marginBottom: 8 }}>
|
||||
支持 CSV、Excel 格式，上传后将文件保存到服务器
|
||||
</div>
|
||||
{/* 已导入数据表格可复用原有Table渲染 */}
|
||||
{importedTags.length > 0 && (
|
||||
<Table
|
||||
columns={[
|
||||
{ colKey: "phone", title: "手机号" },
|
||||
{ colKey: "wechat", title: "微信号" },
|
||||
{ colKey: "source", title: "来源" },
|
||||
{ colKey: "orderAmount", title: "订单金额" },
|
||||
{ colKey: "orderDate", title: "下单日期" },
|
||||
]}
|
||||
data={importedTags}
|
||||
rowKey="phone"
|
||||
style={{ marginTop: 12 }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{/* 电话获客设置区块，仅在选择电话获客场景时显示 */}
|
||||
{formData.scenario === 5 && (
|
||||
@@ -940,6 +806,21 @@ export function BasicSettings({
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
margin: "16px 0",
|
||||
}}
|
||||
>
|
||||
<span>是否启用</span>
|
||||
<Switch
|
||||
value={formData.enabled}
|
||||
onChange={(value) => onChange({ ...formData, enabled: value })}
|
||||
/>
|
||||
</div>
|
||||
<Button className="mt-4" block theme="primary" onClick={onNext}>
|
||||
下一步
|
||||
</Button>
|
||||
|
||||
@@ -1,23 +1,28 @@
|
||||
"use client"
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react"
|
||||
import { Card } from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { HelpCircle, MessageSquare, AlertCircle } from "lucide-react"
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert"
|
||||
import { ChevronsUpDown } from "lucide-react"
|
||||
import { Checkbox } from "@/components/ui/checkbox"
|
||||
import { useState, useEffect } from "react";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
|
||||
import { HelpCircle, MessageSquare, AlertCircle } from "lucide-react";
|
||||
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
import { ChevronsUpDown } from "lucide-react";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import DeviceSelection from "@/components/DeviceSelection";
|
||||
|
||||
interface FriendRequestSettingsProps {
|
||||
formData: any
|
||||
onChange: (data: any) => void
|
||||
onNext: () => void
|
||||
onPrev: () => void
|
||||
formData: any;
|
||||
onChange: (data: any) => void;
|
||||
onNext: () => void;
|
||||
onPrev: () => void;
|
||||
}
|
||||
|
||||
// 招呼语模板
|
||||
@@ -27,45 +32,43 @@ const greetingTemplates = [
|
||||
"你好，我是XX产品的客服请通过",
|
||||
"你好，感谢关注我们的产品",
|
||||
"你好，很高兴为您服务",
|
||||
]
|
||||
];
|
||||
|
||||
// 备注类型选项
|
||||
const remarkTypes = [
|
||||
{ value: "phone", label: "手机号" },
|
||||
{ value: "nickname", label: "昵称" },
|
||||
{ value: "source", label: "来源" },
|
||||
]
|
||||
];
|
||||
|
||||
// 模拟设备数据
|
||||
const mockDevices = [
|
||||
{ id: "1", name: "iPhone 13 Pro", status: "online" },
|
||||
{ id: "2", name: "Xiaomi 12", status: "online" },
|
||||
{ id: "3", name: "Huawei P40", status: "offline" },
|
||||
{ id: "4", name: "OPPO Find X3", status: "online" },
|
||||
{ id: "5", name: "Samsung S21", status: "online" },
|
||||
]
|
||||
|
||||
export function FriendRequestSettings({ formData, onChange, onNext, onPrev }: FriendRequestSettingsProps) {
|
||||
const [isTemplateDialogOpen, setIsTemplateDialogOpen] = useState(false)
|
||||
const [hasWarnings, setHasWarnings] = useState(false)
|
||||
const [isDeviceSelectorOpen, setIsDeviceSelectorOpen] = useState(false)
|
||||
const [selectedDevices, setSelectedDevices] = useState<any[]>(formData.selectedDevices || [])
|
||||
export function FriendRequestSettings({
|
||||
formData,
|
||||
onChange,
|
||||
onNext,
|
||||
onPrev,
|
||||
}: FriendRequestSettingsProps) {
|
||||
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 "抖音直播"
|
||||
return "抖音直播";
|
||||
case "xiaohongshu":
|
||||
return "小红书"
|
||||
return "小红书";
|
||||
case "weixinqun":
|
||||
return "微信群"
|
||||
return "微信群";
|
||||
case "gongzhonghao":
|
||||
return "公众号"
|
||||
return "公众号";
|
||||
default:
|
||||
return formData.planName || "获客计划"
|
||||
return formData.name || "获客计划";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 使用useEffect设置默认值
|
||||
useEffect(() => {
|
||||
@@ -76,172 +79,158 @@ export function FriendRequestSettings({ formData, onChange, onNext, onPrev }: Fr
|
||||
remarkType: "phone", // 默认选择手机号
|
||||
remarkFormat: `手机号+${getScenarioTitle()}`, // 默认备注格式
|
||||
addFriendInterval: 1,
|
||||
})
|
||||
});
|
||||
}
|
||||
}, [formData, formData.greeting, onChange])
|
||||
}, [formData, formData.greeting, onChange]);
|
||||
|
||||
// 检查是否有未完成的必填项
|
||||
useEffect(() => {
|
||||
const hasIncompleteFields = !formData.greeting?.trim()
|
||||
setHasWarnings(hasIncompleteFields)
|
||||
}, [formData])
|
||||
const hasIncompleteFields = !formData.greeting?.trim();
|
||||
setHasWarnings(hasIncompleteFields);
|
||||
}, [formData]);
|
||||
|
||||
const handleTemplateSelect = (template: string) => {
|
||||
onChange({ ...formData, greeting: template })
|
||||
setIsTemplateDialogOpen(false)
|
||||
}
|
||||
onChange({ ...formData, greeting: template });
|
||||
setIsTemplateDialogOpen(false);
|
||||
};
|
||||
|
||||
const handleNext = () => {
|
||||
// 即使有警告也允许进入下一步，但会显示提示
|
||||
onNext()
|
||||
}
|
||||
|
||||
const toggleDeviceSelection = (device: any) => {
|
||||
const isSelected = selectedDevices.some((d) => d.id === device.id)
|
||||
let newSelectedDevices
|
||||
|
||||
if (isSelected) {
|
||||
newSelectedDevices = selectedDevices.filter((d) => d.id !== device.id)
|
||||
} else {
|
||||
newSelectedDevices = [...selectedDevices, device]
|
||||
}
|
||||
|
||||
setSelectedDevices(newSelectedDevices)
|
||||
onChange({ ...formData, selectedDevices: newSelectedDevices })
|
||||
}
|
||||
onNext();
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="p-6">
|
||||
<>
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<Label className="text-base">选择设备</Label>
|
||||
<div className="relative mt-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full justify-between"
|
||||
onClick={() => setIsDeviceSelectorOpen(!isDeviceSelectorOpen)}
|
||||
>
|
||||
{selectedDevices.length ? `已选择 ${selectedDevices.length} 个设备` : "选择设备"}
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
<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>
|
||||
|
||||
{isDeviceSelectorOpen && (
|
||||
<div className="absolute z-10 w-full mt-1 bg-white border rounded-md shadow-lg">
|
||||
<div className="p-2">
|
||||
<Input placeholder="搜索设备..." className="mb-2" />
|
||||
<div className="max-h-60 overflow-auto">
|
||||
{mockDevices.map((device) => (
|
||||
<div
|
||||
key={device.id}
|
||||
className="flex items-center justify-between p-2 hover:bg-gray-100 cursor-pointer"
|
||||
onClick={() => toggleDeviceSelection(device)}
|
||||
>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
checked={selectedDevices.some((d) => d.id === device.id)}
|
||||
onCheckedChange={() => toggleDeviceSelection(device)}
|
||||
/>
|
||||
<span>{device.name}</span>
|
||||
</div>
|
||||
<span className={`text-xs ${device.status === "online" ? "text-green-500" : "text-gray-400"}`}>
|
||||
{device.status === "online" ? "在线" : "离线"}
|
||||
</span>
|
||||
</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>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Label className="text-base">好友备注</Label>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
<HelpCircle className="h-4 w-4 text-gray-400" />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>设置添加好友时的备注格式</p>
|
||||
<p className="mt-1">备注格式预览：</p>
|
||||
<p>{formData.remarkType === "phone" && `138****1234+${getScenarioTitle()}`}</p>
|
||||
<p>{formData.remarkType === "nickname" && `小红书用户2851+${getScenarioTitle()}`}</p>
|
||||
<p>{formData.remarkType === "source" && `抖音直播+${getScenarioTitle()}`}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
<Select
|
||||
<select
|
||||
value={formData.remarkType || "phone"}
|
||||
onValueChange={(value) => onChange({ ...formData, remarkType: value })}
|
||||
onChange={(e) =>
|
||||
onChange({ ...formData, remarkType: e.target.value })
|
||||
}
|
||||
className="w-full mt-2 p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
>
|
||||
<SelectTrigger className="w-full mt-2">
|
||||
<SelectValue placeholder="选择备注类型" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{remarkTypes.map((type) => (
|
||||
<SelectItem key={type.value} value={type.value}>
|
||||
{type.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{remarkTypes.map((type) => (
|
||||
<option key={type.value} value={type.value}>
|
||||
{type.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex items-center justify-between">
|
||||
<Label className="text-base">招呼语</Label>
|
||||
<Button variant="ghost" size="sm" onClick={() => setIsTemplateDialogOpen(true)} className="text-blue-500">
|
||||
<span className="font-medium text-base">招呼语</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setIsTemplateDialogOpen(true)}
|
||||
className="text-blue-500"
|
||||
>
|
||||
<MessageSquare className="h-4 w-4 mr-2" />
|
||||
参考模板
|
||||
</Button>
|
||||
</div>
|
||||
<Input
|
||||
value={formData.greeting}
|
||||
onChange={(e) => onChange({ ...formData, greeting: e.target.value })}
|
||||
onChange={(e) =>
|
||||
onChange({ ...formData, greeting: e.target.value })
|
||||
}
|
||||
placeholder="请输入招呼语"
|
||||
className="mt-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className="text-base">添加间隔</Label>
|
||||
<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) })}
|
||||
className="w-32"
|
||||
onChange={(e) =>
|
||||
onChange({
|
||||
...formData,
|
||||
addFriendInterval: Number(e.target.value),
|
||||
})
|
||||
}
|
||||
/>
|
||||
<span>分钟</span>
|
||||
<div className="w-10">分钟</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className="text-base">允许加人的时间段</Label>
|
||||
<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 })}
|
||||
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 })}
|
||||
onChange={(e) =>
|
||||
onChange({ ...formData, addFriendTimeEnd: e.target.value })
|
||||
}
|
||||
className="w-32"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{hasWarnings && (
|
||||
<Alert className="bg-amber-50 border-amber-200">
|
||||
<Alert className="bg-amber-50 border-amber-200">
|
||||
<AlertCircle className="h-4 w-4 text-amber-500" />
|
||||
<AlertDescription>您有未完成的设置项，建议完善后再进入下一步。</AlertDescription>
|
||||
<AlertDescription>
|
||||
您有未完成的设置项，建议完善后再进入下一步。
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
@@ -253,8 +242,11 @@ export function FriendRequestSettings({ formData, onChange, onNext, onPrev }: Fr
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Dialog open={isTemplateDialogOpen} onOpenChange={setIsTemplateDialogOpen}>
|
||||
<DialogContent>
|
||||
<Dialog
|
||||
open={isTemplateDialogOpen}
|
||||
onOpenChange={setIsTemplateDialogOpen}
|
||||
>
|
||||
<DialogContent className="bg-white">
|
||||
<DialogHeader>
|
||||
<DialogTitle>招呼语模板</DialogTitle>
|
||||
</DialogHeader>
|
||||
@@ -272,6 +264,6 @@ export function FriendRequestSettings({ formData, onChange, onNext, onPrev }: Fr
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</Card>
|
||||
)
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
import { useState } from "react"
|
||||
import { Card } from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
import { useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import {
|
||||
MessageSquare,
|
||||
ImageIcon,
|
||||
@@ -16,40 +14,46 @@ import {
|
||||
X,
|
||||
Upload,
|
||||
Clock,
|
||||
} from "lucide-react"
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||||
import { toast } from "@/components/ui/use-toast"
|
||||
} from "lucide-react";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogFooter,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { toast } from "@/components/ui/use-toast";
|
||||
|
||||
interface MessageContent {
|
||||
id: string
|
||||
type: "text" | "image" | "video" | "file" | "miniprogram" | "link" | "group"
|
||||
content: string
|
||||
sendInterval?: number
|
||||
intervalUnit?: "seconds" | "minutes"
|
||||
id: string;
|
||||
type: "text" | "image" | "video" | "file" | "miniprogram" | "link" | "group";
|
||||
content: string;
|
||||
sendInterval?: number;
|
||||
intervalUnit?: "seconds" | "minutes";
|
||||
scheduledTime?: {
|
||||
hour: number
|
||||
minute: number
|
||||
second: number
|
||||
}
|
||||
title?: string
|
||||
description?: string
|
||||
address?: string
|
||||
coverImage?: string
|
||||
groupId?: string
|
||||
linkUrl?: string
|
||||
hour: number;
|
||||
minute: number;
|
||||
second: number;
|
||||
};
|
||||
title?: string;
|
||||
description?: string;
|
||||
address?: string;
|
||||
coverImage?: string;
|
||||
groupId?: string;
|
||||
linkUrl?: string;
|
||||
}
|
||||
|
||||
interface DayPlan {
|
||||
day: number
|
||||
messages: MessageContent[]
|
||||
day: number;
|
||||
messages: MessageContent[];
|
||||
}
|
||||
|
||||
interface MessageSettingsProps {
|
||||
formData: any
|
||||
onChange: (data: any) => void
|
||||
onNext: () => void
|
||||
onPrev: () => void
|
||||
formData: any;
|
||||
onChange: (data: any) => void;
|
||||
onNext: () => void;
|
||||
onPrev: () => void;
|
||||
}
|
||||
|
||||
// 消息类型配置
|
||||
@@ -61,16 +65,21 @@ const messageTypes = [
|
||||
{ id: "miniprogram", icon: Window, label: "小程序" },
|
||||
{ id: "link", icon: Link2, label: "链接" },
|
||||
{ id: "group", icon: Users, label: "邀请入群" },
|
||||
]
|
||||
];
|
||||
|
||||
// 模拟群组数据
|
||||
const mockGroups = [
|
||||
{ id: "1", name: "产品交流群1", memberCount: 156 },
|
||||
{ id: "2", name: "产品交流群2", memberCount: 234 },
|
||||
{ id: "3", name: "产品交流群3", memberCount: 89 },
|
||||
]
|
||||
];
|
||||
|
||||
export function MessageSettings({ formData, onChange, onNext, onPrev }: MessageSettingsProps) {
|
||||
export function MessageSettings({
|
||||
formData,
|
||||
onChange,
|
||||
onNext,
|
||||
onPrev,
|
||||
}: MessageSettingsProps) {
|
||||
const [dayPlans, setDayPlans] = useState<DayPlan[]>([
|
||||
{
|
||||
day: 0,
|
||||
@@ -84,67 +93,71 @@ export function MessageSettings({ formData, onChange, onNext, onPrev }: MessageS
|
||||
},
|
||||
],
|
||||
},
|
||||
])
|
||||
const [isAddDayPlanOpen, setIsAddDayPlanOpen] = useState(false)
|
||||
const [isGroupSelectOpen, setIsGroupSelectOpen] = useState(false)
|
||||
const [selectedGroupId, setSelectedGroupId] = useState("")
|
||||
]);
|
||||
const [isAddDayPlanOpen, setIsAddDayPlanOpen] = useState(false);
|
||||
const [isGroupSelectOpen, setIsGroupSelectOpen] = useState(false);
|
||||
const [selectedGroupId, setSelectedGroupId] = useState("");
|
||||
|
||||
// 添加新消息
|
||||
const handleAddMessage = (dayIndex: number, type = "text") => {
|
||||
const updatedPlans = [...dayPlans]
|
||||
const updatedPlans = [...dayPlans];
|
||||
const newMessage: MessageContent = {
|
||||
id: Date.now().toString(),
|
||||
type: type as MessageContent["type"],
|
||||
content: "",
|
||||
}
|
||||
};
|
||||
|
||||
if (dayPlans[dayIndex].day === 0) {
|
||||
// 即时消息使用间隔设置
|
||||
newMessage.sendInterval = 5
|
||||
newMessage.intervalUnit = "seconds" // 默认改为秒
|
||||
newMessage.sendInterval = 5;
|
||||
newMessage.intervalUnit = "seconds"; // 默认改为秒
|
||||
} else {
|
||||
// 非即时消息使用具体时间设置
|
||||
newMessage.scheduledTime = {
|
||||
hour: 9,
|
||||
minute: 0,
|
||||
second: 0,
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
updatedPlans[dayIndex].messages.push(newMessage)
|
||||
setDayPlans(updatedPlans)
|
||||
onChange({ ...formData, messagePlans: updatedPlans })
|
||||
}
|
||||
updatedPlans[dayIndex].messages.push(newMessage);
|
||||
setDayPlans(updatedPlans);
|
||||
onChange({ ...formData, messagePlans: updatedPlans });
|
||||
};
|
||||
|
||||
// 更新消息内容
|
||||
const handleUpdateMessage = (dayIndex: number, messageIndex: number, updates: Partial<MessageContent>) => {
|
||||
const updatedPlans = [...dayPlans]
|
||||
const handleUpdateMessage = (
|
||||
dayIndex: number,
|
||||
messageIndex: number,
|
||||
updates: Partial<MessageContent>
|
||||
) => {
|
||||
const updatedPlans = [...dayPlans];
|
||||
updatedPlans[dayIndex].messages[messageIndex] = {
|
||||
...updatedPlans[dayIndex].messages[messageIndex],
|
||||
...updates,
|
||||
}
|
||||
setDayPlans(updatedPlans)
|
||||
onChange({ ...formData, messagePlans: updatedPlans })
|
||||
}
|
||||
};
|
||||
setDayPlans(updatedPlans);
|
||||
onChange({ ...formData, messagePlans: updatedPlans });
|
||||
};
|
||||
|
||||
// 删除消息
|
||||
const handleRemoveMessage = (dayIndex: number, messageIndex: number) => {
|
||||
const updatedPlans = [...dayPlans]
|
||||
updatedPlans[dayIndex].messages.splice(messageIndex, 1)
|
||||
setDayPlans(updatedPlans)
|
||||
onChange({ ...formData, messagePlans: updatedPlans })
|
||||
}
|
||||
const updatedPlans = [...dayPlans];
|
||||
updatedPlans[dayIndex].messages.splice(messageIndex, 1);
|
||||
setDayPlans(updatedPlans);
|
||||
onChange({ ...formData, messagePlans: updatedPlans });
|
||||
};
|
||||
|
||||
// 切换时间单位
|
||||
const toggleIntervalUnit = (dayIndex: number, messageIndex: number) => {
|
||||
const message = dayPlans[dayIndex].messages[messageIndex]
|
||||
const newUnit = message.intervalUnit === "minutes" ? "seconds" : "minutes"
|
||||
handleUpdateMessage(dayIndex, messageIndex, { intervalUnit: newUnit })
|
||||
}
|
||||
const message = dayPlans[dayIndex].messages[messageIndex];
|
||||
const newUnit = message.intervalUnit === "minutes" ? "seconds" : "minutes";
|
||||
handleUpdateMessage(dayIndex, messageIndex, { intervalUnit: newUnit });
|
||||
};
|
||||
|
||||
// 添加新的天数计划
|
||||
const handleAddDayPlan = () => {
|
||||
const newDay = dayPlans.length
|
||||
const newDay = dayPlans.length;
|
||||
setDayPlans([
|
||||
...dayPlans,
|
||||
{
|
||||
@@ -162,47 +175,63 @@ export function MessageSettings({ formData, onChange, onNext, onPrev }: MessageS
|
||||
},
|
||||
],
|
||||
},
|
||||
])
|
||||
setIsAddDayPlanOpen(false)
|
||||
]);
|
||||
setIsAddDayPlanOpen(false);
|
||||
toast({
|
||||
title: "添加成功",
|
||||
description: `已添加第${newDay}天的消息计划`,
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 选择群组
|
||||
const handleSelectGroup = (groupId: string) => {
|
||||
setSelectedGroupId(groupId)
|
||||
setIsGroupSelectOpen(false)
|
||||
setSelectedGroupId(groupId);
|
||||
setIsGroupSelectOpen(false);
|
||||
toast({
|
||||
title: "选择成功",
|
||||
description: `已选择群组：${mockGroups.find((g) => g.id === groupId)?.name}`,
|
||||
})
|
||||
}
|
||||
description: `已选择群组：${
|
||||
mockGroups.find((g) => g.id === groupId)?.name
|
||||
}`,
|
||||
});
|
||||
};
|
||||
|
||||
// 处理文件上传
|
||||
const handleFileUpload = (dayIndex: number, messageIndex: number, type: "image" | "video" | "file") => {
|
||||
const handleFileUpload = (
|
||||
dayIndex: number,
|
||||
messageIndex: number,
|
||||
type: "image" | "video" | "file"
|
||||
) => {
|
||||
// 模拟文件上传
|
||||
toast({
|
||||
title: "上传成功",
|
||||
description: `${type === "image" ? "图片" : type === "video" ? "视频" : "文件"}上传成功`,
|
||||
})
|
||||
}
|
||||
description: `${
|
||||
type === "image" ? "图片" : type === "video" ? "视频" : "文件"
|
||||
}上传成功`,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="p-6">
|
||||
<>
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-lg font-semibold">消息设置</h2>
|
||||
<Button variant="outline" size="icon" onClick={() => setIsAddDayPlanOpen(true)}>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => setIsAddDayPlanOpen(true)}
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Tabs defaultValue="0" className="w-full">
|
||||
<TabsList className="w-full">
|
||||
<TabsList className="w-full bg-gray-50">
|
||||
{dayPlans.map((plan) => (
|
||||
<TabsTrigger key={plan.day} value={plan.day.toString()} className="flex-1">
|
||||
<TabsTrigger
|
||||
key={plan.day}
|
||||
value={plan.day.toString()}
|
||||
className="flex-1"
|
||||
>
|
||||
{plan.day === 0 ? "即时消息" : `第${plan.day}天`}
|
||||
</TabsTrigger>
|
||||
))}
|
||||
@@ -212,33 +241,45 @@ export function MessageSettings({ formData, onChange, onNext, onPrev }: MessageS
|
||||
<TabsContent key={plan.day} value={plan.day.toString()}>
|
||||
<div className="space-y-4">
|
||||
{plan.messages.map((message, messageIndex) => (
|
||||
<div key={message.id} className="space-y-4 p-4 bg-gray-50 rounded-lg">
|
||||
<div
|
||||
key={message.id}
|
||||
className="space-y-4 p-4 bg-gray-50 rounded-lg"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-2">
|
||||
{plan.day === 0 ? (
|
||||
<>
|
||||
<Label>间隔</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={String(message.sendInterval)}
|
||||
onChange={(e) =>
|
||||
handleUpdateMessage(dayIndex, messageIndex, { sendInterval: Number(e.target.value) })
|
||||
}
|
||||
className="w-20"
|
||||
/>
|
||||
<div className="w-10">间隔</div>
|
||||
<div className="w-40">
|
||||
<Input
|
||||
type="number"
|
||||
value={String(message.sendInterval)}
|
||||
onChange={(e) =>
|
||||
handleUpdateMessage(dayIndex, messageIndex, {
|
||||
sendInterval: Number(e.target.value),
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => toggleIntervalUnit(dayIndex, messageIndex)}
|
||||
onClick={() =>
|
||||
toggleIntervalUnit(dayIndex, messageIndex)
|
||||
}
|
||||
className="flex items-center space-x-1"
|
||||
>
|
||||
<Clock className="h-3 w-3" />
|
||||
<span>{message.intervalUnit === "minutes" ? "分钟" : "秒"}</span>
|
||||
<span>
|
||||
{message.intervalUnit === "minutes"
|
||||
? "分钟"
|
||||
: "秒"}
|
||||
</span>
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Label>发送时间</Label>
|
||||
<div className="font-medium">发送时间</div>
|
||||
<div className="flex items-center space-x-1">
|
||||
<Input
|
||||
type="number"
|
||||
@@ -248,7 +289,11 @@ export function MessageSettings({ formData, onChange, onNext, onPrev }: MessageS
|
||||
onChange={(e) =>
|
||||
handleUpdateMessage(dayIndex, messageIndex, {
|
||||
scheduledTime: {
|
||||
...(message.scheduledTime || { hour: 0, minute: 0, second: 0 }),
|
||||
...(message.scheduledTime || {
|
||||
hour: 0,
|
||||
minute: 0,
|
||||
second: 0,
|
||||
}),
|
||||
hour: Number(e.target.value),
|
||||
},
|
||||
})
|
||||
@@ -260,11 +305,17 @@ export function MessageSettings({ formData, onChange, onNext, onPrev }: MessageS
|
||||
type="number"
|
||||
min={0}
|
||||
max={59}
|
||||
value={String(message.scheduledTime?.minute || 0)}
|
||||
value={String(
|
||||
message.scheduledTime?.minute || 0
|
||||
)}
|
||||
onChange={(e) =>
|
||||
handleUpdateMessage(dayIndex, messageIndex, {
|
||||
scheduledTime: {
|
||||
...(message.scheduledTime || { hour: 0, minute: 0, second: 0 }),
|
||||
...(message.scheduledTime || {
|
||||
hour: 0,
|
||||
minute: 0,
|
||||
second: 0,
|
||||
}),
|
||||
minute: Number(e.target.value),
|
||||
},
|
||||
})
|
||||
@@ -276,11 +327,17 @@ export function MessageSettings({ formData, onChange, onNext, onPrev }: MessageS
|
||||
type="number"
|
||||
min={0}
|
||||
max={59}
|
||||
value={String(message.scheduledTime?.second || 0)}
|
||||
value={String(
|
||||
message.scheduledTime?.second || 0
|
||||
)}
|
||||
onChange={(e) =>
|
||||
handleUpdateMessage(dayIndex, messageIndex, {
|
||||
scheduledTime: {
|
||||
...(message.scheduledTime || { hour: 0, minute: 0, second: 0 }),
|
||||
...(message.scheduledTime || {
|
||||
hour: 0,
|
||||
minute: 0,
|
||||
second: 0,
|
||||
}),
|
||||
second: Number(e.target.value),
|
||||
},
|
||||
})
|
||||
@@ -291,7 +348,13 @@ export function MessageSettings({ formData, onChange, onNext, onPrev }: MessageS
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" onClick={() => handleRemoveMessage(dayIndex, messageIndex)}>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
handleRemoveMessage(dayIndex, messageIndex)
|
||||
}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
@@ -300,9 +363,15 @@ export function MessageSettings({ formData, onChange, onNext, onPrev }: MessageS
|
||||
{messageTypes.map((type) => (
|
||||
<Button
|
||||
key={type.id}
|
||||
variant={message.type === type.id ? "default" : "outline"}
|
||||
variant={
|
||||
message.type === type.id ? "default" : "outline"
|
||||
}
|
||||
size="sm"
|
||||
onClick={() => handleUpdateMessage(dayIndex, messageIndex, { type: type.id as any })}
|
||||
onClick={() =>
|
||||
handleUpdateMessage(dayIndex, messageIndex, {
|
||||
type: type.id as any,
|
||||
})
|
||||
}
|
||||
className="flex flex-col items-center p-2 h-auto"
|
||||
>
|
||||
<type.icon className="h-4 w-4" />
|
||||
@@ -313,7 +382,11 @@ export function MessageSettings({ formData, onChange, onNext, onPrev }: MessageS
|
||||
{message.type === "text" && (
|
||||
<Textarea
|
||||
value={message.content}
|
||||
onChange={(e) => handleUpdateMessage(dayIndex, messageIndex, { content: e.target.value })}
|
||||
onChange={(e) =>
|
||||
handleUpdateMessage(dayIndex, messageIndex, {
|
||||
content: e.target.value,
|
||||
})
|
||||
}
|
||||
placeholder="请输入消息内容"
|
||||
className="min-h-[100px]"
|
||||
/>
|
||||
@@ -322,39 +395,49 @@ export function MessageSettings({ formData, onChange, onNext, onPrev }: MessageS
|
||||
{message.type === "miniprogram" && (
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label>
|
||||
<div className="font-medium">
|
||||
标题<span className="text-red-500">*</span>
|
||||
</Label>
|
||||
</div>
|
||||
<Input
|
||||
value={message.title}
|
||||
onChange={(e) => handleUpdateMessage(dayIndex, messageIndex, { title: e.target.value })}
|
||||
onChange={(e) =>
|
||||
handleUpdateMessage(dayIndex, messageIndex, {
|
||||
title: e.target.value,
|
||||
})
|
||||
}
|
||||
placeholder="请输入小程序标题"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>描述</Label>
|
||||
<div className="font-medium">描述</div>
|
||||
<Input
|
||||
value={message.description}
|
||||
onChange={(e) =>
|
||||
handleUpdateMessage(dayIndex, messageIndex, { description: e.target.value })
|
||||
handleUpdateMessage(dayIndex, messageIndex, {
|
||||
description: e.target.value,
|
||||
})
|
||||
}
|
||||
placeholder="请输入小程序描述"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>
|
||||
<div className="font-medium">
|
||||
链接<span className="text-red-500">*</span>
|
||||
</Label>
|
||||
</div>
|
||||
<Input
|
||||
value={message.address}
|
||||
onChange={(e) => handleUpdateMessage(dayIndex, messageIndex, { address: e.target.value })}
|
||||
onChange={(e) =>
|
||||
handleUpdateMessage(dayIndex, messageIndex, {
|
||||
address: e.target.value,
|
||||
})
|
||||
}
|
||||
placeholder="请输入小程序路径"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>
|
||||
<div className="font-medium">
|
||||
封面<span className="text-red-500">*</span>
|
||||
</Label>
|
||||
</div>
|
||||
<div className="border-2 border-dashed rounded-lg p-4 text-center">
|
||||
{message.coverImage ? (
|
||||
<div className="relative">
|
||||
@@ -367,7 +450,13 @@ export function MessageSettings({ formData, onChange, onNext, onPrev }: MessageS
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
className="absolute top-2 right-2"
|
||||
onClick={() => handleUpdateMessage(dayIndex, messageIndex, { coverImage: undefined })}
|
||||
onClick={() =>
|
||||
handleUpdateMessage(
|
||||
dayIndex,
|
||||
messageIndex,
|
||||
{ coverImage: undefined }
|
||||
)
|
||||
}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
@@ -376,7 +465,13 @@ export function MessageSettings({ formData, onChange, onNext, onPrev }: MessageS
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full h-[120px]"
|
||||
onClick={() => handleFileUpload(dayIndex, messageIndex, "image")}
|
||||
onClick={() =>
|
||||
handleFileUpload(
|
||||
dayIndex,
|
||||
messageIndex,
|
||||
"image"
|
||||
)
|
||||
}
|
||||
>
|
||||
<Upload className="h-4 w-4 mr-2" />
|
||||
上传封面
|
||||
@@ -390,39 +485,49 @@ export function MessageSettings({ formData, onChange, onNext, onPrev }: MessageS
|
||||
{message.type === "link" && (
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label>
|
||||
<div className="font-medium">
|
||||
标题<span className="text-red-500">*</span>
|
||||
</Label>
|
||||
</div>
|
||||
<Input
|
||||
value={message.title}
|
||||
onChange={(e) => handleUpdateMessage(dayIndex, messageIndex, { title: e.target.value })}
|
||||
onChange={(e) =>
|
||||
handleUpdateMessage(dayIndex, messageIndex, {
|
||||
title: e.target.value,
|
||||
})
|
||||
}
|
||||
placeholder="请输入链接标题"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>描述</Label>
|
||||
<div className="font-medium">描述</div>
|
||||
<Input
|
||||
value={message.description}
|
||||
onChange={(e) =>
|
||||
handleUpdateMessage(dayIndex, messageIndex, { description: e.target.value })
|
||||
handleUpdateMessage(dayIndex, messageIndex, {
|
||||
description: e.target.value,
|
||||
})
|
||||
}
|
||||
placeholder="请输入链接描述"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>
|
||||
<div className="font-medium">
|
||||
链接<span className="text-red-500">*</span>
|
||||
</Label>
|
||||
</div>
|
||||
<Input
|
||||
value={message.linkUrl}
|
||||
onChange={(e) => handleUpdateMessage(dayIndex, messageIndex, { linkUrl: e.target.value })}
|
||||
onChange={(e) =>
|
||||
handleUpdateMessage(dayIndex, messageIndex, {
|
||||
linkUrl: e.target.value,
|
||||
})
|
||||
}
|
||||
placeholder="请输入链接地址"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>
|
||||
<div className="font-medium">
|
||||
封面<span className="text-red-500">*</span>
|
||||
</Label>
|
||||
</div>
|
||||
<div className="border-2 border-dashed rounded-lg p-4 text-center">
|
||||
{message.coverImage ? (
|
||||
<div className="relative">
|
||||
@@ -435,7 +540,13 @@ export function MessageSettings({ formData, onChange, onNext, onPrev }: MessageS
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
className="absolute top-2 right-2"
|
||||
onClick={() => handleUpdateMessage(dayIndex, messageIndex, { coverImage: undefined })}
|
||||
onClick={() =>
|
||||
handleUpdateMessage(
|
||||
dayIndex,
|
||||
messageIndex,
|
||||
{ coverImage: undefined }
|
||||
)
|
||||
}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
@@ -444,7 +555,13 @@ export function MessageSettings({ formData, onChange, onNext, onPrev }: MessageS
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full h-[120px]"
|
||||
onClick={() => handleFileUpload(dayIndex, messageIndex, "image")}
|
||||
onClick={() =>
|
||||
handleFileUpload(
|
||||
dayIndex,
|
||||
messageIndex,
|
||||
"image"
|
||||
)
|
||||
}
|
||||
>
|
||||
<Upload className="h-4 w-4 mr-2" />
|
||||
上传封面
|
||||
@@ -457,35 +574,55 @@ export function MessageSettings({ formData, onChange, onNext, onPrev }: MessageS
|
||||
|
||||
{message.type === "group" && (
|
||||
<div className="space-y-2">
|
||||
<Label>
|
||||
<div className="font-medium">
|
||||
选择群聊<span className="text-red-500">*</span>
|
||||
</Label>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full justify-start"
|
||||
onClick={() => setIsGroupSelectOpen(true)}
|
||||
>
|
||||
{selectedGroupId ? mockGroups.find((g) => g.id === selectedGroupId)?.name : "选择邀请入的群"}
|
||||
{selectedGroupId
|
||||
? mockGroups.find((g) => g.id === selectedGroupId)
|
||||
?.name
|
||||
: "选择邀请入的群"}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(message.type === "image" || message.type === "video" || message.type === "file") && (
|
||||
{(message.type === "image" ||
|
||||
message.type === "video" ||
|
||||
message.type === "file") && (
|
||||
<div className="border-2 border-dashed rounded-lg p-4 text-center">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full h-[120px]"
|
||||
onClick={() => handleFileUpload(dayIndex, messageIndex, message.type as any)}
|
||||
onClick={() =>
|
||||
handleFileUpload(
|
||||
dayIndex,
|
||||
messageIndex,
|
||||
message.type as any
|
||||
)
|
||||
}
|
||||
>
|
||||
<Upload className="h-4 w-4 mr-2" />
|
||||
上传{message.type === "image" ? "图片" : message.type === "video" ? "视频" : "文件"}
|
||||
上传
|
||||
{message.type === "image"
|
||||
? "图片"
|
||||
: message.type === "video"
|
||||
? "视频"
|
||||
: "文件"}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
<Button variant="outline" onClick={() => handleAddMessage(dayIndex)} className="w-full">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => handleAddMessage(dayIndex)}
|
||||
className="w-full"
|
||||
>
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
添加消息
|
||||
</Button>
|
||||
@@ -509,7 +646,9 @@ export function MessageSettings({ formData, onChange, onNext, onPrev }: MessageS
|
||||
<DialogTitle>添加消息计划</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="py-4">
|
||||
<p className="text-sm text-gray-500 mb-4">选择要添加的消息计划类型</p>
|
||||
<p className="text-sm text-gray-500 mb-4">
|
||||
选择要添加的消息计划类型
|
||||
</p>
|
||||
<Button onClick={handleAddDayPlan} className="w-full">
|
||||
添加第 {dayPlans.length} 天计划
|
||||
</Button>
|
||||
@@ -529,24 +668,31 @@ export function MessageSettings({ formData, onChange, onNext, onPrev }: MessageS
|
||||
<div
|
||||
key={group.id}
|
||||
className={`p-4 rounded-lg cursor-pointer hover:bg-gray-100 ${
|
||||
selectedGroupId === group.id ? "bg-blue-50 border border-blue-200" : ""
|
||||
selectedGroupId === group.id
|
||||
? "bg-blue-50 border border-blue-200"
|
||||
: ""
|
||||
}`}
|
||||
onClick={() => handleSelectGroup(group.id)}
|
||||
>
|
||||
<div className="font-medium">{group.name}</div>
|
||||
<div className="text-sm text-gray-500">成员数：{group.memberCount}</div>
|
||||
<div className="text-sm text-gray-500">
|
||||
成员数：{group.memberCount}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setIsGroupSelectOpen(false)}>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setIsGroupSelectOpen(false)}
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
<Button onClick={() => setIsGroupSelectOpen(false)}>确定</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</Card>
|
||||
)
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user