Merge branch 'yongpxu-dev2' of https://e.coding.net/g-xtcy5189/cunkebao/cunkebao_v3 into yongpxu-dev2

2025-07-22 10:35:52 +08:00
parent 6d2af0a8d9 1b46530091
commit 61b5c2abba
54 changed files with 6002 additions and 210 deletions
--- a/Cunkebao/src/pages/scenarios/new/page.tsx
+++ b/Cunkebao/src/pages/scenarios/new/page.tsx
@@ -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}
--- a/Cunkebao/src/pages/scenarios/new/steps/BasicSettings.tsx
+++ b/Cunkebao/src/pages/scenarios/new/steps/BasicSettings.tsx
@@ -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>
--- a/Server/application/api/config/route.php
+++ b/Server/application/api/config/route.php
@@ -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');
-        });
        
    });
 });
--- a/Server/application/cunkebao/config/route.php
+++ b/Server/application/cunkebao/config/route.php
@@ -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 [];
--- a/Server/application/cunkebao/controller/TrafficController.php
+++ b/Server/application/cunkebao/controller/TrafficController.php
@@ -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],'获取成功']);
+    }
+
+
+}
--- a/Server/application/cunkebao/controller/plan/PostExternalApiV1Controller.php
+++ b/Server/application/cunkebao/controller/plan/PostExternalApiV1Controller.php
@@ -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'];
--- a/Server/application/cunkebao/controller/plan/PosterWeChatMiniProgram.php
+++ b/Server/application/cunkebao/controller/plan/PosterWeChatMiniProgram.php
@@ -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,
        ];


--- a/Server/extend/WeChatDeviceApi/Adapters/ChuKeBao/Adapter.php
+++ b/Server/extend/WeChatDeviceApi/Adapters/ChuKeBao/Adapter.php
@@ -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;
                    }
                }
