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 d124ca4

Browse files
mydearxymmydearxym
authored
feat(dashboard): alias editor (#1349)
* style(dashboard): adjust admin adder * style(dashboard): alias workflow UX & logic * refactor(alias-editor): suggestion make real * refactor(dashboard): touched check for tags & alias
1 parent 4396e17 commit d124ca4

File tree

17 files changed

+402
-42
lines changed

17 files changed

+402
-42
lines changed

‎src/containers/thread/DashboardThread/Admin/Adder.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const Adder: FC = () => {
1010
<Space right={30} />
1111
<AddButton size="small">
1212
<PlusIcon />
13-
管理员
13+
新增
1414
</AddButton>
1515
</Wrapper>
1616
)

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

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
import { FC, memo, Fragment } from 'react'
2+
3+
import AddButton from '@/widgets/Buttons/AddButton'
4+
import { SpaceGrow } from '@/widgets/Common'
5+
6+
import { SETTING_FIELD } from '../constant'
7+
import Suggestion from './Suggestion'
8+
import SavingBar from '../SavingBar'
9+
10+
import type { TAlias } from '../spec'
11+
12+
import {
13+
Wrapper,
14+
Header,
15+
Title,
16+
InputWrapper,
17+
Inputer,
18+
Footer,
19+
ArrowWrapper,
20+
ArrowLine,
21+
ArrowIcon,
22+
} from '../styles/alias/item'
23+
24+
import { updateEditingAlias, resetEdit } from '../logic'
25+
26+
type TProps = {
27+
alias: TAlias
28+
editingAlias: TAlias
29+
}
30+
31+
const Item: FC<TProps> = ({ alias, editingAlias }) => {
32+
const isEditMode: boolean = alias.raw === editingAlias?.raw
33+
const isChanged: boolean = alias.original !== alias.name
34+
35+
return (
36+
<Wrapper>
37+
<Header>
38+
{isEditMode ? (
39+
<SavingBar isTouched field={SETTING_FIELD.ALIAS}>
40+
<InputWrapper>
41+
<Inputer
42+
value={editingAlias?.name}
43+
autoFocus
44+
onChange={(e) =>
45+
updateEditingAlias({ ...editingAlias, name: e.target.value })
46+
}
47+
/>
48+
</InputWrapper>
49+
</SavingBar>
50+
) : (
51+
<Title>{alias.original}</Title>
52+
)}
53+
54+
{!isEditMode && isChanged && (
55+
<Fragment>
56+
<ArrowWrapper>
57+
<ArrowLine />
58+
<ArrowIcon />
59+
</ArrowWrapper>
60+
<Title>{alias.name}</Title>
61+
</Fragment>
62+
)}
63+
</Header>
64+
<Footer>
65+
{isEditMode ? (
66+
<Suggestion
67+
items={alias.suggestions}
68+
onChange={(name) => {
69+
updateEditingAlias({ ...alias, name })
70+
}}
71+
/>
72+
) : (
73+
<Fragment>
74+
<AddButton
75+
top={10}
76+
withIcon={false}
77+
dimWhenIdle
78+
right={15}
79+
onClick={() => updateEditingAlias(alias)}
80+
>
81+
修改
82+
</AddButton>
83+
{isChanged && (
84+
<AddButton
85+
top={10}
86+
withIcon={false}
87+
dimWhenIdle
88+
onClick={() => {
89+
updateEditingAlias({ ...alias, name: alias.original })
90+
resetEdit(SETTING_FIELD.ALIAS)
91+
}}
92+
>
93+
恢复默认
94+
</AddButton>
95+
)}
96+
</Fragment>
97+
)}
98+
<SpaceGrow />
99+
</Footer>
100+
</Wrapper>
101+
)
102+
}
103+
104+
export default memo(Item)

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { FC, memo } from 'react'
2+
import { isEmpty } from 'ramda'
3+
4+
import { Wrapper, Hint, List, Item } from '../styles/alias/suggestion'
5+
6+
type TProps = {
7+
items: string[]
8+
onChange: (item: string) => void
9+
}
10+
11+
const Suggestion: FC<TProps> = ({ items, onChange }) => {
12+
if (isEmpty(items)) return null
13+
14+
return (
15+
<Wrapper>
16+
<Hint>常用别名:</Hint>
17+
<List>
18+
{items.map((item) => (
19+
<Item key={item} size="tiny" ghost onClick={() => onChange(item)}>
20+
{item}
21+
</Item>
22+
))}
23+
</List>
24+
</Wrapper>
25+
)
26+
}
27+
28+
export default memo(Suggestion)

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

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

3+
import type { TAliasSettings } from '../spec'
4+
5+
import Portal from '../Portal'
6+
import Item from './Item'
37
import { Wrapper } from '../styles/alias'
48

59
type TProps = {
6-
testid?: string
10+
settings: TAliasSettings
711
}
812

9-
const Alias: FC<TProps> = ({ testid = 'alias' }) => {
13+
const Alias: FC<TProps> = ({ settings }) => {
14+
const { alias, editingAlias } = settings
15+
1016
return (
1117
<Wrapper>
12-
<div>Widgets</div>
18+
<Portal
19+
title="别名设置"
20+
desc="覆盖系统默认的板块，组件，提示信息等名称。"
21+
/>
22+
23+
{alias.map((item) => (
24+
<Item key={item.raw} alias={item} editingAlias={editingAlias} />
25+
))}
1326
</Wrapper>
1427
)
1528
}

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

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ type TProps = {
2222
hint?: ReactNode
2323
children?: ReactNode
2424
isTouched?: boolean
25+
onCancel?: () => void
2526
} & TSpace
2627

2728
const SavingBar: FC<TProps> = ({
@@ -30,6 +31,7 @@ const SavingBar: FC<TProps> = ({
3031
hint = null,
3132
children = null,
3233
isTouched = false,
34+
onCancel = console.log,
3335
...restProps
3436
}) => {
3537
if (children !== null) {
@@ -43,7 +45,10 @@ const SavingBar: FC<TProps> = ({
4345
cancelText="取消"
4446
confirmText="确定"
4547
space={4}
46-
onCancel={() => rollbackEdit(field)}
48+
onCancel={() => {
49+
onCancel?.()
50+
rollbackEdit(field)
51+
}}
4752
onConfirm={() => onSave(field)}
4853
/>
4954
</ActionWrapper>
@@ -70,7 +75,10 @@ const SavingBar: FC<TProps> = ({
7075
cancelText="取消"
7176
confirmText="确定"
7277
space={4}
73-
onCancel={() => rollbackEdit(field)}
78+
onCancel={() => {
79+
onCancel?.()
80+
rollbackEdit(field)
81+
}}
7482
/>
7583
</ActionWrapper>
7684
</Wrapper>

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -28,26 +28,26 @@ type TProps = {
2828
}
2929

3030
const TagBar: FC<TProps> = ({ tag, editingTag }) => {
31-
const editing = editingTag?.id === tag.id
31+
const isEditMode = editingTag?.id === tag.id
3232

3333
return (
34-
<Wrapper key={tag.id} editing={editing}>
35-
<SavingBar isTouched={editing} field={SETTING_FIELD.TAG}>
36-
{editing ? (
34+
<Wrapper key={tag.id} isEditMode={isEditMode}>
35+
<SavingBar isTouched={isEditMode} field={SETTING_FIELD.TAG}>
36+
{isEditMode ? (
3737
<ColorSelector
3838
activeColor={editingTag.color}
3939
onChange={(color) => updateEditingTag({ ...editingTag, color })}
4040
placement="bottom-start"
4141
offset={[-8, 0]}
4242
>
4343
<DotSelector>
44-
<Dot color={COLORS[editingTag.color]} editing={editing} />
44+
<Dot color={COLORS[editingTag.color]} isEditMode={isEditMode} />
4545
</DotSelector>
4646
</ColorSelector>
4747
) : (
4848
<Dot color={COLORS[tag.color]} />
4949
)}
50-
{editing ? (
50+
{isEditMode ? (
5151
<InputWrapper>
5252
<Inputer
5353
value={editingTag.title}
@@ -61,7 +61,7 @@ const TagBar: FC<TProps> = ({ tag, editingTag }) => {
6161
<Title>{tag.title}</Title>
6262
)}
6363
<SpaceGrow />
64-
{!editing && (
64+
{!isEditMode && (
6565
<Actions>
6666
<EditIcon onClick={() => updateEditingTag(tag)} />
6767
<Space right={4} />

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ export const SETTING_FIELD = {
3333
BANNER_LAYOUT: 'bannerLayout',
3434
CHANGELOG_LAYOUT: 'changelogLayout',
3535
TAG: 'tag',
36+
ALIAS: 'alias',
3637
} as Record<SnakeUpperCase<TSettingField>, TSettingField>
3738

3839
export const MENU = {
@@ -117,3 +118,24 @@ export const MENU = {
117118
],
118119
},
119120
}
121+
122+
export const BUILDIN_ALIAS = [
123+
{
124+
raw: 'posts',
125+
name: '讨论',
126+
original: '讨论',
127+
suggestions: ['帖子', '讨论区', '论坛'],
128+
},
129+
{
130+
raw: 'changelog',
131+
name: '更新日志',
132+
original: '更新日志',
133+
suggestions: ['新功能', '发布日志', '里程碑'],
134+
},
135+
{
136+
raw: 'kanban',
137+
name: '看板',
138+
original: '看板',
139+
suggestions: ['路线图', '规划', '蓝图'],
140+
},
141+
]

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,15 +40,15 @@ const DashboardThreadContainer: FC<TProps> = ({
4040
testid = 'dashboard-thread',
4141
}) => {
4242
useInit(store)
43-
const { curTab, uiSettings, tagSettings, touched } = store
43+
const { curTab, uiSettings, tagSettings, aliasSettings, touched } = store
4444

4545
return (
4646
<Wrapper testid={testid}>
4747
<SideMenu curTab={curTab} touched={touched} />
4848
<MainWrapper>
4949
{curTab === TAB.BASIC_INFO && <BasicInfo />}
5050
{curTab === TAB.UI && <UI settings={uiSettings} touched={touched} />}
51-
{curTab === TAB.ALIAS && <Alias />}
51+
{curTab === TAB.ALIAS && <Alias settings={aliasSettings} />}
5252
{curTab === TAB.ADMINS && <Admin />}
5353
{curTab === TAB.THREADS && <Threads />}
5454
{curTab === TAB.TAGS && <Tags settings={tagSettings} />}

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import type { TEditValue, TTag } from '@/spec'
55
import { buildLog } from '@/utils/logger'
66
import { updateEditing } from '@/utils/mobx'
77

8-
import type { TTab, TSettingField } from './spec'
8+
import type { TTab, TSettingField, TAlias } from './spec'
99
// import S from './schma'
1010
import type { TStore } from './store'
1111

@@ -34,6 +34,12 @@ export const updateEditingTag = (tag: TTag): void => {
3434
store.mark({ editingTag: tag })
3535
}
3636

37+
export const updateEditingAlias = (alias: TAlias): void => {
38+
store.mark({ editingAlias: alias })
39+
}
40+
41+
export const resetEdit = (field: TSettingField): void => store.resetEdit(field)
42+
3743
export const edit = (e: TEditValue, key: string): void => {
3844
updateEditing(store, key, e)
3945
}

‎src/containers/thread/DashboardThread/spec.d.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,17 @@ export type TTagSettings = {
4949
editingTag: TTag
5050
}
5151

52+
export type TAlias = {
53+
raw: string
54+
name: string
55+
original?: string
56+
suggestions?: string[]
57+
}
58+
export type TAliasSettings = {
59+
alias: TAlias[]
60+
editingAlias: TAlias
61+
}
62+
5263
export type TUiSettings = {
5364
wallpaper: TWallpaper
5465
primaryColor: TColorName
@@ -62,6 +73,8 @@ export type TTouched = {
6273
bannerLayout: boolean
6374
postLayout: boolean
6475
changelogLayout: boolean
76+
alias: boolean
77+
tags: boolean
6578
// sidebar
6679
ui: boolean
6780
}
@@ -72,3 +85,4 @@ export type TSettingField =
7285
| 'bannerLayout'
7386
| 'changelogLayout'
7487
| 'tag'
88+
| 'alias'

0 commit comments

Comments
 (0)