R30: 列表页 toolbar 拆行 — 标题行只放返回+标题，tab/筛选/搜索/功能按钮一律放标题下一行
- renderAccounts：page-toolbar 内 toolbar-right(类型/赛道下拉 + 搜索 + 添加 + 更新)挪到独立 .acc-toolbar 行 - renderHot：page-toolbar 内 rank-tabs(3 tab) + toolbar-right(赛道/日期)挪到独立 .rank-toolbar 行 - 间距差异化：账号列表 4px(工具栏紧贴标题,功能性组合)/ 热点数据 16px(tab 区段独立感);微调自 -12px 一致间距后按用户反馈拆开 - 冒烟 cdp-verify-r30.mjs PASS:账号列表/热点数据/AI写脚本 三页 toolbar 结构正确(只含返回+标题,功能组件均下移) - 版本 ?v=20260903o 审查结论合规页(标题行仅返回+标题): - renderAccountDetail/VideoDetail/Rewrites(已在 R27 修)/Reviews(pager-info 是统计信息非功能)
This commit is contained in:
maogeigei committed
1 parent
7c98af6ecb
commit
8d51df5809
4 files changed
+100
-7
No files matched your search
@@ -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);
|
||||
@@ -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) => `
|
||||
<div class="page-toolbar">
|
||||
${toolbarBack()}
|
||||
<span class="page-title">热点数据</span>
|
||||
</div>
|
||||
${withFilters ? `<div class="rank-toolbar">
|
||||
<div class="rank-tabs" role="tablist">
|
||||
${RANK_TABS.map(([k, label, tip]) => `<button class="rank-tab${k === tab ? ' active' : ''}" data-rank-tab="${k}"${tip ? ` title="${tip}"` : ''} role="tab">${label}</button>`).join('')}
|
||||
</div>
|
||||
${withFilters ? `<div class="toolbar-right">
|
||||
<div class="toolbar-right">
|
||||
<select id="rankCat" class="input-select" title="赛道筛选">
|
||||
<option value="">全部赛道</option>
|
||||
${s.categories.map((c) => `<option value="${esc(c)}" ${c === s.category ? 'selected' : ''}>${esc(c)}</option>`).join('')}
|
||||
@@ -534,8 +536,8 @@ async function renderRanking(view) {
|
||||
<button class="btn" id="rankPrev" title="上一期">◀</button>
|
||||
<span class="pager-info" title="选择日期">${esc(s.date)}</span>
|
||||
<button class="btn" id="rankNext" title="下一期">▶</button>
|
||||
</div>` : ''}
|
||||
</div>`;
|
||||
</div>
|
||||
</div>` : ''}`;
|
||||
|
||||
// 标题列统一截断（作品标题很长）：悬停 title 看全文
|
||||
const titleTd = (text, url) => `<span class="rk-tl" title="${esc(String(text || '').replace(/"/g, '"'))}">${url ? `<a class="link" data-ext="${esc(url)}">${esc(text)}</a>` : esc(text)}</span>`;
|
||||
@@ -691,6 +693,8 @@ async function renderAccounts(view) {
|
||||
<div class="page-toolbar">
|
||||
${toolbarBack()}
|
||||
<span class="page-title">账号列表</span>
|
||||
</div>
|
||||
<div class="acc-toolbar">
|
||||
<div class="toolbar-right" style="margin-right:10px">
|
||||
<select id="accType" class="input-select">
|
||||
<option value="all" ${state.type === 'all' ? 'selected' : ''}>全部</option>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>MCN工作台</title>
|
||||
<link rel="stylesheet" href="style.css?v=20260903l">
|
||||
<link rel="stylesheet" href="style.css?v=20260903o">
|
||||
<script src="vendor/echarts.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
@@ -41,7 +41,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="app.js?v=20260903l"></script>
|
||||
<script src="data-pages.js?v=20260903l"></script>
|
||||
<script src="app.js?v=20260903o"></script>
|
||||
<script src="data-pages.js?v=20260903o"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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; }
|
||||
|
||||
Reference in new issue
Block a user