u

code/g3soft-libs/packages/ui/e2e/table.spec.ts

@@ -66,15 +66,22 @@ test.describe('G3Table 表格', () => {
     expect(innerBox!.height).toBeLessThanOrEqual(wrapBox!.height + 2)
   })
 
-  test('外框圆角：bordered 时容器有圆角与描边', async ({ page }) => {
-    // 注意：data-testid 透传给了内层 StkTable（组件 inheritAttrs: false），
-    // 外框与圆角在我们自己的根节点 .g3-table 上，所以要按类名定位。
+  test('边框由库绘制：不再有自绘外框与圆角', async ({ page }) => {
+    // 组件已改为把边框完全交给库（传 bordered: true），自己不再画外框 / 圆角。
+    // data-testid 透传给内层 StkTable（组件 inheritAttrs: false），所以按类名定位根节点。
     const root = page.locator('[data-testid="table-wrap"] .g3-table').first()
     await expect(root).toHaveClass(/is-bordered/)
+
+    // 自绘外框已删除：根节点不该再有 border / 圆角
     const radius = await root.evaluate((el) => getComputedStyle(el).borderRadius)
-    expect(radius).not.toBe('0px')
+    expect(radius).toBe('0px')
     const borderWidth = await root.evaluate((el) => getComputedStyle(el).borderTopWidth)
-    expect(borderWidth).toBe('1px')
+    expect(borderWidth).toBe('0px')
+
+    // 边框改由库的 .bordered 提供
+    await expect(page.locator('[data-testid="table-wrap"] .stk-table').first()).toHaveClass(
+      /bordered/,
+    )
   })
 
   test('表头显示序号列（seq 默认开启）', async ({ page }) => {
@@ -147,6 +154,86 @@ test.describe('G3Table 选择列（真浏览器命中）', () => {
   })
 })
 
+/**
+ * 这两条盯的是「库的 flex 布局 + 自绘分隔线」这对组合：
+ * 库的 DOM 里 table.stk-table-main 是 .stk-table-scroll-container 的 flex item，
+ * 库默认给 flex:1，而表头 th 靠 position:sticky 固定，一旦 table 被拉伸，
+ * sticky 几何就会失效（表头跟着滚、分隔线错位叠线）。
+ */
+test.describe('G3Table 布局：表头固定与分隔线', () => {
+  test('table 不被拉伸：.stk-table-main 是 flex:none（非 autoFitWidth）', async ({ page }) => {
+    await page.goto('/')
+    const wrap = page.locator('[data-testid="table-wrap"]')
+    await wrap.scrollIntoViewIfNeeded()
+
+    const flex = await wrap
+      .locator('.stk-table-main')
+      .first()
+      .evaluate((el) => getComputedStyle(el).flexGrow)
+    expect(flex).toBe('0')
+  })
+
+  test('滚动后表头仍固定在容器顶部', async ({ page }) => {
+    await page.goto('/')
+    const big = page.locator('[data-testid="table-big-wrap"]')
+    await big.scrollIntoViewIfNeeded()
+
+    const header = big.locator('thead th').first()
+    const before = await header.boundingBox()
+
+    // 滚动表体
+    const scroller = big.locator('.stk-table-scroll-container').first()
+    await scroller.evaluate((el) => {
+      el.scrollTop = 1200
+    })
+    await page.waitForTimeout(200)
+
+    const after = await header.boundingBox()
+    expect(before).not.toBeNull()
+    expect(after).not.toBeNull()
+    // 表头是 sticky：滚动前后它相对视口的位置不应发生位移
+    expect(Math.abs(after!.y - before!.y)).toBeLessThan(2)
+  })
+
+  test('边框交由库绘制：库根节点带 .bordered，且不再叠加自绘实线', async ({ page }) => {
+    await page.goto('/')
+    const wrap = page.locator('[data-testid="table-wrap"]')
+    await wrap.scrollIntoViewIfNeeded()
+
+    // 我们传 bordered: true，库会给根节点挂 .bordered（并因是字符串才挂 bordered-xxx）
+    const stk = wrap.locator('.stk-table').first()
+    await expect(stk).toHaveClass(/bordered/)
+
+    // 自绘的行分隔线已删除，单元格不应再有真的 border-bottom
+    // （库用 background-image 渐变画线，不走 border）
+    const td = await wrap
+      .locator('.stk-tbody-main td')
+      .first()
+      .evaluate((el) => getComputedStyle(el).borderBottomWidth)
+    expect(td).toBe('0px')
+  })
+
+  test('库自绘边框：单元格带可见的横竖渐变线', async ({ page }) => {
+    await page.goto('/')
+    const wrap = page.locator('[data-testid="table-wrap"]')
+    await wrap.scrollIntoViewIfNeeded()
+
+    // 库的 .bordered th,td 用 background-image 画 --bg-border-right / --bg-border-bottom。
+    // 这里只断言「至少有一条可见渐变线」，不锁具体层数——那是库的内部实现。
+    const layers = await wrap
+      .locator('.stk-tbody-main td')
+      .first()
+      .evaluate((el) => {
+        const bg = getComputedStyle(el).backgroundImage
+        return bg
+          .split(/,(?![^(]*\))/)
+          .map((s) => s.trim())
+          .filter((s) => /rgb\(\d+, \d+, \d+\)/.test(s) && !/rgba\(0, 0, 0, 0\)/.test(s)).length
+      })
+    expect(layers).toBeGreaterThan(0)
+  })
+})
+
 test.describe('G3Table RTL 镜像', () => {
   test('RTL 下固定列与表格布局不塌陷', async ({ page }) => {
     await page.goto('/?dir=rtl')