From 550ce64fadd5a89203b9d3470d69ad4a7f9b20a3 Mon Sep 17 00:00:00 2001
From: chenxi <2465950588@qq.com>
Date: Sun, 8 Sep 2024 23:23:15 -0700
Subject: [PATCH] =?UTF-8?q?feat(search):=20[search]=20=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E6=98=9F=E7=A9=BA=E4=B8=BB=E9=A2=98=E5=85=B3=E9=97=AD=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E5=8F=B3=E8=BE=B9=E7=AB=96=E6=9D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/theme/src/search/index.less   | 18 ++++++++++++++++++
 packages/theme/src/search/smb-theme.js |  5 ++++-
 packages/theme/src/search/vars.less    |  4 ++++
 packages/vue/src/search/src/pc.vue     |  2 +-
 4 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/packages/theme/src/search/index.less b/packages/theme/src/search/index.less
index aa6f108a65..1649f125ef 100644
--- a/packages/theme/src/search/index.less
+++ b/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;
 
diff --git a/packages/theme/src/search/smb-theme.js b/packages/theme/src/search/smb-theme.js
index 320dccddad..2988195e17 100644
--- a/packages/theme/src/search/smb-theme.js
+++ b/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'
 }
diff --git a/packages/theme/src/search/vars.less b/packages/theme/src/search/vars.less
index 1cab8342fc..98ca88e2b5 100644
--- a/packages/theme/src/search/vars.less
+++ b/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)
diff --git a/packages/vue/src/search/src/pc.vue b/packages/vue/src/search/src/pc.vue
index 1cbb8c4e9b..4f2716f397 100644
--- a/packages/vue/src/search/src/pc.vue
+++ b/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>