存客宝 React

Cunkebao/app/workspace/group-sync/auto-group/loading.tsx

@@ -0,0 +1,52 @@
+import { Skeleton } from "@/components/ui/skeleton"
+import { Card } from "@/components/ui/card"
+
+export default function Loading() {
+  return (
+    <div className="flex-1 bg-gray-50 min-h-screen p-4">
+      <div className="max-w-4xl mx-auto">
+        <div className="h-8 mb-8">
+          <Skeleton className="h-full w-full" />
+        </div>
+
+        <div className="grid md:grid-cols-2 gap-6">
+          <Card className="p-6">
+            <Skeleton className="h-6 w-1/3 mb-6" />
+
+            <div className="space-y-4">
+              <Skeleton className="h-5 w-1/4" />
+              <Skeleton className="h-10 w-full" />
+            </div>
+
+            <div className="space-y-4 mt-4">
+              <Skeleton className="h-5 w-1/4" />
+              <Skeleton className="h-24 w-full" />
+            </div>
+
+            <div className="grid grid-cols-2 gap-4 mt-4">
+              <div>
+                <Skeleton className="h-5 w-1/2 mb-2" />
+                <Skeleton className="h-10 w-full" />
+              </div>
+              <div>
+                <Skeleton className="h-5 w-1/2 mb-2" />
+                <Skeleton className="h-10 w-full" />
+              </div>
+            </div>
+
+            <Skeleton className="h-10 w-full mt-6" />
+          </Card>
+
+          <Card className="p-6">
+            <Skeleton className="h-6 w-1/3 mb-6" />
+            <Skeleton className="h-4 w-full" />
+            <Skeleton className="h-4 w-full mt-2" />
+            <Skeleton className="h-4 w-full mt-2" />
+            <Skeleton className="h-4 w-3/4 mt-2" />
+          </Card>
+        </div>
+      </div>
+    </div>
+  )
+}
+

Cunkebao/app/workspace/group-sync/auto-group/page.tsx

@@ -0,0 +1,69 @@
+"use client"
+import { ChevronLeft } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { useRouter } from "next/navigation"
+import { AutoGroupCreator } from "../components/auto-group-creator"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+
+export default function AutoGroupPage() {
+  const router = useRouter()
+
+  return (
+    <div className="flex-1 bg-gray-50 min-h-screen">
+      <header className="sticky top-0 z-10 bg-white border-b">
+        <div className="flex items-center p-4">
+          <Button variant="ghost" size="icon" onClick={() => router.back()}>
+            <ChevronLeft className="h-5 w-5" />
+          </Button>
+          <h1 className="text-lg font-medium ml-3">自动建群</h1>
+        </div>
+      </header>
+
+      <div className="p-4 max-w-4xl mx-auto">
+        <Tabs defaultValue="create">
+          <TabsList className="grid w-full max-w-md grid-cols-2 mb-6">
+            <TabsTrigger value="create">创建群聊</TabsTrigger>
+            <TabsTrigger value="history">历史记录</TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="create">
+            <div className="grid md:grid-cols-2 gap-6">
+              <AutoGroupCreator />
+
+              <Card>
+                <CardHeader>
+                  <CardTitle>建群说明</CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <div className="text-sm space-y-2">
+                    <p>自动建群功能可以帮助您快速创建微信群聊，并自动邀请符合条件的好友加入。</p>
+                    <p>使用步骤：</p>
+                    <ol className="list-decimal pl-5 space-y-1">
+                      <li>设置群聊名称和欢迎语</li>
+                      <li>设置群人数上限和群类型</li>
+                      <li>添加群标签，用于筛选邀请的好友</li>
+                      <li>点击创建群聊按钮完成创建</li>
+                    </ol>
+                    <p className="mt-4 text-amber-600">
+                      注意：建群需要至少一个在线的微信设备，请确保您的设备已连接并正常运行。
+                    </p>
+                  </div>
+                </CardContent>
+              </Card>
+            </div>
+          </TabsContent>
+
+          <TabsContent value="history">
+            <Card>
+              <CardContent className="p-6">
+                <div className="text-center py-12 text-gray-500">暂无建群记录</div>
+              </CardContent>
+            </Card>
+          </TabsContent>
+        </Tabs>
+      </div>
+    </div>
+  )
+}
+

