jude-cehua/static/js/login.js

// 登录页面JavaScript逻辑
class LoginManager {
	constructor() {
		this.init();
	}

	init () {
		// 检查登录状态
		this.checkLoginStatus();

		// 绑定事件
		this.bindEvents();
	}

	bindEvents () {
		// 钉钉登录按钮点击事件
		const dingtalkBtn = document.getElementById('dingtalk-login');
		if (dingtalkBtn) {
			dingtalkBtn.addEventListener('click', () => {
				this.loginWithDingtalkOAuth();
			});
		}
	}

	async checkLoginStatus () {
		try {
			const response = await fetch('/api/auth/ping');
			const data = await response.json();

			if (data.authenticated) {
				// 已登录，跳转到主页
				window.location.href = '/';
			}
		} catch (error) {
			console.error('检查登录状态失败:', error);
		}
	}

	async loginWithDingtalkOAuth () {
		try {
			this.showLoginStatus();
			const urlResp = await fetch('/api/auth/dingtalk/login_url');
			const urlData = await urlResp.json();

			if (!urlResp.ok || !urlData.success) {
				this.hideLoginStatus();
				if (urlData.error === 'DingTalk未配置') {
					this.showError('钉钉登录功能暂未启用，请联系管理员配置钉钉OAuth');
				} else {
					this.showError(urlData.error || '钉钉登录失败，请重试');
				}
				return;
			}

			window.location.href = urlData.url;
			this.hideLoginStatus();
		} catch (error) {
			console.error('钉钉登录失败:', error);
			this.showError(error.message || '登录失败，请重试');
			this.hideLoginStatus();
		}
	}

	showError (message) {
		const existingError = document.querySelector('.error-message');
		if (existingError) {
			existingError.remove();
		}

		const errorDiv = document.createElement('div');
		errorDiv.className = 'error-message';
		errorDiv.textContent = message;

		const loginMethods = document.querySelector('.login-methods');
		if (loginMethods) {
			loginMethods.appendChild(errorDiv);
		}

		// 3秒后自动移除错误信息
		setTimeout(() => {
			if (errorDiv.parentNode) {
				errorDiv.parentNode.removeChild(errorDiv);
			}
		}, 3000);
	}

	showLoginStatus () {
		const status = document.getElementById('login-status');
		if (status) {
			status.style.display = 'flex';
		}
	}

	hideLoginStatus () {
		const status = document.getElementById('login-status');
		if (status) {
			status.style.display = 'none';
		}
	}
}

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', () => {
	// 初始化登录管理器
	window.loginManager = new LoginManager();

	// 添加视觉优化效果
	addVisualEffects();
});

// 视觉优化效果函数
function addVisualEffects () {
	// 页面加载动画
	animatePageLoad();

	// 添加鼠标移动视差效果
	addParallaxEffect();

	// 添加按钮点击效果
	addButtonEffects();

	// 添加卡片悬停效果
	addCardHoverEffects();
}

// 页面加载动画
function animatePageLoad () {
	const elements = document.querySelectorAll('.login-card, .floating-shapes .shape');

	elements.forEach((element, index) => {
		element.style.opacity = '0';
		element.style.transform = 'translateY(30px)';

		setTimeout(() => {
			element.style.transition = 'all 0.8s cubic-bezier(0.4, 0, 0.2, 1)';
			element.style.opacity = '1';
			element.style.transform = 'translateY(0)';
		}, index * 100);
	});
}

// 添加视差效果
function addParallaxEffect () {
	const shapes = document.querySelectorAll('.shape');

	document.addEventListener('mousemove', (e) => {
		const mouseX = e.clientX / window.innerWidth;
		const mouseY = e.clientY / window.innerHeight;

		shapes.forEach((shape, index) => {
			const speed = (index + 1) * 0.5;
			const x = (mouseX - 0.5) * speed * 20;
			const y = (mouseY - 0.5) * speed * 20;

			shape.style.transform = `translate(${x}px, ${y}px)`;
		});
	});
}

// 添加按钮效果
function addButtonEffects () {
	const buttons = document.querySelectorAll('.login-btn');

	buttons.forEach(button => {
		button.addEventListener('mousedown', function () {
			this.style.transform = 'scale(0.95)';
		});

		button.addEventListener('mouseup', function () {
			this.style.transform = 'scale(1)';
		});

		button.addEventListener('mouseleave', function () {
			this.style.transform = 'scale(1)';
		});
	});
}

// 添加卡片悬停效果
function addCardHoverEffects () {
	const card = document.querySelector('.login-card');
	const method = document.querySelector('.login-method');

	if (card) {
		card.addEventListener('mouseenter', function () {
			this.style.transform = 'scale(1.02)';
		});

		card.addEventListener('mouseleave', function () {
			this.style.transform = 'scale(1)';
		});
	}

	if (method) {
		method.addEventListener('mouseenter', function () {
			this.style.transform = 'translateY(-4px) scale(1.02)';
		});

		method.addEventListener('mouseleave', function () {
			this.style.transform = 'translateY(0) scale(1)';
		});
	}
}

// 添加触摸设备支持
if ('ontouchstart' in window) {
	document.body.classList.add('touch-device');

	// 为触摸设备优化按钮
	const buttons = document.querySelectorAll('.login-btn');
	buttons.forEach(button => {
		button.addEventListener('touchstart', function () {
			this.style.transform = 'scale(0.95)';
		});

		button.addEventListener('touchend', function () {
			this.style.transform = 'scale(1)';
		});
	});
}

// 性能优化：节流函数
function throttle (func, limit) {
	let inThrottle;
	return function () {
		const args = arguments;
		const context = this;
		if (!inThrottle) {
			func.apply(context, args);
			inThrottle = true;
			setTimeout(() => inThrottle = false, limit);
		}
	}
}

// 优化视差效果性能
const optimizedParallax = throttle(addParallaxEffect, 16);
document.addEventListener('mousemove', optimizedParallax);