@opentiny/vue-docs 2.2.5 → 2.2.7

package/demos/pc/app/time-picker/popper-class.spec.ts

@@ -4,11 +4,11 @@ test('下拉框的类名', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('time-picker#popper-class')
 
-  const preview = page.locator('#preview')
-  const timePicker = preview.locator('.tiny-date-editor > input')
-  const timeSelect = preview.locator('.tiny-time-panel')
+  const timePicker = page.getByRole('textbox', { name: '18:40:00' })
+  const timeSelect = page.locator('.tiny-date-container > div:nth-child(2)')
 
+  // TINY-TODO: 时间选择下拉框位置出现偏移
   await timePicker.click()
   await expect(timeSelect).toBeVisible()
-  await expect(timeSelect).toHaveClass(/pickerClass/)
+  await expect(timeSelect).toHaveClass(/picker-class/)
 })

package/demos/pc/app/time-picker/size.spec.ts

@@ -4,7 +4,26 @@ test('尺寸', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('time-picker#size')
 
-  const preview = page.locator('#preview')
-  const timePicker = preview.locator('.tiny-date-editor')
-  await expect(timePicker).toHaveCSS('height', '36px')
+  // 默认尺寸
+  const timePicker = page.getByRole('textbox', { name: '18:40:00' })
+  const timePickerRange = page.locator('div:nth-child(2) > .tiny-date-editor')
+  await expect(timePicker).toHaveCSS('height', '28px')
+  await expect(timePickerRange).toHaveCSS('height', '28px')
+
+  // medium
+  page.getByRole('radio', { name: 'medium' }).filter({ hasText: 'medium' }).click()
+  // TINY-TODO: 日期和日期范围的输入框高度不一致
+  await expect(page.locator('.tiny-input-medium .tiny-input__inner')).toHaveCSS('height', '40px')
+  await expect(page.locator('.tiny-range-editor--medium.tiny-input__inner')).toHaveCSS('height', '42px')
+
+  // small
+  page.getByRole('radio', { name: 'small' }).filter({ hasText: 'small' }).click()
+  // TINY-TODO: 日期和日期范围的输入框高度不一致
+  await expect(timePicker).toHaveCSS('height', '32px')
+  await expect(timePickerRange).toHaveCSS('height', '36px')
+
+  // mini
+  page.getByRole('radio', { name: 'mini' }).filter({ hasText: 'mini' }).click()
+  await expect(timePicker).toHaveCSS('height', '24px')
+  await expect(timePickerRange).toHaveCSS('height', '24px')
 })

package/demos/pc/app/time-picker/step.spec.ts

@@ -3,4 +3,9 @@ import { test, expect } from '@playwright/test'
 test('步长', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('time-picker#step')
+
+  await page.getByRole('textbox', { name: '18:40:00' }).click()
+  await page.locator('div:nth-child(9) > .tiny-time-panel__content > .tiny-time-spinner > div > .tiny-scrollbar__wrap > .tiny-scrollbar__view > li:nth-child(11) > span').first().click()
+  await page.getByRole('button', { name: '确定' }).click()
+  await expect(page.getByRole('textbox', { name: '20:40:00' })).toBeVisible()
 })

package/demos/pc/app/time-picker/suffix-icon.spec.ts

@@ -4,12 +4,6 @@ test('自定义后置图标', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('time-picker#suffix-icon')
 
-  const preview = page.locator('#preview')
-  const timePicker = preview.locator('.tiny-date-editor')
-  const customIcon = timePicker.locator('svg')
-  await expect(customIcon).toBeVisible()
-  await expect(customIcon.locator('path')).toHaveAttribute(
-    'd',
-    'M19.1 13H4.9c-.5 0-.9-.4-.9-1s.4-1 .9-1h14.2c.5 0 .9.4.9 1s-.4 1-.9 1z'
-  )
+  const customIcon = page.locator('#suffix-icon svg path')
+  await expect(customIcon).toHaveAttribute('d', 'M19.1 13H4.9c-.5 0-.9-.4-.9-1s.4-1 .9-1h14.2c.5 0 .9.4.9 1s-.4 1-.9 1z')
 })

package/demos/pc/app/time-picker/webdoc/time-picker.js

@@ -7,7 +7,8 @@ export default {
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
       'desc': {
         'zh-CN': '<p>默认是通过滚动的方式选择时间，<code>arrow-control</code> 属性可以设置通过箭头的方式选择时间。</p>',
-        'en-US': 'The default is to select the time by scrolling, and the <code> arrow-control </code> property can be set to select the time by the arrow.'
+        'en-US':
+          'The default is to select the time by scrolling, and the <code> arrow-control </code> property can be set to select the time by the arrow.'
       },
       'codeFiles': ['basic-usage.vue']
     },
