Skip to content

Commit

Permalink
Merge pull request #346 from tongque0/main
Browse files Browse the repository at this point in the history
feat:完成layout部分国际化
  • Loading branch information
wangdan-fit2cloud committed May 6, 2024
2 parents 2d7562f + ac1cece commit 71fc0e5
Show file tree
Hide file tree
Showing 7 changed files with 113 additions and 38 deletions.
8 changes: 4 additions & 4 deletions ui/src/layout/components/top-bar/avatar/AboutDialog.vue
Original file line number Diff line number Diff line change
Expand Up @@ -16,23 +16,23 @@
>
<div class="flex align-center cursor">
<AppIcon iconName="app-reading" class="mr-16 ml-8" style="font-size: 24px"></AppIcon>
<span>用户手册</span>
<span>{{ $t("layout.topbar.wiki") }}</span>
</div>
</el-card>
<el-card shadow="hover" class="mb-16" @click="toUrl('https://github.com/1Panel-dev/MaxKB')">
<div class="flex align-center cursor">
<AppIcon iconName="app-github" class="mr-16 ml-8" style="font-size: 24px"></AppIcon>
<span>项目地址</span>
<span>{{ $t("layout.topbar.github") }}</span>
</div>
</el-card>
<el-card shadow="hover" class="mb-16" @click="toUrl('https://bbs.fit2cloud.com/c/mk/11')">
<div class="flex align-center cursor">
<AppIcon iconName="app-help" class="mr-16 ml-8" style="font-size: 24px"></AppIcon>
<span>论坛求助</span>
<span>{{ $t("layout.topbar.forum") }}</span>
</div>
</el-card>
</div>
<div class="text-center">版本号:{{ version }}</div>
<div class="text-center">{{ $t("layout.topbar.version") }}:{{ version }}</div>
</el-dialog>
</template>
<script setup lang="ts">
Expand Down
40 changes: 22 additions & 18 deletions ui/src/layout/components/top-bar/avatar/ResetPassword.vue
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
<template>
<el-dialog v-model="resetPasswordDialog" title="修改密码">
<el-dialog v-model="resetPasswordDialog" :title="$t('layout.topbar.avatar.resetPassword')">
<el-form
class="reset-password-form mb-24"
ref="resetPasswordFormRef"
:model="resetPasswordForm"
:rules="rules"
>
<p class="mb-8 lighter">新密码</p>
<p class="mb-8 lighter">{{ $t("layout.topbar.avatar.dialog.newPassword") }}</p>
<el-form-item prop="password" style="margin-bottom: 8px">
<el-input
type="password"
class="input-item"
v-model="resetPasswordForm.password"
placeholder="请输入密码"
:placeholder="$t('layout.topbar.avatar.dialog.enterPassword')"
show-password
>
</el-input>
Expand All @@ -22,40 +22,40 @@
type="password"
class="input-item"
v-model="resetPasswordForm.re_password"
placeholder="请输入确认密码"
:placeholder="$t('layout.topbar.avatar.dialog.confirmPassword')"
show-password
>
</el-input>
</el-form-item>
<p class="mb-8 lighter">使用邮箱</p>
<p class="mb-8 lighter">{{ $t("layout.topbar.avatar.dialog.useEmail") }}</p>
<el-form-item style="margin-bottom: 8px">
<el-input
class="input-item"
:disabled="true"
v-bind:modelValue="user.userInfo?.email"
placeholder="请输入邮箱"
:placeholder="$t('layout.topbar.avatar.dialog.enterEmail')"
>
</el-input>
</el-form-item>
<el-form-item prop="code">
<div class="flex-between w-full">
<el-input class="code-input" v-model="resetPasswordForm.code" placeholder="请输入验证码">
<el-input class="code-input" v-model="resetPasswordForm.code" :placeholder="$t('layout.topbar.avatar.dialog.enterVerificationCode')">
</el-input>
<el-button
:disabled="isDisabled"
class="send-email-button ml-8"
@click="sendEmail"
:loading="loading"
>
{{ isDisabled ? `重新发送(${time}s)` : '获取验证码' }}</el-button
>
{{ isDisabled ? $t('layout.topbar.avatar.dialog.resend', { time }) : $t('layout.topbar.avatar.dialog.getVerificationCode') }}
</el-button>
</div>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="resetPasswordDialog = false"> 取消 </el-button>
<el-button type="primary" @click="resetPassword"> 保存 </el-button>
<el-button @click="resetPasswordDialog = false">{{ $t('layout.topbar.avatar.dialog.cancel') }}</el-button>
<el-button type="primary" @click="resetPassword"> {{ $t('layout.topbar.avatar.dialog.save') }} </el-button>
</div>
</template>
</el-dialog>
Expand All @@ -68,6 +68,7 @@ import { MsgSuccess } from '@/utils/message'
import UserApi from '@/api/user'
import useStore from '@/stores'
import { useRouter } from 'vue-router'
import { t } from '@/locales'
const router = useRouter()
const { user } = useStore()
Expand All @@ -86,36 +87,37 @@ const isDisabled = ref<boolean>(false)
const time = ref<number>(60)
const rules = ref<FormRules<ResetCurrentUserPasswordRequest>>({
code: [{ required: true, message: '请输入验证码' }],
// @ts-ignore
code: [{ required: true, message: t('layout.topbar.avatar.dialog.enterVerificationCode'), trigger: 'blur' }],
password: [
{
required: true,
message: '请输入密码',
message: t('layout.topbar.avatar.dialog.enterPassword'),
trigger: 'blur'
},
{
min: 6,
max: 20,
message: '长度在 6 到 20 个字符',
message: t('layout.topbar.avatar.dialog.passwordLength'),
trigger: 'blur'
}
],
re_password: [
{
required: true,
message: '请输入确认密码',
message: t('layout.topbar.avatar.dialog.confirmPassword'),
trigger: 'blur'
},
{
min: 6,
max: 20,
message: '长度在 6 到 20 个字符',
message: t('layout.topbar.avatar.dialog.passwordLength'),
trigger: 'blur'
},
{
validator: (rule, value, callback) => {
if (resetPasswordForm.value.password != resetPasswordForm.value.re_password) {
callback(new Error('密码不一致'))
callback(new Error(t('layout.topbar.avatar.dialog.passwordMismatch')))
} else {
callback()
}
Expand All @@ -129,7 +131,7 @@ const rules = ref<FormRules<ResetCurrentUserPasswordRequest>>({
*/
const sendEmail = () => {
UserApi.sendEmailToCurrent(loading).then(() => {
MsgSuccess('发送验证码成功')
MsgSuccess(t('verificationCodeSentSuccess'))
isDisabled.value = true
handleTimeChange()
})
Expand Down Expand Up @@ -174,5 +176,7 @@ const close = () => {
}
defineExpose({ open, close })
</script>
<style lang="scss" scope></style>
6 changes: 3 additions & 3 deletions ui/src/layout/components/top-bar/avatar/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,10 @@
</p>
</div>
<el-dropdown-item class="border-t p-8" @click="openResetPassword">
修改密码
{{ $t("layout.topbar.avatar.resetPassword") }}
</el-dropdown-item>
<el-dropdown-item class="border-t" @click="openAbout"> 关于 </el-dropdown-item>
<el-dropdown-item class="border-t" @click="logout"> 退出 </el-dropdown-item>
<el-dropdown-item class="border-t" @click="openAbout"> {{ $t("layout.topbar.avatar.about") }} </el-dropdown-item>
<el-dropdown-item class="border-t" @click="logout"> {{ $t("layout.topbar.avatar.logout") }} </el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
Expand Down
2 changes: 1 addition & 1 deletion ui/src/layout/components/top-bar/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
@click="toUrl('https://github.com/1Panel-dev/MaxKB')"
></AppIcon>
</el-tooltip>
<el-tooltip effect="dark" :content="$t('layout.topbar.handbook')" placement="top">
<el-tooltip effect="dark" :content="$t('layout.topbar.wiki')" placement="top">
<AppIcon
iconName="app-reading"
class="cursor color-secondary mr-8 ml-8"
Expand Down
19 changes: 13 additions & 6 deletions ui/src/layout/components/top-bar/top-menu/MenuItem.vue
Original file line number Diff line number Diff line change
@@ -1,13 +1,17 @@
<template>
<div
class="menu-item-container flex-center h-full"
:class="isActive ? 'active' : ''"
@click="router.push({ name: menu.name })"
>
<div class="menu-item-container flex-center h-full" :class="isActive ? 'active' : ''"
@click="router.push({ name: menu.name })">
<!-- <div class="icon">
<AppIcon :iconName="menu.meta ? (menu.meta.icon as string) : '404'" />
</div> -->
<div class="title">{{ menu.meta?.title }}</div>
<div class="title">
{{
$te(`layout.topbar.MenuItem.${String(props.menu.name)}`)
? $t(`layout.topbar.MenuItem.${String(props.menu.name)}`)
: menu.meta?.title
}}
</div>

</div>
</template>
<script setup lang="ts">
Expand All @@ -31,18 +35,21 @@ const isActive = computed(() => {
cursor: pointer;
font-size: 16px;
position: relative;

.icon {
font-size: 15px;
margin-right: 5px;
margin-top: 2px;
}

&:hover {
color: var(--el-color-primary);
}
}

.active {
color: var(--el-color-primary);

&::after {
position: absolute;
bottom: 0;
Expand Down
38 changes: 35 additions & 3 deletions ui/src/locales/lang/en_US/layout.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,39 @@
export default {
breadcrumb: {

},
sidebar: {

},
topbar: {
github:"Github",
handbook:"Handbook",
forum:"Forum"
github: "Project address",
wiki: "User manual",
forum: "Forum for help",
MenuItem: {
application: "Application",
dataset: "Knowledge base",
setting: "System settings"
},
avatar: {
resetPassword: "Change password",
about: "About",
logout: "Logout",
version:"Version",
dialog:{
newPassword:"New password",
enterPassword: "Please enter new password",
confirmPassword: "Confirm password",
passwordLength:"Password length should be between 6 and 20 characters",
passwordMismatch:"Passwords do not match",
useEmail:"Use email",
enterEmail: "Please enter email",
enterVerificationCode: "Please enter verification code",
getVerificationCode: "Get verification code",
verificationCodeSentSuccess:"Verification code sent successfully",
resend:"Resend",
cancel:"Cancel",
save:"Save",
}
}
},
};
38 changes: 35 additions & 3 deletions ui/src/locales/lang/zh_CN/layout.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,39 @@
export default {
breadcrumb: {

},
sidebar: {

},
topbar: {
github:"项目地址",
handbook:"用户手册",
forum:"论坛求助"
github: "项目地址",
wiki: "用户手册",
forum: "论坛求助",
MenuItem: {
application: "应用",
dataset: "知识库",
setting: "系统设置"
},
avatar: {
resetPassword: "修改密码",
about: "关于",
logout: "退出",
version:"版本号",
dialog:{
newPassword:"新密码",
enterPassword: "请输入修改密码",
confirmPassword: "确认密码",
passwordLength:"密码长度在 6 到 20 个字符",
passwordMismatch:"两次密码输入不一致",
useEmail:"使用邮箱",
enterEmail: "请输入邮箱",
enterVerificationCode: "请输入验证码",
getVerificationCode: "获取验证码",
verificationCodeSentSuccess:"验证码发送成功",
resend:"重新发送",
cancel:"取消",
save:"保存",
}
}
},
};

0 comments on commit 71fc0e5

Please sign in to comment.