@opentiny/vue-docs 2.1.10 → 2.2.0

package/demos/pc/app/grid/webdoc/grid.js

@@ -1879,8 +1879,12 @@ export default {
           },
           'demoId': 'grid-toolbar#toolbar-grid-full-screen'
         }
-      ],
-      'column-props': [
+      ]
+    },
+    {
+      'name': 'grid-column',
+      'type': 'component',
+      'props': [
         {
           'name': 'align',
           'type': `'left' | 'center' | 'right'`,
@@ -2234,7 +2238,7 @@ export default {
           'demoId': 'grid-tip#tip-column-header-tip'
         }
       ],
-      'column-slots': [
+      'slots': [
         {
           'name': 'default',
           'type': '',
@@ -2279,8 +2283,12 @@ export default {
           },
           'demoId': 'grid-slot#slot-header-slot'
         }
-      ],
-      'toolbar-props': [
+      ]
+    },
+    {
+      'name': 'grid-toolbar',
+      'type': 'component',
+      'props': [
         {
           'name': 'buttons',
           'type': `{
@@ -2374,7 +2382,7 @@ export default {
           'demoId': 'grid-toolbar#toolbar-grid-full-screen'
         }
       ],
-      'toolbar-slots': [
+      'slots': [
         {
           'name': 'toolbar',
           'type': '',
@@ -2390,7 +2398,7 @@ export default {
           'demoId': 'grid-toolbar#toolbar-custom-toolbar'
         }
       ],
-      'toolbar-events': [
+      'events': [
         {
           'name': 'button-click',
           'type': '(args: IButtonClick, event: Event)=> void',
@@ -2786,6 +2794,8 @@ interface IDropConfig {
   column: boolean
   // 拖拽前函数，返回 false 取消拖动
   onBeforeMove?: ()=> boolean
+  // 拖拽触发源选择器一般是class类名
+  trigger?: string
   // 根据行的类名来控制是否可以拖动
   filter?: string
   // 如果变动了树层级，可以指定是否需要刷新数据
@@ -3353,13 +3363,13 @@ interface IFilterConfig {
   defaultFilter: boolean
   // 设置在过滤面板中显示输入筛选的项
   inputFilter: boolean
-  // 设置在显示枚举选项功能(enumable)下制定静态数据源
+  // 设置在显示枚举选项功能(enumable)下制定静态数据源，也可以是函数返回一个Promise对象
   values: {
     // 设置枚举数据的显示值属性字段， 默认'label'
     label: string
     // 设置枚举数据的实际值属性字段， 默认'value'
     value: string 
-  }[]
+  }[] | ()=> Promise
 }
       `
     },

package/demos/pc/app/guide/basic-usage.spec.ts

@@ -4,29 +4,31 @@ test('基础用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('guide#basic-usage')
 
-  const activeDom = await page.getByRole('button', { name: '基础新手引导开始' })
+  const activeDom = page.getByRole('button', { name: '基础新手引导' })
+  const startGuide = page.getByRole('button', { name: '开始引导' })
   const step1 = page.getByRole('heading', { name: '新手引导标题1' })
   const step2 = page.getByRole('heading', { name: '新手引导标题2' })
   const step3 = page.getByRole('dialog').locator('div').nth(2)
   const next = page.getByRole('button', { name: '下一步' })
-  const complate = page.getByRole('button', { name: '完成' })
-  const showBtn = page.getByRole('button', { name: '基础新手引导开始' })
+  const showBtn = page.getByRole('button', { name: '带滚动条新手引导' })
   const closeBtn = page.getByRole('button', { name: 'Close Tour' })
 
   // 打开页面即显示guide
+  await expect(activeDom).toBeVisible()
+  await startGuide.click()
+
   await expect(step1).toBeVisible()
 
   // 点击下一步，引导
   await next.click()
   await expect(step2).toBeVisible()
   await next.click()
-  await expect(step3).toBeVisible()
-  await complate.click()
+  await expect(next).toBeHidden()
   await expect(step3).toBeHidden()
 
   // 引导显示后，点击关闭按钮可关闭
-  await showBtn.click()
-  await expect(step1).toBeVisible()
+  await startGuide.click()
   await closeBtn.click()
   await expect(step3).toBeHidden()
+  await expect(showBtn).toBeVisible()
 })

package/demos/pc/app/guide/callback.spec.ts

@@ -4,42 +4,41 @@ test('窗口的事件回调', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('guide#callback')
 
-  const start = page.getByRole('button', { name: '展示之前回调' })
+  const start = page.getByRole('button', { name: '展示前的回调' })
   const showBtn = page.getByRole('button', { name: '展示之前', exact: true })
   const nextBtn = page.getByRole('button', { name: '下一步' })
   const cancelBtn = page.getByRole('button', { name: 'Close Tour' })
   const completeBtn = page.getByRole('button', { name: '完成', exact: true })
   const guide = page.getByRole('dialog')
-  const text = page.locator('.callback-content')
+  const text = page.locator('.shepherd-button')
 
   await start.click()
   await expect(guide).toBeVisible()
   await expect(guide).toHaveText(/新手引导标题1/)
-  await expect(text).toHaveText(/beforeShow/)
+  await expect(text).toHaveText(/展示之前/)
 
   await showBtn.click()
   await expect(guide).toBeVisible()
   await expect(guide).toHaveText(/新手引导标题2/)
-  await expect(text).toHaveText(/show/)
+  await expect(text.nth(2)).toHaveText(/下一步/)
 
   await nextBtn.click()
   await expect(guide).toBeVisible()
   await expect(guide).toHaveText(/新手引导标题3/)
-  await expect(text).toHaveText(/show/)
+  await expect(text.nth(4)).toHaveText(/下一步/)
 
   await nextBtn.click()
   await expect(guide).toBeVisible()
   await expect(guide).toHaveText(/新手引导标题4/)
-  await expect(text).toHaveText(/beforeHide/)
+  await expect(text.nth(6)).toHaveText(/隐藏/)
 
   await nextBtn.click()
   await expect(guide).toBeVisible()
   await expect(guide).toHaveText(/新手引导标题5/)
-  await expect(text).toHaveText(/hide/)
+  await expect(text.nth(9)).toHaveText(/下一步/)
 
   await cancelBtn.click()
   await expect(guide).toBeHidden()
-  await expect(text).toHaveText(/cancel/)
 
   await start.click()
   await showBtn.click()
@@ -49,8 +48,7 @@ test('窗口的事件回调', async ({ page }) => {
   await nextBtn.click()
   await expect(guide).toBeVisible()
   await expect(guide).toHaveText(/新手引导标题6/)
-  await expect(text).toHaveText(/hide/)
+  await expect(text.nth(11)).toHaveText(/完成/)
   await completeBtn.click()
   await expect(guide).toBeHidden()
-  await expect(text).toHaveText(/destroy/)
 })

package/demos/pc/app/guide/highlight-box.spec.ts

@@ -4,12 +4,12 @@ test('高亮多处', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('guide#highlight-box')
 
-  const showBtn = page.getByRole('button', { name: '引导', exact: true })
+  const showBtn = page.getByRole('button', { name: '开始引导', exact: true })
   const step1 = page.getByRole('button', { name: '新手引导1' })
   const step2 = page.getByRole('button', { name: '新手引导2' })
   const step3 = page.getByRole('button', { name: '新手引导3' })
   const hightAlert1 = page.locator('.tiny-alert').nth(0)
-  const hightAlert2 = page.locator('.hight11')
+  const hightAlert2 = page.locator('.hight5')
   const guide = page.getByRole('dialog')
 
   await showBtn.click()

package/demos/pc/app/guide/offset.spec.ts

@@ -4,8 +4,8 @@ test('引导框偏移量', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('guide#offset')
 
-  const guideBtn1 = page.getByRole('button', { name: '新手引导1' })
-  const guideBtn2 = page.getByRole('button', { name: '新手引导2' })
+  const guideBtn1 = page.getByRole('button', { name: '默认' })
+  const guideBtn2 = page.getByRole('button', { name: '纵轴偏移 50px' })
   const guide = page.getByRole('dialog')
 
   // 引导1 没有设置

package/demos/pc/app/guide/only-content.spec.ts

@@ -4,7 +4,7 @@ test('纯段落用户引导', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('guide#only-content')
 
-  const showBtn = page.getByRole('button', { name: '新手引导开始' })
+  const showBtn = page.getByRole('button', { name: '开始引导' })
   const nextBtn = page.getByRole('button', { name: '下一步' })
   const guideEle1 = page.getByRole('button', { name: '新手引导1' })
   const guideEle2 = page.getByRole('button', { name: '新手引导2' })

package/demos/pc/app/icon/list-composition-api.vue

@@ -28,7 +28,7 @@
 import { ref } from 'vue'
 import Svgs from '@opentiny/vue-icon'
 import { Modal, Input as TinyInput } from '@opentiny/vue'
-import { iconGroups } from './iconGroups'
+import { iconGroups } from './iconGroups.js'
 
 const all = Object.values(iconGroups).flat()
 iconGroups.Others = Object.keys(Svgs).filter((name) => !all.includes(name) && name[0] === 'I')

package/demos/pc/app/icon/list.vue

@@ -27,7 +27,7 @@
 <script>
 import Svgs from '@opentiny/vue-icon'
 import { Modal, Input } from '@opentiny/vue'
-import { iconGroups } from './iconGroups'
+import { iconGroups } from './iconGroups.js'
 
 export default {
   components: {

package/demos/pc/app/icon/webdoc/icon.js

@@ -6,7 +6,7 @@ export default {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
       'desc': {
-        'zh-CN': '从 <code>@opentiny/vue-icon</code> 图标库种引入图标函数，并执行，生成相应的图标。',
+        'zh-CN': '从 <code>@opentiny/vue-icon</code> 图标库中引入图标函数，并执行，生成相应的图标。',
         'en-US':
           'Introduce icon functions from the <code>@opentiny/vue-icon</code> icon library, execute them, and generate corresponding icons.'
       },

package/demos/pc/app/image/basic-usage.spec.ts

@@ -2,11 +2,8 @@ import { test, expect } from '@playwright/test'
 
 test('基础用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  const requestPromise = page.waitForRequest('	http://localhost:7130/static/images/mountain.png')
   await page.goto('image#basic-usage')
-  const request = await requestPromise
-  await expect(request.url()).toEqual('http://localhost:7130/static/images/mountain.png')
+
   const img = page.locator('.tiny-image > .tiny-image__inner')
-  await page.waitForTimeout(500)
-  await expect(img).toHaveAttribute('style', 'width: 100px; height: 100px;')
+  await expect(img).toHaveCount(5)
 })

package/demos/pc/app/image/events.spec.ts

@@ -1,8 +1,9 @@
 import { test, expect } from '@playwright/test'
 
-test('加载失败事件', async ({ page }) => {
+test('事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('image#load-error')
-  const errorDiv = page.locator('div').filter({ hasText: '加载失败触发事件' }).nth(1)
-  await expect(errorDiv).toBeVisible()
+  await page.goto('image#events')
+  const errorSlot = page.locator('.tiny-image__error')
+  await page.waitForTimeout(300)
+  await expect(errorSlot).toHaveCount(1)
 })

package/demos/pc/app/image/lazy.spec.ts

@@ -2,12 +2,15 @@ import { test, expect } from '@playwright/test'
 
 test('懒加载', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('image#lazy-load')
-  await expect(page.locator('.demo-image__lazy div').locator('img')).toHaveCount(2)
-  const imageBox = page.locator('.demo-image__lazy')
+  await page.goto('image#lazy')
+
+  const preview = page.locator('.pc-demo-container')
+  await expect(preview.locator('.demo-image__lazy div').locator('img')).toHaveCount(2)
+
+  const imageBox = preview.locator('.demo-image__lazy')
   await imageBox.hover()
   await page.mouse.wheel(0, 2000)
   await page.waitForTimeout(300)
   await page.mouse.wheel(0, 1000)
-  await expect(page.locator('.demo-image__lazy').locator('img')).toHaveCount(3)
+  await expect(preview.locator('.demo-image__lazy').locator('img')).toHaveCount(3)
 })

package/demos/pc/app/image/preview-in-dialog.spec.ts

@@ -4,6 +4,6 @@ test('对话框中预览图片', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('image#preview-in-dialog')
   await page.getByRole('button', { name: '弹出Dialog' }).click()
-  const dialog = page.getByText('消息加载失败 确 定')
+  const dialog = page.locator('.pc-demo-container .tiny-dialog-box__title')
   await expect(dialog).toBeVisible()
 })

package/demos/pc/app/image/preview.spec.ts

@@ -2,36 +2,40 @@ import { test, expect } from '@playwright/test'
 
 test('图片大图', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('image#preview-src-list')
-  await page.locator('.tiny-image__inner').click()
-  const Image = page.locator('.tiny-image-viewer__img')
 
+  await page.goto('image#preview')
+  const preview = page.locator('.pc-demo-container')
+
+  await preview.locator('.tiny-image__inner').click()
+  const viewerImage = page.locator('.tiny-image-viewer')
+  await expect(viewerImage).toHaveCount(1)
+
+  const toolbar = viewerImage.locator('.tiny-image-viewer__actions-inner')
+  const canvas = viewerImage.locator('.tiny-image-viewer__img')
   // 点击缩小
-  await page.locator('.icon').first().click()
-  await expect(Image).toHaveCSS('transform', 'matrix(0.8, 0, 0, 0.8, 0, 0)')
+  await toolbar.locator('svg').first().click()
+  await expect(canvas).toHaveCSS('transform', 'matrix(0.8, 0, 0, 0.8, 0, 0)')
 
   //   点击放大
-  await page.locator('svg:nth-child(2)').first().click()
-  await expect(Image).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
-
-  // 点击放大图标
-  await page.locator('svg:nth-child(4)').click()
+  await toolbar.locator('svg').nth(1).click()
+  await expect(canvas).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
 
   // 点击向左旋转
-  await page.locator('svg:nth-child(6)').click()
-  await expect(Image).toHaveCSS('transform', 'matrix(0, -1, 1, 0, 0, 0)')
-  // 点击向右旋转
-  await page.locator('svg:nth-child(7)').click()
-  await expect(Image).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
-
-  // 点击切换上一张图片
-  let preImageSrc = await page.locator('.tiny-image-viewer__img').getAttribute('src')
-  await page.locator('span:nth-child(3) > .tiny-svg').click()
-  let currentImageSrc = await page.locator('.tiny-image-viewer__img').getAttribute('src')
-  await expect(preImageSrc).not.toEqual(currentImageSrc)
-  // 点击切换下一张图片
-  preImageSrc = await page.locator('.tiny-image-viewer__img').getAttribute('src')
-  await page.locator('span:nth-child(4) > .tiny-svg').click()
-  currentImageSrc = await page.locator('.tiny-image-viewer__img').getAttribute('src')
-  await expect(preImageSrc).not.toEqual(currentImageSrc)
+  await toolbar.locator('svg').nth(3).click()
+  await expect(canvas).toHaveCSS('transform', 'matrix(0, -1, 1, 0, 0, 0)')
+
+  // // 点击切换上一张图片
+  // let preImageSrc = await page.locator('.tiny-image-viewer__img').getAttribute('src')
+  // await page.locator('span:nth-child(3) > .tiny-svg').click()
+  // let currentImageSrc = await page.locator('.tiny-image-viewer__img').getAttribute('src')
+  // await expect(preImageSrc).not.toEqual(currentImageSrc)
+  // // 点击切换下一张图片
+  // preImageSrc = await page.locator('.tiny-image-viewer__img').getAttribute('src')
+  // await page.locator('span:nth-child(4) > .tiny-svg').click()
+  // currentImageSrc = await page.locator('.tiny-image-viewer__img').getAttribute('src')
+  // await expect(preImageSrc).not.toEqual(currentImageSrc)
+
+  // 点击关闭
+  await viewerImage.locator('.tiny-image-viewer__close').click()
+  await expect(viewerImage).toHaveCount(0)
 })

package/demos/pc/app/image/slot.spec.ts

@@ -1,11 +1,9 @@
 import { test, expect } from '@playwright/test'
 
-test('占位内容', async ({ page }) => {
+test('插槽', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.route(/jpg$/, async (route) => {
-    await page.waitForTimeout(300)
-  })
-  await page.goto('image#custom-placeholder')
-  const wait = page.locator('.image-slot')
-  await expect(wait).toHaveText('加载中...')
+
+  await page.goto('image#slot')
+  const errorSlot = page.locator('.tiny-image__error')
+  await expect(errorSlot).toBeVisible()
 })

package/demos/pc/app/image/webdoc/image.js

@@ -116,7 +116,7 @@ export default {
     {
       'name': 'image',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'src',
           'type': 'string',

package/demos/pc/app/input/event.spec.ts

@@ -8,8 +8,8 @@ test('[Input]event: input, change', async ({ page }) => {
 
   // input event
   await input.fill('2')
-  const dialogModelInputEvent = await page.locator('.tiny-modal')
-  await expect(dialogModelInputEvent).toContainText('input')
+  const dialogModelInputEvent = await page.locator('.tiny-modal',  { hasText: 'input' })
+  await expect(dialogModelInputEvent).toBeVisible()
 
   // change event
   await input.blur()

package/demos/pc/app/input/webdoc/input.js

@@ -189,7 +189,7 @@ export default {
     {
       'name': 'input',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'autocomplete',
           'type': 'string',

package/demos/pc/app/ip-address/basic-usage.spec.ts

@@ -4,10 +4,15 @@ test('ipAddress 类型', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('ip-address#basic-usage')
 
-  const preview = page.locator('#preview')
-  const ipv4 = preview.locator('.tiny-ip-address').nth(0)
-  const ipv6 = preview.locator('.tiny-ip-address').nth(1)
+  const demo = page.locator('#basic-usage')
+  const ipv4 = demo.locator('.tiny-ip-address').nth(0)
+  const ipv6 = demo.locator('.tiny-ip-address').nth(1)
 
   await expect(ipv4.getByRole('textbox')).toHaveCount(4)
   await expect(ipv6.getByRole('textbox')).toHaveCount(8)
+  await ipv4.locator('input').first().fill('111')
+  await expect(ipv4.locator('input').first()).toHaveValue('111')
+  await expect(ipv4.locator('input').nth(1)).toHaveValue('168')
+  await expect(ipv4.locator('input').nth(2)).toHaveValue('0')
+  await expect(ipv4.locator('input').nth(3)).toHaveValue('1')
 })

package/demos/pc/app/ip-address/delimiter.spec.ts

@@ -4,13 +4,13 @@ test('ipAddress 属性设置分隔符', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('ip-address#delimiter')
 
-  const preview = page.locator('#preview')
-  const defaultDilimiter = preview.locator('svg circle')
-  const customDilimiter = preview.locator('svg > .st0')
-  const slotDilimiter = preview.locator('li > i')
+  const demo = page.locator('#delimiter')
+  const defaultDelimiter = demo.locator('svg circle')
+  const customDelimiter = demo.locator('svg > .st0')
+  const slotDelimiter = demo.locator('li > i').getByText('-')
 
   // 设置分隔符取代默认分隔符
-  await expect(defaultDilimiter).toHaveCount(0)
-  await expect(customDilimiter).not.toHaveCount(0)
-  await expect(slotDilimiter).not.toHaveCount(0)
+  await expect(defaultDelimiter).toHaveCount(0)
+  await expect(customDelimiter).toHaveCount(3)
+  await expect(slotDelimiter).toHaveCount(3)
 })

package/demos/pc/app/ip-address/disabled.spec.ts

@@ -4,13 +4,16 @@ test('ipAddress 禁用', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('ip-address#disabled')
 
-  const preview = page.locator('#preview')
-  const ipAddress = preview.locator('.tiny-ip-address__input')
-  const input = preview.getByRole('textbox')
+  const demo = page.locator('#disabled')
+  const ipAddress = demo.locator('.tiny-ip-address__input')
+  const input = demo.getByRole('textbox')
 
   await expect(ipAddress).toHaveClass(/disabled/)
   await expect(input.nth(0)).toBeDisabled()
   await expect(input.nth(1)).toBeDisabled()
   await expect(input.nth(2)).toBeDisabled()
   await expect(input.nth(3)).toBeDisabled()
+  await expect(ipAddress).toHaveCSS('background-color', 'rgb(245, 245, 246)')
+  await expect(ipAddress).toHaveCSS('border-bottom-color', 'rgb(223, 225, 230)')
+  await expect(ipAddress).toHaveCSS('color', 'rgb(173, 176, 184)')
 })

package/demos/pc/app/ip-address/event.spec.ts

@@ -2,26 +2,46 @@ import { test, expect } from '@playwright/test'
 
 test('ipAddress change事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('ip-address#change')
+  await page.goto('ip-address#event')
 
-  const preview = page.locator('#preview')
-  const input = preview.getByRole('textbox')
-  const modal = page.locator('.tiny-modal').filter({ hasText: 'IpAddress IPv4 change事件' })
+  const demo = page.locator('#event')
+  const getIPAddressFirstInput = (index: number) =>
+    demo.locator('.tiny-ip-address__input').nth(index).locator('input').first()
+  const modal = page.locator('.tiny-modal.active')
 
-  // 每个输入框入内容改变并失焦时触发事件
-  await input.nth(0).fill('111')
-  await input.nth(0).blur()
-  await expect(modal).toHaveCount(1)
+  // 聚焦、失焦事件
+  await getIPAddressFirstInput(0).click()
+  await expect(modal.filter({ hasText: 'focus 事件触发了' })).toBeVisible()
+  await getIPAddressFirstInput(0).blur()
+  await expect(modal.filter({ hasText: 'blur 事件触发了' })).toBeVisible()
+  await page.waitForTimeout(500)
 
-  await input.nth(1).fill('222')
-  await input.nth(1).blur()
-  await expect(modal).toHaveCount(2)
+  // 内容改变事件
+  await getIPAddressFirstInput(1).fill('111')
+  await getIPAddressFirstInput(1).blur()
+  await expect(modal.filter({ hasText: 'change 事件触发了' })).toBeVisible()
+  await page.waitForTimeout(500)
 
-  await input.nth(2).fill('33')
-  await input.nth(2).blur()
-  await expect(modal).toHaveCount(3)
+  // 输入事件事件
+  await getIPAddressFirstInput(2).fill('111')
+  await expect(modal.filter({ hasText: 'input 事件触发了' })).toBeVisible()
+})
+
+test('select事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('ip-address#event')
+
+  const demo = page.locator('#event')
+  const getIPAddressFirstInput = (index: number) =>
+    demo.locator('.tiny-ip-address__input').nth(index).locator('input').first()
+  const modal = page.locator('.tiny-modal.active')
 
-  await input.nth(3).fill('33')
-  await input.nth(3).blur()
-  await expect(modal).toHaveCount(4)
+  // 选中事件
+  await page.setViewportSize({
+    width: 1500,
+    height: 1000
+  })
+  await page.waitForTimeout(2000)
+  await getIPAddressFirstInput(3).dblclick()
+  await expect(modal.filter({ hasText: 'select 事件触发了' })).toBeVisible()
 })

package/demos/pc/app/ip-address/readonly.spec.ts

@@ -4,11 +4,11 @@ test('ipAddress 文本只读', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('ip-address#readonly')
 
-  const preview = await page.locator('#preview')
-  const input1 = preview.getByRole('textbox').nth(0)
-  const input2 = preview.getByRole('textbox').nth(1)
-  const input3 = preview.getByRole('textbox').nth(2)
-  const input4 = preview.getByRole('textbox').nth(3)
+  const demo = await page.locator('#readonly')
+  const input1 = demo.getByRole('textbox').nth(0)
+  const input2 = demo.getByRole('textbox').nth(1)
+  const input3 = demo.getByRole('textbox').nth(2)
+  const input4 = demo.getByRole('textbox').nth(3)
 
   expect(await input1.evaluate((input1) => input1.hasAttribute('readonly'))).toBe(true)
   await expect(input1).toBeEnabled()

package/demos/pc/app/ip-address/size.spec.ts

@@ -4,9 +4,11 @@ test('ipAddress 输入框大小', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('ip-address#size')
 
-  const preview = page.locator('#preview')
-  const ipAddress = preview.locator('.tiny-ip-address__input')
+  const demo = page.locator('#size')
+  const ipAddress = demo.locator('.tiny-ip-address__input')
 
-  await expect(ipAddress).not.toHaveCSS('height', '28px')
-  await expect(ipAddress).toHaveCSS('height', '42px')
+  await expect(ipAddress.first()).toHaveCSS('height', '42px')
+  await expect(ipAddress.nth(1)).toHaveCSS('height', '36px')
+  await expect(ipAddress.nth(2)).toHaveCSS('height', '28px')
+  await expect(ipAddress.nth(3)).toHaveCSS('height', '24px')
 })

package/demos/pc/app/layout/alignment.spec.ts

@@ -2,9 +2,10 @@ import { test, expect } from '@playwright/test'
 
 test('layout对齐方式', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
+
   await page.goto('layout#alignment')
-  const preview = page.locator('#preview')
-  const layoutDiv = preview.locator('.tiny-layout > div')
+
+  const layoutDiv = page.locator('.pc-demo-container .tiny-layout > div')
   await expect(layoutDiv.first()).toHaveClass(/row-justify-start/)
   await expect(layoutDiv.nth(1)).toHaveClass(/row-justify-center/)
   await expect(layoutDiv.nth(2)).toHaveClass(/row-justify-end/)