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-23 11:33:26 +08:00
parent e1c32aff0e
commit 8bd1b965d6
3 changed files with 453 additions and 454 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
nkebao/.env.development
View File

@@ -1,5 +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_API_BASE_URL=https://ckbapi.quwanzhi.com
VITE_APP_TITLE=Nkebao Base VITE_APP_TITLE=Nkebao Base

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

@@ -6,17 +6,10 @@ import {
ArrowLeftOutlined, ArrowLeftOutlined,
CheckOutlined, CheckOutlined,
} from "@ant-design/icons"; } from "@ant-design/icons";
import { import { Button, Input, Switch, Spin, message } from "antd";
Button,
Input,
Switch,
Spin,
Modal,
Table,
Select,
message,
} from "antd";
import Layout from "@/components/Layout/Layout"; import Layout from "@/components/Layout/Layout";
import DeviceSelection from "@/components/DeviceSelection";
import FriendSelection from "@/components/FriendSelection";
import { import {
createAutoLikeTask, createAutoLikeTask,
updateAutoLikeTask, updateAutoLikeTask,
@@ -27,32 +20,20 @@ import {
ContentType, ContentType,
} from "@/pages/workspace/auto-like/record/api"; } from "@/pages/workspace/auto-like/record/api";
import style from "./new.module.scss"; import style from "./new.module.scss";
import MeauMobile from "@/components/MeauMobile/MeauMoible";
const contentTypeLabels: Record<ContentType, string> = { const contentTypeLabels: Record<ContentType, string> = {
text: "文字", text: "文字",
image: "图片", image: "图片",
video: "视频", video: "视频",
link: "链接",
}; };
const steps = [ const steps = [
{ title: "基础设置", desc: "设置点赞规则" }, { title: "基础设置", desc: "设置点赞规则" },
{ title: "设备选择", desc: "选择执行设备" }, { title: "设备选择", desc: "选择执行设备" },
{ title: "好友设置", desc: "选择目标人群" }, { title: "人群选择", desc: "选择目标人群" },
]; ];
// 假数据（实际应从接口获取）
const mockDevices = Array.from({ length: 10 }).map((_, i) => ({
key: String(i + 1),
name: `设备${i + 1}`,
id: `dev${i + 1}`,
}));
const mockFriends = Array.from({ length: 20 }).map((_, i) => ({
key: String(i + 1),
name: `好友${i + 1}`,
id: `friend${i + 1}`,
}));
const NewAutoLike: React.FC = () => { const NewAutoLike: React.FC = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const { id } = useParams<{ id: string }>(); const { id } = useParams<{ id: string }>();
@@ -75,15 +56,6 @@ const NewAutoLike: React.FC = () => {
enableFriendTags: false, enableFriendTags: false,
friendTags: "", friendTags: "",
}); });
// 设备/好友选择弹窗
const [deviceModalOpen, setDeviceModalOpen] = useState(false);
const [friendModalOpen, setFriendModalOpen] = useState(false);
const [selectedDeviceRowKeys, setSelectedDeviceRowKeys] = useState<string[]>(
[]
);
const [selectedFriendRowKeys, setSelectedFriendRowKeys] = useState<string[]>(
[]
);
useEffect(() => { useEffect(() => {
if (isEditMode && id) { if (isEditMode && id) {
@@ -115,8 +87,6 @@ const NewAutoLike: React.FC = () => {
(taskDetail as any).status === 1 || (taskDetail as any).status === 1 ||
(taskDetail as any).status === "running" (taskDetail as any).status === "running"
); );
setSelectedDeviceRowKeys(config.devices || []);
setSelectedFriendRowKeys(config.friends || []);
} }
} catch (error) { } catch (error) {
message.error("获取任务详情失败"); message.error("获取任务详情失败");
@@ -130,8 +100,23 @@ const NewAutoLike: React.FC = () => {
setFormData((prev) => ({ ...prev, ...data })); setFormData((prev) => ({ ...prev, ...data }));
}; };
const handleNext = () => setCurrentStep((prev) => Math.min(prev + 1, 3)); const handleNext = () => {
const handlePrev = () => setCurrentStep((prev) => Math.max(prev - 1, 1)); setCurrentStep((prev) => Math.min(prev + 1, 3));
// 滚动到顶部
const mainElement = document.querySelector("main");
if (mainElement) {
mainElement.scrollTo({ top: 0, behavior: "smooth" });
}
};
const handlePrev = () => {
setCurrentStep((prev) => Math.max(prev - 1, 1));
// 滚动到顶部
const mainElement = document.querySelector("main");
if (mainElement) {
mainElement.scrollTo({ top: 0, behavior: "smooth" });
}
};
const handleComplete = async () => { const handleComplete = async () => {
if (!formData.name.trim()) { if (!formData.name.trim()) {
@@ -219,7 +204,21 @@ const NewAutoLike: React.FC = () => {
} }
className={style.counterBtn} className={style.counterBtn}
/> />
<span className={style.counterValue}>{formData.interval} 秒</span> <div className={style.counterInputWrapper}>
<Input
type="number"
min={1}
max={60}
value={formData.interval}
onChange={(e) =>
handleUpdateFormData({
interval: Number.parseInt(e.target.value) || 1,
})
}
className={style.counterInput}
/>
<span className={style.counterUnit}>秒</span>
</div>
<Button <Button
icon={<PlusOutlined />} icon={<PlusOutlined />}
onClick={() => onClick={() =>
@@ -228,6 +227,7 @@ const NewAutoLike: React.FC = () => {
className={style.counterBtn} className={style.counterBtn}
/> />
</div> </div>
<div className={style.counterTip}>设置两次点赞之间的最小时间间隔</div>
</div> </div>
<div className={style.formItem}> <div className={style.formItem}>
<div className={style.formLabel}>每日最大点赞数</div> <div className={style.formLabel}>每日最大点赞数</div>
@@ -241,7 +241,21 @@ const NewAutoLike: React.FC = () => {
} }
className={style.counterBtn} className={style.counterBtn}
/> />
<span className={style.counterValue}>{formData.maxLikes} 次</span> <div className={style.counterInputWrapper}>
<Input
type="number"
min={1}
max={500}
value={formData.maxLikes}
onChange={(e) =>
handleUpdateFormData({
maxLikes: Number.parseInt(e.target.value) || 1,
})
}
className={style.counterInput}
/>
<span className={style.counterUnit}>次/天</span>
</div>
<Button <Button
icon={<PlusOutlined />} icon={<PlusOutlined />}
onClick={() => onClick={() =>
@@ -250,6 +264,7 @@ const NewAutoLike: React.FC = () => {
className={style.counterBtn} className={style.counterBtn}
/> />
</div> </div>
<div className={style.counterTip}>设置每天最多点赞的次数</div>
</div> </div>
<div className={style.formItem}> <div className={style.formItem}>
<div className={style.formLabel}>点赞时间范围</div> <div className={style.formLabel}>点赞时间范围</div>
@@ -262,7 +277,7 @@ const NewAutoLike: React.FC = () => {
} }
className={style.inputTime} className={style.inputTime}
/> />
<span className={style.timeTo}>至</span> <span className={style.timeSeparator}>至</span>
<Input <Input
type="time" type="time"
value={formData.endTime} value={formData.endTime}
@@ -270,22 +285,31 @@ const NewAutoLike: React.FC = () => {
className={style.inputTime} className={style.inputTime}
/> />
</div> </div>
<div className={style.counterTip}>设置每天可以点赞的时间段</div>
</div> </div>
<div className={style.formItem}> <div className={style.formItem}>
<div className={style.formLabel}>点赞内容类型</div> <div className={style.formLabel}>点赞内容类型</div>
<Select <div className={style.contentTypes}>
mode="multiple"
style={{ width: "100%" }}
placeholder="请选择内容类型"
value={formData.contentTypes}
onChange={(value) => handleUpdateFormData({ contentTypes: value })}
>
{(["text", "image", "video"] as ContentType[]).map((type) => ( {(["text", "image", "video"] as ContentType[]).map((type) => (
<Select.Option key={type} value={type}> <Button
key={type}
type={
formData.contentTypes.includes(type) ? "primary" : "default"
}
ghost={!formData.contentTypes.includes(type)}
className={style.contentTypeBtn}
onClick={() => {
const newTypes = formData.contentTypes.includes(type)
? formData.contentTypes.filter((t) => t !== type)
: [...formData.contentTypes, type];
handleUpdateFormData({ contentTypes: newTypes });
}}
>
{contentTypeLabels[type]} {contentTypeLabels[type]}
</Select.Option> </Button>
))} ))}
</Select> </div>
<div className={style.counterTip}>选择要点赞的内容类型</div>
</div> </div>
<div className={style.formItem}> <div className={style.formItem}>
<div className={style.switchRow}> <div className={style.switchRow}>
@@ -300,7 +324,6 @@ const NewAutoLike: React.FC = () => {
</div> </div>
{formData.enableFriendTags && ( {formData.enableFriendTags && (
<div className={style.formItem}> <div className={style.formItem}>
<div className={style.formLabel}>好友标签</div>
<Input <Input
placeholder="请输入标签" placeholder="请输入标签"
value={formData.friendTags} value={formData.friendTags}
@@ -323,6 +346,16 @@ const NewAutoLike: React.FC = () => {
/> />
</div> </div>
</div> </div>
<Button
type="primary"
block
onClick={handleNext}
size="large"
className={style.mainBtn}
disabled={!formData.name.trim()}
>
下一步
</Button>
</div> </div>
); );
@@ -330,48 +363,31 @@ const NewAutoLike: React.FC = () => {
const renderDeviceSelection = () => ( const renderDeviceSelection = () => (
<div className={style.basicSection}> <div className={style.basicSection}>
<div className={style.formItem}> <div className={style.formItem}>
<div className={style.formLabel}>选择设备</div> <DeviceSelection
<Button selectedDevices={formData.devices}
type="dashed" onSelect={(devices) => handleUpdateFormData({ devices })}
onClick={() => setDeviceModalOpen(true)} mode="dialog"
style={{ width: "100%", marginBottom: 12 }} showInput={true}
> showSelectedList={true}
选择设备
</Button>
<div>
{formData.devices.length > 0
? `已选设备: ${formData.devices.length} 个`
: "未选择设备"}
</div>
</div>
<Modal
title="选择设备"
open={deviceModalOpen}
onCancel={() => setDeviceModalOpen(false)}
onOk={() => {
handleUpdateFormData({ devices: selectedDeviceRowKeys });
setDeviceModalOpen(false);
}}
okText="确定"
cancelText="取消"
width={520}
>
<Table
rowSelection={{
type: "checkbox",
selectedRowKeys: selectedDeviceRowKeys,
onChange: (keys) => setSelectedDeviceRowKeys(keys as string[]),
}}
columns={[
{ title: "设备名称", dataIndex: "name", key: "name" },
{ title: "ID", dataIndex: "id", key: "id" },
]}
dataSource={mockDevices}
pagination={false}
rowKey="id"
size="small"
/> />
</Modal> </div>
<Button
onClick={handlePrev}
className={style.prevBtn}
size="large"
style={{ marginRight: 16 }}
>
上一步
</Button>
<Button
type="primary"
onClick={handleNext}
className={style.nextBtn}
size="large"
disabled={formData.devices.length === 0}
>
下一步
</Button>
</div> </div>
); );
@@ -379,82 +395,30 @@ const NewAutoLike: React.FC = () => {
const renderFriendSettings = () => ( const renderFriendSettings = () => (
<div className={style.basicSection}> <div className={style.basicSection}>
<div className={style.formItem}> <div className={style.formItem}>
<div className={style.formLabel}>选择微信好友</div> <FriendSelection
<Button selectedFriends={formData.friends}
type="dashed" onSelect={(friends) => handleUpdateFormData({ friends })}
onClick={() => setFriendModalOpen(true)} deviceIds={formData.devices}
style={{ width: "100%", marginBottom: 12 }}
>
选择微信好友
</Button>
<div>
{formData.friends.length > 0
? `已选好友: ${formData.friends.length} 个`
: "未选择好友"}
</div>
</div>
<Modal
title="选择微信好友"
open={friendModalOpen}
onCancel={() => setFriendModalOpen(false)}
onOk={() => {
handleUpdateFormData({ friends: selectedFriendRowKeys });
setFriendModalOpen(false);
}}
okText="确定"
cancelText="取消"
width={520}
>
<Table
rowSelection={{
type: "checkbox",
selectedRowKeys: selectedFriendRowKeys,
onChange: (keys) => setSelectedFriendRowKeys(keys as string[]),
}}
columns={[
{ title: "好友昵称", dataIndex: "name", key: "name" },
{ title: "ID", dataIndex: "id", key: "id" },
]}
dataSource={mockFriends}
pagination={false}
rowKey="id"
size="small"
/> />
</Modal> </div>
</div> <Button
); onClick={handlePrev}
className={style.prevBtn}
// 底部按钮 size="large"
const renderFooterBtn = () => ( style={{ marginRight: 16 }}
<div className={style.footerBtnBar}> >
{currentStep > 1 && ( 上一步
<Button onClick={handlePrev} className={style.prevBtn}> </Button>
上一步 <Button
</Button> type="primary"
)} onClick={handleComplete}
{currentStep < 3 && ( className={style.completeBtn}
<Button size="large"
type="primary" loading={isSubmitting}
onClick={handleNext} disabled={formData.friends.length === 0}
className={style.nextBtn} >
disabled={ {isEditMode ? "更新任务" : "创建任务"}
(currentStep === 1 && !formData.name.trim()) || </Button>
(currentStep === 2 && formData.devices.length === 0)
}
>
下一步
</Button>
)}
{currentStep === 3 && (
<Button
type="primary"
onClick={handleComplete}
loading={isSubmitting}
className={style.completeBtn}
>
{isEditMode ? "更新任务" : "创建任务"}
</Button>
)}
</div> </div>
); );
@@ -476,7 +440,7 @@ const NewAutoLike: React.FC = () => {
{renderStepIndicator()} {renderStepIndicator()}
</> </>
} }
footer={renderFooterBtn()} footer={<MeauMobile activeKey="workspace" />}
> >
<div className={style.formBg}> <div className={style.formBg}>
{isLoading ? ( {isLoading ? (

605
nkebao/src/pages/workspace/auto-like/new/new.module.scss
View File

@@ -1,286 +1,321 @@
.formBg { .formBg {
background: #f8f6f3; background: #f8f6f3;
min-height: 100vh; min-height: 100vh;
padding: 0 0 80px 0; padding: 0 0 80px 0;
position: relative; position: relative;
} }
.stepIndicatorWrapper { .stepIndicatorWrapper {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 20; z-index: 20;
background: #f8f6f3; background: #f8f6f3;
padding: 16px 0 8px 0; padding: 16px 0 8px 0;
} }
.stepIndicator { .stepIndicator {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 32px; gap: 32px;
} }
.stepItem { .stepItem {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
color: #bbb; color: #bbb;
font-size: 13px; font-size: 13px;
font-weight: 400; font-weight: 400;
transition: color 0.2s; transition: color 0.2s;
min-width: 80px; min-width: 80px;
} }
.stepActive { .stepActive {
color: #188eee; color: #188eee;
font-weight: 600; font-weight: 600;
} }
.stepDone { .stepDone {
color: #19c37d; color: #19c37d;
} }
.stepNum { .stepNum {
width: 28px; width: 28px;
height: 28px; height: 28px;
border-radius: 50%; border-radius: 50%;
background: #e5e7eb; background: #e5e7eb;
color: #888; color: #888;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 15px; font-size: 15px;
margin-bottom: 4px; margin-bottom: 4px;
} }
.stepActive .stepNum { .stepActive .stepNum {
background: #188eee; background: #188eee;
color: #fff; color: #fff;
} }
.stepDone .stepNum { .stepDone .stepNum {
background: #19c37d; background: #19c37d;
color: #fff; color: #fff;
} }
.stepTitle { .stepTitle {
font-size: 14px; font-size: 14px;
margin-top: 2px; margin-top: 2px;
font-weight: 500; font-weight: 500;
} }
.stepDesc { .stepDesc {
font-size: 12px; font-size: 12px;
color: #888; color: #888;
margin-top: 2px; margin-top: 2px;
text-align: center; text-align: center;
} }
.stepProgressBarBg { .stepProgressBarBg {
position: relative; position: relative;
width: 80%; width: 80%;
height: 4px; height: 4px;
background: #e5e7eb; background: #e5e7eb;
border-radius: 2px; border-radius: 2px;
margin: 12px auto 0 auto; margin: 12px auto 0 auto;
} }
.stepProgressBar { .stepProgressBar {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
height: 100%; height: 100%;
background: #188eee; background: #188eee;
border-radius: 2px; border-radius: 2px;
transition: width 0.3s; transition: width 0.3s;
} }
.basicSection { .basicSection {
background: none; background: none;
border-radius: 0; border-radius: 0;
box-shadow: none; box-shadow: none;
padding: 24px 16px 0 16px; padding: 24px 16px 0 16px;
width: 100%; width: 100%;
max-width: 600px; max-width: 600px;
margin: 0 auto; margin: 0 auto;
} }
.formItem { .formItem {
margin-bottom: 24px; margin-bottom: 24px;
} }
.formLabel { .formLabel {
font-size: 15px; font-size: 15px;
color: #222; color: #222;
font-weight: 500; font-weight: 500;
margin-bottom: 10px; margin-bottom: 10px;
} }
.input { .input {
height: 44px; height: 44px;
border-radius: 8px; border-radius: 8px;
font-size: 15px; font-size: 15px;
} }
.timeRow { .timeRow {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.inputTime { .inputTime {
width: 90px; width: 90px;
height: 40px; height: 40px;
border-radius: 8px; border-radius: 8px;
font-size: 15px; font-size: 15px;
} }
.timeTo { .timeTo {
margin: 0 8px; margin: 0 8px;
color: #888; color: #888;
} }
.counterRow { .counterRow {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0; gap: 0;
} }
.counterBtn { .counterBtn {
width: 40px; width: 40px;
height: 40px; height: 40px;
border-radius: 8px; border-radius: 8px;
background: #fff; background: #fff;
border: 1px solid #e5e7eb; border: 1px solid #e5e7eb;
font-size: 16px; font-size: 16px;
color: #188eee; color: #188eee;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
transition: border 0.2s; transition: border 0.2s;
} }
.counterBtn:hover { .counterBtn:hover {
border: 1px solid #188eee; border: 1px solid #188eee;
} }
.counterValue { .counterValue {
width: 48px; width: 48px;
text-align: center; text-align: center;
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
color: #222; color: #222;
} }
.counterTip { .counterInputWrapper {
font-size: 12px; position: relative;
color: #aaa; width: 80px;
margin-top: 4px; display: flex;
} align-items: center;
}
.contentTypes {
display: flex; .counterInput {
gap: 8px; width: 100%;
} height: 40px;
border-radius: 0;
.contentTypeTag { border: 1px solid #e5e7eb;
padding: 8px 16px; border-left: none;
border-radius: 6px; border-right: none;
background: #f5f5f5; text-align: center;
color: #666; font-size: 16px;
font-size: 14px; font-weight: 600;
cursor: pointer; color: #222;
transition: all 0.2s; padding: 0 8px;
} }
.contentTypeTag:hover { .counterUnit {
background: #e5e7eb; position: absolute;
} right: 8px;
color: #888;
.contentTypeTagActive { font-size: 14px;
padding: 8px 16px; pointer-events: none;
border-radius: 6px; }
background: #e6f7ff;
color: #188eee; .timeSeparator {
border: 1px solid #91d5ff; margin: 0 8px;
font-size: 14px; color: #888;
cursor: pointer; font-size: 14px;
transition: all 0.2s; }
}
.counterTip {
.switchRow { font-size: 12px;
display: flex; color: #aaa;
align-items: center; margin-top: 4px;
justify-content: space-between; }
}
.contentTypes {
.switchLabel { display: flex;
font-size: 15px; gap: 8px;
color: #222; }
font-weight: 500;
} .contentTypeTag {
padding: 8px 16px;
.switch { border-radius: 6px;
margin-top: 0; background: #f5f5f5;
} color: #666;
font-size: 14px;
.selectedTip { cursor: pointer;
font-size: 13px; transition: all 0.2s;
color: #888; }
margin-top: 8px;
} .contentTypeTag:hover {
background: #e5e7eb;
.formStepBtnRow { }
display: flex;
justify-content: flex-end; .contentTypeTagActive {
gap: 12px; padding: 8px 16px;
margin-top: 32px; border-radius: 6px;
} background: #e6f7ff;
color: #188eee;
.prevBtn { border: 1px solid #91d5ff;
height: 44px; font-size: 14px;
border-radius: 8px; cursor: pointer;
font-size: 15px; transition: all 0.2s;
min-width: 100px; }
}
.switchRow {
.nextBtn { display: flex;
height: 44px; align-items: center;
border-radius: 8px; justify-content: space-between;
font-size: 15px; }
min-width: 100px;
} .switchLabel {
font-size: 15px;
.completeBtn { color: #222;
height: 44px; font-weight: 500;
border-radius: 8px; }
font-size: 15px;
min-width: 100px; .switch {
} margin-top: 0;
}
.formLoading {
min-height: 200px; .selectedTip {
display: flex; font-size: 13px;
align-items: center; color: #888;
justify-content: center; margin-top: 8px;
} }
.footerBtnBar { .formStepBtnRow {
position: fixed; display: flex;
left: 0; justify-content: flex-end;
right: 0; gap: 12px;
bottom: 0; margin-top: 32px;
z-index: 30; }
background: #fff;
box-shadow: 0 -2px 8px rgba(0,0,0,0.04); .prevBtn {
padding: 16px 24px 24px 24px; height: 44px;
display: flex; border-radius: 8px;
justify-content: center; font-size: 15px;
gap: 16px; min-width: 100px;
} }
.prevBtn, .nextBtn, .completeBtn { .nextBtn {
height: 44px; height: 44px;
border-radius: 8px; border-radius: 8px;
font-size: 15px; font-size: 15px;
min-width: 120px; min-width: 100px;
}
.completeBtn {
height: 44px;
border-radius: 8px;
font-size: 15px;
min-width: 100px;
}
.formLoading {
min-height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
.footerBtnBar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 30;
background: #fff;
box-shadow: 0 -2px 8px rgba(0,0,0,0.04);
padding: 16px 24px 24px 24px;
display: flex;
justify-content: center;
gap: 16px;
}
.prevBtn, .nextBtn, .completeBtn {
height: 44px;
border-radius: 8px;
font-size: 15px;
min-width: 120px;
} }