@cloudbase/weda-ui 3.5.0 → 3.5.2

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

@@ -1,27 +1,31 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/* eslint max-lines: [error, 600] */
+/* eslint max-lines: [error, 800] */
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
-import { useDebouncedCallback, useDebouncedEffect, useMap, useMountEffect, useSyncedRef, } from '@react-hookz/web';
+import { useDebouncedCallback, useDebouncedEffect, useMap, useMountEffect, useSyncedRef, useUnmountEffect, } from '@react-hookz/web';
 import { isInIde, usePlatform } from '../../utils/platform';
 import classNames from '../../utils/classnames';
 import { debug } from '../../utils/console';
 import { useWedaAppContext } from '../../utils/widget-api';
 import { useLoopRenderDetect } from '../common/use-loop-render-detect';
-import { emptyObject, NOT_EXISTED_VALUE } from '../../utils/constant';
+import { emptyObject, noop, NOT_EXISTED_VALUE } from '../../utils/constant';
 import * as tcbAppCloud from '../../utils/tcb';
-import { useRemoteValue } from './hooks/use-remote-value';
+import { useRemoteValue, useInitValueFromRemote, useRemoteParamsFromValue, } from './hooks/use-remote-value';
 import { createSetStateForAuth, useAuthValue } from './hooks/use-auth-value';
-import lodashSet from 'lodash.set';
 import lodashGet from 'lodash.get';
 import isObjectEqual from '../../utils/isObjectEqual';
 import { useDataSource } from '../../utils/hooks/useDataSource';
 import { WdForm as FormUi } from './wd-form';
+import EmptyContent from '../statusContent';
+import { deepClone } from '../../utils/tool';
 import '../style';
-const SET_VALUE_DEBOUNCE_TIMEOUT = 200;
+import { getErrorObjectFromValidateResult, getFormDataFromItemMap, } from './form-utils';
+import { ConfigProvider, StatusTip } from 'tea-component';
+import { isNil } from '../../utils/lodash';
+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, formType, _id, datasourceType, 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, 
     // 兼容流程setValue调用，其他地方别用
     $node, } = props;
     const formItemMap = useMap([]);
@@ -31,7 +35,9 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
      * 所以要用它作useEffect deps的时候用下面这个string
      *  */
     const formItemMapKey = [...formItemMap.keys()].sort().join(',');
+    const formItemMapKeyRef = useRef(formItemMapKey);
     const platform = usePlatform();
+    const isH5 = platform === 'h5';
     const contentSlot = useMemo(() => contentSlotEl, [contentSlotEl]);
     const cls = classNames({
         'weda-ui': true,
@@ -42,21 +48,25 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
         'wedatea2td-form': platform === 'pc',
     }, className);
     const isDataModel = !['connector', 'custom-connector'].includes(datasourceType); // 是否为数据模型，兼容历史 undefined
