@@ -25,10 +25,14 @@ export default function UserCenter(props: UserCenterProps) { | |||||
setPopVisible(nextVisible); | setPopVisible(nextVisible); | ||||
}, []); | }, []); | ||||
const onLogoutBtnClick = useCallback(() => { | |||||
setPopVisible(false); | |||||
}, []); | |||||
return ( | return ( | ||||
<Popover | <Popover | ||||
overlayClassName={styles.popWrapper} | overlayClassName={styles.popWrapper} | ||||
content={<PopContent />} | |||||
content={<PopContent onLogoutBtnClick={onLogoutBtnClick} />} | |||||
trigger="click" | trigger="click" | ||||
visible={popVisible} | visible={popVisible} | ||||
onVisibleChange={onVisibleChange} | onVisibleChange={onVisibleChange} | ||||
@@ -45,15 +49,20 @@ export default function UserCenter(props: UserCenterProps) { | |||||
); | ); | ||||
} | } | ||||
function PopContent(props) { | |||||
interface PopContentProps { | |||||
onLogoutBtnClick: () => void; | |||||
} | |||||
function PopContent(props: PopContentProps) { | |||||
const { onLogoutBtnClick } = props; | |||||
const { | const { | ||||
refresh, | refresh, | ||||
initialState: { currentUser } = {}, | initialState: { currentUser } = {}, | ||||
setInitialState, | setInitialState, | ||||
} = useModel('@@initialState'); | } = useModel('@@initialState'); | ||||
console.log(currentUser); | |||||
const tryLogout = useCallback(() => { | const tryLogout = useCallback(() => { | ||||
if (onLogoutBtnClick) onLogoutBtnClick(); | |||||
confirm({ | confirm({ | ||||
onOk() { | onOk() { | ||||
logout(); | logout(); | ||||
@@ -1,5 +1,5 @@ | |||||
import React, { useState } from 'react'; | import React, { useState } from 'react'; | ||||
import { Input, Button } from 'antd'; | |||||
import { Input, Button, Form } from 'antd'; | |||||
import styles from './login.less'; | import styles from './login.less'; | ||||
import { history, useModel } from 'umi'; | import { history, useModel } from 'umi'; | ||||
import { MobileFilled, LockFilled } from '@ant-design/icons'; | import { MobileFilled, LockFilled } from '@ant-design/icons'; | ||||
@@ -52,7 +52,7 @@ export default function Login() { | |||||
<div>欢迎使用</div> | <div>欢迎使用</div> | ||||
<div>locking</div> | <div>locking</div> | ||||
</div> | </div> | ||||
<div className={styles.form}> | |||||
<Form className={styles.form}> | |||||
<Input | <Input | ||||
size="large" | size="large" | ||||
prefix={<MobileFilled className={styles.icon} />} | prefix={<MobileFilled className={styles.icon} />} | ||||
@@ -71,10 +71,16 @@ export default function Login() { | |||||
onChange={(e) => setPassword(e.target.value)} | onChange={(e) => setPassword(e.target.value)} | ||||
/> | /> | ||||
<div className={styles.errText}>{errText}</div> | <div className={styles.errText}>{errText}</div> | ||||
<Button loading={loading} type="primary" block onClick={onLogin}> | |||||
<Button | |||||
loading={loading} | |||||
type="primary" | |||||
block | |||||
onClick={onLogin} | |||||
htmlType="submit" | |||||
> | |||||
登录 | 登录 | ||||
</Button> | </Button> | ||||
</div> | |||||
</Form> | |||||
</div> | </div> | ||||
); | ); | ||||
} | } |