feat(grid): [grid]Update grid e2e test (#853)

* test(grid): [grid] update grid e2e test

.gitignore

@@ -8,6 +8,7 @@ dist-react/
 allDist/
 packages/**/runtime
 coverage/
+test-results
 
 /packages/vue/index.ts
 /packages/vue/pc.ts

examples/sites/demos/pc/app/grid/align/footer-align.spec.js

@@ -1,7 +1,9 @@
 import { test, expect } from '@playwright/test'
 
-test('表尾左对齐', async ({ page }) => {
+test('表尾对齐', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-align#align-footer-align-left-footer-align')
-  await expect(page.getByRole('cell', { name: '平均' })).toHaveCSS('text-align', 'left')
+  await page.goto('grid-align#align-footer-align')
+  await expect(page.getByRole('cell', { name: '和值' })).toHaveCSS('text-align', 'left')
+  await expect(page.getByRole('cell', { name: '5310' })).toHaveCSS('text-align', 'right')
+  await expect(page.getByRole('cell', { name: '57000' })).toHaveCSS('text-align', 'center')
 })

examples/sites/demos/pc/app/grid/align/grid-align.spec.js

@@ -2,6 +2,8 @@ import { test, expect } from '@playwright/test'
 
 test('表格单元格右对齐', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-align#align-grid-align-left-grid-align')
+  await page.goto('grid-align#align-grid-align')
   await expect(page.getByRole('cell', { name: 'GFD科技YX公司' })).toHaveCSS('text-align', 'left')
+  await expect(page.getByRole('cell', { name: '1300' })).toHaveCSS('text-align', 'center')
+  await expect(page.getByRole('cell', { name: '2014-04-30 00:56:00' })).toHaveCSS('text-align', 'right')
 })

examples/sites/demos/pc/app/grid/align/header-align-composition-api.vue

@@ -1,10 +1,10 @@
 <template>
   <tiny-grid :data="tableData" header-align="left">
     <tiny-grid-column type="index" width="60"></tiny-grid-column>
-    <tiny-grid-column field="name" title="公司名称(左对齐)" ></tiny-grid-column>
+    <tiny-grid-column field="name" title="公司名称（左对齐）"></tiny-grid-column>
     <tiny-grid-column field="employees" title="员工数（右对齐）" header-align="right"></tiny-grid-column>
     <tiny-grid-column field="createdDate" title="创建日期（居中对齐）" header-align="center"></tiny-grid-column>
-    <tiny-grid-column field="city" title="城市（左对齐）" ></tiny-grid-column>
+    <tiny-grid-column field="city" title="城市（左对齐）"></tiny-grid-column>
   </tiny-grid>
 </template>
 

examples/sites/demos/pc/app/grid/align/header-align.spec.js

@@ -1,7 +1,9 @@
 import { test, expect } from '@playwright/test'
 
-test('表头左对齐', async ({ page }) => {
+test('表头对齐', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-align#align-header-align-left-header-align')
-  await expect(page.getByRole('cell', { name: '公司名称' })).toHaveCSS('text-align', 'left')
+  await page.goto('grid-align#align-header-align')
+  await expect(page.getByRole('cell', { name: '公司名称（左对齐）' })).toHaveCSS('text-align', 'left')
+  await expect(page.getByRole('cell', { name: '员工数（右对齐）' })).toHaveCSS('text-align', 'right')
+  await expect(page.getByRole('cell', { name: '创建日期（居中对齐）' })).toHaveCSS('text-align', 'center')
 })

examples/sites/demos/pc/app/grid/align/header-align.vue

@@ -1,10 +1,10 @@
 <template>
-  <tiny-grid :data="tableData" >
+  <tiny-grid :data="tableData">
     <tiny-grid-column type="index" width="60"></tiny-grid-column>
-    <tiny-grid-column field="name" title="公司名称(左对齐)" ></tiny-grid-column>
+    <tiny-grid-column field="name" title="公司名称（左对齐）"></tiny-grid-column>
     <tiny-grid-column field="employees" title="员工数（右对齐）" header-align="right"></tiny-grid-column>
     <tiny-grid-column field="createdDate" title="创建日期（居中对齐）" header-align="center"></tiny-grid-column>
-    <tiny-grid-column field="city" title="城市（左对齐）" ></tiny-grid-column>
+    <tiny-grid-column field="city" title="城市（左对齐）"></tiny-grid-column>
   </tiny-grid>
 </template>
 

examples/sites/demos/pc/app/grid/appearance-settings/grid-border.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-grid-border#tiny-first-menu-grid-border')
+  await page.goto('grid-appearance-settings#appearance-settings-grid-border')
   await expect(page.locator('.tiny-grid__border')).toBeVisible()
 })

examples/sites/demos/pc/app/grid/appearance-settings/stripe.spec.js

@@ -2,6 +2,6 @@ import { test, expect } from '@playwright/test'
 
 test('斑马线', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-grid-stripe#stripe-stripe')
+  await page.goto('grid-appearance-settings#appearance-settings-stripe')
   await expect(page.locator('.tiny-grid__stripe')).toBeVisible()
 })

examples/sites/demos/pc/app/grid/base/basic-usage-conf.spec.js

@@ -1,7 +1,7 @@
 import { test, expect } from '@playwright/test'
 
-test('基本用法', async ({ page }) => {
+test('配置式表格', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid#basicUsage-conf')
+  await page.goto('grid#base-basic-usage-conf')
   await expect(page.getByRole('row', { name: '3 1300 2014-02-14 14:14:14 中山' })).toBeVisible()
 })

examples/sites/demos/pc/app/grid/base/basic-usage.spec.js

@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
 
 test('标签式表格', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid#basicUsage')
+  await page.goto('grid#base-basic-usage')
 
   await expect(page.getByRole('row', { name: '1 800 2014-04-30 00:56:00 福州' })).toBeVisible()
 })

examples/sites/demos/pc/app/grid/context-menu/cell-menu.spec.js

@@ -1,8 +1,8 @@
 import { test, expect } from '@playwright/test'
 
