@opentiny/vue-docs 1.0.2 → 1.0.4

package/resources/pc/demo/fullscreen/example-component.spec.ts

@@ -0,0 +1,62 @@
+import { test, expect } from '@playwright/test'
+
+test('组件式使用', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/fullscreen/example-component')
+
+  const pageOnly = page.getByLabel('pageOnly')
+  const teleport = page.getByLabel('teleport')
+  const fullBtn = page.getByRole('button', { name: 'Request Fullscreen' })
+  const exitFullBtn = page.getByRole('button', { name: 'Exit Fullscreen' })
+  const smallImg = page.locator('img').first()
+  const bigImg = page.locator('img').last()
+
+  // 初始化完成，默认非全屏模式
+  await expect(fullBtn).toBeVisible()
+  await expect(exitFullBtn).toHaveCount(0)
+  await expect(smallImg).not.toHaveCSS('display', 'none')
+  await expect(bigImg).toHaveCSS('display', 'none')
+  expect(await page.evaluate('document.fullscreenElement')).toBe(null)
+
+  // 点击Request Fullscreen按钮，图片全屏展示
+  await fullBtn.click()
+  await expect(smallImg).toHaveCSS('display', 'none')
+  await expect(bigImg).not.toHaveCSS('display', 'none')
+  expect(await page.evaluate('document.fullscreenElement')).toBe('ref: <Node>')
+
+  // 点击Exit Fullscreen按钮，退出全屏展示
+  await exitFullBtn.click()
+  await expect(smallImg).not.toHaveCSS('display', 'none')
+  await expect(bigImg).toHaveCSS('display', 'none')
+  expect(await page.evaluate('document.fullscreenElement')).toBe(null)
+
+  // 全屏时，按Esc键退出全屏
+  await fullBtn.click()
+  await expect(smallImg).toHaveCSS('display', 'none')
+  await expect(bigImg).not.toHaveCSS('display', 'none')
+  expect(await page.evaluate('document.fullscreenElement')).toBe('ref: <Node>')
+  await exitFullBtn.press('Escape')
+  await expect(smallImg).not.toHaveCSS('display', 'none')
+  await expect(bigImg).toHaveCSS('display', 'none')
+  expect(await page.evaluate('document.fullscreenElement')).toBe(null)
+
+  // pageOnly为true时，为网页全屏
+  await pageOnly.check()
+  await fullBtn.click()
+  await expect(smallImg).toHaveCSS('display', 'none')
+  await expect(bigImg).not.toHaveCSS('display', 'none')
+  expect(await page.evaluate('document.fullscreenElement')).toBe(null)
+
+  // pageOnly为false时，为浏览器全屏
+  await exitFullBtn.click()
+  await pageOnly.uncheck()
+  await fullBtn.click()
+  expect(await page.evaluate('document.fullscreenElement')).toBe('ref: <Node>')
+
+  // teleport默认true，目标元素移到body下，反之false时不移动目标元素
+  expect(await page.evaluate('document.fullscreenElement?.nodeName')).toBe('BODY') // 默认true时
+  await exitFullBtn.click()
+  await teleport.uncheck()
+  await fullBtn.click()
+  expect(await page.evaluate('document.fullscreenElement?.nodeName')).toBe('DIV')
+})

package/resources/pc/demo/fullscreen/example-component.vue

@@ -1,19 +1,11 @@
 <template>
   <div class="tiny-fullscreen-demo">
     <label class="checkbox">
-      <input
-        v-model="pageOnly"
-        type="checkbox"
-        name="button"
-      />
+      <input v-model="pageOnly" type="checkbox" name="button" />
       pageOnly
     </label>
     <label class="checkbox">
-      <input
-        v-model="teleport"
-        type="checkbox"
-        name="button"
-      />
+      <input v-model="teleport" type="checkbox" name="button" />
       teleport
     </label>
     <tiny-fullscreen
@@ -36,20 +28,10 @@
         "
       >
         <button type="button" @click="toggle">
-          {{
-            fullscreen
-              ? 'Exit Fullscreen'
-              : 'Request Fullscreen'
-          }}
+          {{ fullscreen ? 'Exit Fullscreen' : 'Request Fullscreen' }}
         </button>
