Thanks to visit codestin.com
Credit goes to github.com

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

Commit ef03f8f

Browse files
mydearxymmydearxym
authored
refactor(dashboard): touched dot for sidebar & re-org (#1347)
* refactor: re-org with ts * refactor: adjust color
1 parent a63505f commit ef03f8f

File tree

12 files changed

+308
-190
lines changed

12 files changed

+308
-190
lines changed

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { FC, memo } from 'react'
2+
3+
import { Wrapper } from '../styles/alias'
4+
5+
type TProps = {
6+
testid?: string
7+
}
8+
9+
const Alias: FC<TProps> = ({ testid = 'alias' }) => {
10+
return (
11+
<Wrapper>
12+
<div>Widgets</div>
13+
</Wrapper>
14+
)
15+
}
16+
17+
export default memo(Alias)

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

Lines changed: 0 additions & 121 deletions
This file was deleted.

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

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { FC, memo, Fragment } from 'react'
2+
3+
import type { TTab, TMenuGroup, TTouched } from '../spec'
4+
5+
import { Folder, Item, Title, TouchedDot } from '../styles/sidebar/group'
6+
import { tabOnChange } from '../logic'
7+
8+
type TProps = {
9+
group: TMenuGroup
10+
curTab: TTab
11+
touched: TTouched
12+
}
13+
14+
const Group: FC<TProps> = ({ group, curTab, touched }) => {
15+
return (
16+
<Fragment key={group.title}>
17+
<Folder>
18+
{group.icon}
19+
<Title>{group.title}</Title>
20+
</Folder>
21+
{group.children.map((item) => (
22+
<Item
23+
key={item.raw}
24+
$active={item.raw === curTab}
25+
onClick={() => tabOnChange(item.raw)}
26+
>
27+
{touched[item.raw] && <TouchedDot />}
28+
{item.title}
29+
</Item>
30+
))}
31+
</Fragment>
32+
)
33+
}
34+
35+
export default memo(Group)

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

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { FC, memo, Fragment } from 'react'
2+
import { keys } from 'ramda'
3+
4+
import { Br } from '@/widgets/Common'
5+
import Sticky from '@/widgets/Sticky'
6+
7+
import { MENU } from '../constant'
8+
import type { TTab, TTouched, TMenuGroup } from '../spec'
9+
10+
import Group from './Group'
11+
12+
import { Wrapper } from '../styles/sidebar'
13+
14+
type TProps = {
15+
curTab: TTab
16+
touched: TTouched
17+
}
18+
19+
const Sidebar: FC<TProps> = ({ curTab, touched }) => {
20+
const groupKeys = keys(MENU)
21+
22+
return (
23+
<Wrapper>
24+
<Sticky offsetTop={30}>
25+
{groupKeys.map((key) => (
26+
<Fragment key={key}>
27+
<Group
28+
group={MENU[key] as TMenuGroup}
29+
curTab={curTab}
30+
touched={touched}
31+
/>
32+
<Br top={30} />
33+
</Fragment>
34+
))}
35+
</Sticky>
36+
</Wrapper>
37+
)
38+
}
39+
40+
export default memo(Sidebar)

‎src/containers/thread/DashboardThread/constant.ts

Lines changed: 0 additions & 33 deletions
This file was deleted.

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

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
import type { SnakeUpperCase } from '@/spec'
2+
3+
import type { TTab, TSettingField } from './spec'
4+
5+
import { Icon } from './styles/sidebar'
6+
7+
export const TAB = {
8+
OVERVIEW: 'overview',
9+
// basic-info
10+
BASIC_INFO: 'basic_info',
11+
UI: 'ui',
12+
THREADS: 'threads',
13+
ALIAS: 'alias',
14+
DOMAIN: 'domain',
15+
// analysis
16+
// --
17+
// contents
18+
TAGS: 'tags',
19+
POST: 'post',
20+
KANBAN: 'kanban',
21+
CHANGELOG: 'changelog',
22+
HELP: 'help',
23+
BLACKHOUSE: 'blackhouse',
24+
// integrates
25+
THIRD_PART: 'third_part',
26+
ADMINS: 'admins',
27+
WIDGETS: 'widgets',
28+
} as Record<Uppercase<TTab>, TTab>
29+
30+
export const SETTING_FIELD = {
31+
PRIMARY_COLOR: 'primaryColor',
32+
POST_LAYOUT: 'postLayout',
33+
BANNER_LAYOUT: 'bannerLayout',
34+
CHANGELOG_LAYOUT: 'changelogLayout',
35+
TAG: 'tag',
36+
} as Record<SnakeUpperCase<TSettingField>, TSettingField>
37+
38+
export const MENU = {
39+
BASIC: {
40+
title: '基础设置',
41+
icon: <Icon.Basic />,
42+
children: [
43+
{
44+
title: '关于社区',
45+
raw: TAB.BASIC_INFO,
46+
},
47+
{
48+
title: '外观布局',
49+
raw: TAB.UI,
50+
},
51+
{
52+
title: '社区板块',
53+
raw: TAB.THREADS,
54+
},
55+
{
56+
title: '别名',
57+
raw: TAB.ALIAS,
58+
},
59+
{
60+
title: '管理员',
61+
raw: TAB.ADMINS,
62+
},
63+
],
64+
},
65+
ANALYSIS: {
66+
title: '统计分析',
67+
icon: <Icon.Analysis />,
68+
children: [],
69+
},
70+
MANAGEMENT: {
71+
title: '内容管理',
72+
icon: <Icon.Management />,
73+
children: [
74+
{
75+
title: '标签',
76+
raw: TAB.TAGS,
77+
},
78+
{
79+
title: '帖子',
80+
raw: TAB.POST,
81+
},
82+
{
83+
title: '看板',
84+
raw: TAB.KANBAN,
85+
},
86+
{
87+
title: '更新日志',
88+
raw: TAB.CHANGELOG,
89+
},
90+
{
91+
title: '帮助台',
92+
raw: TAB.HELP,
93+
},
94+
{
95+
title: '小黑屋',
96+
raw: TAB.BLACKHOUSE,
97+
},
98+
],
99+
},
100+
101+
INTEGRATE: {
102+
title: '绑定即成',
103+
icon: <Icon.Bind />,
104+
children: [
105+
{
106+
title: '域名',
107+
raw: TAB.DOMAIN,
108+
},
109+
{
110+
title: '外部应用',
111+
raw: TAB.THIRD_PART,
112+
},
113+
{
114+
title: '网站组件',
115+
raw: TAB.WIDGETS,
116+
},
117+
],
118+
},
119+
}

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { useInit } from './logic' /* eslint-disable-next-line */
1818
// basic
1919
import BasicInfo from './BasicInfo'
2020
import UI from './UI'
21+
import Alias from './Alias'
2122
import Admin from './Admin'
2223
import Threads from './Threads'
2324
import Tags from './Tags'
@@ -43,10 +44,11 @@ const DashboardThreadContainer: FC<TProps> = ({
4344

4445
return (
4546
<Wrapper testid={testid}>
46-
<Sidebar curTab={curTab} />
47+
<Sidebar curTab={curTab} touched={touched} />
4748
<MainWrapper>
4849
{curTab === TAB.BASIC_INFO && <BasicInfo />}
4950
{curTab === TAB.UI && <UI settings={uiSettings} touched={touched} />}
51+
{curTab === TAB.ALIAS && <Alias />}
5052
{curTab === TAB.ADMINS && <Admin />}
5153
{curTab === TAB.THREADS && <Threads />}
5254
{curTab === TAB.TAGS && <Tags settings={tagSettings} />}

0 commit comments

Comments
 (0)