From 15870de8e5d10948ce532544ce052c1140cc22b1 Mon Sep 17 00:00:00 2001
From: Jecyu <jecyu.lin@gmail.com>
Date: Thu, 7 Oct 2021 16:49:32 +0800
Subject: [PATCH 1/3] =?UTF-8?q?feat(breadcrumb):=20=E6=B7=BB=E5=8A=A0=20vu?=
 =?UTF-8?q?e=20=E8=B7=AF=E7=94=B1=E5=B1=9E=E6=80=A7to=E3=80=81replace=20?=
 =?UTF-8?q?=E7=89=B9=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 devui/breadcrumb/src/breadcrumb-item-types.ts | 14 +++++++++
 devui/breadcrumb/src/breadcrumb-item.scss     |  9 ++++++
 devui/breadcrumb/src/breadcrumb-item.tsx      | 29 +++++++++++++++++--
 devui/breadcrumb/src/breadcrumb-types.ts      |  2 ++
 devui/breadcrumb/src/breadcrumb.tsx           | 15 +++++++++-
 docs/components/breadcrumb/index.md           | 29 ++++++++++++-------
 6 files changed, 84 insertions(+), 14 deletions(-)

diff --git a/devui/breadcrumb/src/breadcrumb-item-types.ts b/devui/breadcrumb/src/breadcrumb-item-types.ts
index 04542fad..a118789c 100644
--- a/devui/breadcrumb/src/breadcrumb-item-types.ts
+++ b/devui/breadcrumb/src/breadcrumb-item-types.ts
@@ -26,6 +26,20 @@ export const breadcrumbItemProps = {
   isSearch: {
     type: Boolean,
     dafault: false
+  },
+  /**
+   * 路由跳转对象，同 vue-router 的 to
+   */
+  to: {
+    type: [String, Object] as PropType<string | Record<string, unknown>>,
+    default: ''
+  },
+  /**
+   * 在使用 to 进行路由跳转时，启用 replace 将不会向 history 添加新记录
+   */
+  replace: {
+    type: Boolean,
+    default: false
   }
 } as const
 
diff --git a/devui/breadcrumb/src/breadcrumb-item.scss b/devui/breadcrumb/src/breadcrumb-item.scss
index dd06a51a..5c3a6046 100644
--- a/devui/breadcrumb/src/breadcrumb-item.scss
+++ b/devui/breadcrumb/src/breadcrumb-item.scss
@@ -30,6 +30,15 @@
       color $devui-animation-duration-slow
       $devui-animation-ease-in-out-smooth;
   }
