相册

这是一个功能完整的相册系统，支持图片上传、管理、查看和分享。

功能特性

🚀 上传功能

• 多种上传方式：支持点击选择、拖拽上传
• 批量上传：一次可选择多张图片同时上传
• 格式支持：JPG、PNG、GIF、WebP 等主流格式
• 大小限制：单文件最大 10MB
• CDN 支持：集成 CDN 上传，快速可靠

📱 查看体验

• 图片预览：高清大图查看，支持缩放、旋转
• 幻灯片模式：自动播放，沉浸式体验
• 键盘操作：方向键切换，空格键播放/暂停
• 触摸手势：移动端友好的触摸操作
• 缩略图导航：快速跳转到指定图片

🎯 管理功能

• 信息编辑：可设置标题、描述、标签
• 智能搜索：按标题、描述、标签搜索
• 排序筛选：多种排序方式，灵活筛选
• 批量操作：支持批量删除、下载
• 本地存储：自动保存到浏览器本地

🌈 界面设计

• 响应式布局：完美适配桌面端和移动端
• 两种视图：网格视图和瀑布流视图
• 暗色模式：自动适应系统主题
• 动画效果：流畅的过渡动画
• 现代 UI：简洁美观的界面设计

相册演示

我的相册

0 张照片 0 Bytes 0 个标签

加载中...

组件使用

基础用法

在 Markdown 文件中直接使用相册组件：

<PhotoAlbum />

高级用法

如果需要自定义配置，可以这样使用：

<template>
  <div>
    <!-- 只显示上传组件 -->
    <PhotoUpload @upload-success="handleSuccess" @upload-error="handleError" />

    <!-- 只显示图片查看器 -->
    <PhotoViewer
      v-model:visible="viewerVisible"
      v-model:currentIndex="currentIndex"
      :photos="photos"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const viewerVisible = ref(false)
const currentIndex = ref(0)
const photos = ref([])

const handleSuccess = (result) => {
  console.log('上传成功:', result)
}

const handleError = (error) => {
  console.error('上传失败:', error)
}
</script>

快捷键说明

查看器快捷键

• Esc - 关闭查看器
• ← / → - 切换上一张/下一张
• + / - - 放大/缩小
• R - 重置变换（位置、缩放、旋转）
• T - 旋转图片
• 空格 - 开始/停止幻灯片

搜索技巧

• 按标题搜索：输入图片标题关键词
• 按描述搜索：输入图片描述内容
• 按标签搜索：输入标签名称或点击标签
• 组合搜索：支持多个关键词组合搜索

CDN 配置

相册系统支持多种 CDN 服务商，你可以根据需要进行配置：

Imgur（默认）

const config = {
  apiUrl: 'https://api.imgur.com/3/image',
  headers: {
    Authorization: 'Client-ID YOUR_IMGUR_CLIENT_ID'
  }
}

Cloudinary

const config = {
  apiUrl: 'https://api.cloudinary.com/v1_1/YOUR_CLOUD_NAME/image/upload',
  uploadPreset: 'YOUR_UPLOAD_PRESET'
}

七牛云

const config = {
  apiUrl: 'https://upload.qiniup.com/',
  domain: 'YOUR_QINIU_DOMAIN'
}

注意事项

1. 隐私保护：上传的图片会存储在第三方 CDN 服务商，请注意隐私保护
2. 网络要求：上传功能需要稳定的网络连接
3. 浏览器支持：建议使用现代浏览器以获得最佳体验
4. 存储空间：图片信息存储在浏览器本地，清除浏览器数据会丢失记录
5. 文件大小：建议压缩大型图片以提升上传和加载速度

技术栈

• 前端框架：Vue 3 + TypeScript
• UI 设计：现代化响应式设计
• 存储方案：LocalStorage + CDN
• 图片处理：原生 Canvas API
• 动画效果：CSS3 + Vue Transition

---

💡 提示：这个相册系统完全开源，你可以根据需要自定义和扩展功能。如果遇到任何问题，欢迎提出建议和反馈！