feat: add page layout i18n language config. 增加页面布局的国际化语言配置

iczer

2020-06-23 2e90b7c6149959bd2fd9ae985442781d0d27b8a3

feat: add page layout i18n language config.
增加页面布局的国际化语言配置

 src/App.vue

@@ -1,15 +1,21 @@
<template>
  <div id="app">
  <a-config-provider :locale="locale">
    <router-view/>
  </div>
  </a-config-provider>
</template>

<script>
import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN'
import enquireScreen from './utils/device'
import {mapState} from 'vuex'

export default {
  name: 'App',
  data() {
    return {
      locale: zh_CN
    }
  },
  created () {
    let _this = this
    enquireScreen(isMobile => {
@@ -25,6 +31,18 @@
    },
    lang(val) {
      this.$i18n.locale = val
      switch (val) {
        case 'CN':
          this.locale = require('ant-design-vue/lib/locale-provider/zh_CN')
          break
        case 'HK':
          this.locale = require('ant-design-vue/lib/locale-provider/zh_TW')
          break
        case 'US':
        default:
          this.locale = require('ant-design-vue/lib/locale-provider/en_US')
          break
      }
    }
  },
  computed: {

 src/components/menu/SiderMenu.vue

@@ -6,12 +6,13 @@
        <h1>{{systemName}}</h1>
      </router-link>
    </div>
    <i-menu :i18n="menuI18n" :theme="theme" :collapsed="collapsed" :options="menuData" @select="onSelect" class="menu"/>
    <i-menu @i18nComplete="setRoutesI18n" :i18n="menuI18n" :theme="theme" :collapsed="collapsed" :options="menuData" @select="onSelect" class="menu"/>
  </a-layout-sider>
</template>

<script>
import IMenu from './menu'
import {mapState, mapMutations} from 'vuex'
export default {
  name: 'SiderMenu',
  components: {IMenu},
@@ -38,17 +39,13 @@
    }
  },
  computed: {
    isMobile () {
      return this.$store.state.setting.isMobile
    },
    systemName () {
      return this.$store.state.setting.systemName
    }
    ...mapState('setting', ['isMobile', 'systemName'])
  },
  methods: {
    onSelect (obj) {
      this.$emit('menuSelect', obj)
    }
    },
    ...mapMutations('setting', ['setRoutesI18n'])
  }
}
</script>

 src/components/menu/menu.js

