🌈 style(Tag): 调整Tag组件的plain样式

src/components/saleModeTag/index.tsx

@@ -14,17 +14,17 @@ const SaleModeTag: FC<SaleModeProps> = (props) => {
   return (
     <>
       {saleMode === EnumSaleMode.Bulk && (
-        <Tag circle type='primary' plain size={size} customClassName={customClassName}>
+        <Tag circle type='primary' size={size} customClassName={customClassName}>
           大货
         </Tag>
       )}
       {saleMode === EnumSaleMode.Plate && (
-        <Tag circle type='danger' plain size={size} customClassName={customClassName}>
+        <Tag circle type='danger' size={size} customClassName={customClassName}>
           剪板
         </Tag>
       )}
       {saleMode === EnumSaleMode.BulkCut && (
-        <Tag circle type='warning' plain size={size} customClassName={customClassName}>
+        <Tag circle type='warning' size={size} customClassName={customClassName}>
           散剪
         </Tag>
       )}

src/components/tag/index.module.scss

@@ -12,39 +12,54 @@
     font-size: $font_size_medium;
     height: 40px;
   }
-  &--small{
+  &--small {
     font-size: $font_size_min;
     height: 30px;
   }
-  &--circle{
+  &--circle {
     border-radius: 10px;
   }
 
   &--danger {
     border: 1px solid $color_danger;
-    color: $color_danger;
+    background-color: $color_danger;
+    color: white;
   }
-  &--primary{
+  &--primary {
     border: 1px solid $color_main;
-    color: $color_main;
+    background-color: $color_main;
+    color: white;
   }
-  &--warning{
+  &--warning {
     border: 1px solid $color_warning;
-    color: $color_warning;
+    background-color: $color_warning;
+    color: white;
   }
-  &--info{
+  &--info {
     border: 1px solid $color_info;
-    color: $color_info;
-    .tag--text {
-      color: rgba($color: #333333, $alpha: 0.8) !important;
-    }
+    background-color: $color_info;
+    color: white;
   }
   &--plain {
-    background-color: currentColor;
-    border-color: currentColor;
-    border: unset;
-    .tag--text {
-      color: #ffffff;
+    background-color: white;
+    &.tag--danger {
+      border: 1px solid $color_danger;
+      color: $color_danger;
+    }
+    &.tag--primary {
+      border: 1px solid $color_main;
+      color: $color_main;
+    }
+    &.tag--warning {
+      border: 1px solid $color_warning;
+      color: $color_warning;
+    }
+    &.tag--info {
+      border: 1px solid $color_info;
+      color: $color_info;
+      .tag--text {
+        color: rgba($color: #333333, $alpha: 0.8) !important;
+      }
     }
   }
   &--disabled {

src/components/tag/index.tsx

@@ -27,7 +27,7 @@ const Tag: FC<PropsType> = (props) => {
     onClick,
     circle = false,
     customStyle = {},
-    plain = false,
+    plain = false,         // 朴素
     customClassName = '',
   } = props
   const handleClick = (event) => {