Skip to content

Commit 997f8fd

Browse files
guansssguansss
authored
Merge pull request #146 from UniMars/dev
修改作业编辑器布局
2 parents 64b89c6 + f9ecef0 commit 997f8fd

File tree

6 files changed

+205
-184
lines changed

6 files changed

+205
-184
lines changed

‎src/components/editor/OperationEditor.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -360,11 +360,11 @@ export const OperationEditor: FC<OperationEditorProps> = ({
360360

361361
<div className="h-[1px] w-full bg-gray-200 mt-4 mb-6" />
362362

363-
<div className="flex flex-wrap md:flex-nowrap min-h-[calc(100vh-6rem)]">
364-
<div className="w-full md:w-1/3 md:mr-8 flex flex-col pb-8">
363+
<div className="flex flex-col min-h-[calc(100vh-6rem)]">
364+
<div className="w-full flex flex-col pb-8">
365365
<EditorPerformerPanel control={control} />
366366
</div>
367-
<div className="w-full md:w-2/3 pb-8">
367+
<div className="w-full pb-8">
368368
<H4>动作序列</H4>
369369
<HelperText className="mb-4">
370370
<span>拖拽以重新排序</span>

‎src/components/editor/action/EditorActionAdd.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ export const EditorActionAdd = ({
121121

122122
return (
123123
<form onSubmit={onSubmit}>
124-
<Card className="mb-2 pt-4">
124+
<Card className="mb-2 pb-8 pt-4 overflow-auto h-[calc(100vh-6rem)]">
125125
<div className="flex items-center mb-4">
126126
<CardTitle className="mb-0" icon={isNew ? 'add' : 'edit'}>
127127
<span>{isNew ? '添加' : '编辑'}动作</span>

‎src/components/editor/action/EditorActions.tsx‎

Lines changed: 60 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -94,63 +94,67 @@ export const EditorActions = ({ control }: EditorActionsProps) => {
9494
}
9595

9696
return (
97-
<div>
98-
<EditorActionAdd
99-
control={control}
100-
action={editingAction}
101-
onSubmit={onSubmit}
102-
onCancel={() => setEditingAction(undefined)}
103-
/>
104-
105-
<div className="p-2 -mx-2">
106-
<DndContext
107-
sensors={sensors}
108-
onDragStart={handleDragStart}
109-
onDragOver={handleDragOver}
110-
onDragEnd={handleDragEnd}
111-
onDragCancel={handleDragEnd}
112-
>
113-
<SortableContext
114-
items={actions.map(getId)}
115-
strategy={verticalListSortingStrategy}
97+
<div className="flex flex-wrap md:flex-nowrap min-h-[calc(100vh-6rem)]">
98+
<div className="md:w-1/2 md:mr-8 w-full">
99+
<EditorActionAdd
100+
control={control}
101+
action={editingAction}
102+
onSubmit={onSubmit}
103+
onCancel={() => setEditingAction(undefined)}
104+
/>
105+
</div>
106+
107+
<div className=" md:w-1/2 w-full">
108+
<div className="overflow-auto h-[calc(100vh-6rem)] p-2 pt-0 pb-8 -mx-2">
109+
<DndContext
110+
sensors={sensors}
111+
onDragStart={handleDragStart}
112+
onDragOver={handleDragOver}
113+
onDragEnd={handleDragEnd}
114+
onDragCancel={handleDragEnd}
116115
>
117-
<ul>
118-
{actions.map((action, i) => (
119-
<li key={getId(action)} className="mt-2">
120-
<Sortable id={getId(action)}>
121-
{(attrs) => (
122-
<EditorActionItem
123-
action={action}
124-
editing={isEditing(action)}
125-
onEdit={() =>
126-
setEditingAction(
127-
isEditing(action) ? undefined : action,
128-
)
129-
}
130-
onDuplicate={() => handleDuplicate(i)}
131-
onRemove={() => remove(i)}
132-
{...attrs}
133-
/>
134-
)}
135-
</Sortable>
136-
</li>
137-
))}
138-
</ul>
139-
</SortableContext>
140-
141-
<DragOverlay>
142-
{draggingAction && (
143-
<EditorActionItem
144-
editing={isEditing(draggingAction)}
145-
action={draggingAction}
146-
/>
147-
)}
148-
</DragOverlay>
149-
</DndContext>
150-
151-
{actions.length === 0 && (
152-
<NonIdealState title="暂无动作" className="my-4" icon="inbox" />
153-
)}
116+
<SortableContext
117+
items={actions.map(getId)}
118+
strategy={verticalListSortingStrategy}
119+
>
120+
<ul>
121+
{actions.map((action, i) => (
122+
<li key={getId(action)} className="mt-2">
123+
<Sortable id={getId(action)}>
124+
{(attrs) => (
125+
<EditorActionItem
126+
action={action}
127+
editing={isEditing(action)}
128+
onEdit={() =>
129+
setEditingAction(
130+
isEditing(action) ? undefined : action,
131+
)
132+
}
133+
onDuplicate={() => handleDuplicate(i)}
134+
onRemove={() => remove(i)}
135+
{...attrs}
136+
/>
137+
)}
138+
</Sortable>
139+
</li>
140+
))}
141+
</ul>
142+
</SortableContext>
143+
144+
<DragOverlay>
145+
{draggingAction && (
146+
<EditorActionItem
147+
editing={isEditing(draggingAction)}
148+
action={draggingAction}
149+
/>
150+
)}
151+
</DragOverlay>
152+
</DndContext>
153+
154+
{actions.length === 0 && (
155+
<NonIdealState title="暂无动作" className="" icon="inbox" />
156+
)}
157+
</div>
154158
</div>
155159
</div>
156160
)

‎src/components/editor/operator/EditorGroupItem.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ export const EditorGroupItem = ({
4242
<Card
4343
elevation={Elevation.TWO}
4444
className={clsx(editing && 'bg-gray-100', isDragging && 'invisible')}
45+
style={{ width: 'fit-content' }}
4546
>
4647
<SortableContext
4748
items={group.opers?.map(getOperatorId) || []}

‎src/components/editor/operator/EditorOperatorItem.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ export const EditorOperatorItem = ({
4040
'flex items-start',
4141
editing && 'bg-gray-100',
4242
isDragging && 'opacity-30',
43+
'h-[72px] w-[calc(4.5*72px)]',
4344
)}
4445
>
4546
<Icon
@@ -51,7 +52,7 @@ export const EditorOperatorItem = ({
5152
<OperatorAvatar id={id} size="large" />
5253
<div className="ml-4 flex-grow">
5354
<h3 className="font-bold leading-none mb-1">{operator.name}</h3>
54-
<div className="text-gray-400">{skill}</div>
55+
<div className="text-gray-400 text-xs">{skill}</div>
5556
</div>
5657

5758
<CardEditOption active={editing} onClick={onEdit} />

0 commit comments

Comments
 (0)