+    useLoopRenderDetect();
+    const { ready } = useWedaAppContext();
     const hasSetInitValueRef = useRef(false);
     const [initialValues, setInitialValues] = useState((_a = props.initialValues) !== null && _a !== void 0 ? _a : emptyObject);
     const eventsRef = useSyncedRef(props.events);
     const validate = useCallback(async () => {
         const validatePromise = [];
         const validateKey = [];
+        const validateLabel = [];
         formItemMap.forEach((item) => {
             if (!item)
                 return;
             if (item.handleValidate) {
                 const validate = item.handleValidate();
-                const { name } = item;
+                const { name, label } = item;
                 if (validate) {
                     validatePromise.push(validate);
                     validateKey.push(name);
+                    validateLabel.push(label);
                 }
             }
         });
@@ -65,6 +75,10 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         errorArr = errorArr.filter((item, index) => {
             if ((item !== null && item !== void 0 ? item : []).length) {
+                // 加标题
+                item.forEach((val) => {
+                    val.label = validateLabel[index];
+                });
                 errObj[validateKey[index]] = item;
             }
             return (item === null || item === void 0 ? void 0 : item.length) > 0;
@@ -75,7 +89,32 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
         return errObj;
     }, [formItemMap]);
     const [errors, setErrors] = useState(undefined);
-    const { remoteValue: fetchedInitialValues, isLoading: isLoadingInitValues, error: initValueFetchError, } = useRemoteValue({
+    const allSelectFields = useMemo(() => {
+        if (!ready) {
+            return null;
+        }
+        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);
+            });
+        });
+        const result = Object.keys(fields).reduce((acc, k) => {
+            if (fields[k].size > 0) {
+                acc[k] = Array.from(fields[k]);
+            }
+            return acc;
+        }, {});
+        return result;
+    }, [formItemMap, ready, formItemMapKey]);
+    const { remoteValue: fetchedInitialValues, loadingStatus: initValueLoadingStatus, error: initValueFetchError, } = useRemoteValue({
         appCloud,
         formType,
         _id,
@@ -85,38 +124,46 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
         paramGetItem,
         dataSourceName,
         isDataModel,
+        allSelectFields,
+        eventsRef,
     });
     const submit = useCallback(async () => {
-        const { submit } = eventsRef.current;
+        const { submit, validateSuccess, validateFail } = eventsRef.current;
         const errorObj = await validate();
         if (Object.keys(errorObj !== null && errorObj !== void 0 ? errorObj : {}).length === 0) {
-            const formData = getFormDataFromItemMap(formItemMap);
+            validateSuccess({ errors: {} });
+            const formData = getFormDataFromItemMap(formItemMap, formType);
             const extra = ['read', 'edit'].includes(formType) && _id ? { _id } : {};
-            submit && submit(JSON.parse(JSON.stringify({ ...extra, ...formData })));
+            submit && submit(deepClone({ ...extra, ...formData }));
             // 流程用了;
             return formData;
         }
         else {
             setErrors(errorObj);
+            validateFail({
+                errors: getErrorObjectFromValidateResult(errorObj),
+            });
         }
     }, [_id, eventsRef, formItemMap, formType, validate]);
     const updateFormContext = useCallback(() => {
         Promise.resolve().then(() => {
             var _a, _b;
-            const formData = getFormDataFromItemMap(formItemMap);
+            const formData = getFormDataFromItemMap(formItemMap, 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]);
+    }, [eventsRef, formItemMap, formType]);
     const setValue = useDebouncedCallback((data, setNull) => {
-        if (typeof data !== 'object' || typeof data === null) {
+        if (typeof data !== 'object' || data === null) {
             console.warn('setValue data need expect a object but got', data);
             return;
         }
-        formItemMap.forEach((item, name) => {
+        [...formItemMap.entries()].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;
@@ -126,7 +173,9 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
                 item.setValue(value);
             }
             else {
-                setNull && item.setValue(null);
+                if (setNull) {
+                    item.setValue(null);
+                }
             }
         });
         updateFormContext();
@@ -141,8 +190,6 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
         });
     }, [formItemMap]);
     // useWhatChanged([formItemMap, initialValues, submit, validate]);
