【操盘手】 社群推送列表、添加、编辑

Cunkebao/app/workspace/group-push/[id]/edit/page.tsx

@@ -1,121 +1,137 @@
 "use client"
 
-import { useState, useEffect } from "react"
+import { use, useState, useEffect } from "react"
 import { useRouter } from "next/navigation"
+import { ArrowLeft } from "lucide-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 { StepIndicator } from "../../components/step-indicator"
-import { MessageEditor } from "../../components/message-editor"
-import { FriendSelector } from "../../components/friend-selector"
-import { ArrowLeft, ArrowRight, Check, Loader2 } from "lucide-react"
+import { BasicSettings } from "../../components/basic-settings"
+import { GroupSelector } from "../../components/group-selector"
+import { ContentSelector } from "../../components/content-selector"
+import type { WechatGroup, ContentLibrary } from "@/types/group-push"
 import { useToast } from "@/components/ui/use-toast"
+import { api } from "@/lib/api"
+import { showToast } from "@/lib/toast"
 
-const steps = ["推送信息", "选择好友"]
+const steps = [
+  { id: 1, title: "步骤 1", subtitle: "基础设置" },
+  { id: 2, title: "步骤 2", subtitle: "选择社群" },
+  { id: 3, title: "步骤 3", subtitle: "选择内容库" },
+  { id: 4, title: "步骤 4", subtitle: "京东联盟" },
+]
 
