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

Commit 1fcb2a3

Browse files
mydearxymmydearxym
authored
feat(about-thread): community states UI (#1289)
* refactor(about-thread): sidebar concept * refactor(about-thread): social list for sidebar * refactor(about-thread): status make pretty
1 parent 08b471b commit 1fcb2a3

File tree

13 files changed

+401
-16
lines changed

13 files changed

+401
-16
lines changed

‎src/containers/thread/AboutThread/BasicStates/index.tsx‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import { FC, memo } from 'react'
2+
3+
import Trend from 'react-trend'
4+
import { useTheme } from 'styled-components'
5+
import type { TThemeMap } from '@/spec'
6+
7+
import {
8+
Wrapper,
9+
Block,
10+
UsersWrapper,
11+
UsersIcon,
12+
ContentWrapper,
13+
ContentIcon,
14+
CommentsWrapper,
15+
CommentIcon,
16+
EmojisWrapper,
17+
EmojiIcon,
18+
TrendWrapper,
19+
TrendIcon,
20+
Title,
21+
Desc,
22+
Num,
23+
TrendLineWrapper,
24+
} from '../styles/basic_states'
25+
26+
const BasicStates: FC = () => {
27+
const theme = useTheme() as TThemeMap
28+
29+
const {
30+
heatmap: { activityLow, activityHight },
31+
} = theme
32+
33+
return (
34+
<Wrapper>
35+
<Block>
36+
<TrendWrapper>
37+
<TrendIcon />
38+
</TrendWrapper>
39+
<Title>活跃度</Title>
40+
<Desc>最近 30 天</Desc>
41+
<TrendLineWrapper>
42+
<Trend
43+
smooth
44+
width={80}
45+
height={30}
46+
data={[2, 3, 6, 0, 2, 10, 8, 8, 22, 33, 2, 3, 4, 5, 6]}
47+
gradient={[activityLow, activityHight]}
48+
radius={15}
49+
strokeWidth={1}
50+
strokeLinecap="round"
51+
/>
52+
</TrendLineWrapper>
53+
</Block>
54+
<Block>
55+
<UsersWrapper>
56+
<UsersIcon />
57+
</UsersWrapper>
58+
<Title>参与者</Title>
59+
<Desc>参与反馈的用户总数</Desc>
60+
<Num>28</Num>
61+
</Block>
62+
<Block>
63+
<ContentWrapper>
64+
<ContentIcon />
65+
</ContentWrapper>
66+
<Title>内容</Title>
67+
<Desc>所有内容总数</Desc>
68+
<Num>12k</Num>
69+
</Block>
70+
<Block>
71+
<CommentsWrapper>
72+
<CommentIcon />
73+
</CommentsWrapper>
74+
<Title>评论</Title>
75+
<Desc>所有评论总数</Desc>
76+
<Num>237</Num>
77+
</Block>
78+
<Block>
79+
<EmojisWrapper>
80+
<EmojiIcon />
81+
</EmojisWrapper>
82+
<Title>表情</Title>
83+
<Desc>收到的 Emoji 总数</Desc>
84+
<Num>374</Num>
85+
</Block>
86+
</Wrapper>
87+
)
88+
}
89+
90+
export default memo(BasicStates)

‎src/containers/thread/AboutThread/Sidebar.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { FC, memo } from 'react'
2+
3+
import { Br } from '@/widgets/Common'
4+
import SocialList from './SocialList'
5+
6+
import {
7+
Wrapper,
8+
Block,
9+
Title,
10+
Reports,
11+
ReportsArticle,
12+
Press,
13+
Desc,
14+
} from './styles/sidebar'
15+
16+
const Sidebar: FC = () => {
17+
return (
18+
<Wrapper>
19+
<Block>
20+
<Title>关注我们</Title>
21+
<SocialList />
22+
</Block>
23+
<Block>
24+
<Title>媒体报道</Title>
25+
<Reports>
26+
<Press>36kr</Press>
27+
<ReportsArticle>
28+
新一代xxx一体化协作平台「XXX」获1000万元Pre
29+
</ReportsArticle>
30+
</Reports>
31+
<Br top={5} />
32+
<Reports>
33+
<Press>科技周刊</Press>
34+
<ReportsArticle>这个平台太酷了</ReportsArticle>
35+
</Reports>
36+
</Block>
37+
<Block>
38+
<Title>播客</Title>
39+
<Reports>喜马拉雅</Reports>
40+
</Block>
41+
<Block>
42+
<Title>加入我们</Title>
43+
<Desc>前端工程师，运营</Desc>
44+
</Block>
45+
<Block>
46+
<Title>所在地</Title>
47+
<Desc>成都, 厦门</Desc>
48+
</Block>
49+
</Wrapper>
50+
)
51+
}
52+
53+
export default memo(Sidebar)

‎src/containers/thread/AboutThread/SocialList.tsx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { FC, memo } from 'react'
2+
3+
import { ICON_CMD } from '@/config'
4+
5+
import { Wrapper, SocialWrapper, Icon, Title } from './styles/social_list'
6+
7+
const defaultItems = [
8+
// {
9+
// iconSrc: `${ICON_CMD}/navi/location.svg`,
10+
// title: '成都',
11+
// },
12+
// {
13+
// iconSrc: `${ICON_CMD}/navi/space_in.svg`,
14+
// title: '官网',
15+
// },
16+
{
17+
iconSrc: `${ICON_CMD}/github.svg`,
18+
title: 'Github',
19+
},
20+
{
21+
iconSrc: `${ICON_CMD}/navi/twitter.svg`,
22+
title: 'Twitter',
23+
},
24+
{
25+
iconSrc: `${ICON_CMD}/drink/zhihu.svg`,
26+
title: '知乎',
27+
},
28+
]
29+
30+
type TProps = {
31+
items?: {
32+
iconSrc: string
33+
title: string
34+
}[]
35+
}
36+
37+
const SocialList: FC<TProps> = ({ items = defaultItems }) => {
38+
return (
39+
<Wrapper>
40+
{items.map((item) => (
41+
<SocialWrapper key={item.title}>
42+
<Icon src={item.iconSrc} />
43+
<Title>{item.title}</Title>
44+
</SocialWrapper>
45+
))}
46+
</Wrapper>
47+
)
48+
}
49+
50+
export default memo(SocialList)

‎src/containers/thread/AboutThread/index.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,11 @@ import { FC } from 'react'
99
import { bond } from '@/utils/mobx'
1010

1111
import Members from './Members'
12+
import BasicStates from './BasicStates'
1213

1314
import type { TStore } from './store'
15+
import Sidebar from './Sidebar'
16+
1417
import { Wrapper, MainWrapper, Block, BottomBlock, Title, Desc } from './styles'
1518
import { useInit } from './logic' /* eslint-disable-next-line */
1619

@@ -41,18 +44,15 @@ const AboutThreadContainer: FC<TProps> = ({
4144
</Block>
4245

4346
<Block>
44-
<Title>社区基本概况</Title>
45-
<Desc>(订阅人数 / 内容数 / 趋势)</Desc>
46-
</Block>
47-
<Block>
48-
<Members />
47+
<Title>社区概况</Title>
48+
<BasicStates />
4949
</Block>
5050

5151
<BottomBlock>
52-
<Title>联系我们</Title>
53-
<Desc>邮件 / Twitter / Weibo / xxx</Desc>
52+
<Members />
5453
</BottomBlock>
5554
</MainWrapper>
55+
<Sidebar />
5656
</Wrapper>
5757
)
5858
}

‎src/containers/thread/AboutThread/styles/basic_states/index.ts‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import styled from 'styled-components'
2+
3+
import type { TTestable } from '@/spec'
4+
import css, { theme } from '@/utils/css'
5+
import PostSVG from '@/icons/Post'
6+
import CommentSVG from '@/icons/Comment'
7+
import UserSVG from '@/icons/User'
8+
import EmojiSVG from '@/icons/Emoji'
9+
import PulseSVG from '@/icons/Pulse'
10+
11+
export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
12+
'data-test-id': testid,
13+
}))<TTestable>`
14+
${css.flex()};
15+
width: calc(100% + 38px);
16+
/* border: 1px solid; */
17+
margin-top: 30px;
18+
margin-bottom: 16px;
19+
`
20+
export const Block = styled.div`
21+
${css.flexColumn('align-start')};
22+
width: 20%;
23+
height: 100px;
24+
`
25+
const IconWrapper = styled.div`
26+
${css.circle(24)};
27+
${css.flex('align-both')};
28+
margin-bottom: 12px;
29+
opacity: 0.65;
30+
margin-left: -1px;
31+
`
32+
export const UsersWrapper = styled(IconWrapper)`
33+
background: #c5e1f4;
34+
`
35+
export const ContentWrapper = styled(IconWrapper)`
36+
background: #d5c7e0;
37+
`
38+
export const CommentsWrapper = styled(IconWrapper)`
39+
background: #f9dfc9;
40+
`
41+
export const EmojisWrapper = styled(IconWrapper)`
42+
background: #bcede5;
43+
`
44+
export const TrendWrapper = styled(IconWrapper)`
45+
background: #dfdfdf;
46+
`
47+
export const UsersIcon = styled(UserSVG)`
48+
${css.size(12)};
49+
fill: #2f71ff;
50+
`
51+
export const ContentIcon = styled(PostSVG)`
52+
${css.size(14)};
53+
fill: #860075;
54+
`
55+
export const CommentIcon = styled(CommentSVG)`
56+
${css.size(15)};
57+
fill: #e75908;
58+
`
59+
export const EmojiIcon = styled(EmojiSVG)`
60+
${css.size(14)};
61+
fill: #00a88b;
62+
`
63+
export const TrendIcon = styled(PulseSVG)`
64+
${css.size(14)};
65+
fill: ${theme('thread.articleTitle')};
66+
`
67+
export const Title = styled.div`
68+
color: ${theme('thread.articleTitle')};
69+
font-weight: 600;
70+
font-size: 13px;
71+
`
72+
export const Desc = styled.div`
73+
color: ${theme('thread.articleDigest')};
74+
font-size: 10px;
75+
`
76+
export const Num = styled.div`
77+
color: ${theme('thread.articleTitle')};
78+
font-size: 24px;
79+
font-weight: 600;
80+
margin-top: 5px;
81+
`
82+
export const TrendLineWrapper = styled.div`
83+
margin-top: 8px;
84+
margin-left: -5px;
85+
width: 100%;
86+
`

