notification.js

// 计划通知系统
class NotificationSystem {
    constructor() {
        this.notifications = [];
        this.lastCheckTime = new Date().getTime();
        this.checkInterval = 30000; // 30秒检查一次
        this.initNotificationSystem();
    }

    initNotificationSystem() {
        // 创建通知容器
        this.createNotificationContainer();
        
        // 启动轮询
        this.startPolling();
        
        // 注册浏览器通知权限（如果支持）
        this.requestNotificationPermission();
    }

    createNotificationContainer() {
        // 检查是否已存在通知容器
        if (document.getElementById('notification-container')) {
            return;
        }
        
        // 创建通知容器
        const container = document.createElement('div');
        container.id = 'notification-container';
        container.style.position = 'fixed';
        container.style.bottom = '20px';
        container.style.right = '20px';
        container.style.zIndex = '9999';
        container.style.width = '300px';
        container.style.maxHeight = '80vh';
        container.style.overflowY = 'auto';
        document.body.appendChild(container);
        
        // 添加样式
        const style = document.createElement('style');
        style.textContent = `
            .notification {
                background-color: white;
                border-radius: 8px;
                box-shadow: 0 4px 12px rgba(0,0,0,0.15);
                margin-bottom: 10px;
                padding: 15px;
                animation: slideIn 0.3s ease-out;
                position: relative;
                border-left: 4px solid #4a90e2;
            }
            
            .notification.warning {
                border-left-color: #f39c12;
            }
            
            .notification.error {
                border-left-color: #e74c3c;
            }
            
            .notification-title {
                font-weight: bold;
                margin-bottom: 5px;
                padding-right: 20px;
            }
            
            .notification-message {
                white-space: pre-line;
                font-size: 14px;
            }
            
            .notification-close {
                position: absolute;
                top: 10px;
                right: 10px;
                cursor: pointer;
                font-size: 16px;
                color: #999;
            }
            
            .notification-close:hover {
                color: #333;
            }
            
            @keyframes slideIn {
                from { transform: translateX(100%); opacity: 0; }
                to { transform: translateX(0); opacity: 1; }
            }
            
            @keyframes fadeOut {
                from { opacity: 1; }
                to { opacity: 0; }
            }
        `;
        document.head.appendChild(style);
    }

    startPolling() {
        // 立即检查一次
        this.checkForNotifications();
        
        // 设置定时检查
        setInterval(() => {
            this.checkForNotifications();
        }, this.checkInterval);
    }

    async checkForNotifications() {
        try {
            const response = await fetch('/api/notifications');
            if (!response.ok) {
                console.error('获取通知失败:', response.statusText);
                return;
            }
            
            const data = await response.json();
            if (data.status === 'success' && data.notifications) {
                // 处理新通知
                this.processNotifications(data.notifications);
            }
        } catch (error) {
            console.error('检查通知时出错:', error);
        }
    }

    processNotifications(notifications) {
        // 筛选出新通知
        const currentTime = new Date().getTime();
        const newNotifications = notifications.filter(notification => {
            const notificationTime = new Date(notification.timestamp).getTime();
            return notificationTime > this.lastCheckTime;
        });
        
        // 更新最后检查时间
        this.lastCheckTime = currentTime;
        
        // 显示新通知
        newNotifications.forEach(notification => {
            this.showNotification(
                notification.title,
                notification.message,
                notification.notificationType
            );
        });
    }

    showNotification(title, message, type = 'info') {
        // 尝试使用系统通知
        this.showBrowserNotification(title, message);
        
        // 同时显示页内通知
        this.showInPageNotification(title, message, type);
    }

    showBrowserNotification(title, message) {
        // 检查浏览器通知是否可用且获得授权
        if ('Notification' in window && Notification.permission === 'granted') {
            // 创建通知
            new Notification(title, {
                body: message,
                icon: '/favicon.ico' // 可以替换为实际的图标路径
            });
        }
    }

    showInPageNotification(title, message, type = 'info') {
        const container = document.getElementById('notification-container');
        if (!container) return;
        
        // 创建通知元素
        const notification = document.createElement('div');
        notification.className = `notification ${type}`;
        
        // 添加标题
        const titleElement = document.createElement('div');
        titleElement.className = 'notification-title';
        titleElement.textContent = title;
        notification.appendChild(titleElement);
        
        // 添加消息
        const messageElement = document.createElement('div');
        messageElement.className = 'notification-message';
        messageElement.textContent = message;
        notification.appendChild(messageElement);
        
        // 添加关闭按钮
        const closeButton = document.createElement('div');
        closeButton.className = 'notification-close';
        closeButton.innerHTML = '×';
        closeButton.addEventListener('click', () => {
            this.removeNotification(notification);
        });
        notification.appendChild(closeButton);
        
        // 添加到容器
        container.appendChild(notification);
        
        // 自动关闭定时器（8秒后）
        setTimeout(() => {
            if (notification.parentNode === container) {
                this.removeNotification(notification);
            }
        }, 8000);
    }

    removeNotification(notification) {
        // 添加淡出动画
        notification.style.animation = 'fadeOut 0.3s ease-out';
        
        // 动画结束后移除元素
        setTimeout(() => {
            if (notification.parentNode) {
                notification.parentNode.removeChild(notification);
            }
        }, 300);
    }

    requestNotificationPermission() {
        // 检查浏览器是否支持通知
        if ('Notification' in window) {
            // 已授权
            if (Notification.permission === 'granted') {
                return;
            }
            
            // 未决定，请求权限
            if (Notification.permission !== 'denied') {
                Notification.requestPermission();
            }
        }
    }
}

// 页面加载时初始化通知系统
document.addEventListener('DOMContentLoaded', () => {
    window.notificationSystem = new NotificationSystem();
});