feat: 完成 badge 的按需样式

package/component/src/component/badge/index.less

@@ -31,29 +31,54 @@
   border-width: 1px;
   border-style: solid;
   background-color: #fff;
+  border-color: @global-neutral-color-3;
   color: #666;
 }
 
-.layui-badge-dot-ripple > span{
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: block;
-    border-radius: 50%;
-    box-sizing: border-box;
-    animation: layui-badge-dot-anim-ripple 1.2s ease-in-out infinite;
+.layui-badge-dot-ripple > span {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+  border-radius: 50%;
+  box-sizing: border-box;
+  animation: layui-badge-dot-anim-ripple 1.2s ease-in-out infinite;
+}
+
+@keyframes layui-badge-dot-anim-ripple {
+  from {
+    transform: scale(0.8);
+    opacity: 0.6;
   }
 
-  @keyframes layui-badge-dot-anim-ripple {
-    from {
-      transform: scale(0.8);
-      opacity: 0.6;
-    }
-  
-    to {
-      transform: scale(2.4);
-      opacity: 0;
-    }
+  to {
+    transform: scale(2.4);
+    opacity: 0;
   }
+}
+
+/** Badge 在与其他组件配合使用时的辅助样式 */
+
+.layui-btn .layui-badge,
+.layui-btn .layui-badge-dot {
+  margin-left: 5px;
+}
+
+.layui-nav .layui-badge,
+.layui-nav .layui-badge-dot {
+  position: absolute;
+  top: 50%;
+  margin: -5px 6px 0;
+}
+
+.layui-nav .layui-badge {
+  margin-top: -10px;
+}
+
+.layui-tab-title .layui-badge,
+.layui-tab-title .layui-badge-dot {
+  left: 5px;
+  top: -2px;
+}

package/component/src/component/badge/index.vue

@@ -26,7 +26,6 @@ const classes = computed(() => {
       "layui-badge-dot-ripple": props.ripple,
     },
     `layui-bg-${props.theme}`,
-    
   ];
 });
 
@@ -37,11 +36,13 @@ const styles = computed(() => {
 
 <template>
   <span :class="classes" :style="styles">
-      <span v-if="type === 'dot'" 
-        :class="props.theme ? `layui-bg-${props.theme}` : ``" 
-        :style="styles ?? `background-color: #ff5722;`">
-      </span>
+    <span
+      v-if="type === 'dot'"
+      :class="props.theme ? `layui-bg-${props.theme}` : ``"
+      :style="styles ?? `background-color: #ff5722;`"
+    >
+    </span>
 
-      <slot v-if="type != 'dot'"></slot>
+    <slot v-if="type != 'dot'"></slot>
   </span>
 </template>

package/component/src/resolver/index.ts

@@ -43,6 +43,10 @@ const matchComponents = [
     pattern: /^LayEmpty$/,
     styleDir: "empty",
   },
+  {
+    pattern: /^LayBadge$/,
+    styleDir: "badge",
+  },
   // ....
   {
     pattern: /^LayAvatarList$/,

package/component/src/theme/index.less

@@ -376,7 +376,6 @@ a cite {
   color: #666 !important;
 }
 
-.layui-badge-rim,
 .layui-border,
 .layui-colla-content,
 .layui-colla-item,
@@ -1229,28 +1228,6 @@ a cite {
   margin: 0 15px;
 }
 
-.layui-btn .layui-badge,
-.layui-btn .layui-badge-dot {
-  margin-left: 5px;
-}
-
-.layui-nav .layui-badge,
-.layui-nav .layui-badge-dot {
-  position: absolute;
-  top: 50%;
-  margin: -5px 6px 0;
-}
-
-.layui-nav .layui-badge {
-  margin-top: -10px;
-}
-
-.layui-tab-title .layui-badge,
-.layui-tab-title .layui-badge-dot {
-  left: 5px;
-  top: -2px;
-}
-
 .layui-fixbar {
   position: fixed;
   right: 15px;