Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

Commit14abe32

Browse files
committed
refactor: UI/UX adjust
1 parent4e1a890 commit14abe32

File tree

16 files changed

+377
-87
lines changed

16 files changed

+377
-87
lines changed
Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import{FC,memo}from'react'
2+
3+
import{INGroup,RGroup}from'./Groups'
4+
import{GROUPS}from'./constant'
5+
6+
typeTProps={
7+
activeGroup:string
8+
}
9+
10+
constContent:FC<TProps>=({ activeGroup})=>{
11+
switch(activeGroup){
12+
case'R':{
13+
return<RGroupqr={GROUPS[activeGroup].QR}/>
14+
}
15+
16+
default:{
17+
return<INGroupqr={GROUPS[activeGroup].QR}/>
18+
}
19+
}
20+
}
21+
22+
exportdefaultmemo(Content)
Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import{FC,memo}from'react'
2+
3+
importButtonfrom'@/components/Buttons/Button'
4+
import{
5+
Wrapper,
6+
Note,
7+
WelcomeWrapper,
8+
Welcome,
9+
WelcomeDesc,
10+
}from'./styles/footer'
11+
12+
typeTProps={
13+
onConfirm:()=>void
14+
mask:boolean
15+
}
16+
17+
constFooter:FC<TProps>=({ onConfirm, mask})=>{
18+
return(
19+
<Wrapper>
20+
<Note>
21+
为营造一个有意义的交流氛围，请阅读对应的「进群须知」后谨慎加入，谢谢理解。
22+
</Note>
23+
{mask ?(
24+
<ButtononClick={onConfirm}>确定加入</Button>
25+
) :(
26+
<WelcomeWrapper>
27+
<Welcome>欢迎加入</Welcome>
28+
<WelcomeDesc>期待你的宝贵意见</WelcomeDesc>
29+
</WelcomeWrapper>
30+
)}
31+
</Wrapper>
32+
)
33+
}
34+
35+
exportdefaultmemo(Footer)

‎src/containers/tool/JoinModal/FooterWechat.js‎

