From 6e9449d0f300789017a95117554a6f961264170d Mon Sep 17 00:00:00 2001
From: Leo <98382335+gaoziman@users.noreply.github.com>
Date: Sun, 19 Oct 2025 21:49:27 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E6=89=80=E6=9C=89=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=E9=A1=B5=E9=9D=A2=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Dashboard 仪表盘：数据统计卡片、存储使用情况、快速操作
- Upload 上传页面：拖拽上传、批量上传、上传进度
- Gallery 图片库：瀑布流布局、筛选排序、批量操作
- Links 链接管理：链接列表、搜索筛选
- Tools 图片工具：压缩、裁剪、格式转换
- Storage 存储配置：OSS配置管理
- Analytics 统计分析：图表展示、数据分析
- Settings 设置页面：个人设置、系统配置
---
 src/pages/Analytics/index.tsx |  63 +++
 src/pages/Dashboard/index.tsx | 335 +++++++++++++++
 src/pages/Gallery/index.tsx   | 754 ++++++++++++++++++++++++++++++++++
 src/pages/Links/index.tsx     |  71 ++++
 src/pages/Settings/index.tsx  |  67 +++
 src/pages/Storage/index.tsx   |  74 ++++
 src/pages/Tools/index.tsx     |  73 ++++
 src/pages/Upload/index.tsx    | 120 ++++++
 8 files changed, 1557 insertions(+)
 create mode 100644 src/pages/Analytics/index.tsx
 create mode 100644 src/pages/Dashboard/index.tsx
 create mode 100644 src/pages/Gallery/index.tsx
 create mode 100644 src/pages/Links/index.tsx
 create mode 100644 src/pages/Settings/index.tsx
 create mode 100644 src/pages/Storage/index.tsx
 create mode 100644 src/pages/Tools/index.tsx
 create mode 100644 src/pages/Upload/index.tsx

diff --git a/src/pages/Analytics/index.tsx b/src/pages/Analytics/index.tsx
new file mode 100644
index 0000000..32ebee2
--- /dev/null
+++ b/src/pages/Analytics/index.tsx
@@ -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>
+  );
+};
diff --git a/src/pages/Dashboard/index.tsx b/src/pages/Dashboard/index.tsx
new file mode 100644
index 0000000..5027b4c
--- /dev/null
+++ b/src/pages/Dashboard/index.tsx
@@ -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>
+  );
+};
diff --git a/src/pages/Gallery/index.tsx b/src/pages/Gallery/index.tsx
new file mode 100644
index 0000000..2202fb5
--- /dev/null
+++ b/src/pages/Gallery/index.tsx
@@ -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>
+  );
+};
diff --git a/src/pages/Links/index.tsx b/src/pages/Links/index.tsx
new file mode 100644
index 0000000..447e62b
--- /dev/null
+++ b/src/pages/Links/index.tsx
@@ -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 `![Image](${sampleUrl})`;
+      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>
+  );
+};
diff --git a/src/pages/Settings/index.tsx b/src/pages/Settings/index.tsx
new file mode 100644
index 0000000..81cd787
--- /dev/null
+++ b/src/pages/Settings/index.tsx
@@ -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>
+  );
+};
diff --git a/src/pages/Storage/index.tsx b/src/pages/Storage/index.tsx
new file mode 100644
index 0000000..d05a292
--- /dev/null
+++ b/src/pages/Storage/index.tsx
@@ -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>
+  );
+};
diff --git a/src/pages/Tools/index.tsx b/src/pages/Tools/index.tsx
new file mode 100644
index 0000000..62b61d9
--- /dev/null
+++ b/src/pages/Tools/index.tsx
@@ -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>
+  );
+};
diff --git a/src/pages/Upload/index.tsx b/src/pages/Upload/index.tsx
new file mode 100644
index 0000000..57a20a5
--- /dev/null
+++ b/src/pages/Upload/index.tsx
@@ -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>
+  );
+};