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.

Commitd124ca4

Browse files
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 parent4396e17 commitd124ca4

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
<Spaceright={30}/>
1111
<AddButtonsize="small">
1212
<PlusIcon/>
13-
管理员
13+
新增
1414
</AddButton>
1515
</Wrapper>
1616
)
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+
importAddButtonfrom'@/widgets/Buttons/AddButton'
4+
import{SpaceGrow}from'@/widgets/Common'
5+
6+
import{SETTING_FIELD}from'../constant'
7+
importSuggestionfrom'./Suggestion'
8+
importSavingBarfrom'../SavingBar'
9+
10+
importtype{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+
typeTProps={
27+
alias:TAlias
28+
editingAlias:TAlias
29+
}
30+
31+
constItem:FC<TProps>=({ alias, editingAlias})=>{
32+
constisEditMode:boolean=alias.raw===editingAlias?.raw
33+
constisChanged:boolean=alias.original!==alias.name
34+
35+
return(
36+
<Wrapper>
37+
<Header>
38+
{isEditMode ?(
39+
<SavingBarisTouchedfield={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+
exportdefaultmemo(Item)
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+
typeTProps={
7+
items:string[]
8+
onChange:(item:string)=>void
9+
}
10+
11+
constSuggestion:FC<TProps>=({ items, onChange})=>{
12+
if(isEmpty(items))returnnull
13+
14+
return(
15+
<Wrapper>
16+
<Hint>常用别名:</Hint>
17+
<List>
18+
{items.map((item)=>(
19+
<Itemkey={item}size="tiny"ghostonClick={()=>onChange(item)}>
20+
{item}
21+
</Item>
22+
))}
23+
</List>
24+
</Wrapper>
25+
)
26+
}
27+
28+
exportdefaultmemo(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+
importtype{TAliasSettings}from'../spec'
4+
5+
importPortalfrom'../Portal'
6+
importItemfrom'./Item'
37
import{Wrapper}from'../styles/alias'
48

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

9-
constAlias:FC<TProps>=({ testid='alias'})=>{
13+
constAlias: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+
<Itemkey={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
constSavingBar: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
constTagBar:FC<TProps>=({ tag, editingTag})=>{
31-
constediting=editingTag?.id===tag.id
31+
constisEditMode=editingTag?.id===tag.id
3232

3333
return(
34-
<Wrapperkey={tag.id}editing={editing}>
35-
<SavingBarisTouched={editing}field={SETTING_FIELD.TAG}>
36-
{editing ?(
34+
<Wrapperkey={tag.id}isEditMode={isEditMode}>
35+
<SavingBarisTouched={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-
<Dotcolor={COLORS[editingTag.color]}editing={editing}/>
44+
<Dotcolor={COLORS[editingTag.color]}isEditMode={isEditMode}/>
4545
</DotSelector>
4646
</ColorSelector>
4747
) :(
4848
<Dotcolor={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
<EditIcononClick={()=>updateEditingTag(tag)}/>
6767
<Spaceright={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
}asRecord<SnakeUpperCase<TSettingField>,TSettingField>
3738

3839
exportconstMENU={
@@ -117,3 +118,24 @@ export const MENU = {
117118
],
118119
},
119120
}
121+
122+
exportconstBUILDIN_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
<Wrappertestid={testid}>
4747
<SideMenucurTab={curTab}touched={touched}/>
4848
<MainWrapper>
4949
{curTab===TAB.BASIC_INFO&&<BasicInfo/>}
5050
{curTab===TAB.UI&&<UIsettings={uiSettings}touched={touched}/>}
51-
{curTab===TAB.ALIAS&&<Alias/>}
51+
{curTab===TAB.ALIAS&&<Aliassettings={aliasSettings}/>}
5252
{curTab===TAB.ADMINS&&<Admin/>}
5353
{curTab===TAB.THREADS&&<Threads/>}
5454
{curTab===TAB.TAGS&&<Tagssettings={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-
importtype{TTab,TSettingField}from'./spec'
8+
importtype{TTab,TSettingField,TAlias}from'./spec'
99
// import S from './schma'
1010
importtype{TStore}from'./store'
1111

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

37+
exportconstupdateEditingAlias=(alias:TAlias):void=>{
38+
store.mark({editingAlias:alias})
39+
}
40+
41+
exportconstresetEdit=(field:TSettingField):void=>store.resetEdit(field)
42+
3743
exportconstedit=(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+
exporttypeTAlias={
53+
raw:string
54+
name:string
55+
original?:string
56+
suggestions?:string[]
57+
}
58+
exporttypeTAliasSettings={
59+
alias:TAlias[]
60+
editingAlias:TAlias
61+
}
62+
5263
exporttypeTUiSettings={
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)
[8]ページ先頭
©2009-2025 Movatter.jp