script.js

let scanStartTime = null;
let fileAgeChart = null;

const fileTypes = {
    docs: ['.txt', '.doc', '.docx', '.pdf', '.xls', '.xlsx', '.ppt', '.pptx'],
    media: ['.jpg', '.jpeg', '.png', '.gif', '.mp3', '.mp4', '.avi', '.mov'],
    archive: ['.zip', '.rar', '.7z', '.tar', '.gz'],
    exec: ['.exe', '.msi', '.dll', '.sys']
};

function getFileTypeCategory(extension) {
    extension = extension.toLowerCase();
    if (fileTypes.docs.includes(extension)) return 'docs';
    if (fileTypes.media.includes(extension)) return 'media';
    if (fileTypes.archive.includes(extension)) return 'archive';
    if (fileTypes.exec.includes(extension)) return 'exec';
    return 'other';
}

function updateFileTypeStats(fileTypes) {
    let stats = {
        docs: { count: 0, size: 0 },
        media: { count: 0, size: 0 },
        archive: { count: 0, size: 0 },
        exec: { count: 0, size: 0 }
    };

    fileTypes.forEach(type => {
        const category = getFileTypeCategory(type.extension);
        if (stats[category]) {
            stats[category].count += type.count;
            stats[category].size += type.totalSize;
        }
    });

    document.getElementById('docCount').textContent = stats.docs.count.toLocaleString() + ' 个文件';
    document.getElementById('docSize').textContent = formatBytes(stats.docs.size);
    document.getElementById('mediaCount').textContent = stats.media.count.toLocaleString() + ' 个文件';
    document.getElementById('mediaSize').textContent = formatBytes(stats.media.size);
    document.getElementById('archiveCount').textContent = stats.archive.count.toLocaleString() + ' 个文件';
    document.getElementById('archiveSize').textContent = formatBytes(stats.archive.size);
    document.getElementById('execCount').textContent = stats.exec.count.toLocaleString() + ' 个文件';
    document.getElementById('execSize').textContent = formatBytes(stats.exec.size);
}

function createFileAgeChart(files) {
    const ctx = document.getElementById('fileAgeChart').getContext('2d');
    if (fileAgeChart) {
        fileAgeChart.destroy();
    }

    const now = new Date();
    const day = 24 * 60 * 60 * 1000;
    let ages = {
        day1: 0,
        day7: 0,
        day30: 0,
        older: 0
    };

    files.forEach(file => {
        const age = now - new Date(file.modTime);
        if (age <= day) ages.day1++;
        else if (age <= 7 * day) ages.day7++;
        else if (age <= 30 * day) ages.day30++;
        else ages.older++;
    });

    fileAgeChart = new Chart(ctx, {
        type: 'pie',
        data: {
            labels: ['24小时内', '7天内', '30天内', '更早'],
            datasets: [{
                data: [ages.day1, ages.day7, ages.day30, ages.older],
                backgroundColor: ['#00ff7d', '#00e673', '#00cc66', '#00b359']
            }]
        },
        options: {
            responsive: true,
            plugins: {
                title: {
                    display: true,
                    text: '文件年龄分布',
                    color: '#ffffff'
                },
                legend: {
                    position: 'bottom',
                    labels: { color: '#ffffff' }
                }
            }
        }
    });
    const total = ages.day1 + ages.day7 + ages.day30 + ages.older;
    updateAgeBar('age1', ages.day1, total);
    updateAgeBar('age7', ages.day7, total);
    updateAgeBar('age30', ages.day30, total);
    updateAgeBar('ageOlder', ages.older, total);
}

function updateAgeBar(id, value, total) {
    const percentage = (value / total * 100).toFixed(1);
    document.getElementById(id).style.width = percentage + '%';
    document.getElementById(id + 'Value').textContent = 
        `${value.toLocaleString()} 个文件 (${percentage}%)`;
}

function formatBytes(bytes) {
    if (bytes === 0) return '0 Bytes';
    const k = 1024;
    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}

function formatDate(date) {
    return new Date(date).toLocaleString();
}

function formatTimeAgo(date) {
    const seconds = Math.floor((new Date() - new Date(date)) / 1000);
    const intervals = {
        '年': 31536000,
        '月': 2592000,
        '周': 604800,
        '天': 86400,
        '小时': 3600,
        '分钟': 60,
        '秒': 1
    };

    for (let [unit, secondsInUnit] of Object.entries(intervals)) {
        const interval = Math.floor(seconds / secondsInUnit);
        if (interval >= 1) {
            return `${interval} ${unit}前`;
        }
    }
    return "刚刚";
}

