aecw/zzTaiko
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

图片系统更新

Browse Source
This commit is contained in:
AeCw
2025-12-19 17:32:49 +08:00
parent 0ae466531c
commit a8624bd599
11 changed files with 1215 additions and 374 deletions
Download Patch File Download Diff File Expand all files Collapse all files

202
app/components/ImageModal.tsx Normal file
View File

@@ -0,0 +1,202 @@
'use client';
import { X, Info, ZoomIn, ZoomOut, RotateCw, Download, Maximize2, Minimize2 } from 'lucide-react';
import { Photo } from '@/app/types';
import { useState, useEffect } from 'react';
interface ImageModalProps {
photo: Photo | null;
isOpen: boolean;
onClose: () => void;
onInfoClick: () => void;
}
export default function ImageModal({ photo, isOpen, onClose, onInfoClick }: ImageModalProps) {
const [scale, setScale] = useState(1);
const [rotation, setRotation] = useState(0);
const [isMobile, setIsMobile] = useState(false);
const [isFullscreen, setIsFullscreen] = useState(false);
// 检测移动端
useEffect(() => {
const checkMobile = () => {
setIsMobile(window.innerWidth < 768);
};
checkMobile();
window.addEventListener('resize', checkMobile);
return () => window.removeEventListener('resize', checkMobile);
}, []);
if (!photo || !isOpen) return null;
const handleZoomIn = () => {
setScale(prev => Math.min(prev + 0.25, 3));
};
const handleZoomOut = () => {
setScale(prev => Math.max(prev - 0.25, 0.5));
};
const handleRotate = () => {
setRotation(prev => (prev + 90) % 360);
};
const handleReset = () => {
setScale(1);
setRotation(0);
};
const handleDownload = () => {
const link = document.createElement('a');
link.href = photo.imageUrl;
link.download = photo.originalFilename || photo.title;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
};
const toggleFullscreen = () => {
setIsFullscreen(!isFullscreen);
};
// 移动端全屏样式
const modalStyle = isMobile && isFullscreen ? {
position: 'fixed' as const,
top: 0,
left: 0,
right: 0,
bottom: 0,
zIndex: 9999,
backgroundColor: '#000',
} : {};
return (
<>
{/* 遮罩层 */}
<div
className="fixed inset-0 z-50 bg-black/90 transition-opacity duration-300"
onClick={onClose}
/>
{/* 图片模态框 */}
<div
className={`fixed inset-0 z-50 flex items-center justify-center ${isMobile && isFullscreen ? 'p-0' : 'p-4'}`}
style={modalStyle}
>
<div className={`relative ${isMobile && isFullscreen ? 'w-full h-full' : 'w-full h-full max-w-7xl max-h-[110vh]'}`}>
{/* 顶部工具栏 - 移动端全屏时隐藏 */}
{(!isMobile || !isFullscreen) && (
<div className="absolute top-4 left-1/2 transform -translate-x-1/2 z-10 flex items-center space-x-2 bg-black/50 backdrop-blur-sm rounded-full px-4 py-2">
<button
onClick={handleZoomOut}
className="p-2 text-white hover:bg-white/20 rounded-full transition-colors"
aria-label="缩小"
disabled={scale <= 0.5}
>
<ZoomOut className="w-5 h-5" />
</button>
<button
onClick={handleReset}
className="px-3 py-1 text-white text-sm hover:bg-white/20 rounded-full transition-colors"
>
{Math.round(scale * 100)}%
</button>
<button
onClick={handleZoomIn}
className="p-2 text-white hover:bg-white/20 rounded-full transition-colors"
aria-label="放大"
disabled={scale >= 3}
>
<ZoomIn className="w-5 h-5" />
</button>
<div className="w-px h-6 bg-white/30" />
<button
onClick={handleRotate}
className="p-2 text-white hover:bg-white/20 rounded-full transition-colors"
aria-label="旋转"
>
<RotateCw className="w-5 h-5" />
</button>
<button
onClick={handleDownload}
className="p-2 text-white hover:bg-white/20 rounded-full transition-colors"
aria-label="下载"
>
<Download className="w-5 h-5" />
</button>
</div>
)}
{/* 右上角按钮 */}
<div className="absolute top-4 right-4 z-10 flex items-center space-x-2">
{/* 移动端全屏切换按钮 */}
{isMobile && (
<button
onClick={toggleFullscreen}
className="p-3 rounded-full bg-black/50 text-white hover:bg-black/70 transition-colors backdrop-blur-sm"
aria-label={isFullscreen ? "退出全屏" : "全屏"}
title={isFullscreen ? "退出全屏" : "全屏"}
>
{isFullscreen ? <Minimize2 className="w-6 h-6" /> : <Maximize2 className="w-6 h-6" />}
</button>
)}
<button
onClick={onInfoClick}
className="p-3 rounded-full bg-black/50 text-white hover:bg-black/70 transition-colors backdrop-blur-sm"
aria-label="查看详情"
title="查看照片详情"
>
<Info className="w-6 h-6" />
</button>
<button
onClick={onClose}
className="p-3 rounded-full bg-black/50 text-white hover:bg-black/70 transition-colors backdrop-blur-sm"
aria-label="关闭"
>
<X className="w-6 h-6" />
</button>
</div>
{/* 图片容器 */}
<div className="relative w-full h-full flex items-center justify-center">
<div className={`${isMobile && isFullscreen ? 'w-full h-full' : 'relative overflow-hidden rounded-lg bg-black'}`}>
<img
src={photo.imageUrl}
alt={photo.title}
className={`${isMobile && isFullscreen ? 'w-full h-full object-contain' : 'max-w-full max-h-[80vh] object-contain'} transition-transform duration-200`}
style={{
transform: `scale(${scale}) rotate(${rotation}deg)`,
}}
onClick={(e) => {
e.stopPropagation();
// 移动端点击图片切换全屏
if (isMobile) {
toggleFullscreen();
}
}}
/>
</div>
</div>
{/* 底部信息栏 - 移动端全屏时隐藏 */}
{(!isMobile || !isFullscreen) && (
<div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 z-10 bg-black/50 backdrop-blur-sm rounded-full px-6 py-3">
<div className="text-white text-center">
<h3 className="font-semibold text-lg">{photo.title}</h3>
</div>
</div>
)}
</div>
</div>
</>
);
}

