Restruct menu

docs/resource/github.md

@@ -1,5 +0,0 @@
----
-order: 3
-link: //github.com/ant-design/ant-design
-title: GitHub
----

docs/spec/cases.en-US.md

@@ -1,4 +1,5 @@
 ---
+category: Ant Design
 order: 2
 title: Cases
 ---

docs/spec/cases.zh-CN.md

@@ -1,4 +1,5 @@
 ---
+category: Ant Design
 order: 2
 title: 实践案例
 ---

docs/spec/colors.en-US.md

@@ -1,5 +1,6 @@
 ---
-order: 3
+category: Visual
+order: 0
 title: Colors
 ---
 

docs/spec/colors.zh-CN.md

@@ -1,5 +1,6 @@
 ---
-order: 3
+category: 视觉语言
+order: 0
 title: 色彩
 ---
 

docs/spec/copywriting.md

@@ -1,4 +1,5 @@
 ---
+category: 模式语言
 order: 6
 title:
   zh-CN: 文案

docs/spec/data-display.md

@@ -1,4 +1,5 @@
 ---
+category: 模式语言
 order: 10
 title:
   zh-CN: 数据展示

docs/spec/data-entry.md

@@ -1,4 +1,5 @@
 ---
+category: 模式语言
 order: 9
 title:
   zh-CN: 数据录入

docs/spec/download.en-US.md

@@ -1,4 +1,5 @@
 ---
+category: Resources
 order: 0
 title: Download
 ---

docs/spec/download.zh-CN.md

@@ -1,6 +1,7 @@
 ---
+category: 资源
 order: 0
-title: 资源下载
+title: 下载
 ---
 
 这里提供 Ant Design 相关设计资源和设计工具的下载，更多设计资源正在整理和完善中。

docs/spec/feature.en-US.md

@@ -1,4 +1,5 @@
 ---
+category: Ant Design
 order: 1
 title: Features
 ---

docs/spec/feature.zh-CN.md

@@ -1,6 +1,7 @@
 ---
+category: Ant Design
 order: 1
-title: 基本理念
+title: 设计价值观
 ---
 
 与众不同的是，Ant Design 不但追求『用户』的使用体验，还追求『设计者』和『开发者』的使用体验，践行『以人为本』的设计理念。

docs/spec/feedback.md

@@ -1,4 +1,5 @@
 ---
+category: 模式语言
 order: 11
 title:
   zh-CN: 反馈

docs/spec/font.md

@@ -1,5 +1,6 @@
 ---
-order: 5
+category: Visual
+order: 3
 title:
   zh-CN: 字体
   en-US: Font

docs/spec/icon.en-US.md

@@ -1,4 +1,5 @@
 ---
+category: Visual
 order: 4
 title: Icons
 ---

docs/spec/icon.zh-CN.md

@@ -1,4 +1,5 @@
 ---
+category: 视觉语言
 order: 4
 title: 图标
 ---

docs/spec/introduce.en-US.md

@@ -1,6 +1,7 @@
 ---
+category: Ant Design
 order: 0
-title: Ant Design
+title: Introduction
 ---
 
 <div style="text-align:center;background:#FBFBFB;margin:40px 0;">

docs/spec/introduce.zh-CN.md

@@ -1,6 +1,7 @@
 ---
+category: Ant Design
 order: 0
-title: Ant Design
+title: Introduction
 ---
 
 <div style="text-align:center;background:#FBFBFB;margin:40px 0;">

docs/spec/layout.en-US.md

@@ -1,5 +1,6 @@
 ---
-order: 7
+category: Visual
+order: 2
 title: Layout
 ---
 

docs/spec/layout.zh-CN.md

@@ -1,5 +1,6 @@
 ---
-order: 7
+category: 视觉语言
+order: 2
 title: 布局
 ---
 

docs/spec/motion.md

@@ -1,5 +1,5 @@
 ---
-order: 12
+order: 5
 title:
   zh-CN: 动效
   en-US: Motion

docs/spec/navigation.en-US.md

@@ -1,4 +1,5 @@
 ---
+category: 模式语言
 order: 8
 title: Navigation
 ---

docs/spec/navigation.zh-CN.md

@@ -1,4 +1,5 @@
 ---
+category: 模式语言
 order: 8
 title: 导航
 ---

docs/spec/overview.md

@@ -0,0 +1,9 @@
+---
+category: 模式语言
+order: 0
+title:
+  zh-CN: 概览
+  en-US: Overview
+---
+
+Coming soon.

docs/spec/reference.en-US.md

@@ -1,4 +1,5 @@
 ---
+category: Resources
 order: 1
 title: Reference
 ---

docs/spec/reference.zh-CN.md

@@ -1,6 +1,7 @@
 ---
+category: 资源
 order: 1
-title: 文献素材
+title: 致敬
 ---
 
 在进行模式、组件和语言的整理中，《About Face 4》、《Web 界面设计》、《界面设计模式》、《写给大家看的设计书》、《设计心理学》、《Web 表单设计：点石成金的艺术》等书籍给了我们很多的启示，帮助我们节约了大量时间，并成功克服了很多困难。如果想了解更多设计相关的内容，建议你去阅读这些非常棒的书籍。

docs/spec/visual.md

@@ -0,0 +1,7 @@
+---
+order: 4
+title:
+  zh-CN: 可视化语言
+  en-US: Visualization
+link: https://antv.alipay.com
+---

docs/spec/work-with-us.md

@@ -1,5 +1,5 @@
 ---
-order: 2
+order: 7
 title:
   zh-CN: 加入我们
   en-US: Work with Us

site/bisheng.config.js

@@ -29,8 +29,16 @@ module.exports = {
   htmlTemplate: './site/theme/static/template.html',
   themeConfig: {
     categoryOrder: {
-      设计原则: 2,
-      Principles: 2,
+      'Ant Design': 0,
+      设计原则: 1,
+      Principles: 1,
+      视觉语言: 2,
+      Visual: 2,
+      模式语言: 3,
+      Patterns: 3,
+      资源: 6,
+      Resources: 6,
+      Components: 100,
     },
     typeOrder: {
       General: 0,

site/theme/template/Content/MainContent.jsx

@@ -33,10 +33,6 @@ function fileNameToPath(filename) {
   return snippets[snippets.length - 1];
 }
 
-function isNotTopLevel(level) {
-  return level !== 'topLevel';
-}
-
 let isMobile;
 utils.enquireScreen((b) => {
   isMobile = b;
@@ -123,6 +119,7 @@ export default class MainContent extends React.Component {
   }
 
   getSideBarOpenKeys(nextProps) {
+    const { themeConfig } = nextProps;
     const { pathname } = nextProps.location;
     const prevModule = this.currentModule;
     this.currentModule = pathname.replace(/^\//).split('/')[1] || 'components';
@@ -132,7 +129,12 @@ export default class MainContent extends React.Component {
     const locale = utils.isZhCN(pathname) ? 'zh-CN' : 'en-US';
     if (prevModule !== this.currentModule) {
       const moduleData = getModuleData(nextProps);
-      const shouldOpenKeys = Object.keys(utils.getMenuItems(moduleData, locale));
+      const shouldOpenKeys = utils.getMenuItems(
+        moduleData,
+        locale,
+        themeConfig.categoryOrder,
+        themeConfig.typeOrder
+      ).map(m => m.title[locale] || m.title);
       return shouldOpenKeys;
     }
   }
@@ -140,11 +142,11 @@ export default class MainContent extends React.Component {
   generateMenuItem(isTop, item) {
     const { locale } = this.context.intl;
     const key = fileNameToPath(item.filename);
-    const text = isTop ?
-      item.title[locale] || item.title : [
-        <span key="english">{item.title}</span>,
-        <span className="chinese" key="chinese">{item.subtitle}</span>,
-      ];
+    const title = item.title[locale] || item.title;
+    const text = isTop ? title : [
+      <span key="english">{title}</span>,
+      <span className="chinese" key="chinese">{item.subtitle}</span>,
+    ];
     const { disabled } = item;
     const url = item.filename.replace(/(\/index)?((\.zh-CN)|(\.en-US))?\.md$/i, '').toLowerCase();
     const child = !item.link ? (
@@ -171,49 +173,34 @@ export default class MainContent extends React.Component {
     );
   }
 
-  generateSubMenuItems(obj) {
-    const { themeConfig } = this.props;
-    const topLevel = (obj.topLevel || []).map(this.generateMenuItem.bind(this, true));
-    const itemGroups = Object.keys(obj).filter(isNotTopLevel)
-      .sort((a, b) => themeConfig.typeOrder[a] - themeConfig.typeOrder[b])
-      .map((type) => {
-        const groupItems = obj[type].sort((a, b) => {
-          return a.title.charCodeAt(0) -
-            b.title.charCodeAt(0);
-        }).map(this.generateMenuItem.bind(this, false));
-        return (
-          <Menu.ItemGroup title={type} key={type}>
-            {groupItems}
-          </Menu.ItemGroup>
-        );
-      });
-    return [...topLevel, ...itemGroups];
-  }
-
   getMenuItems() {
     const { themeConfig } = this.props;
     const moduleData = getModuleData(this.props);
     const menuItems = utils.getMenuItems(
-      moduleData, this.context.intl.locale
+      moduleData,
+      this.context.intl.locale,
+      themeConfig.categoryOrder,
+      themeConfig.typeOrder,
     );
-    const categories = Object.keys(menuItems).filter(isNotTopLevel);
-    const topLevel = this.generateSubMenuItems(menuItems.topLevel);
-    const result = [...topLevel];
-    result.forEach((item, i) => {
-      const insertCategory = categories.filter(
-        cat => (themeConfig.categoryOrder[cat] ? themeConfig.categoryOrder[cat] <= i : i === result.length - 1)
-      )[0];
-      if (insertCategory) {
-        const target = (
-          <SubMenu title={<h4>{insertCategory}</h4>} key={insertCategory}>
-            {this.generateSubMenuItems(menuItems[insertCategory])}
+    return menuItems.map((menuItem) => {
+      if (menuItem.children) {
+        return (
+          <SubMenu title={<h4>{menuItem.title}</h4>} key={menuItem.title}>
+            {menuItem.children.map((child) => {
+              if (child.type === 'type') {
+                return (
+                  <Menu.ItemGroup title={child.title} key={child.title}>
+                    {child.children.map(leaf => this.generateMenuItem(false, leaf))}
+                  </Menu.ItemGroup>
+                );
+              }
+              return this.generateMenuItem(false, child);
+            })}
           </SubMenu>
         );
-        result.splice(i + 1, 0, target);
-        categories.splice(categories.indexOf(insertCategory), 1);
       }
+      return this.generateMenuItem(true, menuItem);
     });
-    return result;
   }
 
   flattenMenu(menu) {

site/theme/template/Layout/Header.jsx

@@ -184,16 +184,6 @@ export default class Header extends React.Component {
             <FormattedMessage id="app.header.menu.components" />
           </Link>
         </Menu.Item>
-        <Menu.Item key="docs/pattern">
-          <Link to={utils.getLocalizedPathname('/docs/pattern/navigation', isZhCN)}>
-            <FormattedMessage id="app.header.menu.pattern" />
-          </Link>
-        </Menu.Item>
-        <Menu.Item key="docs/resource">
-          <Link to={utils.getLocalizedPathname('/docs/resource/download', isZhCN)}>
-            <FormattedMessage id="app.header.menu.resource" />
-          </Link>
-        </Menu.Item>
         <Menu.Item key="pro">
           <a
             href="http://pro.ant.design"

site/theme/template/utils.jsx

@@ -16,25 +16,48 @@ if (typeof window !== 'undefined') {
   enquire = require('enquire.js'); // eslint-disable-line global-require
 }
 
-export function getMenuItems(moduleData, locale) {
+export function getMenuItems(moduleData, locale, categoryOrder, typeOrder) {
   const menuMeta = moduleData.map(item => item.meta);
-  const menuItems = {};
-  menuMeta.sort(
-    (a, b) => (a.order || 0) - (b.order || 0)
-  ).forEach((meta) => {
-    const category = (meta.category && meta.category[locale]) || meta.category || 'topLevel';
-    if (!menuItems[category]) {
-      menuItems[category] = {};
+  const menuItems = [];
+  const sortFn = (a, b) => (a.order || 0) - (b.order || 0);
+  menuMeta.sort(sortFn).forEach((meta) => {
+    if (!meta.category) {
+      menuItems.push(meta);
+    } else {
+      const category = meta.category[locale] || meta.category;
+      let group = menuItems.filter(i => i.title === category)[0];
+      if (!group) {
+        group = {
+          type: 'category',
+          title: category,
+          children: [],
+          order: categoryOrder[category],
+        };
+        menuItems.push(group);
+      }
+      if (meta.type) {
+        let type = group.children.filter(i => i.title === meta.type)[0];
+        if (!type) {
+          type = {
+            type: 'type',
+            title: meta.type,
+            children: [],
+            order: typeOrder[meta.type],
+          };
+          group.children.push(type);
+        }
+        type.children.push(meta);
+      } else {
+        group.children.push(meta);
+      }
     }
-
-    const type = meta.type || 'topLevel';
-    if (!menuItems[category][type]) {
-      menuItems[category][type] = [];
-    }
-
-    menuItems[category][type].push(meta);
   });
-  return menuItems;
+  return menuItems.map((i) => {
+    if (i.children) {
+      i.children = i.children.sort(sortFn);
+    }
+    return i;
+  }).sort(sortFn);
 }
 
 export function isZhCN(pathname) {

site/theme/zh-CN.js

@@ -9,7 +9,7 @@ module.exports = {
     'app.header.menu.practice': '实践',
     'app.header.menu.pattern': '模式',
     'app.header.menu.components': '组件',
-    'app.header.menu.spec': '指引',
+    'app.header.menu.spec': '设计语言',
     'app.header.menu.resource': '资源',
     'app.header.menu.mobile': '移动版',
     'app.header.menu.pro': 'PRO',