@opentiny/vue-docs 2.2.5 → 2.2.7

package/demos/pc/app/carousel/manual-play.spec.ts

@@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
 test('手动轮播', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('carousel#manual-play')
-  const preview = page.locator('#preview')
+  const preview = page.locator('#manual-play')
   const carouselItems = preview.locator('div.tiny-carousel__item')
   const numButtons = preview.locator('#num').getByRole('button')
 

package/demos/pc/app/carousel/play-interval.spec.ts

@@ -3,15 +3,11 @@ import { test, expect } from '@playwright/test'
 test('轮播间隔时间', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('carousel#play-interval')
-  const preview = page.locator('#preview')
-  const carouselItems = preview.locator('div.tiny-carousel__item')
-
-  // 当前应该显示第二张幻灯片
-  await expect(carouselItems.nth(1)).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
-  await page.waitForTimeout(1000)
-  // 当前应该显示第三张幻灯片
-  await expect(carouselItems.nth(2)).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
-  await page.waitForTimeout(1000)
-  // 当前应该显示第四张幻灯片
-  await expect(carouselItems.nth(3)).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
+  const preview = page.locator('#play-interval')
+  const carouselItems = preview.locator('div.tiny-carousel__item.is-animating')
+  const carouselItemsActive = preview.locator('div.tiny-carousel__item.is-active')
+  await expect(carouselItems).toHaveCSS('transition', 'transform 0.4s ease-in-out 0s')
+  await page.waitForTimeout(500)
+  await expect(carouselItemsActive).toHaveCSS('z-index', '2')
+  await page.waitForTimeout(500)
 })

package/demos/pc/app/carousel/show-title.spec.ts

