@opentiny/vue-docs 2.2.5 → 2.2.7

package/demos/pc/app/tabs/tooltip-composition-api.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="tab-demo-position">
-    <div class="mb10">
-      <tiny-switch v-model="value" @change="handleChange"></tiny-switch> 当前tooltip-config是{{
+    <div class="mb10 tip">
+      <tiny-switch v-model="value" @change="handleChange" class="mr10"></tiny-switch>当前tooltip-config是{{
         value ? 'tooltip配置' : '字符串title'
-      }}
+      }}。
     </div>
     <tiny-tabs v-model="activeName4" tab-style="card" position="left" :tooltip-config="tooltipConfig">
       <tiny-tab-item v-for="item in tabs3" :key="item.name" :title="item.title" :name="item.name">
@@ -23,28 +23,28 @@ const value = true
 const tabs3 = ref([
   {
     name: 'navigation1',
-    title: 'Navigation1(蒸羊羔蒸熊掌蒸鹿尾，可以试着将tooltip-config设置为字符串title)',
-    content: 'Navigation1'
+    title: 'Navigation 1(蒸羊羔蒸熊掌蒸鹿尾，可以试着将tooltip-config设置为字符串title)',
+    content: 'Navigation 1'
   },
   {
     name: 'navigation2',
-    title: 'Navigation2',
-    content: 'Navigation2'
+    title: 'Navigation 2',
+    content: 'Navigation 2'
   },
   {
     name: 'navigation3',
-    title: 'Navigation3',
-    content: 'Navigation3'
+    title: 'Navigation 3',
+    content: 'Navigation 3'
   },
   {
     name: 'navigation4',
-    title: 'Navigation4',
-    content: 'Navigation4'
+    title: 'Navigation 4',
+    content: 'Navigation 4'
   },
   {
     name: 'navigation5',
-    title: 'Navigation5',
-    content: 'Navigation5'
+    title: 'Navigation 5',
+    content: 'Navigation 5'
   }
 ])
 
