diff --git a/web/client/assets/images/background/header.png b/web/client/assets/images/background/header.png new file mode 100644 index 0000000..59900ca Binary files /dev/null and b/web/client/assets/images/background/header.png differ diff --git a/web/client/assets/images/background/notice.png b/web/client/assets/images/background/notice.png new file mode 100644 index 0000000..e00a54f Binary files /dev/null and b/web/client/assets/images/background/notice.png differ diff --git a/web/client/src/app.jsx b/web/client/src/app.jsx index d956fc6..fb9fb91 100644 --- a/web/client/src/app.jsx +++ b/web/client/src/app.jsx @@ -4,6 +4,7 @@ import React, { useEffect } from 'react'; import Layout from './layout'; import Auth from './sections/auth'; import Example from './sections/example'; +import Example1 from './sections/example1'; import NoMatch from './sections/noMatch'; const App = props => { @@ -17,7 +18,7 @@ const App = props => { diff --git a/web/client/src/layout/components/header/index.jsx b/web/client/src/layout/components/header/index.jsx index ee70c87..4c25384 100644 --- a/web/client/src/layout/components/header/index.jsx +++ b/web/client/src/layout/components/header/index.jsx @@ -24,7 +24,7 @@ const Header = (props) => { style={{ height: 60, minWidth: 520, - background: `url(${__webpack_public_path__}assets/images/background/header.png)`, + background: '#1D2343', backgroundSize: "100% 100%", color: "white", }} diff --git a/web/client/src/layout/containers/layout/index.jsx b/web/client/src/layout/containers/layout/index.jsx index ac3c347..d3e1a71 100644 --- a/web/client/src/layout/containers/layout/index.jsx +++ b/web/client/src/layout/containers/layout/index.jsx @@ -41,6 +41,33 @@ const LayoutContainer = props => { } useEffect(() => { + let topItems=[]//头部导航 + let siderItems=[]//侧边导航 + for (let c of sections) { + if (typeof c.getNavItem == 'function') { + let item = c.getNavItem(user, dispatch); + if (item) { + if(item.length>0){ + let itm = JSON.parse(JSON.stringify(item[0])); + let itms = JSON.parse(JSON.stringify(item[0])); + if(itm.hasOwnProperty('items')){ + siderItems.push.apply(siderItems,itms.items) + for (let i = 0; i < itm.items.length; i++) { + delete itm.items[i].items + } + topItems.push(itm) + } + else{ + topItems.push.apply(topItems, item) + } + } + + } + } + } + console.log('siderItems',siderItems); + console.log('topItems',topItems); + window.addEventListener('resize', resize_); return () => { window.removeEventListener('resize', resize_); diff --git a/web/client/src/sections/example/actions/example.js b/web/client/src/sections/example/actions/example.js index 01ebbae..ff08638 100644 --- a/web/client/src/sections/example/actions/example.js +++ b/web/client/src/sections/example/actions/example.js @@ -2,13 +2,13 @@ import { ApiTable ,basicAction} from '$utils' -export function getMembers (orgId) { - return dispatch => basicAction({ - type: 'get', - dispatch: dispatch, - actionType: 'GET_MEMBERS', - url: `${ApiTable.getEnterprisesMembers.replace('{enterpriseId}', orgId)}`, - msg: { error: '获取用户列表失败' }, - reducer: { name: 'members' } - }); -} +// export function getMembers (orgId) { +// return dispatch => basicAction({ +// type: 'get', +// dispatch: dispatch, +// actionType: 'GET_MEMBERS', +// url: `${ApiTable.getEnterprisesMembers.replace('{enterpriseId}', orgId)}`, +// msg: { error: '获取用户列表失败' }, +// reducer: { name: 'members' } +// }); +// } diff --git a/web/client/src/sections/example/containers/example.jsx b/web/client/src/sections/example/containers/example.jsx index 0734d66..47fbace 100644 --- a/web/client/src/sections/example/containers/example.jsx +++ b/web/client/src/sections/example/containers/example.jsx @@ -9,29 +9,29 @@ const Example = (props) => { useEffect(() => { // ACTION 示例 - dispatch(actions.example.getMembers(user.orgId)) + // dispatch(actions.example.getMembers(user.orgId)) }, []) // websocket 使用测试 - useEffect(() => { - console.log(socket) - if (socket) { - socket.on('TEST', function (msg) { - console.info(msg); - }); - return () => { - socket.off("TEST"); - } - } +// useEffect(() => { +// console.log(socket) +// if (socket) { +// socket.on('TEST', function (msg) { +// console.info(msg); +// }); +// return () => { +// socket.off("TEST"); +// } +// } - }, [socket]) +// }, [socket]) return (

STYLE EXAMPLE

- { } > - + */}
) } @@ -49,11 +49,11 @@ const Example = (props) => { function mapStateToProps (state) { const { auth, global, members, webSocket } = state; return { - loading: members.isRequesting, - user: auth.user, - actions: global.actions, - members: members.data, - socket: webSocket.socket + // loading: members.isRequesting, + // user: auth.user, + // actions: global.actions, + // members: members.data, + // socket: webSocket.socket }; } diff --git a/web/client/src/sections/example/nav-item.jsx b/web/client/src/sections/example/nav-item.jsx index cfcbbdc..a20826e 100644 --- a/web/client/src/sections/example/nav-item.jsx +++ b/web/client/src/sections/example/nav-item.jsx @@ -5,11 +5,37 @@ export function getNavItem (user, dispatch) { return ( [ { - itemKey: 'example', text: '举个栗子', icon: , + itemKey: 'example', + text: '举个栗子', + icon: , items: [ - { itemKey: 'e1', to: '/example/e1', text: '举个棒子' }, + { + itemKey: 'e1', + text: '举个棒子1', + icon: , + items: [{ + itemKey: 'c1', to: '/example/e1/c1', text: '举个锤子1' + }] + }, { + itemKey: 'e2', + text: '举个棒子2', + icon: , + items: [{ + itemKey: 'c2', to: '/example/e2/c2', text: '举个锤子2' + }] + }, ] }, ] + // ,[ + // { + // itemKey: 'equipmentWarehouse', text: '设备仓库', icon:, + // items: [ + // { itemKey: 'nvr', to: '/equipmentWarehouse/nvr', text: 'NVR管理' }, + // { itemKey: 'camera', to: '/equipmentWarehouse/camera', text: '摄像头管理' }, + // { itemKey: 'recycle', to: '/equipmentWarehouse/recycle', text: '回收站' }, + // ] + // }, + // ] ); } \ No newline at end of file diff --git a/web/client/src/sections/example/routes.js b/web/client/src/sections/example/routes.js index 591e4ce..3551b98 100644 --- a/web/client/src/sections/example/routes.js +++ b/web/client/src/sections/example/routes.js @@ -11,8 +11,25 @@ export default [{ childRoutes: [{ path: '/e1', key: 'e1', - component: Example, - breadcrumb: '棒子', + // component: Example, + breadcrumb: '棒子1', + childRoutes:[{ + path: '/c1', + key: 'c1', + component: Example, + breadcrumb: '锤子1', + }] + },{ + path: '/e2', + key: 'e2', + // component: Example, + breadcrumb: '棒子2', + childRoutes:[{ + path: '/c2', + key: 'c2', + component: Example, + breadcrumb: '锤子2', + }] }] } }]; \ No newline at end of file diff --git a/web/client/src/sections/example1/actions/example.js b/web/client/src/sections/example1/actions/example.js new file mode 100644 index 0000000..ff08638 --- /dev/null +++ b/web/client/src/sections/example1/actions/example.js @@ -0,0 +1,14 @@ +'use strict'; + +import { ApiTable ,basicAction} from '$utils' + +// export function getMembers (orgId) { +// return dispatch => basicAction({ +// type: 'get', +// dispatch: dispatch, +// actionType: 'GET_MEMBERS', +// url: `${ApiTable.getEnterprisesMembers.replace('{enterpriseId}', orgId)}`, +// msg: { error: '获取用户列表失败' }, +// reducer: { name: 'members' } +// }); +// } diff --git a/web/client/src/sections/example1/actions/index.js b/web/client/src/sections/example1/actions/index.js new file mode 100644 index 0000000..090c73f --- /dev/null +++ b/web/client/src/sections/example1/actions/index.js @@ -0,0 +1,7 @@ +'use strict'; + +import * as example from './example' + +export default { + ...example +} \ No newline at end of file diff --git a/web/client/src/sections/example1/containers/example.jsx b/web/client/src/sections/example1/containers/example.jsx new file mode 100644 index 0000000..47fbace --- /dev/null +++ b/web/client/src/sections/example1/containers/example.jsx @@ -0,0 +1,60 @@ +import React, { useEffect } from 'react'; +import { connect } from 'react-redux'; +import { Spin, Card } from '@douyinfe/semi-ui'; +import '../style.less' +const { Meta } = Card; + +const Example = (props) => { + const { dispatch, actions, user, loading, socket } = props + + useEffect(() => { + // ACTION 示例 + // dispatch(actions.example.getMembers(user.orgId)) + }, []) + + // websocket 使用测试 +// useEffect(() => { +// console.log(socket) +// if (socket) { +// socket.on('TEST', function (msg) { +// console.info(msg); +// }); +// return () => { +// socket.off("TEST"); +// } +// } + +// }, [socket]) + + return ( + +
+

STYLE EXAMPLE

+
+ {/* + } + > + + */} +
+ ) +} + +function mapStateToProps (state) { + const { auth, global, members, webSocket } = state; + return { + // loading: members.isRequesting, + // user: auth.user, + // actions: global.actions, + // members: members.data, + // socket: webSocket.socket + }; +} + +export default connect(mapStateToProps)(Example); diff --git a/web/client/src/sections/example1/containers/index.js b/web/client/src/sections/example1/containers/index.js new file mode 100644 index 0000000..19e6695 --- /dev/null +++ b/web/client/src/sections/example1/containers/index.js @@ -0,0 +1,5 @@ +'use strict'; + +import Example from './example'; + +export { Example }; \ No newline at end of file diff --git a/web/client/src/sections/example1/index.js b/web/client/src/sections/example1/index.js new file mode 100644 index 0000000..92c4b45 --- /dev/null +++ b/web/client/src/sections/example1/index.js @@ -0,0 +1,15 @@ +'use strict'; + +import reducers from './reducers'; +import routes from './routes'; +import actions from './actions'; +import { getNavItem } from './nav-item'; + +export default { + key: 'example', + name: '书写示例', + reducers: reducers, + routes: routes, + actions: actions, + getNavItem: getNavItem +}; \ No newline at end of file diff --git a/web/client/src/sections/example1/nav-item.jsx b/web/client/src/sections/example1/nav-item.jsx new file mode 100644 index 0000000..068e326 --- /dev/null +++ b/web/client/src/sections/example1/nav-item.jsx @@ -0,0 +1,41 @@ +import React from 'react'; +import { IconCode } from '@douyinfe/semi-icons'; + +export function getNavItem (user, dispatch) { + return ( + [ + { + itemKey: 'example1', + text: '举个栗子1', + icon: , + items: [ + { + itemKey: 'e3', + text: '举个棒子3', + icon: , + items: [{ + itemKey: 'c3', to: '/example/e3/c3', text: '举个锤子3' + }] + }, { + itemKey: 'e4', + text: '举个棒子4', + icon: , + items: [{ + itemKey: 'c4', to: '/example/e4/c4', text: '举个锤子4' + }] + }, + ] + }, + ] + // ,[ + // { + // itemKey: 'equipmentWarehouse', text: '设备仓库', icon:, + // items: [ + // { itemKey: 'nvr', to: '/equipmentWarehouse/nvr', text: 'NVR管理' }, + // { itemKey: 'camera', to: '/equipmentWarehouse/camera', text: '摄像头管理' }, + // { itemKey: 'recycle', to: '/equipmentWarehouse/recycle', text: '回收站' }, + // ] + // }, + // ] + ); +} \ No newline at end of file diff --git a/web/client/src/sections/example1/reducers/index.js b/web/client/src/sections/example1/reducers/index.js new file mode 100644 index 0000000..7ed1088 --- /dev/null +++ b/web/client/src/sections/example1/reducers/index.js @@ -0,0 +1,5 @@ +'use strict'; + +export default { + +} \ No newline at end of file diff --git a/web/client/src/sections/example1/routes.js b/web/client/src/sections/example1/routes.js new file mode 100644 index 0000000..bbf2f1a --- /dev/null +++ b/web/client/src/sections/example1/routes.js @@ -0,0 +1,35 @@ +'use strict'; +import { Example, } from './containers'; + +export default [{ + type: 'inner', + route: { + path: '/example1', + key: 'example1', + breadcrumb: '栗子1', + // 不设置 component 则面包屑禁止跳转 + childRoutes: [{ + path: '/e3', + key: 'e3', + // component: Example, + breadcrumb: '棒子3', + childRoutes:[{ + path: '/c3', + key: 'c3', + component: Example, + breadcrumb: '锤子3', + }] + },{ + path: '/e4', + key: 'e4', + // component: Example, + breadcrumb: '棒子4', + childRoutes:[{ + path: '/c4', + key: 'c4', + component: Example, + breadcrumb: '锤子4', + }] + }] + } +}]; \ No newline at end of file diff --git a/web/client/src/sections/example1/style.less b/web/client/src/sections/example1/style.less new file mode 100644 index 0000000..75ecdb6 --- /dev/null +++ b/web/client/src/sections/example1/style.less @@ -0,0 +1,7 @@ +#example { + box-shadow: 3px 3px 2px black; +} + +#example:hover { + color: yellowgreen; +} \ No newline at end of file