优化代码

package-lock.json

@@ -17,6 +17,7 @@
         "pinia": "^3.0.3",
         "qwebchannel": "^6.2.0",
         "vue": "^3.2.13",
+        "vue-i18n": "^11.1.11",
         "vue-router": "^4.0.3",
         "vuex": "^4.0.0"
       },
@@ -2873,6 +2874,50 @@
         "@hapi/hoek": "^9.0.0"
       }
     },
+    "node_modules/@intlify/core-base": {
+      "version": "11.1.11",
+      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-11.1.11.tgz",
+      "integrity": "sha512-1Z0N8jTfkcD2Luq9HNZt+GmjpFe4/4PpZF3AOzoO1u5PTtSuXZcfhwBatywbfE2ieB/B5QHIoOFmCXY2jqVKEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/message-compiler": "11.1.11",
+        "@intlify/shared": "11.1.11"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/message-compiler": {
+      "version": "11.1.11",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-11.1.11.tgz",
+      "integrity": "sha512-7PC6neomoc/z7a8JRjPBbu0T2TzR2MQuY5kn2e049MP7+o32Ve7O8husylkA7K9fQRe4iNXZWTPnDJ6vZdtS1Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/shared": "11.1.11",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/shared": {
+      "version": "11.1.11",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-11.1.11.tgz",
+      "integrity": "sha512-RIBFTIqxZSsxUqlcyoR7iiC632bq7kkOwYvZlvcVObHfrF4NhuKc4FKvu8iPCrEO+e3XsY7/UVpfgzg+M7ETzA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.8",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
@@ -13299,6 +13344,26 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/vue-i18n": {
+      "version": "11.1.11",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-11.1.11.tgz",
+      "integrity": "sha512-LvyteQoXeQiuILbzqv13LbyBna/TEv2Ha+4ZWK2AwGHUzZ8+IBaZS0TJkCgn5izSPLcgZwXy9yyTrewCb2u/MA==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/core-base": "11.1.11",
+        "@intlify/shared": "11.1.11",
+        "@vue/devtools-api": "^6.5.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-loader": {
       "version": "17.4.2",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-17.4.2.tgz",

package.json

@@ -16,6 +16,7 @@
     "pinia": "^3.0.3",
     "qwebchannel": "^6.2.0",
     "vue": "^3.2.13",
+    "vue-i18n": "^11.1.11",
     "vue-router": "^4.0.3",
     "vuex": "^4.0.0"
   },

src/components/LanguageSwitcher.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="language-switcher">
+    <button 
+      @click="setLanguage('ZH')" 
+      :class="{ active: currentLanguage === 'ZH' }"
+    >
+      中文
+    </button>
+    <button 
+      @click="setLanguage('EN')" 
+      :class="{ active: currentLanguage === 'EN' }"
+    >
+      English
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { setLocale } from '@/i18n'
+
+const { locale } = useI18n()
+const currentLanguage = ref(locale.value)
+
+function setLanguage(lang) {
+  setLocale(lang)
+  currentLanguage.value = lang
+}
+</script>
+
+<style scoped>
+.language-switcher {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  z-index: 1000;
+}
+
+button {
+  padding: 5px 10px;
+  margin: 0 5px;
+  cursor: pointer;
+  background: #f0f0f0;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+
+button.active {
+  background: #4fcacd;
+  color: white;
+}
+</style>

src/i18n/en/index.js

@@ -0,0 +1,9 @@
+import login from './login.json'
+const global = {
+  logout: 'Logout',
+}
+
+export default {
+  ...global,
+  ...login
+}

src/i18n/en/login.json

@@ -0,0 +1,6 @@
+{
+    "login": "Login",
+    "Welcome_to_login": "Welcome to login",
+    "PleaseEnterEmailOrUsername": "Please enter email or username",
+    "PleaseEnterPassword": "Please enter password"
+  }

src/i18n/index.js

@@ -0,0 +1,25 @@
+//语言
+// import { lang } from '@/settings/designSetting'
+import { createI18n } from 'vue-i18n' //引入vue-i18n组件
+import zh from './zh/index'
+import en from './en/index'
+
+const i18n = createI18n({
+  legacy: false,
+  globalInjection:true,
+  locale: "ZH", // Default language
+  fallbackLocale: "EN", // Fallback to English if translation missing
+  messages: {
+    ZH: zh,
+    EN: en
+  }
+})
+
+// Export function to change language
+export function setLocale(lang) {
+  if (['ZH', 'EN'].includes(lang)) {
+    i18n.global.locale.value = lang
+  }
+}
+
+export default i18n

src/i18n/zh/index.js

@@ -0,0 +1,9 @@
+import login from './login.json'
+const global = {
+  logout: '退出登录',
+}
+
+export default {
+  ...global,
+  ...login
+}

src/i18n/zh/login.json

@@ -0,0 +1,6 @@
+{
+    "login": "登录",
+    "Welcome_to_login": "欢迎登录",
+    "PleaseEnterEmailOrUsername": "请输入邮箱或用户名",
+    "PleaseEnterPassword": "请输入密码"
+}

src/main.js

@@ -8,6 +8,7 @@ import 'element-plus/dist/index.css'
 import zhCn from 'element-plus/dist/locale/zh-cn.mjs'; // 引入中文语言包
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import GoEasy from 'goeasy'
+import i18n from '../src/i18n/index'
 
 const goeasy = GoEasy.getInstance({
     host:"hangzhou.goeasy.io",  //若是新加坡区域：singapore.goeasy.io
@@ -27,5 +28,6 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
 app.use(ElementPlus)      // 注册 ElementPlus
 app.use(createPinia()); // 注册 Pinia
 app.use(store); // 注册 store
+app.use(i18n); // 注册 i18n
 app.use(router); // 注册 router
 app.mount('#app');

src/views/HomeView.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="HomeView">
+    <LanguageSwitcher />
     <div class="login">
       <!-- 登录切换 -->
       <div class="Switch">
@@ -15,7 +16,7 @@
       </div>
       <!-- 标题 -->
       <div v-if="!refSwitch" class="container">
-        <div class="title">欢迎登录</div>
+        <div class="title">{{ t('Welcome_to_login') }}</div>
         <div class="striping"></div>
         <div class="input-Email">
           <img class="Emailimg" src="../assets/Email.png" alt="" />
@@ -25,7 +26,7 @@
             size="large"
             class="input-text"
             v-model="refEmail"
-            placeholder="请输入邮箱或用户名"
+            :placeholder="t('PleaseEnterEmailOrUsername')"
             @keydown.enter.native="EmailLogin"
           />
         </div>
@@ -38,11 +39,11 @@
             class="input-text"
             v-model="refpassword"
             show-password
-            placeholder="请输入密码"
+            :placeholder="t('PleaseEnterPassword')"
             @keydown.enter.native="EmailLogin"
           />
         </div>
-        <div class="login-btn" @click="EmailLogin">登录</div>
+        <div class="login-btn" @click="EmailLogin">{{ t('login') }}</div>
       </div>
       <!-- 微信登录 -->
       <div v-if="refSwitch" class="container">
@@ -74,6 +75,12 @@ import { tokenStore, UserStore } from '@/stores/notice'
 import { setStorage , getStorage } from '@/utils/storage.js';
 import { goEasyLink } from '@/utils/goeasy.js';
 import { ElLoading } from "element-plus";
+import LanguageSwitcher from '@/components/LanguageSwitcher.vue';
+// 
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n()
+window['$t'] = t
+// 
 const router = useRouter();
 const refname = ref("");
 const refEmail = ref(""); // 邮箱