diff --git a/src/control/caption-bar/caption-bar.controller.ts b/src/control/caption-bar/caption-bar.controller.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3c46d8a7d9ba9ea37e750fbb677cd9a54825214d
--- /dev/null
+++ b/src/control/caption-bar/caption-bar.controller.ts
@@ -0,0 +1,36 @@
+import {
+  ControlController,
+  ICaptionBarState,
+  ICaptionBarEvent,
+  ICaptionBarController,
+} from '@ibiz-template/runtime';
+import { ICaptionBar } from '@ibiz/model-core';
+
+/**
+ * 标题栏控制器
+ *
+ * @author chitanda
+ * @date 2022-07-24 15:07:07
+ * @export
+ * @class CaptionBarController
+ * @extends {ControlController}
+ */
+export class CaptionBarController
+  extends ControlController<ICaptionBar, ICaptionBarState, ICaptionBarEvent>
+  implements ICaptionBarController
+{
+  protected initState(): void {
+    super.initState();
+    this.state.caption = '';
+  }
+
+  protected async doCreated(): Promise<void> {
+    await super.doCreated();
+    this.state.caption = this.view.model.caption!;
+    this.view.evt.on('onViewInfoChange', ({ caption: _caption, dataInfo }) => {
+      if (dataInfo) {
+        this.state.caption = `${this.state.caption}-${dataInfo}`;
+      }
+    });
+  }
+}
diff --git a/src/control/caption-bar/caption-bar.provider.ts b/src/control/caption-bar/caption-bar.provider.ts
new file mode 100644
index 0000000000000000000000000000000000000000..16e89389ca2781c57ed3e405e6c73c10cc5e485f
--- /dev/null
+++ b/src/control/caption-bar/caption-bar.provider.ts
@@ -0,0 +1,14 @@
+import { IControlProvider } from '@ibiz-template/runtime';
+
+/**
+ * 标题栏适配器
+ *
+ * @author lxm
+ * @date 2022-10-25 18:10:57
+ * @export
+ * @class CaptionBarProvider
+ * @implements {IControlProvider}
+ */
+export class CaptionBarProvider implements IControlProvider {
+  component: string = 'IBizCaptionBarControl';
+}
diff --git a/src/control/caption-bar/caption-bar.scss b/src/control/caption-bar/caption-bar.scss
new file mode 100644
index 0000000000000000000000000000000000000000..5aa2aeadc47552076d9fe1591111a98f98f73740
--- /dev/null
+++ b/src/control/caption-bar/caption-bar.scss
@@ -0,0 +1,5 @@
+@include b(control-captionbar) {
+  @include b(control-captionbar-caption) {
+    @include utils-ellipsis;
+  }
+}
diff --git a/src/control/caption-bar/caption-bar.tsx b/src/control/caption-bar/caption-bar.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6dc01fb62802b3946ef2fedda42a776d856cc569
--- /dev/null
+++ b/src/control/caption-bar/caption-bar.tsx
@@ -0,0 +1,32 @@
+import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
+import { defineComponent, PropType } from 'vue';
+import { ICaptionBar } from '@ibiz/model-core';
+import { CaptionBarController } from './caption-bar.controller';
+import './caption-bar.scss';
+
+export const CaptionBarControl = defineComponent({
+  name: 'IBizCaptionBarControl',
+  props: {
+    modelData: {
+      type: Object as PropType<ICaptionBar>,
+      required: true,
+    },
+    context: { type: Object as PropType<IContext>, required: true },
+    params: { type: Object as PropType<IParams>, default: () => ({}) },
+  },
+  setup() {
+    const c = useControlController(
+      (...args) => new CaptionBarController(...args),
+    );
+    const ns = useNamespace(`control-${c.model.controlType!.toLowerCase()}`);
+
+    return { c, ns };
+  },
+  render() {
+    return (
+      <iBizControlBase controller={this.c} class={[this.ns.b()]}>
+        <div class={this.ns.b('caption')}>{this.c.state.caption}</div>
+      </iBizControlBase>
+    );
+  },
+});
diff --git a/src/control/caption-bar/index.ts b/src/control/caption-bar/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..be9641728436f539041da5ff863ae6bfb2090a00
--- /dev/null
+++ b/src/control/caption-bar/index.ts
@@ -0,0 +1,21 @@
+import { ControlType, registerControlProvider } from '@ibiz-template/runtime';
+import { App } from 'vue';
+import { withInstall } from '@ibiz-template/vue3-util';
+import { CaptionBarControl } from './caption-bar';
+import { CaptionBarProvider } from './caption-bar.provider';
+
+export * from './caption-bar.provider';
+export * from './caption-bar.controller';
+
+export const IBizCaptionBarControl = withInstall(
+  CaptionBarControl,
+  function (v: App) {
+    v.component(CaptionBarControl.name, CaptionBarControl);
+    registerControlProvider(
+      ControlType.CAPTIONBAR,
+      () => new CaptionBarProvider(),
+    );
+  },
+);
+
+export default IBizCaptionBarControl;
diff --git a/src/control/index.ts b/src/control/index.ts
index 4207c5d6df7b607988ad84a2fbe78d947e62a958..00b23308710657540a48102fa47e34a6e27399f6 100644
--- a/src/control/index.ts
+++ b/src/control/index.ts
@@ -4,3 +4,4 @@ export * from './list';
 export * from './form';
 export * from './toolbar';
 export * from './panel';
+export * from './caption-bar';
diff --git a/src/index.ts b/src/index.ts
index aad1c16cd15707efbf4c9732713f756befc3579c..a441799e3a40198b40621f719829edc239c9dddb 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -10,6 +10,7 @@ import {
   IBizFormControl,
   IBizSearchFormControl,
   IBizListControl,
+  IBizCaptionBarControl,
 } from './control';
 import IBizEditor from './editor';
 import { IBizView } from './view';
@@ -37,6 +38,7 @@ export default {
     v.use(IBizFormControl);
     v.use(IBizSearchFormControl);
     v.use(IBizEditFormControl);
+    v.use(IBizCaptionBarControl);
     // 编辑器
     v.use(IBizEditor);
   },