From b9280c26ae2a1546ff11c94ca0b968a7e48ea520 Mon Sep 17 00:00:00 2001
From: shenjunjian <shenjunjian5@huawei.com>
Date: Mon, 9 Jun 2025 10:46:40 +0800
Subject: [PATCH] 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

---
 .../theme-saas/src/select-dropdown/index.less | 27 ++++++++-----------
 packages/vue/src/select/src/pc.vue            | 16 ++++++++---
 2 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/packages/theme-saas/src/select-dropdown/index.less b/packages/theme-saas/src/select-dropdown/index.less
index d19633e9c5..d23bbea7bf 100644
--- a/packages/theme-saas/src/select-dropdown/index.less
+++ b/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,23 +89,17 @@
     @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;
@@ -112,7 +107,7 @@
       @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;
   }
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/select/src/pc.vue b/packages/vue/src/select/src/pc.vue
index 50e724e526..fb594e998d 100644
--- a/packages/vue/src/select/src/pc.vue
+++ b/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>