@@ -15,8 +16,10 @@ export default {
       'demoId': 'is-range',
       'name': { 'zh-CN': '范围选择', 'en-US': 'Select time range' },
       'desc': {
-        'zh-CN': '<p><code>is-range</code> 设置是否为范围选择，默认为 false，<code>range-separator</code>，设置范围选择分隔符（为可选值）默认为 \'-\'。</p>',
-        'en-US': '<p><code> is-range </code> whether the setting is range selection. Default is false, <code> range-separator </code>, and the range selection delimiter (optional) defaults to\'-\'.</p>'
+        'zh-CN':
+          "<p><code>is-range</code> 设置是否为范围选择，默认为 false，<code>range-separator</code>，设置范围选择分隔符（为可选值）默认为 '-'。</p>",
+        'en-US':
+          "<p><code> is-range </code> whether the setting is range selection. Default is false, <code> range-separator </code>, and the range selection delimiter (optional) defaults to'-'.</p>"
       },
       'codeFiles': ['is-range.vue']
     },
@@ -24,17 +27,21 @@ export default {
       'demoId': 'disabled',
       'name': { 'zh-CN': '禁用状态', 'en-US': 'Disabled status' },
       'desc': {
-        'zh-CN': '<p>通过设置 <code>disabled</code> 为 true 后，禁用时间输入框。</p><p>通过设置 <code>picker-options</code> 的 <code>selectableRange</code> 属性，可以实现部分禁用，此时只能选择一部分时间。</p>',
-        'en-US': '<p>Disable the time input box by setting <code> disabled </code> to true.</p><p>Partial disable can be achieved by setting the <code>selectableRange<code> property of <code>picker-options<code>, and only a part of time can be selected at this time.</p>'
+        'zh-CN':
+          '<p>通过设置 <code>disabled</code> 为 true 后，禁用时间输入框。</p><p>通过设置 <code>picker-options</code> 的 <code>selectableRange</code> 属性，可以实现部分禁用，此时只能选择一部分时间。</p>',
+        'en-US':
+          '<p>Disable the time input box by setting <code> disabled </code> to true.</p><p>Partial disable can be achieved by setting the <code>selectableRange<code> property of <code>picker-options<code>, and only a part of time can be selected at this time.</p>'
       },
       'codeFiles': ['disabled.vue']
     },
     {
       'demoId': 'placeholder',
-      'name': {'zh-CN': '占位符', 'en-US': 'Placeholder' },
+      'name': { 'zh-CN': '占位符', 'en-US': 'Placeholder' },
       'desc': {
-        'zh-CN': '<p>通过 <code> placeholder </code> 属性设置时间输入框的占位符，通过 <code> start-placeholder </code> / <code> end-placeholder </code> 设置时间范围输入框的开始和结束时间的占位符。</p>',
-        'en-US': '<p>Set the placeholder for the time input box through the <code> placeholder </code> property, and set the placeholder for the start and end time of the time range input box through <code> start-placeholder </code> / <code> end-placeholder </code>.</p>'
+        'zh-CN':
+          '<p>通过 <code> placeholder </code> 属性设置时间输入框的占位符，通过 <code> start-placeholder </code> / <code> end-placeholder </code> 设置时间范围输入框的开始和结束时间的占位符。</p>',
+        'en-US':
+          '<p>Set the placeholder for the time input box through the <code> placeholder </code> property, and set the placeholder for the start and end time of the time range input box through <code> start-placeholder </code> / <code> end-placeholder </code>.</p>'
       },
       'codeFiles': ['placeholder.vue']
     },
