<!-- 自定义页面启动脚本 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const densityKey = 'filament_density';
    const savedDensity = localStorage.getItem(densityKey) || 'comfortable';
    document.body.dataset.density = savedDensity;

    window.setTableDensity = function(nextDensity) {
        const density = nextDensity === 'compact' ? 'compact' : 'comfortable';
        document.body.dataset.density = density;
        localStorage.setItem(densityKey, density);
    };

    // 添加淡入动画
    const elements = document.querySelectorAll('.fi-main, .fi-topbar, .fi-sidebar');
    elements.forEach((el, index) => {
        el.style.opacity = '0';
        el.style.transform = 'translateY(20px)';
        setTimeout(() => {
            el.style.transition = 'all 0.5s ease-in-out';
            el.style.opacity = '1';
            el.style.transform = 'translateY(0)';
        }, index * 100);
    });

    // 自定义滚动条
    const style = document.createElement('style');
    style.textContent = `
        .fi-main::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        .fi-main::-webkit-scrollbar-track {
            background: #f1f5f9;
            border-radius: 4px;
        }
        .fi-main::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 4px;
            transition: background 0.2s ease;
        }
        .fi-main::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }
    `;
    document.head.appendChild(style);
});
</script>
