存客宝 React

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