Browse Source

导航

master
deartibers 2 years ago
parent
commit
9ecc4ab34e
  1. BIN
      web/client/assets/images/background/header.png
  2. BIN
      web/client/assets/images/background/notice.png
  3. 3
      web/client/src/app.jsx
  4. 2
      web/client/src/layout/components/header/index.jsx
  5. 27
      web/client/src/layout/containers/layout/index.jsx
  6. 20
      web/client/src/sections/example/actions/example.js
  7. 38
      web/client/src/sections/example/containers/example.jsx
  8. 30
      web/client/src/sections/example/nav-item.jsx
  9. 19
      web/client/src/sections/example/routes.js
  10. 14
      web/client/src/sections/example1/actions/example.js
  11. 7
      web/client/src/sections/example1/actions/index.js
  12. 60
      web/client/src/sections/example1/containers/example.jsx
  13. 5
      web/client/src/sections/example1/containers/index.js
  14. 15
      web/client/src/sections/example1/index.js
  15. 41
      web/client/src/sections/example1/nav-item.jsx
  16. 5
      web/client/src/sections/example1/reducers/index.js
  17. 35
      web/client/src/sections/example1/routes.js
  18. 7
      web/client/src/sections/example1/style.less

BIN
web/client/assets/images/background/header.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 226 KiB

BIN
web/client/assets/images/background/notice.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 576 B

3
web/client/src/app.jsx

@ -4,6 +4,7 @@ import React, { useEffect } from 'react';
import Layout from './layout'; import Layout from './layout';
import Auth from './sections/auth'; import Auth from './sections/auth';
import Example from './sections/example'; import Example from './sections/example';
import Example1 from './sections/example1';
import NoMatch from './sections/noMatch'; import NoMatch from './sections/noMatch';
const App = props => { const App = props => {
@ -17,7 +18,7 @@ const App = props => {
<Layout <Layout
title={projectName} title={projectName}
sections={[ sections={[
// Example, Example,Example1,
Auth, NoMatch Auth, NoMatch
]} ]}
/> />

2
web/client/src/layout/components/header/index.jsx

@ -24,7 +24,7 @@ const Header = (props) => {
style={{ style={{
height: 60, height: 60,
minWidth: 520, minWidth: 520,
background: `url(${__webpack_public_path__}assets/images/background/header.png)`, background: '#1D2343',
backgroundSize: "100% 100%", backgroundSize: "100% 100%",
color: "white", color: "white",
}} }}

27
web/client/src/layout/containers/layout/index.jsx

@ -41,6 +41,33 @@ const LayoutContainer = props => {
} }
useEffect(() => { 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_); window.addEventListener('resize', resize_);
return () => { return () => {
window.removeEventListener('resize', resize_); window.removeEventListener('resize', resize_);

20
web/client/src/sections/example/actions/example.js

@ -2,13 +2,13 @@
import { ApiTable ,basicAction} from '$utils' import { ApiTable ,basicAction} from '$utils'
export function getMembers (orgId) { // export function getMembers (orgId) {
return dispatch => basicAction({ // return dispatch => basicAction({
type: 'get', // type: 'get',
dispatch: dispatch, // dispatch: dispatch,
actionType: 'GET_MEMBERS', // actionType: 'GET_MEMBERS',
url: `${ApiTable.getEnterprisesMembers.replace('{enterpriseId}', orgId)}`, // url: `${ApiTable.getEnterprisesMembers.replace('{enterpriseId}', orgId)}`,
msg: { error: '获取用户列表失败' }, // msg: { error: '获取用户列表失败' },
reducer: { name: 'members' } // reducer: { name: 'members' }
}); // });
} // }

38
web/client/src/sections/example/containers/example.jsx

@ -9,29 +9,29 @@ const Example = (props) => {
useEffect(() => { useEffect(() => {
// ACTION // ACTION
dispatch(actions.example.getMembers(user.orgId)) // dispatch(actions.example.getMembers(user.orgId))
}, []) }, [])
// websocket 使 // websocket 使
useEffect(() => { // useEffect(() => {
console.log(socket) // console.log(socket)
if (socket) { // if (socket) {
socket.on('TEST', function (msg) { // socket.on('TEST', function (msg) {
console.info(msg); // console.info(msg);
}); // });
return () => { // return () => {
socket.off("TEST"); // socket.off("TEST");
} // }
} // }
}, [socket]) // }, [socket])
return ( return (
<Spin tip="biubiubiu~" spinning={loading}> <Spin tip="biubiubiu~" spinning={loading}>
<div id='example'> <div id='example'>
<p>STYLE EXAMPLE</p> <p>STYLE EXAMPLE</p>
</div> </div>
<Card {/* <Card
style={{ maxWidth: 300 }} style={{ maxWidth: 300 }}
cover={ cover={
<img <img
@ -41,7 +41,7 @@ const Example = (props) => {
} }
> >
<Meta title="组件示例" /> <Meta title="组件示例" />
</Card> </Card> */}
</Spin> </Spin>
) )
} }
@ -49,11 +49,11 @@ const Example = (props) => {
function mapStateToProps (state) { function mapStateToProps (state) {
const { auth, global, members, webSocket } = state; const { auth, global, members, webSocket } = state;
return { return {
loading: members.isRequesting, // loading: members.isRequesting,
user: auth.user, // user: auth.user,
actions: global.actions, // actions: global.actions,
members: members.data, // members: members.data,
socket: webSocket.socket // socket: webSocket.socket
}; };
} }

30
web/client/src/sections/example/nav-item.jsx

@ -5,11 +5,37 @@ export function getNavItem (user, dispatch) {
return ( return (
[ [
{ {
itemKey: 'example', text: '举个栗子', icon: <IconCode />, itemKey: 'example',
text: '举个栗子',
icon: <IconCode />,
items: [ items: [
{ itemKey: 'e1', to: '/example/e1', text: '举个棒子' }, {
itemKey: 'e1',
text: '举个棒子1',
icon: <IconCode />,
items: [{
itemKey: 'c1', to: '/example/e1/c1', text: '举个锤子1'
}]
}, {
itemKey: 'e2',
text: '举个棒子2',
icon: <IconCode />,
items: [{
itemKey: 'c2', to: '/example/e2/c2', text: '举个锤子2'
}]
},
] ]
}, },
] ]
// ,[
// {
// itemKey: 'equipmentWarehouse', text: '', icon:<iconpark-icon style={{width:20,height:20}} name="she-1"></iconpark-icon>,
// items: [
// { itemKey: 'nvr', to: '/equipmentWarehouse/nvr', text: 'NVR' },
// { itemKey: 'camera', to: '/equipmentWarehouse/camera', text: '' },
// { itemKey: 'recycle', to: '/equipmentWarehouse/recycle', text: '' },
// ]
// },
// ]
); );
} }

19
web/client/src/sections/example/routes.js

@ -11,8 +11,25 @@ export default [{
childRoutes: [{ childRoutes: [{
path: '/e1', path: '/e1',
key: 'e1', key: 'e1',
// component: Example,
breadcrumb: '棒子1',
childRoutes:[{
path: '/c1',
key: 'c1',
component: Example, component: Example,
breadcrumb: '棒子', breadcrumb: '锤子1',
}]
},{
path: '/e2',
key: 'e2',
// component: Example,
breadcrumb: '棒子2',
childRoutes:[{
path: '/c2',
key: 'c2',
component: Example,
breadcrumb: '锤子2',
}]
}] }]
} }
}]; }];

14
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' }
// });
// }

7
web/client/src/sections/example1/actions/index.js

@ -0,0 +1,7 @@
'use strict';
import * as example from './example'
export default {
...example
}

60
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 (
<Spin tip="biubiubiu~" spinning={loading}>
<div id='example'>
<p>STYLE EXAMPLE</p>
</div>
{/* <Card
style={{ maxWidth: 300 }}
cover={
<img
alt="example"
src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/card-cover-docs-demo2.jpeg"
/>
}
>
<Meta title="组件示例" />
</Card> */}
</Spin>
)
}
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);

