@cloudbase/weda-ui 3.4.8 → 3.4.9

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

@@ -0,0 +1,382 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint max-lines: [error, 500] */
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { useDebouncedCallback, useMap, useMountEffect, useSyncedRef, } from '@react-hookz/web';
+import { isInIde, usePlatform } from '../../utils/platform';
+import { ConfigProvider, Form as TeaForm } from 'tea-component';
+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 * as tcbAppCloud from '../../utils/tcb';
+import { useRemoteValue } 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';
+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, paramGetItem, appCloud = tcbAppCloud, 
+    // 兼容流程setValue调用，其他地方别用
+    $node, } = props;
+    const formItemMap = useMap([]);
+    /**
+     * 根据他的文档
+     * 上面返回的 formItemMap 引用会保持不变，但是Map的方法会导致重渲染
+     * 所以要用它作useEffect deps的时候用下面这个string
+     *  */
+    const formItemMapKey = [...formItemMap.keys()].sort().join(',');
+    const platform = usePlatform();
+    const contentSlot = useMemo(() => contentSlotEl, [contentSlotEl]);
+    const cls = classNames({
+        'weda-ui': true,
+        'weda-form': true,
+        'weui-form': platform === 'h5',
+        'weda-form-pc': platform === 'pc',
+        'gsd-h5-react-form-pc': platform === 'pc',
+    }, className);
+    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 = [];
+        formItemMap.forEach((item) => {
+            if (!item)
+                return;
+            if (item.handleValidate) {
+                const validate = item.handleValidate();
+                const { name } = item;
+                if (validate) {
+                    validatePromise.push(validate);
+                    validateKey.push(name);
+                }
+            }
+        });
+        let errorArr = await Promise.all(validatePromise);
+        const errObj = {};
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        errorArr = errorArr.filter((item, index) => {
+            if ((item !== null && item !== void 0 ? item : []).length) {
+                errObj[validateKey[index]] = item;
+            }
+            return (item === null || item === void 0 ? void 0 : item.length) > 0;
+        });
+        if (Object.keys(errObj).length > 0) {
+            console.error(errObj);
+        }
+        return errObj;
+    }, [formItemMap]);
+    const [errors, setErrors] = useState(undefined);
+    const submit = useCallback(async () => {
+        const { submit } = eventsRef.current;
+        const errorObj = await validate();
+        if (Object.keys(errorObj !== null && errorObj !== void 0 ? errorObj : {}).length === 0) {
+            const formData = getFormDataFromItemMap(formItemMap);
+            const extra = ['read', 'edit'].includes(formType) && _id ? { _id } : {};
+            submit && submit(JSON.parse(JSON.stringify({ ...extra, ...formData })));
+            // 流程用了;
+            return formData;
+        }
+        else {
+            setErrors(errorObj);
+        }
+    }, [_id, eventsRef, formItemMap, formType, validate]);
+    const updateFormContext = useCallback(() => {
+        Promise.resolve().then(() => {
+            var _a, _b;
+            const formData = getFormDataFromItemMap(formItemMap);
+            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]);
+    const setValue = useCallback((data, setNull) => {
+        if (typeof data !== 'object' || typeof data === null) {
+            console.warn('setValue data need expect a object but got', data);
+            return;
+        }
+        formItemMap.forEach((item, name) => {
+            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 {
+                setNull && item.setValue(null);
+            }
+        });
+        updateFormContext();
+    }, [formItemMap, updateFormContext]);
+    const clearValidate = useCallback(() => {
+        formItemMap.forEach((item) => {
+            if (!item.clearValidate || typeof item.clearValidate !== 'function') {
+                console.error('表单组件缺少clearValidate方法:', item);
+                return;
+            }
+            item.clearValidate();
+        });
+    }, [formItemMap]);
+    // useWhatChanged([formItemMap, initialValues, submit, validate]);
+    useLoopRenderDetect();
+    const { ready } = useWedaAppContext();
+    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) => {
+                    item.setReadOnly(item.initialDisabled);
+                });
+            }
+        });
+    }, [ready, formType, formItemMap, formItemMapKey]);
+    useMountEffect(() => {
+        logger.debug('formItemMap', formItemMap);
+    });
+    const isDataModel = !['connector', 'custom-connector'].includes(datasourceType); // 是否为数据模型，兼容历史 undefined
+    const { remoteValue: fetchedInitialValues, isLoading: isLoadingInitValues, error: initValueFetchError, } = useRemoteValue({
+        appCloud,
+        formType,
+        _id,
+        // methodCreate,
+        methodGetItem,
+        // methodUpdate,
+        paramGetItem,
+        dataSourceName,
+        isDataModel,
+    });
+    useEffect(() => {
+        if (isLoadingInitValues)
+            return;
+        if (!initValueFetchError && fetchedInitialValues) {
+            /*
+             错误处理放在了 @link {onInitialValuesError}
+             下面是可以拿到data了
+             */
+            // TODO: 有哪些key可以暴露
+            setInitialValues(fetchedInitialValues);
+            setValue(fetchedInitialValues, true);
+        }
+    }, [fetchedInitialValues, initValueFetchError, isLoadingInitValues, setValue]);
+    const { data: dataSourceProfile } = useDataSource();
+    const authValue = useAuthValue({
+        appCloud,
+        isDataModel,
+        dataSourceName,
+    });
+    const onInitDataSourceFieldsWithAuth = useCallback((authValue) => {
+        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]);
+                        }
+                        else {
+                            // 没有匹配到数据源字段，是用户自定义字段默认读写权限
+                        }
+                    }
+                    else {
+                        // 兼容私有化接口不会返回权限相关字段，没有返回默认不校验权限
+                        setStateForAuth('rw');
+                    }
+                }
+            });
+        }
+        catch (error) {
+            formItemMap.forEach((item) => {
+                const setStateForAuth = createSetStateForAuth({
+                    setReadOnly: item.setReadOnly,
+                    setVisible: item.setVisible,
+                });
+                if (!item || !item.setDataSourceFieldsWithAuth)
+                    return;
+                setStateForAuth('rw');
+            });
+            console.error('init form setDataSourceFieldsWithAuth error', error);
+        }
+    }, [formItemMap]);
+    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 });
+            return;
+        }
+        if (!isInIde()) {
+            onInitDataSourceFieldsWithAuth(authValue);
+        }
+    }, [
+        authValue,
+        isDataModel,
+        onInitDataSourceFieldsWithAuth,
+        formItemMap,
+        formItemMapKey,
+    ]);
+    const initedItemMapRef = useRef({});
+    const preFormCtxRef = useRef(null);
+    const [formData, setFormData] = useState(() => getFormDataFromItemMap(formItemMap));
+    React.useImperativeHandle(ref, () => {
+        return {
+            formType,
+            addFormItem(name, formItem) {
+                var _a;
+                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);
+                }
+                return () => {
+                    formItemMap.delete(name);
+                };
+            },
+            setValue,
+            reset() {
+                setValue({}, true);
+            },
+            validate() {
+                return validate();
+            },
+            submit() {
+                return submit();
+            },
+            getConfig() {
+                return {
+                    componentType: 'form',
+                };
+            },
+            initialValues: initialValues,
+            authValue,
+            layout,
+            dataSourceName,
+            value: formData,
+            remoteValue: fetchedInitialValues,
+            updateFormContext,
+            dataSourceProfile,
+            errors,
+            clearValidate,
+        };
+    }, [
+        authValue,
+        dataSourceName,
+        dataSourceProfile,
+        errors,
+        fetchedInitialValues,
+        formItemMap,
+        formType,
+        initialValues,
+        layout,
+        setValue,
+        submit,
+        validate,
+        clearValidate,
+        updateFormContext,
+        formData,
+    ]);
+    const setInitValue = useDebouncedCallback(() => {
+        var _a;
+        for (const [name, formItem] of formItemMap.entries()) {
+            const value = lodashGet(initialValues, name);
+            if (initedItemMapRef.current[name] !== true && value !== undefined) {
+                (_a = formItem.setValue) === null || _a === void 0 ? void 0 : _a.call(formItem, value);
+                initedItemMapRef.current[name] = true;
+            }
+        }
+        updateFormContext();
+    }, [formItemMap, initialValues, updateFormContext], 
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    200);
+    React.useEffect(() => {
+        // 单向 Form向下设置值
+        let setValueReady = false;
+        const timeout = 30;
+        let id;
+        const setValueUntilReady = () => {
+            setValueReady = [...formItemMap.values()].every((item) => !!item.setValue);
+            if (!setValueReady) {
+                // eslint-disable-next-line rulesdir/no-timer
+                id = setTimeout(() => {
+                    setValueUntilReady();
+                }, timeout);
+                return;
+            }
+            if (id) {
+                clearTimeout(id);
+            }
+            setInitValue();
+        };
+        setValueUntilReady();
+        return () => {
+            if (id) {
+                clearTimeout(id);
+            }
+        };
+    });
+    useEffect(() => {
+        formItemMap.forEach((item) => {
+            var _a;
+            (_a = item === null || item === void 0 ? void 0 : item.forceUpdate) === null || _a === void 0 ? void 0 : _a.call(item);
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [layout]);
+    useLayoutEffect(() => {
+        // 兼容流程
+        if ($node) {
+            $node.setValue = setValue;
+            $node.submit = submit;
+            $node.formItems = '为了兼容不报错';
+            return () => {
+                $node.setValue = undefined;
+                $node.submit = undefined;
+                $node.formItems = undefined;
+            };
+        }
+    }, [$node, setValue, submit]);
+    if (platform === 'h5') {
+        return (_jsx("div", { className: cls, style: style, id: id, children: _jsx("div", { className: "weui-cells__group weui-cells__group_form", children: contentSlot }) }));
+    }
+    else {
+        return (_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsx(TeaForm, { layout: layout, className: cls, style: style, id: id, children: 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-icon/wd-icon.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React, { forwardRef, useImperativeHandle } from 'react';
 import classNames from '../../utils/classnames';
 import { emptyObject } from '../../utils/constant';
@@ -62,10 +63,10 @@ export const WdIcon = forwardRef(function WdIcon({ type: _type = 'inner', name,
         };
     }, [type, name, src, size]);
     if (type === 'inner') {
-        return (React.createElement("i", { className: classNames(classes, className), style: style, id: id, onClick: onClick, ...propsStartWithOn }));
+        return (_jsx("i", { className: classNames(classes, className), style: style, id: id, onClick: onClick, ...propsStartWithOn }));
     }
     else {
-        return (React.createElement("img", { className: classNames(classes, className), style: style, id: id, src: src
+        return (_jsx("img", { className: classNames(classes, className), style: style, id: id, src: src
                 ? src
                 : 'https://qcloudimg.tencent-cloud.cn/raw/4a29d51b504f12b4933ce4490110b4dc.svg', onClick: onClick, ...propsStartWithOn }));
     }

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

@@ -1,6 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import { usePlatform } from '../../utils/platform';
-// import { CreatePortal } from '../../utils/hooks/CreatePortal';
+import { CreatePortal } from '../../utils/hooks/CreatePortal';
 import { useGesture } from '@use-gesture/react';
 import { useConfig } from '../../utils/config-context';
 import { useRef } from 'react';
@@ -9,12 +10,15 @@ const ASPECT_RASIO = 1;
 const OFFSET_RASIO = 0.5;
 const SCALE_RASIO_PC = 0.8;
 const SCALE_RASIO_H5 = 1;
-export function ImageInner({ objectFit, style, className, alt, src, isError, setIsError, events, lazyLoad, maskClosable, imgPreview, }) {
+export function ImageInner({ objectFit, style, className, alt, src, isError, setIsError, events, lazyLoad, maskClosable, imgPreview, id, isStopPropagation, }) {
     const { classPrefix } = useConfig();
     const platform = usePlatform();
     const [imgShow, setImgShow] = React.useState(false);
     const imagePreviewRef = useRef();
-    const onMaskClick = () => {
+    const onMaskClick = (e) => {
+        if (isStopPropagation) {
+            e.stopPropagation();
+        }
         if (maskClosable) {
             setImgShow(false);
         }
@@ -72,100 +76,98 @@ export function ImageInner({ objectFit, style, className, alt, src, isError, set
         },
     });
     if (platform === 'h5' || !imgPreview || isError) {
-        return (React.createElement(React.Fragment, null,
-            React.createElement("img", { style: {
-                    objectFit,
-                    ...style,
-                }, className: `${className} wd-h5-image`, alt: alt, src: src, onLoad: (e) => {
-                    const img = e.target;
-                    const { naturalHeight, naturalWidth } = img;
-                    realHeight.current = naturalHeight;
-                    realWidth.current = naturalWidth;
-                    setIsError(false);
-                    events.load && events.load({}, { originEvent: e });
-                }, onError: (e) => {
-                    setIsError(true);
-                    events.error && events.error({}, { originEvent: e });
-                }, onClick: (e) => {
-                    if (imgPreview && !isError) {
-                        setTranslateX(0);
-                        setTranslateY(0);
-                        setPreviewScale(ASPECT_RASIO);
-                        const windowHeight = window.innerHeight;
-                        const windowWidth = window.innerWidth;
-                        const widthRasio = (windowWidth * SCALE_RASIO_H5) / realWidth.current;
-                        const heightRasio = (windowHeight * SCALE_RASIO_H5) / realHeight.current;
-                        const scale = Math.min(widthRasio, heightRasio, ASPECT_RASIO) || ASPECT_RASIO;
-                        setOffsetHeight((windowHeight - realHeight.current * scale) * OFFSET_RASIO);
-                        setOffsetWidth((windowWidth - realWidth.current * scale) * OFFSET_RASIO);
-                        setShowHeight(realHeight.current * scale);
-                        setShowWidth(realWidth.current * scale);
-                        setImgShow(true);
-                    }
-                    events.tap && events.tap({}, { originEvent: e });
-                }, loading: lazyLoad ? 'lazy' : undefined }),
-            imgShow && (
-            // <CreatePortal>
-            React.createElement("div", { className: `${classPrefix}-image-mask`, onClick: onMaskClick },
-                React.createElement("div", { onClick: () => setImgShow(false), className: `${classPrefix}-image-mask__close-btn` },
-                    React.createElement("i", { className: `${classPrefix}-image-mask__icon-close` })),
-                React.createElement("div", { ...bind(), ref: imagePreviewRef, className: `${classPrefix}-image-preview`, style: {
-                        touchAction: 'none',
-                        backgroundImage: `url('${src}')`,
-                        transform: `translate(${translateX}px, ${translateY}px) scale(${previewScale})`,
-                        width: showWidth,
-                        height: showHeight,
-                        marginTop: offsetHeight,
-                        marginLeft: offsetWidth,
-                    } }))
-            // </CreatePortal>
-            )));
+        return (_jsxs(_Fragment, { children: [_jsx("img", { id: id, style: {
+                        objectFit,
+                        ...style,
+                    }, className: `${className} wd-h5-image`, alt: alt, src: src, onLoad: (e) => {
+                        const img = e.target;
+                        const { naturalHeight, naturalWidth } = img;
+                        realHeight.current = naturalHeight;
+                        realWidth.current = naturalWidth;
+                        setIsError(false);
+                        events.load && events.load({}, { originEvent: e });
+                    }, onError: (e) => {
+                        setIsError(true);
+                        events.error && events.error({}, { originEvent: e });
+                    }, onClick: (e) => {
+                        if (isStopPropagation) {
+                            e.stopPropagation();
+                        }
+                        if (imgPreview && !isError) {
+                            setTranslateX(0);
+                            setTranslateY(0);
+                            setPreviewScale(ASPECT_RASIO);
+                            const windowHeight = window.innerHeight;
+                            const windowWidth = window.innerWidth;
+                            const widthRasio = (windowWidth * SCALE_RASIO_H5) / realWidth.current;
+                            const heightRasio = (windowHeight * SCALE_RASIO_H5) / realHeight.current;
+                            const scale = Math.min(widthRasio, heightRasio, ASPECT_RASIO) || ASPECT_RASIO;
+                            setOffsetHeight((windowHeight - realHeight.current * scale) * OFFSET_RASIO);
+                            setOffsetWidth((windowWidth - realWidth.current * scale) * OFFSET_RASIO);
+                            setShowHeight(realHeight.current * scale);
+                            setShowWidth(realWidth.current * scale);
+                            setImgShow(true);
+                        }
+                        events.tap && events.tap({}, { originEvent: e });
+                    }, loading: lazyLoad ? 'lazy' : undefined }), imgShow && (_jsx(CreatePortal, { className: `${classPrefix}-image-preview-container`, children: _jsxs("div", { className: `${classPrefix}-image-mask`, onClick: onMaskClick, children: [_jsx("div", { onClick: (e) => {
+                                    if (isStopPropagation) {
+                                        e.stopPropagation();
+                                    }
+                                    setImgShow(false);
+                                }, className: `${classPrefix}-image-mask__close-btn`, children: _jsx("i", { className: `${classPrefix}-image-mask__icon-close` }) }), _jsx("div", { ...bind(), ref: imagePreviewRef, className: `${classPrefix}-image-preview`, style: {
+                                    touchAction: 'none',
+                                    backgroundImage: `url('${src}')`,
+                                    transform: `translate(${translateX}px, ${translateY}px) scale(${previewScale})`,
+                                    width: showWidth,
+                                    height: showHeight,
+                                    marginTop: offsetHeight,
+                                    marginLeft: offsetWidth,
+                                } })] }) }))] }));
     }
     else {
-        return (React.createElement(React.Fragment, null,
-            React.createElement("img", { style: {
-                    objectFit,
-                    cursor: 'zoom-in',
-                    ...style,
-                }, className: `${className} wd-pc-image`, alt: alt, src: src, onLoad: (e) => {
-                    const img = e.target;
-                    const { naturalHeight, naturalWidth } = img;
-                    realHeight.current = naturalHeight;
-                    realWidth.current = naturalWidth;
-                    setIsError(false);
-                    events.load && events.load({}, { originEvent: e });
-                }, onError: (e) => {
-                    setIsError(true);
-                    events.error && events.error({}, { originEvent: e });
-                }, loading: lazyLoad ? 'lazy' : undefined, onClick: (e) => {
-                    if (imgPreview && !isError) {
-                        const windowHeight = window.innerHeight;
-                        const windowWidth = window.innerWidth;
-                        const widthRasio = (windowWidth * SCALE_RASIO_PC) / realWidth.current;
-                        const heightRasio = (windowHeight * SCALE_RASIO_PC) / realHeight.current;
-                        const scale = Math.min(widthRasio, heightRasio, ASPECT_RASIO) || ASPECT_RASIO;
-                        setOffsetHeight((windowHeight - realHeight.current * scale) * OFFSET_RASIO);
-                        setOffsetWidth((windowWidth - realWidth.current * scale) * OFFSET_RASIO);
-                        setShowHeight(realHeight.current * scale);
-                        setShowWidth(realWidth.current * scale);
-                        setImgShow(true);
-                    }
-                    events.tap && events.tap({}, { originEvent: e });
-                } }),
-            imgShow && (
-            // <CreatePortal>
-            React.createElement("div", { className: `${classPrefix}-image-mask`, onClick: onMaskClick },
-                React.createElement("div", { onClick: () => setImgShow(false), className: `${classPrefix}-image-mask__close-btn` },
-                    React.createElement("i", { className: `${classPrefix}-image-mask__icon-close` })),
-                React.createElement("div", { ...bind(), className: `${classPrefix}-image-preview`, style: {
-                        touchAction: 'none',
-                        backgroundImage: `url('${src}')`,
-                        width: showWidth,
-                        height: showHeight,
-                        marginTop: offsetHeight,
-                        marginLeft: offsetWidth,
-                    } }))
-            // </CreatePortal>
-            )));
+        return (_jsxs(_Fragment, { children: [_jsx("img", { id: id, style: {
+                        objectFit,
+                        cursor: 'zoom-in',
+                        ...style,
+                    }, className: `${className} wd-pc-image`, alt: alt, src: src, onLoad: (e) => {
+                        const img = e.target;
+                        const { naturalHeight, naturalWidth } = img;
+                        realHeight.current = naturalHeight;
+                        realWidth.current = naturalWidth;
+                        setIsError(false);
+                        events.load && events.load({}, { originEvent: e });
+                    }, onError: (e) => {
+                        setIsError(true);
+                        events.error && events.error({}, { originEvent: e });
+                    }, loading: lazyLoad ? 'lazy' : undefined, onClick: (e) => {
+                        if (isStopPropagation) {
+                            e.stopPropagation();
+                        }
+                        if (imgPreview && !isError) {
+                            const windowHeight = window.innerHeight;
+                            const windowWidth = window.innerWidth;
+                            const widthRasio = (windowWidth * SCALE_RASIO_PC) / realWidth.current;
+                            const heightRasio = (windowHeight * SCALE_RASIO_PC) / realHeight.current;
+                            const scale = Math.min(widthRasio, heightRasio, ASPECT_RASIO) || ASPECT_RASIO;
+                            setOffsetHeight((windowHeight - realHeight.current * scale) * OFFSET_RASIO);
+                            setOffsetWidth((windowWidth - realWidth.current * scale) * OFFSET_RASIO);
+                            setShowHeight(realHeight.current * scale);
+                            setShowWidth(realWidth.current * scale);
+                            setImgShow(true);
+                        }
+                        events.tap && events.tap({}, { originEvent: e });
+                    } }), imgShow && (_jsx(CreatePortal, { className: `${classPrefix}-image-preview-container`, children: _jsxs("div", { className: `${classPrefix}-image-mask`, onClick: onMaskClick, children: [_jsx("div", { onClick: (e) => {
+                                    if (isStopPropagation) {
+                                        e.stopPropagation();
+                                    }
+                                    setImgShow(false);
+                                }, className: `${classPrefix}-image-mask__close-btn`, children: _jsx("i", { className: `${classPrefix}-image-mask__icon-close` }) }), _jsx("div", { ...bind(), className: `${classPrefix}-image-preview`, style: {
+                                    touchAction: 'none',
+                                    backgroundImage: `url('${src}')`,
+                                    width: showWidth,
+                                    height: showHeight,
+                                    marginTop: offsetHeight,
+                                    marginLeft: offsetWidth,
+                                } })] }) }))] }));
     }
 }

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

@@ -1,4 +1,5 @@
-import React, { forwardRef, useImperativeHandle, useState, useMemo, } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useState, useMemo, } from 'react';
 import classNames from '../../utils/classnames';
 import { ImageInner } from './image';
 import { emptyObject } from '../../utils/constant';
@@ -8,7 +9,7 @@ export default forwardRef(function WdImage({
 // 系统属性
 className, events = emptyObject, style, 
 // 组件属性
-src, alt, mode, lazyLoad, imgPreview, maskClosable, fit, }, ref) {
+src, alt, mode, lazyLoad, imgPreview, maskClosable, fit, id, isStopPropagation = false, }, ref) {
     const [isError, setIsError] = useState(false);
     const { classPrefix } = useConfig();
     const cls = classNames({
@@ -59,7 +60,7 @@ src, alt, mode, lazyLoad, imgPreview, maskClosable, fit, }, ref) {
             alt,
         };
     }, [fit, src, alt]);
-    return src === realSrc || (realSrc !== undefined && src !== realSrc) ? (React.createElement(ImageInner, { objectFit: realFit, style: realStyle, className: cls, alt: alt, src: realSrc, isError: isError, setIsError: setIsError, events: events, lazyLoad: lazyLoad, imgPreview: imgPreview, maskClosable: maskClosable })) : null;
+    return src === realSrc || (realSrc !== undefined && src !== realSrc) ? (_jsx(ImageInner, { objectFit: realFit, style: realStyle, className: cls, alt: alt, src: realSrc, isError: isError, setIsError: setIsError, events: events, lazyLoad: lazyLoad, imgPreview: imgPreview, maskClosable: maskClosable, id: id, isStopPropagation: isStopPropagation })) : null;
 });
 function getObjectFitByWxImageMode(mode) {
     const array = [