feat: add Chinese-English language toggle

mail-vue/src/i18n/en.js

@@ -312,9 +312,9 @@ const en = {
     character: '',
     mustNotContain: 'Must Not Contain',
     mustNotContainDesc: 'Separate with commas',
-    blackSubjectDesc: '输入多个值用,分开',
-    blackContentDesc: '输入多个值用,分开',
-    blackFromDesc: '输入多个值用,分开',
+    blackSubjectDesc: 'Subject',
+    blackContentDesc: 'Content',
+    blackFromDesc: 'Sender or domain',
     setSuccess: 'Settings saved successfully',
     details: 'Details',
     userDetails: 'User Details',

mail-vue/src/i18n/zh.js

@@ -246,7 +246,7 @@ const zh = {
     serverBusyErrorMsg: '服务器繁忙，请稍后重试',
     reqFailErrorMsg: '请求失败，请稍后再试',
     message: '邮件详情',
-    language: '网站语言',
+    language: '系统语言',
     totalUserAccount: '{msg} 个',
     sendBanned: '已禁用',
     sendInternal: '仅站内',

mail-vue/src/store/setting.js

@@ -11,5 +11,8 @@ export const useSettingStore = defineStore('setting', {
     }),
     actions: {
 
-    }
+    },
+    persist: {
+        pick: ['lang'],
+    },
 })

mail-vue/src/views/setting/index.vue

@@ -30,6 +30,18 @@
         </div>
       </div>
     </div>
+    <div class="language">
+      <div class="title">{{$t('language')}}</div>
+      <el-select
+          v-model="settingStore.lang"
+          class="language-select"
+          placeholder="Select"
+          @change="changeLang"
+      >
+        <el-option label="中文" value="zh"/>
+        <el-option label="English" value="en"/>
+      </el-select>
+    </div>
     <div class="del-email" v-perm="'my:delete'">
       <div class="title">{{$t('deleteUser')}}</div>
       <div style="color: var(--regular-text-color);">
@@ -56,9 +68,12 @@ import router from "@/router/index.js";
 import {accountSetName} from "@/request/account.js";
 import {useAccountStore} from "@/store/account.js";
 import {useI18n} from "vue-i18n";
+import {useSettingStore} from "@/store/setting.js";
+import {setExtend} from "@/utils/day.js";
 
 const { t } = useI18n()
 const accountStore = useAccountStore()
+const settingStore = useSettingStore()
 const userStore = useUserStore();
 const setPwdLoading = ref(false)
 const setNameShow = ref(false)
@@ -107,6 +122,11 @@ function setName() {
   })
 }
 
+function changeLang(lang) {
+  setExtend(lang === 'en' ? 'en' : 'zh-cn')
+  settingStore.lang = lang
+}
+
 const pwdShow = ref(false)
 const form = reactive({
   password: '',
@@ -249,6 +269,17 @@ function submitPwd() {
     }
   }
 
+  .language {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    margin-bottom: 40px;
+
+    .language-select {
+      width: 100px;
+    }
+  }
+
   .del-email {
     font-size: 14px;
     display: flex;