Skip to content
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

Commit b394923

Browse files
mydearxymmydearxym
committed
chore: merge branch 'dev'
2 parents e6f5e17 + d9e5e58 commit b394923

File tree

5 files changed

+147
-20
lines changed

5 files changed

+147
-20
lines changed

‎containers/Header/UserAccount.js

Lines changed: 75 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,84 @@
11
import React from 'react'
22

33
import { ICON_CMD } from 'config/assets'
4-
import * as logic from './logic'
4+
import Popover from 'components/Popover'
55

6-
import { Wrapper, DefaultUserIcon, AvatarIcon } from './styles/user_account'
6+
import { onLogin, onLogout, previewAccount } from './logic'
77

8-
const UserAccount = ({ isLogin, accountInfo }) => {
9-
return (
10-
<React.Fragment>
11-
{isLogin ? (
12-
<Wrapper onClick={logic.previewAccount.bind(this, 'account')}>
8+
import {
9+
Wrapper,
10+
PopMenu,
11+
MenuItem,
12+
MenuLink,
13+
LoginBadge,
14+
LoginDesc,
15+
LoginName,
16+
DefaultUserIcon,
17+
LogoutItem,
18+
AvatarIcon,
19+
MenuDivider,
20+
} from './styles/user_account'
21+
22+
const UserAccount = ({ isLogin, accountInfo }) => (
23+
<React.Fragment>
24+
{isLogin ? (
25+
<Popover
26+
placement="bottomLeft"
27+
trigger="hover"
28+
content={
29+
<PopMenu>
30+
<LoginBadge>
31+
<LoginDesc>使用 Github 登陆:</LoginDesc>
32+
<LoginName>{accountInfo.login}</LoginName>
33+
</LoginBadge>
34+
<MenuDivider />
35+
<MenuItem onClick={previewAccount.bind(this, 'account')}>
36+
预览
37+
</MenuItem>
38+
<MenuLink
39+
href={`/user/${accountInfo.login}`}
40+
rel="noopener noreferrer"
41+
target="_blank"
42+
>
43+
我的主页
44+
</MenuLink>
45+
<MenuLink
46+
href={`/user/${accountInfo.login}?tab=favorites`}
47+
rel="noopener noreferrer"
48+
target="_blank"
49+
>
50+
我的收藏
51+
</MenuLink>
52+
<MenuLink
53+
href={`/user/${accountInfo.login}?tab=billing`}
54+
rel="noopener noreferrer"
55+
target="_blank"
56+
>
57+
我的账单
58+
</MenuLink>
59+
<MenuDivider />
60+
<MenuLink
61+
href={`/user/${accountInfo.login}?tab=settings`}
62+
rel="noopener noreferrer"
63+
target="_blank"
64+
>
65+
设置
66+
</MenuLink>
67+
<MenuItem>帮助</MenuItem>
68+
<LogoutItem onClick={onLogout}>登出</LogoutItem>
69+
</PopMenu>
70+
}
71+
>
72+
<Wrapper>
1373
<AvatarIcon src={accountInfo.avatar} />
1474
</Wrapper>
15-
) : (
16-
<Wrapper onClick={logic.login}>
17-
<DefaultUserIcon src={`${ICON_CMD}/default_user.svg`} />
18-
</Wrapper>
19-
)}
20-
</React.Fragment>
21-
)
22-
}
75+
</Popover>
76+
) : (
77+
<Wrapper onClick={onLogin}>
78+
<DefaultUserIcon src={`${ICON_CMD}/default_user.svg`} />
79+
</Wrapper>
80+
)}
81+
</React.Fragment>
82+
)
2383

2484
export default UserAccount

‎containers/Header/logic.js

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
thread2Subpath,
1313
atomizeValues,
1414
errRescue,
15+
Global,
1516
// getParameterByName,
1617
} from 'utils'
1718

@@ -45,7 +46,15 @@ export const onThreadChange = thread => {
4546
store.setViewing({ activeThread })
4647
}
4748

48-
export const login = () => dispatchEvent(EVENT.LOGIN_PANEL)
49+
export const onLogin = () => dispatchEvent(EVENT.LOGIN_PANEL)
50+
export const onLogout = () => {
51+
store.logout()
52+
53+
setTimeout(() => {
54+
Global.location.reload(false)
55+
}, 2000)
56+
}
57+
4958
export const openDoraemon = () => store.openDoraemon()
5059
export const upgradeHepler = () => store.upgradeHepler()
5160

‎containers/Header/store.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,9 @@ const HeaderStore = t
5757
},
5858
}))
5959
.actions(self => ({
60+
logout() {
61+
self.root.account.logout()
62+
},
6063
updateSesstion(state) {
6164
self.root.account.updateSesstion(state)
6265
},

‎containers/Header/styles/user_account.js

Lines changed: 58 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,68 @@
11
import styled from 'styled-components'
22

33
import Img from 'components/Img'
4-
import { theme } from 'utils'
4+
import { theme, cs } from 'utils'
55

66
export const Wrapper = styled.div`
77
margin-right: 20px;
88
`
9+
10+
export const PopMenu = styled.div`
11+
${cs.flexColumn()};
12+
`
13+
14+
export const MenuItem = styled.div`
15+
padding: 4px 13px;
16+
color: ${theme('thread.articleTitle')};
17+
opacity: 0.9;
18+
&:hover {
19+
background: ${theme('thread.articleHover')};
20+
opacity: 1;
21+
cursor: pointer;
22+
}
23+
`
24+
25+
export const MenuLink = styled.a`
26+
padding: 4px 13px;
27+
color: ${theme('thread.articleTitle')};
28+
opacity: 0.9;
29+
&:hover {
30+
background: ${theme('thread.articleHover')};
31+
opacity: 1;
32+
cursor: pointer;
33+
text-decoration: underline;
34+
}
35+
`
36+
37+
export const LoginBadge = styled.div`
38+
padding: 7px 13px;
39+
`
40+
export const LoginDesc = styled.div`
41+
color: ${theme('thread.articleDigest')};
42+
`
43+
export const LoginName = styled.div`
44+
color: ${theme('thread.articleTitle')};
45+
font-weight: bold;
46+
`
47+
48+
export const LogoutItem = styled.div`
49+
padding: 5px 13px;
50+
padding-bottom: 6px;
51+
color: ${theme('thread.articleTitle')};
52+
&:hover {
53+
color: ${theme('baseColor.error')};
54+
background: ${theme('thread.articleHover')};
55+
cursor: pointer;
56+
}
57+
`
58+
59+
export const MenuDivider = styled.div`
60+
margin-top: 3px;
61+
margin-bottom: 3px;
62+
border-bottom: 2px solid;
63+
border-bottom-color: ${theme('thread.articleDivider')};
64+
`
65+
966
export const AvatarIcon = styled.img`
1067
width: 20px;
1168
height: 20px;

‎containers/schemas/pages/user.js

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -69,10 +69,8 @@ export const sessionState = `
6969
sessionState {
7070
isValid
7171
user {
72-
id
72+
${F.author}
7373
geoCity
74-
nickname
75-
avatar
7674
bio
7775
fromGithub
7876
location

0 commit comments

Comments
 (0)