feat: i18n

ui/env.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="vite/client" />
 declare module 'element-plus/dist/locale/zh-cn.mjs'
+declare module 'element-plus/dist/locale/en.mjs'
+declare module 'element-plus/dist/locale/zh-tw.mjs'
 declare module 'markdown-it-task-lists'
 declare module 'markdown-it-abbr'
 declare module 'markdown-it-anchor'

ui/src/api/user.ts

@@ -176,6 +176,19 @@ const getWecomCallback: (code: string, loading?: Ref<boolean>) => Promise<Result
   return get('wecom', { code }, loading)
 }
 
+/**
+ * 设置语言
+ * data: {
+ * "language": "string"
+ * }
+ */
+const postLanguage: (data: any, loading?: Ref<boolean>) => Promise<Result<User>> = (
+  data,
+  loading
+) => {
+  return post('/user/language', data, undefined, loading)
+}
+
 export default {
   login,
   register,
@@ -192,5 +205,6 @@ export default {
   getAuthType,
   getDingCallback,
   getQrType,
-  getWecomCallback
+  getWecomCallback,
+  postLanguage
 }

ui/src/components/ai-chat/component/control/index.vue

@@ -16,7 +16,7 @@ import bus from '@/bus'
 import { ref, nextTick, onMounted } from 'vue'
 import { t } from '@/locales'
 const isOpen = ref<boolean>(false)
-const eventVal = ref()
+const eventVal = ref<any>({})
 function getSelection() {
   const selection = window.getSelection()
   if (selection && selection.anchorNode == null) {

ui/src/layout/components/top-bar/avatar/APIKeyDialog.vue

@@ -1,14 +1,14 @@
 <template>
   <el-dialog
-    :title="$t('layout.topbar.avatar.apiKey')"
+    :title="$t('layout.avatar.apiKey')"
     v-model="dialogVisible"
     width="800"
     :close-on-click-modal="false"
     :close-on-press-escape="false"
   >
     <el-card shadow="never" class="layout-bg mb-16">
       <el-text type="info" class="color-secondary">{{
-        $t('layout.topbar.avatar.apiServiceAddress')
+        $t('layout.avatar.apiServiceAddress')
       }}</el-text>
       <p style="margin-top: 10px">
         <span class="vertical-middle lighter break-all">

ui/src/layout/components/top-bar/avatar/ResetPassword.vue

@@ -1,7 +1,7 @@
 <template>
   <el-dialog
     v-model="resetPasswordDialog"
-    :title="$t('layout.topbar.avatar.resetPassword')"
+    :title="$t('layout.avatar.resetPassword')"
     :close-on-click-modal="false"
     :close-on-press-escape="false"
   >
@@ -11,13 +11,13 @@
       :model="resetPasswordForm"
       :rules="rules1"
     >
-      <p class="mb-8 lighter">{{ $t('layout.topbar.avatar.dialog.newPassword') }}</p>
+      <p class="mb-8 lighter">{{ $t('layout.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="$t('layout.topbar.avatar.dialog.enterPassword')"
+          :placeholder="$t('layout.avatar.dialog.enterPassword')"
           show-password
         >
         </el-input>
@@ -27,7 +27,7 @@
           type="password"
           class="input-item"
           v-model="resetPasswordForm.re_password"
-          :placeholder="$t('layout.topbar.avatar.dialog.confirmPassword')"
+          :placeholder="$t('layout.avatar.dialog.confirmPassword')"
           show-password
         >
         </el-input>
@@ -39,13 +39,13 @@
       :model="resetPasswordForm"
       :rules="rules2"
     >
-      <p class="mb-8 lighter">{{ $t('layout.topbar.avatar.dialog.useEmail') }}</p>
+      <p class="mb-8 lighter">{{ $t('layout.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="$t('layout.topbar.avatar.dialog.enterEmail')"
+          :placeholder="$t('layout.avatar.dialog.enterEmail')"
         >
         </el-input>
       </el-form-item>
@@ -54,7 +54,7 @@
           <el-input
             class="code-input"
             v-model="resetPasswordForm.code"
-            :placeholder="$t('layout.topbar.avatar.dialog.enterVerificationCode')"
+            :placeholder="$t('layout.avatar.dialog.enterVerificationCode')"
           >
           </el-input>
           <el-button
@@ -65,8 +65,8 @@
           >
             {{
               isDisabled
-                ? $t('layout.topbar.avatar.dialog.resend', { time })
-                : $t('layout.topbar.avatar.dialog.getVerificationCode')
+                ? $t('layout.avatar.dialog.resend', { time })
+                : $t('layout.avatar.dialog.getVerificationCode')
             }}
           </el-button>
         </div>
@@ -115,32 +115,32 @@ const rules1 = ref<FormRules<ResetCurrentUserPasswordRequest>>({
   password: [
     {
       required: true,
-      message: t('layout.topbar.avatar.dialog.enterPassword'),
+      message: t('layout.avatar.dialog.enterPassword'),
       trigger: 'blur'
     },
     {
       min: 6,
       max: 20,
-      message: t('layout.topbar.avatar.dialog.passwordLength'),
+      message: t('layout.avatar.dialog.passwordLength'),
       trigger: 'blur'
     }
   ],
   re_password: [
     {
       required: true,
-      message: t('layout.topbar.avatar.dialog.confirmPassword'),
+      message: t('layout.avatar.dialog.confirmPassword'),
       trigger: 'blur'
     },
     {
       min: 6,
       max: 20,
-      message: t('layout.topbar.avatar.dialog.passwordLength'),
+      message: t('layout.avatar.dialog.passwordLength'),
       trigger: 'blur'
     },
     {
       validator: (rule, value, callback) => {
         if (resetPasswordForm.value.password != resetPasswordForm.value.re_password) {
-          callback(new Error(t('layout.topbar.avatar.dialog.passwordMismatch')))
+          callback(new Error(t('layout.avatar.dialog.passwordMismatch')))
         } else {
           callback()
         }
@@ -154,7 +154,7 @@ const rules2 = ref<FormRules<ResetCurrentUserPasswordRequest>>({
   code: [
     {
       required: true,
-      message: t('layout.topbar.avatar.dialog.enterVerificationCode'),
+      message: t('layout.avatar.dialog.enterVerificationCode'),
       trigger: 'blur'
     }
   ]
@@ -165,7 +165,7 @@ const rules2 = ref<FormRules<ResetCurrentUserPasswordRequest>>({
 const sendEmail = () => {
   resetPasswordFormRef1.value?.validate().then(() => {
     UserApi.sendEmailToCurrent(loading).then(() => {
-      MsgSuccess(t('layout.topbar.avatar.dialog.verificationCodeSentSuccess'))
+      MsgSuccess(t('layout.avatar.dialog.verificationCodeSentSuccess'))
       isDisabled.value = true
       handleTimeChange()
     })

ui/src/layout/components/top-bar/avatar/index.vue

@@ -2,11 +2,11 @@
   <el-dropdown trigger="click" type="primary">
     <div class="flex-center cursor">
       <AppAvatar>
-        <img src="@/assets/user-icon.svg" style="width: 54%" alt=""/>
+        <img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
       </AppAvatar>
       <span class="ml-8">{{ user.userInfo?.username }}</span>
       <el-icon class="el-icon--right">
-        <CaretBottom/>
+        <CaretBottom />
       </el-icon>
     </div>
 
@@ -21,45 +21,83 @@
           </p>
         </div>
         <el-dropdown-item class="border-t p-8" @click="openResetPassword">
-          {{ $t('layout.topbar.avatar.resetPassword') }}
+          {{ $t('layout.avatar.resetPassword') }}
         </el-dropdown-item>
         <div v-hasPermission="new ComplexPermission([], ['x-pack'], 'OR')">
           <el-dropdown-item class="border-t p-8" @click="openAPIKeyDialog">
-            {{ $t('layout.topbar.avatar.apiKey') }}
+            {{ $t('layout.avatar.apiKey') }}
           </el-dropdown-item>
         </div>
+        <el-dropdown-item class="border-t" style="padding: 0" @click.stop>
+          <el-dropdown class="w-full" trigger="hover" placement="left-start">
+            <div class="flex-between w-full" style="line-height: 22px; padding: 12px 11px">
+              <span> {{ $t('layout.language') }}</span>
+              <el-icon><ArrowRight /></el-icon>
+            </div>
+
+            <template #dropdown>
+              <el-dropdown-menu style="width: 180px">
+                <el-dropdown-item
+                  v-for="(lang, index) in langList"
+                  :key="index"
+                  :value="lang.value"
+                  @click="changeLang(lang.value)"
+                  class="flex-between"
+                >
+                  <span :class="lang.value === user.userInfo?.language ? 'primary' : ''">{{
+                    lang.label
+                  }}</span>
+
+                  <el-icon
+                    :class="lang.value === user.userInfo?.language ? 'primary' : ''"
+                    v-if="lang.value === user.userInfo?.language"
+                  >
+                    <Check />
+                  </el-icon>
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </el-dropdown-item>
         <el-dropdown-item class="border-t" @click="openAbout">
-          {{ $t('layout.topbar.avatar.about') }}
+          {{ $t('layout.avatar.about') }}
         </el-dropdown-item>
+
         <el-dropdown-item class="border-t" @click="logout">
-          {{ $t('layout.topbar.avatar.logout') }}
+          {{ $t('layout.avatar.logout') }}
         </el-dropdown-item>
       </el-dropdown-menu>
     </template>
   </el-dropdown>
   <ResetPassword ref="resetPasswordRef"></ResetPassword>
   <AboutDialog ref="AboutDialogRef"></AboutDialog>
-  <APIKeyDialog :user-id="user.userInfo?.id" ref="APIKeyDialogRef"/>
-  <UserPwdDialog ref="UserPwdDialogRef"/>
+  <APIKeyDialog :user-id="user.userInfo?.id" ref="APIKeyDialogRef" />
+  <UserPwdDialog ref="UserPwdDialogRef" />
 </template>
 <script setup lang="ts">
-import {ref, onMounted} from 'vue'
+import { ref, onMounted } from 'vue'
 import useStore from '@/stores'
-import {useRouter} from 'vue-router'
+import { useRouter } from 'vue-router'
 import ResetPassword from './ResetPassword.vue'
 import AboutDialog from './AboutDialog.vue'
 import UserPwdDialog from '@/views/user-manage/component/UserPwdDialog.vue'
 import APIKeyDialog from './APIKeyDialog.vue'
-import {ComplexPermission} from '@/utils/permission/type'
-
-const {user} = useStore()
+import { ComplexPermission } from '@/utils/permission/type'
+import { langList } from '@/locales/index'
+import { useLocale } from '@/locales/useLocale'
+const { user } = useStore()
 const router = useRouter()
 
 const UserPwdDialogRef = ref()
 const AboutDialogRef = ref()
 const APIKeyDialogRef = ref()
 const resetPasswordRef = ref<InstanceType<typeof ResetPassword>>()
 
+// const { changeLocale } = useLocale()
+const changeLang = (lang: string) => {
+  user.postUserLanguage(lang)
+  // changeLocale(lang)
+}
 const openAbout = () => {
   AboutDialogRef.value?.open()
 }
@@ -74,7 +112,7 @@ const openResetPassword = () => {
 
 const logout = () => {
   user.logout().then(() => {
-    router.push({name: 'login'})
+    router.push({ name: 'login' })
   })
 }
 
@@ -94,6 +132,9 @@ onMounted(() => {
 
   :deep(.el-dropdown-menu__item) {
     padding: 12px 11px;
+    &:hover {
+      background: var(--app-text-color-light-1);
+    }
   }
 }
 </style>

ui/src/layout/components/top-bar/index.vue

@@ -23,7 +23,7 @@
       </el-button>
       <el-tooltip
         effect="dark"
-        :content="$t('layout.topbar.github')"
+        :content="$t('layout.github')"
         placement="top"
         v-if="user.themeInfo?.showProject"
       >
@@ -36,7 +36,7 @@
       </el-tooltip>
       <el-tooltip
         effect="dark"
-        :content="$t('layout.topbar.wiki')"
+        :content="$t('layout.wiki')"
         placement="top"
         v-if="user.themeInfo?.showUserManual"
       >
@@ -49,7 +49,7 @@
       </el-tooltip>
       <el-tooltip
         effect="dark"
-        :content="$t('layout.topbar.forum')"
+        :content="$t('layout.forum')"
         placement="top"
         v-if="user.themeInfo?.showForum"
       >
@@ -60,7 +60,7 @@
           @click="toUrl(user.themeInfo?.forumUrl)"
         ></AppIcon>
       </el-tooltip>
-      <el-dropdown trigger="click" type="primary">
+      <!-- <el-dropdown trigger="click" type="primary">
         <template #dropdown>
           <el-dropdown-menu>
             <el-dropdown-item
@@ -78,7 +78,7 @@
           style="font-size: 20px"
         >
         </AppIcon>
-      </el-dropdown>
+      </el-dropdown> -->
       <Avatar></Avatar>
     </div>
   </div>
@@ -87,17 +87,17 @@
 import TopMenu from './top-menu/index.vue'
 import Avatar from './avatar/index.vue'
 import { useRouter } from 'vue-router'
-import { langList } from '@/locales/index'
-import { useLocale } from '@/locales/useLocale'
+// import { langList } from '@/locales/index'
+// import { useLocale } from '@/locales/useLocale'
 
 import useStore from '@/stores'
 const { user } = useStore()
 const router = useRouter()
 
-const { changeLocale } = useLocale()
-const changeLang = (lang: string) => {
-  changeLocale(lang)
-}
+// const { changeLocale } = useLocale()
+// const changeLang = (lang: string) => {
+//   changeLocale(lang)
+// }
 function toUrl(url: string) {
   window.open(url, '_blank')
 }

ui/src/layout/components/top-bar/top-menu/MenuItem.vue

@@ -6,8 +6,8 @@
     </div> -->
     <div class="title">
       {{
-        $te(`layout.topbar.MenuItem.${String(props.menu.name)}`)
-          ? $t(`layout.topbar.MenuItem.${String(props.menu.name)}`)
+        $te(`layout.MenuItem.${String(props.menu.name)}`)
+          ? $t(`layout.MenuItem.${String(props.menu.name)}`)
           : menu.meta?.title
       }}
     </div>