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

docs/zh/reference/plugin/plugins/layout.md

@@ -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**：子菜单配置。
   

packages/fes-plugin-layout/README.md

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

packages/fes-plugin-layout/src/node/helper.js

@@ -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 (!allIcons[icon]) {
+                if (!(urlReg.test(icon) || icon.includes('.svg'))) {
-                    menu.icon = iconName;
+                    if (!allIcons[icon]) {
+                        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));

packages/fes-plugin-layout/src/runtime/helpers/svg.js

@@ -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 '';
+};

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

@@ -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">
+                            <a-menu-item v-else :key="item1.path" :title="transTitle(item1.title)">
-                                {{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
         };
     }
 };

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

@@ -1,22 +1,60 @@
 <script>
-// 使用 ant-design/icons-vue
+
-// 使用 本地 svg 图片
+import { ref, onBeforeMount } from 'vue';
-// 使用 远程 svg 地址
-// eslint-disable-next-line import/extensions
 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) {
+            if (AIcon.value) {
-                return < AIcon />;
+                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>

packages/fes-plugin-locale/src/runtime/core.tpl

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

packages/fes-template/.fes.js

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

packages/fes-template/public/wine-outline.svg

@@ -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>

packages/fes-template/src/locales/en-US.js

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

packages/fes-template/src/locales/zh-CN.js

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

packages/fes-template/src/pages/index.vue

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