Skip to content

Commit 1b0202a

Browse files
msgill2017sendya
msgill2017
authored and
sendya
committed
refactor userlayout and view-user from hard-coded to language support
1 parent 051188f commit 1b0202a

File tree

7 files changed

+143
-29
lines changed

7 files changed

+143
-29
lines changed

‎src/layouts/UserLayout.vue‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
<template>
2+
23
<div id="userLayout" :class="['user-layout-wrapper', isMobile && 'mobile']">
34
<div class="container">
5+
<div :class="wrpCls">
6+
<select-lang :class="prefixCls" />
7+
</div>
48
<div class="top">
59
<div class="header">
610
<a href="/">
@@ -31,9 +35,27 @@
3135

3236
<script>
3337
import { deviceMixin } from '@/store/device-mixin'
38+
import SelectLang from '@/components/SelectLang'
3439
3540
export default {
3641
name: 'UserLayout',
42+
components: {
43+
SelectLang
44+
},
45+
props: {
46+
prefixCls: {
47+
type: String,
48+
default: 'ant-pro-global-header-index-action'
49+
}
50+
},
51+
computed: {
52+
wrpCls () {
53+
return {
54+
'ant-pro-global-header-index-right': true,
55+
[`ant-pro-global-header-index-${(this.isMobile || !this.topMenu) ? 'light' : this.theme}`]: true
56+
}
57+
}
58+
},
3759
mixins: [deviceMixin],
3860
mounted () {
3961
document.body.classList.add('userLayout')
@@ -62,7 +84,7 @@ export default {
6284
min-height: 100%;
6385
background: #f0f2f5 url(~@/assets/background.svg) no-repeat 50%;
6486
background-size: 100%;
65-
padding: 110px 0 144px;
87+
padding: 110px 0 84px;
6688
position: relative;
6789
6890
a {

‎src/locales/lang/en-US.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import global from './en-US/global'
44

55
import menu from './en-US/menu'
66
import setting from './en-US/setting'
7+
import user from './en-US/user'
8+
79
import dashboard from './en-US/dashboard'
810
import form from './en-US/form'
911
import result from './en-US/result'
@@ -25,6 +27,7 @@ export default {
2527
...global,
2628
...menu,
2729
...setting,
30+
...user,
2831
...dashboard,
2932
...form,
3033
...result,

‎src/locales/lang/en-US/user.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
export default {
2+
'user.login.userName': 'userName',
3+
'user.login.password': 'password',
4+
'user.login.username.placeholder': 'Account: admin',
5+
'user.login.password.placeholder': 'password: admin or ant.design',
6+
'user.login.message-invalid-credentials':
7+
'Invalid username or password（admin/ant.design）',
8+
'user.login.message-invalid-verification-code': 'Invalid verification code',
9+
'user.login.tab-login-credentials': 'Credentials',
10+
'user.login.tab-login-mobile': 'Mobile number',
11+
'user.login.mobile.placeholder': 'Mobile number',
12+
'user.login.mobile.verification-code.placeholder': 'Verification code',
13+
'user.login.remember-me': 'Remember me',
14+
'user.login.forgot-password': 'Forgot your password?',
15+
'user.login.sign-in-with': 'Sign in with',
16+
'user.login.signup': 'Sign up',
17+
'user.login.login': 'Login',
18+
'user.register.register': 'Register',
19+
'user.register.email.placeholder': 'Email',
20+
'user.register.password.placeholder': 'Password ',
21+
'user.register.password.popover-message': 'Please enter at least 6 characters. Please do not use passwords that are easy to guess. ',
22+
'user.register.confirm-password.placeholder': 'Confirm password',
23+
'user.register.get-verification-code': 'Get code',
24+
'user.register.sign-in': 'Already have an account?',
25+
'user.register-result.msg': 'Account：registered at {email}',
26+
'user.register-result.activation-email':
27+
'The activation email has been sent to your email address and is valid for 24 hours. Please log in to the email in time and click on the link in the email to activate the account.',
28+
'user.register-result.back-home': 'Back to home',
29+
'user.register-result.view-mailbox': 'View mailbox',
30+
'user.email.required': 'Please enter your email!',
31+
'user.email.wrong-format': 'The email address is in the wrong format!',
32+
'user.userName.required': 'Please enter account name or email address',
33+
'user.password.required': 'Please enter your password!',
34+
'user.password.twice': 'The passwords entered twice do not match!',
35+
'user.strength.msg':
36+
"Please enter at least 6 characters and don't use passwords that are easy to guess.",
37+
'user.strength.strong': 'Strength: strong',
38+
'user.strength.medium': 'Strength: medium',
39+
'user.strength.short': 'Strength: too short',
40+
'user.confirm-password.required': 'Please confirm your password!',
41+
'user.phone-number.required': 'Please enter your phone number!',
42+
'user.phone-number.wrong-format': 'Please enter a valid phone number',
43+
'user.verification-code.required': 'Please enter the verification code!'
44+
}

‎src/locales/lang/zh-CN.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import momentCN from 'moment/locale/zh-cn'
33
import global from './zh-CN/global'
44

55
import menu from './zh-CN/menu'
6+
import user from './zh-CN/user'
67
import dashboard from './zh-CN/dashboard'
78
import form from './zh-CN/form'
89
import result from './zh-CN/result'
@@ -23,6 +24,7 @@ export default {
2324
...components,
2425
...global,
2526
...menu,
27+
...user,
2628
...dashboard,
2729
...form,
2830
...result,

‎src/locales/lang/zh-CN/user.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
export default {
2+
'user.login.userName': '用户名',
3+
'user.login.password': '密码',
4+
'user.login.username.placeholder': '账户: admin',
5+
'user.login.password.placeholder': '密码: admin or ant.design',
6+
'user.login.message-invalid-credentials': '账户或密码错误（admin/ant.design）',
7+
'user.login.message-invalid-verification-code': '验证码错误',
8+
'user.login.tab-login-credentials': '账户密码登录',
9+
'user.login.tab-login-mobile': '手机号登录',
10+
'user.login.mobile.placeholder': '手机号',
11+
'user.login.mobile.verification-code.placeholder': '验证码',
12+
'user.login.remember-me': '自动登录',
13+
'user.login.forgot-password': '忘记密码',
14+
'user.login.sign-in-with': '其他登录方式',
15+
'user.login.signup': '注册账户',
16+
'user.login.login': '登录',
17+
'user.register.register': '注册',
18+
'user.register.email.placeholder': '邮箱',
19+
'user.register.password.placeholder': '请至少输入 6 个字符。请不要使用容易被猜到的密码。',
20+
'user.register.password.popover-message': '请至少输入 6 个字符。请不要使用容易被猜到的密码。',
21+
'user.register.confirm-password.placeholder': '确认密码',
22+
'user.register.get-verification-code': '获取验证码',
23+
'user.register.sign-in': '使用已有账户登录',
24+
'user.register-result.msg': '你的账户：{email} 注册成功',
25+
'user.register-result.activation-email':
26+
'激活邮件已发送到你的邮箱中，邮件有效期为24小时。请及时登录邮箱，点击邮件中的链接激活帐户。',
27+
'user.register-result.back-home': '返回首页',
28+
'user.register-result.view-mailbox': '查看邮箱',
29+
'user.email.required': '请输入邮箱地址！',
30+
'user.email.wrong-format': '邮箱地址格式错误！',
31+
'user.userName.required': '请输入帐户名或邮箱地址',
32+
'user.password.required': '请输入密码！',
33+
'user.password.twice': '两次输入的密码不匹配!',
34+
'user.strength.msg': '请至少输入 6 个字符。请不要使用容易被猜到的密码。',
35+
'user.strength.strong': '强度：强',
36+
'user.strength.medium': '强度：中',
37+
'user.strength.short': '强度：太短',
38+
'user.confirm-password.required': '请确认密码！',
39+
'user.phone-number.required': '请输入正确的手机号',
40+
'user.phone-number.wrong-format': '手机号格式错误！',
41+
'user.verification-code.required': '请输入验证码！'
42+
}

‎src/views/user/Login.vue‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,16 @@
1212
:tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"
1313
@change="handleTabClick"
1414
>
15-
<a-tab-pane key="tab1" tab="账号密码登录">
16-
<a-alert v-if="isLoginError" type="error" showIcon style="margin-bottom: 24px;" message="账户或密码错误（admin/ant.design )" />
15+
<a-tab-pane key="tab1" :tab="$t('user.login.tab-login-credentials')">
16+
<a-alert v-if="isLoginError" type="error" showIcon style="margin-bottom: 24px;" :message="$t('user.login.message-invalid-credentials')" />
1717
<a-form-item>
1818
<a-input
1919
size="large"
2020
type="text"
21-
placeholder="账户: admin"
21+
:placeholder="$t('user.login.username.placeholder')"
2222
v-decorator="[
2323
'username',
24-
{rules: [{ required: true, message: '请输入帐户名或邮箱地址' }, { validator: handleUsernameOrEmail }], validateTrigger: 'change'}
24+
{rules: [{ required: true, message: $t('user.userName.required') }, { validator: handleUsernameOrEmail }], validateTrigger: 'change'}
2525
]"
2626
>
2727
<a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
@@ -31,27 +31,27 @@
3131
<a-form-item>
3232
<a-input-password
3333
size="large"
34-
placeholder="密码: admin or ant.design"
34+
:placeholder="$t('user.login.password.placeholder')"
3535
v-decorator="[
3636
'password',
37-
{rules: [{ required: true, message: '请输入密码' }], validateTrigger: 'blur'}
37+
{rules: [{ required: true, message: $t('user.password.required') }], validateTrigger: 'blur'}
3838
]"
3939
>
4040
<a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
4141
</a-input-password>
4242
</a-form-item>
4343
</a-tab-pane>
44-
<a-tab-pane key="tab2" tab="手机号登录">
44+
<a-tab-pane key="tab2" :tab="$t('user.login.tab-login-mobile')">
4545
<a-form-item>
46-
<a-input size="large" type="text" placeholder="手机号" v-decorator="['mobile', {rules: [{ required: true, pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号' }], validateTrigger: 'change'}]">
46+
<a-input size="large" type="text" :placeholder="$t('user.login.mobile.placeholder')" v-decorator="['mobile', {rules: [{ required: true, pattern: /^1[34578]\d{9}$/, message: $t('user.login.mobile.placeholder') }], validateTrigger: 'change'}]">
4747
<a-icon slot="prefix" type="mobile" :style="{ color: 'rgba(0,0,0,.25)' }"/>
4848
</a-input>
4949
</a-form-item>
5050

5151
<a-row :gutter="16">
5252
<a-col class="gutter-row" :span="16">
5353
<a-form-item>
54-
<a-input size="large" type="text" placeholder="验证码" v-decorator="['captcha', {rules: [{ required: true, message: '请输入验证码' }], validateTrigger: 'blur'}]">
54+
<a-input size="large" type="text" :placeholder="$t('user.login.mobile.verification-code.placeholder')" v-decorator="['captcha', {rules: [{ required: true, message: $t('user.verification-code.required') }], validateTrigger: 'blur'}]">
5555
<a-icon slot="prefix" type="mail" :style="{ color: 'rgba(0,0,0,.25)' }"/>
5656
</a-input>
5757
</a-form-item>
@@ -62,20 +62,20 @@
6262
tabindex="-1"
6363
:disabled="state.smsSendBtn"
6464
@click.stop.prevent="getCaptcha"
65-
v-text="!state.smsSendBtn && '获取验证码' || (state.time+' s')"
65+
v-text="!state.smsSendBtn && $t('user.register.get-verification-code') || (state.time+' s')"
6666
></a-button>
6767
</a-col>
6868
</a-row>
6969
</a-tab-pane>
7070
</a-tabs>
7171

7272
<a-form-item>
73-
<a-checkbox v-decorator="['rememberMe', { valuePropName: 'checked' }]">自动登录</a-checkbox>
73+
<a-checkbox v-decorator="['rememberMe', { valuePropName: 'checked' }]">{{ $t('user.login.remember-me') }}</a-checkbox>
7474
<router-link
7575
:to="{ name: 'recover', params: { user: 'aaa'} }"
7676
class="forge-password"
7777
style="float: right;"
78-
>忘记密码</router-link>
78+
>{{ $t('user.login.forgot-password') }}</router-link>
7979
</a-form-item>
8080

8181
<a-form-item style="margin-top:24px">
@@ -86,11 +86,11 @@
8686
class="login-button"
8787
:loading="state.loginBtn"
8888
:disabled="state.loginBtn"
89-
>确定</a-button>
89+
>{{ $t('user.login.login') }}</a-button>
9090
</a-form-item>
9191

9292
<div class="user-login-other">
93-
<span>其他登录方式</span>
93+
<span>{{ $t('user.login.sign-in-with') }}</span>
9494
<a>
9595
<a-icon class="item-icon" type="alipay-circle"></a-icon>
9696
</a>
@@ -100,7 +100,7 @@
100100
<a>
101101
<a-icon class="item-icon" type="weibo-circle"></a-icon>
102102
</a>
103-
<router-link class="register" :to="{ name: 'register' }">注册账户</router-link>
103+
<router-link class="register" :to="{ name: 'register' }">{{ $t('user.login.signup') }}</router-link>
104104
</div>
105105
</a-form>
106106

‎src/views/user/Register.vue‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<template>
22
<div class="main user-layout-register">
3-
<h3><span>注册</span></h3>
3+
<h3><span>{{ $t('user.register.register') }}</span></h3>
44
<a-form ref="formRegister" :form="form" id="formRegister">
55
<a-form-item>
66
<a-input
77
size="large"
88
type="text"
9-
placeholder="邮箱"
10-
v-decorator="['email', {rules: [{ required: true, type: 'email', message: '请输入邮箱地址' }], validateTrigger: ['change', 'blur']}]"
9+
:placeholder="$t('user.register.email.placeholder')"
10+
v-decorator="['email', {rules: [{ required: true, type: 'email', message: $t('user.email.required') }], validateTrigger: ['change', 'blur']}]"
1111
></a-input>
1212
</a-form-item>
1313

@@ -21,30 +21,31 @@
2121
<div :class="['user-register', passwordLevelClass]">强度：<span>{{ passwordLevelName }}</span></div>
2222
<a-progress :percent="state.percent" :showInfo="false" :strokeColor=" passwordLevelColor " />
2323
<div style="margin-top: 10px;">
24-
<span>请至少输入 6 个字符。请不要使用容易被猜到的密码。</span>
24+
<span>{{ $t('user.register.password.popover-message') }}
25+
</span>
2526
</div>
2627
</div>
2728
</template>
2829
<a-form-item>
2930
<a-input-password
3031
size="large"
3132
@click="handlePasswordInputClick"
32-
placeholder="至少6位密码，区分大小写"
33-
v-decorator="['password', {rules: [{ required: true, message: '至少6位密码，区分大小写'}, { validator: this.handlePasswordLevel }], validateTrigger: ['change', 'blur']}]"
33+
:placeholder="$t('user.register.password.placeholder')"
34+
v-decorator="['password', {rules: [{ required: true, message: $t('user.password.required')}, { validator: this.handlePasswordLevel }], validateTrigger: ['change', 'blur']}]"
3435
></a-input-password>
3536
</a-form-item>
3637
</a-popover>
3738

3839
<a-form-item>
3940
<a-input-password
4041
size="large"
41-
placeholder="确认密码"
42-
v-decorator="['password2', {rules: [{ required: true, message: '至少6位密码，区分大小写' }, { validator: this.handlePasswordCheck }], validateTrigger: ['change', 'blur']}]"
42+
:placeholder="$t('user.register.confirm-password.placeholder')"
43+
v-decorator="['password2', {rules: [{ required: true, message: $t('user.password.required') }, { validator: this.handlePasswordCheck }], validateTrigger: ['change', 'blur']}]"
4344
></a-input-password>
4445
</a-form-item>
4546

4647
<a-form-item>
47-
<a-input size="large" placeholder="11 位手机号" v-decorator="['mobile', {rules: [{ required: true, message: '请输入正确的手机号', pattern: /^1[3456789]\d{9}$/ }, { validator: this.handlePhoneCheck } ], validateTrigger: ['change', 'blur'] }]">
48+
<a-input size="large" :placeholder="$t('user.login.mobile.placeholder')" v-decorator="['mobile', {rules: [{ required: true, message: $t('user.phone-number.required'), pattern: /^1[3456789]\d{9}$/ }, { validator: this.handlePhoneCheck } ], validateTrigger: ['change', 'blur'] }]">
4849
<a-select slot="addonBefore" size="large" defaultValue="+86">
4950
<a-select-option value="+86">+86</a-select-option>
5051
<a-select-option value="+87">+87</a-select-option>
@@ -62,7 +63,7 @@
6263
<a-row :gutter="16">
6364
<a-col class="gutter-row" :span="16">
6465
<a-form-item>
65-
<a-input size="large" type="text" placeholder="验证码" v-decorator="['captcha', {rules: [{ required: true, message: '请输入验证码' }], validateTrigger: 'blur'}]">
66+
<a-input size="large" type="text" :placeholder="$t('user.login.mobile.verification-code.placeholder')" v-decorator="['captcha', {rules: [{ required: true, message: '请输入验证码' }], validateTrigger: 'blur'}]">
6667
<a-icon slot="prefix" type="mail" :style="{ color: 'rgba(0,0,0,.25)' }"/>
6768
</a-input>
6869
</a-form-item>
@@ -73,7 +74,7 @@
7374
size="large"
7475
:disabled="state.smsSendBtn"
7576
@click.stop.prevent="getCaptcha"
76-
v-text="!state.smsSendBtn && '获取验证码'||(state.time+' s')"></a-button>
77+
v-text="!state.smsSendBtn && $t('user.register.get-verification-code')||(state.time+' s')"></a-button>
7778
</a-col>
7879
</a-row>
7980

@@ -85,9 +86,9 @@
8586
class="register-button"
8687
:loading="registerBtn"
8788
@click.stop.prevent="handleSubmit"
88-
:disabled="registerBtn">注册
89+
:disabled="registerBtn">{{ $t('user.register.register') }}
8990
</a-button>
90-
<router-link class="login" :to="{ name: 'login' }">使用已有账户登录</router-link>
91+
<router-link class="login" :to="{ name: 'login' }">{{ $t('user.register.sign-in') }}</router-link>
9192
</a-form-item>
9293

9394
</a-form>

0 commit comments

Comments
 (0)