rust-imager/assets/js/album.js

// 全局变量
let currentAlbum = null;
let currentImageIndex = 0;
let images = [];

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
    const urlParams = new URLSearchParams(window.location.search);
    const albumId = urlParams.get('id');
    
    if (albumId) {
        loadAlbum(albumId);
    } else {
        showError('缺少相册ID参数');
    }
});

// 加载相册详情
async function loadAlbum(albumId) {
    try {
        const response = await fetch(`/api/album/${albumId}`);
        if (!response.ok) {
            if (response.status === 404) {
                throw new Error('相册不存在');
            }
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        const albumData = await response.json();
        currentAlbum = albumData.album;
        images = albumData.images;
        
        updateAlbumInfo();
        displayImages();
    } catch (error) {
        console.error('加载相册失败:', error);
        showError('加载相册失败: ' + error.message);
    }
}

// 更新相册信息
function updateAlbumInfo() {
    document.getElementById('album-title').textContent = currentAlbum.title;
    document.getElementById('album-info').innerHTML = 
        `<i class="fas fa-images"></i> 共 ${images.length} 张图片`;
    document.title = `${currentAlbum.title} - 图片展示服务`;
}

// 显示图片列表
function displayImages() {
    const container = document.getElementById('images-container');
    
    if (images.length === 0) {
        container.innerHTML = '<div class="no-results"><i class="fas fa-images"></i><br>此相册暂无图片</div>';
        return;
    }
    
    container.innerHTML = images.map((image, index) => {
        // 优先使用缩略图API，如果没有则使用原始URL
        let imageUrl = '/assets/placeholder.svg';
        if (image.id) {
            imageUrl = `/api/thumbnail/${image.id}`;
        } else if (image.original_url) {
            imageUrl = image.original_url;
        }
        
        const title = image.title || `图片 ${index + 1}`;
        
        return `
        <div class="image-item" onclick="openLightbox(${index})">
            <img src="${imageUrl}" alt="${title}" onerror="this.src='/assets/placeholder.svg'">
            <div class="image-caption">
                ${image.width ? `<small>${image.width}×${image.height}</small>` : ''}
                ${image.file_size ? `<small>${(image.file_size / 1024 ).toFixed(2)} KB</small>` : ''}
            </div>
        </div>
        `;
    }).join('');
}

// 打开图片查看器
function openLightbox(index) {
    currentImageIndex = index;
    const lightbox = document.getElementById('lightbox');
    const lightboxImg = document.getElementById('lightbox-img');
    const lightboxInfo = document.getElementById('lightbox-info');
    
    const image = images[index];
    // 在lightbox中优先使用原始图片以获得更好的显示效果
    let imageUrl = '/assets/placeholder.svg';
    if (image.id) {
        imageUrl = `/api/original/${image.id}`;
    } else if (image.original_url) {
        imageUrl = image.original_url;
    }
    
    lightboxImg.src = imageUrl;
    
    const title = image.title || `图片 ${index + 1}`;
    let infoText = `${title} (${index + 1}/${images.length})`;
    if (image.width && image.height) {
        infoText += ` | ${image.width}×${image.height}`;
    }
    if (image.file_size) {
        infoText += ` | ${(image.file_size / 1024 ).toFixed(2)} KB`;
    }
    
    lightboxInfo.textContent = infoText;
    lightbox.style.display = 'flex';
    document.body.style.overflow = 'hidden';
}

// 关闭图片查看器
function closeLightbox() {
    const lightbox = document.getElementById('lightbox');
    lightbox.style.display = 'none';
    document.body.style.overflow = 'auto';
}

// 下一张图片
function nextImage() {
    currentImageIndex = (currentImageIndex + 1) % images.length;
    updateLightboxImage();
}

// 上一张图片
function prevImage() {
    currentImageIndex = (currentImageIndex - 1 + images.length) % images.length;
    updateLightboxImage();
}

// 更新图片查看器显示
function updateLightboxImage() {
    const lightboxImg = document.getElementById('lightbox-img');
    const lightboxInfo = document.getElementById('lightbox-info');
    
    const image = images[currentImageIndex];
    // 在lightbox中优先使用原始图片以获得更好的显示效果
    let imageUrl = '/assets/placeholder.svg';
    if (image.id) {
        imageUrl = `/api/original/${image.id}`;
    } else if (image.original_url) {
        imageUrl = image.original_url;
    }
    
    lightboxImg.src = imageUrl;
    
    const title = image.title || `图片 ${currentImageIndex + 1}`;
    let infoText = `${title} (${currentImageIndex + 1}/${images.length})`;
    if (image.width && image.height) {
        infoText += ` | ${image.width}×${image.height}`;
    }
    if (image.file_size) {
        infoText += ` | ${(image.file_size / 1024 ).toFixed(2)} KB`;
    }
    
    lightboxInfo.textContent = infoText;
}

// 键盘导航
document.addEventListener('keydown', function(event) {
    const lightbox = document.getElementById('lightbox');
    if (lightbox.style.display === 'flex') {
        if (event.key === 'Escape') closeLightbox();
        if (event.key === 'ArrowRight') nextImage();
        if (event.key === 'ArrowLeft') prevImage();
    }
});

// 点击背景关闭
document.getElementById('lightbox').addEventListener('click', function(event) {
    if (event.target === this) closeLightbox();
});

// 显示错误信息
function showError(message) {
    const container = document.getElementById('images-container');
    container.innerHTML = `<div class="no-results"><i class="fas fa-exclamation-triangle"></i><br>${message}</div>`;
    
    document.getElementById('album-title').textContent = '加载失败';
    document.getElementById('album-info').innerHTML = '';
}