chore: modify the i18n implementation logic of PageLayout component :star2:

iczer

2020-06-30 112f862988109250cd5d2f160f3d1ecfab8ffd3b

chore: modify the i18n implementation logic of PageLayout component :star2:

 src/components/menu/menu.js

@@ -3,7 +3,7 @@
 * menuOptions示例：
 * [
 *  {
 *    title: '菜单标题',
 *    name: '菜单名称',
 *    path: '菜单路由',
 *    meta: {
 *      icon: '菜单图标',
@@ -12,7 +12,7 @@
 *    children: [子菜单配置]
 *  },
 *  {
 *    title: '菜单标题',
 *    name: '菜单名称',
 *    path: '菜单路由',
 *    meta: {
 *      icon: '菜单图标',
@@ -37,8 +37,6 @@

export default {
  name: 'IMenu',
  i18n: {
  },
  props: {
    options: {
      type: Array,

 src/components/page/PageHeader.vue

@@ -3,9 +3,8 @@
    <div :class="['page-header-wide', layout]">
      <div class="breadcrumb">
        <a-breadcrumb>
          <a-breadcrumb-item :key="item.path" v-for="(item, index) in breadcrumb">
            <span v-if="index === 0"><a href="#/dashboard/workplace">{{$t('home.name')}}</a></span>
            <span v-else>{{$t(item.path.substring(1).replace(new RegExp('/', 'g'), '.') + '.name')}}</span>
          <a-breadcrumb-item :key="index" v-for="(item, index) in breadcrumb">
            <span>{{item}}</span>
          </a-breadcrumb-item>
        </a-breadcrumb>
      </div>
@@ -48,13 +47,6 @@
      type: String,
      required: false
    },
    i18n: Object
  },
  created() {
    let i18n = this.i18n
    Object.keys(i18n).forEach(key => {
      this.$i18n.mergeLocaleMessage(key, i18n[key])
    })
  },
  computed: {
    layout () {

 src/layouts/PageLayout.vue

@@ -1,6 +1,6 @@
<template>
  <div class="page-layout">
    <page-header :i18n="routesI18n" :breadcrumb="breadcrumb" :title="title" :logo="logo" :avatar="avatar">
    <page-header :i18n="routesI18n" :breadcrumb="breadcrumb" :title="pageTitle" :logo="logo" :avatar="avatar">
      <slot name="action"  slot="action"></slot>
      <slot slot="content" name="headerContent"></slot>
      <div slot="content" v-if="!this.$slots.headerContent && desc">
@@ -28,22 +28,55 @@
  props: ['desc', 'logo', 'title', 'avatar', 'linkList', 'extraImage'],
  data () {
    return {
      breadcrumb: []
      page: {}
    }
  },
  watch: {
    $route() {
      this.page = this.$route.meta.page
    }
  },
  created() {
    let i18n = this.routesI18n
    Object.keys(i18n).forEach(key => {
      this.$i18n.mergeLocaleMessage(key, i18n[key])
    })
    this.page = this.$route.meta.page
  },
  computed: {
    ...mapState('setting', ['layout', 'routesI18n'])
  },
  created () {
    this.getBreadcrumb()
  },
  updated () {
    this.getBreadcrumb()
    ...mapState('setting', ['layout', 'routesI18n']),
    pageTitle() {
      let pageTitle = this.page && this.page.title
      return this.title || this.$t(pageTitle) || this.routeName
    },
    routeName() {
      return this.$t(this.$route.path.substring(1).replace(new RegExp('/', 'g'), '.') + '.name')
    },
    breadcrumb() {
      let page = this.page
      let breadcrumb = page && page.breadcrumb
      if (breadcrumb) {
        let i18nBreadcrumb = []
        breadcrumb.forEach(item => {
          i18nBreadcrumb.push(this.$t(item))
        })
        return i18nBreadcrumb
      } else {
        return this.getRouteBreadcrumb()
      }
    }
  },
  methods: {
    getBreadcrumb () {
      this.breadcrumb = this.$route.matched
    },
    getRouteBreadcrumb() {
      let routes = this.$route.matched
      let breadcrumb = []
      routes.forEach(route => {
        let path = route.path
        let key = path.length == 0 ? '/home' : path
        breadcrumb.push(this.$t(key.substring(1).replace(new RegExp('/', 'g'), '.') + '.name'))
      })
      return breadcrumb
    }
  }
}
</script>

 src/layouts/PageView.vue

@@ -1,5 +1,5 @@
<template>
  <page-layout :desc="desc" :title="title" :linkList="linkList">
  <page-layout :desc="desc" :linkList="linkList">
    <div v-if="this.extraImage && !isMobile" slot="extra" class="extraImg">
      <img :src="extraImage"/>
    </div>
@@ -22,41 +22,26 @@
  components: {PageToggleTransition, PageLayout},
  data () {
    return {
      path: '',
      desc: '',
      linkList: [],
      extraImage: ''
      page: {}
    }
  },
  computed: {
    title() {
      let key = this.path.substring(1).replace(new RegExp('/', 'g'), '.') + '.name'
      return this.$t(key)
    ...mapState('setting', ['isMobile', 'multiPage', 'animate', 'routesI18n']),
    desc() {
      return this.page.desc
    },
    ...mapState('setting', ['isMobile', 'multiPage', 'animate', 'routesI18n'])
  },
  created() {
    let i18n = this.routesI18n
    Object.keys(i18n).forEach(key => {
      this.$i18n.mergeLocaleMessage(key, i18n[key])
    })
    linkList() {
      return this.page.linkList
    },
    extraImage() {
      return this.page.extraImage
    }
  },
  mounted () {
    this.getPageHeaderInfo()
    this.page = this.$refs.page
  },
  updated () {
    this.getPageHeaderInfo()
  },
  methods: {
    getPageHeaderInfo () {
      this.path = this.$route.path
      const page = this.$refs.page
      if (page) {
        this.desc = page.desc
        this.linkList = page.linkList
        this.extraImage = page.extraImage
      }
    }
    this.page = this.$refs.page
  }
}
</script>

 src/router/index.js

@@ -12,8 +12,7 @@
    {
      path: '/login',
      name: '登录页',
      component: Login,
      invisible: true
      component: Login
    },
    {
      path: '/',