252 lines
8.9 KiB
TypeScript
252 lines
8.9 KiB
TypeScript
import { useState } from 'react'
|
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Badge } from '@/components/ui/badge'
|
|
import { Skeleton } from '@/components/ui/skeleton'
|
|
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
|
|
import {
|
|
FolderOpen,
|
|
FolderPlus,
|
|
MoreVertical,
|
|
Edit,
|
|
Trash,
|
|
Plus,
|
|
Search,
|
|
TreePine
|
|
} from 'lucide-react'
|
|
import { toast } from 'sonner'
|
|
import { categoryService } from '@/services/categoryService'
|
|
|
|
export default function Categories() {
|
|
const queryClient = useQueryClient()
|
|
const [search, setSearch] = useState('')
|
|
|
|
// 获取分类树
|
|
const { data: categories, isLoading: categoriesLoading } = useQuery({
|
|
queryKey: ['categories-tree'],
|
|
queryFn: categoryService.getCategoryTree
|
|
})
|
|
|
|
// 获取分类统计
|
|
const { data: stats, isLoading: statsLoading } = useQuery({
|
|
queryKey: ['category-stats'],
|
|
queryFn: categoryService.getStats
|
|
})
|
|
|
|
// 删除分类
|
|
const deleteCategoryMutation = useMutation({
|
|
mutationFn: categoryService.deleteCategory,
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['categories-tree'] })
|
|
queryClient.invalidateQueries({ queryKey: ['category-stats'] })
|
|
toast.success('分类删除成功')
|
|
},
|
|
onError: (error: any) => {
|
|
toast.error(error?.message || '删除失败')
|
|
}
|
|
})
|
|
|
|
const handleDeleteCategory = (categoryId: number) => {
|
|
if (confirm('确定要删除这个分类吗？')) {
|
|
deleteCategoryMutation.mutate(categoryId)
|
|
}
|
|
}
|
|
|
|
const renderCategoryTree = (categories: any[], level = 0) => {
|
|
return categories?.map((category) => (
|
|
<div key={category.id} className="mb-2">
|
|
<div className={`flex items-center justify-between p-3 border rounded-lg ${level > 0 ? 'ml-6 border-l-4 border-l-primary/20' : ''}`}>
|
|
<div className="flex items-center space-x-3">
|
|
<FolderOpen className="h-5 w-5 text-blue-500" />
|
|
<div>
|
|
<div className="flex items-center space-x-2">
|
|
<span className="font-medium">{category.name}</span>
|
|
<Badge variant={category.isActive ? 'default' : 'secondary'}>
|
|
{category.isActive ? '启用' : '禁用'}
|
|
</Badge>
|
|
<Badge variant="outline">
|
|
{category.photoCount} 张照片
|
|
</Badge>
|
|
</div>
|
|
{category.description && (
|
|
<p className="text-sm text-muted-foreground mt-1">{category.description}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" size="sm">
|
|
<MoreVertical className="h-4 w-4" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuItem>
|
|
<Edit className="h-4 w-4 mr-2" />
|
|
编辑
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<FolderPlus className="h-4 w-4 mr-2" />
|
|
添加子分类
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
onClick={() => handleDeleteCategory(category.id)}
|
|
disabled={category.photoCount > 0 || category.children?.length > 0}
|
|
>
|
|
<Trash className="h-4 w-4 mr-2" />
|
|
删除
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
|
|
{category.children && category.children.length > 0 && (
|
|
<div className="mt-2">
|
|
{renderCategoryTree(category.children, level + 1)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))
|
|
}
|
|
|
|
return (
|
|
<div className="container mx-auto px-4 py-8">
|
|
{/* 页面头部 */}
|
|
<div className="flex items-center justify-between mb-8">
|
|
<div>
|
|
<h1 className="text-3xl font-bold">分类管理</h1>
|
|
<p className="text-muted-foreground mt-1">
|
|
管理照片分类和相册结构
|
|
</p>
|
|
</div>
|
|
<Button className="flex items-center gap-2">
|
|
<Plus className="h-4 w-4" />
|
|
新建分类
|
|
</Button>
|
|
</div>
|
|
|
|
{/* 统计卡片 */}
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">总分类数</CardTitle>
|
|
<FolderOpen className="h-4 w-4 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
{statsLoading ? (
|
|
<Skeleton className="h-8 w-20" />
|
|
) : (
|
|
<div className="text-2xl font-bold">{stats?.total || 0}</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">活跃分类</CardTitle>
|
|
<TreePine className="h-4 w-4 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
{statsLoading ? (
|
|
<Skeleton className="h-8 w-20" />
|
|
) : (
|
|
<div className="text-2xl font-bold text-green-600">{stats?.active || 0}</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">顶级分类</CardTitle>
|
|
<FolderOpen className="h-4 w-4 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
{statsLoading ? (
|
|
<Skeleton className="h-8 w-20" />
|
|
) : (
|
|
<div className="text-2xl font-bold text-blue-600">{stats?.topLevel || 0}</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">平均照片数</CardTitle>
|
|
<FolderOpen className="h-4 w-4 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
{statsLoading ? (
|
|
<Skeleton className="h-8 w-20" />
|
|
) : (
|
|
<div className="text-2xl font-bold text-purple-600">
|
|
{stats?.total ? Math.round(Object.values(stats.photoCounts || {}).reduce((a, b) => a + b, 0) / stats.total) : 0}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* 搜索栏 */}
|
|
<Card className="mb-6">
|
|
<CardContent className="pt-6">
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex-1 relative">
|
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
|
|
<Input
|
|
placeholder="搜索分类..."
|
|
value={search}
|
|
onChange={(e) => setSearch(e.target.value)}
|
|
className="pl-10"
|
|
/>
|
|
</div>
|
|
<Button variant="outline">
|
|
<TreePine className="h-4 w-4 mr-2" />
|
|
树形视图
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* 分类列表 */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>分类结构</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{categoriesLoading ? (
|
|
<div className="space-y-4">
|
|
{[...Array(5)].map((_, i) => (
|
|
<div key={i} className="flex items-center gap-4 p-4 border rounded-lg">
|
|
<Skeleton className="h-5 w-5" />
|
|
<div className="flex-1 space-y-2">
|
|
<Skeleton className="h-4 w-32" />
|
|
<Skeleton className="h-3 w-64" />
|
|
</div>
|
|
<Skeleton className="h-8 w-8" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : categories?.length ? (
|
|
<div className="space-y-2">
|
|
{renderCategoryTree(categories)}
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-12">
|
|
<FolderOpen className="h-16 w-16 mx-auto mb-4 text-gray-300" />
|
|
<h3 className="text-lg font-medium mb-2">暂无分类</h3>
|
|
<p className="text-muted-foreground mb-4">
|
|
创建您的第一个分类来组织照片
|
|
</p>
|
|
<Button>
|
|
<Plus className="h-4 w-4 mr-2" />
|
|
创建分类
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)
|
|
} |