TODO: Route, Tree load properties

web/src/App.js

@@ -11,7 +11,7 @@ const { Option } = Select;
 
 const App = () => (
 
-    <Login ></Login>
+    <SiderConfig ></SiderConfig>
 
 );
 

web/src/index.js

@@ -1,12 +1,27 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+
+import { Router, Route } from 'react-router';
 import './index.css';
 import App from './App';
-import Sider from './siderConfig.js';
+import SiderConfig from './siderConfig.js';
 import * as serviceWorker from './serviceWorker';
+import Login from './login';
 
 
-ReactDOM.render(<App />, document.getElementById('root'));
+// const routing = (
+    
+//     // <Router history={hashHistory}>
+        
+      
+//     //     <Route path="/worker/config" component={SiderConfig} />
+//     //     <Route path="/worker/login" component={Login} />
+//     //     <Route exact path="/" component={App} />
+      
+//     // </Router>
+//   )
+
+ReactDOM.render(<App></App>, document.getElementById('root'));
 
 
 // If you want your app to work offline and load faster, you can change

web/src/login.css

@@ -3,6 +3,6 @@
   }
 
 .login-button {
-    margin-top: 40px;
+    margin-top: 10px;
     width: 120px;
   }

web/src/login.js

@@ -1,10 +1,12 @@
 import React from 'react';
-import Route from 'react-route';
+import ReactDom from 'react-dom';
 import axios from 'axios';
 import './login.css';
 import App from './App';
 import { Row, Col, Input, Layout, Button, Icon, Tooltip } from 'antd';
 import Title from 'antd/lib/typography/Title';
+import { Route } from 'react-router';
+import SiderConfig from './siderConfig';
 
 class Login extends React.Component {
 
@@ -17,7 +19,9 @@ class Login extends React.Component {
         form.append("pwd", pwd);
         axios.post("/api/login", form).then(value => {
             console.log(value);
-            return <Route path='//' component={App} />
+            ReactDom.render(<SiderConfig></SiderConfig>, document.getElementById('root'))
+            return    
+             
         });
     }
 

web/src/namespaceSelect.js

@@ -11,7 +11,7 @@ class NamespaceSelect extends React.Component {
 
     onChange = (value) => {
         console.log(value);
-        if (!value.match('\x01\x05')) {
+        if (!value.match('%#@')) {
             this.setState({ value });
         }
 
@@ -32,8 +32,8 @@ class NamespaceSelect extends React.Component {
                 treeDefaultExpandAll
                 onChange={this.onChange}
             >
-                <TreeNode value="parent %01%05" title="parent 112312312321312313132131313131231" key="0-1">
-                    <TreeNode value="parent 1&%01&%050" title="parent 112312312321312313132131313131231-0" key="0-1-1">
+                <TreeNode value="parent %#@" title="parent 112312312321312313132131313131231" key="0-1">
+                    <TreeNode value="parent 1%#@0" title="parent 112312312321312313132131313131231-0" key="0-1-1">
                         <TreeNode value="leaf1" title="my leaf" key="random" />
                         <TreeNode value="leaf2" title="your leaf" key="random1" />
                     </TreeNode>

web/src/siderConfig.js

@@ -1,7 +1,8 @@
 import React from 'react';
-import { Layout, Menu, Breadcrumb, Icon, Button, Row, Col } from 'antd';
+import { Layout, Menu, Breadcrumb, Icon, Button, Row, Col, Tag } from 'antd';
 import { Input } from 'antd';
 import NamespaceSelect from './namespaceSelect';
+import Text from 'antd/lib/typography/Text';
 
 const { TextArea } = Input;
 const { Header, Content, Footer, Sider } = Layout;
@@ -16,23 +17,23 @@ class SiderConfig extends React.Component {
     console.log(collapsed);
     this.setState({ collapsed });
   };
-  
+
   render() {
     return (
       <Layout style={{ minHeight: '100vh' }}>
-        <Sider  collapsed={this.state.collapsed} onCollapse={this.onCollapse}>
+        <Sider collapsed={this.state.collapsed} onCollapse={this.onCollapse}>
           <div className="logo" />
           <Menu theme="dark" defaultOpenKeys={['namespace']} defaultSelectedKeys={['namespace']} mode="inline"  >
 
-            <SubMenu 
-            collapsed="true"
-            key="namespace"
-            title={
-              <span>
-                <Icon type="team" />
-                Namespace
+            <SubMenu
+              collapsed="true"
+              key="namespace"
+              title={
+                <span>
+                  <Icon type="team" />
+                  Namespace
               </span>
-            }>
+              }>
               <NamespaceSelect>
 
               </NamespaceSelect>
@@ -43,22 +44,24 @@ class SiderConfig extends React.Component {
         </Sider>
         <Layout>
           <Header style={{ background: '#fff', padding: 0, }}>
-            
-          <Row type="flex" justify="end">
-              <Col span={4}><Button type="primary" style={{width: '100px',}}>退出</Button></Col>
-          </Row>
-            
+
+            <Row type="flex" justify="end">
+
+              <Col span={4}> <Text  style={{fontSize: 16, color: "#f37b1d"}}>用户:</Text> <Text style={{fontSize: 16}}>黄思敏</Text>  </Col>
+              <Col span={4}><Button type="primary" style={{ width: '100px', }}>退出</Button></Col>
+            </Row>
+
           </Header >
           <Content style={{ margin: '0 16px' }}>
             <Breadcrumb style={{ margin: '8px 0' }}>
               <Breadcrumb.Item>User</Breadcrumb.Item>
               <Breadcrumb.Item>Bill</Breadcrumb.Item>
             </Breadcrumb>
-            <TextArea style={{ minHeight: '100%' }}>
+            <TextArea style={{ minHeight: '90vh' }}>
 
             </TextArea>
           </Content>
-          <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
+
         </Layout>
       </Layout>
     );