fix: 修复收藏夹列表加载失败 + 收藏按钮改为弹窗选择收藏夹

- settings/favorites 收藏夹列表加载失败:escapeHTML 在 energy Tab 闭包内,收藏夹 Tab 无法访问导致 ReferenceError,修复为本地 esc() 函数
- settings 创建/删除收藏夹请求缺少 CSRF Token(403),统一使用 fetch + X-CSRF-Token 头
- API 错误时显示实际错误信息而非吞掉显示"暂无收藏夹"
- 文章详情页收藏按钮:点击弹出选择收藏夹弹窗,列出所有收藏夹,已收藏的文章高亮显示
- 弹窗支持原地新建收藏夹并立即收藏(一键创建+收藏)
- 新增收藏夹弹窗 CSS 样式(.fav-overlay/.fav-modal/.fav-folder-option 等)
This commit is contained in:
2026-06-01 17:58:35 +08:00
parent 4d212a8f8a
commit ae98d33edf
3 changed files with 464 additions and 65 deletions

View File

@ -85,6 +85,25 @@
</div>
</div>
</div>
<!-- 选择收藏夹弹窗 -->
<div class="fav-overlay" id="favOverlay" style="display:none">
<div class="fav-modal">
<div class="fav-modal-header">
<h3>选择收藏夹</h3>
<button class="fav-close" id="favClose">&times;</button>
</div>
<div class="fav-modal-body">
<div class="fav-folder-list" id="favFolderCheckList">
<div class="fav-loading">加载中...</div>
</div>
<div class="fav-new-folder">
<input type="text" class="fav-new-input" id="favNewInput" placeholder="新建收藏夹..." maxlength="50">
<button class="fav-new-btn" id="favNewConfirm">创建并收藏</button>
</div>
</div>
</div>
</div>
{{end}}
<!-- 评论区 -->
@ -345,59 +364,253 @@
</script>
<script>
// ========== 收藏按钮 ==========
// ========== 收藏按钮(弹窗选择收藏夹)==========
(function() {
var favBtn = document.getElementById('favBtn');
var favCountEl = document.getElementById('favCount');
var container = document.getElementById('postReactions');
var overlay = document.getElementById('favOverlay');
var closeBtn = document.getElementById('favClose');
var folderListEl = document.getElementById('favFolderCheckList');
var newInput = document.getElementById('favNewInput');
var newBtn = document.getElementById('favNewConfirm');
if (!favBtn || !container) return;
var postId = container.dataset.postId;
var csrfMeta = document.querySelector('meta[name="csrf-token"]');
var csrfToken = csrfMeta ? csrfMeta.getAttribute('content') : '';
var isFavorited = false;
var currentFolderId = null;
var loading = false;
// 页面加载时获取收藏状态
fetch('/api/posts/' + postId + '/folder-status')
.then(function(r) { return r.json(); })
.then(function(d) {
if (d.success && d.data && d.data.favorited) {
favBtn.classList.add('active');
}
})
.catch(function() {});
favBtn.addEventListener('click', function() {
favBtn.disabled = true;
fetch('/api/posts/' + postId + '/favorite', {
method: 'POST',
headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrfToken }
})
.then(function(r) {
if (r.status === 401) { window.location.href = '/login?redirect=/posts/' + postId; return null; }
function api(method, url, data) {
var opts = { method: method, headers: { 'Content-Type': 'application/json' } };
if (csrfToken) opts.headers['X-CSRF-Token'] = csrfToken;
if (data) opts.body = JSON.stringify(data);
return fetch(url, opts).then(function(r) {
if (r.status === 401) { window.location.href = '/login?redirect=/posts/' + postId; throw new Error('unauthorized'); }
return r.json();
})
.then(function(d) {
favBtn.disabled = false;
if (!d) return;
if (d.success) {
var isFav = d.data && d.data.favorited;
if (isFav) {
favBtn.classList.add('active');
});
}
// 更新按钮状态
function updateBtn(favorited) {
isFavorited = favorited;
if (favorited) {
favBtn.classList.add('active');
} else {
favBtn.classList.remove('active');
currentFolderId = null;
}
}
// 加载收藏状态
function loadStatus() {
return fetch('/api/posts/' + postId + '/folder-status')
.then(function(r) { return r.json(); })
.then(function(d) {
if (d.success && d.data && d.data.favorited) {
currentFolderId = d.data.folder_id;
updateBtn(true);
}
})
.catch(function() {});
}
// HTML 转义
function esc(s) {
if (!s) return '';
var d = document.createElement('div');
d.textContent = s;
return d.innerHTML;
}
// 渲染收藏夹列表
function renderFolderList(folders) {
if (!folders || folders.length === 0) {
folderListEl.innerHTML = '<div class="fav-empty">暂无收藏夹,请在下方创建</div>';
return;
}
var html = '';
folders.forEach(function(f) {
var isActive = currentFolderId === f.id;
html += '<div class="fav-folder-option' + (isActive ? ' active' : '') + '" data-id="' + f.id + '">'
+ '<span class="fav-folder-opt-name">' + esc(f.name) + (f.is_default ? ' <small>(默认)</small>' : '') + '</span>'
+ '<span class="fav-folder-opt-count">' + (f.item_count || 0) + ' 篇</span>'
+ '</div>';
});
folderListEl.innerHTML = html;
}
// 显示弹窗
function showModal() {
if (!overlay) { handleNoModal(); return; }
loading = true;
overlay.style.display = 'flex';
folderListEl.innerHTML = '<div class="fav-loading">加载中...</div>';
api('GET', '/api/folders')
.then(function(d) {
var folders = (d.success && d.data && d.data.folders) ? d.data.folders : [];
renderFolderList(folders);
loading = false;
})
.catch(function() {
folderListEl.innerHTML = '<div class="fav-loading fav-error">加载失败,请重试</div>';
loading = false;
});
}
// 关闭弹窗
function hideModal() {
if (overlay) overlay.style.display = 'none';
loading = false;
}
// 无弹窗回退(未登录跳转)
function handleNoModal() {
if (!csrfToken) {
window.location.href = '/login?redirect=/posts/' + postId;
return;
}
// 无弹窗兜底:直接 toggle
favBtn.disabled = true;
api('POST', '/api/posts/' + postId + '/favorite')
.then(function(d) {
favBtn.disabled = false;
if (d.success) {
var f = d.data && d.data.favorited;
updateBtn(f);
if (favCountEl && d.data && typeof d.data.favorites_count === 'number') {
favCountEl.textContent = d.data.favorites_count;
} else if (favCountEl) {
var cur = parseInt(favCountEl.textContent) || 0;
favCountEl.textContent = f ? cur + 1 : Math.max(0, cur - 1);
}
}
})
.catch(function() { favBtn.disabled = false; });
}
// 收藏到指定收藏夹
function addToFolder(folderId) {
if (loading) return;
loading = true;
api('POST', '/api/folders/' + folderId + '/posts', { post_id: parseInt(postId) })
.then(function(d) {
loading = false;
if (d.success) {
currentFolderId = folderId;
updateBtn(true);
if (favCountEl) favCountEl.textContent = (parseInt(favCountEl.textContent) || 0) + 1;
hideModal();
} else {
favBtn.classList.remove('active');
alert(d.message || '操作失败');
}
if (favCountEl && d.data && typeof d.data.favorites_count === 'number') {
favCountEl.textContent = d.data.favorites_count;
} else if (favCountEl) {
var cur = parseInt(favCountEl.textContent) || 0;
favCountEl.textContent = isFav ? cur + 1 : Math.max(0, cur - 1);
})
.catch(function() { loading = false; });
}
// 取消收藏
function removeFromFolder(folderId) {
if (loading) return;
if (!confirm('确定取消收藏吗?')) return;
loading = true;
api('DELETE', '/api/folders/' + folderId + '/posts/' + postId)
.then(function(d) {
loading = false;
if (d.success) {
currentFolderId = null;
updateBtn(false);
if (favCountEl) favCountEl.textContent = Math.max(0, (parseInt(favCountEl.textContent) || 0) - 1);
hideModal();
} else {
alert(d.message || '操作失败');
}
} else {
alert(d.message || '操作失败');
}
})
.catch(function() { favBtn.disabled = false; });
})
.catch(function() { loading = false; });
}
// 创建收藏夹并收藏
function createAndAdd(name) {
if (loading) return;
loading = true;
newBtn.disabled = true;
newBtn.textContent = '创建中...';
api('POST', '/api/folders', { name: name, description: '', is_public: false })
.then(function(d) {
if (!d.success) {
loading = false;
newBtn.disabled = false;
newBtn.textContent = '创建并收藏';
alert(d.message || '创建失败');
return;
}
var newId = d.data && d.data.id;
return api('POST', '/api/folders/' + newId + '/posts', { post_id: parseInt(postId) })
.then(function(d2) {
loading = false;
newBtn.disabled = false;
newBtn.textContent = '创建并收藏';
if (d2.success) {
currentFolderId = newId;
updateBtn(true);
if (favCountEl) favCountEl.textContent = (parseInt(favCountEl.textContent) || 0) + 1;
hideModal();
} else {
alert(d2.message || '操作失败');
}
});
})
.catch(function() {
loading = false;
newBtn.disabled = false;
newBtn.textContent = '创建并收藏';
});
}
// 事件:点击收藏按钮 → 打开弹窗
favBtn.addEventListener('click', function() {
if (!csrfToken) { window.location.href = '/login?redirect=/posts/' + postId; return; }
showModal();
});
// 事件:关闭弹窗
if (closeBtn) closeBtn.addEventListener('click', hideModal);
if (overlay) overlay.addEventListener('click', function(e) {
if (e.target === overlay) hideModal();
});
// 事件:点击收藏夹选项
if (folderListEl) {
folderListEl.addEventListener('click', function(e) {
var option = e.target.closest('.fav-folder-option');
if (!option) return;
var folderId = parseInt(option.getAttribute('data-id'));
if (isNaN(folderId)) return;
if (currentFolderId === folderId) {
removeFromFolder(folderId);
} else {
addToFolder(folderId);
}
});
}
// 事件:新建收藏夹
if (newBtn && newInput) {
newBtn.addEventListener('click', function() {
var name = newInput.value.trim();
if (!name) { alert('请输入收藏夹名称'); return; }
if (name.length > 50) { alert('收藏夹名称不能超过 50 个字符'); return; }
createAndAdd(name);
});
newInput.addEventListener('keydown', function(e) {
if (e.key === 'Enter') newBtn.click();
});
}
// 初始化
loadStatus();
})();
</script>

View File

@ -1032,11 +1032,31 @@
var createBtn = document.getElementById('createFolderBtn');
if (!listEl) return;
var csrfMeta = document.querySelector('meta[name="csrf-token"]');
var csrfToken = csrfMeta ? csrfMeta.getAttribute('content') : '';
function esc(s) {
var d = document.createElement('div');
d.textContent = s || '';
return d.innerHTML;
}
function api(method, url, data) {
var opts = { method: method, headers: { 'Content-Type': 'application/json' } };
if (csrfToken) opts.headers['X-CSRF-Token'] = csrfToken;
if (data) opts.body = JSON.stringify(data);
return fetch(url, opts).then(function (r) { return r.json(); });
}
function loadFolders() {
fetch('/api/folders')
.then(function (r) { return r.json(); })
listEl.innerHTML = '<div class="energy-log-empty">加载中...</div>';
api('GET', '/api/folders')
.then(function (d) {
if (!d.success || !d.data || !d.data.folders || d.data.folders.length === 0) {
if (!d.success) {
listEl.innerHTML = '<div class="energy-log-empty">' + esc(d.message || '加载失败') + '</div>';
return;
}
if (!d.data || !d.data.folders || d.data.folders.length === 0) {
listEl.innerHTML = '<div class="energy-log-empty">暂无收藏夹</div>';
return;
}
@ -1046,7 +1066,7 @@
var pub = f.is_public ? '公开' : '私密';
html += '<div class="fav-folder-card">'
+ '<div class="fav-folder-info">'
+ '<span class="fav-folder-name">' + escapeHTML(f.name) + isDefault + '</span>'
+ '<span class="fav-folder-name">' + esc(f.name) + isDefault + '</span>'
+ '<span class="fav-folder-meta">' + (f.item_count || 0) + ' 篇文章 · ' + pub + '</span>'
+ '</div>'
+ '<div class="fav-folder-actions">'
@ -1056,33 +1076,27 @@
});
listEl.innerHTML = html;
// 绑定删除按钮
listEl.querySelectorAll('.fav-folder-del').forEach(function (btn) {
btn.addEventListener('click', function () {
var id = btn.getAttribute('data-id');
if (!confirm('确定要删除此收藏夹?其中的收藏内容也将被清除。')) return;
var xhr = new XMLHttpRequest();
xhr.open('DELETE', '/api/folders/' + id, true);
xhr.onreadystatechange = function () {
if (xhr.readyState !== 4) return;
try {
var r = JSON.parse(xhr.responseText);
api('DELETE', '/api/folders/' + id)
.then(function (r) {
if (r.success) {
showSettingsToast('收藏夹已删除');
loadFolders();
} else {
showSettingsToast(r.message || '删除失败', true);
}
} catch (e) {
})
.catch(function () {
showSettingsToast('删除失败', true);
}
};
xhr.send();
});
});
});
})
.catch(function () {
listEl.innerHTML = '<div class="energy-log-empty">加载失败</div>';
listEl.innerHTML = '<div class="energy-log-empty">加载失败,请刷新页面重试</div>';
});
}
@ -1094,24 +1108,18 @@
showSettingsToast('收藏夹名称不能超过 50 个字符', true);
return;
}
var xhr = new XMLHttpRequest();
xhr.open('POST', '/api/folders', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function () {
if (xhr.readyState !== 4) return;
try {
var r = JSON.parse(xhr.responseText);
api('POST', '/api/folders', { name: name.trim(), description: '', is_public: false })
.then(function (r) {
if (r.success) {
showSettingsToast('收藏夹已创建');
loadFolders();
} else {
showSettingsToast(r.message || '创建失败', true);
}
} catch (e) {
})
.catch(function () {
showSettingsToast('创建失败', true);
}
};
xhr.send(JSON.stringify({ name: name.trim(), description: '', is_public: false }));
});
});
}

