diff --git a/CHANGELOG.md b/CHANGELOG.md
index 51da4f98dffa0ea762a35cea6b583a903c410d30..8626721374babb992640178733f788f728e34798 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@
 
 - 表单新增在多数据部件表单模式下，记录当前表单的数据索引
 - 新增电子签名编辑器样式，基于文本框编辑器进行扩展，编辑器样式代码名称为：SIGNATURE
+- 新增支持搜索栏计数器
 
 ### Changed
 
diff --git a/src/control/search-bar/search-bar.scss b/src/control/search-bar/search-bar.scss
index 58d03452785a4e90f5ec20d51a954ccf6d5d4132..4927367808755ab1b5478fa9088b77ddfc9858bd 100644
--- a/src/control/search-bar/search-bar.scss
+++ b/src/control/search-bar/search-bar.scss
@@ -14,6 +14,10 @@ $control-searchbar: (
 
   height: 100%;
 
+  @include e(counter) {
+    margin-left: getCssVar(spacing, tight);
+  }
+
   @include b(control-searchbar-quick-search) {
     width: getCssVar('control-searchbar', 'quick-search-width');
     margin-left: getCssVar(spacing, base-tight);
diff --git a/src/control/search-bar/search-bar.tsx b/src/control/search-bar/search-bar.tsx
index f4e94f02d68b08d6690e320dad5ea896fe6e8c03..24dbe26a7b2ab08066bb0c421cee3ff82af55e21 100644
--- a/src/control/search-bar/search-bar.tsx
+++ b/src/control/search-bar/search-bar.tsx
@@ -3,7 +3,14 @@ import {
   useNamespace,
   useLocalCacheKey,
 } from '@ibiz-template/vue3-util';
-import { computed, defineComponent, PropType, ref } from 'vue';
+import {
+  computed,
+  defineComponent,
+  onUnmounted,
+  PropType,
+  Ref,
+  ref,
+} from 'vue';
 import { ISearchBar, ISearchBarGroup } from '@ibiz/model-core';
 import './search-bar.scss';
 import {
@@ -42,6 +49,22 @@ export const SearchBarControl = defineComponent({
       (...args) => new SearchBarController(...args),
     );
 
+    const counterData: Ref<IData> = ref({});
+
+    const fn = (counter: IData) => {
+      counterData.value = counter;
+    };
+
+    c.evt.on('onCreated', () => {
+      if (c.counter) {
+        c.counter.onChange(fn, true);
+      }
+    });
+
+    onUnmounted(() => {
+      c.counter?.offChange(fn);
+    });
+
     // 修复非路由情况搜索栏部件启用缓存时构建缓存key异常
     c.setStorageKeyFn(
       useLocalCacheKey(
@@ -167,6 +190,7 @@ export const SearchBarControl = defineComponent({
       ns,
       cssVars,
       filterButtonRef,
+      counterData,
       onClear,
       onSearch,
       onKeydown,
@@ -185,10 +209,17 @@ export const SearchBarControl = defineComponent({
       >
         {this.c.model.enableGroup &&
           (this.c.isBackendSearchGroup ? (
-            <iBizSearchGroups controller={this.c}></iBizSearchGroups>
+            <iBizSearchGroups
+              controller={this.c}
+              counterData={this.counterData}
+            ></iBizSearchGroups>
           ) : (
             <div class={this.ns.b('quick-group')}>
               {this.c.model.searchBarGroups?.map(groupItem => {
+                const visible = this.c.calcCountVisible(groupItem);
+                if (!visible) {
+                  return null;
+                }
                 return (
                   <span
                     class={[
@@ -201,6 +232,13 @@ export const SearchBarControl = defineComponent({
                     onClick={() => this.onGroupClick(groupItem)}
                   >
                     {groupItem.caption}
+                    {groupItem.counterId && (
+                      <iBizBadge
+                        class={this.ns.e('counter')}
+                        value={this.counterData[groupItem.counterId]}
+                        counterMode={groupItem.counterMode}
+                      />
+                    )}
                   </span>
                 );
               })}
diff --git a/src/control/search-bar/search-groups/search-groups.scss b/src/control/search-bar/search-groups/search-groups.scss
index 8fa66a28f98b593f89575f55df1d4e84fe15fb73..49dcc480fb9fae24dfd1c03414449ef74e7a8ce1 100644
--- a/src/control/search-bar/search-groups/search-groups.scss
+++ b/src/control/search-bar/search-groups/search-groups.scss
@@ -14,6 +14,10 @@
 
   height: 100%;
 
+  @include e(counter) {
+    margin-left: getCssVar(spacing, tight);
+  }
+
   @include b(search-groups-quick-group-item){
     position: relative;
     display: inline-block;
diff --git a/src/control/search-bar/search-groups/search-groups.tsx b/src/control/search-bar/search-groups/search-groups.tsx
index b737326c0d644439ab2bb7d5c3966d35618b6fa7..2c9af079cda87aaca290f092c782c0174f383a90 100644
--- a/src/control/search-bar/search-groups/search-groups.tsx
+++ b/src/control/search-bar/search-groups/search-groups.tsx
@@ -21,6 +21,10 @@ export const SearchGroups = defineComponent({
       type: Object as PropType<SearchBarController>,
       required: true,
     },
+    counterData: {
+      type: Object as PropType<IData>,
+      default: () => {},
+    },
   },
   setup(props) {
     const ns = useNamespace('search-groups');
@@ -246,6 +250,10 @@ export const SearchGroups = defineComponent({
     return (
       <div class={this.ns.b()}>
         {this.showGroups?.map(groupItem => {
+          const visible = this.c.calcCountVisible(groupItem);
+          if (!visible) {
+            return null;
+          }
           return (
             <span
               class={[
@@ -258,6 +266,13 @@ export const SearchGroups = defineComponent({
               onClick={() => this.onGroupClick(groupItem)}
             >
               {groupItem.caption || groupItem.name}
+              {groupItem.counterId && (
+                <iBizBadge
+                  class={this.ns.e('counter')}
+                  value={this.counterData[groupItem.counterId]}
+                  counterMode={groupItem.counterMode}
+                />
+              )}
             </span>
           );
         })}