202
app/components/Navbar.tsx Normal file
View File

@@ -0,0 +1,202 @@
'use client';
import { useState } from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Menu, X, Moon, Sun, Home, Images } from 'lucide-react';
interface NavbarProps {
darkMode: boolean;
onToggleDarkMode: () => void;
}
export default function Navbar({ darkMode, onToggleDarkMode }: NavbarProps) {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
const pathname = usePathname();
const navigation = [
{ name: '每月课题', href: '/', icon: Home },
{ name: '群相册', href: '/photos', icon: Images },
];
const toggleMobileMenu = () => {
setMobileMenuOpen(!mobileMenuOpen);
};
const closeMobileMenu = () => {
setMobileMenuOpen(false);
};
return (
<>
{/* 桌面端导航栏 */}
<nav className="hidden lg:block border-b bg-white/80 dark:bg-gray-900/80 backdrop-blur-md dark:border-gray-700">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-16">
{/* Logo */}
<div className="flex items-center">
<Link href="/" className="flex items-center space-x-2">
<div className="w-8 h-8 rounded-lg bg-blue-600 flex items-center justify-center">
<Home className="w-5 h-5 text-white" />
</div>
<span className="text-xl font-bold text-gray-900 dark:text-white">
漳州太鼓
</span>
</Link>
</div>
{/* 导航链接 */}
<div className="flex items-center space-x-4">
{navigation.map((item) => {
const Icon = item.icon;
const isActive = pathname === item.href;
return (
<Link
key={item.name}
href={item.href}
className={`flex items-center space-x-2 px-3 py-2 rounded-lg transition-colors ${isActive
? 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300'
: 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'
}`}
>
<Icon className="w-4 h-4" />
<span>{item.name}</span>
</Link>
);
})}
{/* 主题切换按钮 */}
<button
onClick={onToggleDarkMode}
className="p-2 rounded-lg bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
aria-label={darkMode ? '切换到亮色模式' : '切换到暗色模式'}
>
{darkMode ? (
<Sun className="w-5 h-5 text-yellow-500" />
) : (
<Moon className="w-5 h-5 text-gray-700" />
)}
</button>
</div>
</div>
</div>
</nav>
{/* 移动端顶部栏 */}
<header className="lg:hidden sticky top-0 z-50 border-b bg-white/80 dark:bg-gray-900/80 backdrop-blur-md dark:border-gray-700">
<div className="px-4 py-3">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<button
onClick={toggleMobileMenu}
className="p-2 rounded-lg bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
aria-label="打开菜单"
>
{mobileMenuOpen ? (
<X className="w-5 h-5 text-gray-700 dark:text-gray-300" />
) : (
<Menu className="w-5 h-5 text-gray-700 dark:text-gray-300" />
)}
</button>
<Link href="/" className="flex items-center space-x-2">
<div className="w-6 h-6 rounded-md bg-blue-600 flex items-center justify-center">
<Home className="w-4 h-4 text-white" />
</div>
<span className="text-lg font-bold text-gray-900 dark:text-white">
漳州太鼓
</span>
</Link>
</div>
<button
onClick={onToggleDarkMode}
className="p-2 rounded-lg bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
aria-label={darkMode ? '切换到亮色模式' : '切换到暗色模式'}
>
{darkMode ? (
<Sun className="w-5 h-5 text-yellow-500" />
) : (
<Moon className="w-5 h-5 text-gray-700" />
)}
</button>
</div>
</div>
</header>
{/* 移动端菜单遮罩 */}
{mobileMenuOpen && (
<div
className="lg:hidden fixed inset-0 z-40 bg-black/50"
onClick={closeMobileMenu}
/>
)}
{/* 移动端侧边栏菜单 */}
<div className={`
lg:hidden fixed top-0 left-0 z-50 h-full w-64
transform transition-transform duration-300 ease-in-out
${mobileMenuOpen ? 'translate-x-0' : '-translate-x-full'}
bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-700
overflow-y-auto
`}>
<div className="p-4">
<div className="flex items-center justify-between mb-8">
<h1 className="text-xl font-bold text-gray-900 dark:text-white">
每月课题
</h1>
<button
onClick={closeMobileMenu}
className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
aria-label="关闭菜单"
>
<X className="w-5 h-5 text-gray-700 dark:text-gray-300" />
</button>
</div>
{/* 移动端导航链接 */}
<nav className="space-y-2">
{navigation.map((item) => {
const Icon = item.icon;
const isActive = pathname === item.href;
return (
<Link
key={item.name}
href={item.href}
onClick={closeMobileMenu}
className={`flex items-center space-x-3 px-4 py-3 rounded-lg transition-colors ${isActive
? 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300'
: 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'
}`}
>
<Icon className="w-5 h-5" />
<span className="font-medium">{item.name}</span>
</Link>
);
})}
</nav>
{/* 移动端主题切换 */}
<div className="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
<button
onClick={onToggleDarkMode}
className="flex items-center justify-between w-full px-4 py-3 rounded-lg bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
>
<div className="flex items-center space-x-3">
{darkMode ? (
<Sun className="w-5 h-5 text-yellow-500" />
) : (
<Moon className="w-5 h-5 text-gray-700" />
)}
<span className="font-medium text-gray-700 dark:text-gray-300">
{darkMode ? '亮色模式' : '暗色模式'}
</span>
</div>
<span className="text-sm text-gray-500 dark:text-gray-400">
点击切换
</span>
</button>
</div>
</div>
</div>
</>
);
}