Cunkebao/app/workspace/group-sync/components/auto-group-creator.tsx

@@ -0,0 +1,151 @@
+"use client"
+
+import { useState } from "react"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Textarea } from "@/components/ui/textarea"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Badge } from "@/components/ui/badge"
+import { Plus, X, Users } from "lucide-react"
+import { useToast } from "@/components/ui/use-toast"
+
+export function AutoGroupCreator() {
+  const { toast } = useToast()
+  const [groupName, setGroupName] = useState("")
+  const [welcomeMessage, setWelcomeMessage] = useState("欢迎加入我们的群聊！")
+  const [groupSize, setGroupSize] = useState(50)
+  const [groupType, setGroupType] = useState("business")
+  const [tags, setTags] = useState<string[]>([])
+  const [tagInput, setTagInput] = useState("")
+
+  const handleAddTag = () => {
+    if (tagInput && !tags.includes(tagInput)) {
+      setTags([...tags, tagInput])
+      setTagInput("")
+    }
+  }
+
+  const handleRemoveTag = (tag: string) => {
+    setTags(tags.filter((t) => t !== tag))
+  }
+
+  const handleCreateGroup = () => {
+    if (!groupName) {
+      toast({
+        title: "请输入群名称",
+        variant: "destructive",
+      })
+      return
+    }
+
+    // 模拟创建群聊
+    toast({
+      title: "群聊创建成功",
+      description: `已成功创建"${groupName}"群聊`,
+    })
+
+    // 重置表单
+    setGroupName("")
+    setWelcomeMessage("欢迎加入我们的群聊！")
+    setGroupSize(50)
+    setGroupType("business")
+    setTags([])
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center">
+          <Users className="mr-2 h-5 w-5" />
+          自动建群
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="group-name">群聊名称</Label>
+          <Input
+            id="group-name"
+            placeholder="请输入群聊名称"
+            value={groupName}
+            onChange={(e) => setGroupName(e.target.value)}
+          />
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="welcome-message">欢迎语</Label>
+          <Textarea
+            id="welcome-message"
+            placeholder="请输入群欢迎语"
+            value={welcomeMessage}
+            onChange={(e) => setWelcomeMessage(e.target.value)}
+            rows={3}
+          />
+        </div>
+
+        <div className="grid grid-cols-2 gap-4">
+          <div className="space-y-2">
+            <Label htmlFor="group-size">群人数上限</Label>
+            <Input
+              id="group-size"
+              type="number"
+              min={1}
+              max={500}
+              value={groupSize}
+              onChange={(e) => setGroupSize(Number.parseInt(e.target.value))}
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="group-type">群类型</Label>
+            <Select value={groupType} onValueChange={setGroupType}>
+              <SelectTrigger id="group-type">
+                <SelectValue placeholder="选择群类型" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="business">业务群</SelectItem>
+                <SelectItem value="customer">客户群</SelectItem>
+                <SelectItem value="team">团队群</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <Label>群标签</Label>
+          <div className="flex space-x-2">
+            <Input
+              placeholder="添加标签"
+              value={tagInput}
+              onChange={(e) => setTagInput(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault()
+                  handleAddTag()
+                }
+              }}
+            />
+            <Button type="button" size="sm" onClick={handleAddTag}>
+              <Plus className="h-4 w-4" />
+            </Button>
+          </div>
+
+          <div className="flex flex-wrap gap-2 mt-2">
+            {tags.map((tag) => (
+              <Badge key={tag} variant="secondary" className="flex items-center gap-1">
+                {tag}
+                <X className="h-3 w-3 cursor-pointer" onClick={() => handleRemoveTag(tag)} />
+              </Badge>
+            ))}
+          </div>
+        </div>
+
+        <Button className="w-full mt-4" onClick={handleCreateGroup}>
+          创建群聊
+        </Button>
+      </CardContent>
+    </Card>
+  )
+}
+

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

