fix(select): modify the DOM structure of all options in the select to be consistent with that of the regular options to solve the text alignment issue (#3488)

Author: shenjunjian

packages/theme-saas/src/select-dropdown/index.less

@@ -6,7 +6,7 @@
 @popper-prefix-cls: ~'@{css-prefix}popper';
 @scrollbar-prefix-cls: ~'@{css-prefix}scrollbar';
 @recycle-scroller-prefix-cls: ~'@{css-prefix}recycle-scroller';
-@select-dropdown__item-prefix-cls:~'@{css-prefix}select-dropdown__item';
+@select-dropdown__item-prefix-cls: ~'@{css-prefix}select-dropdown__item';
 
 .@{select-dropdown-prefix-cls} {
   @apply absolute;
@@ -37,15 +37,15 @@
     }
   }
 
-  & .@{recycle-scroller-prefix-cls}{
+  & .@{recycle-scroller-prefix-cls} {
     list-style: none;
 
-    .@{select-dropdown__item-prefix-cls}{
+    .@{select-dropdown__item-prefix-cls} {
       margin-right: 0
     }
 
-    &__slot{
-      .tiny-select-dropdown__item{
+    &__slot {
+      .tiny-select-dropdown__item {
         margin-bottom: 0;
       }
     }
@@ -58,6 +58,7 @@
     @apply text-color-text-secondary;
     @apply text-xs;
   }
+
   // tiny 新增
   .@{select-dropdown-prefix-cls}__empty-images {
     background-image: url('../images/empty-nodata.png');
@@ -88,31 +89,25 @@
     @apply m-1;
     @apply rounded;
 
-    > .tiny-svg,
-    > span > .tiny-svg {
+    >.tiny-svg,
+    >span>.tiny-svg {
       @apply ~'-mt-0.5';
     }
-    &:first-child {
-      > .tiny-svg,
-      > span > .tiny-svg {
-        margin-top: 1px
-      }
-    }
   }
 
   & &__loading {
     @apply text-center;
     @apply ~'py-2.5 px-0';
 
-    > .circular {
+    >.circular {
       @apply fill-color-brand;
       @apply h-4;
       @apply w-4;
       animation: loading-rotate 2s linear infinite;
       @apply inline-block;
       @apply align-top;
 
-      circle{
+      circle {
         animation: loading-dash 1.5s ease-in-out infinite;
         stroke-dasharray: 90, 150;
         stroke-dashoffset: 0;
@@ -170,4 +165,4 @@
     stroke-dasharray: 90, 150;
     stroke-dashoffset: -120px;
   }
-}
+}

packages/vue/src/select/src/pc.vue

@@ -496,8 +496,12 @@
               @mousedown.stop
               @mouseenter="state.hoverIndex = -9"
             >
-              <component :is="`icon-${state.selectCls}`" :class="['tiny-svg-size', state.selectCls]" />
-              <span>{{ allText || t('ui.base.all') }}</span>
+              <span class="tiny-option__checkbox-wrap tiny-select-dropdown__item-checkbox">
+                <component :is="`icon-${state.selectCls}`" :class="['tiny-svg-size', state.selectCls]"
+              /></span>
+              <div class="tiny-option-wrapper calc-width">
+                <span class="tiny-option-label">{{ allText || t('ui.base.all') }}</span>
+              </div>
             </li>
             <li
               v-if="
@@ -521,8 +525,12 @@
               @mousedown.stop
               @mouseenter="state.hoverIndex = -9"
             >
-              <component :is="`icon-${state.filteredSelectCls}`" :class="['tiny-svg-size', state.filteredSelectCls]" />
-              <span>{{ allText || t('ui.base.all') }}</span>
+              <span class="tiny-option__checkbox-wrap tiny-select-dropdown__item-checkbox">
+                <component :is="`icon-${state.filteredSelectCls}`" :class="['tiny-svg-size', state.filteredSelectCls]"
+              /></span>
+              <div class="tiny-option-wrapper calc-width">
+                <span class="tiny-option-label">{{ allText || t('ui.base.all') }}</span>
+              </div>
             </li>
             <tiny-option :value="state.query" created v-if="state.showNewOption"> </tiny-option>
             <slot>