diff --git a/packages/renderer/src/component-config-resolver/data-grid-component-config-resolver.ts b/packages/renderer/src/component-config-resolver/data-grid-component-config-resolver.ts
index 284a6ecf18aa67f6a7c5d42a81a42286bbb270d3..e083175e98737c2be771e3dc2242ab17ba27d9fa 100644
--- a/packages/renderer/src/component-config-resolver/data-grid-component-config-resolver.ts
+++ b/packages/renderer/src/component-config-resolver/data-grid-component-config-resolver.ts
@@ -80,16 +80,28 @@ export class DataGridComponentConfigResolver extends ComponentConfigResolver {
         }
     }
     private resolveLoolupColumn(viewSchema: Record<string, any>, column: Record<string, any>) {
-        const { editor, dictPicking } = column;
+        const { editor, dictPicking, clear, beforeLoadData, beforeSelectData, dictPicked } = column;
         if (!editor || editor.type !== 'lookup') {
             return;
         }
+        const { id } = viewSchema;
+        const relatedComponent = this.formMetadataService.getRelatedComponent(id);
+        const viewModel = this.viewModel.getModule().getViewModel(relatedComponent.id);
         if (dictPicking) {
-            const { id } = viewSchema;
-            const relatedComponent = this.formMetadataService.getRelatedComponent(id);
-            const viewModel = this.viewModel.getModule().getViewModel(relatedComponent.id);
             editor.dictPicking = (payload: any) => (viewModel as any)[dictPicking]({ payload, schema: viewSchema });
         }
+        if (clear) {
+            editor.clear = (payload: any) => (viewModel as any)[clear]({ payload, schema: viewSchema });
+        }
+        if (beforeLoadData) {
+            editor.beforeLoadData = (payload: any) => (viewModel as any)[beforeLoadData]({ payload, schema: viewSchema });
+        }
+        if (beforeSelectData) {
+            editor.beforeSelectData = (payload: any) => (viewModel as any)[beforeSelectData]({ payload, schema: viewSchema });
+        }
+        if (dictPicked) {
+            editor.dictPicked = (payload: any) => (viewModel as any)[dictPicked]({ payload, schema: viewSchema });
+        }
     }
 
     /**
diff --git a/packages/renderer/src/component-config-resolver/page-header-component-config-resolver.ts b/packages/renderer/src/component-config-resolver/page-header-component-config-resolver.ts
index 358153cb2fce59cd1989a0093cfbe10bcabbff38..1aa39e81c211475a82f1d70fe23326650f97087c 100644
--- a/packages/renderer/src/component-config-resolver/page-header-component-config-resolver.ts
+++ b/packages/renderer/src/component-config-resolver/page-header-component-config-resolver.ts
@@ -36,7 +36,7 @@ export class PageHeaderComponentConfigResolver extends ComponentConfigResolver {
                 return;
             }
             children.forEach((item: Record<string, any>) => {
-                const { disabled, visible} = item;
+                const { disabled, visible } = item;
                 item.disabled = this.configResolver.resolve(disabled, id);
                 if (!isNil(visible)) {
                     item.visible = this.configResolver.resolve(visible, id);
diff --git a/packages/renderer/src/template-transformer/index.ts b/packages/renderer/src/template-transformer/index.ts
index 15350151bdce36fcc03bb4efdb5cf1d0470430df..30131293f36a87dbbbb53b47208b4b3c980032dc 100644
--- a/packages/renderer/src/template-transformer/index.ts
+++ b/packages/renderer/src/template-transformer/index.ts
@@ -3,4 +3,7 @@ export * from './template-transformer';
 export * from './data-grid-column-template-transformer';
 export * from './template-transformer-registry';
 export * from './template-transform-service';
+export * from './page-header-template-transformer';
+export * from './section-template-transformer';
+export * from './tab-page-template-transformer';
 export * from './providers';
diff --git a/packages/renderer/src/template-transformer/page-header-template-transformer.ts b/packages/renderer/src/template-transformer/page-header-template-transformer.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e5bbc8c219e7fc6403c2dc91a1951e87591117f0
--- /dev/null
+++ b/packages/renderer/src/template-transformer/page-header-template-transformer.ts
@@ -0,0 +1,36 @@
+
+import { TemplateTransformer } from "./template-transformer";
+import { FormMetadataService } from "../service";
+import { Injector, ViewModel, ViewModelState } from "@farris/devkit-vue";
+
+export class PageHeaderTemplateTransformer extends TemplateTransformer {
+    constructor(protected formMetadataService: FormMetadataService, protected viewModel: ViewModel<ViewModelState>, private injector: Injector) {
+        super(formMetadataService, viewModel);
+    }
+    public transform(schema: Record<string, any>): void {
+        const { id, type, titleContentHtml, contentHtml, downContentHtml } = schema;
+        if (type !== 'page-header') {
+            return;
+        }
+        const viewModel = this.getRelatedViewModel(id);
+        if (!viewModel) {
+            return;
+        }
+        // 标题模板
+        if (titleContentHtml) {
+            const render = this.buildTemplateRender(titleContentHtml, viewModel);
+            schema.titleContentRenderFunction = render;
+        }
+        // 内容模板
+        if (contentHtml) {
+            const render = this.buildTemplateRender(contentHtml, viewModel);
+            schema.contentRenderFunction = render;
+        }
+        // 扩展模板
+        if (downContentHtml) {
+            const render = this.buildTemplateRender(downContentHtml, viewModel);
+            schema.downContentRenderFunction = render;
+        }
+    }
+    
+}
diff --git a/packages/renderer/src/template-transformer/providers.ts b/packages/renderer/src/template-transformer/providers.ts
index 989c0bc1dbc4e2cd55b974e399fa40c593b80842..2aa9bc134922567e00747d77589ba16200a7d9e7 100644
--- a/packages/renderer/src/template-transformer/providers.ts
+++ b/packages/renderer/src/template-transformer/providers.ts
@@ -5,10 +5,16 @@ import { HtmlTemplateComponentTemplateTransformer } from "./html-template-compon
 import { FormMetadataService } from "../service";
 import { TemplateTransformerRegistry } from "./template-transformer-registry";
 import { TemplateTransformService } from "./template-transform-service";
+import { PageHeaderTemplateTransformer } from "./page-header-template-transformer";
+import { SectionTemplateTransformer } from './section-template-transformer';
+import { TabPageTemplateTransformer } from "./tab-page-template-transformer";
 
 export const htmlTemplateTransformers: StaticProvider[] = [
     { provide: TEMPLATE_TRANSFORMERS_TOKEN, useClass: DataGridColumnTemplateTransformer, deps: [FormMetadataService, ViewModel, Injector], multi: true },
     { provide: TEMPLATE_TRANSFORMERS_TOKEN, useClass: HtmlTemplateComponentTemplateTransformer, deps: [FormMetadataService, ViewModel], multi: true },
+    { provide: TEMPLATE_TRANSFORMERS_TOKEN, useClass: PageHeaderTemplateTransformer, deps: [FormMetadataService, ViewModel, Injector], multi: true },
+    { provide: TEMPLATE_TRANSFORMERS_TOKEN, useClass: SectionTemplateTransformer, deps: [FormMetadataService, ViewModel, Injector], multi: true },
+    { provide: TEMPLATE_TRANSFORMERS_TOKEN, useClass: TabPageTemplateTransformer, deps: [FormMetadataService, ViewModel, Injector], multi: true },
     { provide: TemplateTransformerRegistry, useClass: TemplateTransformerRegistry, deps: [TEMPLATE_TRANSFORMERS_TOKEN] },
     { provide: TemplateTransformService, useClass: TemplateTransformService, deps: [TemplateTransformerRegistry] },
 ];
diff --git a/packages/renderer/src/template-transformer/section-template-transformer.ts b/packages/renderer/src/template-transformer/section-template-transformer.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cedbfa9af54b0486eaa7f68ad3f072088f758423
--- /dev/null
+++ b/packages/renderer/src/template-transformer/section-template-transformer.ts
@@ -0,0 +1,39 @@
+import { TemplateTransformer } from "./template-transformer";
+import { FormMetadataService } from "../service";
+import { Injector, ViewModel, ViewModelState } from "@farris/devkit-vue";
+
+export class SectionTemplateTransformer extends TemplateTransformer {
+    constructor(protected formMetadataService: FormMetadataService, protected viewModel: ViewModel<ViewModelState>, private injector: Injector) {
+        super(formMetadataService, viewModel);
+    }
+    public transform(schema: Record<string, any>): void {
+        const { id, type, headerTitleHtml, headerHtml, headerContentHtml, toolbarHtml } = schema;
+        if (type !== 'section') {
+            return;
+        }
+        const viewModel = this.getRelatedViewModel(id);
+        if (!viewModel) {
+            return;
+        }
+        // 标题模板
+        if (headerTitleHtml) {
+            const render = this.buildTemplateRender(headerTitleHtml, viewModel);
+            schema.headerTitleRenderFunction = render;
+        }
+        // 头部模板
+        if (headerHtml) {
+            const render = this.buildTemplateRender(headerHtml, viewModel);
+            schema.headerRenderFunction = render;
+        }
+        // 扩展模板
+        if (headerContentHtml) {
+            const render = this.buildTemplateRender(headerContentHtml, viewModel);
+            schema.headerContentRenderFunction = render;
+        }
+        // 扩展模板
+        if (toolbarHtml) {
+            const render = this.buildTemplateRender(toolbarHtml, viewModel);
+            schema.toolbarRenderFunction = render;
+        }
+    }
+}
diff --git a/packages/renderer/src/template-transformer/tab-page-template-transformer.ts b/packages/renderer/src/template-transformer/tab-page-template-transformer.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2160e30fa9f7a0fcc33c749f31bc9c04697060ab
--- /dev/null
+++ b/packages/renderer/src/template-transformer/tab-page-template-transformer.ts
@@ -0,0 +1,25 @@
+import { TemplateTransformer } from "./template-transformer";
+import { FormMetadataService } from "../service";
+import { Injector, ViewModel, ViewModelState } from "@farris/devkit-vue";
+
+export class TabPageTemplateTransformer extends TemplateTransformer {
+    constructor(protected formMetadataService: FormMetadataService, protected viewModel: ViewModel<ViewModelState>, private injector: Injector) {
+        super(formMetadataService, viewModel);
+    }
+    public transform(schema: Record<string, any>): void {
+        const { id, type, titleHtml } = schema;
+        if (type !== 'tab-page') {
+            return;
+        }
+        const viewModel = this.getRelatedViewModel(id);
+        if (!viewModel) {
+            return;
+        }
+        // 标题模板
+        if (titleHtml) {
+            const render = this.buildTemplateRender(titleHtml, viewModel);
+            schema.titleRenderFunction = render;
+        }
+    }
+
+}
diff --git a/packages/renderer/src/template-transformer/template-transformer.ts b/packages/renderer/src/template-transformer/template-transformer.ts
index e83e115f5b676b1381b991ae0e500562781f18d6..e34d5e9595f3ceb433a8b7ee5ef1be8d5da6f5b4 100644
--- a/packages/renderer/src/template-transformer/template-transformer.ts
+++ b/packages/renderer/src/template-transformer/template-transformer.ts
@@ -1,5 +1,7 @@
 import { ViewModel, ViewModelState } from "@farris/devkit-vue";
 import { FormMetadataService } from "../service";
+import { compile, createVNode } from "vue";
+import { TranslateService } from "@farris/command-services-vue";
 
 export abstract class TemplateTransformer {
 
@@ -38,4 +40,13 @@ export abstract class TemplateTransformer {
             current: viewModel
         };
     }
+    protected buildTemplateRender(template: string, viewModel: ViewModel<ViewModelState>) {
+        const compiledTemplate = compile(template);
+        const templateContext = this.buildTempalteContext(viewModel);
+        const translateService = this.viewModel.getInjector().get<TranslateService>(TranslateService);
+        const render = () => {
+            return createVNode({ render: compiledTemplate, props: ['viewModel', 't'] }, { viewModel: templateContext, t: translateService.transform.bind(translateService) });
+        };
+        return render;
+    }
 }