diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2138ac4215e2da51e8674c429932124ce2b75611..f9cce4101334fab9ff8ae6f4e0d6ce9c117fff3a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@
 
 ### Added
 
+- 支持看板部件头部区域绘制器逻辑
 - 新增地图选择编辑器
 
 ### Change
diff --git a/src/control/dashboard/portlet/portlet-layout/portlet-layout.scss b/src/control/dashboard/portlet/portlet-layout/portlet-layout.scss
index 9e39a047bf9150d239eaf08d161352c5dc227b92..e8d7a69d7696a3e156d809e75023fccc7c0da42a 100644
--- a/src/control/dashboard/portlet/portlet-layout/portlet-layout.scss
+++ b/src/control/dashboard/portlet/portlet-layout/portlet-layout.scss
@@ -52,6 +52,26 @@ $portlet-layout: (
 @include b(portlet-layout-header) {
   @include flex(row, space-between);
 
+  @include when(custom) {
+    position: relative;
+
+    @include e(left){
+      z-index: 1;
+    }
+  
+    @include e(right){
+      z-index: 1;
+    }
+  
+    @include e(bg) {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
   height: getCssVar(portlet-layout, header-height);
   padding: getCssVar(portlet-layout, header-padding);
   margin: getCssVar(portlet-layout, header-margin);
diff --git a/src/control/dashboard/portlet/portlet-layout/portlet-layout.tsx b/src/control/dashboard/portlet/portlet-layout/portlet-layout.tsx
index ab6452d131357ffa1be5e364ab3ac2cabcc289b9..1ad2b7c9fed516e3b6e2cce5045050171b557f8d 100644
--- a/src/control/dashboard/portlet/portlet-layout/portlet-layout.tsx
+++ b/src/control/dashboard/portlet/portlet-layout/portlet-layout.tsx
@@ -1,8 +1,8 @@
 import { useNamespace } from '@ibiz-template/vue3-util';
 import { computed, defineComponent } from 'vue';
-import { IUIActionGroupDetail } from '@ibiz/model-core';
+import { IControlRender, IUIActionGroupDetail } from '@ibiz/model-core';
 import './portlet-layout.scss';
-import { PortletPartController } from '@ibiz-template/runtime';
+import { PortletPartController, ScriptFactory } from '@ibiz-template/runtime';
 
 /**
  * 门户控件布局
@@ -34,39 +34,131 @@ export const PortletLayout = defineComponent({
       await props.controller.onActionClick(detail, event);
     };
 
-    return { ns, isShowHeader, onActionClick };
+    // 部件绘制器
+    const controlRenders = c.dashboard.model.controlRenders;
+
+    // 头部绘制器
+    const header = controlRenders?.find(
+      item => `dashboard_${item.id}` === `${c.model.name}_mob_header`,
+    );
+
+    // 头部标题绘制器
+    const headerCaption = controlRenders?.find(
+      item => `dashboard_${item.id}` === `${c.model.name}_mob_header_caption`,
+    );
+
+    // 头部背景绘制器
+    const headerBg = controlRenders?.find(
+      item => `dashboard_${item.id}` === `${c.model.name}_mob_header_bg`,
+    );
+
+    // 头部行为组绘制器
+    const headerAction = controlRenders?.find(
+      item => `dashboard_${item.id}` === `${c.model.name}_mob_header_action`,
+    );
+
+    // 渲染绘制器内容
+    const renderContent = (model: IControlRender) => {
+      if (model.renderType === 'LAYOUTPANEL_MODEL' && model.layoutPanelModel) {
+        const htmlCode = ScriptFactory.execScriptFn(
+          {
+            params: c.params,
+            context: c.context,
+          },
+          model.layoutPanelModel,
+          { isAsync: false },
+        ) as string;
+        return <div class={ns.b('header-render')} v-html={htmlCode}></div>;
+      }
+      if (model.renderType === 'LAYOUTPANEL' && model.layoutPanel) {
+        return (
+          <iBizControlShell
+            class={ns.b('header-render')}
+            params={c.params}
+            context={c.context}
+            modelData={model.layoutPanel}
+          ></iBizControlShell>
+        );
+      }
+    };
+
+    return {
+      ns,
+      isShowHeader,
+      header,
+      headerCaption,
+      headerBg,
+      headerAction,
+      renderContent,
+      onActionClick,
+    };
   },
   render() {
     const { model, state } = this.$props.controller;
-    return (
-      <div class={[this.ns.b(), this.ns.is('no-header', !this.isShowHeader)]}>
-        {this.isShowHeader && (
-          <div key='header' class={this.ns.b('header')}>
+    const isCustom = !!(
+      this.header ||
+      this.headerCaption ||
+      this.headerBg ||
+      this.headerAction
+    );
+    let headerRender = null;
+    if (this.isShowHeader) {
+      if (this.header) {
+        headerRender = (
+          <div
+            key='header'
+            class={[this.ns.b('header'), this.ns.is('custom', isCustom)]}
+          >
+            {this.renderContent(this.header)}
+          </div>
+        );
+      } else {
+        headerRender = (
+          <div
+            key='header'
+            class={[this.ns.b('header'), this.ns.is('custom', isCustom)]}
+          >
+            {this.headerBg && (
+              <div class={this.ns.be('header', 'bg')}>
+                {this.renderContent(this.headerBg)}
+              </div>
+            )}
             <div class={this.ns.be('header', 'left')}>
-              {model.showTitleBar && (
-                <div class={this.ns.e('caption')}>
-                  <iBizIcon
-                    class={this.ns.e('caption-icon')}
-                    icon={model.sysImage}
-                  ></iBizIcon>
-                  <div class={this.ns.e('caption-text')} title={model.title}>
-                    {model.title}
+              {model.showTitleBar &&
+                (this.headerCaption ? (
+                  this.renderContent(this.headerCaption)
+                ) : (
+                  <div class={this.ns.e('caption')}>
+                    <iBizIcon
+                      class={this.ns.e('caption-icon')}
+                      icon={model.sysImage}
+                    ></iBizIcon>
+                    <div class={this.ns.e('caption-text')} title={model.title}>
+                      {model.title}
+                    </div>
                   </div>
-                </div>
-              )}
+                ))}
             </div>
             <div class={this.ns.be('header', 'right')}>
-              {model.uiactionGroup && (
-                <iBizActionToolbar
-                  class={this.ns.e('toolbar')}
-                  action-details={model.uiactionGroup.uiactionGroupDetails}
-                  actions-state={state.actionGroupState}
-                  onActionClick={this.onActionClick}
-                ></iBizActionToolbar>
-              )}
+              {model.uiactionGroup &&
+                (this.headerAction ? (
+                  this.renderContent(this.headerAction)
+                ) : (
+                  <iBizActionToolbar
+                    class={this.ns.e('toolbar')}
+                    action-details={model.uiactionGroup.uiactionGroupDetails}
+                    actions-state={state.actionGroupState}
+                    onActionClick={this.onActionClick}
+                  ></iBizActionToolbar>
+                ))}
             </div>
           </div>
-        )}
+        );
+      }
+    }
+    return (
+      <div class={[this.ns.b(), this.ns.is('no-header', !this.isShowHeader)]}>
+        {headerRender}
         <div key='content' class={this.ns.b('content')}>
           {this.$slots.default?.()}
         </div>