refactor:登录页面加上切换语言按钮

This commit is contained in:
PZ688 2025-03-24 02:18:47 +08:00
parent 19ff21c0ec
commit c871c283a2
20 changed files with 88 additions and 2 deletions

View File

@ -57,6 +57,18 @@ export default {
: 'Account Management',
: 'Announcements',
: 'Configuration Parameters',
: 'Reset Password'
: 'Reset Password',
: 'Third-Party Account',
AD域配置: 'AD Domain Configuration',
: 'System Monitoring',
: 'Administrative Division',
: 'Dynamic Plugin',
: 'Update Log',
: 'WeChat Payment',
API: 'Super API',
: 'Help Doc',
: 'Framework Tutorial',
SqlSugar: 'SqlSugar',
: 'About Project'
}
}

View File

@ -22,6 +22,7 @@ export default {
loginfail: 'Anmeldung fehlgeschlagen, bitte überprüfen Sie Ihre E-Mail-Adresse oder Ihr Passwort',
notprivilege: 'Entschuldigung, Sie haben keine Anmeldeberechtigung',
captchaExpired: 'Code abgelaufen',
changeLanguage: 'Sprache wechseln',
},
mobile: {
placeholder1: 'Bitte Mobiltelefonnummer eingeben',

View File

@ -22,6 +22,7 @@ export default {
loginfail: 'Login failed, please check your email or password!',
notprivilege: 'Sorry, you do not have login permission',
captchaExpired: 'code expired',
changeLanguage: 'Change Language',
},
mobile: {
placeholder1: 'Please input mobile phone number',

View File

@ -22,6 +22,7 @@ export default {
loginfail: 'Inicio de sesión fallido, por favor, verifica tu correo electrónico o contraseña',
notprivilege: 'Lo siento, no tienes permiso para iniciar sesión',
captchaExpired: 'código expirado',
changeLanguage: 'Cambiar idioma',
},
mobile: {
placeholder1: 'Por favor, introduce el número de teléfono móvil',

View File

@ -22,6 +22,7 @@ export default {
loginfail: 'Kirjautuminen epäonnistui, tarkista käyttäjätunnus ja salasana',
notprivilege: 'Anteeksi, sinulla ei ole kirjautumisluottoa',
captchaExpired: 'koodi vanhentunut',
changeLanguage: 'Kieli vaihtaa',
},
mobile: {
placeholder1: 'Syötä matkapuhelinnumero',

View File

@ -22,6 +22,7 @@ export default {
loginfail: 'La connexion a échoué, veuillez vérifier votre email ou votre mot de passe',
notprivilege: 'Désolé, vous n\'avez pas de permission de connexion',
captchaExpired: 'code expiré',
changeLanguage: 'Changer de langue',
},
mobile: {
placeholder1: 'Veuillez saisir le numéro de téléphone mobile',

View File

@ -22,6 +22,7 @@ export default {
loginfail: 'Login gagal, silakan periksa email atau kata sandi Anda!',
notprivilege: 'Maaf, Anda tidak memiliki izin login',
captchaExpired: 'kode kedaluwarsa',
changeLanguage: 'Ubah bahasa',
},
mobile: {
placeholder1: 'Silakan masukkan nomor ponsel',

View File

@ -22,6 +22,7 @@ export default {
loginfail: 'Accesso fallito, per favore controlla email o password',
notprivilege: 'Scusa, non hai permesso di accesso',
captchaExpired: 'codice scaduto',
changeLanguage: 'Cambia lingua',
},
mobile: {
placeholder1: 'Inserisci il numero di cellulare',

View File

@ -22,6 +22,7 @@ export default {
loginfail: 'ログインに失敗しました。メールアドレスとパスワードを確認してください',
notprivilege: '申し訳ありません。ログイン権限がありません',
captchaExpired: 'コードが期限切れ',
changeLanguage: '言語を変更',
},
mobile: {
placeholder1: '携帯電話番号を入力してください',

View File

@ -22,6 +22,7 @@ export default {
loginfail: '로그인에 실패했습니다. 이메일 또는 비밀번호를 확인해 주세요',
notprivilege: '죄송합니다. 로그인 권한이 없습니다',
captchaExpired: '코드가 만료됨',
changeLanguage: '언어 변경',
},
mobile: {
placeholder1: '휴대폰 번호를 입력해 주세요',

View File

@ -21,6 +21,7 @@ export default {
loginfail: 'Log masuk gagal, sila periksa email atau kata laluan anda!',
notprivilege: 'Maaf, anda tidak mempunyai kebenaran log masuk',
captchaExpired: 'kod tamat tempoh',
changeLanguage: 'Tukar bahasa',
},
mobile: {
placeholder1: 'Sila masukkan nombor telefon bimbit',

View File

@ -22,6 +22,7 @@ export default {
loginfail: 'Innlogging feilet, vennligst sjekk ditt brukernavn eller passord',
notprivilege: 'Beklager, du har ikke tilgang til å logge inn',
captchaExpired: 'koden utløpt',
changeLanguage: 'Endre språk',
},
mobile: {
placeholder1: 'Vennligst skriv inn mobilnummer',

View File

@ -22,6 +22,7 @@ export default {
loginfail: 'Logowanie nie powiodło się, sprawdź swoją nazwę użytkownika lub hasło',
notprivilege: 'Przepraszamy, nie masz uprawnień do logowania',
captchaExpired: 'kod wygasł',
changeLanguage: 'Zmień język',
},
mobile: {
placeholder1: 'Proszę wprowadzić numer telefonu komórkowego',

View File

@ -22,6 +22,7 @@ export default {
loginfail: 'Login falhou, por favor, verifique seu email ou senha',
notprivilege: 'Desculpe, você não tem permissão para fazer login',
captchaExpired: 'código expirado',
changeLanguage: 'Mudar idioma',
},
mobile: {
placeholder1: 'Por favor, insira o número do celular',

View File

@ -22,6 +22,7 @@ export default {
loginfail: 'Не удалось войти, проверьте адрес электронной почты или пароль!',
notprivilege: 'Извините, у вас нет прав для входа',
captchaExpired: 'код истек',
changeLanguage: 'Сменить язык',
},
mobile: {
placeholder1: 'Пожалуйста, введите номер мобильного телефона',

View File

@ -22,6 +22,7 @@ export default {
loginfail: 'การเข้าสู่ระบบล้มเหลว กรุณาตรวจสอบอีเมล์หรือรหัสผ่านของคุณ!',
notprivilege: 'ขออภัย คุณไม่มีสิทธิ์ในการเข้าสู่ระบบ',
captchaExpired: 'รหัสหมดอายุ',
changeLanguage: 'เปลี่ยนภาษา',
},
mobile: {
placeholder1: 'กรุณาใส่หมายเลขโทรศัพท์มือถือ',

View File

@ -22,6 +22,7 @@ export default {
notprivilege: '抱歉,您没有登录权限',
success: '验证通过',
captchaExpired: '验证码已过期',
changeLanguage: '切换语言',
},
mobile: {
placeholder1: '请输入手机号',

View File

@ -22,6 +22,7 @@ export default {
loginfail: '登入失敗,請檢查帳號或密碼!',
notprivilege: '抱歉,您沒有登入權限',
captchaExpired: '驗證碼已過期',
changeLanguage: '切換語言',
},
mobile: {
placeholder1: '請輸入手機號碼',

View File

@ -22,6 +22,7 @@ export default {
loginfail: '登入失敗,請檢查帳號或密碼!',
notprivilege: '抱歉,您沒有登入權限',
captchaExpired: '驗證碼已過期',
changeLanguage: '切換語言',
},
mobile: {
placeholder1: '請輸入手機號',

View File

@ -67,6 +67,31 @@
</el-button>
</el-form-item>
<div class="font12 mt30 login-animation4 login-msg">{{ $t('message.mobile.msgText') }}</div>
<div class="change-language">
<div class="change-language-title">{{ $t('message.account.changeLanguage') }}:</div>
<div style="cursor: pointer;">
<el-dropdown size="small" :show-timeout="70" :hide-timeout="50" trigger="click" @command="onLanguageChange" placement="top-end">
<div class="layout-navbars-breadcrumb-user-icon" style="margin-left: 5px;">
<FlagIcon :code="currentCountryCode" :size="18" :title="$t('message.user.title1')" />
</div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item v-for="(value, key) in languageList" :key="key" :command="key"
:disabled="state.disabledI18n === key">
<div class="flex items-center">
<div class="mr-2">
<FlagIcon :code="getCountryCode(key)" :size="18" />
</div>
<div style="margin-left: 10px">
{{ value }}
</div>
</div>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
<!-- <el-button type="primary" round v-waves @click="weixinSignIn" :loading="state.loading.signIn"></el-button> -->
</el-form>
</el-tooltip>
@ -102,6 +127,9 @@ import { storeToRefs } from 'pinia';
import { accessTokenKey, clearTokens, feature, getAPI } from '/@/utils/axios-utils';
import { SysAuthApi } from '/@/api-services/api';
import { languageList, getCountryCode } from '/@/i18n';
import FlagIcon from 'vue3-flag-icons';
import type { CountryCode } from 'vue3-flag-icons';
//
// import verifyImg from '/@/assets/logo-mini.svg';
@ -110,7 +138,7 @@ const DragVerifyImgRotate = defineAsyncComponent(() => import('/@/components/dra
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const { t } = useI18n();
const { t, locale } = useI18n();
const route = useRoute();
const router = useRouter();
@ -125,6 +153,7 @@ const loginFail = t('message.account.loginfail');
const notPrivilege = t('message.account.notprivilege');
const dragRef: any = ref(null);
const currentCountryCode = ref<CountryCode>(getCountryCode(themeConfig.value.globalI18n));
const state = reactive({
isShowPassword: false,
ruleForm: {
@ -150,8 +179,23 @@ const state = reactive({
isPassRotate: false,
capsLockVisible: false,
expirySeconds: 60 as any, //
disabledI18n: 'zh-CN',
});
const onLanguageChange = (lang: string) => {
Local.remove('themeConfig');
themeConfig.value.globalI18n = lang;
Local.set('themeConfig', themeConfig.value);
currentCountryCode.value = getCountryCode(lang);
locale.value = lang;
initI18nOrSize('globalI18n', 'disabledI18n');
};
// /i18n
const initI18nOrSize = (value: string, attr: string) => {
(<any>state)[attr] = Local.get('themeConfig')[value];
};
//
let timer: any = null;
@ -430,5 +474,17 @@ defineExpose({ saveTokenAndInitRoutes });
.login-msg {
color: var(--el-text-color-placeholder);
}
.change-language {
display: flex;
justify-content: flex-end;
align-items: center;
margin-top: 5px;
margin-right: 20px;
.change-language-title {
font-size: 12px;
color: var(--el-text-color-placeholder);
}
}
}
</style>