165
app/components/PhotoDetailModal.tsx Normal file
View File

@@ -0,0 +1,165 @@
'use client';
import { X, Info, Calendar, File, Link as LinkIcon, Hash } from 'lucide-react';
import { Photo } from '@/app/types';
import { formatDate, formatFileSize } from '@/app/lib/utils';
interface PhotoDetailModalProps {
photo: Photo | null;
isOpen: boolean;
onClose: () => void;
}
export default function PhotoDetailModal({ photo, isOpen, onClose }: PhotoDetailModalProps) {
if (!photo || !isOpen) return null;
return (
<>
{/* 遮罩层 */}
<div
className="fixed inset-0 z-40 bg-black/50 transition-opacity duration-300"
onClick={onClose}
/>
{/* 右侧抽屉 */}
<div
className={`fixed top-0 right-0 z-50 h-full w-full max-w-md transform transition-transform duration-300 ease-in-out ${isOpen ? 'translate-x-0' : 'translate-x-full'
}`}
>
<div className="h-full bg-white dark:bg-gray-900 shadow-xl flex flex-col">
{/* 抽屉头部 */}
<div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
<div className="flex items-center space-x-3">
<div className="p-2 rounded-lg bg-blue-100 dark:bg-blue-900/30">
<Info className="w-5 h-5 text-blue-600 dark:text-blue-400" />
</div>
<h2 className="text-lg font-semibold text-gray-900 dark:text-white">
照片详情
</h2>
</div>
<button
onClick={onClose}
className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
aria-label="关闭"
>
<X className="w-5 h-5 text-gray-700 dark:text-gray-300" />
</button>
</div>
{/* 抽屉内容 */}
<div className="flex-1 overflow-y-auto p-6">
{/* 照片标题 */}
<div className="mb-6">
<h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">
{photo.title}
</h3>
<p className="text-sm text-gray-500 dark:text-gray-400">
点击照片可查看大图
</p>
</div>
{/* 照片预览 */}
<div className="mb-6">
<div className="relative aspect-square rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-800">
<img
src={photo.imageUrl}
alt={photo.title}
className="w-full h-full object-cover"
/>
<a
href={photo.imageUrl}
target="_blank"
rel="noopener noreferrer"
className="absolute inset-0 flex items-center justify-center bg-black/0 hover:bg-black/20 transition-colors"
title="查看原图"
>
<div className="opacity-0 hover:opacity-100 transition-opacity">
<div className="p-3 rounded-full bg-white/90 dark:bg-gray-800/90">
<LinkIcon className="w-6 h-6 text-gray-700 dark:text-gray-300" />
</div>
</div>
</a>
</div>
</div>
{/* 详细信息 */}
<div className="space-y-6">
{/* 上传时间 */}
<div>
<div className="flex items-center space-x-2 mb-3">
<Calendar className="w-5 h-5 text-gray-500 dark:text-gray-400" />
<h4 className="font-medium text-gray-900 dark:text-white">
上传时间
</h4>
</div>
<p className="text-gray-700 dark:text-gray-300 pl-7">
{formatDate(photo.uploadedAt)}
</p>
</div>
{/* 文件信息 */}
<div>
<div className="flex items-center space-x-2 mb-3">
<File className="w-5 h-5 text-gray-500 dark:text-gray-400" />
<h4 className="font-medium text-gray-900 dark:text-white">
文件信息
</h4>
</div>
<div className="space-y-2 pl-7">
<p className="text-gray-700 dark:text-gray-300">
<span className="font-medium">文件名:</span>{' '}
{photo.originalFilename || '未命名文件'}
</p>
<p className="text-gray-700 dark:text-gray-300">
<span className="font-medium">文件大小:</span>{' '}
{formatFileSize(photo.size)}
</p>
<p className="text-gray-700 dark:text-gray-300">
<span className="font-medium">格式:</span>{' '}
{photo.contentType || 'image/jpeg'}
</p>
</div>
</div>
{/* 图片链接 */}
<div>
<div className="flex items-center space-x-2 mb-3">
<LinkIcon className="w-5 h-5 text-gray-500 dark:text-gray-400" />
<h4 className="font-medium text-gray-900 dark:text-white">
图片链接
</h4>
</div>
<div className="pl-7">
<a
href={photo.imageUrl}
target="_blank"
rel="noopener noreferrer"
className="text-blue-600 dark:text-blue-400 hover:underline break-all text-sm"
>
{photo.imageUrl}
</a>
</div>
</div>
{/* 唯一标识 */}
<div>
<div className="flex items-center space-x-2 mb-3">
<Hash className="w-5 h-5 text-gray-500 dark:text-gray-400" />
<h4 className="font-medium text-gray-900 dark:text-white">
唯一标识
</h4>
</div>
<div className="pl-7">
<p className="text-gray-700 dark:text-gray-300 font-mono text-sm break-all bg-gray-100 dark:bg-gray-800 p-2 rounded">
{photo.id}
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</>
);
}

118
app/components/PhotoGallery.tsx Normal file
View File

