feat: add international language support for workplace page; :star2: 新增：工作台...

iczer

2020-06-24 fa3fa22f3c51ee2ded09460f34697d7914b7f702

feat: add international language support for workplace page; :star2:
新增：工作台页面增加国际化语言支持；

 src/mock/common/index.js

@@ -8,10 +8,23 @@
]

const positions = [
  'JAVA工程师 | 蚂蚁金服-计算服务事业群-微信平台部',
  '前端工程师 | 蚂蚁金服-计算服务事业群-VUE平台',
  '前端工程师 | 蚂蚁金服-计算服务事业群-REACT平台',
  '产品分析师 | 蚂蚁金服-计算服务事业群-IOS平台部'
  {
    CN: 'Java工程师 | 蚂蚁金服-计算服务事业群-微信平台部',
    HK: 'Java工程師 | 螞蟻金服-計算服務事業群-微信平台部',
    US: 'Java engineer | Ant financial - Computing services business group - WeChat platform division'
  },{
    CN: '前端工程师 | 蚂蚁金服-计算服务事业群-VUE平台',
    HK: '前端工程師 | 螞蟻金服-計算服務事業群-VUE平台',
    US: 'Front-end engineer | Ant Financial - Computing services business group - VUE platform'
  },{
    CN: '前端工程师 | 蚂蚁金服-计算服务事业群-REACT平台',
    HK: '前端工程師 | 螞蟻金服-計算服務事業群-REACT平台',
    US: 'Front-end engineer | Ant Financial - Computing services business group - REACT platform'
  },{
    CN: '产品分析师 | 蚂蚁金服-计算服务事业群-IOS平台部',
    HK: '產品分析師 | 螞蟻金服-計算服務事業群-IOS平台部',
    US: 'Product analyst | Ant Financial - Computing services business group - IOS platform division'
  }
]

