diff --git a/SuperAdmin/app/dashboard/admins/page.tsx b/SuperAdmin/app/dashboard/admins/page.tsx index 1713c62a..2a8d73c5 100644 --- a/SuperAdmin/app/dashboard/admins/page.tsx +++ b/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([]) + 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) => { + if (e.key === "Enter") { + handleSearch() + } + } + + // 检查是否为超级管理员(id为1) + const isSuperAdmin = (id: number) => { + return id === 1 + } return (
@@ -79,8 +143,10 @@ export default function AdminsPage() { className="pl-8" value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} + onKeyDown={handleSearchKeyDown} />
+
@@ -97,8 +163,16 @@ export default function AdminsPage() { - {filteredAdmins.length > 0 ? ( - filteredAdmins.map((admin) => ( + {isLoading ? ( + + +
+ +
+
+
+ ) : administrators.length > 0 ? ( + administrators.map((admin) => ( {admin.username} {admin.name} @@ -130,9 +204,11 @@ export default function AdminsPage() { 编辑管理员 - - 删除管理员 - + {!isSuperAdmin(admin.id) && ( + + 删除管理员 + + )} @@ -148,6 +224,30 @@ export default function AdminsPage() {
+ + {totalCount > pageSize && ( +
+ + + 第 {currentPage} 页 / 共 {Math.ceil(totalCount / pageSize)} 页 + + +
+ )} ) } diff --git a/SuperAdmin/lib/admin-api.ts b/SuperAdmin/lib/admin-api.ts new file mode 100644 index 00000000..4095a8f5 --- /dev/null +++ b/SuperAdmin/lib/admin-api.ts @@ -0,0 +1,74 @@ +import { getConfig } from './config'; + +// 管理员接口数据类型定义 +export interface Administrator { + id: number; + username: string; + name: string; + role: string; + status: number; + createdAt: string; + lastLogin: string; + permissions: string[]; +} + +// 分页响应数据类型 +export interface PaginatedResponse { + list: T[]; + total: number; + page: number; + limit: number; +} + +// API响应数据结构 +export interface ApiResponse { + code: number; + msg: string; + data: T | null; +} + +/** + * 获取管理员列表 + * @param page 页码 + * @param limit 每页数量 + * @param keyword 搜索关键词 + * @returns 管理员列表 + */ +export async function getAdministrators( + page: number = 1, + limit: number = 10, + keyword: string = '' +): Promise>> { + const { apiBaseUrl } = getConfig(); + + // 构建查询参数 + const params = new URLSearchParams(); + params.append('page', page.toString()); + params.append('limit', limit.toString()); + if (keyword) { + params.append('keyword', keyword); + } + + try { + // 发送请求 + const response = await fetch(`${apiBaseUrl}/administrator/list?${params.toString()}`, { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + }, + }); + + if (!response.ok) { + throw new Error(`请求失败,状态码: ${response.status}`); + } + + return await response.json(); + } catch (error) { + console.error('获取管理员列表失败:', error); + return { + code: 500, + msg: '获取管理员列表失败', + data: null + }; + } +} \ No newline at end of file diff --git a/SuperAdmin/lib/config.ts b/SuperAdmin/lib/config.ts new file mode 100644 index 00000000..421e1f54 --- /dev/null +++ b/SuperAdmin/lib/config.ts @@ -0,0 +1,12 @@ +/** + * 获取应用配置 + * @returns 应用配置 + */ +export function getConfig() { + // 优先获取环境变量中配置的API地址 + const apiBaseUrl = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://yishi.com'; + + return { + apiBaseUrl + }; +} \ No newline at end of file