98 lines
4.2 KiB
JavaScript
98 lines
4.2 KiB
JavaScript
import { chromium } from 'playwright-core'
|
|
import { PNG } from 'pngjs'
|
|
|
|
const BASE = 'http://localhost:5082'
|
|
const browser = await chromium.launch({
|
|
headless: true,
|
|
executablePath: 'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe',
|
|
})
|
|
const page = await browser.newPage({ viewport: { width: 1440, height: 900 }, deviceScaleFactor: 1 })
|
|
|
|
await page.addInitScript(() => {
|
|
sessionStorage.setItem('fms-login', JSON.stringify({ loginInfo: { token: 'dev-token', user: { id: 1, name: 'dev', account: 'g3soft' } } }))
|
|
localStorage.setItem('fms-user', JSON.stringify({ userInfo: { orgId: 'G3HD', account: 'g3soft' } }))
|
|
})
|
|
await page.route('**/api/**', async (route) => {
|
|
const req = route.request()
|
|
const url = req.url()
|
|
let body = {}
|
|
try { body = req.postDataJSON() || {} } catch {}
|
|
if (url.includes('/data/loaddata')) {
|
|
const rows = body.view_name === 's_module' ? [{ b_id: 1, b_code: 'b_port', b_name: '港口管理' }] :
|
|
body.view_name === 'bf_files_cateid' ? [{ b_id: '10', b_name: '合同文件' }] : []
|
|
return route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ code: 0, data: rows }) })
|
|
}
|
|
if (url.includes('/data/page')) {
|
|
const files = Array.from({ length: 4 }, (_, i) => ({
|
|
subid: String(1000 + i), father: '1001', mx_moduleid: '1', mx_cate_id: '10',
|
|
mx_filename: `文件-${i + 1}.pdf`, mx_filesize: (i + 1) * 1024 * 1024,
|
|
mx_fileext: 'pdf', mx_mapfilename: '',
|
|
}))
|
|
return route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ code: 0, data: { rows: files, total: files.length } }) })
|
|
}
|
|
return route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ code: 0, data: null }) })
|
|
})
|
|
|
|
await page.goto(`${BASE}/file-demo`, { waitUntil: 'networkidle', timeout: 30000 })
|
|
await page.waitForTimeout(2000)
|
|
await page.locator('button:has-text("声明式弹窗")').click()
|
|
await page.waitForTimeout(1500)
|
|
|
|
const buf = await page.screenshot({ fullPage: false })
|
|
const png = PNG.sync.read(buf)
|
|
|
|
// Scan for "line-like" pixels: contiguous vertical runs of a gray border color in the splitter region.
|
|
// Detect distinct vertical line clusters (x positions with many pixels of border color).
|
|
const { width, height, data } = png
|
|
const isBorderColor = (x, y) => {
|
|
const i = (y * width + x) * 4
|
|
const r = data[i], g = data[i + 1], b = data[i + 2]
|
|
// fms-border rgb(229,230,235) — treat near-gray light lines
|
|
return Math.abs(r - g) <= 6 && Math.abs(g - b) <= 6 && r >= 200 && r <= 245
|
|
}
|
|
const colCounts = new Array(width).fill(0)
|
|
for (let x = 0; x < width; x++) {
|
|
for (let y = 200; y < 850; y++) {
|
|
if (isBorderColor(x, y)) colCounts[x]++
|
|
}
|
|
}
|
|
// Find clusters of consecutive columns with meaningful counts
|
|
const clusters = []
|
|
let start = -1
|
|
for (let x = 0; x < width; x++) {
|
|
if (colCounts[x] > 300) {
|
|
if (start === -1) start = x
|
|
} else if (start !== -1) {
|
|
clusters.push({ from: start, to: x - 1, count: colCounts[start] })
|
|
start = -1
|
|
}
|
|
}
|
|
if (start !== -1) clusters.push({ from: start, to: width - 1, count: colCounts[start] })
|
|
console.log('vertical line clusters (border-colored, >300px tall):')
|
|
console.log(JSON.stringify(clusters, null, 2))
|
|
|
|
// Also check the modal resize handles positions
|
|
const handles = await page.evaluate(() => {
|
|
const hs = Array.from(document.querySelectorAll('.fms-modal-resizer')).map((el) => {
|
|
const r = el.getBoundingClientRect()
|
|
const cs = getComputedStyle(el)
|
|
const before = getComputedStyle(el, '::before')
|
|
return {
|
|
cls: el.className,
|
|
x: Math.round(r.x), y: Math.round(r.y), w: Math.round(r.width), h: Math.round(r.height),
|
|
beforeW: before.width, beforeH: before.height, beforeOpacity: before.opacity,
|
|
}
|
|
})
|
|
const bars = Array.from(document.querySelectorAll('.fms-splitter-bar')).map((el) => {
|
|
const r = el.getBoundingClientRect()
|
|
return { cls: el.className, x: Math.round(r.x), y: Math.round(r.y), w: Math.round(r.width), h: Math.round(r.height) }
|
|
})
|
|
return { handles, bars }
|
|
})
|
|
console.log('modal resize handles + splitter bars:')
|
|
console.log(JSON.stringify(handles, null, 2))
|
|
|
|
// Save the screenshot for reference
|
|
require('fs').writeFileSync('.playwright-cli/dialog-geo.png', buf)
|
|
await browser.close()
|