gaoxing/UNIVPLMDataIntegration
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor:前端的菜单、面包屑、导航等国际化

Browse Source
This commit is contained in:
PZ688 2025-03-24 01:32:37 +08:00
parent ab4056369f
commit 8274eb5f0d
6 changed files with 48 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
Web/src/layout/component/columnsAside.vue
View File

@ -14,19 +14,19 @@
} }
" "
:class="{ 'layout-columns-active': state.liIndex === k, 'layout-columns-hover': state.liHoverIndex === k }" :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)"> <div :class="themeConfig.columnsAsideLayout" v-if="!v.meta.isLink || (v.meta.isLink && v.meta.isIframe)">
<SvgIcon :name="v.meta.icon" /> <SvgIcon :name="v.meta.icon" />
<div class="columns-vertical-title font12"> <div class="columns-vertical-title font12">
{{ $t(v.meta.title) }} {{ $t(`message.menu.${v.meta.title}`) }}
</div> </div>
</div> </div>
<div :class="themeConfig.columnsAsideLayout" v-else> <div :class="themeConfig.columnsAsideLayout" v-else>
<a :href="v.meta.isLink" target="_blank"> <a :href="v.meta.isLink" target="_blank">
<SvgIcon :name="v.meta.icon" /> <SvgIcon :name="v.meta.icon" />
<div class="columns-vertical-title font12"> <div class="columns-vertical-title font12">
{{ $t(v.meta.title) }} {{ $t(`message.menu.${v.meta.title}`) }}
</div> </div>
</a> </a>
</div> </div>

4
Web/src/layout/navBars/topBar/breadcrumb.vue
View File

@ -6,11 +6,11 @@
<el-breadcrumb-item v-for="(v, k) in state.breadcrumbList" :key="v.path"> <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"> <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" /> <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> <div v-else>{{ v.meta.tagsViewName }}</div>
</span> </span>
<a v-else @click.prevent="onBreadcrumbClick(v)" style="display: flex"> <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> </a>
</el-breadcrumb-item> </el-breadcrumb-item>
</transition-group> </transition-group>

41
Web/src/layout/navBars/topBar/user.vue
View File

