@ant-design/pro-components 2.8.9 → 3.0.0-beta.1

package/es/layout/components/PageContainer/index.d.ts

@@ -0,0 +1,83 @@
+import type { AffixProps, BreadcrumbProps, TabPaneProps, TabsProps } from 'antd';
+import { SpinProps, WatermarkProps } from 'antd';
+import type { ReactNode } from 'react';
+import React from 'react';
+import type { GenerateStyle } from '../../../provider';
+import type { WithFalse } from '../../typing';
+import type { FooterToolbarProps } from '../FooterToolbar';
+import type { PageHeaderProps } from '../PageHeader';
+import type { PageContainerToken, pageContainerToken } from './style';
+export type PageHeaderTabConfig = {
+    /** @name tabs 的列表 */
+    tabList?: (TabPaneProps & {
+        key?: React.Key;
+    })[];
+    /** @name tabActiveKey 当前选中 tab 的 key */
+    tabActiveKey?: TabsProps['activeKey'];
+    /** @name tab 修改时触发 */
+    onTabChange?: TabsProps['onChange'];
+    /** @name tab 上额外的区域 */
+    tabBarExtraContent?: TabsProps['tabBarExtraContent'];
+    /** @name tabs 的其他配置 */
+    tabProps?: TabsProps;
+    /** @name fixedHeader 固定 PageHeader 到页面顶部 */
+    fixedHeader?: boolean;
+};
+export type PageContainerProps = {
+    title?: React.ReactNode | false;
+    content?: React.ReactNode;
+    extraContent?: React.ReactNode;
+    prefixCls?: string;
+    footer?: ReactNode[];
+    /**
+     * @name token 自定义的 token
+     */
+    token?: pageContainerToken;
+    /**
+     * 与 antd 完全相同
+     *
+     * @name PageHeader 的配置
+     */
+    header?: Partial<PageHeaderProps> & {
+        children?: React.ReactNode;
+    };
+    /** @name pageHeaderRender 自定义 pageHeader */
+    pageHeaderRender?: WithFalse<(props: PageContainerProps) => React.ReactNode>;
+    /**
+     * 与 antd 完全相同
+     *
+     * @name affixProps 固钉的配置
+     */
+    affixProps?: Omit<AffixProps, 'children'>;
+    /**
+     * 只加载内容区域
+     *
+     * @name loading 是否加载
+     */
+    loading?: boolean | SpinProps | React.ReactNode;
+    /**
+     * 自定义 breadcrumb,
+     * @name breadcrumbRender 返回false不展示
+     */
+    breadcrumbRender?: PageHeaderProps['breadcrumbRender'] | false;
+    /** @name WaterMarkProps 水印的配置 */
+    waterMarkProps?: WatermarkProps;
+    /** @name BreadcrumbProps 配置面包屑 */
+    breadcrumb?: BreadcrumbProps;
+    children?: React.ReactNode;
+    stylish?: GenerateStyle<PageContainerToken>;
+    footerStylish?: GenerateStyle<PageContainerToken>;
+    footerToolBarProps?: FooterToolbarProps;
+} & PageHeaderTabConfig & Omit<PageHeaderProps, 'title' | 'footer' | 'breadcrumbRender' | 'breadcrumb'>;
+/**
+ * 配置与面包屑相同，只是增加了自动根据路由计算面包屑的功能。此功能必须要在 ProLayout 中使用。
+ *
+ * @param props
+ * @returns
+ */
+declare const ProBreadcrumb: React.FC<BreadcrumbProps>;
+declare const PageContainer: React.FC<PageContainerProps>;
+declare const ProPageHeader: (props: PageContainerProps & {
+    prefixedClassName: string;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export { PageContainer, ProBreadcrumb, ProPageHeader };

package/es/layout/components/PageContainer/index.js

@@ -0,0 +1,340 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/layout/components/PageContainer/index.tsx
+import {
+  Affix,
+  Breadcrumb,
+  ConfigProvider,
+  Tabs,
+  Watermark
+} from "antd";
+import classNames from "classnames";
+import React, { useContext, useEffect, useMemo } from "react";
+import { ProConfigProvider, ProProvider } from "../../../provider";
+import { RouteContext } from "../../context/RouteContext";
+import { FooterToolbar } from "../FooterToolbar";
+import { GridContent } from "../GridContent";
+import { PageHeader } from "../PageHeader";
+import { PageLoading } from "../PageLoading";
+import { useStyle } from "./style";
+import { useStylish } from "./style/stylish";
+function genLoading(spinProps) {
+  if (typeof spinProps === "object") {
+    return spinProps;
+  }
+  return { spinning: spinProps };
+}
+var renderFooter = ({
+  tabList,
+  tabActiveKey,
+  onTabChange,
+  hashId,
+  tabBarExtraContent,
+  tabProps,
+  prefixedClassName
+}) => {
+  if (Array.isArray(tabList) || tabBarExtraContent) {
+    return /* @__PURE__ */ React.createElement(
+      Tabs,
+      __spreadValues({
+        className: `${prefixedClassName}-tabs ${hashId}`.trim(),
+        activeKey: tabActiveKey,
+        onChange: (key) => {
+          if (onTabChange) {
+            onTabChange(key);
+          }
+        },
+        tabBarExtraContent,
+        items: tabList == null ? void 0 : tabList.map((item, index) => {
+          var _a;
+          return __spreadProps(__spreadValues({
+            label: item.tab
+          }, item), {
+            key: ((_a = item.key) == null ? void 0 : _a.toString()) || (index == null ? void 0 : index.toString())
+          });
+        })
+      }, tabProps)
+    );
+  }
+  return null;
+};
+var renderPageHeader = (content, extraContent, prefixedClassName, hashId) => {
+  if (!content && !extraContent) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement("div", { className: `${prefixedClassName}-detail ${hashId}`.trim() }, /* @__PURE__ */ React.createElement("div", { className: `${prefixedClassName}-main ${hashId}`.trim() }, /* @__PURE__ */ React.createElement("div", { className: `${prefixedClassName}-row ${hashId}`.trim() }, content && /* @__PURE__ */ React.createElement("div", { className: `${prefixedClassName}-content ${hashId}`.trim() }, content), extraContent && /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: `${prefixedClassName}-extraContent ${hashId}`.trim()
+    },
+    extraContent
+  ))));
+};
+var ProBreadcrumb = (props) => {
+  const value = useContext(RouteContext);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        height: "100%",
+        display: "flex",
+        alignItems: "center"
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      Breadcrumb,
+      __spreadValues(__spreadValues(__spreadValues({}, value == null ? void 0 : value.breadcrumb), value == null ? void 0 : value.breadcrumbProps), props)
+    )
+  );
+};
+var memoRenderPageHeader = (props) => {
+  var _b;
+  const _a = props, {
+    title,
+    content,
+    pageHeaderRender,
+    header,
+    prefixedClassName,
+    extraContent,
+    childrenContentStyle,
+    style,
+    prefixCls,
+    hashId,
+    value,
+    breadcrumbRender
+  } = _a, restProps = __objRest(_a, [
+    "title",
+    "content",
+    "pageHeaderRender",
+    "header",
+    "prefixedClassName",
+    "extraContent",
+    "childrenContentStyle",
+    "style",
+    "prefixCls",
+    "hashId",
+    "value",
+    "breadcrumbRender"
+  ]);
+  const getBreadcrumbRender = () => {
+    if (!breadcrumbRender) {
+      return void 0;
+    }
+    return breadcrumbRender;
+  };
+  if (pageHeaderRender === false) {
+    return null;
+  }
+  if (pageHeaderRender) {
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, " ", pageHeaderRender(__spreadValues(__spreadValues({}, props), value)));
+  }
+  let pageHeaderTitle = title;
+  if (!title && title !== false) {
+    pageHeaderTitle = value.title;
+  }
+  const pageHeaderProps = __spreadValues(__spreadProps(__spreadValues(__spreadProps(__spreadValues({}, value), {
+    title: pageHeaderTitle
+  }), restProps), {
+    footer: renderFooter(__spreadProps(__spreadValues({}, restProps), {
+      hashId,
+      breadcrumbRender,
+      prefixedClassName
+    }))
+  }), header);
+  const { breadcrumb } = pageHeaderProps;
+  const noHasBreadCrumb = (!breadcrumb || !(breadcrumb == null ? void 0 : breadcrumb.itemRender) && !((_b = breadcrumb == null ? void 0 : breadcrumb.items) == null ? void 0 : _b.length)) && !breadcrumbRender;
+  if ([
+    "title",
+    "subTitle",
+    "extra",
+    "tags",
+    "footer",
+    "avatar",
+    "backIcon"
+  ].every((item) => !pageHeaderProps[item]) && noHasBreadCrumb && !content && !extraContent) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(
+    PageHeader,
+    __spreadProps(__spreadValues({}, pageHeaderProps), {
+      className: `${prefixedClassName}-warp-page-header ${hashId}`.trim(),
+      breadcrumb: breadcrumbRender === false ? void 0 : __spreadValues(__spreadValues({}, pageHeaderProps.breadcrumb), value.breadcrumbProps),
+      breadcrumbRender: getBreadcrumbRender(),
+      prefixCls
+    }),
+    (header == null ? void 0 : header.children) || renderPageHeader(content, extraContent, prefixedClassName, hashId)
+  );
+};
+var PageContainerBase = (props) => {
+  var _b, _c, _d;
+  const _a = props, {
+    children,
+    loading = false,
+    className,
+    style,
+    footer,
+    affixProps,
+    token: propsToken,
+    fixedHeader,
+    breadcrumbRender,
+    footerToolBarProps,
+    childrenContentStyle
+  } = _a, restProps = __objRest(_a, [
+    "children",
+    "loading",
+    "className",
+    "style",
+    "footer",
+    "affixProps",
+    "token",
+    "fixedHeader",
+    "breadcrumbRender",
+    "footerToolBarProps",
+    "childrenContentStyle"
+  ]);
+  const value = useContext(RouteContext);
+  useEffect(() => {
+    var _a2;
+    if (!value || !(value == null ? void 0 : value.setHasPageContainer)) {
+      return () => {
+      };
+    }
+    (_a2 = value == null ? void 0 : value.setHasPageContainer) == null ? void 0 : _a2.call(value, (num) => num + 1);
+    return () => {
+      var _a3;
+      (_a3 = value == null ? void 0 : value.setHasPageContainer) == null ? void 0 : _a3.call(value, (num) => num - 1);
+    };
+  }, []);
+  const { token } = useContext(ProProvider);
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = props.prefixCls || getPrefixCls("pro");
+  const basePageContainer = `${prefixCls}-page-container`;
+  const { wrapSSR, hashId } = useStyle(basePageContainer, propsToken);
+  const stylish = useStylish(
+    `${basePageContainer}.${basePageContainer}-stylish`,
+    {
+      stylish: props.stylish
+    }
+  );
+  const memoBreadcrumbRender = useMemo(() => {
+    var _a2;
+    if (breadcrumbRender == false)
+      return false;
+    return breadcrumbRender || ((_a2 = restProps == null ? void 0 : restProps.header) == null ? void 0 : _a2.breadcrumbRender);
+  }, [breadcrumbRender, (_b = restProps == null ? void 0 : restProps.header) == null ? void 0 : _b.breadcrumbRender]);
+  const pageHeaderDom = memoRenderPageHeader(__spreadProps(__spreadValues({}, restProps), {
+    breadcrumbRender: memoBreadcrumbRender,
+    ghost: true,
+    hashId,
+    prefixCls: void 0,
+    prefixedClassName: basePageContainer,
+    value
+  }));
+  const loadingDom = useMemo(() => {
+    if (React.isValidElement(loading)) {
+      return loading;
+    }
+    if (typeof loading === "boolean" && !loading) {
+      return null;
+    }
+    const spinProps = genLoading(loading);
+    return spinProps.spinning ? /* @__PURE__ */ React.createElement(PageLoading, __spreadValues({}, spinProps)) : null;
+  }, [loading]);
+  const content = useMemo(() => {
+    return children ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: classNames(
+          hashId,
+          `${basePageContainer}-children-container`,
+          {
+            [`${basePageContainer}-children-container-no-header`]: !pageHeaderDom
+          }
+        ),
+        style: childrenContentStyle
+      },
+      children
+    )) : null;
+  }, [children, basePageContainer, childrenContentStyle, hashId]);
+  const renderContentDom = useMemo(() => {
+    const dom = loadingDom || content;
+    if (props.waterMarkProps || value.waterMarkProps) {
+      const waterMarkProps = __spreadValues(__spreadValues({}, value.waterMarkProps), props.waterMarkProps);
+      return /* @__PURE__ */ React.createElement(Watermark, __spreadValues({}, waterMarkProps), dom);
+    }
+    return dom;
+  }, [props.waterMarkProps, value.waterMarkProps, loadingDom, content]);
+  const containerClassName = classNames(basePageContainer, hashId, className, {
+    [`${basePageContainer}-with-footer`]: footer,
+    [`${basePageContainer}-with-affix`]: fixedHeader && pageHeaderDom,
+    [`${basePageContainer}-stylish`]: !!restProps.stylish
+  });
+  return wrapSSR(
+    stylish.wrapSSR(
+      /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { style, className: containerClassName }, fixedHeader && pageHeaderDom ? (
+        // 在 hasHeader 且 fixedHeader 的情况下，才需要设置高度
+        /* @__PURE__ */ React.createElement(
+          Affix,
+          __spreadProps(__spreadValues({
+            offsetTop: value.hasHeader && value.fixedHeader ? (_d = (_c = token.layout) == null ? void 0 : _c.header) == null ? void 0 : _d.heightLayoutHeader : 1
+          }, affixProps), {
+            className: `${basePageContainer}-affix ${hashId}`.trim()
+          }),
+          /* @__PURE__ */ React.createElement("div", { className: `${basePageContainer}-warp ${hashId}`.trim() }, pageHeaderDom)
+        )
+      ) : pageHeaderDom, renderContentDom && /* @__PURE__ */ React.createElement(GridContent, null, renderContentDom)), footer && /* @__PURE__ */ React.createElement(
+        FooterToolbar,
+        __spreadValues({
+          stylish: restProps.footerStylish,
+          prefixCls
+        }, footerToolBarProps),
+        footer
+      ))
+    )
+  );
+};
+var PageContainer = (props) => {
+  return /* @__PURE__ */ React.createElement(ProConfigProvider, { needDeps: true }, /* @__PURE__ */ React.createElement(PageContainerBase, __spreadValues({}, props)));
+};
+var ProPageHeader = (props) => {
+  const value = useContext(RouteContext);
+  return memoRenderPageHeader(__spreadProps(__spreadValues({}, props), {
+    hashId: "",
+    value
+  }));
+};
+export {
+  PageContainer,
+  ProBreadcrumb,
+  ProPageHeader
+};

