fix: 修改数据绑定问题

apps/er-designer/src/models/erModel.tsx

@@ -225,26 +225,6 @@ export default function erModel() {
         updateRemark(args.current);
       }
     );
-
-    // Graph.registerAnchor({
-    //   'custom-anchor': function(view, magnet, ref, options) {
-    //     // console.log(view, magnet, ref);
-    //     const source = magnet.getBoundingClientRect();
-    //     const target = (ref as SVGAElement).getBoundingClientRect();
-    //     console.log(source, target, this);
-    //     if(source.x + source.width < target.x + target.width) {
-    //       // 右侧
-    //       // 获取右侧点
-    //       if(this.sourceView?.cell.isNode()) {
-    //         return new Point(this.sourceView.getBBox().x + this.sourceView.getBBox().width, this.sourceView.getBBox().y + this.sourceView.getBBox().height / 2);
-    //       }
-    //     } else {
-    //       // 左侧
-    //       return new Point(this.sourceView.getBBox().x, this.sourceView.getBBox().y + this.sourceView.getBBox().height / 2);
-    //     }
-    //     return new Point(100, 200);
-    //   }
-    // });
   };
 
   // 能否重做

apps/er-designer/src/pages/er/components/RemarkPanel.tsx

@@ -1,27 +1,29 @@
 import { DeleteOutlined, SearchOutlined } from "@ant-design/icons";
 import { Button, Input, Form, Popconfirm } from "antd";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import CustomColorPicker from "@/components/CustomColorPicker";
 import { useModel } from "umi";
 import noData from "@/assets/no-data.png";
