@opentiny/vue-docs 2.1.9 → 2.1.10

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

@@ -6,9 +6,9 @@ export default {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
       'desc': {
-        'zh-CN': '<p>通过 <code> data</code> 设置文本内容， <code> value</code> 设置标记内容。</p>\n',
+        'zh-CN': '<p>通过 <code>data</code> 设置文本内容， <code>value</code> 设置标记内容。</p>\n',
         'en-US':
-          '<p>Set the text content through <code> data</code> , and set the tag content through <code> value</code> </p>\n'
+          '<p>Set the text content through <code>data</code> , and set the tag content through <code>value</code> </p>\n'
       },
       'codeFiles': ['basic-usage.vue']
     },
@@ -17,9 +17,9 @@ export default {
       'name': { 'zh-CN': '主題样式', 'en-US': 'Theme Style' },
       'desc': {
         'zh-CN':
-          '<p>通过 <code> type</code> 设置显示主题，可选值： <code> primary、success、warning、danger、info</code> 默认值：danger。</p>\n',
+          '<p>通过 <code>type</code> 设置显示主题，可选值： <code>primary</code> 、<code>success</code> 、<code>warning</code> 、<code>danger</code> 、<code>info</code>。</p>\n',
         'en-US':
-          '<p>Set the display theme through <code> type</code> . Optional values: <code> primary, success, warning, danger, info</code> Default value: danger.</p>\n'
+          '<p>Set the display theme through <code>type</code> . Optional values: <code>primary, success, warning, danger</code>.</p>\n'
       },
       'codeFiles': ['type.vue']
     },
@@ -27,8 +27,8 @@ export default {
       'demoId': 'is-dot',
       'name': { 'zh-CN': '小圆点标记', 'en-US': 'Small dot mark' },
       'desc': {
-        'zh-CN': '<p>通过 <code> is-dot</code> 设置显示小圆点标记。</p>\n',
-        'en-US': '<p>Set the display of small dot markers through <code> is dot</code> settings.</p>\n'
+        'zh-CN': '<p>通过 <code>is-dot</code> 设置显示小圆点标记。</p>\n',
+        'en-US': '<p>Set the display of small dot markers through <code>is dot</code> settings.</p>\n'
       },
       'codeFiles': ['is-dot.vue']
     },
@@ -36,9 +36,9 @@ export default {
       'demoId': 'max',
       'name': { 'zh-CN': '计数最大值', 'en-US': 'Maximum count value' },
       'desc': {
-        'zh-CN': "<p>通过 <code> max</code> 设置最大值，超过最大值会显示 '{max}+'。</p>\n",
+        'zh-CN': "<p>通过 <code>max</code> 设置最大值，超过最大值会显示 '{max}+'。</p>\n",
         'en-US':
-          "<p>By setting the maximum value through <code> max</code> , exceeding the maximum value will display '{max}+'.</p>"
+          "<p>By setting the maximum value through <code>max</code> , exceeding the maximum value will display '{max}+'.</p>"
       },
       'codeFiles': ['max.vue']
     },
@@ -47,9 +47,9 @@ export default {
       'name': { 'zh-CN': '跳转链接', 'en-US': 'Link' },
       'desc': {
         'zh-CN':
-          '<p>通过 <code> href</code> 设置跳转链接， <code> target</code> 设置跳转方式，同 <code> a</code> 标签的 <code> target</code> 属性。</p>\n',
+          '<p>通过 <code>href</code> 设置跳转链接， <code>target</code> 设置跳转方式，同 <code>a</code> 标签的 <code>target</code> 属性。</p>\n',
         'en-US':
-          '<p>Set the jump link through <code> href</code> , and set the jump method using the <code> target</code> attribute of the <code> a</code> tag.</p>\n'
+          '<p>Set the jump link through <code>href</code> , and set the jump method using the <code>target</code> attribute of the <code>a</code> tag.</p>\n'
       },
       'codeFiles': ['link.vue']
     },
