From 9a6cc3dbfe122bc617ded05bae4a6dff8e5e544f Mon Sep 17 00:00:00 2001
From: lijianxiong <1518062161@qq.com>
Date: Tue, 28 Oct 2025 20:43:01 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E4=BC=98=E5=8C=96=E6=90=9C?=
 =?UTF-8?q?=E7=B4=A2=E6=A0=8F=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F=EF=BC=8C?=
 =?UTF-8?q?=E4=B8=8D=E7=9B=B4=E6=8E=A5=E4=BD=BF=E7=94=A8=E5=9F=BA=E7=A1=80?=
 =?UTF-8?q?css=E5=8F=98=E9=87=8F=EF=BC=8C=E7=BB=84=E4=BB=B6=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89=E4=B8=93=E5=B1=9E=E5=8F=98=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                           |  1 +
 src/control/search-bar/search-bar.scss | 53 +++++++++++++++++++-------
 src/control/search-bar/search-bar.tsx  |  2 +-
 3 files changed, 41 insertions(+), 15 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index adb53c14c..03fd90f8c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -77,6 +77,7 @@
 - 表单编辑器样式变量抽取
 - 工具栏项的绘制逻辑调整为统一方法绘制
 - 优化工具栏组件样式，不直接使用基础css变量，组件定义专属变量
+- 优化搜索栏组件样式，不直接使用基础css变量，组件定义专属变量
 
 ### Fixed
 
diff --git a/src/control/search-bar/search-bar.scss b/src/control/search-bar/search-bar.scss
index 0bf2115eb..1fb0981bf 100644
--- a/src/control/search-bar/search-bar.scss
+++ b/src/control/search-bar/search-bar.scss
@@ -1,34 +1,59 @@
-$control-searchbar: (margin: getCssVar(spacing, tight),
+$control-searchbar: (
+  bg-color: getCssVar(color, bg, 1),
+  margin: getCssVar(spacing, tight),
   padding: getCssVar(spacing, tight) getCssVar(spacing, base),
-  height:rem(36px),
+  filter-btn-margin: 0 0 0 getCssVar('spacing', 'tight'),
+  filter-btn-font-size: getCssVar('font-size', 'header-4'),
+  filter-btn-height: getCssVar('height-control', 'default'),
+  enable-filter-padding: getCssVar(spacing, tight) getCssVar(spacing, tight)
+    getCssVar(spacing, tight) getCssVar(spacing, base),
 );
 
+$control-searchbar-quick-search: (
+  height: getCssVar('height-control', 'default'),
+  border-radius: getCssVar(border-radius, small),
+  left-icon: 0 getCssVar('spacing', 'tight') 0 0,
+);
+
+// 搜索输入框样式
 @include b(control-searchbar-quick-search) {
+  @include set-component-css-var(control-searchbar-quick-search, $control-searchbar-quick-search);
   width: 100%;
+  background-color: transparent;
+  height: getCssVar(control-searchbar-quick-search, height);
+  padding: 0;
+
+  .van-search__content {
+    border-radius: getCssVar(control-searchbar-quick-search, border-radius);
+  }
+  .van-field__left-icon {
+    margin: getCssVar(control-searchbar-quick-search, left-icon);
+  }
 }
 
 @include b(control-searchbar) {
   @include set-component-css-var(control-searchbar, $control-searchbar);
   display: flex;
   align-items: center;
+  background-color: getCssVar(control-searchbar, bg-color);
+  padding: getCssVar(control-searchbar, padding);
 
+  // 高级搜索按钮
   @include e(filter) {
     flex: none;
     border: none;
-    font-size: getCssVar(width-icon, large);
-  }
-
-  .van-search {
-    --van-search-background: #{getCssVar(color, bg, 1)};
-    --van-search-padding:#{getCssVar(control-searchbar, padding)};
-    --van-search-input-height:#{getCssVar(control-searchbar, height)};
+    font-size: getCssVar(control-searchbar, filter-btn-font-size);
+    height: getCssVar(control-searchbar, filter-btn-height);
+    margin: getCssVar(control-searchbar, filter-btn-margin);
 
-    .van-field__left-icon {
-      margin-right: getCssVar('spacing', 'tight');
+    .van-button__text {
+      display: flex;
+      align-items: center;
     }
   }
 
-  .van-search__content {
-    border-radius: getCssVar(border-radius, small);
+  // 适配高级搜索按钮需调整边距
+  @include when(enable-filter) {
+    padding: getCssVar(control-searchbar, enable-filter-padding);
   }
-}
\ No newline at end of file
+}
diff --git a/src/control/search-bar/search-bar.tsx b/src/control/search-bar/search-bar.tsx
index f96020e46..8e09b147a 100644
--- a/src/control/search-bar/search-bar.tsx
+++ b/src/control/search-bar/search-bar.tsx
@@ -130,7 +130,7 @@ export const SearchBarControl = defineComponent({
     return (
       <iBizControlBase
         controller={this.c}
-        class={[this.ns.b()]}
+        class={[this.ns.b(), this.ns.is('enable-filter', this.c.enableFilter)]}
         style={this.cssVars}
       >
         {this.c.model.enableQuickSearch && (
-- 
Gitee