iriver/photography
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 完成前后端API联调测试并修复配置问题

Browse Source 
- 启动后端go-zero API服务 (端口8080)
- 修复前端API配置中的端口号 (8888→8080)
- 完善前端API状态监控组件
- 创建categoryService服务层
- 更新前端数据查询和转换逻辑
- 完成完整API集成测试，验证所有接口正常工作
- 验证用户认证、分类管理、照片管理等核心功能
- 创建API集成测试脚本
- 更新任务进度文档

测试结果:
✅ 后端健康检查正常
✅ 用户认证功能正常 (admin/admin123)
✅ 分类API正常 (5个分类)
✅ 照片API正常 (0张照片，数据库为空)
✅ 前后端API连接完全正常

下一步: 实现照片展示页面和搜索过滤功能
This commit is contained in:
xujiang
2025-07-11 11:42:14 +08:00
parent b26a05f089
commit af222afc33
20 changed files with 1760 additions and 258 deletions
Download Patch File Download Diff File Expand all files Collapse all files

442
admin/src/pages/Categories.tsx
View File

@ -6,6 +6,9 @@ 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 { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog'
import { Label } from '@/components/ui/label'
import { Textarea } from '@/components/ui/textarea'
import {
FolderOpen,
FolderPlus,
@ -14,14 +17,43 @@ import {
Trash,
Plus,
Search,
TreePine
TreePine,
ChevronDown,
ChevronRight,
Folder,
RefreshCw,
Eye,
EyeOff,
} from 'lucide-react'
import { toast } from 'sonner'
import { categoryService } from '@/services/categoryService'
interface CategoryWithChildren {
id: number
name: string
description: string
slug?: string
isActive?: boolean
photoCount?: number
children?: CategoryWithChildren[]
parentId?: number
}
export default function Categories() {
const queryClient = useQueryClient()
const [search, setSearch] = useState('')
const [expandedCategories, setExpandedCategories] = useState<Set<number>>(new Set())
// Dialog states
const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false)
const [isEditDialogOpen, setIsEditDialogOpen] = useState(false)
const [editingCategory, setEditingCategory] = useState<CategoryWithChildren | null>(null)
// Form state
const [categoryForm, setCategoryForm] = useState({
name: '',
description: ''
})
// 获取分类树
const { data: categories, isLoading: categoriesLoading } = useQuery({
@ -41,74 +73,241 @@ export default function Categories() {
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['categories-tree'] })
queryClient.invalidateQueries({ queryKey: ['category-stats'] })
queryClient.invalidateQueries({ queryKey: ['categories-all'] })
toast.success('分类删除成功')
},
onError: (error: any) => {
toast.error(error?.message || '删除失败')
}
})
// 创建分类
const createCategoryMutation = useMutation({
mutationFn: categoryService.createCategory,
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['categories-tree'] })
queryClient.invalidateQueries({ queryKey: ['category-stats'] })
queryClient.invalidateQueries({ queryKey: ['categories-all'] })
setIsCreateDialogOpen(false)
resetForm()
toast.success('分类创建成功')
},
onError: (error: any) => {
toast.error(error?.message || '创建失败')
}
})
// 更新分类
const updateCategoryMutation = useMutation({
mutationFn: ({ id, data }: { id: number, data: any }) =>
categoryService.updateCategory(id, data),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['categories-tree'] })
queryClient.invalidateQueries({ queryKey: ['category-stats'] })
queryClient.invalidateQueries({ queryKey: ['categories-all'] })
setIsEditDialogOpen(false)
setEditingCategory(null)
resetForm()
toast.success('分类更新成功')
},
onError: (error: any) => {
toast.error(error?.message || '更新失败')
}
})
// 重置表单
const resetForm = () => {
setCategoryForm({
name: '',
description: ''
})
}
// 处理删除分类
const handleDeleteCategory = (categoryId: number) => {
if (confirm('确定要删除这个分类吗？')) {
if (confirm('确定要删除这个分类吗？删除后不可恢复！')) {
deleteCategoryMutation.mutate(categoryId)
}
}
// 处理创建分类
const handleCreateCategory = () => {
resetForm()
setIsCreateDialogOpen(true)
}
// 处理编辑分类
const handleEditCategory = (category: CategoryWithChildren) => {
setEditingCategory(category)
setCategoryForm({
name: category.name,
description: category.description
})
setIsEditDialogOpen(true)
}
// 提交创建
const handleSubmitCreate = () => {
if (!categoryForm.name.trim()) {
toast.error('请输入分类名称')
return
}
createCategoryMutation.mutate({
name: categoryForm.name,
description: categoryForm.description
})
}
// 提交编辑
const handleSubmitEdit = () => {
if (!editingCategory) return
if (!categoryForm.name.trim()) {
toast.error('请输入分类名称')
return
}
updateCategoryMutation.mutate({
id: editingCategory.id,
data: {
name: categoryForm.name,
description: categoryForm.description
}
})
}
// 切换展开状态
const toggleExpanded = (categoryId: number) => {
const newExpanded = new Set(expandedCategories)
if (newExpanded.has(categoryId)) {
newExpanded.delete(categoryId)
} else {
newExpanded.add(categoryId)
}
setExpandedCategories(newExpanded)
}
// 刷新数据
const handleRefresh = () => {
queryClient.invalidateQueries({ queryKey: ['categories-tree'] })
queryClient.invalidateQueries({ queryKey: ['category-stats'] })
toast.success('数据已刷新')
}
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>
const renderCategoryTree = (categories: CategoryWithChildren[], level = 0) => {
const filteredCategories = categories?.filter(category =>
search === '' ||
category.name.toLowerCase().includes(search.toLowerCase()) ||
category.description.toLowerCase().includes(search.toLowerCase())
)
return filteredCategories?.map((category) => {
const hasChildren = category.children && category.children.length > 0
const isExpanded = expandedCategories.has(category.id)
return (
<div key={category.id} className="mb-2">
<div className={`flex items-center justify-between p-3 border rounded-lg hover:shadow-sm transition-shadow ${
level > 0 ? 'ml-6 border-l-4 border-l-primary/20' : ''
} ${category.isActive === false ? 'opacity-60 bg-gray-50' : ''}`}>
<div className="flex items-center space-x-3">
{/* 展开/收起按钮 */}
{hasChildren ? (
<Button
variant="ghost"
size="sm"
className="h-6 w-6 p-0"
onClick={() => toggleExpanded(category.id)}
>
{isExpanded ? (
<ChevronDown className="h-4 w-4" />
) : (
<ChevronRight className="h-4 w-4" />
)}
</Button>
) : (
<div className="w-6" />
)}
{/* 分类图标 */}
{hasChildren ? (
<Folder className="h-5 w-5 text-blue-500" />
) : (
<FolderOpen className="h-5 w-5 text-green-500" />
)}
{/* 分类信息 */}
<div className="flex-1">
<div className="flex items-center space-x-2">
<span className="font-medium">{category.name}</span>
{category.isActive !== false ? (
<Badge variant="default" className="flex items-center gap-1">
<Eye className="h-3 w-3" />
启用
</Badge>
) : (
<Badge variant="secondary" className="flex items-center gap-1">
<EyeOff className="h-3 w-3" />
禁用
</Badge>
)}
<Badge variant="outline">
{category.photoCount || 0} 张照片
</Badge>
{level > 0 && (
<Badge variant="secondary">
子分类
</Badge>
)}
</div>
{category.description && (
<p className="text-sm text-muted-foreground mt-1">{category.description}</p>
)}
{category.slug && (
<p className="text-xs text-muted-foreground mt-1">
Slug: {category.slug}
</p>
)}
</div>
</div>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="sm">
<MoreVertical className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => handleEditCategory(category)}>
<Edit className="h-4 w-4 mr-2" />
编辑
</DropdownMenuItem>
<DropdownMenuItem onClick={() => handleCreateCategory()}>
<FolderPlus className="h-4 w-4 mr-2" />
添加子分类
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => handleDeleteCategory(category.id)}
disabled={(category.photoCount || 0) > 0 || (category.children && category.children.length > 0)}
className="text-destructive"
>
<Trash className="h-4 w-4 mr-2" />
删除
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</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>
{hasChildren && isExpanded && (
<div className="mt-2">
{renderCategoryTree(category.children || [], level + 1)}
</div>
)}
</div>
{category.children && category.children.length > 0 && (
<div className="mt-2">
{renderCategoryTree(category.children, level + 1)}
</div>
)}
</div>
))
)
})
}
return (
@ -121,10 +320,15 @@ export default function Categories() {
管理照片分类和相册结构
</p>
</div>
<Button className="flex items-center gap-2">
<Plus className="h-4 w-4" />
新建分类
</Button>
<div className="flex gap-2">
<Button onClick={() => handleCreateCategory()} className="flex items-center gap-2">
<Plus className="h-4 w-4" />
新建分类
</Button>
<Button variant="outline" onClick={handleRefresh}>
<RefreshCw className="h-4 w-4" />
</Button>
</div>
</div>
{/* 统计卡片 */}
@ -138,7 +342,7 @@ export default function Categories() {
{statsLoading ? (
<Skeleton className="h-8 w-20" />
) : (
<div className="text-2xl font-bold">{stats?.total || 0}</div>
<div className="text-2xl font-bold">{stats?.data?.total || 0}</div>
)}
</CardContent>
</Card>
@ -152,7 +356,7 @@ export default function Categories() {
{statsLoading ? (
<Skeleton className="h-8 w-20" />
) : (
<div className="text-2xl font-bold text-green-600">{stats?.active || 0}</div>
<div className="text-2xl font-bold text-green-600">{stats?.data?.active || 0}</div>
)}
</CardContent>
</Card>
@ -166,7 +370,7 @@ export default function Categories() {
{statsLoading ? (
<Skeleton className="h-8 w-20" />
) : (
<div className="text-2xl font-bold text-blue-600">{stats?.topLevel || 0}</div>
<div className="text-2xl font-bold text-blue-600">{stats?.data?.topLevel || 0}</div>
)}
</CardContent>
</Card>
@ -181,7 +385,7 @@ export default function Categories() {
<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}
{stats?.data?.total ? Math.round(Object.values(stats.data.photoCounts || {}).reduce((a, b) => a + b, 0) / stats.data.total) : 0}
</div>
)}
</CardContent>
@ -201,10 +405,20 @@ export default function Categories() {
className="pl-10"
/>
</div>
<Button variant="outline">
<TreePine className="h-4 w-4 mr-2" />
树形视图
</Button>
<div className="flex gap-2">
<Button
variant="outline"
onClick={() => setExpandedCategories(new Set((categories?.data || []).map((c: any) => c.id)))}
>
展开全部
</Button>
<Button
variant="outline"
onClick={() => setExpandedCategories(new Set())}
>
收起全部
</Button>
</div>
</div>
</CardContent>
</Card>
@ -228,9 +442,9 @@ export default function Categories() {
</div>
))}
</div>
) : categories?.length ? (
) : categories?.data?.length ? (
<div className="space-y-2">
{renderCategoryTree(categories)}
{renderCategoryTree((categories.data || []) as CategoryWithChildren[])}
</div>
) : (
<div className="text-center py-12">
@ -239,7 +453,7 @@ export default function Categories() {
<p className="text-muted-foreground mb-4">
创建您的第一个分类来组织照片
</p>
<Button>
<Button onClick={() => handleCreateCategory()}>
<Plus className="h-4 w-4 mr-2" />
创建分类
</Button>
@ -247,6 +461,100 @@ export default function Categories() {
)}
</CardContent>
</Card>
{/* 创建分类对话框 */}
<Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
<DialogContent className="sm:max-w-[425px]">
<DialogHeader>
<DialogTitle>创建分类</DialogTitle>
<DialogDescription>
添加新的照片分类来组织您的作品
</DialogDescription>
</DialogHeader>
<div className="space-y-4 py-4">
<div>
<Label htmlFor="create-name">分类名称 *</Label>
<Input
id="create-name"
value={categoryForm.name}
onChange={(e) => setCategoryForm(prev => ({ ...prev, name: e.target.value }))}
placeholder="输入分类名称"
/>
</div>
<div>
<Label htmlFor="create-description">描述</Label>
<Textarea
id="create-description"
value={categoryForm.description}
onChange={(e) => setCategoryForm(prev => ({ ...prev, description: e.target.value }))}
placeholder="分类描述（可选）"
rows={3}
/>
</div>
</div>
<div className="flex justify-end gap-2">
<Button variant="outline" onClick={() => setIsCreateDialogOpen(false)}>
取消
</Button>
<Button
onClick={handleSubmitCreate}
disabled={createCategoryMutation.isPending}
>
{createCategoryMutation.isPending ? '创建中...' : '创建分类'}
</Button>
</div>
</DialogContent>
</Dialog>
{/* 编辑分类对话框 */}
<Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
<DialogContent className="sm:max-w-[425px]">
<DialogHeader>
<DialogTitle>编辑分类</DialogTitle>
<DialogDescription>
修改分类的基本信息
</DialogDescription>
</DialogHeader>
<div className="space-y-4 py-4">
<div>
<Label htmlFor="edit-name">分类名称 *</Label>
<Input
id="edit-name"
value={categoryForm.name}
onChange={(e) => setCategoryForm(prev => ({ ...prev, name: e.target.value }))}
placeholder="输入分类名称"
/>
</div>
<div>
<Label htmlFor="edit-description">描述</Label>
<Textarea
id="edit-description"
value={categoryForm.description}
onChange={(e) => setCategoryForm(prev => ({ ...prev, description: e.target.value }))}
placeholder="分类描述（可选）"
rows={3}
/>
</div>
</div>
<div className="flex justify-end gap-2">
<Button variant="outline" onClick={() => setIsEditDialogOpen(false)}>
取消
</Button>
<Button
onClick={handleSubmitEdit}
disabled={updateCategoryMutation.isPending}
>
{updateCategoryMutation.isPending ? '保存中...' : '保存更改'}
</Button>
</div>
</DialogContent>
</Dialog>
</div>
)
}