@@ -57,8 +57,8 @@ export default {
       'demoId': 'badge-class',
       'name': { 'zh-CN': '自定义类名', 'en-US': 'Custom Class Name' },
       'desc': {
-        'zh-CN': '<p>通过 <code> badge-class</code> 设置自定义类名。</p>\n',
-        'en-US': '<p>Set custom class names through <code> bag class</code> .</p>\n'
+        'zh-CN': '<p>通过 <code>badge-class</code> 设置自定义类名。</p>\n',
+        'en-US': '<p>Set custom class names through <code>bag class</code> .</p>\n'
       },
       'codeFiles': ['badge-class.vue']
     },
@@ -66,8 +66,8 @@ export default {
       'demoId': 'slot-default',
       'name': { 'zh-CN': '自定义文本内容', 'en-US': 'Badge text content' },
       'desc': {
-        'zh-CN': '<p>通过 <code> default slot</code> 自定义文本内容。</p>\n',
-        'en-US': '<p> <code> default slot</code> Tag Content Custom.</p>\n'
+        'zh-CN': '<p>通过 <code>default</code> 插槽自定义文本内容。</p>\n',
+        'en-US': '<p> <code>default slot</code> Tag Content Custom.</p>\n'
       },
       'codeFiles': ['slot-default.vue']
     },
@@ -75,8 +75,8 @@ export default {
       'demoId': 'slot-content',
       'name': { 'zh-CN': '自定义标记内容', 'en-US': 'Customized badge content' },
       'desc': {
-        'zh-CN': '<p>通过 <code> content slot</code> 自定义标记内容。</p>\n',
-        'en-US': '<p> <code> content slot</code> Custom Prompt Content.</p>\n'
+        'zh-CN': '<p>通过 <code>content</code> 插槽自定义标记内容。</p>\n',
+        'en-US': '<p> <code>content slot</code> Custom Prompt Content.</p>\n'
       },
       'codeFiles': ['slot-content.vue']
     },
@@ -84,8 +84,8 @@ export default {
       'demoId': 'dynamic-hidden',
       'name': { 'zh-CN': '消息已读动态隐藏标记', 'en-US': 'Dynamic hiding flag of read messages' },
       'desc': {
-        'zh-CN': '<p>通过 <code> hidden</code> 设置是否隐藏标记。</p>\n',
-        'en-US': '<p>Set whether to hide tags by <code> hidden</code> .</p>\n'
+        'zh-CN': '<p>通过 <code>hidden</code> 设置是否隐藏标记。</p>\n',
+        'en-US': '<p>Set whether to hide tags by <code>hidden</code> .</p>\n'
       },
       'codeFiles': ['dynamic-hidden.vue']
     },
@@ -93,8 +93,8 @@ export default {
       'demoId': 'offset',
       'name': { 'zh-CN': '标记的位置', 'en-US': 'Tag Offset' },
       'desc': {
-        'zh-CN': '<p>通过 <code> offset</code> 调整标记的位置。</p>\n',
-        'en-US': '<p> <code> offset</code> Custom Tag Offset.</p>\n'
+        'zh-CN': '<p>通过 <code>offset</code> 调整标记的位置。</p>\n',
+        'en-US': '<p> <code>offset</code> Custom Tag Offset.</p>\n'
       },
       'codeFiles': ['offset.vue']
     }