-        <img
-          v-show="!fullscreen"
-          src="static/images/book-small.jpg"
-        />
-        <img
-          v-show="fullscreen"
-          src="static/images/book-big.jpg"
-        />
+        <img v-show="!fullscreen" src="/static/images/book-small.jpg" />
+        <img v-show="fullscreen" src="/static/images/book-big.jpg" />
       </div>
     </tiny-fullscreen>
   </div>

package/resources/pc/demo/grid/align/column-align.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('http://localhost:7130/pc/grid-align/align-column-align')
+  await expect(page.getByRole('cell', { name: '创建日期(右对齐)' })).toHaveCSS('text-align', 'right')
+  await expect(page.getByRole('cell', { name: '2014-04-30 00:56:00' })).toHaveCSS('text-align', 'right')
+  await expect(page.getByRole('cell', { name: '福州' })).toHaveCSS('text-align', 'center')
+  await expect(page.getByRole('cell', { name: '城市(居中对齐)' })).toHaveCSS('text-align', 'center')
+})

package/resources/pc/demo/grid/align/footer-align/center-footer-align.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('http://localhost:7130/pc/grid-align/align-footer-align-center-footer-align')
+  await expect(page.getByRole('cell', { name: '平均' })).toHaveCSS('text-align', 'center')
+})

package/resources/pc/demo/grid/align/footer-align/left-footer-align.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('http://localhost:7130/pc/grid-align/align-footer-align-left-footer-align')
+  await expect(page.getByRole('cell', { name: '平均' })).toHaveCSS('text-align', 'left')
+})

package/resources/pc/demo/grid/align/footer-align/right-footer-align.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('http://localhost:7130/pc/grid-align/align-footer-align-right-footer-align')
+  await expect(page.getByRole('cell', { name: '平均' })).toHaveCSS('text-align', 'right')
+})

package/resources/pc/demo/grid/align/grid-align/center-grid-align.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('http://localhost:7130/pc/grid-align/align-grid-align-center-grid-align')
+  await expect(page.getByRole('cell', { name: 'GFD科技YX公司' })).toHaveCSS('text-align', 'center')
+})

package/resources/pc/demo/grid/align/grid-align/left-grid-align.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('http://localhost:7130/pc/grid-align/align-grid-align-left-grid-align')
+  await expect(page.getByRole('cell', { name: 'GFD科技YX公司' })).toHaveCSS('text-align', 'left')
+})

package/resources/pc/demo/grid/align/grid-align/right-grid-align.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('http://localhost:7130/pc/grid-align/align-grid-align-right-grid-align')
+  await expect(page.getByRole('cell', { name: 'GFD科技YX公司' })).toHaveCSS('text-align', 'right')
+})

package/resources/pc/demo/grid/align/grid-align/right-grid-align.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-grid :data="tableData" align="“right”">
+  <tiny-grid :data="tableData" align="right">
     <tiny-grid-column type="index" width="60"></tiny-grid-column>
     <tiny-grid-column type="selection" width="60"></tiny-grid-column>
     <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>

package/resources/pc/demo/grid/align/header-align/center-header-align.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('http://localhost:7130/pc/grid-align/align-header-align-center-header-align')
+  await expect(page.getByRole('cell', { name: '员工数' })).toHaveCSS('text-align', 'center')
+})

package/resources/pc/demo/grid/align/header-align/left-header-align.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('http://localhost:7130/pc/grid-align/align-header-align-left-header-align')
+  await expect(page.getByRole('cell', { name: '公司名称' })).toHaveCSS('text-align', 'left')
+})

package/resources/pc/demo/grid/align/header-align/right-header-align.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('http://localhost:7130/pc/grid-align/align-header-align-right-header-align')
+  await expect(page.getByRole('cell', { name: '员工数' })).toHaveCSS('text-align', 'right')
+})

package/resources/pc/demo/grid/basicUsage-conf.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('http://localhost:7130/pc/grid/basicUsage-conf')
+  await expect(page.getByRole('row', { name: '3 1300 2014-02-14 14:14:14 中山' })).toBeVisible()
+})

package/resources/pc/demo/grid/basicUsage.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('http://localhost:7130/pc/grid/basicUsage')
+
+  await expect(page.getByRole('row', { name: '1 800 2014-04-30 00:56:00 福州' })).toBeVisible()
+})

package/resources/pc/demo/grid/column/class-name.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('http://localhost:7130/pc/grid-custom-style/column-class-name')
+  await expect(page.locator('.gridClassName')).toHaveCount(8)
+})

