Skip to content

Commit a23bea3

Browse files
wangdan-fit2cloudwangdan-fit2cloud
committed
feat: login view add language setting
1 parent 194cce2 commit a23bea3

File tree

7 files changed

+114
-53
lines changed

7 files changed

+114
-53
lines changed

‎ui/src/components/login-layout/index.vue‎

Lines changed: 46 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,33 @@
66
<div class="login-image" :style="{ backgroundImage: `url(${loginImage})` }"></div>
77
</el-col>
88
<el-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14" class="right-container flex-center">
9+
<el-dropdown trigger="click" type="primary" class="lang">
10+
<template #dropdown>
11+
<el-dropdown-menu style="width: 180px">
12+
<el-dropdown-item
13+
v-for="(lang, index) in langList"
14+
:key="index"
15+
:value="lang.value"
16+
@click="changeLang(lang.value)"
17+
class="flex-between"
18+
>
19+
<span :class="lang.value === user.getLanguage() ? 'primary' : ''">{{
20+
lang.label
21+
}}</span>
22+
23+
<el-icon
24+
:class="lang.value === user.getLanguage() ? 'primary' : ''"
25+
v-if="lang.value === user.getLanguage()"
26+
>
27+
<Check />
28+
</el-icon>
29+
</el-dropdown-item>
30+
</el-dropdown-menu>
31+
</template>
32+
<el-button>
33+
{{ currentLanguage }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
34+
</el-button>
35+
</el-dropdown>
936
<slot></slot>
1037
</el-col>
1138
</el-row>
@@ -16,10 +43,20 @@
1643
import { computed } from 'vue'
1744
import { getThemeImg } from '@/utils/theme'
1845
import useStore from '@/stores'
19-
import { request } from '@/request'
46+
import { useLocalStorage } from '@vueuse/core'
47+
import { langList, localeConfigKey, getBrowserLang } from '@/locales/index'
2048
defineOptions({ name: 'LoginLayout' })
2149
const { user } = useStore()
2250
51+
const changeLang = (lang: string) => {
52+
useLocalStorage(localeConfigKey, getBrowserLang()).value = lang
53+
window.location.reload()
54+
}
55+
56+
const currentLanguage = computed(() => {
57+
return langList.value?.filter((v: any) => v.value === user.getLanguage())[0].label
58+
})
59+
2360
const fileURL = computed(() => {
2461
if (user.themeInfo?.loginImage) {
2562
if (typeof user.themeInfo?.loginImage === 'string') {
@@ -52,5 +89,13 @@ const loginImage = computed(() => {
5289
width: 100%;
5390
height: 100%;
5491
}
92+
.right-container {
93+
position: relative;
94+
.lang {
95+
position: absolute;
96+
right: 20px;
97+
top: 20px;
98+
}
99+
}
55100
}
56101
</style>

‎ui/src/components/markdown/MdEditor.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@
99
<script setup lang="ts">
1010
import { computed } from 'vue'
1111
import { MdEditor, config } from 'md-editor-v3'
12-
12+
import { getBrowserLang } from '@/locales/index'
1313
import './assets/markdown-iconfont.js'
1414
// 引入公共库中的语言配置
1515
import ZH_TW from '@vavt/cm-extension/dist/locale/zh-TW'
1616
1717
defineOptions({ name: 'MdEditor' })
18-
const language = computed(() => localStorage.getItem('MaxKB-locale') || '')
18+
const language = computed(() => localStorage.getItem('MaxKB-locale') || getBrowserLang() || '')
1919
config({
2020
editorConfig: {
2121
languageUserDefined: {

‎ui/src/locales/index.ts‎

Lines changed: 59 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,82 @@
1-
import { useLocalStorage, usePreferredLanguages } from '@vueuse/core';
2-
import { computed } from 'vue';
3-
import { createI18n } from 'vue-i18n';
1+
import { useLocalStorage, usePreferredLanguages } from '@vueuse/core'
2+
import { computed } from 'vue'
3+
import { createI18n } from 'vue-i18n'
44

55
// 导入语言文件
6-
const langModules = import.meta.glob('./lang/*/index.ts', { eager: true }) as Record<string, () => Promise<{ default: Object }>>;
6+
const langModules = import.meta.glob('./lang/*/index.ts', { eager: true }) as Record<
7+
string,
8+
() => Promise<{ default: Object }>
9+
>
710

8-
const langModuleMap = new Map<string, Object>();
11+
const langModuleMap = new Map<string, Object>()
912

10-
export const langCode: Array<string> = [];
13+
export const langCode: Array<string> = []
1114

12-
export const localeConfigKey = 'MaxKB-locale';
15+
export const localeConfigKey = 'MaxKB-locale'
1316

1417
// 获取浏览器默认语言环境
15-
const languages = usePreferredLanguages();
18+
const languages = usePreferredLanguages()
19+
20+
export function getBrowserLang() {
21+
const browserLang = navigator.language ? navigator.language : languages.value[0]
22+
let defaultBrowserLang = ''
23+
if (browserLang === 'zh-HK' || browserLang === 'zh-TW') {
24+
defaultBrowserLang = 'zh-Hant'
25+
} else if (browserLang === 'zh-CN') {
26+
defaultBrowserLang = 'zh-CN'
27+
} else {
28+
defaultBrowserLang = 'en-US'
29+
}
30+
return defaultBrowserLang
31+
}
1632

1733
// 生成语言模块列表
1834
const generateLangModuleMap = () => {
19-
const fullPaths = Object.keys(langModules);
20-
fullPaths.forEach((fullPath) => {
21-
const k = fullPath.replace('./lang', '');
22-
const startIndex = 1;
23-
const lastIndex = k.lastIndexOf('/');
24-
const code = k.substring(startIndex, lastIndex);
25-
langCode.push(code);
26-
langModuleMap.set(code, langModules[fullPath]);
27-
});
28-
};
35+
const fullPaths = Object.keys(langModules)
36+
fullPaths.forEach((fullPath) => {
37+
const k = fullPath.replace('./lang', '')
38+
const startIndex = 1
39+
const lastIndex = k.lastIndexOf('/')
40+
const code = k.substring(startIndex, lastIndex)
41+
langCode.push(code)
42+
langModuleMap.set(code, langModules[fullPath])
43+
})
44+
}
2945

3046
// 导出 Message
3147
const importMessages = computed(() => {
32-
generateLangModuleMap();
48+
generateLangModuleMap()
3349

34-
const message: Recordable = {};
35-
langModuleMap.forEach((value: any, key) => {
36-
message[key] = value.default;
37-
});
38-
return message;
39-
});
50+
const message: Recordable = {}
51+
langModuleMap.forEach((value: any, key) => {
52+
message[key] = value.default
53+
})
54+
return message
55+
})
4056

4157
export const i18n = createI18n({
42-
legacy: false,
43-
locale: useLocalStorage(localeConfigKey, 'zh-CN').value || languages.value[0] || 'zh-CN',
44-
fallbackLocale: 'zh-CN',
45-
messages: importMessages.value,
46-
globalInjection: true,
47-
});
58+
legacy: false,
59+
locale: useLocalStorage(localeConfigKey, getBrowserLang()).value || getBrowserLang(),
60+
fallbackLocale: getBrowserLang(),
61+
messages: importMessages.value,
62+
globalInjection: true
63+
})
4864

4965
export const langList = computed(() => {
50-
if (langModuleMap.size === 0) generateLangModuleMap();
66+
if (langModuleMap.size === 0) generateLangModuleMap()
5167

52-
const list:any=[]
53-
langModuleMap.forEach((value: any, key) => {
54-
list.push({
55-
label: value.default.lang,
56-
value: key,
57-
});
58-
});
68+
const list: any = []
69+
langModuleMap.forEach((value: any, key) => {
70+
list.push({
71+
label: value.default.lang,
72+
value: key
73+
})
74+
})
5975

60-
return list;
61-
});
76+
return list
77+
})
6278

6379
// @ts-ignore
64-
export const { t } = i18n.global;
80+
export const { t } = i18n.global
6581

66-
export default i18n;
82+
export default i18n

‎ui/src/main.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ const locale_map: any = {
5858
'en-US': enUs
5959
}
6060
app.use(ElementPlus, {
61-
locale: locale_map[localStorage.getItem('MaxKB-locale') || 'zh-CN']
61+
locale: locale_map[localStorage.getItem('MaxKB-locale') || navigator.language || 'zh-CN']
6262
})
6363

6464
app.use(router)

‎ui/src/stores/modules/user.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import ThemeApi from '@/api/theme'
77
import { useElementPlusTheme } from 'use-element-plus-theme'
88
import { defaultPlatformSetting } from '@/utils/theme'
99
import { useLocalStorage } from '@vueuse/core'
10-
import { localeConfigKey } from '@/locales/index'
10+
import { localeConfigKey, getBrowserLang } from '@/locales/index'
1111
export interface userStateTypes {
1212
userType: number // 1 系统操作者 2 对话用户
1313
userInfo: User | null
@@ -33,7 +33,7 @@ const useUserStore = defineStore({
3333
actions: {
3434
getLanguage() {
3535
return this.userType === 1
36-
? localStorage.getItem('MaxKB-locale')
36+
? localStorage.getItem('MaxKB-locale') || getBrowserLang()
3737
: sessionStorage.getItem('language')
3838
},
3939
showXpack() {

‎ui/src/views/login/components/wecomQrCode.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
import { ref, nextTick, defineProps } from 'vue'
1515
import { MsgError } from '@/utils/message'
1616
import useStore from '@/stores'
17-
17+
import { getBrowserLang } from '@/locales/index'
1818
const router = useRouter()
1919
2020
const wwLogin = ref({})
@@ -36,7 +36,7 @@ const init = async () => {
3636
corpId: props.config.corp_id,
3737
agentId: props.config.agent_id
3838
}
39-
const lang = localStorage.getItem('MaxKB-locale') || 'zh-CN'
39+
const lang = localStorage.getItem('MaxKB-locale') || getBrowserLang() || 'zh-CN'
4040
const redirectUri = window.location.origin
4141
try {
4242
wwLogin.value = ww.createWWLoginPanel({

‎ui/src/views/login/index.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ import useStore from '@/stores'
109109
import authApi from '@/api/auth-setting'
110110
import { MsgConfirm, MsgSuccess } from '@/utils/message'
111111
112-
import { t } from '@/locales'
112+
import { t, getBrowserLang } from '@/locales'
113113
import QrCodeTab from '@/views/login/components/QrCodeTab.vue'
114114
import { useI18n } from 'vue-i18n'
115115
const { locale } = useI18n({ useScope: 'global' })
@@ -217,7 +217,7 @@ const login = () => {
217217
user
218218
.login(loginMode.value, loginForm.value.username, loginForm.value.password)
219219
.then(() => {
220-
locale.value = localStorage.getItem('MaxKB-locale') || 'zh-CN'
220+
locale.value = localStorage.getItem('MaxKB-locale') || getBrowserLang() || 'zh-CN'
221221
router.push({ name: 'home' })
222222
})
223223
.finally(() => (loading.value = false))

0 commit comments

Comments
 (0)