Lines changed: 0 additions & 23 deletions
This file was deleted.
Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import{FC,useState}from'react'
2+
3+
importFooterfrom'./Footer'
4+
import{
5+
Wrapper,
6+
InnerWrapper,
7+
QRCodePic,
8+
Title,
9+
DescWrapper,
10+
UL,
11+
LI,
12+
Focus,
13+
}from'./styles/groups'
14+
15+
typeTProps={
16+
qr:string
17+
}
18+
19+
exportconstINGroup:FC<TProps>=({ qr})=>{
20+
const[mask,setMask]=useState(true)
21+
22+
return(
23+
<Wrapper>
24+
<InnerWrapper>
25+
<QRCodePicsrc={qr}noLazymask={mask}/>
26+
<DescWrapper>
27+
<Title>进群须知：</Title>
28+
<UL>
29+
<LI>
30+
本群内<Focus>仅限于</Focus>讨论和「CoderPlanets」相关的话题。
31+
</LI>
32+
<LI>
33+
除自我介绍外，在本群内<Focus>摸鱼吹水等同于自我退群声明</Focus>。
34+
</LI>
35+
<LI>
36+
本群<Focus>不欢迎潜水</Focus>
37+
，每月会不定期清理潜水人员以保持低水位，请确保你对本社区有持续的兴趣。
38+
</LI>
39+
<LI>
40+
群内有价值的内容会<Focus>定期同步</Focus>
41+
到反馈建议子社区，你不会因为不在群里而错过任何东西。
42+
</LI>
43+
</UL>
44+
</DescWrapper>
45+
</InnerWrapper>
46+
<FooteronConfirm={()=>setMask(false)}mask={mask}/>
47+
</Wrapper>
48+
)
49+
}
50+
51+
// 雷达站
52+
exportconstRGroup:FC<TProps>=({ qr})=>{
53+
const[mask,setMask]=useState(true)
54+
55+
return(
56+
<Wrapper>
57+
<InnerWrapper>
58+
<QRCodePicsrc={qr}noLazymask={mask}/>
59+
<DescWrapper>
60+
<Title>进群须知：</Title>
61+
<UL>
62+
<LI>
63+
本群内<Focus>仅限于</Focus>
64+
讨论信息（源）搜集等「雷达」相关的话题。
65+
</LI>
66+
<LI>
67+
除自我介绍外，在本群内<Focus>摸鱼吹水等同于自我退群声明</Focus>。
68+
</LI>
69+
<LI>
70+
本群<Focus>不欢迎潜水</Focus>
71+
，每月会不定期清理潜水人员以保持低水位，请确保你对本社区有持续的兴趣。
72+
</LI>
73+
<LI>
74+
群内有价值的内容会<Focus>定期同步</Focus>
75+
到各个社区的雷达版块，你不会因为不在群里而错过任何东西。
76+
</LI>
77+
</UL>
78+
</DescWrapper>
79+
</InnerWrapper>
80+
<FooteronConfirm={()=>setMask(false)}mask={mask}/>
81+
</Wrapper>
82+
)
83+
}
Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import{FC,memo}from'react'
2+
import{keys}from'ramda'
3+
4+
import{ICON}from'@/config'
5+
6+
import{SpaceGrow}from'@/components/Common'
7+
importTooltipfrom'@/components/Tooltip'
8+
9+
import{GROUPS}from'./constant'
10+
import{
11+
Wrapper,
12+
WechatLogo,
13+
Title,
14+
SelectWrapper,
15+
Letter,
16+
}from'./styles/header'
17+
import{switchGroup}from'./logic'
18+
19+
typeTProps={
20+
activeGroup:string
21+
}
22+
23+
constHeader:FC<TProps>=({ activeGroup})=>{
24+
return(
25+
<Wrapper>
26+
<Title>
27+
<WechatLogosrc={`${ICON}/social/wechat-share.png`}/> 加入微信群
28+
</Title>
29+
<SpaceGrow/>
30+
<SelectWrapper>
31+
{keys(GROUPS).map((group)=>(
32+
<Tooltipkey={group}content={GROUPS[group].title}>
33+
<Letter
34+
$active={activeGroup===group}
35+
onClick={()=>switchGroup(group)}
36+
>
37+
{group}
38+
</Letter>
39+
</Tooltip>
40+
))}
41+
</SelectWrapper>
42+
</Wrapper>
43+
)
44+
}
45+
46+
exportdefaultmemo(Header)
Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import{ICON_BASE}from'@/config'
2+
3+
exportconstGROUPS={
4+
IN:{
5+
title:'CP 内测群',
6+
QR:`${ICON_BASE}/cps_wechat_group.png`,
7+
},
8+
// V: {
9+
// title: 'CP 志愿者',
10+
// QR: `${ICON_BASE}/cps_wechat_group.png`,
11+
// },
12+
// 雷达站
13+
R:{
14+
title:'CP 雷达站',
15+
QR:`${ICON_BASE}/cps_wechat_group.png`,
16+
},
17+
// 创作者群
18+
W:{
19+
title:'CP Makers',
20+
QR:`${ICON_BASE}/cps_wechat_group.png`,
21+
},
22+
G:{
23+
title:'CP 酷导航',
24+
QR:`${ICON_BASE}/cps_wechat_group.png`,
25+
},
26+
D:{
27+
title:'CP 来一杯',
28+
QR:`${ICON_BASE}/cps_wechat_group.png`,
29+
},
30+
}
31+
32+
exportconstholder=1
Lines changed: 14 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,41 @@
1-
//
2-
31
/*
4-
*
52
* JoinModal
6-
*
73
*/
84

9-
importReactfrom'react'
10-
importTfrom'prop-types'
5+
import{FC}from'react'
116

127
import{buildLog}from'@/utils/logger'
138
import{pluggedIn}from'@/utils/mobx'
149

1510
importModalfrom'@/components/Modal'
16-
importFooterWechatfrom'./FooterWechat'
1711

18-
import{Wrapper}from'./styles'
12+
importHeaderfrom'./Header'
13+
importContentfrom'./Content'
1914

