optimize menu

src/common/menu.js

@@ -371,19 +371,22 @@ const menuData = [
   },
 ];
 
-function formatter(data, parentPath = '/', parentAuthority) {
+function formatter(data, parentPath = '/', parentAuthority, parentName) {
   return data.map(item => {
     let { path } = item;
+    const id = parentName ? `${parentName}.${item.name}` : `menu.${item.name}`;
+
     if (!isUrl(path)) {
       path = parentPath + item.path;
     }
     const result = {
       ...item,
       path,
+      locale: id,
       authority: item.authority || parentAuthority,
     };
     if (item.children) {
-      result.children = formatter(item.children, `${parentPath}${item.path}/`, item.authority);
+      result.children = formatter(item.children, `${parentPath}${item.path}/`, item.authority, id);
     }
     return result;
   });

src/components/SiderMenu/BaseMenu.js

@@ -79,10 +79,9 @@ export default class BaseMenu extends PureComponent {
   /**
    * get SubMenu or Item
    */
-  getSubMenuOrItem = (item, parent) => {
+  getSubMenuOrItem = item => {
-    const id = parent ? `${parent}.${item.name}` : `menu.${item.name}`;
     if (item.children && item.children.some(child => child.name)) {
-      const name = <FormattedMessage defaultMessage={item.name} id={id} />;
+      const name = <FormattedMessage defaultMessage={item.name} id={item.locale} />;
       return (
         <SubMenu
           title={
@@ -97,11 +96,11 @@ export default class BaseMenu extends PureComponent {
           }
           key={item.path}
         >
-          {this.getNavMenuItems(item.children, id)}
+          {this.getNavMenuItems(item.children)}
         </SubMenu>
       );
     } else {
-      return <Menu.Item key={item.path}>{this.getMenuItemPath(item, parent)}</Menu.Item>;
+      return <Menu.Item key={item.path}>{this.getMenuItemPath(item)}</Menu.Item>;
     }
   };
 
@@ -110,9 +109,8 @@ export default class BaseMenu extends PureComponent {
    * Judge whether it is http link.return a or Link
    * @memberof SiderMenu
    */
-  getMenuItemPath = (item, parent) => {
+  getMenuItemPath = item => {
-    const id = parent ? `${parent}.${item.name}` : `menu.${item.name}`;
+    const name = <FormattedMessage defaultMessage={item.name} id={item.locale} />;
-    const name = <FormattedMessage defaultMessage={item.name} id={id} />;
     const itemPath = this.conversionPath(item.path);
     const icon = getIcon(item.icon);
     const { target } = item;

src/components/SiderMenu/SliderMenu.js

@@ -105,17 +105,16 @@ export default class SiderMenu extends PureComponent {
    * @memberof SiderMenu
    */
   getMenuItemPath = item => {
-    console.log(item);
     const itemPath = this.conversionPath(item.path);
     const icon = getIcon(item.icon);
-    const { target, name } = item;
+    const { target, name, locale } = item;
     // Is it a http link
     if (/^https?:\/\//.test(itemPath)) {
       return (
         <a href={itemPath} target={target}>
           {icon}
           <span>
-            <FormattedMessage id={name} />
+            <FormattedMessage id={locale} defaultMessage={name} />
           </span>
         </a>
       );
@@ -136,7 +135,7 @@ export default class SiderMenu extends PureComponent {
       >
         {icon}
         <span>
-          <FormattedMessage id={name} />
+          <FormattedMessage id={locale} defaultMessage={name} />
         </span>
       </Link>
     );
@@ -159,7 +158,7 @@ export default class SiderMenu extends PureComponent {
                   <span>{item.name}</span>
                 </span>
               ) : (
-                item.name
+                <FormattedMessage id={item.locale} defaultMessage={item.name} />
               )
             }
             key={item.path}

src/locale/en-US.js

@@ -7,7 +7,7 @@ export default {
   data: appLocaleData,
   antd: antdEn,
   messages: {
-    'menu.home': 'home',
+    'menu.home': 'Home',
     'menu.dashboard': 'Dashboard',
     'menu.dashboard.analysis': 'Analysis',
     'menu.dashboard.monitor': 'Monitor',