@cloudbase/weda-ui 3.5.2 → 3.6.0

package/dist/web/components/wd-form/index.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 /* eslint max-lines: [error, 800] */
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
-import { useDebouncedCallback, useDebouncedEffect, useMap, useMountEffect, useSyncedRef, useUnmountEffect, } from '@react-hookz/web';
+import { useMap, useMountEffect, useSyncedRef, useUnmountEffect, } from '@react-hookz/web';
+import { unstable_batchedUpdates } from 'react-dom';
 import { isInIde, usePlatform } from '../../utils/platform';
 import classNames from '../../utils/classnames';
 import { debug } from '../../utils/console';
@@ -11,6 +12,7 @@ import { emptyObject, noop, NOT_EXISTED_VALUE } from '../../utils/constant';
 import * as tcbAppCloud from '../../utils/tcb';
 import { useRemoteValue, useInitValueFromRemote, useRemoteParamsFromValue, } from './hooks/use-remote-value';
 import { createSetStateForAuth, useAuthValue } from './hooks/use-auth-value';
+import { useSetWidgetApi } from '../../utils/widget-api/use-set-widget-api';
 import lodashGet from 'lodash.get';
 import isObjectEqual from '../../utils/isObjectEqual';
 import { useDataSource } from '../../utils/hooks/useDataSource';
@@ -21,20 +23,29 @@ import '../style';
 import { getErrorObjectFromValidateResult, getFormDataFromItemMap, } from './form-utils';
 import { ConfigProvider, StatusTip } from 'tea-component';
 import { isNil } from '../../utils/lodash';
+import { FormTypeProvider } from './contexts/form-type-context';
+import { FormLayoutProvider } from './contexts/form-layout-context';
+import { FormWidgetProvider } from './contexts/form-widget-context';
+import useDebouncedCallback from '../../utils/hooks/use-debounced-callback';
+import { useSyncValue } from '../../utils/hooks/useSyncValue';
+const timeout = (ms) => new Promise((resolve) => {
+    // eslint-disable-next-line rulesdir/no-timer
+    setTimeout(resolve, ms);
+});
 const SET_VALUE_DEBOUNCE_TIMEOUT = 250;
 const logger = debug('wd-form');
 const WdForm = React.forwardRef(function WdForm(props, ref) {
     var _a;
-    const { className, id, style, contentSlot: contentSlotEl, layout = 'horizontal', formType = 'create', _id, datasourceType = 'model', dataSourceName, methodGetItem, methodCreate, methodUpdate, paramGetItem, appCloud = tcbAppCloud, 
+    const { className, id, style, contentSlot: contentSlotEl, layout = 'horizontal', formType = 'create', _id, datasourceType = 'model', dataSourceName, methodGetItem, methodCreate, methodUpdate, paramGetItem, appCloud = tcbAppCloud, lgWidth, labelAlign = 'left', 
     // 兼容流程setValue调用，其他地方别用
-    $node, } = props;
-    const formItemMap = useMap([]);
+    $node, $widget, } = props;
+    const formsItemMap = useMap([]);
     /**
      * 根据他的文档
      * 上面返回的 formItemMap 引用会保持不变，但是Map的方法会导致重渲染
      * 所以要用它作useEffect deps的时候用下面这个string
      *  */
-    const formItemMapKey = [...formItemMap.keys()].sort().join(',');
+    const formItemMapKey = [...formsItemMap.keys()].sort().join(',');
     const formItemMapKeyRef = useRef(formItemMapKey);
     const platform = usePlatform();
     const isH5 = platform === 'h5';
@@ -49,26 +60,40 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
     }, className);
     const isDataModel = !['connector', 'custom-connector'].includes(datasourceType); // 是否为数据模型，兼容历史 undefined
     useLoopRenderDetect();
-    const { ready } = useWedaAppContext();
+    const [isDisabledSubmit, setIsDisabledSubmit] = useSyncValue(props.isDisabledSubmit);
+    const enableSubmit = useCallback(() => {
+        setIsDisabledSubmit(false);
+    }, [setIsDisabledSubmit]);
+    const disableSubmit = useCallback(() => {
+        setIsDisabledSubmit(true);
+    }, [setIsDisabledSubmit]);
     const hasSetInitValueRef = useRef(false);
