From 1740d3d2818b3d8404de33b69dfda6e9b4473a12 Mon Sep 17 00:00:00 2001
From: QuangNN <nquang17@gmail.com>
Date: Mon, 30 Oct 2023 23:48:25 +0700
Subject: [PATCH] add vue i18n

---
 web/i18n/index.js               |  1 +
 web/i18n/messages/cn.json       | 30 +++++++++++++++++++
 web/i18n/messages/en.json       | 30 +++++++++++++++++++
 web/src/router/routes/index.js  | 17 ++++++-----
 web/src/views/profile/index.vue | 51 +++++++++++++++++----------------
 5 files changed, 97 insertions(+), 32 deletions(-)

diff --git a/web/i18n/index.js b/web/i18n/index.js
index 1fcb146..aa3fdf5 100644
--- a/web/i18n/index.js
+++ b/web/i18n/index.js
@@ -5,6 +5,7 @@ import messages from './messages'
 
 const i18n = createI18n({
   legacy: false,
+  globalInjection: true,
   locale: 'en',
   fallbackLocale: 'en',
   messages: messages
diff --git a/web/i18n/messages/cn.json b/web/i18n/messages/cn.json
index de05de7..4571ef1 100644
--- a/web/i18n/messages/cn.json
+++ b/web/i18n/messages/cn.json
@@ -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": "修改"
+    }
   }
 }
\ No newline at end of file
diff --git a/web/i18n/messages/en.json b/web/i18n/messages/en.json
index ccb38de..1f1783f 100644
--- a/web/i18n/messages/en.json
+++ b/web/i18n/messages/en.json
@@ -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"
+    }
   }
 }
\ No newline at end of file
diff --git a/web/src/router/routes/index.js b/web/src/router/routes/index.js
index 805c541..bfb5a2a 100644
--- a/web/src/router/routes/index.js
+++ b/web/src/router/routes/index.js
@@ -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,
     },
diff --git a/web/src/views/profile/index.vue b/web/src/views/profile/index.vue
index 2bd51e8..9fd1fb6 100644
--- a/web/src/views/profile/index.vue
+++ b/web/src/views/profile/index.vue
@@ -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>