超管后台 - 简化项目代码，移除掉接口返回错误时使用的虚假模拟数据

SuperAdmin/app/dashboard/customers/page.tsx

@@ -20,94 +20,6 @@ import { getTrafficPoolList } from "@/lib/traffic-pool-api"
 import { Customer } from "@/lib/traffic-pool-api"
 import { PaginationControls } from "@/components/ui/pagination-controls"
 
-// 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("")
@@ -162,25 +74,6 @@ export default function CustomersPage() {
     setCurrentPage(1); // Reset to first page when page size changes
   };
 
-  // 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">
@@ -217,11 +110,7 @@ export default function CustomersPage() {
                   </SelectTrigger>
                   <SelectContent>
                     <SelectItem value="all">所有地区</SelectItem>
-                    {regions.map((region) => (
-                      <SelectItem key={region} value={region}>
-                        {region}
-                      </SelectItem>
-                    ))}
+                    {/* 从API获取到的regions数据应在此处映射 */}
                   </SelectContent>
                 </Select>
               </div>
@@ -248,28 +137,20 @@ export default function CustomersPage() {
                   </SelectTrigger>
                   <SelectContent>
                     <SelectItem value="all">所有来源</SelectItem>
-                    {sources.map((source) => (
-                      <SelectItem key={source} value={source}>
-                        {source}
-                      </SelectItem>
-                    ))}
+                    {/* 从API获取到的sources数据应在此处映射 */}
                   </SelectContent>
                 </Select>
               </div>
               <DropdownMenuSeparator />
               <div className="p-2">
-                <p className="mb-2 text-sm font-medium">所属项目</p>
+                <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>
-                    ))}
+                    {/* 从API获取到的projects数据应在此处映射 */}
                   </SelectContent>
                 </Select>
               </div>
