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-22 19:18:05 +08:00
parent 7d382f14fd
commit 7445840fdf
6 changed files with 500 additions and 902 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
nkebao/.env.development
View File

@@ -1,4 +1,5 @@
# 基础环境变量示例 # 基础环境变量示例
VITE_API_BASE_URL=http://www.yishi.com # VITE_API_BASE_URL=http://www.yishi.com
VITE_API_BASE_URL=https://ckbapi.quwanzhi.com
VITE_APP_TITLE=Nkebao Base VITE_APP_TITLE=Nkebao Base

10
nkebao/src/components/DeviceSelectionDialog/api.ts
View File

@@ -1,10 +0,0 @@
import request from "@/api/request";
// 获取设备列表
export function getDeviceList(params: {
page: number;
limit: number;
keyword?: string;
}) {
return request("/v1/devices", params, "GET");
}

197
nkebao/src/components/DeviceSelectionDialog/index.module.scss
View File

@@ -1,197 +0,0 @@
.popupContainer {
display: flex;
flex-direction: column;
height: 100vh;
background: #fff;
}
.popupHeader {
padding: 16px;
border-bottom: 1px solid #f0f0f0;
}
.popupTitle {
font-size: 18px;
font-weight: 600;
text-align: center;
}
.popupSearchRow {
display: flex;
align-items: center;
gap: 16px;
padding: 16px;
}
.popupSearchInputWrap {
position: relative;
flex: 1;
}
.inputIcon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: #bdbdbd;
z-index: 10;
font-size: 16px;
}
.popupSearchInput {
padding-left: 36px !important;
border-radius: 12px !important;
height: 44px;
font-size: 15px;
border: 1px solid #e5e6eb !important;
background: #f8f9fa;
}
.statusSelect {
width: 128px;
height: 40px;
border-radius: 8px;
border: 1px solid #e5e6eb;
font-size: 14px;
padding: 0 12px;
background: #fff;
}
.loadingIcon {
animation: spin 1s linear infinite;
font-size: 16px;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.deviceList {
flex: 1;
overflow-y: auto;
}
.deviceListInner {
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px;
}
.deviceItem {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px;
border-radius: 12px;
border: 1px solid #f0f0f0;
background: #fff;
cursor: pointer;
transition: background 0.2s;
&:hover {
background: #f5f6fa;
}
}
.deviceCheckbox {
margin-top: 4px;
}
.deviceInfo {
flex: 1;
}
.deviceInfoRow {
display: flex;
align-items: center;
justify-content: space-between;
}
.deviceName {
font-weight: 500;
font-size: 16px;
color: #222;
}
.statusOnline {
padding: 4px 8px;
border-radius: 12px;
background: #52c41a;
color: #fff;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.statusOffline {
padding: 4px 8px;
border-radius: 12px;
background: #e5e6eb;
color: #888;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.deviceInfoDetail {
font-size: 13px;
color: #888;
margin-top: 4px;
}
.usedInPlans {
font-size: 13px;
color: #fa8c16;
margin-top: 4px;
}
.loadingBox {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.loadingText {
color: #888;
font-size: 15px;
}
.emptyBox {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.emptyText {
color: #888;
font-size: 15px;
}
.popupFooter {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px;
border-top: 1px solid #f0f0f0;
background: #fff;
}
.selectedCount {
font-size: 14px;
color: #888;
}
.footerBtnGroup {
display: flex;
gap: 12px;
}
.refreshBtn {
width: 36px;
height: 36px;
}
.paginationRow {
border-top: 1px solid #f0f0f0;
padding: 16px;
display: flex;
align-items: center;
justify-content: space-between;
background: #fff;
}
.totalCount {
font-size: 14px;
color: #888;
}
.paginationControls {
display: flex;
align-items: center;
gap: 8px;
}
.pageBtn {
padding: 0 8px;
height: 32px;
min-width: 32px;
border-radius: 16px;
}
.pageInfo {
font-size: 14px;
color: #222;
margin: 0 8px;
}

258
nkebao/src/components/DeviceSelectionDialog/index.tsx
View File

@@ -1,258 +0,0 @@
import React, { useState, useEffect, useCallback } from "react";
import { SearchOutlined, ReloadOutlined } from "@ant-design/icons";
import { Checkbox, Popup, Toast } from "antd-mobile";
import { Input, Button } from "antd";
import { getDeviceList } from "./api";
import style from "./index.module.scss";
interface Device {
id: string;
name: string;
imei: string;
wxid: string;
status: "online" | "offline";
usedInPlans: number;
nickname: string;
}
interface DeviceSelectionDialogProps {
open: boolean;
onOpenChange: (open: boolean) => void;
selectedDevices: string[];
onSelect: (devices: string[]) => void;
}
export function DeviceSelectionDialog({
open,
onOpenChange,
selectedDevices,
onSelect,
}: DeviceSelectionDialogProps) {
const [searchQuery, setSearchQuery] = useState("");
const [statusFilter, setStatusFilter] = useState("all");
const [loading, setLoading] = useState(false);
const [devices, setDevices] = useState<Device[]>([]);
const [currentPage, setCurrentPage] = useState(1); // 新增
const [total, setTotal] = useState(0); // 新增
const pageSize = 20; // 每页条数
// 获取设备列表，支持keyword和分页
const fetchDevices = useCallback(
async (keyword: string = "", page: number = 1) => {
setLoading(true);
try {
const response = await getDeviceList({
page,
limit: pageSize,
keyword: keyword.trim() || undefined,
});
if (response && Array.isArray(response.list)) {
const convertedDevices: Device[] = response.list.map(
(serverDevice: any) => ({
id: serverDevice.id.toString(),
name: serverDevice.memo || `设备 ${serverDevice.id}`,
imei: serverDevice.imei,
wxid: serverDevice.wechatId || "",
status: serverDevice.alive === 1 ? "online" : "offline",
usedInPlans: 0,
nickname: serverDevice.nickname || "",
})
);
setDevices(convertedDevices);
setTotal(response.total || 0);
}
} catch (error) {
console.error("获取设备列表失败:", error);
Toast.show({
content: "获取设备列表失败，请检查网络连接",
position: "top",
});
} finally {
setLoading(false);
}
},
[]
);
// 打开弹窗时获取第一页
useEffect(() => {
if (open) {
setCurrentPage(1);
fetchDevices("", 1);
}
}, [open, fetchDevices]);
// 搜索防抖
useEffect(() => {
if (!open) return;
const timer = setTimeout(() => {
setCurrentPage(1);
fetchDevices(searchQuery, 1);
}, 500);
return () => clearTimeout(timer);
}, [searchQuery, open, fetchDevices]);
// 翻页时重新请求
useEffect(() => {
if (!open) return;
fetchDevices(searchQuery, currentPage);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [currentPage]);
// 过滤设备（只保留状态过滤）
const filteredDevices = devices.filter((device) => {
const matchesStatus =
statusFilter === "all" ||
(statusFilter === "online" && device.status === "online") ||
(statusFilter === "offline" && device.status === "offline");
return matchesStatus;
});
const handleDeviceSelect = (deviceId: string) => {
if (selectedDevices.includes(deviceId)) {
onSelect(selectedDevices.filter((id) => id !== deviceId));
} else {
onSelect([...selectedDevices, deviceId]);
}
};
const totalPages = Math.max(1, Math.ceil(total / pageSize));
return (
<Popup
visible={open}
onMaskClick={() => onOpenChange(false)}
position="bottom"
bodyStyle={{ height: "100vh" }}
>
<div className={style.popupContainer}>
<div className={style.popupHeader}>
<div className={style.popupTitle}>选择设备</div>
</div>
<div className={style.popupSearchRow}>
<div className={style.popupSearchInputWrap}>
<SearchOutlined className={style.inputIcon} />
<Input
placeholder="搜索设备IMEI/备注"
value={searchQuery}
onChange={(val) => setSearchQuery(val)}
className={style.popupSearchInput}
/>
</div>
<select
value={statusFilter}
onChange={(e) => setStatusFilter(e.target.value)}
className={style.statusSelect}
>
<option value="all">全部状态</option>
<option value="online">在线</option>
<option value="offline">离线</option>
</select>
<Button
fill="outline"
size="mini"
onClick={() => fetchDevices(searchQuery, currentPage)}
disabled={loading}
className={style.refreshBtn}
>
{loading ? (
<div className={style.loadingIcon}>⟳</div>
) : (
<ReloadOutlined />
)}
</Button>
</div>
<div className={style.deviceList}>
{loading ? (
<div className={style.loadingBox}>
<div className={style.loadingText}>加载中...</div>
</div>
) : filteredDevices.length === 0 ? (
<div className={style.emptyBox}>
<div className={style.emptyText}>暂无数据</div>
</div>
) : (
<div className={style.deviceListInner}>
{filteredDevices.map((device) => (
<label key={device.id} className={style.deviceItem}>
<Checkbox
checked={selectedDevices.includes(device.id)}
onChange={() => handleDeviceSelect(device.id)}
className={style.deviceCheckbox}
/>
<div className={style.deviceInfo}>
<div className={style.deviceInfoRow}>
<span className={style.deviceName}>{device.name}</span>
<div
className={
device.status === "online"
? style.statusOnline
: style.statusOffline
}
>
{device.status === "online" ? "在线" : "离线"}
</div>
</div>
<div className={style.deviceInfoDetail}>
<div>IMEI: {device.imei}</div>
<div>微信号: {device.wxid || "-"} </div>
<div>昵称: {device.nickname || "-"}</div>
</div>
{device.usedInPlans > 0 && (
<div className={style.usedInPlans}>
已用于 {device.usedInPlans} 个计划
</div>
)}
</div>
</label>
))}
</div>
)}
</div>
{/* 分页栏 */}
<div className={style.paginationRow}>
<div className={style.totalCount}>总计 {total} 个设备</div>
<div className={style.paginationControls}>
<Button
fill="none"
size="mini"
onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
disabled={currentPage === 1 || loading}
className={style.pageBtn}
>
&lt;
</Button>
<span className={style.pageInfo}>
{currentPage} / {totalPages}
</span>
<Button
fill="none"
size="mini"
onClick={() =>
setCurrentPage(Math.min(totalPages, currentPage + 1))
}
disabled={currentPage === totalPages || loading}
className={style.pageBtn}
>
&gt;
</Button>
</div>
</div>
<div className={style.popupFooter}>
<div className={style.selectedCount}>
已选择 {selectedDevices.length} 个设备
</div>
<div className={style.footerBtnGroup}>
<Button fill="outline" onClick={() => onOpenChange(false)}>
取消
</Button>
<Button color="primary" onClick={() => onOpenChange(false)}>
确定
{selectedDevices.length > 0 ? ` (${selectedDevices.length})` : ""}
</Button>
</div>
</div>
</div>
</Popup>
);
}

13
nkebao/src/components/SelectionTest.tsx
View File

@@ -1,6 +1,5 @@
import React, { useState } from "react"; import React, { useState } from "react";
import DeviceSelection from "./DeviceSelection"; import DeviceSelection from "./DeviceSelection";
import { DeviceSelectionDialog } from "./DeviceSelectionDialog";
import FriendSelection from "./FriendSelection"; import FriendSelection from "./FriendSelection";
import GroupSelection from "./GroupSelection"; import GroupSelection from "./GroupSelection";
import { Button, Space } from "antd-mobile"; import { Button, Space } from "antd-mobile";
@@ -29,18 +28,6 @@ export default function SelectionTest() {
onSelect={setSelectedDevices} onSelect={setSelectedDevices}
/> />
</div> </div>
<div>
<b>DeviceSelectionDialog（纯弹窗）</b>
<Button color="primary" onClick={() => setDeviceDialogOpen(true)}>
打开设备选择弹窗
</Button>
<DeviceSelectionDialog
open={deviceDialogOpen}
onOpenChange={setDeviceDialogOpen}
selectedDevices={selectedDevices}
onSelect={setSelectedDevices}
/>
</div>
<div> <div>
<b>FriendSelection</b> <b>FriendSelection</b>
<Button color="primary" onClick={() => setFriendDialogOpen(true)}> <Button color="primary" onClick={() => setFriendDialogOpen(true)}>

921
nkebao/src/pages/workspace/auto-like/new/index.tsx
View File

@@ -1,423 +1,498 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { useNavigate, useParams } from "react-router-dom"; import { useNavigate, useParams } from "react-router-dom";
import { import {
PlusOutlined, PlusOutlined,
MinusOutlined, MinusOutlined,
ArrowLeftOutlined, ArrowLeftOutlined,
CheckOutlined, CheckOutlined,
} from "@ant-design/icons"; } from "@ant-design/icons";
import { Button, Input, Switch, message, Spin } from "antd"; import {
import { NavBar } from "antd-mobile"; Button,
import Layout from "@/components/Layout/Layout"; Input,
import { Switch,
createAutoLikeTask, Spin,
updateAutoLikeTask, Modal,
fetchAutoLikeTaskDetail, Table,
} from "./api"; Select,
import { message,
CreateLikeTaskData, } from "antd";
ContentType, import Layout from "@/components/Layout/Layout";
} from "@/pages/workspace/auto-like/record/api"; import {
import style from "./new.module.scss"; createAutoLikeTask,
updateAutoLikeTask,
const contentTypeLabels: Record<ContentType, string> = { fetchAutoLikeTaskDetail,
text: "文字", } from "./api";
image: "图片", import {
video: "视频", CreateLikeTaskData,
link: "链接", ContentType,
}; } from "@/pages/workspace/auto-like/record/api";
import style from "./new.module.scss";
const steps = [
{ title: "基础设置", desc: "设置点赞规则" }, const contentTypeLabels: Record<ContentType, string> = {
{ title: "设备选择", desc: "选择执行设备" }, text: "文字",
{ title: "好友设置", desc: "选择目标人群" }, image: "图片",
]; video: "视频",
link: "链接",
const NewAutoLike: React.FC = () => { };
const navigate = useNavigate();
const { id } = useParams<{ id: string }>(); const steps = [
const isEditMode = !!id; { title: "基础设置", desc: "设置点赞规则" },
const [currentStep, setCurrentStep] = useState(1); { title: "设备选择", desc: "选择执行设备" },
const [isSubmitting, setIsSubmitting] = useState(false); { title: "好友设置", desc: "选择目标人群" },
const [isLoading, setIsLoading] = useState(isEditMode); ];
const [autoEnabled, setAutoEnabled] = useState(false);
const [formData, setFormData] = useState<CreateLikeTaskData>({ // 假数据（实际应从接口获取）
name: "", const mockDevices = Array.from({ length: 10 }).map((_, i) => ({
interval: 5, key: String(i + 1),
maxLikes: 200, name: `设备${i + 1}`,
startTime: "08:00", id: `dev${i + 1}`,
endTime: "22:00", }));
contentTypes: ["text", "image", "video"], const mockFriends = Array.from({ length: 20 }).map((_, i) => ({
devices: [], key: String(i + 1),
friends: [], name: `好友${i + 1}`,
targetTags: [], id: `friend${i + 1}`,
friendMaxLikes: 10, }));
enableFriendTags: false,
friendTags: "", const NewAutoLike: React.FC = () => {
}); const navigate = useNavigate();
const { id } = useParams<{ id: string }>();
useEffect(() => { const isEditMode = !!id;
if (isEditMode && id) { const [currentStep, setCurrentStep] = useState(1);
fetchTaskDetail(); const [isSubmitting, setIsSubmitting] = useState(false);
} const [isLoading, setIsLoading] = useState(isEditMode);
}, [id, isEditMode]); const [autoEnabled, setAutoEnabled] = useState(false);
const [formData, setFormData] = useState<CreateLikeTaskData>({
const fetchTaskDetail = async () => { name: "",
setIsLoading(true); interval: 5,
try { maxLikes: 200,
const taskDetail = await fetchAutoLikeTaskDetail(id!); startTime: "08:00",
if (taskDetail) { endTime: "22:00",
const config = (taskDetail as any).config || taskDetail; contentTypes: ["text", "image", "video"],
setFormData({ devices: [],
name: taskDetail.name || "", friends: [],
interval: config.likeInterval || config.interval || 5, targetTags: [],
maxLikes: config.maxLikesPerDay || config.maxLikes || 200, friendMaxLikes: 10,
startTime: config.timeRange?.start || config.startTime || "08:00", enableFriendTags: false,
endTime: config.timeRange?.end || config.endTime || "22:00", friendTags: "",
contentTypes: config.contentTypes || ["text", "image", "video"], });
devices: config.devices || [], // 设备/好友选择弹窗
friends: config.friends || [], const [deviceModalOpen, setDeviceModalOpen] = useState(false);
targetTags: config.targetTags || [], const [friendModalOpen, setFriendModalOpen] = useState(false);
friendMaxLikes: config.friendMaxLikes || 10, const [selectedDeviceRowKeys, setSelectedDeviceRowKeys] = useState<string[]>(
enableFriendTags: config.enableFriendTags || false, []
friendTags: config.friendTags || "", );
}); const [selectedFriendRowKeys, setSelectedFriendRowKeys] = useState<string[]>(
setAutoEnabled( []
(taskDetail as any).status === 1 || );
(taskDetail as any).status === "running"
); useEffect(() => {
} if (isEditMode && id) {
} catch (error) { fetchTaskDetail();
message.error("获取任务详情失败"); }
navigate("/workspace/auto-like"); }, [id, isEditMode]);
} finally {
setIsLoading(false); const fetchTaskDetail = async () => {
} setIsLoading(true);
}; try {
const taskDetail = await fetchAutoLikeTaskDetail(id!);
const handleUpdateFormData = (data: Partial<CreateLikeTaskData>) => { if (taskDetail) {
setFormData((prev) => ({ ...prev, ...data })); const config = (taskDetail as any).config || taskDetail;
}; setFormData({
name: taskDetail.name || "",
const handleNext = () => setCurrentStep((prev) => Math.min(prev + 1, 3)); interval: config.likeInterval || config.interval || 5,
const handlePrev = () => setCurrentStep((prev) => Math.max(prev - 1, 1)); maxLikes: config.maxLikesPerDay || config.maxLikes || 200,
startTime: config.timeRange?.start || config.startTime || "08:00",
const handleComplete = async () => { endTime: config.timeRange?.end || config.endTime || "22:00",
if (!formData.name.trim()) { contentTypes: config.contentTypes || ["text", "image", "video"],
message.warning("请输入任务名称"); devices: config.devices || [],
return; friends: config.friends || [],
} targetTags: config.targetTags || [],
if (!formData.devices || formData.devices.length === 0) { friendMaxLikes: config.friendMaxLikes || 10,
message.warning("请选择执行设备"); enableFriendTags: config.enableFriendTags || false,
return; friendTags: config.friendTags || "",
} });
setIsSubmitting(true); setAutoEnabled(
try { (taskDetail as any).status === 1 ||
if (isEditMode && id) { (taskDetail as any).status === "running"
await updateAutoLikeTask({ ...formData, id }); );
message.success("更新成功"); setSelectedDeviceRowKeys(config.devices || []);
} else { setSelectedFriendRowKeys(config.friends || []);
await createAutoLikeTask(formData); }
message.success("创建成功"); } catch (error) {
} message.error("获取任务详情失败");
navigate("/workspace/auto-like"); navigate("/workspace/auto-like");
} catch (error) { } finally {
message.error(isEditMode ? "更新失败" : "创建失败"); setIsLoading(false);
} finally { }
setIsSubmitting(false); };
}
}; const handleUpdateFormData = (data: Partial<CreateLikeTaskData>) => {
setFormData((prev) => ({ ...prev, ...data }));
// 步骤器 };
const renderStepIndicator = () => (
<div className={style.stepIndicatorWrapper}> const handleNext = () => setCurrentStep((prev) => Math.min(prev + 1, 3));
<div className={style.stepIndicator}> const handlePrev = () => setCurrentStep((prev) => Math.max(prev - 1, 1));
{steps.map((s, i) => (
<div const handleComplete = async () => {
key={s.title} if (!formData.name.trim()) {
className={ message.warning("请输入任务名称");
style.stepItem + return;
" " + }
(currentStep === i + 1 if (!formData.devices || formData.devices.length === 0) {
? style.stepActive message.warning("请选择执行设备");
: i + 1 < currentStep return;
? style.stepDone }
: "") setIsSubmitting(true);
} try {
> if (isEditMode && id) {
<span className={style.stepNum}> await updateAutoLikeTask({ ...formData, id });
{i + 1 < currentStep ? <CheckOutlined /> : i + 1} message.success("更新成功");
</span> } else {
<span className={style.stepTitle}>{s.title}</span> await createAutoLikeTask(formData);
<span className={style.stepDesc}>{s.desc}</span> message.success("创建成功");
</div> }
))} navigate("/workspace/auto-like");
</div> } catch (error) {
<div className={style.stepProgressBarBg}> message.error(isEditMode ? "更新失败" : "创建失败");
<div } finally {
className={style.stepProgressBar} setIsSubmitting(false);
style={{ }
width: `${((currentStep - 1) / (steps.length - 1)) * 100}%`, };
}}
></div> // 步骤器
</div> const renderStepIndicator = () => (
</div> <div className={style.stepIndicatorWrapper}>
); <div className={style.stepIndicator}>
{steps.map((s, i) => (
// 步骤1：基础设置 <div
const renderBasicSettings = () => ( key={s.title}
<div className={style.basicSection}> className={
<div className={style.formItem}> style.stepItem +
<div className={style.formLabel}>任务名称</div> " " +
<Input (currentStep === i + 1
placeholder="请输入任务名称" ? style.stepActive
value={formData.name} : i + 1 < currentStep
onChange={(e) => handleUpdateFormData({ name: e.target.value })} ? style.stepDone
className={style.input} : "")
/> }
</div> >
<div className={style.formItem}> <span className={style.stepNum}>
<div className={style.formLabel}>点赞间隔</div> {i + 1 < currentStep ? <CheckOutlined /> : i + 1}
<div className={style.counterRow}> </span>
<Button <span className={style.stepTitle}>{s.title}</span>
icon={<MinusOutlined />} <span className={style.stepDesc}>{s.desc}</span>
onClick={() => </div>
handleUpdateFormData({ ))}
interval: Math.max(1, formData.interval - 1), </div>
}) <div className={style.stepProgressBarBg}>
} <div
className={style.counterBtn} className={style.stepProgressBar}
/> style={{
<span className={style.counterValue}>{formData.interval} 秒</span> width: `${((currentStep - 1) / (steps.length - 1)) * 100}%`,
<Button }}
icon={<PlusOutlined />} ></div>
onClick={() => </div>
handleUpdateFormData({ interval: formData.interval + 1 }) </div>
} );
className={style.counterBtn}
/> // 步骤1：基础设置
</div> const renderBasicSettings = () => (
</div> <div className={style.basicSection}>
<div className={style.formItem}> <div className={style.formItem}>
<div className={style.formLabel}>每日最大点赞数</div> <div className={style.formLabel}>任务名称</div>
<div className={style.counterRow}> <Input
<Button placeholder="请输入任务名称"
icon={<MinusOutlined />} value={formData.name}
onClick={() => onChange={(e) => handleUpdateFormData({ name: e.target.value })}
handleUpdateFormData({ className={style.input}
maxLikes: Math.max(1, formData.maxLikes - 10), />
}) </div>
} <div className={style.formItem}>
className={style.counterBtn} <div className={style.formLabel}>点赞间隔</div>
/> <div className={style.counterRow}>
<span className={style.counterValue}>{formData.maxLikes} 次</span> <Button
<Button icon={<MinusOutlined />}
icon={<PlusOutlined />} onClick={() =>
onClick={() => handleUpdateFormData({
handleUpdateFormData({ maxLikes: formData.maxLikes + 10 }) interval: Math.max(1, formData.interval - 1),
} })
className={style.counterBtn} }
/> className={style.counterBtn}
</div> />
</div> <span className={style.counterValue}>{formData.interval} 秒</span>
<div className={style.formItem}> <Button
<div className={style.formLabel}>点赞时间范围</div> icon={<PlusOutlined />}
<div className={style.timeRow}> onClick={() =>
<Input handleUpdateFormData({ interval: formData.interval + 1 })
type="time" }
value={formData.startTime} className={style.counterBtn}
onChange={(e) => />
handleUpdateFormData({ startTime: e.target.value }) </div>
} </div>
className={style.inputTime} <div className={style.formItem}>
/> <div className={style.formLabel}>每日最大点赞数</div>
<span className={style.timeTo}>至</span> <div className={style.counterRow}>
<Input <Button
type="time" icon={<MinusOutlined />}
value={formData.endTime} onClick={() =>
onChange={(e) => handleUpdateFormData({ endTime: e.target.value })} handleUpdateFormData({
className={style.inputTime} maxLikes: Math.max(1, formData.maxLikes - 10),
/> })
</div> }
</div> className={style.counterBtn}
<div className={style.formItem}> />
<div className={style.formLabel}>点赞内容类型</div> <span className={style.counterValue}>{formData.maxLikes} 次</span>
<div className={style.contentTypes}> <Button
{(["text", "image", "video"] as ContentType[]).map((type) => ( icon={<PlusOutlined />}
<span onClick={() =>
key={type} handleUpdateFormData({ maxLikes: formData.maxLikes + 10 })
className={ }
formData.contentTypes.includes(type) className={style.counterBtn}
? style.contentTypeTagActive />
: style.contentTypeTag </div>
} </div>
onClick={() => { <div className={style.formItem}>
const newTypes = formData.contentTypes.includes(type) <div className={style.formLabel}>点赞时间范围</div>
? formData.contentTypes.filter((t) => t !== type) <div className={style.timeRow}>
: [...formData.contentTypes, type]; <Input
handleUpdateFormData({ contentTypes: newTypes }); type="time"
}} value={formData.startTime}
> onChange={(e) =>
{contentTypeLabels[type]} handleUpdateFormData({ startTime: e.target.value })
</span> }
))} className={style.inputTime}
</div> />
</div> <span className={style.timeTo}>至</span>
<div className={style.formItem}> <Input
<div className={style.switchRow}> type="time"
<span className={style.switchLabel}>启用好友标签</span> value={formData.endTime}
<Switch onChange={(e) => handleUpdateFormData({ endTime: e.target.value })}
checked={formData.enableFriendTags} className={style.inputTime}
onChange={(checked) => />
handleUpdateFormData({ enableFriendTags: checked }) </div>
} </div>
className={style.switch} <div className={style.formItem}>
/> <div className={style.formLabel}>点赞内容类型</div>
</div> <Select
{formData.enableFriendTags && ( mode="multiple"
<div className={style.formItem}> style={{ width: "100%" }}
<div className={style.formLabel}>好友标签</div> placeholder="请选择内容类型"
<Input value={formData.contentTypes}
placeholder="请输入标签" onChange={(value) => handleUpdateFormData({ contentTypes: value })}
value={formData.friendTags} >
onChange={(e) => {(["text", "image", "video"] as ContentType[]).map((type) => (
handleUpdateFormData({ friendTags: e.target.value }) <Select.Option key={type} value={type}>
} {contentTypeLabels[type]}
className={style.input} </Select.Option>
/> ))}
<div className={style.counterTip}>只给有此标签的好友点赞</div> </Select>
</div> </div>
)} <div className={style.formItem}>
</div> <div className={style.switchRow}>
<div className={style.formItem}> <span className={style.switchLabel}>启用好友标签</span>
<div className={style.switchRow}> <Switch
<span className={style.switchLabel}>自动开启</span> checked={formData.enableFriendTags}
<Switch onChange={(checked) =>
checked={autoEnabled} handleUpdateFormData({ enableFriendTags: checked })
onChange={setAutoEnabled} }
className={style.switch} className={style.switch}
/> />
</div> </div>
</div> {formData.enableFriendTags && (
</div> <div className={style.formItem}>
); <div className={style.formLabel}>好友标签</div>
<Input
// 步骤2：设备选择 placeholder="请输入标签"
const renderDeviceSelection = () => ( value={formData.friendTags}
<div className={style.basicSection}> onChange={(e) =>
<div className={style.formItem}> handleUpdateFormData({ friendTags: e.target.value })
<div className={style.formLabel}>选择设备</div> }
<Input className={style.input}
placeholder="请选择设备" />
value={formData.devices.join(", ")} <div className={style.counterTip}>只给有此标签的好友点赞</div>
readOnly </div>
onClick={() => message.info("这里应弹出设备选择器")} )}
className={style.input} </div>
/> <div className={style.formItem}>
{formData.devices.length > 0 && ( <div className={style.switchRow}>
<div className={style.selectedTip}> <span className={style.switchLabel}>自动开启</span>
已选设备: {formData.devices.length}个 <Switch
</div> checked={autoEnabled}
)} onChange={setAutoEnabled}
</div> className={style.switch}
</div> />
); </div>
</div>
// 步骤3：好友设置 </div>
const renderFriendSettings = () => ( );
<div className={style.basicSection}>
<div className={style.formItem}> // 步骤2：设备选择
<div className={style.formLabel}>选择微信好友</div> const renderDeviceSelection = () => (
<Input <div className={style.basicSection}>
placeholder="请选择微信好友" <div className={style.formItem}>
value={formData.friends.join(", ")} <div className={style.formLabel}>选择设备</div>
readOnly <Button
onClick={() => message.info("这里应弹出好友选择器")} type="dashed"
className={style.input} onClick={() => setDeviceModalOpen(true)}
/> style={{ width: "100%", marginBottom: 12 }}
{formData.friends.length > 0 && ( >
<div className={style.selectedTip}> 选择设备
已选好友: {formData.friends.length}个 </Button>
</div> <div>
)} {formData.devices.length > 0
</div> ? `已选设备: ${formData.devices.length} 个`
</div> : "未选择设备"}
); </div>
</div>
// 底部按钮 <Modal
const renderFooterBtn = () => ( title="选择设备"
<div className={style.footerBtnBar}> open={deviceModalOpen}
{currentStep > 1 && ( onCancel={() => setDeviceModalOpen(false)}
<Button onClick={handlePrev} className={style.prevBtn}> onOk={() => {
上一步 handleUpdateFormData({ devices: selectedDeviceRowKeys });
</Button> setDeviceModalOpen(false);
)} }}
{currentStep < 3 && ( okText="确定"
<Button cancelText="取消"
type="primary" width={520}
onClick={handleNext} >
className={style.nextBtn} <Table
disabled={ rowSelection={{
(currentStep === 1 && !formData.name.trim()) || type: "checkbox",
(currentStep === 2 && formData.devices.length === 0) selectedRowKeys: selectedDeviceRowKeys,
} onChange: (keys) => setSelectedDeviceRowKeys(keys as string[]),
> }}
下一步 columns={[
</Button> { title: "设备名称", dataIndex: "name", key: "name" },
)} { title: "ID", dataIndex: "id", key: "id" },
{currentStep === 3 && ( ]}
<Button dataSource={mockDevices}
type="primary" pagination={false}
onClick={handleComplete} rowKey="id"
loading={isSubmitting} size="small"
className={style.completeBtn} />
> </Modal>
{isEditMode ? "更新任务" : "创建任务"} </div>
</Button> );
)}
</div> // 步骤3：好友设置
); const renderFriendSettings = () => (
<div className={style.basicSection}>
return ( <div className={style.formItem}>
<Layout <div className={style.formLabel}>选择微信好友</div>
header={ <Button
<> type="dashed"
<NavBar onClick={() => setFriendModalOpen(true)}
back={null} style={{ width: "100%", marginBottom: 12 }}
style={{ background: "#fff" }} >
left={ 选择微信好友
<div className="nav-title"> </Button>
<ArrowLeftOutlined <div>
twoToneColor="#1677ff" {formData.friends.length > 0
onClick={() => navigate(-1)} ? `已选好友: ${formData.friends.length} 个`
/> : "未选择好友"}
</div> </div>
} </div>
> <Modal
<span className="nav-title"> title="选择微信好友"
{isEditMode ? "编辑自动点赞" : "新建自动点赞"} open={friendModalOpen}
</span> onCancel={() => setFriendModalOpen(false)}
</NavBar> onOk={() => {
{renderStepIndicator()} handleUpdateFormData({ friends: selectedFriendRowKeys });
</> setFriendModalOpen(false);
} }}
footer={renderFooterBtn()} okText="确定"
> cancelText="取消"
<div className={style.formBg}> width={520}
{isLoading ? ( >
<div className={style.formLoading}> <Table
<Spin /> rowSelection={{
</div> type: "checkbox",
) : ( selectedRowKeys: selectedFriendRowKeys,
<> onChange: (keys) => setSelectedFriendRowKeys(keys as string[]),
{currentStep === 1 && renderBasicSettings()} }}
{currentStep === 2 && renderDeviceSelection()} columns={[
{currentStep === 3 && renderFriendSettings()} { title: "好友昵称", dataIndex: "name", key: "name" },
</> { title: "ID", dataIndex: "id", key: "id" },
)} ]}
</div> dataSource={mockFriends}
</Layout> pagination={false}
); rowKey="id"
}; size="small"
/>
export default NewAutoLike; </Modal>
</div>
);
// 底部按钮
const renderFooterBtn = () => (
<div className={style.footerBtnBar}>
{currentStep > 1 && (
<Button onClick={handlePrev} className={style.prevBtn}>
上一步
</Button>
)}
{currentStep < 3 && (
<Button
type="primary"
onClick={handleNext}
className={style.nextBtn}
disabled={
(currentStep === 1 && !formData.name.trim()) ||
(currentStep === 2 && formData.devices.length === 0)
}
>
下一步
</Button>
)}
{currentStep === 3 && (
<Button
type="primary"
onClick={handleComplete}
loading={isSubmitting}
className={style.completeBtn}
>
{isEditMode ? "更新任务" : "创建任务"}
</Button>
)}
</div>
);
return (
<Layout
header={
<>
<div className={style.headerBar}>
<Button
type="text"
icon={<ArrowLeftOutlined />}
onClick={() => navigate(-1)}
className={style.backBtn}
/>
<span className={style.title}>
{isEditMode ? "编辑自动点赞" : "新建自动点赞"}
</span>
</div>
{renderStepIndicator()}
</>
}
footer={renderFooterBtn()}
>
<div className={style.formBg}>
{isLoading ? (
<div className={style.formLoading}>
<Spin />
</div>
) : (
<>
{currentStep === 1 && renderBasicSettings()}
{currentStep === 2 && renderDeviceSelection()}
{currentStep === 3 && renderFriendSettings()}
</>
)}
</div>
</Layout>
);
};
export default NewAutoLike;