TODO: Route, Tree load properties

main.go

@@ -46,7 +46,7 @@ func login(ctx *gin.Context) {
 	}
 
 	ctx.JSON(http.StatusOK, gin.H{"message": "登录成功"})
-	ctx.Redirect(http.StatusSeeOther, "/worker")
+	// ctx.Redirect(http.StatusOK, "/worker")
 
 }
 

web/package-lock.json

@@ -6798,6 +6798,19 @@
       "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
       "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
     },
+    "history": {
+      "version": "4.10.1",
+      "resolved": "https://registry.npm.taobao.org/history/download/history-4.10.1.tgz",
+      "integrity": "sha1-MzcaZeOoOyZ0NOKz87G0xYqtTPM=",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "loose-envify": "^1.2.0",
+        "resolve-pathname": "^3.0.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0",
+        "value-equal": "^1.0.1"
+      }
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -9187,6 +9200,31 @@
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
       "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg=="
     },
+    "mini-create-react-context": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npm.taobao.org/mini-create-react-context/download/mini-create-react-context-0.3.2.tgz",
+      "integrity": "sha1-efxZjyg91iPajgiLBduM3aslAYk=",
+      "requires": {
+        "@babel/runtime": "^7.4.0",
+        "gud": "^1.0.0",
+        "tiny-warning": "^1.0.2"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.7.7",
+          "resolved": "https://registry.npm.taobao.org/@babel/runtime/download/@babel/runtime-7.7.7.tgz",
+          "integrity": "sha1-GUdpyo1td5DsI2Ba+e4+QqCqec8=",
+          "requires": {
+            "regenerator-runtime": "^0.13.2"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.3",
+          "resolved": "https://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.13.3.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fregenerator-runtime%2Fdownload%2Fregenerator-runtime-0.13.3.tgz",
+          "integrity": "sha1-fPanfY9cb2Drc8X8GVWyzrAea/U="
+        }
+      }
+    },
     "mini-css-extract-plugin": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.8.0.tgz",
@@ -12135,6 +12173,52 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "react-router": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npm.taobao.org/react-router/download/react-router-5.1.2.tgz",
+      "integrity": "sha1-bqUdeJyzamvhul98DUjdnoF9NBg=",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "history": "^4.9.0",
+        "hoist-non-react-statics": "^3.1.0",
+        "loose-envify": "^1.3.1",
+        "mini-create-react-context": "^0.3.0",
+        "path-to-regexp": "^1.7.0",
+        "prop-types": "^15.6.2",
+        "react-is": "^16.6.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npm.taobao.org/isarray/download/isarray-0.0.1.tgz?cache=0&sync_timestamp=1562592096220&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fisarray%2Fdownload%2Fisarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+        },
+        "path-to-regexp": {
+          "version": "1.8.0",
+          "resolved": "https://registry.npm.taobao.org/path-to-regexp/download/path-to-regexp-1.8.0.tgz",
+          "integrity": "sha1-iHs7qdhDk+h6CgufTLdWGYtTVIo=",
+          "requires": {
+            "isarray": "0.0.1"
+          }
+        }
+      }
+    },
+    "react-router-dom": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npm.taobao.org/react-router-dom/download/react-router-dom-5.1.2.tgz",
+      "integrity": "sha1-BnAbg0NS9E03+7YxH4cPhMdrnBg=",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "history": "^4.9.0",
+        "loose-envify": "^1.3.1",
+        "prop-types": "^15.6.2",
+        "react-router": "5.1.2",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      }
+    },
     "react-scripts": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.3.0.tgz",
@@ -12537,6 +12621,11 @@
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
       "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g="
     },
+    "resolve-pathname": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npm.taobao.org/resolve-pathname/download/resolve-pathname-3.0.0.tgz",
+      "integrity": "sha1-mdAiJNPPJjaJvsuzk7xWAxMCXc0="
+    },
     "resolve-url": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -13919,6 +14008,16 @@
       "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
     },
+    "tiny-invariant": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npm.taobao.org/tiny-invariant/download/tiny-invariant-1.0.6.tgz",
+      "integrity": "sha1-s/mziDXjakHIQ6OwkHpaezdV3nM="
+    },
+    "tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npm.taobao.org/tiny-warning/download/tiny-warning-1.0.3.tgz?cache=0&sync_timestamp=1562634862962&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftiny-warning%2Fdownload%2Ftiny-warning-1.0.3.tgz",
+      "integrity": "sha1-lKMNtFPfTGQ9D9VmBg1gqHXYR1Q="
+    },
     "tinycolor2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz",
@@ -14353,6 +14452,11 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "value-equal": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npm.taobao.org/value-equal/download/value-equal-1.0.1.tgz",
+      "integrity": "sha1-Hgt5THNMXAyt4XnEN9NW2TGjTWw="
+    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",

web/package.json

@@ -13,6 +13,8 @@
     "react": "^16.12.0",
     "react-app-rewired": "^2.1.5",
     "react-dom": "^16.12.0",
+    "react-router": "^5.1.2",
+    "react-router-dom": "^5.1.2",
     "react-scripts": "3.3.0"
   },
   "scripts": {

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 %#@" title="parent 112312312321312313132131313131231" key="0-1">
-                    <TreeNode value="parent 1&%01&%050" title="parent 112312312321312313132131313131231-0" key="0-1-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;
@@ -45,6 +46,8 @@ class SiderConfig extends React.Component {
           <Header style={{ background: '#fff', padding: 0, }}>
 
             <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>
 
@@ -54,11 +57,11 @@ class SiderConfig extends React.Component {
               <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>
     );