-    useLoopRenderDetect();
-    const { ready } = useWedaAppContext();
     const [visible, setVisible] = React.useState(false);
     React.useEffect(() => {
         setVisible(true);
@@ -181,7 +228,7 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
         logger.debug('formItemMap', formItemMap);
     });
     useEffect(() => {
-        if (isLoadingInitValues)
+        if (initValueLoadingStatus !== 'done')
             return;
         if (!initValueFetchError && fetchedInitialValues) {
             /*
@@ -197,14 +244,14 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
             });
             setValue(fetchedInitialValues, true);
         }
-    }, [fetchedInitialValues, initValueFetchError, isLoadingInitValues, setValue]);
+    }, [fetchedInitialValues, initValueFetchError, initValueLoadingStatus, setValue]);
     const { data: dataSourceProfile } = useDataSource(dataSourceName);
     const authValue = useAuthValue({
         appCloud,
         isDataModel,
         dataSourceName,
     });
-    const onInitDataSourceFieldsWithAuth = useCallback((authValue) => {
+    const initDataSourceFieldsWithAuth = useCallback((authValue) => {
         logger.debug('onInitDataSourceFieldsWithAuth', authValue);
         const { isDataModel, dataSourceFieldsWidthAuthList } = authValue;
         try {
@@ -248,32 +295,56 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
             console.error('init form setDataSourceFieldsWithAuth error', error);
         }
     }, [formItemMap]);
+    const { data: formInitValueToSet } = useInitValueFromRemote(dataSourceProfile, fetchedInitialValues);
+    useEffect(() => {
+        if (initValueLoadingStatus !== 'done')
+            return;
+        if (!initValueFetchError && formInitValueToSet) {
+            /*
+            错误处理放在了 @link {onInitialValuesError}
+            下面是可以拿到data了
+            */
+            // TODO: 有哪些key可以暴露
+            setInitialValues(formInitValueToSet);
+            setValue(formInitValueToSet, true);
+        }
+    }, [fetchedInitialValues, formInitValueToSet, initValueFetchError, initValueLoadingStatus, setValue]);
     React.useEffect(() => {
         var _a, _b;
         // 兼容私有环境，新接口不存在的情况，产品策略完善后移除
         if ((window === null || window === void 0 ? void 0 : window['_isPrivate']) &&
             !((_b = (_a = window === null || window === void 0 ? void 0 : window.app) === null || _a === void 0 ? void 0 : _a.cloud) === null || _b === void 0 ? void 0 : _b.getDataSourceProfileAsync)) {
-            onInitDataSourceFieldsWithAuth === null || onInitDataSourceFieldsWithAuth === void 0 ? void 0 : onInitDataSourceFieldsWithAuth({ isDataModel });
+            initDataSourceFieldsWithAuth === null || initDataSourceFieldsWithAuth === void 0 ? void 0 : initDataSourceFieldsWithAuth({ isDataModel });
             return;
         }
         if (!isInIde()) {
-            onInitDataSourceFieldsWithAuth(authValue);
+            initDataSourceFieldsWithAuth(authValue);
         }
     }, [
         authValue,
         isDataModel,
-        onInitDataSourceFieldsWithAuth,
+        initDataSourceFieldsWithAuth,
         formItemMap,
         formItemMapKey,
     ]);
     const initedItemMapRef = useRef({});
     const preFormCtxRef = useRef(null);
-    const [formData, setFormData] = useState(() => getFormDataFromItemMap(formItemMap));
-    React.useImperativeHandle(ref, () => {
-        return {
+    const [formData, setFormData] = useState(() => getFormDataFromItemMap(formItemMap, formType));
+    const submitParams = useRemoteParamsFromValue({
+        dataSourceProfile,
+        formData,
+        formType,
+        _id,
+    });
+    React.useLayoutEffect(() => {
+        const r = {
             formType,
             addFormItem(name, formItem) {
                 var _a;
+                if (isNil(name) || (typeof name === 'string' && name.length === 0)) {
+                    // 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);
@@ -282,10 +353,14 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
                     formItemMap.delete(name);
                 };
             },
+            submitParams,
             setValue,
             reset() {
                 setValue({}, true);
             },
+            clearValue() {
+                setValue({}, true);
+            },
             validate() {
                 return validate();
             },
@@ -312,6 +387,12 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
             methodUpdate,
             methodGetItem,
         };
+        if (typeof ref === 'function') {
+            ref(r);
+        }
+        else if (typeof ref === 'object' && ref !== null) {
+            ref.current = r;
+        }
     }, [
         authValue,
         dataSourceName,
@@ -332,13 +413,32 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
         methodCreate,
         methodUpdate,
         methodGetItem,
+        ref,
+        submitParams,
     ]);
+    useUnmountEffect(() => {
+        if (typeof ref === 'function') {
+            ref(null);
+        }
+        else if (typeof ref === 'object' && ref !== null) {
+            ref.current = null;
+        }
+    });
     const setInitValue = useDebouncedCallback(() => {
-        var _a;
+        var _a, _b, _c;
+        // 获取子表单初始值
+        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, formItem] of formItemMap.entries()) {
-            const value = lodashGet(initialValues, name);
+            // 合并子表单初始值与表单初始值
+            const initValues = { ...formDetailInitValue, ...initialValues };
+            const value = lodashGet(initValues, name);
             if (initedItemMapRef.current[name] !== true && value !== undefined) {
-                (_a = formItem.setValue) === null || _a === void 0 ? void 0 : _a.call(formItem, value);
+                (_c = formItem.setValue) === null || _c === void 0 ? void 0 : _c.call(formItem, value);
                 initedItemMapRef.current[name] = true;
             }
         }
@@ -346,7 +446,8 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
     }, [formItemMap, initialValues, updateFormContext], SET_VALUE_DEBOUNCE_TIMEOUT);
     const lastInitValueRef = useRef(null);
     React.useEffect(() => {
-        if (isObjectEqual(lastInitValueRef.current, initialValues)) {
+        if (isObjectEqual(lastInitValueRef.current, initialValues) &&
+            isObjectEqual(formItemMapKeyRef.current, formItemMapKey)) {
             return;
         }
         // 单向 Form向下设置值
@@ -369,6 +470,7 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
         };
         setValueUntilReady();
         lastInitValueRef.current = initialValues;
+        formItemMapKeyRef.current = formItemMapKey;
         return () => {
             if (id) {
                 clearTimeout(id);
@@ -404,16 +506,12 @@ const WdForm = React.forwardRef(function WdForm(props, ref) {
         }
         return 'vertical-left';
     }, [layout]);
-    return (_jsx(FormUi, { layout: layout, className: cls, style: style, id: id, labelPosition: labelPosition, children: visible && contentSlot }));
+    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) }));
 });
