showpic/public/js/index.js

document.addEventListener('DOMContentLoaded', function() {
    loadDisplayData();
});

let currentGroupIndex = 0;
let groups = [];
let displayTimer = null;

async function loadDisplayData() {
    try {
        const response = await fetch('/api/display');
        const data = await response.json();
        
        if (!data.enabled) {
            document.getElementById('feature-disabled').style.display = 'block';
            document.getElementById('image-display').style.display = 'none';
            return;
        }
        
        document.getElementById('feature-disabled').style.display = 'none';
        document.getElementById('image-display').style.display = 'block';
        
        groups = data.groups;
        if (groups.length === 0) {
            document.getElementById('group-name').textContent = '暂无分组';
            return;
        }
        
        showGroup(0);
        startRotation();
    } catch (error) {
        console.error('加载数据失败:', error);
    }
}

function showGroup(index) {
    if (index >= groups.length) {
        index = 0;
    }
    
    currentGroupIndex = index;
    const group = groups[index];
    
    document.getElementById('group-name').textContent = group.name;
    
    const grid = document.getElementById('image-grid');
    grid.innerHTML = '';
    
    group.images.forEach(image => {
        const imageItem = document.createElement('div');
        imageItem.className = 'image-item';
        
        const img = document.createElement('img');
        img.src = `/uploads/${image.filename}`;
        img.alt = image.original_name;
        img.loading = 'lazy';
        
        // 长按保存功能
        let pressTimer;
        img.addEventListener('touchstart', function(e) {
            pressTimer = setTimeout(function() {
                saveImage(`/uploads/${image.filename}`, image.original_name);
            }, 1000);
        });
        
        img.addEventListener('touchend', function() {
            clearTimeout(pressTimer);
        });
        
        img.addEventListener('touchmove', function() {
            clearTimeout(pressTimer);
        });
        
        imageItem.appendChild(img);
        grid.appendChild(imageItem);
    });
    
    // 更新倒计时
    updateTimer(group.display_seconds);
}

function updateTimer(seconds) {
    const timerElement = document.getElementById('group-timer');
    let remaining = seconds;
    
    if (displayTimer) {
        clearInterval(displayTimer);
    }
    
    timerElement.textContent = `剩余时间: ${remaining}秒`;
    
    displayTimer = setInterval(function() {
        remaining--;
        if (remaining <= 0) {
            clearInterval(displayTimer);
            showGroup(currentGroupIndex + 1);
            return;
        }
        timerElement.textContent = `剩余时间: ${remaining}秒`;
    }, 1000);
}

function startRotation() {
    if (groups.length <= 1) return;
    
    // 自动轮播已在updateTimer中处理
}

function saveImage(url, filename) {
    const link = document.createElement('a');
    link.href = url;
    link.download = filename || 'image.jpg';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}