355 lines
13 KiB
TypeScript
355 lines
13 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 {
|
|
Pagination,
|
|
PaginationContent,
|
|
PaginationItem,
|
|
PaginationLink,
|
|
PaginationNext,
|
|
PaginationPrevious,
|
|
} from "@/components/ui/pagination"
|
|
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, Edit, Eye, Plus, Search, Trash2 } from "lucide-react"
|
|
import Link from "next/link"
|
|
import { useRouter } from "next/navigation"
|
|
import { useEffect, useState } from "react"
|
|
import { fetchWithAuth } from "@/lib/api"
|
|
|
|
interface Book {
|
|
bookId: number
|
|
title: string
|
|
isbn: string
|
|
price: number
|
|
stock: number
|
|
publishDate: string
|
|
publisherName: string
|
|
description: string
|
|
coverImage: string
|
|
author: string[]
|
|
}
|
|
|
|
interface BooksResponse {
|
|
pageNum: number
|
|
pageSize: number
|
|
total: number
|
|
data: Book[]
|
|
}
|
|
|
|
export default function AdminBooksPage() {
|
|
const { user } = useAuth()
|
|
const router = useRouter()
|
|
const { toast } = useToast()
|
|
const [books, setBooks] = useState<BooksResponse | null>(null)
|
|
const [loading, setLoading] = useState(true)
|
|
const [currentPage, setCurrentPage] = useState(1)
|
|
const [searchTerm, setSearchTerm] = useState("")
|
|
|
|
useEffect(() => {
|
|
// 检查用户是否登录且是管理员
|
|
if (!user) {
|
|
toast({
|
|
title: "请先登录",
|
|
description: "您需要登录后才能访问管理页面",
|
|
variant: "destructive",
|
|
})
|
|
router.push("/login")
|
|
return
|
|
}
|
|
|
|
if (!user.isAdmin) {
|
|
toast({
|
|
title: "权限不足",
|
|
description: "您没有管理员权限",
|
|
variant: "destructive",
|
|
})
|
|
router.push("/")
|
|
return
|
|
}
|
|
|
|
const fetchBooks = async () => {
|
|
setLoading(true)
|
|
try {
|
|
let url = `book/all?pageNum=${currentPage}&pageSize=10`
|
|
|
|
if (searchTerm) {
|
|
url = `book/search/title?title=${encodeURIComponent(searchTerm)}&pageNum=${currentPage}&pageSize=10`
|
|
}
|
|
|
|
const response = await fetchWithAuth(url)
|
|
const result = await response.json()
|
|
|
|
if (result.code === 0) {
|
|
setBooks(result.data)
|
|
} else {
|
|
toast({
|
|
variant: "destructive",
|
|
title: "获取图书失败",
|
|
description: result.msg || "无法获取图书信息",
|
|
})
|
|
}
|
|
} catch (error) {
|
|
toast({
|
|
variant: "destructive",
|
|
title: "获取图书失败",
|
|
description: "服务器连接错误，请稍后再试",
|
|
})
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
fetchBooks()
|
|
}, [user, router, toast, currentPage, searchTerm])
|
|
|
|
const handlePageChange = (page: number) => {
|
|
setCurrentPage(page)
|
|
}
|
|
|
|
const handleSearch = (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
setCurrentPage(1)
|
|
}
|
|
|
|
const handleDeleteBook = async (bookId: number) => {
|
|
if (confirm("确定要删除这本图书吗？此操作不可撤销。")) {
|
|
try {
|
|
const response = await fetchWithAuth(`book/admin/delete/${bookId}`, {
|
|
method: "DELETE",
|
|
})
|
|
|
|
const result = await response.json()
|
|
|
|
if (result.code === 0) {
|
|
toast({
|
|
title: "删除成功",
|
|
description: "图书已成功删除",
|
|
})
|
|
|
|
// 刷新图书列表
|
|
if (books && books.data.length === 1 && currentPage > 1) {
|
|
setCurrentPage(currentPage - 1)
|
|
} else {
|
|
// 保持在当前页，但刷新数据
|
|
const updatedBooks = { ...books } as BooksResponse
|
|
updatedBooks.data = updatedBooks.data.filter((book) => book.bookId !== bookId)
|
|
updatedBooks.total -= 1
|
|
setBooks(updatedBooks)
|
|
}
|
|
} 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">
|
|
<div className="flex justify-between items-center">
|
|
<h1 className="text-3xl font-bold">图书管理</h1>
|
|
<Link href="/admin/books/add">
|
|
<Button>
|
|
<Plus className="mr-2 h-4 w-4" />
|
|
添加图书
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
|
|
<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>
|
|
) : !books || books.data.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center py-12">
|
|
<BookOpen 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>
|
|
{!searchTerm && (
|
|
<Link href="/admin/books/add">
|
|
<Button className="mt-4">
|
|
<Plus className="mr-2 h-4 w-4" />
|
|
添加图书
|
|
</Button>
|
|
</Link>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="rounded-md border">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>ID</TableHead>
|
|
<TableHead>标题</TableHead>
|
|
<TableHead>ISBN</TableHead>
|
|
<TableHead>价格</TableHead>
|
|
<TableHead>库存</TableHead>
|
|
<TableHead>出版社</TableHead>
|
|
<TableHead>操作</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{books.data.map((book) => (
|
|
<TableRow key={book.bookId}>
|
|
<TableCell>{book.bookId}</TableCell>
|
|
<TableCell className="font-medium">{book.title}</TableCell>
|
|
<TableCell>{book.isbn}</TableCell>
|
|
<TableCell>¥{book.price.toFixed(2)}</TableCell>
|
|
<TableCell>{book.stock}</TableCell>
|
|
<TableCell>{book.publisherName}</TableCell>
|
|
<TableCell>
|
|
<div className="flex space-x-2">
|
|
<Link href={`/books/${book.bookId}`}>
|
|
<Button variant="outline" size="icon" title="查看详情">
|
|
<Eye className="h-4 w-4" />
|
|
</Button>
|
|
</Link>
|
|
<Link href={`/admin/books/edit/${book.bookId}`}>
|
|
<Button variant="outline" size="icon" title="编辑图书">
|
|
<Edit className="h-4 w-4" />
|
|
</Button>
|
|
</Link>
|
|
<Button
|
|
variant="outline"
|
|
size="icon"
|
|
className="text-destructive"
|
|
title="删除图书"
|
|
onClick={() => handleDeleteBook(book.bookId)}
|
|
>
|
|
<Trash2 className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
|
|
{books.total > books.pageSize && (
|
|
<Pagination className="mt-6">
|
|
<PaginationContent>
|
|
<PaginationItem>
|
|
<PaginationPrevious
|
|
href="#"
|
|
onClick={(e) => {
|
|
e.preventDefault()
|
|
if (currentPage > 1) handlePageChange(currentPage - 1)
|
|
}}
|
|
className={currentPage === 1 ? "pointer-events-none opacity-50" : ""}
|
|
/>
|
|
</PaginationItem>
|
|
|
|
{Array.from({ length: Math.min(5, Math.ceil(books.total / books.pageSize)) }).map(
|
|
(_, index) => {
|
|
let pageNumber = currentPage - 2 + index
|
|
if (pageNumber < 1) pageNumber = index + 1
|
|
if (pageNumber > Math.ceil(books.total / books.pageSize))
|
|
pageNumber = Math.ceil(books.total / books.pageSize) - (4 - index)
|
|
|
|
return (
|
|
<PaginationItem key={index}>
|
|
<PaginationLink
|
|
href="#"
|
|
onClick={(e) => {
|
|
e.preventDefault()
|
|
handlePageChange(pageNumber)
|
|
}}
|
|
isActive={currentPage === pageNumber}
|
|
>
|
|
{pageNumber}
|
|
</PaginationLink>
|
|
</PaginationItem>
|
|
)
|
|
},
|
|
)}
|
|
|
|
<PaginationItem>
|
|
<PaginationNext
|
|
href="#"
|
|
onClick={(e) => {
|
|
e.preventDefault()
|
|
if (currentPage < Math.ceil(books.total / books.pageSize)) {
|
|
handlePageChange(currentPage + 1)
|
|
}
|
|
}}
|
|
className={
|
|
currentPage >= Math.ceil(books.total / books.pageSize)
|
|
? "pointer-events-none opacity-50"
|
|
: ""
|
|
}
|
|
/>
|
|
</PaginationItem>
|
|
</PaginationContent>
|
|
</Pagination>
|
|
)}
|
|
</>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|