+
+  .is-link {
+    cursor: pointer;
+
+    &:hover {
+      color: $devui-text;
+      text-decoration: none;
+    }
+  }
 }
 
 .devui-breadcrumb-separator {
diff --git a/devui/breadcrumb/src/breadcrumb-item.tsx b/devui/breadcrumb/src/breadcrumb-item.tsx
index 39a2674a..f8f1ff68 100644
--- a/devui/breadcrumb/src/breadcrumb-item.tsx
+++ b/devui/breadcrumb/src/breadcrumb-item.tsx
@@ -1,4 +1,11 @@
-import { defineComponent, inject } from 'vue'
+import {
+  defineComponent,
+  inject,
+  onMounted,
+  onBeforeUnmount,
+  ref,
+  getCurrentInstance
+} from 'vue'
 
 import {
   breadcrumbItemProps,
@@ -11,13 +18,31 @@ export default defineComponent({
   props: breadcrumbItemProps,
   setup(props: BreadcrumbItemProps, { slots }) {
     const separatorIcon = inject('separatorIcon')
+    const linkClass = props.to ? 'is-link' : ''
+    const link = ref(null)
+    const instance = getCurrentInstance()
+    const router = instance.appContext.config.globalProperties.$router
+    const handleClickLink = () => {
+      if (!props.to || !router) return
+      props.replace ? router.replace(props.to) : router.push(props.to)
+    }
+    onMounted(() => {
+      link.value.addEventListener('click', handleClickLink)
+    })
+
+    onBeforeUnmount(() => {
+      link.value.removeEventListener('click', handleClickLink)
+    })
+
     return () => {
       const renderBreadcrumbSperator = () => {
         return <span class="devui-breadcrumb-separator">{separatorIcon}</span>
       }
       return (
         <div class="devui-breadcrumb-item">
-          {slots?.default()}
+          <span ref={link} class={linkClass}>
+            {slots?.default()}
+          </span>
           {renderBreadcrumbSperator()}
         </div>
       )
diff --git a/devui/breadcrumb/src/breadcrumb-types.ts b/devui/breadcrumb/src/breadcrumb-types.ts
index f8d43be8..caebf81b 100644
--- a/devui/breadcrumb/src/breadcrumb-types.ts
+++ b/devui/breadcrumb/src/breadcrumb-types.ts
@@ -5,6 +5,8 @@ export interface SourceConfig {
   link?: string // 跳转的路径
   target?: string // 规定在何处打开链接文档
   noNavigation?: boolean // 链接是否不可跳转,一般用于当前所处位置不可跳转的配置
+  linkType?: 'hrefLink' | 'routerLink' // 链接类型，默认为'hrefLink'方式，可选'hrefLink' 或 'routerLink'
+  replace: boolean // 在使用 to 进行路由跳转时，启用 replace 将不会向 history 添加新记录
 }
 
 export const breadcrumbProps = {
diff --git a/devui/breadcrumb/src/breadcrumb.tsx b/devui/breadcrumb/src/breadcrumb.tsx
index 0da81a29..6b5ffeb2 100644
--- a/devui/breadcrumb/src/breadcrumb.tsx
+++ b/devui/breadcrumb/src/breadcrumb.tsx
@@ -18,15 +18,28 @@ export default defineComponent({
     const separatorIcon = getPropsSlot(slots, props, 'separatorIcon') ?? '/'
     provide('separatorIcon', separatorIcon)
 
+    const renderBreadcrumbItemRouted = (item) => {
+      return (
+        <d-breadcrumb-item to={`path: ${item.link}`} replace={item.replace}>
+          {item.title}
+        </d-breadcrumb-item>
+      )
+    }
     const renderBreadItemList = (source: SourceConfig[]) => {
       return source.map((item: SourceConfig) => {
+        if (!item.noNavigation && item.linkType === 'routerLink') {
+          return renderBreadcrumbItemRouted(item)
+        }
         return (
           <d-breadcrumb-item>
-            {!item.noNavigation ? (
+            {/* hrefLink */}
+            {!item.noNavigation &&
+            (!item.linkType || item.linkType === 'hrefLink') ? (
               <a href={item.link} target={item.target ? item.target : '_self'}>
                 {item.title}
               </a>
             ) : null}
+            {/* normal */}
             {item.noNavigation ? <span>{item.title}</span> : null}
           </d-breadcrumb-item>
         )
diff --git a/docs/components/breadcrumb/index.md b/docs/components/breadcrumb/index.md
index 2289ae81..bdf9c820 100644
--- a/docs/components/breadcrumb/index.md
+++ b/docs/components/breadcrumb/index.md
@@ -14,6 +14,7 @@
 ```vue
 <template>
   <d-breadcrumb>
+    <d-breadcrumb-item to="{ path: '/' }">Homepage</d-breadcrumb-item>
     <d-breadcrumb-item>
       <a href="/">DevUI</a>
     </d-breadcrumb-item>
@@ -39,7 +40,7 @@ export default defineComponent({
   name: "DBreadcrumbDemoSourceConfig",
   setup() {
     const source = reactive([
-      { title: 'DevUI', link: '/' },
+      { title: 'DevUI', link: '/', linkType: 'routerLink', replace: true },
       { title: 'Breadcrumb', link: 'components/breadcrumb/', noNavigation: true }
     ])  
     return {
@@ -123,19 +124,23 @@ export default defineComponent({
 
 ### d-breadcrumb 参数
 
-|     参数      |                  类型                  |             默认              | 说明                                               | 跳转 Demo                 |
-| :-----------: | :------------------------------------: | :---------------------------: | :------------------------------------------------- | ------------------------- |
-| separatorIcon |               [`string`](#自定义分隔符的面包屑) | '/'                                                | 可选，自定义分隔符样式    | [自定义分隔符的面包屑](#自定义分隔符的面包屑)
-|    source     | [`Array<SourceConfig>`](#SourceConfig) |              []               | 可选，面包屑根据配置的 source 按照默认渲染方式显示 | [传入source](#传入source) |
+|     参数      |                  类型                  | 默认 | 说明                                               | 跳转 Demo                                     |
+| :-----------: | :------------------------------------: | :--: | :------------------------------------------------- | --------------------------------------------- |
+| separatorIcon |   [`string`](#自定义分隔符的面包屑)    | '/'  | 可选，自定义分隔符样式                             | [自定义分隔符的面包屑](#自定义分隔符的面包屑) |
+|    source     | [`Array<SourceConfig>`](#SourceConfig) |  []  | 可选，面包屑根据配置的 source 按照默认渲染方式显示 | [传入source](#传入source)                     |
 
-<!-- ### d-breadcrumb-item 参数
+### d-breadcrumb-item 参数
 
-|   参数   |                类型                | 默认  |                          说明                           | 跳转 Demo                         | 全局配置项 |
-| :------: | :--------------------------------: | :---: | :-----------------------------------------------------: | :-------------------------------- | ---------- |
-| showMenu |             `boolean`              | false |        可选，是否需要显示下拉箭头及下拉列表内容         | [可下拉的面包屑](#可下拉的面包屑) |            |
+|   参数   |                类型                | 默认  |                          说明                           | 跳转 Demo                         | 
+| :------: | :--------------------------------: | :---: | :-----------------------------------------------------: | :-------------------------------- |
+|to	| `string/object` | —	| 路由跳转对象，同 vue-router 的 to	| [基础面包屑](#基础面包屑) | 
+|replace|	`boolean`	|	false | 在使用 to 进行路由跳转时，启用 replace 将不会向 history 添加新记录 | [基础面包屑](#基础面包屑) |
+
+
+<!-- | showMenu |             `boolean`              | false |        可选，是否需要显示下拉箭头及下拉列表内容         | [可下拉的面包屑](#可下拉的面包屑) |            |
 | menuList | [`Array<MenuConfig>`](#menuconfig) |  --   |    可选，showMenu 为 true 时传入，下拉列表的显示内容    | [可下拉的面包屑](#可下拉的面包屑) |            |
-| isSearch |             `boolean`              | false | 可选，showMenu 为 true 时传入，下拉列表是否需要搜索功能 | [可下拉的面包屑](#可下拉的面包屑) |            |
-### d-breadcrumb-item 事件
+| isSearch |             `boolean`              | false | 可选，showMenu 为 true 时传入，下拉列表是否需要搜索功能 | [可下拉的面包屑](#可下拉的面包屑) |            | -->
+<!-- ### d-breadcrumb-item 事件
 
 |    事件     |          类型           |                          说明                           | 跳转 Demo                         |
 | :---------: | :---------------------: | :-----------------------------------------------------: | --------------------------------- |
@@ -159,5 +164,7 @@ export interface SourceConfig {
   link?: string; // 跳转的路径
   target?: string // 规定在何处打开链接文档
   noNavigation?: boolean; // 链接是否不可跳转，一般用于当前所处位置不可跳转的配置
+  linkType?: 'hrefLink' | 'routerLink'; // 链接类型，默认为'hrefLink'方式，可选'hrefLink' 或 'routerLink'
+  replace: Boolean // 在使用 to 进行路由跳转时，启用 replace 将不会向 history 添加新记录
 }
 ```
\ No newline at end of file
-- 
Gitee


From b2c97d16744ba33f616f3ffcc688fed309190043 Mon Sep 17 00:00:00 2001
From: Jecyu <jecyu.lin@gmail.com>
Date: Sat, 9 Oct 2021 23:00:19 +0800
Subject: [PATCH 2/3] =?UTF-8?q?feat(breadcrumb):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E6=B5=8B=E8=AF=95=E7=94=A8=E4=BE=8B=E3=80=81=E5=8E=BB=E6=8E=89?=
 =?UTF-8?q?=E6=96=87=E6=A1=A3=E6=97=A0=E7=94=A8=E6=B3=A8=E9=87=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .cz-config.js                                 | 45 +++++++++++++++
 devui/breadcrumb/__tests__/breadcrumb.spec.ts | 55 +++++++++++++++++++
 docs/components/breadcrumb/index.md           | 54 ------------------
 3 files changed, 100 insertions(+), 54 deletions(-)
 create mode 100644 .cz-config.js
 create mode 100644 devui/breadcrumb/__tests__/breadcrumb.spec.ts

diff --git a/.cz-config.js b/.cz-config.js
new file mode 100644
index 00000000..08b234a8
--- /dev/null
+++ b/.cz-config.js
@@ -0,0 +1,45 @@
+module.exports = {
+  types: [
+    {
+      value: 'feat',
+      name: 'feat:     新特性',
+    },
+    {
+      value: 'fix',
+      name: 'fix:      Bug 问题修复',
+    },
+    {
+      value: 'perf',
+      name: 'perf:     性能优化',
+    },
+    {
+      value: 'refactor',
+      name: 'refactor: 代码重构',
+    },
+    {
+      value: 'docs',
+      name: 'docs:     文档更新',
+    },
+    {
+      value: 'test',
+      name: 'test:     单元测试用例修改',
+    },
+    {
+      value: 'style',
+      name: 'style:    代码格式修改, 注意不是 css 修改',
+    },
+    {
+      value: 'revert',
+      name: 'revert:   Revert 一个 commit',
+    },
+    {
+      value: 'version',
+      name: 'version:  版本发布',
+    },
+  ],
+
+  scopes: ['公共模块', 'README', '版本发布'],
+
+  allowCustomScopes: true,
+  allowBreakingChanges: ['feat', 'fix'],
+};
\ No newline at end of file
diff --git a/devui/breadcrumb/__tests__/breadcrumb.spec.ts b/devui/breadcrumb/__tests__/breadcrumb.spec.ts
new file mode 100644
index 00000000..f05cf80d
--- /dev/null
+++ b/devui/breadcrumb/__tests__/breadcrumb.spec.ts
@@ -0,0 +1,55 @@
+import { mount } from '@vue/test-utils'
+import DBreadcrumb from '../src/breadcrumb'
+import DBreadcrumbItem from '../src/breadcrumb-item'
+
+describe('breadcrumb', () => {
+  it('should breadcrumb display correctly', () => {
+    const wrapper = mount({
+      components: {
+        DBreadcrumb,
+        DBreadcrumbItem
+      },
+      template: `<d-breadcrumb>
+            <d-breadcrumb-item>
+              <a href="/">DevUI</a>
+            </d-breadcrumb-item>
+            <d-breadcrumb-item>
+              <span>Breadcrumb</span>
+            </d-breadcrumb-item>
+          </d-breadcrumb>`
+    })
+    const items = wrapper.findAll('.devui-breadcrumb-item')
+    const separators = wrapper.findAll('.devui-breadcrumb-separator')
+    expect(items.length).toBe(2)
+    expect(separators.length).toBe(2)
+  })
+  it('should separator support custom', () => {
+    const wrapper = mount({
+      components: {
+        DBreadcrumb,
+        DBreadcrumbItem
+      },
+      template: `
+      <d-breadcrumb separatorIcon="?">
+        <d-breadcrumb-item>A</d-breadcrumb-item>
+      </d-breadcrumb>
+    `
+    })
+    expect(wrapper.find('.devui-breadcrumb-separator').text()).toBe('?')
+  })
+
+  it('should `to` work correctly', () => {
+    const wrapper = mount({
+      components: {
+        DBreadcrumb,
+        DBreadcrumbItem
+      },
+      template: `
+      <d-breadcrumb separatorIcon="?">
+        <d-breadcrumb-item to="/index">A</d-breadcrumb-item>
+      </d-breadcrumb>
+    `
+    })
+    expect(wrapper.find('.is-link')).toBeTruthy()
+  })
+})
diff --git a/docs/components/breadcrumb/index.md b/docs/components/breadcrumb/index.md
index bdf9c820..243c160b 100644
--- a/docs/components/breadcrumb/index.md
+++ b/docs/components/breadcrumb/index.md
@@ -53,42 +53,6 @@ export default defineComponent({
 :::
 
 ### 可下拉的面包屑【TODO】
-
-<!-- :::demo
-<template>
-  <d-breadcrumb>
-    <d-breadcrumb-item v-for='item in breadData' :showMenu='item.showMenu' :menuList='item.menuList' :isSearch='item.isSearch' @toggleEvent='toggleEvent'>
-      <a :href='item.link'>{{ item.label }}</a>
-    </d-breadcrumb-item>
-  </d-breadcrumb>
-</template>
-<script>
-import { defineComponent, reactive } from 'vue'
-
-export default defineComponent({
-  name: 'DBreadcrumbDemoMenu',
-  setup() {
-    const breadData = reactive([
-      { label: 'DevUI', showMenu: false, link: '/' },
-      {
-        label: 'Breadcrumb', showMenu: true, isSearch: true,
-        menuList: [
-          { name: 'Anchor', link: '/components/anchor/demo' },
-          { name: 'Button', link: '/components/button/demo' }
-        ]
-      }])  
-    const toggleEvent = (event) => {
-      console.log(event);
-    }
-    return {
-      breadData,
-    }
-  },
-})
-</script>
-```
-::: -->
-
 ### 自定义分隔符的面包屑
 
 :::demo
@@ -136,26 +100,8 @@ export default defineComponent({
 |to	| `string/object` | —	| 路由跳转对象，同 vue-router 的 to	| [基础面包屑](#基础面包屑) | 
 |replace|	`boolean`	|	false | 在使用 to 进行路由跳转时，启用 replace 将不会向 history 添加新记录 | [基础面包屑](#基础面包屑) |
 
-
-<!-- | showMenu |             `boolean`              | false |        可选，是否需要显示下拉箭头及下拉列表内容         | [可下拉的面包屑](#可下拉的面包屑) |            |
-| menuList | [`Array<MenuConfig>`](#menuconfig) |  --   |    可选，showMenu 为 true 时传入，下拉列表的显示内容    | [可下拉的面包屑](#可下拉的面包屑) |            |
-| isSearch |             `boolean`              | false | 可选，showMenu 为 true 时传入，下拉列表是否需要搜索功能 | [可下拉的面包屑](#可下拉的面包屑) |            | -->
-<!-- ### d-breadcrumb-item 事件
-
-|    事件     |          类型           |                          说明                           | 跳转 Demo                         |
-| :---------: | :---------------------: | :-----------------------------------------------------: | --------------------------------- |
-| toggleEvent | `EventEmitter<boolean>` | dropdown 菜单展开和收起的事件，返回值为当前菜单是否打开 | [可下拉的面包屑](#可下拉的面包屑) | -->
 ### 接口 & 类型定义
 
-<!-- MenuConfig
-```ts
-export interface MenuConfig {
-  name: string // 显示的名称
-  link: string // 跳转的路径，可为绝对路径与相对路径，注意需要与路由的配置一致
-  target?: string // 规定在何处打开链接文档
-}
-``` -->
-
 ### SourceConfig
 
 ```ts
-- 
Gitee


From 34489f4e5e668c2de558356401ac62decc4eeea6 Mon Sep 17 00:00:00 2001
From: naluduo233 <jecyu.lin@gmail.com>
Date: Sat, 9 Oct 2021 15:02:16 +0000
Subject: [PATCH 3/3] =?UTF-8?q?=E5=88=A0=E9=99=A4=E6=96=87=E4=BB=B6=20.cz-?=
 =?UTF-8?q?config.js?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .cz-config.js | 45 ---------------------------------------------
 1 file changed, 45 deletions(-)
 delete mode 100644 .cz-config.js

diff --git a/.cz-config.js b/.cz-config.js
deleted file mode 100644
index 08b234a8..00000000
--- a/.cz-config.js
+++ /dev/null
@@ -1,45 +0,0 @@
-module.exports = {
-  types: [
-    {
-      value: 'feat',
-      name: 'feat:     新特性',
-    },
-    {
-      value: 'fix',
-      name: 'fix:      Bug 问题修复',
-    },
-    {
-      value: 'perf',
-      name: 'perf:     性能优化',
-    },
-    {
-      value: 'refactor',
-      name: 'refactor: 代码重构',
-    },
-    {
-      value: 'docs',
-      name: 'docs:     文档更新',
-    },
-    {
-      value: 'test',
-      name: 'test:     单元测试用例修改',
-    },
-    {
-      value: 'style',
-      name: 'style:    代码格式修改, 注意不是 css 修改',
-    },
-    {
-      value: 'revert',
-      name: 'revert:   Revert 一个 commit',
-    },
-    {
-      value: 'version',
-      name: 'version:  版本发布',
-    },
-  ],
-
-  scopes: ['公共模块', 'README', '版本发布'],
-
-  allowCustomScopes: true,
-  allowBreakingChanges: ['feat', 'fix'],
-};
\ No newline at end of file
-- 
Gitee