Browse Source

完善sider选择逻辑

release_0.0.2
yuan_yi 2 years ago
parent
commit
ce47dbadcf
  1. 19
      code/VideoAccess-VCMP/web/client/src/layout/components/sider/index.jsx
  2. 22
      code/VideoAccess-VCMP/web/client/src/sections/auth/containers/login.jsx

19
code/VideoAccess-VCMP/web/client/src/layout/components/sider/index.jsx

@ -24,6 +24,15 @@ const Sider = props => {
} }
setItems(nextItems) setItems(nextItems)
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 }); scrollbar = new PerfectScrollbar('#page-slider', { suppressScrollX: true });
}, []) }, [])
@ -37,11 +46,19 @@ const Sider = props => {
<div id={'page-slider'} style={{ height: clientHeight, position: 'relative' }}> <div id={'page-slider'} style={{ height: clientHeight, position: 'relative' }}>
<Nav <Nav
style={{}} style={{}}
onSelect={({ selectedItems }) => { selectedKeys={selectedKeys}
openKeys={openKeys}
onSelect={({ selectedItems, selectedKeys, }) => {
const selectItem = selectedItems[0] const selectItem = selectedItems[0]
if (selectItem.to) { if (selectItem.to) {
dispatch(push(selectItem.to)) dispatch(push(selectItem.to))
} }
setSelectedKeys(selectedKeys)
localStorage.setItem('vcmp_selected_sider', JSON.stringify(selectedKeys))
}}
onOpenChange={({ openKeys }) => {
setOpenKeys(openKeys)
localStorage.setItem('vcmp_open_sider', JSON.stringify(openKeys))
}} }}
items={items} items={items}
/> />

22
code/VideoAccess-VCMP/web/client/src/sections/auth/containers/login.jsx

@ -4,7 +4,7 @@ import { connect } from 'react-redux';
import { push } from 'react-router-redux'; import { push } from 'react-router-redux';
import { Form, Button, Toast } from '@douyinfe/semi-ui'; import { Form, Button, Toast } from '@douyinfe/semi-ui';
import { login, LOGIN_SUCCESS } from '../actions/auth'; import { login, LOGIN_SUCCESS } from '../actions/auth';
import { IconLock,IconUser } from '@douyinfe/semi-icons'; import { IconLock, IconUser } from '@douyinfe/semi-icons';
import '../style.less' import '../style.less'
const Login = props => { const Login = props => {
@ -21,13 +21,15 @@ const Login = props => {
useEffect(() => { useEffect(() => {
if (user && user.authorized) { if (user && user.authorized) {
dispatch(push('/equipmentWarehouse/nvr')); dispatch(push('/equipmentWarehouse/nvr'));
localStorage.setItem('vcmp_selected_sider', JSON.stringify(['nvr']))
localStorage.setItem('vcmp_open_sider', JSON.stringify(['equipmentWarehouse']))
} }
}, [user]) }, [user])
return ( return (
<div style={{ <div style={{
height: '100vh', height: '100vh',
backgroundImage:"url('/assets/images/background/loginBackground.png')", backgroundImage: "url('/assets/images/background/loginBackground.png')",
backgroundSize: 'cover', backgroundSize: 'cover',
backgroundRepeat: 'no-repeat', backgroundRepeat: 'no-repeat',
position: 'relative', position: 'relative',
@ -36,15 +38,15 @@ const Login = props => {
width: 446, width: 446,
height: 348, height: 348,
padding: '45px 60px', padding: '45px 60px',
backgroundImage:"url('/assets/images/background/loginbg.png')", backgroundImage: "url('/assets/images/background/loginbg.png')",
backgroundSize: '100% 100%', backgroundSize: '100% 100%',
backgroundRepeat: 'no-repeat', backgroundRepeat: 'no-repeat',
position: 'absolute', position: 'absolute',
top: '33.89%', top: '33.89%',
right: '16.43%', right: '16.43%',
}}> }}>
<div style={{width:113,height:24,marginTop:3,marginLeft:5}}> <div style={{ width: 113, height: 24, marginTop: 3, marginLeft: 5 }}>
<img src="/assets/images/background/user_login.png" alt="" style={{width:'100%',height:'100%'}}/> <img src="/assets/images/background/user_login.png" alt="" style={{ width: '100%', height: '100%' }} />
</div> </div>
<Form <Form
onSubmit={values => { onSubmit={values => {
@ -61,8 +63,8 @@ const Login = props => {
noLabel={true} noLabel={true}
label='用户名' label='用户名'
placeholder='请输入账号' placeholder='请输入账号'
prefix={<IconUser style={{color:'#1859C1',marginRight:14,marginLeft:8}}/>} prefix={<IconUser style={{ color: '#1859C1', marginRight: 14, marginLeft: 8 }} />}
style={{background:'rgba(24, 89, 193, 0.08)',height:40,marginTop:26}} style={{ background: 'rgba(24, 89, 193, 0.08)', height: 40, marginTop: 26 }}
/> />
<Form.Input <Form.Input
field='password' field='password'
@ -71,10 +73,10 @@ const Login = props => {
autoComplete="" autoComplete=""
placeholder='请输入密码' placeholder='请输入密码'
label='密码' label='密码'
prefix={<IconLock style={{color:'#1859C1',marginRight:14,marginLeft:8}}/>} prefix={<IconLock style={{ color: '#1859C1', marginRight: 14, marginLeft: 8 }} />}
style={{background:'rgba(24, 89, 193, 0.08)',height:40}} style={{ background: 'rgba(24, 89, 193, 0.08)', height: 40 }}
/> />
<Button htmlType='submit' block theme="solid" style={{marginTop:17,height:40,backgroundColor:'#1859C1'}}>立即登录</Button> <Button htmlType='submit' block theme="solid" style={{ marginTop: 17, height: 40, backgroundColor: '#1859C1' }}>立即登录</Button>
</Form> </Form>
</div> </div>
</div> </div>

Loading…
Cancel
Save