-// 模拟数据
-const mockPushTasks = {
-  "1": {
-    id: "1",
-    name: "618活动推广消息",
-    content: {
-      text: "618年中大促，全场商品5折起！限时抢购，先到先得！",
-      images: ["/placeholder.svg?height=200&width=200"],
-      video: null,
-      link: "https://example.com/618",
-    },
-    selectedFriends: ["1", "3", "5"],
-    pushTime: "2025-06-18 10:00:00",
-    progress: 100,
-    status: "已完成",
-  },
-  "2": {
-    id: "2",
-    name: "新品上市通知",
-    content: {
-      text: "我们的新产品已经上市，快来体验吧！",
-      images: [],
-      video: "/placeholder.svg?height=400&width=400",
-      link: null,
-    },
-    selectedFriends: ["2", "4", "6", "8"],
-    pushTime: "2025-03-25 09:30:00",
-    progress: 75,
-    status: "进行中",
-  },
-}
-
-export default function EditPushPage({ params }: { params: { id: string } }) {
+export default function EditGroupPushPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = use(params)
   const router = useRouter()
   const { toast } = useToast()
+  const [currentStep, setCurrentStep] = useState(1)
   const [loading, setLoading] = useState(true)
-  const [currentStep, setCurrentStep] = useState(0)
-  const [taskName, setTaskName] = useState("")
-  const [messageContent, setMessageContent] = useState({
-    text: "",
-    images: [],
-    video: null,
-    link: null,
+  const [formData, setFormData] = useState({
+    name: "",
+    pushTimeStart: "06:00",
+    pushTimeEnd: "23:59",
+    dailyPushCount: 20,
+    pushOrder: "latest" as "earliest" | "latest",
+    isLoopPush: false,
+    isImmediatePush: false,
+    isEnabled: false,
+    groups: [] as WechatGroup[],
+    contentLibraries: [] as ContentLibrary[],
   })
-  const [selectedFriends, setSelectedFriends] = useState<string[]>([])
 
+  // 拉取详情
   useEffect(() => {
-    // 模拟加载数据
-    setTimeout(() => {
-      const task = mockPushTasks[params.id as keyof typeof mockPushTasks]
-      if (task) {
-        setTaskName(task.name)
-        setMessageContent(task.content)
-        setSelectedFriends(task.selectedFriends)
-      }
-      setLoading(false)
-    }, 500)
-  }, [params.id])
-
-  const handleNext = () => {
-    if (currentStep === 0) {
-      // 验证第一步
-      if (!taskName.trim()) {
-        toast({
-          title: "请输入任务名称",
-          variant: "destructive",
-        })
-        return
-      }
-
-      if (!messageContent.text && messageContent.images.length === 0 && !messageContent.video && !messageContent.link) {
-        toast({
-          title: "请添加至少一种消息内容",
-          variant: "destructive",
-        })
-        return
+    const fetchDetail = async () => {
+      setLoading(true)
+      try {
+        const res = await api.get(`/v1/workbench/detail?id=${id}`) as any
+        if (res.code === 200 && res.data) {
+          const data = res.data
+          setFormData({
+            name: data.name || "",
+            pushTimeStart: data.config?.startTime || "06:00",
+            pushTimeEnd: data.config?.endTime || "23:59",
+            dailyPushCount: data.config?.maxPerDay || 20,
+            pushOrder: data.config?.pushOrder === 2 ? "latest" : "earliest",
+            isLoopPush: data.config?.isLoop === 1,
+            isImmediatePush: false, // 详情接口如有此字段可补充
+            isEnabled: data.status === 1,
+            groups: (data.config.groupList || []).map((item: any) => ({
+              id: String(item.id),
+              name: item.groupName,
+              avatar: item.groupAvatar || item.avatar,
+              serviceAccount: {
+                id: item.ownerWechatId,
+                name: item.nickName,
+                avatar: "",
+              },
+            })),
+            contentLibraries: (data.config.contentLibraryList || []).map((item: any) => ({
+              id: String(item.id),
+              name: item.name,
+              sourceType: item.sourceType,
+              selectedFriends: item.selectedFriends || [],
+              selectedGroups: item.selectedGroups || [],
+            })),
+          })
+        } else {
+          showToast(res.msg || "获取详情失败", "error")
+        }
+      } catch (e) {
+        showToast((e as any)?.message || "网络错误", "error")
+      } finally {
+        setLoading(false)
       }
     }
+    fetchDetail()
+    // eslint-disable-next-line
+  }, [id])
 
-    setCurrentStep((prev) => prev + 1)
+  const handleBasicSettingsNext = (values: any) => {
+    setFormData((prev) => ({ ...prev, ...values }))
+    setCurrentStep(2)
   }
 
-  const handlePrevious = () => {
-    setCurrentStep((prev) => prev - 1)
+  const handleGroupsChange = (groups: WechatGroup[]) => {
+    setFormData((prev) => ({ ...prev, groups }))
   }
 
-  const handleSubmit = () => {
-    if (selectedFriends.length === 0) {
-      toast({
-        title: "请选择至少一个好友",
-        variant: "destructive",
-      })
-      return
+  const handleLibrariesChange = (contentLibraries: ContentLibrary[]) => {
+    setFormData((prev) => ({ ...prev, contentLibraries }))
+  }
+
+  const handleSave = async () => {
+    const loadingToast = showToast("正在保存...", "loading", true)
+    try {
+      const paramsData = {
+        id,
+        name: formData.name,
+        type: 3,
+        pushType: 1,
+        startTime: formData.pushTimeStart,
+        endTime: formData.pushTimeEnd,
+        maxPerDay: formData.dailyPushCount,
+        pushOrder: formData.pushOrder === "latest" ? 2 : 1,
+        isLoop: formData.isLoopPush ? 1 : 0,
+        status: formData.isEnabled ? 1 : 0,
+        groups: (formData.groups || []).filter(g => g && g.id).map((g: any) => g.id),
+        contentLibraries: (formData.contentLibraries || []).filter(c => c && c.id).map((c: any) => c.id),
+      }
+      const res = await api.post("/v1/workbench/update", paramsData) as any
+      loadingToast.remove()
+      if (res.code === 200) {
+        showToast("保存成功", "success")
+        router.push("/workspace/group-push")
+      } else {
+        showToast(res.msg || "保存失败", "error")
+      }
+    } catch (e) {
+      loadingToast.remove()
+      showToast((e as any)?.message || "网络错误", "error")
     }
+  }
 
-    // 模拟提交
-    toast({
-      title: "推送任务更新成功",
-      description: `已更新推送任务 "${taskName}"`,
-    })
-
-    // 跳转回列表页
+  const handleCancel = () => {
     router.push("/workspace/group-push")
   }
 
@@ -123,7 +139,7 @@ export default function EditPushPage({ params }: { params: { id: string } }) {
     return (
       <div className="container mx-auto py-6 flex justify-center items-center min-h-[60vh]">
         <div className="flex flex-col items-center">
-          <Loader2 className="h-8 w-8 animate-spin text-blue-500" />
+          <span className="animate-spin h-8 w-8 text-blue-500">⏳</span>
           <p className="mt-2 text-gray-500">加载中...</p>
         </div>
       </div>
@@ -131,62 +147,77 @@ export default function EditPushPage({ params }: { params: { id: string } }) {
   }
 
   return (
-    <div className="container mx-auto py-6">
-      {/* 顶部导航栏 */}
-      <div className="flex items-center justify-between mb-6 relative">
-        <Button variant="ghost" size="icon" onClick={() => router.push("/workspace/group-push")} className="mr-auto">
+    <div className="container mx-auto py-4 px-4 sm:px-6 md:py-6">
+      <div className="flex items-center mb-6">
+        <Button variant="ghost" size="icon" onClick={() => router.push("/workspace/group-push")} className="mr-2">
           <ArrowLeft className="h-5 w-5" />
         </Button>
-        <h1 className="text-2xl font-bold absolute left-1/2 transform -translate-x-1/2">编辑推送</h1>
-        <div className="w-10"></div> {/* 占位元素，保持标题居中 */}
+        <h1 className="text-xl font-bold">编辑社群推送任务</h1>
       </div>
 
       <StepIndicator currentStep={currentStep} steps={steps} />
 
-      <Card>
-        <CardContent className="pt-6">
-          {currentStep === 0 ? (
-            <div className="space-y-6">
-              <div>
-                <Label htmlFor="task-name">任务名称</Label>
-                <Input
-                  id="task-name"
-                  placeholder="请输入任务名称"
-                  value={taskName}
-                  onChange={(e) => setTaskName(e.target.value)}
-                />
-              </div>
+      <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}
+          />
+        )}
 
-              <div>
-                <Label>消息内容</Label>
-                <MessageEditor onMessageChange={setMessageContent} defaultValues={messageContent} />
-              </div>
+        {currentStep === 2 && (
+          <GroupSelector
+            selectedGroups={formData.groups}
+            onGroupsChange={handleGroupsChange}
+            onPrevious={() => setCurrentStep(1)}
+            onNext={() => setCurrentStep(3)}
+            onSave={handleSave}
+            onCancel={handleCancel}
+          />
+        )}
 
-              <div className="flex justify-end">
-                <Button onClick={handleNext}>
-                  下一步
-                  <ArrowRight className="ml-2 h-4 w-4" />
-                </Button>
-              </div>
+        {currentStep === 3 && (
+          <ContentSelector
+            selectedLibraries={formData.contentLibraries}
+            onLibrariesChange={handleLibrariesChange}
+            onPrevious={() => setCurrentStep(2)}
+            onNext={() => setCurrentStep(4)}
+            onSave={handleSave}
+            onCancel={handleCancel}
+          />
+        )}
+
+        {currentStep === 4 && (
+          <div className="space-y-6">
+            <div className="border rounded-md p-8 text-center text-gray-500">
+              京东联盟设置（此步骤为占位，实际功能待开发）
             </div>
-          ) : (
-            <div className="space-y-6">
-              <FriendSelector onSelectionChange={setSelectedFriends} defaultSelectedFriendIds={selectedFriends} />
 
-              <div className="flex justify-between">
-                <Button variant="outline" onClick={handlePrevious}>
-                  <ArrowLeft className="mr-2 h-4 w-4" />
-                  上一步
-                </Button>
-                <Button onClick={handleSubmit}>
-                  <Check className="mr-2 h-4 w-4" />
-                  确认
-                </Button>
-              </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">
+                上一步
+              </Button>
+              <Button type="button" onClick={handleSave} className="flex-1 sm:flex-none">
+                完成
+              </Button>
+              <Button type="button" variant="outline" onClick={handleCancel} className="flex-1 sm:flex-none">
+                取消
+              </Button>
             </div>
-          )}
-        </CardContent>
-      </Card>
+          </div>
+        )}
+      </div>
     </div>
   )
 }