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

Commit b85cb81

Browse files
mydearxymmydearxym
authored
feat(dashboard): more settings UI/UX (#1338)
* feat(dashboarding): add thread settings ui * refactor(theme-editor): use ToggleSwitch style * fix(wallpaper): hover upload effect * feat: basic banner layout UI/UX * feat: changelog layout selector
1 parent 0e701c5 commit b85cb81

File tree

25 files changed

+1013
-145
lines changed

25 files changed

+1013
-145
lines changed

‎src/containers/editor/WallpaperEditor/BuildIn/index.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { FC, Fragment } from 'react'
88
import { WALLPAPER_TYPE } from '@/constant'
99

1010
import { Br } from '@/widgets/Common'
11-
import Checker from '@/widgets/Checker'
11+
import ToggleSwitch from '@/widgets/Buttons/ToggleSwitch'
1212

1313
import PatternGroup from './PatternGroup'
1414
import GradientGroup from './GradientGroup'
@@ -19,6 +19,8 @@ import {
1919
Wrapper,
2020
Title,
2121
SettingWrapper,
22+
SwitchWrapper,
23+
ToggleTitle,
2224
GeneralSettings,
2325
Divider,
2426
AngleSettings,
@@ -58,18 +60,16 @@ const BuildIn: FC<TProps> = ({ wallpaperData }) => {
5860
<GeneralSettings>
5961
<Title>附加效果:</Title>
6062
{wallpaperType === WALLPAPER_TYPE.GRADIENT && (
61-
<Fragment>
62-
<Br top={20} />
63-
<Checker checked={hasPattern} onChange={togglePattern}>
64-
叠加印纹
65-
</Checker>
66-
</Fragment>
63+
<SwitchWrapper>
64+
<ToggleTitle>叠加印纹</ToggleTitle>
65+
<ToggleSwitch checked={hasPattern} onChange={togglePattern} />
66+
</SwitchWrapper>
6767
)}
68-
69-
<Br top={10} />
70-
<Checker checked={hasBlur} onChange={toggleBlur}>
71-
模糊效果
72-
</Checker>
68+
<Br top={6} />
69+
<SwitchWrapper>
70+
<ToggleTitle>模糊效果</ToggleTitle>
71+
<ToggleSwitch checked={hasBlur} onChange={toggleBlur} />
72+
</SwitchWrapper>
7373
</GeneralSettings>
7474

7575
{wallpaperType === WALLPAPER_TYPE.GRADIENT && (

‎src/containers/editor/WallpaperEditor/styles/build_in/index.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,16 @@ export const SettingWrapper = styled.div<TActive>`
2222
display: ${({ show }) => (show ? 'flex' : 'none')};
2323
margin-left: 3px;
2424
`
25+
export const SwitchWrapper = styled.div`
26+
${css.flex('align-center', 'justify-between')};
27+
padding-right: 10px;
28+
`
29+
export const ToggleTitle = styled.div`
30+
color: ${theme('thread.articleDigest')};
31+
font-size: 13px;
32+
margin-left: 1px;
33+
margin-top: 2px;
34+
`
2535
export const Divider = styled(LineDivider)`
2636
height: 70px;
2737
margin-left: 10px;

‎src/containers/thread/DashboardThread/SectionLabel.tsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,23 @@
11
import { FC, memo, ReactNode } from 'react'
22

3-
import { Wrapper, Title, Desc } from './styles/section_label'
3+
import { SpaceGrow } from '@/widgets/Common'
4+
5+
import { Wrapper, Header, Title, Desc } from './styles/section_label'
46

57
type TProps = {
68
title: string
79
desc?: ReactNode
10+
addon?: ReactNode
811
}
912

10-
const SectionLabel: FC<TProps> = ({ title, desc = null }) => {
13+
const SectionLabel: FC<TProps> = ({ title, desc = null, addon = null }) => {
1114
return (
1215
<Wrapper>
13-
<Title noDesc={desc === null}>{title}</Title>
16+
<Header>
17+
<Title noDesc={desc === null}>{title}</Title>
18+
<SpaceGrow />
19+
{addon}
20+
</Header>
1421
{desc && <Desc>{desc}</Desc>}
1522
</Wrapper>
1623
)

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ const Sidebar: FC<TProps> = ({ curTab }) => {
2626
关于社区
2727
</Item>
2828
<Item $active={TAB.UI === curTab} onClick={() => tabOnChange(TAB.UI)}>
29-
外观样式
29+
外观布局
3030
</Item>
3131
<Item
3232
$active={TAB.THREADS === curTab}

‎src/containers/thread/DashboardThread/Threads/HelpThread.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { FC, memo } from 'react'
2+
3+
import { SpaceGrow } from '@/widgets/Common'
4+
import ToggleSwitch from '@/widgets/Buttons/ToggleSwitch'
5+
6+
import {
7+
Wrapper,
8+
Section,
9+
Section2,
10+
Header,
11+
Title,
12+
Desc,
13+
} from '../styles/threads/help_thread'
14+
15+
const HelpThread: FC = () => {
16+
return (
17+
<Wrapper>
18+
<Section>
19+
<Header>
20+
<Title>常见问题</Title>
21+
<SpaceGrow />
22+
<ToggleSwitch checked />
23+
</Header>
24+
<Desc>FAQ 列表，适合常见的一句话问答等，参考 xxx</Desc>
25+
</Section>
26+
27+
<Section2>
28+
<Header>
29+
<Title>文档集</Title>
30+
<SpaceGrow />
31+
<ToggleSwitch />
32+
</Header>
33+
<Desc>适合中长篇文档，支持富文本，目录树，TOC 等常见文档功能。</Desc>
34+
</Section2>
35+
</Wrapper>
36+
)
37+
}
38+
39+
export default memo(HelpThread)

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

Lines changed: 58 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
import { FC, memo } from 'react'
22

3-
import { Wrapper } from '../styles/threads'
3+
import ToggleSwitch from '@/widgets/Buttons/ToggleSwitch'
4+
import { Divider } from '@/widgets/Common'
5+
6+
import HelpThread from './HelpThread'
7+
8+
import Portal from '../Portal'
9+
import SectionLabel from '../SectionLabel'
10+
import { Wrapper, Desc } from '../styles/threads'
411

512
type TProps = {
613
testid?: string
@@ -9,7 +16,56 @@ type TProps = {
916
const Threads: FC<TProps> = ({ testid = 'threads' }) => {
1017
return (
1118
<Wrapper>
12-
<div>Threads</div>
19+
<Portal
20+
title="社区板块"
21+
desc="按需开启社区板块，开启后对应板块会对外公开。"
22+
/>
23+
<br />
24+
25+
<SectionLabel
26+
title="讨论区"
27+
desc={
28+
<Desc>
29+
用户可在此发帖，参与社区讨论，帖子可由团队管理员同步到看板墙。更多内容请参考
30+
xx
31+
</Desc>
32+
}
33+
addon={<ToggleSwitch checked />}
34+
/>
35+
<Divider top={25} bottom={30} />
36+
<SectionLabel
37+
title="看板墙"
38+
desc={
39+
<Desc>
40+
用户可在此发帖，参与社区讨论，帖子可由团队管理员同步到看板墙。更多内容请参考
41+
xx
42+
</Desc>
43+
}
44+
addon={<ToggleSwitch />}
45+
/>
46+
<Divider top={25} bottom={30} />
47+
<SectionLabel
48+
title="更新日志"
49+
desc={
50+
<Desc>
51+
用户可在此发帖，参与社区讨论，帖子可由团队管理员同步到看板墙。更多内容请参考
52+
xx
53+
</Desc>
54+
}
55+
addon={<ToggleSwitch />}
56+
/>
57+
<Divider top={25} bottom={30} />
58+
<SectionLabel
59+
title="帮助台"
60+
desc={
61+
<Desc>
62+
用户可在此发帖，参与社区讨论，帖子可由团队管理员同步到看板墙。更多内容请参考
63+
xx
64+
</Desc>
65+
}
66+
addon={<ToggleSwitch checked />}
67+
/>
68+
<HelpThread />
1369
</Wrapper>
1470
)
1571
}

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

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
import { FC, memo, useState } from 'react'
2+
3+
import type { TBannerLayout } from '@/spec'
4+
5+
import { BANNER_LAYOUT, DASHBOARD_DESC_LAYOUT } from '@/constant'
6+
import { callDashboardDesc } from '@/utils/helper'
7+
8+
import Button from '@/widgets/Buttons/Button'
9+
import { Br, Space, SpaceGrow } from '@/widgets/Common'
10+
import CheckLabel from '@/widgets/CheckLabel'
11+
12+
import SectionLabel from '../SectionLabel'
13+
14+
import {
15+
Wrapper,
16+
SelectWrapper,
17+
ExampleBtn,
18+
Layout,
19+
LayoutTitle,
20+
DividerLine,
21+
Block,
22+
Bar,
23+
Circle,
24+
Row,
25+
Main,
26+
ListsWrapper,
27+
TagssWrapper,
28+
} from '../styles/ui/banner_layout'
29+
30+
type TProps = {
31+
_layout?: TBannerLayout
32+
}
33+
34+
const BannerLayout: FC<TProps> = ({ _layout = BANNER_LAYOUT.HEADER }) => {
35+
const [layout, setLayout] = useState<TBannerLayout>(BANNER_LAYOUT.HEADER)
36+
37+
return (
38+
<Wrapper>
39+
<SectionLabel
40+
title="整体布局"
41+
desc={
42+
<>
43+
整体页面的 Header 布局，适用于除文章页的所有页面。
44+
<ExampleBtn>
45+
<Button
46+
onClick={() =>
47+
callDashboardDesc(DASHBOARD_DESC_LAYOUT.POST_LIST)
48+
}
49+
size="small"
50+
ghost
51+
noBorder
52+
>
53+
查看示例
54+
</Button>
55+
</ExampleBtn>
56+
</>
57+
}
58+
/>
59+
<SelectWrapper>
60+
<Layout onClick={() => setLayout(BANNER_LAYOUT.HEADER)}>
61+
<Block $active={layout === BANNER_LAYOUT.HEADER}>
62+
<Row>
63+
<Bar thin long={16} />
64+
<Space right={42} />
65+
<Bar thin long={40} />
66+
<Space right={45} />
67+
<Bar thin long={6} />
68+
<Space right={5} />
69+
<Circle radius={6} />
70+
</Row>
71+
72+
<DividerLine top={10} bottom={20} />
73+
74+
<Main>
75+
<ListsWrapper>
76+
<Bar long={60} thin />
77+
<Br bottom={14} />
78+
<Bar long={50} thin />
79+
<Br bottom={14} />
80+
<Bar long={55} thin />
81+
<Br bottom={14} />
82+
<Bar long={40} thin />
83+
<Br bottom={14} />
84+
<Bar long={60} thin />
85+
<Br bottom={14} />
86+
<Bar long={50} thin />
87+
<Br bottom={14} />
88+
<Bar long={55} thin />
89+
</ListsWrapper>
90+
<TagssWrapper>
91+
<Bar long={100} />
92+
<Br bottom={15} />
93+
<Bar long={60} thin />
94+
<Br bottom={6} />
95+
<Bar long={85} thin />
96+
<Br bottom={6} />
97+
<Bar long={50} thin />
98+
<Br bottom={6} />
99+
<Bar long={60} thin />
100+
<Br bottom={6} />
101+
<Bar long={50} thin />
102+
</TagssWrapper>
103+
</Main>
104+
</Block>
105+
<LayoutTitle $active={layout === BANNER_LAYOUT.HEADER}>
106+
<CheckLabel
107+
title="布局 A"
108+
$active={layout === BANNER_LAYOUT.HEADER}
109+
top={10}
110+
left={-15}
111+
/>
112+
</LayoutTitle>
113+
</Layout>
114+
<Space right={40} />
115+
<Layout onClick={() => setLayout(BANNER_LAYOUT.TABBER)}>
116+
<Block $active={layout === BANNER_LAYOUT.TABBER}>
117+
<Row>
118+
<Bar long={16} />
119+
<SpaceGrow />
120+
<Bar thin long={6} />
121+
<Space right={5} />
122+
<Circle radius={6} />
123+
</Row>
124+
125+
<Br bottom={16} />
126+
<Row>
127+
<Bar thin long={10} />
128+
<Space right={10} />
129+
<Bar thin long={10} />
130+
<Space right={10} />
131+
<Bar thin long={10} />
132+
<Space right={10} />
133+
<Bar thin long={10} />
134+
</Row>
135+
<DividerLine top={5} bottom={20} />
136+
137+
<Main>
138+
<ListsWrapper>
139+
<Bar long={60} thin />
140+
<Br bottom={14} />
141+
<Bar long={50} thin />
142+
<Br bottom={14} />
143+
<Bar long={55} thin />
144+
<Br bottom={14} />
145+
<Bar long={40} thin />
146+
<Br bottom={14} />
147+
<Bar long={60} thin />
148+
<Br bottom={14} />
149+
<Bar long={50} thin />
150+
</ListsWrapper>
151+
<TagssWrapper>
152+
<Bar long={100} />
153+
<Br bottom={15} />
154+
<Bar long={60} thin />
155+
<Br bottom={6} />
156+
<Bar long={85} thin />
157+
<Br bottom={6} />
158+
<Bar long={50} thin />
159+
<Br bottom={6} />
160+
<Bar long={60} thin />
161+
<Br bottom={6} />
162+
<Bar long={50} thin />
163+
</TagssWrapper>
164+
</Main>
165+
</Block>
166+
<LayoutTitle $active={layout === BANNER_LAYOUT.TABBER}>
167+
<CheckLabel
168+
title="布局 B"
169+
$active={layout === BANNER_LAYOUT.TABBER}
170+
top={10}
171+
left={-15}
172+
/>
173+
</LayoutTitle>
174+
</Layout>
175+
</SelectWrapper>
176+
</Wrapper>
177+
)
178+
}
179+
180+
export default memo(BannerLayout)

0 commit comments

Comments
 (0)