feat: refine Badge's API

lib/default-theme/Badge.vue → lib/app/components/Badge.vue

 <script>
 export default {
   functional: true,
-  props: ['type', 'text'],
+  props: {
+    type: {
+      type: String,
+      default: 'tip'
+    },
+    text: String,
+    vertical: {
+      type: String,
+      default: 'top'
+    }
+  },
   render (h, { props, slots }) {
     return h('span', {
-      class: ['badge', props.type]
+      class: ['badge', props.type, props.vertical]
     }, props.text || slots().default)
   }
 }
 </script>
 
 <style lang="stylus">
-@import './styles/config.styl'
+@import '../../default-theme/styles/config.styl'
 
 .badge
   display inline-block
-  vertical-align top
   font-size 14px
   height 18px
   line-height 18px
-  border-radius 9px
-  padding 0 5px
+  border-radius 3px
+  padding 0 6px
   color white
   margin-right 5px
-  &.tip
+  background-color #42b983
+  &.middle
+    vertical-align middle
+  &.top
+    vertical-align top
+  &.tip, &.green
     background-color #42b983
-  &.warning, &.warn
+  &.error
+    background-color #DA5961 //#f66
+  &.warning, &.warn, &.yellow
     background-color darken(#ffe564, 35%)
 </style>