u

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

@@ -66,22 +66,26 @@ test.describe('G3Table 表格', () => {
     expect(innerBox!.height).toBeLessThanOrEqual(wrapBox!.height + 2)
   })
 
-  test('边框由库绘制：不再有自绘外框与圆角', async ({ page }) => {
-    // 组件已改为把边框完全交给库（传 bordered: true），自己不再画外框 / 圆角。
+  test('边框自绘：外框是根节点的圆角描边，库的外框被清掉', async ({ page }) => {
+    // 边框设计（见 docs/table-design.md §3.2）：外框与横线由组件自绘，纵向列线用库的
+    // 渐变。组件把 `bordered` 翻成库的 'v' 档（见 G3Table.vue 的 `:bordered` 绑定）。
     // 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).toBe('0px')
-    const borderWidth = await root.evaluate((el) => getComputedStyle(el).borderTopWidth)
-    expect(borderWidth).toBe('0px')
+    // 自绘外框：根节点上有 1px 描边 + 圆角（库的外框做不出圆角，这正是自绘的理由）
+    const outer = await root.evaluate((el) => {
+      const s = getComputedStyle(el)
+      return { width: s.borderTopWidth, radius: s.borderTopLeftRadius }
+    })
+    expect(outer.width).toBe('1px')
+    expect(outer.radius).not.toBe('0px')
 
-    // 边框改由库的 .bordered 提供
-    await expect(page.locator('[data-testid="table-wrap"] .stk-table').first()).toHaveClass(
-      /bordered/,
-    )
+    // 库那层外框必须被抹掉：'v' 档是字符串，库会同时挂 .bordered 与 .bordered-v，
+    // 前者的 `border-left` 若留着，就和自绘外框叠成双线
+    const stk = page.locator('[data-testid="table-wrap"] .stk-table').first()
+    await expect(stk).toHaveClass(/bordered-v/)
+    expect(await stk.evaluate((el) => getComputedStyle(el).borderLeftWidth)).toBe('0px')
   })
 
   test('表头显示序号列（seq 默认开启）', async ({ page }) => {
@@ -633,22 +637,42 @@ test.describe('G3Table 布局：表头固定与分隔线', () => {
     expect(Math.abs(after!.y - before!.y)).toBeLessThan(2)
   })
 
-  test('边框交由库绘制：库根节点带 .bordered，且不再叠加自绘实线', async ({ page }) => {
+  test('边框自绘：库只保留竖线，横线走渐变而不是真 border', async ({ page }) => {
     await page.goto('/')
     const wrap = page.locator('[data-testid="table-wrap"]')
     await wrap.scrollIntoViewIfNeeded()
 
-    // 我们传 bordered: true，库会给根节点挂 .bordered（并因是字符串才挂 bordered-xxx）
+    // 我们传的是库的 'v' 档（字符串才挂 bordered-xxx）
     const stk = wrap.locator('.stk-table').first()
-    await expect(stk).toHaveClass(/bordered/)
+    await expect(stk).toHaveClass(/bordered-v/)
 
-    // 自绘的行分隔线已删除，单元格不应再有真的 border-bottom
-    // （库用 background-image 渐变画线，不走 border）
-    const td = await wrap
-      .locator('.stk-tbody-main td')
-      .first()
-      .evaluate((el) => getComputedStyle(el).borderBottomWidth)
-    expect(td).toBe('0px')
+    /** 数「非透明的背景渐变层数」——即这一格画了几条线（不看库内部怎么拼） */
+    const lineCount = (locator: import('@playwright/test').Locator) =>
+      locator.evaluate((el) =>
+        getComputedStyle(el)
+          .backgroundImage.split(/,(?![^(]*\))/)
+          .filter((layer) => /rgb\(\d+, \d+, \d+\)/.test(layer)).length,
+      )
+
+    // 横线：`'v'` 档把 --bg-border-bottom 清零（只剩竖线一条），组件按底座配方把它
+    // 拿回来 —— 所以这里应当数出**两条**。但它**不能**是真 border：格线一进盒模型，
+    // 单元格多 1px 就会被行内编辑器顶高（行高是虚拟滚动 translateY 的基准）。
+    const td = wrap.locator('.stk-tbody-main td').first()
+    const normalLines = await lineCount(td)
+    expect(normalLines).toBeGreaterThan(1)
+    expect(await td.evaluate((el) => getComputedStyle(el).borderBottomWidth)).toBe('0px')
+
+    // 竖线：末列的外侧那条已被抹掉（归自绘外框管），所以比普通列**正好少一条**
+    const lastTd = wrap.locator('.stk-tbody-main td:last-child').first()
+    expect(await lineCount(lastTd)).toBe(normalLines - 1)
+
+    // 行高没被格线动过（30 = 默认 rowHeight，也是虚拟滚动 translateY 的基准）
+    expect(
+      await wrap
+        .locator('.stk-tbody-main tr')
+        .first()
+        .evaluate((el) => Math.round(el.getBoundingClientRect().height)),
+    ).toBe(30)
   })
 
   test('库自绘边框：单元格带可见的横竖渐变线', async ({ page }) => {