feat: customHeader

.changeset/rude-cups-greet.md

@@ -0,0 +1,5 @@
+---
+'@alita/plugins': patch
+---
+
+feat: customHeader

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     | 组件 | 否   |  自定义页面的头部                |
 
 
 ### 定义页面底部导航标签栏

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[]) {

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;

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>
   );

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>
   );