15+
importtype{TStore}from'./store'
16+
import{Wrapper}from'./styles'
2017
import{useInit,onClose}from'./logic'
2118

2219
/* eslint-disable-next-line */
2320
constlog=buildLog('C:JoinModal')
2421

25-
constJoinModalContainer=({joinModal:store})=>{
22+
typeTProps={
23+
joinModal?:TStore
24+
}
25+
26+
constJoinModalContainer:FC<TProps>=({joinModal:store})=>{
2627
useInit(store)
2728

28-
const{ show}=store
29+
const{ show, activeGroup}=store
2930

3031
return(
3132
<Modalwidth="600px"show={show}showCloseBtnonClose={onClose}>
3233
<Wrappertestid="joinModal">
33-
<FooterWechat/>
34+
<HeaderactiveGroup={activeGroup}/>
35+
<ContentactiveGroup={activeGroup}/>
3436
</Wrapper>
3537
</Modal>
3638
)
3739
}
3840

39-
JoinModalContainer.propTypes={
40-
joinModal:T.any.isRequired,
41-
}
42-
43-
JoinModalContainer.defaultProps={}
44-
45-
exportdefaultpluggedIn(JoinModalContainer)
41+
exportdefaultpluggedIn(JoinModalContainer)asFC<TProps>

‎src/containers/tool/JoinModal/logic.js‎renamed to ‎src/containers/tool/JoinModal/logic.ts‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,36 @@
11
import{useEffect}from'react'
22

33
import{EVENT}from'@/constant'
4-
import{asyncSuit,buildLog}from'@/utils'
4+
importasyncSuitfrom'@/utils/async'
5+
import{buildLog}from'@/utils/logger'
6+
7+
importtype{TStore}from'./store'
58

69
const{SR71, asyncRes, $solver}=asyncSuit
710
constsr71$=newSR71({
11+
//@ts-ignore
812
receive:[EVENT.JOIN_US],
913
})
1014

11-
letstore=null
15+
letstore:TStore|undefined
1216
letsub$=null
1317

1418
/* eslint-disable-next-line */
1519
constlog=buildLog('L:JoinModal')
1620

21+
exportconstswitchGroup=(activeGroup:string):void=>{
22+
store.mark({ activeGroup})
23+
}
24+
1725
/**
1826
* close current modal
1927
*/
20-
exportconstonClose=()=>store.mark({show:false})
28+
exportconstonClose=():void=>store.mark({show:false})
2129

2230
constDataResolver=[
2331
{
2432
match:asyncRes(EVENT.JOIN_US),
25-
action:(data)=>{
33+
action:()=>{
2634
store.mark({show:true})
2735
},
2836
},
@@ -31,7 +39,7 @@ const DataResolver = [
3139
// ###############################
3240
// init & uninit
3341
// ###############################
34-
exportconstuseInit=(_store)=>{
42+
exportconstuseInit=(_store:TStore):void=>{
3543
useEffect(()=>{
3644
store=_store
3745
log(store)
@@ -40,7 +48,7 @@ export const useInit = (_store) => {
4048
}
4149

4250
return()=>{
43-
if(!sub$)returnfalse
51+
if(!sub$)return
4452
sr71$.stop()
4553
sub$.unsubscribe()
4654
sub$=null

‎src/containers/tool/JoinModal/store.js‎renamed to ‎src/containers/tool/JoinModal/store.ts‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,20 @@
33
*
44
*/
55

6-
import{typesasT,getParent}from'mobx-state-tree'
6+
import{typesasT,Instance}from'mobx-state-tree'
77

88
import{markStates}from'@/utils/mobx'
99

1010
constJoinModal=T.model('JoinModal',{
1111
show:T.optional(T.boolean,false),
12+
activeGroup:T.optional(T.string,'IN'),
1213
})
13-
.views((self)=>({
14-
getroot(){
15-
returngetParent(self)
16-
},
17-
}))
14+
.views((self)=>({}))
1815
.actions((self)=>({
1916
mark(sobj){
2017
markStates(sobj,self)
2118
},
2219
}))
2320

21+
exporttypeTStore=Instance<typeofJoinModal>
2422
exportdefaultJoinModal

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp