feat: 实现国际化

package.json

@@ -43,6 +43,7 @@
     "sass-loader": "^14.1.1",
     "vue": "^3.4.29",
     "vue-draggable-plus": "^0.5.3",
+    "vue-i18n": "^11.1.12",
     "vue-json-pretty": "^2.5.0",
     "vue-router": "^4.3.3",
     "vue3-puzzle-vcode": "^1.1.7",

src/App.vue

@@ -1,9 +1,48 @@
 <script setup lang="ts">
 import { RouterView } from 'vue-router'
+import { useLangStore } from '@/stores/modules/lang'
+import { useI18n } from 'vue-i18n'
+
+const langStore = useLangStore()
+
+/* getCurrentInstance()可以用来获取当前组件实例 */
+let current = getCurrentInstance()?.appContext.config.globalProperties as any
+
+const langValue = ref()
+const { locale } = useI18n() // 解构出 locale
+
+langValue.value = localStorage.getItem('lang') || 'English'
+const languageChangetest = (label: string) => {
+  if (label === 'Chinese') {
+    // current.$i18n.locale = 'zh_TW'
+    locale.value = 'zh_TW' // 修改 locale 的值
+    langStore.setLang('Chinese')
+  } else {
+    // current.$i18n.locale = 'en_US'
+    locale.value = 'en_US'
+    langStore.setLang('English')
+  }
+}
+
+languageChangetest(langValue.value)
+
+const langData = ref({})
+onMounted(async () => {
+  try {
+    const response = await fetch('./locales/en.json')
+    console.log('Fetch response:', response)
+    langData.value = await response.json()
+    console.log('Fetch response:', langData.value)
+  } catch (error) {
+    console.error('Error fetching the JSON file:', error)
+  }
+})
 </script>
 
 <template>
-  <RouterView />
+  <el-config-provider :locale="langStore.ElementLocale">
+    <RouterView />
+  </el-config-provider>
 </template>
 
 <style scoped></style>

src/locales/en.json

@@ -0,0 +1,21 @@
+{
+  "login": {
+    "username": "User Name",
+    "password": "Password",
+    "login": "Login",
+    "forgotPassword": "Forgot Password?",
+    "setPassword": "Set Password",
+    "activateAccount": "Activate Account",
+    "noAccount": "No account?",
+    "registerNow": "Register Now",
+    "captchaPlaceholder": "Please enter the captcha",
+    "sendCaptcha": "Send Captcha",
+    "resendCaptcha": "Resend Captcha",
+    "captchaSent": "Captcha has been sent to your email",
+    "resetPassword": "Reset Password",
+    "newPassword": "New Password",
+    "confirmNewPassword": "Confirm New Password",
+    "passwordMismatch": "Passwords do not match",
+    "activationEmailSent": "Activation email has been sent to your email"
+  }
+}

src/locales/index.ts

@@ -0,0 +1,23 @@
+// lang -> index.ts
+import { createI18n } from 'vue-i18n'
+import ch from './zh-tw.json'
+import en from './en.json'
+import zhCN from 'vxe-pc-ui/lib/language/zh-CN'
+import enUS from 'vxe-pc-ui/lib/language/en-US'
+
+/* 这里必须是messages名称 */
+const messages: any = {
+  zh_TW: { ...zhCN, ...ch },
+  en_US: { ...enUS, ...en }
+}
+messages.en_US.vxe.table.seqTitle = 'seq'
+
+const i18n = createI18n({
+  legacy: false, // 使用 Composition API 模式，则需要将其设置为false
+  globalInjection: true, //全局生效$t
+  locale: 'en_US', // 默认使用的语言
+  // fallbackLocale: 'zh_TW', // 回退语言
+  messages // 使用数据源
+})
+
+export default i18n

src/locales/zh-tw.json

