Skip to content

Commit 4ef590d

Browse files
Gemini2035Gemini2035
authored
Merge pull request #9 from GeorgeZhang2035/perf/sheet
temp storage
2 parents ad21b50 + 9df7256 commit 4ef590d

File tree

5 files changed

+388
-225
lines changed

5 files changed

+388
-225
lines changed

‎src/components/editor/operator/sheet/SheetGroup.tsx‎

Lines changed: 83 additions & 198 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,20 @@
1-
import {
2-
Alert,
3-
Button,
4-
Divider,
5-
H5,
6-
H6,
7-
InputGroup,
8-
Intent,
9-
} from '@blueprintjs/core'
1+
import { Button, Divider, H6, InputGroup, Intent } from '@blueprintjs/core'
102

11-
import { useAtom } from 'jotai'
12-
import { isEqual, isEqualWith, omit } from 'lodash-es'
3+
import { useAtomValue } from 'jotai'
134
import { FC, useMemo, useState } from 'react'
145

156
import { AppToaster } from 'components/Toaster'
167
import { OPERATORS, PROFESSIONS } from 'models/operator'
17-
import { favGroupAtom, ignoreKeyDic } from 'store/useFavGroups'
8+
import { favGroupAtom } from 'store/useFavGroups'
189

1910
import { Group, Operator } from '../EditorSheet'
20-
import { SheetContainerSkeleton } from './SheetContainerSkeleton'
11+
import {
12+
SheetContainerSkeleton,
13+
SheetContainerSkeletonProps,
14+
} from './SheetContainerSkeleton'
2115
import { GroupNoData } from './SheetNoneData'
2216
import { useSheet } from './SheetProvider'
23-
import { GroupItem, SheetGroupItem } from './sheetGroup/SheetGroupItem'
17+
import { SheetGroupItem, SheetGroupItemProp } from './sheetGroup/SheetGroupItem'
2418

2519
export interface SheetGroupProps {}
2620

@@ -31,13 +25,11 @@ export interface GroupListModifyProp {
3125
groupUpdateHandle?: (value: Group) => void
3226
}
3327