@@ -59,4 +59,8 @@ const handleChange = (value) => {
 .tab-demo-position {
   min-height: 250px;
 }
+.tip {
+  display: flex;
+  align-items: center;
+}
 </style>

package/demos/pc/app/tabs/tooltip.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="tab-demo-position">
-    <div class="mb10">
-      <tiny-switch v-model="value" @change="handleChange"></tiny-switch> 当前tooltip-config是{{
+    <div class="mb10 tip">
+      <tiny-switch v-model="value" @change="handleChange" class="mr10"></tiny-switch>当前tooltip-config是{{
         value ? 'tooltip配置' : '字符串title'
-      }}
+      }}。
     </div>
     <tiny-tabs v-model="activeName4" tab-style="card" position="left" :tooltip-config="tooltipConfig">
       <tiny-tab-item v-for="item in tabs3" :key="item.name" :title="item.title" :name="item.name">
@@ -29,28 +29,28 @@ export default {
       tabs3: [
         {
           name: 'navigation1',
-          title: 'Navigation1(蒸羊羔蒸熊掌蒸鹿尾，可以试着将tooltip-config设置为字符串title)',
-          content: 'Navigation1'
+          title: 'Navigation 1(蒸羊羔蒸熊掌蒸鹿尾，可以试着将tooltip-config设置为字符串title)',
+          content: 'Navigation 1'
         },
         {
           name: 'navigation2',
-          title: 'Navigation2',
-          content: 'Navigation2'
+          title: 'Navigation 2',
+          content: 'Navigation 2'
         },
         {
           name: 'navigation3',
-          title: 'Navigation3',
-          content: 'Navigation3'
+          title: 'Navigation 3',
+          content: 'Navigation 3'
         },
         {
           name: 'navigation4',
-          title: 'Navigation4',
-          content: 'Navigation4'
+          title: 'Navigation 4',
+          content: 'Navigation 4'
         },
         {
           name: 'navigation5',
-          title: 'Navigation5',
-          content: 'Navigation5'
+          title: 'Navigation 5',
+          content: 'Navigation 5'
         }
       ]
     }
@@ -69,4 +69,8 @@ export default {
 .tab-demo-position {
   min-height: 250px;
 }
+.tip {
+  display: flex;
+  align-items: center;
+}
 </style>

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

@@ -6,10 +6,10 @@ export default {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
       'desc': {
-        'zh-CN': ` <code>Tabs</code> ：通过 <code>v-model</code> 设置选中的页签项，对应 <code>TabItem</code> 页签项中 <code>name</code> 属性的值；<br />
-        <code>TabItem</code> ：通过 <code>title</code> 设置页签项标题。`,
-        'en-US': ` <code>Tabs</code> :Set the selected tag item through the <code>v-model</code> , corresponding to the value of the <code>name</code> attribute in the <code>TabItem</code> tag item;<br/>
-        <code>TabItem</code> :Set the label item title through <code>title</code> .`
+        'zh-CN': `<div class="tip custom-block"><code>Tabs</code> ：通过 v-model 设置选中的页签项，对应 TabItem 页签项中 name 属性的值；<br />
+        <code>TabItem</code> ：通过 title 设置页签项标题， name 设置页签项的值，disabled 设置页签项禁用，默认插槽自定义对应的内容。</div>`,
+        'en-US': `<div class="tip custom-block"><p> <code>Tabs</code> :Set the selected tag item through the v-model , corresponding to the value of the name attribute in the TabItem tag item;<br/>
+        <code>TabItem</code> :Set the label item title through title .nameSet the value of tab items.disabledSet tab items to be disabled.Customize the corresponding content for the default slot.</div>`
       },
       'codeFiles': ['basic-usage.vue']
     },
@@ -115,41 +115,6 @@ export default {
       },
       'codeFiles': ['stretch-wh.vue']
     },
-    {
-      'demoId': 'tabs-draggable',
-      'name': { 'zh-CN': '拖拽', 'en-US': 'Drag' },
-      'desc': {
-        'zh-CN': `<div class="tip custom-block"><p class="custom-block-title"> 通过 <code>drop-config</code> 设置 <code>Sortable</code> 排序插件；<br/>
-          <code>tab-drag-start</code> 监听拖拽开始事件；<br/>
-          <code>tab-drag-over</code> 监听拖拽中事件；<br/>
-          <code>tab-drag-end</code> 监听拖拽结束事件，以此改变页签项顺序。</p></div>`,
-        'en-US': `<div class="tip custom-block"><p class="custom-block-title">Set the <code>Sortable</code> sorting plugin through <code>drop configuration</code> <br />
-          <code>tab-drag-start</code> Listen for drag start events<br />
-          <code>tab-drag-over</code> Listen for dragging events<br />
-          <code>tab-drag-end</code> Listen for drag end events to change the order of tags.</p></div>`
-      },
-      'codeFiles': ['tabs-draggable.vue']
-    },
-    {
-      'demoId': 'tabs-events-click',
-      'name': { 'zh-CN': '点击事件', 'en-US': 'Click Event' },
-      'desc': {
-        'zh-CN': '通过 <code>click</code> 监听单击页签项事件。',
-        'en-US': 'Listen for tag item click events through <code>click</code> .'
-      },
-      'codeFiles': ['tabs-events-click.vue']
-    },
-    {
-      'demoId': 'tabs-events-edit',
-      'name': { 'zh-CN': '编辑事件', 'en-US': 'Edit Event' },
-      'desc': {
-        'zh-CN':
-          '通过 <code>editable</code> 设置同时显示 <code>删除</code> 和 <code>添加</code> 按钮， <code>edit</code> 监听这两类按钮的点击事件。',
-        'en-US':
-          'By setting <code>edit</code> to display both <code>delete</code> and <code>add</code> buttons, <code>edit</code> listens for click events of these two types of buttons.'
-      },
-      'codeFiles': ['tabs-events-edit.vue']
-    },
     {
       'demoId': 'custom-tab-title',
       'name': { 'zh-CN': '定义页签项标题', 'en-US': 'Custom Tab Item Title' },
@@ -185,6 +150,41 @@ export default {
           'The Grid component needs to set <code>:auto-resize="true"</code> to adapt to the corresponding changes of the parent element <code>TabItem</code> .'
       },
       'codeFiles': ['show-different-grid-data.vue']
+    },
+    {
+      'demoId': 'tabs-draggable',
+      'name': { 'zh-CN': '拖拽', 'en-US': 'Drag' },
+      'desc': {
+        'zh-CN': `<div class="tip custom-block"><p><code>drop-config</code> 设置 <code>Sortable</code> 排序插件；<br/>
+          <code>tab-drag-start</code> 监听拖拽开始事件；<br/>
+          <code>tab-drag-over</code> 监听拖拽中事件；<br/>
+          <code>tab-drag-end</code> 监听拖拽结束事件，以此改变页签项顺序。</p></div>`,
+        'en-US': `<div class="tip custom-block"><p> <code>drop configuration</code> Set the <code>Sortable</code> sorting plugin<br />
+          <code>tab-drag-start</code> Listen for drag start events<br />
+          <code>tab-drag-over</code> Listen for dragging events<br />
+          <code>tab-drag-end</code> Listen for drag end events to change the order of tags.</p></div>`
+      },
+      'codeFiles': ['tabs-draggable.vue']
+    },
+    {
+      'demoId': 'tabs-events-click',
+      'name': { 'zh-CN': '点击事件', 'en-US': 'Click Event' },
+      'desc': {
+        'zh-CN': '通过 <code>click</code> 监听单击页签项事件。',
+        'en-US': 'Listen for tag item click events through <code>click</code> .'
+      },
+      'codeFiles': ['tabs-events-click.vue']
+    },
+    {
+      'demoId': 'tabs-events-edit',
+      'name': { 'zh-CN': '编辑事件', 'en-US': 'Edit Event' },
+      'desc': {
+        'zh-CN':
+          '通过 <code>editable</code> 设置同时显示 <code>删除</code> 和 <code>添加</code> 按钮， <code>edit</code> 监听这两类按钮的点击事件。',
+        'en-US':
+          'By setting <code>edit</code> to display both <code>delete</code> and <code>add</code> buttons, <code>edit</code> listens for click events of these two types of buttons.'
+      },
+      'codeFiles': ['tabs-events-edit.vue']
     }
   ],
   apis: [
@@ -441,6 +441,81 @@ export default {
           'demoId': 'custom-tab-title'
         }
       ]
