fix: update PageHeaderWrapper

examples/package.json

@@ -17,7 +17,7 @@
   "license": "MIT",
   "dependencies": {
     "@ant-design/icons": "^4.0.0-alpha.11",
-    "ant-design-vue": "^1.4.8",
+    "ant-design-vue": "^1.5.0-rc.4",
     "core-js": "^3.1.2",
     "vue-i18n": "^8.15.0",
     "vue-ls": "^3.2.1",

examples/src/views/TestPage2.vue

 <template>
-  <document-title :title="$t($route.meta.title)">
+  <page-header-wrapper :i18n-render="i18nRender">
     <div class="page-test-wrapper">
       <h1>Test Page2 keepAlive: {{ $route.meta.keepAlive }}</h1>
       <div class="box">
@@ -11,10 +11,13 @@
         <p>{{ newVal }}</p>
       </div>
     </div>
-  </document-title>
+  </page-header-wrapper>
 </template>
 
 <script>
+import ProLayout, { PageHeaderWrapper } from '@ant-design-vue/pro-layout'
+import { i18nRender } from '@/locales'
+
 export default {
   data () {
     return {
@@ -22,9 +25,14 @@ export default {
     }
   },
   methods: {
+    i18nRender,
     handleClick (e) {
       this.$router.push({ path: '/dashboard/analysis' })
     }
+  },
+  components: {
+    ProLayout,
+    PageHeaderWrapper
   }
 }
 </script>

package.json

@@ -56,7 +56,7 @@
         "vue-template-compiler": ">=2.5.0"
     },
     "dependencies": {
-        "ant-design-vue": "^1.4.6",
+        "ant-design-vue": "^1.5.0-rc.4",
         "classnames": "^2.2.6",
         "insert-css": "^2.0.0",
         "lodash": "^4.17.15",

src/BasicLayout.jsx

@@ -7,6 +7,7 @@ import { SiderMenuWrapper, GlobalFooter } from './components'
 import { getComponentFormProp, isFun } from './utils/util'
 import { SiderMenuProps } from './components/SiderMenu/SiderMenu'
 import HeaderView, { HeaderViewProps } from './Header'
+import WrapContent from './WrapContent'
 
 export const BasicLayoutProps = {
   ...SiderMenuProps,
@@ -120,11 +121,9 @@ const BasicLayout = {
                 ...cdProps,
                 mode: 'horizontal',
               })}
-              <Layout.Content style={{ margin: '24px 16px', padding: '24px', minHeight: '280px' }}>
-                <GridContent contentWidth={contentWidth}>
-                  {children}
-                </GridContent>
-              </Layout.Content>
+              <WrapContent class="ant-pro-basicLayout-content">
+                {children}
+              </WrapContent>
               <Layout.Footer>
                 { footerRender && (
                   isFun(footerRender) && footerRender(h) || footerRender

src/BasicLayout.less

 @import "~ant-design-vue/es/style/themes/default";
 
+@basicLayout-prefix-cls: ~'@{ant-prefix}-pro-basicLayout';
 @sider-menu-prefix-cls: ~'@{ant-prefix}-pro-sider-menu';
 @nav-header-height: @layout-header-height;
 
+.@{basicLayout-prefix-cls} {
+
+  &:not('.ant-pro-basicLayout-mobile') {
+    ::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+    }
+    ::-webkit-scrollbar-track {
+      background: rgba(0, 0, 0, 0.06);
+      border-radius: 3px;
+      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.08);
+    }
+    /* 滚动条滑块 */
+    ::-webkit-scrollbar-thumb {
+      background: rgba(0, 0, 0, 0.12);
+      border-radius: 3px;
+      -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
+    }
+  }
+
+  // BFC
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-height: 100%;
+
+  .ant-layout-header {
+    &:not(.ant-pro-top-menu) {
+      background: @component-background;
+    }
+
+    &.ant-pro-fixed-header {
+      position: fixed;
+      top: 0;
+    }
+  }
+
+  &-content {
+    position: relative;
+    margin: 24px;
+    transition: all 0.2s;
+    .@{ant-prefix}-pro-page-header-wrap {
+      margin: -24px -24px 0;
+    }
+    &-disable-margin {
+      margin: 0;
+      > div > .@{ant-prefix}-pro-page-header-wrap {
+        margin: 0;
+      }
+    }
+    > .ant-layout {
+      max-height: 100%;
+    }
+  }
+}
+
+
 .basicLayout {
 
   .ant-layout-sider-children {
@@ -21,6 +79,24 @@
     }
   }
 
+  &-content {
+    position: relative;
+    margin: 24px;
+    transition: all 0.2s;
+    .@{ant-prefix}-pro-page-header-wrap {
+      margin: -24px -24px 0;
+    }
+    &-disable-margin {
+      margin: 0;
+      > div > .@{ant-prefix}-pro-page-header-wrap {
+        margin: 0;
+      }
+    }
+    > .ant-layout {
+      max-height: 100%;
+    }
+  }
+
   .color-picker {
     margin: 10px 0;
   }

src/WrapContent.jsx

+import PropTypes from 'ant-design-vue/es/_util/vue-types'
+import { ConfigProvider, Layout } from 'ant-design-vue'
+import { getComponentFromProp } from 'ant-design-vue/lib/_util/props-util'
+import { getComponentFormProp } from '@ant-design-vue/pro-layout/utils/util'
+
+const { Content } = Layout
+
+const WrapContentProps = {
+  isChildrenLayout: PropTypes.bool,
+  location: PropTypes.any,
+  contentHeight: PropTypes.number
+}
+
+const WrapContent = {
+  name: 'WrapContent',
+  props: WrapContentProps,
+  render (h) {
+    const {
+      isChildrenLayout
+    } = this.$props
+    return (
+      <Content>
+        <ConfigProvider
+          getPopupContainer={(el, dialogContext) => {
+            if (isChildrenLayout) {
+              return el.parentNode()
+            }
+            return document.body
+          }}
+        >
+          <div class="ant-pro-basicLayout-children-content-wrap">
+            {this.$slots.default}
+          </div>
+        </ConfigProvider>
+      </Content>
+    )
+  }
+}
+
+export default WrapContent

src/components/GridContent/index.jsx

@@ -17,11 +17,12 @@ const GridContent = {
     const { contentWidth: propsContentWidth } = content.props
     const children = content.children
 
-    let className = 'ant-pro-grid-content'
-    if (propsContentWidth) {
-      className = className + ' wide'
+    const classNames = {
+      ['ant-pro-grid-content']: true,
+      ['wide']: propsContentWidth
     }
-    return <div class={className}>{children}</div>
+
+    return <div class={classNames}>{children}</div>
   }
 }
 

src/components/GridContent/index.less

@@ -4,7 +4,6 @@
 
 .@{grid-content-prefix-cls} {
   width: 100%;
-  height: 100%;
   min-height: 100%;
   transition: 0.3s;
   &.wide {

src/components/PageHeaderWrapper/index.jsx

-/* eslint-disable */
+import './index.less'
+
+import PropTypes from 'ant-design-vue/es/_util/vue-types'
 import GridContent from '../GridContent'
-import { getComponentFromProp } from 'ant-design-vue/lib/_util/props-util'
+import { PageHeader, Tabs } from 'ant-design-vue'
+
+const { PageHeaderProps } = PageHeader
 
 const prefixedClassName = 'ant-pro-page-header-wrap'
 
+const PageHeaderTabConfig = {
+  tabList: PropTypes.object,
+  tabActiveKey: PropTypes.string,
+  tabProps: PropTypes.object
+}
+
+const PageHeaderWrapperProps = {
+  ...PageHeaderTabConfig,
+  ...PageHeaderProps,
+  title: PropTypes.oneOf([PropTypes.string, false]),
+  content: PropTypes.any,
+  extraContent: PropTypes.any,
+  pageHeaderRender: PropTypes.func,
+
+  // 包装 pro-layout 才能使用
+  i18nRender: PropTypes.any
+}
+
+const defaultI18nRender = (t) => t
+
+const useContext = (route) => {
+  return route && {
+    ...route.meta
+  } || null
+}
+
+const renderFooter = (h, tabConfigProps) => {
+  const {
+    tabList,
+    tabActiveKey,
+    onTabChange,
+    tabBarExtraContent,
+    tabProps,
+  } = tabConfigProps
+  return tabList && tabList.length > 0 && (
+    <Tabs
+      class={`${prefixedClassName}-tabs`}
+      activeKey={tabActiveKey}
+      onChange={key => {
+        if (onTabChange) {
+          onTabChange(key)
+        }
+        this.$emit('tab-change', key)
+      }}
+      tabBarExtraContent={tabBarExtraContent}
+      {...tabProps}
+    >
+      {tabList.map(item => (
+        <Tabs.TabPane {...item} tab={item.tab} key={item.key} />
+      ))}
+    </Tabs>
+  )
+}
+
 const renderPageHeader = (h, content, extraContent) => {
   if (!content && !extraContent) {
     return null
@@ -26,7 +84,7 @@ const renderPageHeader = (h, content, extraContent) => {
   )
 }
 
-const defaultPageHeaderRender = (h, props) => {
+const defaultPageHeaderRender = (h, props, value, i18nRender) => {
   const {
     title,
     content,
@@ -35,19 +93,45 @@ const defaultPageHeaderRender = (h, props) => {
     ...restProps
   } = props
 
-  return renderPageHeader(h, content, extraContent)
+  if (pageHeaderRender) {
+    return pageHeaderRender({ ...props })
+  }
+  let pageHeaderTitle = title
+  if ((!title && title !== false) || value.title !== false) {
+    pageHeaderTitle = value.title
+  }
+  return (
+    <PageHeader
+      {...value}
+      title={i18nRender(pageHeaderTitle)}
+      {...props}
+      footer={renderFooter(h, restProps)}
+      >
+      {renderPageHeader(h, content, extraContent)}
+    </PageHeader>
+  )
+  // return
 }
 
 const PageHeaderWrapper = {
   name: 'PageHeaderWrapper',
+  props: PageHeaderWrapperProps,
   render (h) {
-
-    const children = getComponentFromProp(this, 'children')
+    const children = this.$slots.default
+    const value = useContext(this.$props.route || this.$route)
+    const i18n = this.$props.i18nRender || defaultI18nRender
     return (
-      <div style={{ margin: '-24px -24px 0' }}>
+      <div class="ant-pro-page-header-wrap">
         <div class={`${prefixedClassName}-page-header-warp`}>
-          <GridContent>{defaultPageHeaderRender(h, this.$props)}</GridContent>
+          <GridContent>{defaultPageHeaderRender(h, this.$props, value, i18n)}</GridContent>
         </div>
+        { children ? (
+          <GridContent>
+            <div class={`${prefixedClassName}-children-content`}>
+              {children}
+            </div>
+          </GridContent>
+        ) : null }
       </div>
     )
   }

src/components/PageHeaderWrapper/index.less

+@import "~ant-design-vue/es/style/themes/default";
+
+@ant-pro-page-header-wrap: ~'@{ant-prefix}-pro-page-header-wrap';
+
+.@{ant-pro-page-header-wrap}-children-content {
+  margin: 24px 24px 0;
+}
+
+.@{ant-pro-page-header-wrap}-page-header-warp {
+  background-color: @component-background;
+}
+
+.@{ant-pro-page-header-wrap}-main {
+  .@{ant-pro-page-header-wrap}-detail {
+    display: flex;
+  }
+
+  .@{ant-pro-page-header-wrap}-row {
+    display: flex;
+    width: 100%;
+  }
+
+  .@{ant-pro-page-header-wrap}-title-content {
+    margin-bottom: 16px;
+  }
+
+  .@{ant-pro-page-header-wrap}-title,
+  .@{ant-pro-page-header-wrap}-content {
+    flex: auto;
+  }
+
+  .@{ant-pro-page-header-wrap}-extraContent,
+  .@{ant-pro-page-header-wrap}-main {
+    flex: 0 1 auto;
+  }
+
+  .@{ant-pro-page-header-wrap}-main {
+    width: 100%;
+  }
+
+  .@{ant-pro-page-header-wrap}-title {
+    margin-bottom: 16px;
+  }
+
+  .@{ant-pro-page-header-wrap}-logo {
+    margin-bottom: 16px;
+  }
+
+  .@{ant-pro-page-header-wrap}-extraContent {
+    min-width: 242px;
+    margin-left: 88px;
+    text-align: right;
+  }
+}
+
+@media screen and (max-width: @screen-xl) {
+  .@{ant-pro-page-header-wrap}-main {
+    .@{ant-pro-page-header-wrap}-extraContent {
+      margin-left: 44px;
+    }
+  }
+}
+
+@media screen and (max-width: @screen-lg) {
+  .@{ant-pro-page-header-wrap}-main {
+    .@{ant-pro-page-header-wrap}-extraContent {
+      margin-left: 20px;
+    }
+  }
+}
+
+@media screen and (max-width: @screen-md) {
+  .@{ant-pro-page-header-wrap}-main {
+    .@{ant-pro-page-header-wrap}-row {
+      display: block;
+    }
+
+    .@{ant-pro-page-header-wrap}-action,
+    .@{ant-pro-page-header-wrap}-extraContent {
+      margin-left: 0;
+      text-align: left;
+    }
+  }
+}
+
+@media screen and (max-width: @screen-sm) {
+  .@{ant-pro-page-header-wrap}-detail {
+    display: block;
+  }
+  .@{ant-pro-page-header-wrap}-extraContent {
+    margin-left: 0;
+  }
+}

src/index.js

 import BasicLayout, { BasicLayoutProps } from './BasicLayout'
 import BlockLayout from './BlockLayout'
-import PageView from './PageView'
+import PageHeaderWrapper from './components/PageHeaderWrapper'
 import DocumentTitle from './components/DocumentTitle'
 import { updateTheme } from './utils/dynamicTheme'
 
 export {
-  PageView,
+  PageHeaderWrapper,
   BlockLayout,
   DocumentTitle,
   BasicLayoutProps,