34-
const EditorGroupName = ({
35-
groupAddHandle,
36-
}: {
37-
groupAddHandle: GroupListModifyProp['groupAddHandle']
38-
}) => {
28+
const EditorGroupName: FC = () => {
3929
const [groupName, setGroupName] = useState('')
4030

31+
const { submitGroup } = useSheet()
32+
4133
const addGroupHandle = () => {
4234
const name = groupName.trim()
4335
if (!name) {
@@ -46,7 +38,7 @@ const EditorGroupName = ({
4638
intent: Intent.DANGER,
4739
})
4840
} else {
49-
groupAddHandle?.({ name })
41+
submitGroup({ name }, undefined, true)
5042
setGroupName('')
5143
}
5244
}
@@ -74,112 +66,34 @@ const EditorGroupName = ({
7466
}
7567

7668
const SheetGroup: FC<SheetGroupProps> = () => {
77-
const { submitGroup, existedGroups, existedOperators, removeGroup } =
78-
useSheet()
79-
80-
const [coverGroup, setCoverGroup] = useState<Group>()
81-
82-
const defaultGroup = useMemo<Group[]>(() => {
83-
const result: Group[] = []
84-
PROFESSIONS.forEach((proItem) => {
85-
proItem.sub?.forEach((subProItem) => {
86-
const operators = existedOperators.filter(
87-
(opItem) =>
88-
OPERATORS.find((opInfoItem) => opInfoItem.name === opItem.name)
89-
?.subProf === subProItem.id,
90-
)
91-
if (operators.length) {
92-
const groupName = proItem.name + '-' + subProItem.name
93-
if (!existedGroups.find(({ name }) => name === groupName))
94-
result.push({
95-
name: groupName,
96-
opers: operators,
97-
})
98-
}
99-
})
100-
})
101-
const otherOperators = existedOperators.filter(
102-
(opItem) =>
103-
!OPERATORS.find((opInfoItem) => opInfoItem.name === opItem.name),
104-
)
105-
if (otherOperators.length)
106-
result.push({
107-
name: '其它',
108-
opers: otherOperators,
109-
})
110-
return result
111-
}, [existedOperators, existedGroups])
112-
113-
const checkGroupExisted = (target: string) =>
114-
!!existedGroups.find((item) => item.name === target)
115-
const checkGroupPinned = (target: Group, ignoreKey?: string[]) => {
116-
const checkTarget = favGroups.find((item) => item.name === target.name)
117-
if (checkTarget) {
118-
return isEqualWith(
119-
checkTarget,
120-
omit(target, [...(ignoreKey || ignoreKeyDic)]),
121-
({ opers: aOpers }, { opers: bOpers }) =>
122-
isEqual(
123-
aOpers.map((item) => omit(item, [...(ignoreKey || ignoreKeyDic)])),
124-
bOpers.map((item) => omit(item, [...(ignoreKey || ignoreKeyDic)])),
125-
),
126-
)
127-
} else {
128-
return false
129-
}
130-
}
131-
const checkSamePinned = (target: string) =>
132-
!!favGroups.find(({ name }) => name === target)
133-
const changeOperatorOfOtherGroups = (target: Operator[] | undefined) => {
134-
target?.forEach((item) => {
135-
existedGroups.forEach((groupItem) => {
136-
const oldLength = groupItem.opers?.length || 0
137-
if (oldLength) {
138-
const opers = groupItem.opers?.filter(
139-
(operItem) => operItem.name !== item.name,
140-
)
141-
if (opers?.length !== oldLength)
142-
submitGroup({ ...groupItem, ...{ opers } }, undefined, true)
143-
}
144-
})
145-
})
146-
}
147-
const updateFavGroup = (value: Group) =>
148-
setFavGroups([
149-
...[...favGroups].filter(({ name }) => name !== value.name),
150-
{ ...value },
151-
])
152-
153-
const groupAddHandle: GroupListModifyProp['groupAddHandle'] = (value) => {
154-
if (checkGroupExisted(value.name)) {
155-
AppToaster.show({
156-
message: '干员组已存在！',
157-
intent: Intent.DANGER,
158-
})
159-
} else {
160-
if (checkGroupPinned(value)) changeOperatorOfOtherGroups(value.opers)
161-
submitGroup(value, undefined, true)
162-
}
163-
}
164-
const groupRemoveHandle: GroupListModifyProp['groupRemoveHandle'] = (_id) => {
165-
removeGroup(existedGroups.findIndex((item) => item._id === _id))
166-
}
167-
const groupPinHandle: GroupListModifyProp['groupPinHandle'] = (value) => {
168-
if (checkGroupPinned(value))
169-
setFavGroups([...favGroups].filter(({ name }) => name !== value.name))
170-
else {
171-
if (checkSamePinned(value.name)) setCoverGroup(value)
172-
else updateFavGroup(value)
173-
}
174-
}
175-
const groupUpdateHandle: GroupListModifyProp['groupUpdateHandle'] = (
176-
value,
177-
) => {
178-
changeOperatorOfOtherGroups(value.opers)
179-
submitGroup(value, undefined, true)
180-
}
69+
const { existedGroups, existedOperators } = useSheet()
70+
71+
const defaultGroup = useMemo<Group[]>(
72+
() =>
73+
Object.entries(
74+
existedOperators.reduce(
75+
(acc, { name, ...rest }) => {
76+
const { prof = '', subProf = '' } =
77+
OPERATORS.find(({ name: OPERName }) => OPERName === name) || {}
78+
const profInfo = PROFESSIONS.find(({ id }) => id === prof)
79+
const subProfName = profInfo?.sub?.find(
80+
({ id }) => id === subProf,
81+
)?.name
82+
const key = (profInfo?.name || '其它') + '-' + (subProfName || '')
83+
if (!acc[key]) acc[key] = []
84+
acc[key].push({ name, ...rest })
85+
return acc
86+
},
87+
{} as Record<string, Operator[]>,
88+
),
89+
).map(([key, value]) => ({
90+
name: key,
91+
opers: value,
92+
})),
93+
[existedOperators],
94+
)
18195

182-
const [favGroups, setFavGroups] = useAtom(favGroupAtom)
96+
const favGroups = useAtomValue(favGroupAtom)
18397

18498
return (
18599
<>
@@ -192,86 +106,40 @@ const SheetGroup: FC<SheetGroupProps> = () => {
192106
mini
193107
className="sticky top-0 z-10 backdrop-blur-lg py-1"
194108
>
195-
<EditorGroupName {...{ groupAddHandle }} />
196-
</SheetContainerSkeleton>
197-
<SheetContainerSkeleton title="已设置的干员组" icon="cog" mini>
198-
<div>
199-
{existedGroups.length ? (
200-
<>
201-
{existedGroups.map((item) => (
202-
// <GroupItem
203-
// key={item.name}
204-
// existedGroup={existedGroups}
205-
// existedOperator={existedOperators}
206-
// groupInfo={item}
207-
// exist={checkGroupExisted(item.name)}
208-
// pinned={checkGroupPinned(item)}
209-
// groupRemoveHandle={groupRemoveHandle}
210-
// groupPinHandle={groupPinHandle}
211-
// groupUpdateHandle={groupUpdateHandle}
212-
// />
213-
<SheetGroupItem groupInfo={item} itemType="selected" />
214-
))}
215-
<H6 className="my-2 text-center">
216-
已显示全部 {existedGroups.length} 个干员组
217-
</H6>
218-
</>
219-
) : (
220-
GroupNoData
221-
)}
222-
</div>
109+
<EditorGroupName />
223110
</SheetContainerSkeleton>
111+
<SheetGroupItemsWithSkeleton
112+
title="已设置的干员组"
113+
icon="cog"
114+
mini
115+
groups={existedGroups}
116+
itemType="selected"
117+
/>
118+
{!!existedGroups.length && (
119+
<H6 className="my-2 text-center">
120+
已显示全部 {existedGroups.length} 个干员组
121+
</H6>
122+
)}
224123
</div>
225124
</div>
226125
<Divider />
227126
<div className="flex-1">
228-
<SheetContainerSkeleton title="推荐分组" icon="thumbs-up" mini>
229-
<div>
230-
{defaultGroup.length
231-
? defaultGroup.map((item) => (
232-
<GroupItem
233-
key={item.name}
234-
groupInfo={item}
235-
exist={checkGroupExisted(item.name)}
236-
groupAddHandle={groupAddHandle}
237-
pinned={false}
238-
/>
239-
))
240-
: GroupNoData}
241-
</div>
242-
</SheetContainerSkeleton>
243-
<SheetContainerSkeleton title="收藏分组" icon="star" mini>
244-
<div>
245-
{favGroups.length
246-
? favGroups.map((item) => (
247-
<GroupItem
248-
key={item.name}
249-
groupInfo={item}
250-
exist={checkGroupExisted(item.name)}
251-
groupAddHandle={groupAddHandle}
252-
groupPinHandle={groupPinHandle}
253-
pinned
254-
/>
255-
))
256-
: GroupNoData}
257-
</div>
258-
</SheetContainerSkeleton>
127+
<SheetGroupItemsWithSkeleton
128+
title="推荐分组"
129+
icon="thumbs-up"
130+
mini
131+
groups={defaultGroup}
132+
itemType="recommend"
133+
/>
134+
<SheetGroupItemsWithSkeleton
135+
title="收藏分组"
136+
icon="star"
137+
mini
138+
groups={favGroups}
139+
itemType="fav"
140+
/>
259141
</div>
260142
</div>
261-
<Alert
262-
isOpen={!!coverGroup}
263-
confirmButtonText="是"
264-
cancelButtonText="否"
265-
icon="error"
266-
intent={Intent.DANGER}
267-
onConfirm={() => updateFavGroup(coverGroup as Group)}
268-
onClose={() => setCoverGroup(undefined)}
269-
>
270-
<div>
271-
<H5>收藏干员组: </H5>
272-
<p>检测到同名的已收藏干员组 {coverGroup?.name}，是否覆盖？</p>
273-
</div>
274-
</Alert>
275143
</>
276144
)
277145
}
@@ -281,3 +149,20 @@ export const SheetGroupContainer: FC<SheetGroupProps> = () => (
281149
<SheetGroup />
282150
</SheetContainerSkeleton>
283151
)
152+
153+
const SheetGroupItemsWithSkeleton: FC<
154+
SheetContainerSkeletonProps & {
155+
groups: SheetGroupItemProp['groupInfo'][]
156+
itemType: SheetGroupItemProp['itemType']
157+
}
158+
> = ({ groups, itemType, ...sheetContainerSkeletonProps }) => (
159+
<SheetContainerSkeleton {...sheetContainerSkeletonProps}>
160+
<div>
161+
{groups.length
162+
? groups.map((item) => (
163+
<SheetGroupItem groupInfo={item} itemType={itemType} />
164+
))
165+
: GroupNoData}
166+
</div>
167+
</SheetContainerSkeleton>
168+
)

‎src/components/editor/operator/sheet/SheetProvider.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,6 @@ import { EditorPerformerGroupProps } from '../EditorPerformerGroup'
55
import { EditorPerformerOperatorProps } from '../EditorPerformerOperator'
66
import { Group, Operator } from '../EditorSheet'
77

8-
export interface OperatorInSheet {}
9-
108
export interface SheetProviderProp {
119
submitOperator: EditorPerformerOperatorProps['submit']
1210
existedOperators: Operator[]

‎src/components/editor/operator/sheet/sheetGroup/OperatorInGroupItem.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export const OperatorInGroupItem: FC<OperatorInGroupItemProp> = ({
1515
onOperatorSkillChange,
1616
operatorInfo: { name, ...restField },
1717
}) => (
18-
<Card className="flex items-center w-full h-full justify-between">
18+
<Card className="flex items-center mb-1 w-full h-full justify-between">
1919
<>
2020
<div className="flex items-center">
2121
<OperatorAvatar name={name} size="large" />

0 commit comments

Comments
 (0)