mirror of
https://github.com/DrizzleTime/Foxel.git
synced 2026-05-11 18:10:10 +08:00
feat(imageGrid): enhance layout and responsiveness of image grid and cards
This commit is contained in:
shiyu
@@ -1,27 +1,36 @@
|
||||
.image-grid {
|
||||
margin-bottom: 40px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
grid-gap: 24px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 3px;
|
||||
justify-content: space-between;
|
||||
/* 改为space-between让每行铺满 */
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.image-grid::after {
|
||||
content: '';
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
/* 现代化卡片样式 */
|
||||
.custom-card {
|
||||
position: relative;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8px 20px rgba(0,0,0,0.08);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
height: 100%;
|
||||
background: #ffffff;
|
||||
transform: translateY(0);
|
||||
cursor: pointer;
|
||||
aspect-ratio: 1 / 1;
|
||||
height: 250px;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
min-width: 180px;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.custom-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 14px 28px rgba(0,0,0,0.15);
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
/* 图片占满卡片 */
|
||||
@@ -51,13 +60,13 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 50%);
|
||||
background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 50%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.35s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
padding: 20px;
|
||||
padding: 16px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@@ -78,44 +87,46 @@
|
||||
}
|
||||
|
||||
.custom-card-title {
|
||||
font-size: 18px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-bottom: 8px;
|
||||
text-shadow: 0 1px 3px rgba(0,0,0,0.3);
|
||||
margin-bottom: 6px;
|
||||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.custom-card-tags-container {
|
||||
margin-top: 6px;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 4px;
|
||||
margin-bottom: 8px;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.image-tag {
|
||||
margin-right: 6px;
|
||||
font-size: 11px !important;
|
||||
background: rgba(255,255,255,0.2);
|
||||
padding: 3px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 10px !important;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
color: #ffffff;
|
||||
display: inline-block;
|
||||
margin-bottom: 4px;
|
||||
backdrop-filter: blur(4px);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 权限和元数据指示器 */
|
||||
.custom-card-indicators {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
top: 8px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 12px;
|
||||
padding: 0 8px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.35s ease;
|
||||
z-index: 2;
|
||||
@@ -128,25 +139,25 @@
|
||||
.custom-card-permission {
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
color: white;
|
||||
border-radius: 20px;
|
||||
padding: 5px 10px;
|
||||
font-size: 12px;
|
||||
border-radius: 12px;
|
||||
padding: 3px 8px;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
gap: 3px;
|
||||
backdrop-filter: blur(4px);
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.custom-card-metadata {
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
color: white;
|
||||
border-radius: 20px;
|
||||
padding: 5px 10px;
|
||||
font-size: 12px;
|
||||
border-radius: 12px;
|
||||
padding: 3px 8px;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
@@ -154,20 +165,22 @@
|
||||
.custom-card-actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 12px;
|
||||
margin-top: 8px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.custom-card-action-item {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
border-radius: 50%;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
backdrop-filter: blur(4px);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.custom-card-action-item:hover {
|
||||
@@ -179,7 +192,7 @@
|
||||
.context-menu {
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
|
||||
padding: 8px 0;
|
||||
min-width: 160px;
|
||||
z-index: 1000;
|
||||
@@ -200,38 +213,38 @@
|
||||
|
||||
/* 选中状态样式 */
|
||||
.custom-card-selected {
|
||||
box-shadow: 0 0 0 3px #1890ff, 0 14px 28px rgba(0,0,0,0.15) !important;
|
||||
box-shadow: 0 0 0 3px #1890ff, 0 8px 20px rgba(0, 0, 0, 0.15) !important;
|
||||
}
|
||||
|
||||
.custom-card-selected::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background-color: #1890ff;
|
||||
z-index: 5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.custom-card-selected::after {
|
||||
content: '✓';
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
z-index: 6;
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.image-grid-pagination {
|
||||
@@ -252,19 +265,54 @@
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||||
animation: loading 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes loading {
|
||||
0% { transform: translateX(-100%); }
|
||||
100% { transform: translateX(100%); }
|
||||
0% {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 768px) {
|
||||
.image-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
grid-gap: 16px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.custom-card {
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.custom-card-overlay {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.custom-card-title {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.custom-card-actions {
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.custom-card-action-item {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.custom-card {
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.custom-card-overlay {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
@@ -439,6 +439,21 @@ const ImageGrid: React.FC<ImageGridProps> = ({
|
||||
return !!user && !!image.userId && user.id === image.userId;
|
||||
};
|
||||
|
||||
// 计算图片宽度的函数 - 修改为计算最小宽度
|
||||
const calculateImageMinWidth = (image: PictureResponse): number => {
|
||||
const fixedHeight = 200; // 固定高度
|
||||
const defaultMinWidth = 180; // 默认最小宽度
|
||||
|
||||
if (image.exifInfo?.width && image.exifInfo?.height) {
|
||||
const aspectRatio = image.exifInfo.width / image.exifInfo.height;
|
||||
const calculatedWidth = Math.round(fixedHeight * aspectRatio);
|
||||
// 确保最小宽度不小于180px，最大不超过400px
|
||||
return Math.max(180, Math.min(400, calculatedWidth));
|
||||
}
|
||||
|
||||
return defaultMinWidth;
|
||||
};
|
||||
|
||||
// 优化渲染内容函数
|
||||
const renderContent = () => {
|
||||
// 渲染加载状态
|
||||
@@ -446,7 +461,11 @@ const ImageGrid: React.FC<ImageGridProps> = ({
|
||||
return (
|
||||
<div className="image-grid">
|
||||
{Array.from({ length: pageSize }).map((_, index) => (
|
||||
<div key={`loading-${index}`} className="custom-card image-loading-effect">
|
||||
<div
|
||||
key={`loading-${index}`}
|
||||
className="custom-card image-loading-effect"
|
||||
style={{ minWidth: 180 }}
|
||||
>
|
||||
<div className="custom-card-cover" style={{ background: '#f5f5f5' }}>
|
||||
{/* 简单的加载状态 */}
|
||||
</div>
|
||||
@@ -472,11 +491,16 @@ const ImageGrid: React.FC<ImageGridProps> = ({
|
||||
<div className="image-grid">
|
||||
{images.map((image, index) => {
|
||||
const isOwner = canEditImage(image);
|
||||
const imageMinWidth = calculateImageMinWidth(image);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={image.id}
|
||||
className={`custom-card ${selectedIds.includes(image.id) ? 'custom-card-selected' : ''} ${selectable ? 'custom-card-selectable-mode' : ''}`}
|
||||
style={{
|
||||
minWidth: imageMinWidth,
|
||||
flexBasis: imageMinWidth // 设置flex基准值
|
||||
}}
|
||||
onClick={() => handleImageClick(image, index)}
|
||||
onContextMenu={(e) => handleContextMenu(e, image)}
|
||||
>
|
||||
@@ -519,11 +543,14 @@ const ImageGrid: React.FC<ImageGridProps> = ({
|
||||
<div className="custom-card-info">
|
||||
<div className="custom-card-title">{image.name}</div>
|
||||
|
||||
{image.tags && (
|
||||
{image.tags && image.tags.length > 0 && (
|
||||
<div className="custom-card-tags-container">
|
||||
{image.tags.map(tag => (
|
||||
<Text key={tag} className="image-tag">#{tag}</Text>
|
||||
{image.tags.slice(0, 3).map((tag, tagIndex) => (
|
||||
<Text key={`${image.id}-${tag}-${tagIndex}`} className="image-tag">#{tag}</Text>
|
||||
))}
|
||||
{image.tags.length > 3 && (
|
||||
<Text className="image-tag">+{image.tags.length - 3}</Text>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -536,9 +563,9 @@ const ImageGrid: React.FC<ImageGridProps> = ({
|
||||
}}
|
||||
>
|
||||
{image.isFavorited ? (
|
||||
<HeartFilled style={{ fontSize: 16, color: '#ff4d4f' }} />
|
||||
<HeartFilled style={{ fontSize: 14, color: '#ff4d4f' }} />
|
||||
) : (
|
||||
<HeartOutlined style={{ fontSize: 16, color: '#ffffff' }} />
|
||||
<HeartOutlined style={{ fontSize: 14, color: '#ffffff' }} />
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -554,7 +581,7 @@ const ImageGrid: React.FC<ImageGridProps> = ({
|
||||
}
|
||||
}}
|
||||
>
|
||||
<EditOutlined style={{ fontSize: 16, color: '#ffffff' }} />
|
||||
<EditOutlined style={{ fontSize: 14, color: '#ffffff' }} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -565,7 +592,7 @@ const ImageGrid: React.FC<ImageGridProps> = ({
|
||||
onShare?.(image);
|
||||
}}
|
||||
>
|
||||
<ShareAltOutlined style={{ fontSize: 16, color: '#ffffff' }} />
|
||||
<ShareAltOutlined style={{ fontSize: 14, color: '#ffffff' }} />
|
||||
</div>
|
||||
|
||||
<div
|
||||
@@ -575,7 +602,7 @@ const ImageGrid: React.FC<ImageGridProps> = ({
|
||||
onDownload?.(image);
|
||||
}}
|
||||
>
|
||||
<DownloadOutlined style={{ fontSize: 16, color: '#ffffff' }} />
|
||||
<DownloadOutlined style={{ fontSize: 14, color: '#ffffff' }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -8,7 +8,7 @@ import {
|
||||
CompassOutlined,
|
||||
DashboardOutlined,
|
||||
UserOutlined,
|
||||
LogoutOutlined
|
||||
FileTextOutlined
|
||||
} from '@ant-design/icons';
|
||||
|
||||
import AllImages from '../pages/allImages/Index';
|
||||
@@ -171,10 +171,10 @@ const routes: RouteConfig[] = [
|
||||
title: '图片管理'
|
||||
}
|
||||
},
|
||||
{
|
||||
{
|
||||
path: 'log',
|
||||
key: 'admin-log',
|
||||
icon: <LogoutOutlined />,
|
||||
icon: <FileTextOutlined />,
|
||||
label: '日志中心',
|
||||
element: <AdminLogManagement />,
|
||||
area: 'admin',
|
||||
|
||||
Reference in New Issue
Block a user