fnvtk/ckb-SuperAdmin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 本次提交更新内容如下

Browse Source 
保存下场景建设数据
This commit is contained in:
笔记本里的永平
2025-07-16 15:18:54 +08:00
parent 8d1362303d
commit 9e1dc36853
13 changed files with 1329 additions and 1020 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
nkebao/src/pages/scenarios/new/page.tsx
View File

@@ -1,25 +1,25 @@
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 } 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";
// 步骤定义 - 只保留三个步骤
const steps = [
{ id: 1, title: "步骤一", subtitle: "基础设置" },
{ id: 2, title: "步骤二", subtitle: "好友申请设置" },
{ id: 3, title: "步骤三", subtitle: "消息设置" },
]
];
export default function NewPlan() {
const router = useNavigate()
const [currentStep, setCurrentStep] = useState(1)
const router = useNavigate();
const [currentStep, setCurrentStep] = useState(1);
const [formData, setFormData] = useState({
planName: "",
scenario: "haibao",
@@ -32,14 +32,14 @@ export default function NewPlan() {
endTime: "18:00",
enabled: true,
// 移除tags字段
})
});
const [sceneList, setSceneList] = useState<any[]>([]);
const [sceneLoading, setSceneLoading] = useState(true);
useEffect(() => {
setSceneLoading(true);
getPlanScenes()
.then(res => {
.then((res) => {
setSceneList(res?.data || []);
})
.finally(() => setSceneLoading(false));
@@ -47,89 +47,112 @@ export default function NewPlan() {
// 更新表单数据
const onChange = (data: any) => {
setFormData((prev) => ({ ...prev, ...data }))
}
setFormData((prev) => ({ ...prev, ...data }));
};
// 处理保存
const handleSave = async () => {
try {
// 这里应该是实际的API调用
await new Promise((resolve) => setTimeout(resolve, 1000))
await new Promise((resolve) => setTimeout(resolve, 1000));
toast({
title: "创建成功",
description: "获客计划已创建",
})
router("/plans")
});
router("/plans");
} catch (error) {
toast({
title: "创建失败",
description: "创建计划失败，请重试",
variant: "destructive",
})
});
}
}
};
// 下一步
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>
)
);
}

78
nkebao/src/pages/scenarios/new/steps/BasicSettings.tsx
View File

@@ -5,13 +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";
import { uploadFile } from "@/api/utils";
const phoneCallTags = [
{ id: "tag-1", name: "咨询", color: "bg-blue-100 text-blue-800" },
@@ -338,6 +336,11 @@ export function BasicSettings({
const today = new Date().toLocaleDateString("zh-CN").replace(/\//g, "");
onChange({ ...formData, planName: `海报${today}` });
}
// 检查是否已经有上传的订单文件
if (formData.orderFileUploaded) {
setOrderUploaded(true);
}
}, [formData, onChange]);
// 选中场景
@@ -500,6 +503,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);
@@ -816,41 +841,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 +959,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>

286
nkebao/src/pages/scenarios/new/steps/FriendRequestSettings.tsx
View File

@@ -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.planName || "获客计划";
}
}
};
// 使用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, selectedDevices: newSelectedDevices });
}}
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>
)
</>
);
}

411
nkebao/src/pages/scenarios/new/steps/MessageSettings.tsx
View File

@@ -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,44 @@ 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>
<div className="w-10">间隔</div>
<Input
type="number"
className="w-40"
value={String(message.sendInterval)}
onChange={(e) =>
handleUpdateMessage(dayIndex, messageIndex, { sendInterval: Number(e.target.value) })
handleUpdateMessage(dayIndex, messageIndex, {
sendInterval: Number(e.target.value),
})
}
className="w-20"
/>
<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 +288,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 +304,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 +326,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 +347,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 +362,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 +381,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 +394,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 +449,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 +464,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 +484,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 +539,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 +554,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 +573,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 +645,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 +667,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>
)
</>
);
}