u

code/g3soft-libs/packages/ui/probe-rgb.mjs

@@ -0,0 +1,69 @@
+import { chromium } from '@playwright/test'
+
+/**
+ * 停止试错，先看清真相：把那 4 个像素的**实际 RGB 和所属元素**打出来。
+ */
+const BASE = process.env.PROBE_URL || 'http://localhost:5200'
+const browser = await chromium.launch()
+const page = await browser.newPage({ viewport: { width: 1400, height: 1200 } })
+await page.goto(BASE, { waitUntil: 'networkidle' })
+
+const clipSample = async (x, y, w, h) => {
+  const shot = await page.screenshot({ clip: { x, y, width: w, height: h } })
+  return page.evaluate(async (dataUrl) => {
+    const img = new Image()
+    await new Promise((res) => {
+      img.onload = res
+      img.src = dataUrl
+    })
+    const cv = document.createElement('canvas')
+    cv.width = img.width
+    cv.height = img.height
+    const ctx = cv.getContext('2d')
+    ctx.drawImage(img, 0, 0)
+    const d = ctx.getImageData(0, 0, img.width, img.height).data
+    const out = []
+    for (let i = 0; i < d.length; i += 4) out.push([d[i], d[i + 1], d[i + 2]])
+    return out
+  }, `data:image/png;base64,${shot.toString('base64')}`)
+}
+
+// 取一档"坏"的（h=250）和一档"好"的（h=400）
+for (const h of [250, 400]) {
+  await page.evaluate((hh) => {
+    document.querySelector('[data-testid="table-big-wrap"]').style.height = `${hh}px`
+  }, h)
+  await page.waitForTimeout(500)
+  await page.locator('[data-testid="table-big-wrap"]').scrollIntoViewIfNeeded()
+  await page.waitForTimeout(220)
+
+  const g = await page.evaluate(() => {
+    const wrap = document.querySelector('[data-testid="table-big-wrap"]')
+    const root = wrap.querySelector('.g3-table')
+    const r = root.getBoundingClientRect()
+    // 把该 x 位置自上而下的元素列出来（用 elementFromPoint 逐个 y 采样）
+    return { left: Math.round(r.left), bottom: Math.round(r.bottom) }
+  })
+
+  const x = g.left + 300
+  console.log(`\n=========== h=${h}  root.bottom=${g.bottom} ===========`)
+  console.log('从 root.bottom-6 到 root.bottom+3，每行的色值与该点元素：')
+  const px = await clipSample(x, g.bottom - 6, 1, 10)
+  for (let i = 0; i < 10; i += 1) {
+    const y = g.bottom - 6 + i
+    const info = await page.evaluate(
+      ({ x, y }) => {
+        const el = document.elementFromPoint(x, y)
+        if (!el) return 'null'
+        const s = getComputedStyle(el)
+        return `${el.tagName}.${String(el.className).slice(0, 45)} | bg=${s.backgroundColor} | bgImg=${s.backgroundImage === 'none' ? 'none' : 'HAS'} | shadow=${s.boxShadow === 'none' ? 'none' : 'HAS'}`
+      },
+      { x, y },
+    )
+    const [r, gg, b] = px[i]
+    const mark = r < 246 || gg < 246 || b < 246 ? '◀ 深' : ''
+    console.log(`  y=${y}  rgb(${r},${gg},${b}) ${mark}  ${info}`)
+  }
+}
+
+await browser.close()