diff --git a/lms/nladmin-ui/src/api/i18n.js b/lms/nladmin-ui/src/api/i18n.js new file mode 100644 index 0000000..b8073e1 --- /dev/null +++ b/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 } diff --git a/lms/nladmin-ui/src/i18n/index.js b/lms/nladmin-ui/src/i18n/index.js new file mode 100644 index 0000000..2ce95ba --- /dev/null +++ b/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 + diff --git a/lms/nladmin-ui/src/layout/components/Navbar.vue b/lms/nladmin-ui/src/layout/components/Navbar.vue index c2fa28c..035feaa 100644 --- a/lms/nladmin-ui/src/layout/components/Navbar.vue +++ b/lms/nladmin-ui/src/layout/components/Navbar.vue @@ -1,26 +1,26 @@ @@ -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 - }) - } } } } diff --git a/lms/nladmin-ui/src/main.js b/lms/nladmin-ui/src/main.js index 1fe4089..a1f808d 100644 --- a/lms/nladmin-ui/src/main.js +++ b/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 +}) diff --git a/lms/nladmin-ui/src/views/login.vue b/lms/nladmin-ui/src/views/login.vue index 3825ed1..1eade40 100644 --- a/lms/nladmin-ui/src/views/login.vue +++ b/lms/nladmin-ui/src/views/login.vue @@ -1,34 +1,50 @@