@opentiny/vue-docs 2.2.5 → 2.2.7

package/demos/pc/app/alert/custom-close-composition-api.vue

@@ -3,7 +3,7 @@
     是否显示自定义告警组件：<tiny-switch v-model="show"></tiny-switch>
     <tiny-alert description="自定义告警组件" v-show="show" :closable="false">
       <template #close>
-        <icon-close-circle @click="show = !show"></icon-close-circle>
+        <tiny-icon-close-circle @click="show = !show"></tiny-icon-close-circle>
       </template>
     </tiny-alert>
     <tiny-alert type="error" description="关闭按钮自定义文本" close-text="关闭"></tiny-alert>
@@ -14,7 +14,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Button as TinyButton, Alert as TinyAlert, Switch as TinySwitch, Modal } from '@opentiny/vue'
+import { Alert as TinyAlert, Switch as TinySwitch, Modal } from '@opentiny/vue'
 import { iconCloseCircle } from '@opentiny/vue-icon'
 
 const show = ref(true)

package/demos/pc/app/alert/custom-close.vue

@@ -3,7 +3,7 @@
     是否显示自定义告警组件：<tiny-switch v-model="show"></tiny-switch>
     <tiny-alert description="自定义告警组件" v-show="show" :closable="false">
       <template #close>
-        <icon-close-circle @click="show = !show"></icon-close-circle>
+        <tiny-icon-close-circle @click="show = !show"></tiny-icon-close-circle>
       </template>
     </tiny-alert>
     <tiny-alert type="error" description="关闭按钮自定义文本" close-text="关闭"></tiny-alert>
@@ -13,15 +13,14 @@
 </template>
 
 <script>
-import { Button, Alert, Modal, Switch } from '@opentiny/vue'
+import { Alert, Modal, Switch } from '@opentiny/vue'
 import { iconCloseCircle } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    TinyButton: Button,
     TinyAlert: Alert,
     TinySwitch: Switch,
