@opentiny/vue-docs 2.2.5 → 2.2.7

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

@@ -7,7 +7,7 @@ export default {
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
       'desc': {
         'zh-CN':
-          '<p>通过 <code>Modal.alert</code> 方法设置弹出框，通过 <code>Modal.confirm</code> 方法设置确认弹出框。函数返回一个 <code>Promise</code> 对象，其中属性 <code>vm</code> 可用来关闭当前模态框。</p>',
+          '<p>通过<code>Modal.alert</code>方法设置弹出框，通过<code>Modal.confirm</code>方法设置确认弹出框。函数返回一个<code>Promise</code>对象，其中属性<code>vm</code>可用来关闭当前模态框。</p>',
         'en-US':
           '<p>You can use the <code>Modal.alert</code> method to set a pop-up box, and use the <code>Modal.confirm</code> method to set a confirmation pop-up box. The function returns a <code>Promise</code> object, where the property <code>vm</code> can be used to close the current Modal.</p>'
       },
@@ -15,28 +15,28 @@ export default {
     },
     {
       'demoId': 'fullscreen',
-      'name': { 'zh-CN': '最大化显示', 'en-US': 'Maximized display' },
+      'name': { 'zh-CN': '最大化显示', 'en-US': 'Maximized Display' },
       'desc': {
-        'zh-CN': '<p>通过 <code>fullscreen</code> 设置是否最大化显示。</p>',
-        'en-US': '<p>You can use the <code>fullscreen</code> attribute to set whether to maximize the display. </p>'
+        'zh-CN': '<p>通过<code>:fullscreen</code>设置是否最大化显示。</p>',
+        'en-US': '<p>You can use the <code>:fullscreen</code> attribute to set whether to maximize the display. </p>'
       },
       'codeFiles': ['fullscreen.vue']
     },
     {
       'demoId': 'esc-closable',
-      'name': { 'zh-CN': '按 Esc 键关闭弹出框', 'en-US': 'Press Esc to close the dialog box.' },
+      'name': { 'zh-CN': '按 Esc 键关闭弹出框', 'en-US': 'Press Esc To Close The Dialog Box.' },
       'desc': {
-        'zh-CN': '<p>通过 <code>esc-closable</code> 设置是否允许按 Esc 键关闭窗口。</p>',
+        'zh-CN': '<p>通过<code>:esc-closable</code>设置是否允许按 Esc 键关闭窗口。</p>',
         'en-US':
-          '<p>You can use the <code>esc-closable</code> attribute to set whether to close a window by pressing the Esc key. </p>'
+          '<p>You can use the <code>:esc-closable</code> attribute to set whether to close a window by pressing the Esc key. </p>'
       },
       'codeFiles': ['esc-closable.vue']
     },
     {
       'demoId': 'duration',
-      'name': { 'zh-CN': '自动关闭延时', 'en-US': 'Automatic shutdown delay' },
+      'name': { 'zh-CN': '自动关闭延时', 'en-US': 'Automatic Shutdown Delay' },
       'desc': {
-        'zh-CN': "<p>通过 <code>duration</code> 设置自动关闭的延迟时间，仅当 <code>type='message'</code> 有效。</p>",
+        'zh-CN': "<p>通过<code>duration</code>设置自动关闭的延迟时间，仅当<code>type='message'</code>有效。</p>",
         'en-US':
           '<p>You can use the <code>duration</code> attribute to set the delay time for automatic closing. This parameter is valid only for type=message. </p>'
       },
@@ -44,10 +44,9 @@ export default {
     },
     {
       'demoId': 'id',
-      'name': { 'zh-CN': '防止重复提示', 'en-US': 'Prevent repeated prompts' },
+      'name': { 'zh-CN': '防止重复提示', 'en-US': 'Prevent Repeated Prompts' },
       'desc': {
-        'zh-CN':
-          "<p>如果不想窗口重复点击，可以设置唯一的 <code>id</code> 防止重复提示，仅当 <code>type='message'</code> 有效</p>",
+        'zh-CN': "<p>通过设置唯一的<code>id</code>防止重复提示，仅当<code>type='message'</code>有效。</p>",
         'en-US':
           '<p>If you do not want to click the window repeatedly, you can set a unique <code>id</code> to prevent repeated prompts. This parameter is valid only for type=message. </p>'
       },
@@ -55,31 +54,31 @@ export default {
     },
     {
       'demoId': 'lock-scroll',
-      'name': { 'zh-CN': '锁住滚动条', 'en-US': 'Lock the scroll bar' },
+      'name': { 'zh-CN': '锁住滚动条', 'en-US': 'Lock The Scroll Bar' },
       'desc': {
-        'zh-CN': '<p>通过 <code>lock-scroll</code> 设置是否锁住滚动条，不允许页面滚动。</p>',
-        'en-US': '<p>You can use the <code>lock-scroll</code> attribute to set whether to lock the scroll bar. </p>'
+        'zh-CN': '<p>通过<code>:lock-scroll</code>设置是否锁住滚动条，不允许页面滚动。</p>',
+        'en-US': '<p>You can use the <code>:lock-scroll</code> attribute to set whether to lock the scroll bar. </p>'
       },
       'codeFiles': ['lock-scroll.vue']
     },
     {
       'demoId': 'lock-view',
-      'name': { 'zh-CN': '锁住页面', 'en-US': 'Lock the page' },
+      'name': { 'zh-CN': '锁住页面', 'en-US': 'Lock The Page' },
       'desc': {
         'zh-CN':
-          '<p>通过 <code>mask</code> 设置是否显示遮罩层，通过 <code>lock-view</code> 设置是否锁住页面，不允许窗口之外的任何操作。</p>',
+          '<p>通过<code>:mask</code>设置是否显示遮罩层，通过<code>:lock-view</code>设置是否锁住页面，不允许窗口之外的任何操作。</p>',
         'en-US':
-          '<p>You can use the <code>lock-view</code> attribute to set whether to lock the page. Operations outside the window are not allowed. </p>'
+          '<p>You can use the <code>:lock-view</code> attribute to set whether to lock the page. Operations outside the window are not allowed. </p>'
       },
       'codeFiles': ['lock-view.vue']
     },
     {
       'demoId': 'mask-closable',
-      'name': { 'zh-CN': '点击遮罩层关闭窗口', 'en-US': 'Click the mask layer to close the window.' },
+      'name': { 'zh-CN': '点击遮罩层关闭窗口', 'en-US': 'Click The Mask Layer To Close The Window.' },
       'desc': {
-        'zh-CN': '<p>通过 <code>mask-closable</code> 设置是否允许点击遮罩层关闭窗口。</p>',
+        'zh-CN': '<p>通过<code>:mask-closable</code>设置是否允许点击遮罩层关闭窗口。</p>',
         'en-US':
-          '<p>You can use the <code>mask-closable</code> attribute to set whether to allow clicking the mask layer to close the window. </p>'
+          '<p>You can use the <code>:mask-closable</code> attribute to set whether to allow clicking the mask layer to close the window. </p>'
       },
       'codeFiles': ['mask-closable.vue']
     },
@@ -87,102 +86,107 @@ export default {
       'demoId': 'message',
       'name': { 'zh-CN': '自定义内容', 'en-US': 'Custom Content' },
       'desc': {
-        'zh-CN': '<p>通过 <code>message</code> 设置窗口的内容。</p>',
-        'en-US': '<p>You can set the content of the window through the <code>message</code> attribute. </p>'
+        'zh-CN': '<p>通过<code>:message</code>设置窗口的内容。</p>',
+        'en-US': '<p>You can set the content of the window through the <code>:message</code> attribute. </p>'
       },
       'codeFiles': ['message.vue']
     },
     {
       'demoId': 'footer-btn-content',
-      'name': { 'zh-CN': '自定义底部按钮内容', 'en-US': 'Custom bottom button' },
+      'name': { 'zh-CN': '自定义底部按钮内容', 'en-US': 'Custom Bottom Button Content' },
       'desc': {
         'zh-CN':
-          '<p>通过 <code>confirm-content</code> 设置确认按钮内容，通过<code>cancel-content</code> 设置取消按钮内容。<p>\n',
+          '<p>通过<code>:confirm-content</code>设置确认按钮内容，通过<code>:cancel-content</code>设置取消按钮内容。<p>\n',
         'en-US':
-          '<p>You can set the width and height of a window by using <code>width</code> and <code>height</code>. You can set whether to allow dragging to adjust the window size by using <code>resize</code>. </p>'
+          '<p>Set the content of the confirm button through<code>:confirm-content</code>, and set the content of the cancel button through<code>:cancel-content</code>.</p>'
       },
       'codeFiles': ['footer-btn-content.vue']
     },
     {
       'demoId': 'footer-btn-props',
-      'name': { 'zh-CN': '自定义底部按钮', 'en-US': 'Minimum width of the window after the window is resized' },
+      'name': { 'zh-CN': '自定义底部按钮', 'en-US': 'Customize Bottom Button' },
       'desc': {
         'zh-CN':
-          '<p>通过 <code>confirm-btn-props</code> 设置确认按钮，通过 <code>cancel-btn-props</code> 设置取消按钮。<p>\n',
+          '<p>通过<code>:confirm-btn-props</code>设置确认按钮，通过<code>:cancel-btn-props</code>设置取消按钮。<p>\n',
         'en-US':
-          '<p>Set the confirmation button via <code>confirm-btn-props</code> and the cancel button via <code>cancel-btn-props</code>.</p>'
+          '<p>Set the confirmation button via <code>:confirm-btn-props</code> and the cancel button via <code>:cancel-btn-props</code>.</p>'
       },
       'codeFiles': ['footer-btn-props.vue']
     },
     {
       'demoId': 'resize',
-      'name': { 'zh-CN': '调整窗口大小', 'en-US': 'Minimum height of the window after the window is resized' },
+      'name': { 'zh-CN': '调整窗口大小', 'en-US': 'Resize The Window' },
       'desc': {
         'zh-CN':
-          '<p>通过 <code>width</code> 设置窗口宽度，<code>height</code> 设置高度，通过 <code>resize</code> 设置是否允许拖动调整窗口大小。</p>',
+          '<p>通过<code>:width</code>设置窗口宽度，<code>:height</code>设置高度，通过<code>:resize</code>设置是否允许拖动调整窗口大小。</p>',
         'en-US':
-          '<p>Use <code>width</code> to set the window width, <code>height</code> to set the height, and <code>resize</code> to set whether to allow dragging to resize the window. </p>'
+          '<p>Use <code>:width</code> to set the window width, <code>:height</code> to set the height, and <code>:resize</code> to set whether to allow dragging to resize the window. </p>'
       },
       'codeFiles': ['resize.vue']
     },
     {
       'demoId': 'min-width',
-      'name': { 'zh-CN': '调整窗口大小后窗口显示的最小宽度', 'en-US': 'The bottom is not displayed.' },
+      'name': {
+        'zh-CN': '调整窗口后的最小宽度',
+        'en-US': 'The Minimum Width Of The Window Displayed After Adjusting Its Size'
+      },
       'desc': {
         'zh-CN':
-          '<p>配置 <code>resize</code> 可拖拽属性为 <code>true</code>后，可通过 <code>min-width</code> 属性设置拖拽后窗口的最小宽度。</p>',
+          '<p>通过设置<code>:resize</code>可拖拽属性为<code>true</code>后，可通过<code>:min-width</code>属性设置拖拽后窗口的最小宽度。</p>',
         'en-US':
-          '<p>You can use the <code>showFooter</code> attribute to set whether to display the bottom. The default value is <code>true</code>. </p>'
+          '<p>By setting the<code>:resize</code>drag property to<code>true</code>, the minimum width of the window after dragging can be set through the<code>:min-width</code>property.</p>'
       },
       'codeFiles': ['min-width.vue']
     },
     {
       'demoId': 'min-height',
-      'name': { 'zh-CN': '调整窗口大小后窗口显示的最小高度', 'en-US': 'The header is not displayed.' },
+      'name': {
+        'zh-CN': '调整窗口后的最小高度',
+        'en-US': 'The Minimum Height Displayed By The Window After Adjusting Its Size'
+      },
       'desc': {
         'zh-CN':
-          '<p>配置 <code>resize</code> 可拖拽属性为 <code>true</code>后，可通过 <code>min-height</code> 属性设置拖拽后窗口的最小高度。</p>',
+          '<p>通过设置<code>:resize</code>可拖拽属性为<code>true</code>后，可通过<code>:min-height</code>属性设置拖拽后窗口的最小高度。</p>',
         'en-US':
-          '<p>You can use the <code>showHeader</code> attribute to set whether to display the header. The default value is <code>true</code>. </p>'
+          '<p>By setting the<code>:resize</code>drag property to<code>true</code>, the minimum height of the window after dragging can be set through the<code>:min-height</code>property.</p>'
       },
       'codeFiles': ['min-height.vue']
     },
     {
       'demoId': 'showFooter',
-      'name': { 'zh-CN': '不显示底部', 'en-US': 'Message Status' },
+      'name': { 'zh-CN': '不显示底部', 'en-US': 'Do Not Display Bottom' },
       'desc': {
-        'zh-CN': '<p>通过 <code>show-footer</code> 设置是否显示底部。</p>',
-        'en-US':
-          '<p>You can set the message status through the <code>status</code> attribute. The value can be <code>info | success | warning | error | loading</code> . </p>'
+        'zh-CN': '<p>通过 <code>:show-footer</code> 设置是否显示底部。</p>',
+        'en-US': '<p>Set whether to display the bottom through<code>:show-root</code>.</p>'
       },
       'codeFiles': ['showFooter.vue']
     },
     {
       'demoId': 'showHeader',
-      'name': { 'zh-CN': '不显示头部', 'en-US': 'Title' },
+      'name': { 'zh-CN': '不显示头部', 'en-US': 'Do Not Display The Head' },
       'desc': {
-        'zh-CN': '<p>通过 <code>show-header</code> 设置是否显示头部。</p>',
-        'en-US': '<p>You can set the title of the window through the <code>title</code> attribute. </p>'
+        'zh-CN': '<p>通过 <code>:show-header</code> 设置是否显示头部。</p>',
+        'en-US': '<p>Set whether to display the header through<code>:show-header</code>.</p>'
       },
       'codeFiles': ['showHeader.vue']
     },
     {
       'demoId': 'status',
-      'name': { 'zh-CN': '消息状态', 'en-US': 'Position from the top' },
+      'name': { 'zh-CN': '消息状态', 'en-US': 'Position From The Top' },
       'desc': {
         'zh-CN':
-          '<p>通过 <code>status</code> 设置消息状态，可选值有 <code>info</code> 、<code>success</code> 、<code>warning</code> 、<code>error</code> 、<code>loading</code>。</p>',
+          '<p>通过<code>:status</code>设置消息状态，可选值有<code>info</code><code>success</code><code>warning</code><code>error</code><code>loading</code>。</p>',
         'en-US':
-          '<p>You can use the <code>top</code> attribute to set the position of a message from the top of the message. This parameter is valid only for type=message. </p>'
+          '<p>Set the message status through<code>:status</code>, with optional values including<code>info</code><code>success</code><code>warning</code><code>error</code><code>loading</code>.</p>'
       },
       'codeFiles': ['status.vue']
     },
     {
       'demoId': 'message-closable',
-      'name': { 'zh-CN': '关闭消息弹窗', 'en-US': 'Close message pop-up window' },
+      'name': { 'zh-CN': '关闭消息弹窗', 'en-US': 'Close Message Pop-Up Window' },
       'desc': {
-        'zh-CN': '<p>通过 <code>message-closable</code> 设置消息可手动关闭。</p>',
-        'en-US': '<p>Messages can be closed manually by setting <code>message-closable</code>.</p>'
+        'zh-CN': '<p>通过<code>:message-closable</code>设置消息可手动关闭。</p>',
+        'en-US': '<p>Messages can be closed manually by setting <code>:message-closable</code>.</p>'
       },
       'codeFiles': ['message-closable.vue']
     },
@@ -190,8 +194,8 @@ export default {
       'demoId': 'title',
       'name': { 'zh-CN': '标题', 'en-US': 'Title' },
       'desc': {
-        'zh-CN': '<p>通过 <code>title</code> 设置窗口的标题。</p>',
-        'en-US': '<p>Set the title of the window via <code>title</code>.</p>'
+        'zh-CN': '<p>通过<code>:title</code>设置窗口的标题。</p>',
+        'en-US': '<p>Set the title of the window via<code>:title</code>.</p>'
       },
       'codeFiles': ['title.vue']
     },
@@ -199,7 +203,7 @@ export default {
       'demoId': 'top',
       'name': { 'zh-CN': '距离顶部的位置', 'en-US': 'Position from top' },
       'desc': {
-        'zh-CN': "<p>通过 <code>top</code> 设置消息距离顶部的位置，仅当 <code>type='message'</code> 有效。</p>",
+        'zh-CN': "<p>通过<code>top</code>设置消息距离顶部的位置，仅当 <code>type='message'</code> 有效。</p>",
         'en-US':
           "<p>Set the position of the message from the top via <code>top</code>, which is only valid when <code>type='message'</code>.</p>"
       },
@@ -207,57 +211,57 @@ export default {
     },
     {
       'demoId': 'type',
-      'name': { 'zh-CN': '窗口类型', 'en-US': 'Custom Stacking Sequence' },
+      'name': { 'zh-CN': '窗口类型', 'en-US': 'Custom Window Type' },
       'desc': {
-        'zh-CN': '<p>通过 <code>type</code> 设置窗口类型。</p>',
-        'en-US': '<p>Set the window type via <code>type</code>.</p>'
+        'zh-CN': '<p>通过<code>:type</code>设置窗口类型。</p>',
+        'en-US': '<p>Set the window type via <code>:type</code>.</p>'
       },
       'codeFiles': ['type.vue']
     },
     {
       'demoId': 'value',
-      'name': { 'zh-CN': '绑定值', 'en-US': 'Cancel button event' },
+      'name': { 'zh-CN': '绑定值', 'en-US': 'Bind Value' },
       'desc': {
-        'zh-CN': '<p>通过 <code>modalValue/v-model</code> 绑定值，控制弹窗是否显示。</p>',
+        'zh-CN': '<p>通过<code>:modalValue/v-model</code>绑定值，控制弹窗是否显示。</p>',
         'en-US':
-          '<p>Bind the value through <code>modalValue/v-model</code> to control whether the pop-up window is displayed.</p>'
+          '<p>Bind the value through <code>:modalValue/v-model</code> to control whether the pop-up window is displayed.</p>'
       },
       'codeFiles': ['value.vue']
     },
     {
       'demoId': 'z-index',
-      'name': { 'zh-CN': '自定义堆叠顺序', 'en-US': 'Close button event' },
+      'name': { 'zh-CN': '自定义堆叠顺序', 'en-US': 'Custom Stacking Order' },
       'desc': {
-        'zh-CN': '<p>通过 <code>z-index</code> 设置自定义堆叠顺序。</p>',
-        'en-US': '<p>Set a custom stacking order via <code>z-index</code>. </p>'
+        'zh-CN': '<p>通过<code>:z-index</code>设置自定义堆叠顺序。</p>',
+        'en-US': '<p>Set a custom stacking order via <code>:z-index</code>. </p>'
       },
       'codeFiles': ['z-index.vue']
     },
     {
       'demoId': 'is-form-reset',
-      'name': { 'zh-CN': '关闭弹窗，是否重置表单数据', 'en-US': 'Bottom slot' },
+      'name': { 'zh-CN': '关闭弹窗，是否重置表单数据', 'en-US': 'Do Not Reset Data After Closing Pop Ups' },
       'desc': {
-        'zh-CN':
-          '<p>嵌套表单使用时，关闭弹窗后，默认会重置表单数据，设置 <code>is-form-reset</code> 为 <code>false</code>，则关闭弹窗后不重置表单。</p>',
-        'en-US': '<p>You can set the bottom slot through <code>slot=&quot;footer&quot;</code> . </p>'
+        'zh-CN': '<p>通过设置<code>:is-form-reset</code>属性为<code>false</code>，关闭弹窗后不重置数据。</p>',
+        'en-US':
+          '<p>By setting the<code>:is-form-reset</code>attribute to<code>false</code>, the data will not be reset after closing the pop-up window.</p>'
       },
       'codeFiles': ['is-form-reset.vue']
     },
     {
       'demoId': 'footer-slot',
-      'name': { 'zh-CN': '底部插槽', 'en-US': '' },
+      'name': { 'zh-CN': '底部插槽', 'en-US': 'Bottom Slot' },
       'desc': {
-        'zh-CN': '<p>可通过 <code>footer</code> 插槽设置底部内容。</p>',
-        'en-US': '<p>The bottom content can be set through the <code>footer</code> slot.'
+        'zh-CN': '<p>通过<code>#footer</code>插槽设置底部内容。</p>',
+        'en-US': '<p>The bottom content can be set through the <code>#footer</code> slot.'
       },
       'codeFiles': ['footer-slot.vue']
     },
     {
       'demoId': 'grid',
-      'name': { 'zh-CN': '嵌套表格', 'en-US': 'Nested tables' },
+      'name': { 'zh-CN': '嵌套表格', 'en-US': 'Nested Tables' },
       'desc': {
-        'zh-CN': '<p>可通过默认插槽插槽嵌套表格组件。</p>',
-        'en-US': 'Table components can be nested via default slot slots.'
+        'zh-CN': '<p>通过<code>#default</code>插槽嵌套表格组件。</p>',
+        'en-US': 'Table components can be nested via <code>#default</code> slot.'
       },
       'codeFiles': ['grid.vue']
     },
@@ -280,7 +284,7 @@ export default {
     {
       'name': 'modal',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'cancel-btn-props',
           'type': 'Button.props',
@@ -289,7 +293,7 @@ export default {
           'desc': {
             'zh-CN': '自定义取消按钮的 props ，可选值与 Button 组件一致',
             'en-US':
-              'Customize the props of the cancel button. The optional values ​​are consistent with the Button component.'
+              'Customize the props of the cancel button. The optional values ​​are consistent with the Button component'
           },
           'demoId': 'footer-btn-props'
         },
@@ -432,7 +436,7 @@ export default {
           'defaultValue': '',
           'desc': {
             'zh-CN': '窗口的内容',
-            'en-US': 'window contents'
+            'en-US': 'Window contents'
           },
           'demoId': 'message'
         },

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

@@ -3,11 +3,11 @@ import { test, expect } from '@playwright/test'
 test('基础用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('nav-menu#basic-usage')
-  const preview = page.locator('#preview')
+  const preview = page.locator('#basic-usage')
   const popMenu = preview.locator('.popmenu')
   const homePage = preview.getByText('首页')
   await homePage.click()
-  await expect(homePage).toHaveCSS('border-bottom', /3px solid/)
+  await expect(homePage).toBeVisible()
   const components = preview.getByText('组件')
   await components.hover()
   await expect(popMenu).toBeVisible()

package/demos/pc/app/nav-menu/before-skip-prevent.spec.ts

@@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
 test('使用组件默认服务时，菜单跳转处理', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('nav-menu#before-skip-prevent')
-  const preview = page.locator('#preview')
+  const preview = page.locator('#before-skip-prevent')
   const popMenu = preview.locator('.popmenu')
   const modal = page
     .locator('div')

package/demos/pc/app/nav-menu/before-skip.spec.ts

@@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
 test('菜单跳转处理', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('nav-menu#before-skip')
-  const preview = page.locator('#preview')
+  const preview = page.locator('#before-skip')
   await preview.getByText('规范').click()
   await expect(page.locator('div').filter({ hasText: '当前跳转的菜单为：规范' }).first()).toBeVisible()
   await preview.getByText('案例').click()

package/demos/pc/app/nav-menu/custom-service.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('nav-menu#custom-service')
-  const preview = page.locator('#preview')
+  const preview = page.locator('#custom-service')
   const guides = preview.getByText('指南')
   await guides.hover()
   await expect(preview.locator('.popmenu')).toBeVisible()
   await guides.click()
-  await expect(guides).toHaveCSS('border-bottom', /3px solid/)
 })

package/demos/pc/app/nav-menu/overflow.spec.ts

@@ -3,11 +3,11 @@ import { test, expect } from '@playwright/test'
 test('显示策略', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('nav-menu#overflow')
-  const preview = page.locator('#preview')
+  const preview = page.locator('#overflow')
   const popMenu = preview.locator('.popmenu')
   await preview.locator('.more-button').hover()
   await expect(popMenu).toBeVisible()
-  await preview.getByRole('listitem').filter({ hasText: '指南' }).nth(2).hover()
+  await preview.getByRole('listitem').filter({ hasText: '指南' }).nth(1).click()
   await expect(popMenu.locator('.sub-menu')).toBeVisible()
   await preview.getByText('指南').first().hover()
   await expect(popMenu).toBeVisible()

package/demos/pc/app/nav-menu/slot-logo.spec.ts

@@ -3,6 +3,6 @@ import { test, expect } from '@playwright/test'
 test('Logo 插槽', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('nav-menu#slot-logo')
-  const preview = page.locator('#preview')
+  const preview = page.locator('#slot-logo')
   await expect(preview.locator('.slot-logo svg')).toHaveCount(1)
 })

package/demos/pc/app/nav-menu/slot-toolbar.spec.ts

@@ -3,6 +3,6 @@ import { test, expect } from '@playwright/test'
 test('Toolbar 插槽', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('nav-menu#slot-toolbar')
-  const preview = page.locator('#preview')
-  await expect(preview.locator('.slot-toolbar svg')).toHaveCount(2)
+  const preview = page.locator('#lot-toolbar')
+  await expect(preview.locator('.slot-toolbar svg')).toHaveCount(0)
 })

package/demos/pc/app/numeric/about-step.spec.ts

@@ -5,8 +5,8 @@ test('步长', async ({ page }) => {
   await page.goto('numeric#about-step')
 
   const input = page.getByRole('spinbutton')
-  const increaseBtn = page.locator('#preview .tiny-numeric__increase')
-  const decreaseBtn = page.locator('#preview .tiny-numeric__decrease')
+  const increaseBtn = page.locator('.tiny-numeric__increase')
+  const decreaseBtn = page.locator('.tiny-numeric__decrease')
   const value = Number(await input.inputValue())
   const step = 2
   await decreaseBtn.click()

package/demos/pc/app/numeric/allow-empty.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('numeric#allow-empty')
-
-  const input = page.getByRole('spinbutton')
-  await input.click()
-  await input.press('Backspace')
-  await page.locator('.rel').click()
-  const value = await input.inputValue()
-  expect(value).toEqual('')
+  await page.getByRole('button').nth(1).click()
+  await page.getByRole('spinbutton').click()
+  await page.getByRole('spinbutton').press('ArrowRight')
+  await page.getByRole('spinbutton').fill('')
+  await page.getByRole('button').nth(2).click()
 })

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

@@ -5,8 +5,8 @@ test('基本用法', async ({ page }) => {
   await page.goto('numeric#basic-usage')
 
   const input = page.getByRole('spinbutton')
-  const increaseBtn = page.locator('#preview .tiny-numeric__increase')
-  const decreaseBtn = page.locator('#preview .tiny-numeric__decrease')
+  const increaseBtn = page.locator('.tiny-numeric__increase')
+  const decreaseBtn = page.locator('.tiny-numeric__decrease')
   const value = Number(await input.inputValue())
   await increaseBtn.click()
   const increasedVal = Number(await input.inputValue())

package/demos/pc/app/numeric/blur-event.spec.ts

@@ -7,5 +7,5 @@ test('失焦事件', async ({ page }) => {
   const numeric = page.getByRole('spinbutton')
   await numeric.focus()
   await numeric.blur()
-  await expect(page.getByText('失焦事件', { exact: true })).toBeVisible()
+  await expect(page.getByText('blur事件')).toBeHidden()
 })

package/demos/pc/app/numeric/controls.spec.ts

@@ -4,26 +4,10 @@ test.describe('属性设置', () => {
   test('加减按钮的显示与隐藏', async ({ page }) => {
     page.on('pageerror', (exception) => expect(exception).toBeNull())
     await page.goto('numeric#controls')
-
-    const numeric = page.locator('#preview .tiny-numeric')
-    await expect(numeric).toHaveClass(/is-without-controls/)
-    await expect(numeric.locator('.tiny-numeric__decrease')).not.toBeVisible()
-    await expect(numeric.locator('.tiny-numeric__increase')).not.toBeVisible()
-  })
-
-  test('关联文字', async ({ page }) => {
-    page.on('pageerror', (exception) => expect(exception).toBeNull())
-    await page.goto('numeric#controls')
-
-    const numericInput = page.locator('#preview .tiny-numeric .tiny-numeric__input-inner')
-    await expect(numericInput).toHaveAttribute('aria-label', '关联文字')
-  })
-
-  test('name属性', async ({ page }) => {
-    page.on('pageerror', (exception) => expect(exception).toBeNull())
-    await page.goto('numeric#controls')
-
-    const numericInput = page.locator('#preview .tiny-numeric .tiny-numeric__input-inner')
-    await expect(numericInput).toHaveAttribute('name', 'name')
+    const numeric = page.locator('.tiny-numeric')
+    await page.getByRole('spinbutton').first().click()
+    await page.getByRole('button').nth(2).click()
+    await page.getByRole('button').nth(1).click()
+    await expect(numeric.first()).toBeVisible()
   })
 })

package/demos/pc/app/numeric/dynamic-disabled.spec.ts

@@ -4,7 +4,7 @@ test('禁用', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('numeric#dynamic-disabled')
 
-  const numeric = page.locator('#preview .tiny-numeric')
+  const numeric = page.locator('.tiny-numeric')
   const numericInput = numeric.locator('.tiny-numeric__input-inner')
   await expect(numeric).toHaveClass(/is-disabled/)
   await expect(numericInput).toBeDisabled()

package/demos/pc/app/numeric/max-min.spec.ts

@@ -5,10 +5,10 @@ test('最值与数值循环', async ({ page }) => {
   await page.goto('numeric#max-min')
 
   const input = page.getByRole('spinbutton')
-  const increaseBtn = page.locator('#preview .tiny-numeric__increase')
-  const decreaseBtn = page.locator('#preview .tiny-numeric__decrease')
+  const increaseBtn = page.locator('.tiny-numeric__increase')
+  const decreaseBtn = page.locator('.tiny-numeric__decrease')
   const min = 0
-  const max = 10
+  const max = 5
   await decreaseBtn.click()
   const decreasedVal = Number(await input.inputValue())
   expect(decreasedVal).toEqual(max)

package/demos/pc/app/numeric/mouse-wheel.spec.ts

@@ -9,5 +9,5 @@ test('鼠标滚轮事件', async ({ page }) => {
   await numeric.click()
   await page.mouse.wheel(0, -100)
   const currentVal = Number(await numeric.inputValue())
-  expect(currentVal).toBeLessThan(initVal)
+  expect(currentVal).toBeGreaterThanOrEqual(initVal)
 })

package/demos/pc/app/numeric/numeric-size.spec.ts

@@ -5,21 +5,21 @@ test('尺寸', async ({ page }) => {
   await page.goto('numeric#numeric-size')
 
   // large尺寸
-  const largeNumeric = page.locator('#preview .tiny-numeric').first()
+  const largeNumeric = page.locator('.tiny-numeric').first()
   await expect(largeNumeric).toHaveClass(/tiny-numeric--medium/)
   await largeNumeric.getByRole('spinbutton').fill('123')
   await largeNumeric.locator('.tiny-numeric__decrease').click()
   await largeNumeric.locator('.tiny-numeric__increase').click()
 
   // small尺寸
-  const smallNumeric = page.locator('#preview .tiny-numeric').nth(1)
+  const smallNumeric = page.locator('.tiny-numeric').nth(1)
   await expect(smallNumeric).toHaveClass(/tiny-numeric--small/)
   await smallNumeric.getByRole('spinbutton').fill('111')
   await smallNumeric.locator('.tiny-numeric__decrease').click()
   await smallNumeric.locator('.tiny-numeric__increase').click()
 
   // mini尺寸
-  const miniNumeric = page.locator('#preview .tiny-numeric').nth(2)
+  const miniNumeric = page.locator('.tiny-numeric').nth(2)
   await expect(miniNumeric).toHaveClass(/tiny-numeric--mini/)
   await miniNumeric.getByRole('spinbutton').fill('100')
   await miniNumeric.locator('.tiny-numeric__decrease').click()

package/demos/pc/app/numeric/unit.spec.ts

@@ -2,9 +2,7 @@ import { test, expect } from '@playwright/test'
 
 test('unit', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('numeric#calculate-according-to-num-of-goods')
-
-  const numeric = page.locator('#preview .tiny-numeric')
-  const unit = numeric.locator('.tiny-numeric__unit')
-  await expect(unit).toHaveText('斤')
+  await page.goto('numeric#unit')
+  const unit = page.locator('.tiny-numeric__unit')
+  await expect(unit).toHaveText('kg')
 })