refactor(breadcrumb): code reorganize

packages/common/Anchor/src/Link.vue

@@ -43,9 +43,6 @@ export default {
       return this.href && this.NAnchor.activeHref === this.href
     }
   },
-  mounted () {
-    console.log(this.$slots.default)
-  },
   watch: {
     active: function (value) {
       if (value) this.NAnchor.updateBarPosition(this.$refs.title)

packages/common/Breadcrumb/index.js

@@ -1,5 +1,5 @@
 /* istanbul ignore file */
-import Breadcrumb from './src/main.vue'
+import Breadcrumb from './src/Breadcrumb.vue'
 import BreadcrumbItem from './src/BreadcrumbItem.vue'
 
 Breadcrumb.install = function (Vue) {

packages/common/Breadcrumb/src/BreadcrumbItem.vue

@@ -1,6 +1,8 @@
 <template>
   <span class="n-breadcrumb-item">
-    <slot />
+    <span class="n-breadcrumb-item__link" @click="handleClick">
+      <slot />
+    </span>
     <span class="n-breadcrumb-item__seperator">
       {{ seperator }}
     </span>
@@ -19,6 +21,11 @@ export default {
     seperator () {
       return this.NBreadcrumb.seperator
     }
+  },
+  methods: {
+    handleClick (e) {
+      this.$emit('click', e)
+    }
   }
 }
 </script>

styles/App.scss

@@ -1 +0,0 @@
-@import './mixins/mixins.scss';

styles/BackTop.scss

@@ -1,5 +1,4 @@
 @import './mixins/mixins.scss';
-@import './themes/vars.scss';
 
 @include themes-mixin {
   @include b(back-top) {

styles/Breadcrumb.scss

@@ -6,14 +6,21 @@
       @include once {
         transition: color .3s $default-cubic-bezier;
         @include b(icon) {
-          vertical-align: -.125em;
+          font-size: 16px;
+          vertical-align: -.2em;
         }
       }
-      color: map-get($--breadcrumb-link-text-color, 'default');
       @include b(icon) {
         transition: fill .3s $default-cubic-bezier;
         fill: map-get($--breadcrumb-link-text-color, 'default');
       }
+      @include e(link) {
+        @include once {
+          transition: color .3s $default-cubic-bezier;
+          cursor: pointer;
+        }
+        color: map-get($--breadcrumb-link-text-color, 'default');
+      }
       @include e(seperator) {
         @include once {
           transition: color .3s $default-cubic-bezier;
@@ -21,8 +28,19 @@
         }
         color: map-get($--breadcrumb-seperator-text-color, 'default');
       }
+      &:hover {
+        @include b(icon) {
+          fill: map-get($--breadcrumb-link-text-color, 'hover');
+        }
+        @include e(link) {
+          color: map-get($--breadcrumb-link-text-color, 'hover');
+        }
+      }
       &:last-child {
-        color: map-get($--breadcrumb-link-text-color, 'active');
+        @include e(link) {
+          cursor: unset;
+          color: map-get($--breadcrumb-link-text-color, 'active');
+        }
         @include b(icon) {
           fill: map-get($--breadcrumb-link-text-color, 'active');
         }

styles/themes/dark/components/Breadcrumb.scss

@@ -1,7 +1,8 @@
 @mixin setup-dark-breadcrumb {
   $--breadcrumb-link-text-color: (
-    'default': $--n-secondary-text-color,
-    'active': $--n-text-color
+    'default': $--neutral-4,
+    'active': $--n-text-color,
+    'hover': $--primary-6
   ) !global;
   $--breadcrumb-seperator-text-color: (
     'default': $--n-secondary-text-color

styles/themes/light/components/Breadcrumb.scss

@@ -1,7 +1,8 @@
 @mixin setup-light-breadcrumb {
   $--breadcrumb-link-text-color: (
-    'default': $--n-secondary-text-color,
-    'active': $--n-text-color
+    'default': $--neutral-4,
+    'active': $--n-text-color,
+    'hover': $--primary-6
   ) !global;
   $--breadcrumb-seperator-text-color: (
     'default': $--n-secondary-text-color