From d2bce3fcbe514d33eb930d33acf1f8db3fa22af9 Mon Sep 17 00:00:00 2001
From: LiuHao <liuhaoai545@gmail>
Date: 星期二, 18 四月 2023 23:36:26 +0800
Subject: [PATCH] add i18n
---
src/lang/index.ts | 6 +-
src/store/modules/app.ts | 3 +
src/lang/en.ts | 14 ++++---
src/layout/components/Navbar.vue | 20 ++++++----
src/components/Screenfull/index.vue | 11 -----
src/components/LangSelect/index.vue | 39 +++++++++++++++++++
src/lang/zh-cn.ts | 14 ++++---
src/main.ts | 4 ++
8 files changed, 76 insertions(+), 35 deletions(-)
diff --git a/src/components/LangSelect/index.vue b/src/components/LangSelect/index.vue
new file mode 100644
index 0000000..298e5dd
--- /dev/null
+++ b/src/components/LangSelect/index.vue
@@ -0,0 +1,39 @@
+<template>
+ <el-dropdown trigger="click" @command="handleLanguageChange">
+ <div class="lang-select--style">
+ <svg-icon icon-class="language" />
+ </div>
+ <template #dropdown>
+ <el-dropdown-menu>
+ <el-dropdown-item :disabled="appStore.language === 'zh-cn'" command="zh-cn"> 涓枃 </el-dropdown-item>
+ <el-dropdown-item :disabled="appStore.language === 'en'" command="en"> English </el-dropdown-item>
+ </el-dropdown-menu>
+ </template>
+ </el-dropdown>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import SvgIcon from '@/components/SvgIcon/index.vue';
+import { useAppStore } from '@/store/modules/app';
+
+const appStore = useAppStore();
+const { locale } = useI18n();
+
+function handleLanguageChange(lang: string) {
+ locale.value = lang;
+ appStore.changeLanguage(lang);
+ if (lang == 'en') {
+ ElMessage.success('Switch Language Successful!');
+ } else {
+ ElMessage.success('鍒囨崲璇█鎴愬姛锛�');
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+.lang-select--style {
+ font-size: 18px;
+ line-height: 50px;
+}
+</style>
diff --git a/src/components/Screenfull/index.vue b/src/components/Screenfull/index.vue
index 2089e30..ce0b373 100644
--- a/src/components/Screenfull/index.vue
+++ b/src/components/Screenfull/index.vue
@@ -7,14 +7,3 @@
<script setup lang="ts">
const { isFullscreen, toggle } = useFullscreen();
</script>
-
-<style lang="scss" scoped>
-.screenfull-svg {
- display: inline-block;
- cursor: pointer;
- fill: #5a5e66;
- width: 20px;
- height: 20px;
- vertical-align: 10px;
-}
-</style>
diff --git a/src/lang/en.ts b/src/lang/en.ts
index 64318e7..59df4ba 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -6,20 +6,22 @@
},
// 鐧诲綍椤甸潰鍥介檯鍖�
login: {
- title: 'vue3-element-admin',
username: 'Username',
password: 'Password',
login: 'Login',
code: 'Verification Code',
- copyright: '',
- icp: '',
- thirdPartyLogin: 'third-party login'
+ copyright: ''
},
// 瀵艰埅鏍忓浗闄呭寲
navbar: {
+ full: 'Full Screen',
+ language: 'Language',
dashboard: 'Dashboard',
- logout: 'Logout',
document: 'Document',
- gitee: 'Gitee'
+ layoutSize: 'Layout Size',
+ selectTenant: 'Select Tenant',
+ layoutSetting: 'Layout Setting',
+ personalCenter: 'Personal Center',
+ logout: 'Logout'
}
};
diff --git a/src/lang/index.ts b/src/lang/index.ts
index 8ed51e9..8fdf19e 100644
--- a/src/lang/index.ts
+++ b/src/lang/index.ts
@@ -4,6 +4,7 @@
// 鏈湴璇█鍖�
import enLocale from './en';
import zhCnLocale from './zh-cn';
+import Cookies from 'js-cookie';
const messages = {
'zh-cn': {
@@ -16,12 +17,11 @@
/**
* 鑾峰彇褰撳墠绯荤粺浣跨敤璇█瀛楃涓�
- *
* @returns zh-cn|en ...
*/
export const getLanguage = () => {
// 鏈湴缂撳瓨鑾峰彇
- let language = localStorage.getItem('language');
+ let language = Cookies.get('language');
if (language) {
return language;
}
@@ -39,7 +39,7 @@
const i18n = createI18n({
legacy: false,
locale: getLanguage(),
- messages: messages
+ messages
});
export default i18n;
diff --git a/src/lang/zh-cn.ts b/src/lang/zh-cn.ts
index 1c91526..d778f7d 100644
--- a/src/lang/zh-cn.ts
+++ b/src/lang/zh-cn.ts
@@ -6,19 +6,21 @@
},
// 鐧诲綍椤甸潰鍥介檯鍖�
login: {
- title: 'vue3-element-admin',
username: '鐢ㄦ埛鍚�',
password: '瀵嗙爜',
login: '鐧� 褰�',
code: '璇疯緭鍏ラ獙璇佺爜',
- copyright: '',
- icp: '',
- thirdPartyLogin: '绗笁鏂圭櫥褰�'
+ copyright: ''
},
navbar: {
+ full: '鍏ㄥ睆',
+ language: '璇█',
dashboard: '棣栭〉',
- logout: '娉ㄩ攢',
document: '椤圭洰鏂囨。',
- gitee: '鐮佷簯'
+ layoutSize: '甯冨眬澶у皬',
+ selectTenant: '閫夋嫨绉熸埛',
+ layoutSetting: '甯冨眬璁剧疆',
+ personalCenter: '涓汉涓績',
+ logout: '閫�鍑虹櫥褰�'
}
};
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 9e4f470..44250ca 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -11,7 +11,7 @@
clearable
filterable
reserve-keyword
- placeholder="璇烽�夋嫨绉熸埛"
+ :placeholder="$t('navbar.selectTenant')"
v-if="userId === 1 && tenantEnabled"
@change="dynamicTenantEvent"
@clear="dynamicClearEvent"
@@ -22,19 +22,23 @@
<header-search id="header-search" class="right-menu-item" />
- <el-tooltip content="婧愮爜鍦板潃" effect="dark" placement="bottom">
+ <el-tooltip content="Github" effect="dark" placement="bottom">
<ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
</el-tooltip>
- <el-tooltip content="鏂囨。鍦板潃" effect="dark" placement="bottom">
+ <el-tooltip :content="$t('navbar.document')" effect="dark" placement="bottom">
<ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
</el-tooltip>
- <el-tooltip content="鍏ㄥ睆" effect="dark" placement="bottom">
+ <el-tooltip :content="$t('navbar.full')" effect="dark" placement="bottom">
<screenfull id="screenfull" class="right-menu-item hover-effect" />
</el-tooltip>
- <el-tooltip content="甯冨眬澶у皬" effect="dark" placement="bottom">
+ <el-tooltip :content="$t('navbar.language')" effect="dark" placement="bottom">
+ <lang-select id="lang-select" class="right-menu-item hover-effect" />
+ </el-tooltip>
+
+ <el-tooltip :content="$t('navbar.layoutSize')" effect="dark" placement="bottom">
<size-select id="size-select" class="right-menu-item hover-effect" />
</el-tooltip>
</template>
@@ -47,13 +51,13 @@
<template #dropdown>
<el-dropdown-menu>
<router-link to="/user/profile" v-if="!dynamic">
- <el-dropdown-item>涓汉涓績</el-dropdown-item>
+ <el-dropdown-item>{{ $t('navbar.personalCenter') }}</el-dropdown-item>
</router-link>
<el-dropdown-item command="setLayout">
- <span>甯冨眬璁剧疆</span>
+ <span>{{ $t('navbar.layoutSetting') }}</span>
</el-dropdown-item>
<el-dropdown-item divided command="logout">
- <span>閫�鍑虹櫥褰�</span>
+ <span>{{ $t('navbar.logout') }}</span>
</el-dropdown-item>
</el-dropdown-menu>
</template>
diff --git a/src/main.ts b/src/main.ts
index 32d2c45..0ad939a 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -30,6 +30,9 @@
import { getConfigKey, updateConfigByKey } from '@/api/system/config';
import { parseTime, addDateRange, handleTree, selectDictLabel, selectDictLabels } from '@/utils/ruoyi';
+// 鍥介檯鍖�
+import i18n from '@/lang/index';
+
const app = createApp(App);
// 鍏ㄥ眬鏂规硶鎸傝浇
app.config.globalProperties.useDict = useDict;
@@ -46,6 +49,7 @@
app.use(ElementIcons);
app.use(router);
app.use(store);
+app.use(i18n);
app.use(plugins);
// 鑷畾涔夋寚浠�
directive(app);
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index fd47c82..1fb8337 100644
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -14,7 +14,7 @@
// 璇█
const language = ref(Cookies.get('language'));
const locale = computed(() => {
- if (language?.value == 'en') {
+ if (language.value == 'en') {
return en;
} else {
return zhCn;
@@ -53,6 +53,7 @@
const changeLanguage = (val: string): void => {
language.value = val;
+ Cookies.set('language', val);
};
return {
--
Gitblit v1.9.3