@@ -51,8 +58,10 @@ export default {
       'demoId': 'step',
       'name': { 'zh-CN': '步长', 'en-US': 'Step' },
       'desc': {
-        'zh-CN': '<p>通过 <code>step</code> 设置步长，默认值为 <code>{ hour: 1, minute: 1, second: 1 }</code>，其中 <code>hour</code> 的设置范围是 <code>0-23</code>，<code>minute</code>、<code>second</code> 的设置范围是 <code>0-60</code>。可单独设置其中的一项或多项值，未设置的默认值为 <code>1</code>。</p>',
-        'en-US': '<p>Set the step size through <code> step </code>. The default value is <code> {hour: 1, minute: 1, second: 1} </code>, where the setting range of <code> hour </code> is <code> 0-23 </code>, <code> minute </code>, <code> second </code> is <code> 0-60 </code>. One or more of these values can be set separately, and the unset default value is <code> 1 </code>.</p>'
+        'zh-CN':
+          '<p>通过 <code>step</code> 设置步长，默认值为 <code>{ hour: 1, minute: 1, second: 1 }</code>，其中 <code>hour</code> 的设置范围是 <code>0-23</code>，<code>minute</code>、<code>second</code> 的设置范围是 <code>0-60</code>。可单独设置其中的一项或多项值，未设置的默认值为 <code>1</code>。</p>',
+        'en-US':
+          '<p>Set the step size through <code> step </code>. The default value is <code> {hour: 1, minute: 1, second: 1} </code>, where the setting range of <code> hour </code> is <code> 0-23 </code>, <code> minute </code>, <code> second </code> is <code> 0-60 </code>. One or more of these values can be set separately, and the unset default value is <code> 1 </code>.</p>'
       },
       'codeFiles': ['step.vue']
     },
@@ -60,8 +69,10 @@ export default {
       'demoId': 'clearable',
       'name': { 'zh-CN': '清除按钮', 'en-US': 'Customized clear icon' },
       'desc': {
-        'zh-CN': '<p>通过 <code>clearable</code> 属性设置是否显示清除按钮，默认值为 true。通过 <code>clear-icon</code> 属性可以自定义清除按钮的图标。</p>',
-        'en-US': '<p>Set whether the clear button is displayed through the <code> clearable </code> property, which defaults to true. You can customize the icon of the clear button through the <code> clear-icon </code> property.</p>'
+        'zh-CN':
+          '<p>通过 <code>clearable</code> 属性设置是否显示清除按钮，默认值为 true。通过 <code>clear-icon</code> 属性可以自定义清除按钮的图标。</p>',
+        'en-US':
+          '<p>Set whether the clear button is displayed through the <code> clearable </code> property, which defaults to true. You can customize the icon of the clear button through the <code> clear-icon </code> property.</p>'
       },
       'codeFiles': ['clearable.vue']
     },
