wip: 基本解决了新建拖动排序的问题

frontend/src/pages/TestPage.tsx

@@ -1,80 +0,0 @@
-import { makeStyles } from "@mui/styles";
-import { Tag } from "antd";
-
-const useStyles = makeStyles({
-    container: {
-        height: '200px',
-        width: '600px',
-        border: '1px solid black',
-        margin: "100px",
-        display: 'flex',
-        flexDirection: 'column',
-        flexWrap: 'wrap',
-        overflowY: 'scroll',
-    },
-    names: {
-        maxWidth: '140px',
-        minWidth: '140px', 
-    },
-    phones: {
-        maxWidth: '140px',
-        minWidth: '140px', 
-    },
-    address: {
-        maxWidth: '140px',
-        minWidth: '140px', 
-    }
-});
-export const TestPage = () => {
-    const style = useStyles();
-    return (
-        <div className={style.container}>
-            <div className={style.names}>
-                <Tag>name1</Tag>
-                <Tag>name2</Tag>
-                <Tag>name3</Tag>
-                <Tag>name4</Tag>
-                <Tag>name5</Tag>
-                <Tag>name6</Tag>
-                <Tag>name7</Tag>
-                <Tag>name8</Tag>
-                <Tag>name9</Tag>
-                <Tag>name10</Tag>
-                <Tag>name11</Tag>
-                <Tag>name12</Tag>
-                <Tag>name13</Tag>
-                <Tag>name14</Tag>
-                <Tag>name15</Tag>
-            </div>
-            <div className={style.phones}>
-                <Tag color="success">phone1</Tag>
-                <Tag color="success">phone2</Tag>
-                <Tag color="success">phone3</Tag>
-                <Tag color="success">phone4</Tag>
-                <Tag color="success">phone5</Tag>
-                <Tag color="success">phone6</Tag>
-                <Tag color="success">phone7</Tag>
-                <Tag color="success">phone8</Tag>
-                <Tag color="success">phone9</Tag>
-            </div>
-            <div className={style.address}>
-                <Tag color="error">address1</Tag>
-                <Tag color="error">address2</Tag>
-                <Tag color="error">address3</Tag>
-                <Tag color="error">address4</Tag>
-                <Tag color="error">address5</Tag>
-                <Tag color="error">address6</Tag>
-                <Tag color="error">address7</Tag>
-                <Tag color="error">address8</Tag>
-            </div>
-            <div>
-                <Tag color="warning">birthday</Tag>
-                <Tag color="warning">birthday</Tag>
-                <Tag color="warning">birthday</Tag>
-                <Tag color="warning">birthday</Tag>
-                <Tag color="warning">birthday</Tag>
-                <Tag color="warning">birthday</Tag>
-            </div>
-        </div>
-    );
-}

frontend/src/pages/task/components/TaskCreate.tsx

@@ -1,6 +1,6 @@
 import { makeStyles } from "@mui/styles"
 import { Modal, Collapse } from "antd"
-import { DndContext } from '@dnd-kit/core'
+import { DndContext, } from '@dnd-kit/core'
 import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities'
 import { arrayMove } from '@dnd-kit/sortable'
@@ -11,7 +11,8 @@ const useStyle = makeStyles({
     footer: {
         display: 'flex',
         flexDirection: 'row',
-    }
+    },
+    dnd: {}
 })
 
 export interface TaskCreateProps {
@@ -34,7 +35,7 @@ export const TaskCreate = (props: TaskCreateProps) => {
     const style = useStyle();
     const [items, setItems] = useState(steps);
 
-    const onDragEnd = ({ active, over }) => {
+    const onDragEnd = ({ active, over }: { active: any, over: any }) => {
         if (active.id !== over?.id) {
             setItems(items => {
                 const oldIndex = items.findIndex(item => item.id === active.id);
@@ -57,44 +58,59 @@ export const TaskCreate = (props: TaskCreateProps) => {
                 title="新建任务"
                 open={props.open}
             >
+
+                <SortableItem key={items[0].id} id={items[0].id} disabled>
+                    <Collapse style={{flex:1}} items={[items[0]].map(v => { return { key: v.id, label: v.title, children: <p>hello</p> } })}>
+                    </Collapse>
+                </SortableItem>
                 <DndContext onDragEnd={onDragEnd}>
                     <SortableContext items={items} strategy={verticalListSortingStrategy}>
-                        <Collapse>
+                        {
-                            {items.map(item => (
+                            items.filter(v => v.type === "mid").map(v => {
-                                <SortableItem key={item.id} id={item.id}>
+                                return (
-                                    <Collapse.Panel key={item.id} header={item.title}>
+                                    <SortableItem key={v.id} id={v.id}>
-                                        {'步骤内容-' + item.type}
+                                        <Collapse items={[{ key: v.id, label: v.title, children: <p>hello</p> }]} style={{ flex: 1 }}>
-                                    </Collapse.Panel>
+                                        </Collapse>
-                                </SortableItem>
+                                    </SortableItem>
-                            ))}
+                                )
-                        </Collapse>
+                            })
+                        }
                     </SortableContext>
                 </DndContext>
+                <SortableItem key={items[items.length - 1].id} id={items[items.length - 1].id} disabled>
+                    <Collapse style={{flex:1}} items={[items[items.length - 1]].map(v => { return { key: v.id, label: v.title, children: <p>hello</p> } })}>
+                    </Collapse>
+                </SortableItem>
             </Modal>
         </div>
     );
 };
 
 
-const SortableItem = ({ id, children }: { id: number; children: JSX.Element }) => {
+const SortableItem = ({ id, children, disabled=false }: { id: number; children: JSX.Element;disabled? : boolean}) => {
     const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id });
 
     const style = {
-        transform: CSS.Transform.toString(transform),
+        'transform': CSS.Transform.toString(transform),
         transition,
-        cursor: 'move',
+        'cursor': disabled? 'not-allowed': 'move',
-        backgroundColor: 'white',
+        'background-color': 'white',
-        marginBottom: 8,
+        'margin-bottom': 8,
-        borderRadius: 4,
+        'border-radius': 4,
-        boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
+        'box-shadow': '0 2px 4px rgba(0,0,0,0.1)',
+        'display': 'flex', // Add this line to make the item a flex container
+        'flex-direction': 'row', // Add this line to set the direction of the flex container to row
+        'padding': '10px',
     };
 
     return (
         <div ref={setNodeRef} style={style} {...attributes}>
             <div {...listeners} style={{
                 padding: '8px 16px',
-                borderRight: '2px solid #1890ff',
+                borderRight: disabled?'2px solid red':'2px solid green',
-                display: 'inline-block',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
                 marginRight: 16
             }}>⋮⋮</div>
             {children}

frontend/src/routes.tsx

@@ -3,7 +3,6 @@ import { HomePage } from './pages/HomePage';
 import { AboutPage } from './pages/AboutPage';
 import TaskPage from './pages/task/TaskPage';
 import LoginPage from './pages/LoginPage';
-import { TestPage } from './pages/TestPage';
 
 const AppRoutes = () => {
     return (
@@ -13,7 +12,6 @@ const AppRoutes = () => {
                 <Route path="/about" element={<AboutPage />} />
                 <Route path="/tasks" element={<TaskPage />} />
                 <Route path="/login" element={<LoginPage />} />
-                <Route path="/test" element={<TestPage/>} />
             </Routes>
         </Router>
     );