feat(工作台): 视频详情首行改「查看视频」可点击链接,不显示具体视频地址

This commit is contained in:
maogeigei committed 2026-09-01 15:11:32 +08:00
1 parent eb73c89b90
commit 1e2b8378c0
3 files changed
+9 -8

No files matched your search

+2
View File
@@ -257,3 +257,5 @@
- **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、无渲染失败 - **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 视频地址版)——**以用户最新消息为权威判定结构**,中间版本改动若与用户需求冲突直接回退 - **教训**: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 可点、四组行顺序正确、无渲染失败) - **15:05 视频详情再调(用户最新需求定稿)**:toolbar 返回箭头后 `page-title` **显示视频标题名称**(非静态);信息卡**首行改「视频地址」标签**(4字)+ 可点击链接(data-ext 打开视频网页),删 `video-detail-title` 大字号标题行。最终结构:toolbar=视频标题;信息卡=①视频地址(可点) ②账号/视频ID/时长/发布时间 ③点赞/评论/分享/收藏 ④标签。**验证**:cdp-verify-titlebar.mjs 8/8 PASS(toolbar=视频标题全名、首行标签=视频地址、链接 https 可点、四组行顺序正确、无渲染失败)
- **15:09 再调(隐藏 URL)**:用户不要显示视频具体地址——首行改整行「**查看视频 ↗**」可点击链接(去掉 infoGrid label/value 结构,URL 不渲染成文本,仅存 data-ext 属性),标签名从「视频地址」改「查看视频」。**验证**:cdp-verify-titlebar.mjs 9/9 PASS(首行=查看视频↗、无 URL 明文、链接可点、四组行正确)
- **★CDP 验证脚本同 URL 复用陷阱(15:09 实测)**:验证脚本 navigate 固定 URL(如 `?v=titlebar#/video/680`)二次运行会**复用旧页面不重新加载 JS**(浏览器同 URL 判定),导致断言读到上一版 DOM 误判 FAIL——服务端 curl 已是新代码但页面显示旧内容。**修复:验证 URL 带时间戳 `?v=tb${Date.now()}` 强制全新加载**(与工作台重开页面 ?v= 同理,验证脚本也要遵守)
@@ -49,7 +49,7 @@ async function main() {
let pass = 0, fail = 0; let pass = 0, fail = 0;
const check = (name, cond, extra = '') => { cond ? pass++ : fail++; console.log((cond ? 'PASS' : 'FAIL') + ' | ' + name + (cond ? '' : ' ← ' + extra)); }; 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 cdp(ws, 'Page.navigate', { url: 'http://localhost:8900/?v=tb' + Date.now() + '#/video/680' });
await waitFor(ws, `!!document.querySelector('.video-info')`, 15000, '视频详情渲染'); await waitFor(ws, `!!document.querySelector('.video-info')`, 15000, '视频详情渲染');
const r = await evalJs(ws, `(() => { const r = await evalJs(ws, `(() => {
@@ -57,15 +57,13 @@ async function main() {
const rows = card ? [...card.querySelectorAll('.info-row')] : []; const rows = card ? [...card.querySelectorAll('.info-row')] : [];
const toolbarTitle = document.querySelector('.page-toolbar .page-title'); const toolbarTitle = document.querySelector('.page-toolbar .page-title');
const r0 = rows[0]; const r0 = rows[0];
const firstLabel = r0 ? r0.querySelector('.info-label').textContent.trim() : '';
const firstLink = r0 ? r0.querySelector('a') : null; const firstLink = r0 ? r0.querySelector('a') : null;
const rowLabels = rows.slice(1).map((row) => [...row.querySelectorAll('.info-label')].map((l) => l.textContent.trim())); const rowLabels = rows.slice(1).map((row) => [...row.querySelectorAll('.info-label')].map((l) => l.textContent.trim()));
return { return {
toolbarTitle: toolbarTitle ? toolbarTitle.textContent.trim() : '', toolbarTitle: toolbarTitle ? toolbarTitle.textContent.trim() : '',
rowCount: rows.length, rowCount: rows.length,
firstLabel, firstText: r0 ? r0.textContent.trim() : '',
firstHref: firstLink ? (firstLink.getAttribute('data-ext') || firstLink.getAttribute('href')) : null, firstHref: firstLink ? (firstLink.getAttribute('data-ext') || firstLink.getAttribute('href')) : null,
firstText: r0 ? r0.textContent.trim().slice(0, 60) : '',
rowLabels, rowLabels,
hasRenderErr: document.body.textContent.includes('渲染失败') || document.body.textContent.includes('not defined') hasRenderErr: document.body.textContent.includes('渲染失败') || document.body.textContent.includes('not defined')
}; };
@@ -73,8 +71,9 @@ async function main() {
check('toolbar 显示视频标题名称(非静态"视频详情"): ' + r.toolbarTitle, !!r.toolbarTitle && r.toolbarTitle !== '视频详情' && r.toolbarTitle.length > 2, r.toolbarTitle); check('toolbar 显示视频标题名称(非静态"视频详情"): ' + r.toolbarTitle, !!r.toolbarTitle && r.toolbarTitle !== '视频详情' && r.toolbarTitle.length > 2, r.toolbarTitle);
check('信息卡共 4 组行', r.rowCount === 4); check('信息卡共 4 组行', r.rowCount === 4);
check('首行标签=「视频地址」: ' + r.firstLabel, r.firstLabel === '视频地址', r.firstLabel); check('首行显示「查看视频」字样: ' + r.firstText, r.firstText.includes('查看视频'), r.firstText);
check('首行含可点击链接(https): ' + (r.firstHref || '').slice(0, 40), !!r.firstHref && /^https?:/.test(r.firstHref), r.firstHref || ''); check('首行不含具体 URL 明文', !/https?:\/\//.test(r.firstText), r.firstText);
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('第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('第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('第4行=标签', JSON.stringify(r.rowLabels[2]) === JSON.stringify(['标签']), JSON.stringify(r.rowLabels[2]));
@@ -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'); const analysisToMd = (obj) => Object.entries(obj || {}).map(([k, val]) => `# ${k}\n\n${val}`).join('\n\n---\n\n');
function load() { function load() {
const urlVal = v.video_url ? `<a class="link" data-ext="${esc(v.video_url)}" title="打开视频网页">${esc(v.video_url)}</a>` : '无'; const viewLink = v.video_url ? `<a class="link" data-ext="${esc(v.video_url)}" title="打开视频网页">查看视频 ↗</a>` : '无';
const scriptMd = parse.content || null; const scriptMd = parse.content || null;
const deconstructMd = parse.analysis ? analysisToMd(parse.analysis) : null; const deconstructMd = parse.analysis ? analysisToMd(parse.analysis) : null;
const analysisMd = analysis && analysis.content ? analysis.content : null; const analysisMd = analysis && analysis.content ? analysis.content : null;
@@ -545,7 +545,7 @@ async function renderVideoDetail(view, id) {
<div class="page-toolbar">${toolbarBack()}<span class="page-title">${esc(cleanTitle(v.video_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="detail-body">
<div class="info-card video-info"> <div class="info-card video-info">
<div class="info-row">${infoGrid('视频地址', urlVal, true, true)}</div> <div class="info-row"><div class="info-item info-wide">${viewLink}</div></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('账号', 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('点赞', 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> <div class="info-row">${infoGrid('标签', v.tags, true)}</div>