From ac1cece53cc8d55385fdb8d2ba73fc2c32495175 Mon Sep 17 00:00:00 2001
From: tongque <2863528786@qq.com>
Date: Wed, 1 May 2024 14:05:32 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=AE=8C=E6=88=90layout=E9=83=A8=E5=88=86?=
 =?UTF-8?q?=E5=9B=BD=E9=99=85=E5=8C=96=EF=BC=8C=E4=BB=85topbar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/top-bar/avatar/AboutDialog.vue |  8 ++--
 .../top-bar/avatar/ResetPassword.vue          | 40 ++++++++++--------
 .../components/top-bar/avatar/index.vue       |  6 +--
 ui/src/layout/components/top-bar/index.vue    |  4 +-
 ui/src/locales/lang/en_US/layout.ts           | 41 ++++++++++++++----
 ui/src/locales/lang/zh_CN/layout.ts           | 42 +++++++++++++++----
 6 files changed, 99 insertions(+), 42 deletions(-)

diff --git a/ui/src/layout/components/top-bar/avatar/AboutDialog.vue b/ui/src/layout/components/top-bar/avatar/AboutDialog.vue
index f72ecab63..5f59e4a62 100644
--- a/ui/src/layout/components/top-bar/avatar/AboutDialog.vue
+++ b/ui/src/layout/components/top-bar/avatar/AboutDialog.vue
@@ -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">
diff --git a/ui/src/layout/components/top-bar/avatar/ResetPassword.vue b/ui/src/layout/components/top-bar/avatar/ResetPassword.vue
index c063eb7f2..1d52a0193 100644
--- a/ui/src/layout/components/top-bar/avatar/ResetPassword.vue
+++ b/ui/src/layout/components/top-bar/avatar/ResetPassword.vue
@@ -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>
@@ -22,24 +22,24 @@
           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"
@@ -47,15 +47,15 @@
             @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>
@@ -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()
 
@@ -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()
         }
@@ -129,7 +131,7 @@ const rules = ref<FormRules<ResetCurrentUserPasswordRequest>>({
  */
 const sendEmail = () => {
   UserApi.sendEmailToCurrent(loading).then(() => {
-    MsgSuccess('发送验证码成功')
+    MsgSuccess(t('verificationCodeSentSuccess'))
     isDisabled.value = true
     handleTimeChange()
   })
@@ -174,5 +176,7 @@ const close = () => {
 }
 
 defineExpose({ open, close })
+
+
 </script>
 <style lang="scss" scope></style>
diff --git a/ui/src/layout/components/top-bar/avatar/index.vue b/ui/src/layout/components/top-bar/avatar/index.vue
index d6a889cf3..8042bd2a7 100644
--- a/ui/src/layout/components/top-bar/avatar/index.vue
+++ b/ui/src/layout/components/top-bar/avatar/index.vue
@@ -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>
diff --git a/ui/src/layout/components/top-bar/index.vue b/ui/src/layout/components/top-bar/index.vue
index ac8ba27b8..8d1cb6d9a 100644
--- a/ui/src/layout/components/top-bar/index.vue
+++ b/ui/src/layout/components/top-bar/index.vue
@@ -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"
@@ -35,7 +35,7 @@
           @click="toUrl('https://bbs.fit2cloud.com/c/mk/11')"
         ></AppIcon>
       </el-tooltip>
-      <el-dropdown v-if="true" trigger="click" type="primary">
+      <el-dropdown v-if="false" trigger="click" type="primary">
         <template #dropdown>
           <el-dropdown-menu>
             <el-dropdown-item
diff --git a/ui/src/locales/lang/en_US/layout.ts b/ui/src/locales/lang/en_US/layout.ts
index 32d0f1e4c..b2c01cb05 100644
--- a/ui/src/locales/lang/en_US/layout.ts
+++ b/ui/src/locales/lang/en_US/layout.ts
@@ -1,12 +1,39 @@
 export default {
+    breadcrumb: {
+
+    },
+    sidebar: {
+
+    },
     topbar: {
-        github:"Github",
-        handbook:"Handbook",
-        forum:"Forum",
-        MenuItem:{
-            application:"application",
-            dataset:"dataset",
-            setting:"setting"
+        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",
+            }
         }
     },
 };
diff --git a/ui/src/locales/lang/zh_CN/layout.ts b/ui/src/locales/lang/zh_CN/layout.ts
index 76e4df988..eb5d1d93c 100644
--- a/ui/src/locales/lang/zh_CN/layout.ts
+++ b/ui/src/locales/lang/zh_CN/layout.ts
@@ -1,13 +1,39 @@
-
 export default {
+    breadcrumb: {
+        
+    },
+    sidebar: {
+
+    },
     topbar: {
-        github:"项目地址",
-        handbook:"用户手册",
-        forum:"论坛求助",
-        MenuItem:{
-            application:"应用",
-            dataset:"知识库",
-            setting:"系统设置"
+        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:"保存",
+            }
         }
     },
 };