refactor:前端的菜单、面包屑、导航等国际化
This commit is contained in:
PZ688
parent
ab4056369f
commit
8274eb5f0d
@ -14,19 +14,19 @@
|
||||
}
|
||||
"
|
||||
:class="{ 'layout-columns-active': state.liIndex === k, 'layout-columns-hover': state.liHoverIndex === k }"
|
||||
:title="$t(v.meta.title)"
|
||||
:title="$t(`message.menu.${v.meta.title}`)"
|
||||
>
|
||||
<div :class="themeConfig.columnsAsideLayout" v-if="!v.meta.isLink || (v.meta.isLink && v.meta.isIframe)">
|
||||
<SvgIcon :name="v.meta.icon" />
|
||||
<div class="columns-vertical-title font12">
|
||||
{{ $t(v.meta.title) }}
|
||||
{{ $t(`message.menu.${v.meta.title}`) }}
|
||||
</div>
|
||||
</div>
|
||||
<div :class="themeConfig.columnsAsideLayout" v-else>
|
||||
<a :href="v.meta.isLink" target="_blank">
|
||||
<SvgIcon :name="v.meta.icon" />
|
||||
<div class="columns-vertical-title font12">
|
||||
{{ $t(v.meta.title) }}
|
||||
{{ $t(`message.menu.${v.meta.title}`) }}
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -6,11 +6,11 @@
|
||||
<el-breadcrumb-item v-for="(v, k) in state.breadcrumbList" :key="v.path">
|
||||
<span v-if="k === state.breadcrumbList.length - 1" class="layout-navbars-breadcrumb-span">
|
||||
<SvgIcon :name="v.meta.icon" class="layout-navbars-breadcrumb-iconfont" v-if="themeConfig.isBreadcrumbIcon" />
|
||||
<div v-if="v.meta.title">{{ $t(v.meta.title) }}</div>
|
||||
<div v-if="v.meta.title">{{ $t(`message.menu.${v.meta.title}`) }}</div>
|
||||
<div v-else>{{ v.meta.tagsViewName }}</div>
|
||||
</span>
|
||||
<a v-else @click.prevent="onBreadcrumbClick(v)" style="display: flex">
|
||||
<SvgIcon :name="v.meta.icon" class="layout-navbars-breadcrumb-iconfont" v-if="themeConfig.isBreadcrumbIcon" />{{ $t(v.meta.title) }}
|
||||
<SvgIcon :name="v.meta.icon" class="layout-navbars-breadcrumb-iconfont" v-if="themeConfig.isBreadcrumbIcon" />{{ $t(`message.menu.${v.meta.title}`) }}
|
||||
</a>
|
||||
</el-breadcrumb-item>
|
||||
</transition-group>
|
||||
|
||||
@ -6,9 +6,12 @@
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="large" :disabled="state.disabledSize === 'large'">{{ $t('message.user.dropdownLarge') }}</el-dropdown-item>
|
||||
<el-dropdown-item command="default" :disabled="state.disabledSize === 'default'">{{ $t('message.user.dropdownDefault') }}</el-dropdown-item>
|
||||
<el-dropdown-item command="small" :disabled="state.disabledSize === 'small'">{{ $t('message.user.dropdownSmall') }}</el-dropdown-item>
|
||||
<el-dropdown-item command="large" :disabled="state.disabledSize === 'large'">{{
|
||||
$t('message.user.dropdownLarge') }}</el-dropdown-item>
|
||||
<el-dropdown-item command="default" :disabled="state.disabledSize === 'default'">{{
|
||||
$t('message.user.dropdownDefault') }}</el-dropdown-item>
|
||||
<el-dropdown-item command="small" :disabled="state.disabledSize === 'small'">{{
|
||||
$t('message.user.dropdownSmall') }}</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
@ -18,7 +21,8 @@
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item v-for="(value, key) in languageList" :key="key" :command="key" :disabled="state.disabledI18n === key">
|
||||
<el-dropdown-item v-for="(value, key) in languageList" :key="key" :command="key"
|
||||
:disabled="state.disabledI18n === key">
|
||||
<div class="flex items-center">
|
||||
<div class="mr-2">
|
||||
<FlagIcon :code="getCountryCode(key)" :size="18" />
|
||||
@ -52,7 +56,8 @@
|
||||
</el-popover>
|
||||
</div>
|
||||
<div class="layout-navbars-breadcrumb-user-icon" @click="onScreenfullClick">
|
||||
<i class="iconfont" :title="state.isScreenfull ? $t('message.user.title6') : $t('message.user.title5')" :class="!state.isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"></i>
|
||||
<i class="iconfont" :title="state.isScreenfull ? $t('message.user.title6') : $t('message.user.title5')"
|
||||
:class="!state.isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"></i>
|
||||
</div>
|
||||
<div class="layout-navbars-breadcrumb-user-icon mr10" @click="onOnlineUserClick">
|
||||
<el-icon :title="$t('message.list.onlineUser')">
|
||||
@ -82,10 +87,14 @@
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<!-- <el-dropdown-item command="/dashboard/home">{{ $t('message.user.dropdown1') }}</el-dropdown-item> -->
|
||||
<el-dropdown-item :icon="Avatar" command="/system/userCenter">{{ $t('message.user.dropdown2') }}</el-dropdown-item>
|
||||
<el-dropdown-item :icon="Loading" command="clearCache">{{ $t('message.user.dropdown3') }}</el-dropdown-item>
|
||||
<el-dropdown-item :icon="Lock" divided command="lockScreen">{{ $t('message.layout.threeIsLockScreen') }}</el-dropdown-item>
|
||||
<el-dropdown-item :icon="CircleCloseFilled" divided command="logOut">{{ $t('message.user.dropdown5') }}</el-dropdown-item>
|
||||
<el-dropdown-item :icon="Avatar" command="/system/userCenter">{{ $t('message.user.dropdown2')
|
||||
}}</el-dropdown-item>
|
||||
<el-dropdown-item :icon="Loading" command="clearCache">{{ $t('message.user.dropdown3')
|
||||
}}</el-dropdown-item>
|
||||
<el-dropdown-item :icon="Lock" divided command="lockScreen">{{
|
||||
$t('message.layout.threeIsLockScreen') }}</el-dropdown-item>
|
||||
<el-dropdown-item :icon="CircleCloseFilled" divided command="logOut">{{ $t('message.user.dropdown5')
|
||||
}}</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
@ -144,6 +153,9 @@ const state = reactive({
|
||||
disabledI18n: 'zh-cn',
|
||||
disabledSize: 'large',
|
||||
noticeList: [] as any, // 站内信列表
|
||||
tagsRefsIndex: 0,
|
||||
tagsViewList: [],
|
||||
tagsViewRoutesList: [],
|
||||
});
|
||||
// 设置分割样式
|
||||
const layoutUserFlexNum = computed(() => {
|
||||
@ -215,7 +227,7 @@ const onHandleCommandClick = (path: string) => {
|
||||
.then(async () => {
|
||||
clearAccessTokens();
|
||||
})
|
||||
.catch(() => {});
|
||||
.catch(() => { });
|
||||
} else {
|
||||
router.push(path);
|
||||
}
|
||||
@ -245,8 +257,15 @@ const onLanguageChange = (lang: string) => {
|
||||
locale.value = lang;
|
||||
other.useTitle();
|
||||
initI18nOrSize('globalI18n', 'disabledI18n');
|
||||
window.location.reload();
|
||||
// window.location.reload();
|
||||
// 关闭全部tabpage.
|
||||
closeAllTagsView();
|
||||
};
|
||||
|
||||
const closeAllTagsView = () => {
|
||||
|
||||
};
|
||||
|
||||
// 初始化组件大小/i18n
|
||||
const initI18nOrSize = (value: string, attr: string) => {
|
||||
(<any>state)[attr] = Local.get('themeConfig')[value];
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<el-sub-menu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
|
||||
<template #title>
|
||||
<SvgIcon :name="val.meta.icon" />
|
||||
<span>{{ $t(val.meta.title) }}</span>
|
||||
<span>{{ $t(`message.menu.${val.meta.title}`) }}</span>
|
||||
</template>
|
||||
<SubItem :chil="val.children" />
|
||||
</el-sub-menu>
|
||||
@ -13,12 +13,12 @@
|
||||
<el-menu-item :index="val.path" :key="val.path">
|
||||
<template #title v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
|
||||
<SvgIcon :name="val.meta.icon" />
|
||||
{{ $t(val.meta.title) }}
|
||||
{{ $t(`message.menu.${val.meta.title}`) }}
|
||||
</template>
|
||||
<template #title v-else>
|
||||
<a class="w100" @click.prevent="onALinkClick(val)">
|
||||
<SvgIcon :name="val.meta.icon" />
|
||||
{{ $t(val.meta.title) }}
|
||||
{{ $t(`message.menu.${val.meta.title}`) }}
|
||||
</a>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<el-sub-menu :index="val.path" :key="val.path" v-if="val.children && val.children.length > 0">
|
||||
<template #title>
|
||||
<SvgIcon :name="val.meta.icon" />
|
||||
<span>{{ $t(val.meta.title) }}</span>
|
||||
<span>{{ $t(`message.menu.${val.meta.title}`) }}</span>
|
||||
</template>
|
||||
<sub-item :chil="val.children" />
|
||||
</el-sub-menu>
|
||||
@ -11,12 +11,12 @@
|
||||
<el-menu-item :index="val.path" :key="val.path">
|
||||
<template v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
|
||||
<SvgIcon :name="val.meta.icon" />
|
||||
<span>{{ $t(val.meta.title) }}</span>
|
||||
<span>{{ $t(`message.menu.${val.meta.title}`) }}</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a class="w100" @click.prevent="onALinkClick(val)">
|
||||
<SvgIcon :name="val.meta.icon" />
|
||||
{{ $t(val.meta.title) }}
|
||||
{{ $t(`message.menu.${val.meta.title}`) }}
|
||||
</a>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
|
||||
@ -1,17 +1,12 @@
|
||||
<template>
|
||||
<el-menu
|
||||
router
|
||||
:default-active="state.defaultActive"
|
||||
background-color="transparent"
|
||||
:collapse="state.isCollapse"
|
||||
:unique-opened="getThemeConfig.isUniqueOpened"
|
||||
:collapse-transition="false"
|
||||
>
|
||||
<el-menu router :default-active="state.defaultActive" background-color="transparent" :collapse="state.isCollapse"
|
||||
:unique-opened="getThemeConfig.isUniqueOpened" :collapse-transition="false">
|
||||
<template v-for="val in menuLists">
|
||||
<el-sub-menu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
|
||||
<template #title>
|
||||
<SvgIcon :name="val.meta.icon" />
|
||||
<span>{{ $t(val.meta.title) }}</span>
|
||||
<!-- <span>{{ $t(val.meta.title) }}</span> -->
|
||||
<span>{{ $t(`message.menu.${val.meta.title}`) }}</span>
|
||||
</template>
|
||||
<SubItem :chil="val.children" />
|
||||
</el-sub-menu>
|
||||
@ -19,10 +14,11 @@
|
||||
<el-menu-item :index="val.path" :key="val.path">
|
||||
<SvgIcon :name="val.meta.icon" />
|
||||
<template #title v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
|
||||
<span>{{ $t(val.meta.title) }}</span>
|
||||
<!-- <span>{{ $t(val.meta.title) }}</span> -->
|
||||
<span>{{ $t(`message.menu.${val.meta.title}`) }}</span>
|
||||
</template>
|
||||
<template #title v-else>
|
||||
<a class="w100" @click.prevent="onALinkClick(val)">{{ $t(val.meta.title) }}</a>
|
||||
<a class="w100" @click.prevent="onALinkClick(val)">{{ $t(`message.menu.${val.meta.title}`) }}</a>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user