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.

Commit9d43844

Browse files
authored
feat(dashboard): widgets UI/UX (#1354)
* refactor(dashboard): extract basic shape* refactor(dashboard): adjust codebase* feat(dashboard): basic widgets UI* feat(dashboard): adjust widgets store* feat(dashboard): enhance widgets settings items* feat(dashboard): clean up
1 parent2ed05d7 commit9d43844

35 files changed

+716
-212
lines changed

‎src/containers/thread/DashboardThread/Tags/ThreadSelector.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,10 @@ const ThreadSelector: FC = () => {
2626
</CatButton>
2727

2828
<CatButton
29-
ghost={thread!==THREAD.ROADMAP}
29+
ghost={thread!==THREAD.KANBAN}
3030
size="small"
31-
noBorder={thread!==THREAD.ROADMAP}
32-
onClick={()=>setThread(THREAD.ROADMAP)}
31+
noBorder={thread!==THREAD.KANBAN}
32+
onClick={()=>setThread(THREAD.KANBAN)}
3333
>
3434
看板墙
3535
</CatButton>

‎src/containers/thread/DashboardThread/UI/BannerLayout.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import type { TBannerLayout } from '@/spec'
55
import{BANNER_LAYOUT,DASHBOARD_DESC_LAYOUT}from'@/constant'
66
import{callDashboardDesc}from'@/utils/helper'
77

8-
import{Br,Space,SpaceGrow,Inline}from'@/widgets/Common'
8+
import{Row,Br,Space,SpaceGrow,Inline}from'@/widgets/Common'
99
importArrowButtonfrom'@/widgets/Buttons/ArrowButton'
1010
importCheckLabelfrom'@/widgets/CheckLabel'
1111

@@ -22,7 +22,6 @@ import {
2222
Block,
2323
Bar,
2424
Circle,
25-
Row,
2625
Main,
2726
ListsWrapper,
2827
TagssWrapper,

‎src/containers/thread/DashboardThread/UI/BannerNotifyLayout.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import type { TBannerNotifyLayout, TColorName } from '@/spec'
55
import{BANNER_NOTIFY_LAYOUT,DASHBOARD_DESC_LAYOUT}from'@/constant'
66
import{callDashboardDesc}from'@/utils/helper'
77

8-
import{Br,Space,SpaceGrow,Inline}from'@/widgets/Common'
8+
import{Row,Br,Space,SpaceGrow,Inline}from'@/widgets/Common'
99
importColorSelectorfrom'@/widgets/ColorSelector'
1010
importArrowButtonfrom'@/widgets/Buttons/ArrowButton'
1111
importCheckLabelfrom'@/widgets/CheckLabel'
@@ -20,7 +20,6 @@ import {
2020
Layout,
2121
LayoutTitle,
2222
Block,
23-
Row,
2423
Bar,
2524
NotifyTextBar,
2625
NotifyBar,

‎src/containers/thread/DashboardThread/UI/ChangelogLayout.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import type { TChangelogLayout } from '@/spec'
55
import{CHANGELOG_LAYOUT,DASHBOARD_DESC_LAYOUT}from'@/constant'
66
import{callDashboardDesc}from'@/utils/helper'
77

8-
import{Br,Space,SpaceGrow,Divider,Inline}from'@/widgets/Common'
8+
import{Row,Br,Space,SpaceGrow,Divider,Inline}from'@/widgets/Common'
99
importArrowButtonfrom'@/widgets/Buttons/ArrowButton'
1010
importCheckLabelfrom'@/widgets/CheckLabel'
1111

@@ -25,7 +25,6 @@ import {
2525
MiniIntro,
2626
Cover,
2727
MiniPic,
28-
Row,
2928
Column,
3029
UpvoteIcon,
3130
Picture,
@@ -83,9 +82,7 @@ const ChangelogLayout: FC<TProps> = ({ layout, isTouched, saving }) => {
8382
<Barlong={80}thin/>
8483
<Brtop={10}/>
8584
<Barlong={30}thin/>
86-
<Brtop={10}/>
87-
<Barlong={60}thin/>
88-
<Brtop={15}/>
85+
<Brtop={14}/>
8986
<Row>
9087
<UpvoteIconsize={15}/>
9188
<Spaceright={5}/>
@@ -94,7 +91,7 @@ const ChangelogLayout: FC<TProps> = ({ layout, isTouched, saving }) => {
9491
<Barlong={12}thin/>
9592
</Row>
9693

97-
<Divider/>
94+
<Dividertop={30}bottom={30}/>
9895

9996
<MiniItem>
10097
<Cover>

‎src/containers/thread/DashboardThread/UI/PostListLayout.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import type { TPostLayout } from '@/spec'
55
import{POST_LAYOUT,DASHBOARD_DESC_LAYOUT}from'@/constant'
66
import{callDashboardDesc}from'@/utils/helper'
77

8-
import{Br,Space,SpaceGrow,Inline}from'@/widgets/Common'
8+
import{Row,Br,Space,SpaceGrow,Inline}from'@/widgets/Common'
99
importArrowButtonfrom'@/widgets/Buttons/ArrowButton'
1010
importCheckLabelfrom'@/widgets/CheckLabel'
1111

@@ -21,7 +21,6 @@ import {
2121
Block,
2222
Bar,
2323
Circle,
24-
Row,
2524
Column,
2625
UpvoteIcon,
2726
CommentIcon,
Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
import{FC,memo}from'react'
2+
import{includes,reject,clone}from'ramda'
3+
4+
import{THREAD}from'@/constant'
5+
importColorSelectorfrom'@/widgets/ColorSelector'
6+
import{SpaceGrow,Br}from'@/widgets/Common'
7+
importToggleSwitchfrom'@/widgets/Buttons/ToggleSwitch'
8+
9+
importtype{TWidgetsSettings,TTouched}from'../spec'
10+
import{SETTING_FIELD}from'../constant'
11+
12+
importSectionLabelfrom'../SectionLabel'
13+
importSavingBarfrom'../SavingBar'
14+
15+
import{
16+
Wrapper,
17+
Label,
18+
TheColor,
19+
ThreadsWrapper,
20+
Section,
21+
Header,
22+
ThreadTitle,
23+
Desc,
24+
}from'../styles/widgets/base_setting'
25+
26+
import{edit}from'../logic'
27+
import{TThread}from'@/spec'
28+
29+
typeTProps={
30+
touched:TTouched
31+
settings:TWidgetsSettings
32+
}
33+
34+
constBaseSetting:FC<TProps>=({ settings, touched})=>{
35+
const{widgetsPrimaryColor:primaryColor, widgetsThreads, saving}=settings
36+
37+
constthreadOnChange=(checked:boolean,thread:TThread):void=>{
38+
constnewThreads=checked
39+
?[...widgetsThreads,thread]
40+
:reject((t)=>t===thread,clone(widgetsThreads))
41+
42+
edit(newThreads,'widgetsThreads')
43+
}
44+
45+
return(
46+
<Wrapper>
47+
<SectionLabel
48+
title="组件主题色"
49+
desc="默认与当前社区设置的主题色相一致。"
50+
/>
51+
<SavingBar
52+
isTouched={touched.widgetsPrimaryColor}
53+
field={SETTING_FIELD.WIDGETS_PRIMARY_COLOR}
54+
loading={saving}
55+
>
56+
<Labelcolor={primaryColor}>
57+
<ColorSelector
58+
activeColor={primaryColor}
59+
onChange={(color)=>edit(color,'widgetsPrimaryColor')}
60+
placement="right"
61+
offset={[-1,15]}
62+
>
63+
<TheColorcolor={primaryColor}/>
64+
</ColorSelector>
65+
</Label>
66+
</SavingBar>
67+
68+
<Brtop={35}/>
69+
<SectionLabel
70+
title="展示板块"
71+
desc="被勾选的板块会在组件中以 Tab 形式展示相关内容，展示样式与‘社区板块’中的设置保持一致"
72+
/>
73+
74+
<ThreadsWrapper>
75+
<Section>
76+
<Header>
77+
<ThreadTitle>讨论</ThreadTitle>
78+
<SpaceGrow/>
79+
<ToggleSwitch
80+
checked={includes(THREAD.POST,widgetsThreads)}
81+
onChange={(checked)=>threadOnChange(checked,THREAD.POST)}
82+
/>
83+
</Header>
84+
<Desc>社区内全部帖子列表</Desc>
85+
</Section>
86+
<Section>
87+
<Header>
88+
<ThreadTitle>看板</ThreadTitle>
89+
<SpaceGrow/>
90+
<ToggleSwitch
91+
checked={includes(THREAD.KANBAN,widgetsThreads)}
92+
onChange={(checked)=>threadOnChange(checked,THREAD.KANBAN)}
93+
/>
94+
</Header>
95+
<Desc>社区内看板内容，包含GTD标签</Desc>
96+
</Section>
97+
<Section>
98+
<Header>
99+
<ThreadTitle>更新日志</ThreadTitle>
100+
<SpaceGrow/>
101+
<ToggleSwitch
102+
checked={includes(THREAD.CHANGELOG,widgetsThreads)}
103+
onChange={(checked)=>threadOnChange(checked,THREAD.CHANGELOG)}
104+
/>
105+
</Header>
106+
<Desc>最新版本以及历史发布版本</Desc>
107+
</Section>
108+
<Section>
109+
<Header>
110+
<ThreadTitle>帮助台</ThreadTitle>
111+
<SpaceGrow/>
112+
<ToggleSwitch
113+
checked={includes(THREAD.HELP,widgetsThreads)}
114+
onChange={(checked)=>threadOnChange(checked,THREAD.HELP)}
115+
/>
116+
</Header>
117+
<Desc>常见问题与帮助中心文档</Desc>
118+
</Section>
119+
</ThreadsWrapper>
120+
121+
<Brtop={touched.widgetsThreads ?20 :70}/>
122+
123+
<SavingBar
124+
isTouched={touched.widgetsThreads}
125+
field={SETTING_FIELD.WIDGETS_THREADS}
126+
loading={saving}
127+
bottom={40}
128+
/>
129+
</Wrapper>
130+
)
131+
}
132+
133+
exportdefaultmemo(BaseSetting)
Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import{FC,memo}from'react'
2+
3+
importCopyButtonfrom'@/widgets/Buttons/CopyButton'
4+
5+
import{Wrapper,CopyBtnWrapper}from'../styles/widgets/code_area'
6+
7+
constCodeArea:FC=()=>{
8+
constid='your-id'
9+
constvalue=`<script async src="https://groupher.com/xxx" id="${id}" data-token="yyy" data-width="normal" />`
10+
11+
return(
12+
<Wrapper>
13+
{value}
14+
<CopyBtnWrapper>
15+
<CopyButtonvalue={value}/>
16+
</CopyBtnWrapper>
17+
</Wrapper>
18+
)
19+
}
20+
21+
exportdefaultmemo(CodeArea)

‎src/containers/thread/DashboardThread/Widgets/index.tsx‎

Lines changed: 113 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,124 @@
11
import{FC,memo}from'react'
22

3-
import{Wrapper}from'../styles/widgets'
3+
import{Br}from'@/widgets/Common'
4+
importTabsfrom'@/widgets/Switcher/Tabs'
5+
importButtonfrom'@/widgets/Buttons/Button'
6+
import{Radio}from'@/widgets/Switcher'
7+
8+
importtype{TWidgetsSettings,TTouched}from'../spec'
9+
import{WIDGET_TYPES}from'../constant'
10+
11+
importPortalfrom'../Portal'
12+
importBaseSettingfrom'./BaseSetting'
13+
importCodeAreafrom'./CodeArea'
14+
15+
import{
16+
Wrapper,
17+
TypeSelect,
18+
TabWrapper,
19+
BtnWrapper,
20+
ViewIcon,
21+
HintTitle,
22+
HintDesc,
23+
InputWrapper,
24+
InputLabel,
25+
Inputer,
26+
}from'../styles/widgets'
27+
import{edit,onSave}from'../logic'
28+
29+
exportconstTAB_ITEMS=[
30+
{
31+
title:'侧边栏',
32+
raw:'sidebar',
33+
},
34+
{
35+
title:'居中模态框',
36+
raw:'modal',
37+
},
38+
{
39+
title:'弹出提示',
40+
raw:'modal',
41+
},
42+
{
43+
title:'页面内嵌',
44+
raw:'iframe',
45+
},
46+
{
47+
title:'链接',
48+
raw:'link',
49+
},
50+
]
451

552
typeTProps={
6-
testid?:string
53+
settings:TWidgetsSettings
54+
touched:TTouched
755
}
856

9-
constWidgets:FC<TProps>=({ testid='widgets'})=>{
57+
constWidgets:FC<TProps>=({ settings, touched})=>{
58+
const{ widgetsType}=settings
59+
1060
return(
1161
<Wrapper>
12-
<div>Widgets</div>
62+
<Portal
63+
title="网站插件"
64+
desc="为您的主页添加社区，更新日志，看板等插件，让产品用户及时方便的了解最新动态。"
65+
/>
66+
67+
<BaseSettingsettings={settings}touched={touched}/>
68+
<TypeSelect>
69+
<TabWrapper>
70+
<Tabs
71+
items={WIDGET_TYPES}
72+
size="small"
73+
activeKey={widgetsType}
74+
bottomSpace={4}
75+
onChange={(raw)=>{
76+
edit(raw,'widgetsType')
77+
onSave('widgetsType',true)
78+
}}
79+
/>
80+
</TabWrapper>
81+
<Buttonsize="small"space={8}top={-2}right={2}ghost>
82+
<BtnWrapper>
83+
<ViewIcon/>
84+
预览
85+
</BtnWrapper>
86+
</Button>
87+
</TypeSelect>
88+
<InputWrapper>
89+
<InputLabel>目标元素 ID:</InputLabel>
90+
<Inputer/>
91+
</InputWrapper>
92+
<InputWrapper>
93+
<InputLabel>组件尺寸:</InputLabel>
94+
<Radio
95+
size="small"
96+
left={-20}
97+
items={[
98+
{
99+
value:'小',
100+
key:'1',
101+
},
102+
{
103+
value:'中',
104+
key:'2',
105+
dimOnActive:true,
106+
},
107+
{
108+
value:'大',
109+
key:'3',
110+
dimOnActive:true,
111+
},
112+
]}
113+
activeKey="1"
114+
/>
115+
</InputWrapper>
116+
<Brtop={30}/>
117+
<HintTitle>启用网站插件，请复制以下代码到您的站点源码中。</HintTitle>
118+
<Brtop={8}/>
119+
<CodeArea/>
120+
<Brtop={10}/>
121+
<HintDesc>如果团队中缺乏相关技术人员，请联系我们。</HintDesc>
13122
</Wrapper>
14123
)
15124
}

0 commit comments

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