lu-lowcode-package-form 0.11.64 → 0.11.65

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lu-lowcode-package-form",
-  "version": "0.11.64",
+  "version": "0.11.65",
   "dependencies": {
     "@ant-design/icons": "^4.8.1",
     "@dnd-kit/core": "^6.1.0",

package/src/components/field/table/drag-head.jsx

@@ -20,6 +20,31 @@ const DragHead = ({ childrenDesc, initialWidth, changeWidth, showAction, showLab
         }
     },[initialWidth])
 
+    useEffect(() => {
+        // 创建CSS变量
+        document.documentElement.style.setProperty('--drag-position', '0px');
+        
+        // 创建指示线DOM元素
+        const indicator = document.createElement('div');
+        indicator.id = 'column-drag-indicator';
+        indicator.style.cssText = `
+            position: fixed;
+            top: 0;
+            left: var(--drag-position);
+            width: 2px;
+            height: 100vh;
+            background-color: #1890ff;
+            pointer-events: none;
+            z-index: 9999;
+            display: none;
+        `;
+        document.body.appendChild(indicator);
+        
+        return () => {
+            document.body.removeChild(indicator);
+        };
+    }, []);
+
     const getColumnWidth = (index) => {
         return headWidths[index] || 150
     }
@@ -27,11 +52,12 @@ const DragHead = ({ childrenDesc, initialWidth, changeWidth, showAction, showLab
     // 处理拖动开始
     const onResizeStart = (index) => {
         return (e, data) => {
-            e.stopPropagation()
-            setIsDragging(true)
-            setResizingColumn(index)
-            setDragPosition(e.clientX)
-            startPositionRef.current = e.clientX
+            e.stopPropagation();
+            document.getElementById('column-drag-indicator').style.display = 'block';
+            setIsDragging(true);
+            setResizingColumn(index);
+            document.documentElement.style.setProperty('--drag-position', `${e.clientX}px`);
+            startPositionRef.current = e.clientX;
         }
     }
 
@@ -39,26 +65,32 @@ const DragHead = ({ childrenDesc, initialWidth, changeWidth, showAction, showLab
     const onResize = (index) => {
         return (e, { size }) => {
             e.stopPropagation()
-            // 只在拖动过程中更新虚拟指示线位置
-            setDragPosition(e.clientX)
+            requestAnimationFrame(() => {
+                // // 只在拖动过程中更新虚拟指示线位置
+                // setDragPosition(e.clientX)
+                document.documentElement.style.setProperty('--drag-position', `${e.clientX}px`);
+            });
         }
     }
 
     // 处理拖动结束
     const onResizeStop = (index) => {
         return (e, { size }) => {
+            document.getElementById('column-drag-indicator').style.display = 'none';
+            
             // 更新列宽
-            const newHeadWidths = [...headWidthsRef.current]
-            const delta = e.clientX - startPositionRef.current
-            const oldWidth = headWidths[index] || 150
-            const newWidth = Math.max(50, oldWidth + delta)
-            newHeadWidths[index] = newWidth
-            headWidthsRef.current = newHeadWidths
-            setHeadWidths(newHeadWidths)
-            typeof changeWidth === 'function' && changeWidth(newHeadWidths)
+            const newHeadWidths = [...headWidthsRef.current];
+            const delta = e.clientX - startPositionRef.current;
+            const oldWidth = headWidths[index] || 150;
+            const newWidth = Math.max(50, oldWidth + delta);
+            newHeadWidths[index] = newWidth;
+            headWidthsRef.current = newHeadWidths;
+            setHeadWidths(newHeadWidths);
+            typeof changeWidth === 'function' && changeWidth(newHeadWidths);
+            
             // 重置拖动状态
-            setIsDragging(false)
-            setResizingColumn(null)
+            setIsDragging(false);
+            setResizingColumn(null);
         }
     }
 
@@ -122,7 +154,8 @@ const DragHead = ({ childrenDesc, initialWidth, changeWidth, showAction, showLab
         })}
         {showAction && <div className="fsticky fright-0 fborder-b" style={{ boxShadow: "rgba(50, 50, 50, 0.15) -6px 0px 6px -6px", flex: "0 0 50px", width: "50px" }}></div>}
     </div>
-        <DragIndicator /></>
+        {/* <DragIndicator /> */}
+        </>
 }
 
 export default DragHead

package/src/components/field/table/index.jsx

@@ -81,7 +81,7 @@ const Table = ({ children, onTableAddRow, disabled, readonly, onTableRemoveRow,
             setHeadWidths(props?.columnsWidth)
             setInitialWidth(props?.columnsWidth)
         }
-    }, [props])
+    }, [props?.columnsWidth])
 
     useEffect(()=>{
        console.log("Table headWidths", headWidths)