feat: 更新

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

@@ -57,6 +57,59 @@ interface GroupTask {
   groupDescription: string;
 }
 
+// CardMenu组件，参考AutoLike实现
+function CardMenu({ onView, onEdit, onCopy, onDelete }: { onView: () => void; onEdit: () => void; onCopy: () => void; onDelete: () => void; }) {
+  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>
+  );
+}
+
 export default function AutoGroup() {
   const navigate = useNavigate();
   const { toast } = useToast();
@@ -260,31 +313,12 @@ export default function AutoGroup() {
                         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>
+                    <CardMenu
+                      onView={() => handleView(task.id)}
+                      onEdit={() => handleEdit(task.id)}
+                      onCopy={() => handleCopy(task.id)}
+                      onDelete={() => handleDelete(task.id)}
+                    />
                   </div>
                 </div>
 

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

@@ -1,7 +1,414 @@
-import React from 'react';
-import { useParams } from 'react-router-dom';
+import { useState, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import {
+  ChevronLeft,
+  Search,
+  Filter,
+  RefreshCw,
+  AlertCircle,
+  CheckCircle2,
+  Users,
+} from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Badge } from '@/components/ui/badge';
+import { Progress } from '@/components/ui/progress';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import Layout from '@/components/Layout';
+import PageHeader from '@/components/PageHeader';
+import { useToast } from '@/components/ui/toast';
+import '@/components/Layout.css';
+
+// 群组成员接口
+interface GroupMember {
+  id: string;
+  nickname: string;
+  wechatId: string;
+  tags: string[];
+}
+
+// 群组接口
+interface Group {
+  id: string;
+  members: GroupMember[];
+}
+
+// 建群任务详情接口
+interface GroupTaskDetail {
+  id: string;
+  name: string;
+  status: 'preparing' | 'creating' | 'completed' | 'paused';
+  totalGroups: number;
+  currentGroupIndex: number;
+  groups: Group[];
+  createTime: string;
+  lastUpdateTime: string;
+  creator: string;
+  deviceCount: number;
+  targetFriends: number;
+  groupSize: { min: number; max: number };
+  timeRange: { start: string; end: string };
+  targetTags: string[];
+  groupNameTemplate: string;
+  groupDescription: string;
+}
+
+// 群组预览组件
+function GroupPreview({ 
+  groupIndex, 
+  members, 
+  isCreating, 
+  isCompleted, 
+  onRetry 
+}: {
+  groupIndex: number;
+  members: GroupMember[];
+  isCreating: boolean;
+  isCompleted: boolean;
+  onRetry?: () => void;
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const targetSize = 38; // 微信群人数固定为38人
+
+  return (
+    <Card className="w-full">
+      <CardHeader className="pb-2">
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-lg font-medium">
+            群 {groupIndex + 1}
+            <Badge 
+              variant={isCompleted ? "default" : isCreating ? "secondary" : "outline"} 
+              className="ml-2"
+            >
+              {isCompleted ? "已完成" : isCreating ? "创建中" : "等待中"}
+            </Badge>
+          </CardTitle>
+          <div className="flex items-center space-x-2">
+            <Users className="w-4 h-4 text-gray-500" />
+            <span className="text-sm text-gray-500">{members.length}/{targetSize}</span>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        {isCreating && !isCompleted && (
+          <div className="mb-4">
+            <Progress value={Math.round((members.length / targetSize) * 100)} />
+          </div>
+        )}
+
+        {expanded ? (
+          <div className="space-y-2">
+            <div className="grid grid-cols-2 gap-2">
+              {members.map((member) => (
+                <div key={member.id} className="text-sm flex items-center space-x-2 bg-gray-50 p-2 rounded">
+                  <span className="truncate">{member.nickname}</span>
+                  {member.tags.length > 0 && (
+                    <Badge variant="outline" className="text-xs">
+                      {member.tags[0]}
+                    </Badge>
+                  )}
+                </div>
+              ))}
+            </div>
+            <Button variant="ghost" size="sm" className="w-full mt-2" onClick={() => setExpanded(false)}>
+              收起
+            </Button>
+          </div>
+        ) : (
+          <Button variant="ghost" size="sm" className="w-full" onClick={() => setExpanded(true)}>
+            查看成员 ({members.length})
+          </Button>
+        )}
+
+        {!isCompleted && members.length < targetSize && (
+          <div className="mt-4 flex items-center text-amber-500 text-sm">
+            <AlertCircle className="w-4 h-4 mr-2" />
+            群人数不足{targetSize}人
+            {onRetry && (
+              <Button variant="ghost" size="sm" className="ml-2 text-blue-500" onClick={onRetry}>
+                继续拉人
+              </Button>
+            )}
+          </div>
+        )}
+
+        {isCompleted && (
+          <div className="mt-4 flex items-center text-green-500 text-sm">
+            <CheckCircle2 className="w-4 h-4 mr-2" />
+            群创建完成
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+// 建群进度组件
+function GroupCreationProgress({ 
+  taskDetail, 
+  onComplete 
+}: {
+  taskDetail: GroupTaskDetail;
+  onComplete: () => void;
+}) {
+  const [groups, setGroups] = useState<Group[]>(taskDetail.groups);
+  const [currentGroupIndex, setCurrentGroupIndex] = useState(taskDetail.currentGroupIndex);
+  const [status, setStatus] = useState<'preparing' | 'creating' | 'completed'>(taskDetail.status as any);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    // 模拟建群进度更新
+    if (status === 'creating' && currentGroupIndex < groups.length) {
+      const timer = setTimeout(() => {
+        if (currentGroupIndex === groups.length - 1) {
+          setStatus('completed');
+          onComplete();
+        } else {
+          setCurrentGroupIndex((prev) => prev + 1);
+        }
+      }, 3000);
+      return () => clearTimeout(timer);
+    }
+  }, [status, currentGroupIndex, groups.length, onComplete]);
+
+  const handleRetryGroup = (groupIndex: number) => {
+    // 模拟重试逻辑
+    setGroups((prev) =>
+      prev.map((group, index) => {
+        if (index === groupIndex) {
+          return {
+            ...group,
+            members: [
+              ...group.members,
+              {
+                id: `retry-member-${Date.now()}`,
+                nickname: `补充用户${group.members.length + 1}`,
+                wechatId: `wx_retry_${Date.now()}`,
+                tags: ['新加入'],
+              },
+            ],
+          };
+        }
+        return group;
+      }),
+    );
+  };
+
+  return (
+    <div className="space-y-4">
+      <Card>
+        <CardHeader className="pb-2">
+          <div className="flex items-center justify-between">
+            <CardTitle className="text-lg font-medium">
+              建群进度
+              <Badge className="ml-2">
+                {status === "preparing" ? "准备中" : status === "creating" ? "创建中" : "已完成"}
+              </Badge>
+            </CardTitle>
+            <div className="text-sm text-gray-500">
+              {currentGroupIndex + 1}/{groups.length}组
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <Progress value={Math.round(((currentGroupIndex + 1) / groups.length) * 100)} className="h-2" />
+        </CardContent>
+      </Card>
+
+      {error && (
+        <Alert variant="destructive">
+          <AlertCircle className="h-4 w-4" />
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      )}
+
+      <ScrollArea className="h-[calc(100vh-400px)]">
+        <div className="space-y-4">
+          {groups.map((group, index) => (
+            <GroupPreview
+              key={group.id}
+              groupIndex={index}
+              members={group.members}
+              isCreating={status === "creating" && index === currentGroupIndex}
+              isCompleted={status === "completed" || index < currentGroupIndex}
+              onRetry={() => handleRetryGroup(index)}
+            />
+          ))}
+        </div>
+      </ScrollArea>
+
+      {status === "completed" && (
+        <Alert>
+          <CheckCircle2 className="h-4 w-4" />
+          <AlertDescription>所有群组已创建完成</AlertDescription>
+        </Alert>
+      )}
+    </div>
+  );
+}
 
 export default function AutoGroupDetail() {
-  const { id } = useParams();
-  return <div>分组详情页，当前ID: {id}</div>;
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const { toast } = useToast();
+  const [loading, setLoading] = useState(true);
+  const [taskDetail, setTaskDetail] = useState<GroupTaskDetail | null>(null);
+
+  // 模拟获取任务详情
+  useEffect(() => {
+    const fetchTaskDetail = async () => {
+      setLoading(true);
+      try {
+        // 模拟API调用
+        await new Promise(resolve => setTimeout(resolve, 1000));
+        
+        // 模拟数据
+        const mockTaskDetail: GroupTaskDetail = {
+          id: id || '1',
+          name: 'VIP客户建群',
+          status: 'creating',
+          totalGroups: 5,
+          currentGroupIndex: 2,
+          groups: Array.from({ length: 5 }).map((_, index) => ({
+            id: `group-${index}`,
+            members: Array.from({ length: Math.floor(Math.random() * 10) + 30 }).map((_, mIndex) => ({
+              id: `member-${index}-${mIndex}`,
+              nickname: `用户${mIndex + 1}`,
+              wechatId: `wx_${mIndex}`,
+              tags: [`标签${(mIndex % 3) + 1}`],
+            })),
+          })),
+          createTime: '2024-11-20 19:04:14',
+          lastUpdateTime: '2025-02-06 13:12:35',
+          creator: 'admin',
+          deviceCount: 2,
+          targetFriends: 156,
+          groupSize: { min: 20, max: 50 },
+          timeRange: { start: '09:00', end: '21:00' },
+          targetTags: ['VIP客户', '高价值'],
+          groupNameTemplate: 'VIP客户交流群{序号}',
+          groupDescription: 'VIP客户专属交流群，提供优质服务',
+        };
+        
+        setTaskDetail(mockTaskDetail);
+      } catch (error) {
+        console.error('获取任务详情失败:', error);
+        toast({
+          title: '获取任务详情失败',
+          description: '请稍后重试',
+          variant: 'destructive',
+        });
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (id) {
+      fetchTaskDetail();
+    }
+  }, [id, toast]);
+
+  const handleComplete = () => {
+    toast({
+      title: '建群完成',
+      description: '所有群组已创建完成',
+    });
+  };
+
+  if (loading) {
+    return (
+      <Layout
+        header={
+          <PageHeader
+            title="建群详情"
+            defaultBackPath="/workspace/auto-group"
+          />
+        }
+      >
+        <div className="bg-gray-50 min-h-screen pb-20">
+          <div className="p-4">
+            <div className="flex items-center justify-center h-64">
+              <div className="text-center">
+                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-2"></div>
+                <div className="text-gray-500">加载中...</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Layout>
+    );
+  }
+
+  if (!taskDetail) {
+    return (
+      <Layout
+        header={
+          <PageHeader
+            title="建群详情"
+            defaultBackPath="/workspace/auto-group"
+          />
+        }
+      >
+        <div className="bg-gray-50 min-h-screen pb-20">
+          <div className="p-4">
+            <Card className="p-8 text-center">
+              <AlertCircle 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">请检查任务ID是否正确</p>
+              <Button onClick={() => navigate('/workspace/auto-group')}>
+                返回列表
+              </Button>
+            </Card>
+          </div>
+        </div>
+      </Layout>
+    );
+  }
+
+  return (
+    <Layout
+      header={
+        <PageHeader
+          title={`${taskDetail.name} - 建群详情`}
+          defaultBackPath="/workspace/auto-group"
+        />
+      }
+    >
+      <div className="bg-gray-50 min-h-screen pb-20">
+        <div className="p-4">
+          {/* 任务基本信息 */}
+          <Card className="p-4 mb-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div>
+                <h3 className="font-medium mb-2">基本信息</h3>
+                <div className="space-y-1 text-sm text-gray-600">
+                  <div>任务名称：{taskDetail.name}</div>
+                  <div>创建时间：{taskDetail.createTime}</div>
+                  <div>创建人：{taskDetail.creator}</div>
+                  <div>执行设备：{taskDetail.deviceCount} 个</div>
+                </div>
+              </div>
+              <div>
+                <h3 className="font-medium mb-2">建群配置</h3>
+                <div className="space-y-1 text-sm text-gray-600">
+                  <div>群组规模：{taskDetail.groupSize.min}-{taskDetail.groupSize.max} 人</div>
+                  <div>执行时间：{taskDetail.timeRange.start} - {taskDetail.timeRange.end}</div>
+                  <div>目标标签：{taskDetail.targetTags.join(', ')}</div>
+                  <div>群名称模板：{taskDetail.groupNameTemplate}</div>
+                </div>
+              </div>
+            </div>
+          </Card>
+
+          {/* 建群进度 */}
+          <GroupCreationProgress 
+            taskDetail={taskDetail} 
+            onComplete={handleComplete} 
+          />
+        </div>
+      </div>
+    </Layout>
+  );
 }