From c165b4c2ed9796da1b4165d7e298aa42ac1b4421 Mon Sep 17 00:00:00 2001 From: maogeigei Date: Tue, 1 Sep 2026 15:04:22 +0800 Subject: [PATCH] =?UTF-8?q?fix(=E5=B7=A5=E4=BD=9C=E5=8F=B0):=20=E8=A7=86?= =?UTF-8?q?=E9=A2=91=E8=AF=A6=E6=83=85=E6=A0=87=E9=A2=98=E5=8E=BB=E9=87=8D?= =?UTF-8?q?=EF=BC=88toolbar=E9=9D=99=E6=80=81+=E4=BF=A1=E6=81=AF=E5=8D=A1?= =?UTF-8?q?=E6=A0=87=E9=A2=98=E8=A1=8C=EF=BC=89=E4=B8=8E2/3=E8=A1=8C?= =?UTF-8?q?=E5=AD=97=E6=AE=B5=E7=AD=89=E5=AE=BDgrid?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .workbuddy/memory/2026-09-01.md | 4 + .../V1.0/mcn-work-shop/cdp-diag-videoinfo.mjs | 60 +++++++++++++ .../V1.0/mcn-work-shop/cdp-verify-addr.mjs | 90 +++++++++++++++++++ .../mcn-work-shop/cdp-verify-videoinfo2.mjs | 87 ++++++++++++++++++ .../V1.0/mcn-work-shop/public/data-pages.js | 2 +- .../V1.0/mcn-work-shop/public/style.css | 4 +- 6 files changed, 245 insertions(+), 2 deletions(-) create mode 100644 project/短视频脚本创作/V1.0/mcn-work-shop/cdp-diag-videoinfo.mjs create mode 100644 project/短视频脚本创作/V1.0/mcn-work-shop/cdp-verify-addr.mjs create mode 100644 project/短视频脚本创作/V1.0/mcn-work-shop/cdp-verify-videoinfo2.mjs diff --git a/.workbuddy/memory/2026-09-01.md b/.workbuddy/memory/2026-09-01.md index d0b735b..06c6182 100644 --- a/.workbuddy/memory/2026-09-01.md +++ b/.workbuddy/memory/2026-09-01.md @@ -252,3 +252,7 @@ - **需求**：视频信息排版改三行——①视频标题（独立行）②账号/视频ID/时长/发布时间 ③点赞/评论/分享/收藏，最下面保留标签 - **实现**：data-pages.js info-grid 平铺改 `.info-row` 分组（标题用 `.video-detail-title` 大字号独立行 + 两组 info-row + 标签 wide 行；去掉播放字段——需求未列）；style.css 加 `.video-info .video-detail-title`（18px/600/margin-bottom） - **验证**：cdp-verify-videoinfo.mjs 7/7 PASS——标题 18px 独立行、三组行 label 顺序正确（账号组/数据组/标签）、无渲染失败 +- **14:58 视频详情排版微调（用户两轮反馈）**：①标题重复——toolbar `page-title` 与信息卡 `video-detail-title` 都显示视频标题，改 toolbar 为静态「视频详情」；②第2/3行字段间隔不齐——`.info-row` 原为 `flex gap 80px`+内容自适应宽，改 `.video-info .info-row` 为 `grid repeat(4, minmax(0,1fr)) gap 10px 18px`（四字段等宽，间隔用之前 18px，实测 282×4 等宽）；③第一行「视频标题」改名为「视频地址」——`infoGrid('视频地址', url链接, wide, raw)`，value 为可点击 `` 打开视频网页，删 `.video-detail-title` 死代码 +- **验证**：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 视频地址版）——**以用户最新消息为权威判定结构**，中间版本改动若与用户需求冲突直接回退 diff --git a/project/短视频脚本创作/V1.0/mcn-work-shop/cdp-diag-videoinfo.mjs b/project/短视频脚本创作/V1.0/mcn-work-shop/cdp-diag-videoinfo.mjs new file mode 100644 index 0000000..de7ebca --- /dev/null +++ b/project/短视频脚本创作/V1.0/mcn-work-shop/cdp-diag-videoinfo.mjs @@ -0,0 +1,60 @@ +/* cdp-diag-videoinfo.mjs — 诊断视频详情渲染失败（09-01） */ +const CDP = 'http://127.0.0.1:9223'; +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 }); + 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'); + const ws = tab.webSocketDebuggerUrl; + await cdp(ws, 'Page.enable'); + await cdp(ws, 'Runtime.enable'); + const errors = []; + const onEvt = (ev) => { + const m = JSON.parse(ev.data); + if (m.method === 'Runtime.exceptionThrown') errors.push(JSON.stringify(m.params.exceptionDetails).slice(0, 400)); + if (m.method === 'Runtime.consoleAPICalled' && m.params.type === 'error') errors.push('[console.error] ' + (m.params.args || []).map((a) => a.value || a.description || '').join(' ').slice(0, 300)); + }; + const sock = new WebSocket((await (await fetch(CDP + '/json')).json()).find((x) => x.id === tab.id).webSocketDebuggerUrl); + sock.onmessage = onEvt; + await new Promise((r) => (sock.onopen = r)); + + await evalJs(ws, `location.href = 'http://localhost:8900/?v=diag1#/video/680'`); + await sleep(4000); + const state = await evalJs(ws, `(() => { + const title = document.querySelector('.video-detail-title'); + const err = document.querySelector('.empty'); + return { + hash: location.hash, + hasTitle: !!title, + emptyText: err ? err.textContent.trim().slice(0, 60) : '', + bodyStart: document.body.textContent.trim().slice(0, 200), + hasRenderFail: document.body.textContent.includes('渲染失败'), + hasAccReset: document.body.textContent.includes('accReset') + }; + })()`); + console.log('STATE:', JSON.stringify(state, null, 2)); + console.log('JS ERRORS:', errors.length ? errors.join('\n') : '无'); + process.exit(0); +} +main().catch((e) => { console.error('ERROR:', e.message); process.exit(1); }); diff --git a/project/短视频脚本创作/V1.0/mcn-work-shop/cdp-verify-addr.mjs b/project/短视频脚本创作/V1.0/mcn-work-shop/cdp-verify-addr.mjs new file mode 100644 index 0000000..a7be48a --- /dev/null +++ b/project/短视频脚本创作/V1.0/mcn-work-shop/cdp-verify-addr.mjs @@ -0,0 +1,90 @@ +/* cdp-verify-addr.mjs — 验证视频详情页：工具栏标题去重(静态"视频详情") + 第一行改为"视频地址"(点击打开视频) + 2/3行四字段等宽（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) => { cond ? pass++ : fail++; console.log((cond ? 'PASS' : 'FAIL') + ' | ' + name); }; + + await cdp(ws, 'Page.navigate', { url: 'http://localhost:8900/?v=addr#/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 rowLabels = rows.map((row) => [...row.querySelectorAll('.info-label')].map((l) => l.textContent.trim())); + const firstItem = rows[0] ? rows[0].querySelector('.info-item') : null; + const firstLink = firstItem ? firstItem.querySelector('a.link') : null; + const widths = rows.slice(1).map((row) => [...row.querySelectorAll('.info-item')].map((it) => Math.round(it.getBoundingClientRect().width))); + const pageTitle = document.querySelector('.page-toolbar .page-title'); + const hasRenderErr = document.body.textContent.includes('渲染失败'); + return { + rowCount: rows.length, + rowLabels, + firstLabel: firstItem ? firstItem.querySelector('.info-label').textContent.trim() : '', + firstHref: firstLink ? firstLink.getAttribute('data-ext') : null, + firstText: firstItem ? firstItem.querySelector('.info-value').textContent.trim().slice(0, 40) : '', + pageTitle: pageTitle ? pageTitle.textContent.trim() : '', + widths, + hasRenderErr + }; + })()`); + + check('工具栏标题为静态「视频详情」（非视频标题）', r.pageTitle === '视频详情'); + check('信息卡共 4 行', r.rowCount === 4); + check('第1行 label=视频地址（' + r.firstLabel + '）', r.firstLabel === '视频地址'); + check('第1行值为可点击链接且指向视频 URL', !!r.firstHref && r.firstHref.startsWith('http')); + check('第2行=账号/视频ID/时长/发布时间', JSON.stringify(r.rowLabels[1]) === JSON.stringify(['账号', '视频ID', '时长', '发布时间'])); + check('第3行=点赞/评论/分享/收藏', JSON.stringify(r.rowLabels[2]) === JSON.stringify(['点赞', '评论', '分享', '收藏'])); + check('第4行=标签', JSON.stringify(r.rowLabels[3]) === JSON.stringify(['标签'])); + check('第2行四字段等宽（' + r.widths[0] + '）', new Set(r.widths[0]).size === 1); + check('第3行四字段等宽（' + r.widths[1] + '）', new Set(r.widths[1]).size === 1); + 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); }); diff --git a/project/短视频脚本创作/V1.0/mcn-work-shop/cdp-verify-videoinfo2.mjs b/project/短视频脚本创作/V1.0/mcn-work-shop/cdp-verify-videoinfo2.mjs new file mode 100644 index 0000000..5def42f --- /dev/null +++ b/project/短视频脚本创作/V1.0/mcn-work-shop/cdp-verify-videoinfo2.mjs @@ -0,0 +1,87 @@ +/* cdp-verify-videoinfo2.mjs — 验证：视频详情标题去重 + 第2/3行字段等宽统一（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) => { cond ? pass++ : fail++; console.log((cond ? 'PASS' : 'FAIL') + ' | ' + name); }; + + await cdp(ws, 'Page.navigate', { url: 'http://localhost:8900/?v=vinfo2#/video/680' }); + await waitFor(ws, `!!document.querySelector('.video-detail-title')`, 15000, '视频详情渲染'); + + const r = await evalJs(ws, `(() => { + const card = document.querySelector('.video-info'); + const title = card ? card.querySelector('.video-detail-title') : null; + const toolbarTitle = document.querySelector('.page-toolbar .page-title'); + const rows = card ? [...card.querySelectorAll('.info-row')] : []; + const rowWidths = rows.slice(0, 2).map((row) => [...row.querySelectorAll('.info-item')].map((it) => Math.round(it.getBoundingClientRect().width))); + const titleText = title ? title.textContent.trim() : ''; + const titleOccur = document.body.textContent.split(titleText).length - 1; + return { + toolbarTitle: toolbarTitle ? toolbarTitle.textContent.trim() : '', + hasCardTitle: !!title, + cardTitle: titleText.slice(0, 20), + titleOccur, + rowCount: rows.length, + rowWidths, + hasRenderErr: document.body.textContent.includes('渲染失败') + }; + })()`); + + check('toolbar 标题=「视频详情」静态（' + r.toolbarTitle + '）', r.toolbarTitle === '视频详情'); + check('信息卡标题行存在（' + r.cardTitle + '）', r.hasCardTitle && !!r.cardTitle); + check('视频标题全页仅出现 1 次（' + r.titleOccur + '）', r.titleOccur === 1); + check('共 3 组信息行', r.rowCount === 3); + const w1 = r.rowWidths[0] || [], w2 = r.rowWidths[1] || []; + check('第2行 4 字段等宽（' + JSON.stringify(w1) + '）', w1.length === 4 && new Set(w1).size === 1); + check('第3行 4 字段等宽（' + JSON.stringify(w2) + '）', w2.length === 4 && new Set(w2).size === 1); + check('第2/3行字段宽度一致（' + (w1[0] || '') + ' vs ' + (w2[0] || '') + '）', w1.length === 4 && w2.length === 4 && w1[0] === w2[0]); + 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); }); diff --git a/project/短视频脚本创作/V1.0/mcn-work-shop/public/data-pages.js b/project/短视频脚本创作/V1.0/mcn-work-shop/public/data-pages.js index ca5b74a..5bf0c6f 100644 --- a/project/短视频脚本创作/V1.0/mcn-work-shop/public/data-pages.js +++ b/project/短视频脚本创作/V1.0/mcn-work-shop/public/data-pages.js @@ -542,7 +542,7 @@ async function renderVideoDetail(view, id) { else body = analysisMd ? `
${renderMarkdown(analysisMd)}
` : `
该视频暂无视频分析
`; view.innerHTML = `
-
${toolbarBack()}${esc(cleanTitle(v.video_title) || '视频详情')}
+
${toolbarBack()}视频详情
${titleVal}
diff --git a/project/短视频脚本创作/V1.0/mcn-work-shop/public/style.css b/project/短视频脚本创作/V1.0/mcn-work-shop/public/style.css index 98b2470..b675dc3 100644 --- a/project/短视频脚本创作/V1.0/mcn-work-shop/public/style.css +++ b/project/短视频脚本创作/V1.0/mcn-work-shop/public/style.css @@ -378,7 +378,9 @@ td.td-title { max-width: 240px; } .info-label { font-size: 14px; color: var(--dim); } .info-value { font-size: 15px; color: var(--text); word-break: break-word; white-space: pre-wrap; line-height: 1.6; } /* 视频详情信息卡：标题独立一行（大字号），下方按行分组 */ -.video-info .video-detail-title { font-size: 18px; font-weight: 600; color: var(--text); margin-bottom: 14px; word-break: break-word; line-height: 1.5; } +/* 视频详情第2/3行：四字段等宽 grid（字段间隔统一用之前的 18px，避免 flex 自适应参差） */ +.video-info .info-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 18px; } +.video-info .info-row .info-item { min-width: 0; } /* 长文本默认最多 10 行，可点击展开/收起（账号定位等） */ /* 09-01 改用 block+max-height 裁剪：display:-webkit-box 下长句不折行，内容宽被撑到 1896px 导致 main 横向滚动条 */ .clamp-text { display: block; max-height: 240px; overflow: hidden; word-break: break-word; overflow-wrap: anywhere; } /* 240px=10行×15px×1.6 */