@opentiny/vue-docs 2.2.6 → 2.2.8

package/demos/mobile-first/app/tooltip/webdoc/tooltip.js

@@ -1,15 +1,14 @@
 export default {
   column: '2',
   owner: '',
-  demos: [
-    {
+  demos: [{
       demoId: 'basic-usage',
       name: {
         'zh-CN': '基本用法',
         'en-US': 'basic usage'
       },
       desc: {
-        'zh-CN': '<p></p>',
+        'zh-CN': '<p>按钮类型</p>',
         'en-US': '<p>button type</p>'
       },
       codeFiles: ['basic-usage.vue']
@@ -19,11 +18,11 @@ export default {
       demoId: 'dynamic-disable',
       name: {
         'zh-CN': '禁用',
-        'en-US': 'events'
+        'en-US': 'disabling'
       },
       desc: {
-        'zh-CN': '<p>通过 `disabled` 设置禁用<p>',
-        'en-US': '<p>bbutton click</p>'
+        'zh-CN': '<p>通过 `disabled` 设置禁用</p>',
+        'en-US': '<p>Disable by setting `disabled`</p>'
       },
       codeFiles: ['dynamic-disable.vue']
     },
@@ -31,12 +30,11 @@ export default {
       demoId: 'manual-control-tip',
       name: {
         'zh-CN': '手动控制',
-        'en-US': 'events'
+        'en-US': 'Manual control'
       },
       desc: {
-        'zh-CN':
-          '<p>手动控制模式，通过设置 `manual` 属性为 true 后，mouseenter 和 mouseleave 事件将不会生效,然后可以通过设置 `v-model` 动态控制显示和隐藏<p>',
-        'en-US': '<p>bbutton click</p>'
+        'zh-CN': '<p>手动控制模式，通过设置 `manual` 属性为 true 后，mouseenter 和 mouseleave 事件将不会生效,然后可以通过设置 `v-model` 动态控制显示和隐藏</p>',
+        'en-US': '<p>Manual control mode. After the `manual` attribute is set to true, the mouseenter and mouseleave events do not take effect. You can set the `v-model` to dynamically control the display and hiding of the events.</p>'
       },
       codeFiles: ['manual-control-tip.vue']
     },
@@ -44,11 +42,11 @@ export default {
       demoId: 'tooltip-theme',
       name: {
         'zh-CN': '主题',
-        'en-US': 'events'
+        'en-US': 'Subject'
       },
       desc: {
-        'zh-CN': '<p>通过 `effect` 属性设置主题,可选值 dark/light 两种主题。<p>',
-        'en-US': '<p>bbutton click</p>'
+        'zh-CN': '<p>通过 `effect` 属性设置主题,可选值 dark/light 两种主题。</p>',
+        'en-US': '<p>Set the theme through the `effect` property. The options are dark and light.</p>'
       },
       codeFiles: ['tooltip-theme.vue']
     },
@@ -56,12 +54,11 @@ export default {
       demoId: 'open-delay',
       name: {
         'zh-CN': '自动隐藏和延迟时间',
-        'en-US': 'events'
+        'en-US': 'Auto-hide and delay time'
       },
       desc: {
-        'zh-CN':
-          '<p>通过 `hide-after` 属性设置 Tooltip 组件出现后自动隐藏延时，单位毫秒，为 0 则不会自动隐藏。通过 `open-delay` 属性设置 Tooltip 组件延迟出现的时间，单位毫秒。<p>',
-        'en-US': '<p>bbutton click</p>'
+        'zh-CN': '<p>通过 `hide-after` 属性设置 Tooltip 组件出现后自动隐藏延时，单位毫秒，为 0 则不会自动隐藏。通过 `open-delay` 属性设置 Tooltip 组件延迟出现的时间，单位毫秒。<p>',
+        'en-US': '<p>The `hide-after` attribute is used to set the automatic hiding delay of the Tooltip component, in milliseconds. If the value is 0, the Tooltip component is not automatically hidden. The `open-delay` property is used to set the delay for the Tooltip component to appear, in milliseconds.</p>'
       },
       codeFiles: ['open-delay.vue']
     },
@@ -69,11 +66,11 @@ export default {
       demoId: 'tooltip-offset',
       name: {
         'zh-CN': '偏移量',
-        'en-US': 'events'
+        'en-US': 'Offset'
       },
       desc: {
-        'zh-CN': '<p>通过 `offset` 属性设置 Tooltip 组件出现位置的偏移量。<p>',
-        'en-US': '<p>bbutton click</p>'
+        'zh-CN': '<p>通过 `offset` 属性设置 Tooltip 组件出现位置的偏移量。</p>',
+        'en-US': '<p>Use the `offset` property to set the offset where the Tooltip component appears.</p>'
       },
       codeFiles: ['tooltip-offset.vue']
     },
@@ -81,11 +78,11 @@ export default {
       demoId: 'enterable',
       name: {
         'zh-CN': '鼠标是否可进入',
-        'en-US': 'events'
+        'en-US': 'Whether the mouse can be accessed'
       },
       desc: {
-        'zh-CN': '<p>通过 `enterable` 属性设置鼠标是否可进入到 tooltip 中。<p>',
-        'en-US': '<p>bbutton click</p>'
+        'zh-CN': '<p>通过 `enterable` 属性设置鼠标是否可进入到 tooltip 中。</p>',
+        'en-US': '<p>Use the `enterable` attribute to set whether the mouse can access the tooltip.</p>'
       },
       codeFiles: ['enterable.vue']
     },
@@ -93,11 +90,11 @@ export default {
       demoId: 'visible-arrow',
       name: {
         'zh-CN': '是否显示箭头',
-        'en-US': 'events'
+        'en-US': 'Whether to display arrows'
       },
       desc: {
-        'zh-CN': '<p>通过 `visible-arrow` 属性设置是否显示 Tooltip 箭头。<p>',
-        'en-US': '<p>bbutton click</p>'
+        'zh-CN': '<p>通过 `visible-arrow` 属性设置是否显示 Tooltip 箭头。</p>',
+        'en-US': '<p>Use the `visible-arrow` property to set whether to display the Tooltip arrow.</p>'
       },
       codeFiles: ['visible-arrow.vue']
     },
@@ -105,11 +102,11 @@ export default {
       demoId: 'popper-class',
       name: {
         'zh-CN': '添加样式类名',
-        'en-US': 'events'
+        'en-US': 'Add Style Class Name'
       },
       desc: {
-        'zh-CN': '<p>通过 `popper-class` 属性为 Tooltip 的 popper 添加类名。<p>',
-        'en-US': '<p>bbutton click</p>'
+        'zh-CN': '<p>通过 `popper-class` 属性为 Tooltip 的 popper 添加类名。</p>',
+        'en-US': '<p>Use the `popper-class` attribute to add a class name to the tooltip\'s popper.</p>'
       },
       codeFiles: ['popper-class.vue']
     },
@@ -117,11 +114,11 @@ export default {
       demoId: 'tooltip-content',
       name: {
         'zh-CN': '插槽',
-        'en-US': 'events'
+        'en-US': 'Slots'
       },
       desc: {
         'zh-CN': '<p>设置过通过 `content` 插槽添加自定义内容。滤类型<p>',
-        'en-US': '<p>bbutton click</p>'
+        'en-US': '<p>Set to add custom content through the `content` slot. Filter Type</p>'
       },
       codeFiles: ['tooltip-content.vue']
     },
@@ -129,12 +126,11 @@ export default {
       demoId: 'popper-options',
       name: {
         'zh-CN': 'popper 配置',
-        'en-US': 'events'
+        'en-US': 'Popper Configuration'
       },
       desc: {
-        'zh-CN':
-          '<p>通过 `popper-options` 属性为 Tooltip 的 popper 配置参数,具体可参考[popper.js](https://popper.js.org/)<p>',
-        'en-US': '<p>bbutton click</p>'
+        'zh-CN': '<p>通过 `popper-options` 属性为 Tooltip 的 popper 配置参数,具体可参考[popper.js](https://popper.js.org/)</p>',
+        'en-US': '<p>Use the `popper-options` attribute to configure popper parameters for Tooltip. For details, see [popper.js](https://popper.js.org/).</p>'
       },
       codeFiles: ['popper-options.vue']
     },
@@ -142,11 +138,11 @@ export default {
       demoId: 'popper-options-bubbling',
       name: {
         'zh-CN': 'popper 配置通过 bubbling 控制 tip 位置',
-        'en-US': 'events'
+        'en-US': 'The popper configuration uses bubbling to control the tip position.'
       },
       desc: {
-        'zh-CN': '<p>popperOptions.bubbling 配置为 true 时，所有的父元素包含滚动条，滚动时都会动态改变 tip 的位置<p>',
-        'en-US': '<p>bbutton click</p>'
+        'zh-CN': '<p>popperOptions.bubbling 配置为 true 时，所有的父元素包含滚动条，滚动时都会动态改变 tip 的位置</p>',
+        'en-US': '<p>When popperOptions.bubbling is set to true, all parent elements contain scroll bars. During scrolling, the position of tip is dynamically changed.</p>'
       },
       codeFiles: ['popper-options-bubbling.vue']
     },
@@ -154,11 +150,11 @@ export default {
       demoId: 'tabindex',
       name: {
         'zh-CN': 'tabindex 配置',
-        'en-US': 'events'
+        'en-US': 'tabindex configuration'
       },
       desc: {
-        'zh-CN': '<p>通过配置 `tabindex`， 配置的属性会自动添加到该组件的触发原上。<p>',
-        'en-US': '<p>bbutton click</p>'
+        'zh-CN': '<p>通过配置 `tabindex`， 配置的属性会自动添加到该组件的触发原上。</p>',
+        'en-US': '<p>By configuring `tabindex`, the configured attributes are automatically added to the trigger source of the component.</p>'
       },
       codeFiles: ['tabindex.vue']
     },
@@ -166,12 +162,11 @@ export default {
       demoId: 'content-pre',
       name: {
         'zh-CN': '文本预格式化',
-        'en-US': 'events'
+        'en-US': 'Text Preformatting'
       },
       desc: {
-        'zh-CN':
-          '<p>配置 `pre` 为 `true`，就会预格式化 `content` 文本。<br>被包围在 `<pre></pre>` 标签元素中的文本会保留空格和换行符，文本也会呈现为等宽字体。<p>',
-        'en-US': '<p>bbutton click</p>'
+        'zh-CN': '<p>配置 `pre` 为 `true`，就会预格式化 `content` 文本。<br>被包围在 `<pre></pre>` 标签元素中的文本会保留空格和换行符，文本也会呈现为等宽字体。</p>',
+        'en-US': '<p>If `pre` is set to `true`, the `content` text is preformatted. <br>Text enclosed in the `<pre></pre>` tag element retains spaces and newline characters, and the text is rendered in an equal-width font.</p>'
       },
       codeFiles: ['content-pre.vue']
     },
@@ -179,11 +174,11 @@ export default {
       demoId: 'content-render',
       name: {
         'zh-CN': '自定义渲染',
-        'en-US': 'events'
+        'en-US': 'Custom Rendering'
       },
       desc: {
-        'zh-CN': '<p>使用属性 `renderContent` 配置自定义渲染方法<p>',
-        'en-US': '<p>bbutton click</p>'
+        'zh-CN': '<p>使用属性 `renderContent` 配置自定义渲染方法</p>',
+        'en-US': '<p>Configure a custom rendering method using the property `renderContent`</p>'
       },
       codeFiles: ['content-render.vue']
     },
@@ -191,15 +186,14 @@ export default {
       demoId: 'z-index',
       name: {
         'zh-CN': '弹出层 zIndex',
-        'en-US': 'events'
+        'en-US': 'z-index'
       },
       desc: {
-        'zh-CN':
-          '<p>设置`z-index`属性为`relative`时，弹出层样式属性 zIndex 值参考 Reference 及其父级 Dom。<br>设置`z-index`属性为默认值`next`时，弹出层样式属性 zIndex 值由组件库内部维护。<p>',
-        'en-US': '<p>bbutton click</p>'
+        'zh-CN': '<p>设置`z-index`属性为`relative`时，弹出层样式属性 zIndex 值参考 Reference 及其父级 Dom。<br>设置`z-index`属性为默认值`next`时，弹出层样式属性 zIndex 值由组件库内部维护。</p>',
+        'en-US': '<p>When the `z-index` attribute is set to `relative`, the value of zIndex of the pop-up layer style attribute is Reference and its parent Dom. <br>When the `z-index` attribute is set to the default value `next`, the value of the pop-up layer style attribute zIndex is maintained by the component library.</p>'
       },
       codeFiles: ['z-index.vue']
     }
   ],
   apis: []
-}
+}

package/demos/pc/app/action-menu/icon.spec.ts

@@ -0,0 +1,38 @@
+import { test, expect } from '@playwright/test'
+
+test('只显示图标', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('action-menu#icon')
+
+  const wrap = page.locator('#icon')
+  const actionMenu = wrap.locator('.tiny-action-menu').nth(0)
+  const actionMenuItem = actionMenu.locator('.tiny-action-menu__item')
+
+  await page.waitForTimeout(1500)
+  await expect(actionMenuItem.nth(0).locator('.tiny-svg')).toBeVisible()
+  await expect(actionMenuItem.nth(3).locator('.tiny-dropdown__trigger  .tiny-svg')).toBeVisible()
+  await expect(actionMenuItem.nth(3).locator('.tiny-dropdown__trigger .tiny-svg')).toHaveCSS('width', '20px')
+  await expect(actionMenuItem.nth(3).locator('.tiny-dropdown__trigger .tiny-svg')).toHaveCSS('height', '20px')
+  await expect(actionMenuItem.nth(3).locator('.tiny-dropdown__trigger .tiny-svg')).toHaveCSS('margin', '2px')
+  await expect(actionMenuItem.nth(3).locator('.tiny-dropdown__trigger .tiny-dropdown__title')).toBeHidden()
+
+  await actionMenuItem.nth(3).locator('.tiny-dropdown__trigger .tiny-svg').hover()
+  await expect(page.locator('body > .tiny-dropdown-menu')).toBeVisible()
+})
+
+test('只显示文本', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('action-menu#icon')
+
+  const wrap = page.locator('#icon')
+  const actionMenu = wrap.locator('.tiny-action-menu').nth(1)
+  const actionMenuItem = actionMenu.locator('.tiny-action-menu__item')
+
+  await expect(actionMenuItem.nth(0).locator('.tiny-svg')).toBeHidden()
+  await expect(actionMenuItem.nth(3).locator('.tiny-dropdown__trigger .tiny-svg')).toBeHidden()
+  await expect(actionMenuItem.nth(3).locator('.tiny-dropdown__title')).toBeVisible()
+  await expect(actionMenuItem.nth(3).locator('.tiny-dropdown__title')).toHaveText('更多')
+
+  await actionMenuItem.nth(3).hover()
+  await expect(page.locator('body > .tiny-dropdown-menu')).toBeVisible()
+})