package/es/layout/components/PageContainer/style/index.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { ProAliasToken } from '../../../../provider';
+export interface PageContainerToken extends ProAliasToken {
+    componentCls: string;
+}
+export type pageContainerToken = {
+    paddingInlinePageContainerContent?: number;
+    paddingBlockPageContainerContent?: number;
+};
+export declare function useStyle(prefixCls: string, componentsToken: pageContainerToken | undefined): {
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    hashId: string;
+};

package/es/layout/components/PageContainer/style/index.js

@@ -0,0 +1,124 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/layout/components/PageContainer/style/index.ts
+import { useStyle as useAntdStyle } from "../../../../provider";
+var [sm, md, lg, xl] = [576, 768, 992, 1200].map(
+  (bp) => `@media (max-width: ${bp}px)`
+);
+var genPageContainerStyle = (token) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D;
+  return {
+    [token.componentCls]: {
+      position: "relative",
+      "&-children-container": {
+        paddingBlockStart: 0,
+        paddingBlockEnd: (_b = (_a = token.layout) == null ? void 0 : _a.pageContainer) == null ? void 0 : _b.paddingBlockPageContainerContent,
+        paddingInline: (_d = (_c = token.layout) == null ? void 0 : _c.pageContainer) == null ? void 0 : _d.paddingInlinePageContainerContent
+      },
+      "&-children-container-no-header": {
+        paddingBlockStart: (_f = (_e = token.layout) == null ? void 0 : _e.pageContainer) == null ? void 0 : _f.paddingBlockPageContainerContent
+      },
+      "&-affix": {
+        [`${token.antCls}-affix`]: {
+          [`${token.componentCls}-warp`]: {
+            backgroundColor: (_h = (_g = token.layout) == null ? void 0 : _g.pageContainer) == null ? void 0 : _h.colorBgPageContainerFixed,
+            transition: "background-color 0.3s",
+            boxShadow: "0 2px 8px #f0f1f2"
+          }
+        }
+      },
+      ["& &-warp-page-header"]: {
+        paddingBlockStart: ((_k = (_j = (_i = token.layout) == null ? void 0 : _i.pageContainer) == null ? void 0 : _j.paddingBlockPageContainerContent) != null ? _k : 40) / 4,
+        paddingBlockEnd: ((_n = (_m = (_l = token.layout) == null ? void 0 : _l.pageContainer) == null ? void 0 : _m.paddingBlockPageContainerContent) != null ? _n : 40) / 2,
+        paddingInlineStart: (_p = (_o = token.layout) == null ? void 0 : _o.pageContainer) == null ? void 0 : _p.paddingInlinePageContainerContent,
+        paddingInlineEnd: (_r = (_q = token.layout) == null ? void 0 : _q.pageContainer) == null ? void 0 : _r.paddingInlinePageContainerContent,
+        [`& ~ ${token.proComponentsCls}-grid-content`]: {
+          [`${token.proComponentsCls}-page-container-children-content`]: {
+            paddingBlock: ((_u = (_t = (_s = token.layout) == null ? void 0 : _s.pageContainer) == null ? void 0 : _t.paddingBlockPageContainerContent) != null ? _u : 24) / 3
+          }
+        },
+        [`${token.antCls}-page-header-breadcrumb`]: {
+          paddingBlockStart: ((_x = (_w = (_v = token.layout) == null ? void 0 : _v.pageContainer) == null ? void 0 : _w.paddingBlockPageContainerContent) != null ? _x : 40) / 4 + 10
+        },
+        [`${token.antCls}-page-header-heading`]: {
+          paddingBlockStart: ((_A = (_z = (_y = token.layout) == null ? void 0 : _y.pageContainer) == null ? void 0 : _z.paddingBlockPageContainerContent) != null ? _A : 40) / 4
+        },
+        [`${token.antCls}-page-header-footer`]: {
+          marginBlockStart: ((_D = (_C = (_B = token.layout) == null ? void 0 : _B.pageContainer) == null ? void 0 : _C.paddingBlockPageContainerContent) != null ? _D : 40) / 4
+        }
+      },
+      "&-detail": {
+        display: "flex",
+        [sm]: {
+          display: "block"
+        }
+      },
+      "&-main": {
+        width: "100%"
+      },
+      "&-row": {
+        display: "flex",
+        width: "100%",
+        [md]: {
+          display: "block"
+        }
+      },
+      "&-content": {
+        flex: "auto",
+        width: "100%"
+      },
+      "&-extraContent": {
+        flex: "0 1 auto",
+        minWidth: "242px",
+        marginInlineStart: 88,
+        textAlign: "end",
+        [xl]: {
+          marginInlineStart: 44
+        },
+        [lg]: {
+          marginInlineStart: 20
+        },
+        [md]: {
+          marginInlineStart: 0,
+          textAlign: "start"
+        },
+        [sm]: {
+          marginInlineStart: 0
+        }
+      }
+    }
+  };
+};
+function useStyle(prefixCls, componentsToken) {
+  return useAntdStyle("ProLayoutPageContainer", (token) => {
+    var _a;
+    const proCardToken = __spreadProps(__spreadValues({}, token), {
+      componentCls: `.${prefixCls}`,
+      layout: __spreadProps(__spreadValues({}, token == null ? void 0 : token.layout), {
+        pageContainer: __spreadValues(__spreadValues({}, (_a = token == null ? void 0 : token.layout) == null ? void 0 : _a.pageContainer), componentsToken)
+      })
+    });
+    return [genPageContainerStyle(proCardToken)];
+  });
+}
+export {
+  useStyle
+};