@@ -277,16 +158,16 @@ export default function CustomersPage() {
           </DropdownMenu>
         </div>
 
-        <div className="rounded-md border">
+        <div className="border rounded-md">
           <Table>
             <TableHeader>
               <TableRow>
-                <TableHead>客户昵称</TableHead>
-                <TableHead>微信ID</TableHead>
+                <TableHead>姓名</TableHead>
                 <TableHead>性别</TableHead>
                 <TableHead>地区</TableHead>
                 <TableHead>来源</TableHead>
-                <TableHead>公司名称</TableHead>
+                <TableHead>标签</TableHead>
+                <TableHead>所属项目</TableHead>
                 <TableHead>添加时间</TableHead>
                 <TableHead className="text-right">操作</TableHead>
               </TableRow>
@@ -294,45 +175,45 @@ export default function CustomersPage() {
             <TableBody>
               {isLoading ? (
                 <TableRow>
-                  <TableCell colSpan={8} className="h-24 text-center">
-                    加载中...
-                  </TableCell>
+                  <TableCell colSpan={8} className="text-center py-4">加载中...</TableCell>
                 </TableRow>
               ) : error ? (
                 <TableRow>
-                  <TableCell colSpan={8} className="h-24 text-center text-red-600">
-                    {error}
-                  </TableCell>
+                  <TableCell colSpan={8} className="text-center py-4 text-red-500">{error}</TableCell>
                 </TableRow>
-              ) : customers.length > 0 ? (
+              ) : customers.length === 0 ? (
+                <TableRow>
+                  <TableCell colSpan={8} className="text-center py-4">没有符合条件的客户</TableCell>
+                </TableRow>
+              ) : (
                 customers.map((customer) => (
                   <TableRow key={customer.id}>
                     <TableCell>
-                      <div className="flex items-center gap-3">
-                        <Avatar>
-                          <AvatarImage 
-                            src={customer.avatar || "/placeholder.svg?height=40&width=40"} 
-                            alt={customer.nickname || "未知"} 
-                            onError={(e) => {
-                              // 图片加载失败时使用默认图片
-                              const target = e.target as HTMLImageElement;
-                              target.src = "/placeholder.svg?height=40&width=40";
-                            }}
-                          />
-                          <AvatarFallback>{(customer.nickname || "未知").slice(0, 2)}</AvatarFallback>
+                      <div className="flex items-center gap-2">
+                        <Avatar className="h-8 w-8">
+                          <AvatarImage src={customer.avatar || "/placeholder.svg?height=40&width=40"} alt={customer.nickname} />
+                          <AvatarFallback>{customer.nickname ? customer.nickname.substring(0, 1) : "?"}</AvatarFallback>
                         </Avatar>
                         <div>
-                          <div className="font-medium">{customer.nickname || "未知"}</div>
-                          <div className="text-xs text-muted-foreground">{customer.gender}</div>
+                          <div className="font-medium">{customer.nickname}</div>
+                          <div className="text-sm text-muted-foreground">{customer.wechatId}</div>
                         </div>
                       </div>
                     </TableCell>
-                    <TableCell>{customer.wechatId}</TableCell>
                     <TableCell>{customer.gender}</TableCell>
                     <TableCell>{customer.region}</TableCell>
                     <TableCell>{customer.source}</TableCell>
-                    <TableCell>{customer.projectName}</TableCell>
-                    <TableCell>{customer.addTime}</TableCell>
+                    <TableCell>
+                      <div className="flex flex-wrap gap-1">
+                        {customer.tags && customer.tags.map((tag) => (
+                          <Badge key={tag} variant="secondary">
+                            {tag}
+                          </Badge>
+                        ))}
+                      </div>
+                    </TableCell>
+                    <TableCell>{customer.companyName}</TableCell>
+                    <TableCell>{customer.createTime}</TableCell>
                     <TableCell className="text-right">
                       <DropdownMenu>
                         <DropdownMenuTrigger asChild>
@@ -342,39 +223,41 @@ export default function CustomersPage() {
                           </Button>
                         </DropdownMenuTrigger>
                         <DropdownMenuContent align="end">
-                          <DropdownMenuItem asChild>
-                            <Link href={`/dashboard/customers/${customer.id}`}>
-                              <Eye className="mr-2 h-4 w-4" /> 查看详情
+                          <DropdownMenuItem>
+                            <Link href={`/dashboard/customers/${customer.id}`} className="flex items-center w-full">
+                              <Eye className="mr-2 h-4 w-4" />
+                              查看详情
                             </Link>
                           </DropdownMenuItem>
-                          <DropdownMenuItem>
-                            <UserPlus className="mr-2 h-4 w-4" /> 分发客户
-                          </DropdownMenuItem>
+                          <DropdownMenuSeparator />
+                          <DropdownMenuItem>分配客服</DropdownMenuItem>
+                          <DropdownMenuItem>添加标签</DropdownMenuItem>
                         </DropdownMenuContent>
                       </DropdownMenu>
                     </TableCell>
                   </TableRow>
                 ))
-              ) : (
-                <TableRow>
-                  <TableCell colSpan={8} className="h-24 text-center">
-                    未找到客户
-                  </TableCell>
-                </TableRow>
               )}
             </TableBody>
           </Table>
         </div>
-        
-        {/* 使用新的分页组件 */} 
-        <PaginationControls
-          currentPage={currentPage}
-          totalPages={totalPages}
-          pageSize={pageSize}
-          totalItems={totalItems}
-          onPageChange={setCurrentPage} // 直接传递setCurrentPage
-          onPageSizeChange={handlePageSizeChange}
-        />
+
+        {/* 分页控制 */}
+        <div className="flex items-center justify-between">
+          <div className="text-sm text-muted-foreground">
+            共 {totalItems} 条记录，第 {currentPage} 页，共 {totalPages} 页
+          </div>
+          <div className="flex items-center space-x-2">
+            <PaginationControls 
+              currentPage={currentPage}
+              totalPages={totalPages}
+              onPageChange={setCurrentPage}
+              onPageSizeChange={handlePageSizeChange}
+              pageSize={pageSize}
+              totalItems={totalItems}
+            />
+          </div>
+        </div>
       </div>
     </div>
   )