From 0a09ac23f79a2a1920d57ef473e91aa4e104737c Mon Sep 17 00:00:00 2001
From: ajaxzheng <894103554@qq.com>
Date: Wed, 22 Nov 2023 17:08:59 -0800
Subject: [PATCH] fix(grid): [grid] fix grid fixed style error when config prop
 border (#889)

* fix(grid): [grid] fix grid fixed style error when config prop border

* fix(grid): [grid] fix errror E2E test

* fix(grid): [grid] fix errror E2E test

* fix(grid): [grid] fix errror E2E test
---
 .../pc/app/grid/event/grid-scroll-event-composition-api.vue | 4 ++--
 .../sites/demos/pc/app/grid/event/grid-scroll-event.spec.js | 4 +---
 .../sites/demos/pc/app/grid/event/grid-scroll-event.vue     | 4 ++--
 .../demos/pc/app/grid/fixed/left-fixed-composition-api.vue  | 2 +-
 examples/sites/demos/pc/app/grid/fixed/left-fixed.vue       | 4 ++--
 .../demos/pc/app/grid/fixed/right-fixed-composition-api.vue | 4 ++--
 examples/sites/demos/pc/app/grid/fixed/right-fixed.spec.js  | 3 ++-
 examples/sites/demos/pc/app/grid/fixed/right-fixed.vue      | 4 ++--
 .../pc/app/grid/mouse-keyboard/keyboard-navigation.spec.js  | 6 +-----
 .../demos/pc/app/grid/pager/inner-default-pager.spec.js     | 2 +-
 examples/sites/demos/pc/app/grid/pager/inner-pager.spec.js  | 2 +-
 .../sites/demos/pc/app/grid/sort/sort-composition-api.vue   | 2 +-
 examples/sites/demos/pc/app/grid/sort/sort.spec.js          | 2 +-
 examples/sites/demos/pc/app/grid/sort/sort.vue              | 2 +-
 .../sites/demos/pc/app/grid/validation/bubbling.spec.js     | 3 ++-
 packages/theme-saas/src/grid/table.less                     | 2 +-
 packages/theme/src/grid/table.less                          | 2 +-
 17 files changed, 24 insertions(+), 28 deletions(-)

diff --git a/examples/sites/demos/pc/app/grid/event/grid-scroll-event-composition-api.vue b/examples/sites/demos/pc/app/grid/event/grid-scroll-event-composition-api.vue
index cf5532a4a..2fb032c13 100644
--- a/examples/sites/demos/pc/app/grid/event/grid-scroll-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/event/grid-scroll-event-composition-api.vue
@@ -10,7 +10,7 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { Grid as TinyGrid, GridColumn as TinyGridColumn, Modal } from '@opentiny/vue'
 
@@ -124,7 +124,7 @@ const tableData = ref([
 ])
 
 function ScrollEvent() {
-  Modal.message({ message: '表格滚动事件', status: 'info' })
+  Modal.message({ message: '提示：触发了表格滚动事件', status: 'info' })
 }
 </script>
 
diff --git a/examples/sites/demos/pc/app/grid/event/grid-scroll-event.spec.js b/examples/sites/demos/pc/app/grid/event/grid-scroll-event.spec.js
index b14015068..5a463f5e3 100644
--- a/examples/sites/demos/pc/app/grid/event/grid-scroll-event.spec.js
+++ b/examples/sites/demos/pc/app/grid/event/grid-scroll-event.spec.js
@@ -5,7 +5,5 @@ test('表格滚动事件', async ({ page }) => {
   await page.goto('grid-event#event-grid-scroll-event')
   const scrollDom = page.getByText('深圳万众科技YX公司').first()
   await scrollDom.scrollIntoViewIfNeeded()
-  await page.waitForTimeout(20)
-
-  await expect(page.locator('.tiny-modal__box').first()).toBeVisible()
+  await expect(page.getByText('提示：触发了表格滚动事件')).toBeVisible()
 })
diff --git a/examples/sites/demos/pc/app/grid/event/grid-scroll-event.vue b/examples/sites/demos/pc/app/grid/event/grid-scroll-event.vue
index d4c080678..3f1e27cc1 100644
--- a/examples/sites/demos/pc/app/grid/event/grid-scroll-event.vue
+++ b/examples/sites/demos/pc/app/grid/event/grid-scroll-event.vue
@@ -10,7 +10,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Grid, GridColumn, Modal } from '@opentiny/vue'
 
 export default {
@@ -132,7 +132,7 @@ export default {
   },
   methods: {
     ScrollEvent() {
-      Modal.message({ message: '表格滚动事件', status: 'info' })
+      Modal.message({ message: '提示：触发了表格滚动事件', status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/grid/fixed/left-fixed-composition-api.vue b/examples/sites/demos/pc/app/grid/fixed/left-fixed-composition-api.vue
index f61a7cf2a..5af1efe92 100644
--- a/examples/sites/demos/pc/app/grid/fixed/left-fixed-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/fixed/left-fixed-composition-api.vue
@@ -1,5 +1,5 @@
 <template>
-  <tiny-grid :data="tableData">
+  <tiny-grid border :data="tableData">
     <tiny-grid-column type="index" width="60" fixed="left"></tiny-grid-column>
     <tiny-grid-column type="selection" width="60" fixed="left"></tiny-grid-column>
     <tiny-grid-column field="name" title="公司名称" width="500"></tiny-grid-column>
diff --git a/examples/sites/demos/pc/app/grid/fixed/left-fixed.vue b/examples/sites/demos/pc/app/grid/fixed/left-fixed.vue
index ea46fd1b6..251ee7aa8 100644
--- a/examples/sites/demos/pc/app/grid/fixed/left-fixed.vue
+++ b/examples/sites/demos/pc/app/grid/fixed/left-fixed.vue
@@ -1,5 +1,5 @@
 <template>
-  <tiny-grid :data="tableData">
+  <tiny-grid border :data="tableData">
     <tiny-grid-column type="index" width="60" fixed="left"></tiny-grid-column>
     <tiny-grid-column type="selection" width="60" fixed="left"></tiny-grid-column>
     <tiny-grid-column field="name" title="公司名称" width="500"></tiny-grid-column>
@@ -9,7 +9,7 @@
   </tiny-grid>
 </template>
 
-<script lang="jsx">
+<script>
 import { Grid, GridColumn } from '@opentiny/vue'
 
 export default {
diff --git a/examples/sites/demos/pc/app/grid/fixed/right-fixed-composition-api.vue b/examples/sites/demos/pc/app/grid/fixed/right-fixed-composition-api.vue
index 42dcb9d3b..80e7a657d 100644
--- a/examples/sites/demos/pc/app/grid/fixed/right-fixed-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/fixed/right-fixed-composition-api.vue
@@ -5,11 +5,11 @@
     <tiny-grid-column field="name" title="公司名称" width="500"></tiny-grid-column>
     <tiny-grid-column field="employees" title="员工数" width="500"></tiny-grid-column>
     <tiny-grid-column field="createdDate" title="创建日期" width="500"></tiny-grid-column>
-    <tiny-grid-column field="city" title="城市" width="200" fixed="right"></tiny-grid-column>
+    <tiny-grid-column field="city" title="城市右冻结" width="200" fixed="right"></tiny-grid-column>
   </tiny-grid>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
 
diff --git a/examples/sites/demos/pc/app/grid/fixed/right-fixed.spec.js b/examples/sites/demos/pc/app/grid/fixed/right-fixed.spec.js
index b800fed01..66b7b4f7b 100644
--- a/examples/sites/demos/pc/app/grid/fixed/right-fixed.spec.js
+++ b/examples/sites/demos/pc/app/grid/fixed/right-fixed.spec.js
@@ -3,5 +3,6 @@ import { test, expect } from '@playwright/test'
 test('右冻结', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-fixed#fixed-right-fixed')
-  await expect(page.getByRole('cell', { name: '城市' })).toHaveCSS('right', '4px')
+  await page.waitForTimeout(400)
+  await expect(page.getByRole('cell', { name: '城市右冻结' })).toHaveClass(/fixed-right-first__column/)
 })
diff --git a/examples/sites/demos/pc/app/grid/fixed/right-fixed.vue b/examples/sites/demos/pc/app/grid/fixed/right-fixed.vue
index d8ea05ab2..587cd2dd3 100644
--- a/examples/sites/demos/pc/app/grid/fixed/right-fixed.vue
+++ b/examples/sites/demos/pc/app/grid/fixed/right-fixed.vue
@@ -5,11 +5,11 @@
     <tiny-grid-column field="name" title="公司名称" width="500"></tiny-grid-column>
     <tiny-grid-column field="employees" title="员工数" width="500"></tiny-grid-column>
     <tiny-grid-column field="createdDate" title="创建日期" width="500"></tiny-grid-column>
-    <tiny-grid-column field="city" title="城市" width="200" fixed="right"></tiny-grid-column>
+    <tiny-grid-column field="city" title="城市右冻结" width="200" fixed="right"></tiny-grid-column>
   </tiny-grid>
 </template>
 
-<script lang="jsx">
+<script>
 import { Grid, GridColumn } from '@opentiny/vue'
 
 export default {
diff --git a/examples/sites/demos/pc/app/grid/mouse-keyboard/keyboard-navigation.spec.js b/examples/sites/demos/pc/app/grid/mouse-keyboard/keyboard-navigation.spec.js
index ae44b8127..68afafe63 100644
--- a/examples/sites/demos/pc/app/grid/mouse-keyboard/keyboard-navigation.spec.js
+++ b/examples/sites/demos/pc/app/grid/mouse-keyboard/keyboard-navigation.spec.js
@@ -15,11 +15,7 @@ test('键盘导航测试', async ({ page }) => {
     .getByRole('textbox')
     .fill('WWWW科收缩技YX公司')
 
-  await page
-    .getByText(
-      '按键说明 Arrow Up ↑：移动到当前活动单元格上面的单元格 Arrow Down ↓：移动到当前活动单元格下面的单元格 Arrow Left ←：移动到当'
-    )
-    .click()
+  await page.getByRole('cell', { name: '公司简介' }).click()
 
   await expect(page.getByRole('cell', { name: 'WWWW科收缩技YX公司' })).toBeVisible()
 })
diff --git a/examples/sites/demos/pc/app/grid/pager/inner-default-pager.spec.js b/examples/sites/demos/pc/app/grid/pager/inner-default-pager.spec.js
index 526b561fe..9081975c0 100644
--- a/examples/sites/demos/pc/app/grid/pager/inner-default-pager.spec.js
+++ b/examples/sites/demos/pc/app/grid/pager/inner-default-pager.spec.js
@@ -1,6 +1,6 @@
 import { test, expect } from '@playwright/test'
 
-test('test', async ({ page }) => {
+test('使用默认分页组件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-pager#pager-inner-default-pager')
   await page.getByRole('listitem').filter({ hasText: '2' }).click()
diff --git a/examples/sites/demos/pc/app/grid/pager/inner-pager.spec.js b/examples/sites/demos/pc/app/grid/pager/inner-pager.spec.js
index 3404a2a26..8946c5d91 100644
--- a/examples/sites/demos/pc/app/grid/pager/inner-pager.spec.js
+++ b/examples/sites/demos/pc/app/grid/pager/inner-pager.spec.js
@@ -1,6 +1,6 @@
 import { test, expect } from '@playwright/test'
 
-test('test', async ({ page }) => {
+test('使用第三方分页组件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-pager#pager-inner-pager')
   await page.getByRole('listitem').filter({ hasText: '2' }).click()
diff --git a/examples/sites/demos/pc/app/grid/sort/sort-composition-api.vue b/examples/sites/demos/pc/app/grid/sort/sort-composition-api.vue
index 6e2ec58b5..865d45019 100644
--- a/examples/sites/demos/pc/app/grid/sort/sort-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/sort/sort-composition-api.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-button @click="click">sort</tiny-button>
+    <tiny-button @click="click">手动排序sort</tiny-button>
     <tiny-grid
       :data="tableData"
       ref="gridRef"
diff --git a/examples/sites/demos/pc/app/grid/sort/sort.spec.js b/examples/sites/demos/pc/app/grid/sort/sort.spec.js
index 5d5643259..d6518a982 100644
--- a/examples/sites/demos/pc/app/grid/sort/sort.spec.js
+++ b/examples/sites/demos/pc/app/grid/sort/sort.spec.js
@@ -3,6 +3,6 @@ import { test, expect } from '@playwright/test'
 test('手动排序', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-sort#sort-sort')
-  await page.getByRole('button', { name: 'sort' }).click()
+  await page.getByRole('button', { name: '手动排序sort' }).click()
   await expect(page.locator('.tiny-grid-body__row').first()).toContainText('300')
 })
diff --git a/examples/sites/demos/pc/app/grid/sort/sort.vue b/examples/sites/demos/pc/app/grid/sort/sort.vue
index bead78359..8e795f9a3 100644
--- a/examples/sites/demos/pc/app/grid/sort/sort.vue
+++ b/examples/sites/demos/pc/app/grid/sort/sort.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-button @click="click">sort</tiny-button>
+    <tiny-button @click="click">手动排序sort</tiny-button>
     <tiny-grid
       :data="tableData"
       ref="grid"
diff --git a/examples/sites/demos/pc/app/grid/validation/bubbling.spec.js b/examples/sites/demos/pc/app/grid/validation/bubbling.spec.js
index c3cb8081a..62c448fd0 100644
--- a/examples/sites/demos/pc/app/grid/validation/bubbling.spec.js
+++ b/examples/sites/demos/pc/app/grid/validation/bubbling.spec.js
@@ -19,7 +19,8 @@ test('校验提示跟随单元格移动', async ({ page }) => {
     .fill('x')
   const { y: top } = await page.getByRole('tooltip', { name: '区域格式不正确' }).boundingBox()
 
-  await page.mouse.wheel(0, 100)
+  const scrollDom = page.getByRole('cell', { name: 'YHN科技有限公司' })
+  await scrollDom.scrollIntoViewIfNeeded()
   const { y: topLater } = await page.getByRole('tooltip', { name: '区域格式不正确' }).boundingBox()
   await expect(top).toBeGreaterThan(topLater)
 })
diff --git a/packages/theme-saas/src/grid/table.less b/packages/theme-saas/src/grid/table.less
index 9a9fe7bfe..b8b62b3b8 100644
--- a/packages/theme-saas/src/grid/table.less
+++ b/packages/theme-saas/src/grid/table.less
@@ -165,7 +165,7 @@
   // 冻结列，采用sticky布局代替多表格渲染，至少少渲染一半的dom元素
   .fixed__column {
     position: sticky !important;
-    z-index: 2;
+    z-index: 1;
     @apply bg-color-bg-1;
 
     &.fixed-left-last__column:after {
diff --git a/packages/theme/src/grid/table.less b/packages/theme/src/grid/table.less
index 907bacf3a..76f983464 100644
--- a/packages/theme/src/grid/table.less
+++ b/packages/theme/src/grid/table.less
@@ -170,7 +170,7 @@
   // 冻结列，采用sticky布局代替多表格渲染，至少少渲染一半的dom元素
   .fixed__column {
     position: sticky !important;
-    z-index: 2;
+    z-index: 1;
     background-color: var(--ti-grid-light-color);
 
     &.fixed-left-last__column:after {