相册功能说明#

功能特性#

1. 相册列表页 (/albums/)#

双视图模式#

相册视图（默认）

  • 以卡片形式展示所有相册
  • 显示相册封面、标题、描述、照片数量
  • 显示拍摄地点、日期和标签
  • 点击卡片进入相册详情

照片视图

  • 瀑布流布局展示所有相册的所有照片
  • 鼠标悬停显示照片标题、描述和所属相册
  • 点击照片查看大图灯箱
  • 响应式布局（桌面4列、平板3列、平板2列、手机1列）

功能#

  • 视图模式切换（相册/照片）
  • 自动保存上次选择的视图模式
  • 图片灯箱浏览（上一张/下一张）
  • 键盘快捷键支持（ESC关闭、←→切换）

2. 相册详情页 (/albums/[id]/)#

布局模式#

瀑布流布局（默认）

  • 多列瀑布流展示照片
  • 保持照片原始比例
  • 响应式列数（桌面3列、平板2列、手机1列）

网格布局

  • 固定比例（1:1）网格展示
  • 照片裁剪填充网格单元
  • 整齐统一的视觉效果

功能#

  • 布局模式切换（瀑布流/网格）
  • 自动保存上次选择的布局模式
  • 图片灯箱浏览
  • 鼠标悬停显示照片信息
  • 返回相册列表导航

3. 图片灯箱#

功能特性

  • 全屏查看大图
  • 显示照片标题、描述和来源
  • 上一张/下一张导航
  • 点击背景或关闭按钮关闭
  • 键盘快捷键支持

快捷键

  • ESC - 关闭灯箱
  • ← - 上一张
  • → - 下一张

使用说明#

配置相册#

在 src/config/albumsConfig.ts 中配置相册：

export const albumsConfig: Album[] = [
  {
    id: "my-album",
    title: "我的相册",
    description: "相册描述",
    cover: "/albums/my-album/cover.jpg",
    date: "2024-01-01",
    location: "杭州",
    tags: ["旅行", "风景"],
    photos: [
      {
        id: "photo1",
        src: "/albums/my-album/photo1.jpg",
        thumbnail: "/albums/my-album/photo1.jpg", // 可选
        title: "照片标题",
        description: "照片描述",
        date: "2024-01-01",
        location: "西湖",
        tags: ["风景"],
        width: 1920,
        height: 1080,
      },
      // 更多照片...
    ],
  },
];

路径说明#

相对路径（推荐）

cover: "/albums/my-album/cover.jpg"
src: "/albums/my-album/photo1.jpg"

外部链接（支持）

cover: "https://example.com/image.jpg"
src: "https://example.com/photo.jpg"

缩略图优化#

为了提升加载速度，建议为照片生成缩略图：

{
  src: "/albums/my-album/photo1.jpg",      // 原图（灯箱使用）
  thumbnail: "/albums/my-album/photo1-thumb.jpg", // 缩略图（列表使用）
}

如不指定 thumbnail，则使用原图。

最佳实践#

1. 图片优化#

相册封面

  • 推荐尺寸：1200x900（4:3比例）
  • 文件大小：< 500KB
  • 格式：JPG 或 WebP

照片原图

  • 最大宽度：1920px
  • 文件大小：< 2MB
  • 格式：JPG 或 WebP

缩略图

  • 推荐尺寸：400x300
  • 文件大小：< 100KB
  • 格式：JPG 或 WebP

2. 照片数量#

  • 每个相册建议不超过 50 张照片
  • 照片总数建议不超过 500 张

3. 元数据#

为照片添加完整的元数据可以提升用户体验：

{
  id: "photo1",
  src: "/albums/my-album/photo1.jpg",
  title: "西湖日落",           // 推荐添加
  description: "傍晚的西湖",    // 推荐添加
  date: "2024-01-01",          // 建议添加
  location: "杭州西湖",         // 建议添加
  tags: ["日落", "风景"],       // 可选
  width: 1920,                 // 推荐添加（用于灯箱）
  height: 1080,                // 推荐添加
}

技术特性#

响应式设计#

相册列表

  • 桌面：3列网格
  • 平板：2列网格
  • 手机：1列网格

照片视图（瀑布流）

  • 桌面：4列
  • 大平板：3列
  • 平板：2列
  • 手机：1列

相册详情

  • 瀑布流：桌面3列、平板2列、手机1列
  • 网格：自适应单元格大小

性能优化#

  • 图片懒加载（loading="lazy"）
  • 布局选择记忆（localStorage）
  • CSS 动画硬件加速
  • 优化的瀑布流算法

用户体验#

  • 平滑的过渡动画
  • 鼠标悬停效果
  • 键盘快捷键支持
  • 视觉反馈清晰

浏览器兼容性#

故障排除#

图片不显示#

  1. 检查图片路径是否正确
  2. 确认图片文件存在于 public/albums/ 目录
  3. 检查图片格式是否支持

布局错乱#

  1. 清除浏览器缓存
  2. 清除 localStorage：localStorage.clear()
  3. 检查 CSS 是否正确加载

灯箱无法打开#

  1. 检查浏览器控制台错误
  2. 确认照片数据格式正确
  3. 尝试刷新页面