package/resources/pc/demo/grid/column/columns-dynamic.vue

@@ -0,0 +1,53 @@
+<template>
+  <tiny-grid :fetch-data="fetchData">
+    <tiny-grid-column
+      v-for="(item, index) in tableColumnList"
+      :key="index"
+      :field="item.field"
+      :title="item.field"
+    ></tiny-grid-column>
+  </tiny-grid>
+</template>
+
+<script>
+import { Grid, GridColumn } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyGrid: Grid,
+    TinyGridColumn: GridColumn
+  },
+  data() {
+    return {
+      fetchData: { api: this.getData },
+      tableColumnList: []
+    }
+  },
+  mounted() {
+    this.getColumns()
+  },
+  methods: {
+    getData() {
+      const tableData = [
+        {
+          id: '1',
+          name: 'GFD科技有限公司',
+          city: '福州',
+          employees: 800,
+          created_date: '2014-04-30 00:56:00',
+          boole: false
+        }
+      ]
+
+      return new Promise((resolve) => {
+        setTimeout(() => resolve(tableData))
+      })
+    },
+    getColumns() {
+      setTimeout(() => {
+        this.tableColumnList = [{ field: 'employees' }, { field: 'created_date' }, { field: 'name' }, { field: 'city' }]
+      }, 300)
+    }
+  }
+}
+</script>

package/resources/pc/demo/grid/custom/column-sort.spec.js

@@ -9,5 +9,5 @@ test('个性化排序测试', async ({ page }) => {
   await page.waitForTimeout(200)
   const sortBtn = await page.getByRole('cell', { name: '员工数' }).getByRole('img')
 
-  await expect(sortBtn).toHaveClass(/tiny-grid-sort__asc-btn/)
+  await expect(sortBtn).toHaveClass(/tiny-grid-sort__btn/)
 })

package/resources/pc/demo/grid/custom/column-width.spec.js

@@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
 test('个性化列拖拽测试', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('http://localhost:7130/pc/grid-customized/custom-column-simple')
-  const draggerDom = page.getByRole('cell', { name: '名称' }).locator('div').nth(1)
+  const draggerDom = page.getByRole('cell', { name: '名称' }).locator('.tiny-grid-resizable')
   const thDom = page.getByRole('cell', { name: '名称' })
   // 获取初始列宽
   const { width: thWidth } = await thDom.boundingBox()

package/resources/pc/demo/grid/custom/reset-method.vue

@@ -0,0 +1,114 @@
+<template>
+  <div>
+    <tiny-grid :fetch-data="fetchData" :pager="pager">
+      <template #toolbar>
+        <tiny-grid-toolbar
+          id="custom-sorttype-2"
+          :setting="{ storage: 'local', sortable: Sortable }"
+          :reset-method="resetMethod"
+        ></tiny-grid-toolbar>
+      </template>
+      <tiny-grid-column type="index" width="60"></tiny-grid-column>
+      <tiny-grid-column field="name" title="名称" sortable></tiny-grid-column>
+      <tiny-grid-column field="area" title="所属区域" sortable></tiny-grid-column>
+      <tiny-grid-column field="address" title="地址"></tiny-grid-column>
+      <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
+    </tiny-grid>
+  </div>
+</template>
+
+<script>
+import { Grid, GridColumn, Pager, GridToolbar } from '@opentiny/vue'
+import Sortable from 'sortablejs'
+
+export default {
+  components: {
+    TinyGrid: Grid,
+    TinyGridColumn: GridColumn,
+    TinyGridToolbar: GridToolbar
+  },
+  methods: {
+    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: 'introduction', visible: true, sortable: true, order: '', fixed: '' },
+            { property: 'address', visible: true, sortable: true, order: '', fixed: '' }
+          ]
+        }
+
+        resolve(customs)
+      })
+    },
+    getData({ page }) {
+      let curPage = page.currentPage
+      let pageSize = page.pageSize
+      let offset = (curPage - 1) * pageSize
+
+      return new Promise((resolve) => {
+        resolve({
+          result: this.tableData.slice(offset, offset + pageSize),
+          page: { total: this.tableData.length }
+        })
+      })
+    }
+  },
+  data() {
+    return {
+      Sortable,
+      pager: {
+        component: Pager,
+        attrs: {
+          currentPage: 1,
+          pageSize: 10,
+          total: 0,
+          pageSizes: [3, 5, 10, 20],
+          layout: 'total, prev, pager, next, jumper, sizes'
+        }
+      },
+      fetchData: {
+        api: this.getData
+      },
+      tableData: [
+        {
+          id: '1',
+          name: 'GFD科技有限公司',
+          area: '华东区',
+          address: '福州',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '2',
+          name: 'WWWW科技有限公司',
+          area: '华南区',
+          address: '深圳福田区',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '3',
+          name: 'RFV有限责任公司',
+          area: '华南区',
+          address: '中山市',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '4',
+          name: 'TGB有限公司',
+          area: '华北区',
+          address: '梅州',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '5',
+          name: 'YHN科技有限公司',
+          area: '华南区',
+          address: '韶关',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        }
+      ]
+    }
+  }
+}
+</script>

