修改国际化

master
夜笙歌 2 years ago
parent e9e72e7f75
commit 15a2f90a46

@ -2,214 +2,216 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta name="renderer" content="webkit"> <meta content="webkit" name="renderer">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="icon" href="/favicon.ico"> <link href="/favicon.ico" rel="icon">
<title>若依管理系统</title> <title>若依管理系统</title>
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]--> <!--[if lt IE 11]>
<style> <script>window.location.href = '/html/ie.html';</script>
html, <![endif]-->
body, <style>
#app { html,
height: 100%; body,
margin: 0px; #app {
padding: 0px; height: 100%;
} margin: 0px;
padding: 0px;
.chromeframe { }
margin: 0.2em 0;
background: #ccc; .chromeframe {
color: #000; margin: 0.2em 0;
padding: 0.2em 0; background: #ccc;
} color: #000;
padding: 0.2em 0;
#loader-wrapper { }
position: fixed;
top: 0; #loader-wrapper {
left: 0; position: fixed;
width: 100%; top: 0;
height: 100%; left: 0;
z-index: 999999; width: 100%;
} height: 100%;
z-index: 999999;
#loader { }
display: block;
position: relative; #loader {
left: 50%; display: block;
top: 50%; position: relative;
width: 150px; left: 50%;
height: 150px; top: 50%;
margin: -75px 0 0 -75px; width: 150px;
border-radius: 50%; height: 150px;
border: 3px solid transparent; margin: -75px 0 0 -75px;
border-top-color: #FFF; border-radius: 50%;
-webkit-animation: spin 2s linear infinite; border: 3px solid transparent;
-ms-animation: spin 2s linear infinite; border-top-color: #FFF;
-moz-animation: spin 2s linear infinite; -webkit-animation: spin 2s linear infinite;
-o-animation: spin 2s linear infinite; -ms-animation: spin 2s linear infinite;
animation: spin 2s linear infinite; -moz-animation: spin 2s linear infinite;
z-index: 1001; -o-animation: spin 2s linear infinite;
} animation: spin 2s linear infinite;
z-index: 1001;
#loader:before { }
content: "";
position: absolute; #loader:before {
top: 5px; content: "";
left: 5px; position: absolute;
right: 5px; top: 5px;
bottom: 5px; left: 5px;
border-radius: 50%; right: 5px;
border: 3px solid transparent; bottom: 5px;
border-top-color: #FFF; border-radius: 50%;
-webkit-animation: spin 3s linear infinite; border: 3px solid transparent;
-moz-animation: spin 3s linear infinite; border-top-color: #FFF;
-o-animation: spin 3s linear infinite; -webkit-animation: spin 3s linear infinite;
-ms-animation: spin 3s linear infinite; -moz-animation: spin 3s linear infinite;
animation: spin 3s linear infinite; -o-animation: spin 3s linear infinite;
} -ms-animation: spin 3s linear infinite;
animation: spin 3s linear infinite;
#loader:after { }
content: "";
position: absolute; #loader:after {
top: 15px; content: "";
left: 15px; position: absolute;
right: 15px; top: 15px;
bottom: 15px; left: 15px;
border-radius: 50%; right: 15px;
border: 3px solid transparent; bottom: 15px;
border-top-color: #FFF; border-radius: 50%;
-moz-animation: spin 1.5s linear infinite; border: 3px solid transparent;
-o-animation: spin 1.5s linear infinite; border-top-color: #FFF;
-ms-animation: spin 1.5s linear infinite; -moz-animation: spin 1.5s linear infinite;
-webkit-animation: spin 1.5s linear infinite; -o-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite; -ms-animation: spin 1.5s linear infinite;
} -webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg); @-webkit-keyframes spin {
-ms-transform: rotate(0deg); 0% {
transform: rotate(0deg); -webkit-transform: rotate(0deg);
} -ms-transform: rotate(0deg);
transform: rotate(0deg);
100% { }
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg); 100% {
transform: rotate(360deg); -webkit-transform: rotate(360deg);
} -ms-transform: rotate(360deg);
} transform: rotate(360deg);
}
@keyframes spin { }
0% {
-webkit-transform: rotate(0deg); @keyframes spin {
-ms-transform: rotate(0deg); 0% {
transform: rotate(0deg); -webkit-transform: rotate(0deg);
} -ms-transform: rotate(0deg);
transform: rotate(0deg);
100% { }
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg); 100% {
transform: rotate(360deg); -webkit-transform: rotate(360deg);
} -ms-transform: rotate(360deg);
} transform: rotate(360deg);
}
}
#loader-wrapper .loader-section {
position: fixed;
top: 0; #loader-wrapper .loader-section {
width: 51%; position: fixed;
height: 100%; top: 0;
background: #7171C6; width: 51%;
z-index: 1000; height: 100%;
-webkit-transform: translateX(0); background: #7171C6;
-ms-transform: translateX(0); z-index: 1000;
transform: translateX(0); -webkit-transform: translateX(0);
} -ms-transform: translateX(0);
transform: translateX(0);
#loader-wrapper .loader-section.section-left { }
left: 0;
} #loader-wrapper .loader-section.section-left {
left: 0;
#loader-wrapper .loader-section.section-right { }
right: 0;
} #loader-wrapper .loader-section.section-right {
right: 0;
}
.loaded #loader-wrapper .loader-section.section-left {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%); .loaded #loader-wrapper .loader-section.section-left {
transform: translateX(-100%); -webkit-transform: translateX(-100%);
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); -ms-transform: translateX(-100%);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); transform: translateX(-100%);
} -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
.loaded #loader-wrapper .loader-section.section-right { }
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%); .loaded #loader-wrapper .loader-section.section-right {
transform: translateX(100%); -webkit-transform: translateX(100%);
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); -ms-transform: translateX(100%);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); transform: translateX(100%);
} -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
.loaded #loader { }
opacity: 0;
-webkit-transition: all 0.3s ease-out; .loaded #loader {
transition: all 0.3s ease-out; opacity: 0;
} -webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
.loaded #loader-wrapper { }
visibility: hidden;
-webkit-transform: translateY(-100%); .loaded #loader-wrapper {
-ms-transform: translateY(-100%); visibility: hidden;
transform: translateY(-100%); -webkit-transform: translateY(-100%);
-webkit-transition: all 0.3s 1s ease-out; -ms-transform: translateY(-100%);
transition: all 0.3s 1s ease-out; transform: translateY(-100%);
} -webkit-transition: all 0.3s 1s ease-out;
transition: all 0.3s 1s ease-out;
.no-js #loader-wrapper { }
display: none;
} .no-js #loader-wrapper {
display: none;
.no-js h1 { }
color: #222222;
} .no-js h1 {
color: #222222;
#loader-wrapper .load_title { }
font-family: 'Open Sans';
color: #FFF; #loader-wrapper .load_title {
font-size: 19px; font-family: 'Open Sans';
width: 100%; color: #FFF;
text-align: center; font-size: 19px;
z-index: 9999999999999; width: 100%;
position: absolute; text-align: center;
top: 60%; z-index: 9999999999999;
opacity: 1; position: absolute;
line-height: 30px; top: 60%;
} opacity: 1;
line-height: 30px;
#loader-wrapper .load_title span { }
font-weight: normal;
font-style: italic; #loader-wrapper .load_title span {
font-size: 13px; font-weight: normal;
color: #FFF; font-style: italic;
opacity: 0.5; font-size: 13px;
} color: #FFF;
</style> opacity: 0.5;
}
</style>
</head> </head>
<body> <body>
<div id="app"> <div id="app">
<div id="loader-wrapper"> <div id="loader-wrapper">
<div id="loader"></div> <div id="loader"></div>
<div class="loader-section section-left"></div> <div class="loader-section section-left"></div>
<div class="loader-section section-right"></div> <div class="loader-section section-right"></div>
<div class="load_title">正在加载系统资源,请耐心等待</div> <div class="load_title">正在加载系统资源,请耐心等待</div>
</div> </div>
</div> </div>
<script type="module" src="/src/main.js"></script> <script src="/src/main.js" type="module"></script>
</body> </body>
</html> </html>