package/demos/pc/app/action-menu/webdoc/action-menu.cn.md

@@ -4,4 +4,4 @@ title: ActionMenu 菜单按钮
 
 # ActionMenu 菜单按钮
 
-> 提供一组操作按钮的组件，当按钮数量太多，自动将超出部分的按钮放置在一个下拉弹框中
+提供一组操作按钮的组件，当按钮数量太多，自动将超出部分的按钮放置在一个下拉弹框中。

package/demos/pc/app/action-menu/webdoc/action-menu.en.md

@@ -4,4 +4,4 @@ title: ActionMenu
 
 # ActionMenu
 
-> Provide a set of components for operating buttons. When there are too many buttons, the excess buttons will be automatically placed in a drop-down pop-up box
+Provide a set of components for operating buttons. When there are too many buttons, the excess buttons will be automatically placed in a drop-down pop-up box.

package/demos/pc/app/action-menu/webdoc/action-menu.js

@@ -48,7 +48,7 @@ export default {
       'desc': {
         'zh-CN': '<p>通过 <code>more-text</code> 属性设置下拉按钮文本,默认为 <code>更多</code>。</p>',
         'en-US':
-          '<p>Set the dropdown button text through the <code>more-text</code> attribute, default to<code>More</code></p>'
+          '<p>Set the dropdown button text through the <code>more-text</code> attribute, default to <code>More</code></p>'
       },
       'codeFiles': ['more-text.vue']
     },
