guanlan-src/app_frontEnd/web/tools/layout_diff.mjs

// P61 排版计算样式对比：v2.9.2 原文页（工作台）↔ 新版 `/detail/v2#workbench`
import { readFileSync } from 'node:fs'
import { fileURLToPath } from 'node:url'
import { dirname, resolve } from 'node:path'
import { JSDOM, VirtualConsole } from 'jsdom'
const HERE = dirname(fileURLToPath(import.meta.url))
const GATEWAY = 'http://106.120.102.238:28084'
const dist = resolve(HERE, '../../../release/web')
const fleet = readFileSync(resolve(HERE, '_fleet_fixture.json'), 'utf8')
const SEL = ['body', '#app', '.wrap', 'header.top', 'header.top > .right', 'nav.tabs', 'nav.wb-tabs', 'main#root', '.page-head']
const PROPS = ['display', 'maxWidth', 'marginLeft', 'marginRight', 'padding', 'width', 'justifyContent', 'alignItems', 'gap', 'flexWrap']

function report(tag, doc, win) {
  console.log('==== ' + tag + ' ====')
  for (const s of SEL) {
    const el = doc.querySelector(s)
    if (!el) { console.log(s + ' : 缺失'); continue }
    const cs = win.getComputedStyle(el)
    console.log(s + ' : ' + PROPS.map((p) => p + '=' + (cs[p] || '-')).join(' '))
  }
}

// ① 基线（v2.9.2 原文页）
const bdom = new JSDOM(readFileSync(dist + '/detail_v2.html', 'utf8'),
  { url: GATEWAY + '/detail/v2', runScripts: 'dangerously', pretendToBeVisual: true, virtualConsole: new VirtualConsole(),
    beforeParse: (w) => { w.fetch = async (u) => { const s = String(u)
      const body = /fleet/.test(s) ? fleet : '{}'
      return { ok: true, status: 200, headers: new Map(), text: async () => body, json: async () => JSON.parse(body) } } } })
{
  const d = bdom.window.document
  for (let i = 0; i < 100; i++) { const r = d.getElementById('root'); if (r && r.querySelector('.page-head')) break; await new Promise((x) => setTimeout(x, 400)) }
}
report('BASE v2.9.2', bdom.window.document, bdom.window)

// ② 新版
const idx = readFileSync(dist + '/index.html', 'utf8')
const jsFile = (idx.match(/src="([^"]+\.js)"/) || [])[1].replace(/^.*\//, '')
const cssFile = (idx.match(/href="([^"]+\.css)"/) || [])[1].replace(/^.*\//, '')
const code = readFileSync(dist + '/assets/' + jsFile, 'utf8')
const css = readFileSync(dist + '/assets/' + cssFile, 'utf8')
const ndom = new JSDOM(idx.replace('</head>', '<style>' + css + '</style></head>'),
  { url: GATEWAY + '/detail/v2#workbench', runScripts: 'outside-only', pretendToBeVisual: true, virtualConsole: new VirtualConsole() })
{
  const w = ndom.window
  w.fetch = async (u) => { const s = String(u); const body = /fleet/.test(s) ? fleet : '{}'
    return { ok: true, status: 200, json: async () => JSON.parse(body), text: async () => body } }
  try { w.eval(code) } catch (e) { console.log('EVAL_ERR ' + String(e).slice(0, 100)) }
  for (let i = 0; i < 20; i++) { await new Promise((x) => setTimeout(x, 400)); if (w.document.querySelector('nav.tabs#tabs')) break }
}
report('NEW Vue', ndom.window.document, ndom.window)