lu-lowcode-package-form 0.7.3 → 0.7.12

package/dist/style.css

@@ -1 +1 @@
-*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.relative{position:relative}.ml-2{margin-left:.5rem}.ml-4{margin-left:1rem}.mr-2{margin-right:.5rem}.box-border{box-sizing:border-box}.flex{display:flex}.h-8{height:2rem}.h-full{height:100%}.min-h-5{min-height:1.25rem}.w-\[960px\]{width:960px}.w-full{width:100%}.flex-col{flex-direction:column}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-between{justify-content:space-between}.overflow-auto{overflow:auto}.rounded{border-radius:.25rem}.bg-slate-100{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity))}.p-6{padding:1.5rem}.pb-10{padding-bottom:2.5rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.text-\[\#1890ff\]{--tw-text-opacity: 1;color:rgb(24 144 255 / var(--tw-text-opacity))}.text-gray-200{--tw-text-opacity: 1;color:rgb(229 231 235 / var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity))}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.hover\:text-\[\#1890ff\]:hover{--tw-text-opacity: 1;color:rgb(24 144 255 / var(--tw-text-opacity))}.hover\:text-red-500:hover{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity))}
+*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.relative{position:relative}.mb-5{margin-bottom:1.25rem}.ml-2{margin-left:.5rem}.ml-4{margin-left:1rem}.mr-2{margin-right:.5rem}.box-border{box-sizing:border-box}.flex{display:flex}.h-11{height:2.75rem}.h-8{height:2rem}.h-full{height:100%}.min-h-5{min-height:1.25rem}.w-\[960px\]{width:960px}.w-full{width:100%}.flex-col{flex-direction:column}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-between{justify-content:space-between}.overflow-auto{overflow:auto}.rounded{border-radius:.25rem}.border-b{border-bottom-width:1px}.bg-slate-100{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity))}.p-6{padding:1.5rem}.pb-10{padding-bottom:2.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-medium{font-weight:500}.text-\[\#1890ff\]{--tw-text-opacity: 1;color:rgb(24 144 255 / var(--tw-text-opacity))}.text-gray-200{--tw-text-opacity: 1;color:rgb(229 231 235 / var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity))}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.hover\:text-\[\#1890ff\]:hover{--tw-text-opacity: 1;color:rgb(24 144 255 / var(--tw-text-opacity))}.hover\:text-red-500:hover{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity))}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lu-lowcode-package-form",
-  "version": "0.7.3",
+  "version": "0.7.12",
   "dependencies": {
     "@ant-design/icons": "^5.3.7",
     "@testing-library/jest-dom": "^5.17.0",

package/src/App.jsx

@@ -1,6 +1,7 @@
-import { FormContainer, Field,FormContainerWrapper } from './components';
+import { FormContainer, Field,FormContainerWrapper , Layout } from './components';
 import './App.css';
 import { Button } from 'antd';
+import React from 'react';
 
 const treeData = [
     {
@@ -19,19 +20,47 @@ const treeData = [
 ];
 
 function App() {
+  const formRef = React.createRef();
+  const [cols, setCols] = React.useState(1);
+
+  const getFormFields = () => {
+    console.log("formRef?.current",formRef)
+    const formData = formRef?.current?.formRef?.getFieldsValue();
+    console.log("formData",formData);
+  }
+  const setFormFields = () => {
+    formRef?.current?.formRef?.setFieldsValue({
+      remark11:"{\"label\": \"解决方案部1112\", \"value\": 11}",
+      remark12:"[{\"label\": \"水电费\", \"value\": 2}]",
+    })
+  }
+  const handleCols = () => {
+    setCols(cols + 1)
+  }
   return (
 
     <div className="App flex flex-col items-center">
       <div className='w-[960px] rounded  bg-slate-100 flex flex-col items-center pb-10'>
-        <FormContainerWrapper cols={1} className="" >
+        <FormContainerWrapper cols={cols} className="" ref={formRef} >
           <Field.Input label="分组名" __id="title" />
-
+          <Field.TreeSelect label="分组名" __id="title11"></Field.TreeSelect>
           <Field.CodeMachine label="角色编号" prompt="" __id="code" />
           <Field.Input label="角色名称" __id="name" />
+          <Layout.FormRow _componentName="Layout.FormRow" layout={'1,1,1'}>
+            <Field.Input label="角色名称布局" __id="name1" />
+            <Field.Input label="角色名称布局2" __id="name2" />
+            <Field.Input label="角色名称布局3" __id="name3" />
+            </Layout.FormRow>
           <Field.CheckboxTree label="角色权限" __id="permissions" addRoot={false} treeData={treeData} />
-          <Field.TextArea label="备注" __id="remark" />
+          <Layout.FormGroupTitle _componentName="Layout.FormGroupTitle" title={"关联信息"}/>
+          <Field.WithSingleSelect label="测试关联单选" options={[{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }]} __id="remark11" />
+          <Field.WithMultipleSelect label="测试关联多选" options={[{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }]} __id="remark12" />
+          <Layout.FormRow _componentName="Layout.FormRow"> <Field.TextArea label="备注" __id="remark" /></Layout.FormRow>
+          
         </FormContainerWrapper>
-        <Button type="primary">Button</Button>
+        <Button type="primary" onClick={getFormFields}>GetValues</Button>
+        <Button type="primary" onClick={setFormFields}>SetValues</Button>
+        <Button type="primary" onClick={handleCols}>UpdateCol</Button>
       </div>
 
     </div>

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

@@ -1,2 +1,4 @@
 export { default as TreeSelect } from './tree-select.jsx';
-export { default as Select } from './select.jsx';
+export { Select, WithSingleSelect,WithMultipleSelect } from './select.jsx';
+
+

package/src/components/field/select/select.jsx

@@ -1,9 +1,9 @@
-import {  Select as OriginalSelect } from "antd";
+import { Select as OriginalSelect } from "antd";
 
-import {BaseWrapper } from "../base"
-import React,{useEffect,useState} from 'react'; 
+import { BaseWrapper } from "../base"
+import React, { useEffect, useState } from 'react';
 
-const Select = ({ request, option_label = "label", option_value="id", disabledValue, callError, options , ...props }) => {
+const Select = ({ request, option_label = "label", option_value = "id", disabledValue, callError, options, ...props }) => {
     // const [firstLoad, setFirstLoad] = React.useState(false)
     const [nOptions, setNOptions] = React.useState([])
     useEffect(() => {
@@ -24,16 +24,75 @@ const Select = ({ request, option_label = "label", option_value="id", disabledVa
 
         if (options && options.length > 0) {
             setNOptions(options)
-        } 
+        }
+
 
-       
         // setFirstLoad(true)
     }
-  return (
-    <BaseWrapper {...props}>
-       <OriginalSelect {...props} options={nOptions} />
-    </BaseWrapper>
-  ) 
+    return (
+        <BaseWrapper {...props}>
+            <OriginalSelect {...props} options={nOptions} style={{ width: '100%' }} />
+        </BaseWrapper>
+    )
+}
+
+/**
+ * 关联单选组件
+ * @param {*}  
+ * @returns 
+ */
+const WithSingleSelect = ({ onChange, value, ...props }) => {
+    const [nValue, setNValue] = React.useState("")
+
+    React.useEffect(() => {
+        if(value) {
+            try {
+                value = JSON.parse(value)
+                setNValue(value.label)
+            } catch (error) {
+
+            }
+        }
+    }, [value])
+
+
+    const onWithSelectChange = (_value, _option) => {
+        onChange && typeof onChange == "function" && onChange(JSON.stringify(_option))
+        setNValue(_option.label)
+    }
+    return (
+        <Select {...props} onChange={onWithSelectChange} value={nValue} mode="single" />
+    )
+}
+
+/**
+ * 关联多选组件
+ * @param {*} 
+ * @returns 
+ */
+const WithMultipleSelect = ({ onChange, value, ...props }) => {
+    const [nValue, setNValue] = React.useState([])
+
+
+    React.useEffect(() => {
+        if (value) {
+            try {
+                value = JSON.parse(value)
+                if (Array.isArray(value)) setNValue(value)
+            } catch (error) {
+
+            }
+        }
+    }, [value])
+
+    const onWithSelectChange = (_value, _option) => {
+        onChange && typeof onChange == "function" && onChange(JSON.stringify(_option))
+        const selectLabels = _option.map(item => item.label);
+        setNValue(_option)
+    }
+    return (
+        <Select {...props} onChange={onWithSelectChange} value={nValue} mode="multiple" />
+    )
 }
 
-export default Select ;
+export { WithSingleSelect, WithMultipleSelect, Select };

package/src/components/field/select/tree-select.jsx

@@ -34,7 +34,7 @@ const TreeSelect = ({ request, title, disabledValue, callError, ...props }) => {
     }
     return (
         <BaseWrapper {...props}>
-           {firstLoad && <OriginalTreeSelect  {...props} treeData={treeData} treeDefaultExpandAll />} 
+           {firstLoad && <OriginalTreeSelect  {...props} treeData={treeData} treeDefaultExpandAll style={{ width: '100%' }} />} 
         </BaseWrapper>
     )
 }

package/src/components/form-container/index.jsx

@@ -1,208 +1,180 @@
 import React, { forwardRef, useEffect } from "react";
-
 import { Form, Row, Col } from "antd";
 
-function debounce(func, wait) {
-    let timeout;
-    return function (...args) {
-        clearTimeout(timeout);
-        timeout = setTimeout(() => func.apply(this, args), wait);
-    }
-}
-function groupArray(array, groupLength) {
-    console.log("groupArray array", array.length)
-    const newArray = [];
-    let tmpArray = [];
-
-    const fillReactElement = (groupLength, array) => {
-        const diff = groupLength - array.length;
-        array.push(...new Array(diff).fill(React.createElement('div')));
+import {debounce } from 'lodash';
+
+
+function batchElements(elements, groupSize) {
+    const groupedElements = [];
+    let tempArray = [];
+
+    const fillWithReactElement = (size, array) => {
+        const missingElementsCount = size - array.length;
+        array.push(...new Array(missingElementsCount).fill(React.createElement('div')));
     };
 
-    for (const currNode of array) {
-        const { cols = 1 } = currNode?.props || {};
-        tmpArray.push(currNode);
-
-        if (tmpArray.length === groupLength) {
-            newArray.push(tmpArray);
-            tmpArray = [];
-        } else if (tmpArray.length > groupLength) {
-            fillReactElement(groupLength, tmpArray);
-            newArray.push(tmpArray);
-            tmpArray = [currNode];
+    for (const element of elements) {
+        const { _componentName } = element?.props || {};
+
+        if (_componentName && _componentName.startsWith('Layout')) {
+            if (tempArray.length > 0) {
+                fillWithReactElement(groupSize, tempArray);
+                groupedElements.push(tempArray);
+                tempArray = [];
+            }
+            groupedElements.push([element]);
+        } else {
+            tempArray.push(element);
+            if (tempArray.length === groupSize) {
+                groupedElements.push(tempArray);
+                tempArray = [];
+            }
         }
     }
 
-    if (tmpArray.length > 0) {
-        fillReactElement(groupLength, tmpArray);
-        newArray.push(tmpArray);
+    if (tempArray.length > 0) {
+        fillWithReactElement(groupSize, tempArray);
+        groupedElements.push(tempArray);
     }
 
-    return newArray;
+    return groupedElements;
 }
 
 
-const FormContainer = forwardRef(({ cols, children }, ref) => {
-    cols = cols ? cols : 1
+const FormContainer = forwardRef(({ cols = 1, children }, ref) => {
     const [form] = Form.useForm();
     const [formContent, setFormContent] = React.useState(null);
-    const withMap = React.useRef(null);
-    React.useImperativeHandle(ref, () => {
-        return {
-            formRef: form,
-            initFieldsShow: initFieldsShow,
-        }
-    }, [])
+    const dependencyMap = React.useRef(null);
 
-    useEffect(() => {
-    }, [form])
+    React.useImperativeHandle(ref, () => ({
+        formRef: form,
+        initializeFieldVisibility,
+    }), []);
 
     useEffect(() => {
-        initWithMap()
-        setFormContent(getChildren())
-    }, [])
-
-
-    const initWithMap = () => {
-        withMap.current = new Map();
-        let childrenArray = React.Children.toArray(children);
-        for (let i = 0; i < childrenArray.length; i++) {
-            const { componentId, __id, _componentName, ...props } = childrenArray[i].props;
-            const name = componentId || __id;
-            withMap.current.set(name, {
-                children: childrenArray.filter((item) => {
-                    return item.props.__withId == name || item.props.__withIds?.includes(name)
-                }),
-                show: true
+        initializeDependencyMap();
+        setFormContent(renderChildren());
+    }, [children, cols]);
+
+    const initializeDependencyMap = () => {
+        dependencyMap.current = new Map();
+        const childrenArray = React.Children.toArray(children);
+
+        childrenArray.forEach(child => {
+            const { componentId, __id, ...props } = child.props;
+            const identifier = componentId || __id;
+            dependencyMap.current.set(identifier, {
+                children: childrenArray.filter(item => item.props.__withId === identifier || item.props.__withIds?.includes(identifier)),
+                show: true,
             });
-        }
-
-        initFieldsShow();
+        });
 
-    }
+        initializeFieldVisibility();
+    };
 
     // 初始化字段的显示状态
-    const initFieldsShow = (reloadFields = false) => {
-        const fieldsValues = form.getFieldsValue();
-        withMap.current.keys().forEach(function (key) {
-            computeNeedShow(key, fieldsValues)
-        });
+    const initializeFieldVisibility = (reloadFields = false) => {
+        const fieldValues = form.getFieldsValue();
+        for (let key of dependencyMap.current.keys()) {
+            updateFieldVisibility(key, fieldValues);
+        }
 
-        if (reloadFields) setFormContent(getChildren())
-    }
+        if (reloadFields) setFormContent(renderChildren());
+    };
 
     // 计算是否显示
-    const computeNeedShow = (name, fieldsValues) => {
+    const updateFieldVisibility = (identifier, fieldValues) => {
         let needRefresh = false;
-        if (withMap.current.has(name)) {
-            let withChildrens = withMap.current.get(name).children
-            withChildrens.forEach((item) => {
-                if (item.props.__withFunc && typeof item.props.__withFunc === 'function') {
-                    let childrenShow = item.props.__withFunc(fieldsValues);
-                    const name = item.props.componentId || item.props.__id;
-                    if (withMap.current.has(name)) {
-                        let childrenItem = withMap.current.get(name)
-                        if (childrenItem.show != childrenShow) {
-                            childrenItem.show = childrenShow
-                            withMap.current.set(name, childrenItem)
+        if (dependencyMap.current.has(identifier)) {
+            const dependentChildren = dependencyMap.current.get(identifier).children;
+            dependentChildren.forEach(child => {
+                if (child.props.__withFunc && typeof child.props.__withFunc === 'function') {
+                    const childShouldBeVisible = child.props.__withFunc(fieldValues);
+                    const childIdentifier = child.props.componentId || child.props.__id;
+                    if (dependencyMap.current.has(childIdentifier)) {
+                        const childData = dependencyMap.current.get(childIdentifier);
+                        if (childData.show !== childShouldBeVisible) {
+                            childData.show = childShouldBeVisible;
+                            dependencyMap.current.set(childIdentifier, childData);
                             needRefresh = true;
                         }
                     }
                 }
-            })
+            });
         }
-        return needRefresh
-    }
+        return needRefresh;
+    };
 
     const handleFieldsChange = debounce((changedFields, allFields) => {
-        // 获得所有字段值
-        const fieldsValues = form.getFieldsValue();
+        const fieldValues = form.getFieldsValue();
         let needRefresh = false;
-        for (let index = 0; index < changedFields.length; index++) {
-            const element = changedFields[index];
-            if (element.name && element.name.length > 0)
-                needRefresh = computeNeedShow(element.name[0], fieldsValues)
-        }
+        changedFields.forEach(field => {
+            if (field.name && field.name.length > 0) {
+                needRefresh = updateFieldVisibility(field.name[0], fieldValues);
+            }
+        });
+
         if (needRefresh) {
-            setFormContent(getChildren())
+            setFormContent(renderChildren());
         }
-    }, 100);  // 字段变化时会调用三次此函数，使用 100 毫秒的防抖时间
-
-    const getChildren = () => {
-        let childrenArray = React.Children.toArray(children);
-        const newArray = groupArray(childrenArray.filter((item) => {
-            const name = item.props.componentId || item.props.__id
-            return withMap.current.has(name) && withMap.current.get(name).show
-        }), cols);
-        console.log("newArray", newArray)
-        const result = newArray.map((childs) => {
-            return (
-                <Row
-                    key={childs?.[0]?.key}
-                    gutter={[24, 24]}
-                >
-                    {childs.map((child) => {
-                        const { componentId, __id, _componentName, onChange, ...props } = child.props;
-                        const name = componentId || __id;
-                        const componentName = _componentName;
-
-
-                        // 占整行内容
-                        if (['FieldLayout', 'FieldSubTable'].includes(componentName)) {
-                            // console.log('q=>child', child);
-                            return (
-                                <Col key={name} span={24} style={{ marginBottom: 0 }} >
+    }, 100);
+
+    const renderChildren = () => {
+        const childrenArray = React.Children.toArray(children);
+        const groupedChildren = batchElements(
+            childrenArray.filter(child => {
+                const identifier = child.props.componentId || child.props.__id;
+                return dependencyMap.current.has(identifier) && dependencyMap.current.get(identifier).show;
+            }),
+            cols
+        );
+
+        return groupedChildren.map((group,index) => (
+            <Row key={`row-${index}`} gutter={[24, 24]}>
+                {group.map((child, index) => {
+                    const { componentId, __id, _componentName, ...props } = child.props;
+                    const identifier = componentId || __id;
+                    const isLayoutComponent = _componentName && _componentName.startsWith('Layout');
+
+                    return (
+                        <Col key={identifier || `col-${index}`} span={isLayoutComponent ? 24 : 24 / group.length} style={{ marginBottom: 0 }}>
+                            {isLayoutComponent ? (
+                                child
+                            ) : (
+                                <Form.Item
+                                    style={{ marginBottom: 0 }}
+                                    label=""
+                                    name={identifier}
+                                    rules={[{ required: props.isRequired, message: `${props.title}不能为空！` }]}
+                                >
                                     {child}
-                                </Col>
-                            );
-                        }
-                        // console.log('child', child)
-                        return (
-                            <Col key={name} span={24 / childs.length} >
-                                {name && (
-                                    <Form.Item
-                                        style={{ marginBottom: 0 }}
-                                        label=""
-                                        name={name}
-                                        rules={[{ required: props.isRequired, message: `${props.title}不能为空！` }]}
-                                    >
-
-                                        {child}
-                                    </Form.Item>
-                                )}
-                            </Col>
-                        );
-                    })}
-                </Row>
-            );
-        });
-
-        console.log("result", newArray)
-        return result;
+                                </Form.Item>
+                            )}
+                        </Col>
+                    );
+                })}
+            </Row>
+        ));
     };
+
     return (
         <Form form={form} className="form-container p-6 w-full h-full box-border overflow-auto" onFieldsChange={handleFieldsChange}>
             {formContent}
         </Form>
-    )
+    );
 });
 
-
-/**
- * 简单包装，不做任何处理
- * 部分组件ref比较特殊，包一层会解决这个问题
- */
-export function withWrap(Comp) {
-    return forwardRef((props, ref) => {
-        return <Comp {...props} ref={ref} forwardedRef={ref} />;
-    });
+export function withWrap(Component) {
+    return forwardRef((props, ref) => <Component {...props} ref={ref} forwardedRef={ref} />);
 }
 
-const FormContainerClass = (props) => {
-    const { forwardedRef, ...otherProps } = props;
-    return <FormContainer {...otherProps} ref={forwardedRef} />
+export class FormContainerClass extends React.PureComponent{
+    render() {
+        const { forwardedRef, ...otherProps } = this.props;
+        return <FormContainer {...otherProps} ref={forwardedRef} />
+    }
 }
+const FormContainerWrapper = withWrap(({ forwardedRef, ...props }) => <FormContainer {...props} ref={forwardedRef} />);
 
-const FormContainerWrapper = withWrap(FormContainerClass);
-
-export { FormContainer, FormContainerWrapper }
+export { LayoutFormRow, LayoutFormGroupTitle } from './layout';
+export { FormContainer, FormContainerWrapper };

package/src/components/form-container/layout/form-group-title.jsx

@@ -0,0 +1,6 @@
+const FormGroupTitle = ({ title }) => {
+  return (title? <div className="h-11 border-b flex items-center text-lg font-medium mb-5  ">{title}</div>: null ) 
+};
+
+export default FormGroupTitle;
+

package/src/components/form-container/layout/form-row.jsx

@@ -0,0 +1,48 @@
+import React, { useMemo } from 'react';
+import { Form, Row, Col } from 'antd';
+
+const LayoutFormRow = ({ children, layout }) => {
+  layout = layout || '1';
+  const getColSpan = (layoutStr) => {
+    const layoutArray = layoutStr.split(',').map(Number);
+    const totalCols = 24;
+    return layoutArray.map(num => (num / layoutArray.reduce((a, b) => a + b)) * totalCols);
+  };
+
+  const colSpans = useMemo(() => getColSpan(layout), [layout]);
+
+  console.log("colSpans", colSpans)
+
+  const formItems = useMemo(() => {
+    return React.Children.toArray(children).map((child, index) => {
+      const props = child.props;
+      const name = props?.componentId || props?.__id;
+
+      if (name) {
+        return (
+          colSpans?.[index] && <Col span={colSpans[index]} key={index}>
+            <Form.Item
+              style={{ marginBottom: 0 }}
+              label=""
+              key={`${name}-form-item`}
+              name={name}
+              rules={[{ required: props.isRequired, message: `${props.title}不能为空！` }]}
+            >
+              {child}
+            </Form.Item>
+          </Col>
+        );
+      } else {
+        return (
+          colSpans?.[index] && <Col span={colSpans[index]} key={index}>
+            {child}
+          </Col>
+        );
+      }
+    });
+  }, [children, colSpans]);
+
+  return <Row gutter={24}>{formItems}</Row>;
+};
+
+export default LayoutFormRow;

package/src/components/form-container/layout/index.jsx

@@ -0,0 +1,2 @@
+export { default as LayoutFormRow } from './form-row';
+export { default as LayoutFormGroupTitle } from './form-group-title';

package/src/components/index.jsx

@@ -1,8 +1,8 @@
 import { Input, TextArea, Password, Search ,CodeMachine} from './field/input/index.jsx'
 import '../App.css';
-import { TreeSelect, Select } from './field/select/index.jsx'
+import { TreeSelect, Select, WithSingleSelect,WithMultipleSelect } from './field/select/index.jsx'
 import Custom from './field/custom/index.jsx'
-import {FormContainer, FormContainerWrapper } from './form-container/index.jsx'
+import { FormContainer, FormContainerWrapper,LayoutFormRow,LayoutFormGroupTitle } from './form-container/index.jsx'
 import { Checkbox ,CheckboxTree } from './field/checkbox/index.jsx'
 import { default as RadioGrop } from './field/radio/index.jsx'
 const Field = {
@@ -12,11 +12,16 @@ const Field = {
     Search,
     TreeSelect,
     Select,
+    WithSingleSelect,
+    WithMultipleSelect,
     CodeMachine,
     Checkbox,
     CheckboxTree,
     RadioGrop,
     Custom,
 }
-
-export { FormContainer, Field ,FormContainerWrapper }
+const Layout = {
+    FormRow: LayoutFormRow,
+    FormGroupTitle: LayoutFormGroupTitle
+}
+export { FormContainer, Field ,FormContainerWrapper,Layout }