add:国际化

lms/nladmin-ui/src/api/i18n.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+// 国际化开发：3。增加文件获取接口
+export function fetchMessages(locale) {
+  return request({
+    url: '/api/language/js/' + locale,
+    method: 'get'
+  })
+}
+
+export default { fetchMessages }

lms/nladmin-ui/src/i18n/index.js

@@ -0,0 +1,19 @@
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+// 国际化开发：5。i18n index文件修改
+Vue.use(VueI18n)
+
+// 准备默认的语言环境消息（可以是空对象，也可以是一些基本消息）
+const defaultLocale = 'zh'
+const fallbackLocale = 'zh'
+
+// 创建i18n实例
+const i18n = new VueI18n({
+  locale: defaultLocale, // 设置当前语言
+  fallbackLocale, // 设置回退语言
+  silentTranslationWarn: true, // 解决vue-i18n黄色警告"value of key 'xxx' is not a string"和"cannot translate the value of keypath 'xxx'.use the value of keypath as default",可忽略
+  globalInjection: true,
+  messages: {} // 初始化为空，稍后从接口获取
+})
+export default i18n
+

lms/nladmin-ui/src/layout/components/Navbar.vue

@@ -1,26 +1,26 @@
 <template>
   <div class="navbar">
     <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
-    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>
-    <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>
+    <breadcrumb v-if="!topNav" id="breadcrumb-container" class="breadcrumb-container" />
+    <top-nav v-if="topNav" id="topmenu-container" class="topmenu-container" />
 
     <div class="right-menu">
       <template v-if="device!=='mobile'">
         <search id="header-search" class="right-menu-item" />
 
         <!--        <el-tooltip content="项目文档" effect="dark" placement="bottom">
-                  <Doc class="right-menu-item hover-effect" />
-                </el-tooltip>-->
+          <Doc class="right-menu-item hover-effect" />
+        </el-tooltip>-->
 
-        <el-tooltip content="全屏缩放" effect="dark" placement="bottom">
+        <el-tooltip :content="$t('common.fz')" effect="dark" placement="bottom">
           <screenfull id="screenfull" class="right-menu-item hover-effect" />
         </el-tooltip>
-        <notice-icon class="right-menu-item"/>
-        <notice-icon-reader ref="noticeIconReader"/>
+        <notice-icon class="right-menu-item" />
+        <notice-icon-reader ref="noticeIconReader" />
 
         <!--        <el-tooltip content="布局设置" effect="dark" placement="bottom">
-                  <size-select id="size-select" class="right-menu-item hover-effect" />
-                </el-tooltip>-->
+          <size-select id="size-select" class="right-menu-item hover-effect" />
+        </el-tooltip>-->
 
       </template>
       <img :src="Avatar" class="user-avatar">
@@ -31,21 +31,32 @@
         <el-dropdown-menu slot="dropdown">
           <span style="display:block;" @click="show = true">
             <el-dropdown-item>
-              布局设置
+              {{ $t('common.Layout_setting') }}
             </el-dropdown-item>
           </span>
           <router-link to="/user/center">
             <el-dropdown-item>
-              个人中心
+              {{ $t('common.Personal_center') }}
             </el-dropdown-item>
           </router-link>
           <span style="display:block;" @click="open">
             <el-dropdown-item divided>
-              退出登录
+              {{ $t('common.Log_out') }}
             </el-dropdown-item>
           </span>
         </el-dropdown-menu>
       </el-dropdown>
+      <el-dropdown class="right-menu-item" style="font-size: 14px" trigger="click" @command="langChange">
+        <span class="el-dropdown-link" style="font-size: 18px">
+          {{ language }} <i class="el-icon-caret-bottom" />
+        </span>
+        <!-- 国际化开发：1.修改语言列表-->
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item divided command="zh">简体中文</el-dropdown-item>
+          <el-dropdown-item divided command="en">English</el-dropdown-item>
+          <el-dropdown-item divided command="iv">Vietnamese</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
     </div>
   </div>
 </template>
@@ -76,15 +87,16 @@ export default {
     Doc,
     TopNav
   },
