2006_WEB/static/js/script.js

/**
 * 全局工具函数
 */
class AppUtilities {
    constructor() {
        this.init();
    }

    /**
     * 初始化应用工具
     */
    init() {
        // 处理时间显示
        this.setupTimeDisplay();

        // 为所有表单添加验证
        this.setupFormValidation();

        // 设置日志自动滚动
        this.setupLogAutoScroll();
    }

    /**
     * 设置日志自动滚动到底部
     */
    setupLogAutoScroll() {
        const logElement = document.getElementById('app-logs');
        if (logElement) {
            // 创建一个MutationObserver来监听日志内容变化
            const observer = new MutationObserver((mutations) => {
                mutations.forEach((mutation) => {
                    if (mutation.type === 'childList' || mutation.type === 'characterData') {
                        // 滚动到底部
                        logElement.scrollTop = logElement.scrollHeight;
                    }
                });
            });

            // 配置观察者
            const config = {
                childList: true,
                characterData: true,
                subtree: true
            };

            // 开始观察
            observer.observe(logElement, config);
        }
    }

    /**
     * 设置时间显示和更新
     */
    setupTimeDisplay() {
        const timeElements = document.querySelectorAll('.current-time');
        if (timeElements.length) {
            this.updateTime();
            setInterval(() => this.updateTime(), 60000); // 每分钟更新一次
        }
    }

    /**
     * 更新时间函数
     */
    updateTime() {
        const now = new Date();
        const formattedTime = now.toLocaleString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit'
        });

        document.querySelectorAll('.current-time').forEach(el => {
            el.textContent = formattedTime;
        });
    }

    /**
     * 表单验证设置
     */
    setupFormValidation() {
        document.querySelectorAll('form').forEach(form => {
            form.addEventListener('submit', (e) => {
                if (!this.validateForm(form.id)) {
                    e.preventDefault();
                    alert('请填写所有必填字段');
                }
            });
        });
    }

    /**
     * 表单验证工具
     * @param {string} formId - 表单ID
     * @returns {boolean} - 表单是否有效
     */
    validateForm(formId) {
        const form = document.getElementById(formId);
        if (!form) return true;

        const requiredFields = form.querySelectorAll('[required]');
        let isValid = true;

        requiredFields.forEach(field => {
            if (!field.value.trim()) {
                isValid = false;
                field.classList.add('invalid');
                setTimeout(() => {
                    field.classList.remove('invalid');
                }, 2000);
            }
        });

        return isValid;
    }
}

// 添加全局的错误提示样式
const style = document.createElement('style');
style.textContent = `
    .invalid {
        border-color: #e74c3c !important;
        animation: shake 0.5s;
    }

    @keyframes shake {
        0%, 100% { transform: translateX(0); }
        10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
        20%, 40%, 60%, 80% { transform: translateX(5px); }
    }
`;
document.head.appendChild(style);

// 页面加载完成后初始化应用工具
document.addEventListener('DOMContentLoaded', () => {
    const appUtils = new AppUtilities();
    window.appUtils = appUtils; // 暴露到全局，方便其他脚本使用
});