+    },
+    {
+      'name': 'tab-item',
+      'type': 'component',
+      'props': [
+        {
+          'name': 'disabled',
+          'type': 'boolean',
+          'defaultValue': 'false',
+          'desc': {
+            'zh-CN': '设置页签项禁用，设置为 true 则无法点击',
+            'en-US': 'Set tab items to disable, set to true to prevent clicking'
+          },
+          'demoId': 'basic-usage'
+        },
+        {
+          'name': 'lazy',
+          'type': 'boolean',
+          'defaultValue': 'false',
+          'desc': {
+            'zh-CN': '设置本页签项内容是否为懒加载，默认为否',
+            'en-US': 'Set whether the content of this tab is lazy loading, default to no'
+          },
+          'demoId': 'lazy'
+        },
+        {
+          'name': 'name',
+          'type': 'string',
+          'defaultValue': '',
+          'desc': { 'zh-CN': '页签项的值', 'en-US': 'Value of tab items' },
+          'demoId': 'basic-usage'
+        },
+        {
+          'name': 'title',
+          'type': 'string',
+          'defaultValue': '',
+          'desc': { 'zh-CN': '页签项标题', 'en-US': 'Tab Item Title' },
+          'demoId': 'basic-usage'
+        },
+        {
+          'name': 'with-close',
+          'type': 'boolean',
+          'defaultValue': 'false',
+          'desc': {
+            'zh-CN': '页签项是否展示删除按钮，与 Tabs 的 with-close 取或，只要有一个为true，则此项展示删除按钮',
+            'en-US': `Does the tab item display a delete button, which is equal to or greater than the 'with close' option in Tabs? As long as one of these options is true, this option displays the delete button`
+          },
+          'demoId': 'tabs-events-close'
+        }
+      ],
+      'events': [
+        {
+          'name': 'tab-nav-update',
+          'type': '() => void',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '当页签项的 title 值发生变化时触发',
+            'en-US': 'Triggered when the title value of the tab item changes'
+          },
+          'demoId': ''
+        }
+      ],
+      'slots': [
+        {
+          'name': 'default',
+          'type': '',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '页签项对应内容部分的默认插槽，用来自定义页签项对应的页面内容',
+            'en-US':
+              'The default slot for the content section corresponding to the tab item, used to customize the page content corresponding to the tab item'
+          },
+          'demoId': 'basic-usage'
+        }
+      ]
     }
   ],
   types: [

package/demos/pc/app/tabs/with-add-composition-api.vue

@@ -21,7 +21,7 @@ const Tabs = ref([
   {
     title: 'Tab 1',
     name: '1',
-    content: 'Tab content '
+    content: 'Tab 1 content '
   },
   {
     title: 'Tab 2',

package/demos/pc/app/tabs/with-add.vue

@@ -27,7 +27,7 @@ export default {
         {
           title: 'Tab 1',
           name: '1',
-          content: 'Tab content '
+          content: 'Tab 1 content '
         },
         {
           title: 'Tab 2',

package/demos/pc/app/tag/{before-delete-composition-api.vue → delete-composition-api.vue}

@@ -1,16 +1,11 @@
 <template>
   <div>
-    <p>
-      <tiny-switch v-model="beforeDeleteValue"></tiny-switch>
-      before-change 返回 {{ beforeDeleteValue }} 时 {{ beforeDeleteText }}
-      <br />
-    </p>
     <tiny-tag
       v-for="tag in tags"
       :key="'tiny-tag1-' + tag.name"
       closable
       :type="tag.type"
-      @close="close(tag)"
+      @close="handleClose(tag)"
       :before-delete="beforeDelete"
       >{{ tag.name }}</tiny-tag
     >
@@ -19,7 +14,7 @@
 
 <script setup>
 import { ref, computed } from 'vue'
-import { Tag as TinyTag, Switch as TinySwitch } from '@opentiny/vue'
+import { Tag as TinyTag, Modal } from '@opentiny/vue'
 
 const tags = ref([
   { name: '标签一', type: '' },
@@ -28,20 +23,15 @@ const tags = ref([
   { name: '标签四', type: 'warning' },
   { name: '标签五', type: 'danger' }
 ])
-const beforeDeleteValue = ref(false)
-const beforeDeleteText = computed(() => {
-  return beforeDeleteValue.value
-    ? '可执行 close 事件，点击删除图标可以删除标签'
-    : '将拦截 close 事件的执行，点击删除图标将无法删除标签'
-})
 
-function close(tag) {
+function handleClose(tag) {
   tags.value.splice(tags.value.indexOf(tag), 1)
+  Modal.message('close 事件')
 }
 
 function beforeDelete(done) {
-  setTimeout(() => {
-    beforeDeleteValue.value && done()
+  Modal.confirm('确认删除？').then((res) => {
+    res === 'confirm' && done()
   })
 }
 </script>

package/demos/pc/app/tag/delete.spec.ts

@@ -0,0 +1,19 @@
+import { expect, test } from '@playwright/test'
+
+test('是否能阻止删除或正常删除标签', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).not.toBeNull())
+  await page.goto('tag#delete')
+
+  const first = page.locator('.tiny-tag').filter({ hasText: '标签一' })
+  const close = first.locator('.tiny-tag__close')
+  const modal = page.locator('.tiny-modal__box').getByText('消息提示确认删除？确认取消')
+
+  await close.click()
+  await modal.waitFor({ state: 'attached', timeout: 100 })
+  await page.getByRole('button', { name: '取消' }).click()
+  await first.isVisible()
+  await close.click()
+  await modal.waitFor({ state: 'attached', timeout: 100 })
+  await page.getByRole('button', { name: '确认' }).click()
+  await expect(first).not.toBeVisible()
+})

package/demos/pc/app/tag/{closable.vue → delete.vue}

@@ -1,12 +1,18 @@
 <template>
-  <div class="tiny-tag-demo">
-    <tiny-tag v-for="tag in tags" :key="'tiny-tag1-' + tag.name" closable :type="tag.type" @close="handleClose(tag)">{{
-      tag.name
-    }}</tiny-tag>
+  <div>
+    <tiny-tag
+      v-for="tag in tags"
+      :key="'tiny-tag1-' + tag.name"
+      closable
+      :type="tag.type"
+      @close="handleClose(tag)"
+      :before-delete="beforeDelete"
+      >{{ tag.name }}</tiny-tag
+    >
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Tag, Modal } from '@opentiny/vue'
 
 export default {
@@ -28,7 +34,18 @@ export default {
     handleClose(tag) {
       this.tags.splice(this.tags.indexOf(tag), 1)
       Modal.message('close 事件')
+    },
+    beforeDelete(done) {
+      Modal.confirm('确认删除？').then((res) => {
+        res === 'confirm' && done()
+      })
     }
   }
 }
 </script>
+
+<style scoped>
+.tiny-tag + .tiny-tag {
+  margin-left: 10px;
+}
+</style>

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

@@ -50,14 +50,15 @@ export default {
       'codeFiles': ['disabled.vue']
     },
     {
-      'demoId': 'closable',
-      'name': { 'zh-CN': '移除', 'en-US': 'Remove' },
+      'demoId': 'delete',
+      'name': { 'zh-CN': '删除操作', 'en-US': 'Delete' },
       'desc': {
-        'zh-CN': '通过 <code>closable</code> 设置展示关闭按钮， <code>close</code> 监听关闭按钮点击事件，做删除操作。',
+        'zh-CN':
+          '通过 <code>closable</code> 设置展示关闭按钮， <code>before-delete</code> 设置删除前的操作，可以在此钩子中做提示或确认；<code>close</code> 监听关闭按钮点击事件，做删除操作。',
         'en-US':
-          'Set the display close button through <code>close</code> , listen to the close button click event, and perform the deletion operation.'
+          'Set the display close button through<code>close</code>, and<code>before-delete</code>to set the operation before deletion, which can be prompted or confirmed in this hook< Code>close</code>Listen to the close button click event and perform the deletion operation.'
       },
-      'codeFiles': ['closable.vue']
+      'codeFiles': ['delete.vue']
     },
     {
       'demoId': 'create',
@@ -95,12 +96,19 @@ export default {
       'name': 'tag',
       'type': 'component',
       'props': [
+        {
+          'name': 'before-delete',
+          'type': '(close: () => void) => void',
+          'defaultValue': '',
+          'desc': { 'zh-CN': '删除前回调函数', 'en-US': 'Delete callback function before deletion' },
+          'demoId': 'delete'
+        },
         {
           'name': 'closable',
           'type': 'boolean',
           'defaultValue': 'false',
           'desc': { 'zh-CN': '是否可关闭', 'en-US': 'Can be disabled' },
-          'demoId': 'closable'
+          'demoId': 'delete'
         },
         {
           'name': 'color',
@@ -189,7 +197,7 @@ export default {
             'zh-CN': '点击关闭按钮时触发的事件',
             'en-US': 'Event triggered when the close button is clicked'
           },
-          'demoId': 'closable'
+          'demoId': 'delete'
         }
       ],
       'slots': [

package/demos/pc/app/text-popup/basic-usage.spec.ts

@@ -4,7 +4,7 @@ test('Textpopup 基本用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('text-popup#basic-usage')
 
-  const preview = page.locator('#preview')
+  const preview = page.locator('#basic-usage')
   const small = preview.locator('input')
   const larger = preview.locator('textarea')
 

package/demos/pc/app/text-popup/clear-value.spec.ts

@@ -4,7 +4,7 @@ test('Textpopup 清空value值', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('text-popup#clear-value')
 
-  const preview = page.locator('#preview')
+  const preview = page.locator('#clear-value')
   const button = preview.getByRole('button', { name: '点击清除' })
   const small = preview.locator('input')
   const larger = preview.locator('textarea')

package/demos/pc/app/text-popup/placeholder.spec.ts

@@ -4,7 +4,7 @@ test('Textpopup 提示占位文本', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('text-popup#placeholder')
 
-  const preview = page.locator('#preview')
+  const preview = page.locator('#placeholder')
   const small = preview.locator('input')
   const larger = preview.locator('textarea')
 

package/demos/pc/app/text-popup/readonly.spec.ts

@@ -4,7 +4,7 @@ test('Textpopup 只读', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('text-popup#readonly')
 
-  const preview = page.locator('#preview')
+  const preview = page.locator('#readonly')
   const small = preview.locator('input')
   const larger = preview.locator('textarea')
 

package/demos/pc/app/text-popup/separtor.spec.ts

@@ -4,7 +4,7 @@ test('Textpopup 分隔符', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('text-popup#separtor')
 
-  const preview = page.locator('#preview')
+  const preview = page.locator('#separtor')
   const small = preview.locator('input')
   const larger = preview.locator('textarea')
 

package/demos/pc/app/text-popup/value.spec.ts

@@ -4,7 +4,7 @@ test('Textpopup 基本用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('text-popup#value')
 
-  const preview = page.locator('#preview')
+  const preview = page.locator('#value')
   const small = preview.locator('input')
   const larger = preview.locator('textarea')
 

package/demos/pc/app/text-popup/webdoc/text-popup.js

@@ -22,7 +22,7 @@ export default {
       'demoId': 'readonly',
       'name': { 'zh-CN': '只读', 'en-US': 'Read-only' },
       'desc': {
-        'zh-CN': '<p>可通过 <code>readonly</code> 设置是否只读。</p>\n',
+        'zh-CN': '<p>通过 <code>readonly</code> 设置是否只读。</p>\n',
         'en-US': '<p>You can use <code>readonly</code> to set whether to read only. </p>\n'
       },
       'codeFiles': ['readonly.vue']
@@ -31,7 +31,7 @@ export default {
       'demoId': 'separtor',
       'name': { 'zh-CN': '分隔符', 'en-US': 'Separator' },
       'desc': {
-        'zh-CN': '<p>可通过 <code>separtor</code> 设置分隔符,在文本框中输入回车就是分隔符的位置。</p>\n',
+        'zh-CN': '<p>通过 <code>separtor</code> 设置分隔符,在文本框中输入回车就是分隔符的位置。</p>\n',
         'en-US':
           '<p>You can use <code>separtor</code> to set the separator. Enter the position of the separator in the text box and press Enter. </p>\n'
       },
@@ -41,7 +41,7 @@ export default {
       'demoId': 'value',
       'name': { 'zh-CN': '绑定值', 'en-US': 'Bound Value' },
       'desc': {
-        'zh-CN': '<p>可通过 <code>value</code> 或 <code>v-model</code> 设置绑定值。</p>\n',
+        'zh-CN': '<p>通过 <code>value</code> 或 <code>v-model</code> 设置绑定值。</p>\n',
         'en-US': '<p>You can set the binding value using <code>value</code> or <code>v-model</code>. </p>\n'
       },
       'codeFiles': ['value.vue']
@@ -56,7 +56,7 @@ export default {
       'demoId': 'width',
       'name': { 'zh-CN': '宽度', 'en-US': 'Width' },
       'desc': {
-        'zh-CN': '<p>可通过 <code>width</code> 设置宽度。</p>\n',
+        'zh-CN': '<p>通过 <code>width</code> 设置宽度。</p>\n',
         'en-US': '<p>You can set the width through <code>width</code>. </p>\n'
       },
       'codeFiles': ['width.vue']
@@ -66,7 +66,7 @@ export default {
     {
       'name': 'text-popup',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'value',
           'type': 'string',
@@ -79,7 +79,7 @@ export default {
           'type': 'string',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '设置输入框内的提示占位文本',
+            'zh-CN': '输入框内的提示占位文本',
             'en-US': 'Set the prompt placeholder text in the text box.'
           },
           'demoId': 'placeholder'
@@ -87,21 +87,21 @@ export default {
         {
           'name': 'readonly',
           'type': 'boolean',
-          'defaultValue': '该属性的默认值为 false',
-          'desc': { 'zh-CN': '设置是否只读', 'en-US': 'Set whether to read only' },
+          'defaultValue': 'false',
+          'desc': { 'zh-CN': '是否只读', 'en-US': 'Set whether to read only' },
           'demoId': 'readonly'
         },
         {
           'name': 'width',
           'type': 'number , string',
-          'defaultValue': '该属性的默认值为 150',
-          'desc': { 'zh-CN': '设置宽度', 'en-US': 'Set width' },
+          'defaultValue': '150',
+          'desc': { 'zh-CN': '宽度', 'en-US': 'Set width' },
           'demoId': 'width'
         },
         {
           'name': 'separtor',
           'type': 'string',
-          'defaultValue': '该属性的默认值为 ,',
+          'defaultValue': '',
           'desc': { 'zh-CN': '分隔符', 'en-US': 'Separator' },
           'demoId': 'separtor'
         }

package/demos/pc/app/text-popup/width.spec.ts

@@ -4,7 +4,7 @@ test('Textpopup 宽度', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('text-popup#width')
 
-  const preview = page.locator('#preview')
+  const preview = page.locator('#width')
   const textPopup = preview.locator('.tiny-text-popup')
 
   await expect(textPopup).toHaveCSS('width', '500px')

package/demos/pc/app/time-line/basic-usage.spec.ts

@@ -4,7 +4,7 @@ test('基本用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('time-line#basic-usage')
 
-  const timeline = page.locator('#preview .tiny-steps')
+  const timeline = page.locator('#basic-usage .tiny-steps')
   const nodes = timeline.locator('.normal')
 
   await expect(nodes.first()).toHaveClass(/process-done/)