添加各初始页面

src/components/app/index.css

@@ -1,14 +1,14 @@
 .logo-wrapper {
     width: 122px;
     height: 31px;
-    /*background: rgba(255,255,255,.2);*/
     margin: 16px 28px 16px 0;
     float: left;
 }
 
 .logo {
     background-image: url("../../images/logo.png");
-    background-repeat:no-repeat; background-size:100% 100%;
+    background-repeat:no-repeat;
+    background-size:100% 100%;
 }
 
 .change-locale {

src/components/cloudFunction/CloudFunction.jsx

@@ -27,7 +27,7 @@ class CloudFunction extends Component {
             <div>
                 <Menu
                     mode="horizontal"
-                    defaultSelectedKeys={['schema']}
+                    defaultSelectedKeys={['deploy']}
                     style={{padding: '0 24px', position: 'fixed', width: '100%', zIndex: '1'}}
                     onClick={(e) => this.switchMenu('menuLevel2', e)}
                     selectedKeys={[this.state.menuLevel2]}

src/components/common/caseMetabase/CaseMetabase.jsx

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

src/components/common/caseNotification/CaseNotification.jsx

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

src/components/dataAnalysis/DataAnalysis.jsx

@@ -1,9 +1,54 @@
 import React, {Component} from 'react';
 
-export default function DataAnalysis() {
-    return (
-        <div>
-            DataAnalysis
-        </div>
-    )
-}
+import {Layout, Menu} from 'antd';
+import Metabase from "./metabase/Metabase";
+
+
+const { Content } = Layout;
+
+class DataAnalysis extends Component {
+    constructor() {
+        super();
+        this.state = {
+            menuLevel2: "metabase",
+        }
+    }
+
+    switchMenu = (menuName, e) => {
+        console.log('menuName', menuName, 'e', e);
+        this.setState({
+            [menuName]: e.key,
+        });
+    };
+
+    render() {
+        return (
+            <div>
+                <Menu
+                    mode="horizontal"
+                    defaultSelectedKeys={['metabase']}
+                    style={{padding: '0 24px', position: 'fixed', width: '100%', zIndex: '1'}}
+                    onClick={(e) => this.switchMenu('menuLevel2', e)}
+                    selectedKeys={[this.state.menuLevel2]}
+                >
+                    <Menu.Item key="metabase">metabase</Menu.Item>
+                </Menu>
+
+                <Layout style={{ padding: '24px', zIndex: '0'}}>
+                    <Content style={{ padding: '24px', minHeight: 280, background: '#fff',marginTop: '48px'  }}>
+                        {(() => {
+                            switch (this.state.menuLevel2) {
+                                case 'metabase':
+                                    return <Metabase />;
+                                default:
+                                    return <Metabase />
+                            }
+                        })()}
+                    </Content>
+                </Layout>
+            </div>
+        )
+    }
+}
+
+export default DataAnalysis;

src/components/common/metabase/Metabase.jsx → src/components/dataAnalysis/metabase/Metabase.jsx

@@ -1,4 +1,5 @@
 import React, {Component} from 'react';
+
 class Metabase extends Component {
     constructor() {
         super();
@@ -7,7 +8,7 @@ class Metabase extends Component {
     render() {
         return (
             <div>
-                metabase
+                Metabase
             </div>
         )
     }

src/components/dataStorage/DataStorage.jsx

@@ -1,9 +1,58 @@
 import React, {Component} from 'react';
 
-export default function DataStorge() {
-    return (
-        <div>
-            DataStorge
-        </div>
-    )
-}
+import {Layout, Menu} from 'antd';
+
+import SchemaCreate from "./schemaCreate/SchemaCreate";
+import DatabaseSetting from "./databaseSetting/DatabaseSetting";
+
+const { Content } = Layout;
+
+class DataStorage extends Component {
+    constructor() {
+        super();
+        this.state = {
+            menuLevel2: "schema-creations",
+        }
+    }
+
+    switchMenu = (menuName, e) => {
+        console.log('menuName', menuName, 'e', e);
+        this.setState({
+            [menuName]: e.key,
+        });
+    };
+
+    render() {
+        return (
+            <div>
+                <Menu
+                    mode="horizontal"
+                    defaultSelectedKeys={['schema-creations']}
+                    style={{padding: '0 24px', position: 'fixed', width: '100%', zIndex: '1'}}
+                    onClick={(e) => this.switchMenu('menuLevel2', e)}
+                    selectedKeys={[this.state.menuLevel2]}
+                >
+                    <Menu.Item key="schema-creations">schema creations</Menu.Item>
+                    <Menu.Item key="database-settings">database settings</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-creations':
+                                    return <SchemaCreate />;
+                                case 'database-settings':
+                                    return <DatabaseSetting />;
+                                default:
+                                    return <SchemaCreate />
+                            }
+                        })()}
+                    </Content>
+                </Layout>
+            </div>
+        )
+    }
+}
+
+export default DataStorage;

src/components/dataStorage/databaseSetting/DatabaseSetting.jsx

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

src/components/dataStorage/schemaCreate/SchemaCreate.jsx

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

src/components/monitorNotify/MonitorNotify.jsx

@@ -1,9 +1,62 @@
 import React, {Component} from 'react';
 
-export default function MonitorNotification() {
-    return (
-        <div>
-            MonitorNotification
-        </div>
-    )
-}
+import {Layout, Menu} from 'antd';
+import CaseNotification from "../common/caseNotification/CaseNotification";
+import Notification from "./notification/Notification";
+import GraphqlTrigger from "./graphqlTrigger/GraphqlTrigger";
+import StockSignal from "./stockSignal/StockSignal";
+
+const { Content } = Layout;
+
+class MonitorNotify extends Component {
+    constructor() {
+        super();
+        this.state = {
+            menuLevel2: "notification",
+        }
+    }
+
+    switchMenu = (menuName, e) => {
+        console.log('menuName', menuName, 'e', e);
+        this.setState({
+            [menuName]: e.key,
+        });
+    };
+
+    render() {
+        return (
+            <div>
+                <Menu
+                    mode="horizontal"
+                    defaultSelectedKeys={['notification']}
+                    style={{padding: '0 24px', position: 'fixed', width: '100%', zIndex: '1'}}
+                    onClick={(e) => this.switchMenu('menuLevel2', e)}
+                    selectedKeys={[this.state.menuLevel2]}
+                >
+                    <Menu.Item key="notification">notification</Menu.Item>
+                    <Menu.Item key="graphql-trigger">graphql trigger</Menu.Item>
+                    <Menu.Item key="stock-signal">stock signal</Menu.Item>
+                </Menu>
+
+                <Layout style={{ padding: '24px', zIndex: '0'}}>
+                    <Content style={{ padding: '24px', minHeight: 280, background: '#fff',marginTop: '48px'  }}>
+                        {(() => {
+                            switch (this.state.menuLevel2) {
+                                case 'notification':
+                                    return <Notification />;
+                                case 'graphql-trigger':
+                                    return <GraphqlTrigger />;
+                                case 'stock-signal':
+                                    return <StockSignal />;
+                                default:
+                                    return <Notification />
+                            }
+                        })()}
+                    </Content>
+                </Layout>
+            </div>
+        )
+    }
+}
+
+export default MonitorNotify;

src/components/monitorNotify/graphqlTrigger/GraphqlTrigger.jsx

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

src/components/common/notification/Notification.jsx → src/components/monitorNotify/notification/Notification.jsx

@@ -1,4 +1,5 @@
 import React, {Component} from 'react';
+
 class Notification extends Component {
     constructor() {
         super();
@@ -7,7 +8,7 @@ class Notification extends Component {
     render() {
         return (
             <div>
-                notification
+                Notification
             </div>
         )
     }

src/components/monitorNotify/stockSignal/StockSignal.jsx

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

src/components/trialCase/TrialCase.jsx

@@ -5,8 +5,8 @@ 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 CaseNotification from "../common/caseNotification/CaseNotification";
+import CaseMetabase from "../common/caseMetabase/CaseMetabase";
 
 const { Content } = Layout;
 
@@ -56,9 +56,9 @@ class TrialCase extends Component {
                                 case 'graphiql':
                                     return <Graphql />;
                                 case 'metabase':
-                                    return <Metabase />;
+                                    return <CaseMetabase />;
                                 case 'notification':
-                                    return <Notification />;
+                                    return <CaseNotification />;
                                 default:
                                     return <Graphql />
                             }