@@ -87,6 +87,7 @@
        this.$i18n.mergeLocaleMessage(key, this.i18n[key])
      })
    }
    this.$emit('i18nComplete', this.$i18n._getMessages())
  },
  created () {
    this.updateMenu()

 src/components/page/PageHeader.vue

@@ -4,8 +4,8 @@
      <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">{{item.name}}</a></span>
            <span v-else>{{item.name}}</span>
            <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>
        </a-breadcrumb>
      </div>
@@ -46,7 +46,14 @@
    avatar: {
      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/GlobalHeader.vue

@@ -8,7 +8,7 @@
      <a-divider v-if="isMobile" type="vertical" />
      <a-icon v-if="layout === 'side'" class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggleCollapse"/>
      <div v-if="layout == 'head' && !isMobile" class="global-header-menu">
        <i-menu style="height: 64px; line-height: 64px;" :i18n="menuI18n" :theme="headerTheme" mode="horizontal" :options="menuData" @select="onSelect"/>
        <i-menu style="height: 64px; line-height: 64px;" @i18nComplete="setRoutesI18n" :i18n="menuI18n" :theme="headerTheme" mode="horizontal" :options="menuData" @select="onSelect"/>
      </div>
      <div :class="['global-header-right', headerTheme]">
          <header-search class="header-item" />
@@ -23,7 +23,7 @@
            <div>
              <a-icon type="global"/>
            </div>
            <a-menu @click="changeLang" :selected-keys="[lang]" slot="overlay">
            <a-menu @click="value => setLang(value.key)" :selected-keys="[lang]" slot="overlay">
              <a-menu-item key="CN"><span >cn</span> 简体中文</a-menu-item>
              <a-menu-item key="HK"><span >hk</span> 繁体中文</a-menu-item>
              <a-menu-item key="US"><span >us</span> English</a-menu-item>
@@ -39,7 +39,7 @@
import HeaderNotice from './HeaderNotice'
import HeaderAvatar from './HeaderlAvatar'
import IMenu from '../components/menu/menu'
import {mapState} from 'vuex'
import {mapState, mapMutations} from 'vuex'

export default {
  name: 'GlobalHeader',
@@ -64,9 +64,7 @@
    onSelect (obj) {
      this.$emit('menuSelect', obj)
    },
    changeLang(lang) {
      this.$store.commit('setting/setLang', lang.key)
    }
    ...mapMutations('setting', ['setLang', 'setRoutesI18n'])
  }
}
</script>

 src/layouts/PageLayout.vue

@@ -1,10 +1,10 @@
<template>
  <div class="page-layout">
    <page-header :breadcrumb="breadcrumb" :title="title" :logo="logo" :avatar="avatar">
    <page-header :i18n="routesI18n" :breadcrumb="breadcrumb" :title="title" :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">
        <p style="font-size: 14px;line-height: 1.5;color: rgba(0,0,0,.65)">{{desc}}</p>
        <p>{{desc}}</p>
        <div v-if="this.linkList" class="link">
          <template  v-for="(link, index) in linkList">
            <a :key="index" :href="link.href"><a-icon :type="link.icon" />{{link.title}}</a>
@@ -21,6 +21,7 @@

<script>
import PageHeader from '../components/page/PageHeader'
import {mapState} from 'vuex'
export default {
  name: 'PageLayout',
  components: {PageHeader},
@@ -31,11 +32,9 @@
    }
  },
  computed: {
    layout () {
      return this.$store.state.setting.layout
    }
    ...mapState('setting', ['layout', 'routesI18n'])
  },
  mounted () {
  created () {
    this.getBreadcrumb()
  },
  updated () {
@@ -44,7 +43,7 @@
  methods: {
    getBreadcrumb () {
      this.breadcrumb = this.$route.matched
    }
    },
  }
}
</script>

 src/layouts/PageView.vue

@@ -22,14 +22,24 @@
  components: {PageToggleTransition, PageLayout},
  data () {
    return {
      title: '',
      path: '',
      desc: '',
      linkList: [],
      extraImage: ''
    }
  },
  computed: {
    ...mapState('setting', ['multiPage', 'animate'])
    title() {
      let key = this.path.substring(1).replace(new RegExp('/', 'g'), '.') + '.name'
      return this.$t(key)
    },
    ...mapState('setting', ['multiPage', 'animate', 'routesI18n'])
  },
  created() {
    let i18n = this.routesI18n
    Object.keys(i18n).forEach(key => {
      this.$i18n.mergeLocaleMessage(key, i18n[key])
    })
  },
  mounted () {
    this.getPageHeaderInfo()
@@ -39,7 +49,7 @@
  },
  methods: {
    getPageHeaderInfo () {
      this.title = this.$route.name
      this.path = this.$route.path
      const page = this.$refs.page
      if (page) {
        this.desc = page.desc

 src/router/i18n.js

@@ -1,5 +1,12 @@
export default {
  CN: {
    home: {name: '首页'},
  },
  US: {
    home: {name: 'home'},
  },
  HK: {
    home: {name: '首頁'},
    dashboard: {
      name: 'Dashboard',
      workplace: {name: '工作台'},

 src/store/modules/setting.js

@@ -4,7 +4,8 @@
  state: {
    isMobile: false,
    animates: require('@/config/animates'),
    ...config
    ...config,
    routesI18n: {}
  },
  mutations: {
    setDevice (state, isMobile) {
@@ -36,6 +37,9 @@
    },
    setLang(state, lang) {
      state.lang = lang
    },
    setRoutesI18n(state, i18n) {
      state.routesI18n = i18n
    }
  }
}