feat: PageContainer控制面包屑显示

Author: TsMask

packages/pro-layout/README.md

@@ -138,6 +138,7 @@ const layoutConf = reactive({
 | tabList        | Tabs title list                                  | `Array<{key: string, tab: sting}>` | -             |
 | tab-change     | Switch panel callback                            | (key) => void                      | -             |
 | tab-active-key | The currently highlighted tab item               | string                             | -             |
+| breadcrumb     | Show Bread crumbs bar                            | Boolean                            | -             |
 
 ### WaterMark
 

packages/pro-layout/src/components/PageContainer/index.tsx

@@ -116,6 +116,10 @@ export const pageContainerProps = {
     type: Boolean,
     default: () => undefined,
   }, //PropTypes.looseBool,
+  breadcrumb: {
+    type: Boolean,
+    default: () => undefined,
+  },
 };
 
 export type PageContainerProps = Partial<ExtractPropTypes<typeof pageContainerProps>>;
@@ -182,6 +186,7 @@ const ProPageHeader: FunctionalComponent<PageContainerProps & { prefixedClassNam
     title,
     tabList,
     tabActiveKey,
+    breadcrumb,
     content,
     pageHeaderRender,
     header,
@@ -191,7 +196,6 @@ const ProPageHeader: FunctionalComponent<PageContainerProps & { prefixedClassNam
     fixedHeader: _,
     ...restProps
   } = props;
-  const value = useRouteContext();
 
   if (pageHeaderRender === false) {
     return null;
@@ -200,25 +204,26 @@ const ProPageHeader: FunctionalComponent<PageContainerProps & { prefixedClassNam
     return pageHeaderRender({ ...props });
   }
 
-  let pageHeaderTitle = title;
-  if (!title && title !== false) {
-    pageHeaderTitle = value.title;
-  }
+  const pageHeaderTitle = title !== false ? title : undefined;
 
-  const unrefBreadcrumb = unref(value.breadcrumb || {});
-  const breadcrumb = restProps.breadcrumb || {
-    ...unrefBreadcrumb,
-    routes: unrefBreadcrumb.routes,
-    itemRender: unrefBreadcrumb.itemRender,
-  };
+  let pageHeaderBreadcrumb = {};
+  if(breadcrumb !== false){
+    const value = useRouteContext();
+    const unrefBreadcrumb = unref(value.breadcrumb || {});
+    pageHeaderBreadcrumb = {
+      ...unrefBreadcrumb,
+      routes: unrefBreadcrumb.routes,
+      itemRender: unrefBreadcrumb.itemRender,
+    };
+  }
 
   return (
     <div class={`${prefixedClassName}-wrap`}>
       <PageHeader
         {...restProps}
         // {...value}
         title={pageHeaderTitle}
-        breadcrumb={breadcrumb}
+        breadcrumb={pageHeaderBreadcrumb}
         footer={renderFooter({
           ...restProps,
           tabList,