@ -1,6 +1,14 @@
import request from '@/utils/request' import request from '@/utils/request'
import Cookies from "js-cookie"; import Cookies from "js-cookie";
// 切换语言
export function cutLang() {
return request({
url: '/system/language/change',
method: 'get',
})
}
// 登录方法 // 登录方法
export function login(username, password, code, uuid) { export function login(username, password, code, uuid) {
const data = { const data = {

@ -17,20 +17,22 @@
<script setup> <script setup>
import useAppStore from "@/store/modules/app"; import useAppStore from "@/store/modules/app";
import {useI18n} from "vue-i18n";
const {t} = useI18n();
const appStore = useAppStore(); const appStore = useAppStore();
const size = computed(() => appStore.size); const size = computed(() => appStore.size);
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance();
const sizeOptions = ref([ const sizeOptions = ref([
{ label: "较大", value: "large" }, { label: t('sizeSelect.large'), value: "large" },
{ label: "默认", value: "default" }, { label: t('sizeSelect.default'), value: "default" },
{ label: "稍小", value: "small" }, { label: t('sizeSelect.small'), value: "small" },
]); ]);
function handleSetSize(size) { function handleSetSize(size) {
proxy.$modal.loading("正在设置布局大小,请稍候..."); proxy.$modal.loading(t('sizeSelect.wait'));
appStore.setSize(size); appStore.setSize(size);
setTimeout("window.location.reload()", 1000); setTimeout("window.location.reload()", 1000);
} }

@ -38,16 +38,41 @@ export default {
saveConfiguration: 'Save Config', saveConfiguration: 'Save Config',
resetConfiguration: 'Reset Config', resetConfiguration: 'Reset Config',
}, },
profile:{ profile: {
personalInfo:'Personal Info', personalInfo: 'Personal Info',
userName:'User Name', userName: 'User Name',
phone:'Phone', phone: 'Phone',
email:'Email', email: 'Email',
department:'Department', department: 'Department',
role:'Role', role: 'Role',
creationDate:'Creation Date', creationDate: 'Creation Date',
basicInformation:'Basic Information', basicInformation: 'Basic Information',
changePassword:'Change Password' changePassword: 'Change Password'
},
userInfo: {
username: 'username',
phone: 'phone',
email: 'email',
sex: 'sex',
male: 'male',
female: 'female'
},
userAvatar: {
uploadAvatar: 'Click to upload avatar',
choose: 'Choose',
submit: 'Submit',
ModifyAvatar: 'Modify Avatar'
},
resetPwd: {
oldPassword: 'Old Password',
newPassword: 'New Password',
confirmPassword: 'Confirm Password',
},
sizeSelect:{
large:'Large',
default:'Default',
small:'Small',
wait:'Please wait, setting layout size...',
}, },
option: { option: {
refresh: 'refresh', refresh: 'refresh',
@ -61,12 +86,15 @@ export default {
cancel: 'cancel', cancel: 'cancel',
ok: 'ok', ok: 'ok',
hint: 'hint', hint: 'hint',
save: 'save',
close: 'close',
confirmDeletion: 'Are you sure to delete the data item whose {key} is {value}?', confirmDeletion: 'Are you sure to delete the data item whose {key} is {value}?',
modificationSuccessful: 'Modification Successful', modificationSuccessful: 'Modification Successful',
addedSuccessfully: 'Added Successfully', addedSuccessfully: 'Added Successfully',
successfullyDeleted: 'Successfully Deleted' successfullyDeleted: 'Successfully Deleted'
}, },
common: { common: {
loadTitle:'Loading system resources, please be patient',
success: 'success', success: 'success',
show: 'show', show: 'show',
hide: 'hide', hide: 'hide',

@ -49,6 +49,31 @@ export default {
basicInformation:'基本资料', basicInformation:'基本资料',
changePassword:'修改密码' changePassword:'修改密码'
}, },
userInfo:{
username:'用户昵称',
phone:'手机号码',
email:'邮箱',
sex:'性别',
male:'男',
female:'女'
},
userAvatar:{
uploadAvatar:'点击上传头像',
choose:'选择',
submit:'提 交',
ModifyAvatar:'修改头像'
},
resetPwd:{
oldPassword:'旧密码',
newPassword:'新密码',
confirmPassword:'确认密码',
},
sizeSelect:{
large:'较大',
default:'默认',
small:'稍小',
wait:'正在设置布局大小,请稍候...',
},
option: { option: {
refresh: '刷新', refresh: '刷新',
option: '操作', option: '操作',
@ -61,12 +86,15 @@ export default {
cancel: '取 消', cancel: '取 消',
ok: '确 定', ok: '确 定',
hint: '提示', hint: '提示',
save:'保存',
close:'关闭',
confirmDeletion: '是否确认删除%{key}为%{value}的数据项?', confirmDeletion: '是否确认删除%{key}为%{value}的数据项?',
modificationSuccessful: '修改成功', modificationSuccessful: '修改成功',
addedSuccessfully: '新增成功', addedSuccessfully: '新增成功',
successfullyDeleted: '删除成功' successfullyDeleted: '删除成功'
}, },
common: { common: {
loadTitle:'正在加载系统资源,请耐心等待',
success: '成功', success: '成功',
show: '显示', show: '显示',
hide: '隐藏', hide: '隐藏',

@ -72,6 +72,7 @@
<script setup> <script setup>
import {ElMessageBox} from 'element-plus' import {ElMessageBox} from 'element-plus'
import {cutLang} from "@/api/login";
import Breadcrumb from '@/components/Breadcrumb' import Breadcrumb from '@/components/Breadcrumb'
import TopNav from '@/components/TopNav' import TopNav from '@/components/TopNav'
import Hamburger from '@/components/Hamburger' import Hamburger from '@/components/Hamburger'
@ -91,7 +92,9 @@ const userStore = useUserStore()
const settingsStore = useSettingsStore() const settingsStore = useSettingsStore()
const lang = (e) => { const lang = (e) => {
Cookies.set('language', e) Cookies.set('language', e)
location.reload() cutLang().finally(() => {
setTimeout( () => location.reload(),10)
})
} }
function toggleSideBar() { function toggleSideBar() {

@ -43,6 +43,7 @@ import ImagePreview from "@/components/ImagePreview"
import TreeSelect from '@/components/TreeSelect' import TreeSelect from '@/components/TreeSelect'
// 字典标签组件 // 字典标签组件
import DictTag from '@/components/DictTag' import DictTag from '@/components/DictTag'
import {useI18n} from "vue-i18n";
const app = createApp(App) const app = createApp(App)

@ -98,7 +98,7 @@
</template> </template>
<script setup> <script setup>
import {getCodeImg} from "@/api/login"; import {getCodeImg,cutLang} from "@/api/login";
import Cookies from "js-cookie"; import Cookies from "js-cookie";
import {decrypt, encrypt} from "@/utils/jsencrypt"; import {decrypt, encrypt} from "@/utils/jsencrypt";
import useUserStore from '@/store/modules/user' import useUserStore from '@/store/modules/user'
@ -108,7 +108,11 @@ import {useI18n} from 'vue-i18n';
const {t} = useI18n(); const {t} = useI18n();
const lang = (e) => { const lang = (e) => {
Cookies.set('language',e) Cookies.set('language',e)
location.reload() cutLang().finally(() => {
setTimeout( () => location.reload(),10)
})
} }
const userStore = useUserStore() const userStore = useUserStore()
const router = useRouter(); const router = useRouter();

@ -1,24 +1,28 @@
<template> <template>
<el-form ref="pwdRef" :model="user" :rules="rules" label-width="80px"> <el-form ref="pwdRef" :model="user" :rules="rules" :label-width="isEN ? '160px': '80px'">
<el-form-item label="旧密码" prop="oldPassword"> <el-form-item :label="t('resetPwd.oldPassword')" prop="oldPassword">
<el-input v-model="user.oldPassword" placeholder="请输入旧密码" type="password" show-password /> <el-input v-model="user.oldPassword" :placeholder="t('common.pleaseEnter') + t('resetPwd.oldPassword')" type="password" show-password />
</el-form-item> </el-form-item>
<el-form-item label="新密码" prop="newPassword"> <el-form-item :label="t('resetPwd.newPassword')" prop="newPassword">
<el-input v-model="user.newPassword" placeholder="请输入新密码" type="password" show-password /> <el-input v-model="user.newPassword" :placeholder="t('common.pleaseEnter') + t('resetPwd.newPassword')" type="password" show-password />
</el-form-item> </el-form-item>
<el-form-item label="确认密码" prop="confirmPassword"> <el-form-item :label="t('resetPwd.confirmPassword')" prop="confirmPassword">
<el-input v-model="user.confirmPassword" placeholder="请确认新密码" type="password" show-password/> <el-input v-model="user.confirmPassword" :placeholder="t('common.pleaseEnter') + t('resetPwd.confirmPassword')" type="password" show-password/>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" @click="submit"></el-button> <el-button type="primary" @click="submit">{{ t('option.save') }}</el-button>
<el-button type="danger" @click="close"></el-button> <el-button type="danger" @click="close">{{ t('option.close') }}</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</template> </template>
<script setup> <script setup>
import { updateUserPwd } from "@/api/system/user"; import { updateUserPwd } from "@/api/system/user";
import {useI18n} from "vue-i18n";
import Cookies from "js-cookie";
const {t} = useI18n();
const isEN = (Cookies.get('language') || 'zhCn') === 'en'
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance();
const user = reactive({ const user = reactive({

@ -1,6 +1,6 @@
<template> <template>
<div class="user-info-head" @click="editCropper()"> <div class="user-info-head" @click="editCropper()">
<img :src="options.img" title="点击上传头像" class="img-circle img-lg" /> <img :src="options.img" :title="t('userAvatar.uploadAvatar')" class="img-circle img-lg" />
<el-dialog :title="title" v-model="open" width="800px" append-to-body @opened="modalOpened" @close="closeDialog"> <el-dialog :title="title" v-model="open" width="800px" append-to-body @opened="modalOpened" @close="closeDialog">
<el-row> <el-row>
<el-col :xs="24" :md="12" :style="{ height: '350px' }"> <el-col :xs="24" :md="12" :style="{ height: '350px' }">
@ -33,7 +33,7 @@
:before-upload="beforeUpload" :before-upload="beforeUpload"
> >
<el-button> <el-button>
选择 {{ t('userAvatar.choose') }}
<el-icon class="el-icon--right"><Upload /></el-icon> <el-icon class="el-icon--right"><Upload /></el-icon>
</el-button> </el-button>
</el-upload> </el-upload>
@ -51,7 +51,7 @@
<el-button icon="RefreshRight" @click="rotateRight()"></el-button> <el-button icon="RefreshRight" @click="rotateRight()"></el-button>
</el-col> </el-col>
<el-col :lg="{ span: 2, offset: 6 }" :md="2"> <el-col :lg="{ span: 2, offset: 6 }" :md="2">
<el-button type="primary" @click="uploadImg()"> </el-button> <el-button type="primary" @click="uploadImg()">{{ t('userAvatar.submit') }}</el-button>
</el-col> </el-col>
</el-row> </el-row>
</el-dialog> </el-dialog>
@ -63,13 +63,15 @@ import "vue-cropper/dist/index.css";
import { VueCropper } from "vue-cropper"; import { VueCropper } from "vue-cropper";
import { uploadAvatar } from "@/api/system/user"; import { uploadAvatar } from "@/api/system/user";
import useUserStore from "@/store/modules/user"; import useUserStore from "@/store/modules/user";
import {useI18n} from "vue-i18n";
const {t} = useI18n();
const userStore = useUserStore(); const userStore = useUserStore();
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance();
const open = ref(false); const open = ref(false);
const visible = ref(false); const visible = ref(false);
const title = ref("修改头像"); const title = ref(t('userAvatar.ModifyAvatar'));
// //
const options = reactive({ const options = reactive({

@ -1,30 +1,32 @@
<template> <template>
<el-form ref="userRef" :model="user" :rules="rules" label-width="80px"> <el-form ref="userRef" :model="user" :rules="rules" label-width="80px">
<el-form-item label="用户昵称" prop="nickName"> <el-form-item :label="t('userInfo.username')" prop="nickName">
<el-input v-model="user.nickName" maxlength="30" /> <el-input v-model="user.nickName" maxlength="30" />
</el-form-item> </el-form-item>
<el-form-item label="手机号码" prop="phonenumber"> <el-form-item :label="t('userInfo.phone')" prop="phonenumber">
<el-input v-model="user.phonenumber" maxlength="11" /> <el-input v-model="user.phonenumber" maxlength="11" />
</el-form-item> </el-form-item>
<el-form-item label="邮箱" prop="email"> <el-form-item :label="t('userInfo.email')" prop="email">
<el-input v-model="user.email" maxlength="50" /> <el-input v-model="user.email" maxlength="50" />
</el-form-item> </el-form-item>
<el-form-item label="性别"> <el-form-item :label="t('userInfo.sex')">
<el-radio-group v-model="user.sex"> <el-radio-group v-model="user.sex">
<el-radio label="0"></el-radio> <el-radio label="0">{{ t('userInfo.male') }}</el-radio>
<el-radio label="1"></el-radio> <el-radio label="1">{{ t('userInfo.female') }}</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" @click="submit"></el-button> <el-button type="primary" @click="submit">{{ t('option.save') }}</el-button>
<el-button type="danger" @click="close"></el-button> <el-button type="danger" @click="close">{{ t('option.close') }}</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</template> </template>
<script setup> <script setup>
import { updateUserProfile } from "@/api/system/user"; import { updateUserProfile } from "@/api/system/user";
import {useI18n} from "vue-i18n";
const {t} = useI18n();
const props = defineProps({ const props = defineProps({
user: { user: {
type: Object type: Object

Loading…
Cancel
Save