先提交一下

.gitignore

@@ -20,4 +20,6 @@ node_modules
 /toolkit/amis-renderer
 /toolkit/output
 /coverage
-/package-lock.json
+/package-lock.json
+_examples
+docs-new

examples/components/App.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import NotFound from '../../src/components/404';
-import NotFound from '../../src/components/404';
 import Layout from '../../src/components/Layout';
 import AsideNav from '../../src/components/AsideNav';
 import {AlertComponent, ToastComponent} from '../../src/components/index';
@@ -95,6 +94,8 @@ import TestComponent from './Test';
 import Select from '../../src/components/Select';
 import Button from '../../src/components/Button';
 import DocSearch from './DocSearch';
+import {groupBy} from 'lodash';
+import classnames from 'classnames';
 
 let PathPrefix = '/examples';
 let ContextPath = '';
@@ -571,7 +572,7 @@ const themes = [
 
 const locales = [
   {
-    label: '默认',
+    label: '中文',
     value: 'zh-cn'
   },
 
@@ -590,7 +591,8 @@ export class App extends React.PureComponent {
     themeIndex: 0,
     themes: themes,
     theme: themes[localStorage.getItem('themeIndex') || 0],
-    locale: localStorage.getItem('locale') || ''
+    locale: localStorage.getItem('locale') || '',
+    docs: Docs.children
   };
 
   constructor(props) {
@@ -655,81 +657,11 @@ export class App extends React.PureComponent {
   }
 
   renderAside() {
-    const location = this.props.location;
-
-    if (location.pathname === '/edit') {
-      return null;
-    }
-
-    const theme = this.state.theme;
-
     return (
       <AsideNav
-        theme={theme.value}
+        renderLink={() => {
-        navigations={navigations}
+          return null;
-        renderLink={({link, active, toggleExpand, classnames: cx}) => {
-          let children = [];
-
-          if (link.children) {
-            children.push(
-              <span
-                key="expand-toggle"
-                className={cx('AsideNav-itemArrow')}
-                onClick={e => toggleExpand(link, e)}
-              >
-                <Icon icon="right-arrow-bold" className="icon" />
-              </span>
-            );
-          }
-
-          link.badge &&
-            children.push(
-              <b
-                key="badge"
-                className={cx(
-                  `AsideNav-itemBadge`,
-                  link.badgeClassName || 'bg-info'
-                )}
-              >
-                {link.badge}
-              </b>
-            );
-
-          link.icon &&
-            children.push(
-              <i key="icon" className={cx(`AsideNav-itemIcon`, link.icon)} />
-            );
-
-          children.push(
-            <span className={cx(`AsideNav-itemLabel`)} key="label">
-              {link.label}
-            </span>
-          );
-
-          return link.path ? (
-            <Link
-              to={
-                link.path[0] === '/'
-                  ? ContextPath + link.path
-                  : `${ContextPath}${PathPrefix}/${link.path}`
-              }
-            >
-              {children}
-            </Link>
-          ) : (
-            <a onClick={link.children ? () => toggleExpand(link) : null}>
-              {children}
-            </a>
-          );
         }}
-        isActive={link =>
-          isActive(
-            link.path && link.path[0] === '/'
-              ? ContextPath + link.path
-              : `${ContextPath}${PathPrefix}/${link.path}`,
-            location
-          )
-        }
       />
     );
   }
@@ -747,7 +679,7 @@ export class App extends React.PureComponent {
     }
 
     return (
-      <div>
+      <>
         <div className={`${theme.ns}Layout-brandBar`}>
           <button
             onClick={() => this.setState({offScreen: !this.state.offScreen})}
@@ -755,106 +687,147 @@ export class App extends React.PureComponent {
           >
             <i className="glyphicon glyphicon-align-justify" />
           </button>
+
           <div className={`${theme.ns}Layout-brand`}>
             <i className="fa fa-paw" />
-            <span className="hidden-folded m-l-sm">AMis Renderer</span>
+            <span className="hidden-folded m-l-sm">AMIS</span>
           </div>
         </div>
+
         <div className={`${theme.ns}Layout-headerBar`}>
-          <div className="nav navbar-nav hidden-xs">
+          <ul className={`${theme.ns}Layout-headerBar-links pull-left`}>
-            <div id="headerLeftBtns" className="m-t-sm">
+            <Link to="/docs">文档</Link>
-              <Button
+            <Link to="/examples">示例</Link>
-                theme={this.state.theme.value}
+          </ul>
-                level="link"
-                className="no-shadow navbar-btn"
-                onClick={this.toggleAside}
-                tooltip="展开或收起侧边栏"
-                placement="bottom"
-                iconOnly
-              >
-                <i
-                  className={
-                    this.state.asideFolded ? 'fa fa-indent' : 'fa fa-dedent'
-                  }
-                />
-              </Button>
 
-              <Button
+          <div className="hidden-xs p-t pull-right m-l-sm">
-                theme={this.state.theme.value}
+            <Select
-                level="link"
+              clearable={false}
-                className="no-shadow navbar-btn"
+              theme={this.state.theme.value}
-                href="https://github.com/baidu/amis"
+              value={this.state.locale || 'zh-cn'}
-                tooltip="前往 Github 仓库地址"
+              options={locales}
-                placement="bottom"
+              onChange={locale => {
-                iconOnly
+                this.setState({locale: locale.value});
-              >
+                localStorage.setItem('locale', locale.value);
-                <i className={'fa fa-github'} />
+              }}
-              </Button>
+            />
-            </div>
           </div>
 
-          <div className="hidden-xs p-t-sm pull-right m-l-sm">
+          <div className="hidden-xs p-t pull-right">
-            语言：
+            <Select
-            {
+              clearable={false}
-              <Select
+              theme={this.state.theme.value}
-                clearable={false}
+              value={this.state.theme}
-                theme={this.state.theme.value}
+              options={this.state.themes}
-                value={this.state.locale || 'zh-cn'}
+              onChange={theme => {
-                options={locales}
+                this.setState({theme});
-                onChange={locale => {
+                localStorage.setItem(
-                  this.setState({locale: locale.value});
+                  'themeIndex',
-                  localStorage.setItem('locale', locale.value);
+                  this.state.themes.indexOf(theme)
-                }}
+                );
-              />
+              }}
-            }
+            />
-          </div>
-
-          <div className="hidden-xs p-t-sm pull-right">
-            主题：
-            {
-              <Select
-                clearable={false}
-                theme={this.state.theme.value}
-                value={this.state.theme}
-                options={this.state.themes}
-                onChange={theme => {
-                  this.setState({theme});
-                  localStorage.setItem(
-                    'themeIndex',
-                    this.state.themes.indexOf(theme)
-                  );
-                }}
-              />
-            }
           </div>
 
           <DocSearch theme={this.state.theme.value} />
         </div>
-      </div>
+      </>
     );
   }
 
+  toggleOpen(e, item) {
+    e.stopPropagation();
+    e.preventDefault();
+
+    const docs = mapTree(this.state.docs, i => ({
+      ...i,
+      isOpen: item.id === i.id ? !i.isOpen : i.isOpen
+    }));
+
+    this.setState({
+      docs
+    });
+  }
+
+  renderNavigation(children, parent) {
+    return children.map(child => {
+      const path = child.path;
+      const hasChildren =
+        Array.isArray(child.children) && child.children.length;
+
+      return (
+        <div
+          key={child.id}
+          className={classnames('Doc-navigation-item', {
+            'is-active': path === location.pathname,
+            'is-top': !parent,
+            'is-open': child.isOpen
+          })}
+        >
+          <Link to={path}>
+            {child.label}
+            {hasChildren ? (
+              <i
+                className={`iconfont icon-down-arrow ${
+                  child.isOpen ? '' : 'is-flipped'
+                }`}
+                onClick={e => this.toggleOpen(e, child)}
+              ></i>
+            ) : null}
+          </Link>
+
+          {hasChildren && child.isOpen
+            ? this.renderNavigation(child.children, {
+                ...child,
+                path
+              })
+            : null}
+        </div>
+      );
+    });
+  }
+
   render() {
     // const pathname = this.props.location.pathname;
     const theme = this.state.theme;
+    const groups = groupBy(this.state.docs, d => d.group);
+    groups['组件'] = groups['undefined'][0].children;
+
     return (
       <Layout
         theme={theme.value}
+        boxed={true}
         offScreen={this.state.offScreen}
         header={this.state.headerVisible ? this.renderHeader() : null}
-        folded={this.state.asideFolded}
+        // folded={this.state.asideFolded}
-        aside={this.renderAside()}
+        // aside={this.renderAside()}
       >
         <ToastComponent theme={theme.value} locale={this.state.locale} />
         <AlertComponent theme={theme.value} locale={this.state.locale} />
-        {React.cloneElement(this.props.children, {
+
-          ...this.props.children.props,
+        <div className="Doc">
-          setAsideFolded: this.setAsideFolded,
+          <div className="Doc-nav">
-          setHeaderVisible: this.setHeaderVisible,
+            <div className="Doc-navigation">
-          theme: theme.value,
+              {Object.keys(groups).map(groupName => (
-          classPrefix: theme.ns,
+                <div className="Doc-navigationGroup" key={groupName}>
-          locale: this.state.locale
+                  <div className="Doc-navigationGroup-name">
-        })}
+                    {groupName || '其他'}
+                  </div>
+                  {this.renderNavigation(groups[groupName])}
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {React.cloneElement(this.props.children, {
+            ...this.props.children.props,
+            setAsideFolded: this.setAsideFolded,
+            setHeaderVisible: this.setHeaderVisible,
+            theme: theme.value,
+            classPrefix: theme.ns,
+            locale: this.state.locale
+          })}
+        </div>
       </Layout>
     );
   }

examples/components/Doc.jsx

@@ -7,6 +7,7 @@ export default {
   children: [
     {
       label: 'AMIS 是什么？',
+      group: '开始',
       icon: 'fa fa-home',
       path: '/docs/intro',
       getComponent: (location, cb) =>
@@ -17,6 +18,7 @@ export default {
 
     {
       label: '快速开始',
+      group: '开始',
       icon: 'fa fa-flash',
       path: '/docs/getting-started',
       getComponent: (location, cb) =>
@@ -27,6 +29,7 @@ export default {
 
     {
       label: '基本用法',
+      group: '开始',
       icon: 'fa fa-file',
       path: '/docs/basic',
       getComponent: (location, cb) =>
@@ -37,6 +40,7 @@ export default {
 
     {
       label: '高级用法',
+      group: '开始',
       icon: 'fa fa-rocket',
       path: '/docs/advanced',
       getComponent: (location, cb) =>
@@ -49,6 +53,7 @@ export default {
 
     {
       label: '动态数据',
+      group: '开始',
       path: '/docs/api',
       icon: 'fa fa-cloud',
       getComponent: (location, cb) =>
@@ -59,6 +64,7 @@ export default {
 
     {
       label: '定制功能',
+      group: '开始',
       path: '/docs/custom',
       icon: 'fa fa-cubes',
       getComponent: (location, cb) =>
@@ -69,6 +75,7 @@ export default {
 
     {
       label: '定制样式',
+      group: '开始',
       path: '/docs/style',
       icon: 'fa fa-laptop',
       getComponent: (location, cb) =>

examples/components/DocSearch.jsx

@@ -5,7 +5,7 @@ const FormComponent = makeSchemaRenderer({
   type: 'form',
   mode: 'inline',
   wrapWithPanel: false,
-  className: 'pull-right m-t-sm m-r',
+  className: 'Doc-search',
   controls: [
     {
       type: 'input-group',
@@ -13,15 +13,15 @@ const FormComponent = makeSchemaRenderer({
       controls: [
         {
           type: 'icon',
-          addOnclassName: 'no-bg',
+          addOnclassName: 'no-bg no-border p-r-none p-l',
           className: 'text-sm',
           icon: 'search',
           vendor: 'iconfont'
         },
         {
           type: 'text',
-          placeholder: '搜索文档',
+          placeholder: '搜索...',
-          inputClassName: 'b-l-none p-l-none',
+          inputClassName: 'no-border',
           name: 'docsearch'
         }
       ]

examples/components/Example.tsx

@@ -0,0 +1,787 @@
+// import React from 'react';
+// import NotFound from '../../src/components/404';
+// import Layout from '../../src/components/Layout';
+// import AsideNav from '../../src/components/AsideNav';
+// import {AlertComponent, ToastComponent} from '../../src/components/index';
+// import {mapTree} from '../../src/utils/helper';
+// import {Icon} from '../../src/components/icons';
+// import '../../src/locale/en';
+// import {
+//   Router,
+//   Route,
+//   IndexRoute,
+//   browserHistory,
+//   hashHistory,
+//   Link,
+//   Redirect,
+//   withRouter
+// } from 'react-router';
+// import makeSchemaRenderer from './SchemaRender';
+
+// import SimplePageSchema from './Page/Simple';
+// import ErrorPageSchema from './Page/Error';
+// import FormPageSchema from './Page/Form';
+// import ModeFormSchema from './Form/Mode';
+// import FieldSetFormSchema from './Form/FieldSet';
+// import TabsFormSchema from './Form/Tabs';
+// import RemoteFormSchema from './Form/Remote';
+// import ReactionFormSchema from './Form/Reaction';
+// import ValidationFormSchema from './Form/Validation';
+// import FullFormSchema from './Form/Full';
+// import StaticFormSchema from './Form/Static';
+// import HintFormSchema from './Form/Hint';
+// import FieldSetInTabsFormSchema from './Form/FieldSetInTabs';
+// import ComboFormSchema from './Form/Combo';
+// import SubFormSchema from './Form/SubForm';
+// import RichTextSchema from './Form/RichText';
+// import EditorSchema from './Form/Editor';
+// import TestFormSchema from './Form/Test';
+// import TransferFormSchema from './Form/Transfer';
+// import TableFormSchema from './Form/Table';
+// import PickerFormSchema from './Form/Picker';
+// import FormulaFormSchema from './Form/Formula';
+// import CustomFormSchema from './Form/Custom';
+// import FormLayoutTestSchema from './Form/layoutTest';
+// import Definitions from './Form/Definitions';
+
+// import TableCrudSchema from './CRUD/Table';
+// import ItemActionsSchema from './CRUD/ItemActions';
+// import GridCrudSchema from './CRUD/Grid';
+// import ListCrudSchema from './CRUD/List';
+// import LoadMoreSchema from './CRUD/LoadMore';
+// import TestCrudSchema from './CRUD/test';
+// import FixedCrudSchema from './CRUD/Fix';
+// import AsideCrudSchema from './CRUD/Aside';
+// import FieldsCrudSchema from './CRUD/Fields';
+// import JumpNextCrudSchema from './CRUD/JumpNext';
+// import KeyboardsCrudSchema from './CRUD/Keyboards';
+// import FootableCrudSchema from './CRUD/Footable';
+// import NestedCrudSchema from './CRUD/Nested';
+// import MergeCellSchema from './CRUD/MergeCell';
+// import HeaderGroupSchema from './CRUD/HeaderGroup';
+// import HeaderHideSchema from './CRUD/HeaderHide';
+// import LoadOnceTableCrudSchema from './CRUD/LoadOnce';
+// import SdkTest from './Sdk/Test';
+// import JSONSchemaForm from './Form/Schem';
+// import SimpleDialogSchema from './Dialog/Simple';
+// import DrwaerSchema from './Dialog/Drawer';
+
+// import PageLinkPageSchema from './Linkage/Page';
+// import FormLinkPageSchema from './Linkage/Form';
+// import Form2LinkPageSchema from './Linkage/Form2';
+// import CRUDLinkPageSchema from './Linkage/CRUD';
+// import OptionsPageSchema from './Linkage/Options';
+// import OptionsLocalPageSchema from './Linkage/OptionsLocal';
+// import WizardSchema from './Wizard';
+// import ChartSchema from './Chart';
+// import HorizontalSchema from './Horizontal';
+// import VideoSchema from './Video';
+// import AudioSchema from './Audio';
+// import CarouselSchema from './Carousel';
+// import TasksSchema from './Tasks';
+// import ServicesDataSchema from './Services/Data';
+// import ServicesSchemaSchema from './Services/Schema';
+// import ServicesFormSchema from './Services/Form';
+// import IFrameSchema from './IFrame';
+
+// import NormalTabSchema from './Tabs/Normal';
+// import FormTabSchema from './Tabs/Form';
+// import Tab1Schema from './Tabs/Tab1';
+// import Tab2Schema from './Tabs/Tab2';
+// import Tab3Schema from './Tabs/Tab3';
+// import TestComponent from './Test';
+// import Select from '../../src/components/Select';
+// import Button from '../../src/components/Button';
+// import DocSearch from './DocSearch';
+
+// export const examples = [
+//   {
+//     prefix: ({classnames: cx}) => <li className={cx('AsideNav-divider')} />,
+//     label: '示例',
+//     children: [
+//       {
+//         label: '页面',
+//         icon: 'glyphicon glyphicon-th',
+//         badge: 3,
+//         badgeClassName: 'bg-info',
+//         children: [
+//           {
+//             label: '简单页面',
+//             path: 'pages/simple',
+//             component: makeSchemaRenderer(SimplePageSchema)
+//           },
+//           {
+//             label: '初始化出错',
+//             path: 'pages/error',
+//             component: makeSchemaRenderer(ErrorPageSchema)
+//           },
+//           {
+//             label: '表单页面',
+//             path: 'pages/form',
+//             component: makeSchemaRenderer(FormPageSchema)
+//           }
+//         ]
+//       },
+
+//       {
+//         label: '表单',
+//         icon: 'fa fa-list-alt',
+//         children: [
+//           {
+//             label: '表单展示模式',
+//             path: 'form/mode',
+//             component: makeSchemaRenderer(ModeFormSchema)
+//           },
+
+//           {
+//             label: '所有类型汇总',
+//             path: 'form/full',
+//             component: makeSchemaRenderer(FullFormSchema)
+//           },
+
+//           {
+//             label: '静态展示',
+//             path: 'form/static',
+//             component: makeSchemaRenderer(StaticFormSchema)
+//           },
+
+//           {
+//             label: '输入提示',
+//             path: 'form/hint',
+//             component: makeSchemaRenderer(HintFormSchema)
+//           },
+
+//           {
+//             label: 'FieldSet',
+//             path: 'form/fieldset',
+//             component: makeSchemaRenderer(FieldSetFormSchema)
+//           },
+
+//           {
+//             label: 'Tabs',
+//             path: 'form/tabs',
+//             component: makeSchemaRenderer(TabsFormSchema)
+//           },
+
+//           {
+//             label: 'FieldSet Tabs 组合',
+//             path: 'form/fields-tabs',
+//             component: makeSchemaRenderer(FieldSetInTabsFormSchema)
+//           },
+
+//           {
+//             label: '动态数据',
+//             path: 'form/remote',
+//             component: makeSchemaRenderer(RemoteFormSchema)
+//           },
+
+//           {
+//             label: '显隐状态联动',
+//             path: 'form/reaction',
+//             component: makeSchemaRenderer(ReactionFormSchema)
+//           },
+
+//           {
+//             label: '表单验证',
+//             path: 'form/validation',
+//             component: makeSchemaRenderer(ValidationFormSchema)
+//           },
+
+//           {
+//             label: '组合类型',
+//             path: 'form/combo',
+//             component: makeSchemaRenderer(ComboFormSchema)
+//           },
+
+//           {
+//             label: '穿梭器',
+//             path: 'form/transfer',
+//             component: makeSchemaRenderer(TransferFormSchema)
+//           },
+
+//           {
+//             label: '多功能选择器',
+//             path: 'form/picker',
+//             component: makeSchemaRenderer(PickerFormSchema)
+//           },
+
+//           {
+//             label: '子表单',
+//             path: 'form/sub-form',
+//             component: makeSchemaRenderer(SubFormSchema)
+//           },
+
+//           {
+//             label: 'JSon Schema表单',
+//             path: 'form/json-schema',
+//             component: JSONSchemaForm
+//           },
+
+//           {
+//             label: '富文本',
+//             path: 'form/rich-text',
+//             component: makeSchemaRenderer(RichTextSchema)
+//           },
+
+//           {
+//             label: '代码编辑器',
+//             path: 'form/ide',
+//             component: makeSchemaRenderer(EditorSchema)
+//           },
+
+//           {
+//             label: '自定义组件',
+//             path: 'form/custom',
+//             component: makeSchemaRenderer(CustomFormSchema)
+//           },
+
+//           {
+//             label: '表格编辑',
+//             path: 'form/table',
+//             component: makeSchemaRenderer(TableFormSchema)
+//           },
+
+//           {
+//             label: '公式示例',
+//             path: 'form/formula',
+//             component: makeSchemaRenderer(FormulaFormSchema)
+//           },
+
+//           {
+//             label: '引用',
+//             path: 'form/definitions',
+//             component: makeSchemaRenderer(Definitions)
+//           }
+
+//           // {
+//           //     label: '布局测试',
+//           //     path: 'form/layout-test',
+//           //     component: makeSchemaRenderer(FormLayoutTestSchema)
+//           // },
+
+//           // {
+//           //     label: '测试',
+//           //     path: 'form/test',
+//           //     component: makeSchemaRenderer(TestFormSchema)
+//           // },
+//         ]
+//       },
+
+//       {
+//         label: '增删改查',
+//         icon: 'fa fa-table',
+//         children: [
+//           {
+//             label: '表格模式',
+//             path: 'crud/table',
+//             component: makeSchemaRenderer(TableCrudSchema)
+//           },
+//           {
+//             label: '卡片模式',
+//             path: 'crud/grid',
+//             component: makeSchemaRenderer(GridCrudSchema)
+//           },
+//           {
+//             label: '列表模式',
+//             path: 'crud/list',
+//             component: makeSchemaRenderer(ListCrudSchema)
+//           },
+//           {
+//             label: '加载更多模式',
+//             path: 'crud/load-more',
+//             component: makeSchemaRenderer(LoadMoreSchema)
+//           },
+//           {
+//             label: '操作交互显示',
+//             path: 'crud/item-actions',
+//             component: makeSchemaRenderer(ItemActionsSchema)
+//           },
+//           {
+//             label: '列类型汇总',
+//             path: 'crud/columns',
+//             component: makeSchemaRenderer(FieldsCrudSchema)
+//           },
+//           {
+//             label: '可折叠',
+//             path: 'crud/footable',
+//             component: makeSchemaRenderer(FootableCrudSchema)
+//           },
+//           {
+//             label: '嵌套',
+//             path: 'crud/nested',
+//             component: makeSchemaRenderer(NestedCrudSchema)
+//           },
+//           {
+//             label: '合并单元格',
+//             path: 'crud/merge-cell',
+//             component: makeSchemaRenderer(MergeCellSchema)
+//           },
+//           {
+//             label: '表头分组',
+//             path: 'crud/header-group',
+//             component: makeSchemaRenderer(HeaderGroupSchema)
+//           },
+//           {
+//             label: '表头隐藏',
+//             path: 'crud/header-hide',
+//             component: makeSchemaRenderer(HeaderHideSchema)
+//           },
+//           {
+//             label: '带边栏',
+//             path: 'crud/aside',
+//             component: makeSchemaRenderer(AsideCrudSchema)
+//           },
+//           {
+//             label: '固定表头/列',
+//             path: 'crud/fixed',
+//             component: makeSchemaRenderer(FixedCrudSchema)
+//           },
+//           {
+//             label: '键盘操作编辑',
+//             path: 'crud/keyboards',
+//             component: makeSchemaRenderer(KeyboardsCrudSchema)
+//           },
+//           {
+//             label: '操作并下一个',
+//             path: 'crud/jump-next',
+//             component: makeSchemaRenderer(JumpNextCrudSchema)
+//           },
+//           {
+//             label: '一次性加载',
+//             path: 'crud/load-once',
+//             component: makeSchemaRenderer(LoadOnceTableCrudSchema)
+//           }
+//           // {
+//           //     label: '测试',
+//           //     path: 'crud/test',
+//           //     component: makeSchemaRenderer(TestCrudSchema)
+//           // }
+//         ]
+//       },
+
+//       {
+//         label: '弹框',
+//         icon: 'fa fa-bomb',
+//         children: [
+//           {
+//             label: '对话框',
+//             path: 'dialog/simple',
+//             component: makeSchemaRenderer(SimpleDialogSchema)
+//           },
+//           {
+//             label: '侧边弹出',
+//             path: 'dialog/drawer',
+//             component: makeSchemaRenderer(DrwaerSchema)
+//           }
+//         ]
+//       },
+
+//       {
+//         label: '选项卡',
+//         icon: 'fa fa-clone',
+//         children: [
+//           {
+//             label: '常规选项卡',
+//             path: 'tabs/normal',
+//             component: makeSchemaRenderer(NormalTabSchema)
+//           },
+
+//           {
+//             label: '表单中选项卡分组',
+//             path: 'tabs/form',
+//             component: makeSchemaRenderer(FormTabSchema)
+//           },
+//           {
+//             label: '选项卡页面1',
+//             path: 'tabs/tab1',
+//             component: makeSchemaRenderer(Tab1Schema)
+//           },
+//           {
+//             label: '选项卡页面2',
+//             path: 'tabs/tab2',
+//             component: makeSchemaRenderer(Tab2Schema)
+//           },
+//           {
+//             label: '选项卡页面3',
+//             path: 'tabs/tab3',
+//             component: makeSchemaRenderer(Tab3Schema)
+//           }
+//         ]
+//       },
+
+//       {
+//         label: '联动',
+//         icon: 'fa fa-bolt',
+//         children: [
+//           {
+//             label: '地址栏变化自动更新',
+//             path: 'linkpage/page',
+//             component: makeSchemaRenderer(PageLinkPageSchema)
+//           },
+//           {
+//             label: '选项联动',
+//             path: 'linkpage/options-local',
+//             component: makeSchemaRenderer(OptionsLocalPageSchema)
+//           },
+//           {
+//             label: '选项远程联动',
+//             path: 'linkpage/options',
+//             component: makeSchemaRenderer(OptionsPageSchema)
+//           },
+//           {
+//             label: '表单和表单联动',
+//             path: 'linkpage/form',
+//             component: makeSchemaRenderer(FormLinkPageSchema)
+//           },
+//           {
+//             label: '表单自动更新',
+//             path: 'linkpage/form2',
+//             component: makeSchemaRenderer(Form2LinkPageSchema)
+//           },
+//           {
+//             label: '表单和列表联动',
+//             path: 'linkpage/crud',
+//             component: makeSchemaRenderer(CRUDLinkPageSchema)
+//           }
+//         ]
+//       },
+
+//       {
+//         label: '动态加载',
+//         icon: 'fa fa-magic',
+//         children: [
+//           {
+//             label: '动态加载数据',
+//             path: 'services/data',
+//             component: makeSchemaRenderer(ServicesDataSchema)
+//           },
+//           {
+//             label: '动态加载页面',
+//             path: 'services/schema',
+//             component: makeSchemaRenderer(ServicesSchemaSchema)
+//           },
+//           {
+//             label: '动态加载部分表单',
+//             path: 'services/form',
+//             component: makeSchemaRenderer(ServicesFormSchema)
+//           }
+//         ]
+//       },
+
+//       {
+//         label: '向导',
+//         icon: 'fa fa-desktop',
+//         path: 'wizard',
+//         component: makeSchemaRenderer(WizardSchema)
+//       },
+
+//       {
+//         label: '排版',
+//         icon: 'fa fa-columns',
+//         path: 'horizontal',
+//         component: makeSchemaRenderer(HorizontalSchema)
+//       },
+
+//       {
+//         label: '图表',
+//         icon: 'fa fa-bar-chart',
+//         path: 'chart',
+//         component: makeSchemaRenderer(ChartSchema)
+//       },
+//       {
+//         label: '轮播图',
+//         icon: 'fa fa-pause',
+//         path: 'carousel',
+//         component: makeSchemaRenderer(CarouselSchema)
+//       },
+//       {
+//         label: '音频',
+//         icon: 'fa fa-volume-up',
+//         path: 'audio',
+//         component: makeSchemaRenderer(AudioSchema)
+//       },
+//       {
+//         label: '视频',
+//         icon: 'fa fa-video-camera',
+//         path: 'video',
+//         component: makeSchemaRenderer(VideoSchema)
+//       },
+//       {
+//         label: '异步任务',
+//         icon: 'fa fa-tasks',
+//         path: 'task',
+//         component: makeSchemaRenderer(TasksSchema)
+//       },
+//       {
+//         label: 'IFrame',
+//         icon: 'fa fa-cloud',
+//         path: 'iframe',
+//         component: makeSchemaRenderer(IFrameSchema)
+//       },
+//       {
+//         label: 'SDK',
+//         icon: 'fa fa-rocket',
+//         path: 'sdk',
+//         component: SdkTest
+//       },
+
+//       {
+//         label: 'Test',
+//         icon: 'fa fa-code',
+//         path: 'test',
+//         component: TestComponent
+//       }
+//     ]
+//   }
+// ];
+
+// @withRouter
+// export default class Example extends React.PureComponent {
+//   state = {
+//     asideFolded: localStorage.getItem('asideFolded') === 'true',
+//     offScreen: false,
+//     headerVisible: true,
+//     themeIndex: 0,
+//     themes: themes,
+//     theme: themes[localStorage.getItem('themeIndex') || 0],
+//     locale: localStorage.getItem('locale') || '',
+//     docs: Docs.children
+//   };
+
+//   constructor(props) {
+//     super(props);
+
+//     this.toggleAside = this.toggleAside.bind(this);
+//     this.setAsideFolded = this.setAsideFolded.bind(this);
+//     this.setHeaderVisible = this.setHeaderVisible.bind(this);
+//   }
+
+//   componentDidMount() {
+//     if (this.state.theme.value !== 'default') {
+//       document.querySelectorAll('link[title]').forEach(item => {
+//         item.disabled = true;
+//       });
+//       document.querySelector(
+//         `link[title=${this.state.theme.value}]`
+//       ).disabled = false;
+//     }
+//   }
+
+//   componentDidUpdate(preProps, preState) {
+//     const props = this.props;
+
+//     if (preState.theme.value !== this.state.theme.value) {
+//       document.querySelector(
+//         `link[title=${preState.theme.value}]`
+//       ).disabled = true;
+//       document.querySelector(
+//         `link[title=${this.state.theme.value}]`
+//       ).disabled = false;
+//     }
+
+//     if (props.location.pathname !== preProps.location.pathname) {
+//       this.setState(
+//         {
+//           offScreen: false
+//         },
+//         () => window.scrollTo(0, 0)
+//       );
+
+//       const pageURL = props.location.pathname;
+//       _hmt && _hmt.push(['_trackPageview', pageURL]);
+//     }
+//   }
+
+//   toggleAside() {
+//     this.setAsideFolded(!this.state.asideFolded);
+//   }
+
+//   setAsideFolded(folded = false) {
+//     localStorage.setItem('asideFolded', JSON.stringify(folded));
+//     this.setState({
+//       asideFolded: folded
+//     });
+//   }
+
+//   setHeaderVisible(visible = false) {
+//     this.setState({
+//       headerVisible: visible
+//     });
+//   }
+
+//   renderAside() {
+//     return (
+//       <AsideNav
+//         renderLink={() => {
+//           return null;
+//         }}
+//       />
+//     );
+//   }
+
+//   renderHeader() {
+//     const location = this.props.location;
+//     const theme = this.state.theme;
+
+//     if (location.pathname === '/edit') {
+//       return (
+//         <div id="headerBar" className="box-shadow bg-dark">
+//           <div className={`${theme.ns}Layout-brand`}>AMis 可视化编辑器</div>
+//         </div>
+//       );
+//     }
+
+//     return (
+//       <>
+//         <div className={`${theme.ns}Layout-brandBar`}>
+//           <button
+//             onClick={() => this.setState({offScreen: !this.state.offScreen})}
+//             className="pull-right visible-xs"
+//           >
+//             <i className="glyphicon glyphicon-align-justify" />
+//           </button>
+
+//           <div className={`${theme.ns}Layout-brand`}>
+//             <i className="fa fa-paw" />
+//             <span className="hidden-folded m-l-sm">AMIS</span>
+//           </div>
+//         </div>
+
+//         <div className={`${theme.ns}Layout-headerBar`}>
+//           <ul className={`${theme.ns}Layout-headerBar-links pull-left`}>
+//             <Link to="/docs">文档</Link>
+//             <Link to="/examples">示例</Link>
+//           </ul>
+
+//           <div className="hidden-xs p-t pull-right m-l-sm">
+//             <Select
+//               clearable={false}
+//               theme={this.state.theme.value}
+//               value={this.state.locale || 'zh-cn'}
+//               options={locales}
+//               onChange={locale => {
+//                 this.setState({locale: locale.value});
+//                 localStorage.setItem('locale', locale.value);
+//               }}
+//             />
+//           </div>
+
+//           <div className="hidden-xs p-t pull-right">
+//             <Select
+//               clearable={false}
+//               theme={this.state.theme.value}
+//               value={this.state.theme}
+//               options={this.state.themes}
+//               onChange={theme => {
+//                 this.setState({theme});
+//                 localStorage.setItem(
+//                   'themeIndex',
+//                   this.state.themes.indexOf(theme)
+//                 );
+//               }}
+//             />
+//           </div>
+
+//           <DocSearch theme={this.state.theme.value} />
+//         </div>
+//       </>
+//     );
+//   }
+
+//   toggleOpen(e, item) {
+//     e.stopPropagation();
+//     e.preventDefault();
+
+//     const docs = mapTree(this.state.docs, i => ({
+//       ...i,
+//       isOpen: item.id === i.id ? !i.isOpen : i.isOpen
+//     }));
+
+//     this.setState({
+//       docs
+//     });
+//   }
+
+//   renderNavigation(children, parent) {
+//     return children.map(child => {
+//       const path = child.path;
+//       const hasChildren =
+//         Array.isArray(child.children) && child.children.length;
+
+//       return (
+//         <div
+//           key={child.id}
+//           className={classnames('Doc-navigation-item', {
+//             'is-active': path === location.pathname,
+//             'is-top': !parent,
+//             'is-open': child.isOpen
+//           })}
+//         >
+//           <Link to={path}>
+//             {child.label}
+//             {hasChildren ? (
+//               <i
+//                 className={`iconfont icon-down-arrow ${
+//                   child.isOpen ? '' : 'is-flipped'
+//                 }`}
+//                 onClick={e => this.toggleOpen(e, child)}
+//               ></i>
+//             ) : null}
+//           </Link>
+
+//           {hasChildren && child.isOpen
+//             ? this.renderNavigation(child.children, {
+//                 ...child,
+//                 path
+//               })
+//             : null}
+//         </div>
+//       );
+//     });
+//   }
+
+//   render() {
+//     // const pathname = this.props.location.pathname;
+//     const theme = this.state.theme;
+//     const groups = groupBy(this.state.docs, d => d.group);
+//     groups['组件'] = groups['undefined'][0].children;
+
+//     return (
+//       <Layout
+//         theme={theme.value}
+//         boxed={true}
+//         offScreen={this.state.offScreen}
+//         header={this.state.headerVisible ? this.renderHeader() : null}
+//         // folded={this.state.asideFolded}
+//         // aside={this.renderAside()}
+//       >
+//         <ToastComponent theme={theme.value} locale={this.state.locale} />
+//         <AlertComponent theme={theme.value} locale={this.state.locale} />
+
+//         <div className="Doc">
+//           <div className="Doc-nav">
+//             <div className="Doc-navigation">
+//               {Object.keys(groups).map(groupName => (
+//                 <div className="Doc-navigationGroup" key={groupName}>
+//                   <div className="Doc-navigationGroup-name">
+//                     {groupName || '其他'}
+//                   </div>
+//                   {this.renderNavigation(groups[groupName])}
+//                 </div>
+//               ))}
+//             </div>
+//           </div>
+
+//           {React.cloneElement(this.props.children, {
+//             ...this.props.children.props,
+//             setAsideFolded: this.setAsideFolded,
+//             setHeaderVisible: this.setHeaderVisible,
+//             theme: theme.value,
+//             classPrefix: theme.ns,
+//             locale: this.state.locale
+//           })}
+//         </div>
+//       </Layout>
+//     );
+//   }
+// }

examples/components/MdRenderer.jsx

@@ -9,6 +9,7 @@ import Overlay from '../../src/components/Overlay';
 import PopOver from '../../src/components/PopOver';
 import NestedLinks from '../../src/components/AsideNav';
 import {Portal} from 'react-overlays';
+import classnames from 'classnames';
 
 class CodePreview extends React.Component {
   state = {
@@ -44,11 +45,11 @@ class CodePreview extends React.Component {
             show
           >
             <PopOver
-              offset={{x: 0, y: -height}}
+              offset={{x: 0, y: 50 - height}}
               style={{height}}
-              className="doc-shcema-preview-popover"
+              className=":MDPreview-shcema-preview-popover"
             >
-              <div className="doc-schema-preview">
+              <div className="MDPreview-schema-preview">
                 <PlayGround {...rest} vertical />
               </div>
             </PopOver>
@@ -63,7 +64,7 @@ function isActive(link, location) {
   return !!(link.fullPath && link.fullPath === location.hash);
 }
 
-export default function(doc) {
+export default function (doc) {
   return class extends React.Component {
     static displayName = 'MarkdownRenderer';
     ref = null;
@@ -151,79 +152,108 @@ export default function(doc) {
       }
     }
 
+    renderHeading(children) {
+      return children.map((child, idx) => (
+        <div
+          key={`${child.fullPath}-${idx}`}
+          className={classnames('Doc-headingList-item', {
+            'is-active': this.props.location.hash === child.fullPath
+          })}
+        >
+          <a href={`#${child.fragment}`}>{child.label}</a>
+
+          {child.children && child.children.length
+            ? this.renderHeading(child.children)
+            : null}
+        </div>
+      ));
+    }
+
     render() {
       const {location} = this.props;
 
       return (
-        <div className="pos-rlt text-left">
+        <>
-          {doc.title ? <TitleBar title={doc.title} /> : null}
+          <div className="Doc-content">
-          <div className="markdown-body" ref={this.divRef}>
+            {doc.title ? (
-            Doc
+              <div className="Doc-title">
+                <h1>{doc.title}</h1>
+              </div>
+            ) : null}
+
+            <div className="markdown-body" ref={this.divRef}>
+              Doc
+            </div>
           </div>
           {doc.toc && doc.toc.children && doc.toc.children.length > 1 ? (
-            <Portal container={() => document.querySelector('#asideInner')}>
+            // <Portal container={() => document.querySelector('#asideInner')}>
-              <NestedLinks
+            //   <NestedLinks
-                navigations={[doc.toc]}
+            //     navigations={[doc.toc]}
-                renderLink={({
+            //     renderLink={({
-                  link,
+            //       link,
-                  active,
+            //       active,
-                  toggleExpand,
+            //       toggleExpand,
-                  depth,
+            //       depth,
-                  classnames: cx
+            //       classnames: cx
-                }) => {
+            //     }) => {
-                  let children = [];
+            //       let children = [];
 
-                  if (link.children) {
+            //       if (link.children) {
-                    children.push(
+            //         children.push(
-                      <span
+            //           <span
-                        key="expand-toggle"
+            //             key="expand-toggle"
-                        className={cx(`AsideNav-itemArrow`)}
+            //             className={cx(`AsideNav-itemArrow`)}
-                      />
+            //           />
-                    );
+            //         );
-                  }
+            //       }
 
-                  link.badge &&
+            //       link.badge &&
-                    children.push(
+            //         children.push(
-                      <b
+            //           <b
-                        key="badge"
+            //             key="badge"
-                        className={cx(
+            //             className={cx(
-                          'AsideNav-itemBadge',
+            //               'AsideNav-itemBadge',
-                          link.badgeClassName || 'bg-info'
+            //               link.badgeClassName || 'bg-info'
-                        )}
+            //             )}
-                      >
+            //           >
-                        {link.badge}
+            //             {link.badge}
-                      </b>
+            //           </b>
-                    );
+            //         );
 
-                  depth === 1 &&
+            //       depth === 1 &&
-                    children.push(
+            //         children.push(
-                      <i
+            //           <i
-                        key="icon"
+            //             key="icon"
-                        className={cx('AsideNav-itemIcon fa fa-flag')}
+            //             className={cx('AsideNav-itemIcon fa fa-flag')}
-                      />
+            //           />
-                    );
+            //         );
 
-                  children.push(
+            //       children.push(
-                    <span key="label" className={cx('AsideNav-itemLabel')}>
+            //         <span key="label" className={cx('AsideNav-itemLabel')}>
-                      {link.label}
+            //           {link.label}
-                    </span>
+            //         </span>
-                  );
+            //       );
 
-                  return link.fragment ? (
+            //       return link.fragment ? (
-                    <a href={`#${link.fragment}`}>{children}</a>
+            //         <a href={`#${link.fragment}`}>{children}</a>
-                  ) : (
+            //       ) : (
-                    <a
+            //         <a
-                      onClick={link.children ? () => toggleExpand(link) : null}
+            //           onClick={link.children ? () => toggleExpand(link) : null}
-                    >
+            //         >
-                      {children}
+            //           {children}
-                    </a>
+            //         </a>
-                  );
+            //       );
-                }}
+            //     }}
-                isActive={link => isActive(link, location)}
+            //     isActive={link => isActive(link, location)}
-              />
+            //   />
-            </Portal>
+            // </Portal>
+            <div className="Doc-toc">
+              <div className="Doc-headingList">
+                {this.renderHeading(doc.toc.children)}
+              </div>
+            </div>
           ) : null}
-        </div>
+        </>
       );
     }
   };

examples/components/Play.jsx

@@ -262,7 +262,7 @@ export default class PlayGround extends React.Component {
               </div>
             </div>
           </div>
-          <div className="row-row" style={{height: 200}}>
+          <div className="row-row b-t" style={{height: 200}}>
             <div className="cell">{this.renderEditor()}</div>
           </div>
         </div>

examples/doc.css

@@ -14,7 +14,7 @@
     word-wrap: break-word;
     box-sizing: border-box;
     min-width: 200px;
-    max-width: 980px;
+    /* max-width: 980px; */
     /* margin: 0 auto; */
     padding: 25px 45px 25px;
 }
@@ -42,7 +42,7 @@
     font-weight: bolder;
 }
 
-.markdown-body > h1 {
+.markdown-body>h1 {
     font-size: 2em;
     margin: 0.67em 0;
 }
@@ -138,38 +138,38 @@
     content: "";
 }
 
-.markdown-body > h1,
+.markdown-body>h1,
-.markdown-body > h2,
+.markdown-body>h2,
-.markdown-body > h3,
+.markdown-body>h3,
-.markdown-body > h4,
+.markdown-body>h4,
-.markdown-body > h5,
+.markdown-body>h5,
-.markdown-body > h6 {
+.markdown-body>h6 {
     margin-top: 0;
     margin-bottom: 0;
     line-height: 1.5;
 }
 
-.markdown-body > h1 {
+.markdown-body>h1 {
     font-size: 30px;
 }
 
-.markdown-body > h2 {
+.markdown-body>h2 {
     font-size: 21px;
 }
 
-.markdown-body > h3 {
+.markdown-body>h3 {
     font-size: 16px;
 }
 
-.markdown-body > h4 {
+.markdown-body>h4 {
     font-size: 14px;
 }
 
-.markdown-body > h5 {
+.markdown-body>h5 {
     font-size: 12px;
 }
 
-.markdown-body > h6 {
+.markdown-body>h6 {
     font-size: 11px;
 }
 
@@ -282,95 +282,95 @@
     outline: none;
 }
 
-.markdown-body > h1,
+.markdown-body>h1,
-.markdown-body > h2,
+.markdown-body>h2,
-.markdown-body > h3,
+.markdown-body>h3,
-.markdown-body > h4,
+.markdown-body>h4,
-.markdown-body > h5,
+.markdown-body>h5,
-.markdown-body > h6 {
+.markdown-body>h6 {
     margin-top: 1em;
     margin-bottom: 16px;
     font-weight: bold;
     line-height: 1.4;
 }
 
-.markdown-body > h1 .octicon-link,
+.markdown-body>h1 .octicon-link,
-.markdown-body > h2 .octicon-link,
+.markdown-body>h2 .octicon-link,
-.markdown-body > h3 .octicon-link,
+.markdown-body>h3 .octicon-link,
-.markdown-body > h4 .octicon-link,
+.markdown-body>h4 .octicon-link,
-.markdown-body > h5 .octicon-link,
+.markdown-body>h5 .octicon-link,
-.markdown-body > h6 .octicon-link {
+.markdown-body>h6 .octicon-link {
     color: #000;
     vertical-align: middle;
     visibility: hidden;
 }
 
-.markdown-body > h1:hover .anchor,
+.markdown-body>h1:hover .anchor,
-.markdown-body > h2:hover .anchor,
+.markdown-body>h2:hover .anchor,
-.markdown-body > h3:hover .anchor,
+.markdown-body>h3:hover .anchor,
-.markdown-body > h4:hover .anchor,
+.markdown-body>h4:hover .anchor,
-.markdown-body > h5:hover .anchor,
+.markdown-body>h5:hover .anchor,
-.markdown-body > h6:hover .anchor {
+.markdown-body>h6:hover .anchor {
     text-decoration: none;
 }
 
-.markdown-body > h1:hover .anchor .octicon-link,
+.markdown-body>h1:hover .anchor .octicon-link,
-.markdown-body > h2:hover .anchor .octicon-link,
+.markdown-body>h2:hover .anchor .octicon-link,
-.markdown-body > h3:hover .anchor .octicon-link,
+.markdown-body>h3:hover .anchor .octicon-link,
-.markdown-body > h4:hover .anchor .octicon-link,
+.markdown-body>h4:hover .anchor .octicon-link,
-.markdown-body > h5:hover .anchor .octicon-link,
+.markdown-body>h5:hover .anchor .octicon-link,
-.markdown-body > h6:hover .anchor .octicon-link {
+.markdown-body>h6:hover .anchor .octicon-link {
     visibility: visible;
 }
 
-.markdown-body > h1 {
+.markdown-body>h1 {
     padding-bottom: 0.3em;
     font-size: 2.25em;
     line-height: 1.2;
     border-bottom: 1px solid #dee5e7;
 }
 
-.markdown-body > h1 .anchor {
+.markdown-body>h1 .anchor {
     line-height: 1;
 }
 
-.markdown-body > h2 {
+.markdown-body>h2 {
     padding-bottom: 0.3em;
     font-size: 1.75em;
     line-height: 1.225;
     border-bottom: 1px solid #dee5e7;
 }
 
-.markdown-body > h2 .anchor {
+.markdown-body>h2 .anchor {
     line-height: 1;
 }
 
-.markdown-body > h3 {
+.markdown-body>h3 {
     font-size: 1.5em;
     line-height: 1.43;
 }
 
-.markdown-body > h3 .anchor {
+.markdown-body>h3 .anchor {
     line-height: 1.2;
 }
 
-.markdown-body > h4 {
+.markdown-body>h4 {
     font-size: 1.25em;
 }
 
-.markdown-body > h4 .anchor {
+.markdown-body>h4 .anchor {
     line-height: 1.2;
 }
 
-.markdown-body > h5 {
+.markdown-body>h5 {
     font-size: 1em;
 }
 
-.markdown-body > h5 .anchor {
+.markdown-body>h5 .anchor {
     line-height: 1.1;
 }
 
-.markdown-body > h6 {
+.markdown-body>h6 {
     font-size: 1em;
     color: #777;
 }
@@ -486,6 +486,7 @@
     border: 1px solid #ddd;
     box-shadow: 0 8px 18px 0 rgba(0, 0, 0, 0.3);
 }
+
 @media (min-width: 1200px) {
     .markdown-body img {
         max-width: 800px;
@@ -498,7 +499,7 @@
     padding-bottom: 0.2em;
     margin: 0;
     font-size: 85%;
-    background-color: rgba(0,0,0,0.04);
+    background-color: rgba(0, 0, 0, 0.04);
     border-radius: 3px;
 }
 
@@ -750,10 +751,10 @@
     padding-left: 0 !important;
 }
 
-.markdown-body > .amis-preview {
+.markdown-body>.amis-preview {
     margin-bottom: 15px;
 }
 
 .amis-doc pre {
     margin-top: 15px;
-}
+}

examples/style.scss

@@ -1,7 +1,11 @@
-// // @import "../node_modules/@fex/aui/scss/variables";
+@import '../scss/mixins';
 @import '../scss/functions';
 @import '../scss/variables';
 
+body {
+  background-color: #fff;
+}
+
 .page-play,
 .page-edit {
   &:before {
@@ -45,20 +49,27 @@
   }
 }
 
-.doc-shcema-preview-popover {
+.MDPreview {
-  box-shadow: none !important;
+  flex: 1 auto;
-  margin-top: -1px !important;
+  overflow: auto;
-  padding: 0 45px !important;
+  width: 100%;
-  left: 0 !important;
+  position: relative;
-  width: 100% !important;
-  max-width: 980px !important;
-  z-index: 1 !important;
-  background: transparent !important;
-  border: none !important;
 
-  .doc-schema-preview {
+  &-shcema-preview-popover {
+    box-shadow: none !important;
+    margin-top: -1px !important;
+    padding: 0 45px !important;
+    left: 1px !important;
+    width: 100% !important;
+    // max-width: 980px !important;
+    z-index: 1 !important;
+    background: transparent !important;
+    border: none !important;
+  }
+
+  &-schema-preview {
     border: 1px solid #ddd;
-    background: rgb(240, 243, 244);
+    // background: rgb(240, 243, 244);
     position: relative;
     height: 100%;
     width: 100%;
@@ -82,3 +93,372 @@
   > .tab-content {
   bottom: 50px;
 }
+
+.app-wrapper {
+  .a-Layout {
+    &-headerBar {
+      height: 64px;
+      padding-right: 20px;
+
+      &::before,
+      &::after {
+        top: 50%;
+        right: 0;
+        height: 32px;
+        content: ' ';
+        position: absolute;
+        transform: translateY(-50%);
+        border-left: 1px solid #e8ebee;
+        width: 1px;
+      }
+
+      &::before {
+        left: -19px;
+      }
+
+      &-links {
+        height: 64px;
+        line-height: 64px;
+        font-size: 14px;
+        > a {
+          color: #333;
+          padding-right: 30px;
+        }
+      }
+    }
+
+    &-brandBar {
+      background-color: transparent;
+      position: absolute;
+      left: -220px;
+
+      .a-Layout-brand {
+        color: #333;
+        height: 64px;
+        line-height: 64px;
+        font-size: 24px;
+        padding: 0;
+        font-weight: 400;
+
+        i {
+          color: #108cee;
+        }
+      }
+    }
+
+    &::before {
+      background-color: #fff;
+    }
+
+    &-header {
+      height: 64px;
+      box-shadow: none;
+
+      &::before {
+        position: fixed;
+        height: 64px;
+        content: '';
+        z-index: -1;
+        left: 0;
+        right: 0;
+        background: #fff;
+        box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.1);
+      }
+
+      .a-Doc-search {
+        position: absolute;
+        right: -160px;
+        padding-top: 15px;
+      }
+    }
+  }
+}
+
+.Doc {
+  .anchor {
+    padding-top: 110px;
+    margin-top: -110px;
+  }
+
+  a {
+    text-decoration: none;
+  }
+
+  &-nav,
+  &-toc {
+    margin-top: 30px;
+  }
+
+  &-nav,
+  &-toc {
+    a {
+      display: inline-block;
+      width: 100%;
+      padding: 5px 10px;
+    }
+
+    > div {
+      scrollbar-width: none;
+      /* Firefox */
+      -ms-overflow-style: none;
+      /* IE 10+ */
+
+      &::-webkit-scrollbar-track {
+        box-shadow: none !important;
+        background-color: transparent;
+      }
+
+      &::-webkit-scrollbar {
+        width: 3px !important;
+        background-color: transparent;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background-color: transparent;
+      }
+    }
+  }
+
+  &-nav {
+    width: 200px;
+  }
+
+  &-toc {
+    margin: 30px 0;
+    width: 220px;
+  }
+
+  &-navigation {
+    &-item {
+      padding-left: 20px;
+      border-left: 1px solid #e8ebee;
+      position: relative;
+
+      > a {
+        font-size: 16px;
+        font-weight: 700;
+        color: #666;
+        padding-left: 0;
+        padding-right: 20px;
+
+        &:hover {
+          color: #999;
+        }
+      }
+
+      i {
+        font-size: 12px;
+        padding: 5px;
+        position: absolute;
+        right: 15px;
+        top: 0;
+      }
+
+      &.is-top {
+        padding-left: 0;
+        border-left: 0;
+        display: block;
+
+        > a {
+          color: #333;
+
+          &:hover {
+            color: #000;
+          }
+        }
+      }
+
+      &.is-active {
+        > a {
+          color: #108cee;
+
+          &:hover {
+            color: #108cee;
+          }
+        }
+      }
+    }
+
+    .Doc-navigationGroup {
+      margin-bottom: 30px;
+
+      &-name {
+        color: #999;
+        font-weight: 700;
+        margin-bottom: 10px;
+      }
+    }
+  }
+
+  &-headingList {
+    font-size: 12px;
+    font-weight: 500;
+
+    &-item {
+      padding-left: 15px;
+
+      a {
+        color: #666;
+      }
+
+      &.is-active {
+        &::before {
+          content: ' ';
+          border-left: 2px solid #108cee;
+        }
+        > a {
+          color: #108cee;
+        }
+      }
+    }
+  }
+
+  &-content {
+    .Doc-title {
+      margin-top: 50px;
+      padding-left: 45px;
+
+      h1 {
+        margin: 0;
+        font-size: 40px;
+        font-weight: bold;
+      }
+    }
+
+    .markdown-body {
+      margin-top: 20px;
+
+      > *:first-child {
+        margin-top: 36px !important;
+      }
+
+      > h1,
+      > h2 {
+        border-top: 1px solid #e0e7ec;
+        border-bottom: 0;
+        padding-bottom: 0;
+        padding-top: 35px;
+        margin: 55px 0 35px;
+      }
+
+      > p,
+      > blockquote,
+      > ul,
+      > ol,
+      > dl,
+      > table,
+      > pre {
+        margin-bottom: 30px;
+      }
+    }
+  }
+
+  &-footer {
+    margin: 60px 0 80px;
+    padding-bottom: 25px;
+    border-bottom: 2px solid #e0e8ef;
+
+    .Doc-navLinks {
+      display: flex;
+      justify-content: space-between;
+
+      &--prev,
+      &--next {
+        display: flex;
+        justify-content: space-between;
+        width: 330px;
+        height: 80px;
+        border: 1px solid #e8ebee;
+        border-radius: 3px;
+        padding: 20px;
+        transition: border-color ease-out 0.3s, color ease-out 0.3s;
+        box-shadow: #e8ebee 0px 3px 8px 0px;
+        color: #666;
+
+        &:hover {
+          border-color: #108cee;
+          color: #108cee;
+
+          .Doc-navLinks-title {
+            color: #108cee;
+          }
+        }
+
+        &:first-child:nth-last-child(1) {
+          flex: 1;
+        }
+      }
+
+      &-icon {
+        line-height: 40px;
+      }
+
+      &-body {
+        .Doc-navLinks-subtitle {
+          font-size: 12px;
+        }
+
+        .Doc-navLinks-title {
+          font-size: 16px;
+          font-weight: bold;
+          color: #333;
+          transition: color ease-out 0.3s;
+        }
+      }
+    }
+  }
+
+  .is-flipped {
+    transform: rotateX(180deg);
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  .Doc {
+    display: flex;
+    flex-direction: row;
+
+    &-content {
+      flex: 1 auto;
+      width: 0;
+    }
+
+    &-toc {
+      margin-left: 30px;
+    }
+
+    &-toc > div {
+      position: fixed;
+      width: 220px;
+      border-left: 1px solid #e8ebee;
+      top: 100px;
+      // bottom: 30px;
+      overflow: auto;
+    }
+
+    &-nav > div {
+      position: fixed;
+      width: 200px;
+      top: 100px;
+      bottom: 0;
+      overflow-y: auto;
+      border-right: 1px solid #e8ebee;
+    }
+  }
+}
+
+@media screen and (min-width: 1640px) {
+  .Doc {
+    &-toc {
+      width: 1px;
+    }
+
+    &-nav {
+      width: 1px;
+
+      > div {
+        margin-left: -219px;
+      }
+    }
+  }
+}