feat(工作台): 视频详情 toolbar 显示视频标题名称，信息卡首行改视频地址可点击链接
This commit is contained in:
maogeigei committed
1 parent
c165b4c2ed
commit
adebcc135b
3 files changed
+90
-3
No files matched your search
@@ -256,3 +256,4 @@
|
||||
- **验证**：cdp-verify-addr.mjs 10/10 PASS——工具栏静态标题、4 行结构、第一行地址链接、2/3 行字段等宽、无渲染失败
|
||||
- **15:00 视频详情定稿（用户最新需求优先）**：用户明确 4 行结构=①视频标题 ②账号/视频ID/时长/发布时间 ③点赞/评论/分享/收藏 ④标签。**标题只出现一次**：toolbar `page-title` 改静态「视频详情」，信息卡保留 `video-detail-title` 大字号标题行（曾出现「视频标题→视频地址」的中间版本改动，与用户需求冲突已回退——视频地址行删除，用户结构无此项）。**2/3 行字段等宽统一**：`.video-info .info-row` 用 `grid repeat(4, minmax(0,1fr)) gap 10px 18px`（间隔用之前 18px，字段等宽 282×4）。**验证**：cdp-verify-videoinfo2.mjs 8/8 PASS——标题全页仅 1 次、3 组 info-row、第2/3行等宽 282px、无渲染失败
|
||||
- **教训**：data-pages.js renderVideoDetail 在会话间隔期被其他改动覆盖（urlVal 视频地址版）——**以用户最新消息为权威判定结构**，中间版本改动若与用户需求冲突直接回退
|
||||
- **15:05 视频详情再调（用户最新需求定稿）**：toolbar 返回箭头后 `page-title` **显示视频标题名称**（非静态）；信息卡**首行改「视频地址」标签**（4字）+ 可点击链接（data-ext 打开视频网页），删 `video-detail-title` 大字号标题行。最终结构：toolbar=视频标题；信息卡=①视频地址(可点) ②账号/视频ID/时长/发布时间 ③点赞/评论/分享/收藏 ④标签。**验证**：cdp-verify-titlebar.mjs 8/8 PASS（toolbar=视频标题全名、首行标签=视频地址、链接 https 可点、四组行顺序正确、无渲染失败）
|
||||
@@ -0,0 +1,86 @@
|
||||
/* cdp-verify-titlebar.mjs — 验证：toolbar 显示视频标题名称；信息卡首行「视频地址」+可点击链接（09-01） */
|
||||
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));
|
||||
const waitFor = async (ws, expr, timeout = 15000, label = '') => {
|
||||
const t0 = Date.now();
|
||||
while (Date.now() - t0 < timeout) {
|
||||
if (await evalJs(ws, expr)) return true;
|
||||
await sleep(300);
|
||||
}
|
||||
throw new Error('waitFor timeout: ' + label);
|
||||
};
|
||||
|
||||
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');
|
||||
|
||||
let pass = 0, fail = 0;
|
||||
const check = (name, cond, extra = '') => { cond ? pass++ : fail++; console.log((cond ? 'PASS' : 'FAIL') + ' | ' + name + (cond ? '' : ' ← ' + extra)); };
|
||||
|
||||
await cdp(ws, 'Page.navigate', { url: 'http://localhost:8900/?v=titlebar#/video/680' });
|
||||
await waitFor(ws, `!!document.querySelector('.video-info')`, 15000, '视频详情渲染');
|
||||
|
||||
const r = await evalJs(ws, `(() => {
|
||||
const card = document.querySelector('.video-info');
|
||||
const rows = card ? [...card.querySelectorAll('.info-row')] : [];
|
||||
const toolbarTitle = document.querySelector('.page-toolbar .page-title');
|
||||
const r0 = rows[0];
|
||||
const firstLabel = r0 ? r0.querySelector('.info-label').textContent.trim() : '';
|
||||
const firstLink = r0 ? r0.querySelector('a') : null;
|
||||
const rowLabels = rows.slice(1).map((row) => [...row.querySelectorAll('.info-label')].map((l) => l.textContent.trim()));
|
||||
return {
|
||||
toolbarTitle: toolbarTitle ? toolbarTitle.textContent.trim() : '',
|
||||
rowCount: rows.length,
|
||||
firstLabel,
|
||||
firstHref: firstLink ? (firstLink.getAttribute('data-ext') || firstLink.getAttribute('href')) : null,
|
||||
firstText: r0 ? r0.textContent.trim().slice(0, 60) : '',
|
||||
rowLabels,
|
||||
hasRenderErr: document.body.textContent.includes('渲染失败') || document.body.textContent.includes('not defined')
|
||||
};
|
||||
})()`);
|
||||
|
||||
check('toolbar 显示视频标题名称（非静态"视频详情"）: ' + r.toolbarTitle, !!r.toolbarTitle && r.toolbarTitle !== '视频详情' && r.toolbarTitle.length > 2, r.toolbarTitle);
|
||||
check('信息卡共 4 组行', r.rowCount === 4);
|
||||
check('首行标签=「视频地址」: ' + r.firstLabel, r.firstLabel === '视频地址', r.firstLabel);
|
||||
check('首行含可点击链接(https): ' + (r.firstHref || '').slice(0, 40), !!r.firstHref && /^https?:/.test(r.firstHref), r.firstHref || '');
|
||||
check('第2行=账号/视频ID/时长/发布时间', JSON.stringify(r.rowLabels[0]) === JSON.stringify(['账号', '视频ID', '时长', '发布时间']), JSON.stringify(r.rowLabels[0]));
|
||||
check('第3行=点赞/评论/分享/收藏', JSON.stringify(r.rowLabels[1]) === JSON.stringify(['点赞', '评论', '分享', '收藏']), JSON.stringify(r.rowLabels[1]));
|
||||
check('第4行=标签', JSON.stringify(r.rowLabels[2]) === JSON.stringify(['标签']), JSON.stringify(r.rowLabels[2]));
|
||||
check('无渲染失败', !r.hasRenderErr);
|
||||
|
||||
console.log(`\n结果: ${pass} PASS / ${fail} FAIL`);
|
||||
process.exit(fail ? 1 : 0);
|
||||
}
|
||||
main().catch((e) => { console.error('ERROR:', e.message); process.exit(1); });
|
||||
@@ -531,7 +531,7 @@ async function renderVideoDetail(view, id) {
|
||||
const analysisToMd = (obj) => Object.entries(obj || {}).map(([k, val]) => `# ${k}\n\n${val}`).join('\n\n---\n\n');
|
||||
|
||||
function load() {
|
||||
const titleVal = v.video_url ? `<a class="link" data-ext="${esc(v.video_url)}" title="在新标签打开视频">${esc(cleanTitle(v.video_title))}</a>` : esc(cleanTitle(v.video_title));
|
||||
const urlVal = v.video_url ? `<a class="link" data-ext="${esc(v.video_url)}" title="打开视频网页">${esc(v.video_url)}</a>` : '无';
|
||||
const scriptMd = parse.content || null;
|
||||
const deconstructMd = parse.analysis ? analysisToMd(parse.analysis) : null;
|
||||
const analysisMd = analysis && analysis.content ? analysis.content : null;
|
||||
@@ -542,10 +542,10 @@ async function renderVideoDetail(view, id) {
|
||||
else body = analysisMd ? `<div class="md-body">${renderMarkdown(analysisMd)}</div>` : `<div class="empty">该视频暂无视频分析</div>`;
|
||||
view.innerHTML = `
|
||||
<div class="page page-detail">
|
||||
<div class="page-toolbar">${toolbarBack()}<span class="page-title">视频详情</span></div>
|
||||
<div class="page-toolbar">${toolbarBack()}<span class="page-title">${esc(cleanTitle(v.video_title) || '视频详情')}</span></div>
|
||||
<div class="detail-body">
|
||||
<div class="info-card video-info">
|
||||
<div class="video-detail-title">${titleVal}</div>
|
||||
<div class="info-row">${infoGrid('视频地址', urlVal, true, true)}</div>
|
||||
<div class="info-row">${infoGrid('账号', v.account_name)}${infoGrid('视频ID', v.aweme_id)}${infoGrid('时长', fmtDuration(v.duration))}${infoGrid('发布时间', v.publish_time)}</div>
|
||||
<div class="info-row">${infoGrid('点赞', fmtWan(v.like_display || v.like_count))}${infoGrid('评论', fmtWan(v.comment_count))}${infoGrid('分享', fmtWan(v.share_count))}${infoGrid('收藏', fmtWan(v.collect_count))}</div>
|
||||
<div class="info-row">${infoGrid('标签', v.tags, true)}</div>
|
||||
|
||||
Reference in new issue
Block a user