加个复制代码和回到顶部

docs/index.md

@@ -1,9 +1,9 @@
 ---
-title: 起步
+title: 介绍
 description: ddsaad
 type: 0
 group: 💡 概念
-menuName: 起步
+menuName: 介绍
 icon:
 order: 8
 ---

docs/start/custom.md

@@ -1,5 +1,5 @@
 ---
-title: 自定义组件
+title: 自定义
 ---
 
 如果默认的组件不能满足需求，可以通过自定义组件来进行扩展，在 amis 中有两种方法：

docs/start/getting-started.md

@@ -3,10 +3,6 @@ title: 快速开始
 description:
 ---
 
-## 速搭
-
-suda
-
 ## npm
 
 ### 安装
@@ -15,7 +11,7 @@ suda
 npm i amis
 ```
 
-### 使用说明
+### 使用
 
 可以在 React Component 这么使用（TypeScript）。
 

examples/components/App.tsx

@@ -72,7 +72,8 @@ export class App extends React.PureComponent {
     themes: themes,
     theme: themes[localStorage.getItem('themeIndex') || 0],
     locale: localStorage.getItem('locale') || '',
-    navigations: []
+    navigations: [],
+    scrollTop: 0
   };
 
   constructor(props) {
@@ -93,6 +94,7 @@ export class App extends React.PureComponent {
         `link[title=${this.state.theme.value}]`
       ).disabled = false;
     }
+    document.addEventListener('scroll', this.handleScroll.bind(this));
   }
 
   componentDidUpdate(preProps, preState) {
@@ -120,6 +122,16 @@ export class App extends React.PureComponent {
     }
   }
 
+  componentWillUnmount() {
+    document.removeEventListener('scroll', this.handleScroll.bind(this));
+  }
+
+  handleScroll(e) {
+    this.setState({
+      scrollTop: e.target.scrollingElement.scrollTop
+    });
+  }
+
   toggleAside() {
     this.setAsideFolded(!this.state.asideFolded);
   }
@@ -328,6 +340,14 @@ export class App extends React.PureComponent {
             </div>
           </div>
 
+          {/* 完了加个动画吧 */}
+          <div
+            className={`Backtop ${this.state.scrollTop > 450 ? 'visible' : ''}`}
+            onClick={() => scrollTo({top: 0})}
+          >
+            <i className="fa fa-rocket"></i>
+          </div>
+
           {React.cloneElement(this.props.children, {
             ...this.props.children.props,
             setNavigations: this.setNavigations,

examples/components/Doc.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import makeMarkdownRenderer from './MdRenderer';
-import {flattenTree, filterTree} from '../../src/utils/helper';
+import {flattenTree, filterTree, mapTree} from '../../src/utils/helper';
 
 export const docs = [
   {
     // prefix: ({classnames: cx}) => <li className={cx('AsideNav-divider')} />,
-    label: '开始',
+    label: '📌 开始',
     children: [
       {
         label: '介绍',
@@ -18,15 +18,15 @@ export const docs = [
 
       {
         label: '快速开始',
-        path: '/docs/start/usage',
+        path: '/docs/start/getting-started',
         getComponent: (location, cb) =>
-          require(['../../docs/start/usage.md'], doc => {
+          require(['../../docs/start/getting-started.md'], doc => {
             cb(null, makeMarkdownRenderer(doc));
           })
       },
 
       {
-        label: '自定义组件',
+        label: '自定义',
         path: '/docs/start/custom',
         getComponent: (location, cb) =>
           require(['../../docs/start/custom.md'], doc => {
@@ -57,7 +57,7 @@ export const docs = [
   },
 
   {
-    label: '概念',
+    label: '💡 概念',
     children: [
       {
         label: '配置与组件',
@@ -127,7 +127,7 @@ export const docs = [
   },
 
   {
-    label: '类型',
+    label: '🎼 类型',
     children: [
       {
         label: 'SchemaNode',
@@ -149,7 +149,7 @@ export const docs = [
   },
 
   {
-    label: '组件',
+    label: '⚙ 组件',
     children: [
       {
         label: '组件介绍',
@@ -985,7 +985,17 @@ export default class Doc extends React.PureComponent {
   }
 
   setDocFooter() {
-    const flattenDocs = flattenTree(docs).filter(i => !!i.path);
+    const newDocs = mapTree(docs, doc => ({
+      ...doc,
+      children:
+        Array.isArray(doc.children) && doc.children.length
+          ? doc.children.map(item => ({
+              ...item,
+              group: doc.group || doc.label
+            }))
+          : null
+    }));
+    const flattenDocs = flattenTree(newDocs).filter(i => !!i.path);
     const docIndex = flattenDocs.findIndex(d => d.path === location.pathname);
     this.setState({
       prevDoc: flattenDocs[docIndex - 1],

examples/components/MdRenderer.tsx

@@ -184,8 +184,6 @@ export default function (doc) {
     }
 
     render() {
-      console.log('this.props', this.props);
-
       const {prevDoc, nextDoc} = this.props;
 
       return (

examples/components/SchemaRender.jsx

@@ -8,6 +8,7 @@ import LazyComponent from '../../src/components/LazyComponent';
 import {default as DrawerContainer} from '../../src/components/Drawer';
 import {Portal} from 'react-overlays';
 import {withRouter} from 'react-router';
+import copy from 'copy-to-clipboard';
 function loadEditor() {
   return new Promise(resolve =>
     require(['../../src/components/Editor'], component =>
@@ -30,6 +31,10 @@ export default function (schema) {
         this.setState({
           open: !this.state.open
         });
+      copyCode = () => {
+        copy(JSON.stringify(schema));
+        toast.success('页面配置JSON已复制到粘贴板');
+      };
       close = () =>
         this.setState({
           open: false
@@ -178,6 +183,7 @@ export default function (schema) {
         const ns = this.props.classPrefix;
         const showCode = this.props.showCode;
         return (
+          <>
             <div className="schema-wrapper">
               {showCode !== false ? (
                 <DrawerContainer
@@ -185,18 +191,40 @@ export default function (schema) {
                   size="lg"
                   onHide={this.close}
                   show={this.state.open}
+                  overlay={false}
+                  closeOnOutside={true}
                   position="right"
                 >
                   {this.state.open ? this.renderCode() : null}
                 </DrawerContainer>
               ) : null}
               {this.renderSchema()}
-            {showCode !== false ? (
-              <span onClick={this.toggleCode} className="view-code-btn">
-                查看配置 <i className="fa fa-code p-l-xs"></i>
-              </span>
-            ) : null}
             </div>
+            {showCode !== false ? (
+              // <div className="schema-toolbar-wrapper">
+              //   <div onClick={this.toggleCode}>
+              //     查看页面配置 <i className="fa fa-code p-l-xs"></i>
+              //   </div>
+              //   <div onClick={this.copyCode}>
+              //     复制页面配置 <i className="fa fa-copy p-l-xs"></i>
+              //   </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>
+              </div>
+            ) : null}
+          </>
         );
       }
     }

examples/style.scss

@@ -201,8 +201,8 @@ body {
 
 .Doc {
   .anchor {
-    padding-top: 110px;
+    padding-top: 100px;
-    margin-top: -110px;
+    margin-top: -100px;
   }
 
   a {
@@ -325,6 +325,10 @@ body {
 
       a {
         color: #666;
+        cursor: pointer;
+        &:hover {
+          color: #333;
+        }
       }
 
       &.is-active {
@@ -380,7 +384,7 @@ body {
   }
 
   &-footer {
-    margin: 60px 0 80px;
+    margin: 60px 40px 80px;
     padding-bottom: 25px;
     border-bottom: 2px solid #e0e8ef;
 
@@ -439,33 +443,8 @@ body {
   }
 
   > .schema-wrapper {
-    .view-code-btn {
+    flex: 1 auto;
-      position: absolute;
+    width: 0;
-      font-weight: bold;
-      right: -100px;
-      top: 112px;
-      color: #666;
-      cursor: pointer;
-
-      &::before {
-        position: absolute;
-        top: 0;
-        left: -21px;
-        bottom: 0;
-        content: ' ';
-        border-left: 1px solid #e8ebee;
-        width: 1px;
-      }
-
-      &:hover {
-        color: #333;
-      }
-
-      > i {
-        font-weight: bold;
-      }
-    }
-
     > .a-Page,
     > .cxd-Page,
     > .dark-Page {
@@ -482,6 +461,33 @@ body {
   }
 }
 
+.Backtop {
+  position: fixed;
+  right: 40px;
+  bottom: 40px;
+  width: 44px;
+  height: 44px;
+  text-align: center;
+  line-height: 44px;
+  border: 1px solid #e8ebee;
+  border-radius: 50%;
+  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
+    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  cursor: pointer;
+  color: #666;
+  font-size: 16px;
+  transition: all 0.3s ease-in-out;
+  opacity: 0;
+
+  &:hover {
+    color: #108cee;
+  }
+
+  &.visible {
+    opacity: 1;
+  }
+}
+
 @include media-breakpoint-up(lg) {
   .Doc {
     display: flex;