完善sider选择逻辑

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

@@ -6,54 +6,71 @@ import { push } from 'react-router-redux';
 
 let scrollbar = null
 const Sider = props => {
-    const { collapsed, clientHeight, dispatch } = props
-    const [items, setItems] = useState([])
-    const [selectedKeys, setSelectedKeys] = useState([])
-    const [openKeys, setOpenKeys] = useState([])
-
-    useEffect(() => {
-        const { sections, dispatch, user } = props;
-        let nextItems = []
-        for (let c of sections) {
-            if (typeof c.getNavItem == 'function') {
-                let item = c.getNavItem(user, dispatch);
-                if (item) {
-                    nextItems.push.apply(nextItems, item)
-                }
+   const { collapsed, clientHeight, dispatch } = props
+   const [items, setItems] = useState([])
+   const [selectedKeys, setSelectedKeys] = useState([])
+   const [openKeys, setOpenKeys] = useState([])
+
+   useEffect(() => {
+      const { sections, dispatch, user } = props;
+      let nextItems = []
+      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)
-
-        scrollbar = new PerfectScrollbar('#page-slider', { suppressScrollX: true });
-    }, [])
-
-    useEffect(() => {
-        if (scrollbar) {
-            scrollbar.update();
-        }
-    })
-
-    return (
-        <div id={'page-slider'} style={{ height: clientHeight, position: 'relative' }}>
-            <Nav
-                style={{}}
-                onSelect={({ selectedItems }) => {
-                    const selectItem = selectedItems[0]
-                    if (selectItem.to) {
-                        dispatch(push(selectItem.to))
-                    }
-                }}
-                items={items}
-            />
-        </div>
-    )
+         }
+      }
+      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 });
+   }, [])
+
+   useEffect(() => {
+      if (scrollbar) {
+         scrollbar.update();
+      }
+   })
+
+   return (
+      <div id={'page-slider'} style={{ height: clientHeight, position: 'relative' }}>
+         <Nav
+            style={{}}
+            selectedKeys={selectedKeys}
+            openKeys={openKeys}
+            onSelect={({ selectedItems, selectedKeys, }) => {
+               const selectItem = selectedItems[0]
+               if (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}
+         />
+      </div>
+   )
 }
 
 function mapStateToProps (state) {
-    const { global } = state;
-    return {
-        clientHeight: global.clientHeight,
-    };
+   const { global } = state;
+   return {
+      clientHeight: global.clientHeight,
+   };
 }
 
 export default connect(mapStateToProps)(Sider);

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

@@ -4,92 +4,94 @@ import { connect } from 'react-redux';
 import { push } from 'react-router-redux';
 import { Form, Button, Toast } from '@douyinfe/semi-ui';
 import { login, LOGIN_SUCCESS } from '../actions/auth';
-import { IconLock,IconUser } from '@douyinfe/semi-icons';
+import { IconLock, IconUser } from '@douyinfe/semi-icons';
 import '../style.less'
 
 const Login = props => {
-    const { dispatch, user, error, actions, apiRoot, isRequesting } = props
-    const form = useRef();
+   const { dispatch, user, error, actions, apiRoot, isRequesting } = props
+   const form = useRef();
 
-    useEffect(() => {
-        if (error) {
-            Toast.error(error);
-            form.current.setValue('password', '')
-        }
-    }, [error])
+   useEffect(() => {
+      if (error) {
+         Toast.error(error);
+         form.current.setValue('password', '')
+      }
+   }, [error])
 
-    useEffect(() => {
-        if (user && user.authorized) {
-            dispatch(push('/equipmentWarehouse/nvr'));
-        }
-    }, [user])
+   useEffect(() => {
+      if (user && user.authorized) {
+         dispatch(push('/equipmentWarehouse/nvr'));
+         localStorage.setItem('vcmp_selected_sider', JSON.stringify(['nvr']))
+         localStorage.setItem('vcmp_open_sider', JSON.stringify(['equipmentWarehouse']))
+      }
+   }, [user])
 
-    return (
-        <div style={{
-            height: '100vh',
-            backgroundImage:"url('/assets/images/background/loginBackground.png')",
-            backgroundSize: 'cover',
+   return (
+      <div style={{
+         height: '100vh',
+         backgroundImage: "url('/assets/images/background/loginBackground.png')",
+         backgroundSize: 'cover',
+         backgroundRepeat: 'no-repeat',
+         position: 'relative',
+      }}>
+         <div style={{
+            width: 446,
+            height: 348,
+            padding: '45px 60px',
+            backgroundImage: "url('/assets/images/background/loginbg.png')",
+            backgroundSize: '100% 100%',
             backgroundRepeat: 'no-repeat',
-            position: 'relative',
-        }}>
-            <div style={{
-                width: 446,
-                height: 348,
-                padding: '45px 60px',
-                backgroundImage:"url('/assets/images/background/loginbg.png')",
-                backgroundSize: '100% 100%',
-                backgroundRepeat: 'no-repeat',
-                position: 'absolute',
-                top: '33.89%',
-                right: '16.43%',
-            }}>
-                <div style={{width:113,height:24,marginTop:3,marginLeft:5}}>
-                    <img src="/assets/images/background/user_login.png" alt=""  style={{width:'100%',height:'100%'}}/>
-                </div>
-                <Form
-                    onSubmit={values => {
-                        dispatch(login(values.username, values.password)).then(res => {
-                            const data = res.payload.user
-                            dispatch(actions.layout.initWebSocket({ ioUrl: apiRoot, token: data.token }))
-                        })
-                    }}
-                    getFormApi={formApi => form.current = formApi}
-                >
-                    <Form.Input
-                        className='inputbgc'
-                        field='username'
-                        noLabel={true}
-                        label='用户名'
-                        placeholder='请输入账号'
-                        prefix={<IconUser style={{color:'#1859C1',marginRight:14,marginLeft:8}}/>}
-                        style={{background:'rgba(24, 89, 193, 0.08)',height:40,marginTop:26}}
-                    />
-                    <Form.Input 
-                        field='password'
-                        noLabel={true}
-                        mode="password"
-                        autoComplete=""
-                        placeholder='请输入密码'
-                        label='密码'
-                        prefix={<IconLock  style={{color:'#1859C1',marginRight:14,marginLeft:8}}/>}
-                        style={{background:'rgba(24, 89, 193, 0.08)',height:40}}
-                    />
-                    <Button htmlType='submit' block theme="solid" style={{marginTop:17,height:40,backgroundColor:'#1859C1'}}>立即登录</Button>
-                </Form>
+            position: 'absolute',
+            top: '33.89%',
+            right: '16.43%',
+         }}>
+            <div style={{ width: 113, height: 24, marginTop: 3, marginLeft: 5 }}>
+               <img src="/assets/images/background/user_login.png" alt="" style={{ width: '100%', height: '100%' }} />
             </div>
-        </div>
-    );
+            <Form
+               onSubmit={values => {
+                  dispatch(login(values.username, values.password)).then(res => {
+                     const data = res.payload.user
+                     dispatch(actions.layout.initWebSocket({ ioUrl: apiRoot, token: data.token }))
+                  })
+               }}
+               getFormApi={formApi => form.current = formApi}
+            >
+               <Form.Input
+                  className='inputbgc'
+                  field='username'
+                  noLabel={true}
+                  label='用户名'
+                  placeholder='请输入账号'
+                  prefix={<IconUser style={{ color: '#1859C1', marginRight: 14, marginLeft: 8 }} />}
+                  style={{ background: 'rgba(24, 89, 193, 0.08)', height: 40, marginTop: 26 }}
+               />
+               <Form.Input
+                  field='password'
+                  noLabel={true}
+                  mode="password"
+                  autoComplete=""
+                  placeholder='请输入密码'
+                  label='密码'
+                  prefix={<IconLock style={{ color: '#1859C1', marginRight: 14, marginLeft: 8 }} />}
+                  style={{ background: 'rgba(24, 89, 193, 0.08)', height: 40 }}
+               />
+               <Button htmlType='submit' block theme="solid" style={{ marginTop: 17, height: 40, backgroundColor: '#1859C1' }}>立即登录</Button>
+            </Form>
+         </div>
+      </div>
+   );
 }
 
 function mapStateToProps (state) {
-    const { auth, global } = state;
-    return {
-        user: auth.user,
-        error: auth.error,
-        actions: global.actions,
-        apiRoot: global.apiRoot,
-        isRequesting: auth.isRequesting
-    }
+   const { auth, global } = state;
+   return {
+      user: auth.user,
+      error: auth.error,
+      actions: global.actions,
+      apiRoot: global.apiRoot,
+      isRequesting: auth.isRequesting
+   }
 }
 
 export default connect(mapStateToProps)(Login);