超级管理员后台

SuperAdmin/app/dashboard/customers/[id]/page.tsx

@@ -0,0 +1,202 @@
+"use client"
+
+import Link from "next/link"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Badge } from "@/components/ui/badge"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { ArrowLeft, MessageSquare, Phone, UserPlus } from "lucide-react"
+
+// Sample customer data
+const customerData = {
+  id: "1",
+  name: "张三",
+  avatar: "/placeholder.svg?height=100&width=100",
+  wechatId: "zhangsan123",
+  gender: "男",
+  region: "北京",
+  source: "微信搜索",
+  tags: ["潜在客户", "高消费"],
+  projectName: "电商平台项目",
+  addedDate: "2023-06-10",
+  devices: [
+    { id: "d1", name: "iPhone 13 Pro", addedDate: "2023-06-10" },
+    { id: "d2", name: "MacBook Pro", addedDate: "2023-06-12" },
+  ],
+  interactions: [
+    {
+      id: "i1",
+      type: "消息",
+      content: "您好，我对您的产品很感兴趣，能详细介绍一下吗？",
+      date: "2023-06-15 14:30",
+    },
+    {
+      id: "i2",
+      type: "电话",
+      content: "讨论产品细节和价格",
+      duration: "15分钟",
+      date: "2023-06-16 10:45",
+    },
+    {
+      id: "i3",
+      type: "消息",
+      content: "谢谢您的详细介绍，我考虑一下再联系您。",
+      date: "2023-06-16 16:20",
+    },
+    {
+      id: "i4",
+      type: "消息",
+      content: "我决定购买您的产品，请问如何下单？",
+      date: "2023-06-18 09:15",
+    },
+  ],
+  transactions: [
+    {
+      id: "t1",
+      product: "高级会员套餐",
+      amount: "¥1,299",
+      status: "已完成",
+      date: "2023-06-20",
+    },
+  ],
+}
+
+export default function CustomerDetailPage({ params }: { params: { id: string } }) {
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Button variant="outline" size="icon" asChild>
+            <Link href="/dashboard/customers">
+              <ArrowLeft className="h-4 w-4" />
+            </Link>
+          </Button>
+          <h1 className="text-2xl font-bold">客户详情</h1>
+        </div>
+        <Button>
+          <UserPlus className="mr-2 h-4 w-4" /> 分发客户
+        </Button>
+      </div>
+
+      <div className="grid gap-6 md:grid-cols-3">
+        <Card className="md:col-span-1">
+          <CardHeader>
+            <CardTitle>基本信息</CardTitle>
+          </CardHeader>
+          <CardContent className="flex flex-col items-center text-center">
+            <Avatar className="h-24 w-24 mb-4">
+              <AvatarImage src={customerData.avatar} alt={customerData.name} />
+              <AvatarFallback>{customerData.name.slice(0, 2)}</AvatarFallback>
+            </Avatar>
+            <h3 className="text-xl font-bold">{customerData.name}</h3>
+            <p className="text-sm text-muted-foreground mb-4">{customerData.wechatId}</p>
+
+            <div className="flex flex-wrap justify-center gap-1 mb-6">
+              {customerData.tags.map((tag) => (
+                <Badge key={tag} variant="outline">
+                  {tag}
+                </Badge>
+              ))}
+            </div>
+
+            <div className="w-full space-y-2 text-left">
+              <div className="flex justify-between">
+                <span className="text-sm text-muted-foreground">性别</span>
+                <span className="text-sm">{customerData.gender}</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-sm text-muted-foreground">地区</span>
+                <span className="text-sm">{customerData.region}</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-sm text-muted-foreground">来源</span>
+                <span className="text-sm">{customerData.source}</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-sm text-muted-foreground">所属项目</span>
+                <span className="text-sm">{customerData.projectName}</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-sm text-muted-foreground">添加时间</span>
+                <span className="text-sm">{customerData.addedDate}</span>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="md:col-span-2">
+          <CardHeader>
+            <CardTitle>详细信息</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Tabs defaultValue="interactions" className="space-y-4">
+              <TabsList>
+                <TabsTrigger value="interactions">互动记录</TabsTrigger>
+                <TabsTrigger value="devices">关联设备</TabsTrigger>
+                <TabsTrigger value="transactions">交易记录</TabsTrigger>
+              </TabsList>
+
+              <TabsContent value="interactions" className="space-y-4">
+                {customerData.interactions.map((interaction) => (
+                  <div key={interaction.id} className="flex gap-4 pb-4 border-b last:border-0">
+                    <div className="flex h-10 w-10 items-center justify-center rounded-full bg-muted">
+                      {interaction.type === "消息" ? (
+                        <MessageSquare className="h-5 w-5" />
+                      ) : (
+                        <Phone className="h-5 w-5" />
+                      )}
+                    </div>
+                    <div className="flex-1 space-y-1">
+                      <div className="flex items-center justify-between">
+                        <p className="text-sm font-medium">{interaction.type}</p>
+                        <p className="text-xs text-muted-foreground">{interaction.date}</p>
+                      </div>
+                      <p className="text-sm">{interaction.content}</p>
+                      {interaction.duration && (
+                        <p className="text-xs text-muted-foreground">通话时长: {interaction.duration}</p>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </TabsContent>
+
+              <TabsContent value="devices">
+                {customerData.devices.map((device) => (
+                  <div key={device.id} className="flex items-center justify-between py-2 border-b last:border-0">
+                    <div>
+                      <p className="font-medium">{device.name}</p>
+                      <p className="text-xs text-muted-foreground">添加时间: {device.addedDate}</p>
+                    </div>
+                  </div>
+                ))}
+              </TabsContent>
+
+              <TabsContent value="transactions">
+                {customerData.transactions.length > 0 ? (
+                  customerData.transactions.map((transaction) => (
+                    <div key={transaction.id} className="flex items-center justify-between py-2 border-b last:border-0">
+                      <div>
+                        <p className="font-medium">{transaction.product}</p>
+                        <p className="text-xs text-muted-foreground">交易日期: {transaction.date}</p>
+                      </div>
+                      <div className="text-right">
+                        <p className="font-medium">{transaction.amount}</p>
+                        <Badge variant={transaction.status === "已完成" ? "success" : "outline"}>
+                          {transaction.status}
+                        </Badge>
+                      </div>
+                    </div>
+                  ))
+                ) : (
+                  <p className="text-center text-muted-foreground py-4">暂无交易记录</p>
+                )}
+              </TabsContent>
+            </Tabs>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}
+

SuperAdmin/app/dashboard/customers/loading.tsx

@@ -0,0 +1,4 @@
+export default function Loading() {
+  return null
+}
+

SuperAdmin/app/dashboard/customers/page.tsx

@@ -0,0 +1,310 @@
+"use client"
+
+import { useState } from "react"
+import Link from "next/link"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuSeparator,
+} from "@/components/ui/dropdown-menu"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Search, MoreHorizontal, Eye, UserPlus, Filter } from "lucide-react"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Badge } from "@/components/ui/badge"
+
+// Sample customer data
+const customersData = [
+  {
+    id: "1",
+    name: "张三",
+    avatar: "/placeholder.svg?height=40&width=40",
+    wechatId: "zhangsan123",
+    gender: "男",
+    region: "北京",
+    source: "微信搜索",
+    tags: ["潜在客户", "高消费"],
+    projectName: "电商平台项目",
+    addedDate: "2023-06-10",
+  },
+  {
+    id: "2",
+    name: "李四",
+    avatar: "/placeholder.svg?height=40&width=40",
+    wechatId: "lisi456",
+    gender: "男",
+    region: "上海",
+    source: "朋友推荐",
+    tags: ["活跃用户"],
+    projectName: "社交媒体营销",
+    addedDate: "2023-06-12",
+  },
+  {
+    id: "3",
+    name: "王五",
+    avatar: "/placeholder.svg?height=40&width=40",
+    wechatId: "wangwu789",
+    gender: "男",
+    region: "广州",
+    source: "广告点击",
+    tags: ["新用户"],
+    projectName: "企业官网推广",
+    addedDate: "2023-06-15",
+  },
+  {
+    id: "4",
+    name: "赵六",
+    avatar: "/placeholder.svg?height=40&width=40",
+    wechatId: "zhaoliu321",
+    gender: "男",
+    region: "深圳",
+    source: "线下活动",
+    tags: ["高消费", "忠诚客户"],
+    projectName: "教育平台项目",
+    addedDate: "2023-06-18",
+  },
+  {
+    id: "5",
+    name: "钱七",
+    avatar: "/placeholder.svg?height=40&width=40",
+    wechatId: "qianqi654",
+    gender: "女",
+    region: "成都",
+    source: "微信群",
+    tags: ["潜在客户"],
+    projectName: "金融服务推广",
+    addedDate: "2023-06-20",
+  },
+  {
+    id: "6",
+    name: "孙八",
+    avatar: "/placeholder.svg?height=40&width=40",
+    wechatId: "sunba987",
+    gender: "女",
+    region: "武汉",
+    source: "微信搜索",
+    tags: ["活跃用户", "高消费"],
+    projectName: "电商平台项目",
+    addedDate: "2023-06-22",
+  },
+  {
+    id: "7",
+    name: "周九",
+    avatar: "/placeholder.svg?height=40&width=40",
+    wechatId: "zhoujiu135",
+    gender: "女",
+    region: "杭州",
+    source: "朋友推荐",
+    tags: ["新用户"],
+    projectName: "社交媒体营销",
+    addedDate: "2023-06-25",
+  },
+]
+
+export default function CustomersPage() {
+  const [searchTerm, setSearchTerm] = useState("")
+  const [selectedRegion, setSelectedRegion] = useState("")
+  const [selectedGender, setSelectedGender] = useState("")
+  const [selectedSource, setSelectedSource] = useState("")
+  const [selectedProject, setSelectedProject] = useState("")
+
+  // Filter customers based on search and filters
+  const filteredCustomers = customersData.filter((customer) => {
+    const matchesSearch =
+      customer.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      customer.wechatId.toLowerCase().includes(searchTerm.toLowerCase())
+
+    const matchesRegion = selectedRegion ? customer.region === selectedRegion : true
+    const matchesGender = selectedGender ? customer.gender === selectedGender : true
+    const matchesSource = selectedSource ? customer.source === selectedSource : true
+    const matchesProject = selectedProject ? customer.projectName === selectedProject : true
+
+    return matchesSearch && matchesRegion && matchesGender && matchesSource && matchesProject
+  })
+
+  // Get unique values for filters
+  const regions = [...new Set(customersData.map((c) => c.region))]
+  const sources = [...new Set(customersData.map((c) => c.source))]
+  const projects = [...new Set(customersData.map((c) => c.projectName))]
+
+  return (
+    <div className="space-y-6">
+      <div className="flex justify-between">
+        <h1 className="text-2xl font-bold">客户池</h1>
+        <Button>
+          <UserPlus className="mr-2 h-4 w-4" /> 批量分发
+        </Button>
+      </div>
+
+      <div className="flex flex-col gap-4">
+        <div className="flex items-center gap-2">
+          <div className="relative flex-1">
+            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+            <Input
+              type="search"
+              placeholder="搜索客户名称或微信ID..."
+              className="pl-8"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+          </div>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline">
+                <Filter className="mr-2 h-4 w-4" /> 筛选
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-[200px]">
+              <div className="p-2">
+                <p className="mb-2 text-sm font-medium">地区</p>
+                <Select value={selectedRegion} onValueChange={setSelectedRegion}>
+                  <SelectTrigger>
+                    <SelectValue placeholder="所有地区" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">所有地区</SelectItem>
+                    {regions.map((region) => (
+                      <SelectItem key={region} value={region}>
+                        {region}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <DropdownMenuSeparator />
+              <div className="p-2">
+                <p className="mb-2 text-sm font-medium">性别</p>
+                <Select value={selectedGender} onValueChange={setSelectedGender}>
+                  <SelectTrigger>
+                    <SelectValue placeholder="所有性别" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">所有性别</SelectItem>
+                    <SelectItem value="男">男</SelectItem>
+                    <SelectItem value="女">女</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <DropdownMenuSeparator />
+              <div className="p-2">
+                <p className="mb-2 text-sm font-medium">来源</p>
+                <Select value={selectedSource} onValueChange={setSelectedSource}>
+                  <SelectTrigger>
+                    <SelectValue placeholder="所有来源" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">所有来源</SelectItem>
+                    {sources.map((source) => (
+                      <SelectItem key={source} value={source}>
+                        {source}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <DropdownMenuSeparator />
+              <div className="p-2">
+                <p className="mb-2 text-sm font-medium">所属项目</p>
+                <Select value={selectedProject} onValueChange={setSelectedProject}>
+                  <SelectTrigger>
+                    <SelectValue placeholder="所有项目" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">所有项目</SelectItem>
+                    {projects.map((project) => (
+                      <SelectItem key={project} value={project}>
+                        {project}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+
+        <div className="rounded-md border">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>客户信息</TableHead>
+                <TableHead>微信ID</TableHead>
+                <TableHead>标签</TableHead>
+                <TableHead>地区</TableHead>
+                <TableHead>来源</TableHead>
+                <TableHead>所属项目</TableHead>
+                <TableHead>添加时间</TableHead>
+                <TableHead className="text-right">操作</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {filteredCustomers.length > 0 ? (
+                filteredCustomers.map((customer) => (
+                  <TableRow key={customer.id}>
+                    <TableCell>
+                      <div className="flex items-center gap-3">
+                        <Avatar>
+                          <AvatarImage src={customer.avatar} alt={customer.name} />
+                          <AvatarFallback>{customer.name.slice(0, 2)}</AvatarFallback>
+                        </Avatar>
+                        <div>
+                          <div className="font-medium">{customer.name}</div>
+                          <div className="text-xs text-muted-foreground">{customer.gender}</div>
+                        </div>
+                      </div>
+                    </TableCell>
+                    <TableCell>{customer.wechatId}</TableCell>
+                    <TableCell>
+                      <div className="flex flex-wrap gap-1">
+                        {customer.tags.map((tag) => (
+                          <Badge key={tag} variant="outline">
+                            {tag}
+                          </Badge>
+                        ))}
+                      </div>
+                    </TableCell>
+                    <TableCell>{customer.region}</TableCell>
+                    <TableCell>{customer.source}</TableCell>
+                    <TableCell>{customer.projectName}</TableCell>
+                    <TableCell>{customer.addedDate}</TableCell>
+                    <TableCell className="text-right">
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button variant="ghost" size="icon">
+                            <MoreHorizontal className="h-4 w-4" />
+                            <span className="sr-only">打开菜单</span>
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                          <DropdownMenuItem asChild>
+                            <Link href={`/dashboard/customers/${customer.id}`}>
+                              <Eye className="mr-2 h-4 w-4" /> 查看详情
+                            </Link>
+                          </DropdownMenuItem>
+                          <DropdownMenuItem>
+                            <UserPlus className="mr-2 h-4 w-4" /> 分发客户
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </TableCell>
+                  </TableRow>
+                ))
+              ) : (
+                <TableRow>
+                  <TableCell colSpan={8} className="h-24 text-center">
+                    未找到客户
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+    </div>
+  )
+}
+