qing
ea2717c400
- index.html: hero 新增品牌徽章、节点树装饰 SVG、下滑提示；章节增加 eyebrow 小标题 - index.css: 主按钮渐变+扫光、卡片序号水印+图标点亮、标题渐变流光、点阵底纹、 品牌树描绘动画、关于卡装饰、胶囊快捷链接；全部基于 theme.css 变量，深浅色自适应 - index.js: 追加滚动渐显（IntersectionObserver）与特性卡片光标光斑，与登录逻辑解耦
102 lines
3.7 KiB
JavaScript
102 lines
3.7 KiB
JavaScript
/* 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 ctaBtn = document.getElementById('ctaBtn');
|
||
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'));
|
||
ctaBtn.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';
|
||
ctaBtn.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, .feature-card, .about .site-intro, .quick-links');
|
||
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');
|
||
});
|
||
});
|
||
}
|
||
})();
|