Browse Source

导航

release_0.0.1
deartibers 2 years ago
parent
commit
72c12478dd
  1. 19
      web/client/src/layout/components/header/index.jsx
  2. 26
      web/client/src/layout/components/sider/index.jsx
  3. 18
      web/client/src/layout/components/sider/index.less
  4. 53
      web/client/src/layout/containers/layout/index.jsx
  5. 2
      web/client/src/sections/auth/containers/login.jsx
  6. 1
      web/client/src/sections/example/nav-item.jsx
  7. 2
      web/client/src/sections/example/routes.js

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

@ -4,7 +4,7 @@ import { connect } from "react-redux";
import { Nav, Avatar, Dropdown } from "@douyinfe/semi-ui"; import { Nav, Avatar, Dropdown } from "@douyinfe/semi-ui";
const Header = (props) => { const Header = (props) => {
const { dispatch, history, user, actions, socket } = props; const { dispatch, history, user, actions, socket ,headerItems} = props;
return ( return (
<> <>
@ -20,6 +20,9 @@ const Header = (props) => {
} }
history.push(`/signin`); history.push(`/signin`);
} }
else{
console.log('1111111111111111');
}
}} }}
style={{ style={{
height: 60, height: 60,
@ -38,6 +41,19 @@ const Header = (props) => {
text: "", text: "",
}} }}
footer={ footer={
<>
{headerItems.map((item,index)=>(
<Nav.Sub
key={index}
itemKey={item.itemKey}
text={item.text}
dropdownStyle={{color:'#F2F3F5'}}
>
{item.hasOwnProperty('items')&&item.items.map((ite,idx)=>(
<Nav.Item key={idx} itemKey={ite.itemKey} text={ite.text} />
))}
</Nav.Sub>
))}
<Nav.Sub <Nav.Sub
itemKey={"user"} itemKey={"user"}
text={ text={
@ -77,6 +93,7 @@ const Header = (props) => {
> >
<Nav.Item itemKey={"logout"} text={"退出"} /> <Nav.Item itemKey={"logout"} text={"退出"} />
</Nav.Sub> </Nav.Sub>
</>
} }
/> />
</> </>

26
web/client/src/layout/components/sider/index.jsx

@ -4,18 +4,18 @@ import { connect } from 'react-redux';
import { Nav } from '@douyinfe/semi-ui'; import { Nav } from '@douyinfe/semi-ui';
import { push } from 'react-router-redux'; import { push } from 'react-router-redux';
import { useLocation } from 'react-router'; import { useLocation } from 'react-router';
import "./index.less";
let scrollbar = null let scrollbar = null
const homePath = '/equipmentWarehouse/nvr' const homePath = '/example/e1/c1'
const Sider = props => { const Sider = (props) => {
const { collapsed, clientHeight, dispatch, pathname } = props const { collapsed, clientHeight, dispatch, pathname,leftItems } = props
const [items, setItems] = useState([]) const [items, setItems] = useState([])
const [selectedKeys, setSelectedKeys] = useState([]) const [selectedKeys, setSelectedKeys] = useState([])
const [openKeys, setOpenKeys] = useState([]) const [openKeys, setOpenKeys] = useState([])
useEffect(() => { useEffect(() => {
const { sections, dispatch, user } = props; const { sections, dispatch, user } = props;
let nextItems = [] let nextItems = leftItems
let pathname_ = pathname == '/' ? homePath : pathname let pathname_ = pathname == '/' ? homePath : pathname
const initKeys = (items, lastKeys) => { const initKeys = (items, lastKeys) => {
for (let it of items) { for (let it of items) {
@ -37,17 +37,7 @@ const Sider = props => {
openKeys: [] openKeys: []
} }
} }
for (let c of sections) {
if (typeof c.getNavItem == 'function') {
let item = c.getNavItem(user, dispatch);
if (item) {
nextItems.push.apply(nextItems, item)
}
}
}
setItems(nextItems) setItems(nextItems)
const { selectedKeys, openKeys } = initKeys( const { selectedKeys, openKeys } = initKeys(
nextItems, nextItems,
{ {
@ -73,7 +63,7 @@ const Sider = props => {
if (pathname == '/') { if (pathname == '/') {
dispatch(push(homePath)) dispatch(push(homePath))
} }
}, []) }, [leftItems])
let routeSelectedKey = [useLocation().pathname.split('/')[1]]// let routeSelectedKey = [useLocation().pathname.split('/')[1]]//
let routeSelectedKeys = [useLocation().pathname.split('/')[2]]// let routeSelectedKeys = [useLocation().pathname.split('/')[2]]//
useEffect(()=>{ useEffect(()=>{
@ -113,9 +103,9 @@ const Sider = props => {
} }
}) })
return ( return (
<div id={'page-slider'} style={{ height: clientHeight, position: 'relative' }}> <div id={'page-slider'} style={{ height: clientHeight, position: 'relative',background:'#101531',width:180 }}>
<Nav <Nav
style={{}} style={{background:'#101531',width:180,padding:0}}
// defaultOpenKeys={openKeys} // defaultOpenKeys={openKeys}
// defaultSelectedKeys ={selectedKeys} // defaultSelectedKeys ={selectedKeys}
selectedKeys={selectedKeys} selectedKeys={selectedKeys}

18
web/client/src/layout/components/sider/index.less

@ -0,0 +1,18 @@
#page-slider{
.semi-navigation-sub .semi-navigation-item-selected{
background: rgba(0, 90, 189, 0.5);
color: #F2F3F5;
}
.semi-navigation-item-text{
color: #F2F3F5;
}
.semi-navigation-item-icon{
color:#F2F3F5
}
.semi-navigation-sub-title-selected{
background: #1D2343;
.semi-navigation-item-inner{
}
}
}

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

@ -38,6 +38,49 @@ const LayoutContainer = props => {
document.getElementById('PomsApp').clientWidth - (collapsed ? 120 : 240) document.getElementById('PomsApp').clientWidth - (collapsed ? 120 : 240)
)); ));
} }
function deepCopy(data) {//
//string,number,bool,null,undefined,symbol
//object,array,date
if (data && typeof data === "object") {
//
if (typeof data === "function") {
let tempFunc = data.bind(null);
tempFunc.prototype = deepCopy(data.prototype);
return tempFunc;
}
switch (Object.prototype.toString.call(data)) {
case "[object String]":
return data.toString();
case "[object Number]":
return Number(data.toString());
case "[object Boolean]":
return new Boolean(data.toString());
case "[object Date]":
return new Date(data.getTime());
case "[object Array]":
var arr = [];
for (let i = 0; i < data.length; i++) {
arr[i] = deepCopy(data[i]);
}
return arr;
//js
case "[object Object]":
var obj = {};
for (let key in data) {
//hasOwnProperty obj.hasOwnProperty(prop)
obj[key] = deepCopy(data[key]);
}
return obj;
}
} else {
//string,number,bool,null,undefined,symbol
return data;
}
}
const [headerItems, setHeaderItems] = useState([])
const [leftItems, setLeftItems] = useState([])
useEffect(() => { useEffect(() => {
let topItems = []// let topItems = []//
@ -47,8 +90,8 @@ const LayoutContainer = props => {
let item = c.getNavItem(user, dispatch); let item = c.getNavItem(user, dispatch);
if (item) { if (item) {
if (item.length > 0) { if (item.length > 0) {
let itm = JSON.parse(JSON.stringify(item[0])); let itm = deepCopy(item[0]);
let itms = JSON.parse(JSON.stringify(item[0])); let itms=deepCopy(item[0]);
if (itm.hasOwnProperty('items')) { if (itm.hasOwnProperty('items')) {
siderItems.push.apply(siderItems, itms.items) siderItems.push.apply(siderItems, itms.items)
for (let i = 0; i < itm.items.length; i++) { for (let i = 0; i < itm.items.length; i++) {
@ -64,8 +107,8 @@ const LayoutContainer = props => {
} }
} }
} }
console.log('siderItems', siderItems); setHeaderItems(topItems)
console.log('topItems', topItems); setLeftItems(siderItems)
window.addEventListener('resize', resize_); window.addEventListener('resize', resize_);
return () => { return () => {
@ -140,6 +183,7 @@ const LayoutContainer = props => {
<> <>
<Layout.Header> <Layout.Header>
<Header <Header
headerItems={headerItems}
user={user} user={user}
pathname={location.pathname} pathname={location.pathname}
toggleCollapsed={() => { toggleCollapsed={() => {
@ -153,6 +197,7 @@ const LayoutContainer = props => {
<Layout.Sider> <Layout.Sider>
<Sider <Sider
sections={sections} sections={sections}
leftItems={leftItems}
dispatch={dispatch} dispatch={dispatch}
user={user} user={user}
pathname={location.pathname} pathname={location.pathname}

2
web/client/src/sections/auth/containers/login.jsx

@ -20,7 +20,7 @@ const Login = props => {
useEffect(() => { useEffect(() => {
if (user && user.authorized) { if (user && user.authorized) {
dispatch(push('/equipmentWarehouse/nvr')); dispatch(push('/example/e1/c1'));
localStorage.setItem('vcmp_selected_sider', JSON.stringify(['nvr'])) localStorage.setItem('vcmp_selected_sider', JSON.stringify(['nvr']))
localStorage.setItem('vcmp_open_sider', JSON.stringify(['equipmentWarehouse'])) localStorage.setItem('vcmp_open_sider', JSON.stringify(['equipmentWarehouse']))
} }

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

@ -13,6 +13,7 @@ export function getNavItem (user, dispatch) {
itemKey: 'e1', itemKey: 'e1',
text: '举个棒子1', text: '举个棒子1',
icon: <IconCode />, icon: <IconCode />,
to: '/example/e1/c1',
items: [{ items: [{
itemKey: 'c1', to: '/example/e1/c1', text: '举个锤子1' itemKey: 'c1', to: '/example/e1/c1', text: '举个锤子1'
}] }]

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

@ -11,7 +11,7 @@ export default [{
childRoutes: [{ childRoutes: [{
path: '/e1', path: '/e1',
key: 'e1', key: 'e1',
// component: Example, component: Example,
breadcrumb: '棒子1', breadcrumb: '棒子1',
childRoutes:[{ childRoutes:[{
path: '/c1', path: '/c1',

Loading…
Cancel
Save