feat: 本次提交更新内容如下

修复

nkebao/src/pages/workspace/auto-group/AutoGroup.tsx

@@ -1,234 +1,217 @@
-import React, { useState, useEffect } from 'react';
-import { useNavigate, Link } from 'react-router-dom';
-import { Plus, Filter, Search, RefreshCw, MoreVertical, Users, Edit, Trash2, Eye, Copy } from 'lucide-react';
+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,
+  UserPlus,
+  CheckCircle,
+  XCircle,
+} 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 { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
 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 GroupTask {
   id: string;
   name: string;
-  status: number; // 1-运行中，0-暂停
+  status: 'running' | 'paused' | 'completed';
   deviceCount: number;
-  groupCount: number;
-  memberCount: number;
+  targetFriends: number;
+  createdGroups: number;
   lastCreateTime: string;
   createTime: string;
   creator: string;
-  creatorName: string;
-  config: {
-    devices: string[];
-    targetGroups: string[];
-    maxMembersPerGroup: number;
-  };
+  createInterval: number;
+  maxGroupsPerDay: number;
+  timeRange: { start: string; end: string };
+  groupSize: { min: number; max: number };
+  targetTags: string[];
+  groupNameTemplate: string;
+  groupDescription: string;
 }
 
 export default function AutoGroup() {
   const navigate = useNavigate();
   const { toast } = useToast();
-  const [tasks, setTasks] = useState<GroupTask[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const [searchQuery, setSearchQuery] = useState('');
-  const [currentPage, setCurrentPage] = useState(1);
-  const [pageSize, setPageSize] = useState(10);
-  const [total, setTotal] = useState(0);
-
-  // 模拟数据
-  const mockTasks: GroupTask[] = [
+  const [expandedTaskId, setExpandedTaskId] = useState<string | null>(null);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [tasks, setTasks] = useState<GroupTask[]>([
     {
       id: '1',
-      name: '自动建群任务1',
-      status: 1,
-      deviceCount: 3,
-      groupCount: 15,
-      memberCount: 450,
-      lastCreateTime: '2024-03-18 16:30:00',
-      createTime: '2024-03-15 10:00:00',
+      name: 'VIP客户建群',
+      deviceCount: 2,
+      targetFriends: 156,
+      createdGroups: 12,
+      lastCreateTime: '2025-02-06 13:12:35',
+      createTime: '2024-11-20 19:04:14',
       creator: 'admin',
-      creatorName: '管理员',
-      config: {
-        devices: ['device1', 'device2', 'device3'],
-        targetGroups: ['VIP客户', '活跃用户'],
-        maxMembersPerGroup: 30
-      }
+      status: 'running',
+      createInterval: 300,
+      maxGroupsPerDay: 20,
+      timeRange: { start: '09:00', end: '21:00' },
+      groupSize: { min: 20, max: 50 },
+      targetTags: ['VIP客户', '高价值'],
+      groupNameTemplate: 'VIP客户交流群{序号}',
+      groupDescription: 'VIP客户专属交流群，提供优质服务',
     },
     {
       id: '2',
-      name: '自动建群任务2',
-      status: 0,
-      deviceCount: 2,
-      groupCount: 8,
-      memberCount: 240,
-      lastCreateTime: '2024-03-17 14:20:00',
-      createTime: '2024-03-14 15:30:00',
-      creator: 'user1',
-      creatorName: '用户1',
-      config: {
-        devices: ['device4', 'device5'],
-        targetGroups: ['新客户'],
-        maxMembersPerGroup: 25
-      }
-    }
-  ];
+      name: '产品推广建群',
+      deviceCount: 1,
+      targetFriends: 89,
+      createdGroups: 8,
+      lastCreateTime: '2024-03-04 14:09:35',
+      createTime: '2024-03-04 14:29:04',
+      creator: 'manager',
+      status: 'paused',
+      createInterval: 600,
+      maxGroupsPerDay: 10,
+      timeRange: { start: '10:00', end: '20:00' },
+      groupSize: { min: 15, max: 30 },
+      targetTags: ['潜在客户', '中意向'],
+      groupNameTemplate: '产品推广群{序号}',
+      groupDescription: '产品推广交流群，了解最新产品信息',
+    },
+  ]);
 
-  // 获取任务列表
-  const fetchTasks = async () => {
-    setIsLoading(true);
-    try {
-      // 模拟API调用
-      await new Promise(resolve => setTimeout(resolve, 1000));
-      
-      // 模拟搜索过滤
-      let filteredTasks = mockTasks;
-      if (searchQuery) {
-        filteredTasks = mockTasks.filter(task => 
-          task.name.toLowerCase().includes(searchQuery.toLowerCase())
-        );
-      }
-      
-      setTasks(filteredTasks);
-      setTotal(filteredTasks.length);
-    } catch (error: any) {
-      console.error('获取自动建群任务列表失败:', error);
-      toast({
-        title: '获取失败',
-        description: error?.message || '请检查网络连接',
-      });
-    } finally {
-      setIsLoading(false);
-    }
+  const toggleExpand = (taskId: string) => {
+    setExpandedTaskId(expandedTaskId === taskId ? null : taskId);
   };
 
-  // 组件加载时获取任务列表
-  useEffect(() => {
-    fetchTasks();
-  }, [currentPage, pageSize]);
+  const handleDelete = (taskId: string) => {
+    const taskToDelete = tasks.find((task) => task.id === taskId);
+    if (!taskToDelete) return;
 
-  // 处理页码变化
-  const handlePageChange = (page: number) => {
-    setCurrentPage(page);
-  };
-
-  // 搜索任务
-  const handleSearch = () => {
-    fetchTasks();
-  };
-
-  // 切换任务状态
-  const toggleTaskStatus = async (taskId: string, currentStatus: number) => {
-    try {
-      // 模拟API调用
-      await new Promise(resolve => setTimeout(resolve, 500));
-      
-      const newStatus = currentStatus === 1 ? 0 : 1;
-      setTasks(
-        tasks.map((task) =>
-          task.id === taskId ? { ...task, status: newStatus } : task
-        )
-      );
-      
-      toast({
-        title: '状态更新成功',
-        description: `任务已${newStatus === 1 ? '启用' : '暂停'}`,
-      });
-    } catch (error: any) {
-      console.error('更新任务状态失败:', error);
-      toast({
-        title: '更新失败',
-        description: error?.message || '更新任务状态失败',
-      });
-    }
-  };
-
-  // 执行删除
-  const handleDelete = async (taskId: string) => {
-    try {
-      // 模拟API调用
-      await new Promise(resolve => setTimeout(resolve, 500));
+    if (!window.confirm(`确定要删除"${taskToDelete.name}"吗？`)) return;
       
       setTasks(tasks.filter((task) => task.id !== taskId));
       toast({
         title: '删除成功',
         description: '已成功删除建群任务',
       });
-    } catch (error: any) {
-      console.error('删除任务失败:', error);
-      toast({
-        title: '删除失败',
-        description: error?.message || '删除任务失败',
-      });
-    }
   };
 
-  // 编辑任务
   const handleEdit = (taskId: string) => {
     navigate(`/workspace/auto-group/${taskId}/edit`);
   };
 
-  // 查看任务详情
   const handleView = (taskId: string) => {
     navigate(`/workspace/auto-group/${taskId}`);
   };
 
-  // 复制任务
-  const handleCopy = async (taskId: string) => {
-    try {
-      // 模拟API调用
-      await new Promise(resolve => setTimeout(resolve, 500));
-      
-      const taskToCopy = tasks.find(task => task.id === taskId);
+  const handleCopy = (taskId: string) => {
+    const taskToCopy = tasks.find((task) => task.id === taskId);
       if (taskToCopy) {
         const newTask = {
           ...taskToCopy,
-          id: Date.now().toString(),
-          name: `${taskToCopy.name} (副本)`,
-          status: 0,
-          createTime: new Date().toLocaleString(),
-          groupCount: 0,
-          memberCount: 0,
-          lastCreateTime: '-'
+        id: `${Date.now()}`,
+        name: `${taskToCopy.name} (复制)`,
+        createTime: new Date().toISOString().replace('T', ' ').substring(0, 19),
         };
-        setTasks([newTask, ...tasks]);
+      setTasks([...tasks, newTask]);
         toast({
           title: '复制成功',
           description: '已成功复制建群任务',
         });
       }
-    } catch (error: any) {
-      console.error('复制任务失败:', error);
+  };
+
+  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: '复制失败',
-        description: error?.message || '复制任务失败',
+      title: task.status === 'running' ? '已暂停' : '已启动',
+      description: `${task.name}任务${task.status === 'running' ? '已暂停' : '已启动'}`,
       });
+  };
+
+  const handleCreateNew = () => {
+    navigate('/workspace/auto-group/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 filteredTasks = tasks.filter(
-    (task) => task.name.toLowerCase().includes(searchQuery.toLowerCase())
-  );
+  const getStatusText = (status: string) => {
+    switch (status) {
+      case 'running':
+        return '进行中';
+      case 'paused':
+        return '已暂停';
+      case 'completed':
+        return '已完成';
+      default:
+        return '未知';
+    }
+  };
 
   return (
-    <div className="flex-1 bg-gray-50 min-h-screen pb-20">
+    <Layout
+      header={
       <PageHeader
         title="自动建群"
         defaultBackPath="/workspace"
         rightContent={
-          <Link to="/workspace/auto-group/new">
-            <Button>
+            <Button onClick={handleCreateNew}>
               <Plus className="h-4 w-4 mr-2" />
               新建任务
             </Button>
-          </Link>
         }
       />
-
+      }
+      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">
@@ -236,35 +219,47 @@ export default function AutoGroup() {
               <Input 
                 placeholder="搜索任务名称" 
                 className="pl-9" 
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
               />
             </div>
-            <Button variant="outline" size="icon" onClick={handleSearch}>
+              <Button variant="outline" size="icon">
               <Filter className="h-4 w-4" />
             </Button>
-            <Button variant="outline" size="icon" onClick={fetchTasks} disabled={isLoading}>
-              <RefreshCw className={`h-4 w-4 ${isLoading ? 'animate-spin' : ''}`} />
+              <Button variant="outline" size="icon">
+                <RefreshCw className="h-4 w-4" />
             </Button>
           </div>
         </Card>
 
+          {/* 任务列表 */}
         <div className="space-y-4">
-          {isLoading ? (
-            <div className="text-center py-12 text-gray-400">加载中...</div>
-          ) : filteredTasks.length > 0 ? (
+            {filteredTasks.length === 0 ? (
+              <Card className="p-8 text-center">
+                <UserPlus 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 variant={task.status === 1 ? 'default' : 'secondary'}>
-                      {task.status === 1 ? '运行中' : '已暂停'}
+                      <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, task.status)} />
+                      <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">
@@ -295,58 +290,131 @@ export default function AutoGroup() {
 
                 <div className="grid grid-cols-2 gap-4 mb-4">
                   <div className="text-sm text-gray-500">
-                    <div className="mb-1">执行设备：{task.deviceCount} 个</div>
-                    <div className="mb-1">已建群数：{task.groupCount} 个</div>
-                    <div>创建者：{task.creatorName}</div>
+                      <div>执行设备：{task.deviceCount} 个</div>
+                      <div>目标好友：{task.targetFriends} 个</div>
                   </div>
                   <div className="text-sm text-gray-500">
-                    <div className="mb-1">群成员数：{task.memberCount} 人</div>
-                    <div className="mb-1">最后建群：{task.lastCreateTime}</div>
-                    <div>创建时间：{task.createTime}</div>
+                      <div>已建群：{task.createdGroups} 个</div>
+                      <div>创建人：{task.creator}</div>
+                    </div>
                   </div>
-                </div>
 
-                <div className="border-t pt-4">
-                  <div className="flex items-center text-sm text-gray-500">
-                    <Users className="h-4 w-4 mr-2" />
-                    <span>目标人群：{task.config.targetGroups.join(', ')}</span>
+                  <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.lastCreateTime}
+                    </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.createInterval} 秒</span>
+                            </div>
+                            <div className="flex justify-between text-sm">
+                              <span className="text-gray-500">每日最大建群数：</span>
+                              <span>{task.maxGroupsPerDay} 个</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.groupSize.min}-{task.groupSize.max} 人</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.targetTags.map((tag) => (
+                                <Badge key={tag} variant="outline" className="bg-gray-50">
+                                  {tag}
+                                </Badge>
+                              ))}
+                            </div>
+                          </div>
+                        </div>
+
+                        <div className="space-y-4">
+                          <div className="flex items-center">
+                            <UserPlus 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="text-sm">
+                              <div className="text-gray-500 mb-1">群名称模板：</div>
+                              <div className="bg-gray-50 p-2 rounded text-xs">
+                                {task.groupNameTemplate}
+                              </div>
+                            </div>
+                            <div className="text-sm">
+                              <div className="text-gray-500 mb-1">群描述：</div>
+                              <div className="bg-gray-50 p-2 rounded text-xs">
+                                {task.groupDescription}
                   </div>
                 </div>
-              </Card>
-            ))
-          ) : (
-            <div className="text-center py-12 text-gray-400">
-              {searchQuery ? '没有找到匹配的任务' : '暂无建群任务'}
             </div>
-          )}
         </div>
 
-        {/* 分页 */}
-        {total > pageSize && (
-          <div className="flex justify-center mt-6 space-x-2">
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => handlePageChange(Math.max(1, currentPage - 1))}
-              disabled={currentPage === 1 || isLoading}
-            >
-              上一页
-            </Button>
-            <div className="flex items-center space-x-1">
-              <span className="text-sm text-gray-500">第 {currentPage} 页</span>
-              <span className="text-sm text-gray-500">共 {Math.ceil(total / pageSize)} 页</span>
+                        <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.createdGroups} / {task.maxGroupsPerDay}
+                              </span>
+                            </div>
+                            <Progress
+                              value={(task.createdGroups / task.maxGroupsPerDay) * 100}
+                              className="h-2"
+                            />
+                          </div>
+                        </div>
+                      </div>
             </div>
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => handlePageChange(Math.min(Math.ceil(total / pageSize), currentPage + 1))}
-              disabled={currentPage >= Math.ceil(total / pageSize) || isLoading}
-            >
-              下一页
-            </Button>
+                  )}
+                </Card>
+              ))
+            )}
           </div>
-        )}
+        </div>
       </div>
-    </div>
+    </Layout>
   );
 }