完成面包屑组件的简化

src/badge/index.js

@@ -64,7 +64,7 @@ class Badge extends Component {
     css`
       $colors: (
         info: 'blue',
-        success: 'teal',
+        success: 'green',
         warning: 'orange'
       );
 

src/breadcrumb/index.js

@@ -1,12 +1,10 @@
 /**
- * {}
+ * {面包屑导航}
  * @author yutent<yutent.io@gmail.com>
  * @date 2023/04/10 16:12:33
  */
 
-import { css, html, Component, bind, styleMap } from 'wkit'
-
-const last = Symbol('last')
+import { css, html, Component, styleMap } from 'wkit'
 
 class Breadcrumb extends Component {
   static styles = [
@@ -25,9 +23,7 @@ class Breadcrumb extends Component {
     let list = Array.from(this.children)
     list.forEach((it, i) => {
       if (it.tagName === 'WC-BREADCRUMB-ITEM') {
-        if (list.length === i + 1) {
-          it.last = true
-        }
+        it.last = list.length === i + 1
       } else {
         it.remove()
       }
@@ -41,44 +37,35 @@ class Breadcrumb extends Component {
 
 class Item extends Component {
   static props = {
-    path: '',
-    separator: '/'
+    separator: '/',
+    last: 'bool!'
   }
 
   static styles = [
     css`
       :host,
-      .breadcrumb-item {
+      .item {
         display: inline-flex;
         align-items: center;
         height: 32px;
         font-size: 14px;
       }
-      .separator {
+      .pipe {
         margin: 0 8px;
         user-select: none;
       }
     `
   ]
 
-  get last() {
-    return this[last] || false
-  }
-
-  set last(val) {
-    this[last] = !!val
-    this.$requestUpdate()
-  }
-
   render() {
     return html`
-      <label class="breadcrumb-item">
+      <label class="item">
         <slot></slot>
         <span
-          class="separator"
-          style=${styleMap({ display: this[last] ? 'none' : '' })}
+          class="pipe"
+          style=${styleMap({ display: this.last ? 'none' : '' })}
         >
-          <slot name="separator"> ${this.separator || '/'} </slot>
+          <slot name="separator">${this.separator || '/'}</slot>
         </span>
       </label>
     `