5
web/client/src/sections/example1/containers/index.js

@ -0,0 +1,5 @@
'use strict';
import Example from './example';
export { Example };

15
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
};

41
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: <IconCode />,
items: [
{
itemKey: 'e3',
text: '举个棒子3',
icon: <IconCode />,
items: [{
itemKey: 'c3', to: '/example/e3/c3', text: '举个锤子3'
}]
}, {
itemKey: 'e4',
text: '举个棒子4',
icon: <IconCode />,
items: [{
itemKey: 'c4', to: '/example/e4/c4', text: '举个锤子4'
}]
},
]
},
]
// ,[
// {
// itemKey: 'equipmentWarehouse', text: '', icon:<iconpark-icon style={{width:20,height:20}} name="she-1"></iconpark-icon>,
// items: [
// { itemKey: 'nvr', to: '/equipmentWarehouse/nvr', text: 'NVR' },
// { itemKey: 'camera', to: '/equipmentWarehouse/camera', text: '' },
// { itemKey: 'recycle', to: '/equipmentWarehouse/recycle', text: '' },
// ]
// },
// ]
);
}

5
web/client/src/sections/example1/reducers/index.js

@ -0,0 +1,5 @@
'use strict';
export default {
}

35
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',
}]
}]
}
}];

7
web/client/src/sections/example1/style.less

@ -0,0 +1,7 @@
#example {
box-shadow: 3px 3px 2px black;
}
#example:hover {
color: yellowgreen;
}
Loading…
Cancel
Save