refactor:pageheader

components/page-header/index.tsx

@@ -16,6 +16,9 @@ import useDestroyed from '../_util/hooks/useDestroyed';
 import type { MouseEventHandler } from '../_util/EventInterface';
 import Space from '../space';
 
+// CSSINJS
+import useStyle from './style';
+
 export const pageHeaderProps = () => ({
   backIcon: PropTypes.any,
   prefixCls: String,
@@ -35,11 +38,16 @@ export type PageHeaderProps = Partial<ExtractPropTypes<ReturnType<typeof pageHea
 const PageHeader = defineComponent({
   compatConfig: { MODE: 3 },
   name: 'APageHeader',
+  inheritAttrs: false,
   props: pageHeaderProps(),
   // emits: ['back'],
   slots: ['backIcon', 'avatar', 'breadcrumb', 'title', 'subTitle', 'tags', 'extra', 'footer'],
-  setup(props, { emit, slots }) {
+  setup(props, { emit, slots, attrs }) {
     const { prefixCls, direction, pageHeader } = useConfigInject('page-header', props);
+
+    // style
+    const [wrapSSR, hashId] = useStyle(prefixCls);
+
     const compact = ref(false);
     const isDestroyed = useDestroyed();
     const onResize = ({ width }: { width: number }) => {
@@ -148,22 +156,27 @@ const PageHeader = defineComponent({
       const hasBreadcrumb = props.breadcrumb?.routes || slots.breadcrumb;
       const hasFooter = props.footer || slots.footer;
       const children = flattenChildren(slots.default?.());
-      const className = classNames(prefixCls.value, {
-        'has-breadcrumb': hasBreadcrumb,
-        'has-footer': hasFooter,
-        [`${prefixCls.value}-ghost`]: ghost.value,
-        [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
-        [`${prefixCls.value}-compact`]: compact.value,
-      });
-      return (
+      const className = classNames(
+        prefixCls.value,
+        {
+          'has-breadcrumb': hasBreadcrumb,
+          'has-footer': hasFooter,
+          [`${prefixCls.value}-ghost`]: ghost.value,
+          [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
+          [`${prefixCls.value}-compact`]: compact.value,
+        },
+        attrs.class,
+        hashId.value,
+      );
+      return wrapSSR(
         <ResizeObserver onResize={onResize}>
-          <div class={className}>
+          <div {...attrs} class={className}>
             {renderBreadcrumb()}
             {renderTitle()}
             {children.length ? renderChildren(children) : null}
             {renderFooter()}
           </div>
-        </ResizeObserver>
+        </ResizeObserver>,
       );
     };
   },

components/page-header/style/index.tsx

@@ -1,6 +1,156 @@
-import './index.less';
+import type { CSSObject } from '../../_util/cssinjs';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+import { resetComponent, textEllipsis } from '../../_style';
+import { operationUnit } from '../../_style';
 
-// style dependencies
-import '../../breadcrumb/style';
-import '../../avatar/style';
-import '../../space/style';
+interface PageHeaderToken extends FullToken<'PageHeader'> {
+  pageHeaderPadding: number;
+  pageHeaderPaddingVertical: number;
+  pageHeaderPaddingBreadcrumb: number;
+  pageHeaderGhostBg: string;
+  pageHeaderBackColor: string;
+  pageHeaderHeadingTitle: number;
+  pageHeaderHeadingSubTitle: number;
+  pageHeaderContentPaddingVertical: number;
+  pageHeaderTabFontSize: number;
+}
+
+const genPageHeaderStyle: GenerateStyle<PageHeaderToken, CSSObject> = token => {
+  const { componentCls, antCls } = token;
+
+  return {
+    [componentCls]: {
+      ...resetComponent(token),
+      position: 'relative',
+      padding: `${token.pageHeaderPaddingVertical}px ${token.pageHeaderPadding}px`,
+      backgroundColor: token.colorBgLayout,
+
+      [`${componentCls}-ghost`]: {
+        backgroundColor: token.pageHeaderGhostBg,
+      },
+
+      [`&.has-footer`]: {
+        paddingBottom: 0,
+      },
+
+      [`${componentCls}-back`]: {
+        marginRight: token.marginMD,
+        fontZize: token.fontSizeLG,
+        lineHeight: 1,
+
+        [`&-button`]: {
+          ...operationUnit(token),
+          color: token.pageHeaderBackColor,
+          cursor: 'pointer',
+        },
+      },
+
+      [`${antCls}-divider-vertical`]: {
+        height: '14px',
+        margin: `0 ${token.marginSM}`,
+        verticalAlign: 'middle',
+      },
+
+      [`${antCls}-breadcrumb + &-heading`]: {
+        marginTop: token.marginXS,
+      },
+
+      [`${componentCls}-heading`]: {
+        display: 'flex',
+        justifyContent: 'space-between',
+
+        [`&-left`]: {
+          display: 'flex',
+          alignItems: 'center',
+          margin: `${token.marginXS / 2}px 0`,
+          overflow: 'hidden',
+        },
+
+        [`&-title`]: {
+          marginRight: token.marginSM,
+          marginBottom: 0,
+          color: token.colorTextHeading,
+          fontWeight: 600,
+          fontSize: token.pageHeaderHeadingTitle,
+          lineHeight: `${token.controlHeight}px`,
+          ...textEllipsis,
+        },
+
+        [`${antCls}-avatar`]: {
+          marginRight: token.marginSM,
+        },
+
+        [`&-sub-title`]: {
+          marginRight: token.marginSM,
+          color: token.colorTextDescription,
+          fontSize: token.pageHeaderHeadingSubTitle,
+          lineHeight: token.lineHeight,
+          ...textEllipsis,
+        },
+
+        [`&-extra`]: {
+          margin: `${token.marginXS / 2}px 0`,
+          whiteSpace: 'nowrap',
+
+          [`> *`]: {
+            marginLeft: token.marginSM,
+            whiteSpace: 'unset',
+          },
+
+          [`> *:first-child`]: {
+            marginLeft: 0,
+          },
+        },
+      },
+
+      [`${componentCls}-content`]: {
+        paddingTop: token.pageHeaderContentPaddingVertical,
+      },
+
+      [`${componentCls}-footer`]: {
+        marginTop: token.marginMD,
+        [`${antCls}-tabs`]: {
+          [`> ${antCls}-tabs-nav`]: {
+            margin: 0,
+
+            [`&::before`]: {
+              border: 'none',
+            },
+          },
+          [`${antCls}-tabs-tab`]: {
+            paddingTop: token.paddingXS,
+            paddingBottom: token.paddingXS,
+            fontSize: token.pageHeaderTabFontSize,
+          },
+        },
+      },
+
+      [`${componentCls}-compact ${componentCls}-heading`]: {
+        flexWrap: 'wrap',
+      },
+
+      // rtl style
+      [`&${token.componentCls}-rtl`]: {
+        direction: 'rtl',
+      },
+    },
+  };
+};
+
+// ============================== Export ==============================
+export default genComponentStyleHook('PageHeader', token => {
+  const PageHeaderToken = mergeToken<PageHeaderToken>(token, {
+    pageHeaderPadding: token.paddingLG,
+    pageHeaderPaddingVertical: token.paddingMD,
+    pageHeaderPaddingBreadcrumb: token.paddingSM,
+    pageHeaderContentPaddingVertical: token.paddingSM,
+    pageHeaderBackColor: token.colorTextBase,
+    pageHeaderGhostBg: 'inherit',
+    pageHeaderHeadingTitle: token.fontSizeHeading4,
+    pageHeaderHeadingSubTitle: token.fontSize,
+    pageHeaderTabFontSize: token.fontSizeLG,
+  });
+
+  return [genPageHeaderStyle(PageHeaderToken)];
+});