u

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

@@ -0,0 +1,69 @@
+import { chromium } from '@playwright/test'
+
+/**
+ * 上一步的疑点：lastRowBottom 恒为 3053，不随容器高度变化。
+ * 猜想：容器变矮 → 行区溢出/被裁 → 该坐标不再是"可见的最后一行底边"。
+ *
+ * 这里把「滚动容器」也一起量出来，看清溢出时到底发生了什么。
+ */
+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' })
+
+for (const h of [400, 200, 128, 126, 120, 80]) {
+  await page.evaluate((hh) => {
+    const wrap = document.querySelector('[data-testid="table-wrap"]')
+    wrap.style.height = `${hh}px`
+  }, h)
+  await page.waitForTimeout(500)
+
+  const r = await page.evaluate(() => {
+    const wrap = document.querySelector('[data-testid="table-wrap"]')
+    const root = wrap.querySelector('.g3-table')
+    const inner = wrap.querySelector('.stk-table')
+    const tbody = wrap.querySelector('.stk-tbody-main')
+    const rows = [...wrap.querySelectorAll('.stk-tbody-main tr')]
+    const last = rows[rows.length - 1]
+
+    // 找到所有可能的滚动容器
+    const scrollers = [...wrap.querySelectorAll('*')]
+      .filter((el) => {
+        const s = getComputedStyle(el)
+        return /auto|scroll/.test(s.overflowY) && el.scrollHeight > el.clientHeight + 1
+      })
+      .map((el) => ({
+        cls: el.className.toString().slice(0, 40),
+        clientH: el.clientHeight,
+        scrollH: el.scrollHeight,
+        scrollTop: el.scrollTop,
+      }))
+
+    const hasBottom = (s) => /linear-gradient\(0deg, rgb/.test(s)
+    const innerRect = inner.getBoundingClientRect()
+    const cs = getComputedStyle(inner)
+
+    return {
+      rootCls: root.className,
+      wrapH: Math.round(wrap.getBoundingClientRect().height),
+      innerRect: { top: Math.round(innerRect.top), bottom: Math.round(innerRect.bottom) },
+      innerBottomEdge: Math.round(innerRect.bottom - (parseFloat(cs.borderBottomWidth) || 0)),
+      tbodyRect: tbody
+        ? { top: Math.round(tbody.getBoundingClientRect().top), bottom: Math.round(tbody.getBoundingClientRect().bottom), h: Math.round(tbody.getBoundingClientRect().height) }
+        : null,
+      lastRow: last
+        ? {
+            top: Math.round(last.getBoundingClientRect().top),
+            bottom: Math.round(last.getBoundingClientRect().bottom),
+            draws: [...last.querySelectorAll('td')].some((td) => hasBottom(getComputedStyle(td).backgroundImage)),
+          }
+        : null,
+      rowBottoms: rows.map((tr) => Math.round(tr.getBoundingClientRect().bottom)),
+      scrollers,
+    }
+  })
+  console.log(`\n===== container ${h}px =====`)
+  console.log(JSON.stringify(r, null, 2))
+}
+
+await browser.close()