package/resources/pc/demo/grid/custom/resetResizable.spec.js

@@ -4,7 +4,7 @@ test.describe('手动重置列操作', () => {
   test('重置列宽', async ({ page }) => {
     page.on('pageerror', (exception) => expect(exception).toBeNull())
     await page.goto('http://localhost:7130/pc/grid-customized/custom-resetResizable')
-    const draggerDom = page.getByRole('cell', { name: '名称' }).locator('div').nth(1)
+    const draggerDom = page.getByRole('cell', { name: '名称' }).locator('.tiny-grid-resizable')
     const thDom = page.getByRole('cell', { name: '名称' })
     // 获取初始列宽
     const { width: thWidth } = await thDom.boundingBox()

package/resources/pc/demo/grid/custom/resetResizable.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <tiny-button @click="resetResizable">重置列宽拖动操作</tiny-button>
-    <tiny-button @click="resetCustoms">重置列的隐藏操作</tiny-button>
-    <tiny-button @click="resetAll" style="margin-bottom: 20px">重置列的所有操作</tiny-button>
+    <tiny-button @click="resetResizable"> 重置列宽拖动操作 </tiny-button>
+    <tiny-button @click="resetCustoms"> 重置列的隐藏操作 </tiny-button>
+    <tiny-button @click="resetAll"> 重置列的所有操作 </tiny-button>
     <tiny-grid ref="resizeGrid" :data="tableData" :resizable="true">
       <template #toolbar>
         <tiny-grid-toolbar id="custom-width" :resizable="{ storage: true }" setting></tiny-grid-toolbar>

package/resources/pc/demo/grid/custom-style/cell-style.spec.js

@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test'
+
+test('单元格样式', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/grid-custom-style/custom-style-cell-style')
+  await expect(page.getByRole('cell', { name: '2016-07-08 12:36:22' })).toHaveCSS(
+    'background-color',
+    'rgb(255, 102, 0)'
+  )
+  await expect(page.getByRole('cell', { name: 'TGB科技YX公司' })).toHaveCSS('background-color', 'rgb(255, 102, 0)')
+  await expect(page.getByRole('cell', { name: '深圳市福德宝网络技术YX公司' })).toHaveCSS(
+    'background-color',
+    'rgb(255, 102, 0)'
+  )
+})

package/resources/pc/demo/grid/custom-style/cell-style.vue

@@ -93,7 +93,5 @@ export default {
 .grid-cell-style .tiny-grid-body__column.col-orange {
   background-color: #f60;
   color: #fff;
-  border-radius: 8px;
-  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.5);
 }
 </style>

package/resources/pc/demo/grid/custom-style/footer-style/footer-cell-style.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('http://localhost:7130/pc/grid-custom-style/custom-style-footer-style-footer-cell-style')
+  await expect(page.locator('.footer__cell--blue')).toHaveCount(6)
+})

package/resources/pc/demo/grid/custom-style/footer-style/footer-row-style.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('http://localhost:7130/pc/grid-custom-style/custom-style-footer-style-footer-row-style')
+  await expect(page.locator('.footer__row--red')).toBeVisible()
+  await expect(page.locator('.footer__row--green')).toBeVisible()
+})

package/resources/pc/demo/grid/custom-style/header-style/header-cell-style.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('http://localhost:7130/pc/grid-custom-style/custom-style-header-style-header-cell-style')
+  await expect(page.getByRole('cell', { name: '公司名称' })).toHaveCSS('background-color', 'rgb(45, 183, 245)')
+})

