feat: i18n

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/layout/components/top-bar/avatar/APIKeyDialog.vue

@@ -1,6 +1,6 @@
 <template>
   <el-dialog
-    :title="$t('layout.topbar.avatar.apiKey')"
+    :title="$t('layout.avatar.apiKey')"
     v-model="dialogVisible"
     width="800"
     :close-on-click-modal="false"
@@ -8,7 +8,7 @@
   >
     <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,38 +21,71 @@
           </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" @click="openAbout">
-          {{ $t('layout.topbar.avatar.about') }}
+        <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.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()
@@ -60,6 +93,11 @@ 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>

ui/src/locales/index.ts

@@ -40,8 +40,8 @@ const importMessages = computed(() => {
 
 export const i18n = createI18n({
     legacy: false,
-    locale: useLocalStorage(localeConfigKey, 'zh_CN').value || languages.value[0] || 'zh_CN',
-    fallbackLocale: 'zh_CN',
+    locale: useLocalStorage(localeConfigKey, 'zh-CN').value || languages.value[0] || 'zh-CN',
+    fallbackLocale: 'zh-CN',
     messages: importMessages.value,
     globalInjection: true,
 });

ui/src/locales/lang/en-US/layout.ts

@@ -0,0 +1,33 @@
+export default {
+  github: 'Project address',
+  wiki: 'User manual',
+  forum: 'Forum for help',
+  MenuItem: {
+    application: 'Application',
+    dataset: 'Knowledge',
+    setting: 'System settings',
+    function_lib: 'function library'
+  },
+  avatar: {
+    resetPassword: 'Change password',
+    about: 'About',
+    logout: 'Logout',
+    version: 'Version',
+    apiKey: 'API Key',
+    apiServiceAddress: 'API Service Address',
+    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'
+    }
+  },
+  language: 'Language'
+}

ui/src/locales/lang/en_US/layout.ts

@@ -1,37 +0,0 @@
-export default {
-    breadcrumb: {},
-    sidebar: {},
-    topbar: {
-        github: "Project address",
-        wiki: "User manual",
-        forum: "Forum for help",
-        MenuItem: {
-            application: "Application",
-            dataset: "Knowledge",
-            setting: "System settings",
-            function_lib: "function library"
-            
-        },
-        avatar: {
-            resetPassword: "Change password",
-            about: "About",
-            logout: "Logout",
-            version: "Version",
-            apiKey: "API Key",
-            apiServiceAddress: "API Service Address",
-            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",
-            }
-        }
-    },
-};

ui/src/locales/lang/zh-CN/layout.ts

@@ -0,0 +1,33 @@
+export default {
+  github: '项目地址',
+  wiki: '用户手册',
+  forum: '论坛求助',
+  MenuItem: {
+    application: '应用',
+    dataset: '知识库',
+    setting: '系统管理',
+    function_lib: '函数库'
+  },
+  avatar: {
+    resetPassword: '修改密码',
+    about: '关于',
+    logout: '退出',
+    version: '版本号',
+    apiKey: 'API Key 管理',
+    apiServiceAddress: 'API 服务地址',
+    dialog: {
+      newPassword: '新密码',
+      enterPassword: '请输入修改密码',
+      confirmPassword: '确认密码',
+      passwordLength: '密码长度在 6 到 20 个字符',
+      passwordMismatch: '两次密码输入不一致',
+      useEmail: '使用邮箱',
+      enterEmail: '请输入邮箱',
+      enterVerificationCode: '请输入验证码',
+      getVerificationCode: '获取验证码',
+      verificationCodeSentSuccess: '验证码发送成功',
+      resend: '重新发送'
+    }
+  },
+  language: '语言'
+}

ui/src/locales/lang/zh-TW/layout.ts

@@ -0,0 +1,33 @@
+export default {
+  github: '項目地址',
+  wiki: '使用者手冊',
+  forum: '論壇求助',
+  MenuItem: {
+    application: '應用',
+    dataset: '知識庫',
+    setting: '系統管理',
+    function_lib: '函數庫'
+  },
+  avatar: {
+    resetPassword: '修改密碼',
+    about: '關於',
+    logout: '退出',
+    version: '版本號',
+    apiKey: 'API Key 管理',
+    apiServiceAddress: 'API 服務地址',
+    dialog: {
+      newPassword: '新密碼',
+      enterPassword: '請輸入修改密碼',
+      confirmPassword: '確認密碼',
+      passwordLength: '密碼長度在 6 到 20 個字元',
+      passwordMismatch: '兩次密碼輸入不一致',
+      useEmail: '使用郵箱',
+      enterEmail: '請輸入郵箱',
+      enterVerificationCode: '請輸入驗證碼',
+      getVerificationCode: '獲取驗證碼',
+      verificationCodeSentSuccess: '驗證碼發送成功',
+      resend: '重新發送'
+    }
+  },
+  language: '語言'
+}

ui/src/locales/lang/zh_CN/layout.ts

