/** * 全局工具函数 */ 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; // 暴露到全局,方便其他脚本使用 });