🚚 移动前端

fsys/public/js/index.js

@@ -0,0 +1,103 @@
+/* index.js — 社区首页逻辑
+ *
+ * 登录态检测：POST /whoami（HttpOnly q4_token Cookie 自动携带，JS 不经手 Token）
+ * 已登录：显示头像/用户名与"进入笔记/退出"按钮，首屏 CTA 指向笔记页
+ * 未登录：显示"登录/注册"，首屏 CTA 指向登录页
+ */
+(function () {
+	'use strict';
+
+	const nameEl = document.getElementById('name');
+	const avatarEl = document.getElementById('avatar');
+	const enterBtn = document.getElementById('enterBtn');
+	const logoutBtn = document.getElementById('logoutBtn');
+	const loginBtn = document.getElementById('loginBtn');
+	const registerBtn = document.getElementById('registerBtn');
+	const ctaBtns = document.querySelectorAll('[data-cta]'); // 首屏与页尾 CTA 按钮
+	const logoEl = document.getElementById('logo');
+
+	let loggedIn = false;
+
+	function go(url) { window.location.href = url; }
+
+	logoEl.addEventListener('click', () => go('index.html'));
+	enterBtn.addEventListener('click', () => go('dnfs.html'));
+	loginBtn.addEventListener('click', () => go('login.html'));
+	registerBtn.addEventListener('click', () => go('register.html'));
+	ctaBtns.forEach(function (btn) {
+		btn.addEventListener('click', () => go(loggedIn ? 'dnfs.html' : 'login.html'));
+	});
+
+	async function checkLogin() {
+		try {
+			const res = await fetch('/whoami', { method: 'POST' });
+			if (!res.ok) return;
+			const data = await res.json();
+			if (data && data.login && data.user) {
+				loggedIn = true;
+				nameEl.textContent = String(data.user);
+				nameEl.style.display = '';
+				avatarEl.style.display = '';
+				enterBtn.style.display = '';
+				logoutBtn.style.display = '';
+				loginBtn.style.display = 'none';
+				registerBtn.style.display = 'none';
+				ctaBtns.forEach(function (btn) { btn.textContent = '进入我的知识树'; });
+			}
+		} catch (e) {
+			console.warn('index: 登录态检测失败', e.message);
+		}
+	}
+
+	logoutBtn.addEventListener('click', async function () {
+		try {
+			await fetch('/logout', { method: 'POST' });
+		} catch (e) {
+			console.warn('index: 退出登录请求异常', e.message);
+		}
+		location.reload();
+	});
+
+	checkLogin();
+})();
+
+/* ===== 视觉增强：滚动渐显 + 卡片光标光斑（装饰性，与登录逻辑解耦） ===== */
+(function () {
+	'use strict';
+
+	const reduceMotion = !window.matchMedia('(prefers-reduced-motion: no-preference)').matches;
+
+	/* 滚动进入视口渐显：由 JS 添加 .reveal 隐藏初始态，无 JS / 减弱动效时内容天然可见 */
+	if (!reduceMotion && 'IntersectionObserver' in window) {
+		const targets = document.querySelectorAll('.section-eyebrow, .section-title, .section-sub, .feature-card, .site-intro, .about-stats, .quick-links, .cta-band');
+		targets.forEach(function (el, i) {
+			el.classList.add('reveal');
+			el.style.transitionDelay = (i % 4) * 70 + 'ms';
+		});
+		const io = new IntersectionObserver(function (entries) {
+			entries.forEach(function (entry) {
+				if (!entry.isIntersecting) return;
+				const el = entry.target;
+				el.classList.add('reveal-in');
+				io.unobserve(el);
+				/* 动画结束后移除类与延迟，把 transition 控制权交还 hover 等交互样式 */
+				setTimeout(function () {
+					el.classList.remove('reveal', 'reveal-in');
+					el.style.transitionDelay = '';
+				}, 900);
+			});
+		}, { threshold: 0.15, rootMargin: '0px 0px -8% 0px' });
+		targets.forEach(function (el) { io.observe(el); });
+	}
+
+	/* 特性卡片光标光斑：鼠标位置写入 CSS 变量，由 index.css 径向渐变消费（仅精确指针设备） */
+	if (window.matchMedia('(hover: hover) and (pointer: fine)').matches) {
+		document.querySelectorAll('.feature-card').forEach(function (card) {
+			card.addEventListener('mousemove', function (e) {
+				const rect = card.getBoundingClientRect();
+				card.style.setProperty('--mx', (e.clientX - rect.left) + 'px');
+				card.style.setProperty('--my', (e.clientY - rect.top) + 'px');
+			});
+		});
+	}
+})();