free-sun
/
OperationalService
15
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

导航栏联动

release_0.0.1
deartibers 2 years ago
parent
8596e5c6a0
commit
fa84a546c6
5 changed files with 36 additions and 55 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      web/client/src/layout/components/header/index.jsx
  2. 53
      web/client/src/layout/components/sider/index.jsx
  3. 31
      web/client/src/layout/containers/layout/index.jsx
  4. 2
      web/client/src/sections/auth/containers/login.jsx
  5. 4
      web/client/src/sections/console/containers/console.jsx

1
web/client/src/layout/components/header/index.jsx
View File

@ -42,7 +42,6 @@ const Header = (props) => {
footer={
<>
{headerItems.map((item,index)=>{
// console.log('item',item);
if(item.hasOwnProperty('items')){
return(
<Nav.Sub

53
web/client/src/layout/components/sider/index.jsx
View File

@ -16,51 +16,7 @@ const Sider = (props) => {
useEffect(() => {
const { sections, dispatch, user } = props;
let nextItems = leftItems
// let pathname_ = pathname == '/' ? homePath : pathname
// const initKeys = (items, lastKeys) => {
// // console.log('1111111',items);
// for (let it of items) {
// if (it.to && it.to == pathname_) {
// // console.log('22222222222',it.itemKey);
// lastKeys.selectedKeys.push(it.itemKey)
// return lastKeys
// } else if (it.items && it.items.length) {
// const preLastKeys = JSON.parse(JSON.stringify(lastKeys))
// preLastKeys.openKeys.push(it.itemKey)
// const nextKeys = initKeys(it.items, JSON.parse(JSON.stringify(preLastKeys)))
// if (nextKeys.selectedKeys.length > preLastKeys.selectedKeys.length || nextKeys.openKeys.length > preLastKeys.openKeys.length) {
// return nextKeys
// }
// }
// }
// return lastKeys
// return {
// selectedKeys: [],
// openKeys: []
// }
// }
setItems(nextItems)
// const { selectedKeys, openKeys } = initKeys(
// nextItems,
// {
// selectedKeys: [],
// openKeys: []
// }
// )
// if (selectedKeys.length || openKeys.length) {
// setSelectedKeys(selectedKeys)
// setOpenKeys(openKeys)
// } else {
// const lastSelectedKeys = localStorage.getItem('vcmp_selected_sider')
// if (lastSelectedKeys) {
// setSelectedKeys(JSON.parse(lastSelectedKeys))
// }
// const lastOpenKeys = localStorage.getItem('vcmp_open_sider')
// if (lastOpenKeys) {
// setOpenKeys(JSON.parse(lastOpenKeys))
// }
// }
scrollbar = new PerfectScrollbar('#page-slider', { suppressScrollX: true });
if (pathname == '/') {
dispatch(push(homePath))
@ -79,11 +35,11 @@ const Sider = (props) => {
else {
setSelectedKeys(routeSelectedKey)
}
const lastOpenKeys = localStorage.getItem('vcmp_open_sider')
const lastOpenKeys = localStorage.getItem('poms_open_sider')
if (lastOpenKeys) {
setOpenKeys(JSON.parse(lastOpenKeys))
}
}, [window.localStorage.vcmp_open_sider, window.localStorage.vcmp_selected_sider, leftChange])
}, [window.localStorage.poms_open_sider, window.localStorage.poms_selected_sider, leftChange])
useEffect(() => {
if (scrollbar) {
@ -102,12 +58,13 @@ const Sider = (props) => {
if (selectItem.to) {
dispatch(push(selectItem.to))
}
let myfatherKey = selectItem.to
localStorage.setItem('poms_selected_sider', JSON.stringify([myfatherKey.split('/')[1]]))
setSelectedKeys(selectedKeys)
localStorage.setItem('vcmp_selected_sider', JSON.stringify(selectedKeys))
}}
onOpenChange={({ openKeys }) => {
setOpenKeys(openKeys)
localStorage.setItem('vcmp_open_sider', JSON.stringify(openKeys))
localStorage.setItem('poms_open_sider', JSON.stringify(openKeys))
}}
items={items}
/>

31
web/client/src/layout/containers/layout/index.jsx
View File

@ -86,7 +86,7 @@ const LayoutContainer = props => {
const [leftShow, setLeftShow] = useState(false)
useEffect(() => {
let topItems = []//头部导航
// let siderItems = []//侧边导航
const lastSelectedKeys = localStorage.getItem('poms_selected_sider')
let nextItems = []//所有导航
for (let c of sections) {
if (typeof c.getNavItem == 'function') {
@ -98,7 +98,7 @@ const LayoutContainer = props => {
let itm = deepCopy(item[j]);
if (itm.hasOwnProperty('items')) {
for (let i = 0; i < itm.items.length; i++) {
itm.items[i].fatherKey=itm.itemKey
itm.items[i].fatherKey = itm.itemKey
delete itm.items[i].items
}
topItems.push(itm)
@ -111,10 +111,25 @@ const LayoutContainer = props => {
}
}
}
setLeftShow(false)
setAllItems(nextItems)
setHeaderItems(topItems)
// setLeftItems(siderItems)
if (lastSelectedKeys) {//如果有缓存
for (let i = 0; i < nextItems.length; i++) {
if (JSON.parse(lastSelectedKeys)[0] == nextItems[i].itemKey) {
let openArr = []
for (let j = 0; j < nextItems[i].items.length; j++) {
openArr.push(nextItems[i].items[j].itemKey)
}
localStorage.setItem('poms_open_sider', JSON.stringify(openArr))
setLeftItems(nextItems[i].items)
}
}
setLeftShow(true)
}
else {
setLeftShow(false)
}
window.addEventListener('resize', resize_);
return () => {
@ -202,12 +217,20 @@ const LayoutContainer = props => {
if (val.fatherKey) {
for (let i = 0; i < allItems.length; i++) {
if (val.fatherKey == allItems[i].itemKey) {
let openArr = []
for (let j = 0; j < allItems[i].items.length; j++) {
openArr.push(allItems[i].items[j].itemKey)
}
localStorage.setItem('poms_selected_sider', JSON.stringify([val.fatherKey]))
localStorage.setItem('poms_open_sider', JSON.stringify(openArr))
setLeftItems(allItems[i].items)
}
}
setLeftShow(true)
}
else {
localStorage.setItem('poms_open_sider', JSON.stringify([]))
localStorage.removeItem('poms_selected_sider')
setLeftShow(false)
}
history.push(val.to);

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

@ -21,6 +21,8 @@ const Login = props => {
useEffect(() => {
if (user && user.authorized) {
dispatch(push('/console'));
localStorage.setItem('poms_open_sider', JSON.stringify([]))
localStorage.removeItem('poms_selected_sider')
}
}, [user])

4
web/client/src/sections/console/containers/console.jsx
View File

@ -4,7 +4,7 @@ import { Spin, Card } from '@douyinfe/semi-ui';
import '../style.less'
const { Meta } = Card;
const Example = (props) => {
const Console = (props) => {
const { dispatch, actions, user, loading, socket } = props
useEffect(() => {
@ -46,4 +46,4 @@ function mapStateToProps (state) {
};
}
export default connect(mapStateToProps)(Example);
export default connect(mapStateToProps)(Console);

Write Preview
Loading…
Cancel
Save