新增加多语言

package.json

@@ -32,6 +32,7 @@
     "sortablejs": "^1.15.0",
     "vue": "3.2.26",
     "vue-cropper": "1.0.2",
+    "vue-i18n": "^9.1.10",
     "vue-router": "4.0.12",
     "vue3-seamless-scroll": "^1.2.0",
     "vuex": "4.0.2",

src/App.vue

@@ -1,12 +1,30 @@
 <template>
-  <router-view />
+  <el-config-provider :locale="locale" :size="size">
+    <router-view />
+  </el-config-provider>
 </template>
 <script setup>
+import store from '@/store/index'
+import Cookies from 'js-cookie'
+import { ElConfigProvider } from 'element-plus'
+import zh from 'element-plus/lib/locale/lang/zh-cn' // 中文语言
+import en from 'element-plus/lib/locale/lang/en' // 英文语言
+import tw from 'element-plus/lib/locale/lang/zh-tw' //繁体
+
 const { proxy } = getCurrentInstance()
+
 const token = computed(() => {
-  return proxy.$store.getters.token
+  return store.getters.token
 })
 
+const lang = computed(() => {
+  return store.getters.language
+})
+const locale = ref(zh)
+const size = ref('small')
+if (Cookies.get('size')) {
+  size.value = Cookies.get('size')
+}
 watch(
   token,
   (val) => {
@@ -19,4 +37,21 @@ watch(
     deep: true,
   },
 )
+watch(
+  lang,
+  (val) => {
+    if (val == 'zh-cn') {
+      locale.value = zh
+    } else if (val == 'en') {
+      locale.value = en
+    } else if (val == 'zh-tw') {
+      locale.value = tw
+    } else {
+      locale.value = en
+    }
+  },
+  {
+    immediate: true,
+  },
+)
 </script>

src/components/LangSelect/index.vue

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <el-dropdown trigger="hover" @command="handleLanguageChange" style="vertical-align: middle">
+      <svg-icon class-name="size-icon" name="language" />
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item v-for="item of langOptions" :key="item.value" :disabled="lang === item.value" :command="item.value">
+            {{ item.label }}
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+  </div>
+</template>
+
+<script setup>
+const store = useStore()
+const lang = computed(() => store.getters.language)
+
+const { proxy } = getCurrentInstance()
+const langOptions = ref([
+  { label: '简体中文', value: 'zh-cn' },
+  { label: 'English', value: 'en' },
+  { label: '繁體中文', value: 'zh-tw' },
+])
+
+function handleLanguageChange(lang) {
+  proxy.$modal.loading('正在设置语言，请稍候...')
+  store.dispatch('app/setLang', lang)
+  setTimeout('window.location.reload()', 1000)
+}
+</script>
+
+<style lang="scss" scoped>
+.size-icon--style {
+  font-size: 18px;
+  line-height: 50px;
+  padding-right: 7px;
+}
+</style>

src/components/SizeSelect/index.vue

@@ -20,9 +20,9 @@ const route = useRoute()
 const router = useRouter()
 const { proxy } = getCurrentInstance()
 const sizeOptions = ref([
-  { label: '较大', value: 'large' },
+  { label: proxy.$t('layout.large'), value: 'large' },
-  { label: '默认', value: 'default' },
+  { label: proxy.$t('layout.default'), value: 'default' },
-  { label: '稍小', value: 'small' },
+  { label: proxy.$t('layout.small'), value: 'small' },
 ])
 
 function refreshView() {

src/i18n/index.js

@@ -0,0 +1,25 @@
+import { createI18n } from 'vue-i18n';
+import store from '@/store/index';
+
+import zhCn from './lang/zh-cn';
+import en from './lang/en';
+import zhTw from './lang/zh-tw';
+
+import pageLoginCn from './pages/login/zh-cn'
+import pageLoginEn from './pages/login/en'
+import pageLoginTw from './pages/login/zh-tw'
+
+const i18n = createI18n({
+  // 全局注入 $t 函数
+  globalInjection: true,
+  fallbackLocale: 'zh-cn',
+  locale: store.getters.language, //默认选择的语言 
+  legacy: false, // 使用 Composition API 模式，则需要将其设置为false
+  messages: {
+    'zh-cn': { ...zhCn, ...pageLoginCn },
+    'zh-tw': { ...zhTw, ...pageLoginTw },
+    'en': { ...en, ...pageLoginEn }
+  }
+})
+
+export default i18n;

src/i18n/lang/en.js

@@ -0,0 +1,64 @@
+// 定义内容
+export default {
+  menu: {
+    home: 'home',
+    system: 'system',
+    systemMenu: 'systemMenu',
+    systemRole: 'systemRole',
+    systemUser: 'systemUser',
+    systemDept: 'systemDept',
+    systemDic: 'systemDic',
+    limits: 'limits',
+  },
+  tagsView: {
+    refresh: 'refresh',
+    close: 'close',
+    closeOther: 'closeOther',
+    closeLeft: 'closeLeft',
+    closeRight: 'closeRight',
+    closeAll: 'closeAll',
+    fullscreen: 'fullscreen',
+    closeFullscreen: 'closeFullscreen',
+  },
+  layout: {
+    tip1: 'If you feel good, welcome to ⭐ Star ⭐ Collect it so that the author can continue to be free. Thank you!',
+    contactUs: 'contact us',
+    donationSupport: 'donation support',
+    officialWebsite: 'Official website',
+    qqGroup: 'QQ Group',
+    changeLog: 'change log',
+    currentVersion: 'current version',
+    codeSourceAddress: 'source address',
+    fullscreen: 'fullscreen',
+    sizeSelect: 'size',
+    personalCenter: 'Personal center',
+    layoutSetting: 'layout setting',
+    logOut: 'Login out',
+    themeStyleSet: 'theme style settings',
+    themeColor: 'theme color',
+    sysLayoutSet: 'system layout settings',
+    open: 'open',
+    fixed: 'fixed',
+    show: 'show',
+    dynamicTitle: 'dynamic title',
+    darkMode: 'dark mode',
+    saveConfig: 'save',
+    resetConfig: 'reset',
+    logOutConfirm: 'Are you sure you want to exit the current login?',
+    large: 'Large',
+    default: 'Default',
+    small: 'Small'
+  },
+  common: {
+    ok: 'Ok',
+    cancel: 'Cancel',
+    tips: 'tips'
+  },
+  btn: {
+    add: 'Add',
+    delete: 'Delete',
+    edit: 'Edit',
+    search: 'Search',
+    reset: 'Reset',
+  }
+};

src/i18n/lang/zh-cn.js

@@ -0,0 +1,64 @@
+// 定义内容
+export default {
+  menu: {
+    home: '首页',
+    system: '系统设置',
+    systemMenu: '菜单管理',
+    systemRole: '角色管理',
+    systemUser: '用户管理',
+    systemDept: '部门管理',
+    systemDic: '字典管理',
+    limits: '权限管理',
+  },
+  tagsView: {
+    refresh: '刷新页面',
+    close: '关闭当前',
+    closeOther: '关闭其它',
+    closeLeft: '关闭左侧',
+    closeRight: '关闭右侧',
+    closeAll: '全部关闭',
+    fullscreen: '当前页全屏',
+    closeFullscreen: '关闭全屏',
+  },
+  layout: {
+    tip1: '如果觉得不错欢迎给个⭐Star⭐收藏一下，这样作者才有继续免费下去的动力，谢谢！',
+    contactUs: '联系信息',
+    donationSupport: '捐贈支持',
+    officialWebsite: '官网',
+    qqGroup: 'QQ群',
+    changeLog: '更新日志',
+    currentVersion: '当前版本',
+    codeSourceAddress: '源码地址',
+    fullscreen: '全屏',
+    sizeSelect: '大小设置',
+    personalCenter: '个人中心',
+    layoutSetting: '布局设置',
+    logOut: '退出登录',
+    themeStyleSet: '主题风格设置',
+    themeColor: '主题颜色',
+    sysLayoutSet: '系统风格设置',
+    open: '开启',
+    fixed: '固定',
+    show: '显示',
+    dynamicTitle: '动态标题',
+    darkMode: '深色模式',
+    saveConfig: '保存配置',
+    resetConfig: '重置配置',
+    logOutConfirm: '你確定要退出当前登录吗？',
+    large: '较大',
+    default: '默认',
+    small: '较小'
+  },
+  common: {
+    ok: '确定',
+    cancel: '取消',
+    tips: '提示'
+  },
+  btn: {
+    add: '新增',
+    delete: '删除',
+    edit: '编辑',
+    search: '搜索',
+    reset: '重置',
+  }
+};

src/i18n/lang/zh-tw.js

@@ -0,0 +1,64 @@
+// 定义内容
+export default {
+  menu: {
+    home: '首頁',
+    system: '系統設置',
+    systemMenu: '選單管理',
+    systemRole: '角色管理',
+    systemUser: '用戶管理',
+    systemDept: '部門管理',
+    systemDic: '字典管理',
+    limits: '許可權管理',
+  },
+  tagsView: {
+    refresh: '重繪',
+    close: '關閉',
+    closeOther: '關閉其它',
+    closeLeft: '關閉左侧',
+    closeRight: '關閉右侧',
+    closeAll: '全部關閉',
+    fullscreen: '當前頁全屏',
+    closeFullscreen: '關閉全屏',
+  },
+  layout: {
+    tip1: '如果覺得不錯歡迎給個⭐Star⭐收藏壹下，這樣作者才有繼續免費下去的動力，謝謝！',
+    contactUs: '聯繫信息',
+    donationSupport: '捐贈支持',
+    officialWebsite: '官網',
+    qqGroup: 'QQ群',
+    changeLog: '更新日誌',
+    currentVersion: '當前版本',
+    codeSourceAddress: '源碼地址',
+    fullscreen: '全屏',
+    sizeSelect: '大小設置',
+    personalCenter: '個人中心',
+    layoutSetting: '佈局設置',
+    logOut: '退出登錄',
+    themeStyleSet: '主題風格設置',
+    themeColor: '主題顏色',
+    sysLayoutSet: '系統風格設置',
+    open: '開啟',
+    fixed: '固定',
+    show: '顯示',
+    dynamicTitle: '動態標題',
+    darkMode: '深色模式',
+    saveConfig: '保存配置',
+    resetConfig: '重置配置',
+    logOutConfirm: '你確定要退出当前登录吗？',
+    large: '較大',
+    default: '默認',
+    small: '較小'
+  },
+  common: {
+    ok: '確定',
+    cancel: '取消',
+    tips: '提示'
+  },
+  btn: {
+    add: '新增',
+    delete: '刪除',
+    edit: '編輯',
+    search: '搜索',
+    reset: '重置',
+  }
+};

src/i18n/pages/login/en.js

@@ -0,0 +1,10 @@
+export default {
+  login: {
+    account: 'ID',
+    password: 'Password',
+    captcha: 'Captcha',
+    btnLogin: 'Login',
+    rememberMe: 'Remember Me',
+    loginSuccess: 'login success'
+  }
+}

src/i18n/pages/login/zh-cn.js

@@ -0,0 +1,10 @@
+export default {
+  login: {
+    account: '账号',
+    password: '密码',
+    captcha: '验证码',
+    btnLogin: '登录',
+    rememberMe: '记住密码',
+    loginSuccess: '登录成功'
+  }
+}

src/i18n/pages/login/zh-tw.js

@@ -0,0 +1,10 @@
+export default {
+  login: {
+    account: '賬號',
+    password: '密碼',
+    captcha: '驗證碼',
+    btnLogin: '登錄',
+    rememberMe: '記住密碼',
+    loginSuccess: '登錄成功'
+  }
+}

src/layout/components/Navbar.vue

@@ -11,6 +11,7 @@
         <zr-doc title="文档地址" class="right-menu-item" />
         <screenfull title="全屏" class="right-menu-item" />
         <size-select title="布局大小" class="right-menu-item" />
+        <LangSelect title="语音设置" class="right-menu-item" />
       </template>
       <Notice title="通知" class="right-menu-item" />
 
@@ -23,13 +24,13 @@
         <template #dropdown>
           <el-dropdown-menu>
             <router-link to="/user/profile">
-              <el-dropdown-item>个人中心</el-dropdown-item>
+              <el-dropdown-item>{{ $t('layout.personalCenter') }}</el-dropdown-item>
             </router-link>
             <el-dropdown-item command="setLayout">
-              <span>布局设置</span>
+              <span>{{ $t('layout.layoutSetting') }}</span>
             </el-dropdown-item>
             <el-dropdown-item divided command="logout">
-              <span>退出登录</span>
+              <span>{{ $t('layout.logOut') }}</span>
             </el-dropdown-item>
           </el-dropdown-menu>
         </template>
@@ -49,7 +50,9 @@ import HeaderSearch from '@/components/HeaderSearch'
 import ZrGit from '@/components/Zr/Git'
 import ZrDoc from '@/components/Zr/Doc'
 import Notice from '@/components/Notice/Index'
+import LangSelect from '@/components/LangSelect/index'
 
+const { proxy } = getCurrentInstance()
 const store = useStore()
 const getters = computed(() => store.getters)
 const sideTheme = computed(() => store.state.settings.sideTheme)
@@ -71,9 +74,9 @@ function handleCommand(command) {
 }
 
 function logout() {
-  ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
+  ElMessageBox.confirm(proxy.$t('layout.logOutConfirm'), proxy.$t('common.tips'), {
-    confirmButtonText: '确定',
+    confirmButtonText: proxy.$t('common.ok'),
-    cancelButtonText: '取消',
+    cancelButtonText: proxy.$t('common.cancel'),
     type: 'warning',
   })
     .then(() => {

src/layout/components/Settings/index.vue

@@ -1,7 +1,7 @@
 <template>
   <el-drawer v-model="showSettings" :withHeader="false" direction="rtl" size="300px">
     <div class="setting-drawer-title">
-      <h3 class="drawer-title">主题风格设置</h3>
+      <h3 class="drawer-title">{{ $t('layout.themeStyleSet') }}</h3>
     </div>
     <div class="setting-drawer-block-checbox">
       <div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-dark')">
@@ -21,48 +21,48 @@
           <el-icon><Check /></el-icon>
         </div>
         <el-icon><moon /></el-icon>
-        深色模式
+        {{ $t('layout.darkMode') }}
       </div>
     </div>
     <div class="drawer-item">
-      <span>主题颜色</span>
+      <span>{{ $t('layout.themeColor') }}</span>
       <span class="comp-style">
         <el-color-picker v-model="theme" :predefine="predefineColors" @change="themeChange" />
       </span>
     </div>
     <el-divider />
 
-    <h3 class="drawer-title">系统布局配置</h3>
+    <h3 class="drawer-title">{{ $t('layout.sysLayoutSet') }}</h3>
     <div class="drawer-item">
-      <span>开启 TopNav</span>
+      <span>{{ $t('layout.open') }} TopNav</span>
       <span class="comp-style">
         <el-switch v-model="topNav" class="drawer-switch" />
       </span>
     </div>
 
     <div class="drawer-item">
-      <span>开启 Tags-Views</span>
+      <span>{{ $t('layout.open') }} Tags-Views</span>
       <span class="comp-style">
         <el-switch v-model="tagsView" class="drawer-switch" />
       </span>
     </div>
 
     <div class="drawer-item">
-      <span>固定 Header</span>
+      <span>{{ $t('layout.fixed') }} Header</span>
       <span class="comp-style">
         <el-switch v-model="fixedHeader" class="drawer-switch" />
       </span>
     </div>
 
     <div class="drawer-item">
-      <span>显示 Logo</span>
+      <span>{{ $t('layout.show') }} Logo</span>
       <span class="comp-style">
         <el-switch v-model="sidebarLogo" class="drawer-switch" />
       </span>
     </div>
 
     <div class="drawer-item">
-      <span>动态标题</span>
+      <span>{{ $t('layout.dynamicTitle') }}</span>
       <span class="comp-style">
         <el-switch v-model="dynamicTitle" class="drawer-switch" />
       </span>
@@ -70,8 +70,8 @@
 
     <el-divider />
 
-    <el-button type="primary" plain icon="DocumentAdd" @click="saveSetting">保存配置</el-button>
+    <el-button type="primary" plain icon="DocumentAdd" @click="saveSetting">{{ $t('layout.saveConfig') }}</el-button>
-    <el-button plain icon="Refresh" @click="resetSetting">重置配置</el-button>
+    <el-button plain icon="Refresh" @click="resetSetting">{{ $t('layout.resetConfig') }}</el-button>
   </el-drawer>
 </template>
 

src/layout/components/TagsView/index.vue

@@ -19,12 +19,12 @@
       </router-link>
     </scroll-pane>
     <ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
-      <li @click="refreshSelectedTag(selectedTag)"><refresh-right style="width: 1em; height: 1em" /> 刷新页面</li>
+      <li @click="refreshSelectedTag(selectedTag)"><refresh-right style="width: 1em; height: 1em" /> {{$t('tagsView.refresh')}}</li>
-      <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)"><close style="width: 1em; height: 1em" /> 关闭当前</li>
+      <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)"><close style="width: 1em; height: 1em" /> {{$t('tagsView.close')}}</li>
-      <li @click="closeOthersTags"><circle-close style="width: 1em; height: 1em" /> 关闭其他</li>
+      <li @click="closeOthersTags"><circle-close style="width: 1em; height: 1em" /> {{$t('tagsView.closeOther')}}</li>
-      <li v-if="!isFirstView()" @click="closeLeftTags"><back style="width: 1em; height: 1em" /> 关闭左侧</li>
+      <li v-if="!isFirstView()" @click="closeLeftTags"><back style="width: 1em; height: 1em" /> {{$t('tagsView.closeLeft')}}</li>
-      <li v-if="!isLastView()" @click="closeRightTags"><right style="width: 1em; height: 1em" /> 关闭右侧</li>
+      <li v-if="!isLastView()" @click="closeRightTags"><right style="width: 1em; height: 1em" /> {{$t('tagsView.closeRight')}}</li>
-      <li @click="closeAllTags(selectedTag)"><circle-close style="width: 1em; height: 1em" /> 全部关闭</li>
+      <li @click="closeAllTags(selectedTag)"><circle-close style="width: 1em; height: 1em" /> {{$t('tagsView.closeAll')}}</li>
     </ul>
   </div>
 </template>

src/main.js

@@ -2,7 +2,7 @@ import { createApp } from 'vue'
 import Cookies from 'js-cookie'
 
 import ElementPlus from 'element-plus'
-import locale from 'element-plus/lib/locale/lang/zh-cn' // 中文语言
+import elZhCn from 'element-plus/lib/locale/lang/zh-cn' // 中文语言
 import 'dayjs/locale/zh-cn'
 import '@/assets/styles/index.scss' // global css
 
@@ -14,6 +14,7 @@ import directive from './directive' // directive
 import plugins from './plugins' // plugins
 // import { download } from '@/utils/request'
 import signalR from '@/utils/signalR'
+import vueI18n from './i18n/index'
 
 // svg图标
 import 'virtual:svg-icons-register'
@@ -69,12 +70,12 @@ app.use(router)
 app.use(store)
 app.use(plugins)
 app.use(elementIcons)
+app.use(vueI18n)
 
 directive(app)
-
 // 使用element-plus 并且设置全局的大小
 app.use(ElementPlus, {
-  locale: locale,
+  // locale: elZhCn,
   // 支持 large、default、small
   size: Cookies.get('size') || 'small'
 })

src/store/getters.js

@@ -2,6 +2,7 @@ const getters = {
   sidebar: state => state.app.sidebar,
   size: state => state.app.size,
   device: state => state.app.device,
+  language: state => state.app.lang,
   visitedViews: state => state.tagsView.visitedViews,
   cachedViews: state => state.tagsView.cachedViews,
   token: state => state.user.token,

src/store/modules/app.js

@@ -7,7 +7,8 @@ const state = {
     hide: false
   },
   device: 'desktop',
-  size: Cookies.get('size') || 'default'
+  size: Cookies.get('size') || 'default',
+  lang: Cookies.get('lang') || 'zh-cn'
 }
 
 const mutations = {
@@ -37,7 +38,11 @@ const mutations = {
   },
   SET_SIDEBAR_HIDE: (state, status) => {
     state.sidebar.hide = status
-  }
+  },
+  SET_LANG: (state, lang) => {
+    state.lang = lang
+    Cookies.set('lang', lang)
+  },
 }
 
 const actions = {
@@ -55,7 +60,10 @@ const actions = {
   },
   toggleSideBarHide({ commit }, status) {
     commit('SET_SIDEBAR_HIDE', status)
-  }
+  },
+  setLang({ commit }, lang) {
+    commit('SET_LANG', lang)
+  },
 }
 
 export default {

src/views/index.vue

@@ -5,22 +5,16 @@
         <blockquote class="text-warning" style="font-size: 14px">
           领取七牛云通用云产品优惠券
           <br />
-          <el-link href="https://s.qiniu.com/FzEfay" type="primary" target="_blank">
+          <el-link href="https://s.qiniu.com/FzEfay" type="primary" target="_blank"> https://s.qiniu.com/FzEfay </el-link>
-            https://s.qiniu.com/FzEfay
-          </el-link>
           <br />
 
           领取腾讯云通用云产品新用户专属大礼包2860优惠券，每种代金券限量500张，先到先得。
           <br />
-          <el-link href="https://curl.qcloud.com/5J4nag8D" type="primary" target="_blank">
+          <el-link href="https://curl.qcloud.com/5J4nag8D" type="primary" target="_blank"> https://curl.qcloud.com/5J4nag8D </el-link>
-            https://curl.qcloud.com/5J4nag8D
-          </el-link>
           <br />
 
           腾讯云限时秒杀活动<br />
-          <el-link href="https://curl.qcloud.com/4yEoRquq" type="primary" target="_blank">
+          <el-link href="https://curl.qcloud.com/4yEoRquq" type="primary" target="_blank"> https://curl.qcloud.com/4yEoRquq </el-link>
-            https://curl.qcloud.com/4yEoRquq
-          </el-link>
           <br />
 
           华为特惠专区，多款产品限时特价
@@ -44,37 +38,17 @@
         </p>
         <p>代码完全免费开源，易读易懂、界面简洁美观，给你的项目多一种选择与参考。</p>
         <p>
-          <b>当前版本:</b> <span>v{{ version }}</span>
+          <b>{{ $t('layout.currentVersion') }}:</b> <span>v{{ version }}</span>
-          <el-link
+          <el-link class="ml10" type="primary" size="small" icon="Document" plain @click="goTarget('http://www.izhaorui.cn/doc/#/gxrz?id=v' + version)"
-            class="ml10"
+            >{{ $t('layout.changeLog') }}
-            type="primary"
-            size="small"
-            icon="Document"
-            plain
-            @click="goTarget('http://www.izhaorui.cn/doc/#/gxrz?id=v' + version)"
-            >更新日志
           </el-link>
         </p>
         <p>
-          <el-button
+          <el-button type="primary" size="small" icon="Cloudy" plain @click="goTarget('https://gitee.com/izory/ZrAdminNetCore')">访问码云 </el-button>
-            type="primary"
+          <el-button type="primary" size="small" icon="Cloudy" plain @click="goTarget('https://github.com/izhaorui/ZrAdmin.NET')">Github </el-button>
-            size="small"
-            icon="Cloudy"
-            plain
-            @click="goTarget('https://gitee.com/izory/ZrAdminNetCore')"
-            >访问码云
-          </el-button>
-          <el-button
-            type="primary"
-            size="small"
-            icon="Cloudy"
-            plain
-            @click="goTarget('https://github.com/izhaorui/ZrAdmin.NET')"
-            >Github
-          </el-button>
         </p>
         <p></p>
-        <h3>如果觉得不错欢迎给个⭐Star⭐收藏一下，这样作者才有继续免费下去的动力，谢谢！</h3>
+        <h3>{{ $t('layout.tip1') }}</h3>
       </el-col>
       <el-col :lg="8" :sm="24">
         <h2>技术选型</h2>
@@ -88,6 +62,8 @@
             <li>MySql</li>
             <li>Mapster</li>
             <li>Epplus</li>
+            <li>Redis</li>
+            <li>Signalr</li>
             <li>...</li>
           </ul>
         </el-col>
@@ -100,8 +76,9 @@
             <li>Axios</li>
             <li>Sass</li>
             <li>Wangeditor</li>
-						<li>Vite</li>
+            <li>Vite</li>
-						<li>Composition api</li>
+            <li>Composition api</li>
+            <li>I18n</li>
             <li>...</li>
           </ul>
         </el-col>
@@ -112,11 +89,22 @@
       <el-col :sm="24" :lg="8">
         <el-card>
           <div class="clearfix">
-            <span>联系信息</span>
+            <span>{{ $t('layout.donationSupport') }}</span>
+          </div>
+          <div class="body">
+            <div style="color: red">打赏作者喝杯咖啡表示鼓励</div>
+            <img src="@/assets/images/reward.jpg" alt="donate" style="width: 100%" />
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :sm="24" :lg="8">
+        <el-card>
+          <div class="clearfix">
+            <span>{{ $t('layout.contactUs') }}</span>
           </div>
           <div class="body">
             <p>
-              <el-icon> <promotion /> </el-icon>官网：
+              <el-icon> <promotion /> </el-icon>{{ $t('layout.officialWebsite') }}：
               <el-link href="http://www.izhaorui.cn/doc" target="_blank"> http://www.izhaorui.cn/doc </el-link>
             </p>
           </div>
@@ -133,17 +121,6 @@
           </div>
         </el-card>
       </el-col>
-      <el-col :sm="24" :lg="8">
-        <el-card>
-          <div class="clearfix">
-            <span>捐赠支持</span>
-          </div>
-          <div class="body">
-            <div style="color: red">打赏作者喝杯咖啡表示鼓励</div>
-            <img src="@/assets/images/reward.jpg" alt="donate" style="width: 100%" />
-          </div>
-        </el-card>
-      </el-col>
       <el-col :span="10">
         <!-- <el-card>
           <div slot="header" class="clearfix">

src/views/login.vue

@@ -4,21 +4,21 @@
     <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
       <h3 class="title">{{ defaultSettings.title }}</h3>
       <el-form-item prop="username">
-        <el-input v-model="loginForm.username" type="text" size="large" auto-complete="off" placeholder="账号">
+        <el-input v-model="loginForm.username" type="text" size="large" auto-complete="off" :placeholder="$t('login.account')">
           <template #prefix>
             <svg-icon name="user" class="el-input__icon input-icon" />
           </template>
         </el-input>
       </el-form-item>
       <el-form-item prop="password">
-        <el-input v-model="loginForm.password" type="password" size="large" auto-complete="off" placeholder="密码" @keyup.enter="handleLogin">
+        <el-input v-model="loginForm.password" type="password" size="large" auto-complete="off" :placeholder="$t('login.password')" @keyup.enter="handleLogin">
           <template #prefix>
             <svg-icon name="password" class="el-input__icon input-icon" />
           </template>
         </el-input>
       </el-form-item>
       <el-form-item prop="code" v-if="captchaOnOff != 'off'">
-        <el-input v-model="loginForm.code" size="large" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter="handleLogin">
+        <el-input v-model="loginForm.code" size="large" auto-complete="off" :placeholder="$t('login.captcha')" style="width: 63%" @keyup.enter="handleLogin">
           <template #prefix>
             <svg-icon name="validCode" class="el-input__icon input-icon" />
           </template>
@@ -27,10 +27,12 @@
           <img :src="codeUrl" @click="getCode" class="login-code-img" />
         </div>
       </el-form-item>
-      <el-checkbox v-model="loginForm.rememberMe" style="margin: 0px 0px 25px 0px">记住密码</el-checkbox>
+      <el-form-item>
+        <el-checkbox v-model="loginForm.rememberMe">{{ $t('login.rememberMe') }}</el-checkbox>
+      </el-form-item>
       <el-form-item style="width: 100%">
-        <el-button :loading="loading" size="large" plain type="primary" style="width: 100%" @click.prevent="handleLogin">
+        <el-button :loading="loading" size="large" type="primary" style="width: 100%" @click.prevent="handleLogin">
-          <span v-if="!loading">登 录</span>
+          <span v-if="!loading">{{ $t('login.btnLogin') }}</span>
           <span v-else>登 录 中...</span>
         </el-button>
         <!-- <div style="float: right;" v-if="register">
@@ -38,6 +40,8 @@
         </div> -->
       </el-form-item>
     </el-form>
+
+    <LangSelect title="语音设置" class="langSet" />
     <!--  底部  -->
     <div class="el-login-footer">
       <span>{{ defaultSettings.copyright }}</span>
@@ -51,6 +55,7 @@ import Cookies from 'js-cookie'
 import { encrypt, decrypt } from '@/utils/jsencrypt'
 import defaultSettings from '@/settings'
 import starBackground from '@/views/components/starBackground.vue'
+import LangSelect from '@/components/LangSelect/index.vue'
 
 const store = useStore()
 const router = useRouter()
@@ -103,7 +108,7 @@ function handleLogin() {
       store
         .dispatch('Login', loginForm.value)
         .then(() => {
-          proxy.$modal.msgSuccess('登录成功')
+          proxy.$modal.msgSuccess(proxy.$t('login.loginSuccess'))
           router.push({ path: redirect.value || '/' })
         })
         .catch((error) => {
@@ -167,13 +172,6 @@ getCookie()
   width: 310px;
   padding: 25px 25px 5px 25px;
 
-  .el-input {
-    height: 40px;
-
-    input {
-      height: 40px;
-    }
-  }
 
   .input-icon {
     height: 39px;
@@ -216,4 +214,10 @@ getCookie()
   height: 40px;
   padding-left: 12px;
 }
+.langSet {
+  position: absolute;
+  right: 120px;
+  top: 100px;
+  color: #fff;
+}
 </style>

vite.config.js

@@ -5,16 +5,22 @@ import createVitePlugins from './vite/plugins'
 // https://vitejs.dev/config/
 export default defineConfig(({ mode, command }) => {
   const env = loadEnv(mode, process.cwd())
+
+  const alias = {
+    // 设置路径
+    '~': path.resolve(__dirname, './'),
+    // 设置别名
+    '@': path.resolve(__dirname, './src')
+  }
+  if (command === 'serve') {
+    // 解决警告You are running the esm-bundler build of vue-i18n.
+    alias['vue-i18n'] = 'vue-i18n/dist/vue-i18n.cjs.js'
+  }
   return {
     plugins: createVitePlugins(env, command === 'build'),
     resolve: {
       // https://cn.vitejs.dev/config/#resolve-alias
-      alias: {
+      alias: alias,
-        // 设置路径
-        '~': path.resolve(__dirname, './'),
-        // 设置别名
-        '@': path.resolve(__dirname, './src')
-      },
       // 导入时想要省略的扩展名列表
       // https://cn.vitejs.dev/config/#resolve-extensions
       extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
@@ -35,7 +41,7 @@ export default defineConfig(({ mode, command }) => {
           entryFileNames: "static/js/[name]-[hash].js",
           assetFileNames: "static/[ext]/[name]-[hash].[ext]"
         }
-			},
+      },
     },
     // vite 相关配置
     server: {