zfc/guzhi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add vue i18n

Browse Source
This commit is contained in:
QuangNN 2023-10-30 23:48:25 +07:00
parent 5daaca331f
commit 1740d3d281
5 changed files with 97 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/i18n/index.js
View File

@ -5,6 +5,7 @@ import messages from './messages'
const i18n = createI18n({
legacy: false,
globalInjection: true,
locale: 'en',
fallbackLocale: 'en',
messages: messages

30
web/i18n/messages/cn.json
View File

@ -24,8 +24,38 @@
"label_project": "项目",
"label_more": "更多"
},
"profile": {
"label_profile": "个人中心",
"label_modify_information": "修改信息",
"label_change_password": "修改密码",
"label_avatar": "头像",
"label_username": "用户姓名",
"label_email": "邮箱",
"label_old_password": "旧密码",
"label_new_password": "新密码",
"label_confirm_password": "确认密码",
"placeholder_username": "请填写姓名",
"placeholder_email": "请填写邮箱",
"placeholder_old_password": "请输入旧密码",
"placeholder_new_password": "请输入新密码",
"placeholder_confirm_password": "请再次输入新密码",
"message_username_required": "请输入昵称",
"message_old_password_required": "请输入旧密码",
"message_new_password_required": "请输入新密码",
"message_password_confirmation_required": "请再次输入密码",
"message_password_confirmation_diff": "两次密码输入不一致"
},
"errors": {
"label_error": "错误页",
"text_back_to_home": "返回首页"
}
},
"common": {
"text": {
"update_success": "修改成功"
},
"buttons": {
"update": "修改"
}
}
}

30
web/i18n/messages/en.json
View File

@ -24,8 +24,38 @@
"label_project": "Project",
"label_more": "More"
},
"profile": {
"label_profile": "Profile",
"label_modify_information": "Modify your information",
"label_change_password": "Change password",
"label_avatar": "Avatar",
"label_username": "Username",
"label_email": "Email",
"label_old_password": "Old password",
"label_new_password": "New password",
"label_confirm_password": "Password confirmation",
"placeholder_username": "Please fill in your name",
"placeholder_email": "Please fill in your email address",
"placeholder_old_password": "Please enter the old password",
"placeholder_new_password": "Please enter a new password",
"placeholder_confirm_password": "Please enter the confirm password",
"message_username_required": "Please enter username",
"message_old_password_required": "Please enter the old password",
"message_new_password_required": "Please enter a new password",
"message_password_confirmation_required": "Please enter confirm password",
"message_password_confirmation_diff": "Two password inputs are inconsistent"
},
"errors": {
"label_error": "Error",
"text_back_to_home": "Back to home"
}
},
"common": {
"text": {
"update_success": "Update success"
},
"buttons": {
"update": "Update"
}
}
}

17
web/src/router/routes/index.js
View File

