diff --git a/project/短视频脚本创作/V1.0/mcn-work-shop/cdp-verify-r30.mjs b/project/短视频脚本创作/V1.0/mcn-work-shop/cdp-verify-r30.mjs new file mode 100644 index 0000000..e99699f --- /dev/null +++ b/project/短视频脚本创作/V1.0/mcn-work-shop/cdp-verify-r30.mjs @@ -0,0 +1,85 @@ +// R30 冒烟:列表页 toolbar — 标题行只放 返回+标题,tab/筛选/搜索/按钮一律放标题下一行 +// 覆盖账号列表 + 热点数据两个明确违规页面 +const list = await fetch('http://localhost:9225/json').then((r) => r.json()); +const page = list.find((t) => t.type === 'page'); +if (!page) { console.log('ERR: no page'); process.exit(1); } +const ws = new WebSocket(page.webSocketDebuggerUrl); +let id = 0; const pending = new Map(); +const send = (method, params = {}) => new Promise((res, rej) => { const i = ++id; pending.set(i, { res, rej }); ws.send(JSON.stringify({ id: i, method, params })); }); +ws.onmessage = (e) => { const m = JSON.parse(e.data); if (m.id && pending.has(m.id)) { const p = pending.get(m.id); pending.delete(m.id); m.error ? p.rej(new Error(m.error.message)) : p.res(m.result); } }; +await new Promise((r) => (ws.onopen = r)); +const ev = async (expr) => { const r = await send('Runtime.evaluate', { expression: expr, returnByValue: true, awaitPromise: true }); if (r.exceptionDetails) return { __err: (r.exceptionDetails.exception?.description || r.exceptionDetails.text).slice(0, 200) }; return r.result.value; }; +const sleep = (ms) => new Promise((r) => setTimeout(r, ms)); +await send('Page.enable'); await send('Runtime.enable'); +const waitFor = async (expr, ms = 12000) => { const t0 = Date.now(); while (Date.now() - t0 < ms) { if (await ev(expr)) return true; await sleep(300); } return false; }; +const fail = (m) => { console.log('FAIL@' + m); process.exit(1); }; + +await send('Page.navigate', { url: 'http://localhost:8900/?v=' + Date.now() }); +if (!(await waitFor(`!!document.querySelector('#view')`))) fail('app boot'); +await ev(`document.querySelectorAll('.modal-mask').forEach((m) => m.remove())`); // 清 root 设置弹窗 + +const out = { accounts: {}, hot: {} }; + +/* ============ 账号列表 ============ */ +await ev(`location.hash = '#/accounts'`); +if (!(await waitFor(`document.querySelector('#view .acc-toolbar')`))) fail('accounts toolbar render'); +out.accounts = await ev(`(() => { + const tb = document.querySelector('#view .page > .page-toolbar'); + const acc = document.querySelector('#view .acc-toolbar'); + const tbChildren = tb ? [...tb.children].map((c) => ({ tag: c.tagName, cls: c.className, txt: (c.textContent || '').trim().slice(0, 30) })) : null; + const tbW = tb ? Math.round(tb.getBoundingClientRect().width) : null; + const tbH = tb ? Math.round(tb.getBoundingClientRect().height) : null; + const accW = acc ? Math.round(acc.getBoundingClientRect().width) : null; + const accIds = acc ? [...acc.querySelectorAll('[id]')].map((e) => e.id) : []; + // 验证 toolbar 与 acc-toolbar 在不同行 + const tbBottom = tb ? tb.getBoundingClientRect().bottom : null; + const accTop = acc ? acc.getBoundingClientRect().top : null; + const verticalGap = (tbBottom != null && accTop != null) ? Math.round(accTop - tbBottom) : null; + return { tbChildren, tbH, accH: acc ? Math.round(acc.getBoundingClientRect().height) : null, accIds, verticalGap, belowTb: verticalGap > 0, hasBackBtn: tb ? !!tb.querySelector('[data-back]') : null }; +})()`); + +/* ============ 热点数据 ============ */ +await ev(`location.hash = '#/ranking'`); +if (!(await waitFor(`document.querySelector('#view .rank-toolbar')`))) fail('hot toolbar render'); +out.hot = await ev(`(() => { + const tb = document.querySelector('#view .page > .page-toolbar'); + const rt = document.querySelector('#view .rank-toolbar'); + const tbChildren = tb ? [...tb.children].map((c) => ({ tag: c.tagName, cls: c.className, txt: (c.textContent || '').trim().slice(0, 30) })) : null; + const tabs = rt ? [...rt.querySelectorAll('.rank-tab')].map((t) => ({ txt: t.textContent.trim(), active: t.classList.contains('active') })) : []; + const right = rt ? [...rt.querySelectorAll('.toolbar-right [id], .toolbar-right [title]')].map((e) => ({ tag: e.tagName, id: e.id || null, txt: (e.textContent || '').trim().slice(0, 20) })) : []; + const tbBottom = tb ? tb.getBoundingClientRect().bottom : null; + const rtTop = rt ? rt.getBoundingClientRect().top : null; + const verticalGap = (tbBottom != null && rtTop != null) ? Math.round(rtTop - tbBottom) : null; + return { tbChildren, tabs, rightIds: right.map((r) => r.id).filter(Boolean), verticalGap, belowTb: verticalGap > 0 }; +})()`); + +/* ============ 回归:AI写脚本标题行仍合规(只有 返回+标题) ============ */ +await ev(`location.hash = '#/rewrites'`); +if (!(await waitFor(`document.querySelector('#view .rw-tabs')`))) fail('rewrites toolbar render'); +out.rewrites = await ev(`(() => { + const tb = document.querySelector('#view .page > .page-toolbar'); + return { tbChildren: tb ? [...tb.children].map((c) => ({ tag: c.tagName, cls: c.className, txt: (c.textContent || '').trim().slice(0, 30) })) : null }; +})()`); + +console.log(JSON.stringify(out, null, 1)); + +// 断言 +const A = out.accounts && !out.accounts.__err + && out.accounts.tbChildren && out.accounts.tbChildren.length === 2 + && out.accounts.tbChildren[0].txt === '←' && out.accounts.tbChildren[1].cls.includes('page-title') + && out.accounts.tbChildren.every((c) => !c.cls.includes('toolbar-right')) + && out.accounts.accIds.includes('accType') && out.accounts.accIds.includes('accTrack') && out.accounts.accIds.includes('accSearch') + && out.accounts.accIds.includes('accImport') && out.accounts.accIds.includes('accUpdate') + && out.accounts.belowTb === true; +const H = out.hot && !out.hot.__err + && out.hot.tbChildren && out.hot.tbChildren.length === 2 + && out.hot.tbChildren[0].txt === '←' && out.hot.tbChildren[1].cls.includes('page-title') + && out.hot.tabs.length === 3 + && out.hot.rightIds.includes('rankCat') && out.hot.rightIds.includes('rankPrev') && out.hot.rightIds.includes('rankNext') + && out.hot.belowTb === true; +const R = out.rewrites && out.rewrites.tbChildren && out.rewrites.tbChildren.length === 2 + && out.rewrites.tbChildren[0].txt === '←' && out.rewrites.tbChildren[1].cls.includes('page-title'); +const ok = A && H && R; +console.log(ok ? '\n=== PASS ===' : '\n=== CHECK === (A=' + A + ' H=' + H + ' R=' + R + ')'); +ws.close(); +process.exit(ok ? 0 : 1); \ No newline at end of file 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 cc45e1f..469f768 100644 --- a/project/短视频脚本创作/V1.0/mcn-work-shop/public/data-pages.js +++ b/project/短视频脚本创作/V1.0/mcn-work-shop/public/data-pages.js @@ -518,15 +518,17 @@ async function renderRanking(view) { const st = { week: mkState(), hot: mkState(), likes: mkState() }; let tab = 'week'; const tabLabel = () => { const t = RANK_TABS.find(([k]) => k === tab); return t ? t[1] : ''; }; - // tab 切换 + 赛道选择 + 时间切换 同一行(page-toolbar:返回 | 标题 | tabs | 筛选右;空/错误态不渲染筛选) + // tab 切换 + 赛道选择 + 时间切换 同一行(标题行只放 返回 | 标题,tab + 筛选放标题下一行 .rank-toolbar) const toolbar = (s, withFilters) => `
${toolbarBack()} 热点数据 +
+ ${withFilters ? `
${RANK_TABS.map(([k, label, tip]) => ``).join('')}
- ${withFilters ? `
+
diff --git a/project/短视频脚本创作/V1.0/mcn-work-shop/public/index.html b/project/短视频脚本创作/V1.0/mcn-work-shop/public/index.html index 995f729..4985c99 100644 --- a/project/短视频脚本创作/V1.0/mcn-work-shop/public/index.html +++ b/project/短视频脚本创作/V1.0/mcn-work-shop/public/index.html @@ -4,7 +4,7 @@ MCN工作台 - + @@ -41,7 +41,7 @@
- - + + diff --git a/project/短视频脚本创作/V1.0/mcn-work-shop/public/style.css b/project/短视频脚本创作/V1.0/mcn-work-shop/public/style.css index 65cf87c..a3e52dd 100644 --- a/project/短视频脚本创作/V1.0/mcn-work-shop/public/style.css +++ b/project/短视频脚本创作/V1.0/mcn-work-shop/public/style.css @@ -661,6 +661,10 @@ td.td-title { max-width: 240px; } .rw-tab-badge { display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 6px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); font-size: 12px; line-height: 18px; font-weight: 600; text-align: center; } .tab-active .rw-tab-badge { background: var(--primary); color: #fff; } .rw-note { font-size: 12px; color: var(--dim); margin: 0 0 12px; } +/* 列表页统一:标题下一行 = tab + 筛选/搜索/功能按钮(均不与标题/返回同行) */ +.acc-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -20px 0 16px; padding: 0 4px; } +.rank-toolbar { display: flex; align-items: center; gap: 14px; margin: -8px 0 16px; padding: 0 4px; } +.rank-toolbar .rank-tabs { flex: 1; } /* 视频状态「已解析」:浅绿色文字(去图标),区别于默认灰「未解析」 */ .st-parsed { color: #52b788; font-weight: 500; } .rw-chip { display: inline-flex; align-items: center; gap: 2px; max-width: 260px; padding: 2px 8px 2px 12px; background: var(--primary-soft); color: var(--primary); border-radius: 999px; font-size: 13px; }