loveuer/upipe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip: alpha

Browse Source
This commit is contained in:
loveuer 2025-04-02 09:28:39 +08:00
parent b4e3e7d5c6
commit b2bbfab22c
1 changed files with 9 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/pages/task/components/TaskCreate.tsx
View File

@ -22,11 +22,11 @@ export interface TaskCreateProps {
const steps: Step[] = [ const steps: Step[] = [
{ id: 1, title: '步骤1', type: 'src' } as Step, { id: 1, title: '步骤1', type: 'src' } as Step,
{ id: 2, title: '步骤2', type: 'mid' } as Step, { id: 2, title: '步骤2', type: 'mid' } as Step,
{ id: 2, title: '步骤3', type: 'mid' } as Step, { id: 3, title: '步骤3', type: 'mid' } as Step,
{ id: 2, title: '步骤4', type: 'mid' } as Step, { id: 4, title: '步骤4', type: 'mid' } as Step,
{ id: 2, title: '步骤5', type: 'mid' } as Step, { id: 5, title: '步骤5', type: 'mid' } as Step,
{ id: 2, title: '步骤6', type: 'mid' } as Step, { id: 6, title: '步骤6', type: 'mid' } as Step,
{ id: 3, title: '步骤7', type: 'dst' } as Step, { id: 7, title: '步骤7', type: 'dst' } as Step,
] ]
@ -37,14 +37,13 @@ export const TaskCreate = (props: TaskCreateProps) => {
const onDragEnd = ({ active, over }) => { const onDragEnd = ({ active, over }) => {
if (active.id !== over?.id) { if (active.id !== over?.id) {
setItems(items => { setItems(items => {
const oldIndex = items.indexOf(active.id); const oldIndex = items.findIndex(item => item.id === active.id);
const newIndex = items.indexOf(over.id); const newIndex = items.findIndex(item => item.id === over.id);
return arrayMove(items, oldIndex, newIndex); return arrayMove(items, oldIndex, newIndex);
}); });
} }
}; };
return ( return (
<div> <div>
<Modal <Modal
@ -57,16 +56,14 @@ export const TaskCreate = (props: TaskCreateProps) => {
}} }}
title="新建任务" title="新建任务"
open={props.open} open={props.open}
// footer={null}
> >
<DndContext onDragEnd={onDragEnd}> <DndContext onDragEnd={onDragEnd}>
<SortableContext items={items} strategy={verticalListSortingStrategy}> <SortableContext items={items} strategy={verticalListSortingStrategy}>
<Collapse> <Collapse>
{items.filter(v => v.type === "mid").map(item => ( {items.map(item => (
<SortableItem key={item.id} id={item.id}> <SortableItem key={item.id} id={item.id}>
<Collapse.Panel key={item.id} header={item.title}> <Collapse.Panel key={item.id} header={item.title}>
步骤内容 {'步骤内容-' + item.type}
</Collapse.Panel> </Collapse.Panel>
</SortableItem> </SortableItem>
))} ))}
@ -79,7 +76,6 @@ export const TaskCreate = (props: TaskCreateProps) => {
}; };
// Bug fix: Correctly define the type of the children prop to avoid implicit 'any' type
const SortableItem = ({ id, children }: { id: number; children: JSX.Element }) => { const SortableItem = ({ id, children }: { id: number; children: JSX.Element }) => {
const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id }); const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id });