@opentiny/vue-docs 2.2.4 → 2.2.6

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

@@ -6,7 +6,7 @@ export default {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
       'desc': {
-        'zh-CN': '通过 <code>v-model</code> 属性绑定输入值，',
+        'zh-CN': '通过设置<code>v-model</code>属性绑定输入值。',
         'en-US': 'Bind input value through <code>v-model</code> attribute'
       },
       'codeFiles': ['basic-usage.vue']
@@ -16,9 +16,9 @@ export default {
       'name': { 'zh-CN': '最值与数值循环', 'en-US': 'Extremum and loop' },
       'desc': {
         'zh-CN':
-          '<p>通过 <code>max</code> 属性设置计数器允许的最大值； <code>min</code> 属性设置计数器允许的最小值； <code>circulate</code> 属性设置向上到达最大值后从最小值开始，或反过来。</p>\n',
+          '<p>通过设置<code>:max</code>属性计数器允许的最大值，设置<code>:min</code>属性计数器允许的最小值，设置<code>circulate</code>属性当计数器的数值为最大值，继续计数，是否从最小值开始计数。</p>\n',
         'en-US':
-          '<p>You can set the maximum value allowed by the counter by setting the <code>max</code> attribute, and set the minimum value allowed by the counter by setting the <code>min</code> attribute. Set the <code>circulate</code> property to start from the minimum value after reaching the maximum value up, or vice versa. </p>\n'
+          '<p>By setting the maximum value allowed by the<code>:max</code>attribute counter, setting the minimum value allowed by the<code>:min</code>attribute counter, and setting the<code>cycle</code>attribute, when the counter value reaches the maximum value, continue counting, whether to start counting from the minimum value.</p>\n'
       },
       'codeFiles': ['max-min.vue']
     },
@@ -26,8 +26,9 @@ export default {
       'demoId': 'about-step',
       'name': { 'zh-CN': '步长', 'en-US': 'Step' },
       'desc': {
-        'zh-CN': '<p>通过 <code>step</code> 属性设置计数器的步长。</p>\n',
-        'en-US': '<p>You can set the step of the counter through the <code>step</code> attribute. </p>\n'
+        'zh-CN': '<p>通过设置<code>:step</code>属性为计数器的加减数值。</p>\n',
+        'en-US':
+          '<p>Set the addition and subtraction values of the counter through the<code>:step</code>attribute.</p>\n'
       },
       'codeFiles': ['about-step.vue']
     },
@@ -35,8 +36,8 @@ export default {
       'demoId': 'precision',
       'name': { 'zh-CN': '数值精度', 'en-US': 'Numeric precision' },
       'desc': {
-        'zh-CN': '<p>通过 <code>precision</code> 属性设置计数器的精度值。</p>\n',
-        'en-US': '<p>You can set the precision value of the counter through the precision attribute. </p>\n'
+        'zh-CN': '<p>通过设置<code>:precision</code>属性为计数器的精度值。</p>\n',
+        'en-US': '<p>Set the precision value of the counter through the<code>:precision</code>attribute.</p>\n'
       },
       'codeFiles': ['precision.vue']
     },
@@ -44,8 +45,8 @@ export default {
       'demoId': 'dynamic-disabled',
       'name': { 'zh-CN': '禁用', 'en-US': 'Disabled' },
       'desc': {
-        'zh-CN': '<p>通过 <code>disabled</code> 设置是否禁用计数器。</p>',
-        'en-US': 'Disable the counter by setting disabled.'
+        'zh-CN': '<p>通过设置<code>:disabled</code>是否禁用计数器。</p>',
+        'en-US': 'Disable the counter by setting <code>disabled</code>.'
       },
       'codeFiles': ['dynamic-disabled.vue']
     },
@@ -54,9 +55,9 @@ export default {
       'name': { 'zh-CN': '可清空', 'en-US': 'Clearable' },
       'desc': {
         'zh-CN':
-          '通过 <code>allow-empty</code> 属性设置计数器内容的可清空特性，默认为 <code>false</code>，表示不可清空。',
+          '通过设置<code>:allow-empty</code>属性计数器内容的可清空特性，默认为 <code>false</code>，表示不可清空。',
         'en-US':
-          '<p>You can use the <code>allow-empty</code> property to set the clearability of counter contents. The default value is <code>false</code>, indicating that the data cannot be cleared. </p>\n'
+          '<p>You can use the <code>:allow-empty</code> property to set the clearability of counter contents. The default value is <code>false</code>, indicating that the data cannot be cleared. </p>\n'
       },
       'codeFiles': ['allow-empty.vue']
     },
@@ -65,9 +66,9 @@ export default {
       'name': { 'zh-CN': '尺寸', 'en-US': 'Size' },
       'desc': {
         'zh-CN':
-          '<p>通过 <code>size</code> 属性设置计数器尺寸，可选值有 <code>medium</code> | <code>small</code> | <code>mini</code>。</p>\n',
+          '<p>通过设置<code>:size</code> 属性为计数器尺寸，可选值有<code>medium</code><code>small</code><code>mini</code>。</p>\n',
         'en-US':
-          '<p>You can set the counter size through the <code>size</code> attribute. The value can be <code>medium</code> | <code>small</code> | <code>mini</code>. </p>\n'
+          '<p>You can set the counter size through the<code>:size</code>attribute.The value can be <code>medium</code><code>small</code><code>mini</code>. </p>\n'
       },
       'codeFiles': ['numeric-size.vue']
     },
@@ -76,9 +77,9 @@ export default {
       'name': { 'zh-CN': '加减按钮', 'en-US': 'Control Button' },
       'desc': {
         'zh-CN':
-          '<p>通过 <code>controls</code> 属性设置计数器是否显示加减按钮； <code>controls-position</code> 属性设置加减按钮显示的位置。加减按钮默认分列两侧显示。</p>\n',
+          '<p>通过设置<code>:controls</code> 属性计数器是否显示加减按钮，设置<code>:controls-position</code> 属性加减按钮显示的位置。加减按钮默认分列两侧显示。</p>\n',
         'en-US':
-          '<p>You can set whether the counter has a control button through the <code>controls</code> attribute. </p>\n'
+          '<p>By setting whether the<code>: controls</code>attribute counter displays add/subtract buttons, set the position where the<code>: controls position</code>attribute add/subtract buttons are displayed. The addition and subtraction buttons are displayed on both sides of the column by default.</p>\n'
       },
       'codeFiles': ['controls.vue']
     },
@@ -86,9 +87,9 @@ export default {
       'demoId': 'mouse-wheel',
       'name': { 'zh-CN': '鼠标滚轮滚动改变值', 'en-US': 'Mouse wheel scrolling change value' },
       'desc': {
-        'zh-CN': '<p>通过 <code>mouse-wheel</code> 属性控制鼠标滚动滑轮时是否改变数值。</p>\n',
+        'zh-CN': '<p>通过设置<code>:mouse-wheel</code>属性控制鼠标滚动滑轮时是否改变数值。</p>\n',
         'en-US':
-          '<p>You can use the <code>mouseWheel</code> attribute to control whether the scroll wheel can change the value. </p>\n'
+          '<p>You can use the <code>:mouseWheel</code> attribute to control whether the scroll wheel can change the value. </p>\n'
       },
       'codeFiles': ['mouse-wheel.vue']
     },
@@ -96,9 +97,9 @@ export default {
       'demoId': 'unit',
       'name': { 'zh-CN': '单位', 'en-US': 'Unit' },
       'desc': {
-        'zh-CN': '<p>通过 <code>unit</code> 属性设置计数器的单位，设置单位后，加减按钮将不可用。</p>\n',
+        'zh-CN': '<p>通过设置<code>:unit</code>属性为计数器的单位，设置单位后，加减按钮将不可用。</p>\n',
         'en-US':
-          '<p>Set the unit of the counter by using the "unit" property. After setting the unit, the increase and decrease buttons will be disabled.</p>\n'
+          '<p>Set the unit of the counter by using the <code>:unit</code>property. After setting the unit, the increase and decrease buttons will be disabled.</p>\n'
       },
       'codeFiles': ['unit.vue']
     },
@@ -106,8 +107,8 @@ export default {
       'demoId': 'change-event',
       'name': { 'zh-CN': '值改变事件', 'en-US': 'Value change event' },
       'desc': {
-        'zh-CN': '<p> 通过 <code>change</code> 监听数值改变事件。</p>\n',
-        'en-US': 'The <code>change</code> event is triggered when the value of the text box is changed. </p>\n'
+        'zh-CN': '<p> 通过设置<code>@change</code>监听数值改变事件。</p>\n',
+        'en-US': 'The <code>@change</code> event is triggered when the value of the text box is changed. </p>\n'
       },
       'codeFiles': ['change-event.vue']
     },
@@ -115,8 +116,8 @@ export default {
       'demoId': 'focus-event',
       'name': { 'zh-CN': '聚焦事件', 'en-US': 'Focus Event' },
       'desc': {
-        'zh-CN': '<p>通过 <code>focus</code> 监听输入框获得焦点事件。</p>\n',
-        'en-US': 'The <code>focus</code> event is triggered when the text box is focused. </p>\n'
+        'zh-CN': '<p>通过设置<code>@focus</code>监听输入框获得焦点事件。</p>\n',
+        'en-US': 'The <code>@focus</code> event is triggered when the text box is focused. </p>\n'
       },
       'codeFiles': ['focus-event.vue']
     },
@@ -124,8 +125,8 @@ export default {
       'demoId': 'blur-event',
       'name': { 'zh-CN': '失焦事件', 'en-US': 'Out of Focus Event' },
       'desc': {
-        'zh-CN': '<p>通过 <code>blur</code> 监听输入框失去焦点事件。</p>\n',
-        'en-US': '<p>The <code>blur</code> event is triggered when the text box loses focus. </p>\n'
+        'zh-CN': '<p>通过设置<code>@blur</code>监听输入框失去焦点事件。</p>\n',
+        'en-US': '<p>The<code>@blur</code>event is triggered when the text box loses focus. </p>\n'
       },
       'codeFiles': ['blur-event.vue']
     }
@@ -134,14 +135,14 @@ export default {
     {
       'name': 'numeric',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'allow-empty',
           'type': 'boolean',
           'defaultValue': 'false',
           'desc': {
             'zh-CN': '内容可清空',
-            'en-US': 'The counter can be cleared.'
+            'en-US': 'The counter can be cleared'
           },
           'demoId': 'allow-empty'
         },
@@ -151,7 +152,7 @@ export default {
           'defaultValue': 'false',
           'desc': {
             'zh-CN': '向上到达最大值后，是否从最小值开始，或反过来',
-            'en-US': 'When the maximum value is reached, start from the minimum value, or vice versa.'
+            'en-US': 'When the maximum value is reached, start from the minimum value, or vice versa'
           },
           'demoId': 'max-min'
         },
@@ -235,7 +236,7 @@ export default {
           'defaultValue': 'true',
           'desc': {
             'zh-CN': '鼠标滚动滑轮是否改变数值',
-            'en-US': 'Whether to change the value of the scroll wheel.'
+            'en-US': 'Whether to change the value of the scroll wheel'
           },
           'demoId': 'mouse-wheel'
         },
@@ -304,7 +305,7 @@ export default {
           'type': 'string',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '数值的单位。在设置单位时，加减按钮将不可用。',
+            'zh-CN': '数值的单位。在设置单位时，加减按钮将不可用',
             'en-US': 'Unit of measurement. When setting the unit, the increase and decrease buttons will be disabled'
           },
           'demoId': 'unit'
@@ -314,8 +315,8 @@ export default {
           'type': 'number',
           'defaultValue': '0',
           'desc': {
-            'zh-CN': '设置输入组件的默认值，默认为 0。',
-            'en-US': 'Set the default value of the input component. The default value is 0.'
+            'zh-CN': '设置输入组件的默认值，默认为 0',
+            'en-US': 'Set the default value of the input component. The default value is 0'
           },
           'demoId': 'basic-usage'
         }

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

@@ -8,7 +8,7 @@ test('是否正常渲染', async ({ page }) => {
   const selector = page.locator('.tiny-search__selector')
   const firstPresent = first.locator('.tiny-search__present')
   const firstInput = first.locator('.tiny-search__input')
-  const icon = first.locator('a > svg')
+  const icon = page.locator('#basic-usage a svg')
 
   await expect(first).toHaveCount(1)
   await expect(icon).toHaveCount(1)

package/demos/pc/app/search/clearable.spec.ts

@@ -5,7 +5,7 @@ test('可清空输入值', async ({ page }) => {
   await page.goto('search#clearable')
 
   const input = page.locator('.tiny-search__input')
-  const close = page.locator('.tiny-search__input-btn a').first()
+  const close = page.locator('#clearable a').first()
 
   await input.fill('123')
   await expect(input).toHaveValue('123')

package/demos/pc/app/search/events-composition-api.vue

@@ -4,6 +4,8 @@
     <tiny-search @search="search" is-enter-search></tiny-search>
     <p>值变化事件</p>
     <tiny-search @change="change" @input="input"></tiny-search>
+    <p>值清空事件</p>
+    <tiny-search @clear="clear" clearable></tiny-search>
     <p>类型选中事件</p>
     <tiny-search :search-types="searchTypes" @select="select"></tiny-search>
   </div>
@@ -36,6 +38,10 @@ function change(key, value) {
   Modal.message(`change: ${value}`)
 }
 
+function clear() {
+  Modal.message('clear')
+}
+
 function input(key, value) {
   Modal.message(`input: ${key}, ${JSON.stringify(value)}`)
 }

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

@@ -6,27 +6,30 @@ test('事件是否正常触发', async ({ page }) => {
 
   const modal = page.locator('.tiny-modal')
   const input = page.locator('.tiny-search').getByRole('textbox')
-  const modalText = modal.getByText('111')
   const button = page.locator('.tiny-search__input-btn > a').first()
-  // const empty = modal.getByText('')
 
   await button.click()
   await expect(modal).toHaveCount(1)
   await input.first().fill('111')
   await button.click()
-  await modalText.isVisible()
+  await modal.getByText('111').isVisible()
 
   // change事件
   await input.nth(1).fill('111')
   await input.nth(1).press('Enter')
-  await modalText.nth(1).isVisible()
+  await modal.getByText('change: 111').isVisible()
+
+  // clear 事件
+  await input.nth(2).fill('111')
+  await page.locator('#events a').nth(2).click()
+  await modal.getByText('clear').isVisible()
 
   // select事件
-  const search = page.locator('.tiny-search').nth(2)
+  const search = page.locator('.tiny-search').nth(3)
   const expand = search.locator('.icon-outer')
   const option = search.locator('.tiny-search__poplist-item').filter({ hasText: '找谁' })
   const text = search.locator('.tiny-search__text')
-  const modalContent = page.locator('.tiny-modal').getByText('找谁')
+  const modalContent = modal.getByText('找谁')
 
   await expect(text).toHaveText('找人')
   await expand.click()

package/demos/pc/app/search/events.vue

@@ -4,6 +4,8 @@
     <tiny-search @search="search" is-enter-search></tiny-search>
     <p>值变化事件</p>
     <tiny-search @change="change" @input="input"></tiny-search>
+    <p>值清空事件</p>
+    <tiny-search @clear="clear" clearable></tiny-search>
     <p>类型选中事件</p>
     <tiny-search :search-types="searchTypes" @select="select"></tiny-search>
   </div>
@@ -41,6 +43,9 @@ export default {
     change(key, value) {
       Modal.message(`change: ${value}`)
     },
+    clear() {
+      Modal.message('clear')
+    },
     input(key, value) {
       Modal.message(`input: ${key}, ${JSON.stringify(value)}`)
     },

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

@@ -83,12 +83,12 @@ export default {
       'demoId': 'events',
       'name': { 'zh-CN': '事件', 'en-US': 'Search event' },
       'desc': {
-        'zh-CN': `<div class="tip custom-block"><p class="custom-block-title">通过 <code>is-enter-search</code> 设置回车触发搜索事件， <code>search</code> 监听搜索事件；<br />
+        'zh-CN': `<div class="tip custom-block">通过 <code>is-enter-search</code> 设置回车触发搜索事件， <code>search</code> 监听搜索事件；<br />
               通过 <code>change</code> 监听输入框失焦时搜索值改变事件, <code>input</code> 监听搜索值实时改变事件；<br />
-              通过 <code>select</code> 监听搜索类型选中事件。</p></div>`,
-        'en-US': `<div class="tip custom-block"><p class="custom-block-title">Set a carriage return to trigger a search event by <code>is enter search</code> , and listen for search events by <code>search</code> <br />
+              通过 <code>select</code> 监听搜索类型选中事件。</div>`,
+        'en-US': `<div class="tip custom-block">Set a carriage return to trigger a search event by <code>is enter search</code> , and listen for search events by <code>search</code> <br />
               By <code>change</code> listening for search value change events when the input box is out of focus, and <code>input</code> listening for real-time search value change events<br />
-              Listen for search type selection events through <code>select</code> .</p></div>`
+              Listen for search type selection events through <code>select</code> .</div>`
       },
       'codeFiles': ['events.vue']
     }
@@ -193,6 +193,16 @@ export default {
           },
           'demoId': 'events'
         },
+        {
+          'name': 'clear',
+          'type': '() => void',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '清空值触发的回调函数',
+            'en-US': 'Callback function triggered by clearing values'
+          },
+          'demoId': 'events'
+        },
         {
           'name': 'input',
           'type': '(input: string, value: ITypeValue) => void',

package/demos/pc/app/slide-bar/webdoc/slide-bar.js

@@ -9,7 +9,10 @@ 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>:init-blocks="4"</code>设置可显示的块数。',
+        'en-US': 'Set the number of blocks that can be displayed through<code>: init blocks="4"</code>.'
+      },
       'codeFiles': ['basic-usage.vue']
     },
     {
@@ -17,9 +20,9 @@ export default {
       'name': { 'zh-CN': '每次滚动块数', 'en-US': 'Number of blocks scrolled each time' },
       'desc': {
         'zh-CN':
-          '<p>可通过 <code>wheel-blocks</code> 设置每次滚动块数。\n可通过 <code>value</code> 调用服务时候获取数据的来源</p>\n',
+          '<p>通过 <code>wheel-blocks</code> 设置每次滚动块数。\n通过 <code>value</code> 调用服务时候获取数据的来源。</p>\n',
         'en-US':
-          '<p>You can use <code>wheel-blocks</code> to set the number of blocks to be scrolled each time. \nThe data source can be obtained when the service is invoked through <code>value</code></p>\n'
+          '<p>You can use <code>wheel-blocks</code> to set the number of blocks to be scrolled each time. \nThe data source can be obtained when the service is invoked through <code>value</code>. </p>\n'
       },
       'codeFiles': ['wheel-blocks.vue']
     },
@@ -36,7 +39,7 @@ export default {
       'demoId': 'custom-tag',
       'name': { 'zh-CN': '自定义 DOM 标签', 'en-US': 'Customized DOM Label' },
       'desc': {
-        'zh-CN': '<p>可通过 <code>tag sub-tag</code> 自定义 DOM 标签。</p>\n',
+        'zh-CN': '<p>通过 <code>tag sub-tag</code> 自定义 DOM 标签。</p>\n',
         'en-US': '<p>You can use <code>tag sub-tag</code> to customize DOM tags. </p>\n'
       },
       'codeFiles': ['custom-tag.vue']
@@ -44,7 +47,10 @@ export default {
     {
       'demoId': 'slide-bar-events',
       'name': { 'zh-CN': '滚动块事件', 'en-US': 'Scroll Block Event' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'desc': {
+        'zh-CN': '通过<code>@before-click</code>触发滑动点击前事件。',
+        'en-US': 'Trigger the pre click event by<code>@ before click</code>.'
+      },
       'codeFiles': ['slide-bar-events.vue']
     }
   ],
@@ -52,19 +58,19 @@ export default {
     {
       'name': 'slide-bar',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'value',
           'type': 'Array',
           'defaultValue': '',
-          'desc': { 'zh-CN': '调用服务时候获取数据的来源。', 'en-US': 'Data source obtained during service invoking.' },
+          'desc': { 'zh-CN': '调用服务时候获取数据的来源', 'en-US': 'Data source obtained during service invoking' },
           'demoId': 'wheel-blocks'
         },
         {
           'name': 'init-blocks',
           'type': 'number',
           'defaultValue': '',
-          'desc': { 'zh-CN': '初始时需要显示的块数。', 'en-US': 'Number of blocks to be displayed initially.' },
+          'desc': { 'zh-CN': '初始时需要显示的块数', 'en-US': 'Number of blocks to be displayed initially' },
           'demoId': 'wheel-blocks'
         },
         {
@@ -72,22 +78,22 @@ export default {
           'type': 'number',
           'defaultValue': '该属性的默认值为 1',
           'desc': {
-            'zh-CN': '鼠标滚轮上下滚动的时候，滚动的块数长度。',
-            'en-US': 'Number of scrolling blocks when the mouse wheel is scrolled up or down.'
+            'zh-CN': '鼠标滚轮上下滚动的时候，滚动的块数长度',
+            'en-US': 'Number of scrolling blocks when the mouse wheel is scrolled up or down'
           },
           'demoId': 'wheel-blocks'
         },
         {
           'name': 'tag',
           'type': 'string',
-          'defaultValue': '该属性的默认值为 ul',
+          'defaultValue': `该属性的默认值为 'ul'`,
           'desc': { 'zh-CN': '设置组件的 Dom 标签', 'en-US': 'Setting the Dom Label of a Component' },
           'demoId': 'custom-tag'
         },
         {
           'name': 'sub-tag',
           'type': 'string',
-          'defaultValue': '该属性的默认值为 li',
+          'defaultValue': `该属性的默认值为 'li'`,
           'desc': { 'zh-CN': '设置组件的子级 Dom 标签', 'en-US': 'Setting the Dom Label of a Component' },
           'demoId': 'custom-tag'
         }

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

@@ -59,7 +59,8 @@ export default {
       'demoId': 'shortcut-operation',
       'name': { 'zh-CN': '快捷键操作', 'en-US': 'Shortcut Key Operations' },
       'desc': {
-        'zh-CN': '<p>通过设置<code>num-pages</code>总步数，即按快捷键 PageDown/PageUp 时，每次移动的距离是 "⌈(max-min)/num-pages⌉"。</p>',
+        'zh-CN':
+          '<p>通过设置<code>num-pages</code>总步数，即按快捷键 PageDown/PageUp 时，每次移动的距离是 "⌈(max-min)/num-pages⌉"。</p>',
         'en-US':
           '<p>Set <code>num-pages</code>the total number of steps. That is, when you press the shortcut key PageDown or PageUp, the moving distance is "⌈(max-min)/num-pages⌉"。</p>'
       },
@@ -104,7 +105,7 @@ export default {
       'name': { 'zh-CN': '事件', 'en-US': 'Event' },
       'desc': { 'zh-CN': '<p>change、start、stop 事件。</p>', 'en-US': '<p>change, start, stop events.</p>' },
       'codeFiles': ['slider-event.vue']
-    },
+    }
   ],
   apis: [
     {
@@ -114,7 +115,10 @@ export default {
         {
           'name': 'v-model',
           'type': 'number | [number, number]',
-          'desc': { 'zh-CN': '设置单滑块的当前值，必需是整数或数组', 'en-US': 'Sets the current value of a single slider. The value must be an integer or an array.' },
+          'desc': {
+            'zh-CN': '设置单滑块的当前值，必需是整数或数组',
+            'en-US': 'Sets the current value of a single slider. The value must be an integer or an array.'
+          },
           'demoId': 'basic-usage'
         },
         {
@@ -180,7 +184,10 @@ export default {
           'name': 'height',
           'type': 'string',
           'defaultValue': `'300px'`,
-          'desc': { 'zh-CN': 'Slider组件的高度，当vertical为true时有效', 'en-US': 'Height of Slider component, effective when vertical is true' },
+          'desc': {
+            'zh-CN': 'Slider 组件的高度，当 vertical 为 true 时有效',
+            'en-US': 'Height of Slider component, effective when vertical is true'
+          },
           'demoId': 'vertical-mode'
         },
         {
@@ -188,8 +195,7 @@ export default {
           'type': 'number',
           'defaultValue': '1',
           'desc': {
-            'zh-CN':
-              '设置总步数，即按快捷键 PageDown/PageUp 时，每次移动的距离是 "⌈(max-min)/num-pages⌉"',
+            'zh-CN': '设置总步数，即按快捷键 PageDown/PageUp 时，每次移动的距离是 "⌈(max-min)/num-pages⌉"',
             'en-US':
               'Set the total number of steps. That is, when you press PageDown or PageUp, the moving distance is "⌈(max-min)/num-pages⌉".'
           },
@@ -209,8 +215,7 @@ export default {
           'type': '(value: number | [number, number]) => void',
           'defaultValue': '',
           'desc': {
-            'zh-CN':
-              '值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发）',
+            'zh-CN': '值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发）',
             'en-US':
               'Triggered when the value changes (When you drag the mouse, it is triggered only after you release the mouse).'
           },
@@ -221,22 +226,18 @@ export default {
           'type': '(event: Event, value: number | [number, number]) => void',
           'defaultValue': '',
           'desc': {
-            'zh-CN':
-              '设置滑块滑动开始时，触发该事件',
-            'en-US':
-              'This event is triggered when the slider starts to slide.'
+            'zh-CN': '设置滑块滑动开始时，触发该事件',
+            'en-US': 'This event is triggered when the slider starts to slide.'
           },
           'demoId': 'slider-event'
         },
         {
-          'name': 'Stop',
+          'name': 'stop',
           'type': '(value: number | [number, number]) => void',
           'defaultValue': '',
           'desc': {
-            'zh-CN':
-              '设置滑块滑动结束时，触发该事件',
-            'en-US':
-              'This event is triggered when the slider sliding ends. '
+            'zh-CN': '设置滑块滑动结束时，触发该事件',
+            'en-US': 'This event is triggered when the slider sliding ends. '
           },
           'demoId': 'slider-event'
         }
@@ -246,7 +247,11 @@ export default {
           'name': 'default',
           'type': '',
           'defaultValue': '',
-          'desc': { 'zh-CN': '显示滑块值的插槽，仅仅v-model是单数值时才有效，插槽参数为：slotArg: { slotScope: number }', 'en-US': 'Slot for displaying slider values, valid only if v-model is a single value. Slot parameters are: slotArg: {slotScope: number}' },
+          'desc': {
+            'zh-CN': '显示滑块值的插槽，仅仅 v-model 是单数值时才有效，插槽参数为：slotArg: { slotScope: number }',
+            'en-US':
+              'Slot for displaying slider values, valid only if v-model is a single value. Slot parameters are: slotArg: {slotScope: number}'
+          },
           'demoId': 'slider-slot'
         }
       ]

package/demos/pc/app/steps/advanced-steps.spec.ts

@@ -4,10 +4,11 @@ test('高级向导', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('steps#advanced-steps')
 
-  const advancedSteps = page.locator('#preview .tiny-steps')
+  const advancedSteps = page.locator('.pc-demo .tiny-steps')
+  const stepsWrapper = advancedSteps.locator('ul.tiny-steps-advanced')
   const nodes = advancedSteps.locator('.tiny-steps-advanced li')
 
-  await expect(advancedSteps).toHaveAttribute('type', 'advanced')
+  await expect(stepsWrapper).toBeVisible()
   await expect(nodes.first()).toHaveClass('doing')
   await expect(nodes.nth(1)).toHaveClass('done')
   await expect(nodes.nth(2)).toHaveClass(/current/)

package/demos/pc/app/steps/click-composition-api.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="demo-steps-click">
-    <div>点击步骤条节点来切换选中状态</div>
     <tiny-steps :data="stepsData" :active="defaultActive" @click="normalClick"></tiny-steps>
     <div v-if="currentNode">
       <span>选中节点 index: {{ currentNode.index }} </span><br />

package/demos/pc/app/steps/click.spec.ts

@@ -4,16 +4,5 @@ test('点击事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('steps#click')
 
-  const nodes = page.locator('#preview .tiny-steps').locator('li')
-  const tips = page.locator('#preview .tiny-steps ~ div span')
-
-  await nodes.nth(2).click()
-  await expect(tips.first()).toContainText('index:2')
-  await expect(tips.nth(1)).toContainText('{"name":"Involved Parties","count":10,"status":"doing"}')
-  await expect(nodes.nth(2)).toHaveClass(/current/)
-  await nodes.nth(3).click()
-  await expect(tips.first()).toContainText('index:3')
-  await expect(tips.nth(1)).toContainText('{"name":"Billing","count":0,"status":"done"}')
-  await expect(nodes.nth(3)).toHaveClass(/current/)
-  await expect(nodes.nth(2)).not.toHaveClass(/current/)
+  // TODO
 })

package/demos/pc/app/steps/custom-steps-item.spec.ts

@@ -4,7 +4,7 @@ test('自定义数据项', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('steps#custom-steps-item')
 
-  const advancedSteps = page.locator('#preview .tiny-steps')
+  const advancedSteps = page.locator('.pc-demo .tiny-steps')
   const nodes = advancedSteps.locator('li')
 
   await expect(nodes.first()).toContainText('name属性内容1')

package/demos/pc/app/steps/node-status-composition-api.vue

@@ -9,7 +9,7 @@ import { TimeLine as TinyTimeLine, Modal } from '@opentiny/vue'
 const normalActive = ref(0)
 const data = ref([
   {
-    name: 'Basic Info.'
+    name: 'Basic Info'
   },
   {
     name: 'BOQ Info'

package/demos/pc/app/steps/node-status.spec.ts

@@ -4,7 +4,7 @@ test('节点状态', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('steps#node-status')
 
-  const nodes = page.locator('#preview .tiny-steps .tiny-timeline-item')
+  const nodes = page.locator('.pc-demo .tiny-steps .tiny-timeline-item')
   await expect(nodes.first()).toHaveClass(/process-current/)
   await expect(nodes.nth(1)).toHaveClass(/process-wait/)
   await expect(nodes.nth(2)).toHaveClass(/process-error/)

package/demos/pc/app/steps/node-status.vue

@@ -14,7 +14,7 @@ export default {
       normalActive: 0,
       data: [
         {
-          name: 'Basic Info.'
+          name: 'Basic Info'
         },
         {
           name: 'BOQ Info'

package/demos/pc/app/steps/normal-steps-composition-api.vue

@@ -7,7 +7,7 @@ import { ref } from 'vue'
 import { TimeLine as TinyTimeLine, Modal } from '@opentiny/vue'
 
 const normalActive = ref(0)
-const data = ref([{ name: 'Basic Info.' }, { name: 'BOQ Info' }, { name: 'Involved Parties' }, { name: 'Billing' }])
+const data = ref([{ name: 'Basic Info' }, { name: 'BOQ Info' }, { name: 'Involved Parties' }, { name: 'Billing' }])
 
 const normalClick = (index, node) => {
   normalActive.value = index