@opentiny/vue-docs 2.2.6 → 2.2.8

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

@@ -5,28 +5,35 @@ export default {
     {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'desc': { 'zh-CN': '详细用法参考如下示例。', 'en-US': 'For details, see the following example.' },
       'codeFiles': ['basic-usage.vue']
     },
     {
       'demoId': 'range-placeholder',
       'name': { 'zh-CN': '固定时间范围', 'en-US': 'Fixed Time Range' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'desc': {
+        'zh-CN': '如果先选中了开始（或结束）时间，则结束（或开始）时间的状态也将会随之改变。',
+        'en-US': 'For details, see the following example.'
+      },
       'codeFiles': ['range-placeholder.vue']
     },
     {
       'demoId': 'default-value',
-      'name': { 'zh-CN': '选择器打开时默认时间设置', 'en-US': 'Default time setting when the selector is enabled' },
+      'name': { 'zh-CN': '设置打开默认时间', 'en-US': 'Default time setting when the selector is enabled' },
       'desc': {
-        'zh-CN': '<p>通过 <code>default-value</code> 设置选择器打开显示默认时间</p>\n',
+        'zh-CN': '<p>通过 <code>default-value</code> 设置选择器打开显示默认时间。</p>\n',
         'en-US': '<p>Use <code>default-value</code> to set the selector to open the default display time</p>\n'
       },
       'codeFiles': ['default-value.vue']
     },
     {
       'demoId': 'picker-options',
-      'name': { 'zh-CN': '指定时间点', 'en-US': 'Specified time point' },
-      'desc': { 'zh-CN': '<p>picker-options 设置时间点</p>\n', 'en-US': '<p>picker-options Set Time</p>\n' },
+      'name': { 'zh-CN': '固定时间点', 'en-US': 'Specified time point' },
+      'desc': {
+        'zh-CN':
+          '<p>提供固定时间点，可通过 picker-options 对象中的 start、end、step、minTime、maxTime 设置起始时间、结束时间、步长、最小有效时间和最大有效时间。</p>\n',
+        'en-US': '<p>picker-options Set Time</p>\n'
+      },
       'codeFiles': ['picker-options.vue']
     },
     {
@@ -42,30 +49,20 @@ export default {
     },
     {
       'demoId': 'clear-icon',
-      'name': { 'zh-CN': '自定义清空图标', 'en-US': 'Customized Clear Icon' },
+      'name': { 'zh-CN': '清空图标', 'en-US': 'Customized Clear Icon' },
       'desc': {
-        'zh-CN': '<p>通过 <code>clear-icon</code> 自定义清空图标</p>\n',
+        'zh-CN':
+          '<p>通过 <code>clearable</code> 显示清空图标，通过 <code>clear-icon</code> 自定义清空图标，通过 <code>popper-class</code> 自定义原生属性。</p>',
         'en-US': '<p>Clear the icon by <code>clear-icon</code></p>\n'
       },
       'codeFiles': ['clear-icon.vue']
     },
-    {
-      'demoId': 'clearable',
-      'name': { 'zh-CN': '显示清除按钮', 'en-US': 'Display the Clear button' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
-      'codeFiles': ['clear-icon.vue']
-    },
-    {
-      'demoId': 'name',
-      'name': { 'zh-CN': '原生属性', 'en-US': 'Native Attribute' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
-      'codeFiles': ['clear-icon.vue']
-    },
     {
       'demoId': 'event-blur',
       'name': { 'zh-CN': '事件', 'en-US': 'Event' },
       'desc': {
-        'zh-CN': '<p><code>focus</code> input 框聚焦时触发，<code>blur</code> input 框失焦时触发</p>\n',
+        'zh-CN':
+          '<p><code>focus</code> input 框聚焦时触发，<code>blur</code> input 框失焦时触发，<code>change</code> input 绑定值改变时触发。</p>\n',
         'en-US':
           'Triggered when the <p><code>focus</code> input frame is focused and when the input frame is out of focus</p>\n'
       },
@@ -81,40 +78,22 @@ export default {
       },
       'codeFiles': ['editable.vue']
     },
-    {
-      'demoId': 'disabled',
-      'name': { 'zh-CN': '禁用', 'en-US': 'Disabled' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
-      'codeFiles': ['disabled.vue']
-    },
-    {
-      'demoId': 'popper-class',
-      'name': { 'zh-CN': '自定义类名', 'en-US': 'Customized class name' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
-      'codeFiles': ['popper-class.vue']
-    },
-    {
-      'demoId': 'size-mini',
-      'name': { 'zh-CN': 'mini 尺寸', 'en-US': 'mini size' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
-      'codeFiles': ['size-mini.vue']
-    },
-    {
-      'demoId': 'size-small',
-      'name': { 'zh-CN': 'small 尺寸', 'en-US': 'small size' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
-      'codeFiles': ['size-small.vue']
-    },
     {
       'demoId': 'size-medium',
-      'name': { 'zh-CN': 'medium 尺寸', 'en-US': 'medium Size' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'name': { 'zh-CN': '尺寸', 'en-US': 'medium Size' },
+      'desc': {
+        'zh-CN': '通过修改 size 的属性值可调整输入框尺寸，提供 medium、small、mini三个固定属性值。',
+        'en-US': 'For details, see the following example.'
+      },
       'codeFiles': ['size-medium.vue']
     },
     {
       'demoId': 'focus',
       'name': { 'zh-CN': '手动获取焦点', 'en-US': 'Manually obtaining the focus' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'desc': {
+        'zh-CN': '通过给组件设置 ref 手动调用触发 focus 事件。',
+        'en-US': 'For details, see the following example.'
+      },
       'codeFiles': ['focus.vue']
     }
   ],
@@ -122,13 +101,13 @@ export default {
     {
       'name': 'time-select',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'modelValue / v-model',
           'type': 'date(DatePicker) / array(DateRangePicker)',
-          'defaultValue': '日期选择器选中的日期值，可设置选择器的初始值',
+          'defaultValue': '',
           'desc': {
-            'zh-CN': '绑定值',
+            'zh-CN': '日期选择器选中的日期值，可设置选择器的初始值',
             'en-US': 'Date value selected by the date selector. You can set the initial value of the selector.'
           },
           'demoId': 'basic-usage'
@@ -136,55 +115,55 @@ export default {
         {
           'name': 'disabled',
           'type': 'boolean',
-          'defaultValue': '该属性的默认值为 false',
-          'desc': { 'zh-CN': '禁用', 'en-US': 'Disabled' },
-          'demoId': 'disabled'
+          'defaultValue': ' false',
+          'desc': { 'zh-CN': '时间选择器是否禁用', 'en-US': 'Disabled' },
+          'demoId': ''
         },
         {
           'name': 'editable',
           'type': 'boolean',
-          'defaultValue': '该属性的默认值为 true',
-          'desc': { 'zh-CN': '文本框可输入', 'en-US': 'The text box can be entered.' },
-          'demoId': 'basic-usage'
+          'defaultValue': ' true',
+          'desc': { 'zh-CN': '文本框是否可手动输入', 'en-US': 'The text box can be entered.' },
+          'demoId': 'editable'
         },
         {
           'name': 'clearable',
           'type': 'boolean',
-          'defaultValue': '该属性的默认值为 true',
-          'desc': { 'zh-CN': '是否显示清除按钮', 'en-US': 'Display Clear Button' },
+          'defaultValue': ' true',
+          'desc': { 'zh-CN': '清除按钮是否显示', 'en-US': 'Display Clear Button' },
           'demoId': 'clear-icon'
         },
         {
           'name': 'size',
           'type': 'string',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
-            'zh-CN': '输入框尺寸;该属性的可选值为 medium,small, mini',
+            'zh-CN': '输入框尺寸;该属性的可选值为 medium、small、mini',
             'en-US': 'Text box size; The values of this attribute are medium, small, and mini'
           },
-          'demoId': 'size-mini'
+          'demoId': 'size-medium'
         },
         {
           'name': 'placeholder',
           'type': 'string',
-          'defaultValue': '该属性的默认值为空',
-          'desc': { 'zh-CN': '非范围选择时的占位内容', 'en-US': 'Placeholder content for non-range selection' },
+          'defaultValue': '--',
+          'desc': { 'zh-CN': '输入框的提示占位内容', 'en-US': 'Placeholder content for non-range selection' },
           'demoId': 'basic-usage'
         },
         {
           'name': 'popper-class',
           'type': 'string',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': 'TimePicker 下拉框的 class 类名',
             'en-US': 'Class name of the TimePicker drop-down list box'
           },
-          'demoId': 'popper-class'
+          'demoId': ''
         },
         {
           'name': 'picker-options',
           'type': 'object',
-          'defaultValue': '该属性的默认值为 {}',
+          'defaultValue': '{}',
           'desc': {
             'zh-CN': '当前时间日期选择器特有的选项参考下表',
             'en-US': 'The following table lists the options of the current time and date selector.'
@@ -194,7 +173,7 @@ export default {
         {
           'name': 'default-value',
           'type': 'Date',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '可选，当选中的日期值为空时，选择器面板打开时默认显示的时间，需设置为可被new Date()解析的值',
             'en-US':
@@ -205,28 +184,28 @@ export default {
         {
           'name': 'name',
           'type': 'string',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': { 'zh-CN': '原生属性', 'en-US': 'Native attribute' },
-          'demoId': 'name'
+          'demoId': 'clear-icon'
         },
         {
           'name': 'suffix-icon',
           'type': 'string',
-          'defaultValue': '该自定后置图标，该属性的默认值为 IconCalendar',
+          'defaultValue': 'IconCalendar',
           'desc': { 'zh-CN': '自定义头部图标', 'en-US': 'Custom header icon' },
           'demoId': 'suffix-icon'
         },
         {
           'name': 'clear-icon',
           'type': 'string',
-          'defaultValue': '该属性的默认值为 IconOperationfaild',
+          'defaultValue': 'IconOperationfaild',
           'desc': { 'zh-CN': '自定义清空图标', 'en-US': 'Customized clear icon' },
           'demoId': 'clear-icon'
         },
         {
           'name': 'popper-append-to-body',
           'type': 'boolean',
-          'defaultValue': '该属性的默认值为 true',
+          'defaultValue': 'true',
           'desc': {
             'zh-CN': '是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false',
             'en-US':
@@ -238,17 +217,17 @@ export default {
       'events': [
         {
           'name': 'change',
-          'type': '',
+          'type': '(value: string) => void',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '用户确认选定的值时触发',
+            'zh-CN': '当 input 绑定的值发生改变时触发',
             'en-US': 'This event is triggered when the user confirms the selected value.'
           },
           'demoId': 'event-blur'
         },
         {
           'name': 'blur',
-          'type': '',
+          'type': '( ) => void',
           'defaultValue': '',
           'desc': {
             'zh-CN': '当 input 失去焦点时触发',
@@ -258,7 +237,7 @@ export default {
         },
         {
           'name': 'focus',
-          'type': '',
+          'type': '( ) => void',
           'defaultValue': '',
           'desc': { 'zh-CN': '当 input 获得焦点时触发', 'en-US': 'This event is triggered when the input is focused.' },
           'demoId': 'event-blur'
@@ -267,8 +246,8 @@ export default {
       'slots': [],
       'methods': [
         {
-          'name': 'focus',
-          'type': '',
+          'name': 'handleFocus',
+          'type': '( ) => void',
           'defaultValue': '',
           'desc': { 'zh-CN': '使 input 获取焦点', 'en-US': 'Enable input to focus.' },
           'demoId': 'focus'

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)
 })

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

@@ -3,17 +3,10 @@ import { test, expect } from '@playwright/test'
 test('props 选项映射', 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')
+  const nodes = page.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 page.getByTitle('开发指南').click()
   // 子菜单应该可见
   await expect(nodes.nth(1).locator('.tiny-tree-node__children')).toBeVisible()
 })

package/demos/pc/app/tooltip/basic-usage.spec.js

@@ -4,15 +4,17 @@ test('测试Tooltip的是否能出现', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
 
   await page.goto('tooltip#basic-usage')
-  let button = page.getByRole('button', { name: '上左' })
+
+  const preview = page.locator('.pc-demo-container')
+  let button = preview.getByRole('button', { name: '上左' })
   let tooltip = page.getByRole('tooltip', { name: 'Top Left 提示文字' })
 
-  await button.hover()
   await page.waitForTimeout(100)
+  await page.mouse.move(600, 300)
   await expect(tooltip).toBeVisible()
 
   // 测试Tooltip的位置是否正确
-  button = page.getByRole('button', { name: '上右' })
+  button = preview.getByRole('button', { name: '上右' })
   tooltip = page.getByRole('tooltip', { name: 'Top Right 提示文字' })
 
   await button.hover()
@@ -22,7 +24,7 @@ test('测试Tooltip的是否能出现', async ({ page }) => {
   // tooltip + 高度 要小于button的y
   expect(tooltipBox.y + tooltipBox.height).toBeLessThan(buttonBox.y)
 
-  button = page.getByRole('button', { name: '下左' })
+  button = preview.getByRole('button', { name: '下左' })
   tooltip = page.getByRole('tooltip', { name: 'Bottom Left 提示文字' })
 
   await button.hover()