blackteay/fes.js
1
0
Fork 0
mirror of https://github.com/WeBankFinTech/fes.js.git synced 2025-04-05 19:41:57 +08:00
Code Issues Projects Releases Wiki Activity

feat(plugin-layout): 菜单的 icon支持svg文件、title支持国际化

Browse Source
This commit is contained in:
万纯 2021-03-15 16:43:02 +08:00
parent dedd607b3b
commit a9e76dc2bb
12 changed files with 153 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
docs/zh/reference/plugin/plugins/layout.md
View File

@ -9,6 +9,8 @@
- 搭配 [@fesjs/plugin-access](./access.html) 插件使用，可以完成对路由的权限控制。
- 搭配 [@fesjs/plugin-locale](./locale.html) 插件使用，提供切换语言的能力。
- 支持自定义头部区域。
- 菜单支持配置icon
- 菜单标题支持国际化
- 可配置页面是否需要 layout。
@ -156,9 +158,21 @@ export default {
- **path**：菜单的路径，可配置第三方地址。
- **title**：菜单的标题。
- **title**：菜单的标题，如果同时使用[国际化插件](./locale.md)，而且在 `locales` 中配置了 `title` ，则菜单的名称会根据语言自动切换。
- **icon**: 菜单的图标，只有一级标题展示图标，图标使用[antv icon](https://www.antdv.com/components/icon-cn/)，在这里使用组件type。
- **icon**: 菜单的图标，只有一级标题展示图标。
- 图标使用[antv icon](https://www.antdv.com/components/icon-cn/)，在这里使用组件type。
```js
{
name: "user"
}
```
- 图表使用本地或者远程svg图片。
```js
{
name: "/wine-outline.svg"
}
```
- **children**：子菜单配置。

1
packages/fes-plugin-layout/README.md
View File

@ -5,7 +5,6 @@
multi tabs： 是/否
## todo-list
1. 菜单的国际化
### theme
1. 主题light-白色

18
packages/fes-plugin-layout/src/node/helper.js
View File

@ -39,9 +39,19 @@ export const fillMenuByRoute = (menuConfig, routeConfig, dep = 0) => {
// 处理icon
if (menu.icon) {
const icon = menu.icon;
const iconName = `${icon.replace(icon[0], icon[0].toUpperCase())}Outlined`;
const urlReg = /^((https?|ftp|file):\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?$/;
if (!(urlReg.test(icon) || icon.includes('.svg'))) {
if (!allIcons[icon]) {
menu.icon = iconName;
menu.icon = {
type: 'icon',
name: `${icon.replace(icon[0], icon[0].toUpperCase())}Outlined`
};
} else {
menu.icon = {
type: 'icon',
name: icon
};
}
}
}
if (menu.children && menu.children.length > 0) {
@ -61,7 +71,9 @@ export function getIconsFromMenu(data) {
(data || []).forEach((item = { path: '/' }) => {
if (item.icon) {
const { icon } = item;
icons.push(icon);
if (icon && icon.type === 'icon') {
icons.push(icon.name);
}
}
if (item.children) {
icons = icons.concat(getIconsFromMenu(item.children));

49
packages/fes-plugin-layout/src/runtime/helpers/svg.js Normal file
View File

@ -0,0 +1,49 @@
const isStr = function (str) {
return typeof str === 'string';
};
export const isValid = (elm) => {
if (elm.nodeType === 1) {
if (elm.nodeName.toLowerCase() === 'script') {
return false;
}
for (let i = 0; i < elm.attributes.length; i++) {
const val = elm.attributes[i].value;
if (isStr(val) && val.toLowerCase().indexOf('on') === 0) {
return false;
}
}
for (let i = 0; i < elm.childNodes.length; i++) {
if (!isValid(elm.childNodes[i])) {
return false;
}
}
}
return true;
};
export const validateContent = (svgContent) => {
const div = document.createElement('div');
div.innerHTML = svgContent;
// setup this way to ensure it works on our buddy IE
for (let i = div.childNodes.length - 1; i >= 0; i--) {
if (div.childNodes[i].nodeName.toLowerCase() !== 'svg') {
div.removeChild(div.childNodes[i]);
}
}
// must only have 1 root element
const svgElm = div.firstElementChild;
if (svgElm && svgElm.nodeName.toLowerCase() === 'svg') {
// root element must be an svg
// lets double check we've got valid elements
// do not allow scripts
if (isValid(svgElm)) {
return div.innerHTML;
}
}
return '';
};

29
packages/fes-plugin-layout/src/runtime/views/Menu.vue
View File

@ -7,7 +7,7 @@
>
<template v-for="(item, index) in fixedMenus" :key="index">
<template v-if="item.access">
<a-sub-menu v-if="item.children" :title="item.title">
<a-sub-menu v-if="item.children" :title="transTitle(item.title)">
<template
v-for="(item1, index) in item.children"
:key="index"
@ -15,7 +15,7 @@
<template v-if="item1.access">
<a-sub-menu
v-if="item1.children"
:title="item1.title"
:title="transTitle(item1.title)"
>
<template
v-for="(item2, index) in item1.children"
@ -24,21 +24,21 @@
<a-menu-item
v-if="item2.access"
:key="item2.path"
:title="item2.title"
:title="transTitle(item2.title)"
>
{{item2.title}}
{{transTitle(item2.title)}}
</a-menu-item>
</template>
</a-sub-menu>
<a-menu-item v-else :key="item1.path" :title="item1.title">
{{item1.title}}
<a-menu-item v-else :key="item1.path" :title="transTitle(item1.title)">
{{transTitle(item1.title)}}
</a-menu-item>
</template>
</template>
</a-sub-menu>
<a-menu-item v-else :key="item.path" :title="item.title">
<a-menu-item v-else :key="item.path" :title="transTitle(item.title)">
<MenuIcon v-if="item.icon" :icon="item.icon" />
<span>{{item.title}}</span>
<span>{{transTitle(item.title)}}</span>
</a-menu-item>
</template>
</template>
@ -47,7 +47,7 @@
<script>
import { toRefs, computed } from 'vue';
import { useRoute, useRouter } from '@@/core/coreExports';
import { useRoute, useRouter, plugin } from '@@/core/coreExports';
import Menu from 'ant-design-vue/lib/menu';
import 'ant-design-vue/lib/menu/style/css';
import MenuIcon from './MenuIcon';
@ -73,6 +73,7 @@ export default {
}
},
setup(props) {
const sharedLocale = plugin.getShared('locale');
const { menus } = toRefs(props);
const route = useRoute();
const router = useRouter();
@ -89,11 +90,19 @@ export default {
);
}
};
const transTitle = (name) => {
if (sharedLocale) {
const { t } = sharedLocale.useI18n();
return t(name);
}
return name;
};
const selectedKeys = computed(() => [route.path]);
return {
selectedKeys,
fixedMenus,
onMenuClick
onMenuClick,
transTitle
};
}
};

56
packages/fes-plugin-layout/src/runtime/views/MenuIcon.vue
View File

@ -1,22 +1,60 @@
<script>
// 使用 ant-design/icons-vue
// 使用 本地 svg 图片
// 使用 远程 svg 地址
// eslint-disable-next-line import/extensions
import { ref, onBeforeMount } from 'vue';
import Icons from '../icons';
// import AntdIcon from '@ant-design/icons-vue/es/components/AntdIcon';
import { validateContent } from '../helpers/svg';
export default {
props: {
icon: String
icon: [String, Object]
},
setup(props) {
const AIcon = Icons[props.icon];
const AIcon = ref(null);
const AText = ref(null);
onBeforeMount(() => {
if (props.icon && props.icon.type === 'icon') {
AIcon.value = Icons[props.icon.name];
} else {
fetch(props.icon).then((rsp) => {
if (rsp.ok) {
return rsp.text().then((svgContent) => {
AText.value = validateContent(svgContent);
});
}
});
}
});
return () => {
if (AIcon) {
return < AIcon />;
if (AIcon.value) {
return <AIcon.value />;
}
if (AText.value) {
return (
<span className={'fes-layout-icon'} innerHTML={AText.value}>
</span>
);
}
return null;
};
}
};
</script>
<style>
.fes-layout-icon{
display: inline-block;
color: inherit;
font-style: normal;
line-height: 0;
text-align: center;
text-transform: none;
vertical-align: -0.125em;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
min-width: 14px;
margin-right: 10px;
font-size: 14px;
transition: font-size 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), margin 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
</style>

2
packages/fes-plugin-locale/src/runtime/core.tpl
View File

@ -12,7 +12,7 @@ import SelectLang from "./views/SelectLang";
{{ #SHARE }}
// 共享出去
plugin.share("locale", { SelectLang });
plugin.share("locale", {useI18n, SelectLang });
{{ /SHARE }}
const locales = {{{REPLACE_LOCALES}}};

2
packages/fes-template/.fes.js
View File

@ -34,7 +34,7 @@ export default {
navigation: 'mixin',
menus: [{
name: 'index',
icon: 'user'
icon: '/wine-outline.svg'
}, {
name: 'onepiece',
icon: 'user',

1
packages/fes-template/public/wine-outline.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>Wine</title><path d="M398.57 80H113.43v16S87.51 272 256 272 398.57 96 398.57 96zM256 272v160" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M352 432H160"/><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32" d="M112 160h288"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 485 B

1
packages/fes-template/src/locales/en-US.js
View File

@ -1,6 +1,7 @@
export default {
test: 'test',
home: 'home',
'navBar.lang': 'Languages',
'layout.user.link.help': 'Help',
'layout.user.link.privacy': 'Privacy',

1
packages/fes-template/src/locales/zh-CN.js
View File

@ -1,6 +1,7 @@
export default {
test: '测试',
home: '首页',
'navBar.lang': '语言',
'layout.user.link.help': '帮助',
'layout.user.link.privacy': '隐私',

2
packages/fes-template/src/pages/index.vue
View File

@ -14,7 +14,7 @@
<config>
{
"name": "index",
"title": "首页"
"title": "home"
}
</config>
<script>