diff --git a/nkebao/src/App.tsx b/nkebao/src/App.tsx
index c3fd82fd..cc32caf5 100644
--- a/nkebao/src/App.tsx
+++ b/nkebao/src/App.tsx
@@ -19,6 +19,7 @@ import NewDistribution from './pages/workspace/traffic-distribution/NewDistribut
 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 MomentsSync from './pages/workspace/moments-sync/MomentsSync';
 import MomentsSyncDetail from './pages/workspace/moments-sync/Detail';
 import NewMomentsSync from './pages/workspace/moments-sync/new';
@@ -71,6 +72,7 @@ function App() {
                   <Route path="/workspace/auto-group" element={<AutoGroup />} />
                   <Route path="/workspace/auto-group/:id" element={<AutoGroupDetail />} />
                   <Route path="/workspace/group-push" element={<GroupPush />} />
+                  <Route path="/workspace/group-push/new" element={<NewGroupPush />} />
                   <Route path="/workspace/moments-sync" element={<MomentsSync />} />
                   <Route path="/workspace/moments-sync/new" element={<NewMomentsSync />} />
                   <Route path="/workspace/moments-sync/:id" element={<MomentsSyncDetail />} />
diff --git a/nkebao/src/api/groupPush.ts b/nkebao/src/api/groupPush.ts
new file mode 100644
index 00000000..8ad67712
--- /dev/null
+++ b/nkebao/src/api/groupPush.ts
@@ -0,0 +1,201 @@
+import { get, post, put, del } 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;
+}
+
+// API响应类型
+interface ApiResponse<T = any> {
+  code: number;
+  message: string;
+  data: T;
+}
+
+/**
+ * 获取群发推送任务列表
+ */
+export async function fetchGroupPushTasks(): Promise<GroupPushTask[]> {
+  try {
+    const response = await get<ApiResponse<GroupPushTask[]>>('/v1/workspace/group-push/tasks');
+    
+    if (response.code === 200 && Array.isArray(response.data)) {
+      return response.data;
+    }
+    
+    // 如果API不可用，返回模拟数据
+    return getMockGroupPushTasks();
+  } catch (error) {
+    console.error('获取群发推送任务失败:', error);
+    // 返回模拟数据作为降级方案
+    return getMockGroupPushTasks();
+  }
+}
+
+/**
+ * 删除群发推送任务
+ */
+export async function deleteGroupPushTask(id: string): Promise<ApiResponse> {
+  try {
+    const response = await del<ApiResponse>(`/v1/workspace/group-push/tasks/${id}`);
+    return response;
+  } catch (error) {
+    console.error('删除群发推送任务失败:', error);
+    throw error;
+  }
+}
+
+/**
+ * 切换群发推送任务状态
+ */
+export async function toggleGroupPushTask(id: string, status: string): Promise<ApiResponse> {
+  try {
+    const response = await post<ApiResponse>(`/v1/workspace/group-push/tasks/${id}/toggle`, {
+      status
+    });
+    return response;
+  } catch (error) {
+    console.error('切换群发推送任务状态失败:', error);
+    throw error;
+  }
+}
+
+/**
+ * 复制群发推送任务
+ */
+export async function copyGroupPushTask(id: string): Promise<ApiResponse> {
+  try {
+    const response = await post<ApiResponse>(`/v1/workspace/group-push/tasks/${id}/copy`);
+    return response;
+  } catch (error) {
+    console.error('复制群发推送任务失败:', error);
+    throw error;
+  }
+}
+
+/**
+ * 创建群发推送任务
+ */
+export async function createGroupPushTask(taskData: Partial<GroupPushTask>): Promise<ApiResponse> {
+  try {
+    const response = await post<ApiResponse>('/v1/workspace/group-push/tasks', taskData);
+    return response;
+  } catch (error) {
+    console.error('创建群发推送任务失败:', error);
+    throw error;
+  }
+}
+
+/**
+ * 更新群发推送任务
+ */
+export async function updateGroupPushTask(id: string, taskData: Partial<GroupPushTask>): Promise<ApiResponse> {
+  try {
+    const response = await put<ApiResponse>(`/v1/workspace/group-push/tasks/${id}`, taskData);
+    return response;
+  } catch (error) {
+    console.error('更新群发推送任务失败:', error);
+    throw error;
+  }
+}
+
+/**
+ * 获取群发推送任务详情
+ */
+export async function getGroupPushTaskDetail(id: string): Promise<GroupPushTask> {
+  try {
+    const response = await get<ApiResponse<GroupPushTask>>(`/v1/workspace/group-push/tasks/${id}`);
+    
+    if (response.code === 200 && response.data) {
+      return response.data;
+    }
+    
+    throw new Error(response.message || '获取任务详情失败');
+  } catch (error) {
+    console.error('获取群发推送任务详情失败:', error);
+    throw error;
+  }
+}
+
+/**
+ * 模拟数据 - 当API不可用时使用
+ */
+function getMockGroupPushTasks(): GroupPushTask[] {
+  return [
+    {
+      id: '1',
+      name: '产品推广群发',
+      deviceCount: 2,
+      targetGroups: ['VIP客户群', '潜在客户群'],
+      pushCount: 156,
+      successCount: 142,
+      lastPushTime: '2025-02-06 13:12:35',
+      createTime: '2024-11-20 19:04:14',
+      creator: 'admin',
+      status: 1, // 运行中
+      pushInterval: 60,
+      maxPushPerDay: 200,
+      timeRange: { start: '09:00', end: '21:00' },
+      messageType: 'text',
+      messageContent: '新品上市，限时优惠！点击查看详情...',
+      targetTags: ['VIP客户', '高意向'],
+      pushMode: 'immediate',
+    },
+    {
+      id: '2',
+      name: '活动通知推送',
+      deviceCount: 1,
+      targetGroups: ['活动群', '推广群'],
+      pushCount: 89,
+      successCount: 78,
+      lastPushTime: '2024-03-04 14:09:35',
+      createTime: '2024-03-04 14:29:04',
+      creator: 'manager',
+      status: 2, // 已暂停
+      pushInterval: 120,
+      maxPushPerDay: 100,
+      timeRange: { start: '10:00', end: '20:00' },
+      messageType: 'image',
+      messageContent: '活动海报.jpg',
+      targetTags: ['活跃用户', '中意向'],
+      pushMode: 'scheduled',
+      scheduledTime: '2024-03-05 10:00:00',
+    },
+    {
+      id: '3',
+      name: '新客户欢迎消息',
+      deviceCount: 3,
+      targetGroups: ['新客户群', '体验群'],
+      pushCount: 234,
+      successCount: 218,
+      lastPushTime: '2025-02-06 15:30:22',
+      createTime: '2024-12-01 09:15:30',
+      creator: 'admin',
+      status: 1, // 运行中
+      pushInterval: 30,
+      maxPushPerDay: 300,
+      timeRange: { start: '08:00', end: '22:00' },
+      messageType: 'text',
+      messageContent: '欢迎加入我们的大家庭！这里有最新的产品信息和优惠活动...',
+      targetTags: ['新客户', '欢迎'],
+      pushMode: 'immediate',
+    },
+  ];
+} 
\ No newline at end of file
diff --git a/nkebao/src/pages/workspace/group-push/GroupPush.tsx b/nkebao/src/pages/workspace/group-push/GroupPush.tsx
index 3de8edd9..8a32dc66 100644
--- a/nkebao/src/pages/workspace/group-push/GroupPush.tsx
+++ b/nkebao/src/pages/workspace/group-push/GroupPush.tsx
@@ -1,474 +1,533 @@
-import React, { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import {
-  Plus,
-  Filter,
-  Search,
-  RefreshCw,
-  MoreVertical,
-  Clock,
-  Edit,
-  Trash2,
-  Eye,
-  Copy,
-  ChevronDown,
-  ChevronUp,
-  Settings,
-  Calendar,
-  Users,
-  Send,
-  // CheckCircle,
-  // XCircle,
-  MessageSquare,
-} from 'lucide-react';
-import { Card } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Badge } from '@/components/ui/badge';
-import { Switch } from '@/components/ui/switch';
-import { Progress } from '@/components/ui/progress';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import Layout from '@/components/Layout';
-import PageHeader from '@/components/PageHeader';
-import BottomNav from '@/components/BottomNav';
-import { useToast } from '@/components/ui/toast';
-import '@/components/Layout.css';
-
-interface PushTask {
-  id: string;
-  name: string;
-  status: 'running' | 'paused' | 'completed';
-  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;
-}
-
-export default function GroupPush() {
-  const navigate = useNavigate();
-  const { toast } = useToast();
-  const [expandedTaskId, setExpandedTaskId] = useState<string | null>(null);
-  const [searchTerm, setSearchTerm] = useState('');
-  const [tasks, setTasks] = useState<PushTask[]>([
-    {
-      id: '1',
-      name: '产品推广群发',
-      deviceCount: 2,
-      targetGroups: ['VIP客户群', '潜在客户群'],
-      pushCount: 156,
-      successCount: 142,
-      lastPushTime: '2025-02-06 13:12:35',
-      createTime: '2024-11-20 19:04:14',
-      creator: 'admin',
-      status: 'running',
-      pushInterval: 60,
-      maxPushPerDay: 200,
-      timeRange: { start: '09:00', end: '21:00' },
-      messageType: 'text',
-      messageContent: '新品上市，限时优惠！点击查看详情...',
-      targetTags: ['VIP客户', '高意向'],
-      pushMode: 'immediate',
-    },
-    {
-      id: '2',
-      name: '活动通知推送',
-      deviceCount: 1,
-      targetGroups: ['活动群', '推广群'],
-      pushCount: 89,
-      successCount: 78,
-      lastPushTime: '2024-03-04 14:09:35',
-      createTime: '2024-03-04 14:29:04',
-      creator: 'manager',
-      status: 'paused',
-      pushInterval: 120,
-      maxPushPerDay: 100,
-      timeRange: { start: '10:00', end: '20:00' },
-      messageType: 'image',
-      messageContent: '活动海报.jpg',
-      targetTags: ['活跃用户', '中意向'],
-      pushMode: 'scheduled',
-      scheduledTime: '2024-03-05 10:00:00',
-    },
-  ]);
-
-  const toggleExpand = (taskId: string) => {
-    setExpandedTaskId(expandedTaskId === taskId ? null : taskId);
-  };
-
-  const handleDelete = (taskId: string) => {
-    const taskToDelete = tasks.find((task) => task.id === taskId);
-    if (!taskToDelete) return;
-
-    if (!window.confirm(`确定要删除"${taskToDelete.name}"吗？`)) return;
-
-    setTasks(tasks.filter((task) => task.id !== taskId));
-    toast({
-      title: '删除成功',
-      description: '已成功删除推送任务',
-    });
-  };
-
-  const handleEdit = (taskId: string) => {
-    navigate(`/workspace/group-push/${taskId}/edit`);
-  };
-
-  const handleView = (taskId: string) => {
-    navigate(`/workspace/group-push/${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({
-        title: '复制成功',
-        description: '已成功复制推送任务',
-      });
-    }
-  };
-
-  const toggleTaskStatus = (taskId: string) => {
-    const task = tasks.find((t) => t.id === taskId);
-    if (!task) return;
-
-    setTasks(
-      tasks.map((task) =>
-        task.id === taskId ? { ...task, status: task.status === 'running' ? 'paused' : 'running' } : task,
-      ),
-    );
-
-    toast({
-      title: task.status === 'running' ? '已暂停' : '已启动',
-      description: `${task.name}任务${task.status === 'running' ? '已暂停' : '已启动'}`,
-    });
-  };
-
-  const handleCreateNew = () => {
-    navigate('/workspace/group-push/new');
-  };
-
-  const filteredTasks = tasks.filter((task) =>
-    task.name.toLowerCase().includes(searchTerm.toLowerCase()),
-  );
-
-  const getStatusColor = (status: string) => {
-    switch (status) {
-      case 'running':
-        return 'bg-green-100 text-green-800';
-      case 'paused':
-        return 'bg-gray-100 text-gray-800';
-      case 'completed':
-        return 'bg-blue-100 text-blue-800';
-      default:
-        return 'bg-gray-100 text-gray-800';
-    }
-  };
-
-  const getStatusText = (status: string) => {
-    switch (status) {
-      case 'running':
-        return '进行中';
-      case 'paused':
-        return '已暂停';
-      case 'completed':
-        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={
-        <PageHeader
-          title="群消息推送"
-          defaultBackPath="/workspace"
-          rightContent={
-            <Button onClick={handleCreateNew}>
-              <Plus className="h-4 w-4 mr-2" />
-              新建任务
-            </Button>
-          }
-        />
-      }
-      footer={<BottomNav />}
-    >
-      <div className="bg-gray-50 min-h-screen pb-20">
-        <div className="p-4">
-          {/* 搜索和筛选 */}
-          <Card className="p-4 mb-4">
-            <div className="flex items-center space-x-2">
-              <div className="relative flex-1">
-                <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
-                <Input
-                  placeholder="搜索任务名称"
-                  className="pl-9"
-                  value={searchTerm}
-                  onChange={(e) => setSearchTerm(e.target.value)}
-                />
-              </div>
-              <Button variant="outline" size="icon">
-                <Filter className="h-4 w-4" />
-              </Button>
-              <Button variant="outline" size="icon">
-                <RefreshCw className="h-4 w-4" />
-              </Button>
-            </div>
-          </Card>
-
-          {/* 任务列表 */}
-          <div className="space-y-4">
-            {filteredTasks.length === 0 ? (
-              <Card className="p-8 text-center">
-                <Send className="h-12 w-12 text-gray-300 mx-auto mb-3" />
-                <p className="text-gray-500 text-lg font-medium mb-2">暂无推送任务</p>
-                <p className="text-gray-400 text-sm mb-4">创建您的第一个群消息推送任务</p>
-                <Button onClick={handleCreateNew}>
-                  <Plus className="h-4 w-4 mr-2" />
-                  创建第一个任务
-                </Button>
-              </Card>
-            ) : (
-              filteredTasks.map((task) => (
-                <Card key={task.id} className="p-4">
-                  <div className="flex items-center justify-between mb-4">
-                    <div className="flex items-center space-x-2">
-                      <h3 className="font-medium">{task.name}</h3>
-                      <Badge className={getStatusColor(task.status)}>
-                        {getStatusText(task.status)}
-                      </Badge>
-                    </div>
-                    <div className="flex items-center space-x-2">
-                      <Switch
-                        checked={task.status === 'running'}
-                        onCheckedChange={() => toggleTaskStatus(task.id)}
-                        disabled={task.status === 'completed'}
-                      />
-                      <DropdownMenu>
-                        <DropdownMenuTrigger asChild>
-                          <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
-                            <MoreVertical className="h-4 w-4" />
-                          </Button>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent align="end">
-                          <DropdownMenuItem onClick={() => handleView(task.id)}>
-                            <Eye className="h-4 w-4 mr-2" />
-                            查看
-                          </DropdownMenuItem>
-                          <DropdownMenuItem onClick={() => handleEdit(task.id)}>
-                            <Edit className="h-4 w-4 mr-2" />
-                            编辑
-                          </DropdownMenuItem>
-                          <DropdownMenuItem onClick={() => handleCopy(task.id)}>
-                            <Copy className="h-4 w-4 mr-2" />
-                            复制
-                          </DropdownMenuItem>
-                          <DropdownMenuItem onClick={() => handleDelete(task.id)}>
-                            <Trash2 className="h-4 w-4 mr-2" />
-                            删除
-                          </DropdownMenuItem>
-                        </DropdownMenuContent>
-                      </DropdownMenu>
-                    </div>
-                  </div>
-
-                  <div className="grid grid-cols-2 gap-4 mb-4">
-                    <div className="text-sm text-gray-500">
-                      <div>执行设备：{task.deviceCount} 个</div>
-                      <div>目标群组：{task.targetGroups.length} 个</div>
-                    </div>
-                    <div className="text-sm text-gray-500">
-                      <div>推送成功：{task.successCount}/{task.pushCount}</div>
-                      <div>创建人：{task.creator}</div>
-                    </div>
-                  </div>
-
-                  {/* 成功率进度条 */}
-                  <div className="mb-4">
-                    <div className="flex justify-between text-sm mb-1">
-                      <span className="text-gray-500">推送成功率</span>
-                      <span className="font-medium">{getSuccessRate(task.pushCount, task.successCount)}%</span>
-                    </div>
-                    <Progress
-                      value={getSuccessRate(task.pushCount, task.successCount)}
-                      className="h-2"
-                    />
-                  </div>
-
-                  <div className="flex items-center justify-between text-xs text-gray-500 border-t pt-4">
-                    <div className="flex items-center">
-                      <Clock className="w-4 h-4 mr-1" />
-                      上次推送：{task.lastPushTime}
-                    </div>
-                    <div className="flex items-center">
-                      <span>创建时间：{task.createTime}</span>
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        className="ml-2 p-0 h-6 w-6"
-                        onClick={() => toggleExpand(task.id)}
-                      >
-                        {expandedTaskId === task.id ? (
-                          <ChevronUp className="h-4 w-4" />
-                        ) : (
-                          <ChevronDown className="h-4 w-4" />
-                        )}
-                      </Button>
-                    </div>
-                  </div>
-
-                  {expandedTaskId === task.id && (
-                    <div className="mt-4 pt-4 border-t border-dashed">
-                      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                        <div className="space-y-4">
-                          <div className="flex items-center">
-                            <Settings className="h-5 w-5 mr-2 text-gray-500" />
-                            <h4 className="font-medium">基本设置</h4>
-                          </div>
-                          <div className="space-y-2 pl-7">
-                            <div className="flex justify-between text-sm">
-                              <span className="text-gray-500">推送间隔：</span>
-                              <span>{task.pushInterval} 秒</span>
-                            </div>
-                            <div className="flex justify-between text-sm">
-                              <span className="text-gray-500">每日最大推送数：</span>
-                              <span>{task.maxPushPerDay} 条</span>
-                            </div>
-                            <div className="flex justify-between text-sm">
-                              <span className="text-gray-500">执行时间段：</span>
-                              <span>
-                                {task.timeRange.start} - {task.timeRange.end}
-                              </span>
-                            </div>
-                            <div className="flex justify-between text-sm">
-                              <span className="text-gray-500">推送模式：</span>
-                              <span>{task.pushMode === 'immediate' ? '立即推送' : '定时推送'}</span>
-                            </div>
-                            {task.scheduledTime && (
-                              <div className="flex justify-between text-sm">
-                                <span className="text-gray-500">定时时间：</span>
-                                <span>{task.scheduledTime}</span>
-                              </div>
-                            )}
-                          </div>
-                        </div>
-
-                        <div className="space-y-4">
-                          <div className="flex items-center">
-                            <Users className="h-5 w-5 mr-2 text-gray-500" />
-                            <h4 className="font-medium">目标群组</h4>
-                          </div>
-                          <div className="space-y-2 pl-7">
-                            <div className="flex flex-wrap gap-2">
-                              {task.targetGroups.map((group) => (
-                                <Badge key={group} variant="outline" className="bg-gray-50">
-                                  {group}
-                                </Badge>
-                              ))}
-                            </div>
-                          </div>
-                        </div>
-
-                        <div className="space-y-4">
-                          <div className="flex items-center">
-                            <MessageSquare className="h-5 w-5 mr-2 text-gray-500" />
-                            <h4 className="font-medium">消息内容</h4>
-                          </div>
-                          <div className="space-y-2 pl-7">
-                            <div className="flex justify-between text-sm">
-                              <span className="text-gray-500">消息类型：</span>
-                              <span>{getMessageTypeText(task.messageType)}</span>
-                            </div>
-                            <div className="text-sm">
-                              <div className="text-gray-500 mb-1">消息内容：</div>
-                              <div className="bg-gray-50 p-2 rounded text-xs">
-                                {task.messageContent}
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-
-                        <div className="space-y-4">
-                          <div className="flex items-center">
-                            <Calendar className="h-5 w-5 mr-2 text-gray-500" />
-                            <h4 className="font-medium">执行进度</h4>
-                          </div>
-                          <div className="space-y-2 pl-7">
-                            <div className="flex justify-between text-sm mb-1">
-                              <span className="text-gray-500">今日已推送：</span>
-                              <span>
-                                {task.pushCount} / {task.maxPushPerDay}
-                              </span>
-                            </div>
-                            <Progress
-                              value={(task.pushCount / task.maxPushPerDay) * 100}
-                              className="h-2"
-                            />
-                            {task.targetTags.length > 0 && (
-                              <div className="mt-2">
-                                <div className="text-sm text-gray-500 mb-1">目标标签：</div>
-                                <div className="flex flex-wrap gap-1">
-                                  {task.targetTags.map((tag) => (
-                                    <Badge key={tag} variant="outline" className="text-xs">
-                                      {tag}
-                                    </Badge>
-                                  ))}
-                                </div>
-                              </div>
-                            )}
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  )}
-                </Card>
-              ))
-            )}
-          </div>
-        </div>
-      </div>
-    </Layout>
-  );
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+  Plus,
+  Filter,
+  Search,
+  RefreshCw,
+  MoreVertical,
+  Clock,
+  Edit,
+  Trash2,
+  Eye,
+  Copy,
+  ChevronDown,
+  ChevronUp,
+  Settings,
+  Calendar,
+  Users,
+  Send,
+  // CheckCircle,
+  // XCircle,
+  MessageSquare,
+} from 'lucide-react';
+import { Card } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Badge } from '@/components/ui/badge';
+import { Switch } from '@/components/ui/switch';
+import { Progress } from '@/components/ui/progress';
+import Layout from '@/components/Layout';
+import PageHeader from '@/components/PageHeader';
+import BottomNav from '@/components/BottomNav';
+import { useToast } from '@/components/ui/toast';
+import { fetchGroupPushTasks, deleteGroupPushTask, toggleGroupPushTask, copyGroupPushTask, GroupPushTask } from '@/api/groupPush';
+import '@/components/Layout.css';
+
+type CardMenuProps = {
+  onView: () => void;
+  onEdit: () => void;
+  onCopy: () => void;
+  onDelete: () => void;
+};
+
+function CardMenu({ onView, onEdit, onCopy, onDelete }: CardMenuProps) {
+  const [open, setOpen] = React.useState(false);
+  const menuRef = React.useRef<HTMLDivElement | null>(null);
+
+  React.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)} style={{ background: "none", border: "none", padding: 0, margin: 0, cursor: "pointer" }}>
+        <MoreVertical className="h-4 w-4" />
+      </button>
+      {open && (
+        <div
+          ref={menuRef}
+          style={{
+            position: "absolute",
+            right: 0,
+            top: 28,
+            background: "#fff",
+            borderRadius: 8,
+            boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
+            zIndex: 100,
+            minWidth: 120,
+            padding: 4,
+          }}
+        >
+          <div onClick={() => { onView(); setOpen(false); }} style={{ padding: 8, cursor: "pointer", display: "flex", alignItems: "center", borderRadius: 6, fontSize: 14, gap: 6, transition: "background .2s" }} onMouseOver={e => (e.currentTarget as HTMLDivElement).style.background="#f5f5f5"} onMouseOut={e => (e.currentTarget as HTMLDivElement).style.background=""}>
+            <Eye className="h-4 w-4 mr-2" />查看
+          </div>
+          <div onClick={() => { onEdit(); setOpen(false); }} style={{ padding: 8, cursor: "pointer", display: "flex", alignItems: "center", borderRadius: 6, fontSize: 14, gap: 6, transition: "background .2s" }} onMouseOver={e => (e.currentTarget as HTMLDivElement).style.background="#f5f5f5"} onMouseOut={e => (e.currentTarget as HTMLDivElement).style.background=""}>
+            <Edit className="h-4 w-4 mr-2" />编辑
+          </div>
+          <div onClick={() => { onCopy(); setOpen(false); }} style={{ padding: 8, cursor: "pointer", display: "flex", alignItems: "center", borderRadius: 6, fontSize: 14, gap: 6, transition: "background .2s" }} onMouseOver={e => (e.currentTarget as HTMLDivElement).style.background="#f5f5f5"} onMouseOut={e => (e.currentTarget as HTMLDivElement).style.background=""}>
+            <Copy className="h-4 w-4 mr-2" />复制
+          </div>
+          <div onClick={() => { onDelete(); setOpen(false); }} style={{ padding: 8, cursor: "pointer", display: "flex", alignItems: "center", borderRadius: 6, fontSize: 14, gap: 6, color: "#e53e3e", transition: "background .2s" }} onMouseOver={e => (e.currentTarget as HTMLDivElement).style.background="#f5f5f5"} onMouseOut={e => (e.currentTarget as HTMLDivElement).style.background=""}>
+            <Trash2 className="h-4 w-4 mr-2" />删除
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// 移除旧的PushTask接口，使用从API导入的GroupPushTask
+
+export default function GroupPush() {
+  const navigate = useNavigate();
+  const { toast } = useToast();
+  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);
+    } catch (error) {
+      console.error('获取群发推送任务失败:', error);
+      toast({
+        title: '获取任务失败',
+        description: '请稍后重试',
+        variant: 'destructive',
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 组件加载时获取数据
+  useEffect(() => {
+    fetchTasks();
+  }, []);
+
+  const toggleExpand = (taskId: string) => {
+    setExpandedTaskId(expandedTaskId === taskId ? null : taskId);
+  };
+
+  const handleDelete = async (taskId: string) => {
+    const taskToDelete = tasks.find((task) => task.id === taskId);
+    if (!taskToDelete) return;
+
+    if (!window.confirm(`确定要删除"${taskToDelete.name}"吗？`)) return;
+
+    try {
+      const response = await deleteGroupPushTask(taskId);
+      if (response.code === 200) {
+        setTasks(tasks.filter((task) => task.id !== taskId));
+        toast({
+          title: '删除成功',
+          description: '已成功删除推送任务',
+        });
+      } else {
+        toast({
+          title: '删除失败',
+          description: response.message || '请稍后重试',
+          variant: 'destructive',
+        });
+      }
+    } catch (error) {
+      console.error('删除任务失败:', error);
+      toast({
+        title: '删除失败',
+        description: '请稍后重试',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const handleEdit = (taskId: string) => {
+    navigate(`/workspace/group-push/${taskId}/edit`);
+  };
+
+  const handleView = (taskId: string) => {
+    navigate(`/workspace/group-push/${taskId}`);
+  };
+
+  const handleCopy = async (taskId: string) => {
+    try {
+      const response = await copyGroupPushTask(taskId);
+      if (response.code === 200) {
+        toast({
+          title: '复制成功',
+          description: '已成功复制推送任务',
+        });
+        // 重新获取任务列表
+        fetchTasks();
+      } else {
+        toast({
+          title: '复制失败',
+          description: response.message || '请稍后重试',
+          variant: 'destructive',
+        });
+      }
+    } catch (error) {
+      console.error('复制任务失败:', error);
+      toast({
+        title: '复制失败',
+        description: '请稍后重试',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const toggleTaskStatus = async (taskId: string) => {
+    const task = tasks.find((t) => t.id === taskId);
+    if (!task) return;
+
+    // 先更新本地状态
+    const newStatus = task.status === 1 ? 2 : 1;
+    setTasks(
+      tasks.map((task) =>
+        task.id === taskId ? { ...task, status: newStatus } : task,
+      ),
+    );
+
+    try {
+      const response = await toggleGroupPushTask(taskId, String(newStatus));
+      if (response.code === 200) {
+        toast({
+          title: task.status === 1 ? '已暂停' : '已启动',
+          description: `${task.name}任务${task.status === 1 ? '已暂停' : '已启动'}`,
+        });
+      } else {
+        // 请求失败，回退本地状态
+        setTasks(
+          tasks.map((task) =>
+            task.id === taskId ? { ...task, status: task.status } : task,
+          ),
+        );
+        toast({
+          title: '操作失败',
+          description: response.message || '请稍后重试',
+          variant: 'destructive',
+        });
+      }
+    } catch (error) {
+      // 请求异常，回退本地状态
+      setTasks(
+        tasks.map((task) =>
+          task.id === taskId ? { ...task, status: task.status } : task,
+        ),
+      );
+      toast({
+        title: '操作失败',
+        description: '请稍后重试',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  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 'bg-green-100 text-green-800';
+      case 2:
+        return 'bg-gray-100 text-gray-800';
+      default:
+        return 'bg-gray-100 text-gray-800';
+    }
+  };
+
+  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={
+        <PageHeader
+          title="群消息推送"
+          defaultBackPath="/workspace"
+          rightContent={
+            <Button onClick={handleCreateNew}>
+              <Plus className="h-4 w-4 mr-2" />
+              新建任务
+            </Button>
+          }
+        />
+      }
+      footer={<BottomNav />}
+    >
+      <div className="bg-gray-50 min-h-screen pb-20">
+        <div className="p-4">
+          {/* 搜索和筛选 */}
+          <Card className="p-4 mb-4">
+            <div className="flex items-center space-x-2">
+              <div className="relative flex-1">
+                <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
+                <Input
+                  placeholder="搜索任务名称"
+                  className="pl-9"
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                />
+              </div>
+              <Button variant="outline" size="icon">
+                <Filter className="h-4 w-4" />
+              </Button>
+              <Button variant="outline" size="icon" onClick={fetchTasks} disabled={loading}>
+                {loading ? (
+                  <RefreshCw className="h-4 w-4 animate-spin" />
+                ) : (
+                  <RefreshCw className="h-4 w-4" />
+                )}
+              </Button>
+            </div>
+          </Card>
+
+          {/* 任务列表 */}
+          <div className="space-y-4">
+            {filteredTasks.length === 0 ? (
+              <Card className="p-8 text-center">
+                <Send className="h-12 w-12 text-gray-300 mx-auto mb-3" />
+                <p className="text-gray-500 text-lg font-medium mb-2">暂无推送任务</p>
+                <p className="text-gray-400 text-sm mb-4">创建您的第一个群消息推送任务</p>
+                <Button onClick={handleCreateNew}>
+                  <Plus className="h-4 w-4 mr-2" />
+                  创建第一个任务
+                </Button>
+              </Card>
+            ) : (
+              filteredTasks.map((task) => (
+                <Card key={task.id} className="p-4">
+                  <div className="flex items-center justify-between mb-4">
+                    <div className="flex items-center space-x-2">
+                      <h3 className="font-medium">{task.name}</h3>
+                      <Badge className={getStatusColor(task.status)}>
+                        {getStatusText(task.status)}
+                      </Badge>
+                    </div>
+                    <div className="flex items-center space-x-2">
+                      <Switch
+                        checked={task.status === 1}
+                        onCheckedChange={() => toggleTaskStatus(task.id)}
+                        disabled={false}
+                      />
+                      <CardMenu
+                        onView={() => handleView(task.id)}
+                        onEdit={() => handleEdit(task.id)}
+                        onCopy={() => handleCopy(task.id)}
+                        onDelete={() => handleDelete(task.id)}
+                      />
+                    </div>
+                  </div>
+
+                  <div className="grid grid-cols-2 gap-4 mb-4">
+                    <div className="text-sm text-gray-500">
+                      <div>执行设备：{task.deviceCount} 个</div>
+                      <div>目标群组：{task.targetGroups.length} 个</div>
+                    </div>
+                    <div className="text-sm text-gray-500">
+                      <div>推送成功：{task.successCount}/{task.pushCount}</div>
+                      <div>创建人：{task.creator}</div>
+                    </div>
+                  </div>
+
+                  {/* 成功率进度条 */}
+                  <div className="mb-4">
+                    <div className="flex justify-between text-sm mb-1">
+                      <span className="text-gray-500">推送成功率</span>
+                      <span className="font-medium">{getSuccessRate(task.pushCount, task.successCount)}%</span>
+                    </div>
+                    <Progress
+                      value={getSuccessRate(task.pushCount, task.successCount)}
+                      className="h-2"
+                    />
+                  </div>
+
+                  <div className="flex items-center justify-between text-xs text-gray-500 border-t pt-4">
+                    <div className="flex items-center">
+                      <Clock className="w-4 h-4 mr-1" />
+                      上次推送：{task.lastPushTime}
+                    </div>
+                    <div className="flex items-center">
+                      <span>创建时间：{task.createTime}</span>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="ml-2 p-0 h-6 w-6"
+                        onClick={() => toggleExpand(task.id)}
+                      >
+                        {expandedTaskId === task.id ? (
+                          <ChevronUp className="h-4 w-4" />
+                        ) : (
+                          <ChevronDown className="h-4 w-4" />
+                        )}
+                      </Button>
+                    </div>
+                  </div>
+
+                  {expandedTaskId === task.id && (
+                    <div className="mt-4 pt-4 border-t border-dashed">
+                      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                        <div className="space-y-4">
+                          <div className="flex items-center">
+                            <Settings className="h-5 w-5 mr-2 text-gray-500" />
+                            <h4 className="font-medium">基本设置</h4>
+                          </div>
+                          <div className="space-y-2 pl-7">
+                            <div className="flex justify-between text-sm">
+                              <span className="text-gray-500">推送间隔：</span>
+                              <span>{task.pushInterval} 秒</span>
+                            </div>
+                            <div className="flex justify-between text-sm">
+                              <span className="text-gray-500">每日最大推送数：</span>
+                              <span>{task.maxPushPerDay} 条</span>
+                            </div>
+                            <div className="flex justify-between text-sm">
+                              <span className="text-gray-500">执行时间段：</span>
+                              <span>
+                                {task.timeRange.start} - {task.timeRange.end}
+                              </span>
+                            </div>
+                            <div className="flex justify-between text-sm">
+                              <span className="text-gray-500">推送模式：</span>
+                              <span>{task.pushMode === 'immediate' ? '立即推送' : '定时推送'}</span>
+                            </div>
+                            {task.scheduledTime && (
+                              <div className="flex justify-between text-sm">
+                                <span className="text-gray-500">定时时间：</span>
+                                <span>{task.scheduledTime}</span>
+                              </div>
+                            )}
+                          </div>
+                        </div>
+
+                        <div className="space-y-4">
+                          <div className="flex items-center">
+                            <Users className="h-5 w-5 mr-2 text-gray-500" />
+                            <h4 className="font-medium">目标群组</h4>
+                          </div>
+                          <div className="space-y-2 pl-7">
+                            <div className="flex flex-wrap gap-2">
+                              {task.targetGroups.map((group) => (
+                                <Badge key={group} variant="outline" className="bg-gray-50">
+                                  {group}
+                                </Badge>
+                              ))}
+                            </div>
+                          </div>
+                        </div>
+
+                        <div className="space-y-4">
+                          <div className="flex items-center">
+                            <MessageSquare className="h-5 w-5 mr-2 text-gray-500" />
+                            <h4 className="font-medium">消息内容</h4>
+                          </div>
+                          <div className="space-y-2 pl-7">
+                            <div className="flex justify-between text-sm">
+                              <span className="text-gray-500">消息类型：</span>
+                              <span>{getMessageTypeText(task.messageType)}</span>
+                            </div>
+                            <div className="text-sm">
+                              <div className="text-gray-500 mb-1">消息内容：</div>
+                              <div className="bg-gray-50 p-2 rounded text-xs">
+                                {task.messageContent}
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+
+                        <div className="space-y-4">
+                          <div className="flex items-center">
+                            <Calendar className="h-5 w-5 mr-2 text-gray-500" />
+                            <h4 className="font-medium">执行进度</h4>
+                          </div>
+                          <div className="space-y-2 pl-7">
+                            <div className="flex justify-between text-sm mb-1">
+                              <span className="text-gray-500">今日已推送：</span>
+                              <span>
+                                {task.pushCount} / {task.maxPushPerDay}
+                              </span>
+                            </div>
+                            <Progress
+                              value={(task.pushCount / task.maxPushPerDay) * 100}
+                              className="h-2"
+                            />
+                            {task.targetTags.length > 0 && (
+                              <div className="mt-2">
+                                <div className="text-sm text-gray-500 mb-1">目标标签：</div>
+                                <div className="flex flex-wrap gap-1">
+                                  {task.targetTags.map((tag) => (
+                                    <Badge key={tag} variant="outline" className="text-xs">
+                                      {tag}
+                                    </Badge>
+                                  ))}
+                                </div>
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  )}
+                </Card>
+              ))
+            )}
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
 } 
\ No newline at end of file
diff --git a/nkebao/src/pages/workspace/group-push/components/BasicSettings.tsx b/nkebao/src/pages/workspace/group-push/components/BasicSettings.tsx
new file mode 100644
index 00000000..ccf9b6c1
--- /dev/null
+++ b/nkebao/src/pages/workspace/group-push/components/BasicSettings.tsx
@@ -0,0 +1,243 @@
+import React, { useState } from 'react';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { Minus, Plus } from 'lucide-react';
+
+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;
+}
+
+export default function BasicSettings({
+  defaultValues = {
+    name: '',
+    pushTimeStart: '06:00',
+    pushTimeEnd: '23:59',
+    dailyPushCount: 20,
+    pushOrder: 'latest',
+    isLoopPush: false,
+    isImmediatePush: false,
+    isEnabled: false,
+  },
+  onNext,
+  onSave,
+  onCancel,
+  loading = false,
+}: BasicSettingsProps) {
+  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 className="space-y-6">
+      <Card>
+        <CardContent className="p-4 sm:p-6">
+          <div className="space-y-4">
+            {/* 任务名称 */}
+            <div className="space-y-2">
+              <Label htmlFor="taskName" className="flex items-center text-sm font-medium">
+                <span className="text-red-500 mr-1">*</span>任务名称:
+              </Label>
+              <Input
+                id="taskName"
+                value={values.name}
+                onChange={(e) => handleChange('name', e.target.value)}
+                placeholder="请输入任务名称"
+              />
+            </div>
+
+            {/* 允许推送的时间段 */}
+            <div className="space-y-2">
+              <Label className="text-sm font-medium">允许推送的时间段:</Label>
+              <div className="flex items-center space-x-2">
+                <Input
+                  type="time"
+                  value={values.pushTimeStart}
+                  onChange={(e) => handleChange('pushTimeStart', e.target.value)}
+                  className="w-full"
+                />
+                <span className="text-gray-500">至</span>
+                <Input
+                  type="time"
+                  value={values.pushTimeEnd}
+                  onChange={(e) => handleChange('pushTimeEnd', e.target.value)}
+                  className="w-full"
+                />
+              </div>
+            </div>
+
+            {/* 每日推送 */}
+            <div className="space-y-2">
+              <Label className="text-sm font-medium">每日推送:</Label>
+              <div className="flex items-center space-x-2">
+                <Button
+                  variant="outline"
+                  size="icon"
+                  type="button"
+                  onClick={() => handleCountChange(false)}
+                  className="h-9 w-9"
+                  disabled={loading}
+                >
+                  <Minus className="h-4 w-4" />
+                </Button>
+                <Input
+                  type="number"
+                  value={values.dailyPushCount.toString()}
+                  onChange={(e) => handleChange('dailyPushCount', Number.parseInt(e.target.value) || 1)}
+                  className="w-20 text-center"
+                  min={1}
+                  disabled={loading}
+                />
+                <Button
+                  variant="outline"
+                  size="icon"
+                  type="button"
+                  onClick={() => handleCountChange(true)}
+                  className="h-9 w-9"
+                  disabled={loading}
+                >
+                  <Plus className="h-4 w-4" />
+                </Button>
+                <span className="text-gray-500">条内容</span>
+              </div>
+            </div>
+
+            {/* 推送顺序 */}
+            <div className="space-y-2">
+              <Label className="text-sm font-medium">推送顺序:</Label>
+              <div className="flex">
+                <Button
+                  type="button"
+                  variant={values.pushOrder === 'earliest' ? 'default' : 'outline'}
+                  className={`rounded-r-none flex-1 ${values.pushOrder === 'earliest' ? '' : 'text-gray-500'}`}
+                  onClick={() => handleChange('pushOrder', 'earliest')}
+                  disabled={loading}
+                >
+                  按最早
+                </Button>
+                <Button
+                  type="button"
+                  variant={values.pushOrder === 'latest' ? 'default' : 'outline'}
+                  className={`rounded-l-none flex-1 ${values.pushOrder === 'latest' ? '' : 'text-gray-500'}`}
+                  onClick={() => handleChange('pushOrder', 'latest')}
+                  disabled={loading}
+                >
+                  按最新
+                </Button>
+              </div>
+            </div>
+
+            {/* 是否循环推送 */}
+            <div className="flex items-center justify-between">
+              <Label htmlFor="isLoopPush" className="flex items-center text-sm font-medium">
+                <span className="text-red-500 mr-1">*</span>是否循环推送:
+              </Label>
+              <div className="flex items-center space-x-2">
+                <span className={values.isLoopPush ? 'text-gray-400' : 'text-gray-900'}>否</span>
+                <Switch
+                  id="isLoopPush"
+                  checked={values.isLoopPush}
+                  onCheckedChange={(checked) => handleChange('isLoopPush', checked)}
+                  disabled={loading}
+                />
+                <span className={values.isLoopPush ? 'text-gray-900' : 'text-gray-400'}>是</span>
+              </div>
+            </div>
+
+            {/* 是否立即推送 */}
+            <div className="flex items-center justify-between">
+              <Label htmlFor="isImmediatePush" className="flex items-center text-sm font-medium">
+                <span className="text-red-500 mr-1">*</span>是否立即推送:
+              </Label>
+              <div className="flex items-center space-x-2">
+                <span className={values.isImmediatePush ? 'text-gray-400' : 'text-gray-900'}>否</span>
+                <Switch
+                  id="isImmediatePush"
+                  checked={values.isImmediatePush}
+                  onCheckedChange={(checked) => handleChange('isImmediatePush', checked)}
+                  disabled={loading}
+                />
+                <span className={values.isImmediatePush ? 'text-gray-900' : 'text-gray-400'}>是</span>
+              </div>
+            </div>
+            {values.isImmediatePush && (
+              <div className="bg-yellow-50 border border-yellow-200 rounded-md p-3 text-sm text-yellow-700">
+                如果启用，系统会把内容库里所有的内容按顺序推送到指定的社群
+              </div>
+            )}
+
+            {/* 是否启用 */}
+            <div className="flex items-center justify-between">
+              <Label htmlFor="isEnabled" className="flex items-center text-sm font-medium">
+                <span className="text-red-500 mr-1">*</span>是否启用:
+              </Label>
+              <div className="flex items-center space-x-2">
+                <span className={values.isEnabled ? 'text-gray-400' : 'text-gray-900'}>否</span>
+                <Switch
+                  id="isEnabled"
+                  checked={values.isEnabled}
+                  onCheckedChange={(checked) => handleChange('isEnabled', checked)}
+                  disabled={loading}
+                />
+                <span className={values.isEnabled ? 'text-gray-900' : 'text-gray-400'}>是</span>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <div className="flex space-x-2 justify-center sm:justify-end">
+        <Button 
+          type="button" 
+          onClick={() => onNext(values)} 
+          className="flex-1 sm:flex-none"
+          disabled={loading}
+        >
+          下一步
+        </Button>
+        <Button 
+          type="button" 
+          variant="outline" 
+          onClick={() => onSave(values)} 
+          className="flex-1 sm:flex-none"
+          disabled={loading}
+        >
+          {loading ? '保存中...' : '保存'}
+        </Button>
+        <Button 
+          type="button" 
+          variant="outline" 
+          onClick={onCancel} 
+          className="flex-1 sm:flex-none"
+          disabled={loading}
+        >
+          取消
+        </Button>
+      </div>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/nkebao/src/pages/workspace/group-push/components/ContentSelector.tsx b/nkebao/src/pages/workspace/group-push/components/ContentSelector.tsx
new file mode 100644
index 00000000..d05a4467
--- /dev/null
+++ b/nkebao/src/pages/workspace/group-push/components/ContentSelector.tsx
@@ -0,0 +1,237 @@
+import React, { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Search, FileText } from 'lucide-react';
+
+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' },
+    ],
+  },
+];
+
+export default function ContentSelector({
+  selectedLibraries,
+  onLibrariesChange,
+  onPrevious,
+  onNext,
+  onSave,
+  onCancel,
+  loading = false,
+}: ContentSelectorProps) {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [libraries, setLibraries] = 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 className="space-y-6">
+      <Card>
+        <CardContent className="p-4 sm:p-6">
+          <div className="space-y-4">
+            {/* 搜索框 */}
+            <div className="space-y-2">
+              <Label className="text-sm font-medium">搜索内容库:</Label>
+              <div className="relative">
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
+                <Input
+                  placeholder="搜索内容库名称"
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                  className="pl-9"
+                  disabled={loading}
+                />
+              </div>
+            </div>
+
+            {/* 全选按钮 */}
+            <div className="flex items-center space-x-2">
+              <Checkbox
+                id="selectAll"
+                checked={selectedLibraries.length === filteredLibraries.length && filteredLibraries.length > 0}
+                onCheckedChange={handleSelectAll}
+                disabled={loading}
+              />
+              <Label htmlFor="selectAll" className="text-sm font-medium">
+                全选 ({selectedLibraries.length}/{filteredLibraries.length})
+              </Label>
+            </div>
+
+            {/* 内容库列表 */}
+            <div className="space-y-2 max-h-96 overflow-y-auto">
+              {filteredLibraries.map((library) => (
+                <div
+                  key={library.id}
+                  className="flex items-center space-x-3 p-3 border rounded-lg hover:bg-gray-50"
+                >
+                  <Checkbox
+                    id={library.id}
+                    checked={isLibrarySelected(library.id)}
+                    onCheckedChange={(checked) => handleLibraryToggle(library, checked as boolean)}
+                    disabled={loading}
+                  />
+                  <div className="flex items-center space-x-3 flex-1">
+                    <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
+                      <FileText className="h-5 w-5 text-blue-600" />
+                    </div>
+                    <div className="flex-1">
+                      <div className="font-medium text-sm">{library.name}</div>
+                      <div className="text-xs text-gray-500">
+                        包含 {library.targets.length} 条内容
+                      </div>
+                    </div>
+                    <div className="flex -space-x-1">
+                      {library.targets.slice(0, 3).map((target) => (
+                        <img
+                          key={target.id}
+                          src={target.avatar}
+                          alt=""
+                          className="w-6 h-6 rounded-full border border-white"
+                        />
+                      ))}
+                      {library.targets.length > 3 && (
+                        <div className="w-6 h-6 rounded-full bg-gray-200 border border-white flex items-center justify-center">
+                          <span className="text-xs text-gray-600">+{library.targets.length - 3}</span>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            {filteredLibraries.length === 0 && (
+              <div className="text-center py-8 text-gray-500">
+                <FileText className="h-12 w-12 mx-auto mb-2 text-gray-300" />
+                <p>没有找到匹配的内容库</p>
+              </div>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+
+      <div className="flex space-x-2 justify-center sm:justify-end">
+        <Button 
+          type="button" 
+          variant="outline" 
+          onClick={onPrevious} 
+          className="flex-1 sm:flex-none"
+          disabled={loading}
+        >
+          上一步
+        </Button>
+        <Button 
+          type="button" 
+          onClick={onNext} 
+          className="flex-1 sm:flex-none"
+          disabled={loading || selectedLibraries.length === 0}
+        >
+          下一步
+        </Button>
+        <Button 
+          type="button" 
+          variant="outline" 
+          onClick={onSave} 
+          className="flex-1 sm:flex-none"
+          disabled={loading}
+        >
+          {loading ? '保存中...' : '保存'}
+        </Button>
+        <Button 
+          type="button" 
+          variant="outline" 
+          onClick={onCancel} 
+          className="flex-1 sm:flex-none"
+          disabled={loading}
+        >
+          取消
+        </Button>
+      </div>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/nkebao/src/pages/workspace/group-push/components/GroupSelector.tsx b/nkebao/src/pages/workspace/group-push/components/GroupSelector.tsx
new file mode 100644
index 00000000..dfec70e1
--- /dev/null
+++ b/nkebao/src/pages/workspace/group-push/components/GroupSelector.tsx
@@ -0,0 +1,248 @@
+import React, { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Search, Users } from 'lucide-react';
+
+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',
+    },
+  },
+];
+
+export default function GroupSelector({
+  selectedGroups,
+  onGroupsChange,
+  onPrevious,
+  onNext,
+  onSave,
+  onCancel,
+  loading = false,
+}: GroupSelectorProps) {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [groups, setGroups] = 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 className="space-y-6">
+      <Card>
+        <CardContent className="p-4 sm:p-6">
+          <div className="space-y-4">
+            {/* 搜索框 */}
+            <div className="space-y-2">
+              <Label className="text-sm font-medium">搜索群组:</Label>
+              <div className="relative">
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
+                <Input
+                  placeholder="搜索群组名称或客服名称"
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                  className="pl-9"
+                  disabled={loading}
+                />
+              </div>
+            </div>
+
+            {/* 全选按钮 */}
+            <div className="flex items-center space-x-2">
+              <Checkbox
+                id="selectAll"
+                checked={selectedGroups.length === filteredGroups.length && filteredGroups.length > 0}
+                onCheckedChange={handleSelectAll}
+                disabled={loading}
+              />
+              <Label htmlFor="selectAll" className="text-sm font-medium">
+                全选 ({selectedGroups.length}/{filteredGroups.length})
+              </Label>
+            </div>
+
+            {/* 群组列表 */}
+            <div className="space-y-2 max-h-96 overflow-y-auto">
+              {filteredGroups.map((group) => (
+                <div
+                  key={group.id}
+                  className="flex items-center space-x-3 p-3 border rounded-lg hover:bg-gray-50"
+                >
+                  <Checkbox
+                    id={group.id}
+                    checked={isGroupSelected(group.id)}
+                    onCheckedChange={(checked) => handleGroupToggle(group, checked as boolean)}
+                    disabled={loading}
+                  />
+                  <div className="flex items-center space-x-3 flex-1">
+                    <img
+                      src={group.avatar}
+                      alt={group.name}
+                      className="w-10 h-10 rounded-full"
+                    />
+                    <div className="flex-1">
+                      <div className="font-medium text-sm">{group.name}</div>
+                      <div className="text-xs text-gray-500 flex items-center">
+                        <img
+                          src={group.serviceAccount.avatar}
+                          alt={group.serviceAccount.name}
+                          className="w-4 h-4 rounded-full mr-1"
+                        />
+                        {group.serviceAccount.name}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            {filteredGroups.length === 0 && (
+              <div className="text-center py-8 text-gray-500">
+                <Users className="h-12 w-12 mx-auto mb-2 text-gray-300" />
+                <p>没有找到匹配的群组</p>
+              </div>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+
+      <div className="flex space-x-2 justify-center sm:justify-end">
+        <Button 
+          type="button" 
+          variant="outline" 
+          onClick={onPrevious} 
+          className="flex-1 sm:flex-none"
+          disabled={loading}
+        >
+          上一步
+        </Button>
+        <Button 
+          type="button" 
+          onClick={onNext} 
+          className="flex-1 sm:flex-none"
+          disabled={loading || selectedGroups.length === 0}
+        >
+          下一步
+        </Button>
+        <Button 
+          type="button" 
+          variant="outline" 
+          onClick={onSave} 
+          className="flex-1 sm:flex-none"
+          disabled={loading}
+        >
+          {loading ? '保存中...' : '保存'}
+        </Button>
+        <Button 
+          type="button" 
+          variant="outline" 
+          onClick={onCancel} 
+          className="flex-1 sm:flex-none"
+          disabled={loading}
+        >
+          取消
+        </Button>
+      </div>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/nkebao/src/pages/workspace/group-push/components/StepIndicator.tsx b/nkebao/src/pages/workspace/group-push/components/StepIndicator.tsx
new file mode 100644
index 00000000..767a6b49
--- /dev/null
+++ b/nkebao/src/pages/workspace/group-push/components/StepIndicator.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Steps, StepItem } from 'tdesign-mobile-react';
+
+interface StepIndicatorProps {
+  currentStep: number;
+  steps: { id: number; title: string; subtitle: string }[];
+}
+
+export default function StepIndicator({ currentStep, steps }: StepIndicatorProps) {
+  return (
+    <div className="mb-6">
+      <Steps current={currentStep - 1}>
+        {steps.map((step) => (
+          <StepItem key={step.id} title={step.subtitle} />
+        ))}
+      </Steps>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/nkebao/src/pages/workspace/group-push/new.tsx b/nkebao/src/pages/workspace/group-push/new.tsx
new file mode 100644
index 00000000..c20b465d
--- /dev/null
+++ b/nkebao/src/pages/workspace/group-push/new.tsx
@@ -0,0 +1,260 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ArrowLeft } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { useToast } from '@/components/ui/toast';
+import { createGroupPushTask } from '@/api/groupPush';
+import Layout from '@/components/Layout';
+import PageHeader from '@/components/PageHeader';
+import StepIndicator from './components/StepIndicator';
+import BasicSettings from './components/BasicSettings';
+import GroupSelector from './components/GroupSelector';
+import ContentSelector from './components/ContentSelector';
+
+// 类型定义
+interface WechatGroup {
+  id: string;
+  name: string;
+  avatar: string;
+  serviceAccount: {
+    id: string;
+    name: string;
+    avatar: string;
+  };
+}
+
+interface ContentLibrary {
+  id: string;
+  name: string;
+  targets: Array<{
+    id: string;
+    avatar: string;
+  }>;
+}
+
+interface FormData {
+  name: string;
+  pushTimeStart: string;
+  pushTimeEnd: string;
+  dailyPushCount: number;
+  pushOrder: 'earliest' | 'latest';
+  isLoopPush: boolean;
+  isImmediatePush: boolean;
+  isEnabled: boolean;
+  groups: WechatGroup[];
+  contentLibraries: ContentLibrary[];
+}
+
+const steps = [
+  { id: 1, title: '步骤 1', subtitle: '基础设置' },
+  { id: 2, title: '步骤 2', subtitle: '选择社群' },
+  { id: 3, title: '步骤 3', subtitle: '选择内容库' },
+  { id: 4, title: '步骤 4', subtitle: '京东联盟' },
+];
+
+export default function NewGroupPush() {
+  const navigate = useNavigate();
+  const { toast } = useToast();
+  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()) {
+      toast({
+        title: '请输入任务名称',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    if (formData.groups.length === 0) {
+      toast({
+        title: '请选择至少一个社群',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    if (formData.contentLibraries.length === 0) {
+      toast({
+        title: '请选择至少一个内容库',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    setLoading(true);
+    try {
+      // 转换数据格式以匹配API
+      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) {
+        toast({
+          title: '保存成功',
+          description: `社群推送任务"${formData.name}"已保存`,
+        });
+        navigate('/workspace/group-push');
+      } else {
+        toast({
+          title: '保存失败',
+          description: response.message || '请稍后重试',
+          variant: 'destructive',
+        });
+      }
+    } catch (error) {
+      console.error('保存任务失败:', error);
+      toast({
+        title: '保存失败',
+        description: '请稍后重试',
+        variant: 'destructive',
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCancel = () => {
+    navigate('/workspace/group-push');
+  };
+
+  return (
+    <Layout
+      header={
+        <PageHeader
+          title="新建社群推送任务"
+          defaultBackPath="/workspace/group-push"
+        />
+      }
+    >
+      <div className="container mx-auto py-4 px-4 sm:px-6 md:py-6">
+        <StepIndicator currentStep={currentStep} steps={steps} />
+
+        <div className="mt-8">
+          {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 className="space-y-6">
+              <div className="border rounded-md p-8 text-center text-gray-500">
+                京东联盟设置（此步骤为占位，实际功能待开发）
+              </div>
+
+              <div className="flex space-x-2 justify-center sm:justify-end">
+                <Button 
+                  type="button" 
+                  variant="outline" 
+                  onClick={() => setCurrentStep(3)} 
+                  className="flex-1 sm:flex-none"
+                  disabled={loading}
+                >
+                  上一步
+                </Button>
+                <Button 
+                  type="button" 
+                  onClick={handleSave} 
+                  className="flex-1 sm:flex-none"
+                  disabled={loading}
+                >
+                  {loading ? '保存中...' : '完成'}
+                </Button>
+                <Button 
+                  type="button" 
+                  variant="outline" 
+                  onClick={handleCancel} 
+                  className="flex-1 sm:flex-none"
+                  disabled={loading}
+                >
+                  取消
+                </Button>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </Layout>
+  );
+}