@@ -1,40 +0,0 @@
-export default {
-    breadcrumb: {
-        
-    },
-    sidebar: {
-
-    },
-    topbar: {
-        github: "项目地址",
-        wiki: "用户手册",
-        forum: "论坛求助",
-        MenuItem: {
-            application: "应用",
-            dataset: "知识库",
-            setting: "系统管理",
-            function_lib: "函数库"
-        },
-        avatar: {
-            resetPassword: "修改密码",
-            about: "关于",
-            logout: "退出",
-            version:"版本号",
-            apiKey: "API Key 管理",
-            apiServiceAddress: "API 服务地址",
-            dialog:{
-                newPassword:"新密码",
-                enterPassword: "请输入修改密码",
-                confirmPassword: "确认密码",
-                passwordLength:"密码长度在 6 到 20 个字符",
-                passwordMismatch:"两次密码输入不一致",
-                useEmail:"使用邮箱",
-                enterEmail: "请输入邮箱",
-                enterVerificationCode: "请输入验证码",
-                getVerificationCode: "获取验证码",
-                verificationCodeSentSuccess:"验证码发送成功",
-                resend:"重新发送",
-            }
-        }
-    },
-};

ui/src/locales/lang/zh_TW/layout.ts

@@ -1,36 +0,0 @@
-export default {
-  breadcrumb: {},
-  sidebar: {},
-  topbar: {
-    github: '項目地址',
-    wiki: '使用者手冊',
-    forum: '論壇求助',
-    MenuItem: {
-      application: '應用',
-      dataset: '知識庫',
-      setting: '系統管理',
-      function_lib: '函數庫'
-    },
-    avatar: {
-      resetPassword: '修改密碼',
-      about: '關於',
-      logout: '退出',
-      version: '版本號',
-      apiKey: 'API Key 管理',
-      apiServiceAddress: 'API 服務地址',
-      dialog: {
-        newPassword: '新密碼',
-        enterPassword: '請輸入修改密碼',
-        confirmPassword: '確認密碼',
-        passwordLength: '密碼長度在 6 到 20 個字元',
-        passwordMismatch: '兩次密碼輸入不一致',
-        useEmail: '使用郵箱',
-        enterEmail: '請輸入郵箱',
-        enterVerificationCode: '請輸入驗證碼',
-        getVerificationCode: '獲取驗證碼',
-        verificationCodeSentSuccess: '驗證碼發送成功',
-        resend: '重新發送'
-      }
-    }
-  }
-}

ui/src/locales/useLocale.ts

@@ -9,11 +9,11 @@ export function useLocale() {
     function changeLocale(lang: string) {
         // 如果切换的语言不在对应语言文件里则默认为简体中文
         if (!langCode.includes(lang)) {
-            lang = 'zh_CN';
+            lang = 'zh-CN';
         }
 
         locale.value = lang;
-        useLocalStorage(localeConfigKey, 'zh_CN').value = lang;
+        useLocalStorage(localeConfigKey, 'zh-CN').value = lang;
     }
 
     const getComponentsLocale = computed(() => {

ui/src/stores/modules/user.ts

@@ -7,6 +7,8 @@ import ThemeApi from '@/api/theme'
 import { useElementPlusTheme } from 'use-element-plus-theme'
 import { defaultPlatformSetting } from '@/utils/theme'
 import useApplicationStore from './application'
+import { useLocalStorage } from '@vueuse/core'
+import { localeConfigKey } from '@/locales/index'
 export interface userStateTypes {
   userType: number // 1 系统操作者 2 对话用户
   userInfo: User | null
@@ -124,7 +126,8 @@ const useUserStore = defineStore({
     async profile() {
       return UserApi.profile().then(async (ok) => {
         this.userInfo = ok.data
-        localStorage.setItem('language', ok.data?.language)
+        useLocalStorage(localeConfigKey, 'zh-CN').value = ok.data?.language
+        // localStorage.setItem('language', ok.data?.language)
         return this.asyncGetProfile()
       })
     },
@@ -166,6 +169,19 @@ const useUserStore = defineStore({
       return UserApi.getQrType().then((ok) => {
         return ok.data
       })
+    },
+    async postUserLanguage(lang: string, loading?: Ref<boolean>) {
+      return new Promise((resolve, reject) => {
+        UserApi.postLanguage({ language: lang }, loading)
+          .then(async (ok) => {
+            window.location.reload()
+
+            resolve(ok)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
     }
   }
 })

ui/src/views/log/index.vue

@@ -187,10 +187,10 @@
       <template #footer>
         <div class="dialog-footer" style="margin-top: 16px">
           <el-button @click="dialogVisible = false"
-            >{{ $t('layout.topbar.avatar.dialog.cancel') }}
+            >{{ $t('layout.avatar.dialog.cancel') }}
           </el-button>
           <el-button type="primary" @click="saveCleanTime">
-            {{ $t('layout.topbar.avatar.dialog.save') }}
+            {{ $t('layout.avatar.dialog.save') }}
           </el-button>
         </div>
       </template>