diff --git a/CHANGELOG.md b/CHANGELOG.md
index adb53c14cf5fea2fc539b19fcbfc8d94bdd6e711..03fd90f8cae4e548c77ab10a01ed55c96bc94506 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 0bf2115eb10aaae708bed82b8b6306edf0518d8b..1fb0981bfe305cef14a6b06d3357ef2efe49bc41 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 f96020e4690f0f18eb0b42f1b280df9349e77057..8e09b147a6ea218650428d7b7c181dbf58dbf27c 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 && (