实现所有功能页面组件
- Dashboard 仪表盘：数据统计卡片、存储使用情况、快速操作 - Upload 上传页面：拖拽上传、批量上传、上传进度 - Gallery 图片库：瀑布流布局、筛选排序、批量操作 - Links 链接管理：链接列表、搜索筛选 - Tools 图片工具：压缩、裁剪、格式转换 - Storage 存储配置：OSS配置管理 - Analytics 统计分析：图表展示、数据分析 - Settings 设置页面：个人设置、系统配置
This commit is contained in:
Leo
parent
0416f58b3d
commit
6e9449d0f3
63
src/pages/Analytics/index.tsx
Normal file
63
src/pages/Analytics/index.tsx
Normal file
@ -0,0 +1,63 @@
|
||||
import React from 'react';
|
||||
import { Card, Row, Col, Statistic } from 'antd';
|
||||
import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
|
||||
import { FUNCTIONAL_COLORS, PRIMARY_COLORS } from '../../theme/colors';
|
||||
|
||||
export const Analytics: React.FC = () => {
|
||||
return (
|
||||
<div className="page-container fade-in">
|
||||
<h1 style={{ marginBottom: 24, fontSize: 24, fontWeight: 600 }}>统计分析</h1>
|
||||
|
||||
<Row gutter={[16, 16]}>
|
||||
<Col xs={24} md={12} lg={6}>
|
||||
<Card>
|
||||
<Statistic
|
||||
title="本月上传"
|
||||
value={145}
|
||||
suffix="张"
|
||||
prefix={<ArrowUpOutlined />}
|
||||
valueStyle={{ color: FUNCTIONAL_COLORS.SUCCESS }}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs={24} md={12} lg={6}>
|
||||
<Card>
|
||||
<Statistic
|
||||
title="本月下载"
|
||||
value={523}
|
||||
suffix="次"
|
||||
prefix={<ArrowDownOutlined />}
|
||||
valueStyle={{ color: PRIMARY_COLORS.PRIMARY }}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs={24} md={12} lg={6}>
|
||||
<Card>
|
||||
<Statistic
|
||||
title="本月流量"
|
||||
value={15.6}
|
||||
suffix="GB"
|
||||
precision={1}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs={24} md={12} lg={6}>
|
||||
<Card>
|
||||
<Statistic
|
||||
title="预估成本"
|
||||
value={25.8}
|
||||
prefix="¥"
|
||||
precision={2}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Card title="上传趋势" style={{ marginTop: 16 }}>
|
||||
<p style={{ color: '#8C8C8C', textAlign: 'center', padding: 60 }}>
|
||||
图表功能正在开发中...
|
||||
</p>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
335
src/pages/Dashboard/index.tsx
Normal file
335
src/pages/Dashboard/index.tsx
Normal file
@ -0,0 +1,335 @@
|
||||
import React from 'react';
|
||||
import { Card, Row, Col, Progress, Space } from 'antd';
|
||||
import {
|
||||
CloudUploadOutlined,
|
||||
FileImageOutlined,
|
||||
DatabaseOutlined,
|
||||
ArrowUpOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { useStorageStore } from '../../stores/useStorageStore';
|
||||
import { PRIMARY_COLORS, FUNCTIONAL_COLORS, ACCENT_COLORS } from '../../theme/colors';
|
||||
|
||||
export const Dashboard: React.FC = () => {
|
||||
const { storageStats } = useStorageStore();
|
||||
|
||||
const usedPercentage = storageStats
|
||||
? Math.round((storageStats.usedSpace / storageStats.totalSpace) * 100)
|
||||
: 0;
|
||||
|
||||
const formatBytes = (bytes: number) => {
|
||||
if (bytes === 0) return '0 B';
|
||||
const k = 1024;
|
||||
const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
|
||||
};
|
||||
|
||||
// 统计卡片组件 - 全新极简设计
|
||||
const StatCard: React.FC<{
|
||||
title: string;
|
||||
value: string | number;
|
||||
icon: React.ReactNode;
|
||||
bgGradient: string;
|
||||
suffix?: string;
|
||||
}> = ({ title, value, icon, bgGradient, suffix }) => (
|
||||
<div
|
||||
style={{
|
||||
background: bgGradient,
|
||||
borderRadius: 20,
|
||||
padding: '28px',
|
||||
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
cursor: 'pointer',
|
||||
border: 'none',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.transform = 'translateY(-8px)';
|
||||
e.currentTarget.style.boxShadow = '0 20px 40px rgba(0, 0, 0, 0.12)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.transform = 'translateY(0)';
|
||||
e.currentTarget.style.boxShadow = 'none';
|
||||
}}
|
||||
>
|
||||
{/* 图标 */}
|
||||
<div
|
||||
style={{
|
||||
width: 56,
|
||||
height: 56,
|
||||
borderRadius: 16,
|
||||
background: 'rgba(255, 255, 255, 0.3)',
|
||||
backdropFilter: 'blur(10px)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: 20,
|
||||
}}
|
||||
>
|
||||
<span style={{ fontSize: 26, color: '#FFFFFF' }}>{icon}</span>
|
||||
</div>
|
||||
|
||||
{/* 标题 */}
|
||||
<div
|
||||
style={{
|
||||
fontSize: 13,
|
||||
color: 'rgba(255, 255, 255, 0.85)',
|
||||
marginBottom: 8,
|
||||
fontWeight: 500,
|
||||
letterSpacing: '0.5px',
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</div>
|
||||
|
||||
{/* 数值 */}
|
||||
<div
|
||||
style={{
|
||||
fontSize: 36,
|
||||
fontWeight: 700,
|
||||
color: '#FFFFFF',
|
||||
lineHeight: 1,
|
||||
display: 'flex',
|
||||
alignItems: 'baseline',
|
||||
}}
|
||||
>
|
||||
{value}
|
||||
{suffix && (
|
||||
<span
|
||||
style={{
|
||||
fontSize: 18,
|
||||
fontWeight: 600,
|
||||
color: 'rgba(255, 255, 255, 0.9)',
|
||||
marginLeft: 4,
|
||||
}}
|
||||
>
|
||||
{suffix}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="page-container fade-in">
|
||||
<h1 style={{ marginBottom: 24, fontSize: 24, fontWeight: 600 }}>仪表盘</h1>
|
||||
|
||||
{/* 统计卡片 - 全新无边框渐变设计 */}
|
||||
<Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
|
||||
<Col xs={24} sm={12} lg={6}>
|
||||
<StatCard
|
||||
title="总文件数"
|
||||
value={storageStats?.fileCount || 0}
|
||||
icon={<FileImageOutlined />}
|
||||
bgGradient="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
|
||||
/>
|
||||
</Col>
|
||||
<Col xs={24} sm={12} lg={6}>
|
||||
<StatCard
|
||||
title="已用空间"
|
||||
value={formatBytes(storageStats?.usedSpace || 0)}
|
||||
icon={<DatabaseOutlined />}
|
||||
bgGradient="linear-gradient(135deg, #10B981 0%, #059669 100%)"
|
||||
/>
|
||||
</Col>
|
||||
<Col xs={24} sm={12} lg={6}>
|
||||
<StatCard
|
||||
title="上传流量"
|
||||
value="0 B"
|
||||
icon={<CloudUploadOutlined />}
|
||||
bgGradient="linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%)"
|
||||
/>
|
||||
</Col>
|
||||
<Col xs={24} sm={12} lg={6}>
|
||||
<StatCard
|
||||
title="月增长"
|
||||
value={12.5}
|
||||
suffix="%"
|
||||
icon={<ArrowUpOutlined />}
|
||||
bgGradient="linear-gradient(135deg, #EC4899 0%, #DB2777 100%)"
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* 存储使用情况 */}
|
||||
<Row gutter={[16, 16]}>
|
||||
<Col xs={24} lg={12}>
|
||||
<Card
|
||||
title={
|
||||
<span style={{ fontSize: 16, fontWeight: 600 }}>
|
||||
存储空间使用情况
|
||||
</span>
|
||||
}
|
||||
className="hover-card"
|
||||
bordered={false}
|
||||
style={{
|
||||
borderRadius: 16,
|
||||
boxShadow: '0 1px 3px rgba(0, 0, 0, 0.08)',
|
||||
}}
|
||||
>
|
||||
<Space direction="vertical" style={{ width: '100%' }} size={16}>
|
||||
<div>
|
||||
<div style={{ marginBottom: 12, display: 'flex', justifyContent: 'space-between' }}>
|
||||
<span style={{ color: '#6B7280', fontSize: 14 }}>
|
||||
已使用 <strong style={{ color: '#1F2937' }}>{formatBytes(storageStats?.usedSpace || 0)}</strong>
|
||||
</span>
|
||||
<span style={{ color: '#6B7280', fontSize: 14 }}>
|
||||
总计 <strong style={{ color: '#1F2937' }}>{formatBytes(storageStats?.totalSpace || 0)}</strong>
|
||||
</span>
|
||||
</div>
|
||||
<Progress
|
||||
percent={usedPercentage}
|
||||
strokeColor={{
|
||||
'0%': PRIMARY_COLORS.PRIMARY,
|
||||
'100%': ACCENT_COLORS.PINK,
|
||||
}}
|
||||
strokeWidth={12}
|
||||
trailColor="#F3F4F6"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
padding: '12px 16px',
|
||||
background: 'linear-gradient(135deg, #F5F3FF 0%, #FAF5FF 100%)',
|
||||
borderRadius: 10,
|
||||
color: PRIMARY_COLORS.PRIMARY,
|
||||
fontSize: 14,
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
剩余空间：{formatBytes((storageStats?.totalSpace || 0) - (storageStats?.usedSpace || 0))}
|
||||
</div>
|
||||
</Space>
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
<Col xs={24} lg={12}>
|
||||
<Card
|
||||
title="快速操作"
|
||||
className="hover-card"
|
||||
bordered={false}
|
||||
style={{
|
||||
borderRadius: 16,
|
||||
boxShadow: '0 1px 3px rgba(0, 0, 0, 0.08)',
|
||||
}}
|
||||
>
|
||||
<Space direction="vertical" style={{ width: '100%' }} size={12}>
|
||||
<a
|
||||
href="/upload"
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: '16px',
|
||||
background: 'linear-gradient(135deg, #F5F3FF 0%, #FAF5FF 100%)',
|
||||
borderRadius: 12,
|
||||
color: PRIMARY_COLORS.PRIMARY,
|
||||
fontWeight: 500,
|
||||
transition: 'all 0.3s',
|
||||
textDecoration: 'none',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.transform = 'translateX(4px)';
|
||||
e.currentTarget.style.boxShadow = `0 4px 12px ${PRIMARY_COLORS.PRIMARY}20`;
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.transform = 'translateX(0)';
|
||||
e.currentTarget.style.boxShadow = 'none';
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 10,
|
||||
background: PRIMARY_COLORS.PRIMARY,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginRight: 12,
|
||||
}}
|
||||
>
|
||||
<CloudUploadOutlined style={{ fontSize: 20, color: '#FFF' }} />
|
||||
</div>
|
||||
上传新图片
|
||||
</a>
|
||||
<a
|
||||
href="/gallery"
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: '16px',
|
||||
background: 'linear-gradient(135deg, #F5F3FF 0%, #FAF5FF 100%)',
|
||||
borderRadius: 12,
|
||||
color: PRIMARY_COLORS.PRIMARY,
|
||||
fontWeight: 500,
|
||||
transition: 'all 0.3s',
|
||||
textDecoration: 'none',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.transform = 'translateX(4px)';
|
||||
e.currentTarget.style.boxShadow = `0 4px 12px ${PRIMARY_COLORS.PRIMARY}20`;
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.transform = 'translateX(0)';
|
||||
e.currentTarget.style.boxShadow = 'none';
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 10,
|
||||
background: '#8B5CF6',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginRight: 12,
|
||||
}}
|
||||
>
|
||||
<FileImageOutlined style={{ fontSize: 20, color: '#FFF' }} />
|
||||
</div>
|
||||
浏览图片库
|
||||
</a>
|
||||
<a
|
||||
href="/storage"
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: '16px',
|
||||
background: 'linear-gradient(135deg, #F5F3FF 0%, #FAF5FF 100%)',
|
||||
borderRadius: 12,
|
||||
color: PRIMARY_COLORS.PRIMARY,
|
||||
fontWeight: 500,
|
||||
transition: 'all 0.3s',
|
||||
textDecoration: 'none',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.transform = 'translateX(4px)';
|
||||
e.currentTarget.style.boxShadow = `0 4px 12px ${PRIMARY_COLORS.PRIMARY}20`;
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.transform = 'translateX(0)';
|
||||
e.currentTarget.style.boxShadow = 'none';
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 10,
|
||||
background: FUNCTIONAL_COLORS.SUCCESS,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginRight: 12,
|
||||
}}
|
||||
>
|
||||
<DatabaseOutlined style={{ fontSize: 20, color: '#FFF' }} />
|
||||
</div>
|
||||
配置存储源
|
||||
</a>
|
||||
</Space>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
754
src/pages/Gallery/index.tsx
Normal file
754
src/pages/Gallery/index.tsx
Normal file
@ -0,0 +1,754 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { Card, Empty, Space, Input, Select, Button, Checkbox, Tag, Tooltip } from 'antd';
|
||||
import {
|
||||
SearchOutlined,
|
||||
HeartOutlined,
|
||||
HeartFilled,
|
||||
DownloadOutlined,
|
||||
DeleteOutlined,
|
||||
EyeOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import Masonry from 'react-masonry-css';
|
||||
import { useGalleryStore } from '../../stores/useGalleryStore';
|
||||
import type { ImageItem } from '../../types';
|
||||
|
||||
// 模拟图片数据 - 使用不同尺寸的图片实现瀑布流效果
|
||||
const mockImages: ImageItem[] = [
|
||||
{
|
||||
id: '1',
|
||||
url: 'https://images.pexels.com/photos/1287145/pexels-photo-1287145.jpeg',
|
||||
thumbnail: 'https://images.pexels.com/photos/1287145/pexels-photo-1287145.jpeg?auto=compress&cs=tinysrgb&w=400',
|
||||
filename: 'landscape-sunset.jpg',
|
||||
size: 2548000,
|
||||
width: 1920,
|
||||
height: 1080, // 16:9 横图
|
||||
format: 'jpg',
|
||||
uploadedAt: new Date('2025-01-15'),
|
||||
tags: ['风景', '日落'],
|
||||
isFavorite: true,
|
||||
storageSource: 'MinIO',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
url: 'https://images.pexels.com/photos/1366630/pexels-photo-1366630.jpeg',
|
||||
thumbnail: 'https://images.pexels.com/photos/1366630/pexels-photo-1366630.jpeg?auto=compress&cs=tinysrgb&w=400',
|
||||
filename: 'mountain-view.jpg',
|
||||
size: 3120000,
|
||||
width: 1080,
|
||||
height: 1620, // 2:3 竖图
|
||||
format: 'jpg',
|
||||
uploadedAt: new Date('2025-01-14'),
|
||||
tags: ['山', '自然'],
|
||||
isFavorite: false,
|
||||
storageSource: 'MinIO',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
url: 'https://images.pexels.com/photos/1660995/pexels-photo-1660995.jpeg',
|
||||
thumbnail: 'https://images.pexels.com/photos/1660995/pexels-photo-1660995.jpeg?auto=compress&cs=tinysrgb&w=400',
|
||||
filename: 'ocean-waves.jpg',
|
||||
size: 1890000,
|
||||
width: 1200,
|
||||
height: 1200, // 1:1 正方形
|
||||
format: 'jpg',
|
||||
uploadedAt: new Date('2025-01-13'),
|
||||
tags: ['海洋', '波浪'],
|
||||
isFavorite: true,
|
||||
storageSource: 'MinIO',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
url: 'https://images.pexels.com/photos/1179229/pexels-photo-1179229.jpeg',
|
||||
thumbnail: 'https://images.pexels.com/photos/1179229/pexels-photo-1179229.jpeg?auto=compress&cs=tinysrgb&w=400',
|
||||
filename: 'forest-path.jpg',
|
||||
size: 2234000,
|
||||
width: 1920,
|
||||
height: 1080,
|
||||
format: 'jpg',
|
||||
uploadedAt: new Date('2025-01-12'),
|
||||
tags: ['森林', '小径'],
|
||||
isFavorite: false,
|
||||
storageSource: 'MinIO',
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
url: 'https://images.pexels.com/photos/1519088/pexels-photo-1519088.jpeg',
|
||||
thumbnail: 'https://images.pexels.com/photos/1519088/pexels-photo-1519088.jpeg?auto=compress&cs=tinysrgb&w=400',
|
||||
filename: 'city-skyline.jpg',
|
||||
size: 2890000,
|
||||
width: 2048,
|
||||
height: 1365,
|
||||
format: 'jpg',
|
||||
uploadedAt: new Date('2025-01-11'),
|
||||
tags: ['城市', '天际线'],
|
||||
isFavorite: false,
|
||||
storageSource: 'MinIO',
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
url: 'https://images.pexels.com/photos/2387418/pexels-photo-2387418.jpeg',
|
||||
thumbnail: 'https://images.pexels.com/photos/2387418/pexels-photo-2387418.jpeg?auto=compress&cs=tinysrgb&w=400',
|
||||
filename: 'desert-dunes.jpg',
|
||||
size: 2156000,
|
||||
width: 1920,
|
||||
height: 1280,
|
||||
format: 'jpg',
|
||||
uploadedAt: new Date('2025-01-10'),
|
||||
tags: ['沙漠', '沙丘'],
|
||||
isFavorite: true,
|
||||
storageSource: 'MinIO',
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
url: 'https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg',
|
||||
thumbnail: 'https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg?auto=compress&cs=tinysrgb&w=400',
|
||||
filename: 'aurora-night.jpg',
|
||||
size: 2980000,
|
||||
width: 1920,
|
||||
height: 1280,
|
||||
format: 'jpg',
|
||||
uploadedAt: new Date('2025-01-09'),
|
||||
tags: ['极光', '夜景'],
|
||||
isFavorite: true,
|
||||
storageSource: 'MinIO',
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
url: 'https://images.pexels.com/photos/1108099/pexels-photo-1108099.jpeg',
|
||||
thumbnail: 'https://images.pexels.com/photos/1108099/pexels-photo-1108099.jpeg?auto=compress&cs=tinysrgb&w=400',
|
||||
filename: 'beach-sunset.jpg',
|
||||
size: 2145000,
|
||||
width: 1920,
|
||||
height: 1080,
|
||||
format: 'jpg',
|
||||
uploadedAt: new Date('2025-01-08'),
|
||||
tags: ['海滩', '日落'],
|
||||
isFavorite: false,
|
||||
storageSource: 'MinIO',
|
||||
},
|
||||
{
|
||||
id: '9',
|
||||
url: 'https://images.pexels.com/photos/1643457/pexels-photo-1643457.jpeg',
|
||||
thumbnail: 'https://images.pexels.com/photos/1643457/pexels-photo-1643457.jpeg?auto=compress&cs=tinysrgb&w=400',
|
||||
filename: 'waterfall.jpg',
|
||||
size: 3250000,
|
||||
width: 2048,
|
||||
height: 1365,
|
||||
format: 'jpg',
|
||||
uploadedAt: new Date('2025-01-07'),
|
||||
tags: ['瀑布', '自然'],
|
||||
isFavorite: false,
|
||||
storageSource: 'MinIO',
|
||||
},
|
||||
{
|
||||
id: '10',
|
||||
url: 'https://images.pexels.com/photos/1574844/pexels-photo-1574844.jpeg',
|
||||
thumbnail: 'https://images.pexels.com/photos/1574844/pexels-photo-1574844.jpeg?auto=compress&cs=tinysrgb&w=400',
|
||||
filename: 'starry-sky.jpg',
|
||||
size: 2678000,
|
||||
width: 1920,
|
||||
height: 1280,
|
||||
format: 'jpg',
|
||||
uploadedAt: new Date('2025-01-06'),
|
||||
tags: ['星空', '夜晚'],
|
||||
isFavorite: true,
|
||||
storageSource: 'MinIO',
|
||||
},
|
||||
{
|
||||
id: '11',
|
||||
url: 'https://images.pexels.com/photos/1450353/pexels-photo-1450353.jpeg',
|
||||
thumbnail: 'https://images.pexels.com/photos/1450353/pexels-photo-1450353.jpeg?auto=compress&cs=tinysrgb&w=400',
|
||||
filename: 'autumn-forest.jpg',
|
||||
size: 2234000,
|
||||
width: 1920,
|
||||
height: 1080,
|
||||
format: 'jpg',
|
||||
uploadedAt: new Date('2025-01-05'),
|
||||
tags: ['秋天', '森林'],
|
||||
isFavorite: false,
|
||||
storageSource: 'MinIO',
|
||||
},
|
||||
{
|
||||
id: '12',
|
||||
url: 'https://images.pexels.com/photos/2559941/pexels-photo-2559941.jpeg',
|
||||
thumbnail: 'https://images.pexels.com/photos/2559941/pexels-photo-2559941.jpeg?auto=compress&cs=tinysrgb&w=400',
|
||||
filename: 'mountain-lake.jpg',
|
||||
size: 2890000,
|
||||
width: 1920,
|
||||
height: 1280,
|
||||
format: 'jpg',
|
||||
uploadedAt: new Date('2025-01-04'),
|
||||
tags: ['湖泊', '山'],
|
||||
isFavorite: true,
|
||||
storageSource: 'MinIO',
|
||||
},
|
||||
{
|
||||
id: '13',
|
||||
url: 'https://images.pexels.com/photos/1671324/pexels-photo-1671324.jpeg',
|
||||
thumbnail: 'https://images.pexels.com/photos/1671324/pexels-photo-1671324.jpeg?auto=compress&cs=tinysrgb&w=400',
|
||||
filename: 'tropical-beach.jpg',
|
||||
size: 2456000,
|
||||
width: 1920,
|
||||
height: 1080,
|
||||
format: 'jpg',
|
||||
uploadedAt: new Date('2025-01-03'),
|
||||
tags: ['热带', '海滩'],
|
||||
isFavorite: false,
|
||||
storageSource: 'MinIO',
|
||||
},
|
||||
{
|
||||
id: '14',
|
||||
url: 'https://images.pexels.com/photos/1252869/pexels-photo-1252869.jpeg',
|
||||
thumbnail: 'https://images.pexels.com/photos/1252869/pexels-photo-1252869.jpeg?auto=compress&cs=tinysrgb&w=400',
|
||||
filename: 'misty-mountain.jpg',
|
||||
size: 2123000,
|
||||
width: 1920,
|
||||
height: 1280,
|
||||
format: 'jpg',
|
||||
uploadedAt: new Date('2025-01-02'),
|
||||
tags: ['雾', '山'],
|
||||
isFavorite: false,
|
||||
storageSource: 'MinIO',
|
||||
},
|
||||
{
|
||||
id: '15',
|
||||
url: 'https://images.pexels.com/photos/1770809/pexels-photo-1770809.jpeg',
|
||||
thumbnail: 'https://images.pexels.com/photos/1770809/pexels-photo-1770809.jpeg?auto=compress&cs=tinysrgb&w=400',
|
||||
filename: 'cherry-blossom.jpg',
|
||||
size: 2345000,
|
||||
width: 2048,
|
||||
height: 1365,
|
||||
format: 'jpg',
|
||||
uploadedAt: new Date('2025-01-01'),
|
||||
tags: ['樱花', '春天'],
|
||||
isFavorite: true,
|
||||
storageSource: 'MinIO',
|
||||
},
|
||||
{
|
||||
id: '16',
|
||||
url: 'https://images.pexels.com/photos/1166209/pexels-photo-1166209.jpeg',
|
||||
thumbnail: 'https://images.pexels.com/photos/1166209/pexels-photo-1166209.jpeg?auto=compress&cs=tinysrgb&w=400',
|
||||
filename: 'canyon-view.jpg',
|
||||
size: 2987000,
|
||||
width: 1920,
|
||||
height: 1080,
|
||||
format: 'jpg',
|
||||
uploadedAt: new Date('2024-12-31'),
|
||||
tags: ['峡谷', '风景'],
|
||||
isFavorite: false,
|
||||
storageSource: 'MinIO',
|
||||
},
|
||||
{
|
||||
id: '17',
|
||||
url: 'https://images.pexels.com/photos/1619317/pexels-photo-1619317.jpeg',
|
||||
thumbnail: 'https://images.pexels.com/photos/1619317/pexels-photo-1619317.jpeg?auto=compress&cs=tinysrgb&w=400',
|
||||
filename: 'snowy-peak.jpg',
|
||||
size: 2678000,
|
||||
width: 1920,
|
||||
height: 1280,
|
||||
format: 'jpg',
|
||||
uploadedAt: new Date('2024-12-30'),
|
||||
tags: ['雪山', '冬天'],
|
||||
isFavorite: true,
|
||||
storageSource: 'MinIO',
|
||||
},
|
||||
{
|
||||
id: '18',
|
||||
url: 'https://images.pexels.com/photos/1624438/pexels-photo-1624438.jpeg',
|
||||
thumbnail: 'https://images.pexels.com/photos/1624438/pexels-photo-1624438.jpeg?auto=compress&cs=tinysrgb&w=400',
|
||||
filename: 'lavender-field.jpg',
|
||||
size: 2234000,
|
||||
width: 2048,
|
||||
height: 1365,
|
||||
format: 'jpg',
|
||||
uploadedAt: new Date('2024-12-29'),
|
||||
tags: ['薰衣草', '花田'],
|
||||
isFavorite: false,
|
||||
storageSource: 'MinIO',
|
||||
},
|
||||
{
|
||||
id: '19',
|
||||
url: 'https://images.pexels.com/photos/1454360/pexels-photo-1454360.jpeg',
|
||||
thumbnail: 'https://images.pexels.com/photos/1454360/pexels-photo-1454360.jpeg?auto=compress&cs=tinysrgb&w=400',
|
||||
filename: 'river-valley.jpg',
|
||||
size: 2456000,
|
||||
width: 1920,
|
||||
height: 1080,
|
||||
format: 'jpg',
|
||||
uploadedAt: new Date('2024-12-28'),
|
||||
tags: ['河流', '山谷'],
|
||||
isFavorite: false,
|
||||
storageSource: 'MinIO',
|
||||
},
|
||||
{
|
||||
id: '20',
|
||||
url: 'https://images.pexels.com/photos/1434819/pexels-photo-1434819.jpeg',
|
||||
thumbnail: 'https://images.pexels.com/photos/1434819/pexels-photo-1434819.jpeg?auto=compress&cs=tinysrgb&w=400',
|
||||
filename: 'northern-lights.jpg',
|
||||
size: 2890000,
|
||||
width: 1920,
|
||||
height: 1280,
|
||||
format: 'jpg',
|
||||
uploadedAt: new Date('2024-12-27'),
|
||||
tags: ['极光', '北欧'],
|
||||
isFavorite: true,
|
||||
storageSource: 'MinIO',
|
||||
},
|
||||
{
|
||||
id: '21',
|
||||
url: 'https://images.pexels.com/photos/1591373/pexels-photo-1591373.jpeg',
|
||||
thumbnail: 'https://images.pexels.com/photos/1591373/pexels-photo-1591373.jpeg?auto=compress&cs=tinysrgb&w=400',
|
||||
filename: 'sunrise-clouds.jpg',
|
||||
size: 2123000,
|
||||
width: 1920,
|
||||
height: 1080,
|
||||
format: 'jpg',
|
||||
uploadedAt: new Date('2024-12-26'),
|
||||
tags: ['日出', '云'],
|
||||
isFavorite: false,
|
||||
storageSource: 'MinIO',
|
||||
},
|
||||
{
|
||||
id: '22',
|
||||
url: 'https://images.pexels.com/photos/1477430/pexels-photo-1477430.jpeg',
|
||||
thumbnail: 'https://images.pexels.com/photos/1477430/pexels-photo-1477430.jpeg?auto=compress&cs=tinysrgb&w=400',
|
||||
filename: 'tropical-island.jpg',
|
||||
size: 2678000,
|
||||
width: 2048,
|
||||
height: 1365,
|
||||
format: 'jpg',
|
||||
uploadedAt: new Date('2024-12-25'),
|
||||
tags: ['海岛', '热带'],
|
||||
isFavorite: true,
|
||||
storageSource: 'MinIO',
|
||||
},
|
||||
{
|
||||
id: '23',
|
||||
url: 'https://images.pexels.com/photos/1323550/pexels-photo-1323550.jpeg',
|
||||
thumbnail: 'https://images.pexels.com/photos/1323550/pexels-photo-1323550.jpeg?auto=compress&cs=tinysrgb&w=400',
|
||||
filename: 'wheat-field.jpg',
|
||||
size: 2345000,
|
||||
width: 1920,
|
||||
height: 1080,
|
||||
format: 'jpg',
|
||||
uploadedAt: new Date('2024-12-24'),
|
||||
tags: ['麦田', '农田'],
|
||||
isFavorite: false,
|
||||
storageSource: 'MinIO',
|
||||
},
|
||||
{
|
||||
id: '24',
|
||||
url: 'https://images.pexels.com/photos/1761279/pexels-photo-1761279.jpeg',
|
||||
thumbnail: 'https://images.pexels.com/photos/1761279/pexels-photo-1761279.jpeg?auto=compress&cs=tinysrgb&w=400',
|
||||
filename: 'rocky-coast.jpg',
|
||||
size: 2456000,
|
||||
width: 1920,
|
||||
height: 1280,
|
||||
format: 'jpg',
|
||||
uploadedAt: new Date('2024-12-23'),
|
||||
tags: ['海岸', '岩石'],
|
||||
isFavorite: false,
|
||||
storageSource: 'MinIO',
|
||||
},
|
||||
{
|
||||
id: '25',
|
||||
url: 'https://images.pexels.com/photos/1655166/pexels-photo-1655166.jpeg',
|
||||
thumbnail: 'https://images.pexels.com/photos/1655166/pexels-photo-1655166.jpeg?auto=compress&cs=tinysrgb&w=400',
|
||||
filename: 'bamboo-forest.jpg',
|
||||
size: 2234000,
|
||||
width: 1920,
|
||||
height: 1080,
|
||||
format: 'jpg',
|
||||
uploadedAt: new Date('2024-12-22'),
|
||||
tags: ['竹林', '森林'],
|
||||
isFavorite: true,
|
||||
storageSource: 'MinIO',
|
||||
},
|
||||
{
|
||||
id: '26',
|
||||
url: 'https://images.pexels.com/photos/1659438/pexels-photo-1659438.jpeg',
|
||||
thumbnail: 'https://images.pexels.com/photos/1659438/pexels-photo-1659438.jpeg?auto=compress&cs=tinysrgb&w=400',
|
||||
filename: 'tulip-garden.jpg',
|
||||
size: 2567000,
|
||||
width: 2048,
|
||||
height: 1365,
|
||||
format: 'jpg',
|
||||
uploadedAt: new Date('2024-12-21'),
|
||||
tags: ['郁金香', '花园'],
|
||||
isFavorite: false,
|
||||
storageSource: 'MinIO',
|
||||
},
|
||||
{
|
||||
id: '27',
|
||||
url: 'https://images.pexels.com/photos/1366919/pexels-photo-1366919.jpeg',
|
||||
thumbnail: 'https://images.pexels.com/photos/1366919/pexels-photo-1366919.jpeg?auto=compress&cs=tinysrgb&w=400',
|
||||
filename: 'glacier-lake.jpg',
|
||||
size: 2890000,
|
||||
width: 1920,
|
||||
height: 1280,
|
||||
format: 'jpg',
|
||||
uploadedAt: new Date('2024-12-20'),
|
||||
tags: ['冰川', '湖泊'],
|
||||
isFavorite: true,
|
||||
storageSource: 'MinIO',
|
||||
},
|
||||
{
|
||||
id: '28',
|
||||
url: 'https://images.pexels.com/photos/1529360/pexels-photo-1529360.jpeg',
|
||||
thumbnail: 'https://images.pexels.com/photos/1529360/pexels-photo-1529360.jpeg?auto=compress&cs=tinysrgb&w=400',
|
||||
filename: 'sunset-pier.jpg',
|
||||
size: 2123000,
|
||||
width: 1920,
|
||||
height: 1080,
|
||||
format: 'jpg',
|
||||
uploadedAt: new Date('2024-12-19'),
|
||||
tags: ['码头', '日落'],
|
||||
isFavorite: false,
|
||||
storageSource: 'MinIO',
|
||||
},
|
||||
{
|
||||
id: '29',
|
||||
url: 'https://images.pexels.com/photos/1624496/pexels-photo-1624496.jpeg',
|
||||
thumbnail: 'https://images.pexels.com/photos/1624496/pexels-photo-1624496.jpeg?auto=compress&cs=tinysrgb&w=400',
|
||||
filename: 'rice-terrace.jpg',
|
||||
size: 2456000,
|
||||
width: 2048,
|
||||
height: 1365,
|
||||
format: 'jpg',
|
||||
uploadedAt: new Date('2024-12-18'),
|
||||
tags: ['梯田', '农田'],
|
||||
isFavorite: false,
|
||||
storageSource: 'MinIO',
|
||||
},
|
||||
{
|
||||
id: '30',
|
||||
url: 'https://images.pexels.com/photos/1430676/pexels-photo-1430676.jpeg',
|
||||
thumbnail: 'https://images.pexels.com/photos/1430676/pexels-photo-1430676.jpeg?auto=compress&cs=tinysrgb&w=400',
|
||||
filename: 'alpine-meadow.jpg',
|
||||
size: 2345000,
|
||||
width: 1920,
|
||||
height: 1080,
|
||||
format: 'jpg',
|
||||
uploadedAt: new Date('2024-12-17'),
|
||||
tags: ['高山', '草甸'],
|
||||
isFavorite: true,
|
||||
storageSource: 'MinIO',
|
||||
},
|
||||
{
|
||||
id: '31',
|
||||
url: 'https://images.pexels.com/photos/1557652/pexels-photo-1557652.jpeg',
|
||||
thumbnail: 'https://images.pexels.com/photos/1557652/pexels-photo-1557652.jpeg?auto=compress&cs=tinysrgb&w=400',
|
||||
filename: 'palm-beach.jpg',
|
||||
size: 2234000,
|
||||
width: 1920,
|
||||
height: 1280,
|
||||
format: 'jpg',
|
||||
uploadedAt: new Date('2024-12-16'),
|
||||
tags: ['棕榈树', '海滩'],
|
||||
isFavorite: false,
|
||||
storageSource: 'MinIO',
|
||||
},
|
||||
{
|
||||
id: '32',
|
||||
url: 'https://images.pexels.com/photos/1271619/pexels-photo-1271619.jpeg',
|
||||
thumbnail: 'https://images.pexels.com/photos/1271619/pexels-photo-1271619.jpeg?auto=compress&cs=tinysrgb&w=400',
|
||||
filename: 'volcano-peak.jpg',
|
||||
size: 2678000,
|
||||
width: 1920,
|
||||
height: 1080,
|
||||
format: 'jpg',
|
||||
uploadedAt: new Date('2024-12-15'),
|
||||
tags: ['火山', '山峰'],
|
||||
isFavorite: true,
|
||||
storageSource: 'MinIO',
|
||||
},
|
||||
{
|
||||
id: '33',
|
||||
url: 'https://images.pexels.com/photos/1576937/pexels-photo-1576937.jpeg',
|
||||
thumbnail: 'https://images.pexels.com/photos/1576937/pexels-photo-1576937.jpeg?auto=compress&cs=tinysrgb&w=400',
|
||||
filename: 'summer-field.jpg',
|
||||
size: 2456000,
|
||||
width: 2048,
|
||||
height: 1365,
|
||||
format: 'jpg',
|
||||
uploadedAt: new Date('2024-12-14'),
|
||||
tags: ['夏天', '田野'],
|
||||
isFavorite: false,
|
||||
storageSource: 'MinIO',
|
||||
},
|
||||
{
|
||||
id: '34',
|
||||
url: 'https://images.pexels.com/photos/1179229/pexels-photo-1179229.jpeg',
|
||||
thumbnail: 'https://images.pexels.com/photos/1179229/pexels-photo-1179229.jpeg?auto=compress&cs=tinysrgb&w=400',
|
||||
filename: 'pine-forest.jpg',
|
||||
size: 2345000,
|
||||
width: 1920,
|
||||
height: 1280,
|
||||
format: 'jpg',
|
||||
uploadedAt: new Date('2024-12-13'),
|
||||
tags: ['松林', '自然'],
|
||||
isFavorite: false,
|
||||
storageSource: 'MinIO',
|
||||
},
|
||||
{
|
||||
id: '35',
|
||||
url: 'https://images.pexels.com/photos/1525041/pexels-photo-1525041.jpeg',
|
||||
thumbnail: 'https://images.pexels.com/photos/1525041/pexels-photo-1525041.jpeg?auto=compress&cs=tinysrgb&w=400',
|
||||
filename: 'rainbow-sky.jpg',
|
||||
size: 2567000,
|
||||
width: 1920,
|
||||
height: 1080,
|
||||
format: 'jpg',
|
||||
uploadedAt: new Date('2024-12-12'),
|
||||
tags: ['彩虹', '天空'],
|
||||
isFavorite: true,
|
||||
storageSource: 'MinIO',
|
||||
},
|
||||
{
|
||||
id: '36',
|
||||
url: 'https://images.pexels.com/photos/1761283/pexels-photo-1761283.jpeg',
|
||||
thumbnail: 'https://images.pexels.com/photos/1761283/pexels-photo-1761283.jpeg?auto=compress&cs=tinysrgb&w=400',
|
||||
filename: 'coral-reef.jpg',
|
||||
size: 2890000,
|
||||
width: 2048,
|
||||
height: 1365,
|
||||
format: 'jpg',
|
||||
uploadedAt: new Date('2024-12-11'),
|
||||
tags: ['珊瑚礁', '海洋'],
|
||||
isFavorite: true,
|
||||
storageSource: 'MinIO',
|
||||
},
|
||||
];
|
||||
|
||||
export const Gallery: React.FC = () => {
|
||||
const { images, setImages, selectedImages, toggleImageSelection, toggleFavorite } =
|
||||
useGalleryStore();
|
||||
|
||||
// 初始化模拟数据
|
||||
useEffect(() => {
|
||||
if (images.length === 0) {
|
||||
setImages(mockImages);
|
||||
}
|
||||
}, [images.length, setImages]);
|
||||
|
||||
const formatFileSize = (bytes: number) => {
|
||||
if (bytes === 0) return '0 B';
|
||||
const k = 1024;
|
||||
const sizes = ['B', 'KB', 'MB', 'GB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
|
||||
};
|
||||
|
||||
// 瀑布流断点配置
|
||||
const breakpointColumnsObj = {
|
||||
default: 4,
|
||||
1400: 3,
|
||||
1000: 2,
|
||||
700: 1,
|
||||
};
|
||||
|
||||
// 渲染瀑布流视图
|
||||
const renderGridView = () => (
|
||||
<Masonry
|
||||
breakpointCols={breakpointColumnsObj}
|
||||
className="masonry-grid"
|
||||
columnClassName="masonry-grid_column"
|
||||
>
|
||||
{images.map((image) => (
|
||||
<Card
|
||||
key={image.id}
|
||||
hoverable
|
||||
className="image-card"
|
||||
cover={
|
||||
<div style={{ position: 'relative', overflow: 'hidden', background: '#f5f5f5' }}>
|
||||
<img
|
||||
src={image.thumbnail}
|
||||
alt={image.filename}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: 'auto',
|
||||
display: 'block',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="image-overlay"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
background: 'rgba(0, 0, 0, 0.6)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
opacity: 0,
|
||||
transition: 'opacity 0.3s',
|
||||
}}
|
||||
>
|
||||
<Space size="large">
|
||||
<Tooltip title="查看">
|
||||
<Button
|
||||
type="text"
|
||||
icon={<EyeOutlined />}
|
||||
style={{ color: '#fff' }}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
<Tooltip title="下载">
|
||||
<Button
|
||||
type="text"
|
||||
icon={<DownloadOutlined />}
|
||||
style={{ color: '#fff' }}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
<Tooltip title="删除">
|
||||
<Button
|
||||
type="text"
|
||||
icon={<DeleteOutlined />}
|
||||
style={{ color: '#fff' }}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
</Space>
|
||||
</div>
|
||||
<Checkbox
|
||||
checked={selectedImages.includes(image.id)}
|
||||
onChange={() => toggleImageSelection(image.id)}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 8,
|
||||
left: 8,
|
||||
zIndex: 1,
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
/>
|
||||
<Button
|
||||
type="text"
|
||||
icon={image.isFavorite ? <HeartFilled /> : <HeartOutlined />}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 8,
|
||||
right: 8,
|
||||
zIndex: 1,
|
||||
color: image.isFavorite ? '#EC4899' : '#fff',
|
||||
textShadow: '0 1px 3px rgba(0,0,0,0.5)',
|
||||
}}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
toggleFavorite(image.id);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
bodyStyle={{ padding: 12 }}
|
||||
style={{ borderRadius: 12, overflow: 'hidden', marginBottom: 16 }}
|
||||
>
|
||||
<div style={{ marginBottom: 8 }}>
|
||||
<div
|
||||
style={{
|
||||
fontSize: 14,
|
||||
fontWeight: 500,
|
||||
marginBottom: 4,
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
title={image.filename}
|
||||
>
|
||||
{image.filename}
|
||||
</div>
|
||||
<div style={{ fontSize: 12, color: '#6B7280' }}>
|
||||
{formatFileSize(image.size)} • {image.width}x{image.height}
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
|
||||
{image.tags.map((tag) => (
|
||||
<Tag key={tag} style={{ margin: 0, fontSize: 11 }}>
|
||||
{tag}
|
||||
</Tag>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</Masonry>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="page-container fade-in">
|
||||
{/* 标题行 */}
|
||||
<div style={{ marginBottom: 20 }}>
|
||||
<h1 style={{ margin: 0, fontSize: 28, fontWeight: 700 }}>
|
||||
图片库 <span style={{ fontSize: 16, fontWeight: 400, color: '#9CA3AF' }}>({images.length} 张)</span>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* 工具栏 - 搜索和筛选 */}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
gap: 16,
|
||||
alignItems: 'center',
|
||||
marginBottom: 28,
|
||||
}}
|
||||
>
|
||||
{/* 精致的搜索框 */}
|
||||
<Input
|
||||
size="large"
|
||||
placeholder="搜索图片名称、标签..."
|
||||
prefix={<SearchOutlined style={{ color: '#9CA3AF', fontSize: 16 }} />}
|
||||
style={{
|
||||
width: 360,
|
||||
height: 44,
|
||||
borderRadius: 10,
|
||||
background: '#FFFFFF',
|
||||
border: '1px solid #E5E7EB',
|
||||
fontSize: 14,
|
||||
boxShadow: '0 1px 3px rgba(0, 0, 0, 0.05)',
|
||||
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
}}
|
||||
onFocus={(e) => {
|
||||
e.target.style.borderColor = '#7C3AED';
|
||||
e.target.style.boxShadow = '0 0 0 3px rgba(124, 58, 237, 0.08), 0 1px 3px rgba(0, 0, 0, 0.08)';
|
||||
}}
|
||||
onBlur={(e) => {
|
||||
e.target.style.borderColor = '#E5E7EB';
|
||||
e.target.style.boxShadow = '0 1px 3px rgba(0, 0, 0, 0.05)';
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 占位空间 - 让右侧控件靠右显示 */}
|
||||
<div style={{ flex: 1 }} />
|
||||
|
||||
{/* 排序选择器 */}
|
||||
<Select
|
||||
defaultValue="date"
|
||||
size="large"
|
||||
style={{
|
||||
width: 140,
|
||||
}}
|
||||
>
|
||||
<Select.Option value="date">📅 按日期</Select.Option>
|
||||
<Select.Option value="name">📝 按名称</Select.Option>
|
||||
<Select.Option value="size">📦 按大小</Select.Option>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{images.length === 0 ? (
|
||||
<Card>
|
||||
<Empty description="暂无图片，请先上传图片" image={Empty.PRESENTED_IMAGE_SIMPLE} />
|
||||
</Card>
|
||||
) : (
|
||||
renderGridView()
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
71
src/pages/Links/index.tsx
Normal file
71
src/pages/Links/index.tsx
Normal file
@ -0,0 +1,71 @@
|
||||
import React from 'react';
|
||||
import { Card, Select, Input, Button, Space, message } from 'antd';
|
||||
import { CopyOutlined, QrcodeOutlined } from '@ant-design/icons';
|
||||
import copy from 'copy-to-clipboard';
|
||||
|
||||
const { TextArea } = Input;
|
||||
|
||||
export const Links: React.FC = () => {
|
||||
const [format, setFormat] = React.useState<string>('markdown');
|
||||
const [sampleUrl] = React.useState('https://example.com/image.png');
|
||||
|
||||
const getLinkFormat = () => {
|
||||
switch (format) {
|
||||
case 'markdown':
|
||||
return ``;
|
||||
case 'html':
|
||||
return `<img src="${sampleUrl}" alt="Image" />`;
|
||||
case 'url':
|
||||
return sampleUrl;
|
||||
default:
|
||||
return sampleUrl;
|
||||
}
|
||||
};
|
||||
|
||||
const handleCopy = () => {
|
||||
copy(getLinkFormat());
|
||||
message.success('链接已复制到剪贴板');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="page-container fade-in">
|
||||
<h1 style={{ marginBottom: 24, fontSize: 24, fontWeight: 600 }}>链接管理</h1>
|
||||
|
||||
<Card title="生成链接">
|
||||
<Space direction="vertical" style={{ width: '100%' }} size={16}>
|
||||
<div>
|
||||
<div style={{ marginBottom: 8, fontWeight: 500 }}>选择格式</div>
|
||||
<Select
|
||||
value={format}
|
||||
onChange={setFormat}
|
||||
style={{ width: 200 }}
|
||||
options={[
|
||||
{ label: 'Markdown', value: 'markdown' },
|
||||
{ label: 'HTML', value: 'html' },
|
||||
{ label: '直链 URL', value: 'url' },
|
||||
{ label: '自定义格式', value: 'custom' },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style={{ marginBottom: 8, fontWeight: 500 }}>生成的链接</div>
|
||||
<TextArea
|
||||
value={getLinkFormat()}
|
||||
rows={4}
|
||||
readOnly
|
||||
style={{ fontFamily: 'monospace' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Space>
|
||||
<Button type="primary" icon={<CopyOutlined />} onClick={handleCopy}>
|
||||
复制链接
|
||||
</Button>
|
||||
<Button icon={<QrcodeOutlined />}>生成二维码</Button>
|
||||
</Space>
|
||||
</Space>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
67
src/pages/Settings/index.tsx
Normal file
67
src/pages/Settings/index.tsx
Normal file
@ -0,0 +1,67 @@
|
||||
import React from 'react';
|
||||
import { Card, Form, Switch, Select, Slider, Button, Space, message } from 'antd';
|
||||
import { useSettingsStore } from '../../stores/useSettingsStore';
|
||||
|
||||
export const Settings: React.FC = () => {
|
||||
const { autoCompress, uploadQuality, language, updateSettings, resetSettings } = useSettingsStore();
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const handleSave = (values: any) => {
|
||||
updateSettings(values);
|
||||
message.success('设置已保存');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="page-container fade-in">
|
||||
<h1 style={{ marginBottom: 24, fontSize: 24, fontWeight: 600 }}>设置</h1>
|
||||
|
||||
<Card>
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
initialValues={{
|
||||
autoCompress,
|
||||
uploadQuality,
|
||||
language,
|
||||
}}
|
||||
onFinish={handleSave}
|
||||
>
|
||||
<Form.Item label="语言设置" name="language">
|
||||
<Select style={{ width: 200 }}>
|
||||
<Select.Option value="zh-CN">简体中文</Select.Option>
|
||||
<Select.Option value="en-US">English</Select.Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="自动压缩图片" name="autoCompress" valuePropName="checked">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="上传质量" name="uploadQuality">
|
||||
<Slider
|
||||
min={50}
|
||||
max={100}
|
||||
marks={{
|
||||
50: '50%',
|
||||
75: '75%',
|
||||
100: '100%',
|
||||
}}
|
||||
style={{ width: 300 }}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item>
|
||||
<Space>
|
||||
<Button type="primary" htmlType="submit">
|
||||
保存设置
|
||||
</Button>
|
||||
<Button onClick={() => resetSettings()}>
|
||||
恢复默认
|
||||
</Button>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
74
src/pages/Storage/index.tsx
Normal file
74
src/pages/Storage/index.tsx
Normal file
@ -0,0 +1,74 @@
|
||||
import React from 'react';
|
||||
import { Card, Row, Col, Button, Badge, Space, Tag } from 'antd';
|
||||
import { PlusOutlined, DatabaseOutlined, CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons';
|
||||
import { useStorageStore } from '../../stores/useStorageStore';
|
||||
import { FUNCTIONAL_COLORS, TAG_COLORS } from '../../theme/colors';
|
||||
|
||||
export const Storage: React.FC = () => {
|
||||
const { sources } = useStorageStore();
|
||||
|
||||
const getStorageTypeName = (type: string) => {
|
||||
const map: Record<string, string> = {
|
||||
local: '本地存储',
|
||||
minio: 'MinIO',
|
||||
'aliyun-oss': '阿里云 OSS',
|
||||
'tencent-cos': '腾讯云 COS',
|
||||
};
|
||||
return map[type] || type;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="page-container fade-in">
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
|
||||
<h1 style={{ margin: 0, fontSize: 24, fontWeight: 600 }}>存储配置</h1>
|
||||
<Button type="primary" icon={<PlusOutlined />}>
|
||||
添加存储源
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Row gutter={[16, 16]}>
|
||||
{sources.map((source) => (
|
||||
<Col xs={24} md={12} lg={8} key={source.id}>
|
||||
<Card
|
||||
className="hover-card"
|
||||
title={
|
||||
<Space>
|
||||
<DatabaseOutlined />
|
||||
{source.name}
|
||||
{source.isActive && <Tag color={TAG_COLORS.PRIMARY}>当前使用</Tag>}
|
||||
</Space>
|
||||
}
|
||||
extra={
|
||||
source.status === 'connected' ? (
|
||||
<CheckCircleOutlined style={{ color: FUNCTIONAL_COLORS.SUCCESS }} />
|
||||
) : (
|
||||
<CloseCircleOutlined style={{ color: FUNCTIONAL_COLORS.ERROR }} />
|
||||
)
|
||||
}
|
||||
>
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<div>
|
||||
<span style={{ color: '#8C8C8C' }}>类型：</span>
|
||||
<span>{getStorageTypeName(source.type)}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span style={{ color: '#8C8C8C' }}>状态：</span>
|
||||
<Badge
|
||||
status={source.status === 'connected' ? 'success' : 'error'}
|
||||
text={source.status === 'connected' ? '已连接' : '未连接'}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ marginTop: 8 }}>
|
||||
<Button size="small" style={{ marginRight: 8 }}>
|
||||
测试连接
|
||||
</Button>
|
||||
<Button size="small">配置</Button>
|
||||
</div>
|
||||
</Space>
|
||||
</Card>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
73
src/pages/Tools/index.tsx
Normal file
73
src/pages/Tools/index.tsx
Normal file
@ -0,0 +1,73 @@
|
||||
import React from 'react';
|
||||
import { Card, Tabs } from 'antd';
|
||||
import { CompressOutlined, PictureOutlined, FormatPainterOutlined, ScissorOutlined } from '@ant-design/icons';
|
||||
|
||||
export const Tools: React.FC = () => {
|
||||
const items = [
|
||||
{
|
||||
key: 'compress',
|
||||
label: (
|
||||
<span>
|
||||
<CompressOutlined />
|
||||
图片压缩
|
||||
</span>
|
||||
),
|
||||
children: (
|
||||
<Card>
|
||||
<p>图片压缩工具正在开发中...</p>
|
||||
</Card>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'watermark',
|
||||
label: (
|
||||
<span>
|
||||
<FormatPainterOutlined />
|
||||
添加水印
|
||||
</span>
|
||||
),
|
||||
children: (
|
||||
<Card>
|
||||
<p>水印工具正在开发中...</p>
|
||||
</Card>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'convert',
|
||||
label: (
|
||||
<span>
|
||||
<PictureOutlined />
|
||||
格式转换
|
||||
</span>
|
||||
),
|
||||
children: (
|
||||
<Card>
|
||||
<p>格式转换工具正在开发中...</p>
|
||||
</Card>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'resize',
|
||||
label: (
|
||||
<span>
|
||||
<ScissorOutlined />
|
||||
尺寸调整
|
||||
</span>
|
||||
),
|
||||
children: (
|
||||
<Card>
|
||||
<p>尺寸调整工具正在开发中...</p>
|
||||
</Card>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="page-container fade-in">
|
||||
<h1 style={{ marginBottom: 24, fontSize: 24, fontWeight: 600 }}>图片处理工具</h1>
|
||||
<Card>
|
||||
<Tabs items={items} />
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
120
src/pages/Upload/index.tsx
Normal file
120
src/pages/Upload/index.tsx
Normal file
@ -0,0 +1,120 @@
|
||||
import React, { useCallback } from 'react';
|
||||
import { Card, message, Progress, List, Button, Space } from 'antd';
|
||||
import { InboxOutlined, DeleteOutlined, CheckCircleOutlined } from '@ant-design/icons';
|
||||
import { useDropzone } from 'react-dropzone';
|
||||
import { useUploadStore } from '../../stores/useUploadStore';
|
||||
import { FUNCTIONAL_COLORS, PRIMARY_COLORS } from '../../theme/colors';
|
||||
|
||||
export const Upload: React.FC = () => {
|
||||
const { uploadQueue, addToQueue, removeFromQueue, clearCompleted } = useUploadStore();
|
||||
|
||||
const onDrop = useCallback(
|
||||
(acceptedFiles: File[]) => {
|
||||
addToQueue(acceptedFiles);
|
||||
message.success(`已添加 ${acceptedFiles.length} 个文件到上传队列`);
|
||||
},
|
||||
[addToQueue]
|
||||
);
|
||||
|
||||
const { getRootProps, getInputProps, isDragActive } = useDropzone({
|
||||
onDrop,
|
||||
accept: {
|
||||
'image/*': ['.png', '.jpg', '.jpeg', '.gif', '.webp', '.svg'],
|
||||
},
|
||||
noClick: false,
|
||||
});
|
||||
|
||||
const formatFileSize = (size: number) => {
|
||||
if (size < 1024) return size + ' B';
|
||||
if (size < 1024 * 1024) return (size / 1024).toFixed(2) + ' KB';
|
||||
return (size / (1024 * 1024)).toFixed(2) + ' MB';
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="page-container fade-in">
|
||||
<h1 style={{ marginBottom: 24, fontSize: 24, fontWeight: 600 }}>上传图片</h1>
|
||||
|
||||
<Card style={{ marginBottom: 24 }}>
|
||||
<div
|
||||
{...getRootProps()}
|
||||
className={`upload-dropzone ${isDragActive ? 'drag-active' : ''}`}
|
||||
style={{
|
||||
padding: '60px 20px',
|
||||
textAlign: 'center',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
<input {...getInputProps()} />
|
||||
<div style={{
|
||||
width: 80,
|
||||
height: 80,
|
||||
borderRadius: 16,
|
||||
background: 'linear-gradient(135deg, #F5F3FF 0%, #FAF5FF 100%)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
margin: '0 auto 16px'
|
||||
}}>
|
||||
<InboxOutlined style={{ fontSize: 40, color: PRIMARY_COLORS.PRIMARY }} />
|
||||
</div>
|
||||
<p style={{ fontSize: 16, marginBottom: 8 }}>
|
||||
{isDragActive ? '松开鼠标即可上传' : '拖拽文件到此处，或点击选择文件'}
|
||||
</p>
|
||||
<p style={{ color: '#8C8C8C', fontSize: 14 }}>
|
||||
支持格式：PNG、JPG、JPEG、GIF、WebP、SVG
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{uploadQueue.length > 0 && (
|
||||
<Card
|
||||
title="上传队列"
|
||||
extra={
|
||||
<Button size="small" onClick={clearCompleted}>
|
||||
清空已完成
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<List
|
||||
dataSource={uploadQueue}
|
||||
renderItem={(task) => (
|
||||
<List.Item
|
||||
extra={
|
||||
<Space>
|
||||
{task.status === 'success' && (
|
||||
<CheckCircleOutlined style={{ color: FUNCTIONAL_COLORS.SUCCESS, fontSize: 20 }} />
|
||||
)}
|
||||
<Button
|
||||
type="text"
|
||||
danger
|
||||
size="small"
|
||||
icon={<DeleteOutlined />}
|
||||
onClick={() => removeFromQueue(task.id)}
|
||||
/>
|
||||
</Space>
|
||||
}
|
||||
>
|
||||
<List.Item.Meta
|
||||
title={task.file.name}
|
||||
description={
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<span style={{ color: '#8C8C8C' }}>
|
||||
{formatFileSize(task.file.size)}
|
||||
{task.status === 'uploading' && ' - 上传中...'}
|
||||
{task.status === 'success' && ' - 上传成功'}
|
||||
{task.status === 'error' && ' - 上传失败'}
|
||||
</span>
|
||||
{task.status === 'uploading' && (
|
||||
<Progress percent={task.progress} size="small" />
|
||||
)}
|
||||
</Space>
|
||||
}
|
||||
/>
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user