# 相册查看器

手机端友好的相册浏览 Web 应用。

## 功能特性

- 📱 手机浏览器优化，响应式布局
- 🖼️ 三列网格展示，留白均匀
- 📂 支持多级相册嵌套
- 🔄 懒加载优化，流畅浏览
- 🔍 点击查看原图
- ⚡ 缩略图加速加载

## 项目结构

```
album-viewer/
├── backend/
│   └── app.py              # Flask 后端服务
├── frontend/
│   └── index.html          # 前端页面
├── tools/
│   └── generate_thumbnails.py  # 缩略图生成工具
└── start.sh                # 启动脚本
```

## 安装依赖

```bash
# 安装 Python 依赖
pip3 install flask flask-cors

# 确保已安装 ImageMagick（用于生成缩略图）
which convert
```

## 使用方法

### 1. 生成缩略图（首次使用必需）

```bash
cd ~/nanocode/album-viewer
python3 tools/generate_thumbnails.py
```

**工具特性：**
- ✅ **递归处理**：自动扫描所有子目录
- ✅ **重复安全**：已存在的缩略图自动跳过
- ✅ **智能更新**：原图修改后自动重新生成
- ✅ **自动清理**：删除原图后自动清理对应缩略图

缩略图会生成在每个相册的 `thumbnails/` 子目录下。

### 2. 启动服务

```bash
./start.sh
```

或手动启动：

```bash
cd backend
python3 app.py
```

### 3. 访问

- PC: http://localhost:8892
- 手机: http://<服务器IP>:8892

## 相册目录结构

```
/home/ubuntu/albums/
├── 相册1/
│   ├── image1.jpg
│   ├── image2.jpg
│   └── thumbnails/          # 自动生成的缩略图
│       ├── image1.jpg
│       └── image2.jpg
├── 相册2/
│   └── ...
└── 子相册/
    └── ...
```

## 技术规格

| 项目 | 规格 |
|------|------|
| 缩略图宽度 | 320px（等比缩放）|
| 网格布局 | 3列，间距 12px |
| 缩略图比例 | 2:3（高度=宽度×1.5）|
| 图片质量 | 85% |
| 服务端口 | 8892 |

## 更新相册

添加新图片后，重新生成缩略图：

```bash
python3 tools/generate_thumbnails.py
```

工具会自动跳过已存在的缩略图。