@@ -0,0 +1,196 @@
+"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 { 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">
+      <div className="space-y-4">
+        <div className="grid gap-2">
+          <Label htmlFor="taskName" className="flex items-center">
+            <span className="text-red-500 mr-1">*</span>任务名称:
+          </Label>
+          <Input
+            id="taskName"
+            value={values.name}
+            onChange={(e) => handleChange("name", e.target.value)}
+            placeholder="请输入任务名称"
+            className="max-w-md"
+          />
+        </div>
+
+        <div className="grid gap-2">
+          <Label className="flex items-center">允许推送的时间段:</Label>
+          <div className="flex items-center space-x-2 max-w-md">
+            <Input
+              type="time"
+              value={values.pushTimeStart}
+              onChange={(e) => handleChange("pushTimeStart", e.target.value)}
+              className="w-32"
+            />
+            <span>至</span>
+            <Input
+              type="time"
+              value={values.pushTimeEnd}
+              onChange={(e) => handleChange("pushTimeEnd", e.target.value)}
+              className="w-32"
+            />
+          </div>
+        </div>
+
+        <div className="grid gap-2">
+          <Label className="flex items-center">每日推送:</Label>
+          <div className="flex items-center space-x-2 max-w-md">
+            <Button variant="outline" size="icon" type="button" onClick={() => handleCountChange(false)}>
+              <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)}>
+              <Plus className="h-4 w-4" />
+            </Button>
+            <span>条内容</span>
+          </div>
+        </div>
+
+        <div className="grid gap-2">
+          <Label className="flex items-center">推送顺序:</Label>
+          <div className="flex items-center space-x-2 max-w-md">
+            <div className="flex">
+              <Button
+                type="button"
+                variant={values.pushOrder === "earliest" ? "default" : "outline"}
+                className={`rounded-r-none ${values.pushOrder === "earliest" ? "" : "text-gray-500"}`}
+                onClick={() => handleChange("pushOrder", "earliest")}
+              >
+                按最早
+              </Button>
+              <Button
+                type="button"
+                variant={values.pushOrder === "latest" ? "default" : "outline"}
+                className={`rounded-l-none ${values.pushOrder === "latest" ? "" : "text-gray-500"}`}
+                onClick={() => handleChange("pushOrder", "latest")}
+              >
+                按最新
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        <div className="grid gap-2">
+          <Label htmlFor="isLoopPush" className="flex items-center">
+            <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="grid gap-2">
+          <Label htmlFor="isImmediatePush" className="flex items-center">
+            <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>
+          {values.isImmediatePush && (
+            <p className="text-sm text-gray-500">如果启用，系统会把内容库里所有的内容按顺序推送到指定的社群</p>
+          )}
+        </div>
+
+        <div className="grid gap-2">
+          <Label htmlFor="isEnabled" className="flex items-center">
+            <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>
+
+      <div className="flex space-x-2">
+        <Button type="button" onClick={() => onNext(values)}>
+          下一步
+        </Button>
+        <Button type="button" variant="outline" onClick={() => onSave(values)}>
+          保存
+        </Button>
+        <Button type="button" variant="outline" onClick={onCancel}>
+          取消
+        </Button>
+      </div>
+    </div>
+  )
+}
+

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

