feat: 添加table控件拖拽动态修改列宽功能

src/renderer/src/lvgl-widgets/table/index.tsx

@@ -25,9 +25,19 @@ export default {
       stateList
     }
   ],
-  // onChangeSize: (props: any) => {
-  //   console.log('修改宽高')
-  // },
+  onChangeSize: (
+    props: any,
+    size: { originWidth: number; currentWidth: number; originHeight: number; currentHeight: number }
+  ) => {
+    if (!props) return
+
+    const w = size.currentWidth - (size.originWidth || props.columnWidth.reduce((a, b) => a + b, 0))
+    const offset = Math.round(w / props.columnWidth.length)
+    // 修改列宽
+    props.columnWidth.forEach((columnWidth, index) => {
+      props.columnWidth[index] = columnWidth + offset
+    })
+  },
   defaultSchema: {
     name: 'table',
     props: {

src/renderer/src/views/designer/workspace/stage/Moveable.vue

@@ -209,16 +209,26 @@ const onResizeEnd = (e) => {
     // 触发控件监听事件
     const onChangeSize = componentMap[projectStore.activeWidgetMap[id].type]?.onChangeSize
     if (typeof onChangeSize === 'function') {
+      const originWidth = projectStore.activeWidgetMap[id].props.width
+      const originHeight = projectStore.activeWidgetMap[id].props.height
       onChangeSize(projectStore.activeWidgetMap[id].props, {
-        originWdith: projectStore.activeWidgetMap[id].props.width,
+        originWidth,
         currentWidth: width,
-        originHeight: projectStore.activeWidgetMap[id].props.height,
+        originHeight,
         currentHeight: height
       })
     }
 
-    projectStore.activeWidgetMap[id].props.width = width
-    projectStore.activeWidgetMap[id].props.height = height
+    if (projectStore.activeWidgetMap[id].props.width !== undefined) {
+      projectStore.activeWidgetMap[id].props.width = width
+    } else {
+      e.target.style.width = ''
+    }
+    if (projectStore.activeWidgetMap[id].props.height !== undefined) {
+      projectStore.activeWidgetMap[id].props.height = height
+    } else {
+      e.target.style.height = ''
+    }
 
     // 带可选固定高度控件
     if (has(projectStore.activeWidgetMap[id].props, 'fixedHeight')) {
@@ -271,16 +281,26 @@ const onResizeGroupEnd = ({ events }) => {
       // 触发控件监听事件
       const onChangeSize = componentMap[projectStore.activeWidgetMap[id].type]?.onChangeSize
       if (typeof onChangeSize === 'function') {
+        const originWidth = projectStore.activeWidgetMap[id].props.width
+        const originHeight = projectStore.activeWidgetMap[id].props.height
         onChangeSize(projectStore.activeWidgetMap[id].props, {
-          originWdith: projectStore.activeWidgetMap[id].props.width,
+          originWidth,
           currentWidth: width,
-          originHeight: projectStore.activeWidgetMap[id].props.height,
+          originHeight,
           currentHeight: height
         })
       }
 
-      projectStore.activeWidgetMap[id].props.width = width
-      projectStore.activeWidgetMap[id].props.height = height
+      if (projectStore.activeWidgetMap[id].props.width !== undefined) {
+        projectStore.activeWidgetMap[id].props.width = width
+      } else {
+        ev.target.style.width = ''
+      }
+      if (projectStore.activeWidgetMap[id].props.height !== undefined) {
+        projectStore.activeWidgetMap[id].props.height = height
+      } else {
+        ev.target.style.height = ''
+      }
 
       // 带可选固定高度控件
       if (has(projectStore.activeWidgetMap[id].props, 'fixedHeight')) {