存客宝 React

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>
+  )
+}
+