add i18n

LiuHao

2023-04-18 d2bce3fcbe514d33eb930d33acf1f8db3fa22af9

add i18n

 src/components/LangSelect/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,39 @@
<template>
  <el-dropdown trigger="click" @command="handleLanguageChange">
    <div class="lang-select--style">
      <svg-icon icon-class="language" />
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item :disabled="appStore.language === 'zh-cn'" command="zh-cn"> ä¸­æ–‡ </el-dropdown-item>
        <el-dropdown-item :disabled="appStore.language === 'en'" command="en"> English </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n';
import SvgIcon from '@/components/SvgIcon/index.vue';
import { useAppStore } from '@/store/modules/app';

const appStore = useAppStore();
const { locale } = useI18n();

function handleLanguageChange(lang: string) {
  locale.value = lang;
  appStore.changeLanguage(lang);
  if (lang == 'en') {
    ElMessage.success('Switch Language Successful!');
  } else {
    ElMessage.success('切换语言成功！');
  }
}
</script>

<style lang="scss" scoped>
.lang-select--style {
  font-size: 18px;
  line-height: 50px;
}
</style>

 src/components/Screenfull/index.vue

@@ -7,14 +7,3 @@
<script setup lang="ts">
const { isFullscreen, toggle } = useFullscreen();
</script>

<style lang="scss" scoped>
.screenfull-svg {
  display: inline-block;
  cursor: pointer;
  fill: #5a5e66;
  width: 20px;
  height: 20px;
  vertical-align: 10px;
}
</style>

 src/lang/en.ts

@@ -6,20 +6,22 @@
  },
  // ç™»å½•é¡µé¢å›½é™…化
  login: {
    title: 'vue3-element-admin',
    username: 'Username',
    password: 'Password',
    login: 'Login',
    code: 'Verification Code',
    copyright: '',
    icp: '',
    thirdPartyLogin: 'third-party login'
    copyright: ''
  },
  // å¯¼èˆªæ å›½é™…化
  navbar: {
    full: 'Full Screen',
    language: 'Language',
    dashboard: 'Dashboard',
    logout: 'Logout',
    document: 'Document',
    gitee: 'Gitee'
    layoutSize: 'Layout Size',
    selectTenant: 'Select Tenant',
    layoutSetting: 'Layout Setting',
    personalCenter: 'Personal Center',
    logout: 'Logout'
  }
};

 src/lang/index.ts

@@ -4,6 +4,7 @@
// æœ¬åœ°è¯­è¨€åŒ…
import enLocale from './en';
import zhCnLocale from './zh-cn';
import Cookies from 'js-cookie';

const messages = {
  'zh-cn': {
@@ -16,12 +17,11 @@

/**
 * èŽ·å–当前系统使用语言字符串
 *
 * @returns zh-cn|en ...
 */
export const getLanguage = () => {
  // æœ¬åœ°ç¼“存获取
  let language = localStorage.getItem('language');
  let language = Cookies.get('language');
  if (language) {
    return language;
  }
@@ -39,7 +39,7 @@
const i18n = createI18n({
  legacy: false,
  locale: getLanguage(),
  messages: messages
  messages
});

export default i18n;

 src/lang/zh-cn.ts

@@ -6,19 +6,21 @@
  },
  // ç™»å½•é¡µé¢å›½é™…化
  login: {
    title: 'vue3-element-admin',
    username: '用户名',
    password: '密码',
    login: '登 å½•',
    code: '请输入验证码',
    copyright: '',
    icp: '',
    thirdPartyLogin: '第三方登录'
    copyright: ''
  },
  navbar: {
    full: '全屏',
    language: '语言',
    dashboard: '首页',
    logout: '注销',
    document: '项目文档',
    gitee: '码云'
    layoutSize: '布局大小',
    selectTenant: '选择租户',
    layoutSetting: '布局设置',
    personalCenter: '个人中心',
    logout: '退出登录'
  }
};

 src/layout/components/Navbar.vue

@@ -11,7 +11,7 @@
          clearable
          filterable
          reserve-keyword
          placeholder="请选择租户"
          :placeholder="$t('navbar.selectTenant')"
          v-if="userId === 1 && tenantEnabled"
          @change="dynamicTenantEvent"
          @clear="dynamicClearEvent"
@@ -22,19 +22,23 @@

        <header-search id="header-search" class="right-menu-item" />

        <el-tooltip content="源码地址" effect="dark" placement="bottom">
        <el-tooltip content="Github" effect="dark" placement="bottom">
          <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
        </el-tooltip>

        <el-tooltip content="文档地址" effect="dark" placement="bottom">
        <el-tooltip :content="$t('navbar.document')" effect="dark" placement="bottom">
          <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
        </el-tooltip>

        <el-tooltip content="全屏" effect="dark" placement="bottom">
        <el-tooltip :content="$t('navbar.full')" effect="dark" placement="bottom">
          <screenfull id="screenfull" class="right-menu-item hover-effect" />
        </el-tooltip>

        <el-tooltip content="布局大小" effect="dark" placement="bottom">
        <el-tooltip :content="$t('navbar.language')" effect="dark" placement="bottom">
          <lang-select id="lang-select" class="right-menu-item hover-effect" />
        </el-tooltip>

        <el-tooltip :content="$t('navbar.layoutSize')" effect="dark" placement="bottom">
          <size-select id="size-select" class="right-menu-item hover-effect" />
        </el-tooltip>
      </template>
@@ -47,13 +51,13 @@
          <template #dropdown>
            <el-dropdown-menu>
              <router-link to="/user/profile" v-if="!dynamic">
                <el-dropdown-item>个人中心</el-dropdown-item>
                <el-dropdown-item>{{ $t('navbar.personalCenter') }}</el-dropdown-item>
              </router-link>
              <el-dropdown-item command="setLayout">
                <span>布局设置</span>
                <span>{{ $t('navbar.layoutSetting') }}</span>
              </el-dropdown-item>
              <el-dropdown-item divided command="logout">
                <span>退出登录</span>
                <span>{{ $t('navbar.logout') }}</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>

 src/main.ts

@@ -30,6 +30,9 @@
import { getConfigKey, updateConfigByKey } from '@/api/system/config';
import { parseTime, addDateRange, handleTree, selectDictLabel, selectDictLabels } from '@/utils/ruoyi';

// å›½é™…化
import i18n from '@/lang/index';

const app = createApp(App);
// å…¨å±€æ–¹æ³•æŒ‚è½½
app.config.globalProperties.useDict = useDict;
@@ -46,6 +49,7 @@
app.use(ElementIcons);
app.use(router);
app.use(store);
app.use(i18n);
app.use(plugins);
// è‡ªå®šä¹‰æŒ‡ä»¤
directive(app);

 src/store/modules/app.ts

@@ -14,7 +14,7 @@
  // è¯­è¨€
  const language = ref(Cookies.get('language'));
  const locale = computed(() => {
    if (language?.value == 'en') {
    if (language.value == 'en') {
      return en;
    } else {
      return zhCn;
@@ -53,6 +53,7 @@

  const changeLanguage = (val: string): void => {
    language.value = val;
    Cookies.set('language', val);
  };

  return {