style: 更新 Ant Select 样式和高度调整

src/components/common-select/index.vue

@@ -15,7 +15,7 @@
     @change="handleChange"
   >
     <Option v-for="(item, index) in options" :key="index" :value="item.id" :label="item.name">
-      <div class="flex items-center">
+      <div class="flex items-center h-full">
         <img v-if="item.icon" :src="item.icon" class="w-16px h-16px mr-8px rounded-4px" />
         {{ item.name }}
       </div>
@@ -56,7 +56,7 @@ const props = defineProps({
   allowSearch: {
     type: Boolean,
     default: false,
-  }
+  },
 });
 
 const emits = defineEmits(['update:modelValue', 'change']);

src/styles/components/ant-select.scss

@@ -5,9 +5,11 @@
     border-color: #d7d7d9 !important;
     background-color: #fff !important;
     align-items: center;
+
     .ant-select-selection-search-input {
       height: 100% !important;
     }
+
     .ant-select-selection-placeholder {
       color: var(--Text-4, #737478);
       font-family: $font-family-regular;
@@ -16,6 +18,7 @@
       font-weight: 400;
       line-height: 22px;
     }
+
     .ant-select-selection-item {
       color: var(--Text-4, #211f24);
       font-family: $font-family-regular;
@@ -24,6 +27,7 @@
       font-weight: 400;
     }
   }
+
   &:focus,
   &-focused {
     .ant-select-selector {
@@ -32,38 +36,53 @@
       box-shadow: 0 0 0 0 var(--color-primary-light-2) !important;
     }
   }
+
   &.ant-select-status-error {
     border-color: $color-error !important;
   }
-
-
 }
 
 .ant-select {
   .ant-select-selector {
     height: 32px !important;
+
+    .ant-select-selection-item {
+      height: 32px;
+    }
   }
 
   &.ant-select-lg {
     .ant-select-selector {
       height: 36px !important;
+
+      .ant-select-selection-item {
+        height: 36px;
+      }
     }
   }
 
   &.ant-select-sm {
     .ant-select-selector {
       height: 28px !important;
+
+      .ant-select-selection-item {
+        height: 28px;
+      }
     }
   }
 
   &.ant-select-multiple {
     .ant-select-selector {
-      padding: 0 12px 0 4px !important;
+      min-height: 32px;
+      height: fit-content !important;
+      padding-left: 4px !important;
 
       .ant-select-selection-overflow-item {
         .ant-select-selection-item {
+          height: 24px;
+          line-height: 24px;
           border-radius: 4px;
-          background: #E6E6E8;
+          background: #e6e6e8;
           border: none;
           padding: 1px 8px;
 
@@ -76,18 +95,19 @@
 
     &.ant-select-lg {
       .ant-select-selector {
+        min-height: 36px;
         .ant-select-selection-overflow-item {
           .ant-select-selection-item {
             height: 24px;
             line-height: 24px;
           }
-
         }
       }
     }
 
     &.ant-select-sm {
       .ant-select-selector {
+        min-height: 28px;
         .ant-select-selection-overflow-item {
           .ant-select-selection-item {
             height: 22px;
@@ -97,26 +117,8 @@
               font-size: 12px;
             }
           }
-
         }
       }
     }
   }
-
-}
-
-.ant-select.ant-select-single {
-  .ant-select-selector {
-    height: 32px !important;
-  }
-  &.ant-select-lg {
-    .ant-select-selector {
-      height: 36px !important;
-    }
-  }
-  &.ant-select-sm {
-    .ant-select-selector {
-      height: 28px !important;
-    }
-  }
 }