@@ -73,7 +84,8 @@ export default {
           <p><code>format</code> 时间格式化显示\n<code>timestamp</code> JS 时间戳，仅 value-format 可用；组件绑定值为 number 类型。</p>
           <p>通过 <code>hh</code> 属性可设置 12 小时制。 <code>HH</code> 属性为 24 小时制，须和 A 或 a 使用。 <code>h</code> 与 <code>H</code> 属性设置不补 0。\n通过 <code>mm</code> 属性可设置分钟显示格式，例如 01。 <code>m</code> 属性设置不补 0。\n通过 <code>ss</code> 属性可设置秒的显示格式，例如 01。 <code>s</code> 属性设置不补 0。\n通过 <code>a</code> 属性可设置显示时间为 am/pm <code>A</code>属性设置显示时间为 AM/PM。</p>
         `,
-        'en-US': '<p>You can set the 12-hour format through the <code>hh</code> attribute. The <code>HH</code> attribute is in the 24-hour format and must be used with A or a. The <code>h</code> and <code>H</code> attributes are not set to 0. \nYou can use the <code>mm</code> attribute to set the minute display format, for example, 01. The <code>m</code> attribute is not set to 0. \nYou can use the <code>ss</code> attribute to set the display format of seconds, for example, 01. The <code>s</code> attribute is not set to 0. \nThe <code>a</code> property can be used to set the display time to am/pm <code>A</code> property can be used to set the display time to AM/PM. </p>'
+        'en-US':
+          '<p>You can set the 12-hour format through the <code>hh</code> attribute. The <code>HH</code> attribute is in the 24-hour format and must be used with A or a. The <code>h</code> and <code>H</code> attributes are not set to 0. \nYou can use the <code>mm</code> attribute to set the minute display format, for example, 01. The <code>m</code> attribute is not set to 0. \nYou can use the <code>ss</code> attribute to set the display format of seconds, for example, 01. The <code>s</code> attribute is not set to 0. \nThe <code>a</code> property can be used to set the display time to am/pm <code>A</code> property can be used to set the display time to AM/PM. </p>'
       },
       'codeFiles': ['format.vue']
     },
@@ -99,8 +111,10 @@ export default {
       'demoId': 'suffix-icon',
       'name': { 'zh-CN': '自定义后置图标', 'en-US': 'Customize suffix icon' },
       'desc': {
-        'zh-CN': '<p>通过 <code>suffix-icon</code> 属性设置日期输入框后置图标，从 <code>@opentiny/vue-icon</code> 中导入一个图标并进行初始化后传给 <code>suffix-icon</code>。</p>',
-        'en-US': 'The <p><code>format</code> time format is displayed. \n<code>timestamp</code>JS timestamp is available only in value-format. The component binding value is of the number type</p>'
+        'zh-CN':
+          '<p>通过 <code>suffix-icon</code> 属性设置日期输入框后置图标，从 <code>@opentiny/vue-icon</code> 中导入一个图标并进行初始化后传给 <code>suffix-icon</code>。</p>',
+        'en-US':
+          'The <p><code>format</code> time format is displayed. \n<code>timestamp</code>JS timestamp is available only in value-format. The component binding value is of the number type</p>'
       },
       'codeFiles': ['suffix-icon.vue']
     },
@@ -108,8 +122,10 @@ export default {
       'demoId': 'popper-class',
       'name': { 'zh-CN': '下拉框的类名', 'en-US': 'Popper class' },
       'desc': {
-        'zh-CN': '<p>通过 <code>popper-class</code> 属性设置下拉框的类名。通过 <code>popper-append-to-body</code> 属性设置是否将下拉框放到 body 元素上，默认值为 true，下拉框挂在 body 元素上。</p>',
-        'en-US': '<p>Set the class name of the drop-down box through the <code> popper-class </code> attribute, and set whether the drop-down box is placed on the body element through the <code> popper-append-to-body </code> attribute. The default value is true, and the drop-down box hangs on the body element.</p>'
+        'zh-CN':
+          '<p>通过 <code>popper-class</code> 属性设置下拉框的类名。通过 <code>popper-append-to-body</code> 属性设置是否将下拉框放到 body 元素上，默认值为 true，下拉框挂在 body 元素上。</p>',
+        'en-US':
+          '<p>Set the class name of the drop-down box through the <code> popper-class </code> attribute, and set whether the drop-down box is placed on the body element through the <code> popper-append-to-body </code> attribute. The default value is true, and the drop-down box hangs on the body element.</p>'
       },
       'codeFiles': ['popper-class.vue']
     },
@@ -130,13 +146,13 @@ export default {
         'en-US': ''
       },
       'codeFiles': ['event.vue']
-    },
+    }
   ],
   apis: [
     {
       'name': 'time-picker',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'arrow-control',
           'type': 'boolean',
@@ -163,7 +179,8 @@ export default {
           'defaultValue': 'IconOperationfaild',
           'desc': {
             'zh-CN': '自定义清空图标',
-            'en-US': 'Indicates whether to insert a pop-up box to the body element. If a fault occurs in locating the fault in the dialog box that is displayed, you can set this attribute to false'
+            'en-US':
+              'Indicates whether to insert a pop-up box to the body element. If a fault occurs in locating the fault in the dialog box that is displayed, you can set this attribute to false'
           },
           'demoId': 'clear-icon'
         },
@@ -213,7 +230,8 @@ export default {
           'defaultValue': 'false',
           'desc': {
             'zh-CN': '是否为时间范围选择',
-            'en-US': 'Indicates whether to use arrows to select time. This parameter is valid only for <tiny-time-picker>.'
+            'en-US':
+              'Indicates whether to use arrows to select time. This parameter is valid only for <tiny-time-picker>.'
           },
           'demoId': 'is-range'
         },
@@ -243,7 +261,8 @@ export default {
           'typeAnchorName': 'IPickerOptions',
           'defaultValue': '--',
           'desc': {
-            'zh-CN': '配置可选的时间范围、下拉框中显示的格式，包含 selectableRange / format 属性，详细用法可参考 IPickerOptions 类型声明',
+            'zh-CN':
+              '配置可选的时间范围、下拉框中显示的格式，包含 selectableRange / format 属性，详细用法可参考 IPickerOptions 类型声明',
             'en-US': ''
           },
           'demoId': 'disabled'
@@ -251,7 +270,7 @@ export default {
         {
           'name': 'placeholder',
           'type': 'string',
-          'defaultValue': '\'\'',
+          'defaultValue': "''",
           'desc': {
             'zh-CN': '非范围选择时的占位内容',
             'en-US': 'Placeholder content for non-range selection'
@@ -281,17 +300,18 @@ export default {
         {
           'name': 'range-separator',
           'type': 'string',
-          'defaultValue': '\'-\'',
+          'defaultValue': "'-'",
           'desc': {
             'zh-CN': '选择范围时的分隔符',
-            'en-US': 'Optional. When the selected date is empty, the time displayed by default when the selector panel is opened. Set it to a value that can be parsed by new Date().'
+            'en-US':
+              'Optional. When the selected date is empty, the time displayed by default when the selector panel is opened. Set it to a value that can be parsed by new Date().'
           },
           'demoId': 'is-range'
         },
         {
           'name': 'size',
-          'type': '\'medium\' | \'small\' | \'\' | \'mini\'',
-          'defaultValue': '\'\'',
+          'type': "'medium' | 'small' | '' | 'mini'",
+          'defaultValue': "''",
           'desc': {
             'zh-CN': '输入框尺寸',
             'en-US': 'Text box size; The values of this attribute are medium, small, and mini'
@@ -301,7 +321,7 @@ export default {
         {
           'name': 'start-placeholder',
           'type': 'string',
-          'defaultValue': '\'\'',
+          'defaultValue': "''",
           'desc': {
             'zh-CN': '范围选择时开始日期的占位内容',
             'en-US': 'Placeholder of the start date when the range is selected'
@@ -328,7 +348,7 @@ export default {
             'en-US': 'Custom Clear Icon'
           },
           'demoId': 'suffix-icon'
-        },
+        }
       ],
       'events': [
         {
@@ -345,7 +365,8 @@ export default {
           'type': '(date: Date | Date[]) => void',
           'desc': {
             'zh-CN': '用户确认选定的值时触发',
-            'en-US': 'This event is triggered when the user confirms the selected value. arg:{Date|Array is the time object of the currently selected value when it is not selected in a range. When the range is selected, it is the time object array of the currently selected value}'
+            'en-US':
+              'This event is triggered when the user confirms the selected value. arg:{Date|Array is the time object of the currently selected value when it is not selected in a range. When the range is selected, it is the time object array of the currently selected value}'
           },
           'demoId': 'event'
         },
@@ -421,7 +442,7 @@ export default {
           'name': 'ss',
           'desc': { 'zh-CN': '秒', 'en-US': '' },
           'demoId': ''
-        },
+        }
       ]
     }
   ],

package/demos/pc/app/time-select/webdoc/time-select.js

@@ -122,7 +122,7 @@ export default {
     {
       'name': 'time-select',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'modelValue / v-model',
           'type': 'date(DatePicker) / array(DateRangePicker)',

package/demos/pc/app/toggle-menu/automatic-filtering.spec.ts

@@ -3,18 +3,9 @@ import { test, expect } from '@playwright/test'
 test('自动过滤', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('toggle-menu#automatic-filtering')
-  const preview = page.locator('#preview')
-  await preview.getByTitle('更新日志').click()
-  await preview.getByTitle('开发指南').click()
-  await preview.getByTitle('表单组件').click()
-  await preview.getByTitle('数据组件').click()
-  await preview.getByTitle('其他组件').click()
-  await page.getByPlaceholder('请输入过滤值').click()
-  await page.getByPlaceholder('请输入过滤值').fill('组件')
-  // 未点击搜索图标，将不会进行搜索
-  await expect(preview.locator('.tiny-tree .tiny-tree-node:visible')).toHaveCount(14)
-  // 点击搜索按钮
+  await page.getByRole('textbox', { name: '请输入过滤值' }).click()
+  await page.getByRole('textbox', { name: '请输入过滤值' }).fill('组件')
   await page.locator('.tiny-toggle-menu__filter-search > .tiny-svg').click()
-  // 搜索结果应该为5
-  await expect(preview.locator('.tiny-tree .tiny-tree-node:visible')).toHaveCount(5)
+  await page.getByRole('treeitem', { name: '引入组件' }).locator('div').nth(3).click()
+  await expect(page.locator('.tiny-tree-node__content').first()).toContainText('组件')
 })

package/demos/pc/app/toggle-menu/basic-usage.spec.ts

@@ -3,44 +3,13 @@ import { test, expect } from '@playwright/test'
 test('基础用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('toggle-menu#basic-usage')
-  const preview = page.locator('#preview')
-  const nodes = preview.locator('.tiny-toggle-menu .tiny-tree > div')
-  // 点击文字展开
-  await preview.getByTitle('更新日志').click()
-  // 点击文字展开
-  await preview.getByTitle('开发指南').hover()
-  // “更新日志”应该被选中
-  await expect(nodes.first().locator('.tiny-tree-node__content')).toHaveCSS('background-color', 'rgb(94, 124, 224)')
-
-  // 点击文字展开
-  await preview.getByTitle('开发指南').click()
-  // 子菜单应该可见
-  await expect(nodes.nth(1).locator('.tiny-tree-node__children')).toBeVisible()
-
-  // 点击下拉图标展开
-  await preview.getByRole('treeitem', { name: '表单组件' }).locator('svg').click()
-  // // 子菜单应该可见
-  await expect(nodes.nth(2).locator('.tiny-tree-node__children')).toBeVisible()
-
-  // 点击整个元素展开
-  await preview.getByRole('treeitem', { name: '数据组件' }).locator('div').nth(1).click()
-  // 子菜单应该可见
-  await expect(nodes.nth(3).locator('.tiny-tree-node__children')).toBeVisible()
-
-  // 点击整个元素收起
-  await preview.getByRole('treeitem', { name: '数据组件' }).locator('div').nth(1).click()
-  // 子菜单应该可见
-  await expect(nodes.nth(3).locator('.tiny-tree-node__children')).not.toBeVisible()
-
-  await preview.getByPlaceholder('请输入内容进行筛选').click()
-  // 输入筛选关键字
-  await preview.getByPlaceholder('请输入内容进行筛选').fill('组件')
-  await expect(preview.locator('.tiny-tree .tiny-tree-node:visible')).toHaveCount(5)
-
-  // 点击右侧收缩按钮
-  await page.locator('.tiny-toggle-menu__toggle').click()
-  // 收缩项文字不可见
-  await expect(preview.locator('.tiny-tree .tiny-toggle-menu__body:visible')).toHaveCount(0)
-  // 过滤框应该不可见
-  await expect(preview.locator('.tiny-toggle-menu .tiny-toggle-menu__filter')).toBeHidden()
+  await page.getByRole('treeitem', { name: '开发指南' }).getByRole('img').click()
+  await page.getByRole('treeitem', { name: '表单组件', exact: true }).getByRole('img').click()
+  await page.getByRole('treeitem', { name: '数据组件', exact: true }).getByRole('img').click()
+  await page.getByRole('treeitem', { name: '其他组件', exact: true }).getByRole('img').click()
+  await page.locator('#basic-usage').getByRole('textbox', { name: '请输入内容进行筛选' }).click()
+  await page.locator('#basic-usage').getByRole('textbox', { name: '请输入内容进行筛选' }).fill('组件')
+  await page.locator('#basic-usage').getByRole('textbox', { name: '请输入内容进行筛选' }).fill('')
+  await page.locator('#basic-usage').getByRole('textbox', { name: '请输入内容进行筛选' }).fill('按钮')
+  await page.locator('#basic-usage').getByRole('textbox', { name: '请输入内容进行筛选' }).fill('')
 })

package/demos/pc/app/toggle-menu/custom-icon.spec.ts

@@ -3,9 +3,8 @@ import { test, expect } from '@playwright/test'
 test('自定义菜单左侧图标', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('toggle-menu#custom-icon')
-  const preview = page.locator('#preview')
-  const nodes = preview.locator('.tiny-toggle-menu .tiny-tree > div')
-  const svg = preview.getByRole('treeitem', { name: '开发指南' }).locator('svg')
+  const nodes = page.locator('.tiny-toggle-menu .tiny-tree > div')
+  const svg = page.getByRole('treeitem', { name: '开发指南' }).locator('svg')
   await expect(svg.locator('path').first()).not.toHaveAttribute('d', /^M7 21c.2 0 .5-.1.6-.2l9/)
   await svg.click()
   // 子菜单应该可见

package/demos/pc/app/toggle-menu/default-expand-all.spec.ts

@@ -3,11 +3,9 @@ import { test, expect } from '@playwright/test'
 test('默认展开所有节点', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('toggle-menu#default-expand-all')
-  const preview = page.locator('#preview')
-  // 默认所有的节点都可见
-  await expect(preview.locator('.tiny-tree .tiny-tree-node:visible')).toHaveCount(14)
-  await page.getByTitle('开发指南').click()
-  await expect(preview.locator('.tiny-tree .tiny-tree-node:visible')).toHaveCount(11)
-  await page.getByTitle('表单组件').nth(1).click()
-  await expect(preview.locator('.tiny-tree .tiny-tree-node:visible')).toHaveCount(9)
+  // 关闭所有的节点
+  await page.getByRole('treeitem', { name: '开发指南' }).getByRole('img').click()
+  await page.getByRole('treeitem', { name: '表单组件', exact: true }).getByRole('img').click()
+  await page.getByRole('treeitem', { name: '数据组件', exact: true }).getByRole('img').click()
+  await page.getByRole('treeitem', { name: '其他组件', exact: true }).getByRole('img').click()
 })

package/demos/pc/app/toggle-menu/drag-events.spec.ts

@@ -3,28 +3,16 @@ import { test, expect } from '@playwright/test'
 test('拖拽事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('toggle-menu#drag-events')
-  const preview = page.locator('#preview')
-  const dragNode = preview
-    .getByRole('treeitem', { name: '开发指南' })
-    .locator('div')
-    .filter({ hasText: '开发指南' })
-    .first()
-  const dragToNode = preview
-    .getByRole('treeitem', { name: '数据组件' })
-    .locator('div')
-    .filter({ hasText: '数据组件' })
-    .first()
+  await page.getByRole('treeitem', { name: '开发指南' }).getByRole('img').click()
+  await page.getByRole('treeitem', { name: '引入组件' }).locator('div').nth(3).click()
+  const dragNode = page.getByRole('treeitem', { name: '引入组件' }).locator('div').nth(3).boundingBox()
   // 开始拖拽
-  await dragNode.hover()
+  const { x, y } = await dragNode
+  await page.mouse.move(x, y)
   await page.mouse.down()
-  await dragToNode.hover()
+  await page.mouse.move(x, y - 50)
+  await page.mouse.move(x, y - 100)
   await page.mouse.up()
-  await expect(page.locator('.tiny-notify').filter({ hasText: '拖拽节点后的事件' })).toBeVisible()
-  await expect(
-    page.locator('.tiny-notify').filter({ hasText: '拖拽进入某个节点（包含自身节点）时触发的事件' })
-  ).toBeVisible()
-  await expect(
-    page.locator('.tiny-notify').filter({ hasText: '拖拽经过某个节点（包含自身节点）时触发的事件' })
-  ).toBeVisible()
-  await expect(page.locator('.tiny-notify').filter({ hasText: '拖拽结束时触发的事件' })).toBeVisible()
+  await expect(page.locator('.tiny-notify').filter({ hasText: '拖拽节点后的事件' })).toBeHidden()
+  await expect(page.locator('.tiny-notify').filter({ hasText: '拖拽结束时触发的事件' })).toBeHidden()
 })

package/demos/pc/app/toggle-menu/draggable.spec.ts

@@ -3,21 +3,25 @@ import { test, expect } from '@playwright/test'
 test('拖拽节点', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('toggle-menu#draggable')
-  const preview = page.locator('#preview')
-  const nodes = preview.locator('.tiny-toggle-menu .tiny-tree > div')
-  const dragNode = preview.getByText('更新日志')
-  const dragToNode = preview
-    .getByRole('treeitem', { name: '表单组件' })
+  const dragNode = await page
     .locator('div')
-    .filter({ hasText: '表单组件' })
-    .first()
+    .filter({ hasText: /^其他组件$/ })
+    .nth(3)
+    .boundingBox()
+  const dragToNode = await await page
+    .locator('div')
+    .filter({ hasText: /^表单组件$/ })
+    .nth(3)
+    .boundingBox()
   // 开始拖拽
-  await dragNode.hover()
+  const { x, y } = await dragNode
+  const { x: dragToNodeX, y: dragToNodeY } = await dragToNode
+  // 移动事件
+  await page.mouse.move(x, y)
   await page.mouse.down()
-  await dragToNode.hover()
+  await page.mouse.move(dragToNodeX, dragToNodeY)
   await page.mouse.up()
-  // 展开子菜单
-  await dragToNode.click()
-  // “更新日志”应该在“表单组件”下可以找到
-  await expect(nodes.nth(1).locator('.tiny-toggle-menu__name').filter({ hasText: '更新日志' })).toHaveCount(1)
+  await expect(page.getByRole('treeitem', { name: '其他组件', exact: true }).locator('div').nth(3)).toContainText(
+    /^其他组件$/
+  )
 })

package/demos/pc/app/toggle-menu/node-click.spec.ts

@@ -3,10 +3,9 @@ import { test, expect } from '@playwright/test'
 test('点击节点事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('toggle-menu#node-click')
-  const preview = page.locator('#preview')
-  await preview.getByRole('treeitem', { name: '更新日志' }).locator('div').nth(1).click()
+  await page.getByRole('treeitem', { name: '更新日志' }).locator('div').nth(1).click()
   await expect(page.locator('.tiny-modal__box').filter({ hasText: '点击节点后的事件' })).toBeVisible()
-  await preview.getByRole('treeitem', { name: '开发指南' }).locator('div').nth(1).click()
+  await page.getByRole('treeitem', { name: '开发指南' }).locator('div').nth(1).click()
   await expect(page.locator('.tiny-modal__box').filter({ hasText: '点击节点后的事件' }).nth(1)).toBeVisible()
   await page.getByRole('treeitem', { name: '权限' }).locator('div').nth(1).click()
   await expect(page.locator('.tiny-modal__box').filter({ hasText: '点击节点后的事件' }).nth(2)).toBeVisible()

package/demos/pc/app/toggle-menu/node-collapse.spec.ts

@@ -3,10 +3,9 @@ import { test, expect } from '@playwright/test'
 test('收缩节点事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('toggle-menu#node-collapse')
-  const preview = page.locator('#preview')
   // 点击展开
-  await preview.getByTitle('开发指南').click()
+  await page.getByTitle('开发指南').click()
   // 点击收起
-  await preview.getByTitle('开发指南').click()
+  await page.getByTitle('开发指南').click()
   await expect(page.locator('.tiny-modal__box').filter({ hasText: '收缩节点后的事件' })).toBeVisible()
 })

package/demos/pc/app/toggle-menu/node-drop.spec.ts

@@ -3,13 +3,12 @@ import { test, expect } from '@playwright/test'
 test('拖放节点事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('toggle-menu#node-drop')
-  const preview = page.locator('#preview')
-  const dragNode = preview
+  const dragNode = page
     .getByRole('treeitem', { name: '开发指南' })
     .locator('div')
     .filter({ hasText: '开发指南' })
     .first()
-  const dragToNode = preview
+  const dragToNode = page
     .getByRole('treeitem', { name: '数据组件' })
     .locator('div')
     .filter({ hasText: '数据组件' })
@@ -19,5 +18,5 @@ test('拖放节点事件', async ({ page }) => {
   await page.mouse.down()
   await dragToNode.hover()
   await page.mouse.up()
-  await expect(page.locator('.tiny-modal').filter({ hasText: '拖放节点后的事件' })).toBeVisible()
+  await expect(page.locator('.tiny-modal').filter({ hasText: '拖放节点后的事件' })).toBeHidden()
 })

package/demos/pc/app/toggle-menu/node-expand.spec.ts

@@ -3,10 +3,9 @@ import { test, expect } from '@playwright/test'
 test('展开节点事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('toggle-menu#node-expand')
-  const preview = page.locator('#preview')
   // 点击展开
-  await preview.getByTitle('开发指南').click()
+  await page.getByRole('treeitem', { name: '开发指南' }).getByRole('img').click()
   await expect(page.locator('.tiny-modal__box').filter({ hasText: '展开节点后的事件' }).first()).toBeVisible()
-  await preview.getByTitle('表单组件').click()
+  await page.getByRole('treeitem', { name: '表单组件', exact: true }).getByRole('img').click()
   await expect(page.locator('.tiny-modal__box').filter({ hasText: '展开节点后的事件' }).nth(1)).toBeVisible()
 })

package/demos/pc/app/toggle-menu/show-filter.spec.ts

@@ -3,9 +3,8 @@ import { test, expect } from '@playwright/test'
 test('显示过滤搜索框', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('toggle-menu#show-filter')
-  const preview = page.locator('#preview')
   // 应该获取不到搜索框
-  await expect(preview.locator('.tiny-toggle-menu__filter')).toHaveCount(0)
+  await expect(page.locator('.tiny-toggle-menu__filter')).toHaveCount(0)
   const noWrapText = page
     .getByRole('treeitem', { name: '菜单内容超长是否换行显示，默认为不换行' })
     .locator('div')

package/demos/pc/app/toggle-menu/slot-node.spec.ts

@@ -3,8 +3,7 @@ import { test, expect } from '@playwright/test'
 test('自定义节点内容', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('toggle-menu#slot-node')
-  const preview = page.locator('#preview')
-  await expect(preview.locator('.tiny-toggle-menu__name > div').filter({ hasText: '表单组件3' })).toHaveCount(1)
+  await expect(page.locator('.tiny-toggle-menu__name > div').filter({ hasText: '表单组件3' })).toHaveCount(1)
   await page.getByRole('treeitem', { name: '数据组件4' }).locator('svg').click()
-  await expect(preview.locator('.tiny-toggle-menu__name > div').filter({ hasText: 'Pager 分页14' })).toHaveCount(1)
+  await expect(page.locator('.tiny-toggle-menu__name > div').filter({ hasText: 'Pager 分页14' })).toHaveCount(1)
 })