function updateDiskSummary(disks) {
    const tbody = document.getElementById('diskSummary').getElementsByTagName('tbody')[0];
    tbody.innerHTML = '';
    
    disks.forEach(disk => {
        const row = tbody.insertRow();
        row.insertCell(0).textContent = disk.path;
        row.insertCell(1).textContent = formatBytes(disk.totalSpace);
        row.insertCell(2).textContent = formatBytes(disk.usedSpace);
        row.insertCell(3).textContent = formatBytes(disk.freeSpace);
        
        const usageCell = row.insertCell(4);
        usageCell.innerHTML = `
            ${disk.usagePercent.toFixed(1)}%
            <div class="percentage-bar">
                <div class="percentage-fill" style="width: ${disk.usagePercent}%"></div>
            </div>
        `;
    });
}

let diskUsageChart = null;
let fileTypesChart = null;

function createDiskUsageChart(data) {
    const ctx = document.getElementById('diskUsageChart').getContext('2d');
    
    if (diskUsageChart) {
        diskUsageChart.destroy();
    }

    const disks = data.disks || [];
    diskUsageChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: disks.map(disk => disk.path),
            datasets: [{
                data: disks.map(disk => disk.usagePercent),
                backgroundColor: [
                    '#00ff7d',
                    '#00e673',
                    '#00cc66',
                    '#00b359',
                    '#00994d'
                ]
            }]
        },
        options: {
            responsive: true,
            plugins: {
                title: {
                    display: true,
                    text: '磁盘使用情况',
                    color: '#ffffff'
                },
                legend: {
                    position: 'bottom',
                    labels: {
                        color: '#ffffff'
                    }
                }
            }
        }
    });
}

function createFileTypesChart(data) {
    const ctx = document.getElementById('fileTypesChart').getContext('2d');
    
    if (fileTypesChart) {
        fileTypesChart.destroy();
    }

    const topFileTypes = (data.fileTypes || [])
        .sort((a, b) => b.totalSize - a.totalSize)
        .slice(0, 10);

    fileTypesChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: topFileTypes.map(type => type.extension),
            datasets: [{
                label: '文件大小',
                data: topFileTypes.map(type => type.totalSize),
                backgroundColor: '#00ff7d'
            }]
        },
        options: {
            responsive: true,
            plugins: {
                title: {
                    display: true,
                    text: '文件类型统计 (前10大)',
                    color: '#ffffff'
                },
                legend: {
                    labels: {
                        color: '#ffffff'
                    }
                }
            },
            scales: {
                y: {
                    ticks: {
                        color: '#ffffff',
                        callback: function(value) {
                            return formatBytes(value);
                        }
                    }
                },
                x: {
                    ticks: {
                        color: '#ffffff'
                    }
                }
            }
        }
    });
}

function updateTopFilesTable(files, totalSize) {
    const tbody = document.getElementById('topFilesTable').getElementsByTagName('tbody')[0];
    tbody.innerHTML = '';
    
    let totalTopFilesSize = 0;
    (files || []).forEach(file => {
        totalTopFilesSize += file.size;
        const row = tbody.insertRow();
        row.insertCell(0).textContent = file.path;
        row.insertCell(1).textContent = formatBytes(file.size);
        row.insertCell(2).textContent = file.extension;
        row.insertCell(3).textContent = (file.size / totalSize * 100).toFixed(2) + '%';
    });

    document.getElementById('topFilesSizePercentage').textContent = 
        (totalTopFilesSize / totalSize * 100).toFixed(2) + '%';
}

function updateRecentFilesTable(files) {
    const tbody = document.getElementById('recentFilesTable').getElementsByTagName('tbody')[0];
    tbody.innerHTML = '';
    
    let oldestTime = new Date();
    let newestTime = new Date(0);

    (files || []).forEach(file => {
        const fileDate = new Date(file.modTime);
        if (fileDate < oldestTime) oldestTime = fileDate;
        if (fileDate > newestTime) newestTime = fileDate;

        const row = tbody.insertRow();
        row.insertCell(0).textContent = file.path;
        row.insertCell(1).textContent = formatDate(file.modTime);
        row.insertCell(2).textContent = formatBytes(file.size);
        row.insertCell(3).textContent = formatTimeAgo(file.modTime);
    });

    document.getElementById('modTimeRange').textContent = 
        `${formatDate(oldestTime)} 至 ${formatDate(newestTime)}`;
}

function updateTopDirsTable(dirs, totalSize) {
    const tbody = document.getElementById('topDirsTable').getElementsByTagName('tbody')[0];
    tbody.innerHTML = '';
    
    let totalDirsFiles = 0;
    let totalFiles = 0;
    (dirs || []).forEach(dir => {
        totalDirsFiles += dir.fileCount;
        totalFiles = Math.max(totalFiles, dir.fileCount);
        const row = tbody.insertRow();
        row.insertCell(0).textContent = dir.path;
        row.insertCell(1).textContent = dir.fileCount;
        row.insertCell(2).textContent = formatBytes(dir.totalSize);
        row.insertCell(3).textContent = dir.depth;
        row.insertCell(4).textContent = (dir.totalSize / totalSize * 100).toFixed(2) + '%';
    });

    document.getElementById('topDirsFilePercentage').textContent = 
        (totalDirsFiles / totalFiles * 100).toFixed(2) + '%';
}

