Files
mcn-short-video/project/短视频脚本创作/V1.0/mcn-work-shop/cdp-align-videoinfo.mjs
T
maogeigei 831fd0e123 工作台UI:账号详情去年龄/地区重排两行 + 视频信息字段对齐(video-grid单容器跨行列对齐) + 视频ID限宽220px
- 账号信息:行1=抖音号/作品数/获取视频,行2=赛道/AI制作/粉丝/获赞\n- 视频信息:8字段合并同一grid容器(2行x4列,minmax(min-content,max-content)+80px间隔),时长↔分享/发布时间↔收藏逐列对齐(CDP实测差0)\n- 视频ID .vid-limited 220px省略+hover全量\n- 新增 cdp-align-videoinfo.mjs 对齐测量脚本
2026-09-02 10:22:11 +08:00

81 lines
3.9 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/* cdp-align-videoinfo.mjs — 测量视频详情页 .video-grid 各字段 x 坐标,验证跨行列对齐(09-02)
* 期望:第 i 列两行字段 left 一致(时长↔分享、发布时间↔收藏)
*/
const CDP = 'http://127.0.0.1:9223';
async function getWs(targetId) {
const tabs = await (await fetch(CDP + '/json')).json();
const t = tabs.find((x) => x.id === targetId);
if (!t) throw new Error('target not found: ' + targetId);
return t.webSocketDebuggerUrl;
}
function cdp(ws, method, params = {}) {
return new Promise((resolve, reject) => {
const id = ++cdp._id;
const w = new WebSocket(ws);
const timer = setTimeout(() => { try { w.close(); } catch (e) {} reject(new Error('timeout: ' + method)); }, 30000);
w.onopen = () => w.send(JSON.stringify({ id, method, params }));
w.onmessage = (ev) => {
const m = JSON.parse(ev.data);
if (m.id !== id) return;
clearTimeout(timer);
try { w.close(); } catch (e) {}
m.error ? reject(new Error(method + ': ' + JSON.stringify(m.error))) : resolve(m.result);
};
w.onerror = () => { clearTimeout(timer); reject(new Error('ws error: ' + method)); };
});
}
cdp._id = 0;
async function evalJs(ws, expr) {
const r = await cdp(ws, 'Runtime.evaluate', { expression: expr, awaitPromise: true, returnByValue: true });
if (r.exceptionDetails) throw new Error('eval err: ' + JSON.stringify(r.exceptionDetails).slice(0, 300));
return r.result && r.result.value;
}
const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
async function main() {
const tabs = await (await fetch(CDP + '/json')).json();
const tab = tabs.find((x) => x.url.includes('localhost:8900')) || tabs.find((x) => x.type === 'page');
if (!tab) throw new Error('no 8900 tab found');
const ws = await getWs(tab.id);
await cdp(ws, 'Page.enable');
await cdp(ws, 'Runtime.enable');
// 复用现有 8900 标签页导航(新开 Tab 访问 localhost 会 chrome-error)
await cdp(ws, 'Page.navigate', { url: 'http://localhost:8900/?v=aligncheck0902#/video/309' });
await sleep(2500);
const measure = `(() => {
const items = [...document.querySelectorAll('.video-info .video-grid .info-item')];
if (!items.length) return { err: 'video-grid items not found', html: document.querySelector('.video-info') ? document.querySelector('.video-info').textContent.slice(0, 80) : 'no .video-info' };
const row = (el) => Math.round(el.getBoundingClientRect().top / 5);
return items.map((el, i) => {
const label = el.querySelector('.info-label') ? el.querySelector('.info-label').textContent.trim() : '?';
const r = el.getBoundingClientRect();
return { i, label, left: Math.round(r.left), top: Math.round(r.top), row: row(el) };
});
})()`;
const list = await evalJs(ws, measure);
if (list.err) { console.error('ERR:', list.err); process.exit(1); }
// 按 row 分组(前两行各 4 项)
const rows = {};
for (const it of list) { (rows[it.row] = rows[it.row] || []).push(it); }
const rKeys = Object.keys(rows).sort((a, b) => a - b).slice(0, 2);
console.log('=== .video-grid 字段测量 ===');
for (const k of rKeys) {
console.log('行' + k + ':', rows[k].map((x) => `${x.label}@${x.left}`).join(' '));
}
if (rKeys.length === 2) {
const a = rows[rKeys[0]], b = rows[rKeys[1]];
const diff2 = a[2].left - b[2].left;
const diff3 = a[3].left - b[3].left;
console.log('---');
console.log('第3列(时长↔分享) left 差:', diff2, diff2 === 0 ? '✅ 对齐' : '❌ 未对齐');
console.log('第4列(发布时间↔收藏) left 差:', diff3, diff3 === 0 ? '✅ 对齐' : '❌ 未对齐');
const labels1 = a.map((x) => x.label).join('/');
const labels2 = b.map((x) => x.label).join('/');
console.log('行1:', labels1, '| 行2:', labels2);
} else {
console.log('⚠️ 只识别到', rKeys.length, '行');
}
process.exit(0);
}
main().catch((e) => { console.error('ERROR:', e.message); process.exit(1); });