feat(breadcrumb): [breadcrumb] adapts to xdesign theme (#1693)

packages/design/smb/index.ts

@@ -11,6 +11,7 @@ import Pager from './src/pager'
 import Select from './src/select'
 import TreeNode from './src/tree-node'
 import UploadList from './src/upload-list'
+import BreadcrumbItem from './src/breadcrumb-item'
 import { version } from './package.json'
 
 export default {
@@ -29,6 +30,7 @@ export default {
     Pager,
     Select,
     TreeNode,
+    BreadcrumbItem,
     UploadList
   }
 }

packages/design/smb/src/breadcrumb-item/index.ts

@@ -0,0 +1,3 @@
+export default {
+  separator: '/'
+}

packages/renderless/src/breadcrumb-item/vue.ts

@@ -23,13 +23,17 @@ export const api = ['linkClick', 'state']
 export const renderless = (
   props: IBreadcrumbItemProps,
   { reactive, inject }: ISharedRenderlessParamHooks,
+  { designConfig },
   { refs, router, emit }: IBreadcrumbItemRenderlessParamUtils
 ) => {
   const breadcrumbEmitter = inject('breadcrumbEmitter')
   const breadcrumb = inject('breadcrumb')
   const constants = breadcrumb._constants
+  // separator
+  const separator = props.separator || designConfig?.separator || '>'
   const state = reactive({
-    size: inject('size', null)
+    size: inject('size', null),
+    separator
   })
   const api: IBreadcrumbItemApi = {
     state,

packages/vue/src/breadcrumb-item/src/pc.vue

@@ -21,7 +21,7 @@
       :is="breadcrumb.separatorIcon"
       class="tiny-svg-size tiny-breadcrumb__separator-cls"
     />
-    <span v-else class="tiny-breadcrumb__separator">{{ breadcrumb.separator }}</span>
+    <span v-else class="tiny-breadcrumb__separator">{{ state.separator }}</span>
   </span>
 </template>
 

packages/vue/src/breadcrumb/src/index.ts

@@ -26,7 +26,7 @@ export const breadcrumbProps = {
   },
   separator: {
     type: String,
-    default: '>'
+    default: ''
   },
   separatorIcon: {
     type: Object