20
admin/src/pages/Dashboard.tsx
View File

@ -90,10 +90,10 @@ export default function Dashboard() {
{photoStatsLoading ? (
<Skeleton className="h-8 w-20" />
) : (
<div className="text-2xl font-bold">{photoStats?.total || 0}</div>
<div className="text-2xl font-bold">{photoStats?.data?.total || 0}</div>
)}
<div className="text-xs text-muted-foreground mt-1">
存储空间: {formatFileSize(photoStats?.totalSize || 0)}
存储空间: {formatFileSize(photoStats?.data?.totalSize || 0)}
</div>
</CardContent>
</Card>
@ -107,10 +107,10 @@ export default function Dashboard() {
{photoStatsLoading ? (
<Skeleton className="h-8 w-20" />
) : (
<div className="text-2xl font-bold text-green-600">{photoStats?.thisMonth || 0}</div>
<div className="text-2xl font-bold text-green-600">{photoStats?.data?.thisMonth || 0}</div>
)}
<div className="text-xs text-muted-foreground mt-1">
今日: {photoStats?.today || 0}
今日: {photoStats?.data?.today || 0}
</div>
</CardContent>
</Card>
@ -124,10 +124,10 @@ export default function Dashboard() {
{categoryStatsLoading ? (
<Skeleton className="h-8 w-20" />
) : (
<div className="text-2xl font-bold text-blue-600">{categoryStats?.total || 0}</div>
<div className="text-2xl font-bold text-blue-600">{categoryStats?.data?.total || 0}</div>
)}
<div className="text-xs text-muted-foreground mt-1">
活跃: {categoryStats?.active || 0}
活跃: {categoryStats?.data?.active || 0}
</div>
</CardContent>
</Card>
@ -141,24 +141,24 @@ export default function Dashboard() {
{tagStatsLoading ? (
<Skeleton className="h-8 w-20" />
) : (
<div className="text-2xl font-bold text-purple-600">{tagStats?.total || 0}</div>
<div className="text-2xl font-bold text-purple-600">{tagStats?.data?.total || 0}</div>
)}
<div className="text-xs text-muted-foreground mt-1">
已使用: {tagStats?.used || 0}
已使用: {tagStats?.data?.used || 0}
</div>
</CardContent>
</Card>
</div>
{/* 照片状态统计 */}
{photoStats?.statusStats && (
{photoStats?.data?.statusStats && (
<Card className="mb-8">
<CardHeader>
<CardTitle>照片状态分布</CardTitle>
</CardHeader>
<CardContent>
<div className="flex flex-wrap gap-4">
{Object.entries(photoStats.statusStats).map(([status, count]) => (
{Object.entries(photoStats.data.statusStats).map(([status, count]) => (
<div key={status} className="flex items-center gap-2">
<Badge className={getStatusColor(status)}>
{getStatusText(status)}

9
admin/src/pages/LoginPage.tsx
View File

@ -27,13 +27,14 @@ export default function LoginPage() {
onSuccess: (data) => {
// 转换后端用户数据到前端格式
const user = {
id: data.data.user.id.toString(),
id: data.data.user.id,
username: data.data.user.username,
email: data.data.user.email,
avatar: data.data.user.avatar || '',
role: 'admin' as const, // 暂时固定为 admin
isActive: data.data.user.status === 1,
createdAt: new Date(data.data.user.created_at * 1000).toISOString(),
updatedAt: new Date(data.data.user.updated_at * 1000).toISOString()
status: data.data.user.status,
created_at: data.data.user.created_at,
updated_at: data.data.user.updated_at
}
login(data.data.token, user)

218
admin/src/pages/PhotoUpload.tsx
View File

@ -1,4 +1,4 @@
import { useState, useCallback } from 'react'
import { useState, useCallback, useRef, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
@ -10,6 +10,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
import { Badge } from '@/components/ui/badge'
import { Progress } from '@/components/ui/progress'
import { Alert, AlertDescription } from '@/components/ui/alert'
import { Checkbox } from '@/components/ui/checkbox'
import {
Upload,
X,
@ -17,7 +18,9 @@ import {
Check,
AlertTriangle,
ArrowLeft,
Save
Save,
FileImage,
Trash2
} from 'lucide-react'
import { toast } from 'sonner'
import { photoService } from '@/services/photoService'
@ -39,13 +42,16 @@ export default function PhotoUpload() {
const [files, setFiles] = useState<UploadFile[]>([])
const [uploadProgress, setUploadProgress] = useState(0)
const [isUploading, setIsUploading] = useState(false)
const [dragOver, setDragOver] = useState(false)
const fileInputRef = useRef<HTMLInputElement>(null)
const dropAreaRef = useRef<HTMLDivElement>(null)
// 表单数据
const [formData, setFormData] = useState({
title: '',
description: '',
categoryIds: [] as string[],
tagIds: [] as string[],
categoryIds: [] as number[],
tagIds: [] as number[],
status: 'draft' as 'draft' | 'published'
})
@ -74,25 +80,34 @@ export default function PhotoUpload() {
f.id === file.id ? { ...f, status: 'uploading' as const } : f
))
// 模拟上传进度
// 模拟上传进度 - 创建进度更新函数
const progressUpdateInterval = setInterval(() => {
setFiles(prev => prev.map(f => {
if (f.id === file.id && f.status === 'uploading') {
const newProgress = Math.min((f.progress || 0) + Math.random() * 10, 90)
return { ...f, progress: newProgress }
}
return f
}))
}, 200)
const result = await photoService.uploadPhoto(file, {
...uploadData.metadata,
title: uploadData.metadata.title || file.name.split('.')[0],
onProgress: (progress: number) => {
setFiles(prev => prev.map(f =>
f.id === file.id ? { ...f, progress } : f
))
// 更新总进度
const totalProgress = ((i + progress / 100) / uploadData.files.length) * 100
setUploadProgress(totalProgress)
}
title: uploadData.metadata.title || file.name.split('.')[0]
})
// 清除进度更新定时器
clearInterval(progressUpdateInterval)
// 更新文件状态为完成
setFiles(prev => prev.map(f =>
f.id === file.id ? { ...f, status: 'completed' as const, progress: 100 } : f
))
// 更新总进度
const totalProgress = ((i + 1) / uploadData.files.length) * 100
setUploadProgress(totalProgress)
results.push(result)
} catch (error: any) {
// 更新文件状态为错误
@ -131,7 +146,25 @@ export default function PhotoUpload() {
// 文件拖放处理
const onDrop = useCallback((acceptedFiles: File[]) => {
const newFiles = acceptedFiles.map(file => ({
// 过滤和验证文件
const validFiles = acceptedFiles.filter(file => {
const validTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp']
const maxSize = 10 * 1024 * 1024 // 10MB
if (!validTypes.includes(file.type)) {
toast.error(`文件 "${file.name}" 格式不支持，仅支持 JPG、PNG、GIF、WebP 格式`)
return false
}
if (file.size > maxSize) {
toast.error(`文件 "${file.name}" 太大，最大支持 10MB`)
return false
}
return true
})
const newFiles = validFiles.map(file => ({
...file,
id: Math.random().toString(36),
preview: URL.createObjectURL(file),
@ -140,6 +173,10 @@ export default function PhotoUpload() {
}))
setFiles(prev => [...prev, ...newFiles])
if (validFiles.length > 0) {
toast.success(`成功添加 ${validFiles.length} 个文件`)
}
}, [])
// 移除文件
@ -157,7 +194,44 @@ export default function PhotoUpload() {
const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
const selectedFiles = Array.from(event.target.files || [])
onDrop(selectedFiles)
// 重置input以便重复选择相同文件
if (fileInputRef.current) {
fileInputRef.current.value = ''
}
}
// 拖拽事件处理
const handleDragOver = useCallback((e: React.DragEvent) => {
e.preventDefault()
e.stopPropagation()
setDragOver(true)
}, [])
const handleDragLeave = useCallback((e: React.DragEvent) => {
e.preventDefault()
e.stopPropagation()
setDragOver(false)
}, [])
const handleDrop = useCallback((e: React.DragEvent) => {
e.preventDefault()
e.stopPropagation()
setDragOver(false)
const droppedFiles = Array.from(e.dataTransfer.files)
onDrop(droppedFiles)
}, [onDrop])
// 清理预览图片
useEffect(() => {
return () => {
files.forEach(file => {
if (file.preview) {
URL.revokeObjectURL(file.preview)
}
})
}
}, [])
// 开始上传
const handleUpload = () => {
@ -176,6 +250,26 @@ export default function PhotoUpload() {
const updateFormData = (field: string, value: any) => {
setFormData(prev => ({ ...prev, [field]: value }))
}
// 切换分类选择
const toggleCategory = (categoryId: number) => {
setFormData(prev => ({
...prev,
categoryIds: prev.categoryIds.includes(categoryId)
? prev.categoryIds.filter(id => id !== categoryId)
: [...prev.categoryIds, categoryId]
}))
}
// 切换标签选择
const toggleTag = (tagId: number) => {
setFormData(prev => ({
...prev,
tagIds: prev.tagIds.includes(tagId)
? prev.tagIds.filter(id => id !== tagId)
: [...prev.tagIds, tagId]
}))
}
return (
<div className="container mx-auto px-4 py-8">
@ -205,25 +299,45 @@ export default function PhotoUpload() {
<CardTitle>选择文件</CardTitle>
</CardHeader>
<CardContent>
<div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-gray-400 transition-colors">
<Upload className="h-12 w-12 mx-auto mb-4 text-gray-400" />
<p className="text-lg font-medium mb-2">拖拽文件到此处或点击选择</p>
<div
ref={dropAreaRef}
className={`border-2 border-dashed rounded-lg p-8 text-center transition-colors cursor-pointer ${
dragOver
? 'border-primary bg-primary/5'
: 'border-gray-300 hover:border-gray-400'
}`}
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
onDrop={handleDrop}
onClick={() => fileInputRef.current?.click()}
>
{dragOver ? (
<>
<FileImage className="h-12 w-12 mx-auto mb-4 text-primary" />
<p className="text-lg font-medium mb-2 text-primary">松开鼠标完成上传</p>
</>
) : (
<>
<Upload className="h-12 w-12 mx-auto mb-4 text-gray-400" />
<p className="text-lg font-medium mb-2">拖拽文件到此处或点击选择</p>
</>
)}
<p className="text-sm text-muted-foreground mb-4">
支持 JPG、PNG、GIF、WebP 格式，单个文件最大 10MB
</p>
<input
ref={fileInputRef}
type="file"
multiple
accept="image/*"
accept="image/jpeg,image/png,image/gif,image/webp"
onChange={handleFileSelect}
className="hidden"
id="file-upload"
/>
<label htmlFor="file-upload">
<Button asChild>
<span>选择文件</span>
</Button>
</label>
<Button type="button" variant="outline">
<Upload className="h-4 w-4 mr-2" />
选择文件
</Button>
</div>
</CardContent>
</Card>
@ -251,7 +365,7 @@ export default function PhotoUpload() {
)}
<div className="flex-1 min-w-0">
<p className="text-sm font-medium truncate">{file.name}</p>
<p className="text-sm font-medium truncate" title={file.name}>{file.name}</p>
<p className="text-xs text-muted-foreground">
{(file.size / 1024 / 1024).toFixed(2)} MB
</p>
@ -288,10 +402,17 @@ export default function PhotoUpload() {
variant="ghost"
size="sm"
onClick={() => removeFile(file.id)}
title="移除文件"
>
<X className="h-4 w-4" />
</Button>
)}
{file.status === 'uploading' && (
<Badge variant="secondary">
<Upload className="h-3 w-3 mr-1 animate-pulse" />
上传中
</Badge>
)}
</div>
</div>
))}
@ -362,10 +483,20 @@ export default function PhotoUpload() {
<div className="text-sm text-muted-foreground mb-2">
可选择多个分类
</div>
{/* 这里应该有一个多选组件，暂时简化 */}
<p className="text-sm text-muted-foreground">
{categories?.length || 0} 个分类可用
</p>
<div className="max-h-40 overflow-y-auto border rounded-lg p-2">
{categories?.data?.categories?.map((category: any) => (
<div key={category.id} className="flex items-center space-x-2 p-2 hover:bg-muted rounded">
<Checkbox
id={`category-${category.id}`}
checked={formData.categoryIds.includes(category.id)}
onCheckedChange={() => toggleCategory(category.id)}
/>
<Label htmlFor={`category-${category.id}`} className="text-sm cursor-pointer">
{category.name}
</Label>
</div>
)) || <p className="text-sm text-muted-foreground p-2">暂无分类</p>}
</div>
</div>
<div>
@ -373,10 +504,20 @@ export default function PhotoUpload() {
<div className="text-sm text-muted-foreground mb-2">
可选择多个标签
</div>
{/* 这里应该有一个标签选择组件，暂时简化 */}
<p className="text-sm text-muted-foreground">
{tags?.length || 0} 个标签可用
</p>
<div className="max-h-40 overflow-y-auto border rounded-lg p-2">
{tags?.map((tag: any) => (
<div key={tag.id} className="flex items-center space-x-2 p-2 hover:bg-muted rounded">
<Checkbox
id={`tag-${tag.id}`}
checked={formData.tagIds.includes(tag.id)}
onCheckedChange={() => toggleTag(tag.id)}
/>
<Label htmlFor={`tag-${tag.id}`} className="text-sm cursor-pointer">
{tag.name}
</Label>
</div>
)) || <p className="text-sm text-muted-foreground p-2">暂无标签</p>}
</div>
</div>
</CardContent>
</Card>
@ -404,10 +545,17 @@ export default function PhotoUpload() {
{files.length > 0 && !isUploading && (
<Button
variant="outline"
onClick={() => setFiles([])}
onClick={() => {
files.forEach(file => {
if (file.preview) {
URL.revokeObjectURL(file.preview)
}
})
setFiles([])
}}
className="w-full mt-2"
>
<X className="h-4 w-4 mr-2" />
<Trash2 className="h-4 w-4 mr-2" />
清空列表
</Button>
)}

259
admin/src/pages/Photos.tsx
View File

@ -8,21 +8,27 @@ import { Skeleton } from '@/components/ui/skeleton'
import { Checkbox } from '@/components/ui/checkbox'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog'
import { Label } from '@/components/ui/label'
import { Textarea } from '@/components/ui/textarea'
import {
Camera,
Plus,
Search,
MoreVertical,
Edit,
Trash,
Eye,
Grid,
List
List,
RefreshCw,
ImageIcon,
Tag,
Folder
} from 'lucide-react'
import { useNavigate } from 'react-router-dom'
import { toast } from 'sonner'
import { photoService } from '@/services/photoService'
import { photoService, Photo } from '@/services/photoService'
import { categoryService } from '@/services/categoryService'
type ViewMode = 'grid' | 'list'
@ -51,6 +57,19 @@ export default function Photos() {
dateRange: ''
})
// 编辑对话框状态
const [editingPhoto, setEditingPhoto] = useState<Photo | null>(null)
const [isEditDialogOpen, setIsEditDialogOpen] = useState(false)
const [editForm, setEditForm] = useState({
title: '',
description: '',
status: 'draft' as 'draft' | 'published' | 'archived' | 'processing'
})
// 详情对话框状态
const [viewingPhoto, setViewingPhoto] = useState<Photo | null>(null)
const [isViewDialogOpen, setIsViewDialogOpen] = useState(false)
// 获取照片列表
const { data: photosData, isLoading: photosLoading } = useQuery({
queryKey: ['photos', { page, ...filters }],
@ -111,6 +130,21 @@ export default function Photos() {
}
})
// 编辑照片
const editPhotoMutation = useMutation({
mutationFn: ({ id, data }: { id: number, data: any }) =>
photoService.updatePhoto(id, data),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['photos'] })
setIsEditDialogOpen(false)
setEditingPhoto(null)
toast.success('照片更新成功')
},
onError: (error: any) => {
toast.error(error?.message || '更新失败')
}
})
const handleSelectAll = (checked: boolean) => {
if (checked) {
setSelectedPhotos(photosData?.photos.map(photo => photo.id) || [])
@ -176,6 +210,40 @@ export default function Photos() {
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}
// 处理编辑照片
const handleEditPhoto = (photo: Photo) => {
setEditingPhoto(photo)
setEditForm({
title: photo.title,
description: photo.description,
status: photo.status
})
setIsEditDialogOpen(true)
}
// 处理查看照片详情
const handleViewPhoto = (photo: Photo) => {
setViewingPhoto(photo)
setIsViewDialogOpen(true)
}
// 提交编辑
const handleSubmitEdit = () => {
if (!editingPhoto) return
editPhotoMutation.mutate({
id: editingPhoto.id,
data: editForm
})
}
// 刷新列表
const handleRefresh = () => {
queryClient.invalidateQueries({ queryKey: ['photos'] })
toast.success('列表已刷新')
}
return (
<div className="container mx-auto px-4 py-8">
{/* 页面头部 */}
@ -228,7 +296,7 @@ export default function Photos() {
</SelectTrigger>
<SelectContent>
<SelectItem value="">全部分类</SelectItem>
{categories?.map((category) => (
{categories?.data?.categories?.map((category) => (
<SelectItem key={category.id} value={category.id.toString()}>
{category.name}
</SelectItem>
@ -356,11 +424,11 @@ export default function Photos() {
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => navigate(`/photos/${photo.id}`)}>
<DropdownMenuItem onClick={() => handleViewPhoto(photo)}>
<Eye className="h-4 w-4 mr-2" />
查看详情
</DropdownMenuItem>
<DropdownMenuItem onClick={() => navigate(`/photos/${photo.id}/edit`)}>
<DropdownMenuItem onClick={() => handleEditPhoto(photo)}>
<Edit className="h-4 w-4 mr-2" />
编辑
</DropdownMenuItem>
@ -431,11 +499,11 @@ export default function Photos() {
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => navigate(`/photos/${photo.id}`)}>
<DropdownMenuItem onClick={() => handleViewPhoto(photo)}>
<Eye className="h-4 w-4 mr-2" />
查看详情
</DropdownMenuItem>
<DropdownMenuItem onClick={() => navigate(`/photos/${photo.id}/edit`)}>
<DropdownMenuItem onClick={() => handleEditPhoto(photo)}>
<Edit className="h-4 w-4 mr-2" />
编辑
</DropdownMenuItem>
@ -493,19 +561,178 @@ export default function Photos() {
<Card>
<CardContent className="py-12">
<div className="text-center">
<Camera 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">
开始上传您的第一张照片吧
<div className="w-32 h-32 mx-auto mb-6 bg-gray-100 rounded-full flex items-center justify-center">
<ImageIcon className="h-16 w-16 text-gray-300" />
</div>
<h3 className="text-xl font-medium mb-2">暂无照片</h3>
<p className="text-muted-foreground mb-6">
开始上传您的第一张照片，构建精美的作品集
</p>
<Button onClick={() => navigate('/photos/upload')}>
<Plus className="h-4 w-4 mr-2" />
上传照片
</Button>
<div className="flex justify-center gap-4">
<Button onClick={() => navigate('/photos/upload')}>
<Plus className="h-4 w-4 mr-2" />
上传照片
</Button>
<Button variant="outline" onClick={handleRefresh}>
<RefreshCw className="h-4 w-4 mr-2" />
刷新
</Button>
</div>
</div>
</CardContent>
</Card>
)}
{/* 编辑对话框 */}
<Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
<DialogContent className="sm:max-w-[425px]">
<DialogHeader>
<DialogTitle>编辑照片</DialogTitle>
<DialogDescription>
修改照片的基本信息
</DialogDescription>
</DialogHeader>
<div className="space-y-4 py-4">
<div>
<Label htmlFor="edit-title">标题</Label>
<Input
id="edit-title"
value={editForm.title}
onChange={(e) => setEditForm({ ...editForm, title: e.target.value })}
placeholder="照片标题"
/>
</div>
<div>
<Label htmlFor="edit-description">描述</Label>
<Textarea
id="edit-description"
value={editForm.description}
onChange={(e) => setEditForm({ ...editForm, description: e.target.value })}
placeholder="照片描述"
rows={3}
/>
</div>
<div>
<Label htmlFor="edit-status">状态</Label>
<Select value={editForm.status} onValueChange={(value) => setEditForm({ ...editForm, status: value as any })}>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="draft">草稿</SelectItem>
<SelectItem value="published">已发布</SelectItem>
<SelectItem value="archived">已归档</SelectItem>
</SelectContent>
</Select>
</div>
</div>
<div className="flex justify-end gap-2">
<Button variant="outline" onClick={() => setIsEditDialogOpen(false)}>
取消
</Button>
<Button onClick={handleSubmitEdit} disabled={editPhotoMutation.isPending}>
{editPhotoMutation.isPending ? '保存中...' : '保存'}
</Button>
</div>
</DialogContent>
</Dialog>
{/* 详情查看对话框 */}
<Dialog open={isViewDialogOpen} onOpenChange={setIsViewDialogOpen}>
<DialogContent className="sm:max-w-[600px]">
<DialogHeader>
<DialogTitle>{viewingPhoto?.title}</DialogTitle>
<DialogDescription>
照片详细信息
</DialogDescription>
</DialogHeader>
{viewingPhoto && (
<div className="space-y-4 py-4">
<div className="aspect-video bg-gray-100 rounded-lg flex items-center justify-center">
<ImageIcon className="h-16 w-16 text-gray-400" />
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<Label className="text-sm font-medium">状态</Label>
<Badge className={getStatusColor(viewingPhoto.status)}>
{getStatusText(viewingPhoto.status)}
</Badge>
</div>
<div>
<Label className="text-sm font-medium">文件大小</Label>
<p className="text-sm text-muted-foreground">{formatFileSize(viewingPhoto.fileSize)}</p>
</div>
<div>
<Label className="text-sm font-medium">创建时间</Label>
<p className="text-sm text-muted-foreground">
{new Date(viewingPhoto.createdAt).toLocaleString()}
</p>
</div>
<div>
<Label className="text-sm font-medium">更新时间</Label>
<p className="text-sm text-muted-foreground">
{new Date(viewingPhoto.updatedAt).toLocaleString()}
</p>
</div>
</div>
{viewingPhoto.description && (
<div>
<Label className="text-sm font-medium">描述</Label>
<p className="text-sm text-muted-foreground mt-1">{viewingPhoto.description}</p>
</div>
)}
{viewingPhoto.categories && viewingPhoto.categories.length > 0 && (
<div>
<Label className="text-sm font-medium">分类</Label>
<div className="flex flex-wrap gap-2 mt-1">
{viewingPhoto.categories.map((category) => (
<Badge key={category.id} variant="secondary">
<Folder className="h-3 w-3 mr-1" />
{category.name}
</Badge>
))}
</div>
</div>
)}
{viewingPhoto.tags && viewingPhoto.tags.length > 0 && (
<div>
<Label className="text-sm font-medium">标签</Label>
<div className="flex flex-wrap gap-2 mt-1">
{viewingPhoto.tags.map((tag) => (
<Badge key={tag.id} variant="outline">
<Tag className="h-3 w-3 mr-1" />
{tag.name}
</Badge>
))}
</div>
</div>
)}
</div>
)}
<div className="flex justify-end gap-2">
<Button variant="outline" onClick={() => setIsViewDialogOpen(false)}>
关闭
</Button>
<Button onClick={() => viewingPhoto && handleEditPhoto(viewingPhoto)}>
<Edit className="h-4 w-4 mr-2" />
编辑
</Button>
</div>
</DialogContent>
</Dialog>
</div>
)
}

29
admin/src/pages/Tags.tsx
View File

@ -7,7 +7,7 @@ import { Badge } from '@/components/ui/badge'
import { Skeleton } from '@/components/ui/skeleton'
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
import {
Tag,
Tag as TagIcon,
Hash,
MoreVertical,
Edit,
@ -22,18 +22,7 @@ import {
} from 'lucide-react'
import { toast } from 'sonner'
import { tagService } from '@/services/tagService'
interface TagData {
id: number
name: string
color: string
description?: string
photoCount: number
isActive: boolean
createdAt: string
updatedAt: string
}
import { Tag } from '@/types'
export default function Tags() {
const queryClient = useQueryClient()
@ -43,9 +32,9 @@ export default function Tags() {
const [filterActive, setFilterActive] = useState<boolean | undefined>(undefined)
// 获取标签列表
const { data: tagsData, isLoading: tagsLoading } = useQuery({
const { data: tagsData, isLoading: tagsLoading } = useQuery<Tag[]>({
queryKey: ['tags', { search, sortBy, sortOrder, filterActive }],
queryFn: () => tagService.getAllTags() as Promise<TagData[]>
queryFn: () => tagService.getAllTags()
})
// 获取标签统计
@ -145,7 +134,7 @@ export default function Tags() {
{statsLoading ? (
<Skeleton className="h-8 w-20" />
) : (
<div className="text-2xl font-bold">{stats?.total || 0}</div>
<div className="text-2xl font-bold">{stats?.data?.total || 0}</div>
)}
</CardContent>
</Card>
@ -159,7 +148,7 @@ export default function Tags() {
{statsLoading ? (
<Skeleton className="h-8 w-20" />
) : (
<div className="text-2xl font-bold text-green-600">{stats?.active || 0}</div>
<div className="text-2xl font-bold text-green-600">{stats?.data?.active || 0}</div>
)}
</CardContent>
</Card>
@ -173,7 +162,7 @@ export default function Tags() {
{statsLoading ? (
<Skeleton className="h-8 w-20" />
) : (
<div className="text-2xl font-bold text-orange-600">{stats?.used || 0}</div>
<div className="text-2xl font-bold text-orange-600">{stats?.data?.used || 0}</div>
)}
</CardContent>
</Card>
@ -181,14 +170,14 @@ export default function Tags() {
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">平均照片数</CardTitle>
<Tag className="h-4 w-4 text-muted-foreground" />
<TagIcon 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">
{Math.round(stats?.avgPhotosPerTag || 0)}
{Math.round(stats?.data?.avgPhotosPerTag || 0)}
</div>
)}
</CardContent>

2
admin/src/services/authService.ts
View File

@ -32,7 +32,7 @@ class AuthService {
return Promise.resolve()
}
async refreshToken(refreshToken: string): Promise<RefreshTokenResponse> {
async refreshToken(_refreshToken: string): Promise<RefreshTokenResponse> {
// 当前后端暂时不支持 refresh token，使用原 token
throw new Error('Refresh token not implemented yet')
}

23
admin/src/services/categoryService.ts
View File

@ -43,6 +43,29 @@ class CategoryService {
const response = await api.delete(`/categories/${id}`)
return response.data
}
async getCategoryTree(): Promise<ApiResponse<Category[]>> {
// 获取所有分类并构建树形结构
const response = await api.get('/categories?size=1000')
return response.data
}
async getStats(): Promise<ApiResponse<CategoryStats>> {
// 模拟统计数据，实际应该从后端获取
const categoriesResponse = await this.getCategories(1, 1000)
const categories = categoriesResponse.data?.categories || []
return {
code: 0,
message: 'success',
data: {
total: categories.length,
active: categories.length,
topLevel: categories.length,
photoCounts: {}
}
}
}
}
export const categoryService = new CategoryService()

11
admin/src/services/photoService.ts
View File

@ -1,4 +1,5 @@
import api from './api'
import { ApiResponse, PhotoStats } from '@/types'
export interface Photo {
id: number
@ -108,13 +109,7 @@ export interface BatchUpdateRequest {
tagIds?: number[]
}
export interface PhotoStats {
total: number
thisMonth: number
today: number
totalSize: number
statusStats: Record<string, number>
}
// PhotoStats 从 @/types 导入，移除重复定义
class PhotoService {
async getPhotos(params: PhotoListParams = {}): Promise<PhotoListResponse> {
@ -175,7 +170,7 @@ class PhotoService {
await api.post('/photos/batch/delete', { ids })
}
async getStats(): Promise<PhotoStats> {
async getStats(): Promise<ApiResponse<PhotoStats>> {
const response = await api.get('/photos/stats')
return response.data
}

23
admin/src/services/tagService.ts
View File

@ -1,16 +1,5 @@
import api from './api'
export interface Tag {
id: number
name: string
slug: string
description: string
color?: string
isActive: boolean
photoCount: number
createdAt: string
updatedAt: string
}
import { Tag, ApiResponse, TagStats } from '@/types'
export interface TagWithCount extends Tag {
photoCount: number
@ -55,14 +44,6 @@ export interface UpdateTagRequest {
isActive?: boolean
}
export interface TagStats {
total: number
active: number
used: number
unused: number
avgPhotosPerTag: number
}
class TagService {
async getTags(params: TagListParams = {}): Promise<TagListResponse> {
const response = await api.get('/tags', { params })
@ -112,7 +93,7 @@ class TagService {
return response.data
}
async getStats(): Promise<TagStats> {
async getStats(): Promise<ApiResponse<TagStats>> {
const response = await api.get('/tags/stats')
return response.data
}

5
admin/src/types/index.ts
View File

@ -4,6 +4,7 @@ export interface User {
username: string
email: string
avatar: string
role: 'admin' | 'editor' | 'user'
status: number // 1:启用 0:禁用
created_at: number
updated_at: number
@ -34,7 +35,9 @@ export interface Tag {
name: string
slug: string
description?: string
color?: string
photoCount: number
isActive: boolean
createdAt: string
updatedAt: string
}
@ -68,6 +71,7 @@ export interface CategoryStats {
export interface TagStats {
total: number
active: number
used: number
popular: Tag[]
topTags: Tag[]
avgPhotosPerTag: number
@ -108,6 +112,7 @@ export interface LoginResponse {
username: string
email: string
avatar: string
role: 'admin' | 'editor' | 'user'
status: number
created_at: number
updated_at: number