初始化页面的整体布局

src/components/app/App.jsx

@@ -2,15 +2,16 @@ import React, {Component} from 'react';
 import Deploy from '../common/deploy/Deploy';
 import Schema from '../common/schema/Schema';
 import Graphql from "../common/graphql/Graphql";
-import {Layout, Menu, Input, Button, Spin} from 'antd';
+import {Layout, Menu, Input, Button, Spin,Breadcrumb, Icon } from 'antd';
 
 import '../common/graphql/index.css';
 import logo from '../../images/logo.png';
-
+import './index.css'
 import gql from "graphql-tag";
 import {Query} from "react-apollo";
 
-const {Header, Content} = Layout;
+const { SubMenu } = Menu;
+const { Header, Content, Sider } = Layout;
 
 
 class App extends Component {
@@ -23,9 +24,14 @@ class App extends Component {
       user: {
         nickname: '',
         avatar: ''
-      }
+      },
+        collapsed: false,
     };
   }
+    onCollapse = (collapsed) => {
+        console.log(collapsed);
+        this.setState({ collapsed });
+    };
 
   switchPage = (e) => {
     this.setState({
@@ -88,67 +94,135 @@ class App extends Component {
 
   render() {
     return (
-      <Layout style={{ height: '100%'}}>
-        <Header className="header">
-          <div className='logo'><img src={logo} alt="logo"/></div>
-          <Menu
-            onClick={this.switchPage}
-            selectedKeys={[this.state.current]}
-            mode="horizontal"
-            style={{lineHeight: '64px'}}
-            theme="dark"
-          >
-            <Menu.Item key="schema">
-              SCHEMA
-            </Menu.Item>
-            <Menu.Item key="config">
-              CONFIG
-            </Menu.Item>
-            <Menu.Item key="graphiql">
-              GRAPHIQL
-            </Menu.Item>
-          </Menu>
-          <div className='login'>
-            {
-              this.state.hasLogin ?
-                this.login(this.state.userID)
-                :
-                <div>
-                  <span style={{marginRight: 20}}>login:</span>
-                  <Input
-                    placeholder="id, eg: 'xy_1'"
-                    onChange={(e) => {
-                      // antd 获取不到 target，百度来的下面这句代码
-                      e.persist();
-                      this.setState({userID: e.target.value});
-                    }}
-                    onPressEnter={() => {
-                      this.setState({hasLogin: true})
-                    }}
-                    style={{width: 200}}
-                  />
-                </div>
-            }
-          </div>
-        </Header>
-        <Content style={{padding: '0 50px', height: '100%'}}>
-
-          <div>
-            {
-              (() => {
-                switch (this.state.current) {
-                  case 'schema':
-                    return <Schema userID={this.state.userID}/>;
-                  case 'config':
-                    return <Deploy />;
-                  default:
-                    return <Graphql />
+        <Layout style={{ minHeight: '100vh' }}>
+          <Header className="header" style={{ position: 'fixed', zIndex: 1, width: '100%' }}>
+            <div className="logo" />
+            <Menu
+                theme="dark"
+                mode="horizontal"
+                defaultSelectedKeys={['1']}
+                style={{ lineHeight: '64px' }}
+            >
+              <Menu.Item key="1">cloud function</Menu.Item>
+              <Menu.Item key="2">data storage</Menu.Item>
+              <Menu.Item key="3">data analysis</Menu.Item>
+              <Menu.Item key="4">monitor notification</Menu.Item>
+            </Menu>
+            <div className='login'>
+                {
+                    this.state.hasLogin ?
+                        this.login(this.state.userID)
+                        :
+                        <div>
+                          <span style={{marginRight: 20}}>login:</span>
+                          <Input
+                              placeholder="id, eg: 'xy_1'"
+                              onChange={(e) => {
+                                  // antd 获取不到 target，百度来的下面这句代码
+                                  e.persist();
+                                  this.setState({userID: e.target.value});
+                              }}
+                              onPressEnter={() => {
+                                  this.setState({hasLogin: true})
+                              }}
+                              style={{width: 200}}
+                          />
+                        </div>
                 }
-              })()
-            }
-          </div>
-        </Content>
-      </Layout>
+            </div>
+          </Header>
+
+          <Layout>
+            <Sider
+                width={200}
+                style={{ background: '#fff',marginTop:'64px'}}
+                collapsible
+                collapsed={this.state.collapsed}
+                onCollapse={this.onCollapse}
+            >
+              <Menu
+                  theme="dark"
+                  mode="inline"
+                  defaultSelectedKeys={['1']}
+                  defaultOpenKeys={['sub1']}
+                  style={{  borderRight: 0,overflow: 'auto',
+                      height: '100vh',
+                      left: '0',
+                      width: '200px',
+                      position: 'fixed'}}
+              >
+                <SubMenu
+                    key="sub1"
+                    title={<span><Icon type="appstore" theme="twoTone" /><span>trial case</span></span>}
+                >
+                  <Menu.Item key="1">e-commerce</Menu.Item>
+                  <Menu.Item key="2">keep accounts</Menu.Item>
+                  <Menu.Item key="3">appointment</Menu.Item>
+                </SubMenu>
+                <SubMenu key="sub2" title={<span><Icon type="cloud" theme="twoTone" /><span>Cloud Function</span></span>}>
+                  <Menu.Item key="4">option5</Menu.Item>
+                  <Menu.Item key="5">option6</Menu.Item>
+                  <Menu.Item key="6">option7</Menu.Item>
+                  <Menu.Item key="7">option8</Menu.Item>
+                </SubMenu>
+                <SubMenu key="sub3" title={<span><Icon type="user" theme="outlined" /><span>My create</span></span>}>
+                  <Menu.Item key="8">option9</Menu.Item>
+                  <Menu.Item key="9">option10</Menu.Item>
+                  <Menu.Item key="10">option11</Menu.Item>
+                  <Menu.Item key="11">option12</Menu.Item>
+                </SubMenu>
+              </Menu>
+            </Sider>
+
+            <Layout style={{marginTop: '64px' }}>
+                <Menu
+                    mode="horizontal"
+                    defaultSelectedKeys={['1']}
+                    style={{padding: '0 24px',position: 'fixed', width: '100%', zIndex: '1' }}
+                    onClick={this.switchPage}
+                    selectedKeys={[this.state.current]}
+                >
+                  <Menu.Item key="schema">schema</Menu.Item>
+                  <Menu.Item key="deploy">deploy</Menu.Item>
+                  <Menu.Item key="graphql">graphql</Menu.Item>
+                  <Menu.Item key="graphiql">graphiql</Menu.Item>
+                  <Menu.Item key="metabase">metabase</Menu.Item>
+                  <Menu.Item key="notification">notification</Menu.Item>
+                </Menu>
+
+                <Layout style={{ padding: '24px 24px'}}>
+                  {/*<Sider width={200} style={{ background: '#fff' }}>*/}
+                    {/*<Menu*/}
+                        {/*mode="inline"*/}
+                        {/*defaultSelectedKeys={['1']}*/}
+                        {/*defaultOpenKeys={['sub1']}*/}
+                        {/*style={{ height: '100%' }}*/}
+                    {/*>*/}
+                      {/*<Menu.Item key="1">Query</Menu.Item>*/}
+                      {/*<Menu.Item key="2">Mutation</Menu.Item>*/}
+                    {/*</Menu>*/}
+                  {/*</Sider>*/}
+                  <Content style={{ padding: '24px 24px', minHeight: 280, background: '#fff',marginTop: '48px'  }}>
+                    <div>
+                        {(() => {
+                            switch (this.state.current) {
+                                case 'schema':
+                                    return <Schema userID={this.state.userID}/>;
+                                case 'deploy':
+                                    return <Deploy />;
+                                case 'graphiql':
+                                    return <Graphql />;
+                                default:
+                                    return <Graphql />
+                            }
+                        })()}
+                    </div>
+                  </Content>
+                </Layout>
+
+            </Layout>
+          </Layout>
+        </Layout>
     );
   }
 }

src/components/app/index.css

@@ -0,0 +1,8 @@
+.logo {
+    width: 122px;
+    height: 31px;
+    background: rgba(255,255,255,.2);
+    /*background-image: url("../../images/logo.png");*/
+    margin: 16px 28px 16px 0;
+    float: left;
+}

src/components/common/schema/Schema.jsx

@@ -388,32 +388,33 @@ class ShowSchemaList extends Component {
                             );
                         else {
                             console.log('getttttttttt', data);
+                            console.log('gettttttttt', JSON.stringify(data.schemaData));
                             return (
                                 <div>
-                                    {
-                                        data.schema_by_props.map((schema) => {
-                                            return <div key={schema.schemaData.name} className='title' onClick={this.switchSchema(schema.schemaData.name)}>
-                                              <Row>
-                                                <Col span={20}>{schema.schemaData.name}</Col>
-                                                <Col span={4}>
-                                                  <Button onClick={() => this.setState({currentTable: 'add'})} type="primary"
-                                                          shape="circle" icon="plus" size='small'/>
-                                                  <DeleteSchemaButton schemaName={schema.schemaData.name} deleteSchema={this.deleteSchema}/>
-                                                </Col>
-                                              </Row>
+                                    {/*{*/}
+                                        {/*data.schema_by_props.map((schema) => {*/}
+                                            {/*return <div key={schema.schemaData.name} className='title' onClick={this.switchSchema(schema.schemaData.name)}>*/}
+                                              {/*<Row>*/}
+                                                {/*<Col span={20}>{schema.schemaData.name}</Col>*/}
+                                                {/*<Col span={4}>*/}
+                                                  {/*<Button onClick={() => this.setState({currentTable: 'add'})} type="primary"*/}
+                                                          {/*shape="circle" icon="plus" size='small'/>*/}
+                                                  {/*<DeleteSchemaButton schemaName={schema.schemaData.name} deleteSchema={this.deleteSchema}/>*/}
+                                                {/*</Col>*/}
+                                              {/*</Row>*/}
 
 
-                                                {
-                                                    schema.schemaData.tables.map((table) =>
-                                                        <p onClick={this.switchTable(table.name)} key={table.name} className='show'>
-                                                          <Icon type="ordered-list" theme="outlined"/> {table.name}
-                                                          <span className='remark'><i>   {table.remark}</i></span>
-                                                        </p>
-                                                    )
-                                                }
-                                            </div>
-                                        })
-                                    }
+                                                {/*{*/}
+                                                    {/*schema.schemaData.tables.map((table) =>*/}
+                                                        {/*<p onClick={this.switchTable(table.name)} key={table.name} className='show'>*/}
+                                                          {/*<Icon type="ordered-list" theme="outlined"/> {table.name}*/}
+                                                          {/*<span className='remark'><i>   {table.remark}</i></span>*/}
+                                                        {/*</p>*/}
+                                                    {/*)*/}
+                                                {/*}*/}
+                                            {/*</div>*/}
+                                        {/*})*/}
+                                    {/*}*/}
                                 </div>
                             );
                         }