Book_system/app/static/js/inventory-logs.js

// 库存日志页面的JavaScript功能
document.addEventListener('DOMContentLoaded', function() {
    // 日期选择器联动
    const dateFrom = document.getElementById('date_from');
    const dateTo = document.getElementById('date_to');

    // 确保结束日期不早于开始日期
    if (dateFrom && dateTo) {
        dateFrom.addEventListener('change', function() {
            if (dateTo.value && dateFrom.value > dateTo.value) {
                dateTo.value = dateFrom.value;
            }
        });

        dateTo.addEventListener('change', function() {
            if (dateFrom.value && dateFrom.value > dateTo.value) {
                dateFrom.value = dateTo.value;
            }
        });
    }

    // 重置筛选按钮
    const resetButton = document.getElementById('reset-filters');
    if (resetButton) {
        resetButton.addEventListener('click', function() {
            document.getElementById('book_id').value = '';
            document.getElementById('change_type').value = '';
            document.getElementById('date_from').value = '';
            document.getElementById('date_to').value = '';

            // 提交表单以应用重置的筛选条件
            document.querySelector('form').submit();
        });
    }

    // 备注信息悬停显示完整内容
    const remarkCells = document.querySelectorAll('.remark-cell');
    remarkCells.forEach(cell => {
        if (cell.offsetWidth < cell.scrollWidth) {
            cell.title = cell.textContent;
        }
    });

    // 创建雪花效果
    createSnowflakes();

    // 初始化particles.js特效
    initParticles();

    // 给表格行添加动画延迟
    animateTableRows();
});

// 创建雪花效果
function createSnowflakes() {
    const snowflakesCount = 50; // 雪花数量
    const container = document.body;
    const snowflakeChars = ['❄', '❅', '❆', '✱', '*'];

    for (let i = 0; i < snowflakesCount; i++) {
        const snowflake = document.createElement('div');
        snowflake.className = 'snowflake';
        snowflake.textContent = snowflakeChars[Math.floor(Math.random() * snowflakeChars.length)];

        // 随机样式
        snowflake.style.left = `${Math.random() * 100}%`;
        snowflake.style.opacity = Math.random();
        snowflake.style.fontSize = `${Math.random() * 15 + 10}px`;

        // 动画
        const duration = Math.random() * 30 + 20;
        snowflake.style.animationDuration = `${duration}s`;
        snowflake.style.animationDelay = `${Math.random() * 5}s`;

        container.appendChild(snowflake);
    }
}

// 初始化particles.js
function initParticles() {
    if (typeof particlesJS !== 'undefined') {
        particlesJS('magic-particles', {
            "particles": {
                "number": {
                    "value": 80,
                    "density": {
                        "enable": true,
                        "value_area": 800
                    }
                },
                "color": {
                    "value": ["#a2d5f2", "#6fa8dc", "#cfe2f3", "#b19cd9"]
                },
                "shape": {
                    "type": ["circle", "star"],
                    "stroke": {
                        "width": 0,
                        "color": "#000000"
                    },
                    "polygon": {
                        "nb_sides": 5
                    }
                },
                "opacity": {
                    "value": 0.3,
                    "random": true,
                    "anim": {
                        "enable": true,
                        "speed": 1,
                        "opacity_min": 0.1,
                        "sync": false
                    }
                },
                "size": {
                    "value": 5,
                    "random": true,
                    "anim": {
                        "enable": false,
                        "speed": 40,
                        "size_min": 0.1,
                        "sync": false
                    }
                },
                "line_linked": {
                    "enable": true,
                    "distance": 150,
                    "color": "#a2d5f2",
                    "opacity": 0.2,
                    "width": 1
                },
                "move": {
                    "enable": true,
                    "speed": 2,
                    "direction": "none",
                    "random": true,
                    "straight": false,
                    "out_mode": "out",
                    "bounce": false,
                    "attract": {
                        "enable": true,
                        "rotateX": 600,
                        "rotateY": 1200
                    }
                }
            },
            "interactivity": {
                "detect_on": "canvas",
                "events": {
                    "onhover": {
                        "enable": true,
                        "mode": "grab"
                    },
                    "onclick": {
                        "enable": true,
                        "mode": "push"
                    },
                    "resize": true
                },
                "modes": {
                    "grab": {
                        "distance": 140,
                        "line_linked": {
                            "opacity": 0.5
                        }
                    },
                    "bubble": {
                        "distance": 400,
                        "size": 4,
                        "duration": 2,
                        "opacity": 1,
                        "speed": 3
                    },
                    "repulse": {
                        "distance": 200,
                        "duration": 0.4
                    },
                    "push": {
                        "particles_nb": 4
                    },
                    "remove": {
                        "particles_nb": 2
                    }
                }
            },
            "retina_detect": true
        });
    }
}

// 给表格行添加动画延迟
function animateTableRows() {
    const rows = document.querySelectorAll('.log-row');
    rows.forEach((row, index) => {
        row.style.animationDelay = `${index * 0.05}s`;
        row.style.animationDuration = '0.5s';
        row.style.animationName = 'fadeInUp';
        row.style.animationFillMode = 'both';
    });
}

// 添加淡入向上动画
const fadeInUpKeyframes = `
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 20px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}`;

// 添加动画样式到文档
document.addEventListener('DOMContentLoaded', function() {
    const style = document.createElement('style');
    style.textContent = fadeInUpKeyframes;
    document.head.appendChild(style);
});