-    IconCloseCircle: iconCloseCircle()
+    TinyIconCloseCircle: iconCloseCircle()
   },
   data() {
     return {

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

@@ -75,7 +75,7 @@ export default {
     {
       'name': 'amount',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'placeholder',
           'type': 'string',

package/demos/pc/app/anchor/basic-usage-composition-api.vue

@@ -1,6 +1,8 @@
 <template>
-  <tiny-switch v-model="type" true-value="line" false-value="dot"> </tiny-switch>
-  当前类型：{{ type }}
+  <div class="demo-top mb10">
+    <tiny-switch v-model="type" true-value="line" false-value="dot"> </tiny-switch>
+    <span>当前类型：{{ type }}</span>
+  </div>
   <tiny-anchor :links="links" :type="type"></tiny-anchor>
 </template>
 
@@ -45,3 +47,10 @@ const links = ref([
 
 const type = ref('dot')
 </script>
+
+<style scoped>
+.demo-top {
+  display: flex;
+  align-items: center;
+}
+</style>

package/demos/pc/app/anchor/basic-usage.vue

@@ -1,7 +1,9 @@
 <template>
   <div>
-    <tiny-switch v-model="type" true-value="line" false-value="dot"> </tiny-switch>
-    当前类型：{{ type }}
+    <div class="demo-top mb10">
+      <tiny-switch v-model="type" true-value="line" false-value="dot"> </tiny-switch>
+      <span>当前类型：{{ type }}</span>
+    </div>
     <tiny-anchor :links="links" :type="type"></tiny-anchor>
   </div>
 </template>
@@ -55,3 +57,10 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-top {
+  display: flex;
+  align-items: center;
+}
+</style>

package/demos/pc/app/anchor/is-affix-composition-api.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="wrap">
-    <tiny-switch v-model="isAffix"></tiny-switch>
-    <span>{{ isAffix ? '关闭固定模式' : '打开固定模式' }}</span>
+    <div class="demo-top mb10">
+      <tiny-switch v-model="isAffix"></tiny-switch>
+      <span>{{ isAffix ? '关闭固定模式' : '打开固定模式' }}</span>
+    </div>
     <tiny-anchor :links="links" :is-affix="isAffix"></tiny-anchor>
   </div>
 </template>
@@ -51,4 +53,8 @@ const links = ref([
 .wrap {
   min-height: 180px;
 }
+.demo-top {
+  display: flex;
+  align-items: center;
+}
 </style>

package/demos/pc/app/anchor/is-affix.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="wrap">
-    <tiny-switch v-model="isAffix"></tiny-switch>
-    <span>{{ isAffix ? '关闭固定模式' : '打开固定模式' }}</span>
+    <div class="demo-top mb10">
+      <tiny-switch v-model="isAffix"></tiny-switch>
+      <span>{{ isAffix ? '关闭固定模式' : '打开固定模式' }}</span>
+    </div>
     <tiny-anchor :links="links" :is-affix="isAffix"></tiny-anchor>
   </div>
 </template>
@@ -60,4 +62,8 @@ export default {
 .wrap {
   min-height: 180px;
 }
+.demo-top {
+  display: flex;
+  align-items: center;
+}
 </style>

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

@@ -25,9 +25,9 @@ export default {
       'name': { 'zh-CN': '滚动容器', 'en-US': 'Rolling Container' },
       'desc': {
         'zh-CN': `通过 <code>container-id</code> 设置滚动容器， <code>link-click</code> 监听锚点点击事件，阻止浏览器默认行为，实现单页面 <code>hash</code> 路由模式的页内跳转，在指定容器内滚动。<br/>
-            <code>mask-class</code> 设置自定义类名，高亮显示导航的目标元素。`,
+            <code>mark-class</code> 设置自定义类名，高亮显示导航的目标元素。`,
         'en-US': `By setting the scrolling container through <code>container-id</code> , <code>link-click</code> listens for anchor click events, prevents browser default behavior, and implements single page <code>hash</code> routing mode for page hopping, scrolling within the specified container<br/>
-             <code>mask-class</code> Set a custom class name to highlight the target element for navigation.`
+             <code>mark-class</code> Set a custom class name to highlight the target element for navigation.`
       },
       'codeFiles': ['set-container.vue']
     },
@@ -77,7 +77,7 @@ export default {
           'demoId': 'basic-usage'
         },
         {
-          'name': 'mask-class',
+          'name': 'mark-class',
           'type': 'string',
           'defaultValue': '',
           'desc': {

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

@@ -56,7 +56,7 @@ export default {
     {
       'name': 'area',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'modelValue / v-model',
           'type': 'string',

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

@@ -6,8 +6,8 @@ export default {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基础用法', 'en-US': 'Basic Usage' },
       'desc': {
-        'zh-CN': '',
-        'en-US': ''
+        'zh-CN': '<p>通过设置 <code>fetch-suggestions</code> 方法设置输入建议。</p>',
+        'en-US': '<p> Set input suggestions by setting the <code>fetch-suggestions</code> method.'
       },
       'codeFiles': ['basic-usage.vue']
     },
@@ -43,8 +43,10 @@ export default {
       'demoId': 'slot',
       'name': { 'zh-CN': '插槽', 'en-US': 'slot' },
       'desc': {
-        'zh-CN': '<p>分别配置 <code>prepend</code>、<code>append</code>、<code>prefix</code>、<code>suffix</code>、<code>default</code> 插槽。</p>',
-        'en-US': '<p>Configure <code>prepend</code>, <code>append</code>, <code>prefix</code>, <code>default</code>, and <code>suffix</code> slots.</p>'
+        'zh-CN':
+          '<p>分别配置 <code>prepend</code>、<code>append</code>、<code>prefix</code>、<code>suffix</code>、<code>default</code> 插槽。</p>',
+        'en-US':
+          '<p>Configure <code>prepend</code>, <code>append</code>, <code>prefix</code>, <code>default</code>, and <code>suffix</code> slots.</p>'
       },
       'codeFiles': ['slot.vue']
     },
@@ -113,8 +115,7 @@ export default {
       'demoId': 'placement',
       'name': { 'zh-CN': '菜单弹出位置', 'en-US': 'Menu Pop-up Position' },
       'desc': {
-        'zh-CN':
-          '<p><code>placement</code> 属性可以设置菜单弹出位置，默认为 <code>bottom-start</code>。</p>\n',
+        'zh-CN': '<p><code>placement</code> 属性可以设置菜单弹出位置，默认为 <code>bottom-start</code>。</p>\n',
         'en-US':
           '<p><code>placement</code> property can be used to set the menu pop-up position. The default value is <code>bottom-start</code>. </p>\n'
       },
@@ -182,7 +183,7 @@ export default {
         {
           'name': 'value-key',
           'type': 'string',
-          'defaultValue': 'value',
+          'defaultValue': `'value'`,
           'desc': {
             'zh-CN': '在输入建议对象中，用于显示和匹配输入的键名',
             'en-US': 'In the Input Suggestion object, key names for displaying and matching inputs'
@@ -210,8 +211,7 @@ export default {
           'defaultValue': `'bottom-start'`,
           'desc': {
             'zh-CN': '菜单弹出位置',
-            'en-US':
-              'Menu pop-up position'
+            'en-US': 'Menu pop-up position'
           },
           'demoId': 'placement'
         },
@@ -249,7 +249,7 @@ export default {
           'name': 'name',
           'type': 'string',
           'defaultValue': '',
-          'desc': { 'zh-CN': 'input元素的原生属性', 'en-US': 'Native attributes of the input element' }
+          'desc': { 'zh-CN': 'input 元素的原生属性', 'en-US': 'Native attributes of the input element' }
         },
         {
           'name': 'select-when-unmatched',
@@ -271,14 +271,14 @@ export default {
         },
         {
           'name': 'prefix-icon',
-          'type': 'Component',
+          'type': 'VueComponent',
           'defaultValue': '',
           'desc': { 'zh-CN': '输入框头部图标', 'en-US': 'Icon on the header of the text box' },
           'demoId': 'custom-icon'
         },
         {
           'name': 'suffix-icon',
-          'type': 'Component',
+          'type': 'VueComponent',
           'defaultValue': '',
           'desc': { 'zh-CN': '输入框尾部图标', 'en-US': 'Icon at the end of the text box' },
           'demoId': 'custom-icon'
@@ -330,10 +330,11 @@ export default {
       'events': [
         {
           'name': 'select',
-          'type': '(selection: object) => void',
+          'type': '(selection: IAutocompleteSuggestionItem) => void',
+          'typeAnchorName': 'IAutocompleteSuggestionItem',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '点击选中建议项时触发，回调参数为fetch-suggestions中传入的项',
+            'zh-CN': '点击选中建议项时触发，回调参数为 fetch-suggestions 中传入的项',
             'en-US':
               'Triggered when you click to select a suggestion item. The callback parameter is the item passed in fetch-suggestions'
           },
@@ -373,13 +374,26 @@ export default {
           'name': 'default',
           'type': '',
           'defaultValue': '',
-          'desc': { 'zh-CN': '下拉列表项插槽，插槽参数: arg: { slotScope: object }, 其中object是fetch-suggestions中传入的项', 'en-US': 'Drop-down list item slot, slot parameter: arg: {slotScope: object}, where object is the item passed in fetch-suggestions' },
+          'desc': {
+            'zh-CN':
+              '下拉列表项插槽，插槽参数: arg: { slotScope: IAutocompleteSuggestionItem }, 其中 slotScope 是 fetch-suggestions 中传入的项',
+            'en-US':
+              'Drop-down list item slot, slot parameter: arg: { slotScope: IAutocompleteSuggestionItem }, where slotScope is the item passed in fetch-suggestions'
+          },
           'demoId': 'slot'
         }
       ]
     }
   ],
   types: [
+    {
+      name: 'IAutocompleteSuggestionItem',
+      type: 'type',
+      code: `interface IAutocompleteSuggestionItem {
+  [key: string]: string | undefined
+  value?: string
+}`
+    },
     {
       name: 'IAutocompletePlacement',
       type: 'type',
@@ -388,7 +402,7 @@ export default {
     {
       name: 'IAutocompleteFetchSuggestions',
       type: 'type',
-      code: 'type IAutocompleteFetchSuggestions = (queryString: string, callback: (suggestions: object[]) => void) => void'
+      code: 'type IAutocompleteFetchSuggestions = (queryString: string, callback: (suggestions: IAutocompleteSuggestionItem[]) => void) => void'
     }
   ]
 }

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

@@ -6,8 +6,8 @@ export default {
       'demoId': 'base',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
       'desc': {
-        'zh-CN': `<code>Breadcrumb</code>：通过 <code>select</code> 监听面包屑选中事件；<br/>
-                  <code>BreadcrumbItem</code>：通过 <code>to</code> 设置选项路由跳转对象，<code></code> 设置选项名称，<code>select</code> 监听选项选中事件。`,
+        'zh-CN': `<code>Breadcrumb</code>：通过 <code>select</code> 监听面包屑选中事件。<br/>
+                  <code>BreadcrumbItem</code>：通过 <code>to</code> 设置选项路由跳转对象，<code>label</code> 设置选项名称，<code>select</code> 监听选项选中事件。`,
         'en-US': `<code>Breadcrumb</code>: Listen for breadcrumb selection events through<code>select</code>; <br/>
                   <code>BreadcrumbItem</code>: Route the jump object through the <code>to</code>setting option,<code></code>setting option name,<code>select</code>listening for option selection events.`
       },
@@ -71,7 +71,7 @@ export default {
         },
         {
           'name': 'separator-icon',
-          'type': 'VueComponent',
+          'type': 'vueComponent',
           'defaultValue': '',
           'desc': { 'zh-CN': '图标分隔符', 'en-US': 'Icon separator' },
           'demoId': 'separator'

package/demos/pc/app/bulletin-board/active-name.spec.ts

@@ -4,14 +4,13 @@ test('BulletinBoard 默认激活的选项卡', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('bulletin-board#active-name')
 
-  const preview = page.locator('#preview')
+  const preview = page.locator('#active-name')
   const tabTitle = preview.locator('.tiny-tabs__item')
   const tabContent = preview.locator('.tiny-tab-pane')
 
   // 激活第二项选项卡
   await expect(tabTitle.nth(1)).toHaveClass(/is-active/)
   await expect(tabTitle.nth(1)).toHaveCSS('color', 'rgb(94, 124, 224)')
-  await expect(tabTitle.nth(1)).toHaveCSS('border-bottom', '3px solid rgb(94, 124, 224)')
 
   await expect(tabContent.nth(1)).toHaveClass(/active-item/)
   await expect(tabContent.nth(1)).toBeVisible()

package/demos/pc/app/bulletin-board/base.spec.ts

@@ -4,14 +4,14 @@ test('BulletinBoard 基本用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('bulletin-board#base')
 
-  const preview = page.locator('#preview')
+  const preview = page.locator('#base')
   const tabTitle = preview.locator('.tiny-tabs__item')
   const tabContent = preview.locator('.tiny-tab-pane')
 
   // 默认激活第一项选项卡
   await expect(tabTitle.first()).toHaveClass(/is-active/)
+  await expect(tabTitle.first()).toContainText('TINY 更新日志')
   await expect(tabTitle.first()).toHaveCSS('color', 'rgb(94, 124, 224)')
-  await expect(tabTitle.first()).toHaveCSS('border-bottom', '3px solid rgb(94, 124, 224)')
   await expect(tabContent.first()).toHaveClass(/active-item/)
   await expect(tabContent.first()).toBeVisible()
 
@@ -25,7 +25,6 @@ test('BulletinBoard 基本用法', async ({ page }) => {
     await tabTitle.nth(i).click()
     await expect(tabTitle.nth(i)).toHaveClass(/is-active/)
     await expect(tabTitle.nth(i)).toHaveCSS('color', 'rgb(94, 124, 224)')
-    await expect(tabTitle.nth(i)).toHaveCSS('border-bottom', '3px solid rgb(94, 124, 224)')
     await expect(tabContent.nth(i)).toHaveClass(/active-item/)
     await expect(tabContent.nth(i)).toBeVisible()
   }

package/demos/pc/app/bulletin-board/icon.spec.ts

@@ -4,7 +4,7 @@ test('BulletinBoard 自定义新公告前缀', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('bulletin-board#icon')
 
-  const preview = page.locator('#preview')
+  const preview = page.locator('#icon')
   const tabContent = preview.locator('.tiny-tab-pane')
 
   // 自定义图标替代默认文字'NEW'

package/demos/pc/app/bulletin-board/more-link.spec.ts

@@ -4,8 +4,14 @@ test('BulletinBoard 显示 “更多” 链接(', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('bulletin-board#more-link')
 
-  const preview = page.locator('#preview')
+  const preview = page.locator('#more-link')
   const moreLink = preview.locator('.tiny-bulletin-board__more-link')
 
-  await expect(moreLink).toHaveCount(3)
+  await expect(moreLink.nth(0)).toContainText('更多')
+  await expect(moreLink.nth(1)).toContainText('更多')
+  await expect(moreLink.nth(2)).toContainText('更多')
+
+  await expect(moreLink.nth(0)).toHaveAttribute('href', '/Alert')
+  await expect(moreLink.nth(1)).toHaveAttribute('href', '/Alert')
+  await expect(moreLink.nth(2)).toHaveAttribute('href', '/Alert')
 })

package/demos/pc/app/bulletin-board/route.spec.ts

@@ -1,12 +1,12 @@
 import { test, expect } from '@playwright/test'
 
-test('BulletinBoard 基于Route的跳转(', async ({ page }) => {
+test('BulletinBoard 基于Route的跳转', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('bulletin-board#route')
 
-  const preview = page.locator('#preview')
+  const preview = page.locator('#route')
   const contentTitle = preview.locator('.tiny-bulletin-board__textTitle')
 
   // 判断a标签href属性值
-  expect(await contentTitle.getAttribute('href')).toBe('/#/Alert')
+  await expect(contentTitle).toHaveAttribute('href', '/#/Alert')
 })

package/demos/pc/app/bulletin-board/tab-title.spec.ts

@@ -4,7 +4,7 @@ test('BulletinBoard 选项卡标题(', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('bulletin-board#tab-title')
 
-  const preview = page.locator('#preview')
+  const preview = page.locator('#tab-title')
   const tabTitle = preview.locator('.tiny-tabs__item')
 
   await expect(tabTitle).toHaveCount(3)

package/demos/pc/app/bulletin-board/title.spec.ts

@@ -4,7 +4,7 @@ test('BulletinBoard 公告牌标题(', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('bulletin-board#title')
 
-  const preview = page.locator('#preview')
+  const preview = page.locator('#title')
   const title = preview.locator('.tiny-bulletin-board__title')
 
   await expect(title).toBeVisible()

package/demos/pc/app/bulletin-board/url.spec.ts

@@ -1,12 +1,12 @@
 import { test, expect } from '@playwright/test'
 
-test('BulletinBoard 基于Url的跳转(', async ({ page }) => {
+test('BulletinBoard 基于Url的跳转', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('bulletin-board#url')
 
-  const preview = page.locator('#preview')
+  const preview = page.locator('#url')
   const contentTitle = preview.locator('.tiny-bulletin-board__textTitle')
 
   // a标签href属性值
-  expect(await contentTitle.getAttribute('href')).toBe('localhost:3000/#/webcore/zh-CN/guide/changelog')
+  await expect(contentTitle).toHaveAttribute('href', 'localhost:3000/#/webcore/zh-CN/guide/changelog')
 })

package/demos/pc/app/bulletin-board/webdoc/bulletin-board.js

@@ -7,7 +7,7 @@ export default {
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
       'desc': {
         'zh-CN':
-          '<p>必须设置 <code>data</code> 属性设置公告牌公告信息数据，以及 <code>tab-title</code> 属性设置每个公告牌标题。</p>\n',
+          '<p>通过 <code>data</code> 设置公告牌公告信息数据，<code>tab-title</code> 属性设置每个公告牌标题。</p>\n',
         'en-US':
           '<p>The <code>data</code> attribute must be set to set the bulletin information data, and the <code>tab-title</code> attribute must be set to set the title of each bulletin board. </p>\n'
       },
@@ -17,7 +17,7 @@ export default {
       'demoId': 'title',
       'name': { 'zh-CN': '公告牌标题', 'en-US': 'Billboard Title' },
       'desc': {
-        'zh-CN': '<p>可通过 <code>title</code> 设置公告牌标题。</p>\n',
+        'zh-CN': '<p>通过 <code>title</code> 设置公告牌标题。</p>\n',
         'en-US': '<p>You can use <code>title</code> to set the bulletin board title. </p>\n'
       },
       'codeFiles': ['title.vue']
@@ -26,7 +26,7 @@ export default {
       'demoId': 'active-name',
       'name': { 'zh-CN': '默认激活的选项卡', 'en-US': 'Default Activated Tab' },
       'desc': {
-        'zh-CN': '<p>可通过 <code>active-name</code> 设置默认激活的选项卡，从 <code>1</code> 开始计算。</p>\n',
+        'zh-CN': '<p>通过 <code>active-name</code> 设置默认激活的选项卡，从 <code>1</code> 开始计算。</p>\n',
         'en-US':
           '<p>You can set the default active tab by <code>active-name</code>, starting from <code>1</code>. </p>\n'
       },
@@ -36,7 +36,7 @@ export default {
       'demoId': 'tab-title',
       'name': { 'zh-CN': '选项卡标题', 'en-US': 'Tab Title' },
       'desc': {
-        'zh-CN': '<p>可通过 <code>tab-title</code> 属性自定义选项卡标题。</p>\n',
+        'zh-CN': '<p>通过 <code>tab-title</code> 设置自定义选项卡标题。</p>\n',
         'en-US': '<p>You can customize the tab title by using the <code>tab-title</code> attribute. </p>\n'
       },
       'codeFiles': ['tab-title.vue']
@@ -45,7 +45,8 @@ export default {
       'demoId': 'url',
       'name': { 'zh-CN': '基于Url的跳转', 'en-US': 'URL-based redirection' },
       'desc': {
-        'zh-CN': '<p>基于 Url 的跳转是根据数据中的 <code>url</code> 和 <code>target</code> 字段进行跳转的。</p>\n',
+        'zh-CN':
+          '<p>基于 <code>Url</code> 的跳转是通过数据中的 <code>url</code> 和 <code>target</code> 字段进行设置的。</p>\n',
         'en-US':
           '<p>The URL-based redirection is based on the <code>url</code> and <code>target</code> fields in the data. </p>\n'
       },
@@ -55,7 +56,7 @@ export default {
       'demoId': 'route',
       'name': { 'zh-CN': '基于Route的跳转', 'en-US': 'Route-based redirection' },
       'desc': {
-        'zh-CN': '<p>基于 Route 的跳转是根据数据中的 <code>route</code> 字段进行跳转的。</p>\n',
+        'zh-CN': '<p>基于  <code>Route</code> 的跳转是通过数据中的 <code>route</code> 字段进行设置的的。</p>\n',
         'en-US': '<p>Route-based redirection is performed based on the <code>route</code> field in the data. </p>\n'
       },
       'codeFiles': ['route.vue']
@@ -65,7 +66,7 @@ export default {
       'name': { 'zh-CN': '显示 “更多” 链接', 'en-US': 'Show More links' },
       'desc': {
         'zh-CN':
-          '<p>可通过 <code>more-link</code> 显示并设置更多链接。 <code>show-more</code> 设置是否显示更多按钮，默认为 true。</p>\n',
+          '<p>通过 <code>more-link</code> 显示并设置更多链接。 <code>show-more</code> 设置是否显示更多按钮，默认为 true。</p>\n',
         'en-US':
           '<p>You can use <code>more-link</code> to display and set more links. <code>show-more</code> Sets whether to display the More button. The default value is true. </p>\n'
       },
@@ -75,7 +76,7 @@ export default {
       'demoId': 'icon',
       'name': { 'zh-CN': '自定义新公告前缀', 'en-US': 'User-defined bulletin prefix' },
       'desc': {
-        'zh-CN': '<p>可通过 <code>icon</code> 自定义新公告前缀图标。</p>\n',
+        'zh-CN': '<p>通过 <code>icon</code> 自定义新公告前缀图标。</p>\n',
         'en-US': '<p>You can use <code>icon</code> to customize the new bulletin prefix icon. </p>\n'
       },
       'codeFiles': ['icon.vue']
@@ -85,11 +86,11 @@ export default {
     {
       'name': 'bulletin-board',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'active-name',
           'type': 'string',
-          'defaultValue': '该属性的默认值为 1',
+          'defaultValue': '1',
           'desc': {
             'zh-CN': "默认显示第1栏，可选'1' '2' '3'等",
             'en-US': 'By default, column 1 is displayed. You can select 1, 2, or 3.'
@@ -117,7 +118,7 @@ export default {
         {
           'name': 'show-more',
           'type': 'boolean',
-          'defaultValue': '该属性的默认值为 true',
+          'defaultValue': 'true',
           'desc': {
             'zh-CN': '是否显示更多按钮，默认显示,需要与 more-link 同时使用',
             'en-US':

package/demos/pc/app/button/basic-usage-composition-api.vue

@@ -53,5 +53,7 @@ const IconSearch = iconSearch()
 }
 .tiny-button {
   margin-bottom: 10px;
+  margin-left: 0;
+  margin-right: 8px;
 }
 </style>

package/demos/pc/app/button/basic-usage.vue

@@ -64,5 +64,7 @@ export default {
 }
 .tiny-button {
   margin-bottom: 10px;
+  margin-left: 0;
+  margin-right: 8px;
 }
 </style>

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

@@ -6,6 +6,6 @@
 import { Button as TinyButton, Modal } from '@opentiny/vue'
 
 function click() {
-  Modal.message('click')
+  Modal.message({ message: 'click', status: 'info' })
 }
 </script>

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

@@ -11,7 +11,7 @@ export default {
   },
   methods: {
     click() {
-      Modal.message('click')
+      Modal.message({ message: 'click', status: 'info' })
     }
   }
 }

package/demos/pc/app/button/dynamic-disabled-composition-api.vue

@@ -18,6 +18,13 @@
       <tiny-button type="warning" :disabled="disabled" plain>警告按钮</tiny-button>
       <tiny-button type="danger" :disabled="disabled" plain>危险按钮</tiny-button>
     </tiny-row>
+
+    <tiny-row>
+      <tiny-button :disabled="disabled" ghost>幽灵按钮</tiny-button>
+      <tiny-button :icon="TinyIconSearch" :disabled="disabled">图标按钮</tiny-button>
+      <tiny-button :icon="TinyIconSearch" :disabled="disabled"> </tiny-button>
+      <tiny-button :icon="TinyIconSearch" :disabled="disabled" circle> </tiny-button>
+    </tiny-row>
   </tiny-layout>
 </template>
 
@@ -27,7 +34,7 @@ import { Button as TinyButton, Layout as TinyLayout, Row as TinyRow, Switch as T
 import { iconSearch } from '@opentiny/vue-icon'
 
 const disabled = ref(false)
-const IconSearch = iconSearch()
+const TinyIconSearch = iconSearch()
 </script>
 
 <style scoped>
@@ -37,5 +44,7 @@ const IconSearch = iconSearch()
 
 .tiny-button {
   margin-bottom: 10px;
+  margin-left: 0;
+  margin-right: 8px;
 }
 </style>

package/demos/pc/app/button/{dynamic-disabled.spec.js → dynamic-disabled.spec.ts}

@@ -6,6 +6,7 @@ test('测试禁用状态是否生效', async ({ page }) => {
 
   const demo = page.locator('#dynamic-disabled')
   const switchBtn = demo.locator('.tiny-switch')
+  const ghostBtn = demo.getByRole('button', { name: '幽灵按钮' })
 
   await switchBtn.click()
   await expect(demo.locator('.tiny-button').first()).toBeDisabled()
@@ -15,6 +16,9 @@ test('测试禁用状态是否生效', async ({ page }) => {
   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 expect(ghostBtn).toHaveCSS('color', 'rgb(173, 176, 184)')
+  await expect(ghostBtn).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
+  await expect(ghostBtn).toHaveCSS('border-bottom-color', 'rgb(173, 176, 184)')
 
   await switchBtn.click()
   await expect(demo.locator('.tiny-button').first()).not.toBeDisabled()