feat: 本次提交更新内容如下

场景获客列表搞定

Cunkebao/app/admin/accounts/mobile/page.tsx

@@ -0,0 +1,250 @@
+"use client"
+
+import { useState } from "react"
+import { Pencil, Trash2, Plus } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+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 { Badge } from "@/components/ui/badge"
+
+interface MobileAccount {
+  id: string
+  name: string
+  phone: string
+  createdAt: string
+  status: "active" | "inactive"
+}
+
+export default function MobileAccountsPage() {
+  const [accounts, setAccounts] = useState<MobileAccount[]>([
+    {
+      id: "1",
+      name: "用户1",
+      phone: "13809076043",
+      createdAt: "2023-01-15",
+      status: "active",
+    },
+    {
+      id: "2",
+      name: "用户2",
+      phone: "13819176143",
+      createdAt: "2023-02-15",
+      status: "inactive",
+    },
+    {
+      id: "3",
+      name: "用户3",
+      phone: "13829276243",
+      createdAt: "2023-03-15",
+      status: "active",
+    },
+    {
+      id: "4",
+      name: "用户4",
+      phone: "13839376343",
+      createdAt: "2023-04-15",
+      status: "inactive",
+    },
+    {
+      id: "5",
+      name: "用户5",
+      phone: "13849476443",
+      createdAt: "2023-05-15",
+      status: "active",
+    },
+  ])
+
+  const [isDialogOpen, setIsDialogOpen] = useState(false)
+  const [newAccount, setNewAccount] = useState({
+    name: "",
+    password: "",
+    phone: "",
+    role: "",
+    permissions: {
+      notifications: false,
+      dataView: false,
+      remoteControl: false,
+    },
+  })
+
+  const handleCreateAccount = () => {
+    // 这里应该有API调用来创建账号
+    const newId = (accounts.length + 1).toString()
+    setAccounts([
+      ...accounts,
+      {
+        id: newId,
+        name: newAccount.name,
+        phone: newAccount.phone,
+        createdAt: new Date().toISOString().split("T")[0],
+        status: "active",
+      },
+    ])
+    setIsDialogOpen(false)
+    setNewAccount({
+      name: "",
+      password: "",
+      phone: "",
+      role: "",
+      permissions: {
+        notifications: false,
+        dataView: false,
+        remoteControl: false,
+      },
+    })
+  }
+
+  const handleDeleteAccount = (id: string) => {
+    setAccounts(accounts.filter((account) => account.id !== id))
+  }
+
+  return (
+    <div className="p-6">
+      <div className="flex justify-between items-center mb-6">
+        <h1 className="text-2xl font-semibold">手机端账号列表</h1>
+        <Button onClick={() => setIsDialogOpen(true)}>
+          <Plus className="h-4 w-4 mr-2" />
+          新增手机端账号
+        </Button>
+      </div>
+
+      <div className="bg-white rounded-md shadow">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>账号名称</TableHead>
+              <TableHead>手机号码</TableHead>
+              <TableHead>创建时间</TableHead>
+              <TableHead>状态</TableHead>
+              <TableHead className="text-right">操作</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {accounts.map((account) => (
+              <TableRow key={account.id}>
+                <TableCell>{account.name}</TableCell>
+                <TableCell>{account.phone}</TableCell>
+                <TableCell>{account.createdAt}</TableCell>
+                <TableCell>
+                  <Badge variant={account.status === "active" ? "success" : "secondary"}>
+                    {account.status === "active" ? "活跃" : "非活跃"}
+                  </Badge>
+                </TableCell>
+                <TableCell className="text-right space-x-2">
+                  <Button variant="ghost" size="icon">
+                    <Pencil className="h-4 w-4" />
+                  </Button>
+                  <Button variant="ghost" size="icon" onClick={() => handleDeleteAccount(account.id)}>
+                    <Trash2 className="h-4 w-4 text-red-500" />
+                  </Button>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+
+      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>新增手机端账号</DialogTitle>
+          </DialogHeader>
+          <div className="grid gap-4 py-4">
+            <div className="grid gap-2">
+              <Label htmlFor="name">账号名称</Label>
+              <Input
+                id="name"
+                value={newAccount.name}
+                onChange={(e) => setNewAccount({ ...newAccount, name: e.target.value })}
+                placeholder="请输入账号名称"
+              />
+            </div>
+            <div className="grid gap-2">
+              <Label htmlFor="password">初始密码</Label>
+              <Input
+                id="password"
+                type="password"
+                value={newAccount.password}
+                onChange={(e) => setNewAccount({ ...newAccount, password: e.target.value })}
+                placeholder="请输入初始密码"
+              />
+            </div>
+            <div className="grid gap-2">
+              <Label htmlFor="phone">手机号码</Label>
+              <Input
+                id="phone"
+                value={newAccount.phone}
+                onChange={(e) => setNewAccount({ ...newAccount, phone: e.target.value })}
+                placeholder="请输入手机号码"
+              />
+            </div>
+            <div className="grid gap-2">
+              <Label htmlFor="role">角色</Label>
+              <Select value={newAccount.role} onValueChange={(value) => setNewAccount({ ...newAccount, role: value })}>
+                <SelectTrigger id="role">
+                  <SelectValue placeholder="选择角色" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="admin">管理员</SelectItem>
+                  <SelectItem value="user">普通用<EFBFBD><EFBFBD><EFBFBD></SelectItem>
+                  <SelectItem value="guest">访客</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="grid gap-2">
+              <Label>功能权限</Label>
+              <div className="flex flex-col gap-2">
+                <div className="flex items-center space-x-2">
+                  <Checkbox
+                    id="notifications"
+                    checked={newAccount.permissions.notifications}
+                    onCheckedChange={(checked) =>
+                      setNewAccount({
+                        ...newAccount,
+                        permissions: { ...newAccount.permissions, notifications: !!checked },
+                      })
+                    }
+                  />
+                  <Label htmlFor="notifications">消息通知</Label>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <Checkbox
+                    id="dataView"
+                    checked={newAccount.permissions.dataView}
+                    onCheckedChange={(checked) =>
+                      setNewAccount({
+                        ...newAccount,
+                        permissions: { ...newAccount.permissions, dataView: !!checked },
+                      })
+                    }
+                  />
+                  <Label htmlFor="dataView">数据查看</Label>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <Checkbox
+                    id="remoteControl"
+                    checked={newAccount.permissions.remoteControl}
+                    onCheckedChange={(checked) =>
+                      setNewAccount({
+                        ...newAccount,
+                        permissions: { ...newAccount.permissions, remoteControl: !!checked },
+                      })
+                    }
+                  />
+                  <Label htmlFor="remoteControl">远程控制</Label>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="flex justify-end">
+            <Button onClick={handleCreateAccount}>创建账号</Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}

Cunkebao/app/admin/accounts/operators/page.tsx

@@ -0,0 +1,197 @@
+"use client"
+
+import { useState } from "react"
+import { Pencil, Trash2, Plus } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Badge } from "@/components/ui/badge"
+
+interface OperatorAccount {
+  id: string
+  phone: string
+  nickname: string
+  deviceCount: number
+  friendCount: number
+  createdAt: string
+  status: "active" | "inactive"
+}
+
+export default function OperatorAccountsPage() {
+  const [accounts, setAccounts] = useState<OperatorAccount[]>([
+    {
+      id: "1",
+      phone: "13809076043",
+      nickname: "操盘手1",
+      deviceCount: 1,
+      friendCount: 25,
+      createdAt: "2023-01-15",
+      status: "active",
+    },
+    {
+      id: "2",
+      phone: "13819176143",
+      nickname: "操盘手2",
+      deviceCount: 2,
+      friendCount: 50,
+      createdAt: "2023-02-15",
+      status: "inactive",
+    },
+    {
+      id: "3",
+      phone: "13829276243",
+      nickname: "操盘手3",
+      deviceCount: 3,
+      friendCount: 75,
+      createdAt: "2023-03-15",
+      status: "active",
+    },
+    {
+      id: "4",
+      phone: "13839376343",
+      nickname: "操盘手4",
+      deviceCount: 4,
+      friendCount: 100,
+      createdAt: "2023-04-15",
+      status: "inactive",
+    },
+    {
+      id: "5",
+      phone: "13849476443",
+      nickname: "操盘手5",
+      deviceCount: 5,
+      friendCount: 125,
+      createdAt: "2023-05-15",
+      status: "active",
+    },
+  ])
+
+  const [isDialogOpen, setIsDialogOpen] = useState(false)
+  const [newAccount, setNewAccount] = useState({
+    phone: "",
+    nickname: "",
+    password: "",
+  })
+
+  const handleCreateAccount = () => {
+    // 这里应该有API调用来创建账号
+    const newId = (accounts.length + 1).toString()
+    setAccounts([
+      ...accounts,
+      {
+        id: newId,
+        phone: newAccount.phone,
+        nickname: newAccount.nickname,
+        deviceCount: 0,
+        friendCount: 0,
+        createdAt: new Date().toISOString().split("T")[0],
+        status: "active",
+      },
+    ])
+    setIsDialogOpen(false)
+    setNewAccount({
+      phone: "",
+      nickname: "",
+      password: "",
+    })
+  }
+
+  const handleDeleteAccount = (id: string) => {
+    setAccounts(accounts.filter((account) => account.id !== id))
+  }
+
+  return (
+    <div className="p-6">
+      <div className="flex justify-between items-center mb-6">
+        <h1 className="text-2xl font-semibold">操盘手账号列表</h1>
+        <Button onClick={() => setIsDialogOpen(true)}>
+          <Plus className="h-4 w-4 mr-2" />
+          新增操盘手账号
+        </Button>
+      </div>
+
+      <div className="bg-white rounded-md shadow">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>登录手机号</TableHead>
+              <TableHead>备注 (昵称)</TableHead>
+              <TableHead>关联设备数量</TableHead>
+              <TableHead>微信好友数量</TableHead>
+              <TableHead>创建时间</TableHead>
+              <TableHead>状态</TableHead>
+              <TableHead className="text-right">操作</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {accounts.map((account) => (
+              <TableRow key={account.id}>
+                <TableCell>{account.phone}</TableCell>
+                <TableCell>{account.nickname}</TableCell>
+                <TableCell>{account.deviceCount}</TableCell>
+                <TableCell>{account.friendCount}</TableCell>
+                <TableCell>{account.createdAt}</TableCell>
+                <TableCell>
+                  <Badge variant={account.status === "active" ? "success" : "secondary"}>
+                    {account.status === "active" ? "活跃" : "非活跃"}
+                  </Badge>
+                </TableCell>
+                <TableCell className="text-right space-x-2">
+                  <Button variant="ghost" size="icon">
+                    <Pencil className="h-4 w-4" />
+                  </Button>
+                  <Button variant="ghost" size="icon" onClick={() => handleDeleteAccount(account.id)}>
+                    <Trash2 className="h-4 w-4 text-red-500" />
+                  </Button>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+
+      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>新增操盘手账号</DialogTitle>
+          </DialogHeader>
+          <div className="grid gap-4 py-4">
+            <div className="grid gap-2">
+              <Label htmlFor="phone">登录手机号</Label>
+              <Input
+                id="phone"
+                value={newAccount.phone}
+                onChange={(e) => setNewAccount({ ...newAccount, phone: e.target.value })}
+                placeholder="请输入手机号"
+              />
+            </div>
+            <div className="grid gap-2">
+              <Label htmlFor="nickname">备注 (昵称)</Label>
+              <Input
+                id="nickname"
+                value={newAccount.nickname}
+                onChange={(e) => setNewAccount({ ...newAccount, nickname: e.target.value })}
+                placeholder="请输入昵称"
+              />
+            </div>
+            <div className="grid gap-2">
+              <Label htmlFor="password">初始密码</Label>
+              <Input
+                id="password"
+                type="password"
+                value={newAccount.password}
+                onChange={(e) => setNewAccount({ ...newAccount, password: e.target.value })}
+                placeholder="请输入初始密码"
+              />
+            </div>
+          </div>
+          <div className="flex justify-end">
+            <Button onClick={handleCreateAccount}>创建账号</Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}

Cunkebao/app/admin/components/AdminSidebar.tsx

@@ -0,0 +1,88 @@
+"use client"
+
+import { useState } from "react"
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { ChevronDown, Users, MessageSquare } from "lucide-react"
+
+export default function AdminSidebar() {
+  const pathname = usePathname()
+  const [expandedItems, setExpandedItems] = useState<Record<string, boolean>>({
+    账号管理: true,
+  })
+
+  const toggleExpand = (key: string) => {
+    setExpandedItems((prev) => ({
+      ...prev,
+      [key]: !prev[key],
+    }))
+  }
+
+  const isActive = (path: string) => pathname === path
+
+  return (
+    <div className="w-64 bg-white border-r flex flex-col h-full">
+      <div className="p-4 border-b">
+        <h2 className="text-lg font-semibold">存客宝管理系统</h2>
+      </div>
+      <nav className="flex-1 overflow-y-auto p-2">
+        <ul className="space-y-1">
+          {/* 账号管理 */}
+          <li>
+            <button
+              className="flex items-center justify-between w-full p-3 rounded-md hover:bg-gray-100"
+              onClick={() => toggleExpand("账号管理")}
+            >
+              <div className="flex items-center">
+                <Users className="h-5 w-5 mr-3" />
+                <span>账号管理</span>
+              </div>
+              <ChevronDown
+                className={`h-4 w-4 transition-transform ${expandedItems["账号管理"] ? "transform rotate-180" : ""}`}
+              />
+            </button>
+            {expandedItems["账号管理"] && (
+              <ul className="pl-10 space-y-1 mt-1">
+                <li>
+                  <Link
+                    href="/admin/accounts/operators"
+                    className={`block p-2 rounded-md ${
+                      isActive("/admin/accounts/operators") ? "bg-blue-50 text-blue-600" : "hover:bg-gray-100"
+                    }`}
+                  >
+                    操盘手账号管理
+                  </Link>
+                </li>
+                <li>
+                  <Link
+                    href="/admin/accounts/mobile"
+                    className={`block p-2 rounded-md ${
+                      isActive("/admin/accounts/mobile") ? "bg-blue-50 text-blue-600" : "hover:bg-gray-100"
+                    }`}
+                  >
+                    手机端账号管理
+                  </Link>
+                </li>
+              </ul>
+            )}
+          </li>
+
+          {/* 聚合聊天 */}
+          <li>
+            <Link
+              href="/admin/chat"
+              className={`flex items-center p-3 rounded-md ${
+                isActive("/admin/chat") ? "bg-blue-50 text-blue-600" : "hover:bg-gray-100"
+              }`}
+            >
+              <MessageSquare className="h-5 w-5 mr-3" />
+              <span>聚合聊天</span>
+            </Link>
+          </li>
+
+          {/* 其他菜单项可以在这里添加 */}
+        </ul>
+      </nav>
+    </div>
+  )
+}

Cunkebao/app/admin/layout.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import type React from "react"
+import { Bell, User } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import AdminSidebar from "./components/AdminSidebar"
+
+export default function AdminLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex h-screen bg-gray-100">
+      <AdminSidebar />
+      <div className="flex-1 flex flex-col overflow-hidden">
+        <header className="bg-white border-b h-16 flex items-center justify-between px-6">
+          <h1 className="text-xl font-semibold">运营端后台</h1>
+          <div className="flex items-center space-x-4">
+            <Button variant="ghost" size="icon">
+              <Bell className="h-5 w-5" />
+            </Button>
+            <Button variant="ghost" size="icon">
+              <User className="h-5 w-5" />
+            </Button>
+          </div>
+        </header>
+        <main className="flex-1 overflow-auto">{children}</main>
+      </div>
+    </div>
+  )
+}

Cunkebao/app/admin/page.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { ArrowRight } from "lucide-react"
+import Link from "next/link"
+
+export default function AdminDashboard() {
+  const stats = [
+    { title: "总账号数", value: "42" },
+    { title: "手机端账号", value: "28" },
+    { title: "操盘手账号", value: "14" },
+    { title: "今日活跃", value: "18" },
+  ]
+
+  return (
+    <div className="p-6">
+      <h1 className="text-2xl font-semibold mb-6">存客宝管理后台</h1>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+        {stats.map((stat, index) => (
+          <Card key={index}>
+            <CardHeader className="pb-2">
+              <CardTitle className="text-sm font-medium text-gray-500">{stat.title}</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="text-2xl font-bold">{stat.value}</p>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <Card>
+          <CardHeader>
+            <CardTitle>手机端账号管理</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p className="text-gray-500 mb-4">管理存客宝手机端的用户账号，设置权限和功能。</p>
+            <Link href="/admin/accounts/mobile">
+              <Button variant="outline" className="w-full">
+                查看账号
+                <ArrowRight className="ml-2 h-4 w-4" />
+              </Button>
+            </Link>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>操盘手账号管理</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p className="text-gray-500 mb-4">管理操盘手账号，查看关联设备和微信好友数量。</p>
+            <Link href="/admin/accounts/operators">
+              <Button variant="outline" className="w-full">
+                查看账号
+                <ArrowRight className="ml-2 h-4 w-4" />
+              </Button>
+            </Link>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}