View File

@ -790,6 +790,184 @@
font-weight: 500;
}
/* ========== 选择收藏夹弹窗 ========== */
.fav-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.45);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}
.fav-modal {
background: #fff;
border-radius: 12px;
width: 400px;
max-width: 92vw;
max-height: 80vh;
display: flex;
flex-direction: column;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
overflow: hidden;
}
.fav-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 24px 16px;
border-bottom: 1px solid #f0f0f0;
flex-shrink: 0;
}
.fav-modal-header h3 {
margin: 0;
font-size: 18px;
font-weight: 600;
color: #111827;
}
.fav-close {
background: none;
border: none;
font-size: 24px;
color: #9ca3af;
cursor: pointer;
padding: 0;
line-height: 1;
}
.fav-close:hover {
color: #374151;
}
.fav-modal-body {
padding: 16px 24px;
overflow-y: auto;
flex: 1;
}
.fav-loading {
text-align: center;
padding: 24px 0;
font-size: 14px;
color: #9ca3af;
}
.fav-loading.fav-error {
color: #ef4444;
}
.fav-empty {
text-align: center;
padding: 24px 0;
font-size: 14px;
color: #9ca3af;
}
.fav-folder-list {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 16px;
}
.fav-folder-option {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 14px;
border-radius: 8px;
border: 1px solid #e5e7eb;
cursor: pointer;
transition: all 0.15s ease;
}
.fav-folder-option:hover {
border-color: #f59e0b;
background: #fffbeb;
}
.fav-folder-option.active {
border-color: #f59e0b;
background: #fef3c7;
font-weight: 500;
}
.fav-folder-option.active::after {
content: "✓";
color: #f59e0b;
font-weight: 700;
font-size: 16px;
}
.fav-folder-opt-name {
font-size: 14px;
color: #1f2937;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-right: 8px;
}
.fav-folder-opt-name small {
font-weight: 400;
color: #9ca3af;
}
.fav-folder-opt-count {
font-size: 12px;
color: #9ca3af;
flex-shrink: 0;
}
.fav-new-folder {
display: flex;
gap: 8px;
align-items: center;
}
.fav-new-input {
flex: 1;
padding: 10px 14px;
border: 1px solid #d1d5db;
border-radius: 8px;
font-size: 14px;
font-family: inherit;
outline: none;
transition: border-color 0.15s;
}
.fav-new-input:focus {
border-color: #f59e0b;
box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.15);
}
.fav-new-btn {
padding: 10px 16px;
border: none;
border-radius: 8px;
background: #f59e0b;
color: #fff;
font-size: 13px;
font-weight: 500;
font-family: inherit;
cursor: pointer;
transition: background 0.15s;
white-space: nowrap;
}
.fav-new-btn:hover {
background: #d97706;
}
.fav-new-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* ========== 评论区 ========== */
.comments-section {
max-width: 800px;