@@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
 test('显示标题', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('carousel#show-title')
-  const preview = page.locator('#preview')
+  const preview = page.locator('#show-title')
   const carouselItems = preview.locator('div.tiny-carousel__item')
   const indicators = preview.getByRole('list').getByRole('button')
   await expect(carouselItems.first().locator('span')).toHaveText('幻灯片 - 1')

package/demos/pc/app/carousel/up-down-carousel.spec.ts

@@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
 test('纵向轮播', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('carousel#up-down-carousel')
-  const preview = page.locator('#preview')
+  const preview = page.locator('#up-down-carousel')
   const indicators = preview.getByRole('button')
   const carouselItems = preview.locator('.tiny-carousel__item')
   await indicators.nth(1).hover()

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

@@ -5,7 +5,12 @@ export default {
     {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'desc': {
+        'zh-CN':
+          '通过<code>arrow</code>属性设置左右箭头切换效果，<code>loop</code>属性是否循环显示，<code>autoplay</code>属性自动切换。',
+        'en-US':
+          'Set the left and right arrow switching effect through the<code>arrow</code>attribute, check whether the<code>loop</code>attribute is displayed in a loop, and automatically switch the<code>autoplay</code>attribute.'
+      },
       'codeFiles': ['basic-usage.vue']
     },
     {
@@ -13,7 +18,7 @@ export default {
       'name': { 'zh-CN': '指示器和触发方式', 'en-US': 'Indicator and Trigger Mode' },
       'desc': {
         'zh-CN':
-          '<p>走马灯指示器默认显示在幻灯片内容上，配置 <code>indicator-position</code> 为 outside 后，将显示在外部。\n配置 <code>trigger</code> 为 click ，可以修改指示器触发方式为单击，默认鼠标悬停到指示器时，走马灯幻灯片就会对应切换。</p>\n',
+          '<p>通过配置 <code>indicator-position</code> 为<code>outside</code>后，走马灯指示器默认显示在幻灯片内容上，将显示在外部。\n配置 <code>trigger</code> 为<code>click</code>，可以修改指示器触发方式为单击，默认鼠标悬停到指示器时，走马灯幻灯片就会对应切换。</p>\n',
         'en-US':
           '<p>The walk indicator is displayed on the slide by default. After <code>indicator-position</code> is set to outside, the indicator is displayed outside. \n Set <code>trigger</code> to click. You can change the indicator triggering mode to click. By default, when you hover the cursor over an indicator, the slideshow is switched accordingly. </p>\n'
       },
@@ -24,7 +29,7 @@ export default {
       'name': { 'zh-CN': '手动轮播', 'en-US': 'Manual Carousel' },
       'desc': {
         'zh-CN':
-          '<p>调用 <code>setActiveItem()</code>、<code>next()</code>、<code>prev()</code> 方法可根据需要进行轮播。<code>initial-index</code> 属性可以指定初始激活的幻灯片索引。</p>\n',
+          '<p>通过调用 <code>setActiveItem()</code>、<code>next()</code>、<code>prev()</code> 方法可根据需要进行轮播。<code>initial-index</code> 属性可以指定初始激活的幻灯片索引。</p>\n',
         'en-US':
           '<p>Invoke the <code>setActiveItem()</code>, <code>next()</code>, and <code>prev()</code> methods to perform NVOD as required. The <code>initial-index</code> property specifies the slide index that is initially activated. </p>\n'
       },
@@ -32,12 +37,12 @@ export default {
     },
     {
       'demoId': 'close-loop',
-      'name': { 'zh-CN': '关闭循环轮播', 'en-US': 'Disable cyclic NVOD.' },
+      'name': { 'zh-CN': '关闭循环轮播', 'en-US': 'Disable cyclic NVOD' },
       'desc': {
         'zh-CN':
-          '<p>配置 <code>loop</code> 属性为 false 后，若走马灯幻灯片已切换到最后一项，则将不能再从第一项开始循环切换。即切换到最后一项时，右侧切换箭头不再显示，切换到第一项时，左侧切换箭头不再显示。</p>\n',
+          '<p>通过配置 <code>loop</code> 属性为<code>false</code>后，若走马灯幻灯片已切换到最后一项，则将不能再从第一项开始循环切换。即切换到最后一项时，右侧切换箭头不再显示，切换到第一项时，左侧切换箭头不再显示。</p>\n',
         'en-US':
-          '<p>After the <code>loop</code> attribute is set to false, if the slide is switched to the last item, the slide cannot be switched cyclically from the first item. That is, when switching to the last item, the right toggle arrow is no longer displayed, and when switching to the first item, the left toggle arrow is no longer displayed. </p>\n'
+          '<p>After the <code>loop</code> attribute is set to <code>false</code>, if the slide is switched to the last item, the slide cannot be switched cyclically from the first item. That is, when switching to the last item, the right toggle arrow is no longer displayed, and when switching to the first item, the left toggle arrow is no longer displayed. </p>\n'
       },
       'codeFiles': ['close-loop.vue']
     },
@@ -45,9 +50,10 @@ export default {
       'demoId': 'autoplay',
       'name': { 'zh-CN': '自动切换', 'en-US': 'Automatic switchover' },
       'desc': {
-        'zh-CN': '<p>配置 <code>autoplay</code> 属性为 true 后，走马灯的幻灯片内容将自动轮播切换。</p>\n',
+        'zh-CN':
+          '<p>通过配置 <code>autoplay</code> 属性为<code>true</code>后，走马灯的幻灯片内容将自动轮播切换。</p>\n',
         'en-US':
-          '<p>After <code>autoplay</code> is set to true, the slide content of the walk-through is automatically switched in rotation. </p>\n'
+          '<p>After <code>autoplay</code> is set to <code>true</code>, the slide content of the walk-through is automatically switched in rotation. </p>\n'
       },
       'codeFiles': ['autoplay.vue']
     },
@@ -55,7 +61,7 @@ export default {
       'demoId': 'play-interval',
       'name': { 'zh-CN': '轮播间隔时间', 'en-US': 'NVOD Interval' },
       'desc': {
-        'zh-CN': '<p>走马灯幻灯片轮播间隔时间默认为 3000 毫秒，通过 <code>interval</code> 属性可以自定义。</p>\n',
+        'zh-CN': '<p>通过 <code>interval</code> 属性可以自定义，走马灯幻灯片轮播间隔时间默认为 3000 毫秒。</p>\n',
         'en-US':
           '<p>The interval is 3000 ms by default, which can be customized through the <code>interval</code> attribute. </p>\n'
       },
@@ -65,8 +71,8 @@ export default {
       'demoId': 'up-down-carousel',
       'name': { 'zh-CN': '纵向轮播', 'en-US': 'vertical carousel' },
       'desc': {
-        'zh-CN': '<p>配置 <code>type</code> 属性为 vertical 即可实现纵向轮播。</p>\n',
-        'en-US': '<p>Set <code>type</code> to vertical to implement vertical rotation. </p>\n'
+        'zh-CN': '<p>通过配置 <code>type</code> 属性为<code>vertical</code>即可实现纵向轮播。</p>\n',
+        'en-US': '<p>Set <code>type</code> to vertical to implement <code>vertical</code> rotation. </p>\n'
       },
       'codeFiles': ['up-down-carousel.vue']
     },
@@ -83,33 +89,43 @@ export default {
     {
       'demoId': 'carousel-arrow-always',
       'name': { 'zh-CN': '总是显示切换箭头', 'en-US': 'Always show the switch arrow' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'desc': {
+        'zh-CN': '通过<code>arrow</code>设置属性为<code>always</code>。',
+        'en-US': 'Set the attribute to<code>always</code>through<code>arrow</code>.'
+      },
       'codeFiles': ['carousel-arrow-always.vue']
     },
     {
       'demoId': 'carousel-arrow-hover',
-      'name': { 'zh-CN': 'hover 时显示切换箭头', 'en-US': 'The switch arrow is displayed during Hover.' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'name': { 'zh-CN': 'hover 时显示切换箭头', 'en-US': 'The switch arrow is displayed during Hover' },
+      'desc': {
+        'zh-CN': '通过<code>arrow</code>设置属性为<code>hover</code>。',
+        'en-US': 'Set the attribute to<code>hover</code>through<code>arrow</code>.'
+      },
       'codeFiles': ['carousel-arrow-hover.vue']
     },
     {
       'demoId': 'carousel-arrow-never',
       'name': { 'zh-CN': '隐藏切换箭头', 'en-US': 'Hide the switch arrow' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'desc': {
+        'zh-CN': '通过<code>arrow</code>设置属性为<code>never</code>。',
+        'en-US': 'Set the attribute to<code>never</code>through<code>arrow</code>.'
+      },
       'codeFiles': ['carousel-arrow-never.vue']
     },
     {
       'demoId': 'card-mode',
       'name': { 'zh-CN': '卡片模式', 'en-US': 'Card Mode' },
       'desc': {
-        'zh-CN': '<p>配置 <code>type</code> 属性为 card 后，走马灯将以卡片形式进行展示。</p>\n',
-        'en-US': '<p>After the <code>type</code> attribute is set to card, the lantern is displayed as a card. </p>\n'
+        'zh-CN': '<p>通过配置 <code>type</code> 属性为<code>card</code>后，走马灯将以卡片形式进行展示。</p>\n',
+        'en-US':
+          '<p>After the <code>type</code> attribute is set to <code>card</code>, the lantern is displayed as a card. </p>\n'
       },
       'codeFiles': ['card-mode.vue']
     },
     {
       'demoId': 'carousel-events',
-      'name': { 'zh-CN': '走马灯事件', 'en-US': '' },
+      'name': { 'zh-CN': '走马灯事件', 'en-US': 'The Ma Deng incident' },
       'desc': {
         'zh-CN':
           '<p>主要包含<code>change</code>事件。</p>\n<p>当幻灯片切换时会触发该事件，回调函数可接收两个参数：<code>当前幻灯片索引</code>和<code>上一张幻灯片索引</code>。</p>\n',
@@ -122,86 +138,112 @@ export default {
     {
       'name': 'carousel',
       'type': 'component',
-      'events': [],
-      'slots': [],
       'props': [
         {
           'name': 'arrow',
           'type': 'string',
-          'defaultValue': '该属性的默认值为 hover',
-          'desc': { 'zh-CN': '切换箭头的显示时机;该属性的可选值为 always / hover / never', 'en-US': '' },
+          'defaultValue': `该属性的默认值为 'hover'`,
+          'desc': {
+            'zh-CN': '切换箭头的显示效果，该属性的可选值为 always / hover / never',
+            'en-US': 'Switch the display effect of arrows,The optional values for this attribute are always/hover/never'
+          },
           'demoId': 'up-down-carousel'
         },
         {
           'name': 'autoplay',
           'type': 'boolean',
           'defaultValue': '该属性的默认值为 false',
-          'desc': { 'zh-CN': '是否自动切换', 'en-US': '' },
+          'desc': { 'zh-CN': '是否自动切换', 'en-US': 'Whether to automatically switch' },
           'demoId': 'autoplay'
         },
         {
           'name': 'height',
           'type': 'string',
           'defaultValue': '',
-          'desc': { 'zh-CN': '走马灯的高度', 'en-US': '' },
+          'desc': { 'zh-CN': '走马灯的高度', 'en-US': 'The height of the lantern' },
           'demoId': 'indicator-trigger'
         },
         {
           'name': 'indicator-position',
           'type': 'string',
           'defaultValue': '',
-          'desc': { 'zh-CN': '指示器的位置。该属性的可选值为 outside / none', 'en-US': '' },
+          'desc': {
+            'zh-CN': '指示器的位置。该属性的可选值为 outside / none',
+            'en-US': 'The position of the indicator. The optional values for this attribute are outside/none'
+          },
           'demoId': 'indicator-trigger'
         },
         {
           'name': 'initial-index',
           'type': 'number',
           'defaultValue': '该属性的默认值为 0',
-          'desc': { 'zh-CN': '初始状态激活的幻灯片的索引，从 0 开始', 'en-US': '' },
+          'desc': {
+            'zh-CN': '初始状态激活的幻灯片的索引，从 0 开始',
+            'en-US': 'Index of slides activated in initial state, starting from 0'
+          },
           'demoId': 'manual-play'
         },
         {
           'name': 'interval',
           'type': 'number',
           'defaultValue': '该属性的默认值为 3000',
-          'desc': { 'zh-CN': '自动切换的时间间隔，单位为毫秒', 'en-US': '' },
+          'desc': {
+            'zh-CN': '自动切换的时间间隔，单位为毫秒',
+            'en-US': 'The time interval for automatic switching, in milliseconds'
+          },
           'demoId': 'play-interval'
         },
         {
           'name': 'show-title',
           'type': 'boolean',
           'defaultValue': '该属性的默认值为 false',
-          'desc': { 'zh-CN': '是否显示标题', 'en-US': '' },
+          'desc': { 'zh-CN': '是否显示标题', 'en-US': 'Is the title displayed' },
           'demoId': 'show-title'
         },
         {
           'name': 'trigger',
           'type': 'string',
-          'defaultValue': '该属性的默认值为 hover',
-          'desc': { 'zh-CN': '指示器的触发方式，默认为 hover。该属性的可选值为 click', 'en-US': '' },
+          'defaultValue': `该属性的默认值为 'hover'`,
+          'desc': {
+            'zh-CN': '指示器的触发方式，默认为 hover。该属性的可选值为 click',
+            'en-US':
+              'The triggering method of the indicator is hover by default. The optional value for this attribute is click'
+          },
           'demoId': 'indicator-trigger'
         },
         {
           'name': 'type',
           'type': 'string',
-          'defaultValue': '该属性的默认值为 horizontal',
-          'desc': { 'zh-CN': '走马灯的类型;该属性的可选值为 horizontal / vertical / card', 'en-US': '' },
+          'defaultValue': `该属性的默认值为 'horizontal'`,
+          'desc': {
+            'zh-CN': '走马灯的类型，该属性的可选值为 horizontal / vertical / card',
+            'en-US': 'The type of horse lantern,The optional values for this attribute are horizontal/vertical/card'
+          },
           'demoId': 'card-mode'
         },
         {
           'name': 'loop',
           'type': 'boolean',
           'defaultValue': '该属性的默认值为 true',
-          'desc': { 'zh-CN': '是否循环显示', 'en-US': '' },
+          'desc': { 'zh-CN': '是否循环显示', 'en-US': 'Whether to display in a loop' },
           'demoId': 'close-loop'
         }
       ],
+      'events': [
+        {
+          'name': 'change',
+          'type': '',
+          'defaultValue': '',
+          'desc': { 'zh-CN': '幻灯片切换时触发', 'en-US': 'Trigger during slide transition' },
+          'demoId': 'carousel-events'
+        }
+      ],
       'slots': [
         {
           'name': 'default',
           'type': '',
           'defaultValue': '',
-          'desc': { 'zh-CN': '默认插槽', 'en-US': '' },
+          'desc': { 'zh-CN': '默认插槽', 'en-US': 'Default slot' },
           'demoId': 'manual-play'
         }
       ],
@@ -210,32 +252,23 @@ export default {
           'name': 'next',
           'type': '',
           'defaultValue': '',
-          'desc': { 'zh-CN': '切换至下一张幻灯片', 'en-US': '' },
+          'desc': { 'zh-CN': '切换至下一张幻灯片', 'en-US': 'Switch to the next slide' },
           'demoId': 'manual-play'
         },
         {
           'name': 'prev',
           'type': '',
           'defaultValue': '',
-          'desc': { 'zh-CN': '切换至上一张幻灯片', 'en-US': '' },
+          'desc': { 'zh-CN': '切换至上一张幻灯片', 'en-US': 'Switch to the previous slide' },
           'demoId': 'manual-play'
         },
         {
           'name': 'setActiveItem',
           'type': '',
           'defaultValue': '',
-          'desc': { 'zh-CN': '手动切换幻灯片', 'en-US': '' },
+          'desc': { 'zh-CN': '手动切换幻灯片', 'en-US': 'Manually switch slides' },
           'demoId': 'manual-play'
         }
-      ],
-      'events': [
-        {
-          'name': 'change',
-          'type': '',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '幻灯片切换时触发', 'en-US': '' },
-          'demoId': 'carousel-events'
-        }
       ]
     },
     {
@@ -246,15 +279,15 @@ export default {
           'name': 'title',
           'type': 'string',
           'defaultValue': '',
-          'desc': { 'zh-CN': '幻灯片标题', 'en-US': '' },
+          'desc': { 'zh-CN': '幻灯片标题', 'en-US': 'Slide Title' },
           'demoId': 'show-title'
         },
         {
           'name': 'name',
           'type': 'string',
           'defaultValue': '',
-          'desc': { 'zh-CN': '幻灯片名称', 'en-US': '' },
-          'demoId': 'show-title'
+          'desc': { 'zh-CN': '幻灯片名称', 'en-US': 'Slide Name' },
+          'demoId': 'manual-play'
         }
       ],
       'slots': [
@@ -262,7 +295,7 @@ export default {
           'name': 'default',
           'type': '',
           'defaultValue': '',
-          'desc': { 'zh-CN': '默认插槽', 'en-US': '' },
+          'desc': { 'zh-CN': '默认插槽', 'en-US': 'Default slot' },
           'demoId': 'manual-play'
         }
       ]

package/demos/pc/app/cascader/auto-load-checkStrictly-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-cascader :props="propsAuto"></tiny-cascader>
+  <tiny-cascader v-model="value" :props="propsAuto"></tiny-cascader>
 </template>
 
 <script setup>
@@ -7,6 +7,7 @@ import { ref } from 'vue'
 import { Cascader as TinyCascader } from '@opentiny/vue'
 
 let id = 0
+const value = ref('')
 const propsAuto = ref({
   lazy: true,
   checkStrictly: true,

package/demos/pc/app/cascader/auto-load-checkStrictly.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-cascader :props="propsAuto"></tiny-cascader>
+  <tiny-cascader v-model="value" :props="propsAuto"></tiny-cascader>
 </template>
 
 <script>
@@ -12,6 +12,7 @@ export default {
   data() {
     let id = 0
     return {
+      value: '',
       propsAuto: {
         lazy: true,
         checkStrictly: true,

package/demos/pc/app/cascader/auto-load-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-cascader :props="propsAuto"></tiny-cascader>
+  <tiny-cascader v-model="value" :props="propsAuto"></tiny-cascader>
 </template>
 
 <script setup>
@@ -7,6 +7,8 @@ import { ref } from 'vue'
 import { Cascader as TinyCascader } from '@opentiny/vue'
 
 let id = 0
+const value = ref('')
+
 const propsAuto = ref({
   lazy: true,
   lazyLoad(node, resolve) {

package/demos/pc/app/cascader/auto-load.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-cascader :props="propsAuto"></tiny-cascader>
+  <tiny-cascader v-model="value" :props="propsAuto"></tiny-cascader>
 </template>
 
 <script>
@@ -12,6 +12,7 @@ export default {
   data() {
     let id = 0
     return {
+      value: '',
       propsAuto: {
         lazy: true,
         lazyLoad(node, resolve) {

package/demos/pc/app/cascader/events-composition-api.vue

@@ -3,7 +3,7 @@
     <div>value: {{ value }}</div>
     <tiny-cascader
       v-model="value"
-      ref="cascader"
+      ref="cascaderRef"
       :options="options"
       @change="handleChange"
       @blur="handleblur"

package/demos/pc/app/cascader/expand-trigger-composition-api.vue

@@ -4,7 +4,200 @@
 
 <script setup>
 import { Cascader as TinyCascader } from '@opentiny/vue'
-import { reactive } from 'vue'
+import { ref } from 'vue'
 
-const options = reactive([])
+const options = ref([
+  {
+    value: 'zhinan',
+    label: '指南',
+    children: [
+      {
+        value: 'anzhuang',
+        label: '安装',
+        children: [
+          {
+            value: 'xiangmudengji',
+            label: '项目登记'
+          },
+          {
+            value: 'huanjingzhunbei',
+            label: '环境准备'
+          },
+          {
+            value: 'anzhuangcli',
+            label: '安装 CLI'
+          },
+          {
+            value: 'chuangjianxiangmu',
+            label: '创建项目'
+          }
+        ]
+      },
+      {
+        value: 'kaifa',
+        label: '开发',
+        children: [
+          {
+            value: 'yinruzujian',
+            label: '引入组件'
+          },
+          {
+            value: 'monishuju',
+            label: '模拟数据'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    value: 'zujian',
+    label: '组件',
+    children: [
+      {
+        value: 'basic',
+        label: '框架风格',
+        children: [
+          {
+            value: 'layout',
+            label: 'Layout 布局'
+          },
+          {
+            value: 'color',
+            label: 'Color 色彩'
+          },
+          {
+            value: 'font',
+            label: 'Font 字体'
+          },
+          {
+            value: 'icon',
+            label: 'Icon 图标'
+          }
+        ]
+      },
+      {
+        value: 'form',
+        label: '表单组件',
+        children: [
+          {
+            value: 'radio',
+            label: 'Radio 单选框'
+          },
+          {
+            value: 'checkbox',
+            label: 'Checkbox 多选框'
+          },
+          {
+            value: 'input',
+            label: 'Input 输入框'
+          },
+          {
+            value: 'number',
+            label: 'Numeric 计数器'
+          },
+          {
+            value: 'select',
+            label: 'Select 选择器'
+          },
+          {
+            value: 'cascader',
+            label: 'Cascader 级联选择器'
+          },
+          {
+            value: 'switch',
+            label: 'Switch 开关'
+          },
+          {
+            value: 'slider',
+            label: 'Slider 滑块'
+          },
+          {
+            value: 'time-picker',
+            label: 'TimePicker 时间选择器'
+          },
+          {
+            value: 'date-picker',
+            label: 'DatePicker 日期选择器'
+          },
+          {
+            value: 'form',
+            label: 'Form 表单'
+          }
+        ]
+      },
+      {
+        value: 'data',
+        label: '数据组件',
+        children: [
+          {
+            value: 'tree',
+            label: 'Tree 树形控件'
+          },
+          {
+            value: 'pager',
+            label: 'Pager 分页'
+          }
+        ]
+      },
+      {
+        value: 'notice',
+        label: '提示组件',
+        children: [
+          {
+            value: 'alert',
+            label: 'Alert 警告'
+          },
+          {
+            value: 'loading',
+            label: 'Loading 加载'
+          }
+        ]
+      },
+      {
+        value: 'navigation',
+        label: '导航组件',
+        children: [
+          {
+            value: 'menu',
+            label: 'NavMenu 导航菜单'
+          },
+          {
+            value: 'tabs',
+            label: 'Tabs 标签页'
+          },
+          {
+            value: 'breadcrumb',
+            label: 'Breadcrumb 面包屑'
+          },
+          {
+            value: 'steps',
+            label: 'Steps 步骤条'
+          }
+        ]
+      },
+      {
+        value: 'others',
+        label: '其他组件',
+        children: [
+          {
+            value: 'rate',
+            label: 'Rate 评分'
+          },
+          {
+            value: 'tag',
+            label: 'Tag 标签'
+          },
+          {
+            value: 'usercontact',
+            label: 'UserContact 联系人'
+          },
+          {
+            value: 'slidebar',
+            label: 'SlideBar 滚动块'
+          }
+        ]
+      }
+    ]
+  }
+])
 </script>