@@ -0,0 +1,118 @@
'use client';
import Image from 'next/image';
import { Loader2, Calendar, Image as ImageIcon, Info } from 'lucide-react';
import { Photo, Pagination } from '@/app/types';
import { formatDate, distributeToColumns, getColumnCount } from '@/app/lib/utils';
interface PhotoGalleryProps {
photos: Photo[];
loading: boolean;
loadingMore: boolean;
pagination: Pagination;
selectedPhoto: Photo | null;
onPhotoClick: (photo: Photo) => void;
loadMoreRef: React.RefObject<HTMLDivElement | null>;
}
export default function PhotoGallery({
photos,
loading,
loadingMore,
pagination,
selectedPhoto,
onPhotoClick,
loadMoreRef,
}: PhotoGalleryProps) {
// 计算瀑布流列数
const columnCount = getColumnCount();
const columns = distributeToColumns(photos, columnCount);
return (
<div className="p-4 lg:p-8">
{/* 加载状态 */}
{loading && (
<div className="flex justify-center items-center py-20">
<Loader2 className="w-8 h-8 animate-spin text-blue-600" />
<span className="ml-3 text-gray-600 dark:text-gray-300">加载照片中...</span>
</div>
)}
{/* 照片网格 */}
{!loading && photos.length > 0 && (
<div>
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
{columns.map((column, columnIndex) => (
<div key={columnIndex} className="flex flex-col gap-4">
{column.map((photo) => (
<div
key={photo.id}
className="group relative overflow-hidden rounded-xl bg-white dark:bg-gray-800 shadow-lg hover:shadow-2xl transition-all duration-300"
>
{/* 图片容器 */}
<div
className="relative aspect-square overflow-hidden cursor-pointer"
onClick={() => onPhotoClick(photo)}
>
<Image
src={photo.imageUrl}
alt={photo.title}
fill
className="object-cover transition-transform duration-500 group-hover:scale-110"
sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 25vw"
unoptimized // 因为图片来自外部 URL
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
{/* 移除右上角信息按钮，现在在大图模态框中显示 */}
</div>
{/* 简化的图片信息 - 只在hover时显示 */}
<div className="absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<h3 className="font-semibold text-white line-clamp-1 text-sm">
{photo.title}
</h3>
<div className="flex items-center gap-2 text-xs text-white/80 mt-1">
<Calendar className="w-3 h-3" />
<span>{formatDate(photo.uploadedAt)}</span>
</div>
</div>
</div>
))}
</div>
))}
</div>
{/* 加载更多指示器 */}
{pagination.hasNextPage && (
<div ref={loadMoreRef} className="py-8 text-center">
{loadingMore ? (
<div className="flex justify-center items-center">
<Loader2 className="w-6 h-6 animate-spin text-blue-600" />
<span className="ml-3 text-gray-600 dark:text-gray-300">加载更多照片...</span>
</div>
) : (
<p className="text-gray-500 dark:text-gray-400">滚动加载更多</p>
)}
</div>
)}
</div>
)}
{/* 空状态 */}
{!loading && photos.length === 0 && (
<div className="text-center py-20">
<div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gray-100 dark:bg-gray-800 mb-4">
<ImageIcon className="w-8 h-8 text-gray-400" />
</div>
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
暂无照片
</h3>
<p className="text-gray-600 dark:text-gray-400 max-w-md mx-auto">
还没有上传任何照片。
</p>
</div>
)}
</div>
);
}

113
app/components/Sidebar.tsx Normal file
View File

@@ -0,0 +1,113 @@
'use client';
import { Search, Moon, Sun, Calendar, Image as ImageIcon, ChevronLeft, ChevronRight } from 'lucide-react';
import { Pagination } from '@/app/types';
interface SidebarProps {
darkMode: boolean;
sidebarCollapsed: boolean;
searchQuery: string;
sortBy: string;
pagination: Pagination;
loading: boolean;
onToggleDarkMode: () => void;
onToggleSidebar: () => void;
onSearchChange: (query: string) => void;
onSortChange: (sortBy: string) => void;
onSearchSubmit: (e: React.FormEvent) => void;
}
export default function Sidebar({
darkMode,
sidebarCollapsed,
searchQuery,
sortBy,
pagination,
loading,
onToggleDarkMode,
onToggleSidebar,
onSearchChange,
onSortChange,
onSearchSubmit,
}: SidebarProps) {
const sidebarContent = (
<>
{/* 搜索表单 */}
<form onSubmit={onSearchSubmit} className="mb-6">
<div className="relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
<input
type="text"
value={searchQuery}
onChange={(e) => onSearchChange(e.target.value)}
placeholder={sidebarCollapsed ? "搜索..." : "搜索标题或日期..."}
className="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>
</div>
{!sidebarCollapsed && (
<button
type="submit"
className="w-full mt-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
>
搜索
</button>
)}
</form>
{/* 排序选项 */}
<div className="mb-6">
{!sidebarCollapsed && (
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
排序方式
</label>
)}
<select
value={sortBy}
onChange={(e) => onSortChange(e.target.value)}
className="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
>
<option value="newest">最新上传</option>
<option value="oldest">最早上传</option>
<option value="title">按标题排序</option>
</select>
</div>
</>
);
return (
<>
{/* 桌面端侧边栏 */}
<aside className={`
hidden lg:flex flex-col
h-screen sticky top-0
transition-all duration-300 ease-in-out
${sidebarCollapsed ? 'w-16' : 'w-64'}
bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-700
overflow-y-auto
`}>
<div className="p-4 flex-1">
{sidebarContent}
</div>
{/* 侧边栏收缩按钮 */}
<div className="p-4 border-t border-gray-200 dark:border-gray-700">
<button
onClick={onToggleSidebar}
className="w-full flex items-center justify-center p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
aria-label={sidebarCollapsed ? '展开侧边栏' : '收缩侧边栏'}
>
{sidebarCollapsed ? (
<ChevronRight className="w-5 h-5 text-gray-700 dark:text-gray-300" />
) : (
<>
<ChevronLeft className="w-5 h-5 text-gray-700 dark:text-gray-300" />
<span className="ml-2 text-sm text-gray-700 dark:text-gray-300">收缩</span>
</>
)}
</button>
</div>
</aside>
</>
);
}

