fix: PageHeaderWrapper

examples/package.json

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

examples/src/config/router.config.js

 // eslint-disable-next-line
 import BasicLayout from '../layouts/BasicLayout'
 
+const renderRouterView = {
+  render: (h) => h('router-view')
+}
+
 const asyncRouterMap = [
   {
     path: '/',
@@ -14,13 +18,14 @@ const asyncRouterMap = [
         name: 'dashboard',
         meta: { keepAlive: true, title: 'menu.dashboard.default', icon: 'dashboard' },
         redirect: '/dashboard/analysis',
-        component: { render: (h) => h('router-view') },
+        component: renderRouterView,
         children: [
           {
             path: '/dashboard/analysis',
             name: 'analysis',
             meta: {
               keepAlive: true,
+              icon: 'smile',
               title: 'menu.dashboard.analysis'
             },
             component: () => import(/* webpackChunkName: "about" */ '../views/BlockPage')
@@ -31,6 +36,7 @@ const asyncRouterMap = [
             meta: {
               global: true,
               keepAlive: true,
+              icon: 'smile',
               title: 'menu.dashboard.workplace'
             },
             component: () => import(/* webpackChunkName: "about" */ '../views/TestPage')
@@ -38,59 +44,60 @@ const asyncRouterMap = [
         ]
       },
       {
-        path: '/page2',
-        name: 'page2',
-        meta: {
-          keepAlive: true,
-          title: 'menu.nav2',
-          icon: 'video-camera'
-        },
-        component: () => import(/* webpackChunkName: "about" */ '../views/TestPage2')
-      },
-      {
-        path: '/page3',
-        name: 'page3',
-        meta: {
-          keepAlive: true,
-          title: 'menu.nav2',
-          icon: 'video-camera'
-        },
-        component: () => import(/* webpackChunkName: "about" */ '../views/TestPage2')
-      },
-      {
-        path: '/page4',
-        name: 'page4',
+        path: '/form',
+        name: 'form',
         meta: {
           keepAlive: true,
-          title: 'menu.nav2',
-          icon: 'video-camera'
-        },
-        component: () => import(/* webpackChunkName: "about" */ '../views/TestPage2')
-      },
-      {
-        path: '/page5',
-        name: 'page5',
-        meta: {
-          keepAlive: true,
-          title: 'menu.nav2',
+          title: 'menu.form.default',
           icon: 'video-camera'
         },
-        component: () => import(/* webpackChunkName: "about" */ '../views/TestPage2')
+        component: renderRouterView,
+        children: [
+          {
+            path: '/form/basic-form',
+            name: 'basic-form',
+            meta: {
+              keepAlive: true,
+              icon: 'smile',
+              title: 'menu.form.basicform'
+            },
+            component: () => import(/* webpackChunkName: "about" */ '../views/BlockPage')
+          },
+          {
+            path: '/form/step-form',
+            name: 'step-form',
+            meta: {
+              keepAlive: true,
+              icon: 'smile',
+              title: 'menu.form.stepform'
+            },
+            component: () => import(/* webpackChunkName: "about" */ '../views/BlockPage')
+          },
+          {
+            path: '/form/advanced-form',
+            name: 'advanced-form',
+            meta: {
+              keepAlive: true,
+              icon: 'smile',
+              title: 'menu.form.advancedform'
+            },
+            component: () => import(/* webpackChunkName: "about" */ '../views/BlockPage')
+          }
+        ]
       },
       {
-        path: '/page6',
-        name: 'page6',
+        path: '/page1',
+        name: 'page1',
         meta: {
           keepAlive: true,
-          title: 'menu.nav2',
+          title: 'menu.nav1',
           icon: 'video-camera'
         },
         component: () => import(/* webpackChunkName: "about" */ '../views/TestPage2')
       },
-
       {
-        path: '/page7',
-        name: 'page7',
+        path: '/page2',
+        name: 'page2',
         meta: {
           keepAlive: true,
           title: 'menu.nav2',
@@ -98,13 +105,12 @@ const asyncRouterMap = [
         },
         component: () => import(/* webpackChunkName: "about" */ '../views/TestPage2')
       },
-
       {
-        path: '/page8',
-        name: 'page8',
+        path: '/page3',
+        name: 'page3',
         meta: {
           keepAlive: true,
-          title: 'menu.nav2',
+          title: 'menu.nav3',
           icon: 'video-camera'
         },
         component: () => import(/* webpackChunkName: "about" */ '../views/TestPage2')

examples/src/core/antd/icons.js

@@ -30,6 +30,12 @@ export {
 export {
   default as RightOutline
 } from '@ant-design/icons/lib/outline/RightOutline'
+export {
+  default as ArrowLeftOutline
+} from '@ant-design/icons/lib/outline/ArrowLeftOutline'
+export {
+  default as ArrowRightOutline
+} from '@ant-design/icons/lib/outline/ArrowRightOutline'
 export {
   default as MenuFoldOutline
 } from '@ant-design/icons/lib/outline/MenuFoldOutline'
@@ -54,4 +60,7 @@ export {
 export {
   default as LogoutOutline
 } from '@ant-design/icons/lib/outline/LogoutOutline'
+export {
+  default as SmileOutline
+} from '@ant-design/icons/lib/outline/SmileOutline'
 /* Layout end */

examples/src/layouts/BasicLayout.jsx

@@ -3,7 +3,7 @@ import './BasicLayout.less'
 import { Avatar, Dropdown, Menu, Icon } from 'ant-design-vue'
 import { asyncRouterMap } from '../config/router.config.js'
 import { i18nRender } from '../locales'
-import ProLayout from '@ant-design-vue/pro-layout'
+import ProLayout, { GlobalFooter } from '@ant-design-vue/pro-layout'
 import SelectLang from '../components/SelectLang'
 import LogoSvg from '../assets/logo.svg?inline'
 // import defaultSettings from '@config/defaultSettings'
@@ -61,9 +61,15 @@ const rightContentRender = (h, props) => {
 
 const footerRender = (h, props) => {
   return (
-    <div class={'footer custom-render'}>
-      <span>footer</span>
-    </div>
+    <GlobalFooter class={'footer custom-render'}>
+      <template slot="links">
+        <a href="https://www.github.com/vueComponent/" target="_self">Github</a>
+        <a href="https://www.github.com/sendya/" target="_self">@Sendya</a>
+      </template>
+      <template slot="copyright">
+        <a href="https://github.com/vueComponent">vueComponent</a>
+      </template>
+    </GlobalFooter>
   )
 }
 

examples/src/locales/lang/en-US.js

@@ -12,6 +12,25 @@ export default {
       analysis: 'Analysis',
       workplace: 'Workplace'
     },
-    nav2: 'Nav 2*'
+    form: {
+      default: 'Form',
+      basicform: 'Basic Form',
+      stepform: 'Step Form',
+      advancedform: 'Advanced Form'
+    },
+    nav1: 'Nav 1',
+    nav2: 'Nav 2',
+    nav3: 'Nav 3'
+  },
+
+  pages: {
+    form: {
+      basicform: {
+        headers: {
+          btn1: 'Button1'
+        },
+        content: 'Form pages are used to collect or verify information to users, and basic forms are common in scenarios where there are fewer data items.'
+      }
+    }
   }
 }

examples/src/locales/lang/zh-CN.js

@@ -8,10 +8,29 @@ export default {
   menu: {
     home: '首页',
     dashboard: {
-      default: '仪表盘',
+      default: 'Dashboard',
       analysis: '分析页',
       workplace: '工作台'
     },
-    nav2: '导航2*'
+    form: {
+      default: '表单页',
+      basicform: '基础表单',
+      stepform: '分步表单',
+      advancedform: '高级表单'
+    },
+    nav1: '导航1',
+    nav2: '导航2',
+    nav3: '导航3'
+  },
+
+  pages: {
+    form: {
+      basicform: {
+        headers: {
+          btn1: '按钮1'
+        },
+        content: '表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。'
+      }
+    }
   }
 }

examples/src/main.js

@@ -9,11 +9,14 @@ import i18n from './locales'
 
 import './router/router-guards'
 import './core/library'
+import { PageHeaderWrapper } from '@ant-design-vue/pro-layout'
 import initializer from './core/bootstrap'
 import './global.less'
 
 Vue.config.productionTip = false
 
+Vue.component('page-header-wrapper', PageHeaderWrapper)
+
 window._vue = new Vue({
   router,
   store,

examples/src/views/BlockPage.vue

 <template>
-  <document-title title="BlockPage">
+  <page-header-wrapper
+    :tab-list="tabList"
+    :tab-active-key="tabActiveKey"
+    :tab-change="(key) => {
+      this.tabActiveKey = key
+      console.log('PageHeader::tabChange', key)
+    }"
+    :breadcrumb="false"
+  >
+    <template slot="content">
+      <span>{{ $t('pages.form.basicform.content') }}</span>
+    </template>
+    <template slot="extraContent">
+      <div><a-button>{{ $t('pages.form.basicform.headers.btn1') }}</a-button></div>
+    </template>
     <div>
       <strong>Block Page</strong>
     </div>
-  </document-title>
+  </page-header-wrapper>
 </template>
 
 <script>
 export default {
-  name: 'BlockPage'
+  name: 'BlockPage',
+  data () {
+    return {
+      console: window.console,
+      tabList: [
+        { tab: 'Tab1', key: 'tab1' },
+        { tab: 'Tab2', key: 'tab2' },
+        { tab: 'Tab3', key: 'tab3' }
+      ],
+      tabActiveKey: 'tab1'
+    }
+  },
+  methods: {
+    handleTabChange (key) {
+      this.tabActiveKey = key
+      console.log('PageHeader::tabChange', key)
+    }
+  }
 }
 </script>
 

package.json

@@ -27,7 +27,7 @@
     ],
     "peerDependencies": {
         "vue": ">=2.5.0",
-        "ant-design-vue": "^1.4.6",
+        "ant-design-vue": "^1.5.3",
         "umi-request": "^1.2.11",
         "vue-container-query": "^0.1.0",
         "vue-template-compiler": ">=2.5.0"
@@ -56,7 +56,7 @@
         "vue-template-compiler": ">=2.5.0"
     },
     "dependencies": {
-        "ant-design-vue": "^1.5.0-rc.4",
+        "ant-design-vue": "^1.5.3",
         "classnames": "^2.2.6",
         "insert-css": "^2.0.0",
         "lodash": "^4.17.15",

src/BasicLayout.jsx

@@ -2,12 +2,12 @@ import './BasicLayout.less'
 
 import { Layout } from 'ant-design-vue'
 import { ContainerQuery } from 'vue-container-query'
-import GridContent from './components/GridContent'
 import { SiderMenuWrapper, GlobalFooter } from './components'
-import { getComponentFormProp, isFun } from './utils/util'
+import { getComponentFromProp, isFun } from './utils/util'
 import { SiderMenuProps } from './components/SiderMenu/SiderMenu'
 import HeaderView, { HeaderViewProps } from './Header'
 import WrapContent from './WrapContent'
+import ConfigProvider from '@ant-design-vue/pro-layout/components/ConfigProvider'
 
 export const BasicLayoutProps = {
   ...SiderMenuProps,
@@ -75,25 +75,26 @@ const BasicLayout = {
   functional: true,
   props: BasicLayoutProps,
   render (h, content) {
-    const { props, data, children, slots } = content
+    const { props, children } = content
     const {
       menus,
       layout,
       logo,
-      contentWidth,
-      theme,
+      // contentWidth,
+      // theme,
       collapsed,
       // eslint-disable-next-line
-      autoHideHeader,
+      // autoHideHeader,
       mediaQuery,
       handleMediaQuery,
-      handleCollapse
+      handleCollapse,
+      i18nRender
     } = props
 
-    const footerRender = getComponentFormProp(content, 'footerRender')
-    const rightContentRender = getComponentFormProp(content, 'rightContentRender')
-    const collapsedButtonRender = getComponentFormProp(content, 'collapsedButtonRender')
-    const menuHeaderRender = getComponentFormProp(content, 'menuHeaderRender')
+    const footerRender = getComponentFromProp(content, 'footerRender')
+    const rightContentRender = getComponentFromProp(content, 'rightContentRender')
+    const collapsedButtonRender = getComponentFromProp(content, 'collapsedButtonRender')
+    const menuHeaderRender = getComponentFromProp(content, 'menuHeaderRender')
 
     const cdProps = {
       ...props,
@@ -104,7 +105,7 @@ const BasicLayout = {
     }
 
     return (
-      <div>
+      <ConfigProvider i18nRender={i18nRender}>
         <ContainerQuery query={MediaQueryEnum} onChange={handleMediaQuery}>
           <Layout class={{ 'basicLayout': true, ...mediaQuery }}>
             <SiderMenuWrapper
@@ -142,7 +143,7 @@ const BasicLayout = {
             </Layout>
           </Layout>
         </ContainerQuery>
-      </div>
+      </ConfigProvider>
     )
   }
 }

src/components/ConfigProvider/index.js

+import PropTypes from 'ant-design-vue/es/_util/vue-types'
+
+const ConfigProvider = {
+  name: 'ConfigProvider',
+  props: {
+    i18nRender: PropTypes.any,
+  },
+  provide () {
+    const _self = this
+    return {
+      locale: _self.$props.i18nRender
+    }
+  },
+  render () {
+    const { $scopedSlots } = this
+    const children = this.children || $scopedSlots.default
+    return children()
+  }
+}
+
+export default ConfigProvider

src/components/PageHeaderWrapper/index.jsx

@@ -9,9 +9,10 @@ const { PageHeaderProps } = PageHeader
 const prefixedClassName = 'ant-pro-page-header-wrap'
 
 const PageHeaderTabConfig = {
-  tabList: PropTypes.object,
+  tabList: PropTypes.array,
   tabActiveKey: PropTypes.string,
-  tabProps: PropTypes.object
+  tabProps: PropTypes.object,
+  tabChange: PropTypes.func
 }
 
 const PageHeaderWrapperProps = {
@@ -21,6 +22,7 @@ const PageHeaderWrapperProps = {
   content: PropTypes.any,
   extraContent: PropTypes.any,
   pageHeaderRender: PropTypes.func,
+  breadcrumb: PropTypes.oneOf([PropTypes.object, false]),
 
   // 包装 pro-layout 才能使用
   i18nRender: PropTypes.any
@@ -38,7 +40,7 @@ const renderFooter = (h, tabConfigProps) => {
   const {
     tabList,
     tabActiveKey,
-    onTabChange,
+    tabChange: onTabChange,
     tabBarExtraContent,
     tabProps,
   } = tabConfigProps
@@ -50,7 +52,6 @@ const renderFooter = (h, tabConfigProps) => {
         if (onTabChange) {
           onTabChange(key)
         }
-        this.$emit('tab-change', key)
       }}
       tabBarExtraContent={tabBarExtraContent}
       {...tabProps}
@@ -90,9 +91,9 @@ const defaultPageHeaderRender = (h, props, value, i18nRender) => {
     content,
     pageHeaderRender,
     extraContent,
+    breadcrumb,
     ...restProps
   } = props
-
   if (pageHeaderRender) {
     return pageHeaderRender({ ...props })
   }
@@ -102,9 +103,10 @@ const defaultPageHeaderRender = (h, props, value, i18nRender) => {
   }
   return (
     <PageHeader
-      {...value}
       title={i18nRender(pageHeaderTitle)}
+      breadcrumb={breadcrumb}
       {...props}
+      onBack={() => null}
       footer={renderFooter(h, restProps)}
       >
       {renderPageHeader(h, content, extraContent)}
@@ -116,14 +118,38 @@ const defaultPageHeaderRender = (h, props, value, i18nRender) => {
 const PageHeaderWrapper = {
   name: 'PageHeaderWrapper',
   props: PageHeaderWrapperProps,
+  inject: ['locale'],
   render (h) {
     const children = this.$slots.default
+    const content = this.$slots.content
+    const extraContent = this.$slots.extraContent
+
     const value = useContext(this.$props.route || this.$route)
-    const i18n = this.$props.i18nRender || defaultI18nRender
+    const i18n = this.$props.i18nRender || this.locale || defaultI18nRender
+
+    const propsBreadcrumb = this.$props.breadcrumb
+    let breadcrumb = {}
+    if (propsBreadcrumb === undefined) {
+      const routes = this.$route.matched.concat().map(route => {
+        return {
+          path: route.path,
+          breadcrumbName: i18n(route.meta.title)
+        }
+      })
+      breadcrumb = { props: { routes }}
+    }
+
+    const props = {
+      ...this.$props,
+      content,
+      extraContent,
+      breadcrumb
+    }
+
     return (
       <div class="ant-pro-page-header-wrap">
         <div class={`${prefixedClassName}-page-header-warp`}>
-          <GridContent>{defaultPageHeaderRender(h, this.$props, value, i18n)}</GridContent>
+          <GridContent>{defaultPageHeaderRender(h, props, value, i18n)}</GridContent>
         </div>
         { children ? (
           <GridContent>

src/index.js

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

src/utils/util.js

 import triggerEvent from 'ant-design-vue/es/_util/triggerEvent'
 import { inBrowser } from 'ant-design-vue/es/_util/env'
 
-const getComponentFormProp = (instance, prop) => {
+const getComponentFromProp = (instance, prop) => {
   const slots = instance.slots && instance.slots()
   return slots[prop] || instance.props[prop]
 }
 
+/*const getComponentFromProp = (instance, prop) => {
+  const slots = instance.$slots
+  return slots[prop] || instance.$props[prop]
+}*/
+
+
 const isFun = (func) => {
   return typeof func === 'function'
 }
@@ -16,6 +22,6 @@ const isFun = (func) => {
 export {
   triggerEvent,
   inBrowser,
-  getComponentFormProp,
+  getComponentFromProp,
   isFun
 }