修改tab页面

src/components/app/App.jsx

@@ -17,6 +17,7 @@ import zhCN from 'antd/lib/locale-provider/zh_CN';
 import logo from '../../images/logo.png';
 import '../common/graphql/index.css';
 import './index.css'
+import TrialCase from "../trialCase/TrialCase";
 
 const { SubMenu } = Menu;
 const { Header, Sider } = Layout;
@@ -130,7 +131,7 @@ class App extends Component {
                             style={{lineHeight: '64px'}}
                             onClick={(e) => this.switchMenu('menuLevel1', e)}
                         >
-                            <Menu.Item key="cloud-function"><Link to="/">Cloud Function</Link></Menu.Item>
+                            <Menu.Item key="cloud-function"><Link to="/cloud-function">Cloud Function</Link></Menu.Item>
                             <Menu.Item key="data-storage"><Link to="/data-storage/">Data Storage</Link></Menu.Item>
                             <Menu.Item key="data-analysis"><Link to="/data-analysis/">Data Analysis</Link></Menu.Item>
                             <Menu.Item key="monitor-notification"><Link to="/monitor-notification/">Monitor Notification</Link></Menu.Item>
@@ -264,7 +265,8 @@ class App extends Component {
 
                     <Layout style={{marginTop: '64px', zIndex: '0'}}>
                         <Switch>
-                            <Route path="/" exact component={CloudFunction}/>
+                            <Route path="/" exact component={TrialCase}/>
+                            <Route path="/cloud-function" component={CloudFunction}/>
                             <Route path="/data-storage/" component={DataStorage}/>
                             <Route path="/data-analysis/" component={DataAnalysis}/>
                             <Route path="/monitor-notification/" component={MonitorNotify}/>

src/components/cloudFunction/CloudFunction.jsx

@@ -1,21 +1,17 @@
 import React, {Component} from 'react';
-import GenerateJs from "../common/generateJs/GenerateJs";
-import {Layout, Menu, LocaleProvider  } from 'antd';
+
+import {Layout, Menu  } from 'antd';
 
 import Deploy from '../common/deploy/Deploy';
-import Schema from '../common/schema/Schema';
-import Graphql from "../common/graphql/Graphql";
-import Notification from "../common/notification/Notification";
-import Metabase from "../common/metabase/Metabase";
+import Api from "./api/Api";
 
-const { SubMenu } = Menu;
 const { Content } = Layout;
 
 class CloudFunction extends Component {
     constructor() {
         super();
         this.state = {
-            menuLevel2: "schema",
+            menuLevel2: "deploy",
         }
     }
 
@@ -36,32 +32,20 @@ class CloudFunction extends Component {
                     onClick={(e) => this.switchMenu('menuLevel2', e)}
                     selectedKeys={[this.state.menuLevel2]}
                 >
-                    <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.Item key="api">API</Menu.Item>
                 </Menu>
 
                 <Layout style={{ padding: '24px', zIndex: '0'}}>
                     <Content style={{ padding: '24px', minHeight: 280, background: '#fff',marginTop: '48px'  }}>
                         {(() => {
                             switch (this.state.menuLevel2) {
-                                case 'schema':
-                                    return <Schema userID={this.state.userID}/>;
                                 case 'deploy':
                                     return <Deploy />;
-                                case 'graphql':
-                                    return <GenerateJs />;
-                                case 'graphiql':
-                                    return <Graphql />;
-                                case 'metabase':
-                                    return <Metabase />;
-                                case 'notification':
-                                    return <Notification />;
+                                case 'api':
+                                    return <Api />;
                                 default:
-                                    return <Graphql />
+                                    return <Deploy />
                             }
                         })()}
                     </Content>

src/components/cloudFunction/api/Api.jsx

@@ -0,0 +1,17 @@
+import React, {Component} from 'react';
+
+class Api extends Component {
+    constructor() {
+        super();
+    }
+
+    render() {
+        return (
+            <div>
+                api URL
+            </div>
+        )
+    }
+}
+
+export default Api;

src/components/trialCase/TrialCase.jsx

@@ -0,0 +1,73 @@
+import React, {Component} from 'react';
+import GenerateJs from "../common/generateJs/GenerateJs";
+import {Layout, Menu  } from 'antd';
+
+import Deploy from '../common/deploy/Deploy';
+import Schema from '../common/schema/Schema';
+import Graphql from "../common/graphql/Graphql";
+import Notification from "../common/notification/Notification";
+import Metabase from "../common/metabase/Metabase";
+
+const { Content } = Layout;
+
+class TrialCase extends Component {
+    constructor() {
+        super();
+        this.state = {
+            menuLevel2: "schema",
+        }
+    }
+
+    switchMenu = (menuName, e) => {
+        console.log('menuName', menuName, 'e', e);
+        this.setState({
+            [menuName]: e.key,
+        });
+    };
+
+    render() {
+        return (
+            <div>
+                <Menu
+                    mode="horizontal"
+                    defaultSelectedKeys={['schema']}
+                    style={{padding: '0 24px', position: 'fixed', width: '100%', zIndex: '1'}}
+                    onClick={(e) => this.switchMenu('menuLevel2', e)}
+                    selectedKeys={[this.state.menuLevel2]}
+                >
+                    <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', zIndex: '0'}}>
+                    <Content style={{ padding: '24px', minHeight: 280, background: '#fff',marginTop: '48px'  }}>
+                        {(() => {
+                            switch (this.state.menuLevel2) {
+                                case 'schema':
+                                    return <Schema userID={this.state.userID}/>;
+                                case 'deploy':
+                                    return <Deploy />;
+                                case 'graphql':
+                                    return <GenerateJs />;
+                                case 'graphiql':
+                                    return <Graphql />;
+                                case 'metabase':
+                                    return <Metabase />;
+                                case 'notification':
+                                    return <Notification />;
+                                default:
+                                    return <Graphql />
+                            }
+                        })()}
+                    </Content>
+                </Layout>
+            </div>
+        )
+    }
+}
+
+export default TrialCase;