feat: add international language support for workplace page; 🌟

新增:工作台页面增加国际化语言支持;
master
iczer 5 years ago
parent ff4364262d
commit fa3fa22f3c
  1. 21
      src/mock/common/index.js
  2. 49
      src/mock/extend/index.js
  3. 2
      src/mock/user/current.js
  4. 2
      src/mock/user/login.js
  5. 47
      src/pages/dashboard/workplace/WorkPlace.vue
  6. 40
      src/pages/dashboard/workplace/i18n.js
  7. 2
      src/router/index.js
  8. 2
      src/router/lazy.js

@ -8,10 +8,23 @@ const avatars = [
]
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 = [

@ -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)

@ -8,7 +8,7 @@ const userDB = Mock.mock({
avatar: '@AVATAR',
address: '@CITY',
welcome: '@WELCOME',
timefix: '@TIMEFIX',
timeFix: '@TIMEFIX',
position: '@position'
}
]

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

@ -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 @@ 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 () {
return this.$store.state.account.user
}
...mapState('account', {currUser: 'user'})
},
mounted () {
this.getProjectList()

@ -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'
},
}
}

@ -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'

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

Loading…
Cancel
Save