mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-04-06 03:59:53 +08:00
refactor: 优化plugin-layout和plugin-locale
This commit is contained in:
parent
82add74b66
commit
b076db692e
@ -28,7 +28,7 @@ const _addAccessTag = (arr) => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
export const addAccessTag = (menus) => {
|
export const transform = (menus) => {
|
||||||
const originData = unref(menus);
|
const originData = unref(menus);
|
||||||
_addAccessTag(originData);
|
_addAccessTag(originData);
|
||||||
return originData;
|
return originData;
|
||||||
|
@ -0,0 +1,33 @@
|
|||||||
|
import { unref, computed } from 'vue';
|
||||||
|
import { plugin } from '@@/core/coreExports';
|
||||||
|
|
||||||
|
|
||||||
|
const transTitle = (name) => {
|
||||||
|
const sharedLocale = plugin.getShared('locale');
|
||||||
|
if (sharedLocale) {
|
||||||
|
const { t } = sharedLocale.useI18n();
|
||||||
|
return t(name);
|
||||||
|
}
|
||||||
|
return name;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
const _transform = (arr) => {
|
||||||
|
if (Array.isArray(arr)) {
|
||||||
|
arr.forEach((item) => {
|
||||||
|
if (item.title) {
|
||||||
|
item._title = item.title;
|
||||||
|
item.title = computed(() => transTitle(item._title));
|
||||||
|
}
|
||||||
|
if (item.children && item.children.length > 0) {
|
||||||
|
_transform(item.children);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const transform = (menus) => {
|
||||||
|
const originData = unref(menus);
|
||||||
|
_transform(originData);
|
||||||
|
return originData;
|
||||||
|
};
|
@ -7,7 +7,7 @@
|
|||||||
>
|
>
|
||||||
<template v-for="(item, index) in fixedMenus" :key="index">
|
<template v-for="(item, index) in fixedMenus" :key="index">
|
||||||
<template v-if="item.access">
|
<template v-if="item.access">
|
||||||
<a-sub-menu v-if="item.children" :title="transTitle(item.title)">
|
<a-sub-menu v-if="item.children" :title="item.title">
|
||||||
<template
|
<template
|
||||||
v-for="(item1, index) in item.children"
|
v-for="(item1, index) in item.children"
|
||||||
:key="index"
|
:key="index"
|
||||||
@ -15,7 +15,7 @@
|
|||||||
<template v-if="item1.access">
|
<template v-if="item1.access">
|
||||||
<a-sub-menu
|
<a-sub-menu
|
||||||
v-if="item1.children"
|
v-if="item1.children"
|
||||||
:title="transTitle(item1.title)"
|
:title="item1.title"
|
||||||
>
|
>
|
||||||
<template
|
<template
|
||||||
v-for="(item2, index) in item1.children"
|
v-for="(item2, index) in item1.children"
|
||||||
@ -24,21 +24,21 @@
|
|||||||
<a-menu-item
|
<a-menu-item
|
||||||
v-if="item2.access"
|
v-if="item2.access"
|
||||||
:key="item2.path"
|
:key="item2.path"
|
||||||
:title="transTitle(item2.title)"
|
:title="item2.title"
|
||||||
>
|
>
|
||||||
{{transTitle(item2.title)}}
|
{{item2.title}}
|
||||||
</a-menu-item>
|
</a-menu-item>
|
||||||
</template>
|
</template>
|
||||||
</a-sub-menu>
|
</a-sub-menu>
|
||||||
<a-menu-item v-else :key="item1.path" :title="transTitle(item1.title)">
|
<a-menu-item v-else :key="item1.path" :title="item1.title">
|
||||||
{{transTitle(item1.title)}}
|
{{item1.title}}
|
||||||
</a-menu-item>
|
</a-menu-item>
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
</a-sub-menu>
|
</a-sub-menu>
|
||||||
<a-menu-item v-else :key="item.path" :title="transTitle(item.title)">
|
<a-menu-item v-else :key="item.path" :title="item.title">
|
||||||
<MenuIcon v-if="item.icon" :icon="item.icon" />
|
<MenuIcon v-if="item.icon" :icon="item.icon" />
|
||||||
<span>{{transTitle(item.title)}}</span>
|
<span>{{item.title}}</span>
|
||||||
</a-menu-item>
|
</a-menu-item>
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
@ -47,11 +47,12 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { toRefs, computed } from 'vue';
|
import { toRefs, computed } from 'vue';
|
||||||
import { useRoute, useRouter, plugin } from '@@/core/coreExports';
|
import { useRoute, useRouter } from '@@/core/coreExports';
|
||||||
import Menu from 'ant-design-vue/lib/menu';
|
import Menu from 'ant-design-vue/lib/menu';
|
||||||
import 'ant-design-vue/lib/menu/style/css';
|
import 'ant-design-vue/lib/menu/style/css';
|
||||||
import MenuIcon from './MenuIcon';
|
import MenuIcon from './MenuIcon';
|
||||||
import { addAccessTag } from '../helpers/pluginAccess';
|
import { transform as transformByAccess } from '../helpers/pluginAccess';
|
||||||
|
import { transform as transformByLocale } from '../helpers/pluginLocale';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
@ -73,11 +74,10 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
setup(props) {
|
setup(props) {
|
||||||
const sharedLocale = plugin.getShared('locale');
|
|
||||||
const { menus } = toRefs(props);
|
const { menus } = toRefs(props);
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const fixedMenus = addAccessTag(menus);
|
const fixedMenus = transformByLocale(transformByAccess(menus));
|
||||||
const onMenuClick = (e) => {
|
const onMenuClick = (e) => {
|
||||||
const path = e.key;
|
const path = e.key;
|
||||||
if (/^https?:\/\//.test(path)) {
|
if (/^https?:\/\//.test(path)) {
|
||||||
@ -90,19 +90,11 @@ export default {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const transTitle = (name) => {
|
|
||||||
if (sharedLocale) {
|
|
||||||
const { t } = sharedLocale.useI18n();
|
|
||||||
return t(name);
|
|
||||||
}
|
|
||||||
return name;
|
|
||||||
};
|
|
||||||
const selectedKeys = computed(() => [route.path]);
|
const selectedKeys = computed(() => [route.path]);
|
||||||
return {
|
return {
|
||||||
selectedKeys,
|
selectedKeys,
|
||||||
fixedMenus,
|
fixedMenus,
|
||||||
onMenuClick,
|
onMenuClick
|
||||||
transTitle
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -10,7 +10,7 @@ export default (api) => {
|
|||||||
} = api;
|
} = api;
|
||||||
|
|
||||||
api.chainWebpack((memo) => {
|
api.chainWebpack((memo) => {
|
||||||
memo.resolve.alias.set('vue-i18n', 'vue-i18n/dist/vue-i18n.esm-bundler.js');
|
memo.resolve.alias.set('vue-i18n', 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js');
|
||||||
});
|
});
|
||||||
|
|
||||||
api.describe({
|
api.describe({
|
||||||
|
Loading…
x
Reference in New Issue
Block a user