feat：多语言

src/locales/en.js

@@ -0,0 +1,15 @@
+export default {
+  common: {},
+  login: {
+    username: 'Username',
+    password: 'Password',
+    login: 'Sign in',
+    reLogin: 'Sign in again',
+    register: 'Register',
+    checkPassword: 'Confirm password',
+    mobileNumber: 'Mobile Number',
+    mobileNumberPlaceholder: 'Please Enter Mobile Number',
+    getSmsCode: 'Get SMS Code',
+  },
+  form: {}
+}

src/locales/zh-CN.js

@@ -0,0 +1,15 @@
+export default {
+  common: {},
+  login: {
+    username: '用户名',
+    password: '密码',
+    login: '登录',
+    reLogin: '重新登录',
+    register: '注册',
+    checkPassword: '确认密码',
+    mobileNumber: '手机号码',
+    mobileNumberPlaceholder: '请输入手机号码',
+    getSmsCode: '获取验证码',
+  },
+  form: {}
+}

src/main.js

@@ -17,6 +17,8 @@ import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' // pinia 持
 
 import router from './router'
 
+import { setupI18n } from '@/plugins/vueI18n'
+
 const pinia = createPinia()
 
 pinia.use(piniaPluginPersistedstate)
@@ -29,4 +31,6 @@ app.use(router)
 
 registerPlugins(app)
 
+setupI18n(app)
+
 app.mount('#app')

src/plugins/vueI18n/index.js

@@ -1,15 +1,15 @@
 // import { App } from 'vue'
 import { createI18n } from 'vue-i18n'
-import { useLocaleStoreWithOut } from '@/store/modules/locale'
+import { useLocaleStore } from '@/store/locale'
 // import { I18n, I18nOptions } from 'vue-i18n'
 // import { setHtmlPageLang } from './helper'
 
 export let i18n
 
 const createI18nOptions = async () => {
-  const localeStore = useLocaleStoreWithOut()
-  const locale = localeStore.getCurrentLocale
-  const localeMap = localeStore.getLocaleMap
+  const localeStore = useLocaleStore()
+  const locale = localeStore.currentLocale
+  const localeMap = localeStore.localeMap
   const defaultLocal = await import(`../../locales/${locale.lang}.js`)
   const message = defaultLocal.default ?? {}
   

src/store/locale.js

@@ -1,9 +1,8 @@
 import { defineStore } from 'pinia'
-import { en, zhHans, zhHant } from 'vuetify/locale'
+import { en, zhHans } from 'vuetify/locale'
 import { reactive } from 'vue'
 
 const elLocaleMap = {
-  'zh-CN-Hant': zhHant,
   'zh-CN': zhHans,
   en: en
 }
@@ -15,10 +14,6 @@ export const useLocaleStore = defineStore('locales',
         lang: 'zh-CN',
         name: '简体中文'
       },
-      {
-        lang: 'zh-CN-Hant',
-        name: '繁体中文'
-      },
       {
         lang: 'en',
         name: 'English'

src/views/login/index.vue

@@ -14,6 +14,26 @@
         </div>
       </div>
       <div class="login-content-box mt-5">
+        <v-menu>
+          <template v-slot:activator="{ props }">
+            <v-btn
+              color="primary"
+              v-bind="props"
+            >
+              Activator slot
+            </v-btn>
+          </template>
+          <v-list>
+            <v-list-item
+              v-for="(item, index) in localeStore.localeMap"
+              :key="index"
+              :value="item.lang"
+            >
+              <v-list-item-title @click="localeStore.setCurrentLocale(item)">{{ item.name }}</v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-menu>
+        <v-btn>{{ localeStore.currentLocale.lang }}</v-btn>
         <div v-if="!isPhone" class="login-tab">
           <v-tabs v-model="tab" align-tabs="center" color="#00897B">
             <v-tab :value="1">短信登录</v-tab>
@@ -34,12 +54,11 @@
           <!-- 微信扫码登录 -->
           <qr-code></qr-code>
         </div>
-        <v-btn v-if="!isPhone" color="primary" class="white--text mt-5" min-width="350" @click="handleLogin">{{ tab === 1 ? '登录/注册' : '登录' }}</v-btn>
-        <div v-if="tab === 2 && !isPhone" @click="handleForgotPassword">
-          <span class="forgot-password">忘记密码？</span>
-        </div>
-        <div class="login-tips">
-          {{ tab === 1 ? '登录/注册': '登录' }}即代表您同意 
+        <v-btn color="primary" class="white--text mt-5" min-width="350" @click="handleLogin">
+          {{ tab === 1 ? $t('login.register') : $t('login.login') }}
+        </v-btn>
+        <div class="login-tips mt-3">
+          登录/注册即代表您同意 
           <span class="color" style="cursor: pointer;" @click="handleToUserAgreement">[用户协议]</span>
           <span class="color" style="cursor: pointer;" @click="handlePrivacyPolicy">[隐私政策]</span>
         </div>
@@ -54,6 +73,12 @@ import passwordFrom from './components/password.vue'
 import phoneFrom from './components/phone.vue'
 import qrCode from './components/qrCode.vue'
 defineOptions({ name: 'login-index' })
+
+import { useLocaleStore } from '@/store/locale'
+
+const localeStore = useLocaleStore()
+
+
 const phone = ref()
 let isPhone = ref(false)
 const handlePhone = () => {
@@ -69,7 +94,6 @@ const passRef = ref()
 const handleLogin = () => {
 }
 
-// 用户、隐私协议
 import { useRouter } from 'vue-router'
 const router = useRouter()
 const handleToUserAgreement = () => {
@@ -79,9 +103,6 @@ const handleToUserAgreement = () => {
 const handlePrivacyPolicy = () => {
   router.push({ path: '/privacyPolicy' })
 }
-
-// 忘记密码
-const handleForgotPassword = () => {}
 </script>
 
 <style lang="scss" scoped>
@@ -158,10 +179,6 @@ const handleForgotPassword = () => {}
   }
 }
 .login-tips {
-  position: absolute;
-  bottom: 17px;
-  left: 50%;
-  translate: -50%;
   width: 100%;
   font-size: 12px;
   text-align: center;
@@ -170,9 +187,4 @@ const handleForgotPassword = () => {}
 .color {
   color: var(--default-color); 
 }
-.forgot-password {
-  color: var(--default-color);
-  font-size: 14px;
-  cursor: pointer;
-}
 </style>