diff --git a/src/control/exp-bar/grid-exp-bar/grid-exp-bar.scss b/src/control/exp-bar/grid-exp-bar/grid-exp-bar.scss
index 993deabdbe7cac3268394e20e68a379e4b4ac2ad..ba5de6c1f345460c5a85175357f49a0067d8e3d4 100644
--- a/src/control/exp-bar/grid-exp-bar/grid-exp-bar.scss
+++ b/src/control/exp-bar/grid-exp-bar/grid-exp-bar.scss
@@ -1,4 +1,5 @@
 @include b(control-gridexpbar) {
+  min-width: 300px;
   height: 100%;
   overflow-y: scroll;
 }
diff --git a/src/control/exp-bar/list-exp-bar/list-exp-bar.scss b/src/control/exp-bar/list-exp-bar/list-exp-bar.scss
index e0d4a0f235cc2c7a864d4d29d5e77c9cd7a23f5d..ee390e16c3e1fcbc040abed266a4ba32c7b0d99c 100644
--- a/src/control/exp-bar/list-exp-bar/list-exp-bar.scss
+++ b/src/control/exp-bar/list-exp-bar/list-exp-bar.scss
@@ -1,4 +1,5 @@
 @include b(control-listexpbar) {
+  min-width: 300px;
   height: 100%;
   overflow-y: scroll;
 }
diff --git a/src/control/exp-bar/tree-exp-bar/tree-exp-bar.scss b/src/control/exp-bar/tree-exp-bar/tree-exp-bar.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..c637840cc6f335100f79eb9dc873627ab4b6442b 100644
--- a/src/control/exp-bar/tree-exp-bar/tree-exp-bar.scss
+++ b/src/control/exp-bar/tree-exp-bar/tree-exp-bar.scss
@@ -0,0 +1,5 @@
+@include b(control-treeexpbar) {
+  min-width: 300px;
+  height: 100%;
+  overflow-y: scroll;
+}
diff --git a/src/panel-component/index.ts b/src/panel-component/index.ts
index 80781a65e1f06f482c6e4fa10c176d1fdbde7252..ddb14eac5cb99c8c1c09262c8144d51b8a175759 100644
--- a/src/panel-component/index.ts
+++ b/src/panel-component/index.ts
@@ -10,6 +10,7 @@ import IBizNavPos from './nav-pos';
 import IBizPanelAppTitle from './panel-app-title';
 import IBizSingleDataContainer from './single-data-container';
 import IBizPanelField from './panel-field';
+import IBizPanelAppHeader from './panel-app-header';
 
 export * from './panel-container';
 export * from './panel-ctrl-pos';
@@ -35,6 +36,7 @@ export const IBizPanelComponents = {
     v.use(IBizPanelAppTitle);
     v.use(IBizSingleDataContainer);
     v.use(IBizPanelField);
+    v.use(IBizPanelAppHeader);
   },
 };
 
