faet:列表做好了，开始做其他的

nkebao/src/pages/workspace/moments-sync/MomentsSync.tsx

@@ -1,8 +1,7 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import {
   Plus,
-  Filter,
   Search,
   RefreshCw,
   MoreVertical,
@@ -11,111 +10,145 @@ import {
   Trash2,
   Eye,
   Copy,
-  ChevronDown,
-  ChevronUp,
-  Settings,
-  Calendar,
-  Users,
+  ChevronLeft,
   Share2,
-  // 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 { 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';
+import { 
+  fetchMomentsSyncTasks, 
+  deleteMomentsSyncTask, 
+  toggleMomentsSyncTask, 
+  copyMomentsSyncTask,
+  MomentsSyncTask 
+} from '@/api/momentsSync';
 
-interface SyncTask {
-  id: string;
-  name: string;
-  status: 'running' | 'paused' | 'completed';
-  deviceCount: number;
-  targetGroup: string;
-  syncCount: number;
-  lastSyncTime: string;
-  createTime: string;
-  creator: string;
-  syncInterval: number;
-  maxSyncPerDay: number;
-  timeRange: { start: string; end: string };
-  contentTypes: string[];
-  targetTags: string[];
-  syncMode: 'auto' | 'manual';
-  filterKeywords: string[];
+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>
+  );
 }
 
 export default function MomentsSync() {
   const navigate = useNavigate();
   const { toast } = useToast();
-  const [expandedTaskId, setExpandedTaskId] = useState<string | null>(null);
   const [searchTerm, setSearchTerm] = useState('');
-  const [tasks, setTasks] = useState<SyncTask[]>([
-    {
-      id: '1',
-      name: '朋友圈自动同步',
-      deviceCount: 2,
-      targetGroup: '所有好友',
-      syncCount: 45,
-      lastSyncTime: '2025-02-06 13:12:35',
-      createTime: '2024-11-20 19:04:14',
-      creator: 'admin',
-      status: 'running',
-      syncInterval: 30,
-      maxSyncPerDay: 100,
-      timeRange: { start: '08:00', end: '22:00' },
-      contentTypes: ['text', 'image', 'video'],
-      targetTags: ['重要客户', '活跃用户'],
-      syncMode: 'auto',
-      filterKeywords: ['产品', '服务', '优惠'],
-    },
-    {
-      id: '2',
-      name: '营销内容同步',
-      deviceCount: 1,
-      targetGroup: '目标客户',
-      syncCount: 23,
-      lastSyncTime: '2024-03-04 14:09:35',
-      createTime: '2024-03-04 14:29:04',
-      creator: 'manager',
-      status: 'paused',
-      syncInterval: 60,
-      maxSyncPerDay: 50,
-      timeRange: { start: '09:00', end: '21:00' },
-      contentTypes: ['image', 'video'],
-      targetTags: ['潜在客户', '中意向'],
-      syncMode: 'manual',
-      filterKeywords: ['营销', '推广'],
-    },
-  ]);
+  const [loading, setLoading] = useState(false);
+  const [tasks, setTasks] = useState<MomentsSyncTask[]>([]);
 
-  const toggleExpand = (taskId: string) => {
-    setExpandedTaskId(expandedTaskId === taskId ? null : taskId);
+  // 获取任务列表
+  const fetchTasks = async () => {
+    setLoading(true);
+    try {
+      const list = await fetchMomentsSyncTasks();
+      // 确保数据字段与界面一致
+      const mappedTasks = list.map(task => ({
+        ...task,
+        // 确保字段名称和格式与界面一致
+        status: task.status || 2, // 默认为关闭状态
+        deviceCount: task.deviceCount || 0,
+        targetGroup: task.targetGroup || '默认人群',
+        syncCount: task.todaySyncCount || task.syncCount || 0,
+        creator: task.creator || '未知',
+        lastSyncTime: task.lastSyncTime || '暂无',
+        createTime: task.createTime || '未知',
+        syncInterval: task.syncInterval || 30,
+        maxSyncPerDay: task.maxSyncPerDay || 100,
+        timeRange: task.timeRange || { start: '08:00', end: '22:00' },
+        contentTypes: task.contentTypes || ['text', 'image', 'video'],
+        targetTags: task.targetTags || [],
+        syncMode: task.syncMode || 'auto',
+        filterKeywords: task.filterKeywords || [],
+        contentLib: task.contentLib || '默认内容库'
+      }));
+      setTasks(mappedTasks);
+    } catch (error) {
+      toast({ title: "获取任务失败", variant: "destructive" });
+    } finally {
+      setLoading(false);
+    }
   };
 
-  const handleDelete = (taskId: string) => {
-    const taskToDelete = tasks.find((task) => task.id === taskId);
+  // 页面加载时获取数据
+  useEffect(() => {
+    fetchTasks();
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const handleDelete = async (id: string) => {
+    const taskToDelete = tasks.find((task) => task.id === id);
     if (!taskToDelete) return;
 
     if (!window.confirm(`确定要删除"${taskToDelete.name}"吗？`)) return;
-      
-      setTasks(tasks.filter((task) => task.id !== taskId));
-      toast({
-        title: '删除成功',
-        description: '已成功删除同步任务',
-      });
+    
+    try {
+      const response = await deleteMomentsSyncTask(id);
+      if (response.code === 200) {
+        toast({ title: "删除成功" });
+        fetchTasks();
+      } else {
+        toast({ title: "删除失败", description: response.msg || "请稍后重试", variant: "destructive" });
+      }
+    } catch (error) {
+      toast({ title: "删除失败", description: "请稍后重试", variant: "destructive" });
+    }
   };
 
   const handleEdit = (taskId: string) => {
@@ -126,37 +159,52 @@ export default function MomentsSync() {
     navigate(`/workspace/moments-sync/${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 handleCopy = async (id: string) => {
+    try {
+      const response = await copyMomentsSyncTask(id);
+      if (response.code === 200) {
+        toast({ title: "复制成功" });
+        fetchTasks();
+      } else {
+        toast({ title: "复制失败", description: response.msg || "请稍后重试", variant: "destructive" });
       }
+    } catch (error) {
+      toast({ title: "复制失败", description: "请稍后重试", variant: "destructive" });
+    }
   };
 
-  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,
-      ),
+  const toggleTaskStatus = async (id: string, status: number) => {
+    // 先更新本地状态
+    const newStatus = (status === 1 ? 2 : 1) as 1 | 2;
+    setTasks(prevTasks => 
+      prevTasks.map(task => 
+        task.id === id ? { ...task, status: newStatus } : task
+      )
     );
 
-      toast({
-      title: task.status === 'running' ? '已暂停' : '已启动',
-      description: `${task.name}任务${task.status === 'running' ? '已暂停' : '已启动'}`,
-      });
+    try {
+      const response = await toggleMomentsSyncTask(id, String(newStatus));
+      if (response.code === 200) {
+        toast({ title: "操作成功" });
+        // 成功时不刷新列表，保持本地状态
+      } else {
+        // 请求失败，回退本地状态
+        setTasks(prevTasks => 
+          prevTasks.map(task => 
+            task.id === id ? { ...task, status: status as 1 | 2 } : task
+          )
+        );
+        toast({ title: "操作失败", description: response.msg || "请稍后重试", variant: "destructive" });
+      }
+    } catch (error) {
+      // 请求异常，回退本地状态
+      setTasks(prevTasks => 
+        prevTasks.map(task => 
+          task.id === id ? { ...task, status: status as 1 | 2 } : task
+        )
+      );
+      toast({ title: "操作失败", description: "请稍后重试", variant: "destructive" });
+    }
   };
 
   const handleCreateNew = () => {
@@ -167,64 +215,33 @@ export default function MomentsSync() {
     task.name.toLowerCase().includes(searchTerm.toLowerCase()),
   );
 
-  const getStatusColor = (status: string) => {
+  const getStatusText = (status: number) => {
     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':
+      case 1:
         return '进行中';
-      case 'paused':
+      case 2:
         return '已暂停';
-      case 'completed':
-        return '已完成';
       default:
         return '未知';
     }
   };
 
-  // const getStatusIcon = (status: string) => {
-  //   switch (status) {
-  //     case 'running':
-  //       return <CheckCircle className="h-4 w-4 text-green-500" />;
-  //     case 'paused':
-  //       return <XCircle className="h-4 w-4 text-gray-500" />;
-  //     case 'completed':
-  //       return <CheckCircle className="h-4 w-4 text-blue-500" />;
-  //     default:
-  //       return <XCircle className="h-4 w-4 text-gray-500" />;
-  //   }
-  // };
-
   return (
-    <Layout
-      header={
-      <PageHeader
-        title="朋友圈同步"
-        defaultBackPath="/workspace"
-        rightContent={
-            <Button onClick={handleCreateNew}>
-              <Plus className="h-4 w-4 mr-2" />
-              新建任务
+    <div className="flex-1 bg-gray-50 min-h-screen pb-20">
+      <header className="sticky top-0 z-10 bg-white border-b">
+        <div className="flex items-center justify-between p-4">
+          <div className="flex items-center space-x-3">
+            <Button variant="ghost" size="icon" onClick={() => navigate(-1)}>
+              <ChevronLeft className="h-5 w-5" />
             </Button>
-        }
-      />
-      }
-      footer={<BottomNav />}
-    >
-      <div className="bg-gray-50 min-h-screen pb-20">
+            <h1 className="text-lg font-medium">朋友圈同步</h1>
+          </div>
+          <Button onClick={handleCreateNew}>
+            <Plus className="h-4 w-4 mr-2" />新建任务
+          </Button>
+        </div>
+      </header>
       <div className="p-4">
-          {/* 搜索和筛选 */}
         <Card className="p-4 mb-4">
           <div className="flex items-center space-x-2">
             <div className="relative flex-1">
@@ -232,209 +249,78 @@ export default function MomentsSync() {
               <Input 
                 placeholder="搜索任务名称" 
                 className="pl-9" 
-                  value={searchTerm}
-                  onChange={(e) => setSearchTerm(e.target.value)}
+                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">
+            <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">
-                <Share2 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.length === 0 ? (
+            <Card className="p-8 text-center">
+              <Share2 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 variant={Number(task.status) === 1 ? "success" : "secondary"}>
+                      {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>
+                    <Switch
+                      checked={Number(task.status) === 1}
+                      onCheckedChange={() => toggleTaskStatus(task.id, Number(task.status))}
+                    />
+                    <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.targetGroup}</div>
+                    <div>推送设备：{task.deviceCount} 个</div>
+                    <div>内容库：{task.contentLib || '默认内容库'}</div>
                   </div>
                   <div className="text-sm text-gray-500">
-                      <div>已同步：{task.syncCount} 条</div>
-                      <div>创建人：{task.creator}</div>
-                    </div>
+                    <div>已同步：{task.syncCount} 条</div>
+                    <div>创建人：{task.creator}</div>
                   </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.lastSyncTime}
-                    </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 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.lastSyncTime}
                   </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.syncInterval} 秒</span>
-                            </div>
-                            <div className="flex justify-between text-sm">
-                              <span className="text-gray-500">每日最大同步数：</span>
-                              <span>{task.maxSyncPerDay} 条</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.syncMode === 'auto' ? '自动' : '手动'}</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">
-                            <Share2 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.contentTypes.map((type) => (
-                                <Badge key={type} variant="outline" className="bg-gray-50">
-                                  {type === 'text' ? '文字' : type === 'image' ? '图片' : '视频'}
-                                </Badge>
-                              ))}
-                            </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.syncCount} / {task.maxSyncPerDay}
-                              </span>
-                            </div>
-                            <Progress
-                              value={(task.syncCount / task.maxSyncPerDay) * 100}
-                              className="h-2"
-                            />
-                            {task.filterKeywords.length > 0 && (
-                              <div className="mt-2">
-                                <div className="text-sm text-gray-500 mb-1">关键词过滤：</div>
-                                <div className="flex flex-wrap gap-1">
-                                  {task.filterKeywords.map((keyword) => (
-                                    <Badge key={keyword} variant="outline" className="text-xs">
-                                      {keyword}
-                                    </Badge>
-                                  ))}
+                  <div>创建时间：{task.createTime}</div>
                 </div>
-            </div>
+              </Card>
+            ))
           )}
-        </div>
-                        </div>
-                      </div>
-            </div>
-                  )}
-                </Card>
-              ))
-            )}
-          </div>
         </div>
       </div>
-    </Layout>
+    </div>
   );
 }