70 lines
2.7 KiB
TypeScript
70 lines
2.7 KiB
TypeScript
"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>
|
||
)
|
||
}
|
||
|