/**
* 留言板功能 - 基于 Flask API
*/
(function () {
'use strict';
// Flask API 地址
const API_BASE_URL = 'http://localhost:8360';
const PAGE_SIZE = 10;
let currentPage = 1;
let hasMore = true;
let isLoading = false;
let allComments = []; // 存储所有已加载的留言
// DOM 元素
const guestbookBtn = document.getElementById('guestbook-btn');
const guestbookPreview = document.getElementById('guestbook-preview');
const guestbookFullModal = document.getElementById('guestbook-full-modal');
const guestbookClose = document.getElementById('guestbook-close');
const guestbookBody = document.querySelector('#guestbook-full-modal .guestbook-body');
const previewBody = document.querySelector('.preview-body');
// Toast 容器
let toastContainer = document.querySelector('.toast-container');
if (!toastContainer) {
toastContainer = document.createElement('div');
toastContainer.className = 'toast-container';
document.body.appendChild(toastContainer);
}
// 表单元素（需要动态获取，因为表单会被重新渲染）
let nicknameInput, emailInput, linkInput, contentInput, submitBtn;
// 显示 Toast 提示
function showToast(message, type = 'success', duration = 2000) {
const toast = document.createElement('div');
toast.className = `toast ${type}`;
toast.textContent = message;
toastContainer.appendChild(toast);
// 触发动画
setTimeout(() => {
toast.classList.add('show');
}, 10);
// 自动消失
setTimeout(() => {
toast.classList.remove('show');
setTimeout(() => {
toast.remove();
}, 300);
}, duration);
}
// 初始化
function init() {
if (!guestbookBtn || !guestbookFullModal) return;
// 点击按钮打开完整弹窗
guestbookBtn.addEventListener('click', openFullModal);
// 关闭按钮
guestbookClose.addEventListener('click', closeFullModal);
// 点击背景关闭
guestbookFullModal.addEventListener('click', function(e) {
if (e.target === guestbookFullModal) {
closeFullModal();
}
});
// ESC 键关闭
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && guestbookFullModal.classList.contains('active')) {
closeFullModal();
}
});
// 预览面板触底加载
if (previewBody) {
previewBody.addEventListener('scroll', handlePreviewScroll);
}
// 表单提交事件使用事件委托
guestbookBody.addEventListener('submit', function(e) {
if (e.target && e.target.id === 'guestbook-form') {
handleSubmit(e);
}
});
// 页面加载时自动加载数据（用于 Hover 预览）
loadGuestbook(true);
}
// 切换留言板显示/隐藏
function toggleGuestbook() {
if (guestbookFullModal.classList.contains('active')) {
closeFullModal();
} else {
openFullModal();
}
}
// 打开完整弹窗
function openFullModal() {
guestbookFullModal.classList.add('active');
document.body.style.overflow = 'hidden';
// 首次打开时加载留言
if (!document.querySelector('.guestbook-list')) {
loadGuestbook(true);
}
}
// 关闭完整弹窗
function closeFullModal() {
guestbookFullModal.classList.remove('active');
document.body.style.overflow = '';
}
// 点击模态框背景关闭
function handleModalClick(e) {
if (e.target === guestbookModal) {
closeGuestbook();
}
}
// 加载留言列表
async function loadGuestbook(reset = false) {
if (isLoading || (!hasMore && !reset)) return;
isLoading = true;
if (reset) {
currentPage = 1;
hasMore = true;
guestbookBody.innerHTML = '正在加载留言...
';
} else {
// 添加加载更多按钮状态
const loadMoreBtn = document.querySelector('.load-more-btn');
if (loadMoreBtn) {
loadMoreBtn.disabled = true;
loadMoreBtn.textContent = '加载中...';
}
}
try {
const response = await fetch(`${API_BASE_URL}/api/comment?path=www.iletter.top&pageSize=${PAGE_SIZE}&page=${currentPage}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
});
if (!response.ok) {
throw new Error('Network response was not ok');
}
const result = await response.json();
const comments = result.data.data || [];
const totalCount = result.data.count || 0;
const totalPages = result.data.totalPages || 0;
// 判断是否还有更多数据（根据总页数）
hasMore = currentPage < totalPages;
// 累积所有留言
if (reset) {
allComments = comments;
} else {
allComments = allComments.concat(comments);
}
if (reset) {
renderGuestbook(comments, totalCount);
} else {
appendGuestbook(comments);
}
} catch (error) {
console.error('加载留言失败:', error);
if (reset) {
guestbookBody.innerHTML = `加载留言失败，请稍后重试
`;
}
} finally {
isLoading = false;
}
}
// 渲染留言列表
function renderGuestbook(comments, totalCount) {
let html = '';
// 先渲染表单（放在顶部）
html += renderForm();
if (!comments || comments.length === 0) {
html += `暂无留言，快来抢沙发吧！
`;
guestbookBody.innerHTML = html;
return;
}
html += '';
comments.forEach(comment => {
html += renderCommentItem(comment);
});
html += '
';
// 判断是否还有更多数据
if (hasMore) {
html += `点击加载更多 `;
} else {
html += `已显示全部
`;
}
guestbookBody.innerHTML = html;
// 同时更新 Hover 预览面板（使用累积的所有留言）
renderPreview(allComments);
}
// 渲染 Hover 预览面板
function renderPreview(comments) {
if (!previewBody || !comments || comments.length === 0) return;
let html = '';
comments.forEach(comment => {
const date = new Date(comment.time);
const timeStr = formatDate(date);
html += ``;
html += `
${escapeHtml(comment.nick)}
`;
// 提取纯文本内容（去除 HTML 标签）
const tempDiv = document.createElement('div');
tempDiv.innerHTML = comment.comment || '';
const textContent = tempDiv.textContent || tempDiv.innerText || '';
html += `
${escapeHtml(textContent)}
`;
html += `
${timeStr}
`;
html += `
已全部加载
`;
}
previewBody.innerHTML = html;
}
// 处理预览面板滚动事件
function handlePreviewScroll(e) {
const target = e.target;
const scrollTop = target.scrollTop;
const scrollHeight = target.scrollHeight;
const clientHeight = target.clientHeight;
// 距离底部 50px 时触发加载
if (scrollHeight - scrollTop - clientHeight < 50) {
if (!isLoading && hasMore) {
currentPage++;
loadGuestbook(false);
}
}
}
// 追加留言
function appendGuestbook(comments) {
const listContainer = document.querySelector('.guestbook-list');
const loadMoreBtn = document.querySelector('.load-more-btn');
const allDataTip = document.querySelector('.guestbook-body > div:last-child');
if (!listContainer) return;
comments.forEach(comment => {
const div = document.createElement('div');
div.innerHTML = renderCommentItem(comment);
listContainer.appendChild(div.firstElementChild);
});
// 移除旧的加载更多按钮和提示
if (loadMoreBtn) {
loadMoreBtn.remove();
}
const oldTip = document.querySelector('.load-complete');
if (oldTip) {
oldTip.remove();
}
// 如果还有更多，添加新的加载更多按钮
if (hasMore) {
const btn = document.createElement('button');
btn.className = 'load-more-btn';
btn.textContent = '点击加载更多';
btn.onclick = window.loadMoreGuestbook;
listContainer.after(btn);
} else {
// 没有更多数据，显示提示
const tip = document.createElement('div');
tip.className = 'load-complete';
tip.textContent = '已显示全部';
listContainer.after(tip);
}
// 更新预览面板
renderPreview(allComments);
}
// 渲染单个留言项
function renderCommentItem(comment) {
const date = new Date(comment.time);
const timeStr = formatDate(date);
let html = ``;
html += ``;
// 内容（comment 字段已经是 HTML）
html += `
${comment.comment || ''}
`;
// 底部信息（浏览器、系统、地址）
html += renderCommentFooter(comment);
// 回复列表
if (comment.children && comment.children.length > 0) {
html += `
`;
comment.children.forEach(reply => {
html += renderReplyItem(reply);
});
html += `
`;
}
html += `
`;
html += ``;
html += `
${reply.comment || ''}
`;
html += `
})
`;
}
// 昵称和链接
if (comment.link) {
html += `${escapeHtml(comment.nick)}`;
} else {
html += `${escapeHtml(comment.nick)}`;
}
html += `