@ -6,9 +6,12 @@
</div> </div>
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
<el-dropdown-item command="large" :disabled="state.disabledSize === 'large'">{{ $t('message.user.dropdownLarge') }}</el-dropdown-item> <el-dropdown-item command="large" :disabled="state.disabledSize === 'large'">{{
<el-dropdown-item command="default" :disabled="state.disabledSize === 'default'">{{ $t('message.user.dropdownDefault') }}</el-dropdown-item> $t('message.user.dropdownLarge') }}</el-dropdown-item>
<el-dropdown-item command="small" :disabled="state.disabledSize === 'small'">{{ $t('message.user.dropdownSmall') }}</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> </el-dropdown-menu>
</template> </template>
</el-dropdown> </el-dropdown>
@ -18,7 +21,8 @@
</div> </div>
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <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="flex items-center">
<div class="mr-2"> <div class="mr-2">
<FlagIcon :code="getCountryCode(key)" :size="18" /> <FlagIcon :code="getCountryCode(key)" :size="18" />
@ -52,7 +56,8 @@
</el-popover> </el-popover>
</div> </div>
<div class="layout-navbars-breadcrumb-user-icon" @click="onScreenfullClick"> <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>
<div class="layout-navbars-breadcrumb-user-icon mr10" @click="onOnlineUserClick"> <div class="layout-navbars-breadcrumb-user-icon mr10" @click="onOnlineUserClick">
<el-icon :title="$t('message.list.onlineUser')"> <el-icon :title="$t('message.list.onlineUser')">
@ -82,10 +87,14 @@
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
<!-- <el-dropdown-item command="/dashboard/home">{{ $t('message.user.dropdown1') }}</el-dropdown-item> --> <!-- <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="Avatar" command="/system/userCenter">{{ $t('message.user.dropdown2')
<el-dropdown-item :icon="Loading" command="clearCache">{{ $t('message.user.dropdown3') }}</el-dropdown-item> }}</el-dropdown-item>
<el-dropdown-item :icon="Lock" divided command="lockScreen">{{ $t('message.layout.threeIsLockScreen') }}</el-dropdown-item> <el-dropdown-item :icon="Loading" command="clearCache">{{ $t('message.user.dropdown3')
<el-dropdown-item :icon="CircleCloseFilled" divided command="logOut">{{ $t('message.user.dropdown5') }}</el-dropdown-item> }}</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> </el-dropdown-menu>
</template> </template>
</el-dropdown> </el-dropdown>
@ -144,6 +153,9 @@ const state = reactive({
disabledI18n: 'zh-cn', disabledI18n: 'zh-cn',
disabledSize: 'large', disabledSize: 'large',
noticeList: [] as any, // 站内信列表 noticeList: [] as any, // 站内信列表
tagsRefsIndex: 0,
tagsViewList: [],
tagsViewRoutesList: [],
}); });
// 设置分割样式 // 设置分割样式
const layoutUserFlexNum = computed(() => { const layoutUserFlexNum = computed(() => {
@ -215,7 +227,7 @@ const onHandleCommandClick = (path: string) => {
.then(async () => { .then(async () => {
clearAccessTokens(); clearAccessTokens();
}) })
.catch(() => {}); .catch(() => { });
} else { } else {
router.push(path); router.push(path);
} }
@ -245,8 +257,15 @@ const onLanguageChange = (lang: string) => {
locale.value = lang; locale.value = lang;
other.useTitle(); other.useTitle();
initI18nOrSize('globalI18n', 'disabledI18n'); initI18nOrSize('globalI18n', 'disabledI18n');
window.location.reload(); // window.location.reload();
// 关闭全部tabpage.
closeAllTagsView();
}; };
const closeAllTagsView = () => {
};
// 初始化组件大小/i18n // 初始化组件大小/i18n
const initI18nOrSize = (value: string, attr: string) => { const initI18nOrSize = (value: string, attr: string) => {
(<any>state)[attr] = Local.get('themeConfig')[value]; (<any>state)[attr] = Local.get('themeConfig')[value];

6
Web/src/layout/navMenu/horizontal.vue
View File

@ -5,7 +5,7 @@
<el-sub-menu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path"> <el-sub-menu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
<template #title> <template #title>
<SvgIcon :name="val.meta.icon" /> <SvgIcon :name="val.meta.icon" />
<span>{{ $t(val.meta.title) }}</span> <span>{{ $t(`message.menu.${val.meta.title}`) }}</span>
</template> </template>
<SubItem :chil="val.children" /> <SubItem :chil="val.children" />
</el-sub-menu> </el-sub-menu>
@ -13,12 +13,12 @@
<el-menu-item :index="val.path" :key="val.path"> <el-menu-item :index="val.path" :key="val.path">
<template #title v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)"> <template #title v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
<SvgIcon :name="val.meta.icon" /> <SvgIcon :name="val.meta.icon" />
{{ $t(val.meta.title) }} {{ $t(`message.menu.${val.meta.title}`) }}
</template> </template>
<template #title v-else> <template #title v-else>
<a class="w100" @click.prevent="onALinkClick(val)"> <a class="w100" @click.prevent="onALinkClick(val)">
<SvgIcon :name="val.meta.icon" /> <SvgIcon :name="val.meta.icon" />
{{ $t(val.meta.title) }} {{ $t(`message.menu.${val.meta.title}`) }}
</a> </a>
</template> </template>
</el-menu-item> </el-menu-item>

6
Web/src/layout/navMenu/subItem.vue
View File

@ -3,7 +3,7 @@
<el-sub-menu :index="val.path" :key="val.path" v-if="val.children && val.children.length > 0"> <el-sub-menu :index="val.path" :key="val.path" v-if="val.children && val.children.length > 0">
<template #title> <template #title>
<SvgIcon :name="val.meta.icon" /> <SvgIcon :name="val.meta.icon" />
<span>{{ $t(val.meta.title) }}</span> <span>{{ $t(`message.menu.${val.meta.title}`) }}</span>
</template> </template>
<sub-item :chil="val.children" /> <sub-item :chil="val.children" />
</el-sub-menu> </el-sub-menu>
@ -11,12 +11,12 @@
<el-menu-item :index="val.path" :key="val.path"> <el-menu-item :index="val.path" :key="val.path">
<template v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)"> <template v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
<SvgIcon :name="val.meta.icon" /> <SvgIcon :name="val.meta.icon" />
<span>{{ $t(val.meta.title) }}</span> <span>{{ $t(`message.menu.${val.meta.title}`) }}</span>
</template> </template>
<template v-else> <template v-else>
<a class="w100" @click.prevent="onALinkClick(val)"> <a class="w100" @click.prevent="onALinkClick(val)">
<SvgIcon :name="val.meta.icon" /> <SvgIcon :name="val.meta.icon" />
{{ $t(val.meta.title) }} {{ $t(`message.menu.${val.meta.title}`) }}
</a> </a>
</template> </template>
</el-menu-item> </el-menu-item>

18
Web/src/layout/navMenu/vertical.vue
View File

@ -1,17 +1,12 @@
<template> <template>
<el-menu <el-menu router :default-active="state.defaultActive" background-color="transparent" :collapse="state.isCollapse"
router :unique-opened="getThemeConfig.isUniqueOpened" :collapse-transition="false">
:default-active="state.defaultActive"
background-color="transparent"
:collapse="state.isCollapse"
:unique-opened="getThemeConfig.isUniqueOpened"
:collapse-transition="false"
>
<template v-for="val in menuLists"> <template v-for="val in menuLists">
<el-sub-menu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path"> <el-sub-menu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
<template #title> <template #title>
<SvgIcon :name="val.meta.icon" /> <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> </template>
<SubItem :chil="val.children" /> <SubItem :chil="val.children" />
</el-sub-menu> </el-sub-menu>
@ -19,10 +14,11 @@
<el-menu-item :index="val.path" :key="val.path"> <el-menu-item :index="val.path" :key="val.path">
<SvgIcon :name="val.meta.icon" /> <SvgIcon :name="val.meta.icon" />
<template #title v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)"> <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>
<template #title v-else> <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> </template>
</el-menu-item> </el-menu-item>
</template> </template>