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

# Conflicts: # nkebao/src/pages/workspace/auto-like/new/index.tsx resolved by origin/yongpxu-dev2(远端) version
2025-07-22 13:56:49 +08:00
parent 7e848b2081 7b30f98ab9
commit 3024e0b5e1
22 changed files with 2507 additions and 309 deletions
--- a/nkebao/src/pages/mine/Profile.tsx
+++ b/nkebao/src/pages/mine/Profile.tsx
@@ -0,0 +1,258 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ChevronRight, Settings, Bell, LogOut, Smartphone, MessageCircle, Database, FolderOpen } from 'lucide-react';
+import { Card, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { useAuth } from '@/contexts/AuthContext';
+import { useToast } from '@/components/ui/toast';
+import Layout from '@/components/Layout';
+import BottomNav from '@/components/BottomNav';
+import UnifiedHeader from '@/components/UnifiedHeader';
+import '@/components/Layout.css';
+
+export default function Profile() {
+  const navigate = useNavigate();
+  const { user, logout, isAuthenticated } = useAuth();
+  const { toast } = useToast();
+  const [showLogoutDialog, setShowLogoutDialog] = useState(false);
+  const [userInfo, setUserInfo] = useState<any>(null);
+  const [stats, setStats] = useState({
+    devices: 12,
+    wechat: 25,
+    traffic: 8,
+    content: 156,
+  });
+
+  // 从localStorage获取用户信息
+  useEffect(() => {
+    const userInfoStr = localStorage.getItem('userInfo');
+    if (userInfoStr) {
+      setUserInfo(JSON.parse(userInfoStr));
+    }
+  }, []);
+
+  // 用户信息
+  const currentUserInfo = {
+    name: userInfo?.username || user?.username || "卡若",
+    email: userInfo?.email || "zhangsan@example.com",
+    role: "管理员",
+    joinDate: "2023-01-15",
+    lastLogin: "2024-01-20 14:30",
+  };
+
+  // 功能模块数据
+  const functionModules = [
+    {
+      id: "devices",
+      title: "设备管理",
+      description: "管理您的设备和微信账号",
+      icon: <Smartphone className="h-5 w-5 text-blue-500" />,
+      count: stats.devices,
+      path: "/devices",
+      bgColor: "bg-blue-50",
+    },
+    {
+      id: "wechat",
+      title: "微信号管理",
+      description: "管理微信账号和好友",
+      icon: <MessageCircle className="h-5 w-5 text-green-500" />,
+      count: stats.wechat,
+      path: "/wechat-accounts",
+      bgColor: "bg-green-50",
+    },
+    {
+      id: "traffic",
+      title: "流量池",
+      description: "管理用户流量池和分组",
+      icon: <Database className="h-5 w-5 text-purple-500" />,
+      count: stats.traffic,
+      path: "/traffic-pool",
+      bgColor: "bg-purple-50",
+    },
+    {
+      id: "content",
+      title: "内容库",
+      description: "管理营销内容和素材",
+      icon: <FolderOpen className="h-5 w-5 text-orange-500" />,
+      count: stats.content,
+      path: "/content",
+      bgColor: "bg-orange-50",
+    },
+  ];
+
+  // 加载统计数据
+  const loadStats = async () => {
+    try {
+      // 这里可以调用实际的API
+      // const [deviceStats, wechatStats, trafficStats, contentStats] = await Promise.allSettled([
+      //   getDeviceStats(),
+      //   getWechatStats(),
+      //   getTrafficStats(),
+      //   getContentStats(),
+      // ]);
+
+      // 暂时使用模拟数据
+      setStats({
+        devices: 12,
+        wechat: 25,
+        traffic: 8,
+        content: 156,
+      });
+    } catch (error) {
+      console.error("加载统计数据失败:", error);
+    }
+  };
+
+  useEffect(() => {
+    loadStats();
+  }, []);
+
+  const handleLogout = () => {
+    // 清除本地存储的用户信息
+    localStorage.removeItem('token');
+    localStorage.removeItem('token_expired');
+    localStorage.removeItem('s2_accountId');
+    localStorage.removeItem('userInfo');
+    setShowLogoutDialog(false);
+    logout();
+    navigate('/login');
+    toast({
+      title: '退出成功',
+      description: '您已安全退出系统',
+    });
+  };
+
+  const handleFunctionClick = (path: string) => {
+    navigate(path);
+  };
+
+  if (!isAuthenticated) {
+    return (
+      <div className="flex h-screen items-center justify-center">
+        <div className="text-gray-500">请先登录</div>
+      </div>
+    );
+  }
+
+  return (
+    <Layout
+      header={
+        <UnifiedHeader
+          title="我的"
+          showBack={false}
+          titleColor="blue"
+          actions={[
+            {
+              type: 'icon',
+              icon: Bell,
+              onClick: () => console.log('Notifications'),
+            },
+            {
+              type: 'icon',
+              icon: Settings,
+              onClick: () => console.log('Settings'),
+            },
+          ]}
+        />
+      }
+      footer={<BottomNav />}
+    >
+      <div className="bg-gray-50 pb-16">
+        <div className="p-4 space-y-4">
+          {/* 用户信息卡片 */}
+          <Card>
+            <CardContent className="p-4">
+              <div className="flex items-center space-x-4">
+                <Avatar className="h-16 w-16">
+                  <AvatarImage src={userInfo?.avatar || user?.avatar || ''} />
+                  <AvatarFallback className="bg-gray-200 text-gray-600 text-lg font-medium">
+                    {currentUserInfo.name.charAt(0)}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="flex-1">
+                  <div className="flex items-center space-x-2 mb-1">
+                    <h2 className="text-lg font-medium">{currentUserInfo.name}</h2>
+                    <span className="px-2 py-1 text-xs bg-gradient-to-r from-orange-400 to-orange-500 text-white rounded-full font-medium shadow-sm">
+                      {currentUserInfo.role}
+                    </span>
+                  </div>
+                  <p className="text-sm text-gray-600 mb-2">{currentUserInfo.email}</p>
+                  <div className="text-xs text-gray-500">
+                    <div>最近登录: {currentUserInfo.lastLogin}</div>
+                  </div>
+                </div>
+                <div className="flex flex-col space-y-2">
+                  <Button variant="ghost" size="icon">
+                    <Bell className="h-5 w-5" />
+                  </Button>
+                  <Button variant="ghost" size="icon">
+                    <Settings className="h-5 w-5" />
+                  </Button>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* 我的功能 */}
+          <Card>
+            <CardContent className="p-4">
+              <div className="space-y-2">
+                {functionModules.map((module) => (
+                  <div
+                    key={module.id}
+                    className="flex items-center p-4 rounded-lg border hover:bg-gray-50 cursor-pointer transition-colors w-full"
+                    onClick={() => handleFunctionClick(module.path)}
+                  >
+                    <div className={`p-2 rounded-lg ${module.bgColor} mr-3`}>{module.icon}</div>
+                    <div className="flex-1">
+                      <div className="font-medium text-sm">{module.title}</div>
+                      <div className="text-xs text-gray-500">{module.description}</div>
+                    </div>
+                    <div className="flex items-center space-x-2">
+                      <span className="px-2 py-1 text-xs bg-gray-50 text-gray-700 rounded-full border border-gray-200 font-medium shadow-sm">
+                        {module.count}
+                      </span>
+                      <ChevronRight className="h-4 w-4 text-gray-400" />
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* 退出登录 */}
+          <Button
+            variant="outline"
+            className="w-full text-red-600 border-red-200 hover:bg-red-50 bg-transparent"
+            onClick={() => setShowLogoutDialog(true)}
+          >
+            <LogOut className="h-4 w-4 mr-2" />
+            退出登录
+          </Button>
+        </div>
+      </div>
+
+      {/* 退出登录确认对话框 */}
+      <Dialog open={showLogoutDialog} onOpenChange={setShowLogoutDialog}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>确认退出登录</DialogTitle>
+            <DialogDescription>
+              您确定要退出登录吗？退出后需要重新登录才能使用完整功能。
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex justify-end space-x-2 mt-4">
+            <Button variant="outline" onClick={() => setShowLogoutDialog(false)}>
+              取消
+            </Button>
+            <Button variant="destructive" onClick={handleLogout}>
+              确认退出
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </Layout>
+  );
+} 
--- a/nkebao/src/pages/mine/index.module.scss
+++ b/nkebao/src/pages/mine/index.module.scss
@@ -1,7 +1,5 @@
 .mine-page {
-  padding: 16px;
-  background-color: #f5f5f5;
-  min-height: 100vh;
+  padding: 12px;
 }

 .user-card {
@@ -59,22 +57,24 @@
 .menu-card {
  margin-bottom: 16px;
  border-radius: 12px;
-  overflow: hidden;
-  
-  :global(.adm-card-body) {
-    padding: 0;
+
+  :global(.adm-list-body) {
+    border: none;
+  }
+
+  :global(.adm-card-body) {
+    padding: 14px 0 0 0;
+  }
+  :global(.adm-list-body-inner) {
+    margin-top: 0px;
  }
-  
  :global(.adm-list-item) {
-    padding: 16px;
-    border-bottom: 1px solid #f0f0f0;
-    
-    &:last-child {
-      border-bottom: none;
-    }
-    
+    padding: 0px;
    :global(.adm-list-item-content) {
-      padding: 0;
+      border: 1px solid #f0f0f0;
+      margin-bottom: 12px;
+      padding: 0 12px;
+      border-radius: 12px;
    }
    
    :global(.adm-list-item-content-prefix) {
@@ -104,9 +104,6 @@
  }
 }

-.logout-section {
-  padding: 0 16px;
-}

 .logout-btn {
  border-radius: 8px;
--- a/nkebao/src/pages/mine/index.tsx
+++ b/nkebao/src/pages/mine/index.tsx
@@ -1,78 +1,179 @@
-import React from "react";
-import { Card, NavBar, List, Button } from "antd-mobile";
+import React, { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { Card, NavBar, List, Button, Dialog, Toast } from "antd-mobile";
 import {
-  UserOutline,
-  AppOutline,
-  BellOutline,
-  HeartOutline,
-  StarOutline,
-  MessageOutline,
-  SendOutline,
-  MailOutline,
-} from "antd-mobile-icons";
+  LogoutOutlined,
+  PhoneOutlined,
+  MessageOutlined,
+  DatabaseOutlined,
+  FolderOpenOutlined,
+  BellOutlined,
+  SettingOutlined,
+} from "@ant-design/icons";
 import MeauMobile from "@/components/MeauMobile/MeauMoible";
 import Layout from "@/components/Layout/Layout";
 import style from "./index.module.scss";

 const Mine: React.FC = () => {
-  const userInfo = {
-    name: "张三",
-    avatar: "https://via.placeholder.com/60",
-    level: "VIP会员",
-    points: 1280,
+  const navigate = useNavigate();
+  const [userInfo, setUserInfo] = useState<any>(null);
+  const [stats, setStats] = useState({
+    devices: 12,
+    wechat: 25,
+    traffic: 8,
+    content: 156,
+  });
+  const [showLogoutDialog, setShowLogoutDialog] = useState(false);
+
+  // 从localStorage获取用户信息
+  useEffect(() => {
+    const userInfoStr = localStorage.getItem("userInfo");
+    if (userInfoStr) {
+      setUserInfo(JSON.parse(userInfoStr));
+    }
+  }, []);
+
+  // 用户信息
+  const currentUserInfo = {
+    name: userInfo?.username || "售前",
+    email: userInfo?.email || "zhangsan@example.com",
+    role: "管理员",
+    lastLogin: "2024-01-20 14:30",
+    avatar: userInfo?.avatar || "",
  };

-  const menuItems = [
+  // 功能模块数据
+  const functionModules = [
    {
-      icon: <UserOutline />,
-      title: "个人资料",
-      subtitle: "修改个人信息",
-      path: "/profile",
+      id: "devices",
+      title: "设备管理",
+      description: "管理您的设备和微信账号",
+      icon: <PhoneOutlined />,
+      count: stats.devices,
+      path: "/devices",
+      bgColor: "#e6f7ff",
+      iconColor: "#1890ff",
    },
    {
-      icon: <AppOutline />,
-      title: "系统设置",
-      subtitle: "应用设置与偏好",
-      path: "/settings",
+      id: "wechat",
+      title: "微信号管理",
+      description: "管理微信账号和好友",
+      icon: <MessageOutlined />,
+      count: stats.wechat,
+      path: "/wechat-accounts",
+      bgColor: "#f6ffed",
+      iconColor: "#52c41a",
    },
    {
-      icon: <BellOutline />,
-      title: "消息通知",
-      subtitle: "通知设置",
-      path: "/notifications",
+      id: "traffic",
+      title: "流量池",
+      description: "管理用户流量池和分组",
+      icon: <DatabaseOutlined />,
+      count: stats.traffic,
+      path: "/traffic-pool",
+      bgColor: "#f9f0ff",
+      iconColor: "#722ed1",
    },
    {
-      icon: <HeartOutline />,
-      title: "我的收藏",
-      subtitle: "收藏的内容",
-      path: "/favorites",
-    },
-    {
-      icon: <StarOutline />,
-      title: "我的评价",
-      subtitle: "查看评价记录",
-      path: "/reviews",
-    },
-    {
-      icon: <MessageOutline />,
-      title: "意见反馈",
-      subtitle: "问题反馈与建议",
-      path: "/feedback",
-    },
-    {
-      icon: <SendOutline />,
-      title: "联系客服",
-      subtitle: "在线客服",
-      path: "/customer-service",
-    },
-    {
-      icon: <MailOutline />,
-      title: "关于我们",
-      subtitle: "版本信息",
-      path: "/about",
+      id: "content",
+      title: "内容库",
+      description: "管理营销内容和素材",
+      icon: <FolderOpenOutlined />,
+      count: stats.content,
+      path: "/content",
+      bgColor: "#fff7e6",
+      iconColor: "#fa8c16",
    },
  ];

+  // 加载统计数据
+  const loadStats = async () => {
+    try {
+      // 这里可以调用实际的API
+      // const [deviceStats, wechatStats, trafficStats, contentStats] = await Promise.allSettled([
+      //   getDeviceStats(),
+      //   getWechatStats(),
+      //   getTrafficStats(),
+      //   getContentStats(),
+      // ]);
+
+      // 暂时使用模拟数据
+      setStats({
+        devices: 12,
+        wechat: 25,
+        traffic: 8,
+        content: 156,
+      });
+    } catch (error) {
+      console.error("加载统计数据失败:", error);
+    }
+  };
+
+  useEffect(() => {
+    loadStats();
+  }, []);
+
+  const handleLogout = () => {
+    // 清除本地存储的用户信息
+    localStorage.removeItem("token");
+    localStorage.removeItem("token_expired");
+    localStorage.removeItem("s2_accountId");
+    localStorage.removeItem("userInfo");
+    setShowLogoutDialog(false);
+    navigate("/login");
+    Toast.show({
+      content: "退出成功",
+      position: "top",
+    });
+  };
+
+  const handleFunctionClick = (path: string) => {
+    navigate(path);
+  };
+
+  // 渲染用户头像
+  const renderUserAvatar = () => {
+    if (currentUserInfo.avatar) {
+      return <img src={currentUserInfo.avatar} alt="头像" />;
+    }
+    return (
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+          backgroundColor: "#1890ff",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "white",
+          fontSize: "24px",
+          fontWeight: "bold",
+        }}
+      >
+        售
+      </div>
+    );
+  };
+
+  // 渲染功能模块图标
+  const renderModuleIcon = (module: any) => (
+    <div
+      style={{
+        width: "40px",
+        height: "40px",
+        backgroundColor: module.bgColor,
+        borderRadius: "8px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        color: module.iconColor,
+        fontSize: "20px",
+      }}
+    >
+      {module.icon}
+    </div>
+  );
+
  return (
    <Layout
      header={
@@ -88,54 +189,112 @@ const Mine: React.FC = () => {
        {/* 用户信息卡片 */}
        <Card className={style["user-card"]}>
          <div className={style["user-info"]}>
-            <div className={style["user-avatar"]}>
-              <img src={userInfo.avatar} alt="头像" />
-            </div>
+            <div className={style["user-avatar"]}>{renderUserAvatar()}</div>
            <div className={style["user-details"]}>
-              <div className={style["user-name"]}>{userInfo.name}</div>
-              <div className={style["user-level"]}>{userInfo.level}</div>
-              <div className={style["user-points"]}>
-                积分: {userInfo.points}
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "8px",
+                  marginBottom: "4px",
+                }}
+              >
+                <div className={style["user-name"]}>{currentUserInfo.name}</div>
+                <span
+                  style={{
+                    padding: "2px 8px",
+                    backgroundColor: "#fa8c16",
+                    color: "white",
+                    borderRadius: "12px",
+                    fontSize: "12px",
+                    fontWeight: "500",
+                  }}
+                >
+                  {currentUserInfo.role}
+                </span>
              </div>
+              <div
+                style={{ fontSize: "14px", color: "#666", marginBottom: "4px" }}
+              >
+                {currentUserInfo.email}
+              </div>
+              <div style={{ fontSize: "12px", color: "#666" }}>
+                最近登录: {currentUserInfo.lastLogin}
+              </div>
+            </div>
+            <div
+              style={{ display: "flex", flexDirection: "column", gap: "8px" }}
+            >
+              <BellOutlined style={{ fontSize: "20px", color: "#666" }} />
+              <SettingOutlined style={{ fontSize: "20px", color: "#666" }} />
            </div>
          </div>
        </Card>

-        {/* 菜单列表 */}
+        {/* 我的功能 */}
        <Card className={style["menu-card"]}>
          <List>
-            {menuItems.map((item, index) => (
+            {functionModules.map((module) => (
              <List.Item
-                key={index}
-                prefix={item.icon}
-                title={item.title}
-                description={item.subtitle}
+                key={module.id}
+                prefix={renderModuleIcon(module)}
+                title={module.title}
+                description={module.description}
+                extra={
+                  <span
+                    style={{
+                      padding: "2px 8px",
+                      backgroundColor: "#f0f0f0",
+                      borderRadius: "12px",
+                      fontSize: "12px",
+                      color: "#666",
+                    }}
+                  >
+                    {module.count}
+                  </span>
+                }
                arrow
-                onClick={() => {
-                  // 这里可以添加导航逻辑
-                  console.log(`点击了: ${item.title}`);
-                }}
+                onClick={() => handleFunctionClick(module.path)}
              />
            ))}
          </List>
        </Card>

        {/* 退出登录按钮 */}
-        <div className={style["logout-section"]}>
-          <Button
-            block
-            color="danger"
-            fill="outline"
-            className={style["logout-btn"]}
-            onClick={() => {
-              // 这里可以添加退出登录逻辑
-              console.log("退出登录");
-            }}
-          >
-            退出登录
-          </Button>
-        </div>
+        <Button
+          block
+          color="danger"
+          fill="outline"
+          className={style["logout-btn"]}
+          onClick={() => setShowLogoutDialog(true)}
+        >
+          <LogoutOutlined style={{ marginRight: "8px" }} />
+          退出登录
+        </Button>
      </div>
+
+      {/* 退出登录确认对话框 */}
+      <Dialog
+        content="您确定要退出登录吗？退出后需要重新登录才能使用完整功能。"
+        visible={showLogoutDialog}
+        closeOnAction
+        actions={[
+          [
+            {
+              key: "cancel",
+              text: "取消",
+            },
+            {
+              key: "confirm",
+              text: "确认退出",
+              bold: true,
+              danger: true,
+              onClick: handleLogout,
+            },
+          ],
+        ]}
+        onClose={() => setShowLogoutDialog(false)}
+      />
    </Layout>
  );
 };
--- a/nkebao/src/pages/workspace/auto-like/list/api.ts
+++ b/nkebao/src/pages/workspace/auto-like/list/api.ts
@@ -5,7 +5,7 @@ import {
  UpdateLikeTaskData,
  LikeRecord,
  PaginatedResponse,
-} from "@/types/auto-like";
+} from "@/pages/workspace/auto-like/record/api";

 // 获取自动点赞任务列表
 export function fetchAutoLikeTasks(
--- a/nkebao/src/pages/workspace/auto-like/list/index.tsx
+++ b/nkebao/src/pages/workspace/auto-like/list/index.tsx
@@ -22,7 +22,7 @@ import {
  toggleAutoLikeTask,
  copyAutoLikeTask,
 } from "./api";
-import { LikeTask } from "@/types/auto-like";
+import { LikeTask } from "@/pages/workspace/auto-like/record/api";
 import style from "./index.module.scss";

 // 卡片菜单组件
--- a/nkebao/src/pages/workspace/auto-like/new/api.ts
+++ b/nkebao/src/pages/workspace/auto-like/new/api.ts
@@ -3,7 +3,7 @@ import {
  CreateLikeTaskData,
  UpdateLikeTaskData,
  LikeTask,
-} from "@/types/auto-like";
+} from "@/pages/workspace/auto-like/record/api";

 // 获取自动点赞任务详情
 export function fetchAutoLikeTaskDetail(id: string): Promise<LikeTask | null> {
--- a/nkebao/src/pages/workspace/auto-like/new/index.tsx
+++ b/nkebao/src/pages/workspace/auto-like/new/index.tsx
@@ -1,12 +1,11 @@
 import React, { useState, useEffect } from "react";
 import { useNavigate, useParams } from "react-router-dom";
-import { Button, Input, Switch, message, Spin } from "antd";
 import {
-  ArrowLeftOutlined,
  PlusOutlined,
  MinusOutlined,
-  CheckOutlined,
+  ArrowLeftOutlined,
 } from "@ant-design/icons";
+import { Button, Input, Switch, message, Spin } from "antd";
 import { NavBar } from "antd-mobile";
 import Layout from "@/components/Layout/Layout";
 import {
@@ -14,7 +13,11 @@ import {
  updateAutoLikeTask,
  fetchAutoLikeTaskDetail,
 } from "./api";
-import { ContentType } from "@/types/auto-like";
+import {
+  CreateLikeTaskData,
+  UpdateLikeTaskData,
+  ContentType,
+} from "@/pages/workspace/auto-like/record/api";
 import style from "./new.module.scss";

 const contentTypeLabels: Record<ContentType, string> = {
@@ -24,32 +27,28 @@ const contentTypeLabels: Record<ContentType, string> = {
  link: "链接",
 };

-const steps = ["基础设置", "设备选择", "人群选择"];
-
-const defaultForm = {
-  name: "",
-  interval: 5,
-  maxLikes: 200,
-  startTime: "08:00",
-  endTime: "22:00",
-  contentTypes: ["text", "image", "video"] as ContentType[],
-  devices: [] as string[],
-  friends: [] as string[],
-  targetTags: [] as string[],
-  friendMaxLikes: 10,
-  enableFriendTags: false,
-  friendTags: "",
-};
-
 const NewAutoLike: React.FC = () => {
  const navigate = useNavigate();
  const { id } = useParams<{ id: string }>();
  const isEditMode = !!id;
-  const [currentStep, setCurrentStep] = useState(0);
+  const [currentStep, setCurrentStep] = useState(1);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isLoading, setIsLoading] = useState(isEditMode);
  const [autoEnabled, setAutoEnabled] = useState(false);
-  const [formData, setFormData] = useState({ ...defaultForm });
+  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) {
@@ -90,12 +89,12 @@ const NewAutoLike: React.FC = () => {
    }
  };

-  const handleUpdateFormData = (data: Partial<typeof formData>) => {
+  const handleUpdateFormData = (data: Partial<CreateLikeTaskData>) => {
    setFormData((prev) => ({ ...prev, ...data }));
  };

-  const handleNext = () => setCurrentStep((prev) => Math.min(prev + 1, 2));
-  const handlePrev = () => setCurrentStep((prev) => Math.max(prev - 1, 0));
+  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()) {
@@ -125,104 +124,90 @@ const NewAutoLike: React.FC = () => {

  // 步骤1：基础设置
  const renderBasicSettings = () => (
-    <div className={style.formStep}>
-      <div className={style.formItem}>
-        <div className={style.formLabel}>任务名称</div>
+    <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.input}
+          className={style["form-input"]}
        />
      </div>
-
-      <div className={style.formItem}>
-        <div className={style.formLabel}>点赞间隔</div>
-        <div className={style.counterRow}>
-          <button
-            type="button"
-            className={style.counterBtn}
+      <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),
              })
            }
-          >
-            <MinusOutlined />
-          </button>
-          <span className={style.counterValue}>{formData.interval} 秒</span>
-          <button
-            type="button"
-            className={style.counterBtn}
+            className={style["stepper-btn"]}
+          />
+          <span className={style["stepper-value"]}>{formData.interval} 秒</span>
+          <Button
+            icon={<PlusOutlined />}
            onClick={() =>
              handleUpdateFormData({ interval: formData.interval + 1 })
            }
-          >
-            <PlusOutlined />
-          </button>
+            className={style["stepper-btn"]}
+          />
        </div>
-        <div className={style.counterTip}>设置两次点赞之间的最小时间间隔</div>
      </div>
-
-      <div className={style.formItem}>
-        <div className={style.formLabel}>每日最大点赞数</div>
-        <div className={style.counterRow}>
-          <button
-            type="button"
-            className={style.counterBtn}
+      <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),
              })
            }
-          >
-            <MinusOutlined />
-          </button>
-          <span className={style.counterValue}>{formData.maxLikes} 次</span>
-          <button
-            type="button"
-            className={style.counterBtn}
+            className={style["stepper-btn"]}
+          />
+          <span className={style["stepper-value"]}>{formData.maxLikes} 次</span>
+          <Button
+            icon={<PlusOutlined />}
            onClick={() =>
              handleUpdateFormData({ maxLikes: formData.maxLikes + 10 })
            }
-          >
-            <PlusOutlined />
-          </button>
+            className={style["stepper-btn"]}
+          />
        </div>
-        <div className={style.counterTip}>设置每天最多点赞的次数</div>
      </div>
-
-      <div className={style.formItem}>
-        <div className={style.formLabel}>点赞时间范围</div>
-        <div className={style.timeRow}>
+      <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.inputTime}
+            className={style["time-input"]}
          />
-          <span className={style.timeTo}>至</span>
+          <span className={style["time-separator"]}>至</span>
          <Input
            type="time"
            value={formData.endTime}
            onChange={(e) => handleUpdateFormData({ endTime: e.target.value })}
-            className={style.inputTime}
+            className={style["time-input"]}
          />
        </div>
      </div>
-
-      <div className={style.formItem}>
-        <div className={style.formLabel}>点赞内容类型</div>
-        <div className={style.contentTypes}>
-          {(["text", "image", "video"] as ContentType[]).map((type) => (
+      <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.contentTypeTagActive
-                  : style.contentTypeTag
+                  ? style["content-type-tag-active"]
+                  : style["content-type-tag"]
              }
              onClick={() => {
                const newTypes = formData.contentTypes.includes(type)
@@ -236,109 +221,78 @@ const NewAutoLike: React.FC = () => {
          ))}
        </div>
      </div>
-
-      <div className={style.formItem}>
-        <div className={style.switchRow}>
-          <span className={style.switchLabel}>启用好友标签</span>
-          <Switch
-            checked={formData.enableFriendTags}
-            onChange={(checked) =>
-              handleUpdateFormData({ enableFriendTags: checked })
-            }
-            className={style.switch}
-          />
-        </div>
-        {formData.enableFriendTags && (
-          <div className={style.formItem}>
-            <div className={style.formLabel}>好友标签</div>
-            <Input
-              placeholder="请输入标签"
-              value={formData.friendTags}
-              onChange={(e) =>
-                handleUpdateFormData({ friendTags: e.target.value })
-              }
-              className={style.input}
-            />
-            <div className={style.counterTip}>只给有此标签的好友点赞</div>
-          </div>
-        )}
+      <div className={style["form-item"]}>
+        <label className={style["form-label"]}>自动开启</label>
+        <Switch checked={autoEnabled} onChange={setAutoEnabled} />
      </div>
-
-      <div className={style.formItem}>
-        <div className={style.switchRow}>
-          <span className={style.switchLabel}>自动开启</span>
-          <Switch
-            checked={autoEnabled}
-            onChange={setAutoEnabled}
-            className={style.switch}
-          />
-        </div>
-      </div>
-
-      <div className={style.formStepBtnRow}>
-        <Button type="primary" onClick={handleNext} className={style.nextBtn}>
+      <div className={style["form-actions"]}>
+        <Button
+          type="primary"
+          block
+          onClick={handleNext}
+          size="large"
+          className={style["main-btn"]}
+        >
          下一步
        </Button>
      </div>
    </div>
  );

-  // 步骤2：设备选择
+  // 步骤2：设备选择（占位）
  const renderDeviceSelection = () => (
-    <div className={style.formStep}>
-      <div className={style.formItem}>
-        <div className={style.formLabel}>选择设备</div>
-        <Input
-          placeholder="请选择设备"
-          value={formData.devices.join(", ")}
-          readOnly
-          onClick={() => message.info("这里应弹出设备选择器")}
-          className={style.input}
-        />
-        {formData.devices.length > 0 && (
-          <div className={style.selectedTip}>
-            已选设备: {formData.devices.length}个
-          </div>
-        )}
+    <div 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.formStepBtnRow}>
-        <Button onClick={handlePrev} className={style.prevBtn}>
+      <div className={style["form-actions"]}>
+        <Button
+          onClick={handlePrev}
+          size="large"
+          className={style["secondary-btn"]}
+        >
          上一步
        </Button>
-        <Button type="primary" onClick={handleNext} className={style.nextBtn}>
+        <Button
+          type="primary"
+          onClick={handleNext}
+          size="large"
+          className={style["main-btn"]}
+        >
          下一步
        </Button>
      </div>
    </div>
  );

-  // 步骤3：人群选择
-  const renderFriendSelection = () => (
-    <div className={style.formStep}>
-      <div className={style.formItem}>
-        <div className={style.formLabel}>选择微信好友</div>
-        <Input
-          placeholder="请选择微信好友"
-          value={formData.friends.join(", ")}
-          readOnly
-          onClick={() => message.info("这里应弹出好友选择器")}
-          className={style.input}
-        />
-        {formData.friends.length > 0 && (
-          <div className={style.selectedTip}>
-            已选好友: {formData.friends.length}个
-          </div>
-        )}
+  // 步骤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.formStepBtnRow}>
-        <Button onClick={handlePrev} className={style.prevBtn}>
+      <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.completeBtn}
+          className={style["main-btn"]}
        >
          {isEditMode ? "更新任务" : "创建任务"}
        </Button>
@@ -367,39 +321,21 @@ const NewAutoLike: React.FC = () => {
        </NavBar>
      }
    >
-      <div className={style.formBg}>
-        <div className={style.formSteps}>
-          {steps.map((s, i) => (
-            <div
-              key={s}
-              className={
-                style.formStepIndicator +
-                " " +
-                (i === currentStep
-                  ? style.formStepActive
-                  : i < currentStep
-                    ? style.formStepDone
-                    : "")
-              }
-            >
-              <span className={style.formStepNum}>
-                {i < currentStep ? <CheckOutlined /> : i + 1}
-              </span>
-              <span>{s}</span>
-            </div>
-          ))}
-        </div>
-        {isLoading ? (
-          <div className={style.formLoading}>
-            <Spin />
+      <div className={style["new-page-bg"]}>
+        <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>
-        ) : (
-          <>
-            {currentStep === 0 && renderBasicSettings()}
-            {currentStep === 1 && renderDeviceSelection()}
-            {currentStep === 2 && renderFriendSelection()}
-          </>
-        )}
+        </div>
      </div>
    </Layout>
  );
--- a/nkebao/src/pages/workspace/auto-like/record/api.ts
+++ b/nkebao/src/pages/workspace/auto-like/record/api.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;
+}
--- a/nkebao/src/pages/workspace/auto-like/record/data.ts
+++ b/nkebao/src/pages/workspace/auto-like/record/data.ts
@@ -0,0 +1,173 @@
+import { request } from "../../../../api/request";
+import {
+  LikeTask,
+  CreateLikeTaskData,
+  UpdateLikeTaskData,
+  LikeRecord,
+  ApiResponse,
+  PaginatedResponse,
+} from "@/pages/workspace/auto-like/record/api";
+
+// 获取自动点赞任务列表
+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/pages/workspace/auto-like/record/index.tsx
+++ b/nkebao/src/pages/workspace/auto-like/record/index.tsx
@@ -12,8 +12,8 @@ import {

 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 { fetchLikeRecords, fetchAutoLikeTaskDetail } from "./data";
+import { LikeRecord, LikeTask } from "./api";
 import style from "./record.module.scss";

 // 格式化日期
--- a/nkebao/src/pages/workspace/group-push/detail/groupPush.ts
+++ b/nkebao/src/pages/workspace/group-push/detail/groupPush.ts
@@ -0,0 +1,73 @@
+import request from "../../../../api/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/workspace/group-push/detail/index.tsx
+++ b/nkebao/src/pages/workspace/group-push/detail/index.tsx
@@ -10,7 +10,10 @@ import {
 } from "@ant-design/icons";
 import Layout from "@/components/Layout/Layout";
 import MeauMobile from "@/components/MeauMobile/MeauMoible";
-import { getGroupPushTaskDetail, GroupPushTask } from "@/api/groupPush";
+import {
+  getGroupPushTaskDetail,
+  GroupPushTask,
+} from "@/pages/workspace/group-push/detail/groupPush";
 import styles from "./index.module.scss";

 const Detail: React.FC = () => {
--- a/nkebao/src/pages/workspace/group-push/form/index.tsx
+++ b/nkebao/src/pages/workspace/group-push/form/index.tsx
@@ -3,7 +3,7 @@ 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 { createGroupPushTask } from "@/pages/workspace/group-push/detail/groupPush";
 import Layout from "@/components/Layout/Layout";
 import MeauMobile from "@/components/MeauMobile/MeauMoible";
 import StepIndicator from "./components/StepIndicator";
--- a/nkebao/src/pages/workspace/group-push/list/index.tsx
+++ b/nkebao/src/pages/workspace/group-push/list/index.tsx
@@ -38,7 +38,7 @@ import {
  toggleGroupPushTask,
  copyGroupPushTask,
  GroupPushTask,
-} from "@/api/groupPush";
+} from "@/pages/workspace/group-push/detail/groupPush";
 import styles from "./index.module.scss";

 const { Search } = Input;