package/resources/pc/demo/grid/custom-style/header-style/header-row-style.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('http://localhost:7130/pc/grid-custom-style/custom-style-header-style-header-row-style')
+  await expect(page.locator('.header__row--red')).toBeVisible()
+})

package/resources/pc/demo/grid/custom-style/row-style.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('http://localhost:7130/pc/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)')
+})

package/resources/pc/demo/grid/disable-radio.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('http://localhost:7130/pc/grid-operation-column/disable-radio')
+  await expect(page.locator('tr:nth-child(2) > td:nth-child(2) input')).toBeDisabled()
+  await expect(page.locator('tr:nth-child(4) > td:nth-child(2) input')).toBeDisabled()
+  await expect(page.locator('tr:nth-child(6) > td:nth-child(2) input')).toBeDisabled()
+})

package/resources/pc/demo/grid/disable-selection.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('http://localhost:7130/pc/grid-operation-column/disable-selection')
+  await expect(page.locator('tr:nth-child(2) > td:nth-child(2) input')).toBeDisabled()
+  await expect(page.locator('tr:nth-child(4) > td:nth-child(2) input')).toBeDisabled()
+  await expect(page.locator('tr:nth-child(6) > td:nth-child(2) input')).toBeDisabled()
+})

package/resources/pc/demo/grid/drag/column-drag.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('http://localhost:7130/pc/grid-drag/drag-column-drag')
+  const draggerDom = page.getByRole('cell', { name: '公司名称' })
+  const { x, y } = await draggerDom.boundingBox()
+  // 开始拖拽
+  await page.mouse.move(x + 2, y + 3)
+  await page.waitForTimeout(200)
+  await page.mouse.down()
+  await page.waitForTimeout(200)
+  await page.mouse.move(x + 260, y)
+  await page.waitForTimeout(200)
+  await page.mouse.up()
+  await page.waitForTimeout(200)
+
+  await expect(page.locator('.tiny-grid-header__column').nth(1)).toContainText('员工数')
+})

package/resources/pc/demo/grid/drag/row-drag-ctrl.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('http://localhost:7130/pc/grid-drag/drag-row-drag-ctrl')
+  const draggerDom = page.getByRole('cell', { name: 'RFV有限责任公司' })
+  // 获取拖拽元素位置
+  const { x, y } = await draggerDom.boundingBox()
+  // 验证不可拖拽
+  await page.mouse.move(x + 2, y + 3)
+  await page.waitForTimeout(200)
+  await page.mouse.down()
+  await page.waitForTimeout(200)
+  await page.mouse.move(x, y + 160)
+  await page.waitForTimeout(200)
+  await page.mouse.up()
+  await page.waitForTimeout(200)
+  await expect(page.locator('.tiny-grid-body__row').nth(5)).not.toContainText('RFV有限责任公司')
+})

package/resources/pc/demo/grid/drag/row-drag.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('http://localhost:7130/pc/grid-drag/drag-row-drag')
+  const draggerDom = page.getByRole('cell', { name: 'RFV有限责任公司' })
+  // 获取拖拽元素位置
+  const { x, y } = await draggerDom.boundingBox()
+  // 开始拖拽
+  await page.mouse.move(x + 2, y + 3)
+  await page.waitForTimeout(200)
+  await page.mouse.down()
+  await page.waitForTimeout(200)
+  await page.mouse.move(x, y + 160)
+  await page.waitForTimeout(200)
+  await page.mouse.up()
+  await page.waitForTimeout(200)
+  await expect(page.locator('.tiny-grid-body__row').nth(5)).toContainText('RFV有限责任公司')
+})

package/resources/pc/demo/grid/edit/hasRowChange.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('http://localhost:7130/pc/grid-edit/edit-hasRowChange')
+  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()
+  await expect(page.getByText('保存成功！')).toBeVisible()
+  await page.getByRole('button', { name: '确认' }).click()
+  await page
+    .getByRole('row', {
+      name: '2 WWWW科技YX公司 华南区 深圳福田区 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。 保存'
+    })
+    .getByRole('button', { name: '保存' })
+    .click()
+  await expect(page.getByText('当前数据未改变！')).toBeVisible()
+  await page.getByRole('button', { name: '确认' }).click()
+})