@ -1,8 +1,11 @@
import i18n from '~/i18n'
const {t} = i18n.global
const Layout = () => import('@/layout/index.vue')
export const basicRoutes = [
{
name: '工作台',
name: t('views.workbench.label_workbench'),
path: '/',
component: Layout,
redirect: '/workbench', // 默认跳转到首页
@ -10,9 +13,9 @@ export const basicRoutes = [
{
path: 'workbench',
component: () => import('@/views/workbench/index.vue'),
name: '工作台',
name: t('views.workbench.label_workbench'),
meta: {
title: '工作台',
title: t('views.workbench.label_workbench'),
icon: 'icon-park-outline:workbench',
affix: true,
},
@ -21,7 +24,7 @@ export const basicRoutes = [
meta: { order: 0 },
},
{
name: '个人中心',
name: t('views.profile.label_profile'),
path: '/',
component: Layout,
isHidden: true,
@ -29,9 +32,9 @@ export const basicRoutes = [
{
path: 'profile',
component: () => import('@/views/profile/index.vue'),
name: '个人中心',
name: t('views.profile.label_profile'),
meta: {
title: '个人中心',
title: t('views.profile.label_profile'),
icon: 'user',
affix: true,
},
@ -45,7 +48,7 @@ export const basicRoutes = [
component: Layout,
redirect: '/error-page/404',
meta: {
title: '错误页',
title: t('views.errors.label_error'),
icon: 'mdi:alert-circle-outline',
order: 99,
},

51
web/src/views/profile/index.vue
View File

@ -1,12 +1,13 @@
<script setup>
import { ref } from 'vue'
import { NButton, NForm, NFormItem, NInput, NTabPane, NTabs, NImage } from 'naive-ui'
import {useI18n} from "vue-i18n";
import CommonPage from '@/components/page/CommonPage.vue'
import { useUserStore } from '@/store'
import api from '@/api'
import { is } from '~/src/utils'
const {t} = useI18n()
const userStore = useUserStore()
const isLoading = ref(false)
@ -26,7 +27,7 @@ async function updateProfile() {
.then(() => {
userStore.setUserInfo(infoForm.value)
isLoading.value = false
$message.success('修改成功')
$message.success(t('common.text.update_success'))
})
.catch(() => {
isLoading.value = false
@ -37,7 +38,7 @@ const infoFormRules = {
username: [
{
required: true,
message: '请输入昵称',
message: t('views.profile.message_username_required'),
trigger: ['input', 'blur', 'change'],
},
],
@ -77,31 +78,31 @@ const passwordFormRules = {
old_password: [
{
required: true,
message: '请输入旧密码',
message: t('views.profile.message_old_password_required'),
trigger: ['input', 'blur', 'change'],
},
],
new_password: [
{
required: true,
message: '请输入新密码',
message: t('views.profile.message_new_password_required'),
trigger: ['input', 'blur', 'change'],
},
],
confirm_password: [
{
required: true,
message: '请再次输入密码',
message: t('views.profile.message_password_confirmation_required'),
trigger: ['input', 'blur'],
},
{
validator: validatePasswordStartWith,
message: '两次密码输入不一致',
message: t('views.profile.message_password_confirmation_diff'),
trigger: 'input',
},
{
validator: validatePasswordSame,
message: '两次密码输入不一致',
message: t('views.profile.message_password_confirmation_diff'),
trigger: ['blur', 'password-input'],
},
],
@ -121,7 +122,7 @@ function validatePasswordSame(rule, value) {
<template>
<CommonPage :show-header="false">
<NTabs type="line" animated>
<NTabPane name="website" tab="修改信息">
<NTabPane name="website" :tab="$t('views.profile.label_modify_information')">
<div class="m-30 flex items-center">
<NForm
ref="infoFormRef"
@ -132,56 +133,56 @@ function validatePasswordSame(rule, value) {
:rules="infoFormRules"
class="w-400"
>
<NFormItem label="头像" path="avatar">
<NFormItem :label="$t('views.profile.label_avatar')" path="avatar">
<NImage width="100" :src="infoForm.avatar"></NImage>
</NFormItem>
<NFormItem label="用户姓名" path="username">
<NInput v-model:value="infoForm.username" type="text" placeholder="请填写姓名" />
<NFormItem :label="$t('views.profile.label_username')" path="username">
<NInput v-model:value="infoForm.username" type="text" :placeholder="$t('views.profile.placeholder_username')" />
</NFormItem>
<NFormItem label="邮箱" path="email">
<NInput v-model:value="infoForm.email" type="text" placeholder="请填写邮箱" />
<NFormItem :label="$t('views.profile.label_email')" path="email">
<NInput v-model:value="infoForm.email" type="text" :placeholder="$t('views.profile.placeholder_email')" />
</NFormItem>
<NButton type="primary" :loading="isLoading" @click="updateProfile"> 修改 </NButton>
<NButton type="primary" :loading="isLoading" @click="updateProfile"> {{$t("common.buttons.update")}} </NButton>
</NForm>
</div>
</NTabPane>
<NTabPane name="contact" tab="修改密码">
<NTabPane name="contact" :tab="$t('views.profile.label_change_password')">
<NForm
ref="passwordFormRef"
label-placement="left"
label-align="left"
:model="passwordForm"
label-width="100"
label-width="200"
:rules="passwordFormRules"
class="m-30 w-400"
class="m-30 w-500"
>
<NFormItem label="旧密码" path="old_password">
<NFormItem :label="$t('views.profile.label_old_password')" path="old_password">
<NInput
v-model:value="passwordForm.old_password"
type="password"
show-password-on="mousedown"
placeholder="请输入旧密码"
:placeholder="$t('views.profile.placeholder_old_password')"
/>
</NFormItem>
<NFormItem label="新密码" path="new_password">
<NFormItem :label="$t('views.profile.label_new_password')" path="new_password">
<NInput
v-model:value="passwordForm.new_password"
:disabled="!passwordForm.old_password"
type="password"
show-password-on="mousedown"
placeholder="请输入新密码"
:placeholder="$t('views.profile.placeholder_new_password')"
/>
</NFormItem>
<NFormItem label="确认密码" path="confirm_password">
<NFormItem :label="$t('views.profile.label_confirm_password')" path="confirm_password">
<NInput
v-model:value="passwordForm.confirm_password"
:disabled="!passwordForm.new_password"
type="password"
show-password-on="mousedown"
placeholder="请再次输入新密码"
:placeholder="$t('views.profile.placeholder_confirm_password')"
/>
</NFormItem>
<NButton type="primary" :loading="isLoading" @click="updatePassword"> 修改 </NButton>
<NButton type="primary" :loading="isLoading" @click="updatePassword"> {{$t("common.buttons.update")}} </NButton>
</NForm>
</NTabPane>
</NTabs>