152 lines
4.6 KiB
TypeScript
Executable File
152 lines
4.6 KiB
TypeScript
Executable File
"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>
|
|
)
|
|
}
|
|
|