修改导航

src/components/app/App.jsx

@@ -13,15 +13,13 @@ import {Query} from "react-apollo";
 const { SubMenu } = Menu;
 const { Header, Content, Sider } = Layout;
 
-
 class App extends Component {
     constructor() {
         super();
         this.state = {
-            current: 'schema',
             menuLevel1:"cloud-function",
             menuLevel2:"schema",
-            sideBar:"trial-case",
+            sideBar:"e-commerce",
             userID: '',
             hasLogin: false,
             user: {
@@ -29,6 +27,7 @@ class App extends Component {
                 avatar: ''
             },
             collapsed: false,
+            inlineCollapsed:false
         };
     }
     onCollapse = (collapsed) => {
@@ -36,12 +35,6 @@ class App extends Component {
         this.setState({ collapsed });
     };
 
-    switchPage = (e) => {
-        this.setState({
-            current: e.key,
-        });
-    };
-
     switchMenu = (menuName,e) => {
         console.log('menuName',menuName,'e',e);
         this.setState({
@@ -110,7 +103,7 @@ class App extends Component {
                 <Menu
                     theme="dark"
                     mode="horizontal"
-                    defaultSelectedKeys={['Cloud Function']}
+                    defaultSelectedKeys={['cloud-function']}
                     style={{ lineHeight: '64px' }}
                     onClick={(e)=>this.switchMenu('menuLevel1',e)}
                 >
@@ -119,28 +112,28 @@ class App extends Component {
                   <Menu.Item key="data-analysis">Data Analysis</Menu.Item>
                   <Menu.Item key="monitor-notification">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>
+                {/*<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>
 
               <Layout>
@@ -154,20 +147,24 @@ class App extends Component {
                   <Menu
                       theme="dark"
                       mode="inline"
-                      defaultSelectedKeys={['1']}
-                      defaultOpenKeys={['sub1']}
+                      inlineCollapsed={this.state.inlineCollapsed}
+                      defaultSelectedKeys={['e-commerce']}
+                      defaultOpenKeys={['trial-case']}
+                      // openKeys={['cloud-function']}
                       onClick={(e)=>this.switchMenu('sideBar',e)}
                       selectedKeys={[this.state.sideBar]}
-                      style={{  borderRight: 0,overflow: 'auto',
+                      style={{
+                          borderRight: 0,
+                          overflow: 'auto',
                           height: '100vh',
                           left: '0',
                           width: '200px',
                           position: 'fixed'}}
                   >
                     <SubMenu key="trial-case" 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>
+                      <Menu.Item key="e-commerce">e-commerce</Menu.Item>
+                      <Menu.Item key="keep accounts">keep accounts</Menu.Item>
+                      <Menu.Item key="appointment">appointment</Menu.Item>
                     </SubMenu>
                       {(() => {
                           switch (this.state.menuLevel1) {
@@ -221,9 +218,6 @@ class App extends Component {
                       })()}
                     <SubMenu key="my-create" 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>
@@ -231,10 +225,10 @@ class App extends Component {
                 <Layout style={{marginTop: '64px' }}>
                   <Menu
                       mode="horizontal"
-                      defaultSelectedKeys={['1']}
+                      defaultSelectedKeys={['schema']}
                       style={{padding: '0 24px',position: 'fixed', width: '100%', zIndex: '1' }}
-                      onClick={this.switchPage}
-                      selectedKeys={[this.state.current]}
+                      onClick={(e)=>this.switchMenu('menuLevel2',e)}
+                      selectedKeys={[this.state.menuLevel2]}
                   >
                     <Menu.Item key="schema">schema</Menu.Item>
                     <Menu.Item key="deploy">deploy</Menu.Item>
@@ -259,7 +253,7 @@ class App extends Component {
                     <Content style={{ padding: '24px', minHeight: 280, background: '#fff',marginTop: '48px'  }}>
                       <div>
                           {(() => {
-                              switch (this.state.current) {
+                              switch (this.state.menuLevel2) {
                                   case 'schema':
                                       return <Schema userID={this.state.userID}/>;
                                   case 'deploy':