@@ -0,0 +1,21 @@
+{
+  "login": {
+    "username": "用戶名",
+    "password": "密碼",
+    "login": "登錄",
+    "forgotPassword": "忘記密碼？",
+    "setPassword": "設置密碼",
+    "activateAccount": "激活賬戶",
+    "noAccount": "沒有賬戶？",
+    "registerNow": "立即註冊",
+    "captchaPlaceholder": "請輸入驗證碼",
+    "sendCaptcha": "發送驗證碼",
+    "resendCaptcha": "重新發送驗證碼",
+    "captchaSent": "驗證碼已發送至您的郵箱",
+    "resetPassword": "重置密碼",
+    "newPassword": "新密碼",
+    "confirmNewPassword": "確認新密碼",
+    "passwordMismatch": "密碼不匹配",
+    "activationEmailSent": "激活郵件已發送至您的郵箱"
+  }
+}

src/main.ts

@@ -13,6 +13,9 @@ import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import VXETablePluginExportXLSX from 'vxe-table-plugin-export-xlsx'
 import ExcelJS from 'exceljs'
 import { VLoading } from './directive/VLoading'
+// 引入国际化
+import i18n from './locales'
+import VxeUIAll from 'vxe-pc-ui'
 
 import 'driver.js/dist/driver.css' // 导入样式
 
@@ -35,10 +38,17 @@ VXETable.use(VXETablePluginExportXLSX, {
 VXETable.setI18n('en-US', enUS)
 VXETable.setLanguage('en-US')
 
+VxeUIAll.VxeUI.setConfig({
+  // 对组件内置的提示语进行国际化翻译
+  i18n: (key, args) => i18n.global.t(key, args)
+})
+
 app.use(createPinia())
 app.use(VXETable)
 app.use(VxeUI)
 app.use(router)
+app.use(VxeUIAll)
+app.use(i18n)
 app.use(Antd)
 
 // 注册全局指令

src/plugins/element.ts

@@ -0,0 +1,13 @@
+import enLocale from 'element-plus/es/locale/lang/en'
+import zhTw from 'element-plus/es/locale/lang/zh-tw'
+
+// 改变element中zh-tw源文件的部分国际化字段
+const elementZhTw = zhTw
+elementZhTw.el.pagination.pagesize = ''
+
+// 改变element中en源文件的部分国际化字段
+const elementEn = enLocale
+elementEn.el.pagination.pagesize = ''
+elementEn.el.pagination.pageClassifier = 'page'
+
+export { elementZhTw, elementEn }

src/stores/modules/lang.ts

@@ -0,0 +1,21 @@
+import { defineStore } from 'pinia'
+import { elementZhTw, elementEn } from '@/plugins/element'
+interface LangState {
+  lang: string
+  ElementLocale: any
+}
+
+export const useLangStore = defineStore('lang', {
+  state: (): LangState => ({
+    lang: localStorage.getItem('lang') || 'Chinese',
+    ElementLocale: localStorage.getItem('lang') === 'Chinese' ? elementZhTw : elementEn
+  }),
+  getters: {},
+  actions: {
+    setLang(lang: string) {
+      localStorage.setItem('lang', lang)
+      this.lang = lang
+      this.ElementLocale = lang === 'Chinese' ? elementZhTw : elementEn
+    }
+  }
+})

src/views/Login/src/loginView.vue

@@ -9,7 +9,9 @@ import CryptoJS from 'crypto-js'
 import dayjs from 'dayjs'
 import ActivatedDialog from './components/ActivatedDialog.vue'
 import SetPasswordDialog from './components/SetPasswordDialog.vue'
+import { useI18n } from 'vue-i18n'
 
+const { t } = useI18n()
 const router = useRouter()
 const route = useRoute()
 const themeStore = useThemeStore()
@@ -377,7 +379,7 @@ const firstLoginTipsRef = ref()
       </div>
       <div class="login-form">
         <div class="label">
-          <span>User Name</span>
+          <span>{{ t('login.username') }}</span>
         </div>
         <el-input
           ref="userNameRef"