diff --git a/src/panel-component/panel-app-header/index.ts b/src/panel-component/panel-app-header/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b6ef9c37086a68b8c0e0d8094f69b17f03c7b3ad
--- /dev/null
+++ b/src/panel-component/panel-app-header/index.ts
@@ -0,0 +1,26 @@
+import { App } from 'vue';
+import { withInstall } from '@ibiz-template/vue3-util';
+import { registerPanelItemProvider } from '@ibiz-template/runtime';
+import { PanelAppHeader } from './panel-app-header';
+import { PanelAppHeaderProvider } from './panel-app-header.provider';
+import { PanelAppHeaderController } from './panel-app-header.controller';
+import { PanelAppHeaderState } from './panel-app-header.state';
+
+export {
+  PanelAppHeaderProvider,
+  PanelAppHeaderState,
+  PanelAppHeaderController,
+};
+
+export const IBizPanelAppHeader = withInstall(
+  PanelAppHeader,
+  function (v: App) {
+    v.component(PanelAppHeader.name, PanelAppHeader);
+    registerPanelItemProvider(
+      'CONTAINER_AppHeader',
+      () => new PanelAppHeaderProvider(),
+    );
+  },
+);
+
+export default IBizPanelAppHeader;
diff --git a/src/panel-component/panel-app-header/panel-app-header.controller.ts b/src/panel-component/panel-app-header/panel-app-header.controller.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1faf0b394465087b93bd5d0cfca5f60bdf490798
--- /dev/null
+++ b/src/panel-component/panel-app-header/panel-app-header.controller.ts
@@ -0,0 +1,18 @@
+import { IPanelContainer } from '@ibiz/model-core';
+import { PanelItemController } from '../../control';
+import { PanelAppHeaderState } from './panel-app-header.state';
+
+/**
+ * 面板应用头部控制器
+ *
+ * @export
+ * @class PanelAppHeaderController
+ * @extends {PanelItemController}
+ */
+export class PanelAppHeaderController extends PanelItemController<IPanelContainer> {
+  declare state: PanelAppHeaderState;
+
+  protected createState(): PanelAppHeaderState {
+    return new PanelAppHeaderState(this.parent?.state);
+  }
+}
diff --git a/src/panel-component/panel-app-header/panel-app-header.provider.ts b/src/panel-component/panel-app-header/panel-app-header.provider.ts
new file mode 100644
index 0000000000000000000000000000000000000000..dd32f22c20a50c4a21b0fdf47321002bf331a1a8
--- /dev/null
+++ b/src/panel-component/panel-app-header/panel-app-header.provider.ts
@@ -0,0 +1,27 @@
+import { IPanelItemProvider } from '@ibiz-template/runtime';
+import { IPanelContainer } from '@ibiz/model-core';
+import { PanelController, PanelItemController } from '../../control';
+import { PanelAppHeaderController } from './panel-app-header.controller';
+
+/**
+ * 面板容器适配器
+ *
+ * @author lxm
+ * @date 2022-09-19 22:09:03
+ * @export
+ * @class PanelAppHeaderProvider
+ * @implements {EditorProvider}
+ */
+export class PanelAppHeaderProvider implements IPanelItemProvider {
+  component: string = 'IBizPanelAppHeader';
+
+  async createController(
+    panelItem: IPanelContainer,
+    panel: PanelController,
+    parent: PanelItemController | undefined,
+  ): Promise<PanelItemController> {
+    const c = new PanelAppHeaderController(panelItem, panel, parent);
+    await c.init();
+    return c;
+  }
+}
diff --git a/src/panel-component/panel-app-header/panel-app-header.scss b/src/panel-component/panel-app-header/panel-app-header.scss
new file mode 100644
index 0000000000000000000000000000000000000000..9cc110392c624ef10acf6b2897705f64df82d137
--- /dev/null
+++ b/src/panel-component/panel-app-header/panel-app-header.scss
@@ -0,0 +1,40 @@
+@include b(panel-app-header) {
+  width: 100%;
+  height: 100%;
+  color: #fff;
+  background: #557da5;
+  box-shadow: 0 1px 4px 0 rgb(0 21 41 / 12%);
+
+  @include b(panel-app-header-content) {
+    height: 100%;
+  }
+
+  // 菜单
+  @include b(panel-ctrl-pos) {
+    @include m(appmenu) {
+      @include flex(row, flex-start, center);
+    }
+  }
+  @include b(control-appmenu) {
+    height: 40px;
+    overflow: visible;
+
+    --ibiz-control-appmenu-horizontal-bg-color: #557da5;
+    --ibiz-control-appmenu-item-horizontal-selected-bg-color: #6a94bf;
+    --ibiz-control-appmenu-item-horizontal-hover-bg-color: #6a94bf;
+    --ibiz-control-appmenu-item-height: 40px;
+
+    .el-menu-item {
+      margin-right: 30px;
+      border-radius: 4px;
+    }
+  }
+
+  // 用户
+  @include b(auth-userinfo) {
+    @include b(auth-userinfo-avatar) {
+      font-weight: 400;
+      color: #fff;
+    }
+  }
+}
diff --git a/src/panel-component/panel-app-header/panel-app-header.state.ts b/src/panel-component/panel-app-header/panel-app-header.state.ts
new file mode 100644
index 0000000000000000000000000000000000000000..90657984cdbd2168fb143d0dce553c4c014c651f
--- /dev/null
+++ b/src/panel-component/panel-app-header/panel-app-header.state.ts
@@ -0,0 +1,12 @@
+import { PanelItemState } from '../../control/panel/panel/panel-item.state';
+
+/**
+ * 面板容器状态
+ *
+ * @author lxm
+ * @date 2023-02-07 06:04:27
+ * @export
+ * @class PanelAppHeaderState
+ * @extends {PanelItemState}
+ */
+export class PanelAppHeaderState extends PanelItemState {}
diff --git a/src/panel-component/panel-app-header/panel-app-header.tsx b/src/panel-component/panel-app-header/panel-app-header.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e2243855849f4b16eaf1e852b3e6a31b6edf03c9
--- /dev/null
+++ b/src/panel-component/panel-app-header/panel-app-header.tsx
@@ -0,0 +1,89 @@
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { IPanelContainer } from '@ibiz/model-core';
+import { computed, defineComponent, PropType, ref, VNode } from 'vue';
+import { PanelAppHeaderController } from './panel-app-header.controller';
+import './panel-app-header.scss';
+
+export const PanelAppHeader = defineComponent({
+  name: 'IBizPanelAppHeader',
+  props: {
+    modelData: {
+      type: Object as PropType<IPanelContainer>,
+      required: true,
+    },
+    controller: {
+      type: PanelAppHeaderController,
+      required: true,
+    },
+  },
+  setup(props) {
+    const ns = useNamespace('panel-app-header');
+    const { showCaption, titleBarCloseMode, id } = props.modelData;
+    const collapsible = titleBarCloseMode !== 0;
+    const isCollapse = ref(titleBarCloseMode === 2);
+    const changeCollapse = () => {
+      if (collapsible) {
+        isCollapse.value = !isCollapse.value;
+      }
+    };
+
+    // 类名控制
+    const classArr = computed(() => {
+      let result: Array<string | false> = [ns.b(), ns.m(id)];
+      if (showCaption === true) {
+        result = [
+          ...result,
+          showCaption && ns.m('show-header'),
+          collapsible && ns.m('collapsible'),
+          ns.is('collapse', collapsible && isCollapse.value),
+          ns.is('hidden', !props.controller.state.visible),
+        ];
+      }
+      return result;
+    });
+
+    return { ns, isCollapse, classArr, changeCollapse };
+  },
+  render() {
+    // 内容区默认插槽处理，封装app-col
+    const defaultSlots: VNode[] = this.$slots.default?.() || [];
+    const content = (
+      <iBizRow slot='content' layout={this.modelData.layout}>
+        {defaultSlots.map(slot => {
+          const props = slot.props as IData;
+          if (!props || !props.controller) {
+            return slot;
+          }
+
+          return (
+            <iBizCol
+              layoutPos={props.modelData.layoutPos}
+              state={props.controller.state}
+            >
+              {slot}
+            </iBizCol>
+          );
+        })}
+      </iBizRow>
+    );
+
+    // 头部绘制
+    let header: unknown = null;
+    if (this.modelData.showCaption) {
+      header = (
+        <div class={[this.ns.b('header')]} onClick={this.changeCollapse}>
+          <div class={[this.ns.be('header', 'left')]}>
+            <div class={[this.ns.e('caption')]}>{this.modelData.caption}</div>
+          </div>
+          <div class={[this.ns.be('header', 'right')]}></div>
+        </div>
+      );
+    }
+    return (
+      <div class={this.classArr}>
+        {header}
+        <div class={[this.ns.b('content')]}>{content}</div>
+      </div>
+    );
+  },
+});
diff --git a/src/panel-component/panel-app-title/panel-app-title.scss b/src/panel-component/panel-app-title/panel-app-title.scss
index fe448eec2f53e524e47a9656e7b8a8b361a7df5d..aac20233c55fa29a0400a85441962b5ed9e33139 100644
--- a/src/panel-component/panel-app-title/panel-app-title.scss
+++ b/src/panel-component/panel-app-title/panel-app-title.scss
@@ -3,13 +3,21 @@
   align-items: center;
   justify-content: center;
   height: 100%;
