feat(工作台): 视频列表加收藏列+数字列右对齐，视频详情页信息三行+标签排版

project/短视频脚本创作/V1.0/mcn-work-shop/cdp-measure-cols2.mjs

@@ -0,0 +1,75 @@
+/* cdp-measure-cols2.mjs — 对照实验：移除 th-title width 后标题列实际宽度（09-01）
+ * 验证假设：auto 布局下 th 设 width 240 钳制了列宽；不设时剩余空间分配使标题列更宽
+ */
+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=measure2' + '#/account/3' });
+  await sleep(2500);
+  const measure = `(() => {
+    const ths = [...document.querySelectorAll('.table thead th')];
+    const w = (el) => el ? Math.round(el.getBoundingClientRect().width) : -1;
+    const obj = {};
+    ths.forEach((t) => { obj[t.textContent.trim()] = { w: w(t), cls: t.className }; });
+    return obj;
+  })()`;
+  const base = await evalJs(ws, measure);
+  console.log('当前(th width 240):', JSON.stringify(base, null, 1));
+  // 实验1：移除 th-title / th-pub 的 width（恢复 auto）
+  await evalJs(ws, `(() => {
+    const st = document.createElement('style');
+    st.id = 'exp';
+    st.textContent = 'th.th-title{width:auto!important;min-width:0!important} th.th-pub{width:auto!important}';
+    document.head.appendChild(st);
+    return true;
+  })()`);
+  await sleep(300);
+  const exp1 = await evalJs(ws, measure);
+  console.log('实验1(th width auto):', JSON.stringify(exp1, null, 1));
+  // 实验2：th min-width 240（不设上限 width）
+  await evalJs(ws, `(() => {
+    const st = document.getElementById('exp');
+    st.textContent = 'th.th-title{width:auto!important;min-width:240px!important} th.th-pub{width:130px!important}';
+    return true;
+  })()`);
+  await sleep(300);
+  const exp2 = await evalJs(ws, measure);
+  console.log('实验2(th min-width 240):', JSON.stringify(exp2, null, 1));
+  process.exit(0);
+}
+main().catch((e) => { console.error('ERROR:', e.message); process.exit(1); });