diff --git a/CHANGELOG.md b/CHANGELOG.md
index 36732fa11226c9e4bcb291d6f831827cc10803a2..5c0550aa414b26c654337b793748d62e87ae9e01 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,10 @@
 并且此项目遵循 [Semantic Versioning](https://semver.org/lang/zh-CN/).
 
 ## [Unreleased]
+ 
+### Added
+
+- 新增工具栏行为项支持计数器
 
 ## [0.7.38-alpha.34] - 2024-12-11
 
diff --git a/src/control/toolbar/toolbar.scss b/src/control/toolbar/toolbar.scss
index 9ab4f2f393709ca93540c3f09fbb33e8e61c599b..9355ca6cc9da4fb26e6ba46780d9db6cb16fd78a 100644
--- a/src/control/toolbar/toolbar.scss
+++ b/src/control/toolbar/toolbar.scss
@@ -50,6 +50,9 @@ $control-toolbar-actions: (
       margin: getCssVar(control-toolbar, text-margin);
     }
   }
+  .#{bem(toolbar-item-counter)} {
+    margin-left: getCssVar('spacing', 'super-tight');
+  }
 }
 
 @include b(control-toolbar) {
diff --git a/src/control/toolbar/toolbar.tsx b/src/control/toolbar/toolbar.tsx
index 557f5d0f85ac6e717fbedb16beb6c69cf75b9a06..02ffbd298826d0187ec179973d92e66d5d36660c 100644
--- a/src/control/toolbar/toolbar.tsx
+++ b/src/control/toolbar/toolbar.tsx
@@ -6,6 +6,7 @@ import {
   VNode,
   resolveComponent,
   h,
+  onUnmounted,
 } from 'vue';
 import {
   IDEToolbar,
@@ -15,6 +16,7 @@ import {
   IAppDEUIActionGroupDetail,
 } from '@ibiz/model-core';
 import {
+  AppCounter,
   IControlProvider,
   IExtraButton,
   ToolbarController,
@@ -24,7 +26,11 @@ import { IBizExportExcel } from './export-excel/export-excel';
 import { IBizShortCutButton } from './short-cut-button/short-cut-button';
 import './toolbar.scss';
 
-const btnContent = (item: IDEToolbarItem): (string | VNode)[] => {
+const btnContent = (
+  item: IDEToolbarItem,
+  counterData: IData,
+): (string | VNode)[] => {
+  const counterNum = item.counterId ? counterData[item.counterId] : undefined;
   const image = item.sysImage;
   const result = [];
   const ns = useNamespace('toolbar-item');
@@ -38,6 +44,16 @@ const btnContent = (item: IDEToolbarItem): (string | VNode)[] => {
   if (item.showCaption && item.caption) {
     result.push(<span class={ns.b('text')}>{item.caption}</span>);
   }
+  if (counterNum) {
+    result.push(
+      <iBizBadge
+        class={ns.b('counter')}
+        value={counterNum}
+        counterMode={item.counterMode}
+      />,
+    );
+  }
+
   return result;
 };
 
@@ -68,6 +84,13 @@ export const ToolbarControl = defineComponent({
     const btnSize = ref('default');
     const toolbarStyle = (c.model as IDEToolbar).toolbarStyle?.toLowerCase();
 
+    // 计数器数据
+    let counter: AppCounter | null = null;
+    const counterData = ref<IData>({});
+    const fn = (data: IData) => {
+      counterData.value = data;
+    };
+
     // 点击事件
     const handleClick = async (
       item: IDEToolbarItem,
@@ -88,6 +111,24 @@ export const ToolbarControl = defineComponent({
       await handleClick(tempItem as IDEToolbarItem, event, params);
     };
 
+    c.evt.on('onMounted', async () => {
+      // 计数器相关
+      counter = c.getCounter();
+      if (counter) {
+        counter.onChange(fn);
+      }
+    });
+
+    onUnmounted(() => {
+      counter?.offChange(fn);
+      counter?.destroy();
+    });
+
+    // 绘制按钮内容
+    const renderBtnContent = (item: IDEToolbarItem) => {
+      return btnContent(item, counterData.value);
+    };
+
     const renderExtraButtons = (extraButtons: IExtraButton[]): VNode[] => {
       return extraButtons.map(button => {
         return (
@@ -97,7 +138,7 @@ export const ToolbarControl = defineComponent({
               size={btnSize.value}
               onClick={(e: MouseEvent): Promise<void> => handleClick(button, e)}
             >
-              {btnContent(button)}
+              {renderBtnContent(button)}
             </el-button>
           </div>
         );
@@ -197,7 +238,7 @@ export const ToolbarControl = defineComponent({
                         ]}
                         mode='menu'
                         item={item2}
-                        btnContent={btnContent}
+                        btnContent={renderBtnContent}
                         size={btnSize.value}
                         controller={c}
                         onExportExcel={(e: MouseEvent, data: IData): void => {
@@ -226,7 +267,7 @@ export const ToolbarControl = defineComponent({
                       <el-button
                         loading={c.state.buttonsState[item2.id!].loading}
                       >
-                        {btnContent(item2)}
+                        {renderBtnContent(item2)}
                       </el-button>
                     </el-menu-item>
                   );
@@ -240,7 +281,7 @@ export const ToolbarControl = defineComponent({
             title: () => {
               return (
                 <el-button loading={ploading} disabled={pdisabled}>
-                  {btnContent(item)}
+                  {renderBtnContent(item)}
                 </el-button>
               );
             },
@@ -263,7 +304,7 @@ export const ToolbarControl = defineComponent({
               handleActionClick(detail, e)
             }
           >
-            {btnContent(detail)}
+            {renderBtnContent(detail)}
           </el-button>,
         ];
       }
@@ -455,7 +496,7 @@ export const ToolbarControl = defineComponent({
                 calcCssName(item),
               ]}
               item={item}
-              btnContent={btnContent}
+              btnContent={renderBtnContent}
               size={btnSize.value}
               controller={c}
               onExportExcel={(e: MouseEvent, data: IData): void => {
@@ -501,7 +542,7 @@ export const ToolbarControl = defineComponent({
               disabled={c.state.buttonsState[itemId].disabled}
               onClick={(e: MouseEvent): Promise<void> => handleClick(item, e)}
             >
-              {btnContent(item)}
+              {renderBtnContent(item)}
             </el-button>
           </div>
         );