docs(breadcrumb): optimize breadcrumb docs (#547)

* docs(breadcrumb): modify component description

* docs(breadcrumb): adjust the order of api

* docs(breadcrumb): optimize api docs

* docs(breadcrumb): optimize demo docs

* docs(breadcrumb): adjust the order of  api

examples/sites/demos/app/breadcrumb/base-composition-api.vue

@@ -8,7 +8,7 @@
   </tiny-breadcrumb>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { Breadcrumb as TinyBreadcrumb, BreadcrumbItem as TinyBreadcrumbItem, Notify } from '@opentiny/vue'
 
 function breadcrumbClick(value) {

examples/sites/demos/app/breadcrumb/base-on-route-composition-api.vue

@@ -6,7 +6,7 @@
   </tiny-breadcrumb>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 import { Breadcrumb as TinyBreadcrumb, BreadcrumbItem as TinyBreadcrumbItem } from '@opentiny/vue'

examples/sites/demos/app/breadcrumb/base-on-route.vue

@@ -6,7 +6,7 @@
   </tiny-breadcrumb>
 </template>
 
-<script lang="jsx">
+<script>
 import { Breadcrumb, BreadcrumbItem } from '@opentiny/vue'
 
 export default {

examples/sites/demos/app/breadcrumb/base.vue

@@ -8,7 +8,7 @@
   </tiny-breadcrumb>
 </template>
 
-<script lang="jsx">
+<script>
 import { Breadcrumb, BreadcrumbItem, Notify } from '@opentiny/vue'
 
 export default {

examples/sites/demos/app/breadcrumb/options-composition-api.vue

@@ -5,7 +5,7 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { Breadcrumb as TinyBreadcrumb, Notify } from '@opentiny/vue'
 

examples/sites/demos/app/breadcrumb/options.vue

@@ -5,7 +5,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Breadcrumb, Notify } from '@opentiny/vue'
 
 export default {

examples/sites/demos/app/breadcrumb/separator-composition-api.vue

@@ -18,7 +18,7 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { Breadcrumb as TinyBreadcrumb, BreadcrumbItem as TinyBreadcrumbItem } from '@opentiny/vue'
 import { iconBoat } from '@opentiny/vue-icon'
 

examples/sites/demos/app/breadcrumb/separator.vue

@@ -18,7 +18,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Breadcrumb, BreadcrumbItem } from '@opentiny/vue'
 import { IconBoat } from '@opentiny/vue-icon'
 

examples/sites/demos/app/breadcrumb/slot-default-composition-api.vue

@@ -10,6 +10,6 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { Breadcrumb as TinyBreadcrumb, BreadcrumbItem as TinyBreadcrumbItem } from '@opentiny/vue'
 </script>

examples/sites/demos/app/breadcrumb/slot-default.vue

@@ -10,7 +10,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Breadcrumb, BreadcrumbItem } from '@opentiny/vue'
 
 export default {

examples/sites/demos/app/breadcrumb/webdoc/breadcrumb.cn.md

@@ -4,4 +4,4 @@ title: Breadcrumb 面包屑
 
 # Breadcrumb 面包屑
 
-<div>Breadcrumb 面包屑导航，作用是告诉访问者他们目前在网站中的位置以及如何返回。</div>
+<div>显示当前页面的位置，并能返回之前的任意页面。</div>

examples/sites/demos/app/breadcrumb/webdoc/breadcrumb.en.md

@@ -4,4 +4,4 @@ title: Breadcrumb
 
 # Breadcrumb
 
-<div>Breadcrumb navigation, which tells visitors where they are currently on the site and how to get back.</div>
+<div>Shows the location of the current page and can return to any previous page.</div>

examples/sites/demos/app/breadcrumb/webdoc/breadcrumb.js

@@ -34,9 +34,9 @@ export default {
       'name': { 'zh-CN': 'options 配置', 'en-US': 'options configuration' },
       'desc': {
         'zh-CN':
-          '<p>通过 <code>options</code> 总体配置每个 <code>BreadcrumbItem</code>。  </p> 设置<code>text-field</code> 指定显示字段，默认显示字段为 <code>label</code>\n',
+          '<p>通过 <code>options</code> 总体配置每个 <code>BreadcrumbItem</code>。  </p> 设置<code>text-field</code> 指定显示字段，默认显示字段为 <code>label</code>。\n',
         'en-US':
-          '<p>Totally configure each <code>BreadcrumbItem</code> via <code>options</code>. </p>Set <code>text-field</code> to specify the field to be displayed. The default field to be displayed is <code>label</code>\n'
+          '<p>Totally configure each <code>BreadcrumbItem</code> via <code>options</code>. </p>Set <code>text-field</code> to specify the field to be displayed. The default field to be displayed is <code>label</code>.\n'
       },
       'codeFiles': ['options.vue']
     }
@@ -45,10 +45,17 @@ export default {
     {
       'name': 'breadcrumb',
       'type': 'component',
-      'properties': [],
+      'props': [
-      'events': [],
+        {
-      'slots': [],
+          'name': 'options',
-      'breadcrumb-attrs': [
+          'type': 'Array',
+          'defaultValue': '该属性的默认值为 []',
+          'desc': {
+            'zh-CN': '配置 options ,可以单独使用 tiny-breadcrumb 组件',
+            'en-US': 'Configure options. The tiny-breadcrumb component can be used independently.'
+          },
+          'demoId': 'options'
+        },
         {
           'name': 'separator',
           'type': 'String',
@@ -63,16 +70,6 @@ export default {
           'desc': { 'zh-CN': '图标分隔符 class', 'en-US': 'Icon separator class' },
           'demoId': 'separator'
         },
-        {
-          'name': 'options',
-          'type': 'Array',
-          'defaultValue': '[]',
-          'desc': {
-            'zh-CN': '配置 options ,可以单独使用 tiny-breadcrumb 组件',
-            'en-US': 'Configure options. The tiny-breadcrumb component can be used independently.'
-          },
-          'demoId': 'options'
-        },
         {
           'name': 'text-field',
           'type': 'String',
@@ -85,7 +82,7 @@ export default {
           'demoId': 'options'
         }
       ],
-      'breadcrumb-events': [
+      'events': [
         {
           'name': 'select',
           'type': 'Function',
@@ -96,17 +93,18 @@ export default {
           },
           'demoId': 'options'
         }
-      ],
+      ]
-      'breadcrumbItem-attrs': [
+    },
+    {
+      'name': 'breadcrumbItem',
+      'type': 'component',
+      'props': [
         {
-          'name': 'to',
+          'name': 'label',
-          'type': 'String , Object',
+          'type': 'String',
           'defaultValue': '',
-          'desc': {
+          'desc': { 'zh-CN': '定义面包屑的显示值', 'en-US': 'Define the breadcrumb display value.' },
-            'zh-CN': '路由跳转对象，同 vue-router 的 to',
+          'demoId': 'base'
-            'en-US': 'Route redirection object, which is the same as to of vue-router'
-          },
-          'demoId': 'slot-default'
         },
         {
           'name': 'replace',
@@ -119,23 +117,17 @@ export default {
           'demoId': 'slot-default'
         },
         {
-          'name': 'label',
+          'name': 'to',
-          'type': 'String',
+          'type': 'String , Object',
           'defaultValue': '',
-          'desc': { 'zh-CN': '定义面包屑的显示值', 'en-US': 'Define the breadcrumb display value.' },
+          'desc': {
-          'demoId': 'base'
+            'zh-CN': '路由跳转对象，同 vue-router 的 to',
-        }
+            'en-US': 'Route redirection object, which is the same as to of vue-router'
-      ],
+          },
-      'breadcrumbItem-slots': [
-        {
-          'name': 'default',
-          'type': '',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '默认插槽', 'en-US': 'Default slot' },
           'demoId': 'slot-default'
         }
       ],
-      'breadcrumbItem-events': [
+      'events': [
         {
           'name': 'select',
           'type': '',
@@ -146,6 +138,15 @@ export default {
           },
           'demoId': 'base'
         }
+      ],
+      'slots': [
+        {
+          'name': 'default',
+          'type': '',
+          'defaultValue': '',
+          'desc': { 'zh-CN': '默认插槽', 'en-US': 'Default slot' },
+          'demoId': 'slot-default'
+        }
       ]
     }
   ]