-  created() {
-    this.initWebSocket()
-  },
   data() {
     return {
       Avatar: Avatar,
-      dialogVisible: false
+      dialogVisible: false,
+      language: '简体中文'
     }
   },
+  created() {
+    this.initLang()
+  },
   computed: {
     ...mapGetters([
       'sidebar',
@@ -110,13 +122,39 @@ export default {
     }
   },
   methods: {
+    initLang() {
+      // 初始化语言
+      let item = localStorage.getItem('lang')
+      if (item === null) {
+        item = 'zh'
+      }
+      localStorage.setItem('lang', item)
+      this.setLang(item)
+    },
+    // 中英文切换
+    langChange(command) {
+      this.$i18n.locale = command
+      localStorage.setItem('lang', command)
+      this.setLang(command)
+      location.reload()
+    },
+    // 国际化开发：2.设置
+    setLang(command) {
+      if (command === 'en') {
+        this.language = 'English'
+      } else if (command === 'zh') {
+        this.language = '简体中文'
+      } else if (command === 'iv') {
+        this.language = 'Vietnamese'
+      }
+    },
     toggleSideBar() {
       this.$store.dispatch('app/toggleSideBar')
     },
     open() {
-      this.$confirm('确定注销并退出系统吗？', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
+      this.$confirm(this.$t('common.Tip13'), this.$t('common.Tips'), {
+        confirmButtonText: this.$t('common.Confirm'),
+        cancelButtonText: this.$t('common.Cancel'),
         type: 'warning'
       }).then(() => {
         this.logout()
@@ -126,43 +164,6 @@ export default {
       this.$store.dispatch('LogOut').then(() => {
         location.reload()
       })
-    },
-    initWebSocket() {
-      if (typeof (WebSocket) === 'undefined') {
-        this.$notify({
-          title: '提示',
-          message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器！',
-          type: 'warning',
-          duration: 0
-        })
-      }
-      // const wsUri = (process.env.VUE_APP_WS_API === '/' ? '/' : (process.env.VUE_APP_WS_API + '/')) + 'messageInfo'
-      const wsUri = window.g.prod.VUE_APP_BASE_API.replace('http', 'ws') + '/webSocket/' + 'messageInfo'
-      this.websock = new WebSocket(wsUri)
-      this.websock.onerror = this.webSocketOnError
-      this.websock.onmessage = this.webSocketOnMessage
-    },
-    webSocketOnError(e) {
-      this.$notify({
-        title: 'WebSocket连接发生错误',
-        type: 'error',
-        duration: 0
-      })
-    },
-    webSocketOnMessage(e) {
-      const data = JSON.parse(e.data)
-      if (data.msgType === 'INFO') {
-        console.log('data', data)
-        this.$bus.emit(data.msg.data, data.msg.msgType)
-      } else if (data.msgType === 'ERROR') {
-        this.$notify({
-          title: '',
-          message: data.msg,
-          dangerouslyUseHTMLString: true,
-          type: 'error',
-          duration: 0
-        })
-      }
     }
   }
 }

lms/nladmin-ui/src/main.js

@@ -18,7 +18,10 @@ import permission from './components/Permission'
 import './assets/styles/element-variables.scss'
 // global css
 import './assets/styles/index.scss'
-
+// add-xy start
+import { fetchMessages } from '@/api/i18n' // 有一个API模块来获取语言文件
+// 当前语言，可以从本地存储、用户设置或URL参数中获取
+const currentLocale = localStorage.getItem('lang')
 // 代码高亮
 import VueHighlightJS from 'vue-highlightjs'
 import 'highlight.js/styles/atom-one-dark.css'
@@ -82,3 +85,11 @@ new Vue({
   store,
   render: h => h(App)
 })
+// add-xy start
+// 国际化开发：3.调用接口异步获取语言文件，增加api文件
+fetchMessages(currentLocale).then(messages => {
+  // 将获取到的消息设置到i18n实例
+  i18n.setLocaleMessage(currentLocale, messages.content)
+  // 设置当前语言
+  i18n.locale = currentLocale
+})

lms/nladmin-ui/src/views/login.vue

@@ -1,34 +1,50 @@
 <template>
   <div class="login" :style="'background-image:url('+ Background +');'">
-    <img v-if="logo" :src="logo" class="sidebar-logo2" />
     <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-position="left" label-width="0px" class="login-form">
       <h3 class="title">
-        {{title}}</h3>
+        {{ title }}</h3>
       <el-form-item prop="username">
-        <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
+        <el-input v-model="loginForm.username" type="text" auto-complete="off" :placeholder="$t('common.account')">
           <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
         </el-input>
       </el-form-item>
       <el-form-item prop="password">
-        <el-input v-model="loginForm.password" type="password" auto-complete="new-password" placeholder="密码" @keyup.enter.native="handleLogin">
+        <el-input v-model="loginForm.password" type="password" auto-complete="off" :placeholder="$t('common.password')" @keyup.enter.native="handleLogin">
           <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
         </el-input>
       </el-form-item>
       <el-form-item prop="code">
-        <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter.native="handleLogin">
+        <el-input v-model="loginForm.code" auto-complete="off" :placeholder="$t('common.verification_code')" style="width: 63%" @keyup.enter.native="handleLogin">
           <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
         </el-input>
         <div class="login-code">
           <img :src="codeUrl" @click="getCode">
         </div>
       </el-form-item>
-      <el-checkbox v-model="loginForm.rememberMe" style="margin:0 0 25px 0;">
-        记住我
-      </el-checkbox>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-checkbox v-model="loginForm.rememberMe" style="margin:0 0 25px 0;">
+            {{ $t('common.login_rm') }}
+          </el-checkbox>
+        </el-col>
+        <el-col :span="12">
+          <el-dropdown style="display: flex; justify-content: right; color: #409EFF;" trigger="click" @command="changeLanguage">
+            <span class="el-dropdown-link">
+              {{ language }}
+            </span>
+            <!-- 国际化开发：1.修改语言列表-->
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item divided command="zh">简体中文</el-dropdown-item>
+              <el-dropdown-item divided command="en">English</el-dropdown-item>
+              <el-dropdown-item divided command="iv">Vietnamese</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </el-col>
+      </el-row>
       <el-form-item style="width:100%;">
         <el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
-          <span v-if="!loading">登 录</span>
-          <span v-else>登 录 中...</span>
+          <span v-if="!loading">{{ $t('common.login') }}</span>
+          <span v-else>{{ $t('common.login_ing') }}</span>
         </el-button>
       </el-form-item>
     </el-form>
@@ -47,27 +63,29 @@ import Config from '@/settings'
 import { getCodeImg } from '@/api/login'
 import Cookies from 'js-cookie'
 import Background from '@/assets/images/background.jpg'
-import Logo from '@/assets/images/hailaing2.png'
+import i18n from '@/i18n'
+import { fetchMessages } from '@/api/i18n'
 export default {
   name: 'Login',
   data() {
     return {
-      title: '印尼海亮铜箔LMS',
+      language: '简体中文',
+      title: i18n.t('platform.title'),
+      title_param: 'platform',
       Background: Background,
-      logo: Logo,
       codeUrl: '',
       cookiePass: '',
       loginForm: {
         username: 'admin',
-        password: '',
+        password: '123456',
         rememberMe: false,
         code: '',
         uuid: ''
       },
       loginRules: {
-        username: [{ required: true, trigger: 'blur', message: '用户名不能为空' }],
-        password: [{ required: true, trigger: 'blur', message: '密码不能为空' }],
-        code: [{ required: true, trigger: 'change', message: '验证码不能为空' }]
+        username: [{ required: true, trigger: 'blur', message: i18n.t('platform.tip1') }],
+        password: [{ required: true, trigger: 'blur', message: i18n.t('platform.tip2') }],
+        code: [{ required: true, trigger: 'change', message: i18n.t('platform.tip3') }]
       },
       loading: false,
       redirect: undefined
@@ -82,6 +100,7 @@ export default {
     }
   },
   created() {
+    this.setLang(localStorage.getItem('lang'))
     // 获取验证码
     this.getCode()
     // 获取用户名密码等Cookie
@@ -90,6 +109,36 @@ export default {
     this.point()
   },
   methods: {
+    // 中英文切换
+    // 语言切换-x
+    async changeLanguage(locale) {
+      // 如果已经加载过该语言，可以直接设置，避免重复请求
+      if (!this.$i18n.getLocaleMessage(locale)) {
+        const messages = await fetchMessages(locale)
+        this.$i18n.setLocaleMessage(locale, messages.content)
+      }
+      this.$i18n.locale = locale
+      // 可以将当前语言保存到本地存储，以便下次使用
+      localStorage.setItem('lang', locale)
+      this.setLang(locale)
+      location.reload()
+    },
+    langChange(command) {
+      this.$i18n.locale = command
+      localStorage.setItem('lang', command)
+      this.setLang(command)
+      location.reload()
+    },
+    // 国际化开发：2.设置
+    setLang(command) {
+      if (command === 'en') {
+        this.language = 'English'
+      } else if (command === 'zh') {
+        this.language = '简体中文'
+      } else if (command === 'iv') {
+        this.language = 'Vietnamese'
+      }
+    },
     getCode() {
       getCodeImg().then(res => {
         this.codeUrl = res.img
@@ -133,7 +182,11 @@ export default {
           }
           this.$store.dispatch('Login', user).then(() => {
             this.loading = false
-            this.$router.push({ path: this.redirect || '/' })
+            window.location.href = this.redirect
+            // if (this.redirect === 'http://localhost:8013/dashboard'){
+            //   window.location.href = this.redirect
+            // }
+            // this.$router.push({ path: this.redirect || '/' })
           }).catch(() => {
             this.loading = false
             this.getCode()
@@ -149,8 +202,8 @@ export default {
       console.log(point)
       if (point) {
         this.$notify({
-          title: '提示',
-          message: '当前登录状态已过期，请重新登录！',
+          title: i18n.t('common.Tips'),
+          message: i18n.t('common.Tip20'),
           type: 'warning',
           duration: 5000
         })
@@ -162,53 +215,47 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
-  .login {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    background-size: cover;
-  }
-  .title {
-    margin: 0 auto 30px auto;
-    text-align: center;
-    color: #006cb6;
-  }
-  .sidebar-logo2 {
-    width: 370px;
-    height: 56px;
-    position: absolute; /* 绝对定位 */
-    top: 8px; /* 顶部对齐 */
-    left: 8px; /* 左侧对齐 */
-  }
-  .login-form {
-    border-radius: 6px;
-    background-color: rgb(252, 247, 247, 0.5); /* 白色背景，50%透明度 */
-    width: 385px;
-    padding: 25px 25px 5px 25px;
-    .el-input {
-      height: 38px;
-      input {
-        height: 38px;
-      }
-    }
-    .input-icon{
-      height: 39px;width: 14px;margin-left: 2px;
-    }
-  }
-  .login-tip {
-    font-size: 13px;
-    text-align: center;
-    color: #bfbfbf;
-  }
-  .login-code {
-    width: 33%;
-    display: inline-block;
+.login {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  background-size: cover;
+}
+.title {
+  margin: 0 auto 30px auto;
+  text-align: center;
+  color: #707070;
+}
+
+.login-form {
+  border-radius: 6px;
+  background: #ffffff;
+  width: 385px;
+  padding: 25px 25px 5px 25px;
+  .el-input {
     height: 38px;
-    float: right;
-    img{
-      cursor: pointer;
-      vertical-align:middle
+    input {
+      height: 38px;
     }
   }
+  .input-icon{
+    height: 39px;width: 14px;margin-left: 2px;
+  }
+}
+.login-tip {
+  font-size: 13px;
+  text-align: center;
+  color: #bfbfbf;
+}
+.login-code {
+  width: 33%;
+  display: inline-block;
+  height: 38px;
+  float: right;
+  img{
+    cursor: pointer;
+    vertical-align:middle
+  }
+}
 </style>