login i18n

frontend/src/i18n/en_US.js

@@ -15,6 +15,12 @@ const en_US = {
     'prompt': 'Prompt',
     'operating': 'Operating',
     'input_limit': 'Within {0} and {1} characters',
+    'login': 'Sign In',
+    'welcome': 'Welcome back, please enter username and password to log in to MeterSphere',
+    'username': 'Username',
+    'password': 'Password',
+    'input_username': 'Please enter username',
+    'input_password': 'Please enter password',
   },
   workspace: {
     'create': 'Create Workspace',

frontend/src/i18n/zh_CN.js

@@ -15,6 +15,12 @@ const zh_CN = {
     'prompt': '提示',
     'operating': '操作',
     'input_limit': '长度在 {0} 到 {1} 个字符',
+    'login': '登录',
+    'welcome': '欢迎回来，请输入用户名和密码登录MeterSphere',
+    'username': '用户名',
+    'password': '密码',
+    'input_username': '请输入用户名',
+    'input_password': '请输入密码',
   },
   workspace: {
     'create': '创建工作空间',

frontend/src/login/Login.vue

@@ -7,25 +7,27 @@
             <img src="../assets/MeterSphere-彩色.png" style="width: 224px" alt="">
           </div>
           <div class="title">
-            <span id="s1">登录</span>
+            <span id="s1">{{$t('commons.login')}}</span>
             <span id="s2">MeterSphere</span>
           </div>
           <div class="border"></div>
           <div class="welcome">
-            欢迎回来，请输入用户名和密码登录MeterSphere
+            {{$t('commons.welcome')}}
           </div>
           <div class="form">
             <el-form-item prop="username">
-              <el-input v-model="form.username" placeholder="邮箱" autofocus autocomplete="off" maxlength="100"
+              <el-input v-model="form.username" :placeholder="$t('commons.username')" autofocus autocomplete="off"
+                        maxlength="100"
                         show-word-limit/>
             </el-form-item>
             <el-form-item prop="password">
-              <el-input v-model="form.password" placeholder="密码" show-password autocomplete="off"
+              <el-input v-model="form.password" :placeholder="$t('commons.password')" show-password autocomplete="off"
                         maxlength="20" show-word-limit/>
             </el-form-item>
           </div>
           <div class="btn">
-            <el-button type="primary" class="submit" @click="submit('form')">登录
+            <el-button type="primary" class="submit" @click="submit('form')">
+              {{$t('commons.login')}}
             </el-button>
           </div>
           <div class="msg">
@@ -48,7 +50,7 @@
   export default {
     name: "Login",
     data() {
-      let validateEmail = (rule, value, callback) => {
+      /*let validateEmail = (rule, value, callback) => {
         // eslint-disable-next-line no-useless-escape
         let EMAIL_REGEX = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
         if (!EMAIL_REGEX.test(value)) {
@@ -56,7 +58,7 @@
         } else {
           callback();
         }
-      };
+      };*/
       return {
         form: {
           username: '',
@@ -64,12 +66,11 @@
         },
         rules: {
           username: [
-            {required: true, message: '请输入邮箱', trigger: 'blur'},
-            {validator: validateEmail, trigger: 'blur'}
+            {required: true, message: this.$t('commons.input_username'), trigger: 'blur'},
           ],
           password: [
-            {required: true, message: '请输入密码', trigger: 'blur'},
-            {min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur'}
+            {required: true, message: this.$t('commons.input_password'), trigger: 'blur'},
+            {min: 6, max: 20, message: this.$t('commons.input_limit', [6, 20]), trigger: 'blur'}
           ]
         },
         msg: '',

frontend/src/login/login.js

 import Vue from 'vue';
-import {Button, Col, Form, FormItem, Input, Row} from 'element-ui';
+import ElementUI, {Button, Col, Form, FormItem, Input, Row} from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 import Login from "./Login.vue";
 import Ajax from "../common/ajax";
+import i18n from "../i18n/i18n";
 
 Vue.config.productionTip = false;
+
+Vue.use(ElementUI, {
+  i18n: (key, value) => i18n.t(key, value)
+});
+
 Vue.use(Row);
 Vue.use(Col);
 Vue.use(Form);
@@ -13,7 +19,9 @@ Vue.use(Input);
 Vue.use(Button);
 Vue.use(Ajax);
 
+
 new Vue({
   el: '#login',
+  i18n,
   render: h => h(Login)
 });