Browse Source

feat(架构): 菜单、tab国际化功能完善

shizhongming 3 years ago
parent
commit
e54d91891e
  1. 18
      src/components/SimpleMenu/src/SimpleSubMenu.vue
  2. 1
      src/hooks/web/useI18n.ts
  3. 17
      src/layouts/default/tabs/components/TabContent.vue
  4. 0
      src/locales/lang/en_US.ts
  5. 1
      src/modules/system/views/user/lang/en_US.ts
  6. 2
      src/settings/localeSetting.ts
  7. 2
      types/config.d.ts

18
src/components/SimpleMenu/src/SimpleSubMenu.vue

@ -45,10 +45,9 @@
</SubMenu>
</template>
<script lang="ts" setup>
import type { PropType } from 'vue';
import { PropType, unref, computed } from 'vue';
import type { Menu } from '@/router/types';
import { computed } from 'vue';
import { useDesign } from '@/hooks/web/useDesign';
import Icon from '@/components/Icon/Icon.vue';
@ -73,13 +72,24 @@
theme: propTypes.oneOf(['dark', 'light']),
});
const { t } = useI18n();
const { locale } = useI18n();
const { prefixCls } = useDesign('simple-menu');
const getShowMenu = computed(() => !props.item?.meta?.hideMenu);
const getIcon = computed(() => (props.item?.img ? undefined : props.item?.icon));
const getImg = computed(() => props.item?.img);
const getI18nName = computed(() => t(props.item?.name));
// const getI18nName = computed(() => t(props.item?.name));
const getI18nName = computed(() => {
const locales = props.item.meta && props.item.meta.locales;
const title = props.item.meta && props.item.meta.title;
if (locales) {
const i18nTitle = locales[unref(locale)];
if (i18nTitle) {
return i18nTitle;
}
}
return title;
});
const getShowSubTitle = computed(() => !props.collapse || !props.parent);
const getIsCollapseParent = computed(() => !!props.collapse && !!props.parent);
const getLevelClass = computed(() => {

1
src/hooks/web/useI18n.ts

@ -23,6 +23,7 @@ function getKey(namespace: string | undefined, key: string) {
export function useI18n(namespace?: string): {
t: I18nGlobalTranslation;
locale?: any;
} {
const normalFn = {
t: (key: string) => {

17
src/layouts/default/tabs/components/TabContent.vue

@ -39,11 +39,24 @@
});
const { prefixCls } = useDesign('multiple-tabs-content');
const { t } = useI18n();
const { locale } = useI18n();
// const getTitle = computed(() => {
// const { tabItem: { meta } = {} } = props;
// return meta && t(meta.title as string);
// });
const getTitle = computed(() => {
const { tabItem: { meta } = {} } = props;
return meta && t(meta.title as string);
const { title, locales } = meta as any;
if (locales) {
const localeTitle = locales[unref(locale)];
if (!localeTitle || localeTitle.trim() === '') {
return title;
}
return locales[unref(locale)];
}
return title;
});
const getIsTabs = computed(() => !props.isExtra);

0
src/locales/lang/en.ts → src/locales/lang/en_US.ts

1
src/modules/system/views/user/lang/en_US.ts

@ -20,6 +20,7 @@ export default {
email: 'Email',
mobile: 'Mobile',
userType: 'User type',
accountStatus: 'Status',
},
button: {
createAccount: 'Create account',

2
src/settings/localeSetting.ts

@ -3,7 +3,7 @@ import type { LocaleSetting, LocaleType } from '#/config';
export const LOCALE: { [key: string]: LocaleType } = {
ZH_CN: 'zh_CN',
EN_US: 'en',
EN_US: 'en_US',
};
export const localeSetting: LocaleSetting = {

2
types/config.d.ts

@ -11,7 +11,7 @@ import {
import { CacheTypeEnum } from '@/enums/cacheEnum';
export type LocaleType = 'zh_CN' | 'en' | 'ru' | 'ja' | 'ko';
export type LocaleType = 'zh_CN' | 'en_US' | 'ru' | 'ja' | 'ko';
export interface MenuSetting {
bgColor: string;

Loading…
Cancel
Save