‎src/containers/thread/AboutThread/styles/index.ts‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,19 @@ import css, { theme } from '@/utils/css'
66
export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
77
'data-test-id': testid,
88
}))<TTestable>`
9-
${css.flex()};
9+
${css.flex('align-start')};
1010
width: 100%;
1111
`
1212
export const MainWrapper = styled.div`
13-
flex-grow: 1;
14-
width: 100%;
13+
width: auto;
1514
min-height: 500px;
15+
flex-grow: 1;
1616
1717
background: transparent;
1818
border-radius: 6px;
1919
margin-top: 12px;
2020
padding-left: 25px;
21-
padding-right: 80px;
22-
margin-right: 65px;
21+
/* padding-right: 80px; */
2322
/* border-right: 1px solid #eae9e9; */
2423
`
2524
export const Block = styled.div`

‎src/containers/thread/AboutThread/styles/sidebar.ts‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import styled from 'styled-components'
2+
3+
import css, { theme } from '@/utils/css'
4+
5+
export const Wrapper = styled.div`
6+
width: 300px;
7+
height: auto;
8+
/* background: #f1f3f4; */
9+
border: 1px solid;
10+
/* border-top: 2px solid; */
11+
border-color: #eae9e9;
12+
border-radius: 5px;
13+
padding: 20px;
14+
padding-bottom: 0;
15+
margin-top: 12px;
16+
margin-left: 80px;
17+
`
18+
export const Block = styled.div`
19+
margin-bottom: 20px;
20+
`
21+
export const Title = styled.div`
22+
font-size: 14px;
23+
color: ${theme('thread.articleDigest')};
24+
font-weight: 600;
25+
margin-bottom: 10px;
26+
`
27+
export const Desc = styled.div`
28+
font-size: 14px;
29+
color: ${theme('thread.articleDigest')};
30+
line-height: 1.6;
31+
`
32+
export const Reports = styled.div`
33+
${css.flex('align-center')};
34+
`
35+
export const ReportsArticle = styled(Desc)`
36+
${css.lineClamp(1)};
37+
`
38+
export const Press = styled.div`
39+
/* color: #ec633f; */
40+
color: ${theme('thread.extraInfo')};
41+
font-weight: 600;
42+
font-size: 13px;
43+
margin-right: 8px;
44+
cursor: pointer;
45+
`

0 commit comments

Comments
 (0)