目录结构

config/webpack.prod.config.js

@@ -92,6 +92,7 @@ module.exports = merge(common, {
           from: /^\/company/, to: '/',
           from: /^\/product\/lockStatistics/, to: '/product',
           from: /^\/product/, to: '/product',
+          from: /^\/contact/, to: '/contact',
         },
       ]
     }

src/contact/client/index.js

@@ -0,0 +1,141 @@
+import React, { PureComponent } from 'react';
+import { connect } from 'react-redux';
+import { BrowserRouter, Route,Link } from 'react-router-dom';
+
+import { actionCreators } from './store';
+
+class client 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>client</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)(client);

src/contact/client/store/actionCreators.js

@@ -0,0 +1,52 @@
+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/contact/client/store/constants.js

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

src/contact/client/store/index.js

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

src/contact/client/store/reducer.js

@@ -0,0 +1,58 @@
+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;
+}

src/contact/contact.js

@@ -0,0 +1,60 @@
+import React, { Component } from 'react';
+import { Provider } from 'react-redux';
+import { BrowserRouter, Route,Link } from 'react-router-dom';
+import store from './store';
+
+import Client from './client';
+
+class Contact extends Component {
+  render() {
+    return (
+      <Provider store={store}>
+         
+         <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-4 icon-stack-3x opacity-100 color-info-700"></i>
+                  <i className="base base-12 icon-stack-2x opacity-100 color-info-500"></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" class="nav-menu">
+                <li class="active">
+                  <Link to='/contact'>
+                  <i class="fal fa-address-book"></i>
+                      <span class="nav-link-text">联系人</span>
+                  </Link>
+                  
+                </li>
+                <li class="">
+                  <Link to='/product/lockStatistics'>
+                  <i class="fal fa-building "></i>
+                      <span class="nav-link-text">公司</span>
+                  </Link>
+                </li>
+              </ul>
+            </nav>
+            
+          </aside>
+          <div className="page-content-wrapper">
+               
+                <Route path='/contact' exact component={Client} ></Route>
+                <Route path='/client/lockStatistics' exact render={()=><div>使用统计</div>} ></Route>
+               
+          </div>
+            </BrowserRouter>
+        
+      </Provider>
+    );
+  }
+}
+
+export default Contact;

src/contact/store/index.js

@@ -0,0 +1,11 @@
+import { createStore, compose, applyMiddleware } from 'redux';
+import thunk from 'redux-thunk';
+import reducer from './reducer';
+
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+
+const store = createStore(reducer, composeEnhancers(
+    applyMiddleware(thunk)
+));
+
+export default store;

src/contact/store/reducer.js

@@ -0,0 +1,8 @@
+import { combineReducers } from 'redux-immutable';
+import { reducer as clientReducer } from '../client/store';
+
+const reducer = combineReducers({
+    client: clientReducer
+});
+
+export default reducer;

src/workbench/Lockstore/index.js

@@ -0,0 +1,206 @@
+import React, { PureComponent } from 'react';
+import { connect } from 'react-redux';
+import { BrowserRouter, Route,Link } from 'react-router-dom';
+
+import { actionCreators } from './store';
+
+// import { CSSTransition } from 'react-transition-group';
+// const Submenu = (props) => {
+//     return (
+//         <div>
+//             <input onFocus={props.handleInputFocus} />
+//             {props.menu}</div>
+//     )
+
+// }
+
+/**
+ * 可替换成无状态组件
+ */
+
+
+class Content 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 (
+            <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">
+                    <a href="/product" title="Analytics Dashboard" data-filter-tags="application intel analytics dashboard">
+                        <span class="nav-link-text">公共锁库</span>
+                      </a>
+                      <Link to='/product'>公共锁库</Link>
+                    </li>
+                    <li>
+                    <a href="/product/lockStatistics" title="Analytics Dashboard" data-filter-tags="application intel analytics dashboard">
+                        <span class="nav-link-text">使用统计</span>
+                      </a>
+                      <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>
+        );
+    }
+
+    //组件即将要被挂在的时候执行的方法--
+    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)(Content);

src/workbench/Lockstore/store/actionCreators.js

@@ -0,0 +1,52 @@
+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/Lockstore/store/constants.js

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

src/workbench/Lockstore/store/index.js

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

src/workbench/Lockstore/store/reducer.js

@@ -0,0 +1,58 @@
+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;
+}