-function getFormDataFromItemMap(formItemMap) {
-    const formData = {};
-    formItemMap.forEach((item, name) => {
-        var _a, _b, _c;
-        if (((_b = (_a = item.getConfig) === null || _a === void 0 ? void 0 : _a.call(item)) === null || _b === void 0 ? void 0 : _b.componentType) !== 'formdetail') {
-            lodashSet(formData, name, (_c = item === null || item === void 0 ? void 0 : item.getValue) === null || _c === void 0 ? void 0 : _c.call(item));
-        }
-    });
-    return formData;
-}
 export default React.memo(WdForm);

package/dist/web/components/wd-form/style.d.ts

@@ -0,0 +1,3 @@
+import './wd-form.css';
+import '../form/form/style';
+import '../style';

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

@@ -0,0 +1,3 @@
+import './wd-form.css';
+import '../form/form/style';
+import '../style';

package/dist/web/components/wd-form/wd-form.css

@@ -0,0 +1,23 @@
+/*
+表单模版内置样式 {{{
+*/
+
+.wd-form-title__text.wd-h5-typography {
+  padding-left: 16px;
+}
+
+.wd-pc-form .wd-form-title {
+  padding-top: 24px;
+  padding-bottom: 12px;
+  margin-bottom: var(--wd-form-item-mb);
+}
+
+.wd-h5-form .wd-form-title {
+  --wd-form-item-mb: 0px;
+  padding-top: 16px;
+  padding-bottom: 8px;
+}
+
+/*
+}}} 表单模版内置样式 END
+*/

package/dist/web/components/wd-form/wd-form.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { CommonPropsType } from '../../types';
+import './style';
+export declare const WdForm: ({ className, layout, labelPosition, children, ...rest }: WdFormProps) => JSX.Element;
+export type WdFormProps = CommonPropsType & {
+    labelPosition?: string;
+    layout?: string;
+};

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

@@ -1,9 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from '../../utils/classnames';
 import { useConfig } from '../../utils/config-context';
-// import type { DataType } from '../../../configs/components/wd-form';
 import { usePlatform } from '../../utils/platform';
-// import { Input, ConfigProvider } from 'tea-component';
+import './style';
 export const WdForm = ({ className, layout, labelPosition, children, ...rest }) => {
     const platform = usePlatform();
     // 兼容旧版组件的属性值
@@ -31,7 +30,7 @@ export const WdForm = ({ className, layout, labelPosition, children, ...rest })
             classList.push();
     }
     // 用户定义的className
-    classList.push(className);
+    classList.push(className, 'wd-form');
     if (platform === 'h5') {
         classList.push('wd-h5-form');
     }

package/dist/web/components/wd-form-cell/index.d.ts

