规划导航栏 规划系统管理界面 配置路由

src/components/admin/admin.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { Tabs } from 'antd'
+import UserManagement from './userManagement';
+import UserGroupManagement from './userGroupManagement';
+const { TabPane } = Tabs
+
+class Admin extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+
+        }
+    };
+    render() {
+        return (      
+            <Tabs 
+                className='admin-tabs'
+                type="card"
+                defaultActiveKey="1"
+            >
+                <TabPane tab="用户管理" key="1" >
+                    <UserManagement/>
+                </TabPane>
+                <TabPane tab="用户组管理" key="2" >
+                    <UserGroupManagement />
+                </TabPane>
+            </Tabs>
+        )
+
+
+    }
+}
+
+export default Admin

src/components/admin/userGroupManagement.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+class UserGroupManagement extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+
+        }
+    }
+
+    render() {
+        return (
+            <div>用户组管理</div>
+        );
+    }
+}
+
+export default UserGroupManagement

src/components/admin/userManagement.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+class UserManagement extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+
+        }
+    }
+
+    render() {
+        return (
+            <div>用户管理</div>
+        );
+    }
+}
+
+export default UserManagement

src/components/common/navigator.jsx

@@ -1,16 +1,30 @@
 import React from 'react'
-import { Menu, Icon } from 'antd'
+import { Menu, Icon, Avatar, Dropdown } from 'antd'
 import { Link } from 'react-router-dom'
 import { connect } from 'dva'
 import '../../models/main'
 import './navigator.less'
 
+const userMenu = (
+    <Menu>
+        <Menu.Item key="0">
+            <span>账号信息</span>
+        </Menu.Item>
+        <Menu.Item key="1">
+            <Link to='/admin'><Icon type="setting" />系统管理</Link>
+        </Menu.Item>
+        <Menu.Divider />
+        <Menu.Item key="3">注销</Menu.Item>
+    </Menu>
+);
+
 class Navigator extends React.Component {
     constructor(props) {
         super(props)
         this.state = {
         }
     };
+    
 
     render() {
 
@@ -43,7 +57,13 @@ class Navigator extends React.Component {
                 </Menu>
             </div>
             <div className='navigator-right'>
-                <div></div>
+                <Dropdown overlay={userMenu} trigger={['click']}>
+                    <div>
+                        <Avatar size={64} icon="user" />
+                        <span> User Name </span>
+                    
+                    </div>
+                </Dropdown>
             </div>
         </div>
     }

src/routes/mainLayout.js

@@ -10,6 +10,7 @@ import Dashboard from '../components/dashboard/dashboard'
 import Chart from '../components/chart/list'
 import './mainLayout.less';
 import Demo from '../demo';
+import Admin from '../components/admin/admin';
 const { Header, Content } = Layout
 
 const MainLayout = (history) => {
@@ -27,6 +28,7 @@ const MainLayout = (history) => {
                     <Route sensitive path='/datasource' component={DataSource}/>
                     <Route sensitive path='/dashboard' component={Dashboard} />
                     <Route sensitive path='/chart' component={Chart} />
+                    <Route sensitive path='/admin' component={Admin} />
                     <Route path='/' component={Welcome}/>
                 </Switch>
             </Content>

src/routes/router.js

@@ -23,37 +23,38 @@ if (!window.localStorage.getItem("isAuthenticated")) {
 }
 
 function RouterConfig({ history }) {
-  return (
-    <LocaleProvider locale={zhCN}>
-      <Router history={history}>
-        <Switch>
-          <Route sensitive path='/login' component={Login}/>
-          <Route sensitive path='/register' component={Register}/>
-          <PrivateRoute sensitive path='/chart/:code' component={ChartDesigner}/>
-          <PrivateRoute sensitive path='/dashboard/:id/' component={DashboardDesigner}/>
-          <PrivateRoute path='/' component={MainLayout}/>
-        </Switch>
-      </Router>
-    </LocaleProvider>
-  );
+    return (
+        <LocaleProvider locale={zhCN}>
+            <Router history={history}>
+                <Switch>
+                    <Route sensitive path='/login' component={Login} />
+                    <Route sensitive path='/register' component={Register} />
+                    <Route sensitive path='/demo' component={Demo} />
+                    <PrivateRoute sensitive path='/chart/:code' component={ChartDesigner} />
+                    <PrivateRoute sensitive path='/dashboard/:id/' component={DashboardDesigner} />
+                    <PrivateRoute path='/' component={MainLayout} />
+                </Switch>
+            </Router>
+        </LocaleProvider>
+    );
 }
 
 export default RouterConfig;
 
 const PrivateRoute = ({ component: Component, ...rest }) => (
-  <Route
-      {...rest}
-      render={props =>
-          (window.localStorage.getItem("isAuthenticated") === "true"? true: false)  ? (
-              <Component {...props} />
-          ) : (
-                  <Redirect
-                      to={{
-                          pathname: "/login",
-                          state: { from: props.location }
-                      }}
-                  />
-              )
-      }
-  />
+    <Route
+        {...rest}
+        render={props =>
+            (window.localStorage.getItem("isAuthenticated") === "true" ? true : false) ? (
+                <Component {...props} />
+            ) : (
+                    <Redirect
+                        to={{
+                            pathname: "/login",
+                            state: { from: props.location }
+                        }}
+                    />
+                )
+        }
+    />
 );