80 lines
3.9 KiB
JavaScript
80 lines
3.9 KiB
JavaScript
|
/* cdp-measure-cols3.mjs — 还原「修改前」样式基准，测各列+td 实际宽度（09-01）
|
|||
|
|
* 修改前：th 无 class（auto）、td 为 cell-content(max-width:220px)
|
|||
|
|
* 对比：①原始 ②当前(th width240) ③修复方案(仅去掉 th-title width，td 保留加宽)
|
|||
|
|
*/
|
|||
|
|
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));
|
|||
|
|
|
|||
|
|
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');
|
|||
|
|
await cdp(ws, 'Page.navigate', { url: 'http://localhost:8900/?v=measure3' + '#/account/3' });
|
|||
|
|
await sleep(2500);
|
|||
|
|
const measure = `(() => {
|
|||
|
|
const ths = [...document.querySelectorAll('.table thead th')];
|
|||
|
|
const tds = document.querySelector('.table tbody tr') ? [...document.querySelector('.table tbody tr').children] : [];
|
|||
|
|
const w = (el) => el ? Math.round(el.getBoundingClientRect().width) : -1;
|
|||
|
|
const rows = [...document.querySelectorAll('.table tbody tr')].slice(0, 3).map((tr) => [...tr.children].map((td) => w(td)));
|
|||
|
|
return {
|
|||
|
|
ths: ths.map((t) => t.textContent.trim() + '=' + w(t)),
|
|||
|
|
tdTitle: w(tds[2] || null),
|
|||
|
|
tdPub: w(tds[0] || null),
|
|||
|
|
rows
|
|||
|
|
};
|
|||
|
|
})()`;
|
|||
|
|
const base = await evalJs(ws, measure);
|
|||
|
|
console.log('①当前(th width 240):', JSON.stringify(base));
|
|||
|
|
// 还原修改前：清掉 th-title/th-pub 宽度、td-title max-width 覆盖 → 恢复 cell-content 220 基准
|
|||
|
|
await evalJs(ws, `(() => {
|
|||
|
|
let st = document.getElementById('exp');
|
|||
|
|
if (!st) { st = document.createElement('style'); st.id = 'exp'; document.head.appendChild(st); }
|
|||
|
|
st.textContent = 'th.th-title{width:auto!important} th.th-pub{width:auto!important} td.td-title{max-width:220px!important}';
|
|||
|
|
return true;
|
|||
|
|
})()`);
|
|||
|
|
await sleep(300);
|
|||
|
|
const orig = await evalJs(ws, measure);
|
|||
|
|
console.log('②修改前基准(cell-content 220):', JSON.stringify(orig));
|
|||
|
|
// 修复方案A：th-title 去掉 width（auto），td-title max-width 保持 240（标题列内容自然加宽）
|
|||
|
|
await evalJs(ws, `(() => {
|
|||
|
|
const st = document.getElementById('exp');
|
|||
|
|
st.textContent = 'th.th-title{width:auto!important} th.th-pub{width:130px!important} td.td-title{max-width:240px!important}';
|
|||
|
|
return true;
|
|||
|
|
})()`);
|
|||
|
|
await sleep(300);
|
|||
|
|
const fixA = await evalJs(ws, measure);
|
|||
|
|
console.log('③修复A(th-title auto, td 240):', JSON.stringify(fixA));
|
|||
|
|
process.exit(0);
|
|||
|
|
}
|
|||
|
|
main().catch((e) => { console.error('ERROR:', e.message); process.exit(1); });
|