static/main.js

// 加载页面控制函数
function initLoadingScreen() {
    const loadingScreen = document.querySelector('.loading-screen');
    const progressBar = document.querySelector('.progress-bar');
    const progressText = document.querySelector('.progress-text .digital-glitch');
    const loadingMessage = document.querySelector('.loading-message');
    
    if (!loadingScreen || !progressBar || !progressText) return;
    
    // 检查是否是从站内导航回来的
    const referrer = document.referrer;
    const currentHost = window.location.host;
    
    // 如果是从同一站点的其他页面返回的，不显示加载动画
    if (referrer && referrer.includes(currentHost) && !isPageReload()) {
        loadingScreen.classList.add('hidden');
        loadingScreen.style.display = 'none';
        return;
    }
    
    const messages = [
        "Initializing system components...",
        "Connecting to neural network...",
        "Loading AI modules...",
        "Calibrating response patterns...",
        "Starting quantum processors..."
    ];
    
    let progress = 0;
    const totalDuration = 5000; // 5秒钟完成加载
    const interval = 30; // 每30ms更新一次
    const steps = totalDuration / interval;
    const increment = 100 / steps;
    
    // 随机更新消息
    let messageIndex = 0;
    
    const updateProgress = () => {
        progress += increment;
        
        // 添加一些随机性，模拟真实加载
        const randomFactor = Math.random() * 0.5;
        const adjustedProgress = Math.min(progress + randomFactor, 100);
        
        // 更新进度条宽度
        progressBar.style.width = `${adjustedProgress}%`;
        
        // 更新进度文本
        const displayProgress = Math.floor(adjustedProgress);
        progressText.textContent = `${displayProgress}%`;
        
        // 不同阶段显示不同消息
        if (displayProgress > messageIndex * 25 && messageIndex < messages.length) {
            loadingMessage.textContent = messages[messageIndex];
            messageIndex++;
            
            // 添加闪烁效果
            loadingScreen.style.filter = 'brightness(1.2)';
            setTimeout(() => {
                loadingScreen.style.filter = 'brightness(1)';
            }, 100);
        }
        
        // 模拟网络加载的变化
        if (displayProgress >= 99.5) {
            // 加载完成，隐藏加载屏幕
            setTimeout(() => {
                loadingScreen.classList.add('hidden');
                
                // 完全隐藏后从DOM中移除
                setTimeout(() => {
                    loadingScreen.style.display = 'none';
                }, 500);
            }, 200);
            return;
        }
        
        // 添加随机故障效果
        if (Math.random() < 0.1) {
            createGlitchEffect();
        }
        
        requestAnimationFrame(updateProgress);
    };
    
    // 创建故障效果
    const createGlitchEffect = () => {
        // 屏幕抖动
        loadingScreen.style.transform = `translate(${(Math.random() - 0.5) * 10}px, ${(Math.random() - 0.5) * 5}px)`;
        
        // 随机调整颜色和不透明度
        loadingScreen.style.filter = `hue-rotate(${Math.random() * 30}deg) brightness(${1 + Math.random() * 0.3})`;
        
        // 恢复正常
        setTimeout(() => {
            loadingScreen.style.transform = 'translate(0, 0)';
            loadingScreen.style.filter = 'none';
        }, 100);
    };
    
    // 开始更新进度
    setTimeout(() => {
        updateProgress();
    }, 300);
}

// 动态产生随机粒子
function createRandomParticle() {
    const container = document.querySelector('.particle-container');

    if (!container) return;

    setInterval(() => {
        const particle = document.createElement('div');
        particle.className = 'particle';

        // 随机位置
        particle.style.left = `${Math.random() * 100}%`;
        particle.style.top = '100%';

        // 随机大小
        const size = Math.random() * 2 + 1;
        particle.style.width = `${size}px`;
        particle.style.height = `${size}px`;

        // 获取CSS变量
        const styles = getComputedStyle(document.documentElement);
        const colorOptions = [
            styles.getPropertyValue('--accent-green').trim(),
            styles.getPropertyValue('--accent-color-5').trim(),
            styles.getPropertyValue('--accent-blue').trim(),
            styles.getPropertyValue('--accent-color-1').trim()
        ];

        // 随机颜色
        const randomColor = colorOptions[Math.floor(Math.random() * colorOptions.length)];
        particle.style.backgroundColor = randomColor;
        particle.style.boxShadow = `0 0 5px ${randomColor}`;

        // 随机透明度
        particle.style.opacity = (Math.random() * 0.5 + 0.3).toString();

        // 添加到容器
        container.appendChild(particle);

        // 设置动画结束后移除元素
        setTimeout(() => {
            particle.remove();
        }, 5000);
    }, 600); // 每600ms创建一个新粒子
}

// 添加主题选项动画效果
function animateThemeOptions() {
    const themeOptions = document.querySelectorAll('.theme-option');
    themeOptions.forEach((option, index) => {
        // 直接显示元素，不使用动画过渡
        option.style.opacity = '1';
    });
}

// 页面加载完成后初始化效果
document.addEventListener('DOMContentLoaded', function() {
    // 初始化加载页面
    initLoadingScreen();
    
    // 初始化粒子效果
    createRandomParticle();

    // 初始化主题选项动画
    animateThemeOptions();
});

// 仅用于开发环境 - 清除会话状态
function resetVisitState() {
    // 清除会话状态相关变量
    sessionStorage.clear();
    console.log('Visit state has been reset. This will simulate a first-time visit on the next navigation.');
}

// 注释掉下面这行代码来禁用自动重置（仅开发环境使用）
// resetVisitState();

// 判断页面是否为刷新
function isPageReload() {
    // 如果页面表现性能数据可用，检查导航类型
    if (window.performance && window.performance.navigation) {
        return window.performance.navigation.type === 1; // 1表示页面刷新
    }
    
    // 对较新的浏览器使用Navigation Timing API
    if (window.performance && window.performance.getEntriesByType && window.performance.getEntriesByType('navigation').length) {
        return window.performance.getEntriesByType('navigation')[0].type === 'reload';
    }
    
    // 无法确定时，假设不是刷新
    return false;
}