--- a/nkebao/src/api/autoLike.ts
+++ b/nkebao/src/api/autoLike.ts
@@ -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,
+    };
+  }
+}
--- a/nkebao/src/api/groupPush.ts
+++ b/nkebao/src/api/groupPush.ts
@@ -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}`);
+}
--- a/nkebao/src/pages/scenarios/list/index.tsx
+++ b/nkebao/src/pages/scenarios/list/index.tsx
@@ -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"]}>
--- a/nkebao/src/pages/scenarios/plan/list/index.module.scss
+++ b/nkebao/src/pages/scenarios/plan/list/index.module.scss
@@ -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;
--- a/nkebao/src/pages/scenarios/plan/list/index.tsx
+++ b/nkebao/src/pages/scenarios/plan/list/index.tsx
@@ -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>
--- a/nkebao/src/pages/scenarios/plan/new/index.tsx
+++ b/nkebao/src/pages/scenarios/plan/new/index.tsx
@@ -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>
--- a/nkebao/src/pages/scenarios/plan/new/page.module.scss
+++ b/nkebao/src/pages/scenarios/plan/new/page.module.scss
@@ -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 {
--- a/nkebao/src/pages/workspace/auto-group/AutoGroup.tsx
+++ b/nkebao/src/pages/workspace/auto-group/AutoGroup.tsx
@@ -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;
--- a/nkebao/src/pages/workspace/auto-group/Detail.tsx
+++ b/nkebao/src/pages/workspace/auto-group/Detail.tsx
@@ -1,8 +0,0 @@
-import React from "react";
-import PlaceholderPage from "@/components/PlaceholderPage";
-
-const AutoGroupDetail: React.FC = () => {
-  return <PlaceholderPage title="自动分组详情" />;
-};
-
-export default AutoGroupDetail;
--- a/nkebao/src/pages/workspace/auto-group/detail/api.ts
+++ b/nkebao/src/pages/workspace/auto-group/detail/api.ts
@@ -0,0 +1,6 @@
+import request from "@/api/request";
+
+// 获取自动建群任务详情
+export function getAutoGroupDetail(id: string) {
+  return request(`/api/auto-group/detail/${id}`);
+}
--- a/nkebao/src/pages/workspace/auto-group/detail/index.module.scss
+++ b/nkebao/src/pages/workspace/auto-group/detail/index.module.scss
@@ -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;
+} 
--- a/nkebao/src/pages/workspace/auto-group/detail/index.tsx
+++ b/nkebao/src/pages/workspace/auto-group/detail/index.tsx
@@ -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;
--- a/nkebao/src/pages/workspace/auto-group/form/api.ts
+++ b/nkebao/src/pages/workspace/auto-group/form/api.ts
@@ -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");
+}
--- a/nkebao/src/pages/workspace/auto-group/form/index.module.scss
+++ b/nkebao/src/pages/workspace/auto-group/form/index.module.scss
@@ -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;
+} 
--- a/nkebao/src/pages/workspace/auto-group/form/index.tsx
+++ b/nkebao/src/pages/workspace/auto-group/form/index.tsx
@@ -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;
--- a/nkebao/src/pages/workspace/auto-group/list/api.ts
+++ b/nkebao/src/pages/workspace/auto-group/list/api.ts
@@ -0,0 +1,8 @@
+import request from "@/api/request";
+
+// 获取自动建群任务列表
+export function getAutoGroupList(params?: any) {
+  return request("/api/auto-group/list", params, "GET");
+}
+
+// 其他相关API可按需添加
--- a/nkebao/src/pages/workspace/auto-group/list/index.module.scss
+++ b/nkebao/src/pages/workspace/auto-group/list/index.module.scss
@@ -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;
+} 
--- a/nkebao/src/pages/workspace/auto-group/list/index.tsx
+++ b/nkebao/src/pages/workspace/auto-group/list/index.tsx
@@ -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;
--- a/nkebao/src/pages/workspace/auto-like/AutoLike.tsx
+++ b/nkebao/src/pages/workspace/auto-like/AutoLike.tsx
@@ -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;
--- a/nkebao/src/pages/workspace/auto-like/AutoLikeDetail.tsx
+++ b/nkebao/src/pages/workspace/auto-like/AutoLikeDetail.tsx
@@ -1,8 +0,0 @@
-import React from "react";
-import PlaceholderPage from "@/components/PlaceholderPage";
-
-const AutoLikeDetail: React.FC = () => {
-  return <PlaceholderPage title="自动点赞详情" />;
-};
-
-export default AutoLikeDetail;
--- a/nkebao/src/pages/workspace/auto-like/AutoLikeListPC.scss
+++ b/nkebao/src/pages/workspace/auto-like/AutoLikeListPC.scss
@@ -0,0 +1 @@
+ 
--- a/nkebao/src/pages/workspace/auto-like/AutoLikeListPC.tsx
+++ b/nkebao/src/pages/workspace/auto-like/AutoLikeListPC.tsx
@@ -0,0 +1 @@
+ 
--- a/nkebao/src/pages/workspace/auto-like/NewAutoLike.tsx
+++ b/nkebao/src/pages/workspace/auto-like/NewAutoLike.tsx
@@ -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;
--- a/nkebao/src/pages/workspace/auto-like/list/api.ts
+++ b/nkebao/src/pages/workspace/auto-like/list/api.ts
@@ -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");
+}
--- a/nkebao/src/pages/workspace/auto-like/list/index.module.scss
+++ b/nkebao/src/pages/workspace/auto-like/list/index.module.scss
@@ -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;
+  }
+} 
--- a/nkebao/src/pages/workspace/auto-like/list/index.tsx
+++ b/nkebao/src/pages/workspace/auto-like/list/index.tsx
@@ -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;
--- a/nkebao/src/pages/workspace/auto-like/new/api.ts
+++ b/nkebao/src/pages/workspace/auto-like/new/api.ts
@@ -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");
+}
--- a/nkebao/src/pages/workspace/auto-like/new/index.tsx
+++ b/nkebao/src/pages/workspace/auto-like/new/index.tsx
@@ -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;
--- a/nkebao/src/pages/workspace/auto-like/new/new.module.scss
+++ b/nkebao/src/pages/workspace/auto-like/new/new.module.scss
@@ -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;
+  }
+} 
--- a/nkebao/src/pages/workspace/auto-like/record/index.tsx
+++ b/nkebao/src/pages/workspace/auto-like/record/index.tsx
@@ -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;
--- a/nkebao/src/pages/workspace/auto-like/record/record.module.scss
+++ b/nkebao/src/pages/workspace/auto-like/record/record.module.scss
@@ -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);
+    }
+  }
+} 
--- a/nkebao/src/pages/workspace/group-push/GroupPush.tsx
+++ b/nkebao/src/pages/workspace/group-push/GroupPush.tsx
@@ -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;
--- a/nkebao/src/pages/workspace/group-push/detail/index.module.scss
+++ b/nkebao/src/pages/workspace/group-push/detail/index.module.scss
@@ -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;
+  }
+} 
--- a/nkebao/src/pages/workspace/group-push/detail/index.tsx
+++ b/nkebao/src/pages/workspace/group-push/detail/index.tsx
@@ -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;
--- a/nkebao/src/pages/workspace/group-push/form/components/BasicSettings.tsx
+++ b/nkebao/src/pages/workspace/group-push/form/components/BasicSettings.tsx
@@ -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;
--- a/nkebao/src/pages/workspace/group-push/form/components/ContentSelector.tsx
+++ b/nkebao/src/pages/workspace/group-push/form/components/ContentSelector.tsx
@@ -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;
--- a/nkebao/src/pages/workspace/group-push/form/components/GroupSelector.tsx
+++ b/nkebao/src/pages/workspace/group-push/form/components/GroupSelector.tsx
@@ -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;
--- a/nkebao/src/pages/workspace/group-push/form/components/StepIndicator.tsx
+++ b/nkebao/src/pages/workspace/group-push/form/components/StepIndicator.tsx
@@ -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;
--- a/nkebao/src/pages/workspace/group-push/form/index.data.ts
+++ b/nkebao/src/pages/workspace/group-push/form/index.data.ts
@@ -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[];
+}
--- a/nkebao/src/pages/workspace/group-push/form/index.tsx
+++ b/nkebao/src/pages/workspace/group-push/form/index.tsx
@@ -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;
--- a/nkebao/src/pages/workspace/group-push/list/index.module.scss
+++ b/nkebao/src/pages/workspace/group-push/list/index.module.scss
@@ -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;
+  }
+} 
--- a/nkebao/src/pages/workspace/group-push/list/index.tsx
+++ b/nkebao/src/pages/workspace/group-push/list/index.tsx
@@ -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;
--- a/nkebao/src/pages/workspace/group-push/new.tsx
+++ b/nkebao/src/pages/workspace/group-push/new.tsx
@@ -1,8 +0,0 @@
-import React from "react";
-import PlaceholderPage from "@/components/PlaceholderPage";
-
-const NewGroupPush: React.FC = () => {
-  return <PlaceholderPage title="新建群发推送" />;
-};
-
-export default NewGroupPush;
--- a/nkebao/src/router/module/workspace.tsx
+++ b/nkebao/src/router/module/workspace.tsx
@@ -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/index";
@@ -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,
  },
  // 朋友圈同步
--- a/nkebao/src/styles/global.scss
+++ b/nkebao/src/styles/global.scss
@@ -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);
+  }
+}
+
--- a/nkebao/src/types/auto-like.ts
+++ b/nkebao/src/types/auto-like.ts
@@ -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;
+}