存客宝 React

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

@@ -0,0 +1,193 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { useRouter } from "next/navigation"
+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 { useToast } from "@/components/ui/use-toast"
+
+const steps = ["推送信息", "选择好友"]
+
+// 模拟数据
+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 } }) {
+  const router = useRouter()
+  const { toast } = useToast()
+  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 [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
+      }
+    }
+
+    setCurrentStep((prev) => prev + 1)
+  }
+
+  const handlePrevious = () => {
+    setCurrentStep((prev) => prev - 1)
+  }
+
+  const handleSubmit = () => {
+    if (selectedFriends.length === 0) {
+      toast({
+        title: "请选择至少一个好友",
+        variant: "destructive",
+      })
+      return
+    }
+
+    // 模拟提交
+    toast({
+      title: "推送任务更新成功",
+      description: `已更新推送任务 "${taskName}"`,
+    })
+
+    // 跳转回列表页
+    router.push("/workspace/group-push")
+  }
+
+  if (loading) {
+    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" />
+          <p className="mt-2 text-gray-500">加载中...</p>
+        </div>
+      </div>
+    )
+  }
+
+  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">
+          <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> {/* 占位元素，保持标题居中 */}
+      </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>
+                <Label>消息内容</Label>
+                <MessageEditor onMessageChange={setMessageContent} defaultValues={messageContent} />
+              </div>
+
+              <div className="flex justify-end">
+                <Button onClick={handleNext}>
+                  下一步
+                  <ArrowRight className="ml-2 h-4 w-4" />
+                </Button>
+              </div>
+            </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>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+

Cunkebao/app/workspace/group-push/components/basic-settings.tsx

@@ -0,0 +1,219 @@
+"use client"
+
+import { 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
+}
+
+export function BasicSettings({
+  defaultValues = {
+    name: "",
+    pushTimeStart: "06:00",
+    pushTimeEnd: "23:59",
+    dailyPushCount: 20,
+    pushOrder: "latest",
+    isLoopPush: false,
+    isImmediatePush: false,
+    isEnabled: false,
+  },
+  onNext,
+  onSave,
+  onCancel,
+}: 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"
+                >
+                  <Minus className="h-4 w-4" />
+                </Button>
+                <Input
+                  type="number"
+                  value={values.dailyPushCount}
+                  onChange={(e) => handleChange("dailyPushCount", Number.parseInt(e.target.value) || 1)}
+                  className="w-20 text-center"
+                  min="1"
+                />
+                <Button
+                  variant="outline"
+                  size="icon"
+                  type="button"
+                  onClick={() => handleCountChange(true)}
+                  className="h-9 w-9"
+                >
+                  <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")}
+                >
+                  按最早
+                </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")}
+                >
+                  按最新
+                </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)}
+                />
+                <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)}
+                />
+                <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)}
+                />
+                <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">
+          下一步
+        </Button>
+        <Button type="button" variant="outline" onClick={() => onSave(values)} className="flex-1 sm:flex-none">
+          保存
+        </Button>
+        <Button type="button" variant="outline" onClick={onCancel} className="flex-1 sm:flex-none">
+          取消
+        </Button>
+      </div>
+    </div>
+  )
+}
+

Cunkebao/app/workspace/group-push/components/content-selector.tsx

