图片管理

图片管理是逍遥图库系统的核心功能，提供完整的图片上传、编辑、管理能力。

图片上传

单张上传

1. 点击导航栏「上传」按钮
2. 点击上传区域或拖拽图片
3. 填写图片信息
4. 点击「上传」

批量上传

• 一次选择多张图片（Ctrl + 点击）
• 拖拽多张图片到上传区域
• 自动队列处理

支持格式

上传限制

• 单文件大小：最大 10MB（可配置）
• 批量数量：无限制
• 并发上传：3 个（队列处理）

图片编辑

基础编辑

• 裁剪 - 自由裁剪或固定比例
• 旋转 - 顺时针/逆时针 90°
• 翻转 - 水平/垂直翻转
• 调整大小 - 按比例或固定尺寸

滤镜效果

水印功能

文字水印

配置项：
- 水印文字
- 字体大小
- 颜色
- 透明度
- 位置（九宫格）

图片水印

配置项：
- 水印图片
- 透明度
- 位置
- 大小

图片信息

基本信息

• 标题 - 图片名称
• 描述 - 详细说明
• 标签 - 分类标签
• 相册 - 所属相册

EXIF 信息

系统自动提取图片的 EXIF 元数据：

• 相机型号
• 拍摄时间
• 光圈 / 快门 / ISO
• 焦距
• GPS 位置
• 等等

统计信息

• 浏览次数
• 点赞数
• 收藏数
• 评论数
• 下载次数

图片列表

视图模式

• 瀑布流 - 自适应布局
• 网格 - 固定大小
• 列表 - 详细信息

排序方式

• 上传时间（最新/最旧）
• 浏览次数
• 点赞数
• 收藏数
• 文件大小

筛选条件

• 相册
• 标签
• 日期范围
• 公开/私密

批量操作

选择图片

• 点击图片左上角复选框
• Ctrl + 点击多选
• Shift + 点击范围选择

批量功能

• 删除 - 移动到回收站
• 移动 - 移动到其他相册
• 设置 - 批量修改信息
• 下载 - 打包下载

图片详情页

功能区域

┌─────────────────────────────┐
│  图片展示区                   │
│  [<] 图片 [>]                │
├─────────────────────────────┤
│  互动按钮                     │
│  ❤️ 点赞  ⭐ 收藏  📤 分享    │
├─────────────────────────────┤
│  图片信息                     │
│  标题 / 描述 / 标签           │
├─────────────────────────────┤
│  评论区                       │
│  ...                         │
└─────────────────────────────┘

键盘快捷键

图片下载

下载选项

• 原图下载 - 完整原始文件
• 压缩下载 - 减小文件大小
• 指定尺寸 - 自定义尺寸

下载统计

系统记录每次下载，用于数据分析。

回收站

软删除

删除的图片会移动到回收站，不会立即删除。

恢复功能

• 单张恢复
• 批量恢复
• 查看删除时间

自动清理

回收站中的图片保留 30 天后自动永久删除。

永久删除

在回收站中可以永久删除图片（不可恢复）。

搜索功能

搜索方式

• 关键词 - 搜索标题、描述
• 标签 - 按标签筛选
• 日期 - 时间范围
• 作者 - 上传者

搜索语法

# 精确搜索
"风景照片"

# 排除词
风景 -城市

# 标签搜索
tag:自然

图片懒加载

性能提升

• 首屏加载提升 50-70%
• 减少带宽消耗
• 提升用户体验

实现原理

• 使用 Intersection Observer API
• 仅加载可视区域图片
• 预加载即将可见的图片

缩略图

自动生成

上传后自动生成多种尺寸的缩略图：

• 小图：100x100
• 中图：300x300
• 大图：800x800

队列处理

缩略图生成通过队列异步处理，不影响上传速度。

API 接口

上传图片

POST /api/photos/upload
Content-Type: multipart/form-data

file: [图片文件]
title: 图片标题
description: 图片描述
album_id: 相册ID
tags: 标签1,标签2

获取图片列表

GET /api/photos?page=1&limit=20&sort=create_time

获取图片详情

GET /api/photos/{id}

更新图片

PUT /api/photos/{id}
Content-Type: application/json

{
    "title": "新标题",
    "description": "新描述"
}

删除图片

DELETE /api/photos/{id}

下一步

• 相册管理 - 使用相册组织图片
• 互动功能 - 点赞、收藏、分享
• 管理后台 - 管理员功能