refactor(feed_detail): optimize comment loading logic in GetFeedDetail
- Replaced the previous comment loading JavaScript with a more efficient scrolling and collection mechanism. - Improved the logic for determining scroll targets and handling comment counts. - Enhanced error handling and logging for comment loading failures. - Removed deprecated code related to the old comment loading approach.
This commit is contained in:
chekayo
@@ -35,72 +35,32 @@ func (f *FeedDetailAction) GetFeedDetail(ctx context.Context, feedID, xsecToken
|
|||||||
page.MustWaitDOMStable()
|
page.MustWaitDOMStable()
|
||||||
time.Sleep(1 * time.Second)
|
time.Sleep(1 * time.Second)
|
||||||
|
|
||||||
var domCommentsPayload string
|
|
||||||
if loadAllComments {
|
if loadAllComments {
|
||||||
scrollToEndJS := `() => {
|
scrollAllCommentsJS := `() => {
|
||||||
const END_SELECTOR = '.end-container';
|
const INTERVAL_MS = 900;
|
||||||
const DELTA_MIN = 520;
|
const STAGNANT_LIMIT = 8;
|
||||||
const MAX_ATTEMPTS = 60;
|
const NO_CHANGE_SCROLL_LIMIT = 3;
|
||||||
const WAIT_AFTER_SCROLL = 420;
|
const DELTA_MIN = 480;
|
||||||
|
const SCROLL_TIMEOUT = 900;
|
||||||
|
const MAX_ATTEMPTS = 200;
|
||||||
|
|
||||||
const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
|
const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
|
||||||
const scrollRoot = document.scrollingElement || document.documentElement || document.body;
|
const scrollRoot = () => document.scrollingElement || document.documentElement || document.body;
|
||||||
|
const getContainer = () => document.querySelector('.comments-container');
|
||||||
const reachedEnd = () => {
|
const getCommentCount = (container) =>
|
||||||
const endEl = document.querySelector(END_SELECTOR);
|
container ? container.querySelectorAll('.comment-item, .comment-item-sub, .comment').length : 0;
|
||||||
if (!endEl) return false;
|
const getTotalCount = (container) => {
|
||||||
const text = (endEl.textContent || '').toUpperCase();
|
if (!container) return null;
|
||||||
if (text.includes('THE END')) return true;
|
const text = (container.querySelector('.total')?.textContent || '').replace(/\s+/g, '');
|
||||||
const rect = endEl.getBoundingClientRect();
|
const match = text.match(/共(\d+)条评论/);
|
||||||
return rect.top >= 0 && rect.top <= (window.innerHeight || document.documentElement.clientHeight || 0);
|
return match ? parseInt(match[1], 10) : null;
|
||||||
};
|
};
|
||||||
|
const getScrollMetrics = (el) => {
|
||||||
const collectCandidates = () => {
|
if (!el) {
|
||||||
const container = document.querySelector('.comments-container');
|
return { top: 0, max: 0, client: window.innerHeight };
|
||||||
const set = new Set();
|
|
||||||
|
|
||||||
const push = (node) => {
|
|
||||||
if (node && node instanceof HTMLElement) {
|
|
||||||
set.add(node);
|
|
||||||
}
|
}
|
||||||
};
|
if (el === window || el === document || el === document.body || el === document.documentElement) {
|
||||||
|
const root = scrollRoot();
|
||||||
push(document.body);
|
|
||||||
push(document.documentElement);
|
|
||||||
push(scrollRoot);
|
|
||||||
|
|
||||||
if (container) {
|
|
||||||
let current = container;
|
|
||||||
while (current) {
|
|
||||||
push(current);
|
|
||||||
if (current === document.body || current === document.documentElement) {
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
current = current.parentElement;
|
|
||||||
}
|
|
||||||
container.querySelectorAll('.comments-el, .list-container, [data-v-4a19279a][name="list"]').forEach(push);
|
|
||||||
}
|
|
||||||
|
|
||||||
const ranked = Array.from(set).map((node) => {
|
|
||||||
const style = window.getComputedStyle(node);
|
|
||||||
const scrollable = node.scrollHeight - node.clientHeight > 40;
|
|
||||||
const hasScroll = /auto|scroll|overlay/i.test(style.overflowY || '');
|
|
||||||
const weight =
|
|
||||||
(node === scrollRoot ? 800 : 0) +
|
|
||||||
(container && node === container ? 1200 : 0) +
|
|
||||||
(container && node.contains && node.contains(container) ? 600 : 0) +
|
|
||||||
(hasScroll ? 300 : 0) +
|
|
||||||
(scrollable ? 300 : 0) -
|
|
||||||
(node === document.body || node === document.documentElement ? 80 : 0);
|
|
||||||
return { node, weight };
|
|
||||||
}).sort((a, b) => b.weight - a.weight);
|
|
||||||
|
|
||||||
return ranked.slice(0, 8).map((item) => item.node);
|
|
||||||
};
|
|
||||||
|
|
||||||
const metrics = (el) => {
|
|
||||||
if (!el || el === document || el === window) {
|
|
||||||
const root = scrollRoot;
|
|
||||||
return {
|
return {
|
||||||
top: root.scrollTop,
|
top: root.scrollTop,
|
||||||
max: Math.max(root.scrollHeight - root.clientHeight, 0),
|
max: Math.max(root.scrollHeight - root.clientHeight, 0),
|
||||||
@@ -113,136 +73,157 @@ func (f *FeedDetailAction) GetFeedDetail(ctx context.Context, feedID, xsecToken
|
|||||||
client: el.clientHeight
|
client: el.clientHeight
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
const setScrollTop = (el, value) => {
|
const setScrollTop = (el, value) => {
|
||||||
if (!el) return;
|
if (!el) return;
|
||||||
if (el === document.body || el === document.documentElement || el === scrollRoot || el === document || el === window) {
|
if (el === window || el === document || el === document.body || el === document.documentElement) {
|
||||||
scrollRoot.scrollTop = value;
|
const root = scrollRoot();
|
||||||
} else {
|
root.scrollTop = value;
|
||||||
el.scrollTop = value;
|
window.scrollTo(0, value);
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
|
el.scrollTop = value;
|
||||||
};
|
};
|
||||||
|
|
||||||
const dispatchWheel = (el, delta) => {
|
const dispatchWheel = (el, delta) => {
|
||||||
if (!el) return;
|
if (!el) return;
|
||||||
try {
|
try {
|
||||||
el.dispatchEvent(new Event('scroll', { bubbles: true }));
|
const wheel = new WheelEvent('wheel', {
|
||||||
if (typeof WheelEvent === 'function' && delta !== 0) {
|
deltaY: delta,
|
||||||
const wheel = new WheelEvent('wheel', { deltaY: delta, bubbles: true, cancelable: true });
|
bubbles: true,
|
||||||
|
cancelable: true
|
||||||
|
});
|
||||||
el.dispatchEvent(wheel);
|
el.dispatchEvent(wheel);
|
||||||
}
|
el.dispatchEvent(new Event('scroll', { bubbles: true }));
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.debug('dispatchWheel error', err);
|
console.debug('dispatchWheel error', err);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
let cachedTarget = null;
|
||||||
const waitForMove = (el, beforeTop) => {
|
const collectCandidates = () => {
|
||||||
let tries = 0;
|
const container = getContainer();
|
||||||
return new Promise((resolve) => {
|
const candidatesSet = new Set();
|
||||||
const tick = () => {
|
if (container) {
|
||||||
tries++;
|
let current = container;
|
||||||
const now = metrics(el).top;
|
while (current) {
|
||||||
if (Math.abs(now - beforeTop) >= 6 || tries >= 6) {
|
if (current instanceof HTMLElement) {
|
||||||
resolve(Math.abs(now - beforeTop) >= 6);
|
candidatesSet.add(current);
|
||||||
|
}
|
||||||
|
current = current.parentElement;
|
||||||
|
}
|
||||||
|
container.querySelectorAll('*').forEach((node) => {
|
||||||
|
if (node instanceof HTMLElement) {
|
||||||
|
candidatesSet.add(node);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
[document.body, document.documentElement].forEach((node) => {
|
||||||
|
if (node instanceof HTMLElement) {
|
||||||
|
candidatesSet.add(node);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const candidates = [];
|
||||||
|
candidatesSet.forEach((node) => {
|
||||||
|
const style = window.getComputedStyle(node);
|
||||||
|
const overflowY = style.overflowY;
|
||||||
|
const scrollable = node.scrollHeight - node.clientHeight > 40;
|
||||||
|
const hasScrollStyle = /auto|scroll|overlay/i.test(overflowY);
|
||||||
|
const weight =
|
||||||
|
(node.contains(container) ? 1000 : 0) +
|
||||||
|
(node === container ? 800 : 0) +
|
||||||
|
(hasScrollStyle ? 400 : 0) +
|
||||||
|
(scrollable ? 300 : 0) -
|
||||||
|
(node === document.body || node === document.documentElement ? 50 : 0);
|
||||||
|
if (scrollable || hasScrollStyle || node === document.body || node === document.documentElement) {
|
||||||
|
candidates.push({ node, weight });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
candidates.sort((a, b) => b.weight - a.weight);
|
||||||
|
return candidates.map((candidate) => candidate.node);
|
||||||
|
};
|
||||||
|
const findScrollTarget = () => {
|
||||||
|
if (cachedTarget && cachedTarget.isConnected) {
|
||||||
|
return cachedTarget;
|
||||||
|
}
|
||||||
|
const candidates = collectCandidates();
|
||||||
|
cachedTarget = candidates.find((node) => {
|
||||||
|
const metrics = getScrollMetrics(node);
|
||||||
|
return metrics.max > 30 || metrics.client > 0;
|
||||||
|
}) || scrollRoot();
|
||||||
|
return cachedTarget;
|
||||||
|
};
|
||||||
|
const performScroll = (target) => {
|
||||||
|
const scrollTarget = target || findScrollTarget();
|
||||||
|
if (!scrollTarget) {
|
||||||
|
window.scrollBy(0, window.innerHeight * 0.8);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
setTimeout(tick, 60);
|
const metrics = getScrollMetrics(scrollTarget);
|
||||||
};
|
const beforeTop = metrics.top;
|
||||||
setTimeout(tick, 60);
|
const desired = metrics.max > 0 ? Math.min(metrics.top + Math.max(metrics.client * 0.85, DELTA_MIN), metrics.max) : metrics.top + Math.max(metrics.client * 0.85, DELTA_MIN);
|
||||||
});
|
const applied = Math.max(0, desired - metrics.top);
|
||||||
};
|
setScrollTop(scrollTarget, desired);
|
||||||
|
dispatchWheel(scrollTarget, applied);
|
||||||
const scrollOnce = async (node) => {
|
const afterTop = getScrollMetrics(scrollTarget).top;
|
||||||
const before = metrics(node);
|
if (Math.abs(afterTop - beforeTop) < 5 && scrollTarget !== scrollRoot()) {
|
||||||
const delta = Math.max(before.client * 0.85, DELTA_MIN);
|
const root = scrollRoot();
|
||||||
const desired = before.max > 0 ? Math.min(before.top + delta, before.max) : before.top + delta;
|
const rootBefore = root.scrollTop;
|
||||||
const applied = Math.max(0, desired - before.top);
|
root.scrollTop = rootBefore + applied;
|
||||||
setScrollTop(node, desired);
|
window.scrollBy(0, applied);
|
||||||
dispatchWheel(node, applied);
|
dispatchWheel(root, applied);
|
||||||
const moved = await waitForMove(node, before.top);
|
|
||||||
if (!moved && node !== scrollRoot) {
|
|
||||||
const rootBefore = metrics(scrollRoot).top;
|
|
||||||
setScrollTop(scrollRoot, rootBefore + applied);
|
|
||||||
dispatchWheel(scrollRoot, applied);
|
|
||||||
return waitForMove(scrollRoot, rootBefore);
|
|
||||||
}
|
}
|
||||||
return moved;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return (async () => {
|
return (async () => {
|
||||||
|
let lastCount = 0;
|
||||||
|
let stagnantChecks = 0;
|
||||||
|
let noScrollChangeCount = 0;
|
||||||
for (let attempt = 0; attempt < MAX_ATTEMPTS; attempt++) {
|
for (let attempt = 0; attempt < MAX_ATTEMPTS; attempt++) {
|
||||||
const candidates = collectCandidates();
|
const container = getContainer();
|
||||||
for (const node of candidates) {
|
|
||||||
const moved = await scrollOnce(node);
|
|
||||||
if (moved) {
|
|
||||||
await sleep(WAIT_AFTER_SCROLL);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (reachedEnd()) {
|
|
||||||
return JSON.stringify({ status: 'end', attempts: attempt + 1 });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return JSON.stringify({ status: 'timeout' });
|
|
||||||
})().catch((err) => JSON.stringify({ status: 'error', message: err && err.message ? err.message : String(err) }));
|
|
||||||
}`
|
|
||||||
|
|
||||||
if res, err := page.Eval(scrollToEndJS); err != nil {
|
|
||||||
logrus.Warnf("加载全部评论失败: %v", err)
|
|
||||||
} else if res != nil {
|
|
||||||
logrus.Infof("评论滚动结果: %v", res.Value)
|
|
||||||
}
|
|
||||||
|
|
||||||
collectCommentsJS := `() => {
|
|
||||||
try {
|
|
||||||
const container = document.querySelector('.comments-container');
|
|
||||||
if (!container) {
|
if (!container) {
|
||||||
return JSON.stringify({ list: [], reachedEnd: false, error: 'comments container not found' });
|
await sleep(300);
|
||||||
}
|
|
||||||
|
|
||||||
const items = Array.from(container.querySelectorAll('.comment-item'));
|
|
||||||
const seen = new Set();
|
|
||||||
const list = [];
|
|
||||||
|
|
||||||
const textContent = (node) => (node && node.textContent ? node.textContent.trim() : '');
|
|
||||||
|
|
||||||
for (const item of items) {
|
|
||||||
let rawId = item.getAttribute('id') || '';
|
|
||||||
if (!rawId && item.dataset) {
|
|
||||||
rawId = item.dataset.commentId || item.dataset.id || '';
|
|
||||||
}
|
|
||||||
const commentId = rawId.replace(/^comment-/, '') || rawId;
|
|
||||||
if (!commentId || seen.has(commentId)) {
|
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
seen.add(commentId);
|
const total = getTotalCount(container);
|
||||||
|
const count = getCommentCount(container);
|
||||||
const contentEl = item.querySelector('.comment-content, .content, .content-text, .text, .word');
|
if (total && count >= total) {
|
||||||
const nicknameEl = item.querySelector('.user-name, .nickname, .name, .author-name, .title');
|
return { status: 'complete', reason: 'total', attempts: attempt + 1, count, total };
|
||||||
const userNode = item.querySelector('[data-user-id]');
|
|
||||||
const likeEl = item.querySelector('.like .count, .interaction .like span, .interaction-bar .like span, [class*="like"] span');
|
|
||||||
|
|
||||||
list.push({
|
|
||||||
id: commentId,
|
|
||||||
content: textContent(contentEl),
|
|
||||||
nickname: textContent(nicknameEl),
|
|
||||||
userId: userNode ? (userNode.getAttribute('data-user-id') || '') : '',
|
|
||||||
likeCount: textContent(likeEl),
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
if (count === lastCount) {
|
||||||
const endEl = document.querySelector('.end-container');
|
stagnantChecks += 1;
|
||||||
const reachedEnd = !!(endEl && (endEl.textContent || '').toUpperCase().includes('THE END'));
|
} else {
|
||||||
return JSON.stringify({ list, reachedEnd });
|
lastCount = count;
|
||||||
} catch (err) {
|
stagnantChecks = 0;
|
||||||
return JSON.stringify({ list: [], reachedEnd: false, error: err && err.message ? err.message : String(err) });
|
|
||||||
}
|
}
|
||||||
|
if (stagnantChecks >= STAGNANT_LIMIT) {
|
||||||
|
return { status: 'complete', reason: 'stagnant', attempts: attempt + 1, count, total };
|
||||||
|
}
|
||||||
|
const target = findScrollTarget();
|
||||||
|
const beforeTop = getScrollMetrics(target).top;
|
||||||
|
performScroll(target);
|
||||||
|
await sleep(SCROLL_TIMEOUT);
|
||||||
|
const afterTop = getScrollMetrics(target).top;
|
||||||
|
if (Math.abs(afterTop - beforeTop) < 5) {
|
||||||
|
noScrollChangeCount += 1;
|
||||||
|
} else {
|
||||||
|
noScrollChangeCount = 0;
|
||||||
|
}
|
||||||
|
if (noScrollChangeCount >= NO_CHANGE_SCROLL_LIMIT) {
|
||||||
|
return { status: 'complete', reason: 'no-scroll-change', attempts: attempt + 1, count, total };
|
||||||
|
}
|
||||||
|
if (INTERVAL_MS > SCROLL_TIMEOUT) {
|
||||||
|
await sleep(INTERVAL_MS - SCROLL_TIMEOUT);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return { status: 'timeout' };
|
||||||
|
})()
|
||||||
|
.then((res) => JSON.stringify(res))
|
||||||
|
.catch((err) => JSON.stringify({ status: 'error', message: err && err.message ? err.message : String(err) }));
|
||||||
}`
|
}`
|
||||||
|
|
||||||
if res, err := page.Eval(collectCommentsJS); err != nil {
|
if res, err := page.Eval(scrollAllCommentsJS); err != nil {
|
||||||
logrus.Warnf("收集评论失败: %v", err)
|
logrus.Warnf("加载全部评论失败: %v", err)
|
||||||
} else if res != nil {
|
} else if res != nil {
|
||||||
domCommentsPayload = res.Value.Str()
|
if str := res.Value.Str(); str != "" {
|
||||||
|
logrus.Infof("评论滚动结果: %s", str)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -274,47 +255,6 @@ func (f *FeedDetailAction) GetFeedDetail(ctx context.Context, feedID, xsecToken
|
|||||||
return nil, fmt.Errorf("feed %s not found in noteDetailMap", feedID)
|
return nil, fmt.Errorf("feed %s not found in noteDetailMap", feedID)
|
||||||
}
|
}
|
||||||
|
|
||||||
if loadAllComments && domCommentsPayload != "" {
|
|
||||||
var payload struct {
|
|
||||||
List []struct {
|
|
||||||
ID string `json:"id"`
|
|
||||||
Content string `json:"content"`
|
|
||||||
Nickname string `json:"nickname"`
|
|
||||||
UserID string `json:"userId"`
|
|
||||||
LikeCount string `json:"likeCount"`
|
|
||||||
}
|
|
||||||
ReachedEnd bool `json:"reachedEnd"`
|
|
||||||
Error string `json:"error"`
|
|
||||||
}
|
|
||||||
|
|
||||||
if err := json.Unmarshal([]byte(domCommentsPayload), &payload); err != nil {
|
|
||||||
logrus.Warnf("解析 DOM 评论数据失败: %v", err)
|
|
||||||
} else if payload.Error != "" {
|
|
||||||
logrus.Warnf("DOM 评论数据返回错误: %s", payload.Error)
|
|
||||||
} else if len(payload.List) > 0 {
|
|
||||||
comments := make([]Comment, 0, len(payload.List))
|
|
||||||
for _, item := range payload.List {
|
|
||||||
comments = append(comments, Comment{
|
|
||||||
ID: item.ID,
|
|
||||||
NoteID: feedID,
|
|
||||||
Content: item.Content,
|
|
||||||
LikeCount: item.LikeCount,
|
|
||||||
UserInfo: User{
|
|
||||||
UserID: item.UserID,
|
|
||||||
Nickname: item.Nickname,
|
|
||||||
NickName: item.Nickname,
|
|
||||||
},
|
|
||||||
SubComments: nil,
|
|
||||||
SubCommentCount: "0",
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
noteDetail.Comments.List = comments
|
|
||||||
noteDetail.Comments.Cursor = ""
|
|
||||||
noteDetail.Comments.HasMore = !payload.ReachedEnd
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return &FeedDetailResponse{
|
return &FeedDetailResponse{
|
||||||
Note: noteDetail.Note,
|
Note: noteDetail.Note,
|
||||||
Comments: noteDetail.Comments,
|
Comments: noteDetail.Comments,
|
||||||
|
|||||||
Reference in New Issue
Block a user