330 lines
12 KiB
TypeScript
330 lines
12 KiB
TypeScript
"use client"
|
|
|
|
import type React from "react"
|
|
|
|
import { AdminNav } from "@/components/admin-nav"
|
|
import { ThemeToggle } from "@/components/theme-toggle"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
|
|
import { useToast } from "@/components/ui/use-toast"
|
|
import { useAuth } from "@/context/auth-context"
|
|
import { BookOpen, Lock, Search, Shield, ShieldAlert, ShieldCheck, Unlock } from "lucide-react"
|
|
import { useRouter } from "next/navigation"
|
|
import { useEffect, useState } from "react"
|
|
import { fetchWithAuth } from "@/lib/api"
|
|
|
|
interface Reader {
|
|
readerId: number
|
|
username: string
|
|
email: string
|
|
phone: string
|
|
isAdmin: boolean
|
|
isBanned: boolean
|
|
}
|
|
|
|
export default function AdminUsersPage() {
|
|
const { user } = useAuth()
|
|
const router = useRouter()
|
|
const { toast } = useToast()
|
|
const [readers, setReaders] = useState<Reader[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
const [searchTerm, setSearchTerm] = useState("")
|
|
const [filteredReaders, setFilteredReaders] = useState<Reader[]>([])
|
|
|
|
useEffect(() => {
|
|
// 检查用户是否登录且是管理员
|
|
if (!user) {
|
|
toast({
|
|
title: "请先登录",
|
|
description: "您需要登录后才能访问管理页面",
|
|
variant: "destructive",
|
|
})
|
|
router.push("/login")
|
|
return
|
|
}
|
|
|
|
if (!user.isAdmin) {
|
|
toast({
|
|
title: "权限不足",
|
|
description: "您没有管理员权限",
|
|
variant: "destructive",
|
|
})
|
|
router.push("/")
|
|
return
|
|
}
|
|
|
|
const fetchReaders = async () => {
|
|
try {
|
|
const response = await fetchWithAuth("reader/admin/all")
|
|
const result = await response.json()
|
|
|
|
if (result.code === 0) {
|
|
setReaders(result.data)
|
|
setFilteredReaders(result.data)
|
|
} else {
|
|
toast({
|
|
variant: "destructive",
|
|
title: "获取用户失败",
|
|
description: result.msg || "无法获取用户信息",
|
|
})
|
|
}
|
|
} catch (error) {
|
|
toast({
|
|
variant: "destructive",
|
|
title: "获取用户失败",
|
|
description: "服务器连接错误，请稍后再试",
|
|
})
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
fetchReaders()
|
|
}, [user, router, toast])
|
|
|
|
useEffect(() => {
|
|
if (searchTerm) {
|
|
const filtered = readers.filter(
|
|
(reader) =>
|
|
reader.username.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
reader.email.toLowerCase().includes(searchTerm.toLowerCase()),
|
|
)
|
|
setFilteredReaders(filtered)
|
|
} else {
|
|
setFilteredReaders(readers)
|
|
}
|
|
}, [searchTerm, readers])
|
|
|
|
const handleSearch = (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
}
|
|
|
|
const handleToggleAdmin = async (readerId: number, isAdmin: boolean) => {
|
|
try {
|
|
const url = isAdmin ? `reader/admin/${readerId}/remove-admin` : `reader/admin/${readerId}/make-admin`
|
|
|
|
const response = await fetchWithAuth(url, {
|
|
method: "PUT",
|
|
})
|
|
|
|
const result = await response.json()
|
|
|
|
if (result.code === 0) {
|
|
toast({
|
|
title: "操作成功",
|
|
description: isAdmin ? "已移除管理员权限" : "已设为管理员",
|
|
})
|
|
|
|
// 更新本地状态
|
|
const updatedReaders = readers.map((reader) =>
|
|
reader.readerId === readerId ? { ...reader, isAdmin: !isAdmin } : reader,
|
|
)
|
|
setReaders(updatedReaders)
|
|
|
|
// 如果有搜索词，也更新过滤后的列表
|
|
if (searchTerm) {
|
|
const updatedFiltered = filteredReaders.map((reader) =>
|
|
reader.readerId === readerId ? { ...reader, isAdmin: !isAdmin } : reader,
|
|
)
|
|
setFilteredReaders(updatedFiltered)
|
|
}
|
|
} else {
|
|
toast({
|
|
variant: "destructive",
|
|
title: "操作失败",
|
|
description: result.msg || "无法更改用户权限",
|
|
})
|
|
}
|
|
} catch (error) {
|
|
toast({
|
|
variant: "destructive",
|
|
title: "操作失败",
|
|
description: "服务器连接错误，请稍后再试",
|
|
})
|
|
}
|
|
}
|
|
|
|
const handleToggleBan = async (readerId: number, isBanned: boolean) => {
|
|
try {
|
|
const url = isBanned ? `reader/admin/${readerId}/unban` : `reader/admin/${readerId}/ban`
|
|
|
|
const response = await fetchWithAuth(url, {
|
|
method: "PUT",
|
|
})
|
|
|
|
const result = await response.json()
|
|
|
|
if (result.code === 0) {
|
|
toast({
|
|
title: "操作成功",
|
|
description: isBanned ? "已解除封禁" : "已封禁用户",
|
|
})
|
|
|
|
// 更新本地状态
|
|
const updatedReaders = readers.map((reader) =>
|
|
reader.readerId === readerId ? { ...reader, isBanned: !isBanned } : reader,
|
|
)
|
|
setReaders(updatedReaders)
|
|
|
|
// 如果有搜索词，也更新过滤后的列表
|
|
if (searchTerm) {
|
|
const updatedFiltered = filteredReaders.map((reader) =>
|
|
reader.readerId === readerId ? { ...reader, isBanned: !isBanned } : reader,
|
|
)
|
|
setFilteredReaders(updatedFiltered)
|
|
}
|
|
} else {
|
|
toast({
|
|
variant: "destructive",
|
|
title: "操作失败",
|
|
description: result.msg || "无法更改用户状态",
|
|
})
|
|
}
|
|
} catch (error) {
|
|
toast({
|
|
variant: "destructive",
|
|
title: "操作失败",
|
|
description: "服务器连接错误，请稍后再试",
|
|
})
|
|
}
|
|
}
|
|
|
|
if (!user || !user.isAdmin) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<div className="flex min-h-screen flex-col">
|
|
<header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
|
<div className="container flex h-16 items-center justify-between">
|
|
<div className="flex items-center gap-2 font-semibold">
|
|
<BookOpen className="h-6 w-6" />
|
|
<span>图书管理系统 - 管理后台</span>
|
|
</div>
|
|
<div className="flex items-center gap-4">
|
|
<ThemeToggle />
|
|
<Button variant="ghost" onClick={() => router.push("/")}>
|
|
返回前台
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<div className="flex flex-1">
|
|
<AdminNav />
|
|
<main className="flex-1 p-6">
|
|
<div className="space-y-6">
|
|
<h1 className="text-3xl font-bold">用户管理</h1>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>用户列表</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form onSubmit={handleSearch} className="flex w-full max-w-sm items-center space-x-2 mb-6">
|
|
<Input
|
|
type="search"
|
|
placeholder="搜索用户名或邮箱..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
/>
|
|
<Button type="submit">
|
|
<Search className="h-4 w-4" />
|
|
</Button>
|
|
</form>
|
|
|
|
{loading ? (
|
|
<div className="flex justify-center items-center h-[400px]">
|
|
<div className="animate-pulse text-xl">加载中...</div>
|
|
</div>
|
|
) : filteredReaders.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center py-12">
|
|
<Shield className="h-12 w-12 text-muted-foreground mb-4" />
|
|
<h2 className="text-xl font-semibold">没有找到用户</h2>
|
|
<p className="text-muted-foreground mt-2">
|
|
{searchTerm ? "尝试使用不同的搜索词" : "系统中还没有用户"}
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="rounded-md border">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>ID</TableHead>
|
|
<TableHead>用户名</TableHead>
|
|
<TableHead>邮箱</TableHead>
|
|
<TableHead>电话</TableHead>
|
|
<TableHead>状态</TableHead>
|
|
<TableHead>角色</TableHead>
|
|
<TableHead>操作</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{filteredReaders.map((reader) => (
|
|
<TableRow key={reader.readerId}>
|
|
<TableCell>{reader.readerId}</TableCell>
|
|
<TableCell className="font-medium">{reader.username}</TableCell>
|
|
<TableCell>{reader.email}</TableCell>
|
|
<TableCell>{reader.phone}</TableCell>
|
|
<TableCell>
|
|
{reader.isBanned ? (
|
|
<span className="flex items-center text-destructive">
|
|
<Lock className="mr-1 h-4 w-4" />
|
|
已封禁
|
|
</span>
|
|
) : (
|
|
<span className="flex items-center text-green-600 dark:text-green-400">
|
|
<Unlock className="mr-1 h-4 w-4" />
|
|
正常
|
|
</span>
|
|
)}
|
|
</TableCell>
|
|
<TableCell>
|
|
{reader.isAdmin ? (
|
|
<span className="flex items-center text-amber-600 dark:text-amber-400">
|
|
<ShieldAlert className="mr-1 h-4 w-4" />
|
|
管理员
|
|
</span>
|
|
) : (
|
|
<span className="flex items-center">
|
|
<ShieldCheck className="mr-1 h-4 w-4" />
|
|
普通用户
|
|
</span>
|
|
)}
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="flex space-x-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => handleToggleAdmin(reader.readerId, reader.isAdmin)}
|
|
disabled={reader.readerId === user.readerId}
|
|
>
|
|
{reader.isAdmin ? "移除管理员" : "设为管理员"}
|
|
</Button>
|
|
<Button
|
|
variant={reader.isBanned ? "outline" : "destructive"}
|
|
size="sm"
|
|
onClick={() => handleToggleBan(reader.readerId, reader.isBanned)}
|
|
disabled={reader.readerId === user.readerId}
|
|
>
|
|
{reader.isBanned ? "解除封禁" : "封禁"}
|
|
</Button>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|