-
+import { RemarkInfo } from "@/type";
 export default function RemarkPanel() {
   const { project, addRemark, deleteRemark, updateRemark } =
     useModel("erModel");
   const { remarks = [] } = project;
   const [search, setSearch] = React.useState("");
   const [activeKey, setActiveKey] = React.useState("");
+  const [remarkList, setRemarkList] = useState(remarks);
 
-  const list = React.useMemo(() => {
-    return remarks.filter((item) => item.name.includes(search));
-  }, [search, remarks]);
+  useEffect(() => {
+    setRemarkList(remarks.filter(item => item.name.includes(search)));
+  }, [remarks, search]);
 
-  const handleChange = (index: number, key: string, value: any) => {
-    const data = remarks[index];
-    updateRemark({
-      ...data,
-      [key]: value,
-    });
+  const handleChange = (index: number, key: keyof RemarkInfo, value: any) => {
+    const data = remarkList[index];
+    const newData = { ...data, [key]: value };
+    updateRemark(newData);
+    const arr = [...remarkList];
+    arr[index] = newData;
+    setRemarkList(arr);
   };
 
   return (
@@ -38,7 +40,7 @@ export default function RemarkPanel() {
           添加注释
         </Button>
       </div>
-      {list.map((item, index) => {
+      {remarkList.map((item, index) => {
         return (
           <div
             key={item.id}
@@ -82,7 +84,7 @@ export default function RemarkPanel() {
                 <Form.Item label="标题" layout="vertical">
                   <Input
                     placeholder="请输入"
-                    value={item.name}
+                    defaultValue={item.name}
                     onChange={(e) =>
                       handleChange(index, "name", e.target.value)
                     }
@@ -133,7 +135,7 @@ export default function RemarkPanel() {
           </div>
         );
       })}
-      {list.length === 0 && (
+      {remarkList.length === 0 && (
         <div className="flex flex-col items-center justify-center h-[300px]">
           <img src={noData} alt="暂无数据" className="w-[200px] h-[200px]" />
           <div className="text-gray-400">添加额外注释内容！</div>

apps/er-designer/src/pages/er/components/TableItem.tsx

@@ -11,13 +11,16 @@ import {
   Popover,
   Popconfirm,
 } from "antd";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import CustomColorPicker from "@/components/CustomColorPicker";
 import { ColumnItem, TableItemType } from "@/type";
 import { TABLE_TYPE_OPTIONS, DATA_TYPE_OPTIONS } from "@/constants";
 import { uuid } from "@/utils";
 import { DataType } from "@/enum";
 import { useModel } from "umi";
+import { DndContext } from "@dnd-kit/core";
+import type { DragEndEvent } from "@dnd-kit/core";
+import { SortableContext, arrayMove, verticalListSortingStrategy } from "@dnd-kit/sortable";
 
 export default function TableItem({
   data,
@@ -32,9 +35,13 @@ export default function TableItem({
 }) {
   const { tableColumnList = [] } = data;
   const { addTable, deleteTable } = useModel("erModel");
-
+  const [list, setList] = useState(tableColumnList);
   const [table, setTable] = React.useState(data?.table);
 
+  useEffect(() => {
+    setList(tableColumnList);
+  }, [tableColumnList]);
+
   const handleTableChange = (key: string, value: any) => {
     onChange({
       tableColumnList,
@@ -45,6 +52,9 @@ export default function TableItem({
   };
 
   const handleChangeColumn = (index: number, key: string, value: any) => {
+    const data = tableColumnList[index];
+    const newData = { ...data, [key]: value };
+    setList(tableColumnList.map((item, i) => (i === index ? newData : item)));
     onChange({
       isTable: true,
       table,
@@ -94,6 +104,10 @@ export default function TableItem({
     });
   };
 
+  const handleDragEnd = (event: DragEndEvent) => {
+
+  }
+
   return (
     <div
       className="
@@ -108,7 +122,7 @@ export default function TableItem({
       p-l-16px"
       style={{
         borderLeftColor: table.style?.color || "#eee",
-        marginLeft: table.parentBusinessTableId ? 10 : 0
+        marginLeft: table.parentBusinessTableId ? 10 : 0,
       }}
     >
       <div
@@ -165,10 +179,14 @@ export default function TableItem({
               onClick={(e) => e.stopPropagation()}
             />
           </Popover>
-          <i className="iconfont icon-open inline-block" style={{
-            transform: active === table.id ? "rotate(180deg)" : "rotate(0deg)",
-            transition: "all 0.3s",
-          }} />
+          <i
+            className="iconfont icon-open inline-block"
+            style={{
+              transform:
+                active === table.id ? "rotate(180deg)" : "rotate(0deg)",
+              transition: "all 0.3s",
+            }}
+          />
         </div>
       </div>
       <div
@@ -256,189 +274,225 @@ export default function TableItem({
 
           <div className="column-content border-solid border-1px border-#e4e4e4 border-x-none p-y-10px">
             {/* 字段内容 */}
-            {tableColumnList.map((column, index) => {
-              return (
-                <div
-                  key={column.id}
-                  className="column-item flex gap-4px items-center jutify-space-between hover:bg-gray-100 mb-4px"
-                >
-                  <HolderOutlined className="cursor-move" />
-                  <Tooltip title="字段编码">
-                    <Input
-                      placeholder="编码"
-                      value={column.schemaName}
-                      className="flex-1"
-                      onChange={(e) =>
-                        handleChangeColumn(index, "schemaName", e.target.value)
-                      }
-                    />
-                  </Tooltip>
-                  <Tooltip title="字段类型">
-                    <Select
-                      placeholder="类型"
-                      className="w-80px"
-                      options={DATA_TYPE_OPTIONS}
-                      value={column.type}
-                      onChange={(value) =>
-                        handleChangeColumn(index, "type", value)
-                      }
-                      dropdownStyle={{ width: 120 }}
-                    />
-                  </Tooltip>
-                  <Tooltip title="非空">
+            <DndContext onDragEnd={handleDragEnd}>
+              <SortableContext items={list.map(item => item.id)} strategy={verticalListSortingStrategy}>
+                {list.map((column, index) => {
+                  return (
                     <div
-                      className="
-                    rounded-4px 
-                    cus-btn 
-                    w-32px 
-                    h-32px 
-                    bg-#eee 
-                    flex-none 
-                    text-center 
-                    leading-32px 
-                    cursor-pointer 
-                    hover:bg-#ddd"
-                      style={
-                        column.isRequired
-                          ? { background: "#1677ff", color: "#fff" }
-                          : {}
-                      }
-                      onClick={() =>
-                        handleChangeColumn(
-                          index,
-                          "isRequired",
-                          !column.isRequired
-                        )
-                      }
+                      key={column.id}
+                      className="column-item flex gap-4px items-center jutify-space-between hover:bg-gray-100 mb-4px"
                     >
-                      !
-                    </div>
-                  </Tooltip>
-                  <Tooltip title="唯一">
-                    <div
-                      className="
-                    rounded-4px 
-                    cus-btn 
-                    w-32px 
-                    h-32px 
-                    bg-#eee 
-                    flex-none 
-                    text-center 
-                    leading-32px 
-                    cursor-pointer 
-                    hover:bg-#ddd"
-                      style={
-                        column.isUnique
-                          ? { background: "#1677ff", color: "#fff" }
-                          : {}
-                      }
-                      onClick={() =>
-                        handleChangeColumn(index, "isUnique", !column.isUnique)
-                      }
-                    >
-                      1
-                    </div>
-                  </Tooltip>
-                  <Popover
-                    trigger="click"
-                    placement="right"
-                    content={
-                      <div
-                        className="w-200px max-h-400px overflow-y-auto"
-                        onClick={(e) => e.stopPropagation()}
-                      >
-                        <Form layout="vertical">
-                          <Form.Item label="字段名称" name="pkName">
-                            <Input
-                              className="w-full"
-                              placeholder="中文"
-                              value={column.cn_name}
-                              onChange={(e) =>
-                                handleChangeColumn(
-                                  index,
-                                  "cn_name",
-                                  e.target.value
-                                )
-                              }
-                            />
-                            <Input
-                              className="w-full"
-                              placeholder="英文"
-                              value={column.en_name}
-                              onChange={(e) =>
-                                handleChangeColumn(
-                                  index,
-                                  "en_name",
-                                  e.target.value
-                                )
-                              }
-                            />
-                          </Form.Item>
-                          <Form.Item label="描述" name="pkName">
-                            <Input.TextArea
-                              className="w-full"
-                              placeholder="描述中文..."
-                            />
-                            <Input.TextArea
-                              className="w-full"
-                              placeholder="描述英文..."
-                            />
-                          </Form.Item>
-                          <Form.Item label="长度">
-                            <InputNumber
-                              placeholder="请输入"
-                              min={0}
-                              className="w-full"
-                              value={column.maxLength}
-                              onChange={(num) =>
-                                handleChangeColumn(index, "maxLength", num)
-                              }
-                            />
-                          </Form.Item>
-                          <Form.Item label="精度">
-                            <InputNumber
-                              placeholder="请输入"
-                              min={0}
-                              className="w-full"
-                              value={column.precision}
-                              onChange={(num) =>
-                                handleChangeColumn(index, "precision", num)
-                              }
-                            />
-                          </Form.Item>
-                          <Form.Item label="默认值" name="pkName">
-                            <Input
-                              className="w-full"
-                              placeholder="默认值"
-                              value={column.defaultValue}
-                              onChange={(e) =>
-                                handleChangeColumn(
-                                  index,
-                                  "defaultValue",
-                                  e.target.value
-                                )
-                              }
-                            />
-                          </Form.Item>
-                        </Form>
-                        <Button
-                          type="default"
-                          danger
-                          className="w-full"
-                          onClick={() => handleDeleteColumn(column.id)}
+                      <HolderOutlined className="cursor-move" />
+                      <Tooltip title="字段编码">
+                        <Input
+                          placeholder="编码"
+                          defaultValue={column.schemaName}
+                          className="flex-1"
+                          onChange={(e) =>
+                            handleChangeColumn(
+                              index,
+                              "schemaName",
+                              e.target.value
+                            )
+                          }
+                        />
+                      </Tooltip>
+                      <Tooltip title="字段类型">
+                        <Select
+                          placeholder="类型"
+                          className="w-80px"
+                          options={DATA_TYPE_OPTIONS}
+                          value={column.type}
+                          onChange={(value) =>
+                            handleChangeColumn(index, "type", value)
+                          }
+                          dropdownStyle={{ width: 120 }}
+                        />
+                      </Tooltip>
+                      <Tooltip title="非空">
+                        <div
+                          className="
+                      rounded-4px 
+                      cus-btn 
+                      w-32px 
+                      h-32px 
+                      bg-#eee 
+                      flex-none 
+                      text-center 
+                      leading-32px 
+                      cursor-pointer 
+                      hover:bg-#ddd"
+                          style={
+                            column.isRequired
+                              ? { background: "#1677ff", color: "#fff" }
+                              : {}
+                          }
+                          onClick={() =>
+                            handleChangeColumn(
+                              index,
+                              "isRequired",
+                              !column.isRequired
+                            )
+                          }
                         >
-                          删除
-                        </Button>
-                      </div>
-                    }
-                  >
-                    <div className="rounded-4px cus-btn w-32px h-32px bg-#eee flex-none text-center leading-32px cursor-pointer hover:bg-#ddd">
-                      <i className="iconfont icon-gengduo" />
+                          !
+                        </div>
+                      </Tooltip>
+                      <Tooltip title="唯一">
+                        <div
+                          className="
+                      rounded-4px 
+                      cus-btn 
+                      w-32px 
+                      h-32px 
+                      bg-#eee 
+                      flex-none 
+                      text-center 
+                      leading-32px 
+                      cursor-pointer 
+                      hover:bg-#ddd"
+                          style={
+                            column.isUnique
+                              ? { background: "#1677ff", color: "#fff" }
+                              : {}
+                          }
+                          onClick={() =>
+                            handleChangeColumn(
+                              index,
+                              "isUnique",
+                              !column.isUnique
+                            )
+                          }
+                        >
+                          1
+                        </div>
+                      </Tooltip>
+                      <Popover
+                        trigger="click"
+                        placement="right"
+                        content={
+                          <div
+                            className="w-360px max-h-400px overflow-hidden"
+                            onClick={(e) => e.stopPropagation()}
+                          >
+                            <Form layout="vertical">
+                              <Row gutter={8}>
+                                <Col span={12}>
+                                  <Form.Item label="字段名称" name="pkName">
+                                    <Input
+                                      className="w-full"
+                                      placeholder="中文"
+                                      value={column.cn_name}
+                                      onChange={(e) =>
+                                        handleChangeColumn(
+                                          index,
+                                          "cn_name",
+                                          e.target.value
+                                        )
+                                      }
+                                    />
+                                    <Input
+                                      className="w-full"
+                                      placeholder="英文"
+                                      value={column.en_name}
+                                      onChange={(e) =>
+                                        handleChangeColumn(
+                                          index,
+                                          "en_name",
+                                          e.target.value
+                                        )
+                                      }
+                                    />
+                                  </Form.Item>
+                                </Col>
+                                <Col span={12}>
+                                  <Form.Item label="默认值" name="pkName">
+                                    <Input
+                                      className="w-full"
+                                      placeholder="默认值"
+                                      value={column.defaultValue}
+                                      onChange={(e) =>
+                                        handleChangeColumn(
+                                          index,
+                                          "defaultValue",
+                                          e.target.value
+                                        )
+                                      }
+                                    />
+                                  </Form.Item>
+                                </Col>
+                              </Row>
+                              <Row gutter={8}>
+                                <Col span={12}>
+                                  <Form.Item label="长度">
+                                    <InputNumber
+                                      placeholder="请输入"
+                                      min={0}
+                                      className="w-full"
+                                      value={column.maxLength}
+                                      onChange={(num) =>
+                                        handleChangeColumn(
+                                          index,
+                                          "maxLength",
+                                          num
+                                        )
+                                      }
+                                    />
+                                  </Form.Item>
+                                </Col>
+                                <Col span={12}>
+                                  <Form.Item label="精度">
+                                    <InputNumber
+                                      placeholder="请输入"
+                                      min={0}
+                                      className="w-full"
+                                      value={column.precision}
+                                      onChange={(num) =>
+                                        handleChangeColumn(
+                                          index,
+                                          "precision",
+                                          num
+                                        )
+                                      }
+                                    />
+                                  </Form.Item>
+                                </Col>
+                              </Row>
+                              <Row>
+                                <Col span={24}>
+                                  <Form.Item label="描述" name="pkName">
+                                    <Input.TextArea
+                                      className="w-full"
+                                      placeholder="描述中文..."
+                                    />
+                                    <Input.TextArea
+                                      className="w-full"
+                                      placeholder="描述英文..."
+                                    />
+                                  </Form.Item>
+                                </Col>
+                              </Row>
+                            </Form>
+                            <Button
+                              type="default"
+                              danger
+                              className="w-full"
+                              onClick={() => handleDeleteColumn(column.id)}
+                            >
+                              删除
+                            </Button>
+                          </div>
+                        }
+                      >
+                        <div className="rounded-4px cus-btn w-32px h-32px bg-#eee flex-none text-center leading-32px cursor-pointer hover:bg-#ddd">
+                          <i className="iconfont icon-gengduo" />
+                        </div>
+                      </Popover>
                     </div>
-                  </Popover>
-                </div>
-              );
-            })}
+                  );
+                })}
+              </SortableContext>
+            </DndContext>
           </div>
         </div>
       </div>

apps/er-designer/src/pages/er/components/ThemePanel.tsx

@@ -1,6 +1,6 @@
 import { DeleteOutlined, SearchOutlined } from "@ant-design/icons";
 import { Button, Input, Popconfirm } from "antd";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import CustomColorPicker from "@/components/CustomColorPicker";
 import { useModel } from "umi";
 import noData from "@/assets/no-data.png";
@@ -10,17 +10,17 @@ export default function ThemePanel() {
 
   const { topicAreas = [] } = project;
   const [search, setSearch] = React.useState("");
+  const [topicAreaList, setTopicAreaList] = useState(topicAreas);
 
-  const list = React.useMemo(() => {
-    return topicAreas.filter((item) => item.name.includes(search));
-  }, [search, topicAreas]);
-
+  useEffect(() => {
+    setTopicAreaList(topicAreas.filter(item => item.name.includes(search)));
+  }, [topicAreas, search]);
+  
   const handleChange = (index: number, key: string, value: any) => {
     const data = topicAreas[index];
-    updateTopicArea({
-      ...data,
-      [key]: value,
-    });
+    const newData = { ...data, [key]: value };
+    updateTopicArea(newData);
+    setTopicAreaList(topicAreas.map((item, i) => (i === index ? newData : item)));
   };
 
   return (
@@ -37,7 +37,7 @@ export default function ThemePanel() {
           添加区域
         </Button>
       </div>
-      {list.map((item, index) => {
+      {topicAreaList.map((item, index) => {
         return (
           <div key={item.id} className="m-b-10px flex justify-between gap-12px">
             <Input placeholder="主题名称" value={item.name} onChange={(e) => handleChange(index, 'name', e.target.value)}/>
@@ -65,7 +65,7 @@ export default function ThemePanel() {
         );
       })}
       {
-        list.length === 0 && (
+        topicAreaList.length === 0 && (
           <div className="flex flex-col items-center justify-center h-[300px]">
             <img src={noData} alt="暂无数据" className="w-[200px] h-[200px]" />
             <div className="text-gray-400">添加主题区域对表进行分组！</div>

package.json

@@ -47,6 +47,8 @@
     "@codemirror/lang-vue": "^0.1.3",
     "@codemirror/lang-xml": "^6.1.0",
     "@codemirror/lang-yaml": "^6.1.1",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
     "@emotion/css": "^11.13.0",
     "@types/lodash-es": "^4.17.12",
     "@uiw/react-codemirror": "^4.23.3",

pnpm-lock.yaml

@@ -95,6 +95,12 @@ importers:
       '@codemirror/lang-yaml':
         specifier: ^6.1.1
         version: 6.1.1(@codemirror/view@6.34.1)
+      '@dnd-kit/core':
+        specifier: ^6.3.1
+        version: 6.3.1(react-dom@18.3.1)(react@18.3.1)
+      '@dnd-kit/sortable':
+        specifier: ^10.0.0
+        version: 10.0.0(@dnd-kit/core@6.3.1)(react@18.3.1)
       '@emotion/css':
         specifier: ^11.13.0
         version: 11.13.0
@@ -629,9 +635,9 @@ packages:
       '@ant-design/pro-provider': 2.14.9(antd@5.20.5)(react-dom@18.3.1)(react@18.3.1)
       '@ant-design/pro-utils': 2.15.17(antd@5.20.5)(react-dom@18.3.1)(react@18.3.1)
       '@babel/runtime': 7.25.6
-      '@dnd-kit/core': 6.1.0(react-dom@18.3.1)(react@18.3.1)
-      '@dnd-kit/modifiers': 6.0.1(@dnd-kit/core@6.1.0)(react@18.3.1)
-      '@dnd-kit/sortable': 7.0.2(@dnd-kit/core@6.1.0)(react@18.3.1)
+      '@dnd-kit/core': 6.3.1(react-dom@18.3.1)(react@18.3.1)
+      '@dnd-kit/modifiers': 6.0.1(@dnd-kit/core@6.3.1)(react@18.3.1)
+      '@dnd-kit/sortable': 7.0.2(@dnd-kit/core@6.3.1)(react@18.3.1)
       '@dnd-kit/utilities': 3.2.2(react@18.3.1)
       antd: 5.20.5(react-dom@18.3.1)(react@18.3.1)
       classnames: 2.5.1
@@ -1724,44 +1730,56 @@ packages:
     resolution: {integrity: sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==}
     engines: {node: '>=10'}
 
-  /@dnd-kit/accessibility@3.1.0(react@18.3.1):
-    resolution: {integrity: sha512-ea7IkhKvlJUv9iSHJOnxinBcoOI3ppGnnL+VDJ75O45Nss6HtZd8IdN8touXPDtASfeI2T2LImb8VOZcL47wjQ==}
+  /@dnd-kit/accessibility@3.1.1(react@18.3.1):
+    resolution: {integrity: sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==}
     peerDependencies:
       react: '>=16.8.0'
     dependencies:
       react: 18.3.1
       tslib: 2.7.0
 
-  /@dnd-kit/core@6.1.0(react-dom@18.3.1)(react@18.3.1):
-    resolution: {integrity: sha512-J3cQBClB4TVxwGo3KEjssGEXNJqGVWx17aRTZ1ob0FliR5IjYgTxl5YJbKTzA6IzrtelotH19v6y7uoIRUZPSg==}
+  /@dnd-kit/core@6.3.1(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
     dependencies:
-      '@dnd-kit/accessibility': 3.1.0(react@18.3.1)
+      '@dnd-kit/accessibility': 3.1.1(react@18.3.1)
       '@dnd-kit/utilities': 3.2.2(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
       tslib: 2.7.0
 
-  /@dnd-kit/modifiers@6.0.1(@dnd-kit/core@6.1.0)(react@18.3.1):
+  /@dnd-kit/modifiers@6.0.1(@dnd-kit/core@6.3.1)(react@18.3.1):
     resolution: {integrity: sha512-rbxcsg3HhzlcMHVHWDuh9LCjpOVAgqbV78wLGI8tziXY3+qcMQ61qVXIvNKQFuhj75dSfD+o+PYZQ/NUk2A23A==}
     peerDependencies:
       '@dnd-kit/core': ^6.0.6
       react: '>=16.8.0'
     dependencies:
-      '@dnd-kit/core': 6.1.0(react-dom@18.3.1)(react@18.3.1)
+      '@dnd-kit/core': 6.3.1(react-dom@18.3.1)(react@18.3.1)
       '@dnd-kit/utilities': 3.2.2(react@18.3.1)
       react: 18.3.1
       tslib: 2.7.0
 
-  /@dnd-kit/sortable@7.0.2(@dnd-kit/core@6.1.0)(react@18.3.1):
+  /@dnd-kit/sortable@10.0.0(@dnd-kit/core@6.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==}
+    peerDependencies:
+      '@dnd-kit/core': ^6.3.0
+      react: '>=16.8.0'
+    dependencies:
+      '@dnd-kit/core': 6.3.1(react-dom@18.3.1)(react@18.3.1)
+      '@dnd-kit/utilities': 3.2.2(react@18.3.1)
+      react: 18.3.1
+      tslib: 2.7.0
+    dev: false
+
+  /@dnd-kit/sortable@7.0.2(@dnd-kit/core@6.3.1)(react@18.3.1):
     resolution: {integrity: sha512-wDkBHHf9iCi1veM834Gbk1429bd4lHX4RpAwT0y2cHLf246GAvU2sVw/oxWNpPKQNQRQaeGXhAVgrOl1IT+iyA==}
     peerDependencies:
       '@dnd-kit/core': ^6.0.7
       react: '>=16.8.0'
     dependencies:
-      '@dnd-kit/core': 6.1.0(react-dom@18.3.1)(react@18.3.1)
+      '@dnd-kit/core': 6.3.1(react-dom@18.3.1)(react@18.3.1)
       '@dnd-kit/utilities': 3.2.2(react@18.3.1)
       react: 18.3.1
       tslib: 2.7.0