fix: 修复search组件mobile-first模式下四种尺寸清空和搜索两个按钮不对齐的问题 (#3378)

Author: chenxi-20

examples/sites/demos/mobile-first/app/search/size.vue

@@ -1,7 +1,8 @@
 <template>
   <div>
-    <tiny-search class="demo-search" v-model="value1" size="medium" placeholder="请输入关键词" clearable></tiny-search>
-    <tiny-search class="demo-search" v-model="value2" size="mini" placeholder="请输入关键词" clearable></tiny-search>
+    <tiny-search class="demo-search" v-model="value1" size="medium" placeholder="medium" clearable></tiny-search>
+    <tiny-search class="demo-search" v-model="value2" placeholder="small" clearable></tiny-search>
+    <tiny-search class="demo-search" v-model="value3" size="mini" placeholder="mini" clearable></tiny-search>
   </div>
 </template>
 
@@ -15,7 +16,8 @@ export default {
   data() {
     return {
       value1: '',
-      value2: ''
+      value2: '',
+      value3: ''
     }
   }
 }

packages/vue/src/search/src/mobile-first.vue

@@ -91,17 +91,7 @@
           "
           v-if="state.showClear && !state.collapse"
         >
-          <a
-            :class="
-              m(
-                gcls('pc-search-input-btn-transtion-a'),
-                gcls({ 'pc-search-input-btn-transtion-a-big': big }),
-                gcls(`pc-search-input-btn-transtion-a-${size}`),
-                gcls({ 'pc-search-input-btn-transtion-a-unbig': size === 'small' && !big })
-              )
-            "
-            @click="clear"
-          >
+          <a :class="m(gcls('pc-search-input-btn-transtion-a'))" @click="clear">
             <icon-close
               @mousedown.prevent
               data-tag="tiny-svg-size"
@@ -121,17 +111,7 @@
           )
         "
       >
-        <a
-          :class="
-            m(
-              gcls('pc-search-input-btn-a'),
-              gcls({ 'pc-search-input-btn-a-big': big }),
-              gcls(`pc-search-input-btn-a-${size}`),
-              gcls({ 'pc-search-input-btn-a-unbig': size === 'small' && !big })
-            )
-          "
-          @click="searchClick"
-        >
+        <a :class="m(gcls('pc-search-input-btn-a'))" @click="searchClick">
           <icon-search
             :class="
               m(

packages/vue/src/search/src/token.ts

@@ -41,22 +41,14 @@ export const classes = {
   'pc-search-input-btn-transtion-mini': 'h-[calc(theme(spacing.6)-2*theme(borderWidth.DEFAULT))] translate-x-4',
   'pc-search-input-btn-transtion-unbig': 'h-[calc(theme(spacing.7)-2*theme(borderWidth.DEFAULT))] translate-x-3.5',
 
-  'pc-search-input-btn-transtion-a': 'no-underline block w-8',
-  'pc-search-input-btn-transtion-a-big': 'leading-[calc(theme(spacing.7)-2*theme(borderWidth.DEFAULT))]',
-  'pc-search-input-btn-transtion-a-medium': 'leading-[calc(theme(spacing.8)-2*theme(borderWidth.DEFAULT))]',
-  'pc-search-input-btn-transtion-a-mini': 'leading-[calc(theme(spacing.6)-2*theme(borderWidth.DEFAULT))]',
-  'pc-search-input-btn-transtion-a-unbig': 'leading-[calc(theme(spacing.7)-2*theme(borderWidth.DEFAULT))]',
+  'pc-search-input-btn-transtion-a': 'no-underline block w-8 leading-none',
   'pc-search-input-btn-transtion-svg-size': 'text-base fill-color-icon-primary hover:fill-color-icon-hover',
   'pc-search-input-btn': 'table-cell relative align-middle right-0 text-center',
   'pc-search-input-btn-big': 'h-[calc(theme(spacing.7)-2*theme(borderWidth.DEFAULT))] w-11',
   'pc-search-input-btn-medium': 'h-[calc(theme(spacing.8)-2*theme(borderWidth.DEFAULT))] w-11',
   'pc-search-input-btn-mini': 'h-[calc(theme(spacing.6)-2*theme(borderWidth.DEFAULT))] w-11',
   'pc-search-input-btn-unbig': 'h-[calc(theme(spacing.7)-2*theme(borderWidth.DEFAULT))] w-10',
-  'pc-search-input-btn-a': 'no-underline block',
-  'pc-search-input-btn-a-big': 'w-11 leading-[calc(theme(spacing.7)-2*theme(borderWidth.DEFAULT))]',
-  'pc-search-input-btn-a-medium': 'w-11 leading-[calc(theme(spacing.8)-2*theme(borderWidth.DEFAULT))]',
-  'pc-search-input-btn-a-mini': 'w-11 leading-[calc(theme(spacing.6)-2*theme(borderWidth.DEFAULT))]',
-  'pc-search-input-btn-a-unbig': 'w-10 leading-[calc(theme(spacing.7)-2*theme(borderWidth.DEFAULT))]',
+  'pc-search-input-btn-a': 'no-underline block w-11 leading-none',
   'pc-search-input-btn-icon-search-transparent': 'fill-color-bg-1',
   'pc-search-input-btn-icon-search': 'text-base fill-color-none align-text-bottom',
   'search-selector':