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

Commit 9d43844

Browse files
mydearxymmydearxym
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 parent 2ed05d7 commit 9d43844

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
import ArrowButton from '@/widgets/Buttons/ArrowButton'
1010
import CheckLabel from '@/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
import ColorSelector from '@/widgets/ColorSelector'
1010
import ArrowButton from '@/widgets/Buttons/ArrowButton'
1111
import CheckLabel from '@/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
import ArrowButton from '@/widgets/Buttons/ArrowButton'
1010
import CheckLabel from '@/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
<Bar long={80} thin />
8483
<Br top={10} />
8584
<Bar long={30} thin />
86-
<Br top={10} />
87-
<Bar long={60} thin />
88-
<Br top={15} />
85+
<Br top={14} />
8986
<Row>
9087
<UpvoteIcon size={15} />
9188
<Space right={5} />
@@ -94,7 +91,7 @@ const ChangelogLayout: FC<TProps> = ({ layout, isTouched, saving }) => {
9491
<Bar long={12} thin />
9592
</Row>
9693

97-
<Divider />
94+
<Divider top={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
import ArrowButton from '@/widgets/Buttons/ArrowButton'
1010
import CheckLabel from '@/widgets/CheckLabel'
1111

@@ -21,7 +21,6 @@ import {
2121
Block,
2222
Bar,
2323
Circle,
24-
Row,
2524
Column,
2625
UpvoteIcon,
2726
CommentIcon,

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

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+
import ColorSelector from '@/widgets/ColorSelector'
6+
import { SpaceGrow, Br } from '@/widgets/Common'
7+
import ToggleSwitch from '@/widgets/Buttons/ToggleSwitch'
8+
9+
import type { TWidgetsSettings, TTouched } from '../spec'
10+
import { SETTING_FIELD } from '../constant'
11+
12+
import SectionLabel from '../SectionLabel'
13+
import SavingBar from '../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+
type TProps = {
30+
touched: TTouched
31+
settings: TWidgetsSettings
32+
}
33+
34+
const BaseSetting: FC<TProps> = ({ settings, touched }) => {
35+
const { widgetsPrimaryColor: primaryColor, widgetsThreads, saving } = settings
36+
37+
const threadOnChange = (checked: boolean, thread: TThread): void => {
38+
const newThreads = 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+
<Label color={primaryColor}>
57+
<ColorSelector
58+
activeColor={primaryColor}
59+
onChange={(color) => edit(color, 'widgetsPrimaryColor')}
60+
placement="right"
61+
offset={[-1, 15]}
62+
>
63+
<TheColor color={primaryColor} />
64+
</ColorSelector>
65+
</Label>
66+
</SavingBar>
67+
68+
<Br top={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+
<Br top={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+
export default memo(BaseSetting)

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

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+
import CopyButton from '@/widgets/Buttons/CopyButton'
4+
5+
import { Wrapper, CopyBtnWrapper } from '../styles/widgets/code_area'
6+
7+
const CodeArea: FC = () => {
8+
const id = 'your-id'
9+
const value = `<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+
<CopyButton value={value} />
16+
</CopyBtnWrapper>
17+
</Wrapper>
18+
)
19+
}
20+
21+
export default memo(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+
import Tabs from '@/widgets/Switcher/Tabs'
5+
import Button from '@/widgets/Buttons/Button'
6+
import { Radio } from '@/widgets/Switcher'
7+
8+
import type { TWidgetsSettings, TTouched } from '../spec'
9+
import { WIDGET_TYPES } from '../constant'
10+
11+
import Portal from '../Portal'
12+
import BaseSetting from './BaseSetting'
13+
import CodeArea from './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+
export const TAB_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
type TProps = {
6-
testid?: string
53+
settings: TWidgetsSettings
54+
touched: TTouched
755
}
856

9-
const Widgets: FC<TProps> = ({ testid = 'widgets' }) => {
57+
const Widgets: 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+
<BaseSetting settings={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+
<Button size="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+
<Br top={30} />
117+
<HintTitle>启用网站插件，请复制以下代码到您的站点源码中。</HintTitle>
118+
<Br top={8} />
119+
<CodeArea />
120+
<Br top={10} />
121+
<HintDesc>如果团队中缺乏相关技术人员，请联系我们。</HintDesc>
13122
</Wrapper>
14123
)
15124
}

0 commit comments

Comments
 (0)