@@ -0,0 +1,3 @@
+import { WdFormCell } from './wd-form-cell';
+export { WdFormCell, type WdFormCellProps } from './wd-form-cell';
+export default WdFormCell;

package/dist/web/components/wd-form-cell/wd-form-cell.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { CommonPropsType } from '../../types';
+import type { DataType } from '../../../configs/components/wd-form';
+export declare const WdFormCell: ({ className, layout, labelPosition, label, children, }: WdFormCellProps) => JSX.Element;
+export interface WdFormCellProps extends CommonPropsType, DataType {
+    label?: string;
+    labelPosition?: string;
+}

package/dist/web/components/wd-form-item/index.d.ts

@@ -0,0 +1,6 @@
+import { WdFormItem } from './wd-form-item';
+import { WdInputGroup } from './wd-input-group';
+import { WdInputWrap } from './wd-input-wrap';
+export { WdFormItem, WdInputGroup, WdInputWrap };
+export type { WdFormItemProps } from './wd-form-item';
+export default WdFormItem;

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

@@ -1,4 +1,5 @@
 import { WdFormItem } from './wd-form-item';
 import { WdInputGroup } from './wd-input-group';
-export { WdFormItem, WdInputGroup };
+import { WdInputWrap } from './wd-input-wrap';
+export { WdFormItem, WdInputGroup, WdInputWrap };
 export default WdFormItem;

package/dist/web/components/wd-form-item/wd-form-item.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { WdFormItemProps } from '../../../configs/type-utils/type-form';
+/**
+ * 表单项包裹，包括标题、文本提示、校验
+ */
+export declare function WdFormItem(props: WdFormItemProps): JSX.Element;
+export type { WdFormItemProps };

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

@@ -4,12 +4,12 @@ import { useConfig } from '../../utils/config-context';
 import { WdIcon } from '../wd-icon';
 import { WdBubble } from '../wd-bubble';
 import { usePlatform } from '../../utils/platform';
