|
|
@@ -0,0 +1,50 @@
|
|
|
+// 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)
|
zhouyang.xie