目录结构

src/contact/app.js

@@ -1,9 +0,0 @@
-import React from 'react';
-
-function App() {
-  return (
-    <div className="App">Hello contact react!!!!</div>
-  );
-}
-
-export default App;

src/contact/index.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './App';
+import Contact from './contact';
 
 //import css from '../../public/css/vendors.bundle.css';
 // require('../public/css/vendors.bundle.css');
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(<Contact />, document.getElementById('root'));

src/workbench/Workbench.js

@@ -1,30 +1,66 @@
 import React, { Component } from 'react';
 import { Provider } from 'react-redux';
-import Submenu from './submenu';
+import { BrowserRouter, Route,Link } from 'react-router-dom';
 import store from './store';
 
-//import { Redirect } from 'react-router-dom';
-// if(!login){
+// import '../app.css';
 
-// }else{
-//   return <Redirect to='/'/>
-// }
-
-
-import '../app.css';
-
-class App extends Component {
+class WorkBench extends Component {
   render() {
-    //console.log(this.props.store);
     return (
       <Provider store={store}>
-        <div>
-          <Submenu />
-          <div className="App">Hello workbench2323 react!!!!</div>
-        </div>
+         
+         <BrowserRouter>
+          <aside className="page-sidebar">
+            <div className="page-logo">
+              <a href="#modal-shortcut" className="page-logo-link press-scale-down d-flex align-items-center position-relative" data-toggle="modal">
+                <div className="icon-stack fa-2x">
+                  <i className="base base-7 icon-stack-3x opacity-100 color-danger-900 "></i>
+                  <i className="base base-4 icon-stack-2x opacity-100 color-danger-600 "></i>
+                  <i className="fal fa-box icon-stack-1x opacity-100 color-white"></i>
+                </div>
+                <span className="page-logo-text mr-1">工作台</span>
+                <span className="position-absolute text-white opacity-50 small pos-top pos-right mr-2 mt-n2"></span>
+                <i className="ni ni-my-apps d-inline-block ml-1 fs-lg color-primary-300"></i>
+              </a>
+            </div>
+            <nav id="js-primary-nav" className="primary-nav" role="navigation">
+            
+              <ul id="js-nav-menu" className="nav-menu">
+                <li className="active open">
+                  <a href="#" title="软件锁" data-filter-tags="软件锁" className="waves-effect waves-themed">
+                    <i className="fal fa-magic "></i>
+                    <span className="nav-link-text">软件锁</span>
+                  </a>
+                  <ul>
+                    <li className="active">
+                    
+                      <Link to='/product'>公共锁库</Link>
+                    </li>
+                    <li>
+                   
+                      <Link to='/product/lockStatistics'>使用统计</Link>
+                    </li>
+                  </ul>
+                
+                </li>
+                
+              </ul>
+              
+            </nav>
+            
+          </aside>
+          <div  id="content">
+               
+                {/* <Route path='/product' exact component={Lockstore} ></Route>
+                <Route path='/product/lockStatistics' exact render={()=><div>使用统计</div>} ></Route> */}
+               
+          </div>
+            </BrowserRouter>
+        
       </Provider>
     );
   }
 }
 
-export default App;
+export default WorkBench;

src/workbench/store/reducer.js

@@ -1,5 +1,5 @@
 import { combineReducers } from 'redux-immutable';
-import { reducer as submenuReducer } from '../submenu/store';
+import { reducer as submenuReducer } from '../lockStore/store';
 
 const reducer = combineReducers({
     submenu: submenuReducer

src/workbench/submenu/index.js

@@ -1,178 +0,0 @@
-//import React from 'react';
-// import React, { Component } from 'react';
-import React, { PureComponent } from 'react';
-import { connect } from 'react-redux';
-import { BrowserRouter, Route,Link } from 'react-router-dom';
-// import { CSSTransition } from 'react-transition-group';
-import { actionCreators } from './store';
-
-// const Submenu = (props) => {
-//     return (
-//         <div>
-//             <input onFocus={props.handleInputFocus} />
-//             {props.menu}</div>
-//     )
-
-// }
-
-/**
- * 可替换成无状态组件
- */
-
-
-class Submenu extends PureComponent {
-
-    
-
-    getListArea() {
-        const { list, menu } = this.props;
-        // const newList = list.toJS();
-        // const pageList = [];
-
-        // if (newList.length) {
-        // 	for (let i = (page - 1) * 10; i < page * 10; i++) {
-        // 		pageList.push(
-        // 			<SearchInfoItem key={newList[i]}>{newList[i]}</SearchInfoItem>
-        // 		)
-        // 	}
-        // }
-        //可以直接获得输入框里的内容
-        menu;
-        if (true) {
-            return (
-                <div>
-                   {
-                    list.map((item) => {
-                        return <span className='ispan' type="text" key={item} >{item}</span>
-                    })
-                }
-                </div>
-            )
-        } else {
-            return null;
-        }
-    }
-
-
-    render() {
-        const { inputValue, handleInputFocus,handleInputChange, menu, list } = this.props;
-        return (
-            <div>
-                <BrowserRouter>
-                <div>
-                    
-                    <ul>
-                        <li><Link to='/'>首页</Link></li>
-                        <li><Link to='/company'>关于</Link></li>
-                    </ul>
-
-	      			{/* <Route path='/' exact component={Home}></Route>
-	      			<Route path='/detail' exact component={Detail}></Route> */}
-                    <Route path='/' exact render={()=><div>联系人</div>} ></Route>
-                    <Route path='/company' exact render={()=><div>公司</div>} ></Route>
-                    
-	      		</div>
-                </BrowserRouter>
-                {/* innerRef */}
-                <div >{inputValue}</div>
-                <input onFocus={() => handleInputFocus(list)} ref={(input)=>{this.ivalue=input}} onChange={()=>handleInputChange(this.ivalue)}  />
-                {menu}
-                <div>{this.getListArea()}</div>
-            </div>
-        );
-    }
-
-    //组件即将要被挂在的时候执行的方法--
-    componentDidMount(){
-        //逻辑代码可以写在mapDispathToProps里 this.props.方法
-
-        // axios.get('/api/submenuList.json').then((res) => {
-        //     const data = res.data;
-        //     dispatch(changeList(data.data));
-        // }).catch(() => {
-        //     console.log('error');
-        // })
-    }
-
-}
-
-
-
-/**
- * store里的数据映射到这个组件里的state
- * @param {*} state 
- */
-const mapStateToProps = (state) => {
-
-    return {
-        //menu: state.submenu.menu
-        menu: state.getIn(['submenu', 'menu']),
-        list: state.getIn(['submenu', 'list']),
-        inputValue: state.getIn(['submenu', 'inputValue']),
-    }
-    // return {
-    // 	focused: state.getIn(['header', 'focused']),
-    // 	list: state.getIn(['header', 'list']),
-    // 	page: state.getIn(['header', 'page']),
-    // 	totalPage: state.getIn(['header', 'totalPage']),
-    // 	mouseIn: state.getIn(['header', 'mouseIn'])
-    // }
-}
-
-
-/**
- * 要改变store里的内容需要调用dispatch方法
- * @param {*} dispatch 
- */
-const mapDispathToProps = (dispatch) => {
-    return {
-        handleInputFocus(list) {
-
-            // const action = {
-            //     type: 'aearch_focus'
-            // };
-            //发送给store--提取出action--避免发送重复的ajax请求
-            (list.size === 0) && dispatch(actionCreators.getList());
-            // if(list.size>0){
-            //     dispatch(actionCreators.getList());
-            // }
-            dispatch(actionCreators.searchFocus());
-        },
-        handleInputChange(ivalueElem){
-           
-            dispatch(actionCreators.changeInputValue(ivalueElem.value));
-        },
-    }
-    // return {
-    // 	handleInputFocus(list) {
-    // 		(list.size === 0) && dispatch(actionCreators.getList());
-    // 		dispatch(actionCreators.searchFocus());
-    // 	},
-    // 	handleInputBlur() {
-    // 		dispatch(actionCreators.searchBlur());
-    // 	},
-    // 	handleMouseEnter() {
-    // 		dispatch(actionCreators.mouseEnter());
-    // 	},
-    // 	handleMouseLeave() {
-    // 		dispatch(actionCreators.mouseLeave());
-    // 	},
-    // 	handleChangePage(page, totalPage, spin) {
-    // 		let originAngle = spin.style.transform.replace(/[^0-9]/ig, '');
-    // 		if (originAngle) {
-    // 			originAngle = parseInt(originAngle, 10);
-    // 		}else {
-    // 			originAngle = 0;
-    // 		}
-    // 		spin.style.transform = 'rotate(' + (originAngle + 360) + 'deg)';
-
-    // 		if (page < totalPage) {
-    // 			dispatch(actionCreators.changePage(page + 1));
-    // 		}else {
-    // 			dispatch(actionCreators.changePage(1));
-    // 		}
-    // 	}
-    // }
-}
-
-export default connect(mapStateToProps, mapDispathToProps)(Submenu);

src/workbench/submenu/store/actionCreators.js

@@ -1,52 +0,0 @@
-import * as constants from './constants';
-import { fromJS } from 'immutable';
-
-import axios from '../../../common/axios_auth.js';
-// import axios from 'axios';
-
-
-
-//actionType
-export const searchFocus = () => ({
-    type: constants.SEARCH_FOCUS
-});
-
-export const getList = () => {
-    return (dispatch) => {
-        axios.get('/api/submenuList.json').then((res) => {
-            const data = res.data;
-            dispatch(changeList(data.data));
-        }).catch(() => {
-            console.log('error');
-        })
-    }
-};
-
-export const changeInputValue = (value) => (  {
-    type: constants.CHANGE_INPUTVALUE,
-    data:fromJS(value),
-});
-
-const changeList = (data) => ({
-    type: constants.CHANGE_LIST,
-    data: fromJS(data),
-    // totalPage: Math.ceil(data.length / 10)
-});
-
-// export const searchBlur = () => ({
-// 	type: constants.SEARCH_BLUR
-// });
-
-// export const mouseEnter = () => ({
-// 	type: constants.MOUSE_ENTER
-// });
-
-// export const mouseLeave = () => ({
-// 	type: constants.MOUSE_LEAVE
-// });
-
-// export const changePage = (page) => ({
-// 	type: constants.CHANGE_PAGE,
-// 	page
-// });
-

src/workbench/submenu/store/constants.js

@@ -1,5 +0,0 @@
-export const SEARCH_FOCUS = 'submenu/SEARCH_FOCUS';
-export const CHANGE_LIST ='submenu/CHANGE_LIST';
-export const CHANGE_INPUTVALUE ='submenu/CHANGE_INPUTVALUE';
-
-

src/workbench/submenu/store/index.js

@@ -1,5 +0,0 @@
-import reducer from './reducer';
-import * as actionCreators from './actionCreators';
-import * as constants from './constants';
-
-export { reducer,actionCreators,constants }

src/workbench/submenu/store/reducer.js

@@ -1,58 +0,0 @@
-import * as constants from './constants';
-//锁定state不可修改，导致错误y
-import { fromJS } from 'immutable';
-
-
-const defaultState = fromJS({
-    menu: 'hello submenu-t!!!',
-    list:[],
-    inputValue:'',
-
-});
-
-
-export default (state = defaultState, action) => {
-
-    // switch(action.type) {
-	// 	case constants.SEARCH_FOCUS:
-	// 		return state.set('focused', true);
-	// 	case constants.SEARCH_BLUR:
-	// 		return state.set('focused', false);
-	// 	case constants.CHANGE_LIST:
-	// 		return state.merge({
-	// 			list: action.data,
-	// 			totalPage: action.totalPage
-	// 		});
-	// 	case constants.MOUSE_ENTER:
-	// 		return state.set('mouseIn', true);
-	// 	case constants.MOUSE_LEAVE:
-	// 		return state.set('mouseIn', false);
-	// 	case constants.CHANGE_PAGE:
-	// 		return state.set('page', action.page);
-	// 	default:
-	// 		return state;
-	// }
-    if(action.type===constants.CHANGE_INPUTVALUE){
-        return state.set('inputValue',action.data);
-
-    }
-
-
-
-    if(action.type===constants.SEARCH_FOCUS){
-        return state.set('menu','clicke me');
-        // return {
-        //     menu:'clicke me'
-        // }
-    }
-    if(action.type===constants.CHANGE_LIST){
-        return state.set('list',action.data);
-        //return state.set('menu','clicke me');
-
-        // return state.merge({
-        //     list: action.data,
-        //     //totalPage: action.totalPage
-        // });
-    }
-    return state;
-}