111 lines
3.8 KiB
TypeScript
111 lines
3.8 KiB
TypeScript
"use client"
|
||
|
||
import { useState, useEffect } from "react"
|
||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
||
import { Input } from "@/components/ui/input"
|
||
import { Button } from "@/components/ui/button"
|
||
import { Search } from "lucide-react"
|
||
import { Checkbox } from "@/components/ui/checkbox"
|
||
|
||
interface WechatGroup {
|
||
id: string
|
||
name: string
|
||
memberCount: number
|
||
avatar: string
|
||
owner: string
|
||
customer: string
|
||
}
|
||
|
||
interface WechatGroupSelectorProps {
|
||
open: boolean
|
||
onOpenChange: (open: boolean) => void
|
||
selectedGroups: WechatGroup[]
|
||
onSelect: (groups: WechatGroup[]) => void
|
||
}
|
||
|
||
export function WechatGroupSelector({ open, onOpenChange, selectedGroups, onSelect }: WechatGroupSelectorProps) {
|
||
const [searchQuery, setSearchQuery] = useState("")
|
||
const [groups, setGroups] = useState<WechatGroup[]>([])
|
||
const [loading, setLoading] = useState(false)
|
||
|
||
useEffect(() => {
|
||
if (open) {
|
||
fetchGroups()
|
||
}
|
||
}, [open])
|
||
|
||
const fetchGroups = async () => {
|
||
setLoading(true)
|
||
// 模拟从API获取群聊列表
|
||
await new Promise((resolve) => setTimeout(resolve, 1000))
|
||
const mockGroups = Array.from({ length: 10 }, (_, i) => ({
|
||
id: `group-${i}`,
|
||
name: `群聊${i + 1}`,
|
||
memberCount: Math.floor(Math.random() * 400) + 100,
|
||
avatar: `/placeholder.svg?height=40&width=40&text=群${i + 1}`,
|
||
owner: `群主${i + 1}`,
|
||
customer: `客户${i + 1}`,
|
||
}))
|
||
setGroups(mockGroups)
|
||
setLoading(false)
|
||
}
|
||
|
||
const filteredGroups = groups.filter((group) => group.name.toLowerCase().includes(searchQuery.toLowerCase()))
|
||
|
||
return (
|
||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||
<DialogContent className="max-w-md">
|
||
<DialogHeader>
|
||
<DialogTitle>选择聊天群</DialogTitle>
|
||
</DialogHeader>
|
||
<div className="relative">
|
||
<Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
|
||
<Input
|
||
placeholder="搜索群聊"
|
||
value={searchQuery}
|
||
onChange={(e) => setSearchQuery(e.target.value)}
|
||
className="pl-9"
|
||
/>
|
||
</div>
|
||
<div className="mt-4 space-y-2 max-h-[400px] overflow-y-auto">
|
||
{loading ? (
|
||
<div className="text-center py-4">加载中...</div>
|
||
) : filteredGroups.length === 0 ? (
|
||
<div className="text-center py-4">未找到匹配的群聊</div>
|
||
) : (
|
||
filteredGroups.map((group) => (
|
||
<div key={group.id} className="flex items-center space-x-3 p-2 hover:bg-gray-100 rounded-lg">
|
||
<Checkbox
|
||
checked={selectedGroups.some((g) => g.id === group.id)}
|
||
onCheckedChange={(checked) => {
|
||
if (checked) {
|
||
onSelect([...selectedGroups, group])
|
||
} else {
|
||
onSelect(selectedGroups.filter((g) => g.id !== group.id))
|
||
}
|
||
}}
|
||
/>
|
||
<img src={group.avatar || "/placeholder.svg"} alt={group.name} className="w-10 h-10 rounded-lg" />
|
||
<div className="flex-1">
|
||
<div className="font-medium">{group.name}</div>
|
||
<div className="text-sm text-gray-500">
|
||
<div>群主：{group.owner}</div>
|
||
<div>归属客户：{group.customer}</div>
|
||
<div>{group.memberCount}人</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))
|
||
)}
|
||
</div>
|
||
<div className="flex justify-end space-x-2 mt-4">
|
||
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
||
取消
|
||
</Button>
|
||
<Button onClick={() => onOpenChange(false)}>确定</Button>
|
||
</div>
|
||
</DialogContent>
|
||
</Dialog>
|
||
)
|
||
}
|