From 793fac74258a661cb8f4c7654bceb7a8c9d41a81 Mon Sep 17 00:00:00 2001
From: xiaohuoni <xiaohuoni@dingtalk.com>
Date: Wed, 5 Jul 2023 10:55:35 +0800
Subject: [PATCH] feat: customHeader

---
 .changeset/rude-cups-greet.md                        | 5 +++++
 docs/docs/guides/alita-layout.md                     | 2 ++
 examples/boilerplate/src/app.tsx                     | 1 +
 examples/boilerplate/src/layouts/layout.tsx          | 2 +-
 packages/plugins/templates/mobile-layout/layout.tpl  | 3 ++-
 packages/plugins/templates/mobile-layout/layout5.tpl | 3 ++-
 6 files changed, 13 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/rude-cups-greet.md

diff --git a/.changeset/rude-cups-greet.md b/.changeset/rude-cups-greet.md
new file mode 100644
index 000000000..e57266275
--- /dev/null
+++ b/.changeset/rude-cups-greet.md
@@ -0,0 +1,5 @@
+---
+'@alita/plugins': patch
+---
+
+feat: customHeader
diff --git a/docs/docs/guides/alita-layout.md b/docs/docs/guides/alita-layout.md
index ae3df5de5..443bee475 100644
--- a/docs/docs/guides/alita-layout.md
+++ b/docs/docs/guides/alita-layout.md
@@ -30,6 +30,7 @@ export const mobileLayout = {
   navBar,
   documentTitle: '默认标题',
   titleList,
+  customHeader
 };
 ```
 
@@ -39,6 +40,7 @@ export const mobileLayout = {
 | navBar        | NavBarProps     | 否   |  定义页面头部导航栏                        |
 | documentTitle | string          | 否   |  定义所有页面的默认标题                     |
 | titleList     | TitleListItem[] | 否   |  定义页面的标题                    |
+| customHeader     | 组件 | 否   |  自定义页面的头部                |
 
 
 ### 定义页面底部导航标签栏
diff --git a/examples/boilerplate/src/app.tsx b/examples/boilerplate/src/app.tsx
index f7de5e1ec..d4fcc16bb 100644
--- a/examples/boilerplate/src/app.tsx
+++ b/examples/boilerplate/src/app.tsx
@@ -101,6 +101,7 @@ export const mobileLayout = {
   navBar,
   tabBar,
   titleList,
+  // customHeader:<div>asdasdassaasd</div>
 };
 
 export async function getKeepAlive(keepaliva: any[]) {
diff --git a/examples/boilerplate/src/layouts/layout.tsx b/examples/boilerplate/src/layouts/layout.tsx
index 3a56d623d..508f796c0 100644
--- a/examples/boilerplate/src/layouts/layout.tsx
+++ b/examples/boilerplate/src/layouts/layout.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 const Layout = ({ children }) => {
-  return <>{children}</>;
+  return <div>1232312213{children}</div>;
 };
 
 export default Layout;
diff --git a/packages/plugins/templates/mobile-layout/layout.tpl b/packages/plugins/templates/mobile-layout/layout.tpl
index 97cb04314..b3b755f1d 100644
--- a/packages/plugins/templates/mobile-layout/layout.tpl
+++ b/packages/plugins/templates/mobile-layout/layout.tpl
@@ -437,7 +437,7 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
   const location = useLocation();
   // mobile layout runtime config
   const runtime = getPluginManager().applyPlugins({ key: 'mobileLayout',type: 'modify', initialValue: {} });
-  const { titleList, documentTitle, navBar, tabBar, onPageChange } = runtime;
+  const { titleList, documentTitle, navBar, tabBar, onPageChange, customHeader=null  } = runtime;
   useEffect(() => {
     setPageNavBar(getPageNavBar());
     setTabBarList(getTabBarList());
@@ -465,6 +465,7 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
   };
   return (
     <AlitaLayout {...layout}>
+      {customHeader}
       {element}
     </AlitaLayout>
   );
diff --git a/packages/plugins/templates/mobile-layout/layout5.tpl b/packages/plugins/templates/mobile-layout/layout5.tpl
index 40f3d8fd0..8acee2dd8 100644
--- a/packages/plugins/templates/mobile-layout/layout5.tpl
+++ b/packages/plugins/templates/mobile-layout/layout5.tpl
@@ -423,7 +423,7 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
   const location = useLocation();
   // mobile layout runtime config
   const runtime = getPluginManager().applyPlugins({ key: 'mobileLayout',type: 'modify', initialValue: {} });
-  const { titleList, documentTitle, navBar, tabBar, onPageChange } = runtime;
+  const { titleList, documentTitle, navBar, tabBar, onPageChange, customHeader=null } = runtime;
   useEffect(() => {
     setPageNavBar(getPageNavBar());
     setTabBarList(getTabBarList());
@@ -451,6 +451,7 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
   };
   return (
     <AlitaLayout {...layout}>
+      {customHeader}
       {element}
     </AlitaLayout>
   );