@@ -0,0 +1,211 @@
+"use client"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+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-sync"
+
+// 模拟数据
+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">
+      <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">选择内容库:</span>
+          </div>
+          <Button variant="default" size="sm" onClick={() => setIsDialogOpen(true)} className="flex items-center">
+            <Plus className="h-4 w-4 mr-1" />
+            选择内容库
+          </Button>
+        </div>
+
+        {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">
+                      {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 className="flex space-x-2">
+        <Button type="button" variant="outline" onClick={onPrevious}>
+          上一步
+        </Button>
+        <Button type="button" onClick={onNext}>
+          下一步
+        </Button>
+        <Button type="button" variant="outline" onClick={onSave}>
+          保存
+        </Button>
+        <Button type="button" variant="outline" onClick={onCancel}>
+          取消
+        </Button>
+      </div>
+
+      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+        <DialogContent className="max-w-3xl">
+          <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>
+
+            <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">
+                        {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)}
+                      >
+                        {selectedLibraries.some((l) => l.id === library.id) ? "已选择" : "选择"}
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
+

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

@@ -0,0 +1,242 @@
+"use client"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+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-sync"
+
+// 模拟数据
+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">
+      <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">推送社群:</span>
+          </div>
+          <Button variant="default" size="sm" onClick={() => setIsDialogOpen(true)} className="flex items-center">
+            <Plus className="h-4 w-4 mr-1" />
+            选择微信聊天群
+          </Button>
+        </div>
+
+        {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">
+                        <img
+                          src={group.avatar || "/placeholder.svg?height=32&width=32"}
+                          alt={group.name}
+                          className="w-full h-full object-cover"
+                        />
+                      </div>
+                      <span>{group.name}</span>
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex items-center space-x-2">
+                      <div className="flex -space-x-2">
+                        <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-sm">{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 className="flex space-x-2">
+        <Button type="button" variant="outline" onClick={onPrevious}>
+          上一步
+        </Button>
+        <Button type="button" onClick={onNext}>
+          下一步
+        </Button>
+        <Button type="button" variant="outline" onClick={onSave}>
+          保存
+        </Button>
+        <Button type="button" variant="outline" onClick={onCancel}>
+          取消
+        </Button>
+      </div>
+
+      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+        <DialogContent className="max-w-3xl">
+          <DialogHeader>
+            <DialogTitle>选择微信聊天群</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div className="flex 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="w-64">
+                <Input
+                  placeholder="按归属客服筛选"
+                  value={serviceFilter}
+                  onChange={(e) => setServiceFilter(e.target.value)}
+                />
+              </div>
+            </div>
+
+            <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">
+                          <img
+                            src={group.avatar || "/placeholder.svg?height=32&width=32"}
+                            alt={group.name}
+                            className="w-full h-full object-cover"
+                          />
+                        </div>
+                        <span>{group.name}</span>
+                      </div>
+                    </TableCell>
+                    <TableCell>{group.serviceAccount.name}</TableCell>
+                    <TableCell>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => handleAddGroup(group)}
+                        disabled={selectedGroups.some((g) => g.id === group.id)}
+                      >
+                        {selectedGroups.some((g) => g.id === group.id) ? "已选择" : "选择"}
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
+

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

@@ -0,0 +1,63 @@
+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-8">
+      <div className="flex items-center justify-between">
+        {steps.map((step, index) => (
+          <div key={step.id} className="flex items-center">
+            <div className="relative">
+              <div
+                className={cn(
+                  "flex h-10 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="20"
+                    height="20"
+                    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="absolute -bottom-6 left-1/2 transform -translate-x-1/2 whitespace-nowrap">
+                <div className={cn("text-sm font-medium", currentStep >= step.id ? "text-blue-500" : "text-gray-400")}>
+                  步骤 {step.id}
+                </div>
+                <div className={cn("text-xs", 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-24 md:w-32 lg:w-40", currentStep > step.id ? "bg-green-500" : "bg-gray-300")}
+              />
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+

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

@@ -0,0 +1,4 @@
+export default function Loading() {
+  return null
+}
+

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

@@ -0,0 +1,47 @@
+import { Skeleton } from "@/components/ui/skeleton"
+import { Card } from "@/components/ui/card"
+
+export default function Loading() {
+  return (
+    <div className="flex-1 bg-gray-50 min-h-screen p-4">
+      <div className="max-w-4xl mx-auto">
+        <div className="h-8 mb-8">
+          <Skeleton className="h-full w-full" />
+        </div>
+
+        <Card className="p-6">
+          <div className="space-y-6">
+            <Skeleton className="h-8 w-1/3" />
+
+            <div className="space-y-4">
+              <Skeleton className="h-5 w-1/4" />
+              <Skeleton className="h-10 w-full" />
+            </div>
+
+            <div className="space-y-4">
+              <Skeleton className="h-5 w-1/4" />
+              <div className="flex space-x-4">
+                <Skeleton className="h-10 w-32" />
+                <Skeleton className="h-10 w-32" />
+              </div>
+            </div>
+
+            <div className="space-y-4">
+              <Skeleton className="h-5 w-1/4" />
+              <div className="flex items-center space-x-4">
+                <Skeleton className="h-10 w-10" />
+                <Skeleton className="h-6 w-16" />
+                <Skeleton className="h-10 w-10" />
+              </div>
+            </div>
+
+            <div className="flex justify-end mt-8">
+              <Skeleton className="h-10 w-24" />
+            </div>
+          </div>
+        </Card>
+      </div>
+    </div>
+  )
+}
+

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

@@ -0,0 +1,134 @@
+"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-sync"
+
+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 NewGroupSyncPage() {
+  const router = useRouter()
+  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调用
+    console.log("保存表单数据:", formData)
+    router.push("/workspace/group-sync")
+  }
+
+  const handleCancel = () => {
+    router.push("/workspace/group-sync")
+  }
+
+  return (
+    <div className="container mx-auto py-6">
+      <div className="flex items-center mb-6">
+        <Button variant="ghost" size="icon" onClick={() => router.push("/workspace/group-sync")} 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-12">
+        {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">
+              <Button type="button" variant="outline" onClick={() => setCurrentStep(3)}>
+                上一步
+              </Button>
+              <Button type="button" onClick={handleSave}>
+                完成
+              </Button>
+              <Button type="button" variant="outline" onClick={handleCancel}>
+                取消
+              </Button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+

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

@@ -0,0 +1,203 @@
+"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 } 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",
+  },
+  {
+    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",
+  },
+]
+
+export default function GroupSyncPage() {
+  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="container mx-auto py-6">
+      {/* 顶部导航栏 */}
+      <div className="flex items-center justify-between mb-6">
+        <Button variant="ghost" size="icon" onClick={() => router.push("/workspace")} 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>
+
+        <Link href="/workspace/group-sync/new">
+          <Button className="flex items-center gap-1">
+            <PlusCircle className="h-4 w-4" />
+            新建任务
+          </Button>
+        </Link>
+      </div>
+
+      {/* 搜索栏 */}
+      <div className="mb-6">
+        <Input
+          placeholder="搜索任务名称..."
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+          className="max-w-md"
+        />
+      </div>
+
+      {/* 任务列表 */}
+      <div className="space-y-4">
+        {filteredTasks.map((task) => (
+          <Card key={task.id} className="overflow-hidden hover:shadow-sm transition-shadow">
+            <div className="p-4">
+              <div className="flex justify-between items-start">
+                <div className="space-y-1">
+                  <div className="flex items-center gap-2">
+                    <h3 className="font-medium text-lg">{task.name}</h3>
+                    <Badge variant={task.isEnabled ? "default" : "secondary"}>
+                      {task.isEnabled ? "已启用" : "已停用"}
+                    </Badge>
+                  </div>
+                  <div className="text-sm text-gray-500 space-y-1">
+                    <div className="flex items-center gap-4">
+                      <span>推送时间: {task.pushTimeRange}</span>
+                      <span>每日推送: {task.dailyPushCount}条</span>
+                      <span>推送顺序: {task.pushOrder === "latest" ? "按最新" : "按最早"}</span>
+                      <span>循环推送: {task.isLoopPush ? "是" : "否"}</span>
+                    </div>
+                    <div className="flex items-center gap-4">
+                      <span>社群数量: {task.groupCount}</span>
+                      <span>内容库数量: {task.contentLibraryCount}</span>
+                      <span>创建时间: {task.createdAt}</span>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="flex items-center gap-2">
+                  <div className="flex items-center gap-2 mr-2">
+                    <span className="text-sm text-gray-500">启用</span>
+                    <Switch
+                      checked={task.isEnabled}
+                      onCheckedChange={(checked) => handleToggleStatus(task.id, checked)}
+                    />
+                  </div>
+
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button variant="ghost" size="icon" className="h-8 w-8">
+                        <MoreVertical className="h-4 w-4" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <Link href={`/workspace/group-sync/${task.id}/edit`}>
+                        <DropdownMenuItem>
+                          <Edit className="mr-2 h-4 w-4" />
+                          编辑
+                        </DropdownMenuItem>
+                      </Link>
+                      <DropdownMenuItem onClick={() => handleDelete(task.id)}>
+                        <Trash2 className="mr-2 h-4 w-4" />
+                        删除
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </div>
+              </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-sync/new">
+            <Button>
+              <PlusCircle className="h-4 w-4 mr-2" />
+              新建任务
+            </Button>
+          </Link>
+        </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>
+  )
+}
+