fix: PageHeaderWrapper @back event

examples/src/config/router.config.js

 // eslint-disable-next-line
 import BasicLayout from '../layouts/BasicLayout'
 
-const renderRouterView = {
+const RouteView = {
+  name: 'RouteView',
   render: (h) => h('router-view')
 }
 
@@ -18,7 +19,7 @@ const asyncRouterMap = [
         name: 'dashboard',
         meta: { keepAlive: true, title: 'menu.dashboard.default', icon: 'dashboard' },
         redirect: '/dashboard/analysis',
-        component: renderRouterView,
+        component: RouteView,
         children: [
           {
             path: '/dashboard/analysis',
@@ -28,7 +29,7 @@ const asyncRouterMap = [
               icon: 'smile',
               title: 'menu.dashboard.analysis'
             },
-            component: () => import(/* webpackChunkName: "about" */ '../views/BlockPage')
+            component: () => import(/* webpackChunkName: "dashboard" */ '../views/dashboard/analysis')
           },
           {
             path: '/dashboard/workplace/:id?',
@@ -39,7 +40,7 @@ const asyncRouterMap = [
               icon: 'smile',
               title: 'menu.dashboard.workplace'
             },
-            component: () => import(/* webpackChunkName: "about" */ '../views/TestPage')
+            component: () => import(/* webpackChunkName: "dashboard" */ '../views/TestPage')
           }
         ]
       },
@@ -51,7 +52,7 @@ const asyncRouterMap = [
           title: 'menu.form.default',
           icon: 'video-camera'
         },
-        component: renderRouterView,
+        component: RouteView,
         children: [
           {
             path: '/form/basic-form',

examples/src/core/antd/lazyload.js

@@ -9,7 +9,7 @@
  */
 import Vue from 'vue'
 import {
-  LocaleProvider,
+  ConfigProvider,
   Layout,
   Input,
   InputNumber,
@@ -50,7 +50,7 @@ import {
   notification
 } from 'ant-design-vue'
 
-Vue.use(LocaleProvider)
+Vue.use(ConfigProvider)
 Vue.use(Layout)
 Vue.use(Input)
 Vue.use(InputNumber)

examples/src/layouts/BasicLayout.jsx

 import './BasicLayout.less'
 
-import { Avatar, Dropdown, Menu, Icon } from 'ant-design-vue'
+import { Avatar, Dropdown, Menu, Icon, Modal } from 'ant-design-vue'
 import { asyncRouterMap } from '../config/router.config.js'
 import { i18nRender } from '../locales'
 import ProLayout, { GlobalFooter } from '@ant-design-vue/pro-layout'
@@ -20,7 +20,18 @@ const Account = {
           <Icon type={'setting'} />个人设置
         </Menu.Item>
         <Menu.Divider />
-        <Menu.Item key="logout">
+        <Menu.Item key="logout" onClick={() => {
+          Modal.confirm({
+            title: i18nRender('layouts.usermenu.dialog.title'),
+            content: i18nRender('layouts.usermenu.dialog.content'),
+            onOk: () => {
+              return new Promise((resolve, reject) => {
+                setTimeout(Math.random() > 0.5 ? resolve : reject, 1500)
+              }).catch(() => console.log('Oops errors!'))
+            },
+            onCancel () {}
+          })
+        }}>
           <Icon type={'logout'} />退出登录
         </Menu.Item>
       </Menu>

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

@@ -3,7 +3,12 @@ export default {
     lang: 'Language'
   },
   layouts: {
-
+    usermenu: {
+      dialog: {
+        title: 'Log-out',
+        content: 'Do you want log-out?'
+      }
+    }
   },
   menu: {
     home: 'Home',
@@ -29,7 +34,12 @@ export default {
         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.'
+        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.',
+        tabs: {
+          tab1: 'Tab1',
+          tab2: 'Tab2',
+          tab3: 'Tab3'
+        }
       }
     }
   }

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

@@ -3,7 +3,12 @@ export default {
     lang: '语言'
   },
   layouts: {
-
+    usermenu: {
+      dialog: {
+        title: '注销',
+        content: '要注销账户吗?'
+      }
+    }
   },
   menu: {
     home: '首页',
@@ -29,7 +34,12 @@ export default {
         headers: {
           btn1: '按钮1'
         },
-        content: '表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。'
+        content: '表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。',
+        tabs: {
+          tab1: '标签1',
+          tab2: '标签2',
+          tab3: '标签3'
+        }
       }
     }
   }

examples/src/views/BlockPage.vue

@@ -6,12 +6,18 @@
       this.tabActiveKey = key
       console.log('PageHeader::tabChange', key)
     }"
-    :breadcrumb="false"
+    @back="() => {
+      console.log('PageHeader::@back')
+    }"
+    :back="() => {
+      // 自定义 back，不会覆盖 onBack 事件
+      console.log('PageHeader::.back')
+    }"
   >
-    <template slot="content">
+    <template v-slot:content>
       <span>{{ $t('pages.form.basicform.content') }}</span>
     </template>
-    <template slot="extraContent">
+    <template v-slot:extraContent>
       <div><a-button>{{ $t('pages.form.basicform.headers.btn1') }}</a-button></div>
     </template>
     <div>