@@ -0,0 +1,224 @@
+"use client"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Input } from "@/components/ui/input"
+import { Search, Plus, Trash2 } from "lucide-react"
+import type { ContentLibrary } from "@/types/group-push"
+
+// 模拟数据
+const mockContentLibraries: ContentLibrary[] = [
+  {
+    id: "1",
+    name: "测试11",
+    targets: [{ id: "t1", avatar: "/placeholder.svg?height=40&width=40" }],
+  },
+  {
+    id: "2",
+    name: "测试166666",
+    targets: [
+      { id: "t2", avatar: "/placeholder.svg?height=40&width=40" },
+      { id: "t3", avatar: "/placeholder.svg?height=40&width=40" },
+      { id: "t4", avatar: "/placeholder.svg?height=40&width=40" },
+    ],
+  },
+  {
+    id: "3",
+    name: "产品介绍",
+    targets: [
+      { id: "t5", avatar: "/placeholder.svg?height=40&width=40" },
+      { id: "t6", avatar: "/placeholder.svg?height=40&width=40" },
+    ],
+  },
+]
+
+interface ContentSelectorProps {
+  selectedLibraries: ContentLibrary[]
+  onLibrariesChange: (libraries: ContentLibrary[]) => void
+  onPrevious: () => void
+  onNext: () => void
+  onSave: () => void
+  onCancel: () => void
+}
+
+export function ContentSelector({
+  selectedLibraries = [],
+  onLibrariesChange,
+  onPrevious,
+  onNext,
+  onSave,
+  onCancel,
+}: ContentSelectorProps) {
+  const [isDialogOpen, setIsDialogOpen] = useState(false)
+  const [searchTerm, setSearchTerm] = useState("")
+
+  const handleAddLibrary = (library: ContentLibrary) => {
+    if (!selectedLibraries.some((l) => l.id === library.id)) {
+      onLibrariesChange([...selectedLibraries, library])
+    }
+    setIsDialogOpen(false)
+  }
+
+  const handleRemoveLibrary = (libraryId: string) => {
+    onLibrariesChange(selectedLibraries.filter((library) => library.id !== libraryId))
+  }
+
+  const filteredLibraries = mockContentLibraries.filter((library) =>
+    library.name.toLowerCase().includes(searchTerm.toLowerCase()),
+  )
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardContent className="p-4 sm:p-6">
+          <div className="space-y-4">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center">
+                <span className="text-red-500 mr-1">*</span>
+                <span className="font-medium text-sm">选择内容库:</span>
+              </div>
+              <Button variant="default" size="sm" onClick={() => setIsDialogOpen(true)} className="flex items-center">
+                <Plus className="h-4 w-4 mr-1" />
+                选择内容库
+              </Button>
+            </div>
+
+            <div className="overflow-x-auto">
+              {selectedLibraries.length > 0 ? (
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead className="w-16">序号</TableHead>
+                      <TableHead>内容库名称</TableHead>
+                      <TableHead>采集对象</TableHead>
+                      <TableHead className="w-20">操作</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {selectedLibraries.map((library, index) => (
+                      <TableRow key={library.id}>
+                        <TableCell>{index + 1}</TableCell>
+                        <TableCell>{library.name}</TableCell>
+                        <TableCell>
+                          <div className="flex -space-x-2 flex-wrap">
+                            {library.targets.map((target) => (
+                              <div
+                                key={target.id}
+                                className="w-10 h-10 rounded-md overflow-hidden border-2 border-white"
+                              >
+                                <img
+                                  src={target.avatar || "/placeholder.svg?height=40&width=40"}
+                                  alt="Target"
+                                  className="w-full h-full object-cover"
+                                />
+                              </div>
+                            ))}
+                          </div>
+                        </TableCell>
+                        <TableCell>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            onClick={() => handleRemoveLibrary(library.id)}
+                            className="text-red-500 hover:text-red-700 hover:bg-red-50"
+                          >
+                            <Trash2 className="h-5 w-5" />
+                          </Button>
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              ) : (
+                <div className="border rounded-md p-8 text-center text-gray-500">请点击"选择内容库"按钮添加内容库</div>
+              )}
+            </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">
+          上一步
+        </Button>
+        <Button type="button" onClick={onNext} className="flex-1 sm:flex-none">
+          下一步
+        </Button>
+        <Button type="button" variant="outline" onClick={onSave} className="flex-1 sm:flex-none">
+          保存
+        </Button>
+        <Button type="button" variant="outline" onClick={onCancel} className="flex-1 sm:flex-none">
+          取消
+        </Button>
+      </div>
+
+      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+        <DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>选择内容库</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div className="relative">
+              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
+              <Input
+                placeholder="搜索内容库名称"
+                className="pl-8"
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+              />
+            </div>
+
+            <div className="overflow-x-auto">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead className="w-16">序号</TableHead>
+                    <TableHead>内容库名称</TableHead>
+                    <TableHead>采集对象</TableHead>
+                    <TableHead className="w-20">操作</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {filteredLibraries.map((library, index) => (
+                    <TableRow key={library.id}>
+                      <TableCell>{index + 1}</TableCell>
+                      <TableCell>{library.name}</TableCell>
+                      <TableCell>
+                        <div className="flex -space-x-2 flex-wrap">
+                          {library.targets.map((target) => (
+                            <div key={target.id} className="w-10 h-10 rounded-md overflow-hidden border-2 border-white">
+                              <img
+                                src={target.avatar || "/placeholder.svg?height=40&width=40"}
+                                alt="Target"
+                                className="w-full h-full object-cover"
+                              />
+                            </div>
+                          ))}
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => handleAddLibrary(library)}
+                          disabled={selectedLibraries.some((l) => l.id === library.id)}
+                          className="whitespace-nowrap"
+                        >
+                          {selectedLibraries.some((l) => l.id === library.id) ? "已选择" : "选择"}
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
+

Cunkebao/app/workspace/group-push/components/friend-selector.tsx

@@ -0,0 +1,347 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Search, Check, Smartphone } from "lucide-react"
+
+// 模拟数据
+const mockDevices = [
+  { id: "1", name: "iPhone 13 Pro", online: true },
+  { id: "2", name: "Xiaomi 12", online: true },
+  { id: "3", name: "Samsung Galaxy S22", online: false },
+  { id: "4", name: "OPPO Find X5", online: true },
+]
+
+const mockFriends = [
+  {
+    id: "1-friend-1",
+    deviceId: "1",
+    name: "张三",
+    avatar: "/placeholder.svg?height=40&width=40",
+    tags: ["同事", "重要"],
+    region: "北京",
+  },
+  {
+    id: "1-friend-2",
+    deviceId: "1",
+    name: "李四",
+    avatar: "/placeholder.svg?height=40&width=40",
+    tags: ["朋友"],
+    region: "上海",
+  },
+  {
+    id: "1-friend-3",
+    deviceId: "1",
+    name: "王五",
+    avatar: "/placeholder.svg?height=40&width=40",
+    tags: ["家人"],
+    region: "广州",
+  },
+  {
+    id: "1-friend-4",
+    deviceId: "1",
+    name: "赵六",
+    avatar: "/placeholder.svg?height=40&width=40",
+    tags: ["客户", "重要"],
+    region: "深圳",
+  },
+  {
+    id: "2-friend-1",
+    deviceId: "2",
+    name: "陈一",
+    avatar: "/placeholder.svg?height=40&width=40",
+    tags: ["同学"],
+    region: "北京",
+  },
+  {
+    id: "2-friend-2",
+    deviceId: "2",
+    name: "杨二",
+    avatar: "/placeholder.svg?height=40&width=40",
+    tags: ["朋友", "重要"],
+    region: "上海",
+  },
+  {
+    id: "2-friend-3",
+    deviceId: "2",
+    name: "刘三",
+    avatar: "/placeholder.svg?height=40&width=40",
+    tags: ["同事"],
+    region: "广州",
+  },
+  {
+    id: "3-friend-1",
+    deviceId: "3",
+    name: "周七",
+    avatar: "/placeholder.svg?height=40&width=40",
+    tags: ["客户"],
+    region: "北京",
+  },
+  {
+    id: "3-friend-2",
+    deviceId: "3",
+    name: "吴八",
+    avatar: "/placeholder.svg?height=40&width=40",
+    tags: ["朋友"],
+    region: "上海",
+  },
+  {
+    id: "3-friend-3",
+    deviceId: "3",
+    name: "郑九",
+    avatar: "/placeholder.svg?height=40&width=40",
+    tags: ["家人", "重要"],
+    region: "广州",
+  },
+  {
+    id: "4-friend-1",
+    deviceId: "4",
+    name: "冯十",
+    avatar: "/placeholder.svg?height=40&width=40",
+    tags: ["同事"],
+    region: "深圳",
+  },
+  {
+    id: "4-friend-2",
+    deviceId: "4",
+    name: "蒋十一",
+    avatar: "/placeholder.svg?height=40&width=40",
+    tags: ["朋友"],
+    region: "北京",
+  },
+]
+
+interface Friend {
+  id: string
+  deviceId: string
+  name: string
+  avatar: string
+  tags: string[]
+  region: string
+}
+
+interface FriendSelectorProps {
+  onSelectionChange: (friends: Friend[]) => void
+  defaultSelectedFriendIds?: string[]
+}
+
+export function FriendSelector({ onSelectionChange, defaultSelectedFriendIds = [] }: FriendSelectorProps) {
+  const [selectedDevices, setSelectedDevices] = useState<string[]>([])
+  const [selectedFriendIds, setSelectedFriendIds] = useState<string[]>(defaultSelectedFriendIds)
+  const [searchQuery, setSearchQuery] = useState("")
+  const [selectedTag, setSelectedTag] = useState<string>("all")
+  const [selectedRegion, setSelectedRegion] = useState<string>("all")
+
+  // 获取所有可用的标签和地区
+  const allTags = Array.from(new Set(mockFriends.flatMap((friend) => friend.tags)))
+  const allRegions = Array.from(new Set(mockFriends.map((friend) => friend.region)))
+
+  // 根据选择的设备过滤好友
+  const filteredFriends = mockFriends
+    .filter((friend) => {
+      // 如果没有选择设备，显示所有好友
+      if (selectedDevices.length === 0) return true
+
+      // 只显示选中设备的好友
+      return selectedDevices.includes(friend.deviceId)
+    })
+    .filter((friend) => {
+      // 搜索过滤
+      if (searchQuery) {
+        return friend.name.toLowerCase().includes(searchQuery.toLowerCase())
+      }
+      return true
+    })
+    .filter((friend) => {
+      // 标签过滤
+      if (selectedTag !== "all") {
+        return friend.tags.includes(selectedTag)
+      }
+      return true
+    })
+    .filter((friend) => {
+      // 地区过滤
+      if (selectedRegion !== "all") {
+        return friend.region === selectedRegion
+      }
+      return true
+    })
+
+  // 当选择的好友ID变化时，通知父组件
+  useEffect(() => {
+    const selectedFriends = mockFriends.filter((friend) => selectedFriendIds.includes(friend.id))
+    onSelectionChange(selectedFriends)
+  }, [selectedFriendIds, onSelectionChange])
+
+  const toggleDeviceSelection = (deviceId: string) => {
+    setSelectedDevices((prev) => {
+      if (prev.includes(deviceId)) {
+        return prev.filter((id) => id !== deviceId)
+      } else {
+        return [...prev, deviceId]
+      }
+    })
+  }
+
+  const toggleFriendSelection = (friendId: string) => {
+    setSelectedFriendIds((prev) => {
+      if (prev.includes(friendId)) {
+        return prev.filter((id) => id !== friendId)
+      } else {
+        return [...prev, friendId]
+      }
+    })
+  }
+
+  const selectAllFriends = () => {
+    setSelectedFriendIds(filteredFriends.map((friend) => friend.id))
+  }
+
+  const deselectAllFriends = () => {
+    setSelectedFriendIds([])
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* 设备选择 */}
+      <div>
+        <Label className="mb-2 block">选择设备</Label>
+        <div className="flex flex-wrap gap-2">
+          {mockDevices.map((device) => (
+            <Button
+              key={device.id}
+              variant={selectedDevices.includes(device.id) ? "default" : "outline"}
+              size="sm"
+              onClick={() => toggleDeviceSelection(device.id)}
+              className="flex items-center gap-1"
+              disabled={!device.online}
+            >
+              <Smartphone className="h-4 w-4" />
+              {device.name}
+              {selectedDevices.includes(device.id) && <Check className="h-3 w-3 ml-1" />}
+              {!device.online && <span className="text-xs ml-1 text-gray-500">(离线)</span>}
+            </Button>
+          ))}
+        </div>
+      </div>
+
+      {/* 好友筛选 */}
+      <div className="flex flex-wrap gap-3">
+        <div className="flex-1 min-w-[200px]">
+          <Label htmlFor="search" className="mb-2 block">
+            搜索好友
+          </Label>
+          <div className="relative">
+            <Search className="absolute left-2 top-2.5 h-4 w-4 text-gray-400" />
+            <Input
+              id="search"
+              placeholder="输入好友名称"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="pl-8"
+            />
+          </div>
+        </div>
+
+        <div className="w-40">
+          <Label htmlFor="tag-filter" className="mb-2 block">
+            标签筛选
+          </Label>
+          <Select value={selectedTag} onValueChange={setSelectedTag}>
+            <SelectTrigger id="tag-filter">
+              <SelectValue placeholder="选择标签" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">全部标签</SelectItem>
+              {allTags.map((tag) => (
+                <SelectItem key={tag} value={tag}>
+                  {tag}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="w-40">
+          <Label htmlFor="region-filter" className="mb-2 block">
+            地区筛选
+          </Label>
+          <Select value={selectedRegion} onValueChange={setSelectedRegion}>
+            <SelectTrigger id="region-filter">
+              <SelectValue placeholder="选择地区" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">全部地区</SelectItem>
+              {allRegions.map((region) => (
+                <SelectItem key={region} value={region}>
+                  {region}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      {/* 好友列表 */}
+      <div>
+        <div className="flex justify-between items-center mb-2">
+          <Label className="font-medium">好友列表 ({filteredFriends.length})</Label>
+          <div className="flex gap-2">
+            <Button variant="outline" size="sm" onClick={selectAllFriends}>
+              全选
+            </Button>
+            <Button variant="outline" size="sm" onClick={deselectAllFriends}>
+              取消全选
+            </Button>
+          </div>
+        </div>
+
+        <div className="border rounded-md overflow-hidden">
+          <div className="max-h-[300px] overflow-y-auto p-1">
+            {filteredFriends.length > 0 ? (
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
+                {filteredFriends.map((friend) => (
+                  <div
+                    key={friend.id}
+                    className={`flex items-center gap-2 p-2 rounded-md border ${
+                      selectedFriendIds.includes(friend.id) ? "bg-blue-50 border-blue-200" : "border-gray-200"
+                    }`}
+                  >
+                    <Checkbox
+                      id={`friend-${friend.id}`}
+                      checked={selectedFriendIds.includes(friend.id)}
+                      onCheckedChange={() => toggleFriendSelection(friend.id)}
+                    />
+                    <img src={friend.avatar || "/placeholder.svg"} alt={friend.name} className="w-8 h-8 rounded-full" />
+                    <div className="flex-1 min-w-0">
+                      <div className="font-medium truncate">{friend.name}</div>
+                      <div className="text-xs text-gray-500 truncate">{friend.region}</div>
+                    </div>
+                    {friend.tags.length > 0 && (
+                      <div className="flex flex-wrap gap-1">
+                        {friend.tags.map((tag) => (
+                          <span key={tag} className="px-1.5 py-0.5 bg-gray-100 text-gray-700 rounded text-xs">
+                            {tag}
+                          </span>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className="text-center py-8 text-gray-500">没有找到符合条件的好友</div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div className="text-sm text-gray-500">已选择 {selectedFriendIds.length} 位好友</div>
+    </div>
+  )
+}
+

Cunkebao/app/workspace/group-push/components/group-selector.tsx

@@ -0,0 +1,254 @@
+"use client"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Card, CardContent } from "@/components/ui/card"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Search, Plus, Trash2 } from "lucide-react"
+import type { WechatGroup } from "@/types/group-push"
+
+// 模拟数据
+const mockGroups: WechatGroup[] = [
+  {
+    id: "1",
+    name: "快捷语",
+    avatar: "/placeholder.svg?height=40&width=40",
+    serviceAccount: {
+      id: "sa1",
+      name: "贝蒂喜品牌wxid_rtlwsjytjk1991",
+      avatar: "/placeholder.svg?height=40&width=40",
+    },
+  },
+  {
+    id: "2",
+    name: "产品交流群",
+    avatar: "/placeholder.svg?height=40&width=40",
+    serviceAccount: {
+      id: "sa1",
+      name: "贝蒂喜品牌wxid_rtlwsjytjk1991",
+      avatar: "/placeholder.svg?height=40&width=40",
+    },
+  },
+  {
+    id: "3",
+    name: "客户服务群",
+    avatar: "/placeholder.svg?height=40&width=40",
+    serviceAccount: {
+      id: "sa2",
+      name: "客服小助手wxid_abc123",
+      avatar: "/placeholder.svg?height=40&width=40",
+    },
+  },
+]
+
+interface GroupSelectorProps {
+  selectedGroups: WechatGroup[]
+  onGroupsChange: (groups: WechatGroup[]) => void
+  onPrevious: () => void
+  onNext: () => void
+  onSave: () => void
+  onCancel: () => void
+}
+
+export function GroupSelector({
+  selectedGroups = [],
+  onGroupsChange,
+  onPrevious,
+  onNext,
+  onSave,
+  onCancel,
+}: GroupSelectorProps) {
+  const [isDialogOpen, setIsDialogOpen] = useState(false)
+  const [searchTerm, setSearchTerm] = useState("")
+  const [serviceFilter, setServiceFilter] = useState("")
+
+  const handleAddGroup = (group: WechatGroup) => {
+    if (!selectedGroups.some((g) => g.id === group.id)) {
+      onGroupsChange([...selectedGroups, group])
+    }
+    setIsDialogOpen(false)
+  }
+
+  const handleRemoveGroup = (groupId: string) => {
+    onGroupsChange(selectedGroups.filter((group) => group.id !== groupId))
+  }
+
+  const filteredGroups = mockGroups.filter((group) => {
+    const matchesSearch = group.name.toLowerCase().includes(searchTerm.toLowerCase())
+    const matchesService = !serviceFilter || group.serviceAccount.name.includes(serviceFilter)
+    return matchesSearch && matchesService
+  })
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardContent className="p-4 sm:p-6">
+          <div className="space-y-4">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center">
+                <span className="text-red-500 mr-1">*</span>
+                <span className="font-medium text-sm">推送社群:</span>
+              </div>
+              <Button variant="default" size="sm" onClick={() => setIsDialogOpen(true)} className="flex items-center">
+                <Plus className="h-4 w-4 mr-1" />
+                选择微信聊天群
+              </Button>
+            </div>
+
+            <div className="overflow-x-auto">
+              {selectedGroups.length > 0 ? (
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead className="w-16">序号</TableHead>
+                      <TableHead>群信息</TableHead>
+                      <TableHead>推送客服</TableHead>
+                      <TableHead className="w-20">操作</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {selectedGroups.map((group, index) => (
+                      <TableRow key={group.id}>
+                        <TableCell>{index + 1}</TableCell>
+                        <TableCell>
+                          <div className="flex items-center space-x-2">
+                            <div className="w-8 h-8 rounded overflow-hidden flex-shrink-0">
+                              <img
+                                src={group.avatar || "/placeholder.svg?height=32&width=32"}
+                                alt={group.name}
+                                className="w-full h-full object-cover"
+                              />
+                            </div>
+                            <span className="text-sm truncate">{group.name}</span>
+                          </div>
+                        </TableCell>
+                        <TableCell>
+                          <div className="flex items-center space-x-2">
+                            <div className="flex -space-x-2 flex-shrink-0">
+                              <div className="w-8 h-8 rounded-full overflow-hidden border-2 border-white">
+                                <img
+                                  src={group.serviceAccount.avatar || "/placeholder.svg?height=32&width=32"}
+                                  alt={group.serviceAccount.name}
+                                  className="w-full h-full object-cover"
+                                />
+                              </div>
+                            </div>
+                            <span className="text-xs truncate">{group.serviceAccount.name}</span>
+                          </div>
+                        </TableCell>
+                        <TableCell>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            onClick={() => handleRemoveGroup(group.id)}
+                            className="text-red-500 hover:text-red-700 hover:bg-red-50"
+                          >
+                            <Trash2 className="h-5 w-5" />
+                          </Button>
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              ) : (
+                <div className="border rounded-md p-8 text-center text-gray-500">
+                  请点击"选择微信聊天群"按钮添加群组
+                </div>
+              )}
+            </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">
+          上一步
+        </Button>
+        <Button type="button" onClick={onNext} className="flex-1 sm:flex-none">
+          下一步
+        </Button>
+        <Button type="button" variant="outline" onClick={onSave} className="flex-1 sm:flex-none">
+          保存
+        </Button>
+        <Button type="button" variant="outline" onClick={onCancel} className="flex-1 sm:flex-none">
+          取消
+        </Button>
+      </div>
+
+      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+        <DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>选择微信聊天群</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div className="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2">
+              <div className="relative flex-1">
+                <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
+                <Input
+                  placeholder="搜索群聊名称"
+                  className="pl-8"
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                />
+              </div>
+              <div className="sm:w-64">
+                <Input
+                  placeholder="按归属客服筛选"
+                  value={serviceFilter}
+                  onChange={(e) => setServiceFilter(e.target.value)}
+                />
+              </div>
+            </div>
+
+            <div className="overflow-x-auto">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead className="w-16">序号</TableHead>
+                    <TableHead>群信息</TableHead>
+                    <TableHead>归属客服</TableHead>
+                    <TableHead className="w-20">操作</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {filteredGroups.map((group, index) => (
+                    <TableRow key={group.id}>
+                      <TableCell>{index + 1}</TableCell>
+                      <TableCell>
+                        <div className="flex items-center space-x-2">
+                          <div className="w-8 h-8 rounded overflow-hidden flex-shrink-0">
+                            <img
+                              src={group.avatar || "/placeholder.svg?height=32&width=32"}
+                              alt={group.name}
+                              className="w-full h-full object-cover"
+                            />
+                          </div>
+                          <span className="text-sm truncate">{group.name}</span>
+                        </div>
+                      </TableCell>
+                      <TableCell className="truncate">{group.serviceAccount.name}</TableCell>
+                      <TableCell>
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => handleAddGroup(group)}
+                          disabled={selectedGroups.some((g) => g.id === group.id)}
+                          className="whitespace-nowrap"
+                        >
+                          {selectedGroups.some((g) => g.id === group.id) ? "已选择" : "选择"}
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
+

Cunkebao/app/workspace/group-push/components/message-editor.tsx

@@ -0,0 +1,230 @@
+"use client"
+
+import { useState, useRef, type ChangeEvent } from "react"
+import { Button } from "@/components/ui/button"
+import { Textarea } from "@/components/ui/textarea"
+import { Input } from "@/components/ui/input"
+import { Image, Video, Link, X } from "lucide-react"
+
+interface MessageEditorProps {
+  onMessageChange: (message: {
+    text: string
+    images: File[]
+    video: File | null
+    link: string
+  }) => void
+  defaultValues?: {
+    text: string
+    images: string[]
+    video: string
+    link: string
+  }
+}
+
+export function MessageEditor({ onMessageChange, defaultValues }: MessageEditorProps) {
+  const [text, setText] = useState(defaultValues?.text || "")
+  const [images, setImages] = useState<File[]>([])
+  const [imageUrls, setImageUrls] = useState<string[]>(defaultValues?.images || [])
+  const [video, setVideo] = useState<File | null>(null)
+  const [videoUrl, setVideoUrl] = useState<string>(defaultValues?.video || "")
+  const [link, setLink] = useState(defaultValues?.link || "")
+
+  const imageInputRef = useRef<HTMLInputElement>(null)
+  const videoInputRef = useRef<HTMLInputElement>(null)
+
+  const handleTextChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    const newText = e.target.value
+    if (newText.length <= 800) {
+      setText(newText)
+      onMessageChange({
+        text: newText,
+        images,
+        video,
+        link,
+      })
+    }
+  }
+
+  const handleImageUpload = (e: ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(e.target.files || [])
+    if (files.length > 0) {
+      // 检查文件大小和数量限制
+      const validFiles = files.filter((file) => file.size <= 20 * 1024 * 1024) // 20MB
+      const newImages = [...images, ...validFiles].slice(0, 9) // 最多9张图片
+
+      setImages(newImages)
+
+      // 创建临时URL用于预览
+      const newImageUrls = newImages.map((file) => URL.createObjectURL(file))
+      setImageUrls(newImageUrls)
+
+      onMessageChange({
+        text,
+        images: newImages,
+        video,
+        link,
+      })
+    }
+  }
+
+  const handleVideoUpload = (e: ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (file && file.size <= 100 * 1024 * 1024) {
+      // 100MB
+      setVideo(file)
+      setVideoUrl(URL.createObjectURL(file))
+
+      onMessageChange({
+        text,
+        images,
+        video: file,
+        link,
+      })
+    }
+  }
+
+  const handleLinkChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const newLink = e.target.value
+    setLink(newLink)
+
+    onMessageChange({
+      text,
+      images,
+      video,
+      link: newLink,
+    })
+  }
+
+  const removeImage = (index: number) => {
+    const newImages = [...images]
+    newImages.splice(index, 1)
+    setImages(newImages)
+
+    const newImageUrls = [...imageUrls]
+    newImageUrls.splice(index, 1)
+    setImageUrls(newImageUrls)
+
+    onMessageChange({
+      text,
+      images: newImages,
+      video,
+      link,
+    })
+  }
+
+  const removeVideo = () => {
+    setVideo(null)
+    setVideoUrl("")
+
+    onMessageChange({
+      text,
+      images,
+      video: null,
+      link,
+    })
+  }
+
+  return (
+    <div className="space-y-4 border rounded-md p-4">
+      <div>
+        <Textarea
+          placeholder="请输入消息内容，最多800字"
+          value={text}
+          onChange={handleTextChange}
+          className="min-h-[120px]"
+        />
+        <div className="text-xs text-gray-500 mt-1 text-right">{text.length}/800</div>
+      </div>
+
+      {/* 图片预览区域 */}
+      {imageUrls.length > 0 && (
+        <div className="grid grid-cols-3 gap-2">
+          {imageUrls.map((url, index) => (
+            <div key={index} className="relative group">
+              <img
+                src={url || "/placeholder.svg"}
+                alt={`上传的图片 ${index + 1}`}
+                className="h-24 w-full object-cover rounded-md"
+              />
+              <button
+                type="button"
+                onClick={() => removeImage(index)}
+                className="absolute top-1 right-1 bg-black bg-opacity-50 rounded-full p-1 text-white opacity-0 group-hover:opacity-100 transition-opacity"
+              >
+                <X className="h-4 w-4" />
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* 视频预览区域 */}
+      {videoUrl && (
+        <div className="relative group">
+          <video src={videoUrl} controls className="w-full h-48 object-cover rounded-md" />
+          <button
+            type="button"
+            onClick={removeVideo}
+            className="absolute top-2 right-2 bg-black bg-opacity-50 rounded-full p-1 text-white opacity-0 group-hover:opacity-100 transition-opacity"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+      )}
+
+      {/* 链接输入区域 */}
+      {link && (
+        <div className="flex items-center gap-2 p-2 bg-gray-50 rounded-md">
+          <Link className="h-4 w-4 text-blue-500" />
+          <a href={link} target="_blank" rel="noopener noreferrer" className="text-blue-500 text-sm flex-1 truncate">
+            {link}
+          </a>
+        </div>
+      )}
+
+      {/* 工具栏 */}
+      <div className="flex items-center gap-2 pt-2 border-t">
+        <input
+          type="file"
+          ref={imageInputRef}
+          onChange={handleImageUpload}
+          accept="image/*"
+          multiple
+          className="hidden"
+        />
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={() => imageInputRef.current?.click()}
+          disabled={images.length >= 9}
+        >
+          <Image className="h-4 w-4 mr-1" />
+          图片
+        </Button>
+
+        <input type="file" ref={videoInputRef} onChange={handleVideoUpload} accept="video/*" className="hidden" />
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={() => videoInputRef.current?.click()}
+          disabled={!!video}
+        >
+          <Video className="h-4 w-4 mr-1" />
+          视频
+        </Button>
+
+        <div className="flex-1">
+          <Input type="url" placeholder="输入链接地址" value={link} onChange={handleLinkChange} className="h-9" />
+        </div>
+      </div>
+
+      <div className="text-xs text-gray-500">
+        <p>图片：最多9张，每张不超过20MB</p>
+        <p>视频：最多1个，不超过100MB</p>
+      </div>
+    </div>
+  )
+}
+

Cunkebao/app/workspace/group-push/components/step-indicator.tsx

@@ -0,0 +1,81 @@
+import { cn } from "@/lib/utils"
+
+interface StepIndicatorProps {
+  currentStep: number
+  steps: { id: number; title: string; subtitle: string }[]
+}
+
+export function StepIndicator({ currentStep, steps }: StepIndicatorProps) {
+  return (
+    <div className="mb-6 overflow-x-auto pb-2">
+      <div className="flex min-w-max">
+        {steps.map((step, index) => (
+          <div key={step.id} className="flex items-center">
+            <div className="flex flex-col items-center relative">
+              {/* 步骤圆圈 */}
+              <div
+                className={cn(
+                  "flex h-8 w-8 sm:h-10 sm:w-10 items-center justify-center rounded-full border-2 text-sm font-semibold",
+                  currentStep > step.id
+                    ? "border-green-500 bg-green-500 text-white"
+                    : currentStep === step.id
+                      ? "border-blue-500 bg-white text-blue-500"
+                      : "border-gray-300 bg-white text-gray-300",
+                )}
+              >
+                {currentStep > step.id ? (
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <polyline points="20 6 9 17 4 12"></polyline>
+                  </svg>
+                ) : (
+                  step.id
+                )}
+              </div>
+
+              {/* 步骤标题和描述 */}
+              <div className="mt-2 text-center w-full">
+                <div
+                  className={cn(
+                    "text-xs sm:text-sm font-medium",
+                    currentStep >= step.id ? "text-blue-500" : "text-gray-400",
+                  )}
+                >
+                  步骤 {step.id}
+                </div>
+                <div
+                  className={cn(
+                    "text-xs whitespace-nowrap",
+                    currentStep >= step.id ? "text-blue-500" : "text-gray-400",
+                  )}
+                >
+                  {step.subtitle}
+                </div>
+              </div>
+            </div>
+
+            {/* 连接线 */}
+            {index < steps.length - 1 && (
+              <div
+                className={cn(
+                  "h-0.5 w-8 sm:w-16 md:w-24 lg:w-32",
+                  currentStep > step.id ? "bg-green-500" : "bg-gray-300",
+                )}
+              />
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+

Cunkebao/app/workspace/group-push/loading.tsx

@@ -0,0 +1,64 @@
+import { Skeleton } from "@/components/ui/skeleton"
+import { Card } from "@/components/ui/card"
+
+export default function Loading() {
+  return (
+    <div className="bg-gray-50 min-h-screen pb-16">
+      <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">
+            <Skeleton className="h-9 w-9 rounded-md" />
+            <Skeleton className="h-6 w-32" />
+          </div>
+          <Skeleton className="h-9 w-28" />
+        </div>
+      </header>
+
+      <div className="p-4">
+        <Card className="p-4 mb-4">
+          <div className="flex items-center space-x-2">
+            <Skeleton className="h-10 flex-1" />
+            <Skeleton className="h-10 w-10" />
+            <Skeleton className="h-10 w-10" />
+          </div>
+        </Card>
+
+        <div className="space-y-4">
+          {[1, 2, 3].map((i) => (
+            <Card key={i} className="p-4">
+              <div className="flex items-center justify-between mb-4">
+                <div className="flex items-center space-x-2">
+                  <Skeleton className="h-5 w-32" />
+                  <Skeleton className="h-5 w-16" />
+                </div>
+                <div className="flex items-center space-x-2">
+                  <Skeleton className="h-6 w-12" />
+                  <Skeleton className="h-8 w-8 rounded-md" />
+                </div>
+              </div>
+
+              <div className="grid grid-cols-2 gap-4 mb-4">
+                <div className="space-y-2">
+                  <Skeleton className="h-4 w-full" />
+                  <Skeleton className="h-4 w-full" />
+                  <Skeleton className="h-4 w-full" />
+                </div>
+                <div className="space-y-2">
+                  <Skeleton className="h-4 w-full" />
+                  <Skeleton className="h-4 w-full" />
+                  <Skeleton className="h-4 w-full" />
+                </div>
+              </div>
+
+              <div className="border-t pt-4 flex justify-between">
+                <Skeleton className="h-4 w-32" />
+                <Skeleton className="h-4 w-32" />
+              </div>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+

Cunkebao/app/workspace/group-push/new/loading.tsx

@@ -0,0 +1,85 @@
+import { Skeleton } from "@/components/ui/skeleton"
+import { Card } from "@/components/ui/card"
+
+export default function Loading() {
+  return (
+    <div className="container mx-auto py-4 px-4 sm:px-6 md:py-6">
+      <div className="flex items-center mb-6">
+        <Skeleton className="h-9 w-9 rounded-md mr-2" />
+        <Skeleton className="h-7 w-48" />
+      </div>
+
+      <div className="flex justify-between mb-8">
+        {[1, 2, 3, 4].map((i) => (
+          <div key={i} className="flex items-center">
+            <div className="flex flex-col items-center relative">
+              <Skeleton className="h-10 w-10 rounded-full" />
+              <div className="mt-2 text-center">
+                <Skeleton className="h-4 w-16 mt-2" />
+                <Skeleton className="h-3 w-20 mt-1" />
+              </div>
+            </div>
+            {i < 4 && <Skeleton className="h-0.5 w-16 md:w-24 lg:w-32 mx-1" />}
+          </div>
+        ))}
+      </div>
+
+      <Card>
+        <div className="p-6 space-y-6">
+          <div className="space-y-4">
+            <Skeleton className="h-5 w-32" />
+            <Skeleton className="h-10 w-full" />
+          </div>
+
+          <div className="space-y-4">
+            <Skeleton className="h-5 w-40" />
+            <div className="flex space-x-2">
+              <Skeleton className="h-10 flex-1" />
+              <Skeleton className="h-10 flex-1" />
+            </div>
+          </div>
+
+          <div className="space-y-4">
+            <Skeleton className="h-5 w-32" />
+            <div className="flex items-center space-x-2">
+              <Skeleton className="h-10 w-10" />
+              <Skeleton className="h-10 w-20" />
+              <Skeleton className="h-10 w-10" />
+              <Skeleton className="h-5 w-16" />
+            </div>
+          </div>
+
+          <div className="space-y-4">
+            <Skeleton className="h-5 w-32" />
+            <div className="flex">
+              <Skeleton className="h-10 flex-1" />
+              <Skeleton className="h-10 flex-1" />
+            </div>
+          </div>
+
+          <div className="flex items-center justify-between">
+            <Skeleton className="h-5 w-40" />
+            <Skeleton className="h-6 w-12" />
+          </div>
+
+          <div className="flex items-center justify-between">
+            <Skeleton className="h-5 w-40" />
+            <Skeleton className="h-6 w-12" />
+          </div>
+
+          <div className="flex items-center justify-between">
+            <Skeleton className="h-5 w-40" />
+            <Skeleton className="h-6 w-12" />
+          </div>
+        </div>
+      </Card>
+
+      <div className="flex space-x-2 justify-end mt-6">
+        <Skeleton className="h-10 w-24" />
+        <Skeleton className="h-10 w-24" />
+        <Skeleton className="h-10 w-24" />
+      </div>
+    </div>
+  )
+}
+

Cunkebao/app/workspace/group-push/new/page.tsx

@@ -0,0 +1,139 @@
+"use client"
+
+import { useState } from "react"
+import { useRouter } from "next/navigation"
+import { ArrowLeft } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { StepIndicator } from "../components/step-indicator"
+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"
+
+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 NewGroupPushPage() {
+  const router = useRouter()
+  const { toast } = useToast()
+  const [currentStep, setCurrentStep] = useState(1)
+  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 handleBasicSettingsNext = (values: any) => {
+    setFormData((prev) => ({ ...prev, ...values }))
+    setCurrentStep(2)
+  }
+
+  const handleGroupsChange = (groups: WechatGroup[]) => {
+    setFormData((prev) => ({ ...prev, groups }))
+  }
+
+  const handleLibrariesChange = (contentLibraries: ContentLibrary[]) => {
+    setFormData((prev) => ({ ...prev, contentLibraries }))
+  }
+
+  const handleSave = () => {
+    // 这里可以添加保存逻辑，例如API调用
+    toast({
+      title: "保存成功",
+      description: `社群推送任务"${formData.name || "未命名任务"}"已保存`,
+    })
+    router.push("/workspace/group-push")
+  }
+
+  const handleCancel = () => {
+    router.push("/workspace/group-push")
+  }
+
+  return (
+    <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-xl font-bold">新建社群推送任务</h1>
+      </div>
+
+      <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}
+          />
+        )}
+
+        {currentStep === 2 && (
+          <GroupSelector
+            selectedGroups={formData.groups}
+            onGroupsChange={handleGroupsChange}
+            onPrevious={() => setCurrentStep(1)}
+            onNext={() => setCurrentStep(3)}
+            onSave={handleSave}
+            onCancel={handleCancel}
+          />
+        )}
+
+        {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="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>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+

Cunkebao/app/workspace/group-push/page.tsx

@@ -0,0 +1,255 @@
+"use client"
+
+import { useState } from "react"
+import Link from "next/link"
+import { useRouter } from "next/navigation"
+import { Button } from "@/components/ui/button"
+import { Card } from "@/components/ui/card"
+import { Switch } from "@/components/ui/switch"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+import { PlusCircle, MoreVertical, Edit, Trash2, ArrowLeft, Clock, Search, Filter, RefreshCw } from "lucide-react"
+import { Input } from "@/components/ui/input"
+import { Badge } from "@/components/ui/badge"
+
+// 模拟数据
+const mockTasks = [
+  {
+    id: "1",
+    name: "社群推送测试",
+    pushTimeRange: "06:00 - 23:59",
+    dailyPushCount: 20,
+    pushOrder: "latest",
+    isLoopPush: false,
+    isEnabled: true,
+    groupCount: 3,
+    contentLibraryCount: 2,
+    createdAt: "2025-03-15 14:30",
+    lastPushTime: "2025-03-20 10:25",
+    totalPushCount: 245,
+  },
+  {
+    id: "2",
+    name: "产品更新推送",
+    pushTimeRange: "09:00 - 21:00",
+    dailyPushCount: 15,
+    pushOrder: "earliest",
+    isLoopPush: true,
+    isEnabled: false,
+    groupCount: 5,
+    contentLibraryCount: 1,
+    createdAt: "2025-03-10 10:15",
+    lastPushTime: "2025-03-19 16:45",
+    totalPushCount: 128,
+  },
+  {
+    id: "3",
+    name: "新客户欢迎",
+    pushTimeRange: "08:00 - 22:00",
+    dailyPushCount: 10,
+    pushOrder: "latest",
+    isLoopPush: true,
+    isEnabled: true,
+    groupCount: 2,
+    contentLibraryCount: 1,
+    createdAt: "2025-03-05 09:20",
+    lastPushTime: "2025-03-18 11:30",
+    totalPushCount: 87,
+  },
+]
+
+export default function GroupPushPage() {
+  const router = useRouter()
+  const [tasks, setTasks] = useState(mockTasks)
+  const [searchTerm, setSearchTerm] = useState("")
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
+  const [taskToDelete, setTaskToDelete] = useState<string | null>(null)
+
+  const handleDelete = (id: string) => {
+    setTaskToDelete(id)
+    setDeleteDialogOpen(true)
+  }
+
+  const confirmDelete = () => {
+    if (taskToDelete) {
+      setTasks(tasks.filter((task) => task.id !== taskToDelete))
+      setTaskToDelete(null)
+    }
+    setDeleteDialogOpen(false)
+  }
+
+  const handleToggleStatus = (id: string, isEnabled: boolean) => {
+    setTasks(tasks.map((task) => (task.id === id ? { ...task, isEnabled } : task)))
+  }
+
+  const filteredTasks = tasks.filter((task) => task.name.toLowerCase().includes(searchTerm.toLowerCase()))
+
+  return (
+    <div className="bg-gray-50 min-h-screen pb-16">
+      {/* 顶部导航栏 */}
+      <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={() => router.push("/workspace")}>
+              <ArrowLeft className="h-5 w-5" />
+            </Button>
+            <h1 className="text-lg font-medium">社群推送</h1>
+          </div>
+          <Link href="/workspace/group-push/new">
+            <Button>
+              <PlusCircle className="h-4 w-4 mr-2" />
+              新建任务
+            </Button>
+          </Link>
+        </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">
+              <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.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.isEnabled ? "success" : "secondary"}>
+                    {task.isEnabled ? "进行中" : "已暂停"}
+                  </Badge>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <Switch
+                    checked={task.isEnabled}
+                    onCheckedChange={(checked) => handleToggleStatus(task.id, checked)}
+                  />
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button variant="ghost" size="sm">
+                        <MoreVertical className="h-4 w-4" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <Link href={`/workspace/group-push/${task.id}`}>
+                        <DropdownMenuItem>
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="16"
+                            height="16"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            className="mr-2"
+                          >
+                            <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"></path>
+                            <circle cx="12" cy="12" r="3"></circle>
+                          </svg>
+                          查看
+                        </DropdownMenuItem>
+                      </Link>
+                      <Link href={`/workspace/group-push/${task.id}/edit`}>
+                        <DropdownMenuItem>
+                          <Edit className="h-4 w-4 mr-2" />
+                          编辑
+                        </DropdownMenuItem>
+                      </Link>
+                      <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.groupCount} 个</div>
+                  <div>内容库：{task.contentLibraryCount} 个</div>
+                  <div>推送时间：{task.pushTimeRange}</div>
+                </div>
+                <div className="text-sm text-gray-500">
+                  <div>每日推送：{task.dailyPushCount} 条</div>
+                  <div>已推送：{task.totalPushCount} 条</div>
+                  <div>推送顺序：{task.pushOrder === "latest" ? "按最新" : "按最早"}</div>
+                </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.lastPushTime}
+                </div>
+                <div>创建时间：{task.createdAt}</div>
+              </div>
+            </Card>
+          ))}
+        </div>
+
+        {/* 空状态 */}
+        {filteredTasks.length === 0 && (
+          <div className="flex flex-col items-center justify-center py-12 text-center">
+            <div className="bg-gray-100 p-4 rounded-full mb-4">
+              <Clock className="h-10 w-10 text-gray-400" />
+            </div>
+            <h3 className="text-lg font-medium text-gray-900 mb-1">暂无社群推送任务</h3>
+            <p className="text-gray-500 mb-4">点击"新建任务"按钮创建您的第一个社群推送任务</p>
+            <Link href="/workspace/group-push/new">
+              <Button>
+                <PlusCircle className="h-4 w-4 mr-2" />
+                新建任务
+              </Button>
+            </Link>
+          </div>
+        )}
+      </div>
+
+      <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>确认删除</DialogTitle>
+            <DialogDescription>您确定要删除这个社群推送任务吗？此操作无法撤销。</DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDeleteDialogOpen(false)}>
+              取消
+            </Button>
+            <Button variant="destructive" onClick={confirmDelete}>
+              删除
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
+