超管后台 - 对接获取管理员列表

SuperAdmin/app/dashboard/admins/page.tsx

@@ -1,15 +1,17 @@
 "use client"
 
-import { useState } from "react"
+import { useState, useEffect } 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 } from "@/components/ui/dropdown-menu"
-import { Search, MoreHorizontal, Edit, Trash, UserPlus } from "lucide-react"
+import { Search, MoreHorizontal, Edit, Trash, UserPlus, Loader2 } from "lucide-react"
 import { Badge } from "@/components/ui/badge"
+import { useToast } from "@/components/ui/use-toast"
+import { getAdministrators, Administrator } from "@/lib/admin-api"
 
-// Sample admin data
+// 保留原始示例数据，作为加载失败时的备用数据
 const adminsData = [
   {
     id: "1",
@@ -51,13 +53,75 @@ const adminsData = [
 
 export default function AdminsPage() {
   const [searchTerm, setSearchTerm] = useState("")
+  const [isLoading, setIsLoading] = useState(true)
+  const [administrators, setAdministrators] = useState<Administrator[]>([])
+  const [totalCount, setTotalCount] = useState(0)
+  const [currentPage, setCurrentPage] = useState(1)
+  const [pageSize] = useState(10)
+  const { toast } = useToast()
 
-  const filteredAdmins = adminsData.filter(
-    (admin) =>
-      admin.username.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      admin.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      admin.role.toLowerCase().includes(searchTerm.toLowerCase()),
-  )
+  // 加载管理员列表
+  useEffect(() => {
+    fetchAdministrators()
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentPage])
+
+  // 获取管理员列表
+  const fetchAdministrators = async (keyword: string = searchTerm) => {
+    setIsLoading(true)
+    try {
+      const response = await getAdministrators(currentPage, pageSize, keyword)
+      if (response.code === 200 && response.data) {
+        setAdministrators(response.data.list)
+        setTotalCount(response.data.total)
+      } else {
+        toast({
+          title: "获取管理员列表失败",
+          description: response.msg || "请稍后重试",
+          variant: "destructive",
+        })
+        // 加载失败时显示示例数据
+        setAdministrators(adminsData.map(admin => ({
+          ...admin,
+          id: Number(admin.id)
+        })) as Administrator[])
+        setTotalCount(adminsData.length)
+      }
+    } catch (error) {
+      console.error("获取管理员列表出错:", error)
+      toast({
+        title: "获取管理员列表失败",
+        description: "请检查网络连接后重试",
+        variant: "destructive",
+      })
+      // 加载失败时显示示例数据
+      setAdministrators(adminsData.map(admin => ({
+        ...admin,
+        id: Number(admin.id)
+      })) as Administrator[])
+      setTotalCount(adminsData.length)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  // 处理搜索
+  const handleSearch = () => {
+    setCurrentPage(1) // 重置为第一页
+    fetchAdministrators()
+  }
+
+  // Enter键搜索
+  const handleSearchKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      handleSearch()
+    }
+  }
+
+  // 检查是否为超级管理员（id为1）
+  const isSuperAdmin = (id: number) => {
+    return id === 1
+  }
 
   return (
     <div className="space-y-6">
@@ -79,8 +143,10 @@ export default function AdminsPage() {
             className="pl-8"
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
+            onKeyDown={handleSearchKeyDown}
           />
         </div>
+        <Button onClick={handleSearch}>搜索</Button>
       </div>
 
       <div className="rounded-md border">
@@ -97,8 +163,16 @@ export default function AdminsPage() {
             </TableRow>
           </TableHeader>
           <TableBody>
-            {filteredAdmins.length > 0 ? (
-              filteredAdmins.map((admin) => (
+            {isLoading ? (
+              <TableRow>
+                <TableCell colSpan={7} className="h-24 text-center">
+                  <div className="flex justify-center">
+                    <Loader2 className="h-6 w-6 animate-spin text-primary" />
+                  </div>
+                </TableCell>
+              </TableRow>
+            ) : administrators.length > 0 ? (
+              administrators.map((admin) => (
                 <TableRow key={admin.id}>
                   <TableCell className="font-medium">{admin.username}</TableCell>
                   <TableCell>{admin.name}</TableCell>
@@ -130,9 +204,11 @@ export default function AdminsPage() {
                             <Edit className="mr-2 h-4 w-4" /> 编辑管理员
                           </Link>
                         </DropdownMenuItem>
-                        <DropdownMenuItem className="text-destructive">
-                          <Trash className="mr-2 h-4 w-4" /> 删除管理员
-                        </DropdownMenuItem>
+                        {!isSuperAdmin(admin.id) && (
+                          <DropdownMenuItem className="text-destructive">
+                            <Trash className="mr-2 h-4 w-4" /> 删除管理员
+                          </DropdownMenuItem>
+                        )}
                       </DropdownMenuContent>
                     </DropdownMenu>
                   </TableCell>
@@ -148,6 +224,30 @@ export default function AdminsPage() {
           </TableBody>
         </Table>
       </div>
+
+      {totalCount > pageSize && (
+        <div className="flex justify-center gap-2 mt-4">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
+            disabled={currentPage === 1 || isLoading}
+          >
+            上一页
+          </Button>
+          <span className="py-2 px-4 text-sm">
+            第 {currentPage} 页 / 共 {Math.ceil(totalCount / pageSize)} 页
+          </span>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setCurrentPage((prev) => prev + 1)}
+            disabled={currentPage >= Math.ceil(totalCount / pageSize) || isLoading}
+          >
+            下一页
+          </Button>
+        </div>
+      )}
     </div>
   )
 }