feat: add international language support for workplace page; 🌟

新增：工作台页面增加国际化语言支持；

src/mock/common/index.js

@@ -8,10 +8,23 @@ const avatars = [
 ]
 
 const positions = [
-  'JAVA工程师 | 蚂蚁金服-计算服务事业群-微信平台部',
+  {
-  '前端工程师 | 蚂蚁金服-计算服务事业群-VUE平台',
+    CN: 'Java工程师 | 蚂蚁金服-计算服务事业群-微信平台部',
-  '前端工程师 | 蚂蚁金服-计算服务事业群-REACT平台',
+    HK: 'Java工程師 | 螞蟻金服-計算服務事業群-微信平台部',
-  '产品分析师 | 蚂蚁金服-计算服务事业群-IOS平台部'
+    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 @@ import {logos, sayings, positions, avatars, admins} from '../common'
 
 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 @@ const userDB = Mock.mock({
       avatar: '@AVATAR',
       address: '@CITY',
       welcome: '@WELCOME',
-      timefix: '@TIMEFIX',
+      timeFix: '@TIMEFIX',
       position: '@position'
     }
   ]

src/mock/user/login.js

@@ -6,7 +6,7 @@ const user = Mock.mock({
   avatar: '@AVATAR',
   address: '@CITY',
   welcome: '@WELCOME',
-  timefix: '@TIMEFIX',
+  timeFix: '@TIMEFIX',
   position: '@POSITION'
 })
 

src/pages/dashboard/workplace/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 class="title">{{$t('timeFix')}}，{{currUser.name}}，{{$t('welcome')}}</div>
-      <div>{{currUser.position}}</div>
+      <div>{{$t('position')}}</div>
     </div>
     <template slot="extra">
-      <head-info class="split-right" title="项目数" content="56"/>
+      <head-info class="split-right" :title="$t('project')" content="56"/>
-      <head-info class="split-right" title="团队内排名" content="8/24"/>
+      <head-info class="split-right" :title="$t('ranking')" content="8/24"/>
-      <head-info class="split-right" title="项目访问" content="2,223"/>
+      <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-card class="project-list" :loading="loading" style="margin-bottom: 24px;" :bordered="false" :title="$t('progress')" :body-style="{padding: 0}">
-            <a slot="extra">全部项目</a>
+            <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 PageLayout from '../../../layouts/PageLayout'
-import HeadInfo from '../../components/tool/HeadInfo'
+import HeadInfo from '../../../components/tool/HeadInfo'
-import Radar from '../../components/chart/Radar'
+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 @@ export default {
       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 () {
+    ...mapState('account', {currUser: 'user'})
-      return this.$store.state.account.user
-    }
   },
   mounted () {
     this.getProjectList()

src/pages/dashboard/workplace/i18n.js

@@ -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 SearchLayout from '@/pages/list/search/SearchLayout'
 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 @@ export default new Router({
             {
               path: 'workplace',
               name: '工作台',
-              component: () => import('@/pages/dashboard/WorkPlace'),
+              component: () => import('@/pages/dashboard/workplace/WorkPlace'),
             },
             {
               path: 'analysis',