@@ -107,7 +107,7 @@ export default {
         {
           'name': 'badge-class',
           'type': 'string',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '自定义标记的类名',
             'en-US': 'Class name for custom tags'
@@ -117,9 +117,9 @@ export default {
         {
           'name': 'data',
           'type': 'string',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
-            'zh-CN': '设置文本内容',
+            'zh-CN': '文本内容',
             'en-US': 'Set Text Content'
           },
           'demoId': 'basic-usage'
@@ -137,7 +137,7 @@ export default {
         {
           'name': 'href',
           'type': 'string',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '指定跳转的目标页面地址',
             'en-US': 'Specify the URL of the target page.'
@@ -149,7 +149,7 @@ export default {
           'type': 'boolean',
           'defaultValue': 'false',
           'desc': {
-            'zh-CN': '设置是否以小圆点的形式来显示标记',
+            'zh-CN': '是否以小圆点的形式来显示标记',
             'en-US': 'Set whether to display the badge in the form of small dots'
           },
           'demoId': 'is-dot'
@@ -157,10 +157,10 @@ export default {
         {
           'name': 'max',
           'type': 'number',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN':
-              '指定徽章显示的最大值,如果实际获取的徽章值超过该最大值，则以最大值后接一个"+"的形式显示徽章数;要求 value 是 number 类型',
+              "指定徽章显示的最大值,如果实际获取的徽章值超过该最大值，则以最大值后接一个 '+' 的形式显示徽章数，要求 value 是 number 类型",
             'en-US':
               'Specifies the maximum number of badges to be displayed. If the actual badge value exceeds the maximum value, the number of badges is displayed in the format of "+". The value must be of the number type.'
           },
@@ -169,9 +169,9 @@ export default {
         {
           'name': 'offset',
           'type': 'string',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
-            'zh-CN': '设置标记位置的偏移量，详见demo',
+            'zh-CN': '设置标记位置的偏移量',
             'en-US': 'Set the offset of the marker position, see demo for details'
           },
           'demoId': 'offset'
@@ -179,9 +179,9 @@ export default {
         {
           'name': 'target',
           'type': 'string',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
-            'zh-CN': '设置点击标记时链接到目标页面的跳转方式，仅在 href 属性存在时使用',
+            'zh-CN': '点击标记时链接到目标页面的跳转方式，仅在 href 属性存在时使用',
             'en-US':
               'Set the jump method for linking to the target page when clicking on the tag, only used when the href attribute exists'
           },
@@ -189,10 +189,10 @@ export default {
         },
         {
           'name': 'type',
-          'type': 'primary | success | warning | danger | info',
-          'defaultValue': 'danger',
+          'type': "'primary' | 'success' | 'warning' | 'danger' | 'info'",
+          'defaultValue': "'danger'",
           'desc': {
-            'zh-CN': '设置标记的类型',
+            'zh-CN': '标记的类型',
             'en-US': 'Set the type of badge'
           },
           'demoId': 'type'
@@ -200,9 +200,9 @@ export default {
         {
           'name': 'value',
           'type': 'number | string',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
-            'zh-CN': '设置相关数据条目数',
+            'zh-CN': '相关数据条目数',
             'en-US': 'Set the number of related data entries'
           },
           'demoId': 'basic-usage'
@@ -213,7 +213,7 @@ export default {
         {
           'name': 'content',
           'type': '',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '消息提示内容',
             'en-US': 'Message Content'
@@ -223,7 +223,7 @@ export default {
         {
           'name': 'default',
           'type': '',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '默认插槽，有data属性时，默认插槽不生效',
             'en-US': 'Default slot. When there is a data attribute, the default slot is not valid'

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

@@ -71,7 +71,7 @@ export default {
         },
         {
           'name': 'separator-icon',
-          'type': 'Component',
+          'type': 'VueComponent',
           'defaultValue': '',
           'desc': { 'zh-CN': '图标分隔符', 'en-US': 'Icon separator' },
           'demoId': 'separator'

package/demos/pc/app/button/dynamic-disabled.spec.js

@@ -4,15 +4,18 @@ test('测试禁用状态是否生效', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('button#dynamic-disabled')
 
-  await page.getByRole('button', { name: '点击禁用按钮' }).click()
-  await expect(page.locator('div:nth-child(2) > button').first()).toBeDisabled()
-  await expect(page.getByRole('button', { name: '默认按钮' }).first()).toBeDisabled()
-  await expect(page.getByRole('button', { name: '主要按钮' }).first()).toBeDisabled()
-  await expect(page.getByRole('button', { name: '成功按钮' }).first()).toBeDisabled()
+  const demo = page.locator('#dynamic-disabled')
+  const switchBtn = demo.locator('.tiny-switch')
 
-  await page.getByRole('button', { name: '点击启用按钮' }).click()
-  await expect(page.locator('div:nth-child(2) > button').first()).not.toBeDisabled()
-  await expect(page.getByRole('button', { name: '默认按钮' }).first()).not.toBeDisabled()
-  await expect(page.getByRole('button', { name: '主要按钮' }).first()).not.toBeDisabled()
-  await expect(page.getByRole('button', { name: '成功按钮' }).first()).not.toBeDisabled()
+  await switchBtn.click()
+  await expect(demo.locator('.tiny-button').first()).toBeDisabled()
+  await expect(demo.getByRole('button', { name: '默认按钮' }).first()).toBeDisabled()
+  await expect(demo.getByRole('button', { name: '主要按钮' }).first()).toBeDisabled()
+  await expect(demo.getByRole('button', { name: '成功按钮' }).first()).toBeDisabled()
+
+  await switchBtn.click()
+  await expect(demo.locator('.tiny-button').first()).not.toBeDisabled()
+  await expect(demo.getByRole('button', { name: '默认按钮' }).first()).not.toBeDisabled()
+  await expect(demo.getByRole('button', { name: '主要按钮' }).first()).not.toBeDisabled()
+  await expect(demo.getByRole('button', { name: '成功按钮' }).first()).not.toBeDisabled()
 })

package/demos/pc/app/button/icon.spec.js

@@ -4,12 +4,14 @@ test('测试是否图标按钮', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('button#icon')
 
-  const preview = page.locator('#preview')
-  const button = preview.locator('.tiny-button')
+  const demo = page.locator('#icon')
+  const button = demo.locator('.tiny-button')
   await expect(button.first().locator('svg')).toBeVisible()
   await expect(button.nth(1).locator('svg')).toBeVisible()
   await expect(button.nth(2).locator('svg')).toBeVisible()
   await expect(button.nth(3).locator('svg')).toBeVisible()
   await expect(button.nth(4).locator('svg')).toBeVisible()
   await expect(button.nth(5).locator('svg')).toBeVisible()
+  await expect(button.nth(6).locator('svg')).toBeVisible()
+  await expect(button.nth(7).locator('svg')).toBeVisible()
 })

package/demos/pc/app/button/loading.spec.js

@@ -3,17 +3,19 @@ import { test, expect } from '@playwright/test'
 test('测试图片按钮是否插入图片成功', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('button#loading')
-  await expect(page.locator('.tiny-button:nth-child(1)')).toHaveClass(/is-loading/)
-  await expect(page.locator('.tiny-button:nth-child(2)')).toHaveClass(/is-loading/)
-  await expect(page.locator('.tiny-button:nth-child(3)')).toHaveClass(/is-loading/)
-  await expect(page.locator('.tiny-button:nth-child(4)')).toHaveClass(/is-loading/)
-  await expect(page.locator('.tiny-button:nth-child(5)')).toHaveClass(/is-loading/)
-  await expect(page.locator('.tiny-button:nth-child(6)')).toHaveClass(/is-loading/)
+  const demo = page.locator('#loading')
 
-  await expect(page.locator('.tiny-button:nth-child(1) >> .tiny-icon-loading')).toBeVisible()
-  await expect(page.locator('.tiny-button:nth-child(2) >> .tiny-icon-loading')).toBeVisible()
-  await expect(page.locator('.tiny-button:nth-child(3) >> .tiny-icon-loading')).toBeVisible()
-  await expect(page.locator('.tiny-button:nth-child(4) >> .tiny-icon-loading')).toBeVisible()
-  await expect(page.locator('.tiny-button:nth-child(5) >> .tiny-icon-loading')).toBeVisible()
-  await expect(page.locator('.tiny-button:nth-child(6) >> .tiny-icon-loading')).toBeVisible()
+  await expect(demo.locator('.tiny-button:nth-child(1)')).toHaveClass(/is-loading/)
+  await expect(demo.locator('.tiny-button:nth-child(2)')).toHaveClass(/is-loading/)
+  await expect(demo.locator('.tiny-button:nth-child(3)')).toHaveClass(/is-loading/)
+  await expect(demo.locator('.tiny-button:nth-child(4)')).toHaveClass(/is-loading/)
+  await expect(demo.locator('.tiny-button:nth-child(5)')).toHaveClass(/is-loading/)
+  await expect(demo.locator('.tiny-button:nth-child(6)')).toHaveClass(/is-loading/)
+
+  await expect(demo.locator('.tiny-button:nth-child(1) >> .tiny-icon-loading')).toBeVisible()
+  await expect(demo.locator('.tiny-button:nth-child(2) >> .tiny-icon-loading')).toBeVisible()
+  await expect(demo.locator('.tiny-button:nth-child(3) >> .tiny-icon-loading')).toBeVisible()
+  await expect(demo.locator('.tiny-button:nth-child(4) >> .tiny-icon-loading')).toBeVisible()
+  await expect(demo.locator('.tiny-button:nth-child(5) >> .tiny-icon-loading')).toBeVisible()
+  await expect(demo.locator('.tiny-button:nth-child(6) >> .tiny-icon-loading')).toBeVisible()
 })

package/demos/pc/app/button/reset-time.spec.js

@@ -4,9 +4,11 @@ test('测试按钮禁用事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('button#reset-time')
 
-  const defalutDisabled = page.getByRole('button', { name: '默认禁用' })
-  const noDisabled = page.getByRole('button', { name: '无禁用' })
-  const fiveSecondDisabled = page.getByRole('button', { name: '禁用 5 秒' })
+  const demo = page.locator('#reset-time')
+
+  const defalutDisabled = demo.getByRole('button', { name: '默认禁用' })
+  const noDisabled = demo.getByRole('button', { name: '无禁用' })
+  const fiveSecondDisabled = demo.getByRole('button', { name: '禁用 5 秒' })
 
   // 默认禁用1S
   await defalutDisabled.click()

package/demos/pc/app/button/size-composition-api.vue

@@ -1,45 +1,47 @@
 <template>
   <tiny-layout>
     <tiny-row>
-      <div class="title">常规按钮尺寸</div>
-      <tiny-button> 默认按钮 </tiny-button>
+      <div class="title">常规按钮尺寸：</div>
       <tiny-button size="large"> 超大按钮 </tiny-button>
       <tiny-button size="medium"> 中等按钮 </tiny-button>
       <tiny-button size="small"> 小型按钮 </tiny-button>
+      <tiny-button> 默认按钮 </tiny-button>
       <tiny-button size="mini"> 超小按钮 </tiny-button>
     </tiny-row>
+
     <tiny-row>
-      <div class="title">朴素按钮尺寸</div>
-      <tiny-button type="primary" plain> 默认按钮 </tiny-button>
+      <div class="title">朴素按钮尺寸：</div>
       <tiny-button type="primary" size="large" plain> 超大按钮 </tiny-button>
       <tiny-button type="primary" size="medium" plain> 中等按钮 </tiny-button>
       <tiny-button type="primary" size="small" plain> 小型按钮 </tiny-button>
+      <tiny-button type="primary" plain> 默认按钮 </tiny-button>
       <tiny-button type="primary" size="mini" plain> 超小按钮 </tiny-button>
     </tiny-row>
+
     <tiny-row>
-      <div class="title">圆角按钮尺寸</div>
-      <tiny-button type="success" round> 默认按钮 </tiny-button>
+      <div class="title">圆角按钮尺寸：</div>
       <tiny-button type="success" size="large" round> 超大按钮 </tiny-button>
       <tiny-button type="success" size="medium" round> 中等按钮 </tiny-button>
       <tiny-button type="success" size="small" round> 小型按钮 </tiny-button>
+      <tiny-button type="success" round> 默认按钮 </tiny-button>
       <tiny-button type="success" size="mini" round> 超小按钮 </tiny-button>
     </tiny-row>
 
     <tiny-row>
-      <div class="title">圆形按钮尺寸</div>
-      <tiny-button type="warning" :icon="TinyIconEdit" circle></tiny-button>
+      <div class="title">圆形按钮尺寸：</div>
       <tiny-button type="warning" size="large" :icon="TinyIconEdit" circle> </tiny-button>
       <tiny-button type="warning" size="medium" :icon="TinyIconEdit" circle> </tiny-button>
       <tiny-button type="warning" size="small" :icon="TinyIconEdit" circle> </tiny-button>
+      <tiny-button type="warning" :icon="TinyIconEdit" circle></tiny-button>
       <tiny-button type="warning" size="mini" :icon="TinyIconEdit" circle> </tiny-button>
     </tiny-row>
 
     <tiny-row>
-      <div class="title">纯图标按钮尺寸</div>
-      <tiny-button :icon="TinyIconDel" type="text" />
+      <div class="title">纯图标按钮尺寸：</div>
       <tiny-button :icon="TinyIconDel" type="text" size="large" />
       <tiny-button :icon="TinyIconDel" type="text" size="medium" />
       <tiny-button :icon="TinyIconDel" type="text" size="small" />
+      <tiny-button :icon="TinyIconDel" type="text" />
       <tiny-button :icon="TinyIconDel" type="text" size="mini" />
     </tiny-row>
   </tiny-layout>
@@ -55,8 +57,10 @@ const TinyIconEdit = iconEdit()
 
 <style scoped>
 .title {
-  font-size: 18px;
-  margin-bottom: 10px;
+  font-size: 16px;
+  margin-top: 10px;
+  margin-bottom: 14px;
+  font-weight: bold;
 }
 .tiny-row {
   margin-bottom: 20px;

package/demos/pc/app/button/size.spec.js

@@ -3,8 +3,18 @@ import { test, expect } from '@playwright/test'
 test('测试按钮尺寸', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('button#size')
-  await expect(page.getByRole('button', { name: '超大按钮' }).first()).toHaveClass(/tiny-button--large/)
-  await expect(page.getByRole('button', { name: '中等按钮' }).first()).toHaveClass(/tiny-button--medium/)
-  await expect(page.getByRole('button', { name: '小型按钮' }).first()).toHaveClass(/tiny-button--small/)
-  await expect(page.getByRole('button', { name: '超小按钮' }).first()).toHaveClass(/tiny-button--mini/)
+
+  const demo = page.locator('#size')
+  // 判断类名是否正确
+  await expect(demo.getByRole('button', { name: '超大按钮' }).first()).toHaveClass(/tiny-button--large/)
+  await expect(demo.getByRole('button', { name: '中等按钮' }).first()).toHaveClass(/tiny-button--medium/)
+  await expect(demo.getByRole('button', { name: '小型按钮' }).first()).toHaveClass(/tiny-button--small/)
+  await expect(demo.getByRole('button', { name: '超小按钮' }).first()).toHaveClass(/tiny-button--mini/)
+
+  // 判断高度是否正确
+  await expect(demo.getByRole('button', { name: '超大按钮' }).first()).toHaveCSS('height', '48px')
+  await expect(demo.getByRole('button', { name: '中等按钮' }).first()).toHaveCSS('height', '40px')
+  await expect(demo.getByRole('button', { name: '小型按钮' }).first()).toHaveCSS('height', '32px')
+  await expect(demo.getByRole('button', { name: '默认按钮' }).first()).toHaveCSS('height', '28px')
+  await expect(demo.getByRole('button', { name: '超小按钮' }).first()).toHaveCSS('height', '24px')
 })

package/demos/pc/app/button/size.vue

@@ -1,46 +1,48 @@
 <template>
   <tiny-layout>
     <tiny-row>
-      <div class="title">常规按钮尺寸</div>
-      <tiny-button> 默认按钮 </tiny-button>
+      <div class="title">常规按钮尺寸：</div>
       <tiny-button size="large"> 超大按钮 </tiny-button>
       <tiny-button size="medium"> 中等按钮 </tiny-button>
       <tiny-button size="small"> 小型按钮 </tiny-button>
+      <tiny-button> 默认按钮 </tiny-button>
       <tiny-button size="mini"> 超小按钮 </tiny-button>
     </tiny-row>
+
     <tiny-row>
-      <div class="title">朴素按钮尺寸</div>
-      <tiny-button type="primary" plain> 默认按钮 </tiny-button>
+      <div class="title">朴素按钮尺寸：</div>
       <tiny-button type="primary" size="large" plain> 超大按钮 </tiny-button>
       <tiny-button type="primary" size="medium" plain> 中等按钮 </tiny-button>
       <tiny-button type="primary" size="small" plain> 小型按钮 </tiny-button>
+      <tiny-button type="primary" plain> 默认按钮 </tiny-button>
       <tiny-button type="primary" size="mini" plain> 超小按钮 </tiny-button>
     </tiny-row>
+
     <tiny-row>
-      <div class="title">圆角按钮尺寸</div>
-      <tiny-button type="success" round> 默认按钮 </tiny-button>
+      <div class="title">圆角按钮尺寸：</div>
       <tiny-button type="success" size="large" round> 超大按钮 </tiny-button>
       <tiny-button type="success" size="medium" round> 中等按钮 </tiny-button>
       <tiny-button type="success" size="small" round> 小型按钮 </tiny-button>
+      <tiny-button type="success" round> 默认按钮 </tiny-button>
       <tiny-button type="success" size="mini" round> 超小按钮 </tiny-button>
     </tiny-row>
 
     <tiny-row>
-      <div class="title">圆形按钮尺寸</div>
-      <tiny-button type="warning" :icon="IconEdit" circle></tiny-button>
-      <tiny-button type="warning" size="large" :icon="IconEdit" circle> </tiny-button>
-      <tiny-button type="warning" size="medium" :icon="IconEdit" circle> </tiny-button>
-      <tiny-button type="warning" size="small" :icon="IconEdit" circle> </tiny-button>
-      <tiny-button type="warning" size="mini" :icon="IconEdit" circle> </tiny-button>
+      <div class="title">圆形按钮尺寸：</div>
+      <tiny-button type="warning" size="large" :icon="TinyIconEdit" circle> </tiny-button>
+      <tiny-button type="warning" size="medium" :icon="TinyIconEdit" circle> </tiny-button>
+      <tiny-button type="warning" size="small" :icon="TinyIconEdit" circle> </tiny-button>
+      <tiny-button type="warning" :icon="TinyIconEdit" circle></tiny-button>
+      <tiny-button type="warning" size="mini" :icon="TinyIconEdit" circle> </tiny-button>
     </tiny-row>
 
     <tiny-row>
-      <div class="title">纯图标按钮尺寸</div>
-      <tiny-button :icon="IconDel" type="text" />
-      <tiny-button :icon="IconDel" type="text" size="large" />
-      <tiny-button :icon="IconDel" type="text" size="medium" />
-      <tiny-button :icon="IconDel" type="text" size="small" />
-      <tiny-button :icon="IconDel" type="text" size="mini" />
+      <div class="title">纯图标按钮尺寸：</div>
+      <tiny-button :icon="TinyIconDel" type="text" size="large" />
+      <tiny-button :icon="TinyIconDel" type="text" size="medium" />
+      <tiny-button :icon="TinyIconDel" type="text" size="small" />
+      <tiny-button :icon="TinyIconDel" type="text" />
+      <tiny-button :icon="TinyIconDel" type="text" size="mini" />
     </tiny-row>
   </tiny-layout>
 </template>
@@ -57,8 +59,8 @@ export default {
   },
   data() {
     return {
-      IconDel: iconDel(),
-      IconEdit: iconEdit()
+      TinyIconDel: iconDel(),
+      TinyIconEdit: iconEdit()
     }
   }
 }
@@ -66,8 +68,10 @@ export default {
 
 <style scoped>
 .title {
-  font-size: 18px;
-  margin-bottom: 10px;
+  font-size: 16px;
+  margin-top: 10px;
+  margin-bottom: 14px;
+  font-weight: bold;
 }
 .tiny-row {
   margin-bottom: 20px;

package/demos/pc/app/button/text-composition-api.vue

@@ -1,17 +1,16 @@
 <template>
   <div>
-    <div>
-      <tiny-button type="text" :icon="TinyIconMail"> </tiny-button>
-      <tiny-button type="text" :icon="TinyIconMail" disabled> </tiny-button>
-    </div>
-    <div>
-      <tiny-button type="text" text="文本按钮"> </tiny-button>
-      <tiny-button type="text" text="文本按钮" disabled></tiny-button>
-    </div>
-    <div>
-      <tiny-button type="text" :icon="TinyIconMail" text="图标加文字"> </tiny-button>
-      <tiny-button type="text" :icon="TinyIconMail" text="图标加文字" disabled> </tiny-button>
-    </div>
+    <div class="title">纯图标按钮：</div>
+    <tiny-button type="text" :icon="TinyIconMail"> </tiny-button>
+    <tiny-button type="text" :icon="TinyIconMail" disabled> </tiny-button>
+
+    <div class="title">纯文本按钮：</div>
+    <tiny-button type="text" text="文本按钮"> </tiny-button>
+    <tiny-button type="text" text="文本按钮" disabled></tiny-button>
+
+    <div class="title">图标加文字按钮：</div>
+    <tiny-button type="text" :icon="TinyIconMail" text="图标加文字"> </tiny-button>
+    <tiny-button type="text" :icon="TinyIconMail" text="图标加文字" disabled> </tiny-button>
   </div>
 </template>
 
@@ -21,3 +20,12 @@ import { Button as TinyButton } from '@opentiny/vue'
 
 const TinyIconMail = iconMail()
 </script>
+
+<style scoped>
+.title {
+  margin-top: 16px;
+  padding: 10px 0 6px 10px;
+  font-size: 16px;
+  font-weight: bold;
+}
+</style>

package/demos/pc/app/button/text.spec.js

@@ -3,6 +3,16 @@ import { test, expect } from '@playwright/test'
 test('测试按钮文字', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('button#text')
-  await expect(page.getByRole('button', { name: '文本按钮' })).toHaveClass(/tiny-button--text/)
-  await expect(page.getByRole('button', { name: 'text属性' })).toHaveClass(/tiny-button--text/)
+
+  const demo = page.locator('#text')
+  await expect(demo.locator('.tiny-button').first()).toHaveClass(/tiny-button--text/)
+  await expect(demo.locator('.tiny-button').nth(1)).toHaveClass(/tiny-button--text/)
+  await expect(demo.locator('.tiny-button').nth(2)).toHaveClass(/tiny-button--text/)
+  await expect(demo.locator('.tiny-button').nth(3)).toHaveClass(/tiny-button--text/)
+  await expect(demo.locator('.tiny-button').nth(4)).toHaveClass(/tiny-button--text/)
+  await expect(demo.locator('.tiny-button').nth(5)).toHaveClass(/tiny-button--text/)
+
+  // 纯文本和图标加文本的字体颜色不一样
+  await expect(demo.locator('.tiny-button').nth(2)).toHaveCSS('color', 'rgb(94, 124, 224)')
+  await expect(demo.locator('.tiny-button').nth(4)).toHaveCSS('color', 'rgb(37, 43, 58)')
 })

package/demos/pc/app/button/text.vue

@@ -1,17 +1,16 @@
 <template>
   <div>
-    <div>
-      <tiny-button type="text" :icon="TinyIconMail"> </tiny-button>
-      <tiny-button type="text" :icon="TinyIconMail" disabled> </tiny-button>
-    </div>
-    <div>
-      <tiny-button type="text" text="文本按钮"> </tiny-button>
-      <tiny-button type="text" text="文本按钮" disabled></tiny-button>
-    </div>
-    <div>
-      <tiny-button type="text" :icon="TinyIconMail" text="图标加文字"> </tiny-button>
-      <tiny-button type="text" :icon="TinyIconMail" text="图标加文字" disabled> </tiny-button>
-    </div>
+    <div class="title">纯图标按钮：</div>
+    <tiny-button type="text" :icon="TinyIconMail"> </tiny-button>
+    <tiny-button type="text" :icon="TinyIconMail" disabled> </tiny-button>
+
+    <div class="title">纯文本按钮：</div>
+    <tiny-button type="text" text="文本按钮"> </tiny-button>
+    <tiny-button type="text" text="文本按钮" disabled></tiny-button>
+
+    <div class="title">图标加文字按钮：</div>
+    <tiny-button type="text" :icon="TinyIconMail" text="图标加文字"> </tiny-button>
+    <tiny-button type="text" :icon="TinyIconMail" text="图标加文字" disabled> </tiny-button>
   </div>
 </template>
 
@@ -30,3 +29,12 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.title {
+  margin-top: 16px;
+  padding: 10px 0 6px 10px;
+  font-size: 16px;
+  font-weight: bold;
+}
+</style>