6
app/layout.tsx
View File

@@ -13,8 +13,8 @@ const geistMono = Geist_Mono({
});
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
title: "漳州太鼓",
description: "课题与群相册",
};
export default function RootLayout({
@@ -23,7 +23,7 @@ export default function RootLayout({
children: React.ReactNode;
}>) {
return (
<html lang="en">
<html lang="zh-CN">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>

62
app/lib/api.ts Normal file
View File

@@ -0,0 +1,62 @@
import { Photo, Pagination, PhotoFetchParams } from '@/app/types';
/**
* 获取照片数据
* @param params 获取参数
* @returns 照片数据和分页信息
*/
export async function fetchPhotos(params: PhotoFetchParams = {}): Promise<{
photos: Photo[];
pagination: Pagination;
}> {
const {
page = 1,
limit = 20,
search = '',
sort = 'newest'
} = params;
try {
const queryParams = new URLSearchParams({
page: page.toString(),
limit: limit.toString(),
sort,
...(search && { search }),
});
const response = await fetch(`/api/photos?${queryParams}`);
const data = await response.json();
if (data.success) {
return {
photos: data.data.photos,
pagination: data.data.pagination,
};
} else {
throw new Error(data.error || '获取照片失败');
}
} catch (error) {
console.error('Error fetching photos:', error);
throw error;
}
}
/**
* 获取所有照片（不分页）
* @returns 所有照片数组
*/
export async function fetchAllPhotos(): Promise<Photo[]> {
try {
const response = await fetch('/api/photos?limit=1000');
const data = await response.json();
if (data.success) {
return data.data.photos;
} else {
throw new Error(data.error || '获取照片失败');
}
} catch (error) {
console.error('Error fetching all photos:', error);
throw error;
}
}

53
app/lib/utils.ts Normal file
View File

@@ -0,0 +1,53 @@
/**
* 格式化日期
* @param dateString ISO日期字符串
* @returns 格式化的日期字符串
*/
export function formatDate(dateString: string): string {
const date = new Date(dateString);
return date.toLocaleDateString('zh-CN', {
year: 'numeric',
month: 'short',
day: 'numeric',
hour: '2-digit',
minute: '2-digit',
});
}
/**
* 将照片分配到瀑布流列中
* @param photos 照片数组
* @param columnCount 列数
* @returns 分配到各列的照片数组
*/
export function distributeToColumns<T>(items: T[], columnCount: number): T[][] {
const columns: T[][] = Array.from({ length: columnCount }, () => []);
items.forEach((item, index) => {
columns[index % columnCount].push(item);
});
return columns;
}
/**
* 根据窗口宽度计算瀑布流列数
* @returns 列数
*/
export function getColumnCount(): number {
if (typeof window === 'undefined') return 4;
if (window.innerWidth < 640) return 2;
if (window.innerWidth < 1024) return 3;
return 4;
}
/**
* 格式化文件大小
* @param bytes 字节数
* @returns 格式化的文件大小字符串
*/
export function formatFileSize(bytes: number): string {
if (bytes === 0) return '0 Bytes';
const k = 1024;
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}

379
app/page.tsx
View File

@@ -1,137 +1,11 @@
'use client';
import { useState, useEffect, useCallback, useRef } from 'react';
import Image from 'next/image';
import { Search, Loader2, Moon, Sun, Calendar, Image as ImageIcon } from 'lucide-react';
import { useState } from 'react';
import Navbar from '@/app/components/Navbar';
import { BookOpen, Users, Calendar, BarChart, FileText, Settings, ChevronRight, Plus, CheckCircle, Clock, AlertCircle } from 'lucide-react';
// 照片类型定义
interface Photo {
id: string;
url: string;
title: string;
uploadedAt: string;
size: number;
contentType: string;
originalFilename?: string;
imageUrl: string;
}
// 分页信息类型
interface Pagination {
page: number;
limit: number;
total: number;
totalPages: number;
hasNextPage: boolean;
hasPrevPage: boolean;
}
export default function Home() {
const [photos, setPhotos] = useState<Photo[]>([]);
const [loading, setLoading] = useState(true);
const [loadingMore, setLoadingMore] = useState(false);
const [searchQuery, setSearchQuery] = useState('');
const [sortBy, setSortBy] = useState('newest');
export default function HomePage() {
const [darkMode, setDarkMode] = useState(false);
const [pagination, setPagination] = useState<Pagination>({
page: 1,
limit: 20,
total: 0,
totalPages: 0,
hasNextPage: false,
hasPrevPage: false,
});
const [selectedPhoto, setSelectedPhoto] = useState<Photo | null>(null);
const observerRef = useRef<IntersectionObserver | null>(null);
const loadMoreRef = useRef<HTMLDivElement>(null);
// 获取照片数据
const fetchPhotos = useCallback(async (page = 1, isLoadMore = false) => {
if (isLoadMore) {
setLoadingMore(true);
} else {
setLoading(true);
}
try {
const params = new URLSearchParams({
page: page.toString(),
limit: '20',
sort: sortBy,
...(searchQuery && { search: searchQuery }),
});
const response = await fetch(`/api/photos?${params}`);
const data = await response.json();
if (data.success) {
if (isLoadMore) {
setPhotos(prev => [...prev, ...data.data.photos]);
} else {
setPhotos(data.data.photos);
}
setPagination(data.data.pagination);
}
} catch (error) {
console.error('Error fetching photos:', error);
} finally {
setLoading(false);
setLoadingMore(false);
}
}, [searchQuery, sortBy]);
// 初始加载和搜索/排序变化时重新加载
useEffect(() => {
fetchPhotos(1, false);
}, [fetchPhotos]);
// 无限滚动加载
useEffect(() => {
if (!pagination.hasNextPage || loadingMore) return;
observerRef.current = new IntersectionObserver(
(entries) => {
if (entries[0].isIntersecting) {
fetchPhotos(pagination.page + 1, true);
}
},
{ threshold: 0.5 }
);
if (loadMoreRef.current) {
observerRef.current.observe(loadMoreRef.current);
}
return () => {
if (observerRef.current) {
observerRef.current.disconnect();
}
};
}, [pagination, loadingMore, fetchPhotos]);
// 处理搜索
const handleSearch = useCallback((e: React.FormEvent) => {
e.preventDefault();
fetchPhotos(1, false);
}, [fetchPhotos]);
// 处理排序变化
const handleSortChange = useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {
setSortBy(e.target.value);
}, []);
// 格式化日期
const formatDate = (dateString: string) => {
const date = new Date(dateString);
return date.toLocaleDateString('zh-CN', {
year: 'numeric',
month: 'short',
day: 'numeric',
hour: '2-digit',
minute: '2-digit',
});
};
// 切换暗色模式
const toggleDarkMode = () => {
@@ -143,253 +17,16 @@ export default function Home() {
}
};
// 计算瀑布流列数
const getColumnCount = () => {
if (typeof window === 'undefined') return 4;
if (window.innerWidth < 640) return 2;
if (window.innerWidth < 1024) return 3;
return 4;
};
// 将照片分配到瀑布流列中
const distributeToColumns = (photos: Photo[], columnCount: number): Photo[][] => {
const columns: Photo[][] = Array.from({ length: columnCount }, () => []);
photos.forEach((photo, index) => {
columns[index % columnCount].push(photo);
});
return columns;
};
const columnCount = getColumnCount();
const columns = distributeToColumns(photos, columnCount);
return (
<div className={`min-h-screen transition-colors duration-200 ${darkMode ? 'dark bg-gray-900' : 'bg-gray-50'}`}>
{/* 顶部导航栏 */}
<header className="sticky top-0 z-50 border-b bg-white/80 dark:bg-gray-900/80 backdrop-blur-md dark:border-gray-700">
<div className="container mx-auto px-4 py-4">
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
<div className="flex items-center gap-4">
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">
照片展示系统
</h1>
<button
onClick={toggleDarkMode}
className="p-2 rounded-lg bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
aria-label={darkMode ? '切换到亮色模式' : '切换到暗色模式'}
>
{darkMode ? (
<Sun className="w-5 h-5 text-yellow-500" />
) : (
<Moon className="w-5 h-5 text-gray-700" />
)}
</button>
</div>
{/* 导航栏 */}
<Navbar darkMode={darkMode} onToggleDarkMode={toggleDarkMode} />
<div className="flex flex-col sm:flex-row gap-4">
<form onSubmit={handleSearch} className="flex gap-2">
<div className="relative flex-1">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
<input
type="text"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
placeholder="搜索标题或日期..."
className="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>
</div>
<button
type="submit"
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
>
搜索
</button>
</form>
{/* 主内容 */}
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<select
value={sortBy}
onChange={handleSortChange}
className="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
>
<option value="newest">最新上传</option>
<option value="oldest">最早上传</option>
<option value="title">按标题排序</option>
</select>
</div>
</div>
</div>
</header>
<main className="container mx-auto px-4 py-8">
{/* 加载状态 */}
{loading && (
<div className="flex justify-center items-center py-20">
<Loader2 className="w-8 h-8 animate-spin text-blue-600" />
<span className="ml-3 text-gray-600 dark:text-gray-300">加载照片中...</span>
</div>
)}
{/* 照片网格 */}
{!loading && photos.length > 0 && (
<>
<div className="mb-6">
<p className="text-gray-600 dark:text-gray-300">
共 {pagination.total} 张照片 • 第 {pagination.page}/{pagination.totalPages} 页
</p>
</div>
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
{columns.map((column, columnIndex) => (
<div key={columnIndex} className="flex flex-col gap-4">
{column.map((photo) => (
<div
key={photo.id}
className="group relative overflow-hidden rounded-xl bg-white dark:bg-gray-800 shadow-lg hover:shadow-2xl transition-all duration-300 cursor-pointer"
onClick={() => setSelectedPhoto(photo)}
>
{/* 图片容器 */}
<div className="relative aspect-square overflow-hidden">
<Image
src={photo.imageUrl}
alt={photo.title}
fill
className="object-cover transition-transform duration-500 group-hover:scale-110"
sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 25vw"
unoptimized // 因为图片来自外部 URL
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
</div>
{/* 图片信息 */}
<div className="p-4">
<h3 className="font-semibold text-gray-900 dark:text-white line-clamp-1 mb-2">
{photo.title}
</h3>
<div className="flex items-center gap-3 text-sm text-gray-600 dark:text-gray-400">
<div className="flex items-center gap-1">
<Calendar className="w-4 h-4" />
<span>{formatDate(photo.uploadedAt)}</span>
</div>
<div className="flex items-center gap-1">
<ImageIcon className="w-4 h-4" />
<span>{(photo.size / 1024 / 1024).toFixed(2)} MB</span>
</div>
</div>
</div>
</div>
))}
</div>
))}
</div>
{/* 加载更多指示器 */}
{pagination.hasNextPage && (
<div ref={loadMoreRef} className="py-8 text-center">
{loadingMore ? (
<div className="flex justify-center items-center">
<Loader2 className="w-6 h-6 animate-spin text-blue-600" />
<span className="ml-3 text-gray-600 dark:text-gray-300">加载更多照片...</span>
</div>
) : (
<p className="text-gray-500 dark:text-gray-400">滚动加载更多</p>
)}
</div>
)}
</>
)}
{/* 空状态 */}
{!loading && photos.length === 0 && (
<div className="text-center py-20">
<div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gray-100 dark:bg-gray-800 mb-4">
<ImageIcon className="w-8 h-8 text-gray-400" />
</div>
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
暂无照片
</h3>
<p className="text-gray-600 dark:text-gray-400 max-w-md mx-auto">
{searchQuery ? '没有找到匹配的照片，请尝试其他搜索词。' : '还没有上传任何照片。'}
</p>
</div>
)}
</main>
{/* 照片详情模态框 */}
{selectedPhoto && (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80">
<div className="relative max-w-4xl max-h-[90vh] w-full bg-white dark:bg-gray-900 rounded-2xl overflow-hidden">
<button
onClick={() => setSelectedPhoto(null)}
className="absolute top-4 right-4 z-10 p-2 rounded-full bg-black/50 text-white hover:bg-black/70 transition-colors"
>
✕
</button>
<div className="grid md:grid-cols-2 gap-0">
{/* 图片区域 */}
<div className="relative aspect-square md:aspect-auto md:h-[70vh]">
<Image
src={selectedPhoto.imageUrl}
alt={selectedPhoto.title}
fill
className="object-contain"
unoptimized
/>
</div>
{/* 信息区域 */}
<div className="p-6 md:p-8 overflow-y-auto">
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
{selectedPhoto.title}
</h2>
<div className="space-y-4">
<div>
<h4 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">
上传时间
</h4>
<p className="text-gray-900 dark:text-white">
{formatDate(selectedPhoto.uploadedAt)}
</p>
</div>
<div>
<h4 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">
文件信息
</h4>
<p className="text-gray-900 dark:text-white">
{selectedPhoto.originalFilename || '未命名文件'} • {(selectedPhoto.size / 1024 / 1024).toFixed(2)} MB
</p>
</div>
<div>
<h4 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">
图片链接
</h4>
<a
href={selectedPhoto.imageUrl}
target="_blank"
rel="noopener noreferrer"
className="text-blue-600 dark:text-blue-400 hover:underline break-all"
>
{selectedPhoto.imageUrl}
</a>
</div>
<div>
<h4 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">
唯一标识
</h4>
<p className="text-gray-900 dark:text-white font-mono text-sm break-all">
{selectedPhoto.id}
</p>
</div>
</div>
</div>
</div>
</div>
</div>
)}
</div>
);
}

260
app/photos/page.tsx Normal file
View File

@@ -0,0 +1,260 @@
'use client';
import { useState, useEffect, useCallback, useRef } from 'react';
import Navbar from '@/app/components/Navbar';
import Sidebar from '@/app/components/Sidebar';
import PhotoGallery from '@/app/components/PhotoGallery';
import PhotoDetailModal from '@/app/components/PhotoDetailModal';
import ImageModal from '@/app/components/ImageModal';
import { Photo, Pagination } from '@/app/types';
import { fetchPhotos } from '@/app/lib/api';
export default function PhotosPage() {
const [photos, setPhotos] = useState<Photo[]>([]);
const [loading, setLoading] = useState(true);
const [loadingMore, setLoadingMore] = useState(false);
const [searchQuery, setSearchQuery] = useState('');
const [sortBy, setSortBy] = useState('newest');
const [darkMode, setDarkMode] = useState(false);
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
const [pagination, setPagination] = useState<Pagination>({
page: 1,
limit: 20,
total: 0,
totalPages: 0,
hasNextPage: false,
hasPrevPage: false,
});
const [selectedPhoto, setSelectedPhoto] = useState<Photo | null>(null);
const [detailDrawerOpen, setDetailDrawerOpen] = useState(false);
const [imageModalOpen, setImageModalOpen] = useState(false);
const observerRef = useRef<IntersectionObserver | null>(null);
const loadMoreRef = useRef<HTMLDivElement | null>(null);
// 获取照片数据
const fetchPhotosData = useCallback(async (page = 1, isLoadMore = false) => {
if (isLoadMore) {
setLoadingMore(true);
} else {
setLoading(true);
}
try {
const data = await fetchPhotos({
page,
limit: 20,
search: searchQuery,
sort: sortBy as 'newest' | 'oldest' | 'title',
});
if (isLoadMore) {
setPhotos(prev => [...prev, ...data.photos]);
} else {
setPhotos(data.photos);
}
setPagination(data.pagination);
} catch (error) {
console.error('Error fetching photos:', error);
} finally {
setLoading(false);
setLoadingMore(false);
}
}, [searchQuery, sortBy]);
// 初始加载和搜索/排序变化时重新加载
useEffect(() => {
fetchPhotosData(1, false);
}, [fetchPhotosData]);
// 无限滚动加载
useEffect(() => {
if (!pagination.hasNextPage || loadingMore) return;
observerRef.current = new IntersectionObserver(
(entries) => {
if (entries[0].isIntersecting) {
fetchPhotosData(pagination.page + 1, true);
}
},
{ threshold: 0.5 }
);
if (loadMoreRef.current) {
observerRef.current.observe(loadMoreRef.current);
}
return () => {
if (observerRef.current) {
observerRef.current.disconnect();
}
};
}, [pagination, loadingMore, fetchPhotosData]);
// 处理搜索
const handleSearch = useCallback((e: React.FormEvent) => {
e.preventDefault();
fetchPhotosData(1, false);
}, [fetchPhotosData]);
// 处理排序变化
const handleSortChange = useCallback((value: string) => {
setSortBy(value);
}, []);
// 切换暗色模式
const toggleDarkMode = () => {
setDarkMode(!darkMode);
if (!darkMode) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
};
// 切换侧边栏收缩状态
const toggleSidebar = () => {
setSidebarCollapsed(!sidebarCollapsed);
};
// 切换移动端菜单
const toggleMobileMenu = () => {
setMobileMenuOpen(!mobileMenuOpen);
};
// 关闭移动端菜单
const closeMobileMenu = () => {
setMobileMenuOpen(false);
};
// 打开图片模态框（点击卡片时）
const openImageModal = (photo: Photo) => {
setSelectedPhoto(photo);
setImageModalOpen(true);
};
// 关闭图片模态框
const closeImageModal = () => {
setImageModalOpen(false);
};
// 打开照片详情抽屉（从图片模态框的info按钮）
const openDetailDrawer = () => {
setDetailDrawerOpen(true);
// 保持图片模态框打开状态
};
// 关闭照片详情抽屉
const closePhotoDetail = () => {
setDetailDrawerOpen(false);
// 不清除选中的照片，以便图片模态框保持打开状态
};
// 完全关闭所有模态框和抽屉
const closeAllModals = () => {
setImageModalOpen(false);
setDetailDrawerOpen(false);
// 延迟清除选中的照片
setTimeout(() => setSelectedPhoto(null), 300);
};
return (
<div className={`min-h-screen transition-colors duration-200 ${darkMode ? 'dark bg-gray-900' : 'bg-gray-50'}`}>
{/* 导航栏 */}
<Navbar darkMode={darkMode} onToggleDarkMode={toggleDarkMode} />
{/* 移动端菜单遮罩 */}
{mobileMenuOpen && (
<div
className="lg:hidden fixed inset-0 z-40 bg-black/50"
onClick={closeMobileMenu}
/>
)}
{/* 移动端侧边栏菜单 */}
<div className={`
lg:hidden fixed top-0 left-0 z-50 h-full w-64
transform transition-transform duration-300 ease-in-out
${mobileMenuOpen ? 'translate-x-0' : '-translate-x-full'}
bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-700
overflow-y-auto
`}>
<div className="p-4">
<div className="flex items-center justify-between mb-8">
<h1 className="text-xl font-bold text-gray-900 dark:text-white">
照片展示系统
</h1>
<button
onClick={closeMobileMenu}
className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
aria-label="关闭菜单"
>
✕
</button>
</div>
{/* 移动端侧边栏内容 */}
<Sidebar
darkMode={darkMode}
sidebarCollapsed={false}
searchQuery={searchQuery}
sortBy={sortBy}
pagination={pagination}
loading={loading}
onToggleDarkMode={toggleDarkMode}
onToggleSidebar={toggleSidebar}
onSearchChange={setSearchQuery}
onSortChange={handleSortChange}
onSearchSubmit={handleSearch}
/>
</div>
</div>
{/* 桌面端布局 */}
<div className="flex">
{/* 桌面端侧边栏 */}
<Sidebar
darkMode={darkMode}
sidebarCollapsed={sidebarCollapsed}
searchQuery={searchQuery}
sortBy={sortBy}
pagination={pagination}
loading={loading}
onToggleDarkMode={toggleDarkMode}
onToggleSidebar={toggleSidebar}
onSearchChange={setSearchQuery}
onSortChange={handleSortChange}
onSearchSubmit={handleSearch}
/>
{/* 主内容区域 */}
<main className={`flex-1 ${sidebarCollapsed ? 'lg:ml-16' : 'lg:ml-64'} transition-all duration-300 ease-in-out`}>
<PhotoGallery
photos={photos}
loading={loading}
loadingMore={loadingMore}
pagination={pagination}
selectedPhoto={selectedPhoto}
onPhotoClick={openImageModal}
loadMoreRef={loadMoreRef}
/>
</main>
{/* 图片模态框 */}
<ImageModal
photo={selectedPhoto}
isOpen={imageModalOpen}
onClose={closeAllModals}
onInfoClick={openDetailDrawer}
/>
{/* 照片详情抽屉 */}
<PhotoDetailModal
photo={selectedPhoto}
isOpen={detailDrawerOpen}
onClose={closePhotoDetail}
/>
</div>
</div>
);
}

29
app/types/index.ts Normal file
View File

@@ -0,0 +1,29 @@
// 照片类型定义
export interface Photo {
id: string;
url: string;
title: string;
uploadedAt: string;
size: number;
contentType: string;
originalFilename?: string;
imageUrl: string;
}
// 分页信息类型
export interface Pagination {
page: number;
limit: number;
total: number;
totalPages: number;
hasNextPage: boolean;
hasPrevPage: boolean;
}
// 照片获取参数类型
export interface PhotoFetchParams {
page?: number;
limit?: number;
search?: string;
sort?: 'newest' | 'oldest' | 'title';
}