样式修复

examples/components/App.tsx

@@ -284,7 +284,7 @@ export class App extends React.PureComponent {
               browserHistory.push(
                 `${path || (hasChildren && nav.children[0].path)}`
               );
-              this.toggleOpen(e, nav);
+              !isOpen && this.toggleOpen(e, nav);
             }}
             // to={`${path || (hasChildren && nav.children[0].path)}`}
           >
@@ -405,7 +405,7 @@ export default function entry({pathPrefix}) {
   return (
     <Router history={browserHistory}>
       <Route component={App}>
-        <Redirect from={`${ContextPath}/`} to={`${ContextPath}/docs/intro`} />
+        <Redirect from={`${ContextPath}/`} to={`${ContextPath}/docs/index`} />
         <Redirect from={`/examples`} to={`/examples/pages/simple`} />
         <Redirect from={`/docs`} to={`/docs/index`} />
 

examples/components/MdRenderer.tsx

@@ -233,8 +233,10 @@ export default function (doc) {
           </div>
           {doc.toc && doc.toc.children && doc.toc.children.length > 1 ? (
             <div className="Doc-toc">
-              <div className="Doc-headingList">
-                {this.renderHeading(doc.toc.children)}
+              <div>
+                <div className="Doc-headingList">
+                  {this.renderHeading(doc.toc.children)}
+                </div>
               </div>
             </div>
           ) : null}

examples/components/SchemaRender.jsx

@@ -191,7 +191,7 @@ export default function (schema) {
                   size="lg"
                   onHide={this.close}
                   show={this.state.open}
-                  overlay={false}
+                  // overlay={false}
                   closeOnOutside={true}
                   position="right"
                 >
@@ -210,16 +210,18 @@ export default function (schema) {
               //   </div>
               // </div>
               <div className="Doc-toc">
-                <div className="Doc-headingList">
-                  <div className="Doc-headingList-item">
-                    <a onClick={this.toggleCode}>
-                      查看页面配置 <i className="fa fa-code p-l-xs"></i>
-                    </a>
-                  </div>
-                  <div className="Doc-headingList-item">
-                    <a onClick={this.copyCode}>
-                      复制页面配置 <i className="fa fa-copy p-l-xs"></i>
-                    </a>
+                <div>
+                  <div className="Doc-headingList">
+                    <div className="Doc-headingList-item">
+                      <a onClick={this.toggleCode}>
+                        查看页面配置 <i className="fa fa-code p-l-xs"></i>
+                      </a>
+                    </div>
+                    <div className="Doc-headingList-item">
+                      <a onClick={this.copyCode}>
+                        复制页面配置 <i className="fa fa-copy p-l-xs"></i>
+                      </a>
+                    </div>
                   </div>
                 </div>
               </div>

examples/style.scss

@@ -98,7 +98,7 @@ body {
   .a-Layout,
   .cxd-Layout,
   .dark-Layout {
-    padding-top: 64px;
+    padding-top: 100px;
 
     &-headerBar {
       height: 64px;
@@ -200,6 +200,8 @@ body {
 }
 
 .Doc {
+  height: 100%;
+
   .anchor {
     padding-top: 100px;
     margin-top: -100px;
@@ -319,6 +321,7 @@ body {
   &-headingList {
     font-size: 12px;
     font-weight: 500;
+    border-left: 1px solid #e8ebee;
 
     &-item {
       padding-left: 15px;
@@ -347,7 +350,7 @@ body {
     position: relative;
 
     .Doc-title {
-      margin-top: 50px;
+      // margin-top: 50px;
       padding-left: 40px;
 
       h1 {
@@ -443,20 +446,20 @@ body {
   }
 
   > .schema-wrapper {
-    flex: 1 auto;
-    width: 0;
+    position: relative;
     > .a-Page,
     > .cxd-Page,
     > .dark-Page {
-      position: absolute;
-      top: 100px;
-      left: 30px;
-      right: 60px;
-      bottom: 0;
-      height: auto;
-      &--withSidebar {
-        padding-right: 80px;
-      }
+      padding: 0 45px;
+      // position: absolute;
+      // top: 100px;
+      // left: 30px;
+      // right: 60px;
+      // bottom: 0;
+
+      // &--withSidebar {
+      //   padding-right: 80px;
+      // }
     }
   }
 }
@@ -478,6 +481,7 @@ body {
   font-size: 16px;
   transition: all 0.3s ease-in-out;
   opacity: 0;
+  z-index: -2;
 
   &:hover {
     color: #108cee;
@@ -485,6 +489,7 @@ body {
 
   &.visible {
     opacity: 1;
+    z-index: 0;
   }
 }
 
@@ -493,7 +498,8 @@ body {
     display: flex;
     flex-direction: row;
 
-    &-content {
+    &-content,
+    .schema-wrapper {
       flex: 1 auto;
       width: 0;
     }
@@ -505,9 +511,8 @@ body {
     &-toc > div {
       position: fixed;
       width: 220px;
-      border-left: 1px solid #e8ebee;
       top: 100px;
-      // bottom: 30px;
+      bottom: 21px;
       overflow: auto;
     }
 

scss/layout/_layout.scss

@@ -9,7 +9,7 @@ body {
 }
 
 .#{$ns}Layout {
-  height: auto;
+  height: 100%;
   min-height: 100%;
   width: 100%;
   position: relative;
@@ -152,6 +152,7 @@ body {
   &-body {
     padding-bottom: $Layout-header-height;
     width: 100%;
+    height: 100%;
   }
 
   &--noFooter &-body {