@@ -27,9 +33,9 @@ export default {
     return {
       console: window.console,
       tabList: [
-        { tab: 'Tab1', key: 'tab1' },
-        { tab: 'Tab2', key: 'tab2' },
-        { tab: 'Tab3', key: 'tab3' }
+        { tab: 'pages.form.basicform.tabs.tab1', key: 'tab1' },
+        { tab: 'pages.form.basicform.tabs.tab2', key: 'tab2' },
+        { tab: 'pages.form.basicform.tabs.tab3', key: 'tab3' }
       ],
       tabActiveKey: 'tab1'
     }

examples/src/views/dashboard/analysis.vue

+<template>
+  <page-header-wrapper
+    :tab-list="tabList"
+    :tab-active-key="tabActiveKey"
+    :tab-change="(key) => {
+      this.tabActiveKey = key
+      console.log('PageHeader::tabChange', key)
+    }"
+    @back="() => {
+      console.log('PageHeader::@back')
+    }"
+    :back="() => {
+      // 自定义 back，不会覆盖 onBack 事件
+      console.log('PageHeader::.back')
+    }"
+  >
+    <template v-slot:content>
+      <span>{{ $t('pages.dashboard.analysis.content') }}</span>
+    </template>
+    <div>
+      <strong>Analysis Page</strong>
+    </div>
+  </page-header-wrapper>
+</template>
+
+<script>
+export default {
+  name: 'Analysis',
+  data () {
+    return {
+      console: window.console,
+      tabList: [
+        { tab: 'pages.form.basicform.tabs.tab1', key: 'tab1' },
+        { tab: 'pages.form.basicform.tabs.tab2', key: 'tab2' },
+        { tab: 'pages.form.basicform.tabs.tab3', key: 'tab3' }
+      ],
+      tabActiveKey: 'tab1'
+    }
+  },
+  methods: {
+    handleTabChange (key) {
+      this.tabActiveKey = key
+      console.log('PageHeader::tabChange', key)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/PageHeaderWrapper/index.jsx

@@ -3,6 +3,7 @@ import './index.less'
 import PropTypes from 'ant-design-vue/es/_util/vue-types'
 import GridContent from '../GridContent'
 import { PageHeader, Tabs } from 'ant-design-vue'
+import { getComponentFromProp } from 'ant-design-vue/lib/_util/props-util'
 
 const { PageHeaderProps } = PageHeader
 
@@ -22,7 +23,8 @@ const PageHeaderWrapperProps = {
   content: PropTypes.any,
   extraContent: PropTypes.any,
   pageHeaderRender: PropTypes.func,
-  breadcrumb: PropTypes.oneOf([PropTypes.object, false]),
+  breadcrumb: PropTypes.oneOf([PropTypes.object, PropTypes.bool]).def(true),
+  back: PropTypes.func,
 
   // 包装 pro-layout 才能使用
   i18nRender: PropTypes.any
@@ -36,7 +38,7 @@ const useContext = (route) => {
   } || null
 }
 
-const renderFooter = (h, tabConfigProps) => {
+const renderFooter = (h, tabConfigProps, i18nRender) => {
   const {
     tabList,
     tabActiveKey,
@@ -57,7 +59,7 @@ const renderFooter = (h, tabConfigProps) => {
       {...tabProps}
     >
       {tabList.map(item => (
-        <Tabs.TabPane {...item} tab={item.tab} key={item.key} />
+        <Tabs.TabPane {...item} tab={i18nRender(item.tab)} key={item.key} />
       ))}
     </Tabs>
   )
@@ -85,29 +87,30 @@ const renderPageHeader = (h, content, extraContent) => {
   )
 }
 
-const defaultPageHeaderRender = (h, props, value, i18nRender) => {
+const defaultPageHeaderRender = (h, props, pageMeta, i18nRender) => {
   const {
     title,
     content,
     pageHeaderRender,
     extraContent,
     breadcrumb,
+    back: handleBack,
     ...restProps
   } = props
   if (pageHeaderRender) {
     return pageHeaderRender({ ...props })
   }
   let pageHeaderTitle = title
-  if ((!title && title !== false) || value.title !== false) {
-    pageHeaderTitle = value.title
+  if ((!title && title !== false) || pageMeta.title !== false) {
+    pageHeaderTitle = pageMeta.title
   }
   return (
     <PageHeader
       title={i18nRender(pageHeaderTitle)}
       breadcrumb={breadcrumb}
       {...props}
-      onBack={() => null}
-      footer={renderFooter(h, restProps)}
+      onBack={handleBack}
+      footer={renderFooter(h, restProps, i18nRender)}
       >
       {renderPageHeader(h, content, extraContent)}
     </PageHeader>
@@ -121,11 +124,17 @@ const PageHeaderWrapper = {
   inject: ['locale'],
   render (h) {
     const children = this.$slots.default
-    const content = this.$slots.content
-    const extraContent = this.$slots.extraContent
+    const content = getComponentFromProp(this, 'content')
+    const extraContent = getComponentFromProp(this, 'extraContent')
 
-    const value = useContext(this.$props.route || this.$route)
+    const pageMeta = useContext(this.$props.route || this.$route)
     const i18n = this.$props.i18nRender || this.locale || defaultI18nRender
+    const onBack = this.$props.back
+    const back = () => {
+      this.$emit('back')
+      // call props back func
+      onBack && onBack()
+    }
 
     const propsBreadcrumb = this.$props.breadcrumb
     let breadcrumb = {}
@@ -139,17 +148,20 @@ const PageHeaderWrapper = {
       breadcrumb = { props: { routes }}
     }
 
+    console.log('breadcrumb', breadcrumb)
+
     const props = {
       ...this.$props,
       content,
       extraContent,
-      breadcrumb
+      breadcrumb,
+      back
     }
 
     return (
       <div class="ant-pro-page-header-wrap">
         <div class={`${prefixedClassName}-page-header-warp`}>
-          <GridContent>{defaultPageHeaderRender(h, props, value, i18n)}</GridContent>
+          <GridContent>{defaultPageHeaderRender(h, props, pageMeta, i18n)}</GridContent>
         </div>
         { children ? (
           <GridContent>