document.getElementById('scanBtn').addEventListener('click', async () => {
    const loadingOverlay = document.getElementById('loadingOverlay');
    loadingOverlay.style.display = 'flex';
    scanStartTime = new Date();
    document.getElementById('scanStatus').textContent = '扫描中...';
    document.getElementById('scanStartTime').textContent = formatDate(scanStartTime);

    // 开始监听进度
    const progressSource = new EventSource('http://localhost:8080/progress');
    progressSource.onmessage = function(event) {
        const progress = JSON.parse(event.data);
        document.getElementById('scanStatus').textContent = 
            `正在扫描: ${progress.currentDisk} - 已扫描 ${progress.scannedFiles.toLocaleString()} 个文件`;
    };

    progressSource.onerror = function() {
        progressSource.close();
    };

    try {
        const response = await fetch('http://localhost:8080/scan', {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
            },
            mode: 'cors',
            signal: AbortSignal.timeout(20 * 60 * 1000),
        });

        if (!response.ok) {
            const errorText = await response.text();
            throw new Error(errorText || '服务器错误');
        }

        const data = await response.json();
        if (!data) {
            throw new Error('服务器返回的数据无效');
        }

        document.getElementById('totalFiles').textContent = (data.totalFiles || 0).toLocaleString();
        document.getElementById('totalSize').textContent = formatBytes(data.totalSize || 0);
        document.getElementById('maxDepth').textContent = data.maxDepth || 0;
        document.getElementById('avgFileSize').textContent = formatBytes((data.totalSize || 0) / (data.totalFiles || 1));
        document.getElementById('systemInfo').textContent = `${navigator.platform} / ${navigator.userAgent.split(') ')[0]})`;
        let totalCapacity = 0;
        let totalAvailable = 0;
        data.disks.forEach(disk => {
            totalCapacity += disk.totalSpace;
            totalAvailable += disk.freeSpace;
        });
        document.getElementById('totalCapacity').textContent = formatBytes(totalCapacity);
        document.getElementById('totalAvailable').textContent = formatBytes(totalAvailable);

        createDiskUsageChart(data);
        createFileTypesChart(data);
        updateDiskSummary(data.disks || []);
        updateTopFilesTable(data.topFiles, data.totalSize);
        updateRecentFilesTable(data.recentFiles);
        updateTopDirsTable(data.topDirs, data.totalSize);
        createFileAgeChart(data.recentFiles || []);
        updateFileTypeStats(data.fileTypes || []);
        document.getElementById('scanStatus').textContent = '扫描完成';
        const endTime = new Date();
        document.getElementById('scanEndTime').textContent = formatDate(endTime);
        const duration = (endTime - scanStartTime) / 1000;
        document.getElementById('scanDuration').textContent = 
            duration < 60 ? `${duration.toFixed(1)}秒` : `${Math.floor(duration / 60)}分${Math.floor(duration % 60)}秒`;
    } catch (error) {
        document.getElementById('scanStatus').textContent = '扫描失败';
        console.error('Error:', error);
        let errorMessage = error.message;
        if (error.message === 'Failed to fetch') {
            errorMessage = '无法连接到服务器，请确保服务器正在运行并且可以访问';
        }
        alert('扫描错误: ' + errorMessage);
    } finally {
        loadingOverlay.style.display = 'none';
        progressSource.close();
    }
});

// 鼠标跟随效果
document.addEventListener('DOMContentLoaded', () => {
    const cursor = document.querySelector('.cursor');
    let isMoving = false;
    let animationFrame;

    function updateCursorPosition(e) {
        if (!isMoving) {
            isMoving = true;
            animationFrame = requestAnimationFrame(() => {
                cursor.style.left = e.clientX + 'px';
                cursor.style.top = e.clientY + 'px';
                isMoving = false;
            });
        }
    }

    // 鼠标移动时更新光晕位置
    document.addEventListener('mousemove', updateCursorPosition);

    // 清理动画帧
    document.addEventListener('visibilitychange', () => {
        if (document.hidden && animationFrame) {
            cancelAnimationFrame(animationFrame);
            isMoving = false;
        }
    });

    // 添加鼠标悬停效果
    document.addEventListener('mouseover', (e) => {
        if (e.target.matches('button, a, [role="button"], th, td')) {
            cursor.classList.add('hover');
        }
    });

    document.addEventListener('mouseout', (e) => {
        if (e.target.matches('button, a, [role="button"], th, td')) {
            cursor.classList.remove('hover');
        }
    });

    // 确保鼠标指针在页面加载时可见
    document.addEventListener('mouseenter', () => {
        cursor.style.opacity = '1';
    });

    // 鼠标离开页面时隐藏指针
    document.addEventListener('mouseleave', () => {
        cursor.style.opacity = '0';
    });
});