${b.cooked || ''}
` + (canDel ? `` : '') + `${b.cooked || ''}
` + (canDel ? `` : '') + `（帖子已被作者删除）
' : p.cooked || ''; cooked = (() => { const tmp = document.createElement('div'); tmp.innerHTML = cooked; tmp.querySelectorAll('a[href]').forEach((a) => { const href = a.getAttribute('href') || ''; const isImageLink = /\.(png|jpe?g|gif|webp|bmp|avif)(\?|#|$)/i.test(href); const isLightbox = a.classList.contains('lightbox'); if (!isImageLink && !isLightbox) { if (!a.getAttribute('target')) a.setAttribute('target', '_blank'); } }); return tmp.innerHTML; })(); const boostsHtml = isDeleted ? '' : renderBoosts(p.boosts || []); const canBoost = !isDeleted && p.can_boost === true; const canDelete = !isDeleted && isME && p.post_number !== 1; const actionsHtml = isDeleted ? '' : `（帖子已被作者删除）
'; postNode.style.opacity = ''; postNode.querySelectorAll( ':scope > .ldp-boosts-list, :scope > .ldp-boost-input-wrap, :scope > .ldp-actions' ).forEach((el) => el.remove()); } /* ============ 7.1 公式渲染（KaTeX） ============ */ /** * Discourse 的 cooked 中公式只是 /${res.cooked || ''}
` + ``; listEl.appendChild(newBubble); } input.value = ''; wrap.classList.remove('open'); const btn = postNode.querySelector(':scope > .ldp-actions > .ldp-boost-btn'); if (btn) btn.disabled = true; if (postNumber === 1) { const fBoost = ctx.scrollRoot.closest('.ldp-modal').querySelector('.ldp-f-boost'); if (fBoost) { fBoost.disabled = true; fBoost.style.opacity = '0.4'; } } } } catch (err) { alert('发射失败：' + err.message); } finally { boostSubmit.disabled = false; } return; } const boostDel = e.target.closest('.ldp-boost-del'); if (boostDel) { const bubble = boostDel.closest('.ldp-boost-bubble'); const boostId = bubble && bubble.dataset.boostId; if (!boostId) return; try { await apiSend(`${BASE}/discourse-boosts/boosts/${boostId}`, 'DELETE'); bubble.remove(); const btn = postNode.querySelector(':scope > .ldp-actions > .ldp-boost-btn'); if (btn) btn.disabled = false; if (postNumber === 1) { const fBoost = ctx.scrollRoot.closest('.ldp-modal').querySelector('.ldp-f-boost'); if (fBoost) { fBoost.disabled = false; fBoost.style.opacity = '1'; } } } catch (err) { alert('删除失败：' + err.message); } return; } const sendBtn = e.target.closest('.ldp-send'); if (sendBtn) { const box = sendBtn.closest('.ldp-replybox'), textarea = box.querySelector('textarea'), raw = textarea.value.trim(); if (!raw) return; if (raw.length < 16) { alert('帖子必须至少为16个字符'); return; } sendBtn.disabled = true; sendBtn.textContent = '发送中…'; try { const data = await apiSend(`${BASE}/posts`, 'POST', { raw, topic_id: ctx.topicId, reply_to_post_number: postNumber, nested_post: true, }); const postData = data && data.post ? data.post : data; if (postData && postData.cooked) { const isTopLevel = postNumber === 1; const newNode = renderPost({ id: postData.id, post_number: postData.post_number, username: postData.username || ME_USERNAME, name: postData.name, avatar_template: postData.avatar_template, cooked: postData.cooked, created_at: postData.created_at || new Date().toISOString(), reply_to_post_number: postNumber, actions_summary: [], boosts: [], can_boost: true, }, !isTopLevel, ctx, isTopLevel ? 0 : 1); newNode.classList.add('ldp-flash'); if (isTopLevel) { ctx.commentsEl.prepend(newNode); newNode.scrollIntoView({ behavior: 'smooth', block: 'center' }); } else { const childrenContainer = postNode.querySelector(':scope > .ldp-children'); if (childrenContainer) { childrenContainer.prepend(newNode); } else { console.warn('Parent post has no .ldp-children container'); } } ctx.nodeMap.set(postData.post_number, newNode); ctx.tracker.observe(newNode); ctx.totalComments = (ctx.totalComments || 0) + 1; updateCommentsHeader(ctx); const tip = box.querySelector('.ldp-reply-tip'); if (tip) { tip.classList.add('show'); setTimeout(() => tip.classList.remove('show'), 1500); } box.classList.remove('open'); textarea.value = ''; } } catch (err) { alert('回复失败：' + err.message); } finally { sendBtn.disabled = false; sendBtn.textContent = '发送'; } return; } }); modal.addEventListener('keydown', (e) => { const spoiler = e.target.closest('.ldp-spoiler'); if (!spoiler || (e.key !== 'Enter' && e.key !== ' ')) return; e.preventDefault(); spoiler.click(); }); } /* ============ 12. 收藏 ============ */ function bindBookmark(btn, topic) { let bookmarked = !!topic.bookmarked, bookmarkId = topic.bookmark_id || null; const sync = () => { btn.classList.toggle('bookmarked', bookmarked); }; sync(); btn.addEventListener('click', async () => { btn.disabled = true; try { if (!bookmarked) { const data = await apiSend(`${BASE}/bookmarks`, 'POST', { bookmarkable_id: topic.id, bookmarkable_type: 'Topic' }); bookmarkId = data && data.id ? data.id : bookmarkId; bookmarked = true; } else if (bookmarkId) { await apiSend(`${BASE}/bookmarks/${bookmarkId}`, 'DELETE'); bookmarked = false; bookmarkId = null; } else { await apiSend(`${BASE}/t/${topic.id}/remove_bookmarks`, 'PUT'); bookmarked = false; } sync(); } catch (err) { alert('收藏操作失败：' + err.message); } finally { btn.disabled = false; } }); } function bindFooterLike(btn, countEl, opPost) { if (!opPost) { btn.disabled = true; return; } const { count, acted, canAct } = likeInfo(opPost); let liked = acted; countEl.textContent = count; btn.classList.toggle('liked', liked); btn.disabled = !(canAct || acted); btn.addEventListener('click', async () => { if (btn.disabled) return; btn.disabled = true; try { if (!liked) { await apiSend(`${BASE}/post_actions`, 'POST', { id: opPost.id, post_action_type_id: 2, flag_topic: false }); liked = true; btn.classList.add('liked'); countEl.textContent = (+countEl.textContent) + 1; } else { await apiSend(`${BASE}/post_actions/${opPost.id}?post_action_type_id=2`, 'DELETE'); liked = false; btn.classList.remove('liked'); countEl.textContent = Math.max(0, (+countEl.textContent) - 1); } } catch (err) { alert('操作失败：' + err.message); } finally { btn.disabled = false; } }); } function updateCommentsHeader(ctx) { if (ctx.countEl) ctx.countEl.textContent = ctx.totalComments ? `（${ctx.totalComments}）` : ''; if (ctx.emptyEl) ctx.emptyEl.style.display = ctx.totalComments ? 'none' : ''; if (ctx.footerReplyCountEl) ctx.footerReplyCountEl.textContent = ctx.totalComments || 0; } /* ============ 13. 定位：递归展开楼中楼并高亮目标 ============ */ function waitForScrollEnd(el, timeoutMs = 1200) { const IDLE_MS = 120; return new Promise((resolve) => { let done = false; let idleTimer = null; const finish = () => { if (done) return; done = true; el.removeEventListener('scroll', onScroll); clearTimeout(idleTimer); clearTimeout(safety); resolve(); }; const onScroll = () => { clearTimeout(idleTimer); idleTimer = setTimeout(finish, IDLE_MS); }; el.addEventListener('scroll', onScroll, { passive: true }); idleTimer = setTimeout(finish, IDLE_MS); const safety = setTimeout(finish, timeoutMs); }); } function resolveTargetPostNumber(targetPostNumber, posts) { const target = Number(targetPostNumber); if (!Number.isFinite(target) || target <= 1) return targetPostNumber; const availableNumbers = (posts || []) .map((post) => Number(post?.post_number)) .filter((postNumber) => Number.isFinite(postNumber) && postNumber >= 1) .sort((a, b) => a - b); if (!availableNumbers.length || availableNumbers.includes(target)) return target; // Discourse 删除或隐藏回复后楼号可能不连续。优先定位到下一个 // 实际可见的楼层；如果已经到末尾，则回退到最近的前一楼。 return availableNumbers.find((postNumber) => postNumber > target) ?? availableNumbers[availableNumbers.length - 1]; } async function fetchPostForLocate(topicId, postNumber, ctx) { const cached = ctx.postMap?.get(postNumber); if (cached) return cached; const data = await fetchJSON(`${BASE}/t/${topicId}.json?post_number=${postNumber}`); const posts = data.post_stream?.posts || []; posts.forEach((post) => { if (ctx.postMap) ctx.postMap.set(post.post_number, post); idToPost.set(post.id, post); }); return posts.find((post) => post.post_number === postNumber) || null; } function ensurePostPlacement(post, ctx) { if (!post || post.post_number === 1) return ctx.nodeMap.get(1) || null; if (ctx.postMap) ctx.postMap.set(post.post_number, post); idToPost.set(post.id, post); let node = ctx.nodeMap.get(post.post_number); if (!node) { attachPost(post, ctx); reflowPending(ctx); node = ctx.nodeMap.get(post.post_number); } if (!node) return null; const parentNumber = +post.reply_to_post_number || 1; if (parentNumber > 1) { const parentNode = ctx.nodeMap.get(parentNumber); const childrenEl = parentNode?.querySelector(':scope > .ldp-children'); if (childrenEl && node.parentElement !== childrenEl) childrenEl.appendChild(node); } else if (node.parentElement !== ctx.commentsEl) { ctx.commentsEl.appendChild(node); } return node; } async function expandTargetAncestorChain(targetPostNumber, ctx) { const targetPost = await fetchPostForLocate(ctx.topicId, targetPostNumber, ctx); if (!targetPost) throw new Error(`未找到目标楼层 #${targetPostNumber}`); const chain = [targetPost]; const seen = new Set([targetPostNumber]); let current = targetPost; while (+current.reply_to_post_number > 1) { const parentNumber = +current.reply_to_post_number; if (seen.has(parentNumber)) throw new Error('楼中楼祖先链存在循环引用'); seen.add(parentNumber); const parent = await fetchPostForLocate(ctx.topicId, parentNumber, ctx); if (!parent) throw new Error(`未找到父楼层 #${parentNumber}`); chain.unshift(parent); current = parent; } // 从最外层父回复向目标逐层展开，确保多层楼中楼的每一级 DOM 都已就位。 for (let i = 0; i < chain.length; i++) { const post = ctx.postMap?.get(chain[i].post_number) || chain[i]; ensurePostPlacement(post, ctx); const childOnPath = chain[i + 1]; if (!childOnPath) continue; await loadAllChildren(post.id, post.post_number, null, ctx, true); const refreshedChild = ctx.postMap?.get(childOnPath.post_number) || childOnPath; ensurePostPlacement(refreshedChild, ctx); reflowPending(ctx); } return ctx.nodeMap.get(targetPostNumber) || null; } async function locatePost(targetPostNumber, ctx) { if (!targetPostNumber || targetPostNumber <= 1) return false; await new Promise((resolve) => requestAnimationFrame(resolve)); let targetNode = ctx.nodeMap.get(targetPostNumber); let locateError = null; try { targetNode = await expandTargetAncestorChain(targetPostNumber, ctx) || targetNode; } catch (error) { // 嵌套接口不可用时保留 1.3.0 原有的扁平定位作为降级路径。 locateError = error; targetNode = ctx.nodeMap.get(targetPostNumber) || (targetNode?.isConnected ? targetNode : null); } if (!targetNode || targetNode.isConnected === false) { const reason = locateError?.message ? `：${locateError.message}` : ''; console.warn(`[LinuxDo 增强阅读] 目标楼层 #${targetPostNumber} 不可见，无法定位${reason}`); return false; } await new Promise((resolve) => requestAnimationFrame(resolve)); targetNode.scrollIntoView({ behavior: 'smooth', block: 'center' }); await waitForScrollEnd(ctx.scrollRoot); const flashObserver = new IntersectionObserver((entries, observer) => { const visibleEntry = entries.find((entry) => entry.isIntersecting && entry.intersectionRatio >= 0.5 ); if (!visibleEntry) return; observer.disconnect(); const node = visibleEntry.target; node.classList.remove('ldp-flash'); void node.offsetWidth; node.classList.add('ldp-flash'); setTimeout(() => node.classList.remove('ldp-flash'), 1700); }, { root: ctx.scrollRoot, threshold: [0.5] }); flashObserver.observe(targetNode); setTimeout(() => flashObserver.disconnect(), 1500); return true; } function createFloorNavigator(nav, scrollRoot, topicId) { const thumb = nav.querySelector('.ldp-slider-thumb'); const tip = nav.querySelector('.ldp-slider-tip'); const track = nav.querySelector('.ldp-slider-track'); const modal = nav.parentElement; let currentFloor = 1; let totalFloors = 1; let dragging = false; let scrollRaf = 0; let suppressClick = false; let resizeHandler = null; let mutationObserver = null; let mutationTimer = null; let geometryTimer = null; const updateGeometry = () => { const bodyRect = scrollRoot.getBoundingClientRect(); const modalRect = modal.getBoundingClientRect(); nav.style.top = `${bodyRect.top - modalRect.top}px`; nav.style.bottom = `${modalRect.bottom - bodyRect.bottom}px`; }; const getRenderedFloors = () => Array.from( scrollRoot.querySelectorAll('.ldp-post[data-post-number]') ).map((node) => Number(node.dataset.postNumber)) .filter((floor) => Number.isFinite(floor) && floor >= 1) .filter((floor, index, floors) => floors.indexOf(floor) === index) .sort((a, b) => a - b); const currentFloorAt = () => { if (scrollRoot.scrollTop <= 2) return 1; const rootRect = scrollRoot.getBoundingClientRect(); const probeY = rootRect.top + Math.min(rootRect.height * 0.35, 260); const heads = Array.from(scrollRoot.querySelectorAll('.ldp-post-head')) .map((head) => ({ top: head.getBoundingClientRect().top, floor: Number(head.closest('.ldp-post')?.dataset.postNumber), })) .filter((item) => Number.isFinite(item.floor)) .sort((a, b) => a.top - b.top); if (!heads.length) return 1; let floor = heads[0].floor; heads.forEach((item) => { if (item.top <= probeY) floor = item.floor; }); return floor; }; const floorFromRatio = (ratio) => Math.max( 1, Math.min(totalFloors, Math.round(1 + ratio * (totalFloors - 1))) ); const paint = (floor, showTip = false) => { currentFloor = Math.max(1, Math.min(totalFloors, Number(floor) || 1)); const ratio = totalFloors > 1 ? (currentFloor - 1) / (totalFloors - 1) : 0; const trackHeight = track.offsetHeight || nav.offsetHeight; const y = 8 + Math.max(0, Math.min(1, ratio)) * trackHeight; thumb.style.top = `${y}px`; thumb.textContent = String(currentFloor); tip.textContent = `#${currentFloor}`; tip.style.top = `${y}px`; if (showTip) tip.classList.add('show'); }; const updateThumbPosition = () => { scrollRaf = 0; if (dragging || nav.hidden) return; const renderedFloors = getRenderedFloors(); if (!renderedFloors.length) return; paint(currentFloorAt()); }; const onScroll = () => { if (!scrollRaf) scrollRaf = requestAnimationFrame(updateThumbPosition); }; const navigateToFloor = (floor) => { const targetFloor = floorFromRatio(Math.max(0, Math.min(1, (floor - 1) / Math.max(1, totalFloors - 1)))); if (targetFloor === currentFloor) { paint(currentFloor); return; } // 复用现有目标楼层逻辑：窗口加载、楼号修正、祖先链展开和高亮均由 openModal 完成。 openModal(topicId, targetFloor); }; let lastTargetFloor = 1; const onPointerMove = (event) => { if (!dragging) return; event.preventDefault(); const rect = track.getBoundingClientRect(); const ratio = Math.max(0, Math.min(1, (event.clientY - rect.top) / rect.height)); lastTargetFloor = floorFromRatio(ratio); const y = 8 + ratio * rect.height; thumb.style.top = `${y}px`; thumb.textContent = String(lastTargetFloor); tip.textContent = `#${lastTargetFloor}`; tip.style.top = `${y}px`; tip.classList.add('show'); }; const onPointerUp = () => { if (!dragging) return; dragging = false; suppressClick = true; thumb.style.cursor = 'grab'; tip.classList.remove('show'); document.removeEventListener('pointermove', onPointerMove); document.removeEventListener('pointerup', onPointerUp); navigateToFloor(lastTargetFloor); }; thumb.addEventListener('pointerdown', (event) => { event.preventDefault(); event.stopPropagation(); dragging = true; lastTargetFloor = currentFloor; thumb.style.cursor = 'grabbing'; tip.classList.add('show'); document.addEventListener('pointermove', onPointerMove); document.addEventListener('pointerup', onPointerUp); }); nav.addEventListener('click', (event) => { if (suppressClick) { suppressClick = false; return; } if (event.target === thumb) return; const rect = track.getBoundingClientRect(); const ratio = Math.max(0, Math.min(1, (event.clientY - rect.top) / rect.height)); navigateToFloor(floorFromRatio(ratio)); }); scrollRoot.addEventListener('scroll', onScroll, { passive: true }); mutationObserver = new MutationObserver(() => { clearTimeout(mutationTimer); mutationTimer = setTimeout(() => { updateGeometry(); updateThumbPosition(); }, 100); }); mutationObserver.observe(scrollRoot, { childList: true, subtree: true }); resizeHandler = updateGeometry; window.addEventListener('resize', resizeHandler); updateGeometry(); geometryTimer = setTimeout(updateGeometry, 100); return { setTotal(total, initialFloor = 1) { totalFloors = Math.max(1, Number(total) || 1); nav.hidden = totalFloors <= 1; paint(initialFloor); }, refresh: updateGeometry, destroy() { scrollRoot.removeEventListener('scroll', onScroll); if (scrollRaf) cancelAnimationFrame(scrollRaf); if (resizeHandler) window.removeEventListener('resize', resizeHandler); if (mutationObserver) mutationObserver.disconnect(); clearTimeout(mutationTimer); clearTimeout(geometryTimer); document.removeEventListener('pointermove', onPointerMove); document.removeEventListener('pointerup', onPointerUp); }, }; } const SKELETON_HTML = `楼主帖子加载失败
', created_at: anchorData.created_at || new Date().toISOString(), actions_summary: [], boosts: [], can_boost: false, }; } ctx.op = opPost.username; ctx.totalComments = anchorData.posts_count - 1; floorNavigator.setTotal( anchorData.highest_post_number || anchorData.posts_count || 1, resolvedTarget ); // 更新标题和元数据 overlay.querySelector('.ldp-title').textContent = anchorData.title; overlay.querySelector('.ldp-meta').textContent = `${anchorData.posts_count} 帖 · ${anchorData.views || 0} 浏览 · 楼主 @${ctx.op || '?'}`; updateCommentsHeader(ctx); await mePromise; // 渲染 1 楼 const opNode = renderPost(opPost, false, ctx, 0); ctx.topicEl.appendChild(opNode); ctx.nodeMap.set(1, opNode); ctx.postMap.set(1, opPost); idToPost.set(opPost.id, opPost); ctx.tracker.observe(opNode); // 立即移除骨架屏 maskEl.classList.add('hide'); setTimeout(() => maskEl.remove(), 300); // 绑定底部操作栏 fOpenLink.href = `${BASE}/t/${topicId}`; bindBookmark(fBookmarkBtn, anchorData); bindFooterLike(fLikeBtn, fLikeCountEl, opPost); const canBoostOp = !!(opPost && opPost.can_boost); if (!canBoostOp) { fBoostBtn.disabled = true; fBoostBtn.style.opacity = '0.4'; } fBoostBtn.addEventListener('click', () => { if (fBoostBtn.disabled) return; const opNode = ctx.topicEl.querySelector('.ldp-post'); if (!opNode) return; const wrap = opNode.querySelector(':scope > .ldp-boost-input-wrap'); if (!wrap) return; const opening = !wrap.classList.contains('open'); wrap.classList.toggle('open', opening); if (opening) { wrap.querySelector('.ldp-boost-input').focus(); wrap.scrollIntoView({ behavior: 'smooth', block: 'center' }); } }); fReplyBtn.addEventListener('click', () => { const opNode = ctx.topicEl.querySelector('.ldp-post'); if (!opNode) return; const box = ensureReplyBox(opNode); box.classList.toggle('open'); if (box.classList.contains('open')) { box.querySelector('textarea').focus(); box.scrollIntoView({ behavior: 'smooth', block: 'center' }); } }); footerEl.hidden = false; floorNavigator.refresh(); bindActions(modal, ctx); tracker.start(); // 初始化 pending 数组（用于构建楼中楼） ctx.pending = []; ctx.repliesIO = { observe: () => {}, disconnect: () => {} }; // 兼容占位 // 保存完整的帖子流（用于双向加载） const streamFull = anchorData.post_stream.stream || []; const stream = streamFull.filter(id => { const cached = anchorData.post_stream.posts.find(p => p.id === id); return !(cached && cached.post_number === 1); }); // 初始化双向加载状态 const postCache = new Map(); anchorData.post_stream.posts.forEach(p => postCache.set(p.id, p)); let upCursor = 0; let downCursor = stream.length; let topReached = false; let bottomReached = false; let loadingDown = false; let loadingUp = false; let isAnchoring = true; // 锚定锁：定位完成前禁止触发加载 // 计算已加载的楼层范围 const loadedPostIds = new Set(anchorData.post_stream.posts.map(p => p.id)); const firstLoadedId = anchorData.post_stream.posts[0]?.id; const lastLoadedId = anchorData.post_stream.posts[anchorData.post_stream.posts.length - 1]?.id; if (firstLoadedId && streamFull.includes(firstLoadedId)) { upCursor = streamFull.indexOf(firstLoadedId); topReached = upCursor === 0; } if (lastLoadedId && streamFull.includes(lastLoadedId)) { downCursor = streamFull.indexOf(lastLoadedId) + 1; bottomReached = downCursor >= streamFull.length; } // 渲染目标楼层周围的帖子（使用 attachPost 构建楼中楼关系） loadingTip.classList.add('show'); anchorData.post_stream.posts.forEach(post => { if (post.post_number === 1) return; // 已渲染 attachPost(post, ctx); }); reflowPending(ctx); loadingTip.classList.remove('show'); // 展开完整祖先链，等待滚动稳定后再高亮目标；失败时函数内部降级为扁平定位。 await locatePost(resolvedTarget, ctx); // ====== 添加双向加载逻辑 ====== async function fetchPosts(postIds) { if (!postIds || !postIds.length) return []; const qs = postIds.map(id => `post_ids[]=${id}`).join('&'); const res = await fetchJSON(`${BASE}/t/${topicId}/posts.json?${qs}`); return res.post_stream.posts || []; } async function loadDown() { if (isAnchoring || loadingDown || bottomReached || downCursor >= streamFull.length) return; loadingDown = true; loadDownTip.classList.add('show'); try { const batch = streamFull.slice(downCursor, Math.min(downCursor + PAGE_SIZE, streamFull.length)); if (batch.length === 0) { bottomReached = true; showBottomTip(); return; } const posts = await fetchPosts(batch); posts.forEach(p => { if (p.post_number === 1 || loadedPostIds.has(p.id)) return; loadedPostIds.add(p.id); attachPost(p, ctx); }); reflowPending(ctx); downCursor += batch.length; bottomReached = downCursor >= streamFull.length; if (bottomReached) showBottomTip(); } catch (e) { console.error('向下加载失败:', e); } finally { loadingDown = false; loadDownTip.classList.remove('show'); } } async function loadUp() { if (isAnchoring || loadingUp || topReached || upCursor <= 0) return; loadingUp = true; loadUpTip.classList.add('show'); try { const oldScrollHeight = body.scrollHeight; const oldScrollTop = body.scrollTop; const start = Math.max(0, upCursor - PAGE_SIZE); const batch = streamFull.slice(start, upCursor); if (batch.length === 0) { topReached = true; if (!body.querySelector('.ldp-top-tip')) { const tip = document.createElement('div'); tip.className = 'ldp-top-tip'; tip.textContent = '已是最早的评论'; commentsEl.before(tip); } return; } const posts = await fetchPosts(batch); // 按 stream 顺序处理帖子（不要反转） // streamFull 中的顺序：[id1, id2, id3...] 对应楼层号顺序 // fetchPosts 返回的帖子顺序可能与请求顺序不同，需要按 stream 顺序重新排序 const postIdToPost = new Map(posts.map(p => [p.id, p])); const orderedPosts = batch .map(id => postIdToPost.get(id)) .filter(Boolean); const fragment = document.createDocumentFragment(); const tempCtx = Object.assign({}, ctx, { commentsEl: fragment, nodeMap: ctx.nodeMap, topicEl: ctx.topicEl, }); orderedPosts.forEach(p => { if (p.post_number === 1 || loadedPostIds.has(p.id)) return; loadedPostIds.add(p.id); attachPost(p, tempCtx); }); reflowPending(tempCtx); commentsEl.prepend(fragment); // 高度补偿 requestAnimationFrame(() => { const newScrollHeight = body.scrollHeight; body.scrollTop = oldScrollTop + (newScrollHeight - oldScrollHeight); }); upCursor = start; topReached = upCursor === 0; if (topReached && !body.querySelector('.ldp-top-tip')) { const tip = document.createElement('div'); tip.className = 'ldp-top-tip'; tip.textContent = '已是最早的评论'; commentsEl.before(tip); } } catch (e) { console.error('向上加载失败:', e); } finally { loadingUp = false; loadUpTip.classList.remove('show'); } } // 监听滚动事件 if (!bottomReached) { const sentinelDownIO = new IntersectionObserver( (entries) => { if (entries.some(en => en.isIntersecting) && !isAnchoring) loadDown(); }, { root: body, rootMargin: '300px' } ); sentinelDownIO.observe(downSentinel); } if (!topReached) { const sentinelUpIO = new IntersectionObserver( (entries) => { if (entries.some(en => en.isIntersecting) && !isAnchoring) loadUp(); }, { root: body, rootMargin: '600px' } ); sentinelUpIO.observe(upSentinel); } body.addEventListener('scroll', () => { if (isAnchoring) return; const { scrollTop, scrollHeight, clientHeight } = body; if (scrollHeight - scrollTop - clientHeight < 400) loadDown(); if (scrollTop < 800) loadUp(); }, { passive: true }); // locatePost 已等待滚动真正停止，可以安全开放双向加载。 isAnchoring = false; showBottomTip(); } catch (e) { alert('加载失败：' + e.message); } return; // 跳转场景直接返回，不加载完整嵌套树 } // 正常浏览：加载嵌套树 API const nestedResponse = await fetchNestedTree(topicId, 0); // 检查服务器返回的是嵌套树还是扁平流（私有话题等） if (nestedResponse.roots && nestedResponse.roots.length >= 0) { // 成功获取嵌套树数据 const opPost = nestedResponse.op_post; let roots = nestedResponse.roots; const topicMeta = nestedResponse.topic; nestedHasMoreRoots = nestedResponse.has_more_roots || false; nestedRootsPage = nestedResponse.page || 0; nestedTreeRoots = roots; if (!opPost) { throw new Error('服务器返回数据缺少 OP 帖子'); } // 建立混合索引 idToPost.clear(); idToPost.set(opPost.id, opPost); indexTree(roots); ctx.postMap.clear(); ctx.postMap.set(1, opPost); indexPostsByNumber(roots, ctx); // 构造 topicData 对象（兼容后续逻辑） topicData = { id: topicMeta?.id || topicId, title: topicMeta?.title || '', posts_count: topicMeta?.posts_count || 1, views: 0, post_stream: { posts: [opPost, ...roots], stream: [] }, details: { created_by: { username: opPost.username } } }; ctx.op = opPost.username; ctx.totalComments = (topicMeta?.posts_count || 1) - 1; // 总评论数 = 总帖子数 - 楼主 floorNavigator.setTotal( topicMeta?.highest_post_number || topicMeta?.posts_count || 1, 1 ); // 更新标题和元数据 overlay.querySelector('.ldp-title').textContent = topicMeta?.title || `话题 #${topicId}`; overlay.querySelector('.ldp-meta').textContent = `${topicMeta?.posts_count || 1} 帖 · 楼主 @${ctx.op || '?'}`; updateCommentsHeader(ctx); await mePromise; // 渲染 1 楼 const opNode = renderPost(opPost, false, ctx, 0); ctx.topicEl.appendChild(opNode); ctx.nodeMap.set(1, opNode); ctx.tracker.observe(opNode); // 立即移除骨架屏 maskEl.classList.add('hide'); setTimeout(() => maskEl.remove(), 300); // 绑定底部操作栏 fOpenLink.href = `${BASE}/t/${topicId}`; bindBookmark(fBookmarkBtn, topicData); bindFooterLike(fLikeBtn, fLikeCountEl, opPost); const canBoostOp = !!(opPost && opPost.can_boost); if (!canBoostOp) { fBoostBtn.disabled = true; fBoostBtn.style.opacity = '0.4'; } fBoostBtn.addEventListener('click', () => { if (fBoostBtn.disabled) return; const opNode = ctx.topicEl.querySelector('.ldp-post'); if (!opNode) return; const wrap = opNode.querySelector(':scope > .ldp-boost-input-wrap'); if (!wrap) return; const opening = !wrap.classList.contains('open'); wrap.classList.toggle('open', opening); if (opening) { wrap.querySelector('.ldp-boost-input').focus(); wrap.scrollIntoView({ behavior: 'smooth', block: 'center' }); } }); fReplyBtn.addEventListener('click', () => { const opNode = ctx.topicEl.querySelector('.ldp-post'); if (!opNode) return; const box = ensureReplyBox(opNode); box.classList.toggle('open'); if (box.classList.contains('open')) { box.querySelector('textarea').focus(); box.scrollIntoView({ behavior: 'smooth', block: 'center' }); } }); footerEl.hidden = false; floorNavigator.refresh(); bindActions(modal, ctx); tracker.start(); // ====== 阶段 2：渲染嵌套树 ====== loadingTip.classList.add('show'); try { renderNestedTree(roots, commentsEl, ctx, 1); loadingTip.classList.remove('show'); // 如果有更多顶层回复，添加滚动监听器 if (nestedHasMoreRoots) { let isLoadingMore = false; // 加载锁 // IntersectionObserver 监听底部哨兵 const sentinelDownIO = new IntersectionObserver( (entries) => { if (entries.some((en) => en.isIntersecting) && !isLoadingMore) { loadMoreRoots(); } }, { root: body, rootMargin: '300px' } ); sentinelDownIO.observe(downSentinel); // scroll 事件兜底 body.addEventListener('scroll', () => { if (isLoadingMore) return; const { scrollTop, scrollHeight, clientHeight } = body; if (scrollHeight - scrollTop - clientHeight < 400) { loadMoreRoots(); } }, { passive: true }); // 加载更多顶层回复 async function loadMoreRoots() { if (!nestedHasMoreRoots || isLoadingMore) return; isLoadingMore = true; loadDownTip.classList.add('show'); try { const nextPage = nestedRootsPage + 1; const response = await fetchNestedTree(topicId, nextPage); if (response.roots && response.roots.length > 0) { // 去重：过滤已存在的帖子 const existingIds = new Set(nestedTreeRoots.map(r => r.id)); const newRoots = response.roots.filter(r => !existingIds.has(r.id)); if (newRoots.length > 0) { // 追加新数据到索引 indexTree(newRoots); // 追加到内存树 nestedTreeRoots = nestedTreeRoots.concat(newRoots); // 渲染新数据 renderNestedTree(newRoots, commentsEl, ctx, 1); } // 更新状态 nestedHasMoreRoots = response.has_more_roots || false; nestedRootsPage = response.page || nextPage; if (!nestedHasMoreRoots) { showBottomTip(); } } else { // 没有新数据，停止加载 nestedHasMoreRoots = false; showBottomTip(); } } catch (e) { console.error('加载更多评论失败:', e); } finally { isLoadingMore = false; loadDownTip.classList.remove('show'); } } } else { showBottomTip(); } } catch (err) { loadingTip.classList.remove('show'); alert('渲染评论失败：' + err.message); } } else if (nestedResponse.flat_topic) { // 服务器返回扁平流（私有话题等） alert('此话题不支持树形视图，请刷新页面使用标准视图'); return; } else { throw new Error('服务器返回数据格式异常'); } } catch (err) { if (err.name === 'AbortError') { // 用户关闭弹框，静默退出 return; } // 加载失败，显示错误 if (maskEl) maskEl.remove(); body.innerHTML = `