+  padding-left: 28px;
+  @include e(title) {
+    font-size: 26px;
+    font-weight: bold;
+    color: #fff;
+  }
+
   @include e(logo) {
-    display: inline-block;
-    height: 80%;
-    margin-right: 10px;
+    margin-right: 16px;
+    @include flex(row, center, center);
 
     img {
-      height: 100%;
+      display: inline-block;
+      width: 40px;
+      height: 40px;
     }
   }
 }
diff --git a/src/panel-component/panel-app-title/panel-app-title.tsx b/src/panel-component/panel-app-title/panel-app-title.tsx
index a06429a8a044440ecedb5f759786498b48155d90..b6109769f05cf8f6dc7625c99bfd7aefe303b054 100644
--- a/src/panel-component/panel-app-title/panel-app-title.tsx
+++ b/src/panel-component/panel-app-title/panel-app-title.tsx
@@ -29,9 +29,11 @@ export const PanelAppTitle = defineComponent({
   render() {
     return (
       <div class={this.ns.b()}>
-        <span class={this.ns.e('logo')}>
-          <img src={this.c.state.imgUrl} />
-        </span>
+        {this.c.state.imgUrl && (
+          <span class={this.ns.e('logo')}>
+            <img src={this.c.state.imgUrl} />
+          </span>
+        )}
         <span class={this.ns.e('title')}>{this.c.state.title}</span>
       </div>
     );