Merge branch 'yongpxu-dev' into yongpxu-dev2
This commit is contained in:
笔记本里的永平
@@ -98,6 +98,7 @@ export default function NewPlan() {
|
||||
sceneId: Number(detail.scenario) || 1,
|
||||
remarkFormat: detail.remarkFormat ?? "",
|
||||
addFriendInterval: detail.addFriendInterval ?? 1,
|
||||
tips: detail.tips ?? "",
|
||||
}));
|
||||
}
|
||||
} else {
|
||||
@@ -178,6 +179,7 @@ export default function NewPlan() {
|
||||
case 1:
|
||||
return (
|
||||
<BasicSettings
|
||||
isEdit={isEdit}
|
||||
formData={formData}
|
||||
onChange={onChange}
|
||||
onNext={handleNext}
|
||||
|
||||
@@ -12,6 +12,7 @@ import EyeIcon from "@/components/icons/EyeIcon";
|
||||
import { uploadFile } from "@/api/utils";
|
||||
|
||||
interface BasicSettingsProps {
|
||||
isEdit: boolean;
|
||||
formData: any;
|
||||
onChange: (data: any) => void;
|
||||
onNext?: () => void;
|
||||
@@ -89,6 +90,7 @@ const generatePosterMaterials = (): Material[] => {
|
||||
};
|
||||
|
||||
export function BasicSettings({
|
||||
isEdit,
|
||||
formData,
|
||||
onChange,
|
||||
onNext,
|
||||
@@ -123,6 +125,7 @@ export function BasicSettings({
|
||||
// 自定义标签相关状态
|
||||
const [customTagInput, setCustomTagInput] = useState("");
|
||||
const [customTags, setCustomTags] = useState(formData.customTags || []);
|
||||
const [tips, setTips] = useState(formData.tips || "");
|
||||
const [selectedScenarioTags, setSelectedScenarioTags] = useState(
|
||||
formData.scenarioTags || []
|
||||
);
|
||||
@@ -188,7 +191,11 @@ export function BasicSettings({
|
||||
const today = new Date().toLocaleDateString("zh-CN").replace(/\//g, "");
|
||||
const sceneItem = sceneList.find((v) => formData.scenario === v.id);
|
||||
onChange({ ...formData, name: `${sceneItem?.name || "海报"}${today}` });
|
||||
}, [sceneList]);
|
||||
}, [isEdit]);
|
||||
|
||||
useEffect(() => {
|
||||
setTips(formData.tips || "");
|
||||
}, [formData.tips]);
|
||||
|
||||
// 选中场景
|
||||
const handleScenarioSelect = (sceneId: number) => {
|
||||
@@ -494,6 +501,22 @@ export function BasicSettings({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 输入获客成功提示 */}
|
||||
<div className="flex pt-4">
|
||||
<div className="border p-2 flex-1">
|
||||
<input
|
||||
type="text"
|
||||
value={tips}
|
||||
onChange={(e) => {
|
||||
setTips(e.target.value);
|
||||
onChange({ ...formData, tips: e.target.value });
|
||||
}}
|
||||
placeholder="请输入获客成功提示"
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 选素材 */}
|
||||
<div className="my-4" style={openPoster}>
|
||||
<div className="mb-4">选择海报</div>
|
||||
|
||||
@@ -97,9 +97,6 @@ Route::group('v1', function () {
|
||||
Route::get('autoCreate', 'app\api\controller\AllotRuleController@autoCreateAllotRules');// 自动创建分配规则 √
|
||||
});
|
||||
|
||||
Route::group('scenarios', function () {
|
||||
Route::any('', 'app\cunkebao\controller\plan\PostExternalApiV1Controller@index');
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
@@ -118,8 +118,13 @@ Route::group('v1/', function () {
|
||||
|
||||
|
||||
|
||||
Route::group('v1/frontend', function () {
|
||||
Route::group('v1/api/scenarios', function () {
|
||||
Route::any('', 'app\cunkebao\controller\plan\PostExternalApiV1Controller@index');
|
||||
});
|
||||
|
||||
|
||||
//小程序
|
||||
Route::group('v1/frontend', function () {
|
||||
Route::group('business/poster', function () {
|
||||
Route::post('getone', 'app\cunkebao\controller\plan\PosterWeChatMiniProgram@getPosterTaskData');
|
||||
Route::post('decryptphone', 'app\cunkebao\controller\plan\PosterWeChatMiniProgram@getPhoneNumber');
|
||||
@@ -129,5 +134,4 @@ Route::group('v1/frontend', function () {
|
||||
|
||||
|
||||
|
||||
|
||||
return [];
|
||||
121
Server/application/cunkebao/controller/TrafficController.php
Normal file
121
Server/application/cunkebao/controller/TrafficController.php
Normal file
@@ -0,0 +1,121 @@
|
||||
<?php
|
||||
|
||||
namespace app\cunkebao\controller;
|
||||
|
||||
use think\Controller;
|
||||
use think\Db;
|
||||
|
||||
class TrafficController extends Controller
|
||||
{
|
||||
|
||||
public function getList(){
|
||||
$page = $this->request->param('page',1);
|
||||
$pageSize = $this->request->param('pageSize',10);
|
||||
$device = $this->request->param('device','');
|
||||
$packageId = $this->request->param('packageId',''); // 流量池id
|
||||
$userValue = $this->request->param('userValue',''); // 1高价值客户 2中价值客户 3低价值客户
|
||||
$addStatus = $this->request->param('addStatus',''); // 1待添加 2已添加 3添加失败 4重复用户
|
||||
$keyword = $this->request->param('keyword','');
|
||||
|
||||
$companyId = $this->request->userInfo['companyId'];
|
||||
|
||||
// 1 文字 3图片 47动态图片 34语言 43视频 42名片 40/20链接 49文件 419430449转账 436207665红包
|
||||
|
||||
$where = [];
|
||||
|
||||
// 添加筛选条件
|
||||
if (!empty($device)) {
|
||||
$where['d.id'] = $device;
|
||||
}
|
||||
|
||||
if (!empty($packageId)) {
|
||||
$where['tp.id'] = $packageId;
|
||||
}
|
||||
|
||||
if (!empty($userValue)) {
|
||||
$where['tp.userValue'] = $userValue;
|
||||
}
|
||||
|
||||
if (!empty($addStatus)) {
|
||||
$where['tp.addStatus'] = $addStatus;
|
||||
}
|
||||
|
||||
|
||||
// 构建查询 - 通过traffic_pool的identifier关联wechat_account的wechatId、alias或phone
|
||||
$query = Db::name('traffic_pool')->alias('tp')
|
||||
->join('wechat_account wa', 'wa.wechatId = tp.wechatId', 'LEFT')
|
||||
->field('tp.id, tp.identifier,tp.createTime, tp.updateTime,
|
||||
wa.wechatId, wa.alias, wa.phone, wa.nickname, wa.avatar')
|
||||
->where($where);
|
||||
|
||||
// 关键词搜索 - 支持通过wechat_friendship的identifier关联wechat_account的wechatId、alias或phone
|
||||
if (!empty($keyword)) {
|
||||
$query->where(function($q) use ($keyword) {
|
||||
$q->where('tp.identifier', 'like', '%' . $keyword . '%')
|
||||
->whereOr('wa.wechatId', 'like', '%' . $keyword . '%')
|
||||
->whereOr('wa.alias', 'like', '%' . $keyword . '%')
|
||||
->whereOr('wa.phone', 'like', '%' . $keyword . '%')
|
||||
->whereOr('wa.nickname', 'like', '%' . $keyword . '%');
|
||||
});
|
||||
}
|
||||
|
||||
// 获取总数
|
||||
$total = $query->count();
|
||||
|
||||
|
||||
// 分页查询
|
||||
$list = $query->order('tp.createTime desc')
|
||||
->group('tp.identifier')
|
||||
->order('tp.id desc')
|
||||
->page($page, $pageSize)
|
||||
->select();
|
||||
|
||||
|
||||
|
||||
return json([
|
||||
'code' => 200,
|
||||
'msg' => '获取成功',
|
||||
'data' => [
|
||||
'list' => $list,
|
||||
'total' => $total,
|
||||
]
|
||||
]);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 用户旅程
|
||||
* @return false|string
|
||||
* @throws \think\db\exception\DataNotFoundException
|
||||
* @throws \think\db\exception\ModelNotFoundException
|
||||
* @throws \think\exception\DbException
|
||||
*/
|
||||
public function getUserJourney()
|
||||
{
|
||||
$page = $this->request->param('page',1);
|
||||
$pageSize = $this->request->param('pageSize',10);
|
||||
$userId = $this->request->param('userId','');
|
||||
if(empty($userId)){
|
||||
return json_encode(['code' => 500, 'msg' => '用户id不能为空']);
|
||||
}
|
||||
|
||||
$query = Db::name('user_portrait')
|
||||
->field('id,type,trafficPoolId,remark,count,createTime,updateTime')
|
||||
->where(['trafficPoolId' => $userId]);
|
||||
|
||||
$total = $query->count();
|
||||
|
||||
$list = $query->order('createTime desc')
|
||||
->page($page,$pageSize)
|
||||
->select();
|
||||
|
||||
|
||||
foreach ($list as $k=>$v){
|
||||
$list[$k]['createTime'] = date('Y-m-d H:i:s',$v['createTime']);
|
||||
$list[$k]['updateTime'] = date('Y-m-d H:i:s',$v['updateTime']);
|
||||
}
|
||||
return json_encode(['code' => 200,'data'=>['list' => $list,'total'=>$total],'获取成功']);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@@ -96,7 +96,8 @@ class PostExternalApiV1Controller extends Controller
|
||||
if (!$trafficPool) {
|
||||
$trafficPoolId =Db::name('traffic_pool')->insertGetId([
|
||||
'identifier' => $identifier,
|
||||
'mobile' => $params['phone']
|
||||
'mobile' => !empty($params['phone']) ? $params['phone'] : '',
|
||||
'createTime' => time()
|
||||
]);
|
||||
}else{
|
||||
$trafficPoolId = $trafficPool['id'];
|
||||
|
||||
@@ -126,7 +126,10 @@ class PosterWeChatMiniProgram extends Controller
|
||||
// todo 获取海报获客任务的任务/海报数据 -- 表还没设计好，不急 ck_customer_acquisition_task
|
||||
public function getPosterTaskData() {
|
||||
$id = request()->param('id');
|
||||
$task = Db::name('customer_acquisition_task')->where(['id' => $id,'deleteTime' => 0])->find();
|
||||
$task = Db::name('customer_acquisition_task')
|
||||
->where(['id' => $id,'deleteTime' => 0])
|
||||
->field('id,name,sceneConf,status')
|
||||
->find();
|
||||
if (!$task) {
|
||||
return json([
|
||||
'code' => 400,
|
||||
@@ -150,13 +153,20 @@ class PosterWeChatMiniProgram extends Controller
|
||||
}
|
||||
|
||||
|
||||
if(isset($sceneConf['tips'])) {
|
||||
$sTip = $sceneConf['tips'];
|
||||
} else {
|
||||
$sTip = '';
|
||||
}
|
||||
|
||||
unset($task['sceneConf']);
|
||||
$task['sTip'] = $sTip;
|
||||
|
||||
$data = [
|
||||
'id' => $task['id'],
|
||||
'name' => $task['name'],
|
||||
'poster' => ['sUrl' => $posterUrl],
|
||||
'sTip' => '',
|
||||
'task' => $task,
|
||||
];
|
||||
|
||||
|
||||
|
||||
@@ -191,7 +191,6 @@ class Adapter implements WeChatServiceInterface
|
||||
}
|
||||
//筛选出设备在线微信在线
|
||||
$wechatIdAccountIdMap = $this->getWeChatIdsAccountIdsMapByDeviceIds($task_info['reqConf']['device']);
|
||||
|
||||
if (empty($wechatIdAccountIdMap)) {
|
||||
continue;
|
||||
}
|
||||
@@ -213,11 +212,9 @@ class Adapter implements WeChatServiceInterface
|
||||
continue;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 判断24h内加的好友数量，friend_task 先固定10个人 getLast24hAddedFriendsCount
|
||||
$last24hAddedFriendsCount = $this->getLast24hAddedFriendsCount($wechatId);
|
||||
if ($last24hAddedFriendsCount >= 10) {
|
||||
if ($last24hAddedFriendsCount >= 20) {
|
||||
continue;
|
||||
}
|
||||
|
||||
@@ -233,14 +230,15 @@ class Adapter implements WeChatServiceInterface
|
||||
$task['processed_wechat_ids'] = $task['processed_wechat_ids'] . ',' . $wechatId; // 处理失败任务用，用于过滤已处理的微信号
|
||||
break;
|
||||
}
|
||||
Db::name('task_customer')
|
||||
$res = Db::name('task_customer')
|
||||
->where('id', $task['id'])
|
||||
->update([
|
||||
'status' => $friendAddTaskCreated ? 1 : 3,
|
||||
'fail_reason' => $friendAddTaskCreated ? '' : '已经是好友了',
|
||||
'processed_wechat_ids' => $task['processed_wechat_ids'],
|
||||
'updated_at' => time()
|
||||
]); // ~~不用管，回头再添加再判断即可~~
|
||||
'updateTime' => time()
|
||||
]);
|
||||
// ~~不用管，回头再添加再判断即可~~
|
||||
// 失败一定是另一个进程/定时器在检查的
|
||||
|
||||
}
|
||||
@@ -254,9 +252,9 @@ class Adapter implements WeChatServiceInterface
|
||||
|
||||
$tasks = Db::name('task_customer')
|
||||
->whereIn('status', [1,2])
|
||||
->where('updated_at', '>=', (time() - 86400 * 3))
|
||||
->where('updateTime', '>=', (time() - 86400 * 3))
|
||||
->limit(50)
|
||||
->order('updated_at DESC')
|
||||
->order('updateTime DESC')
|
||||
->select();
|
||||
|
||||
if (empty($tasks)) {
|
||||
@@ -296,7 +294,7 @@ class Adapter implements WeChatServiceInterface
|
||||
|
||||
Db::name('task_customer')
|
||||
->where('id', $task['id'])
|
||||
->update(['status' => 4, 'updated_at' => time()]);
|
||||
->update(['status' => 4, 'updateTime' => time()]);
|
||||
|
||||
$wechatFriendRecord = $this->getWeChatAccoutIdAndFriendIdByWeChatIdAndFriendPhone($passedWeChatId, $task['phone']);
|
||||
$msgConf = is_string($task_info['msgConf']) ? json_decode($task_info['msgConf'], 1) : $task_info['msgConf'];
|
||||
@@ -316,7 +314,7 @@ class Adapter implements WeChatServiceInterface
|
||||
if (isset($latestFriendTask['status']) && $latestFriendTask['status'] == 1) {
|
||||
Db::name('task_customer')
|
||||
->where('id', $task['id'])
|
||||
->update(['status' => 2, 'updated_at' => time()]);
|
||||
->update(['status' => 2, 'updateTime' => time()]);
|
||||
break;
|
||||
}
|
||||
|
||||
@@ -324,7 +322,7 @@ class Adapter implements WeChatServiceInterface
|
||||
if (isset($latestFriendTask['status']) && $latestFriendTask['status'] == 2) {
|
||||
Db::name('task_customer')
|
||||
->where('id', $task['id'])
|
||||
->update(['status' => 3, 'fail_reason' => $latestFriendTask['extra'] ?? '未知原因', 'updated_at' => time()]);
|
||||
->update(['status' => 3, 'fail_reason' => $latestFriendTask['extra'] ?? '未知原因', 'updateTime' => time()]);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
173
nkebao/src/api/autoLike.ts
Normal file
173
nkebao/src/api/autoLike.ts
Normal file
@@ -0,0 +1,173 @@
|
||||
import { request } from "./request";
|
||||
import {
|
||||
LikeTask,
|
||||
CreateLikeTaskData,
|
||||
UpdateLikeTaskData,
|
||||
LikeRecord,
|
||||
ApiResponse,
|
||||
PaginatedResponse,
|
||||
} from "@/types/auto-like";
|
||||
|
||||
// 获取自动点赞任务列表
|
||||
export async function fetchAutoLikeTasks(): Promise<LikeTask[]> {
|
||||
try {
|
||||
const res = await request<ApiResponse<PaginatedResponse<LikeTask>>>({
|
||||
url: "/v1/workbench/list",
|
||||
method: "GET",
|
||||
params: {
|
||||
type: 1,
|
||||
page: 1,
|
||||
limit: 100,
|
||||
},
|
||||
});
|
||||
|
||||
if (res.code === 200 && res.data) {
|
||||
return res.data.list || [];
|
||||
}
|
||||
return [];
|
||||
} catch (error) {
|
||||
console.error("获取自动点赞任务失败:", error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
// 获取单个任务详情
|
||||
export async function fetchAutoLikeTaskDetail(
|
||||
id: string
|
||||
): Promise<LikeTask | null> {
|
||||
try {
|
||||
console.log(`Fetching task detail for id: ${id}`);
|
||||
const res = await request<any>({
|
||||
url: "/v1/workbench/detail",
|
||||
method: "GET",
|
||||
params: { id },
|
||||
});
|
||||
console.log("Task detail API response:", res);
|
||||
|
||||
if (res.code === 200) {
|
||||
if (res.data) {
|
||||
if (typeof res.data === "object") {
|
||||
return res.data;
|
||||
} else {
|
||||
console.error(
|
||||
"Task detail API response data is not an object:",
|
||||
res.data
|
||||
);
|
||||
return null;
|
||||
}
|
||||
} else {
|
||||
console.error("Task detail API response missing data field:", res);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
console.error("Task detail API error:", res.msg || "Unknown error");
|
||||
return null;
|
||||
} catch (error) {
|
||||
console.error("获取任务详情失败:", error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
// 创建自动点赞任务
|
||||
export async function createAutoLikeTask(
|
||||
data: CreateLikeTaskData
|
||||
): Promise<ApiResponse> {
|
||||
return request({
|
||||
url: "/v1/workbench/create",
|
||||
method: "POST",
|
||||
data: {
|
||||
...data,
|
||||
type: 1, // 自动点赞类型
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// 更新自动点赞任务
|
||||
export async function updateAutoLikeTask(
|
||||
data: UpdateLikeTaskData
|
||||
): Promise<ApiResponse> {
|
||||
return request({
|
||||
url: "/v1/workbench/update",
|
||||
method: "POST",
|
||||
data: {
|
||||
...data,
|
||||
type: 1, // 自动点赞类型
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// 删除自动点赞任务
|
||||
export async function deleteAutoLikeTask(id: string): Promise<ApiResponse> {
|
||||
return request({
|
||||
url: "/v1/workbench/delete",
|
||||
method: "DELETE",
|
||||
params: { id },
|
||||
});
|
||||
}
|
||||
|
||||
// 切换任务状态
|
||||
export async function toggleAutoLikeTask(
|
||||
id: string,
|
||||
status: string
|
||||
): Promise<ApiResponse> {
|
||||
return request({
|
||||
url: "/v1/workbench/update-status",
|
||||
method: "POST",
|
||||
data: { id, status },
|
||||
});
|
||||
}
|
||||
|
||||
// 复制自动点赞任务
|
||||
export async function copyAutoLikeTask(id: string): Promise<ApiResponse> {
|
||||
return request({
|
||||
url: "/v1/workbench/copy",
|
||||
method: "POST",
|
||||
data: { id },
|
||||
});
|
||||
}
|
||||
|
||||
// 获取点赞记录
|
||||
export async function fetchLikeRecords(
|
||||
workbenchId: string,
|
||||
page: number = 1,
|
||||
limit: number = 20,
|
||||
keyword?: string
|
||||
): Promise<PaginatedResponse<LikeRecord>> {
|
||||
try {
|
||||
const params: any = {
|
||||
workbenchId,
|
||||
page: page.toString(),
|
||||
limit: limit.toString(),
|
||||
};
|
||||
|
||||
if (keyword) {
|
||||
params.keyword = keyword;
|
||||
}
|
||||
|
||||
const res = await request<ApiResponse<PaginatedResponse<LikeRecord>>>({
|
||||
url: "/v1/workbench/records",
|
||||
method: "GET",
|
||||
params,
|
||||
});
|
||||
|
||||
if (res.code === 200 && res.data) {
|
||||
return res.data;
|
||||
}
|
||||
|
||||
return {
|
||||
list: [],
|
||||
total: 0,
|
||||
page: 1,
|
||||
limit: 20,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("获取点赞记录失败:", error);
|
||||
return {
|
||||
list: [],
|
||||
total: 0,
|
||||
page: 1,
|
||||
limit: 20,
|
||||
};
|
||||
}
|
||||
}
|
||||
73
nkebao/src/api/groupPush.ts
Normal file
73
nkebao/src/api/groupPush.ts
Normal file
@@ -0,0 +1,73 @@
|
||||
import request from "./request";
|
||||
|
||||
export interface GroupPushTask {
|
||||
id: string;
|
||||
name: string;
|
||||
status: number; // 1: 运行中, 2: 已暂停
|
||||
deviceCount: number;
|
||||
targetGroups: string[];
|
||||
pushCount: number;
|
||||
successCount: number;
|
||||
lastPushTime: string;
|
||||
createTime: string;
|
||||
creator: string;
|
||||
pushInterval: number;
|
||||
maxPushPerDay: number;
|
||||
timeRange: { start: string; end: string };
|
||||
messageType: "text" | "image" | "video" | "link";
|
||||
messageContent: string;
|
||||
targetTags: string[];
|
||||
pushMode: "immediate" | "scheduled";
|
||||
scheduledTime?: string;
|
||||
}
|
||||
|
||||
interface ApiResponse<T = any> {
|
||||
code: number;
|
||||
message: string;
|
||||
data: T;
|
||||
}
|
||||
|
||||
export async function fetchGroupPushTasks(): Promise<GroupPushTask[]> {
|
||||
const response = await request("/v1/workbench/list", { type: 3 }, "GET");
|
||||
if (Array.isArray(response)) return response;
|
||||
if (response && Array.isArray(response.data)) return response.data;
|
||||
return [];
|
||||
}
|
||||
|
||||
export async function deleteGroupPushTask(id: string): Promise<ApiResponse> {
|
||||
return request(`/v1/workspace/group-push/tasks/${id}`, {}, "DELETE");
|
||||
}
|
||||
|
||||
export async function toggleGroupPushTask(
|
||||
id: string,
|
||||
status: string
|
||||
): Promise<ApiResponse> {
|
||||
return request(
|
||||
`/v1/workspace/group-push/tasks/${id}/toggle`,
|
||||
{ status },
|
||||
"POST"
|
||||
);
|
||||
}
|
||||
|
||||
export async function copyGroupPushTask(id: string): Promise<ApiResponse> {
|
||||
return request(`/v1/workspace/group-push/tasks/${id}/copy`, {}, "POST");
|
||||
}
|
||||
|
||||
export async function createGroupPushTask(
|
||||
taskData: Partial<GroupPushTask>
|
||||
): Promise<ApiResponse> {
|
||||
return request("/v1/workspace/group-push/tasks", taskData, "POST");
|
||||
}
|
||||
|
||||
export async function updateGroupPushTask(
|
||||
id: string,
|
||||
taskData: Partial<GroupPushTask>
|
||||
): Promise<ApiResponse> {
|
||||
return request(`/v1/workspace/group-push/tasks/${id}`, taskData, "PUT");
|
||||
}
|
||||
|
||||
export async function getGroupPushTaskDetail(
|
||||
id: string
|
||||
): Promise<GroupPushTask> {
|
||||
return request(`/v1/workspace/group-push/tasks/${id}`);
|
||||
}
|
||||
@@ -82,13 +82,12 @@ const Scene: React.FC = () => {
|
||||
<Layout
|
||||
header={
|
||||
<NavBar back={null} style={{ background: "#fff" }}>
|
||||
<div className={style["nav-title"]}>场景获客</div>
|
||||
<div className="nav-title">场景获客</div>
|
||||
<Button
|
||||
size="small"
|
||||
color="primary"
|
||||
onClick={handleNewPlan}
|
||||
className={style["new-plan-btn"]}
|
||||
style={{ marginLeft: "auto" }}
|
||||
className="new-plan-btn"
|
||||
>
|
||||
<PlusOutlined /> 新建计划
|
||||
</Button>
|
||||
@@ -113,21 +112,19 @@ const Scene: React.FC = () => {
|
||||
<NavBar
|
||||
back={null}
|
||||
style={{ background: "#fff" }}
|
||||
left={<div className={style["nav-title"]}>场景获客</div>}
|
||||
left={<div className="nav-title">场景获客</div>}
|
||||
right={
|
||||
<Button
|
||||
size="small"
|
||||
color="primary"
|
||||
onClick={handleNewPlan}
|
||||
className={style["new-plan-btn"]}
|
||||
style={{ marginLeft: "auto" }}
|
||||
className="new-plan-btn"
|
||||
>
|
||||
<PlusOutlined /> 新建计划
|
||||
</Button>
|
||||
}
|
||||
></NavBar>
|
||||
}
|
||||
footer={<MeauMobile />}
|
||||
>
|
||||
<div className={style["scene-page"]}>
|
||||
<div className={style["scenarios-grid"]}>
|
||||
|
||||
@@ -2,18 +2,6 @@
|
||||
padding:0 16px;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.new-plan-btn {
|
||||
font-size: 14px;
|
||||
height: 32px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -356,8 +356,8 @@ const ScenarioList: React.FC = () => {
|
||||
back={null}
|
||||
style={{ background: "#fff" }}
|
||||
left={
|
||||
<div className={style["nav-title"]}>
|
||||
<span style={{ verticalAlign: "middle" }}>
|
||||
<div className="nav-title">
|
||||
<span className="nav-back-btn">
|
||||
<LeftOutline onClick={() => navigate(-1)} fontSize={24} />
|
||||
</span>
|
||||
{scenarioName}
|
||||
@@ -368,7 +368,7 @@ const ScenarioList: React.FC = () => {
|
||||
size="small"
|
||||
color="primary"
|
||||
onClick={handleCreateNewPlan}
|
||||
className={style["new-plan-btn"]}
|
||||
className="new-plan-btn"
|
||||
>
|
||||
<PlusOutlined /> 新建计划
|
||||
</Button>
|
||||
|
||||
@@ -248,41 +248,36 @@ const NewPlan: React.FC = () => {
|
||||
return (
|
||||
<Layout
|
||||
header={
|
||||
<NavBar
|
||||
back={null}
|
||||
style={{ background: "#fff" }}
|
||||
left={
|
||||
<div className={style["nav-title"]}>
|
||||
{isEdit ? "编辑计划" : "新建计划"}
|
||||
</div>
|
||||
}
|
||||
right={
|
||||
<Button
|
||||
size="small"
|
||||
onClick={() => navigate(-1)}
|
||||
className={style["back-btn"]}
|
||||
>
|
||||
<LeftOutline />
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<>
|
||||
<NavBar
|
||||
back={null}
|
||||
style={{ background: "#fff" }}
|
||||
left={
|
||||
<div className="nav-title">
|
||||
<span className="nav-back-btn">
|
||||
<LeftOutline onClick={() => navigate(-1)} fontSize={24} />
|
||||
</span>
|
||||
{isEdit ? "编辑计划" : "新建计划"}
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* 步骤指示器 */}
|
||||
<div className={style["steps-container"]}>
|
||||
<Steps current={currentStep - 1}>
|
||||
{steps.map((step) => (
|
||||
<Steps.Step
|
||||
key={step.id}
|
||||
title={step.title}
|
||||
description={step.subtitle}
|
||||
/>
|
||||
))}
|
||||
</Steps>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
footer={<MeauMobile />}
|
||||
>
|
||||
<div className={style["new-plan-page"]}>
|
||||
{/* 步骤指示器 */}
|
||||
<div className={style["steps-container"]}>
|
||||
<Steps current={currentStep - 1}>
|
||||
{steps.map((step) => (
|
||||
<Steps.Step
|
||||
key={step.id}
|
||||
title={step.title}
|
||||
description={step.subtitle}
|
||||
/>
|
||||
))}
|
||||
</Steps>
|
||||
</div>
|
||||
|
||||
{/* 步骤内容 */}
|
||||
<div className={style["step-content"]}>{renderStepContent()}</div>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
.new-plan-page {
|
||||
background: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
@@ -31,10 +29,8 @@
|
||||
}
|
||||
|
||||
.steps-container {
|
||||
background: white;
|
||||
padding: 20px 16px;
|
||||
background: #ffffff;
|
||||
margin-bottom: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.step-content {
|
||||
|
||||
@@ -1,10 +0,0 @@
|
||||
import React from "react";
|
||||
import PlaceholderPage from "@/components/PlaceholderPage";
|
||||
|
||||
const AutoGroup: React.FC = () => {
|
||||
return (
|
||||
<PlaceholderPage title="自动分组" showAddButton addButtonText="新建分组" />
|
||||
);
|
||||
};
|
||||
|
||||
export default AutoGroup;
|
||||
@@ -1,8 +0,0 @@
|
||||
import React from "react";
|
||||
import PlaceholderPage from "@/components/PlaceholderPage";
|
||||
|
||||
const AutoGroupDetail: React.FC = () => {
|
||||
return <PlaceholderPage title="自动分组详情" />;
|
||||
};
|
||||
|
||||
export default AutoGroupDetail;
|
||||
6
nkebao/src/pages/workspace/auto-group/detail/api.ts
Normal file
6
nkebao/src/pages/workspace/auto-group/detail/api.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
import request from "@/api/request";
|
||||
|
||||
// 获取自动建群任务详情
|
||||
export function getAutoGroupDetail(id: string) {
|
||||
return request(`/api/auto-group/detail/${id}`);
|
||||
}
|
||||
149
nkebao/src/pages/workspace/auto-group/detail/index.module.scss
Normal file
149
nkebao/src/pages/workspace/auto-group/detail/index.module.scss
Normal file
@@ -0,0 +1,149 @@
|
||||
.autoGroupDetail {
|
||||
padding: 16px 0 80px 0;
|
||||
background: #f7f8fa;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.headerBar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 48px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #222;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.infoCard {
|
||||
margin-bottom: 16px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.03);
|
||||
border: none;
|
||||
background: #fff;
|
||||
padding: 16px;
|
||||
}
|
||||
.infoGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
.infoTitle {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #1677ff;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.infoItem {
|
||||
font-size: 13px;
|
||||
color: #444;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.progressSection {
|
||||
margin-top: 16px;
|
||||
}
|
||||
.progressCard {
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.03);
|
||||
border: none;
|
||||
background: #fff;
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.progressHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.groupList {
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.groupCard {
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.03);
|
||||
border: none;
|
||||
background: #fff;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
.groupHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.memberGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 6px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.memberItem {
|
||||
background: #f5f7fa;
|
||||
border-radius: 8px;
|
||||
padding: 4px 8px;
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.warnText {
|
||||
color: #faad14;
|
||||
font-size: 13px;
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.successText {
|
||||
color: #389e0d;
|
||||
font-size: 13px;
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.successAlert {
|
||||
color: #389e0d;
|
||||
background: #f6ffed;
|
||||
border-radius: 8px;
|
||||
padding: 8px 0;
|
||||
text-align: center;
|
||||
margin-top: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.emptyCard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px 0;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.03);
|
||||
margin-top: 32px;
|
||||
}
|
||||
.emptyTitle {
|
||||
font-size: 16px;
|
||||
color: #888;
|
||||
margin: 12px 0 4px 0;
|
||||
}
|
||||
.emptyDesc {
|
||||
font-size: 13px;
|
||||
color: #bbb;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
384
nkebao/src/pages/workspace/auto-group/detail/index.tsx
Normal file
384
nkebao/src/pages/workspace/auto-group/detail/index.tsx
Normal file
@@ -0,0 +1,384 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useParams, useNavigate } from "react-router-dom";
|
||||
import {
|
||||
Card,
|
||||
Button,
|
||||
Toast,
|
||||
ProgressBar,
|
||||
Tag,
|
||||
SpinLoading,
|
||||
} from "antd-mobile";
|
||||
import { TeamOutline, LeftOutline } from "antd-mobile-icons";
|
||||
import { AlertOutlined } from "@ant-design/icons";
|
||||
import Layout from "@/components/Layout/Layout";
|
||||
import MeauMobile from "@/components/MeauMobile/MeauMoible";
|
||||
import style from "./index.module.scss";
|
||||
|
||||
interface GroupMember {
|
||||
id: string;
|
||||
nickname: string;
|
||||
wechatId: string;
|
||||
tags: string[];
|
||||
}
|
||||
|
||||
interface Group {
|
||||
id: string;
|
||||
members: GroupMember[];
|
||||
}
|
||||
|
||||
interface GroupTaskDetail {
|
||||
id: string;
|
||||
name: string;
|
||||
status: "preparing" | "creating" | "completed" | "paused";
|
||||
totalGroups: number;
|
||||
currentGroupIndex: number;
|
||||
groups: Group[];
|
||||
createTime: string;
|
||||
lastUpdateTime: string;
|
||||
creator: string;
|
||||
deviceCount: number;
|
||||
targetFriends: number;
|
||||
groupSize: { min: number; max: number };
|
||||
timeRange: { start: string; end: string };
|
||||
targetTags: string[];
|
||||
groupNameTemplate: string;
|
||||
groupDescription: string;
|
||||
}
|
||||
|
||||
const mockTaskDetail: GroupTaskDetail = {
|
||||
id: "1",
|
||||
name: "VIP客户建群",
|
||||
status: "creating",
|
||||
totalGroups: 5,
|
||||
currentGroupIndex: 2,
|
||||
groups: Array.from({ length: 5 }).map((_, index) => ({
|
||||
id: `group-${index}`,
|
||||
members: Array.from({ length: Math.floor(Math.random() * 10) + 30 }).map(
|
||||
(_, mIndex) => ({
|
||||
id: `member-${index}-${mIndex}`,
|
||||
nickname: `用户${mIndex + 1}`,
|
||||
wechatId: `wx_${mIndex}`,
|
||||
tags: [`标签${(mIndex % 3) + 1}`],
|
||||
})
|
||||
),
|
||||
})),
|
||||
createTime: "2024-11-20 19:04:14",
|
||||
lastUpdateTime: "2025-02-06 13:12:35",
|
||||
creator: "admin",
|
||||
deviceCount: 2,
|
||||
targetFriends: 156,
|
||||
groupSize: { min: 20, max: 50 },
|
||||
timeRange: { start: "09:00", end: "21:00" },
|
||||
targetTags: ["VIP客户", "高价值"],
|
||||
groupNameTemplate: "VIP客户交流群{序号}",
|
||||
groupDescription: "VIP客户专属交流群，提供优质服务",
|
||||
};
|
||||
|
||||
const GroupPreview: React.FC<{
|
||||
groupIndex: number;
|
||||
members: GroupMember[];
|
||||
isCreating: boolean;
|
||||
isCompleted: boolean;
|
||||
onRetry?: () => void;
|
||||
}> = ({ groupIndex, members, isCreating, isCompleted, onRetry }) => {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const targetSize = 38;
|
||||
return (
|
||||
<Card className={style.groupCard}>
|
||||
<div className={style.groupHeader}>
|
||||
<div>
|
||||
群 {groupIndex + 1}
|
||||
<Tag
|
||||
color={isCompleted ? "success" : isCreating ? "warning" : "default"}
|
||||
style={{ marginLeft: 8 }}
|
||||
>
|
||||
{isCompleted ? "已完成" : isCreating ? "创建中" : "等待中"}
|
||||
</Tag>
|
||||
</div>
|
||||
<div style={{ color: "#888", fontSize: 12 }}>
|
||||
<TeamOutline style={{ marginRight: 4 }} />
|
||||
{members.length}/{targetSize}
|
||||
</div>
|
||||
</div>
|
||||
{isCreating && !isCompleted && (
|
||||
<ProgressBar
|
||||
percent={Math.round((members.length / targetSize) * 100)}
|
||||
style={{ margin: "8px 0" }}
|
||||
/>
|
||||
)}
|
||||
{expanded ? (
|
||||
<>
|
||||
<div className={style.memberGrid}>
|
||||
{members.map((member) => (
|
||||
<div key={member.id} className={style.memberItem}>
|
||||
<span>{member.nickname}</span>
|
||||
{member.tags.length > 0 && (
|
||||
<Tag color="primary" style={{ marginLeft: 4 }}>
|
||||
{member.tags[0]}
|
||||
</Tag>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Button
|
||||
size="mini"
|
||||
fill="none"
|
||||
block
|
||||
onClick={() => setExpanded(false)}
|
||||
style={{ marginTop: 8 }}
|
||||
>
|
||||
收起
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<Button
|
||||
size="mini"
|
||||
fill="none"
|
||||
block
|
||||
onClick={() => setExpanded(true)}
|
||||
style={{ marginTop: 8 }}
|
||||
>
|
||||
查看成员 ({members.length})
|
||||
</Button>
|
||||
)}
|
||||
{!isCompleted && members.length < targetSize && (
|
||||
<div className={style.warnText}>
|
||||
<AlertOutlined style={{ marginRight: 4 }} />
|
||||
群人数不足{targetSize}人
|
||||
{onRetry && (
|
||||
<Button
|
||||
size="mini"
|
||||
fill="none"
|
||||
color="primary"
|
||||
style={{ marginLeft: 8 }}
|
||||
onClick={onRetry}
|
||||
>
|
||||
继续拉人
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{isCompleted && <div className={style.successText}>群创建完成</div>}
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
const GroupCreationProgress: React.FC<{
|
||||
taskDetail: GroupTaskDetail;
|
||||
onComplete: () => void;
|
||||
}> = ({ taskDetail, onComplete }) => {
|
||||
const [groups, setGroups] = useState<Group[]>(taskDetail.groups);
|
||||
const [currentGroupIndex, setCurrentGroupIndex] = useState(
|
||||
taskDetail.currentGroupIndex
|
||||
);
|
||||
const [status, setStatus] = useState<GroupTaskDetail["status"]>(
|
||||
taskDetail.status
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (status === "creating" && currentGroupIndex < groups.length) {
|
||||
const timer = setTimeout(() => {
|
||||
if (currentGroupIndex === groups.length - 1) {
|
||||
setStatus("completed");
|
||||
onComplete();
|
||||
} else {
|
||||
setCurrentGroupIndex((prev) => prev + 1);
|
||||
}
|
||||
}, 3000);
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
}, [status, currentGroupIndex, groups.length, onComplete]);
|
||||
|
||||
const handleRetryGroup = (groupIndex: number) => {
|
||||
setGroups((prev) =>
|
||||
prev.map((group, index) => {
|
||||
if (index === groupIndex) {
|
||||
return {
|
||||
...group,
|
||||
members: [
|
||||
...group.members,
|
||||
{
|
||||
id: `retry-member-${Date.now()}`,
|
||||
nickname: `补充用户${group.members.length + 1}`,
|
||||
wechatId: `wx_retry_${Date.now()}`,
|
||||
tags: ["新加入"],
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
return group;
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={style.progressSection}>
|
||||
<Card className={style.progressCard}>
|
||||
<div className={style.progressHeader}>
|
||||
<div>
|
||||
建群进度
|
||||
<Tag
|
||||
color={
|
||||
status === "completed"
|
||||
? "success"
|
||||
: status === "creating"
|
||||
? "warning"
|
||||
: "default"
|
||||
}
|
||||
style={{ marginLeft: 8 }}
|
||||
>
|
||||
{status === "preparing"
|
||||
? "准备中"
|
||||
: status === "creating"
|
||||
? "创建中"
|
||||
: "已完成"}
|
||||
</Tag>
|
||||
</div>
|
||||
<div style={{ color: "#888", fontSize: 12 }}>
|
||||
{currentGroupIndex + 1}/{groups.length}组
|
||||
</div>
|
||||
</div>
|
||||
<ProgressBar
|
||||
percent={Math.round(((currentGroupIndex + 1) / groups.length) * 100)}
|
||||
style={{ marginTop: 8 }}
|
||||
/>
|
||||
</Card>
|
||||
<div className={style.groupList}>
|
||||
{groups.map((group, index) => (
|
||||
<GroupPreview
|
||||
key={group.id}
|
||||
groupIndex={index}
|
||||
members={group.members}
|
||||
isCreating={status === "creating" && index === currentGroupIndex}
|
||||
isCompleted={status === "completed" || index < currentGroupIndex}
|
||||
onRetry={() => handleRetryGroup(index)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
{status === "completed" && (
|
||||
<div className={style.successAlert}>所有群组已创建完成</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const AutoGroupDetail: React.FC = () => {
|
||||
const { id } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [taskDetail, setTaskDetail] = useState<GroupTaskDetail | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
setTimeout(() => {
|
||||
setTaskDetail(mockTaskDetail);
|
||||
setLoading(false);
|
||||
}, 800);
|
||||
}, [id]);
|
||||
|
||||
const handleComplete = () => {
|
||||
Toast.show({ content: "所有群组已创建完成" });
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Layout
|
||||
header={
|
||||
<div className={style.headerBar}>
|
||||
<Button fill="none" size="small" onClick={() => navigate(-1)}>
|
||||
<LeftOutline />
|
||||
</Button>
|
||||
<div className={style.title}>建群详情</div>
|
||||
</div>
|
||||
}
|
||||
footer={<MeauMobile />}
|
||||
loading={true}
|
||||
>
|
||||
<div style={{ minHeight: 300 }} />
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
if (!taskDetail) {
|
||||
return (
|
||||
<Layout
|
||||
header={
|
||||
<div className={style.headerBar}>
|
||||
<Button fill="none" size="small" onClick={() => navigate(-1)}>
|
||||
<LeftOutline />
|
||||
</Button>
|
||||
<div className={style.title}>建群详情</div>
|
||||
</div>
|
||||
}
|
||||
footer={<MeauMobile />}
|
||||
>
|
||||
<Card className={style.emptyCard}>
|
||||
<AlertOutlined style={{ fontSize: 48, color: "#ccc" }} />
|
||||
<div className={style.emptyTitle}>任务不存在</div>
|
||||
<div className={style.emptyDesc}>请检查任务ID是否正确</div>
|
||||
<Button
|
||||
color="primary"
|
||||
onClick={() => navigate("/workspace/auto-group")}
|
||||
>
|
||||
返回列表
|
||||
</Button>
|
||||
</Card>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Layout
|
||||
header={
|
||||
<div className={style.headerBar}>
|
||||
<Button fill="none" size="small" onClick={() => navigate(-1)}>
|
||||
<LeftOutline />
|
||||
</Button>
|
||||
<div className={style.title}>{taskDetail.name} - 建群详情</div>
|
||||
</div>
|
||||
}
|
||||
footer={<MeauMobile />}
|
||||
>
|
||||
<div className={style.autoGroupDetail}>
|
||||
<Card className={style.infoCard}>
|
||||
<div className={style.infoGrid}>
|
||||
<div>
|
||||
<div className={style.infoTitle}>基本信息</div>
|
||||
<div className={style.infoItem}>任务名称：{taskDetail.name}</div>
|
||||
<div className={style.infoItem}>
|
||||
创建时间：{taskDetail.createTime}
|
||||
</div>
|
||||
<div className={style.infoItem}>创建人：{taskDetail.creator}</div>
|
||||
<div className={style.infoItem}>
|
||||
执行设备：{taskDetail.deviceCount} 个
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className={style.infoTitle}>建群配置</div>
|
||||
<div className={style.infoItem}>
|
||||
群组规模：{taskDetail.groupSize.min}-{taskDetail.groupSize.max}{" "}
|
||||
人
|
||||
</div>
|
||||
<div className={style.infoItem}>
|
||||
执行时间：{taskDetail.timeRange.start} -{" "}
|
||||
{taskDetail.timeRange.end}
|
||||
</div>
|
||||
<div className={style.infoItem}>
|
||||
目标标签：{taskDetail.targetTags.join(", ")}
|
||||
</div>
|
||||
<div className={style.infoItem}>
|
||||
群名称模板：{taskDetail.groupNameTemplate}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<GroupCreationProgress
|
||||
taskDetail={taskDetail}
|
||||
onComplete={handleComplete}
|
||||
/>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default AutoGroupDetail;
|
||||
11
nkebao/src/pages/workspace/auto-group/form/api.ts
Normal file
11
nkebao/src/pages/workspace/auto-group/form/api.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
import request from "@/api/request";
|
||||
|
||||
// 新建自动建群任务
|
||||
export function createAutoGroup(data: any) {
|
||||
return request("/api/auto-group/create", data, "POST");
|
||||
}
|
||||
|
||||
// 编辑自动建群任务
|
||||
export function updateAutoGroup(id: string, data: any) {
|
||||
return request(`/api/auto-group/update/${id}`, data, "POST");
|
||||
}
|
||||
34
nkebao/src/pages/workspace/auto-group/form/index.module.scss
Normal file
34
nkebao/src/pages/workspace/auto-group/form/index.module.scss
Normal file
@@ -0,0 +1,34 @@
|
||||
.autoGroupForm {
|
||||
padding: 10px;
|
||||
background: #f7f8fa;
|
||||
}
|
||||
|
||||
.headerBar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 48px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #222;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.timeRangeRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.groupSizeRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
245
nkebao/src/pages/workspace/auto-group/form/index.tsx
Normal file
245
nkebao/src/pages/workspace/auto-group/form/index.tsx
Normal file
@@ -0,0 +1,245 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import {
|
||||
Form,
|
||||
Input,
|
||||
Button,
|
||||
Toast,
|
||||
Switch,
|
||||
Selector,
|
||||
TextArea,
|
||||
} from "antd-mobile";
|
||||
import { LeftOutline } from "antd-mobile-icons";
|
||||
import Layout from "@/components/Layout/Layout";
|
||||
import MeauMobile from "@/components/MeauMobile/MeauMoible";
|
||||
import style from "./index.module.scss";
|
||||
import { createAutoGroup, updateAutoGroup } from "./api";
|
||||
|
||||
const defaultForm = {
|
||||
name: "",
|
||||
deviceCount: 1,
|
||||
targetFriends: 0,
|
||||
createInterval: 300,
|
||||
maxGroupsPerDay: 10,
|
||||
timeRange: { start: "09:00", end: "21:00" },
|
||||
groupSize: { min: 20, max: 50 },
|
||||
targetTags: [],
|
||||
groupNameTemplate: "VIP客户交流群{序号}",
|
||||
groupDescription: "",
|
||||
};
|
||||
|
||||
const tagOptions = [
|
||||
{ label: "VIP客户", value: "VIP客户" },
|
||||
{ label: "高价值", value: "高价值" },
|
||||
{ label: "潜在客户", value: "潜在客户" },
|
||||
{ label: "中意向", value: "中意向" },
|
||||
];
|
||||
|
||||
const AutoGroupForm: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const { id } = useParams();
|
||||
const isEdit = Boolean(id);
|
||||
const [form, setForm] = useState<any>(defaultForm);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (isEdit) {
|
||||
// 这里应请求详情接口，回填表单，演示用mock
|
||||
setForm({
|
||||
...defaultForm,
|
||||
name: "VIP客户建群",
|
||||
deviceCount: 2,
|
||||
targetFriends: 156,
|
||||
createInterval: 300,
|
||||
maxGroupsPerDay: 20,
|
||||
timeRange: { start: "09:00", end: "21:00" },
|
||||
groupSize: { min: 20, max: 50 },
|
||||
targetTags: ["VIP客户", "高价值"],
|
||||
groupNameTemplate: "VIP客户交流群{序号}",
|
||||
groupDescription: "VIP客户专属交流群，提供优质服务",
|
||||
});
|
||||
}
|
||||
}, [isEdit, id]);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
if (isEdit) {
|
||||
await updateAutoGroup(id as string, form);
|
||||
Toast.show({ content: "编辑成功" });
|
||||
} else {
|
||||
await createAutoGroup(form);
|
||||
Toast.show({ content: "创建成功" });
|
||||
}
|
||||
navigate("/workspace/auto-group");
|
||||
} catch (e) {
|
||||
Toast.show({ content: "提交失败" });
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Layout
|
||||
header={
|
||||
<div className={style.headerBar}>
|
||||
<Button fill="none" size="small" onClick={() => navigate(-1)}>
|
||||
<LeftOutline />
|
||||
</Button>
|
||||
<div className={style.title}>
|
||||
{isEdit ? "编辑建群任务" : "新建建群任务"}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className={style.autoGroupForm}>
|
||||
<Form
|
||||
layout="vertical"
|
||||
footer={
|
||||
<Button
|
||||
block
|
||||
color="primary"
|
||||
loading={loading}
|
||||
onClick={handleSubmit}
|
||||
>
|
||||
{isEdit ? "保存修改" : "创建任务"}
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<Form.Item label="任务名称" name="name" required>
|
||||
<Input
|
||||
value={form.name}
|
||||
onChange={(val) => setForm((f: any) => ({ ...f, name: val }))}
|
||||
placeholder="请输入任务名称"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="执行设备数量" name="deviceCount" required>
|
||||
<Input
|
||||
type="number"
|
||||
value={form.deviceCount}
|
||||
onChange={(val) =>
|
||||
setForm((f: any) => ({ ...f, deviceCount: Number(val) }))
|
||||
}
|
||||
placeholder="请输入设备数量"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="目标好友数" name="targetFriends" required>
|
||||
<Input
|
||||
type="number"
|
||||
value={form.targetFriends}
|
||||
onChange={(val) =>
|
||||
setForm((f: any) => ({ ...f, targetFriends: Number(val) }))
|
||||
}
|
||||
placeholder="请输入目标好友数"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="建群间隔(秒)" name="createInterval" required>
|
||||
<Input
|
||||
type="number"
|
||||
value={form.createInterval}
|
||||
onChange={(val) =>
|
||||
setForm((f: any) => ({ ...f, createInterval: Number(val) }))
|
||||
}
|
||||
placeholder="请输入建群间隔"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="每日最大建群数" name="maxGroupsPerDay" required>
|
||||
<Input
|
||||
type="number"
|
||||
value={form.maxGroupsPerDay}
|
||||
onChange={(val) =>
|
||||
setForm((f: any) => ({ ...f, maxGroupsPerDay: Number(val) }))
|
||||
}
|
||||
placeholder="请输入最大建群数"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="执行时间段" name="timeRange" required>
|
||||
<div className={style.timeRangeRow}>
|
||||
<Input
|
||||
value={form.timeRange.start}
|
||||
onChange={(val) =>
|
||||
setForm((f: any) => ({
|
||||
...f,
|
||||
timeRange: { ...f.timeRange, start: val },
|
||||
}))
|
||||
}
|
||||
placeholder="开始时间"
|
||||
/>
|
||||
<span style={{ margin: "0 8px" }}>-</span>
|
||||
<Input
|
||||
value={form.timeRange.end}
|
||||
onChange={(val) =>
|
||||
setForm((f: any) => ({
|
||||
...f,
|
||||
timeRange: { ...f.timeRange, end: val },
|
||||
}))
|
||||
}
|
||||
placeholder="结束时间"
|
||||
/>
|
||||
</div>
|
||||
</Form.Item>
|
||||
<Form.Item label="群组规模" name="groupSize" required>
|
||||
<div className={style.groupSizeRow}>
|
||||
<Input
|
||||
type="number"
|
||||
value={form.groupSize.min}
|
||||
onChange={(val) =>
|
||||
setForm((f: any) => ({
|
||||
...f,
|
||||
groupSize: { ...f.groupSize, min: Number(val) },
|
||||
}))
|
||||
}
|
||||
placeholder="最小人数"
|
||||
/>
|
||||
<span style={{ margin: "0 8px" }}>-</span>
|
||||
<Input
|
||||
type="number"
|
||||
value={form.groupSize.max}
|
||||
onChange={(val) =>
|
||||
setForm((f: any) => ({
|
||||
...f,
|
||||
groupSize: { ...f.groupSize, max: Number(val) },
|
||||
}))
|
||||
}
|
||||
placeholder="最大人数"
|
||||
/>
|
||||
</div>
|
||||
</Form.Item>
|
||||
<Form.Item label="目标标签" name="targetTags">
|
||||
<Selector
|
||||
options={tagOptions}
|
||||
multiple
|
||||
value={form.targetTags}
|
||||
onChange={(val) =>
|
||||
setForm((f: any) => ({ ...f, targetTags: val }))
|
||||
}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="群名称模板" name="groupNameTemplate" required>
|
||||
<Input
|
||||
value={form.groupNameTemplate}
|
||||
onChange={(val) =>
|
||||
setForm((f: any) => ({ ...f, groupNameTemplate: val }))
|
||||
}
|
||||
placeholder="请输入群名称模板"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="群描述" name="groupDescription">
|
||||
<TextArea
|
||||
value={form.groupDescription}
|
||||
onChange={(val) =>
|
||||
setForm((f: any) => ({ ...f, groupDescription: val }))
|
||||
}
|
||||
placeholder="请输入群描述"
|
||||
rows={3}
|
||||
maxLength={100}
|
||||
showCount
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default AutoGroupForm;
|
||||
8
nkebao/src/pages/workspace/auto-group/list/api.ts
Normal file
8
nkebao/src/pages/workspace/auto-group/list/api.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
import request from "@/api/request";
|
||||
|
||||
// 获取自动建群任务列表
|
||||
export function getAutoGroupList(params?: any) {
|
||||
return request("/api/auto-group/list", params, "GET");
|
||||
}
|
||||
|
||||
// 其他相关API可按需添加
|
||||
203
nkebao/src/pages/workspace/auto-group/list/index.module.scss
Normal file
203
nkebao/src/pages/workspace/auto-group/list/index.module.scss
Normal file
@@ -0,0 +1,203 @@
|
||||
.autoGroupList {
|
||||
padding: 16px 0 80px 0;
|
||||
background: #f7f8fa;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.headerBar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 16px;
|
||||
height: 48px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.searchBar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 16px 0 16px;
|
||||
background: #fff;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.taskList {
|
||||
margin-top: 16px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.taskCard {
|
||||
margin-bottom: 16px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.03);
|
||||
border: none;
|
||||
background: #fff;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.taskHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.taskTitle {
|
||||
flex: 1;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.statusRunning {
|
||||
background: #e6f7e6;
|
||||
color: #389e0d;
|
||||
border-radius: 8px;
|
||||
padding: 2px 8px;
|
||||
font-size: 12px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.statusPaused {
|
||||
background: #f5f5f5;
|
||||
color: #888;
|
||||
border-radius: 8px;
|
||||
padding: 2px 8px;
|
||||
font-size: 12px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.statusCompleted {
|
||||
background: #e6f4ff;
|
||||
color: #1677ff;
|
||||
border-radius: 8px;
|
||||
padding: 2px 8px;
|
||||
font-size: 12px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.taskInfoGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 8px 16px;
|
||||
margin-bottom: 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.infoLabel {
|
||||
color: #888;
|
||||
font-size: 12px;
|
||||
}
|
||||
.infoValue {
|
||||
color: #222;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.taskFooter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
padding-top: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.footerLeft {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.footerRight {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.expandPanel {
|
||||
margin-top: 16px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px dashed #e0e0e0;
|
||||
}
|
||||
.expandGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
.expandTitle {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #1677ff;
|
||||
}
|
||||
.expandInfo {
|
||||
font-size: 13px;
|
||||
color: #444;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.expandTags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
.tag {
|
||||
background: #f0f5ff;
|
||||
color: #1677ff;
|
||||
border-radius: 8px;
|
||||
padding: 2px 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.menuItem {
|
||||
padding: 8px 12px;
|
||||
font-size: 14px;
|
||||
color: #222;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.menuItem:hover {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
.menuItemDanger {
|
||||
padding: 8px 12px;
|
||||
font-size: 14px;
|
||||
color: #e53e3e;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.menuItemDanger:hover {
|
||||
background: #fff1f0;
|
||||
}
|
||||
|
||||
.emptyCard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px 0;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.03);
|
||||
margin-top: 32px;
|
||||
}
|
||||
.emptyTitle {
|
||||
font-size: 16px;
|
||||
color: #888;
|
||||
margin: 12px 0 4px 0;
|
||||
}
|
||||
.emptyDesc {
|
||||
font-size: 13px;
|
||||
color: #bbb;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
377
nkebao/src/pages/workspace/auto-group/list/index.tsx
Normal file
377
nkebao/src/pages/workspace/auto-group/list/index.tsx
Normal file
@@ -0,0 +1,377 @@
|
||||
import React, { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
Input,
|
||||
Switch,
|
||||
ProgressBar,
|
||||
Popover,
|
||||
Toast,
|
||||
} from "antd-mobile";
|
||||
import {
|
||||
MoreOutline,
|
||||
AddCircleOutline,
|
||||
SearchOutline,
|
||||
FilterOutline,
|
||||
UserAddOutline,
|
||||
ClockCircleOutline,
|
||||
TeamOutline,
|
||||
CalendarOutline,
|
||||
} from "antd-mobile-icons";
|
||||
|
||||
import { ReloadOutlined, SettingOutlined } from "@ant-design/icons";
|
||||
|
||||
import Layout from "@/components/Layout/Layout";
|
||||
import MeauMobile from "@/components/MeauMobile/MeauMoible";
|
||||
import style from "./index.module.scss";
|
||||
|
||||
interface GroupTask {
|
||||
id: string;
|
||||
name: string;
|
||||
status: "running" | "paused" | "completed";
|
||||
deviceCount: number;
|
||||
targetFriends: number;
|
||||
createdGroups: number;
|
||||
lastCreateTime: string;
|
||||
createTime: string;
|
||||
creator: string;
|
||||
createInterval: number;
|
||||
maxGroupsPerDay: number;
|
||||
timeRange: { start: string; end: string };
|
||||
groupSize: { min: number; max: number };
|
||||
targetTags: string[];
|
||||
groupNameTemplate: string;
|
||||
groupDescription: string;
|
||||
}
|
||||
|
||||
const mockTasks: GroupTask[] = [
|
||||
{
|
||||
id: "1",
|
||||
name: "VIP客户建群",
|
||||
deviceCount: 2,
|
||||
targetFriends: 156,
|
||||
createdGroups: 12,
|
||||
lastCreateTime: "2025-02-06 13:12:35",
|
||||
createTime: "2024-11-20 19:04:14",
|
||||
creator: "admin",
|
||||
status: "running",
|
||||
createInterval: 300,
|
||||
maxGroupsPerDay: 20,
|
||||
timeRange: { start: "09:00", end: "21:00" },
|
||||
groupSize: { min: 20, max: 50 },
|
||||
targetTags: ["VIP客户", "高价值"],
|
||||
groupNameTemplate: "VIP客户交流群{序号}",
|
||||
groupDescription: "VIP客户专属交流群，提供优质服务",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "产品推广建群",
|
||||
deviceCount: 1,
|
||||
targetFriends: 89,
|
||||
createdGroups: 8,
|
||||
lastCreateTime: "2024-03-04 14:09:35",
|
||||
createTime: "2024-03-04 14:29:04",
|
||||
creator: "manager",
|
||||
status: "paused",
|
||||
createInterval: 600,
|
||||
maxGroupsPerDay: 10,
|
||||
timeRange: { start: "10:00", end: "20:00" },
|
||||
groupSize: { min: 15, max: 30 },
|
||||
targetTags: ["潜在客户", "中意向"],
|
||||
groupNameTemplate: "产品推广群{序号}",
|
||||
groupDescription: "产品推广交流群，了解最新产品信息",
|
||||
},
|
||||
];
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case "running":
|
||||
return style.statusRunning;
|
||||
case "paused":
|
||||
return style.statusPaused;
|
||||
case "completed":
|
||||
return style.statusCompleted;
|
||||
default:
|
||||
return style.statusPaused;
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusText = (status: string) => {
|
||||
switch (status) {
|
||||
case "running":
|
||||
return "进行中";
|
||||
case "paused":
|
||||
return "已暂停";
|
||||
case "completed":
|
||||
return "已完成";
|
||||
default:
|
||||
return "未知";
|
||||
}
|
||||
};
|
||||
|
||||
const AutoGroupList: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const [expandedTaskId, setExpandedTaskId] = useState<string | null>(null);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [tasks, setTasks] = useState<GroupTask[]>(mockTasks);
|
||||
|
||||
const toggleExpand = (taskId: string) => {
|
||||
setExpandedTaskId(expandedTaskId === taskId ? null : taskId);
|
||||
};
|
||||
|
||||
const handleDelete = (taskId: string) => {
|
||||
const taskToDelete = tasks.find((task) => task.id === taskId);
|
||||
if (!taskToDelete) return;
|
||||
window.confirm(`确定要删除"${taskToDelete.name}"吗？`) &&
|
||||
setTasks(tasks.filter((task) => task.id !== taskId));
|
||||
Toast.show({ content: "删除成功" });
|
||||
};
|
||||
|
||||
const handleEdit = (taskId: string) => {
|
||||
navigate(`/workspace/auto-group/${taskId}/edit`);
|
||||
};
|
||||
|
||||
const handleView = (taskId: string) => {
|
||||
navigate(`/workspace/auto-group/${taskId}`);
|
||||
};
|
||||
|
||||
const handleCopy = (taskId: string) => {
|
||||
const taskToCopy = tasks.find((task) => task.id === taskId);
|
||||
if (taskToCopy) {
|
||||
const newTask = {
|
||||
...taskToCopy,
|
||||
id: `${Date.now()}`,
|
||||
name: `${taskToCopy.name} (复制)`,
|
||||
createTime: new Date().toISOString().replace("T", " ").substring(0, 19),
|
||||
};
|
||||
setTasks([...tasks, newTask]);
|
||||
Toast.show({ content: "复制成功" });
|
||||
}
|
||||
};
|
||||
|
||||
const toggleTaskStatus = (taskId: string) => {
|
||||
setTasks((prev) =>
|
||||
prev.map((task) =>
|
||||
task.id === taskId
|
||||
? {
|
||||
...task,
|
||||
status: task.status === "running" ? "paused" : "running",
|
||||
}
|
||||
: task
|
||||
)
|
||||
);
|
||||
Toast.show({ content: "状态已切换" });
|
||||
};
|
||||
|
||||
const handleCreateNew = () => {
|
||||
navigate("/workspace/auto-group/new");
|
||||
};
|
||||
|
||||
const filteredTasks = tasks.filter((task) =>
|
||||
task.name.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
);
|
||||
|
||||
return (
|
||||
<Layout
|
||||
header={
|
||||
<div className={style.headerBar}>
|
||||
<div className={style.title}>自动建群</div>
|
||||
<Button
|
||||
color="primary"
|
||||
fill="solid"
|
||||
size="small"
|
||||
onClick={handleCreateNew}
|
||||
>
|
||||
<AddCircleOutline /> 新建任务
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
footer={<MeauMobile />}
|
||||
>
|
||||
<div className={style.autoGroupList}>
|
||||
<div className={style.searchBar}>
|
||||
<Input
|
||||
placeholder="搜索任务名称"
|
||||
value={searchTerm}
|
||||
onChange={(val) => setSearchTerm(val)}
|
||||
clearable
|
||||
/>
|
||||
<Button size="small" fill="outline" style={{ marginLeft: 8 }}>
|
||||
<FilterOutline />
|
||||
</Button>
|
||||
<Button size="small" fill="outline" style={{ marginLeft: 8 }}>
|
||||
<ReloadOutlined />
|
||||
</Button>
|
||||
</div>
|
||||
<div className={style.taskList}>
|
||||
{filteredTasks.length === 0 ? (
|
||||
<Card className={style.emptyCard}>
|
||||
<UserAddOutline style={{ fontSize: 48, color: "#ccc" }} />
|
||||
<div className={style.emptyTitle}>暂无建群任务</div>
|
||||
<div className={style.emptyDesc}>创建您的第一个自动建群任务</div>
|
||||
<Button color="primary" onClick={handleCreateNew}>
|
||||
<AddCircleOutline /> 创建第一个任务
|
||||
</Button>
|
||||
</Card>
|
||||
) : (
|
||||
filteredTasks.map((task) => (
|
||||
<Card key={task.id} className={style.taskCard}>
|
||||
<div className={style.taskHeader}>
|
||||
<div className={style.taskTitle}>{task.name}</div>
|
||||
<span className={getStatusColor(task.status)}>
|
||||
{getStatusText(task.status)}
|
||||
</span>
|
||||
<Switch
|
||||
checked={task.status === "running"}
|
||||
onChange={() => toggleTaskStatus(task.id)}
|
||||
disabled={task.status === "completed"}
|
||||
style={{ marginLeft: 8 }}
|
||||
/>
|
||||
<Popover
|
||||
content={
|
||||
<div>
|
||||
<div
|
||||
className={style.menuItem}
|
||||
onClick={() => handleView(task.id)}
|
||||
>
|
||||
查看
|
||||
</div>
|
||||
<div
|
||||
className={style.menuItem}
|
||||
onClick={() => handleEdit(task.id)}
|
||||
>
|
||||
编辑
|
||||
</div>
|
||||
<div
|
||||
className={style.menuItem}
|
||||
onClick={() => handleCopy(task.id)}
|
||||
>
|
||||
复制
|
||||
</div>
|
||||
<div
|
||||
className={style.menuItemDanger}
|
||||
onClick={() => handleDelete(task.id)}
|
||||
>
|
||||
删除
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
trigger="click"
|
||||
>
|
||||
<MoreOutline style={{ fontSize: 20, marginLeft: 8 }} />
|
||||
</Popover>
|
||||
</div>
|
||||
<div className={style.taskInfoGrid}>
|
||||
<div>
|
||||
<div className={style.infoLabel}>执行设备</div>
|
||||
<div className={style.infoValue}>{task.deviceCount} 个</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className={style.infoLabel}>目标好友</div>
|
||||
<div className={style.infoValue}>
|
||||
{task.targetFriends} 个
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className={style.infoLabel}>已建群</div>
|
||||
<div className={style.infoValue}>
|
||||
{task.createdGroups} 个
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className={style.infoLabel}>创建人</div>
|
||||
<div className={style.infoValue}>{task.creator}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={style.taskFooter}>
|
||||
<div className={style.footerLeft}>
|
||||
<ClockCircleOutline style={{ marginRight: 4 }} />
|
||||
上次建群：{task.lastCreateTime}
|
||||
</div>
|
||||
<div className={style.footerRight}>
|
||||
创建时间：{task.createTime}
|
||||
<Button
|
||||
size="mini"
|
||||
fill="none"
|
||||
onClick={() => toggleExpand(task.id)}
|
||||
style={{ marginLeft: 8 }}
|
||||
>
|
||||
{expandedTaskId === task.id ? "收起" : "展开"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{expandedTaskId === task.id && (
|
||||
<div className={style.expandPanel}>
|
||||
<div className={style.expandGrid}>
|
||||
<div>
|
||||
<div className={style.expandTitle}>
|
||||
<SettingOutlined style={{ marginRight: 4 }} />{" "}
|
||||
基本设置
|
||||
</div>
|
||||
<div className={style.expandInfo}>
|
||||
建群间隔：{task.createInterval} 秒
|
||||
</div>
|
||||
<div className={style.expandInfo}>
|
||||
每日最大建群数：{task.maxGroupsPerDay} 个
|
||||
</div>
|
||||
<div className={style.expandInfo}>
|
||||
执行时间段：{task.timeRange.start} -{" "}
|
||||
{task.timeRange.end}
|
||||
</div>
|
||||
<div className={style.expandInfo}>
|
||||
群组规模：{task.groupSize.min}-{task.groupSize.max} 人
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className={style.expandTitle}>
|
||||
<TeamOutline style={{ marginRight: 4 }} /> 目标人群
|
||||
</div>
|
||||
<div className={style.expandTags}>
|
||||
{task.targetTags.map((tag) => (
|
||||
<span key={tag} className={style.tag}>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className={style.expandTitle}>
|
||||
<UserAddOutline style={{ marginRight: 4 }} /> 群组设置
|
||||
</div>
|
||||
<div className={style.expandInfo}>
|
||||
群名称模板：{task.groupNameTemplate}
|
||||
</div>
|
||||
<div className={style.expandInfo}>
|
||||
群描述：{task.groupDescription}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className={style.expandTitle}>
|
||||
<CalendarOutline style={{ marginRight: 4 }} />{" "}
|
||||
执行进度
|
||||
</div>
|
||||
<div className={style.expandInfo}>
|
||||
今日已建群：{task.createdGroups} /{" "}
|
||||
{task.maxGroupsPerDay}
|
||||
</div>
|
||||
<ProgressBar
|
||||
percent={Math.round(
|
||||
(task.createdGroups / task.maxGroupsPerDay) * 100
|
||||
)}
|
||||
style={{ marginTop: 8 }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default AutoGroupList;
|
||||
@@ -1,38 +0,0 @@
|
||||
import React from "react";
|
||||
import { NavBar, Button } from "antd-mobile";
|
||||
import { PlusOutlined } from "@ant-design/icons";
|
||||
import Layout from "@/components/Layout/Layout";
|
||||
import MeauMobile from "@/components/MeauMobile/MeauMoible";
|
||||
|
||||
const AutoLike: React.FC = () => {
|
||||
return (
|
||||
<Layout
|
||||
header={
|
||||
<NavBar
|
||||
backArrow
|
||||
style={{ background: "#fff" }}
|
||||
onBack={() => window.history.back()}
|
||||
left={
|
||||
<div style={{ color: "var(--primary-color)", fontWeight: 600 }}>
|
||||
自动点赞
|
||||
</div>
|
||||
}
|
||||
right={
|
||||
<Button size="small" color="primary">
|
||||
<PlusOutlined />
|
||||
<span style={{ marginLeft: 4, fontSize: 12 }}>新建任务</span>
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
}
|
||||
footer={<MeauMobile />}
|
||||
>
|
||||
<div style={{ padding: 20, textAlign: "center", color: "#666" }}>
|
||||
<h3>自动点赞页面</h3>
|
||||
<p>此页面正在开发中...</p>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default AutoLike;
|
||||
@@ -1,8 +0,0 @@
|
||||
import React from "react";
|
||||
import PlaceholderPage from "@/components/PlaceholderPage";
|
||||
|
||||
const AutoLikeDetail: React.FC = () => {
|
||||
return <PlaceholderPage title="自动点赞详情" />;
|
||||
};
|
||||
|
||||
export default AutoLikeDetail;
|
||||
1
nkebao/src/pages/workspace/auto-like/AutoLikeListPC.scss
Normal file
1
nkebao/src/pages/workspace/auto-like/AutoLikeListPC.scss
Normal file
@@ -0,0 +1 @@
|
||||
|
||||
1
nkebao/src/pages/workspace/auto-like/AutoLikeListPC.tsx
Normal file
1
nkebao/src/pages/workspace/auto-like/AutoLikeListPC.tsx
Normal file
@@ -0,0 +1 @@
|
||||
|
||||
@@ -1,30 +0,0 @@
|
||||
import React from "react";
|
||||
import { NavBar } from "antd-mobile";
|
||||
import Layout from "@/components/Layout/Layout";
|
||||
import MeauMobile from "@/components/MeauMobile/MeauMoible";
|
||||
|
||||
const NewAutoLike: React.FC = () => {
|
||||
return (
|
||||
<Layout
|
||||
header={
|
||||
<NavBar
|
||||
backArrow
|
||||
style={{ background: "#fff" }}
|
||||
onBack={() => window.history.back()}
|
||||
>
|
||||
<div style={{ color: "var(--primary-color)", fontWeight: 600 }}>
|
||||
新建自动点赞
|
||||
</div>
|
||||
</NavBar>
|
||||
}
|
||||
footer={<MeauMobile />}
|
||||
>
|
||||
<div style={{ padding: 20, textAlign: "center", color: "#666" }}>
|
||||
<h3>新建自动点赞页面</h3>
|
||||
<p>此页面正在开发中...</p>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default NewAutoLike;
|
||||
63
nkebao/src/pages/workspace/auto-like/list/api.ts
Normal file
63
nkebao/src/pages/workspace/auto-like/list/api.ts
Normal file
@@ -0,0 +1,63 @@
|
||||
import request from "@/api/request";
|
||||
import {
|
||||
LikeTask,
|
||||
CreateLikeTaskData,
|
||||
UpdateLikeTaskData,
|
||||
LikeRecord,
|
||||
PaginatedResponse,
|
||||
} from "@/types/auto-like";
|
||||
|
||||
// 获取自动点赞任务列表
|
||||
export function fetchAutoLikeTasks(
|
||||
params = { type: 1, page: 1, limit: 100 }
|
||||
): Promise<LikeTask[]> {
|
||||
return request("/v1/workbench/list", params, "GET");
|
||||
}
|
||||
|
||||
// 获取单个任务详情
|
||||
export function fetchAutoLikeTaskDetail(id: string): Promise<LikeTask | null> {
|
||||
return request("/v1/workbench/detail", { id }, "GET");
|
||||
}
|
||||
|
||||
// 创建自动点赞任务
|
||||
export function createAutoLikeTask(data: CreateLikeTaskData): Promise<any> {
|
||||
return request("/v1/workbench/create", { ...data, type: 1 }, "POST");
|
||||
}
|
||||
|
||||
// 更新自动点赞任务
|
||||
export function updateAutoLikeTask(data: UpdateLikeTaskData): Promise<any> {
|
||||
return request("/v1/workbench/update", { ...data, type: 1 }, "POST");
|
||||
}
|
||||
|
||||
// 删除自动点赞任务
|
||||
export function deleteAutoLikeTask(id: string): Promise<any> {
|
||||
return request("/v1/workbench/delete", { id }, "DELETE");
|
||||
}
|
||||
|
||||
// 切换任务状态
|
||||
export function toggleAutoLikeTask(id: string, status: string): Promise<any> {
|
||||
return request("/v1/workbench/update-status", { id, status }, "POST");
|
||||
}
|
||||
|
||||
// 复制自动点赞任务
|
||||
export function copyAutoLikeTask(id: string): Promise<any> {
|
||||
return request("/v1/workbench/copy", { id }, "POST");
|
||||
}
|
||||
|
||||
// 获取点赞记录
|
||||
export function fetchLikeRecords(
|
||||
workbenchId: string,
|
||||
page: number = 1,
|
||||
limit: number = 20,
|
||||
keyword?: string
|
||||
): Promise<PaginatedResponse<LikeRecord>> {
|
||||
const params: any = {
|
||||
workbenchId,
|
||||
page: page.toString(),
|
||||
limit: limit.toString(),
|
||||
};
|
||||
if (keyword) {
|
||||
params.keyword = keyword;
|
||||
}
|
||||
return request("/v1/workbench/records", params, "GET");
|
||||
}
|
||||
342
nkebao/src/pages/workspace/auto-like/list/index.module.scss
Normal file
342
nkebao/src/pages/workspace/auto-like/list/index.module.scss
Normal file
@@ -0,0 +1,342 @@
|
||||
.header {
|
||||
background: white;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.search-input-wrapper {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
|
||||
.ant-input {
|
||||
border-radius: 8px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
.refresh-btn {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.new-task-btn {
|
||||
height: 32px;
|
||||
padding: 0 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
|
||||
.task-list {
|
||||
padding: 0 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.task-card {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.2s;
|
||||
&:hover {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
.task-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.task-title-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.task-name {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.task-status {
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
|
||||
&.active {
|
||||
background: #f6ffed;
|
||||
color: #52c41a;
|
||||
border: 1px solid #b7eb8f;
|
||||
}
|
||||
|
||||
&.inactive {
|
||||
background: #f5f5f5;
|
||||
color: #666;
|
||||
border: 1px solid #d9d9d9;
|
||||
}
|
||||
}
|
||||
|
||||
.task-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 44px;
|
||||
height: 24px;
|
||||
|
||||
input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #ccc;
|
||||
transition: 0.4s;
|
||||
border-radius: 24px;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
left: 3px;
|
||||
bottom: 3px;
|
||||
background-color: white;
|
||||
transition: 0.4s;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
input:checked + .slider {
|
||||
background-color: #1890ff;
|
||||
}
|
||||
|
||||
input:checked + .slider:before {
|
||||
transform: translateX(20px);
|
||||
}
|
||||
}
|
||||
|
||||
.menu-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 4px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
color: #666;
|
||||
|
||||
&:hover {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-dropdown {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 28px;
|
||||
background: white;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
z-index: 100;
|
||||
min-width: 120px;
|
||||
padding: 4px;
|
||||
border: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
padding: 8px 12px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
gap: 8px;
|
||||
transition: background 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
&.danger {
|
||||
color: #ff4d4f;
|
||||
|
||||
&:hover {
|
||||
background: #fff2f0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.task-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.info-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.task-stats {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.stats-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.stats-icon {
|
||||
font-size: 16px;
|
||||
|
||||
&.blue {
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
&.green {
|
||||
color: #52c41a;
|
||||
}
|
||||
}
|
||||
|
||||
.stats-label {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.stats-value {
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 60vh;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 48px;
|
||||
color: #d9d9d9;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 16px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.empty-subtext {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
// 移动端适配
|
||||
@media (max-width: 768px) {
|
||||
.task-info {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.task-stats {
|
||||
gap: 12px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.search-section {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.task-list {
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
410
nkebao/src/pages/workspace/auto-like/list/index.tsx
Normal file
410
nkebao/src/pages/workspace/auto-like/list/index.tsx
Normal file
@@ -0,0 +1,410 @@
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import {
|
||||
NavBar,
|
||||
Button,
|
||||
Toast,
|
||||
SpinLoading,
|
||||
Dialog,
|
||||
Popup,
|
||||
Card,
|
||||
Tag,
|
||||
} from "antd-mobile";
|
||||
import { Input } from "antd";
|
||||
import {
|
||||
PlusOutlined,
|
||||
CopyOutlined,
|
||||
DeleteOutlined,
|
||||
SettingOutlined,
|
||||
SearchOutlined,
|
||||
ReloadOutlined,
|
||||
EyeOutlined,
|
||||
EditOutlined,
|
||||
MoreOutlined,
|
||||
LikeOutlined,
|
||||
ClockCircleOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { LeftOutline } from "antd-mobile-icons";
|
||||
|
||||
import Layout from "@/components/Layout/Layout";
|
||||
import MeauMobile from "@/components/MeauMobile/MeauMoible";
|
||||
import {
|
||||
fetchAutoLikeTasks,
|
||||
deleteAutoLikeTask,
|
||||
toggleAutoLikeTask,
|
||||
copyAutoLikeTask,
|
||||
} from "./api";
|
||||
import { LikeTask } from "@/types/auto-like";
|
||||
import style from "./index.module.scss";
|
||||
|
||||
// 卡片菜单组件
|
||||
interface CardMenuProps {
|
||||
onView: () => void;
|
||||
onEdit: () => void;
|
||||
onCopy: () => void;
|
||||
onDelete: () => void;
|
||||
}
|
||||
|
||||
const CardMenu: React.FC<CardMenuProps> = ({
|
||||
onView,
|
||||
onEdit,
|
||||
onCopy,
|
||||
onDelete,
|
||||
}) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
const menuRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
function handleClickOutside(event: MouseEvent) {
|
||||
if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
|
||||
setOpen(false);
|
||||
}
|
||||
}
|
||||
if (open) document.addEventListener("mousedown", handleClickOutside);
|
||||
return () => document.removeEventListener("mousedown", handleClickOutside);
|
||||
}, [open]);
|
||||
|
||||
return (
|
||||
<div style={{ position: "relative" }}>
|
||||
<button onClick={() => setOpen((v) => !v)} className={style["menu-btn"]}>
|
||||
<MoreOutlined />
|
||||
</button>
|
||||
{open && (
|
||||
<div ref={menuRef} className={style["menu-dropdown"]}>
|
||||
<div
|
||||
onClick={() => {
|
||||
onView();
|
||||
setOpen(false);
|
||||
}}
|
||||
className={style["menu-item"]}
|
||||
>
|
||||
<EyeOutlined />
|
||||
查看
|
||||
</div>
|
||||
<div
|
||||
onClick={() => {
|
||||
onEdit();
|
||||
setOpen(false);
|
||||
}}
|
||||
className={style["menu-item"]}
|
||||
>
|
||||
<EditOutlined />
|
||||
编辑
|
||||
</div>
|
||||
<div
|
||||
onClick={() => {
|
||||
onCopy();
|
||||
setOpen(false);
|
||||
}}
|
||||
className={style["menu-item"]}
|
||||
>
|
||||
<CopyOutlined />
|
||||
复制
|
||||
</div>
|
||||
<div
|
||||
onClick={() => {
|
||||
onDelete();
|
||||
setOpen(false);
|
||||
}}
|
||||
className={`${style["menu-item"]} ${style["danger"]}`}
|
||||
>
|
||||
<DeleteOutlined />
|
||||
删除
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const AutoLike: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const [tasks, setTasks] = useState<LikeTask[]>([]);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
// 获取任务列表
|
||||
const fetchTasks = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const Res: any = await fetchAutoLikeTasks();
|
||||
// 直接就是任务数组，无需再解包
|
||||
const mappedTasks = Res?.list?.map((task: any) => ({
|
||||
...task,
|
||||
status: task.status || 2, // 默认为关闭状态
|
||||
deviceCount: task.deviceCount || 0,
|
||||
targetGroup: task.targetGroup || "全部好友",
|
||||
likeInterval: task.likeInterval || 60,
|
||||
maxLikesPerDay: task.maxLikesPerDay || 100,
|
||||
lastLikeTime: task.lastLikeTime || "暂无",
|
||||
createTime: task.createTime || "",
|
||||
updateTime: task.updateTime || "",
|
||||
todayLikeCount: task.todayLikeCount || 0,
|
||||
totalLikeCount: task.totalLikeCount || 0,
|
||||
}));
|
||||
setTasks(mappedTasks);
|
||||
} catch (error) {
|
||||
console.error("获取自动点赞任务失败:", error);
|
||||
Toast.show({
|
||||
content: "获取任务列表失败",
|
||||
position: "top",
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchTasks();
|
||||
}, []);
|
||||
|
||||
// 删除任务
|
||||
const handleDelete = async (id: string) => {
|
||||
const result = await Dialog.confirm({
|
||||
content: "确定要删除这个任务吗？",
|
||||
confirmText: "删除",
|
||||
cancelText: "取消",
|
||||
});
|
||||
|
||||
if (result) {
|
||||
try {
|
||||
await deleteAutoLikeTask(id);
|
||||
Toast.show({
|
||||
content: "删除成功",
|
||||
position: "top",
|
||||
});
|
||||
fetchTasks(); // 重新获取列表
|
||||
} catch (error) {
|
||||
Toast.show({
|
||||
content: "删除失败",
|
||||
position: "top",
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 编辑任务
|
||||
const handleEdit = (taskId: string) => {
|
||||
navigate(`/workspace/auto-like/edit/${taskId}`);
|
||||
};
|
||||
|
||||
// 查看任务
|
||||
const handleView = (taskId: string) => {
|
||||
navigate(`/workspace/auto-like/detail/${taskId}`);
|
||||
};
|
||||
|
||||
// 复制任务
|
||||
const handleCopy = async (id: string) => {
|
||||
try {
|
||||
await copyAutoLikeTask(id);
|
||||
Toast.show({
|
||||
content: "复制成功",
|
||||
position: "top",
|
||||
});
|
||||
fetchTasks(); // 重新获取列表
|
||||
} catch (error) {
|
||||
Toast.show({
|
||||
content: "复制失败",
|
||||
position: "top",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 切换任务状态
|
||||
const toggleTaskStatus = async (id: string, status: number) => {
|
||||
try {
|
||||
const newStatus = status === 1 ? "2" : "1";
|
||||
await toggleAutoLikeTask(id, newStatus);
|
||||
Toast.show({
|
||||
content: status === 1 ? "已暂停" : "已启动",
|
||||
position: "top",
|
||||
});
|
||||
fetchTasks(); // 重新获取列表
|
||||
} catch (error) {
|
||||
Toast.show({
|
||||
content: "操作失败",
|
||||
position: "top",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 创建新任务
|
||||
const handleCreateNew = () => {
|
||||
navigate("/workspace/auto-like/new");
|
||||
};
|
||||
|
||||
// 过滤任务
|
||||
const filteredTasks = tasks.filter((task) =>
|
||||
task.name.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
);
|
||||
|
||||
return (
|
||||
<Layout
|
||||
header={
|
||||
<>
|
||||
<NavBar
|
||||
style={{ background: "#fff" }}
|
||||
onBack={() => window.history.back()}
|
||||
left={
|
||||
<div style={{ color: "var(--primary-color)", fontWeight: 600 }}>
|
||||
自动点赞
|
||||
</div>
|
||||
}
|
||||
right={
|
||||
<Button size="small" color="primary" onClick={handleCreateNew}>
|
||||
<PlusOutlined />
|
||||
<span style={{ marginLeft: 4, fontSize: 12 }}>新建任务</span>
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
{/* 搜索栏 */}
|
||||
<div className={style["search-bar"]}>
|
||||
<div className={style["search-input-wrapper"]}>
|
||||
<Input
|
||||
placeholder="搜索计划名称"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
prefix={<SearchOutlined />}
|
||||
allowClear
|
||||
size="large"
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
size="small"
|
||||
onClick={fetchTasks}
|
||||
loading={loading}
|
||||
className={style["refresh-btn"]}
|
||||
>
|
||||
<ReloadOutlined />
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div className={style["auto-like-page"]}>
|
||||
{/* 任务列表 */}
|
||||
<div className={style["task-list"]}>
|
||||
{loading ? (
|
||||
<div className={style["loading"]}>
|
||||
<SpinLoading color="primary" />
|
||||
<div className={style["loading-text"]}>加载中...</div>
|
||||
</div>
|
||||
) : filteredTasks.length === 0 ? (
|
||||
<div className={style["empty-state"]}>
|
||||
<div className={style["empty-icon"]}>
|
||||
<LikeOutlined />
|
||||
</div>
|
||||
<div className={style["empty-text"]}>暂无自动点赞任务</div>
|
||||
<div className={style["empty-subtext"]}>
|
||||
点击右上角按钮创建新任务
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
filteredTasks.map((task) => (
|
||||
<Card key={task.id} className={style["task-card"]}>
|
||||
<div className={style["task-header"]}>
|
||||
<div className={style["task-title-section"]}>
|
||||
<h3 className={style["task-name"]}>{task.name}</h3>
|
||||
<span
|
||||
className={`${style["task-status"]} ${
|
||||
Number(task.status) === 1
|
||||
? style["active"]
|
||||
: style["inactive"]
|
||||
}`}
|
||||
>
|
||||
{Number(task.status) === 1 ? "进行中" : "已暂停"}
|
||||
</span>
|
||||
</div>
|
||||
<div className={style["task-controls"]}>
|
||||
<label className={style["switch"]}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={Number(task.status) === 1}
|
||||
onChange={() =>
|
||||
toggleTaskStatus(task.id, Number(task.status))
|
||||
}
|
||||
/>
|
||||
<span className={style["slider"]}></span>
|
||||
</label>
|
||||
<CardMenu
|
||||
onView={() => handleView(task.id)}
|
||||
onEdit={() => handleEdit(task.id)}
|
||||
onCopy={() => handleCopy(task.id)}
|
||||
onDelete={() => handleDelete(task.id)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={style["task-info"]}>
|
||||
<div className={style["info-section"]}>
|
||||
<div className={style["info-item"]}>
|
||||
<span className={style["info-label"]}>执行设备</span>
|
||||
<span className={style["info-value"]}>
|
||||
{task.deviceCount} 个
|
||||
</span>
|
||||
</div>
|
||||
<div className={style["info-item"]}>
|
||||
<span className={style["info-label"]}>目标人群</span>
|
||||
<span className={style["info-value"]}>
|
||||
{task.targetGroup}
|
||||
</span>
|
||||
</div>
|
||||
<div className={style["info-item"]}>
|
||||
<span className={style["info-label"]}>更新时间</span>
|
||||
<span className={style["info-value"]}>
|
||||
{task.updateTime}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className={style["info-section"]}>
|
||||
<div className={style["info-item"]}>
|
||||
<span className={style["info-label"]}>点赞间隔</span>
|
||||
<span className={style["info-value"]}>
|
||||
{task.likeInterval} 秒
|
||||
</span>
|
||||
</div>
|
||||
<div className={style["info-item"]}>
|
||||
<span className={style["info-label"]}>每日上限</span>
|
||||
<span className={style["info-value"]}>
|
||||
{task.maxLikesPerDay} 次
|
||||
</span>
|
||||
</div>
|
||||
<div className={style["info-item"]}>
|
||||
<span className={style["info-label"]}>创建时间</span>
|
||||
<span className={style["info-value"]}>
|
||||
{task.createTime}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={style["task-stats"]}>
|
||||
<div className={style["stats-item"]}>
|
||||
<LikeOutlined
|
||||
className={`${style["stats-icon"]} ${style["blue"]}`}
|
||||
/>
|
||||
<span className={style["stats-label"]}>今日点赞：</span>
|
||||
<span className={style["stats-value"]}>
|
||||
{task.lastLikeTime}
|
||||
</span>
|
||||
</div>
|
||||
<div className={style["stats-item"]}>
|
||||
<LikeOutlined
|
||||
className={`${style["stats-icon"]} ${style["green"]}`}
|
||||
/>
|
||||
<span className={style["stats-label"]}>总点赞数：</span>
|
||||
<span className={style["stats-value"]}>
|
||||
{task.totalLikeCount || 0}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default AutoLike;
|
||||
21
nkebao/src/pages/workspace/auto-like/new/api.ts
Normal file
21
nkebao/src/pages/workspace/auto-like/new/api.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
import request from "@/api/request";
|
||||
import {
|
||||
CreateLikeTaskData,
|
||||
UpdateLikeTaskData,
|
||||
LikeTask,
|
||||
} from "@/types/auto-like";
|
||||
|
||||
// 获取自动点赞任务详情
|
||||
export function fetchAutoLikeTaskDetail(id: string): Promise<LikeTask | null> {
|
||||
return request("/v1/workbench/detail", { id }, "GET");
|
||||
}
|
||||
|
||||
// 创建自动点赞任务
|
||||
export function createAutoLikeTask(data: CreateLikeTaskData): Promise<any> {
|
||||
return request("/v1/workbench/create", { ...data, type: 1 }, "POST");
|
||||
}
|
||||
|
||||
// 更新自动点赞任务
|
||||
export function updateAutoLikeTask(data: UpdateLikeTaskData): Promise<any> {
|
||||
return request("/v1/workbench/update", { ...data, type: 1 }, "POST");
|
||||
}
|
||||
337
nkebao/src/pages/workspace/auto-like/new/index.tsx
Normal file
337
nkebao/src/pages/workspace/auto-like/new/index.tsx
Normal file
@@ -0,0 +1,337 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import {
|
||||
PlusOutlined,
|
||||
MinusOutlined,
|
||||
ArrowLeftOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { Button, Input, Switch, message, Spin } from "antd";
|
||||
import {
|
||||
createAutoLikeTask,
|
||||
updateAutoLikeTask,
|
||||
fetchAutoLikeTaskDetail,
|
||||
} from "./api";
|
||||
import {
|
||||
CreateLikeTaskData,
|
||||
UpdateLikeTaskData,
|
||||
ContentType,
|
||||
} from "@/types/auto-like";
|
||||
import style from "./new.module.scss";
|
||||
|
||||
const contentTypeLabels: Record<ContentType, string> = {
|
||||
text: "文字",
|
||||
image: "图片",
|
||||
video: "视频",
|
||||
link: "链接",
|
||||
};
|
||||
|
||||
const NewAutoLike: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const isEditMode = !!id;
|
||||
const [currentStep, setCurrentStep] = useState(1);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(isEditMode);
|
||||
const [autoEnabled, setAutoEnabled] = useState(false);
|
||||
const [formData, setFormData] = useState<CreateLikeTaskData>({
|
||||
name: "",
|
||||
interval: 5,
|
||||
maxLikes: 200,
|
||||
startTime: "08:00",
|
||||
endTime: "22:00",
|
||||
contentTypes: ["text", "image", "video"],
|
||||
devices: [],
|
||||
friends: [],
|
||||
targetTags: [],
|
||||
friendMaxLikes: 10,
|
||||
enableFriendTags: false,
|
||||
friendTags: "",
|
||||
});
|
||||
|
||||
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<CreateLikeTaskData>) => {
|
||||
setFormData((prev) => ({ ...prev, ...data }));
|
||||
};
|
||||
|
||||
const handleNext = () => setCurrentStep((prev) => Math.min(prev + 1, 3));
|
||||
const handlePrev = () => setCurrentStep((prev) => Math.max(prev - 1, 1));
|
||||
|
||||
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);
|
||||
}
|
||||
};
|
||||
|
||||
// 顶部导航栏
|
||||
const renderNavBar = () => (
|
||||
<div className={style["nav-bar"]}>
|
||||
<Button
|
||||
type="text"
|
||||
icon={<ArrowLeftOutlined />}
|
||||
className={style["nav-back-btn"]}
|
||||
onClick={() => navigate(-1)}
|
||||
/>
|
||||
<span className={style["nav-title"]}>
|
||||
{isEditMode ? "编辑自动点赞" : "新建自动点赞"}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
// 步骤1：基础设置
|
||||
const renderBasicSettings = () => (
|
||||
<div className={style["form-section"]}>
|
||||
<div className={style["form-item"]}>
|
||||
<label className={style["form-label"]}>任务名称</label>
|
||||
<Input
|
||||
placeholder="请输入任务名称"
|
||||
value={formData.name}
|
||||
onChange={(e) => handleUpdateFormData({ name: e.target.value })}
|
||||
className={style["form-input"]}
|
||||
/>
|
||||
</div>
|
||||
<div className={style["form-item"]}>
|
||||
<label className={style["form-label"]}>点赞间隔</label>
|
||||
<div className={style["stepper-group"]}>
|
||||
<Button
|
||||
icon={<MinusOutlined />}
|
||||
onClick={() =>
|
||||
handleUpdateFormData({
|
||||
interval: Math.max(1, formData.interval - 1),
|
||||
})
|
||||
}
|
||||
className={style["stepper-btn"]}
|
||||
/>
|
||||
<span className={style["stepper-value"]}>{formData.interval} 秒</span>
|
||||
<Button
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() =>
|
||||
handleUpdateFormData({ interval: formData.interval + 1 })
|
||||
}
|
||||
className={style["stepper-btn"]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className={style["form-item"]}>
|
||||
<label className={style["form-label"]}>每日上限</label>
|
||||
<div className={style["stepper-group"]}>
|
||||
<Button
|
||||
icon={<MinusOutlined />}
|
||||
onClick={() =>
|
||||
handleUpdateFormData({
|
||||
maxLikes: Math.max(1, formData.maxLikes - 10),
|
||||
})
|
||||
}
|
||||
className={style["stepper-btn"]}
|
||||
/>
|
||||
<span className={style["stepper-value"]}>{formData.maxLikes} 次</span>
|
||||
<Button
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() =>
|
||||
handleUpdateFormData({ maxLikes: formData.maxLikes + 10 })
|
||||
}
|
||||
className={style["stepper-btn"]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className={style["form-item"]}>
|
||||
<label className={style["form-label"]}>执行时间</label>
|
||||
<div className={style["time-range"]}>
|
||||
<Input
|
||||
type="time"
|
||||
value={formData.startTime}
|
||||
onChange={(e) =>
|
||||
handleUpdateFormData({ startTime: e.target.value })
|
||||
}
|
||||
className={style["time-input"]}
|
||||
/>
|
||||
<span className={style["time-separator"]}>至</span>
|
||||
<Input
|
||||
type="time"
|
||||
value={formData.endTime}
|
||||
onChange={(e) => handleUpdateFormData({ endTime: e.target.value })}
|
||||
className={style["time-input"]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className={style["form-item"]}>
|
||||
<label className={style["form-label"]}>内容类型</label>
|
||||
<div className={style["content-types"]}>
|
||||
{(["text", "image", "video", "link"] as ContentType[]).map((type) => (
|
||||
<span
|
||||
key={type}
|
||||
className={
|
||||
formData.contentTypes.includes(type)
|
||||
? style["content-type-tag-active"]
|
||||
: style["content-type-tag"]
|
||||
}
|
||||
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["form-item"]}>
|
||||
<label className={style["form-label"]}>自动开启</label>
|
||||
<Switch checked={autoEnabled} onChange={setAutoEnabled} />
|
||||
</div>
|
||||
<div className={style["form-actions"]}>
|
||||
<Button
|
||||
type="primary"
|
||||
block
|
||||
onClick={handleNext}
|
||||
size="large"
|
||||
className={style["main-btn"]}
|
||||
>
|
||||
下一步
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
// 步骤2：设备选择（占位）
|
||||
const renderDeviceSelection = () => (
|
||||
<div className={style["form-section"]}>
|
||||
<div className={style["placeholder-content"]}>
|
||||
<span className={style["placeholder-icon"]}>[设备选择组件占位]</span>
|
||||
<div className={style["placeholder-text"]}>设备选择功能开发中...</div>
|
||||
<div className={style["placeholder-subtext"]}>
|
||||
当前已选择 {formData.devices?.length || 0} 个设备
|
||||
</div>
|
||||
</div>
|
||||
<div className={style["form-actions"]}>
|
||||
<Button
|
||||
onClick={handlePrev}
|
||||
size="large"
|
||||
className={style["secondary-btn"]}
|
||||
>
|
||||
上一步
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={handleNext}
|
||||
size="large"
|
||||
className={style["main-btn"]}
|
||||
>
|
||||
下一步
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
// 步骤3：好友设置（占位）
|
||||
const renderFriendSettings = () => (
|
||||
<div className={style["form-section"]}>
|
||||
<div className={style["placeholder-content"]}>
|
||||
<span className={style["placeholder-icon"]}>[好友选择组件占位]</span>
|
||||
<div className={style["placeholder-text"]}>好友设置功能开发中...</div>
|
||||
<div className={style["placeholder-subtext"]}>
|
||||
当前已选择 {formData.friends?.length || 0} 个好友
|
||||
</div>
|
||||
</div>
|
||||
<div className={style["form-actions"]}>
|
||||
<Button
|
||||
onClick={handlePrev}
|
||||
size="large"
|
||||
className={style["secondary-btn"]}
|
||||
>
|
||||
上一步
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={handleComplete}
|
||||
size="large"
|
||||
loading={isSubmitting}
|
||||
className={style["main-btn"]}
|
||||
>
|
||||
{isEditMode ? "更新任务" : "创建任务"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={style["new-page-bg"]}>
|
||||
{renderNavBar()}
|
||||
<div className={style["new-page-center"]}>
|
||||
{/* 步骤器保留新项目的 */}
|
||||
{/* 你可以在这里插入新项目的步骤器组件 */}
|
||||
<div className={style["form-card"]}>
|
||||
{currentStep === 1 && renderBasicSettings()}
|
||||
{currentStep === 2 && renderDeviceSelection()}
|
||||
{currentStep === 3 && renderFriendSettings()}
|
||||
{isLoading && (
|
||||
<div className={style["loading"]}>
|
||||
<Spin />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NewAutoLike;
|
||||
250
nkebao/src/pages/workspace/auto-like/new/new.module.scss
Normal file
250
nkebao/src/pages/workspace/auto-like/new/new.module.scss
Normal file
@@ -0,0 +1,250 @@
|
||||
.new-page-bg {
|
||||
min-height: 100vh;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 56px;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 0 #f0f0f0;
|
||||
padding: 0 24px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.nav-back-btn {
|
||||
border: none;
|
||||
background: none;
|
||||
font-size: 20px;
|
||||
color: #222;
|
||||
margin-right: 8px;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
min-width: 32px;
|
||||
min-height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #222;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.new-page-center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.form-card {
|
||||
background: #fff;
|
||||
border-radius: 18px;
|
||||
box-shadow: 0 2px 16px rgba(0,0,0,0.06);
|
||||
padding: 36px 32px 32px 32px;
|
||||
min-width: 340px;
|
||||
max-width: 420px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
margin-bottom: 28px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
border-radius: 10px !important;
|
||||
height: 44px;
|
||||
font-size: 15px;
|
||||
padding-left: 14px;
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #e5e6eb;
|
||||
transition: border 0.2s;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
border-color: #1890ff;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.stepper-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.stepper-btn {
|
||||
border-radius: 8px !important;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
font-size: 18px;
|
||||
background: #f5f6fa;
|
||||
border: 1px solid #e5e6eb;
|
||||
color: #222;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: border 0.2s;
|
||||
}
|
||||
|
||||
.stepper-btn:hover {
|
||||
border-color: #1890ff;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.stepper-value {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
min-width: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.time-range {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.time-input {
|
||||
border-radius: 10px !important;
|
||||
height: 44px;
|
||||
font-size: 15px;
|
||||
padding-left: 14px;
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #e5e6eb;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.time-separator {
|
||||
font-size: 15px;
|
||||
color: #888;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.content-types {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.content-type-tag {
|
||||
border-radius: 8px;
|
||||
background: #f5f6fa;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
padding: 6px 18px;
|
||||
cursor: pointer;
|
||||
border: 1px solid #e5e6eb;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.content-type-tag-active {
|
||||
border-radius: 8px;
|
||||
background: #e6f4ff;
|
||||
color: #1890ff;
|
||||
font-size: 14px;
|
||||
padding: 6px 18px;
|
||||
cursor: pointer;
|
||||
border: 1px solid #1890ff;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.main-btn {
|
||||
border-radius: 10px !important;
|
||||
height: 44px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
background: #1890ff;
|
||||
border: none;
|
||||
box-shadow: 0 2px 8px rgba(24,144,255,0.08);
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.main-btn:hover {
|
||||
background: #1677ff;
|
||||
}
|
||||
|
||||
.secondary-btn {
|
||||
border-radius: 10px !important;
|
||||
height: 44px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
background: #fff;
|
||||
border: 1.5px solid #e5e6eb;
|
||||
color: #222;
|
||||
transition: border 0.2s;
|
||||
}
|
||||
|
||||
.secondary-btn:hover {
|
||||
border-color: #1890ff;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.placeholder-content {
|
||||
text-align: center;
|
||||
color: #888;
|
||||
padding: 40px 0 24px 0;
|
||||
}
|
||||
|
||||
.placeholder-icon {
|
||||
font-size: 32px;
|
||||
color: #d9d9d9;
|
||||
margin-bottom: 12px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.placeholder-text {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.placeholder-subtext {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.form-card {
|
||||
min-width: 0;
|
||||
max-width: 100vw;
|
||||
padding: 18px 6px 18px 6px;
|
||||
}
|
||||
.new-page-center {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
297
nkebao/src/pages/workspace/auto-like/record/index.tsx
Normal file
297
nkebao/src/pages/workspace/auto-like/record/index.tsx
Normal file
@@ -0,0 +1,297 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { NavBar, Button, Toast, SpinLoading, Card, Avatar } from "antd-mobile";
|
||||
import { Input } from "antd";
|
||||
import InfiniteList from "@/components/InfiniteList/InfiniteList";
|
||||
import {
|
||||
SearchOutlined,
|
||||
ReloadOutlined,
|
||||
LikeOutlined,
|
||||
UserOutlined,
|
||||
} from "@ant-design/icons";
|
||||
|
||||
import Layout from "@/components/Layout/Layout";
|
||||
import MeauMobile from "@/components/MeauMobile/MeauMoible";
|
||||
import { fetchLikeRecords, fetchAutoLikeTaskDetail } from "@/api/autoLike";
|
||||
import { LikeRecord, LikeTask } from "@/types/auto-like";
|
||||
import style from "./record.module.scss";
|
||||
|
||||
// 格式化日期
|
||||
const formatDate = (dateString: string) => {
|
||||
try {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleString("zh-CN", {
|
||||
year: "numeric",
|
||||
month: "2-digit",
|
||||
day: "2-digit",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
} catch (error) {
|
||||
return dateString;
|
||||
}
|
||||
};
|
||||
|
||||
const AutoLikeDetail: React.FC = () => {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const [records, setRecords] = useState<LikeRecord[]>([]);
|
||||
const [taskDetail, setTaskDetail] = useState<LikeTask | null>(null);
|
||||
const [recordsLoading, setRecordsLoading] = useState(false);
|
||||
const [taskLoading, setTaskLoading] = useState(false);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [hasMore, setHasMore] = useState(true);
|
||||
const pageSize = 10;
|
||||
|
||||
// 获取任务详情
|
||||
const fetchTaskDetail = async () => {
|
||||
if (!id) return;
|
||||
setTaskLoading(true);
|
||||
try {
|
||||
const detail = await fetchAutoLikeTaskDetail(id);
|
||||
setTaskDetail(detail);
|
||||
} catch (error) {
|
||||
Toast.show({
|
||||
content: "获取任务详情失败",
|
||||
position: "top",
|
||||
});
|
||||
} finally {
|
||||
setTaskLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 获取点赞记录
|
||||
const fetchRecords = async (
|
||||
page: number = 1,
|
||||
isLoadMore: boolean = false
|
||||
) => {
|
||||
if (!id) return;
|
||||
|
||||
if (!isLoadMore) {
|
||||
setRecordsLoading(true);
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetchLikeRecords(id, page, pageSize, searchTerm);
|
||||
const newRecords = response.list || [];
|
||||
|
||||
if (isLoadMore) {
|
||||
setRecords((prev) => [...prev, ...newRecords]);
|
||||
} else {
|
||||
setRecords(newRecords);
|
||||
}
|
||||
|
||||
setTotal(response.total || 0);
|
||||
setCurrentPage(page);
|
||||
setHasMore(newRecords.length === pageSize);
|
||||
} catch (error) {
|
||||
Toast.show({
|
||||
content: "获取点赞记录失败",
|
||||
position: "top",
|
||||
});
|
||||
} finally {
|
||||
setRecordsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchTaskDetail();
|
||||
fetchRecords(1, false);
|
||||
}, [id]);
|
||||
|
||||
const handleSearch = () => {
|
||||
setCurrentPage(1);
|
||||
fetchRecords(1, false);
|
||||
};
|
||||
|
||||
const handleRefresh = () => {
|
||||
fetchRecords(currentPage, false);
|
||||
};
|
||||
|
||||
const handleLoadMore = async () => {
|
||||
if (hasMore && !recordsLoading) {
|
||||
await fetchRecords(currentPage + 1, true);
|
||||
}
|
||||
};
|
||||
|
||||
const renderRecordItem = (record: LikeRecord) => (
|
||||
<Card key={record.id} className={style["record-card"]}>
|
||||
<div className={style["record-header"]}>
|
||||
<div className={style["user-info"]}>
|
||||
<Avatar
|
||||
src={
|
||||
record.friendAvatar ||
|
||||
"https://api.dicebear.com/7.x/avataaars/svg?seed=fallback"
|
||||
}
|
||||
className={style["user-avatar"]}
|
||||
>
|
||||
<UserOutlined />
|
||||
</Avatar>
|
||||
<div className={style["user-details"]}>
|
||||
<div className={style["user-name"]} title={record.friendName}>
|
||||
{record.friendName}
|
||||
</div>
|
||||
<div className={style["user-role"]}>内容发布者</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={style["record-time"]}>
|
||||
{formatDate(record.momentTime || record.likeTime)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={style["record-content"]}>
|
||||
{record.content && (
|
||||
<p className={style["content-text"]}>{record.content}</p>
|
||||
)}
|
||||
|
||||
{Array.isArray(record.resUrls) && record.resUrls.length > 0 && (
|
||||
<div className={style["content-images"]}>
|
||||
{record.resUrls.slice(0, 9).map((image: string, idx: number) => (
|
||||
<div key={idx} className={style["image-item"]}>
|
||||
<img
|
||||
src={image}
|
||||
alt={`内容图片 ${idx + 1}`}
|
||||
className={style["content-image"]}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className={style["like-info"]}>
|
||||
<Avatar
|
||||
src={
|
||||
record.operatorAvatar ||
|
||||
"https://api.dicebear.com/7.x/avataaars/svg?seed=operator"
|
||||
}
|
||||
className={style["operator-avatar"]}
|
||||
>
|
||||
<UserOutlined />
|
||||
</Avatar>
|
||||
<div className={style["like-text"]}>
|
||||
<span className={style["operator-name"]} title={record.operatorName}>
|
||||
{record.operatorName}
|
||||
</span>
|
||||
<span className={style["like-action"]}>点赞了这条内容</span>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
|
||||
return (
|
||||
<Layout
|
||||
header={
|
||||
<NavBar
|
||||
backArrow
|
||||
style={{ background: "#fff" }}
|
||||
onBack={() => window.history.back()}
|
||||
left={
|
||||
<div style={{ color: "var(--primary-color)", fontWeight: 600 }}>
|
||||
点赞记录
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
}
|
||||
footer={<MeauMobile />}
|
||||
>
|
||||
<div className={style["detail-page"]}>
|
||||
{/* 任务信息卡片 */}
|
||||
{taskDetail && (
|
||||
<div className={style["task-info-card"]}>
|
||||
<div className={style["task-header"]}>
|
||||
<h3 className={style["task-name"]}>{taskDetail.name}</h3>
|
||||
<span
|
||||
className={`${style["task-status"]} ${
|
||||
Number(taskDetail.status) === 1
|
||||
? style["active"]
|
||||
: style["inactive"]
|
||||
}`}
|
||||
>
|
||||
{Number(taskDetail.status) === 1 ? "进行中" : "已暂停"}
|
||||
</span>
|
||||
</div>
|
||||
<div className={style["task-stats"]}>
|
||||
<div className={style["stat-item"]}>
|
||||
<LikeOutlined className={style["stat-icon"]} />
|
||||
<span className={style["stat-label"]}>今日点赞：</span>
|
||||
<span className={style["stat-value"]}>
|
||||
{taskDetail.todayLikeCount || 0}
|
||||
</span>
|
||||
</div>
|
||||
<div className={style["stat-item"]}>
|
||||
<LikeOutlined className={style["stat-icon"]} />
|
||||
<span className={style["stat-label"]}>总点赞数：</span>
|
||||
<span className={style["stat-value"]}>
|
||||
{taskDetail.totalLikeCount || 0}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 搜索区域 */}
|
||||
<div className={style["search-section"]}>
|
||||
<div className={style["search-wrapper"]}>
|
||||
<div className={style["search-input-wrapper"]}>
|
||||
<SearchOutlined className={style["search-icon"]} />
|
||||
<Input
|
||||
placeholder="搜索好友昵称或内容"
|
||||
className={style["search-input"]}
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
onPressEnter={handleSearch}
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
size="small"
|
||||
onClick={handleSearch}
|
||||
className={style["search-btn"]}
|
||||
>
|
||||
搜索
|
||||
</Button>
|
||||
<button
|
||||
className={style["refresh-btn"]}
|
||||
onClick={handleRefresh}
|
||||
disabled={recordsLoading}
|
||||
>
|
||||
<ReloadOutlined
|
||||
style={{
|
||||
animation: recordsLoading
|
||||
? "spin 1s linear infinite"
|
||||
: "none",
|
||||
}}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 记录列表 */}
|
||||
<div className={style["records-section"]}>
|
||||
{recordsLoading && currentPage === 1 ? (
|
||||
<div className={style["loading"]}>
|
||||
<SpinLoading color="primary" />
|
||||
<div className={style["loading-text"]}>加载中...</div>
|
||||
</div>
|
||||
) : records.length === 0 ? (
|
||||
<div className={style["empty-state"]}>
|
||||
<LikeOutlined className={style["empty-icon"]} />
|
||||
<div className={style["empty-text"]}>暂无点赞记录</div>
|
||||
</div>
|
||||
) : (
|
||||
<InfiniteList
|
||||
data={records}
|
||||
renderItem={renderRecordItem}
|
||||
hasMore={hasMore}
|
||||
loadMore={handleLoadMore}
|
||||
className={style["records-list"]}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default AutoLikeDetail;
|
||||
351
nkebao/src/pages/workspace/auto-like/record/record.module.scss
Normal file
351
nkebao/src/pages/workspace/auto-like/record/record.module.scss
Normal file
@@ -0,0 +1,351 @@
|
||||
.detail-page {
|
||||
background: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
.task-info-card {
|
||||
background: white;
|
||||
margin: 16px;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.task-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.task-name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.task-status {
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
|
||||
&.active {
|
||||
background: #f6ffed;
|
||||
color: #52c41a;
|
||||
border: 1px solid #b7eb8f;
|
||||
}
|
||||
|
||||
&.inactive {
|
||||
background: #f5f5f5;
|
||||
color: #666;
|
||||
border: 1px solid #d9d9d9;
|
||||
}
|
||||
}
|
||||
|
||||
.task-stats {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
font-size: 16px;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.search-section {
|
||||
padding: 0 16px 16px;
|
||||
}
|
||||
|
||||
.search-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.search-input-wrapper {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
padding: 0 12px 0 32px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
|
||||
&:focus {
|
||||
border-color: #1890ff;
|
||||
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
height: 36px;
|
||||
padding: 0 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
height: 36px;
|
||||
width: 36px;
|
||||
padding: 0;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid #d9d9d9;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
border-color: #1890ff;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.records-section {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.records-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.record-card {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.record-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
max-width: 65%;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.user-details {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.user-role {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.record-time {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
background: #f8f9fa;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.record-content {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.content-text {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 12px;
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
.content-images {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
|
||||
&.single {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
&.double {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
&.multiple {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.image-item {
|
||||
aspect-ratio: 1;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.content-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.like-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.operator-avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.like-text {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.operator-name {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.like-action {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 60vh;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 48px;
|
||||
color: #d9d9d9;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 16px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
// 移动端适配
|
||||
@media (max-width: 768px) {
|
||||
.task-stats {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.search-wrapper {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
max-width: 60%;
|
||||
}
|
||||
|
||||
.content-images {
|
||||
&.multiple {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
import React from "react";
|
||||
import PlaceholderPage from "@/components/PlaceholderPage";
|
||||
|
||||
const GroupPush: React.FC = () => {
|
||||
return (
|
||||
<PlaceholderPage title="群发推送" showAddButton addButtonText="新建推送" />
|
||||
);
|
||||
};
|
||||
|
||||
export default GroupPush;
|
||||
100
nkebao/src/pages/workspace/group-push/detail/index.module.scss
Normal file
100
nkebao/src/pages/workspace/group-push/detail/index.module.scss
Normal file
@@ -0,0 +1,100 @@
|
||||
|
||||
|
||||
.searchBar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 16px 0 8px 0;
|
||||
}
|
||||
|
||||
.taskList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.emptyCard {
|
||||
text-align: center;
|
||||
padding: 48px 0;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
||||
}
|
||||
|
||||
.taskCard {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
||||
padding: 20px 16px 12px 16px;
|
||||
}
|
||||
|
||||
.taskHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.taskTitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.taskActions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.taskInfoGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 8px 16px;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.progressBlock {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.progressLabel {
|
||||
font-size: 13px;
|
||||
color: #888;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.taskFooter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
border-top: 1px dashed #eee;
|
||||
padding-top: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.expandedPanel {
|
||||
margin-top: 16px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px dashed #eee;
|
||||
}
|
||||
|
||||
.expandedGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.taskCard {
|
||||
padding: 12px 6px 8px 6px;
|
||||
}
|
||||
.expandedGrid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
258
nkebao/src/pages/workspace/group-push/detail/index.tsx
Normal file
258
nkebao/src/pages/workspace/group-push/detail/index.tsx
Normal file
@@ -0,0 +1,258 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useParams, useNavigate } from "react-router-dom";
|
||||
import { Card, Badge, Button, Progress, Spin } from "antd";
|
||||
import {
|
||||
ArrowLeftOutlined,
|
||||
SettingOutlined,
|
||||
TeamOutlined,
|
||||
MessageOutlined,
|
||||
CalendarOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import Layout from "@/components/Layout/Layout";
|
||||
import MeauMobile from "@/components/MeauMobile/MeauMoible";
|
||||
import { getGroupPushTaskDetail, GroupPushTask } from "@/api/groupPush";
|
||||
import styles from "./index.module.scss";
|
||||
|
||||
const Detail: React.FC = () => {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const navigate = useNavigate();
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [task, setTask] = useState<GroupPushTask | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!id) return;
|
||||
setLoading(true);
|
||||
getGroupPushTaskDetail(id)
|
||||
.then((res) => {
|
||||
setTask(res.data || res); // 兼容两种返回格式
|
||||
})
|
||||
.finally(() => setLoading(false));
|
||||
}, [id]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Layout
|
||||
header={
|
||||
<div
|
||||
style={{
|
||||
background: "#fff",
|
||||
padding: "0 16px",
|
||||
fontWeight: 600,
|
||||
fontSize: 18,
|
||||
}}
|
||||
>
|
||||
<ArrowLeftOutlined
|
||||
onClick={() => navigate(-1)}
|
||||
style={{ marginRight: 12, cursor: "pointer" }}
|
||||
/>
|
||||
群发推送详情
|
||||
</div>
|
||||
}
|
||||
footer={<MeauMobile />}
|
||||
>
|
||||
<div style={{ padding: 48, textAlign: "center" }}>
|
||||
<Spin />
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
if (!task) {
|
||||
return (
|
||||
<Layout
|
||||
header={
|
||||
<div
|
||||
style={{
|
||||
background: "#fff",
|
||||
padding: "0 16px",
|
||||
fontWeight: 600,
|
||||
fontSize: 18,
|
||||
}}
|
||||
>
|
||||
<ArrowLeftOutlined
|
||||
onClick={() => navigate(-1)}
|
||||
style={{ marginRight: 12, cursor: "pointer" }}
|
||||
/>
|
||||
群发推送详情
|
||||
</div>
|
||||
}
|
||||
footer={<MeauMobile />}
|
||||
>
|
||||
<div style={{ padding: 48, textAlign: "center", color: "#888" }}>
|
||||
未找到该任务
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
const getStatusColor = (status: number) => {
|
||||
switch (status) {
|
||||
case 1:
|
||||
return "green";
|
||||
case 2:
|
||||
return "gray";
|
||||
default:
|
||||
return "gray";
|
||||
}
|
||||
};
|
||||
const getStatusText = (status: number) => {
|
||||
switch (status) {
|
||||
case 1:
|
||||
return "进行中";
|
||||
case 2:
|
||||
return "已暂停";
|
||||
default:
|
||||
return "未知";
|
||||
}
|
||||
};
|
||||
const getMessageTypeText = (type: string) => {
|
||||
switch (type) {
|
||||
case "text":
|
||||
return "文字";
|
||||
case "image":
|
||||
return "图片";
|
||||
case "video":
|
||||
return "视频";
|
||||
case "link":
|
||||
return "链接";
|
||||
default:
|
||||
return "未知";
|
||||
}
|
||||
};
|
||||
const getSuccessRate = (pushCount: number, successCount: number) => {
|
||||
if (pushCount === 0) return 0;
|
||||
return Math.round((successCount / pushCount) * 100);
|
||||
};
|
||||
|
||||
return (
|
||||
<Layout
|
||||
header={
|
||||
<div
|
||||
style={{
|
||||
background: "#fff",
|
||||
padding: "0 16px",
|
||||
fontWeight: 600,
|
||||
fontSize: 18,
|
||||
}}
|
||||
>
|
||||
<ArrowLeftOutlined
|
||||
onClick={() => navigate(-1)}
|
||||
style={{ marginRight: 12, cursor: "pointer" }}
|
||||
/>
|
||||
群发推送详情
|
||||
</div>
|
||||
}
|
||||
footer={<MeauMobile />}
|
||||
>
|
||||
<div className={styles.bg}>
|
||||
<Card className={styles.taskCard}>
|
||||
<div className={styles.taskHeader}>
|
||||
<div className={styles.taskTitle}>
|
||||
<span>{task.name}</span>
|
||||
<Badge
|
||||
color={getStatusColor(task.status)}
|
||||
text={getStatusText(task.status)}
|
||||
style={{ marginLeft: 8 }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.taskInfoGrid}>
|
||||
<div>执行设备：{task.deviceCount} 个</div>
|
||||
<div>目标群组：{task.targetGroups.length} 个</div>
|
||||
<div>
|
||||
推送成功：{task.successCount}/{task.pushCount}
|
||||
</div>
|
||||
<div>创建人：{task.creator}</div>
|
||||
</div>
|
||||
<div className={styles.progressBlock}>
|
||||
<div className={styles.progressLabel}>推送成功率</div>
|
||||
<Progress
|
||||
percent={getSuccessRate(task.pushCount, task.successCount)}
|
||||
size="small"
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.taskFooter}>
|
||||
<div>
|
||||
<CalendarOutlined /> 上次推送：{task.lastPushTime}
|
||||
</div>
|
||||
<div>创建时间：{task.createTime}</div>
|
||||
</div>
|
||||
<div className={styles.expandedPanel}>
|
||||
<div className={styles.expandedGrid}>
|
||||
<div>
|
||||
<SettingOutlined /> <b>基本设置</b>
|
||||
<div>推送间隔：{task.pushInterval} 秒</div>
|
||||
<div>每日最大推送数：{task.maxPushPerDay} 条</div>
|
||||
<div>
|
||||
执行时间段：{task.timeRange.start} - {task.timeRange.end}
|
||||
</div>
|
||||
<div>
|
||||
推送模式：
|
||||
{task.pushMode === "immediate" ? "立即推送" : "定时推送"}
|
||||
</div>
|
||||
{task.scheduledTime && (
|
||||
<div>定时时间：{task.scheduledTime}</div>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<TeamOutlined /> <b>目标群组</b>
|
||||
<div style={{ display: "flex", flexWrap: "wrap", gap: 4 }}>
|
||||
{task.targetGroups.map((group) => (
|
||||
<Badge
|
||||
key={group}
|
||||
color="blue"
|
||||
text={group}
|
||||
style={{ background: "#f0f5ff", marginRight: 4 }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<MessageOutlined /> <b>消息内容</b>
|
||||
<div>消息类型：{getMessageTypeText(task.messageType)}</div>
|
||||
<div
|
||||
style={{
|
||||
background: "#f5f5f5",
|
||||
padding: 8,
|
||||
borderRadius: 4,
|
||||
marginTop: 4,
|
||||
}}
|
||||
>
|
||||
{task.messageContent}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<CalendarOutlined /> <b>执行进度</b>
|
||||
<div>
|
||||
今日已推送：{task.pushCount} / {task.maxPushPerDay}
|
||||
</div>
|
||||
<Progress
|
||||
percent={Math.round(
|
||||
(task.pushCount / task.maxPushPerDay) * 100
|
||||
)}
|
||||
size="small"
|
||||
/>
|
||||
{task.targetTags.length > 0 && (
|
||||
<div style={{ marginTop: 8 }}>
|
||||
<div>目标标签：</div>
|
||||
<div style={{ display: "flex", flexWrap: "wrap", gap: 4 }}>
|
||||
{task.targetTags.map((tag) => (
|
||||
<Badge
|
||||
key={tag}
|
||||
color="purple"
|
||||
text={tag}
|
||||
style={{ background: "#f9f0ff", marginRight: 4 }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Detail;
|
||||
@@ -0,0 +1,237 @@
|
||||
import React, { useState } from "react";
|
||||
import { Input, Button, Card, Switch } from "antd";
|
||||
import { MinusOutlined, PlusOutlined } from "@ant-design/icons";
|
||||
|
||||
interface BasicSettingsProps {
|
||||
defaultValues?: {
|
||||
name: string;
|
||||
pushTimeStart: string;
|
||||
pushTimeEnd: string;
|
||||
dailyPushCount: number;
|
||||
pushOrder: "earliest" | "latest";
|
||||
isLoopPush: boolean;
|
||||
isImmediatePush: boolean;
|
||||
isEnabled: boolean;
|
||||
};
|
||||
onNext: (values: any) => void;
|
||||
onSave: (values: any) => void;
|
||||
onCancel: () => void;
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
const BasicSettings: React.FC<BasicSettingsProps> = ({
|
||||
defaultValues = {
|
||||
name: "",
|
||||
pushTimeStart: "06:00",
|
||||
pushTimeEnd: "23:59",
|
||||
dailyPushCount: 20,
|
||||
pushOrder: "latest",
|
||||
isLoopPush: false,
|
||||
isImmediatePush: false,
|
||||
isEnabled: false,
|
||||
},
|
||||
onNext,
|
||||
onSave,
|
||||
onCancel,
|
||||
loading = false,
|
||||
}) => {
|
||||
const [values, setValues] = useState(defaultValues);
|
||||
|
||||
const handleChange = (field: string, value: any) => {
|
||||
setValues((prev) => ({ ...prev, [field]: value }));
|
||||
};
|
||||
|
||||
const handleCountChange = (increment: boolean) => {
|
||||
setValues((prev) => ({
|
||||
...prev,
|
||||
dailyPushCount: increment
|
||||
? prev.dailyPushCount + 1
|
||||
: Math.max(1, prev.dailyPushCount - 1),
|
||||
}));
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ marginBottom: 24 }}>
|
||||
<Card>
|
||||
<div style={{ padding: 16 }}>
|
||||
{/* 任务名称 */}
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<span style={{ color: "red", marginRight: 4 }}>*</span>任务名称:
|
||||
<Input
|
||||
value={values.name}
|
||||
onChange={(e) => handleChange("name", e.target.value)}
|
||||
placeholder="请输入任务名称"
|
||||
style={{ marginTop: 4 }}
|
||||
/>
|
||||
</div>
|
||||
{/* 允许推送的时间段 */}
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<span>允许推送的时间段:</span>
|
||||
<div style={{ display: "flex", gap: 8, marginTop: 4 }}>
|
||||
<Input
|
||||
type="time"
|
||||
value={values.pushTimeStart}
|
||||
onChange={(e) => handleChange("pushTimeStart", e.target.value)}
|
||||
style={{ width: 120 }}
|
||||
/>
|
||||
<span style={{ color: "#888" }}>至</span>
|
||||
<Input
|
||||
type="time"
|
||||
value={values.pushTimeEnd}
|
||||
onChange={(e) => handleChange("pushTimeEnd", e.target.value)}
|
||||
style={{ width: 120 }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* 每日推送 */}
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<span>每日推送:</span>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 8,
|
||||
marginTop: 4,
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
icon={<MinusOutlined />}
|
||||
onClick={() => handleCountChange(false)}
|
||||
disabled={loading}
|
||||
/>
|
||||
<Input
|
||||
type="number"
|
||||
value={values.dailyPushCount}
|
||||
onChange={(e) =>
|
||||
handleChange(
|
||||
"dailyPushCount",
|
||||
Number.parseInt(e.target.value) || 1
|
||||
)
|
||||
}
|
||||
style={{ width: 80, textAlign: "center" }}
|
||||
min={1}
|
||||
disabled={loading}
|
||||
/>
|
||||
<Button
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => handleCountChange(true)}
|
||||
disabled={loading}
|
||||
/>
|
||||
<span style={{ color: "#888" }}>条内容</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* 推送顺序 */}
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<span>推送顺序:</span>
|
||||
<Button.Group style={{ marginLeft: 8 }}>
|
||||
<Button
|
||||
type={values.pushOrder === "earliest" ? "primary" : "default"}
|
||||
onClick={() => handleChange("pushOrder", "earliest")}
|
||||
disabled={loading}
|
||||
>
|
||||
按最早
|
||||
</Button>
|
||||
<Button
|
||||
type={values.pushOrder === "latest" ? "primary" : "default"}
|
||||
onClick={() => handleChange("pushOrder", "latest")}
|
||||
disabled={loading}
|
||||
>
|
||||
按最新
|
||||
</Button>
|
||||
</Button.Group>
|
||||
</div>
|
||||
{/* 是否循环推送 */}
|
||||
<div
|
||||
style={{
|
||||
marginBottom: 16,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<span>
|
||||
<span style={{ color: "red", marginRight: 4 }}>*</span>
|
||||
是否循环推送:
|
||||
</span>
|
||||
<Switch
|
||||
checked={values.isLoopPush}
|
||||
onChange={(checked) => handleChange("isLoopPush", checked)}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
{/* 是否立即推送 */}
|
||||
<div
|
||||
style={{
|
||||
marginBottom: 16,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<span>
|
||||
<span style={{ color: "red", marginRight: 4 }}>*</span>
|
||||
是否立即推送:
|
||||
</span>
|
||||
<Switch
|
||||
checked={values.isImmediatePush}
|
||||
onChange={(checked) => handleChange("isImmediatePush", checked)}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
{values.isImmediatePush && (
|
||||
<div
|
||||
style={{
|
||||
background: "#fffbe6",
|
||||
border: "1px solid #ffe58f",
|
||||
borderRadius: 4,
|
||||
padding: 8,
|
||||
color: "#ad8b00",
|
||||
marginBottom: 16,
|
||||
}}
|
||||
>
|
||||
如果启用，系统会把内容库里所有的内容按顺序推送到指定的社群
|
||||
</div>
|
||||
)}
|
||||
{/* 是否启用 */}
|
||||
<div
|
||||
style={{
|
||||
marginBottom: 16,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<span>
|
||||
<span style={{ color: "red", marginRight: 4 }}>*</span>是否启用:
|
||||
</span>
|
||||
<Switch
|
||||
checked={values.isEnabled}
|
||||
onChange={(checked) => handleChange("isEnabled", checked)}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: 8,
|
||||
justifyContent: "flex-end",
|
||||
marginTop: 16,
|
||||
}}
|
||||
>
|
||||
<Button onClick={() => onNext(values)} disabled={loading}>
|
||||
下一步
|
||||
</Button>
|
||||
<Button onClick={() => onSave(values)} disabled={loading}>
|
||||
{loading ? "保存中..." : "保存"}
|
||||
</Button>
|
||||
<Button onClick={onCancel} disabled={loading}>
|
||||
取消
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BasicSettings;
|
||||
@@ -0,0 +1,247 @@
|
||||
import React, { useState } from "react";
|
||||
import { Button, Card, Input, Checkbox, Avatar } from "antd";
|
||||
import { FileTextOutlined, SearchOutlined } from "@ant-design/icons";
|
||||
|
||||
interface ContentLibrary {
|
||||
id: string;
|
||||
name: string;
|
||||
targets: Array<{
|
||||
id: string;
|
||||
avatar: string;
|
||||
}>;
|
||||
}
|
||||
|
||||
interface ContentSelectorProps {
|
||||
selectedLibraries: ContentLibrary[];
|
||||
onLibrariesChange: (libraries: ContentLibrary[]) => void;
|
||||
onPrevious: () => void;
|
||||
onNext: () => void;
|
||||
onSave: () => void;
|
||||
onCancel: () => void;
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
const mockLibraries: ContentLibrary[] = [
|
||||
{
|
||||
id: "1",
|
||||
name: "产品推广内容库",
|
||||
targets: [
|
||||
{ id: "1", avatar: "https://via.placeholder.com/32" },
|
||||
{ id: "2", avatar: "https://via.placeholder.com/32" },
|
||||
{ id: "3", avatar: "https://via.placeholder.com/32" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "活动宣传内容库",
|
||||
targets: [
|
||||
{ id: "4", avatar: "https://via.placeholder.com/32" },
|
||||
{ id: "5", avatar: "https://via.placeholder.com/32" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "客户服务内容库",
|
||||
targets: [
|
||||
{ id: "6", avatar: "https://via.placeholder.com/32" },
|
||||
{ id: "7", avatar: "https://via.placeholder.com/32" },
|
||||
{ id: "8", avatar: "https://via.placeholder.com/32" },
|
||||
{ id: "9", avatar: "https://via.placeholder.com/32" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "节日问候内容库",
|
||||
targets: [
|
||||
{ id: "10", avatar: "https://via.placeholder.com/32" },
|
||||
{ id: "11", avatar: "https://via.placeholder.com/32" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "新品发布内容库",
|
||||
targets: [
|
||||
{ id: "12", avatar: "https://via.placeholder.com/32" },
|
||||
{ id: "13", avatar: "https://via.placeholder.com/32" },
|
||||
{ id: "14", avatar: "https://via.placeholder.com/32" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const ContentSelector: React.FC<ContentSelectorProps> = ({
|
||||
selectedLibraries,
|
||||
onLibrariesChange,
|
||||
onPrevious,
|
||||
onNext,
|
||||
onSave,
|
||||
onCancel,
|
||||
loading = false,
|
||||
}) => {
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [libraries] = useState<ContentLibrary[]>(mockLibraries);
|
||||
|
||||
const filteredLibraries = libraries.filter((library) =>
|
||||
library.name.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
);
|
||||
|
||||
const handleLibraryToggle = (library: ContentLibrary, checked: boolean) => {
|
||||
if (checked) {
|
||||
onLibrariesChange([...selectedLibraries, library]);
|
||||
} else {
|
||||
onLibrariesChange(selectedLibraries.filter((l) => l.id !== library.id));
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelectAll = () => {
|
||||
if (selectedLibraries.length === filteredLibraries.length) {
|
||||
onLibrariesChange([]);
|
||||
} else {
|
||||
onLibrariesChange(filteredLibraries);
|
||||
}
|
||||
};
|
||||
|
||||
const isLibrarySelected = (libraryId: string) => {
|
||||
return selectedLibraries.some((library) => library.id === libraryId);
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ marginBottom: 24 }}>
|
||||
<Card>
|
||||
<div style={{ padding: 16 }}>
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<span>搜索内容库:</span>
|
||||
<Input
|
||||
prefix={<SearchOutlined />}
|
||||
placeholder="搜索内容库名称"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
disabled={loading}
|
||||
style={{ marginTop: 4 }}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
marginBottom: 16,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 8,
|
||||
}}
|
||||
>
|
||||
<Checkbox
|
||||
checked={
|
||||
selectedLibraries.length === filteredLibraries.length &&
|
||||
filteredLibraries.length > 0
|
||||
}
|
||||
onChange={handleSelectAll}
|
||||
disabled={loading}
|
||||
>
|
||||
全选 ({selectedLibraries.length}/{filteredLibraries.length})
|
||||
</Checkbox>
|
||||
</div>
|
||||
<div style={{ maxHeight: 320, overflowY: "auto" }}>
|
||||
{filteredLibraries.map((library) => (
|
||||
<div
|
||||
key={library.id}
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
padding: 8,
|
||||
border: "1px solid #f0f0f0",
|
||||
borderRadius: 6,
|
||||
marginBottom: 8,
|
||||
background: isLibrarySelected(library.id)
|
||||
? "#e6f7ff"
|
||||
: "#fff",
|
||||
}}
|
||||
>
|
||||
<Checkbox
|
||||
checked={isLibrarySelected(library.id)}
|
||||
onChange={(e) =>
|
||||
handleLibraryToggle(library, e.target.checked)
|
||||
}
|
||||
disabled={loading}
|
||||
style={{ marginRight: 8 }}
|
||||
/>
|
||||
<Avatar
|
||||
icon={<FileTextOutlined />}
|
||||
size={40}
|
||||
style={{
|
||||
marginRight: 8,
|
||||
background: "#e6f7ff",
|
||||
color: "#1890ff",
|
||||
}}
|
||||
/>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ fontWeight: 500 }}>{library.name}</div>
|
||||
<div style={{ fontSize: 12, color: "#888", marginTop: 2 }}>
|
||||
包含 {library.targets.length} 条内容
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: 2 }}>
|
||||
{library.targets.slice(0, 3).map((target) => (
|
||||
<Avatar
|
||||
key={target.id}
|
||||
src={target.avatar}
|
||||
size={24}
|
||||
style={{ border: "1px solid #fff" }}
|
||||
/>
|
||||
))}
|
||||
{library.targets.length > 3 && (
|
||||
<div
|
||||
style={{
|
||||
width: 24,
|
||||
height: 24,
|
||||
borderRadius: 12,
|
||||
background: "#eee",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
fontSize: 12,
|
||||
color: "#888",
|
||||
border: "1px solid #fff",
|
||||
}}
|
||||
>
|
||||
+{library.targets.length - 3}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{filteredLibraries.length === 0 && (
|
||||
<div style={{ textAlign: "center", color: "#bbb", padding: 32 }}>
|
||||
<FileTextOutlined style={{ fontSize: 32, marginBottom: 8 }} />
|
||||
没有找到匹配的内容库
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: 8,
|
||||
justifyContent: "flex-end",
|
||||
marginTop: 16,
|
||||
}}
|
||||
>
|
||||
<Button onClick={onPrevious} disabled={loading}>
|
||||
上一步
|
||||
</Button>
|
||||
<Button
|
||||
onClick={onNext}
|
||||
disabled={loading || selectedLibraries.length === 0}
|
||||
>
|
||||
下一步
|
||||
</Button>
|
||||
<Button onClick={onSave} disabled={loading}>
|
||||
{loading ? "保存中..." : "保存"}
|
||||
</Button>
|
||||
<Button onClick={onCancel} disabled={loading}>
|
||||
取消
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContentSelector;
|
||||
@@ -0,0 +1,245 @@
|
||||
import React, { useState } from "react";
|
||||
import { Button, Card, Input, Checkbox, Avatar } from "antd";
|
||||
import { TeamOutlined, SearchOutlined } from "@ant-design/icons";
|
||||
|
||||
interface WechatGroup {
|
||||
id: string;
|
||||
name: string;
|
||||
avatar: string;
|
||||
serviceAccount: {
|
||||
id: string;
|
||||
name: string;
|
||||
avatar: string;
|
||||
};
|
||||
}
|
||||
|
||||
interface GroupSelectorProps {
|
||||
selectedGroups: WechatGroup[];
|
||||
onGroupsChange: (groups: WechatGroup[]) => void;
|
||||
onPrevious: () => void;
|
||||
onNext: () => void;
|
||||
onSave: () => void;
|
||||
onCancel: () => void;
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
const mockGroups: WechatGroup[] = [
|
||||
{
|
||||
id: "1",
|
||||
name: "VIP客户群",
|
||||
avatar: "https://via.placeholder.com/40",
|
||||
serviceAccount: {
|
||||
id: "1",
|
||||
name: "客服小美",
|
||||
avatar: "https://via.placeholder.com/32",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "潜在客户群",
|
||||
avatar: "https://via.placeholder.com/40",
|
||||
serviceAccount: {
|
||||
id: "1",
|
||||
name: "客服小美",
|
||||
avatar: "https://via.placeholder.com/32",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "活动群",
|
||||
avatar: "https://via.placeholder.com/40",
|
||||
serviceAccount: {
|
||||
id: "2",
|
||||
name: "推广专员",
|
||||
avatar: "https://via.placeholder.com/32",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "推广群",
|
||||
avatar: "https://via.placeholder.com/40",
|
||||
serviceAccount: {
|
||||
id: "2",
|
||||
name: "推广专员",
|
||||
avatar: "https://via.placeholder.com/32",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "新客户群",
|
||||
avatar: "https://via.placeholder.com/40",
|
||||
serviceAccount: {
|
||||
id: "3",
|
||||
name: "销售小王",
|
||||
avatar: "https://via.placeholder.com/32",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "体验群",
|
||||
avatar: "https://via.placeholder.com/40",
|
||||
serviceAccount: {
|
||||
id: "3",
|
||||
name: "销售小王",
|
||||
avatar: "https://via.placeholder.com/32",
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const GroupSelector: React.FC<GroupSelectorProps> = ({
|
||||
selectedGroups,
|
||||
onGroupsChange,
|
||||
onPrevious,
|
||||
onNext,
|
||||
onSave,
|
||||
onCancel,
|
||||
loading = false,
|
||||
}) => {
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [groups] = useState<WechatGroup[]>(mockGroups);
|
||||
|
||||
const filteredGroups = groups.filter(
|
||||
(group) =>
|
||||
group.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
group.serviceAccount.name.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
);
|
||||
|
||||
const handleGroupToggle = (group: WechatGroup, checked: boolean) => {
|
||||
if (checked) {
|
||||
onGroupsChange([...selectedGroups, group]);
|
||||
} else {
|
||||
onGroupsChange(selectedGroups.filter((g) => g.id !== group.id));
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelectAll = () => {
|
||||
if (selectedGroups.length === filteredGroups.length) {
|
||||
onGroupsChange([]);
|
||||
} else {
|
||||
onGroupsChange(filteredGroups);
|
||||
}
|
||||
};
|
||||
|
||||
const isGroupSelected = (groupId: string) => {
|
||||
return selectedGroups.some((group) => group.id === groupId);
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ marginBottom: 24 }}>
|
||||
<Card>
|
||||
<div style={{ padding: 16 }}>
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<span>搜索群组:</span>
|
||||
<Input
|
||||
prefix={<SearchOutlined />}
|
||||
placeholder="搜索群组名称或客服名称"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
disabled={loading}
|
||||
style={{ marginTop: 4 }}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
marginBottom: 16,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 8,
|
||||
}}
|
||||
>
|
||||
<Checkbox
|
||||
checked={
|
||||
selectedGroups.length === filteredGroups.length &&
|
||||
filteredGroups.length > 0
|
||||
}
|
||||
onChange={handleSelectAll}
|
||||
disabled={loading}
|
||||
>
|
||||
全选 ({selectedGroups.length}/{filteredGroups.length})
|
||||
</Checkbox>
|
||||
</div>
|
||||
<div style={{ maxHeight: 320, overflowY: "auto" }}>
|
||||
{filteredGroups.map((group) => (
|
||||
<div
|
||||
key={group.id}
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
padding: 8,
|
||||
border: "1px solid #f0f0f0",
|
||||
borderRadius: 6,
|
||||
marginBottom: 8,
|
||||
background: isGroupSelected(group.id) ? "#e6f7ff" : "#fff",
|
||||
}}
|
||||
>
|
||||
<Checkbox
|
||||
checked={isGroupSelected(group.id)}
|
||||
onChange={(e) => handleGroupToggle(group, e.target.checked)}
|
||||
disabled={loading}
|
||||
style={{ marginRight: 8 }}
|
||||
/>
|
||||
<Avatar
|
||||
src={group.avatar}
|
||||
size={40}
|
||||
icon={<TeamOutlined />}
|
||||
style={{ marginRight: 8 }}
|
||||
/>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ fontWeight: 500 }}>{group.name}</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: "#888",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
marginTop: 2,
|
||||
}}
|
||||
>
|
||||
<Avatar
|
||||
src={group.serviceAccount.avatar}
|
||||
size={16}
|
||||
style={{ marginRight: 4 }}
|
||||
/>
|
||||
{group.serviceAccount.name}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{filteredGroups.length === 0 && (
|
||||
<div style={{ textAlign: "center", color: "#bbb", padding: 32 }}>
|
||||
<TeamOutlined style={{ fontSize: 32, marginBottom: 8 }} />
|
||||
没有找到匹配的群组
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: 8,
|
||||
justifyContent: "flex-end",
|
||||
marginTop: 16,
|
||||
}}
|
||||
>
|
||||
<Button onClick={onPrevious} disabled={loading}>
|
||||
上一步
|
||||
</Button>
|
||||
<Button
|
||||
onClick={onNext}
|
||||
disabled={loading || selectedGroups.length === 0}
|
||||
>
|
||||
下一步
|
||||
</Button>
|
||||
<Button onClick={onSave} disabled={loading}>
|
||||
{loading ? "保存中..." : "保存"}
|
||||
</Button>
|
||||
<Button onClick={onCancel} disabled={loading}>
|
||||
取消
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default GroupSelector;
|
||||
@@ -0,0 +1,43 @@
|
||||
import React from "react";
|
||||
import { Steps } from "antd-mobile";
|
||||
|
||||
interface StepIndicatorProps {
|
||||
currentStep: number;
|
||||
steps: { id: number; title: string; subtitle: string }[];
|
||||
}
|
||||
|
||||
const StepIndicator: React.FC<StepIndicatorProps> = ({
|
||||
currentStep,
|
||||
steps,
|
||||
}) => {
|
||||
return (
|
||||
<div style={{ marginBottom: 24, overflowX: "auto" }}>
|
||||
<Steps current={currentStep - 1}>
|
||||
{steps.map((step, idx) => (
|
||||
<Steps.Step
|
||||
key={step.id}
|
||||
title={step.subtitle}
|
||||
icon={
|
||||
<div
|
||||
style={{
|
||||
width: 24,
|
||||
height: 24,
|
||||
borderRadius: 12,
|
||||
backgroundColor: idx < currentStep ? "#1677ff" : "#cccccc",
|
||||
color: "#fff",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
{step.id}
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</Steps>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default StepIndicator;
|
||||
32
nkebao/src/pages/workspace/group-push/form/index.data.ts
Normal file
32
nkebao/src/pages/workspace/group-push/form/index.data.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
export interface WechatGroup {
|
||||
id: string;
|
||||
name: string;
|
||||
avatar: string;
|
||||
serviceAccount: {
|
||||
id: string;
|
||||
name: string;
|
||||
avatar: string;
|
||||
};
|
||||
}
|
||||
|
||||
export interface ContentLibrary {
|
||||
id: string;
|
||||
name: string;
|
||||
targets: Array<{
|
||||
id: string;
|
||||
avatar: string;
|
||||
}>;
|
||||
}
|
||||
|
||||
export interface FormData {
|
||||
name: string;
|
||||
pushTimeStart: string;
|
||||
pushTimeEnd: string;
|
||||
dailyPushCount: number;
|
||||
pushOrder: "earliest" | "latest";
|
||||
isLoopPush: boolean;
|
||||
isImmediatePush: boolean;
|
||||
isEnabled: boolean;
|
||||
groups: WechatGroup[];
|
||||
contentLibraries: ContentLibrary[];
|
||||
}
|
||||
191
nkebao/src/pages/workspace/group-push/form/index.tsx
Normal file
191
nkebao/src/pages/workspace/group-push/form/index.tsx
Normal file
@@ -0,0 +1,191 @@
|
||||
import React, { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Button } from "antd-mobile";
|
||||
import { NavBar } from "antd-mobile";
|
||||
import { LeftOutline } from "antd-mobile-icons";
|
||||
import { createGroupPushTask } from "@/api/groupPush";
|
||||
import Layout from "@/components/Layout/Layout";
|
||||
import MeauMobile from "@/components/MeauMobile/MeauMoible";
|
||||
import StepIndicator from "./components/StepIndicator";
|
||||
import BasicSettings from "./components/BasicSettings";
|
||||
import GroupSelector from "./components/GroupSelector";
|
||||
import ContentSelector from "./components/ContentSelector";
|
||||
import type { WechatGroup, ContentLibrary, FormData } from "./index.data";
|
||||
|
||||
const steps = [
|
||||
{ id: 1, title: "步骤 1", subtitle: "基础设置" },
|
||||
{ id: 2, title: "步骤 2", subtitle: "选择社群" },
|
||||
{ id: 3, title: "步骤 3", subtitle: "选择内容库" },
|
||||
{ id: 4, title: "步骤 4", subtitle: "京东联盟" },
|
||||
];
|
||||
|
||||
const NewGroupPush: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const [currentStep, setCurrentStep] = useState(1);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [formData, setFormData] = useState<FormData>({
|
||||
name: "",
|
||||
pushTimeStart: "06:00",
|
||||
pushTimeEnd: "23:59",
|
||||
dailyPushCount: 20,
|
||||
pushOrder: "latest",
|
||||
isLoopPush: false,
|
||||
isImmediatePush: false,
|
||||
isEnabled: false,
|
||||
groups: [],
|
||||
contentLibraries: [],
|
||||
});
|
||||
|
||||
const handleBasicSettingsNext = (values: Partial<FormData>) => {
|
||||
setFormData((prev) => ({ ...prev, ...values }));
|
||||
setCurrentStep(2);
|
||||
};
|
||||
|
||||
const handleGroupsChange = (groups: WechatGroup[]) => {
|
||||
setFormData((prev) => ({ ...prev, groups }));
|
||||
};
|
||||
|
||||
const handleLibrariesChange = (contentLibraries: ContentLibrary[]) => {
|
||||
setFormData((prev) => ({ ...prev, contentLibraries }));
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!formData.name.trim()) {
|
||||
window.alert("请输入任务名称");
|
||||
return;
|
||||
}
|
||||
if (formData.groups.length === 0) {
|
||||
window.alert("请选择至少一个社群");
|
||||
return;
|
||||
}
|
||||
if (formData.contentLibraries.length === 0) {
|
||||
window.alert("请选择至少一个内容库");
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
try {
|
||||
const apiData = {
|
||||
name: formData.name,
|
||||
timeRange: {
|
||||
start: formData.pushTimeStart,
|
||||
end: formData.pushTimeEnd,
|
||||
},
|
||||
maxPushPerDay: formData.dailyPushCount,
|
||||
pushOrder: formData.pushOrder,
|
||||
isLoopPush: formData.isLoopPush,
|
||||
isImmediatePush: formData.isImmediatePush,
|
||||
isEnabled: formData.isEnabled,
|
||||
targetGroups: formData.groups.map((g) => g.name),
|
||||
contentLibraries: formData.contentLibraries.map((c) => c.name),
|
||||
pushMode: formData.isImmediatePush
|
||||
? ("immediate" as const)
|
||||
: ("scheduled" as const),
|
||||
messageType: "text" as const,
|
||||
messageContent: "",
|
||||
targetTags: [],
|
||||
pushInterval: 60,
|
||||
};
|
||||
const response = await createGroupPushTask(apiData);
|
||||
if (response.code === 200) {
|
||||
window.alert("保存成功");
|
||||
navigate("/workspace/group-push");
|
||||
} else {
|
||||
window.alert("保存失败，请稍后重试");
|
||||
}
|
||||
} catch (error) {
|
||||
window.alert("保存失败，请稍后重试");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
navigate("/workspace/group-push");
|
||||
};
|
||||
|
||||
return (
|
||||
<Layout
|
||||
header={
|
||||
<NavBar
|
||||
onBack={() => navigate(-1)}
|
||||
style={{ background: "#fff" }}
|
||||
right={null}
|
||||
>
|
||||
<span style={{ fontWeight: 600, fontSize: 18 }}>群消息推送</span>
|
||||
</NavBar>
|
||||
}
|
||||
footer={<MeauMobile />}
|
||||
>
|
||||
<div style={{ maxWidth: 600, margin: "0 auto", padding: 16 }}>
|
||||
<StepIndicator currentStep={currentStep} steps={steps} />
|
||||
<div style={{ marginTop: 32 }}>
|
||||
{currentStep === 1 && (
|
||||
<BasicSettings
|
||||
defaultValues={{
|
||||
name: formData.name,
|
||||
pushTimeStart: formData.pushTimeStart,
|
||||
pushTimeEnd: formData.pushTimeEnd,
|
||||
dailyPushCount: formData.dailyPushCount,
|
||||
pushOrder: formData.pushOrder,
|
||||
isLoopPush: formData.isLoopPush,
|
||||
isImmediatePush: formData.isImmediatePush,
|
||||
isEnabled: formData.isEnabled,
|
||||
}}
|
||||
onNext={handleBasicSettingsNext}
|
||||
onSave={handleSave}
|
||||
onCancel={handleCancel}
|
||||
loading={loading}
|
||||
/>
|
||||
)}
|
||||
{currentStep === 2 && (
|
||||
<GroupSelector
|
||||
selectedGroups={formData.groups}
|
||||
onGroupsChange={handleGroupsChange}
|
||||
onPrevious={() => setCurrentStep(1)}
|
||||
onNext={() => setCurrentStep(3)}
|
||||
onSave={handleSave}
|
||||
onCancel={handleCancel}
|
||||
loading={loading}
|
||||
/>
|
||||
)}
|
||||
{currentStep === 3 && (
|
||||
<ContentSelector
|
||||
selectedLibraries={formData.contentLibraries}
|
||||
onLibrariesChange={handleLibrariesChange}
|
||||
onPrevious={() => setCurrentStep(2)}
|
||||
onNext={() => setCurrentStep(4)}
|
||||
onSave={handleSave}
|
||||
onCancel={handleCancel}
|
||||
loading={loading}
|
||||
/>
|
||||
)}
|
||||
{currentStep === 4 && (
|
||||
<div style={{ padding: 32, textAlign: "center", color: "#888" }}>
|
||||
京东联盟设置（此步骤为占位，实际功能待开发）
|
||||
<div
|
||||
style={{
|
||||
marginTop: 24,
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
gap: 8,
|
||||
}}
|
||||
>
|
||||
<Button onClick={() => setCurrentStep(3)} disabled={loading}>
|
||||
上一步
|
||||
</Button>
|
||||
<Button color="primary" onClick={handleSave} loading={loading}>
|
||||
完成
|
||||
</Button>
|
||||
<Button onClick={handleCancel} disabled={loading}>
|
||||
取消
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default NewGroupPush;
|
||||
111
nkebao/src/pages/workspace/group-push/list/index.module.scss
Normal file
111
nkebao/src/pages/workspace/group-push/list/index.module.scss
Normal file
@@ -0,0 +1,111 @@
|
||||
|
||||
.nav-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
.searchBar {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
height: 38px;
|
||||
width: 40px;
|
||||
padding: 0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.taskList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.emptyCard {
|
||||
text-align: center;
|
||||
padding: 48px 0;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
||||
}
|
||||
|
||||
.taskCard {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
||||
padding: 20px 16px 12px 16px;
|
||||
}
|
||||
|
||||
.taskHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.taskTitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.taskActions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.taskInfoGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 8px 16px;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.progressBlock {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.progressLabel {
|
||||
font-size: 13px;
|
||||
color: #888;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.taskFooter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
border-top: 1px dashed #eee;
|
||||
padding-top: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.expandedPanel {
|
||||
margin-top: 16px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px dashed #eee;
|
||||
}
|
||||
|
||||
.expandedGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.taskCard {
|
||||
padding: 12px 6px 8px 6px;
|
||||
}
|
||||
.expandedGrid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
407
nkebao/src/pages/workspace/group-push/list/index.tsx
Normal file
407
nkebao/src/pages/workspace/group-push/list/index.tsx
Normal file
@@ -0,0 +1,407 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { NavBar } from "antd-mobile";
|
||||
import { LeftOutline } from "antd-mobile-icons";
|
||||
import {
|
||||
PlusOutlined,
|
||||
SearchOutlined,
|
||||
ReloadOutlined,
|
||||
MoreOutlined,
|
||||
ClockCircleOutlined,
|
||||
EditOutlined,
|
||||
DeleteOutlined,
|
||||
EyeOutlined,
|
||||
CopyOutlined,
|
||||
DownOutlined,
|
||||
UpOutlined,
|
||||
SettingOutlined,
|
||||
CalendarOutlined,
|
||||
TeamOutlined,
|
||||
MessageOutlined,
|
||||
SendOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import {
|
||||
Card,
|
||||
Button,
|
||||
Input,
|
||||
Badge,
|
||||
Switch,
|
||||
Progress,
|
||||
Dropdown,
|
||||
Menu,
|
||||
} from "antd";
|
||||
import Layout from "@/components/Layout/Layout";
|
||||
import MeauMobile from "@/components/MeauMobile/MeauMoible";
|
||||
import {
|
||||
fetchGroupPushTasks,
|
||||
deleteGroupPushTask,
|
||||
toggleGroupPushTask,
|
||||
copyGroupPushTask,
|
||||
GroupPushTask,
|
||||
} from "@/api/groupPush";
|
||||
import styles from "./index.module.scss";
|
||||
|
||||
const { Search } = Input;
|
||||
|
||||
const GroupPush: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const [expandedTaskId, setExpandedTaskId] = useState<string | null>(null);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [tasks, setTasks] = useState<GroupPushTask[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const fetchTasks = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const list = await fetchGroupPushTasks();
|
||||
setTasks(list);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchTasks();
|
||||
}, []);
|
||||
|
||||
const toggleExpand = (taskId: string) => {
|
||||
setExpandedTaskId(expandedTaskId === taskId ? null : taskId);
|
||||
};
|
||||
|
||||
const handleDelete = async (taskId: string) => {
|
||||
if (!window.confirm("确定要删除该任务吗？")) return;
|
||||
await deleteGroupPushTask(taskId);
|
||||
fetchTasks();
|
||||
};
|
||||
|
||||
const handleEdit = (taskId: string) => {
|
||||
navigate(`/workspace/group-push/${taskId}/edit`);
|
||||
};
|
||||
|
||||
const handleView = (taskId: string) => {
|
||||
navigate(`/workspace/group-push/${taskId}`);
|
||||
};
|
||||
|
||||
const handleCopy = async (taskId: string) => {
|
||||
await copyGroupPushTask(taskId);
|
||||
fetchTasks();
|
||||
};
|
||||
|
||||
const toggleTaskStatus = async (taskId: string) => {
|
||||
const task = tasks.find((t) => t.id === taskId);
|
||||
if (!task) return;
|
||||
const newStatus = task.status === 1 ? 2 : 1;
|
||||
await toggleGroupPushTask(taskId, String(newStatus));
|
||||
fetchTasks();
|
||||
};
|
||||
|
||||
const handleCreateNew = () => {
|
||||
navigate("/workspace/group-push/new");
|
||||
};
|
||||
|
||||
const filteredTasks = tasks.filter((task) =>
|
||||
task.name.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
);
|
||||
|
||||
const getStatusColor = (status: number) => {
|
||||
switch (status) {
|
||||
case 1:
|
||||
return "green";
|
||||
case 2:
|
||||
return "gray";
|
||||
default:
|
||||
return "gray";
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusText = (status: number) => {
|
||||
switch (status) {
|
||||
case 1:
|
||||
return "进行中";
|
||||
case 2:
|
||||
return "已暂停";
|
||||
default:
|
||||
return "未知";
|
||||
}
|
||||
};
|
||||
|
||||
const getMessageTypeText = (type: string) => {
|
||||
switch (type) {
|
||||
case "text":
|
||||
return "文字";
|
||||
case "image":
|
||||
return "图片";
|
||||
case "video":
|
||||
return "视频";
|
||||
case "link":
|
||||
return "链接";
|
||||
default:
|
||||
return "未知";
|
||||
}
|
||||
};
|
||||
|
||||
const getSuccessRate = (pushCount: number, successCount: number) => {
|
||||
if (pushCount === 0) return 0;
|
||||
return Math.round((successCount / pushCount) * 100);
|
||||
};
|
||||
|
||||
return (
|
||||
<Layout
|
||||
header={
|
||||
<NavBar
|
||||
back={null}
|
||||
left={
|
||||
<div className={styles["nav-title"]}>
|
||||
<span style={{ verticalAlign: "middle" }}>
|
||||
<LeftOutline onClick={() => navigate(-1)} fontSize={24} />
|
||||
</span>
|
||||
群消息推送
|
||||
</div>
|
||||
}
|
||||
style={{ background: "#fff" }}
|
||||
right={
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={handleCreateNew}
|
||||
>
|
||||
创建任务
|
||||
</Button>
|
||||
}
|
||||
></NavBar>
|
||||
}
|
||||
footer={<MeauMobile />}
|
||||
>
|
||||
<div className={styles.bg}>
|
||||
<div className={styles.searchBar}>
|
||||
<Input
|
||||
placeholder="搜索计划名称"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
prefix={<SearchOutlined />}
|
||||
allowClear
|
||||
size="large"
|
||||
/>
|
||||
|
||||
<Button
|
||||
className={styles["refresh-btn"]}
|
||||
size="small"
|
||||
onClick={fetchTasks}
|
||||
loading={loading}
|
||||
>
|
||||
<ReloadOutlined />
|
||||
</Button>
|
||||
</div>
|
||||
<div className={styles.taskList}>
|
||||
{filteredTasks.length === 0 ? (
|
||||
<Card className={styles.emptyCard}>
|
||||
<SendOutlined
|
||||
style={{ fontSize: 48, color: "#ccc", marginBottom: 12 }}
|
||||
/>
|
||||
<div style={{ color: "#888", fontSize: 16, marginBottom: 8 }}>
|
||||
暂无推送任务
|
||||
</div>
|
||||
<div style={{ color: "#bbb", fontSize: 13, marginBottom: 16 }}>
|
||||
创建您的第一个群消息推送任务
|
||||
</div>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={handleCreateNew}
|
||||
>
|
||||
创建第一个任务
|
||||
</Button>
|
||||
</Card>
|
||||
) : (
|
||||
filteredTasks.map((task) => (
|
||||
<Card key={task.id} className={styles.taskCard}>
|
||||
<div className={styles.taskHeader}>
|
||||
<div className={styles.taskTitle}>
|
||||
<span>{task.name}</span>
|
||||
<Badge
|
||||
color={getStatusColor(task.status)}
|
||||
text={getStatusText(task.status)}
|
||||
style={{ marginLeft: 8 }}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.taskActions}>
|
||||
<Switch
|
||||
checked={task.status === 1}
|
||||
onChange={() => toggleTaskStatus(task.id)}
|
||||
/>
|
||||
<Dropdown
|
||||
overlay={
|
||||
<Menu>
|
||||
<Menu.Item
|
||||
key="view"
|
||||
icon={<EyeOutlined />}
|
||||
onClick={() => handleView(task.id)}
|
||||
>
|
||||
查看
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
key="edit"
|
||||
icon={<EditOutlined />}
|
||||
onClick={() => handleEdit(task.id)}
|
||||
>
|
||||
编辑
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
key="copy"
|
||||
icon={<CopyOutlined />}
|
||||
onClick={() => handleCopy(task.id)}
|
||||
>
|
||||
复制
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
key="delete"
|
||||
icon={<DeleteOutlined />}
|
||||
onClick={() => handleDelete(task.id)}
|
||||
danger
|
||||
>
|
||||
删除
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
}
|
||||
trigger={["click"]}
|
||||
>
|
||||
<Button icon={<MoreOutlined />} />
|
||||
</Dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.taskInfoGrid}>
|
||||
<div>执行设备：{task.deviceCount} 个</div>
|
||||
<div>目标群组：{task.targetGroups.length} 个</div>
|
||||
<div>
|
||||
推送成功：{task.successCount}/{task.pushCount}
|
||||
</div>
|
||||
<div>创建人：{task.creator}</div>
|
||||
</div>
|
||||
<div className={styles.progressBlock}>
|
||||
<div className={styles.progressLabel}>推送成功率</div>
|
||||
<Progress
|
||||
percent={getSuccessRate(task.pushCount, task.successCount)}
|
||||
size="small"
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.taskFooter}>
|
||||
<div>
|
||||
<ClockCircleOutlined /> 上次推送：{task.lastPushTime}
|
||||
</div>
|
||||
<div>
|
||||
创建时间：{task.createTime}
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
icon={
|
||||
expandedTaskId === task.id ? (
|
||||
<UpOutlined />
|
||||
) : (
|
||||
<DownOutlined />
|
||||
)
|
||||
}
|
||||
onClick={() => toggleExpand(task.id)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{expandedTaskId === task.id && (
|
||||
<div className={styles.expandedPanel}>
|
||||
<div className={styles.expandedGrid}>
|
||||
<div>
|
||||
<SettingOutlined /> <b>基本设置</b>
|
||||
<div>推送间隔：{task.pushInterval} 秒</div>
|
||||
<div>每日最大推送数：{task.maxPushPerDay} 条</div>
|
||||
<div>
|
||||
执行时间段：{task.timeRange.start} -{" "}
|
||||
{task.timeRange.end}
|
||||
</div>
|
||||
<div>
|
||||
推送模式：
|
||||
{task.pushMode === "immediate"
|
||||
? "立即推送"
|
||||
: "定时推送"}
|
||||
</div>
|
||||
{task.scheduledTime && (
|
||||
<div>定时时间：{task.scheduledTime}</div>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<TeamOutlined /> <b>目标群组</b>
|
||||
<div
|
||||
style={{ display: "flex", flexWrap: "wrap", gap: 4 }}
|
||||
>
|
||||
{task.targetGroups.map((group) => (
|
||||
<Badge
|
||||
key={group}
|
||||
color="blue"
|
||||
text={group}
|
||||
style={{ background: "#f0f5ff", marginRight: 4 }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<MessageOutlined /> <b>消息内容</b>
|
||||
<div>
|
||||
消息类型：{getMessageTypeText(task.messageType)}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
background: "#f5f5f5",
|
||||
padding: 8,
|
||||
borderRadius: 4,
|
||||
marginTop: 4,
|
||||
}}
|
||||
>
|
||||
{task.messageContent}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<CalendarOutlined /> <b>执行进度</b>
|
||||
<div>
|
||||
今日已推送：{task.pushCount} / {task.maxPushPerDay}
|
||||
</div>
|
||||
<Progress
|
||||
percent={Math.round(
|
||||
(task.pushCount / task.maxPushPerDay) * 100
|
||||
)}
|
||||
size="small"
|
||||
/>
|
||||
{task.targetTags.length > 0 && (
|
||||
<div style={{ marginTop: 8 }}>
|
||||
<div>目标标签：</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
gap: 4,
|
||||
}}
|
||||
>
|
||||
{task.targetTags.map((tag) => (
|
||||
<Badge
|
||||
key={tag}
|
||||
color="purple"
|
||||
text={tag}
|
||||
style={{
|
||||
background: "#f9f0ff",
|
||||
marginRight: 4,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default GroupPush;
|
||||
@@ -1,8 +0,0 @@
|
||||
import React from "react";
|
||||
import PlaceholderPage from "@/components/PlaceholderPage";
|
||||
|
||||
const NewGroupPush: React.FC = () => {
|
||||
return <PlaceholderPage title="新建群发推送" />;
|
||||
};
|
||||
|
||||
export default NewGroupPush;
|
||||
@@ -1,11 +1,13 @@
|
||||
import Workspace from "@/pages/workspace/main";
|
||||
import AutoLike from "@/pages/workspace/auto-like/AutoLike";
|
||||
import NewAutoLike from "@/pages/workspace/auto-like/NewAutoLike";
|
||||
import AutoLikeDetail from "@/pages/workspace/auto-like/AutoLikeDetail";
|
||||
import AutoGroup from "@/pages/workspace/auto-group/AutoGroup";
|
||||
import AutoGroupDetail from "@/pages/workspace/auto-group/Detail";
|
||||
import GroupPush from "@/pages/workspace/group-push/GroupPush";
|
||||
import NewGroupPush from "@/pages/workspace/group-push/new";
|
||||
import ListAutoLike from "@/pages/workspace/auto-like/list";
|
||||
import NewAutoLike from "@/pages/workspace/auto-like/new";
|
||||
import RecordAutoLike from "@/pages/workspace/auto-like/record";
|
||||
import AutoGroupList from "@/pages/workspace/auto-group/list";
|
||||
import AutoGroupDetail from "@/pages/workspace/auto-group/detail";
|
||||
import AutoGroupForm from "@/pages/workspace/auto-group/form";
|
||||
import GroupPush from "@/pages/workspace/group-push/list";
|
||||
import FormGroupPush from "@/pages/workspace/group-push/form";
|
||||
import DetailGroupPush from "@/pages/workspace/group-push/detail";
|
||||
import MomentsSync from "@/pages/workspace/moments-sync/MomentsSync";
|
||||
import MomentsSyncDetail from "@/pages/workspace/moments-sync/Detail";
|
||||
import NewMomentsSync from "@/pages/workspace/moments-sync/new";
|
||||
@@ -24,7 +26,7 @@ const workspaceRoutes = [
|
||||
// 自动点赞
|
||||
{
|
||||
path: "/workspace/auto-like",
|
||||
element: <AutoLike />,
|
||||
element: <ListAutoLike />,
|
||||
auth: true,
|
||||
},
|
||||
{
|
||||
@@ -34,7 +36,7 @@ const workspaceRoutes = [
|
||||
},
|
||||
{
|
||||
path: "/workspace/auto-like/:id",
|
||||
element: <AutoLikeDetail />,
|
||||
element: <RecordAutoLike />,
|
||||
auth: true,
|
||||
},
|
||||
{
|
||||
@@ -42,10 +44,15 @@ const workspaceRoutes = [
|
||||
element: <NewAutoLike />,
|
||||
auth: true,
|
||||
},
|
||||
// 自动分组
|
||||
// 自动建群
|
||||
{
|
||||
path: "/workspace/auto-group",
|
||||
element: <AutoGroup />,
|
||||
element: <AutoGroupList />,
|
||||
auth: true,
|
||||
},
|
||||
{
|
||||
path: "/workspace/auto-group/new",
|
||||
element: <AutoGroupForm />,
|
||||
auth: true,
|
||||
},
|
||||
{
|
||||
@@ -53,6 +60,11 @@ const workspaceRoutes = [
|
||||
element: <AutoGroupDetail />,
|
||||
auth: true,
|
||||
},
|
||||
{
|
||||
path: "/workspace/auto-group/:id/edit",
|
||||
element: <AutoGroupForm />,
|
||||
auth: true,
|
||||
},
|
||||
// 群发推送
|
||||
{
|
||||
path: "/workspace/group-push",
|
||||
@@ -60,18 +72,18 @@ const workspaceRoutes = [
|
||||
auth: true,
|
||||
},
|
||||
{
|
||||
path: "/workspace/group-push/new",
|
||||
element: <NewGroupPush />,
|
||||
path: "/workspace/group-push/:id",
|
||||
element: <DetailGroupPush />,
|
||||
auth: true,
|
||||
},
|
||||
{
|
||||
path: "/workspace/group-push/:id",
|
||||
element: <PlaceholderPage title="群发推送详情" />,
|
||||
path: "/workspace/group-push/new",
|
||||
element: <FormGroupPush />,
|
||||
auth: true,
|
||||
},
|
||||
{
|
||||
path: "/workspace/group-push/:id/edit",
|
||||
element: <PlaceholderPage title="编辑群发推送" />,
|
||||
element: <FormGroupPush />,
|
||||
auth: true,
|
||||
},
|
||||
// 朋友圈同步
|
||||
|
||||
@@ -123,12 +123,46 @@ input, textarea {
|
||||
body, input, textarea, select, button {
|
||||
touch-action: manipulation;
|
||||
}
|
||||
//导航左右结构的样式
|
||||
// 导航栏样式
|
||||
.nav-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.nav-text {
|
||||
color: var(--primary-color);
|
||||
|
||||
}
|
||||
|
||||
.nav-back-btn{
|
||||
color: #333;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.nav-left {
|
||||
color: var(--primary-color);
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
margin-left: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.new-plan-btn {
|
||||
border-radius: 20px;
|
||||
padding: 4px 12px;
|
||||
height: 32px;
|
||||
font-size: 12px;
|
||||
background: var(--primary-gradient);
|
||||
border: none;
|
||||
box-shadow: 0 2px 8px var(--primary-shadow);
|
||||
|
||||
&:active {
|
||||
transform: translateY(1px);
|
||||
box-shadow: 0 1px 4px var(--primary-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
119
nkebao/src/types/auto-like.ts
Normal file
119
nkebao/src/types/auto-like.ts
Normal file
@@ -0,0 +1,119 @@
|
||||
// 自动点赞任务状态
|
||||
export type LikeTaskStatus = 1 | 2; // 1: 开启, 2: 关闭
|
||||
|
||||
// 内容类型
|
||||
export type ContentType = "text" | "image" | "video" | "link";
|
||||
|
||||
// 设备信息
|
||||
export interface Device {
|
||||
id: string;
|
||||
name: string;
|
||||
status: "online" | "offline";
|
||||
lastActive: string;
|
||||
}
|
||||
|
||||
// 好友信息
|
||||
export interface Friend {
|
||||
id: string;
|
||||
nickname: string;
|
||||
wechatId: string;
|
||||
avatar: string;
|
||||
tags: string[];
|
||||
region: string;
|
||||
source: string;
|
||||
}
|
||||
|
||||
// 点赞记录
|
||||
export interface LikeRecord {
|
||||
id: string;
|
||||
workbenchId: string;
|
||||
momentsId: string;
|
||||
snsId: string;
|
||||
wechatAccountId: string;
|
||||
wechatFriendId: string;
|
||||
likeTime: string;
|
||||
content: string;
|
||||
resUrls: string[];
|
||||
momentTime: string;
|
||||
userName: string;
|
||||
operatorName: string;
|
||||
operatorAvatar: string;
|
||||
friendName: string;
|
||||
friendAvatar: string;
|
||||
}
|
||||
|
||||
// 自动点赞任务
|
||||
export interface LikeTask {
|
||||
id: string;
|
||||
name: string;
|
||||
status: LikeTaskStatus;
|
||||
deviceCount: number;
|
||||
targetGroup: string;
|
||||
likeCount: number;
|
||||
lastLikeTime: string;
|
||||
createTime: string;
|
||||
creator: string;
|
||||
likeInterval: number;
|
||||
maxLikesPerDay: number;
|
||||
timeRange: { start: string; end: string };
|
||||
contentTypes: ContentType[];
|
||||
targetTags: string[];
|
||||
devices: string[];
|
||||
friends: string[];
|
||||
friendMaxLikes: number;
|
||||
friendTags: string;
|
||||
enableFriendTags: boolean;
|
||||
todayLikeCount: number;
|
||||
totalLikeCount: number;
|
||||
updateTime: string;
|
||||
}
|
||||
|
||||
// 创建任务数据
|
||||
export interface CreateLikeTaskData {
|
||||
name: string;
|
||||
interval: number;
|
||||
maxLikes: number;
|
||||
startTime: string;
|
||||
endTime: string;
|
||||
contentTypes: ContentType[];
|
||||
devices: string[];
|
||||
friends?: string[];
|
||||
friendMaxLikes: number;
|
||||
friendTags?: string;
|
||||
enableFriendTags: boolean;
|
||||
targetTags: string[];
|
||||
}
|
||||
|
||||
// 更新任务数据
|
||||
export interface UpdateLikeTaskData extends CreateLikeTaskData {
|
||||
id: string;
|
||||
}
|
||||
|
||||
// 任务配置
|
||||
export interface TaskConfig {
|
||||
interval: number;
|
||||
maxLikes: number;
|
||||
startTime: string;
|
||||
endTime: string;
|
||||
contentTypes: ContentType[];
|
||||
devices: string[];
|
||||
friends: string[];
|
||||
friendMaxLikes: number;
|
||||
friendTags: string;
|
||||
enableFriendTags: boolean;
|
||||
}
|
||||
|
||||
// API响应类型
|
||||
export interface ApiResponse<T = any> {
|
||||
code: number;
|
||||
msg: string;
|
||||
data: T;
|
||||
}
|
||||
|
||||
// 分页响应类型
|
||||
export interface PaginatedResponse<T> {
|
||||
list: T[];
|
||||
total: number;
|
||||
page: number;
|
||||
limit: number;
|
||||
}
|
||||
Reference in New Issue
Block a user