-import { useLabelAlign, useLayout, useSize, convertPx, } from '../../utils/hooks/useFormLegacy';
+import { useLabelAlign, useLayout, useSize, convertPx, useBlock, } from '../../utils/hooks/useFormLegacy';
 /**
  * 表单项包裹，包括标题、文本提示、校验
  */
 export function WdFormItem(props) {
-    const { id, className, style, label, labelVisible, labelTips, labelWidth: _labelWidth, labelWrap, extra, required, readOnly, children, testId, requiredFlag, validateState, validateErrorMsg, readValue, borderedH5, borderedPc, classRoot, controlAlign, inputId, } = props;
+    const { id, className, style, label, labelVisible = true, labelTips, labelWidth: _labelWidth, labelWrap = false, extra, required, readOnly, children, testId, requiredFlag = true, validateState, validateErrorMsg, readValue, borderedH5 = true, borderedPc = true, classRoot, controlAlign, inputId, } = props;
     const { classPrefix } = useConfig();
     const platform = usePlatform();
     const labelAlign = useLabelAlign(props);
@@ -18,6 +18,7 @@ export function WdFormItem(props) {
     const labelStyle = labelWidth ? { width: labelWidth } : {};
     const _size = useSize(props);
     const size = _size === 'xs' ? 'xs' : platform === 'h5' ? 'lg' : _size;
+    const block = useBlock(props);
     // 样式前缀定义
     const root = `${classPrefix}-${classRoot}`;
     const item = `${classPrefix}-form-item`;
@@ -25,6 +26,7 @@ export function WdFormItem(props) {
     const labelRoot = `${root}__label`;
     // 表单项样式
     const cls = classNames(item, className, `${classPrefix}-${platform}-form-item`, `${root}-root`, `${classPrefix}-${platform}-${classRoot}-root`, `item-size-height-${size}`, {
+        'size-width-hundred': block,
         'is-required': requiredFlag && required,
         'is-borderless': platform === 'h5' ? !borderedH5 : !borderedPc,
         [`${item}--weui`]: platform === 'h5',
@@ -40,7 +42,7 @@ export function WdFormItem(props) {
         [`${itemWrap}__control-wrap--right`]: controlAlign === 'right',
     });
     // 输入部分
-    const Item = (_jsx("div", { className: `${itemWrap}__control`, "data-testid": testId, children: _jsx("div", { className: controlWrapCls, children: readOnly ? (_jsx("div", { className: `${item}__readonly`, children: readValue })) : (children) }) }));
+    const Item = (_jsx("div", { className: `${itemWrap}__control`, "data-testid": testId, children: _jsx("div", { className: controlWrapCls, children: readOnly ? (_jsx("div", { className: `${item}__readonly${platform !== 'h5' ? '-web' : ''}`, children: readValue })) : (children) }) }));
     // 标题部分，含必填、提示
     const Label = labelVisible && (_jsx("div", { className: labelCls, style: labelStyle, children: _jsxs("label", { htmlFor: inputId, children: [_jsx("span", { className: `${itemWrap}__label-text ${labelRoot}-text`, title: label, children: label }), labelTips && (_jsx("span", { className: `${itemWrap}__label-explain`, children: _jsx(WdBubble, { style: { display: 'inline' }, bubbleChildren: _jsx(WdIcon, { name: "td:help-circle" }), bubbleContent: labelTips, promptTheme: "dark" }) }))] }) }));
     // 下方空白替代(改为距左对齐)

package/dist/web/components/wd-form-item/wd-input-group.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { WdInputGroupProps } from '../../../configs/type-utils/type-form';
+/**
+ * 输入类组件包裹，添加前后文字
+ */
+export declare const WdInputGroup: (props: WdInputGroupProps) => JSX.Element;

package/dist/web/components/wd-form-item/wd-input-group.js

@@ -1,14 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useConfig } from '../../utils/config-context';
 import classNames from '../../utils/classnames';
-import { useSize } from '../../utils/hooks/useFormLegacy';
+import { useSize, useBlock, useStringProp, } from '../../utils/hooks/useFormLegacy';
 /**
  * 输入类组件包裹，添加前后文字
  */
 export const WdInputGroup = (props) => {
-    const { before, after, block, children, classRoot = '' } = props;
+    const { children, classRoot = '' } = props;
     const { classPrefix } = useConfig();
+    const { before, after } = useStringProp(props);
     const size = useSize(props);
+    const block = useBlock(props);
     const root = `${classPrefix}-${classRoot}`;
     const inputGroup = `${classPrefix}-form-input-group`;
     const inputGroupCls = classNames(inputGroup, `size-height-${size}`, {

package/dist/web/components/wd-form-item/wd-input-wrap.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { WdInputWrapProps } from '../../../configs/type-utils/type-form';
+/**
+ * 输入类(input)组件包裹
+ */
+export declare const WdInputWrap: (props: WdInputWrapProps) => JSX.Element;

package/dist/web/components/wd-form-item/wd-input-wrap.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useMemo } from 'react';
+import { useConfig } from '../../utils/config-context';
+import classNames from '../../utils/classnames';
+import { useSize, useIconSize } from '../../utils/hooks/useFormLegacy';
+import { usePlatform } from '../../utils/platform';
+import { WdIcon } from '../wd-icon';
+import { noop } from '../../utils/constant';
+import { filterPropsWithOn } from '../../utils/tool';
+/**
+ * 输入类(input)组件包裹
+ */
+export const WdInputWrap = (props) => {
+    const { block: _block, children, classRoot = '', wrapClassName, before, after, disabled, prefixType, prefixIcon, prefixSrc, suffixType, suffixIcon, suffixSrc, hasClearIcon, onClear = noop, ...rest } = props;
+    const wrapRef = useRef(null);
+    const { classPrefix } = useConfig();
+    const size = useSize(props);
+    const iconSize = useIconSize(props);
+    const block = usePlatform() === 'h5' ? true : _block;
+    const root = `${classPrefix}-${classRoot}`;
+    const inputWrap = `${classPrefix}-form-input-wrap`;
+    const contentCls = `${inputWrap}__content`;
+    const prefixCls = `${inputWrap}__before`;
+    const prefixIconCls = `${root}__icon-before`;
+    const suffixCls = `${inputWrap}__after`;
+    const suffixIconCls = `${root}__icon-after`;
+    const cls = classNames(inputWrap, wrapClassName, `size-width-${size} size-font-${size}`, `${root}-${classRoot}`, `size-height-${size}`, {
+        'size-width-hundred': block,
+        'is-disabled': disabled,
+        [`${inputWrap}--no-radius-left`]: before,
+        [`${inputWrap}--no-radius-right`]: after,
+        [`${inputWrap}--no-radius`]: before && after,
+    });
+    const propsStartWithOn = useMemo(() => {
+        return filterPropsWithOn(rest);
+    }, [rest]);
+    return (_jsxs("div", { className: cls, ref: wrapRef, onFocus: () => { var _a, _b; return (_b = (_a = wrapRef.current) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.add('is-focused'); }, onBlur: () => { var _a, _b; return (_b = (_a = wrapRef.current) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.remove('is-focused'); }, ...propsStartWithOn, children: [prefixType && (_jsx("div", { className: prefixCls, children: _jsx(WdIcon, { size: iconSize, name: prefixIcon, type: prefixType, src: prefixSrc, className: prefixIconCls }) })), _jsx("div", { className: contentCls, children: children }), hasClearIcon && (_jsx("div", { className: suffixCls, children: _jsx(WdIcon, { size: iconSize, className: `${classPrefix}-icon__trigger`, name: "td:close-circle-filled", onMouseDown: onClear }) })), !hasClearIcon && suffixType && (_jsx("div", { className: suffixCls, children: _jsx(WdIcon, { size: iconSize, name: suffixIcon, type: suffixType, src: suffixSrc, className: suffixIconCls }) }))] }));
+};

package/dist/web/components/wd-icon/convert-legacy-props.d.ts

@@ -0,0 +1,7 @@
+import type { DataType } from '../../../configs/components/wd-button';
+interface IPropsValueMap {
+    size: Record<string, DataType['size']>;
+    theme: Record<string, DataType['theme']>;
+}
+export declare const convertLegacyProps: (key: keyof IPropsValueMap, prop: any) => string;
+export {};

package/dist/web/components/wd-icon/index.d.ts

@@ -0,0 +1,3 @@
+import { WdIcon } from './wd-icon';
+export { WdIcon, type WdIconProps } from './wd-icon';
+export default WdIcon;

package/dist/web/components/wd-icon/wd-icon.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { CommonPropsType, unknownFunction } from '../../types';
+import type { DataType } from '../../../configs/components/wd-icon';
+import '../style';
+export declare const WdIcon: React.ForwardRefExoticComponent<WdIconProps & React.RefAttributes<unknown>>;
+export interface WdIconProps extends CommonPropsType, DataType {
+    [handlers: `on${string}`]: unknownFunction;
+}

package/dist/web/components/wd-icon/wd-icon.js

@@ -7,7 +7,7 @@ import { usePlatform } from '../../utils/platform';
 import { convertLegacyEnum } from '../../utils/tool';
 import { WD_ICON_TYPE, WD_ICON_SIZE } from '../../../enum';
 import '../style';
-export const WdIcon = forwardRef(function WdIcon({ type: _type = 'inner', name, src, size: _size, events = emptyObject, className, style: _style, id, color: _color, ...props }, ref) {
+export const WdIcon = forwardRef(function WdIcon({ type: _type = 'inner', name = 'success', src, size: _size = 'md', events = emptyObject, className, style: _style, id, color: _color, ...props }, ref) {
     const [isError, setIsError] = useState(false);
     const platform = usePlatform();
     // 兼容旧版组件的属性值 size/color
@@ -22,7 +22,9 @@ export const WdIcon = forwardRef(function WdIcon({ type: _type = 'inner', name,
     const style = { ...fontSize, ...width, ...height, ...color, ..._style };
     // 枚举转换
     const type = convertLegacyEnum(_type, WD_ICON_TYPE);
-    const size = convertLegacyEnum(_size, WD_ICON_SIZE);
+    const size = ['xxs'].includes(_size)
+        ? _size
+        : convertLegacyEnum(_size, WD_ICON_SIZE); // 不对外暴露的size属性值
     // 样式
     const { classPrefix } = useConfig();
     const compClassName = `${classPrefix}-icon`;