const sayings = [

 src/mock/extend/index.js

@@ -3,17 +3,60 @@

const Random = Mock.Random

const timeList = [
  {
    CN: '早上好',
    HK: '早晨啊',
    US: 'Good morning',
  },{
    CN: '上午好',
    HK: '上午好',
    US: 'Good morning',
  },{
    CN: '中午好',
    HK: '中午好',
    US: 'Good afternoon',
  },{
    CN: '晚上好',
    HK: '晚上好',
    US: 'Good evening',
  },
]

const welcomeMessages = [
  {
    CN: '休息一会儿吧',
    HK: '休息一會兒吧',
    US: 'you may need a break',
  },
  {
    CN: '准备吃什么呢',
    HK: '準備吃什麼呢',
    US: 'what are you going to eat',
  },
  {
    CN: '要不要打一把 DOTA',
    HK: '要不要打一把 DOTA',
    US: 'how about a game of DOTA',
  },
  {
    CN: '我猜你可能累了',
    HK: '我猜你可能累了',
    US: 'i guess you might be tired',
  }
]

Random.extend({
  admin () {
    return this.pick(admins)
  },
  welcome () {
    return this.pick(['休息一会儿吧', '准备吃什么呢', '要不要打一把DOTA', '我猜你可能累了'])
    return this.pick(welcomeMessages)
  },
  timefix () {
  timeFix () {
    const time = new Date()
    const hour = time.getHours()
    return hour < 9 ? '早上好' : (hour <= 11 ? '上午好' : (hour <= 13 ? '中午好' : (hour <= 20 ? '下午好' : '晚上好')))
    return hour < 9 ? timeList[0] : (hour <= 11 ? timeList[1] : (hour <= 13 ? timeList[2] : (hour <= 20 ? timeList[3] : timeList[4])))
  },
  avatar () {
    return this.pick(avatars)

 src/mock/user/current.js

@@ -8,7 +8,7 @@
      avatar: '@AVATAR',
      address: '@CITY',
      welcome: '@WELCOME',
      timefix: '@TIMEFIX',
      timeFix: '@TIMEFIX',
      position: '@position'
    }
  ]

 src/mock/user/login.js

@@ -6,7 +6,7 @@
  avatar: '@AVATAR',
  address: '@CITY',
  welcome: '@WELCOME',
  timefix: '@TIMEFIX',
  timeFix: '@TIMEFIX',
  position: '@POSITION'
})


 src/pages/dashboard/workplace/WorkPlace.vue

File was renamed from src/pages/dashboard/WorkPlace.vue
@@ -1,19 +1,19 @@
<template>
  <page-layout :avatar="currUser.avatar">
    <div slot="headerContent">
      <div class="title">{{currUser.timefix}}，{{currUser.name}}，{{currUser.welcome}}</div>
      <div>{{currUser.position}}</div>
      <div class="title">{{$t('timeFix')}}，{{currUser.name}}，{{$t('welcome')}}</div>
      <div>{{$t('position')}}</div>
    </div>
    <template slot="extra">
      <head-info class="split-right" title="项目数" content="56"/>
      <head-info class="split-right" title="团队内排名" content="8/24"/>
      <head-info class="split-right" title="项目访问" content="2,223"/>
      <head-info class="split-right" :title="$t('project')" content="56"/>
      <head-info class="split-right" :title="$t('ranking')" content="8/24"/>
      <head-info class="split-right" :title="$t('visit')" content="2,223"/>
    </template>
    <div>
      <a-row style="margin: 0 -12px">
        <a-col style="padding: 0 12px" :xl="16" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card class="project-list" :loading="loading" style="margin-bottom: 24px;" :bordered="false" title="进行中的项目" :body-style="{padding: 0}">
            <a slot="extra">全部项目</a>
          <a-card class="project-list" :loading="loading" style="margin-bottom: 24px;" :bordered="false" :title="$t('progress')" :body-style="{padding: 0}">
            <a slot="extra">{{$t('all')}}</a>
            <div>
              <a-card-grid :key="i" v-for="(item, i) in projects">
                <a-card :bordered="false" :body-style="{padding: 0}">
@@ -31,7 +31,7 @@
              </a-card-grid>
            </div>
          </a-card>
          <a-card :loading="loading" title="动态" :bordered="false">
          <a-card :loading="loading" :title="$t('dynamic')" :bordered="false">
            <a-list>
              <a-list-item :key="index" v-for="(item, index) in activities">
                <a-list-item-meta>
@@ -44,7 +44,7 @@
          </a-card>
        </a-col>
        <a-col style="padding: 0 12px" :xl="8" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card title="快速开始 / 便捷导航" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
          <a-card :title="$t('access')" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
            <div class="item-group">
              <a>操作一</a>
              <a>操作二</a>
@@ -52,15 +52,15 @@
              <a>操作四</a>
              <a>操作五</a>
              <a>操作六</a>
              <a-button size="small" type="primary" ghost icon="plus">添加</a-button>
              <a-button size="small" type="primary" ghost icon="plus">{{$t('add')}}</a-button>
            </div>
          </a-card>
          <a-card title="XX指数" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
          <a-card :title="`XX ${$t('degree')}`" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
            <div style="min-height: 400px;">
              <radar />
            </div>
          </a-card>
          <a-card :loading="loading" title="团队" :bordered="false">
          <a-card :loading="loading" :title="$t('team')" :bordered="false">
            <div class="members">
              <a-row>
                <a-col :span="12" v-for="(item, index) in teams" :key="index">
@@ -79,13 +79,15 @@
</template>

<script>
import PageLayout from '../../layouts/PageLayout'
import HeadInfo from '../../components/tool/HeadInfo'
import Radar from '../../components/chart/Radar'
import PageLayout from '../../../layouts/PageLayout'
import HeadInfo from '../../../components/tool/HeadInfo'
import Radar from '../../../components/chart/Radar'
import {mapState} from 'vuex'

export default {
  name: 'WorkPlace',
  components: {Radar, HeadInfo, PageLayout},
  i18n: require('./i18n'),
  data () {
    return {
      projects: [],
@@ -94,10 +96,19 @@
      teams: []
    }
  },
  created() {
    let user = this.currUser
    let langList = ['CN', 'HK', 'US']
    langList.forEach(lang => {
      this.$i18n.mergeLocaleMessage(lang, {
        timeFix: user.timeFix[lang],
        welcome: user.welcome[lang],
        position: user.position[lang]
      })
    })
  },
  computed: {
    currUser () {
      return this.$store.state.account.user
    }
    ...mapState('account', {currUser: 'user'})
  },
  mounted () {
    this.getProjectList()

 src/pages/dashboard/workplace/i18n.js

New file
@@ -0,0 +1,40 @@
module.exports = {
  messages: {
    CN: {
      project: '项目数',
      ranking: '团队排名',
      visit: '项目访问',
      progress: '进行中的项目',
      all: '全部项目',
      access: '快速开始/便捷导航',
      dynamic: '动态',
      degree: '指数',
      team: '团队',
      add: '添加'
    },
    HK: {
      project: '項目數',
      ranking: '團隊排名',
      visit: '項目訪問',
      progress: '進行中的項目',
      all: '全部項目',
      access: '快速開始/便捷導航',
      dynamic: '動態',
      degree: '指數',
      team: '團隊',
      add: '添加'
    },
    US: {
      project: 'Project',
      ranking: 'Ranking',
      visit: 'Visit',
      progress: 'Projects in progress',
      all: 'All projects',
      access: 'Quick start / Easy navigation',
      dynamic: 'Dynamic',
      degree: 'degree',
      team: 'Team',
      add: 'Add'
    },
  }
}

 src/router/index.js

@@ -19,7 +19,7 @@
import ArticleList from '@/pages/list/search/ArticleList'
import ApplicationList from '@/pages/list/search/ApplicationList'
import ProjectList from '@/pages/list/search/ProjectList'
import WorkPlace from '@/pages/dashboard/WorkPlace'
import WorkPlace from '@/pages/dashboard/workplace/WorkPlace'
import Login from '@/pages/login/Login'
import BasicDetail from '@/pages/detail/BasicDetail'
import AdvancedDetail from '@/pages/detail/AdvancedDetail'

 src/router/lazy.js

@@ -32,7 +32,7 @@
            {
              path: 'workplace',
              name: '工作台',
              component: () => import('@/pages/dashboard/WorkPlace'),
              component: () => import('@/pages/dashboard/workplace/WorkPlace'),
            },
            {
              path: 'analysis',