easydo-zcgx-web/src/layout/index.vue

<template>
    <!--  :locale="localeLang" -->
    <el-config-provider :locale="localeLang">
        <div class="tjm_wrapper">
            <div class="tjm_warpper_container fixed">
                <tjm-side-bar v-if="layoutStyle=='vertical'" />
                <div class="tjm_container" :class="{ 'is-collapse': collapse,'is-layoutStyle':layoutStyle=='horizontal' }">
                    <div
                        class="header_container fixed-header"
                        :class="{ 'is-collapse': collapse, 'is-layoutStyle': layoutStyle == 'horizontal' }"
                    >
                        <tjm-nav-bar />
                        <tjm-tabs-bar />
                    </div>
                    <div class="content_container">
                        <tjm-main />
                    </div>
                </div>
            </div>
        </div>
    </el-config-provider>
</template>

<script setup>
import { getConfig, setConfig } from '@/config/config'
import TjmSideBar from './components/SideBar/index.vue'
import TjmNavBar from './components/NavBar/index.vue'
import TjmTabsBar from './components/TabsBar/index.vue'
import TjmMain from './components/Main/index.vue'
import { useSettingStore } from '@/store/settings.js'
const settingStore = useSettingStore()
const { collapse,layoutStyle } = storeToRefs(settingStore)
import { useI18n } from 'vue-i18n'
const { messages, locale, t } = useI18n()
const localeLang = ref(messages[getConfig('globalI18n')])
// 修改element 和 i18n 默认语言
const changeLanguage = () => {
    locale.value = getConfig('globalI18n')
    localeLang.value = messages.value[locale.value]
}
// 监听修改语言实现element
watchEffect(changeLanguage)
</script>

<style lang="scss" scoped>
@mixin fix-header {
  position: fixed;
  top: 0;
  right: 0px;
  z-index: $base-z-index - 2;
  width: calc(100% - $base-sidebar-width);
}
.tjm_wrapper {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: auto;
  .tjm_warpper_container {
    &.fixed {
      padding-top: calc(#{$base-navbar-height} + #{$base-tabsbar-height});
    }
    .tjm_container {
      min-height: 100%;
      margin-left: $base-sidebar-width;
      &.is-collapse {
        margin-left: $base-sidebar-width-min;
        border-right: 0;
      }
      &.is-layoutStyle {
        margin-left: 0;
        border-right: 0;
      }
      .header_container {
        box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
        &.fixed-header {
          @include fix-header;
        }
        &.is-collapse {
          width: calc(100% - $base-sidebar-width-min);
        }
        &.is-layoutStyle {
          width: 100%;
        }
      }
      .content_container {
        background: #f7f8fa;
      }
    }
  }
}
</style>