feat(search): [search] 增加星空主题关闭按钮右边竖条

Author: chenxi-20

packages/theme/src/search/index.less

@@ -97,6 +97,24 @@
     }
   }
 
+  // tiny新增
+  & &__input-btn.@{css-prefix}icon-close {
+    margin-right: var(--ti-search-input-btn-close-margin-right);
+
+    & a::after {
+      content: '';
+      display: var(--ti-search-input-btn-close-display);
+      position: absolute;
+      top: 50%;
+      right: 7px;
+      transform: translateY(-50%);
+      width: 1px;
+      height: 16px;
+      background-color: #000000;
+      opacity: 8%;
+    }
+  }
+
   & &__input-btn {
     text-align: center;
 

packages/theme/src/search/smb-theme.js

@@ -5,5 +5,8 @@ export const tinySearchSmbTheme = {
   'ti-search-selector-box-shadow': 'var(--ti-common-shadow-3-up)',
   'ti-search-input-btn-icon-size': 'var(--ti-common-font-size-2)',
   'ti-search-input-placeholder-text-color': 'var(--ti-common-color-placeholder)',
-  'ti-search-input-left-svg-margin-right': 'calc(0px - var(--ti-common-space-2x))'
+  'ti-search-input-left-svg-margin-right': 'calc(0px - var(--ti-common-space-2x))',
+  'ti-search-input-btn-width': 'var(--ti-common-size-7x)',
+  'ti-search-input-btn-close-display': 'inline-block',
+  'ti-search-input-btn-close-margin-right': '-3px'
 }

packages/theme/src/search/vars.less

@@ -40,6 +40,10 @@
   --ti-search-input-btn-icon-size: var(--ti-common-font-size-1, 14px);
   // 搜索按钮宽度(hide)
   --ti-search-input-btn-width: var(--ti-common-size-6x, 24px);
+  // 搜索关闭按钮右边距(hide)
+  --ti-search-input-btn-close-margin-right: var(--ti-common-space-0, 0px);
+  // 搜索关闭按钮显示方式(hide)
+  --ti-search-input-btn-close-display: none;
   // 搜索框按钮行高(hide)
   --ti-search-input-btn-line-height: var(--ti-search-input-height);
   // 搜索图标边框色(hide)

packages/vue/src/search/src/pc.vue

@@ -60,7 +60,7 @@
         :tabindex="tabindex"
       />
       <transition name="tiny-transition-icon-scale-in">
-        <div class="tiny-search__input-btn" v-if="state.showClear && !state.collapse">
+        <div class="tiny-search__input-btn tiny-icon-close" v-if="state.showClear && !state.collapse">
           <a @click="clear($event)">
             <icon-close @mousedown.prevent class="tiny-svg-size" />
           </a>