+    const { ready } = useWedaAppContext();
     const [initialValues, setInitialValues] = useState((_a = props.initialValues) !== null && _a !== void 0 ? _a : emptyObject);
+    const [propsValue] = useSyncValue(props.value);
     const eventsRef = useSyncedRef(props.events);
     const validate = useCallback(async () => {
         const validatePromise = [];
         const validateKey = [];
         const validateLabel = [];
-        formItemMap.forEach((item) => {
+        formsItemMap.forEach((item) => {
             if (!item)
                 return;
-            if (item.handleValidate) {
-                const validate = item.handleValidate();
-                const { name, label } = item;
-                if (validate) {
-                    validatePromise.push(validate);
-                    validateKey.push(name);
-                    validateLabel.push(label);
-                }
+            let items = item;
+            if (!Array.isArray(items)) {
+                items = [item];
             }
+            items.forEach((item) => {
+                if (item.handleValidate) {
+                    const validate = item.handleValidate();
+                    const { name, label } = item;
+                    if (validate) {
+                        validatePromise.push(validate);
+                        validateKey.push(name);
+                        validateLabel.push(label);
+                    }
+                }
+            });
         });
         let errorArr = await Promise.all(validatePromise);
         const errObj = {};
@@ -87,7 +112,7 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
             console.error(errObj);
         }
         return errObj;
-    }, [formItemMap]);
+    }, [formsItemMap]);
     const [errors, setErrors] = useState(undefined);
     const allSelectFields = useMemo(() => {
         if (!ready) {
@@ -95,15 +120,17 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
         }
         const fields = {};
         logger.debug('formItemMapKey', { formItemMapKey });
-        formItemMap.forEach((item, name) => {
-            var _a;
-            if (!fields[name]) {
-                fields[name] = new Set();
-            }
-            ((_a = item.selectFields) !== null && _a !== void 0 ? _a : [])
-                .filter((t) => typeof t === 'string' && t.length > 0)
-                .forEach((field) => {
-                fields[name].add(field);
+        formsItemMap.forEach((items, name) => {
+            items.forEach((item) => {
+                var _a;
+                if (!fields[name]) {
+                    fields[name] = new Set();
+                }
+                ((_a = item.selectFields) !== null && _a !== void 0 ? _a : [])
+                    .filter((t) => typeof t === 'string' && t.length > 0)
+                    .forEach((field) => {
+                    fields[name].add(field);
+                });
             });
         });
         const result = Object.keys(fields).reduce((acc, k) => {
@@ -113,7 +140,7 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
             return acc;
         }, {});
         return result;
-    }, [formItemMap, ready, formItemMapKey]);
+    }, [formsItemMap, ready, formItemMapKey]);
     const { remoteValue: fetchedInitialValues, loadingStatus: initValueLoadingStatus, error: initValueFetchError, } = useRemoteValue({
         appCloud,
         formType,
@@ -126,125 +153,114 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
         isDataModel,
         allSelectFields,
         eventsRef,
+        datasourceType,
+        value: propsValue,
     });
+    const submitPromiseCache = useRef(undefined);
     const submit = useCallback(async () => {
-        const { submit, validateSuccess, validateFail } = eventsRef.current;
-        const errorObj = await validate();
-        if (Object.keys(errorObj !== null && errorObj !== void 0 ? errorObj : {}).length === 0) {
-            validateSuccess({ errors: {} });
-            const formData = getFormDataFromItemMap(formItemMap, formType);
-            const extra = ['read', 'edit'].includes(formType) && _id ? { _id } : {};
-            submit && submit(deepClone({ ...extra, ...formData }));
-            // 流程用了;
-            return formData;
-        }
-        else {
-            setErrors(errorObj);
-            validateFail({
-                errors: getErrorObjectFromValidateResult(errorObj),
-            });
+        if (isDisabledSubmit)
+            return;
+        const run = async () => {
+            const { submit, validateSuccess, validateFail } = eventsRef.current;
+            // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+            await timeout(SET_VALUE_DEBOUNCE_TIMEOUT * 2);
+            const errorObj = await validate();
+            if (Object.keys(errorObj !== null && errorObj !== void 0 ? errorObj : {}).length === 0) {
+                validateSuccess({ errors: {} });
+                logger.debug('formItemMapKey', formItemMapKey);
+                const formData = getFormDataFromItemMap(formsItemMap, formType);
+                const extra = ['read', 'edit'].includes(formType) && _id ? { _id } : {};
+                submit && submit(deepClone({ ...extra, ...formData }));
+                // 流程用了;
+                return formData;
+            }
+            else {
+                setErrors(errorObj);
+                validateFail({
+                    errors: getErrorObjectFromValidateResult(errorObj),
+                });
+            }
+        };
+        if (!submitPromiseCache.current) {
+            submitPromiseCache.current = run();
         }
-    }, [_id, eventsRef, formItemMap, formType, validate]);
-    const updateFormContext = useCallback(() => {
+        const r = await submitPromiseCache.current;
+        submitPromiseCache.current = null;
+        return r;
+    }, [
+        _id,
+        eventsRef,
+        formItemMapKey,
+        formType,
+        formsItemMap,
+        isDisabledSubmit,
+        validate,
+    ]);
+    const updateFormContextImmediate = useCallback(() => {
         Promise.resolve().then(() => {
             var _a, _b;
-            const formData = getFormDataFromItemMap(formItemMap, formType);
+            const formData = getFormDataFromItemMap(formsItemMap, formType);
             if (!isObjectEqual(formData, preFormCtxRef.current, true)) {
                 (_b = (_a = eventsRef === null || eventsRef === void 0 ? void 0 : eventsRef.current) === null || _a === void 0 ? void 0 : _a.onDataChange) === null || _b === void 0 ? void 0 : _b.call(_a, { data: formData });
                 setFormData(formData);
                 preFormCtxRef.current = formData;
             }
         });
-    }, [eventsRef, formItemMap, formType]);
-    const setValue = useDebouncedCallback((data, setNull) => {
+    }, [eventsRef, formsItemMap, formType]);
+    const updateFormContext = useDebouncedCallback(updateFormContextImmediate, 
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    20, { maxWait: 40, trailing: true });
+    const setValueImmediate = useCallback((data, setNull, isImmediate) => {
         if (typeof data !== 'object' || data === null) {
             console.warn('setValue data need expect a object but got', data);
             return;
         }
-        [...formItemMap.entries()].map(([name, n]) => {
+        const formItemMapEntriesList = [...formsItemMap.entries()];
+        formItemMapEntriesList.map(([name, n]) => {
             var _a;
-            const item = (_a = formItemMap.get(name)) !== null && _a !== void 0 ? _a : n;
-            if (!item.setValue) {
-                console.error('表单组件缺少setValue方法:', item);
-                return;
-            }
-            const value = lodashGet(data, name, NOT_EXISTED_VALUE);
-            if (value !== NOT_EXISTED_VALUE) {
-                item.setValue(value);
+            let items = (_a = formsItemMap.get(name)) !== null && _a !== void 0 ? _a : n;
+            if (!Array.isArray(items)) {
+                items = [items];
             }
-            else {
-                if (setNull) {
-                    item.setValue(null);
+            items.forEach((item) => {
+                if (!item.setValue) {
+                    console.error('表单组件缺少setValue方法:', item);
+                    return;
                 }
-            }
+                const value = lodashGet(data, name, NOT_EXISTED_VALUE);
+                if (value !== NOT_EXISTED_VALUE) {
+                    item.setValue(value);
+                }
+                else {
+                    if (setNull) {
+                        item.setValue(null);
+                    }
+                }
+            });
         });
-        updateFormContext();
-    }, [formItemMap, updateFormContext], SET_VALUE_DEBOUNCE_TIMEOUT);
+        isImmediate ? updateFormContextImmediate() : updateFormContext();
+    }, [formsItemMap, updateFormContext, updateFormContextImmediate]);
+    const setValue = useDebouncedCallback(setValueImmediate, 
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    SET_VALUE_DEBOUNCE_TIMEOUT * 2, { trailing: true });
     const clearValidate = useCallback(() => {
-        formItemMap.forEach((item) => {
-            if (!item.clearValidate || typeof item.clearValidate !== 'function') {
-                console.error('表单组件缺少clearValidate方法:', item);
-                return;
-            }
-            item.clearValidate();
+        formsItemMap.forEach((items) => {
+            items.forEach((item) => {
+                if (!item.clearValidate || typeof item.clearValidate !== 'function') {
+                    console.error('表单组件缺少clearValidate方法:', item);
+                    return;
+                }
+                item.clearValidate();
+            });
         });
-    }, [formItemMap]);
-    // useWhatChanged([formItemMap, initialValues, submit, validate]);
+    }, [formsItemMap]);
     const [visible, setVisible] = React.useState(false);
     React.useEffect(() => {
         setVisible(true);
     }, []);
-    const previousFormType = useRef(null);
-    useEffect(() => {
-        if (!ready) {
-            return;
-        }
-        // if (formType === previousFormType.current) return;
-        logger.debug('listen formType', { formType, previousFormType }, formItemMap);
-        previousFormType.current = formType;
-        Promise.resolve().then(() => {
-            if (formType === 'read') {
-                formItemMap.forEach((item) => {
-                    item.setReadOnly(true);
-                });
-            }
-            else {
-                formItemMap.forEach((item) => {
-                    const { initialReadOnly, initialDisabled } = item || {};
-                    if (initialReadOnly) {
-                        item.setReadOnly(true);
-                    }
-                    else if (initialDisabled) {
-                        item.setDisabled(true);
-                    }
-                    else {
-                        item.setReadOnly(false);
-                    }
-                });
-            }
-        });
-    }, [ready, formType, formItemMap, formItemMapKey]);
     useMountEffect(() => {
-        logger.debug('formItemMap', formItemMap);
+        logger.debug('formItemMap', formsItemMap);
     });
-    useEffect(() => {
-        if (initValueLoadingStatus !== 'done')
-            return;
-        if (!initValueFetchError && fetchedInitialValues) {
-            /*
-             错误处理放在了 @link {onInitialValuesError}
-             下面是可以拿到data了
-             */
-            setInitialValues((original) => {
-                if (hasSetInitValueRef.current) {
-                    return original;
-                }
-                hasSetInitValueRef.current = true;
-                return fetchedInitialValues;
-            });
-            setValue(fetchedInitialValues, true);
-        }
-    }, [fetchedInitialValues, initValueFetchError, initValueLoadingStatus, setValue]);
     const { data: dataSourceProfile } = useDataSource(dataSourceName);
     const authValue = useAuthValue({
         appCloud,
@@ -255,49 +271,53 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
         logger.debug('onInitDataSourceFieldsWithAuth', authValue);
         const { isDataModel, dataSourceFieldsWidthAuthList } = authValue;
         try {
-            formItemMap.forEach((item, name) => {
-                const setStateForAuth = createSetStateForAuth({
-                    setVisible: item.setVisible,
-                    setReadOnly: item.setReadOnly,
-                });
-                if (!isDataModel) {
-                    // 非模型数据源
-                    setStateForAuth('rw');
-                }
-                else {
-                    if ((dataSourceFieldsWidthAuthList === null || dataSourceFieldsWidthAuthList === void 0 ? void 0 : dataSourceFieldsWidthAuthList.length) > 0) {
-                        // 返回了权限相关字段
-                        const fieldsPower = dataSourceFieldsWidthAuthList === null || dataSourceFieldsWidthAuthList === void 0 ? void 0 : dataSourceFieldsWidthAuthList.filter((fieldItem) => fieldItem[name])[0];
-                        if (fieldsPower && fieldsPower[name]) {
-                            setStateForAuth(fieldsPower[name]);
+            formsItemMap.forEach((items, name) => {
+                items.forEach((item) => {
+                    const setStateForAuth = createSetStateForAuth({
+                        setVisible: item.setVisible,
+                        setReadOnly: item.setReadOnly,
+                    });
+                    if (!isDataModel) {
+                        // 非模型数据源
+                        setStateForAuth('rw');
+                    }
+                    else {
+                        if ((dataSourceFieldsWidthAuthList === null || dataSourceFieldsWidthAuthList === void 0 ? void 0 : dataSourceFieldsWidthAuthList.length) > 0) {
+                            // 返回了权限相关字段
+                            const fieldsPower = dataSourceFieldsWidthAuthList === null || dataSourceFieldsWidthAuthList === void 0 ? void 0 : dataSourceFieldsWidthAuthList.filter((fieldItem) => fieldItem[name])[0];
+                            if (fieldsPower && fieldsPower[name]) {
+                                setStateForAuth(fieldsPower[name]);
+                            }
+                            else {
+                                // 没有匹配到数据源字段，是用户自定义字段默认读写权限
+                            }
                         }
                         else {
-                            // 没有匹配到数据源字段，是用户自定义字段默认读写权限
+                            // 兼容私有化接口不会返回权限相关字段，没有返回默认不校验权限
+                            setStateForAuth('rw');
                         }
                     }
-                    else {
-                        // 兼容私有化接口不会返回权限相关字段，没有返回默认不校验权限
-                        setStateForAuth('rw');
-                    }
-                }
+                });
             });
         }
         catch (error) {
-            formItemMap.forEach((item) => {
-                const setStateForAuth = createSetStateForAuth({
-                    setReadOnly: item.setReadOnly,
-                    setVisible: item.setVisible,
+            formsItemMap.forEach((items) => {
+                items.forEach((item) => {
+                    const setStateForAuth = createSetStateForAuth({
+                        setReadOnly: item.setReadOnly,
+                        setVisible: item.setVisible,
+                    });
+                    if (!item || !item.setDataSourceFieldsWithAuth)
+                        return;
+                    setStateForAuth('rw');
                 });
-                if (!item || !item.setDataSourceFieldsWithAuth)
-                    return;
-                setStateForAuth('rw');
             });
             console.error('init form setDataSourceFieldsWithAuth error', error);
         }
-    }, [formItemMap]);
-    const { data: formInitValueToSet } = useInitValueFromRemote(dataSourceProfile, fetchedInitialValues);
+    }, [formsItemMap]);
+    const { data: formInitValueToSet } = useInitValueFromRemote(datasourceType, dataSourceProfile, fetchedInitialValues);
     useEffect(() => {
-        if (initValueLoadingStatus !== 'done')
+        if (initValueLoadingStatus !== 'done' || !fetchedInitialValues)
             return;
         if (!initValueFetchError && formInitValueToSet) {
             /*
@@ -305,7 +325,14 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
             下面是可以拿到data了
             */
             // TODO: 有哪些key可以暴露
-            setInitialValues(formInitValueToSet);
+            setInitialValues((original) => {
+                if (hasSetInitValueRef.current) {
+                    return original;
+                }
+                hasSetInitValueRef.current = true;
+                return formInitValueToSet;
+            });
+            // 先设置，此时会初始化 form detail item个数
             setValue(formInitValueToSet, true);
         }
     }, [fetchedInitialValues, formInitValueToSet, initValueFetchError, initValueLoadingStatus, setValue]);
@@ -324,33 +351,42 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
         authValue,
         isDataModel,
         initDataSourceFieldsWithAuth,
-        formItemMap,
+        formsItemMap,
         formItemMapKey,
     ]);
     const initedItemMapRef = useRef({});
     const preFormCtxRef = useRef(null);
-    const [formData, setFormData] = useState(() => getFormDataFromItemMap(formItemMap, formType));
+    const [formData, setFormData] = useState(() => getFormDataFromItemMap(formsItemMap, formType));
     const submitParams = useRemoteParamsFromValue({
         dataSourceProfile,
         formData,
         formType,
         _id,
     });
-    React.useLayoutEffect(() => {
+    useSetWidgetApi(() => {
         const r = {
             formType,
             addFormItem(name, formItem) {
-                var _a;
                 if (isNil(name) || (typeof name === 'string' && name.length === 0)) {
                     // name 没设置或为空串的时候不受表单容器控制
+                    console.warn(`组件 #${formItem === null || formItem === void 0 ? void 0 : formItem.id} 表单key(表单输入类组件 name 属性)没设置或为空串的时候不受表单容器控制`);
                     return noop;
                 }
-                if (((_a = formItemMap.get(name)) === null || _a === void 0 ? void 0 : _a.id) !== formItem.id) {
-                    logger.log('addFormItem', formItem, formItem.id, formItem.name);
-                    formItemMap.set(name, formItem);
+                if (formsItemMap.has(name)) {
+                    formsItemMap.get(name).push(formItem);
+                }
+                else {
+                    formsItemMap.set(name, [formItem]);
                 }
                 return () => {
-                    formItemMap.delete(name);
+                    const items = formsItemMap.get(name);
+                    const removedArr = items.filter((item) => item !== formItem);
+                    if (removedArr.length <= 0) {
+                        formsItemMap.delete(name);
+                    }
+                    else {
+                        formsItemMap.set(name, removedArr);
+                    }
                 };
             },
             submitParams,
@@ -358,11 +394,26 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
             reset() {
                 setValue({}, true);
             },
-            clearValue() {
-                setValue({}, true);
+            clearValue({ isImmediate = false } = {}) {
+                if (isImmediate) {
+                    setValueImmediate({}, true, true);
+                }
+                else {
+                    setValue({}, true);
+                }
             },
-            validate() {
-                return validate();
+            async validate() {
+                const errObj = await validate();
+                const { validateSuccess, validateFail } = eventsRef.current;
+                if (Object.keys(errObj !== null && errObj !== void 0 ? errObj : {}).length > 0) {
+                    setErrors(errObj);
+                    validateFail({ errors: getErrorObjectFromValidateResult(errObj) });
+                    throw errObj;
+                }
+                else {
+                    validateSuccess({ errors: {} });
+                }
+                return errObj;
             },
             submit() {
                 return submit();
@@ -386,36 +437,39 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
             methodCreate,
             methodUpdate,
             methodGetItem,
+            isDisabledSubmit,
+            disableSubmit,
+            enableSubmit,
+            __setValueImmediate__: setValueImmediate,
         };
-        if (typeof ref === 'function') {
-            ref(r);
-        }
-        else if (typeof ref === 'object' && ref !== null) {
-            ref.current = r;
-        }
+        return r;
     }, [
+        formType,
+        submitParams,
+        setValue,
+        initialValues,
         authValue,
+        layout,
         dataSourceName,
+        formData,
+        fetchedInitialValues,
+        updateFormContext,
         dataSourceProfile,
         errors,
-        fetchedInitialValues,
-        formItemMap,
-        formType,
-        initialValues,
-        layout,
-        setValue,
+        formsItemMap,
         submit,
         validate,
         clearValidate,
-        updateFormContext,
-        formData,
         datasourceType,
         methodCreate,
         methodUpdate,
         methodGetItem,
-        ref,
-        submitParams,
-    ]);
+        isDisabledSubmit,
+        disableSubmit,
+        enableSubmit,
+        eventsRef,
+        setValueImmediate,
+    ], ref);
     useUnmountEffect(() => {
         if (typeof ref === 'function') {
             ref(null);
@@ -424,26 +478,41 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
             ref.current = null;
         }
     });
-    const setInitValue = useDebouncedCallback(() => {
-        var _a, _b, _c;
+    const setInitValueImmediate = useCallback(() => {
         // 获取子表单初始值
         const formDetailInitValue = {};
-        for (const [name, formItem] of formItemMap.entries()) {
-            if (((_b = (_a = formItem === null || formItem === void 0 ? void 0 : formItem.getConfig) === null || _a === void 0 ? void 0 : _a.call(formItem)) === null || _b === void 0 ? void 0 : _b.componentType) === 'formdetail') {
-                formDetailInitValue[name] = formItem === null || formItem === void 0 ? void 0 : formItem.value;
-            }
+        for (const [name, formItems] of formsItemMap.entries()) {
+            formItems.forEach((formItem) => {
+                var _a, _b;
+                if (((_b = (_a = formItem === null || formItem === void 0 ? void 0 : formItem.getConfig) === null || _a === void 0 ? void 0 : _a.call(formItem)) === null || _b === void 0 ? void 0 : _b.componentType) === 'formdetail') {
+                    formDetailInitValue[name] = formItem === null || formItem === void 0 ? void 0 : formItem.value;
+                }
+            });
         }
-        for (const [name, formItem] of formItemMap.entries()) {
-            // 合并子表单初始值与表单初始值
-            const initValues = { ...formDetailInitValue, ...initialValues };
-            const value = lodashGet(initValues, name);
-            if (initedItemMapRef.current[name] !== true && value !== undefined) {
-                (_c = formItem.setValue) === null || _c === void 0 ? void 0 : _c.call(formItem, value);
-                initedItemMapRef.current[name] = true;
+        const entires = [...formsItemMap.entries()];
+        unstable_batchedUpdates(() => {
+            for (const [name, formItems] of entires) {
+                // 合并子表单初始值与表单初始值
+                const formItem = formItems;
+                const initValues = { ...formDetailInitValue, ...formInitValueToSet };
+                const value = lodashGet(initValues, name);
+                if (initedItemMapRef.current[name] !== true && value !== undefined) {
+                    formItems.forEach((item) => {
+                        var _a;
+                        logger.debug(`set VALUE ${name}`, value, formItem);
+                        (_a = item.setValue) === null || _a === void 0 ? void 0 : _a.call(item, value);
+                    });
+                    initedItemMapRef.current[name] = true;
+                }
             }
-        }
+        });
         updateFormContext();
-    }, [formItemMap, initialValues, updateFormContext], SET_VALUE_DEBOUNCE_TIMEOUT);
+    }, [formInitValueToSet, formsItemMap, updateFormContext]);
+    const setInitValue = useDebouncedCallback(setInitValueImmediate, SET_VALUE_DEBOUNCE_TIMEOUT, {
+        // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+        maxWait: SET_VALUE_DEBOUNCE_TIMEOUT * 2,
+        trailing: true,
+    });
     const lastInitValueRef = useRef(null);
     React.useEffect(() => {
         if (isObjectEqual(lastInitValueRef.current, initialValues) &&
@@ -455,7 +524,11 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
         const timeout = 30;
         let id;
         const setValueUntilReady = () => {
-            setValueReady = [...formItemMap.values()].every((item) => !!item.setValue);
+            setValueReady = [...formsItemMap.values()].every((items) => items.every((item) => !!item.setValue));
+            if (id) {
+                clearTimeout(id);
+                id = null;
+            }
             if (!setValueReady) {
                 // eslint-disable-next-line rulesdir/no-timer
                 id = setTimeout(() => {
@@ -463,10 +536,14 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
                 }, timeout);
                 return;
             }
-            if (id) {
-                clearTimeout(id);
-            }
-            setInitValue();
+            /* formInitValueToSet 被初始化后会调用setValue
+            此时form items都有了，但是setInitValue 里面batch update 之后还是会出现form detail内部有时设置不上值（下断点或电脑卡就可以）
+            不batch update form item 多了会非常非常卡，所以搞两下
+      
+            https://andon.woa.com/ticket/detail/?id=11607503&sign=e9f203927d29c0007a797039a1471f7d
+            */
+            setInitValueImmediate();
+            Promise.resolve().then(setInitValue);
         };
         setValueUntilReady();
         lastInitValueRef.current = initialValues;
@@ -477,16 +554,6 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
             }
         };
     });
-    useDebouncedEffect(() => {
-        formItemMap.forEach((item) => {
-            var _a;
-            (_a = item === null || item === void 0 ? void 0 : item.forceUpdate) === null || _a === void 0 ? void 0 : _a.call(item);
-        });
-    }, [formItemMap, layout, formItemMapKey], 
-    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-    15, 
-    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-    30);
     useLayoutEffect(() => {
         // 兼容流程
         if ($node) {
@@ -501,17 +568,14 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
         }
     }, [$node, setValue, submit]);
     const labelPosition = useMemo(() => {
-        if (layout === 'horizontal') {
-            return 'horizontal-left';
-        }
-        return 'vertical-left';
-    }, [layout]);
+        return `${layout}-${labelAlign}`;
+    }, [layout, labelAlign]);
     if (initValueLoadingStatus === 'hidden') {
         return null;
     }
     if (initValueLoadingStatus === 'loading' && !fetchedInitialValues) {
         return (_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsx(StatusTip, { status: "loading", loadingText: "\u6570\u636E\u52A0\u8F7D\u4E2D..." }) }));
     }
-    return (_jsx(FormUi, { layout: layout, className: cls, style: style, id: id, labelPosition: labelPosition, children: initValueFetchError ? (_jsx(EmptyContent, { emptyText: '数据加载失败', errorObj: initValueFetchError, icon: 'error', isH5: isH5 })) : (visible && contentSlot) }));
+    return (_jsx(FormWidgetProvider, { "$widget": $widget, children: _jsx(FormLayoutProvider, { layout: layout, children: _jsx(FormTypeProvider, { formType: formType, children: _jsx(FormUi, { layout: layout, className: cls, style: style, id: id, lgWidth: lgWidth, labelPosition: labelPosition, children: initValueFetchError ? (_jsx(EmptyContent, { emptyText: '数据加载失败', errorObj: initValueFetchError, icon: 'error', isH5: isH5 })) : (visible && contentSlot) }) }) }) }));
 });
 export default React.memo(WdForm);