@opentiny/vue-docs 2.2.5 → 2.2.7

package/demos/pc/app/select/optimization.spec.ts

@@ -27,7 +27,7 @@ test('多选虚拟滚动', async ({ page }) => {
   const select = wrap.locator('.tiny-select').nth(1)
   const dropdown = page.locator('body > .tiny-select-dropdown')
   const option = dropdown.locator('.tiny-option')
-  const tag = page.locator('#preview .tiny-select .tiny-tag')
+  const tag = select.locator('.tiny-tag')
 
   await select.click()
   await expect((await option.all()).length).toEqual(10)
@@ -39,11 +39,10 @@ test('多选虚拟滚动', async ({ page }) => {
   await option.nth(9).scrollIntoViewIfNeeded()
   await expect(option.filter({ hasText: '黄金糕16' })).toBeVisible()
   await expect(option.filter({ hasText: '黄金糕17' })).toBeVisible()
-  // TODO: 修改多选虚拟滚动后打开
-  // await option.filter({ hasText: '黄金糕17' }).click()
-  // await expect(tag.first()).toHaveText('黄金糕17')
-  // await expect((await tag.all()).length).toEqual(1)
-  // await option.filter({ hasText: '黄金糕16' }).click()
-  // await expect((await tag.all()).length).toEqual(2)
-  // await expect(tag.nth(1)).toHaveText('+ 1')
+  await option.filter({ hasText: '黄金糕17' }).click()
+  await expect(tag.first()).toHaveText('黄金糕17')
+  await expect((await tag.all()).length).toEqual(1)
+  await option.filter({ hasText: '黄金糕16' }).click()
+  await expect((await tag.all()).length).toEqual(2)
+  await expect(tag.nth(1)).toHaveText('+ 1')
 })

package/demos/pc/app/select/tag-type.spec.ts

@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test'
+
+test('标签类型', async ({ page }) => {
+  await page.goto('select#tag-type')
+
+  const wrap = page.locator('#tag-type')
+  const select = wrap.locator('.tiny-select')
+  const tag = select.locator('.tiny-tag')
+
+  // 验证是否有对应类型的类名
+  await expect(tag.nth(0)).toHaveClass(/tiny-tag--info tiny-tag--light/)
+})

package/demos/pc/app/select/webdoc/select.cn.md

@@ -4,4 +4,4 @@ title: Select 选择器
 
 # Select 选择器
 
-> Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。
+Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。

package/demos/pc/app/select/webdoc/select.en.md

@@ -4,4 +4,4 @@ title: Select Selector
 
 # Select Selector
 
-> Select selector is a UI component that displays and selects data from a drop-down list box.
+Select selector is a UI component that displays and selects data from a drop-down list box.

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

@@ -338,9 +338,9 @@ export default {
       'name': { 'zh-CN': '下拉表格禁用选项', 'en-US': 'Select Table Disable Options' },
       'desc': {
         'zh-CN':
-          '<p>通过 <code>select-config</code> （多选）或 <code>radio-config</code> （单选）属性的<code>checkMethod</code>自定义禁用逻辑，返回 true(启用) / false(禁用)。</p>\n',
+          '<p>通过 <code>select-config</code> （多选）或 <code>radio-config</code> （单选）属性的 <code>checkMethod</code> 自定义禁用逻辑，返回 true (启用) / false (禁用)。</p>\n',
         'en-US':
-          "<p>By customizing the disable logic through the <code>select-config</code> (multiple selection) or <code>radio-config</code> (single selection) attribute's<code>checkMethod</code>, return true(Enable) / false(disable)</p>"
+          "<p>By customizing the disable logic through the <code>select-config</code> (multiple selection) or <code>radio-config</code> (single selection) attribute's <code>checkMethod</code>, return true (Enable) / false (disable)</p>"
       },
       'codeFiles': ['nest-grid-disable.vue']
     },
@@ -455,7 +455,7 @@ export default {
     {
       'name': 'select',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'allow-copy',
           'type': 'boolean',
@@ -481,7 +481,7 @@ export default {
         {
           'name': 'autocomplete',
           'type': 'string',
-          'defaultValue': 'off',
+          'defaultValue': "'off'",
           'desc': {
             'zh-CN': '输入框的原生 autocomplete 属性',
             'en-US': 'The native autocomplete attribute of the input box'
@@ -500,7 +500,7 @@ export default {
         },
         {
           'name': 'clear-no-match-value',
-          'type': 'Boolean',
+          'type': 'boolean',
           'defaultValue': 'false',
           'desc': {
             'zh-CN': '是否自动清空无法在 options 中找到匹配项的值',
@@ -607,8 +607,8 @@ export default {
         },
         {
           'name': 'input-box-type',
-          'type': '"input" | "underline"',
-          'defaultValue': 'input',
+          'type': "'input' | 'underline'",
+          'defaultValue': "'input'",
           'desc': {
             'zh-CN': '输入框的显示类型',
             'en-US': 'Display type of input box'
@@ -639,7 +639,7 @@ export default {
         {
           'name': 'loading-text',
           'type': 'string',
-          'defaultValue': '加载中',
+          'defaultValue': "'加载中'",
           'desc': {
             'zh-CN': '远程加载时显示的文本',
             'en-US': 'Text displayed during remote loading'
@@ -690,7 +690,7 @@ export default {
         {
           'name': 'no-match-text',
           'type': 'string',
-          'defaultValue': '无匹配数据',
+          'defaultValue': "'无匹配数据'",
           'desc': {
             'zh-CN': '搜索条件无匹配时显示的文本，也可以使用 empty 插槽设置',
             'en-US':
@@ -701,7 +701,7 @@ export default {
         {
           'name': 'no-data-text',
           'type': 'string',
-          'defaultValue': '暂无相关数据',
+          'defaultValue': "'暂无相关数据'",
           'desc': {
             'zh-CN': '选项列表为空时显示的文本，也可以使用 empty 插槽设置',
             'en-US': 'The text displayed when the option list is empty can also be set using empty slots'
@@ -723,7 +723,7 @@ export default {
           'name': 'placement',
           'type': 'IPlacement',
           'typeAnchorName': 'IPlacement',
-          'defaultValue': 'bottom-start',
+          'defaultValue': "'bottom-start'",
           'desc': {
             'zh-CN': '下拉弹框相对于触发源的弹出位置',
             'en-US': 'The pop-up position of the pull-down pop-up box relative to the trigger source'
@@ -733,7 +733,7 @@ export default {
         {
           'name': 'placeholder',
           'type': 'string',
-          'defaultValue': '请选择',
+          'defaultValue': "'请选择'",
           'desc': { 'zh-CN': '占位符', 'en-US': 'Placeholder' },
           'demoId': 'native-properties'
         },
@@ -790,7 +790,7 @@ export default {
         },
         {
           'name': 'render-type',
-          'type': '"tree" | "grid"',
+          'type': "'tree' | 'grid'",
           'defaultValue': '',
           'desc': {
             'zh-CN': '渲染为下拉表格或下拉树，需结合 grid-op / tree-op 使用',
@@ -820,7 +820,7 @@ export default {
         },
         {
           'name': 'size',
-          'type': '"medium" | "small" | "mini"',
+          'type': "'medium' | 'small' | 'mini'",
           'defaultValue': '',
           'desc': {
             'zh-CN': '输入框尺寸。',
@@ -850,7 +850,7 @@ export default {
         },
         {
           'name': 'tag-type',
-          'type': '"success" | "info" | "warning" | "danger" ',
+          'type': "'success' | 'info' | 'warning' | 'danger'",
           'defaultValue': '',
           'desc': {
             'zh-CN': '标签类型，仅多选适用。使用 aurora 主题时设置该属性为 info',
@@ -874,7 +874,7 @@ export default {
         {
           'name': 'text-split',
           'type': 'string',
-          'defaultValue': ',',
+          'defaultValue': "','",
           'desc': {
             'zh-CN': '自定义复制文本的分隔符，需结合 copyable 属性使用',
             'en-US': 'The separator for custom copied text needs to be used in conjunction with the copyable attribute'
@@ -884,7 +884,7 @@ export default {
         {
           'name': 'text-field',
           'type': 'string',
-          'defaultValue': 'label',
+          'defaultValue': "'label'",
           'desc': {
             'zh-CN': '显示值字段',
             'en-US': 'Show Value Fields'
@@ -894,7 +894,7 @@ export default {
         {
           'name': 'value-field',
           'type': 'string',
-          'defaultValue': 'value',
+          'defaultValue': "'value'",
           'desc': {
             'zh-CN': '绑定值字段',
             'en-US': 'Bind Value Field'
@@ -904,7 +904,7 @@ export default {
         {
           'name': 'value-key',
           'type': 'string',
-          'defaultValue': 'value',
+          'defaultValue': "'value'",
           'desc': {
             'zh-CN': '作为 value 唯一标识的键名，绑定值为对象类型时必填',
             'en-US':

package/demos/pc/app/slide-bar/basic-usage.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('slide-bar#basic-usage')
-  const preview = page.locator('#preview')
+  const preview = page.locator('#basic-usage')
   const slideBarContainer = preview.locator('.tiny-slide-bar__content')
   const slideBarList = slideBarContainer.locator('.tiny-slide-bar__list')
   await slideBarList.locator('li').first().click()
@@ -11,7 +11,7 @@ test('基础用法', async ({ page }) => {
   await expect(slideBarList.locator('li').first()).toHaveCSS('border-color', 'rgba(153, 153, 153, 0.7)')
   await preview.locator('.icon-chevron-right').click()
   // 单个滚动块的宽度为 width + marginLeft，固定值为196px
-  await expect(slideBarList).toHaveCSS('left', '-196px')
+  await expect(slideBarList).toHaveCSS('left', '-358px')
   await preview.locator('.icon-chevron-left').click()
-  await expect(slideBarList).toHaveCSS('left', '0px')
+  await expect(slideBarList).toHaveCSS('left', '-179px')
 })

package/demos/pc/app/slide-bar/custom-content.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('slide-bar#custom-content')
-  const preview = page.locator('#preview')
-  const slideBarContainer = preview.locator('.tiny-slide-bar__content')
+  const slideBarContainer = page.locator('.tiny-slide-bar__content')
   const slideBarList = slideBarContainer.locator('.tiny-slide-bar__list')
   await expect(slideBarList.first().locator('li span').first()).toContainText('标题')
   await expect(slideBarList.first().locator('li div').first()).toContainText('语言')

package/demos/pc/app/slide-bar/custom-tag.spec.ts

@@ -3,8 +3,7 @@ import { test, expect } from '@playwright/test'
 test('自定义 DOM 标签', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('slide-bar#custom-tag')
-  const preview = page.locator('#preview')
-  const slideBarContainer = preview.locator('.tiny-slide-bar__content')
+  const slideBarContainer = page.locator('.tiny-slide-bar__content')
   const slideBarList = slideBarContainer.locator('.tiny-slide-bar__list')
   // 自定义的标签为 div
   await expect(slideBarList.locator('li').first().locator('div')).toHaveCount(3)

package/demos/pc/app/slide-bar/slide-bar-events.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('slide-bar#slide-bar-events')
-  const preview = page.locator('#preview')
-  const slideBarContainer = preview.locator('.tiny-slide-bar__content')
+  const slideBarContainer = page.locator('.tiny-slide-bar__content')
   const slideBarList = slideBarContainer.locator('.tiny-slide-bar__list')
   await slideBarList.locator('li').first().click()
   await expect(page.locator('.tiny-modal').filter({ hasText: 'before-click 事件' })).toBeVisible()

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/slide-bar/wheel-blocks.spec.ts

@@ -3,16 +3,15 @@ import { test, expect } from '@playwright/test'
 test('每次滚动块数', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('slide-bar#wheel-blocks')
-  const preview = page.locator('#preview')
-  const slideBarContainer = preview.locator('.tiny-slide-bar__content')
+  const slideBarContainer = page.locator('.tiny-slide-bar__content')
   const slideBarList = slideBarContainer.locator('.tiny-slide-bar__list')
 
   await slideBarList.first().click()
-  await preview.locator('.icon-chevron-right').click()
+  await page.locator('.icon-chevron-right').click()
   // 单个滚动块的宽度固定为196px，所以应为 196px * 2
-  await expect(slideBarList).toHaveCSS('left', '-392px')
-  await preview.locator('.icon-chevron-right').click()
-  await expect(slideBarList).toHaveCSS('left', '-784px')
-  await preview.locator('.icon-chevron-left').click()
-  await expect(slideBarList).toHaveCSS('left', '-392px')
+  await expect(slideBarList).toHaveCSS('left', '-358px')
+  await page.locator('.icon-chevron-right').click()
+  await expect(slideBarList).toHaveCSS('left', '-716px')
+  await page.locator('.icon-chevron-left').click()
+  await expect(slideBarList).toHaveCSS('left', '-358px')
 })

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

@@ -137,7 +137,7 @@ export default {
     {
       'name': 'split',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'mode',
           'type': `'horizontal' | 'vertical'`,

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

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

@@ -1,10 +1,10 @@
 import { test, expect } from '@playwright/test'
 
-test('普通步骤条', async ({ page }) => {
+test('单链型步骤条', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('steps#normal-steps')
 
-  const steps = page.locator('#preview .tiny-steps')
+  const steps = page.locator('.pc-demo .tiny-steps')
   await expect(steps.locator('div').first()).toHaveClass(/tiny-steps-normal/)
   const nodes = steps.locator('.tiny-timeline-item')
 

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

@@ -12,7 +12,7 @@ export default {
   data() {
     return {
       normalActive: 0,
-      data: [{ name: 'Basic Info.' }, { name: 'BOQ Info' }, { name: 'Involved Parties' }, { name: 'Billing' }]
+      data: [{ name: 'Basic Info' }, { name: 'BOQ Info' }, { name: 'Involved Parties' }, { name: 'Billing' }]
     }
   },
   methods: {

package/demos/pc/app/steps/only-number-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 onlyNumber = ref(true)
 
 function normalClick(index, node) {