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 1/2] =?UTF-8?q?feat(search):=20[search]=20=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E6=98=9F=E7=A9=BA=E4=B8=BB=E9=A2=98=E5=85=B3=E9=97=AD?=
 =?UTF-8?q?=E6=8C=89=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>

From 37398f33626beeae4bd7ba0dc45da743bb0b7da1 Mon Sep 17 00:00:00 2001
From: chenxi <2465950588@qq.com>
Date: Tue, 10 Sep 2024 01:08:47 -0700
Subject: [PATCH 2/2] =?UTF-8?q?feat(search):=20=E8=BF=B7=E4=BD=A0=E6=A8=A1?=
 =?UTF-8?q?=E5=BC=8F=E5=A2=9E=E5=8A=A0=E6=97=A0=E8=BE=B9=E6=A1=86=E7=A4=BA?=
 =?UTF-8?q?=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../demos/pc/app/search/mini-mode-composition-api.vue | 11 ++++++++++-
 examples/sites/demos/pc/app/search/mini-mode.spec.ts  |  3 ++-
 examples/sites/demos/pc/app/search/mini-mode.vue      | 11 ++++++++++-
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/examples/sites/demos/pc/app/search/mini-mode-composition-api.vue b/examples/sites/demos/pc/app/search/mini-mode-composition-api.vue
index 115786f0ed..a80a6665f2 100644
--- a/examples/sites/demos/pc/app/search/mini-mode-composition-api.vue
+++ b/examples/sites/demos/pc/app/search/mini-mode-composition-api.vue
@@ -1,7 +1,16 @@
 <template>
-  <tiny-search mini></tiny-search>
+  <div>
+    <tiny-search mini></tiny-search>
+    <tiny-search mini class="mt24 custom-search"></tiny-search>
+  </div>
 </template>
 
 <script setup lang="jsx">
 import { Search as TinySearch } from '@opentiny/vue'
 </script>
+
+<style scoped>
+:deep(.tiny-search.custom-search.collapse .tiny-search__line) {
+  border: none;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/search/mini-mode.spec.ts b/examples/sites/demos/pc/app/search/mini-mode.spec.ts
index 5c278b5d66..8e33deb4f8 100644
--- a/examples/sites/demos/pc/app/search/mini-mode.spec.ts
+++ b/examples/sites/demos/pc/app/search/mini-mode.spec.ts
@@ -4,7 +4,8 @@ test('迷你模式', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('search#mini-mode')
 
-  const search = page.locator('.tiny-search.mini')
+  const container = page.locator('#mini-mode')
+  const search = container.locator('.tiny-search.mini').first()
   const blank = page.getByRole('code').first()
   const line = search.locator('.tiny-search__line')
   const input = search.locator('.tiny-search__input')
diff --git a/examples/sites/demos/pc/app/search/mini-mode.vue b/examples/sites/demos/pc/app/search/mini-mode.vue
index eb49fb76c3..722b45462c 100644
--- a/examples/sites/demos/pc/app/search/mini-mode.vue
+++ b/examples/sites/demos/pc/app/search/mini-mode.vue
@@ -1,5 +1,8 @@
 <template>
-  <tiny-search mini></tiny-search>
+  <div>
+    <tiny-search mini></tiny-search>
+    <tiny-search mini class="mt24 custom-search"></tiny-search>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -11,3 +14,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+:deep(.tiny-search.custom-search.collapse .tiny-search__line) {
+  border: none;
+}
+</style>