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

// P103：检查"页面里的图"与"导出会用到的图"是否一致
// ① 在真实渲染的页面(jsdom)里点月报，逐个章节块找 svg，报告 viewBox/尺寸/内容规模
// ② 检查本机是否有可用的 SVG→PNG 栅格化工具（sharp/resvg/canvas），以便做像素比对
import { readFileSync, existsSync } 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 dist = resolve(HERE, '../../../release/web')
const GW = 'http://106.120.102.238:28084'
const fleet = readFileSync(resolve(HERE, '_fleet_fixture.json'), 'utf8')
const facts = '{"cards":[{"c":"WTG01","verdict":"定论","part":"主轴承"}],"contract_sha256":"abc"}'

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 errs = []
const vc = new VirtualConsole()
vc.on('jsdomError', (e) => errs.push(String(e && e.message).slice(0, 100)))
vc.on('error', (...a) => errs.push(a.map(String).join(' ').slice(0, 100)))
const dom = new JSDOM(idx.replace('</head>', '<style>' + css + '</style></head>'),
  { url: GW + '/detail/v2#tab=report', runScripts: 'outside-only', pretendToBeVisual: true, virtualConsole: vc })
const w = dom.window
w.fetch = async (u) => {
  const s = String(u)
  const body = /fleet/.test(s) ? fleet : (/facts/.test(s) ? facts : '{}')
  return { ok: true, status: 200, json: async () => JSON.parse(body), text: async () => body }
}
try { w.eval(code) } catch (e) { errs.push('EVAL ' + String(e).slice(0, 120)) }
for (let i = 0; i < 24; i++) { await new Promise((r) => setTimeout(r, 400)); if (w.document.querySelector('[data-preset="month"]')) break }
const pre = w.document.querySelector('[data-preset="month"]')
if (pre) pre.dispatchEvent(new w.MouseEvent('click', { bubbles: true }))
await new Promise((r) => setTimeout(r, 2500))

const d = w.document
const blocks = [...d.querySelectorAll('.paper [data-blk]')]
console.log('BLOCKS_WITH_KEY ' + blocks.length)
const chartKeys = []
for (const b of blocks) {
  const k = b.getAttribute('data-blk')
  const svgs = b.querySelectorAll('svg')
  if (!svgs.length) continue
  chartKeys.push(k)
  const s = svgs[0]
  const vb = s.getAttribute('viewBox')
  const cls = s.getAttribute('class') || ''
  const els = s.querySelectorAll('*').length
  const txt = (s.textContent || '').replace(/\s+/g, ' ').trim().slice(0, 60)
  console.log(`  ${k.padEnd(8)} svg=${svgs.length} viewBox=${vb} class="${cls}" els=${els} text="${txt}"`)
}
console.log('CHART_KEYS ' + JSON.stringify(chartKeys))
// 递归查找：是否还有位于 [data-blk] 之外的 svg（那些导出时会被漏掉）
const all = [...d.querySelectorAll('.paper svg')]
const inBlk = blocks.reduce((n, b) => n + b.querySelectorAll('svg').length, 0)
console.log(`SVG_TOTAL ${all.length} SVG_IN_BLOCKS ${inBlk} SVG_OUTSIDE ${all.length - inBlk}`)
for (const s of all) {
  if (!s.closest('[data-blk]')) console.log('  OUTSIDE: ' + (s.outerHTML || '').slice(0, 120))
}
console.log('ERRS ' + errs.length + (errs.length ? ' :: ' + errs[0] : ''))

// ② 栅格化工具可用性
const cands = ['sharp', 'canvas', '@resvg/resvg-js', 'resvg-js', 'svg2img', 'puppeteer', 'playwright']
const nm = resolve(HERE, '../node_modules')
const found = cands.filter((c) => existsSync(resolve(nm, c)))
console.log('RASTERIZERS ' + JSON.stringify(found))
console.log('HAS_CHROME ' + ['C:/Program Files/Google/Chrome/Application/chrome.exe', 'C:/Program Files (x86)/Microsoft/Edge/Application/msedge.exe'].filter((p) => existsSync(p)))