@opentiny/vue-docs 2.2.5 → 2.2.7

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/toggle-menu/webdoc/toggle-menu.js

@@ -5,14 +5,17 @@ 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': '通过<code>:data</code>设置数据源。',
+        'en-US': 'Set the data source through<code>: data</code>.'
+      },
       'codeFiles': ['basic-usage.vue']
     },
     {
       'demoId': 'custom-icon',
       'name': { 'zh-CN': '自定义菜单左侧图标', 'en-US': 'Icon on the left of the customized menu' },
       'desc': {
-        'zh-CN': '<p>可通过 <code>icon</code> 属性自定义菜单左侧图标。</p>\n',
+        'zh-CN': '<p>通过 <code>icon</code> 属性自定义菜单左侧图标。</p>\n',
         'en-US': '<p>You can customize the icon on the left of the menu through the <code>icon</code> attribute. </p>\n'
       },
       'codeFiles': ['custom-icon.vue']
@@ -22,8 +25,9 @@ export default {
       'name': { 'zh-CN': '自定义菜单数据', 'en-US': 'Customized menu data service' },
       'desc': {
         'zh-CN':
-          '<p>可通过 <code>get-menu-data-sync</code> 自定义菜单数据服务。(deprecated v3.4.0废弃, v3.16.0移除；移除原因：如果是同步数据则和:data功能重复)</p>\n',
-        'en-US': '<p>You can customize the menu data service through <code>get-menu-data-sync</code> . </p>\n'
+          '<p>通过 <code>get-menu-data-sync</code> 自定义菜单数据服务。(deprecated v3.4.0废弃, v3.16.0移除；移除原因：如果是同步数据则和:data功能重复)。</p>\n',
+        'en-US':
+          '<p>Customize menu data services through<code>get menu data sync</code>. (deprecated v3.4.0 abandoned, v3.16.0 removed; removal reason: if it is synchronized data, it is duplicated with the: data function).</p>\n'
       },
       'codeFiles': ['get-menu-data-sync.vue']
     },
@@ -31,7 +35,7 @@ export default {
       'demoId': 'get-menu-data-async',
       'name': { 'zh-CN': '自定义菜单异步数据服务', 'en-US': 'props option mapping' },
       'desc': {
-        'zh-CN': '<p>可通过 <code>get-menu-data-async</code> 自定义菜单异步数据服务。</p>\n',
+        'zh-CN': '<p>通过 <code>get-menu-data-async</code> 自定义菜单异步数据服务。</p>\n',
         'en-US':
           "<p>You can use <code>props</code> to configure the mapping field. The default value of this attribute is {children:'children', label:'label', disabled:'disabled'}. </p>\n"
       },
@@ -42,14 +46,14 @@ export default {
       'name': { 'zh-CN': 'props 选项映射', 'en-US': 'Custom Node Content' },
       'desc': {
         'zh-CN':
-          "<p>可通过 <code>props</code> 配置选项映射字段该属性的默认值为 {children: 'children',label: 'label',disabled: 'disabled'} 。</p>\n",
+          "<p>通过<code>props</code>配置选项映射字段该属性的默认值为<code>{children:'children',label:'label',disabled:'disabled'}</code>。</p>\n",
         'en-US': '<p>Customize the node content through the <code>node</code> slot. </p>\n'
       },
       'codeFiles': ['toggle-props.vue']
     },
     {
       'demoId': 'slot-node',
-      'name': { 'zh-CN': '自定义节点内容', 'en-US': 'All nodes are expanded by default.' },
+      'name': { 'zh-CN': '自定义节点内容', 'en-US': 'All nodes are expanded by default' },
       'desc': {
         'zh-CN': '<p>通过 <code>node</code> 插槽自定义节点内容。</p>\n',
         'en-US':
@@ -62,18 +66,18 @@ export default {
       'name': { 'zh-CN': '默认展开所有节点', 'en-US': 'Drag Node' },
       'desc': {
         'zh-CN':
-          '<p>可通过 <code>default-expand-all</code> 属性设置是否默认展开所有节点，通过 <code>expand-on-click-node</code> 属性设置是否可以通过点击节点展开/收起菜单。</p>\n',
+          '<p>通过 <code>default-expand-all</code> 属性设置是否默认展开所有节点，通过 <code>expand-on-click-node</code> 属性设置是否可以通过点击节点，展开/收起菜单。</p>\n',
         'en-US':
-          '<p>You can use the <code>draggable</code> attribute to set whether to enable the node drag function. The default value is <code>false</code>. \nYou can use the <code>ellipsis</code> property to set whether to enable the function of omitting the overlong text content. The default value is <code>false</code></p>\n'
+          '<p>You can use the <code>draggable</code> attribute to set whether to enable the node drag function. The default value is <code>false</code>. \nYou can use the <code>ellipsis</code> property to set whether to enable the function of omitting the overlong text content. The default value is <code>false</code>.</p>\n'
       },
       'codeFiles': ['default-expand-all.vue']
     },
     {
       'demoId': 'draggable',
-      'name': { 'zh-CN': '拖拽节点', 'en-US': 'Display the filter search box.' },
+      'name': { 'zh-CN': '拖拽节点', 'en-US': 'Display the filter search box' },
       'desc': {
         'zh-CN':
-          '<p>可通过 <code>draggable</code> 属性设置是否开启拖拽节点的功能，默认值为 <code>false</code>。\n可通过 <code>ellipsis</code> 属性设置是否开启文本内容超长是省略显示，默认值为 <code>false</code></p>\n',
+          '<p>通过 <code>draggable</code> 属性设置是否开启拖拽节点的功能，默认值为 <code>false</code>。\n可通过 <code>ellipsis</code> 属性设置是否开启文本内容超长是省略显示，默认值为 <code>false</code>。</p>\n',
         'en-US':
           '<p>You can set the <code>show-filter</code> attribute to determine whether to display the filter search box. The default value is <code>true</code>. You can set it to <code>false</code> not to display the filter search box. </p>\n'
       },
@@ -84,7 +88,7 @@ export default {
       'name': { 'zh-CN': '显示过滤搜索框', 'en-US': 'Auto Filter' },
       'desc': {
         'zh-CN':
-          '<p>可通过 <code>show-filter</code> 属性设置是否展示过滤搜索框，默认为 <code>true</code>，可设置为<code>false</code>不展示过滤搜索框。</p>\n',
+          '<p>通过 <code>show-filter</code> 属性设置是否展示过滤搜索框，默认为 <code>true</code>，可设置为<code>false</code>不展示过滤搜索框。</p>\n',
         'en-US':
           '<p>You can set the placeholder of the text box through the <code>placeholder</code> attribute. Use <code>automatic-filtering</code> to set whether to automatically filter input data. The default value is true. </p>\n'
       },
@@ -92,11 +96,12 @@ export default {
     },
     {
       'demoId': 'automatic-filtering',
-      'name': { 'zh-CN': '自动过滤', 'en-US': 'The content exceeds the line feed.' },
+      'name': { 'zh-CN': '自动过滤', 'en-US': 'The content exceeds the line feed' },
       'desc': {
         'zh-CN':
-          '<p>可通过 <code>placeholder</code> 属性设置输入框的占位符。 通过设置 <code>automatic-filtering</code> 为<code>false</code>关闭输入时自动过滤功能，默认值为 true。</p>\n',
-        'en-US': 'For details, see the following example.'
+          '<p>通过 <code>placeholder</code> 属性设置输入框的占位符。 通过设置 <code>automatic-filtering</code> 为<code>false</code>关闭输入时自动过滤功能，默认值为<code>true</code>。</p>\n',
+        'en-US':
+          '<p>Set the placeholder for the input box through the<code>placeholder</code>property. By setting<code>automatic filtering</code>to<code>false</code>, the automatic filtering function on input is turned off, and the default value is<code>true</code>.</p>'
       },
       'codeFiles': ['automatic-filtering.vue']
     },
@@ -104,8 +109,8 @@ export default {
       'demoId': 'show-filter1',
       'name': { 'zh-CN': '内容超出换行', 'en-US': 'Node Click Event' },
       'desc': {
-        'zh-CN': '详细用法参考如下示例',
-        'en-US': '<p><code>node-click</code> Event triggered after a node is clicked. </p>\n'
+        'zh-CN': '通过<code>wrap</code>设置换行。',
+        'en-US': 'Set line breaks through<code>wrap</code>.'
       },
       'codeFiles': ['show-filter.vue']
     },
@@ -113,8 +118,8 @@ export default {
       'demoId': 'node-click',
       'name': { 'zh-CN': '点击节点事件', 'en-US': 'Expand Node Event' },
       'desc': {
-        'zh-CN': '<p><code>node-click</code> 点击节点后触发的事件。</p>\n',
-        'en-US': 'Event triggered after the <p><code>node-expand</code> expands a node. </p>\n'
+        'zh-CN': '<p>通过<code>node-click</code> 点击节点后触发的事件。</p>\n',
+        'en-US': '<p>The event triggered by clicking on a node through<code>node click</code>.</p>\n'
       },
       'codeFiles': ['node-click.vue']
     },
@@ -122,8 +127,8 @@ export default {
       'demoId': 'node-expand',
       'name': { 'zh-CN': '展开节点事件', 'en-US': 'Shrunk Node Event' },
       'desc': {
-        'zh-CN': '<p><code>node-expand</code> 展开节点后触发的事件。</p>\n',
-        'en-US': 'Event triggered after a node is scaled in by the <p><code>node-collapse</code> . </p>\n'
+        'zh-CN': '<p>通过<code>node-expand</code> 展开节点后触发的事件。</p>\n',
+        'en-US': '<p>The event triggered after expanding a node through<code>node expand</code>.</p>\n'
       },
       'codeFiles': ['node-expand.vue']
     },
@@ -131,9 +136,8 @@ export default {
       'demoId': 'node-collapse',
       'name': { 'zh-CN': '收缩节点事件', 'en-US': 'Drag Node Event' },
       'desc': {
-        'zh-CN': '<p><code>node-collapse</code> 收缩节点后触发的事件。</p>\n',
-        'en-US':
-          '<p><code>node-drop</code>: This event is triggered after a node is dragged and dropped. You need to set <code>draggable</code> to <code>true</code>. </p>\n'
+        'zh-CN': '<p>通过<code>node-collapse</code> 收缩节点后触发的事件。</p>\n',
+        'en-US': '<p>The event triggered after shrinking a node through<code>node collapse</code>.</p>'
       },
       'codeFiles': ['node-collapse.vue']
     },
@@ -142,19 +146,20 @@ export default {
       'name': { 'zh-CN': '拖放节点事件', 'en-US': 'Drag Event' },
       'desc': {
         'zh-CN':
-          '<p><code>node-drop</code> 拖放节点后触发的事件，需要设置 <code>draggable</code> 属性为 <code>true</code>。</p>\n',
+          '<p>通过<code>node-drop</code> 拖放节点后触发的事件，需要设置 <code>draggable</code> 属性为 <code>true</code>。</p>\n',
         'en-US':
-          '<p><code>node-drag-start</code>: This event is triggered after a node is dragged. <code>node-drag-enter</code> is triggered when a node is dragged to another node. <code>node-drag-over</code> is triggered when a node is dragged. <code>node-drag-leave</code>: This event is triggered when a node is dragged out. <code>node-drag-end</code>: This event is triggered when a node is dragged out. </p>\n'
+          '<p>The event triggered by dragging and dropping a node through<code>node drop</code>needs to set the<code>draggable</code>attribute to<code>true</code>.</p>\n'
       },
       'codeFiles': ['node-drop.vue']
     },
     {
       'demoId': 'drag-events',
-      'name': { 'zh-CN': '拖拽事件', 'en-US': '' },
+      'name': { 'zh-CN': '拖拽事件', 'en-US': 'Dragging event' },
       'desc': {
         'zh-CN':
-          '<p><code>node-drag-start</code> 拖拽节点后的事件，<code>node-drag-enter</code> 拖拽进入其他节点时触发的事件，<code>node-drag-over</code> 在拖拽节点时触发的事件，<code>node-drag-leave</code> 拖拽离开某个节点时触发的事件，<code>node-drag-end</code> 拖拽结束时触发的事件。</p>\n',
-        'en-US': ''
+          '<p>通过<code>node-drag-start</code> 拖拽节点后的事件，<code>node-drag-enter</code> 拖拽进入其他节点时触发的事件，<code>node-drag-over</code> 在拖拽节点时触发的事件，<code>node-drag-leave</code> 拖拽离开某个节点时触发的事件，<code>node-drag-end</code> 拖拽结束时触发的事件。</p>\n',
+        'en-US':
+          '<p>Events triggered when dragging nodes through<code>node drag start</code>, events triggered when dragging into other nodes, events triggered when dragging nodes, events triggered when dragging out of a node, and events triggered when dragging out of a node.</p>'
       },
       'codeFiles': ['drag-events.vue']
     }
@@ -163,12 +168,12 @@ export default {
     {
       'name': 'toggle-menu',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'data',
           'type': 'Array',
           'defaultValue': '',
-          'desc': { 'zh-CN': '设置收缩菜单的数据。', 'en-US': 'Set the data of the collapsed menu.' },
+          'desc': { 'zh-CN': '设置收缩菜单的数据', 'en-US': 'Set the data of the collapsed menu' },
           'demoId': 'basic-usage'
         },
         {
@@ -176,8 +181,8 @@ export default {
           'type': 'boolean',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '设置是否开启拖拽节点的功能，默认值为 `false`',
-            'en-US': 'Whether to enable the node drag function. The default value is `false`'
+            'zh-CN': '设置是否开启拖拽节点的功能，默认值为false',
+            'en-US': 'Whether to enable the node drag function. The default value is false'
           },
           'demoId': 'draggable'
         },
@@ -186,8 +191,8 @@ export default {
           'type': 'boolean',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '设置是否展示过滤搜索框，默认为 `true`。',
-            'en-US': 'Specifies whether to display the search box. The default value is `true`.'
+            'zh-CN': '设置是否展示过滤搜索框，默认为 `true`',
+            'en-US': 'Specifies whether to display the search box. The default value is true'
           },
           'demoId': 'show-filter'
         },
@@ -195,7 +200,7 @@ export default {
           'name': 'icon',
           'type': 'object',
           'defaultValue': '',
-          'desc': { 'zh-CN': '自定义菜单左侧图标。', 'en-US': 'Customize the icon on the left of the menu.' },
+          'desc': { 'zh-CN': '自定义菜单左侧图标', 'en-US': 'Customize the icon on the left of the menu' },
           'demoId': 'custom-icon'
         },
         {
@@ -203,8 +208,8 @@ export default {
           'type': 'boolean',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '设置菜单默认是否展开所有节点，默认为 false 。',
-            'en-US': 'Whether to expand all nodes in the menu by default. The default value is false.'
+            'zh-CN': '设置菜单默认是否展开所有节点，默认为 false',
+            'en-US': 'Whether to expand all nodes in the menu by default. The default value is false'
           },
           'demoId': 'default-expand-all'
         },
@@ -213,8 +218,8 @@ export default {
           'type': 'boolean',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '设置是否可以通过点击节点展开/收起菜单，默认为 false。',
-            'en-US': 'Whether to expand or collapse menus by clicking a node. The default value is false.'
+            'zh-CN': '设置是否可以通过点击节点展开/收起菜单，默认为 false',
+            'en-US': 'Whether to expand or collapse menus by clicking a node. The default value is false'
           },
           'demoId': 'default-expand-all'
         },
@@ -222,7 +227,7 @@ export default {
           'name': 'placeholder',
           'type': 'string',
           'defaultValue': '',
-          'desc': { 'zh-CN': '输入框占位符。', 'en-US': 'Placeholder in the text box.' },
+          'desc': { 'zh-CN': '输入框占位符', 'en-US': 'Placeholder in the text box' },
           'demoId': 'show-filter'
         },
         {
@@ -230,8 +235,8 @@ export default {
           'type': 'boolean',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '菜单内容超长时省略显示，默认为 false 。',
-            'en-US': 'Omitted if the menu content is too long. The default value is false.'
+            'zh-CN': '菜单内容超长时省略显示，默认为 false',
+            'en-US': 'Omitted if the menu content is too long. The default value is false'
           },
           'demoId': 'draggable'
         },
@@ -240,8 +245,8 @@ export default {
           'type': 'boolean',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '菜单内容超长时换行显示，默认为 false 。',
-            'en-US': 'The menu content is displayed in a new line when it is too long. The default value is false.'
+            'zh-CN': '菜单内容超长时换行显示，默认为 false',
+            'en-US': 'The menu content is displayed in a new line when it is too long. The default value is false'
           },
           'demoId': 'show-filter'
         },
@@ -250,9 +255,9 @@ export default {
           'type': 'boolean',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '输入框输入内容时是否自动过滤内容，默认是 true 。',
+            'zh-CN': '输入框输入内容时是否自动过滤内容，默认是 true',
             'en-US':
-              'Whether to automatically filter content when you enter content in the text box. The default value is true.'
+              'Whether to automatically filter content when you enter content in the text box. The default value is true'
           },
           'demoId': 'automatic-filtering'
         },
@@ -270,7 +275,8 @@ export default {
           'desc': {
             'zh-CN':
               '自定义菜单数据服务,直接返回数据（deprecated v3.4.0废弃, v3.16.0移除；移除原因：如果是同步数据则和:data功能重复）',
-            'en-US': 'User-defined menu data service. Data is directly returned.'
+            'en-US':
+              'Customized menu data service, directly returning data (deprecated v3.4.0 discarded, v3.16.0 removed; reason for removal: if it is synchronized data, it is duplicated with the: data function)'
           },
           'demoId': 'get-menu-data-sync'
         },
@@ -278,7 +284,10 @@ export default {
           'name': 'get-menu-data-async',
           'type': 'Function',
           'defaultValue': '',
-          'desc': { 'zh-CN': '自定义菜单数据服务,返回异步数据,需返回Promise对象', 'en-US': '' },
+          'desc': {
+            'zh-CN': '自定义菜单数据服务,返回异步数据,需返回Promise对象',
+            'en-US': 'Custom menu data service, returns asynchronous data, requires a Promise object to be returned'
+          },
           'demoId': 'get-menu-data-aync'
         }
       ],
@@ -289,7 +298,7 @@ export default {
           'defaultValue': '',
           'desc': {
             'zh-CN':
-              '点击节点后的事件。;点击节点后触发的回调函数;//参数arg1:\n{children: 点击节点的子节点, id: 点击节点的id ,label: 点击节点的title} \n//参数arg2:\n object 当前点击节点的数据信息对象 ',
+              '点击节点后的事件。;点击节点后触发的回调函数;//参数arg1:\n{children: 点击节点的子节点, id: 点击节点的id ,label: 点击节点的title} \n//参数arg2:\n object 当前点击节点的数据信息对象',
             'en-US':
               'Indicates that a node is clicked. ;Callback function triggered after a node is clicked. //Parameter arg1:\n{children: child node of the clicked node, id: ID of the clicked node, label: title of the clicked node} \n//Parameter arg2:\n object Data information object of the currently clicked node'
           },
@@ -325,7 +334,7 @@ export default {
           'defaultValue': '',
           'desc': {
             'zh-CN':
-              '节点开始拖拽时触发的事件。;节点开始拖拽时触发的事件。;//参数: \narg1:object 当前拖拽节点的数据信息对象\narg2:event ',
+              '节点开始拖拽时触发的事件。;节点开始拖拽时触发的事件。;//参数: \narg1:object 当前拖拽节点的数据信息对象\narg2:event',
             'en-US':
               'Event triggered when a node starts to be dragged. ;Event triggered when a node starts to be dragged. ; / / Parameters:\narg1:object Data information object of the current node \narg2:event'
           },
@@ -339,7 +348,7 @@ export default {
             'zh-CN':
               '拖拽进入其他节点时触发的事件;拖拽进入其他节点时触发的事件;//参数\narg1:object 当前拖拽节点的数据信息对象\narg2: object 当前点击节点拖拽后位置的节点数据信息对象',
             'en-US':
-              'This event is triggered when a user drags a node to another node. Event triggered when a user drags a node to another node. / / Parameter \narg1: object Data information object of the current node \narg2: object Data information object of the current node after the node is dragged.'
+              'This event is triggered when a user drags a node to another node. Event triggered when a user drags a node to another node. / / Parameter \narg1: object Data information object of the current node \narg2: object Data information object of the current node after the node is dragged'
           },
           'demoId': 'drag-events'
         },
@@ -361,7 +370,7 @@ export default {
           'defaultValue': '',
           'desc': {
             'zh-CN':
-              '在拖拽节点时触发的事件（类似浏览器的 mouseover 事件）;在拖拽节点时触发的事件（类似浏览器的 mouseover 事件）;//参数\narg1:object 当前拖拽节点的数据信息对象\narg2:object 当前拖拽节点拖拽时节点的数据信息对象\n arg3:event ',
+              '在拖拽节点时触发的事件（类似浏览器的 mouseover 事件）;在拖拽节点时触发的事件（类似浏览器的 mouseover 事件）;//参数\narg1:object 当前拖拽节点的数据信息对象\narg2:object 当前拖拽节点拖拽时节点的数据信息对象\n arg3:event',
             'en-US':
               'Event triggered when a node is dragged (similar to the mouseover event of the browser); Event triggered when a node is dragged (similar to the mouseover event of the browser) / / Parameter \narg1:object Data information object of the current dragged node \narg2:object Data information object of the current dragged node \n arg3:event'
           },
@@ -373,7 +382,7 @@ export default {
           'defaultValue': '',
           'desc': {
             'zh-CN':
-              "拖拽结束时（r可能未成功）触发的事件;拖拽成功完成时触发的事件;//参数\narg1: object当前拖拽节点的数据信息对象\narg2: object当前点击节点拖拽后位置的节点数据信息对象\narg3: 拖拽的类型，如：'inner'\narg4:event ",
+              "拖拽结束时（r可能未成功）触发的事件;拖拽成功完成时触发的事件;//参数\narg1: object当前拖拽节点的数据信息对象\narg2: object当前点击节点拖拽后位置的节点数据信息对象\narg3: 拖拽的类型，如：'inner'\narg4:event",
             'en-US':
               "Event triggered when dragging ends (r may not succeed). Event triggered when the drag is successfully completed; / / Parameter \narg1: object Data information object of the current node\narg2: object Data information object of the current node after the node is dragged\narg3: Drag type, for example,'inner'\narg4:event"
           },
@@ -385,7 +394,7 @@ export default {
           'defaultValue': '',
           'desc': {
             'zh-CN':
-              '拖放节点后的事件。开启 draggable 属性为 true 有效。;拖放节点后的事件。开启 draggable 属性为 true 有效。;//参数\narg1:object 当前拖拽节点的数据信息对象\n arg2:object 当前点击节点拖拽后的位置节点的数据信息对象\narg3: 拖拽的类型\narg4:event ',
+              '拖放节点后的事件。开启 draggable 属性为 true 有效。;拖放节点后的事件。开启 draggable 属性为 true 有效。;//参数\narg1:object 当前拖拽节点的数据信息对象\n arg2:object 当前点击节点拖拽后的位置节点的数据信息对象\narg3: 拖拽的类型\narg4:event',
             'en-US':
               'Indicates the event after a node is dragged and dropped. This parameter is valid when the draggable attribute is set to true. ; Events after a node is dragged and dropped. This parameter is valid when the draggable attribute is set to true. ; / / Parameter \narg1:object Data information object of the current dragged node \n arg2:object Data information object of the current clicked node after the dragged node \narg3:Drag type \narg4:event'
           },

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

package/demos/pc/app/tooltip/content.spec.js

@@ -4,9 +4,23 @@ test('测试插槽', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('tooltip#content')
 
-  const button2 = page.getByRole('button', { name: '校验错误' })
-  const tooltip2 = page.getByText('该网段不可用！可用网段：163')
+  const button1 = page.getByRole('button', { name: '鼠标悬浮到这里' }).nth(0)
+  const tooltip1 = page.getByText('这是提示内容')
+  const button2 = page.getByRole('button', { name: '鼠标悬浮到这里' }).nth(1)
+  const tooltip2 = page.getByText('1. 提示内容')
+  const button3 = page.getByRole('button', { name: '校验错误' })
+  const tooltip3 = page.getByText('该网段不可用')
+
+  await page.waitForTimeout(10)
+  await button1.hover()
+  await expect(tooltip1).toBeVisible()
+  await page.waitForTimeout(10)
 
   await button2.hover()
   await expect(tooltip2).toBeVisible()
+  await page.waitForTimeout(10)
+
+  await button3.hover()
+  await expect(tooltip3).toBeVisible()
+  await page.waitForTimeout(10)
 })

package/demos/pc/app/tooltip/control.spec.js

@@ -10,12 +10,30 @@ test('测试手动控制tooltip', async ({ page }) => {
   const disableSwitch = preview.locator('.tiny-switch').nth(2)
 
   const pop1 = page.getByText('智能提示的提示内容')
+  const pop2 = page.getByText('手动控制模式的提示内容')
+  const pop3 = page.getByText('禁用的提示内容')
 
+  // 测试visible
   await preview.getByText('内容不超长').hover()
   await expect(pop1).toBeVisible()
-  await page.waitForTimeout(50)
+  await page.waitForTimeout(20)
 
   await visibleSwitch.click()
   await preview.getByText('内容不超长').hover()
   await expect(pop1).toBeHidden()
+
+  await page.waitForTimeout(20)
+
+  // 测试manual
+  await expect(pop2).toBeHidden()
+  await manualSwitch.click()
+  await expect(pop2).toBeVisible()
+
+  await page.waitForTimeout(20)
+
+  // 测试禁用
+  await preview.getByText('我的内容很长很长').nth(2).hover()
+  await expect(pop3).toBeVisible()
+  await disableSwitch.click()
+  await expect(pop3).toBeHidden()
 })

package/demos/pc/app/tooltip/custom-popper.spec.js

@@ -2,12 +2,41 @@ import { test, expect } from '@playwright/test'
 
 test('测试是否显示箭头', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('tooltip#visible-arrow')
+  await page.goto('tooltip#custom-popper')
+
+  const preview = page.locator('.pc-demo-container')
+  const button = preview.getByRole('button', { name: '鼠标悬浮在这里' })
+  const tip = page.getByText('我是提示内容')
+  const arrowSwitch = preview.locator('.tiny-switch').nth(0)
+  const enterableSwitch = preview.locator('.tiny-switch').nth(1)
 
-  const button = page.getByRole('button', { name: '不显示 Tooltip 箭头' })
-  const tip = page.getByRole('tooltip', { name: '不显示 Tooltip 箭头', includeHidden: true })
   const arrow = tip.locator('div.popper__arrow')
 
+  // 测试小箭头
+  await page.waitForTimeout(20)
+  await button.hover()
+  await page.waitForTimeout(20)
+  await expect(arrow).toHaveCount(1)
+  await page.waitForTimeout(20)
+  await arrowSwitch.click()
+  await page.waitForTimeout(20)
   await button.hover()
   await expect(arrow).toHaveCount(0)
+  await page.waitForTimeout(20)
+
+  // 测试可进入
+  await tip.hover()
+  await page.waitForTimeout(20)
+  await expect(tip).toBeVisible()
+
+  await enterableSwitch.click()
+  await page.waitForTimeout(20)
+
+  await button.hover()
+  await tip.hover()
+  await page.waitForTimeout(20)
+  await expect(tip).toBeHidden()
+
+  // 测试字体
+  await expect(tip).toHaveCSS('font-size', '20px')
 })

package/demos/pc/app/tooltip/delay.spec.js

@@ -6,9 +6,31 @@ test('测试延迟显示隐藏', async ({ page }) => {
 
   const button1 = page.getByRole('button', { name: '延迟 2s 出现' })
   const tip1 = page.getByRole('tooltip', { name: '延迟 2000ms 出现' })
+  const button2 = page.getByRole('button', { name: '延迟 2s 关闭' })
+  const tip2 = page.getByRole('tooltip', { name: '延迟 2000ms 关闭' })
+  const button3 = page.getByRole('button', { name: '2s 后自动隐藏' })
+  const tip3 = page.getByRole('tooltip', { name: '2000ms后自动隐藏' })
+
   // 延迟出现
-  await page.waitForTimeout(100)
   await button1.hover()
   await page.waitForTimeout(100)
   await expect(tip1).toBeHidden()
+  await page.mouse.move(370, 320) // button1 上方
+  await page.waitForTimeout(2010)
+  await expect(tip1).toBeVisible()
+
+  // 延迟关闭
+  await page.mouse.move(500, 320) // button2 上方
+  await page.waitForTimeout(10)
+  await expect(tip2).toBeVisible()
+  await page.mouse.move(0, 0)
+  await page.waitForTimeout(2010)
+  await expect(tip2).toBeHidden()
+
+  // 自动隐藏
+  await page.mouse.move(620, 320) // button3 上方
+  await page.waitForTimeout(10)
+  await expect(tip3).toBeVisible()
+  await page.waitForTimeout(2010)
+  await expect(tip2).toBeHidden()
 })

package/demos/pc/app/tooltip/offset.spec.js

@@ -5,5 +5,28 @@ test('测试偏移量', async ({ page }) => {
   await page.goto('tooltip#offset')
 
   const tip = page.getByRole('tooltip', { name: '出现位置的偏移量' })
+  const arrow = tip.locator('.popper__arrow')
+
   await expect(tip).toBeVisible()
+
+  // 计算3个位置
+  const middle = await arrow.boundingBox()
+
+  await page.dragAndDrop('.tiny-slider__handle', '.pc-demo-container', {
+    sourcePosition: { x: 3, y: 3 },
+    targetPosition: { x: 0, y: 0 }
+  })
+  await page.waitForTimeout(10)
+  const left = await arrow.boundingBox()
+
+  await page.dragAndDrop('.tiny-slider__handle', '.pc-demo-container', {
+    sourcePosition: { x: 3, y: 3 },
+    targetPosition: { x: 600, y: 0 }
+  })
+  await page.waitForTimeout(10)
+  const right = await arrow.boundingBox()
+
+  // 测试3个位置
+  expect(left.x < middle.x)
+  expect(middle.x < right.x)
 })

package/demos/pc/app/tooltip/popper-options.spec.js

@@ -5,8 +5,11 @@ test('测试自定义popper', async ({ page }) => {
   await page.goto('tooltip#popper-options')
 
   const button = page.getByRole('button', { name: '鼠标悬浮到这里' })
-  const tooltip = page.getByRole('tooltip', { name: '提示内容' })
+  const tooltip = page.getByRole('tooltip', { name: '提示内容', includeHidden: true })
 
   await button.hover()
   await expect(tooltip).toBeVisible()
+
+  await page.mouse.move(0, 0)
+  await expect(tooltip).toHaveCount(0)
 })

package/demos/pc/app/tooltip/theme.spec.js

@@ -3,6 +3,7 @@ import { test, expect } from '@playwright/test'
 test('测试tooltip主题', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('tooltip#theme')
+  await page.waitForTimeout(20)
 
   await page.getByRole('button', { name: 'Dark' }).hover()
   await expect(page.getByRole('tooltip', { name: 'dark 提示文字' })).toHaveClass(/is-dark/)
@@ -24,6 +25,4 @@ test('测试tooltip主题', async ({ page }) => {
 
   await page.getByRole('button', { name: 'success' }).hover()
   await expect(page.getByRole('tooltip', { name: 'success 提示文字' })).toHaveClass(/is-success/)
-
-  await page.waitForTimeout(300)
 })

package/demos/pc/app/tooltip/transition.spec.js

@@ -10,6 +10,7 @@ test('测试自定义动画显示正常', async ({ page }) => {
   // 悬浮
   await button.hover()
   await expect(tooltip).toBeVisible()
+  await expect(tooltip).toHaveClass(/custom-transition-enter-to/)
 
   // 离开
   await page.mouse.move(0, 0)