package/es/layout/components/PageContainer/style/stylish.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { GenerateStyle, ProAliasToken } from '../../../../provider';
+export interface stylishToken extends ProAliasToken {
+    componentCls: string;
+}
+export declare function useStylish(prefixCls: string, { stylish, }: {
+    stylish?: GenerateStyle<stylishToken>;
+}): {
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    hashId: string;
+};

package/es/layout/components/PageContainer/style/stylish.js

@@ -0,0 +1,41 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/layout/components/PageContainer/style/stylish.ts
+import { useStyle as useAntdStyle } from "../../../../provider";
+function useStylish(prefixCls, {
+  stylish
+}) {
+  return useAntdStyle("ProLayoutPageContainerStylish", (token) => {
+    const stylishToken = __spreadProps(__spreadValues({}, token), {
+      componentCls: `.${prefixCls}`
+    });
+    if (!stylish)
+      return [];
+    return [
+      {
+        [`div${stylishToken.componentCls}`]: stylish == null ? void 0 : stylish(stylishToken)
+      }
+    ];
+  });
+}
+export {
+  useStylish
+};

package/es/layout/components/PageHeader/index.d.ts

@@ -0,0 +1,26 @@
+import type { AvatarProps, BreadcrumbProps, TagType } from 'antd';
+import { Breadcrumb } from 'antd';
+import React from 'react';
+import type { ContentWidth } from '../../defaultSettings';
+export interface PageHeaderProps {
+    backIcon?: React.ReactNode;
+    prefixCls?: string;
+    title?: React.ReactNode;
+    subTitle?: React.ReactNode;
+    style?: React.CSSProperties;
+    childrenContentStyle?: React.CSSProperties;
+    breadcrumb?: Partial<BreadcrumbProps> | React.ReactElement<typeof Breadcrumb>;
+    breadcrumbRender?: (props: PageHeaderProps, defaultDom: React.ReactNode) => React.ReactNode;
+    tags?: React.ReactElement<TagType> | React.ReactElement<TagType>[];
+    footer?: React.ReactNode;
+    extra?: React.ReactNode;
+    avatar?: AvatarProps;
+    onBack?: (e?: React.MouseEvent<HTMLElement>) => void;
+    className?: string;
+    contentWidth?: ContentWidth;
+    layout?: string;
+    ghost?: boolean;
+    children?: React.ReactNode;
+}
+declare const PageHeader: React.FC<PageHeaderProps>;
+export { PageHeader };