@@ -76,12 +76,21 @@ export default {
       'demoId': 'max-show-num',
       'name': { 'zh-CN': '个数限制', 'en-US': 'Number limit' },
       'desc': {
-        'zh-CN': '<p>通过 <code>max-show-num</code> 属性设置显示最多显示菜单按钮的个数，默认为 2。</p>',
+        'zh-CN': '<p>通过 <code>max-show-num</code> 属性设置最多显示菜单按钮的个数，默认为 2。</p>',
         'en-US':
           '<p>By setting the <code>max-show-num</code> attribute, the maximum number of displayed menu buttons is set to 2 by default.</p>'
       },
       'codeFiles': ['max-show-num.vue']
     },
+    {
+      'demoId': 'slot-item',
+      'name': { 'zh-CN': '菜单项插槽', 'en-US': 'Menu Slot' },
+      'desc': {
+        'zh-CN': '<p>通过 <code>item</code> 插槽自定义下拉选项的 HTML 模板。</p>',
+        'en-US': '<p>Customize the HTML template for dropdown options through the <code>item</code> slot.</p>'
+      },
+      'codeFiles': ['slot-item.vue']
+    },
     {
       'demoId': 'events',
       'name': { 'zh-CN': '事件', 'en-US': 'Menu Item Click Event' },
@@ -103,22 +112,13 @@ export default {
           '</div>\n'
       },
       'codeFiles': ['events.vue']
-    },
-    {
-      'demoId': 'slot-item',
-      'name': { 'zh-CN': '菜单项插槽', 'en-US': 'Menu Slot' },
-      'desc': {
-        'zh-CN': '<p>通过 <code>item</code> 插槽自定义下拉选项的 HTML 模板。</p>',
-        'en-US': '<p>Customize the HTML template for dropdown options through the <code>item</code> slot.</p>'
-      },
-      'codeFiles': ['slot-item.vue']
     }
   ],
   apis: [
     {
       'name': 'action-menu',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'max-show-num',
           'type': 'number',
@@ -133,7 +133,7 @@ export default {
         {
           'name': 'more-text',
           'type': 'string',
-          'defaultValue': '更多',
+          'defaultValue': "'更多'",
           'desc': {
             'zh-CN': '下拉按钮文本',
             'en-US': 'Dropdown button text'
@@ -151,57 +151,6 @@ export default {
           },
           'demoId': 'basic-usage'
         },
-        {
-          'name': 'options.label',
-          'type': 'string',
-          'defaultValue': '',
-          'desc': {
-            'zh-CN': '菜单项文本',
-            'en-US': 'Menu Item Text'
-          },
-          'demoId': 'basic-usage'
-        },
-        {
-          'name': 'options.children',
-          'type': 'IItemData[]',
-          'typeAnchorName': 'IItemData',
-          'defaultValue': '',
-          'desc': {
-            'zh-CN': '菜单项的子集',
-            'en-US': 'Subset of menu items'
-          },
-          'demoId': 'basic-usage'
-        },
-        {
-          'name': 'options.divided',
-          'type': 'boolean',
-          'defaultValue': 'false',
-          'desc': {
-            'zh-CN': '是否显示分割线',
-            'en-US': 'Whether to display split lines'
-          },
-          'demoId': 'basic-usage'
-        },
-        {
-          'name': 'options.disabled',
-          'type': 'boolean',
-          'defaultValue': 'false',
-          'desc': {
-            'zh-CN': '是否禁用',
-            'en-US': 'Is it disabled'
-          },
-          'demoId': 'disabled'
-        },
-        {
-          'name': 'options.icon',
-          'type': 'VueComponent',
-          'defaultValue': '',
-          'desc': {
-            'zh-CN': '菜单项图标',
-            'en-US': 'Icon of a menu item'
-          },
-          'demId': 'icon'
-        },
         {
           'name': 'popper-class',
           'type': 'string',
@@ -245,7 +194,7 @@ export default {
         {
           'name': 'text-field',
           'type': 'string',
-          'defaultValue': 'label',
+          'defaultValue': "'label'",
           'desc': {
             'zh-CN': '菜单按钮文本的键值',
             'en-US': 'Key values for menu button text'
@@ -309,7 +258,8 @@ interface IItemData {
   label: string           // 菜单项文本
   disabled: boolean       // 是否禁用
   divided: boolean        // 是否显示分割线
-  children: IItemData[] // 菜单项子集
+  children: IItemData[]   // 菜单项子集
+  icon: VueComponent      // 菜单项图标
 }
 `
     },

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/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()