409 lines
13 KiB
TypeScript
409 lines
13 KiB
TypeScript
import React, { useState, useEffect } from "react";
|
||
import { useNavigate, useParams } from "react-router-dom";
|
||
import { Button, Input, Switch, message, Spin } from "antd";
|
||
import {
|
||
ArrowLeftOutlined,
|
||
PlusOutlined,
|
||
MinusOutlined,
|
||
CheckOutlined,
|
||
} from "@ant-design/icons";
|
||
import { NavBar } from "antd-mobile";
|
||
import Layout from "@/components/Layout/Layout";
|
||
import {
|
||
createAutoLikeTask,
|
||
updateAutoLikeTask,
|
||
fetchAutoLikeTaskDetail,
|
||
} from "./api";
|
||
import { ContentType } from "@/types/auto-like";
|
||
import style from "./new.module.scss";
|
||
|
||
const contentTypeLabels: Record<ContentType, string> = {
|
||
text: "文字",
|
||
image: "图片",
|
||
video: "视频",
|
||
link: "链接",
|
||
};
|
||
|
||
const steps = ["基础设置", "设备选择", "人群选择"];
|
||
|
||
const defaultForm = {
|
||
name: "",
|
||
interval: 5,
|
||
maxLikes: 200,
|
||
startTime: "08:00",
|
||
endTime: "22:00",
|
||
contentTypes: ["text", "image", "video"] as ContentType[],
|
||
devices: [] as string[],
|
||
friends: [] as string[],
|
||
targetTags: [] as string[],
|
||
friendMaxLikes: 10,
|
||
enableFriendTags: false,
|
||
friendTags: "",
|
||
};
|
||
|
||
const NewAutoLike: React.FC = () => {
|
||
const navigate = useNavigate();
|
||
const { id } = useParams<{ id: string }>();
|
||
const isEditMode = !!id;
|
||
const [currentStep, setCurrentStep] = useState(0);
|
||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||
const [isLoading, setIsLoading] = useState(isEditMode);
|
||
const [autoEnabled, setAutoEnabled] = useState(false);
|
||
const [formData, setFormData] = useState({ ...defaultForm });
|
||
|
||
useEffect(() => {
|
||
if (isEditMode && id) {
|
||
fetchTaskDetail();
|
||
}
|
||
}, [id, isEditMode]);
|
||
|
||
const fetchTaskDetail = async () => {
|
||
setIsLoading(true);
|
||
try {
|
||
const taskDetail = await fetchAutoLikeTaskDetail(id!);
|
||
if (taskDetail) {
|
||
const config = (taskDetail as any).config || taskDetail;
|
||
setFormData({
|
||
name: taskDetail.name || "",
|
||
interval: config.likeInterval || config.interval || 5,
|
||
maxLikes: config.maxLikesPerDay || config.maxLikes || 200,
|
||
startTime: config.timeRange?.start || config.startTime || "08:00",
|
||
endTime: config.timeRange?.end || config.endTime || "22:00",
|
||
contentTypes: config.contentTypes || ["text", "image", "video"],
|
||
devices: config.devices || [],
|
||
friends: config.friends || [],
|
||
targetTags: config.targetTags || [],
|
||
friendMaxLikes: config.friendMaxLikes || 10,
|
||
enableFriendTags: config.enableFriendTags || false,
|
||
friendTags: config.friendTags || "",
|
||
});
|
||
setAutoEnabled(
|
||
(taskDetail as any).status === 1 ||
|
||
(taskDetail as any).status === "running"
|
||
);
|
||
}
|
||
} catch (error) {
|
||
message.error("获取任务详情失败");
|
||
navigate("/workspace/auto-like");
|
||
} finally {
|
||
setIsLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleUpdateFormData = (data: Partial<typeof formData>) => {
|
||
setFormData((prev) => ({ ...prev, ...data }));
|
||
};
|
||
|
||
const handleNext = () => setCurrentStep((prev) => Math.min(prev + 1, 2));
|
||
const handlePrev = () => setCurrentStep((prev) => Math.max(prev - 1, 0));
|
||
|
||
const handleComplete = async () => {
|
||
if (!formData.name.trim()) {
|
||
message.warning("请输入任务名称");
|
||
return;
|
||
}
|
||
if (!formData.devices || formData.devices.length === 0) {
|
||
message.warning("请选择执行设备");
|
||
return;
|
||
}
|
||
setIsSubmitting(true);
|
||
try {
|
||
if (isEditMode && id) {
|
||
await updateAutoLikeTask({ ...formData, id });
|
||
message.success("更新成功");
|
||
} else {
|
||
await createAutoLikeTask(formData);
|
||
message.success("创建成功");
|
||
}
|
||
navigate("/workspace/auto-like");
|
||
} catch (error) {
|
||
message.error(isEditMode ? "更新失败" : "创建失败");
|
||
} finally {
|
||
setIsSubmitting(false);
|
||
}
|
||
};
|
||
|
||
// 步骤1：基础设置
|
||
const renderBasicSettings = () => (
|
||
<div className={style.formStep}>
|
||
<div className={style.formItem}>
|
||
<div className={style.formLabel}>任务名称</div>
|
||
<Input
|
||
placeholder="请输入任务名称"
|
||
value={formData.name}
|
||
onChange={(e) => handleUpdateFormData({ name: e.target.value })}
|
||
className={style.input}
|
||
/>
|
||
</div>
|
||
|
||
<div className={style.formItem}>
|
||
<div className={style.formLabel}>点赞间隔</div>
|
||
<div className={style.counterRow}>
|
||
<button
|
||
type="button"
|
||
className={style.counterBtn}
|
||
onClick={() =>
|
||
handleUpdateFormData({
|
||
interval: Math.max(1, formData.interval - 1),
|
||
})
|
||
}
|
||
>
|
||
<MinusOutlined />
|
||
</button>
|
||
<span className={style.counterValue}>{formData.interval} 秒</span>
|
||
<button
|
||
type="button"
|
||
className={style.counterBtn}
|
||
onClick={() =>
|
||
handleUpdateFormData({ interval: formData.interval + 1 })
|
||
}
|
||
>
|
||
<PlusOutlined />
|
||
</button>
|
||
</div>
|
||
<div className={style.counterTip}>设置两次点赞之间的最小时间间隔</div>
|
||
</div>
|
||
|
||
<div className={style.formItem}>
|
||
<div className={style.formLabel}>每日最大点赞数</div>
|
||
<div className={style.counterRow}>
|
||
<button
|
||
type="button"
|
||
className={style.counterBtn}
|
||
onClick={() =>
|
||
handleUpdateFormData({
|
||
maxLikes: Math.max(1, formData.maxLikes - 10),
|
||
})
|
||
}
|
||
>
|
||
<MinusOutlined />
|
||
</button>
|
||
<span className={style.counterValue}>{formData.maxLikes} 次</span>
|
||
<button
|
||
type="button"
|
||
className={style.counterBtn}
|
||
onClick={() =>
|
||
handleUpdateFormData({ maxLikes: formData.maxLikes + 10 })
|
||
}
|
||
>
|
||
<PlusOutlined />
|
||
</button>
|
||
</div>
|
||
<div className={style.counterTip}>设置每天最多点赞的次数</div>
|
||
</div>
|
||
|
||
<div className={style.formItem}>
|
||
<div className={style.formLabel}>点赞时间范围</div>
|
||
<div className={style.timeRow}>
|
||
<Input
|
||
type="time"
|
||
value={formData.startTime}
|
||
onChange={(e) =>
|
||
handleUpdateFormData({ startTime: e.target.value })
|
||
}
|
||
className={style.inputTime}
|
||
/>
|
||
<span className={style.timeTo}>至</span>
|
||
<Input
|
||
type="time"
|
||
value={formData.endTime}
|
||
onChange={(e) => handleUpdateFormData({ endTime: e.target.value })}
|
||
className={style.inputTime}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className={style.formItem}>
|
||
<div className={style.formLabel}>点赞内容类型</div>
|
||
<div className={style.contentTypes}>
|
||
{(["text", "image", "video"] as ContentType[]).map((type) => (
|
||
<span
|
||
key={type}
|
||
className={
|
||
formData.contentTypes.includes(type)
|
||
? style.contentTypeTagActive
|
||
: style.contentTypeTag
|
||
}
|
||
onClick={() => {
|
||
const newTypes = formData.contentTypes.includes(type)
|
||
? formData.contentTypes.filter((t) => t !== type)
|
||
: [...formData.contentTypes, type];
|
||
handleUpdateFormData({ contentTypes: newTypes });
|
||
}}
|
||
>
|
||
{contentTypeLabels[type]}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className={style.formItem}>
|
||
<div className={style.switchRow}>
|
||
<span className={style.switchLabel}>启用好友标签</span>
|
||
<Switch
|
||
checked={formData.enableFriendTags}
|
||
onChange={(checked) =>
|
||
handleUpdateFormData({ enableFriendTags: checked })
|
||
}
|
||
className={style.switch}
|
||
/>
|
||
</div>
|
||
{formData.enableFriendTags && (
|
||
<div className={style.formItem}>
|
||
<div className={style.formLabel}>好友标签</div>
|
||
<Input
|
||
placeholder="请输入标签"
|
||
value={formData.friendTags}
|
||
onChange={(e) =>
|
||
handleUpdateFormData({ friendTags: e.target.value })
|
||
}
|
||
className={style.input}
|
||
/>
|
||
<div className={style.counterTip}>只给有此标签的好友点赞</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div className={style.formItem}>
|
||
<div className={style.switchRow}>
|
||
<span className={style.switchLabel}>自动开启</span>
|
||
<Switch
|
||
checked={autoEnabled}
|
||
onChange={setAutoEnabled}
|
||
className={style.switch}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className={style.formStepBtnRow}>
|
||
<Button type="primary" onClick={handleNext} className={style.nextBtn}>
|
||
下一步
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
// 步骤2：设备选择
|
||
const renderDeviceSelection = () => (
|
||
<div className={style.formStep}>
|
||
<div className={style.formItem}>
|
||
<div className={style.formLabel}>选择设备</div>
|
||
<Input
|
||
placeholder="请选择设备"
|
||
value={formData.devices.join(", ")}
|
||
readOnly
|
||
onClick={() => message.info("这里应弹出设备选择器")}
|
||
className={style.input}
|
||
/>
|
||
{formData.devices.length > 0 && (
|
||
<div className={style.selectedTip}>
|
||
已选设备: {formData.devices.length}个
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div className={style.formStepBtnRow}>
|
||
<Button onClick={handlePrev} className={style.prevBtn}>
|
||
上一步
|
||
</Button>
|
||
<Button type="primary" onClick={handleNext} className={style.nextBtn}>
|
||
下一步
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
// 步骤3：人群选择
|
||
const renderFriendSelection = () => (
|
||
<div className={style.formStep}>
|
||
<div className={style.formItem}>
|
||
<div className={style.formLabel}>选择微信好友</div>
|
||
<Input
|
||
placeholder="请选择微信好友"
|
||
value={formData.friends.join(", ")}
|
||
readOnly
|
||
onClick={() => message.info("这里应弹出好友选择器")}
|
||
className={style.input}
|
||
/>
|
||
{formData.friends.length > 0 && (
|
||
<div className={style.selectedTip}>
|
||
已选好友: {formData.friends.length}个
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div className={style.formStepBtnRow}>
|
||
<Button onClick={handlePrev} className={style.prevBtn}>
|
||
上一步
|
||
</Button>
|
||
<Button
|
||
type="primary"
|
||
onClick={handleComplete}
|
||
loading={isSubmitting}
|
||
className={style.completeBtn}
|
||
>
|
||
{isEditMode ? "更新任务" : "创建任务"}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
return (
|
||
<Layout
|
||
header={
|
||
<NavBar
|
||
back={null}
|
||
style={{ background: "#fff" }}
|
||
left={
|
||
<div className="nav-title">
|
||
<ArrowLeftOutlined
|
||
twoToneColor="#1677ff"
|
||
onClick={() => navigate(-1)}
|
||
/>
|
||
</div>
|
||
}
|
||
>
|
||
<span className="nav-title">
|
||
{isEditMode ? "编辑自动点赞" : "新建自动点赞"}
|
||
</span>
|
||
</NavBar>
|
||
}
|
||
>
|
||
<div className={style.formBg}>
|
||
<div className={style.formSteps}>
|
||
{steps.map((s, i) => (
|
||
<div
|
||
key={s}
|
||
className={
|
||
style.formStepIndicator +
|
||
" " +
|
||
(i === currentStep
|
||
? style.formStepActive
|
||
: i < currentStep
|
||
? style.formStepDone
|
||
: "")
|
||
}
|
||
>
|
||
<span className={style.formStepNum}>
|
||
{i < currentStep ? <CheckOutlined /> : i + 1}
|
||
</span>
|
||
<span>{s}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
{isLoading ? (
|
||
<div className={style.formLoading}>
|
||
<Spin />
|
||
</div>
|
||
) : (
|
||
<>
|
||
{currentStep === 0 && renderBasicSettings()}
|
||
{currentStep === 1 && renderDeviceSelection()}
|
||
{currentStep === 2 && renderFriendSelection()}
|
||
</>
|
||
)}
|
||
</div>
|
||
</Layout>
|
||
);
|
||
};
|
||
|
||
export default NewAutoLike;
|