-test('Grid-右键菜单-单元格菜单', async ({ page }) => {
+test('单元格菜单', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-context-menu#grid_Example-shortcutMenu-cell-menu')
+  await page.goto('grid-context-menu#context-menu-cell-menu')
   await page
     .getByRole('row', {
       name: '1 GFD科技YX公司 华东区 2014-04-30 00:56:00 800 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'

examples/sites/demos/pc/app/grid/context-menu/footer-menu.spec.js

@@ -1,8 +1,8 @@
 import { test, expect } from '@playwright/test'
 
-test('Grid-右键菜单-表尾菜单', async ({ page }) => {
+test('表尾菜单', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-context-menu#grid_Example-shortcutMenu-footer-menu')
+  await page.goto('grid-context-menu#context-menu-footer-menu')
   await page.locator('.tiny-grid-footer__row > td:nth-child(3)').click({
     button: 'right'
   })

examples/sites/demos/pc/app/grid/context-menu/header-menu.spec.js

@@ -1,9 +1,9 @@
 import { test, expect } from '@playwright/test'
 
-test('Grid-右键菜单-表头菜单', async ({ page }) => {
+test('表头菜单', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-context-menu#grid_Example-shortcutMenu-header-menu')
-  await page.getByText('区域').first().click({
+  await page.goto('grid-context-menu#context-menu-header-menu')
+  await page.getByRole('cell', { name: '区域', exact: true }).click({
     button: 'right'
   })
   await expect(page.locator('a').filter({ hasText: '导出所有.csv' })).toBeVisible()

examples/sites/demos/pc/app/grid/context-menu/menu-permissions.spec.js

@@ -1,8 +1,8 @@
 import { test, expect } from '@playwright/test'
 
-test('Grid-右键菜单-菜单权限', async ({ page }) => {
+test('菜单权限', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-context-menu#grid_Example-shortcutMenu-menu-permissions')
+  await page.goto('grid-context-menu#context-menu-menu-permissions')
   await page.getByRole('cell', { name: '300', exact: true }).click({
     button: 'right'
   })

examples/sites/demos/pc/app/grid/custom-style/body-style.spec.js

@@ -1,8 +1,8 @@
 import { test, expect } from '@playwright/test'
 
-test('设置行样式', async ({ page }) => {
+test('自定义表体样式', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-custom-style#custom-style-row-style')
-  await expect(page.getByText('WWW科技YX公司').first()).toHaveCSS('color', 'rgb(255, 0, 0)')
-  await expect(page.getByText('深圳', { exact: true }).first()).toHaveCSS('color', 'rgb(255, 0, 0)')
+  await page.goto('grid-custom-style#custom-style-body-style')
+  await expect(page.locator('.row__word--red').first()).toHaveCSS('color', 'rgb(219, 112, 147)')
+  await expect(page.locator('.col-orange').first()).toHaveCSS('background-color', 'rgb(255, 192, 203)')
 })

examples/sites/demos/pc/app/grid/custom-style/class-name.spec.js

@@ -1,7 +1,7 @@
 import { test, expect } from '@playwright/test'
 
-test('列样式', async ({ page }) => {
+test('自定义列样式', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-custom-style#column-class-name')
-  await expect(page.locator('.gridClassName')).toHaveCount(8)
+  await page.goto('grid-custom-style#custom-style-class-name')
+  await expect(page.locator('.gridClassName').first()).toHaveCSS('background-color', 'rgb(230, 247, 255)')
 })

examples/sites/demos/pc/app/grid/custom-style/footer-style.spec.js

@@ -1,7 +1,9 @@
 import { test, expect } from '@playwright/test'
 
-test('表尾样式(自定义表尾行样式)', async ({ page }) => {
+test('自定义表尾行样式', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-custom-style#custom-style-footer-style-footer-cell-style')
-  await expect(page.locator('.footer__cell--blue')).toHaveCount(6)
+  await page.goto('grid-custom-style#custom-style-footer-style')
+  await expect(page.locator('.footer__row--red')).toHaveCSS('background-color', 'rgb(219, 112, 147)')
+  await expect(page.locator('.footer__row--green')).toHaveCSS('background-color', 'rgb(0, 128, 0)')
+  await expect(page.locator('.footer__cell--blue')).toHaveCSS('background-color', 'rgb(45, 183, 245)')
 })

examples/sites/demos/pc/app/grid/custom-style/header-style.spec.js

@@ -1,7 +1,8 @@
 import { test, expect } from '@playwright/test'
 
-test('设置表头单元格样式', async ({ page }) => {
+test('自定义表头样式', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-custom-style#custom-style-header-style-header-row-style')
-  await expect(page.locator('.header__row--red')).toBeVisible()
+  await page.goto('grid-custom-style#custom-style-header-style')
+  await expect(page.locator('.header__row--red')).toHaveCSS('background-color', 'rgb(219, 112, 147)')
+  await expect(page.locator('.header__cell--blue')).toHaveCSS('background-color', 'rgb(45, 183, 245)')
 })

examples/sites/demos/pc/app/grid/custom/column-fixed.spec.js

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('列冻结', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-custom#custom-column-fixed')
+  await page.locator('.tiny-grid-custom__setting-btn').click()
+  await page.getByRole('row', { name: '员工数 显示 未冻结' }).getByTitle('未冻结').getByRole('img').click()
+  await page.getByRole('row', { name: '员工数 显示 左冻结' }).getByTitle('左冻结').getByRole('img').click()
+  await page.getByRole('button', { name: '确定' }).click()
+  await expect(page.getByRole('cell', { name: '员工数' })).toHaveCSS('right', '0px')
+})

examples/sites/demos/pc/app/grid/custom/column-simple.spec.js

@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
 
 test('简化版列设置测试', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-customized#custom-column-simple')
+  await page.goto('grid-custom#custom-column-simple')
   await page.locator('.tiny-select > div').click()
   await page.getByRole('listitem').filter({ hasText: '员工数' }).click()
   const thHeader = page.locator('th.tiny-grid-header__column').nth(1)

examples/sites/demos/pc/app/grid/custom/column-sort.spec.js

@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
 
 test('个性化排序测试', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-customized#custom-column-sort')
+  await page.goto('grid-custom#custom-column-sort')
   await page.locator('.tiny-grid-custom__setting-btn').click()
   await page.getByRole('row', { name: '员工数 显示 未排序 未冻结' }).getByTitle('未排序').getByRole('img').click()
   await page.getByRole('button', { name: '确定' }).click()

examples/sites/demos/pc/app/grid/custom/column-visible-hidden.spec.js

@@ -0,0 +1,10 @@
+import { test, expect } from '@playwright/test'
+
+test('列显示隐藏', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-custom#custom-column-visible-hidden')
+  await page.locator('.tiny-grid-custom__setting-btn').click()
+  await page.getByRole('row', { name: '员工数 显示 未冻结' }).getByTitle('显示').getByRole('img').click()
+  await page.getByRole('button', { name: '确定' }).click()
+  await expect(page.getByRole('cell', { name: '员工数' })).not.toBeVisible()
+})

examples/sites/demos/pc/app/grid/custom/column-width.spec.js

@@ -1,10 +1,10 @@
 import { test, expect } from '@playwright/test'
 
-test('个性化列拖拽测试', async ({ page }) => {
+test('本地存储列宽', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-customized#custom-column-simple')
-  const draggerDom = page.getByRole('cell', { name: '名称' }).locator('.tiny-grid-resizable')
-  const thDom = page.getByRole('cell', { name: '名称' })
+  await page.goto('grid-custom#custom-column-width')
+  const draggerDom = page.getByRole('cell', { name: '员工数' }).locator('.tiny-grid-resizable')
+  const thDom = page.getByRole('cell', { name: '员工数' })
   // 获取初始列宽
   const { width: thWidth } = await thDom.boundingBox()
   // 获取拖拽元素位置
@@ -23,7 +23,7 @@ test('个性化列拖拽测试', async ({ page }) => {
   expect(thWidth).toBeLessThan(lastThWidth)
   // 刷新页面
   await page.reload()
-  const thDom2 = page.getByRole('cell', { name: '名称' })
+  const thDom2 = page.getByRole('cell', { name: '员工数' })
   const { width: thWidth2 } = await thDom2.boundingBox()
   // 检测列宽有没有保存在localstorage
   expect(thWidth2).toEqual(lastThWidth)

examples/sites/demos/pc/app/grid/custom/hide-column.spec.js

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('手动隐藏显示列', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-custom#custom-hide-column')
+  await page.locator('#custom-hide-column').getByText('手动隐藏显示列').click()
+  await page.getByRole('button', { name: '隐藏 布尔值 列' }).click()
+  await expect(page.getByRole('cell', { name: '布尔值' })).not.toBeVisible()
+  await page.getByRole('button', { name: '隐藏 布尔值 列' }).click()
+  await expect(page.getByRole('cell', { name: '布尔值' })).toBeVisible()
+})

examples/sites/demos/pc/app/grid/custom/multiple-column-sort.spec.js

@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test'
+
+test('多列排序', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-custom#custom-multiple-column-sort')
+  await page.locator('.tiny-grid-custom__setting-btn').first().click()
+  await page.getByRole('row', { name: '员工数 显示 未排序 未冻结' }).getByTitle('未排序').locator('path').click()
+  await page.getByTitle('未排序').locator('path').click()
+  await page.getByRole('button', { name: '确定' }).click()
+  await expect(page.locator('.tiny-grid-body__row').nth(3)).toContainText('GFD科技有限公司')
+
+  await page.locator('.tiny-grid-custom__setting-btn').nth(1).click()
+  await page.getByRole('row', { name: '员工数 显示 未排序 未冻结' }).getByTitle('未排序').getByRole('img').click()
+  await page.getByTitle('未排序').getByRole('img').click()
+  await page.getByRole('button', { name: '确定' }).click()
+  await expect(page.locator('.tiny-grid-body__row').nth(10)).toContainText('YHN科技有限公司')
+})

examples/sites/demos/pc/app/grid/custom/ordercolumn-local.spec.js

@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test'
+
+test('个性化按钮点击事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-custom#custom-ordercolumn-local')
+  await page.locator('.tiny-grid-custom__setting-btn').click()
+  await page.getByRole('cell', { name: '显示 未冻结' }).getByTitle('显示').getByRole('img').click()
+  await page.getByRole('button', { name: '确定' }).click()
+  await expect(
+    page.getByText('点击了确认按钮{"sortType":"page","pageSize":10,"columns":[{"property":"name","order":nu')
+  ).toBeVisible()
+  await page.getByRole('button', { name: '确认' }).click()
+  await page.locator('.tiny-grid-custom__setting-btn').click()
+  await page.getByRole('button', { name: '重置' }).click()
+  await expect(page.getByText('点击了重置按钮')).toBeVisible()
+  await page.getByRole('button', { name: '确认' }).click()
+  await page.getByRole('button', { name: '取消' }).click()
+  await expect(page.getByText('点击了取消按钮undefined')).toBeVisible
+})

examples/sites/demos/pc/app/grid/custom/ordercolumn-remote.spec.js

@@ -0,0 +1,7 @@
+import { test, expect } from '@playwright/test'
+
+test('加载远端数据', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-custom#custom-ordercolumn-remote')
+  await expect(page.getByRole('cell', { name: '所属区域' })).not.toBeVisible()
+})

examples/sites/demos/pc/app/grid/custom/page-size.spec.js

@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test'
+
+test('分页条数', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-custom#custom-page-size')
+  await expect(page.locator('.tiny-grid-body__row')).toHaveCount(10)
+  await page.locator('.tiny-grid-custom__setting-btn').click()
+  await page.getByText('其他设置', { exact: true }).click()
+  await page.locator('label').filter({ hasText: '5' }).locator('path').nth(1).click()
+  await page.getByRole('button', { name: '确定' }).click()
+  await expect(page.locator('.tiny-grid-body__row')).toHaveCount(5)
+})

examples/sites/demos/pc/app/grid/custom/reset-method-composition-api.vue

@@ -77,8 +77,8 @@ function resetMethod() {
   return new Promise((resolve) => {
     const customs = {
       columns: [
-        { property: 'name', visible: false, sortable: true, order: '', fixed: '' },
-        { property: 'area', visible: true, sortable: true, order: 'asc', fixed: '' },
+        { property: 'name', visible: true, sortable: true, order: '', fixed: '' },
+        { property: 'area', visible: false, sortable: true, order: 'asc', fixed: '' },
         { property: 'introduction', visible: true, sortable: true, order: '', fixed: '' },
         { property: 'address', visible: true, sortable: true, order: '', fixed: '' }
       ]

examples/sites/demos/pc/app/grid/custom/reset-method.spec.js

@@ -0,0 +1,10 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义重置', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-custom#custom-reset-method')
+  await page.locator('.tiny-grid-custom__setting-btn').click()
+  await page.getByRole('button', { name: '重置' }).click()
+  await page.getByRole('button', { name: '确定' }).click()
+  await expect(page.getByRole('cell', { name: '所属区域' })).not.toBeVisible()
+})

examples/sites/demos/pc/app/grid/custom/reset-method.vue

@@ -32,8 +32,8 @@ export default {
       return new Promise((resolve) => {
         const customs = {
           columns: [
-            { property: 'name', visible: false, sortable: true, order: '', fixed: '' },
-            { property: 'area', visible: true, sortable: true, order: 'asc', fixed: '' },
+            { property: 'name', visible: true, sortable: true, order: '', fixed: '' },
+            { property: 'area', visible: false, sortable: true, order: 'asc', fixed: '' },
             { property: 'introduction', visible: true, sortable: true, order: '', fixed: '' },
             { property: 'address', visible: true, sortable: true, order: '', fixed: '' }
           ]

examples/sites/demos/pc/app/grid/custom/reset-resizable.spec.js

@@ -3,9 +3,9 @@ import { test, expect } from '@playwright/test'
 test.describe('手动重置列操作', () => {
   test('重置列宽', async ({ page }) => {
     page.on('pageerror', (exception) => expect(exception).toBeNull())
-    await page.goto('grid-customized#custom-resetResizable')
-    const draggerDom = page.getByRole('cell', { name: '名称' }).locator('.tiny-grid-resizable')
-    const thDom = page.getByRole('cell', { name: '名称' })
+    await page.goto('grid-custom#custom-reset-resizable')
+    const draggerDom = page.getByRole('cell', { name: '员工数' }).locator('.tiny-grid-resizable')
+    const thDom = page.getByRole('cell', { name: '员工数' })
     // 获取初始列宽
     const { width: thWidth } = await thDom.boundingBox()
     // 获取拖拽元素位置
@@ -30,14 +30,14 @@ test.describe('手动重置列操作', () => {
 
   test('重置列隐藏', async ({ page }) => {
     page.on('pageerror', (exception) => expect(exception).toBeNull())
-    await page.goto('grid-customized#custom-resetResizable')
+    await page.goto('grid-custom#custom-reset-resizable')
     await page.locator('.tiny-grid-custom__setting-btn').click()
-    await page.getByRole('row', { name: '名称 显示 未冻结' }).getByTitle('显示').getByRole('img').click()
+    await page.getByRole('row', { name: '员工数 显示 未冻结' }).getByTitle('显示').getByRole('img').click()
     await page.getByRole('button', { name: '确定' }).click()
-    const thHeader = page.locator('th.tiny-grid-header__column').nth(0)
-    await expect(thHeader).toContainText('员工数')
+    const thHeader = page.locator('th.tiny-grid-header__column').nth(1)
+    await expect(thHeader).toContainText('地址')
     await page.getByRole('button', { name: '重置列的隐藏操作' }).click()
-    const thHeader2 = page.locator('th.tiny-grid-header__column').nth(0)
-    await expect(thHeader2).toContainText('名称')
+    const thHeader2 = page.locator('th.tiny-grid-header__column').nth(1)
+    await expect(thHeader2).toContainText('员工数')
   })
 })

examples/sites/demos/pc/app/grid/custom/server-storage.spec.js

@@ -0,0 +1,7 @@
+import { test, expect } from '@playwright/test'
+
+test('服务端存储', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-custom#custom-server-storage')
+  await expect(page.locator('.tiny-grid-header__column').nth(3)).toContainText('公司简介')
+})

examples/sites/demos/pc/app/grid/data-source/auto-load.spec.js

@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
 
 test('自动加载数据', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-data-source#tiny-first-menu-auto-load')
+  await page.goto('grid-data-source#data-source-auto-load')
   // 判断auto-load 为 false时不加载数据
   await page.getByRole('paragraph').nth(1).click()
 

examples/sites/demos/pc/app/grid/data-source/column-asyn-rendering.spec.js

@@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
 test('异步列加载', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   page.on('pageerror', (exception) => expect(exception).not.toBeNull())
-  await page.goto('grid-data-source#tiny-first-menu-column-asyn-rendering')
+  await page.goto('grid-data-source#data-source-column-asyn-rendering')
   const loading = page
     .getByRole('row', {
       name: '1 GFD科技YX公司 loading ... 800 2014-04-30 00:56:00 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'

examples/sites/demos/pc/app/grid/data-source/columns.spec.js

@@ -2,11 +2,8 @@ import { test, expect } from '@playwright/test'
 
 test('表格列的配置信息', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-data-source#tiny-first-menu-columns')
+  await page.goto('grid-data-source#data-source-columns')
 
   // 判断columns 设置表格列的配置信息成功
-  await expect(page.getByRole('cell', { name: '名称' })).toHaveText('名称')
-  await expect(page.getByText('所属区域').first()).toHaveText('所属区域')
-  await expect(page.getByText('地址').first()).toHaveText('地址')
-  await expect(page.getByRole('cell', { name: '公司简介' })).toHaveText('公司简介')
+  await expect(page.getByRole('cell', { name: 'WWWW科技YX公司' })).toBeVisible()
 })

examples/sites/demos/pc/app/grid/data-source/defslot-protochain-fetch.spec.js

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test'
+
+test('插槽中使用复杂数据', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-data-source#data-source-defslot-protochain-fetch')
+
+  // 判断columns 设置表格列的配置信息成功
+  await expect(page.getByRole('cell', { name: 'GFD科技有限公司' })).toBeVisible()
+})

examples/sites/demos/pc/app/grid/data-source/request-service.spec.js

@@ -2,10 +2,9 @@ import { test, expect } from '@playwright/test'
 
 test('开启服务请求', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-data-source#tiny-first-menu-request-service')
-  await page.getByText('开启服务请求').nth(2).click()
+  await page.goto('grid-data-source#data-source-request-service')
   await page.getByRole('button', { name: '筛选华南区数据' }).click()
 
   // 判断筛选华南区数据成功
-  await expect(page.getByText('WWWW科技YX公司').first()).toBeVisible()
+  await expect(page.locator('.tiny-grid-body__row')).toHaveCount(3)
 })

examples/sites/demos/pc/app/grid/data-source/static-data.spec.js

@@ -2,9 +2,17 @@ import { test, expect } from '@playwright/test'
 
 test('绑定静态数据', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-data-source#tiny-first-menu-static-data')
+  await page.goto('grid-data-source#data-source-static-data')
 
-  // 判断表格属性设置 data 开启双向绑定静态数据成功
-  await expect(page.getByText('1')).toHaveText('1')
-  await expect(page.getByText('GFD科技YX公司').first()).toHaveText('GFD科技YX公司')
+  // push添加数据
+  await page.getByRole('button', { name: '添加数据' }).click()
+  await expect(page.getByRole('cell', { name: 'ZZZ科技YX公司' })).toBeVisible()
+
+  // 减少数据
+  await page.getByRole('button', { name: '减少数据' }).click()
+  await expect(page.getByRole('cell', { name: 'ZZZ科技YX公司' })).toHaveCount(0)
+
+  // 改变data数据引用地址
+  await page.getByRole('button', { name: '改变tableData引用地址' }).click()
+  await expect(page.locator('.tiny-grid-body__row')).toHaveCount(2)
 })

examples/sites/demos/pc/app/grid/dynamically-columns/columns-dynamic.spec.js

@@ -0,0 +1,7 @@
+import { test, expect } from '@playwright/test'
+
+test('动态列数据', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-dynamically-columns#column-columns-dynamic')
+  await expect(page.getByRole('cell', { name: '2014-04-30 00:56:00' })).toBeVisible()
+})

examples/sites/demos/pc/app/grid/dynamically-columns/dynamically-columns.spec.js

@@ -1,12 +1,10 @@
 import { test, expect } from '@playwright/test'
 
-test('动态生成列测试', async ({ page }) => {
+test('根据日期动态生成列', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-dynamically-columns#grid_Example-dynamicallyColumns')
-  await page.getByRole('textbox').nth(2).click()
-  await page.getByText('三月').first().click()
-  await page.getByText('四月').first().click()
-  const firstTh = page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[2]/div[1]/div[2]/table/thead/tr[1]/th[2]')
-
-  await expect(firstTh).toContainText('3')
+  await page.goto('grid-dynamically-columns#dynamically-columns-dynamically-columns')
+  await page.getByRole('textbox').nth(1).click()
+  await page.getByText('十二月').first().click()
+  await page.getByText('二月').nth(2).click()
+  await expect(page.getByRole('cell', { name: '12' })).toBeVisible()
 })

examples/sites/demos/pc/app/grid/dynamically-columns/reverse-row.spec.js

@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
 
 test('表格反转测试', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-reverse-column-row#grid_Example-reverseRow')
+  await page.goto('grid-dynamically-columns#dynamically-columns-reverse-row')
   await page.getByRole('button', { name: '表格反转' }).click()
   await page.getByText('GFD科技YX公司').first().click()
 

examples/sites/demos/pc/app/grid/edit/custom-editing.spec.js

@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
 
 test('自定义编辑规则', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-edit#tiny-first-menu-custom-editing')
+  await page.goto('grid-edit#edit-custom-editing')
   await page.getByText('GFD科技YX公司').first().click()
   await expect(page.getByText('GFD科技YX公司').first()).toBeVisible()
   await page.getByText('WWWW科技YX公司').first().click()

examples/sites/demos/pc/app/grid/edit/editing.spec.js

@@ -1,17 +1,29 @@
 import { test, expect } from '@playwright/test'
 
-test('单元格编辑', async ({ page }) => {
+test('编辑方式', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-edit#tiny-first-menu-cell-editing')
-  await page.getByText('GFD科技YX公司').first().click()
+  await page.goto('grid-edit#edit-editing')
+  // 单元格编辑
+  await page.getByRole('cell', { name: 'GFD科技YX公司' }).first().click()
   await page
     .getByRole('row', {
       name: '1 华东区 福州 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
     })
     .getByRole('textbox')
-    .fill('eeee')
-  await page.getByText('名称').click()
+    .click()
+  await page
+    .getByRole('row', {
+      name: '1 华东区 福州 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+    })
+    .getByRole('textbox')
+    .fill('GFD科技Y水电费第三方X公司')
+  await page.getByRole('heading', { name: '单元格编辑：' }).click()
+  await expect(await page.getByText('GFD科技Y水电费第三方X公司')).toHaveCount(2)
 
-  await expect(page.getByText('eeee').first()).toBeVisible()
-  await expect(page.getByRole('cell', { name: 'eeee' })).toHaveClass(/col__valid-success/)
+  // 行编辑
+  await page.getByText('华东区').nth(1).click()
+  await page.getByRole('textbox').nth(2).click()
+  await page.getByRole('textbox').nth(2).fill('水电费水电费')
+  await page.getByRole('heading', { name: '行编辑：' }).click()
+  await expect(page.getByRole('cell', { name: '水电费水电费' })).toHaveCount(2)
 })

examples/sites/demos/pc/app/grid/edit/editor-is-valid-always.spec.js

@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
 
 test('自定义编辑校验规则', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-edit#tiny-first-menu-editor-is-salid-always')
+  await page.goto('grid-edit#edit-editor-is-valid-always')
   await page
     .getByRole('row', {
       name: '2 华南区 深圳福田区 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'

examples/sites/demos/pc/app/grid/edit/has-row-change.spec.js

@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
 
 test('检查数据是否改变', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-edit#edit-hasRowChange')
+  await page.goto('grid-edit#edit-has-row-change')
   await page.getByText('GFD科技YX公司').first().click()
   await page.getByRole('row', { name: '1 保存' }).locator('input[type="text"]').fill('sdf')
   await page.getByRole('row', { name: '1 保存' }).getByRole('button', { name: '保存' }).click()

examples/sites/demos/pc/app/grid/edit/revert-data.spec.js

@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
 
 test('表格编辑还原更改', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-edit#edit-revertData')
+  await page.goto('grid-edit#edit-revert-data')
   await page.getByText('GFD科技YX公司').first().click()
   await page
     .getByRole('row', {
@@ -17,7 +17,7 @@ test('表格编辑还原更改', async ({ page }) => {
     })
     .getByRole('textbox')
     .fill('eee')
-  await page.getByText('名称').click()
+  await page.locator('#edit-revert-data').getByRole('cell', { name: '名称' }).click()
   await page.getByRole('button', { name: '恢复全部' }).click()
   await expect(page.getByText('GFD科技YX公司').first()).toBeVisible()
   await expect(page.getByText('RFV有限责任公司').first()).toBeVisible()

examples/sites/demos/pc/app/grid/edit/status-of-editing.spec.js

@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
 
 test('开启编辑状态', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-edit#tiny-first-menu-status-of-editing')
+  await page.goto('grid-edit#edit-status-of-editing')
   await page.getByText('GFD科技YX公司').first().click()
   await page
     .getByRole('row', {
@@ -10,6 +10,7 @@ test('开启编辑状态', async ({ page }) => {
     })
     .getByRole('textbox')
     .fill('sdfdf')
-  await page.getByText('名称').click()
-  await expect(page.getByRole('cell', { name: 'sdfdf' })).toHaveClass(/col__valid-success/)
+  await page.getByRole('heading', { name: '开启编辑状态：' }).click()
+  await expect(page.getByRole('cell', { name: 'sdfdf' }).nth(0)).toHaveClass(/col__valid-success/)
+  await expect(page.getByRole('cell', { name: 'sdfdf' }).nth(1)).not.toHaveClass(/col__valid-success/)
 })

examples/sites/demos/pc/app/grid/edit/trigger-mode-for-editing.spec.js

@@ -1,8 +1,8 @@
 import { test, expect } from '@playwright/test'
 
-test('点击触发编辑', async ({ page }) => {
+test('触发编辑方式', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-edit#tiny-first-menu-trigger-mode-for-editing')
+  await page.goto('grid-edit#edit-trigger-mode-for-editing')
   await page.getByText('GFD科技YX公司').first().click()
   await expect(
     page
@@ -11,4 +11,14 @@ test('点击触发编辑', async ({ page }) => {
       })
       .getByRole('textbox')
   ).toBeVisible()
+
+  await page.getByText('WWWW科技YX公司').nth(1).dblclick()
+
+  await expect(
+    page
+      .getByRole('row', {
+        name: '2 华南区 深圳福田区 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+      })
+      .getByRole('textbox')
+  ).toBeVisible()
 })

examples/sites/demos/pc/app/grid/edit/trigger-mode-hm-editing.spec.js

@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
 
 test('手动触发编辑', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-edit#tiny-first-menu-trigger-mode-hm-editing')
+  await page.goto('grid-edit#edit-trigger-mode-hm-editing')
   await page.getByText('GFD科技YX公司').first().click()
   await expect(page.getByText('GFD科技YX公司').first()).toBeVisible()
   await page

examples/sites/demos/pc/app/grid/editor/custom-edit.spec.js

@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test'
+
+test('多行编辑', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-editor#editor-custom-edit')
+  await expect(page.getByRole('row', { name: '1 请选择 保存 取消' }).getByRole('textbox').first()).toBeVisible()
+  await expect(page.getByRole('row', { name: '2 请选择 保存 取消' }).getByRole('textbox').first()).toBeVisible()
+})

examples/sites/demos/pc/app/grid/editor/custom-editor-select.spec.js

@@ -1,14 +1,11 @@
 import { test, expect } from '@playwright/test'
 
-test('引入 3.0 组件作为编辑器', async ({ page }) => {
+test('引入组件作为编辑器', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-editor#grid_Example-gridEdit-custom-editor-select')
-  await page
-    .getByRole('row', {
-      name: '1 GFD科技YX公司 华中区 2014-04-30 00:56:00 800 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-    })
-    .getByText('华中区')
-    .click()
-  await page.getByPlaceholder('请选择').click()
-  await expect(page.getByRole('listitem').filter({ hasText: '华东区' })).toBeVisible()
+  await page.goto('grid-editor#editor-custom-editor-select')
+  await page.getByText('华中区').first().click()
+  await page.getByRole('textbox', { name: '请选择' }).click()
+  await page.getByRole('list').getByText('西南区').click()
+  await page.getByRole('cell', { name: '创建时间' }).click()
+  await expect(page.locator('.tiny-grid-body__row').first()).toContainText('西南区')
 })

examples/sites/demos/pc/app/grid/editor/custom-editor2-composition-api.vue

@@ -1,158 +0,0 @@
-<template>
-  <div>
-    <tiny-grid :data="tableData" :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }">
-      <tiny-grid-column type="index" width="60"></tiny-grid-column>
-      <tiny-grid-column
-        field="name"
-        title="属性自定义列编辑"
-        :editor="{
-          component: Autocomplete,
-          attrs: { fetchSuggestions: querySearch, placeholder: '请输入内容' }
-        }"
-      ></tiny-grid-column>
-      <tiny-grid-column field="createdDate" title="创建时间"></tiny-grid-column>
-      <tiny-grid-column field="employees" title="人数"></tiny-grid-column>
-      <tiny-grid-column field="introduction" title="公司简介"></tiny-grid-column>
-    </tiny-grid>
-  </div>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Autocomplete as TinyAutocomplete } from '@opentiny/vue'
-
-const Autocomplete = ref(Autocomplete)
-const tableData = ref([
-  {
-    id: '1',
-    name: 'GFD科技YX公司',
-    userId: 421000103624183,
-    area: '华东区',
-    province: '福建省',
-    city: '福州',
-    contact: '许生',
-    telephone: '1234567890',
-    address: '福州',
-    ipaddress: '192.168.111.111',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
-    employees: 800,
-    createdDate: '2014-04-30 00:56:00',
-    boole: false,
-    assets: '1000000',
-    rate: 0.9
-  },
-  {
-    id: '2',
-    name: 'WWW科技YX公司',
-    userId: 421000103624183,
-    area: '华南区',
-    province: '广东省',
-    city: '深圳',
-    contact: '朱生',
-    telephone: '1234567890',
-    address: '深圳福田区',
-    ipaddress: '192.168.111.1',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
-    employees: 300,
-    createdDate: '2016-07-08 12:36:22',
-    boole: true,
-    assets: '1500000',
-    rate: 0.7
-  },
-  {
-    id: '3',
-    name: 'RFV有限责任公司',
-    userId: 441047913162396,
-    area: '华南区',
-    province: '广东省',
-    city: '中山',
-    contact: '秦生',
-    telephone: '1234567890',
-    address: '中山市',
-    ipaddress: '192.168.111.120',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
-    employees: 1300,
-    createdDate: '2014-02-14 14:14:14',
-    boole: false,
-    assets: '1500000',
-    rate: 0.6
-  },
-  {
-    id: '4',
-    name: 'TGB科技YX公司',
-    userId: 702973890055088,
-    area: '华东区',
-    province: '福建省',
-    city: '龙岩',
-    contact: '周生',
-    telephone: '1234567890',
-    address: '龙岩',
-    ipaddress: '192.168.11.111',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
-    employees: 360,
-    createdDate: '2013-01-13 13:13:13',
-    boole: true,
-    assets: '1200000',
-    rate: 0.5
-  },
-  {
-    id: '5',
-    name: 'YHN科技YX公司',
-    userId: 702973890055088,
-    area: '华南区',
-    province: '广东省',
-    city: '韶关',
-    contact: '郑生',
-    telephone: '1234567890',
-    address: '韶关',
-    ipaddress: '192.168.101.111',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
-    employees: 810,
-    createdDate: '2012-12-12 12:12:12',
-    boole: true,
-    assets: '1500000',
-    rate: 0.6
-  }
-])
-const restaurants = ref([
-  {
-    value: 'GFD科技YX公司',
-    address: '福州'
-  },
-  {
-    value: 'WWWW科技YX公司',
-    address: '深圳福田区'
-  },
-  {
-    value: 'RFV有限责任公司',
-    address: '中山市'
-  },
-  {
-    value: 'TGBYX公司',
-    address: '梅州'
-  },
-  {
-    value: 'YHN科技YX公司',
-    address: '韶关'
-  },
-  {
-    value: '康康物业YX公司',
-    address: '广州天河区'
-  }
-])
-
-function querySearch(queryString, cb) {
-  let list = restaurants.value
-
-  let results = queryString
-    ? list.filter((queryString) => {
-        return (item) => {
-          return item.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
-        }
-      })
-    : list
-
-  // 调用 callback 返回建议列表的数据
-  cb(results)
-}
-</script>

examples/sites/demos/pc/app/grid/editor/custom-editor2.vue

@@ -1,168 +0,0 @@
-<template>
-  <div>
-    <tiny-grid :data="tableData" :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }">
-      <tiny-grid-column type="index" width="60"></tiny-grid-column>
-      <tiny-grid-column
-        field="name"
-        title="属性自定义列编辑"
-        :editor="{
-          component: Autocomplete,
-          attrs: { fetchSuggestions: querySearch, placeholder: '请输入内容' }
-        }"
-      ></tiny-grid-column>
-      <tiny-grid-column field="createdDate" title="创建时间"></tiny-grid-column>
-      <tiny-grid-column field="employees" title="人数"></tiny-grid-column>
-      <tiny-grid-column field="introduction" title="公司简介"></tiny-grid-column>
-    </tiny-grid>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Grid, GridColumn, Autocomplete } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
-  },
-  data() {
-    return {
-      Autocomplete,
-      tableData: [
-        {
-          id: '1',
-          name: 'GFD科技YX公司',
-          userId: 421000103624183,
-          area: '华东区',
-          province: '福建省',
-          city: '福州',
-          contact: '许生',
-          telephone: '1234567890',
-          address: '福州',
-          ipaddress: '192.168.111.111',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
-          employees: 800,
-          createdDate: '2014-04-30 00:56:00',
-          boole: false,
-          assets: '1000000',
-          rate: 0.9
-        },
-        {
-          id: '2',
-          name: 'WWW科技YX公司',
-          userId: 421000103624183,
-          area: '华南区',
-          province: '广东省',
-          city: '深圳',
-          contact: '朱生',
-          telephone: '1234567890',
-          address: '深圳福田区',
-          ipaddress: '192.168.111.1',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
-          employees: 300,
-          createdDate: '2016-07-08 12:36:22',
-          boole: true,
-          assets: '1500000',
-          rate: 0.7
-        },
-        {
-          id: '3',
-          name: 'RFV有限责任公司',
-          userId: 441047913162396,
-          area: '华南区',
-          province: '广东省',
-          city: '中山',
-          contact: '秦生',
-          telephone: '1234567890',
-          address: '中山市',
-          ipaddress: '192.168.111.120',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
-          employees: 1300,
-          createdDate: '2014-02-14 14:14:14',
-          boole: false,
-          assets: '1500000',
-          rate: 0.6
-        },
-        {
-          id: '4',
-          name: 'TGB科技YX公司',
-          userId: 702973890055088,
-          area: '华东区',
-          province: '福建省',
-          city: '龙岩',
-          contact: '周生',
-          telephone: '1234567890',
-          address: '龙岩',
-          ipaddress: '192.168.11.111',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
-          employees: 360,
-          createdDate: '2013-01-13 13:13:13',
-          boole: true,
-          assets: '1200000',
-          rate: 0.5
-        },
-        {
-          id: '5',
-          name: 'YHN科技YX公司',
-          userId: 702973890055088,
-          area: '华南区',
-          province: '广东省',
-          city: '韶关',
-          contact: '郑生',
-          telephone: '1234567890',
-          address: '韶关',
-          ipaddress: '192.168.101.111',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
-          employees: 810,
-          createdDate: '2012-12-12 12:12:12',
-          boole: true,
-          assets: '1500000',
-          rate: 0.6
-        }
-      ],
-      restaurants: [
-        {
-          value: 'GFD科技YX公司',
-          address: '福州'
-        },
-        {
-          value: 'WWWW科技YX公司',
-          address: '深圳福田区'
-        },
-        {
-          value: 'RFV有限责任公司',
-          address: '中山市'
-        },
-        {
-          value: 'TGBYX公司',
-          address: '梅州'
-        },
-        {
-          value: 'YHN科技YX公司',
-          address: '韶关'
-        },
-        {
-          value: '康康物业YX公司',
-          address: '广州天河区'
-        }
-      ]
-    }
-  },
-  methods: {
-    querySearch(queryString, cb) {
-      let list = this.restaurants
-
-      let results = queryString
-        ? list.filter((queryString) => {
-            return (item) => {
-              return item.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
-            }
-          })
-        : list
-
-      // 调用 callback 返回建议列表的数据
-      cb(results)
-    }
-  }
-}
-</script>

examples/sites/demos/pc/app/grid/editor/custom-editor3-composition-api.vue

@@ -1,158 +0,0 @@
-<template>
-  <div>
-    <tiny-grid :data="tableData" :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }">
-      <tiny-grid-column type="index" width="60"></tiny-grid-column>
-      <tiny-grid-column field="name" title="插槽自定义列编辑" :editor="{}">
-        <template #edit="data">
-          <tiny-autocomplete
-            v-model="data.row.name"
-            :fetch-suggestions="querySearch"
-            placeholder="请输入内容"
-          ></tiny-autocomplete>
-        </template>
-      </tiny-grid-column>
-      <tiny-grid-column field="createdDate" title="创建时间"></tiny-grid-column>
-      <tiny-grid-column field="employees" title="人数"></tiny-grid-column>
-      <tiny-grid-column field="introduction" title="公司简介"></tiny-grid-column>
-    </tiny-grid>
-  </div>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Autocomplete as TinyAutocomplete } from '@opentiny/vue'
-
-const tableData = ref([
-  {
-    id: '1',
-    name: 'GFD科技YX公司',
-    userId: 421000103624183,
-    area: '华东区',
-    province: '福建省',
-    city: '福州',
-    contact: '许生',
-    telephone: '1234567890',
-    address: '福州',
-    ipaddress: '192.168.111.111',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
-    employees: 800,
-    createdDate: '2014-04-30 00:56:00',
-    boole: false,
-    assets: '1000000',
-    rate: 0.9
-  },
-  {
-    id: '2',
-    name: 'WWW科技YX公司',
-    userId: 421000103624183,
-    area: '华南区',
-    province: '广东省',
-    city: '深圳',
-    contact: '朱生',
-    telephone: '1234567890',
-    address: '深圳福田区',
-    ipaddress: '192.168.111.1',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
-    employees: 300,
-    createdDate: '2016-07-08 12:36:22',
-    boole: true,
-    assets: '1500000',
-    rate: 0.7
-  },
-  {
-    id: '3',
-    name: 'RFV有限责任公司',
-    userId: 441047913162396,
-    area: '华南区',
-    province: '广东省',
-    city: '中山',
-    contact: '秦生',
-    telephone: '1234567890',
-    address: '中山市',
-    ipaddress: '192.168.111.120',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
-    employees: 1300,
-    createdDate: '2014-02-14 14:14:14',
-    boole: false,
-    assets: '1500000',
-    rate: 0.6
-  },
-  {
-    id: '4',
-    name: 'TGB科技YX公司',
-    userId: 702973890055088,
-    area: '华东区',
-    province: '福建省',
-    city: '龙岩',
-    contact: '周生',
-    telephone: '1234567890',
-    address: '龙岩',
-    ipaddress: '192.168.11.111',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
-    employees: 360,
-    createdDate: '2013-01-13 13:13:13',
-    boole: true,
-    assets: '1200000',
-    rate: 0.5
-  },
-  {
-    id: '5',
-    name: 'YHN科技YX公司',
-    userId: 702973890055088,
-    area: '华南区',
-    province: '广东省',
-    city: '韶关',
-    contact: '郑生',
-    telephone: '1234567890',
-    address: '韶关',
-    ipaddress: '192.168.101.111',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
-    employees: 810,
-    createdDate: '2012-12-12 12:12:12',
-    boole: true,
-    assets: '1500000',
-    rate: 0.6
-  }
-])
-const restaurants = ref([
-  {
-    value: 'GFD科技YX公司',
-    address: '福州'
-  },
-  {
-    value: 'WWWW科技YX公司',
-    address: '深圳福田区'
-  },
-  {
-    value: 'RFV有限责任公司',
-    address: '中山市'
-  },
-  {
-    value: 'TGBYX公司',
-    address: '梅州'
-  },
-  {
-    value: 'YHN科技YX公司',
-    address: '韶关'
-  },
-  {
-    value: '康康物业YX公司',
-    address: '广州天河区'
-  }
-])
-
-function querySearch(queryString, cb) {
-  let list = restaurants.value
-
-  let results = queryString
-    ? list.filter((queryString) => {
-        return (item) => {
-          return item.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
-        }
-      })
-    : list
-
-  // 调用 callback 返回建议列表的数据
-  cb(results)
-}
-</script>

examples/sites/demos/pc/app/grid/editor/custom-editor3.vue

@@ -1,169 +0,0 @@
-<template>
-  <div>
-    <tiny-grid :data="tableData" :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }">
-      <tiny-grid-column type="index" width="60"></tiny-grid-column>
-      <tiny-grid-column field="name" title="插槽自定义列编辑" :editor="{}">
-        <template #edit="data">
-          <tiny-autocomplete
-            v-model="data.row.name"
-            :fetch-suggestions="querySearch"
-            placeholder="请输入内容"
-          ></tiny-autocomplete>
-        </template>
-      </tiny-grid-column>
-      <tiny-grid-column field="createdDate" title="创建时间"></tiny-grid-column>
-      <tiny-grid-column field="employees" title="人数"></tiny-grid-column>
-      <tiny-grid-column field="introduction" title="公司简介"></tiny-grid-column>
-    </tiny-grid>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Grid, GridColumn, Autocomplete } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyAutocomplete: Autocomplete
-  },
-  data() {
-    return {
-      tableData: [
-        {
-          id: '1',
-          name: 'GFD科技YX公司',
-          userId: 421000103624183,
-          area: '华东区',
-          province: '福建省',
-          city: '福州',
-          contact: '许生',
-          telephone: '1234567890',
-          address: '福州',
-          ipaddress: '192.168.111.111',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
-          employees: 800,
-          createdDate: '2014-04-30 00:56:00',
-          boole: false,
-          assets: '1000000',
-          rate: 0.9
-        },
-        {
-          id: '2',
-          name: 'WWW科技YX公司',
-          userId: 421000103624183,
-          area: '华南区',
-          province: '广东省',
-          city: '深圳',
-          contact: '朱生',
-          telephone: '1234567890',
-          address: '深圳福田区',
-          ipaddress: '192.168.111.1',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
-          employees: 300,
-          createdDate: '2016-07-08 12:36:22',
-          boole: true,
-          assets: '1500000',
-          rate: 0.7
-        },
-        {
-          id: '3',
-          name: 'RFV有限责任公司',
-          userId: 441047913162396,
-          area: '华南区',
-          province: '广东省',
-          city: '中山',
-          contact: '秦生',
-          telephone: '1234567890',
-          address: '中山市',
-          ipaddress: '192.168.111.120',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
-          employees: 1300,
-          createdDate: '2014-02-14 14:14:14',
-          boole: false,
-          assets: '1500000',
-          rate: 0.6
-        },
-        {
-          id: '4',
-          name: 'TGB科技YX公司',
-          userId: 702973890055088,
-          area: '华东区',
-          province: '福建省',
-          city: '龙岩',
-          contact: '周生',
-          telephone: '1234567890',
-          address: '龙岩',
-          ipaddress: '192.168.11.111',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
-          employees: 360,
-          createdDate: '2013-01-13 13:13:13',
-          boole: true,
-          assets: '1200000',
-          rate: 0.5
-        },
-        {
-          id: '5',
-          name: 'YHN科技YX公司',
-          userId: 702973890055088,
-          area: '华南区',
-          province: '广东省',
-          city: '韶关',
-          contact: '郑生',
-          telephone: '1234567890',
-          address: '韶关',
-          ipaddress: '192.168.101.111',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
-          employees: 810,
-          createdDate: '2012-12-12 12:12:12',
-          boole: true,
-          assets: '1500000',
-          rate: 0.6
-        }
-      ],
-      restaurants: [
-        {
-          value: 'GFD科技YX公司',
-          address: '福州'
-        },
-        {
-          value: 'WWWW科技YX公司',
-          address: '深圳福田区'
-        },
-        {
-          value: 'RFV有限责任公司',
-          address: '中山市'
-        },
-        {
-          value: 'TGBYX公司',
-          address: '梅州'
-        },
-        {
-          value: 'YHN科技YX公司',
-          address: '韶关'
-        },
-        {
-          value: '康康物业YX公司',
-          address: '广州天河区'
-        }
-      ]
-    }
-  },
-  methods: {
-    querySearch(queryString, cb) {
-      let list = this.restaurants
-
-      let results = queryString
-        ? list.filter((queryString) => {
-            return (item) => {
-              return item.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
-            }
-          })
-        : list
-
-      // 调用 callback 返回建议列表的数据
-      cb(results)
-    }
-  }
-}
-</script>

examples/sites/demos/pc/app/grid/editor/editor-bg.spec.js

@@ -0,0 +1,14 @@
+import { test, expect } from '@playwright/test'
+
+test('维护编辑状态', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-editor#editor-editor-bg')
+  await page.getByRole('cell', { name: '中山市' }).click()
+  await expect(
+    page
+      .getByRole('row', {
+        name: '3 RFV有限责任公司 华南区 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+      })
+      .getByRole('textbox')
+  ).toHaveCount(0)
+})

examples/sites/demos/pc/app/grid/editor/mutil-render.spec.js

@@ -2,22 +2,10 @@ import { test, expect } from '@playwright/test'
 
 test('Grid-编辑器-下拉多选', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-editor#edit-mutil-render')
-  await page
-    .getByRole('row', {
-      name: '3 RFV有限责任公司 华南区 2014-02-14 14:14:14 1300 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-    })
-    .getByText('华南区')
-    .click()
-  await page
-    .getByRole('row', {
-      name: '3 RFV有限责任公司 2014-02-14 14:14:14 1300 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-    })
-    .locator('div')
-    .filter({ hasText: /^华南区$/ })
-    .click()
-  await page.getByRole('listitem').filter({ hasText: '华中区' }).locator('span').nth(2).click()
-  await page.getByRole('listitem').filter({ hasText: '华东区' }).locator('span').first().click()
-  await page.getByText('区域').first().click()
-  await expect(page.getByText('华中区;华东区;华南区').first()).toBeVisible()
+  await page.goto('grid-editor#editor-mutil-render')
+  await page.getByText('华中区;华南区').click()
+  await page.locator('.tiny-input__suffix-inner > .tiny-svg > .st0').click()
+  await page.locator('li').filter({ hasText: '华东区' }).locator('span').nth(2).click()
+  await page.getByRole('cell', { name: '创建时间' }).click()
+  await expect(page.locator('.tiny-grid-body__row').first()).toContainText('华中区;华东区;华南区')
 })

examples/sites/demos/pc/app/grid/editor/popeditor-in-grid-remote-search.spec.js

@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
 
 test('Popeditor 弹窗编辑，配置远程搜索', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-editor#grid_Example-gridEdit-popeditor-in-grid-remote-search')
+  await page.goto('grid-editor#editor-popeditor-in-grid-remote-search')
   await page.getByText('GFD科技YX公司').first().click()
   await page
     .getByRole('row', {

examples/sites/demos/pc/app/grid/editor/user-in-grid-composition-api.vue

@@ -1,126 +0,0 @@
-<template>
-  <tiny-grid :fetch-data="fetchData" :pager="pagerConfig">
-    <tiny-grid-column type="index" width="60"></tiny-grid-column>
-    <tiny-grid-column field="name" title="名称"></tiny-grid-column>
-    <tiny-grid-column
-      field="user"
-      width="500"
-      :editor="{
-        component: User,
-        type: 'visible',
-        attrs: { multiple: true, fetchW3Accounts }
-      }"
-    ></tiny-grid-column>
-    <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
-  </tiny-grid>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Pager, User as TinyUser } from '@opentiny/vue'
-
-const User = ref(User)
-const userData = ref([])
-// 該数组用来临时存放每一页的用户数据
-const pagerConfig = ref({
-  component: Pager,
-  attrs: {
-    currentPage: 1,
-    pageSize: 5,
-    pageSizes: [5, 10],
-    total: 0,
-    layout: 'total, prev, pager, next, jumper, sizes'
-  }
-})
-const fetchData = ref({
-  api: getData
-})
-const tableData = ref([
-  {
-    id: '1',
-    name: 'GFD科技有限公司',
-    user: '421000103624183,435259704104388', // 该行数据为多用户
-    employees: 800,
-    createdDate: '2014-04-30 00:56:00',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-  },
-  {
-    id: '2',
-    name: 'WWW科技有限公司',
-    user: '435259704104388',
-    employees: 300,
-    createdDate: '2016-07-08 12:36:22',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-  },
-  {
-    id: '3',
-    name: 'RFV有限责任公司',
-    user: '441047913162396',
-    employees: 1300,
-    createdDate: '2014-02-14 14:14:14',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-  },
-  {
-    id: '4',
-    name: 'TGB科技有限公司',
-    user: '702973890055088',
-    employees: 360,
-    createdDate: '2013-01-13 13:13:13',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-  },
-  {
-    id: '5',
-    name: 'YHN科技有限公司',
-    user: '702973890055088',
-    employees: 810,
-    createdDate: '2012-12-12 12:12:12',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-  },
-  {
-    id: '6',
-    name: 'WSX科技有限公司',
-    user: '702973890055088',
-    employees: 800,
-    createdDate: '2011-11-11 11:11:11',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-  },
-  {
-    id: '7',
-    name: 'KBG物业有限公司',
-    user: '435259704104388',
-    employees: 400,
-    createdDate: '2016-04-30 23:56:00',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-  },
-  {
-    id: '8',
-    name: '深圳市福德宝网络技术有限公司',
-    user: '421000103624183',
-    createdDate: '2016-06-03 13:53:25',
-    employees: 540,
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-  }
-])
-
-function getData({ page }) {
-  const curPage = page.currentPage
-  const pageSize = page.pageSize
-  const offset = (curPage - 1) * pageSize
-
-  return new Promise((resolve) => {
-    const datas = tableData.value.slice(offset, offset + pageSize) // 根据静态数据 tableData 模拟表格分页
-
-    // 在表格返回数据之前，请求当前页的所有用户信息，存放到临时的用户数据 userData 中
-    $service.fetchW3Accounts(datas.map((item) => item.user).join(',')).then((data) => {
-      userData.value = data
-      resolve({ result: datas, page: { total: tableData.value.length } })
-    })
-  })
-}
-
-// 以下方法是设置用户组件自定义服务的请求方法
-function fetchW3Accounts(value) {
-  // 从临时存放的用户数据里根据单元格的值 value 过滤出匹配的用户信息, 如果 value 是多个用户时，值要以逗号间隔，并且在列上需要配置 User 组件 multiple 为 true
-  return Promise.resolve(userData.value.filter((item) => value.split(',').includes(item.userId.toString())))
-}
-</script>

examples/sites/demos/pc/app/grid/editor/user-in-grid.vue

@@ -1,134 +0,0 @@
-<template>
-  <tiny-grid :fetch-data="fetchData" :pager="pagerConfig">
-    <tiny-grid-column type="index" width="60"></tiny-grid-column>
-    <tiny-grid-column field="name" title="名称"></tiny-grid-column>
-    <tiny-grid-column
-      field="user"
-      width="500"
-      :editor="{
-        component: User,
-        type: 'visible',
-        attrs: { multiple: true, fetchW3Accounts }
-      }"
-    ></tiny-grid-column>
-    <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
-  </tiny-grid>
-</template>
-
-<script lang="jsx">
-import { Grid, GridColumn, Pager, User } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
-  },
-  data() {
-    return {
-      User,
-      userData: [], // 該数组用来临时存放每一页的用户数据
-      pagerConfig: {
-        component: Pager,
-        attrs: {
-          currentPage: 1,
-          pageSize: 5,
-          pageSizes: [5, 10],
-          total: 0,
-          layout: 'total, prev, pager, next, jumper, sizes'
-        }
-      },
-      fetchData: {
-        api: this.getData
-      },
-      tableData: [
-        {
-          id: '1',
-          name: 'GFD科技有限公司',
-          user: '421000103624183,435259704104388', // 该行数据为多用户
-          employees: 800,
-          createdDate: '2014-04-30 00:56:00',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-        },
-        {
-          id: '2',
-          name: 'WWW科技有限公司',
-          user: '435259704104388',
-          employees: 300,
-          createdDate: '2016-07-08 12:36:22',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-        },
-        {
-          id: '3',
-          name: 'RFV有限责任公司',
-          user: '441047913162396',
-          employees: 1300,
-          createdDate: '2014-02-14 14:14:14',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-        },
-        {
-          id: '4',
-          name: 'TGB科技有限公司',
-          user: '702973890055088',
-          employees: 360,
-          createdDate: '2013-01-13 13:13:13',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-        },
-        {
-          id: '5',
-          name: 'YHN科技有限公司',
-          user: '702973890055088',
-          employees: 810,
-          createdDate: '2012-12-12 12:12:12',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-        },
-        {
-          id: '6',
-          name: 'WSX科技有限公司',
-          user: '702973890055088',
-          employees: 800,
-          createdDate: '2011-11-11 11:11:11',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-        },
-        {
-          id: '7',
-          name: 'KBG物业有限公司',
-          user: '435259704104388',
-          employees: 400,
-          createdDate: '2016-04-30 23:56:00',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-        },
-        {
-          id: '8',
-          name: '深圳市福德宝网络技术有限公司',
-          user: '421000103624183',
-          createdDate: '2016-06-03 13:53:25',
-          employees: 540,
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-        }
-      ]
-    }
-  },
-  methods: {
-    getData({ page }) {
-      const curPage = page.currentPage
-      const pageSize = page.pageSize
-      const offset = (curPage - 1) * pageSize
-
-      return new Promise((resolve) => {
-        const datas = this.tableData.slice(offset, offset + pageSize) // 根据静态数据 tableData 模拟表格分页
-
-        // 在表格返回数据之前，请求当前页的所有用户信息，存放到临时的用户数据 userData 中
-        this.$service.fetchW3Accounts(datas.map((item) => item.user).join(',')).then((data) => {
-          this.userData = data
-          resolve({ result: datas, page: { total: this.tableData.length } })
-        })
-      })
-    },
-    // 以下方法是设置用户组件自定义服务的请求方法
-    fetchW3Accounts(value) {
-      // 从临时存放的用户数据里根据单元格的值 value 过滤出匹配的用户信息, 如果 value 是多个用户时，值要以逗号间隔，并且在列上需要配置 User 组件 multiple 为 true
-      return Promise.resolve(this.userData.filter((item) => value.split(',').includes(item.userId.toString())))
-    }
-  }
-}
-</script>

examples/sites/demos/pc/app/grid/empty/empty-data-default-tip.spec.js

@@ -2,8 +2,8 @@ import { test, expect } from '@playwright/test'
 
 test('默认提示', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-empty-data-tip#tiny-first-menu-empty-data-default-tip')
+  await page.goto('grid-empty#empty-empty-data-default-tip')
 
   // 空数据时判断默认提示成功
-  await expect(page.getByText('暂无数据')).toHaveText('暂无数据')
+  await expect(page.getByText('暂无数据')).toBeVisible()
 })

examples/sites/demos/pc/app/grid/empty/empty-data-iscenter.spec.js

@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test'
+
+test('固定居中', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-empty#empty-empty-data-iscenter')
+
+  // 空数据时判断默认提示成功
+  await expect(page.getByText('暂无数据').first()).toBeVisible()
+
+  // 判断是否居中
+  await expect(page.locator('.empty-center-block')).toHaveCSS('justify-content', 'center')
+})

examples/sites/demos/pc/app/grid/empty/empty-data-tip.spec.js

@@ -1,9 +1,10 @@
 import { test, expect } from '@playwright/test'
 
-test('自定义提示', async ({ page }) => {
+test('默认提示', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-empty-data-tip#tiny-first-menu-empty-data-tip')
+  await page.goto('grid-empty#empty-empty-data-tip')
 
-  // 判断通过设置插槽 v-slot:empty自定义提示内容成功
-  await expect(await page.getByText('没有更多数据了！')).toHaveText('没有更多数据了！')
+  // 空数据时判断默认提示成功
+  await expect(page.getByText('没有更多数据了！')).toBeVisible()
+  await expect(page.getByText('没有更多数据了', { exact: true })).toBeVisible()
 })

examples/sites/demos/pc/app/grid/event/cell-mouse-event.spec.js

@@ -1,9 +1,10 @@
 import { test, expect } from '@playwright/test'
 
-test('鼠标进入单元格事件', async ({ page }) => {
+test('鼠标进入离开单元格事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-event#event-cell-mouseenter-event')
+  await page.goto('grid-event#event-cell-mouse-event')
   await page.getByText('福州').first().hover()
-
   await expect(page.getByText('鼠标进入单元格地址')).toBeVisible()
+  await page.getByText('cell-mouseleave 可以监听到鼠标离开单元格事件').hover()
+  await expect(page.getByText('鼠标离开单元格地址')).toBeVisible()
 })

examples/sites/demos/pc/app/grid/event/click-event-composition-api.vue

@@ -120,7 +120,7 @@ const tableData = ref([
 
 const headerCellClickEvent = ({ column }) => {
   Modal.message({
-    message: `表头单元格点击${column.title}`,
+    message: `表头点击${column.title}`,
     status: 'info'
   })
 }
@@ -135,7 +135,7 @@ const cellDBLClickEvent = ({ column }) => {
 
 const headerCellDBLClickEvent = ({ column }) => {
   Modal.message({
-    message: `表头单元格双击${column.title}`,
+    message: `表头双击${column.title}`,
     status: 'info'
   })
 }

examples/sites/demos/pc/app/grid/event/click-event.spec.js

@@ -1,9 +1,34 @@
 import { test, expect } from '@playwright/test'
 
-test('表头单元格单击事件', async ({ page }) => {
+test('点击事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-event#event-header-click-event')
-  await page.getByText('名称').click()
+  await page.goto('grid-event#event-click-event')
 
-  await expect(page.getByText('表头单元格点击名称')).toBeVisible()
+  const header = page.locator('#event-click-event').getByRole('cell', { name: '名称' })
+
+  // 表头单击
+  await header.click()
+  await expect(page.locator('.tiny-modal__body').filter({ hasText: '表头点击名称' })).toBeVisible()
+
+  // 表头双击
+  await header.dblclick()
+  await expect(page.locator('.tiny-modal__body').filter({ hasText: '表头双击名称' })).toBeVisible()
+
+  const cell = page.getByRole('cell', { name: 'GFD科技YX公司' })
+
+  // 单元格单击
+  await cell.click()
+  await expect(page.locator('.tiny-modal__body').filter({ hasText: '单元格点击名称' })).toBeVisible()
+
+  // 单元格双击
+  await cell.dblclick()
+  await expect(page.locator('.tiny-modal__body').filter({ hasText: '单元格双击名称' })).toBeVisible()
+
+  // 表尾单击
+  await page.getByRole('cell', { name: '总计人数' }).click()
+  await expect(page.locator('.tiny-modal__body').filter({ hasText: '1' })).toBeVisible()
+
+  // 表尾双击
+  await page.getByRole('cell', { name: '3570' }).dblclick()
+  await expect(page.locator('.tiny-modal__body').filter({ hasText: '4' }).first()).toBeVisible()
 })

examples/sites/demos/pc/app/grid/event/click-event.vue

@@ -128,7 +128,7 @@ export default {
   methods: {
     headerCellClickEvent({ column }) {
       Modal.message({
-        message: `表头单元格点击${column.title}`,
+        message: `表头点击${column.title}`,
         status: 'info'
       })
     },
@@ -140,7 +140,7 @@ export default {
     },
     headerCellDBLClickEvent({ column }) {
       Modal.message({
-        message: `表头单元格双击${column.title}`,
+        message: `表头双击${column.title}`,
         status: 'info'
       })
     },

examples/sites/demos/pc/app/grid/event/context-menu-event.spec.js

@@ -1,15 +1,17 @@
 import { test, expect } from '@playwright/test'
 
-test('右键点击表尾单元格事件', async ({ page }) => {
+test('右键相关事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-event#event-footer-cell-context-menu-event')
-  await page.getByText('3570').click()
-  await expect(page.getByText('触发表尾左键点击事件')).toBeVisible()
-  await page.waitForTimeout(200)
+  await page.goto('grid-event#event-context-menu-event')
   await page.getByText('总计人数').click({
     button: 'right'
   })
-  await page.waitForTimeout(200)
 
   await expect(page.getByText('触发表尾右键点击事件').first()).toBeVisible()
+
+  await page.getByText('创建时间').click({
+    button: 'right'
+  })
+
+  await expect(page.getByText('触发表头右键点击事件').first()).toBeVisible()
 })

examples/sites/demos/pc/app/grid/event/edit-event.spec.js

@@ -2,8 +2,12 @@ import { test, expect } from '@playwright/test'
 
 test('单元格被激活编辑时会触发该事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-event#event-edit-actived-event')
+  await page.goto('grid-event#event-edit-event')
   await page.getByText('GFD科技YX公司').first().click()
+  await expect(page.getByText('激活editDisable事件')).toBeVisible()
 
+  await page.getByText('WWWW科技YX公司').click()
   await expect(page.getByText('激活编辑事件')).toBeVisible()
+  await page.getByText('激活编辑事件').click()
+  await expect(page.getByText('触发关闭编辑事件')).toBeVisible()
 })

examples/sites/demos/pc/app/grid/event/get-row-method.spec.js

@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
 
 test('获取表格行方法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-event#tiny-first-menu-get-row-method')
+  await page.goto('grid-event#event-get-row-method')
   await page
     .getByRole('row', {
       name: '1 GFD科技YX公司 华东区 福州 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'

examples/sites/demos/pc/app/grid/event/grid-events.spec.js

@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
 
 test('表格事件对象', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-event#event-cell-click-event')
+  await page.goto('grid-event#event-grid-events')
   await page.getByRole('cell', { name: 'GFD科技YX公司' }).click()
 
   await expect(page.getByText('单元格点击名称')).toBeVisible()

examples/sites/demos/pc/app/grid/event/select-event.spec.js

@@ -2,7 +2,15 @@ import { test, expect } from '@playwright/test'
 
 test('手动勾选全选时触发的事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-event#event-select-all-event')
+  await page.goto('grid-event#event-select-event')
+  await page
+    .getByRole('row', {
+      name: 'GFD科技YX公司 华东区 福州 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+    })
+    .locator('path')
+    .first()
+    .click()
+  await expect(page.getByText('选项改变了')).toBeVisible()
   await page.getByRole('row', { name: '名称 所属区域 地址 公司简介' }).locator('span').click()
 
   await expect(page.getByText('触发全选事件')).toBeVisible()

examples/sites/demos/pc/app/grid/event/table-data-association-composition-api.vue

@@ -1,169 +0,0 @@
-<template>
-  <div>
-    <tiny-grid
-      :data="tableData"
-      ref="grid1Ref"
-      @edit-closed="editClosed"
-      seq-serial
-      :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
-    >
-      <tiny-grid-column type="index" width="60"></tiny-grid-column>
-      <tiny-grid-column field="name" title="名称" :editor="{ component: 'input', autoselect: true }"></tiny-grid-column>
-      <tiny-grid-column field="area" title="区域" :editor="{ component: 'select', options }"></tiny-grid-column>
-      <tiny-grid-column
-        field="address"
-        title="地址"
-        :editor="{ component: 'input', autoselect: true }"
-      ></tiny-grid-column>
-      <tiny-grid-column
-        field="introduction"
-        title="公司简介"
-        :editor="{ component: 'input', autoselect: true }"
-        show-overflow="ellipsis"
-      ></tiny-grid-column>
-    </tiny-grid>
-    <tiny-grid
-      :data="tableData1"
-      ref="grid2Ref"
-      @edit-closed="editClosed1"
-      seq-serial
-      :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
-    >
-      <tiny-grid-column type="index" width="60"></tiny-grid-column>
-      <tiny-grid-column field="name" title="名称" :editor="{ component: 'input', autoselect: true }"></tiny-grid-column>
-      <tiny-grid-column field="area" title="区域" :editor="{ component: 'select', options }"></tiny-grid-column>
-      <tiny-grid-column
-        field="address"
-        title="地址"
-        :editor="{ component: 'input', autoselect: true }"
-      ></tiny-grid-column>
-      <tiny-grid-column
-        field="introduction"
-        title="公司简介"
-        :editor="{ component: 'input', autoselect: true }"
-        show-overflow="ellipsis"
-      ></tiny-grid-column>
-    </tiny-grid>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
-
-const options = ref([
-  { label: '华北区', value: '华北区' },
-  { label: '华东区', value: '华东区' },
-  { label: '华南区', value: '华南区' }
-])
-const tableData = ref([
-  {
-    id: '1',
-    name: 'GFD科技YX公司',
-    area: '华东区',
-    address: '福州',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-  },
-  {
-    id: '2',
-    name: 'WWWW科技YX公司',
-    area: '华南区',
-    address: '深圳福田区',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-  },
-  {
-    id: '3',
-    name: 'RFV有限责任公司',
-    area: '华南区',
-    address: '中山市',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-  },
-  {
-    id: '4',
-    name: 'TGBYX公司',
-    area: '华北区',
-    address: '梅州',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-  },
-  {
-    id: '5',
-    name: 'YHN科技YX公司',
-    area: '华南区',
-    address: '韶关',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-  },
-  {
-    id: '6',
-    name: '康康物业YX公司',
-    area: '华北区',
-    address: '广州天河区',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-  }
-])
-const tableData1 = ref([
-  {
-    id: '1',
-    name: 'GFD科技YX公司',
-    area: '华东区',
-    address: '福州',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-  },
-  {
-    id: '2',
-    name: 'WWWW科技YX公司',
-    area: '华南区',
-    address: '深圳福田区',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-  },
-  {
-    id: '3',
-    name: 'RFV有限责任公司',
-    area: '华南区',
-    address: '中山市',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-  },
-  {
-    id: '4',
-    name: 'TGBYX公司',
-    area: '华北区',
-    address: '梅州',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-  },
-  {
-    id: '5',
-    name: 'YHN科技YX公司',
-    area: '华南区',
-    address: '韶关',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-  },
-  {
-    id: '6',
-    name: '康康物业YX公司',
-    area: '华北区',
-    address: '广州天河区',
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-  }
-])
-const grid1Ref = ref()
-const grid2Ref = ref()
-
-function editClosed(pram1) {
-  let updateData = grid1Ref.value.getUpdateRecords()
-
-  updateData.forEach((item) => {
-    tableData1.value[pram1.$rowIndex] = item
-  })
-
-  grid2Ref.value.loadData(tableData1.value)
-}
-
-function editClosed1(pram1) {
-  let updateData = grid2Ref.value.getUpdateRecords()
-
-  updateData.forEach((item) => {
-    tableData.value[pram1.$rowIndex] = item
-  })
-
-  grid1Ref.value.loadData(tableData.value)
-}
-</script>

examples/sites/demos/pc/app/grid/event/table-data-association.spec.js

@@ -1,23 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('多个表格联动测试', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-event#event-table-data-association')
-  await page.getByText('GFD科技YX公司').first().click()
-  await page
-    .getByRole('row', {
-      name: '1 华东区 福州 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-    })
-    .getByRole('textbox')
-    .fill('ss')
-  await page
-    .locator('#preview div')
-    .filter({
-      hasText:
-        '名称区域地址公司简介1华东区福州公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。2WWWW科技YX公司华南区深圳福田区公司技术'
-    })
-    .first()
-    .click()
-
-  await expect(page.getByText('ss').first()).toBeVisible()
-})

examples/sites/demos/pc/app/grid/event/table-data-association.vue

@@ -1,176 +0,0 @@
-<template>
-  <div>
-    <tiny-grid
-      :data="tableData"
-      ref="grid1"
-      @edit-closed="editClosed"
-      seq-serial
-      :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
-    >
-      <tiny-grid-column type="index" width="60"></tiny-grid-column>
-      <tiny-grid-column field="name" title="名称" :editor="{ component: 'input', autoselect: true }"></tiny-grid-column>
-      <tiny-grid-column field="area" title="区域" :editor="{ component: 'select', options }"></tiny-grid-column>
-      <tiny-grid-column
-        field="address"
-        title="地址"
-        :editor="{ component: 'input', autoselect: true }"
-      ></tiny-grid-column>
-      <tiny-grid-column
-        field="introduction"
-        title="公司简介"
-        :editor="{ component: 'input', autoselect: true }"
-        show-overflow="ellipsis"
-      ></tiny-grid-column>
-    </tiny-grid>
-    <tiny-grid
-      :data="tableData1"
-      ref="grid2"
-      @edit-closed="editClosed1"
-      seq-serial
-      :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
-    >
-      <tiny-grid-column type="index" width="60"></tiny-grid-column>
-      <tiny-grid-column field="name" title="名称" :editor="{ component: 'input', autoselect: true }"></tiny-grid-column>
-      <tiny-grid-column field="area" title="区域" :editor="{ component: 'select', options }"></tiny-grid-column>
-      <tiny-grid-column
-        field="address"
-        title="地址"
-        :editor="{ component: 'input', autoselect: true }"
-      ></tiny-grid-column>
-      <tiny-grid-column
-        field="introduction"
-        title="公司简介"
-        :editor="{ component: 'input', autoselect: true }"
-        show-overflow="ellipsis"
-      ></tiny-grid-column>
-    </tiny-grid>
-  </div>
-</template>
-
-<script>
-import { Grid, GridColumn } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
-  },
-  data() {
-    return {
-      options: [
-        { label: '华北区', value: '华北区' },
-        { label: '华东区', value: '华东区' },
-        { label: '华南区', value: '华南区' }
-      ],
-      tableData: [
-        {
-          id: '1',
-          name: 'GFD科技YX公司',
-          area: '华东区',
-          address: '福州',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-        },
-        {
-          id: '2',
-          name: 'WWWW科技YX公司',
-          area: '华南区',
-          address: '深圳福田区',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-        },
-        {
-          id: '3',
-          name: 'RFV有限责任公司',
-          area: '华南区',
-          address: '中山市',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-        },
-        {
-          id: '4',
-          name: 'TGBYX公司',
-          area: '华北区',
-          address: '梅州',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-        },
-        {
-          id: '5',
-          name: 'YHN科技YX公司',
-          area: '华南区',
-          address: '韶关',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-        },
-        {
-          id: '6',
-          name: '康康物业YX公司',
-          area: '华北区',
-          address: '广州天河区',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-        }
-      ],
-      tableData1: [
-        {
-          id: '1',
-          name: 'GFD科技YX公司',
-          area: '华东区',
-          address: '福州',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-        },
-        {
-          id: '2',
-          name: 'WWWW科技YX公司',
-          area: '华南区',
-          address: '深圳福田区',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-        },
-        {
-          id: '3',
-          name: 'RFV有限责任公司',
-          area: '华南区',
-          address: '中山市',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-        },
-        {
-          id: '4',
-          name: 'TGBYX公司',
-          area: '华北区',
-          address: '梅州',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-        },
-        {
-          id: '5',
-          name: 'YHN科技YX公司',
-          area: '华南区',
-          address: '韶关',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-        },
-        {
-          id: '6',
-          name: '康康物业YX公司',
-          area: '华北区',
-          address: '广州天河区',
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
-        }
-      ]
-    }
-  },
-  methods: {
-    editClosed(pram1) {
-      let updateData = this.$refs.grid1.getUpdateRecords()
-
-      updateData.forEach((item) => {
-        this.tableData1[pram1.$rowIndex] = item
-      })
-
-      this.$refs.grid2.loadData(this.tableData1)
-    },
-    editClosed1(pram1) {
-      let updateData = this.$refs.grid2.getUpdateRecords()
-
-      updateData.forEach((item) => {
-        this.tableData[pram1.$rowIndex] = item
-      })
-
-      this.$refs.grid1.loadData(this.tableData)
-    }
-  }
-}
-</script>

examples/sites/demos/pc/app/grid/event/toolbar-button-click-event.spec.js

@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test'
+
+test('工具栏点击事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-event#event-toolbar-button-click-event')
+  await page.getByRole('button', { name: '新增' }).click()
+  await expect(page.locator('.tiny-grid-body__row')).toHaveCount(7)
+  await page
+    .getByRole('row', {
+      name: '2 GFD科技YX公司 华东区 福州 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+    })
+    .locator('path')
+    .first()
+    .click()
+
+  await page.getByRole('button', { name: '删除', exact: true }).click()
+
+  await expect(page.locator('.tiny-grid-body__row')).toHaveCount(6)
+})

examples/sites/demos/pc/app/grid/expand/expand-config.spec.js

@@ -2,7 +2,12 @@ import { test, expect } from '@playwright/test'
 
 test('基本用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-tree-grid#tree-table-tree-grid-expand-config')
+  await page.goto('grid-expand#expand-expand-config')
+
+  // 默认展开行
+  await expect(page.locator('#expand-expand-config tbody span').filter({ hasText: '800' })).toBeVisible()
+
+  // 点击展开
   await page
     .getByRole('row', {
       name: '公司名称：GFD科技YX公司 区域：华东区 员工数：800 公司简介：公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
@@ -14,4 +19,13 @@ test('基本用法', async ({ page }) => {
   await page.getByRole('row', { name: '2 WWWW科技YX公司 华南区 500' }).locator('i').click()
 
   await expect(page.getByText('员工数：500')).toBeVisible()
+
+  // 验证展开图标隐藏
+  const cell = page
+    .getByRole('row', { name: '4 康康物业YX公司 华南区 400' })
+    .getByRole('cell')
+    .nth(1)
+    .locator('.tiny-grid__expand-icon')
+
+  await expect(cell).toHaveCount(0)
 })

examples/sites/demos/pc/app/grid/expand/has-row-expand.spec.js

@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
 
 test('检查当前行是否展开', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-nested-grid#expand-hasRowExpand')
+  await page.goto('grid-expand#expand-has-row-expand')
   await page.getByRole('row', { name: '1 GFD科技YX公司 华东区 800' }).locator('i').click()
   await page.locator('div').filter({ hasText: '当前展开行：1' }).nth(1).click()
 

examples/sites/demos/pc/app/grid/expand/nested-grid.spec.js

@@ -2,10 +2,8 @@ import { test, expect } from '@playwright/test'
 
 test('嵌套表格场景测试', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-nested-grid#grid_Example-nestedGrid')
+  await page.goto('grid-expand#expand-nested-grid')
   await page.getByRole('row', { name: '1 800 2014-04-30 00:56:00 福州' }).locator('i').click()
 
-  await expect(
-    page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[2]/div[3]/table/tbody/tr[1]/td[3]/div/span')
-  ).toHaveClass(/expand__active/)
+  await expect(page.getByRole('cell', { name: 'GFD科技YX公司', exact: true })).toBeVisible()
 })

examples/sites/demos/pc/app/grid/expand/set-row-expansion.spec.js

@@ -2,10 +2,11 @@ import { test, expect } from '@playwright/test'
 
 test('设置指定展开行', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-nested-grid#methods-set-row-expansion')
-  await page.getByRole('button', { name: 'setRowExpansion' }).click()
-
-  await expect(
-    page.locator('//*[@id="preview"]/div[2]/div[2]/div/div/div/div[3]/table/tbody/tr[3]/td[3]/div/span')
-  ).toHaveClass(/expand__active/)
+  await page.goto('grid-expand#expand-set-row-expansion')
+  await page.getByRole('button', { name: '展开指定行' }).click()
+  await expect(page.getByText('GFD科技YX公司')).toHaveCount(3)
+  await page.getByRole('button', { name: '展开所有行' }).click()
+  await expect(page.getByText('GFD科技YX公司')).toHaveCount(6)
+  await page.getByRole('button', { name: '手动切换展开行' }).click()
+  await expect(page.getByText('GFD科技YX公司')).toHaveCount(5)
 })

examples/sites/demos/pc/app/grid/faq/grid-in-dialog-box.spec.js

@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
 
 test('弹窗框中表格编辑器失焦功能测试', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-faq#faq-gridInDialogBox')
+  await page.goto('grid-faq#faq-grid-in-dialog-box')
   await page.getByRole('button', { name: '弹出Dialogfalse' }).click()
   await page.getByText('GFD科技有限公司').first().click()
   await page

examples/sites/demos/pc/app/grid/faq/op-slot.spec.js

@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
 
 test('配置式表格使用插槽测试', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-faq#faq-opSlot')
+  await page.goto('grid-faq#faq-op-slot')
   await page.getByText('800').first().click()
   const span = page.getByText('800').first()
   const hasStyleAttr = await span.evaluate((span) => span.hasAttribute('style'))

examples/sites/demos/pc/app/grid/filter/advanced-filter.spec.js

@@ -0,0 +1,23 @@
+import { test, expect } from '@playwright/test'
+
+test('过滤高级设置', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-filter#filter-default-filter')
+  await page
+    .getByRole('cell', { name: '公司名称鼠标移入可以动态提示tooltip，公司名称鼠标移入可以动态提示tooltip' })
+    .getByRole('img')
+    .first()
+    .click()
+  await page.getByTitle('WWW科技YX公司').click()
+  await page
+    .locator('div')
+    .filter({ hasText: /^确定取消$/ })
+    .getByRole('button', { name: '确定' })
+    .click()
+  await expect(page.getByRole('cell', { name: 'RFV有限责任公司' })).toHaveCount(0)
+  await expect(page.getByRole('cell', { name: 'WWW科技YX公司' })).toHaveCount(1)
+
+  // 清楚筛选
+  await page.getByRole('button', { name: '清空表格name字段的过滤条件' }).click()
+  await expect(page.getByRole('cell', { name: 'RFV有限责任公司' })).toHaveCount(1)
+})

examples/sites/demos/pc/app/grid/filter/custom-filter.spec.js

@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test'
+
+test('设置列筛选规则', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-filter#filter-custom-filter')
+  await page.getByRole('cell', { name: '名称' }).getByRole('img').click()
+  await page.getByRole('textbox').nth(1).click()
+  await page.getByRole('textbox').nth(1).press('CapsLock')
+  await page.getByRole('textbox').nth(1).fill('WWW')
+  await page.getByRole('button', { name: 'confirm' }).click()
+  await expect(page.getByRole('cell', { name: 'WWW科技YX公司' })).toBeVisible()
+})

examples/sites/demos/pc/app/grid/filter/default-relation.spec.js

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('输入过滤的默认选项', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-filter#filter-default-relation')
+  await page.getByRole('cell', { name: '员工数' }).getByRole('img').click()
+  await page.getByRole('spinbutton').click()
+  await page.getByRole('spinbutton').fill('800')
+  await page.getByRole('button', { name: '确定' }).click()
+  await expect(page.locator('.tiny-grid-body__row')).toHaveCount(2)
+})

examples/sites/demos/pc/app/grid/filter/server-filter-composition-api.vue

@@ -113,7 +113,7 @@ function getData({ page, sort, data, filters }) {
       }
 
       resolve({ result: data.result, page: data.page })
-    }, 500)
+    }, 200)
   })
 }
 </script>

examples/sites/demos/pc/app/grid/filter/server-filter.spec.js

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('服务端过滤', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-filter#filter-server-filter')
+  await page.waitForTimeout(500)
+  await page.getByRole('cell', { name: '城市' }).getByRole('img').first().click()
+  await page.locator('li').filter({ hasText: '深圳' }).click()
+  await page.getByRole('button', { name: '确定' }).click()
+  await expect(page.locator('.tiny-grid-body__row')).toHaveCount(2)
+})

examples/sites/demos/pc/app/grid/filter/server-filter.vue

@@ -120,7 +120,7 @@ export default {
           }
 
           resolve({ result: data.result, page: data.page })
-        }, 500)
+        }, 200)
       })
     }
   }

examples/sites/demos/pc/app/grid/filter/simple-date-filter.spec.ts

@@ -5,27 +5,29 @@ test('简化版筛选面板-时间日期菜单', async ({ page }) => {
   await page.goto('grid-filter#filter-simple-date-filter')
   await page.getByRole('cell', { name: '开始时间' }).getByRole('img').click()
   await page
-    .getByRole('listitem')
+    .locator('li')
     .filter({
-      hasText: '开始日期2023 年7 月日一二三四五六252627282930123456789101112131415161718192021222324252627282'
+      hasText: '开始日期2023 年11 月日一二三四五六29303112345678910111213141516171819202122232425262728293012'
     })
     .getByRole('textbox')
     .click()
-  await page.getByRole('button', { name: '前一年' }).click()
-  await page.getByRole('button', { name: '前一年' }).click()
-  await page.getByRole('button', { name: '前一年' }).click()
-  await page.getByRole('button', { name: '前一年' }).click()
-  await page.getByRole('row', { name: '7 8 9 10 11 12 13' }).getByText('9').click()
+  await page.getByRole('textbox', { name: '选择日期' }).click()
+  await page.getByRole('textbox', { name: '选择日期' }).fill('2021-12-03')
+  await page.getByRole('textbox', { name: '选择时间' }).click()
+  await page.getByRole('button', { name: '确定' }).nth(1).click()
   await page.getByRole('button', { name: '确定' }).nth(1).click()
   await page
-    .getByRole('listitem')
+    .locator('li')
     .filter({
-      hasText: '结束日期2023 年7 月日一二三四五六252627282930123456789101112131415161718192021222324252627282'
+      hasText: '结束日期2023 年11 月日一二三四五六29303112345678910111213141516171819202122232425262728293012'
     })
     .getByRole('textbox')
     .click()
-  await page.getByRole('row', { name: '23 24 25 26 27 28 29' }).getByRole('cell', { name: '26' }).click()
+  await page.getByRole('textbox', { name: '选择日期' }).click()
+  await page.getByRole('textbox', { name: '选择日期' }).fill('2023-11-19')
+  await page.getByRole('textbox', { name: '选择时间' }).click()
   await page.getByRole('button', { name: '确定' }).nth(1).click()
-  await page.getByRole('button', { name: '确定' }).nth(0).click()
+  await page.getByRole('button', { name: '确定' }).nth(1).click()
+  await page.getByRole('button', { name: '确定' }).click()
   await expect(page.getByRole('cell', { name: 'Elisa Menez' }).getByText('Elisa Menez')).toBeVisible()
 })

examples/sites/demos/pc/app/grid/header/config-grid-header.spec.js

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test'
+
+test('配置式多级表头', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-header#header-config-grid-header')
+  await expect(page.getByText('前期系统反映，本期入金')).toBeVisible()
+  await expect(page.getByText('支付机构业务系统中未反映但备付金账户已收到款项')).toBeVisible()
+  await expect(page.getByText('业务系统中贷记客户账户金额').nth(2)).toBeVisible()
+})

examples/sites/demos/pc/app/grid/highlight/set-current-row.spec.js

@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
 
 test('设置指定行高亮', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-highlight#methods-set-current-row')
+  await page.goto('grid-highlight#highlight-set-current-row')
   await page.getByRole('button', { name: 'setCurrentRow' }).click()
   await expect(page.locator('.row__current')).toBeVisible()
 })

examples/sites/demos/pc/app/grid/large-data/full-data-loading-composition-api.vue

@@ -2,7 +2,6 @@
   <tiny-grid ref="tinyTableRef" height="300">
     <tiny-grid-column type="index" width="60"></tiny-grid-column>
     <tiny-grid-column field="name" title="名称"></tiny-grid-column>
-    <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
     <tiny-grid-column field="city" title="地址"></tiny-grid-column>
     <tiny-grid-column field="createdDate" title="创建日期" show-overflow></tiny-grid-column>
   </tiny-grid>
@@ -30,7 +29,6 @@ function mockData() {
         id: randomAlphabets() + i + 1,
         name: randomAlphabets() + '科技YX公司',
         city: ['福州', '深圳', '中山', '龙岩', '韶关', '黄冈', '赤壁', '厦门'][Math.floor(Math.random() * 8)],
-        employees: Math.ceil(Math.random() * 10000),
         createdDate: '2011-11-11 11:11:11'
       }
     })

examples/sites/demos/pc/app/grid/large-data/full-data-loading.vue

@@ -2,7 +2,6 @@
   <tiny-grid ref="tinyTable" height="300">
     <tiny-grid-column type="index" width="60"></tiny-grid-column>
     <tiny-grid-column field="name" title="名称"></tiny-grid-column>
-    <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
     <tiny-grid-column field="city" title="地址"></tiny-grid-column>
     <tiny-grid-column field="createdDate" title="创建日期" show-overflow></tiny-grid-column>
   </tiny-grid>
@@ -37,7 +36,6 @@ export default {
             id: randomAlphabets() + i + 1,
             name: randomAlphabets() + '科技YX公司',
             city: ['福州', '深圳', '中山', '龙岩', '韶关', '黄冈', '赤壁', '厦门'][Math.floor(Math.random() * 8)],
-            employees: Math.ceil(Math.random() * 10000),
             createdDate: '2011-11-11 11:11:11'
           }
         })

examples/sites/demos/pc/app/grid/large-data/scroll-paging-composition-api.vue

@@ -1,99 +0,0 @@
-<template>
-  <tiny-grid :fetch-data="{ api: getData }" :scroll-load="{ isInfinity: false, pageSize: 10 }">
-    <tiny-grid-column type="index" width="60"></tiny-grid-column>
-    <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
-    <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
-    <tiny-grid-column field="city" title="所属城市"></tiny-grid-column>
-    <tiny-grid-column field="manager" title="公司经理"></tiny-grid-column>
-    <tiny-grid-column field="telphone" title="联系手机"></tiny-grid-column>
-    <tiny-grid-column field="gender" title="性别"></tiny-grid-column>
-    <tiny-grid-column field="time" title="入职时间"></tiny-grid-column>
-  </tiny-grid>
-</template>
-
-<script setup lang="jsx">
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
-
-function getData({ page }) {
-  return new Promise((resolve) => {
-    getRandomGridData({ pageSize: page.pageSize }).then((data) => {
-      resolve({ result: data.result, page: { total: 100 } })
-    })
-  })
-}
-
-// 生成模拟数据
-function getRandomGridData({ pageSize, delay = 500 }) {
-  const citys = ['福州', '深圳', '中山', '龙岩', '韶关', '黄冈', '赤壁', '厦门', '广州', '长沙', '青岛', '杭州']
-  const fristName = ['王', '陈', '刘', '张', '吴', '唐', '李', '崔', '郭', '周', '林', '匡', '何', '黄']
-  const names = [
-    '智',
-    '璐',
-    '项',
-    '华',
-    '兰',
-    '富',
-    '凯',
-    '幂',
-    '桑',
-    '航',
-    '明',
-    '坤',
-    '平',
-    '秀',
-    '思',
-    '鹏',
-    '会',
-    '之',
-    '瑞',
-    '伟',
-    '彤',
-    '秀',
-    '欣',
-    '董'
-  ]
-  const randomChar = Array.from({ length: 26 }).map((item, index) => String.fromCharCode(65 + index))
-  const tels = ['131', '151', '150', '132', '169', '159', '191', '172', '185', '181', '134']
-  const nums = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
-  const now = new Date()
-
-  const randomArrayToString = (arr, len, isRundomLen) => {
-    const name = []
-    const ranLen = (isRundomLen === false ? len : Math.floor(Math.random() * len)) || 1
-
-    for (let i = 0; i < ranLen; i++) {
-      name.push(arr[Math.floor(Math.random() * arr.length)])
-    }
-
-    return name.join('')
-  }
-
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      const result = []
-
-      for (let i = 0; i < pageSize; i++) {
-        result.push({
-          id: Math.ceil(Math.random() * 100000),
-          name: randomArrayToString(randomChar, 5) + '科技公司',
-          employees: Math.floor(Math.random() * 10000),
-          city: randomArrayToString(citys, 1),
-          manager: randomArrayToString(fristName, 1) + randomArrayToString(names, 3),
-          telphone: randomArrayToString(tels, 1) + ('' + Math.floor(Math.random() * 1000000000)).substring(0, 8),
-          gender: randomArrayToString(['男', '女'], 1),
-          char: randomArrayToString(randomChar, 5),
-          char1: randomArrayToString(randomChar, 4),
-          char2: randomArrayToString(randomChar, 7),
-          char3: randomArrayToString(randomChar, 12),
-          num: randomArrayToString(nums, 8),
-          num1: randomArrayToString(nums, 6),
-          num2: randomArrayToString(nums, 12),
-          time: now.getFullYear() + '-' + Math.ceil(11 * Math.random()) + '-' + Math.ceil(27 * Math.random())
-        })
-      }
-
-      resolve({ result })
-    }, Math.ceil(Math.random() * delay))
-  })
-}
-</script>

examples/sites/demos/pc/app/grid/large-data/scroll-paging.spec.js

@@ -1,10 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('滚动分页', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('grid-large-data#large-data-scroll-paging')
-  const scrollContainer = page.locator('.tiny-grid-body__y-space.visual')
-  const scrollBar = page.locator('.tiny-grid-body__y-scrollbar')
-  await expect(scrollContainer).toHaveCSS('height', '420px')
-  await expect(scrollBar).toHaveCSS('height', '4200px')
-})

examples/sites/demos/pc/app/grid/large-data/scroll-paging.vue

@@ -1,109 +0,0 @@
-<template>
-  <tiny-grid :fetch-data="{ api: getData }" :scroll-load="{ isInfinity: false, pageSize: 10 }">
-    <tiny-grid-column type="index" width="60"></tiny-grid-column>
-    <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
-    <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
-    <tiny-grid-column field="city" title="所属城市"></tiny-grid-column>
-    <tiny-grid-column field="manager" title="公司经理"></tiny-grid-column>
-    <tiny-grid-column field="telphone" title="联系手机"></tiny-grid-column>
-    <tiny-grid-column field="gender" title="性别"></tiny-grid-column>
-    <tiny-grid-column field="time" title="入职时间"></tiny-grid-column>
-  </tiny-grid>
-</template>
-
-<script lang="jsx">
-import { Grid, GridColumn } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn
-  },
-  data() {
-    return {}
-  },
-  methods: {
-    getData({ page }) {
-      return new Promise((resolve) => {
-        this.getRandomGridData({ pageSize: page.pageSize }).then((data) => {
-          resolve({ result: data.result, page: { total: 100 } })
-        })
-      })
-    },
-    // 生成模拟数据
-    getRandomGridData({ pageSize, delay = 500 }) {
-      const citys = ['福州', '深圳', '中山', '龙岩', '韶关', '黄冈', '赤壁', '厦门', '广州', '长沙', '青岛', '杭州']
-      const fristName = ['王', '陈', '刘', '张', '吴', '唐', '李', '崔', '郭', '周', '林', '匡', '何', '黄']
-      const names = [
-        '智',
-        '璐',
-        '项',
-        '华',
-        '兰',
-        '富',
-        '凯',
-        '幂',
-        '桑',
-        '航',
-        '明',
-        '坤',
-        '平',
-        '秀',
-        '思',
-        '鹏',
-        '会',
-        '之',
-        '瑞',
-        '伟',
-        '彤',
-        '秀',
-        '欣',
-        '董'
-      ]
-      const randomChar = Array.from({ length: 26 }).map((item, index) => String.fromCharCode(65 + index))
-      const tels = ['131', '151', '150', '132', '169', '159', '191', '172', '185', '181', '134']
-      const nums = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
-      const now = new Date()
-
-      const randomArrayToString = (arr, len, isRundomLen) => {
-        const name = []
-        const ranLen = (isRundomLen === false ? len : Math.floor(Math.random() * len)) || 1
-
-        for (let i = 0; i < ranLen; i++) {
-          name.push(arr[Math.floor(Math.random() * arr.length)])
-        }
-
-        return name.join('')
-      }
-
-      return new Promise((resolve) => {
-        setTimeout(() => {
-          const result = []
-
-          for (let i = 0; i < pageSize; i++) {
-            result.push({
-              id: Math.ceil(Math.random() * 100000),
-              name: randomArrayToString(randomChar, 5) + '科技公司',
-              employees: Math.floor(Math.random() * 10000),
-              city: randomArrayToString(citys, 1),
-              manager: randomArrayToString(fristName, 1) + randomArrayToString(names, 3),
-              telphone: randomArrayToString(tels, 1) + ('' + Math.floor(Math.random() * 1000000000)).substring(0, 8),
-              gender: randomArrayToString(['男', '女'], 1),
-              char: randomArrayToString(randomChar, 5),
-              char1: randomArrayToString(randomChar, 4),
-              char2: randomArrayToString(randomChar, 7),
-              char3: randomArrayToString(randomChar, 12),
-              num: randomArrayToString(nums, 8),
-              num1: randomArrayToString(nums, 6),
-              num2: randomArrayToString(nums, 12),
-              time: now.getFullYear() + '-' + Math.ceil(11 * Math.random()) + '-' + Math.ceil(27 * Math.random())
-            })
-          }
-
-          resolve({ result })
-        }, Math.ceil(Math.random() * delay))
-      })
-    }
-  }
-}
-</script>